/* CapSam ($DEGREE): "the storybook". A dark, lamp-lit room; a maroon cloth book with gold foil that opens as you
   scroll, pages that turn and pictures that pop up; then the things from Sam's semester laid on the desk: the exam
   sheet, the stadium, the transcript, his notebook, the bursar's bill, the noticeboard and the chalkboard.
   Graduate (varsity lettering), Alegreya (the book's text), Caveat (Sam's hand and the red pen).
   Without JavaScript, or with reduced motion, the book is a plain run of pages and nothing moves. */

:root {
  --ink: #1D1420;
  --paper: #F5EBD6;
  --paper-2: #E9D9B8;
  --sheet: #FBF7EC;
  --maroon: #7C1E2C;
  --maroon-d: #561320;
  --maroon-dd: #380B15;
  --gold: #E8B54A;
  --gold-l: #F8DC8E;
  --gold-d: #A97A1F;
  --night: #0E1628;
  --night-2: #16223A;
  --room: #150D12;
  --room-2: #22141B;
  --red: #C8322A;
  --blue: #23408E;
  --pitch: #2F7A3F;
  --chalk: #203528;
  --text-dim: rgba(245, 235, 214, .72);
  --display: 'Graduate', 'Rockwell', serif;
  --serif: 'Alegreya', Georgia, serif;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  --gutter: clamp(16px, 4vw, 48px);
  --pw: min(88vw, 460px);
  --ph: calc(var(--pw) * 1.35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--room);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--gold-l); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hand { font-family: var(--hand); font-weight: 700; }
h1, h2, h3 { margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  font: 400 17px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 3px solid var(--ink); border-radius: 12px;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
.btn--buy { background: linear-gradient(180deg, var(--gold-l), var(--gold) 55%, #D69C2C); color: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 12px 30px rgba(232, 181, 74, .25); }
.btn--buy:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink), 0 16px 34px rgba(232, 181, 74, .35); }
.btn--buy:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn--soon { background: linear-gradient(180deg, #F1E3C4, var(--paper-2)); }
.btn--quiet { background: transparent; color: var(--paper); border-color: rgba(245, 235, 214, .5); }
.btn--quiet:hover { color: #fff; border-color: #fff; }

/* ---------- the hero: the book's title page, over the room ---------- */
.hero {
  position: relative; z-index: 3;
  padding: clamp(28px, 7vh, 72px) var(--gutter) 40px;
  background: radial-gradient(120% 90% at 70% 40%, var(--room-2), var(--room) 70%);
}
.hero__panel { max-width: 560px; }
.hero__kicker { margin: 0 0 10px; font: 400 13px/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.hero__name { font: 400 clamp(64px, 12vw, 136px)/.9 var(--display); letter-spacing: -.01em; }
.hero__word {
  display: inline-block;
  background: linear-gradient(100deg, #F6D98A 0%, var(--gold) 30%, #FFF1C4 46%, var(--gold) 54%, #B8841F 80%, #F3D07A 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 var(--maroon-dd));
}
.hero__line { margin: 14px 0 0; font: 400 clamp(22px, 3.4vw, 34px)/1.15 var(--display); }
.hero__line span:first-child { color: var(--gold); }
.hero__lede { margin: 16px 0 0; max-width: 34em; color: var(--text-dim); font-size: clamp(17px, 1.6vw, 19px); }
.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__cue { display: none; }

.ca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 18px;
  padding: 10px 14px; border: 1.5px dashed rgba(232, 181, 74, .55); border-radius: 10px;
  font-size: 15px;
}
.ca__label { font: 400 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ca__value { font: 500 14px/1.3 ui-monospace, 'Cascadia Mono', Consolas, monospace; word-break: break-all; color: var(--paper); }
.ca__soon { color: var(--paper); }
.ca__copy { font: 400 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--gold); background: transparent; color: var(--gold); cursor: pointer; }
.ca__copy:hover { background: var(--gold); color: var(--ink); }

/* the short graduation meter: the same live read as the transcript */
.meter {
  display: block; margin-top: 12px; padding: 12px 14px 12px;
  border-radius: 12px; background: rgba(14, 22, 40, .72); border: 1px solid rgba(232, 181, 74, .28);
  color: var(--paper); text-decoration: none;
}
.meter:hover { border-color: var(--gold); color: var(--paper); }
.meter__top { display: flex; align-items: center; gap: 10px; }
.meter__label { font: 400 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); }
.meter__togo { margin-left: auto; font: 400 22px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter__dot { width: 9px; height: 9px; border-radius: 50%; background: #8A7F70; flex: none; }
.is-live .meter__dot, .meter.is-live .meter__dot { background: #5BE08A; box-shadow: 0 0 0 0 rgba(91, 224, 138, .6); animation: pulse 1.8s infinite; }
.meter__bar { position: relative; display: block; height: 10px; margin: 10px 0 8px; border-radius: 6px; background: rgba(245, 235, 214, .12); overflow: hidden; }
.meter__bar i, .live__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--gold-d), var(--gold), var(--gold-l)); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.meter__sub { display: block; font-size: 14px; color: var(--text-dim); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 224, 138, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(91, 224, 138, 0); } }

/* ---------- the book, as plain pages (no JavaScript, reduced motion) ---------- */
.story { padding: 48px var(--gutter) 72px; }
.story__h { max-width: 1040px; margin: 0 auto 24px; font: 400 clamp(26px, 4vw, 40px)/1.1 var(--display); color: var(--gold); }
.stage { position: relative; }
.stage__dust, .stage__hint { display: none; }
.book { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
.leaf { display: contents; }
.page { position: relative; aspect-ratio: 600 / 810; container-type: size; overflow: hidden; border-radius: 4px 10px 10px 4px; }
.page--cover { grid-column: 1 / -1; width: min(100%, 460px); justify-self: center; }
.page--back { display: none; }

.page--cover {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 40% 30%, #8F2635, var(--maroon-d) 70%, var(--maroon-dd));
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, .25), inset 10px 0 18px rgba(0, 0, 0, .3);
}
.page__print { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 241, 196, .28) 48%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; }
.page--back { background: radial-gradient(120% 90% at 40% 30%, #8F2635, var(--maroon-d) 70%, var(--maroon-dd)); }

.page--text {
  background:
    linear-gradient(270deg, rgba(60, 35, 20, .22), rgba(60, 35, 20, 0) 8%),
    radial-gradient(140% 100% at 30% 20%, #FAF2DF, var(--paper) 55%, #EBDDBF);
  color: var(--ink);
  padding: 11% 10% 9% 10%; /* percent of the page's width; the cqw sizes below are of the text box inside it */
  display: flex; flex-direction: column;
}
.page__kicker { margin: 0; font: 400 4.2cqw/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--maroon); }
.page__title { margin: 4cqw 0 5.4cqw; font: italic 900 11.6cqw/1 var(--serif); color: var(--ink); }
.page__body { margin: 0; font: 400 5.9cqw/1.48 var(--serif); hyphens: auto; }
.page__body::first-letter { float: left; margin: 1.4cqw 2.4cqw 0 0; font: 400 18.4cqw/.8 var(--display); color: var(--maroon); }
.page__note { margin: auto 0 0; padding-top: 4cqw; font: 700 8cqw/1.1 var(--hand); color: var(--blue); transform: rotate(-2.5deg); transform-origin: left; }
.page__note::after { content: ''; display: block; width: 46%; height: 1.4cqw; margin-top: 1cqw; border-bottom: .6cqw solid var(--red); border-radius: 50%; opacity: .75; }
.page__folio { position: absolute; bottom: 4.5%; left: 0; right: 0; text-align: center; font: 400 3.4cqw/1 var(--display); color: rgba(29, 20, 32, .55); }

.page--art { background: #EFE3C9; }
.page--art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(40, 20, 10, .35), rgba(40, 20, 10, 0) 9%), linear-gradient(0deg, rgba(0, 0, 0, .1), transparent 10%); }
.page--art .page__folio { color: rgba(255, 253, 247, .8); z-index: 2; }
.pop { position: absolute; z-index: 1; }
.pop svg { width: 100%; height: auto; overflow: visible; }

/* ---------- the book in 3D (capsam.js adds .is-3d and sets the page size, the timeline and every angle) ---------- */
.is-3d .hero { background: transparent; min-height: 100svh; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.is-3d .hero__panel { pointer-events: auto; }
.is-3d .hero__cue { display: flex; position: absolute; left: 0; right: 0; bottom: 18px; justify-content: center; font: 400 12px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-l); opacity: .8; }
.is-3d .hero__cue span::after { content: ''; display: block; width: 2px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--gold), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.is-3d .story { height: var(--story-h, 1400svh); margin-top: -100svh; padding: 0; position: relative; z-index: 1; }
.is-3d .story__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.is-3d .stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  perspective: 1700px; perspective-origin: 50% 42%;
  background:
    radial-gradient(60% 55% at 50% 44%, #3A2530 0%, #24151C 45%, var(--room) 80%);
}
.is-3d .stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--sheet); opacity: var(--white, 0); z-index: 5; }
.is-3d .stage__dust { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.is-3d .stage__hint { display: block; position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font: 400 11px/1 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-l); opacity: var(--hint, 0); z-index: 6; transition: opacity .4s; }
.is-3d .cam { position: absolute; inset: 0; transform-style: preserve-3d; }
.is-3d .book {
  display: block; position: absolute; left: 50%; top: 50%; margin: 0; max-width: none;
  width: calc(var(--pw) * 2); height: var(--ph);
  margin-left: calc(var(--pw) * -1); margin-top: calc(var(--ph) * -.5);
  transform-style: preserve-3d;
}
.is-3d .leaf { display: block; position: absolute; left: var(--pw); top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.is-3d .face { position: absolute; inset: 0; width: auto; aspect-ratio: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 8px 8px 0; }
.is-3d .face--back { transform: rotateY(180deg); border-radius: 8px 0 0 8px; }
.is-3d .page--back { display: block; }
.is-3d .page--cover { width: auto; justify-self: stretch; grid-column: auto; border-radius: 3px 12px 12px 3px; }
.is-3d .face::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); opacity: var(--shade, 0); }
.is-3d .face--back::before { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.is-3d .page--art .pop { display: none; }
.is-3d .floor { position: absolute; left: var(--pw); top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; pointer-events: none; }
.is-3d .floor .pop { display: block; transform-origin: 50% 100%; transform: rotateX(calc(var(--rise, 0) * var(--stand, 60) * -1deg)); visibility: hidden; }
.is-3d .floor.is-up .pop { visibility: visible; }
.is-3d .floor .pop--slam { transform: translateZ(1px) scale(calc(1 + (1 - var(--slam, 0)) * 1.4)) rotate(calc((1 - var(--slam, 0)) * 14deg)); opacity: var(--slam, 0); }
.is-3d .board-r, .is-3d .board-l, .is-3d .block-r, .is-3d .block-l, .is-3d .book__shadow { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.is-3d .board-r { left: var(--pw); transform: translateZ(-3px) translate(0.8%, 1%) scale(1.03, 1.03); background: var(--maroon-d); border-radius: 3px 12px 12px 3px; box-shadow: inset 0 0 0 2px var(--maroon-dd); }
.is-3d .board-l { left: 0; transform: translateZ(-3px) translate(-0.8%, 1%) scale(1.03, 1.03); background: var(--maroon-d); border-radius: 12px 3px 3px 12px; box-shadow: inset 0 0 0 2px var(--maroon-dd); visibility: var(--board-l, hidden); }
.is-3d .block-r { left: var(--pw); transform: translateZ(-1.5px) translate(0.5%, 0.6%); background: repeating-linear-gradient(0deg, #E8D8B6 0 2px, #CDBB96 2px 3px); border-radius: 0 8px 8px 0; }
.is-3d .block-l { left: 0; transform: translateZ(-1.5px) translate(-0.5%, 0.6%); background: repeating-linear-gradient(0deg, #E8D8B6 0 2px, #CDBB96 2px 3px); border-radius: 8px 0 0 8px; visibility: var(--board-l, hidden); }
.is-3d .book__shadow { left: 0; width: calc(var(--pw) * 2); transform: translateZ(-8px) translateY(6%) scale(1.02, .96); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 72%); filter: blur(18px); }
.is-3d .cover__shine { animation: shine 7s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -30% 0; } }

/* ---------- the exam: the sheet the camera dived into ---------- */
.exam {
  position: relative; z-index: 2;
  padding: clamp(56px, 10vh, 110px) var(--gutter) clamp(64px, 10vh, 110px);
  background: var(--sheet);
  color: var(--ink);
}
.sheet {
  position: relative; max-width: 780px; margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 60px) clamp(28px, 5vw, 56px) clamp(52px, 9vw, 96px);
  background:
    linear-gradient(90deg, transparent calc(clamp(36px, 7vw, 74px)), #E6A3A3 calc(clamp(36px, 7vw, 74px)) calc(clamp(36px, 7vw, 74px) + 2px), transparent calc(clamp(36px, 7vw, 74px) + 2px)),
    repeating-linear-gradient(180deg, transparent 0 33px, #C4D4E8 33px 35px),
    #FFFDF6;
  border-radius: 4px;
  box-shadow: 0 1px 0 #E2D8C2, 0 24px 60px -24px rgba(60, 40, 20, .45);
}
.sheet__kicker { margin: 0; font: 400 13px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--maroon); }
.sheet__title { margin: 8px 0 0; font: 400 clamp(44px, 8vw, 76px)/1 var(--display); color: var(--ink); }
.sheet__line { margin: 8px 0 0; font: italic 700 clamp(20px, 2.6vw, 26px)/1.2 var(--serif); color: var(--maroon); }
.sheet__meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 8px; }
.sheet__meta div { display: flex; align-items: baseline; gap: 10px; }
.sheet__meta dt { font-size: 15px; color: #5A4E48; }
.sheet__meta dd { margin: 0; font-size: 30px; line-height: 1; color: var(--blue); border-bottom: 1.5px solid var(--ink); padding: 0 6px 2px; min-width: 70px; }
.sheet__clock dd { color: var(--red); font-variant-numeric: tabular-nums; }
.qs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 22px; }
.q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { padding: 0; font: 700 clamp(19px, 2.2vw, 22px)/1.35 var(--serif); color: var(--ink); }
.q__n { font-family: var(--display); font-weight: 400; color: var(--maroon); margin-right: 4px; }
.q__opts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1.5px solid rgba(29, 20, 32, .25); border-radius: 30px; background: rgba(255, 255, 255, .6); cursor: pointer; font-size: 17px; transition: border-color .2s, background .2s, transform .15s; }
.opt:hover { border-color: var(--ink); transform: translateY(-1px); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); flex: none; position: relative; }
.opt input:checked + .opt__dot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #3A3440; animation: scribble .3s ease-out; }
.opt input:focus-visible + .opt__dot { outline: 3px solid var(--gold); outline-offset: 3px; }
.opt.is-right { border-color: #2F7A3F; background: #E9F4E4; }
.opt.is-wrong { border-color: var(--red); background: #FBE8E3; }
.opt.is-right::after, .opt.is-wrong::after { position: absolute; right: -8px; top: -18px; font: 700 34px/1 var(--hand); color: var(--red); transform: rotate(-8deg); animation: pen .35s cubic-bezier(.3, 1.6, .5, 1); }
.opt.is-right::after { content: '✓'; }
.opt.is-wrong::after { content: '✗'; }
.q__note { margin: 8px 0 0; min-height: 1.2em; font: 700 22px/1.2 var(--hand); color: var(--red); }
@keyframes scribble { from { transform: scale(.2) rotate(-40deg); } to { transform: none; } }
@keyframes pen { from { transform: scale(2.2) rotate(-20deg); opacity: 0; } to { transform: rotate(-8deg); opacity: 1; } }
.sheet__key { margin-top: 26px; font-size: 16px; color: #5A4E48; }
.sheet__key summary { cursor: pointer; }
.sheet__key ol { margin: 8px 0 0; }
.sheet__stamp { position: absolute; right: clamp(8px, 4vw, 40px); top: clamp(80px, 12vw, 120px); display: none; flex-direction: column; align-items: center; padding: 10px 18px; border: 6px solid var(--red); border-radius: 12px; color: var(--red); transform: rotate(-14deg); mix-blend-mode: multiply; }
.sheet__stamp span { font: 400 clamp(38px, 7vw, 60px)/1 var(--display); }
.sheet__stamp small { font: 400 13px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.is-passed .sheet__stamp { display: flex; animation: stamp .5s cubic-bezier(.5, 1.8, .5, 1) both; }
@keyframes stamp { from { transform: rotate(-4deg) scale(2.6); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: 1; } }
.sheet__result { margin: 18px 0 0; font: 700 26px/1.2 var(--hand); color: var(--blue); min-height: 1.2em; }

/* ---------- the final ---------- */
.final { position: relative; background: #050913; color: var(--paper); }
.final__stage { position: relative; aspect-ratio: 16 / 9; max-height: 80vh; margin: 0 auto; overflow: hidden; }
.final__svg { width: 100%; height: 100%; }
.st-pose { opacity: 0; }
.final__svg:not([data-pose]) .st-pose--stand, .final__svg[data-pose="stand"] .st-pose--stand, .final__svg[data-pose="kick"] .st-pose--kick, .final__svg[data-pose="cheer"] .st-pose--cheer { opacity: 1; }
.st-flash { opacity: 0; pointer-events: none; }
.final__text { max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 56px; }
.final__title { font: 400 clamp(34px, 5vw, 54px)/1 var(--display); color: var(--gold); }
.beats { margin: 16px 0 0; padding-left: 1.2em; font-size: 20px; }
.beat--goal span { font-family: var(--display); color: var(--gold); }
.final__note { margin: 16px 0 0; color: var(--text-dim); font-size: 16px; }

.is-3d .final { height: var(--final-h, 460svh); }
.is-3d .final__stage { position: sticky; top: 0; height: 100svh; max-height: none; aspect-ratio: auto; }
.is-3d .final__svg { position: absolute; inset: 0; }
.is-3d .st-beams { opacity: var(--beams, 0); }
.is-3d .st-lamp circle { fill: #3A3A36; transition: fill .15s; }
.is-3d .st-lamp.is-on circle { fill: #FFF6D8; }
.is-3d .st-crowd { opacity: calc(.35 + var(--beams, 0) * .65); }
.is-3d .st-flash { opacity: var(--flash, 0); }
.is-3d .final__text { position: absolute; inset: 0; margin: 0; max-width: none; padding: 0; pointer-events: none; }
.is-3d .final__over { position: sticky; top: 0; height: 100svh; }
.is-3d .final__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.is-3d .beats { list-style: none; padding: 0; margin: 0; position: absolute; inset: 0; }
.is-3d .beat {
  position: absolute; left: 50%; bottom: clamp(70px, 14vh, 130px); width: min(92vw, 820px); translate: -50% 0;
  width: fit-content; max-width: min(92vw, 820px); padding: .35em .8em; border-radius: 14px; background: rgba(5, 9, 19, .74);
  text-align: center; font: italic 700 clamp(22px, 3.4vw, 38px)/1.15 var(--serif); color: #fff;
  opacity: 0; transform: translateY(18px); transition: opacity .45s, transform .6s cubic-bezier(.2, .9, .2, 1);
}
.is-3d .beat.is-on { opacity: 1; transform: none; }
.is-3d .beat--goal { bottom: auto; top: 50%; translate: -50% -50%; background: none; padding: 0; font: 400 clamp(90px, 20vw, 260px)/1 var(--display); color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 0 8px 0 var(--maroon-dd); transform: scale(.4) rotate(-6deg); transition: opacity .2s, transform .5s cubic-bezier(.3, 1.8, .4, 1); }
.is-3d .beat--goal.is-on { transform: rotate(-6deg); }
.is-3d .beat--grad { bottom: auto; top: 40%; font: 400 clamp(30px, 5.4vw, 64px)/1.05 var(--display); color: var(--gold-l); }
.is-3d .final__note { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0 auto; width: fit-content; max-width: 92vw; padding: 6px 14px; border-radius: 10px; background: rgba(5, 9, 19, .74); text-align: center; font-size: 15px; opacity: var(--note, 0); }

/* ---------- the transcript: the live read ---------- */
.transcript { padding: clamp(64px, 10vh, 120px) var(--gutter); background: linear-gradient(180deg, #050913, var(--room) 30%); }
.doc {
  max-width: 1000px; margin: 0 auto; color: var(--ink);
  background: #FBF6EA; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.doc__head { position: relative; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px) 26px; background: linear-gradient(180deg, var(--maroon), var(--maroon-d)); color: var(--paper); }
.doc__head::after { content: ''; position: absolute; right: clamp(16px, 4vw, 44px); top: clamp(18px, 3vw, 36px); width: clamp(54px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--gold-l), var(--gold) 45%, var(--gold-d) 70%); box-shadow: 0 0 0 4px var(--maroon-d), 0 0 0 6px var(--gold); opacity: .95; }
.doc__kicker { margin: 0; font: 400 12px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-l); padding-right: 100px; }
.doc__title { margin: 10px 0 0; max-width: 16em; font: 400 clamp(28px, 4.4vw, 48px)/1.05 var(--display); padding-right: 90px; }
.doc__lede { margin: 12px 0 0; max-width: 40em; color: rgba(245, 235, 214, .85); }
.live { padding: clamp(18px, 3vw, 36px) clamp(16px, 4vw, 48px) 8px; }
.live__sums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; }
.live__sums div { padding: 12px 14px; border-right: 1.5px solid rgba(29, 20, 32, .25); }
.live__sums div:last-child { border-right: 0; }
.live__sums dt { font: 400 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #6A5A50; }
.live__sums dd { margin: 6px 0 0; font-size: 16px; }
.live__sums b { font: 400 clamp(22px, 2.8vw, 30px)/1 var(--display); font-weight: 400; font-variant-numeric: tabular-nums; }
.live__togo { background: var(--ink); color: var(--paper); }
.live__togo dt { color: var(--gold-l); }
.live__togo b { color: var(--gold); }
.live__bar { position: relative; height: 16px; margin: 18px 0 6px; border-radius: 10px; background: #E8DEC8; box-shadow: inset 0 0 0 1.5px rgba(29, 20, 32, .3); }
.live__bar i { min-width: 10px; }
.live__flag { position: absolute; right: 0; top: 22px; font: 400 11px/1 var(--display); letter-spacing: .12em; color: #6A5A50; }
.curve { margin: 34px 0 0; }
.curve svg { width: 100%; height: auto; background: radial-gradient(90% 90% at 70% 10%, #1F2E4D, var(--night)); border-radius: 8px; }
.curve__grid line { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.curve__axis line { stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.curve__axis text, .curve__goal text { fill: rgba(245, 235, 214, .7); font: 400 13px var(--display); letter-spacing: .08em; }
.curve__axis .curve__g { fill: var(--gold); }
.curve__ghost { fill: none; stroke: rgba(255, 253, 247, .55); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.curve__line { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(232, 181, 74, .7)); }
.curve__area { fill: url(#curve-fill); }
.curve__goal text { fill: var(--gold-l); font-size: 14px; }
.curve__cap circle { fill: var(--gold); stroke: var(--ink); stroke-width: 3; }
.curve figcaption { margin-top: 12px; font-size: 15px; color: #4A3E3A; }
.live__read { margin: 14px 0 0; font-size: 15px; color: #4A3E3A; }
.live__read b { color: var(--ink); }
.doc__fine { margin: 0; padding: 14px clamp(16px, 4vw, 48px) 26px; font-size: 15px; color: #5A4E48; border-top: 1px dashed rgba(29, 20, 32, .25); }
.is-drawing .curve__ghost { stroke-dashoffset: 1200; animation: dash 2.2s ease-out forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
.curve__pop { fill: var(--gold-l); font: 400 16px var(--display); }

/* ---------- the cram chart: his notebook ---------- */
.cram { padding: clamp(56px, 9vh, 110px) var(--gutter); background: var(--room); }
.cram__head { max-width: 1000px; margin: 0 auto 22px; }
.cram__head h2 { font: 400 clamp(30px, 4.6vw, 52px)/1.05 var(--display); color: var(--gold); }
.cram__head p { margin: 10px 0 0; max-width: 38em; color: var(--text-dim); }
.hours {
  max-width: 1000px; margin: 0 auto; padding: clamp(16px, 3vw, 30px);
  background-color: #FFFDF6;
  background-image: linear-gradient(rgba(35, 64, 142, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 64, 142, .12) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: 6px; color: var(--ink);
  --r: -.6deg; transform: rotate(var(--r));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.hours__plot { position: relative; }
.hours svg { width: 100%; height: auto; }
.hours__grid line { stroke: rgba(29, 20, 32, .18); stroke-dasharray: 4 6; }
.hours__grid text { fill: #5A4E48; font: 700 18px var(--hand); }
.hours__line { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hours__area { fill: rgba(200, 50, 42, .1); }
.hours__guide { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 5; }
.hours__dot { fill: var(--red); stroke: #FFFDF6; stroke-width: 3; }
.hours__scrub { position: absolute; inset: 0; cursor: ew-resize; touch-action: pan-y; }
.hours figcaption { margin-top: 8px; }
.hours__read { margin: 0; font-size: 17px; min-height: 2.6em; }
.hours__read .hand { font-size: 26px; color: var(--red); margin-right: 6px; }
.hours__cap { margin: 8px 0 0; font-size: 15px; color: #5A4E48; }
.hours__cap a { color: var(--maroon); }
.is-drawing .hours__line { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: dash 2.4s cubic-bezier(.7, 0, .3, 1) forwards; }

/* ---------- the tuition statement: the terms ---------- */
.tuition { padding: clamp(56px, 9vh, 110px) var(--gutter); background: var(--room); }
.bill {
  position: relative; max-width: 760px; margin: 0 auto; padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 44px);
  background: #FFFDF6; color: var(--ink); border-radius: 2px;
  --r: .5deg; transform: rotate(var(--r));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.bill::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: radial-gradient(circle at 8px 10px, transparent 6px, #FFFDF6 6.5px) 0 0 / 16px 10px repeat-x; }
.bill__kicker { margin: 0; font: 400 12px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); }
.bill__head h2 { margin: 10px 0 0; font: 400 clamp(26px, 3.8vw, 40px)/1.08 var(--display); }
.bill__bar { display: flex; height: 38px; margin: 24px 0 18px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.bill__seg { flex-grow: 0; flex-shrink: 0; }
.bill__seg--tax, .sw--tax { background: var(--maroon); }
.bill__seg--fee, .sw--fee { background: var(--gold); }
.bill__seg--pons, .sw--pons { background: #8E9AAE; }
.bill__seg + .bill__seg { border-left: 2px solid var(--ink); }
.bill__lines { margin: 0; }
.bill__lines div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dotted rgba(29, 20, 32, .35); }
.bill__lines dt { display: flex; align-items: center; gap: 10px; }
.bill__lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.sw { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink); flex: none; }
.bill__total { border-bottom: 3px double var(--ink) !important; font-weight: 700; }
.bill__total dd { font: 400 22px/1 var(--display); color: var(--maroon); }
.bill__sum { margin: 16px 0 0; font-style: italic; }
.bill__notes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; color: #3A3036; }

/* ---------- enrollment: index cards on the noticeboard ---------- */
.syllabus {
  padding: clamp(56px, 9vh, 110px) var(--gutter);
  background:
    radial-gradient(rgba(0, 0, 0, .18) 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(120% 90% at 50% 20%, #8B2A38, var(--maroon-d));
}
.syllabus__head { max-width: 1100px; margin: 0 auto 26px; }
.syllabus__head h2 { font: 400 clamp(30px, 4.6vw, 52px)/1.05 var(--display); color: var(--gold-l); }
.syllabus__head p { margin: 10px 0 0; color: rgba(245, 235, 214, .85); }
.lessons { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.lesson {
  position: relative; padding: 30px 20px 22px; color: var(--ink); border-radius: 3px;
  background: linear-gradient(transparent 44px, #E8A0A0 44px 46px, transparent 46px), repeating-linear-gradient(transparent 0 27px, #BFD0E6 27px 28px) 0 46px / 100% 100% no-repeat, #FFFDF6;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
  transform: rotate(var(--r, -1deg));
}
.lesson:nth-child(2) { --r: 1.2deg; } .lesson:nth-child(3) { --r: -.6deg; } .lesson:nth-child(4) { --r: 1.6deg; }
.lesson::before { content: ''; position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-l), var(--gold-d)); box-shadow: 0 3px 4px rgba(0, 0, 0, .45); }
.lesson__n { position: absolute; top: 12px; left: 20px; font: 400 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); }
.lesson h3 { margin: 10px 0 0; font: 700 21px/1.25 var(--serif); }
.lesson p { margin: 8px 0 0; font-size: 16px; line-height: 28px; }
.lesson a { color: var(--maroon); }
.net { margin: 10px 0 0; font-size: 13px; }
.net div { display: grid; gap: 0; padding: 3px 0; border-bottom: 1px dashed rgba(29, 20, 32, .2); }
.net dt { color: #6A5A50; font-size: 12px; }
.net dd { margin: 0; font: 500 13px/1.35 ui-monospace, Consolas, monospace; word-break: break-all; }

/* ---------- class rules: the chalkboard ---------- */
.rules { padding: clamp(56px, 9vh, 110px) var(--gutter); background: var(--room); }
.board {
  max-width: 980px; margin: 0 auto; padding: clamp(26px, 5vw, 56px);
  background: radial-gradient(120% 120% at 30% 20%, #2C4A38, var(--chalk) 70%);
  border: clamp(10px, 1.6vw, 16px) solid #6B4430; border-radius: 6px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .45), 0 30px 70px -30px rgba(0, 0, 0, .8);
  color: #EDEFE6;
}
.board h2 { font: 700 clamp(40px, 6vw, 64px)/1 var(--hand); color: #FFFDF6; }
.board__rules { margin: 20px 0 0; padding-left: 1.3em; display: grid; gap: 12px; font: 600 clamp(22px, 2.6vw, 27px)/1.3 var(--hand); }
.board__rules strong { color: var(--gold-l); font-weight: 700; }
.board__where { margin: 24px 0 0; font: 600 22px/1.3 var(--hand); color: rgba(237, 239, 230, .8); }
.board a { color: var(--gold-l); }

/* ---------- the back cover ---------- */
.backcover {
  position: relative; padding: clamp(64px, 12vh, 130px) var(--gutter) 48px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 20%, #8F2635, var(--maroon-d) 60%, var(--maroon-dd));
  text-align: center;
}
.backcover__inner { max-width: 760px; margin: 0 auto; }
.backcover__end { margin: 0; font: italic 900 clamp(60px, 11vw, 120px)/1 var(--serif); color: var(--gold); }
.backcover__end span { font-style: normal; color: var(--gold-l); }
.backcover__line { margin: 10px 0 0; font: 400 clamp(18px, 2.4vw, 24px)/1.2 var(--display); color: var(--paper); }
.toss { margin-top: 26px; font: 400 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 16px 26px; border: 3px solid var(--ink); border-radius: 12px; cursor: pointer; background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .15s; }
.toss:hover { transform: translateY(-2px) rotate(-1deg); }
.toss:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.backcover__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 32px 0 0; padding: 0; list-style: none; font-family: var(--display); letter-spacing: .04em; }
.disclosure { margin: 30px auto 0; max-width: 42em; font-size: 16px; color: rgba(245, 235, 214, .9); }
.fine { margin: 12px auto 0; max-width: 42em; font-size: 14px; color: rgba(245, 235, 214, .7); }
.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }

/* ---------- the hero's entrance and the foil's shine (with JavaScript, without reduced motion) ---------- */
.js .hero__word { animation: foil 6s ease-in-out 1s infinite; }
@keyframes foil { 0%, 40% { background-position: 100% 0; } 80%, 100% { background-position: 0% 0; } }
.js .hero__panel > * { animation: rise-in .9s cubic-bezier(.2, .9, .2, 1) both; }
.js .hero__panel > :nth-child(2) { animation-delay: .08s; } .js .hero__panel > :nth-child(3) { animation-delay: .18s; }
.js .hero__panel > :nth-child(4) { animation-delay: .26s; } .js .hero__panel > :nth-child(5) { animation-delay: .34s; }
.js .hero__panel > :nth-child(6) { animation-delay: .42s; } .js .hero__panel > :nth-child(7) { animation-delay: .5s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------- reveals (added by capsam.js only on elements still below the fold) ---------- */
.is-pending { opacity: 0; transform: translateY(40px) rotate(var(--r, 0deg)); }
.is-revealed { transition: opacity .8s ease, transform 1s cubic-bezier(.2, .9, .2, 1); }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; background: var(--sheet); color: var(--ink); }
.lost__main { text-align: center; padding: 40px var(--gutter); }
.lost__k { margin: 0; font: 400 14px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--maroon); }
.lost__h { margin: 14px 0 0; font: 400 clamp(46px, 9vw, 90px)/1 var(--display); }
.lost__p { margin: 12px 0 26px; font: 700 28px/1.2 var(--hand); color: var(--red); }

/* ---------- wide screens ---------- */
@media (min-width: 900px) {
  .is-3d .hero { padding-left: clamp(40px, 6vw, 110px); }
  .is-3d .hero__panel { max-width: min(520px, 42vw); }
  .is-3d .hero__cue { justify-content: flex-start; padding-left: clamp(40px, 6vw, 110px); }
}
/* ---------- phones ---------- */
@media (max-width: 899px) {
  .is-3d .hero { justify-content: flex-start; padding-top: 22px; }
  .is-3d .hero__cue { display: none; }
  .is-3d .hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; background: linear-gradient(180deg, var(--room) 55%, rgba(21, 13, 18, 0) 88%); }
  .live__sums { grid-template-columns: 1fr 1fr; }
  .live__sums div:nth-child(2) { border-right: 0; }
  .live__sums div:nth-child(-n+2) { border-bottom: 1.5px solid rgba(29, 20, 32, .25); }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .hero__name { font-size: 64px; }
  .hero__lede { margin-top: 10px; font-size: 16px; }
  .hero__act { margin-top: 16px; }
  .btn { width: 100%; }
  .ca { margin-top: 12px; }
  .doc__title, .doc__kicker { padding-right: 64px; }
  .curve__axis text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* from scenes.mjs at build time: where each pop-up stands on its page */
.pop--c1-town { left: 0%; bottom: 30%; width: 100%; }
.pop--c1-light { left: 78%; bottom: 12%; width: 13%; }
.pop--c1-kid { left: 16%; bottom: 6%; width: 48%; }
.pop--c2-banner { left: 5%; bottom: 80%; width: 90%; }
.pop--c2-sam { left: 26%; bottom: 3%; width: 49%; }
.pop--c2-band { left: 70%; bottom: 36%; width: 25%; }
.pop--c3-lights { left: 0%; bottom: 26%; width: 100%; }
.pop--c3-board { left: 14%; bottom: 50%; width: 72%; }
.pop--c3-cup { left: 36%; bottom: 5%; width: 28%; }
.pop--c4-sam { left: 50%; bottom: 0%; width: 52%; }
.pop--c4-stamp { left: 8%; bottom: 50%; width: 70%; }
.pop--c5-notes { left: 2%; bottom: 34%; width: 96%; }
.pop--c5-sam { left: 22%; bottom: 12%; width: 56%; }
.pop--c5-books { left: 6%; bottom: 2%; width: 88%; }
.pop--c6-pencil { left: 60%; bottom: 4%; width: 40%; }
/* from config.mjs at build time: the three parts of every trade, as shares of the bill's bar */
.bill__seg--tax { flex-basis: 66.667%; }
.bill__seg--fee { flex-basis: 23.333%; }
.bill__seg--pons { flex-basis: 10.000%; }