/* Get Better Answers: page styles on top of the scrollcraft floor.
   Grammar: Marked script. Paper sheets, navy ink, one red pen.
   The engine's own selectors are left alone; everything here is page markup. */

:root {
  --sc-canvas:     #F3F1EC;   /* paper */
  --sc-surface:    #FCFBF8;   /* a sheet lifted off the pile */
  --sc-ink:        #151B2E;   /* navy ink, Nell's jumper */
  --sc-ink-soft:   #4A5169;
  --sc-accent:     #B42A1C;   /* the red pen */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --navy: #151B2E;
  --navy-soft: #AEB4C8;
  --paper: #F3F1EC;
  --paper-2: #FAF9F5;
  --desk: #E6E4DE;
  --pen: #B42A1C;
  --pen-light: #FF7B69;       /* the same red, one step lighter, for navy ground */
  --r: 4px;

  /* Paper ground: shadows tinted warm and roughly half the engine's alphas. */
  --sc-shadow-color: 32 18% 28%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.14), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.18);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10), 0 20px 44px -10px hsl(var(--sc-shadow-color) / 0.22), 0 48px 90px -30px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --reserve: 0px;            /* room kept clear for the margin mark sheet */
  --H: 100vh;
}
@supports (height: 100svh) { :root { --H: 100svh; } }
@media (min-width: 1100px) { :root { --reserve: 236px; } }

body { background: var(--sc-canvas); }
.sc-grain { opacity: 0.03; }

.skip {
  position: fixed; left: 12px; top: -80px; z-index: 80;
  background: var(--navy); color: var(--paper); padding: 10px 14px; border-radius: var(--r);
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  background: var(--navy); color: var(--sc-surface);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--r);
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn--big { min-height: 52px; padding: 0 24px; font-size: 1.06rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #26305A; }
}
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- bar -- */
.bar {
  position: fixed; z-index: 60; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sc-surface); color: var(--sc-ink);
  padding: 8px 13px 8px 10px; border-radius: var(--r);
  box-shadow: var(--sc-e2), var(--sc-edge);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  text-decoration: none;
}
.bar__mark svg { width: 18px; height: 18px; fill: none; stroke: var(--pen); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.bar__cta { transition: opacity 200ms var(--sc-ease-out), visibility 200ms; box-shadow: var(--sc-e2), inset 0 0 0 1.5px rgba(252, 251, 248, 0.6); }
/* On phones and tablets the bar carries the action once the reader has left
   the room (the room has its own). Wide screens hand it to the mark sheet. */
.js .bar__cta { opacity: 0; visibility: hidden; }
.js.is-past-room .bar__cta { opacity: 1; visibility: visible; }
@media (min-width: 1100px) { .bar__cta, .js.is-past-room .bar__cta { display: none; } }

/* ------------------------------------------- the margin mark sheet -- */
.tally {
  position: fixed; z-index: 60; right: 16px; top: 50%; translate: 0 -50%;
  width: 204px; padding: 14px 14px 16px;
  background: var(--sc-surface); color: var(--sc-ink);
  border-radius: var(--r);
  box-shadow: var(--sc-e3), var(--sc-edge);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--sc-ease-out), visibility 240ms;
}
.is-past-room .tally { opacity: 1; visibility: visible; }
.tally ol { list-style: none; margin: 0; padding: 0; }
.tally li a {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 0 6px; border-radius: 3px;
  color: var(--sc-ink-soft); text-decoration: none; font-size: 0.92rem;
}
.tally li.is-current a { color: var(--sc-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .tally li a:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 6%, transparent); } }
.tally__box {
  position: relative; flex: none; width: 18px; height: 18px;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 45%, transparent); border-radius: 2px;
}
.tally__box svg {
  position: absolute; left: -3px; top: -6px; width: 24px; height: 24px; overflow: visible;
  fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 420ms var(--sc-ease-out);
}
.tally li.is-read .tally__box svg { stroke-dashoffset: 0; }
.tally__cta { width: 100%; margin-top: 12px; }
@media (max-width: 1099px) { .tally { display: none; } }
html:not(.js) .tally { display: none; }

/* -------------------------------------------------------------- sheets -- */
.sheet {
  position: relative;
  background: var(--sc-canvas);
  padding-block: var(--sc-section);
  box-shadow: 0 -1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent),
              0 -14px 30px -24px hsl(var(--sc-shadow-color) / 0.45);
}
/* the exam-paper margin rule */
@media (min-width: 700px) {
  .sheet::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--sc-gutter) * 0.5); width: 1px;
    background: color-mix(in oklab, var(--pen) 38%, transparent);
  }
}
.sheet__wrap {
  width: 100%; max-width: calc(var(--sc-maxw) + var(--reserve));
  margin-inline: auto;
  padding-left: var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + var(--reserve));
}
.h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance; margin: 0; max-width: 18ch;
}
.h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: -0.015em; margin: 0;
}
blockquote { margin: 0; }
blockquote footer { margin-top: 8px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ 1 room -- */
.hero__stage { background: var(--sc-canvas); }
html:not(.js) .hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: clip; }

.hero__stage {
  --dw: max(104vw, 150vh);
  --dh: calc(var(--dw) * 0.5628);
}
.hero__plane { position: absolute; will-change: transform; }
.hero__room { inset: 0; z-index: 0; }
.hero__room picture, .hero__room img { display: block; width: 100%; height: 100%; }
.hero__room img { object-fit: cover; object-position: 64% 40%; transform: scale(1.08); transform-origin: 72% 40%; max-width: none; }

/* window light: the paper-white haze the headline sits in */
.hero__light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246, 244, 239, 0.95) 0%, rgba(246, 244, 239, 0.9) 30%, rgba(246, 244, 239, 0.66) 42%, rgba(246, 244, 239, 0) 60%),
    linear-gradient(0deg, rgba(246, 244, 239, 0.7) 0%, rgba(246, 244, 239, 0) 40%);
}

.hero__copy {
  position: absolute; z-index: 3;
  left: var(--sc-gutter); top: 44%; translate: 0 -50%;
  width: min(40rem, 45vw);
}
.hero__act { margin: 0; width: max-content; }
.hero__title, .hero__who, .hero__sub { width: fit-content; }
.hero__title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.3rem, 0.8rem + 4.1vw, 4.8rem);
  line-height: 0.96; letter-spacing: -0.04em;
  max-width: 11em; text-wrap: balance; margin: 0;
}
.hero__who {
  margin: 18px 0 0;
  font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.hero__sub { margin: 18px 0 28px; font-size: var(--sc-t-lg); line-height: 1.4; letter-spacing: -0.01em; max-width: 30ch; text-wrap: pretty; }

.hero__nell {
  z-index: 4;
  left: 57vw;
  bottom: calc(var(--H) * 0.09);
  height: 64vh; aspect-ratio: 1024 / 1536;
}
.hero__nell img { height: 100%; width: auto; max-width: none; }

.hero__desk {
  z-index: 5;
  left: 50%; width: var(--dw); translate: -46% 0;
  top: calc(var(--H) * 0.87 - 0.5 * var(--dh));
}
.hero__desk > img { width: 100%; height: auto; max-width: none; }

.slip {
  position: absolute; left: 25%; top: 60%;
  width: min(19rem, 28vw); rotate: -2deg;
  padding: 14px 16px 12px;
  background: var(--sc-surface); color: var(--sc-ink);
  border-radius: 2px;
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.slip p { margin: 0; }
.slip__date { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.slip__line { font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; margin: 4px 0 8px !important; }
.slip__row {
  display: grid; grid-template-columns: 1fr auto 3.2rem; align-items: baseline; gap: 10px;
  padding: 5px 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
  font-size: 0.92rem;
}
.slip__row b { font-family: var(--sc-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* verdict chips, shared */
.is-fail, .is-pass {
  font-style: normal; font-family: var(--sc-font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  padding: 2px 6px; border-radius: 2px;
}
.is-fail { color: var(--pen); box-shadow: inset 0 0 0 1.5px var(--pen); }
.is-pass { color: var(--sc-surface); background: var(--navy); }

/* the push toward the desk, driven by the act's own --sc-p */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__room {
    transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--sc-p, 0) * -2.5vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.06));
    transform-origin: 70% 40%;
  }
  .js .hero__nell {
    transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--sc-p, 0) * -3vh + var(--my, 0) * -4px), 0) scale(calc(1 - var(--sc-p, 0) * 0.05));
    transform-origin: 50% 100%;
  }
  .js .hero__desk {
    transform: translate3d(calc(var(--mx, 0) * -30px), calc(var(--sc-p, 0) * -19vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.1));
    transform-origin: 62% 100%;
  }
}

@media (max-width: 860px) {
  .hero__stage { --dw: 210vw; }
  .hero__room img { object-position: 74% 40%; transform: scale(1.04); transform-origin: 74% 30%; }
  .hero__light {
    background:
      linear-gradient(180deg, rgba(246, 244, 239, 0.96) 0%, rgba(246, 244, 239, 0.88) 30%, rgba(246, 244, 239, 0.3) 46%, rgba(246, 244, 239, 0) 56%);
  }
  .hero__copy { top: 76px; translate: none; right: var(--sc-gutter); width: auto; }
  .hero__sub { font-size: var(--sc-t-base); margin: 14px 0 20px; }
  .hero__nell { left: auto; right: -2vw; height: 90vw; bottom: calc(var(--H) * 0.18 - 20px); }
  .hero__desk { translate: -56% 0; top: calc(var(--H) * 0.82 - 0.5 * var(--dh)); }
  .slip { left: 35%; top: 56%; width: min(19rem, 64vw); }
}
@media (max-width: 600px) {
  .hero__sub { display: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .js .hero__desk {
    transform: translate3d(0, calc(var(--sc-p, 0) * -4vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.08));
  }
}
@media (max-width: 860px) and (min-width: 601px) {
  .hero__nell { height: 62vw; }
}

/* ------------------------------------------------------------ 2 fine -- */
.sheet--fine { padding-top: clamp(3rem, 7vw, 7rem); }
.fine { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.fine > * { grid-column: 1 / -1; }
.fine__big {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.8rem, 0.8rem + 7.4vw, 7.4rem);
  line-height: 0.94; letter-spacing: -0.045em; margin: 0;
}
.fine__lede {
  margin: 36px 0 0; max-width: 30ch;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.22; letter-spacing: -0.02em;
}
.fine__body { margin: 22px 0 0; color: var(--sc-ink-soft); max-width: 54ch; text-wrap: pretty; }
.fine__quote { margin-top: 56px; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.fine__quote p { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: -0.015em; max-width: 26ch; }
@media (min-width: 900px) {
  .fine__big { grid-column: 1 / span 11; }
  .fine__lede { grid-column: 1 / span 7; }
  .fine__body { grid-column: 1 / span 6; }
  .fine__quote { grid-column: 8 / span 5; grid-row: 3 / span 2; align-self: end; margin-top: 0; }
}

/* ---------------------------------------------------------- 3 method -- */
.sheet--method { background: var(--paper-2); }
.method { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.method__text { grid-column: 1 / -1; }
.method__fig { grid-column: 1 / -1; margin: 0; }
@media (min-width: 900px) {
  .method__text { grid-column: 1 / span 7; }
  .method__fig { grid-column: 9 / span 4; margin-top: clamp(4rem, 10vw, 9rem); }
}
.steps { list-style: none; counter-reset: step; margin: 40px 0 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 0 18px 2.4rem; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 21px;
  font-family: var(--sc-font-mono); font-size: 0.9rem; color: var(--pen);
}
.steps b { color: var(--sc-ink); font-weight: 600; }
.method__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; box-shadow: var(--sc-e2); }
.method__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.method__fig figcaption, .nell__fig figcaption {
  margin-top: 12px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 40ch;
}

/* ----------------------------------------------------------- 4 proof -- */
.proof__stage {
  --sc-ink: #F3F1EC; --sc-ink-soft: var(--navy-soft);
  color: var(--sc-ink);
  background: var(--navy);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 22px;
  padding: 88px calc(var(--sc-gutter) + var(--reserve)) 30px var(--sc-gutter);
}
html:not(.js) .proof__stage { padding-bottom: 64px; }
.proof__date { margin: 0; font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.proof__title {
  margin: 8px 0 0; max-width: 24ch;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.7rem, 0.9rem + 2.1vw, 3rem); line-height: 1.02; letter-spacing: -0.03em;
}
.proof__desk {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  column-gap: 28px; align-items: start; min-height: 0;
  max-width: 76rem;
}
.page, .marks {
  --sc-ink: #151B2E; --sc-ink-soft: #4A5169;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(4, 6, 14, 0.35), 0 22px 48px -14px rgba(4, 6, 14, 0.6), var(--sc-edge);
}
.page { position: relative; padding: 20px 26px 22px; --note: 7.8rem; }
.page::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(26px + var(--note) + 10px); width: 1px;
  background: color-mix(in oklab, var(--pen) 45%, transparent);
}
.page__label { display: grid; margin: 0 0 10px; padding-left: calc(var(--note) + 20px); font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.page__v { grid-area: 1 / 1; }
.page__v--0 { opacity: calc(1 - var(--strike)); }
.page__v--1 { opacity: var(--strike); }
.page { --strike: clamp(0, (var(--sc-p, 1) - 0.1) * 14, 1); }

.v0 { position: relative; display: block; width: max-content; max-width: 100%; margin: 0 0 12px calc(var(--note) + 20px); font-family: var(--sc-font-mono); font-size: 0.98rem; }
.v0__strike {
  position: absolute; left: -4px; right: -4px; top: 54%; height: 2px;
  background: var(--pen); border-radius: 2px;
  transform-origin: 0 50%; transform: scaleX(var(--strike));
}
.clauses { list-style: none; margin: 0; padding: 0; }
.clause {
  --w: clamp(0, (var(--sc-p, 1) - var(--s)) * 22, 1);
  display: grid; grid-template-columns: var(--note) minmax(0, 1fr); column-gap: 20px;
  padding: 4px 0;
}
.clause__note {
  text-align: right; padding-top: 2px;
  font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--pen);
  opacity: clamp(0, (var(--sc-p, 1) - var(--s) - 0.025) * 22, 1);
}
.clause__text {
  font-family: var(--sc-font-mono); font-size: 0.9rem; line-height: 1.55;
  opacity: var(--w);
}

.marks { padding: 18px 22px 18px; }
.marks p { margin: 0; }
.marks__case { font-size: 0.95rem; line-height: 1.4; }
.marks__case span, .run__head {
  display: block; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.marks__case span { margin-bottom: 4px; }
.run { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.run__head b { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; text-transform: none; color: var(--sc-ink); margin-right: 6px; }
.boxes { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 34px)); gap: 6px; }
.boxes li { aspect-ratio: 1; border: 1.5px solid color-mix(in oklab, var(--sc-ink) 38%, transparent); border-radius: 2px; }
.boxes svg { display: block; width: 100%; height: 100%; overflow: visible; }
.boxes path { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.boxes--live path { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 1) - var(--s)) * 60, 1)); }
.run__score { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
.run__num {
  font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 1.6vw, 3.2rem);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 1.1ch;
}
.run__of { font-family: var(--sc-font-mono); font-size: 0.85rem; color: var(--sc-ink-soft); }
.run__score .is-fail, .run__score .is-pass { justify-self: start; }
.run--1 .run__verdict, .run__lock { grid-area: 1 / 3; }
.run--1 .run__verdict { opacity: clamp(0, (var(--sc-p, 1) - 0.82) * 30, 1); }
.run__lock {
  align-self: center; font-size: 0.82rem; line-height: 1.3; color: var(--pen); font-weight: 600;
  opacity: calc(1 - clamp(0, (var(--sc-p, 1) - 0.57) * 30, 1));
}
.marks__foot { margin-top: 14px !important; font-size: 0.8rem; line-height: 1.45; color: var(--sc-ink-soft); }

.proof__captions { position: relative; min-height: 2.8em; }
.proof__captions p {
  position: absolute; left: 0; bottom: 0; margin: 0; max-width: 44ch;
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: -0.01em;
}
.proof__captions q { quotes: "“" "”"; color: var(--pen-light); }
html:not(.js) .proof__captions p { position: static; margin-top: 8px; }

@media (max-width: 860px) {
  .proof__stage { padding: 64px var(--sc-gutter) 14px; row-gap: 10px; }
  .proof__title { font-size: 1.3rem; margin-top: 4px; }
  .wide-only { display: none; }
  .proof__captions { min-height: 2.6em; font-size: 0.92rem; }
  .proof__date { font-size: 0.68rem; }
  .proof__desk { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .page { padding: 12px 14px 12px; --note: 0rem; }
  .page::before { display: none; }
  .page__label { padding-left: 0; margin-bottom: 4px; font-size: 0.64rem; }
  .v0 { margin: 0 0 6px; font-size: 0.86rem; }
  .clause { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 1px 0; }
  .clause__note { display: none; }
  .clause__text { font-size: 0.8rem; line-height: 1.4; }
  .marks { padding: 10px 14px 12px; }
  .marks__case { font-size: 0.8rem; }
  .marks__case span, .run__head { font-size: 0.62rem; }
  .run { margin-top: 8px; padding-top: 8px; }
  .run__head b { font-size: 0.82rem; }
  .boxes { grid-template-columns: repeat(8, minmax(0, 20px)); gap: 4px; margin: 4px 0 3px; }
  .run__num { font-size: 1.7rem; }
  .run__lock { font-size: 0.72rem; }
  .marks__foot { display: none; }
  .proof__captions p { font-size: 0.92rem; line-height: 1.25; }
}

/* Short phones: the whole argument still has to fit one pinned screen.
   Version 0's boxes fold into its score line; the labels step down. */
@media (max-width: 860px) and (max-height: 740px) {
  .proof__stage { padding-top: 58px; row-gap: 7px; }
  .proof__date { font-size: 0.62rem; }
  .proof__title { font-size: 0.98rem; letter-spacing: -0.015em; max-width: none; }
  .page { padding: 9px 12px 9px; }
  .page__label { margin-bottom: 2px; }
  .v0 { font-size: 0.78rem; margin-bottom: 3px; }
  .clause__text { font-size: 0.74rem; line-height: 1.34; }
  .marks { padding: 8px 12px 9px; }
  .marks__case { font-size: 0.74rem; line-height: 1.3; }
  .marks__case span { display: none; }
  .run { margin-top: 6px; padding-top: 6px; }
  .run__head { font-size: 0; }
  .run__head b { font-size: 0.8rem; }
  .run--0 { display: flex; align-items: baseline; gap: 12px; }
  .run--0 .boxes { display: none; }
  .run__num { font-size: 1.35rem; }
  .boxes { margin: 3px 0 2px; }
  .proof__captions { min-height: 2.5em; font-size: 0.86rem; }
  .proof__captions p { font-size: 0.86rem; }
}

/* ---------------------------------------------------------- 5 checks -- */
.sheet--checks { padding-top: clamp(4rem, 8vw, 8rem); }
.checks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.checks__fig { grid-column: 1 / -1; margin: 0; }
.checks__text { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .checks__fig { grid-column: 1 / span 5; }
  .checks__text { grid-column: 7 / span 6; padding-top: 8px; }
}
.checks__frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; box-shadow: var(--sc-e2); }
.checks__frame img { width: 100%; height: 124%; margin-top: -12%; object-fit: cover; object-position: 30% 50%; max-width: none; }
.scheme { list-style: none; margin: 32px 0 0; padding: 0; }
.scheme li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start;
  padding: 16px 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  font-size: var(--sc-t-lg); line-height: 1.38; letter-spacing: -0.01em; text-wrap: pretty;
}
.pen-tick { width: 28px; height: 28px; overflow: visible; }
.pen-tick path {
  fill: none; stroke: var(--pen); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 560ms var(--sc-ease-out) 260ms;
}
.scheme > li.sc-in .pen-tick path { stroke-dashoffset: 0; }
html:not(.js) .pen-tick path { stroke-dashoffset: 0; }
.checks__quote { margin-top: 44px; }
.checks__quote p { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.16; letter-spacing: -0.025em; max-width: 22ch; }

/* ------------------------------------------------------------ 6 nell -- */
.sheet--nell { background: var(--paper-2); }
.nell__big {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.2rem, 0.9rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -0.04em;
  max-width: 19ch; text-wrap: balance; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}
.nell__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) {
  .nell__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: 48px; }
  .nell__fig { grid-row: 1 / span 2; }
}
.nell__fig { margin: 0; }
.nell__fig img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: var(--sc-e2); }
.nell__fig > div { border-radius: 2px; }
.nell__status p, .nell__honest p { margin: 0; }
.nell__status > * + * { margin-top: 12px; }
.nell__status .status__open { margin-top: 10px; }
.label {
  font-family: var(--sc-font-mono); font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0;
}
.status__open { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.15; }
.status__gap { max-width: 52ch; }
.circled { position: relative; white-space: nowrap; }
.circled svg {
  position: absolute; left: -10px; top: -7px;
  width: calc(100% + 20px); height: calc(100% + 14px); overflow: visible; pointer-events: none;
}
.circled path {
  fill: none; stroke: var(--pen); stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--sc-ease-out) 450ms;
}
.status__gap.sc-in .circled path { stroke-dashoffset: 0; }
html:not(.js) .circled path { stroke-dashoffset: 0; }
.honest { list-style: none; margin: 16px 0 0; padding: 0; }
.honest li {
  padding: 13px 0 13px 22px; position: relative;
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  color: var(--sc-ink-soft); max-width: 60ch; text-wrap: pretty;
}
.honest li::before { content: ""; position: absolute; left: 2px; top: 1.3em; width: 8px; height: 1.5px; background: var(--pen); }
@media (max-width: 480px) { .circled { white-space: normal; } }

/* --------------------------------------------------------- 7 courses -- */
.courses__stage { background: var(--desk); display: flex; align-items: center; }
.rail {
  align-items: stretch; gap: 24px;
  padding: 72px calc(var(--sc-gutter) + var(--reserve)) 40px var(--sc-gutter);
}
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(24rem, 78vw); align-self: center; }
.rail__lead p { margin: 16px 0 0; color: var(--sc-ink-soft); max-width: 30ch; }
.course {
  width: min(26rem, 84vw);
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 26px 22px;
  background: var(--sc-surface); border-radius: var(--r);
  box-shadow: var(--sc-e2), var(--sc-edge);
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft);
}
.course p { margin: 0; }
.course--main { width: min(40rem, 86vw); }
.course__kind { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pen); }
.course__name { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.05; letter-spacing: -0.025em; color: var(--sc-ink); }
.course__size { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink); }
.course__size span + span::before { content: "·"; margin-right: 14px; color: var(--sc-ink-soft); }
.modules {
  margin: 4px 0 0; padding: 0 0 0 1.6rem;
  columns: 2; column-gap: 28px;
  color: var(--sc-ink); font-size: 0.86rem; line-height: 1.7;
}
.modules li::marker { font-family: var(--sc-font-mono); color: var(--pen); font-size: 0.78rem; }
.course__finish { margin-top: auto !important; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); color: var(--sc-ink); }
.course__finish b { font-weight: 600; }
.rail__note { width: min(22rem, 78vw); align-self: center; }
.rail__note p { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: -0.015em; }
.rail__note p + p { margin-top: 14px; font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); letter-spacing: 0; }

/* the drawer settle: each item after the first arrives in turn */
@media (prefers-reduced-motion: no-preference) {
  .js .rail > [style*="--k"] { opacity: clamp(0.55, var(--sc-p, 1) * 5 - (var(--k) - 1) * 1.1 + 1, 1); }
}
@media (max-width: 860px) {
  .rail { padding-top: 76px; padding-bottom: 20px; gap: 16px; }
  .course { padding: 18px 18px 16px; gap: 9px; }
  .modules { columns: 1; line-height: 1.55; }
}
html:not(.js) .rail { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .rail { padding-bottom: 28px; }
}

/* ----------------------------------------------------------- 8 start -- */
.sheet--start {
  min-height: var(--H);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-bottom: 0;
}
.start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 960px) {
  .start { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); }
}
.start__big {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2rem, 1rem + 2.7vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; text-wrap: balance;
}
.start__lead p { margin: 20px 0 0; color: var(--sc-ink-soft); max-width: 34ch; }
.cover {
  background: var(--sc-surface); border-radius: 3px;
  box-shadow: var(--sc-e3), var(--sc-edge), inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 10%, transparent);
}
.cover__top {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 14px 20px;
  border-bottom: 1.5px solid var(--sc-ink);
  font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.cover__rows { margin: 0; }
.cover__rows > div {
  display: grid; grid-template-columns: 7.2rem minmax(0, 1fr);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
}
.cover__rows dt {
  padding: 15px 16px 15px 20px;
  font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
  border-right: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
  padding-top: 18px;
}
.cover__rows dd { margin: 0; padding: 14px 20px; line-height: 1.5; text-wrap: pretty; }
.cover__sign { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 20px; }
.cover__sign p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 520px) {
  .cover__rows > div { grid-template-columns: minmax(0, 1fr); }
  .cover__rows dt { border-right: 0; padding: 12px 16px 0; }
  .cover__rows dd { padding: 4px 16px 12px; }
  .cover__top { padding: 12px 16px; }
  .cover__sign { padding: 16px; }
}
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: 20px var(--sc-gutter) 24px;
  padding-right: calc(var(--sc-gutter) + var(--reserve));
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot p { margin: 0; }
.foot b { color: var(--sc-ink); font-weight: 600; margin-right: 10px; }

/* ------------------------------------------------------- no JavaScript --
   Without the engine every cue and reveal would sit at opacity 0. Show the
   settled page instead: every sheet, every mark, the final scores. */
html:not(.js) [data-sc-cue],
html:not(.js) [data-sc-in],
html:not(.js) [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }

/* When the desk does not rise (no script, or reduced motion), the slip sits
   higher on it so it is whole on the first screen's desk. */
html:not(.js) .slip { top: 40%; }
@media (prefers-reduced-motion: reduce) { .slip { top: 40%; } }