/* READY FOR WINGS — the design system.

   A picture book that happens to be a website. Everything here comes out of the
   Aero illustrations: flat colour, thick warm-black outlines, a sky that starts
   pale at the horizon, and the leather helmet as the one object that carries the
   whole story.

   Rules:
   1. OUTLINES, not shadows. Depth comes from a 3px --ink border, never a blur.
   2. Flat fills only. No gradients except the sky itself, which is a real thing.
   3. Big type, generous line-height. It is read by eight-year-olds and out loud
      by adults.
   4. Every interactive thing looks pressable — it sits up, and it moves down.
*/

:root{
  /* sky */
  --sky:#8FD3F4;
  --sky-deep:#5BB4E5;
  --sky-pale:#D6EFFB;
  /* ground */
  --grass:#8DC96A;
  --grass-deep:#5FA344;
  /* the aeroplane, and the one accent that means "go" */
  --aero-red:#D8443C;
  --aero-red-deep:#B4322B;
  /* the helmet — the motif of the whole story */
  --leather:#8B5E3C;
  --leather-deep:#5E3C22;
  --brass:#F5C24B;
  /* paper and ink */
  --paper:#FFFDF6;
  --paper-2:#F6EFE0;
  --ink:#2B2118;
  --ink-2:#584637;
  --ink-3:#8A7663;

  --rounded:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",
            "Varela Round",Avenir,"Avenir Next",system-ui,sans-serif;
  --body:"Avenir Next",Avenir,system-ui,-apple-system,"Segoe UI",sans-serif;

  --gut:clamp(18px,4.5vw,60px);
  --bd:3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Evening flying. Same world, later in the day — not an inversion. */
    --sky:#2C4A6B;
    --sky-deep:#1B3049;
    --sky-pale:#3E6288;
    --grass:#4A7A44;
    --grass-deep:#2F5730;
    --paper:#241D18;
    --paper-2:#332A22;
    --ink:#FFF6E4;
    --ink-2:#E4D6C0;
    --ink-3:#B09A80;
    --leather:#B37C4F;
    --brass:#F5C24B;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:clamp(16px,1.15vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: the img tags carry width/height attributes for
   layout reservation, and without this the height attribute wins after the
   width shrinks — every illustration rendered as a stretched sliver */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 var(--gut)}

/* ── type ─────────────────────────────────────────────────────────── */
/* Headings used to be margin:0, so anywhere a rule did not set one explicitly
   the following paragraph sat 2-6px under the title and read as one bunched
   block. A default bottom margin fixes every one of those at once; the rules
   further down that DO set a margin still win. 1.02 was also too tight for a
   heading that wraps onto two lines — the lines touched. */
h1,h2,h3,h4{font-family:var(--rounded);font-weight:800;color:var(--ink);
  margin:0 0 .42em;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,76px);line-height:1.04}
h2{font-size:clamp(29px,4.2vw,52px);line-height:1.08}
h3{font-size:clamp(21px,2.4vw,30px);line-height:1.14}
h4{font-size:clamp(17px,1.5vw,20px);line-height:1.22}
p{margin:0}
strong{color:var(--ink);font-weight:700}

.kicker{display:inline-block;font-family:var(--rounded);font-weight:800;
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);background:var(--brass);
  border:var(--bd) solid var(--ink);border-radius:999px;padding:6px 15px;
  transform:rotate(-1.4deg)}
.big{font-size:clamp(18px,1.55vw,22px);line-height:1.55;color:var(--ink-2)}
/* the one line that tells a parent why to trust any of this. It was in the
   footer, 76% down an 11,800px page, which is nowhere. */
.credit{margin-top:14px;font-size:15.5px;line-height:1.5;color:var(--ink-2);
  border-left:4px solid var(--brass);padding-left:14px;max-width:44ch}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--rounded);font-weight:800;font-size:clamp(15px,1.2vw,18px);
  color:var(--ink);background:var(--paper);
  border:var(--bd) solid var(--ink);border-radius:999px;
  padding:13px 24px;cursor:pointer;text-decoration:none;
  box-shadow:0 4px 0 var(--ink);transition:transform .09s,box-shadow .09s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--aero-red);outline-offset:3px}
.btn-go{background:var(--aero-red);color:#FFFDF6}
.btn-sky{background:var(--sky);color:var(--ink)}
.btn-sm{padding:9px 17px;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:0 4px 0 var(--ink)}
.btn[disabled]:hover{transform:none;box-shadow:0 4px 0 var(--ink)}

/* ── the nav ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:var(--bd) solid var(--ink)}
.nav-in{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);
  height:74px;max-width:1400px;margin:0 auto;padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
/* the mark is a winged badge, so its slot is landscape — a 42px square
   left it floating with empty air above and below */
.brand svg{width:50px;height:30px;flex:0 0 50px}
.brand b{font-family:var(--rounded);font-weight:800;font-size:20px;color:var(--ink);
  line-height:1;letter-spacing:-.01em}
.brand span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-top:3px}
.nav-links{display:flex;gap:clamp(8px,1.4vw,20px);margin-left:auto;align-items:center;
  flex-wrap:nowrap}
/* nowrap and no shrinking, which is the whole fix. Without them flex squeezed
   every label down to 70-100px and they broke into THREE AND FOUR LINES, which
   pushed the CTA pill to 94px tall inside a 74px bar and its text spilled out
   of the pill. A nav label wrapping is never right — if it does not fit, the
   bar has too much in it and something has to go, which is what the widened
   breakpoint below now does. */
.nav-links a{font-family:var(--rounded);font-weight:700;font-size:15px;
  color:var(--ink-2);text-decoration:none;padding:7px 4px;border-bottom:3px solid transparent;
  white-space:nowrap;flex:0 0 auto}
.nav-links .btn{white-space:nowrap;flex:0 0 auto}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--aero-red)}
/* 1040, not 880: measured, the brand plus four labels plus the mode switch
   plus the pill needs about 1010px, so between 880 and 1040 the bar was full
   and flex took it out on the labels. */
@media(max-width:1040px){.nav-links a:not(.btn){display:none}}
/* the menu button appears exactly when the links disappear */
.menu-btn{display:none;width:46px;height:46px;border:var(--bd) solid var(--ink);
  border-radius:14px;background:var(--paper);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu-btn span{display:block;width:20px;height:3px;border-radius:2px;background:var(--ink);
  transition:transform .15s,opacity .15s}
.menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-btn:focus-visible{outline:3px solid var(--aero-red);outline-offset:2px}
@media(max-width:1040px){
  .menu-btn{display:flex}
}
/* at phone width the pill CTA squashes into a blob next to the menu button —
   the studio stays one tap away inside the menu instead */
@media(max-width:700px){ .nav-links .btn{display:none} }
/* On a phone the bar runs out of room: 42px mark + the name + the tagline +
   a 46px menu button does not fit in 375px, and the tagline was overflowing
   off the right edge. The tagline is the part that can go — the brand name
   and the menu button both have to survive. */
@media(max-width:1240px){
  /* 388px of brand is most of the reason the bar was full. The tagline is the
     part that can go; the mark and the name are the part that cannot. */
  .brand > span > span{display:none}
}
@media(max-width:600px){
  .brand{flex:0 1 auto;min-width:0}
}
.mnav{border-top:var(--bd) solid var(--ink);background:var(--paper);
  display:flex;flex-direction:column;padding:8px 0 14px}
/* an author display beats the hidden attribute — this line is what actually
   closes the menu; without it the panel is permanently open on phones */
.mnav[hidden]{display:none!important}
.mnav a:not(.btn){font-family:var(--rounded);font-weight:800;font-size:17px;color:var(--ink);
  text-decoration:none;padding:13px var(--gut);border-bottom:2px solid var(--paper-2)}
.mnav a:not(.btn):active{background:var(--paper-2)}
/* the group headings — 25 links in one column is a wall nobody reads */
.mnav-h{font-family:var(--rounded);font-weight:800;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--leather);
  padding:16px var(--gut) 6px;border-bottom:2px solid var(--paper-2)}
.mnav-h:first-child{padding-top:8px}
@media(min-width:881px){.mnav{display:none!important}}

/* ── bands ────────────────────────────────────────────────────────── */
.band{padding:clamp(48px,7vw,110px) 0}
.band-sky{background:var(--sky-pale);
  border-top:var(--bd) solid var(--ink);border-bottom:var(--bd) solid var(--ink)}
.band-grass{background:var(--grass);
  border-top:var(--bd) solid var(--ink);border-bottom:var(--bd) solid var(--ink)}
.band-paper2{background:var(--paper-2);
  border-top:var(--bd) solid var(--ink);border-bottom:var(--bd) solid var(--ink)}

/* ── the hero ─────────────────────────────────────────────────────── */
.hero{position:relative;background:linear-gradient(180deg,var(--sky-deep),var(--sky) 55%,var(--sky-pale));
  border-bottom:var(--bd) solid var(--ink);overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,60px);align-items:center;
  padding:clamp(38px,5.5vw,84px) 0 clamp(48px,6vw,96px)}
@media(max-width:900px){.hero-in{grid-template-columns:1fr}}
.hero h1{margin:18px 0 20px}
.hero .big{color:var(--ink-2);max-width:34ch}
.hero-art{border:var(--bd) solid var(--ink);border-radius:26px;overflow:hidden;
  transform:rotate(1.2deg);box-shadow:0 8px 0 var(--ink)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ── the dashed flight path ───────────────────────────────────────── */
.path{display:block;width:100%;height:auto;color:var(--ink)}

/* ── cards, which here are picture frames ─────────────────────────── */
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.frame{background:var(--paper);border:var(--bd) solid var(--ink);border-radius:22px;
  padding:clamp(18px,2vw,28px);box-shadow:0 6px 0 var(--ink)}
.frame img{border-radius:14px;border:var(--bd) solid var(--ink);margin-bottom:16px}
.frame h3{margin-bottom:9px}
.frame p{font-size:15.5px;line-height:1.6}
.frame-tilt{transform:rotate(-.8deg)}
.frame-tilt:nth-child(even){transform:rotate(.9deg)}

/* ── numbered steps ───────────────────────────────────────────────── */
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
.step .n{width:64px;height:64px;border-radius:50%;background:var(--brass);
  border:var(--bd) solid var(--ink);display:grid;place-items:center;
  font-family:var(--rounded);font-weight:800;font-size:28px;color:var(--ink)}
.step h3{margin-bottom:6px}

/* ── the fact strip ───────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:0;border:var(--bd) solid var(--ink);border-radius:22px;overflow:hidden;
  background:var(--paper)}
.facts div{padding:22px clamp(14px,1.6vw,24px);border-right:var(--bd) solid var(--ink)}
.facts div:last-child{border-right:0}
@media(max-width:760px){
  .facts div{border-right:0;border-bottom:var(--bd) solid var(--ink)}
  .facts div:last-child{border-bottom:0}
}
.facts .v{display:block;font-family:var(--rounded);font-weight:800;
  font-size:clamp(30px,3.4vw,44px);color:var(--aero-red);line-height:1;margin-bottom:7px}
.facts .k{font-size:14px;line-height:1.45;color:var(--ink-2)}

/* ── grown-ups panel ──────────────────────────────────────────────── */
.grown{background:var(--paper-2);border:var(--bd) solid var(--ink);border-radius:22px;
  padding:clamp(22px,2.6vw,38px)}
.grown h3{margin-bottom:14px}
.grown ul{margin:0;padding-left:22px}
.grown li{margin-bottom:9px;font-size:15.5px;line-height:1.6}

/* ── the badge rack ───────────────────────────────────────────────────
   Shared: /school/ and /aero/ both show it, and both get it from here.
   Markup is generated by assets/wings.js into #rack and #rankLine. */
.rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;
  margin:18px 0 12px}
.wing{background:var(--paper-2);border:2.5px solid var(--ink-3);border-radius:18px;
  padding:12px 8px;text-align:center;opacity:.55;transition:transform .15s}
.wing.got{background:var(--brass);border-color:var(--ink);opacity:1;
  box-shadow:0 4px 0 var(--ink)}
.wing.got:hover{transform:translateY(-3px)}
.wing .wemo{font-size:26px;display:block;line-height:1.2;filter:grayscale(1)}
.wing.got .wemo{filter:none}
/* the painted patch, when there is one. Unearned badges stay greyed and a
   little faded — the rack should read at a glance as "these are the ones I
   have got", which a row of full-colour patches would not. */
.wing .wemo img{display:block;margin:0 auto;width:clamp(46px,72%,66px);height:auto;
  filter:grayscale(1) opacity(.75);transition:filter .18s,transform .18s}
.wing.got .wemo img{filter:none}
.wing.got:hover .wemo img{transform:scale(1.06) rotate(-3deg)}
.wing b{font-family:var(--rounded);font-size:13.5px;color:var(--ink);display:block;
  line-height:1.2;margin-top:3px}
.wing small{font-size:11.5px;color:var(--ink-3);display:block}
.wing.got small{color:var(--ink-2);font-weight:700}
/* earned in Aero's Flight School rather than on this page — a sky tint so
   the five read as a set without breaking the one rack into two */
.wing.from-app{background:var(--sky-pale)}
.wing.from-app.got{background:var(--sky)}
.rankline{background:var(--sky-pale);border:2.5px dashed var(--ink);border-radius:16px;
  padding:12px 18px;font-size:15.5px;line-height:1.55}
.rankline a{color:var(--ink);font-weight:700}
/* the invitation that appears when a badge is won — the one moment a
   child is most pleased with themselves */
.whatnext{display:block;margin-top:12px;padding-top:11px;
  border-top:2px dashed var(--ink-3);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.whatnext a{color:var(--ink);font-weight:800;text-decoration:underline;
  text-decoration-color:var(--aero-red);text-decoration-thickness:2px;
  text-underline-offset:3px;white-space:nowrap}

/* ── the age ladder ───────────────────────────────────────────────────
   Shared by /aero/ and the home page. Each rung says who it is FOR before it
   says what it is, because the question a parent arrives with is "which one is
   for my child", not "what is in the set". */
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(20px,2.6vw,30px)}
.rung{background:var(--paper);border:var(--bd) solid var(--ink);border-radius:20px;
  padding:18px 18px 20px;box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column}
.rung .yrs{display:inline-block;align-self:flex-start;font-family:var(--rounded);
  font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--brass);color:var(--ink);border:2px solid var(--ink);
  border-radius:999px;padding:4px 12px;margin-bottom:11px}
.rung h3{font-size:clamp(19px,1.8vw,23px);margin-bottom:7px}
.rung p{font-size:14.5px;line-height:1.55;margin-bottom:14px}
.rung a{margin-top:auto}
.rung.free .yrs{background:var(--grass)}

/* ── footer ───────────────────────────────────────────────────────── */
/* ── the footer ───────────────────────────────────────────────────────
   Was one 25-link column beside two short ones: 1,018px tall, a third
   taller than the screen. Four balanced groups now, matching the menu. */
.foot{background:var(--ink);color:var(--paper);padding:clamp(34px,4vw,58px) 0}
.foot a{color:var(--brass);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;
  gap:clamp(22px,3vw,54px);align-items:start}
.foot-brand b{font-family:var(--rounded);font-size:19px;color:var(--paper);
  display:block;margin:10px 0 8px}
.foot-mark{display:block;width:52px}
.foot-mark svg{width:100%;height:auto}
.foot-cta{display:inline-block;margin-top:14px;font-family:var(--rounded);
  font-weight:800;font-size:15px;border:2.5px solid var(--brass);
  border-radius:999px;padding:8px 16px}
.foot-cta:hover{background:var(--brass);color:var(--ink);text-decoration:none}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,30px)}
.foot h4{color:var(--brass);margin-bottom:10px;font-family:var(--rounded);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.foot p,.foot li{font-size:14px;line-height:1.6;color:#D9CEBE}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:6px}
.foot li a{color:#D9CEBE}
.foot li a:hover{color:var(--brass)}
.foot .fine{margin-top:30px;padding-top:18px;border-top:2px solid #4A3B2E;
  font-size:13px;color:#A5947F}
.foot .fine span{display:block;margin-top:6px}
@media(max-width:860px){
  .foot-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){ .foot-cols{grid-template-columns:1fr} }

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--paper);color:var(--ink);
  padding:12px 18px;border:var(--bd) solid var(--ink);border-radius:999px}


/* ═══ the fun pass — because the first cut read "corporate" ═══════════
   Rules stay (outlines not shadows, flat fills) but the volume goes up:
   crayon underlines, sticker facts, drifting clouds, a flypast, wobble. */

/* crayon squiggle under every section heading.
   text-decoration adds NOTHING to layout height, so the squiggle hangs ~14px
   below the heading box and was landing on top of the paragraph underneath.
   The padding gives it that room inside the heading's own box, so every
   margin set elsewhere still applies on top of it. */
main h2{text-decoration:underline;text-decoration-style:wavy;
  text-decoration-color:var(--aero-red);text-decoration-thickness:4px;
  text-underline-offset:10px;padding-bottom:16px}

/* buttons wiggle when you point at them — pressable should feel alive */
@keyframes wiggle{0%,100%{transform:translateY(2px) rotate(0)}
  30%{transform:translateY(2px) rotate(-1.6deg)}70%{transform:translateY(2px) rotate(1.6deg)}}
.btn-go:hover{animation:wiggle .4s ease-in-out}

/* the facts become stickers: each its own colour, each slightly askew */
.facts{border:0;background:none;overflow:visible;gap:14px}
.facts div{border:var(--bd) solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 var(--ink)}
.facts div:nth-child(1){background:var(--sky);transform:rotate(-1.4deg)}
.facts div:nth-child(2){background:var(--brass);transform:rotate(1deg)}
.facts div:nth-child(3){background:var(--grass);transform:rotate(-.8deg)}
.facts div:nth-child(4){background:var(--leather);transform:rotate(1.4deg)}
.facts div:nth-child(4) .v{color:#FFFDF6}
.facts div:nth-child(4) .k{color:#F3E7D6}
.facts .v{color:var(--ink)}
.facts .k{color:var(--ink-2)}
.facts div:hover{transform:rotate(0) scale(1.03);transition:transform .15s}

/* frames lean further, and straighten when you look at them */
.frame-tilt{transform:rotate(-1.6deg);transition:transform .15s}
.frame-tilt:nth-child(even){transform:rotate(1.7deg)}
.frame-tilt:hover{transform:rotate(0) scale(1.02)}

/* clouds drift across every sky band */
@keyframes drift{from{transform:translateX(-140px)}to{transform:translateX(110vw)}}
.band-sky,.hero{position:relative;overflow:hidden}
.band-sky::before,.hero::before{content:"";position:absolute;top:8%;left:0;width:130px;height:44px;
  background:#FFFDF6;border-radius:999px;opacity:.85;
  box-shadow:36px -14px 0 6px #FFFDF6, 74px 2px 0 2px #FFFDF6;
  animation:drift 52s linear infinite;pointer-events:none}
.band-sky::after,.hero::after{content:"";position:absolute;top:58%;left:0;width:90px;height:32px;
  background:#FFFDF6;border-radius:999px;opacity:.6;
  box-shadow:26px -10px 0 4px #FFFDF6;
  animation:drift 76s linear infinite;animation-delay:-30s;pointer-events:none}
.hero > *{position:relative;z-index:1}

/* the flypast: Aero's little red plane crosses the hero, smoke and all */
@keyframes flypast{
  0%{transform:translate(-16vw,0) rotate(2deg)}
  50%{transform:translate(50vw,-26px) rotate(-3deg)}
  100%{transform:translate(116vw,6px) rotate(2deg)}}
.flypast{position:absolute;top:12%;left:0;width:clamp(70px,9vw,120px);height:auto;
  animation:flypast 26s linear infinite;pointer-events:none;z-index:0}
@media (prefers-reduced-motion:reduce){
  .flypast,.band-sky::before,.band-sky::after,.hero::before,.hero::after{animation:none}}

/* confetti, for winning things */
.bit{position:fixed;width:11px;height:15px;z-index:400;pointer-events:none;
  border:2px solid var(--ink);border-radius:3px}
@keyframes bitfall{0%{transform:translateY(-8px) rotate(0);opacity:1}
  100%{transform:translateY(46vh) rotate(540deg);opacity:0}}


/* ═══ modes — the site meets you where you are ════════════════════════
   No age is ever asked for. A visitor picks who they are (or skips it):

     explorer  under-10 energy: the full crayon box — sky-coloured page,
               bigger type, more motion, every band saturated
     pilot     the serious 14-year-old: calmer surfaces, motion off,
               the licence-path content revealed, games de-emphasised

   The choice is data-mode on <body>, stored in localStorage on the device
   and nowhere else. Default (no mode) is the site as designed. */

/* content gates: blocks that exist for one audience only */
[data-only]{display:none!important}
body[data-mode="explorer"] [data-only="explorer"]{display:block!important}
body[data-mode="pilot"]    [data-only="pilot"]{display:block!important}

/* ── EXPLORER: turn everything up ─────────────────────────────────── */
body[data-mode="explorer"]{background:var(--sky-pale);font-size:clamp(17px,1.3vw,19px)}
body[data-mode="explorer"] h1{font-size:clamp(44px,7.4vw,88px)}
body[data-mode="explorer"] h2{font-size:clamp(33px,4.8vw,58px);
  text-decoration-thickness:5px;padding-bottom:18px}
body[data-mode="explorer"] .band-paper2{background:#FBE3B3}
body[data-mode="explorer"] .band-sky{background:var(--sky)}
body[data-mode="explorer"] .band{padding:clamp(40px,5.6vw,84px) 0}
body[data-mode="explorer"] .kicker{font-size:14px;transform:rotate(-2.2deg)}
body[data-mode="explorer"] .frame,body[data-mode="explorer"] .qcard,
body[data-mode="explorer"] .panel{border-radius:28px}
body[data-mode="explorer"] .frame-tilt{transform:rotate(-2.2deg)}
body[data-mode="explorer"] .frame-tilt:nth-child(even){transform:rotate(2.3deg)}
body[data-mode="explorer"] .flypast{animation-duration:16s}
/* ⚠ Explorer mode used to turn the footer GREEN. With the footer's brass
   headings and pale link text that is poor contrast — measured against
   #5FA344 the links were unreadable — and the footer is the one place on the
   site where the small print has to be legible in every mode. The playful
   green stays on the BANDS, where it belongs; the footer keeps its ink. */
body[data-mode="explorer"] .foot{background:var(--ink)}

/* ── PILOT: turn it down, and mean it ─────────────────────────────── */
body[data-mode="pilot"] .flypast,
body[data-mode="pilot"] .hero::before,body[data-mode="pilot"] .hero::after,
body[data-mode="pilot"] .band-sky::before,body[data-mode="pilot"] .band-sky::after{
  animation:none;display:none}
body[data-mode="pilot"] main h2{text-decoration-color:var(--sky-deep);
  text-decoration-thickness:3px}
body[data-mode="pilot"] .facts div{transform:none}
body[data-mode="pilot"] .frame-tilt,body[data-mode="pilot"] .frame-tilt:nth-child(even){
  transform:none}
body[data-mode="pilot"] .btn-go:hover{animation:none}
body[data-mode="pilot"] .kicker{background:var(--sky);transform:none}

/* ── the chooser overlay ──────────────────────────────────────────── */
.who{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(43,33,24,.66);padding:18px}
.who[hidden]{display:none}
.who-in{background:var(--paper);border:var(--bd) solid var(--ink);border-radius:26px;
  box-shadow:0 8px 0 var(--ink);max-width:640px;width:100%;
  padding:clamp(22px,3.4vw,36px);text-align:center}
.who-in h2{margin-bottom:8px;font-size:clamp(26px,4vw,40px)}
.who-in > p{color:var(--ink-2);margin-bottom:20px;font-size:15.5px}
.who-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.who-cards{grid-template-columns:1fr}}
.who-cards button{font-family:var(--rounded);font-weight:800;color:var(--ink);
  border:var(--bd) solid var(--ink);border-radius:20px;padding:20px 16px;cursor:pointer;
  box-shadow:0 5px 0 var(--ink);transition:transform .09s;text-align:center}
.who-cards button:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.who-cards .big-emoji{display:block;font-size:44px;margin-bottom:10px}
.who-cards b{display:block;font-size:19px;margin-bottom:6px}
.who-cards span{display:block;font-family:var(--body);font-weight:500;font-size:13.5px;
  line-height:1.5;color:var(--ink-2)}
.who-explorer{background:var(--sky)}
.who-pilot{background:var(--paper-2)}
.who-skip{margin-top:16px;background:none;border:0;cursor:pointer;
  font-family:var(--rounded);font-weight:700;font-size:13.5px;color:var(--ink-3)}
.who-skip:hover{color:var(--ink)}
.who-note{margin-top:12px;font-size:12px;color:var(--ink-3)}

/* the little switch in the nav, for changing your mind */
.mode-sw{display:flex;border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;
  flex:0 0 auto}
.mode-sw button{border:0;background:var(--paper);cursor:pointer;font-size:16px;
  padding:6px 10px;line-height:1}
.mode-sw button[aria-pressed="true"]{background:var(--brass)}
.mode-sw button:focus-visible{outline:3px solid var(--aero-red);outline-offset:-3px}

/* a .frame used as a link must not inherit link-blue */
a.frame{color:var(--ink-2)}
a.frame h3{color:var(--ink)}
a.frame p{color:var(--ink-2)}

/* ── the game shell ───────────────────────────────────────────────────
   Every game launches from a card into a full-screen panel: rules first,
   then the game, then out. The panel is a flex column so the stage gets
   whatever height is left and the game is capped to fit it — that is what
   makes a game "fit on one screen" instead of running off the bottom. */
.glaunch{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;
  align-items:center;width:100%;text-align:left;cursor:pointer;
  background:var(--paper);border:var(--bd) solid var(--ink);border-radius:24px;
  padding:clamp(14px,1.8vw,20px);box-shadow:0 6px 0 var(--ink);
  transition:transform .1s,box-shadow .1s;font-family:var(--body)}
.glaunch:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.glaunch:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.glaunch:focus-visible{outline:3px solid var(--aero-red);outline-offset:3px}
.glaunch + .glaunch{margin-top:clamp(12px,1.6vw,18px)}
.glaunch-emoji{font-size:clamp(32px,4vw,46px);line-height:1}
.glaunch-txt b{display:block;font-family:var(--rounded);font-weight:800;
  font-size:clamp(19px,2.2vw,26px);color:var(--ink);line-height:1.15;margin-bottom:3px}
.glaunch-txt small{display:block;font-size:14px;line-height:1.5;color:var(--ink-3)}
.glaunch-go{font-family:var(--rounded);font-weight:800;font-size:15px;color:#FFFDF6;
  background:var(--aero-red);border:2.5px solid var(--ink);border-radius:999px;
  padding:10px 18px;white-space:nowrap}
@media(max-width:560px){
  .glaunch{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .glaunch-go{grid-column:1/-1;text-align:center}
  .glaunch-txt small{display:none}
}

.gshell{position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;flex-direction:column}
.gshell[hidden]{display:none!important}
.gshell-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px clamp(12px,2.5vw,26px);border-bottom:var(--bd) solid var(--ink);
  background:var(--paper)}
.gshell-bar strong{font-family:var(--rounded);font-weight:800;
  font-size:clamp(17px,2.2vw,24px);color:var(--ink)}
.gshell-acts{display:flex;gap:9px}
/* ⚠ `justify-content:safe center` is load-bearing, not a flourish.
   The rules card was centred with `margin:auto`, which is fine until the card
   is TALLER than the panel — then the auto margins centre the overflow, half
   of it goes above the scroll origin, and no amount of scrolling can reach it.
   On a short laptop window that chopped the game's title clean in half at the
   top of the rules panel. `safe` means: centre it when it fits, fall back to
   top-aligned when it does not. */
.gshell-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:safe center;
  overflow-y:auto;padding:clamp(10px,1.6vw,20px) clamp(12px,2.5vw,26px)}
.gshell-rules{margin-inline:auto;margin-block:0;max-width:520px;text-align:center;
  background:var(--paper-2);border:var(--bd) solid var(--ink);border-radius:24px;
  padding:clamp(20px,3vw,34px);box-shadow:0 6px 0 var(--ink)}
.gshell-rules[hidden]{display:none!important}
.gshell-emoji{font-size:clamp(44px,7vw,64px);line-height:1;display:block;margin-bottom:6px}
.gshell-rules h2{margin-bottom:16px}
.gshell-rules ol{text-align:left;margin:0 0 22px;padding-left:22px;
  font-size:clamp(15px,1.3vw,17px);line-height:1.6}
.gshell-rules li{margin-bottom:9px}
.gshell-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.gshell-stage[hidden]{display:none!important}
.gshell-stage > *{flex:1 1 auto;min-height:0;margin:0!important;
  border:0!important;box-shadow:none!important;padding:0!important;background:none!important}
/* the line that makes a game fit the screen instead of running off it */
/* Fitting a game on one phone screen, which is where children actually play.
   Three things, because three different games broke in three different ways:

   1. CAP BOTH DIRECTIONS. max-height alone is enough for a landscape canvas —
      the width follows. Traffic's canvas is SQUARE (640x640), so capping only
      the height left it 582px wide on a 375px phone: 219px off the right edge,
      and the call and the twelve clock buttons shoved 309px below the fold.
      `!important` because school/index.html has `#traffic{max-width:640px}`,
      and an ID beats this selector however it is written.
   2. LESS CANVAS ON A PHONE. The 230px allowance is the shell's chrome plus a
      typical control row. Say Again's call-sign box and Weight & Balance's chip
      row are taller than that, so they hung 179px and 72px below the fold.
      Short screens give the canvas less and the controls more.
   3. AND IF IT STILL DOES NOT FIT, let it scroll. A game that needs one more
      swipe is a compromise; a Check button a child cannot reach is a dead end. */
.gshell-stage{overflow-y:auto;overscroll-behavior:contain}
.gshell-stage canvas{max-height:calc(100vh - 230px);max-width:100%!important;
  width:auto!important;
  max-width:100%;margin:0 auto}
.gshell-stage .teach,.gshell-stage > * > h2:first-child{display:none}

/* game artwork (OpenArt, in the house picture-book style) */
.glaunch-art{width:clamp(78px,9vw,116px);aspect-ratio:4/3;border-radius:14px;
  border:2.5px solid var(--ink);background-size:cover;background-position:center;
  display:block;flex:0 0 auto}
.gshell-art{display:block;width:100%;aspect-ratio:16/7;border-radius:18px;
  border:var(--bd) solid var(--ink);background-size:cover;background-position:center 42%;
  margin-bottom:16px}
.gshell-art[hidden],.gshell-emoji[hidden]{display:none!important}
@media(max-width:560px),(max-height:820px){
  .gshell-stage canvas{max-height:calc(100vh - 320px)}
}

/* ── the competition banner (home page, top) ─────────────────────────── */
.compbar{display:block;text-decoration:none;background:var(--aero-red);
  border-bottom:var(--bd) solid var(--ink)}
.compbar-in{max-width:1400px;margin:0 auto;padding:clamp(14px,1.8vw,22px) var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(12px,2vw,24px);
  align-items:center}
.cb-flag{grid-column:1/-1;display:inline-block;font-family:var(--rounded);font-weight:800;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:var(--brass);border:2.5px solid var(--ink);border-radius:999px;
  padding:5px 14px;margin-bottom:4px;justify-self:start}
.cb-txt b{display:block;font-family:var(--rounded);font-weight:800;color:#FFFDF6;
  font-size:clamp(20px,2.6vw,30px);line-height:1.1;margin-bottom:4px}
.cb-txt small{display:block;color:#FFF1EE;font-size:clamp(13.5px,1.15vw,15.5px);
  line-height:1.5;max-width:70ch}
.cb-go{font-family:var(--rounded);font-weight:800;font-size:clamp(14px,1.2vw,16px);
  color:var(--ink);background:#FFFDF6;border:2.5px solid var(--ink);border-radius:999px;
  padding:11px 20px;white-space:nowrap;box-shadow:0 4px 0 var(--ink)}
.compbar:hover .cb-go{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
@media(max-width:640px){
  .compbar-in{grid-template-columns:1fr}
  .cb-go{justify-self:start}
}

/* ── Wings Club ───────────────────────────────────────────────────────── */
.plus-list{text-align:left;margin:0 0 20px;padding-left:20px;font-size:15px;line-height:1.6}
.plus-list li{margin-bottom:8px}
.plus-list b{font-family:var(--rounded);color:var(--ink)}
.plus-buys{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.plus-pip{display:inline-block;margin-left:8px;font-family:var(--rounded);font-weight:800;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;vertical-align:middle;
  background:var(--brass);color:var(--ink);border:2px solid var(--ink);border-radius:999px;
  padding:2px 8px}
.is-plus{position:relative}


/* Launch mode: the "More launching soon…" note in the bar is the only thing
   in .nav-links while the site is gated. On a phone it wraps against the
   brand and the two collide, so below 700px the bar keeps the mark and the
   controls and drops the note — the visitor is already ON the one open page
   and the same words sit on the coming-soon screen anyway. */
@media (max-width:700px){ .nav-soon{ display:none } }