/* site.css — the marketing site (site/, research/25).
 *
 * The app's own palette and faces (app/css/tokens.css, fonts.css), so the site and the app
 * read as one thing: cool paper, ink-blue for her answers, gold for the stamp. The one bold
 * element is the hero's page of squared exercise book with a real exchange from the app on
 * it; everything else is quiet prose in one left-aligned column.
 *
 * No theme switch: the site follows the system's light or dark setting.
 */

@font-face{font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 700; font-display:swap; src:url('/fonts/bricolage-grotesque-600.woff2') format('woff2')}
@font-face{font-family:'Public Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/public-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2')}

:root{
  color-scheme:light dark;
  --paper:#F4F6F9; --card:#FFFFFF; --line:#DFE5EE;
  --grid:rgba(47,91,208,.075); --grid-strong:rgba(47,91,208,.16);
  --ink:#16233B; --ink-soft:#4C5A72;
  --accent:#2F5BD0; --accent-ink:#FFFFFF; --accent-soft:#E8EEFC;
  --gold:#B8860F; --gold-ink:#86610C; --gold-soft:#FAF2DE;
  --shadow:0 1px 2px rgba(22,35,59,.06), 0 18px 40px -18px rgba(22,35,59,.22);
  --f-display:'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --f-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --measure:66ch;
  --sq:24px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1420; --card:#18202F; --line:#2A3446;
    --grid:rgba(123,163,255,.08); --grid-strong:rgba(123,163,255,.16);
    --ink:#E7ECF6; --ink-soft:#A3B0C6;
    --accent:#7BA3FF; --accent-ink:#0E1420; --accent-soft:#1C2740;
    --gold:#E3B24F; --gold-ink:#E3B24F; --gold-soft:#2A2314;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.6 var(--f-body);
}
a{color:var(--accent); text-underline-offset:.18em}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
h1,h2{font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:0}
h1{font-size:clamp(34px,5.4vw,56px); max-width:18ch}
h2{font-size:clamp(22px,2.6vw,28px); margin:2.2em 0 .5em}
p,li,dd{max-width:var(--measure)}
p{margin:0 0 1em}
strong{font-weight:700}

.skip{position:absolute; left:16px; top:-100px; background:var(--card); padding:8px 12px; z-index:10}
.skip:focus{top:12px}

/* ── header and footer ─────────────────────────────────────────────────── */
.top{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  max-width:1120px; margin:0 auto; padding:18px 24px;
}
.wordmark{font-family:var(--f-display); font-weight:700; font-size:24px; letter-spacing:-.03em; color:var(--ink); text-decoration:none}
.top nav{display:flex; gap:20px; flex-wrap:wrap; flex:1}
.top nav a{color:var(--ink-soft); text-decoration:none; font-size:15px}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--ink); text-decoration:underline}

.foot{max-width:1120px; margin:96px auto 0; padding:32px 24px 48px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:15px}
.foot-line{color:var(--ink)}
.foot-links{display:flex; gap:20px; flex-wrap:wrap}
.foot-links a{color:var(--ink-soft)}
.foot-small{font-size:14px; margin:0}
.foot-small + .foot-small{margin-top:8px}
.foot-small a{color:var(--ink-soft)}

/* ── page column ───────────────────────────────────────────────────────── */
main{max-width:760px; margin:0 auto; padding:40px 24px 0}
main.wide{max-width:1120px}
.lede{font-size:clamp(18px,2vw,21px); color:var(--ink-soft); margin-top:.8em}
.quiet{color:var(--ink-soft); font-size:15px}

.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-weight:600; text-decoration:none; border-radius:10px; padding:13px 22px;
}
.btn:hover{filter:brightness(1.08)}
.btn-small{padding:8px 14px; font-size:15px}
.link{font-weight:600}
.actions{display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:28px}

.plain{padding-left:1.1em}
.plain li{margin:.35em 0}
.steps{padding-left:1.4em}
.steps li{margin:.6em 0; padding-left:.2em}
.steps li::marker{font-family:var(--f-display); font-weight:700; color:var(--gold-ink)}

/* ── the hero: a page of squared exercise book ─────────────────────────── */
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; padding:32px 0 24px}
.page-of-book{margin:0}
.book{
  position:relative; background-color:var(--card);
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size:var(--sq) var(--sq);
  background-position:-1px -1px;
  border-radius:6px 16px 16px 6px; box-shadow:var(--shadow);
  padding:calc(var(--sq) * 1.5) calc(var(--sq) * 1.5) calc(var(--sq) * 1.25) calc(var(--sq) * 3);
  transform:rotate(-1.2deg);
}
/* the margin line down the left, as in a school exercise book */
.book::before{content:""; position:absolute; top:0; bottom:0; left:calc(var(--sq) * 2); width:2px; background:var(--gold); opacity:.55}
.book .q,.book .her{font-family:var(--f-mono); font-weight:500; font-size:30px; display:flex; align-items:center; gap:14px; margin:0 0 12px}
.book .her{color:var(--accent); padding-left:var(--sq)}
.book .reply{
  margin:20px 0 0; background:var(--gold-soft); border-left:3px solid var(--gold);
  padding:14px 16px; border-radius:0 10px 10px 0; font-size:16px; line-height:1.5;
}
.book .not{font-weight:700}
.page-of-book figcaption{color:var(--ink-soft); font-size:15px; margin:22px 0 0 calc(var(--sq) * 1)}

.frac{display:inline-flex; flex-direction:column; align-items:center; line-height:1.05; vertical-align:middle}
.frac span:first-child{border-bottom:2.5px solid currentColor; padding:0 .15em .05em}
.frac span:last-child{padding-top:.08em}

/* ── home sections ─────────────────────────────────────────────────────── */
.band{max-width:760px}
.band h2{margin-top:2.6em}
.exam-list{list-style:none; padding:0; margin:0}
.exam-list li{padding:14px 0; border-bottom:1px solid var(--line); max-width:none}
.exam-list li:first-child{border-top:1px solid var(--line)}
.exam-list a{font-family:var(--f-display); font-weight:700; font-size:19px; display:block}
.exam-list span{display:block; color:var(--ink-soft); font-size:16px; max-width:var(--measure); margin-top:4px}

/* ── exam guides ───────────────────────────────────────────────────────── */
.facts{display:grid; grid-template-columns:minmax(0,14em) minmax(0,1fr); gap:0; margin:0; border-top:1px solid var(--line)}
.facts dt,.facts dd{padding:12px 0; border-bottom:1px solid var(--line); margin:0}
.facts dt{font-weight:700; padding-right:20px}
.sources a{overflow-wrap:anywhere}

/* ── about: the name taken apart ───────────────────────────────────────── */
.name-parts{display:flex; flex-wrap:wrap; margin:36px 0 12px; font-family:var(--f-display); font-weight:700}
.name-parts .part{display:flex; flex-direction:column; align-items:flex-start; margin-right:5px}
.name-parts .bit{font-size:clamp(56px,11vw,112px); letter-spacing:-.04em; line-height:1}
.name-parts .part:nth-child(1) .bit{color:var(--accent)}
.name-parts .part:nth-child(2) .bit{color:var(--gold-ink)}
.name-parts .part:nth-child(3) .bit{color:var(--ink)}
.name-parts .part:nth-child(4) .bit{color:var(--ink-soft)}
.name-parts .who{font-family:var(--f-body); font-weight:600; font-size:15px; color:var(--ink-soft); border-top:2px solid currentColor; padding-top:6px; margin-top:6px; min-height:1.6em; width:100%}
.name-parts .part:nth-child(4) .who{border-top-color:transparent}

.kid{font-size:18px; background:var(--accent-soft); padding:16px 18px; border-radius:12px}

/* ── narrow screens ────────────────────────────────────────────────────── */
@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:40px}
  .book{transform:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .top{gap:12px 18px; padding:14px 16px}
  .top nav{order:3; flex-basis:100%; gap:16px}
  .top .btn-small{margin-left:auto}
  main{padding:24px 16px 0}
  .foot{padding:28px 16px 40px}
  .book{padding-left:calc(var(--sq) * 2.25)}
  .book::before{left:calc(var(--sq) * 1.5)}
  .book .q,.book .her{font-size:24px}
  .facts{grid-template-columns:1fr}
  .facts dt{border-bottom:none; padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}