/* ==========================================================================
   ENTAIL CAPITAL — "Atelier" design system  ·  assets/css/atelier.css
   Single source of truth for every page template. Derived from
   Brand-Elements/Entail-Design-System-Master.xml. Canvas OR instrument
   per section, One-Crimson Rule, mono-for-numbers, frames not shadows.
   ========================================================================== */

/* 1. TOKENS ----------------------------------------------------------------- */
:root{
  --tail-navy:#0A1D3A; --tail-navy-deep:#081428; --petrol:#064769;
  --crimson:#C9173F; --crimson-hover:#A91234;
  --amber:#D98E32; --amber-text:#9C621C;
  --teal-link:#0F6B8A; --teal-link-hover:#0B5570; --teal-link-dark:#7FC2DB;
  --ink:#101F38; --cream:#F4EFE6; --paper:#FAF7F0; --surface:#FFFFFF;
  --frame-line:#D8D0C0; --frame-line-dark:#23365C;
  --annotation:#5B6273; --annotation-dark:#9AA6BC;

  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,monospace;

  --fs-12:0.75rem; --fs-13:0.8125rem; --fs-16:1rem;
  --fs-20:1.25rem; --fs-25:1.5625rem; --fs-31:1.9375rem;
  --fs-39:2.4375rem; --fs-49:3.0625rem; --fs-61:3.8125rem;
  --fs-display:clamp(2.9rem,7vw,6.8rem);
  --fs-h2:clamp(2.1rem,4.2vw,3.8rem);
  --fs-h3:clamp(1.6rem,3vw,2.4rem);
  --fs-ghost:clamp(6rem,15vw,13rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;
  --section-pad:clamp(72px,10vw,144px);

  --w-text:720px; --w-content:1140px; --w-data:1320px;
  --radius:2px;
  --ease:cubic-bezier(0.2,0,0,1);
  --t-fast:250ms; --t-base:500ms;

  --contour-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='%23F4EFE6' stroke-width='1'%3E%3Cpath d='M0 28 C 80 8, 160 48, 240 28 S 400 8, 480 28'/%3E%3Cpath d='M0 68 C 80 48, 160 88, 240 68 S 400 48, 480 68'/%3E%3Cpath d='M0 108 C 80 88, 160 128, 240 108 S 400 88, 480 108'/%3E%3Cpath d='M0 148 C 80 128, 160 168, 240 148 S 400 128, 480 148'/%3E%3Cpath d='M0 188 C 80 168, 160 208, 240 188 S 400 168, 480 188'/%3E%3Cpath d='M0 228 C 80 208, 160 248, 240 228 S 400 208, 480 228'/%3E%3C/g%3E%3C/svg%3E");
  --contour-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='%23101F38' stroke-width='1'%3E%3Cpath d='M0 28 C 80 8, 160 48, 240 28 S 400 8, 480 28'/%3E%3Cpath d='M0 68 C 80 48, 160 88, 240 68 S 400 48, 480 68'/%3E%3Cpath d='M0 108 C 80 88, 160 128, 240 108 S 400 88, 480 108'/%3E%3Cpath d='M0 148 C 80 128, 160 168, 240 148 S 400 128, 480 148'/%3E%3Cpath d='M0 188 C 80 168, 160 208, 240 188 S 400 168, 480 188'/%3E%3Cpath d='M0 228 C 80 208, 160 248, 240 228 S 400 208, 480 228'/%3E%3C/g%3E%3C/svg%3E");
  --contour-amber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23D98E32' stroke-width='1.4'%3E%3Cpath d='M-40 120 C 160 60, 300 200, 470 150 S 760 40, 940 130'/%3E%3Cpath d='M-40 180 C 150 130, 320 250, 480 205 S 770 110, 940 190'/%3E%3Cpath d='M-40 250 C 170 210, 300 320, 500 270 S 780 200, 940 260'/%3E%3Cpath d='M-40 330 C 140 300, 360 250, 520 330 S 780 300, 940 330'/%3E%3Cpath d='M-40 410 C 180 380, 330 470, 520 410 S 800 360, 940 420'/%3E%3Cpath d='M-40 300 C 220 270, 360 360, 470 300' stroke-width='2'/%3E%3Cpath d='M-40 480 C 160 450, 340 540, 540 480 S 790 440, 940 500'/%3E%3C/g%3E%3C/svg%3E");

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* 2. BASE ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--fs-16);line-height:1.6;color:var(--ink);
  background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--teal-link)} a:hover{color:var(--teal-link-hover)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
::selection{background:var(--petrol);color:var(--cream)}
h1,h2{font-family:var(--font-serif);font-weight:380;line-height:1.0;letter-spacing:-0.015em;text-wrap:balance}
h3,h4{font-family:var(--font-sans);font-weight:600;line-height:1.25}
em.hot{font-style:italic;font-weight:430;color:var(--amber)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);
  padding:var(--s-3) var(--s-6);font-family:var(--font-mono);font-size:var(--fs-13)}
.skip-link:focus{left:0}

.container{width:100%;max-width:var(--w-content);margin-inline:auto;padding-inline:var(--s-6)}
.container--text{max-width:var(--w-text)} .container--data{max-width:var(--w-data)}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-13);font-weight:500;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--annotation)}
.eyebrow--dark{color:var(--annotation-dark)}
.annotation{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--annotation);line-height:1.5}
.annotation--dark{color:var(--annotation-dark)}

.ink-rule{display:block;width:100%;height:12px;color:var(--ink)}
.ink-rule--dark{color:var(--frame-line-dark)}
.ink-rule svg{width:100%;height:100%}

.grained{position:relative}
.grained::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--grain);background-size:240px 240px;opacity:0.05;mix-blend-mode:overlay}

/* 3. BUTTONS ---------------------------------------------------------------- */
.btn{display:inline-block;font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1;
  padding:14px 28px;border-radius:var(--radius);text-decoration:none;cursor:pointer;border:0;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn--primary{background:var(--crimson);color:#fff}
.btn--primary:hover{background:var(--crimson-hover);color:#fff}
.btn--secondary{background:transparent;border:1.5px solid var(--petrol);color:var(--petrol);padding:12.5px 26.5px}
.btn--secondary:hover{background:rgba(6,71,105,0.08);color:var(--petrol)}
.btn--ghost-light{background:transparent;border:1.5px solid rgba(244,239,230,0.55);color:var(--cream);padding:12.5px 26.5px}
.btn--ghost-light:hover{border-color:var(--cream);background:rgba(244,239,230,0.07);color:var(--cream)}
.btn--tertiary{background:none;border:0;padding:0;border-radius:0;font-family:var(--font-mono);
  font-size:var(--fs-13);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--teal-link);text-decoration:none}
.btn--tertiary:hover{color:var(--teal-link-hover);text-decoration:underline}
.btn--tertiary::after{content:" \2192"}

/* 4. REVEAL ----------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.reveal[data-delay="4"]{transition-delay:320ms}
.reveal[data-delay="5"]{transition-delay:400ms}

/* 5. HEADER ----------------------------------------------------------------- */
/* Solid navy on every page so the cream nav is always legible — light-toned
   pages (crisis singles, etc.) previously left the fixed header transparent over
   a cream background, making the menu invisible. One header colour sitewide. */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;background:var(--tail-navy);border-bottom:1px solid var(--frame-line-dark);
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.site-header.is-solid,.site-header.is-pinned{background:var(--tail-navy);border-bottom-color:var(--frame-line-dark)}
.site-header__inner{max-width:var(--w-data);margin-inline:auto;display:flex;align-items:center;
  gap:var(--s-8);padding:var(--s-4) var(--s-6);min-height:84px}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;white-space:nowrap}
.brand__logo{width:52px;height:52px;border-radius:50%;display:block}
.brand__name{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-25);color:var(--cream);letter-spacing:0.01em}
.site-nav{flex:1 1 auto;min-width:0;margin:0 var(--s-6);position:relative}
.site-nav ul{list-style:none;margin:0}
.site-nav a{font-family:var(--font-mono);font-size:var(--fs-13);font-weight:500;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--cream);text-decoration:none;white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent}
.site-nav__track > li > a:hover,.site-nav__track > li > a[aria-current="page"]{border-bottom-color:var(--crimson);color:var(--cream)}
.header-actions{display:flex;align-items:center;gap:var(--s-4)}

/* Hierarchical menu — the top level is always the smooth horizontal slider
   (mobile AND desktop). A submenu opens on hover (desktop) or by tapping its
   caret (.is-open; works on touch + desktop) as a full-width sub-bar below the
   header — fixed-positioned so the scroll strip never clips it. Adapted from the
   reference dropdown (dot indicator + panel + staggered enter) in the Entail CI
   palette: navy panel, cream labels, amber accent (NOT the reference's pinks). */
.site-nav ul.site-nav__track{display:flex;gap:var(--s-6);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-inline:48px;padding:var(--s-2) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-nav ul.site-nav__track::-webkit-scrollbar{display:none}
.site-nav__track > li{position:relative;scroll-snap-align:start;display:flex;align-items:center;gap:2px}
.site-nav ul.sub-menu{list-style:none;margin:0;padding:0}

/* caret affordance on parents (the reference's submenu cue) */
.nav-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:24px;flex:none;
  background:transparent;border:0;color:currentColor;cursor:pointer;padding:0}
.nav-sub-toggle span{display:block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-1px) rotate(45deg);transition:transform .2s var(--ease)}
.site-nav__track > li.is-open > .nav-sub-toggle span{transform:translateY(1px) rotate(-135deg)}

/* amber dot under a hovered / open parent (reference's $yellow dot → CI amber) */
.site-nav__track > li.has-sub::before{content:"";position:absolute;left:50%;bottom:-1px;width:5px;height:5px;
  margin-left:-2.5px;border-radius:50%;background:var(--amber);transform:scale(0);transition:transform .2s var(--ease)}
.site-nav__track > li.has-sub:hover::before,.site-nav__track > li.has-sub.is-open::before{transform:scale(1)}

/* narrow dropdown panel — appears directly under its parent item (top/left set
   in JS so the scroll strip never clips it). Reference format, CI palette. */
.site-nav ul.sub-menu{position:fixed;top:128px;left:0;z-index:120;display:none;min-width:236px;max-width:300px;
  background:var(--tail-navy);border:1px solid var(--frame-line-dark);border-radius:var(--radius);
  box-shadow:0 22px 48px rgba(5,10,22,0.5);padding:var(--s-2) 0}
/* invisible 20px hover buffer around the box (and bridging the gap up to the
   parent) so the dropdown does not vanish while the cursor crosses into it */
.site-nav .sub-menu::before{content:"";position:absolute;inset:-20px;z-index:-1}
.site-nav__track > li.has-sub.is-open > ul.sub-menu{display:block;animation:navEnter .2s var(--ease)}
.site-nav .sub-menu li{display:block}
.site-nav .sub-menu a{display:block;padding:var(--s-3) var(--s-6);border-bottom:0;
  font-size:var(--fs-12);letter-spacing:0.06em;color:rgba(244,239,230,0.85);white-space:nowrap;
  transition:background-color .15s,color .15s}
.site-nav .sub-menu a:hover,.site-nav .sub-menu a[aria-current="page"]{color:var(--ink);background:var(--amber)}
@keyframes navEnter{from{opacity:0;transform:translateY(-8px) scaleY(.97)}to{opacity:1;transform:translateY(0) scaleY(1)}}

/* slider arrows — shown only when the strip overflows (atelier.js toggles [hidden]) */
.nav-arrow{display:grid;place-items:center;position:absolute;top:0;bottom:0;width:44px;border:0;cursor:pointer;
  color:var(--amber);padding:0;z-index:2;background:linear-gradient(90deg,var(--tail-navy) 55%,rgba(10,29,58,0) 100%)}
.nav-arrow--prev{left:-6px}
.nav-arrow--next{right:-6px;background:linear-gradient(270deg,var(--tail-navy) 55%,rgba(10,29,58,0) 100%)}
.nav-arrow svg{width:16px;height:16px}
.nav-arrow[hidden]{display:none}

@media (max-width:1100px){
  .site-header{background:var(--tail-navy);border-bottom-color:var(--frame-line-dark)}
  .site-header__inner{flex-wrap:wrap;gap:0 var(--s-8);padding-bottom:0}
  .header-actions .btn--ghost-light{display:none}
  .site-nav{order:3;flex:0 0 calc(100% + 2 * var(--s-6));margin:0 calc(-1 * var(--s-6))}
  .site-nav ul.site-nav__track{scroll-padding-inline:52px;padding:var(--s-2) 52px var(--s-3)}
  .site-nav ul.sub-menu{min-width:220px;max-width:calc(100vw - 16px)}
  .site-nav .sub-menu a{font-size:var(--fs-13)}
}

/* 6. HERO (home, canvas) ---------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:var(--cream);min-height:max(720px,100svh);display:flex;align-items:center;
  background:
    radial-gradient(46% 38% at 76% 66%, rgba(217,142,50,0.34) 0%, rgba(217,142,50,0.10) 44%, transparent 70%),
    radial-gradient(56% 48% at 90% 18%, rgba(15,107,138,0.42) 0%, transparent 64%),
    radial-gradient(64% 56% at 14% 88%, rgba(5,10,22,0.85) 0%, transparent 68%),
    radial-gradient(38% 32% at 52% 30%, rgba(6,71,105,0.55) 0%, transparent 70%),
    linear-gradient(158deg,#0A1D3A 0%,#0B2A4A 26%,#064769 52%,#0A2440 76%,#081428 100%)}
.hero__contours{position:absolute;inset:-10% -25%;pointer-events:none;background-image:var(--contour-light);
  background-size:480px 240px;opacity:0.10;animation:drift 36s linear infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-140px)}}
.hero__wave{position:absolute;right:-70px;bottom:-50px;width:min(58vw,780px);height:auto;pointer-events:none;
  animation:swell 28s var(--ease) infinite alternate}
@keyframes swell{from{transform:translate(0,0)}to{transform:translate(-26px,-14px)}}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,20,40,0.78) 0%,rgba(8,20,40,0.46) 50%,transparent 76%)}
.hero__inner{position:relative;z-index:2;max-width:var(--w-data);margin-inline:auto;width:100%;
  padding:150px var(--s-6) var(--s-24);display:grid;grid-template-columns:62fr 38fr;gap:var(--s-16);align-items:center}
.hero__title{font-size:var(--fs-display);font-weight:340;color:var(--cream);margin:var(--s-6) 0 var(--s-8)}
.hero__lede{max-width:34rem;font-size:var(--fs-16);color:rgba(244,239,230,0.88);margin-bottom:var(--s-8)}
.hero__actions{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.hero__actions .btn--tertiary{color:var(--teal-link-dark)}
.hero__actions .btn--tertiary:hover{color:var(--cream)}
.engine-panel{border:5px solid var(--tail-navy-deep);outline:1px solid rgba(244,239,230,0.14);outline-offset:3px;
  background:rgba(8,20,40,0.68);backdrop-filter:blur(2px);border-radius:var(--radius);padding:var(--s-6)}
.engine-panel__head{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.08em;color:var(--annotation-dark);text-transform:uppercase;border-bottom:1px solid var(--frame-line-dark);
  padding-bottom:var(--s-3);margin-bottom:var(--s-4)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.engine-panel__rows{display:grid;gap:var(--s-3)}
.engine-row{display:flex;justify-content:space-between;gap:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-13)}
.engine-row dt{color:var(--annotation-dark);text-transform:uppercase;letter-spacing:0.06em;font-size:var(--fs-12)}
.engine-row dd{color:var(--cream);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:var(--s-12);padding-top:130px}
  .engine-panel{max-width:420px}
  .hero__wave{right:-120px;bottom:-30px;width:90vw;opacity:0.8}
}

/* 7. PAGE HERO (cream canvas, MAE·ITO register — archive/landing heads) ------ */
.page-hero{position:relative;overflow:hidden;background:var(--cream);
  padding:calc(120px + var(--section-pad)) 0 var(--section-pad)}
.page-hero--dark{background:var(--tail-navy);color:var(--cream)}
.page-hero__map{position:absolute;inset:0;pointer-events:none;background-image:var(--contour-amber);
  background-size:1100px 720px;background-position:right -60px top -40px;opacity:0.20;
  -webkit-mask-image:linear-gradient(120deg,transparent 0%,#000 50%,#000 100%);mask-image:linear-gradient(120deg,transparent 0%,#000 50%,#000 100%)}
.page-hero--dark .page-hero__map{background-image:var(--contour-light);opacity:0.10}
.page-hero__pin{position:absolute;top:34%;right:12%;width:11px;height:11px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 5px rgba(217,142,50,0.18);pointer-events:none}
.page-hero__inner{position:relative;z-index:1;max-width:var(--w-content);margin-inline:auto;padding-inline:var(--s-6)}
.page-hero__crumb{margin-bottom:var(--s-6)}
.page-hero__crumb a{font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:0.08em;
  color:var(--teal-link);text-decoration:none}
.page-hero__crumb span{color:var(--annotation);font-family:var(--font-mono);font-size:var(--fs-12)}
.page-hero__title{font-size:var(--fs-display);font-weight:330;color:var(--ink);max-width:16ch;margin-bottom:var(--s-6)}
.page-hero--dark .page-hero__title{color:var(--cream)}
.page-hero__lede{max-width:42rem;color:var(--annotation)}
.page-hero--dark .page-hero__lede{color:var(--annotation-dark)}

/* 8. SECTION + ghost placard numerals --------------------------------------- */
.section{padding:var(--section-pad) 0;position:relative}
.section--tight{padding:var(--s-24) 0}
.section__head{max-width:var(--w-text);margin-bottom:var(--s-16);position:relative;z-index:1}
.section__num{position:absolute;top:-0.55em;left:-0.06em;z-index:0;font-family:var(--font-serif);font-weight:340;line-height:1;
  font-size:var(--fs-ghost);letter-spacing:-0.03em;color:rgba(6,71,105,0.09);user-select:none;pointer-events:none}
.section__num--dark{color:rgba(244,239,230,0.06)}
.section__title{font-size:var(--fs-h2);color:var(--ink);margin:var(--s-4) 0 var(--s-4);position:relative}
.section__sub{color:var(--annotation);max-width:38rem;position:relative}
.bg-cream{background:var(--cream)} .bg-paper{background:var(--paper)} .bg-navy{background:var(--tail-navy);color:var(--cream)}

/* 9. PROOF STRIP (instrument) ----------------------------------------------- */
.proof-strip{background:var(--tail-navy-deep);color:var(--cream);border-top:1px solid var(--frame-line-dark)}
.proof-strip__grid{max-width:var(--w-data);margin-inline:auto;padding:var(--s-12) var(--s-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-8)}
.metric{border-left:1px solid var(--frame-line-dark);padding-left:var(--s-6)}
.metric__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-39);font-weight:500;line-height:1.1;color:var(--cream)}
.metric__value--risk{color:var(--crimson)} .metric__value--up{color:var(--amber)}
.metric__label{font-size:var(--fs-13);color:var(--annotation-dark);margin-top:var(--s-2)}
.proof-strip__source{max-width:var(--w-data);margin-inline:auto;padding:0 var(--s-6) var(--s-6)}
@media (max-width:900px){.proof-strip__grid{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-6)}.metric__value{font-size:var(--fs-31)}}
@media (max-width:480px){.proof-strip__grid{grid-template-columns:1fr}}

/* 10. SYSTEM / GENERIC CARD GRID (instrument) ------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.system-card{background:var(--surface);border:1px solid var(--frame-line);border-radius:var(--radius);padding:var(--s-8);
  display:flex;flex-direction:column;gap:var(--s-4);transition:border-color var(--t-fast) var(--ease)}
.system-card:hover{border-color:var(--ink)}
.system-card--feature{border-width:4px;border-color:var(--ink)}
.system-card__name{font-family:var(--font-serif);font-weight:420;font-size:var(--fs-25);color:var(--ink);line-height:1.1}
.system-card__mech{font-size:var(--fs-16);color:var(--ink)}
.system-card__fear{font-size:var(--fs-13);color:var(--annotation)}
.system-card__metric{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--petrol);border-top:1px solid var(--frame-line);
  padding-top:var(--s-4);margin-top:auto}
.system-card .btn--tertiary{margin-top:var(--s-2)}
.cta-inline{margin-top:var(--s-16);display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;max-width:560px}}

/* 11. CRISIS CANON (canvas) ------------------------------------------------- */
.canon{background:radial-gradient(70% 60% at 50% -10%, rgba(6,71,105,0.5) 0%, transparent 60%),var(--tail-navy);color:var(--cream);position:relative;overflow:hidden}
.canon::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--contour-light);background-size:480px 240px;opacity:0.05}
.canon .section__title{color:var(--cream)} .canon .section__sub{color:var(--annotation-dark)}
.canon__track{display:flex;gap:var(--s-8);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--s-4) max(var(--s-6), calc((100vw - var(--w-data)) / 2 + var(--s-6))) var(--s-8);
  scrollbar-width:thin;scrollbar-color:var(--frame-line-dark) transparent}
.canon-grid{max-width:var(--w-data);margin-inline:auto;padding-inline:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-12) var(--s-8)}
@media (max-width:900px){.canon-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.canon-grid{grid-template-columns:1fr;max-width:420px}}
.canon-card{flex:0 0 clamp(272px,30vw,392px);scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none}
.canon-grid .canon-card{flex:none}
a.canon-card:hover{color:inherit}
.canvas-art{position:relative;aspect-ratio:4/5;border-radius:var(--radius);border:6px solid var(--tail-navy-deep);
  outline:1px solid rgba(244,239,230,0.16);outline-offset:4px;overflow:hidden;background:var(--tail-navy-deep);
  transition:transform var(--t-base) var(--ease)}
.canvas-art--wide{aspect-ratio:16/10}
.canon-card:hover .canvas-art{transform:translateY(-6px)}
.canvas-art svg.painting{position:absolute;inset:0;width:100%;height:100%;display:block}
.canvas-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:240px 240px;opacity:0.06;mix-blend-mode:overlay}
.canvas-art__hint{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s-3) var(--s-4);
  background:linear-gradient(transparent,rgba(8,20,40,0.82));font-family:var(--font-mono);font-size:var(--fs-12);
  color:var(--annotation-dark);letter-spacing:0.08em;text-transform:uppercase}
.canon-card__year{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--amber)}
.canon-card__title{font-family:var(--font-serif);font-weight:420;font-size:var(--fs-25);color:var(--cream);line-height:1.1}
.canon-card__stat{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--annotation-dark)}
.canon__hint{padding:0 var(--s-6);max-width:var(--w-data);margin-inline:auto}

/* 12. CANVAS HERO (crisis-single — campaign 70/30) -------------------------- */
.canvas-hero{position:relative;overflow:hidden;color:var(--cream);min-height:88svh;display:flex;align-items:flex-end;background:var(--tail-navy-deep)}
.canvas-hero__art{position:absolute;inset:0;z-index:0}
.canvas-hero__art svg.painting{width:100%;height:100%}
.canvas-hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(8,20,40,0.92) 0%,rgba(8,20,40,0.55) 36%,transparent 72%),
             linear-gradient(90deg,rgba(8,20,40,0.7) 0%,transparent 55%)}
.canvas-hero__inner{position:relative;z-index:2;max-width:var(--w-content);margin-inline:auto;width:100%;
  padding:var(--s-24) var(--s-6) var(--s-16)}
.canvas-hero__year{font-family:var(--font-mono);font-size:var(--fs-20);color:var(--amber);letter-spacing:0.04em}
.canvas-hero__title{font-size:var(--fs-display);font-weight:340;color:var(--cream);margin:var(--s-3) 0 var(--s-6);max-width:14ch}
.canvas-hero__lede{max-width:40rem;color:rgba(244,239,230,0.9)}

/* 13. INSTRUMENT SPEC TABLE (risk/scenario/product single) ------------------ */
.spec{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--frame-line);border-radius:var(--radius);overflow:hidden}
.spec caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;
  letter-spacing:0.08em;color:var(--annotation);padding:0 0 var(--s-4)}
.spec th,.spec td{text-align:left;padding:var(--s-4) var(--s-6);border-bottom:1px solid var(--frame-line);vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-13);color:var(--ink);width:38%}
.spec td{font-family:var(--font-mono);font-size:var(--fs-13);font-variant-numeric:tabular-nums;color:var(--ink)}
.spec td.is-risk{color:var(--crimson)} .spec td.is-up{color:var(--amber-text)}
.layout-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:var(--s-16);align-items:start}
.layout-2col--instrument{grid-template-columns:minmax(280px,360px) minmax(0,1fr)}
@media (max-width:880px){.layout-2col,.layout-2col--instrument{grid-template-columns:1fr;gap:var(--s-12)}}
.prose{max-width:var(--w-text);color:var(--ink)}
.prose>*+*{margin-top:var(--s-6)}
.prose h3{font-family:var(--font-serif);font-weight:430;font-size:var(--fs-h3);color:var(--ink);line-height:1.1;margin-top:var(--s-12)}
.prose p{font-size:var(--fs-16);line-height:1.7}
.prose .mono-fig{font-family:var(--font-mono);color:var(--petrol);font-variant-numeric:tabular-nums}
.prose figure.framed{border:5px solid var(--ink);border-radius:var(--radius);padding:0;overflow:hidden}
.prose figure.framed figcaption{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--annotation);padding:var(--s-3) var(--s-4)}

/* 14. EQUATION + ACCORDION (methodology / questions) ------------------------ */
.equation{background:var(--surface);border:1px solid var(--frame-line);border-radius:var(--radius);border-left:5px solid var(--ink);
  padding:var(--s-8);margin-bottom:var(--s-12);font-family:var(--font-mono);font-size:clamp(1rem,2.4vw,var(--fs-25));color:var(--ink);overflow-x:auto;white-space:nowrap}
.equation small{display:block;white-space:normal;margin-top:var(--s-3);font-size:var(--fs-12);color:var(--annotation)}
.accordion{border-top:1px solid var(--frame-line);max-width:var(--w-text)}
.accordion details{border-bottom:1px solid var(--frame-line)}
.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:var(--s-6) var(--s-2);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-20);color:var(--ink)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .acc-mark{font-family:var(--font-mono);font-weight:400;color:var(--annotation)}
.accordion summary .acc-mark::before{content:"+"}
.accordion details[open] summary .acc-mark::before{content:"\2212"}
.accordion .acc-body{padding:0 var(--s-2) var(--s-8);max-width:var(--w-text);color:var(--ink)}
.accordion .acc-body p+p{margin-top:var(--s-4)}
.fail-rate{font-family:var(--font-mono);color:var(--crimson);font-weight:500}

/* 15. PULL-QUOTE (cream canvas) --------------------------------------------- */
.pull-quote{background:var(--cream);position:relative;overflow:hidden}
.pull-quote__map{position:absolute;inset:0;pointer-events:none;background-image:var(--contour-amber);background-size:900px 600px;
  background-position:right -40px center;opacity:0.22;-webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 46%,#000 100%);mask-image:linear-gradient(100deg,transparent 0%,#000 46%,#000 100%)}
.pull-quote__pin{position:absolute;top:28%;right:14%;width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(217,142,50,0.18);pointer-events:none}
.pull-quote figure{position:relative;z-index:1}
.pull-quote .quote-mark{position:absolute;top:-0.40em;left:-0.06em;z-index:0;font-family:var(--font-serif);font-weight:340;line-height:1;
  font-size:var(--fs-ghost);color:rgba(6,71,105,0.13);user-select:none;pointer-events:none}
.pull-quote blockquote{position:relative;z-index:1;border-left:3px solid var(--petrol);padding-left:clamp(var(--s-6),4vw,var(--s-12));
  font-family:var(--font-serif);font-style:italic;font-weight:360;font-size:clamp(var(--fs-25),3.6vw,var(--fs-49));line-height:1.18;letter-spacing:-0.01em;color:var(--ink);text-wrap:balance}
.pull-quote figcaption{margin-top:var(--s-6);position:relative;z-index:1}

/* 16. EDITORIAL ARTICLE (research / blog single — 720px, 10/90) ------------- */
.article{background:var(--cream)}
.article__inner{max-width:var(--w-text);margin-inline:auto;padding:var(--section-pad) var(--s-6)}
.article__meta{display:flex;flex-wrap:wrap;gap:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-12);
  color:var(--annotation);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--s-6)}
.article__title{font-size:clamp(2.4rem,5vw,4rem);font-weight:340;color:var(--ink);margin-bottom:var(--s-8)}
.article__body>*+*{margin-top:var(--s-6)}
.article__body p{font-size:1.0625rem;line-height:1.75;max-width:68ch}
.article__body h2{font-family:var(--font-serif);font-weight:430;font-size:var(--fs-h3);margin-top:var(--s-16)}
.article__body h3{font-size:var(--fs-20);margin-top:var(--s-12)}
.article__body .data-callout{font-family:var(--font-mono);font-variant-numeric:tabular-nums;background:var(--surface);
  border:1px solid var(--frame-line);border-left:5px solid var(--petrol);border-radius:var(--radius);padding:var(--s-6);font-size:var(--fs-13);color:var(--ink)}
.article__body blockquote{border-left:3px solid var(--petrol);padding-left:var(--s-6);font-family:var(--font-serif);
  font-style:italic;font-size:var(--fs-25);line-height:1.25;color:var(--ink)}

/* 17. TIMELINE (about — methodology lineage, mono dates) -------------------- */
.timeline{max-width:var(--w-text);border-left:2px solid var(--frame-line);margin-left:var(--s-2)}
.timeline li{position:relative;list-style:none;padding:0 0 var(--s-12) var(--s-12)}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;background:var(--cream);border:2px solid var(--petrol);border-radius:50%}
.timeline li:last-child::before{border-color:var(--crimson);background:var(--crimson)}
.timeline .t-date{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--amber-text);font-variant-numeric:tabular-nums}
.timeline .t-title{font-family:var(--font-serif);font-weight:430;font-size:var(--fs-20);color:var(--ink);margin:var(--s-1) 0}
.timeline .t-body{color:var(--annotation)}

/* 18. FORMS (stained-glass framed) ------------------------------------------ */
.atelier-form{display:grid;gap:var(--s-6);max-width:560px}
.atelier-form--wide{max-width:none;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field--full{grid-column:1 / -1}
.field label{font-size:var(--fs-13);font-weight:500;color:var(--ink)}
.field .req{color:var(--crimson)}
.field input,.field select,.field textarea{width:100%;background:var(--surface);border:1px solid var(--frame-line);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:var(--fs-16);color:var(--ink);padding:11px 12px}
.field textarea{font-family:var(--font-sans);min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--petrol);outline:2px solid var(--amber);outline-offset:2px}
.field input[type="range"]{padding:0;accent-color:var(--petrol)}
.field .range-readout{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--petrol)}
.field .help{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--annotation)}
.form-frame{border:5px solid var(--ink);border-radius:var(--radius);background:var(--surface);padding:clamp(var(--s-6),4vw,var(--s-12))}
.form-ok{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--amber-text)}

/* 19. SANDBOX (instrument, home + dashboard) -------------------------------- */
.instrument-panel{background:var(--surface);border:5px solid var(--ink);border-radius:var(--radius);
  padding:clamp(var(--s-6),4vw,var(--s-12));display:grid;grid-template-columns:minmax(260px,34fr) 66fr;gap:var(--s-12)}
.sandbox-controls{display:flex;flex-direction:column;gap:var(--s-6)}
.sandbox-outputs{border-top:1px solid var(--frame-line);padding-top:var(--s-6);display:grid;gap:var(--s-3)}
.out-row{display:flex;justify-content:space-between;gap:var(--s-4);font-size:var(--fs-13)}
.out-row dt{color:var(--annotation)}
.out-row dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.out-row--hedged dd{color:var(--amber-text)}
.sandbox-chart-wrap{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.sandbox-chart-wrap svg{width:100%;height:auto}
@media (max-width:900px){.instrument-panel{grid-template-columns:1fr}}

/* 20. CTA BAND (canvas) ----------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;color:var(--cream);text-align:center;
  background:
    radial-gradient(58% 50% at 50% 108%, rgba(217,142,50,0.36) 0%, rgba(217,142,50,0.10) 50%, transparent 72%),
    radial-gradient(50% 40% at 12% -8%, rgba(15,107,138,0.35) 0%, transparent 65%),
    linear-gradient(180deg,#081428 0%,#0A1D3A 34%,#0B2A4A 58%,#064769 86%,#0A3A57 100%)}
.cta-band__contours{position:absolute;inset:0;pointer-events:none;background-image:var(--contour-light);background-size:480px 240px;opacity:0.07}
.cta-band__inner{position:relative;z-index:2;max-width:840px;margin-inline:auto;padding:var(--section-pad) var(--s-6)}
.cta-band__title{font-size:var(--fs-h2);color:var(--cream);margin-bottom:var(--s-4)}
.cta-band__sub{margin-bottom:var(--s-8)}

/* 21. FOOTER ---------------------------------------------------------------- */
.site-footer{background:var(--tail-navy-deep);color:var(--cream);position:relative;overflow:hidden}
.footer-arc{position:absolute;top:-90px;right:-70px;opacity:0.9;pointer-events:none}
.site-footer__inner{max-width:var(--w-data);margin-inline:auto;padding:var(--s-24) var(--s-6) var(--s-8);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--s-12) var(--s-8);position:relative}
.footer-col h4{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--annotation-dark);margin-bottom:var(--s-4)}
.footer-col ul{list-style:none;display:grid;gap:var(--s-3)}
.footer-col a{color:var(--cream);text-decoration:none;font-size:var(--fs-13)}
.footer-col a:hover{color:var(--teal-link-dark);text-decoration:underline}
.newsletter p{font-size:var(--fs-13);color:var(--annotation-dark);margin-bottom:var(--s-4);max-width:26rem}
.newsletter__frame{display:flex;border:4px solid var(--frame-line-dark);border-radius:var(--radius);max-width:380px}
.newsletter__frame input{flex:1;min-width:0;background:var(--surface);border:0;font-family:var(--font-mono);font-size:var(--fs-13);color:var(--ink);padding:12px}
.newsletter__frame button{background:var(--petrol);color:var(--cream);border:0;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-13);padding:12px 18px}
.newsletter__frame button:hover{background:#053A56}
.newsletter__ok{margin-top:var(--s-2)}
.site-footer__legal{max-width:var(--w-data);margin-inline:auto;padding:var(--s-6);border-top:1px solid var(--frame-line-dark)}
@media (max-width:900px){.site-footer__inner{grid-template-columns:1fr 1fr}.newsletter{grid-column:1 / -1}
  .newsletter__frame input{font-size:var(--fs-16)}} /* ≥16px = no iOS focus zoom */

/* 22. HERO ART BAND (one painting per template — "the site is a painting") -- */
.page-hero--art{display:flex;align-items:flex-end;min-height:clamp(420px,56svh,640px);
  padding:calc(96px + var(--s-16)) 0 var(--s-12)}
.page-hero--art.page-hero--compact{min-height:clamp(300px,38svh,460px);padding-top:calc(96px + var(--s-8))}
.page-hero--art .page-hero__inner{width:100%}
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-art__media{position:absolute;inset:0}
.hero-art__media svg.painting{position:absolute;inset:0;width:100%;height:100%}
.hero-art__scrim{position:absolute;inset:0}
.is-tone-light .hero-art__scrim{background:
  linear-gradient(100deg,var(--cream) 0%,rgba(244,239,230,0.92) 36%,rgba(244,239,230,0.55) 58%,rgba(244,239,230,0.10) 82%,transparent 100%),
  linear-gradient(0deg,var(--cream) 0%,rgba(244,239,230,0.40) 16%,transparent 38%)}
.is-tone-dark .hero-art__scrim{background:
  linear-gradient(100deg,rgba(8,20,40,0.94) 0%,rgba(8,20,40,0.74) 44%,rgba(8,20,40,0.28) 74%,transparent 100%),
  linear-gradient(0deg,rgba(8,20,40,0.85) 0%,transparent 38%)}
.page-hero--compact .hero-art__scrim{backdrop-filter:none}
.is-tone-light.page-hero--compact .hero-art__scrim{background:
  linear-gradient(100deg,var(--cream) 0%,rgba(244,239,230,0.95) 44%,rgba(244,239,230,0.70) 66%,rgba(244,239,230,0.22) 88%,transparent 100%),
  linear-gradient(0deg,var(--cream) 0%,rgba(244,239,230,0.45) 18%,transparent 42%)}

/* 23. FADE VEIL — paint sinks into the ground, then returns ------------------ */
.fade-stroke{opacity:0;animation:gessoFade var(--fade-dur,26s) var(--ease) infinite;
  animation-delay:var(--fade-delay,0s)}
@keyframes gessoFade{0%,55%{opacity:0}70%,84%{opacity:0.92}96%,100%{opacity:0}}
.hero-veil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* 24. ART SLOT (content figure placeholders, gallery-framed, zero CLS) ------- */
.art-slot{max-width:var(--w-text);margin-block:var(--s-12)}
.art-slot__media{position:relative;aspect-ratio:var(--ratio,16/9);background:var(--paper);
  border:6px solid var(--ink);outline:1px solid var(--frame-line);outline-offset:4px;
  border-radius:var(--radius);overflow:hidden}
.art-slot__media svg.painting{position:absolute;inset:0;width:100%;height:100%}
.art-slot figcaption{margin-top:var(--s-3)}

/* 25. SIM CHARTS (Safe Haven lab — instrument register) ----------------------- */
.sim-chart{background:var(--surface);border:5px solid var(--ink);border-radius:var(--radius);
  padding:clamp(var(--s-4),3vw,var(--s-8))}
.sim-chart svg{width:100%;height:auto}
.sim-controls{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:flex-end;margin-bottom:var(--s-4)}
.sim-readouts{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-8);font-size:var(--fs-13);
  border-top:1px solid var(--frame-line);padding-top:var(--s-4);margin-top:var(--s-4)}
.sim-readouts .ro-label{color:var(--annotation);display:block;font-family:var(--font-mono);
  font-size:var(--fs-12);text-transform:uppercase;letter-spacing:0.06em}
.sim-readouts dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.sim-tip{position:fixed;z-index:120;background:var(--ink);color:var(--cream);font-family:var(--font-mono);
  font-size:var(--fs-12);line-height:1.5;padding:8px 12px;border-radius:var(--radius);
  pointer-events:none;max-width:260px}
.payoff{max-width:560px}
/* One-Crimson, dashboard only: the §02 Kelly 5% VaR readout sits ~1467px below
   the §01 sandbox tail (also crimson), so on >1467px-tall (4K-native/portrait)
   viewports both data-crimsons could show at once. Cede the readout to amber on
   the dashboard so it never doubles the data-crimson; the standalone Simulation
   Lab keeps the crimson punch. !important beats renderKelly's inline color. */
body[data-page="dashboard"] [data-k-var]{color:var(--amber-text)!important}

/* 26. REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__contours,.hero__wave,.live-dot{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .canon-card:hover .canvas-art{transform:none}
  .fade-stroke{animation:none;opacity:0}
}

/* 27. FAQ component (instrument) -------------------------------------------- */
/* Markup contract (emitted by content-import page bodies — do not change here):
     section.section.faq[data-mode="instrument"]#faq
       > .container.container--data
         > p.eyebrow
         > .faq__list
             > details.faq__item
                 > summary.faq__q   (the question)
                 > .faq__a > p       (the answer)
   Design doctrine: cream "instrument" surface, frames-not-shadows, one-crimson
   (crimson is reserved — the marker uses ink/annotation, accents stay amber),
   mono eyebrow already styled by .eyebrow. The +/− marker is CSS-generated via
   summary::after (no marker span exists in the markup) and rotates on [open].   */

.faq{background:var(--cream)}
/* Frame, not shadow: a single hairline list bounded top/bottom by frame-line. */
.faq__list{max-width:var(--w-text);margin-inline:auto;border-top:1px solid var(--frame-line)}
.faq__item{border-bottom:1px solid var(--frame-line)}

/* Question row — sans 600 like .accordion summary, native marker suppressed. */
.faq__q{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);padding:var(--s-6) var(--s-2);font-family:var(--font-sans);font-weight:600;
  font-size:var(--fs-20);color:var(--ink)}
.faq__q::-webkit-details-marker{display:none} /* Safari/Chrome default triangle */
.faq__q::marker{content:""}                    /* Firefox default disclosure marker */

/* CSS-generated +/− marker. "+" closed, "−" open via the 45° rotation of the
   vertical bar — the horizontal bar is the glyph itself, so only the rotation
   animates (cheap, GPU-friendly) and the colour stays in the annotation tone
   so we never spend the one crimson here. */
.faq__q::after{content:"+";flex:0 0 auto;font-family:var(--font-mono);font-weight:400;font-size:var(--fs-25);
  line-height:1;color:var(--annotation);transform:rotate(0deg);transform-origin:center;
  transition:transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.faq__item[open] .faq__q::after{content:"\2212";color:var(--ink)} /* − (minus) when open */

/* Hover/focus affordance. Accessible focus uses the same amber ring doctrine as
   the global :focus-visible, scoped to the summary box. */
.faq__q:hover{color:var(--petrol)}
.faq__q:hover::after{color:var(--petrol)}
.faq__q:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Answer body — text column, ink on cream, paragraphs spaced like .acc-body. */
.faq__a{padding:0 var(--s-2) var(--s-8);max-width:var(--w-text);color:var(--ink)}
.faq__a p+p{margin-top:var(--s-4)}

/* Reduced motion: drop the marker rotation/colour transition (the +/− glyph
   swap remains, it is content not motion). */
@media (prefers-reduced-motion:reduce){
  .faq__q::after{transition:none}
}

/* ── Connections (the 12-link in-body footer that closes every page body) ──────
   Frame-not-shadow: a top hairline + an eyebrow label, then a wrapped, mono,
   middot-separated link row. Links sit in the petrol tone so the one-crimson
   budget is never spent here. */
.related{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--frame-line);
  max-width:var(--w-text)}
.related ul{list-style:none;margin:var(--s-4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 var(--s-3);font-family:var(--font-mono);font-size:var(--fs-15,0.85rem)}
.related li{display:inline-flex;align-items:baseline}
.related li+li::before{content:"·";margin-right:var(--s-3);color:var(--annotation)}
.related a{color:var(--petrol);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.related a:hover{color:var(--ink);border-bottom-color:var(--petrol)}
.related a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}