/* Times Tables Quest — shared site stylesheet.
 *
 * Tokens come from the approved handoff (handover/ttq-tokens.css, 12 Oct 2026).
 * Light is the default; dark is set by data-theme="dark" on <html>, which an
 * inline script in each page's <head> applies before the first paint.
 * The hero, the night bands and the footer are dark in both themes.
 *
 * Nothing here loads from another site. Cinzel is self-hosted (SIL OFL);
 * Palatino and Segoe UI are system fonts with fallbacks.
 */

/* ---------- Fonts ---------- */
@font-face{font-family:"Cinzel";src:url("../assets/fonts/cinzel-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url("../assets/fonts/cinzel-400.woff2") format("woff2");font-weight:400;font-display:swap}

/* ---------- Tokens ---------- */
:root,[data-theme="light"]{
  --bg:#f7f8fc; --card:#ffffff; --band:#eef0fa; --field:#ffffff;
  --ink:#151c3c; --dim:#4a5275; --rule:#dde1ef; --head:#151c3c;
  --accent:#5b3cc4;
  --here:#dcf3e6; --hereink:#17673f; --come:#ebe6fc; --comeink:#4a2fa8;
  --error:#b3261e;
  --shadow:0 10px 30px rgba(21,28,60,.10);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0a0e1f; --card:#151c3c; --band:#10162f; --field:#0f1530;
  --ink:#f1e9d6; --dim:#aeb5cf; --rule:#2b3768; --head:#f2c14e;
  --accent:#a58bff;
  --here:#173a2b; --hereink:#7fe3a9; --come:#2a2257; --comeink:#c8b8ff;
  --error:#ffb4a9;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root{
  /* fixed in both themes */
  --gold:#f2c14e; --gold-light:#ffe49a; --gold-deep:#b9852b;
  --night:#0a0e1f; --night-ink:#f1e9d6; --night-dim:#d6d9e8; --night-label:#aeb5cf; --night-rule:#2b3768;
  --footer:#070a17;
  --rainbow:linear-gradient(90deg,#ff6b78,#f2c14e,#54d98c,#74c7ff,#6d4bd1,#a58bff);
  --gold-text:linear-gradient(180deg,#fff3c4 0%,#ffe49a 30%,#f2c14e 60%,#c9952f 100%);
  /* type */
  --cin:"Cinzel","Palatino Linotype",Palatino,Georgia,serif;
  --pal:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --fs-h1:clamp(40px,5.4vw,68px); --fs-h2:clamp(30px,3.4vw,42px); --fs-statement:clamp(22px,2.4vw,28px);
  --fs-h3:20px; --fs-lead:18px; --fs-body:17px; --fs-ui:15px; --fs-small:14px;
  --fs-label:13px; /* handoff says 11–12; BRAND.md sets 13px as the site's floor */
  --lh-body:1.65; --lh-head:1.15;
  /* layout */
  --max:1240px; --gutter:32px; --section-y:96px; --gap:20px;
  --r-btn:8px; --r-door:10px; --r-card:12px; --r-panel:14px; --r-chip:6px;
  --target:48px;
}
@media (max-width:640px){
  :root{--gutter:16px; --section-y:64px}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-body); line-height:var(--lh-body);
  transition:background-color .2s,color .2s;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--ink); text-decoration:underline}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[hidden]{display:none!important}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:16px; top:-100px; z-index:100; background:var(--card); color:var(--ink); padding:12px 18px; border-radius:var(--r-btn); box-shadow:var(--shadow); font-weight:600}
.skip-link:focus{top:12px}

/* Small capital labels: source lines and table headings only. */
.label{font:600 var(--fs-label)/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}

/* ---------- Type ---------- */
.h2{font-family:var(--pal); font-weight:700; font-size:var(--fs-h2); line-height:var(--lh-head); color:var(--head); text-wrap:pretty}
.h3{font-family:var(--cin); font-weight:700; font-size:var(--fs-h3); line-height:1.25; color:var(--head)}
.lead{font-size:var(--fs-lead); color:var(--dim); text-wrap:pretty}
.statement{font-family:var(--pal); font-style:italic; font-size:var(--fs-statement); line-height:1.3}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--target); padding:0 22px; border-radius:var(--r-btn);
  font-weight:600; font-size:16px; line-height:1.2; text-decoration:none; text-align:center;
  border:1.5px solid transparent; transition:background-color .2s,color .2s,border-color .2s;
}
.btn:hover{text-decoration:none}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#151c3c}
.btn-gold:hover{background:var(--gold-light); border-color:var(--gold-light); color:#151c3c}
.btn-outline{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-outline:hover{background:var(--band); color:var(--ink)}
.btn-ink{border-color:var(--ink); background:var(--ink); color:var(--bg)}
.btn-ink:hover{background:var(--dim); border-color:var(--dim); color:var(--bg)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}
.link-arrow{display:inline-flex; align-items:center; min-height:var(--target); font-weight:600; font-size:var(--fs-ui)}

/* ---------- Chips ---------- */
.chip{flex:none; display:inline-block; border-radius:var(--r-chip); padding:2px 10px; font-size:13px; font-weight:600; line-height:1.5; white-space:nowrap; border:1px solid transparent}
.chip-here{background:var(--here); color:var(--hereink)}
.chip-come{background:var(--come); color:var(--comeink)}
.chip-never{border-color:var(--ink); color:var(--ink)}

/* ---------- Header ---------- */
.site-header{position:relative; z-index:50; background:var(--bg); border-bottom:1px solid var(--rule); transition:background-color .2s}
.site-header{position:sticky; top:0}
/* in-page links land below the sticky header, not under it */
main [id]{scroll-margin-top:88px}
.bar{display:flex; align-items:center; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; min-height:var(--target); color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand img{height:38px; width:38px; display:block; border-radius:50%}
.brand span{font-family:var(--cin); font-weight:700; font-size:20px; letter-spacing:.02em; color:var(--head); line-height:1.1}
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0 22px; flex-wrap:wrap}
.nav-item{
  display:flex; align-items:center; gap:6px; min-height:var(--target); padding:0 2px;
  background:none; border:0; color:var(--ink); font-size:var(--fs-ui); font-weight:500; text-decoration:none;
}
a.nav-item:hover{color:var(--ink); text-decoration:underline}
.nav-item[aria-current="page"]{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.tools{display:flex; align-items:center; gap:10px}
.theme-toggle{
  width:var(--target); height:var(--target); border-radius:999px; border:1.5px solid var(--rule);
  background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; padding:0;
}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.login-btn,.join-btn{min-height:var(--target); padding:0 20px; font-size:var(--fs-ui); border-radius:999px; white-space:nowrap}
.join-btn{background:var(--gold); border-color:var(--gold); color:#151c3c}
.join-btn:hover{background:var(--gold-light); border-color:var(--gold-light); color:#151c3c}
.login-btn[aria-expanded="true"]{background:var(--band)}
html:not(.js) .theme-toggle,
html:not(.js) .login-btn{display:none}
.rainbow{height:3px; background:var(--rainbow)}

/* Desktop: logo, three links, then the switch and the two pills on the right. */
.site-header .wrap{max-width:1380px}
.main-nav{margin-left:8px}
.main-nav ul{gap:0 6px}
.main-nav .nav-item{padding:0 12px; border-radius:999px; font-weight:600}
.main-nav a.nav-item:hover{background:var(--band); text-decoration:none}
.tools{margin-left:auto}
/* The menu button (phones). Without JavaScript it is a link down to the
   same links at the foot of the page. */
.menu-btn,.menu-link{display:none; flex:none; width:var(--target); height:var(--target); align-items:center; justify-content:center; padding:0;
  border:1.5px solid var(--rule); border-radius:999px; background:var(--card); color:var(--ink)}
.menu-btn svg,.menu-link svg,.drawer-close svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.menu-btn:hover,.menu-link:hover{border-color:var(--ink); color:var(--ink)}

/* Phones and small tablets: one fixed row */
@media (max-width:979px){
  .bar{flex-wrap:nowrap; gap:8px; min-height:64px}
  .main-nav,.tools > .theme-toggle{display:none}
  .tools{gap:6px; margin-left:auto}
  .js .menu-btn{display:inline-flex}
  html:not(.js) .menu-link{display:inline-flex}
  .join-btn,.login-btn{padding:0 16px}
  .brand{gap:8px; min-width:0}
  .brand .brand-name{font-size:16px}
}
@media (max-width:560px){
  .brand .brand-name{font-size:13px; max-width:8em}
  .join-btn,.login-btn{padding:0 12px; font-size:14px}
}
/* Below 400px the prism alone; the name stays for screen readers */
@media (max-width:399px){
  .brand-name{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
}

/* ---------- Log-in panel ---------- */
.login-panel{
  position:absolute; top:100%; margin-top:10px; right:max(var(--gutter),calc((100% - 1380px) / 2 + var(--gutter)));
  width:340px; max-width:calc(100% - 2 * var(--gutter));
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-panel); box-shadow:var(--shadow);
  padding:18px; display:flex; flex-direction:column; gap:8px;
}
.login-panel .login-title{margin:0; font-family:var(--cin); font-weight:700; font-size:18px; color:var(--head); padding:0 4px 4px}
.login-panel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.login-option{display:flex; flex-direction:column; padding:12px 14px; border-radius:var(--r-door); background:var(--band); color:var(--ink); text-decoration:none; min-height:var(--target)}
.login-option:hover{color:var(--ink); text-decoration:none; outline:1.5px solid var(--rule)}
.login-option strong{font-size:var(--fs-ui)}
.login-option span{font-size:var(--fs-small); color:var(--dim)}
.login-option.is-parent{background:var(--come)}
.login-option.is-school{background:var(--gold); color:#151c3c}
.login-option.is-school span{color:#2b3150}
.login-option.is-school:hover{background:var(--gold-light); color:#151c3c}

/* ---------- Night bands (dark in both themes) ---------- */
.night{
  background-color:var(--night); color:var(--night-ink);
  --accent:#a58bff; --ink:var(--night-ink); --dim:var(--night-dim); --rule:var(--night-rule);
  color-scheme:dark;
}
.night a:not(.btn):not(.door){color:var(--gold-light)}
.night-hero{background-image:radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,228,154,.75),transparent 60%),radial-gradient(1px 1px at 33% 68%,rgba(241,233,214,.6),transparent 60%),radial-gradient(1.4px 1.4px at 58% 18%,rgba(255,228,154,.8),transparent 60%),radial-gradient(1px 1px at 76% 52%,rgba(165,139,255,.7),transparent 60%),radial-gradient(900px 420px at 85% 0%,rgba(109,75,209,.22),transparent 70%)}
.night-teach{background-image:radial-gradient(1.2px 1.2px at 8% 30%,rgba(255,228,154,.7),transparent 60%),radial-gradient(1px 1px at 92% 20%,rgba(241,233,214,.6),transparent 60%),radial-gradient(800px 380px at 10% 100%,rgba(109,75,209,.2),transparent 70%)}
.night-join{background-image:radial-gradient(1.2px 1.2px at 20% 30%,rgba(255,228,154,.7),transparent 60%),radial-gradient(1px 1px at 80% 70%,rgba(241,233,214,.6),transparent 60%),radial-gradient(700px 300px at 50% 0%,rgba(109,75,209,.25),transparent 70%)}
.night .btn-outline{border-color:var(--night-ink); color:var(--night-ink)}
.night .btn-outline:hover{background:rgba(241,233,214,.1); color:var(--night-ink)}
.night .label{color:var(--night-label)}

/* ---------- Hero ---------- */
/* The panorama is never covered, shaded or cropped: it is shown whole, at its
   own shape. Phones get the smaller crop James had cut for them. */
.hero-figure{margin:0; background:var(--night)}
.hero-art{display:block; background:var(--night)}
.hero-caption{text-align:center; font-family:var(--cin); font-weight:700; color:var(--gold-light); font-size:15px; letter-spacing:.06em; padding:12px var(--gutter) 0}
.hero-art img{display:block; width:100%; height:auto}
.hero-body{padding-top:64px; padding-bottom:56px; display:flex; flex-direction:column; gap:44px}
.hero-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:48px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:18px}
.hero-copy h1{
  font-family:var(--cin); font-weight:700; font-size:var(--fs-h1); line-height:1.04; letter-spacing:.01em;
  background:var(--gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy .statement{color:var(--night-ink)}
/* "Live now" marker. The hero is dark in both themes, so one set of colours. */
.live{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  padding:6px 16px 6px 12px; border-radius:999px;
  border:1px solid rgba(84,217,140,.45); background:rgba(84,217,140,.08);
  color:var(--night-ink); font-size:var(--fs-small); font-weight:600; line-height:1.4;
}
.live-dot{position:relative; flex:none; width:10px; height:10px; border-radius:50%; background:#54d98c}
.live-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:#54d98c; opacity:0;
  animation:live-pulse 2s ease-out infinite;
}
@keyframes live-pulse{0%{transform:scale(1); opacity:.55} 100%{transform:scale(2.8); opacity:0}}
.hero-copy .lead{color:var(--night-dim); max-width:520px}
.hero-shots{position:relative; margin:0; padding:0 0 48px}
.hero-shots img{display:block; height:auto; border-radius:10px}
.hero-shots .shot-main{width:88%; border:1px solid var(--night-rule); box-shadow:0 24px 60px rgba(0,0,0,.5)}
.hero-shots .shot-over{position:absolute; right:0; bottom:0; width:46%; border:1px solid var(--gold); box-shadow:0 20px 50px rgba(0,0,0,.55)}

/* ---------- Doors ---------- */
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:14px; list-style:none; margin:0; padding:0}
.door{
  display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:88px; height:100%;
  padding:18px 20px; border-radius:var(--r-door); text-decoration:none;
  border:1.5px solid rgba(241,233,214,.7); color:var(--night-ink); background:transparent;
  transition:background-color .2s,border-color .2s;
}
.door:hover{text-decoration:none; color:var(--night-ink); background:rgba(241,233,214,.08); border-color:var(--night-ink)}
.door-title{font-family:var(--cin); font-weight:700; font-size:19px; line-height:1.25}
.door-line{font-size:var(--fs-ui); color:var(--night-dim)}
.door-gold{background:var(--gold); border-color:var(--gold); color:#151c3c}
.door-gold:hover{background:var(--gold-light); border-color:var(--gold-light); color:#151c3c}
.door-gold .door-line{color:#2b3150}
.door-with-extra{position:relative}
.door-with-extra .door{padding-bottom:56px}
.night .door-extra{position:absolute; left:20px; bottom:6px; display:inline-flex; align-items:center; min-height:var(--target); color:var(--gold-light); font-weight:600; font-size:var(--fs-ui)}

/* ---------- Facts strip ---------- */
.facts-band{background:var(--card); border-bottom:1px solid var(--rule)}
.facts{list-style:none; margin:0 auto; padding-top:22px; padding-bottom:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px 32px; font-size:var(--fs-ui); line-height:1.4}
.facts li{display:flex; gap:12px; align-items:center}
.fact-ico{flex:none; width:30px; height:30px; border-radius:50%; border:1.75px solid var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}

/* ---------- Proof row ---------- */
.proof{border-bottom:1px solid var(--rule)}
.proof-body{padding-top:56px; padding-bottom:56px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 48px; align-items:center}
.proof-copy{display:flex; flex-direction:column; gap:12px; max-width:860px}
.proof-title{font-family:var(--pal); font-weight:700; font-size:20px; line-height:1.3; color:var(--dim)}
.proof-main{font-family:var(--pal); font-weight:700; font-size:clamp(26px,3vw,38px); line-height:1.2; color:var(--head); text-wrap:balance}
.proof-second{font-size:var(--fs-lead); color:var(--ink)}
.proof-source{margin-top:4px}
/* Number tiles: built, empty and hidden until there are checked numbers. */
.proof-tiles{list-style:none; margin:0; padding:0; display:flex; gap:var(--gap); flex-wrap:wrap}
.tile{min-width:150px; padding:18px 20px; border:1px solid var(--rule); border-radius:var(--r-card); background:var(--card); display:flex; flex-direction:column; gap:4px}
.tile-num{font-family:var(--cin); font-weight:700; font-size:40px; line-height:1; color:var(--head); font-variant-numeric:tabular-nums}
.tile-label{font-size:var(--fs-small); color:var(--dim)}
@media (max-width:899px){ .proof-body{grid-template-columns:minmax(0,1fr)} }

/* ---------- Sections ---------- */
.section{padding-top:calc(var(--section-y) + 8px); padding-bottom:var(--section-y)}
.band{background:var(--band); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.band > .wrap,.night > .wrap.section-body{padding-top:var(--section-y); padding-bottom:var(--section-y)}
.stack{display:flex; flex-direction:column}
.intro{display:flex; flex-direction:column; gap:14px; max-width:780px}

/* Who it's for */
.who{gap:44px; padding-bottom:56px}
.who-statements{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:28px 48px}
.who-statements > div{display:flex; flex-direction:column; gap:10px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--gap)}
.card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column}
.card img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block}
.pair{display:grid; grid-template-columns:1fr 1fr; aspect-ratio:16/9; overflow:hidden}
.card .pair img{height:100%; aspect-ratio:auto; object-position:center 30%}

/* Heroes strip: one row on laptops, a sideways scroll inside its own box on phones */
.heroes-body{margin:0 auto; padding-bottom:var(--section-y); display:flex; flex-direction:column; gap:22px}
.heroes-scroll{overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:4px 2px 10px; border-radius:var(--r-card)}
.heroes-scroll ul{list-style:none; margin:0; padding:0; display:flex; gap:14px}
.heroes-scroll li{flex:1 0 128px; scroll-snap-align:start}
.heroes-scroll img{display:block; width:100%; height:auto; aspect-ratio:1; border-radius:var(--r-card); border:1px solid var(--rule); box-shadow:var(--shadow)}
.heroes-body figcaption{text-align:center; font-family:var(--pal); font-style:italic; font-size:var(--fs-statement); line-height:1.3; color:var(--head); text-wrap:balance}
.card-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-body p{color:var(--dim)}
.card-body .link-arrow{margin-top:auto}

/* Against the game: find / won't find */
.together{gap:40px}
.together .statement{font-size:22px; line-height:1.4}
.together-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 48px; align-items:center}
/* The Prism with the six shards fanned either side of it. Decorative. */
.gems{display:flex; align-items:center; justify-content:center; gap:6px}
.gems img{display:block; width:auto; filter:drop-shadow(0 10px 18px rgba(21,28,60,.25))}
.gems .s1,.gems .s6{height:72px}
.gems .s2,.gems .s5{height:96px}
.gems .s3,.gems .s4{height:120px}
.gems .prism{width:88px; height:88px; border-radius:50%; margin:0 4px; box-shadow:0 0 0 2px var(--gold),0 0 32px rgba(242,193,78,.45); filter:none}
@media (max-width:1000px){
  .together-head{grid-template-columns:minmax(0,1fr)}
  .gems{justify-content:flex-start}
}
@media (max-width:640px){
  .gems{gap:4px}
  .gems .s1,.gems .s6{height:52px}
  .gems .s2,.gems .s5{height:70px}
  .gems .s3,.gems .s4{height:88px}
  .gems .prism{width:64px; height:64px}
}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:var(--gap)}
.find,.wont{border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:16px}
.find{background:var(--card); border:1px solid var(--rule)}
.wont{border:1.5px dashed var(--rule)}
.find h3,.wont h3{font-size:var(--fs-ui); font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.find h3{color:var(--hereink)}
.wont h3{color:var(--dim)}
.find ul,.wont ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.find li{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; border-top:1px solid var(--rule); padding-top:14px}
.wont li{color:var(--dim); border-top:1px solid var(--rule); padding-top:14px}

/* Teach. Practise. Check. */
.teach{gap:36px}
.teach h2{font-family:var(--cin); font-weight:700; font-size:clamp(32px,3.6vw,46px); line-height:1.1; color:var(--gold)}
.teach .lead{color:var(--night-dim)}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; list-style:none; margin:0; padding:0}
.step{
  width:100%; height:100%; text-align:left; border-radius:var(--r-card); padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.03); border:1.5px solid var(--night-rule); color:var(--night-ink);
  transition:background-color .2s,border-color .2s,color .2s;
}
.step:hover{border-color:var(--night-dim)}
.step-n{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; border:1.5px solid currentColor}
.step-text{display:flex; flex-direction:column; gap:2px}
.step-text strong{font-size:17px}
.step-text span{font-size:var(--fs-ui); opacity:.85}
.step[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#151c3c}
.step[aria-pressed="true"] .step-n{background:#151c3c; color:var(--gold); border-color:#151c3c}
.step-panel{display:flex; flex-direction:column; gap:14px}
.step-panel img{width:100%; height:auto; display:block; border-radius:var(--r-card); border:1px solid var(--night-rule); box-shadow:0 30px 70px rgba(0,0,0,.5); background:#0f1530}
.step-panel figcaption{display:flex; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; font-size:var(--fs-ui); color:var(--night-dim)}
.step-panels{display:flex; flex-direction:column; gap:40px}
.js .step-panel:not(.is-active){display:none}

/* Promises */
.promises{gap:28px}
.promises .intro{gap:12px; max-width:700px}
/* The chip's words and colour come from data-status alone, so flipping a
   promise from "coming" to "here" is a one-word edit in the HTML. */
.promise-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; border-top:1px solid var(--rule)}
.promise-list li{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule); text-wrap:pretty}
.promise-list li::after{flex:none; border-radius:var(--r-chip); padding:2px 10px; font-size:13px; font-weight:600; line-height:1.5; white-space:nowrap}
.promise-list li[data-status="here"]::after{content:"Here today"; background:var(--here); color:var(--hereink)}
.promise-list li[data-status="coming"]::after{content:"Coming"; background:var(--come); color:var(--comeink)}
.promises > .link-arrow{align-self:flex-start}
@media (max-width:760px){ .promise-list{grid-template-columns:minmax(0,1fr)} }
/* The full ledger (promises.html, to be built) */
.ledger{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden}
.ledger table{width:100%; border-collapse:collapse}
.ledger th{padding:12px 24px; text-align:left; border-bottom:1px solid var(--rule); font-weight:600}
.ledger th:last-child,.ledger td:last-child{text-align:right}
.ledger td{padding:16px 24px; border-bottom:1px solid var(--rule); vertical-align:middle; text-wrap:pretty}
.ledger td:last-child{width:1%; padding-left:0}
.ledger-foot{display:flex; justify-content:space-between; align-items:center; gap:4px 16px; flex-wrap:wrap; padding:6px 24px; font-size:var(--fs-small); color:var(--dim)}
.ledger-foot a{min-height:var(--target); display:inline-flex; align-items:center}
@media (max-width:640px){
  .ledger th,.ledger td{padding-left:16px; padding-right:16px}
  .ledger td:last-child{padding-left:0}
  .ledger-foot{padding:6px 16px}
}

/* Playing at home + school checker */
.home-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:48px; align-items:start}
.home-copy{display:flex; flex-direction:column; gap:22px}
.home-copy > p{color:var(--dim)}
.numbered{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.numbered li{display:flex; gap:16px}
.num{flex:none; width:32px; height:32px; border-radius:50%; border:1.75px solid var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700}
.panel{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-panel); padding:32px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow)}
.panel .h3{font-size:22px}
.panel > p{color:var(--dim); font-size:16px}
@media (max-width:640px){ .panel{padding:24px 20px} }
.fields{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px; font-size:var(--fs-small); font-weight:600}
.field input{
  height:var(--target); border:1.5px solid var(--rule); border-radius:var(--r-btn); padding:0 14px;
  font-weight:400; font-size:16px; background:var(--field); color:var(--ink); width:100%;
}
.field input:hover{border-color:var(--dim)}
.field input:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.field .postcode{text-transform:uppercase}
.fields .btn{align-self:flex-start; padding:0 26px}
.result{background:var(--come); border-radius:var(--r-door); padding:20px; display:flex; flex-direction:column; gap:14px; color:var(--ink)}
.result:focus{outline:none}
.result:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.result .btn{font-size:var(--fs-ui)}
.text-btn{align-self:flex-start; min-height:var(--target); background:none; border:0; padding:0; color:var(--comeink); font-size:var(--fs-small); text-decoration:underline}
.text-btn:hover{color:var(--ink)}

/* Schools */
.heads-card{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:clamp(24px,4vw,48px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px; align-items:center}
.heads-copy{display:flex; flex-direction:column; gap:20px}
.heads-copy .h2{font-size:clamp(28px,3vw,38px)}
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:16px}
.ticks li{display:flex; gap:12px; border-top:1px solid var(--rule); padding-top:12px}
.tick{color:var(--hereink); font-weight:700}
.heads-card > img{width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--rule); box-shadow:var(--shadow)}

/* Shaped in a real classroom */
.classroom{border-top:1px solid var(--rule)}
.classroom-body{max-width:880px; margin:0 auto; padding:88px var(--gutter); display:flex; flex-direction:column; gap:22px; text-align:center; align-items:center}
.classroom h2{font-family:var(--pal); font-weight:700; font-size:clamp(24px,2.6vw,30px); line-height:1.2; color:var(--head)}
.classroom .lead{max-width:640px}

/* Join the quest */
.join-body{padding-top:88px; padding-bottom:88px; display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center}
.join-body h2{font-family:var(--cin); font-weight:700; font-size:clamp(32px,3.6vw,46px); line-height:1.1; color:var(--gold)}
.join-body p{font-size:var(--fs-lead); color:var(--night-dim)}
.join-body .btn-row{justify-content:center}

/* ---------- Enquiry box ---------- */
html.dialog-open{overflow:hidden}
.enquiry{
  width:min(600px, calc(100% - 32px)); max-height:calc(100% - 32px); padding:0; margin:auto;
  border:1px solid var(--rule); border-radius:var(--r-panel); box-shadow:var(--shadow);
  background:var(--card); color:var(--ink); overflow:auto; overscroll-behavior:contain;
}
.enquiry::backdrop{background:rgba(10,14,31,.66)}
.enquiry-box{padding:20px 28px 28px; display:flex; flex-direction:column; gap:10px}
.grownups{margin:0; min-height:var(--target); display:flex; align-items:center; padding-right:96px; font-size:var(--fs-small); font-weight:700; color:var(--dim)}
.enquiry-top{display:flex; flex-direction:column-reverse; align-items:stretch; gap:4px}
.enquiry-box{position:relative}
.enquiry-close{position:absolute; top:20px; right:28px; padding:0 16px; font-size:var(--fs-ui)}
.tabs{display:flex; flex-wrap:nowrap; gap:4px; border-bottom:1px solid var(--rule)}
.tab{flex:1 1 33%; min-height:var(--target); padding:4px 8px; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; color:var(--dim); font-size:var(--fs-ui); font-weight:600; text-align:center; line-height:1.25}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.enquiry-panel{display:flex; flex-direction:column; gap:8px}
.enquiry-panel .h3{font-size:22px}
.enquiry-intro{color:var(--dim); font-size:16px}
.enquiry-form{display:flex; flex-direction:column; gap:16px; margin-top:8px}
.form-field{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; border:0; min-width:0}
.form-field label,.form-field legend{font-size:var(--fs-small); font-weight:600; padding:0}
.form-field input,.form-field select,.form-field textarea{
  width:100%; min-height:var(--target); border:1.5px solid var(--rule); border-radius:var(--r-btn); padding:0 14px;
  font-size:16px; background:var(--field); color:var(--ink);
}
.form-field textarea{padding:12px 14px; resize:vertical; line-height:1.5}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:var(--dim)}
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.form-field .postcode{text-transform:uppercase}
.form-field [aria-invalid="true"]{border-color:var(--error)}
.field-error{color:var(--error); font-size:var(--fs-small); font-weight:600}
.years{flex-direction:row; flex-wrap:wrap; gap:0 18px}
.years legend{width:100%; margin-bottom:2px}
.check{display:flex; align-items:center; gap:12px; min-height:var(--target); font-size:16px; cursor:pointer}
.check input{flex:none; width:22px; height:22px; margin:0; accent-color:var(--accent)}
.enquiry-form > .check{align-items:flex-start; padding-top:12px}
.enquiry-form > .check input{margin-top:1px}
.enquiry-form .btn-ink{align-self:flex-start; padding:0 32px}
.enquiry-form .btn-ink:disabled{opacity:.45; cursor:default}
.privacy-line{font-size:var(--fs-small); color:var(--dim)}
/* An inline link, but still a 48px target: padding makes the tap area tall,
   negative margins keep the line spacing as it was. */
.privacy-line a{padding:15px 0}
.form-status{font-size:var(--fs-small); font-weight:600}
.form-status:empty{display:none}
.trap{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.form-done{background:var(--here); color:var(--hereink); border-radius:var(--r-door); padding:20px; font-weight:600}
.form-done:focus{outline:none}
.form-done:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:480px){
  .enquiry{width:calc(100% - 16px); max-height:calc(100% - 16px)}
  .enquiry-box{padding:16px 16px 24px}
  .tab{padding:4px 4px; font-size:14px}
  .enquiry-close{top:16px; right:16px}
}

/* ---------- Inner pages ---------- */
/* Inline links in running text: vertical padding on an inline element makes
   the tap area 48px tall without moving any lines, and long links still wrap. */
main p a:not(.btn), main li a:not(.btn):not(.link-arrow):not(.login-option):not(.door):not(.mail), .refs a, .faq summary + p a{padding:15px 0}
/* A link inside a sentence is underlined, so it never relies on colour alone. */
main p a:not([class]), main li span a:not([class]), main .ruled li a:not([class]), main .notes a:not([class]){text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.eyebrow{font-size:var(--fs-ui); font-weight:600; color:var(--dim); letter-spacing:.01em}
.night .eyebrow{color:var(--night-label)}
.gap-16{gap:16px} .gap-20{gap:20px} .gap-24{gap:24px} .gap-32{gap:32px}
.small{font-size:var(--fs-small)} .dim{color:var(--dim)} .self-start{align-self:flex-start}
.wrap.narrow{max-width:calc(900px + 2 * var(--gutter))}
.h2.sm{font-size:clamp(24px,2.6vw,30px)}
.h2.cin{font-family:var(--cin)}
code{font-family:var(--mono); font-size:.92em; background:var(--band); padding:1px 6px; border-radius:4px; overflow-wrap:anywhere}

.page-open{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:48px; align-items:center; padding-top:80px; padding-bottom:72px}
.page-open-copy{display:flex; flex-direction:column; gap:18px}
.page-open h1,.article-open h1{font-family:var(--cin); font-weight:700; font-size:clamp(34px,4.6vw,56px); line-height:1.08; color:var(--head); text-wrap:balance}
.night .page-open h1{color:var(--gold)}
.page-open-art{width:100%; height:auto; display:block; border-radius:var(--r-panel); box-shadow:var(--shadow)}
.page-open-art.shot{border:1px solid var(--night-rule); box-shadow:0 30px 70px rgba(0,0,0,.5)}
.page-open-art.portrait-art{max-width:420px; justify-self:center}
@media (max-width:640px){ .page-open{padding-top:48px; padding-bottom:48px; gap:32px} }

.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:48px; align-items:start}
.two-col.cards-2{gap:24px}
.two-col.even{align-items:stretch}
.tiles4{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gap)}
.tile-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); padding:24px; display:flex; flex-direction:column; gap:8px}
.tile-card .h3{font-size:19px}
.tile-card p{color:var(--dim); font-size:16px}
.list-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-panel); padding:28px; display:flex; flex-direction:column; gap:14px}
@media (max-width:640px){ .list-card{padding:22px 18px} }
.ruled{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:16px}
.ruled li{border-top:1px solid var(--rule); padding-top:12px}
.ruled .with-chip{display:flex; gap:10px; align-items:flex-start}
.ruled .here-row,.ruled .come-row{border-top:0; border-radius:8px; padding:12px 14px; color:var(--ink)}
.ruled .here-row{background:var(--here)}
.ruled .come-row{background:var(--come)}
.ticks.plain li{border-top:0; padding-top:0}
.price-line{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; color:var(--dim)}
.price{font-family:var(--cin); font-weight:700; font-size:48px; line-height:1; color:var(--head)}
.statement.small-statement{font-size:19px; line-height:1.45; color:var(--dim)}

.notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; font-size:16px}
.note{border-radius:var(--r-door); padding:16px 18px; color:var(--ink)}
.note-come{background:var(--come)}
.note-here{background:var(--here)}
.coming-box{background:var(--card); border:1.5px dashed var(--rule); border-radius:var(--r-card); padding:18px 20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.coming-box.is-here{border-style:solid}
.login-card{margin:0; justify-self:center; width:100%; max-width:440px; background:#151c3c; color:var(--night-ink); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow)}
.login-card-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--cin); font-weight:700; color:var(--gold)}
.login-card-top img{width:30px; height:30px; border-radius:50%}
.login-card-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.login-card-fields div{background:var(--night); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column}
.login-card-fields span{font-size:13px; color:var(--night-label)}
.login-card-fields strong{font:700 20px/1.4 var(--mono)}
.login-card figcaption{font-size:var(--fs-small); color:var(--night-dim); border-top:1px solid var(--night-rule); padding-top:12px}
.checker-solo{max-width:calc(820px + 2 * var(--gutter))}

.faq{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden}
.faq details + details{border-top:1px solid var(--rule)}
.faq summary{min-height:var(--target); padding:14px 22px; cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font-weight:700; color:var(--dim)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline-offset:-3px}
.faq details > p{padding:0 22px 16px; color:var(--dim)}

/* Article pages: How it plays, How it teaches, Our promises, privacy, IT, note */
.article{padding-top:72px; padding-bottom:96px; display:flex; flex-direction:column; gap:56px; max-width:calc(960px + 2 * var(--gutter))}
.narrow-article{max-width:calc(780px + 2 * var(--gutter)); gap:28px}
.article-open{display:flex; flex-direction:column; gap:14px}
.honest{background:var(--come); color:var(--ink); border-radius:var(--r-card); padding:18px 22px}
.principles{display:flex; flex-direction:column; gap:12px}
.principle-list{list-style:none; margin:0; padding:0}
.principle{display:grid; grid-template-columns:44px minmax(0,1fr); gap:20px; border-top:1px solid var(--rule); padding:28px 0}
.principle-n{width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px}
.principle-body{display:flex; flex-direction:column; gap:12px}
.principle-body h3{font-family:var(--pal); font-weight:700; font-size:clamp(21px,2.4vw,26px); line-height:1.25; color:var(--head)}
.principle-body blockquote{font-family:var(--pal); font-style:italic; font-size:20px; line-height:1.4; border-left:3px solid var(--rule); padding-left:16px}
@media (max-width:520px){ .principle{grid-template-columns:minmax(0,1fr); gap:12px} }
.source{font-size:var(--fs-small); color:var(--dim)}
.shot-figure{margin:0; display:flex; flex-direction:column; gap:10px; min-width:0}
.shot-figure img{width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--rule); box-shadow:var(--shadow)}
.shot-figure figcaption{display:flex; justify-content:space-between; gap:4px 16px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--dim)}
.replace-box{background:var(--band); border:1px solid var(--rule); border-radius:var(--r-panel); padding:28px; display:flex; flex-direction:column; gap:12px}
.references{display:flex; flex-direction:column; gap:16px}
.refs{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px; font-size:16px}
.refs li{overflow-wrap:anywhere}
.manual-section{display:flex; flex-direction:column; gap:16px}
.portrait-grid{list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:12px}
.portrait-grid img{width:100%; height:auto; display:block; border-radius:var(--r-card); border:1px solid var(--rule)}
.loop{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:28px}
.loop > li{display:flex; gap:16px}
.loop > li > div{display:flex; flex-direction:column; gap:14px; min-width:0; flex:1}
.screens{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:760px){ .screens{grid-template-columns:repeat(2,minmax(0,1fr))} .screens .wide{grid-column:1 / -1} }
.notice-section{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--rule); padding-top:18px}
.notice-section h2{font-size:18px; font-weight:700}
.people strong{display:block}
.touch-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; align-items:center}
.touch-list li{display:flex; align-items:center; justify-content:center; gap:8px 12px; flex-wrap:wrap; color:var(--night-dim)}
.night .touch-list .mail{display:inline-flex; align-items:center; min-height:var(--target); padding:0; color:var(--gold-light)}
.forms-page{display:flex; flex-direction:column; gap:24px; max-width:760px}

/* Our promises: the chip on each row comes from its data-status alone */
.promises-page{max-width:calc(1080px + 2 * var(--gutter)); gap:36px}
.promise-group{display:flex; flex-direction:column; gap:12px}
.promise-group h2{font-family:var(--pal); font-weight:700; font-size:26px; color:var(--head)}
.promise-table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden}
.promise-table th{padding:12px 24px; text-align:left; border-bottom:1px solid var(--rule); font-weight:600}
.promise-table th:last-child{text-align:right}
.promise-table td{padding:14px 24px; vertical-align:middle; text-wrap:pretty}
.promise-table tr + tr td{border-top:1px solid var(--rule)}
.promise-table td.status{width:1%; white-space:nowrap; text-align:right; padding-left:0}
.promise-table td.status::after{display:inline-block; border-radius:var(--r-chip); padding:2px 10px; font-size:13px; font-weight:600; line-height:1.5}
.promise-table tr[data-status="here"] td.status::after{content:"Here today"; background:var(--here); color:var(--hereink)}
.promise-table tr[data-status="coming"] td.status::after{content:"Coming"; background:var(--come); color:var(--comeink)}
@media (max-width:640px){ .promise-table th,.promise-table td{padding-left:14px; padding-right:14px} .promise-table td.status{padding-left:0} }
.never ul{list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden}
.never li{padding:14px 24px}
.never li + li{border-top:1px solid var(--rule)}
.promises-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--dim)}
html:not(.js) [data-print]{display:none}

/* The note to school */
.note-maker{display:flex; flex-direction:column; gap:20px}
.openers{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.openers legend{font-size:var(--fs-small); font-weight:600; padding:0; margin-bottom:4px}
.note-paper{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-door); padding:22px; font-size:17px; box-shadow:var(--shadow)}
.note-paper p + p{margin-top:14px}   /* the flyer line, a blank line below the note, as in the copied text */
.note-actions{align-items:center}
.copied{margin:0; font-weight:600; color:var(--hereink)}
.copied:empty{display:none}
html:not(.js) [data-note-copy]{display:none}

/* Heard at the school gate (built, hidden until permissions are in) */
.bubbles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px}
.bubble{background:var(--card); border:1px solid var(--rule); border-radius:18px 18px 18px 4px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow)}
.bubble-who{font-size:var(--fs-small); color:var(--dim)}

/* ---------- The taster (js/taster.js; kept in the repo, not loaded on any page) ---------- */
.taster-section{gap:28px}
.taster{background-color:var(--night); color:var(--night-ink); border-radius:16px; padding:clamp(16px,3vw,32px); min-height:320px;
  --accent:#a58bff; --ink:var(--night-ink); --dim:var(--night-dim); --rule:var(--night-rule); color-scheme:dark}
.taster-nojs{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; font-size:var(--fs-lead)}
.taster-nojs img{width:100%; max-width:640px; height:auto; border-radius:12px}
.js .taster-nojs{display:none}
.t-screen{display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center}
.t-start-art{width:100%; max-width:720px; height:auto; border-radius:12px; display:block}
.t-start{padding:0 40px; font-size:18px}
.t-title{font-family:var(--cin); font-weight:700; font-size:clamp(24px,3vw,32px); color:var(--gold)}
.t-title:focus{outline:none}
.t-sum{font-family:var(--pal); font-size:clamp(36px,6vw,56px); line-height:1.1}
.t-heroes{list-style:none; margin:0; padding:0; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.t-hero{display:block; padding:0; border:3px solid var(--night-rule); border-radius:16px; background:none; overflow:hidden; width:clamp(96px,26vw,180px); transition:border-color .2s}
.t-hero:hover{border-color:var(--gold)}
.t-hero img{display:block; width:100%; height:auto}
.t-groups{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.t-group{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 14px; border:1px solid var(--night-rule); border-radius:12px; background:rgba(255,255,255,.03); transition:opacity .4s,transform .4s}
.t-hidden{opacity:0; transform:translateY(6px)}
.t-dots{display:grid; grid-template-columns:repeat(2,18px); gap:8px; justify-content:center}
.t-dot{width:18px; height:18px; border-radius:50%; background:#5ee7d8; box-shadow:0 0 10px rgba(94,231,216,.7)}
.t-count{font-weight:700; font-size:20px; color:var(--gold-light)}
.t-path{position:relative; width:100%; max-width:760px; height:120px; border-radius:14px; overflow:hidden; border:1px solid var(--night-rule)}
.t-path-art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 90%}   /* the gardens, so the only Prism is the one at the finish */
.t-stone{position:absolute; bottom:12px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:rgba(10,14,31,.7); border:2px solid var(--gold-light)}
.t-stone.t-passed{background:var(--gold)}
.t-token{position:absolute; bottom:34px; width:58px; height:58px; margin-left:-29px; border-radius:50%; border:3px solid var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.6); transition:left .6s ease}
.t-prism{position:absolute; right:12px; top:50%; width:64px; height:64px; margin-top:-32px; border-radius:50%; box-shadow:0 0 0 2px var(--gold); transition:box-shadow .6s}
.t-lit .t-prism{box-shadow:0 0 0 3px var(--gold-light),0 0 40px 14px rgba(255,228,154,.85); animation:prism-glow 1.6s ease-in-out infinite alternate}
@keyframes prism-glow{from{transform:scale(1)} to{transform:scale(1.1)}}
.t-form{display:flex; justify-content:center}
.t-answer{width:150px; min-height:60px; text-align:center; font-size:32px; font-weight:700; border-radius:10px; border:2px solid var(--night-rule); background:#0f1530; color:var(--night-ink)}
.t-answer:focus-visible{outline:2px solid #a58bff; outline-offset:2px; border-color:#a58bff}
.t-keys{display:grid; grid-template-columns:repeat(3,minmax(0,88px)); gap:10px; justify-content:center}
.t-key{min-height:56px; border-radius:10px; border:1.5px solid var(--night-rule); background:#151c3c; color:var(--night-ink); font-size:22px; font-weight:700}
.t-key:hover{border-color:var(--night-dim)}
.t-key.t-del{font-size:15px}
.t-key.t-enter{background:var(--gold); border-color:var(--gold); color:#151c3c; font-size:17px}
.t-end-text{font-size:var(--fs-lead); max-width:640px}
.t-end .btn-row{justify-content:center}
.t-end-text:focus{outline:none}
.taster .text-btn.t-again{color:#c8b8ff; font-size:var(--fs-ui)}
@media (max-width:420px){ .t-path{height:100px} .t-token{width:46px; height:46px; margin-left:-23px; bottom:30px} .t-prism{width:52px; height:52px; margin-top:-26px} }

/* ---------- Print (Our promises and anything else printed) ---------- */
@media print{
  :root,[data-theme]{--bg:#fff; --card:#fff; --band:#fff; --ink:#000; --dim:#333; --rule:#bbb; --head:#000;
    --here:#dcf3e6; --hereink:#17673f; --come:#ebe6fc; --comeink:#4a2fa8}
  .site-header,.site-footer,.skip-link,.no-print,.enquiry{display:none!important}
  body{background:#fff; color:#000; font-size:12pt}
  .article{padding:0; gap:18px}
  a{color:#000; text-decoration:none}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none!important}
  .promise-group{break-inside:avoid}
}

/* ---------- The phone menu drawer ---------- */
.drawer{position:fixed; inset:0 0 0 auto; margin:0; padding:0; width:min(86vw,360px); max-width:none; height:100%; max-height:none;
  border:0; border-left:1px solid var(--rule); background:var(--card); color:var(--ink); box-shadow:var(--shadow); overflow:auto; overscroll-behavior:contain}
.drawer::backdrop{background:rgba(10,14,31,.6)}
.drawer[open]{animation:drawer-in .25s ease-out}
@keyframes drawer-in{from{transform:translateX(100%)} to{transform:none}}
.drawer-box{padding:8px 16px 28px; display:flex; flex-direction:column; gap:18px}
.drawer-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.drawer-brand{display:flex; align-items:center; gap:8px; min-height:var(--target); color:var(--head); font-family:var(--cin); font-weight:700; font-size:16px; text-decoration:none}
.drawer-brand:hover{color:var(--head); text-decoration:none}
.drawer-brand img{width:30px; height:30px; border-radius:50%}
.drawer-close{flex:none; width:var(--target); height:var(--target); display:inline-flex; align-items:center; justify-content:center; padding:0; border:1.5px solid var(--rule); border-radius:999px; background:none; color:var(--ink)}
.menu-pages,.menu-doors{list-style:none; margin:0; padding:0}
.menu-pages a{display:flex; align-items:center; min-height:var(--target); padding:0 4px; border-bottom:1px solid var(--rule); color:var(--ink); font-size:17px; font-weight:600; text-decoration:none}
.menu-pages a:hover{color:var(--ink); text-decoration:underline}
.menu-pages a[aria-current="page"]{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.menu-doors{display:grid; gap:8px}
.menu-doors a{display:flex; flex-direction:column; justify-content:center; min-height:var(--target); padding:10px 14px; border-radius:var(--r-door); background:var(--band); color:var(--ink); text-decoration:none}
.menu-doors a:hover{color:var(--ink); text-decoration:none; outline:1.5px solid var(--rule)}
.menu-doors strong{font-family:var(--cin); font-size:16px}
.menu-doors span{font-size:var(--fs-small); color:var(--dim)}
.menu-doors a.is-school{background:var(--gold); color:#151c3c}
.menu-doors a.is-school span{color:#2b3150}
.theme-toggle.theme-wide{width:100%; height:auto; min-height:var(--target); border-radius:var(--r-door); justify-content:flex-start; gap:10px; padding:0 14px; font-weight:600; font-size:var(--fs-ui)}
@media (min-width:980px){ .drawer{display:none} }

/* Without JavaScript, the phone menu is a plain list at the foot of the page */
.foot-menu{display:none}
@media (max-width:979px){
  html:not(.js) .foot-menu{display:block; padding:32px 0 40px; border-top:1px solid var(--rule)}
  html:not(.js) .foot-menu .wrap{display:flex; flex-direction:column; gap:18px; max-width:calc(560px + 2 * var(--gutter))}
}

/* ---------- For schools: price and data protection, each a full-width panel ---------- */
.price-panel,.dpo-panel{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-panel); padding:32px}
.price-panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 48px; align-items:center}
.price-main{display:flex; flex-direction:column; gap:12px}
.price-main .price-line{font-size:20px; color:var(--ink)}
.price-main .price{font-size:clamp(52px,6vw,72px)}
.price-includes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px}
.price-foot{grid-column:1 / -1; border-top:1px solid var(--rule); padding-top:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 28px; align-items:center; font-size:16px}
.price-foot .note{margin:0}
.dpo-panel{display:flex; flex-direction:column; gap:24px}
.dpo-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.dpo-grid li{display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--rule); border-radius:var(--r-card); background:var(--bg); font-size:16px}
.icon{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; color:var(--ink)}
.dpo-foot{background:var(--come); color:var(--ink); border-radius:var(--r-card); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap}
.dpo-foot p{flex:1 1 320px; margin:0}
@media (max-width:1000px){ .dpo-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .price-panel{grid-template-columns:minmax(0,1fr)}
  .price-foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .dpo-grid,.price-includes{grid-template-columns:minmax(0,1fr)}
  .price-panel,.dpo-panel{padding:22px 18px}
}

/* ---------- For parents: the two routes, side by side and the same height ---------- */
.route-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.route-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-panel); padding:28px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow)}
.route-card .h3{font-size:22px}
.route-card p{color:var(--dim); font-size:var(--fs-lead)}
.route-card .btn{margin-top:auto; align-self:flex-start}
@media (max-width:700px){ .route-cards{grid-template-columns:minmax(0,1fr)} }

/* ---------- Motion (js/motion.js does the moving; everything off with reduced motion) ---------- */
/* The Prism's soft gold glow: an overlay that only changes opacity and scale. */
.prism-glow{position:absolute; width:22%; aspect-ratio:1; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,243,196,.75) 0%, rgba(242,193,78,.35) 38%, rgba(242,193,78,0) 70%);
  mix-blend-mode:screen; opacity:.25; animation:prism-pulse 3.4s ease-in-out infinite alternate}
@keyframes prism-pulse{from{opacity:.2; transform:translate(-50%,-50%) scale(.92)} to{opacity:.7; transform:translate(-50%,-50%) scale(1.08)}}
.hero-art-wrap{position:relative; z-index:1; will-change:transform}
.hero-glow{left:50.5%; top:47.5%; width:7%}
@media (max-width:700px){ .hero-glow{left:77%; top:42%; width:15%} }
.prism-wrap{position:relative; display:inline-flex; flex:none; margin:0 4px}
.prism-wrap .prism{margin:0}
.prism-wrap .prism-glow{left:50%; top:50%; width:170%}

/* Rise in: 16px up and a fade, 400ms, once per page view, played only as an
   element comes into view. Nothing is hidden beforehand (js/motion.js). */
@keyframes rise-in{from{opacity:0; transform:translate3d(0,16px,0)} to{opacity:1; transform:none}}
.rise-in{animation:rise-in .4s cubic-bezier(.2,.65,.25,1) var(--rise-delay,0ms) both}

/* The doors and the main cards lift 3px and catch a soft highlight on hover
   and keyboard focus; on phones, a brief press on tap. */
.door,.card,.tile-card,.route-card{position:relative; transition:transform .2s ease}
.door::after,.card::after,.tile-card::after,.route-card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.6), 0 14px 30px rgba(10,14,31,.18); opacity:0; transition:opacity .2s ease}
@media (hover:hover){
  .door:hover,.card:hover,.tile-card:hover,.route-card:hover{transform:translateY(-3px)}
  .door:hover::after,.card:hover::after,.tile-card:hover::after,.route-card:hover::after{opacity:1}
}
.door:focus-visible,.card:focus-within,.tile-card:focus-within,.route-card:focus-within{transform:translateY(-3px)}
.door:focus-visible::after,.card:focus-within::after,.tile-card:focus-within::after,.route-card:focus-within::after{opacity:1}
@media (hover:none){
  .door:active,.card:active,.route-card:active{transform:scale(.985); transition-duration:.08s}
}

/* Gold sparkles: small and few. Beside each "Here today" on Our promises,
   and at the end of the parents' messages (hidden until permissions are in).
   Drawn shapes, not characters, so screen readers have nothing to read. */
.sparkle,.promise-table tr[data-status="here"] td.status::before,.bubbles::after{
  content:""; display:inline-block; width:9px; height:9px; margin-right:7px; vertical-align:middle; background:var(--sparkle,#b9852b);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); opacity:.35; animation:twinkle 3.6s ease-in-out infinite}
[data-theme="dark"]{--sparkle:#f2c14e}
.promise-table tr[data-status="here"]:nth-child(2n) td.status::before{animation-delay:1.2s}
.promise-table tr[data-status="here"]:nth-child(3n) td.status::before{animation-delay:2.3s}
.bubbles::after{grid-column:1 / -1; justify-self:end; width:12px; height:12px}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.8)} 45%{opacity:1; transform:scale(1.15)}}

/* ---------- See the world of Solaria ---------- */
.world-title{font-family:var(--cin); font-weight:700; font-size:clamp(30px,3.4vw,44px); line-height:1.1; color:var(--gold)}
.world-frame{display:flex; flex-direction:column; gap:14px}
.world-stage{position:relative; aspect-ratio:16 / 9; border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--night-rule); background:#0f1530; box-shadow:0 30px 70px rgba(0,0,0,.5)}
.world-slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.2s ease}
.world-slide.is-active{opacity:1}
.world-pan{position:absolute; inset:0; transform-origin:50% 50%}
.world-pan img{width:100%; height:100%; object-fit:cover; display:block}
.world-slide.is-active .world-pan{animation:world-pan 9.4s linear both}
.world-frame.paused .world-pan,.world-frame.paused .prism-glow{animation-play-state:paused}
@keyframes world-pan{from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.08) translate3d(var(--kb-x,0),var(--kb-y,0),0)}}
.world-captions{display:grid}
.world-caption{grid-area:1 / 1; margin:0; color:var(--night-dim); font-size:var(--fs-lead); opacity:0; transition:opacity .6s ease}
.world-caption.is-active{opacity:1}
.world-controls{display:flex; align-items:center; justify-content:space-between; gap:12px}
.world-dots{display:flex; gap:0}
.world-dot{width:var(--target); height:var(--target); padding:0; border:0; background:none; display:inline-flex; align-items:center; justify-content:center}
.world-dot::before{content:""; width:12px; height:12px; border-radius:50%; border:2px solid var(--night-dim); transition:background-color .2s, transform .2s}
.world-dot[aria-pressed="true"]::before{background:var(--gold); border-color:var(--gold); transform:scale(1.15)}
.world-pause{flex:none; width:var(--target); height:var(--target); border-radius:999px; border:1.5px solid var(--night-rule); background:none; color:var(--night-ink); display:inline-flex; align-items:center; justify-content:center; padding:0}
.world-pause svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.world-pause .i-play{display:none}
.world-pause[aria-pressed="true"] .i-play{display:block; fill:currentColor}
.world-pause[aria-pressed="true"] .i-pause{display:none}
.world-actions{justify-content:flex-start}
/* Without JavaScript: the first picture and its caption, still. */
html:not(.js) .world-slide:not(:first-child),html:not(.js) .world-caption:not(:first-child),html:not(.js) .world-controls{display:none}
html:not(.js) .world-slide:first-child .world-pan{animation:none}
/* Reduced motion: still pictures, changed by the dots only. */
.world-still .world-slide,.world-still .world-caption{transition:none}
.world-still .world-pan{animation:none!important}
.world-still .world-pause{display:none}

@media print{ .rise-in{animation:none!important} }

/* ---------- Footer (dark in both themes) ---------- */
.site-footer{background:var(--footer); color:rgba(241,233,214,.85); font-size:15px; --accent:#a58bff; color-scheme:dark}
.footer-body{padding-top:64px; padding-bottom:32px}
.footer-cols{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.footer-logo{display:inline-flex; align-items:center; gap:10px; min-height:var(--target); color:var(--night-ink); text-decoration:none}
.footer-logo:hover{color:#fff; text-decoration:none}
.footer-logo img{width:30px; height:30px; border-radius:50%}
.footer-logo span{font-family:var(--cin); font-weight:700; font-size:18px}
.footer-brand p{margin:8px 0 0; max-width:34ch; color:rgba(241,233,214,.75)}
.footer-col h2{font-family:var(--cin); font-weight:700; color:var(--gold); font-size:14px; letter-spacing:.08em; margin:0 0 6px}
.footer-col ul{list-style:none; margin:0; padding:0}
.footer-col a{display:inline-flex; align-items:center; min-height:var(--target); color:rgba(241,233,214,.88); text-decoration:none}
.footer-col a:hover{color:#fff; text-decoration:underline}
.footer-legal{border-top:1px solid rgba(241,233,214,.15); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; font-size:13px; color:rgba(241,233,214,.72)}
@media (max-width:979px){ .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-brand{grid-column:1 / -1} }
@media (max-width:560px){ .footer-cols{grid-template-columns:minmax(0,1fr)} }

/* ---------- The front page (home v2) ---------- */
.btn{border-radius:999px}
.btn-glass{color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.btn-glass:hover{color:#fff; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.7)}

/* Opening: the classroom-to-quest art, full-bleed, drifting slowly */
.home-hero{position:relative; color:#fff; background:var(--night); overflow:hidden; isolation:isolate; --accent:#a58bff; color-scheme:dark}
.hh-art{position:absolute; inset:0; z-index:-2; display:block}
.hh-art img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.03); animation:hh-drift 30s ease-in-out infinite alternate}
@keyframes hh-drift{from{transform:scale(1.03)} to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
.hh-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(10,14,31,.9) 0%,rgba(10,14,31,.62) 34%,rgba(10,14,31,.12) 62%),linear-gradient(0deg,rgba(10,14,31,.88) 0%,transparent 30%)}
.hh-inner{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px 40px; align-items:center; padding-top:64px; padding-bottom:32px}
.hh-copy{max-width:520px; display:flex; flex-direction:column; gap:18px}
.home-hero .eyebrow,.final-band .eyebrow,.route-schools .eyebrow{color:var(--gold)}
.home-hero h1{font-family:var(--cin); font-weight:700; font-size:clamp(36px,4.6vw,60px); line-height:1.04; margin:0; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hh-sub{font-size:19px; color:rgba(255,255,255,.92); max-width:52ch}
.hh-sub strong{color:var(--gold); font-weight:600}
.hh-doors{grid-column:1 / -1; margin-top:8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.door.glass{min-height:0; padding:16px 18px; border-radius:16px; color:#fff; gap:2px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3)}
.door.glass:hover{background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.1)); border-color:rgba(242,193,78,.85); color:#fff}
.door.glass .door-title{font-family:var(--body); font-size:16.5px; font-weight:700}
.door.glass .door-title i{font-style:normal; color:var(--gold)}
.door.glass .door-line{font-size:14px; color:rgba(255,255,255,.82)}
/* The headline, word by word (the words exist only once the script has run) */
[data-words] .w{display:inline-block; opacity:0; transform:translate3d(0,18px,0); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
[data-words].words-go .w{opacity:1; transform:none}

/* The frosted cards: two screens of five that take turns (js/motion.js) */
.voice-col{position:relative}
.cards{position:relative; height:560px}
.frost{position:absolute; width:min(320px,52%); color:#fff; border-radius:18px; padding:16px 18px 14px; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.1)); border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 20px 50px -18px rgba(5,7,15,.6),inset 0 1px 0 rgba(255,255,255,.35)}
/* The light sweep moves by transform only, so it never shifts the layout. */
.frost::after{content:""; position:absolute; top:-40%; bottom:-40%; left:0; width:40%; transform:translateX(-150%) rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); opacity:0; pointer-events:none}
.frost.wait{opacity:0}
.frost.in{animation:frost-land .9s cubic-bezier(.2,.8,.2,1) both}
.frost.in::after{animation:frost-sheen 1.4s .35s ease-out both}
.frost.out{animation:frost-leave .7s ease-in both}
@keyframes frost-land{from{opacity:0; transform:translateY(18px) scale(.97); filter:blur(6px)} to{opacity:1; transform:none; filter:none}}
@keyframes frost-sheen{from{transform:translateX(-150%) rotate(18deg); opacity:1} to{transform:translateX(330%) rotate(18deg); opacity:0}}
@keyframes frost-leave{to{opacity:0; transform:translateY(-12px) scale(.98); filter:blur(6px)}}
.frost .who{display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:0; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.9)}
.frost .dot{width:22px; height:22px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.frost .q{display:block; margin:0; font-family:var(--pal); font-size:19px; line-height:1.38; text-shadow:0 1px 10px rgba(5,7,15,.45)}
.frost .react{position:absolute; right:12px; bottom:10px; font-size:14px}
.frost:has(.react) .q{padding-right:22px}
/* A card from the screen not showing is hidden from sight but never removed,
   so a screen reader still reads all ten, once each. */
.frost.off{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; border:0!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; box-shadow:none!important}
.frost.own{border-color:rgba(242,193,78,.75); background:linear-gradient(135deg,rgba(242,193,78,.22),rgba(255,255,255,.08))}
.frost .tag{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.06em; color:#151c3c; background:var(--gold); border-radius:999px; padding:1px 8px}
.frost.c0{left:0; top:0}
.frost.c1{left:51%; top:13%}
.frost.c2{left:8%; top:31%; width:min(210px,34%)}
.frost.c3{left:46%; top:44%}
.frost.c4{left:2%; top:68%; width:min(400px,66%)}
.permit{display:block; margin:10px 0 0; font-size:13px; color:rgba(255,255,255,.82)}

/* Trust strip */
.trust{background:var(--card); border-bottom:1px solid var(--rule)}
.trust-row{list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{display:flex; gap:12px; align-items:flex-start; padding:24px 20px; border-left:1px solid var(--rule)}
.fact:first-child{border-left:0; padding-left:0}
.fact .icon{width:28px; height:28px; color:var(--accent)}
.fact p{margin:0; font-size:15px; line-height:1.45; color:var(--dim)}
.fact strong{display:block; color:var(--ink); font-size:16px}

/* We don't just test. We teach. */
.tpc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center}
.tpc-head{display:flex; flex-direction:column; gap:14px}
.tpc-steps{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.tpc-step{display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:start; padding:18px; border-radius:16px; background:var(--card); border:1px solid var(--rule)}
.tpc-step .n{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-family:var(--cin); font-weight:700; font-size:20px; color:#151c3c}
.tpc-step .n1{background:#74c7ff} .tpc-step .n2{background:var(--gold)} .tpc-step .n3{background:#54d98c}
.tpc-step h3{margin:0; font-size:19px; color:var(--head)}
.tpc-step p{margin:2px 0 0; color:var(--dim); font-size:15.5px}
.tpc-art{margin:0; border-radius:24px; overflow:hidden; position:relative; aspect-ratio:4 / 5; box-shadow:0 30px 70px -30px rgba(21,28,60,.5)}
.tpc-art img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block}
.tpc-art figcaption{position:absolute; left:16px; right:16px; bottom:16px; padding:12px 14px; border-radius:12px; color:#fff; font-size:14.5px; line-height:1.4;
  background:rgba(10,14,31,.78); border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}

/* Look inside Solaria */

/* Two equal routes */
.routes-section{padding-top:0}
.routes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.route{display:flex; flex-direction:column; gap:12px; padding:32px; border-radius:24px; background:var(--card); border:1px solid var(--rule)}
.route-title{margin:0; font-family:var(--pal); font-size:28px; line-height:1.15; color:var(--head)}
.route-schools{background-color:var(--night); background-image:radial-gradient(circle at 85% 0%,rgba(109,75,209,.5),transparent 55%); color:#fff; border-color:transparent;
  --ink:var(--night-ink); --dim:var(--night-dim); --accent:#a58bff; color-scheme:dark}
.route-schools .route-title{color:#fff}
.route-ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1}
.route-ticks li{display:flex; gap:10px; font-size:15.5px; color:var(--ink)}
.route-ticks li::before{content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%;
  background:#54d98c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151c3c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat}
.route-price{margin:0; color:rgba(255,255,255,.85); font-size:15px}
.route-price span{font-family:var(--cin); font-size:40px; font-weight:700; color:var(--gold); line-height:1; margin-right:6px}
.route-schools .btn-outline{border-color:#fff; color:#fff}
.route-schools .btn-outline:hover{background:rgba(255,255,255,.1); color:#fff}

/* Made by Hartley House Studios */
.company{background:var(--band)}
.company-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center}
.company-copy{display:flex; flex-direction:column; gap:14px}
.company-copy .link-arrow{align-self:flex-start}
.creds{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.cred{display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:14px; background:var(--card); border:1px solid var(--rule); font-size:15px; line-height:1.45}
.cred .icon{color:var(--accent)}

/* The final band over the crystal-core-heroes art */
.final-band{position:relative; color:#fff; background:var(--night); overflow:hidden; isolation:isolate; --accent:#a58bff; color-scheme:dark}
.fb-art{position:absolute; inset:0; z-index:-2; display:block}
.fb-art img{width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; animation:hh-drift 30s ease-in-out infinite alternate}
.fb-shade{position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,rgba(10,14,31,.55),rgba(10,14,31,.88) 70%)}
.final{text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:136px; padding-bottom:136px}
.final h2{font-family:var(--cin); font-weight:700; font-size:clamp(30px,3.6vw,44px); line-height:1.12; text-shadow:0 2px 24px rgba(0,0,0,.5)}
.final .lead{color:rgba(255,255,255,.9)}
.final .btn-row{justify-content:center}

/* The world band now opens How it plays */
.article-top{padding-bottom:40px}

/* Tablet and phone */
@media (max-width:979px){
  .hh-inner{grid-template-columns:minmax(0,1fr)}
  .hh-shade{background:linear-gradient(180deg,rgba(10,14,31,.3) 0,rgba(10,14,31,.62) 200px,rgba(10,14,31,.82) 520px,rgba(10,14,31,.74) 100%)}
  .hh-art img{object-position:28% 50%}
  .cards{height:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:8px}
  .frost{position:relative; grid-column:1; left:auto!important; top:auto!important; width:auto!important}
  .frost .q{font-size:17px}
  .hh-doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{border-left:0; padding-left:0; border-top:1px solid var(--rule)}
  .fact:nth-child(-n+2){border-top:0}
  .tpc{grid-template-columns:minmax(0,1fr); gap:32px}
  .tpc-art{aspect-ratio:16 / 10}
  .routes{grid-template-columns:minmax(0,1fr)}
  .company-grid{grid-template-columns:minmax(0,1fr); gap:28px}
}
@media (max-width:600px){
  .hh-inner{padding-top:32px; padding-bottom:24px; gap:24px}
  .hh-sub{font-size:17px}
  .hh-doors{gap:10px}
  .door.glass{padding:14px}
  .trust-row{grid-template-columns:minmax(0,1fr)}
  .fact{border-top:1px solid var(--rule)!important}
  .fact:first-child{border-top:0!important}
  .route{padding:24px}
  .creds{grid-template-columns:minmax(0,1fr)}
  .final{padding-top:88px; padding-bottom:88px}
}

/* ---------- The timed invitation: a small card, never a full-screen box ---------- */
.invite{position:fixed; z-index:70; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); width:min(380px, calc(100% - 40px));
  background:var(--card); color:var(--ink); border:1px solid var(--rule); border-radius:18px; box-shadow:0 24px 60px -20px rgba(10,14,31,.55);
  padding:16px 20px 18px; display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translate3d(0,24px,0)}
.invite[hidden]{display:none}
.invite.is-in{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.invite.is-out{opacity:0; transform:translate3d(0,24px,0); transition:opacity .4s ease-in, transform .4s ease-in}
.invite-for{margin:0; font-size:var(--fs-small); font-weight:700; color:var(--dim); min-height:24px; padding-right:52px}
.invite-title{margin:0; font-family:var(--cin); font-weight:700; font-size:21px; line-height:1.2; color:var(--head); padding-right:40px}
.invite-text{margin:0 0 6px; color:var(--dim); font-size:16px}
.invite-actions{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap}
.invite-no{color:var(--accent); font-size:var(--fs-ui)}
.invite-close{position:absolute; top:6px; right:6px; width:var(--target); height:var(--target); border:0; border-radius:999px; background:none; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; padding:0}
.invite-close:hover{background:var(--band)}
.invite-close svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
@media (max-width:599px){
  .invite{left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); width:auto; border-radius:18px 18px 14px 14px}
}
@media print{ .invite{display:none!important} }

/* ---------- Home: oak-27's heat map as cells that fill in ---------- */
.proof-card .proof-fig.hm-fig{aspect-ratio:auto; overflow:visible; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 16px 12px; background:var(--card)}
.hm-fig .proof-label{position:static}
.hm-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; width:100%; max-width:320px}
.hm-cell{aspect-ratio:1; border-radius:4px; display:grid; place-items:center; font-size:9px; font-weight:600; color:#151c3c; font-variant-numeric:tabular-nums;
  transition:background-color .25s ease, box-shadow .25s ease}
.hm-secured{background:#54d98c}
.hm-learning{background:#f5c56a}
.hm-notyet{background:#eef0fa; box-shadow:inset 0 0 0 1px #b9c0d9}
.hm-grid.hm-waiting .hm-secured,.hm-grid.hm-waiting .hm-learning{background:#eef0fa; box-shadow:inset 0 0 0 1px #b9c0d9}
@media (max-width:700px){ .hm-cell{font-size:8px} }

/* ---------- For schools: "What the teacher sees", a working panel (example data) ---------- */
.tp{display:flex; flex-direction:column; gap:12px; padding:18px 20px; border-radius:var(--r-panel); background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow)}
.tp-top{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between}
.tp-class{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink)}
.tp-label{position:static}
.tp-scroll{position:relative; overflow-x:auto; padding:2px}
.tp-grid{border-collapse:separate; border-spacing:3px; margin:0 auto}
.tp-grid thead th{font-size:13px; font-weight:700; color:var(--dim); padding:0 0 4px; text-align:center}
.tp-grid tbody th{padding:0 8px 0 0; text-align:right; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap}
.tp-cell{width:40px; height:22px; padding:0; border-radius:4px; cursor:pointer}
.tp-secured{background:#54d98c}
.tp-learning{background:#f5c56a}
.tp-notyet{background:#eef0fa; box-shadow:inset 0 0 0 1px #b9c0d9}
.tp-cell.is-on{box-shadow:0 0 0 2px var(--ink)}
.tp-cell:focus-visible{outline:3px solid var(--accent); outline-offset:1px}
.tp-card{position:absolute; z-index:5; max-width:min(320px, 90%); padding:8px 12px; border-radius:10px; background:var(--night); color:#fff; font-size:14px; font-weight:600; line-height:1.4; box-shadow:0 12px 30px rgba(10,14,31,.35); pointer-events:none}
.tp-help{font-size:var(--fs-small); color:var(--dim)}
.tp-line{margin-top:16px; font-family:var(--pal); font-size:20px; color:var(--head); text-align:center}
.heat-key .sw.tp-secured,.heat-key .sw.tp-learning,.heat-key .sw.tp-notyet{width:14px; height:14px}
.tp-lightbox{width:min(560px, calc(100% - 32px)); max-height:calc(100% - 32px); padding:16px; border:0; border-radius:var(--r-panel); background:var(--card); color:var(--ink)}
.tp-lightbox::backdrop{background:rgba(10,14,31,.6)}
.tp-lb-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px}
.tp-lb-head h3{font-family:var(--pal); font-size:21px; color:var(--head)}
@media (max-width:700px){ .tp{padding:14px 12px} .tp-cell{width:22px; height:20px} .tp-grid{border-spacing:2px} .tp-grid tbody th{font-size:12px; padding-right:4px} .tp-grid thead th{font-size:11px} }

/* ---------- Two columns above 980px, stacked on phones (For parents) ---------- */
.gap-10{gap:10px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
.measure{max-width:65ch}
.incl-card{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.incl-card .ticks{font-size:var(--fs-body)}
.incl-foot{margin:0; padding-top:12px; border-top:1px solid var(--rule); font-size:var(--fs-small); color:var(--dim)}
.split-art{margin:0; border-radius:var(--r-panel); overflow:hidden; box-shadow:var(--shadow)}
.split-art img{width:100%; height:auto; display:block}
.split .proof-solo{max-width:none}
@media (max-width:980px){ .split{grid-template-columns:minmax(0,1fr); gap:28px} }

/* ---------- Your first week, and the page-not-found page ---------- */
.week{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; border-left:3px solid var(--rule); margin-left:8px}
.week > li{position:relative; display:grid; grid-template-columns:minmax(0,140px) minmax(0,1fr); gap:6px 24px; padding:4px 0 28px 28px}
.week > li::before{content:""; position:absolute; left:-10px; top:8px; width:17px; height:17px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--bg)}
.week-day{font-family:var(--cin); font-weight:700; font-size:16px; color:var(--accent); padding-top:2px}
.week > li > div{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.week h2{font-size:var(--fs-h3); color:var(--head)}
.week p{color:var(--dim)}
.starter{display:flex; flex-direction:column; gap:12px; padding:24px 26px; border-radius:var(--r-panel); background:var(--band); border:1px solid var(--rule)}
.lost-doors{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.lost-doors .btn{width:100%; justify-content:center}
@media (max-width:560px){ .week > li{grid-template-columns:minmax(0,1fr)} .lost-doors{grid-template-columns:minmax(0,1fr)} }

/* ---------- Proof: real screens with example data ---------- */
.proof-head{display:flex; flex-direction:column; gap:10px; margin-bottom:28px}
.proof-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.proof-card{display:flex; flex-direction:column; border-radius:var(--r-panel); background:var(--card); border:1px solid var(--rule); overflow:hidden}
.proof-fig{position:relative; margin:0}
.proof-card .proof-fig{aspect-ratio:4 / 3; overflow:hidden; background:var(--band); border-bottom:1px solid var(--rule)}
.proof-card .proof-fig img{width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block}
.proof-label{position:absolute; left:10px; bottom:10px; padding:3px 10px; border-radius:999px; background:rgba(10,14,31,.86); color:#fff; font-size:13px; font-weight:600; line-height:1.5}
.proof-card .proof-body{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 20px 20px; flex:1; grid-template-columns:none; text-align:left}
.proof-card .proof-body h3{font-family:var(--pal); font-size:21px; color:var(--head)}
.proof-card .proof-body p{color:var(--dim); font-size:16px}
.proof-card .proof-body .link-arrow{margin-top:auto}
.proof-caption{font-size:var(--fs-small)!important; font-weight:600; color:var(--ink)!important; margin-top:6px}
.heat-key{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:var(--fs-small); color:var(--dim)}
.heat-key li{display:inline-flex; align-items:center; gap:6px}
.heat-key .sw{width:14px; height:14px; border-radius:4px; flex:none}
.sw-secured{background:linear-gradient(90deg,#1f9a4d 50%,#54d98c 50%)}
.sw-learning{background:linear-gradient(90deg,#f8b86a 50%,#f5e37a 50%)}
.sw-notyet{background:#e6e9ef; box-shadow:inset 0 0 0 1px #c9cfdc}
.proof-line{margin-top:24px; font-family:var(--pal); font-size:var(--fs-statement); color:var(--head); text-align:center; text-wrap:balance}
/* a proof picture used on its own (For schools opening, For parents progress) */
.proof-solo{border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow); background:var(--card)}
.proof-solo img{width:100%; height:auto; display:block}
.proof-solo .proof-label{position:static; display:block; border-radius:0; padding:6px 12px; text-align:left}   /* under the picture, so it never covers the picture's own key */
.page-parents .proof-solo{max-width:460px}
.night .proof-solo{border-color:var(--night-rule); box-shadow:0 30px 70px rgba(0,0,0,.5)}
@media (max-width:979px){ .proof-cards{grid-template-columns:minmax(0,1fr)} .proof-card .proof-fig{aspect-ratio:16 / 10} }
@media (max-width:700px){ .proof-card .proof-fig{aspect-ratio:4 / 3} .proof-line{font-size:21px} }

/* ---------- How it plays (James's game content) ---------- */
.hero-switch{display:flex; gap:8px; flex-wrap:wrap}
html:not(.js) .hero-switch{display:none}
.hero-set{min-height:var(--target); padding:0 18px; border-radius:999px; border:1.5px solid var(--rule); background:var(--card); color:var(--ink); font-weight:600; font-size:var(--fs-ui)}
.hero-set:hover{border-color:var(--ink)}
.hero-set[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.class-grid,.station-grid,.boss-grid,.shard-row,.examiners{list-style:none; margin:0; padding:0}
.class-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px}
.class-grid li{display:flex; flex-direction:column; gap:6px; padding:12px 12px 16px; border-radius:var(--r-panel); background:var(--card); border:1px solid var(--rule)}
.class-grid .class-shot{grid-column:1 / -1; padding:0; border:0; background:none}
.class-grid .class-shot img{aspect-ratio:16 / 9; height:auto; border-radius:10px}   /* keeps its space before it loads */
.class-grid img{width:100%; height:auto; aspect-ratio:1; display:block; border-radius:var(--r-card)}
.class-grid h3{margin:6px 0 0; font-family:var(--cin); font-size:18px; color:var(--head)}
.class-grid p{font-size:15.5px; color:var(--dim)}
.class-grid strong{color:var(--ink)}
.steps-five{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:12px; counter-reset:five}
.steps-five li{counter-increment:five; padding:14px 16px; border-radius:var(--r-card); background:var(--card); border:1px solid var(--rule); font-size:15.5px; color:var(--dim)}
.steps-five li::before{content:counter(five); display:inline-grid; place-items:center; width:28px; height:28px; margin-bottom:6px; border-radius:50%; background:var(--gold); color:#151c3c; font-weight:700; font-size:14px}
.steps-five strong{display:block; color:var(--ink); font-size:16.5px}
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; align-items:start}
.station-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)); gap:14px}
.station-grid li{display:flex; flex-direction:column; gap:6px; padding:12px 12px 16px; border-radius:var(--r-panel); background:var(--card); border:1px solid var(--rule)}
.station-grid img{width:100%; height:130px; object-fit:contain; display:block; border-radius:var(--r-card); background:var(--night)}
.station-grid h3,.station-grid h4{margin:6px 0 0; font-size:17px; color:var(--head)}
.station-grid p{font-size:15px; color:var(--dim)}
.note-block{padding:20px 22px; border-radius:var(--r-panel); background:var(--band); border:1px solid var(--rule); display:flex; flex-direction:column; gap:8px}
.note-block h3{font-size:var(--fs-h3); color:var(--head)}
.boss-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:14px}
.boss-grid li{display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:start; padding:14px; border-radius:var(--r-panel); background:var(--card); border:1px solid var(--rule)}
.boss-grid img{width:88px; height:88px; border-radius:var(--r-card); display:block; background:var(--night)}
.boss-grid h3{font-family:var(--cin); font-size:17px; line-height:1.2; color:var(--head); margin:2px 0 4px}
.boss-grid p{font-size:15px; color:var(--dim)}
.boss-grid .boss-where{font-size:13px; font-weight:700; color:var(--accent)}
.boss-grid .boss-clue{display:inline-block; margin-top:8px; padding:2px 10px; border-radius:999px; background:var(--come); color:var(--comeink); font-size:13px; font-weight:600}
.route-path{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.route-path li{padding:8px 14px; border-radius:999px; background:var(--card); border:1px solid var(--rule); font-weight:600; font-size:15px}
.route-path .gate{background:var(--come); color:var(--comeink); border-color:transparent}
.route-path .void{background:var(--night); color:var(--night-ink)}
.shard-row{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
@media (max-width:700px){ .shard-row{grid-template-columns:repeat(3,minmax(0,1fr))} .shard-row li:last-child{grid-column:1 / -1} }
.shard-row li{display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:var(--r-panel); background:var(--night); color:var(--night-ink); text-align:center}
.shard-row img{height:72px; width:auto; display:block; margin-bottom:6px}
.shard-row span{font-size:13px; color:var(--night-label)}
.shard-row strong{font-size:15px}
.examiners{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.examiners li{display:flex; flex-direction:column; gap:8px; font-size:var(--fs-small); color:var(--dim)}
.examiners img{width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--rule)}
.examiners strong{color:var(--ink)}
.after-grid{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:28px; align-items:start}
.after-art{margin:0}
.after-art img{width:100%; height:auto; display:block; border-radius:var(--r-panel)}
@media (max-width:560px){
  .class-grid{gap:10px}
  .class-grid li{padding:8px 8px 12px}
  .class-grid h3{font-size:16px}
  .class-grid p{font-size:14.5px}
  .after-grid{grid-template-columns:minmax(0,1fr)}
  .after-art img{max-height:260px; object-fit:cover; object-position:50% 30%}
}

/* Chapters: a picture, a three-line summary, then James's full text under "Read more"
   (open by default above 980px, closed on phones; without JavaScript it is always open). */
.chapter{display:flex; flex-direction:column; gap:18px}
.chapter-art{margin:0; border-radius:var(--r-panel); overflow:hidden; aspect-ratio:21 / 9; background:var(--night); box-shadow:var(--shadow)}
.chapter-art img{width:100%; height:100%; object-fit:cover; display:block}
.chapter-head{display:flex; flex-direction:column; gap:10px}
.chapter-sum{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-lead); color:var(--dim)}
.chapter-sum li{display:flex; gap:10px}
.chapter-sum li::before{content:""; flex:none; width:8px; height:8px; margin-top:.6em; border-radius:50%; background:var(--gold)}
.readmore{display:flex; flex-direction:column; gap:18px}
.readmore-btn{display:none; align-self:flex-start; align-items:center; min-height:var(--target); padding:0 20px; border-radius:999px; border:1.5px solid var(--rule); background:var(--card); color:var(--ink); font-weight:600; font-size:var(--fs-ui)}
.readmore-btn:hover{border-color:var(--ink)}
.js .readmore-btn{display:inline-flex}
.readmore-body{display:flex; flex-direction:column; gap:40px}
.rm-less{display:none}
@media (min-width:981px){
  .js .readmore:not(.is-closed) .rm-more{display:none}
  .js .readmore:not(.is-closed) .rm-less{display:inline}
  .js .readmore.is-closed .readmore-body{display:none}
}
@media (max-width:980px){
  .js .readmore:not(.is-open) .readmore-body{display:none}
  .js .readmore.is-open .rm-more{display:none}
  .js .readmore.is-open .rm-less{display:inline}
}
.part-title{font-family:var(--pal); font-size:clamp(22px,2.4vw,28px); line-height:1.2; color:var(--head)}
/* small portrait cards with the name under each, in a row that swipes at every width */
.mini-row{list-style:none; margin:0; padding:4px 2px 12px; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; overscroll-behavior-x:contain}
.mini-card{flex:0 0 132px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 8px 10px; border-radius:var(--r-card); background:var(--card); border:1px solid var(--rule)}
.mini-card img{width:116px; height:116px; border-radius:10px; display:block; object-fit:cover; background:var(--night)}
.mini-name{font-size:14px; font-weight:600; text-align:center; line-height:1.25; color:var(--ink)}
.powers li strong:first-child{color:var(--head)}
.boss-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:12px}
.boss-list li{padding:12px 14px; border-radius:var(--r-card); background:var(--card); border:1px solid var(--rule)}
.boss-list h4{font-family:var(--cin); font-size:16px; color:var(--head); margin:2px 0 4px}
.boss-list p{font-size:15px; color:var(--dim)}
.boss-list .boss-where{font-size:13px; font-weight:700; color:var(--accent)}
.boss-list .boss-clue{display:inline-block; margin-top:6px; padding:2px 10px; border-radius:999px; background:var(--come); color:var(--comeink); font-size:13px; font-weight:600}
@media (max-width:700px){ .chapter-art{aspect-ratio:16 / 9} .chapter-sum{font-size:16px} .mini-card{flex-basis:112px} .mini-card img{width:96px; height:96px} }

/* Chapter strip: sticks just under the header; js/site.js marks the chapter being read. */
.chapters{position:sticky; top:var(--header-h,68px); z-index:40; background:var(--bg); border-bottom:1px solid var(--rule); box-shadow:0 8px 20px -18px rgba(21,28,60,.5)}
.chapters ul{list-style:none; margin:0 auto; display:flex; gap:8px; padding-top:8px; padding-bottom:8px; overflow-x:auto; scrollbar-width:none; scroll-padding-inline:var(--gutter)}
.chapters ul::-webkit-scrollbar{display:none}
.chapters li{flex:none}
.chapters a{display:inline-flex; align-items:center; min-height:var(--target); padding:0 18px!important; /* beats the general in-list link padding */ border-radius:999px; border:1.5px solid var(--rule); background:var(--card); color:var(--ink); font-weight:600; font-size:var(--fs-ui); white-space:nowrap; text-decoration:none}
.chapters a:hover{border-color:var(--ink); color:var(--ink); text-decoration:none}
.chapters a[aria-current="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.page-how-it-plays main [id]{scroll-margin-top:calc(var(--header-h,68px) + 80px)}
.page-how-it-plays .article-top{padding-bottom:32px}

/* Folded panels: a button with a title and a one-line summary; js/site.js opens them.
   Without JavaScript every panel is simply open. */
.folds{display:flex; flex-direction:column; gap:12px}
.folds > .h2{margin-bottom:4px}
.fold{border:1px solid var(--rule); border-radius:var(--r-panel); background:var(--card)}
.fold-head{margin:0; font:inherit}
.fold-btn{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; align-items:center; width:100%; min-height:var(--target); padding:16px 20px; border:0; background:none; color:var(--ink); text-align:left; border-radius:inherit}
.fold-title{font-family:var(--pal); font-weight:700; font-size:clamp(20px,2.2vw,24px); line-height:1.2; color:var(--head)}
.fold-sum{grid-column:1; font-size:var(--fs-ui); color:var(--dim); line-height:1.45}
.fold-icon{grid-column:2; grid-row:1 / span 2; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--rule); position:relative}
.fold-icon::before,.fold-icon::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:currentColor; border-radius:2px; transition:transform .25s ease}
.fold-icon::after{transform:rotate(90deg)}
.fold-btn[aria-expanded="true"] .fold-icon::after{transform:rotate(0)}
html:not(.js) .fold-icon{display:none}
.fold-btn:hover .fold-icon{border-color:var(--ink)}
.fold-body{padding:4px 20px 24px; overflow:hidden; transition:height .35s ease}
.js .fold-body{display:none}
.js .fold-body.open{display:flex}
@media (max-width:560px){ .fold-btn{padding:14px 16px} .fold-body{padding:4px 16px 20px} }

/* ---------- The front page cards on tablets and phones ---------- */
/* Tablets stack the cards in a grid. While the screens take turns, the parked
   screen keeps its space (invisible), so each row is as tall as the taller of
   its pair and the page never moves when the screens swap. Without the script,
   or with reduced motion, screen one's five simply stack, on phones too. */
@media (max-width:979px){
  .frost.c0{grid-row:1} .frost.c1{grid-row:2} .frost.c2{grid-row:3} .frost.c3{grid-row:4} .frost.c4{grid-row:5}
}
@media (min-width:821px) and (max-width:979px){
  /* tablets: the parked screen keeps its space (invisible, still readable) so the page never moves */
  .js .frost.off{position:relative!important; width:auto!important; height:auto!important; padding:16px 18px 14px!important; border:1px solid transparent!important; clip-path:none!important; white-space:normal!important; opacity:0!important; pointer-events:none}
  .frost.c1,.frost.c3{margin-left:28px}
  .frost.c0,.frost.c2,.frost.c4{margin-right:28px}
}
/* Phones: a short chat stream in a fixed window. js/motion.js adds copies of
   the cards one at a time at the bottom; each is only as tall as its words,
   and the ones above glide up (the translate property, so nothing is laid out
   again) and fade under the soft top edge. The window's height never changes. */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .js .cards{display:block; position:relative; height:310px; margin-top:18px; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%); mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
  .js .cards > .frost[data-screen]{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; border:0!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; box-shadow:none!important}   /* the originals stay readable; the stream shows copies */
  .js .cards > .frost{position:absolute!important; left:0!important; right:auto!important; top:auto!important; bottom:0; width:auto!important; max-width:86%; margin:0!important;
    transition:translate .55s cubic-bezier(.2,.8,.2,1)}
  .js .cards > .frost.r{left:auto!important; right:0!important}
  .js .cards > .frost.own{max-width:none; right:0!important}
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  .js .cards{height:260px}
}

/* ---------- Home page: the menu bar waits until the visitor scrolls ----------
   It overlays the page (fixed), so showing or hiding it never moves anything.
   site.js adds .show after 80px of scrolling, or while the drawer is open; it
   always shows when anything in it has keyboard focus. Without JavaScript it
   is the normal bar. */
.js .page-index .site-header{position:fixed; left:0; right:0; top:0; transform:translate3d(0,-110%,0); transition:transform .45s ease}
.js .page-index .site-header.show,.js .page-index .site-header:focus-within{transform:none}
.hero-brand{display:none}
.js .page-index .hero-brand{display:block; position:absolute; top:22px; left:0; right:0; z-index:2; color:#fff}
.hero-brand .wrap{display:flex; align-items:center; gap:10px}
.hero-brand img{width:36px; height:36px; border-radius:50%; display:block}
.hero-brand span{font-family:var(--cin); font-weight:700; font-size:19px; letter-spacing:.03em; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.js .page-index .hh-inner{padding-top:112px}

/* ---------- Section colour bands (every width) ---------- */
.band-purple,.trust.band-purple{background:var(--band); background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.band-soft{background:var(--bg); background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--accent) 6%,var(--bg)))}
.band-gold{background:var(--band); background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.band-night{position:relative; background:var(--night); color:var(--night-ink); color-scheme:dark}
.band-night::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rainbow)}
.band-night :focus-visible{outline-color:var(--gold)}
.tpc-strip{display:none}

/* ---------- Phone doors: compact solid buttons ---------- */
@media (max-width:560px){
  .hh-doors{gap:8px}
  .door.glass{min-height:52px; padding:6px 12px; border-radius:12px; justify-content:center; line-height:1.2;
    background:rgba(10,14,31,.6); -webkit-backdrop-filter:none; backdrop-filter:none; border-color:rgba(255,255,255,.2)}
  .door.glass .door-line{display:none}
  .door.glass .door-title{font-size:15px}
  .hero-brand{top:16px}
  .hero-brand img{width:30px; height:30px}
  .hero-brand span{font-size:16px}
}

/* ---------- Phone pass (700px and under) ---------- */
@media (max-width:700px){
  /* the opening: art in the top 400px only, clear at the top, fading to night behind the words */
  .hh-art{inset:0 0 auto 0; height:400px}
  .hh-art img{object-position:30% 35%; animation:none; transform:none}
  .hh-shade{background:linear-gradient(180deg,rgba(10,14,31,.1) 0,rgba(10,14,31,.05) 120px,rgba(10,14,31,.75) 260px,var(--night) 400px)}
  .js .page-index .hh-inner,.hh-inner{padding-top:32px}
  .hh-copy{padding-top:190px}
  /* trust strip: 2 x 2 small tiles */
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:20px; padding-bottom:20px}
  .fact,.fact:first-child{flex-direction:column; gap:8px; padding:14px; border:0!important; border-radius:14px; background:var(--card)}
  .fact p{font-size:13.5px}
  .fact strong{font-size:15px; margin-bottom:2px}
  /* swipe rows: 80% cards, snapping, the next one peeking; no visible scrollbar */
  [data-swipe]{display:flex; flex-direction:row; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scroll-padding-inline:var(--gutter); margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 12px; scrollbar-width:none}
  [data-swipe]::-webkit-scrollbar{display:none}
  [data-swipe] > *{flex:0 0 80%; scroll-snap-align:start}
  /* teach, practise, check: an art strip on top, the number on its edge */
  .tpc{gap:0}
  .tpc-steps[data-swipe]{align-items:flex-start}   /* each card only as tall as its words: no empty space inside */
  .tpc-art{display:none}
  .tpc-step{display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; position:relative}
  .tpc-strip{display:block; height:150px}
  .tpc-strip img{width:100%; height:100%; object-fit:cover; display:block}
  .tpc-step .n{position:absolute; top:126px; left:16px; width:48px; height:48px; box-shadow:0 6px 16px rgba(0,0,0,.25)}
  .tpc-step > div{padding:30px 16px 18px}
}

/* How it plays on phones: long lists become swipe rows, so the page is far shorter to scroll. */
@media (max-width:700px){
  .page-how-it-plays .article{gap:32px; padding-bottom:56px; font-size:16px; line-height:1.55}
  .page-how-it-plays .article-top{padding-top:32px; padding-bottom:24px}
  .page-how-it-plays .manual-section{gap:12px}
  .page-how-it-plays .world .section-body{padding-top:40px; padding-bottom:40px}
  .fold-title{font-size:19px}
  .page-how-it-plays .article .h2:not(.sm){font-size:26px}
  .class-grid[data-swipe] > .class-shot{flex-basis:84%}
  .shard-row[data-swipe] > *{flex-basis:30%}
  .shard-row[data-swipe] > li:last-child{grid-column:auto}
  .route-path[data-swipe] > *{flex-basis:auto; white-space:nowrap}
  .screens[data-swipe] > .phone{flex-basis:36%}
  .fold-btn{padding:12px 16px}
  .fold-sum{font-size:14px}
  .note-block,.replace-box{padding:16px}
  .page-how-it-plays [data-swipe]{align-items:flex-start}
  .class-grid[data-swipe],.boss-grid[data-swipe]{align-items:stretch}   /* matching cards side by side */
  .class-grid[data-swipe] > *{flex-basis:46%}
  .steps-five[data-swipe] > *{flex-basis:46%}
  .loop[data-swipe] > li{flex-basis:84%; padding:16px; border-radius:var(--r-panel); background:var(--card); border:1px solid var(--rule)}
  .boss-grid[data-swipe] > *{flex-basis:84%}
  .screens[data-swipe] > .wide{flex-basis:84%}
  .screens[data-swipe] > .phone{flex-basis:44%}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .invite,.invite.is-in,.invite.is-out{transform:none!important; transition:opacity .3s ease!important}
  .hh-art img{transform:none}
}

/* ---------- The school finder on For parents (posts kind=school-lookup) ---------- */
.finder .field input[aria-invalid="true"]{border-color:var(--error)}
.finder .field .field-error{font-weight:600}
.finder .privacy-line{margin:0}

/* ---------- The phone bar: phones only, after the first screen ---------- */
.phone-bar{display:none}
@media (max-width:699px){
  .phone-bar{position:fixed; z-index:60; left:0; right:0; bottom:0; display:flex; align-items:center; gap:4px 14px;
    padding:8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background:var(--card); border-top:1px solid var(--rule); box-shadow:0 -12px 30px -18px rgba(10,14,31,.45);
    visibility:hidden; transform:translate3d(0,110%,0); transition:transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s}
  .phone-bar[hidden]{display:none}
  .phone-bar.is-on{visibility:visible; transform:none; transition:transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s}
  .phone-bar .btn{flex:none; padding:0 20px}
  .phone-bar-link{display:inline-flex; align-items:center; min-height:var(--target); color:var(--ink); font-size:var(--fs-small); font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
  .phone-bar-link[aria-current]{text-decoration:none; color:var(--dim)}
  /* the timed invitation sits above the bar while it shows */
  .has-phone-bar .invite{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (max-width:699px) and (prefers-reduced-motion:reduce){
  .phone-bar,.phone-bar.is-on{transition:none}
}
@media print{ .phone-bar{display:none!important} }

/* ---------- Counted numbers (For schools, hidden until the trial figures are checked) ---------- */
.counts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.counts .tile{min-width:0}
@media (max-width:599px){
  .counts{grid-template-columns:minmax(0,1fr); gap:12px}
  .counts .tile{flex-direction:row; align-items:baseline; gap:16px}
  .counts .tile-num{flex:none; min-width:4ch}
}

/* ---------- Home: eight doors into the quest (tools/build-pages.js, doors; js/site.js turns it) ----------
   The section is a night band at every width and in both themes (fixed colours,
   not theme tokens): navy, faint stars, a soft gold haze under the lead door. */
.doors-section{position:relative; isolation:isolate; overflow:hidden; color:#f1e9d6; color-scheme:dark;
  background:#0a0e1f radial-gradient(ellipse 90% 70% at 50% 60%,#1b2457,#0a0e1f 75%)}
.doors-section::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9; background-image:
  radial-gradient(1px 1px at 12% 18%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 28% 72%,#fff 60%,transparent 61%),
  radial-gradient(1.5px 1.5px at 41% 10%,#ffe49a 60%,transparent 61%),radial-gradient(1px 1px at 57% 84%,#fff 60%,transparent 61%),
  radial-gradient(1px 1px at 66% 22%,#fff 60%,transparent 61%),radial-gradient(1.5px 1.5px at 78% 64%,#74c7ff 60%,transparent 61%),
  radial-gradient(1px 1px at 88% 30%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 8% 50%,#fff 60%,transparent 61%),
  radial-gradient(1px 1px at 93% 80%,#ffe49a 60%,transparent 61%),radial-gradient(1px 1px at 50% 95%,#fff 60%,transparent 61%),
  radial-gradient(1px 1px at 22% 40%,#fff 60%,transparent 61%),radial-gradient(1.5px 1.5px at 72% 42%,#fff 60%,transparent 61%);
  animation:dial-twinkle 6s ease-in-out infinite alternate}
@keyframes dial-twinkle{from{opacity:.55} to{opacity:1}}
.doors-section{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:104px; padding-bottom:24px}   /* 104px: 40px plus the fixed menu bar, so the words are never under it */
.doors-head{text-align:center; display:flex; flex-direction:column; align-items:center}
.doors-eyebrow{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#f2c14e}
.doors-title{margin:0; font-family:var(--cin); font-weight:700; font-size:clamp(30px, 5vw, 54px); line-height:1.1; color:#f1e9d6; text-wrap:balance}
.doors-sub{margin:10px auto 16px; max-width:56ch; font-size:clamp(15px, 1.6vw, 18px); color:#c9cfe6}
.doors-section :focus-visible{outline-color:var(--gold)}
.dial-wrap{display:flex; flex-direction:column; align-items:center}
/* The dial's size is set by CSS alone (no script), so its height is reserved before anything loads. */
.dial{--dw:min(92vw, 72vh, 760px); --dw:min(92vw, 72svh, 760px); --dh:calc(var(--dw) * .95); --s:50px; position:relative; width:var(--dw); height:var(--dh); margin:20px auto 36px; container-type:size; touch-action:pan-y; user-select:none; -webkit-user-select:none}
/* Base door size from the mock-up (50, 60, 68px), but never more than 9% of the dial, so on a short screen the lead door still clears the tile. */
@media (min-width:520px){ .dial{--s:min(60px, calc(var(--dw) * .0895))} }
@media (min-width:900px){ .dial{--s:min(68px, calc(var(--dw) * .0895))} }
@media (max-width:519px){ .dial{--dh:calc(var(--dw) * 1.08); margin-bottom:104px} }
/* no orbit line: a faint violet glow, and the gold haze sits under the lead door */
.dial-orbit{position:absolute; left:6%; right:6%; top:16%; bottom:16%; border-radius:50%; background:radial-gradient(ellipse at 50% 50%,rgba(165,139,255,.10),transparent 70%)}
.dial::before{content:""; position:absolute; left:-10%; right:-10%; top:-12%; height:72%; pointer-events:none; background:radial-gradient(ellipse 55% 45% at 50% 40%,rgba(242,193,78,.16),transparent 70%)}
.dial-door{position:absolute; left:50%; top:56%; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding:0; border:0; background:none; border-radius:50%; cursor:pointer;
  transform:translate(calc(var(--fx) * var(--dw)), calc(var(--fy) * var(--dh))) scale(var(--sc)); opacity:var(--o);
  filter:blur(calc(var(--bl) * 1px)) saturate(var(--sa)); will-change:transform;   /* the back doors are dimmer, softer and less saturated */ -webkit-tap-highlight-color:transparent}
.dial-door img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.75); box-shadow:0 8px 24px rgba(0,0,0,.45); pointer-events:none;
  transition:border-color .4s, box-shadow .4s}
/* The lead door: no hard ring. A hairline of pale gold at the edge, a layered glow, and a slow light-flare turning behind it (still under reduced motion and data saving). */
.dial-door.is-front img{border:1.5px solid rgba(255,228,154,.7); transform:scale(1.06);
  box-shadow:0 0 18px rgba(255,228,154,.55),0 0 48px rgba(242,193,78,.45),0 0 110px rgba(242,193,78,.28),0 14px 40px rgba(0,0,0,.5)}
.dial-door.is-front::after{content:""; position:absolute; inset:-35%; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle at 50% 50%,rgba(255,228,154,.35) 0,rgba(242,193,78,.18) 30%,transparent 62%),
    conic-gradient(from 0deg,transparent 0 40%,rgba(255,228,154,.18) 43%,transparent 46%,transparent 70%,rgba(255,228,154,.14) 73%,transparent 76%);
  animation:dial-flare 7s linear infinite}
@keyframes dial-flare{to{transform:rotate(360deg)}}
/* Motionless under reduced motion and data saving (and before the script runs): the glow stays, nothing turns. */
.dial-wrap:not(.can-turn) .dial-door.is-front::after{animation:none}
/* Every door, however far back, has a tap area of at least 48px (it scales with the door, so it is set against --sc). */
.dial-door::before{content:""; position:absolute; inset:min(0px, calc((var(--s) - 48px / var(--sc)) / 2)); border-radius:50%}
.dial-door:focus{outline:none}
.dial-door:focus-visible img{outline:3px solid var(--gold); outline-offset:3px}
/* The centre: dark glass with a thin gold edge, parchment words, a gold eyebrow and a gold Open. */
.dial-centre{position:absolute; z-index:50; left:16%; right:16%; top:50%; bottom:auto; min-height:38%;   /* grows downward with its words; room for it is kept under the dial */
  background:rgba(21,28,60,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(242,193,78,.35); border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.45);
  color:#f1e9d6; padding:4% 7%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center}
.dial-k{margin:0; font-size:clamp(11px, 1.7cqw, 13px); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#f2c14e}
.dial-name{margin:4px 0 2px; font-family:var(--cin); font-weight:700; font-size:clamp(18px, 3.95cqw, 30px); line-height:1.15; color:#f1e9d6; text-wrap:balance}
.dial-line{margin:0 0 8px; font-size:clamp(14px, 2.24cqw, 17px); line-height:1.45; color:#e6e2d6; max-width:38ch}
.dial-go{min-height:var(--target); padding:0 22px; font-size:clamp(14px, 2.1cqw, 16px)}
/* The tile's words scale with the dial (container units), not the window: on a short laptop screen the dial is small while the window is wide. */
.dial-centre.is-new > *{animation:dial-in .45s ease both}
@keyframes dial-in{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (max-width:519px){
  /* the mock-up's 48% puts the 200px lead door over the tile's first line; the tile starts below it and may run into the space reserved under the dial */
  .dial-centre{left:10%; right:10%; top:57%; bottom:auto; min-height:41%}
  .dial-line{font-size:14px; line-height:1.4}
}
.dial-ctl{display:flex; align-items:center; justify-content:center; gap:14px}
.dial-arrow{width:var(--target); height:var(--target); border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#f1e9d6; font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0 0 2px; cursor:pointer}
.dial-arrow:hover{border-color:rgba(242,193,78,.6); color:#ffe49a}
.dial-count{min-width:5ch; text-align:center; font-size:var(--fs-small); color:#aeb5cf; font-variant-numeric:tabular-nums}
.dial-hint{margin:6px 0 0; text-align:center; font-size:13px; color:#aeb5cf; visibility:hidden}   /* space kept; shown only when the dial can turn by itself */
.dial-wrap.can-turn .dial-hint{visibility:visible}
.dial-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 28px; margin:14px 0 0}
.dial-links a{display:inline-flex; align-items:center; min-height:var(--target); color:#f1e9d6; font-weight:600; text-decoration:underline; text-decoration-color:rgba(242,193,78,.6); text-underline-offset:4px}
.dial-links a:hover{color:#ffe49a}
@media (prefers-reduced-motion:reduce){
  .doors-section::before{animation:none}
  .dial-door.is-front::after{animation:none}
  .dial-centre.is-new > *{animation:none}
  .dial-door img{transition:none}
}

/* The Folk of Solaria: one side quest, in James's words */
.folk-quote{margin:0; border-left:3px solid var(--gold); padding:4px 0 4px 16px; font-family:var(--pal); font-style:italic; font-size:19px; line-height:1.45; color:var(--ink)}

/* How it teaches: how it decides what to ask next */
.loop-box{display:flex; flex-direction:column; gap:14px; max-width:72ch}
.loop-line{font-family:var(--pal); font-size:clamp(20px, 2.2vw, 24px); line-height:1.4; color:var(--ink)}
/* Promises: a short note under a promise */
.promise-note{display:block; margin-top:4px; font-size:var(--fs-small); color:var(--dim)}