/* =====================================================================
   1891 umbrella chrome — sitewide
   Shared by every page on madeby1891.com regardless of subtree. Styles
   three pieces injected by _build/inject-chrome.py:
     - .u-strip   sitewide umbrella header above each page's own nav
     - .u-crumbs  breadcrumb just below the strip on internal pages
     - .u-foot    unified site footer surfacing all five practice areas

   Visual goals:
     - Quiet — never competes with the page's own nav or hero.
     - Brand-coherent — same wordmark, same heritage line, every page.
     - Theme-tolerant — readable above both the dark navy root-site
       palette and the warmer Organizations palette. Uses opaque, neutral
       background tones so it sits cleanly on any backdrop.
   ===================================================================== */

/* Sitewide motion utilities — scroll reveal, hover lift, ambient glow.
   Loaded here so every page that imports umbrella.css gets the same
   motion language without needing a second <link>. Honors
   prefers-reduced-motion. */
@import url('/assets/css/motion.css');

:root {
  --u-bg:        #0a0d18;
  --u-bg-2:      #131b2f;
  --u-border:    #1a2238;
  --u-ink:       #c0c6d6;
  --u-ink-soft:  #8a93ab;
  --u-ink-loud:  #e7eaf2;
  --u-accent:    #f4a93d;
  --u-accent-2:  #ffc66b;
}

.u-strip *, .u-crumbs *, .u-foot * { box-sizing: border-box; }

/* ─── Umbrella strip ─────────────────────────────────────────────────── */

.u-strip {
  background: var(--u-bg);
  border-bottom: 1px solid var(--u-border);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--u-ink-soft);
}
.u-strip__wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 24px;
  min-height: 36px;
  flex-wrap: wrap;
}
.u-strip__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.u-strip__num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
  line-height: 1;
  color: var(--u-accent);
  letter-spacing: -0.01em;
}
.u-strip__tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--u-ink-soft);
}
.u-strip__links {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  gap: 22px;
}
.u-strip__links li { margin: 0; padding: 0; }
.u-strip__links a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--u-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
  padding: 4px 0;
}
.u-strip__links a:hover,
.u-strip__links a:focus-visible {
  color: var(--u-ink-loud);
  outline: none;
}
.u-strip__links a:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.u-strip__links a[aria-current="page"] {
  color: var(--u-accent);
}

@media (max-width: 720px) {
  .u-strip__wrap { padding: 8px 18px; gap: 12px; }
  .u-strip__tag { display: none; }
  .u-strip__links { gap: 16px; width: 100%; margin: 0; overflow-x: auto; padding-bottom: 2px; }
  .u-strip__links a { white-space: nowrap; font-size: 12px; }
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────── */

.u-crumbs {
  background: var(--u-bg);
  border-bottom: 1px solid var(--u-border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--u-ink-soft);
}
.u-crumbs__list {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 24px;
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.u-crumbs__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.u-crumbs__list li + li::before {
  content: '/';
  color: var(--u-ink-soft);
  opacity: 0.5;
}
.u-crumbs__list a {
  color: var(--u-ink);
  text-decoration: none;
  transition: color 0.15s;
}
.u-crumbs__list a:hover { color: var(--u-accent-2); }
.u-crumbs__list [aria-current="page"] { color: var(--u-accent); }

@media (max-width: 720px) {
  .u-crumbs__list { padding: 8px 18px; font-size: 10px; }
}

/* ─── Unified footer ─────────────────────────────────────────────────── */

.u-foot {
  background: var(--u-bg);
  border-top: 1px solid var(--u-border);
  color: var(--u-ink-soft);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 0;
}
.u-foot__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 54px 24px 28px;
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 36px;
}
@media (max-width: 980px) {
  .u-foot__wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
  .u-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .u-foot__wrap { grid-template-columns: 1fr; gap: 28px; padding: 40px 22px 24px; }
}

.u-foot__brand .u-foot__num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 32px;
  color: var(--u-accent);
  letter-spacing: -0.01em;
}
.u-foot__mark { text-decoration: none; }
.u-foot__tag {
  margin: 14px 0 18px;
  color: var(--u-ink);
  font-size: 13.5px;
  line-height: 1.6;
}
.u-foot__contact a {
  color: var(--u-accent-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.u-foot__contact a:hover { color: var(--u-ink-loud); }

.u-foot__col h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--u-ink-loud);
  margin: 0 0 14px;
  font-weight: 600;
}
.u-foot__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.u-foot__col a {
  color: var(--u-ink);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.15s;
}
.u-foot__col a:hover { color: var(--u-accent-2); }
.u-foot__col a:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.u-foot__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-accent);
  border: 1px solid var(--u-border);
  border-radius: 999px;
  vertical-align: 1px;
}

.u-foot__legal {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--u-border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--u-ink-soft);
}
.u-foot__legal a {
  color: var(--u-ink);
  text-decoration: none;
}
.u-foot__legal a:hover { color: var(--u-accent-2); }


/* ═══ BEGIN BAKED-IN SHARED CHROME (auto-managed) ═══ */
/* Baked from shared/design-system/tokens.css + shared/css/chrome.css
   so the project-only deploy.sh (which only ships assets/css/umbrella.css)
   carries the .c-site-header* + .c-site-footer* + skip-link styles used
   by the umbrella-injected header markup. Regenerate by re-running the
   append block in this header. Do NOT hand-edit this section — edit the
   shared sources and re-bake. */

/* --- shared/design-system/tokens.css --- */
/* =============================================================================
   1891 — Shared design tokens
   =============================================================================
   NAMESPACE RULE (read this first):

     - EVERY shared, cross-project token uses the `--c-*` prefix.
       `c` = "common." It's the most generic of the three prefixes already in
       use in the workspace (`--bloom`, `--psa-*`, `--c-*`), and it doesn't
       collide with any existing project's tokens.

     - EVERY project-specific token uses the `--<project>-*` prefix:
         --mowl-tree-*, --psa-*, --ftd-*, --clerc-*, --blastd-*, --1891-*

     - A project that wants to *override* a shared token does so by setting
       it inside `:root[data-project="<name>"]` in the project's own theme
       file -- never by editing this file.

   When to add a token here: only when a value will be reused across at
   least TWO projects with the SAME meaning. Otherwise keep it project-local.
   When in doubt, leave it out -- this file should grow slowly.

   Source extraction notes (for the curious):
     - palette is a generic neutral set; each project picks its own brand
       color via `--c-bloom` overrides
     - spacing scale is the 4px grid common to mowl-tree + msd-psa + FDT
     - type scale is a 1.25 (major third) modular scale
   ============================================================================= */

:root {
  /* ---- Palette: neutrals ------------------------------------------------- */
  --c-ink:        #111418;   /* primary text */
  --c-ink-soft:   #3a3f47;   /* secondary text */
  --c-fog:        #6b7280;   /* tertiary text, captions */
  --c-line:       #e4e7eb;   /* hairlines, dividers */
  --c-paper:      #ffffff;   /* default surface */
  --c-paper-warm: #faf8f4;   /* alternate surface (cards, sections) */

  /* ---- Palette: brand slots (override per project) ----------------------- */
  --c-bloom:        #8a2843; /* primary brand color (rose default) */
  --c-bloom-soft:   #c46b85; /* lighter brand for hovers, accents */
  --c-accent:       #d4a017; /* secondary accent */

  /* ---- Palette: semantic ------------------------------------------------- */
  --c-ok:    #1f7a3a;
  --c-warn:  #b87b1a;
  --c-err:   #b3261e;
  --c-info:  #1a5f9c;

  /* ---- Spacing: 4px grid ------------------------------------------------- */
  --c-space-0:  0;
  --c-space-1:  4px;
  --c-space-2:  8px;
  --c-space-3:  12px;
  --c-space-4:  16px;
  --c-space-5:  24px;
  --c-space-6:  32px;
  --c-space-7:  48px;
  --c-space-8:  64px;
  --c-space-9:  96px;

  /* ---- Type: stack + scale (1.25 modular) -------------------------------- */
  --c-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --c-font-serif: Georgia, "Iowan Old Style", "Charter", serif;
  --c-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --c-text-xs:   0.75rem;    /* 12px */
  --c-text-sm:   0.875rem;   /* 14px */
  --c-text-md:   1rem;       /* 16px -- base */
  --c-text-lg:   1.25rem;    /* 20px */
  --c-text-xl:   1.5625rem;  /* 25px */
  --c-text-2xl:  1.953rem;   /* ~31px */
  --c-text-3xl:  2.441rem;   /* ~39px */
  --c-text-4xl:  3.052rem;   /* ~49px */

  --c-leading-tight:  1.2;
  --c-leading-normal: 1.5;
  --c-leading-loose:  1.7;

  /* ---- Radius + elevation ----------------------------------------------- */
  --c-radius-sm: 4px;
  --c-radius-md: 8px;
  --c-radius-lg: 16px;
  --c-radius-pill: 999px;

  --c-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --c-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --c-shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* ---- Layout ----------------------------------------------------------- */
  --c-container-max: 1100px;
  --c-container-pad: var(--c-space-5);

  /* ---- Motion ----------------------------------------------------------- */
  --c-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --c-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --c-duration-fast:   120ms;
  --c-duration-normal: 220ms;
  --c-duration-slow:   400ms;

  /* =========================================================================
     Umbrella tokens -- added 2026-05-18 by Phase 1.5 cleanup
     =========================================================================
     These tokens were previously in `shared/css/tokens.css` (the umbrella
     site's master palette). That file is now retired and merged here so
     there's one source of truth for the whole workspace. The umbrella site
     consumes these via `/shared/design-system/tokens.css`; godview and the
     other Cloudflare surfaces already do.

     Where a name from the umbrella file collided with an existing token
     above, the existing design-system value is kept (it's production).
     Collisions (kept design-system value, flagged):
       --c-ink, --c-ink-soft, --c-paper, --c-paper-warm
       --c-ok, --c-warn, --c-err, --c-info
       --c-font-sans, --c-font-serif, --c-font-mono
       --c-radius-md, --c-radius-lg
       --c-shadow-sm, --c-shadow-md, --c-shadow-lg
       --c-container-max
       --c-leading-tight
       --c-text-xs, --c-text-sm
     The umbrella site's "warm paper" palette (navy/brass/cream) lives in
     the new tokens below as additive options. To opt into the umbrella's
     warmer surface, a page can set `:root[data-theme="umbrella"]` (TBD).

     Namespace stays `--c-*`. Per-track tints use `--c-track-<track>-*`.
     ========================================================================= */

  /* ---- Master palette: brand spine (Order Navy) ------------------------- */
  --c-navy:           #0E2742;   /* Order Navy. Not black; not midnight; "ink on cream." */
  --c-navy-soft:      #1B3A5B;   /* navy at 75% -- only for hover on navy surfaces */
  --c-navy-deep:      #08182A;   /* navy at 115% -- heritage strip, footers on paper */

  /* ---- Master palette: brand accent (Brass Gavel) ----------------------- */
  --c-brass:          #B08838;   /* Brass Gavel -- desaturated, not goldenrod */
  --c-brass-soft:     #C9A461;   /* lighter brass for hovers, focus rings on navy */
  --c-brass-deep:     #8C6A26;   /* darker brass for pressed state, brass-on-paper text */

  /* ---- Master palette: extra surfaces ----------------------------------- */
  --c-paper-cool:     #FAF8F2;   /* lighter paper for content cards */
  --c-white:          #FFFFFF;   /* card surfaces on paper */

  /* ---- Master palette: ink scale + structural neutrals ------------------ */
  --c-steel:          #5B6770;   /* structural lines, muted UI, supporting copy */
  --c-pewter:         #9AA0A6;   /* disabled, placeholder */
  --c-mist:           #EEEBE3;   /* section dividers, subtle bands */
  --c-linen:          #DCD8CE;   /* hairlines, card borders on paper */

  /* ---- Signal colours: soft variants ------------------------------------ */
  --c-ok-soft:        #4E8E6E;
  --c-warn-soft:      #C28846;
  --c-err-soft:       #A85050;
  --c-info-soft:      #4F8AAF;

  /* ---- Track tints ------------------------------------------------------
     Scoped per section. Never global. Never body text. A section sets
     `data-track="<slug>"` on the section root and the page-local CSS
     reads `--c-track-tint` (resolved below) so generic components stay
     generic. */

  /* Imagination Town -- Marigold (kids-museum warmth, brass-family) */
  --c-track-iat-tint:        #E8A93D;
  --c-track-iat-tint-hover:  #F4BC55;
  --c-track-iat-on-tint:     #1A1F26;   /* text on Marigold; navy on warm */

  /* Heart Space -- Rose Quartz (contemplative warm muted pink) */
  --c-track-heart-tint:        #B86A78;
  --c-track-heart-tint-hover:  #CC8694;
  --c-track-heart-on-tint:     #FFFFFF;   /* text on Rose; white reads cleanly */

  /* Game Lab -- Arcade Cyan (cool, satisfying; "play" not neon) */
  --c-track-game-tint:        #2E7AA0;
  --c-track-game-tint-hover:  #4593BC;
  --c-track-game-on-tint:     #FFFFFF;   /* text on Cyan; white */

  /* ---- Semantic: "this is what broke" ----------------------------------
     Muted red used to mark hostile-design beats inside a demo's
     Bad-design pass (Pharmacy §18.9 debrief annotations, future
     analogues in Drive-Thru / ATM / Elevator). Reusable so the
     "broken affordance" colour reads the same across the catalog. */
  --c-broken-red:        #A3463C;
  --c-broken-red-soft:   rgba(163, 70, 60, 0.16);

  /* Default resolved track tint -- overridden inside a section that sets
     `data-track="imagination-town"` etc. Outside any track, falls back
     to brass so generic tile components still work. */
  --c-track-tint:        var(--c-brass);
  --c-track-tint-hover:  var(--c-brass-soft);
  --c-track-on-tint:     var(--c-paper);

  /* ---- Type scale: extended sizes --------------------------------------
     The design-system base scale above is kept (xs/sm/md/lg/...). The
     umbrella adds 2xs, base, 5xl, hero, and hero-l for marketing pages.
     Where umbrella wanted finer body control, those names map to the
     existing design-system tokens (e.g. body=md). */
  --c-text-2xs:   0.75rem;     /* 12px -- JetBrains mono eyebrows, footnotes */
  --c-text-base:  1.125rem;    /* 18px -- long-form body paragraph (locked) */
  --c-text-5xl:   3.815rem;    /* ~61px -- section opener */
  --c-text-hero:  4.0rem;      /* 64px -- homepage h1 (locked) */
  --c-text-hero-l:4.75rem;     /* 76px -- full-bleed hero on wide */

  /* ---- Line height: extended ------------------------------------------- */
  --c-leading-display: 1.04;   /* hero */
  --c-leading-snug:    1.3;    /* h4, UI controls */
  --c-leading-relaxed: 1.6;    /* long-form body -- locked at 1.6 */

  /* ---- Letter-spacing (tracking) -------------------------------------- */
  --c-track-display:    -0.02em;
  --c-track-headline:   -0.01em;
  --c-track-body:        0em;
  --c-track-caps:        0.08em;   /* mono eyebrows, all-caps labels */

  /* ---- Weight ---------------------------------------------------------- */
  --c-weight-regular:   400;
  --c-weight-medium:    500;
  --c-weight-semibold:  600;
  --c-weight-bold:      700;

  /* ---- Section padding tiers (extends spacing) ------------------------ */
  --c-section-pad-y:   var(--c-space-9);   /* 96px desktop */
  --c-section-pad-x:   var(--c-space-5);   /* 24px gutter desktop */

  /* ---- Extra layout caps ---------------------------------------------- */
  --c-container-wide:  1440px;   /* hero may extend to this */
  --c-prose-max:        680px;   /* long-form prose cap */

  /* ---- Extra radius + elevation --------------------------------------- */
  --c-radius-xl:   24px;
  --c-shadow-hover: 0 8px 24px rgba(14, 24, 42, 0.10);

  /* ---- Motion: locked durations + Material standard easing ------------
     The design-system motion tokens above stay (--c-duration-*). These
     umbrella names exist for pages that follow the visual-refresh plan
     verbatim. Reduced-motion overrides null both sets further down. */
  --c-dur-instant:  120ms;   /* focus rings, smallest state confirms */
  --c-dur-fast:     180ms;   /* hover state changes -- locked */
  --c-dur-normal:   240ms;   /* content swaps, modal opens -- locked */
  --c-dur-slow:     360ms;   /* high-importance reveals -- locked */
  --c-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* Material standard */

  /* ---- Focus + selection --------------------------------------------- */
  --c-focus-ring-color:  var(--c-brass);
  --c-focus-ring-width:  2px;
  --c-focus-ring-offset: 2px;

  /* Selection paints navy-on-paper-warm so it never reads as a glow */
  --c-selection-bg:   var(--c-paper-warm);
  --c-selection-fg:   var(--c-navy);
}


/* ---------------------------------------------------------------------------
   Track-aware sections -- a section sets `data-track` and the generic
   token resolvers pick up the right tint without page-local CSS.
   --------------------------------------------------------------------------- */

[data-track="imagination-town"] {
  --c-track-tint:        var(--c-track-iat-tint);
  --c-track-tint-hover:  var(--c-track-iat-tint-hover);
  --c-track-on-tint:     var(--c-track-iat-on-tint);
}

[data-track="heart-space"] {
  --c-track-tint:        var(--c-track-heart-tint);
  --c-track-tint-hover:  var(--c-track-heart-tint-hover);
  --c-track-on-tint:     var(--c-track-heart-on-tint);
}

[data-track="game-lab"] {
  --c-track-tint:        var(--c-track-game-tint);
  --c-track-tint-hover:  var(--c-track-game-tint-hover);
  --c-track-on-tint:     var(--c-track-game-on-tint);
}


/* ---------------------------------------------------------------------------
   Universal focus ring -- applied with :focus-visible only so mouse users
   don't see the ring on click. Brass on every background by spec.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--c-focus-ring-width) solid var(--c-focus-ring-color);
  outline-offset: var(--c-focus-ring-offset);
}

::selection {
  background: var(--c-selection-bg);
  color: var(--c-selection-fg);
}

/* ---- Dark-mode-aware overrides (opt-in via prefers-color-scheme) ---------
   Projects that want dark mode set <html data-theme="auto"> and inherit
   these. Otherwise the light palette above is used.

   The umbrella's warm-paper dark adaptation extends the same opt-in:
   it adds entries for --c-paper-cool, --c-white, --c-steel, --c-pewter,
   --c-mist, --c-linen so the navy/brass paper system also flips cleanly. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --c-ink:        #f1f3f5;
    --c-ink-soft:   #c2c8d0;
    --c-fog:        #8b939c;
    --c-line:       #2a2f36;
    --c-paper:      #0e1014;
    --c-paper-warm: #15181d;

    /* Umbrella additions */
    --c-paper-cool: #182230;
    --c-white:      #1A2434;
    --c-steel:      #8B939C;
    --c-pewter:     #5E6671;
    --c-mist:       #1F2A38;
    --c-linen:      #2A3645;
  }
}

/* ---- Reduced motion ---------------------------------------------------
   Nulls out BOTH motion vocabularies (--c-duration-* design-system names
   and --c-dur-* umbrella names) plus a belt-and-braces sweep on `*` so
   anything that didn't read a token still freezes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --c-duration-fast:   0ms;
    --c-duration-normal: 0ms;
    --c-duration-slow:   0ms;

    --c-dur-instant: 0ms;
    --c-dur-fast:    0ms;
    --c-dur-normal:  0ms;
    --c-dur-slow:    0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- shared/css/chrome.css --- */
/* =============================================================================
   1891 — Umbrella chrome (header + footer styling)
   =============================================================================
   Styles the shared header and footer included by _build/inject-chrome.py.
   Depends on shared/design-system/tokens.css being loaded BEFORE this file.

   Loaded on every umbrella page. Page-local CSS may extend but should
   never override the chrome rules — keep one chrome, one footer, one
   typography pair across the whole site.
   ============================================================================= */


/* ---- Base reset (minimal — most pages already ship their own) ---------- */

html {
  font-family: var(--c-font-sans);
  font-size: 16px;
  line-height: var(--c-leading-normal);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--c-text-base);
  line-height: var(--c-leading-relaxed);
}


/* ---- Skip link --------------------------------------------------------- */

.c-skip-link {
  position: absolute;
  top: -100px;
  left: var(--c-space-4);
  z-index: 9999;
  padding: var(--c-space-3) var(--c-space-4);
  background: var(--c-navy);
  color: var(--c-paper);
  font-family: var(--c-font-sans);
  font-weight: var(--c-weight-semibold);
  text-decoration: none;
  border-radius: var(--c-radius-md);
  transition: top var(--c-dur-fast) var(--c-ease-standard);
}

.c-skip-link:focus,
.c-skip-link:focus-visible {
  top: var(--c-space-3);
}


/* ---- Header ------------------------------------------------------------ */

.c-site-header {
  position: relative;
  z-index: 100;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-linen);
  font-family: var(--c-font-sans);
}

.c-site-header__wrap {
  display: flex;
  align-items: center;
  gap: var(--c-space-6);
  max-width: var(--c-container-max);
  margin: 0 auto;
  padding: var(--c-space-4) var(--c-space-5);
}

.c-site-header__mark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--c-navy);
  flex-shrink: 0;
}

.c-site-header__num {
  font-family: var(--c-font-serif);
  font-weight: var(--c-weight-semibold);
  font-size: var(--c-text-xl);          /* 25px */
  letter-spacing: var(--c-track-headline);
  line-height: 1;
}


/* ---- Header nav (desktop) --------------------------------------------- */

.c-site-header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: var(--c-space-5);
}

.c-site-header__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--c-space-6);
}

.c-site-header__links a {
  font-family: var(--c-font-sans);
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-medium);
  color: var(--c-ink);
  text-decoration: none;
  padding: var(--c-space-2) 0;
  border-bottom: 2px solid transparent;
  transition:
    color var(--c-dur-fast) var(--c-ease-standard),
    border-color var(--c-dur-fast) var(--c-ease-standard);
}

.c-site-header__links a:hover {
  color: var(--c-navy);
  border-bottom-color: var(--c-brass);
}

.c-site-header__links a[aria-current="page"] {
  color: var(--c-navy);
  border-bottom-color: var(--c-brass);
}


/* ---- Header right-side mono caption ----------------------------------- */

.c-site-header__tag {
  margin: 0;
  font-family: var(--c-font-mono);
  font-size: var(--c-text-2xs);
  font-weight: var(--c-weight-medium);
  letter-spacing: var(--c-track-caps);
  text-transform: none;
  color: var(--c-steel);
  flex-shrink: 0;
  white-space: nowrap;
}


/* ---- Header menu button (mobile) -------------------------------------- */

.c-site-header__menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-ink);
}

.c-site-header__menu-btn-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.c-site-header__menu-btn-label {
  font-family: var(--c-font-mono);
  font-size: 10px;
  letter-spacing: var(--c-track-caps);
  text-transform: uppercase;
  margin-top: 2px;
}


/* ---- Mobile collapse — single full-screen sheet ----------------------- */

.c-site-header__sheet {
  display: none;
}

@media (max-width: 768px) {
  .c-site-header__wrap {
    padding: var(--c-space-3) var(--c-space-4);
    gap: var(--c-space-3);
  }

  .c-site-header__nav {
    margin-left: 0;
    justify-content: flex-end;
  }

  .c-site-header__links {
    display: none;
  }

  .c-site-header__tag {
    display: none;
  }

  .c-site-header__menu-btn {
    display: inline-flex;
  }

  .c-site-header__sheet[aria-hidden="false"] {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--c-space-9) var(--c-space-5) var(--c-space-6);
    background: var(--c-paper);
    overflow-y: auto;
  }

  .c-site-header__sheet-links {
    list-style: none;
    margin: 0 0 var(--c-space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--c-space-4);
  }

  .c-site-header__sheet-links a {
    display: block;
    font-family: var(--c-font-serif);
    font-size: var(--c-text-3xl);
    font-weight: var(--c-weight-semibold);
    color: var(--c-navy);
    text-decoration: none;
    padding: var(--c-space-2) 0;
  }

  .c-site-header__sheet-links a[aria-current="page"] {
    color: var(--c-brass-deep);
  }

  .c-site-header__sheet-links--secondary a {
    font-family: var(--c-font-sans);
    font-size: var(--c-text-lg);
    font-weight: var(--c-weight-medium);
    color: var(--c-ink-soft);
  }

  .c-site-header__sheet-divider {
    border: 0;
    border-top: 1px solid var(--c-linen);
    width: 100%;
    margin: var(--c-space-3) 0 var(--c-space-5);
  }

  .c-site-header__sheet-tag {
    margin: auto 0 0 0;
    font-family: var(--c-font-mono);
    font-size: var(--c-text-2xs);
    letter-spacing: var(--c-track-caps);
    color: var(--c-steel);
  }
}


/* ---- Footer ----------------------------------------------------------- */

.c-site-footer {
  margin-top: var(--c-space-9);
  padding: var(--c-space-9) var(--c-space-5) var(--c-space-7);
  background: var(--c-navy);
  color: var(--c-paper);
  font-family: var(--c-font-sans);
}

.c-site-footer__wrap {
  max-width: var(--c-container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--c-space-5);
}

.c-site-footer__tagline {
  margin: 0;
  font-family: var(--c-font-serif);
  font-size: var(--c-text-2xl);
  font-weight: var(--c-weight-semibold);
  letter-spacing: var(--c-track-headline);
  line-height: var(--c-leading-tight);
  color: var(--c-paper);
}

.c-site-footer__tagline em {
  font-style: italic;
}

.c-site-footer__nav {
  width: 100%;
}

.c-site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--c-space-5);
}

.c-site-footer__links a {
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-medium);
  color: var(--c-paper);
  text-decoration: none;
  padding: var(--c-space-2) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--c-dur-fast) var(--c-ease-standard);
}

.c-site-footer__links a:hover {
  border-bottom-color: var(--c-brass);
}

.c-site-footer__contact {
  margin: 0;
}

.c-site-footer__contact a {
  font-family: var(--c-font-mono);
  font-size: var(--c-text-sm);
  color: var(--c-brass-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--c-dur-fast) var(--c-ease-standard);
}

.c-site-footer__contact a:hover {
  border-bottom-color: var(--c-brass-soft);
}

.c-site-footer__lineage {
  margin: 0;
  font-family: var(--c-font-mono);
  font-size: var(--c-text-2xs);
  letter-spacing: var(--c-track-caps);
  color: var(--c-pewter);
}

.c-site-footer__legal {
  margin: 0;
  font-size: var(--c-text-2xs);
  color: var(--c-pewter);
  opacity: 0.85;
}

/* ═══ END BAKED-IN SHARED CHROME ═══ */