/* ─────────────────────────────────────────────────────────────────────────────
   credit-hire.ai — THE DESIGN SYSTEM. One file. Single source of truth.

   HOW TO ADOPT THIS SAFELY (the migration contract):
   Add this to a page BEFORE its own <style> block:
       <link rel="stylesheet" href="assets/fonts.css">
       <link rel="stylesheet" href="assets/tokens.css">
   Because the page's own <style> comes AFTER, the page's existing rules still win.
   Adding the link therefore changes NOTHING visually. It is inert until used.
   That is what makes the migration reversible: one line in, one line out.

   Then, page by page, swap literal colours for var(--token) and delete the dead
   rules. One page per deploy. Never rename a class or id the page's JS touches.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   credit-hire.ai — DESIGN TOKENS & CORE SYSTEM
   The single source of truth. Every page links this file and this file
   only. No page defines a :root palette, a font, a radius or a shadow
   of its own — ever again.

   Contents
     §1  Fonts
     §2  Tokens — colour, type, space, radius, elevation, motion
     §3  Semantic aliases & the .theme-navy context switch
     §4  Base / reset
     §5  Core components (nav, buttons, tiles, forms, tables, badges,
         footer, icons, portrait slot)

   Rules of the house
     · Pages may add layout CSS, but every colour, size and shadow in a
       page style block must be a var(--token) from §2/§3.
     · Gold is brass detail: rules, numerals, active states. Gold text on
       light surfaces must use --gold-ink (WCAG AA); never --gold-500.
     · One navy: #0f1e3c. The other two navies in production are retired.
   ═══════════════════════════════════════════════════════════════════ */

/* ── §1 FONTS ───────────────────────────────────────────────────────── */
/* Spectral: an editorial serif designed for screens — the voice.
   IBM Plex Sans: precise, instrumental, tabular figures — the tool face.
   Both degrade to Georgia / system sans with no layout collapse.       */
/* Fonts are SELF-HOSTED — see assets/fonts.css. No external font host is ever
   contacted: law-firm firewalls block Google Fonts, and the call discloses the
   visitor's IP to Google (unlawful under GDPR per a German ruling). */

/* ── §2 TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Navy ramp — the brand navy is --navy-800. Committed to, everywhere. */
  --navy-950: #060d1a;
  --navy-900: #0a1528;
  --navy-800: #0f1e3c;   /* THE navy */
  --navy-700: #17294f;
  --navy-600: #203762;
  --navy-500: #2d4a7d;
  --navy-400: #54719f;
  --navy-300: #8ba0c0;
  --navy-200: #bfcbde;
  --navy-100: #e0e6ef;
  --navy-50:  #f0f3f8;

  /* Gold ramp — brass, not banana. */
  --gold-900: #5c471a;
  --gold-700: #8a6d26;   /* = --gold-ink: gold as TEXT on light (AA 4.6:1) */
  --gold-600: #a9852e;
  --gold-500: #c9a84c;   /* THE gold — detail & text on navy (AA 7.2:1) */
  --gold-400: #d6bc71;
  --gold-300: #e3d09a;
  --gold-200: #efe3c2;
  --gold-100: #f7f0dd;
  --gold-50:  #fbf8ef;

  /* Claret ramp — oxblood, the colour of the law reports on the shelf.
     THE WAYFINDING COLOUR, and it has exactly one job: signposting.
     Plates, icons, active states, the hover rule. NEVER a heading colour,
     never decoration. Navy is the surface you stand on; brass is the
     detail; claret is how you know where you are. Three colours, three jobs.
     --claret-700 is the only claret permitted as TEXT ON LIGHT (8.4:1 on white,
     8.0:1 on paper). --claret-400 is the only claret permitted ON NAVY (5.1:1). */
  --claret-900: #4e1b21;
  --claret-800: #64232b;
  --claret-700: #7a2b33;   /* = --claret-ink: claret as TEXT on light (AAA 8.4:1) */
  --claret-600: #94363f;
  --claret-500: #a94450;
  --claret-400: #c4737c;   /* claret on navy (AA 5.1:1) */
  --claret-200: #e8cdd0;
  --claret-100: #f4e4e6;
  --claret-50:  #fbf1f2;

  /* Warm neutrals — paper and stone, not SaaS grey. */
  --white:     #ffffff;
  --paper:     #f8f7f4;  /* default page field */
  --stone-100: #efede8;
  --stone-200: #e3e0d8;
  --stone-300: #cfcbc0;
  --stone-400: #a9a49a;

  /* Ink */
  --ink-900: #161c28;
  --ink-700: #333b4a;
  --ink-500: #5a6374;   /* muted text on light — AA */
  --ink-300: #8b93a3;   /* faint: large text / decorative only */

  /* On-navy text (for use on --navy-800/900 surfaces) */
  --on-navy-high:  #f5f4f0;
  --on-navy:       #c9d2e2;
  --on-navy-muted: #8ba0c0;

  /* Hairlines & scrims */
  --rule:           var(--stone-200);
  --rule-strong:    var(--stone-300);
  --rule-gold:      rgba(201, 168, 76, 0.4);
  --rule-gold-soft: rgba(201, 168, 76, 0.22);
  --rule-on-navy:   rgba(201, 210, 226, 0.15);
  --scrim-navy:     rgba(15, 30, 60, 0.55);
  --scrim-navy-deep:rgba(10, 21, 40, 0.82);

  /* Semantic state — carries meaning without shouting */
  --success-ink: #1e6e46;
  --success-bg:  #eaf4ee;
  --success-rule:#bcd9c8;
  --warning-ink: #8a5a14;
  --warning-bg:  #fbf3e2;
  --warning-rule:#e8d3a4;
  --danger-ink:  #b03427;
  --danger-bg:   #faeeec;
  --danger-rule: #e6bdb7;
  --info-ink:    var(--navy-600);
  --info-bg:     var(--navy-50);
  --info-rule:   var(--navy-200);

  /* Type */
  --font-display: 'Spectral', 'Spectral Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', 'Plex Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12 — captions, badges */
  --text-sm:   0.8125rem;  /* 13 — labels, dense UI  */
  --text-base: 0.9375rem;  /* 15 — app body          */
  --text-md:   1.0625rem;  /* 17 — editorial body    */
  --text-lg:   1.25rem;    /* 20 — leads             */
  --text-xl:   1.5rem;     /* 24 — card titles       */
  --text-2xl:  1.875rem;   /* 30 — section heads     */
  --text-3xl:  2.375rem;   /* 38 — page heads        */
  --text-4xl:  3.25rem;    /* 52 — hero              */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;
  --leading-loose: 1.75;
  --tracking-caps: 0.09em;

  /* Space — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* Radius — squarer than SaaS. Chambers, not chat bubbles. */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Elevation — navy-tinted, restrained */
  --shadow-1: 0 1px 2px rgba(10, 21, 40, 0.07);
  --shadow-2: 0 2px 10px rgba(10, 21, 40, 0.09);
  --shadow-3: 0 10px 32px rgba(10, 21, 40, 0.16);
  --ring-focus: 0 0 0 3px rgba(201, 168, 76, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --w-wide:   1160px;
  --w-mid:    900px;
  --w-narrow: 720px;
  --nav-h:    60px;
}

/* ── §3 SEMANTIC ALIASES & CONTEXT SWITCH ───────────────────────────── */
/* Components read these, never the raw ramps, so a navy section flips
   its children with one class and no page ever re-declares a colour.  */
:root, .theme-paper {
  --surface:        var(--paper);
  --surface-raised: var(--white);
  --tx:             var(--ink-900);
  --tx-body:        var(--ink-700);
  --tx-muted:       var(--ink-500);
  --line:           var(--rule);
  --accent-ink:     var(--gold-700);  /* gold as text, this context */
  --signpost:       var(--claret-700); /* wayfinding on light */
}
.theme-navy {
  --surface:        var(--navy-800);
  --surface-raised: var(--navy-700);
  --tx:             var(--on-navy-high);
  --tx-body:        var(--on-navy);
  --tx-muted:       var(--on-navy-muted);
  --line:           var(--rule-on-navy);
  --signpost:       var(--claret-400); /* wayfinding on navy */
  --accent-ink:     var(--gold-500);
  background: var(--surface);
  color: var(--tx-body);
}

/* ── §4 BASE / RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--tx-body);
  background: var(--surface);
  font-feature-settings: 'tnum' 0;
}

h1, h2, h3, .serif {
  font-family: var(--font-display);
  color: var(--tx);
  line-height: var(--leading-tight);
  font-weight: 600;
}
h1 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p  { max-width: 68ch; }
a  { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--gold-200); color: var(--ink-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold-500); color: var(--navy-900);
  padding: var(--s-2) var(--s-4); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

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

/* ── §5 CORE COMPONENTS ─────────────────────────────────────────────── */

/* Containers */
.container        { max-width: var(--w-wide);   margin: 0 auto; padding: 0 var(--s-6); }
.container-mid    { max-width: var(--w-mid);    margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 0 var(--s-6); }

/* Kicker — small-caps section tag. Gold-as-text obeys context. */
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Gold hairline — the brass rule under headings */
.rule-gold {
  border: 0; height: 1px; width: 56px;
  background: var(--gold-500);
  margin: var(--s-4) 0;
}

/* Wordmark */
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.wordmark em { font-style: normal; color: var(--gold-500); }

/* Site nav — the one navy bar, public and gated alike */
.site-nav {
  height: var(--nav-h);
  background: var(--navy-800);
  border-bottom: 1px solid var(--rule-gold-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-6);
  position: sticky; top: 0; z-index: 100;
}
.site-nav .wordmark { color: var(--on-navy-high); font-size: var(--text-lg); }
.site-nav-links { display: flex; align-items: center; gap: var(--s-5); }
.site-nav-links a:not(.btn) {
  color: var(--on-navy); font-size: var(--text-sm); text-decoration: none;
  padding: var(--s-1) 0; border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-nav-links a:not(.btn):hover { color: var(--gold-500); border-bottom-color: var(--rule-gold); }
.site-nav-links a[aria-current="page"] { color: var(--gold-500); border-bottom-color: var(--gold-500); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.65rem 1.4rem; border-radius: var(--r-sm);
  border: 1px solid transparent; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-gold  { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-400); }
.btn-navy  { background: var(--navy-800); color: var(--on-navy-high); }
.btn-navy:hover { background: var(--navy-700); }
.btn-ghost { background: transparent; color: var(--tx-body); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold-500); color: var(--tx); }
.theme-navy .btn-ghost { color: var(--on-navy); border-color: var(--rule-on-navy); }
.theme-navy .btn-ghost:hover { border-color: var(--gold-500); color: var(--gold-500); }
.btn-lg { font-size: var(--text-base); padding: 0.8rem 1.8rem; }
.btn-sm { font-size: var(--text-xs); padding: 0.4rem 0.9rem; }

/* Icons — one family: 24px grid, 1.5 stroke, round joins, line only */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }

/* Tiles — the gateway doors */
.tile {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-top: 2px solid var(--rule-gold-soft);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.tile:hover, .tile:focus-visible {
  border-color: var(--claret-700);
  border-top-color: var(--claret-700);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.tile-head .icon { color: var(--signpost); }
.tile:hover .tile-head .icon { color: var(--claret-800); }
.tile-num {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--gold-700); font-weight: 500;
}
/* The plate is the signpost — it was --tx-muted, which is why the tiles read
   as beige-on-beige. It is the one element whose whole job is wayfinding, so
   it carries the wayfinding colour and enough weight to be seen at a glance. */
.tile-plate {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--signpost);
}
.tile-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); line-height: var(--leading-tight);
  color: var(--ink-900);
}
.tile-desc { font-size: var(--text-sm); color: var(--tx-muted); line-height: var(--leading-body); }
.tile kbd {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--stone-400); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 0 var(--s-2); line-height: 1.5;
}

/* Cards & panels */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.15rem 0.55rem; border-radius: var(--r-xs);
  border: 1px solid;
}
.badge-gold    { background: var(--gold-100);   color: var(--gold-700);   border-color: var(--gold-300); }
.badge-success { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-rule); }
.badge-warning { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-rule); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-ink);  border-color: var(--danger-rule); }
.badge-neutral { background: var(--stone-100);  color: var(--ink-500);     border-color: var(--stone-200); }

/* Notices */
.notice {
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm); border: 1px solid;
}
.notice-success { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-rule); }
.notice-warning { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-rule); }
.notice-danger  { background: var(--danger-bg);  color: var(--danger-ink);  border-color: var(--danger-rule); }
.notice-info    { background: var(--info-bg);    color: var(--info-ink);    border-color: var(--info-rule); }

/* Forms — dense screens are the product; these must hold up all day */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label, .field-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tx-muted);
}
.field input[type="text"], .field input[type="email"],
.field select, .field textarea, .input {
  width: 100%;
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--tx);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none; border-color: var(--gold-600); box-shadow: var(--ring-focus);
}
.field .hint { font-size: var(--text-xs); color: var(--tx-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-5); }
@media (max-width: 720px) { .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } }

/* Step sections — numbered navy band, the working rhythm of tool pages */
.step {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-1);
}
.step-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  background: var(--navy-800); color: var(--on-navy-high);
  padding: var(--s-3) var(--s-5);
  font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.03em;
}
.step-head .step-no {
  font-family: var(--font-display); color: var(--gold-500);
  font-size: var(--text-base); font-weight: 600;
}
.step-body { padding: var(--s-5); }

/* Data tables */
.datatable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.datatable th {
  text-align: left; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tx-muted); background: var(--stone-100);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule-strong);
}
.datatable td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.datatable tr:last-child td { border-bottom: none; }
.datatable .num { text-align: right; }

/* Ledger — the restrained stats strip */
.ledger {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-10); padding: var(--s-8) var(--s-6);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ledger-item { text-align: center; }
.ledger-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.ledger-num em { font-style: normal; color: var(--accent-ink); }
.ledger-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--tx-muted); margin-top: var(--s-1);
}

/* Portrait — the one photograph. Navy panel first, image as enhancement:
   if assets/steve.jpg is absent the slot degrades to a composed navy
   field carrying the quotation, not a broken image.                    */
/* THE PORTRAIT.
   This was previously a background-image driven through var(--portrait-src).
   It rendered as a plain navy block and never showed the photograph: if a var()
   substitution yields anything the browser cannot parse, the WHOLE background-image
   declaration is discarded and falls back to the initial value — leaving only the
   background-colour. Silent, and undebuggable.

   It is now a real <img>. A missing file shows a broken image, not a blue rectangle;
   it carries alt text; and search engines and social cards can see it. The scrim is
   an overlay (::before) that darkens ONLY the bottom, under the caption, so the face
   is never washed out. */
.portrait {
  position: relative;
  background-color: var(--navy-800);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
  margin: 0;
}
.portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;   /* the crop: lower this % to raise the face */
  display: block;
}
.portrait::before {
  /* Removed the full-panel scrim: darkening the whole photograph to make the
     caption readable meant washing out the face to rescue the tie. The caption
     now carries its own plinth (below), so the photograph stays clean. This is
     only a whisper of shade at the very foot, to seat the plinth. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 21, 40, 0.25) 0%,
    rgba(15, 30, 60, 0.00) 35%);
}
.portrait::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--rule-gold-soft); border-radius: var(--r-md);
  pointer-events: none;
}
.portrait-caption {
  /* THE PLINTH. The caption used to float on the image, so its legibility depended
     on whatever happened to be behind it — and behind it is a white shirt. Half the
     line vanished. It now sits on its own navy base that fades out above the text:
     always readable, whatever the photograph does, and it looks intended. */
  position: relative;
  padding: var(--s-12) var(--s-6) var(--s-6);
  color: var(--on-navy-high);
  font-size: var(--text-sm);
  background: linear-gradient(to top,
    rgba(8, 17, 33, 0.97) 0%,
    rgba(8, 17, 33, 0.94) 40%,
    rgba(8, 17, 33, 0.78) 68%,
    rgba(8, 17, 33, 0.00) 100%);
}
.portrait-caption strong { color: var(--on-navy-high); display: block; font-size: var(--text-base); }

/* Footer */
.site-footer {
  background: var(--navy-950);
  color: var(--on-navy-muted);
  padding: var(--s-12) var(--s-6) var(--s-8);
  font-size: var(--text-sm);
}
.site-footer .wordmark { color: var(--on-navy-high); font-size: var(--text-md); }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--gold-500); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-4) 0; }
.footer-fine { color: var(--on-navy-muted); font-size: var(--text-xs); line-height: var(--leading-loose); }