/* =============================================================
   AKU WORLD 2.0 · design system  ·  v2-tokens.css  ·  2026-10-10
   Source: November 2023 Aku Brand Kit + Micah's rebuild plan.
   Three modes share one set of parts:
     .mode-cinematic  books, worlds, story      (dark, art leads)
     .mode-editorial  about, schools, forms     (paper, type leads)
     .mode-handmade   activities, student work  (pink, hand-drawn)
   Not used: numbered HUD labels, bracket buttons, mono caps, glows,
   pill badges, uniform card grids.
   ============================================================= */
@font-face{ font-family:'Nostromo'; font-weight:900; font-display:swap; src:url('/fonts/Nostromo-Black.otf') format('opentype'); }
@font-face{ font-family:'Nostromo'; font-weight:800; font-display:swap; src:url('/fonts/Nostromo-Heavy.otf') format('opentype'); }
@font-face{ font-family:'Aku Brushstroke'; font-weight:400; font-display:swap; src:url('/fonts/AkuBrushstroke-Regular.ttf') format('truetype'); }
/* Agrandir: UNLICENSED, local prototype only. Swap these four lines for the licensed web files before anything ships. */
@font-face{ font-family:'Agrandir'; font-weight:400; font-display:swap; src:url('/fonts/agrandir/PPAgrandir-NormalRegular.ttf') format('truetype'); }
@font-face{ font-family:'Agrandir'; font-weight:700; font-display:swap; src:url('/fonts/agrandir/PPAgrandir-NormalBold.ttf') format('truetype'); }
@font-face{ font-family:'Agrandir Grand'; font-weight:500; font-display:swap; src:url('/fonts/agrandir/PPAgrandir-GrandMedium.ttf') format('truetype'); }
@font-face{ font-family:'Agrandir Grand'; font-weight:800; font-display:swap; src:url('/fonts/agrandir/PPAgrandir-GrandHeavy.ttf') format('truetype'); }

:root{
  /* ---- colour: the six kit colours, each with one job ---- */
  --starlight:#FFEAA7;   /* warm ground, highlights on dark */
  --mars:#E13D35;        /* Pyra, Book 2, urgency */
  --galaxy:#3D2BB0;      /* Ibra, Book 1, links on paper */
  --cosmos:#F5D9E1;      /* handmade pages */
  --deep:#222222;        /* ink */
  --energy:#03E9A4;      /* THE action colour: one primary button per view */
  /* supporting neutrals (derived, not new brand colours) */
  --night:#0B0A12;       /* cinematic ground */
  --paper:#FFF9E8;       /* editorial ground: Starlight, lightened */
  --line:rgba(34,34,34,.16);
  --energy-ink:#0B1210;  /* text on Energy Green */
  --error:#B3261E;
  --mars-ink:#B5271F;    /* Mars darkened one step: the only red allowed for normal-size text on light grounds */
  --galaxy-deep:#2A1D85; /* pressed / hover state of Galaxy */
  --muted-ink:#55524C;   /* secondary text on Paper, Starlight and Pink (AA) */

  /* ---- type ---- */
  --display:'Nostromo','Agrandir Grand','Arial Black',sans-serif;      /* headlines, matches the book covers */
  --ui:'Agrandir Grand','Agrandir','Helvetica Neue',Arial,sans-serif;  /* nav, buttons, labels, subheads */
  --body:'Agrandir','Helvetica Neue',Helvetica,Arial,sans-serif;       /* reading text */
  --hand:'Aku Brushstroke','Bradley Hand',cursive;                     /* accents only, never body */
  --t-hero:clamp(2.7rem,6.6vw,5.8rem);
  --t-h1:clamp(2.3rem,5.2vw,4.4rem);
  --t-h2:clamp(1.8rem,3.6vw,3rem);
  --t-h3:clamp(1.2rem,1.8vw,1.5rem);
  --t-lede:clamp(1.1rem,1.5vw,1.35rem);
  --t-body:clamp(1rem, .95rem + .22vw, 1.125rem);   /* never below 16px */
  --t-small:.9375rem;                              /* 15px: labels and captions only, never paragraphs */
  --lh-display:.92; --lh-headline:1.04; --lh-subhead:1.2; --lh-lede:1.45; --lh-body:1.6;
  --t-hand:clamp(1.5rem,2.6vw,2.2rem);

  /* ---- space: one scale, used for gaps and section padding ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --gut:clamp(20px,5vw,72px);
  --measure:62ch;          /* body text: 45 to 70 characters a line */
  --measure-lede:38ch;     /* ledes run shorter */
  --measure-head:18ch;     /* headlines break before they sprawl */
  --radius:3px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:.18s; --slow:.7s;

  /* ---- the active world: set data-world="ibra|pyra" on any ancestor ---- */
  --world:var(--mars);
}
[data-world="ibra"]{ --world:var(--galaxy); }
[data-world="pyra"]{ --world:var(--mars); }

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--body); font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; background:var(--paper); color:var(--deep); }
img, video{ max-width:100%; display:block; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--galaxy); outline-offset:3px; }

/* ---------- modes ---------- */
.mode-cinematic{ --bg:var(--night); --fg:#fff; --muted:rgba(255,255,255,.78); --accent:var(--starlight); --rule:rgba(255,255,255,.2); background:var(--bg); color:var(--fg); }
.mode-editorial{ --bg:var(--paper); --fg:var(--deep); --muted:var(--muted-ink); --accent:var(--galaxy); --rule:var(--line); background:var(--bg); color:var(--fg); }
.mode-handmade{ --scatter-o:.055; --bg:var(--cosmos); --fg:var(--deep); --muted:#4E4A4C; --accent:var(--mars-ink); --rule:rgba(34,34,34,.2); background:var(--bg); color:var(--fg); }
.mode-cinematic :focus-visible{ outline-color:var(--starlight); }

/* ---------- type parts ---------- */
.display{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.92; letter-spacing:.005em; text-wrap:balance; }
.display--hero{ font-size:var(--t-hero); line-height:.9; }
.display--1{ font-size:var(--t-h1); }
.display--2{ font-size:var(--t-h2); }
/* headline: Agrandir Grand Heavy, sentence case. The warm voice: editorial, emotional and educator pages lead with this. */
.headline{ margin:0; font-family:var(--ui); font-weight:800; line-height:var(--lh-headline); letter-spacing:-.018em; text-wrap:balance; }
.headline--1{ font-size:clamp(2.2rem,4.6vw,4rem); }
.headline--2{ font-size:clamp(1.7rem,3.1vw,2.7rem); }
.headline--3{ font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.15; letter-spacing:-.01em; }
.subhead{ margin:0; font-family:var(--ui); font-weight:500; font-size:var(--t-h3); line-height:1.2; }
.lede{ text-wrap:pretty; margin:0; font-size:var(--t-lede); line-height:var(--lh-lede); max-width:var(--measure-lede); color:var(--muted); }
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1em; }
.kicker{ margin:0; font-family:var(--ui); font-weight:500; font-size:var(--t-small); color:var(--accent); }   /* sentence case, never mono caps */
.hand{ margin:0; font-family:var(--hand); font-size:var(--t-hand); line-height:1; color:var(--accent); transform:rotate(-2deg); transform-origin:left bottom; }
.link{ color:inherit; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; text-decoration-color:var(--accent); }
.link:hover, .link.is-hover{ color:var(--accent); text-decoration-thickness:3px; }
.link:active{ opacity:.8; }
.link:focus-visible, .link.is-focus{ outline:3px solid var(--galaxy); outline-offset:3px; border-radius:2px; text-decoration:none; }
.quote, .quote blockquote{ margin:0; }
.quote p{ margin:0; font-family:var(--ui); font-weight:500; font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.25; text-wrap:balance; }
.quote cite{ display:block; margin-top:var(--s4); font-style:normal; font-size:var(--t-small); color:var(--muted); }

/* ---------- buttons: solid squared blocks ----------
   States: rest, hover (lifts 2px, colour swaps), pressed (settles 1px, no lift), focus (3px ring, 3px gap),
   busy (keeps its place, shows a spinner, ignores taps), disabled (flat grey, no pointer). */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 26px; border:2px solid transparent; border-radius:var(--radius);
  font-family:var(--ui); font-weight:800; font-size:14px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; line-height:1.1; cursor:pointer; text-align:center;
  transition:transform var(--fast) var(--ease), background-color var(--fast), color var(--fast), border-color var(--fast); }
.btn:hover, .btn.is-hover{ transform:translateY(-2px); }
.btn:active, .btn.is-active{ transform:translateY(1px); }
.btn:focus-visible, .btn.is-focus{ outline:3px solid var(--galaxy); outline-offset:3px; }
.mode-cinematic .btn:focus-visible, .mode-cinematic .btn.is-focus{ outline-color:var(--starlight); }
.btn--action{ background:var(--energy); color:var(--energy-ink); }                 /* one per view */
.btn--action:hover, .btn--action.is-hover{ background:var(--deep); color:#fff; }
.mode-cinematic .btn--action:hover, .mode-cinematic .btn--action.is-hover{ background:#fff; color:var(--deep); }
.btn--action:active, .btn--action.is-active{ background:#02C98D; color:var(--energy-ink); }
.btn--solid{ background:var(--fg,var(--deep)); color:var(--bg,#fff); }
.btn--solid:hover, .btn--solid.is-hover{ background:var(--galaxy); color:#fff; }
.btn--solid:active, .btn--solid.is-active{ background:var(--galaxy-deep); color:#fff; }
.mode-cinematic .btn--solid:hover, .mode-cinematic .btn--solid.is-hover{ background:var(--starlight); color:var(--deep); }
.btn--line{ background:transparent; color:var(--fg,var(--deep)); border-color:currentColor; }
.btn--line:hover, .btn--line.is-hover{ background:var(--fg,var(--deep)); color:var(--bg,#fff); border-color:var(--fg,var(--deep)); }
.btn--line:active, .btn--line.is-active{ background:var(--galaxy-deep); color:#fff; border-color:var(--galaxy-deep); }
.btn--small{ min-height:44px; padding:10px 18px; font-size:13px; }
.btn[disabled], .btn[aria-disabled="true"]{ background:#D9D5CA; color:#6E6A62; border-color:transparent; pointer-events:none; transform:none; }
.btn.is-busy{ pointer-events:none; color:transparent !important; }
.btn.is-busy::after{ content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:3px solid var(--spin, #fff); border-right-color:transparent; animation:spin .7s linear infinite; }
.btn--action.is-busy::after{ --spin:var(--energy-ink); }
.btn--line.is-busy{ border-color:var(--fg,var(--deep)); }
.btn--line.is-busy::after{ --spin:var(--fg,var(--deep)); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* ---------- navigation links ----------
   Rest: plain. Hover: underline grows in. Current page: solid underline in the accent, heavier weight. Focus: ring. */
.navlink{ position:relative; display:inline-block; padding:10px 0; font-family:var(--ui); font-weight:500; font-size:15px; color:inherit; text-decoration:none; }
.navlink::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--fast) var(--ease); }
.navlink:hover::after, .navlink.is-hover::after{ transform:scaleX(1); }
.navlink[aria-current="page"]{ font-weight:800; }
.navlink[aria-current="page"]::after{ transform:scaleX(1); height:3px; background:var(--accent, currentColor); }
.navlink:focus-visible, .navlink.is-focus{ outline:3px solid var(--galaxy); outline-offset:4px; border-radius:2px; }
.mode-cinematic .navlink:focus-visible{ outline-color:var(--starlight); }

/* ---------- form fields ----------
   Rest: 2px ink border on white. Hover: border turns Galaxy. Focus: Galaxy border + 3px ring. Filled: same as rest.
   Error: red border, red message under the field, never colour alone. Disabled: grey fill, grey text. */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font-family:var(--ui); font-weight:500; font-size:var(--t-small); }
.field input, .field select, .field textarea{ width:100%; min-height:52px; padding:13px 14px; font:inherit; font-size:max(1rem,16px); color:var(--deep); background:#fff; border:2px solid var(--deep); border-radius:var(--radius); transition:border-color var(--fast); }
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#6B675F; }
.field input:hover, .field select:hover, .field textarea:hover, .field.is-hover input{ border-color:var(--galaxy); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .field.is-focus input{ outline:3px solid var(--galaxy); outline-offset:2px; border-color:var(--galaxy); }
.field.is-error input, .field.is-error select, .field.is-error textarea{ border-color:var(--error); }
.field input:disabled, .field select:disabled, .field textarea:disabled{ background:#ECE8DC; border-color:#B9B4A8; color:#6E6A62; cursor:not-allowed; }
.field__msg{ margin:0; font-size:var(--t-small); color:var(--error); }
.field__msg::before{ content:"! "; font-weight:700; }
.field__hint{ margin:0; font-size:var(--t-small); color:var(--muted); }

/* ---------- brand patterns (from the logo's own shapes) ----------
   Restraint: at most ONE Gravity On band and ONE Gravity Off scatter on a page. The band marks a page's close (above the footer)
   or one hand-off between modes. The scatter sits behind one block only, at 8 to 14% strength, never behind paragraphs of body text. */
/* Gravity On: a tidy strip. Use as a section edge or to mark a focus area. */
.band{ height:clamp(36px,4.4vw,60px); background-color:var(--band-bg, var(--starlight)); position:relative; overflow:hidden; }
.band::before{ content:""; position:absolute; inset:0; background-color:var(--band-fg, var(--world));
  -webkit-mask:url('/images/v2/Gravity-On-Black.svg') left center / auto 260% repeat-x; mask:url('/images/v2/Gravity-On-Black.svg') left center / auto 260% repeat-x; }
/* Gravity Off: loose shapes behind a block. Keep it quiet: it is a texture, not the subject. */
.scatter{ position:relative; isolation:isolate; }
.scatter::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-color:var(--scatter, var(--accent)); opacity:var(--scatter-o, .1);
  -webkit-mask:url('/images/v2/Gravity-Off-Black.svg') center / 760px auto repeat; mask:url('/images/v2/Gravity-Off-Black.svg') center / 760px auto repeat; }

/* ---------- layout parts ---------- */
.wrap{ padding-inline:var(--gut); }
.section{ padding-block:clamp(56px,9vw,128px); }
.rule{ border:0; border-top:2px solid var(--rule); margin:0; }
/* feature: art and words side by side, never the same split twice in a row (add .feature--flip) */
.feature{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,5vw,80px); align-items:center; }
.feature--flip{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.feature--flip > :first-child{ order:2; }
.feature__art img{ width:100%; height:auto; border-radius:var(--radius); }
.stack{ display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start; }
/* book: the cover is the object, set at a slight tilt, no card around it */
.book{ display:flex; gap:clamp(18px,3vw,36px); align-items:flex-end; padding-bottom:22px; }
.book__cover{ width:clamp(130px,18vw,230px); height:auto; flex:none; border-radius:2px; box-shadow:14px 18px 0 var(--world); transform:rotate(-2.5deg); transition:transform var(--slow) var(--ease); }
.book:hover .book__cover{ transform:rotate(0deg) translateY(-4px); }

@media (max-width:760px){
  .book{ flex-direction:column; align-items:flex-start; gap:34px; padding-bottom:0; }
  .book__cover{ width:min(64vw, 280px); margin-left:6px; box-shadow:12px 14px 0 var(--world); }
  .feature, .feature--flip{ grid-template-columns:1fr; }
  .feature--flip > :first-child{ order:0; }
  .btn-row .btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){ .btn, .book__cover{ transition:none; } .btn:hover{ transform:none; } }