/* Deck styles: template B, "night margin". */

/* ==== Design switches: everything Robin may still change lives in this block ===================== */
:root{
  /* Frame (Robin's compromise, 2026-10-27). b1_thin was 24/76/38, b3_footer 12/96/48. */
  --edge:32px; --band:84px; --num-size:34px;
  --logo-ugent:46px; --logo-fea:19px; --logo-imec:19px; --logo-waves:29px; --logo-gap:30px;
  --night:#101112;              /* the invitation's black, behind every page and night slide */
  /* Typography (Robin, 2026-10-27: candidate c600 in design/templates/typography/). */
  --title-weight:600; --title-size:62px; --title-tracking:-.004em;
  --title-rule-w:0px; --title-rule-h:0px; --title-rule-gap:0px;    /* short rule under titles: off */
  --body-size:42px; --body-lh:1.32; --item-gap:30px;
  /* List marker: <html data-marker="..."> in js/config.js: square (chosen) | rule | dash | num | none */
}

:root{
  --rail:136px;            /* screen x of titles and logos; the number's right edge */
  --ink:#000; --paper:#fff;
  /* Phantom identity colours (TRANSITIONS rule 7). Thesis Fig. 2.6 assignment; keep in sync with the figure builder. */
  --duke:#000000; --ella:#00008b; --eartha:#800080; --thelonious:#ff0000;
  /* Two phasor colours shared by the phasor and matrix slides. */
  --e1:#0050ff; --e2:#ff6a00;
}

@font-face{font-family:"EB Garamond";font-display:block;src:url(../fonts/EBGaramond-var.ttf) format("truetype");font-weight:400 800;font-style:normal}
@font-face{font-family:"EB Garamond";font-display:block;src:url(../fonts/EBGaramond-Italic-var.ttf) format("truetype");font-weight:400 800;font-style:italic}
@font-face{font-family:NewCM;font-display:block;src:url(../fonts/NewCM10-Book.otf) format("opentype");font-weight:400;font-style:normal}
@font-face{font-family:NewCM;font-display:block;src:url(../fonts/NewCM10-Bold.otf) format("opentype");font-weight:700;font-style:normal}
@font-face{font-family:NewCM;font-display:block;src:url(../fonts/NewCM10-BookItalic.otf) format("opentype");font-weight:400;font-style:italic}
@font-face{font-family:Inter;font-display:block;src:url(../fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-style:normal}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;overflow:hidden;height:100%}
p,h1,h2,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
img{display:block}

/* ---- Stage: 1920x1080, scaled to fit with letterboxing --------------------------------------- */
#viewport{position:fixed;inset:0;background:#000}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;display:none;overflow:hidden;color:#fff;font-family:NewCM,serif;font-variant-numeric:lining-nums;
  font-feature-settings:"kern";background:#000}
.slide.current{display:block}
/* Load gate: until fonts, formulas and images are ready (js/deck.js settle), only the night shows. */
html:not(.typeset) .slide{opacity:0 !important}
html.revealing .slide.current{animation:xfade .8s ease-out both}
.slide.fading-out{display:block;z-index:0}
.slide.current{z-index:1}
@keyframes xfade{from{opacity:0}to{opacity:1}}
/* The audience window shows slides only: no cursor, no controls, no focus rings. */
body.mode-audience, body.mode-audience *{cursor:none !important}
body.mode-audience.pointer, body.mode-audience.pointer *{cursor:default !important}
/* Hover controls (js/controls.js): only while the mouse moves; never on a key. */
#controls{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px;
  background:rgba(18,18,20,.86);border:1px solid rgba(255,255,255,.14);border-radius:8px;font:500 15px/1 Inter,sans-serif;
  color:#ddd;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
#controls button,#picker button{font:inherit;color:inherit;background:none;border:0;border-radius:5px;padding:8px 12px;cursor:pointer !important}
#controls button:hover,#picker button:hover{background:rgba(255,255,255,.12);color:#fff}
#controls button[data-a=prev],#controls button[data-a=next]{font-size:24px;padding:3px 12px 5px}
#controls .where{font-variant-numeric:tabular-nums;min-width:84px}
#controls .sep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 4px}
body.pointer #controls{opacity:1;pointer-events:auto}
#picker{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);width:min(1180px,94vw);max-height:62vh;overflow:auto;
  display:none;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2px;padding:6px;background:rgba(18,18,20,.92);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;font:400 14px/1.3 Inter,sans-serif;color:#ccc;z-index:60}
body.pointer #picker.open{display:grid}
#picker button{text-align:left;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#picker button b{display:inline-block;min-width:30px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
#picker button.on{background:rgba(255,255,255,.2);color:#fff}
#picker button.bk{color:#888}
video::-webkit-media-controls{display:none !important}
/* Q&A: the backup list on a page card, over the stage (js/deck.js); the slide under it is hidden. */
#qa{position:absolute;inset:0;display:none;z-index:40}
body.qa #qa{display:block}
body.qa .slide.current{visibility:hidden}
#qa ol{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto);
  grid-template-columns:1fr 1fr;gap:34px 80px}
#qa li{display:flex;gap:28px;align-items:baseline;font-family:"EB Garamond",serif;font-size:46px;line-height:1.15;cursor:pointer}
#qa li .n{flex:none;font-family:Inter,sans-serif;font-size:34px;font-weight:500;min-width:30px;font-variant-numeric:tabular-nums}
#qa li.on .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
body.mode-qa-all .slide{display:block}

/* Builds: hidden elements keep their space, so nothing shifts when a build lands. */
.b-hide{visibility:hidden !important}

/* ---- The sky: the invitation site's own WebGL renderer (sky/, unmodified) in one iframe behind the slide
   stack, loaded once and never reloaded. Page slides show it in the margins; title and closing show the child;
   statement and section slides lay a night panel over the card area; films cover it and pause it. */
#stage > iframe.sky{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;pointer-events:none}
#stage{background:var(--night)}

/* ---- Page slides: a white card in the night -------------------------------------------------- */
.slide.page{background:transparent}
.card{position:absolute;left:var(--edge);right:var(--edge);top:var(--edge);bottom:var(--band);background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;padding:56px calc(var(--rail) - var(--edge)) 36px}
.card .title{font-family:"EB Garamond",serif;font-weight:var(--title-weight);font-variant-numeric:lining-nums;font-size:var(--title-size);line-height:1.08;letter-spacing:var(--title-tracking);
  max-width:1500px;text-wrap:balance;flex:none}
.card .title::after{content:"";display:block;width:var(--title-rule-w);height:var(--title-rule-h);background:#000;margin-top:var(--title-rule-gap)}
.card .body{position:relative;flex:1;margin-top:40px;min-height:0}

/* The band: logos left, number right, white, small. */
.band{position:absolute;left:var(--rail);right:var(--rail);bottom:0;height:var(--band);display:flex;align-items:center;justify-content:space-between;color:#fff}
.marks{display:flex;align-items:center;gap:var(--logo-gap)}
.marks img{flex:none;filter:brightness(0) invert(1)}
.m-ugent{height:var(--logo-ugent)}
.m-fea{height:var(--logo-fea)}
.m-imec{height:var(--logo-imec)}
.m-waves{height:var(--logo-waves)}
.num{font-family:Inter,sans-serif;font-size:var(--num-size);font-weight:500;letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1}
.num.typing{opacity:.6}

/* ---- Night slides: title, statement, closing ------------------------------------------------- */
.slide.night{background:transparent}
.night .block{position:absolute;left:var(--rail)}
.night .lead{font-family:"EB Garamond",serif;font-size:46px;line-height:1.2}
.night h1{font-family:"EB Garamond",serif;font-weight:400;font-size:96px;line-height:1.02;letter-spacing:-.012em;margin-top:18px}
.night .name{font-size:40px;margin-top:56px;line-height:1.3}
.night .sup{font-size:32px;line-height:1.4;margin-top:6px}
.night.title-slide .block{top:310px}
.night.title-slide h1{font-size:80px}   /* clears the live child on the right */
/* The ambient title: the block and the logos over the running card loop; the title fades before film 01. */
.slide.ambient .block,.slide.ambient .band{z-index:2}
.slide.ambient .block,.slide.ambient .band{transition:opacity var(--lead,1000ms) ease}
.slide.ambient.lead-out .block,.slide.ambient.lead-out .band{opacity:0}
.night .name .u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.night.closing .block{top:330px}
.night.closing h1{font-size:176px;letter-spacing:-.02em;margin-top:0}
.night.closing .name{margin-top:44px}
.night.closing .qr{display:block;width:200px;height:200px;margin-top:28px;background:#fff;border-radius:6px}
.night.statement::before,.night.section::before{content:"";position:absolute;left:var(--edge);right:var(--edge);top:var(--edge);bottom:var(--band);background:#0e0e0f}   /* matches the renderer's own black */
.night.statement .block{top:190px}
.night.statement .big{font-family:"EB Garamond",serif;font-size:320px;line-height:1;letter-spacing:-.02em;margin-left:-14px}
.night.statement .line{font-size:76px;line-height:1.3;margin-top:6px}
.night.statement .big + .line{margin-top:56px}
.night.section .block{top:330px}
.night.section .big{font-family:"EB Garamond",serif;font-size:200px;line-height:1;letter-spacing:-.02em;margin-left:-8px}
.night.section .line{font-size:50px;line-height:1.3;margin-top:40px}

/* ---- Video slides: full bleed on black ------------------------------------------------------- */
.slide.video{background:#000}
.slide.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.film-tag{display:none;font-family:Inter,sans-serif;position:absolute;left:48px;bottom:40px;font-size:30px;line-height:1.35;color:#fff;opacity:.5;max-width:1400px}
.film-tag b{font-weight:600}
body.mode-preview .film-tag{display:block}
.film-todo{position:absolute;left:var(--rail);right:var(--rail);top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-family:"EB Garamond",serif}
.film-todo .t{font-size:var(--body-size);font-weight:600;letter-spacing:.01em}
.film-todo .d{font-size:var(--body-size);line-height:1.3;margin:24px auto 0;max-width:1300px;opacity:.75;text-wrap:balance}
body.mode-preview .film-todo{display:none}

/* ---- Figures ---------------------------------------------------------------------------------- */
.fig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fig > svg{width:100%;height:100%;display:block}
.fig > img{width:100%;height:100%;object-fit:contain}

/* ---- Equations (LuaLaTeX SVGs, black on white, large) ------------------------------------------------- */
.boxed{outline:3px solid #000;outline-offset:10px}

/* ---- Text slides: lists at body size, marker chosen in config ------------------------------- */
.lines{position:absolute;left:0;top:24px;width:1300px}
.lines li{font-size:var(--body-size);line-height:var(--body-lh);margin:0 0 var(--item-gap);padding-left:46px;position:relative;text-wrap:pretty}
html[data-marker=rule] .lines li::before{content:"";position:absolute;left:0;top:.68em;width:20px;height:2.5px;background:#000}
html[data-marker=dash] .lines li::before{content:"\2013";position:absolute;left:0;top:0}
/* square: centred on the x-height (vertical-align:middle = baseline + half the x-height) */
html[data-marker=square] .lines li::before{content:"";display:inline-block;vertical-align:middle;width:12px;height:12px;margin:0 32px 0 -44px;background:#000;position:relative;top:-.1em}
html[data-marker=num] .lines{counter-reset:n}
html[data-marker=num] .lines li{counter-increment:n}
html[data-marker=num] .lines li::before{content:counter(n);position:absolute;left:0;top:0;font-family:"EB Garamond";font-weight:500;font-size:1.05em}
html[data-marker=none] .lines li{padding-left:0;margin-bottom:38px}
.foot{position:absolute;right:0;bottom:0;font-size:var(--body-size);line-height:var(--body-lh)}

/* Figures still to rebuild as golden figures. */
.todo-tag{position:absolute;right:24px;top:20px;font:600 26px/1 Inter,sans-serif;color:#c8102e;border:2px solid #c8102e;padding:8px 12px;z-index:2}

/* Blackout (B or . key) and the slide-number entry. */
#blackout{position:fixed;inset:0;background:#000;display:none;z-index:50}
body.black #blackout{display:block}

/* Formulas: LuaLaTeX SVGs (tools/build_tex.py), one box on the baseline, build states stacked. */
.tex{display:inline-block;position:relative;line-height:0}
.tex img{position:absolute;left:0;top:0;display:block}
.tex-missing{display:inline-block;font:400 28px/1.3 NewCM,serif;color:#c8102e;border:2px dashed #c8102e;padding:6px 10px;white-space:normal;max-width:1500px}
/* NewCM draws U+00A0 half an em wide: keep pairs together with nowrap and an ordinary space instead. */
.nw{white-space:nowrap}
.slide.ambient .film-tag{display:none !important}