/* ═══════════════════════════════════════════════════════════════
   SHARED STYLESHEET — the hub AND every module page load this.
   A module file only needs: <link rel="stylesheet" href="../site.css">
   and it inherits the whole design system automatically.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ═══ v0.4 — "COLOURFUL, AND CLASSY" (2026-07-31) ═══════════════════
     THE FORMULA: colour carries the MEANING, metal carries the STRUCTURE.
     Saturated colour in surfaces, fills, gradients, glows. Gold/copper/
     silver in the LINE WORK — rules, borders, arcs, outlines. Thin,
     precise. Classiness is restraint in layout and line, never absence
     of colour. The old rule (accents "muted + aged... never neon") is
     REVOKED; it is what produced the wall of brown.
     Base ramp is his own study module's, which is the proof it works. */

  /* ink-blue ground — five real steps, not three near-identical ones */
  --paper:#0B0C14;
  --paper-2:#121322;
  --paper-3:#171A2E;
  --paper-4:#1D2140;
  --paper-5:#2A2F55;

  --ink:#E8EAF6;
  --ink-soft:#A6ABCE;
  --ink-faint:#767CA6;

  /* ── METAL — line work ONLY. Never a large fill. ── */
  --gold:#C9A227;
  --copper:#B87333;
  --silver:#C0C6CE;
  --brass:#D4AF6A;
  --metal:var(--gold);                 /* the active metal; themes reassign */
  --rule:color-mix(in srgb,var(--metal) 26%,transparent);
  --rule-lit:color-mix(in srgb,var(--metal) 52%,transparent);

  /* ── COLOUR — meaning ── */
  --cyan:#67E8F9;
  --green:#86EFAC;
  --fuchsia:#F0ABFC;
  --gold-lt:#FDE68A;
  --salmon:#FCA5A5;
  --verm:#FCA5A5;                      /* wrong-turn notes only */

  /* per-course identity. Each course sets --accent + --metal on its scope. */
  --c-foundations:#4C7DF0;             /* navy/medium blue */
  --c-python:#86EFAC;
  --c-method:#67E8F9;
  --c-roadmap:#F0ABFC;
  --accent:var(--c-foundations);
  --glow:var(--gold-lt);               /* one glow per theme, used sparingly */

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --measure:42rem;   /* measured 72-78 real chars/line at the 19.5px base — NOT the shell width */
  --r:12px;                            /* his module's radius — softer than square */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:var(--sans);font-size:19.5px;line-height:1.66;   /* 100% zoom is the design target */
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 62%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb,var(--fuchsia) 8%,transparent) 0%, transparent 55%),
    var(--paper);
  background-attachment:fixed;
}
body::before{ /* fine tooth — keeps large gradients from banding */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}
a{color:var(--accent);text-underline-offset:.22em}
::selection{background:var(--accent);color:var(--paper)}

/* ── scrollbars ────────────────────────────────────────
   The default bar renders WHITE on this page and looks cheap against warm
   paper. Styled for both engines; Firefox gets the standard property, the
   WebKit pseudo-elements cover Chrome/Edge/Safari. */
html{scrollbar-color:var(--rule-lit) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:color-mix(in srgb,var(--paper) 70%,#000)}
::-webkit-scrollbar-thumb{
  background:var(--rule-lit);border-radius:99px;
  border:2px solid color-mix(in srgb,var(--paper) 70%,#000);
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 60%,var(--rule-lit))}
::-webkit-scrollbar-corner{background:transparent}

/* ── WIDTH (owner ruling 2026-08-03) ────────────────────────────────
   The shell was pinned at 1140px, which left ~41% of a 1920px screen as
   empty gutter and is why the site only felt right at 150% browser zoom.
   His words: "why is the real estate so trash... all this space is just
   wasted... and this happens a lot on the website."
   The SHELL widens. BODY PROSE does NOT — see --measure below; past about
   90 characters a line gets measurably harder to track back to. The
   recovered width belongs to visuals, callouts, cards and code. */
.wrap{max-width:min(96rem,93vw);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.25rem)}

/* ⚠ THE CAP THAT MAKES THE WIDENING SAFE — and it was missing on the first cut.
   Widening .wrap without this let running prose reach 180 characters a line at
   1920px (136 at 1280), i.e. the widening made readability WORSE, which is the
   exact trade the rule was written to prevent. An independent verifier measured
   it in the live DOM; it was not visible by reading the CSS.
   Running text is capped at --measure (~82ch). Anything that SHOULD span the
   full shell — grids, cards, tables, figures, the band — opts out below. */
/* No opt-out list: the first cut carried one, and it silently STRIPPED the
   narrower caps that were already correct (.route p was 46ch, .plate p 56ch,
   .pitch p 54ch) — which is how the home page ended up at 144 characters a
   line. Those rules sit later in this file and win on their own. */
/* ⚠ CAPPED IN ch, NOT rem — and that distinction is the whole fix. A rem cap is
   a fixed pixel width, so the SAME 42rem box holds ~96 characters of 19.5px body
   text and ~106 of a 17px note. ch is the width of "0" in the element's OWN font,
   so one number holds across every size. Measured, not assumed — 72ch still let
   the How-to-Learn steps reach 94, so the number is 66ch. */
.view p, .view li, .view .note, .view .standfirst, .view blockquote,
.view figcaption{max-width:min(var(--measure),66ch)}
/* These escaped the rule above on their own specificity. Measured in the live
   DOM at 1920px, not inferred: .step p was 106 chars/line, .signup p 116,
   .qstep .note 98. Narrower caps (.route p 46ch etc.) still win, later in file. */
.view .step p, .view .signup p, .view .signup .fine,
.view .qstep .note, .view .sec > .standfirst{max-width:min(var(--measure),66ch)}
.narrow{max-width:var(--measure)}

/* ── masthead ─────────────────────────────────────────── */
header.top{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(16px) saturate(120%);border-bottom:1px solid var(--rule);
}
.top-in{display:flex;align-items:baseline;gap:2rem;padding:1.05rem 0;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:1.26rem;white-space:nowrap;cursor:pointer}
.brand .sur{color:var(--ink-soft);font-style:italic;font-size:.92em}
nav.main{margin-left:auto;display:flex;gap:1.55rem;flex-wrap:wrap}
nav.main button{
  all:unset;cursor:pointer;font-family:var(--mono);font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  padding-bottom:.3rem;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
nav.main button:hover{color:var(--ink)}
nav.main button[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ── type ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.4rem;display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.5}
h1.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.3rem,6vw,4.3rem);line-height:1.05;letter-spacing:-.015em;
  margin:0 0 1.4rem;max-width:19ch;
}
h1.display em{font-style:italic;color:var(--accent)}
.standfirst{max-width:var(--measure);color:var(--ink-soft);font-size:1.16rem;margin:0 0 1.15rem}
.standfirst strong{color:var(--ink);font-weight:500}

.sec{padding:clamp(2.75rem,6vw,4.5rem) 0}
.sec-head{display:flex;align-items:baseline;gap:1.15rem;margin-bottom:2.2rem}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,3.2vw,2.2rem);margin:0}
.sec-head .idx{font-family:var(--mono);font-size:.80rem;color:var(--accent);letter-spacing:.16em}
.sec-head::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── the shelf: courses ───────────────────────────────── */
.shelf{display:grid;gap:1.35rem;grid-template-columns:1fr}
@media(min-width:820px){.shelf{grid-template-columns:repeat(2,1fr)}}
.plate{
  all:unset;cursor:pointer;display:block;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r);padding:0 0 1.45rem;
  background-color:var(--paper-3);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent 42%);
  box-shadow:0 1px 0 color-mix(in srgb,var(--metal) 18%,transparent) inset, 0 18px 40px -26px #000;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
/* the coloured cap — his idea: the top quarter of the card carries the course
   colour, with a polka-dot tooth over it. "Reads like academia." */
/* v0.5 — the coloured cap is now a REAL ELEMENT (.cap) wrapping the kicker
   + the title, not a ::before pinned to 26% of the card height. The fixed
   percentage cut straight through "Field Foundations" (proven by render:
   band bottom 421.4px, title 403.4-453.9px) and would have broken again
   the moment the title grew or wrapped. A content-sized cap cannot. */
.plate .cap{
  background-color:color-mix(in srgb,var(--accent) 82%,var(--paper-4));
  background-image:radial-gradient(color-mix(in srgb,#fff 30%,transparent) 1.4px,transparent 1.5px);
  background-size:14px 14px;
  border-bottom:1px solid var(--rule-lit);
  padding-block:0 1.05rem;
}
.plate > *{position:relative;padding-inline:1.7rem}
.plate .kicker{padding-top:1.15rem;color:color-mix(in srgb,#fff 78%,var(--accent))}
.plate::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--metal),transparent 70%);
  transform:scaleX(.34);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.plate:hover{
  border-color:var(--rule-lit);transform:translateY(-3px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--metal) 34%,transparent) inset, 0 26px 52px -28px #000,
             0 0 40px -18px color-mix(in srgb,var(--accent) 60%,transparent);
}
.plate:hover::after{transform:scaleX(1)}
.plate[disabled]{cursor:default;opacity:.5}
.plate[disabled]:hover{transform:none;border-color:var(--rule)}
.plate[disabled]:hover .cap{opacity:.9}
.kicker{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;justify-content:space-between;gap:1rem;
}
.plate h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;margin:.55rem 0 0;letter-spacing:-.01em;line-height:1.15}
.plate p{margin:1.15rem 0 0;color:var(--ink-soft);font-size:1rem;max-width:56ch}
.plate .meta{
  margin-top:1.25rem;padding-top:.85rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.78rem;color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:1rem;
}
.tag-live{color:var(--accent)}
.tag-soon{color:var(--ink-faint)}
/* v0.5 — inside the coloured cap the tag was accent-on-accent (blue on blue)
   and effectively unreadable; the owner flagged it unprompted on review.
   On the cap it goes to white, which measures ~4.9:1 against the band. */
.plate .cap .tag-live{color:#fff}
.plate .cap .tag-soon{color:color-mix(in srgb,#fff 82%,var(--accent))}

/* ── breadcrumb ───────────────────────────────────────── */
.crumb{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:2rem 0 0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
}
.crumb button{all:unset;cursor:pointer;color:var(--accent)}
.crumb button:hover{text-decoration:underline}

/* ── clusters ─────────────────────────────────────────── */
.pitch{
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;
  padding:1.6rem .8rem;border-top:1px solid var(--rule);cursor:pointer;
  transition:background .3s,padding .3s;
}
.pitch:last-of-type{border-bottom:1px solid var(--rule)}
.pitch:hover{background:var(--paper-2)}
.pitch[data-locked]{cursor:default;opacity:.45}
.pitch[data-locked]:hover{background:none}
.pitch .rn{font-family:var(--mono);font-size:.82rem;color:var(--accent);letter-spacing:.1em;padding-top:.3rem;min-width:3.2rem}
.pitch h4{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 .35rem}
.pitch p{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:54ch}
.pitch .st{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.6rem;color:var(--ink-faint)}

/* ── module rows ──────────────────────────────────────── */
.mod{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.35rem;align-items:baseline;
  padding:1.1rem .8rem;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .25s,padding .25s;
}
.mod:hover{background:var(--paper-2);padding-left:1.4rem}
.mod[aria-disabled="true"]{opacity:.42;pointer-events:none}
.mod .mn{font-family:var(--mono);font-size:.85rem;color:var(--accent);letter-spacing:.06em}
.mod .mt{font-family:var(--serif);font-size:1.32rem}
.mod .sub{display:block;font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);margin-top:.28rem}
.mod .mx{font-family:var(--mono);font-size:.76rem;color:var(--ink-faint);letter-spacing:.08em;white-space:nowrap}

/* ── THE WRONG TURN — reserved element, vermillion only ── */
.wrongturn{
  border-left:2px solid var(--verm);padding-left:1.15rem;
  font-family:var(--mono);font-size:.88rem;line-height:1.62;color:#E0A493;
}
.wrongturn b{
  display:block;color:var(--verm);letter-spacing:.16em;text-transform:uppercase;
  font-size:.72rem;margin-bottom:.55rem;font-weight:600;
}

.note{
  font-family:var(--mono);font-size:.82rem;color:var(--ink-faint);
  border-left:2px solid var(--rule);padding-left:1rem;line-height:1.6;margin:1.6rem 0 0;
}
.ghost{
  border:1px dashed var(--rule);padding:2.4rem 1.7rem;text-align:center;
  font-family:var(--mono);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}

footer{border-top:1px solid var(--rule);margin-top:4.5rem;padding:2.4rem 0 4rem}
footer .fin{
  font-family:var(--mono);font-size:.78rem;color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;letter-spacing:.1em;
}

.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

/* ═══ FEEDBACK WIDGET ══════════════════════════════════════════════════
   Written 2026-08-01 (v0.5). The v0.4 build shipped this widget's markup
   and its JS with NO CSS in either stylesheet, so every element fell back
   to Chrome defaults — Arial buttons on rgb(239,239,239), a 182px
   textarea. The owner caught it on review: "this looks like 2002."
   Proven at the time by computed style, not by reading the source; the
   harness missed it because it only ever asked whether things EXISTED.
   THE FORMULA applies: colour carries the meaning (the chosen type, the
   primary action), metal carries the structure (every rule and outline). */

.feedback{
  border:1px solid var(--rule);border-radius:var(--r);
  background-color:var(--paper-2);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 38%);
  padding:1.6rem 1.7rem 1.8rem;margin:2.5rem 0 0;
}
.feedback > p{color:var(--ink-soft);font-size:.97rem;margin:.2rem 0 1.15rem;max-width:60ch}

/* the three type cards — colour marks the CHOSEN one */
.fb-types{display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 1.5rem}
.fb-type{
  all:unset;box-sizing:border-box;cursor:pointer;
  flex:1 1 13rem;min-width:12rem;
  display:flex;flex-direction:column;gap:.25rem;
  padding:.85rem 1rem;border-radius:calc(var(--r) - 4px);
  border:1px solid var(--rule);background:var(--paper-3);
  transition:border-color .25s,background .25s,transform .25s,box-shadow .25s;
}
.fb-type b{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink)}
.fb-type span{font-family:var(--sans);font-size:.82rem;color:var(--ink-faint);line-height:1.45}
.fb-type:hover{border-color:var(--rule-lit);transform:translateY(-2px)}
.fb-type:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fb-type[aria-checked="true"]{
  border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  background-color:color-mix(in srgb,var(--accent) 17%,var(--paper-3));
  box-shadow:0 0 26px -12px color-mix(in srgb,var(--accent) 75%,transparent);
}
.fb-type[aria-checked="true"] b{color:#fff}
.fb-type[aria-checked="true"] span{color:color-mix(in srgb,#fff 76%,var(--accent))}

/* the message field */
.fb-label{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem;
}
#fb-text{
  display:block;width:100%;box-sizing:border-box;
  font-family:var(--sans);font-size:.95rem;line-height:1.6;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:calc(var(--r) - 4px);
  padding:.85rem 1rem;resize:vertical;min-height:7.5rem;
  transition:border-color .25s,box-shadow .25s;
}
#fb-text::placeholder{color:var(--ink-faint)}
#fb-text:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.fb-where{font-family:var(--mono);font-size:.76rem;color:var(--ink-faint);margin:.7rem 0 0;min-height:1.2em}

/* actions — the primary carries colour, the secondary carries only line */
.fb-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.15rem 0 .9rem}
.fb-send,.fb-copy{
  all:unset;cursor:pointer;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  padding:.62em 1.25em;border-radius:calc(var(--r) - 6px);
  transition:background .25s,border-color .25s,opacity .25s,color .25s;
}
.fb-send{
  background:color-mix(in srgb,var(--accent) 88%,var(--paper));color:#fff;
  border:1px solid color-mix(in srgb,var(--accent) 100%,transparent);
}
.fb-send:hover:not([disabled]){background:var(--accent);box-shadow:0 0 24px -10px var(--accent)}
.fb-copy{background:transparent;color:var(--ink-soft);border:1px solid var(--rule-lit)}
.fb-copy:hover:not([disabled]){color:var(--ink);border-color:var(--metal)}
.fb-send[disabled],.fb-copy[disabled]{cursor:default;opacity:.42}
.fb-send:focus-visible,.fb-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.feedback .fine{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);line-height:1.7;margin:0}

@media(max-width:640px){ .fb-type{flex:1 1 100%} }

/* v0.5 — the mailing list is deliberately COLLECT-ONLY and NOT connected
   (G2: no accounts, no database, no backend; the provider is still the
   owner's open decision). This styles the two honest outcomes so the state
   reads as a considered answer rather than a broken form. It stores nothing. */
.signup-msg{
  margin:.85rem 0 0;padding:.7rem .9rem;border-radius:calc(var(--r) - 6px);
  border-left:2px solid var(--rule-lit);background:color-mix(in srgb,var(--paper) 60%,transparent);
}
.signup-msg[data-state="pending"]{color:var(--ink-soft)}
.signup-msg[data-state="error"]{color:var(--verm);border-left-color:var(--verm)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #curtain{display:none!important}
}


/* ═══ ROUTER PANELS — the homepage is a signpost, not a catalogue ═══ */
.routes{display:grid;gap:1.15rem;grid-template-columns:1fr;margin-top:2.6rem}
.route{
  all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(1.2rem,3vw,2.4rem);align-items:center;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.5rem,3.4vw,2.3rem) clamp(1.4rem,3vw,2.2rem);
  background-color:var(--paper-3);
  background-image:linear-gradient(100deg,color-mix(in srgb,var(--accent) 26%,transparent),transparent 58%);
  box-shadow:inset 3px 0 0 var(--metal), 0 16px 36px -26px #000;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.route::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(90% 140% at 0% 50%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%);
}
.route:hover{transform:translateX(5px);border-color:var(--rule-lit);box-shadow:inset 5px 0 0 var(--metal),0 24px 44px -26px #000,0 0 44px -20px color-mix(in srgb,var(--accent) 55%,transparent)}
.route:hover::before{opacity:1}
.route .rnum{
  font-family:var(--mono);font-size:1.05rem;color:var(--accent);letter-spacing:.08em;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;flex:none;
}
.route h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 .3rem;letter-spacing:-.015em}
.route p{margin:0;color:var(--ink-soft);font-size:1.02rem;max-width:46ch}
.route .arw{font-family:var(--mono);font-size:1.5rem;color:var(--ink-faint);transition:.35s}
.route:hover .arw{color:var(--accent);transform:translateX(5px)}
@media(max-width:620px){
  .route{grid-template-columns:auto 1fr;gap:1.1rem}
  .route .arw{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   v0.3 — PATTERN INTERRUPTS
   Added 2026-07-31 after the owner's walkthrough review: "it's a wall
   of text, the same colour as the background... we need to break
   patterns more." These are the devices a course surface uses so a
   reader's eye has somewhere to land every screenful.

   Rule of use: a page that runs more than ~2 screens WITHOUT one of
   these is the defect this section exists to fix.
   ═══════════════════════════════════════════════════════════════ */

/* ── BAND — a tinted full-bleed stripe that interrupts the column ── */
.band{
  position:relative;padding:clamp(2.2rem,5vw,3.4rem) 0;margin:clamp(2.4rem,5vw,3.6rem) 0;
  background-color:var(--paper-2);
  background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 9%,transparent));
  border-top:1px solid var(--rule-lit);border-bottom:1px solid var(--rule-lit);
}
.band::before{ /* full-bleed even inside a max-width wrapper */
  content:"";position:absolute;inset:0 -50vw;z-index:-1;background:inherit;
  border-top:inherit;border-bottom:inherit;
}
.band-accent{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 13%,var(--paper-2)),var(--paper-2));
}

/* ── PULL-QUOTE — the one sentence that matters, at size ── */
.pull{
  margin:clamp(2rem,4vw,3rem) 0;padding:clamp(1.2rem,3vw,1.9rem) 0 clamp(1.2rem,3vw,1.9rem) clamp(1.2rem,3vw,2rem);
  border-left:3px solid var(--accent);
  font-family:var(--serif);font-size:clamp(1.3rem,2.7vw,1.75rem);line-height:1.42;
  color:var(--ink);letter-spacing:-.01em;
  background-color:color-mix(in srgb,var(--accent) 7%,var(--paper-2));
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%);
}
.pull cite{display:block;margin-top:.7rem;font:400 .8rem/1.4 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-style:normal}

/* ── CALLOUT — three flavours, colour-coded and consistent ── */
.callout{
  margin:1.7rem 0;padding:1.15rem 1.35rem;border-radius:3px;
  border:1px solid var(--rule-lit);border-left:3px solid var(--accent);
  background:var(--paper-3);font-size:.99rem;
}
.callout > :first-child{margin-top:0}
.callout > :last-child{margin-bottom:0}
.callout .lab{
  display:block;font:600 .72rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.55rem;
}
.callout.key{border-left-color:var(--accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--paper-3)),var(--paper-3))}
.callout.warn{border-left-color:var(--verm);background:color-mix(in srgb,var(--verm) 9%,var(--paper-3))}
.callout.warn .lab{color:var(--verm)}
.callout.aside{border-left-color:var(--ink-faint);background:var(--paper-2)}
.callout.aside .lab{color:var(--ink-faint)}

/* ── CHIP — a named concept, inline, so terms stop being flat text ── */
.chip{
  display:inline-block;padding:.14em .6em;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,var(--paper-3));
  font:500 .86em/1.5 var(--mono);color:var(--ink);white-space:nowrap;
}

/* ── STAT — a real number, at size, because numbers stop the eye ── */
.stat{
  display:grid;gap:.3rem;padding:1.1rem 1.3rem;border:1px solid var(--rule-lit);
  background:var(--paper-3);border-top:2px solid var(--accent);
}
.stat b{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);font-weight:400;color:var(--ink);line-height:1}
.stat span{font:400 .82rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.statrow{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:700px){.statrow{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}

/* ── SECTION MARKER — a numbered rule that resets the eye ── */
.marker{
  display:flex;align-items:center;gap:1rem;margin:clamp(2.6rem,5vw,3.8rem) 0 1.4rem;
}
.marker .n{
  font:400 .8rem/1 var(--mono);letter-spacing:.14em;color:var(--paper);
  background:var(--accent);padding:.5em .8em;border-radius:2px;flex:none;
}
.marker h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.8vw,1.75rem);margin:0}
.marker::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--rule-lit),transparent)}

/* ── rows: give hovers a real surface, not a 6-point shift ── */
.pitch:hover{background:var(--paper-3)}
.mod:hover{background:var(--paper-3);padding-left:1.4rem}

/* ═══════════════════════════════════════════════════════════════
   v0.4 — COLOUR + METAL, applied
   "Stop being so coy about it." Everything below exists to put colour
   on the page AT REST and metal on the lines around it.
   ═══════════════════════════════════════════════════════════════ */

/* ── PARTS READ AS BUTTONS, each in its own colour code ────────── */
.pitch{
  position:relative;border:1px solid var(--rule);border-radius:var(--r);
  border-bottom:1px solid var(--rule);margin:.85rem 0;padding:1.35rem 1.5rem;
  background-color:var(--paper-3);
  background-image:linear-gradient(115deg,color-mix(in srgb,var(--pc,var(--accent)) 24%,transparent),transparent 60%);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--pc,var(--accent)) 85%,var(--metal)), 0 14px 30px -26px #000;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.pitch:last-of-type{border-bottom:1px solid var(--rule)}
.pitch:hover{
  background-color:var(--paper-4);transform:translateX(4px);border-color:var(--rule-lit);
  box-shadow:inset 4px 0 0 var(--pc,var(--accent)), 0 20px 40px -26px #000,
             0 0 38px -20px color-mix(in srgb,var(--pc,var(--accent)) 55%,transparent);
}
.pitch .rn{color:var(--pc,var(--accent))}
.pitch .st{color:color-mix(in srgb,var(--pc,var(--accent)) 80%,var(--ink))}
/* six colour codes, cycled by position — a glance tells you which part */
.pitch:nth-of-type(6n+1){--pc:var(--c-foundations)}
.pitch:nth-of-type(6n+2){--pc:var(--cyan)}
.pitch:nth-of-type(6n+3){--pc:var(--green)}
.pitch:nth-of-type(6n+4){--pc:var(--gold-lt)}
.pitch:nth-of-type(6n+5){--pc:var(--fuchsia)}
.pitch:nth-of-type(6n+6){--pc:var(--salmon)}

/* ── module rows ── */
.mod{border-bottom:1px solid var(--rule);border-radius:8px;transition:.25s}
.mod:hover{background:var(--paper-3);padding-left:1.4rem;box-shadow:inset 3px 0 0 var(--metal)}
.mod .mn{color:var(--accent)}

/* ── EVERY PAGE ITS OWN GROUND — moving between pages is itself an
      interrupt. "On a new page, have a new background." ── */
#v-home    {--vtint:var(--c-foundations)}
#v-courses {--vtint:var(--cyan)}
#v-course  {--vtint:var(--accent)}
#v-cluster {--vtint:var(--green)}
#v-before  {--vtint:var(--gold-lt)}
#v-quiz    {--vtint:var(--fuchsia)}
#v-howto   {--vtint:var(--salmon)}
#v-about   {--vtint:var(--silver)}
#v-contact {--vtint:var(--copper)}
.view{position:relative}
.view::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(130% 90% at 50% -20%,
    color-mix(in srgb,var(--vtint,var(--accent)) 15%,transparent), transparent 60%);
}

/* ── metal rules on the section furniture ── */
.sec-head::after{background:linear-gradient(90deg,var(--rule-lit),transparent)}
.sec-head .idx{color:var(--metal);letter-spacing:.18em}
.eyebrow{color:var(--metal)}
.eyebrow::after{background:linear-gradient(90deg,var(--metal),transparent);opacity:.55}
nav.main button[aria-current="true"]{color:var(--accent);border-bottom-color:var(--metal)}
header.top{border-bottom:1px solid var(--rule)}
.brand{color:var(--ink)}
.brand .sur{color:var(--metal)}

/* ── the interrupt toolkit, re-cut for v0.4 ── */
.band{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background-color:var(--paper-3);
  background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent));
}
.pull{
  border-left:3px solid var(--metal);border-radius:0 var(--r) var(--r) 0;
  background-color:color-mix(in srgb,var(--accent) 12%,var(--paper-3));
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 74%);
}
.pull cite{color:var(--metal)}
.callout{border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:var(--r);background:var(--paper-3)}
.callout.key{border-left-color:var(--gold-lt);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold-lt) 12%,var(--paper-3)),var(--paper-3))}
.callout.key .lab{color:var(--gold-lt)}
.callout.warn{border-left-color:var(--salmon);
  background:linear-gradient(90deg,color-mix(in srgb,var(--salmon) 12%,var(--paper-3)),var(--paper-3))}
.callout.warn .lab{color:var(--salmon)}
.callout.aside{border-left-color:var(--cyan);
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 10%,var(--paper-3)),var(--paper-3))}
.callout.aside .lab{color:var(--cyan)}
.chip{
  border:1px solid var(--rule-lit);border-radius:99px;
  background:color-mix(in srgb,var(--accent) 20%,var(--paper-3));color:var(--ink);
}
.stat{
  border:1px solid var(--rule);border-radius:var(--r);border-top:2px solid var(--metal);
  background-color:var(--paper-3);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%);
}
.stat b{color:var(--glow);text-shadow:0 0 22px color-mix(in srgb,var(--glow) 55%,transparent)}
.stat span{color:var(--ink-faint)}
.marker .n{background:var(--accent);color:#080910;border-radius:6px;
  box-shadow:0 0 0 1px var(--rule-lit)}
.marker::after{background:linear-gradient(90deg,var(--rule-lit),transparent)}

/* ── one glow accent, used sparingly ── */
.glow{color:var(--glow);text-shadow:0 0 26px color-mix(in srgb,var(--glow) 60%,transparent)}

/* ── scrollbars, on the new ground ── */
html{scrollbar-color:color-mix(in srgb,var(--metal) 55%,transparent) transparent}
::-webkit-scrollbar-track{background:#07080E}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--metal) 50%,var(--paper-4));border:2px solid #07080E}
::-webkit-scrollbar-thumb:hover{background:var(--metal)}