/* ============================================================
   DMITRY YARANOV, MD, FACC . HEART TRANSPLANT DOC
   FABLE build . "CRIMSON CINEMA"
   Warm ivory paper + near-black ink cinema + arterial crimson
   punctuation + antique-gold hairlines. Cabinet Grotesk display,
   Satoshi body, Space Grotesk tracked-caps and numerals. Dark acts
   are lit stages, light pages breathe, glow is earned, gradient is
   clipped to one accent word. Self-hosted WOFF2, zero libraries.
   ============================================================ */

/* ---- SELF-HOSTED TYPE (WOFF2, font-display swap) ---- */
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* ===== SHARED TOKEN CONTRACT (2026-09-30 navy pass, K1 owns this block) =====
     Every builder references these six names, with the literal fallback shown
     in each comment (var(--navy-ground, #0C1833)), so a page that loads before
     this file still renders correctly. Dev, verbatim: "use this shade of dark
     blue, not the light dark blue kind" (screenshot measured exactly #0C1833).
     THE ONE DARK GROUND. Every .sec-dark / .on-dark section, every navy hero
     variant, flipband, mission-bg, edubg, method sections, the footer: this
     colour, flat, nothing layered on top that shifts its hue toward blue. */
  --navy-ground:#0C1833;
  --navy-ground-rgb:12 24 51;
  /* VIVID CRIMSON ON NAVY. Large type (headline accents) clips --grad-shine-dark
     as its background with --crimson-vivid as the flat colour fallback; small
     type/lines/fills on navy use flat --crimson-glow (6.4:1 on navy-ground).
     J2 fix (2026-09-30 night): the middle stop used to be #FFE1E4, a pale
     near-white pink, so every accent word and big numeral (100+, 650,000)
     visibly faded to almost white at its centre ("make it less lighter
     towards the end"). The middle stop is now #FF8F6B, a vivid coral, so
     the ramp reads crimson into coral into crimson end to end and never
     touches pink or white. */
  --crimson-vivid:#E23A46;
  --crimson-glow:#FF6B75;
  --grad-shine-dark:linear-gradient(100deg,#E23A46 0%,#FF6B75 30%,#FF8F6B 50%,#FF6B75 70%,#E23A46 100%);
  --grad-shine-light:linear-gradient(100deg,#8E1620 0%,#C0343C 45%,#E23A46 55%,#8E1620 100%);
  /* Headings on navy. Body copy on navy keeps the existing --on-dark /
     --on-dark-soft ramp declared further down, unchanged. */
  --ink-on-dark:#F4F7FB;

  /* ===== BRAND: navy / cream / oxblood, sampled from the client's reference art =====
     Navy #021631 and cream #F8F3EF were read independently from both supplied
     files and agreed exactly. Red shifts by ground: brighter on navy so it
     reads, much deeper on cream. Tan replaces gold as the secondary tone. */
  /* PAPER RAMP (ORCHESTRATOR 6.1: cream retires, cool clean white.
     Retuned + contrast-checked against --ink/--ink-soft, never eyeballed.) */
  --paper:#F4F6F9; --paper-2:#FFFFFF; --paper-3:#E9EDF3; --paper-shade:#D9DFE8;
  /* NAVY INK */
  --ink:#0B1B33; --ink-soft:#42506B; --ink-faint:#5A6880;   /* 4.9:1 on cream; the old faint grey was 3.4:1 */
  /* Repointed to the shared contract above: one exact navy, everywhere,
     never a second hue drifting off it (Dev: "isnt even consistent as it
     changes from section to section"). */
  --near-black:var(--navy-ground); --ink-deep:var(--navy-ground); --warm-floor:var(--navy-ground);
  /* OXBLOOD / CRIMSON. --crimson-bright is now the shared --crimson-vivid
     hex (was the muted #C0343C Dev called "washed out and ass" on navy);
     --crimson-bright-rgb follows it so every rgb(var(--crimson-bright-rgb)/x)
     glow/shadow is vivid too. Plain --crimson (deep oxblood) stays as the
     light-ground default; it is repointed to --crimson-glow only inside a
     dark ground, below. */
  --crimson:#A5202A; --crimson-bright:#E23A46; --crimson-deep:#6B0F14;
  /* STEEL NAVY + ICE WHITE. ORCHESTRATOR 6.1: gold and tan retire as accent
     colors sitewide. --gold/--gold-deep, formerly antique gold, become a
     steel navy for hairlines and small type on light grounds; --gold-soft
     and --tan, formerly a pale gold/tan on dark, become a cool ice white.
     Same variable names on purpose: every existing rule that already reads
     these tokens repaints itself with zero further edits. (Gold and tan
     survive only inside photographs and not-yet-replaced generated art.) */
  --gold:#526B92; --gold-deep:#3E5678; --gold-soft:#DCE4EF; --tan:#DCE4EF;
  /* CHANNEL TOKENS: alpha variants derive from the brand instead of being
     retyped as raw rgb triplets in 120 places. */
  --paper-rgb:244 246 249; --ink-rgb:11 27 51; --navy-rgb:var(--navy-ground-rgb);
  --crimson-rgb:165 32 42; --crimson-bright-rgb:226 58 70; --tan-rgb:220 228 239;
  /* HAIRLINES */
  --hair:rgb(var(--ink-rgb) / .14); --hair-strong:rgb(var(--ink-rgb) / .24);
  --hair-inv:rgba(255,255,255,.16); --hair-inv-strong:rgba(255,255,255,.30);
  --gold-hair:rgb(var(--tan-rgb) / .42); --gold-hair-inv:rgb(var(--tan-rgb) / .34);
  /* GLOW (earned only) */
  --glow-crimson:0 0 26px -8px rgb(var(--crimson-bright-rgb) / .55), 0 0 84px -26px rgb(var(--crimson-bright-rgb) / .38);
  --grad-crimson:linear-gradient(135deg,#E23A46 0%,#C0343C 46%,#A5202A 100%);
  --grad-blood:linear-gradient(135deg,#8E1620 0%,#6B0F14 48%,#42070B 100%);
  /* Was its own muted maroon-to-crimson ramp (#D2555C-#8E1620); repointed to
     the shared vivid contract so every remaining reader of this token
     (motion-kit.css, the page kits) gets the same fix with no edit of its own. */
  --grad-crimson-bright:var(--grad-shine-dark);
  --glow-crimson-soft:0 0 20px -10px rgb(var(--crimson-bright-rgb) / .4), 0 0 60px -28px rgb(var(--crimson-bright-rgb) / .22);
  --bloom-crimson:radial-gradient(46% 52% at 66% 28%, rgb(var(--crimson-bright-rgb) / .20), transparent 62%);
  /* SHADOW TIERS */
  --sh-1:0 1px 2px rgb(var(--navy-rgb) / .06), 0 2px 8px -4px rgb(var(--navy-rgb) / .10);
  --sh-2:0 6px 20px -10px rgb(var(--navy-rgb) / .20);
  --sh-3:0 24px 60px -30px rgb(var(--navy-rgb) / .40);
  --sh-cinema:0 34px 80px -40px rgba(0,0,0,.8);
  /* TYPE FACES */
  /* Modern medical-authority system: Cabinet Grotesk carries the display voice
     (700/800 only), Satoshi carries body and italic accents, Space Grotesk sets
     the tracked caps, labels, and tabular numerals. No serif, no Times fallback. */
  --display:'Cabinet Grotesk','Archivo Black',system-ui,sans-serif;
  --body:'Satoshi','Segoe UI',system-ui,sans-serif;
  --label:'Space Grotesk','Satoshi',system-ui,sans-serif;
  /* the wordmark only. Headings stay grotesque; the all-serif treatment was rejected. */
  --wordmark:'Newsreader',Georgia,serif;
  /* FLUID TYPE SCALE (humane retune) */
  --t-nano:clamp(.64rem,.62rem + .1vw,.7rem);
  --t-micro:clamp(.7rem,.67rem + .12vw,.76rem);
  --t-label:clamp(.74rem,.7rem + .17vw,.83rem);
  --t-body:clamp(1.06rem,1.03rem + .16vw,1.17rem);
  --t-lede:clamp(1.1rem,1rem + .5vw,1.4rem);
  --t-h3:clamp(1.3rem,1.05rem + .9vw,1.9rem);
  --t-h2:clamp(2.2rem,1.1rem + 3.4vw,4.2rem);
  --t-h1:clamp(2.9rem,2rem + 3.9vw,5.3rem);
  --t-display:clamp(2.7rem,1.2rem + 4.9vw,5.6rem);
  --t-numeral:clamp(3.7rem,2.4rem + 5.5vw,8.6rem);
  /* TRACKING / LEADING (a grotesque needs more air than the serif) */
  --trk-caps:.16em; --trk-caps-wide:.2em; --trk-caps-tight:.1em;
  --trk-display:-.025em; --trk-h2:-.02em;
  --lh-display:.95; --lh-h2:1.04; --lh-body:1.6; --lh-deck:1.15;
  /* SPACE / EDGE */
  --max:1400px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --space:clamp(5rem,10vw,10.5rem);
  --space-air:clamp(6.5rem,14vw,14rem);
  --space-tight:clamp(3.4rem,7vw,6rem);
  --edge:clamp(0rem,7vw,7.5rem);
  --edge-half:clamp(0rem,3.5vw,3.75rem);
  /* RADIUS */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:26px; --r-full:50%;
  /* EASING */
  --ease:cubic-bezier(.22,.68,0,1.06);
  --ease-soft:cubic-bezier(.4,0,.15,1);
  --ease-snap:cubic-bezier(.16,1,.3,1);
  /* DURATION */
  --t-fast:.15s; --t-mid:.3s; --t-slow:.45s; --t-reveal:.6s; --t-lux:.9s;
  /* Z */
  --z-raise:2; --z-nav:100; --z-drawer:200; --z-skip:300;
  /* TEXTURE */
  --grain: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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* TEXT ON NAVY (was an undeclared ivory ramp repeated as raw hexes).
     ORCHESTRATOR 6.1: moved off warm beige onto a cool ice ramp so it never
     reads as cream-on-navy; --on-dark-faint measures ~7:1 on --ink-deep,
     the worst-case ground, contrast-checked, not eyeballed. */
  --on-dark:#E8EDF4; --on-dark-soft:#B7C2D6; --on-dark-faint:#8B96AC;
  /* Hue-locked lift for glass panes/panels ONLY (never a full-bleed section
     ground, which stays flat --navy-ground per the contract above). */
  --navy-raised:#14264A; --navy-veil:var(--navy-ground);
}

/* ============================================================
   FOUNDATION: glass, plate, motion utilities, shared components
   Built per DMITRY-REDESIGN-2026-09/30-FINAL-DESIGN-SPEC.md section 1
   and its section 6 orchestrator overrides. Placed early (right after
   :root) on purpose: everything below this block, all the way through
   the rest of the file, may reference these tokens and classes, and
   any later same-specificity rule that needs to win (an existing
   component's own border-radius, for one) still can, simply by
   appearing later in the file, as it already does.
   ============================================================ */
:root{
  /* ===== GLASS SURFACE SYSTEM (spec 1.1, colors per 6.1) =====
     Tiered frosted panels for .sec-dark / .phero grounds. Tint stays
     neutral white so crimson content and photography can both sit
     inside a pane without a color clash (signature move 5: the
     ambient sweep is never recolored crimson).
     J1 fix (2026-09-30 night): each tier's background is now TWO
     layers, the white sheen on top of a near-opaque navy base
     (--navy-ground at rising alpha per tier), not the sheen alone.
     A lone 5-13% white tint let anything moving behind a card (the
     living-navy trace, before it was removed) paint straight through
     the blur; the solid base under it means a glass card never shows
     what is behind it again, trace or no trace. */
  --glass-tint-rgb:255 255 255;

  --glass-1-bg:linear-gradient(rgb(var(--glass-tint-rgb) / .05),rgb(var(--glass-tint-rgb) / .05)),rgb(var(--navy-ground-rgb) / .55);
  --glass-1-filter:blur(20px) saturate(140%);
  --glass-1-border:1px solid rgb(var(--glass-tint-rgb) / .10);
  --glass-1-edge:inset 0 1px 0 rgb(var(--glass-tint-rgb) / .14), inset 0 -1px 0 rgb(0 0 0 / .22);
  --glass-1-shadow:0 20px 50px -30px rgb(0 0 0 / .55);
  --glass-1-grain:.025;

  --glass-2-bg:linear-gradient(rgb(var(--glass-tint-rgb) / .09),rgb(var(--glass-tint-rgb) / .09)),rgb(var(--navy-ground-rgb) / .62);
  --glass-2-filter:blur(28px) saturate(160%);
  --glass-2-border:1px solid rgb(var(--glass-tint-rgb) / .16);
  --glass-2-edge:inset 0 1px 0 rgb(var(--glass-tint-rgb) / .20), inset 0 -1px 0 rgb(0 0 0 / .28);
  --glass-2-shadow:0 30px 70px -35px rgb(0 0 0 / .60);
  --glass-2-grain:.035;

  --glass-3-bg:linear-gradient(rgb(var(--glass-tint-rgb) / .13),rgb(var(--glass-tint-rgb) / .13)),rgb(var(--navy-ground-rgb) / .68);
  --glass-3-filter:blur(40px) saturate(180%);
  --glass-3-border:1px solid rgb(var(--glass-tint-rgb) / .22);
  --glass-3-edge:inset 0 1.5px 0 rgb(var(--glass-tint-rgb) / .26), inset 0 -1px 0 rgb(0 0 0 / .34);
  --glass-3-shadow:0 40px 90px -40px rgb(0 0 0 / .68);
  --glass-3-grain:.045;

  /* CRIMSON LIT GLASS: crimson as a light source behind the pane, never
     a fill. Reserved for the exit intent overlay only (section 2). */
  --glass-crimson-bg:radial-gradient(60% 70% at 78% 18%,
    rgb(var(--crimson-bright-rgb) / .26) 0%,
    rgb(var(--crimson-bright-rgb) / .08) 46%,
    transparent 72%);
  --glass-crimson-border:1px solid rgb(var(--crimson-bright-rgb) / .30);
  --glass-crimson-glow:0 0 70px -22px rgb(var(--crimson-bright-rgb) / .45);

  /* Specular sweep, NEUTRAL by rule (signature move 5). Never recolored
     crimson, on any tier, on any section. */
  --glass-sweep:linear-gradient(152deg, rgb(255 255 255 / .14) 0%, rgb(255 255 255 / .05) 20%, transparent 45%);

  /* ===== DOCUMENT PLATE (signature move 2) =====
     An opaque ivory "page" floating on navy: same two tone bevel and
     grain discipline as glass-1/2/3, but backdrop-filter free, so it
     never needs a contrast fallback and never sits over anything it
     would blur. Used for both PPT charts and nothing else at launch. */
  --plate-bg:var(--paper-2);
  --plate-border:1px solid rgb(var(--paper-rgb) / .14);
  --plate-edge:inset 0 1.5px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .10);
  --plate-shadow:0 40px 90px -40px rgb(0 0 0 / .62);
  --plate-grain:.035;

  /* Calibration tick strip, CSS only, zero JS. Scoped by rule to the
     two chart plates' own edge (never a sitewide bezel, spec 1.3's
     explicit kill list) and to .lede-gauge's track (spec, Heart School). */
  --tick-on-light:repeating-linear-gradient(90deg, rgb(var(--crimson-rgb) / .32) 0 1px, transparent 1px 9px);
  --tick-on-dark:repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 9px);

  /* One hand-drawn quotation mark glyph (signature move 3), defined once
     as a mask so every .quote-plate and the exit overlay's patient-quote
     card recolor the SAME shape per ground, instead of each hand-copying
     an inline SVG. */
  --quote-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M4 24c0-11 7-18 16-20l2 6c-6 2-10 6-10 12h9v18H4V24zm30 0c0-11 7-18 16-20l2 6c-6 2-10 6-10 12h9v18H34V24z'/%3E%3C/svg%3E");
}
@media(max-width:900px){
  /* "Halve blur radius, never opacity, below 900px" (spec 1.1 placement
     discipline). Every .glass-1/2/3 surface, and every dark-ready card
     that reuses these same filter tokens, gets this for free. */
  :root{
    --glass-1-filter:blur(10px) saturate(140%);
    --glass-2-filter:blur(14px) saturate(160%);
    --glass-3-filter:blur(20px) saturate(180%);
  }
}

.plate{position:relative;isolation:isolate;border-radius:var(--r-lg);
  background:var(--plate-bg);border:var(--plate-border);color:var(--ink);
  box-shadow:var(--plate-edge),var(--plate-shadow);}
.plate::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:var(--grain);background-size:160px;mix-blend-mode:multiply;opacity:var(--plate-grain);}
/* the one permitted calibration tick strip, top edge only, the two
   chart plates only. Never applied to a stat tile, a bento card, or
   any other numeral bearing surface (spec 1.3's explicit kill list). */

/* ===== DARK HAIRLINE ALIAS =====
   The single highest-leverage dark-readiness fix: --hair/--hair-strong
   are ink-based, built for a light ground, and go nearly invisible on
   navy. Redefining them inside .sec-dark/.on-dark means every existing
   and future component that borders or divides itself with var(--hair)
   (list rows, .qa, .speak__li, .engage__row, .work__item, and anything
   not yet written) repaints correctly the moment it lands on navy, with
   no per-component patch. Components that already set an explicit
   --hair-inv override keep doing so; this is additive, never a removal. */
.sec-dark,.on-dark{--hair:var(--hair-inv);--hair-strong:var(--hair-inv-strong);}

/* ===== VIVID CRIMSON ON NAVY (REQUIREMENTS D3, same technique as --hair above) =====
   Dozens of shared rules (.label, .ulink, .h-2 em, .lead-stmt em, .work__item.is-active,
   .media__topic.is-active, .rb-stat sup...) paint their crimson accent with plain
   var(--crimson), the deep oxblood tuned for cream paper. On navy that read as murky
   (Dev: "no murky dark crimson on navy... everywhere else, the colours look washed out
   and ass"). Rather than hunt and patch each selector, redefine --crimson itself to the
   vivid --crimson-glow the moment it is inside a dark ground: every existing and future
   rule that reads var(--crimson) repaints correctly with zero further edits, exactly the
   pattern --hair/--hair-strong already use one line up. Large headline accents get the
   fuller --grad-shine-dark clipped-text treatment separately, below. */
.sec-dark,.on-dark,.flipband {--crimson:var(--crimson-glow);}

/* ===== NAV ECG STRIP (signature move 1) =====
   #navProgress becomes a literal heartbeat trace instead of a flat bar. */
/* ===== VIEW TRANSITIONS (spec 1.3) =====
   Cross-document, sitewide, one CSS rule. The header wordmark is the
   only element carrying a view-transition-name (id="navMark", the
   .nav .brand__mark instance only, never the footer copy: .brand__mark
   matches two elements per page, and naming the bare class is invalid
   per spec for two elements sharing one name). */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.45s;animation-timing-function:var(--ease-soft);
}
::view-transition-group(heart-mark),::view-transition-image-pair(heart-mark){animation:none;}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}
.nav .brand__mark{view-transition-name:heart-mark;}

/* ===== CURSOR SPOTLIGHT (spec 1.3) =====
   Exactly two component surfaces sitewide, never a third: index.html's
   #record .rb-card and .work__panel (shared with for-patients.html).
   Masked to a 1px ring, never a flooded card face. One delegated
   pointermove listener in fable.js, gated (pointer:fine) and
   !reduced-motion, writes --mx/--my. */
/* ===== ROW LIGHT (spec 1.3) =====
   Directional hover for plain, unaffordanced list rows only: never a row
   that already carries its own hover state. speaking.html's talk topics
   (.speak__li), research.html's #areas once off pill tags, learn.html's
   #issues rows. Dark variant swaps the tint to crimson-bright so a 5%
   crimson wash still reads against navy instead of vanishing into it. */

/* ===== LEDE-GAUGE (signature move 7) =====
   One shared component: a label, a thin calibrated track, a filled bar
   to the stated value, and the numeral in tabular type, inline at the
   exact sentence that already states a measurable number. Zero new
   copy, zero invented figures. Heart School lesson bodies stay light
   (spec 6.2), but the dark variant costs nothing and is included so a
   future placement on navy is never a page-specific patch. */

/* ===== QUOTE PLATE (signature move 3) =====
   Every real quotation on the site (a patient's words, the vision
   statement, a lesson pull quote) gets this: an oversized statement, a
   left rule, and the one drawn quotation mark glyph (--quote-mark
   above), reused everywhere via a mask so no page hand-draws its own.
   Never applied to a plain content card. Two size steps for the pages
   that need a smaller instance beside a full-scale one (spec 2: mission
   #vision full scale, #principles smaller; for-patients #transformation
   full scale, #voices smaller). */
.quote-plate{position:relative;max-width:34ch;padding-left:clamp(1.4rem,2.6vw,2.2rem);
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.28;color:var(--ink);}
.quote-plate::before{content:'';position:absolute;left:clamp(1.4rem,2.6vw,2.2rem);top:-.55em;
  width:1.9rem;height:1.9rem;background-color:var(--crimson);
  -webkit-mask-image:var(--quote-mark);mask-image:var(--quote-mark);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;opacity:.9;}
.quote-plate cite,.quote-plate footer{display:block;margin-top:.9rem;font-family:var(--label);
  font-weight:600;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-style:normal;color:var(--ink-soft);}
/* REQUIREMENTS D3 names "quote-plate accents" for vivid crimson on navy;
   this used to swap the mark to ice-white on dark instead. */
.sec-dark .quote-plate,.on-dark .quote-plate{color:var(--on-dark);}
.sec-dark .quote-plate::before,.on-dark .quote-plate::before{background-color:var(--crimson-glow);}
.sec-dark .quote-plate cite,.sec-dark .quote-plate footer,
.on-dark .quote-plate cite,.on-dark .quote-plate footer{color:var(--on-dark-soft);}

/* ===== HERO SURFACE DARK-READINESS =====
   .phero--paper (media, newsletter) and .phero--herobg (mission,
   for-patients, research, about) each set their own explicit
   color:var(--ink) later in the file than .sec-dark's own color:
   var(--paper) (fable.css:480). Same specificity, later position
   wins, so a page builder who adds .sec-dark/.on-dark to a hero that
   still carries either surface class, exactly the dark-flip test spec
   6.4 prescribes, gets dark ink title/deck text stranded on the new
   navy ground instead of white. .phero__deck sets its own explicit
   color too (not inherited), so it needs its own override. herobg's
   photo scrim (::after) is also paper-tinted and sits above the photo
   (z-index 1, below the copy), so left unfixed it washes the photo
   white instead of darkening it even once the text itself reads
   correctly; retinted here so the whole hero, not just its type,
   is dark-ready. The title's own <em> still ran plain --crimson
   (2.5:1 on navy, fails even the large-text 3:1 floor); matched to
   the same --crimson-bright swap .phero--dark already uses below
   (3.3:1). Fixed once here so no page builder patches it per page. */
.sec-dark.phero--paper,.on-dark.phero--paper,
.sec-dark.phero--herobg,.on-dark.phero--herobg{color:var(--paper);}
.sec-dark.phero--paper .phero__deck,.on-dark.phero--paper .phero__deck,
.sec-dark.phero--herobg .phero__deck,.on-dark.phero--herobg .phero__deck{color:var(--on-dark);}
.sec-dark.phero--paper .phero__title em,.on-dark.phero--paper .phero__title em,
.sec-dark.phero--herobg .phero__title em,.on-dark.phero--herobg .phero__title em{color:var(--crimson-bright);}
.sec-dark.phero--paper .phero__bg::after,.on-dark.phero--paper .phero__bg::after{
  background:linear-gradient(90deg,var(--near-black) 6%,rgb(var(--navy-rgb) / .55) 58%,transparent);}
.sec-dark.phero--herobg::after,.on-dark.phero--herobg::after{
  background:linear-gradient(90deg,var(--near-black) 20%,rgb(var(--navy-rgb) / .82) 42%,rgb(var(--navy-rgb) / .24) 64%,transparent 82%);}
@media(max-width:860px){
  .sec-dark.phero--herobg::after,.on-dark.phero--herobg::after{
    background:linear-gradient(0deg,var(--near-black) 32%,rgb(var(--navy-rgb) / .82) 62%,rgb(var(--navy-rgb) / .3));}
}

/* ===== SETTLE SPRING (spec 1.2) =====
   var(--ease) is spent sitewide on exactly four named moments. Two live
   in shared code (.work__marker below, .ms-pin.is-locked in
   for-patients.css): both edit their own existing transition directly.
   The other two belong to page builders (the 88% chart's counting
   numeral landing frame, mission's four "yes" word settle) and share
   this one reusable class instead of a fifth hand-rolled rule. */
.settle-spring{transition:transform .4s var(--ease);}

/* ============ RESET + BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
::selection{background:var(--crimson);color:var(--paper-2);}
:focus-visible{outline:2px solid var(--crimson-bright);outline-offset:3px;border-radius:2px;}
.sec-dark :focus-visible,.sec-crimson :focus-visible{outline-color:var(--gold-soft);}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:var(--z-skip);background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);font-family:var(--label);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:top .2s var(--ease-snap);}
.skip:focus{top:12px;}

/* ============ TYPE HELPERS ============ */
.wrap{max-width:var(--max);margin:0 auto;width:100%;}
.label{font-family:var(--label);font-size:var(--t-label);font-weight:600;letter-spacing:var(--trk-caps);text-transform:uppercase;color:var(--crimson);display:inline-flex;align-items:center;gap:.8rem;}
/* the leading gold hairline before kickers read as a stray dash, so it is gone */
.label::before{display:none;}
.label{gap:0;}
.mono-num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* small layout utilities (replace scattered inline spacing hacks) */
.row-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem;}

/* prose link: underline draws L to R, exits R */
.ulink{position:relative;color:var(--crimson);font-weight:700;display:inline;padding-bottom:2px;}
.ulink::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease-snap);}
@media(pointer:fine){.ulink:hover::after{transform:scaleX(1);transform-origin:left;}.ulink:hover .arr{transform:translateX(4px);}}
.ulink .arr{display:inline-block;margin-left:.45rem;transition:transform var(--t-mid) var(--ease-snap);}
.sec-dark .ulink,.sec-crimson .ulink{color:var(--gold-soft);}

/* ============ BUTTONS ============ */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--label);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper-2);background:var(--grad-crimson);padding:1.05rem 1.85rem;border-radius:var(--r-sm);
  transition:transform var(--t-mid) var(--ease-snap),box-shadow var(--t-slow) var(--ease-snap);}
.btn .arr{transition:transform var(--t-mid) var(--ease-snap);}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;background:var(--grad-blood);transition:opacity var(--t-slow) var(--ease-snap);}
@media(pointer:fine){
  .btn:hover::after{opacity:1;}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--glow-crimson);}
  .btn:hover .arr{transform:translateX(4px);}
}
.btn:active{transform:translateY(0);}
.quiet{font-family:var(--label);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;gap:.5rem;align-items:center;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--t-slow) var(--ease-snap),color var(--t-mid);}
.quiet .arr{transition:transform var(--t-mid) var(--ease-snap);}
@media(pointer:fine){.quiet:hover{color:var(--ink);border-color:var(--gold);}.quiet:hover .arr{transform:translateX(4px);}}
.sec-dark .quiet,.on-dark .quiet{color:var(--on-dark-soft);}
.sec-dark .quiet:hover,.on-dark .quiet:hover{color:var(--paper);border-color:var(--gold-soft);}

/* ============ NAV (persistent, never auto-hides) ============ */
/* frost lives on ::before so backdrop-filter never becomes the fixed drawer's containing block */
/* the scrolled bar is navy glass on every page (D1/D2: one navy ground, never a light
   grey-white bar floating over a mostly-navy site), so its text switches to light too,
   the same way whether the page's own hero was dark or light before you scrolled it away */
/* at the very top the nav is fully clear (no veil, no blur); frost + opacity arrive only on scroll (.is-scrolled) */
/* the Instagram handle: a handle is lowercase, so no caps and no wide tracking */
/* nav sitting over a dark hero: light text until it scrolls onto the ivory bar */
/* crimson on navy is 2.0:1, so the tagline takes the same tan the footer uses (8.6:1) */

/* ============ SECTION FIELDS ============ */
section{position:relative;isolation:isolate;}
.sec-inner{position:relative;z-index:var(--z-raise);max-width:var(--max);margin:0 auto;padding:var(--space) var(--gutter);}
.sec-paper{background:#F4F7FB;color:var(--ink);}
.sec-paper-2{background:#EEF1F6;color:var(--ink);}
.sec-dark{background:var(--navy-ground);color:var(--paper);}
.sec-crimson{background:linear-gradient(135deg,#C42A37 0%,#9C1B27 100%);box-shadow:none;color:var(--paper-2);}
/* grain over every field */
.sec-paper.grain::before,.sec-paper-2.grain::before{opacity:.04;mix-blend-mode:multiply;}
/* REQUIREMENTS step 1's check: does the sitewide grain greige the navy out?
   Soft-light at .05 over a saturated navy lifts its shadows a touch and reads
   as a faint grey veil once you know to look; navy grounds take a lighter
   pass so the colour reads deep and clean, per Dev's own D3/D2 complaint. */
.sec-dark.grain::before,.on-dark.grain::before{opacity:.03;}
.on-dark,.sec-dark{color:var(--paper);}


/* ECG hairline divider (brand seam) */

/* ============ REVEAL SYSTEM (js-gated, additive; no-JS shows all) ============ */
.js .reveal-sec [data-rise]{opacity:0;transform:translateY(26px);transition:opacity var(--t-reveal) var(--ease-soft),transform var(--t-reveal) var(--ease-snap),outline-color .22s ease,outline-width .22s ease,border-color .25s ease;}
.js .reveal-sec.is-in [data-rise]{opacity:1;transform:none;}
.js .reveal-sec.is-in [data-rise="1"]{transition-delay:.05s;}
.js .reveal-sec.is-in [data-rise="2"]{transition-delay:.14s;}
.js .reveal-sec.is-in [data-rise="3"]{transition-delay:.23s;}
.js .reveal-sec.is-in [data-rise="4"]{transition-delay:.32s;}
/* masked line-rise for split headlines */
/* the mask-reveal clips each line; the padding gives descenders (g, p, y, j)
   room so no character bottom is cut off, and the negative margin keeps the
   line spacing tight. */
.rl-clip{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em;}
.rl-clip > span{display:block;transform:translateY(115%);transition:transform var(--t-lux) var(--ease-snap);}
.js .reveal-sec.is-in .rl-clip > span,.js .hero.is-in .rl-clip > span{transform:translateY(0);}

/* ============ FOLIO (bare numeral; the old full-width hairline under it read
   as clutter and is gone sitewide) ============ */

/* headings */
.h-2{font-family:var(--display);font-weight:800;font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--trk-h2);}
.h-2 em {font-style:normal;font-weight:800;color:var(--crimson);}
/* the ONE gradient-clipped display word per section */
.grad-word{font-style:normal;font-weight:800;background:linear-gradient(118deg,var(--crimson-bright),var(--crimson) 58%,var(--crimson-deep));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgb(var(--crimson-rgb) / .16));}
.sec-dark .grad-word{filter:drop-shadow(0 2px 14px rgb(var(--crimson-bright-rgb) / .28));}


/* ============ MISSION ============ */

/* ============ INTERIOR PAGE HERO ============ */
.phero{--hero-h:min(100svh,820px);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:var(--hero-h);padding-top:96px;}
.phero .sec-inner{width:100%;padding-block:clamp(1.4rem,3vw,2.6rem);}
.phero__bg{position:absolute;inset:0;z-index:0;}
.phero__bg img{width:100%;height:100%;object-fit:cover;}


.phero--paper{background:radial-gradient(80% 70% at 22% 6%,var(--paper-2),transparent 60%),linear-gradient(160deg,var(--paper),var(--paper-3) 80%,var(--paper-shade));color:var(--ink);align-items:center;}
.phero--paper .phero__bg img{filter:saturate(.85) contrast(1);opacity:.5;object-position:right center;}
.phero--paper .phero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 6%,rgb(var(--paper-rgb) / .55) 58%,transparent);}
/* gold hero frame retired at art-director request: cleaner full-bleed edge */
.phero .sec-inner{position:relative;z-index:2;}
.phero__title{font-family:var(--display);font-weight:800;font-size:var(--t-h1);line-height:1.0;letter-spacing:var(--trk-display);max-width:20ch;margin-bottom:1.4rem;}
.phero__title em{font-style:normal;font-weight:800;color:var(--crimson);}
.phero__deck{font-size:var(--t-lede);line-height:1.5;max-width:46ch;color:var(--ink-soft);}

/* ============ PAGE HELPERS (interior sections) ============ */
.lead-stmt{font-family:var(--display);font-weight:800;font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--trk-h2);max-width:18ch;}
.lead-stmt em{font-style:normal;font-weight:800;color:var(--crimson);}
.prose{font-size:var(--t-lede);line-height:1.6;color:var(--ink-soft);max-width:60ch;}
.prose + .prose{margin-top:1.2rem;}
.prose b{color:var(--ink);font-weight:700;}
.sec-dark .prose,.sec-dark .prose b{color:var(--on-dark-soft);}
.sec-dark .prose b{color:var(--paper);}
/* numbered pathway list (numbers-as-prose, escapes card-grid energy) */
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:baseline;width:100%;text-align:left;padding:1.15rem 0;}
/* about | leadership: focal "standard" medallion + elevated interactive role index */
/* framed section figure */
/* consulting header: heading left, program-blueprint plate right */
/* The blueprint carries LABELS, so it has to be read, not cropped. The frame now
   matches the file's own 3:2 ratio and the image is contained, so the whole plate
   (and every label on it) is visible with no letterbox. Replaces the old 4:3 box
   plus translate(-24%,3%) scale(1.32) zoom, which cut the text off. */
/* The plate hugged the right because the SOURCE FILE was not centred. An ink
   density profile put the drawing at x 473..1533, y 123..1019 of 1536x1024, so
   473px of dead paper sat on the left and 123px on top while the art bled off
   the right and bottom edges. No CSS crop can fix both axes without also
   cutting the labels, so the ASSET was re-cropped to the drawing itself:
   program-blueprint-plate-v2.webp, 1136x1024 (ratio 1.109). The original file is
   untouched and still on disk. The frame now matches the plate exactly, so
   nothing is cropped and nothing is letterboxed. */
/* ============ FOOTER ============ */
/* the radiating red that pulses out of the wordmark on every beat */
/* lub-dub: two quick thumps, then the wordmark rests until the next beat */
/* ============ FOOTER SOCIAL: app-icon tiles (rounded squares) ============ */
/* ============ IMAGE FRAMES (clipped, inner scale on hover, duotone) ============ */
/* full-section background image + veil */
/* mirrored variant: image subject anchors LEFT, copy sits fully RIGHT */

/* drawn section marks (mission pin, media signal, seal) */

/* ============ THE RECORD (animated credential bento) ============ */
.rb-stat{font-family:var(--label);font-weight:800;font-size:clamp(3.2rem,5.6vw,5.1rem);line-height:.84;letter-spacing:-.028em;color:var(--crimson-deep);}
.rb-stat sup{font-size:.34em;vertical-align:super;color:var(--crimson);}
/* feature card: the ONE standing-glow, dark */

/* six cards, three calm rows: feature 2x2 + taught 2x1 / pubs + cc / network 2 + societies 2 */
/* animated SVGs */
/* feature ECG: centered in the card, a live monitor sweep that loops. A faint
   baseline always reads; a bright pulse travels the trace like an ECG machine. */
@keyframes ecgSweep{from{stroke-dashoffset:900;}to{stroke-dashoffset:0;}}
/* the heart beats a few times on arrival, then comes to rest (never endless) */
@keyframes beat{0%,100%{transform:scale(1);}8%{transform:scale(1.16);}16%{transform:scale(1);}24%{transform:scale(1.1);}32%{transform:scale(1);}}
@keyframes barGrow{to{height:var(--h,70%);}}
@keyframes dotIn{to{opacity:1;}}
/* Cleveland card: an actual heart that beats continuously */
/* OPTN and UNOS: a donor heart allocated out to the regions (hub and spokes) */
@keyframes nodePop{0%{opacity:0;transform:scale(0);}70%{opacity:1;transform:scale(1.3);}100%{opacity:1;transform:scale(1);}}
/* every proof card is a door: the whole card links to its record, an arrow
   slides in on hover/focus (always faintly present on touch) */
/* hover re-performs the shield checks (fine pointers only) */
@keyframes checkDraw{from{stroke-dashoffset:14;}to{stroke-dashoffset:0;}}
/* ============ THE WORK (tab index -> detail) ============ */
/* crimson on navy is 141 degrees of hue apart; the transit between them IS
   the gold/blue corner fringe. One surface, one hue. */
@keyframes ghostSwap{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
@keyframes panelIn{0%{opacity:0;transform:translateX(14px);}100%{opacity:1;transform:none;}}
/* bespoke papercut illustration per domain panel (replaces the old line glyphs) */
/* care panel bespoke marks (IL-5..IL-10): draw on panel activate, one rotor loop */

/* ============ STORY (dark, transformation) ============ */
.story{overflow:hidden;}
.story .sec-inner{z-index:2;}
/* live monitor sweep: a bright pulse travels the whole trace, on a loop,
   so the line reads as an ECG machine, not a one-time draw */
@keyframes ecgScan{from{stroke-dashoffset:1938;}to{stroke-dashoffset:58;}}

/* ============ MEDIA (topic picker + video) ============ */
.media__reach{display:grid;grid-template-columns:auto auto 1fr;gap:1.6rem;align-items:center;padding:1.6rem 0;border-block:1px solid var(--hair);margin-bottom:clamp(2rem,4vw,3rem);}
/* index education: heart video as full-section background, all text overlaid */
/* about mission: papercut map as full-bleed section background, copy in the empty left */
/* full-bleed papercut hero: image background (subject right), copy in the empty left */
.phero--herobg{background:var(--paper);color:var(--ink);align-items:center;min-height:var(--hero-h);}
.phero--herobg .phero__bg{position:absolute;inset:0;z-index:0;}
.phero--herobg .phero__bg img{width:100%;height:100%;object-fit:cover;object-position:right top;opacity:1;filter:none;}
.phero--herobg::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 20%,rgb(var(--paper-rgb) / .82) 42%,rgb(var(--paper-rgb) / .24) 64%,transparent 82%);}
.phero--herobg .sec-inner{position:relative;z-index:2;}
.phero--herobg .phero__copy{max-width:46%;}
@media(max-width:860px){
  .phero--herobg{align-items:flex-end;}
  .phero--herobg .phero__bg img{object-position:70% 6%;}
  .phero--herobg::after{background:linear-gradient(0deg,var(--paper) 32%,rgb(var(--paper-rgb) / .82) 62%,rgb(var(--paper-rgb) / .3));}
  .phero--herobg .phero__copy{max-width:none;}
}
/* learn hero: doctor sits at ~75% of the composition; keep his face in frame at every width */
/* wide screens: copy in image-backed sections hugs the true viewport edge, never drifting toward the middle */
@media(min-width:1500px){
  .phero--herobg .sec-inner {max-width:none;}
  .phero--herobg .phero__copy{max-width:620px;}
  }

/* in-page education/social section: papercut phone mockup as full-bleed background, copy in the empty left */
/* about path: one papercut journey strip + four chapter columns beneath it */
/* about roles: two image bands with copy in the empty side. The artwork is
   fit-to-height (contain), never cropped; the letterbox color matches each
   plate's own paper so the seam disappears under the ivory scrim. */
/* mirrored band: image subject sits LEFT, copy moves to the empty RIGHT */
/* two-column editorial index (speaking talks / consulting / learn lessons):
   numbered rows, notes readable without hovering, tap-to-expand under 900px */
/* learn: one arc, three stops on a single drawn ECG line (no card row) */
/* hover a stage: its stretch of the arc turns crimson, its node glows, the column lifts */
/* newsletter: fanned stack of issue cards in the hero */
/* ============ SPEAKING / CONSULTING ============ */
/* index band: quiet torn-paper heart as the section field, columns over the calm left */
/* aligned columns (no offset), asymmetric weight, a hairline between them */
/* animated header marks: a soundwave for the stage, a connect graph for the table */
@keyframes swPulse{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}
/* ============ RESEARCH ============ */
.research__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.research__big{font-family:var(--label);font-weight:600;font-size:var(--t-numeral);line-height:.86;letter-spacing:-.03em;color:var(--crimson-deep);}
.research__big sup{font-size:.3em;vertical-align:super;color:var(--crimson);}
.research__label{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2.6vw,2.2rem);line-height:1.08;letter-spacing:-.01em;margin:.6rem 0 1.2rem;max-width:18ch;}
.research__body{color:var(--ink-soft);line-height:1.7;margin-bottom:1.4rem;max-width:42ch;}
/* citation curve as a designed area chart: faint grid, gradient fill, gold
   milestone dots, a live end-point ring, qualitative axis words (no fabricated years) */
/* ============ NEWSLETTER (crimson band) ============ */
/* ============ CONTACT ============ */
.contact__act{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
/* touch and narrow viewports: lane notes are visible by default (no hover to reveal them) */
/* ============ FLIP BAND (light->dark punctuation on interior pages) ============ */
.flipband{position:relative;background:var(--navy-ground);color:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;isolation:isolate;}

/* ============ MARQUEE (affiliations, one only) ============ */
@keyframes marq{to{transform:translateX(-50%);}}

/* ============ CONTENT ILLUSTRATIONS (stroke-first, draw on reveal) ============ */
/* one shared engine: .dr draws (stroke-dashoffset), .pop scales in, .fade fades.
   per-element vars: --len (path length), --dd (draw delay), --pd (pop delay),
   --fd (fade delay). crimson/gold accents via .dr-c/.dr-g. */
/* two-column close: statement/CTAs left, illustration right */
.close-split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;}
@media(max-width:820px){.close-split{grid-template-columns:1fr;}}
/* research close: magnifying glass gently scans the document (peer review) */
@keyframes lensScan{0%,100%{transform:translate(70px,50px);}50%{transform:translate(100px,94px);}}
/* IL-13 dispatch envelope: paper slides in, flap folds shut, wax seal stamps. Replays on form focus. */
/* slow continuous rotor: the one allowed loop (IL-7 pump) */
@keyframes illSpin{to{transform:rotate(360deg);}}
/* a small illustration sits in a section as its single visual anchor */

/* ============ ZIP REACH MAP (index mission: real US map + reach points) ============ */
@keyframes zpulse{0%{transform:scale(1);opacity:.5;}70%{opacity:0;}100%{transform:scale(6);opacity:0;}}
/* ============ PLIST ROWS AS BUTTONS (touch/keyboard reachable, 2B) ============ */
button.prow{cursor:pointer;}

/* ============ SPEAKING SCANNABILITY (7.4): notes shown at >=900px ============ */
/* ============ CARE Q&A ACCORDION (7.3) ============ */

/* ============ GOLD ECG HAIRLINE DIVIDER (care close visual) ============ */


/* ============ RESPONSIVE (components) ============ */
@media(max-width:1000px){
        .research__grid {grid-template-columns:1fr;}
    .media__reach{grid-template-columns:1fr;gap:1rem;}
}

/* ============ RESPONSIVE (core) ============ */
/* ============ REDUCED MOTION (resolve everything drawn) ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .js .reveal-sec [data-rise],.js .hero.is-in .rl-clip>span,.rl-clip>span{opacity:1 !important;transform:none !important;}
  .label::before{transform:scaleX(1) !important;}
  }

/* ============ CRIMSON GRADIENT TYPE: light red falling to deep maroon ============ */
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .h-2 em,.phero__title em,.lead-stmt em,.research__big,.rb-stat,.label,.ulink,.research__label em {
    background-image:var(--grad-crimson);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
  /* ===== 2026-09-30 navy pass: VIVID CRIMSON ON NAVY (REQUIREMENTS D3) =====
     The base rule above's --grad-crimson tail runs to #6B0F14, near-black
     maroon; against navy that tail is what read as "murky" (this codebase's
     own comment above literally named it "falling to deep maroon"). The old
     "on dark surfaces" list only caught three of the twenty selectors above,
     so on every OTHER one (research__big, imgband__k, numline b, the label
     kicker, work__title em...) that muddy tail is what actually painted on
     every navy ground on the site. Every dark ground this file defines now
     gets the shared vivid contract instead: large display type clips
     --grad-shine-dark (crimson into coral into crimson, never muddy and,
     per the J2 fix above, never pale pink or white either), small
     kicker/label/link type is flat --crimson-glow. */
  :is(.sec-dark,.on-dark,.phero--dark,.phero--cutout,.phero--split,.edubg--photo,.media--bg,.flipband,.footer,.work__detail,.rb-card--feature,.xi__panel)
  :is(.h-2,.h-display,.mission__lead) em,.phero--photo .phero__title em,.sec-dark.phero--paper .phero__title em,.on-dark.phero--paper .phero__title em,.sec-dark.phero--herobg .phero__title em,.on-dark.phero--herobg .phero__title em,.sec-dark .lead-stmt em,.on-dark .lead-stmt em,:is(.sec-dark,.on-dark,.phero--dark,.phero--cutout,.phero--split,.edubg--photo,.media--bg,.flipband,.footer,.work__detail,.rb-card--feature)
  :is(.mission__resolve,.research__big,.media__big,.story__mark) {
    background-image:var(--grad-shine-dark);
    -webkit-background-clip:text;background-clip:text;
    color:var(--crimson-vivid);-webkit-text-fill-color:transparent;
  }
  /* small kicker/label type on navy: flat vivid, no clip (tracked-caps type
     this thin reads noisy with a gradient sweeping across it). */
  :is(.sec-dark,.on-dark,.phero--dark,.phero--cutout,.phero--split,.edubg--photo,.media--bg,.flipband,.footer,.work__detail,.rb-card--feature,.xi__panel)
  :is(.mission__zip,.numline,.work__title,.research__label) :is(b,em),
  :is(.sec-dark,.on-dark,.phero--dark,.phero--cutout,.phero--split,.edubg--photo,.media--bg,.flipband,.footer,.work__detail,.rb-card--feature,.xi__panel)
  :is(.imgband__k,.zig__n,.nlfan__k,.plist--lead .prow__n){
    background-image:none;color:var(--crimson-glow);-webkit-text-fill-color:var(--crimson-glow);
  }
  /* exceptions: gold-ice, paper and gradient text keep their own colour */
  .sec-crimson .ulink{background-image:none;color:var(--gold-soft);-webkit-text-fill-color:var(--gold-soft);}
      /* links on navy (REQUIREMENTS D3 names "links" explicitly): this used to
     go ice-white (gold-soft) on .sec-dark same as on a solid crimson band,
     where ice-white is the only readable choice; on navy, vivid crimson
     both reads fine and is the colour Dev actually asked for. */
  .sec-dark .ulink,.on-dark .ulink{background-image:none;color:var(--crimson-glow);-webkit-text-fill-color:var(--crimson-glow);}
  .sec-dark .label:not(.label--plain),.on-dark .label:not(.label--plain) {background-image:none;color:var(--crimson-glow);-webkit-text-fill-color:var(--crimson-glow);}
  /* links darken to blood crimson on hover; on navy they brighten instead, the
     same direction every other hover state on navy moves (toward the light) */
  @media(pointer:fine){
    .ulink:hover{background-image:var(--grad-blood);}
    .sec-crimson .ulink:hover{background-image:none;color:var(--gold);-webkit-text-fill-color:var(--gold);}
    .sec-dark .ulink:hover,.on-dark .ulink:hover{background-image:none;color:var(--crimson-vivid);-webkit-text-fill-color:var(--crimson-vivid);}
  }
}

/* ==================== MISSION PAGE (V2) ==================== */
.areas{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,3.4vw,2.5rem);line-height:1.4;color:var(--ink);margin:1.5rem 0 0;max-width:26ch}
.areas i{font-style:normal;color:var(--gold);padding:0 .18em}
/* ================= MISSION PAGE 100x ELEVATION (V2, scoped) ================= */
/* Hero: fill the dead kicker with a gold-hairline tracked-caps mission locus */
/* Dark sections read FLAT: kill the crimson glow blob (color as punctuation) */
/* Crimson closing: ivory ghost folio numeral instead of muddy crimson-on-crimson */
/* Real photo: subtle cohesion wash + gold hairline frame so it belongs to the palette */
/* 01 closing line becomes an editorial italic pull-statement with a crimson micro-tick */
/* 02 Regional access: hospital cells ink in sequentially, gold hairline hover */
/* 07 What I believe: line-by-line manifesto cascade + quiet crimson hover */
/* 08 Beyond the hospital: each domain gets a hover-drawn gold underline */
/* reduced motion: resolve every stagger to its final state */
/* 03 Programs: rest the nine lane arrows ink-faint (match the idx numerals) so crimson stays punctuation, never a nine-mark flood; light crimson only when the user engages, on hover or keyboard focus. No motion added: color snaps like the .t title, the existing translateX slide is untouched. */
/* ===== ROUND 2: 02 REGIONAL ACCESS, BALANCED DIRECTORY GRID ===== */
/* Six hospitals should read as an intentional block. The base .progs auto-fit fits five 230px tracks at the ~1256px desktop content width, so the sixth cell orphans onto a full-width row (a 5 plus 1 last row that leaves dead paper-shade cells). Pin an explicit 3x2 grid so the six map cleanly; every other .progs rule (1px gaps, border, radius, the pass-1 sequential ink-in and gold-hairline hover) is inherited untouched. No motion, no color, no content change. */
/* ===== ROUND 3: 03 PROGRAMS, KEYBOARD PARITY FOR THE LANE DISCLOSURE ===== */
/* On mouse hover each care-program lane discloses its one-line note, inks the title crimson, and slides the arrow (base .contact__lane rules, lines 1073 to 1078). A keyboard user tabbing the same anchor lanes got ONLY the crimson arrow (pass 1, line 1417): the informative note stayed clipped and the title stayed ink, so focus read as a half-applied hover. Extend the SAME disclosure to :focus-visible so focus equals hover, full parity. Values mirror the base hover rule exactly; no new transition is declared (every property already transitions in the base rules and already fires on hover), so this adds zero new motion. Guarded above 900px so the mobile always-open note (line 1080) is never clipped; below 901px notes are already fully shown and the pass-1 focus arrow already fires. Not gated behind pointer:fine because keyboard focus must work regardless of pointer. */
/* ===== ROUND 4: 05 ADVANCING SCIENCE, MONUMENT NUMERAL SUPERSCRIPT ===== */
/* The 60+ stat is section 05's focal numeral (var(--t-numeral), up to 8.6rem). Its plus is a raw <sup> with no rule, so it inherits the UA default (font-size:smaller ~.83em, vertical-align:super): an oversized plus that floats high and dwarfs the crafted plus used on every other big numeral sitewide (.rb-stat, .media__big, .research__big set sup to .34em/.3em with vertical-align:super). Bring the mission stat into that same superscript system so the 60 and the plus read as one lockup. Numeral is already crimson so no color set; no motion, no content change; nothing starts hidden so no reveal or reduced-motion rule is needed. */
/* ===== ROUND 5: 07 WHAT I BELIEVE, REST THE SEVEN CREED COUNTERS SO CRIMSON STAYS PUNCTUATION ===== */
/* The base .creed--numbered li::before (line 1363) paints all seven leading-zero counters crimson: a seven-mark crimson column down the manifesto margin. Pass 3 already removed the same repeated-crimson pattern from the adjacent section 03 (line 1415) by resting its numerals at ink-faint and keeping crimson for engagement only; section 03's idx sit ink-faint at rest by design (line 1074). Bring section 07 into the same discipline so the 60+ stat stays the page's one key crimson numeral. Rest the counters at ink-faint; the pass-1 hover (line 1407) still inks the line crimson and the counter gold-deep on engagement, both untouched. Color only, no motion, nothing starts hidden, scoped to #believe so no other page's numbered creed is affected. */
/* ===== ROUND 7: 01 BUILDING SYSTEMS, GIVE THE OR FIGURE ITS OWN CONTAINING BLOCK SO THE GOLD HAIRLINE FRAMES THE PHOTO ===== */
/* The pass-1 photo frame is drawn by body.pg-mission .mssn-fig::after (line 1381: position:absolute;inset:0;border:1px solid var(--gold-hair);border-radius:14px). Its base .mssn-fig (line 1344) sets overflow:hidden but NO position, and at rest [data-rise] resolves to transform:none (line 229; also forced none under reduced motion line 1307, and the no-js path carries no transform), so the figure establishes no containing block. The abspos ::after therefore resolves against the nearest positioned ancestor .sec-inner (line 205), drawing a stray faint 1px gold rectangle around the ENTIRE section 01 content column: exactly the folio/chapter hairline shape removed sitewide (a hard veto). Give the figure its own containing block so the frame snaps back onto the photo at its 14px radius, matching the site framing pattern used by .figc, .imgframe and .work__fig whose framed figures are all positioned. Positioning only: no motion, no color, no new token; nothing starts hidden, so no reveal or reduced-motion rule is needed. Scoped to the mission figure; adds a new rule and modifies nothing existing. */
/* ===== ROUND 8: 08 BEYOND THE HOSPITAL, REST THE SIX MIDDOT SEPARATORS AT INK-FAINT SO GOLD STAYS HAIRLINES AND FOLIOS ONLY ===== */
/* The base .areas i (line 1365) paints the six domain middot separators var(--gold): the page's only at-rest gold that is neither a hairline nor a folio. Section 08 already draws a hover gold hairline underline on each domain word (line 1410), so it carries standing gold AND engagement gold. Rest the separators at the page's established quiet-separator tone var(--ink-faint), the same rest tone applied to the section 03 arrows (line 1415) and the section 07 counters (line 1436), so the hover hairline underline becomes the section's single, engagement-only gold event. Color only: no motion, nothing starts hidden, so no reveal or reduced-motion rule is needed; scoped to the mission page so no other .areas is touched; higher specificity wins without modifying the base rule; no content, fact, or href change. */
body.pg-mission .areas i{color:var(--ink-faint)}
/* ===== ROUND 10: 02 REGIONAL ACCESS, RAISE THE HOSPITAL LOCATION CAPTIONS TO WCAG AA CONTRAST ===== */
/* The base .progs__n (line 1352) paints the city and state captions var(--ink-faint) var(--ink-faint) at .82rem normal weight on the var(--paper-2) var(--paper-2) cell (~3.07:1) and the var(--paper) var(--paper) hover cell (~3.1:1): both below the WCAG AA 4.5:1 minimum for normal text. Unlike the decorative index glyphs and separators rested at ink-faint in prior passes (03 arrows line 1415, 07 counters line 1436, 08 middots line 1442), these are genuine informational content: the geographic reach of the six hospitals across three states is section 02's whole point. No prior pass touched .progs__n, so this is net new. Lift to the site's standard secondary tone var(--ink-soft) var(--ink-soft) (~7.6:1 on paper-2), which meets AA while keeping the caption clearly subordinate to the bold ink hospital name. Color only: existing token, no motion, no hue, no content, fact, or href change; nothing starts hidden so no reveal or reduced-motion rule is needed. Specificity (id plus two classes plus element) beats the base one-class rule without modifying it; scoped to the mission page. */
/* ===== ROUND 11: 05 ADVANCING SCIENCE, RAISE THE 60+ STAT UNIT LABEL TO WCAG AA CONTRAST ===== */
/* The base .mssn-stat__k (line 1355) paints the "peer-reviewed publications" unit label var(--ink-faint) var(--ink-faint) at .88rem normal weight on section 05's sec-paper-2 gradient (var(--paper-2) var(--paper-2) to var(--paper) var(--paper)): about 2.9 to 3.07:1, below the WCAG AA 4.5:1 minimum for normal text. This is the exact sibling of the Round 10 fix (line 1445), which lifted the always-visible hospital location captions from the identical failing ink-faint to ink-soft because they are genuine informational content, not the decorative index glyphs, arrows, counters, and middots rested at ink-faint in rounds 3, 5, and 8. This label is the one remaining instance of that same defect: it is always visible and it carries the "peer-reviewed" qualifier that gives the focal crimson 60+ numeral its meaning. Lift to the site's standard secondary tone var(--ink-soft) var(--ink-soft) (about 7.2 to 7.6:1), which meets AA while keeping the label clearly subordinate to the 8.6rem crimson numeral. Color only: existing token, no motion, no hue, no content, fact, or href change; nothing starts hidden so no reveal or reduced-motion rule is needed. Specificity (id plus class) beats the base one-class rule without modifying it; scoped to the mission page. */
/* ===== ROUND 12: 03 PROGRAMS, RAISE THE NINE ALWAYS-VISIBLE LANE NOTES TO WCAG AA CONTRAST ===== */
/* The base .contact__lane .note (line 1077) paints each program's one-line description var(--ink-faint) var(--ink-faint) at .86rem. On desktop the note is a hover disclosure, but line 1080 (max-width:900px or pointer:coarse) pins every note permanently open, so on every phone and touch device all nine descriptions are always-visible body text at ink-faint on section 03's sec-paper var(--paper), about 2.9:1, below the WCAG AA 4.5:1 minimum for normal text. This is the third and last instance of the exact defect fixed in Round 10 (hospital captions, line 1445) and Round 11 (stat unit label, line 1448): genuine always-visible informational content stranded at ink-faint, not the decorative index glyphs, arrows, counters, and middots rested at ink-faint in rounds 3, 5, and 8. The notes carry the meaning of each of the nine programs. Lift to the site's standard secondary tone var(--ink-soft) var(--ink-soft) (about 7.2:1 on paper), which meets AA while staying subordinate to the bold ink lane title and its crimson-on-engagement hover. Color only: existing token, no motion, no hue, no new token, no content, fact, or href change; the max-height and opacity disclosure and its reduced-motion rule (line 1430) are untouched; nothing new starts hidden. Specificity (id plus three classes plus element) beats the base two-class rule without modifying it; scoped to the mission page so the shared contact-page lanes are unaffected. */
/* ===== ROUND 14: 01 + 05 SECTION EYEBROWS, REST THE TWO CRIMSON LABEL EYEBROWS SO CRIMSON STAYS PUNCTUATION ===== */
/* The two subordinate section eyebrows, section 01 "Building systems, not just programs" and section 05 "Advancing science", both carry class label--plain and inherit the base .label paint. On paper that paint is not flat color:var(--crimson) (line 116): the /* ===== HOMEPAGE (pg-home) ===== */
.pg-home .phero__roles{display:inline-block;font-family:var(--label);font-size:var(--t-label);font-weight:600;letter-spacing:var(--trk-caps);text-transform:uppercase;color:var(--on-dark-soft)}
.pg-home .phero__roles i{font-style:normal;color:var(--gold);padding:0 .35em}

/* ===== NAV DROPDOWN (For Patients) ===== */
/* ===== HOMEPAGE: Background & Collaborations ===== */
/* Background & collaborations as three infinite right-to-left marquee rows (one per category), edge-faded, pause on hover, static under reduced motion */
.pg-home .bgrow{border-top:1px solid var(--hair);padding:1.45rem 0;}
.pg-home .bgrow__k{display:block;font-family:var(--label);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem;}
@keyframes bgMarq{to{transform:translateX(-100%);}}
/* ===== HOMEPAGE: Explore nav cards ===== */
/* ===== MEDIA PAGE (pg-media) ===== */
/* ===== RESEARCH PAGE (pg-research) ===== */
.pg-research .flip__body{color:rgb(var(--paper-rgb) / .82);font-family:var(--body);font-size:var(--t-body);line-height:1.55;max-width:48ch;margin:1.2rem 0 1.6rem;}

/* ===== STORIES PAGE: video library (pg-stories) ===== */
/* base is 16/9 like every other still; the LAYOUT v2 blocks lower down set the
   same value per breakpoint, so this stays correct even if one is ever removed */
/* ===== HOMEPAGE: Stay-Connected social row (on crimson newsletter) ===== */
/* ===== RESEARCH: clinical trials + selected publications ===== */
.pg-research .trials{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.2rem;}
.pg-research .trials ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.pg-research .trials li{display:flex;flex-direction:column;gap:.25rem;}
.pg-research .trial-hd{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;}
.pg-research .trial-hd b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--ink);}
.pg-research .trial-role{font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);}
.pg-research .trial-d{font-family:var(--body);font-size:.92rem;color:var(--ink-soft);line-height:1.4;}
@media(max-width:820px){.pg-research .trials{grid-template-columns:1fr;gap:1.8rem;}}
.pg-research .pubs{list-style:none;margin:2.2rem 0 1.6rem;padding:0;}
.pg-research .pubs li{padding:1.15rem 0;border-top:1px solid var(--paper-shade);display:flex;flex-direction:column;gap:.3rem;}
.pg-research .pubs li:first-child{border-top:0;padding-top:0;}
.pg-research .pub-t{font-family:var(--body);font-weight:500;font-size:1.06rem;color:var(--ink);line-height:1.35;max-width:72ch;}
.pg-research .pub-j{font-family:var(--label);font-size:.8rem;letter-spacing:.03em;color:var(--ink-faint);}

/* ===== HOME: 12 LET'S WORK TOGETHER, RAISE THE FIVE ALWAYS-VISIBLE LANE NOTES TO WCAG AA ===== */
/* Base .contact__lane .note (line 1077) paints each note var(--ink-faint) var(--ink-faint). Line 1080 pins every note open on max-width:900px or pointer:coarse, so on every phone and touch device all five lane descriptions are always-visible body text at ink-faint on sec-paper var(--paper), about 2.9:1, below the WCAG AA 4.5:1 minimum for normal text. This is the exact defect the Mission page fixed in its scoped pass (its notes carry the same base rule); the home contact lanes were never covered. Lift to var(--ink-soft) var(--ink-soft), about 7.2:1, which meets AA while staying subordinate to the ink lane title and the crimson-on-engagement hover. Color only, existing token, no motion, no hue, no content, fact, or href change; the max-height and opacity disclosure and its reduced-motion behavior are untouched, so nothing new starts hidden. Specificity (class, id, class, class) beats the base two-class rule without modifying it; scoped to the home contact section. */

/* ===== HOME: 08 RESEARCH, RAISE THE CITATION-CURVE AXIS LABELS TO WCAG AA ===== */
/* The "First papers" and "Today" axis words (.cc-axis-k, line 974) are always-visible informational labels that give the citation curve its start-to-now meaning, painted fill:var(--ink-faint) var(--ink-faint) on the sec-paper-2 field var(--paper-2), about 3:1, below the WCAG AA 4.5:1 minimum for normal text. Unlike the decorative index glyphs and counters rested at ink-faint elsewhere, these carry content. Lift to var(--ink-soft) var(--ink-soft), about 7.4:1, which meets AA while staying quieter than the crimson curve and its gold milestone dots. Color only, existing token, no motion, no hue, no content, fact, or href change; nothing starts hidden. Specificity (class, class) beats the single-class base without modifying it; scoped to the home page so any other page's copy of the curve is unaffected. */

/* ===== HOME: 10 EXPLORE, REST THE REPEATED CRIMSON INDEX COUNTERS AND GO-ARROWS SO CRIMSON STAYS PUNCTUATION ===== */
/* The six explore cards each carry a crimson index counter (.navcard__i, line 1515) and a crimson go-arrow (.navcard__go, line 1518), both always visible on every pointer. Stacked one and two columns on tablet and phone, that is up to twelve crimson marks running down the cards, the repeated-column-of-marks pattern the art direction forbids for the accent. Rest both to var(--ink-faint) at rest, the same discipline the Mission page used for its repeated lane arrows and creed counters, and ink only the arrow crimson on hover or keyboard focus so each card carries a single crimson engagement mark. Color only, existing token; the color snaps with no new transition declared, so zero motion is added and the base translateX hover slide is untouched; no content, fact, or href change; nothing starts hidden. Specificity (id plus classes) beats the base single-class rules without modifying them; scoped to the home explore section, and the hover rule stays inside pointer:fine to mirror the base. */
/* ===== RESEARCH: SELECTED-PUBLICATIONS CITATIONS, RAISE TO WCAG AA ===== */
/* The journal-plus-year citation under each publication title (.pub-j, line 1577) is painted var(--ink-faint) var(--ink-faint) on paper, about 3:1, below the WCAG AA 4.5:1 minimum for this always-visible informational text. This is the Mission page fix for faint caption and label copy. Lift to var(--ink-soft) var(--ink-soft), about 7:1, which meets AA while staying quieter than the ink title. Color only, existing token, no motion, no hue, no content, fact, or href change; nothing starts hidden. Specificity (class, class) beats the base without modifying it. */
.pg-research .pub-j{color:var(--ink-soft);}

/* ===== RESEARCH: CITATION-CURVE AXIS LABELS, RAISE TO WCAG AA ===== */
/* The "First papers" and "Today" axis words (.cc-axis-k, line 974) are always-visible informational labels at only 8.5px, painted fill:var(--ink-faint) var(--ink-faint) on paper, well below AA. Lift to var(--ink-soft) var(--ink-soft), about 7:1, matching the same fix shipped for the home page copy of this curve. Fill only, existing token, no motion, no hue, no content, fact, or href change; nothing starts hidden. Specificity (class, class) beats the single-class base without modifying it; scoped to this page. */

/* ===== RESEARCH: QUESTIONS LIST GO-ARROWS, REST SO CRIMSON STAYS PUNCTUATION ===== */
/* All four question rows carry a crimson go-arrow (.prow__go, line 367) at rest, stacking into a column of four crimson marks so crimson stops reading as punctuation, the repeated-column pattern the art direction forbids for the accent. Rest them at var(--ink-faint) and ink crimson only on engagement, open row or hover, the Mission-page discipline, so the single crimson em accent word stays the section's one accent. Color only, existing token; the base transition covers transform only, so no motion is added and the base rotate and translateX are untouched; no content, fact, or href change; nothing starts hidden. Specificity beats the base rules without modifying them; the hover rule stays inside pointer:fine to mirror the base. */
/* ===== STORIES: OUTLET EYEBROWS, REST SO CRIMSON STAYS PUNCTUATION ===== */
/* The six video-library cards each carry an outlet eyebrow (.vidcard__outlet, line 1550) painted var(--crimson), stacking YouTube and News labels into a repeated column of crimson marks across the 3-column grid, the pattern the art direction forbids for the accent. These are always-visible informational labels, so this is a de-flood not a contrast fix: rest them at var(--ink-soft) and return crimson only on hover so the accent marks engagement instead of flooding the grid, the same Mission-page discipline. Color only, existing token; the appended transition covers color only so no layout motion is added; no content, fact, or href change; nothing starts hidden. Equal specificity (class, class) plus later source order overrides the base without modifying it; the hover rule stays inside pointer:fine to mirror the base. */
/* ===== MEDIA: 02 featured national media, rest the six repeated crimson outlet labels and arrows at ink, crimson only on hover so crimson stays punctuation ===== */
/* ===== MEDIA: hero eyebrow, rest the crimson label--plain to ink-soft so it does not out-shout the hero accent word ===== */

/* ===== STORIES: VIDEO LIGHTBOX (progressive; cards still link out if JS is off) ===== */
.vlb{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgb(var(--navy-rgb) / .86);opacity:0;visibility:hidden;transition:opacity var(--t-mid) var(--ease-soft),visibility var(--t-mid);}
.vlb.is-open{opacity:1;visibility:visible;}
.vlb__stage{position:relative;width:min(100%,1040px);}
.vlb__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(14px) scale(.985);transition:transform var(--t-slow) var(--ease-snap);}
.vlb.is-open .vlb__frame{transform:none;}
.vlb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vlb__close{position:absolute;top:-3.2rem;right:0;width:2.6rem;height:2.6rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgb(var(--paper-rgb) / .28);border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;transition:border-color var(--t-mid),background var(--t-mid),transform var(--t-mid) var(--ease-snap);}
.vlb__close:hover{border-color:var(--paper);background:rgb(var(--paper-rgb) / .08);}
.vlb__close:focus-visible{outline:2px solid var(--crimson-bright);outline-offset:3px;}
.vlb__close svg{width:1.15rem;height:1.15rem;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;}
@media(max-width:560px){.vlb__close{top:-3rem;width:2.3rem;height:2.3rem;}}
body.vlb-lock{overflow:hidden;}
@media(prefers-reduced-motion:reduce){.vlb,.vlb__frame{transition:opacity var(--t-fast) linear,visibility var(--t-fast);}.vlb__frame{transform:none;}.vlb.is-open .vlb__frame{transform:none;}}
/* keep the fixed nav from bleeding over the video modal (fixed-layer paint) */
body.vlb-lock #nav{opacity:0;pointer-events:none;transition:opacity var(--t-fast) linear;}

/* ===== SPEAKING: SELECTED ENGAGEMENTS (real invited talks / grand rounds) ===== */
/* ===== CONTACT: ways list + inquiry form (posts to the CMS submissions inbox) ===== */
.contact__ways{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0;}
.contact__ways li{display:grid;gap:.15rem;padding:.85rem 0;border-top:1px solid var(--hair);}
.contact__ways li:last-child{border-bottom:1px solid var(--hair);}
.contact__ways .t{font-family:var(--label);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.contact__ways .d{font-family:var(--body);font-size:.95rem;line-height:1.4;color:var(--ink-soft);}

#contact .cform{display:grid;gap:1rem;background:var(--paper-2);border:1px solid var(--gold-hair);border-radius:16px;padding:clamp(1.3rem,2.4vw,1.9rem);}
#contact .cform__row{display:grid;gap:.4rem;margin:0;}
#contact .cform__lab{font-family:var(--label);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
#contact .cform__in{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--gold-hair);border-radius:9px;padding:.7rem .85rem;transition:border-color var(--t-mid),box-shadow var(--t-mid);appearance:none;-webkit-appearance:none;}
#contact .cform__in::placeholder{color:var(--ink-faint);}
#contact .cform__in:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 3px rgb(var(--crimson-rgb) / .12);}
#contact .cform__ta{resize:vertical;min-height:96px;line-height:1.5;}
#contact .cform__selwrap{position:relative;display:block;}
#contact .cform__sel{padding-right:2.2rem;cursor:pointer;}
#contact .cform__caret{position:absolute;right:1rem;top:50%;width:.5rem;height:.5rem;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
#contact .cform__submit{justify-self:start;margin-top:.2rem;}
#contact .cform__ok{margin:0;font-size:.92rem;min-height:1.2em;color:var(--ink-soft);}
#contact .cform__ok.is-ok{color:var(--gold-deep);}
#contact .cform__ok.is-err{color:var(--crimson-deep);}
#contact .cform__ok a{color:inherit;text-decoration:underline;}

/* ============ MISSION LAYOUT PASS (sections 3-7) ============ */
/* 03 . Programs: two-column grid so nine lanes fill the width instead of a tall single column with stranded arrows */
/* 04 + 06 . Figures: enlarge the framed photo and give it a dedicated column so it reads as a feature, not a floating stamp */

/* 05 . Advancing science: the 60+ counts AND grows on entry, over a bespoke climbing-bars growth motif (neutral fills, number is the one crimson accent) */
/* faint oversized "60" watermark the counting numeral grows into */
/* 07 . What I believe: two-column manifesto grid so the seven beliefs use the full width */
/* ============ HEART SCHOOL hero: keep the left copy clear of the flashcard/heart illustration ============ */
body.pg-learn .phero--herobg .phero__copy{max-width:47%}
body.pg-learn .phero--herobg .phero__deck{max-width:33ch}
body.pg-learn .phero--herobg::after{background:linear-gradient(90deg,var(--paper) 30%,rgb(var(--paper-rgb) / .9) 48%,rgb(var(--paper-rgb) / .4) 66%,transparent 82%)}
@media(max-width:900px){body.pg-learn .phero--herobg .phero__copy{max-width:620px}body.pg-learn .phero--herobg .phero__deck{max-width:46ch}}

/* ============ PATIENT CARE §3: referral-network illustration (warm on-palette + broadcast pulse) ============ */
@keyframes carePulse{0%{opacity:.55;transform:scale(.5)}70%{opacity:0;transform:scale(1.14)}100%{opacity:0;transform:scale(1.14)}}
/* ============ PATIENT STORIES §2: press items pulled out of the video grid into their own row ============ */
/* ============ RESEARCH §3 (trials) + §5 (questions) layout ============ */
/* §3 trials: ledger structure, ink category headers (no crimson flood), matching Home §3 */
.pg-research .trials{gap:0 clamp(2rem,4vw,4rem);margin-top:2.6rem;}
/* §5 questions: two-column grid so the four rows fill the width and the arrows stop stranding on the far right */
/* ============ CONTACT §02: five-doors-to-one-heart illustration (resolved crimson heart) ============ */

/* MEDIA: push the collaboration CTA to the right edge of its column (desktop 2-col only) */
@media(min-width:1001px){body.pg-media #collab .row-cta{justify-content:flex-end;}}

/* MISSION §04: feature the seated subject (reduce dark dead space, keep the "seat" framing) */

/* MISSION §03: surface each program's one-line description (was hover-only) so the directory reads full, not sparse */

/* MISSION §07: lead belief becomes the full-width focal principle; 2-7 support it in the grid */

/* MISSION §06: center the subject (his face) in the frame */

/* HEART SCHOOL hero: keep the left copy clear of the papercut illustration (cards + heart) */
body.pg-learn .phero--herobg .phero__copy{max-width:40%;}
body.pg-learn .phero--herobg .phero__deck{max-width:32ch;}
@media(max-width:900px){body.pg-learn .phero--herobg .phero__copy{max-width:100%;}body.pg-learn .phero--herobg .phero__deck{max-width:46ch;}}

/* RESEARCH §03: the three trial categories become defined panel cards (was floating columns) */
body.pg-research #trials .trials{gap:1.5rem;}

/* RESEARCH §05: surface each question's research angle (was hover-only) so the section reads full */
body.pg-research #questions .prow{align-items:start;}

/* OPTN/UNOS bento cell: donor-heart-to-regions allocation illustration (fills the wide card's empty right) */
/* HOME §11: decluttered closing CTA (removed the redundant ways-list); one centered focal point */

/* MISSION §04: whole subject fits on the right at a reduced size; everything else is the image's own dark tone (var(--ink-deep)) */
body.pg-mission #leadership{background:var(--ink-deep);}
/* MISSION §09 close: right-align the "Work with Dmitry" CTA on desktop (2-col only) */
@media(min-width:1001px){body.pg-mission #close .row-cta{justify-content:flex-end;}}

/* ===== STORIES video library - 100x pass 1: featured card cinematic overlay ===== */

/* STORIES video library - 100x pass 2: Ken-Burns thumb zoom + play-button ring on hover */
/* STORIES video library - 100x pass 3: grid-card title underline-draw on hover (hover does something) */
/* pass 4: featured title legibility over bright frames + tighter section rhythm */


/* ============================================================================
   BRIEF RECONCILIATION (Production Brief v1) - three gaps closed
   1. HOME hero: the brief's three primary buttons restored (one solid + two ghost)
   2. HOME §02: the four "Impact at a glance" ROLES the bento had no cell for
   3. MISSION §02: the interactive Mid-South map the brief asks for
   4. MISSION §08: the brief's "Beyond the hospital" pursuits (Areas of focus kept)
   ============================================================================ */

/* --- 1. HOME hero: three buttons without three loud buttons --- */
/* All three will not sit on one line inside the hero copy column, and a 2+1
   flex wrap orphans the third. Grid it instead: the one primary action on its
   own row, the two secondary routes paired underneath. */
/* --- 2. HOME §02: the roles strip under the bento (quiet, gold hairline, no new numerals) --- */
/* --- 3. MISSION §02: coupled site picker <-> Mid-South map --- */

/* the legend lives in the map's empty southwest quadrant, so the void is used, not padded */

/* entry choreography (JS only, so a no-JS page shows the finished map) */
@keyframes mspulse{0%{transform:scale(.55);opacity:.5}72%{transform:scale(2.15);opacity:0}100%{transform:scale(2.15);opacity:0}}

/* the coupling itself: a site is lit from either side */

/* --- 4. MISSION §08: the brief's "beyond the hospital" pursuits, above the areas marquee --- */
body.pg-mission #focus .beyond{list-style:none;margin:clamp(2rem,3.4vw,2.8rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.6rem,3vw,3rem);}
body.pg-mission #focus .beyond li{border-top:1px solid var(--hair);padding:1.05rem 0 1.15rem;display:flex;flex-direction:column;gap:.28rem;}
@media(max-width:900px){body.pg-mission #focus .beyond{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){body.pg-mission #focus .beyond{grid-template-columns:1fr;}}


/* ============================================================================
   STORIES §02 VIDEO LIBRARY - second 100x round (passes 6-10)
   Same Crimson Cinema direction, same six real items. Nothing darkened,
   nothing replaced: hierarchy, choreography, a real new capability, an
   editorial press index, and one restrained cursor moment.
   ============================================================================ */

/* --- pass 6 (VISUAL): the four films read as a numbered index, and every
   thumbnail is treated so it belongs to the ivory palette. The Polished Beauty
   frame is a saturated yellow promo card; at rest it now sits back with the
   others and resolves to full colour on hover/focus. --- */
/* a paper veil sits the row back behind the featured film and lifts on hover,
   so the thumbnail wakes up instead of just recolouring */
/* --- pass 7 (DYNAMIC): the row deals itself in behind the featured film
   instead of appearing all at once. Chained to the generic section reveal with
   a no-JS-safe fallback, so a card can never be left invisible. --- */
/* narrow screens: a 2.55:1 banner is only ~145px tall at 390px, so the overlaid
   title lands on top of the play button. Below 720px the featured film drops to
   16/9 and puts its caption under the frame like the rest of the row. */
/* --- pass 9 (VISUAL): the press pair stops being two identical boxes and
   becomes an editorial index: outlet, headline, a mark that travels. --- */
/* --- pass 10 (DYNAMIC + a11y): one cursor moment on the featured film, and
   keyboard parity so focus gets everything hover gets. --- */
/* the individual `translate` property keeps the cursor offset off `transform`,
   so the existing hover scale and the parallax never fight over one value */
/* --- pass 8 (INTERACTIVE): the lightbox is a playlist, so the three chapters
   can be watched back to back. Chrome for the prev/next/counter. --- */
.vlb__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem;}
.vlb__now{font-family:var(--label);font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--paper);opacity:.92;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vlb__count{font-family:var(--label);font-size:.78rem;letter-spacing:.1em;color:rgb(var(--paper-rgb) / .6);flex:0 0 auto;}
.vlb__seek{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;}
/* the close button now lives in the bar, so it drops its absolute corner slot */
.vlb__seek .vlb__close{position:static;top:auto;right:auto;width:2.3rem;height:2.3rem;margin-left:.35rem;}
.vlb__step{width:2.3rem;height:2.3rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgb(var(--paper-rgb) / .28);border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;transition:border-color var(--t-mid),background var(--t-mid),transform var(--t-mid) var(--ease-snap);}
.vlb__step:hover{border-color:var(--paper);background:rgb(var(--paper-rgb) / .08);}
.vlb__step:focus-visible{outline:2px solid var(--crimson-bright);outline-offset:3px;}
.vlb__step[disabled]{opacity:.3;cursor:default;}
.vlb__step svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.vlb__hint{margin-top:.7rem;font-family:var(--label);font-size:.72rem;letter-spacing:.06em;color:rgb(var(--paper-rgb) / .5);text-align:center;}
@media(max-width:620px){.vlb__now{font-size:.76rem;}.vlb__hint{display:none;}}

/* ============================================================================
   STORIES §02 video library - LAYOUT v2
   The featured film was cropped to 2.55:1 out of a 16:9 source, so the top and
   bottom of every frame were thrown away and the banner ran the full content
   width. Everything is TRUE 16:9 now, and the section reads as main-and-queue:
   the feature on the left, the other three stacked beside it as a filmstrip.
   ============================================================================ */
@media(min-width:901px){
  /* client: thumbnails take more of the band, equally */
      
  /* queue cards: still frame left, title right, and a true 16:9 still */
              }

/* one column under 901px: the feature keeps 16:9 and hands its caption back
   underneath, and the queue cards stay side-by-side so the list stays short */
/* ============================================================================
   SPEAKING §III: a talk row expands to its recording
   Only rows carrying data-talk get upgraded by fable.js, so a row with no
   recording keeps exactly its current look and behaviour.
   ============================================================================ */

/* the disclosure itself: grid-rows 0fr to 1fr animates without a magic height */
/* the closing gap is PADDING on the collapsing container, not margin on the
   child: a child margin escapes the 0fr track and leaves ~21px of dead space */
/* RESEARCH §06: research-interest chips read as soft rectangles, not full pills */

/* RESEARCH §02: the folio sits to the RIGHT so it stops stacking on the 60+ numeral */
/* ============================================================================
   PHONE PASS (<=600px only) - legibility and tap targets
   Nothing here exists above 600px, so the desktop and tablet layouts are
   untouched by design. Two problems, both measured rather than guessed:

   1. The micro type tokens are clamps that scale UP with the viewport, so a
      phone always lands on their FLOOR: --t-nano resolved to 10.3px, --t-micro
      to 11.2px, --t-label to 11.9px. Every eyebrow, folio line and category
      label on the site sat at 10-12px on a 390px screen. The floors are lifted
      here only, and the caps tracking is tightened at the same time so the
      wider glyphs do not push those labels into an extra line.
   2. A batch of hardcoded label sizes (.62rem-.78rem) bottomed out at 9.9px.
      They are lifted to the same ~12.5-13.3px floor.
   Plus tap targets: several footer and inline
   links were 21-34px tall, all under the 40px comfortable-touch minimum.
   ============================================================================ */
@media(max-width:600px){
  :root{
    --t-nano:.8rem;       /* was 10.3px on a phone */
    --t-micro:.82rem;     /* was 11.2px */
    --t-label:.82rem;     /* was 11.9px */
    --trk-caps:.12em; --trk-caps-wide:.15em;
  }

  /* hardcoded micro labels, lifted to the same floor */
      
  /* these are set by page-scoped selectors, so the override has to outrank them
     rather than just come later in the file */
  body #contact .cform__lab{font-size:.8rem;}
    body.pg-research .trial-role{font-size:.8rem;}
          .contact__ways .t {font-size:.84rem;}
  body.pg-home .bgrow__k{font-size:.84rem;}
  

  /* inline and footer links reach a comfortable height without moving anything */
  .ulink{padding-block:.4rem;}
      }

/* ---------------------------------------------------------------------------
   PHONE PASS, part 2: heroes stop cropping their own artwork (<=600px only)
   Every hero is a full-viewport box (390x844 = 0.46) holding a landscape image
   (1672x941 = 1.78) under object-fit:cover, so cover scaled to height and threw
   away the sides: only 26% of each illustration was visible on a phone (31% on
   Heart School). Rather than crop, the hero STACKS on phones - the picture runs
   full width at its own aspect ratio with nothing cut off, and the copy sits
   under it on the section's own background. The directional scrims are switched
   off because they exist to protect copy sitting ON the image, which it no
   longer does. phero--paper has no background image and is left alone.
   --------------------------------------------------------------------------- */
@media(max-width:600px){
  .phero--herobg:not(.phero--photo) {
    display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
    min-height:0;
  }
  .phero--herobg:not(.phero--photo) .phero__bg {position:relative;inset:auto;z-index:0;width:100%;}
  .phero--herobg:not(.phero--photo) .phero__bg img {
    position:relative;width:100%;height:auto;object-fit:contain;object-position:center;
  }
  /* scrims and the glow only exist to keep copy legible over the photo */
  .phero--herobg:not(.phero--photo)::after {display:none;}
  .phero--herobg:not(.phero--photo) .sec-inner {padding-block:clamp(1.9rem,7vw,2.8rem);}
  .phero--herobg:not(.phero--photo) .phero__copy {max-width:none;}
}

/* ============ REVIEW FIXES (2026-08-05) ============ */
/* reduced motion: the two looping ECG sweeps freeze fully drawn instead of animating */
/* stories/care closing splits collapse to one column on phones ([14] cramped 45% columns) */
/* index impact bento on phones: pubs + program-director cards go full row ([1]) */
@media(max-width:600px){
    /* OPTN card: the network SVG flows above the text instead of floating under it ([2]) */
  }
/* media page: close the dead ivory between Featured-in and the article grid ([36]) */
.pg-media #featured{padding-bottom:clamp(2.2rem,5vh,3.5rem);}
.pg-media #articles{padding-top:clamp(2.2rem,5vh,3.5rem);}

/* stories #voices: editorial quotes replacing the drag carousel */
/* mission #focus: beyond items are now links (wayfinding) */

/* care #work: toolkit reads as a plain label line, not decorative chips */

/* newsletter hero fan on phones: clear the CTA row and never swallow taps */
/* research flipband close: trim the mobile dead zone */
/* contact doors: real controls that prefill the form */
.contact__ways .way__btn{display:flex;flex-direction:column;gap:.25rem;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;}
.contact__ways li{position:relative;}

/* ============ SPEAKING 04: real stage photo band (hero stays papercut/AI) ============ */
/* ============ CARE 03: copy + real procedure figure over the corridor band ============ */
/* about #leadership: real portrait in the aside */

/* research #trials: evidence figure */

/* mission hero: shift the papercut right so the heart sits clear of the headline.
   The .phero--herobg scrim is SOLID paper to 20%, so an 18% shift keeps the
   image's left edge completely hidden (no seam) at every desktop width.
   Scoped to >=901px: below that the hero scrim runs bottom-up and under 600px
   the hero stacks, so a horizontal shift would expose a real gap. */
@media(min-width:1200px){
  body.pg-mission .phero--herobg .phero__bg img{transform:translateX(18%);}
}
/* 901-1199px: cover already crops hard here, so a big shift would push the
   heart's right side off screen. A small nudge is enough to clear the copy. */
@media(min-width:901px) and (max-width:1199px){
  body.pg-mission .phero--herobg .phero__bg img{transform:translateX(7%);}
}

/* research 03: the evidence photo sits left, the three trial cards stack beside it */
body.pg-research #trials .trials{display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.8vw,1.4rem);margin:0;}
/* mission 08: the six pursuits ARE the marquee now. One taxonomy, one section:
   the infinite scroll people liked, carrying the copy people wanted to read. */
/* no motion, or a phone: the same six read as a plain wrapped grid */
/* ============ NEWSLETTER 03: the issue archive index ============ */
/* ============ ISSUE PAGE: banner, body, references ============ */
.ipage{padding-top:96px;}
.ihero__t{margin:1rem 0 0;font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink);max-width:20ch;}
.ibody{max-width:68ch;margin:0;}
.ibody p{font-family:var(--body);font-size:clamp(1.02rem,1.4vw,1.12rem);line-height:1.72;color:var(--ink);margin:0 0 1.35rem;}
.ibody h3{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2;color:var(--ink);margin:2.4rem 0 1rem;}
.ibody .ipull{margin:2.2rem 0;padding-left:0;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.35;color:var(--ink);}
.irefs{margin-top:clamp(2.6rem,5vw,4rem);padding-top:1.6rem;max-width:68ch;}
.irefs__k{display:block;font-family:var(--label);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--trk-caps);text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.1rem;}
.irefs ol{margin:0;padding-left:1.3rem;}
.irefs li{font-family:var(--body);font-size:.96rem;line-height:1.6;color:var(--ink-soft);margin-bottom:.85rem;}
.irefs a{color:var(--crimson);text-decoration:none;}
.irefs a:hover{text-decoration:underline;text-underline-offset:.2em;}
.inote{margin-top:1.6rem;font-family:var(--body);font-size:.92rem;line-height:1.6;color:var(--ink-faint);max-width:68ch;font-style:italic;}
.iback{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.4rem;font-family:var(--label);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--trk-caps);text-transform:uppercase;color:var(--ink-faint);text-decoration:none;}
.iback:hover{color:var(--crimson);}

/* issue body sits closer to its banner than a normal section would */

/* long guideline acronym strings (AHA/ACC/AANP/...) must be allowed to break */
.irefs li,.irefs a{overflow-wrap:break-word;}
.ibody p,.ibody h3{overflow-wrap:break-word;}

/* ============ HOME 05: the photograph gets its own column ============
   Four people span the full width of this frame, so any type laid over it
   lands on somebody. The picture takes the right half at full strength, the
   words take the left on paper, and the folio sits top right. No wash, no
   veil, no face covered. */
body.pg-home #stories{background:var(--paper);color:var(--ink);}
/* #stories moves to navy per spec 6.2; the id-scoped rule directly above
   predates that and otherwise outranks .sec-dark's own background/color
   (an id always outranks any number of classes), silently keeping this
   section white the moment a page builder adds "sec-dark on-dark" here.
   Chained onto the same element for exactly that reason (verified by
   building a temporary dark test copy of this page and screenshotting
   it, per this pass's own method). */
body.pg-home #stories.sec-dark,body.pg-home #stories.on-dark{
  background:var(--grain-dither),var(--navy-ramp),var(--navy-bloom-soft);
  background-size:160px,cover,cover;background-color:var(--near-black);color:var(--paper);
}
body.pg-home #stories .sec-inner{min-height:clamp(600px,80vh,880px);display:flex;flex-direction:column;justify-content:flex-start;}
/* the quote and the trace both carry this section, so they are set large */
body.pg-home #stories .ulink {color:var(--crimson);}
@media(max-width:900px){
    body.pg-home #stories .sec-inner{min-height:0;}
    }

/* ============ METALLIC SHEEN ON OPAQUE SURFACES ============
   Flat navy reads matte. Real anodised metal has a soft raking light across
   the top and a hairline catch on its top edge, so every opaque brand surface
   gets the same two cues: a wide low-angle sheen and an inset top highlight.
   Kept under 6 percent so it never becomes a glow blob. */
:root{
  --sheen:linear-gradient(152deg,rgba(255,255,255,.155) 0%,rgba(255,255,255,.085) 14%,rgba(255,255,255,.03) 30%,rgba(255,255,255,.008) 46%,transparent 60%),radial-gradient(85% 55% at 16% -10%,rgba(255,255,255,.11),transparent 64%);
  --sheen-soft:linear-gradient(152deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 18%,rgba(255,255,255,.012) 40%,transparent 62%);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.28);
  --edge-top-soft:inset 0 1px 0 rgba(255,255,255,.13);
}
/* dark section fields */
/* controls and dark cards */
.btn {background-image:var(--sheen),var(--grad-crimson);box-shadow:var(--edge-top);}
.btn:hover {box-shadow:var(--edge-top),var(--glow-crimson-soft);}
/* lit edge follows the bloom (bottom/left), shade on top. A top highlight
   under a bottom light is the fastest tell that a surface is fake. */

/* ============ PHOTO HEROES: one system ============
   Earlier attempts kept trying to make the copy legible ON TOP of the
   photograph, which meant darkening the photograph until you could not see
   him. Those two goals fight over the same pixels and the photograph always
   loses. So they no longer share pixels: the words sit on solid navy, the
   picture keeps its own zone, and the only overlay left on it is a flat
   translucent brand tint. object-fit is contain, so nothing is cropped, and
   the navy letterbox is invisible against the navy field. A short feather on
   the picture's inner edge stops it reading as a pasted rectangle. */
/* the column is sized to the picture's own aspect, so cover crops nothing AND
   the feather lands on the picture instead of on empty letterbox */
/* Flat brand tint, not a gradient: the picture stays readable everywhere.
   It MUST carry the same mask as the picture. Unmasked, its hard left edge
   paints a 22% navy rectangle over navy right where the photo is still fully
   transparent, and that edge is the vertical seam. Softening the picture's
   gradient can never fix it, because the seam was never the picture. */
/* ============ MEDIA: masthead strip + the reach moment ============
   The outlet names used to be a bare list in a section of their own, followed
   by most of a screen of empty paper, and they repeated what the cards below
   already proved. They are now a masthead above the coverage, set in the
   display face at newspaper scale so they read as credentials rather than as
   an inventory. And the reach numbers were buried inside a sentence; they are
   the proof on this page, so they count up and take the space. */
/* the coverage cards stop being six identical boxes: outlet label, headline
   that draws its own underline, and a mark that travels on hover */
/* the copy column is whatever is left beside the picture, computed from the
   same expression that sizes the picture, so the headline can never be
   squeezed into one word per line. Below 1100px the two stop competing and
   the hero stacks. */
/* ============ CUTOUT HERO ============
   No photograph rectangle, so there is no edge to blend and no transition to
   get wrong: the subject is cut from his background and stands on the brand
   field itself. The navy carries the light instead, a soft studio bloom behind
   him plus the same raking sheen every opaque surface has, and the figure
   dissolves at the foot so he is standing IN the colour rather than on it. */
/* He starts below the nav: at full hero height his head is clipped by the top
   edge and his hair sits behind the nav links. --fig-h is what keeps the width
   cap honest, so never let this rule get separated from it. */
/* The right offset grows past ~1500px so he walks toward the copy instead of
   staying pinned to the viewport edge. Left alone the gap ran to 979px at 2560. */
/* the two tight shadows are a rim glow: they trace the alpha silhouette, so he
   is lit off the navy instead of pasted onto it. The last one grounds him. */
@media(max-width:900px){
  /* copy first, figure after: stacked the other way the sticky bar cut across his chest */
        }

/* the cutout is wider than the photo columns, so the copy is measured against
   the cutout itself, otherwise the deck runs under his arm */
/* ============ HERO PLATE ============
   The half-navy/half-photo dissolve is gone. The picture is a plate that sits
   ON the field with a clean edge: no mask, no tint rectangle, so there is no
   second edge to disagree with the first. Depth comes from the field falling
   away beside the plate, not from smearing the photograph into it. */
/* the peel tucks under the plate's left edge, so the page reads as peeling back
   to reveal the photograph instead of poking out above it */
@media(max-width:900px){
      /* without this the img keeps its intrinsic height and spills 166px over the copy */
        }

/* ============ HERO FURNITURE ============
   Built from the client's own hero mock (Changes/54b552c8): an engraved
   anatomical heart watermark, the HEART SUCCESS seal, and a paper peel curling
   off the right edge to reveal oxblood underneath. Everything except the peel
   sits under 15% opacity, so it reads as a printed ground, not as ornament. */
/* small outline hearts drifting around the figure */
@media(max-width:900px){
      /* a narrow brand edge on small screens: a wide band ate a third of the
     viewport and bled through the translucent ghost buttons */
    .phero .sec-inner{padding-right:calc(var(--gutter) + clamp(34px,11%,56px));}
  }

/* ============ 100x PASS 2, VISUAL ============
   One focal point: the headline is set at monument scale with tight leading and
   real negative tracking, and the deck steps back so it reads as support rather
   than as a second headline. The tan hairline under the kicker is the reference
   art's rule, and tan is hairlines only. */
/* ============ 100x PASS 3, DYNAMIC ============ */
/* the seal turns once a minute: slow enough to notice only if you stay */
/* the seal used to sit here and turn; it is an ECG ring now, and static. A slow
   rotation on a hero device reads as a loading spinner, not as a brand mark. */

/* ============ 100x PASS 4, INTERACTIVE ============
   The four role words were inert decoration sitting above the headline. They map
   one-to-one onto four pages, so they are now the fastest route into the site:
   hover or focus draws an underline from the left and lifts the word to ivory. */
.pg-home .phero__roles a{color:inherit;text-decoration:none;position:relative;
  padding-bottom:.28em;transition:color .22s var(--ease-snap);}
.pg-home .phero__roles a::after{content:"";position:absolute;left:0;bottom:0;height:1px;
  width:100%;background:var(--crimson-bright);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-snap);}
.pg-home .phero__roles a:hover,.pg-home .phero__roles a:focus-visible{color:var(--paper);}
.pg-home .phero__roles a:hover::after,.pg-home .phero__roles a:focus-visible::after{transform:scaleX(1);}
.pg-home .phero__roles a:focus-visible{outline:2px solid var(--crimson-bright);outline-offset:4px;border-radius:2px;}
@media(prefers-reduced-motion:reduce){
  .pg-home .phero__roles a,.pg-home .phero__roles a::after{transition:none;}
}

/* ============ PER-PAGE HERO ILLUSTRATION ============
   One bespoke illustration per hero, never an icon row. Each sits in the navy
   field opposite the subject, draws in when the section arrives, and resolves to
   a fully drawn static state under reduced motion. Opacity lives on the element,
   not on the animation, so the art can never end up invisible. */

/* care: the rhythm the whole page is about, failing then restored */

/* speaking: a room responding, not a stock audience icon */
@keyframes barPulse{from{transform:scaleY(var(--h));}to{transform:scaleY(calc(var(--h) * .38 + .12));}}

/* learn: one idea connecting to the rest, with a single hub */
@keyframes nodePop{to{opacity:1;transform:scale(1);}}

/* contact: a signal going out and being answered */
@keyframes ringOut{0%{transform:scale(.3);opacity:0;}18%{opacity:.85;}100%{transform:scale(2.6);opacity:0;}}

/* no-JS fallback: the art must be fully drawn, never mid-transition */

/* Hero accent: --crimson-bright measures a median 3.25:1 on this navy, which is
   the large-text floor with no margin, and dips under 3:1 across 13% of the
   ground where the engraving and sheen lift it. The hero display accent is a
   step lighter so it clears with room. Scoped to hero headlines only. */

/* Between about 940 and 1200 the plate leaves the copy a narrow column, and the
   monument scale was pushing the contact headline to eight lines. The plate
   gives width back before the type has to shrink further. */
/* ============ FULL-BLEED PHOTO HERO ============
   The photograph is the hero. Copy sits on whichever side the subject is NOT:
   speaking and learn put him left so the words go right, contact puts him right
   so the words go left. A directional scrim carries legibility, and a short top
   scrim keeps the nav readable over bright frames. */
.phero--photo .phero__bg{z-index:0;inset:0;left:0;right:0;top:0;width:100%;height:100%;box-shadow:none;}
.phero--photo .phero__bg img{width:100%;height:100%;object-fit:cover;filter:none;
  -webkit-mask-image:none;mask-image:none;}
/* a translucent band under the nav: contact had 11.5% of the nav strip below
   4.5:1 where the bright doorway sits right under the links */
.phero--photo .phero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;display:block;
  background:linear-gradient(180deg,rgb(var(--navy-rgb) / .90) 0,rgb(var(--navy-rgb) / .74) 62px,
    rgb(var(--navy-rgb) / .34) 112px,rgb(var(--navy-rgb) / .08) 168px,transparent 220px);}
.phero--photo .sec-inner{position:relative;z-index:3;}
/* the peel and the art follow the copy */
@media(max-width:900px){
  .phero--photo .sec-inner{padding-left:var(--gutter);padding-right:calc(var(--gutter) + clamp(34px,11%,56px));}
    .phero--photo .phero__bg img{object-position:center 22%;}
}

/* Over photography the illustration has to fight the picture, so it is drawn
   brighter and carries a dark halo. Measured: the scrim that makes the type
   safe also gives the line work a stable ground to sit on. */
/* the peel frames the photo edge; over a picture it must not become a wedge */

/* The illustration lives on the PHOTO side, never under the copy. Behind the
   words it was lifting the ground and pushing the accent under 3:1 on speaking
   (15.2% of pixels); on the picture side it is both safe and far more visible. */
/* The illustration was large and lost: on the copy side it fought the type, on
   the photo side it sat on him. It is now a small signature mark parked at the
   foot of the copy column, on the strong part of the scrim, clear of both. */
@media(min-width:901px){
  /* above the copy, between the nav and the folio: the one band in the copy
     column that the vertically centred text never reaches */
              }

/* care: an anatomical heart drawn in line, with the coronary tree as the accent
   and a slow beat at the centre. Replaces the rhythm strip, which the index
   already owns. */
@keyframes heartBeat{0%,100%{transform:scale(.82);opacity:.5;}18%{transform:scale(1.06);opacity:1;}34%{transform:scale(.94);opacity:.75;}}
/* learn: the frame is portrait, so cover shows the FULL width and
   object-position X does nothing. To place him in the gap between the peel and
   the copy he has to be zoomed and shifted. The shift stays inside the overflow
   the zoom creates, so no edge is ever exposed. */
/* ============ GLOW GRADIENT ============
   The reference is a saturated body with a hard diagonal specular sweep and an
   iridescent fringe. Reproduced here in the brand: navy through oxblood for the
   body, an ivory sweep for the specular, and gold on one corner against cool
   blue on the other for the iridescence. Objects glow; grounds stay flat, so
   this goes on cards, bands and buttons, never on a hero field. */
:root{
  /* RESTRAINED. Near-flat #00142F with one soft ambient bloom and a grain layer
     to dither the ramp. Dark navy spans few 8-bit steps, so an undithered ramp
     bands; the grain breaks the step edges without being visible itself. */
  /* Hue-locked navy surface. One colour, one light, one dither.
     The light is the SAME hue lifted, never white: white over a saturated navy
     drops chroma and reads milky, which is what "washed out" actually was.
     The bloom centre sits OUTSIDE the box so only its falloff crosses the
     surface, and the six stops move alpha only, so a hue sweep is not even
     expressible. Ceiling: delta L* 6. */
  /* 2026-09-30 navy pass: this WAS #205AA5, a lighter, more saturated royal
     blue than the ground it sat on top of, at a different opacity in every
     ramp/bloom stop below (.85/.58/.31... in one, .92/.63/.34 in another,
     .34/.28/.19 in a third) which is the literal mechanism of Dev's "that
     light dark blue colour ... isnt even consistent as it changes from
     section to section": every one of those layers painted its OWN slightly
     different blue over the navy floor. Set to the ground's own colour, an
     alpha blend of a colour over that exact same colour is that colour at
     any opacity, so every --navy-ramp/--navy-bloom* gradient below (and the
     few inline rgb(var(--navy-lit)/x) ramps further down the file) now
     resolves to flat --navy-ground, with zero per-callsite edits needed. */
  --navy-lit:var(--navy-ground-rgb);
  /* Grain dither: this recoloured its noise to a constant rgb(122,168,230),
     a pastel sky blue, then stretched its alpha for contrast, laid over
     every dark ground in the site at up to 3% opacity. Retinted to the
     ground's own hue (so, like the ramps above, it is now a true no-op) and
     the ceiling opacity taken down a notch as extra margin. */
  --grain-dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='0' y='0' width='160' height='160' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.047 0 0 0 0 0.094 0 0 0 0 0.2 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.02'/%3E%3C/svg%3E");
  /* end-to-end lightness ramp, hue-locked to the same 214 axis, so the field
     travels from the base to a lighter variation of ITSELF corner to corner */
  --navy-ramp:linear-gradient(158deg,rgb(var(--navy-lit) / 0.8500) 0%,rgb(var(--navy-lit) / 0.5780) 30%,rgb(var(--navy-lit) / 0.3145) 56%,rgb(var(--navy-lit) / 0.1190) 78%,rgb(var(--navy-lit) / 0.0000) 100%);
  --navy-ramp-hero:linear-gradient(212deg,rgb(var(--navy-lit) / 0.9200) 0%,rgb(var(--navy-lit) / 0.6256) 30%,rgb(var(--navy-lit) / 0.3404) 56%,rgb(var(--navy-lit) / 0.1288) 78%,rgb(var(--navy-lit) / 0.0000) 100%);
  --navy-bloom:radial-gradient(152% 120% at 14% 116%,rgb(var(--navy-lit) / 0.3400) 0%,rgb(var(--navy-lit) / 0.2788) 18%,rgb(var(--navy-lit) / 0.1870) 36%,rgb(var(--navy-lit) / 0.0952) 55%,rgb(var(--navy-lit) / 0.0340) 74%,rgb(var(--navy-lit) / 0.0000) 100%);
  --navy-bloom-soft:radial-gradient(70% 260% at 12% 126%,rgb(var(--navy-lit) / 0.2800) 0%,rgb(var(--navy-lit) / 0.2296) 18%,rgb(var(--navy-lit) / 0.1540) 36%,rgb(var(--navy-lit) / 0.0784) 55%,rgb(var(--navy-lit) / 0.0280) 74%,rgb(var(--navy-lit) / 0.0000) 100%);
  --navy-bloom-band:radial-gradient(900px 520px at 20% 140%,rgb(var(--navy-lit) / 0.2600) 0%,rgb(var(--navy-lit) / 0.2132) 18%,rgb(var(--navy-lit) / 0.1430) 36%,rgb(var(--navy-lit) / 0.0728) 55%,rgb(var(--navy-lit) / 0.0260) 74%,rgb(var(--navy-lit) / 0.0000) 100%);
  --glow-grad:var(--grain-dither),var(--navy-ramp),var(--navy-bloom);
  --glow-grad-soft:var(--grain-dither),var(--navy-ramp),var(--navy-bloom-soft);
  --glow-blend:normal, normal, normal;
  --glow-size:160px, cover, cover;
  --glow-blend-soft:normal, normal, normal;
  --glow-size-soft:160px, cover, cover;
  --glow-blend-soft:normal, normal, normal;
  --glow-size-soft:160px, cover, cover;
}


/* Roll the glow across the opaque brand OBJECTS. Large surfaces take the soft
   variant so type keeps its contrast; small ones take the full one. Hero
   grounds stay flat, that is what keeps the navy reading as the reference. */


/* the primary CTA gets the specular sweep, scaled to its size */


/* The glow lifts the ground under the feature card copy: its label failed 4.5:1
   across 30.9% of the text area and the eyebrow across 22.7%. A scrim rising
   from the foot puts the type back on a stable ground without dulling the sweep
   above it. */

/* Crimson enters from the figure side, the same red as the accent word, so the
   two brand colours meet across the hero instead of the navy carrying it alone. */

/* A LOCAL scrim behind the copy, not a global one. Dimming the whole field to
   protect the accent word is what kept flattening the hero; an elliptical pad
   under the text lets the field run as rich as the cards. */
/* crimson on the flank, strong enough to actually read */
/* the ring is a device, not a whisper */

/* Type sits ON the photograph now. Legibility comes from a shadow tuned to the
   glyph, not from a translucent slab that hides the picture we chose. */
/* The darkening follows the GLYPHS, not the picture. Measured, the crimson
   accent sits at 1.1-1.8:1 on these photographs and no crimson reaches 3:1 at
   any lightness on the learn frame, so some ground is unavoidable. A wide soft
   shadow puts it only where the letters are and leaves the photo intact. */
/* no shadow on hero type anywhere: it read as an outline */
.phero--photo .phero__title,.phero--photo .phero__deck,.phero--photo .phero__roles,.phero .phero__title,.phero .phero__deck {text-shadow:none;}
/* the accent carries its depth with a drop-shadow filter further down; a
   text-shadow here as well stacked two darkenings through the glyph and read
   as a muddy outline */


/* The accent word was gradient-CLIPPED text running #C0343C to #6B0F14, so its
   own tail was near-black. On a photograph that end simply disappears, which is
   why "language." read as a dark smudge. Flat fill on every dark hero: one
   colour, chosen for the ground it sits on. */
/* crimson GRADIENT across the word, but bounded so both ends read. The old
   one ran #C0343C to #6B0F14 and the tail went near-black. */
.phero--photo .phero__title em {
  background:var(--grad-crimson-bright);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;filter:none;}


/* the deck was --on-dark-soft, which is tuned for a navy ground and disappears
   on a lit photograph. Full ivory plus its own shadow on the photo heroes. */
.phero--photo .phero__deck{color:rgb(var(--paper-rgb) / .96);font-weight:500;}

/* Footer sits on the deep base, not the lifted blue: it is the floor of the
   page, so it reads darker than everything standing on it. Same construction,
   lower amplitude. */

/* Cards and panels sit on the ORIGINAL navy with the same gradient construction,
   just a lower amplitude than the heroes. The heroes are the loud moment; the
   furniture around them should read as navy, not as royal blue. */

/* The nav CTA is crimson and it scrolls over a crimson section, where it
   disappeared. A ring delineates it on every ground it can meet: crimson,
   ivory bar, and the navy heroes. Blue LABEL on crimson measures 2.4:1, so the
   label stays cream and the ring does the work. */
/* The veil never dropped below 70% navy anywhere on the frame, which is what
   made these photographs look degraded. It is directional now: opaque where the
   copy sits, clear where he is. */

/* Care takes a DETAIL of the engraving, the great vessels, rather than a
   hand-drawn heart. Four authoring passes produced an egg, an egg with
   whiskers, a lumpy trace and a blob; the client's own engraving is better
   than any of them, and a detail crop keeps it distinct from the home hero,
   which uses the whole form. */
/* NOTHING tints the hero photograph. Five layers were sitting on it: a navy
   scrim at .34, a CRIMSON radial at .16, the peel, the grain and the nav band.
   Navy plus crimson over a picture is how you get the lavender cast. The only
   survivor is a short band at the very top, which the nav needs to stay legible
   and which does not reach the subject. */
.phero--photo .phero__bg::after{
  background:linear-gradient(180deg,rgb(var(--navy-rgb) / .82) 0,rgb(var(--navy-rgb) / .42) 58px,
    rgb(var(--navy-rgb) / .10) 104px,rgb(var(--navy-rgb) / 0) 150px);}
.phero--photo .phero__bg img{filter:none;}

/* Footer matches the reference art panel: median #021631. The bloom comes off
   entirely and the ramp drops to .11, because the floor of the page should read
   as the deep navy the client sampled, not as a lit surface. */

/* With the photo untinted AND no shadow on the glyphs, ivory failed 4.5:1 on
   95.9% of learn and 97.4% of contact. This is the only remaining option that
   keeps all three constraints: a soft pad UNDER THE COPY BLOCK. It is not a
   panel across the picture and not an outline on the letters; the photograph is
   untouched everywhere the words are not. */
@media(min-width:901px){
  .phero--photo .sec-inner{position:relative;}
  .phero--photo .sec-inner::after{content:"";position:absolute;z-index:-1;pointer-events:none;
    top:-4%;bottom:-4%;
    background:radial-gradient(108% 98% at 50% 50%, rgb(0 8 20 / 0.99), rgb(0 8 20 / 0.95) 44%, rgb(0 8 20 / 0.74) 72%, rgb(0 8 20 / 0) 94%);}
    }
/* 2026-09-30 navy pass: this used to end at a dark maroon that measured close
   to 1:1 on navy (the exact "murky crimson on navy" Dev called out); it now
   takes the shared vivid contract, same gradient as every other dark-ground
   crimson accent on the site, with a solid fallback colour instead of
   transparent so the words never disappear if clip-text is unsupported. */
.phero--photo .phero__title em {
  background:var(--grad-shine-dark);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--crimson-vivid);filter:none;}
/* the pad only has to carry the type, so keep it modest */
/* It must also reach zero INSIDE its own box: the box ends mid-viewport at the
   46 percent line, and any alpha left there prints a full-height seam down
   the photograph. With the ellipse at 70 percent of the box width the box
   edge sits at 71 percent of the gradient, so the fade completes by 66. */
.phero--photo .sec-inner::after{background:radial-gradient(70% 58% at 50% 50%,
  rgb(0 8 20 / .80), rgb(0 8 20 / .62) 38%, rgb(0 8 20 / .30) 54%, rgb(0 8 20 / 0) 66%);}

/* The SEA stage band: the veil sat at .38 navy even at 60% across and .06 at
   82%, so the photograph was tinted all the way to its right edge. It resolves
   to nothing by 62% now, and the frame is pulled in so he is centred rather
   than stranded at the right. */
/* The societies card was mostly empty above its stat. The type now carries the
   card instead of sitting in the bottom corner of it. */
/* the stat here is .rb-word, not .rb-stat */

/* The accent gradient was running 135deg across a short word, so it resolved
   over a few characters and read as flat red. Sized to 220% and angled along
   the baseline, the sweep actually travels the word, and a soft crimson glow
   gives it the metallic lift the rest of the site has. Applies to every hero.
   2026-09-30 navy pass: this was the THIRD, latest-in-file override of this
   exact selector group (after the two fixed above), so it was the one
   actually winning, and its own stops ended at #A5202A, deep oxblood, again
   the "murky crimson on navy" Dev called out; now the shared vivid contract,
   same sweep mechanism, and a solid fallback colour instead of transparent. */
.phero--photo .phero__title em {
  background:var(--grad-shine-dark);
  background-size:220% 100%;background-position:14% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--crimson-vivid);
  filter:drop-shadow(0 2px 10px rgb(var(--crimson-bright-rgb) / .30));}

/* Measured fill before this: feature 28%, network 40%, taught 53%, pubs 68%,
   cc 69%. The type is now sized to its own card so each one is carried by its
   content rather than floating in the corner of a large empty box. */


/* The feature card measured 41% full: it spans two rows and the trace sat in
   dead space above the stat. The trace used to run BEHIND the number, so the
   card read as one composition instead of an illustration and a caption.

   J1 fix (motion kit pass): that "behind the number" placement is exactly the
   bug Dev's screenshots showed ("red heartbeat lines running between and
   through cards... home bento grid"): at every width measured (1024, 1200,
   1440) the line's peak sits right across the "15M+" glyphs, reading as a
   rendering glitch rather than a deliberate backdrop. This is a bento card,
   not a hero, so it does not qualify for the "hero's own deliberate ECG
   artwork, clear of text" exception. Removed outright rather than
   repositioned: the card has no dead space tall enough to hold a 150 to 240px
   trace clear of both the eyebrow and the stat without a markup change (out
   of this file's scope), and every other rb-card already reads fine with
   only its small corner icon (rb-heart/rb-bars/rb-ring/rb-net/rb-badge), none
   of which cross their own text. The feature card now matches that pattern:
   .rb-heart stays as its one corner accent. */

/* ============ HOME 05, pass 1: hierarchy ============
   The quote is the section's only job and it was set at 52px in an 821px band,
   with the copy stack using 62% of the column as five evenly spaced items. It
   is now monumental and the stack is tightened into one block.
   The decorative quote mark is dropped: the display face has no glyph for U+201C
   and it was rendering as two crimson tofu blocks. An italic pull-quote does not
   need a mark to read as a quote. */
/* client: show the mark, it is a quote */
body.pg-home #stories .sec-inner{justify-content:center;gap:0;}

/* ============ HOME 05, pass 2: composition ============
   Two 50/50 rectangles side by side is a grid, not a composition. The photograph
   takes more weight, and the rhythm trace now runs OUT of the words and ACROSS
   the picture edge, so the two columns are one idea instead of two panels. */
@media(min-width:901px){
  body.pg-home #stories{position:relative;overflow:hidden;}
          /* the trace fades as it crosses onto the photograph rather than stopping dead */
    }

/* ============ HOME 05, pass 3: dynamic ============
   The trace is seated in the composition rather than on the section edge, and
   the photograph answers the cursor with the same restraint as the heroes.
   Everything resolves fully drawn under reduced motion. */
/* the scan runs once the section has drawn, then rests */
/* The trace belongs BELOW the copy, not at a fixed height: the copy block is
   centred and its height varies, so a percentage top lands on the last line at
   some widths. In flow, overflowing right into the photograph. */
/* ============ HOME 05, pass 4: interactive ============
   One text link was the only thing the reader could act on. The photograph is
   the story, so it behaves like one: a real anchor over the picture column with
   a keyboard focus ring and a chip that arrives on hover or focus. */
/* The vessels art was declared aspect-ratio 1100/460 for an 1100x861 asset, so
   contain fitted it into a box half its height and the top of the drawing was
   cut. Correct ratio, and seated so nothing clips. */

/* The network illustration sat centred at 50% and the enlarged card text now
   runs straight through it. Smaller, and parked in the top right corner. */
/* reserve the corner the illustration occupies, so the glyphs can never reach it */
/* Change note 2: the trace reading ACROSS the photograph felt off, so it stays
   in the copy column and stops at its edge. The mask that faded it onto the
   picture is no longer needed. */
/* Change note 3: the six explore cards read as flat text panels. Each now carries a
   bespoke line mark in the top right that moves only when the pointer or keyboard
   asks it to, the same behaviour as the SSF door cards. Six motifs and six motions,
   never one icon set repeated: a trace running through a heart, a plotted line
   landing its points, a page filling with text, a stack of stories fanning open,
   an equaliser, and a network finding its links. The mark rests in faint ink and
   inks crimson on engagement, so each card still carries a single accent mark.
   Every motif is fully drawn at rest on coarse pointers and under reduced motion,
   so nothing can be left invisible where it cannot be revealed. */
@media(pointer:fine){
    /* 01 the trace sweeps through the heart */
      /* 02 the plotted points land one after another */
      /* 03 the page fills with text */
      /* 04 the stack fans open */
      /* 05 the equaliser runs while the card is held */
      /* 06 the links draw and the hub opens up */
        }
@keyframes nc-sweep{from{stroke-dashoffset:30;}to{stroke-dashoffset:0;}}
@keyframes nc-draw{from{stroke-dashoffset:7;}to{stroke-dashoffset:0;}}
@keyframes nc-eq{from{transform:scaleY(.42);}to{transform:scaleY(1);}}
/* Change note 5: the stage plate behind mission 04 was underexposed exactly where
   he is. The lift is baked into speaking-mic-v3.webp as a tone-targeted curve that
   is pinned at both ends, so his suit and face come up (band luminance .14 to .30)
   while the near-black frame stays at ink-deep and the white chairs cannot clip.
   The plate no longer needs a CSS brightness nudge. Lifting it does make the lit
   chairs along the bottom cut off as a rectangle, so the plate now dissolves into
   the field over its last stretch instead of ending on a hard edge. */

/* Change note 6: the sitewide sheen pass set background-image on every .btn, and it
   lands after both button variants have chosen their own ground. That painted the
   crimson gradient straight back over them: on the crimson band the Work with Dmitry
   button became crimson on crimson, and the ghost button lost its outline treatment
   the same way. Each variant reclaims its ground here. The light button keeps a real
   metallic sheen rather than the white one, which is invisible on ivory. */
/* Heart School index. The .issuerow component is reused byte for byte by giving the
   section id="issues"; the shipped block at 2256 stays untouched. Only the group
   rhythm changes, because that margin was sized to clear a section heading, not a
   group label. Scoped to this page so newsletter.html is unaffected. */

/* A stage with nothing published yet. It is deliberately NOT an .issuerow: that grid
   is auto/1fr/auto/auto, so a row missing its arrow slides the read time out of the
   column the rows above it use. This is a plain block that borrows the same hairlines
   and roughly one row's height, so the gap reads as reserved rather than broken, and
   it carries no link affordance of its own beyond the one anchor inside it. */
/* Sized and weighted exactly like a row title so the group does not look collapsed,
   but faint and inert, because there is nothing here to click. */

/* The research close band was carrying the full ramp plus the bloom, so its top
   left corner rendered 7.5x brighter than its own bottom right corner and the band
   read as a lit blue panel sitting on a flat dark floor. It now takes the footer's
   exact recipe: same deep navy, same near invisible ramp, no bloom. The two
   surfaces meet as one continuous dark base, which is the point.
   Scoped to this page on purpose. On stories.html .flipband is a small rounded
   quote card sitting on paper, where the lift is doing real work as depth, so it
   keeps the original construction. */
body.pg-research .flipband{background-color:var(--navy-ground);
  background-image:var(--grain-dither),linear-gradient(158deg,rgb(var(--navy-lit) / 0.1100) 0%,rgb(var(--navy-lit) / 0.0748) 30%,rgb(var(--navy-lit) / 0.0407) 56%,rgb(var(--navy-lit) / 0.0154) 78%,rgb(var(--navy-lit) / 0.0000) 100%);
  background-size:160px,cover;}

/* The floor of the page, and the band standing on it, both go to the deeper navy
   the client specified. Same construction as before, just a lower base. */
body.pg-research .flipband{background-color:var(--navy-ground);}

/* Mission 04: the photograph was never really underexposed. What was on it was
   .sec-dark .imgsec__bg::after (fable.css:459), a navy wash running .94 to .34,
   so even at the right edge where he stands it was still a third navy. That is
   the translucent blue layer. It comes off here and the plate goes back to the
   original file and the original colours, ungraded. The copy on the left keeps
   its ground from .story__veil, which is solid ink-deep to 44% and clear by 74%,
   so nothing depended on this layer for legibility. */

/* Impact at a glance: every size in the section comes down about a tenth. The
   earlier pass had pushed these to fill their cards and they had grown loud. */

/* The feature card was centring its block, so the trace ran straight through the
   numerals and the card's lower half sat empty. The block drops to the foot of
   the card and the trace gets the clear space above it to read in. */

/* With the block at the foot of the card the free space is all at the top, so the
   trace moves up into it. At 50% its lower spike still ran behind the eyebrow and
   the numerals, which defeats the point of moving the block down. Measured: the
   trace box is about 36% of the card tall and the type block starts at 43% on the
   widest layout, so a 25% anchor puts the whole trace between 4% and 40%. */

/* The shoot (KGP26). Eleven slots re-photographed; layout notes live with each rule. */

/* Heart School, section 05: the client's top-down frame of his hands at the laptop
   is the section background, with the heading on the left and the prose on the
   right, as asked. The photograph carries its own light, so the sitewide navy wash
   over dark-section photos is off here (the client's standing rule), and each text
   column carries the same neutral ink pad the photo heroes use for legibility. */
/* the prose side is carried by the same edge-anchored scrim the photo heroes
   use: neutral ink, anchored to the frame edge, so there is no floating
   panel edge anywhere. It replaces the sitewide navy wash, which stays off. */
/* the heading wraps inside the scrim's strong zone instead of reaching the sleeve */
/* The frame's honest dark zones are the floor top left and the black desk mat
   bottom right, so the copy takes those two corners and the lit diagonal of
   coat, hand and laptop runs untouched between them. Measured per line: the
   sleeve row peaks at Y .54, which no honest pad can carry ivory across. */
/* both sides are carried by the frame-edge scrims above; no local pads, so
   there is no floating panel edge anywhere in the section */
/* Mission 04's plate is now the lectern frame: portrait, contained right, and it
   reads at its own colours. The blur/scale treatment tuned for the old landscape
   plate would crop a portrait, so it is reset here. */

/* Speaking 04 band: the new frame is near-square, so pull the crop up to keep his
   head and the screen in the band. */

/* Contact hero: the paper peel divider reads as a hard vertical seam over the
   new photograph, so it is off on this page. */

/* Contact's ground is the brightest of the photo heroes (lit wall and framed
   certificates), so its pad runs stronger through the midrange. Still zero
   by 70, inside the box edge, so no seam. */
@media(min-width:901px){
body.pg-contact .phero--photo .sec-inner::after{background:radial-gradient(72% 68% at 50% 55%,
  rgb(0 8 20 / .90), rgb(0 8 20 / .80) 48%, rgb(0 8 20 / .50) 62%, rgb(0 8 20 / 0) 72%);}
}

/* Stacked on a phone, the method copy spans the full width, so the two side
   scrims stop lining up with it. One bottom-weighted vertical scrim carries
   the whole column instead, the same shape the photo heroes use on mobile. */
/* Learn hero, client direction: the copy spreads across the LOWER band of the
   section, under him, instead of standing in a right-hand column. The title
   runs wide, then the deck and the CTAs share one row across the width. The
   column pad is replaced by a bottom-anchored scrim, edge-tied so it reads as
   ground shadow, never a floating panel. Desktop only; the stacked mobile
   layout already puts the copy below the photograph on solid navy. */
@media(min-width:901px){
  body.pg-learn #top .sec-inner{padding-left:var(--gutter,6vw);padding-right:var(--gutter,6vw);
    display:flex;align-items:flex-end;}
  body.pg-learn #top .phero__copy{max-width:none;width:100%;padding-bottom:clamp(1rem,2.2vh,1.8rem);}
  body.pg-learn #top .phero__title{max-width:24ch;}
      /* the box runs well past the section bottom so its own edge is clipped away;
     the last stop holds constant so nothing changes where the clip lands */
  body.pg-learn #top .sec-inner::after{left:-6%;right:-6%;top:14%;height:auto;bottom:-45%;
    background:linear-gradient(180deg,rgb(0 8 20 / 0) 0%,rgb(0 8 20 / .60) 30%,rgb(0 8 20 / .82) 58%,rgb(0 8 20 / .86) 76%,rgb(0 8 20 / .86) 100%);}
}

/* Speaking joins contact on the stronger copy pad: its copy-left ground is
   mostly the dark doorway, but the deck's longest line grazes the lit door
   frame. Same shape, zero by 72, no seam. */
@media(min-width:901px){
body.pg-speaking .phero--photo .sec-inner::after{background:radial-gradient(72% 68% at 50% 55%,
  rgb(0 8 20 / .88), rgb(0 8 20 / .76) 40%, rgb(0 8 20 / .48) 58%, rgb(0 8 20 / 0) 72%);}
}

/* ============ Site sweep, rounds 1-2 (2026-08-12) ============ */
/* Print gets everything: mirrors the reduced-motion override. */
@media print{.js .reveal-sec [data-rise]{opacity:1 !important;transform:none !important;}}

/* Stories 03: the wash becomes a left-anchored ramp that reaches true zero, so
   the cath lab reads at its own colours on the right. Contact 04: the corridor
   is already near-black at its own colours, so the wash comes off entirely,
   the same call the client made on mission 04. */

/* Stories 02: the lead thumbnail centres on the patient's face, so the play
   disc moves to the empty hallway right of his profile. */
/* the lead card spans three grid rows, taller than a 16/9 still; the thumb now
   fills the card so the overlaid meta always sits on the photograph and the
   thumbnail itself is the thing that grew */

/* Issue pages: the 68ch article was left-stranded in the 1400px shell; the
   shell now shrink-wraps the measure and centres, one editorial column. */
.ipage .sec-inner{max-width:calc(68ch + 2 * var(--gutter, 6vw));}

/* ============ Site sweep, rounds 3-5 (2026-08-12) ============ */
/* Round 3: the signature crimson-em idiom, upright and weighted, lands where it
   was missing: care's two mid-page h2s, contact's title, the four issue heroes. */
.ihero__t{text-wrap:balance;}
.ihero__t em{font-style:normal;font-weight:800;color:var(--crimson);}

/* Round 3: paper-tuned tokens fixed on saturated grounds. */

/* Round 4: crimson stays punctuation. The bento's secondary marks go gold so
   the key numerals keep the accent; the mission resolve line returns to ink
   with its close carrying the em; chapter and stage eyebrows stop stacking
   crimson columns. */

/* Round 4: mission's two dark chapters become one dark. */
body.pg-mission #turning{background:var(--ink-deep);}

/* Round 5: care's FAQ folds to a readable column so the toggles sit beside the
   questions instead of a thousand pixels away. */

/* Round 5: ragged wraps in tracked caps. */

/* Round 5: media 02 regrounds to paper so the page keeps its paper majority and
   the crimson band lands against paper instead of navy. The pair of numerals
   takes ink at monument scale and spreads across the band. */
/* index resolve: ink voice, crimson close */

/* Contact hero (2026-08-13): the contained-plate experiment was reverted on
   client review; the cover framing returns as it was, and only the pulse
   motif keeps its new home off the folio numeral. */

/* The story quote mark was swept into the gradient-clip text rule, where its
   fill goes transparent and the gradient misses the glyph box, so it painted
   invisible. Flat crimson, sitting clearly above the quote, so the line
   reads as the patient's words and not his. */

/* Learn hero, client round 2: the deck and the CTAs cluster on the LEFT under
   the title instead of spreading to the far corner, and the nav goes
   translucent over this hero so the photograph reads as continuing beneath
   it rather than being cut by an opaque bar. */
/* Care hero ground (2026-08-13): its own room, not the index's. The lit ramp,
   crimson bloom and paper peel belong to the home hero; care sits on a flat
   deep clinical navy with a faint monitor grid band and one slow ECG trace
   running behind him, the lab's own furniture. Trace draws on entry, loops
   gently, and rests fully drawn under reduced motion. */
/* the lit ramp and bloom live on .phero--dark itself, so they are overridden
   at the same strength: flat clinical navy, no bloom, no ramp */
/* the streak: one gold hairline runs the full width at the trace baseline,
   the crimson trace rides over it */
.js .reveal-sec.is-in body {}
@keyframes careSweep{to{stroke-dashoffset:0;}}
/* [superseded: the first voices build was removed in the final pass] */

/* Learn hero, round 3: the whole copy cluster rests low. The internal gaps
   compress so the title begins in the lower half of the frame. */
@media(min-width:901px){
    body.pg-learn #top .phero__title{margin-bottom:.9rem;}
      body.pg-learn #top .phero__copy{padding-bottom:clamp(1.2rem,3vh,2.2rem);}
}

/* Speaking hero, client round: the copy pad and the glow come off entirely,
   the words sit directly on the stairwell, and the equaliser bars move off
   the folio numeral to the upper right wall. */
@media(min-width:901px){
  body.pg-speaking .phero--photo .sec-inner::after{display:none;}
}

/* Contact hero, client round: the copy pad comes off entirely, and the pulse
   ring shrinks and tucks into the top right corner. */
@media(min-width:901px){
  body.pg-contact .phero--photo .sec-inner::after{display:none;}
}

/* [superseded: the voices elevation pass was removed in the final pass] */

/* ===== Learn page, client round (2026-08-13) ===== */

/* Hero: the copy sits as low as it comfortably can. The kicker, title, deck and
   buttons form one block pinned to the bottom of the frame with only the section
   padding beneath it, so on load the words rest on the lower edge. */
@media(min-width:901px){
  body.pg-learn #top .sec-inner{align-items:flex-end;padding-bottom:0;}
  body.pg-learn #top .phero__copy{padding-bottom:clamp(1.6rem,3.5vh,2.6rem);margin-top:auto;}
    body.pg-learn #top .phero__title{margin-bottom:.7rem;}
      /* the ground shadow follows the copy down instead of washing the middle */
  body.pg-learn #top .sec-inner::after{top:34%;bottom:-45%;
    background:linear-gradient(180deg,rgb(0 8 20 / 0) 0%,rgb(0 8 20 / .42) 26%,rgb(0 8 20 / .74) 54%,rgb(0 8 20 / .82) 72%,rgb(0 8 20 / .82) 100%);}
}

/* Section 04: no filter on the photograph. The scrims come off entirely and the
   frame is panned so the copy lands on the picture's own dark zones, the floor
   above and the desk mat below, rather than being darkened to fit. */
/* the hero section itself centres its inner block (.phero align-items:center), which
   is what kept the copy mid-frame no matter how the inner spacing was tuned. The
   section now anchors its content to the bottom edge, with one comfortable margin. */
@media(min-width:901px){
  body.pg-learn #top{align-items:flex-end;}
  body.pg-learn #top .sec-inner{padding-bottom:clamp(2rem,5vh,3.6rem);}
}

/* Section 04, resolved (2026-08-13). The client asked for no filter on this
   photograph. Measured across every possible crop, the brightest tenth under the
   heading never falls below 1.37:1 and under the prose never below 1.74:1, against
   thresholds of 3.0 and 4.5, because the frame is lit coat, paper and laptop
   exactly where words want to sit. No pan, no colour and no text weight fixes
   that. So the photograph keeps its full brightness and the copy moves off it:
   the picture holds the right of the band at its own colours, the words sit on
   the section's flat deep ground at the left. One soft edge blend where the two
   meet, no wash anywhere over the image. */
body.pg-learn #method{background:var(--ink-deep);}
/* Mobile: same resolution turned on its side. The photograph holds the top of the
   band at its own colours and the copy sits on the flat ground beneath it, so no
   line ever crosses the picture. */
/* ============================================================================
   STORIES 04, "The words that stay with you." FINAL PASS.

   This block is appended last, so it wins on source order over both earlier
   #voices blocks (fable.css 2143-2151 and 3583-3669). The deletions list names
   what those blocks should lose; this block is written to render correctly
   whether or not that cleanup has landed yet.

   WHAT THE SECTION BECOMES.
   The navy lead band keeps all four of its 26px corners and gains room above
   it while losing room below it, so it and the row read as one group under the
   heading rather than three evenly spaced peers. The father and child figure
   stops floating vertically centred and stands low on the right.

   The three quotes stop being three of anything. They differ in measure
   (5.5 : 4 : 3.5), in surface (one card, two passages of bare type), in voice
   (about 25px against 18px), in vertical alignment (two hang from the top of
   the row, the narrowest sits on its floor), and in where the mark meets the
   words (beside the attribution, above the quote, under the attribution).

   THE MARKS AND THE HOVER STAY, because the client asked for them by name, but
   they stop being corner badges: every mark is now a flow item in the card's
   grid, which is what permanently removes the card three text-and-icon overlap
   and the phantom bottom padding that used to house an icon in the corner of a
   card with no corners. Each mark encodes its own sentence: the call ringing,
   the word said out loud, the line drawn on the whiteboard.

   WHAT LEAVES: the gold top hairline and its hover sweep, the arrowhead and
   its delayed pop, the heart inside the bubble, the equal grid, the equal
   heights, the equal type size, the resting shadow, the gold hover border, the
   tinted plate that sat 3 percent off the page colour, both infinite loops,
   `forwards` and every scrap of retained animation state. Four keyframes
   become one. Five durations and four curves become one of each. Crimson at
   rest below the navy band goes from one to zero: it is a hover response only.
   ============================================================================ */

/* --- 1. THE LEAD BAND ------------------------------------------------------
   Space moves UP, out of the join between the lead quote and the cards that
   answer it, into the join between the heading and everything it introduces.
   Heading to band and band to row were 1.13:1, which the eye reads as
   identical. They are now about 3.3:1, so proximity does the grouping.
   Measured, .sec-inner capped at 1400: heading to band / band to row is
   73.6 / 22.4 at 1440, 73.6 / 20.4 at 1200, 66.6 / 17.6 at 1024. Total
   heading-to-row distance FALLS only 3 to 8 percent, so the room is moved,
   not reclaimed (Rule 14: margin is not wasted space).
   The clamp caps at 1132px, so the gap stops growing well before the
   container does. `position:relative` and `overflow:hidden` are deliberately
   NOT restated here: .flipband already declares both verbatim at fable.css
   line 1008. */
#voices .flipband{margin-top:clamp(2.6rem,6.5vw,4.6rem);}

/* The figure stands low and right instead of floating centred. `top:auto` and
   `transform:none` are stated explicitly so this wins cleanly over the older
   `top:50%; transform:translateY(-50%)` even if that rule survives.
   It is anchored with a small inset rather than flush at bottom:0, because
   the band keeps its 26px bottom corners: a figure at 0 would stand inside
   the corner curve. At 1440 the figure is 220 wide and, with the trimmed
   viewBox, 212 tall, sitting 28.8px off the navy's bottom edge inside a band
   about 310px tall, so there is air above it and none wasted below it.
   Horizontal clearance from the quote: about 262px at 1440, 94px at 1024. */
/* The lead drawing is all ivory: crimson-bright at the mark's 55% opacity
   over this navy composites to about 1.5:1, so an accent stroke there was
   its least visible line. The three card marks below are ivory too. */
/* --- 2. THE ROW -----------------------------------------------------------
   One ratio, everywhere the row is a row. 5.5 : 4 : 3.5 is argued, not
   arbitrary: the peer voice certifies the clinical claim, carries the row's
   most vivid line ("3 a.m.") and arrives first, so it takes the widest
   measure; the institutional voice is supporting evidence, so it takes the
   narrowest and the eye finishes the row. Honest note: quote LENGTH cannot
   justify this. All three quotes are 75 or 76 characters. Width follows
   weight only.

   minmax(0,Nfr) and not bare Nfr: the automatic minimum would let
   "cardiovascular" or "amyloidosis" push a track past its share and blow the
   row wider than .sec-inner.

   Measured track widths: 1440 -> 491 / 357 / 312. 1200 -> 421 / 307 / 268.
   1024 -> 360 / 261 / 229. There is no second ratio at a second breakpoint:
   if a ramp cannot survive a viewport, the answer is fewer items with more
   room, so below 901px the row simply stops being a row (see section 8).

   align-items:start kills the equal-height lock, so the bottom edge of the
   row rags on its own from the quotes' real line counts. */

/* --- 3. THE CARDS, SHARED MECHANICS ---------------------------------------
   Everything here is a reset or a layout hook. Not one declaration in this
   rule makes the three quotes look alike: no fill, no border, no corner, no
   shadow, no padding, no type size. Those are each card's own business below.

   The card is a grid so the mark can be a FLOW item. That is the structural
   fix: an absolutely positioned mark does not reflow text, which is how a
   45 character attribution and a corner icon ended up sharing a band in the
   narrowest track, and it is why the box-less card needed 4.1rem of phantom
   bottom padding to house an icon in the corner of nothing. Both problems
   stop existing rather than getting tuned around.

   The gold ::before hairline is killed with `content:none`. It separated
   nothing: it floated at top:-1px inside a boundary that already existed, it
   sat at an identical left:1.6rem on all three, and its hover fired a second
   crimson at the same instant as the mark. */

/* --- 4. CARD ONE, THE COLLEAGUE -------------------------------------------
   3 a.m., urgency, the widest track: the only object in the row that is an
   object. It is also the only one that lifts on hover, because it is the only
   one with a box to lift.
   Fill plus a 1px hairline and nothing else. There is no resting shadow: the
   border draws the edge, the fill separates it from the field, and a third
   depth signal at rest would be the one piece of ornament this pass added.
   Hover then goes from no shadow to --sh-2, which is a larger, more legible
   change than --sh-1 to --sh-2 ever was.
   Honest note on the fill: .sec-paper-2 is a --paper-2 to --paper ramp, so
   the field under the row is about #FAF6F3 and --paper-2 #FDFBF9 clears it by
   only about 3/5/6. The hairline is what makes this card read as an object,
   which is exactly why it is not a decorative line and is not deleted.
   Grid: quote across the top, then the mark and the attribution on one line,
   mark first. That is the client's "a call ringing in the bottom left",
   built so it can never collide with the words next to it. */
/* kills the old padding-left:2.4rem, which existed only to clear an
   absolutely positioned mark that is no longer absolutely positioned. */

/* --- 5. CARD TWO, THE PATIENT ---------------------------------------------
   The most personal register gets the least packaging: no fill, no border, no
   corners, no shadow, no padding. Words on the paper.
   The bubble LEADS, above the quote, rather than sitting in the bottom corner
   of a box that does not exist: the speech happens, then you read what was
   said. Third distinct placement in a row of three. */

/* --- 6. CARD THREE, THE INSTITUTION ---------------------------------------
   Narrowest measure, no surface, and the one card that hangs from the floor
   of the row instead of its ceiling. `align-self:end` and not a margin or a
   transform: it needs no clamp, no breakpoint, no mobile reset, it scales
   itself against whatever the tallest card turns out to be, and it collapses
   to nothing automatically in a single column grid where every item has its
   own row track. A hover translateY would also have overwritten a transform
   offset; align-self cannot be clobbered.
   This is deliberately NOT a third monotonic ramp. Widths descend 1, 2, 3 but
   vertically cards one and two share a top line and only card three drops, so
   the row rags instead of forming a tidy diagonal wedge.
   The mark sits under the attribution, right aligned: it reads as a stamp on
   the record, and in the narrowest track it never competes with the longest
   attribution in the row for horizontal space. */

/* --- 7. VOICE -------------------------------------------------------------
   The two supporting voices are sized once, here. Type is the last channel
   where the row could still speak at one volume, and it is the only channel
   of dominance that survives 390, where the measure ramp and the vertical
   drop both collapse to nothing. */

/* The dominant voice, and it is the card with NO box. Rule 21, true and
   specific: this is the only quote in the row that names a disease, a count
   and a failure it corrects, and cardiac amyloidosis is the underdiagnosed
   condition an advanced heart failure practice exists to catch. It is also
   the card that has NOT already been handed the widest track, the top of the
   row and the only lifting surface, so voice is set against measure instead
   of stacking a fourth advantage on the same tile.
   The clamp caps at 1193px, where .sec-inner stops growing, so the type stops
   when its track does. 24.96px at 1440 and 1200, 24.03px at 1024, 21.6px at
   390, against 18.08px for the other two. It cannot compete with the navy
   lead quote above it: that is Cabinet Grotesk 800 at up to 41.6px reversed
   on navy, this is Satoshi 500 on paper.
   The mark does NOT grow with it. The dominance is carried by the quote, not
   by the illustration. */

/* --- 8. MOBILE ------------------------------------------------------------
   Below 901px the ramp would put the narrowest track under about 200px, where
   a 45 character tracked-caps attribution runs to three lines. Rule 14: the
   fix for a grid running out of room is fewer items with more room, never
   smaller items packed tighter. So the row stops being a row, at ONE
   breakpoint, with no second ratio anywhere in the file.
   The gap and the row's top margin match, so the band simply becomes the
   first item in an even column, which on a phone it honestly is. */
/* --- 9. THE ONE KEYFRAME --------------------------------------------------
   Two marks draw themselves; --len carries each path's own length so a single
   keyframe serves both. The word is 12 units (M10 14h12). The whiteboard
   polyline measures 19.14 units, so a 26 dasharray covers it with room to
   spare. Nothing hides at rest: --len is inert until a hover rule applies a
   dasharray, so on a touch device and under reduced motion both strokes are
   simply drawn. */
@keyframes vcDraw{from{stroke-dashoffset:var(--len,26);}to{stroke-dashoffset:0;}}

/* The ring arcs rest quieter than the handset they leave, so hover fades the
   sound IN rather than blinking it off and back. .5 and not something fainter
   because the parent mark already sits at .55, so the arcs composite to about
   .28 at rest: present on a touch screen, where no hover rule will ever fire,
   but clearly quieter than the handset. The stagger is a transition-delay, so
   it is reversible and leaves no state; --d comes from the markup on the outer
   arc and falls back to 0ms on the inner one. */

/* --- 10. HOVER ------------------------------------------------------------
   One response, played once. One duration token, var(--t-slow), and one
   curve, var(--ease-snap), on every channel in the section. No loop, no
   `forwards`, no retained state, no `border-color` (the section's only hover
   colour that was not the crimson the palette reserves for engagement), and
   deliberately NOTHING on the cards that are not hovered: a sibling dim would
   let a pointer temporarily overwrite the permanent hierarchy the measures,
   surfaces and type sizes build, and with a gap this wide it would flicker as
   the cursor crossed the row. The others hold still. Do not add it back.

   Block A is colour and opacity only, so it is safe under reduced motion. It
   also neutralises the older hover rules for anyone who has not applied the
   deletions yet. */
/* Block B is the motion, gated so a reduced-motion visitor never sees any of
   it and never needs an override to undo it. Each gesture ends on the value
   its element rests at, so removal at gesture end is seamless in both
   directions and nothing is left pinned. */
/* --- 11. REDUCED MOTION ---------------------------------------------------
   Belt and braces. Block B above already cannot match, so this exists only to
   cancel anything the older #voices block still applies if the deletions have
   not been made. Everything rests fully drawn and still. */
/* ============================================================================
   STORIES 04, CLIENT CORRECTION (2026-08-13).
   The previous pass gave each quote its own surface, its own type size and its
   own mark placement, to answer the "three identical cards" rule. Read cold it
   did not say "three registers", it said "one of these is broken". The client
   is the arbiter, so the three become one family again:
     one surface, one type size, one mark relationship, one hover.
   The asymmetry that survives is the kind that reads as layout rather than as
   error: the measures still run 5.5 : 4 : 3.5, and each mark still encodes its
   own sentence. That keeps this off the "three perfectly symmetrical cards"
   pattern without any card looking like a mistake.
   ============================================================================ */

/* one surface for all three */

/* one type size */

/* one mark relationship: beside the attribution, at the foot of every card */

/* one hover, on all three */
/* The envelope moves inside the form, between the address field and the button,
   so the sealing animation reads as what happens to what you just typed. It is
   already wired: the letter drops in, the flap closes, the wax heart stamps, on
   section reveal and again on focus-within. Sized to the control height so the
   row still reads as one control. */
/* Stories 06: the letter photograph becomes the section's own ground rather
   than a framed plate beside the copy. No filter over it, per the standing
   rule: it is sized to the band and the copy keeps the left half, which the
   photograph left empty anyway. */
/* panned so the plain envelope and wax seal sit under the copy and the
   handwriting stays clear on the right */
/* The photograph is cream, so legibility comes from inking the type down
   rather than washing the picture: the deck takes full ink and the quiet
   link takes crimson-deep. No filter anywhere over the image. */

/* ============================================================================
   STORIES 04 (#voices), FINAL PASS. Five declarations and one changed value.
   Subtraction only: no new element, no new line, no new colour, no new motion,
   no new token, no HTML change. Appended last, so it wins on source order.
   The three cards stay one family: every rule below applies to all three.

   Dead after this, safe to delete whenever (the render is identical either
   way): 2148, 3785, 3786, 3808 (keep the byte identical 4019), 3809-3813,
   3840, 3871, 3872, 3879-3880, 4001. Also delete the stale prose at 3719-3725
   ("WHAT LEAVES", now false on four counts), 3780-3781 (argues for the ragged
   bottom edge that item 3 removes) and 3853-3866 (the hanging card and the
   right aligned stamp, both already killed by the client correction).
   KEEP: 3908 (the max-width:900 single column switch, which is what makes
   item 3 self cancel on a phone) and 3994 (align-items:center, which centres a
   one line credential against the 30px mark).
   ============================================================================ */

/* 1. The row stops colliding with the band. The old 22.4px was smaller than
   the cards' own 1.5rem padding and smaller than the band's 26px radius, so it
   read as contact rather than as a gap, which is why the row looked like a
   footnote hanging off the band instead of its answer. 1.6rem floor equals the
   max-width:900 gap and margin, so phones are unchanged. */

/* 2. The foot uses the site's own step instead of a private clamp. #voices to
   #share is the one seam on this page with no colour edge, and #share already
   pays a full var(--space) for it, so this section was paying twice. Measured
   at all twelve widths in both motion states, band-to-row < h2-to-band < foot
   still holds, so the foot stays the section's largest gap and nothing reads
   clipped. */
#voices .sec-inner{padding-bottom:var(--space-tight);}

/* 3. The row becomes one object. It was never small (at 1024 it is already
   taller than the band), it was ragged: three bottom edges 36 to 111px apart
   under a band that is one hard rectangle. stretch gives a shared bottom edge
   and adds ZERO height, since each card only grows to the height the row
   already occupied; space-between then pins every quote to a shared top line
   and every mark plus credential to a shared foot line. Below 901px each card
   owns its own track, so this self cancels and needs no media query.
   The selector list mirrors the correction block's own four selectors so no
   card can be reached by a rule the other two are not. */

/* 4. The credential is a caption, not a paragraph. It is the only variable in
   the card (all three quotes are 75 to 76 characters), and the 45 character
   one landed in the narrowest track, where var(--trk-caps) ran it to four
   lines at 1024 and five at 901. .08em is not a magic number: it is what
   .pg-stories .vidcard__outlet (line 1446) already uses, the micro caps label
   in the section directly above this one. 1.35 is caps leading rather than
   body leading, so a two line credential is 32.8px against the 30px mark
   beside it and the pair reads as one object.
   Do NOT "restore the token" here: var(--trk-caps-tight) was tested and puts
   card three back to three lines at 1200 and four at 960. */

/* 5. Every mark lands on the same foot line. A no-op wherever the credential
   is one line, because the 30px mark is then the taller item and defines the
   row; it only fires where a credential wraps, and it is what keeps the shared
   foot line true whatever credential gets written later. Measured: the mark
   sits 22.59px off the card foot on all three cards at all twelve widths, in
   both motion states. */

/* 6. The hover matches every other card on the site. .rb-card (487), .navcard
   (1408), .medcard (1420), .vidcard (1448) and .presscard (1629) all lift 3px;
   #voices was the only family lifting 4px, and .vidcard is the section
   directly above it. Same selector as line 4023, so this wins on source order.
   Better: change the 4 to a 3 at line 4023 and delete this rule. Nothing else
   about the hover changes, and gold-hair stays, because it is the site's card
   convention. */
/* The envelope lifts out of the control row and straddles the seam between the
   field and the button, sitting ON them rather than beside them, and roughly
   doubles in size. The form keeps its two real controls in one line; the mark
   is taken out of flow so it cannot push them apart, and it is click-through so
   it never eats a tap meant for the button. */
@media(max-width:560px){
      /* stacked, the seam is horizontal, so the mark straddles that instead */
  }

/* The envelope lifts out of the control row and straddles the seam between the
   field and the button, sitting ON them rather than beside them, and roughly
   doubles in size. The form keeps its two real controls in one line; the mark
   is taken out of flow so it cannot push them apart, and it is click-through so
   it never eats a tap meant for the button. */
@media(max-width:560px){
      /* stacked, the seam is horizontal, so the mark straddles that instead */
  }

/* The mark was merging because its strokes are paper-2 and it was sitting over
   the paper-2 button. It now RISES above the control row: anchored to the seam
   horizontally, its foot overlapping the top of the two controls by a hair so
   it still reads as belonging to them, its body over the plain band where
   nothing competes with it. Much larger, and click-through as before. */
/* room above the form for it to stand in */
/* Stories 06, client direction: the letter photograph is busy and pale, so the
   type stops fighting it and inverts against it instead. White text in
   difference blend renders as the exact inverse of whatever pixel is behind it,
   so it darkens over the pale paper and lightens over the wax seal and the
   shadowed folds, staying legible across the whole frame with no filter added
   to the picture. The crimson word is deliberately OUTSIDE the blended span so
   it keeps its brand colour, which is why the heading is split in the markup.
   .sec-inner drops its z-index so it no longer forms a stacking context; that
   is what lets the type blend with the photograph rather than with nothing. */
/* the button and the quiet link keep their own colours and never blend */
/* Speaking 06: the close sits on left aligned copy, so its folio and rule sit
   left too. The centred variant was the odd one out on this page. */

/* The redrawn figure is portrait where the old one was square, so it is sized
   by HEIGHT against the band rather than by width; that way it always stands
   inside the navy no matter how the lead quote wraps. */

/* Aligned to the seam itself rather than to a guessed offset from the right
   edge: the mark becomes a zero-width flex item sitting between the field and
   the button, so it is centred on the real join at every width whatever the
   button measures. It stretches to the row height, and the drawing hangs fully
   ABOVE that row with a 6px gap, so it no longer touches the subscribe button
   at all. Still click-through, still out of flow for the two real controls. */
@media(max-width:560px){
  /* stacked, there is no vertical seam, so it centres over the whole control */
      }

/* Bigger, and shifted left off the seam. It stays anchored to the join between
   the two controls, so it still tracks the real divide at any width, but the
   drawing now hangs to the LEFT of that anchor rather than centred on it, which
   puts it over the address field near the divide instead of out at the right
   edge. Still above the row, still click-through. */
/* Stacked, the mark hangs above the form and was reaching into the pitch copy,
   so it comes down in size and the action column takes enough head room to hold
   it. Measured: needs about 108px of clearance, gets 128. */
/* Home hero ground: the generated navy plate. It sits at the very back of the
   section, which starts at y=0, so it runs the full viewport and continues
   behind the fixed nav rather than starting under it. Measured on the plate:
   the left 45 percent reads 16.79:1 against ivory, so the copy needs no pad and
   the section's own lit ramp comes off, otherwise it fights the plate's light. */
body.pg-home #top{background:var(--navy-ground);}
/* NOTE: .phero__plate is already taken at line 311 by the framed-plate hero,
   which carries aspect-ratio:4/5. Reusing that name gave this layer a 0.8
   aspect and it overflowed the section by 960px. Hence .phero__ground. */
body.pg-home #top .phero__ground{position:absolute;inset:0;z-index:0;overflow:hidden;
  aspect-ratio:auto;border-radius:0;box-shadow:none;}
body.pg-home #top .phero__ground img{width:100%;height:100%;object-fit:cover;object-position:center center;max-width:none;}
/* the cutout and the copy both stand in front of the plate */
body.pg-home #top .phero__bg{z-index:2;}
body.pg-home #top .sec-inner{position:relative;z-index:3;}
/* the plate is the light source now, so no copy pad is needed over it */
@media(min-width:901px){body.pg-home #top .sec-inner::after{display:none;}}

/* The shared cutout rule drops the figure in at top:104px, which clears the nav
   at 1440 by 11px but sits 11px BEHIND it at 1200 and 1024, where the nav is
   taller. The home figure starts lower and loses the same amount of height, so
   his head clears the bar at every desktop width. */
@media(min-width:901px){
  body.pg-home #top .phero__bg{--fig-h:calc(var(--hero-h) - 142px);top:142px;}
}

/* Home hero, client direction: remove the drifting circle. That is the ECG ring
   on .phero__deco::before, and the heart engraving rides the same parallax
   layer, so both go and the element itself is removed from the markup. Measured
   before removing: the ring covered 277x302 at peak delta 33, the engraving
   355x590 at peak delta 40, together 3.16 percent of the hero. Both were drawn
   for a flat navy field. The ground is a photograph now, so a translucent brand
   overlay drifting across it is ornament competing with the picture rather than
   supporting it. Every other hero keeps its deco untouched. */

/* J1 (round 6, lead): the ground plate (hero-home-plate-v1.webp, deliberate
   art, never swapped) carries its own ECG strip, drawn from the far left into
   the pump on the engraving. Under the copy column its spikes crossed the lede
   and the quiet links. A navy scrim over the LEFT of the plate fades the strip
   out behind the copy, so it now reads as coming out of the dark into the
   pump, while the heart, the vessels and the pump stay at full strength. A
   gradient across the whole plate, so it never shows as a box (a padded box
   behind the CTA row was tried and read as a dark slab at 1200). */
@media(min-width:901px){
  body.pg-home #top .phero__ground::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,
      rgb(var(--navy-ground-rgb) / .94) 0%,
      rgb(var(--navy-ground-rgb) / .9) 30%,
      rgb(var(--navy-ground-rgb) / .55) 44%,
      rgb(var(--navy-ground-rgb) / 0) 56%);
  }
}

/* The figure is height bound, not width bound: its width is fig-h x cut-ar, and
   the width clamp still has 300px of headroom at 1440. So the only lever that
   makes him larger while the crop shows more body is hero height. The 820px cap
   was leaving 80px of viewport unused on a 900px screen. Home only; every other
   hero keeps the 820 cap, and short viewports are unaffected because 100svh
   still wins there. */
body.pg-home #top{--hero-h:min(100svh,900px);}

/* Home hero: the figure centres in the band between where the headline's INK
   ends and the right edge of the section. Not between the copy COLUMN and the
   edge, which is the tempting pure-CSS version and is wrong: the headline is
   capped at 16ch and wraps ragged, so its ink stops up to 120px short of its own
   column, and the two centres differ by 26px at 1440 and 60px at 1600. That left
   edge moves with the line breaks, so it cannot be expressed in CSS at all and is
   measured at runtime into --fig-right. The static value here is the no-JS
   fallback and the pre-measure position. Only the figure moves, and it is
   absolutely positioned, so nothing else reflows. Desktop only: below 901px the
   figure is a flow item and must keep right:auto from the stacking rule. */
@media(min-width:901px){
  body.pg-home #top .phero__bg{
    right:var(--fig-right, max(clamp(6px,1.6vw,30px),calc((100% - 1500px) * .42)));}
}

/* Stories 04 lead mark: the client supplied their own continuous-line drawing
   of an adult and a child sitting together, seen from behind, and asked for it
   in the navy card's colour. It is their artwork traced to vector with potrace,
   not a redraw: seven of mine were drawn and judged first and three cold readers
   who were told nothing rejected every one, all for the same reason, that at
   250px and 55% opacity there is no detail budget for hands or a child's face.
   Tracing sidesteps that entirely. Checked before tracing: the source is a
   single connected ink blob, which confirms it really is one unbroken line, and
   it carries no watermark. Fidelity was measured, not eyeballed: rasterised back
   and compared to the source it scores IoU 0.849 at full size and 1.6% mean
   error at the size it actually renders, which is where three heavier settings
   were within 0.2% and not worth 8KB.

   potrace follows the EDGE of the ink, so every stroke arrives as a closed
   outline. That is what preserves the drawing's own line-weight variation
   instead of flattening it to one constant width, but it means colour comes
   from fill, and the stroke rules above have to be switched off or each outline
   gains a 2.4-unit halo. Same ivory, same 55% opacity, as the mark it replaces. */
/* Landscape 1.6:1 where the old mark was portrait, so it is measured by WIDTH
   against the band. Left on the height rule it would render 400px wide and
   close the gap to the quote. */
/* Keyed to the BAND, not the viewport: at 24vw the type crossed the mark by 4 to
   7px at every width below 1440, because the band narrows faster than the
   viewport does. As a percentage of the band the clearance holds everywhere. */

/* Patient Care hero ground. Same layer pattern as the home hero, written out
   again for this page rather than shared: .phero__ground has to override the
   framed-plate component that owns .phero__plate at line 311, including its
   aspect-ratio:4/5, and doing that from a page-scoped selector is what keeps
   the two heroes independent.

   The flat clinical gradient above stays as the fallback under the image, so a
   slow or failed load still gives navy rather than a white flash. No scrim and
   no filter over the picture: the plate was generated with its left 45 percent
   already dark enough to carry ivory type, which is the whole reason the prompt
   specified that zone.

   The live ECG keeps its own z-index 0 and sits later in the DOM, so it paints
   OVER the plate, which is the intended reading: the trace is the page's, the
   study behind it is the plate's. */

/* The mirror is gone. It existed because v1 massed the whole study on the right,
   where the cutout stood in front of it, and flipping was the cheapest way to make
   the artwork visible. v2 is composed against the measured silhouette instead: the
   study spreads wide enough to show in the corridor at x 42-56 percent and again
   past his shoulder at x 81-100 percent, with only faint arcs, margin ticks and
   vessel filaments on the left where the copy sits. So it is used the right way
   round, as drawn. */

/* ACRYLIC FROST AROUND THE CUTOUT
   The previous approach put blurred copies of HIM behind himself. That is a
   bloom: it adds his own light outward, and it reads as a lighting effect, not
   as blur. Acrylic is the opposite operation. It blurs the BACKGROUND, so the
   plate goes soft right where it meets his edge and sharpens again a little way
   out, and he reads as set into the surface rather than lit in front of it.

   Mechanism: a pane with backdrop-filter, masked by a feathered copy of his own
   alpha. The mask is solid well inside the silhouette and fades out over about
   34 CSS px, so the solid part is hidden behind him and what you see is the
   ring. The masks are generated per page from each cutout, with the blur radius
   divided by the scale that cutout renders at (home .4331, care .3024), so the
   band is the same visual width on both rather than the same source pixels.

   The pane must NOT live inside .phero__bg. That element is transformed for the
   parallax, and a transform makes it the backdrop root for its descendants, so
   a pane inside it would sample an empty backdrop and blur nothing. It is a
   sibling instead, and its geometry duplicates .phero__bg's exactly, including
   --fig-right on the home page, or the mask drifts off the silhouette.

   mask-size:contain with right/bottom anchoring matches object-fit:contain with
   object-position:right bottom, which is how the figure itself is laid out. */
/* below 901 the figure is a centred flow item, so the pane would have to track
   it through a different layout; the effect is not worth that on a phone */
/* ============================================================
   EXIT INTENT OVERLAY (.xi), built by the last module in fable.js
   A navy glass panel covering almost the whole screen. The band of
   site left visible around it drains to black and white.
   ============================================================ */

/* the site behind loses its colour, and dims a touch so the panel leads */

/* Promoted to the glass-3 + glass--crimson material (spec section 2, exit
   intent overlay change 1: the instant the popup opens the site behind it
   drains to black and white, and this panel is the one surface still lit
   by crimson, the only saturated color left on screen). fable.js adds
   "glass-3 glass--crimson" to this element's class list; those two shared
   classes now supply the background, border, box-shadow, backdrop-filter
   and grain that used to be one-off here, so only layout, color and the
   open/close transition stay local to .xi__panel. */
/* Smoked glass: the crimson light sits over a near-opaque navy pane. glass-3's
   white tint alone is see-through, and over a light page (drained to grey) the
   copy became unreadable, so the pane keeps its own dark base on every page. */

/* ---- copy column ---- */
/* close: a glass disc with a drawn X */

/* ---- art column: the four real lessons, fanned as glass cards over a trace ---- */
/* the fifth, front-most card: a small drawn quotation mark in place of the
   "Lesson 0X" numeral, and an attribution in place of a read-time meta
   line (spec section 2, exit intent overlay change 2). Same --quote-mark
   glyph as .quote-plate, recolored for this card's own crimson-lit glass. */
/* ============================================================
   DARK-READY COMPONENT PASS (spec section 6.4, foundation builder's job)
   Page builders are about to flip many currently-light sections to
   ".sec-dark on-dark" (spec 6.2's surface table). Every rule below makes
   one component render correctly on navy, with NO page-specific patch
   required from whoever does that flip. Placed at the very end of the
   file on purpose: several of these override an existing same-specificity
   rule defined earlier (a card's own light background, an id-scoped
   label color), and for two selectors of equal specificity, CSS gives
   the win to whichever is declared LAST, so this section's position is
   load-bearing, not cosmetic. Cards become glass (glass-1 for small
   cards and list rows, glass-2 for feature panels), per 6.2.
   The single biggest lever already lives above, right after :root:
   ".sec-dark,.on-dark{--hair:var(--hair-inv);...}" repaints every
   hairline-bordered divider (.qa, .speak__li, .engage__row, .work__item,
   .plist, and anything not yet written) the moment it lands on navy.
   Everything below is what that alias alone cannot reach: card fills,
   and a few id-scoped light-only colors that predate this pass.
   ============================================================ */

/* ---- bento / index-card family: become glass-1 on dark. The bespoke
   always-dark .rb-card--feature tile keeps its own glow-grad recipe
   untouched, it never needs this. ---- */
/* the id-scoped icon color predates this pass and was tuned for the
   light #explore this section used to be; a higher-specificity dark
   variant is needed since an equal-or-lower one cannot win against it */
/* .sec-dark/.on-dark live on the ancestor <section>, never on the card
   itself, so the fix has to be a descendant selector, not a chained one;
   the extra body.pg-media prefix is what out-specifies the existing
   plain "body.pg-media .medcard__outlet" rule this replaces on dark. */


/* ---- the work picker's detail panel: already always-dark (a bespoke
   navy glow card independent of its section), spec 6.2 calls for
   glass-2 specifically once the section around it is ALSO navy, so it
   still reads as a distinct floating object rather than navy-on-navy. ---- */
/* the picker list itself: item text and hairlines (the hairline is
   already covered by the --hair alias above) */
/* ---- generic list-card materials: .progs (Mid-South hospital directory)
   already has bespoke page-scoped dark rules for #access/#programs; this
   is the fallback for any OTHER place .progs lands on navy. ---- */

/* ---- .prow expandable rows (research #publications/#questions, about
   #leadership): text colors already dark-ready; the go-arrow was still
   plain --crimson, too low contrast against navy, and .plist's own
   border is covered by the --hair alias. ---- */

/* ---- .qa accordion (FAQ): border already covered by the --hair alias
   above; text and the plus/minus icon still need a dark pass. ---- */

/* ---- .trial-grp cards (research #trials): stays light sitewide per
   spec 6.2, this is defensive coverage only, in case a future page
   reuses the component on navy. ---- */
.sec-dark .trial-hd b,.on-dark .trial-hd b {color:var(--paper);-webkit-text-fill-color:var(--paper);}
.sec-dark .trial-d,.on-dark .trial-d{color:var(--on-dark-soft);}

/* ---- .pubs (research #publications' old plain list, being replaced by
   .prow per spec section 2, kept here only so nothing goes unstyled
   during that page's own build). .pub-t/.pub-j pin an explicit ink color
   rather than inheriting, so on navy they rendered as near-invisible
   dark-on-dark text, confirmed by building a temporary dark test copy
   of this page and screenshotting it, per this pass's own method. ---- */
.sec-dark .pubs li,.on-dark .pubs li{border-top-color:var(--hair-inv);}
.sec-dark .pub-t,.on-dark .pub-t{color:var(--paper);}
.sec-dark .pub-j,.on-dark .pub-j{color:var(--on-dark-soft);}

/* ---- .rareas (research #areas' current pill-tag list, same "pins an
   explicit ink color, invisible on navy" pattern as .pubs above; being
   replaced with plain .row-light rows per spec section 2, kept here so
   nothing goes unstyled in the interim). ---- */
/* ---- index.html #contact (the crimson-adjacent "one sentence, one
   button" band) moves to navy per 6.2; .contact__meta pins an explicit
   ink color the same way #stories' background did above, confirmed the
   same way (temporary dark test copy, screenshot). ---- */

/* ---- media.html #reach (the two big follower/view numerals) moves to
   navy per 6.2; .reachfig__n/__k and this section's .creed__body all
   pin an explicit ink color the same way. ---- */
/* .medcard stays light sitewide per 6.2 (#articles L); this is the same
   defensive-only coverage as the rest of the .medcard family above. */

/* ---- research.html #research's citation sparkline: moves to navy per
   6.2 ("N, glass"). .research__spark-k pins --gold-deep (now steel navy,
   dark-on-dark); .cc-axis-k's two existing page-scoped AA fixes both pin
   --ink-soft (also dark-on-dark). All three need a body-element-scoped
   selector to out-specify those existing "body.pg-research ..." rules,
   an id always outranking classes would not apply here since none of
   these use an id, but the existing rules DO include the body element,
   so ours must too. Confirmed the same way as the rest of this pass. ---- */

/* ---- about.html's training timeline (.jsteps, under the journey strip
   illustration): "Trained where the hardest referrals end up" moves to
   navy per 6.2. .zig__n and .jsteps p both pin an explicit ink color;
   .jsteps h3 already inherits correctly and needs nothing. ---- */

/* ---- speaking.html talk topics (.speak__li), moving from light to
   navy per 6.2. Hairline already covered by the alias. ---- */
/* ---- speaking.html #engagements rows (.engage__row): stays light per
   6.2, defensive coverage only. ---- */

/* ---- contact form (.cform), for contact.html's #contact once it flips
   to navy per 6.2. Mechanism and validation are untouched; only the
   field chrome changes. Selectors keep the existing "#contact .cform"
   rules' id, since an id always outranks any number of classes: a plain
   ".sec-dark .cform" here would silently lose to that rule forever. ---- */
#contact.sec-dark .cform,#contact.on-dark .cform{background:var(--glass-1-bg);border:var(--glass-1-border);
  box-shadow:var(--glass-1-edge),var(--glass-1-shadow);-webkit-backdrop-filter:var(--glass-1-filter);backdrop-filter:var(--glass-1-filter);}
#contact.sec-dark .cform__lab,#contact.on-dark .cform__lab{color:var(--on-dark-soft);}
#contact.sec-dark .cform__in,#contact.on-dark .cform__in{background:rgb(var(--glass-tint-rgb) / .06);border-color:rgb(var(--glass-tint-rgb) / .18);color:var(--paper);}
#contact.sec-dark .cform__in::placeholder,#contact.on-dark .cform__in::placeholder{color:var(--on-dark-faint);}
#contact.sec-dark .cform__caret,#contact.on-dark .cform__caret{border-color:var(--on-dark-soft);}
#contact.sec-dark .cform__ok,#contact.on-dark .cform__ok{color:var(--on-dark-soft);}
#contact.sec-dark .cform__ok.is-ok,#contact.on-dark .cform__ok.is-ok{color:var(--gold-soft);}
#contact.sec-dark .cform__ok.is-err,#contact.on-dark .cform__ok.is-err{color:#F09399;}

/* ---- newsletter form fields, every .nl.sec-crimson block (spec 1.5):
   glass-1 by default, one tier deeper (glass-2) on newsletter.html's own
   #signup, the site's actual destination. Mechanism, the Listmonk
   binding, and the pitch copy are untouched; only the field material
   changes, and only via CSS, no markup edit needed on any page. ---- */

/* ============================================================
   FOLDED IN FROM assets/css/structural-a.css (step 9, foundation build).
   Builder-A's structural pass for mission.html, learn.html, index.html.
   Content byte-identical to the standalone file it replaces; only this
   banner and the <link> tags that loaded it separately are gone.
   ============================================================ */

/* ---------- MISSION: hero statement headline (section 1) ----------
   .phero__title's base rule (fable.css:305) caps max-width at 20ch and
   sizes for a short headline. The mission statement is a ~45 word
   paragraph standing in as the H1, so it needs its own width and a
   smaller, denser display size while still reading as the loudest
   thing on the page. The four <em>yes</em> words already inherit the
   crimson gradient from fable.css:1193 (.phero__title em), confirmed
   by reading that rule; nothing new is needed for that accent. */
body.pg-mission .phero__title--statement{
  max-width:none;
  font-size:clamp(1.9rem,3.1vw,3.3rem);
  line-height:1.14;
  letter-spacing:-.01em;
}
@media(max-width:600px){
  body.pg-mission .phero__title--statement{font-size:clamp(1.7rem,6vw,2.1rem);}
}

/* ---------- MISSION: #principles, two closing vision lines ----------
   Side by side on desktop, stacked on mobile. Sized off .lead-stmt
   (fable.css:317, --t-h2 clamp(2.2rem,1.55rem + 2.6vw,3.5rem)) but a
   touch smaller so two statements sit comfortably in one row. Color
   and the em accent both come from the existing .sec-dark/.on-dark
   and .lead-stmt em rules (fable.css:226, 1204); no color is set here. */
/* ---------- LEARN: #turning (moved here from mission.html) ----------
   The .mssn-figsec/__grid/__copy/__fig rules that gave this section its
   two-column copy + framed-portrait layout are scoped to body.pg-mission
   only (fable.css:1338-1345, 1576-1578, 1663; grepped "pg-mission" and
   "mssn-figsec"). On learn.html (body.pg-learn) none of those rules
   match, so the layout is re-created here, scoped to .pg-learn #turning
   only. #turning has no .mssn-figsec__ambient/.story__veil element (that
   pair belongs only to mission's #leadership), so those rules are not
   needed here. The section is always rendered "reversed" (figure left,
   copy right) here, so the order/justify-self flip is baked straight
   into the base rule instead of a separate .mssn-figsec--rev selector. */
/* ---------- INDEX: #explore, five navcards without a grid hole ----------
   .navcards' base rule (fable.css:1402) is repeat(3,1fr), which leaves an
   empty cell when the Patient Care/Patient Stories merge drops the grid
   from six cards to five. Scoped to #explore only: six virtual columns,
   the first three (row 1) span 2 each, the last two (row 2) span 3 each,
   so both rows fill edge to edge with no gap. Below 860px the shared
   .navcards rule already steps to 1fr 1fr, then 1fr at <=560px; that is
   left alone and simply overridden back to one column here for phones,
   matching the brief. */
/* ============================================================
   FOLDED IN FROM assets/css/for-patients.css (step 9, foundation build).
   Structural-phase merger of stories.html + care.html. This page reuses
   fable.css's existing components as-is: the only fixes below are for
   spots where moving content would otherwise render broken or orphaned,
   plus the .is-locked settle folded in above with the rest of --ease's
   four sitewide moments. Body keeps class="pg-stories pg-patients":
   fable.css's own .pg-stories rules (vidlib/vidcard/pressrow/
   transformation) already do everything #videos, #transformation and
   #share need, so nothing is duplicated here. No .pg-care rule is
   needed: every .pg-care selector in fable.css targets care's own #top
   hero and phero__monitor, which this page does not use.
   ============================================================ */

/* ---------------------------------------------------------------------
   1. #voices, trimmed to one row card.
   The ICU nurse and chief medical officer cards are cut, so .voices__row
   now holds a single .voice--card. The base rule (fable.css) sets
   grid-template-columns:minmax(0,5.5fr) minmax(0,4fr) minmax(0,3.5fr),
   a three-track ratio built for three siblings: with one child that
   leaves two empty tracks beside it, an orphan column. Collapse to one
   track and cap its width so the lone card reads as one intentional
   quote, not a stretched full-width banner. --------------------------- */

/* ---------------------------------------------------------------------
   2. #programs, merged with mission.html #access's named hospital map.
   Every rule below is copied from fable.css's "body.pg-mission #access"
   block (the .progs stagger-reveal, the 3x2 hospital grid, the .midso
   split layout, and the map's draw-in and hover/lock interactions) and
   re-scoped to ".pg-patients #programs", since this map now lives in
   #programs, not #access, and this is not the mission page.

   Colour-only change from the original: on mission.html this map sits on
   a light sec-paper-2 ground, so its bare SVG land shapes, state labels
   and city labels are drawn in ink-based tones (ink-faint, ink). Here it
   sits on #programs' dark navy ground (sec-dark on-dark), so those same
   elements swap to their on-dark equivalents (paper, gold-soft,
   crimson-bright) at the same opacities, the way fable.css's own
   ".sec-dark .care-net .dr-soft" already swaps that figure's ink-faint
   line to a paper-based one for the same dark section. The hospital list's
   .progs__n / .progs__k DID carry hardcoded light-ground ink colours here
   (a leftover from before this map moved onto a dark ground) and read as
   washed out on navy; fixed to the same on-dark tokens the rest of this
   file already uses for this pair (--on-dark-faint / --gold-soft).
   ------------------------ */

/* -- the hospital directory: sequential reveal + hover hairline -- */
/* six hospitals read as one intentional 3x2 block, not a 5-plus-1 orphan row */
/* -- the split layout: hospital list beside the map -- */

/* -- the map itself: on-dark colours for the elements drawn straight on the section ground -- */


/* -- draw-in on scroll (mirrors the mission page's #access.is-in mechanism) -- */

/* -- hover/lock highlight, coupled to fable.js's #midso row<->pin logic -- */

/* -- locked pin settle (spec 1.2 item 4, one of --ease's four sitewide
   moments): a click commits a pin, not only a hover, and earns a small
   scale(1.12) spring settle. Selector matches the existing reveal-in
   rule's own prefix plus .is-locked, so it wins on specificity, not
   source order, regardless of where either rule ends up in the file. -- */
/* Round 6 (lead): at 1024 the nav wrapped "For Patients", "Heart School" and the
   "Work with Dmitry" button onto two lines. Labels never wrap; between the drawer
   breakpoint and 1240 the gaps and type tighten so all six links and the button
   sit on one row. */
/* ============================================================
   BGPHOTO: full bleed real photograph section ground (REQUIREMENTS
   K1 to K3, 2026-10-01). Dev: "use images as a full background
   picture like it was in the hero sections, go through the folder
   and choose the best suitable images." Modelled on the home
   hero's own ground plate (body.pg-home #top .phero__ground,
   above): a real photo at the very back of the section, a navy
   scrim strong enough that light text clears contrast, content in
   its own stacking layer above both. Unlike that hero-only rule
   this one is a reusable component. The picks, the exact markup
   per section, the component reference and a rejected list all
   live in DMITRY-REDESIGN-2026-09/92-PHOTO-PLAN.md.

   Quick start, placed as the FIRST child of a section, which also
   carries the has-bgphoto class:

   <div class="bgphoto bgphoto--scrim-left" aria-hidden="true"
        style="--bg-pos:62% 35%;--bg-pos-m:50% 25%">
     <img src="assets/images/bg/X.webp"
          srcset="assets/images/bg/X-m.webp 900w, assets/images/bg/X.webp 2400w"
          sizes="100vw" width="W" height="H" alt="" loading="lazy" decoding="async">
   </div>

   Everything above this comment is untouched; this section is
   append only. */

.bgphoto{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.bgphoto img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--bg-pos,50% 50%);transform:scale(1);transform-origin:var(--drift-origin,50% 50%);will-change:transform;}
.bgphoto::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;}

/* The scrim: navy (--navy-ground), sampled on the actual exported
   photos until body text clears 4.5:1 and headings clear 3:1
   wherever the real copy sits (92-PHOTO-PLAN.md records the
   sampled values per section). Pick exactly one.

   The strong, near-opaque band runs all the way to 46 to 48 percent
   on purpose: a copy column is typically 44 to 50 percent of the
   section width (phero__copy, lab test on 2026-10-01 against real
   body-weight text caught the first, narrower version of this
   gradient fading out mid column, under a building photo, well
   before 4.5:1). Past that the photo is the point, and the scrim
   drops away over a short, soft run rather than a hard edge. */

/* Optional soft crimson light at one edge, additive on top of a
   scrim modifier, never used on its own, and never a line: a wide
   soft radial, same family as the hero glow earlier in this file. */

/* The section itself: dark ground and light text as the fallback
   paint before the photo decodes (and if it never does), content
   stacks above both the photo and its scrim. Low specificity
   (:where) so a page's own section rule still wins the final
   background; this only guarantees the text colour contract and
   the stacking order hold even with no other CSS at all. */
:where(.has-bgphoto){position:relative;background-color:var(--navy-ground);color:var(--paper);}
.has-bgphoto > .sec-inner{position:relative;z-index:2;}

/* Slow, gentle scale drift, compositor only (transform alone, no
   top or left, no box-shadow or filter loop). Runs only while the
   element carries is-live, which this file's own IntersectionObserver
   (see fable.js) adds the instant the section is on screen and the
   tab is visible, and removes the instant either stops being true.
   Never present at all under reduced motion; without it, or before
   JS runs, the image already renders fully at scale(1), so nothing
   is ever blank or half shown. */
@media(prefers-reduced-motion:no-preference){
  .bgphoto.is-live img{animation:bgphoto-drift 20s ease-in-out infinite alternate;}
}
html.tab-hidden .bgphoto img{animation-play-state:paused;}
@keyframes bgphoto-drift{from{transform:scale(1);}to{transform:scale(1.06);}}

/* Phone default (K3): the photo sits behind the top of the section
   and the copy reads on a solid navy fade below it, whatever scrim
   modifier desktop picked. --bg-pos-m (falls back to --bg-pos) keeps
   the subject in frame at phone width. */

/* ============================================================
   SHARED CHROME PASS (REQUIREMENTS O, 2026-10-05). Everything below is the
   last word on the parts every page shares: the nav call to action, the
   footer, and the exit-intent overlay. Nothing earlier in this file was
   rewritten; these rules sit on top and win by order and, where
   motion-kit.css (which loads after this file) also styles the same node,
   by a higher selector.

   Dev's bar: no icon or glyph inside a circle, disc or ring used as art.
   So: social links are rounded-rectangle chips (12px, never round), the
   "back to top" ring becomes a pill with a drawn arrow and a progress fill,
   the overlay close button is a rounded square, and the two brand glyphs
   that carried their own disc (Facebook, Reddit) are redrawn without it.

   Motion rules: transform and opacity only, hover under (hover:hover) and
   (pointer:fine) with :focus-visible twins, the wordmark loop runs only
   while the footer is on screen (fable.js adds .is-live), everything
   resolves to its finished state under prefers-reduced-motion, nothing is
   blank without JS.
   ============================================================ */

/* ---------- 1. NAV CTA: the M2 button treatment (copied from kit4.css,
   scoped to .nav__cta so kit4.css never has to load) ---------- */
html .nav .nav__cta.nav__cta{
  border-radius:999px;
  background-image:linear-gradient(120deg,#E23A46 0%,#C0343C 60%,#A5202A 100%);
  box-shadow:0 0 0 1px rgb(var(--paper-rgb) / .26);
  transition:transform .32s var(--ease-snap),box-shadow .32s var(--ease-snap);
}
/* the luminous coral-rose highlight: its own layer behind the label, only its opacity moves */
html .nav .nav__cta.nav__cta::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:var(--grad-shine-dark);background-size:200% 100%;background-position:20% 0;
  box-shadow:0 1px 0 rgb(255 255 255 / .28) inset;
  opacity:0;transition:opacity .38s var(--ease-soft);
}
/* the glint: one band of light, one pass, on hover or keyboard focus */
html .nav .nav__cta.nav__cta::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgb(255 255 255 / .6) 48%,transparent 64%) 160% 0 / 260% 100% no-repeat;
  mix-blend-mode:screen;
}
/* motion-kit.js injects its own dwell glint into every .nav__cta; two glints would be noise */
.nav__cta .mkx-glint-clip{display:none;}
@media(hover:hover) and (pointer:fine){
  html .nav .nav__cta.nav__cta:hover{
    transform:translateY(-2px);
    box-shadow:0 1px 0 rgb(255 255 255 / .22) inset,0 0 0 1px rgb(255 143 107 / .5),0 16px 34px -14px rgb(226 58 70 / .78),0 0 40px -6px rgb(255 107 117 / .6);
    text-shadow:0 1px 2px rgb(110 10 22 / .5);
  }
  html .nav .nav__cta.nav__cta:hover::after{opacity:1;}
  html .nav .nav__cta.nav__cta:hover::before{animation:chromeGlint .85s var(--ease-snap) 1;}
}
html .nav .nav__cta.nav__cta:focus-visible{
  outline:2px solid var(--crimson-glow);outline-offset:3px;
  box-shadow:0 1px 0 rgb(255 255 255 / .22) inset,0 0 0 1px rgb(255 143 107 / .5),0 16px 34px -14px rgb(226 58 70 / .78),0 0 40px -6px rgb(255 107 117 / .6);
  text-shadow:0 1px 2px rgb(110 10 22 / .5);
}
html .nav .nav__cta.nav__cta:focus-visible::after{opacity:1;}
html .nav .nav__cta.nav__cta:active{transform:translateY(0);}

/* ---------- 2. FOOTER ---------- */

/* 2a. the wordmark: the M1 gradient across the whole phrase (Heart takes the
   first half of the gradient, Success the second, so it reads as one smooth
   run), one band of light sweeping through it the first time the footer
   arrives, then a slow lub-dub while it is on screen. */
/* 2b. the layout: brand and links on one row, the social chips on a full-width row below */

/* 2c. the links: three tidy columns, a gradient underline that draws in, a small slide */
/* 2d. the social links: refined rounded-rectangle chips, glyph plus platform name.
   The name is the link's own aria-label drawn by CSS, so no JS and nothing is blank
   without it. (.footer .footer__app out-ranks motion-kit.css's .mkx-social, which
   would otherwise turn the hovered chip into a circle.) */
/* Facebook and Reddit ship as a logo drawn ON a disc. Redrawn here without the disc:
   the "f" alone, and the Reddit alien alone, cut through a mask so they take the
   chip's text colour. Footer chips and the home newsletter chips share this. */
:is(.footer__app,.nl__social a)[aria-label="Facebook"] svg path,
:is(.footer__app,.nl__social a)[aria-label="Reddit"] svg path{display:none;}
:is(.footer__app,.nl__social a)[aria-label="Facebook"] svg,
:is(.footer__app,.nl__social a)[aria-label="Reddit"] svg{
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
:is(.footer__app,.nl__social a)[aria-label="Facebook"] svg{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 3.78 21 21'%3E%3Cpath d='M10.12 23.86V15.47H7.08V12h3.04V9.36c0-3 1.79-4.66 4.53-4.66 1.31 0 2.68.24 2.68.24v2.95H15.8c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.39z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 3.78 21 21'%3E%3Cpath d='M10.12 23.86V15.47H7.08V12h3.04V9.36c0-3 1.79-4.66 4.53-4.66 1.31 0 2.68.24 2.68.24v2.95H15.8c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.39z'/%3E%3C/svg%3E");
}
:is(.footer__app,.nl__social a)[aria-label="Reddit"] svg{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 1.1 20 20'%3E%3Cpath fill-rule='evenodd' d='M4.75 13.7a7.25 5.35 0 1 0 14.5 0a7.25 5.35 0 1 0-14.5 0zM8.14 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM13.54 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM9.62 15.45A3.3 3.3 0 0 0 14.38 15.45L13.84 15.45A2.8 2.8 0 0 1 10.16 15.45z'/%3E%3Ccircle cx='4.55' cy='13.9' r='1.95'/%3E%3Ccircle cx='19.45' cy='13.9' r='1.95'/%3E%3Cpath d='M12.9 9.1L15.45 5.4L14.85 5L12.3 8.7z'/%3E%3Ccircle cx='15.5' cy='4.5' r='1.35'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 1.1 20 20'%3E%3Cpath fill-rule='evenodd' d='M4.75 13.7a7.25 5.35 0 1 0 14.5 0a7.25 5.35 0 1 0-14.5 0zM8.14 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM13.54 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM9.62 15.45A3.3 3.3 0 0 0 14.38 15.45L13.84 15.45A2.8 2.8 0 0 1 10.16 15.45z'/%3E%3Ccircle cx='4.55' cy='13.9' r='1.95'/%3E%3Ccircle cx='19.45' cy='13.9' r='1.95'/%3E%3Cpath d='M12.9 9.1L15.45 5.4L14.85 5L12.3 8.7z'/%3E%3Ccircle cx='15.5' cy='4.5' r='1.35'/%3E%3C/svg%3E");
}
/* the home newsletter's social links are already rounded chips (pg-index.css); this
   keeps the older round rule above from ever winning */

/* 2e. the bottom bar: readable copy, a quiet handle, and the back-to-top pill */

/* back to top: a rounded-rectangle pill. The ring svg is gone; the arrow is drawn as a
   CSS mask path, and a thin fill along the bottom edge tracks --top-prog (fable.js sets
   it from 100 at the top of the page to 0 at the bottom). */
/* 2f. tablet and phone: one column, left aligned, the chips in a tidy 4 by 2 then 2 by 4 */
/* ---------- 3. EXIT-INTENT OVERLAY: no disc, no stray trace ---------- */
/* close: a rounded square, the X still turns a quarter on hover */
/* the flat red heartbeat line that ran behind the card fan read as a stray rule through the cards */

/* ---------- 4. reduced motion: everything resolves to its finished state ---------- */
@media(prefers-reduced-motion:reduce){
  html .nav .nav__cta.nav__cta,html .nav .nav__cta.nav__cta::after{transition-duration:.01ms;}
  html .nav .nav__cta.nav__cta:hover::before{animation:none;}
      }

/* PHOTO-SYSTEM:BEGIN */
/* ============================================================
   PHOTO SYSTEM (REQUIREMENTS P1, P5, P6; 2026-10-06). Append only.
   Full contract and API: DMITRY-REDESIGN-2026-09/98-PHOTO-SYSTEM.md.

   Dev, verbatim: "the hero ... doesnt cover the full page", "the
   picture is cut off", "i dont want the effect where it merges into
   a opaque colour towards the end so the text can be seen, I want
   the text directly on the image, if the visibility is low, make
   the text a contrast colour on what it is seated upon".

   Four jobs, in this order:
   1. FULL PAGE HEROES: .phero--photo (or [data-photo-hero]) is a
      full viewport box whose picture fills it edge to edge.
   2. EVERY GROUND IS FULL BLEED AND UNTOUCHED: a .bgphoto (or a hero
      .phero__bg) always covers its whole section, with no fade, mask,
      filter, tint, scrim, vignette or grain on top of it.
   3. ADAPTIVE INK: the runtime at the end of fable.js samples the real
      pixels under each text block and writes data-ink="light|dark"
      (and data-ink-busy). This file turns that into colour.
   4. ART DIRECTION: --photo-pos and --photo-pos-m place the subject.

   Earlier rules in this file and in motion-kit.css are not edited:
   everything here overrides them, using !important only where a
   page scoped rule (body.pg-x #id ...) or a later pg-*.css would
   otherwise win. A page's own pg-*.css still loads after this file,
   so the scrim rules that live there must be deleted by the page
   builder (98-PHOTO-SYSTEM.md lists every one).
   ============================================================ */

:root{
  --pi-light:#F4F7FB;
  --pi-dark:#0C1833;
  --pi-sh-light:0 1px 2px rgb(0 0 0 / .35),0 0 24px rgb(0 0 0 / .25);
  --pi-sh-light-busy:0 1px 2px rgb(0 0 0 / .6),0 0 10px rgb(0 0 0 / .5),0 0 30px rgb(0 0 0 / .4);
  --pi-sh-dark:0 0 1px rgb(255 255 255 / .35);
  --pi-sh-dark-busy:0 0 1px rgb(255 255 255 / .55),0 0 10px rgb(255 255 255 / .45);
  --pi-fd-light:drop-shadow(0 1px 2px rgb(0 0 0 / .35)) drop-shadow(0 0 12px rgb(0 0 0 / .25));
  --pi-fd-light-busy:drop-shadow(0 1px 2px rgb(0 0 0 / .55)) drop-shadow(0 0 8px rgb(0 0 0 / .42)) drop-shadow(0 0 18px rgb(0 0 0 / .3));
  --pi-fd-dark:drop-shadow(0 0 1px rgb(255 255 255 / .35));
  --pi-fd-dark-busy:drop-shadow(0 0 1px rgb(255 255 255 / .55)) drop-shadow(0 0 8px rgb(255 255 255 / .45));
}

/* ---------- 1. FULL PAGE PHOTO HEROES (P1) ---------- */
:is(.phero--photo,[data-photo-hero]){
  --hero-h:100svh;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:row;justify-content:flex-start;
  align-items:var(--photo-copy-y,center);
  min-height:100vh;min-height:100svh;
  padding-top:96px;
  background-color:var(--navy-ground);
}
@media (max-width:900px),(max-aspect-ratio:1/1){
  :is(.phero--photo,[data-photo-hero]){align-items:var(--photo-copy-y-m,var(--photo-copy-y,center));}
}
:is(.phero--photo,[data-photo-hero]) .sec-inner{position:relative;z-index:3;width:100%;}
/* the old split layout reserved the right half (or a peel strip) for a picture
   column; a full page hero has no column, so that padding goes. The retired
   phero--photo-left / phero--photo-right classes keep their own padding. */
:is(.phero--photo,[data-photo-hero]):not(.phero--photo-left,.phero--photo-right) .sec-inner{
  padding-left:var(--gutter);padding-right:var(--gutter);
}
:is(.phero--photo,[data-photo-hero]) .sec-inner{max-width:none;}
/* where the copy sits: data-copy="left" (default), "right" or "center"; the
   column width is --photo-copy-w. The copy block needs the class phero__copy. */
:is(.phero--photo,[data-photo-hero])[data-copy] .phero__copy{max-width:min(var(--photo-copy-w,46rem),100%);}
:is(.phero--photo,[data-photo-hero])[data-copy="right"] .phero__copy{margin-left:auto;}
:is(.phero--photo,[data-photo-hero])[data-copy="center"] .phero__copy{margin-inline:auto;text-align:center;}

/* ---------- 2. THE GROUND LAYER AND ITS PICTURE ----------
   A .bgphoto is a full bleed ground by definition, in a hero or in
   a standalone section. The hero's .phero__bg and .phero__ground
   are the same thing inside .phero--photo. */
.bgphoto,
:is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground){
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:none!important;
  margin:0!important;padding:0!important;aspect-ratio:auto!important;
  z-index:0!important;transform:none!important;overflow:hidden;
  -webkit-mask-image:none!important;mask-image:none!important;
  filter:none!important;opacity:1!important;
  border-radius:0!important;box-shadow:none!important;
}
.bgphoto picture,
:is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground) picture{display:contents;}
.bgphoto img,
:is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground) img{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:none!important;margin:0!important;
  object-fit:cover!important;
  object-position:var(--photo-pos,var(--bg-pos,50% 50%))!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  filter:none!important;opacity:1!important;mix-blend-mode:normal!important;
}
@media (max-width:900px),(max-aspect-ratio:1/1){
  .bgphoto img,
  :is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground) img{
    object-position:var(--photo-pos-m,var(--bg-pos-m,var(--photo-pos,var(--bg-pos,50% 50%))))!important;
  }
}
/* any picture a page flags as a ground gets the same untouched treatment,
   wherever its wrapper lives */
img[data-photo-ground]{
  filter:none!important;opacity:1!important;mix-blend-mode:normal!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
:has(> img[data-photo-ground]),:has(> picture > img[data-photo-ground]){
  -webkit-mask-image:none!important;mask-image:none!important;filter:none!important;
}

/* ---------- 3. NO SCRIMS, FADES, VIGNETTES, TINTS, GRAIN (P5) ----------
   Overlay elements. These names mean "something laid over a photo";
   none of them is allowed to paint. */
.phero__scrim,.phero__frost,[class*="__scrim"],[class*="__veil"]{display:none!important;}
:is(.phero--photo,[data-photo-hero],.has-bgphoto) :is(.phero__glow,.phero__frame,.phero__peel,.phero__deco,.phero__grain,.mkx-navy-bg){display:none!important;}
/* pseudo-element overlays on the ground layer itself */
.bgphoto::before,.bgphoto::after,
:is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground)::before,
:is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground)::after{
  content:none!important;display:none!important;background:none!important;
}
:has(> img[data-photo-ground])::before,:has(> img[data-photo-ground])::after,
:has(> picture > img[data-photo-ground])::before,:has(> picture > img[data-photo-ground])::after{
  content:none!important;display:none!important;background:none!important;
}
/* section level pads, glows and grain above a photo */
:is(.phero--photo,[data-photo-hero],.has-bgphoto)::before,
:is(.phero--photo,[data-photo-hero],.has-bgphoto)::after,
:is(.phero--photo,[data-photo-hero]) .sec-inner::before,
:is(.phero--photo,[data-photo-hero]) .sec-inner::after{
  content:none!important;display:none!important;background:none!important;
}

/* ---------- 4. A SUBTLE, PAUSABLE DRIFT (scale 1.04 at most) ----------
   fable.js toggles .is-live on a ground layer only while its section is on
   screen and the tab is visible. Redefining the keyframes here caps the
   older .bgphoto drift (which went to 1.06) at the same 1.04. */
@keyframes bgphoto-drift{from{transform:scale(1);}to{transform:scale(1.04);}}
@media(prefers-reduced-motion:no-preference){
  :is(.phero--photo,[data-photo-hero]) :is(.phero__bg,.phero__ground).is-live img{
    animation:bgphoto-drift 22s ease-in-out infinite alternate;will-change:transform;
  }
}
html.tab-hidden :is(.phero__bg,.phero__ground,.bgphoto) img{animation-play-state:paused;}
:is(.phero__bg,.phero__ground,.bgphoto) img{transform-origin:var(--drift-origin,50% 50%);}

/* ---------- 5. ADAPTIVE INK (P5) ----------
   data-ink is written per text block by the runtime (fable.js, PHOTO
   SYSTEM). It can also be written by hand as the no-JS fallback, on a text
   block or on a wrapper. With neither, the page keeps its own light text.
   Light ink: soft dark shadow. Dark ink: faint light shadow. Busy ground
   (data-ink-busy): a slightly stronger soft shadow. Never a box, a band
   or a gradient. */
[data-ink="light"]{--ink-c:var(--pi-light);--ink-sh:var(--pi-sh-light);--ink-fd:var(--pi-fd-light);}
[data-ink="light"][data-ink-busy]{--ink-sh:var(--pi-sh-light-busy);--ink-fd:var(--pi-fd-light-busy);}
[data-ink="dark"]{--ink-c:var(--pi-dark);--ink-sh:var(--pi-sh-dark);--ink-fd:var(--pi-fd-dark);}
[data-ink="dark"][data-ink-busy]{--ink-sh:var(--pi-sh-dark-busy);--ink-fd:var(--pi-fd-dark-busy);}

/* until a section's ground picture is decoded and measured (fable.js adds .ph-ready) every block takes light ink,
   so a hand written dark ink never lands on the undecoded navy ground */
html.photo-ink :is(.phero--photo,[data-photo-hero],.has-bgphoto,[data-photo-section]):not(.ph-ready) [data-ink]{--ink-c:var(--pi-light);--ink-sh:var(--pi-sh-light);--ink-fd:var(--pi-fd-light)}
/* the block that carries the attribute, and everything inside it: a span, a
   button or a link with a colour of its own would otherwise keep a white or a
   navy chosen for some other ground. Zero specificity (:where) so a nested
   block with its own ink, and the accent words below, still win. */
[data-ink]:not(section,main,body,html,.nav){color:var(--ink-c)!important;text-shadow:var(--ink-sh)!important;}
:where([data-ink]:not(section,main,body,html,.nav)) :where(*:not(em,.k4-grad,.grad-word,.mkx-shine__em,svg,svg *,.mkx-shine-win,.mkx-shine-win *,.k4-btn--primary,.k4-btn--primary *,.k4-btn--secondary,.k4-btn--secondary *,.btn,.btn *,.nav__cta,.nav__cta *)){color:inherit!important;}
/* no JS: a wrapper's static ink reaches its text blocks (the runtime adds
   html.photo-ink and then owns each block itself) */
html:not(.photo-ink) [data-ink]:not(.nav) :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,small,dt,dd,label,.k4-btn--text){
  color:var(--ink-c)!important;text-shadow:var(--ink-sh)!important;
}
/* a span, b, strong or small with a colour of its own takes the block's ink too (accent words keep the gradient) */
[data-ink]:not(section,main,body,html,.nav) :is(span,b,strong,small):not([class*="k4-"],.grad-word,.mkx-shine__em,.mkx-shine-win,.mkx-shine-win *){color:inherit!important}
/* dark ink: a text button and the keyboard ring take the deep crimson, never coral on a light wall */
[data-ink="dark"] .k4-btn--text,[data-ink="dark"] .k4-btn--text .arr{color:#9C1B27!important}
[data-ink="dark"] :focus-visible,[data-ink="dark"]:focus-visible{outline-color:#9C1B27}
/* solid buttons keep their own face, whatever the wrapper says */
[data-ink] :is(.k4-btn--primary,.k4-btn--secondary,.btn,.nav__cta){text-shadow:none!important;}

/* accent words: gradient clipped text takes its shadow as a filter, because a
   text-shadow on transparent clipped glyphs paints over the gradient */
[data-ink] :is(em,.k4-grad,.grad-word),
[data-ink]:is(em,.k4-grad,.grad-word){
  text-shadow:none!important;filter:var(--ink-fd)!important;
}
/* on light ground the accent turns to a deep crimson that stays vivid. The
   attribute is doubled on purpose: motion-kit.css paints heading accents with
   !important at (0,2,0) and loads after this file, so this needs (0,3,0). */
[data-ink="dark"][data-ink="dark"] :is(.k4-grad,.grad-word,.mkx-shine__em),
[data-ink="dark"][data-ink="dark"]:is(.k4-grad,.grad-word,.mkx-shine__em),
.mkx-shine--dark[data-ink="dark"][data-ink="dark"] em,
.mkx-shine--dark[data-ink="dark"] em.k4-grad,
:is(.phero--photo,[data-photo-hero]) .phero__title[data-ink="dark"][data-ink="dark"] em,
:is(.phero--photo,[data-photo-hero]) [data-ink="dark"][data-ink="dark"] .phero__title em{
  background-image:var(--pi-grad-dark)!important;
}
[data-ink="dark"][data-ink="dark"] em,[data-ink="dark"][data-ink="dark"]:is(em){color:#9C1B27!important;}

/* ---------- 6. COPY PLACED OVER A REGION OF THE PHOTO ----------
   <div data-photo-region="0.52 0.14 0.44 0.34"> inside a photo hero: the
   runtime keeps --pr-x/--pr-y/--pr-w/--pr-h (px, relative to the element's
   containing block) equal to that rectangle (fractions of the full frame)
   under the current cover crop. From 901px up it is positioned there (once the
   runtime is running; without JS it simply flows); below that the copy flows
   normally over the photo. */
@media(min-width:901px){
  html.photo-ink :is(.phero--photo,[data-photo-hero],.has-bgphoto,[data-photo-section]) [data-photo-region]{
    position:absolute;z-index:3;box-sizing:border-box;margin:0;max-width:none;
    left:var(--pr-x,auto);top:var(--pr-y,auto);width:var(--pr-w,auto);height:var(--pr-h,auto);
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* ---------- 7. THE NAV OVER A PHOTO ----------
   With no veil under the nav, the runtime also samples the strip under the
   brand and the links while the page is at the top, and sets data-ink on
   .nav. Once the bar is scrolled it is navy glass and ignores this. */
/* PHOTO-SYSTEM:END */
/* R9-FOUNDATION:BEGIN */
/* ============================================================
   R9 FOUNDATION (shared builder, 2026-10-06). Page builders may rely on
   every name here. Type tokens --t-display, --t-h2, --t-h3 and --t-lede
   are declared once in :root at the top of this file with their R9 values.
   ============================================================ */
:root{
  --t-num:clamp(4.5rem,2rem + 9vw,10rem);
  --sec-pad:clamp(4.5rem,8vw,7.5rem);
  --box-r:14px; --stage-r:20px;
  --line-dark:rgb(244 247 251 / .16); --line-light:rgb(11 27 51 / .14);
  --pi-grad-dark:linear-gradient(100deg,#8A1522 0%,#A5202A 50%,#C9303D 100%);
  --k4-grad-text-photo:linear-gradient(100deg,#E23A46 0%,#FF6B75 55%,#FF8F6B 80%,#E23A46 100%);
}
/* whole photo in flow (phone stacks, plates). Hard edges, nothing over it. */
.photo-plate{position:relative;margin:0;overflow:hidden;aspect-ratio:var(--plate-ar,4/5);background:var(--navy-ground)}
.photo-plate>img,.photo-plate>picture,.photo-plate>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos,50% 50%);transform-origin:var(--drift-origin,50% 50%)}
@media (max-width:900px),(max-aspect-ratio:1/1){.photo-plate>img,.photo-plate>picture>img{object-position:var(--photo-pos-m,var(--photo-pos,50% 50%))}}
/* half-bleed photo panel: copy on the section ground, photo flush to one viewport edge, full section height. */
.hsplit{--hs-w:44vw;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--hs-w);align-items:stretch;overflow:clip}
.hsplit--l{grid-template-columns:var(--hs-w) minmax(0,1fr)}
.hsplit--l>.hsplit__ph{order:-1}
.hsplit__ph{position:relative;margin:0;min-height:min(100svh,58rem);overflow:hidden}
.hsplit__ph>img,.hsplit__ph>picture,.hsplit__ph>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos,50% 50%);transform-origin:var(--drift-origin,50% 50%)}
.hsplit__copy{align-self:center;padding:var(--sec-pad) var(--gutter)}
@media (max-width:900px),(max-aspect-ratio:1/1){
  .hsplit,.hsplit--l{display:block}
  .hsplit__ph{aspect-ratio:4/5;min-height:0;max-height:78svh}
  .hsplit__ph>img,.hsplit__ph>picture>img{object-position:var(--photo-pos-m,var(--photo-pos,50% 50%))}
  .hsplit__copy{padding:2rem var(--gutter) 3.2rem}
}
/* a photo section that stacks on phones and portrait: the whole photo block first (hard edge), the copy under it on navy */
@media (max-width:900px),(max-aspect-ratio:1/1){
  .has-bgphoto.has-stack{display:block;min-height:0}
  .has-bgphoto.has-stack>.bgphoto{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:var(--stack-ar,4/5)!important;max-height:78svh}
  .has-bgphoto.has-stack>.bgphoto img{object-position:var(--photo-pos-m,var(--photo-pos,50% 50%))!important}
  .has-bgphoto.has-stack>.sec-inner{padding-top:2rem;padding-bottom:3rem}
}
/* arrivals (one shot, nothing hidden without JS or under reduced motion) */
.js .reveal-sec:not(.is-in) [data-settle]>img,.js .reveal-sec:not(.is-in) [data-settle]>picture>img{transform:scale(1.06);opacity:0}
.reveal-sec.is-in [data-settle]>img,.reveal-sec.is-in [data-settle]>picture>img{transform:none;opacity:1;transition:transform .9s var(--ease-snap),opacity .6s ease}
.js .reveal-sec:not(.is-in) [data-fade]{opacity:0}
.reveal-sec.is-in [data-fade]{opacity:1;transition:opacity .5s ease calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){[data-settle]>img,[data-settle]>picture>img,[data-fade]{transform:none!important;opacity:1!important;transition:none!important}}
/* R9-FOUNDATION:END */
@keyframes chromeGlint{to{background-position:-60% 0;}}
/* R9-CHROME:BEGIN */
/* ============================================================
   R9 SHARED CHROME (shared builder, 2026-10-06): the nav, the footer, the
   crimson newsletter band and the exit overlay, each written once.
   Dev: no hairline under the nav, no line anywhere in the footer, no box
   hover other than the border, no icon in a disc, no envelope.
   Motion: transform and opacity only, hover inside (hover:hover) and
   (pointer:fine) with :focus-visible twins, finished state under
   prefers-reduced-motion, nothing blank without JS.
   The markup for the footer and the band is generated by
   DMITRY-REDESIGN-2026-09/tools/r9-apply-shared.py.
   ============================================================ */

/* ---------- 1. NAV ---------- */
.nav{--nav-ink:var(--ink);--nav-ink-soft:rgb(11 27 51 / .8);--nav-ul:#C9303D;--nav-cur:#C9303D;
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);}
/* over a dark ground, or once the bar is navy glass: light ink */
:is(.nav--over-dark:not(.is-scrolled),.nav.is-scrolled){--nav-ink:#F4F7FB;--nav-ink-soft:rgb(244 247 251 / .84);--nav-ul:#FF6B75;--nav-cur:#E23A46;}
/* the runtime writes ONE data-nav-ink on the .nav, chosen from the pixels under the brand and every link
   (a hand written data-ink on the nav itself is the no-JS fallback) */
.nav[data-nav-ink="light"]:not(.is-scrolled),.nav[data-ink="light"]:not([data-nav-ink]):not(.is-scrolled){--nav-ink:#F4F7FB;--nav-ink-soft:rgb(244 247 251 / .9);--nav-ul:#FF6B75;--nav-cur:#E23A46;}
.nav[data-nav-ink="dark"]:not(.is-scrolled),.nav[data-ink="dark"]:not([data-nav-ink]):not(.is-scrolled){--nav-ink:#0C1833;--nav-ink-soft:rgb(12 24 51 / .88);--nav-ul:#C9303D;--nav-cur:#C9303D;}
/* the bar is its own layer so a backdrop-filter never becomes the fixed drawer's containing block; no line, no border, no tint at the top */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:transparent;transition:background-color .35s ease;}
.nav.is-scrolled::before{background:rgb(12 24 51 / .94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.nav__inner{max-width:none;margin:0;padding:1.35rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
.brand{position:relative;z-index:calc(var(--z-drawer) + 1);display:inline-flex;align-items:center;gap:.75rem;}
.brand__mark{width:46px;height:46px;flex:none;overflow:visible;}
.brand__lock{display:flex;flex-direction:column;line-height:1;}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--nav-ink);}
.brand__tag{font-family:var(--label);font-size:.8rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--nav-ink-soft);margin-top:.28rem;}
.nav[data-ink="light"]:not([data-nav-ink]):not(.is-scrolled) :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 1px 14px rgb(12 24 51 / .35);}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);}
.nav__link{position:relative;font-family:var(--label);font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--nav-ink-soft);padding:.5rem 0;white-space:nowrap;transition:color .25s ease;}
.nav__link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--nav-ul);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-snap);}
@media(hover:hover) and (pointer:fine){
  .nav__link:hover{color:var(--nav-ink);}
  .nav__link:hover::after{transform:scaleX(1);transform-origin:left;}
}
.nav__link:focus-visible{color:var(--nav-ink);outline:2px solid var(--crimson-glow);outline-offset:4px;border-radius:2px;}
.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left;}
.nav__link[aria-current="page"]{color:var(--nav-ink);}
.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;background:var(--nav-cur);}
.nav__link--drawer,.nav__aux{display:none;}
.nav__actions{display:flex;align-items:center;gap:.9rem;}
.nav__cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;font-family:var(--label);font-size:.86rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:#fff;background:var(--grad-crimson);padding:.85rem 1.45rem;border-radius:999px;overflow:hidden;}
.nav__cta--drawer{display:none;}
.nav__toggle{display:none;position:relative;z-index:calc(var(--z-drawer) + 1);width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.nav__toggle span{width:22px;height:2px;background:var(--nav-ink);border-radius:2px;transition:transform .3s var(--ease-snap),opacity .3s ease,background-color .3s ease;}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle.is-open span:nth-child(2){opacity:0;}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav__toggle:focus-visible{outline:2px solid var(--crimson-glow);outline-offset:2px;border-radius:8px;}
/* one row from 1001 up with seven links (Media joined the bar, Dev 2026-10-06): the links tighten between 1001 and 1160,
   and the gap between them eases off up to 1440 so the brand and the button keep clear space on both sides */
@media(min-width:1001px) and (max-width:1160px){
  .nav__inner{gap:1rem;}
  .nav__links{gap:clamp(.55rem,1vw,.9rem);}
  .nav__link{font-size:.82rem;letter-spacing:0;}
  .nav__cta{font-size:.74rem;letter-spacing:.06em;padding:.72rem .95rem;}
}
@media(min-width:1161px) and (max-width:1440px){.nav__links{gap:clamp(.85rem,1.25vw,1.5rem);}}
/* the menu: up to 1000px. A flat navy page of nine large links; with no JS the links simply wrap under the brand */
@media(max-width:1000px){
  .nav__inner{flex-wrap:wrap;row-gap:.2rem;}
  .nav__links{order:3;width:100%;flex-wrap:wrap;gap:.2rem 1.4rem;padding-bottom:.9rem;}
  .nav__cta--bar{display:none;}
  html.js .nav__inner{flex-wrap:nowrap;}
  html.js .nav__toggle{display:flex;}
  html.js .nav__links{position:fixed;inset:0;z-index:var(--z-drawer);order:0;width:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:0;
    padding:calc(92px + .4rem) var(--gutter) max(2rem,env(safe-area-inset-bottom));background:#0C1833;overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;}
  html.js .nav__links.is-open{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s;}
  html.js .nav .nav__link--drawer{display:flex;}
  html.js .nav__links .nav__link{display:flex;align-items:center;min-height:56px;font-family:var(--display);font-size:clamp(2rem,9vw,2.6rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:rgb(244 247 251 / .85);text-shadow:none;padding:.2rem 0;}
  html.js .nav__links .nav__link::after{display:none;}
  html.js .nav__links .nav__link[aria-current="page"]{width:max-content;color:var(--crimson-glow);background:var(--grad-shine-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  html.js .nav__links .nav__link:hover,html.js .nav__links .nav__link:focus-visible{color:#fff;}
  html.js .nav__links .nav__link[aria-current="page"]:hover{color:transparent;}
  html.js .nav__links .nav__cta--drawer{display:flex;width:100%;margin-top:1.6rem;min-height:56px;font-size:.95rem;}
  html:not(.js) .nav__links .nav__cta--drawer{display:none;}
  html.js .nav__links .nav__aux{display:block;margin-top:.9rem;font-family:var(--label);font-size:.95rem;font-weight:500;color:rgb(244 247 251 / .75);width:max-content;}
  html.js .nav__aux{background:linear-gradient(currentColor,currentColor) left 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease-snap),color .25s ease;}
  html.js .nav__aux:hover,html.js .nav__aux:focus-visible{color:#fff;background-size:100% 1.5px;}
  /* the menu is open: the brand and the buttons sit on navy, so they are light */
  .nav.is-menu :is(.brand,.nav__toggle,.nav__links){--nav-ink:#F4F7FB;--nav-ink-soft:rgb(244 247 251 / .85);--nav-ul:#FF6B75;}
  .nav.is-menu .brand__name,.nav.is-menu .brand__tag{text-shadow:none;}
  /* the links rise 40ms apart (transform and opacity only) */
  html.js .nav__links>*{opacity:0;transform:translateY(18px);}
  html.js .nav__links.is-open>*{opacity:1;transform:none;transition:opacity .35s ease calc(var(--k,0) * 40ms + 60ms),transform .5s var(--ease-snap) calc(var(--k,0) * 40ms + 60ms),color .25s ease,background-size .35s var(--ease-snap);}
}
@media(max-width:1000px) and (prefers-reduced-motion:reduce){
  html.js .nav__links,html.js .nav__links.is-open{transition:none;}
  html.js .nav__links>*{opacity:1;transform:none;}
  html.js .nav__links.is-open>*{transition:none;}
}

/* ---------- 2. FOOTER ---------- */
.footer{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-ground);color:var(--paper);}
.footer__word{position:relative;z-index:var(--z-raise);text-align:center;padding:clamp(3rem,6.5vw,5.5rem) var(--gutter) 0;}
/* the wordmark: the M1 gradient across the whole phrase (Heart takes the first half of the ramp, Success the second), one band of
   light sweeps through it the first time the footer arrives, then three slow beats and it is still */
.footer__word h2{position:relative;z-index:1;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,13vw,10.5rem);line-height:.92;letter-spacing:-.03em;
  color:var(--crimson-vivid);transform-origin:50% 60%;}
.footer__word h2 span{--gx:0%;display:inline-block;padding-block:.07em;margin-block:-.07em;color:var(--crimson-vivid);}
.footer__word h2 span + span{--gx:100%;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .footer__word h2 span{
    background-image:linear-gradient(105deg,transparent 38%,rgb(255 168 148 / .85) 50%,transparent 62%),var(--grad-shine-dark);
    background-size:300% 100%,200% 100%;
    background-position:0% 0,var(--gx) 50%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
@keyframes chromeSweep{from{background-position:100% 0,var(--gx) 50%;}to{background-position:0% 0,var(--gx) 50%;}}
@keyframes chromeBeat{0%,100%{transform:scale(1);}6%{transform:scale(1.018);}12%{transform:scale(1);}18%{transform:scale(1.011);}26%{transform:scale(1);}}
.footer.is-swept .footer__word h2 span{animation:chromeSweep 1.8s cubic-bezier(.35,0,.65,1) .1s 1 both;}
.footer.is-swept .footer__word h2 span + span{animation-delay:.8s;}
.footer.is-live .footer__word h2{animation:chromeBeat 3.4s ease-in-out .9s 3;will-change:transform;}

.footer__inner{position:relative;z-index:var(--z-raise);max-width:var(--max);margin:clamp(2rem,4vw,3.4rem) auto 0;padding:0 var(--gutter) clamp(1.6rem,3vw,2.4rem);}
.footer__main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:2.2rem;align-items:start;padding:clamp(1.8rem,3.5vw,2.8rem) 0 clamp(1.8rem,3.5vw,2.8rem);}
.footer__id{grid-column:1 / 6;}
.footer__nav{grid-column:7 / 10;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;}
.footer__follow{grid-column:10 / 13;}
.footer__name{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:#fff;margin:0;}
.footer__tag{font-family:var(--body);font-size:1rem;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--on-dark-soft);margin:.3rem 0 0;}
.footer__mail{display:inline-block;margin-top:1.1rem;font-size:1.1rem;}
.footer__nav::before{content:"Explore";display:block;font-family:var(--label);font-size:.9rem;font-weight:700;color:var(--on-dark-soft);margin:0 0 .35rem;}
.footer__k{font-family:var(--label);font-size:.9rem;font-weight:700;color:var(--on-dark-soft);margin:0 0 .85rem;}
.footer__socs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;}
/* every footer link is a text link: a glyph and a name, no fill, no border, no box. Hover: white, and a 1.5px underline draws in */
.footer__nav a,.footer__mail,.footer__soc,.footer__top{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);font-size:1rem;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--on-dark-soft);
  padding-bottom:.12em;background:linear-gradient(currentColor,currentColor) left 100% / 0 1.5px no-repeat;
  transition:background-size .35s var(--ease-snap),color .25s ease;}
.footer__mail{font-size:1.1rem;}
@media(hover:hover) and (pointer:fine){
  .footer__nav a:hover,.footer__mail:hover,.footer__soc:hover,.footer__top:hover{color:#fff;background-size:100% 1.5px;}
  .footer__top:hover .arr{transform:translateY(-3px);}
}
.footer__nav a:focus-visible,.footer__mail:focus-visible,.footer__soc:focus-visible,.footer__top:focus-visible{color:#fff;background-size:100% 1.5px;outline:2px solid var(--crimson-glow);outline-offset:4px;border-radius:2px;}
.footer__soc svg{width:16px;height:16px;flex:none;fill:currentColor;}
.footer__top .arr{display:inline-block;transition:transform .3s var(--ease-snap);}
/* Facebook and Reddit ship as a logo drawn ON a disc; here the "f" alone and the alien alone are cut through a mask so they take the text colour */
.footer__soc[aria-label="Facebook"] svg path,.footer__soc[aria-label="Reddit"] svg path{display:none;}
.footer__soc[aria-label="Facebook"] svg,.footer__soc[aria-label="Reddit"] svg{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.footer__soc[aria-label="Facebook"] svg{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 3.78 21 21'%3E%3Cpath d='M10.12 23.86V15.47H7.08V12h3.04V9.36c0-3 1.79-4.66 4.53-4.66 1.31 0 2.68.24 2.68.24v2.95H15.8c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.39z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 3.78 21 21'%3E%3Cpath d='M10.12 23.86V15.47H7.08V12h3.04V9.36c0-3 1.79-4.66 4.53-4.66 1.31 0 2.68.24 2.68.24v2.95H15.8c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.39z'/%3E%3C/svg%3E");
}
.footer__soc[aria-label="Reddit"] svg{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 1.1 20 20'%3E%3Cpath fill-rule='evenodd' d='M4.75 13.7a7.25 5.35 0 1 0 14.5 0a7.25 5.35 0 1 0-14.5 0zM8.14 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM13.54 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM9.62 15.45A3.3 3.3 0 0 0 14.38 15.45L13.84 15.45A2.8 2.8 0 0 1 10.16 15.45z'/%3E%3Ccircle cx='4.55' cy='13.9' r='1.95'/%3E%3Ccircle cx='19.45' cy='13.9' r='1.95'/%3E%3Cpath d='M12.9 9.1L15.45 5.4L14.85 5L12.3 8.7z'/%3E%3Ccircle cx='15.5' cy='4.5' r='1.35'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 1.1 20 20'%3E%3Cpath fill-rule='evenodd' d='M4.75 13.7a7.25 5.35 0 1 0 14.5 0a7.25 5.35 0 1 0-14.5 0zM8.14 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM13.54 13.35a1.16 1.16 0 1 1 2.32 0a1.16 1.16 0 1 1-2.32 0zM9.62 15.45A3.3 3.3 0 0 0 14.38 15.45L13.84 15.45A2.8 2.8 0 0 1 10.16 15.45z'/%3E%3Ccircle cx='4.55' cy='13.9' r='1.95'/%3E%3Ccircle cx='19.45' cy='13.9' r='1.95'/%3E%3Cpath d='M12.9 9.1L15.45 5.4L14.85 5L12.3 8.7z'/%3E%3Ccircle cx='15.5' cy='4.5' r='1.35'/%3E%3C/svg%3E");
}
.footer__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem 1.6rem;padding-top:clamp(1rem,2vw,1.5rem);}
.footer__copy{color:var(--on-dark-faint);font-size:.88rem;margin:0;}
@media(max-width:900px){
  .footer__id{grid-column:1 / 7;}
  .footer__nav{grid-column:7 / 10;}
  .footer__follow{grid-column:10 / 13;}
}
@media(max-width:700px){
  .footer__inner{margin-top:1.2rem;}
  .footer__main{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.3rem;padding-block:1rem 1.2rem;}
  .footer__id{grid-column:1 / -1;}
  .footer__nav{grid-column:1;}
  .footer__follow{grid-column:2;}
  .footer__name{font-size:1.3rem;}
  .footer__mail{margin-top:.8rem;font-size:1rem;}
  .footer__nav,.footer__socs{gap:.25rem;}
  .footer__nav a,.footer__soc{font-size:.95rem;line-height:1.3;}
  .footer__mail{margin-top:.6rem;}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:.5rem;}
  .footer__word{padding-top:2rem;}
}
@media(prefers-reduced-motion:reduce){
  .footer.is-swept .footer__word h2 span,.footer.is-live .footer__word h2{animation:none;}
  .footer__nav a,.footer__mail,.footer__soc,.footer__top,.footer__top .arr{transition:none;}
}

/* ---------- 3. THE CRIMSON NEWSLETTER BAND: flat crimson, display type, one white capsule ---------- */
.nl{display:flex;align-items:center;min-height:clamp(520px,64svh,680px);}
.nl.sec-crimson{background:linear-gradient(135deg,#C42A37 0%,#9C1B27 100%);box-shadow:none;color:#fff;}
.nl__grid{width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:var(--sec-pad);}
.nl__title{grid-column:1 / 8;margin:0;max-width:10ch;font-family:var(--display);font-weight:800;font-size:clamp(3rem,6.2vw,5.8rem);line-height:.98;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.nl__title em,.nl .mkx-shine--dark em,.nl .mkx-shine--light em{font-style:normal;color:#fff;-webkit-text-fill-color:#fff;background:none;}
.nl__action{grid-column:8 / 13;align-self:center;position:relative;}
.nl__sub{margin:0 0 1.6rem;max-width:34ch;font-size:1.2rem;line-height:1.55;color:rgb(255 255 255 / .94);}
.nl__form{display:flex;align-items:center;gap:.4rem;max-width:32rem;padding:.35rem .35rem .35rem 1.4rem;background:#fff;border:2px solid #fff;border-radius:999px;transition:border-color .22s ease,opacity .2s ease;}
.nl__form:focus-within,.nl__form:has(.nl__input[aria-invalid="true"]){border-color:#0C1833;}
@media(hover:hover) and (pointer:fine){.nl__form:hover{border-color:#0C1833;}}
.nl__input{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;border-radius:0;box-shadow:none;padding:.7rem 0;font-family:var(--body);font-size:1.05rem;color:#0C1833;}
.nl__input::placeholder{color:#5B6578;opacity:1;}
.nl__input:focus,.nl__input:focus-visible{outline:none;box-shadow:none;}
.nl__submit{position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.9rem 1.6rem;border-radius:999px;background:#0C1833;color:#fff;
  font-family:var(--label);font-size:.86rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:box-shadow .3s var(--ease-snap),background-color .3s ease,scale .12s ease;}
.nl__submit::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgb(255 255 255 / .28) 48%,transparent 64%) 160% 0 / 260% 100% no-repeat;}
.nl__submit .arr{display:inline-block;transition:translate .3s var(--ease-snap);}
@keyframes nlGlint{to{background-position:-60% 0;}}
@media(hover:hover) and (pointer:fine){
  .nl__submit:hover{background:#16264D;box-shadow:0 0 0 2px #FF6B75,0 0 26px rgb(255 107 117 / .55);}
  .nl__submit:hover::after{animation:nlGlint .85s var(--ease-snap) 1;}
  .nl__submit:hover .arr{translate:4px 0;}
}
.nl__submit:focus-visible{outline:none;background:#16264D;box-shadow:0 0 0 2px #FF6B75,0 0 26px rgb(255 107 117 / .55);}
.nl__submit:focus-visible::after{animation:nlGlint .85s var(--ease-snap) 1;}
.nl__submit:focus-visible .arr{translate:4px 0;}
.nl__submit:active:not(:disabled){scale:.97;}
.nl__submit:disabled{opacity:.7;cursor:progress;}
.nl__ok{min-height:1.5rem;margin:.5rem 0 0;font-size:1rem;font-weight:700;line-height:1.4;color:#fff;}
.nl__ok a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) left 100% / 0 1.5px no-repeat;transition:background-size .3s var(--ease-snap);}
@media(hover:hover) and (pointer:fine){.nl__ok a:hover{background-size:100% 1.5px;}}
.nl__ok a:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.nl__fine{margin:.1rem 0 0;font-size:.9rem;line-height:1.4;color:rgb(255 255 255 / .92);}
/* success: the capsule fades out and a large sentence takes its place, so nothing jumps */
.nl__form.is-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s;}
.nl__form.is-done ~ .nl__ok.is-ok{margin-top:calc(var(--nl-h,56px) * -1);min-height:var(--nl-h,56px);font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.08;letter-spacing:-.02em;max-width:16ch;}
.nl__lessons{list-style:none;margin:2rem 0 0;padding:0;}
.nl__lessons a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding:.7rem 0;font-size:1.05rem;line-height:1.35;color:#fff;}
.nl__lt{background:linear-gradient(currentColor,currentColor) left 100% / 0 1.5px no-repeat;transition:background-size .35s var(--ease-snap);justify-self:start;padding-bottom:.08em;}
.nl__lm{font-size:.9rem;color:rgb(255 255 255 / .8);white-space:nowrap;}
@media(hover:hover) and (pointer:fine){.nl__lessons a:hover .nl__lt{background-size:100% 1.5px;}}
.nl__lessons a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px;}
.nl__lessons a:focus-visible .nl__lt{background-size:100% 1.5px;}
@media(max-width:820px){
  .nl{min-height:0;}
  .nl__grid{grid-template-columns:1fr;gap:1.8rem;padding-block:clamp(3.4rem,10vw,4.5rem);}
  .nl__title,.nl__action{grid-column:1;}
  .nl__title{font-size:clamp(2.7rem,12.5vw,4.4rem);}
  .nl__form{max-width:none;}
}
@media(max-width:359px){
  .nl__form{flex-direction:column;align-items:stretch;border-radius:28px;padding:.5rem;gap:.5rem;}
  .nl__input{padding:.7rem .8rem;}
  .nl__submit{justify-content:center;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .nl__submit::after{animation:none !important;}
  .nl__form,.nl__form.is-done,.nl__submit,.nl__submit .arr,.nl__lt{transition:none;}
}

/* ---------- 4. THE EXIT OVERLAY: flat navy panel, four real lessons and one patient's line, ring-only hover ---------- */
.xi{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(14px,3.4vh,40px) clamp(14px,3.4vw,56px);visibility:hidden;pointer-events:none;transition:visibility 0s linear .7s;}
html.xi-on .xi{visibility:visible;pointer-events:auto;transition:visibility 0s;}
/* the site behind loses its colour (the drain to grey stays) */
html.xi-armed body > :not(.xi){transition:filter .9s var(--ease-soft);}
html.xi-on body > :not(.xi){filter:grayscale(1) brightness(.74) contrast(1.04);}
.xi__panel{position:relative;width:100%;height:100%;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  background:var(--navy-ground);border:1px solid var(--line-dark);border-radius:24px;color:var(--on-dark);
  opacity:0;transform:translateY(22px) scale(.985);transition:opacity .5s var(--ease-soft),transform .8s var(--ease-snap);}
html.xi-on .xi__panel{opacity:1;transform:none;}
.xi__copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,6vw,6.5rem) clamp(1.5rem,5.5vw,6rem);overflow-y:auto;}
.xi__title{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5.4vw,5.6rem);line-height:.96;letter-spacing:-.025em;color:#fff;margin:0 0 1.6rem;max-width:12ch;text-wrap:balance;}
.xi__title em{font-style:normal;color:var(--crimson-glow);}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .xi__title em{background:var(--grad-shine-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
}
.xi__deck{font-family:var(--body);font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.6;color:var(--on-dark-soft);max-width:46ch;margin:0 0 2.2rem;}
.xi__form{display:flex;gap:.7rem;flex-wrap:wrap;max-width:560px;}
.xi__input{flex:1 1 260px;min-width:0;font-family:var(--body);font-size:1.05rem;color:#fff;padding:1rem 1.2rem;border-radius:var(--box-r);background:transparent;border:2px solid var(--line-dark);transition:border-color .22s ease;}
.xi__input::placeholder{color:rgb(255 255 255 / .55);}
@media(hover:hover) and (pointer:fine){.xi__input:hover{border-color:rgb(244 247 251 / .4);}}
.xi__input:focus,.xi__input:focus-visible{outline:none;border-color:var(--crimson-vivid);box-shadow:none;}
.xi__submit{flex:0 0 auto;border-radius:var(--box-r);}
.xi__submit:disabled{opacity:.6;cursor:progress;}
.xi__ok{min-height:1.4em;margin:.9rem 0 0;font-family:var(--body);font-size:.95rem;color:var(--on-dark-soft);}
.xi__ok.is-ok{color:#fff;font-size:1.15rem;font-weight:500;}
.xi__ok.is-err{color:#FFB4B9;}
.xi__ok a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.xi__fine{margin:.2rem 0 0;font-family:var(--body);font-size:.85rem;color:var(--on-dark-faint);}
.xi__skip{align-self:flex-start;margin-top:2.4rem;padding:.3rem 0;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:.95rem;color:var(--on-dark-soft);text-decoration:underline;text-decoration-color:rgb(255 255 255 / .28);text-underline-offset:4px;transition:color .25s ease,text-decoration-color .25s ease;}
.xi__skip:hover,.xi__skip:focus-visible{color:#fff;text-decoration-color:rgb(255 255 255 / .7);}
/* close: a rounded square with a drawn X; hover is its border colour and nothing else */
.xi__close{position:absolute;top:clamp(14px,2.2vw,26px);right:clamp(14px,2.2vw,26px);z-index:3;width:46px;height:46px;border-radius:12px;cursor:pointer;background:transparent;border:1.5px solid var(--line-dark);transition:border-color .22s ease;}
.xi__close span,.xi__close span::after{position:absolute;left:50%;top:50%;width:16px;height:1.5px;border-radius:2px;background:#fff;transform:translate(-50%,-50%) rotate(45deg);}
.xi__close span::after{content:'';transform:translate(-50%,-50%) rotate(90deg);}
@media(hover:hover) and (pointer:fine){.xi__close:hover{border-color:#FF6B75;}}
.xi__close:focus-visible{outline:none;border-color:#FF6B75;}
/* the art column: five cards in a fan, no line, no field behind them */
.xi__art{position:relative;overflow:hidden;}
.xi__stack{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:grid;place-items:center;}
.xi__card{grid-area:1/1;width:min(340px,70%);padding:1.15rem 1.3rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;
  background:var(--navy-raised);border:1px solid var(--line-dark);border-radius:var(--box-r);
  --dx:calc((var(--i) - 2) * 22px);--dy:calc((var(--i) - 2) * min(112px,13.5svh));--rot:calc((var(--i) - 2) * -2.2deg);
  opacity:0;transform:translate(0,90px) rotate(0deg) scale(.94);
  transition:transform 1s var(--ease-snap) calc(.28s + var(--i) * .09s),opacity .6s var(--ease-soft) calc(.28s + var(--i) * .09s);}
html.xi-on .xi__card{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot));}
.xi__card-row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;}
.xi__card-n{font-family:var(--body);font-size:.9rem;font-weight:700;color:#FFB4B9;}
.xi__card-r{font-family:var(--body);font-size:.85rem;font-weight:500;color:var(--on-dark-faint);white-space:nowrap;}
.xi__card-t{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.15;color:#fff;}
.xi__card--quote .xi__card-t{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;}
.xi__card-mark{display:block;width:1.5rem;height:1.5rem;background-color:#FFB4B9;-webkit-mask-image:var(--quote-mark);mask-image:var(--quote-mark);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.xi__card-attr{font-style:normal;font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--on-dark-faint);}
@media(max-width:900px){
  .xi__panel{grid-template-columns:1fr;border-radius:18px;}
  .xi__art{display:none;}
  .xi__title{max-width:none;}
  .xi__submit{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .xi,.xi__panel,.xi__card,html.xi-armed body > :not(.xi){transition:none !important;}
  .xi__panel{transform:none;}
}
/* R9-CHROME:END */

/* R9-SAFETY:BEGIN */
/* a page that still carries a ghost numeral shows nothing for it; the injected drifting light fields are never painted */
.folio__num,.phero__pn{display:none !important;}
.mkx-navy-bg{display:none !important;}
/* R9-SAFETY:END */

/* ==== NAV INK, ONE FOR THE WHOLE BAR (R10, Dev Q4) ====
   fable.js measures the pixels under the brand words and under every link (or the menu button) and
   writes ONE data-nav-ink on the .nav itself, picked for the best worst-case contrast, so the brand,
   every link and the menu button always share one colour. data-nav-busy (also on the .nav) means some
   word sits on a busy patch: a soft halo in the opposite tone goes behind every word. Text-shadow only,
   never a box, a band or a tint over the photo. Once the page scrolls the bar is navy glass. */
/* the bar over a photo: the brand words and every link are ONE colour (no softer link tone) */
.nav:not(.is-scrolled) .brand__tag{color:var(--nav-ink);}
@media(min-width:1001px){
  .nav:not(.is-scrolled) .nav__link{color:var(--nav-ink);}
}
html:not(.js) .nav:not(.is-scrolled) .nav__link{color:var(--nav-ink);}
.nav:not(.is-scrolled)[data-nav-ink="light"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 1px 2px rgb(0 0 0 / .35),0 0 18px rgb(0 0 0 / .3);}
.nav:not(.is-scrolled)[data-nav-ink="dark"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 0 1px rgb(255 255 255 / .45);}
.nav:not(.is-scrolled)[data-nav-busy] :is(.brand__tag,.nav__link){color:var(--nav-ink);}
.nav:not(.is-scrolled)[data-nav-busy][data-nav-ink="light"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 1px 2px rgb(0 0 0 / .6),0 0 10px rgb(0 0 0 / .5),0 0 26px rgb(0 0 0 / .4);}
.nav:not(.is-scrolled)[data-nav-busy][data-nav-ink="dark"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 0 1px rgb(255 255 255 / .75),0 0 8px rgb(255 255 255 / .8),0 0 20px rgb(255 255 255 / .6);}
/* level 2: the patch behind some word is poor for either ink, so the halo is wider and denser (still text-shadow only) */
.nav:not(.is-scrolled)[data-nav-busy="2"][data-nav-ink="light"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 0 2px rgb(6 12 28 / .9),0 1px 6px rgb(6 12 28 / .8),0 0 16px rgb(6 12 28 / .7),0 0 34px rgb(6 12 28 / .5);}
.nav:not(.is-scrolled)[data-nav-busy="2"][data-nav-ink="dark"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:0 0 2px rgb(255 255 255 / .95),0 0 8px rgb(255 255 255 / .9),0 0 18px rgb(255 255 255 / .8),0 0 34px rgb(255 255 255 / .6);}

/* ==== NEAREST INK WINS FOR ACCENT WORDS (lead fix 2026-10-06) ====
   The dark-ink accent rule above matches any accent under a dark-ink ancestor, so a heading the
   runtime set to light ink inside a wrapper with a static data-ink="dark" (research #areas, the copy
   placed on the cleaned lab monitors) painted "interest." deep crimson on navy. A light-ink block
   nested in a dark one gets the bright crimson to coral gradient back (0,4,0 beats 0,3,0). */
[data-ink="dark"] [data-ink="light"][data-ink="light"] :is(.k4-grad,.grad-word,.mkx-shine__em),
[data-ink="dark"] [data-ink="light"][data-ink="light"]:is(.k4-grad,.grad-word,.mkx-shine__em),
[data-ink="dark"] [data-ink="light"][data-ink="light"] em{
  background-image:var(--grad-shine-dark)!important;color:#E23A46!important;
}

/* R10-ENVELOPE:BEGIN */
/* ==== NEWSLETTER ENVELOPE (R10 restore, Dev Q11) ====
   fable.js injects <span class="ill ill-envelope nl__env" aria-hidden="true"> into every .nl band (and
   adds .nl--env to the band). It sits under the headline in the left column and stays centred with it;
   the action column (copy, capsule, lessons) spans both rows. The play sequence is driven by the class
   .is-play (fable.js adds it when the envelope scrolls into view and again when the form gets focus):
   the letter with its heartbeat line slides in from above, the flap closes over it, the heart wax seal
   stamps. Finished state (reduced motion, or after the sequence) is the closed envelope with its seal.
   Line drawing only: no tile, no disc, no glow. */
.nl--env .nl__grid{row-gap:0;}
.nl--env .nl__title{grid-row:1;align-self:end;}
.nl--env .nl__action{grid-row:1 / span 2;}
.nl__env{grid-column:1 / 8;grid-row:2;align-self:start;justify-self:start;display:block;width:clamp(180px,18vw,250px);margin:clamp(1.4rem,2.6vw,2.4rem) 0 0;line-height:0;pointer-events:none;}
.nl__env svg{display:block;width:100%;height:auto;max-width:none;overflow:visible;filter:drop-shadow(0 8px 16px rgb(70 0 10 / .28));}
.env-line{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.env-line.dim{opacity:.5;}
.env-letter,.env-flap,.env-seal{transform-box:view-box;}
.env-letter{transform-origin:110px 50px;opacity:0;transform:translateY(20px);}
.env-flap{transform-origin:110px 74px;transform:scaleY(1);}
.env-seal{transform-origin:110px 112px;opacity:1;transform:scale(1);}
.seal-wax{fill:#9C1B27;}
.seal-rim{fill:none;stroke:#fff;stroke-width:1.4;}
.seal-heart{fill:#fff;}
.nl__env.is-play .env-letter{animation:envLetterIn 2.8s var(--ease-soft) .3s both;}
.nl__env.is-play .env-flap{animation:envFlapClose 2.8s var(--ease-snap) .3s both;}
.nl__env.is-play .env-seal{animation:envSeal 2.8s var(--ease-snap) .3s both;}
@keyframes envLetterIn{0%{transform:translateY(-34px);opacity:0;}12%{opacity:1;}50%{transform:translateY(2px);opacity:1;}78%{transform:translateY(20px);opacity:0;}100%{transform:translateY(20px);opacity:0;}}
@keyframes envFlapClose{0%,50%{transform:scaleY(-1);}78%,100%{transform:scaleY(1);}}
@keyframes envSeal{0%,78%{transform:scale(0);opacity:0;}90%{transform:scale(1.25);opacity:1;}100%{transform:scale(1);opacity:1;}}
@media(max-width:820px){
  .nl--env .nl__grid{row-gap:1.8rem;}
  .nl--env .nl__title{grid-row:auto;align-self:auto;}
  .nl--env .nl__action{grid-row:auto;}
  .nl__env{grid-column:1;grid-row:auto;justify-self:start;width:clamp(150px,46vw,210px);margin:0;}
}
@media(prefers-reduced-motion:reduce){
  .nl__env .env-letter{animation:none !important;opacity:0 !important;transform:translateY(20px) !important;}
  .nl__env .env-flap{animation:none !important;transform:scaleY(1) !important;}
  .nl__env .env-seal{animation:none !important;opacity:1 !important;transform:scale(1) !important;}
}
/* R10-ENVELOPE:END */

/* R10-R8COMPONENTS:BEGIN */
/* ==== ROUND 8 COMPONENTS BROUGHT BACK FOR THE PAGE BUILDERS (R10 restore, Dev Q8) ====
   Rules copied from round 8 for markup the current pages no longer carry. They style only classes that no
   current page uses, so they change nothing today; a builder who ports the round 8 section gets its look and its
   arrival motion back. Contracts are in DMITRY-REDESIGN-2026-09/99-R10-SHARED.md. The gold tokens are already
   the steel navy of the current palette. */

/* the citation curve (research): the line draws in, the dots land, the end point rings. fable.js arms it by
   adding .is-armed to .research__spark when it scrolls into view (the R10-SPARK block) */
.research__spark{margin-top:2rem;max-width:560px;}
.research__spark-k{display:block;font-family:var(--label);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.9rem;}
.research__spark svg{width:100%;height:auto;overflow:visible;}
.rs-draw{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
.rs-axis{stroke:var(--gold-hair);stroke-width:1.2;}
.rs-line{stroke:var(--crimson);stroke-width:3;filter:drop-shadow(0 3px 8px rgb(var(--crimson-rgb) / .18));}
.research__spark.is-armed .rs-draw{transition:stroke-dashoffset 1.8s var(--ease-snap);stroke-dashoffset:0;}
.rs-dot{fill:var(--gold);opacity:0;}
.research__spark.is-armed .rs-dot{animation:dotIn .4s var(--ease-snap) forwards;animation-delay:var(--dd,1.5s);}
/* citation curve as a designed area chart: faint grid, gradient fill, gold
   milestone dots, a live end-point ring, qualitative axis words (no fabricated years) */
.cc-grid{fill:none;stroke:var(--hair);stroke-width:1;stroke-dasharray:2 5;}
.sec-dark .cc-grid,.flipband .cc-grid{stroke:var(--hair-inv);}
.cc-area{opacity:0;transition:opacity 1s var(--ease-soft) .6s;}
.js .reveal-sec.is-in .cc-area,.research__spark.is-armed .cc-area{opacity:1;}
.cc-end{fill:var(--crimson-bright);opacity:0;}
.cc-ring{fill:none;stroke:var(--crimson);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;}
.research__spark.is-armed .cc-end{animation:dotIn .4s var(--ease-snap) forwards 1.8s;}
.research__spark.is-armed .cc-ring{animation:zpulse 3.2s var(--ease-soft) infinite 2.1s;}
.cc-axis-k{font-family:var(--label);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;fill:var(--ink-faint);}
@media(prefers-reduced-motion:reduce){.cc-area{opacity:1 !important;}.cc-end{opacity:1 !important;animation:none !important;}.cc-ring{display:none !important;}}

/* the affiliations marquee: one right-to-left row per category, edge faded, paused on hover, still under reduced motion */
.marq{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marq__track{display:flex;gap:3rem;width:max-content;animation:marq 34s linear infinite;}
@media(pointer:fine){.marq:hover .marq__track,.marq:focus-within .marq__track{animation-play-state:paused;}}
@keyframes marq{to{transform:translateX(-50%);}}
.marq__item{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink-faint);white-space:nowrap;display:inline-flex;align-items:center;gap:1rem;}
.marq__item::after{content:'';width:6px;height:6px;border-radius:var(--r-full);background:var(--gold);opacity:.5;}

/* Background & collaborations as three infinite right-to-left marquee rows (one per category), edge-faded, pause on hover, static under reduced motion */
.pg-home .bgcol--marq{display:block;margin-top:2.6rem;border-bottom:1px solid var(--hair);}
.pg-home .bgrow{border-top:1px solid var(--hair);padding:1.45rem 0;}
.pg-home .bgrow__k{display:block;font-family:var(--label);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem;}
.pg-home .marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);}
.pg-home .marq__track{flex:0 0 auto;display:flex;align-items:center;animation:bgMarq var(--marq-dur,32s) linear infinite;will-change:transform;}
.pg-home .marq:hover .marq__track{animation-play-state:paused;}
.pg-home .marq__i{white-space:nowrap;font-family:var(--body);font-size:1.12rem;letter-spacing:-.005em;color:var(--ink-soft);display:inline-flex;align-items:center;transition:color var(--t-mid),transform var(--t-mid) var(--ease-snap);}
.pg-home .marq__i::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 1.9rem;flex:0 0 auto;transition:background var(--t-mid),transform var(--t-mid) var(--ease-snap);}
@media(pointer:fine){
  .pg-home .marq:has(.marq__i:hover) .marq__i:not(:hover){color:var(--ink-faint);}
  .pg-home .marq__i:hover{color:var(--crimson);transform:translateY(-2px);}
  .pg-home .marq__i:hover::after{background:var(--crimson);transform:scale(1.4);}
}
@keyframes bgMarq{to{transform:translateX(-100%);}}
@media(prefers-reduced-motion:reduce){
  .pg-home .marq{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;}
  .pg-home .marq__track{animation:none;flex:1 1 100%;flex-wrap:wrap;min-width:0;}
  .pg-home .marq__track+.marq__track{display:none;}
}

/* the direct-contact line under the form */
.contact__direct{margin-top:1.4rem;font-size:.92rem;color:var(--ink-soft);}
.contact__direct a{color:var(--ink);border-bottom:1px solid var(--gold-hair);padding-bottom:1px;transition:border-color var(--t-mid),color var(--t-mid);}
.contact__direct a:hover{color:var(--crimson);border-color:var(--crimson);}
.contact__dot{margin:0 .4rem;color:var(--ink-faint);}
/* R10-R8COMPONENTS:END */

/* ==== R10-NL-CENTER (Dev 2026-10-06: "move the mail animation above the box where people input their email and
   centre all the text and everything with the mail animation on top of the input box") ====
   Every crimson newsletter band is one centred column: headline, line of copy, the envelope (the letter slides
   in, the flap closes, the heart wax seal stamps) sitting right on top of the email box, the box, the fine print,
   then the recent lessons as a centred block. fable.js puts the envelope inside .nl__action just before the form. */
.nl--center .nl__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:clamp(1.4rem,2.6vw,2rem);}
.nl--center .nl__title{grid-column:1;grid-row:auto;align-self:auto;justify-self:center;max-width:none;margin:0 auto;text-align:center;}
.nl--center .nl__action{grid-column:1;grid-row:auto;align-self:auto;justify-self:center;width:100%;max-width:34rem;display:flex;flex-direction:column;align-items:center;text-align:center;}
.nl--center .nl__sub{max-width:40ch;margin:0 auto clamp(1.2rem,2.4vw,1.8rem);text-align:center;}
.nl--center .nl__env{grid-column:auto;grid-row:auto;justify-self:center;align-self:center;width:clamp(150px,14vw,200px);margin:0 auto clamp(.6rem,1.4vw,1rem);}
.nl--center .nl__form{width:100%;max-width:32rem;margin-inline:auto;}
.nl--center .nl__fine,.nl--center .nl__ok{text-align:center;margin-inline:auto;}
.nl--center .nl__form.is-done ~ .nl__ok.is-ok{justify-content:center;}
.nl--center .nl__lessons{width:100%;max-width:32rem;margin:clamp(1.6rem,3vw,2.2rem) auto 0;text-align:left;}
@media(max-width:900px){
  .nl--center .nl__env{width:clamp(140px,40vw,180px);}
  .nl--center .nl__title{font-size:clamp(2.6rem,11vw,4rem);}
}

/* tighter: the letter's travel space above the envelope read as an empty gap under the copy */
.nl--center .nl__sub{margin-bottom:clamp(.4rem,1vw,.8rem);}
.nl--center .nl__env{margin-top:clamp(-1.6rem,-1.2vw,-.6rem);}

/* ==== NO GLOW ON LIGHT PHOTO GROUNDS (Dev 2026-10-06: "in any section with a background image which is a kind of
   light background ... remove that glowing effect around the text cus thats really noticeable") ====
   Dark ink (navy text, deep crimson accents) sits on light photo areas with no halo, no shadow and no filter at all,
   in every section and in the nav bar while it sits over a light hero. Light ink on dark photos keeps its soft
   dark shadow (Dev only named the light grounds). Placement on calm areas carries the readability. */
:root{--pi-sh-dark:none;--pi-sh-dark-busy:none;--pi-fd-dark:none;--pi-fd-dark-busy:none;}
[data-ink="dark"],[data-ink="dark"] *{text-shadow:none!important;}
[data-ink="dark"] :is(em,.k4-grad,.grad-word),[data-ink="dark"]:is(em,.k4-grad,.grad-word){filter:none!important;}
.nav:not(.is-scrolled)[data-nav-ink="dark"] :is(.brand__name,.brand__tag,.nav__link),
.nav:not(.is-scrolled)[data-nav-busy][data-nav-ink="dark"] :is(.brand__name,.brand__tag,.nav__link),
.nav:not(.is-scrolled)[data-nav-busy="2"][data-nav-ink="dark"] :is(.brand__name,.brand__tag,.nav__link){text-shadow:none!important;}
/* NO TEXT SHADOWS:BEGIN (Dev 2026-10-07: "remove that shadow kind of thing over all the headings and even the nav bar").
   Every halo the photo system put behind light or dark text (text-shadow and the drop-shadow filter on gradient words),
   and every shadow on the nav words, is gone. Text sits on the photo with its colour only. */
:root{--pi-sh-light:none;--pi-sh-light-busy:none;--pi-fd-light:none;--pi-fd-light-busy:none;--pi-sh-dark:none;--pi-sh-dark-busy:none;--pi-fd-dark:none;--pi-fd-dark-busy:none;--ink-sh:none;--ink-fd:none;}
html body [data-ink],html body [data-ink] *{text-shadow:none!important;}
html body [data-ink] :is(em,.k4-grad,.grad-word,.mkx-shine__em),html body [data-ink]:is(em,.k4-grad,.grad-word){filter:none!important;}
html body :is(h1,h2,h3,.lead-stmt,.phero__title,.phero__roles,.phero__roles *){text-shadow:none!important;}
html body .nav,html body .nav *{text-shadow:none!important;}
/* NO TEXT SHADOWS:END */
/* PAPERCUT:BEGIN v3 (Dev 2026-10-07: torn paper between sections and on every box, in the style of his kit Changes/paper-cut; then
   "make alternating sections light and dark so that the paper cut design is smooth and doesnt look like its tweaking"). The runtime is
   the PAPERCUT block at the end of fable.js: it draws every torn edge and every torn box as vector paper (no live filters).

   LIGHT AND DARK GROUNDS: the switch page builders use.
   LIGHT section: class="sec-paper k4-sec--light" (sec-paper-2 for the second light, #EEF1F6). Take sec-dark and on-dark off.
     It sets the ground #F4F7FB and navy ink #0B1B33, --ink-soft #42506B, --crimson the deep #A5202A (labels, .ulink, .h-2 em, struck
     lines), navy hairlines (--hair), the box ring and the torn rim's hover colour #E23A46, the kit focus ring in deep crimson, every
     .k4-grad accent word on the deep light ramp (no k4-grad--light class needed), and the light k4 secondary, ghost and text buttons.
     Never coral #FF6B75 on light (2.6:1): #C9303D for UI and large text, #A5202A or #9C1B27 for small text.
   DARK section: class="sec-dark on-dark": navy #0C1833, paper ink, coral on navy, the vivid --crimson, white hairlines.
   A NAVY SHEET inside a light section (an art stage graded for navy, a slide deck, a next lesson card): give the element its own navy
     background and the class on-dark. It becomes a navy torn paper box and its ink, accents and focus flip back to the navy set.
   A WHITE SHEET inside a navy section: a white background is enough; the box engine papers it.
   EDGES read the grounds from the page. data-ground="navy|light|light-2|cream|crimson|photo|photo-dark|photo-light" on a section forces
     its ground; data-edge="none" removes the tear above a section.
   BOXES: every box is torn paper in its own background colour (a box with no fill gets paper one step off its ground: a lighter navy
     on navy, white on light). data-paper="off" keeps an element crisp, data-paper="on" papers one the finder misses. */
.k4-sec--light{--crimson:#A5202A;--hair:rgb(11 27 51 / .14);--hair-strong:rgb(11 27 51 / .24);--mkx-ring:#E23A46;--ink-soft:#42506B;--k4-focus:var(--k4-deep,#9C1B27);color:#0B1B33;}
.k4-sec--light .k4-grad:where(:not(.on-dark .k4-grad,.sec-dark .k4-grad)){background-image:var(--k4-grad-text-light);color:var(--k4-deep);}
.k4-sec--light .ulink{color:var(--crimson);}
.k4-sec--light :is(.on-dark,.sec-dark){--crimson:var(--crimson-glow);--hair:var(--hair-inv);--hair-strong:var(--hair-inv-strong);--mkx-ring:#FF6B75;--ink-soft:rgb(244 247 251 / .78);--k4-focus:var(--k4-coral,#FF6B75);color:var(--paper);}

/* torn edges between grounds (one svg per side of a boundary; the up tears live at the bottom of the upper section) */
.ppr-host{position:relative;}
.ppr-edge{position:absolute;left:0;right:0;pointer-events:none;z-index:4;}
.ppr-edge > svg{display:block;width:100%;height:100%;overflow:visible;}
.ppr-bridge{z-index:1;}
/* arrival: the tear runs across an edge once, the first time it scrolls into view (the runtime arms it; reduced motion never does) */
.ppr-edge--arm > svg{clip-path:inset(-24px 100% -24px 0);}
.ppr-edge--arm.ppr-edge--in > svg{clip-path:inset(-24px 0 -24px 0);transition:clip-path 1.1s cubic-bezier(.45,.1,.25,1);}

/* torn paper boxes: the paper, its rim and its shadow are the box's own border-image (outset, so overflow never clips it and it sits
   under the content); the box's own fill, ring, radius and shadow step aside. Hover and keyboard focus swap in the crimson rim. */
.ppr-box{border-image:var(--ppr-i) 0 fill / 0 / var(--ppr-o,22px) stretch !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;}
.ppr-box.ppr-box.ppr-box.ppr-box{outline:0 none transparent !important;}
.ppr-ease{transition:border-image-source .22s ease;}
@media (hover:hover) and (pointer:fine){
  .ppr-box:not(.ppr-nohot):hover,:is(a,button,[role="link"]):not(.ppr-box):hover .ppr-box:not(.ppr-nohot){border-image-source:var(--ppr-ih) !important;transition:border-image-source .22s ease !important;}
}
.ppr-box:not(.ppr-nohot):is(:focus-visible,:has(:focus-visible)),:is(a,button,[role="link"]):not(.ppr-box):focus-visible .ppr-box:not(.ppr-nohot),.ppr-box.ppr-hot{border-image-source:var(--ppr-ih) !important;transition:border-image-source .22s ease !important;}
.ppr-photo{border-radius:0 !important;}
/* a tap on a phone shows the same crimson rim while the finger is down */
@media (hover:none){
  .ppr-box:not(.ppr-nohot):active,:is(a,button,[role="link"]):not(.ppr-box):active .ppr-box:not(.ppr-nohot){border-image-source:var(--ppr-ih) !important;}
}
/* PAPERCUT:END */
/* NAVC:BEGIN papercut heart nav (concept C, judged 2026-10-07; Dev: "in the nav bar, it should be a kind of heart cut illustration",
   then "the nav bar is ass, make it better"). The brand badge becomes a cut paper heart traced from the Lynch and Jaffe plate (CC BY 2.5,
   credited in assets/images/med/CREDITS.txt): each part of the plate (ventricles, right atrium, aorta and its coronary branch, the
   veins) is one flat sheet of paper on a white paper rim. Scrolled, the bar is one sheet of navy kit paper (fine grain, a white rim and a
   soft shadow under its edge) and the navy is cut round the heart, so the heart sits in its own tab of the same paper.
   --navc-s is px per heart unit (the heart is 200 units tall); --navc-half is half the bar height, i.e. the bar's bottom edge measured
   from the brand's centre. The heart is placed so the bar edge always lands 176 units down the heart, where the tab svg expects it. */
.nav{--navc-s:.42px;--navc-x:-1px;--navc-half:46px;--navc-y:calc(var(--navc-half) - 176 * var(--navc-s));
  --navc-heart:url("../images/brand/heart-cut.svg");--navc-cradle:url("../images/brand/heart-cradle.svg");}
@media(max-width:1160px){.nav{--navc-half:44.5px;}}
@media(max-width:1000px){.nav{--navc-s:.36px;--navc-x:0px;}}
/* phone menu open: a slightly smaller heart set a little higher, so it clears the first menu word (Mission) by more than 16px */
.nav.is-menu{--navc-s:.32px;--navc-half:36px;}
/* the badge keeps its place in the markup (and its view transition); the heart is drawn in its place */
.nav .brand__mark{opacity:0;width:calc(140 * var(--navc-s));}
.nav .brand__lock{position:relative;z-index:2;}
.nav .brand::before,.nav .brand::after{content:'';position:absolute;pointer-events:none;top:50%;
  left:calc(var(--navc-x) - 60 * var(--navc-s));margin-top:calc(var(--navc-y) - 60 * var(--navc-s));
  width:calc(258.4 * var(--navc-s));height:calc(370 * var(--navc-s));background:center/100% 100% no-repeat;}
.nav .brand::before{z-index:1;background-image:var(--navc-heart);transform-origin:50% 45%;}
/* the tab, shown only where it hangs below the bar; its paper starts at the fillets (the flat shoulders are the bar's own crisp rim),
   it overlaps the bar by 1px so there is no seam, and carries the same paper rim */
.nav .brand::after{z-index:0;background-image:var(--navc-cradle);clip-path:inset(calc(234 * var(--navc-s)) 0 0 0);
  filter:drop-shadow(0 2px 0 #FBFBF8) drop-shadow(0 1px 1px rgba(5,12,32,.35)) drop-shadow(0 6px 7px rgba(5,12,32,.26));
  opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
.nav.is-scrolled .brand::after{opacity:1;transform:none;}
.nav.is-menu .brand::after{opacity:0;}
/* the bar: one sheet of navy kit paper with grain; the hard white drop shadow is the kit's paper rim under its bottom edge */
.nav::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
  opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
.nav::before,.nav.is-scrolled::before{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E") #0C1833;
  filter:drop-shadow(0 2px 0 #FBFBF8) drop-shadow(0 1px 1px rgba(5,12,32,.35)) drop-shadow(0 7px 9px rgba(5,12,32,.22));}
.nav.is-scrolled::before{opacity:1;transform:none;}
/* the heart beats once (lub dub) as the bar lands, and once on brand hover or keyboard focus */
.nav.is-scrolled .brand::before{animation:navc-beat 1s cubic-bezier(.3,.6,.3,1) .18s 1;}
.nav .brand:is(:hover,:focus-visible)::before{animation:navc-beat2 1s cubic-bezier(.3,.6,.3,1) 1;}
@keyframes navc-beat{0%,30%,100%{transform:none}12%{transform:scale(1.07)}44%{transform:scale(1.04)}}
@keyframes navc-beat2{0%,30%,100%{transform:none}12%{transform:scale(1.07)}44%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){
  .nav::before,.nav .brand::after{transition:opacity .2s linear;transform:none;}
  .nav.is-scrolled .brand::before,.nav .brand:is(:hover,:focus-visible)::before{animation:none;}
}
/* NAV PAPER (shared cycle 2026-10-07; Dev: "LITERALLY EVERYWHERE there are the boxes or borders ... it has to have the paper cut or
   torn paper thing as the designs as the brders"). The runtime (NAV PAPER in the fable.js PAPERCUT block) draws the bar as one sheet of
   navy kit paper whose bottom edge is torn as calmly as the section edges, with the heart's tab cut into the same sheet, and hands it over
   as --navp (--navp-flat without the tab, for the open phone menu). It replaces the straight white rule, the grain and the cradle art.
   data-nav-paper: the PHOTO system found a hero that cannot carry every nav word at 3:1 with no text shadow, so the paper shows at the
   top too and the words are light. */
.nav.nav--ppr::before,.nav.nav--ppr.is-scrolled::before{bottom:auto;height:var(--navp-h);background:var(--navp) 0 0/100% 100% no-repeat;filter:none;}
.nav.nav--ppr.nav--dk::before{background-image:var(--navp-dk);}
.nav.nav--ppr.is-menu::before{background-image:var(--navp-flat);}
.nav.nav--ppr .brand::after{display:none;}
.nav[data-nav-paper]:not(.is-scrolled)::before{opacity:1;transform:none;}
.nav[data-nav-paper]:not(.is-scrolled){--nav-ink:#F4F7FB;--nav-ink-soft:rgb(244 247 251 / .9);--nav-ul:#FF6B75;--nav-cur:#E23A46;}
/* NAVC:END */
/* LOGO BACK:BEGIN (Dev 2026-10-08: "change the nav bar logo back to how it was previously he doesnt want this and that bump down in
   the nav bar where the heart is get that back to normal"): the original round heart badge shows again, the cut paper heart and its tab
   are off, and the bar keeps its calm torn paper edge with no bump. */
.nav .brand__mark{opacity:1;width:46px;}
.nav .brand::before,.nav .brand::after{content:none;display:none;animation:none;}
/* LOGO BACK:END */
/* FOOTER LEGAL:BEGIN (2026-10-08): Privacy Policy, Terms of Use and Medical Disclaimer links in the footer bar */
.footer__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-right:auto;margin-left:clamp(0rem,2vw,1.6rem);}
.footer__legal a{color:var(--on-dark-faint,rgb(244 247 251 / .62));font-size:.88rem;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.footer__legal a:hover,.footer__legal a:focus-visible{color:#F4F7FB;border-bottom-color:#FF6B75;}
@media(max-width:700px){.footer__legal{margin-left:0;}}
/* FOOTER LEGAL:END */
/* FOOTER V2:BEGIN (Dev 2026-10-08: "look at the bottom that shit is not spaced out properly and add proper icons for each").
   Four columns that share the width evenly: identity, Explore (its nine links in two columns), Follow, Legal; every link carries
   an icon (Lucide outline icons for the pages and legal links, the brand marks for the social links), one size, one gap, one colour. */
.footer--v2 .footer__main{grid-template-columns:minmax(0,1.25fr) minmax(0,1.35fr) minmax(0,.85fr) minmax(0,1fr);column-gap:clamp(1.6rem,3.6vw,3.6rem);}
.footer--v2 .footer__id,.footer--v2 .footer__nav,.footer--v2 .footer__follow,.footer--v2 .footer__legalcol{grid-column:auto;}
.footer--v2 .footer__nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:clamp(1.6rem,2.6vw,2.6rem);row-gap:.7rem;align-content:start;}
.footer--v2 .footer__nav::before{grid-column:1 / -1;margin:0 0 .15rem;}
.footer--v2 .footer__k,.footer--v2 .footer__nav::before{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgb(244 247 251 / .55);margin-bottom:.95rem;}
.footer--v2 .footer__nav::before{margin-bottom:.25rem;}
.footer--v2 .footer__socs{gap:.7rem;}
.footer--v2 :is(.footer__nav a,.footer__soc,.footer__mail){gap:.6rem;font-size:.98rem;}
.footer--v2 .footer__ico{width:18px;height:18px;flex:none;color:#FF6B75;opacity:.92;transition:transform .3s var(--ease-snap),opacity .25s ease;}
.footer--v2 .footer__ico--brand{fill:currentColor;width:17px;height:17px;}
.footer--v2 .footer__soc[aria-label="Facebook"] svg,.footer--v2 .footer__soc[aria-label="Reddit"] svg{background-color:transparent;-webkit-mask-image:none;mask-image:none;}
.footer--v2 .footer__soc[aria-label="Facebook"] svg path,.footer--v2 .footer__soc[aria-label="Reddit"] svg path{display:inline;}
@media(hover:hover) and (pointer:fine){.footer--v2 :is(.footer__nav a,.footer__soc,.footer__mail):hover .footer__ico{transform:translateX(2px);opacity:1;}}
.footer--v2 .footer__mail{margin-top:1.3rem;}
.footer--v2 .footer__bar{border-top:1px solid rgb(244 247 251 / .1);padding-top:clamp(1.1rem,2vw,1.5rem);}
@media(max-width:1000px){
  .footer--v2 .footer__main{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem;}
}
@media(max-width:700px){
  .footer--v2 .footer__main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.4rem;row-gap:1.8rem;}
  .footer--v2 .footer__id,.footer--v2 .footer__nav{grid-column:1 / -1;}
  .footer--v2 .footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.55rem;}
  .footer--v2 :is(.footer__nav a,.footer__soc,.footer__mail){font-size:.95rem;}
  .footer--v2 .footer__socs{gap:.55rem;}
}
/* fixes: outline icons stay outlines, the legal list matches the Follow list, TikTok mark at the same visual size */
.footer--v2 .footer__ico:not(.footer__ico--brand){fill:none !important;}
.footer--v2 .footer__legalcol .footer__legal{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;margin:0;gap:.7rem;}
.footer--v2 .footer__legalcol .footer__legal a{color:var(--on-dark-soft);font-size:.98rem;border-bottom:0;}
.footer--v2 .footer__soc[aria-label="TikTok"] .footer__ico{width:20px;height:20px;margin-inline:-1.5px;}
@media(max-width:700px){.footer--v2 .footer__legalcol .footer__legal{gap:.55rem;}.footer--v2 .footer__legalcol .footer__legal a{font-size:.95rem;}}
.footer--v2 .footer__socs li{display:flex;margin:0;}
/* FOOTER V2:END */