/* ══════════════════════════════════════════════════════════════════════
   NEXSTUDENTS — homepage skeleton
   Structure per Paul, 2026-08-01: GRADE FIRST, not subject. Parents arrive
   looking for free downloadables for their child's grade, across all
   subjects. So: resources visible immediately, "Start here" into a grade
   picker, then everything else below it.
   Design system carried over from the lttstore study - monochrome, one
   colour, two radii, Archivo in two weights.
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:400 900;font-display:swap}
:root{
  --bg:#0a0b0d; --panel:#16191d; --panel-2:#1f242a; --line:#2b3138;
  --fg:#f1f3f5; --dim:#98a1ab;
  --a:#ffffff; --a-ink:#0a0b0d;
  --free:#4ade80;        /* free badge - the thing they came for */
  --paid:#ff5c33;        /* paid badge. the only warm colour on the page */
  --r:4px; --pill:999px; --rhythm:96px;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:1.03;margin:0}
h2{font-size:clamp(1.8rem,3.5vw,2.7rem);max-width:22ch}
.kick{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:0 0 14px}
.h2s{color:var(--dim);max-width:52ch;margin:14px 0 0;font-size:1.02rem}

/* ── announcement ── */
.ann{background:#000;color:var(--fg);text-align:center;font-size:13.5px;font-weight:600;
  padding:11px 44px 11px 20px;position:relative;border-bottom:1px solid var(--line)}
.ann b{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.ann button{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;
  border:0;color:inherit;font-size:17px;cursor:pointer;line-height:1;padding:6px;opacity:.75}

/* ── nav ── */
nav{position:sticky;top:0;z-index:60;background:rgba(10,11,13,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s}
nav.stuck{border-bottom-color:var(--line)}
.nv{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.word{font-weight:800;font-size:19px;letter-spacing:-.03em}
.word b{color:var(--fg)}
.tabs{display:flex;gap:20px}
.tabs a{font-size:14px;font-weight:500;color:var(--dim);transition:color .18s}
.tabs a.on{color:var(--fg)}
@media(hover:hover){ .tabs a:hover{color:var(--fg)} }
@media(max-width:940px){ .tabs{display:none} }
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:700;font-size:15px;
  padding:16px 32px;border-radius:var(--r);border:0;cursor:pointer;background:var(--a);color:var(--a-ink);
  transition:transform 130ms var(--ease),filter 180ms ease}
.btn:active{transform:scale(.975)}
@media(hover:hover){ .btn:hover{filter:brightness(1.08)} }
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.nv .btn{margin-left:auto;padding:10px 20px;font-size:14px}
/* The nav button was wrapping to two lines on a phone and sitting off-centre.
   Keep it on one line, centred, and readable at phone size. */
.nv .btn{white-space:nowrap;justify-content:center;text-align:center;line-height:1.1}
@media(max-width:560px){
  .nv{gap:12px;padding:12px 16px}
  .nv .btn{font-size:15px;padding:11px 16px}
  .word{font-size:18px}
}
@media(max-width:380px){
  .nv .btn{font-size:14px;padding:10px 13px}
}

/* ── mobile drawer ── */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;
  padding:0 9px;margin-left:-9px;background:none;border:0;cursor:pointer}
.burger i{display:block;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger i:nth-child(2){width:72%;align-self:flex-end}
body.nav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0}
body.nav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:940px){ .burger{display:inline-flex} }
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s}
body.nav-open .scrim{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;height:100dvh;width:min(320px,82vw);z-index:80;background:var(--panel);
  border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;padding:22px}
body.nav-open .drawer{transform:none}
.drawer .x{align-self:flex-end;background:none;border:0;color:var(--dim);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.drawer a{display:block;padding:14px 0;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.drawer a small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.drawer .btn{margin-top:auto;justify-content:center}

/* ── 1. HERO — the shelf is visible immediately, Start here is the CTA ── */
.hero{padding-block:64px 72px;position:relative}
.hero:before{content:"";position:absolute;z-index:-1;inset:0;
  background:radial-gradient(65% 80% at 70% 30%,rgba(255,255,255,.05),transparent 62%)}
.htop{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;margin-bottom:44px}
@media(max-width:940px){ .htop{grid-template-columns:1fr;gap:28px} }
h1{font-size:clamp(2.1rem,5.6vw,4.1rem);margin-bottom:18px}
.sub{font-size:1.1rem;color:var(--dim);max-width:46ch;margin:0}
.hacts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hnote{font-size:.85rem;color:var(--dim);margin:14px 0 0}

/* ── 2. GRADE PICKER — the main CTA target ── */
.grades{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
@media(max-width:900px){ .grades{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(max-width:480px){ .grades{grid-template-columns:repeat(3,minmax(0,1fr))} }
.gr{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:border-color .25s ease,transform .25s var(--ease),background .25s}
.gr b{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.gr span{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.gr.live{background:var(--a);color:var(--a-ink);border-color:var(--a)}
.gr.live span{color:rgba(10,11,13,.65)}
@media(hover:hover){ .gr:hover{transform:translateY(-4px);border-color:var(--a)} }
.gr.soon{opacity:.5}

/* ── 3. RESOURCE SHELF — carousel, free + paid together ── */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.lnk{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap}
.lnk i{width:34px;height:34px;border-radius:var(--pill);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;transition:background .25s,border-color .25s}
@media(hover:hover){ .lnk:hover{color:var(--fg)} .lnk:hover i{border-color:var(--a);background:var(--panel)} }
@media(max-width:640px){ .shead{flex-direction:column;align-items:flex-start} }
.filters{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.filters button{font-family:inherit;font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--pill);
  background:transparent;color:var(--dim);border:1px solid var(--line);cursor:pointer;transition:all .22s}
.filters button[aria-pressed="true"]{background:var(--a);color:var(--a-ink);border-color:var(--a)}

.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.res{flex:0 0 268px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .28s ease,transform .28s var(--ease)}
@media(max-width:600px){ .res{flex:0 0 78vw} }
@media(hover:hover){ .res:hover{border-color:var(--a);transform:translateY(-4px)} }
/* the preview pane: a paper-ish thumbnail that zooms on hover */
.thumb{aspect-ratio:8.5/11;background:#e9ecef;position:relative;overflow:hidden;
  display:grid;place-items:center}
.thumb u{text-decoration:none;color:#4a5058;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;transition:transform .4s var(--ease)}
@media(hover:hover){ .res:hover .thumb u{transform:scale(1.12)} }
.badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--pill)}
.badge.free{background:var(--free);color:#052e16}
.badge.paid{background:var(--paid);color:#2b0a02}
.res .body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.res h4{margin:0 0 5px;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.res p{margin:0 0 14px;font-size:.83rem;color:var(--dim);line-height:1.45;flex:1}
.res .meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);
  padding-top:12px;font-size:.76rem;color:var(--dim);font-weight:700}
.res .meta b{color:var(--fg);font-size:.9rem}
.arrows{display:flex;gap:10px}
.arrows button{width:44px;height:44px;border-radius:50%;background:transparent;color:var(--fg);
  border:1px solid rgba(241,243,245,.28);font-family:inherit;font-size:19px;cursor:pointer;
  display:grid;place-items:center;transition:all .22s}
@media(hover:hover){ .arrows button:hover{border-color:var(--fg);background:rgba(241,243,245,.07)} }
.arrows button:disabled{opacity:.28;pointer-events:none}

/* ── 4. SUBJECTS — four portrait tiles, touching ── */
.subs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:820px){ .subs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:430px){ .subs{grid-template-columns:minmax(0,1fr)} .sub-t{aspect-ratio:auto;border-right:0;border-bottom:1px solid var(--line)} }
.sub-t{aspect-ratio:3/4;border-right:1px solid var(--line);padding:26px 22px;display:flex;
  flex-direction:column;justify-content:space-between;transition:background .3s ease}
.sub-t:last-child{border-right:0}
a.sub-t{color:inherit;text-decoration:none}
/* Live/Soon on subject tiles, same language as the grade picker, so a tile that
   does nothing never looks identical to one that does. */
.sub-t n i{font-style:normal;margin-left:9px;padding:3px 8px;border-radius:var(--pill);
  font-size:.6rem;font-weight:800;letter-spacing:.1em;vertical-align:2px;
  background:var(--panel-2);color:var(--dim)}
.sub-t.is-live n i{background:var(--free);color:#052e16}
.sub-t.is-soon{opacity:.5}
@media(hover:hover){ .sub-t.is-soon:hover{background:transparent} }
@media(hover:hover){ .sub-t:hover{background:var(--panel)} }
.sub-t n{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--dim)}
.sub-t h3{font-size:1.3rem;letter-spacing:-.03em}
.sub-t p{margin:8px 0 0;font-size:.82rem;color:var(--dim);line-height:1.45;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
@media(hover:hover) and (pointer:fine){
  .sub-t p{opacity:0;transform:translateY(10px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
  .sub-t:hover p{opacity:1;transform:none}
}

/* ── SUBJECTS INDEX ── subject on top, lessons/worksheets boxes beneath ── */
.subj-list{display:grid;gap:18px}
.subj-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.subj-row.is-soon{opacity:.55}
.subj-head{display:flex;gap:16px;align-items:flex-start}
.subj-head n{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;
  color:var(--dim);padding-top:6px;flex:none}
.subj-head h3{font-size:1.35rem;letter-spacing:-.03em;margin:0}
.subj-head h3 i{font-style:normal;margin-left:9px;padding:3px 8px;border-radius:var(--pill);
  font-size:.6rem;font-weight:800;letter-spacing:.1em;vertical-align:3px;
  background:var(--panel-2);color:var(--dim)}
.subj-row:not(.is-soon) .subj-head h3 i{background:var(--free);color:#052e16}
.subj-head p{margin:6px 0 0;font-size:.86rem;color:var(--dim);line-height:1.45;max-width:56ch}
.subj-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
@media(max-width:560px){ .subj-sub{grid-template-columns:minmax(0,1fr)} }
.minibox{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;display:flex;flex-direction:column;gap:3px;
  color:inherit;text-decoration:none;transition:border-color .24s ease,transform .24s var(--ease)}
@media(hover:hover){ a.minibox:hover{border-color:var(--a);transform:translateY(-2px)} }
.minibox b{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.minibox span{font-size:.76rem;color:var(--dim)}
.minibox u{text-decoration:none;margin-top:8px;font-size:.74rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--a)}
.minibox.is-soon u{color:var(--dim)}

/* ── 5. GAMES + 6. COMICS ── */
.band{padding:var(--rhythm) 0}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px}
@media(max-width:900px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .grid4{grid-template-columns:1fr} }
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  min-height:190px;display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color .28s ease,transform .28s var(--ease)}
@media(hover:hover){ .tile:hover{border-color:var(--a);transform:translateY(-4px)} }
/* ── LESSON / WORKSHEET CARDS ──
   Small, several to a row. Thumbnail big enough to recognise, then a short
   description and a price. Blank slots sit alongside as placeholders. */
/* Two side by side on ANY phone. A 215px min with auto-fill left a dead zone
   between 431px and ~486px where one full-width card filled the screen -
   which is exactly the width a large phone reports. Explicit columns instead
   of trusting auto-fill to guess. */
.cardgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
@media(max-width:680px){ .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} }

.card{position:relative;display:flex;flex-direction:column;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .26s ease,transform .26s var(--ease)}
@media(hover:hover){ .card:not(.is-slot):hover{border-color:var(--a);transform:translateY(-3px)} }
.clink{display:flex;flex-direction:column;color:inherit;text-decoration:none;flex:1}
.clink:focus-visible{outline:2px solid var(--a);outline-offset:-2px}

/* what's inside — native disclosure, no JS */
.cmore{border-top:1px solid var(--line);font-size:.74rem}
.cmore summary{list-style:none;cursor:pointer;padding:8px 13px;color:var(--dim);
  font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:6px}
.cmore summary::-webkit-details-marker{display:none}
.cmore summary:before{content:"+";font-weight:800;font-size:.9rem;line-height:1;color:var(--a)}
.cmore[open] summary:before{content:"\2212"}
@media(hover:hover){ .cmore summary:hover{color:var(--fg)} }
.cmore summary:focus-visible{outline:2px solid var(--a);outline-offset:-2px}
.cmore ul{margin:0;padding:0 13px 11px 28px;color:var(--dim);line-height:1.5}
.cmore li{margin-bottom:5px}

.cthumb{display:block;aspect-ratio:1/1;background:var(--panel-2);overflow:hidden;flex:none}
.cthumb img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
  transition:transform .4s var(--ease)}
@media(hover:hover){ a.card:hover .cthumb img{transform:scale(1.05)} }

.cbody{display:flex;flex-direction:column;padding:12px 13px 13px;flex:1}
@media(max-width:680px){
  /* two-up on a phone means a ~180px card, so tighten everything inside it */
  .cthumb{aspect-ratio:4/3}
  .cbody{padding:9px 10px 10px}
  .ctitle{font-size:.86rem;margin:4px 0 3px}
  .cblurb{font-size:.72rem;line-height:1.4}
  .cmeta{margin-top:8px;padding-top:7px;font-size:.66rem}
  .cmeta u{font-size:.8rem}
  .cbody em{font-size:.57rem;letter-spacing:.09em}
}
.cbody em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.ctitle{display:block;margin:5px 0 4px;font-size:.94rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.25}
.cblurb{display:block;font-size:.78rem;line-height:1.45;color:var(--dim);flex:1}
.cmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 13px 11px;border-top:1px solid var(--line);
  font-size:.72rem;font-weight:700;color:var(--dim)}
.cmeta u{text-decoration:none;font-size:.88rem;font-weight:800}
.cmeta u.free{color:var(--free)}
.cmeta u.paid{color:var(--paid)}

/* blank slot: clearly a placeholder, never mistaken for a real card */
.card.is-slot{border-style:dashed;opacity:.42}
.card.is-slot .cthumb{background:
  repeating-linear-gradient(135deg,var(--panel-2) 0 9px,transparent 9px 18px)}
.card.is-slot .cmeta{display:none}

/* completed tick, set from localStorage by the lesson list script */
.card.is-done{border-color:var(--free)}
.card .tick-done{position:absolute;top:9px;right:9px;width:23px;height:23px;border-radius:50%;
  background:var(--free);color:#052e16;display:none;place-items:center;z-index:2;
  font-size:13px;font-weight:800;line-height:1}
.card.is-done .tick-done{display:grid}
.card .tick-score{display:none;padding:0 13px 10px;margin-top:-4px;font-size:.66rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--free)}
.card.is-done .tick-score{display:block}
.tile em{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tile h4{margin:12px 0 6px;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.tile p{margin:0;font-size:.85rem;color:var(--dim)}

.comics{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--rhythm) 0}
.crow{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
@media(max-width:900px){ .crow{grid-template-columns:1fr;gap:32px} }
.strip3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pane{aspect-ratio:1/1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;color:var(--dim);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;transition:border-color .25s}
@media(hover:hover){ .pane:hover{border-color:var(--a)} }

/* ── 7. FOR PARENTS: the two placement exams ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){ .two{grid-template-columns:1fr} }
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px;
  display:flex;flex-direction:column}
.plan.pick{border-color:var(--a)}
.plan .tag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--pill);margin-bottom:18px}
.plan.free .tag{background:var(--free);color:#052e16}
.plan.pro .tag{background:var(--paid);color:#2b0a02}
.plan h3{font-size:1.45rem;margin-bottom:8px}
.plan .price{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;margin:14px 0 4px}
.plan .price s{text-decoration:none;font-size:.9rem;color:var(--dim);font-weight:600;margin-left:6px}
.plan ul{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:9px;flex:1}
.plan li{font-size:.9rem;color:var(--dim);padding-left:20px;position:relative}
.plan li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--dim)}
.plan.pro li:before{background:var(--paid)}
.plan.free li:before{background:var(--free)}

/* ── 8. shop CTA ── */
.state{background:var(--a);color:var(--a-ink);padding:74px 0}
.state h2{max-width:18ch}
.state p{color:rgba(10,11,13,.75);max-width:52ch;margin:18px 0 28px;font-weight:500}
.state .btn{background:var(--a-ink);color:var(--a)}

.mq{height:250px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;
  background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:700px){ .mq{height:150px} }
.mq div{display:inline-flex;align-items:center;gap:56px;padding-right:56px;animation:slide 40s linear infinite}
.mq span{font-size:clamp(2.4rem,7vw,104px);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--panel-2)}
.mq span.on{color:var(--fg)}
@keyframes slide{ to{ transform:translateX(-50%) } }
@media(hover:hover){ .mq:hover div{animation-play-state:paused} }

footer{padding:44px 0;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
@media(max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .fgrid{grid-template-columns:1fr} }
footer h5{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer li a{font-size:.9rem;color:var(--dim);transition:color .2s}
@media(hover:hover){ footer li a:hover{color:var(--fg)} }
.fbot{border-top:1px solid var(--line);padding-top:22px;font-size:.82rem;color:var(--dim);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;text-align:center}
.disc{font-size:.78rem;color:var(--dim);max-width:70ch;margin:0 0 18px}

.rv{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.05s} .rv.d2{transition-delay:.1s} .rv.d3{transition-delay:.15s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .rv{opacity:1;transform:none;transition:none}
}

/* ── game cards, for the games carousel ── */
.game{flex:0 0 264px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .28s ease,transform .28s var(--ease)}
@media(max-width:600px){ .game{flex:0 0 76vw} }
@media(hover:hover){ .game:hover{border-color:var(--a);transform:translateY(-4px)} }
.gart{aspect-ratio:16/10;background:var(--panel-2);display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.gart u{text-decoration:none;color:var(--dim);font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;transition:transform .35s var(--ease),color .25s}
@media(hover:hover){ .game:hover .gart u{transform:scale(1.14);color:var(--fg)} }
.gbody{padding:16px 18px}
.gbody em{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.gbody h4{margin:9px 0 5px;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.gbody p{margin:0;font-size:.83rem;color:var(--dim);line-height:1.45}

/* ── page header, for the inner pages ── */
.phead{padding-block:56px 40px;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:14px}
.phead p{color:var(--dim);max-width:56ch;margin:0;font-size:1.04rem}
.crumb{font-size:.8rem;color:var(--dim);margin:0 0 16px}
.crumb a{color:var(--dim)}
@media(hover:hover){ .crumb a:hover{color:var(--fg)} }

/* ── comics: series selector + episode grid ── */
.series{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:44px}
.ser{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  text-align:left;font-family:inherit;color:var(--fg);cursor:pointer;
  transition:border-color .25s ease,transform .25s var(--ease),background .25s}
.ser[aria-pressed="true"]{border-color:var(--a);background:var(--panel-2)}
.ser:disabled{opacity:.45;cursor:default}
@media(hover:hover){ .ser:not(:disabled):hover{transform:translateY(-3px);border-color:var(--a)} }
.ser .cover{aspect-ratio:16/10;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);display:grid;place-items:center;margin-bottom:14px;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ser h3{font-size:1.1rem;letter-spacing:-.02em;margin:0 0 4px}
.ser p{margin:0;font-size:.82rem;color:var(--dim);line-height:1.45}
.ser .st{display:inline-block;margin-top:10px;font-size:.64rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:var(--panel-2);color:var(--dim)}

.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.ep{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s ease,transform .25s var(--ease)}
@media(hover:hover){ .ep:hover{border-color:var(--a);transform:translateY(-3px)} }
.ep .pg{aspect-ratio:3/4;background:var(--panel-2);display:grid;place-items:center;
  color:var(--dim);font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.ep .cap{padding:12px 14px}
.ep .cap b{display:block;font-size:.92rem;font-weight:800;letter-spacing:-.01em}
.ep .cap span{font-size:.76rem;color:var(--dim)}

/* real cover art: fills the card's cover slot, no letterboxing */
.ser .cover.art{padding:0;overflow:hidden;display:block;line-height:0}
.ser .cover.art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
@media(hover:hover){ .ser:not(:disabled):hover .cover.art img{transform:scale(1.05)} }

/* ── comic reader: one page per episode, flip with prev/next ── */
.reader{max-width:820px}
/* The pages are different shapes and that is fine. Each one displays at its
   OWN aspect at the full width of the reader column - nothing cropped, no
   black bars, art as large as it can be. The frame height therefore varies
   between pages; that is the honest trade and it is the one that makes the
   art fit. */
/* All eight pages are 1536x1024 (3:2) as of 2026-08-02, so the frame can be
   fixed again and the page no longer resizes as you flip. aspect-ratio does
   the work - no magic pixel height, and it stays correct at every width.
   ⚠️ If a future page is a different shape it will letterbox here. Keep new
   pages at 3:2, or drop back to the natural-height version in git history. */
.rframe{background:#000;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:block;aspect-ratio:3/2;
  touch-action:pan-y}                     /* lets vertical scroll through, we take the swipe */
.rslot{width:100%;height:100%;line-height:0}
.rslot picture{display:block;width:100%;height:100%}
.rslot img{width:100%;height:100%;object-fit:contain;display:block}   /* no cap, no object-fit: the
   image simply is its own shape at full column width. A portrait page is
   tall and you scroll it, which is how comics read anyway. Capping the
   height put black bars down the sides of the portrait page. */
.rsoon{padding:110px 20px;text-align:center;color:var(--dim);font-size:.72rem;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.6}
.rbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.rmeta{text-align:center;flex:1;min-width:0}
.rmeta b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.rmeta span{font-size:.8rem;color:var(--dim)}
.rnav{width:44px;height:44px;flex:none;border-radius:50%;background:transparent;color:var(--fg);
  border:1px solid rgba(241,243,245,.28);font-family:inherit;font-size:19px;cursor:pointer;
  display:grid;place-items:center;transition:border-color .22s,background .22s,opacity .22s}
@media(hover:hover){ .rnav:not(:disabled):hover{border-color:var(--fg);background:rgba(241,243,245,.07)} }
.rnav:disabled{opacity:.25;cursor:default}

/* a lesson with one of its two days done is in progress, not complete */
.card.is-part{border-color:var(--dim)}
.card.is-part .tick-score{display:block;color:var(--dim)}
.card .cbar{display:block;height:4px;border-radius:2px;background:var(--panel);
  overflow:hidden;margin-top:8px}
.card .cbar i{display:block;height:100%;background:var(--free);border-radius:2px}

/* ══ UNIT PAGER ══
   One unit of lessons at a time. Fifty cards on a page is unusable, so the
   shelf pages through units: arrows, the unit's name and how much of it is
   built, and numbered buttons to jump. It remembers where you were. */
.unithead{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.unitmid{flex:1;min-width:0;text-align:center}
.unittag{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0}
.unitname{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:5px 0 4px;
  line-height:1.25;text-wrap:balance}
.unitcount{font-size:.78rem;color:var(--dim);margin:0}
.unitnav{flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--panel);color:var(--fg);border:1px solid var(--line);
  font-size:22px;line-height:1;display:grid;place-items:center;
  transition:border-color .2s,background .2s,opacity .2s}
@media(hover:hover){ .unitnav:hover:not(:disabled){border-color:var(--a);background:var(--panel-2)} }
.unitnav:disabled{opacity:.3;cursor:default}
.unitnav:focus-visible{outline:2px solid var(--a);outline-offset:2px}

.unitdots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.unitdot{width:38px;height:38px;border-radius:var(--r);cursor:pointer;
  background:var(--panel);color:var(--dim);border:1px solid var(--line);
  font-family:inherit;font-size:14px;font-weight:800;
  transition:all .2s}
@media(hover:hover){ .unitdot:hover{border-color:var(--a);color:var(--fg)} }
.unitdot[aria-current="true"]{background:var(--a);color:var(--a-ink);border-color:var(--a)}
.unitdot:focus-visible{outline:2px solid var(--a);outline-offset:2px}

@media(max-width:560px){
  .unithead{gap:10px}
  .unitnav{width:38px;height:38px;font-size:19px}
  .unitname{font-size:1.05rem}
  .unitdot{width:34px;height:34px;font-size:13px}
}