/* Vocabee — the app's own surface, printed on the web.
   Every colour here is a token out of Vocabee/Design/Theme.swift; every space is a
   multiple of 4; there are three radii (10 / 16 / 28) and no drop shadows. Depth is a
   4px bottom edge in the deep token, and a press drops the face onto it. Labels are ink
   on a coloured face and brand yellow on ink — white text appears nowhere. */

@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}

:root{
  /* ground and paper */
  --cream:#FFF4D6; --paper:#FFFFFF; --sand:#EBDCB8; --sand-deep:#D9C7A0;
  /* the bee */
  --brand:#FFD500; --bee:#FFC21A; --honey:#F0A500;
  /* ink */
  --ink:#2E1B12; --ink-deep:#1A0F0A; --cocoa:#6B4E3D; --latte:#B89A7A;
  /* signals */
  --clover:#45C46A; --clover-deep:#33A354; --clover-tint:#DFF5E5;
  --coral:#FF6B6B; --coral-deep:#D94F4F;
  --sky:#8ED0FF; --cloud:#EAF6FF;

  /* roles, so a theme swap is one block */
  --bg:var(--cream); --face:var(--paper); --edge:var(--sand-deep); --rule:var(--sand);
  --fg:var(--ink); --fg-2:var(--cocoa); --fg-3:var(--latte);
  --accent:var(--honey);

  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:ui-rounded,"SF Pro Rounded","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --r-sm:10px; --r-card:16px; --r-sheet:28px;
  --gut:clamp(16px,4vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body);
  font-size:clamp(16px,15px + .25vw,18px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 16px}

h1,h2,h3{
  margin:0; font-family:var(--display); font-weight:600;
  letter-spacing:-.01em; line-height:1.1; text-wrap:balance;
}

.shell{max-width:1152px; margin:0 auto; padding:0 var(--gut)}
.prose{max-width:34rem}

:focus-visible{outline:3px solid var(--honey); outline-offset:3px; border-radius:4px}


/* ── masthead ───────────────────────────────────────────────────────────── */

.masthead{
  display:flex; align-items:center; gap:24px;
  padding:16px 0; border-bottom:2px solid var(--rule);
}
.masthead .name{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.01em;
}
.masthead .mark{width:30px; height:30px; border-radius:8px; flex:0 0 auto}
.masthead .links{
  margin-left:auto; display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:15px; font-weight:600; color:var(--fg-2);
}
.masthead .links a{padding:4px 0; border-bottom:2px solid transparent}
.masthead .links a:hover{color:var(--fg); border-bottom-color:var(--brand)}


/* ── hero ───────────────────────────────────────────────────────────────── */

.lede-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(32px,5vw,72px); align-items:center;
  max-width:1152px; margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--gut) clamp(32px,5vw,56px);
}
.claim{
  font-size:clamp(36px,24px + 3.4vw,64px); letter-spacing:-.02em;
  line-height:1.04; margin-bottom:16px;
}
.claim .hl{
  /* the honey underline the app uses under a headword */
  background:linear-gradient(to top,var(--brand) 0 28%,transparent 28%);
  padding:0 2px;
}
.sub{font-size:18px; color:var(--fg-2); max-width:36ch; margin-bottom:28px}

.store{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--brand);
  padding:14px 24px; border-radius:var(--r-card);
  box-shadow:0 4px 0 var(--ink-deep);
  font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease;
}
.store:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--ink-deep)}
.store:active{transform:translateY(4px); box-shadow:0 0 0 var(--ink-deep)}
.store span{line-height:1.15; font-size:17px}
.store b{
  display:block; font-family:var(--body); font-weight:600;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.8;
}
.req{margin:16px 0 0; font-size:14px; color:var(--fg-3); font-weight:600}

/* Mel, and the phone she is holding up */
.screens{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  min-height:420px;
}
.ph{width:min(248px,44vw); border-radius:var(--r-sheet)}
.ph-back{transform:translateX(14%) rotate(5deg) scale(.88); opacity:.96}
.ph-front{position:relative; z-index:2; transform:translateX(-10%) rotate(-2deg)}
.mel-hero{
  position:absolute; z-index:3; right:-8px; bottom:-16px;
  width:min(168px,30vw); pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .mel-hero{animation:bob 3.6s ease-in-out infinite}
}

@media (max-width:900px){
  .lede-hero{grid-template-columns:1fr}
  .screens{margin-top:32px; min-height:0}
  .ph{width:min(208px,40vw)}
  .mel-hero{width:min(128px,26vw); right:0; bottom:-8px}
}


/* ── running sections ───────────────────────────────────────────────────── */

section{padding:clamp(40px,6vw,72px) 0; border-top:2px solid var(--rule)}
h2{font-size:clamp(26px,20px + 1.5vw,40px); max-width:22ch; margin-bottom:16px}
.lead{font-size:18px; color:var(--fg-2)}

/* figure rows — a diagram carries each claim, alternating side */
.figrow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.figrow-flip{grid-template-columns:minmax(0,448px) minmax(0,1fr)}
.figrow-flip .figbox{order:-1}
.figtext h2{margin-bottom:16px}
.figtext .lead{max-width:40ch}
.figtext .lead:last-child{margin-bottom:0}

figure.figbox{
  margin:0; color:var(--fg);
  background:var(--face); border:2px solid var(--rule);
  border-radius:var(--r-card); box-shadow:0 4px 0 var(--edge);
  padding:24px;
}
.figbox-tight{max-width:288px}
.fig{width:100%; height:auto; overflow:visible}
.fig text{font-family:var(--display); font-weight:500}
.fig-field{color:var(--fg)}
.fig-curve{color:var(--fg-2)}
.fig-chain{color:var(--fg)}
figcaption{
  margin-top:16px; font-size:14px; font-weight:600; color:var(--fg-3);
  max-width:36ch; line-height:1.5;
}

/* the mechanism — three numbered beats */
.mech{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  margin-top:32px;
}
.mech > div{
  background:var(--face); border:2px solid var(--rule);
  border-radius:var(--r-card); box-shadow:0 4px 0 var(--edge);
  padding:24px;
}
.mech .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-bottom:12px;
  background:var(--brand); color:var(--ink);
  border-radius:var(--r-sm);
  font-family:var(--display); font-weight:600; font-size:16px;
  font-variant-numeric:tabular-nums;
}
.mech h3{font-size:20px; margin-bottom:8px}
.mech p{color:var(--fg-2); font-size:16px; margin:0; max-width:36ch}

/* evidence — phone beside the claim */
.evidence{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(32px,6vw,80px); align-items:center;
}
.evidence .phone{width:min(240px,58vw); border-radius:var(--r-sheet)}
@media (max-width:760px){
  .evidence{grid-template-columns:1fr}
  .evidence .phone{margin-top:32px}
}


/* ── the specimen — one day, as a card ──────────────────────────────────── */

.spread{
  display:grid; grid-template-columns:minmax(0,1fr) 224px;
  gap:clamp(32px,5vw,72px); align-items:start;
}
.headword-sm{
  font-size:clamp(32px,24px + 3vw,52px); letter-spacing:-.02em; margin-top:24px;
}
.rule-sm{border:0; height:4px; background:var(--brand); border-radius:2px; margin:12px 0 16px; width:64px}
.gram{font-size:16px; color:var(--fg-2); margin-bottom:20px; font-weight:600}
.gram i{font-style:normal; color:var(--fg-3)}
.sense{
  font-family:var(--display); font-weight:500;
  font-size:clamp(20px,18px + 1.1vw,28px); line-height:1.3;
  max-width:28ch; margin-bottom:20px;
}
.root{
  max-width:40ch; color:var(--fg-2); font-size:16px;
  background:var(--clover-tint); border-radius:var(--r-card);
  padding:16px 20px; margin-bottom:28px;
}
.root b{font-weight:700; color:var(--clover-deep)}
.pitch{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.pitch .say{font-size:17px; max-width:32ch; margin:0}
.go{
  display:inline-block; font-weight:700; color:var(--ink);
  background:var(--brand); border-radius:var(--r-card);
  padding:12px 20px; box-shadow:0 4px 0 var(--honey);
  transition:transform .12s ease, box-shadow .12s ease;
}
.go:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--honey)}
.go:active{transform:translateY(4px); box-shadow:0 0 0 var(--honey)}

/* the margin word list */
.column{
  border-left:4px solid var(--rule); padding-left:20px;
  font-size:16px; line-height:1.8; color:var(--fg-3);
}
.column .lbl{
  display:block; font-family:var(--display); font-weight:600; font-size:14px;
  color:var(--fg-2); margin-bottom:8px;
}
.column ul{margin:0; padding:0}
.column li{list-style:none}
.column .here{color:var(--fg); font-weight:700; position:relative}
.column .here::after{
  content:""; position:absolute; left:-26px; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--honey);
}
@media (max-width:880px){
  .spread{grid-template-columns:1fr}
  .column{border-left:0; border-top:4px solid var(--rule); padding:20px 0 0; columns:2; column-gap:32px}
  .column .here::after{display:none}
  .column .here{color:var(--honey)}
}


/* ── entry (poster-scale headword, used on the specimen page) ───────────── */

.entry{padding:clamp(40px,8vw,96px) 0 clamp(32px,6vw,56px)}
.headword{
  font-family:var(--display); font-weight:600;
  font-size:clamp(52px,24px + 12vw,144px); line-height:.92; letter-spacing:-.03em;
}
.headword .soft{color:var(--fg-3)}
.entry hr{border:0; height:4px; background:var(--brand); border-radius:2px; margin:clamp(16px,3vw,28px) 0 16px}

@media (prefers-reduced-motion:no-preference){
  .claim,.sub,.store,.req{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
  .claim{animation-delay:.04s} .sub{animation-delay:.14s}
  .store{animation-delay:.24s} .req{animation-delay:.32s}
  .screens{animation:rise .7s cubic-bezier(.2,.7,.2,1) .18s backwards}
}


/* ── questions ──────────────────────────────────────────────────────────── */

.q{
  background:var(--face); border:2px solid var(--rule);
  border-radius:var(--r-card); box-shadow:0 4px 0 var(--edge);
  padding:4px 20px; margin-bottom:12px;
}
.q summary{
  cursor:pointer; list-style:none; min-height:44px;
  display:flex; gap:16px; align-items:center;
  font-family:var(--display); font-weight:600; font-size:17px;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:""; margin-left:auto; width:10px; height:10px; flex:0 0 auto;
  border-right:3px solid var(--honey); border-bottom:3px solid var(--honey);
  border-radius:2px;
  transform:rotate(45deg) translateY(-3px); transition:transform .2s ease;
}
.q[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.q p{margin:0 0 16px; color:var(--fg-2); max-width:60ch; font-size:16px}


/* ── folio and colophon ─────────────────────────────────────────────────── */

.folio{
  display:flex; gap:16px; align-items:center; padding:20px 0 0;
  color:var(--fg-3); font-size:14px; font-weight:600;
}
.folio .fill{flex:1; height:2px; background:var(--rule); border-radius:1px}

.colophon{
  border-top:2px solid var(--rule); padding:32px 0 48px;
  color:var(--fg-3); font-size:15px;
}
.colophon a{color:var(--fg-2); font-weight:600; border-bottom:2px solid var(--rule)}
.colophon a:hover{color:var(--fg); border-bottom-color:var(--brand)}
.colophon p{margin:0 0 8px}


/* ── legal documents ────────────────────────────────────────────────────────
   The measure holds the text; the outer column carries the index, the way the
   app's word list sits beside the entry. */

.doc{
  display:grid; align-items:start; justify-content:space-between;
  grid-template-columns:minmax(0,608px) minmax(176px,224px);
  gap:clamp(32px,5vw,72px);
  padding:clamp(40px,6vw,64px) 0 72px;
}
.doc-body{grid-area:1/1; min-width:0; max-width:608px; margin-inline:auto}

.doc h1{font-size:clamp(30px,24px + 1.5vw,42px); margin-bottom:8px}
.doc .meta{color:var(--fg-3); font-size:15px; font-weight:600; margin:0}
.doc h1 + .meta{padding-bottom:20px; margin-bottom:32px; border-bottom:2px solid var(--rule)}
.doc .lede{font-size:18px; color:var(--fg); margin-bottom:28px}

.doc h2{
  display:flex; gap:12px; align-items:baseline; max-width:none;
  font-size:22px; line-height:1.3; margin:48px 0 12px; scroll-margin-top:28px;
}
.doc h2:first-child{margin-top:0}
.doc h2 .num{
  flex:0 0 auto; min-width:24px; color:var(--honey);
  font-variant-numeric:tabular-nums;
}
.doc p,.doc li{color:var(--fg-2)}
.doc .clause{padding-left:48px; text-indent:-48px}
.doc .clause .cnum{
  display:inline-block; width:48px; font-size:inherit; line-height:1;
  text-indent:0; margin:0; color:var(--fg-3); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.doc ul{margin:0 0 16px; padding-left:20px}
.doc li{margin:4px 0}
.doc li::marker{color:var(--honey)}
.doc a{color:var(--cocoa); font-weight:600; border-bottom:2px solid var(--rule); word-break:break-word}
.doc a:hover{color:var(--fg); border-bottom-color:var(--brand)}
.doc .inshort{
  background:var(--clover-tint); border-radius:var(--r-card);
  padding:16px 20px; color:var(--fg); margin:16px 0 20px; font-weight:600;
}
.doc dt{font-family:var(--display); font-weight:600; color:var(--fg); margin-top:24px}
.doc dd{margin:4px 0 0; color:var(--fg-2)}
.doc hr.rule{border:0; height:2px; background:var(--rule); border-radius:1px; margin:40px 0}

.doc .toc{margin:8px 0 24px; padding-left:20px; color:var(--fg-2); font-size:16px; line-height:1.7}
.doc .toc li{margin:2px 0}
.doc .toc a{color:inherit; border:0; font-weight:600}
.doc .toc a:hover{color:var(--honey)}

/* the margin index */
.rail{
  grid-area:1/2; position:sticky; top:28px; max-height:calc(100vh - 56px);
  overflow:auto; overscroll-behavior:contain;
  border-left:4px solid var(--rule); padding-left:20px;
  font-size:14px; line-height:1.45; color:var(--fg-3);
}
.rail p{
  font-family:var(--display); font-weight:600; color:var(--fg-2);
  margin:0 0 8px; font-size:14px;
}
.rail ul,.rail ol{list-style:none; margin:0; padding:0}
.rail ol{margin-bottom:24px}
.rail li{position:relative; margin:6px 0}
.rail a{display:block; color:var(--fg-2); border:0; font-weight:600; transition:color .15s ease}
.rail a:hover{color:var(--honey)}
.rail .here > a{color:var(--fg)}
.rail .here::after{
  content:""; position:absolute; left:-26px; top:.5em;
  width:8px; height:8px; border-radius:50%; background:var(--honey);
}
.rail-toc-num a{display:grid; grid-template-columns:28px minmax(0,1fr)}
.rail-toc .n{color:var(--fg-3); text-align:right; padding-right:8px; font-variant-numeric:tabular-nums}
.rail .here .n{color:var(--honey)}

@media (min-width:1001px){ .has-rail .toc, .has-rail .toc-head{display:none} }
@media (max-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr); padding-bottom:56px}
  .rail{display:none}
}
@media (max-width:560px){
  .doc .clause{padding-left:36px; text-indent:-36px}
  .doc .clause .cnum{width:36px}
}


/* ── the ink theme ──────────────────────────────────────────────────────────
   The bee on a night sky. Text is cream, never white; the accent stays honey. */

@media (prefers-color-scheme:dark){
  :root{
    --bg:#1A0F0A; --face:#2A1A12; --edge:#120A06; --rule:#3E2A1E;
    --fg:#FFF4D6; --fg-2:#D9C7A0; --fg-3:#B89A7A;
    --clover-tint:#1C3325;
  }
  .store{background:var(--brand); color:var(--ink); box-shadow:0 4px 0 var(--honey)}
  .store:hover{box-shadow:0 6px 0 var(--honey)}
  .store:active{box-shadow:0 0 0 var(--honey)}
  .root{color:var(--fg-2)}
  .root b{color:var(--clover)}
  .doc a{color:var(--brand)}
  .doc .inshort{color:var(--fg)}
}


/* ── print — the legal pages get filed ──────────────────────────────────── */

@media print{
  body:has(main.doc){background:#fff; color:#000; font-size:10.5pt; line-height:1.5}
  body:has(main.doc) .masthead, .rail, body:has(main.doc) .colophon{display:none !important}
  body:has(main.doc) .shell{max-width:none; padding:0}
  .doc{display:block; padding:0}
  .doc-body{margin:0; max-width:none}
  .doc p, .doc li, .doc .meta, .doc dd{color:#000}
  .doc h2{break-after:avoid; margin-top:24px}
  .doc h2 .num, .doc li::marker{color:#000}
  .doc .inshort{background:none; border-left:2px solid #000; border-radius:0; padding:4px 0 4px 12px; color:#000}
  .doc a{color:#000; border:0}
  .doc-body a[href^="http"]::after{content:" <" attr(href) ">"; font-size:8.5pt; word-break:break-all}
  .doc p, .doc li{orphans:3; widows:3}
  .doc .toc{color:#000}
  .doc hr.rule{background:#000}
}