/* ==========================================================================
   When Light Fades — shared site tokens
   --------------------------------------------------------------------------
   Colour carries information here; it is not decoration.

   The game's antagonist, The Forgetting, drains colour and meaning from the
   world (Antigravity/game_narratives.md). So grey is reserved for The
   Forgetting and for genuinely inert states — locked, empty, offline. Every
   other hue belongs to an island, and an island means a subject.

   The four island hues are sampled from the SHIPPED zone art, not invented:
   verbia_town #889838, ciyu_town #f8e8d8, clockwork_town #586888,
   LivingLab_town #085848. They are lifted for screen contrast against dusk.
   A child learns the mapping once, then navigates by colour before text.
   The same hues encode subjects in the parent dashboard, so the colour the
   child knows as "their island" is the colour the parent reads in a chart.
   ========================================================================== */

:root {
  /* Ground and neutrals ---------------------------------------------------- */
  --dusk:        #232b3a;  /* page ground — a real dusk blue, not black */
  --dusk-deep:   #1a2130;  /* recessed surfaces */
  --dusk-lift:   #2e3849;  /* raised surfaces */
  --fog:         #8e929b;  /* THE FORGETTING. Inert/locked/empty states only. AA on dusk. */
  --fog-faint:   #5c636e;  /* hairlines, dividers */
  --parchment:   #f2ece0;  /* primary text on dusk */
  --parchment-2: #c3bcae;  /* secondary text */

  /* The light itself ------------------------------------------------------- */
  /* Reserved for focus rings and the Lumen mechanic. Never a decorative
     fill, and never a gradient — that was the old site's whole problem. */
  --lumen:       #ffe9a8;

  /* Islands = subjects ----------------------------------------------------- */
  --verbia:      #b8a83e;  /* English   — olive-gold */
  --ciyu:        #d96a5a;  /* 华文      — soft red, the bible's "red and gold" */
  --numerion:    #5b7fc7;  /* Maths     — slate blue */
  --eureka:      #2e9e7b;  /* Science   — teal */

  /* Text-safe variants. The hues above are the art's own and stay saturated for
     borders, fills and chart marks; as TEXT on --dusk-lift three of the four
     land between 2.98:1 and 3.54:1, and #5b7fc7 fails even the large-text
     floor. These are lifted toward white until each clears 4.5:1, so a subject
     label is legible at any size — including in the parent dashboard. */
  --verbia-ink:   #b8a83e;  /* already 4.9:1 */
  --ciyu-ink:     #e1887b;
  --numerion-ink: #86a0d6;
  --eureka-ink:   #56b094;

  /* Type ------------------------------------------------------------------- */
  /* Fraunces: storybook warmth, crafted at display sizes.
     Atkinson Hyperlegible: drawn for legibility — unambiguous I/l/1, open
     apertures. It serves the seven-year-old and the accessibility floor at
     the same time, which is why it beats a prettier body face here.
     LXGW WenKai carries 华文, matching Cíyǔ's ink-brush island. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-cjk:     'LXGW WenKai TC', 'Noto Sans SC', var(--font-body);

  /* A type scale, not a pile of arbitrary rem values. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.6rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.95vw, 2.3rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2vw, 3.3rem);
  --step-4:  clamp(2.4rem, 1.6rem + 4vw, 5rem);

  --measure: 66ch;          /* line length — under 80 for developing readers */
  --tap: 44px;              /* minimum touch target */
  --radius: 14px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dusk);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 48;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); font-weight: 600; }
h3 { font-size: var(--step-1); font-weight: 600; }

p { max-width: var(--measure); margin: 0 0 1em; }
:lang(zh), .cjk { font-family: var(--font-cjk); }

/* Links and focus ---------------------------------------------------------- */
a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--lumen);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Layout ------------------------------------------------------------------- */
.wrap { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }
.stack > * + * { margin-top: var(--flow, 1.25rem); }

/* Buttons ------------------------------------------------------------------
   Flat fills. The old site put the same gold gradient on every button, which
   made a call-to-action indistinguishable from a link to the FAQ. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.7em 1.5em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-play {
  background: var(--lumen);
  color: #2a2410;
  box-shadow: 0 0 0 0 rgba(255, 233, 168, 0.5);
}
.btn-quiet {
  background: transparent;
  color: var(--parchment);
  border-color: var(--fog-faint);
}
.btn-quiet:hover { border-color: var(--parchment-2); }

/* Motion -------------------------------------------------------------------
   The entire motion budget is one fog reveal on the home page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Utility ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}