/* ============================================================================
   Whiteprint — the redline on a clean report
   Stable-Edge Filtering for Passive OT Device Classification
   Hand-rolled, dependency-free deck. Designed at 1920×1080.
   ========================================================================== */

/* ---- 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 ------------------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --navy:#0A1A3F;
  --kpmg:#00338D;
  --cobalt:#1E49E2;
  --ink:#16181D;
  --slate:#5B6472;
  --hair:#E3E7EF;
  --paper-tint:#F4F6FA;
  --amber:#E8531B;          /* the single warm accent — rationed to 3 places */
  --letterbox:#02060f;

  --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;}
[hidden]{display:none !important;}   /* must beat .overlay{display:grid} */

/* ---- 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;}

/* ---- slides -------------------------------------------------------------- */
.slide{position:absolute;inset:0;background:var(--paper);color:var(--ink);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;
  padding:132px 110px 116px 172px;align-content:start;
  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 — sits in the left margin, clear of the text column */
.slide::before{content:'';position:absolute;left:104px;top:0;bottom:0;width:6px;
  background:var(--kpmg);}

/* navy bookends */
.slide--navy{background:var(--navy);color:var(--paper);
  grid-template-columns:1fr;place-items:center;padding:120px;text-align:center;}
.slide--navy::before{display:none;}
.mark{position:absolute;top:64px;left:64px;width:28px;height:28px;background:var(--kpmg);}

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

/* ---- type ---------------------------------------------------------------- */
.kicker{font-weight:600;font-size:18px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin:0 0 20px;}
.kicker--navy{color:var(--cobalt);}
.kicker-sub{font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate);}

.hero{font-weight:700;font-size:124px;line-height:1.03;letter-spacing:-.02em;
  margin:0 0 32px;color:var(--paper);}
.title{font-weight:600;font-size:62px;line-height:1.08;letter-spacing:-.01em;
  color:var(--kpmg);margin:0 0 26px;max-width:16ch;}
.title--stack{max-width:none;}
.takeaway{font-weight:700;font-size:72px;line-height:1.08;letter-spacing:-.01em;
  color:var(--paper);margin:0 0 32px;max-width:20ch;}

.hook{font-weight:600;font-size:38px;line-height:1.25;color:var(--cobalt);margin:0 0 48px;}
.credit{font-size:21px;line-height:1.6;color:rgba(255,255,255,.62);margin:0;}

.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 .5em;}
.lede em{font-style:normal;color:var(--kpmg);font-weight:600;}
.lede strong{color:var(--ink);font-weight:700;}
.rq{font-weight:600;font-size:30px;line-height:1.3;color:var(--cobalt);
  margin:.45em 0 0;max-width:24em;}

.accent-cobalt{color:var(--cobalt);}
.accent-kpmg{color:var(--kpmg);}

/* slide 4 big number */
.bignum{margin-top:26px;}
.bignum__val{display:block;font-size:56px;line-height:1;letter-spacing:-.01em;color:var(--ink);}
.bignum__val .arrow{color:var(--slate);margin:0 .08em;}
.bignum__sub{display:block;font-size:23px;color:var(--slate);margin-top:10px;letter-spacing:.01em;}

/* slide 5 mechanism chain */
.chain{list-style:none;margin:0 0 8px;padding:0;max-width:25em;}
.chain li{display:flex;gap:20px;align-items:flex-start;font-size:25px;line-height:1.36;
  color:var(--ink);margin:0 0 .5em;}
.chain .step{flex:0 0 auto;width:38px;height:38px;border:2px solid var(--kpmg);border-radius:50%;
  display:grid;place-items:center;font-size:20px;color:var(--kpmg);margin-top:2px;}
.chain .step-txt{min-width:0;}
.chain strong{font-weight:700;}
.ann{display:inline-block;font-size:19px;color:var(--slate);margin-top:5px;}
.footnote{font-size:21px;color:var(--slate);margin:14px 0 0;max-width:34em;line-height:1.4;}

/* slide 3 ledger */
.ledger-head{font-size:18px;letter-spacing:.18em;color:var(--slate);margin:0 0 16px;}
.ledger{margin:0;border-top:1px solid var(--hair);}
.ledger__row{display:flex;align-items:baseline;gap:24px;padding:13px 2px;
  border-bottom:1px solid var(--hair);}
.ledger__row dt{margin:0;font-size:44px;line-height:1;color:var(--kpmg);min-width:140px;}
.ledger__row dd{margin:0;font-size:21px;color:var(--slate);letter-spacing:.02em;}
.ledger-foot{font-size:19px;color:var(--slate);margin:16px 0 0;}

/* slide 3 prune diagram */
.prune{width:100%;max-width:300px;height:auto;margin-top:14px;}
.prune .pnodes circle{fill:var(--kpmg);}
.prune .pedge-keep line{stroke:var(--cobalt);stroke-width:2.5;}
.prune .pedge-drop line{stroke:var(--hair);stroke-width:2;stroke-dasharray:4 5;
  transition:opacity .5s var(--ease);}
.prune.is-pruned .pedge-drop line{opacity:0;}
.prune-label{font-size:18px;fill:var(--cobalt);}
.prune-label--drop{fill:var(--slate);}

/* slide 2 schematic */
.schematic{width:100%;max-width:600px;height:auto;}
.schematic .bus{stroke:var(--kpmg);stroke-width:3;}
.schematic .nodes circle{fill:var(--kpmg);}
.schematic .edge-steady{fill:none;stroke:var(--cobalt);stroke-width:2.5;}
.schematic .edge-transient{fill:none;stroke:var(--hair);stroke-width:2;stroke-dasharray:5 6;}
.schematic .tap{stroke:var(--slate);stroke-width:2;stroke-dasharray:3 4;}
.schematic .probe{fill:none;stroke:var(--kpmg);stroke-width:2;}
.schematic .probe-label{fill:var(--kpmg);font-size:18px;}
.schematic .cap{fill:var(--slate);font-size:20px;}
.schematic .cap--warn{fill:var(--ink);font-weight:600;}

/* slide 6 takeaway */
.takeaway-sub{font-size:38px;line-height:1.4;color:var(--paper);margin:0 0 40px;max-width:26ch;}
.burn{transition:color .2s var(--ease);}        /* paper → amber on final beat */
.burn.is-burnt{color:var(--amber);font-weight:600;}
.practitioner{list-style:none;margin:0 0 36px;padding:0;
  display:flex;gap:16px 56px;flex-wrap:wrap;justify-content:center;}
.practitioner li{font-size:25px;color:rgba(255,255,255,.9);}
.practitioner em{font-style:normal;color:var(--cobalt);font-weight:500;}
.credit--end{font-size:19px;}

/* ---- figure: rq2 bar chart ---------------------------------------------- */
.chart,.matrices{width:100%;}
.chart svg,.matrices svg{width:100%;height:auto;aspect-ratio:760 / 520;display:block;}
.fig-axis-title{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--slate);}
.fig-tick{font-family:var(--mono);font-weight:500;font-size:22px;fill:var(--slate);}
.fig-grid{stroke:var(--hair);stroke-width:1;}
.fig-zero{stroke:var(--kpmg);stroke-width:2;}
.fig-xlabel{font-family:var(--mono);font-weight:500;font-size:24px;fill:var(--slate);}
.fig-pval{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--slate);}
.fig-whisk{stroke:var(--ink);stroke-width:2;}

.bar-neutral,.whisk-neutral{opacity:0;transition:opacity .4s var(--ease);}
.chart.show-neutral .bar-neutral,.chart.show-neutral .whisk-neutral{opacity:1;}
.maint-extra{opacity:0;transition:opacity .3s var(--ease) .45s;}
.chart.ignite .maint-extra{opacity:1;}
.bar-maint{transform:scaleY(0);transform-box:fill-box;transform-origin:top;
  fill:var(--kpmg);transition:transform .7s var(--ease),fill .15s linear .55s;}
.chart.ignite .bar-maint{transform:scaleY(1);fill:var(--amber);}

/* ---- figure: confusion matrices ----------------------------------------- */
.fig-panel{font-family:var(--mono);font-weight:500;font-size:26px;fill:var(--kpmg);letter-spacing:.04em;}
.fig-cmlabel{font-family:var(--mono);font-weight:500;font-size:22px;fill:var(--slate);}
.fig-cmval{font-family:var(--mono);font-weight:500;font-size:20px;}
.fig-undercap{font-family:var(--mono);font-weight:500;font-size:17px;fill:var(--slate);}
.leak-arc{fill:none;stroke:var(--amber);stroke-width:2.5;}
.leak-label{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--amber);}
#leakRect,#drainRect{transition:fill .6s var(--ease),stroke .6s var(--ease),stroke-width .6s var(--ease);}
#connector{opacity:0;transition:opacity .35s var(--ease) .35s;}
.matrices.leaked #connector{opacity:1;}

/* ---- 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:10px;margin:0;padding:0;}
.ladder li{width:42px;height:4px;background:var(--hair);border-radius:2px;
  transition:background .3s var(--ease);}
.ladder li.is-active{background:var(--cobalt);}
.rail__title{flex:1;font-size:18px;color:var(--slate);}
.rail__count{font-size:18px;color:var(--slate);}

/* ---- 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(2,6,15,.93);color:var(--paper);padding:80px;}
.overlay__inner{max-width:1120px;}
.overlay__label{font-size:18px;letter-spacing:.18em;color:var(--cobalt);margin:0 0 28px;}
.overlay__body{font-size:36px;line-height:1.5;font-weight:400;margin:0;}
.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;}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .slide,[data-beat],.rail,.boot-hint,.burn,
  .prune .pedge-drop line{transition:opacity .12s linear !important;}
  .slide{transform:none !important;}
  [data-beat]{transform:none !important;}
  .bar-maint,.maint-extra,.bar-neutral,.whisk-neutral,
  #leakRect,#drainRect,#connector{transition-duration:.12s !important;}
}