/* ============================================================================
   PRODUCTION. Loads after css/v2.css on every page except the Capacity Risk
   Index. Built from mockups/marquee-dark.css, one deliberate change:

   --art uses a ROOT-ABSOLUTE url. A url() inside a custom property is the
   construct already scarred in .claude/rules/repos/personal-brand.md for
   resolving against the DOCUMENT rather than the declaring stylesheet. The
   mockups all sat one directory deep, the same depth as css/, so "../images/"
   worked and the ambiguity was invisible. Production documents sit at three
   different depths, where it would have silently broken on two of them.
   ============================================================================ */

/* ============================================================================
   Marquee treatment, graded ground — applied over the live v2 stylesheet.

   Loads AFTER css/v2.css and overrides it. Nothing in v2.css is edited, so this
   file IS the implementation diff: everything here is the delta between the live
   light site and the approved marquee direction in _notes/SPEC-marquee-graded.md.

   Content, markup, and the story-card animation are untouched. This is colour,
   type, ground, and artwork only.

   Section numbers below refer to SPEC-marquee-graded.md. Deviations from the
   spec are marked DEVIATION and carry their reason.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   Two of the live tokens fail silently on a dark ground and both are fixed here
   rather than at each call site.
   - --line was a light-mode hairline (rgba(29,90,122,.2)) and is near invisible.
   - --art pointed at kintsugi.png, which is gold veins on a SOLID WHITE plate
     with no alpha, so it renders as a white block on dark.
   --------------------------------------------------------------------------- */
:root {
  --ink: #ffffff;                        /* was #102a3a. Flips every body/display use at once. */
  --ink-soft: #b8cdd7;                   /* was #526b79. This is --muted-light. */
  --line: rgba(184, 205, 215, 0.2);      /* spec §2 */
  --line-strong: rgba(184, 205, 215, 0.34);
  --gold: #cf9f31;                       /* was #a97912, which reads muddy on blue. §2 gold. */
  --art: url("/images/kintsugi-alpha.png");
  --seam-fade: linear-gradient(90deg, #cf9f31, rgba(207, 159, 49, 0.15) 46%, transparent 78%);
  --radial-lift: radial-gradient(58% 48% at 82% 6%, rgba(50, 125, 165, 0.3), transparent 70%);
}

/* ---------------------------------------------------------------------------
   2. Ground — spec §1
   One gradient runs ONCE down the entire document. Every band is transparent.
   If a band paints its own ground the gradient restarts inside it and the page
   reads as stacked blocks instead of one descending surface.
   html stays unpainted so body's background propagates to the canvas.
   --------------------------------------------------------------------------- */
html { background: none; }

body {
  /* DEVIATION from §1's two-stop default: holds full --blue-deep through the
     first 18% so the fold does not start already down the ramp. The live page is
     roughly 5x the height of the 3-band mockup the spec was written against, and
     §1 names this refinement as a decision to make against real page length. */
  background: linear-gradient(180deg, #0b2d42 0%, #0b2d42 18%, #071e2b 100%);
  background-attachment: scroll;
  color: var(--muted-light);
  min-height: 100svh;
}

/* the fixed hairline frame */
body::before { border-color: rgba(184, 205, 215, 0.09); }

/* Every band contributes its seam and its radial, never a ground. */
.page-hero,
.reader-section,
.section.blue,
.about-section,
.footer { background: transparent; }

/* ---------------------------------------------------------------------------
   3. Typography — spec §4
   Three roles, three faces: Fraunces display, Inter body, IBM Plex Mono utility.

   The opsz fix is the load-bearing one. font-optical-sizing:auto maps the axis
   to the rendered point size, so a 100px+ headline resolves near opsz 88 and
   never reaches the display cut. The live site has requested the 9..144 axis
   since launch and has never once engaged it.
   --------------------------------------------------------------------------- */
.brand,
.page-hero h1,
.section-title,
.punch,
.bento-card h3,
.card-mark,
.story-count strong,
.story-panel h3,
.footer-grid > div:first-child h4 {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144;
}

.page-hero h1,
.section-title,
.bento-card h3,
.footer-grid > div:first-child h4 { color: #ffffff; }

/* Utility face. Listed explicitly rather than by inheritance so the serif
   display heading inside .footer-grid never picks it up. */
.eyebrow,
.credentials,
.status,
.card-kicker,
.story-count,
.trust-rail,
.capture-note,
.footer-bottom,
.footer h4:not(.footer-grid > div:first-child h4) {
  font-family: var(--mono);
  font-weight: 400;
}

.eyebrow {
  color: var(--muted-light);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.punch { color: var(--gold); }        /* system rule: gold IS permitted on the punch line */
.hero-lede,
.section-lede,
.reader-body,
.newsletter-copy { color: var(--muted-light); }
.reader-bridge { color: #ffffff; }
.reader-outcomes li { color: var(--muted-light); }
.reader-outcomes li::before { color: var(--gold); }

/* ---------------------------------------------------------------------------
   4. Dark-surface treatment — spec §3
   Gold seam on the top edge, blue-bright radial upper right. This is what stops
   a flat blue from reading as a flat blue.

   The live site already carries two richer kintsugi seams of its own: the jagged
   .seam element inside .reader-section, and .section.seamed::before on the
   newsletter band. Those are kept untouched, so the straight fading seam below
   is applied only to the two bands that have no seam today. Every band gets a
   top edge exactly once, never twice.
   --------------------------------------------------------------------------- */
.about-section::before,
.footer::before {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--seam-fade);
  content: "";
}

.about-section { position: relative; }
.footer {
  position: relative;
  border-top: 0;                       /* was 3px solid gold: a slab on a dark ground */
}

/* the radial. z-index 0, content sits at 2, so it never washes over copy. */
.page-hero::after,
.reader-section::after,
.about-section::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--radial-lift);
  content: "";
  pointer-events: none;
}

.reader-section { position: relative; border-block: 0; }
.reader-layout,
.about-grid { position: relative; z-index: 2; }

/* .section.blue already carries its own blue-bright radial in v2.css. Left alone. */

/* ---------------------------------------------------------------------------
   5. The kintsugi artwork — spec §6
   Three instances, descending opacity, all bleeding off the right edge, all
   behind content. Artwork sits right and washes out left. It never tiles, never
   becomes wallpaper, and never sits behind body copy.

   DEVIATION from §6's placement table: the middle and lower instances are pushed
   further off-canvas than the spec's values. The spec was written for a 3-band
   page whose right columns are empty; the live page puts a bento grid, a CTA
   button, and the about copy in exactly that space. Bleed values are set so each
   instance clears the live copy column at 1440.
   --------------------------------------------------------------------------- */
.crack {
  position: absolute;
  z-index: 1;
  background-image: var(--art);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  pointer-events: none;
}

.page-hero { overflow: hidden; isolation: isolate; }
.page-hero .crack {
  top: -12%;
  right: -14%;
  width: 52%;
  height: 150%;
  opacity: 0.62;                       /* DEVIATION: §6 says .92. See note below. */
}
/* The spec's .92 is calibrated to an 11ch headline. The live H1 is ~90 characters
   and runs the full width of the fold, so at .92 the vein reads as noise across
   the type rather than as a frame beside it. */

.section.blue { position: relative; overflow: hidden; }
.section.blue .crack {
  top: -30%;
  right: -28%;
  width: 44%;
  height: 180%;
  opacity: 0.5;
  transform: scaleX(-1);               /* mirrored so three instances do not read as a repeat */
}

.about-section { overflow: hidden; }
.about-section .crack {
  top: -40%;
  right: -24%;
  width: 40%;
  height: 200%;
  opacity: 0.3;
}

/* the old light-mode art block on the about band, replaced by .crack above */
.about-section > .art-legacy { display: none; }

/* ---------------------------------------------------------------------------
   6. Header
   --------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(7, 30, 43, 0.72);
}

.brand { color: #ffffff; }
/* The live brand splits the name in --blue. Gold was tried here and pulled back:
   gold marks repair, and a surname is not a repair mark. The header already
   spends its gold on the nav underline and the repair tick. */
.brand span { color: var(--muted-light); }
.credentials,
.nav-links a { color: var(--muted-light); }
.nav-links a:hover { color: #ffffff; }

.trust-rail {
  border-top: 1px solid var(--line);
  color: var(--muted-light);
}
.trust-rail a { color: #ffffff; }
.trust-rail a:hover { color: var(--gold); }

.menu-toggle {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   7. Buttons
   The live primary fill is --blue-deep, which is now the ground, so every CTA
   would vanish. Primary becomes a light fill on dark.

   Gold is deliberately NOT used for any button. The design system reserves gold
   for repair marks: seams, the nav underline, the footer rule, the focus ring,
   serif numerals, and the punch line. Never a normal CTA fill.
   --------------------------------------------------------------------------- */
.pill-link,
.button {
  border-color: transparent;
  background: var(--paper);
  color: var(--blue-black);
}

.pill-link:hover,
.button:hover { background: #ffffff; }

.button.ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: #ffffff;
}

.button.ghost:hover {
  border-color: var(--muted-light);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------------
   8. Hero
   --------------------------------------------------------------------------- */
.page-hero::before { display: none; }  /* the light-mode concentric rings */

.page-hero h1 {
  letter-spacing: -0.05em;             /* spec §4 display tracking */
  line-height: 0.9;
}

.hero-inner { position: relative; z-index: 2; }

.repair-mark::before { background: var(--muted-light); }
.repair-mark::after { background: var(--gold); }

/* ---------------------------------------------------------------------------
   9. The story cards
   The animation contract is untouched: js/site.js queries [data-story-section],
   [data-story], .story-progress span and .story-count strong, and toggles
   .is-active. Every one of those still resolves. Only the paint changes.

   The live active cue is opacity + scale + a soft light-mode drop shadow. The
   shadow does nothing on a dark ground, so the active card also gets the gold
   seam on its top edge. Without it the animation runs correctly and reads as
   broken.
   --------------------------------------------------------------------------- */
/* Opacity carries far less of the active cue here than it does on the live light
   page. On paper a 0.76 white panel over pale mist is still fully readable; the
   same idea on a dark ground dims low-contrast text into nothing. So the resting
   state stays legible and the DIFFERENCE moves onto the border, the panel lift,
   and the seam. First render had this at 0.5 and cards 02-04 were unreadable. */
.bento-card {
  border: 1px solid rgba(184, 205, 215, 0.14);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  opacity: 0.78;
}

.bento-card:not(.beam) .bento-inner { background: transparent; }

.bento-card.is-active {
  border-color: rgba(184, 205, 215, 0.42);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.38);
  opacity: 1;
}

.bento-card::after {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--seam-fade);
  content: "";
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.bento-card.is-active::after { opacity: 1; }

/* Card 04 carries .dark, which differentiated it on a light page and does
   nothing now. It becomes the raised panel instead: same family, one step up. */
.bento-card.dark {
  border-color: rgba(184, 205, 215, 0.28);
  background:
    radial-gradient(circle at 88% 22%, rgba(50, 125, 165, 0.26), transparent 32%),
    rgba(255, 255, 255, 0.085);
}

.bento-card.dark.is-active { border-color: rgba(184, 205, 215, 0.46); }

/* the beam card keeps its conic sweep; only the panel under it is repainted */
.bento-card.beam { background: transparent; }
.bento-card.beam .bento-inner {
  background:
    linear-gradient(145deg, rgba(50, 125, 165, 0.2), rgba(7, 30, 43, 0.9) 66%),
    #0b2d42;
}

/* Mono is wider than Inter at the same size, so the live 0.61rem chips wrapped to
   three lines the moment the utility face landed on them. Size down, track in,
   and refuse the wrap: these are labels, not copy. */
.status {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-light);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.dark .status { background: rgba(255, 255, 255, 0.1); color: var(--muted-light); }

.card-mark { color: rgba(184, 205, 215, 0.22); }
.dark .card-mark { color: rgba(184, 205, 215, 0.26); }

.bento-card p,
.bento-card.dark p { color: var(--muted-light); }

.card-link,
.dark .card-link { color: #ffffff; }
.card-kicker,
.dark .card-kicker { color: var(--muted-light); }

/* the progress rail */
.story-progress { background: rgba(184, 205, 215, 0.18); }
.story-progress span { background: linear-gradient(rgba(184, 205, 215, 0.55), var(--gold-bright)); }
.story-count { color: var(--muted-light); }
.story-count strong { color: #ffffff; }   /* serif numeral, kept white to hold the gold budget */

/* ---------------------------------------------------------------------------
   10. About
   --------------------------------------------------------------------------- */
.portrait {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.34);
}

.portrait img { filter: saturate(0.72) contrast(1.04) brightness(0.94); }
.portrait-wrap::before { border-color: var(--gold); }

/* ---------------------------------------------------------------------------
   11. Footer and capture
   --------------------------------------------------------------------------- */
.footer h4 { color: var(--muted-light); opacity: 0.72; }
.footer-grid > div:first-child h4 { color: #ffffff; opacity: 1; }
.footer a { color: var(--muted-light); }
.footer a:hover { color: #ffffff; }
.footer-bottom { border-top: 1px solid var(--line); }

.capture {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
}

/* was a solid gold fill, which is the one thing the design system says gold may
   never be. The dark pass forces the fix rather than inheriting the violation. */
.capture button {
  background: var(--paper);
  color: var(--blue-black);
}

.capture button:hover { background: #ffffff; }
.capture-note,
.footer .capture-note { color: rgba(184, 205, 215, 0.72); }

/* ---------------------------------------------------------------------------
   12. Mobile — spec §6 mobile rule: widen and push further off-canvas, drop opacity
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .page-hero .crack { width: 64%; right: -20%; opacity: 0.4; }
  .section.blue .crack { width: 58%; right: -32%; opacity: 0.34; }
  .about-section .crack { width: 54%; right: -30%; opacity: 0.22; }
}

/* ============================================================================
   PART 2 — the secondary pages
   About, For Clinicians, and Straight Answers (index + articles + the ask block).

   The Capacity Risk Index is deliberately NOT in this list. It stays on the light
   v2 stylesheet and simply never loads this file. Reasons, so nobody "finishes
   the job" later by accident: it is a data instrument rather than a brand
   surface, dense state tables read better on white, and its five-colour tier
   scale is calibrated against a light ground. One concrete trap if it is ever
   converted: v2.css:1159 sets .tier-moderate's text to var(--ink), which this
   file flips to white, giving white type on a gold badge.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   13. The mist band
   .section.mist paints --blue-mist, a pale slab. Five of them sit across these
   pages and every one restarts the ground mid-document, which is the single
   thing the graded direction exists to prevent. They go transparent and earn
   their separation from the seam they already carry plus a faint lift, so the
   page still has rhythm without breaking the gradient.
   --------------------------------------------------------------------------- */
.section.mist {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
}

.section.mist .section-title,
.section .section-title { color: #ffffff; }
.section.mist .section-lede,
.section .section-lede { color: var(--muted-light); }

/* ---------------------------------------------------------------------------
   14. The clinicians story panels
   Second instance of the same animation contract as the homepage bento: site.js
   toggles .is-active on [data-story] inside [data-story-section]. Same fix as
   the cards, same reason. Resting opacity stays legible and the active cue moves
   onto the border, the lift, and the seam.
   --------------------------------------------------------------------------- */
.story-panel {
  border: 1px solid rgba(184, 205, 215, 0.14);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  opacity: 0.78;
}

.story-panel.is-active {
  border-color: rgba(184, 205, 215, 0.42);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 34px 96px rgba(0, 0, 0, 0.38);
  opacity: 1;
}

.story-panel::after {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--seam-fade);
  content: "";
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.story-panel { position: relative; overflow: hidden; }
.story-panel.is-active::after { opacity: 1; }

/* the blue panel was the differentiated one on a light page and does nothing
   now. Same treatment as the homepage's card 04: one step up, not a colour. */
.story-panel.blue-panel {
  border-color: rgba(184, 205, 215, 0.28);
  background:
    radial-gradient(circle at 88% 18%, rgba(50, 125, 165, 0.26), transparent 32%),
    rgba(255, 255, 255, 0.085);
}

.story-panel.blue-panel.is-active { border-color: rgba(184, 205, 215, 0.46); }
.story-panel h3 { color: #ffffff; }
.story-panel p,
.story-panel.blue-panel p { color: var(--muted-light); }
.story-number,
.blue-panel .story-number { color: var(--gold); }

/* ---------------------------------------------------------------------------
   15. Clinicians: split hero, list-split, waitlist, proof slots, FAQ
   --------------------------------------------------------------------------- */
.hero-shot { background: var(--line); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42); }
.hero-shot a { background: rgba(255, 255, 255, 0.05); }
.hero-shot img { border-color: var(--line); }
.shot-meta { color: var(--muted-light); }
.vintage-stamp { color: var(--muted-light); }
.vintage-stamp strong { color: #ffffff; }

.list-split {
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted-light);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-light);
}
.list-split strong { color: #ffffff; }

.closing { color: var(--gold); }

.proof-reserved {
  border-color: rgba(184, 205, 215, 0.34);
  background: rgba(255, 255, 255, 0.035);
}
.proof-reserved > p { color: var(--muted-light); }

.proof-slot {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted-light);
}
.proof-slot b { color: #ffffff; }

.faq-list { border-top-color: var(--line); }
.faq-list details { border-bottom-color: var(--line); }
.faq-list summary { color: #ffffff; }
.faq-list summary::after { color: var(--muted-light); }
.faq-list details[open] summary::after { color: var(--gold); }
.faq-list details p { color: var(--muted-light); }

/* ---------------------------------------------------------------------------
   16. Straight Answers — answers.css components
   answers.css resolves everything through v2 tokens, so most of it converts for
   free. These are the four places it names a light value directly.
   --------------------------------------------------------------------------- */
.answer-card { background: rgba(255, 255, 255, 0.045); }        /* was --white */
.answer-grid { background: var(--line); }                        /* the 1px rules between cards */
.answer-card h3 { color: #ffffff; }
.answer-card p,
.answer-meta { color: var(--muted-light); }
.answer-short { color: #ffffff; }
.topic-title { color: #ffffff; border-bottom-color: var(--line); }

.answer-list,
.answer-steps { color: var(--muted-light); }
.answer-list::marker,
.answer-steps > li::marker { color: var(--gold); }

/* the pull quote: verbatim clinician language, so it has to read as another
   voice without becoming decorative. Blue rule at --blue is invisible on the
   ground, so the rule lifts to muted-light and the type goes white. */
.pull { border-left-color: var(--muted-light); }
.pull p { color: #ffffff; }
.pull cite { color: var(--muted-light); }
.pull cite a { color: #ffffff; }

.callout {
  border-top-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);                         /* was --blue-mist */
}
.callout p { color: var(--muted-light); }
.callout-label { color: var(--muted-light); }

[data-page="answer"] #main-content h1,
[data-page="answer"] #main-content h3 { color: #ffffff; }
[data-page="answer"] #main-content p { color: var(--muted-light); }
[data-page="answer"] #main-content .section-title.small { color: #ffffff; }

/* ---------------------------------------------------------------------------
   17. The ask-a-question block (_notes/ASK-A-QUESTION-SPEC.md)
   Not live yet. Included so the section ships dark rather than being converted
   after the fact. The submit button was --blue-deep, which is now the ground.
   --------------------------------------------------------------------------- */
.ask-box {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.05);
}

.ask-label { color: #ffffff; }
.ask-label span { color: var(--muted-light); }

.ask-box textarea,
.ask-box input[type="text"],
.ask-box input[type="email"] {
  border-color: var(--line-strong);
  background: rgba(7, 30, 43, 0.55);
  color: #ffffff;
}

.ask-box ::placeholder { color: rgba(184, 205, 215, 0.62); }

.ask-submit {
  background: var(--paper);
  color: var(--blue-black);
}

.ask-submit:hover { background: #ffffff; }
.ask-note { color: var(--muted-light); }

/* ---------------------------------------------------------------------------
   18. Prose and disclosure
   --------------------------------------------------------------------------- */
.prose p { color: var(--muted-light); }
.prose strong { color: #ffffff; }

.disclosure-box {
  border-left-color: var(--gold);
  background: rgba(255, 255, 255, 0.045);
}
.disclosure-box ul { color: var(--muted-light); }

/* ---------------------------------------------------------------------------
   19. Artwork on the secondary pages
   Two instances per page rather than three: these pages are longer and denser
   than the homepage, and a third would end up behind a reading column.
   --------------------------------------------------------------------------- */
.page-hero .crack { }                                   /* inherits the fold values in §5 */

.section.mist { overflow: hidden; }
.section.mist .crack {
  top: -34%;
  right: -30%;
  width: 42%;
  height: 190%;
  opacity: 0.36;
  transform: scaleX(-1);
}

@media (max-width: 860px) {
  .section.mist .crack { width: 56%; right: -34%; opacity: 0.2; }
}

/* ---------------------------------------------------------------------------
   20. Contrast fixes, all three found by measurement rather than by eye
   Each one passed a visual check and failed a computed WCAG pass against the
   tight end of the gradient (#0b2d42). Numbers are the measured ratios.
   --------------------------------------------------------------------------- */

/* v2 turns eyebrows gold inside .section.blue. Gold at the mono role's 0.72
   opacity composites to 3.66:1 at 11px, under the 4.5 floor. Eyebrows are now
   uniformly muted-light everywhere, which measures 5.18:1 and also stops the
   utility rail from spending gold it does not need. */
.section.blue .eyebrow,
.section.blue .section-index { color: var(--muted-light); }

/* --blue on the ground is 1.9:1. The gold hairline before it is a seam and stays. */
.section-index { color: var(--muted-light); }
.section-index::before { background: var(--gold); }

/* .status.gold is a --gold-pale slab with #684807 text. Internally legible, but
   it is a light block sitting on the graded ground, which is the one thing the
   direction rules out. Same mono chip as every other status. */
.status.gold {
  background: rgba(207, 159, 49, 0.16);
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   21. opsz on the display faces the secondary pages introduce
   answers.css and v2 both declare Fraunces on elements Part 1 never saw, so they
   were rendering the text cut enlarged rather than the display cut.
   --------------------------------------------------------------------------- */
.answer-card h3,
.topic-title,
.faq-list summary,
.disclosure-box h3,
.result-body h3,
.closing,
[data-page="answer"] #main-content h1,
[data-page="answer"] #main-content .section-title.small {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144;
}

/* ---------------------------------------------------------------------------
   4. Gold in the header
   Replaces --muted-light (#b8cdd7), which reads washed out against the ground.
   Measured: gold #cf9f31 on #0b2d42 is 5.90:1, versus muted-light's 5.18:1 at
   the 0.72 opacity the utility role uses. So this is a contrast gain, not a
   trade.

   This reverses the earlier call that pulled the brand surname off gold. Noted
   rather than argued: it was a design-system reading, and it is John's brand.
   --------------------------------------------------------------------------- */
.brand span { color: var(--gold); }
.credentials { color: var(--gold); opacity: 0.9; }
.nav-links a { color: var(--gold); }
.nav-links a:hover,
.nav-links a.active { color: #ffffff; }
.trust-rail { color: var(--gold); }
.trust-rail a { color: var(--gold); }
.trust-rail a:hover { color: #ffffff; }

/* The nav underline was already gold. With gold links it no longer marks
   anything, so the active state inverts: white type, gold rule under it. */
.nav-links a::after { background: var(--gold); }