/* ============================================================================
   UvA progress deck — "redline on a clean report", University of Amsterdam skin.
   Hand-rolled, dependency-free. Designed at 1920×1080.
   Reuses the Whiteprint engine; re-skinned to UvA red + Amsterdam crosses.
   ========================================================================== */

/* ---- fonts (self-hosted, offline) ---------------------------------------- */
@font-face { font-family:'Inter'; font-weight:400; font-display:swap;
  src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap;
  src:url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap;
  src:url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap;
  src:url('assets/fonts/plex-mono-500.woff2') format('woff2'); }

/* ---- design tokens — UvA -------------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --uva:#BC0031;            /* UvA red — primary */
  --uva-deep:#8A0024;       /* darker red — the binding rule, structure */
  --ink:#1A1618;
  --slate:#585058;
  --hair:#E9E3E7;
  --paper-tint:#FAF6F8;
  --accent:#BC0031;         /* the result accent — the red itself, rationed */
  --accent-faint:#F6DCE4;
  --uva-on-dark:#E0304F;    /* one lightened UvA red for legibility on near-black */
  --dark:#171115;           /* near-black warm — bookends */
  --letterbox:#0a0608;

  --sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--letterbox);overflow:hidden;
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.mono{font-family:var(--mono);font-weight:500;}
.snotes{display:none;}                 /* speaker notes — surfaced only in the N overlay */
[hidden]{display:none !important;}

/* ---- letterbox + scaling stage ------------------------------------------ */
#app{position:fixed;inset:0;overflow:hidden;background:var(--letterbox);}
#stage{position:absolute;top:50%;left:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center;
  background:var(--paper);box-shadow:0 40px 120px rgba(0,0,0,.55);}
.deck{position:absolute;inset:0;}

/* ---- Amsterdam crosses motif --------------------------------------------- */
.crosses{display:inline-flex;gap:.16em;color:var(--uva);font-style:normal;
  font-weight:700;line-height:1;letter-spacing:0;}
.crosses i{font-style:normal;transform:rotate(0deg);}
.crosses--corner{position:absolute;top:60px;left:64px;font-size:30px;z-index:2;}
.slide--cover .crosses--corner,.slide--end .crosses--corner,.intro .crosses--corner{color:var(--uva-on-dark);}

/* ---- slides -------------------------------------------------------------- */
.slide{position:absolute;inset:0;background:var(--paper);color:var(--ink);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:40px;
  padding:120px 110px 112px 172px;align-content:center;
  opacity:0;visibility:hidden;transform:translateX(40px);pointer-events:none;
  transition:opacity .42s var(--ease),transform .42s var(--ease),
             visibility 0s linear .42s;}
.slide.is-current{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s;}
.slide.is-past{transform:translateX(-40px);}

/* the binding rule — left margin */
.slide::before{content:'';position:absolute;left:104px;top:0;bottom:0;width:6px;
  background:var(--uva);}

/* ---- columns ------------------------------------------------------------- */
.col-left{grid-column:1 / 7;min-width:0;align-self:start;}
.col-right{grid-column:7 / 13;align-self:center;min-width:0;}
.bookend{max-width:1480px;}

/* ---- dark bookends (cover · claim · end) --------------------------------- */
.slide--cover,.slide--end,.slide--claim{background:var(--dark);color:var(--paper);
  grid-template-columns:1fr;place-items:center;padding:120px 150px;text-align:center;}
.slide--cover::before,.slide--end::before,.slide--claim::before{display:none;}

/* ---- type ---------------------------------------------------------------- */
.kicker{font-weight:600;font-size:18px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--uva);margin:0 0 22px;}
.kicker--bright{color:var(--uva-on-dark);}
.kicker--flag{color:var(--uva);}
.kicker--flag::before{content:'▲ ';font-size:.8em;}

.hero{font-weight:700;font-size:82px;line-height:1.04;letter-spacing:-.02em;
  margin:0 0 30px;color:var(--paper);max-width:20ch;}
.title{font-weight:700;font-size:54px;line-height:1.1;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 26px;max-width:17ch;}
.title--tight{font-size:48px;max-width:18ch;}
.slide__title--wide{grid-column:1 / 13;max-width:none;margin:0 0 44px;}
.title em{font-style:normal;color:var(--uva);}
.hook{font-weight:600;font-size:34px;line-height:1.3;color:var(--uva-on-dark);margin:8px 0 44px;max-width:24ch;}
.credit{font-size:21px;line-height:1.6;color:rgba(255,255,255,.78);margin:0;}
.credit--end{margin-top:18px;}
.thanks{color:var(--uva-on-dark);font-weight:600;}

.footnote{font-size:21px;color:var(--slate);margin:18px 0 0;max-width:34em;line-height:1.45;}

.lede{list-style:none;margin:0;padding:0;max-width:26em;}
.lede li{font-weight:400;font-size:27px;line-height:1.4;color:var(--ink);margin:0 0 .55em;
  padding-left:30px;position:relative;}
.lede li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:11px;
  background:var(--uva);border-radius:2px;}
.lede em{font-style:normal;color:var(--uva);font-weight:600;}
.lede strong{color:var(--ink);font-weight:700;}
.lede--tight li{font-size:25px;margin-bottom:.42em;}
.lede--muted li{color:var(--slate);}
.lede--muted em{color:var(--ink);}

/* ---- RQ list (slide 2) --------------------------------------------------- */
.rqlist{list-style:none;margin:0;padding:0;}
.rqlist li{display:flex;gap:24px;align-items:flex-start;margin:0 0 26px;}
.rq-id{flex:0 0 auto;font-family:var(--mono);font-weight:500;font-size:22px;color:var(--paper);
  background:var(--uva);border-radius:7px;padding:7px 14px;margin-top:2px;}
.rq-tx{font-size:28px;line-height:1.34;color:var(--ink);}
.rq-tx strong{color:var(--uva);font-weight:700;}

/* ---- class ledger (slide 3) ---------------------------------------------- */
.classled{margin:0;border-top:1px solid var(--hair);}
.classled__row{display:flex;align-items:baseline;gap:24px;padding:15px 4px;
  border-bottom:1px solid var(--hair);}
.classled__row dt{margin:0;font-size:30px;color:var(--uva);min-width:230px;font-weight:600;}
.classled__row dd{margin:0;font-size:21px;color:var(--slate);}
.classled__foot{font-size:19px;color:var(--slate);margin:16px 0 0;}

/* ---- big number (slide 4) ------------------------------------------------ */
.bignum{border-left:4px solid var(--uva);padding-left:28px;}
.bignum__val{display:block;font-weight:700;font-size:72px;line-height:1;letter-spacing:-.01em;color:var(--ink);}
.bignum__val .arrow{color:var(--slate);margin:0 .06em;}
.bignum__sub{display:block;font-size:24px;color:var(--slate);margin-top:14px;}
.bignum__note{display:block;font-size:22px;color:var(--ink);margin-top:20px;line-height:1.45;max-width:22em;}
.bignum__note em{font-style:normal;color:var(--uva);font-weight:600;}

/* ---- checklist (slide 5) ------------------------------------------------- */
.checklist{list-style:none;margin:0;padding:0;columns:1;}
.checklist li{font-size:26px;line-height:1.5;color:var(--ink);display:flex;gap:16px;align-items:baseline;margin:0 0 6px;}
.checklist .ck{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent-faint);
  color:var(--uva);font-weight:700;font-size:18px;display:grid;place-items:center;}
.since-foot{font-size:26px;line-height:1.4;color:var(--ink);margin:36px 0 0;max-width:24em;}
.since-foot em{font-style:normal;color:var(--uva);font-weight:600;}

/* ---- mechanism chain (slide 7) ------------------------------------------- */
.chain{list-style:none;margin:24px 0 0;padding:0;max-width:24em;}
.chain li{display:flex;gap:18px;align-items:flex-start;font-size:24px;line-height:1.34;color:var(--ink);margin:0 0 .5em;}
.chain .step{flex:0 0 auto;width:36px;height:36px;border:2px solid var(--uva);border-radius:50%;
  display:grid;place-items:center;font-size:19px;color:var(--uva);margin-top:1px;}
.chain strong{font-weight:700;color:var(--uva);}
.bigresult{font-weight:700;font-size:60px;color:var(--accent);margin:30px 0 0;letter-spacing:-.01em;}
.bigresult .arrow{color:var(--slate);}
.bigresult__sub{display:block;font-family:var(--mono);font-weight:500;font-size:22px;color:var(--slate);margin-top:10px;letter-spacing:0;}

/* ---- controls reading (slide 8) ------------------------------------------ */
.reading{list-style:none;margin:18px 0 0;padding:0;max-width:25em;}
.reading li{font-size:23px;line-height:1.4;color:var(--ink);margin:0 0 18px;padding-left:22px;position:relative;}
.reading li::before{content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--uva);}
.reading b{color:var(--uva);font-weight:700;}
.reading em{font-style:normal;font-weight:600;}

/* ---- fact cards (slide 9) ------------------------------------------------ */
.factcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
.factcards li{background:var(--paper-tint);border:1px solid var(--hair);border-left:4px solid var(--uva);
  border-radius:9px;padding:18px 24px;}
.fc-h{display:block;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);font-weight:600;}
.fc-v{display:block;font-size:30px;font-weight:700;color:var(--ink);margin:6px 0 4px;}
.fc-v em{font-style:normal;color:var(--accent);}
.fc-s{display:block;font-size:19px;color:var(--slate);line-height:1.35;}

/* ---- num grid (slide 13) ------------------------------------------------- */
.numgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.numcell{background:var(--paper-tint);border:1px solid var(--hair);border-radius:11px;padding:26px 24px;}
.numcell b{display:block;font-size:46px;font-weight:700;color:var(--uva);line-height:1;letter-spacing:-.01em;}
.numcell span{display:block;font-size:19px;color:var(--slate);margin-top:10px;}

/* ---- decisions (slide 14) ------------------------------------------------ */
.decisions{list-style:none;counter-reset:d;margin:0;padding:0;}
.decisions li{counter-increment:d;font-size:23px;line-height:1.36;color:var(--ink);
  margin:0 0 18px;padding-left:48px;position:relative;}
.decisions li::before{content:counter(d);position:absolute;left:0;top:0;width:32px;height:32px;
  background:var(--uva);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;}
.decisions b{color:var(--uva);font-weight:700;}
.decisions em{font-style:normal;color:var(--ink);font-weight:600;}

/* ---- claim slide (11) ---------------------------------------------------- */
.claim{font-weight:700;font-size:68px;line-height:1.1;letter-spacing:-.01em;color:var(--paper);
  margin:0 0 34px;max-width:18ch;}
.claim-hl{color:var(--uva-on-dark);}
.claim-sub{font-size:30px;line-height:1.46;color:rgba(255,255,255,.92);margin:0;max-width:30ch;}
.claim-sub em{font-style:normal;color:var(--uva-on-dark);}
.claim-sub strong{color:var(--paper);font-weight:700;}

/* ---- takeaway (slide 15) ------------------------------------------------- */
.takeaway{font-weight:700;font-size:62px;line-height:1.12;letter-spacing:-.01em;color:var(--paper);margin:0 0 36px;max-width:20ch;}

/* ---- figures ------------------------------------------------------------- */
.figbox{margin:0;}
.chart{width:100%;}
.chart svg{width:100%;height:auto;display:block;}
.figbox figcaption{font-family:var(--mono);font-weight:500;font-size:18px;color:var(--slate);
  margin-top:14px;text-align:center;}
.fig-axis-title{font-family:var(--mono);font-weight:500;font-size:18px;fill:var(--slate);}
.fig-tick{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--slate);}
.fig-grid{stroke:var(--hair);stroke-width:1;}
.fig-zero{stroke:var(--ink);stroke-width:2;}
.fig-xlabel{font-family:var(--mono);font-weight:500;font-size:21px;fill:var(--ink);}
.fig-xsub{font-family:var(--mono);font-weight:500;font-size:16px;fill:var(--slate);}
.fig-pval{font-family:var(--mono);font-weight:500;font-size:19px;fill:var(--slate);}
.fig-whisk{stroke:var(--ink);stroke-width:2;}
.fig-val{font-family:var(--mono);font-weight:500;font-size:22px;fill:var(--ink);}
.fig-val--accent{fill:var(--accent);}
.fig-note{font-family:var(--mono);font-weight:500;font-size:18px;fill:var(--slate);}

/* bars that ignite on a beat (neutral grey → red for the harmful ones) */
.bar-rect{fill:var(--slate);fill-opacity:.32;}
.bar-accent{fill:var(--accent);}
.bar-pos{fill:#1f8a55;}                 /* the one harmless (positive) control */
.bar-grow{transform:scaleY(0);transform-box:fill-box;transform-origin:var(--zero,bottom);
  transition:transform .6s var(--ease);}
.is-grown .bar-grow{transform:scaleY(1);}

/* timeline figure (slide 6) */
.tl-phase{fill:var(--paper-tint);}
.tl-phase--out{fill:var(--accent-faint);}
.tl-line{fill:none;stroke:var(--uva);stroke-width:3;stroke-linejoin:round;}
.tl-theta{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5;}
.tl-dot{fill:var(--uva);}
.tl-lab{font-family:var(--mono);font-weight:500;font-size:17px;fill:var(--slate);}
.tl-lab--out{fill:var(--accent);}

/* ---- running rail -------------------------------------------------------- */
.rail{position:absolute;left:172px;right:110px;bottom:40px;
  display:flex;align-items:center;gap:24px;z-index:5;transition:opacity .3s var(--ease);}
.rail--hidden{opacity:0;}
.ladder{list-style:none;display:flex;gap:8px;margin:0;padding:0;}
.ladder li{width:34px;height:4px;background:var(--hair);border-radius:2px;transition:background .3s var(--ease);}
.ladder li.is-active{background:var(--uva);}
.rail__title{flex:1;font-size:18px;color:var(--slate);}
.rail__count{font-size:18px;color:var(--slate);font-family:var(--mono);font-weight:500;}

/* ---- beat reveal --------------------------------------------------------- */
[data-beat]{opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
[data-beat].is-in{opacity:1;transform:none;}

/* ---- overlays + hints ---------------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(8,4,6,.94);color:var(--paper);padding:80px;}
.overlay__inner{max-width:1120px;}
.overlay__label{font-size:18px;letter-spacing:.18em;color:var(--uva-on-dark);margin:0 0 26px;text-transform:uppercase;}
.overlay__body{font-size:30px;line-height:1.5;font-weight:400;margin:0;}
.overlay__body b{color:#F3A9B7;font-weight:600;}
.overlay__body i{color:#F3A9B7;font-style:normal;}
.overlay__keys{list-style:none;margin:0;padding:0;font-size:26px;line-height:2.1;}
.overlay__keys kbd{font-family:var(--mono);font-size:20px;border:1px solid var(--slate);
  border-radius:5px;padding:2px 10px;margin-right:6px;}
.overlay__hint{font-size:18px;color:var(--slate);margin:40px 0 0;}

.boot-hint{position:absolute;bottom:40px;right:110px;font-size:18px;color:var(--slate);z-index:6;
  transition:opacity .5s var(--ease);}
.boot-hint.is-gone{opacity:0;}
.boot-hint kbd{font-family:var(--mono);font-size:15px;border:1px solid var(--hair);border-radius:4px;padding:1px 7px;}

/* ---- cold-open / attract screen ------------------------------------------ */
.intro{position:absolute;inset:0;z-index:10;background:var(--dark);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px;cursor:pointer;opacity:1;transition:opacity .6s var(--ease);}
.intro--gone{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease),visibility 0s linear .6s;}
.intro-kicker{font-weight:600;font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--uva-on-dark);margin:0 0 30px;}
.intro-q{font-weight:700;font-size:74px;line-height:1.08;letter-spacing:-.02em;color:var(--paper);margin:0;max-width:20ch;}
.intro-q em{font-style:normal;color:var(--uva-on-dark);}
.intro-credit{font-size:22px;line-height:1.6;color:rgba(255,255,255,.6);margin:44px 0 0;}
.intro-hint{position:absolute;bottom:60px;font-size:20px;color:rgba(255,255,255,.5);
  animation:introhint 2.4s var(--ease) infinite;}
@keyframes introhint{0%,100%{opacity:.28}50%{opacity:.85}}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .slide,[data-beat],.rail,.boot-hint,.bar-grow{transition:opacity .12s linear !important;}
  .slide{transform:none !important;}
  [data-beat]{transform:none !important;}
  .bar-grow{transition-duration:.12s !important;}
  .intro,.intro--gone{transition-duration:.12s !important;}
  .intro-hint{animation:none !important;}
}