/* Evidence Network · the two-minute pitch. One 1280x720 stage scaled to the window; slides crossfade; steps build in.
   No inline styles or scripts: the site's CSP allows only files from this origin. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/source-serif-4-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-v20-latin.woff2") format("woff2"); }

:root {
  --ink: #0f0c0a;
  --ink-2: #1a1512;
  --paper: #f3ede3;
  --paper-2: #cfc6b8;
  --muted: #8f8579;
  --rule: #2e2721;
  --ember: #e8603a;
  --ember-2: #ff8a5b;
  --ok: #52c98f;
  --bad: #e5484d;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--ink); color: var(--paper); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }

#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.55; }

.deck { position: fixed; inset: 0; z-index: 1; }
.slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s; }
.slide.active { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
.stage { position: relative; width: 1280px; height: 720px; padding: 64px 80px; transform-origin: center; }

/* ---- type */
.eyebrow { margin: 0 0 28px; font: 500 15px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero { margin: 0; font: 600 96px/1.02 var(--serif); letter-spacing: -0.02em; }
.hero .line { display: block; }
.hero .accent { color: var(--ember); font-style: italic; }
.lede { max-width: 760px; margin: 36px 0 0; font: 400 24px/1.45 var(--sans); color: var(--paper-2); text-wrap: pretty; }
.lede b { color: var(--paper); font-weight: 600; }
.byline { margin: 44px 0 0; font: 500 16px/1.4 var(--sans); color: var(--paper-2); }
.synthetic { margin: 10px 0 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.title { margin: 0; font: 600 52px/1.1 var(--serif); letter-spacing: -0.015em; text-wrap: balance; max-width: 1040px; }
.title.small { font-size: 36px; }
.links { margin: 40px 0 0; display: flex; gap: 36px; font: 600 20px/1.4 var(--mono); color: var(--paper); }
.mono { font-family: var(--mono); }

/* ---- build-ins. rise: fade up on slide entry, staggered by d1..d6. step: shown once the slide's step index reaches data-step. */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.slide.active .rise { opacity: 1; transform: none; }
.slide.active .d1 { transition-delay: 0.1s; } .slide.active .d2 { transition-delay: 0.25s; } .slide.active .d3 { transition-delay: 0.4s; }
.slide.active .d4 { transition-delay: 0.6s; } .slide.active .d5 { transition-delay: 0.75s; } .slide.active .d6 { transition-delay: 0.9s; }
[data-step] { opacity: 0; transform: translateY(22px) scale(0.985); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-step].on { opacity: 1; transform: none; }
[data-step].late.on { transition-delay: 0.18s; }

/* ---- slide 1: the problem */
.choices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 64px; }
.choice { position: relative; min-height: 330px; padding: 30px 28px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); }
.choice h3 { margin: 26px 0 10px; font: 600 30px/1.15 var(--serif); }
.choice p { margin: 0; font: 400 18px/1.45 var(--sans); color: var(--paper-2); }
.choice.third { border-color: rgba(232, 96, 58, 0.55); background: linear-gradient(180deg, rgba(232,96,58,0.12), rgba(232,96,58,0.02)); box-shadow: 0 30px 80px -40px rgba(232,96,58,0.6); }
.choice.third h3 { color: var(--ember-2); }
.glyph { position: relative; height: 96px; }
.glyph .row { position: absolute; left: 0; height: 10px; width: 120px; border-radius: 5px; background: var(--paper-2); opacity: 0.8; }
.glyph-leak .row:nth-child(1) { top: 8px; } .glyph-leak .row:nth-child(2) { top: 30px; } .glyph-leak .row:nth-child(3) { top: 52px; } .glyph-leak .row:nth-child(4) { top: 74px; }
.on .glyph-leak .row { animation: leak 2.4s var(--ease) infinite; }
.on .glyph-leak .row:nth-child(2) { animation-delay: 0.2s; } .on .glyph-leak .row:nth-child(3) { animation-delay: 0.4s; } .on .glyph-leak .row:nth-child(4) { animation-delay: 0.6s; }
@keyframes leak { 0%, 20% { transform: translateX(0); opacity: 0.8; } 70%, 100% { transform: translateX(260px); opacity: 0; } }
.glyph-lock .body { position: absolute; left: 0; top: 40px; width: 72px; height: 54px; border-radius: 10px; background: var(--paper-2); }
.glyph-lock .shackle { position: absolute; left: 12px; top: 6px; width: 48px; height: 48px; border: 10px solid var(--paper-2); border-bottom: 0; border-radius: 30px 30px 0 0; }
.glyph-trade .rows { position: absolute; left: 0; top: 8px; }
.glyph-trade .row { position: relative; display: block; width: 110px; margin-bottom: 12px; }
.glyph-trade .packet { position: absolute; left: 150px; top: 36px; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 24px rgba(232,96,58,0.8); }
.on .glyph-trade .packet { animation: trade 2.2s var(--ease) infinite; }
@keyframes trade { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(150px); opacity: 0; } }

/* ---- slide 2: the episode */
.s-episode .stage { padding-top: 48px; }
.net { display: block; width: 1120px; height: 410px; margin: 8px 0 0; overflow: visible; }
.net .edges path { fill: none; stroke: var(--rule); stroke-width: 2; }
.net .node rect { fill: var(--ink-2); stroke: var(--rule); stroke-width: 1.5; transition: stroke 0.4s, fill 0.4s; }
.net .node.hub rect { fill: var(--paper); stroke: var(--paper); }
.net .node.hub text { fill: var(--ink); }
.net .node.buyer rect { stroke: rgba(82, 201, 143, 0.7); }
.net .node.hit rect { stroke: var(--ember); fill: #2a1d16; }
.net .node.hub.hit rect { fill: #ffe4d8; }
.net .n-name { font: 600 20px var(--sans); fill: var(--paper); }
.net .n-sub { font: 400 13px var(--mono); fill: var(--muted); }
.net .node.hub .n-sub { fill: #6a5d53; }
.net .belief .b-label { font: 500 12px var(--sans); fill: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.net .belief .b-track { fill: var(--rule); }
.net .belief .b-fill { fill: var(--ok); transition: width 1.2s var(--ease); }
.net .belief .b-val { font: 500 15px var(--mono); fill: var(--paper-2); }
.net .pk { filter: url(#glow); }
.net .pk circle { fill: var(--ember); }
.net .pk.signed circle { fill: var(--ok); }
.net .pk text { font: 500 12px var(--mono); fill: var(--paper); }
.caption { position: absolute; left: 80px; right: 80px; bottom: 40px; height: 190px; padding: 22px 26px; border: 1px solid var(--rule); border-radius: 14px; background: rgba(26, 21, 18, 0.85); backdrop-filter: blur(6px); }
.cap-head { display: flex; justify-content: space-between; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-2); }
.cap-seq { color: var(--muted); font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.cap-title { margin: 12px 0 8px; font: 600 28px/1.15 var(--serif); max-width: 690px; }
.cap-text { margin: 0; font: 400 17px/1.45 var(--sans); color: var(--paper-2); max-width: 690px; }
.cap-aside { position: absolute; right: 26px; top: 48px; width: 330px; }
.caption.swap .cap-title, .caption.swap .cap-text, .caption.swap .cap-aside { animation: capin 0.5s var(--ease); }
@keyframes capin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 12px/1 var(--mono); padding: 6px 8px; border-radius: 6px; background: rgba(243,237,227,0.08); color: var(--paper-2); animation: capin 0.4s var(--ease) both; }
.chip.bad { background: rgba(229,72,77,0.18); color: #ff9a9d; }
.bars { display: grid; grid-template-columns: 110px 1fr 54px; gap: 6px 10px; align-items: center; font: 500 13px/1 var(--mono); color: var(--paper-2); }
.bars .lbl { color: var(--muted); font-family: var(--sans); font-size: 12px; }
.bars .track { height: 10px; border-radius: 5px; background: var(--rule); overflow: hidden; }
.bars .fill { height: 100%; width: 0; border-radius: 5px; background: var(--paper-2); transition: width 1s var(--ease); }
.bars .fill.ember { background: var(--ember); } .bars .fill.ok { background: var(--ok); }
.score { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font: 500 14px/1.3 var(--sans); color: var(--paper-2); }
.score b { font-family: var(--mono); color: var(--paper); }
.score .win b { color: var(--ok); }
.conflict { display: grid; gap: 6px; font: 500 14px/1.3 var(--sans); color: var(--paper-2); }
.conflict .claim { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: rgba(243,237,227,0.06); }
.conflict .claim b { font-family: var(--mono); }
.stamp { display: inline-block; padding: 6px 10px; border-radius: 6px; font: 700 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.stamp.ok { color: var(--ok); background: rgba(82,201,143,0.14); } .stamp.bad { color: var(--bad); background: rgba(229,72,77,0.16); }
.cap-aside .stamp { animation: capin 0.4s var(--ease) both; }
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font: 500 14px/1.3 var(--sans); color: var(--paper-2); }
.tally b { display: block; font: 600 26px/1.1 var(--serif); color: var(--paper); }

/* ---- slide 3: the film */
.film-frame { position: relative; margin-top: 22px; width: 1120px; height: 540px; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: #000; box-shadow: 0 40px 120px -40px rgba(0,0,0,0.9); }
.film-frame iframe { display: block; width: 1600px; height: 771px; border: 0; transform: scale(0.7); transform-origin: top left; }
.film-cap { margin: 14px 0 0; font: 400 14px/1.4 var(--mono); color: var(--muted); }

/* ---- slide 4: the proof */
.proofs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 56px; }
.proof { min-height: 300px; padding: 30px 28px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); }
.proof .big { font: 600 64px/1 var(--serif); letter-spacing: -0.02em; color: var(--paper); }
.proof .big.ok { color: var(--ok); } .proof .big.bad { color: var(--bad); }
.proof .of { font-size: 26px; color: var(--paper-2); }
.proof p { margin: 18px 0 0; font: 400 18px/1.45 var(--sans); color: var(--paper-2); min-height: 80px; }
.hashline { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,0.35); font-size: 13px; line-height: 1.6; color: var(--paper-2); overflow-wrap: anywhere; }
.hashline .k { color: var(--muted); }
.verdict { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 5px; font-weight: 700; }
.verdict.ok { color: var(--ok); background: rgba(82,201,143,0.14); } .verdict.bad { color: var(--bad); background: rgba(229,72,77,0.16); }
.proof.on .verdict { animation: stamp 0.5s var(--ease) 0.9s both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
#tamper.flip { color: var(--bad); }
.s-proof .synthetic { margin-top: 36px; }

/* ---- hud */
.hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; }
.progress { height: 3px; background: rgba(243,237,227,0.08); }
.progress span { display: block; height: 100%; width: 0; background: var(--ember); transition: width 0.5s var(--ease); }
.hud-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 12px; font: 500 12px/1 var(--mono); color: var(--muted); }
.hud-row .hint { opacity: 0.6; }
.clock { font-size: 14px; color: var(--paper-2); }
.clock.live { color: var(--ember-2); } .clock.over { color: var(--bad); }
.notes { position: fixed; left: 50%; bottom: 44px; z-index: 4; transform: translateX(-50%); width: min(980px, 92vw); padding: 16px 22px; border-radius: 12px; border: 1px solid var(--rule); background: rgba(15,12,10,0.94); font: 400 20px/1.45 var(--serif); color: var(--paper); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9); }
.notes[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, [data-step], .slide { transition-duration: 0.01s; }
  .on .glyph-leak .row, .on .glyph-trade .packet { animation: none; }
}

/* The blank-screen button on a presentation remote (it sends "." or "B").
   One overlay above everything, the film iframe included, so nothing else
   has to know the deck can go dark. */
body.blank::after {
  content: ""; position: fixed; inset: 0; background: #000; z-index: 9999;
}

/* Two-minute route: five slides, seven advances; film is a separate Q&A link. */
.links a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cap-title, .cap-text { max-width: 620px; }
.cap-aside { width: 350px; }
.caption { bottom: 48px; height: 185px; }
.net { height: 385px; }
.display-status { position: fixed; z-index: 8; top: 8px; left: 5%; right: 5%; padding: 12px; background: var(--ink-2); color: var(--paper); }
@media (max-width: 700px) { .hud-row .hint { display: none; } }