/* ============================================================
   THE EXPEDITION — clinical-instrument-1962
   Anchors: Paul Rand's IBM · Braun scientific instrumentation
            under Rams · Reid Miles' Blue Note
   Layers:  mid-century-modern  -> ground, palette, display type,
                                   geometric marks, radius 0
            bloomberg-terminal  -> data grammar, tabular numerals,
                                   dense rows, F-key depth strip
            apple-hig           -> macro rhythm, hairline dividers,
                                   eyebrow -> headline -> paragraph
   All colour pairs WCAG-verified. Radius 0. No shadow. No emoji.
   ============================================================ */

/* ── Fonts (self-hosted, same-origin, zero external requests) ── */
@font-face{font-family:"Jost";src:url("../fonts/jost-var-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url("../fonts/plexserif-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url("../fonts/plexserif-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plexmono-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}

/* ── Tokens ──────────────────────────────────────────────── */
:root{
  --ground:#EBE3D2;      /* warm cream paper                        */
  --paper:#F4EFE3;       /* raised bone, for data rows              */
  --ink:#1A1A18;         /* warm near-black          13.65:1        */
  --secondary:#6A6558;   /* muted text                4.55:1 AA     */
  --hairline:#C9C0AC;    /* decorative rules only                   */
  --rule:#878173;        /* meaningful marks          3.04:1 1.4.11 */
  --mustard:#D9A441;     /* FILL / GRAPHIC ONLY — never text on cream */
  --sienna:#A04A2A;      /* out-of-range ONLY         4.69:1        */

  --display:"Jost",ui-sans-serif,system-ui,sans-serif;
  --body:"Plex Serif",Georgia,"Times New Roman",serif;
  --data:"Plex Mono",ui-monospace,Consolas,monospace;

  /* mid-century structured grid: 4/8/16/24/32/48 */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:96px;

  --ease:cubic-bezier(.16,.84,.44,1);   /* single-beat, no bounce */
}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-wrap:pretty;
}
.wrap{width:min(100% - var(--s5),68rem);margin-inline:auto}
::selection{background:var(--mustard);color:var(--ink)}

html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* micro-caps label register — Jost, the one label style on the site */
.eyebrow{
  font-family:var(--display);font-weight:500;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--secondary);
}

/* ── Depth strip (bloomberg function keys) ───────────────── */
.deck{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--ink);
  display:flex;align-items:stretch;
  height:2.6rem;
  transform:translateY(-100%);transition:transform .3s var(--ease);
}
.deck.is-visible{transform:none}
.deck-inner{
  width:min(100% - var(--s5),68rem);margin-inline:auto;
  display:flex;align-items:center;gap:var(--s4);
}
.deck-id{
  font-family:var(--display);font-weight:500;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mustard);          /* 7.75:1 on ink — legal */
  text-decoration:none;flex-shrink:0;
}
.deck-now{
  font-family:var(--data);font-size:.68rem;color:var(--ground);
  opacity:.62;flex:1;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.fkeys{display:flex;gap:0;flex-shrink:0}
.fkey{
  font-family:var(--data);font-size:.68rem;
  padding:.3rem .7rem;color:var(--ground);opacity:.55;
  border:1px solid transparent;
  transition:opacity .18s var(--ease),background .18s var(--ease);
  white-space:nowrap;
}
.fkey:hover{opacity:.9}
.fkey.is-active{opacity:1;background:var(--mustard);color:var(--ink);font-weight:600}
.fkey b{font-weight:400;opacity:.6;margin-right:.35em}
.fkey.is-active b{opacity:.75;font-weight:600}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--s7) 0 var(--s6);position:relative;
}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:start}
.hero-eyebrow{margin-bottom:var(--s4)}
.hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.8rem,7.5vw,5.4rem);line-height:.98;
  letter-spacing:-.02em;margin-bottom:var(--s4);max-width:14ch;
}
.hero-title em{font-style:normal;display:block;color:var(--sienna)}
.hero-lede{
  font-size:1.08rem;line-height:1.62;max-width:38ch;color:var(--ink);
  margin-bottom:var(--s5);
}
.hero-meta{
  font-family:var(--data);font-size:.72rem;color:var(--secondary);
  display:flex;flex-wrap:wrap;gap:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--rule);
  max-width:38ch;
}

/* mid-century geometric mark — the identity element */
.hero-mark{width:clamp(7rem,16vw,12rem);height:auto;flex-shrink:0}

/* ── Small multiples: 68 values on one shared axis ───────── */
.multiples{
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--rule);
}
.multiples-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap;
}
.multiples-note{
  font-size:.9rem;color:var(--secondary);max-width:52ch;line-height:1.55;
}
.mrow{
  display:grid;grid-template-columns:11rem 1fr;gap:var(--s3);
  align-items:center;padding:.28rem 0;text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:background .16s var(--ease);
}
.mrow:hover,.mrow:focus-visible{background:var(--paper)}
.mrow:last-child{border-bottom:0}
.mrow-label{
  font-family:var(--display);font-weight:400;font-size:.76rem;
  letter-spacing:.02em;color:var(--secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrow-label b{font-family:var(--data);font-weight:400;opacity:.55;margin-right:.5em}
.mrow-plot{position:relative;height:1.15rem}

/* shared axis furniture, reused by every gauge on the site.
   .axis-rule spans the FULL −3…+3 extent so an out-of-range mark
   reads as "far along a known scale", not floating in space. */
.axis-rule{position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--rule);opacity:.5;transform:translateY(-.5px)}
.axis-band{position:absolute;top:0;bottom:0;background:rgba(135,129,115,.16);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.axis-zero{position:absolute;top:0;bottom:0;width:1px;background:var(--rule);opacity:.5}

/* status marks — geometry, not colour (mid-century vocabulary) */
.mk{position:absolute;top:50%;transform:translate(-50%,-50%)}
.mk-N{width:1px;height:.62rem;background:var(--ink);opacity:.55}
.mk-W{width:.5rem;height:.5rem;border-radius:50%;background:var(--mustard);
  border:1px solid var(--ink)}
.mk-H{width:.58rem;height:.58rem;border-radius:50%;background:var(--sienna)}
.mk-L{width:.58rem;height:.58rem;border-radius:50%;background:var(--ground);
  border:2px solid var(--sienna)}
.mk-off{font-family:var(--data);font-size:.62rem;color:var(--sienna);
  font-weight:600;letter-spacing:-.05em}

/* ── Triage ──────────────────────────────────────────────── */
.triage{padding:var(--s7) 0;border-top:1px solid var(--rule)}
.sec-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.04;
  letter-spacing:-.018em;margin:var(--s3) 0 var(--s4);
}
.sec-lede{font-size:1.02rem;max-width:56ch;color:var(--ink);line-height:1.62}

.tallies{
  display:flex;flex-wrap:wrap;gap:0;margin:var(--s6) 0 var(--s5);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.tally{flex:1 1 8rem;padding:var(--s4) var(--s4) var(--s4) 0}
.tally + .tally{border-left:1px solid var(--hairline);padding-left:var(--s4)}
.tally-n{font-family:var(--data);font-size:2.1rem;font-weight:600;line-height:1;
  display:block;font-variant-numeric:tabular-nums}
.tally-l{display:block;margin-top:var(--s2);font-family:var(--display);
  font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--secondary)}
.tally.is-flag .tally-n{color:var(--sienna)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.chip{
  display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;
  font-family:var(--data);font-size:.74rem;
  padding:.34rem .6rem;border:1px solid var(--rule);
  transition:background .18s var(--ease);
}
.chip:hover,.chip:focus-visible{background:var(--paper)}
.chip-v{font-weight:600;color:var(--sienna)}

.note{
  padding:var(--s4);border-left:3px solid var(--sienna);background:var(--paper);
  max-width:60ch;font-size:.95rem;line-height:1.6;
}
.note a{color:var(--sienna);text-underline-offset:2px}

/* ── Station ─────────────────────────────────────────────── */
.station{padding:var(--s7) 0;border-top:1px solid var(--rule)}
.station-head{
  display:grid;grid-template-columns:1fr auto;gap:var(--s6);
  align-items:start;margin-bottom:var(--s6);
}
.station-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1;
  letter-spacing:-.022em;margin:var(--s3) 0 var(--s2);
}
.station-sub{
  font-family:var(--display);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--secondary);margin-bottom:var(--s5);
}
.station-intro{max-width:60ch;font-size:1.02rem;line-height:1.68}
.station-intro p{margin-bottom:var(--s3)}
.station-intro p:last-child{margin-bottom:0}
.station-intro strong{font-weight:600}
.station-mark{width:clamp(4.5rem,9vw,7rem);height:auto;flex-shrink:0}

.station-outro{
  margin-top:var(--s6);padding:var(--s4);background:var(--paper);
  border-top:2px solid var(--ink);max-width:64ch;font-size:.97rem;line-height:1.62;
}
.station-outro strong{font-weight:600}

/* ── Tier 2 — routine markers as dense data rows ─────────── */
.rows{border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--hairline)}
.row-btn{
  width:100%;display:grid;
  grid-template-columns:1.6rem minmax(8rem,14rem) 1fr 6.5rem 4.5rem;
  gap:var(--s3);align-items:center;
  padding:.6rem 0;text-align:left;
  transition:background .16s var(--ease);
}
.row-btn:hover,.row-btn:focus-visible{background:var(--paper)}
.row-idx{font-family:var(--data);font-size:.68rem;color:var(--secondary);opacity:.7}
.row-name{min-width:0}
.row-name b{font-family:var(--display);font-weight:500;font-size:.95rem;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-name i{font-size:.8rem;color:var(--secondary);font-style:italic;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-plot{position:relative;height:1.3rem;min-width:6rem}
.row-val{
  font-family:var(--data);font-size:1rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.row-val span{display:block;font-size:.64rem;font-weight:400;color:var(--secondary)}
.row-flag{
  font-family:var(--display);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.1em;text-align:right;color:var(--secondary);
}
.row.is-out .row-val{color:var(--sienna)}
.row.is-out .row-flag{color:var(--sienna);font-weight:500}

.row-body{
  display:none;padding:0 0 var(--s5) calc(1.6rem + var(--s3));
  max-width:66ch;
}
.row.is-open .row-body{display:block}
.row.is-open{background:var(--paper)}
.row.is-open .row-btn{background:var(--paper)}

/* ── Tier 1 — headline markers get the stage ─────────────── */
.feature{
  padding:var(--s6) 0;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
}
.feature-top{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  align-items:start;margin-bottom:var(--s5);
}
.feature-readout{text-align:left}
.feature-val{
  font-family:var(--data);font-weight:600;
  font-size:clamp(3.2rem,8vw,5.6rem);line-height:.86;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:var(--sienna);display:block;
}
.feature-unit{
  font-family:var(--data);font-size:.8rem;color:var(--secondary);
  display:block;margin-top:var(--s2);
}
.feature-ident{padding-top:var(--s1)}
.feature-char{
  font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.06;letter-spacing:-.015em;margin-bottom:var(--s2);
}
.feature-name{font-family:var(--display);font-weight:500;font-size:1rem}
.feature-full{font-size:.85rem;color:var(--secondary);margin-top:2px}
.feature-plot{position:relative;height:2.2rem;margin:var(--s4) 0 var(--s2)}
.feature-scale{
  display:flex;justify-content:space-between;
  font-family:var(--data);font-size:.62rem;color:var(--secondary);
}

/* ── Prose layers ────────────────────────────────────────── */
.layer p{margin-bottom:var(--s3)}
.layer p:last-child{margin-bottom:0}
.layer strong{font-weight:600}
.gist{font-size:1.04rem;line-height:1.6}
.mech,.deep{display:none;margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--hairline);font-size:.97rem;color:var(--ink)}
.layer-head{
  font-family:var(--display);font-weight:500;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--secondary);
  margin-bottom:var(--s2);
}
body[data-depth="mech"] .mech{display:block}
body[data-depth="deep"] .mech,body[data-depth="deep"] .deep{display:block}

/* "Your result" — promoted out of nested-card purgatory */
.yours{
  margin-top:var(--s4);padding-left:var(--s4);
  border-left:3px solid var(--sienna);
  font-size:.97rem;line-height:1.6;
}
.yours .layer-head{color:var(--sienna)}
.feature .yours{background:var(--paper);padding:var(--s4)}

.formula{
  font-family:var(--data);font-size:.84rem;line-height:1.7;
  padding:var(--s3);margin:var(--s3) 0;
  background:var(--ground);border:1px solid var(--rule);
  overflow-x:auto;text-align:center;
}
.feature .formula,.row.is-open .formula{background:var(--ground)}

/* ── v0 placeholder ──────────────────────────────────────── */
.placeholder{
  padding:var(--s6);border:1px dashed var(--rule);text-align:center;
  color:var(--secondary);font-family:var(--data);font-size:.8rem;
  letter-spacing:.04em;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer{padding:var(--s7) 0 var(--s6);border-top:2px solid var(--ink)}
.foot-disclaimer{
  padding:var(--s4);background:var(--paper);max-width:64ch;
  font-size:.9rem;line-height:1.6;color:var(--ink);margin-bottom:var(--s4);
}
.foot-meta{font-family:var(--data);font-size:.7rem;color:var(--secondary)}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:60rem){
  .hero-grid,.station-head{grid-template-columns:1fr}
  .hero-mark,.station-mark{order:-1;margin-bottom:var(--s4)}
  .row-btn{grid-template-columns:1.4rem 1fr 5.5rem 3.6rem}
  .row-plot{display:none}
}
@media (max-width:44rem){
  body{font-size:16px}
  .wrap{width:min(100% - var(--s4),68rem)}
  .row-btn{grid-template-columns:1fr 5rem;gap:var(--s2)}
  .row-idx,.row-flag{display:none}
  .mrow{grid-template-columns:6.5rem 1fr}
  .feature-top{grid-template-columns:1fr;gap:var(--s3)}
  .deck-now{display:none}
  .fkey{padding:.3rem .5rem;font-size:.64rem}
  .fkey b{display:none}
  .row-body{padding-left:0}
}

/* ── Print — the doctor's appointment ────────────────────── */
@media print{
  @page{margin:16mm}
  :root{--ground:#fff;--paper:#fff}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  .deck,.hero-mark,.station-mark,.chips,.placeholder{display:none!important}
  .hero{min-height:0;padding:0 0 var(--s5)}
  .station,.triage,.footer{padding:var(--s5) 0;break-inside:auto}
  .feature,.row{break-inside:avoid}
  .mech,.deep,.row-body{display:block!important}   /* print everything */
  .row.is-open{background:none}
  .station-title,.hero-title{font-size:20pt}
  .feature-val{font-size:28pt;color:#000}
  .row-plot,.feature-plot,.mrow-plot{border:0}
  a{text-decoration:none;color:#000}
  .yours{border-left:2px solid #000}
}