/*
Theme Name: Coon 'n Crockett
Theme URI: https://coon-n-crockett.org/
Author: Coon 'n Crockett Editorial
Description: Engineering field-manual archetype theme for a muzzleloading, black-powder, and Old-West heritage reference. Self-hosted fonts, vanilla CSS, no third-party CDNs.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cnc
Tags: custom-menu, featured-images, translation-ready
*/

/* ============ Self-hosted fonts (no Google CDN) ============ */
@font-face {
  font-family: 'Marcellus SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/marcellus-sc-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/bitter-var.woff2') format('woff2');
}

/* ============ Tokens ============ */
:root {
  /* Frontier / saddle-leather + iron palette (warmer, darker than the lab-notebook original) */
  --cnc-parchment: #ddc9a3;   /* aged buckskin paper */
  --cnc-gunmetal: #2b2118;    /* dark walnut / iron-brown ink */
  --cnc-tan: #9a4a1f;         /* rust / barn-red leather accent */
  --cnc-brass: #b07d3c;       /* brass furniture */
  --cnc-paper: #f3e8cf;       /* lighter aged paper for frames */
  --cnc-rule: #2b2118;
  --cnc-maxw: 1440px;
}

/* ============ Base ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Bitter', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cnc-gunmetal);
  background-color: var(--cnc-parchment);
  /* Aged-paper texture: layered fibrous tints, no rigid graph grid */
  background-image:
    radial-gradient(circle at 20% 15%, rgba(154,74,31,0.05) 0, transparent 35%),
    radial-gradient(circle at 85% 60%, rgba(43,33,24,0.06) 0, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(154,74,31,0.04) 0, transparent 45%),
    repeating-linear-gradient(0deg, rgba(43,33,24,0.020) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(43,33,24,0.015) 0 1px, transparent 1px 5px);
  background-attachment: fixed;
}
h1, h2, h3, h4 {
  font-family: 'Marcellus SC', 'Bitter', serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--cnc-gunmetal);
  text-transform: uppercase;
}
a { color: var(--cnc-gunmetal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--cnc-tan); }
img { max-width: 100%; height: auto; display: block; }
.cnc-mono { font-family: 'Bitter', monospace; font-variant-numeric: tabular-nums; }

.cnc-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: var(--cnc-maxw);
  margin: 0 auto;
  border-left: 1px solid rgba(51,65,78,0.2);
  border-right: 1px solid rgba(51,65,78,0.2);
}

/* ============ Header ============ */
.cnc-head {
  border-bottom: 4px solid var(--cnc-gunmetal);
  background: var(--cnc-parchment);
  position: sticky;
  top: 0;
  z-index: 50;
}
.cnc-head-row { display: flex; align-items: stretch; }
.cnc-mark {
  padding: 0.85rem 1.1rem;
  border-right: 2px solid var(--cnc-gunmetal);
  display: flex; align-items: center; justify-content: center;
  background: var(--cnc-gunmetal);
}
.cnc-mark svg { width: 58px; height: 84px; display: block; }
.cnc-head-main { flex: 1; display: flex; flex-direction: column; }
.cnc-stamp {
  padding: 0.6rem 2rem;
  border-bottom: 1px solid var(--cnc-gunmetal);
  display: flex; justify-content: space-between; gap: 1rem;
  background: var(--cnc-gunmetal); color: var(--cnc-parchment);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em;
}
.cnc-brandbar { padding: 1.1rem 2rem; display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.cnc-brand { font-family: 'Marcellus SC', serif; font-size: 2rem; text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; }
.cnc-nav { display: flex; gap: 0.9rem; align-items: center; flex-wrap: nowrap; }
.cnc-nav a { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cnc-nav .current-menu-item > a, .cnc-nav a.cnc-here { text-decoration: underline; text-decoration-thickness: 2px; }
.cnc-nav ul { list-style: none; display: flex; gap: 0.9rem; margin: 0; padding: 0; flex-wrap: nowrap; }
.cnc-navtoggle { display: none; background: none; border: 1px solid var(--cnc-gunmetal); padding: 0.4rem 0.7rem; cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; }

/* ============ Layout ============ */
.cnc-body { flex: 1; display: flex; justify-content: center; }
.cnc-content { flex: 1 1 auto; max-width: 46rem; min-width: 0; padding: 0 2rem; }

/* Cornerstone inner row: the rail + reading column live here, on a single
   element inside header's .cnc-body (no duplicate body wrapper). Stretches to
   the body width and centers its children. */
.cnc-railrow { flex: 1; display: flex; justify-content: center; }

/* Cornerstone reading pages: single column, centered on the page.
   flex-grow is dropped so the column keeps its measure and margin:auto
   centers it instead of growing flush-left inside the flex row. */
.page-template-template-cornerstone .cnc-content { flex: 0 1 auto; max-width: 60rem; margin: 0 auto; }

/* ============ Section side-rail (ledger index) ============
   A field-manual contents column, not a floating TOC card. Reuses the
   theme motifs: Bitter-mono uppercase labels, a gunmetal rule down the
   side (same as the header border-right), roman numerals like a manual's
   contents, and the tan active-underline. Pure-anchor links — works with
   JS off; scroll-spy (.cnc-here) is progressive enhancement only. */
.cnc-has-rail { align-items: flex-start; gap: 2.5rem; }
.cnc-has-rail .cnc-content { margin: 0; }   /* rail + column form the centered pair */

.cnc-rail {
  flex: 0 0 14rem;
  position: sticky;
  top: 6.5rem;            /* clears the sticky header */
  align-self: flex-start;
  padding-left: 1.1rem;
  border-left: 2px solid var(--cnc-gunmetal);
  font-family: 'Bitter', monospace;
}
.cnc-rail-head {
  display: block;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--cnc-tan);
  margin-bottom: 0.9rem;
}
.cnc-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cnc-rail-list a {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.4rem 0;
  text-decoration: none;
  color: var(--cnc-gunmetal);
  line-height: 1.3;
}
.cnc-rail-num { font-size: 0.7rem; opacity: 0.55; min-width: 1.6rem; letter-spacing: 0.05em; }
.cnc-rail-label { font-size: 0.82rem; }
.cnc-rail-list a:hover .cnc-rail-label,
.cnc-rail-list a:focus-visible .cnc-rail-label { color: var(--cnc-tan); }
.cnc-rail-list a.cnc-here .cnc-rail-label {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; font-weight: 700;
}

@media (max-width: 980px) {
  /* collapse to a horizontal "jump to" strip above the prose,
     the same pattern the header nav uses on small screens */
  .cnc-has-rail { flex-direction: column; gap: 0; }
  .cnc-rail {
    position: static; flex-basis: auto; width: 100%;
    border-left: 0; border-bottom: 2px solid var(--cnc-gunmetal);
    padding-left: 0; padding-bottom: 0.75rem; margin: 0 2rem 1.5rem;
  }
  .cnc-rail-list { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .cnc-rail-list a { padding: 0.5rem 0; min-height: 44px; }
}
@media (max-width: 820px) {
  .cnc-rail { margin: 0 1.25rem 1.5rem; }
}

/* ============ Sections ============ */
.cnc-section { padding: 4rem 3rem; border-bottom: 2px solid var(--cnc-gunmetal); }
.cnc-eyebrow { font-family: 'Bitter', monospace; font-size: 0.85rem; font-weight: 700; color: var(--cnc-tan); display: block; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.12em; }
/* shared section heading + lede (replaces per-instance inline styles) */
.cnc-sec-h2 { font-size: 2rem; margin: 0 0 1rem; border-bottom: 2px solid var(--cnc-gunmetal); padding-bottom: 0.5rem; }
.cnc-sec-lede { max-width: 46rem; margin: 0 0 2rem; }
.cnc-readon-wrap { margin-top: 1.5rem; }
.cnc-postitem { margin-bottom: 2.5rem; }
.cnc-postitem h2 { margin: 0 0 0.5rem; }
.cnc-hero h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin: 0 0 1.5rem; }
.cnc-hero .cnc-lede { font-size: clamp(1.1rem, 2vw, 1.45rem); font-style: italic; max-width: 46rem; margin: 0 0 2.5rem; }
.cnc-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.cnc-btn { padding: 0.75rem 2rem; text-transform: uppercase; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-decoration: none; display: inline-block; transition: background-color .15s, color .15s; }
.cnc-btn-solid { background: var(--cnc-gunmetal); color: var(--cnc-parchment); }
.cnc-btn-solid:hover { background: var(--cnc-tan); color: var(--cnc-parchment); }
.cnc-btn-ghost { border: 2px solid var(--cnc-gunmetal); color: var(--cnc-gunmetal); }
.cnc-btn-ghost:hover { background: var(--cnc-gunmetal); color: var(--cnc-parchment); }

/* Homepage: wider column than article prose so the card grid can breathe */
.cnc-home { max-width: 64rem; }
.cnc-hero { padding-bottom: 3rem; }
.cnc-hero-intro {
  margin: 2.5rem 0 0; max-width: 42rem;
  font-size: 1.02rem; line-height: 1.75; color: var(--cnc-gunmetal);
}

/* Figure teaser grid */
.cnc-figs { display: grid; grid-template-columns: repeat(2, 1fr); }
.cnc-figs-head {
  grid-column: 1 / -1; padding: 2.5rem 3rem 1.5rem;
  border-bottom: 2px solid var(--cnc-gunmetal);
}
.cnc-figs-head h2 { font-size: 2rem; margin: 0; }
.cnc-figs-head .cnc-eyebrow { margin-bottom: 0.5rem; }
/* Topic cards — the whole card is one link (no nested redundant link) */
.cnc-topic {
  display: flex; flex-direction: column;
  padding: 2.5rem 3rem; text-decoration: none; color: var(--cnc-gunmetal);
  border-bottom: 2px solid var(--cnc-gunmetal);
}
.cnc-topic:nth-child(odd) { border-right: 1px solid var(--cnc-gunmetal); }
.cnc-topic { transition: background-color .15s, box-shadow .15s; }
.cnc-topic:hover { background: rgba(154,74,31,0.06); box-shadow: inset 4px 0 0 var(--cnc-tan); }
.cnc-topic-icon {
  color: var(--cnc-tan); width: 6rem; height: 3.6rem;
  display: block; margin-bottom: 1.25rem;
}
.cnc-topic-icon svg { width: 100%; height: 100%; }
.cnc-topic h3 { font-size: 1.5rem; text-transform: uppercase; margin: 0 0 0.6rem; }
.cnc-topic h3 a { color: var(--cnc-gunmetal); text-decoration: none; }
.cnc-topic h3 a:hover { color: var(--cnc-tan); }
.cnc-topic p { font-size: 0.95rem; margin: 0 0 1rem; line-height: 1.6; }
/* spoke list under each hub — the silo, shown on the home page */
.cnc-topic-spokes {
  list-style: none; margin: 0 0 1.25rem; padding: 0.75rem 0 0;
  border-top: 1px solid rgba(43,33,24,0.18);
}
.cnc-topic-spokes li { margin: 0 0 0.45rem; padding-left: 1.1rem; position: relative; }
.cnc-topic-spokes li::before {
  content: '\203A'; position: absolute; left: 0; top: -0.05rem;
  color: var(--cnc-tan); font-weight: 700;
}
.cnc-topic-spokes a {
  font-family: 'Bitter', serif; font-size: 0.9rem; line-height: 1.4;
  color: var(--cnc-gunmetal); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cnc-topic-spokes a:hover { border-bottom-color: var(--cnc-tan); }
.cnc-topic-go {
  margin-top: auto;
  font-family: 'Bitter', monospace; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--cnc-tan);
  text-decoration: none;
}
.cnc-topic-go:hover { text-decoration: underline; text-underline-offset: 3px; }

/* in-prose article plates (cornerstone pages) keep the framed look */
.cnc-frame { border: 1px solid var(--cnc-gunmetal); background: var(--cnc-paper); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: 1.5rem; margin-bottom: 1.5rem; }
.cnc-frame svg { width: 100%; height: auto; }

/* Ledger table */
.cnc-ledger-wrap { overflow-x: auto; }
.cnc-ledger { width: 100%; border-collapse: collapse; border: 1px solid var(--cnc-gunmetal); }
.cnc-ledger thead { background: var(--cnc-gunmetal); color: var(--cnc-parchment); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.cnc-ledger th, .cnc-ledger td { padding: 0.9rem 1rem; border: 1px solid var(--cnc-gunmetal); text-align: left; }
.cnc-ledger tbody tr:hover { background: rgba(51,65,78,0.05); }
.cnc-ledger .cnc-term { font-family: 'Bitter', monospace; font-weight: 700; }

/* prose (pages, single) */
.cnc-prose { max-width: 48rem; }
.page-template-template-cornerstone .cnc-prose { max-width: none; }
.cnc-prose h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1.5rem; }
.cnc-prose h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; border-bottom: 1px solid var(--cnc-gunmetal); padding-bottom: 0.5rem; }
.cnc-prose h3 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.cnc-prose ul { padding-left: 1.25rem; }
.cnc-prose li { margin-bottom: 0.4rem; }

/* prose figures (figure-numbered, in-flow) — field-manual visual language */
.cnc-prose figure.cnc-plate { margin: 2.75rem 0; max-width: none; }
.cnc-prose .cnc-plate .cnc-frame { aspect-ratio: auto; padding: 2rem; }
.cnc-prose .cnc-plate figcaption {
  font-family: 'Bitter', monospace; font-size: 0.78rem; letter-spacing: 0.04em;
  border-top: 1px solid var(--cnc-gunmetal); margin-top: 0.6rem; padding-top: 0.5rem;
}
.cnc-prose .cnc-plate figcaption b { font-family: 'Marcellus SC', serif; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; }
/* per-mechanism animated line diagram (narrower detail inset than a full plate) */
.cnc-prose figure.cnc-mech { margin: 1.75rem auto 2.25rem; max-width: 32rem; }
.cnc-prose .cnc-mech .cnc-frame { aspect-ratio: auto; padding: 1.25rem 1.5rem; }
.cnc-prose .cnc-mech svg { width: 100%; height: auto; display: block; }
.cnc-prose .cnc-mech figcaption { font-family: 'Bitter', monospace; font-size: 0.74rem; letter-spacing: 0.03em; color: var(--cnc-ink-soft, #5a4a36); border-top: 1px solid var(--cnc-gunmetal); margin-top: 0.55rem; padding-top: 0.45rem; }
/* per-mechanism diagram animations — defined ONCE here, scoped to .cnc-mech parts
   (the SVGs carry no <style> blocks of their own, which would leak document-wide) */
.cnc-mech [data-anim="serp"] { transform-origin: 250px 150px; animation: cnc-serp 3.2s ease-in-out infinite; }
.cnc-mech [data-anim="serp-flash"] { animation: cnc-mflash 3.2s ease-in-out infinite; }
.cnc-mech [data-anim="wheel"] { transform-origin: 170px 150px; animation: cnc-spin 1.1s linear infinite; }
.cnc-mech [data-anim="wheel-spark"] { animation: cnc-wspark 1.1s ease-out infinite; }
.cnc-mech [data-anim="cock"] { transform-origin: 178px 150px; animation: cnc-cock 3.4s ease-in-out infinite; }
.cnc-mech [data-anim="friz"] { transform-origin: 226px 150px; animation: cnc-friz 3.4s ease-in-out infinite; }
.cnc-mech [data-anim="flint-spark"] { animation: cnc-fspark 3.4s ease-out infinite; }
.cnc-mech [data-anim="ham"] { transform-origin: 150px 150px; animation: cnc-ham 2.8s ease-in-out infinite; }
.cnc-mech [data-anim="ham-flash"] { animation: cnc-pflash 2.8s ease-out infinite; }
@keyframes cnc-serp { 0%,30%{transform:rotate(0)} 56%,72%{transform:rotate(40deg)} 100%{transform:rotate(0)} }
@keyframes cnc-mflash { 0%,54%{opacity:0} 60%,70%{opacity:.95} 82%,100%{opacity:0} }
@keyframes cnc-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes cnc-wspark { 0%{opacity:0} 15%{opacity:1} 60%,100%{opacity:0} }
@keyframes cnc-cock { 0%,28%{transform:rotate(0)} 52%,72%{transform:rotate(64deg)} 100%{transform:rotate(0)} }
@keyframes cnc-friz { 0%,40%{transform:rotate(0)} 54%,72%{transform:rotate(-72deg)} 100%{transform:rotate(0)} }
@keyframes cnc-fspark { 0%,46%{opacity:0} 55%{opacity:1} 74%,100%{opacity:0} }
@keyframes cnc-ham { 0%,34%{transform:rotate(0)} 55%,74%{transform:rotate(52deg)} 100%{transform:rotate(0)} }
@keyframes cnc-pflash { 0%,54%{opacity:0} 60%{opacity:1} 78%,100%{opacity:0} }
.cnc-prose .cnc-ledger-wrap { margin: 2rem 0; }
.cnc-prose blockquote {
  margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--cnc-tan); font-style: italic; color: var(--cnc-gunmetal);
}
.cnc-prose .cnc-key {
  margin: 2.25rem 0; padding: 1.25rem 1.5rem; background: var(--cnc-paper);
  border: 1px solid var(--cnc-gunmetal); box-shadow: 4px 4px 0 var(--cnc-gunmetal);
}
.cnc-prose .cnc-key .cnc-key-head {
  font-family: 'Marcellus SC', serif; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.95rem; display: block; margin-bottom: 0.5rem;
}
.cnc-prose .cnc-key p { margin: 0; }

/* FAQ — field-manual "queries" ledger; NOT a tinted/border-l-4 callout (anti-slop) */
.cnc-faq { margin: 2.75rem 0; }
.cnc-faq h2 { border-bottom: none; }
.cnc-faq details {
  border: 1px solid var(--cnc-gunmetal); border-bottom-width: 2px;
  background: var(--cnc-paper); margin-bottom: 0.85rem;
}
.cnc-faq summary {
  cursor: pointer; padding: 1rem 1.25rem; list-style: none;
  font-family: 'Marcellus SC', serif; font-size: 1.05rem; letter-spacing: 0.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.cnc-faq summary::-webkit-details-marker { display: none; }
.cnc-faq summary::after {
  content: '+'; font-family: 'Bitter', monospace; font-weight: 700;
  color: var(--cnc-tan); font-size: 1.4rem; line-height: 1;
}
.cnc-faq details[open] summary::after { content: '\2212'; }
.cnc-faq details[open] summary { border-bottom: 1px solid var(--cnc-gunmetal); }
.cnc-faq details > p, .cnc-faq details > ul { padding: 0 1.25rem; }
.cnc-faq details > p:first-of-type { padding-top: 1rem; }
.cnc-faq details > *:last-child { margin-bottom: 1rem; }

/* cross-links row at chapter foot */
.cnc-relrow { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--cnc-gunmetal); display: flex; flex-wrap: wrap; gap: 1rem; }
.cnc-relrow a { font-family: 'Bitter', monospace; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cnc-tan); }

/* "read on" mono-link — sits on parchment at small size, so gunmetal text (AA) + tan on hover */
.cnc-readon { font-family: 'Bitter', monospace; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cnc-gunmetal); text-decoration: none; }
.cnc-readon:hover { color: var(--cnc-tan); text-decoration: underline; text-underline-offset: 3px; }

/* ============ Footer ============ */
.cnc-foot { background: var(--cnc-gunmetal); color: var(--cnc-parchment); padding: 3rem; border-top: 8px solid var(--cnc-tan); }
.cnc-foot a { color: var(--cnc-parchment); }
.cnc-foot-grid { max-width: var(--cnc-maxw); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; }
.cnc-foot h4 { font-family: 'Marcellus SC', serif; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 1rem; color: var(--cnc-parchment); }
.cnc-foot-tag { font-family: 'Bitter', monospace; font-size: 0.75rem; opacity: 0.7; line-height: 1.6; max-width: 22rem; }
.cnc-foot-cols { display: flex; flex-wrap: wrap; gap: 3rem; }
.cnc-foot-col { list-style: none; margin: 0; padding: 0; font-family: 'Bitter', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; }
.cnc-foot-col li { margin-bottom: 0.5rem; }
.cnc-foot-col .cnc-foot-head { color: var(--cnc-parchment); margin-bottom: 1rem; font-weight: 700; border-bottom: 1px solid var(--cnc-tan); padding-bottom: 0.4rem; }
.cnc-foot-base { max-width: var(--cnc-maxw); margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(232,220,192,0.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: 'Bitter', monospace; font-size: 0.7rem; opacity: 0.55; }

/* ============ Breadcrumbs ============ */
.cnc-crumbs { margin: 0 0 1.25rem; font-family: 'Bitter', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.cnc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.cnc-crumbs li { display: inline; color: var(--cnc-gunmetal); opacity: 0.75; }
.cnc-crumbs li + li::before { content: '\203A'; margin: 0 0.55rem; color: var(--cnc-tan); opacity: 1; }
.cnc-crumbs a { color: var(--cnc-tan); text-decoration: none; }
.cnc-crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cnc-crumbs li[aria-current="page"] { font-weight: 700; opacity: 1; }

/* ============ Hub navigation cards (Field-Manual plates, not stock cards) ============ */
.cnc-hubnav { margin: 3rem 0 1rem; padding-top: 1.75rem; border-top: 2px solid var(--cnc-gunmetal); }
.cnc-hubnav-head { font-family: 'Marcellus SC', serif; font-size: 1.35rem; margin: 0 0 1.25rem; }
.cnc-hubnav-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.cnc-hubnav-grid > li { margin: 0; }
.cnc-hubcard {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.4rem 1.5rem; text-decoration: none; color: var(--cnc-gunmetal);
  background: var(--cnc-paper);
  border: 1px solid var(--cnc-gunmetal);
  box-shadow: 4px 4px 0 var(--cnc-gunmetal);            /* hard offset, no blur — the site's plate motif */
  transition: transform .12s, box-shadow .12s;
}
.cnc-hubcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cnc-tan); }
.cnc-hubcard-title { font-family: 'Marcellus SC', serif; font-size: 1.15rem; margin-bottom: 0.4rem; }
.cnc-hubcard-blurb { font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.9rem; }
.cnc-hubcard-go { margin-top: auto; font-family: 'Bitter', monospace; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cnc-tan); }
/* two-up when a hub has several spokes and there's room */
@media (min-width: 620px) { .cnc-hubnav-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ Responsive ============ */
@media (max-width: 820px) {
  .cnc-content { padding: 0 1.25rem; }
  .cnc-figs-head { padding: 2rem 1.25rem 1.25rem; }
  .cnc-figs { grid-template-columns: 1fr; }
  .cnc-topic:nth-child(odd) { border-right: none; }
  .cnc-navtoggle { display: inline-block; padding: 0.6rem 0.9rem; min-height: 44px; }
  .cnc-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-top: 1rem; }
  .cnc-nav.cnc-open { display: flex; }
  .cnc-nav ul { flex-direction: column; gap: 0.25rem; width: 100%; }
  .cnc-nav a { display: block; width: 100%; padding: 0.6rem 0; }
  .cnc-section, .cnc-topic { padding: 2rem 1.25rem; }
  .cnc-stamp { font-size: 0.6rem; padding: 0.5rem 1.25rem; }
  .cnc-brandbar { padding: 1rem 1.25rem; }
}

/* ============ Accessibility ============ */
/* Visible keyboard focus — tan ring on light surfaces (clears the 3:1 UI bar) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.cnc-topic:focus-visible {
  outline: 3px solid var(--cnc-tan);
  outline-offset: 2px;
}
/* On dark surfaces (header stamp, footer) switch to a parchment ring for contrast */
.cnc-foot a:focus-visible,
.cnc-stamp a:focus-visible,
.cnc-mark a:focus-visible {
  outline-color: var(--cnc-parchment);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}