/* ==========================================================================
   FinanceCompass — editorial financial identity
   Rules, not cards. Type, not decoration. Black paper, bone ink.
   ========================================================================== */

:root{
  /* paper */
  --black:#0a0a0a;
  --tone-1:#0d0d0e;
  --tone-2:#121213;
  --tone-3:#171719;

  /* ink */
  --ink:#f2efe9;
  --ink-2:#c3bfb6;
  --ink-3:#8a867e;
  --ink-4:#827e76;   /* 4.9:1 on --black — was #5f5c56 at 2.97:1, below WCAG AA */

  /* rules */
  --rule:rgba(242,239,233,.13);
  --rule-2:rgba(242,239,233,.26);
  --rule-3:rgba(242,239,233,.5);

  /* signal */
  --gold:#d9a441;
  --gold-dim:rgba(217,164,65,.18);
  --up:#5fa87f;
  --down:#c9584c;

  /* type */
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --gut:34px;
  --maxw:1320px;
  --measure:64ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--gold);color:#0a0a0a}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:200;background:var(--gold);color:#0a0a0a;padding:9px 14px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- type primitives ---------- */
.display{
  font:300 clamp(2.9rem,6.6vw,6rem)/0.96 var(--serif);
  letter-spacing:-.028em;text-wrap:balance;
}
.display em{font-style:italic;font-weight:300}
.display-2{font:300 clamp(2.1rem,3.8vw,3.5rem)/1.04 var(--serif);letter-spacing:-.022em}
.h2{font:400 clamp(1.55rem,2.5vw,2.3rem)/1.14 var(--serif);letter-spacing:-.018em}
.h3{font:500 1.06rem/1.35 var(--sans);letter-spacing:-.005em}
.h4{font:500 .95rem/1.4 var(--sans)}

.kicker,.meta,.nav a,.sec-no,.tag,.col-h,.caption,.act,.btn,.choice{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}
.kicker{color:var(--gold);display:block;margin-bottom:14px}
.meta{color:var(--ink-3)}
.standfirst{
  font:300 clamp(1.12rem,1.5vw,1.32rem)/1.5 var(--serif);
  color:var(--ink-2);max-width:52ch;
}
.prose{max-width:var(--measure);color:var(--ink-2);font-size:1.02rem;line-height:1.68}
.prose p + p{margin-top:1.1em}
.prose strong,.prose b{color:var(--ink);font-weight:500}
.lead-in{color:var(--ink);font-weight:500}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.up{color:var(--up)}
.down{color:var(--down)}
.gold{color:var(--gold)}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:100;
  background:var(--black);
  border-bottom:1px solid var(--rule);
}
.mast-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:14px 0 12px;border-bottom:1px solid var(--rule);
}
.wordmark{font:400 1.18rem/1 var(--serif);letter-spacing:-.02em}
.wordmark b{font-weight:400}
.wordmark i{font-style:italic;color:var(--gold)}
.mast-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);text-align:right}
.nav{display:flex;gap:0;flex-wrap:wrap;margin:0 -14px}
.nav a{
  padding:12px 14px;color:var(--ink-3);position:relative;
  transition:color .16s linear;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--gold);
}

/* ---------- structure ---------- */
.band{border-bottom:1px solid var(--rule)}
.band-t1{background:var(--tone-1)}
.band-t2{background:var(--tone-2)}
.pad{padding:72px 0}
.pad-s{padding:44px 0}
.pad-l{padding:110px 0}

.g{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gut)}
/* Span sets only the END, so an offset utility can set the START without
   collapsing the column. `grid-column:span 6` is shorthand for
   start:span 6 / end:auto — a later `grid-column-start:7` replaced that start
   and left end:auto, turning a six-column block into a single track. */
.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}
.c6{grid-column-end:span 6}.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}
.c9{grid-column-end:span 9}.c12{grid-column-end:span 12}
.start2{grid-column-start:2}.start5{grid-column-start:5}.start6{grid-column-start:6}
.start7{grid-column-start:7}.start8{grid-column-start:8}.start9{grid-column-start:9}

.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule-2{border:0;border-top:1px solid var(--rule-2);margin:0}
.rule-heavy{border:0;border-top:2px solid var(--ink);margin:0}

/* section head: number, rule, title */
.sec{margin-bottom:34px}
.sec-head{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  border-top:2px solid var(--ink);padding-top:14px;
}
.sec-no{color:var(--gold)}
.sec-title{font:400 clamp(1.5rem,2.4vw,2.15rem)/1.15 var(--serif);letter-spacing:-.018em}
.sec-sub{margin-top:10px;color:var(--ink-3);font-size:.95rem;max-width:60ch}

/* ---------- links / actions ---------- */
.link{color:var(--ink);border-bottom:1px solid var(--rule-2);transition:border-color .16s linear,color .16s linear}
.link:hover{color:var(--gold);border-bottom-color:var(--gold)}
.act{
  display:inline-flex;align-items:center;gap:10px;color:var(--gold);
  padding-bottom:5px;border-bottom:1px solid var(--gold-dim);
  transition:border-color .16s linear,gap .16s linear;
}
.act:hover{border-bottom-color:var(--gold);gap:16px}
.act::after{content:"→";font-family:var(--sans);letter-spacing:0}
.act-ink{color:var(--ink);border-bottom-color:var(--rule-2)}
.act-ink:hover{border-bottom-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:30px;margin-top:30px}

.btn{
  display:inline-block;padding:13px 20px;cursor:pointer;
  background:none;border:1px solid var(--rule-2);color:var(--ink);
  transition:border-color .16s linear,background .16s linear,color .16s linear;
}
.btn:hover{border-color:var(--ink);background:rgba(242,239,233,.04)}
.btn-solid{background:var(--ink);color:var(--black);border-color:var(--ink)}
.btn-solid:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}

/* ---------- dense rows (replaces cards) ---------- */
.rows{border-top:1px solid var(--rule-2)}
.row{
  display:grid;gap:6px var(--gut);align-items:start;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.row-2{grid-template-columns:200px 1fr}
.row-3{grid-template-columns:180px 1fr 200px}
.row-4{grid-template-columns:56px 1.4fr 1fr 200px}
.row:hover{background:rgba(242,239,233,.02)}
.row-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.row-t{font:500 1.02rem/1.35 var(--sans)}
.row-d{color:var(--ink-2);font-size:.94rem;line-height:1.55}
.row-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--ink)}
.row-i{font-family:var(--mono);font-size:.78rem;color:var(--ink-4);padding-top:5px}

/* expandable detail */
.expand{border-bottom:1px solid var(--rule)}
.expand-h{
  width:100%;display:grid;gap:6px var(--gut);align-items:baseline;text-align:left;
  grid-template-columns:52px 1.35fr 1fr 148px 24px;
  padding:20px 0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;
  transition:background .14s linear;
}
.expand-h:hover{background:rgba(242,239,233,.03)}
.expand-h .row-t{font-size:1.05rem}
.expand-mk{justify-self:end;color:var(--ink-3);font-family:var(--mono);font-size:1rem;line-height:1;transition:transform .18s ease,color .16s}
.expand.open .expand-mk{transform:rotate(45deg);color:var(--gold)}
.expand.open{background:var(--tone-1)}
.expand-b{display:none;padding:0 0 30px}
.expand.open .expand-b{display:block}
.expand-g{display:grid;grid-template-columns:52px 1fr 1fr;gap:0 var(--gut)}
.dl{display:grid;grid-template-columns:104px 1fr;gap:9px 18px;font-size:.92rem}
.dl dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.dl dd{margin:0;color:var(--ink-2)}
.bullets li{position:relative;padding-left:18px;margin:7px 0;color:var(--ink-2);font-size:.94rem;line-height:1.55}
.bullets li::before{content:"—";position:absolute;left:0;color:var(--ink-4)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:720px}
.tbl th,.tbl td{padding:13px 16px 13px 0;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl thead th{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--rule-2);padding-bottom:11px;
}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl tbody tr:hover{background:rgba(242,239,233,.025)}
.tbl .n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- big typographic statistics ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--rule-2)}
.fig{padding:26px var(--gut) 26px 0;border-bottom:1px solid var(--rule)}
.fig + .fig{border-left:1px solid var(--rule);padding-left:var(--gut)}
.fig-n{font:300 clamp(2rem,3.4vw,3rem)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fig-l{margin-top:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.fig-d{margin-top:7px;color:var(--ink-3);font-size:.86rem;line-height:1.45}

/* ---------- pathfinder ---------- */
.pf-step{border-top:1px solid var(--rule);padding:26px 0}
.pf-step:first-child{border-top:0}
.pf-q{display:grid;grid-template-columns:52px 1fr;gap:var(--gut);align-items:baseline;margin-bottom:18px}
.pf-qn{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--gold)}
.pf-qt{font:400 1.25rem/1.3 var(--serif)}
.pf-opts{display:flex;flex-wrap:wrap;gap:10px;padding-left:calc(52px + var(--gut))}
.choice{
  padding:11px 16px;cursor:pointer;color:var(--ink-2);
  background:none;border:1px solid var(--rule-2);
  transition:border-color .14s linear,color .14s linear,background .14s linear;
}
.choice:hover{border-color:var(--ink-3);color:var(--ink)}
.choice[aria-pressed="true"],.choice.on{background:var(--ink);border-color:var(--ink);color:var(--black)}
.pf-hint{padding-left:calc(52px + var(--gut));margin-top:12px;font-size:.84rem;color:var(--ink-4)}
.pf-out[hidden]{display:none}
.pf-match{display:grid;grid-template-columns:36px 1fr 140px;gap:var(--gut);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.pf-rank{font-family:var(--mono);font-size:.72rem;color:var(--ink-4)}
.pf-bar{height:2px;background:var(--rule);margin-top:9px;overflow:hidden}
.pf-bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.pf-sub{margin-top:6px;font-size:.85rem;color:var(--ink-3)}

/* ---------- timeline / path ---------- */
.tl{border-top:1px solid var(--rule-2)}
.tl-i{display:grid;grid-template-columns:150px 1fr;gap:var(--gut);padding:24px 0;border-bottom:1px solid var(--rule);position:relative}
.tl-w{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tl-t{font:400 1.22rem/1.3 var(--serif);margin-bottom:7px}

/* ---------- figure / diagram / video ---------- */
figure{margin:0}
.figure{border-top:1px solid var(--rule-2);padding-top:16px}
.caption{
  margin-top:14px;color:var(--ink-4);letter-spacing:.13em;
  display:flex;gap:14px;align-items:baseline;
}
.caption b{color:var(--gold);font-weight:500}
.diagram svg{width:100%;height:auto}
.d-box{fill:none;stroke:var(--rule-3);stroke-width:1}
.d-box-k{fill:none;stroke:var(--gold);stroke-width:1.2}
.d-t{fill:#f2efe9;font:500 12.5px var(--sans)}
.d-s{fill:#8a867e;font:400 10.5px var(--sans)}
.d-m{fill:#d9a441;font:500 8.5px var(--mono);letter-spacing:1.6px}
.d-a{stroke:var(--rule-3);stroke-width:1;fill:none;marker-end:url(#a)}
.d-a-k{stroke:var(--gold);stroke-width:1.2;fill:none;marker-end:url(#ak)}
.d-dash{stroke-dasharray:3 4}
.d-grid{stroke:rgba(242,239,233,.09);stroke-width:1}
.d-line{stroke:var(--gold);stroke-width:1.6;fill:none}
.d-line-2{stroke:var(--ink-3);stroke-width:1.2;fill:none}

.spread{position:relative;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.spread video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity 1.2s linear}
.spread video.on{opacity:.34}
.spread-dark video.on{opacity:.24}
.spread-night video{filter:brightness(.45) saturate(.6) hue-rotate(-10deg)}
.spread-night video.on{opacity:.5}
.spread-veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 0%,rgba(10,10,10,.82) 45%,rgba(10,10,10,.5) 100%)}
.spread-in{position:relative;z-index:2;padding:96px 0}
.spread-tall .spread-in{padding:150px 0 120px}

/* ==========================================================================
   CINEMATIC SYSTEM
   Footage is an interruption between information, never wallpaper behind it.
   Every clip is mounted from the manifest in script.js via [data-footage] —
   no source URL appears in any page.
   ========================================================================== */

/* shared grade: neutral, dark, slightly desaturated so clips sit together */
.cine-media{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);
  filter:saturate(.72) contrast(1.06) brightness(.86);
  opacity:0;transition:opacity 1.4s var(--ease);
  background:var(--black);
}
.cine-media.on{opacity:1}
/* film grain, kept to the footage only — never over type */
.cine-grain-l{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}

/* ---------- hero: editorial split, type never sits on the footage ---------- */
.hero{border-bottom:1px solid var(--rule)}
.hero-g{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:0 56px;align-items:stretch;min-height:clamp(520px,78vh,860px);
}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:88px 0 72px}
.hero-media{
  position:relative;overflow:hidden;isolation:isolate;
  border-left:1px solid var(--rule);
  margin-right:calc((100vw - min(100vw, var(--maxw))) / -2 - 28px);
}
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.28) 26%,rgba(10,10,10,0) 60%),
             linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 40%);
}
/* if the hero slot is unfilled, the type takes the full measure */
body.no-hero-media .hero-g{grid-template-columns:1fr;min-height:0}
body.no-hero-media .hero-copy{padding:96px 0 80px}
.hero-cap{
  position:absolute;left:24px;bottom:20px;z-index:3;max-width:30ch;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- page header: one establishing shot, heavily tinted ----------
   The tint has to do two jobs: keep the type unambiguously legible, and leave
   enough of the footage visible that it still reads as a real place. Roughly
   82% black behind the words, thinning to 30% on the open side.            */
.pagehead{
  position:relative;overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--rule);
  display:grid;align-items:end;
  min-height:clamp(340px,46vh,520px);
}
.pagehead-tall{min-height:clamp(460px,72vh,760px)}
/* A deeper band for a clip whose subject spans more of the frame than a
   standard header can show — here the villa plus its driveway. */
.pagehead-deep{min-height:clamp(420px,60vh,560px)}
.pagehead .cine-media{position:absolute;inset:0;filter:saturate(.8) contrast(1.04) brightness(.92)}
/* ONE gradient, not two. Stacked gradients multiply — 0.94 over 0.92 leaves
   under 1% of the image visible, which reads as a black box, not a place. */
.pagehead::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(10,10,10,.93) 0%, rgba(10,10,10,.86) 30%,
    rgba(10,10,10,.55) 62%, rgba(10,10,10,.18) 100%);
}
/* a short scrim at the very bottom only, to seat the band against the page */
.pagehead::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:3;pointer-events:none;
  background:linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,0) 100%);
}
.pagehead-in{position:relative;z-index:4;width:100%;padding:96px 0 44px}
.pagehead .kicker{margin-bottom:16px}
.pagehead .standfirst{color:#d6d2c9}
.pagehead-credit{
  position:absolute;right:28px;bottom:14px;z-index:4;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,239,233,.4);
}
@media (max-width:760px){
  .pagehead{min-height:clamp(280px,40vh,380px)}
  .pagehead-tall{min-height:clamp(380px,58vh,520px)}
  .pagehead-in{padding:72px 0 32px}
  /* text spans the full width on a phone, so darken from the bottom instead */
  .pagehead::after{background:linear-gradient(0deg,
    rgba(10,10,10,.94) 0%, rgba(10,10,10,.8) 42%, rgba(10,10,10,.3) 100%)}
  .pagehead::before{display:none}
  .pagehead-credit{right:20px}
}

/* ---------- reel: full-width interruption between sections ---------- */
.reel{
  position:relative;overflow:hidden;isolation:isolate;
  height:clamp(260px,42vh,460px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--black);
}
.reel-tall{height:clamp(340px,58vh,620px)}
.reel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.15) 34%,rgba(10,10,10,.82) 100%);
}
.reel-note{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:0 28px 22px;
}
.reel-note-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:baseline}
.reel-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.reel-t{font:300 clamp(1.05rem,1.7vw,1.5rem)/1.35 var(--serif);color:var(--ink);max-width:46ch}
.reel-fallback{display:grid;place-items:center;height:100%;color:var(--ink-4);font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}

@media (max-width:900px){
  .hero-g{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-copy{padding:56px 0 36px;order:2}
  .hero-media{order:1;height:44vh;border-left:0;border-bottom:1px solid var(--rule);margin-right:calc(-28px)}
  .hero-media::after{background:linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,0) 55%)}
}
@media (max-width:760px){
  .hero-media{margin-right:-20px;margin-left:-20px;height:38vh}
  .reel{height:clamp(200px,32vh,300px)}
  .reel-note{padding:0 20px 18px}
  .reel-note-in{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .cine-media{opacity:1;transition:none}
}

/* ---------- tools ---------- */
.tool{border-top:2px solid var(--ink);padding-top:22px}
.controls{display:grid;gap:22px var(--gut);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:26px}
.ctrl label{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ctrl .v{color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.range{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--rule-2);cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--gold);border:0;cursor:pointer;transition:transform .12s linear}
.range::-webkit-slider-thumb:hover{transform:scale(1.35)}
.range::-moz-range-thumb{width:13px;height:13px;background:var(--gold);border:0;border-radius:0;cursor:pointer}
.sel{
  width:100%;padding:11px 12px;background:var(--tone-2);color:var(--ink);
  border:1px solid var(--rule-2);font:400 .92rem var(--sans);cursor:pointer;
}
.sel:hover{border-color:var(--ink-3)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--rule-2);margin-bottom:26px}
.ro{padding:18px var(--gut) 18px 0;border-bottom:1px solid var(--rule)}
.ro + .ro{border-left:1px solid var(--rule);padding-left:var(--gut)}
.ro-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.ro-v{margin-top:9px;font:300 1.75rem/1 var(--serif);font-variant-numeric:tabular-nums}
.ro-s{margin-top:6px;font-size:.8rem;color:var(--ink-4)}
canvas{display:block;width:100%;border:1px solid var(--rule)}
.chart-wrap{position:relative}
.tip{
  position:absolute;pointer-events:none;z-index:5;transform:translate(-50%,-128%);
  padding:9px 12px;background:#050505;border:1px solid var(--gold);
  font-size:.8rem;line-height:1.5;white-space:nowrap;
}
.key{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.key li{display:flex;align-items:center;gap:9px}
.key i{width:16px;height:0;border-top:2px solid var(--gold);display:block}
.key i.k2{border-top:1px solid var(--ink-3)}
.key i.k3{border-top:1px dashed var(--ink-3)}

/* ---------- misc ---------- */
.tag{display:inline-block;padding:4px 8px;border:1px solid var(--rule-2);color:var(--ink-3);font-size:.6rem;margin:0 4px 4px 0}
.tag-k{color:var(--gold);border-color:var(--gold-dim)}
.tags{margin-top:9px}
.note{
  border-left:2px solid var(--gold);padding:4px 0 4px 18px;margin-top:26px;
  color:var(--ink-3);font-size:.86rem;line-height:1.6;max-width:66ch;
}
.pull{
  font:300 clamp(1.4rem,2.2vw,2rem)/1.3 var(--serif);letter-spacing:-.015em;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  padding:26px 0;color:var(--ink);
}
.colophon{padding:40px 0;color:var(--ink-4);font-size:.8rem;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
.index-list{border-top:1px solid var(--rule-2)}
.index-list a{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule);transition:background .14s linear,padding .16s}
.index-list a:hover{background:rgba(242,239,233,.03)}
.index-list a:hover .il-t{color:var(--gold)}
.il-n{font-family:var(--mono);font-size:.66rem;color:var(--ink-4);letter-spacing:.12em}
.il-t{display:block;font:400 1.15rem/1.25 var(--serif);transition:color .14s linear}
.il-d{display:block;color:var(--ink-3);font-size:.85rem;margin-top:4px}
.il-a{font-family:var(--mono);font-size:.7rem;color:var(--ink-4)}

/* ---------- marginalia ---------- */
.aside{border-top:1px solid var(--rule-2);padding-top:15px;margin:32px 0 0}
.aside + .aside{margin-top:26px}
.aside-l{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.aside p{color:var(--ink-2);font-size:.89rem;line-height:1.62}
.aside p + p{margin-top:.9em}
.aside .num{color:var(--ink)}

/* ---------- editor's note ---------- */
.leader{border-top:2px solid var(--ink);padding-top:22px}
.leader .prose{font-size:1.06rem}
.leader-sign{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
  display:flex;flex-wrap:wrap;gap:8px 26px;
}

/* ---------- dated timeline ---------- */
.tl-num{
  font:300 1.75rem/1 var(--serif);color:var(--gold);
  font-variant-numeric:tabular-nums;display:block;
}
.tl-tag{display:block;margin-top:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- filter bar (rules, not a box) ---------- */
.filter{border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);padding:16px 0;margin:30px 0 0}
.filter-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.filter-l{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-right:18px;padding:7px 0}
.f-btn{
  font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 11px;background:none;border:0;color:var(--ink-3);cursor:pointer;
  border-bottom:1px solid transparent;transition:color .14s linear,border-color .14s linear;
}
.f-btn:hover{color:var(--ink)}
.f-btn[aria-pressed="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.f-sep{color:var(--ink-4);font-size:.7rem;user-select:none}
.f-count{margin-left:auto;padding:7px 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.expand.is-dim{opacity:.22}
.expand.is-dim summary{cursor:default}

/* ---------- pay range bar (shared scale across all roles) ---------- */
.paywrap{display:block}
.paybar{display:block;position:relative;height:2px;background:var(--rule);margin-top:9px;max-width:148px}
.paybar i{position:absolute;top:0;bottom:0;background:var(--gold)}
.paybar.open i::after{
  content:"";position:absolute;right:-7px;top:-2px;
  border-left:5px solid var(--gold);border-top:3px solid transparent;border-bottom:3px solid transparent;
}
.payscale{
  display:flex;justify-content:space-between;max-width:148px;margin-top:7px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-4);
}

/* ---------- pager ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule-2)}
.pager-a{display:block;padding:26px 0;transition:background .14s linear}
.pager-a:hover{background:rgba(242,239,233,.03)}
.pager-a:hover .pager-t{color:var(--gold)}
.pager-next{text-align:right;border-left:1px solid var(--rule);padding-left:var(--gut)}
.pager-l{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.pager-t{display:block;margin-top:9px;font:400 1.35rem/1.2 var(--serif);transition:color .14s linear}
.pager-a:only-child{grid-column:2;text-align:right;border-left:1px solid var(--rule);padding-left:var(--gut)}

/* ---------- native disclosure (no JS, keyboard accessible) ---------- */
details.expand summary{list-style:none;cursor:pointer}
details.expand summary::-webkit-details-marker{display:none}
details.expand[open]{background:var(--tone-1)}
details.expand[open] .expand-mk{transform:rotate(45deg);color:var(--gold)}
details.expand[open] summary .row-t{color:var(--gold)}

/* ---------- proportion bar (take-home split) ---------- */
.pbar{display:flex;height:8px;margin:6px 0 14px;background:var(--tone-3)}
.pbar i{display:block;height:100%;transition:width .28s cubic-bezier(.2,.7,.3,1)}
.pkey{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pkey li{display:flex;align-items:center;gap:8px}
.pkey b{width:10px;height:10px;display:block}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  /* Reset the offsets first, then set start AND end explicitly.
     Previously `.start7{grid-column-start:auto}` came after `.c6{span 12}`
     and cancelled the span, collapsing that column to a single grid track. */
  .start2,.start5,.start6,.start7,.start8,.start9{grid-column-start:auto}
  .c4,.c5,.c6,.c7,.c8,.c9{grid-column:1 / -1}
  .c3{grid-column:span 6}
  .fig + .fig{border-left:0;padding-left:0}
  .ro + .ro{border-left:0;padding-left:0}
}
@media (max-width:760px){
  :root{--gut:20px}
  /* the masthead was taking 18% of a phone screen, permanently, because it is
     sticky. One line, a scrollable nav, and the strapline drops away on scroll. */
  .mast-top{flex-direction:row;align-items:center;padding:11px 0 9px}
  .mast-meta{display:none}
  .masthead.is-scrolled .mast-top{display:none}
  .nav{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -16px;padding:0 16px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:11px 12px;flex:0 0 auto}
  .pager{grid-template-columns:1fr}
  .pager-next,.pager-a:only-child{grid-column:1;text-align:left;border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .filter-count,.f-count{margin-left:0;width:100%}
  .row-2,.row-3,.row-4,.tl-i,.pf-q,.expand-g,.dl{grid-template-columns:1fr}
  .expand-h{grid-template-columns:1fr 24px;gap:8px}
  .expand-h .row-i,.expand-h .row-d{grid-column:1}
  .pf-opts,.pf-hint{padding-left:0}
  .pf-match{grid-template-columns:1fr}
  .pad,.pad-l{padding:52px 0}
  .spread-in{padding:64px 0}
  .spread-tall .spread-in{padding:88px 0 64px}
  .figs{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   ECONOMICS PAGE
   Built from the existing tokens and components. No new visual language:
   same rules, same type scale, same gold. Only new *structures*.
   ========================================================================== */

/* ---------- university preview badge ---------- */
.badge{
  display:inline-block;padding:4px 9px;margin-left:10px;vertical-align:middle;
  font:500 .56rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-dim);
}

/* ---------- THINK / UNDERSTAND / APPLY / CHALLENGE ---------- */
.stage{border-top:1px solid var(--rule);padding:22px 0 4px;display:grid;grid-template-columns:112px 1fr;gap:0 var(--gut)}
.stage:first-of-type{border-top:0}
.stage-l{font:500 .62rem/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:4px}
.stage-l.q{color:var(--ink-3)}
.stage-b{max-width:70ch}
.stage-b p{color:var(--ink-2);font-size:.98rem;line-height:1.66}
.stage-b p + p{margin-top:.9em}
.stage-b .lead-in{color:var(--ink);font-weight:500}

/* ---------- interactive lab shell ---------- */
.lab{border-top:2px solid var(--ink);padding-top:20px;margin:26px 0 0}
.lab-q{font:400 1.18rem/1.4 var(--serif);color:var(--ink);max-width:56ch;margin-bottom:18px}
.lab-opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.lab-out{margin-top:22px;border-top:1px solid var(--rule);padding-top:18px}
.lab-out[hidden]{display:none}
.lab-verdict{font:400 1.1rem/1.45 var(--serif);color:var(--gold);margin-bottom:10px}
.lab-note{color:var(--ink-2);font-size:.94rem;line-height:1.6;max-width:66ch}
.lab-note + .lab-note{margin-top:.8em}

/* ---------- payoff matrix ---------- */
.mx-wrap{overflow-x:auto;margin:6px 0 4px}
.mx{border-collapse:collapse;min-width:460px;font-family:var(--sans)}
.mx caption{caption-side:top;text-align:left;padding-bottom:12px;font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.mx th{font:500 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px;text-align:left;font-weight:500}
.mx th[scope=row]{text-align:right;white-space:nowrap}
.mx td{
  border:1px solid var(--rule);padding:16px 18px;min-width:132px;
  background:var(--tone-1);transition:background .18s linear,border-color .18s linear;
}
.mx-pay{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1rem;color:var(--ink)}
.mx-pay span{color:var(--ink-3)}
.mx-tag{display:block;margin-top:6px;font:500 .56rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.mx td.on{background:rgba(217,164,65,.13);border-color:var(--gold)}
.mx td.on .mx-tag{color:var(--gold)}
.mx td.nash{outline:2px solid var(--gold);outline-offset:-2px}
.mx td.dim{opacity:.4}

/* ---------- simulation sliders reuse .tool/.ctrl; extra readout ---------- */
.sim-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--rule-2);margin:18px 0}
.sim{padding:16px var(--gut) 16px 0;border-bottom:1px solid var(--rule)}
.sim + .sim{border-left:1px solid var(--rule);padding-left:var(--gut)}
.sim-l{font:500 .6rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.sim-v{display:block;margin-top:8px;font:300 1.6rem/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink)}
.sim-s{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-4)}
/* These are <span> elements, so they must be made block-level explicitly —
   height and overflow are ignored on an inline box, which let the gold fill
   escape the track and paint over the paragraph beneath it. */
.bar-track{display:block;height:3px;width:100%;background:var(--tone-3);margin-top:10px;overflow:hidden}
.bar-track i{display:block;height:3px;background:var(--gold);width:0;transition:width .35s cubic-bezier(.2,.7,.3,1)}

/* ---------- result card (quiz outcome) ---------- */
.result{border-top:2px solid var(--gold);padding-top:20px;margin-top:26px}
.result[hidden]{display:none}
.result-k{font:500 .6rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.result-t{font:400 clamp(1.7rem,3vw,2.5rem)/1.1 var(--serif);margin:12px 0 14px}
.result-d{color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:62ch}
.result-links{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px}

/* ---------- glossary ---------- */
.gl-bar{border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);padding:18px 0;margin:26px 0 0}
.gl-search{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule-2);
  color:var(--ink);font:300 clamp(1.3rem,2.4vw,1.9rem)/1.3 var(--serif);
  padding:6px 0 12px;outline:none;
}
.gl-search::placeholder{color:var(--ink-4)}
.gl-search:focus{border-bottom-color:var(--gold)}
.gl-filters{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;margin-top:16px}
.gl-count{margin-left:auto;font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:7px 0}
.gl-list{border-top:1px solid var(--rule-2);margin-top:4px}
.gl-item{border-bottom:1px solid var(--rule)}
.gl-item[open]{background:var(--tone-1)}
.gl-sum{
  display:grid;grid-template-columns:1fr auto 24px;gap:0 18px;align-items:baseline;
  padding:16px 0;cursor:pointer;list-style:none;
}
.gl-sum::-webkit-details-marker{display:none}
.gl-sum:hover{background:rgba(242,239,233,.03)}
.gl-t{font:400 1.18rem/1.3 var(--serif);color:var(--ink)}
.gl-item[open] .gl-t{color:var(--gold)}
.gl-c{font:500 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.gl-mk{justify-self:end;font:400 1rem/1 var(--mono);color:var(--ink-3);transition:transform .18s ease}
.gl-item[open] .gl-mk{transform:rotate(45deg);color:var(--gold)}
.gl-body{padding:0 0 24px;display:grid;grid-template-columns:112px 1fr;gap:10px var(--gut)}
.gl-k{font:500 .58rem/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.gl-v{color:var(--ink-2);font-size:.95rem;line-height:1.62;max-width:68ch}
.gl-rel{display:flex;flex-wrap:wrap;gap:8px}
.gl-link{
  font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:none;border:1px solid var(--gold-dim);padding:6px 10px;cursor:pointer;
  transition:border-color .16s linear,background .16s linear;
}
.gl-link:hover{border-color:var(--gold);background:rgba(217,164,65,.1)}
.gl-empty{padding:40px 0;color:var(--ink-3);font-size:.95rem}
mark{background:rgba(217,164,65,.28);color:var(--ink);padding:0 2px}
/* inline cross-reference from a lesson into the glossary */
.gref{
  color:var(--ink);border-bottom:1px dotted var(--gold);cursor:pointer;
  background:none;border-top:0;border-left:0;border-right:0;padding:0;font:inherit;
}
.gref:hover{color:var(--gold)}

/* ---------- concept map ---------- */
.cmap{display:grid;gap:0;border-top:1px solid var(--rule-2);margin-top:8px}
.cmap-i{display:grid;grid-template-columns:52px 1fr;gap:var(--gut);padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.cmap-n{font:500 .62rem/1 var(--mono);color:var(--gold);letter-spacing:.14em}
.cmap-t{font:400 1.2rem/1.3 var(--serif);color:var(--ink)}
.cmap-d{color:var(--ink-3);font-size:.88rem;margin-top:4px}

@media (max-width:760px){
  .stage{grid-template-columns:1fr;gap:8px}
  .stage-l{padding-top:0}
  .gl-body{grid-template-columns:1fr;gap:4px}
  .gl-k{padding-top:10px}
  .gl-sum{grid-template-columns:1fr 24px}
  .gl-c{grid-column:1;margin-top:4px}
  .cmap-i{grid-template-columns:1fr;gap:4px}
  .sim + .sim{border-left:0;padding-left:0}
  .gl-count{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .bar-track i,.mx td,.gl-mk{transition:none}
}


/* ==========================================================================
   ECONOMICS — UX PASS
   Chapters, routes, staged game, progressive disclosure, paged glossary.
   Same tokens and rules as the rest of the site.
   ========================================================================== */

/* ---------- chapter rail: where am I, how much is left ---------- */
.rail{
  position:sticky;top:0;z-index:90;background:rgba(10,10,10,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.rail-in{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rail-in::-webkit-scrollbar{display:none}
.rail a{
  flex:0 0 auto;padding:13px 16px 11px;position:relative;
  font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);transition:color .16s linear;white-space:nowrap;
}
.rail a b{color:var(--ink-4);font-weight:500;margin-right:8px;transition:color .16s linear}
.rail a:hover{color:var(--ink)}
.rail a.on{color:var(--ink)}
.rail a.on b{color:var(--gold)}
.rail a.on::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--gold)}
.rail-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--gold-dim);width:0;transition:width .2s linear}

/* ---------- chapter opener: a real break, not just whitespace ---------- */
.chapter{border-top:1px solid var(--rule);padding:66px 0 0}
.chapter-h{display:grid;grid-template-columns:auto 1fr;gap:0 var(--gut);align-items:start}
.chapter-n{
  font:300 clamp(3.4rem,7vw,6rem)/.82 var(--serif);color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.chapter-t{font:400 clamp(1.7rem,3.4vw,2.8rem)/1.08 var(--serif);letter-spacing:-.02em;max-width:20ch}
.chapter-s{margin-top:14px;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:58ch}
.chapter-m{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:0 22px;
  font:500 .6rem/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
}
.chapter-m b{color:var(--gold);font-weight:500}

/* ---------- where should you start: routes, not boxes ---------- */
.routes{border-top:1px solid var(--rule-2);margin-top:8px}
.route{
  display:grid;grid-template-columns:1fr auto;gap:0 var(--gut);align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule);
  transition:background .16s linear,padding-left .18s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.route:hover{background:rgba(242,239,233,.03);padding-left:12px}
.route:hover .route-t{color:var(--gold)}
.route-q{font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:9px}
.route-t{font:400 1.28rem/1.25 var(--serif);color:var(--ink);transition:color .16s linear}
.route-d{margin-top:5px;color:var(--ink-3);font-size:.88rem}
.route-a{font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* ---------- staged mini-game ---------- */
.game{border-top:2px solid var(--ink);padding-top:24px}
.game-step[hidden]{display:none}
.game-scene{font:300 clamp(1.3rem,2.3vw,1.85rem)/1.35 var(--serif);color:var(--ink);max-width:34ch;margin-bottom:8px}
.game-sub{color:var(--ink-3);font-size:.94rem;max-width:56ch;margin-bottom:22px}
.game-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;max-width:640px}
.pick{
  text-align:left;padding:20px 22px;cursor:pointer;background:none;
  border:1px solid var(--rule-2);color:var(--ink);
  transition:border-color .16s linear,background .16s linear,transform .16s linear;
}
.pick:hover{border-color:var(--gold);background:rgba(217,164,65,.06);transform:translateY(-2px)}
.pick-t{display:block;font:400 1.12rem/1.2 var(--serif)}
.pick-d{display:block;margin-top:7px;font-size:.84rem;color:var(--ink-3)}
.thinking{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:26px 0}
.thinking i{display:inline-block;width:5px;height:5px;background:var(--gold);margin-left:6px;animation:blip 1s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s}
.thinking i:nth-child(3){animation-delay:.3s}
@keyframes blip{0%,100%{opacity:.2}50%{opacity:1}}

.reveal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--rule-2);margin:4px 0 20px}
.rv{padding:18px var(--gut) 18px 0;border-bottom:1px solid var(--rule)}
.rv + .rv{border-left:1px solid var(--rule);padding-left:var(--gut)}
.rv-l{font:500 .6rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.rv-v{display:block;margin-top:9px;font:400 1.22rem/1.15 var(--serif);color:var(--ink)}
.rv-v.num{font-family:var(--mono);font-size:1.5rem;font-weight:400}
.verdict{
  border-left:2px solid var(--gold);padding:2px 0 2px 20px;margin:8px 0 20px;
  font:300 clamp(1.15rem,2vw,1.5rem)/1.35 var(--serif);color:var(--ink);max-width:44ch;
}

/* ---------- progressive disclosure ---------- */
details.more{border-top:1px solid var(--rule);margin-top:18px}
details.more > summary{
  list-style:none;cursor:pointer;padding:14px 0;display:flex;align-items:center;gap:12px;
  font:500 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  transition:color .16s linear;
}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:"+";font-family:var(--mono);color:var(--ink-3);transition:transform .18s ease}
details.more[open] > summary::after{content:"+";transform:rotate(45deg);color:var(--gold)}
details.more > summary:hover{color:var(--ink)}
details.more .stage-b,details.more .prose{padding-bottom:18px}

/* ---------- where you see this ---------- */
.wsyt{border-top:1px solid var(--rule);margin-top:20px;padding-top:16px}
.wsyt-l{font:500 .6rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:12px}
.wsyt-row{display:flex;flex-wrap:wrap;gap:8px}
.wsyt-row span{
  font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);padding:8px 11px;
  transition:border-color .16s linear,color .16s linear;
}
.wsyt-row span:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- glossary: paged, with a one-line definition up front ---------- */
.gl-sum{grid-template-columns:1fr auto 24px}
.gl-def{display:block;margin-top:6px;color:var(--ink-3);font-size:.88rem;line-height:1.5;max-width:72ch}
.gl-item[open] .gl-def{display:none}
.gl-more{display:flex;justify-content:center;padding:26px 0 0}
.gl-more button{
  padding:13px 26px;background:none;border:1px solid var(--rule-2);color:var(--ink);cursor:pointer;
  font:500 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .16s linear,background .16s linear;
}
.gl-more button:hover{border-color:var(--gold);color:var(--gold)}

@media (max-width:760px){
  .chapter{padding-top:44px}
  .chapter-h{grid-template-columns:1fr;gap:4px}
  .chapter-n{font-size:2.6rem;line-height:1}
  .route{grid-template-columns:1fr;gap:10px}
  .route-a{justify-self:start}
  .rv + .rv{border-left:0;padding-left:0}
  .game-choices{grid-template-columns:1fr}
  .rail a{padding:11px 12px 9px}
}
@media (prefers-reduced-motion:reduce){
  .pick:hover{transform:none}
  .route:hover{padding-left:0}
  .thinking i{animation:none;opacity:.7}
}

/* ==========================================================================
   CAREERS PAGE
   Rules and type, not cards. Every panel is bounded by a hairline rather than
   a rounded box, and the only fill is the tone ladder already in the tokens.
   ========================================================================== */

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.disclaimer{padding:0 0 40px;color:var(--ink-4);font-size:.74rem;line-height:1.6;max-width:78ch;border-top:1px solid var(--rule);padding-top:20px}

/* ---------- hero actions ---------- */
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---------- what is on this page ---------- */
.whats-here{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--rule-2)}
.whats-here a{
  display:block;padding:20px 20px 22px 0;border-bottom:1px solid var(--rule);
  transition:background .14s linear;
}
.whats-here a + a{border-left:1px solid var(--rule);padding-left:20px}
.whats-here a:hover{background:rgba(242,239,233,.03)}
.whats-here a:hover .wh-t{color:var(--gold)}
.wh-n{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;color:var(--ink-4)}
.wh-t{display:block;margin-top:9px;font:500 .95rem/1.3 var(--sans);transition:color .16s linear}
.wh-d{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-3);line-height:1.45}

/* ---------- 01 explorer ---------- */
.explorer{margin-top:36px}
.ex-q{font:300 clamp(1.3rem,2vw,1.75rem)/1.3 var(--serif);letter-spacing:-.015em;margin-bottom:22px}
.ex-opts{display:flex;flex-wrap:wrap;gap:10px}
.ex-opt{
  padding:11px 16px;background:none;border:1px solid var(--rule-2);color:var(--ink-2);
  font:400 .9rem var(--sans);cursor:pointer;
  transition:border-color .16s linear,color .16s linear,background .16s linear;
}
.ex-opt:hover{border-color:var(--ink-3);color:var(--ink)}
.ex-opt.is-on{border-color:var(--gold);color:var(--gold);background:rgba(217,164,65,.06)}
.ex-acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

.ex-out{border-top:2px solid var(--ink);padding-top:22px;min-height:200px}
.ex-empty{color:var(--ink-4);font-size:.9rem;line-height:1.6}
.ex-lead{font:300 1.25rem/1.35 var(--serif);color:var(--ink)}
.ex-sub{margin-top:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.ex-hit{
  display:block;width:100%;text-align:left;background:none;border:0;color:inherit;
  padding:15px 0;border-bottom:1px solid var(--rule);cursor:pointer;font:inherit;
  transition:background .14s linear,padding-left .16s linear;
}
.ex-hit:first-of-type{border-top:1px solid var(--rule);margin-top:18px}
.ex-hit:hover{background:rgba(242,239,233,.03);padding-left:8px}
.ex-hit:hover .ex-hit-n{color:var(--gold)}
.ex-hit-n{display:block;font:500 1rem/1.3 var(--sans);transition:color .16s linear}
.ex-hit-f{display:block;margin-top:4px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.ex-hit-o{display:block;margin-top:7px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.ex-hit-m{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ex-more{margin-top:18px;font-size:.82rem;color:var(--ink-3)}
.ex-more a{color:var(--gold);border-bottom:1px solid var(--gold-dim)}

/* ---------- 02 browse: search + filters ---------- */
.cx-bar{margin-top:36px;border-top:2px solid var(--ink)}
.cx-search{position:relative;display:block;border-bottom:1px solid var(--rule-2)}
.cx-search input{
  width:100%;padding:20px 44px 20px 0;background:none;border:0;color:var(--ink);
  font:300 clamp(1.1rem,1.8vw,1.5rem)/1.3 var(--serif);
}
.cx-search input::placeholder{color:var(--ink-4)}
.cx-search input:focus{outline:none}
.cx-search input:focus + .cx-x,.cx-search:focus-within{color:var(--ink)}
.cx-x{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--ink-4);font-size:1.4rem;line-height:1;cursor:pointer;padding:6px 4px;
}
.cx-x:hover{color:var(--gold)}

.cx-filters{padding:6px 0}
.cx-row{display:grid;grid-template-columns:96px 1fr;gap:14px var(--gut);align-items:start;padding:14px 0;border-bottom:1px solid var(--rule)}
.cx-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);padding-top:7px}
.cx-set{display:flex;flex-wrap:wrap;gap:8px}
.cx-chip{
  padding:6px 12px;background:none;border:1px solid var(--rule);color:var(--ink-3);
  font:400 .8rem var(--sans);cursor:pointer;
  transition:border-color .16s linear,color .16s linear,background .16s linear;
}
.cx-chip:hover{color:var(--ink);border-color:var(--ink-3)}
.cx-chip.is-on{color:var(--gold);border-color:var(--gold);background:rgba(217,164,65,.06)}
.cx-status{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cx-none{margin-top:40px;color:var(--ink-3);font-size:.92rem}

/* ---------- 02 browse: families and cards ---------- */
.fam{margin-top:52px}
.fam-h{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline;border-bottom:1px solid var(--rule-2);padding-bottom:12px}
.fam-n{font:400 1.35rem/1.2 var(--serif);letter-spacing:-.01em}
.fam-d{grid-column:1;font-size:.84rem;color:var(--ink-3);line-height:1.5}
.fam-c{grid-row:1;grid-column:2;font-family:var(--mono);font-size:.68rem;color:var(--ink-4);letter-spacing:.12em}

.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gut)}
.ccard{
  display:flex;flex-direction:column;padding:20px 0 22px;
  border-bottom:1px solid var(--rule);
}
.ccard-n{font:500 1.02rem/1.3 var(--sans)}
.ccard-o{margin-top:8px;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.ccard-m{display:grid;grid-template-columns:62px 1fr;gap:6px 14px;margin-top:14px;font-size:.79rem}
.ccard-m dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding-top:2px}
.ccard-m dd{margin:0;color:var(--ink-3);line-height:1.45}
.ccard-a{
  align-self:flex-start;margin-top:auto;padding-top:16px;
  background:none;border:0;color:var(--gold);cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  transition:letter-spacing .16s linear;
}
.ccard-a::after{content:" →"}
.ccard-a:hover{letter-spacing:.2em}

/* ---------- career profile ---------- */
.prof{border-top:2px solid var(--gold);padding-top:26px}
.prof-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--rule-2)}
.prof-fam{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.prof-n{margin-top:10px;font:300 clamp(1.9rem,3.4vw,3rem)/1.05 var(--serif);letter-spacing:-.025em}
.prof-one{margin-top:14px;font-size:1.02rem;line-height:1.55;color:var(--ink-2);max-width:56ch}
.prof-tools{display:flex;gap:10px;flex-shrink:0}
.prof-tools .btn{padding:10px 15px;font-size:.82rem}

.prof-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gut)}
.ps{padding:26px 0 28px;border-bottom:1px solid var(--rule)}
.ps-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.ps-p{font-size:.94rem;line-height:1.68;color:var(--ink-2);max-width:60ch}
.ps-cav{margin-top:10px;font-size:.76rem;line-height:1.55;color:var(--ink-4);max-width:58ch}
.ps-dl{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin-top:16px;font-size:.9rem}
.ps-dl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding-top:3px}
.ps-dl dd{margin:0;color:var(--ink-2);line-height:1.55}
.ps-dl dd .ps-cav{display:block;margin-top:3px}

.pd{width:100%;border-collapse:collapse;margin-top:14px}
.pd td{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.88rem;color:var(--ink-2);vertical-align:top;line-height:1.5}
.pd-t{width:74px;font-family:var(--mono);font-size:.76rem;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}

.sks{display:grid;gap:0}
.sk{display:grid;grid-template-columns:1fr 54px 74px;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule)}
.sk-n{font-size:.88rem;color:var(--ink-2)}
.sk-d{font-size:.66rem;letter-spacing:.24em;color:var(--gold)}
.sk-v{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);text-align:right}

/* route visualisation */
.rt{margin-top:20px}
.rt + .rt{margin-top:26px}
.rt-l{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4)}
.rt-steps{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-top:12px;counter-reset:rt}
.rt-step{
  position:relative;flex:1 1 auto;min-width:0;
  padding:15px 22px 15px 16px;border:1px solid var(--rule);border-right:0;
  font-size:.84rem;line-height:1.35;color:var(--ink-2);
}
.rt-step:last-child{border-right:1px solid var(--rule)}
.rt-step::after{
  content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;
  border-top:1px solid var(--rule-2);border-right:1px solid var(--rule-2);
  transform:translate(50%,-50%) rotate(45deg);background:var(--black);
}
.rt-step:last-child::after{display:none}
.rt-step:first-child{color:var(--gold)}
.rt-note{margin-top:10px;font-size:.76rem;color:var(--ink-4);line-height:1.55}

.rels{display:flex;flex-wrap:wrap;gap:9px}
.rel-c{
  padding:8px 14px;background:none;border:1px solid var(--rule-2);color:var(--ink-2);
  font:400 .84rem var(--sans);cursor:pointer;transition:border-color .16s,color .16s;
}
.rel-c:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- 03 compare ---------- */
.cmp-pick{display:grid;grid-template-columns:260px 1fr auto;gap:18px var(--gut);align-items:center;margin:32px 0 28px;padding-bottom:22px;border-bottom:1px solid var(--rule-2)}
.cmp-chosen{display:flex;flex-wrap:wrap;gap:8px}
.cmp-tag{
  display:inline-flex;align-items:center;gap:9px;padding:7px 12px;
  background:none;border:1px solid var(--gold-dim);color:var(--gold);
  font:400 .82rem var(--sans);cursor:pointer;transition:border-color .16s}
.cmp-tag:hover{border-color:var(--gold)}
.cmp-tag i{font-style:normal;color:var(--ink-4);font-size:.95rem}
.cmp-tag:hover i{color:var(--gold)}
.cmp-hint{color:var(--ink-4);font-size:.9rem;padding:20px 0}
.cmp-tbl{min-width:820px}
.cmp-tbl th[scope="row"]{width:210px;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding-right:20px}
.cmp-tbl td{padding-right:24px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.cmp-th{display:block;font:500 1rem/1.25 var(--sans);color:var(--ink)}
.cmp-thf{display:block;margin-top:4px;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.cmp-dial td{white-space:nowrap}
.cmp-d{font-size:.7rem;letter-spacing:.22em;color:var(--gold);margin-right:10px}
.cmp-v{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cmp-wide td{min-width:200px}

/* ---------- 04 university vs apprenticeship ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut);margin-top:36px;border-top:2px solid var(--ink)}
.vs-col{padding:26px 0 6px}
.vs-col + .vs-col{border-left:1px solid var(--rule);padding-left:var(--gut)}
.vs-h{font:300 1.6rem/1.2 var(--serif);letter-spacing:-.015em}
.vs-dl{display:grid;grid-template-columns:1fr;gap:0;margin-top:20px}
.vs-dl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding-top:16px;border-top:1px solid var(--rule)}
.vs-dl dt:first-child{border-top:0;padding-top:0}
.vs-dl dd{margin:8px 0 16px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}

/* ---------- 05 applying ---------- */
.appflow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:36px;border-top:2px solid var(--ink);counter-reset:none}
.appstep{padding:22px 18px 26px 0;border-bottom:1px solid var(--rule)}
.appstep + .appstep{border-left:1px solid var(--rule);padding-left:18px}
.ap-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;color:var(--gold)}
.appstep h3{margin-top:12px;font:500 .98rem/1.25 var(--sans)}
.appstep p{margin-top:10px;font-size:.8rem;line-height:1.55;color:var(--ink-3)}
.mini-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule-2)}

/* ---------- 06 timeline ---------- */
.yr-tabs{display:flex;gap:0;margin-top:32px;border-bottom:1px solid var(--rule-2)}
.yr-tab{
  padding:14px 22px;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--ink-3);font:400 .92rem var(--sans);cursor:pointer;margin-bottom:-1px;
  transition:color .16s linear,border-color .16s linear;
}
.yr-tab:first-child{padding-left:0}
.yr-tab:hover{color:var(--ink)}
.yr-tab.is-on{color:var(--gold);border-bottom-color:var(--gold)}
.yr-lead{margin-top:28px;font:300 1.2rem/1.5 var(--serif);color:var(--ink-2);max-width:60ch}
.yr-list{margin-top:26px;border-top:1px solid var(--rule-2)}
.yr-i{display:grid;grid-template-columns:56px 1fr;gap:0 var(--gut);padding:20px 0;border-bottom:1px solid var(--rule)}
.yr-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-4);padding-top:4px}
.yr-i h3{font:500 1rem/1.3 var(--sans)}
.yr-i p{margin-top:8px;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:70ch}

/* ---------- careers responsive ---------- */
@media (max-width:1180px){
  .whats-here{grid-template-columns:repeat(3,1fr)}
  .whats-here a:nth-child(3n+1){border-left:0;padding-left:0}
  .appflow{grid-template-columns:repeat(3,1fr)}
  .appstep:nth-child(3n+1){border-left:0;padding-left:0}
  .ccards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .explorer .c7,.explorer .c5{grid-column:1 / -1}
  .ex-out{margin-top:34px;min-height:0}
  .prof-grid .c5,.prof-grid .c6,.prof-grid .c7{grid-column:1 / -1}
  .cmp-pick{grid-template-columns:1fr}
}
@media (max-width:760px){
  .whats-here{grid-template-columns:repeat(2,1fr)}
  .whats-here a:nth-child(3n+1){border-left:1px solid var(--rule);padding-left:20px}
  .whats-here a:nth-child(odd){border-left:0;padding-left:0}
  .appflow{grid-template-columns:1fr}
  .appstep{border-left:0!important;padding-left:0!important}
  .ccards{grid-template-columns:1fr}
  .cx-row{grid-template-columns:1fr;gap:10px}
  .cx-l{padding-top:0}
  .vs{grid-template-columns:1fr}
  .vs-col + .vs-col{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .ps-dl,.ccard-m{grid-template-columns:1fr;gap:4px}
  .ps-dl dd,.ccard-m dd{margin-bottom:10px}
  .sk{grid-template-columns:1fr auto;gap:6px 12px}
  .sk-v{grid-column:2}
  .sk-d{grid-column:2;grid-row:2;text-align:right}
  /* Stack the route steps rather than letting five boxes fight over 320px. */
  .rt-steps{flex-direction:column}
  .rt-step{border-right:1px solid var(--rule);border-bottom:0}
  .rt-step:last-child{border-bottom:1px solid var(--rule)}
  .rt-step::after{top:auto;bottom:-1px;right:50%;transform:translate(50%,50%) rotate(135deg)}
  .yr-tabs{overflow-x:auto;scrollbar-width:none}
  .yr-tabs::-webkit-scrollbar{display:none}
  .yr-tab{flex:0 0 auto}
  .yr-i{grid-template-columns:1fr}
  .yr-n{padding-top:0;margin-bottom:6px}
  .prof-top{flex-direction:column;gap:20px}
}

/* Pathfinder results now open the full career profile. */
.pf-go{display:inline-block;border-bottom:1px solid var(--rule-2);transition:color .16s linear,border-color .16s linear}
.pf-go:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* .act was written for anchors. On a <button> the UA's default ButtonFace
   background paints a solid light box over the dark page, so reset it. */
button.act{
  background:none;border:0;border-bottom:1px solid var(--gold-dim);
  font:inherit;line-height:inherit;cursor:pointer;padding:0 0 5px;
}
button.act-ink{border-bottom-color:var(--rule-2)}
button.act:hover{border-bottom-color:var(--gold)}
button.act-ink:hover{border-bottom-color:var(--ink)}

/* ---------- careers: pre-rendered rows (replaces the card grid) ----------
   Every career is in the document as a <details>, so the page reads fully
   without JavaScript and a phone shows 48 compact rows rather than 48 tall
   cards. The old .expand.open class rules stay for anything still using a
   button; these target the native element. */
details.expand .expand-b{display:block}
details.expand .expand-h{width:100%}
details.expand summary::marker{content:""}
.expand-h .row-t{margin:0;font-weight:500}
.expand-h .row-d{color:var(--ink-2);font-size:.92rem;line-height:1.5}
.expand-h .row-n{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);justify-self:start}
.expand-h:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cx-item[hidden]{display:none}
.fam[hidden]{display:none}
.cx-acts{display:inline-flex;gap:24px;align-items:center}

/* The profile body sits inside a row, so it needs a little inset and a rule
   separating it from the summary above it. */
details.expand .prof-grid{border-top:1px solid var(--rule);padding-top:6px;margin-top:2px}
details.expand .ps{padding:20px 0 22px}
details.expand .ps-h{color:var(--ink-3)}

/* Explorer hits and related-career chips became links rather than buttons. */
a.ex-hit{text-decoration:none;color:inherit}
a.rel-c{text-decoration:none;display:inline-block}

@media (max-width:760px){
  /* Four stacked lines per row made the phone page 26 screens long. The
     index number and the pay share one line, the name and one-liner take one
     each, and the marker pins to the right — three lines instead of four. */
  details.expand .expand-h{grid-template-columns:auto 1fr 24px;gap:4px 12px;padding:14px 0}
  details.expand .expand-h .row-k{grid-column:1;grid-row:1;font-size:.62rem}
  details.expand .expand-h .row-n{grid-column:2;grid-row:1;justify-self:end;font-size:.76rem}
  details.expand .expand-h .row-t{grid-column:1/3;grid-row:2}
  details.expand .expand-h .row-d{grid-column:1/3;grid-row:3;font-size:.85rem;line-height:1.45}
  details.expand .expand-h .expand-mk{grid-column:3;grid-row:1/4;align-self:center}
  .cx-acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .cx-status{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- chart interaction affordances ---------- */
.chart-help{margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
canvas:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#rr-table table.tbl{min-width:560px}
#rr-table caption{text-align:left}

/* ---------- footer navigation ---------- */
.foot-nav{
  display:grid;grid-template-columns:220px 1fr;gap:0 var(--gut);
  padding:44px 0 34px;border-top:1px solid var(--rule);
}
.foot-h{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:16px;
}
.foot-col ul{display:grid;gap:9px}
.foot-col li{list-style:none}
.foot-col a{
  color:var(--ink-2);font-size:.9rem;
  border-bottom:1px solid transparent;transition:color .16s linear,border-color .16s linear;
}
.foot-col a:hover{color:var(--gold);border-bottom-color:var(--gold-dim)}
.foot-col a[aria-current="page"]{color:var(--ink)}
.foot-about{max-width:70ch}
.foot-about p{color:var(--ink-3);font-size:.86rem;line-height:1.65}
.foot-about p + p{margin-top:12px}
.foot-meta{color:var(--ink-4)!important;font-size:.79rem!important}
.colophon{border-top:1px solid var(--rule)}

@media (max-width:760px){
  .foot-nav{grid-template-columns:1fr;gap:30px}
  .foot-col ul{grid-template-columns:1fr 1fr;gap:12px 20px}
}

/* ---------- touch targets ----------
   WCAG 2.2 AA asks for 24x24 CSS px; these were 29-30px, which passes but is
   tight for a thumb. Raised to ~36px without changing the type size or the
   visual weight of the controls. */
.cx-chip{padding:9px 13px}
.gl-link,.gref{padding:7px 11px}
.rel-c{padding:9px 14px}
/* The slider track is thin by design; the hit area is enlarged around it. */
.range{padding:12px 0;background-clip:content-box}

/* ---------- QA fixes ---------- */
/* .hero-media bleeds to the viewport edge with a negative margin derived from
   100vw. 100vw ignores the scrollbar, so on any desktop browser with a visible
   scrollbar the bleed overshot by the scrollbar width and the whole page
   gained ~8px of horizontal scroll. Clipping at the section boundary contains
   it without altering the bleed itself. */
.hero{overflow-x:clip}

/* Standalone arrow links were ~21px tall. WCAG 2.2 asks for 24px; the extra
   3px is padding, so nothing moves visually. Inline links inside a sentence
   are exempt and are left alone. */
.act{padding-top:2px;padding-bottom:6px}

/* ==========================================================================
   CAREERS — editorial treatment of the career entries
   --------------------------------------------------------------------------
   The listings read as database rows because four fields shared one baseline
   in fixed columns, and the career name was the least distinctive thing on
   the line: sans 1.05rem, no heavier than the descriptor beside it.

   Everything below is scoped to details.cx-item / .fam. economics.html uses the same
   .expand and .row-* classes for its five disclosure blocks, so an unscoped
   change would silently restyle that page too.
   ========================================================================== */

/* ---------- the closed entry ---------- */
details.cx-item{border-bottom:1px solid var(--rule)}

details.cx-item > .expand-h{
  /* Four columns, proportioned as an index entry rather than a table: a
     hanging number, the name given room to be the largest thing on the line,
     the descriptor on a readable measure, and the figure as a caption. */
  grid-template-columns:52px minmax(0,1.05fr) minmax(0,1.3fr) 116px 16px;
  align-items:start;
  padding:21px 0 19px;
  gap:0 var(--gut);
  transition:background .16s linear;
}

/* Entry number: a quiet mono index mark, in the register of .sec-no. */
details.cx-item .row-k{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;
  color:var(--ink-4);padding-top:8px;transition:color .16s linear;
}

/* The career name is the headline of the entry. Serif, cream, the largest
   thing on the row — this single change does most of the editorial work. */
details.cx-item .row-t{
  margin:0;font:400 1.28rem/1.25 var(--serif);letter-spacing:-.017em;
  color:var(--ink);transition:color .16s linear;
}

/* Descriptor reads as a standfirst on its own measure, not as a cell. */
details.cx-item .row-d{
  font:400 .875rem/1.6 var(--sans);color:var(--ink-3);
  padding-top:5px;max-width:48ch;
}

/* Supporting figure: a caption, not a table column. */
details.cx-item .row-n{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--ink-4);
  justify-self:end;text-align:right;padding-top:9px;
}

details.cx-item .expand-mk{
  color:var(--ink-4);font-size:.8rem;padding-top:9px;justify-self:end;
}

/* Hover and open both light the number and the name. No background wash —
   the typography carries the state, which is quieter and more editorial. */
details.cx-item > .expand-h:hover{background:none}
details.cx-item > .expand-h:hover .row-t,
details.cx-item[open] > .expand-h .row-t{color:var(--gold)}
details.cx-item > .expand-h:hover .row-k,
details.cx-item[open] > .expand-h .row-k{color:var(--gold)}

/* ---------- the opened entry ---------- */
details.cx-item[open]{background:none}
details.cx-item[open] > .expand-h{padding-bottom:16px}

/* The profile hangs off the name rather than the page edge. That indent is
   what makes an opened entry read as a piece rather than a dropdown panel. */
details.cx-item .expand-b{padding:0 0 46px}
details.cx-item .prof-grid{
  border-top:0;margin-top:0;padding-top:0;
  margin-left:calc(52px + var(--gut));
  width:calc(100% - 52px - var(--gut));
}

/* A single gold hairline opens the profile. */
details.cx-item .prof-grid > .ps:first-child{
  border-top:1px solid var(--gold-dim);padding-top:26px;
}

details.cx-item .ps{padding:24px 0 26px;border-bottom:1px solid var(--rule)}
details.cx-item .prof-grid > .ps:last-child{border-bottom:0;padding-bottom:4px}

/* Gold micro-labels throughout the profile. */
details.cx-item .ps-h{color:var(--gold);font-size:.6rem;letter-spacing:.18em;margin-bottom:15px}

/* The opening paragraph reads as a standfirst. */
details.cx-item .prof-grid > .ps:first-child .ps-p{
  font:300 1.06rem/1.62 var(--serif);color:var(--ink-2);max-width:56ch;
}
details.cx-item .ps-p{max-width:58ch}
details.cx-item .ps-dl dt{color:var(--ink-4)}
details.cx-item .sk-n{color:var(--ink-2)}

/* ---------- family headings ---------- */
.fam{margin-top:54px}
.fam-h{
  border-bottom:0;border-top:1px solid var(--rule-2);
  padding:15px 0 17px;align-items:start;
}
.fam-n{font:400 1.5rem/1.15 var(--serif);letter-spacing:-.018em}
.fam-d{padding-top:6px;max-width:52ch}
.fam-c{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;
  color:var(--ink-4);padding-top:8px;
}

/* ---------- narrow screens ---------- */
@media (max-width:1080px){
  details.cx-item > .expand-h{grid-template-columns:46px minmax(0,1fr) 112px 16px}
  /* Descriptor drops beneath the name and runs to the figure column. */
  details.cx-item .row-t{grid-column:2;grid-row:1}
  details.cx-item .row-d{grid-column:2/4;grid-row:2;padding-top:8px;max-width:60ch}
  details.cx-item .row-n{grid-column:3;grid-row:1}
  details.cx-item .expand-mk{grid-column:4;grid-row:1}
  details.cx-item .prof-grid{margin-left:calc(46px + var(--gut));width:calc(100% - 46px - var(--gut))}
}

@media (max-width:760px){
  /* Index number and figure share the top line, the name is the headline,
     the descriptor follows. Three lines, exactly as before — the change is
     typographic, not structural, so a phone page does not get taller. */
  details.cx-item > .expand-h{
    grid-template-columns:auto 1fr 18px;
    gap:0 12px;padding:15px 0 14px;
  }
  details.cx-item .row-k{grid-column:1;grid-row:1;padding-top:0;font-size:.6rem}
  details.cx-item .row-n{grid-column:2;grid-row:1;padding-top:0;font-size:.7rem}
  details.cx-item .row-t{grid-column:1/3;grid-row:2;font-size:1.14rem;padding-top:5px}
  details.cx-item .row-d{grid-column:1/3;grid-row:3;padding-top:4px;font-size:.85rem;line-height:1.5;max-width:none}
  details.cx-item .expand-mk{grid-column:3;grid-row:1;padding-top:0}
  /* No hanging indent on a phone; it would eat the measure. */
  details.cx-item .prof-grid{margin-left:0;width:100%}
  details.cx-item .prof-grid > .ps:first-child .ps-p{font-size:1rem}
  .fam{margin-top:44px}
  .fam-n{font-size:1.3rem}
}

/* A first-year figure is tabular data; a note is prose. Fourteen of the 48
   careers have no number and carry a short note instead. */
details.cx-item .row-n.is-note{
  font-family:var(--sans);font-size:.72rem;letter-spacing:0;
  color:var(--ink-4);max-width:21ch;line-height:1.45;text-align:right;
}
@media (max-width:760px){
  details.cx-item .row-n.is-note{max-width:26ch;font-size:.68rem;text-align:right}
}

/* ---------- pay bands (careers profile) ----------
   Used where pay depends more on who hires you than on the job itself. */
details.cx-item .paybands{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;
  margin-top:14px;border-top:1px solid var(--rule);max-width:56ch;
}
details.cx-item .paybands dt{
  font:400 .88rem/1.5 var(--sans);color:var(--ink-2);
  padding:11px 20px 11px 0;border-bottom:1px solid var(--rule);
}
details.cx-item .paybands dd{
  margin:0;padding:11px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.84rem;font-variant-numeric:tabular-nums;
  color:var(--gold);text-align:right;white-space:nowrap;
}
details.cx-item .pay-src{margin-top:13px;max-width:62ch;color:var(--ink-4)}
@media (max-width:760px){
  details.cx-item .paybands{grid-template-columns:1fr;max-width:none}
  details.cx-item .paybands dt{padding:11px 0 2px;border-bottom:0}
  details.cx-item .paybands dd{text-align:left;padding:0 0 11px;white-space:normal}
}

/* ==========================================================================
   HOMEPAGE — student journeys
   --------------------------------------------------------------------------
   Three modules: the five routes, the six-step start map, and the upcoming
   strip. All built from the existing tokens, rules and type scale — no new
   colours, no cards, no shadows, no radii.
   ========================================================================== */

/* ---------- 01 · the five routes ---------- */
.routes-list{margin-top:40px;border-top:2px solid var(--ink)}

.rt-route{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 var(--gut);
  padding:30px 0 32px;border-bottom:1px solid var(--rule);
}
.rt-n{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;
  color:var(--ink-4);padding-top:11px;
}
.rt-h{font:400 clamp(1.5rem,2.6vw,2.05rem)/1.14 var(--serif);letter-spacing:-.022em;color:var(--ink)}
.rt-d{margin-top:12px;font-size:.95rem;line-height:1.62;color:var(--ink-2);max-width:56ch}

/* Destinations sit as a rule-separated list, not as buttons or cards. */
.rt-links{margin-top:22px;border-top:1px solid var(--rule)}
.rt-links a{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:4px var(--gut);
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .16s linear,background .14s linear;
}
.rt-links a:hover,.rt-links a:focus-visible{background:rgba(242,239,233,.03);padding-left:9px}
.rt-links a b{font:500 .96rem/1.35 var(--sans);color:var(--ink);transition:color .16s linear}
.rt-links a:hover b,.rt-links a:focus-visible b{color:var(--gold)}
.rt-links a b::after{content:" →";font-family:var(--sans);color:var(--gold);opacity:0;transition:opacity .16s linear}
.rt-links a:hover b::after,.rt-links a:focus-visible b::after{opacity:1}
.rt-links a span{font-size:.86rem;line-height:1.5;color:var(--ink-3)}
.rt-note{
  margin-top:15px;font-size:.79rem;line-height:1.55;color:var(--ink-4);
  border-left:2px solid var(--gold-dim);padding-left:14px;max-width:60ch;
}

/* ---------- 02 · you've just finished GCSEs ---------- */
.steps{margin-top:6px;border-top:2px solid var(--ink)}
.step{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 var(--gut);
  padding:20px 0 22px;border-bottom:1px solid var(--rule);
}
.step-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--ink-4);padding-top:6px}
.step h3{font:400 1.16rem/1.3 var(--serif);letter-spacing:-.014em}
.step h3 a{
  display:inline-block;padding:4px 0 5px;
  color:var(--ink);border-bottom:1px solid transparent;
  transition:color .16s linear,border-color .16s linear;
}
.step h3 a:hover,.step h3 a:focus-visible{color:var(--gold);border-bottom-color:var(--gold-dim)}
.step p{margin-top:7px;font-size:.88rem;line-height:1.58;color:var(--ink-3);max-width:58ch}

/* ---------- 03 · upcoming ---------- */
.opps{margin-top:36px;border-top:2px solid var(--ink)}
.opp{
  display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:6px var(--gut);
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);
}
.opp-s{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.opp-n{font:400 1.08rem/1.3 var(--serif);color:var(--ink)}
.opp-w{grid-column:2;font-size:.86rem;line-height:1.5;color:var(--ink-3);max-width:60ch}
.opp-d{font-family:var(--mono);font-size:.74rem;color:var(--gold);justify-self:end;white-space:nowrap}

/* The honest empty state. Not a "coming soon" badge — an explanation. */
.opps-empty{
  margin-top:34px;border-top:2px solid var(--ink);padding-top:26px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--gut);
}
.opps-empty p{font-size:.92rem;line-height:1.65;color:var(--ink-2);max-width:56ch}
.opps-empty .oe-side{border-left:1px solid var(--rule);padding-left:var(--gut)}
.opps-empty .oe-side p{color:var(--ink-3);font-size:.86rem}
.oe-l{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:13px;
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .step,.rt-route{grid-template-columns:44px minmax(0,1fr)}
  .opps-empty{grid-template-columns:1fr;gap:26px}
  .opps-empty .oe-side{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}
}
@media (max-width:760px){
  /* The number moves above the heading rather than eating a column of a
     320px screen; everything else stacks on its own measure. */
  .rt-route{grid-template-columns:1fr;gap:0;padding:24px 0 26px}
  .rt-n{padding-top:0;margin-bottom:9px}
  .rt-d{margin-top:10px;font-size:.9rem}
  .rt-links a{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .rt-links a b::after{opacity:1}
  .step{grid-template-columns:1fr;gap:0;padding:18px 0 20px}
  .step-n{padding-top:0;margin-bottom:6px}
  .step h3{font-size:1.1rem}
  .opp{grid-template-columns:1fr;gap:4px}
  .opp-w,.opp-d{grid-column:1;justify-self:start}
}

/* ==========================================================================
   OPPORTUNITIES
   Same editorial language as the careers rows: hanging index number, serif
   name, mono labels, thin rules. No cards, no pills, no dashboard tiles.
   ========================================================================== */

/* ---------- filter ---------- */
.opp-filter{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px var(--gut);
  align-items:center;margin-top:34px;padding-bottom:16px;border-bottom:1px solid var(--rule-2);
}
.opp-fl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.opp-fset{display:flex;flex-wrap:wrap;gap:8px}
.opp-f{
  padding:8px 13px;background:none;border:1px solid var(--rule);color:var(--ink-3);
  font:400 .82rem var(--sans);cursor:pointer;
  transition:border-color .16s linear,color .16s linear,background .16s linear;
}
.opp-f:hover{color:var(--ink);border-color:var(--ink-3)}
.opp-f[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);background:rgba(217,164,65,.06)}
.opp-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}

/* ---------- entry ---------- */
.opp-item{border-bottom:1px solid var(--rule);padding:30px 0 32px}
.opp-item[hidden]{display:none}

.opp-head{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px var(--gut);align-items:start;
}
.opp-i{font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;color:var(--ink-4);padding-top:9px}
.opp-name{font:400 clamp(1.24rem,2.1vw,1.6rem)/1.2 var(--serif);letter-spacing:-.018em;color:var(--ink)}
.opp-org{margin-top:7px;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}

/* Status carries a word, never colour alone. */
.opp-status{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  padding-top:9px;justify-self:end;text-align:right;color:var(--ink-3);
  max-width:14ch;line-height:1.45;
}
.opp-status.s-soon{color:var(--gold)}
.opp-status.s-open{color:var(--up)}
.opp-status.s-past,.opp-status.s-unknown{color:var(--ink-4)}

.opp-body{margin-left:calc(52px + var(--gut));margin-top:16px}
.opp-what{font:300 1.04rem/1.6 var(--serif);color:var(--ink-2);max-width:58ch}

.opp-dl{display:grid;grid-template-columns:168px minmax(0,1fr);gap:11px 20px;margin-top:20px;
  border-top:1px solid var(--rule);padding-top:18px}
.opp-dl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding-top:3px}
.opp-dl dd{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.opp-cyc{font-family:var(--mono);font-size:.66rem;color:var(--ink-4);letter-spacing:.06em}
.opp-prep{display:grid;gap:6px}
.opp-prep li{list-style:none;font-size:.88rem}
.opp-prep a{display:inline-block;padding:4px 0 5px}

.opp-note{
  margin-top:18px;border-left:2px solid var(--gold-dim);padding-left:16px;
  font-size:.83rem;line-height:1.6;color:var(--ink-3);max-width:66ch;
}
.opp-src{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:22px}
.opp-checked{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- homepage strip ---------- */
.opps{margin-top:34px;border-top:2px solid var(--ink)}
.opp-row{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:5px var(--gut);
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);
}
.opp-row .o-s{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;color:var(--ink-4)}
.opp-row .o-n{font:400 1.1rem/1.3 var(--serif);color:var(--ink)}
.opp-row a.o-n{border-bottom:1px solid transparent;transition:color .16s linear,border-color .16s linear}
.opp-row a.o-n:hover,.opp-row a.o-n:focus-visible{color:var(--gold);border-bottom-color:var(--gold-dim)}
.opp-row .o-w{grid-column:2;font-size:.85rem;line-height:1.5;color:var(--ink-3);max-width:62ch}
.opp-row .o-d{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);justify-self:end;white-space:nowrap}
.opp-row .o-d.s-upcoming,.opp-row .o-d.s-unknown{color:var(--ink-4)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .opp-body{margin-left:0}
  .opp-dl{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:760px){
  .opp-filter{grid-template-columns:1fr;gap:12px}
  .opp-head{grid-template-columns:1fr;gap:0}
  .opp-i{padding-top:0;margin-bottom:8px}
  .opp-status{justify-self:start;text-align:left;max-width:none;padding-top:10px}
  .opp-dl{grid-template-columns:1fr;gap:3px 0}
  .opp-dl dt{padding-top:13px}
  .opp-dl dd{padding-bottom:2px}
  .opp-item{padding:24px 0 26px}
  .opp-what{font-size:.98rem}
  .opp-row{grid-template-columns:1fr;gap:4px}
  .opp-row .o-w,.opp-row .o-d{grid-column:1;justify-self:start}
}

/* ==========================================================================
   ROAD TO A* MATHS
   Same editorial language as careers and opportunities: hanging index number,
   serif heading, mono micro-labels, thin rules. No cards, no progress bars.
   ========================================================================== */

/* Inline mathematics. No typesetting library — variables in italic serif,
   which reads correctly beside the body sans and costs nothing. */
.mex{
  font-family:var(--serif);font-style:italic;font-size:1.04em;
  color:var(--ink);white-space:nowrap;
}
.mex sup,.mex sub{font-style:normal;font-size:.7em}
.mex b{font-style:normal;font-weight:600}

.m-n{font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;color:var(--ink-4)}

/* ---------- 01 routes ---------- */
.m-route{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 var(--gut);
  padding:26px 0 28px;border-bottom:1px solid var(--rule);
}
.m-route:first-of-type{border-top:2px solid var(--ink);margin-top:36px}
.m-route .m-n{padding-top:10px}
.m-rh{font:400 clamp(1.3rem,2.2vw,1.7rem)/1.18 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.m-rd{margin-top:11px;font-size:.93rem;line-height:1.62;color:var(--ink-2);max-width:60ch}
.m-rgo{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:16px}
.m-rgo a{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding:4px 0 5px;border-bottom:1px solid var(--gold-dim);
  transition:border-color .16s linear;
}
.m-rgo a::after{content:" \2192"}
.m-rgo a:hover,.m-rgo a:focus-visible{border-bottom-color:var(--gold)}

/* ---------- 02 foundations ---------- */
.m-trap{margin-top:12px;font-size:.88rem;line-height:1.6;color:var(--ink-3);max-width:66ch}
.m-trap b{color:var(--gold);font-weight:400;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px}
.m-more{margin-top:11px;font-size:.83rem;line-height:1.55;color:var(--ink-4);max-width:64ch}

/* ---------- 03 families ---------- */
details.m-fam .expand-h{grid-template-columns:52px minmax(0,1.05fr) minmax(0,1.5fr) 16px;
  align-items:start;padding:21px 0 19px}
details.m-fam .row-t{margin:0;font:400 1.2rem/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink)}
details.m-fam .row-d{font-size:.88rem;line-height:1.55;color:var(--ink-3);padding-top:4px}
details.m-fam[open] .row-t{color:var(--gold)}
details.m-fam .expand-b{padding:0 0 30px}
.m-dl{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px 22px;
  margin-left:calc(52px + var(--gut));border-top:1px solid var(--rule);padding-top:18px}
.m-dl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding-top:3px}
.m-dl dd{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-2);max-width:64ch}

/* ---------- 04 why it works ---------- */
.m-whys{margin-top:36px;border-top:2px solid var(--ink)}
.m-why{border-bottom:1px solid var(--rule)}
.m-why-s{
  display:grid;grid-template-columns:52px minmax(0,1fr) 16px;gap:5px var(--gut);
  align-items:start;padding:24px 0 22px;cursor:pointer;list-style:none;
}
.m-why-s::-webkit-details-marker{display:none}
.m-why-s::marker{content:""}
.m-why-s:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.m-why .m-n{padding-top:8px}
.m-why-q{grid-column:2;font:400 clamp(1.22rem,2vw,1.52rem)/1.22 var(--serif);
  letter-spacing:-.018em;color:var(--ink);transition:color .16s linear}
.m-why:hover .m-why-q,.m-why[open] .m-why-q{color:var(--gold)}
.m-why-l{grid-column:2;margin-top:8px;font-size:.9rem;line-height:1.55;color:var(--ink-3);max-width:62ch}
.m-why .expand-mk{grid-row:1;grid-column:3;padding-top:8px;color:var(--ink-4);font-size:.8rem}
.m-why[open] .expand-mk{transform:rotate(45deg);color:var(--gold)}
.m-why-b{
  margin-left:calc(52px + var(--gut));padding:6px 0 34px;
  border-top:1px solid var(--gold-dim);
}
.m-why-b p{margin-top:15px;font-size:.95rem;line-height:1.72;color:var(--ink-2);max-width:62ch}
/* A display line on its own gets room, and may scroll if it must. */
.m-why-b p > .mex:only-child{
  display:block;margin:4px 0;padding:14px 0;font-size:1.12rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow-x:auto;white-space:nowrap;
}
.m-hook{
  margin-top:20px!important;border-left:2px solid var(--gold-dim);padding-left:16px;
  font-size:.86rem!important;color:var(--ink-3)!important;
}

/* ---------- 06 connections ---------- */
.m-cons{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut);margin-top:36px;
  border-top:2px solid var(--ink)}
.m-con{padding:26px 0 28px;border-bottom:1px solid var(--rule)}
.m-con:nth-child(even){border-left:1px solid var(--rule);padding-left:var(--gut)}
.m-con-n{font:400 1.24rem/1.2 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.m-chain{margin-top:14px;display:grid;gap:0}
.m-chain li{
  list-style:none;position:relative;padding:7px 0 7px 22px;
  font-size:.88rem;line-height:1.45;color:var(--ink-2);
}
.m-chain li::before{
  content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--rule-2);
}
.m-chain li:first-child::before{top:50%}
.m-chain li:last-child::before{bottom:50%}
.m-chain li::after{
  content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;
  transform:translateY(-50%);background:var(--tone-1);border:1px solid var(--rule-3);
}
.m-chain li:first-child::after,.m-chain li:last-child::after{background:var(--gold);border-color:var(--gold)}
.m-con-d{margin-top:14px;font-size:.86rem;line-height:1.6;color:var(--ink-3);max-width:56ch}
.m-con-go{margin-top:15px;display:flex;flex-wrap:wrap;gap:10px 22px}

/* ---------- 07 problem solving ---------- */
.mq-list{margin-top:8px;border-top:1px solid var(--rule-2);counter-reset:mq}
.mq-list li{
  list-style:none;counter-increment:mq;position:relative;
  padding:12px 0 12px 38px;border-bottom:1px solid var(--rule);
  font-size:.91rem;line-height:1.6;color:var(--ink-2);
}
.mq-list li::before{
  content:counter(mq,decimal-leading-zero);position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-4);
}
.mq-list b{color:var(--ink);font-weight:500}

.m-apps{margin-top:40px;border-top:2px solid var(--ink)}
.m-app{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 var(--gut);
  padding:24px 0 26px;border-bottom:1px solid var(--rule);
}
.m-app .m-n{padding-top:8px}
.m-app-n{font:400 1.2rem/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.m-app-d{margin-top:10px;font-size:.91rem;line-height:1.62;color:var(--ink-2);max-width:62ch}
.m-app-e,.m-app-w{margin-top:12px;font-size:.87rem;line-height:1.62;color:var(--ink-3);max-width:64ch}
.m-app-e b,.m-app-w b{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:4px;
}

/* ---------- 08 errors ---------- */
.m-says{font:300 1.06rem/1.5 var(--serif);color:var(--ink);margin-bottom:10px}

/* ---------- 09 checkpoints ---------- */
.m-checks{margin-top:36px;border-top:2px solid var(--ink)}
.m-check{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 var(--gut);
  padding:20px 0 22px;border-bottom:1px solid var(--rule);list-style:none;
}
.m-check .m-n{padding-top:6px}
.m-check h3{font:400 1.14rem/1.3 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.m-check p{margin-top:7px;font-size:.89rem;line-height:1.6;color:var(--ink-3);max-width:64ch}

/* ---------- 10 extension ---------- */
.m-exts{margin-top:36px;border-top:2px solid var(--ink)}
.m-ext{border-bottom:1px solid var(--rule)}
.m-ext-s{
  display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:6px var(--gut);
  align-items:start;padding:22px 0 20px;cursor:pointer;list-style:none;
}
.m-ext-s::-webkit-details-marker{display:none}
.m-ext-s::marker{content:""}
.m-ext-s:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.m-ext-s h3{font:400 1.24rem/1.22 var(--serif);letter-spacing:-.016em;color:var(--ink);
  transition:color .16s linear}
.m-ext:hover .m-ext-s h3,.m-ext[open] .m-ext-s h3{color:var(--gold)}
.m-ext-w{grid-column:1;font-size:.89rem;line-height:1.58;color:var(--ink-3);max-width:64ch}
.m-ext .expand-mk{grid-row:1;grid-column:2;padding-top:6px;color:var(--ink-4);font-size:.8rem}
.m-ext[open] .expand-mk{transform:rotate(45deg);color:var(--gold)}
.m-ext-b{padding:4px 0 28px}
.m-ext-b .m-dl{margin-left:0}

/* ---------- the numeric alternative to the canvas ---------- */
.m-alt{margin-top:26px}
.m-alt-t{min-width:0}
.m-alt-t th[scope="row"]{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--gold);font-weight:400}
.m-alt-t td{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .m-cons{grid-template-columns:1fr}
  .m-con:nth-child(even){border-left:0;padding-left:0}
  .m-dl{margin-left:0;grid-template-columns:170px minmax(0,1fr)}
  .m-why-b{margin-left:0}
  details.m-fam .expand-h{grid-template-columns:46px minmax(0,1fr) 16px}
  details.m-fam .row-d{grid-column:2;grid-row:2;padding-top:7px}
}
@media (max-width:760px){
  .m-route,.m-app,.m-check{grid-template-columns:1fr;gap:0}
  .m-route .m-n,.m-app .m-n,.m-check .m-n{padding-top:0;display:block;margin-bottom:8px}
  .m-why-s{grid-template-columns:1fr 16px;gap:0}
  .m-why .m-n{grid-column:1;grid-row:1;padding-top:0;display:block;margin-bottom:8px}
  .m-why-q{grid-column:1;grid-row:2}
  .m-why-l{grid-column:1;grid-row:3}
  .m-why .expand-mk{grid-row:1}
  .m-dl{grid-template-columns:1fr;gap:2px 0}
  .m-dl dt{padding-top:13px}
  .mq-list li{padding-left:32px}
  /* Inline maths may wrap on a phone; a standalone display line scrolls
     instead, so the sentence around it is never broken up. */
  .mex{white-space:normal}
  .m-why-b p > .mex:only-child{white-space:nowrap;font-size:1rem}
}

/* ---------- 08 practice ----------
   Each problem is an entry in a mathematical publication: hanging number,
   serif title, mono topic and demand label, then six native disclosures. No
   quiz cards, no coloured answer boxes, no score. */

.prac-key{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;
  padding-bottom:20px;border-bottom:1px solid var(--rule);
  font-size:.79rem;line-height:1.5;color:var(--ink-4);
}
.prac-key b{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin-right:8px;
}

.prac{border-bottom:1px solid var(--rule);padding:32px 0 34px}
.prac:first-of-type{border-top:2px solid var(--ink);margin-top:0;padding-top:34px}

.prac-h{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px var(--gut);align-items:start}
.prac-n{font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;color:var(--ink-4);padding-top:10px}
.prac-title{font:400 clamp(1.28rem,2.1vw,1.62rem)/1.2 var(--serif);letter-spacing:-.018em;color:var(--ink)}
.prac-topic{margin-top:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4)}
/* The demand label is a word, never a colour on its own. */
.prac-lvl{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  padding-top:10px;justify-self:end;white-space:nowrap;color:var(--ink-3);
}
.prac-lvl.l-challenge,.prac-lvl.l-deep{color:var(--gold)}

.prac-body{margin-left:calc(52px + var(--gut));margin-top:18px}

/* The problem itself is the loudest thing in the entry. */
.prac-q{
  font:300 1.12rem/1.62 var(--serif);color:var(--ink);max-width:60ch;
  border-left:2px solid var(--gold);padding-left:20px;
}

.prac-d{border-bottom:1px solid var(--rule)}
.prac-d:first-of-type{border-top:1px solid var(--rule);margin-top:24px}
.prac-d > summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);transition:color .16s linear;
}
.prac-d > summary::-webkit-details-marker{display:none}
.prac-d > summary::marker{content:""}
.prac-d > summary::after{
  content:"+";font-family:var(--mono);font-size:.9rem;color:var(--ink-4);
  transition:transform .18s ease,color .16s linear;
}
.prac-d[open] > summary::after{transform:rotate(45deg);color:var(--gold)}
.prac-d > summary:hover,.prac-d[open] > summary{color:var(--gold)}
.prac-d > summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.prac-db{padding:2px 0 22px}
.prac-db p{margin-top:13px;font-size:.93rem;line-height:1.72;color:var(--ink-2);max-width:62ch}
.prac-db p:first-child{margin-top:6px}
/* A display line on its own gets room, and scrolls rather than breaking. */
.prac-db p > .mex:only-child{
  display:block;margin:6px 0;padding:13px 0;font-size:1.08rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow-x:auto;white-space:nowrap;
}
.prac-sol .prac-db p{color:var(--ink-2)}
.prac-why .prac-db p,.prac-wrong .prac-db p{color:var(--ink-3)}
.prac-rel{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px!important}
.prac-rel a{font-size:.85rem}

@media (max-width:1080px){
  .prac-body{margin-left:0}
}
@media (max-width:760px){
  .prac{padding:26px 0 28px}
  .prac-h{grid-template-columns:1fr;gap:0}
  .prac-n{padding-top:0;margin-bottom:8px}
  .prac-lvl{justify-self:start;padding-top:9px}
  .prac-q{font-size:1.04rem;padding-left:15px}
  .prac-db p{font-size:.9rem}
  .prac-db p > .mex:only-child{font-size:.98rem}
  .prac-key{gap:8px 0;flex-direction:column}
}

/* ==========================================================================
   ROAD TO A* ECONOMICS
   Reuses the Maths page components (.m-route, .m-why, .m-ext, .m-checks,
   .prac) and adds four of its own: the argument grid, the mechanism ladder,
   the decorative/analytical pair, and the rewrite ladder.
   ========================================================================== */

/* ---------- 02 the argument ---------- */
.arg{margin-top:36px;border-top:2px solid var(--ink)}
.arg-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.25fr);
  gap:10px var(--gut);padding:22px 0 24px;border-bottom:1px solid var(--rule);
}
.arg-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.17em;color:var(--ink-4);padding-top:6px}
.arg-l h3{font:400 1.16rem/1.25 var(--serif);letter-spacing:-.014em;color:var(--ink)}
.arg-l p{margin-top:8px;font-size:.88rem;line-height:1.6;color:var(--ink-3)}
.arg-e{border-left:1px solid var(--gold-dim);padding-left:var(--gut)}
.arg-el{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.arg-e p{font-size:.9rem;line-height:1.65;color:var(--ink-2)}

/* ---------- 03 the mechanism ladder ---------- */
.mech{margin-top:36px;border-top:2px solid var(--ink)}
.mech-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px var(--gut);
  padding:22px 0 24px;border-bottom:1px solid var(--rule);
}
.mech-l{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-4);padding-top:7px;
}
.mech-row:last-child .mech-l{color:var(--gold)}
.mech-t{font:300 1.04rem/1.62 var(--serif);color:var(--ink);max-width:62ch}
.mech-w{margin-top:11px;font-size:.85rem;line-height:1.6;color:var(--ink-3);max-width:64ch}

/* ---------- 04 / 08 decorative vs analytical ---------- */
.ba{margin-top:34px;border-top:2px solid var(--ink)}
.ba-row{padding:24px 0 26px;border-bottom:1px solid var(--rule)}
.ba-bad,.ba-good{display:grid;grid-template-columns:118px minmax(0,1fr);gap:6px var(--gut);align-items:start}
.ba-good{margin-top:16px}
.ba-l{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-4);padding-top:5px;
}
.ba-l.ba-lg{color:var(--gold)}
.ba-bad p{font-size:.92rem;line-height:1.6;color:var(--ink-4);max-width:62ch}
.ba-good p{font-size:.94rem;line-height:1.68;color:var(--ink-2);max-width:62ch}
.ba-fix{
  margin-top:16px;margin-left:calc(118px + var(--gut));
  border-left:2px solid var(--gold-dim);padding-left:15px;
  font-size:.83rem;line-height:1.6;color:var(--ink-3);max-width:60ch;
}

/* ---------- 10 the rewrite ladder ---------- */
.ws{margin-top:36px;border-top:2px solid var(--ink)}
.ws-row{padding:26px 0 28px;border-bottom:1px solid var(--rule)}
.ws-h{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 var(--gut);align-items:baseline}
.ws-t{font:400 1.2rem/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.ws-steps{margin:18px 0 0;margin-left:calc(44px + var(--gut));counter-reset:ws}
.ws-steps li{
  list-style:none;counter-increment:ws;position:relative;
  padding:13px 0 14px 34px;border-top:1px solid var(--rule);
  font-size:.92rem;line-height:1.65;color:var(--ink-3);max-width:64ch;
}
.ws-steps li::before{
  content:counter(ws);position:absolute;left:0;top:15px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-4);
}
/* The final rewrite is the one to read twice. */
.ws-steps li.ws-last{color:var(--ink-2);border-left:2px solid var(--gold);padding-left:32px}
.ws-steps li.ws-last::before{left:14px;color:var(--gold)}
.ws-gain{
  margin-top:16px;margin-left:calc(44px + var(--gut));
  font-size:.84rem;line-height:1.6;color:var(--ink-4);max-width:64ch;
}
.ws-gain b{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:4px;
}

/* ---------- 15 bridges ---------- */
.br-items{margin-top:14px;border-top:1px solid var(--rule)}
.br-item{
  display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .16s linear,background .14s linear;
}
.br-item:hover,.br-item:focus-visible{background:rgba(242,239,233,.03);padding-left:8px}
.br-item b{font:500 .92rem/1.35 var(--sans);color:var(--ink);transition:color .16s linear}
.br-item:hover b,.br-item:focus-visible b{color:var(--gold)}
.br-item b::after{content:" \2192";color:var(--gold);opacity:0;transition:opacity .16s linear}
.br-item:hover b::after,.br-item:focus-visible b::after{opacity:1}
.br-item span{font-size:.84rem;line-height:1.5;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .arg-row{grid-template-columns:44px minmax(0,1fr)}
  .arg-e{grid-column:2;border-left:0;padding-left:0;border-top:1px solid var(--gold-dim);
    padding-top:14px;margin-top:4px}
  .mech-row{grid-template-columns:1fr;gap:6px}
  .mech-l{padding-top:0}
}
@media (max-width:760px){
  .arg-row{grid-template-columns:1fr;gap:0}
  .arg-n{padding-top:0;margin-bottom:7px}
  .arg-e{grid-column:1}
  .ba-bad,.ba-good{grid-template-columns:1fr;gap:5px}
  .ba-l{padding-top:0}
  .ba-fix{margin-left:0}
  .ws-h{grid-template-columns:1fr;gap:0}
  .ws-h .m-n{display:block;margin-bottom:7px}
  .ws-steps,.ws-gain{margin-left:0}
  .ws-steps li{padding-left:28px}
  .ws-steps li.ws-last{padding-left:26px}
  .ws-steps li.ws-last::before{left:11px}
  .br-item b::after{opacity:1}
}

/* ---------- shared A* progression (both A* pages) ---------- */
#getting-better .ap-head{border-top:2px solid var(--ink);padding-top:30px}
.ap-lead{font:400 clamp(1.5rem,2.8vw,2.15rem)/1.16 var(--serif);letter-spacing:-.022em;color:var(--ink)}
.ap-sublead{margin-top:14px;font-size:.96rem;line-height:1.65;color:var(--ink-2);max-width:58ch}

.ap-tracks{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut);margin-top:36px;
  border-top:1px solid var(--rule)}
.ap-track{padding:24px 0 26px}
.ap-track+.ap-track{border-left:1px solid var(--rule);padding-left:var(--gut)}
.ap-sub{font:400 1.3rem/1.2 var(--serif);letter-spacing:-.016em;color:var(--ink);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ap-you{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.ap-here .ap-sub{color:var(--gold)}
.ap-stages{margin-top:16px;counter-reset:ap}
.ap-stages li{list-style:none;counter-increment:ap;position:relative;
  padding:12px 0 13px 30px;border-top:1px solid var(--rule)}
.ap-stages li::before{content:counter(ap);position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:.6rem;color:var(--ink-4)}
.ap-stages b{display:block;font:500 .93rem/1.3 var(--sans);color:var(--ink)}
.ap-stages span{display:block;margin-top:5px;font-size:.85rem;line-height:1.55;color:var(--ink-3);max-width:46ch}
.ap-go{margin-top:18px}

.ap-transfer{margin-top:34px;border-top:1px solid var(--rule-2);padding-top:24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gut)}
.ap-tl{grid-column:1/-1;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.ap-t b{display:block;font:500 .93rem/1.35 var(--sans);color:var(--gold)}
.ap-t p{margin-top:8px;font-size:.86rem;line-height:1.6;color:var(--ink-3)}
.ap-t+.ap-t{border-left:1px solid var(--rule);padding-left:var(--gut)}
.ap-caution{grid-column:1/-1;margin-top:22px;font-size:.82rem;line-height:1.6;
  color:var(--ink-4);max-width:70ch}

/* Framing note inside a practice prompt. */
.prac-note{display:block;margin-top:12px;font-family:var(--sans);font-size:.82rem;
  line-height:1.6;color:var(--ink-4);font-style:normal}

@media (max-width:1080px){
  .ap-transfer{grid-template-columns:1fr;gap:22px}
  .ap-t+.ap-t{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:18px}
}
@media (max-width:760px){
  .ap-tracks{grid-template-columns:1fr}
  .ap-track+.ap-track{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
}