/* ============================================================
   A.L. Capital Advisory — Compute as an Asset Class
   House-style design system (Cormorant Garamond / DM Mono / Outfit)
   ============================================================ */

:root{
  --navy:#09131f;
  --bg:#09131f;
  --bg-2:#0d1826;
  --bg-3:#101d2d;
  --ink:#f5f0e8;
  --ink-2:rgba(245,240,232,.68);
  /* Was .42 = 3.7:1, which fails WCAG AA (4.5:1) for normal text — and this tier
     carries real prose: .exhibit-note, .obs-text, .role-desc, .mf-sub. .50 is the
     lowest alpha that clears 4.5:1 on ALL THREE surfaces; bg-3 (#101d2d) is the
     binding one at 4.67:1, so test against bg-3, not bg. */
  --ink-3:rgba(245,240,232,.50);
  /* --ink-lbl is the floor for any text that NAMES a datum or labels a control
     AND is set small in uppercase mono (8–10.5px): status pills, table column
     heads, stat-tile keys, timeline dates. Letterspaced uppercase at that size
     needs more than the AA minimum, which is the whole reason this tier is a
     step above --ink-3 rather than the same value. 5.4–5.6:1.
     --ink-4 (1.9:1) is decorative only — it is legal on a "·"/"→" separator and
     a purely graphical connector (arrow fill, dashed stroke, grid line, hollow
     marker outline) and on nothing that carries meaning. Found and fixed
     2026-09-01: 26 chart axis/tick/zone labels, tags and kickers were reading
     this token directly, in violation of the rule stated in this comment —
     moved to --ink-lbl. */
  --ink-lbl:rgba(245,240,232,.55);
  --ink-4:rgba(245,240,232,.22);
  --hair:rgba(245,240,232,.10);
  --gold:#C49A3C;
  --gold-dim:rgba(196,154,60,.55);
  --green:#1D9E75;
  --blue:#3D8EF0;
  --purple:#9B7EC8;
  --red:#E06C5A;
  --amber:#CC8844;
  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* KEY-FIGURE SCALE. Every number an exhibit reports as a RESULT uses one of
     these three sizes, in DM Mono, and nothing else. The page had grown eight
     readout systems across seven sizes (20/23/24/26/30/34/40px) in two
     typefaces — the single most visible way a research page reads as assembled
     rather than designed.
     Mono here is not a style preference. These values update live, and a
     proportional face changes width as digits change: the realized-yield
     readout drifted 17.9px across the slider range, so the number physically
     moved while the reader dragged it. tabular-nums pins every digit.
       --fig-display  one per exhibit — the figure that answers its title
       --fig-key      a small set of co-equal results
       --fig-sub      supporting grids of three or four */
  --fig-display:40px;
  --fig-key:30px;
  --fig-sub:22px;
  --maxw:868px;
  /* .article-wrap is --maxw wide with a 20px gutter each side, so the text
     measure is 828px and its half is 414px. */
  --measure-half:414px;
  /* --sig-bleed is how far a signature element extends past the text measure,
     PER SIDE. Expressed as a bleed rather than a width on purpose: the element
     keeps width:auto and grows only via symmetric negative margins, so there is
     no width that can disagree with a margin and push it off-screen. clamp()'s
     0px floor makes overflow structurally impossible — when there is no room the
     bleed is zero and the element simply sits at the measure.
     The 26px inset is the gap to the viewport edge, and also absorbs a classic
     scrollbar: 100vw counts the scrollbar, the content box does not.
     THE BREAKOUT IS OFF: the third value is the maximum bleed per side, and 0px
     holds every exhibit to the text measure. To re-enable, set it to 126px here
     and to 126px in the 1380px block below (126*2 + 828 = 1080px wide). The TOC
     tracks this token automatically, so nothing else needs changing. */
  --sig-bleed:clamp(0px, calc(50vw - var(--measure-half) - 26px), 0px);
  --radius:6px;
}
/* Above 1380px the floating TOC appears and claims 246px on the right (200 rail
   + 26 gap + 20 margin). Both sides give it up so the signature measure stays
   centred on the text measure — and .toc-float below derives its own position
   from the same token, so the two cannot overlap by construction. */
@media(min-width:1380px){
  :root{--sig-bleed:clamp(0px, calc(50vw - var(--measure-half) - 266px), 0px)}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,.faq-question:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.18;margin:0}
img{max-width:100%}
table{border-collapse:collapse;width:100%}
/* Table captions match the house treatment (hidden on AI Infrastructure) — but
   clipped rather than display:none, so they stay in the accessibility tree and
   still name each table for screen readers. The visible label is exhibit-title. */
caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Reading progress ---------- */
.reading-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold),var(--red));z-index:900;transition:width .1s linear}

/* ---------- Nav (verbatim from the equity research template) ---------- */
.nav{position:sticky;top:0;z-index:800;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;background:rgba(9,19,31,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(196,154,60,.12)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-monogram{width:36px;height:36px;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.08em}
.nav-logo-mark{display:block;font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--ink);letter-spacing:.04em}
.nav-logo-name{display:block;font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold);text-decoration:none}
.nav-cta{background:var(--gold)!important;color:#09131f!important;padding:8px 18px!important;border-radius:2px;font-weight:500!important}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;appearance:none}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--ink-3);transition:all .2s}
@media(max-width:900px){.nav{padding:0 20px}.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:#09131f;flex-direction:column;align-items:flex-start;padding:20px;gap:16px;border-bottom:1px solid rgba(196,154,60,.12)}.nav-links.open{display:flex}.nav-hamburger{display:flex}}

/* ---------- Breadcrumb ---------- */
/* Already inside .article-wrap, which supplies the measure and the 20px gutter.
   Re-declaring both here indented the breadcrumb 20px past the H1, the byline
   and every paragraph on the page — the left rail is the one line a reader's
   eye tracks down the whole document, so it has to be exact. */
.breadcrumb{margin:24px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb-sep{margin:0 8px;color:var(--ink-4)}
.breadcrumb-current{color:var(--ink-2)}

/* ---------- Article header ---------- */
.article-wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px 80px}
header.article-head{padding:20px 0 8px}
.article-category{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;opacity:.8}
.version-badge{display:inline-flex;align-items:flex-start;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,154,60,.25);border-radius:2px;padding:5px 10px;margin-bottom:20px;line-height:1.5;max-width:100%;word-break:break-word}
.version-badge b{color:var(--ink-2);font-weight:500}
/* The stamp is the badge; the review policy is an annotation on it. 134
   characters of letterspaced uppercase were wrapping to two lines in the most
   valuable position on the page — directly above the H1 — so the policy now
   sits on its own line in sentence case at the label tier. The content is
   deliberately kept: a trigger-based review policy is a differentiator, it just
   is not a headline. NOTE: the max-width rule below already existed and matched
   nothing — there was no .version-detail element until now. */
.version-detail{display:block;margin-top:4px;text-transform:none;letter-spacing:.005em;
  font-size:10.5px;line-height:1.5;color:var(--ink-lbl)}
@media(max-width:760px){.version-detail{display:none}}
.version-badge-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0;margin-top:5px}
.article-h1{font-size:clamp(26px,5vw,46px);font-weight:300;line-height:1.15;letter-spacing:-.01em;margin-bottom:0}
.article-byline-row{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:24px;padding-top:18px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);line-height:1.7}
.article-byline-row strong{color:var(--ink-2);font-weight:600}
.article-byline-sep{margin:0 6px;color:var(--ink-4);font-size:11px;line-height:1}

/* ---------- Boilerplate / scope note ---------- */
.scope-note{border:1px solid var(--hair);border-radius:var(--radius);padding:18px 20px;margin:30px 0;font-size:14px;color:var(--ink-3);background:rgba(245,240,232,.018)}
.scope-note a{color:var(--ink-2);border-bottom:1px solid var(--gold-dim)}
.scope-note a:hover{color:var(--gold);text-decoration:none}
.scope-note strong{color:var(--ink)}

/* ---------- Equity cross-links (role-only mentions -> equities coverage) ---------- */
.co-link{color:inherit;border-bottom:1px dotted currentColor;text-decoration:none}
.co-link:hover{opacity:.75}
.ticker-link{font-family:var(--mono);color:var(--gold);border-bottom:1px dotted var(--gold-dim);text-decoration:none}
.ticker-link:hover{color:#e0b955;border-bottom-color:var(--gold)}
.ext-arr{font-size:11px;opacity:.6}

/* ============================================================
   THE BIRTH OF THE COMPUTE ASSET CLASS — signature hero
   One exhibit, two views. MARKET FORMATION plots the four
   transactions on a chronology; CAPITAL STACK populates the
   six-layer framework with the selected deal's real participants.
   Solid nodes are capital that exists. The hollow node is a target.
   ============================================================ */
.mf{border:1px solid var(--hair);border-top:2px solid var(--gold);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(196,154,60,.055),rgba(196,154,60,0) 55%),var(--bg-2);
  padding:22px 26px 24px;margin:34px 0 30px}
.mf-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold-dim)}
/* Static, not pulsing. A pulsing dot is the house affordance for a live feed;
   this is a source-verification date, which does not change while you read. */
.mf-dot{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--green);flex:none}
.mf-title{font-family:var(--serif);font-size:clamp(21px,2.8vw,28px);color:var(--ink);line-height:1.24;margin:16px 0 6px}
.mf-sub{font-size:14px;color:var(--ink-3);line-height:1.6;margin-bottom:20px}

/* view toggle */
.mf-tabs{display:inline-flex;border:1px solid var(--hair);border-radius:3px;overflow:hidden;margin-bottom:26px}
.mf-tab{background:none;border:none;padding:8px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-lbl);cursor:pointer;transition:background .2s,color .2s}
.mf-tab+.mf-tab{border-left:1px solid var(--hair)}
.mf-tab[aria-selected="true"]{background:rgba(196,154,60,.14);color:var(--gold)}
.mf-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* ---- timeline ---- */
.mf-year{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-lbl);margin-bottom:10px}
.mf-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;
  gap:8px;padding:0 0 4px;min-height:150px}
.mf-rail::before{content:'';position:absolute;left:6%;right:6%;bottom:71px;height:1px;background:var(--hair)}
.mf-node{position:relative;background:none;border:none;padding:0 4px 0;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-end;gap:0;z-index:1;text-align:center}
.mf-node:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.mf-cap{font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:-.01em;margin-bottom:9px;white-space:nowrap}
.mf-node.is-target .mf-cap{color:var(--gold)}
.mf-slot{height:44px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:13px}
.mf-circle{width:34px;height:34px;border-radius:50%;flex:none;transition:transform .18s,box-shadow .18s}
/* fill encodes STATUS, not magnitude — the amount is carried by the label above.
   One variable per visual channel: fill = certainty · text = scale · x = chronology. */
.mf-circle.s-financed{background:linear-gradient(180deg,#c19241,#A87F2C)}
.mf-circle.s-committed{background:rgba(196,154,60,.22);border:1.5px solid var(--gold)}
.mf-circle.s-target{background:none;border:1.5px dashed var(--gold-dim)}
.mf-node:hover .mf-circle,.mf-node.on .mf-circle{transform:scale(1.09);box-shadow:0 0 0 5px rgba(196,154,60,.12)}
.mf-when{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-lbl)}
.mf-who{font-size:12px;color:var(--ink-2);line-height:1.35;margin-top:5px;max-width:15ch;min-height:2.7em;display:flex;align-items:flex-start;justify-content:center}
.mf-status{font-family:var(--mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;margin-top:7px;
  padding:2px 7px;border-radius:9px;border:1px solid}
.mf-status.financed{color:var(--green);border-color:rgba(29,158,117,.4);background:rgba(29,158,117,.08)}
.mf-status.committed{color:var(--gold);border-color:rgba(196,154,60,.35);background:rgba(196,154,60,.08)}
.mf-status.target{color:var(--ink-lbl);border-color:var(--hair)}
.mf-brace{display:grid;grid-template-columns:3fr 1fr;gap:8px;margin-top:6px}
.mf-brace span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-lbl);text-align:center;padding-top:8px;border-top:1px solid var(--hair)}

/* ---- capital stack view ---- */
.mf-stack{display:none}
.mf-stack.on{display:block}
.mf-timeline.off{display:none}
.mf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mf-chip{background:none;border:1px solid var(--hair);border-radius:14px;padding:6px 13px;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-lbl);
  transition:border-color .2s,color .2s,background .2s}
.mf-chip:hover{border-color:var(--gold-dim);color:var(--gold)}
.mf-chip.on{background:rgba(196,154,60,.14);border-color:rgba(196,154,60,.45);color:var(--gold)}
.mf-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mf-node.pinned .mf-circle{box-shadow:0 0 0 5px rgba(196,154,60,.2)}
.mf-srow{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair)}
.mf-srow:last-child{border-bottom:none}
.mf-slab{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-lbl);text-align:right}
.mf-sval{font-size:14px;color:var(--ink-2);line-height:1.5}
.mf-sval.gap{color:var(--red);font-family:var(--mono);font-size:13px}
.mf-srisk{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-lbl);margin-top:4px}

/* ---- body: timeline/stack left, selected-deal detail right ---- */
/* Single column until 1000px. The rail is four labelled nodes side by side; at
   the 900px breakout the left column is ~500px, which is 125px per node and the
   status pills start to touch. 1000px buys ~140px and they clear. */
.mf-body{display:block}
@media(min-width:1000px){
  .mf-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
    gap:30px;align-items:start}
  .mf-body .mf-card{margin-top:0}
}
.mf-left{min-width:0}

/* ---- detail card ---- */
.mf-card{margin-top:22px;padding:18px 20px;border:1px solid var(--hair);border-left:2px solid var(--gold);
  border-radius:var(--radius);background:rgba(245,240,232,.02);min-height:118px}
.mf-card-t{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:10px}
.mf-card-b{font-size:14px;color:var(--ink-2);line-height:1.65}
.mf-card-b b{color:var(--ink)}
.mf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px 18px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--hair)}
.mf-fact-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-lbl)}
.mf-fact-v{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.mf-jump{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.mf-jump:hover{text-decoration:none;color:var(--ink)}

/* ---- three summary numbers ---- */
.mf-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:20px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--hair)}
.mf-sum-i{border-left:2px solid var(--gold-dim);padding-left:14px}
.mf-sum-v{font-family:var(--mono);font-size:var(--fig-key);color:var(--gold);line-height:1.1}
.mf-sum-v.muted{color:var(--ink)}
.mf-sum-l{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.mf-why{background:none;border:none;padding:0;margin-top:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-lbl);cursor:pointer;text-align:left}
.mf-why:hover{color:var(--gold)}
.mf-why:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mf-why-b{display:none;font-size:12.5px;color:var(--ink-3);line-height:1.65;margin-top:10px;
  padding-left:14px;border-left:2px solid var(--hair);max-width:66ch}
.mf-why-b.on{display:block}

@media(max-width:640px){
  .mf{padding:18px 15px 20px}
  /* four columns cannot hold four labelled nodes at 390px — go vertical */
  .mf-rail{display:block;min-height:0;padding:0}
  .mf-rail::before{left:16px;right:auto;top:12px;bottom:12px;width:1px;height:auto}
  .mf-node{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;
    text-align:left;width:100%;padding:11px 0}
  .mf-slot{height:auto;margin:0;flex:none}
  .mf-node .mf-cap{order:3;margin:0 0 0 auto;font-size:12px}
  .mf-node .mf-slot{order:1}
  .mf-node .mf-when{order:2;font-size:8.5px;min-width:30px}
  .mf-node .mf-who{order:2;min-height:0;font-size:12px;max-width:none;display:block;margin:0}
  .mf-node .mf-status{order:4;margin:0 0 0 8px}
  .mf-brace{display:none}
  .mf-cap{font-size:10.5px;margin-bottom:6px}
  .mf-who{font-size:10px;max-width:11ch}
  .mf-when{font-size:8.5px}
  .mf-status{font-size:7px;padding:2px 5px}
  .mf-srow{grid-template-columns:1fr;gap:3px}
  .mf-slab{text-align:left}
}
/* At 320px the five row items need 280px and have 250px, so the status pill was
   spilling ~32px past the hero card's right border. Let it wrap to its own line,
   indented to the text column. */
@media(max-width:370px){
  .mf-node{flex-wrap:wrap;gap:9px}
  .mf-node .mf-who{flex:1 1 auto;min-width:0}
  .mf-node .mf-status{order:5;flex:none;margin:0 0 0 48px}
}

/* ---------- BLUF ---------- */
.bluf-block{border:1px solid var(--hair);border-top:2px solid var(--gold);border-radius:var(--radius);padding:26px 28px;margin:30px 0;background:var(--bg-2);scroll-margin-top:84px}
.bluf-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.bluf-thesis{font-size:18.5px;line-height:1.62;color:var(--ink)}
.bluf-thesis a{color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.bluf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.bluf-stat{border-left:2px solid var(--hair);padding:2px 0 2px 14px}
.bluf-stat-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-lbl);margin-bottom:7px}
.bluf-stat-num{font-family:var(--serif);font-size:27px;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.bluf-stat-label{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.5}
@media(max-width:760px){.bluf-stats{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.bluf-stats{grid-template-columns:1fr}}

/* ---------- Framework-at-a-glance ---------- */
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin:26px 0}
.role-card{border:1px solid var(--hair);border-top:2px solid var(--gold-dim);border-radius:var(--radius);padding:18px 18px 20px;background:var(--bg-2);transition:border-color .2s,transform .2s}
.role-card:hover{border-color:rgba(196,154,60,.34)}
.role-num{font-family:var(--mono);font-size:9.5px;color:var(--ink-lbl);letter-spacing:.11em;text-transform:uppercase}
.role-name{font-family:var(--serif);font-size:20px;color:var(--ink);margin:7px 0 0;line-height:1.2}
.role-who{font-family:var(--mono);font-size:11.5px;color:var(--gold);margin:8px 0 10px;letter-spacing:.01em;line-height:1.5}
.role-desc{font-size:13px;color:var(--ink-3);line-height:1.6}
@media(max-width:520px){.roles-grid{grid-template-columns:1fr}}

/* ---------- Prose / sections ---------- */
/* Every TOC item and in-text §-reference targets an .article-section id (or
   .bluf-block for #bluf-bottom-line); without this the sticky 64px .nav
   covers the heading exactly on landing — confirmed by measuring the
   post-scroll position, not just eyeballing it. */
.article-section{margin:64px 0;scroll-margin-top:84px}
.section-header{margin-bottom:26px}
.section-title-wrap{display:flex;align-items:baseline;gap:16px}
.section-num{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em;flex:none;
  position:relative;top:-2px;padding-right:16px;border-right:1px solid var(--hair);align-self:stretch;display:flex;align-items:center}
.section-num::after{content:'';position:absolute;right:-1px;top:0;bottom:0;width:1px;background:var(--gold);
  transform-origin:top;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.section-header.is-visible .section-num::after{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.section-num::after{transition:none}}
.section-title{font-size:clamp(27px,4vw,36px);letter-spacing:-.012em;line-height:1.14}
.section-subtitle{font-family:var(--sans);font-size:15px;color:var(--ink-3);margin-top:12px;font-style:italic;line-height:1.55;max-width:62ch}
.section-divider{border:none;border-top:1px solid var(--hair);margin:60px 0 0}

/* ── Back matter: Data Appendix + References ──
   Both ship collapsed and hold no visible content until opened, but the full
   section furniture (36px title + wrapping italic subtitle + 64px margins
   either side) was spending ~370px of empty column on two closed rows.
   Shut, each collapses to a single title row carrying an item count so the
   reader still knows what is inside; open, the normal section presentation
   returns untouched. */
.article-section.backmatter{margin:26px 0}
.section-divider.backmatter-div{margin-top:26px}
.backmatter .section-toggle-header:not(.open) .section-title{font-size:23px;line-height:1.3}
.backmatter .section-toggle-header:not(.open) .section-subtitle{display:none}
.bm-count{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-lbl);flex:none;align-self:center;white-space:nowrap}
.backmatter .section-toggle-header.open .bm-count{display:none}
@media(max-width:520px){
  .backmatter .section-toggle-header:not(.open) .section-title{font-size:20px}
  .bm-count{display:none}
}
.prose{font-size:17px;line-height:1.78;color:var(--ink-2)}
.prose p{margin:0 0 20px}
/* In-prose citation links: gold-on-gray fails WCAG 1.4.1 (use of color) at
   1.11:1 with no other distinguishing cue — an underline fixes it without
   touching the global nav/card link style, which don't need one. */
.prose a{text-decoration:underline;text-decoration-color:rgba(196,154,60,.45)}
.prose h3{font-size:22px;margin:36px 0 14px;letter-spacing:-.008em}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.highlight{color:var(--gold);font-weight:500}
mark.stat{background:none;color:var(--gold);font-weight:600;padding:0}
.ticker-link{font-family:var(--mono);color:var(--gold);border-bottom:1px dotted var(--gold-dim)}
.ext-arr{font-size:11px;opacity:.6}

/* ---------- Key insight callout ---------- */
.key-insight{border:1px solid var(--hair);border-left:2px solid var(--blue);border-radius:var(--radius);padding:16px 18px;margin:22px 0;background:rgba(61,142,240,.045);font-size:14.5px}
.key-insight-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.key-insight.amber{border-left-color:var(--amber);background:rgba(204,136,68,.045)}
.key-insight.amber .key-insight-label{color:var(--amber)}
.key-insight.gold{border-left-color:var(--gold);background:rgba(196,154,60,.045)}
.key-insight.gold .key-insight-label{color:var(--gold)}

/* Tabular figures on every key readout — digits keep a fixed advance width,
   so a value does not shift as it updates under a slider. */
.mf-sum-v,.stat-tile-value,.calc-out-v,.irr-out-v,.sdc-out-v,.dmt-out-v,
.wf-total-v,.fae-score-v{font-variant-numeric:tabular-nums;font-weight:400}

/* ---------- Exhibits ---------- */
.exhibit-wrap{border:1px solid var(--hair);border-radius:8px;padding:22px;margin:26px 0;background:var(--bg-2)}
/* The signature breakout. Prose stays at --maxw (868px) because that is a
   reading measure; the hero and the widest exhibits are not prose and were being
   squeezed into it. Centred on the reading measure via a 50% offset — 50%
   resolves against .article-wrap's content box, so margin-left goes negative by
   exactly half the excess. Deliberately NOT transform:translateX(-50%): a
   transform makes the element a containing block for position:fixed, which would
   capture .toc-float.
   Below 900px the viewport is already narrower than the measure, so there is
   nothing to break out of and the class is inert. */
.signature-wide{max-width:none}
@media(min-width:900px){
  .signature-wide{margin-left:calc(-1 * var(--sig-bleed));margin-right:calc(-1 * var(--sig-bleed))}
}
.exhibit-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.exhibit-title{font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:16px}
.star-badge{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-lbl);border:1px solid var(--hair);border-radius:10px;padding:2px 8px}
.exhibit-figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-lbl);margin:6px 0 0;text-align:right}
.exhibit-note{font-size:12.5px;color:var(--ink-3);margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);line-height:1.55}
.exhibit-source{font-family:var(--mono);font-size:10px;color:var(--ink-lbl);margin-top:8px}

/* data tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:460px}
.table-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.data-table{font-size:13.5px}
.data-table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-lbl);text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair)}
.data-table td{padding:11px 10px;border-bottom:1px solid var(--hair);color:var(--ink-2);vertical-align:top}
.data-table tr:last-child td{border-bottom:none}
.data-table td.num,.data-table th.num{font-family:var(--mono);white-space:nowrap}
.data-table .flag{color:var(--amber)}
.data-table tr{transition:background .3s ease}
.data-table tr.row-highlight td{background:rgba(196,154,60,.08)}
.role-card.card-highlight{border-color:var(--gold);box-shadow:0 0 0 1px rgba(196,154,60,.3),0 12px 28px -14px rgba(0,0,0,.55)}

/* capital-stack flow diagram — a spine with numbered tiers, not a list of boxes */
.stack-flow{position:relative;margin:8px 0 4px}
.stack-axes{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-lbl);padding:0 2px 14px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.stack-row{display:grid;grid-template-columns:66px 1fr;align-items:start}
.stack-rail{position:relative;align-self:stretch}
.stack-rail::before{content:'';position:absolute;left:43px;top:0;bottom:0;width:1px;background:var(--hair)}
.stack-row:first-child .stack-rail::before{top:24px}
.stack-row:last-child .stack-rail::before{bottom:auto;height:24px}
.stack-node{position:absolute;left:38px;top:19px;width:11px;height:11px;border-radius:50%;
  background:var(--bg-2);border:1.5px solid var(--gold-dim);z-index:1}
.stack-row.is-owner .stack-node{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,154,60,.13)}
.stack-num{position:absolute;left:0;top:16px;font-family:var(--mono);font-size:10.5px;color:var(--ink-lbl);letter-spacing:.06em}
.stack-body{padding:12px 0 26px 4px}
.stack-tier-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dim)}
.stack-tier-name{font-family:var(--serif);font-size:19px;color:var(--ink);margin:5px 0 6px;line-height:1.28}
.stack-tier-detail{font-size:13px;color:var(--ink-3);line-height:1.6}
.stack-risk{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:11px;border:1px solid var(--hair);color:var(--ink-3)}
.stack-risk.owns{color:var(--red);border-color:rgba(224,108,90,.38);background:rgba(224,108,90,.07)}
.stack-risk.caps{color:var(--amber);border-color:rgba(204,136,68,.38);background:rgba(204,136,68,.07)}
.stack-risk.bears{color:var(--blue);border-color:rgba(61,142,240,.34);background:rgba(61,142,240,.07)}
@media(max-width:560px){.stack-row{grid-template-columns:30px 1fr}.stack-rail::before{left:11px}.stack-node{left:6px}.stack-num{display:none}}

/* risk table badges */
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;border-radius:10px;border:1px solid}
.badge-high{color:var(--red);border-color:rgba(224,108,90,.4);background:rgba(224,108,90,.08)}
.badge-med{color:var(--amber);border-color:rgba(204,136,68,.4);background:rgba(204,136,68,.08)}
.badge-low{color:var(--green);border-color:rgba(29,158,117,.4);background:rgba(29,158,117,.08)}
.badge-na{color:var(--ink-lbl);border-color:var(--hair)}

/* ---------- Case-study cards (Oracle / Alphabet) ---------- */
.case-card{border:1px solid var(--hair);border-radius:8px;padding:24px;margin:24px 0;background:var(--bg-2)}
.case-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--hair)}
.case-name{font-family:var(--serif);font-size:22px;color:var(--ink)}
.case-role{font-family:var(--mono);font-size:11px;color:var(--ink-lbl);margin-top:3px}
.case-verdict{text-align:right;flex:none}
.case-verdict-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-lbl)}
.case-verdict-value{font-family:var(--mono);font-size:15px;font-weight:600;margin-top:2px}
.case-verdict-value.high{color:var(--red)}
.case-verdict-value.low{color:var(--green)}
.case-link{font-family:var(--mono);font-size:11.5px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}

/* ---------- Framework formula blocks ---------- */
.formula-block{border:1px solid var(--hair);border-radius:6px;padding:20px 22px;margin:20px 0;background:var(--bg-3);font-family:var(--mono);font-size:14px;color:var(--ink);text-align:center;line-height:2}
.formula-frac{display:inline-block;vertical-align:middle;text-align:center}
.formula-frac .num,.formula-frac .den{display:block;padding:2px 6px}
.formula-frac .num{border-bottom:1px solid var(--ink-3)}

/* ---------- Precedent / four-way map cards ---------- */
.impl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin:26px 0}
.impl-card{border:1px solid var(--hair);border-top:2px solid var(--gold-dim);border-radius:var(--radius);
  padding:18px 18px 20px;background:var(--bg-2);transition:border-color .2s}
.impl-card:hover{border-color:rgba(196,154,60,.34)}
.impl-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-lbl)}
.impl-title{font-family:var(--serif);font-size:19px;color:var(--ink);margin:7px 0 10px;line-height:1.25}
.impl-desc{font-size:13px;color:var(--ink-3);line-height:1.6}
.impl-desc a{color:var(--ink-2);border-bottom:1px solid var(--gold-dim)}
.impl-desc a:hover{color:var(--gold);text-decoration:none}
@media(max-width:520px){.impl-grid{grid-template-columns:1fr}}

/* ---------- Bull / bear stress test ---------- */
.stress-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.stress-col{border-radius:8px;padding:0;overflow:hidden}
.stress-col.would-break{border:1px solid rgba(224,108,90,.26);background:rgba(224,108,90,.035)}
.stress-col.would-confirm{border:1px solid rgba(29,158,117,.26);background:rgba(29,158,117,.035)}
.stress-col h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin:0;padding:15px 20px;
  border-bottom:1px solid var(--hair)}
.would-break h3{color:var(--red);background:rgba(224,108,90,.06)}
.would-confirm h3{color:var(--green);background:rgba(29,158,117,.06)}
.stress-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-lbl);
  border:1px solid var(--hair);border-radius:10px;padding:2px 8px;flex:none}
.stress-col ul{margin:0;padding:6px 20px 16px;list-style:none;counter-reset:sig}
.stress-col li{counter-increment:sig;position:relative;padding:11px 0 11px 30px;font-size:13.5px;
  line-height:1.62;color:var(--ink-2);border-bottom:1px solid rgba(245,240,232,.05)}
.stress-col li:last-child{border-bottom:none}
.stress-col li::before{content:counter(sig,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;opacity:.65}
.would-break li::before{color:var(--red)}
.would-confirm li::before{color:var(--green)}
@media(max-width:700px){.stress-grid{grid-template-columns:1fr}}

/* ---------- Pull quote ---------- */
.pull-quote{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);line-height:1.5;border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:30px 0}
.pull-quote-cite{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--ink-3);margin-top:10px;display:block}

/* ---------- FAQ ---------- */
.faq-list{margin:20px 0}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-h{margin:0;font-weight:500}
.faq-question{width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:var(--serif);font-size:17px;font-weight:500;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;line-height:1.3}
.faq-chevron{flex:none;color:var(--gold);transition:transform .2s;font-size:13px}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-answer{max-height:600px}
.faq-answer-inner{padding:0 4px 20px;font-size:14.5px;color:var(--ink-2);line-height:1.65}

/* ---------- Data appendix ---------- */
.appendix-table{font-size:12.5px;table-layout:fixed;min-width:720px}
.appendix-table th:nth-child(1),.appendix-table td:nth-child(1){width:28%}
.appendix-table th:nth-child(2),.appendix-table td:nth-child(2){width:23%}
.appendix-table th:nth-child(3),.appendix-table td:nth-child(3){width:14%}
.appendix-table th:nth-child(4),.appendix-table td:nth-child(4){width:35%}
.appendix-table td{overflow-wrap:anywhere;line-height:1.5}
.appendix-table td.num{white-space:normal}

/* ---------- References ---------- */
.ref-list{list-style:none;margin:0;padding:0;counter-reset:refs}
.ref-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.ref-num{font-family:var(--mono);color:var(--gold-dim);flex:none;width:24px}
.ref-text a{color:var(--ink-2)}
.ref-text a:hover{color:var(--gold)}
.ref-meta{color:var(--ink-lbl);font-family:var(--mono);font-size:11px;margin-left:6px}

/* ---------- Toggleable / collapsible section ---------- */
.section-toggle-header{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;transition:color .15s;margin-bottom:0!important}
.section-toggle-header:hover .section-title{color:var(--gold)}
.section-toggle-header:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px}
.section-toggle-header.open .section-chevron{transform:rotate(45deg)}
.section-chevron{font-family:var(--mono);font-size:26px;font-weight:300;color:var(--gold);flex-shrink:0;line-height:1;transition:transform .2s;padding-left:16px}
.section-collapsible-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.3,1),padding-top .3s ease;padding-top:0}
.section-collapsible-body.open{max-height:4000px;padding-top:24px}
@media(prefers-reduced-motion:reduce){.section-collapsible-body{transition:none}}

/* ---------- TOC (floating, right rail — house standard) ----------
   Sits to the right of the 868px article: article right edge = 50% + 434px,
   plus a 20px gutter. max-width keeps it inside the viewport on wide screens. */
/* Parks against the SIGNATURE measure, not the reading measure — otherwise this
   fixed, z-index:700 rail paints on top of every widened exhibit. */
.toc-float{position:fixed;top:84px;left:calc(50% + var(--measure-half) + var(--sig-bleed) + 26px);z-index:700;width:200px;max-width:calc(50vw - var(--measure-half) - var(--sig-bleed) - 46px)}
.toc-toggle{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid rgba(196,154,60,.2);
  border-radius:3px;padding:9px 14px;cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);width:100%;text-align:left;transition:border-color .2s}
.toc-toggle:hover{border-color:rgba(196,154,60,.45)}
.toc-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.toc-toggle-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;flex-shrink:0;opacity:.7}
.toc-toggle-icon{margin-left:auto;font-size:14px;line-height:1;transition:transform .2s;color:rgba(196,154,60,.5)}
.toc-toggle.open .toc-toggle-icon{transform:rotate(180deg)}
.toc-panel{display:none;position:relative;background:var(--bg-2);border:1px solid rgba(196,154,60,.18);border-top:none;
  border-radius:0 0 3px 3px;padding:10px 0;max-height:calc(100vh - 160px);overflow-y:auto}
.toc-panel.open{display:block}
.toc-progress-bar{height:2px;background:rgba(196,154,60,.1);margin:2px 14px 8px;border-radius:1px;overflow:hidden}
.toc-progress-fill{height:100%;background:var(--gold);border-radius:1px;transition:width .3s;width:0%}
.toc-active-indicator{position:absolute;left:0;width:2px;background:var(--gold);border-radius:0 1px 1px 0;
  top:0;height:0;opacity:0;transition:transform .3s cubic-bezier(.2,.7,.3,1),height .3s cubic-bezier(.2,.7,.3,1),opacity .25s ease;
  pointer-events:none;box-shadow:0 0 8px rgba(196,154,60,.5)}
.toc-active-indicator.on{opacity:1}
@media(prefers-reduced-motion:reduce){.toc-active-indicator{transition:opacity .2s}}
.toc-item{display:flex;align-items:baseline;gap:8px;padding:6px 14px;text-decoration:none;
  transition:background .15s;border-left:2px solid transparent}
.toc-item:hover{background:rgba(196,154,60,.06);border-left-color:rgba(196,154,60,.3);text-decoration:none}
.toc-item.active{background:rgba(196,154,60,.08)}
.toc-item-num{font-family:var(--mono);font-size:8px;color:var(--ink-lbl);flex-shrink:0;letter-spacing:.08em;width:16px}
.toc-item-label{font-family:var(--sans);font-size:11px;color:var(--ink-3);line-height:1.4}
.toc-item.active .toc-item-label{color:var(--gold)}
@media(max-width:1380px){.toc-float{display:none!important}}

/* ---------- Footer (site canonical) ---------- */
.footer{background:var(--bg);border-top:1px solid rgba(196,154,60,.12);padding:60px 40px 32px;margin-top:20px}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-brand-name{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:4px}
.footer-brand-sub{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.footer-tagline{font-family:var(--sans);font-size:13px;color:var(--ink-3);line-height:1.6}
.footer-col-title{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-family:var(--sans);font-size:13px;color:var(--ink-3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--ink);text-decoration:none}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.fci{display:flex;flex-direction:column;gap:2px}
.fci-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-lbl)}
.fci-value,.fci-value a{font-family:var(--sans);font-size:13px;color:var(--ink-3);text-decoration:none}
.fci-value a:hover{color:var(--gold);text-decoration:none}
.footer-bottom{border-top:1px solid rgba(196,154,60,.08);padding-top:24px;display:flex;flex-direction:column;gap:8px}
.footer-legal{font-family:var(--sans);font-size:11px;color:var(--ink-lbl);line-height:1.7}
/* Not decorative — it carries the version stamp and publication date, which is
   exactly the kind of text --ink-4 is barred from. Only the "→" and "·"
   separators keep --ink-4. */
.footer-copy{font-family:var(--mono);font-size:9px;color:var(--ink-lbl);letter-spacing:.1em}
@media(max-width:820px){.footer{padding:44px 22px 28px}.footer-top{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   VISUAL SYSTEM — charts, stat tiles, scorecard, calculator
   Chart marks use validated dark-surface steps (see the JS header).
   Brand gold #C49A3C is UI/text only; #A87F2C is the data-mark step.
   ============================================================ */
:root{ --viz-1:#3D8EF0; --viz-2:#A87F2C; --viz-3:#1D9E75; --viz-ctx:rgba(245,240,232,.30) }

/* chart frame */
.chart-frame{position:relative;margin:6px 0 0}
.chart-canvas-sm{height:230px}
.chart-canvas-md{height:300px}
.chart-canvas-lg{height:360px}
@media(max-width:640px){.chart-canvas-sm{height:250px}.chart-canvas-md{height:330px}.chart-canvas-lg{height:400px}}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 2px;padding-top:14px;border-top:1px solid var(--hair)}
.chart-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.chart-legend-key{width:11px;height:11px;border-radius:2px;flex:none}
.chart-legend-note{font-size:12px;color:var(--ink-3)}

/* table-view twin */
.tableview-btn{background:none;border:1px solid var(--hair);border-radius:14px;color:var(--ink-lbl);
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;cursor:pointer;transition:color .2s,border-color .2s}
.tableview-btn:hover{color:var(--gold);border-color:var(--gold-dim)}
.tableview{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.tableview table{font-size:12.5px}
.exhibit-toolbar{display:flex;justify-content:flex-end;margin-top:12px}

/* ---------- Stat tiles / KPI row ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:22px 0}
.stat-tile{border:1px solid var(--hair);border-radius:var(--radius);padding:16px 18px;background:var(--bg-2)}
.stat-tile-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-lbl);margin-bottom:10px;line-height:1.4}
.stat-tile-value{font-family:var(--mono);font-size:var(--fig-key);color:var(--ink);line-height:1.05;letter-spacing:-.01em}
.stat-tile-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;margin-top:8px}
.stat-tile-delta.up{color:var(--green)}
.stat-tile-delta.down{color:var(--red)}
.stat-tile-delta.flat{color:var(--ink-3)}
.stat-tile-sub{font-size:12px;color:var(--ink-3);margin-top:9px;line-height:1.5}
.stat-tile.accent{border-left:2px solid var(--gold)}

/* ---------- Scorecard ---------- */
/* Categorical states only — no bar fills. The five criteria are not scored on a
   common scale, so any meter width would be an invented quantity. */
.scorecard{display:flex;flex-direction:column;gap:2px;margin:20px 0 4px}
.score-row{display:grid;grid-template-columns:1fr 150px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.score-row:last-child{border-bottom:none}
.score-crit{font-family:var(--serif);font-size:16.5px;color:var(--ink);line-height:1.3}
.score-desc{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.55}
/* Right-aligned. The badge is an inline-flex sitting in a fixed 150px column, so
   left-aligning it stranded ~95px of dead space between the pill and the row's
   right edge — invisible at the 828px measure, obvious once the exhibit breaks
   out to 908–1080px. Flush right also lines every badge up on one edge. */
.score-state{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.score-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:11px;border:1px solid;align-self:flex-end}
.score-icon{font-size:10px;line-height:1}
.score-met{color:var(--green);border-color:rgba(29,158,117,.42);background:rgba(29,158,117,.08)}
.score-partial{color:var(--amber);border-color:rgba(204,136,68,.42);background:rgba(204,136,68,.08)}
.score-fail{color:var(--red);border-color:rgba(224,108,90,.42);background:rgba(224,108,90,.08)}
.score-unknown{color:var(--ink-lbl);border-color:var(--hair);background:rgba(245,240,232,.03)}
@media(max-width:620px){.score-row{grid-template-columns:1fr;gap:12px}}

/* ---------- Calculator ---------- */
.calc{border:1px solid var(--hair);border-radius:8px;background:var(--bg-3);padding:20px;margin:22px 0}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px}
.calc-field{display:flex;flex-direction:column}
.calc-field label{display:flex;align-items:flex-end;min-height:26px;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-lbl);margin-bottom:6px;line-height:1.4}
.calc-field input[type=number]{width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:4px;color:var(--ink);
  font-family:var(--mono);font-size:14px;padding:9px 10px}
/* The only controls on the page that suppressed the focus ring, leaving a 1px
   border tint as the sole keyboard cue. Border tint stays for pointer focus;
   keyboard focus gets the same 2px gold ring every other control here uses. */
.calc-field input[type=number]:focus{outline:none;border-color:var(--gold-dim)}
.calc-field input[type=number]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.calc-slider-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.calc-slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.calc-slider-head label{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-lbl)}
.calc-slider-val{font-family:var(--mono);font-size:16px;color:var(--gold)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(245,240,232,.14);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:rgba(245,240,232,.14);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--gold);margin-top:-6px;border:2px solid var(--bg-3)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-3)}
input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* Three-up. The exhibit is titled "watch the structures diverge" and its note
   says the gap IS the economic value of the lease terms — but the readout used
   to print only the contracted yield, so the finding existed nowhere as a
   number. Both structures and their spread are now stated, each with its own
   NOI beneath it rather than the two NOIs floating in a separate pair. */
.calc-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(166px,1fr));gap:20px 26px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.calc-out-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-lbl);line-height:1.45;min-height:2.9em}
.calc-out-v{font-family:var(--mono);font-size:var(--fig-key);color:var(--ink);line-height:1.05;
  letter-spacing:-.02em;margin-top:6px}
/* Gold marks the derived finding. This is text, not a data mark — the two bars
   in the chart below keep their own validated series colours. */
.calc-out.is-finding .calc-out-v{color:var(--gold)}
.calc-out-s{font-size:11.5px;color:var(--ink-3);margin-top:9px;line-height:1.5}
.calc-out-s b{font-family:var(--mono);font-size:13px;color:var(--ink-2);font-weight:400}
.calc-verdict{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.calc-reset{background:none;border:1px solid var(--hair);border-radius:14px;color:var(--ink-lbl);font-family:var(--mono);
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;cursor:pointer;margin-top:14px}
.calc-reset:hover{color:var(--gold);border-color:var(--gold-dim)}
@media(max-width:620px){.calc-readout{gap:16px 20px}.calc-out-l{min-height:0}.calc-out-v{font-size:29px}}

/* ---------- Paired annotations — breaks long prose runs (house pattern) ---------- */
.annot{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.annot-item{border-left:2px solid var(--gold-dim);padding:1px 0 1px 16px}
.annot-item.blue{border-left-color:rgba(61,142,240,.5)}
.annot-item.red{border-left-color:rgba(224,108,90,.45)}
.annot-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:8px;line-height:1.4}
.annot-item.blue .annot-k{color:rgba(61,142,240,.8)}
.annot-item.red .annot-k{color:rgba(224,108,90,.8)}
.annot-t{font-size:13.5px;color:var(--ink-2);line-height:1.68}
.annot-t b{color:var(--ink)}
@media(max-width:700px){.annot{grid-template-columns:1fr;gap:16px}}

/* ---------- Numbered observation rows ---------- */
.obs{display:grid;grid-template-columns:58px 1fr;gap:0;margin:26px 0 6px}
.obs-row{display:contents}
.obs-num{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em;padding:22px 0 0;
  border-top:1px solid var(--hair)}
.obs-body{padding:20px 0 26px 4px;border-top:1px solid var(--hair)}
.obs-head{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1.28;margin-bottom:10px}
.obs-text{font-size:15.5px;color:var(--ink-3);line-height:1.72}
.obs-text em{color:var(--ink-2);font-style:italic}
.obs-take{display:block;margin-top:12px;padding-left:14px;border-left:2px solid var(--gold-dim);
  font-size:14px;color:var(--ink-2);line-height:1.6}
@media(max-width:620px){.obs{grid-template-columns:1fr}.obs-num{padding:18px 0 0;border-top:1px solid var(--hair)}
  .obs-body{padding:6px 0 22px;border-top:none}}


/* ============================================================
   COMPUTE ASSET IRR — CURVE FIRST, MAP ON DEMAND
   This replaced a 121x87 contour surface. The surface was correct and
   unreadable: five live variables and a field of isolines is a quant
   instrument, not an argument. Two variables now do the work — one is
   the x-axis, one is the only slider — and the map view keeps the 2D
   reading for anyone who wants it. Every map cell prints its own number,
   so colour is reinforcement rather than the encoding.
   ============================================================ */
.irr{margin:6px 0 0}
.irr-views{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--hair);
  border-radius:calc(var(--radius) + 3px);margin-bottom:20px}
.irr-view{padding:7px 15px;border:0;border-radius:var(--radius);background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-lbl);transition:background .18s,color .18s}
.irr-view:hover{color:var(--ink-2)}
.irr-view[aria-selected="true"]{background:rgba(196,154,60,.13);color:var(--gold)}
.irr-view:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.irr-slider{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  margin-bottom:20px}
.irr-slider label{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-lbl);white-space:nowrap}
.irr-slider output{font-family:var(--mono);font-size:15px;color:var(--gold);white-space:nowrap;
  min-width:46px;text-align:right}
.irr-slider input[type=range]{display:block;width:100%;height:16px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;border:0;cursor:ew-resize}
.irr-slider input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(245,240,232,.13)}
.irr-slider input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(245,240,232,.13)}
.irr-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  margin-top:-6px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-2);
  box-shadow:0 0 0 1px var(--gold)}
.irr-slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--gold);border:2px solid var(--bg-2);box-shadow:0 0 0 1px var(--gold)}
.irr-slider input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.irr-fig svg{display:block;width:100%;height:auto}

.irr-mapscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.irr-map{display:grid;gap:5px;min-width:312px}
.irr-cell{position:relative;border-radius:var(--radius);padding:13px 6px;text-align:center;
  font-family:var(--mono);font-size:13px;border:1px solid transparent}
.irr-cell.clears{background:rgba(29,158,117,.20);border-color:rgba(29,158,117,.45);color:#8fe0c2}
.irr-cell.below{background:rgba(245,240,232,.05);border-color:rgba(245,240,232,.11);color:var(--ink-2)}
.irr-cell.lost{background:rgba(224,108,90,.09);border-color:rgba(224,108,90,.30);color:#e8998a}
.irr-cell.head{background:none;border:0;font-size:10px;color:var(--ink-lbl);letter-spacing:.06em;
  padding:6px 4px;display:flex;align-items:center;justify-content:center}
.irr-maplab{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-lbl);margin:14px 0 4px}
.irr-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px}
.irr-key{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-lbl)}
.irr-key i{width:14px;height:10px;border-radius:2px;flex:none;border:1px solid transparent}
/* display:grid/flex on the class outranks the [hidden] UA rule — restore it */
.irr-mapscroll[hidden],.irr-legend[hidden],.irr-fig[hidden],.irr-slider[hidden]{display:none}
.irr-cell.dim{opacity:.55}
.irr-cell.head.on{color:var(--gold)}

/* The exhibit title asks "How full does the cluster have to run?" — the hurdle
   utilization IS the answer, so it leads on its own row. The other two support
   it: one is the same question at a lower bar, one is a different unit (an IRR,
   not a utilization) and was reading as a third equal answer. */
.irr-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.irr-out-i{border-left:2px solid var(--gold-dim);padding-left:13px}
.irr-out-i.is-lead{grid-column:1/-1;border-left-color:var(--gold)}
.irr-out-v{font-family:var(--mono);font-size:var(--fig-sub);color:var(--ink);line-height:1.1}
.irr-out-i.is-lead .irr-out-v{font-size:var(--fig-display);letter-spacing:-.01em}
.irr-out-v.warn{color:var(--red)}
.irr-out-v.ok{color:#1D9E75}
/* Colour alone cannot carry the pass/fail — these values are green or red on a
   hurdle test, so the test states itself in words next to the number. Same rule
   that took the fills off the Five-Criterion scorecard. */
/* Shared across the IRR, Silicon-vs-Debt and Duration exhibits — one state
   annotation, not three. Rendered only when a threshold actually trips, so the
   pairing is strict: wherever a readout turns red or green, words appear too.
   Nothing shown = nothing tripped. */
/* Block by default: these live in ~160px grid columns in the Silicon-vs-Debt and
   Duration exhibits, where a nowrap string like "majority unamortised, past 2 of
   3 life estimates" is several times the column width. Only the IRR lead, which
   spans the full measure, has room to set it beside the number. */
.out-st{display:block;margin:5px 0 0;white-space:normal;
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-lbl);line-height:1.5}
.irr-out-i.is-lead .out-st{display:inline;margin:0 0 0 9px;white-space:nowrap}
.out-st:empty{display:none}
.irr-out-l{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
@media(max-width:620px){
  .irr-out-i.is-lead .irr-out-v{font-size:33px}
  /* Even the full-width lead cannot hold the state beside a 33px number here. */
  .irr-out-i.is-lead .out-st{display:block;margin:5px 0 0;white-space:normal}
}
.irr-verdict{margin-top:18px;padding:13px 16px;border-left:2px solid var(--gold);
  background:rgba(196,154,60,.05);border-radius:0 var(--radius) var(--radius) 0;
  font-size:13.5px;color:var(--ink-2);line-height:1.62}
.irr-verdict b{color:var(--ink)}
.irr-fixed{font-size:11.5px;color:var(--ink-lbl);line-height:1.6;margin-top:16px}
.irr-fixed b{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-weight:400}
@media(max-width:700px){
  .irr-slider{grid-template-columns:1fr auto;gap:8px 12px}
  .irr-slider input[type=range]{grid-column:1/-1}
  .irr-out-v{font-size:20px}
  .irr-cell{font-size:11px;padding:10px 2px}
  .irr-cell.head{font-size:8.5px}
}


/* ============================================================
   WHO ABSORBS THE LOSS? — waterfall
   Three party hues from the validated categorical set (all-pairs
   safe on this surface); anything leaving the structure takes the
   de-emphasis gray, because it is no longer identity — it is exit.
   Every bar is direct-labelled, so colour is never load-bearing.
   ============================================================ */
.wf{margin:6px 0 0}
.wf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.wf-chip{background:none;border:1px solid var(--hair);border-radius:14px;padding:7px 14px;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-lbl);
  transition:border-color .2s,color .2s,background .2s}
.wf-chip:hover{border-color:var(--gold-dim);color:var(--gold)}
.wf-chip.on{background:rgba(196,154,60,.14);border-color:rgba(196,154,60,.45);color:var(--gold)}
.wf-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.wf-sev{padding:16px 18px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--bg-3);margin-bottom:26px}
.wf-sev-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.wf-sev-head label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wf-sev-head b{font-family:var(--mono);font-size:15px;color:var(--gold);font-weight:500}

.wf-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.wf-total-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-lbl)}
.wf-total-v{font-family:var(--mono);font-size:var(--fig-key);color:var(--red);line-height:1;letter-spacing:-.01em}

.wf-rows{margin:4px 0 0}
.wf-row{display:grid;grid-template-columns:186px 1fr 96px;gap:14px;align-items:center;padding:11px 0;
  border-bottom:1px solid rgba(245,240,232,.05)}
.wf-row:last-child{border-bottom:none}
.wf-row.is-rest{opacity:.55}
.wf-lab{font-size:13px;color:var(--ink-2);line-height:1.4}
.wf-lab small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-lbl);margin-top:3px}
.wf-track{position:relative;height:26px;border-radius:3px;background:rgba(245,240,232,.045)}
.wf-bar{position:absolute;top:0;bottom:0;border-radius:3px;transition:left .3s,width .3s}
.wf-bar.financier{background:linear-gradient(180deg,#4f9df3,#3D8EF0)}
.wf-bar.supplier{background:linear-gradient(180deg,#c19241,#A87F2C)}
.wf-bar.lessee{background:linear-gradient(180deg,#22b184,#1D9E75)}
.wf-bar.exit{background:rgba(245,240,232,.28)}
.wf-bar.total{background:rgba(224,108,90,.55)}
.wf-val{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:right}
.wf-val small{display:block;font-size:9.5px;color:var(--ink-lbl);margin-top:2px}
.wf-holder{margin-top:8px;padding:13px 16px;border-left:2px solid var(--gold);background:rgba(196,154,60,.05);
  border-radius:0 var(--radius) var(--radius) 0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.wf-holder b{color:var(--ink)}
@media(max-width:700px){
  .wf-row{grid-template-columns:1fr 74px;gap:8px 10px}
  .wf-track{grid-column:1/-1;order:3;height:20px}
  .wf-lab{font-size:12px}
  .wf-total-v{font-size:25px}
}





/* ============================================================
   DURATION MISMATCH STRESS TEST
   Three durations on one axis, because the data *is* a duration
   comparison. Deliberately a coverage test on operating cash flow:
   residual value is excluded and stays in the Compute Asset IRR,
   where the framework separation puts it.
   ============================================================ */
.dmt{margin:6px 0 0}
.dmt-ctrls{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.dmt-c label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-lbl);margin-bottom:7px}
.dmt-c output{font-family:var(--mono);font-size:15px;color:var(--ink);display:block;margin-bottom:8px}
.dmt-c input[type=range]{display:block;width:100%;height:16px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;border:0;cursor:ew-resize}
.dmt-c input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(245,240,232,.13)}
.dmt-c input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(245,240,232,.13)}
.dmt-c input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;
  border-radius:50%;background:var(--gold);border:2px solid var(--bg-2);box-shadow:0 0 0 1px var(--gold)}
.dmt-c input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold);
  border:2px solid var(--bg-2);box-shadow:0 0 0 1px var(--gold)}
.dmt-c input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.dmt-fig svg{display:block;width:100%;height:auto}
.dmt-legend{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:14px}
.dmt-key{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-lbl)}
.dmt-key i{width:14px;height:10px;border-radius:2px;flex:none}
.dmt-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.dmt-out-i{border-left:2px solid var(--gold-dim);padding-left:13px}
.dmt-out-v{font-family:var(--mono);font-size:var(--fig-sub);color:var(--ink);line-height:1.1}
.dmt-out-v.warn{color:var(--red)}
.dmt-out-v.ok{color:#1D9E75}
.dmt-out-l{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.dmt-verdict{margin-top:18px;padding:13px 16px;border-left:2px solid var(--gold);background:rgba(196,154,60,.05);
  border-radius:0 var(--radius) var(--radius) 0;font-size:13.5px;color:var(--ink-2);line-height:1.62}
.dmt-verdict b{color:var(--ink)}
.dmt-verdict.alarm{border-left-color:var(--red);background:rgba(224,108,90,.06)}
@media(max-width:860px){.dmt-ctrls{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:700px){.dmt-out{gap:14px}.dmt-out-v{font-size:17px}}

/* ============================================================
   ASSET-CLASS MATURITY MONITOR
   The tracking instrument for the Five-Criterion Test above:
   every condition carries an observable trigger and a dated
   observation, so the page can be re-checked rather than re-argued.
   Status glyphs reuse the scorecard vocabulary on purpose.
   ============================================================ */
.acm{margin:6px 0 0}
.acm-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.acm-stage{padding:10px 12px 12px;border-radius:var(--radius);border:1px solid rgba(245,240,232,.10);
  background:rgba(245,240,232,.03)}
.acm-stage.done{border-color:rgba(29,158,117,.4);background:rgba(29,158,117,.07)}
.acm-stage.now{border-color:var(--gold);background:rgba(196,154,60,.09)}
.acm-stage.future{border-style:dashed;background:transparent}
.acm-stage-n{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-lbl)}
.acm-stage.now .acm-stage-n{color:var(--gold)}
.acm-stage-t{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:7px}
.acm-stage.now .acm-stage-t,.acm-stage.done .acm-stage-t{color:var(--ink-2)}
.acm-here{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-top:9px;display:flex;align-items:center;gap:6px}
.acm-here::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
  animation:acmPulse 2.2s ease-in-out infinite}
@keyframes acmPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(196,154,60,.4)}50%{opacity:.55;box-shadow:0 0 0 4px rgba(196,154,60,0)}}
@media(prefers-reduced-motion:reduce){.acm-here::before{animation:none}}

.acm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:20px 0 4px;
  padding-top:18px;border-top:1px solid var(--hair)}
.acm-head-v{font-family:var(--mono);font-size:15px;color:var(--ink)}
.acm-head-l{font-size:12px;color:var(--ink-3)}

.acm-row{border-bottom:1px solid rgba(245,240,232,.05)}
.acm-row:last-child{border-bottom:none}
.acm-btn{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;width:100%;
  padding:13px 0;background:none;border:0;text-align:left;cursor:pointer;font:inherit}
.acm-btn:hover .acm-name{color:var(--ink)}
.acm-btn:hover .acm-caret{color:var(--gold)}
.acm-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.acm-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;min-width:96px}
.acm-chip .g{font-size:11px;line-height:1}
.acm-chip.met{color:#1D9E75}
.acm-chip.emerging{color:#A87F2C}
.acm-chip.no{color:var(--ink-lbl)}
.acm-name{font-size:13.5px;color:var(--ink-2);line-height:1.5;transition:color .18s}
.acm-caret{font-family:var(--mono);font-size:13px;color:var(--ink-3);transition:transform .22s,color .18s}
.acm-btn[aria-expanded="true"] .acm-caret{transform:rotate(90deg)}
.acm-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.7,.3,1)}
.acm-body.open{max-height:480px}
@media(prefers-reduced-motion:reduce){.acm-body{transition:none}}
.acm-dl{display:grid;grid-template-columns:88px 1fr;gap:7px 14px;padding:0 0 16px 109px}
.acm-dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-lbl);padding-top:2px}
.acm-dd{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.acm-dd b{color:var(--ink-2);font-weight:500}
@media(max-width:860px){
  .acm-stages{grid-template-columns:1fr 1fr}
  .acm-btn{grid-template-columns:1fr auto;gap:8px}
  .acm-chip{grid-column:1;grid-row:1}
  .acm-name{grid-column:1;grid-row:2}
  .acm-caret{grid-column:2;grid-row:1}
  .acm-dl{padding-left:0}
  .acm-dl{grid-template-columns:1fr;gap:3px}
  .acm-dd{margin-bottom:9px}
}

/* ============================================================
   FINANCING ARCHITECTURE EXPLORER
   Four announced structures put through one fixed set of six
   structural questions. Disclosure is encoded twice — glyph and
   fill — because colour is never allowed to be load-bearing.
   ============================================================ */
.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}
.fae{margin:6px 0 0}
.fae-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
/* States in words the inversion the tab strip already encodes — scale ascending
   left to right, disclosure descending. It sits directly under the strip because
   that is where the evidence is: the reader should not have to click all four
   tabs, or reach the closing note, to see the finding. Deliberately NOT boxed —
   .fae-verdict below is the gold-bordered box, and two identical treatments
   carrying different meanings would read as the same kind of statement. */
.fae-inversion{margin:-4px 0 20px;padding-top:13px;border-top:1px solid var(--hair);
  font-size:13px;color:var(--ink-2);line-height:1.7}
/* Keep each ladder on one line — breaking "6 → 2 → 1 → 0" mid-sequence orphans a
   digit and destroys the thing the sentence is pointing at. Released below 420px,
   where the longer ladder no longer fits the measure. */
.fae-inversion b{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:400;white-space:nowrap}
@media(max-width:420px){.fae-inversion b{white-space:normal}}
/* Own line: it is the finding, not the tail of the sentence above it. */
.fae-inversion strong{display:block;margin-top:7px;color:var(--gold);font-weight:500}
.fae-tab{text-align:left;padding:11px 12px;border:1px solid var(--hair);border-radius:var(--radius);
  background:transparent;cursor:pointer;transition:border-color .18s,background .18s}
.fae-tab:hover{border-color:var(--gold-dim);background:rgba(196,154,60,.04)}
.fae-tab[aria-selected="true"]{border-color:var(--gold);background:rgba(196,154,60,.07)}
.fae-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fae-tab-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.35;display:block}
.fae-tab[aria-selected="true"] .fae-tab-n{color:var(--ink)}
.fae-tab-d{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-lbl);
  margin-top:6px;display:block}
.fae-tab-s{font-family:var(--mono);font-size:9px;letter-spacing:.06em;margin-top:5px;display:block}

/* four-layer structural flow */
.fae-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.fae-node{position:relative;padding:13px 13px 14px;border-radius:var(--radius);min-height:104px;
  border:1px solid var(--hair);background:var(--bg-3)}
.fae-node.ghost{border-style:dashed;border-color:rgba(245,240,232,.16);background:transparent}
.fae-node-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-lbl)}
.fae-node-v{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:8px}
.fae-node.ghost .fae-node-v{color:var(--ink-lbl);font-style:italic}
.fae-node::after{content:"";position:absolute;top:50%;right:-10px;width:10px;height:1px;
  background:rgba(245,240,232,.22);z-index:1}
.fae-node:last-child::after{display:none}
.fae-flow.has-gap .fae-node.ghost::after{background:none;
  background-image:linear-gradient(90deg,rgba(245,240,232,.22) 50%,transparent 50%);background-size:4px 1px}

/* six-question disclosure test */
.fae-test{margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.fae-q{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(170px,32%);gap:14px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(245,240,232,.05)}
.fae-q:last-child{border-bottom:none}
.fae-mark{font-family:var(--mono);font-size:13px;line-height:1.3;text-align:center}
.fae-q.yes .fae-mark{color:#1D9E75}
.fae-q.no  .fae-mark{color:var(--ink-lbl)}
.fae-q-t{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.fae-q.yes .fae-q-t{color:var(--ink-2)}
.fae-q-a{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);line-height:1.55}
.fae-q.no .fae-q-a{color:var(--ink-lbl);font-style:italic}

.fae-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--hair)}
.fae-score-v{font-family:var(--mono);font-size:var(--fig-display);color:var(--ink);line-height:1}
.fae-score-l{font-size:12px;color:var(--ink-3)}
.fae-verdict{margin-top:16px;padding:13px 16px;border-left:2px solid var(--gold);
  background:rgba(196,154,60,.05);border-radius:0 var(--radius) var(--radius) 0;
  font-size:13.5px;color:var(--ink-2);line-height:1.62}
.fae-verdict b{color:var(--ink)}
@media(max-width:860px){
  .fae-tabs{grid-template-columns:repeat(2,1fr)}
  .fae-flow{grid-template-columns:1fr;gap:16px}
  .fae-node{min-height:0}
  .fae-node::after{top:auto;bottom:-16px;right:auto;left:20px;width:1px;height:16px}
  .fae-q{grid-template-columns:22px 1fr;gap:9px}
  .fae-q-a{grid-column:2;margin-top:3px}
}

/* ============================================================
   SILICON vs DEBT CLOCK
   One time axis. Above it, the architecture cadence. Below it,
   the disclosed amortisation profile. The question the exhibit
   asks is the gap between them: how many hardware generations
   must the original collateral survive before the note is repaid.
   ============================================================ */
.sdc{margin:6px 0 0}
.sdc-figure svg{display:block;width:100%;height:auto}

/* Scrubber sits below the axis in normal flow with its own visible track —
   overlaying it on the plot made the track read as a gridline. */
.sdc-track{position:relative;margin-top:14px;padding-top:9px;border-top:1px solid var(--hair)}
.sdc-figure input[type=range].sdc-scrub{display:block;width:100%;height:18px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;border:0;cursor:ew-resize}
.sdc-figure input[type=range].sdc-scrub::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(245,240,232,.13)}
.sdc-figure input[type=range].sdc-scrub::-moz-range-track{height:3px;border-radius:2px;
  background:rgba(245,240,232,.13)}
.sdc-figure input[type=range].sdc-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  margin-top:-6px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-2);
  box-shadow:0 0 0 1px var(--gold)}
.sdc-figure input[type=range].sdc-scrub::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--gold);border:2px solid var(--bg-2);box-shadow:0 0 0 1px var(--gold)}
.sdc-figure input[type=range].sdc-scrub:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sdc-hint{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-lbl);text-align:right;margin-top:4px;transition:opacity .3s}
.sdc.touched .sdc-hint{opacity:0}
.sdc-named{font-size:11.5px;color:var(--ink-3);margin-top:12px;line-height:1.6}
.sdc-named b{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);font-weight:400}

.sdc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:18px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.sdc-out-i{border-left:2px solid var(--gold-dim);padding-left:13px}
.sdc-out-v{font-family:var(--mono);font-size:var(--fig-sub);color:var(--ink);line-height:1.1}
.sdc-out-v.warn{color:var(--red)}
.sdc-out-l{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.sdc-verdict{margin-top:18px;padding:13px 16px;border-left:2px solid var(--gold);background:rgba(196,154,60,.05);
  border-radius:0 var(--radius) var(--radius) 0;font-size:13.5px;color:var(--ink-2);line-height:1.62}
.sdc-verdict b{color:var(--ink)}
.sdc-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.sdc-key{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.sdc-key i{width:13px;height:9px;border-radius:2px;flex:none}
@media(max-width:700px){.sdc-out{gap:14px}.sdc-out-v{font-size:17px}}

/* ---------- Timeline strip ---------- */
.timeline{position:relative;margin:26px 0 6px;padding-left:2px}
.timeline-item{position:relative;padding:0 0 22px 30px;border-left:1px solid var(--hair)}
.timeline-item:last-child{padding-bottom:0;border-left-color:transparent}
.timeline-dot{position:absolute;left:-5px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--viz-2);border:2px solid var(--bg-2)}
.timeline-item.is-target .timeline-dot{background:transparent;border:1.5px dashed var(--gold-dim)}
.timeline-date{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-lbl)}
.timeline-title{font-family:var(--serif);font-size:17px;color:var(--ink);margin:3px 0 5px}
.timeline-scale{font-family:var(--mono);font-size:12.5px;color:var(--gold)}
.timeline-item.is-target .timeline-scale{color:var(--ink-3)}
.timeline-desc{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:5px}
.timeline-flag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  border:1px dashed var(--gold-dim);color:var(--gold-dim);border-radius:10px;padding:2px 8px;margin-left:8px;vertical-align:middle}

/* ---------- Author box (house standard) ---------- */
.author-box{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--bg-2);border:1px solid rgba(196,154,60,.1);border-radius:var(--radius);margin:32px 0}
.author-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(196,154,60,.3);flex-shrink:0}
.author-name{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);line-height:1.2}
.author-title{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.author-creds{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.author-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.author-links a{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-lbl);text-decoration:none;border-bottom:1px solid rgba(196,154,60,.2);padding-bottom:1px;transition:color .2s,border-color .2s}
.author-links a:hover{color:var(--gold);border-color:var(--gold);text-decoration:none}

/* ---------- Citation block (GEO / attribution) ---------- */
.cite-block{border:1px solid var(--hair);border-left:2px solid var(--gold);border-radius:var(--radius);padding:18px 20px;margin:28px 0;background:rgba(196,154,60,.03)}
.cite-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.cite-text{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.cite-text code{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);background:var(--bg-3);padding:6px 8px;border-radius:3px;display:block;margin-top:8px;max-width:100%;overflow-wrap:anywhere;word-break:break-word;line-height:1.55}

/* ---------- Article CTA (house standard) ---------- */
.article-cta{background:var(--bg-2);border:1px solid rgba(196,154,60,.2);border-radius:var(--radius);padding:36px;margin:48px 0;text-align:center}
.article-cta-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.article-cta-title{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);margin-bottom:12px}
.article-cta-body{font-family:var(--sans);font-size:15px;color:var(--ink-3);line-height:1.7;max-width:540px;margin:0 auto 28px}
.article-cta-btn{display:inline-block;background:var(--gold);color:var(--bg);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:14px 32px;border-radius:2px;text-decoration:none;font-weight:500;transition:opacity .2s}
.article-cta-btn:hover{opacity:.85;color:var(--bg);text-decoration:none}

/* ---------- Share bar (house standard) ---------- */
.share-bar{display:flex;align-items:center;gap:10px;margin:0 0 48px;flex-wrap:wrap}
.share-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-lbl);flex-shrink:0;margin-right:4px}
.share-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-2);border:1px solid rgba(196,154,60,.15);
  border-radius:2px;padding:9px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap}
.share-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--bg-3);text-decoration:none}
.share-btn svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.share-btn.copied{border-color:rgba(45,138,78,.5);color:#2d8a4e}
.share-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- More research / frameworks (house standard) ---------- */
.more-research{margin:48px 0}
.more-research-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.more-research-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.more-research-card{background:var(--bg-2);border:1px solid rgba(196,154,60,.1);border-radius:var(--radius);padding:20px;text-decoration:none;display:block;transition:border-color .2s}
.more-research-card:hover{border-color:rgba(196,154,60,.3);text-decoration:none}
.more-card-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.more-card-title{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.3}
.more-card-desc{font-family:var(--sans);font-size:12px;color:var(--ink-3);line-height:1.5}

/* ---------- Disclaimer box (house standard) ---------- */
.disclaimer-box{background:var(--bg-2);border:1px solid rgba(196,154,60,.08);border-radius:var(--radius);padding:20px 24px;margin:40px 0}
.disclaimer-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-lbl);margin-bottom:8px}
/* toggle variant — the chevron is scaled down to suit the 9px label */
.disclaimer-label.section-toggle-header{margin-bottom:0!important;padding:2px 0}
.disclaimer-label.section-toggle-header .section-chevron{font-size:18px;padding-left:12px}
.disclaimer-label.section-toggle-header:hover{color:var(--gold)}
.disclaimer-label.section-toggle-header:hover .section-chevron{color:var(--gold)}
.disclaimer-box .section-collapsible-body.open{padding-top:14px}
.disclaimer-text{font-family:var(--sans);font-size:11px;color:var(--ink-lbl);line-height:1.7}
@media(max-width:700px){.more-research-grid{grid-template-columns:1fr}.article-cta{padding:24px}.share-label{display:none}.share-btn{padding:8px 11px;gap:5px}}

/* ---------- Misc ---------- */
.disclaimer{font-size:12px;color:var(--ink-lbl);margin-top:10px}
.small-caps{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
::selection{background:rgba(196,154,60,.3);color:var(--ink)}

@media(max-width:700px){
  .exhibit-wrap{padding:16px}
  .bluf-stats{grid-template-columns:1fr 1fr}
  .case-card-head{flex-direction:column}
  .case-verdict{text-align:left}
}

/* ============================================================
   PRINT — institutional readers PDF this.
   Browsers do NOT print background colours by default, so a
   dark-surface page would print light ink on white and vanish.
   Prose is therefore inverted to black-on-white, while chart and
   exhibit surfaces keep their dark fill via print-color-adjust
   (canvas charts are drawn light-on-dark and cannot be recoloured).
   ============================================================ */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff!important;color:#111!important;font-size:10.5pt}
  .nav,.toc-float,.share-bar,.article-cta,.more-research,.reading-progress,
  .footer,.breadcrumb,.tableview-btn,.exhibit-toolbar,.mf-tabs,.mf-why,
  [id*="consent"],[class*="consent"]{display:none!important}
  .section-collapsible-body{display:block!important;padding-top:12px!important}
  .section-chevron,.faq-chevron{display:none!important}
  .faq-answer{max-height:none!important;overflow:visible!important}
  .tableview[hidden]{display:block!important}
  h1,h2,h3,h4,.section-title,.role-name,.obs-head,.case-name,
  .score-crit{color:#111!important}
  .prose,.prose p,.obs-text,.more-card-desc,.disclaimer-text,
  .section-subtitle,.role-desc,.score-desc{color:#222!important}
  a{color:#111!important;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  a[href^="#"]::after{content:""}
  mark.stat,.highlight,strong{color:#111!important;font-weight:600}
  .exhibit-wrap,.mf,.calc,.chart-frame,.stat-tile,.case-card,.bluf-block,
  .stress-col,.impl-card,.role-card,.disclaimer-box,.mf-card{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    background:#0d1826!important;border-color:rgba(245,240,232,.18)!important}
  .exhibit-wrap,.mf,.calc,.bluf-block,.case-card,.stat-tile{color:#e9e4dc!important}
  .exhibit-wrap h2,.exhibit-wrap h3,.exhibit-title,.mf-title,.case-name,
  .stack-tier-name,.stat-tile-value{color:#f5f0e8!important}
  .exhibit-note,.exhibit-source,.stack-tier-detail,.mf-sub,.mf-card-b{color:#c9c3b9!important}
  .article-wrap{max-width:none;padding:0}
  .exhibit-wrap,.mf,.calc,.case-card,.stat-tile,.role-card,.impl-card,
  .obs-row,.score-row,.stress-col,table,figure{break-inside:avoid;page-break-inside:avoid}
  h2,h3{break-after:avoid;page-break-after:avoid}
  .table-scroll{overflow:visible!important}
  .table-scroll table{min-width:0!important;width:100%!important}
  .data-table{font-size:8.5pt}
}

/* ---------- Mobile touch targets (P2 audit item — larger thumbs/chips under 640px only) ---------- */
@media(max-width:640px){
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-11px;border-width:3px}
  input[type=range]::-moz-range-thumb{width:24px;height:24px;border-width:3px}
  input[type=range]{padding:9px 0}
  .irr-slider input[type=range]::-webkit-slider-thumb,
  .dmt-c input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-11px;border-width:3px}
  .irr-slider input[type=range]::-moz-range-thumb,
  .dmt-c input[type=range]::-moz-range-thumb{width:24px;height:24px;border-width:3px}
  .mf-chip,.wf-chip,.tableview-btn,.calc-reset{min-height:40px;padding-top:11px;padding-bottom:11px;font-size:10.5px}
  .mf-tab,.irr-view{min-height:40px;display:inline-flex;align-items:center}
  .mf-why{min-height:40px}
}

/* ============================================================
   NEW INTERACTIVE VISUALS — Quantum Computing page only.
   Namespaced per exhibit (.stepper-, .qec-, .vzbar-, .vzmeter-,
   .vzsm-, .vzmat-), reusing house tokens (--gold/--blue/--purple/
   --green/--amber/--red, --hair, --radius, --mono, --serif) and the
   existing .chart-legend* classes for legends. One shared tooltip.
   ============================================================ */

/* ---------- §01 hero — 6 events, not compute's 4, needs a 3x2 grid ---------- */
#quantumFormation .mf-rail{grid-template-columns:repeat(3,1fr);row-gap:28px}
#quantumFormation .mf-rail::before{display:none}
@media(max-width:900px){#quantumFormation .mf-rail{display:block}}

/* ---------- Ambient glow — soft depth behind the hero and BLUF, restrained ---------- */
/* overflow:hidden added 2026-09: .bluf-block::before's right:-8% bleed
   (below) is a percentage of the block's OWN rendered width, so its
   absolute pixel overflow scales with viewport width even as the block
   itself is capped at 828px — measured causing real page-level horizontal
   scroll from ~761px up to ~950-990px viewport width (well past the
   "tablet" range this looked scoped to at first glance), invisible in
   normal use only because the glow itself has no interactive affordance
   to reveal it. The glow's own visual job (a soft blur, transparent by
   70% of its own radius) is unaffected by clipping the last few percent
   of its extent, so this has no visible effect on the intended look. */
#quantumFormation,.bluf-block{position:relative;isolation:isolate;overflow:hidden}
#quantumFormation::before,.bluf-block::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:60%;height:140%;top:-20%;
  background:radial-gradient(ellipse at center,rgba(196,154,60,.10),rgba(196,154,60,0) 70%);
  filter:blur(6px)
}
#quantumFormation::before{left:-6%}
.bluf-block::before{right:-8%;left:auto}
@media(max-width:760px){#quantumFormation::before,.bluf-block::before{display:none}}

/* ---------- §02 Utility Bridge — the chain assembles as it reveals ---------- */
#bridgeFlow .stack-rail::before{transform-origin:top;transform:scaleY(0);transition:transform .5s ease}
#bridgeFlow .stack-node{transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.exhibit-wrap.is-visible #bridgeFlow .stack-rail::before{transform:scaleY(1);transition-delay:calc(var(--reveal-i,0) * 90ms)}
.exhibit-wrap.is-visible #bridgeFlow .stack-node{transform:scale(1);transition-delay:calc(var(--reveal-i,0) * 90ms + 150ms)}
@media(prefers-reduced-motion:reduce){#bridgeFlow .stack-rail::before,#bridgeFlow .stack-node{transform:none;transition:none}}

/* ---------- Button & link polish — a soft gold glow, never a hard flash ---------- */
.article-cta-btn{transition:opacity .2s,transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
@media(hover:hover){
  .article-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(196,154,60,.45)}
  .mf-jump{transition:letter-spacing .2s ease,color .2s ease}
  .mf-jump:hover{letter-spacing:.14em}
  .share-btn{transition:transform .18s ease,border-color .18s ease}
  .share-btn:hover{transform:translateY(-2px)}
}

/* ---------- BLUF stat tiles — brighten on hover, the border does the work ---------- */
.bluf-stat{transition:border-color .2s ease,background .2s ease}
@media(hover:hover){.bluf-stat:hover{border-left-color:var(--ink-3);background:rgba(245,240,232,.025)}}

/* ---------- Tooltip — a touch more presence than a plain box ---------- */
.viz-tooltip{backdrop-filter:blur(6px)}

/* ============================================================
   §03 · THE ERROR SUPPRESSION LAW — one exhibit, deliberately styled like
   a figure lifted from the Nature paper it cites, not another financial
   bar chart. Graph-paper backdrop, serif-italic variable names, a real
   log axis. The curve is the paper's own reported scaling law (Lambda =
   2.14 +/- 0.02 per +2 code distance) anchored to the one measured point
   (d=7); every other point on the curve is explicitly dashed/hollow and
   labelled as extrapolation, never presented as a second measurement.
   ============================================================ */
.qmath-panel{
  position:relative;margin:22px 0 8px;padding:26px 24px 20px;border-radius:var(--radius);
  border:1px solid rgba(61,142,240,.18);
  background-color:var(--bg-2);
  background-image:
    linear-gradient(rgba(245,240,232,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,240,232,.045) 1px,transparent 1px);
  background-size:24px 24px;
}
.qmath-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.qmath-label::before{content:'';width:7px;height:7px;border:1.5px solid var(--blue);border-radius:1px;transform:rotate(45deg);flex:none}
.qmath-formula{font-family:var(--serif);font-style:italic;font-size:clamp(19px,3vw,26px);color:var(--ink);
  text-align:center;padding:14px 10px 18px;letter-spacing:.01em}
.qmath-formula sub{font-size:.62em;font-style:normal}
.qmath-formula .qmath-val{font-family:var(--mono);font-style:normal;color:var(--blue);font-size:.85em}
.qmath-formula .qmath-op{font-style:normal;color:var(--ink-3);padding:0 6px}
.qmath-caption{font-size:13px;color:var(--ink-3);text-align:center;max-width:52ch;margin:0 auto 22px;line-height:1.6}
.qmath-svg{width:100%;height:auto;display:block;overflow:visible}
.qmath-axis-label{font-family:var(--mono);font-size:9px;fill:var(--ink-lbl);letter-spacing:.04em}
.qmath-tick-label{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3)}
.qmath-gridline{stroke:rgba(245,240,232,.07);stroke-width:1}
.qmath-curve-measured{fill:none;stroke:var(--blue);stroke-width:1.6}
.qmath-curve-extrap{fill:none;stroke:var(--blue);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55}
.qmath-pt-measured{fill:var(--blue);stroke:var(--bg-2);stroke-width:2;cursor:pointer}
.qmath-pt-extrap{fill:var(--bg-2);stroke:var(--blue);stroke-width:1.4;opacity:.6;cursor:pointer}
.qmath-pt-rl{fill:var(--gold);stroke:var(--bg-2);stroke-width:2;cursor:pointer}
.qmath-callout{font-family:var(--sans);font-size:10.5px;fill:var(--ink-2)}
.qmath-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(245,240,232,.08);font-size:11.5px;color:var(--ink-3)}
.qmath-legend-item{display:flex;align-items:center;gap:7px}
.qmath-legend-key{width:12px;height:12px;border-radius:50%;flex:none}
@media(max-width:600px){.qmath-panel{padding:20px 14px 16px}}

/* ---------- §02 Utility Bridge drawn as a circuit — same qmath language ---------- */
.qcircuit-svg{width:100%;height:auto;overflow:visible;margin:6px 0 4px}
.qcircuit-zone-label{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-lbl)}
.qcircuit-gate{fill:var(--bg-2);stroke:rgba(196,154,60,.4);stroke-width:1.3;cursor:pointer;transition:stroke .18s ease,fill .18s ease}
.qcircuit-gate:hover,.qcircuit-gate.is-active{stroke:var(--gold);fill:rgba(196,154,60,.14)}
.qcircuit-gate-label{font-family:var(--serif);font-style:italic;font-size:13px;fill:var(--ink);text-anchor:middle;pointer-events:none}
.qcircuit-num{font-family:var(--mono);font-size:7.5px;fill:var(--ink-lbl);text-anchor:middle;pointer-events:none;letter-spacing:.03em}
.qcircuit-arrow{fill:var(--ink-4)}
@media(prefers-reduced-motion:reduce){.qcircuit-gate{transition:none}}

/* ---------- §11 Revenue Scale vs. Quality — scientific scatter ---------- */
.qscatter-tier-band{fill:rgba(245,240,232,.015)}
.qscatter-tier-band.alt{fill:rgba(245,240,232,.03)}
.qscatter-tier-label{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.02em}
.qscatter-tier-sub{font-family:var(--sans);font-size:9px;fill:var(--ink-lbl);font-style:italic}
.qscatter-pt{stroke:var(--bg-2);stroke-width:2;cursor:pointer;transition:r .15s ease}
.qscatter-pt:hover{stroke:var(--gold)}
.qscatter-pt-label{font-family:var(--mono);font-size:10.5px;fill:var(--ink);pointer-events:none}
.qscatter-pt-sub{font-family:var(--sans);font-size:9px;fill:var(--ink-3);pointer-events:none}

/* ---------- §09 Value Migration Curve — energy-level diagram ---------- */
.qlvl-row{cursor:pointer}
.qlvl-level-ground{stroke:var(--gold);stroke-width:2.5}
.qlvl-level-excited{stroke:var(--ink-4);stroke-width:1.6;stroke-dasharray:2 3}
.qlvl-row:hover .qlvl-level-excited{stroke:var(--blue);opacity:.9}
.qlvl-dot-filled{fill:var(--gold)}
.qlvl-dot-hollow{fill:var(--bg-2);stroke:var(--ink-4);stroke-width:1.3}
.qlvl-arrow{fill:none;stroke:rgba(61,142,240,.5);stroke-width:1.2;stroke-dasharray:3 3}
.qlvl-arrowhead{fill:rgba(61,142,240,.6)}
.qlvl-name{font-family:var(--serif);font-style:italic;font-size:14px;fill:var(--ink)}
.qlvl-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;fill:var(--gold)}
.qlvl-tag.dim{fill:var(--ink-lbl)}
.qlvl-desc{font-family:var(--sans);font-size:10px;fill:var(--ink-3)}
.qlvl-axis{font-family:var(--mono);font-size:8.5px;fill:var(--ink-lbl);letter-spacing:.05em}

/* ---------- §13 Falsifiers — fault-tree diagram ---------- */
.qft-line{stroke:var(--ink-4);stroke-width:1.2;fill:none}
.qft-top-box{fill:rgba(224,108,90,.08);stroke:var(--red);stroke-width:1.4}
.qft-top-label{font-family:var(--mono);font-size:10px;letter-spacing:.04em;fill:var(--ink);text-anchor:middle}
.qft-gate{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:1.4}
.qft-gate-label{font-family:var(--mono);font-size:9px;letter-spacing:.06em;fill:var(--ink-3);text-anchor:middle}
.qft-event{fill:var(--bg-2);stroke:rgba(196,154,60,.4);stroke-width:1.3;cursor:pointer;transition:stroke .18s,fill .18s}
.qft-event:hover{stroke:var(--gold);fill:rgba(196,154,60,.1)}
.qft-event-num{font-family:var(--mono);font-size:9px;fill:var(--gold);text-anchor:middle;pointer-events:none}
.qft-event-label{font-family:var(--sans);font-size:8.5px;fill:var(--ink-2);text-anchor:middle;pointer-events:none}
.qft-link-tag{font-family:var(--mono);font-size:7.5px;fill:var(--ink-lbl);text-anchor:middle;pointer-events:none}

/* ---------- §08 Market Size — scope-nesting diagram ---------- */
.qscope-ring{fill:none;stroke:var(--blue);transition:stroke .18s,fill .18s}
.qscope-ring.is-innermost{fill:rgba(196,154,60,.12);stroke:var(--gold)}
.qscope-ring-hit{fill:transparent;cursor:pointer}
.qscope-leader{stroke:var(--ink-4);stroke-width:1;fill:none;stroke-dasharray:1.5 3}
.qscope-name{font-family:var(--mono);font-size:10px;letter-spacing:.04em;fill:var(--ink)}
.qscope-val{font-family:var(--mono);font-size:13px;fill:var(--gold)}
.qscope-desc{font-family:var(--sans);font-size:9.5px;fill:var(--ink-3)}
.qscope-ring-group:hover .qscope-ring{stroke:var(--gold)}

/* ---------- §12 Archetype × Overlay — bipartite network graph ---------- */
.qnet-edge{stroke:var(--gold);stroke-width:1.6;fill:none;opacity:.5;transition:opacity .15s,stroke-width .15s;cursor:pointer}
.qnet-edge:hover{opacity:1;stroke-width:2.2}
.qnet-node-hit{fill:transparent;cursor:pointer}
.qnet-node-circle{fill:var(--bg-2);stroke:var(--gold);stroke-width:1.7}
.qnet-node-circle.is-empty{stroke:var(--ink-4);stroke-dasharray:2.5 2.5}
.qnet-node-label{font-family:var(--sans);font-size:10.5px;fill:var(--ink);font-weight:600;pointer-events:none}
.qnet-node-sub{font-family:var(--mono);font-size:8px;fill:var(--ink-lbl);letter-spacing:.03em;pointer-events:none}
.qnet-edge-count{font-family:var(--mono);font-size:8.5px;fill:var(--ink-3);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--bg-2);stroke-width:3px;stroke-linejoin:round}
.qnet-col-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--ink-lbl);text-anchor:middle}

/* ---------- §06 Workloads — Technology Readiness Level chart ---------- */
.qtrl-zone-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;fill:var(--ink-lbl);text-anchor:middle}
.qtrl-gridline{stroke:rgba(245,240,232,.06);stroke-width:1}
.qtrl-boundary{stroke:rgba(245,240,232,.14);stroke-width:1;stroke-dasharray:2 3}
.qtrl-tick-label{font-family:var(--mono);font-size:9px;fill:var(--ink-lbl);text-anchor:middle}
.qtrl-row-name{font-family:var(--sans);font-size:11px;fill:var(--ink);font-weight:600}
.qtrl-row-sub{font-family:var(--sans);font-size:8.5px;fill:var(--ink-3)}
.qtrl-bar{fill:rgba(196,154,60,.28);stroke:var(--gold);stroke-width:1.4;cursor:pointer;transition:fill .18s ease}
.qtrl-bar:hover{fill:rgba(196,154,60,.48)}
.qtrl-bar-label{font-family:var(--mono);font-size:10.5px;fill:var(--gold);font-weight:600}
.qtrl-axis-title{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;fill:var(--ink-lbl);text-anchor:middle}

/* ---------- Hero · The Utility Bridge, As It Actually Stands — a signature
   circuit-diagram masthead. Not decoration: it is the page's own nine-link
   framework (§02), rendered once at cover scale using the same real
   circuit notation already established there (single wire = physical
   measurement, double wire = demonstrated/logical, dashed + hollow node =
   projected/unresolved) — so the wire itself visually breaks from solid to
   dashed exactly where the real evidence does, at Executable Circuit Depth.
   That break IS the algorithm gap this whole page is built around. No
   border box, no graph-paper panel — a cover moment, not exhibit zero. */
/* No breakout: aligned to the same 828px measure as everything else on the
   page (BLUF block, scope-note, article prose) — reverted 2026-09 after
   owner review found the wider masthead visually inconsistent with the
   rest of the page. Matches the site's own --sig-bleed default (0,
   disabled) rather than the special-cased exception this used to be. The
   diagram itself still scrolls horizontally below its own 1100px min-width
   regardless of this value — see .bridge-svg-wrap and the runtime
   is-scrollable check in the JS, which now simply engages more often. */
.bridge-masthead{
  position:relative;margin-top:32px;margin-bottom:40px;padding:34px 20px 30px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:center;isolation:isolate}
/* A soft radial spotlight behind the whole masthead — gallery lighting, not
   a panel. ::before so it never competes with the SVG's own z-order. */
.bridge-masthead::before{content:'';position:absolute;inset:-20px 0;z-index:-1;
  background:radial-gradient(ellipse 55% 85% at center,rgba(196,154,60,.06),transparent 72%)}
/* Edge fade — a second, independent affordance alongside the text hint
   below, shown by the SAME .is-scrollable class the JS toggles after
   measuring the diagram at runtime. Anchored to .bridge-masthead (which
   never scrolls), not to .bridge-svg-wrap (which does) — an absolutely
   positioned child of a scrolling element scrolls away with its content
   unless given position:sticky, and a static "there's more here" cue at
   rest doesn't need to track scroll position to do its job. Full-height
   and low-opacity by design: it reads as a soft vignette at any vertical
   alignment rather than needing to line up exactly with the SVG's own
   (variable, headline-wrap-dependent) vertical position. */
.bridge-masthead::after{content:'';position:absolute;top:0;bottom:0;right:0;width:64px;
  background:linear-gradient(to right,transparent,var(--bg) 85%);
  pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}
.bridge-masthead.is-scrollable::after{opacity:1}
@media(prefers-reduced-motion:reduce){.bridge-masthead::after{transition:none}}
.bridge-kicker{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.bridge-kicker::before{content:'';width:6px;height:6px;border:1.3px solid var(--gold);border-radius:1px;transform:rotate(45deg);flex:none}
.bridge-kicker .em{color:var(--ink-2)}
.bridge-kicker .dim{color:var(--ink-lbl)}
.bridge-headline{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.4vw,27px);color:var(--ink);margin:0 auto 34px;max-width:42ch;line-height:1.4}
/* Fluid, not fixed — this masthead now has real width to work with (up to
   ~1188px), so let the diagram grow into it on desktop. min-width is the
   floor: below it, .bridge-svg-wrap scrolls horizontally instead of
   shrinking node labels into illegibility (same pattern as .vzmat-wrap /
   .table-scroll elsewhere on this page). aspect-ratio + min-height reserve
   the correct space in both regimes so neither causes layout shift. */
.bridge-svg-wrap{width:100%;max-width:1280px;margin:0 auto;overflow-x:auto;aspect-ratio:1280/340;min-height:292px}
.bridge-svg-wrap svg{display:block;width:100%;height:auto;min-width:1100px;margin:0 auto}
.bridge-caption{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);text-align:center;margin:22px auto 0}
/* The SVG's min-width:1100px (above) makes .bridge-svg-wrap scroll horizontally
   on anything narrower — same tradeoff as .table-scroll. Unlike a table, this
   is the first exhibit on the page, edge-to-edge, with no visible scrollbar
   affordance, so a reader can land on 7 of 9 nodes and not know two more
   exist. Visibility is driven by .is-scrollable, a class the JS toggles
   after MEASURING the diagram against its container at runtime — not a
   viewport media query. A width breakpoint is a proxy for "does this need
   to scroll" that goes wrong wherever the container's own width doesn't
   track the viewport linearly, which is exactly what happens here: found
   2026-09 via measurement, not inspection — the masthead's own breakout
   bleed pulls back between 1380-1630px to stay clear of the floating TOC
   sidebar, silently dropping the container below the SVG's 1100px floor
   at completely ordinary laptop widths, with zero visible cue. */
.bridge-scroll-hint{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin:14px 0 0}
.bridge-masthead.is-scrollable .bridge-scroll-hint{display:block}
.qb-scope-grid{stroke:var(--ink-4);stroke-width:.8;opacity:.4}
.qb-wire-solid{stroke:var(--gold);stroke-width:2.2;fill:none}
.qb-wire-double{stroke:var(--gold);stroke-width:2.6;fill:none}
.qb-wire-dashed{stroke:var(--ink-3);stroke-width:2;fill:none;stroke-dasharray:1 7;stroke-linecap:round}
.qb-node-filled{fill:var(--gold);stroke:var(--bg);stroke-width:3.5;cursor:pointer}
.qb-node-hollow{fill:var(--bg);stroke:var(--ink-3);stroke-width:2.2;cursor:pointer}
.qb-node-hit{fill:transparent;cursor:pointer}
.qb-name{font-family:var(--serif);font-style:italic;font-size:20px;fill:var(--ink);text-anchor:middle}
.qb-name.is-dim{fill:var(--ink-3)}
.qb-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;fill:var(--gold-dim);text-anchor:middle}
.qb-tag.is-dim{fill:var(--ink-lbl)}
.qb-gap-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:29px;fill:var(--red);text-anchor:middle}
.qb-gap-sub{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3);text-anchor:middle}
@media(max-width:600px){.bridge-headline{font-size:17px}}

/* ---------- §10 Capital formation — calendar timeline ---------- */
.qtl-axis{stroke:var(--ink-4);stroke-width:1.3}
.qtl-tick{stroke:var(--ink-4);stroke-width:1}
.qtl-month-label{font-family:var(--mono);font-size:9px;fill:var(--ink-lbl);text-anchor:middle}
.qtl-stem{stroke:rgba(196,154,60,.4);stroke-width:1.2}
.qtl-stem.is-pending{stroke:var(--ink-4);stroke-dasharray:2.5 2.5}
.qtl-dot{fill:var(--gold);stroke:var(--bg-2);stroke-width:2;cursor:pointer}
.qtl-dot.is-pending{fill:var(--bg-2);stroke:var(--ink-3);stroke-dasharray:2 1.5;cursor:pointer}
.qtl-hit{fill:transparent;cursor:pointer}
.qtl-card{fill:var(--bg-2);stroke:rgba(196,154,60,.35);stroke-width:1.2;transition:stroke .18s}
.qtl-card.is-pending{stroke:var(--ink-4);stroke-dasharray:3 2}
.qtl-card-group:hover .qtl-card{stroke:var(--gold)}
.qtl-card-date{font-family:var(--mono);font-size:8px;letter-spacing:.04em;fill:var(--ink-lbl)}
.qtl-card-title{font-family:var(--sans);font-size:10.5px;fill:var(--ink);font-weight:600}
.qtl-card-sub{font-family:var(--mono);font-size:9.5px;fill:var(--gold)}
.qtl-card-tag{font-family:var(--mono);font-size:7.5px;letter-spacing:.05em;fill:var(--ink-lbl)}

/* ---------- §11 Cash runway — burn-down depletion chart ---------- */
.qburn-gridline{stroke:rgba(245,240,232,.06);stroke-width:1}
.qburn-tick-label{font-family:var(--mono);font-size:9px;fill:var(--ink-lbl);text-anchor:middle}
.qburn-ytick-label{font-family:var(--mono);font-size:9px;fill:var(--ink-lbl);text-anchor:end}
.qburn-axis-title{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;fill:var(--ink-lbl);text-anchor:middle}
.qburn-line-estimate{fill:none;stroke:var(--gold);stroke-width:2;cursor:pointer}
.qburn-line-guidance{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-dasharray:4 3;cursor:pointer}
.qburn-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.qburn-dot-estimate{fill:var(--gold);stroke:var(--bg-2);stroke-width:2}
.qburn-dot-guidance{fill:var(--bg-2);stroke:var(--blue);stroke-width:2}
.qburn-label{font-family:var(--sans);font-size:10px;fill:var(--ink)}
.qburn-label-tag{font-family:var(--mono);font-size:8px;letter-spacing:.03em;fill:var(--ink-lbl)}

/* ---------- §05 Adoption funnel — Kaplan-Meier-style survival curve ---------- */
.qsurv-area{fill:var(--gold);opacity:.08}
.qsurv-step{fill:none;stroke:var(--gold);stroke-width:2}
.qsurv-baseline{stroke:var(--ink-4);stroke-width:1}
.qsurv-pt{fill:var(--gold);stroke:var(--bg-2);stroke-width:2;cursor:pointer}
.qsurv-pt:hover{stroke:var(--gold);fill:var(--bg-2)}
.qsurv-pct-label{font-family:var(--mono);font-size:13px;fill:var(--ink);text-anchor:middle}
.qsurv-stage-label{font-family:var(--sans);font-size:9px;fill:var(--ink-3);text-anchor:middle}

/* ---------- §04 DARPA — participant flow diagram ---------- */
.qflow-line{stroke:var(--ink-4);stroke-width:1.3;fill:none}
.qflow-line-dashed{stroke:var(--ink-4);stroke-width:1.2;fill:none;stroke-dasharray:3 3}
.qflow-box{fill:var(--bg-2);stroke:rgba(196,154,60,.4);stroke-width:1.3}
.qflow-box.is-advance{stroke:var(--green)}
.qflow-box.is-exclude{stroke:var(--ink-3)}
.qflow-box.is-separate{stroke:var(--blue);stroke-dasharray:3 2}
.qflow-title{font-family:var(--mono);font-size:10px;letter-spacing:.03em;fill:var(--ink);text-anchor:middle}
.qflow-count{font-family:var(--serif);font-style:italic;font-size:18px;fill:var(--gold);text-anchor:middle}
.qflow-sub{font-family:var(--sans);font-size:8.5px;fill:var(--ink-3);text-anchor:middle}
.qflow-tag{font-family:var(--mono);font-size:7.5px;letter-spacing:.05em;fill:var(--ink-lbl);text-anchor:middle}

/* ---------- Back-to-top — a reading-progress ring, not just a button ---------- */
.back-to-top{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;
  background:rgba(13,28,46,.88);backdrop-filter:blur(8px);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:850;padding:0;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),border-color .2s ease}
.back-to-top.show{opacity:1;pointer-events:auto;transform:none}
@media(hover:hover){.back-to-top:hover{border-color:rgba(196,154,60,.45);transform:translateY(-2px)}}
.back-to-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.btt-track{fill:none;stroke:rgba(245,240,232,.08);stroke-width:2}
.btt-ring{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .1s linear}
.btt-arrow{position:relative;color:var(--gold);font-size:17px;line-height:1;transition:transform .2s ease}
.back-to-top:hover .btt-arrow{transform:translateY(-2px)}
@media(max-width:760px){.back-to-top{right:14px;bottom:14px;width:44px;height:44px}.btt-arrow{font-size:15px}}
@media(prefers-reduced-motion:reduce){.back-to-top,.btt-arrow{transition:opacity .2s}}

/* ---------- Scroll reveal — IntersectionObserver-driven, JS adds .is-visible ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger.is-visible{transition-delay:calc(var(--reveal-i, 0) * 70ms)}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}}

/* ---------- Hover-lift micro-interaction — cards feel touchable, not printed ---------- */
.exhibit-wrap,.role-card,.vzsm-card{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
.role-card,.vzsm-card{cursor:default}
@media(hover:hover){
  .exhibit-wrap:hover{box-shadow:0 10px 32px -12px rgba(0,0,0,.5)}
  .role-card:hover,.vzsm-card:hover{transform:translateY(-3px);border-color:rgba(196,154,60,.35);box-shadow:0 12px 28px -14px rgba(0,0,0,.55)}
  .vzmat-chip{transition:transform .15s ease,background .15s ease}
  .vzmat-chip:hover{transform:translateY(-1px);background:rgba(196,154,60,.2)}
}
@media(prefers-reduced-motion:reduce){.exhibit-wrap,.role-card,.vzsm-card{transition:none}}

/* ---------- Card icons — thin-stroke line icons, house gold/ink ---------- */
.card-icon{width:30px;height:30px;margin-bottom:10px;display:block;color:var(--gold)}
.card-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.role-card{position:relative;overflow:hidden}
.role-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(196,154,60,.25);transition:background .22s ease;z-index:1}
.role-card:hover::before{background:var(--gold)}

/* ---------- Cursor-following spotlight — restrained, gold-tinted, hover-only ---------- */
.exhibit-wrap{position:relative}
.exhibit-wrap::after,.role-card::after,.vzsm-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;z-index:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(196,154,60,.10),transparent 68%)
}
@media(hover:hover){
  .exhibit-wrap:hover::after,.role-card:hover::after,.vzsm-card:hover::after{opacity:1}
}
.role-card>*,.vzsm-card>*{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.exhibit-wrap::after,.role-card::after,.vzsm-card::after{display:none}}

/* ---------- Count-up numbers — animated on scroll-into-view ---------- */
.count-target{font-variant-numeric:normal}

/* ---------- Shared tooltip (bubble + bar charts) ---------- */
.viz-tooltip{position:fixed;z-index:950;pointer-events:none;background:var(--bg-2);
  border:1px solid rgba(196,154,60,.35);border-radius:5px;padding:9px 12px;
  font-size:12px;line-height:1.5;color:var(--ink-2);max-width:240px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transition:opacity .12s;transform:translate(-50%,-100%)}
.viz-tooltip.on{opacity:1}
.viz-tooltip b{color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.02em}

/* ---------- §02 Utility Bridge — click-to-focus stepper ---------- */
.stack-row{cursor:pointer;transition:opacity .25s ease,background .2s ease;border-radius:var(--radius)}
.stack-flow.is-focused .stack-row{opacity:.3}
.stack-flow.is-focused .stack-row.is-active{opacity:1;background:rgba(196,154,60,.055)}
.stack-row.is-active .stack-tier-role{color:var(--gold)}
.stack-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.stepper-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-lbl);margin:-6px 0 14px}

/* ---------- §03 QEC Efficiency Map — bubble timeline ---------- */
.qec-viz{margin:20px 0 8px}
.qec-svg{width:100%;height:auto;display:block;overflow:visible}
.qec-bubble{cursor:pointer;transition:opacity .15s}
.qec-bubble:hover,.qec-bubble.hovered{opacity:.85}
.qec-axis-label{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-lbl)}
.qec-tick-label{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3)}
.qec-point-label{font-family:var(--sans);font-size:10.5px;fill:var(--ink-2)}
.qec-grid-line{stroke:rgba(245,240,232,.06);stroke-width:1}

/* ---------- Generic horizontal bar chart (§05 funnel · §07 · §09 · §10 · §11) ---------- */
.vzbar-chart{margin:18px 0 6px;display:flex;flex-direction:column;gap:14px}
.vzbar-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;align-items:center;gap:12px}
.vzbar-label{font-size:13px;color:var(--ink-2);line-height:1.4}
.vzbar-label small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-lbl);margin-top:2px;text-transform:uppercase}
.vzbar-track{position:relative;height:22px;background:rgba(245,240,232,.05);border-radius:3px;overflow:hidden}
.vzbar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px 4px 4px 3px;
  background:linear-gradient(90deg,rgba(196,154,60,.85),rgba(196,154,60,.65));
  transition:width .5s cubic-bezier(.2,.7,.3,1);min-width:2px}
.vzbar-fill.emphasis-off{background:linear-gradient(90deg,rgba(245,240,232,.16),rgba(245,240,232,.10))}
.vzbar-fill.status-pending{background:repeating-linear-gradient(135deg,rgba(196,154,60,.4) 0 6px,rgba(196,154,60,.18) 6px 12px);border:1px dashed var(--gold-dim)}
.vzbar-fill.status-na{background:rgba(245,240,232,.04)}
.vzbar-value{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap;min-width:64px;text-align:right}
.vzbar-row.is-na .vzbar-value{color:var(--ink-lbl);font-size:11px}
.vzbar-row:hover .vzbar-track{outline:1px solid rgba(196,154,60,.3)}
.vzbar-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--hair);font-size:11.5px;color:var(--ink-3)}
.vzbar-legend-item{display:flex;align-items:center;gap:7px}
.vzbar-legend-key{width:11px;height:11px;border-radius:2px;flex:none}

/* ---------- §05 Quantum Readiness Index meter ---------- */
.vzmeter{margin:22px 0 6px;max-width:420px}
.vzmeter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.vzmeter-val{font-family:var(--mono);font-size:26px;color:var(--ink)}
.vzmeter-tier{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(204,136,68,.35);border-radius:2px;padding:3px 8px}
.vzmeter-track{position:relative;height:10px;border-radius:5px;background:rgba(196,154,60,.12)}
.vzmeter-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.vzmeter-fill{transition:none}}
.vzmeter-scale{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:9px;color:var(--ink-lbl);letter-spacing:.04em;text-transform:uppercase}

/* ---------- §08 Market size — small multiples ---------- */
.vzsm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:20px 0 8px}
.vzsm-card{border:1px solid var(--hair);border-radius:var(--radius);padding:16px 16px 14px;background:rgba(245,240,232,.015)}
.vzsm-src{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.vzsm-val{font-family:var(--mono);font-size:22px;color:var(--ink);letter-spacing:-.01em}
.vzsm-lbl{font-size:12px;color:var(--ink-3);margin:4px 0 12px;line-height:1.5}
.vzsm-bar{position:relative;height:8px;border-radius:4px;background:rgba(245,240,232,.06);margin-bottom:6px}
.vzsm-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--gold-dim)}
.vzsm-bar-fill.is-range{background:repeating-linear-gradient(135deg,rgba(196,154,60,.55) 0 5px,rgba(196,154,60,.25) 5px 10px)}
.vzsm-note{font-family:var(--mono);font-size:9.5px;color:var(--ink-lbl);letter-spacing:.02em}

/* ---------- §12 Archetype × Overlay matrix ---------- */
.vzmat-wrap{overflow-x:auto;margin:20px 0 8px}
.vzmat{display:grid;grid-template-columns:150px repeat(4,1fr);gap:2px;min-width:640px;background:var(--hair)}
.vzmat-row{display:contents}
.vzmat-cell{background:var(--bg-2);padding:10px 10px;min-height:64px}
.vzmat-cell.head{background:var(--bg-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-lbl);display:flex;align-items:center}
.vzmat-cell.row-head{background:var(--bg-3);font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;line-height:1.35}
.vzmat-chip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--ink-2);
  background:rgba(196,154,60,.1);border:1px solid rgba(196,154,60,.25);border-radius:3px;padding:3px 7px;margin:2px 4px 2px 0}
.vzmat-cell.empty{color:var(--ink-lbl);font-size:11px;font-family:var(--mono)}

@media(max-width:640px){
  .vzbar-row{grid-template-columns:1fr;gap:4px}
  .vzbar-value{text-align:left}
}

/* Exhibit 16a — concentration spectrum, built like the Utility Bridge chain
   (§02): a glass-rail track (gradient fill, brighter center) carrying
   glowing gold nodes (same feGaussianBlur+feMerge filter as .qb-node-filled
   uses), serif names (matching the Bridge's node labels) with a mono
   category tag beneath. .qrisk-stem/.qrisk-track-line are pure connector
   graphics (ink-4 is correct there); .qrisk-pole/.qrisk-node-name/
   .qrisk-node-tag are real text and use ink/ink-lbl per the site-wide rule
   that ink-4 never carries text that names or labels something. A separate,
   larger transparent .qrisk-node-hit circle carries the interaction — the
   visible glowing node stays small and precise, the tap/click target
   doesn't (matches .qb-node-hit in the Bridge chain). */
.qrisk-stem{stroke:var(--ink-4);stroke-width:1}
.qrisk-track{filter:drop-shadow(0 0 6px rgba(196,154,60,.18))}
.qrisk-pole{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;fill:var(--ink-lbl)}
.qrisk-node-core{fill:var(--gold);stroke:var(--bg-2);stroke-width:2;transition:r .18s ease}
.qrisk-node-hit{fill:transparent;cursor:pointer}
.qrisk-node-name{font-family:var(--serif);font-style:italic;font-size:13px;fill:var(--ink);transition:fill .18s ease}
.qrisk-node-tag{font-family:var(--mono);font-size:7px;letter-spacing:.1em;fill:var(--ink-lbl);text-transform:uppercase}
.qrisk-node-group.is-hot .qrisk-node-core{r:9}
.qrisk-node-group.is-hot .qrisk-node-name{fill:var(--gold)}

/* Exhibit 16a panel — a thin, borderless, bled STRIP rather than the
   boxed grid-paper .qmath-panel card every other exhibit on this page
   uses. Deliberately different chrome: this is the one exhibit built to
   read as a horizontal band the reader's eye runs its full length along
   (reinforcing the "your position isn't fixed on this line yet" point),
   not a card to stop and study. Overrides .qmath-panel's border/
   background/padding rather than editing that shared class, since every
   other exhibit still wants the card treatment.
   Bleed follows the exact scoped-variable pattern .bridge-masthead uses
   (own --qrisk-bleed, clamped to a non-zero floor of 0 so overflow stays
   structurally impossible) — the shared --sig-bleed token stays at its
   site-wide 0 per the owner's standing "no wide exhibits" rule; this is
   a second, independent opt-in, scoped to one exhibit, not a reversal of
   that rule. */
.qrisk-panel{
  position:relative;isolation:isolate;
  border:none;border-radius:0;background:none;padding:22px 0 14px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.qrisk-panel .qmath-label,.qrisk-panel .qmath-caption{padding-left:20px;padding-right:20px}
.qrisk-panel .qmath-caption{max-width:64ch;margin-bottom:4px;font-size:12px}
.qrisk-panel::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:60%;height:220%;top:-60%;left:20%;
  background:radial-gradient(ellipse at center,rgba(196,154,60,.07),rgba(196,154,60,0) 70%);
  filter:blur(8px)
}
@media(max-width:760px){.qrisk-panel::before{display:none}}

/* The "you" marker — the seventh, unresolved position. Drifts only once
   .qrisk-you-live is added post-reveal (never while still at opacity:0),
   and pauses on hover so the tooltip/label hold still while read.
   Amplitude sweeps NEARLY THE FULL TRACK WIDTH (not a small wobble around
   center) — the marker has to visibly pass near every fixed vehicle in
   turn, since a reader's real coefficient could land anywhere on the
   line, not cluster in the middle the way a small amplitude implies. */
@keyframes qriskDrift{0%,100%{transform:translateX(-290px)}50%{transform:translateX(290px)}}
@keyframes qriskPulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
.qrisk-you-drift.qrisk-you-live{animation:qriskDrift 8s ease-in-out infinite}
.qrisk-you-drift.is-paused{animation-play-state:paused}
.qrisk-you-ring{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-dasharray:3 3;transform-box:fill-box;transform-origin:center}
.qrisk-you-live .qrisk-you-ring{animation:qriskPulse 2.2s ease-in-out infinite}
.qrisk-you-mark{font-family:var(--mono);font-size:11px;font-weight:500;fill:var(--gold)}
.qrisk-you-label{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;fill:var(--gold);text-transform:uppercase}
.qrisk-you-hit{fill:transparent;cursor:pointer}
@media(prefers-reduced-motion:reduce){
  .qrisk-you-drift.qrisk-you-live{animation:none}
  .qrisk-you-live .qrisk-you-ring{animation:none}
}

/* ---------- Tool CTA — the mid-content, free-tool strip (Risk DNA). A thin
   horizontal banner (text left, badges+button right), not a tall centered
   card — kept visually distinct from .article-cta (solid gold, boxed,
   end-of-article, the paid Strategic Session) so the funnel reads
   free-tool-first, paid-session-second rather than two competing asks of
   equal visual weight. ---------- */
.tool-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;
  border:1px solid rgba(196,154,60,.3);border-radius:var(--radius);
  padding:18px 26px;margin:8px 0 28px;text-decoration:none;
  background:linear-gradient(135deg,rgba(196,154,60,.07),rgba(196,154,60,.02));
  transition:border-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease}
.tool-cta:hover{border-color:rgba(196,154,60,.55);text-decoration:none}
@media(hover:hover){.tool-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px -16px rgba(196,154,60,.35)}}
.tool-cta-text{flex:1;min-width:0}
.tool-cta-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.tool-cta-title{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink);margin-bottom:4px}
.tool-cta-body{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:0}
.tool-cta-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.tool-cta-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tool-cta-badge{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-lbl);border:1px solid var(--hair);border-radius:11px;padding:3px 9px;white-space:nowrap}
.tool-cta-btn{display:inline-block;background:transparent;border:1.5px solid var(--gold);color:var(--gold);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;
  border-radius:2px;font-weight:500;white-space:nowrap;transition:background .2s ease,color .2s ease}
.tool-cta:hover .tool-cta-btn{background:var(--gold);color:var(--bg)}
@media(max-width:700px){
  .tool-cta{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .tool-cta-action{align-items:stretch}
  .tool-cta-badges{justify-content:flex-start}
  .tool-cta-btn{text-align:center}
}