/* Oakley — the marketing site.
 *
 * Built from the Claude Design project (2c4bf633), which is the source of
 * record. The artboards there are five pages at two fixed widths each, inline
 * styled by construction; this is the same design as one responsive page per
 * route, because the app itself reflows at 320px and a marketing site that
 * behaved differently would be the odd one out.
 *
 * The artboards carry five design-exploration props — motion, heroWash,
 * washStrength, ctaTone, accentRule. The spec says to compile them away to
 * their defaults rather than ship a runtime theme switcher, so they are baked:
 * Subtle motion, diagonal wash at 40%, the accent rule on. `--cta-deep` stays
 * #4f5940, which the spec names as "the shipping button fill" and which is the
 * same value app/src/styles/tokens.css uses — the site and the product must
 * not drift.
 */

:root {
  --ground:#fbf7f0; --surface:#ffffff; --sunk:#f7f3ea; --warm:#f7efe1;
  --border:#e6dcc8; --border-strong:#cfc4ab; --border-input:#a8967a;
  --ink:#2a2318; --ink-muted:#5c5446; --ink-faint:#6d6353;
  --cta:#68735a; --cta-deep:#4f5940; --accent-text:#4f5940; --selected:#3a3226;

  /* The four-hue spine, in order. DECORATIVE FILLS ONLY — none clears 4.5:1
     for white text, so text and strokes use the darkened siblings. */
  --accent-1:#68735a; --accent-2:#9aa681; --accent-3:#c99a58; --accent-4:#b4735a;
  --accent-1-ink:#4f5940; --accent-3-ink:#8a6224; --accent-4-ink:#96513a;

  /* Verdicts. These do NOT follow the CTA tone: a status colour that changes
     with a theme control is a bug. */
  --secure:#68735a; --partial:#b8873f; --struggling:#a2543a;

  --hero-bg:linear-gradient(135deg,rgba(154,166,129,.456) 0%,rgba(217,198,164,.4) 38%,rgba(201,154,88,.372) 68%,rgba(180,115,90,.4) 100%);
  --anim:running; --bob:5px; --blob:.42;

  --font-ui:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  /* The wordmark only — Outfit is a display face, never body text. */
  --font-mark:"Outfit",var(--font-ui);
  --font-sheet:"Atkinson Hyperlegible","Noto Sans Hebrew",Verdana,"Segoe UI",system-ui,sans-serif;
  --pad:56px;

  /* The nav's bottom edge, in two parts. The phone drawer hangs below both, so
     they are named rather than repeated — a hard-coded copy would drift the day
     either changes. */
  --nav-border:1px;
  --rule-h:4px;
}

*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
h1 { font-size:clamp(32px,4.4vw,46px); line-height:1.08; letter-spacing:-.035em; max-width:18em; }
h2 { font-size:clamp(25px,2.8vw,30px); line-height:1.15; letter-spacing:-.030em; }
h3 { font-size:16px; letter-spacing:-.02em; }
p { margin:0; }
ul { margin:0; padding-inline-start:20px; }
li { margin-bottom:9px; }
li::marker { color:var(--accent-2); }
a { color:var(--accent-text); text-underline-offset:3px; }
a:hover { color:var(--ink); }
/* height:auto matters as much as the max-width: the width/height attributes are
   on every image so the browser reserves the box before the file lands, and
   without this the height attribute wins and the picture stretches. */
img { max-width:100%; height:auto; }
:focus-visible { outline:3px solid var(--cta); outline-offset:2px; border-radius:4px; }

.skip {
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--surface); padding:12px 18px; border-radius:0 0 9px 0;
}
.skip:focus { left:0; }

/* ------------------------------------------------------------- motion --- */
/* Every loop is decorative; nothing here carries information, which is what
   makes it safe to pause entirely. */
@keyframes oak-sweep { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }
@keyframes oak-drift { 0% { background-position:50% 0%; } 100% { background-position:50% 200%; } }
@keyframes oak-bob { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,calc(-1 * var(--bob)),0); } }
@keyframes oak-blob-a { 0%,100% { transform:translate3d(0,0,0) scale(1); } 33% { transform:translate3d(40px,-26px,0) scale(1.08); } 66% { transform:translate3d(-22px,18px,0) scale(.95); } }
@keyframes oak-blob-b { 0%,100% { transform:translate3d(0,0,0) scale(1); } 40% { transform:translate3d(-34px,22px,0) scale(1.1); } 75% { transform:translate3d(26px,-16px,0) scale(.94); } }
@keyframes oak-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(104,115,90,.35); } 55% { transform:scale(1.05); box-shadow:0 0 0 9px rgba(104,115,90,0); } }
@keyframes oak-reveal { from { opacity:0; transform:translate3d(0,18px,0); } to { opacity:1; transform:none; } }

/* Reveal is CSS-driven, so nothing can be left hidden by a script that did not
   run. A browser without scroll-driven timelines simply shows everything. */
@supports (animation-timeline: view()) {
  [data-reveal] { animation:oak-reveal linear both; animation-timeline:view(); animation-range:entry 0% cover 24%; }
}
@media print {
  [data-reveal] { animation:none !important; opacity:1 !important; transform:none !important; }
  .spine, .blob { display:none !important; }
  .nav__burger, .nav__scrim { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  :root { --anim:paused; --bob:0px; }
  [data-reveal] { animation:none !important; opacity:1 !important; transform:none !important; }
  /* The drawer still opens and closes — only the slide is dropped. */
  .nav__links { transition:none !important; transform:none !important; }
}

.bob { display:inline-flex; flex:none; animation:oak-bob 6.2s ease-in-out infinite; animation-play-state:var(--anim); }
.bob--1 { animation-delay:.8s; } .bob--2 { animation-delay:1.6s; } .bob--3 { animation-delay:2.4s; }

/* --------------------------------------------------------------- page --- */
/* overflow-x hidden so the blobs cannot push a horizontal scrollbar. */
.page { position:relative; overflow-x:hidden; }
.spine {
  position:absolute; left:0; top:0; bottom:0; width:5px; z-index:3;
  background:linear-gradient(180deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-4),var(--accent-1));
  background-size:100% 50%;
  animation:oak-drift 34s linear infinite; animation-play-state:var(--anim);
}
.wrap { max-width:1200px; margin:0 auto; padding-inline:var(--pad); }

/* ---------------------------------------------------------------- nav --- */
.nav { position:relative; z-index:2; background:var(--surface); border-bottom:var(--nav-border) solid var(--border); }
.nav__in { max-width:1200px; margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
/* SET IN TYPE, NOT DRAWN — placeholder until the real mark arrives. The old
   PNG read "Oakley", so it could not be relabelled, only replaced. Sized to
   sit where the 132px image sat so the nav rule and spine do not move. */
/* ── the business mark ────────────────────────────────────────────────────
   Set in live type, not drawn. "the learning loop", with the two o's driven
   into each other by -0.299em — the loop the name is about. The overlap is
   measured against Outfit's metrics and is the same at every size; the
   tracking around it opens as the mark shrinks. design/marks/README.md in the
   repo carries the table and the SVG cuts for the places HTML cannot reach.

   --mark-ink is the height the LETTERS fill, not the font size: 0.93em of
   every em is ink, from the top of the "l" to the foot of the "p". A 19px
   slot therefore wants a 20.43px font, and setting the slot height as the
   font size draws the mark a twelfth too small. */
.mark { font-family:var(--font-mark); font-size:calc(var(--mark-ink,19px) / 0.93);
        font-weight:var(--mark-weight,500); line-height:1;
        letter-spacing:var(--mark-track,-0.022em);
        color:var(--ink); white-space:nowrap; display:inline-block; }
/* The span holds the FIRST o of the pair: letter-spacing adds its value AFTER
   each character, so this closes the gap between the two o's and only that. */
.mark__loop { letter-spacing:-0.299em; }

.nav__mark { flex:none; align-self:flex-start; text-decoration:none;
             --mark-ink:18.02px; --mark-track:-0.022em; }
.foot__mark { --mark-ink:17px; --mark-track:-0.020em; }
.nav__links { display:flex; gap:26px; flex-wrap:wrap; font-size:14px; font-weight:600; }
/* 44px at every width, not only on the phone: the spec says every link and
   control, and a mouse target that small is a poor one too. The text size does
   not change — only the box it sits in. */
.nav__links a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink-muted); text-decoration:none; }
.nav__links a:hover { color:var(--ink); }
.nav__links a[aria-current="page"] { color:var(--ink); font-weight:700; }
.rule {
  position:relative; z-index:2; height:var(--rule-h);
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-4),var(--accent-1));
  background-size:200% 100%;
  animation:oak-sweep 18s linear infinite; animation-play-state:var(--anim);
}

/* --------------------------------------------------- the phone drawer --- */
/* The hamburger is drawn on all five phone artboards — 44px box, a 22px glyph
   on a 24 viewBox, 2px round-capped strokes at y=7/12/17. The OPEN state is
   drawn nowhere, so the panel below is assembled from parts the site already
   owns: the footer's stacked 44px links, hung from the accent rule that is the
   nav's own bottom edge.
 *
 * Everything here is gated on [data-nav="drawer"], which only nav.js sets. That
 * gate is the whole safety story. Without the script the button stays hidden
 * and the links stay in the bar and wrap, exactly as they did before the drawer
 * existed — a nav folded behind a button that cannot open would be far worse
 * than a nav that merely wraps. It is the same reasoning that keeps the reveal
 * in CSS. */
.nav__burger, .nav__scrim { display:none; }

/* --------------------------------------------------------------- hero --- */
.hero { position:relative; background:var(--hero-bg); overflow:hidden; }
.hero__in { position:relative; z-index:1; padding-block:60px 48px; display:flex; flex-direction:column; gap:18px; }
.hero--split .hero__in { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:48px; align-items:stretch; }
.hero--portrait .hero__in { display:grid; grid-template-columns:340px minmax(0,1fr); gap:52px; align-items:start; padding-block:64px 56px; }
.blob {
  position:absolute; border-radius:50%; opacity:var(--blob); pointer-events:none;
  animation-play-state:var(--anim); animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
.blob--a { left:-90px; top:-120px; width:460px; height:460px; filter:blur(14px);
  background:radial-gradient(circle at 40% 40%, rgba(154,166,129,.5), rgba(154,166,129,0) 68%);
  animation-name:oak-blob-a; animation-duration:26s; }
.blob--b { right:-120px; top:40px; width:520px; height:520px; filter:blur(16px);
  background:radial-gradient(circle at 55% 45%, rgba(201,154,88,.44), rgba(201,154,88,0) 68%);
  animation-name:oak-blob-b; animation-duration:32s; }
.blob--c { right:180px; bottom:-160px; width:420px; height:420px; filter:blur(18px);
  background:radial-gradient(circle at 50% 50%, rgba(180,115,90,.38), rgba(180,115,90,0) 70%);
  animation-name:oak-blob-a; animation-duration:38s; animation-direction:reverse; }

.eyebrow { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.lede { font-size:18px; line-height:1.6; color:var(--ink-muted); max-width:38em; }
.stack { display:flex; flex-direction:column; gap:22px; }
.stack--tight { gap:18px; }

.hero__art {
  flex:1 1 auto; min-height:300px; border-radius:6px; overflow:hidden;
  box-shadow:0 24px 60px rgba(58,46,28,.18);
  animation:oak-bob 7.5s ease-in-out infinite; animation-play-state:var(--anim); will-change:transform;
}
.hero__art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 45%; }

.portrait { margin:0; display:flex; flex-direction:column; gap:14px; }
.portrait__frame {
  aspect-ratio:4/5; border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(58,46,28,.2);
  animation:oak-bob 8.5s ease-in-out infinite; animation-play-state:var(--anim);
}
.portrait__frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.portrait figcaption { display:flex; flex-direction:column; gap:3px; }
.portrait strong { font-size:17px; }
.portrait span { font-size:14px; color:var(--ink-faint); }

/* ------------------------------------------------------------ sections --- */
.section { position:relative; z-index:2; padding-block:52px 56px; }
.section--sunk { background:var(--sunk); border-block:1px solid var(--border); }
.section--warm { background:var(--warm); border-block:1px solid var(--border); }
.section--tight { padding-block:40px 44px; }

.grid { display:grid; gap:26px; }
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 40px; }
/* Copy beside the day screenshot. The image column is the wider of the two on
   purpose: it is a picture of a dense screen, and shrunk into half a column its
   text stops being readable and it becomes decoration. */
.grid--day { grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:26px 48px; align-items:start; }

/* A screenshot of the product. Bordered and shadowed so it reads as a window
   onto the app rather than as artwork, and captioned because it is a real
   screen showing invented children. */
.shot { margin:0; display:flex; flex-direction:column; gap:10px; }
.shot img {
  display:block; width:100%; height:auto;
  border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:0 24px 60px rgba(58,46,28,.16);
}
.shot figcaption { font-size:13px; line-height:1.5; color:var(--ink-faint); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px; }
.card--strong { border-color:var(--border-strong); box-shadow:0 24px 60px rgba(58,46,28,.14); }
.card--warm { background:var(--warm); border-radius:12px; padding:26px 30px; }
.card--sunk { background:var(--sunk); border-radius:12px; padding:26px 30px; }
.card p { color:var(--ink-muted); }
.note { background:var(--sunk); border:1px solid var(--border); border-radius:9px; padding:13px 15px; font-size:14px; line-height:1.55; color:var(--ink-muted); }

/* An icon beside a claim. The spec's construction: an accent shape at low
   opacity, strokes in the darkened sibling, one small solid shape. */
.iconrow { display:flex; gap:16px; align-items:flex-start; }
.iconrow h3 { margin-bottom:6px; }
.iconrow p { font-size:14.5px; line-height:1.6; color:var(--ink-muted); }

.rows { display:flex; flex-direction:column; gap:16px; }
.tickrow { display:flex; gap:13px; align-items:flex-start; }
.tickrow h3 { font-size:15.5px; margin-bottom:5px; }
.tickrow p { font-size:14.5px; line-height:1.6; color:var(--ink-muted); }
.col-head { border-bottom:2px solid var(--secure); padding-bottom:10px; font-size:26px; letter-spacing:-.026em; }
.col-head--warn { border-bottom-color:var(--struggling); }

.proof { border-top:2px solid var(--accent-1); padding-top:14px; display:flex; flex-direction:column; gap:6px; }
.proof--2 { border-top-color:var(--accent-3); }
.proof--3 { border-top-color:var(--accent-4); }
.proof h3 { font-size:15.5px; }
.proof p { font-size:14.5px; line-height:1.6; color:var(--ink-muted); }

.pill {
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--ink-muted); padding:4px 11px 4px 9px; border-radius:999px;
  background:var(--sunk); border:1px solid var(--border);
}
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--secure); }
.pill--partial .dot { background:var(--partial); }

/* The three-step strip. Numbered circles breathe; the number is the content. */
.steps { display:flex; align-items:stretch; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(58,46,28,.05); }
.steps__cell { flex:1 1 0; display:flex; align-items:center; gap:16px; padding:22px 26px; }
.steps__div { flex:none; width:1px; background:var(--border); }
.steps__n {
  flex:none; width:44px; height:44px; border-radius:50%; color:#fff;
  font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center;
  background:var(--accent-1);
  animation:oak-pulse 4.8s ease-in-out infinite; animation-play-state:var(--anim);
}
.steps__cell:nth-child(3) .steps__n { background:var(--accent-4); animation-delay:.55s; }
.steps__cell:nth-child(5) .steps__n { background:var(--cta-deep); animation-delay:1.1s; }
.steps h3 { font-size:17px; }
.steps p { font-size:14px; color:var(--ink-muted); margin-top:3px; }

/* -------------------------------------------------------------- button --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:13px 22px; border-radius:9px;
  background:var(--cta-deep); color:#fff; font-size:14.5px; font-weight:700;
  letter-spacing:-.01em; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover { color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(79,89,64,.32); }
.cta-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cta-note { font-size:13px; color:var(--ink-faint); }
.split-cta { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }

/* ---------------------------------------------------------- demo axes --- */
/* The controls. The sheet itself is further down under "the demo" — it is
   drawn in the PRINT engine's palette rather than the app's, because the sheet
   is not the app and showing it in the app's sage would be the one place this
   site told a small lie.

   There used to be a hand-built static sheet here as well, for See it work.
   The live demo runs on both pages now, so it and its styles are gone: a page
   called "See it work" whose controls did nothing was the worst thing on this
   site. */
.axis { display:flex; flex-direction:column; gap:9px; }
.axis__label { font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-faint); }
.axis__note { font-size:12px; line-height:1.5; color:var(--ink-faint); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px;
  min-height:38px; display:inline-flex; align-items:center;
  background:var(--surface); border:1px solid var(--border-input); color:var(--ink);
  transition:transform .15s ease, background .15s ease;
}
.chip:hover { transform:translateY(-2px); }
.chip[aria-pressed="true"] { background:var(--selected); border-color:var(--selected); color:#fff; }

/* -------------------------------------------------------------- footer --- */
.foot { position:relative; z-index:2; background:var(--surface); border-top:1px solid var(--border); padding:32px var(--pad) 40px; }
.foot__in { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.foot__brand { display:flex; flex-direction:column; gap:8px; }
.foot__brand img { width:107px; flex:none; align-self:flex-start; }
.foot__brand .foot__mark { align-self:flex-start; }
.foot__brand p { font-size:13px; color:var(--ink-faint); }
.foot__cols { display:flex; gap:44px; font-size:13.5px; }
/* No column gap between adjacent links, and 44px rows. They were 22px tall
   with a 12px gap — a 34px pitch across five adjacent links, which fails as a
   thumb target. The separation is padding inside each link, never space
   between them. */
.foot__col { display:flex; flex-direction:column; }
.foot__col a { display:flex; align-items:center; min-height:44px; color:var(--ink-muted); text-decoration:none; }
.foot__col a:hover { color:var(--ink); }

/* --------------------------------------------------------- the phone --- */
/* One breakpoint. What changes is arrangement, not content. Nothing sniffs the
   device — user agents lie, and two versions drift apart. */
@media (max-width:860px) {
  :root { --pad:20px; --rule-h:3px; }
  body { font-size:14.5px; }
  .section { padding-block:30px 34px; }
  .hero__in, .hero--split .hero__in, .hero--portrait .hero__in { grid-template-columns:1fr; gap:26px; padding-block:34px 32px; }
  .grid--2, .grid--3, .grid--split, .grid--day { grid-template-columns:1fr; }
  .nav__in { gap:14px; padding-block:14px; }
  /* 15px of ink rather than a 119px-wide image box: the mark is text now, and
     a width on text either clips it or does nothing. */
  .nav__mark { --mark-ink:15px; --mark-track:-0.014em; }
  .nav__links { gap:14px; font-size:13.5px; }

  /* Bar: wordmark left, hamburger hard right, as the artboards draw it.
     It rides above the scrim as one piece — background included — so the
     close button is never dimmed by, or behind, the thing it dismisses. It is
     positioned whether or not the drawer is open, which also makes it the
     panel's offset parent in both states: nothing shifts on opening. */
  .nav[data-nav="drawer"] .nav__in {
    flex-wrap:nowrap; justify-content:space-between; gap:12px;
    position:relative; z-index:4; background:var(--surface);
  }
  /* The -10px pulls the 44px hit box outward so the GLYPH, not its padding,
     lines up with the 20px gutter — which is what the artboards draw. */
  .nav[data-nav="drawer"] .nav__burger {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; margin-inline-end:-10px;
    padding:0; border:0; background:none; color:var(--ink); cursor:pointer;
  }
  .nav__burger svg { display:block; }
  .nav__burger .nav__x, .nav[data-open="1"] .nav__burger .nav__bars { display:none; }
  .nav[data-open="1"] .nav__burger .nav__x { display:block; }

  /* Hung from the rule, not over it: the offset is the bar row, plus the nav's
     bottom border, plus the rule — so the four accents stay visible as the edge
     the panel drops from instead of being covered by it. Every term is a
     variable because a hard-coded one would drift the day any of them changes. */
  .nav[data-nav="drawer"] .nav__links {
    position:absolute; top:calc(100% + var(--nav-border) + var(--rule-h)); inset-inline:0; z-index:4;
    flex-direction:column; flex-wrap:nowrap; gap:0;
    padding:6px var(--pad) 12px;
    font-size:15px;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:0 18px 40px rgba(58,46,28,.16);
    /* visibility, not display: it still removes the links from the tab order,
       but leaves the panel something to transition. */
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .2s cubic-bezier(.2,.7,.3,1),
               transform .2s cubic-bezier(.2,.7,.3,1),
               visibility 0s linear .2s;
  }
  .nav[data-nav="drawer"][data-open="1"] .nav__links {
    visibility:visible; opacity:1; transform:none; transition-delay:0s;
  }
  .nav[data-nav="drawer"] .nav__links a {
    min-height:48px; border-bottom:1px solid var(--border);
  }
  .nav[data-nav="drawer"] .nav__links a:last-child { border-bottom:0; }

  .nav[data-nav="drawer"][data-open="1"] .nav__scrim {
    display:block; position:fixed; inset:0; z-index:3;
    background:rgba(42,35,24,.34);
  }
  .btn { width:100%; min-height:48px; }
  .cta-row .btn, .split-cta .btn { width:100%; }
  .steps { flex-direction:column; }
  .steps__div { width:auto; height:1px; }
  .foot__cols { gap:0; flex-direction:column; }
  .lede { font-size:15.5px; }
  h1 { max-width:none; }
}

/* ---------------------------------------------------------- the demo --- */
/* A real page at real size, scaled down — never a small page with big type.
   Every var here is set from site.js so the sheet and the frame stay in step. */
.demo__axes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.demo__preview { display:flex; flex-direction:column; gap:10px; }
.demo__frame { position:relative; width:100%; height:var(--page-frame-h,569px); }
.demo__pages {
  position:absolute; top:0; left:0; width:var(--page-w,816px);
  transform:scale(var(--page-scale,.539)); transform-origin:top left;
  display:flex; flex-direction:column; gap:var(--page-sep,16px);
}
.demo__summary { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-faint); }
.demo__summary strong { color:var(--ink-muted); }
.demo__dot { width:9px; height:9px; border-radius:50%; background:var(--accent-1); flex:none; }

.pg {
  position:relative; width:var(--page-w,816px); height:var(--page-h,1056px);
  background-color:var(--sheet-paper,#fff); border:1px solid var(--border-strong);
  box-shadow:0 18px 44px rgba(58,46,28,.18); padding:var(--sheet-pad,60px);
  display:flex; flex-direction:column;
  font-family:var(--sheet-font); font-size:var(--sheet-size,14.67px);
  line-height:var(--sheet-leading,1.5); letter-spacing:var(--sheet-track,.005em);
  word-spacing:var(--sheet-word,.02em); color:var(--sheet-ink,#1e1b2e);
}
.pg__head { display:flex; justify-content:space-between; align-items:flex-end; gap:1em;
  border-bottom:2px solid var(--sheet-rule-firm,#8a7ea6); padding-bottom:.5em; margin-bottom:var(--sheet-block,1.05em); }
.pg__h1 { font-size:1.55em; font-weight:700; line-height:1.2; }
.pg__sub { font-size:.82em; color:var(--sheet-ink-soft,#565073); margin-top:.12em; }
.pg__name { flex:none; font-size:.82em; color:var(--sheet-ink-soft,#565073); text-align:right; }
.pg__instruction { background:var(--sheet-accent-soft,#ffe9f8); border-left:4px solid var(--sheet-accent,#a8117e);
  border-radius:3px; padding:.7em .9em; max-width:var(--sheet-measure,68ch); margin-bottom:var(--sheet-block,1.05em); }
.pg__grid { display:grid; grid-template-columns:repeat(var(--sheet-cols,3),minmax(0,1fr));
  gap:var(--sheet-gap,1.35em); align-content:start; }
.pg__row { display:flex; gap:.55em; align-items:baseline; }

/* A written answer. The question runs the full measure and the ruled lines sit
   under it, together exactly as tall as the answer box would have been — so the
   answer-space setting moves this sheet as visibly as it moves a maths one. */
.pg__row--write { flex-direction:column; align-items:stretch; gap:.45em; }
.pg__q { display:flex; gap:.55em; align-items:baseline; max-width:var(--sheet-measure,68ch); }
.pg__lines { display:flex; flex-direction:column; }
.pg__lines span {
  display:block; height:calc(var(--sheet-answer-h,2.4em) / 2);
  border-bottom:1px solid var(--sheet-rule,#d9cfe6);
}

/* The sheet picker — which sheet, as opposed to how it is laid out. It spans
   both control columns and is ruled off from the settings below it. */
.demo__pick {
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:18px 28px;
  padding-bottom:16px; margin-bottom:2px; border-bottom:1px solid var(--border);
}
.demo__pick .axis { flex:1 1 auto; }
/* Shown where the subject has a single sample. Sized like a chip's text so the
   row keeps its rhythm, but plainly not a control. */
.demo__grade { font-size:13px; font-weight:700; color:var(--ink); min-height:38px; display:flex; align-items:center; }
.pg__n { flex:none; font-weight:700; min-width:1.9em; color:var(--sheet-ink-soft,#565073); }
.pg__sum { flex:none; white-space:nowrap; }
.pg__box { flex:1 1 var(--sheet-answer-w,6.5em); min-width:2.2em; max-width:var(--sheet-answer-w,6.5em);
  height:var(--sheet-answer-h,2.4em); border:1px solid var(--sheet-rule-firm,#8a7ea6);
  border-radius:3px; transform:translateY(.35em); }
.pg__foot { margin-top:auto; padding-top:.6em; border-top:1px solid var(--sheet-rule,#d9cfe6);
  font-size:.72em; color:var(--sheet-ink-soft,#565073); line-height:1.45; }
.pg__label { position:absolute; right:var(--sheet-pad,60px); bottom:calc(var(--sheet-pad,60px) / 3);
  font-size:.68em; color:var(--sheet-ink-soft,#565073); }

@media (max-width:860px) {
  #demo { grid-template-columns:1fr !important; gap:24px !important; }
  .demo__axes { grid-template-columns:1fr; }
}