/* =====================================================================
     Kautuki v2.1 — "exam paper" edition.
     One continuous red margin rule runs the length of the page; sections
     are numbered like questions, verification reads as a marking scheme,
     and the low-bandwidth story is chalk on a blackboard. Mobile-first:
     no fixed widths, fluid type via clamp(), tiny JS (slider, scroll-spy,
     gallery lightbox, form post).
     ===================================================================== */
  :root {
    --paper: #FDF8F0;
    --paper-deep: #F6EFE2;
    --ink: #0F2557;
    --ink-soft: #41557F;
    --ink-faint: #5A6B8C;
    --amber: #F5A623;
    --amber-deep: #B87508;
    --red: #C93B2E;
    --rule: rgba(15, 37, 87, .10);
    --margin-rule: rgba(201, 59, 46, .38);
    --m: clamp(38px, 7vw, 84px);       /* width of the left margin      */
    --gutter: clamp(18px, 4vw, 56px);  /* breathing room after the rule */
    --hdr-h: 128px;                    /* measured by JS, used for anchors */
    --desk: #EAE0CC;                   /* the desk the sheet lies on        */
    --bleed-r: clamp(0px, calc(4vw - 16px), 32px);     /* wide blocks push into the right padding */
    --bleed-l: clamp(0px, calc(var(--gutter) - 16px), 40px); /* ...and toward the margin rule  */
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: radial-gradient(120% 60% at 50% 0%, #F1E8D7 0%, var(--desk) 70%, #E3D8C2 100%) fixed;
    color: var(--ink);
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: var(--ink); text-decoration-color: rgba(15,37,87,.3); text-underline-offset: 3px; }
  a:hover { color: var(--amber-deep); }
  img, svg { max-width: 100%; }
  h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
  ::selection { background: var(--amber); color: var(--ink); }
  [hidden] { display: none !important; }
  .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .script { font-family: 'Caveat', cursive; }
  .redpen  { font-family: 'Caveat', cursive; color: var(--red); }

  /* ---- the paper: continuous margin rule -------------------------- */
  .paper {
    position: relative; max-width: 1160px; margin: 0 auto; min-height: 100vh;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(15,37,87,.07), 0 30px 70px -34px rgba(15,37,87,.45), 0 2px 0 rgba(255,255,255,.6) inset;
  }
  .paper::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: var(--m);
    width: 2px; background: var(--margin-rule);
  }
  section, footer { position: relative; }
  section[id] { scroll-margin-top: calc(var(--hdr-h) + 10px); }
  .body-cell { padding-left: calc(var(--m) + var(--gutter)); padding-right: clamp(16px, 4vw, 48px); }

  /* margin annotations sit in the red-ruled margin */
  .marginal {
    position: absolute; left: 0; width: var(--m);
    text-align: center; color: var(--red);
    font-family: 'Caveat', cursive; font-weight: 700;
    font-size: clamp(17px, 2.4vw, 26px); line-height: 1.1;
    white-space: nowrap; overflow: hidden;
  }

  /* ---- stamp buttons (rectangular, hard shadow — not pills) -------- */
  .stamp {
    display: inline-block; background: var(--amber); color: var(--ink);
    border: 2px solid var(--ink); border-radius: 3px;
    font-weight: 800; font-size: 16px; letter-spacing: .01em;
    padding: 13px 22px; text-decoration: none;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .stamp:hover { color: var(--ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
  .stamp.ghost { background: #fff; }
  .stamp.chalk { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 rgba(253,248,240,.4); }
  .stamp.chalk:hover { color: var(--paper); box-shadow: 2px 2px 0 rgba(253,248,240,.4); }

  .hl { background: linear-gradient(transparent 55%, rgba(245,166,35,.55) 55% 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* ---- exam header (locked to the top of the viewport) ------------- */
  .hdr {
    position: sticky; top: 0; z-index: 40;
    background: var(--paper);
    padding-top: clamp(8px, 1.2vw, 12px);
  }
  .hdr::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: var(--m);
    width: 2px; background: var(--margin-rule);
  }
  .hdr::after, .trust::before, .trust::after, footer::before {
    content: ''; position: absolute; left: var(--m); right: 0; height: 2px; background: var(--ink);
  }
  .hdr::after, .trust::after { bottom: 0; }
  .trust::before, footer::before { top: 0; }
  .hdr-top { display: flex; flex-wrap: nowrap; gap: 8px 22px; align-items: center; padding-bottom: 6px; }
  .logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
  .logo img { display: block; height: clamp(46px, 4.8vw, 64px); width: auto; }
  .hdr-sub {
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint); line-height: 1.5; white-space: nowrap;
    padding-left: 18px; border-left: 2px solid var(--margin-rule);
  }
  .hdr-cta { margin-left: auto; padding: 10px 16px; font-size: 14.5px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
  /* the question index doubles as the nav: each entry is a small stamp */
  .idx-wrap { position: relative; border-top: 1px solid var(--rule); }
  .idx {
    display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
    padding: 9px 0 12px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .idx::-webkit-scrollbar { display: none; }
  /* soft edges hint that the row scrolls when it cannot fit */
  .idx-wrap::before, .idx-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none;
    opacity: 0; transition: opacity .15s ease; z-index: 1;
  }
  .idx-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper), rgba(253,248,240,0)); }
  .idx-wrap::after { right: 0; background: linear-gradient(270deg, var(--paper), rgba(253,248,240,0)); }
  .idx-wrap.more-r::after, .idx-wrap.more-l::before { opacity: 1; }
  .idx a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff;
    font-size: 13.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; line-height: 1.2;
    white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .idx a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-faint); flex: 0 0 auto; }
  .idx a:hover { color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
  .idx a.on { background: var(--amber); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
  .idx a.on::before { background: var(--red); border-color: var(--red); }

  /* ---- hero: 3-banner slider ---------------------------------------- */
  .hero { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
  .slider { position: relative; margin-left: calc(-1 * var(--bleed-l)); margin-right: calc(-1 * var(--bleed-r)); }
  .slides {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border: 2px solid var(--ink); border-radius: 3px; background: #fff;
    box-shadow: 6px 6px 0 rgba(245,166,35,.5);
  }
  .slides::-webkit-scrollbar { display: none; }
  .slide {
    flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
    display: grid; grid-template-columns: 1.2fr .8fr;
    gap: clamp(18px, 3vw, 44px); align-items: center;
    padding: clamp(24px, 4vw, 48px);
  }
  .slide h1, .slide h2 { font-size: clamp(27px, 3.8vw, 48px); font-weight: 900; margin: 0 0 12px; }
  .slide .dim { color: var(--amber-deep); }
  .slide .sub { color: var(--ink-soft); margin: 0 0 22px; max-width: 48ch; font-size: clamp(15px, 1.3vw, 17.5px); }
  .slide .go { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
  .slide .go .plain { font-weight: 700; }
  .slide .art { display: flex; justify-content: center; }
  .slide .art svg { width: 100%; max-width: 340px; height: auto; }
  .slide .art img { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 3px; }
  .dots { display: flex; gap: 10px; justify-content: center; padding: 16px 0 0; }
  .dots button {
    width: 13px; height: 13px; padding: 0; cursor: pointer;
    border: 2px solid var(--ink); border-radius: 3px; background: transparent;
  }
  .dots button.on { background: var(--amber); }
  .ticks { display: flex; flex-wrap: wrap; gap: 7px 26px; padding: 0; margin: 0; list-style: none; font-weight: 600; color: var(--ink-soft); font-size: 15px; }
  .ticks .redpen { font-size: 21px; line-height: 1; margin-right: 7px; }
  /* the row above is for short items. Whole-sentence ticks stack instead, and
     the text hangs beside the tick rather than wrapping back underneath it. */
  .abt-ticks .ticks { flex-direction: column; gap: 9px; max-width: 82ch; }
  .abt-ticks .ticks li { display: flex; align-items: flex-start; }
  .abt-ticks .ticks .redpen { margin-top: -2px; flex: 0 0 auto; }

  /* ---- trust banner (replaces the old "general instructions") ------- */
  .trust { padding-top: clamp(22px, 3vw, 32px); padding-bottom: clamp(22px, 3vw, 32px); }
  .trust .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
  .trust-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 28px; }
  .trust-row li { display: flex; gap: 12px; align-items: flex-start; }
  .trust-row .ti {
    flex: 0 0 40px; height: 40px; display: grid; place-items: center;
    border: 2px solid var(--ink); border-radius: 3px; background: #fff;
    box-shadow: 3px 3px 0 rgba(245,166,35,.55);
  }
  .trust-row .ti svg { width: 21px; height: 21px; }
  .trust-row b { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.25; margin-bottom: 3px; }
  .trust-row .d { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

  /* ---- question sections ------------------------------------------- */
  .q { padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
  .q-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 8px; }
  .q-head h2 { font-size: clamp(27px, 3.6vw, 44px); font-weight: 900; }
  .marks { font-size: 13.5px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
  .q-kicker { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-soft); max-width: 62ch; margin: 0 0 28px; }
  .q-cta { margin: 26px 0 8px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
  .q-cta .plain { font-weight: 700; }

  /* answer sheet steps */
  .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 720px; }
  .steps li {
    position: relative; padding: 16px 44px 16px 66px;
    border-bottom: 1px solid var(--rule);
  }
  .steps li:first-child { border-top: 1px solid var(--rule); }
  .steps .n {
    position: absolute; left: 0; top: 14px;
    font-family: 'Fraunces', serif; font-weight: 900; font-size: 32px; color: var(--amber-deep);
  }
  .steps h3 { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
  .steps p { margin: 0; color: var(--ink-soft); }
  .steps .redpen { position: absolute; right: 2px; top: 16px; font-size: 24px; }

  /* class formats — laid out like the options of an MCQ */
  .formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; margin: 0 0 30px; }
  .fmt {
    position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 3px;
    padding: 18px 18px 16px; box-shadow: 4px 4px 0 rgba(245,166,35,.45);
    /* a column, so the closing `.best` line sits on one baseline across the row
       however much body copy each card carries */
    display: flex; flex-direction: column;
  }
  .fmt .opt { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; color: var(--red); line-height: 1; }
  .fmt .meta { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin: 10px 0 2px; }
  .fmt h3 { font-size: 19.5px; font-weight: 700; }
  /* an inbox address is one long unbreakable token: let it break inside the
     card rather than run past the border on a narrow column */
  .fmt .mail {
    display: block; margin-top: 3px; font-weight: 700; color: var(--red);
    font-size: clamp(13.5px, 1.2vw, 15.5px); overflow-wrap: anywhere;
    text-decoration-color: rgba(201, 59, 46, .35);
  }
  .fmt .mail:hover { color: var(--amber-deep); }
  .fmt p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }
  .fmt .best { margin-top: auto; padding-top: 10px; font-size: 13.5px; color: var(--ink); }
  .fmt .best b { color: var(--red); font-family: 'Caveat', cursive; font-size: 17px; font-weight: 700; margin-right: 4px; }
  .fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px 44px; align-items: start; max-width: 960px; }
  .fees h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
  .fees .ticks { flex-direction: column; gap: 8px; }
  .fees .ticks li { display: flex; align-items: flex-start; }
  .fees .ticks .redpen { margin-top: -2px; }
  .rough {
    border: 2px dashed var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.6);
    padding: 16px 20px 14px;
  }
  .rough .rk { font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: var(--red); margin: 0 0 6px; }
  .rough table { width: 100%; border-collapse: collapse; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 600; }
  .rough td { padding: 5px 0; border-bottom: 1px dotted rgba(15,37,87,.3); vertical-align: baseline; }
  .rough td:last-child { text-align: right; white-space: nowrap; }
  .rough tr.sub td { font-size: 16px; color: var(--ink-soft); font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; border-bottom: 0; padding-top: 14px; text-align: left; }
  .rough tr.tot td { border-top: 2px solid var(--ink); border-bottom: 0; color: var(--amber-deep); font-size: 25px; font-weight: 700; }
  .rough .fine { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: var(--ink-faint); margin: 10px 0 0; }

  /* ---- study kit (learning on your own) ----------------------------- */
  .kit {
    list-style: none; margin: 0; padding: 0; max-width: 980px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 26px;
  }
  /* a set of four strands one card on its own row in the 3-column grid, so it
     steps 4 > 2 > 1 at the breakpoints below. Never 3: that orphans the fourth.
     (auto-fit is no good here — it would settle on 3 whenever 3 happen to fit.) */
  .kit.four { grid-template-columns: repeat(4, 1fr); }
  .kit li {
    position: relative; background: #fff; border: 1px solid rgba(15,37,87,.14); border-radius: 3px;
    padding: 18px 18px 16px; box-shadow: 0 16px 34px -22px rgba(15,37,87,.5);
  }
  .kit li.star { border: 2px solid var(--ink); box-shadow: 5px 5px 0 rgba(245,166,35,.5); }
  .kit .ki {
    width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px;
    border: 2px solid var(--ink); border-radius: 3px; background: var(--paper);
    box-shadow: 3px 3px 0 rgba(245,166,35,.55);
  }
  .kit .ki svg { width: 21px; height: 21px; }
  .kit .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); display: inline-block; }
  .kit h3 { font-size: 18.5px; font-weight: 700; margin: 2px 0 4px; }
  .kit p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
  .kit-note { margin: 24px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 66ch; }

  /* ---- why Kautuki: the problem struck out, the fix ticked in -------- */
  .whys { list-style: none; margin: 0; padding: 0; max-width: 900px; }
  .whys li { position: relative; padding: 20px 0 22px 62px; border-bottom: 1px solid var(--rule); }
  .whys li:first-child { border-top: 2px solid var(--ink); }
  .whys .pn {
    position: absolute; left: 0; top: 18px;
    font-family: 'Fraunces', serif; font-weight: 900; font-size: 30px; color: var(--ink-faint);
  }
  .whys h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px; color: var(--ink-faint); }
  .whys h3 .strike {
    background-image: linear-gradient(transparent 47%, var(--red) 47% 53%, transparent 53%);
    background-repeat: no-repeat; background-size: 100% 100%;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .whys .prob { margin: 0 0 12px; color: var(--ink-faint); font-size: 15px; max-width: 64ch; }
  .whys .fix { display: flex; gap: 10px; margin: 0; align-items: flex-start; max-width: 64ch; font-size: 16px; }
  .whys .fix .redpen { font-size: 22px; line-height: 1.1; flex: 0 0 auto; }
  .whys .fix b { color: var(--red); font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; margin-right: 5px; }

  /* ---- included with every class (Q2) -------------------------------- */
  .incl {
    max-width: 960px; margin: 0 0 28px; padding: 14px 18px 16px;
    border: 1.5px solid var(--ink); border-radius: 3px; background: rgba(245, 166, 35, .10);
  }
  .incl .rk { font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: var(--red); margin: 0 0 8px; }
  .incl .ticks { gap: 8px 24px; font-size: 14.5px; }
  .incl .ticks li { display: flex; align-items: flex-start; }
  .incl .ticks .redpen { margin-top: -2px; }

  /* ---- comparison table ---------------------------------------------- */
  .cmp-wrap { max-width: 900px; }
  .cmp { width: 100%; border-collapse: collapse; }
  .cmp th, .cmp td { text-align: left; vertical-align: top; padding: 12px 14px; font-size: 15px; }
  .cmp thead th {
    font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); border-bottom: 2px solid var(--ink); padding-bottom: 8px;
  }
  .cmp thead .us {
    background: var(--amber); color: var(--ink); border: 2px solid var(--ink); border-bottom: 0;
    font-family: 'Fraunces', serif; font-size: 17px; font-weight: 900; letter-spacing: .01em; text-transform: none;
  }
  .cmp .rl { width: 24%; font-weight: 800; color: var(--ink); }
  .cmp .us {
    width: 40%; font-weight: 600;
    background: rgba(245, 166, 35, .12); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink);
  }
  .cmp .them { width: 36%; color: var(--ink-faint); }
  .cmp tbody tr { border-bottom: 1px solid var(--rule); }
  .cmp tbody tr:last-child .us { border-bottom: 2px solid var(--ink); }
  .cmp .us .redpen { font-size: 19px; margin-right: 7px; }
  .cmp-note { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-faint); max-width: 68ch; }

  /* ---- outcome arc (what changes, and by when) ----------------------- */
  .arc {
    list-style: none; margin: 0; padding: 0; max-width: 980px; position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 26px;
  }
  .arc::before { content: ''; position: absolute; left: 8px; right: 8px; top: 10px; border-top: 2px dashed var(--margin-rule); }
  .arc li { position: relative; padding-top: 36px; }
  .arc li::before {
    content: ''; position: absolute; top: 2px; left: 0; width: 17px; height: 17px; border-radius: 50%;
    background: var(--paper); border: 2.5px solid var(--red); box-sizing: border-box;
  }
  .arc li:last-child::before { background: var(--amber); }
  .arc .when { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 3px; }
  .arc h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .arc p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
  .arc li:nth-child(1) { --d: .25s; } .arc li:nth-child(2) { --d: .45s; }
  .arc li:nth-child(3) { --d: .65s; } .arc li:nth-child(4) { --d: .85s; }
  .arc-note { margin: 26px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 66ch; }

  /* syllabus (subjects & boards) */
  .syllabus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 22px 40px; max-width: 960px; }
  .syllabus h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
  .syllabus p { margin: 0; color: var(--ink-soft); font-size: 15px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
  .chips li { border: 1.5px solid var(--ink); border-radius: 3px; padding: 5px 11px; font-size: 14px; font-weight: 700; background: #fff; }
  .chips li.soon { border-style: dashed; color: var(--ink-faint); background: transparent; }
  .syl-note { margin: 22px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 62ch; }

  /* marking scheme (verification) */
  .scheme { max-width: 780px; }
  .gate { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .gate:first-child { border-top: 2px solid var(--ink); }
  .gate .gn { font-family: 'Fraunces', serif; font-weight: 900; font-size: 26px; color: var(--red); flex: 0 0 44px; }
  .gate .gbody { flex: 1 1 300px; min-width: 0; }
  .gate h3 { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
  .gate p { margin: 0; color: var(--ink-soft); }
  .gate .tag {
    flex: 0 0 auto; align-self: center;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--red); border: 1.5px solid currentColor; border-radius: 3px;
    padding: 5px 10px; transform: rotate(-2deg); opacity: .85; white-space: nowrap;
  }
  .scheme-note { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; padding: 18px 0 4px; color: var(--ink-soft); font-weight: 600; font-size: 15px; }
  .scheme-note .redpen { font-size: 22px; }

  /* ---- blackboard --------------------------------------------------- */
  .board-wrap { padding: clamp(20px, 3vw, 36px) 0 clamp(10px, 2vw, 20px); margin-left: calc(-1 * var(--bleed-l)); margin-right: calc(-1 * var(--bleed-r)); }
  .board {
    background: #10264F;
    border: 10px solid #A9713B; border-radius: 6px;
    box-shadow: inset 0 0 60px rgba(0,0,0,.35), 0 22px 44px -26px rgba(15,37,87,.7);
    color: rgba(253,248,240,.92);
    padding: clamp(24px, 4vw, 48px);
  }
  .board .chalk-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(30px, 4vw, 46px); color: #FDF8F0; line-height: 1.1; }
  .board .chalk-sub { color: rgba(253,248,240,.75); max-width: 60ch; margin: 10px 0 26px; }
  .board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px 34px; }
  .board-item { border-top: 1.5px dashed rgba(253,248,240,.35); padding-top: 14px; }
  .board-item h3 { font-size: 17.5px; font-weight: 700; color: #FDF8F0; font-family: 'Hanken Grotesk', sans-serif; margin-bottom: 4px; }
  .board-item p { margin: 0; font-size: 15px; color: rgba(253,248,240,.72); }
  .board-eq {
    margin: 30px 0 6px; font-family: 'Caveat', cursive; font-weight: 700;
    font-size: clamp(24px, 3.4vw, 38px); color: #FDF8F0;
    display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
  }
  .board-eq .who { font-size: 17px; color: rgba(253,248,240,.6); }

  /* ---- notebook pages (who it's for) -------------------------------- */
  .pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(20px, 3vw, 36px); align-items: start; }
  .page {
    background: #fff; border: 1px solid rgba(15,37,87,.13); border-radius: 2px;
    box-shadow: 0 16px 34px -22px rgba(15,37,87,.5);
    padding: 26px clamp(18px, 3vw, 30px) 22px clamp(40px, 5vw, 52px);
    position: relative;
  }
  .page::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(24px, 3.4vw, 32px); width: 1.5px; background: var(--margin-rule); }
  .page:nth-child(1) { transform: rotate(-.5deg); }
  .page:nth-child(2) { transform: rotate(.4deg); }
  .page:nth-child(3) { transform: rotate(-.3deg); }
  .page h3 { font-size: 23px; font-weight: 900; margin-bottom: 14px; }
  .page ul { list-style: none; margin: 0; padding: 0; }
  .page li { padding: 9px 0; }
  .page .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
  .page h4 { margin: 1px 0 2px; font-size: 17.5px; font-weight: 700; }
  .page p { margin: 0; font-size: 15px; color: var(--ink-soft); }
  .page.star { border-color: var(--ink); border-width: 2px; box-shadow: 5px 5px 0 rgba(245,166,35,.5); }
  .page .stk, .kit .stk {
    position: absolute; top: -12px; right: 14px; transform: rotate(3deg);
    font-family: 'Caveat', cursive; font-weight: 700; font-size: 18px; color: var(--red);
    border: 1.5px solid var(--red); border-radius: 3px; background: var(--paper); padding: 1px 10px;
  }

  /* ---- staff-room notice -------------------------------------------- */
  .notice-wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 720px); justify-content: center; align-items: center; gap: clamp(18px, 3vw, 40px); padding: clamp(16px, 2vw, 28px) 0; }
  .pin-photo { margin: 0; background: #fff; border: 1px solid rgba(15,37,87,.15); padding: 10px 10px 12px; transform: rotate(2.5deg); box-shadow: 0 18px 40px -24px rgba(15,37,87,.55); position: relative; }
  .pin-photo::before { content: ''; position: absolute; top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F9C86A, var(--amber-deep) 70%); box-shadow: 0 3px 5px rgba(15,37,87,.35); z-index: 1; }
  .pin-photo img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 8; object-fit: cover; object-position: 60% 30%; }
  .pin-photo figcaption { font-family: 'Caveat', cursive; font-size: 18px; color: var(--ink-soft); padding: 8px 2px 0; }
  .notice {
    position: relative; max-width: 720px; width: 100%;
    background: var(--paper-deep); border: 1px solid rgba(15,37,87,.15); border-radius: 2px;
    box-shadow: 0 18px 40px -24px rgba(15,37,87,.55);
    transform: rotate(-.7deg);
    padding: clamp(26px, 4vw, 44px);
  }
  .notice::before {
    content: ''; position: absolute; top: -9px; left: 50%; margin-left: -9px;
    width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7FA3E8, var(--ink) 70%);
    box-shadow: 0 3px 5px rgba(15,37,87,.35);
  }
  .notice .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
  .notice h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 900; margin-bottom: 12px; }
  .notice > p { color: var(--ink-soft); margin: 0 0 20px; max-width: 58ch; }
  .leaders { list-style: none; margin: 0 0 24px; padding: 0; max-width: 540px; }
  .leaders li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-weight: 600; color: var(--ink-soft); font-size: 15px; }
  .leaders b { color: var(--ink); font-weight: 800; white-space: nowrap; }
  .leaders .dots { flex: 1; border-bottom: 1.5px dotted var(--ink-faint); transform: translateY(-4px); min-width: 30px; }
  .earn { max-width: 720px; margin: clamp(18px, 3vw, 30px) auto 0; }
  .earn .rough { background: #fff; }

  /* ---- schools circular --------------------------------------------- */
  .photo-wide { margin: 0 0 clamp(22px, 3vw, 34px); border: 2px solid var(--ink); border-radius: 3px; background: #fff; padding: 8px; box-shadow: 6px 6px 0 rgba(245,166,35,.5); max-width: 900px; position: relative; }
  .photo-wide img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5.6; object-fit: cover; object-position: 50% 35%; }
  .photo-wide figcaption { position: absolute; right: 18px; bottom: 18px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; color: var(--red); background: var(--paper); border: 1.5px solid var(--red); border-radius: 3px; padding: 2px 12px; transform: rotate(-2deg); }
  .circular { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 44px; max-width: 900px; margin: 0 0 8px; }
  .circular .sc { border-top: 2px solid var(--ink); padding-top: 12px; }
  .circular .sc .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
  .circular .sc h3 { font-size: 19px; font-weight: 700; margin: 2px 0 4px; }
  .circular .sc p { margin: 0; color: var(--ink-soft); font-size: 15px; }
  .sc-note { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; padding: 18px 0 4px; color: var(--ink-soft); font-weight: 600; font-size: 15px; max-width: 960px; }
  .sc-note .redpen { font-size: 22px; }

  /* ---- gallery (pinned photos) -------------------------------------- */
  .gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; padding: 8px 0 6px; }
  .gal figure.wide { grid-column: span 2; }
  .gal figure.wide img { aspect-ratio: 8 / 3.15; object-position: 50% 30%; }
  .gal figure {
    position: relative; margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 3px;
    overflow: hidden; cursor: pointer; box-shadow: 4px 4px 0 rgba(245,166,35,.45);
    transition: transform .15s ease;
  }
  .gal figure:nth-child(odd) { transform: rotate(-.7deg); }
  .gal figure:nth-child(even) { transform: rotate(.6deg); }
  .gal figure:hover { transform: rotate(0) translate(-2px, -2px); }
  .gal img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
  .gal figcaption { padding: 8px 12px 10px; font-family: 'Caveat', cursive; font-size: 19px; font-weight: 600; border-top: 1.5px solid var(--rule); }
  .gal .kind {
    position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    background: #fff; border: 1.5px solid var(--ink); border-radius: 3px; padding: 3px 8px;
  }
  .gal .play {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%; background: var(--amber);
    border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center;
  }
  .gal .play svg { width: 22px; height: 22px; margin-left: 3px; }
  .gal-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-faint); }
  dialog.lb {
    border: 2px solid var(--ink); border-radius: 3px; padding: 0; background: #fff;
    width: min(960px, 94vw); box-shadow: 8px 8px 0 rgba(245,166,35,.5);
  }
  dialog.lb::backdrop { background: rgba(15,37,87,.72); }
  .lb-body { background: var(--ink); }
  .lb-body img, .lb-body video, .lb-body iframe { display: block; width: 100%; max-height: 78vh; object-fit: contain; border: 0; }
  .lb-body iframe, .lb-body video { aspect-ratio: 16 / 9; }
  .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 600; }
  .lb-x { cursor: pointer; font-family: 'Hanken Grotesk', sans-serif; padding: 6px 12px; font-size: 13.5px; box-shadow: 2px 2px 0 var(--ink); }

  /* ---- testimonials (hidden until we have real ones) ---------------- */
  .stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
  .story { background: #fff; border: 1px solid rgba(15,37,87,.13); border-radius: 2px; padding: 22px 22px 18px; box-shadow: 0 16px 34px -22px rgba(15,37,87,.5); }
  .story:nth-child(odd) { transform: rotate(-.5deg); } .story:nth-child(even) { transform: rotate(.5deg); }
  .story blockquote { margin: 0 0 12px; font-family: 'Caveat', cursive; font-size: 22px; line-height: 1.3; }
  .story .who { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
  .story .who b { color: var(--ink); font-weight: 800; }

  /* ---- free textbooks ------------------------------------------------ */
  .books { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 2px solid var(--ink); }
  .books li { border-bottom: 1px solid var(--rule); }
  .books a { display: flex; gap: 16px; align-items: center; padding: 15px 4px 15px 0; text-decoration: none; }
  .books a:hover h3 { color: var(--amber-deep); }
  .books .bi {
    flex: 0 0 44px; height: 56px; border: 2px solid var(--ink); border-radius: 2px; background: #fff;
    display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 900; font-size: 13px; color: var(--ink);
    box-shadow: inset 6px 0 0 var(--amber);
  }
  .books h3 { font-size: 18px; font-weight: 700; }
  .books p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-soft); }
  .books .ext { margin-left: auto; color: var(--amber-deep); font-weight: 800; white-space: nowrap; }
  .books-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-faint); max-width: 62ch; }

  /* ---- doubts (FAQ) -------------------------------------------------- */
  .doubts { max-width: 760px; }
  .doubts details { border-bottom: 1px solid var(--rule); }
  .doubts details:first-of-type { border-top: 2px solid var(--ink); }
  .doubts summary {
    list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline;
    padding: 18px 4px 18px 0; font-size: 18px; font-weight: 700;
  }
  .doubts summary::-webkit-details-marker { display: none; }
  .doubts summary .qm { color: var(--red); font-family: 'Fraunces', serif; font-weight: 900; flex: 0 0 auto; }
  .doubts summary .plus { margin-left: auto; color: var(--amber-deep); font-weight: 800; font-size: 22px; transition: transform .2s; flex: 0 0 auto; }
  .doubts details[open] .plus { transform: rotate(45deg); }
  .doubts .ans { display: flex; gap: 16px; padding: 0 30px 20px 0; color: var(--ink-soft); }
  .doubts .ans .am { color: var(--amber-deep); font-family: 'Fraunces', serif; font-weight: 900; flex: 0 0 auto; }
  .doubts .ans p { margin: 0; }

  /* ---- admission form (the only early-access form on the page) ------- */
  .adm { border: 2px solid var(--ink); border-radius: 3px; background: #fff; max-width: 760px; padding: clamp(24px, 4vw, 40px); box-shadow: 6px 6px 0 rgba(245,166,35,.5); }
  .adm .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
  .adm h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 900; margin-bottom: 8px; }
  .adm > p { color: var(--ink-soft); margin: 0 0 22px; max-width: 56ch; }
  .adm-fields { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 20px; }
  .field { flex: 1 1 220px; min-width: 0; }
  .field label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
  .field .wrap { display: flex; align-items: baseline; gap: 8px; border-bottom: 1.5px dotted var(--ink-faint); }
  .field .cc { font-weight: 700; white-space: nowrap; }
  .field input {
    width: 100%; border: 0; outline: 0; background: transparent;
    font-family: 'Caveat', cursive; font-size: 24px; font-weight: 600; color: var(--ink);
    padding: 2px 0 4px;
  }
  .field.bad .wrap { border-bottom-color: var(--red); }
  .adm-role { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
  .adm-role .rl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); flex: 0 0 100%; }
  .adm-role label {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    border: 1.5px solid var(--ink); border-radius: 3px; padding: 7px 14px; font-weight: 700; background: #fff;
    transition: box-shadow .12s ease, background .12s ease;
  }
  .adm-role input { accent-color: var(--amber-deep); margin: 0; }
  .adm-role label:has(input:checked) { background: var(--amber); box-shadow: 2px 2px 0 var(--ink); }
  .adm .ticks { margin-bottom: 24px; }
  .adm-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
  .adm button.stamp { cursor: pointer; font-family: inherit; }
  .adm button.stamp[disabled] { opacity: .6; cursor: progress; transform: none; }
  .adm .fine { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; max-width: 56ch; }
  .adm .err { display: none; margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--red); }
  .adm.bad .err { display: block; }
  .adm .done { display: none; margin-top: 16px; font-size: 23px; line-height: 1.25; }
  .adm.sent .done { display: block; }
  .adm.sent .adm-fields, .adm.sent .adm-role, .adm.sent .adm-actions, .adm.sent .fine, .adm.sent .ticks { display: none; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

  /* ---- long-form documents (privacy, terms, refund) -------------------
     The legal text is the page, so it is never collapsed: every clause is
     open prose. What folds is the plain-English gloss beside it, and the
     index at the top jumps between clauses. Restrained on purpose — the
     wry `.marks` asides do not belong on terms a user is agreeing to. */
  .doc-meta { font-family: 'Caveat', cursive; font-size: 20px; color: var(--red); margin: -2px 0 18px; }
  .toc { border: 2px solid var(--ink); border-radius: 3px; background: #fff; padding: 16px 18px; margin: 0 0 clamp(26px, 4vw, 40px); max-width: 760px; box-shadow: 4px 4px 0 rgba(245,166,35,.45); }
  .toc h3 { font-family: 'Caveat', cursive; font-size: 22px; font-weight: 700; color: var(--red); margin: 0 0 10px; }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; counter-reset: toc; }
  .toc li { counter-increment: toc; font-size: 14.5px; font-weight: 600; }
  .toc a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; color: var(--ink-soft); padding: 3px 0; }
  .toc a::before { content: counter(toc) "."; font-family: 'Fraunces', serif; font-weight: 900; color: var(--amber-deep); flex: 0 0 auto; }
  .toc a:hover { color: var(--amber-deep); }
  .legal { max-width: 760px; counter-reset: clause; }
  .clause { counter-increment: clause; padding: 0 0 clamp(20px, 3vw, 28px); }
  .clause + .clause { border-top: 1px solid var(--rule); padding-top: clamp(20px, 3vw, 28px); }
  .clause h3 { display: flex; gap: 12px; align-items: baseline; font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; margin: 0 0 8px; scroll-margin-top: calc(var(--hdr-h) + 16px); }
  .clause h3 .cn { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(22px, 2.6vw, 28px); color: var(--amber-deep); line-height: 1; flex: 0 0 auto; }
  .clause p { margin: 0 0 10px; color: var(--ink-soft); }
  .clause ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-soft); }
  .clause li { margin: 6px 0; }
  .clause b, .clause strong { color: var(--ink); font-weight: 700; }
  /* the teacher's gloss beside a legal clause. NOT .plain — that class is
     already the site's secondary-link style (.q-cta .plain, .slide .go .plain),
     and reusing it put a red rule down the side of every secondary link. */
  .gloss { margin-top: 12px; border-left: 2px solid var(--margin-rule); padding-left: 14px; }
  .gloss summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; color: var(--red); }
  .gloss summary::-webkit-details-marker { display: none; }
  .gloss summary .plus { color: var(--amber-deep); font-weight: 800; font-size: 20px; transition: transform .2s; }
  .gloss[open] summary .plus { transform: rotate(45deg); }
  .gloss p { margin: 8px 0 2px; font-size: 14.5px; color: var(--ink-faint); }

  /* A closing band: the one action a reader of this page might actually want.
     Service, not sales — the legal pages carry no lead form on purpose, so this
     points at a person rather than at the early-access form. Lifts on hover. */
  .band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px 28px; max-width: 760px; margin: clamp(28px, 4vw, 44px) 0 0;
    background: var(--paper-deep); border: 2px solid var(--ink); border-radius: 3px;
    padding: clamp(18px, 2.6vw, 28px);
    box-shadow: 5px 5px 0 rgba(245, 166, 35, .5);
    transition: transform .14s ease, box-shadow .14s ease;
    scroll-margin-top: calc(var(--hdr-h) + 16px);
  }
  .band:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(245, 166, 35, .5); }
  .band .bt { flex: 1 1 300px; min-width: 0; }
  .band h3 { font-size: clamp(18px, 2.1vw, 23px); font-weight: 800; margin: 0 0 5px; }
  .band p { margin: 0; color: var(--ink-soft); font-size: 14.5px; max-width: 48ch; }
  .band .redpen { font-size: 20px; margin-right: 6px; }

  /* ---- 404 ------------------------------------------------------------ */
  .lost { text-align: center; padding: clamp(40px, 9vw, 90px) 0 clamp(30px, 6vw, 60px); }
  /* "404" then "Not Found" beneath it — stacked, because the two on one line
     would have to shrink to ~36px to fit a 320px screen and stop reading as big */
  .lost .code { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(72px, 18vw, 150px); line-height: .9; color: var(--ink); margin: 0; }
  .lost .code .nf { display: block; font-size: clamp(38px, 9vw, 76px); line-height: 1; margin-top: 6px; }
  .lost .grade { font-family: 'Caveat', cursive; font-size: clamp(24px, 4vw, 34px); color: var(--red); transform: rotate(-4deg); display: inline-block; margin: 6px 0 14px; }
  .lost p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 22px; }
  .lost .where { list-style: none; margin: clamp(24px, 4vw, 36px) auto 0; padding: 0; max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; text-align: left; }
  .lost .where a { display: block; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; padding: 11px 14px; text-decoration: none; font-weight: 700; font-size: 15px; transition: transform .12s ease, box-shadow .12s ease; }
  .lost .where a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); color: var(--amber-deep); }
  .lost .where span { display: block; font-size: 13px; font-weight: 500; color: var(--ink-faint); margin-top: 2px; }

  /* ---- closing + footer ---------------------------------------------- */
  .closing { padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(30px, 4vw, 50px); }
  .closing h2 { font-size: clamp(28px, 4vw, 52px); font-weight: 900; max-width: 22ch; margin-bottom: 14px; }
  .closing p { color: var(--ink-soft); max-width: 54ch; margin: 0; }

  footer { margin-top: clamp(30px, 4vw, 50px); }
  .eop { text-align: center; font-size: 26px; padding: 26px 0 4px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; padding: 18px 0 30px; }
  .foot-grid h3 { font-size: 12.5px; font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; }
  .foot-grid li { margin: 7px 0; font-size: 15px; font-weight: 600; }
  .foot-grid a { text-decoration: none; color: var(--ink-soft); }
  .foot-grid a:hover { color: var(--amber-deep); }
  .foot-brand .logo img { height: 52px; }
  .foot-brand .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 0 12px; }
  .foot-brand p { font-size: 14.5px; color: var(--ink-soft); margin: 8px 0 0; max-width: 34ch; }
  .foot-brand address { font-style: normal; font-size: 14.5px; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.5; }
  .foot-brand address b { color: var(--ink); font-weight: 800; }
  .foot-brand address a { color: var(--ink); text-decoration: none; font-weight: 700; }
  .todo { color: var(--red); font-family: 'Caveat', cursive; font-size: 18px; }
  .foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--rule); padding: 16px 0 30px; font-size: 13.5px; color: var(--ink-faint); font-weight: 500; }
  .foot-legal .links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

  /* ---- narrow screens ------------------------------------------------- */
  @media (max-width: 960px) {
    .kit { grid-template-columns: 1fr 1fr; }
    .kit.four { grid-template-columns: 1fr 1fr; }
    .arc { grid-template-columns: 1fr 1fr; }
    .arc::before { display: none; }
    .notice-wrap { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
    .trust-row { grid-template-columns: 1fr 1fr; }
    .gal { grid-template-columns: 1fr 1fr; }
    .gal figure.wide img { aspect-ratio: 8 / 3.3; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    :root { --bleed-l: 0px; --bleed-r: 0px; }
    .notice-wrap { grid-template-columns: 1fr; }
    .pin-photo { max-width: 320px; margin: 0 auto 10px; }
    .paper { box-shadow: none; min-height: 0; }
    .circular { grid-template-columns: 1fr; }
    .rough { padding: 14px 14px 12px; }
    .rough table { font-size: 18px; }
    .rough td:first-child { padding-right: 10px; }
    .rough td:last-child { white-space: normal; }
    .rough tr.tot td { font-size: 21px; }
    .rough tr.sub td { font-size: 14.5px; }
    .slide { grid-template-columns: 1fr; gap: 12px; padding: 22px 18px 26px; }
    .slide .art { order: -1; }
    .slide .art svg { max-width: 190px; }
    .slide h1, .slide h2 { font-size: clamp(23px, 6.4vw, 31px); }
    /* The margin column is a desktop luxury: on a phone it eats ~15% of the
       width and strands the Q-numbers. Drop the rule, reclaim the width, and
       let each Q-number flow inline as a red-pen stamp above its title. */
    .paper::before, .hdr::before { display: none; }
    .hdr::after, .trust::before, .trust::after, footer::before { left: 0; }
    .body-cell { padding-left: 18px; padding-right: 18px; }
    /* Header: one slim row (logo + compact CTA + burger), no tagline. The
       Q-index row is hidden here and replaced by the .drawer — see the phone
       menu block at the end of this file. */
    .hdr-sub { display: none; }
    .hdr { padding-top: 10px; }
    .hdr-top { justify-content: space-between; gap: 10px; padding-bottom: 10px; }
    .logo img { height: 42px; }
    .hdr-cta { padding: 9px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
    .marginal {
      position: static; width: auto; display: inline-block;
      font-size: 20px; line-height: 1;
      border: 1.5px solid rgba(201, 59, 46, .5); border-radius: 3px;
      padding: 3px 12px 5px; transform: rotate(-2deg);
      margin-bottom: 12px;
    }
    .foot-grid { grid-template-columns: 1fr; }
  }
  /* the comparison table restacks: one card per row, labels inlined */
  @media (max-width: 620px) {
    /* the index and the 404 link grid are two-up until there is no room */
    .toc ol { grid-template-columns: 1fr; }
    .lost .where { grid-template-columns: 1fr; }
    .cmp thead { position: absolute; left: -9999px; }
    .cmp, .cmp tbody, .cmp tbody tr, .cmp td { display: block; width: auto; }
    /* the column widths above are more specific than `.cmp td` — undo them by name */
    .cmp .rl, .cmp .us, .cmp .them { width: auto; display: block; }
    .cmp tbody tr { border: 1.5px solid var(--ink); border-radius: 3px; margin-bottom: 12px; padding: 10px 12px; }
    .cmp td { padding: 3px 0; border: 0; }
    .cmp tbody tr:last-child .us { border-bottom: 0; }
    .cmp .rl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
    .cmp .us { background: rgba(245,166,35,.14); border: 0; border-radius: 3px; padding: 6px 8px; margin: 4px 0; }
    .cmp .them { background: transparent; }
    .cmp .us::before { content: "Kautuki: "; font-weight: 800; color: var(--red); }
    .cmp .them::before { content: "The usual model: "; font-weight: 800; color: var(--ink-faint); }
    .arc { grid-template-columns: 1fr; gap: 18px; }
  }
  @media (max-width: 520px) {
    .kit { grid-template-columns: 1fr; }
    .kit.four { grid-template-columns: 1fr; }
    /* the bracketed aside is nowrap so it stays on the heading's line on a wide
       screen; the longest of them is ~300px, which overruns a 320px phone */
    .marks { white-space: normal; }
    /* a 44px badge plus a nowrap "ncert.nic.in ↗" leaves the link text ~88px.
       Let the row wrap so the title gets the full width and the domain drops
       to its own line. */
    .books a { flex-wrap: wrap; row-gap: 2px; }
    /* the step number's 66px gutter is a third of a 320px screen: pull it in */
    .steps li { padding: 14px 30px 14px 48px; }
    .steps .n { font-size: 26px; top: 15px; }
    .steps .redpen { font-size: 20px; }
    .trust-row { grid-template-columns: 1fr; }
    .gal { grid-template-columns: 1fr; }
    .gal figure.wide { grid-column: auto; }
    .gal figure.wide img { aspect-ratio: 4 / 3; }
  }
  /* ---- motion: scroll reveals, stamps, ticks, chalk, hero life ------ */
  /* Three reveal flavours:
       .rv   - moves with `transform` (widest browser support), for plain blocks.
       .rv-t - moves with the independent `translate` property, so it never
               overwrites an element's own paper tilt or its :hover lift.
       .rv-m - the same, sideways, for the annotations in the red margin.
     Browsers without `translate` just fade those in - nothing is ever hidden. */
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .rv.rv-x { transform: translateX(-16px); }
  .js .rv.rv-x.in { transform: none; }
  .js .rv-t { opacity: 0; translate: 0 20px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .rv-t.in { opacity: 1; translate: 0 0; }
  .js .rv-m { opacity: 0; translate: -14px 0; transition: opacity .5s ease .1s, translate .5s cubic-bezier(.2,.7,.2,1) .1s; }
  .js .rv-m.in { opacity: 1; translate: 0 0; }

  /* header: the red pen tracks how far down the paper you have read */
  .hdr .prog {
    position: absolute; left: var(--m); right: 0; bottom: 0; height: 2px; z-index: 1;
    background: var(--red); transform: scaleX(var(--prog, 0)); transform-origin: left center;
  }

  /* hero: copy lands line by line on the slide that is showing */
  .js .slide > div:first-child { opacity: 0; transform: translateY(14px); transition: opacity .5s ease .1s, transform .5s ease .1s; }
  .js .slide.on > div:first-child { opacity: 1; transform: none; }
  .js .slide h1, .js .slide h2, .js .slide .sub, .js .slide .go {
    opacity: 0; translate: 0 12px;
    transition: opacity .5s ease, translate .55s cubic-bezier(.2,.7,.2,1);
  }
  .js .slide .sub { transition-delay: .12s; }
  .js .slide .go { transition-delay: .24s; }
  .js .slide.on h1, .js .slide.on h2, .js .slide.on .sub, .js .slide.on .go { opacity: 1; translate: 0 0; }
  /* underline highlighter sweeps in on the hero */
  .js .slide .hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .7s ease .5s; }
  .js .slide.on .hl { background-size: 100% 100%; }
  /* hero art only animates on the visible slide (SMIL runs regardless; this fades it) */
  .js .slide .art { opacity: 0; transform: scale(.96); transition: opacity .6s ease .2s, transform .6s ease .2s; }
  .js .slide.on .art { opacity: 1; transform: none; }
  .dots button { transition: background .2s ease, scale .2s cubic-bezier(.2,1.4,.4,1); }
  .dots button.on { scale: 1.15; }

  /* trust banner: each shield stamps itself onto the paper */
  .js .trust-row .ti, .js .kit .ki {
    opacity: 0; scale: .55; rotate: -14deg;
    transition: opacity .3s ease, scale .4s cubic-bezier(.3,1.6,.4,1), rotate .4s cubic-bezier(.3,1.6,.4,1), transform .18s ease;
    transition-delay: calc(var(--i, 0) * 70ms + .18s), calc(var(--i, 0) * 70ms + .18s), calc(var(--i, 0) * 70ms + .18s), 0s;
  }
  .js .trust-row li.in .ti, .js .kit li.in .ki { opacity: 1; scale: 1; rotate: 0deg; }

  /* Q1: red-pen ticks draw in after their row lands, numbers count in */
  .js .steps .redpen { opacity: 0; scale: .4; rotate: -18deg; transition: opacity .3s ease, scale .35s cubic-bezier(.3,1.6,.4,1), rotate .35s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .35s); }
  .js .steps li.in .redpen { opacity: 1; scale: 1; rotate: 0deg; }
  .js .steps .n { opacity: 0; translate: -10px 0; transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms + .12s); }
  .js .steps li.in .n { opacity: 1; translate: 0 0; }

  /* Q2: option letters stamp on, and the rough work is totted up row by row */
  /* (inline-block: an inline box cannot be scaled or translated) */
  .fmt .opt, .page li .tag, .circular .sc .tag { display: inline-block; }
  .js .fmt .opt { opacity: 0; scale: 1.6; transition: opacity .25s ease, scale .35s cubic-bezier(.2,1.5,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .25s); }
  .js .fmt.in .opt { opacity: 1; scale: 1; }
  .js .rough tr.tot td {
    background-image: linear-gradient(rgba(245,166,35,.4), rgba(245,166,35,.4));
    background-repeat: no-repeat; background-size: 0 100%;
    transition: background-size .55s cubic-bezier(.4,0,.2,1) .3s;
  }
  .js .rough tr.tot.in td { background-size: 100% 100%; }

  /* Why: the problem is struck through, then the fix is ticked in */
  .js .whys h3 .strike { background-size: 0% 100%; transition: background-size .5s cubic-bezier(.4,0,.2,1) .2s; }
  .js .whys li.in h3 .strike { background-size: 100% 100%; }
  .js .whys li .pn { opacity: 0; translate: -8px 0; transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1); }
  .js .whys li.in .pn { opacity: 1; translate: 0 0; }
  .js .whys li .fix { opacity: 0; translate: 0 6px; transition: opacity .4s ease .5s, translate .4s ease .5s; }
  .js .whys li.in .fix { opacity: 1; translate: 0 0; }

  /* the comparison ticks land a beat after their row */
  .js .cmp .us .redpen { opacity: 0; scale: .4; transition: opacity .25s ease, scale .3s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .2s); }
  .js .cmp tr.in .us .redpen { opacity: 1; scale: 1; }

  /* the outcome arc: the dashed line is ruled in, then each milestone lands */
  .js .arc::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.4,0,.2,1) .15s; }
  .js .arc.in::before { transform: scaleX(1); }
  .js .arc li::before { opacity: 0; scale: .3; transition: opacity .3s ease var(--d, 0s), scale .4s cubic-bezier(.3,1.6,.4,1) var(--d, 0s); }
  .js .arc.in li::before { opacity: 1; scale: 1; }
  .js .arc li .when, .js .arc li h3, .js .arc li p {
    opacity: 0; translate: 0 8px;
    transition: opacity .45s ease calc(var(--d, 0s) + .1s), translate .45s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .1s);
  }
  .js .arc.in li .when, .js .arc.in li h3, .js .arc.in li p { opacity: 1; translate: 0 0; }

  /* Q3: subject chips pop on in sequence */
  .js .chips li { transition: transform .15s ease, background .15s ease, opacity .35s ease, scale .35s cubic-bezier(.3,1.5,.4,1); }
  /* delays are per-property so the stagger never slows the :hover lift */
  .js .chips li.rv-t { opacity: 0; scale: .8; translate: 0 0; transition-delay: 0s, 0s, calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms); }
  .js .chips li.rv-t.in { opacity: 1; scale: 1; }

  /* Q4: verification tags thump down like a rubber stamp */
  .js .gate .tag { opacity: 0; scale: 1.5; transition: opacity .25s ease, scale .3s cubic-bezier(.2,1.4,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .4s); }
  .js .gate.in .tag { opacity: .85; scale: 1; }
  .js .gate .gn { opacity: 0; translate: -10px 0; transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms + .1s); }
  .js .gate.in .gn { opacity: 1; translate: 0 0; }

  /* Q5: the chalk title writes itself, then the board fills in */
  .js .board .chalk-title { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.4,0,.2,1) .25s; }
  .js .board.in .chalk-title { clip-path: inset(0 -2% 0 0); }
  .js .board-item.rv { transition-delay: calc(var(--i, 0) * 90ms + .45s); }
  .js .board .board-eq { opacity: 0; translate: 0 10px; transition: opacity .6s ease .95s, translate .6s ease .95s; }
  .js .board.in .board-eq { opacity: 1; translate: 0 0; }

  /* Q6: notebook pages - the sticker thumps on, entries fill in one by one */
  .js .page .stk, .js .kit .stk { opacity: 0; scale: 1.7; transition: opacity .25s ease .5s, scale .35s cubic-bezier(.2,1.5,.4,1) .5s; }
  .js .page.in .stk, .js .kit li.in .stk { opacity: 1; scale: 1; }
  .js .page li .tag { opacity: 0; translate: -6px 0; transition: opacity .35s ease, translate .35s ease; transition-delay: calc(var(--i, 0) * 70ms + .2s); }
  .js .page li.in .tag { opacity: 1; translate: 0 0; }

  /* Q7: the notice's dotted leader lines rule themselves in */
  .js .leaders li { opacity: 0; translate: 0 8px; transition: opacity .45s ease, translate .45s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .leaders li.in { opacity: 1; translate: 0 0; }
  .js .leaders li .dots { transform: translateY(-4px) scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i, 0) * 80ms + .15s); }
  .js .leaders li.in .dots { transform: translateY(-4px) scaleX(1); }

  /* Q8: the circular's tags fade up, the photo's caption stamps on */
  .js .circular .sc .tag, .js .kit li .tag { opacity: 0; translate: -6px 0; transition: opacity .35s ease, translate .35s ease; transition-delay: calc(var(--i, 0) * 70ms + .2s); }
  .js .circular .sc.in .tag, .js .kit li.in .tag { opacity: 1; translate: 0 0; }
  .js .photo-wide figcaption { opacity: 0; scale: 1.4; transition: opacity .3s ease .35s, scale .4s cubic-bezier(.2,1.5,.4,1) .35s; }
  .js .photo-wide.in figcaption { opacity: 1; scale: 1; }

  /* Q9: the pinned photos get their labels after they land */
  .js .gal figure .kind, .js .gal figure .play { opacity: 0; scale: .65; transition: opacity .3s ease, scale .4s cubic-bezier(.3,1.5,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .3s); }
  .js .gal figure.in .kind, .js .gal figure.in .play { opacity: 1; scale: 1; }
  .gal figure img { transition: scale .45s cubic-bezier(.2,.7,.2,1); }
  .gal figure:hover img { scale: 1.035; }
  .gal .play { transition: transform .18s ease; }
  .gal figure:hover .play { transform: translate(-50%, -50%) scale(1.08); }

  /* Q10: each book's spine slides off the shelf */
  .js .books li .bi {
    opacity: 0; translate: -10px 0;
    transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1), transform .18s ease;
    transition-delay: calc(var(--i, 0) * 70ms + .15s), calc(var(--i, 0) * 70ms + .15s), 0s;
  }
  .js .books li.in .bi { opacity: 1; translate: 0 0; }

  /* Q11: doubts open and shut */
  .doubts summary { transition: background .18s ease; }
  .doubts summary:hover { background: rgba(245,166,35,.1); }
  .doubts summary .qm { transition: translate .18s ease; }
  .doubts summary:hover .qm { translate: 2px 0; }
  .doubts .ans { animation: none; }
  .doubts details[open] .ans { animation: ansIn .3s ease both; }
  @keyframes ansIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* admission slip: the form fills itself in, field by field */
  .js .adm .kicker, .js .adm > h2, .js .adm > p, .js .adm-fields .field, .js .adm-role, .js .adm .ticks li, .js .adm-actions {
    opacity: 0; translate: 0 10px; transition: opacity .45s ease, translate .45s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--j, 0) * 70ms + .15s);
  }
  .js .adm.in .kicker, .js .adm.in > h2, .js .adm.in > p, .js .adm.in .adm-fields .field,
  .js .adm.in .adm-role, .js .adm.in .ticks li, .js .adm.in .adm-actions { opacity: 1; translate: 0 0; }
  .field .wrap { position: relative; }
  .field .wrap::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px;
    background: var(--amber-deep); transform: scaleX(0); transform-origin: left center;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  .field .wrap:focus-within::after { transform: scaleX(1); }
  .adm.sent .done { animation: ansIn .45s ease both; }

  /* hover life on the paper scraps and the stamps */
  .stamp:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
  .fmt, .page, .story, .books a, .sc, .kit li { transition: transform .18s ease, box-shadow .18s ease; }
  .fmt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(245,166,35,.55); }
  .page:hover, .kit li:hover { transform: translateY(-3px) rotate(0); }
  .kit li:hover .ki { transform: rotate(-6deg) scale(1.06); }
  .kit .ki { transition: transform .18s ease; }
  .books a:hover .bi { transform: rotate(-4deg); }
  .books .bi { transition: transform .18s ease; }
  .trust-row .ti { transition: transform .18s ease; }
  .trust-row li:hover .ti { transform: rotate(-6deg) scale(1.06); }
  .notice { transition: transform .25s ease; }
  .notice:hover { transform: rotate(0); }
  .chips li:hover { transform: translateY(-2px); background: var(--amber); }
  .idx a, .stamp, .foot-grid a { transition-property: transform, box-shadow, background, color; transition-duration: .12s; transition-timing-function: ease; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    /* every reveal lands in its finished state at once - but the paper tilts
       are decoration, not motion, so `transform` is left alone where one holds a tilt */
    .js .rv, .js .slide > div:first-child, .js .slide .art { opacity: 1; transform: none; }
    .js .rv, .js .rv-t, .js .rv-m { opacity: 1; translate: none; }
    .js .trust-row .ti, .js .steps .redpen, .js .steps .n, .js .fmt .opt, .js .gate .gn,
    .js .board .board-eq, .js .page .stk, .js .page li .tag, .js .leaders li,
    .js .circular .sc .tag, .js .kit .ki, .js .kit .stk, .js .kit li .tag, .js .photo-wide figcaption, .js .gal figure .kind, .js .gal figure .play,
    .js .books li .bi, .js .chips li.rv-t, .js .slide h1, .js .slide h2, .js .slide .sub, .js .slide .go,
    .js .adm .kicker, .js .adm > h2, .js .adm > p, .js .adm-fields .field, .js .adm-role,
    .js .adm .ticks li, .js .adm-actions {
      opacity: 1; translate: none; scale: none; rotate: none;
    }
    .js .whys li .pn, .js .whys li .fix, .js .cmp .us .redpen,
    .js .arc li::before, .js .arc li .when, .js .arc li h3, .js .arc li p {
      opacity: 1; translate: none; scale: none;
    }
    .js .whys h3 .strike { background-size: 100% 100%; }
    .js .arc::before { transform: none; }
    .js .gate .tag { opacity: .85; scale: none; }
    .js .leaders li .dots { transform: translateY(-4px); }
    .js .board .chalk-title { clip-path: none; }
    .js .slide .hl { background-size: 100% 100%; }
    .js .rough tr.tot td { background-size: 100% 100%; }
    .field .wrap::after { transform: scaleX(0); }
    .hdr .prog { display: none; }
  }

/* =====================================================================
   Multi-page additions: the Q-index row becomes the site menu.
   Desktop: top-level stamps with two drop-down paper slips (Classes, More).
   Phone (<=720px): the whole row is hidden and the .drawer takes over —
   see the phone-menu block below.
   ===================================================================== */
.idx .menu { position: relative; flex: 0 0 auto; }
.idx .mbtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 11px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.2;
  white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.idx .mbtn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-faint); flex: 0 0 auto; }
.idx .mbtn .car { font-size: 10px; color: var(--ink-faint); transition: transform .15s ease; }
.idx .mbtn:hover { color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
.idx .menu.on > .mbtn { background: var(--amber); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.idx .menu.on > .mbtn::before { background: var(--red); border-color: var(--red); }
.idx .menu.open > .mbtn .car { transform: rotate(180deg); }
.idx .drop {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; padding: 8px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 4px 4px 0 rgba(245,166,35,.5);
}
.idx .drop::before {
  content: ''; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px;
  background: var(--paper); border-left: 2px solid var(--ink); border-top: 2px solid var(--ink);
  transform: rotate(45deg);
}
/* The 8px gap above the panel is dead space: crossing it, the pointer is over
   neither the button nor the panel, :hover is lost and the menu shuts before
   you arrive. This invisible strip bridges it. It belongs to .drop, so hovering
   it still counts as hovering inside .menu — the gap stays, it just stops
   breaking the journey. Overlaps 2px onto the button so there is no dead pixel. */
.idx .drop::after {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.idx .menu.open > .drop { display: block; }
.idx .drop a { display: flex; border: 0; background: transparent; padding: 8px 10px; }
.idx .drop a:hover { background: rgba(245,166,35,.18); box-shadow: none; transform: none; }
.idx .drop a.on { background: var(--amber); box-shadow: none; }
@media (min-width: 721px) {
  /* dropdown panels must not be clipped: the row stops scrolling on desktop */
  .idx { overflow: visible; flex-wrap: wrap; }
  .idx-wrap::before, .idx-wrap::after { display: none; }
  .idx .menu:hover > .drop, .idx .menu:focus-within > .drop { display: block; }
}

/* =====================================================================
   Phone menu (<=720px): the index is torn off the header and becomes an
   off-canvas card. A scrolling row of a dozen stamps was the wrong tool
   on a 320px screen — half the pages sat off the right edge behind a
   gradient. Below 720px the whole .idx row goes and the burger + .drawer
   take over; above 720px none of this renders at all.
   ===================================================================== */
.burger, .drawer, .nav-scrim { display: none; }

@media (max-width: 720px) {
  .idx-wrap { display: none; }

  /* ---- the burger: a small stamp, ruled like everything else ---- */
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; height: 44px; cursor: pointer;
    padding: 0; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .burger .bars, .burger .bars::before, .burger .bars::after {
    content: ''; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  }
  .burger .bars { position: relative; }
  .burger .bars::before { position: absolute; top: -6px; }
  .burger .bars::after  { position: absolute; top: 6px; background: var(--red); }
  .nav-open .burger .bars { background: var(--red); }

  /* ---- the card itself ---- */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(15, 37, 87, .45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  }
  .nav-open .nav-scrim { opacity: 1; visibility: visible; }
  .drawer {
    display: block; position: fixed; top: 0; right: 0; z-index: 80;
    width: min(320px, 86vw); height: 100%;
    padding: 12px 14px 26px 40px;
    /* the margin rule runs down this sheet too — painted as a background so it
       spans the whole card however far the list scrolls */
    background-color: var(--paper);
    background-image: linear-gradient(to right,
      transparent 22px, var(--margin-rule) 22px, var(--margin-rule) 24px, transparent 24px);
    border-left: 2px solid var(--ink);
    box-shadow: -18px 0 42px -26px rgba(15, 37, 87, .7);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* visibility (not display) so it stays out of the tab order when shut */
    transform: translateX(100%); visibility: hidden;
    transition: transform .26s ease, visibility .26s ease;
  }
  .nav-open .drawer { transform: none; visibility: visible; }
  .drawer-top {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px solid var(--ink);
  }
  .drawer-ttl { font-size: 26px; line-height: 1; color: var(--red); }
  .drawer-x {
    flex: 0 0 auto; width: 36px; height: 36px; cursor: pointer; padding: 0;
    border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; color: var(--ink);
    font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1;
  }
  .drawer-x:hover { background: var(--amber); }
  .drawer-nav { display: flex; flex-direction: column; gap: 5px; }
  .drawer-lbl {
    font-family: 'Caveat', cursive; color: var(--red);
    font-size: 20px; line-height: 1; margin: 14px 0 3px;
  }
  .drawer-nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff;
    font-size: 15px; font-weight: 700; color: var(--ink-soft); text-decoration: none; line-height: 1.25;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .drawer-nav a::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    border: 1.5px solid var(--ink-faint); flex: 0 0 auto;
  }
  .drawer-nav a:hover { color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
  .drawer-nav a.on { background: var(--amber); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
  .drawer-nav a.on::before { background: var(--red); border-color: var(--red); }
  .drawer-cta { display: block; margin-top: 22px; text-align: center; }
  .drawer-foot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
  /* the paper behind the card must not scroll while it is open */
  .nav-open, .nav-open body { overflow: hidden; }
}

@media (max-width: 520px) {
  /* logo + CTA + burger must share one 320px row (284px of content width):
     ~75 + ~138 + 40 + 16 of gaps. Every piece gives back a little. */
  .hdr-top { gap: 8px; }
  .logo img { height: 38px; }
  .hdr-cta { padding: 8px 10px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
  .burger { width: 40px; height: 40px; }
}