/* ==========================================================================
   CICA — shared stylesheet
   Single source of truth for base styles, the navigation system, and every
   interactive component state. Tokens are documented in ../DESIGN.md.

   Extracted from per-page inline <style> blocks on 2026-07-18 (de-dup pass).
   Values are unchanged from the compiled site — rendering is identical; the
   win is that color/type/state changes now happen in ONE place. The old
   positional classes (.hv1/.hv2/.hv3/.ff1, which meant different things on
   different pages) are replaced by the semantic classes at the bottom.
   ========================================================================== */

:root{
  --paper:   #F4F4F1;  /* body background — neutral off-white (DESIGN.md §2)  */
  --ink:     #1A1A1A;  /* text, borders, dark bands, filled buttons          */
  --oxblood: #9E2B25;  /* the single accent — used sparingly                 */
  --muted:   #6F6C66;  /* fine print only, >=13px (>=4.5:1 on paper)         */
}

/* --- Base -------------------------------------------------------------- */
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,serif}
a{color:var(--ink);transition:color .15s,background-color .15s,border-color .15s}
a:hover{color:var(--oxblood)}
button,input,select{transition:color .15s,background-color .15s,border-color .15s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}
/* Typographic polish (design pass 2026-07-18): even out multi-line heading
   ragging. text-wrap isn't set inline anywhere, so this applies cleanly. */
h1,h2{text-wrap:balance}

/* Skip link (a11y pass 2026-07-18): visually hidden until keyboard focus,
   then reveals top-left. First focusable element on every page. */
.skip-link{position:absolute;left:8px;top:-64px;z-index:100;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;padding:12px 18px}
.skip-link:focus{top:8px;color:var(--paper);outline:2px solid var(--oxblood);outline-offset:2px}
/* Text selection uses the accent — a small, on-brand detail. */
::selection{background:var(--oxblood);color:var(--paper)}

/* Jump targets (main#main for the skip link, section#the-issue for the hero's
   "See the issue") carry tabindex="-1" so focus follows the scroll instead of
   staying stranded at the top of the document. They are containers, not
   controls, so the UA ring draws a blue box around an entire section — it
   renders on any load of /#the-issue, not just keyboard use. The jump is the
   feedback, and the next Tab lands on a real control that shows its own ring.
   Scoped to [tabindex="-1"] so no genuine control can lose its outline. */
main[tabindex="-1"]:focus,section[tabindex="-1"]:focus{outline:none}

/* --- Navigation / header ---------------------------------------------- */
.menu-btn{display:none}
.menu-btn:hover{color:var(--oxblood);border-color:var(--oxblood)}
.mobile-nav{display:none}
@media (max-width:779px){
  .desktop-nav{display:none !important}
  .menu-btn{display:inline-block}
}
/* Nav wayfinding + hover (design pass 2026-07-18): the current page's nav item
   sits in oxblood; hovering any nav item reveals an oxblood underline. Nav <a>s
   carry inline color + text-decoration, so these need !important (same reason as
   .field:focus). aria-current="page" marks the active item in each header nav. */
.desktop-nav a:hover,.mobile-nav a:hover{color:var(--oxblood) !important;text-decoration:underline !important;text-underline-offset:5px}
.desktop-nav a[aria-current="page"],.mobile-nav a[aria-current="page"]{color:var(--oxblood) !important}

/* --- The crest: masthead on phones, hero on desktop (revised 2026-07-21)
   The crest is a detailed engraving. Rendered at 42px next to the wordmark it
   still reads as a seal — checked against a 3x render before committing — so
   on phones it moves into the sticky masthead, where it is on screen at every
   scroll position and on every page instead of once, 500px down the Home page.
   Because it now lives up there, the mobile hero drops its copy: showing the
   same engraving twice in one screenful is what made the fold feel cluttered.
   Desktop is unchanged — wordmark-only masthead, large hero crest — since
   there the two would sit stacked in a single view.
   Trailing the padding back to 16px absorbs the 42px mark, so the masthead
   holds its current ~74px and nothing below it shifts.
   !important: the hero width and the masthead padding are declared inline —
   only a stylesheet !important can override an inline value (see .field:focus). */
.brand-mark{display:none}
@media (max-width:779px){
  .brand-mark{display:block;height:42px;width:auto;flex:none}
  .masthead-bar{padding-top:16px !important;padding-bottom:16px !important}
  .hero-seal{display:none !important}
}

/* --- Numbered rows on phones (2026-07-21) ------------------------------
   The numeral sits in a fixed 72–88px gutter (§5). That is right on an
   800px column and wrong on a 375px screen, where one digit costs a fifth
   of the width: the paragraph drops to ~247px, the copy shreds into
   six-word lines, and a tall empty gutter runs down beside it. Below the
   breakpoint the numeral stacks above its row and the text takes the full
   measure — it spends one line and wins two back, so the section gets no
   taller. Applies to the 10 rows on Compliance and If Inspected. (Home's three
   parts are not numbered rows — they use the trio's 3-column grid.)
   !important because the grid is declared inline on every row. */
@media (max-width:779px){
  .numbered-row{grid-template-columns:1fr !important;gap:12px !important}
}

/* --- Interactive component states -------------------------------------
   Semantic names, applied consistently on every page. */
.btn-fill:hover  {background:var(--oxblood);border-color:var(--oxblood);color:var(--paper)}  /* filled dark button -> oxblood */
.btn-outline:hover{color:var(--oxblood);border-color:var(--oxblood)}                          /* outline button     -> oxblood */
.btn-submit:hover{background:var(--ink);border-color:var(--ink)}                               /* oxblood submit     -> ink     */
.btn-invert:hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--paper)}   /* button on dark band-> oxblood */
.lnk:hover{color:var(--oxblood)}                                                              /* text link          -> oxblood */
.field:focus{border-color:var(--oxblood) !important}  /* fields carry an inline border; a stylesheet can only override it on focus with !important */
.field:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}                     /* keyboard focus ring (a11y)    */

/* --- Subtle micro-interaction layer (approved 2026-07-18) ---------------
   Vanilla-only, reduced-motion-safe. Revises §6: motion is now allowed, but
   strictly as small hover feedback + a scroll elevation — never entrance or
   scroll-reveal animation. Mobbin refs: Clay, Ditto (CTA arrow).

   1) Primary CTAs carry a trailing arrow that nudges on hover. ::after avoids
      per-button HTML edits and the inline-style conflict. Filled / dark-band /
      submit only — the arrow is what marks the primary vs the outline secondary. */
.btn-fill::after,.btn-invert::after,.btn-submit::after{content:"→";display:inline-block;margin-left:.55em;transition:transform .15s}
.btn-fill:hover::after,.btn-invert:hover::after,.btn-submit:hover::after{transform:translateX(3px)}

/*   2) Text links (jump / read-more) get a wayfinding arrow + hover nudge.
      Mailto links are excluded — an arrow after an address reads wrong. */
.lnk:not([href^="mailto"])::after{content:"→";display:inline-block;margin-left:.4em;text-decoration:none;transition:transform .15s}
.lnk:not([href^="mailto"]):hover::after{transform:translateX(3px)}

/*   3) Sticky header gains a soft hairline shadow once the page is scrolled
      (class toggled by a small per-page script). Reads as elevation, not motion. */
header{transition:box-shadow .2s}
header.is-scrolled{box-shadow:0 8px 20px -16px rgba(26,26,26,.45)}

/*   Reduced-motion: keep the arrows and the shadow, drop the movement. */
@media (prefers-reduced-motion:reduce){
  .btn-fill:hover::after,.btn-invert:hover::after,.btn-submit:hover::after,
  .lnk:not([href^="mailto"]):hover::after{transform:none}
}