/* cc.life — Confidently Curious
   Design system: "The Quiet Imprint" · v1.0 · 2026-06-24
   Spine: Direction 3 (Quiet Shelf) — strict palette discipline, museum-label datum
   system, amber-as-guest, no-pure-white rule, big confident type, calm motion.
   Grafts: D1 masthead-between-rules / standfirst / catalog-spine / chapter numerals;
   D2 single paper-grain / "siblings on a shelf" doors.

   THE LOCKED FIVE COLORS ONLY. Caprasimo = wordmark/brand-name text only (always amber).
   Bricolage = all utility type. Caveat Brush = tagline + Confius voice + the hand.
   The family ships NO italic — emphasize with weight/color or Caveat, never synth-italic
   on display/headers. Two marks, never composited.

   Class vocabulary is shared verbatim across all four pages. Edit here only. */

/* ───────────────────────── TOKENS ───────────────────────── */
:root{
  /* The locked five — no others, ever */
  --cream:#FBF8EF;        /* the paper — ~85% of every surface */
  --forest:#2B3210;       /* body text, headlines, anchors, footer ground */
  --moss:#505631;         /* secondary/muted: standfirsts, datum lines, fine print */
  --stone:#E5E2D9;        /* the second paper: alternating tints, wells, pill grounds */
  --amber:#DE6E27;        /* the single accent */
  --amber-dark:#c25c1c;   /* hover ONLY */

  /* Derived (mixed from the five — no new hues) */
  --hairline:color-mix(in srgb, var(--moss) 28%, transparent);   /* low-opacity rules */
  --hairline-strong:color-mix(in srgb, var(--moss) 40%, transparent);
  --foot-muted:color-mix(in srgb, var(--cream) 78%, var(--forest)); /* footer muted text */

  /* Measures — two deliberate widths */
  --maxw:900px;    /* page shell: door pairs + card grids */
  --textw:34rem;   /* running prose — ~66ch book measure */
  --readw:36rem;   /* lead-lines / standfirsts — slightly wider than body */

  /* Spacing ladder (8px base, snapped) */
  --s-1:0.5rem;    /* 8  */
  --s-2:1rem;      /* 16 */
  --s-3:1.5rem;    /* 24 */
  --s-4:2.5rem;    /* 40 */
  --s-5:4rem;      /* 64 */
  --s-6:6rem;      /* 96 */
  --lh:1.6rem;     /* baseline rhythm unit */

  /* The single permitted elevation (one element per page, where lift is earned) */
  --lift:0 1px 2px rgba(43,50,16,.05);

  --r:14px;        /* radius — used sparingly (forms, wells); doors/cards sit flat */
}

/* ───────────────────────── RESET / BASE ───────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  color:var(--forest);
  background:var(--cream);
  font-size:clamp(1.02rem,.97rem + .35vw,1.18rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* One near-invisible paper grain at ~2.5% — the only texture. No vignette, no gradient. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}

/* Body links: Forest ink (12.6:1 on cream, 10.4:1 on stone — clears AA everywhere,
   including small fineprint on .bg-stone) with a persistent amber underline so colour
   is never the only signal. Amber-dark is reserved for the hover/focus moment.
   amber-dark on cream (4.08) / stone (3.35) failed AA as link text — fixed here. */
a{
  color:var(--forest);
  text-decoration:underline;
  text-decoration-color:var(--amber);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease,text-decoration-thickness .15s ease;
}
a:hover{color:var(--amber-dark);text-decoration-color:var(--amber-dark);text-decoration-thickness:2px}

/* Visible focus — accessibility, non-negotiable. Exempt from the amber budget (state, not decor). */
a:focus-visible,button:focus-visible,input:focus-visible,
.door:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
  border-radius:3px;
}

/* ───────────────────────── LAYOUT SHELL ───────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,2.5rem)}
section{padding:clamp(4.5rem,10vw,8rem) 0}
/* A band whose only child is a single well reads as marooned in a tall stone field.
   Tighten its vertical rhythm so the well anchors the band instead of floating in it. */
section.band-tight{padding:clamp(3rem,6vw,4.5rem) 0}

/* Interior text pages: prose left-aligned in an offset book column.
   The umbrella home stays centered (it is a title page) via .umbrella / .hero. */
.lead{max-width:var(--readw)}
.lead p{margin:0 0 var(--s-2)}
.prose{max-width:var(--textw)}
.prose p{margin:0 0 var(--s-2)}

/* Standfirst — the editorial tell. First paragraph of a major section: Bricolage 400,
   lead size, Warm Moss; body then drops to Forest. One per section, max. */
.standfirst{
  max-width:var(--readw);
  font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);
  line-height:1.5;
  color:var(--moss);
  margin:0 0 var(--s-3);
}

em{font-style:italic}      /* browser-synth italic permitted on BODY only, per canon */
strong{font-weight:700}

/* ───────────────────────── TYPE ROLES ───────────────────────── */
/* Caprasimo = wordmark / brand-name only, always amber. At most twice per page
   outside door-names (hero wordmark + footer wordmark). The /confius/ chapter
   numeral is the one sanctioned exception. */
.wordmark{
  font-family:"Caprasimo",Georgia,serif;
  color:var(--amber);
  line-height:1.0;
  letter-spacing:.004em;
  font-weight:400;
}
.wordmark-sm{font-family:"Caprasimo",Georgia,serif;color:var(--amber);font-weight:400;font-size:1.5rem;line-height:1.05;letter-spacing:.004em}
/* Trademark glyph on a wordmark — the <sup> tag already raises it, so DON'T add
   vertical-align:super (that double-raises and can clip the top hairline at 360px).
   0.42em reads as a balanced mark against the heavy Caprasimo weight. */
.wordmark sup{font-size:.42em;letter-spacing:0;top:-.05em}
/* Imprint line — the registrable wordmark set above a catalog entry as the source identifier */
.product .imprint{margin:0 0 var(--s-2)}
.script{font-family:"Caveat Brush",cursive;color:var(--forest);line-height:1.3}

/* Eyebrow / datum line / kicker — the museum-wall-label system */
.est,.eyebrow,.kicker,.datum{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--moss);
}

/* Headlines — weight, not a gradient of sizes */
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;color:var(--forest);margin:0}
/* Base h1 — real-text page titles (e.g. /corrections/). The masthead h1 carries
   .wordmark and is styled separately; this is the Bricolage display scale for any
   bare h1 so it never falls back to the UA serif default. */
h1{
  font-weight:800;
  font-size:clamp(1.9rem,1.3rem + 2vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 var(--s-2);
}
/* The masthead wordmark h1 re-asserts Caprasimo amber; .wordmark already does this,
   but keep the cascade explicit so the base h1 rule above never bleeds into it. */
h1.wordmark{font-family:"Caprasimo",Georgia,serif;font-weight:400;letter-spacing:.004em}
h2{
  font-weight:800;
  font-size:clamp(1.9rem,1.3rem + 2vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 var(--s-2);
}
h3{
  font-weight:700;
  font-size:clamp(1.35rem,3vw,1.75rem);
  line-height:1.12;
  letter-spacing:-.012em;
}

/* Tagline / Confius voice — the hand, rationed (one or two lines per page) */
.tagline{
  font-family:"Caveat Brush",cursive;
  color:var(--forest);
  font-size:clamp(1.5rem,3.5vw,2.1rem);
  line-height:1.3;
  margin:0;
}

.fineprint{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:500;
  font-size:.85rem;
  line-height:1.5;
  color:var(--moss);
  margin:var(--s-2) 0 0;
  max-width:var(--textw);
}

/* ───────────────────────── TOP BAR ───────────────────────── */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:var(--s-3) 0;flex-wrap:wrap}
.topbar .brand{font-family:"Caprasimo",Georgia,serif;color:var(--amber);font-size:1.25rem;text-decoration:none;white-space:nowrap}
.topbar nav a{margin-left:1.1rem;color:var(--forest);text-decoration:none;font-weight:500;font-size:.95rem}
.topbar nav a:hover{color:var(--amber-dark)}

/* ───────────────────────── HERO / MASTHEAD ─────────────────────────
   The title page. Centered, generous air. Masthead set BETWEEN two hairline
   rules (D1 graft) — the strongest "established press, not startup" tell. */
.hero{text-align:center;padding-top:clamp(2.5rem,7vw,4.5rem)}
.hero .mark{width:clamp(88px,9vw,132px);margin:0 auto var(--s-4)}

/* The masthead frame: rules above EST and below the tagline, capped at --readw */
.masthead{max-width:var(--readw);margin:0 auto}
.masthead .rule{height:1px;background:var(--hairline);border:0;margin:0}
.masthead .inner{padding:var(--s-3) 0}
.hero .est{display:block;margin:0 0 var(--s-2)}
.hero .wordmark{
  font-size:clamp(2.8rem,6.5vw,4.75rem);
  margin:0 0 var(--s-2);
}
.hero .tagline{margin:var(--s-1) 0 0}

/* The lead-line + doors begin below the fold, after a generous gap */
.below-fold{margin-top:clamp(4rem,9vw,7rem)}

/* ───────────────────────── BUTTONS ───────────────────────── */
/* Label is Deep Forest on amber. No normal-text label clears 4.5:1 on amber within the
   locked palette, so the label is made WCAG "large text" (weight 700 at ≥14px → 1.02rem
   ≈16.3px qualifies), where the bar relaxes to 3.0:1. Forest-on-amber = 4.06:1 and
   forest-on-amber-dark (hover) = 3.09:1 both clear it, with more headroom than cream
   (3.11 / 3.04). Forest also reads as a deliberate button rather than a link. */
.btn{
  display:inline-block;border:0;cursor:pointer;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.02rem;
  background:var(--amber);color:var(--forest);
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.btn:hover{background:var(--amber-dark);color:var(--forest);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ───────────────────────── FORMS (unwired scaffold pattern) ─────────────────────────
   Plain cream fields (never #fff). Moss hairline, amber focus ring. On submit the JS
   reveals .form-note — which fades up in Caveat Brush like a handwritten margin note. */
.signup{display:flex;gap:.6rem;flex-wrap:wrap;max-width:30rem;margin:var(--s-3) 0 0}
.signup input[type=email]{
  flex:1 1 14rem;padding:.85rem 1rem;
  border:1.5px solid var(--hairline-strong);border-radius:999px;
  font:inherit;background:var(--cream);color:var(--forest);min-width:0;
  transition:border-color .15s ease;
}
.signup input[type=email]:focus{outline:2px solid var(--amber);outline-offset:2px;border-color:var(--amber)}

.form-note{
  display:none;
  margin:var(--s-2) 0 0;
  font-family:"Caveat Brush",cursive;
  font-size:1.25rem;
  line-height:1.35;
  color:var(--moss);
  max-width:var(--textw);
}
.form-note.show{
  display:block;
  animation:noteUp .5s ease-out both;
}
@keyframes noteUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ───────────────────────── SECTION VARIANTS ─────────────────────────
   Alternate cream / stone for structure (stone = a different paper stock). */
.bg-stone{background:var(--stone)}

/* Short centered hairline section-break mark — used sparingly */
.divider{width:48px;height:2px;background:var(--hairline-strong);border:0;margin:var(--s-4) auto}

/* ───────────────────────── LEAD-MAGNET / SIGNUP WELL ─────────────────────────
   The audience engine. Earns the one permitted elevation event on its page. */
.well{
  background:var(--stone);
  border-radius:var(--r);
  padding:clamp(1.75rem,4vw,2.75rem);
  box-shadow:var(--lift);
  max-width:var(--readw);
}
.well .signup input[type=email]{background:var(--cream)}

/* ───────────────────────── COMMERCE BLOCK (catalog entry / colophon) ─────────────────────────
   A 3px Forest "spine" rule down the left edge (D1 graft). No box, no top/bottom border.
   The accession datum line. Price stated plainly. May carry the single page elevation. */
.product{
  border-left:3px solid var(--forest);
  padding:var(--s-1) 0 var(--s-1) var(--s-4);
  max-width:var(--readw);
}
.product .pub,
.product .accession{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--moss);margin:0 0 var(--s-2);
}
.product h2{margin:0 0 var(--s-2)}
.product .price{font-weight:700;font-size:1.15rem;margin:var(--s-3) 0 var(--s-2)}
/* Co-frame helper for the IC 009 point-of-sale specimen: tighten internal rhythm
   so wordmark eyebrow + heading + price + button render in one viewport. */
.product.tight{padding-top:0;padding-bottom:0}
.product.tight h2{margin-bottom:var(--s-1)}
.product.tight .price{margin:var(--s-2) 0 var(--s-2)}

/* ───────────────────────── CARDS ("what's in the wood") ─────────────────────────
   No shadow, no border-box by default. Separation by cream/stone tint + whitespace
   + hairline. A flat museum-label feel. */
.cards{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:transparent;
  border:0;border-top:1px solid var(--hairline);
  border-radius:0;padding:var(--s-3) 0 0;box-shadow:none;
}
.card h3{margin:0 0 var(--s-2);font-size:1.2rem}
.card p{margin:0}
.card a{font-weight:600}

/* ───────────────────────── CONFIUS ACTIVITY STEPS (/confius/ only) ─────────────────────────
   The warmest tier. Left amber-rule = "this is a step". On cream, no box, no shadow.
   Each step numbered with a small Caprasimo amber chapter numeral (sanctioned exception).
   The Confius voice / breath line is Caveat Brush, amber-dark (the one amber-voice surface). */
.confius-voice{font-family:"Caveat Brush",cursive;font-size:1.5rem;color:var(--amber-dark);line-height:1.3}
.steps{display:grid;gap:var(--s-4);margin-top:var(--s-4);max-width:42rem}
.step{
  position:relative;
  background:transparent;border:0;border-left:3px solid var(--amber);
  border-radius:0;padding:0 0 0 var(--s-3);box-shadow:none;
}
.step + .step{padding-top:var(--s-4);border-top:1px solid var(--hairline);margin-top:0}
.step .numeral{
  font-family:"Caprasimo",Georgia,serif;color:var(--amber);
  font-size:2.4rem;line-height:1;display:block;margin:0 0 var(--s-2);
}
.step h3{margin:0 0 var(--s-1);font-size:1.2rem}
.step p{margin:0 0 var(--s-1)}
.step .breath{font-family:"Caveat Brush",cursive;font-size:1.5rem;color:var(--forest);line-height:1.4}

/* "Coming soon" / no-art block — datum register, quiet inset well, no placeholder art */
.coming-soon{
  background:var(--stone);border:0;border-radius:var(--r);
  padding:var(--s-3);color:var(--moss);margin-top:var(--s-4);max-width:42rem;
}
.coming-soon strong{color:var(--forest)}

/* ───────────────────────── CORRECTIONS LIST (/corrections/) ─────────────────────────
   Errata-page restraint: plain cream, narrow column, dated list, hairline between entries.
   No cards, no decoration, no amber except the footer wordmark. */
.correction{padding:var(--s-3) 0;border-top:1px solid var(--hairline);max-width:var(--textw)}
.correction:first-of-type{border-top:0}
.correction .when{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--moss);margin:0 0 var(--s-1);
}
.correction p{margin:0 0 var(--s-1)}

/* ───────────────────────── ENTRY POINTS (.door — parent-brand front door) ─────────────────────────
   Positioning (2026-06-27): CC is a PARENT brand with a separable Confius asset inside it
   — NOT two co-equal doors. The .door/.doors class names are kept as structural CSS vocabulary;
   the framing is parent-first. Two museum labels, different anatomy: the Confius asset = a face,
   the parent entry = words. No fill, no border-box, no shadow, no radius — they sit directly on
   the ground. Separation = whitespace + a single hairline between them. */
.umbrella{text-align:center}
.umbrella .lead-line{max-width:var(--readw);margin:0 auto;font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);line-height:1.5;color:var(--moss)}

.doors{
  display:grid;gap:var(--s-5);
  margin:clamp(2.5rem,6vw,4rem) 0 0;
  text-align:left;
  border-top:1px solid var(--hairline);   /* the shared "shelf" */
  padding-top:var(--s-5);
}
@media(min-width:760px){
  .doors{grid-template-columns:1fr 1fr;gap:0}
  .doors .door:first-child{padding-right:var(--s-5);border-right:1px solid var(--hairline)}
  .doors .door:last-child{padding-left:var(--s-5)}
}

.door{
  position:relative;background:transparent;border:0;border-radius:0;
  padding:0;box-shadow:none;
  display:flex;flex-direction:column;align-items:flex-start;
  color:inherit;text-decoration:none;
}
a.door:hover{color:inherit}
/* Confius door emblem — real wolf-head SVG, clean on cream, NOT in a circle well */
.door .emblem{margin:0 0 var(--s-3)}
.door .emblem img{width:64px;height:auto}
.door .kicker{margin:0 0 var(--s-1)}
.door .name{
  font-family:"Caprasimo",Georgia,serif;color:var(--amber);
  font-size:clamp(1.65rem,3.5vw,2.2rem);line-height:1.05;margin:0 0 var(--s-2);
  font-weight:400;
}
.door .door-desc{margin:0 0 var(--s-3);color:var(--forest)}
.door .status{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);
  margin:auto 0 0;display:inline-flex;align-items:center;gap:.4rem;
}
a.door:hover .status{color:var(--amber-dark)}

/* The Confius door carries a 64px emblem above its kicker; the typographic door has none.
   Reserve that exact vertical space (64px emblem + var(--s-3) margin) at the top of the
   typographic door so both doors share a baseline grid — kicker, name, desc and status rows
   line up across the shelf. The mark-vs-words asymmetry is intentional; misaligned baselines
   are not. Only on the two-column desktop layout; on stacked mobile the spacer is dropped. */
@media(min-width:760px){
  .door.typographic::before{content:"";display:block;height:64px;margin:0 0 var(--s-3)}
}
.door.typographic .name{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  color:var(--forest);
  font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.12;letter-spacing:-.012em;
}
.door.typographic .name::after{
  content:"";display:block;width:46px;height:3px;background:var(--amber);
  border-radius:2px;margin:.85rem 0 0;transition:width .2s ease;
}
a.door.typographic:hover .name::after{width:64px}

/* ───────────────────────── FOOTER (the back cover) ───────────────────────── */
footer{background:var(--forest);color:var(--cream);text-align:center;padding:clamp(3rem,7vw,5rem) 0}
footer .wordmark{font-size:clamp(1.9rem,5vw,2.6rem)}
footer .tagline{color:var(--cream);margin:var(--s-1) 0 var(--s-3)}
footer .attribution{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:.85rem;color:var(--foot-muted);margin:var(--s-2) 0;
}
footer a{color:var(--cream)}
.footlinks{margin-top:var(--s-2);font-size:.9rem;color:var(--foot-muted)}
.footlinks a{margin:0 .5rem;text-decoration:none;color:var(--cream)}
.footlinks a:hover{text-decoration:underline;color:var(--cream)}
/* Not-yet-live legal pages: rendered as muted non-link text, NOT a dead href="#" that
   focuses but does nothing. They become real links at go-live (Bucket-3 / legal). */
.footlinks .soon{margin:0 .5rem;color:var(--foot-muted);white-space:nowrap}

/* ───────────────────────── MOTION ─────────────────────────
   Stillness with one breath of life. Hero fade-up on load; sections fade in on scroll
   via IntersectionObserver (JS adds .in). Fires once. */
.hero .wrap{animation:heroUp .6s ease-out both}
@keyframes heroUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Content is always visible. This is an SOU specimen surface — no block may render blank
   in a static or headless capture (a trademark specimen IS a screenshot), and the home
   signup must never load empty. The masthead's heroUp keeps the one calm entrance; the
   content doesn't need to perform. (.in retained as a harmless no-op for the observers.) */
.reveal{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}

/* The page must be fully composed and beautiful with zero motion. */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .hero .wrap{animation:none}
  .form-note.show{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ───────────────────────── SCAFFOLD BANNER (removed at go-live) ─────────────────────────
   Rule left harmless/unused. Thin cream-on-forest hairline strip if ever re-enabled. */
.scaffold-banner{
  background:var(--forest);color:var(--cream);text-align:center;
  font-size:.82rem;padding:.45rem 1rem;line-height:1.45;
  border-bottom:1px solid var(--hairline);
}
.scaffold-banner code{background:color-mix(in srgb,var(--cream) 16%,transparent);padding:.05rem .35rem;border-radius:4px}

/* ───────────────────────── SELF-HOSTED FONTS (V0.1 — no external CDN) ─────────────────────────
   The three brand faces, self-hosted from the v4.0 design-system OFL TTFs. Removes the Google
   Fonts dependency (privacy + specimen resilience: an SOU screenshot must never depend on a CDN).
   font-display:swap so text paints immediately — a specimen surface never shows invisible text. */
@font-face{
  font-family:"Caprasimo";
  src:url("/assets/fonts/Caprasimo-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/assets/fonts/BricolageGrotesque-Variable.ttf") format("truetype");
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Caveat Brush";
  src:url("/assets/fonts/CaveatBrush-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ───────────────────────── SITE NAV (interior wayfinding, V0.1) ─────────────────────────
   A quiet hairline-bottomed bar on the three interior pages so every page links home, across
   to the sibling surface, and to Corrections. The parent-brand home stays chrome-free — its
   masthead + entry points ARE the navigation, and a bar there would double the wordmark on the
   title page. */
.sitenav{border-bottom:1px solid var(--hairline);background:var(--cream)}
.topbar nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:4px}