/* ---------------------------------------------------------------------------------------
   Styling for the /learn/ subject pages.

   These pages used to borrow assets/legal.css — the deliberately austere stylesheet built
   for Terms and Privacy. kjh, 23 Jul 2026: the reason he wanted them hidden was that they
   were "not well done as professional as fullmarks.sg". That is a styling problem, not a
   reason to hide a page, so this file gives them the LANDING's design language instead.

   Every token below is copied from LP_STYLE in assets/app.js — the landing's shadow-DOM
   stylesheet — so the two cannot drift apart in palette or type. The landing owns the
   design; this file is a plain-CSS mirror of the parts a static page needs (nav, ruled
   paper, hero, section heads, pills, cards, buttons). If LP_STYLE's tokens change, change
   them here too.

   Deliberately NOT copied: the animation machinery, the pricing table, the demo player.
   A static page has no rAF timeline, and pricing that has to be kept in sync by hand is
   the copy most likely to go stale and mislead.
--------------------------------------------------------------------------------------- */
:root{
  --paper:#F5EEDC; --paper2:#FBF4E6; --canvas:#efe9dc;
  --ink:#1E1B16; --ink2:#46402F; --muted:#5d5643; --faint:#9a927c;
  --rule:rgba(70,64,47,.12); --rule2:rgba(70,64,47,.18);
  --blue:#2B5FD9; --blue-deep:#204ec2;
  --rust:#E8532F; --volt:#FFDE59; --volt-deep:#C99E00;
  --serif:'Instrument Serif',Georgia,serif;
  --grot:'Space Grotesk',system-ui,sans-serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
/* Dark mode. The landing remembers the student's choice in localStorage under
   'fm-lp-theme' and these pages read the SAME key (see the inline script in each page), so
   a visitor who set dark on fullmarks.sg does not get flashed white here. The media query
   is the fallback for anyone arriving cold from a search result. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1b1712; --paper2:#241f18; --canvas:#131009;
    --ink:#f4efe4; --ink2:#d6cebc; --muted:#a89f89; --faint:#7c7460;
    --rule:rgba(244,239,228,.13); --rule2:rgba(244,239,228,.2);
    --blue:#5f84e8; --blue-deep:#7a99ee;
    --rust:#ff6f4d; --volt:#FFDE59; --volt-deep:#e6bb33;
  }
}
:root[data-theme="dark"]{
  --paper:#1b1712; --paper2:#241f18; --canvas:#131009;
  --ink:#f4efe4; --ink2:#d6cebc; --muted:#a89f89; --faint:#7c7460;
  --rule:rgba(244,239,228,.13); --rule2:rgba(244,239,228,.2);
  --blue:#5f84e8; --blue-deep:#7a99ee;
  --rust:#ff6f4d; --volt:#FFDE59; --volt-deep:#e6bb33;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;
  /* The ruled-paper ground with the red margin rule is the landing's signature. It is what
     makes a page read as FullMarks before a single word is processed. */
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 35px,rgba(70,64,47,.07) 35px 36px),
    linear-gradient(to right,transparent 0 72px,rgba(232,83,47,.20) 72px 74px,transparent 74px);
}
@media (prefers-color-scheme: dark){
  body:not([data-theme="light"]){background-image:
    repeating-linear-gradient(to bottom,transparent 0 35px,rgba(244,239,228,.045) 35px 36px),
    linear-gradient(to right,transparent 0 72px,rgba(232,83,47,.22) 72px 74px,transparent 74px)}
}
:root[data-theme="dark"] body{background-image:
  repeating-linear-gradient(to bottom,transparent 0 35px,rgba(244,239,228,.045) 35px 36px),
  linear-gradient(to right,transparent 0 72px,rgba(232,83,47,.22) 72px 74px,transparent 74px)}
h1,h2,h3{margin:0}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;z-index:99}

/* ---------------- NAV ---------------- */
/* The nav is a full-bleed bar with its CONTENTS on the same container as everything else,
   so the wordmark sits directly above the headline instead of out at the window edge. */
.nav{border-bottom:2px solid var(--rule);position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(9px)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand .word{font-family:var(--serif);font-size:27px;line-height:1;color:var(--ink)}
.volt-logo{width:30px;height:36px;overflow:visible;flex:none}
.volt-logo .body{animation:voltBob 3.6s ease-in-out infinite;transform-origin:60px 90px}
.volt-logo .spark{animation:voltSpark 2.2s ease-in-out infinite}
@keyframes voltBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes voltSpark{0%,100%{opacity:.25}45%,55%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .volt-logo .body,.volt-logo .spark{animation:none} }
.navlinks{display:flex;gap:clamp(16px,2.4vw,34px);font-family:var(--mono);font-size:13px;letter-spacing:.11em;color:var(--ink2)}
.navlinks a{padding:6px 0;transition:color .15s;white-space:nowrap}
.navlinks a:hover{color:var(--rust)}
@media(max-width:860px){ .navlinks{display:none} }

/* ---------------- BUTTONS ---------------- */
.btn{font-family:var(--grot);font-weight:700;border-radius:13px;cursor:pointer;
  transition:transform .12s,box-shadow .12s;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--ink)}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.btn-blue:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost{border:2px solid var(--ink2);color:var(--ink2);background:transparent}
.btn-ghost:hover{background:rgba(70,64,47,.05)}
.nav .btn{font-size:14.5px;padding:11px 20px}

/* ---------------- ONE CONTAINER ----------------
   Every band on the page — hero, stats, each section, the closing CTA — sits in THIS and
   nothing else. It exists because the first version gave the hero `max-width + margin:0
   auto` (centred) and the stats card `margin: 34px clamp(...)` (pinned to the left edge).
   On a wide screen those two rules resolve to different left edges, so the stats card sat
   well left of, and much wider than, the hero text above it. Alignment that depends on two
   rules agreeing will eventually stop agreeing; one container cannot disagree with itself. */
.band{max-width:1080px;margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}

/* ---------------- HERO ---------------- */
.hero{padding-top:clamp(30px,4vw,54px);padding-bottom:6px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--faint);margin:0 0 16px}
/* Tracks the landing's own display scale (.fold .h1 in LP_STYLE: clamp(38px,3.2vw,56px),
   max-width 16ch). The first pass used 5.4vw, which on a wide monitor produced a headline
   noticeably larger than anything on fullmarks.sg. */
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,54px);line-height:1.05;
  letter-spacing:-.01em;max-width:17ch;margin:0 0 18px}
.lede{font-size:clamp(16px,1.15vw,18.5px);line-height:1.55;color:var(--muted);max-width:50ch;margin:0 0 26px}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-cta .btn{font-size:17px}
.hero-cta .btn-blue{padding:16px 30px;box-shadow:0 4px 0 var(--ink)}
.hero-cta .btn-ghost{padding:14px 26px;font-weight:600}
.hero-note{margin:20px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--faint)}

/* ---------------- STATS ---------------- */
/* The bordered, offset-shadow card is the landing's .demo treatment; the volt left edge is
   its .q-strip. Both say "this is the FullMarks surface" without needing a label. */
.stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,54px);margin-top:34px;
  background:var(--paper2);border:2px solid var(--ink);border-left:6px solid var(--volt);
  border-radius:14px;padding:22px 26px;box-shadow:6px 6px 0 rgba(70,64,47,.12)}
.stats div b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,40px);line-height:1}
.stats div span{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;color:var(--faint);text-transform:uppercase}

/* ---------------- SECTIONS ---------------- */
.sec{padding-top:clamp(44px,5vw,68px)}
.sec-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--faint);margin:0 0 14px}
.sec-h{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,44px);color:var(--ink);margin:0 0 22px;letter-spacing:.005em}
.sec p{font-size:16.5px;line-height:1.68;color:var(--muted);max-width:64ch;margin:0 0 16px}
.sec p strong{color:var(--ink);font-weight:600}

/* Topic pills — the landing's .tab, which is also how chapter chips read in-app. */
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:22px 0 0;list-style:none}
.chips li{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;font-weight:700;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);color:var(--ink)}

/* The pull-out for the one counter-intuitive thing on each page. */
.note{background:var(--paper2);border:2px solid var(--ink);border-radius:14px;padding:20px 24px;margin:26px 0 0;
  box-shadow:6px 6px 0 rgba(70,64,47,.12)}
.note .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--volt-deep);font-weight:700;
  text-transform:uppercase;display:block;margin-bottom:10px}
.note p{margin:0;color:var(--ink2)}

/* Sibling syllabuses, as cards rather than a bare list of links. */
.sibs{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px;margin:22px 0 0;padding:0;list-style:none}
.sibs a{display:block;background:var(--paper2);border:1.5px solid var(--rule2);border-radius:12px;padding:14px 16px;
  transition:border-color .15s,transform .12s}
.sibs a:hover{border-color:var(--ink);transform:translateY(-2px)}
.sibs b{display:block;font-family:var(--grot);font-weight:600;font-size:15px;margin-bottom:3px}
.sibs span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--faint)}

.cta-band{margin-top:clamp(46px,5vw,72px)}
.cta-band .inner{background:var(--paper2);border:2px solid var(--ink);border-radius:18px;
  padding:clamp(28px,4vw,44px);text-align:center;box-shadow:8px 8px 0 rgba(70,64,47,.12)}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,36px);margin:0 0 10px}
.cta-band p{color:var(--muted);margin:0 0 22px;font-size:16px}

.foot{margin:clamp(46px,5vw,72px) 0 0;border-top:2px solid var(--rule);padding:26px 0 60px}
.foot p{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--faint);margin:0}
.foot a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}