/* Layout: a 16:9 stage per slide, sized by one unit (--u = 1% of stage width) so the
   deck scales from laptop to projector; below 860px wide the slides stack as a scroll page.
   Palette and type follow the Natal 2026 brand guideline (brand.webp). */
:root{
  --night:#0c1322;
  --night-2:#16213a;
  --navy:#1E2A44;
  --cream:#F7E9D7;
  --gold:#D4AF7C;
  --gold-hi:#ECD3A6;
  --red:#7A1E1E;
  --green:#1B3A2F;
  --ink:#2a1a14;

  --f-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-body:'Montserrat','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --f-script:'Allura','Snell Roundhand','Brush Script MT',cursive;

  --u:min(1vw,1.7778vh);
  --fs-xs:calc(var(--u)*.84);
  --fs-s:calc(var(--u)*1.02);
  --fs-b:calc(var(--u)*1.18);
  --fs-l:calc(var(--u)*1.42);
  --fs-h3:calc(var(--u)*1.5);
  --fs-h2:calc(var(--u)*3.3);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--cream);font-family:var(--f-body);font-size:var(--fs-b);line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
kbd{font-family:var(--f-body);font-size:.85em;border:1px solid currentColor;border-radius:3px;padding:0 .35em;opacity:.85}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.i-star{width:calc(var(--u)*1.1);height:calc(var(--u)*1.45);fill:var(--accent);flex:none}

/* ---------- slide tones ---------- */
.slide{--bg:var(--night);--fg:var(--cream);--dim:rgba(247,233,215,.68);--line:rgba(212,175,124,.24);--card:rgba(247,233,215,.05);--accent:var(--gold);--accent-ink:var(--night)}
.slide.night{background:radial-gradient(120% 90% at 85% 0%,var(--night-2) 0%,var(--night) 60%)}
.slide.paper{--bg:var(--cream);--fg:var(--ink);--dim:rgba(42,26,20,.7);--line:rgba(122,30,30,.2);--card:#fffaf3;--accent:var(--red);--accent-ink:var(--cream);background:var(--bg)}
.slide.crimson{--bg:var(--red);--fg:var(--cream);--dim:rgba(247,233,215,.74);--line:rgba(236,211,166,.3);--card:rgba(0,0,0,.14);--accent:var(--gold-hi);background:radial-gradient(110% 100% at 100% 0%,#8f2a24 0%,var(--red) 55%,#5c1515 100%)}
.slide.night::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 33% 72%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 12%,#ffe9c488 50%,transparent 51%),radial-gradient(1px 1px at 76% 44%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 91% 83%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 22% 91%,#fff4 50%,transparent 51%),radial-gradient(1.5px 1.5px at 66% 63%,#ffe9c466 50%,transparent 51%),radial-gradient(1px 1px at 47% 37%,#fff4 50%,transparent 51%);
  background-size:520px 420px}

/* ---------- deck (slide mode) ---------- */
.deck{position:fixed;inset:0}
.slide{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.frame{position:relative;z-index:1;width:calc(var(--u)*100);height:calc(var(--u)*56.25);padding:calc(var(--u)*5.4) calc(var(--u)*6) calc(var(--u)*6.4)}
.notes{display:none}
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--u)*1.2))}to{opacity:1;transform:none}}
.slide.is-active .frame>*{animation:rise .7s var(--ease) both}
.slide.is-active .frame>*:nth-child(2){animation-delay:.08s}
.slide.is-active .frame>*:nth-child(3){animation-delay:.16s}
.slide.is-active .frame>*:nth-child(4){animation-delay:.24s}
.slide.is-active .frame>*:nth-child(5){animation-delay:.32s}

/* ---------- shared type ---------- */
.kicker{font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:calc(var(--u)*1.1)}
h2{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h3{font-size:var(--fs-b);font-weight:600;line-height:1.3;text-wrap:balance}
.lead{font-size:var(--fs-l);line-height:1.5;color:var(--dim);margin-top:calc(var(--u)*1.3);max-width:58ch;text-wrap:pretty}
.muted{color:var(--dim);font-size:var(--fs-s)}
.small{font-size:var(--fs-xs)}
.tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:calc(var(--u)*.8)}
.pills{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6)}
.pills li{font-size:var(--fs-s);padding:calc(var(--u)*.35) calc(var(--u)*.95);border:1px solid var(--line);border-radius:99px;white-space:nowrap}
.pills.small li{font-size:var(--fs-xs)}
.facts{display:grid;gap:calc(var(--u)*1.1)}
.facts>div{display:grid;grid-template-columns:calc(var(--u)*11) 1fr;gap:calc(var(--u)*1.4);padding-bottom:calc(var(--u)*1.1);border-bottom:1px solid var(--line)}
.facts dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-top:.2em}
.facts dd{font-size:var(--fs-b)}
.star-list{display:grid;gap:calc(var(--u)*1.9);margin-top:calc(var(--u)*3)}
.star-list li{display:flex;gap:calc(var(--u)*1.4);align-items:flex-start}
.star-list .i-star{margin-top:.2em}
.star-list h3{font-size:var(--fs-l);font-family:var(--f-display);font-weight:600}
.star-list p{color:var(--dim);margin-top:calc(var(--u)*.3)}
.star-list.compact{gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*2.4)}
.badge{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--night);padding:.15em .6em;border-radius:3px;margin-right:.5em}
.sample-flag{position:absolute;left:calc(var(--u)*1);bottom:calc(var(--u)*1);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;background:rgba(12,19,34,.82);color:var(--gold-hi);padding:.3em .8em;border-radius:99px}
.caption{font-size:var(--fs-s);color:var(--dim);margin-top:calc(var(--u)*1)}
.caption b{color:var(--fg);font-weight:600}
.inline-link{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;font-size:inherit}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:calc(var(--u)*.8);font-size:var(--fs-s);font-weight:600;letter-spacing:.02em;padding:calc(var(--u)*.9) calc(var(--u)*1.6);border-radius:4px;transition:transform .2s var(--ease),background .2s,border-color .2s;text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold-hi);color:#231a10}
.btn-ghost{border:1px solid rgba(247,233,215,.5);color:var(--cream);background:rgba(12,19,34,.3)}
.btn-line{border:1px solid var(--line);color:var(--fg)}
.btn-line:hover{border-color:var(--accent)}
.btn.small{font-size:var(--fs-xs);padding:.55em 1em}

/* zoomable image buttons */
.zoom{position:relative;display:block;overflow:hidden;border-radius:4px;background:#0006;width:100%}
.zoom img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.zoom:hover img{transform:scale(1.03)}
.zoom-hint{position:absolute;right:calc(var(--u)*1);bottom:calc(var(--u)*1);display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-xs);font-weight:600;background:rgba(12,19,34,.8);color:var(--cream);padding:.35em .8em;border-radius:99px}

/* ---------- top bar & controls ---------- */
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*1.6 + env(safe-area-inset-top,0px)) max(calc(var(--u)*2.2),env(safe-area-inset-right,0px)) 0 max(calc(var(--u)*2.2),env(safe-area-inset-left,0px));pointer-events:none;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--tone-fg,var(--cream));transition:color .4s}
.topbar>*{pointer-events:auto}
.lockup{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;opacity:.85}
.lockup b{font-weight:700}
.lockup-star{width:.9em;height:1.2em;fill:var(--gold)}
.topbar-chapter{opacity:.7}
body[data-tone="paper"]{--tone-fg:var(--ink)}
body[data-slide="1"] .topbar-chapter{opacity:0}

.controls{position:fixed;z-index:30;right:max(calc(var(--u)*1.8),env(safe-area-inset-right,0px));bottom:calc(var(--u)*1.6 + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:calc(var(--u)*.35);padding:calc(var(--u)*.35);border-radius:99px;background:rgba(12,19,34,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(212,175,124,.22);color:var(--cream);transition:opacity .4s}
.ctl{display:grid;place-items:center;width:calc(var(--u)*2.7);height:calc(var(--u)*2.7);min-width:30px;min-height:30px;border-radius:50%;transition:background .2s}
.ctl svg{width:55%;height:55%;fill:none}
.ctl:hover,.ctl[aria-pressed="true"]{background:rgba(212,175,124,.2)}
.ctl[aria-pressed="true"]{color:var(--gold-hi)}
.ctl-sep{width:1px;height:calc(var(--u)*1.6);background:rgba(247,233,215,.2);margin:0 calc(var(--u)*.3)}
.progress{width:calc(var(--u)*8);height:2px;background:rgba(247,233,215,.18);border-radius:2px;overflow:hidden;margin:0 calc(var(--u)*.5)}
.progress span{display:block;height:100%;width:0;background:var(--gold);transition:width .5s var(--ease)}
.counter{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;letter-spacing:.06em;min-width:5.2ch;text-align:center}
body.is-idle .controls,body.is-idle .topbar{opacity:0}
body.is-idle{cursor:none}

.notes-panel{position:fixed;z-index:25;left:max(calc(var(--u)*2),env(safe-area-inset-left,0px));bottom:calc(var(--u)*1.6 + env(safe-area-inset-bottom,0px));max-width:min(62ch,calc(var(--u)*60));padding:calc(var(--u)*1.2) calc(var(--u)*1.6);background:rgba(12,19,34,.9);border:1px solid rgba(212,175,124,.3);border-radius:6px;color:var(--cream);font-size:var(--fs-s);line-height:1.5}
.np-label{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.4em}
.toast{position:fixed;z-index:60;left:50%;top:calc(var(--u)*2 + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--cream);color:var(--ink);font-size:var(--fs-s);padding:.7em 1.2em;border-radius:6px;box-shadow:0 10px 40px #0008;max-width:min(90vw,60ch)}

/* ---------- 1 · cover ---------- */
.cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,13,25,.9) 0%,rgba(8,13,25,.62) 40%,rgba(8,13,25,.05) 74%),linear-gradient(0deg,rgba(8,13,25,.75) 0%,transparent 38%)}
.cover-frame{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*2.2)}
.cover .kicker{color:var(--gold-hi);margin:0}
.cover-title{display:flex;flex-direction:column;font-weight:400}
.ct-a{font-family:var(--f-display);font-weight:600;font-size:calc(var(--u)*4.3);line-height:1.04;letter-spacing:-.015em;max-width:12em}
.ct-b{font-family:var(--f-script);font-size:calc(var(--u)*9.4);line-height:.9;color:var(--gold-hi);margin-top:calc(var(--u)*.4);text-shadow:0 0 calc(var(--u)*3) rgba(236,211,166,.25)}
.cover-facts{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2) calc(var(--u)*3.2);padding-top:calc(var(--u)*1.6);border-top:1px solid rgba(212,175,124,.35);max-width:calc(var(--u)*62)}
.cover-facts dt{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cover-facts dd{font-size:var(--fs-l);font-weight:500;margin-top:.15em}
.cover-actions{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1)}
.cover-hint{position:absolute;z-index:1;left:max(calc(var(--u)*2.2),env(safe-area-inset-left,0px));bottom:calc(var(--u)*2);font-size:var(--fs-xs);color:rgba(247,233,215,.6);letter-spacing:.04em}

/* ---------- 2 · agenda ---------- */
.agenda{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:calc(var(--u)*6);align-items:center}
.agenda-list{counter-reset:none;border-top:1px solid var(--line)}
.agenda-list button{width:100%;display:grid;grid-template-columns:calc(var(--u)*4) 1fr auto;align-items:baseline;gap:calc(var(--u)*1);padding:calc(var(--u)*1.05) 0;border-bottom:1px solid var(--line);text-align:left;transition:color .2s,padding .3s var(--ease)}
.agenda-list button:hover{color:var(--gold-hi);padding-left:calc(var(--u)*.6)}
.ag-n{font-family:var(--f-display);color:var(--accent);font-size:var(--fs-l)}
.ag-t{font-family:var(--f-display);font-size:calc(var(--u)*1.75);line-height:1.2}
.ag-p{font-size:var(--fs-xs);color:var(--dim);letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* ---------- 3 · evaluation ---------- */
.eval{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-rows:auto 1fr auto;column-gap:calc(var(--u)*5);row-gap:calc(var(--u)*2.4)}
.eval-head{grid-column:1;grid-row:1}
.eval-main{grid-column:1;grid-row:2/4;align-self:end;background:var(--red);color:var(--cream);padding:calc(var(--u)*2.4) calc(var(--u)*2.6);border-radius:4px}
.eval-main .tag{color:var(--gold-hi)}
.eval-main h3{font-family:var(--f-display);font-size:calc(var(--u)*2.1);line-height:1.15}
.eval-main p{margin-top:calc(var(--u)*.8);color:rgba(247,233,215,.8)}
.eval-points{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2.6) calc(var(--u)*3);align-content:center}
.eval-points li{border-top:2px solid var(--red);padding-top:calc(var(--u)*1.2)}
.eval-points h3{font-family:var(--f-display);font-size:var(--fs-h3);font-weight:600}
.eval-points p{color:var(--dim);margin-top:calc(var(--u)*.5)}
.eval-keep{grid-column:2;grid-row:3;display:flex;align-items:center;gap:calc(var(--u)*1.6);flex-wrap:wrap;padding-top:calc(var(--u)*1.4);border-top:1px solid var(--line)}
.eval-keep .tag{margin:0}
.eval-keep .pills li{background:var(--green);color:var(--cream);border-color:var(--green)}

/* ---------- 4 · vision ---------- */
.vision{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*5);align-items:center}
.vision-img{height:100%;border-radius:4px;overflow:hidden}
.vision-img img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}

/* ---------- 5 · options ---------- */
.options{display:flex;flex-direction:column;gap:calc(var(--u)*2.2)}
.option-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*1)}
.option-tab{display:flex;flex-direction:column;gap:calc(var(--u)*.4);text-align:left;padding:calc(var(--u)*1.3) calc(var(--u)*1.4);border:1px solid var(--line);border-radius:4px;background:var(--card);transition:background .25s,border-color .25s,color .25s}
.option-tab:hover{border-color:var(--red)}
.ot-n{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ot-n em{font-style:normal;font-weight:600;letter-spacing:.06em;margin-left:.5em;padding:.1em .5em;border-radius:99px;background:var(--gold);color:var(--ink)}
.ot-t{font-family:var(--f-display);font-size:calc(var(--u)*1.45);line-height:1.2}
.ot-d{font-size:var(--fs-s);color:var(--dim);font-variant-numeric:tabular-nums}
.option-tab.is-active{background:var(--red);border-color:var(--red);color:var(--cream)}
.option-tab.is-active .ot-n{color:var(--gold-hi)}
.option-tab.is-active .ot-d{color:rgba(247,233,215,.75)}
.option-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:calc(var(--u)*4);padding-top:calc(var(--u)*1.6);border-top:1px solid var(--line);flex:1}
.option-panel h3{font-family:var(--f-display);font-size:calc(var(--u)*2);line-height:1.2}
.option-panel .op-intro{color:var(--dim);margin-top:calc(var(--u)*.8)}
.op-bar{display:flex;height:calc(var(--u)*3.4);border-radius:3px;overflow:hidden;font-size:var(--fs-xs);font-weight:600;color:var(--cream)}
.op-bar span{display:flex;align-items:center;padding:0 calc(var(--u)*.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-foot{font-size:var(--fs-xs);color:var(--dim);margin-top:calc(var(--u)*.6)}
.op-pros{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);margin-top:calc(var(--u)*1.6)}
.op-pros b{display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.3em}
.op-pros p{font-size:var(--fs-s)}

/* ---------- 6 · timing ---------- */
.timing{display:flex;flex-direction:column;gap:calc(var(--u)*2.6)}
.ruler{position:relative}
.ruler-track{display:flex;height:calc(var(--u)*6.2);border-radius:4px;overflow:hidden;gap:2px}
.seg{width:var(--w);display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--u)*1.3);min-width:0}
.seg b{font-family:var(--f-display);font-weight:600;font-size:var(--fs-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg span{font-size:var(--fs-xs);opacity:.8;font-variant-numeric:tabular-nums}
.seg-a{background:var(--red)}
.seg-b{background:var(--gold);color:var(--night)}
.seg-c{background:var(--green)}
.seg-open{background:repeating-linear-gradient(135deg,rgba(212,175,124,.24) 0 6px,rgba(212,175,124,.08) 6px 12px);box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-hi)}
.ruler-ends{display:flex;justify-content:space-between;margin-top:calc(var(--u)*.7);font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.dur-lists{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:calc(var(--u)*3)}
.dur-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.55)}
.dur-chips li{font-size:var(--fs-s);padding:calc(var(--u)*.3) calc(var(--u)*.9);border-radius:99px;background:rgba(122,30,30,.55);border:1px solid rgba(212,175,124,.25)}
.dur-chips b{color:var(--gold-hi);font-weight:600;margin-left:.25em}
.dur-chips.is-open li{background:none;border:1px dashed var(--line);color:var(--dim);font-style:italic}
.timing-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*3);margin-top:auto;padding-top:calc(var(--u)*1.6);border-top:1px solid var(--line)}
.timing-stats div{display:flex;align-items:baseline;gap:calc(var(--u)*1.1)}
.timing-stats b{font-family:var(--f-display);font-size:calc(var(--u)*3.2);font-weight:600;color:var(--gold-hi);font-variant-numeric:tabular-nums;line-height:1}
.timing-stats span{font-size:var(--fs-s);color:var(--dim);line-height:1.35}

/* ---------- 7–8 · rundown ---------- */
.rundown{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:calc(var(--u)*3);row-gap:calc(var(--u)*1.6);align-items:start}
.rundown-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*2)}
.rundown-head .kicker{order:2;margin:0}
.rd-list{border-top:1px solid var(--line)}
.rd-list li{display:grid;grid-template-columns:calc(var(--u)*3.4) minmax(0,1fr) auto;align-items:center;column-gap:calc(var(--u)*1.4);row-gap:calc(var(--u)*.45);padding:calc(var(--u)*.62) 0;border-bottom:1px solid var(--line)}
.rd-n{font-family:var(--f-display);font-size:calc(var(--u)*1.95);color:var(--accent);text-align:center;font-variant-numeric:tabular-nums}
.rd-main h3{font-family:var(--f-display);font-size:calc(var(--u)*1.6);font-weight:600}
.rd-main p{font-size:var(--fs-s);color:var(--dim);margin-top:.1em}
.rd-dur{justify-self:end;font-family:var(--f-display);font-size:calc(var(--u)*1.95);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.rd-dur.is-open{font-family:var(--f-body);font-size:var(--fs-xs);font-style:italic;color:var(--dim);border:1px dashed var(--line);border-radius:99px;padding:.25em .8em;white-space:nowrap}
.rd-refs{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:calc(var(--u)*.45)}
.rd-refs:empty{display:none}
.rd-ref{display:inline-flex;align-items:center;gap:.45em;max-width:100%;font-size:var(--fs-xs);font-weight:600;padding:.5em .85em;border-radius:99px;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s,border-color .2s}
.rd-ref .i{width:1em;height:1em;fill:var(--gold)}
button.rd-ref:hover{background:rgba(212,175,124,.16);border-color:var(--gold)}
.rd-ref[aria-pressed="true"]{background:rgba(212,175,124,.26);border-color:var(--gold-hi);color:var(--cream)}
.rd-player{position:sticky;top:0;min-width:0}
.rd-player .yt-poster{bottom:calc(var(--u)*1.3)}
.rd-player .yt-poster b{font-size:calc(var(--u)*1.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-player .yt-play svg{width:calc(var(--u)*5.2);height:calc(var(--u)*5.2);padding:calc(var(--u)*1.3)}
.rd-player .caption a{color:var(--gold-hi)}
.rd-dur.is-dash{color:var(--dim);font-family:var(--f-body);font-size:var(--fs-s)}
.rd-tag{font-family:var(--f-body)!important;font-size:var(--fs-xs)!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rd-music{background:linear-gradient(90deg,rgba(27,58,47,.55),transparent 75%)}
.rd-word{background:linear-gradient(90deg,rgba(212,175,124,.16),transparent 70%)}
.rd-word .rd-n .i-star{margin:0 auto;fill:var(--gold-hi)}
.rd-word .rd-main h3{color:var(--gold-hi)}

/* ---------- model 3D ---------- */
.model3d{display:flex;flex-direction:column;gap:calc(var(--u)*1.6);padding-bottom:calc(var(--u)*5.2)}
.m3-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--u)*4);align-items:end}
.m3-head .kicker{margin-bottom:calc(var(--u)*1.1)}
.m3-head .lead{margin:0;font-size:var(--fs-b);max-width:none}
.m3-head .lead b{color:var(--fg);font-weight:600}
.m3-links{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.8);margin-top:calc(var(--u)*1.1)}
.m3-head .m3-open{margin-top:calc(var(--u)*1.1)}
.m3-links .m3-open{margin-top:0}
.m3-stage{position:relative;flex:1;min-height:0;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#070b14}
.m3-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease)}
.m3-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s var(--ease)}
.m3-stage.is-loaded iframe{opacity:1}
.m3-stage.is-loaded .m3-poster,.m3-stage.is-loaded .m3-wait{opacity:0;pointer-events:none}
.m3-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:var(--fs-s);color:var(--cream);background:rgba(7,11,20,.72);border:1px solid var(--line);padding:.6em 1.2em;border-radius:99px;transition:opacity .4s}
.m3-mobile{display:none}
.m3-note{margin-top:calc(var(--u)*-.4)}

/* ---------- 9 · music ---------- */
.music{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:calc(var(--u)*5);align-items:center}
.yt-inline{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000;border:1px solid var(--line)}
.yt-inline img{width:100%;height:100%;object-fit:cover;opacity:.55}
.yt-poster{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*1.8);right:calc(var(--u)*2);pointer-events:none}
.yt-poster small{display:block;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.yt-poster b{display:block;font-family:var(--f-display);font-weight:600;font-size:calc(var(--u)*2.3);line-height:1.1;color:var(--cream);margin-top:.2em}
.yt-poster span{display:block;font-size:var(--fs-s);color:rgba(247,233,215,.75);margin-top:.3em}
.yt-inline iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;display:grid;place-items:center}
.yt-play svg{width:calc(var(--u)*6.5);height:calc(var(--u)*6.5);min-width:44px;min-height:44px;padding:calc(var(--u)*1.6);fill:var(--night);background:var(--gold-hi);border-radius:50%;box-shadow:0 0 0 calc(var(--u)*.8) rgba(236,211,166,.25);transition:transform .25s var(--ease)}
.yt-play:hover svg{transform:scale(1.07)}

/* ---------- 10, 23 · video grids ---------- */
.playlist{display:flex;flex-direction:column;gap:calc(var(--u)*2.2)}
.yt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*2) calc(var(--u)*1.6)}
.yt-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.yt-grid.three .yt-thumb{aspect-ratio:16/8}
.yt-card{display:flex;flex-direction:column;gap:calc(var(--u)*.7);text-align:left;width:100%}
.yt-thumb{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--night));border:1px solid var(--line)}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.yt-thumb .yt-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:var(--fs-s);color:var(--dim);padding:1em;text-align:center}
.yt-thumb img+.yt-fallback{display:none}
.yt-thumb .yt-badge{position:absolute;left:calc(var(--u)*.7);bottom:calc(var(--u)*.7);display:inline-flex;align-items:center;gap:.35em;font-size:var(--fs-xs);font-weight:600;background:rgba(12,19,34,.85);padding:.3em .7em;border-radius:99px;color:var(--cream)}
.yt-thumb .yt-badge .i{width:.95em;height:.95em;fill:var(--gold)}
.yt-card:hover .yt-thumb img{transform:scale(1.04)}
.yt-card b{font-size:var(--fs-s);font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-card span.ch{font-size:var(--fs-xs);color:var(--dim)}

/* ---------- 11 · film ---------- */
.film{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:calc(var(--u)*4);align-items:center}
.star-list.film-options{margin-top:0;gap:calc(var(--u)*1.3)}
.film-copy{display:flex;flex-direction:column;gap:calc(var(--u)*1.8);align-items:flex-start}
.film-copy .kicker{margin-bottom:calc(var(--u)*-.8)}
.film-copy .facts{width:100%}
.film-copy .facts>div{grid-template-columns:calc(var(--u)*8.5) 1fr}

/* ---------- 12 · venue ---------- */
.venue{display:flex;flex-direction:column;gap:calc(var(--u)*2.4)}
.venue-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*5);align-items:end}
.venue-head .lead{margin:0}
.venue-head .kicker{margin-bottom:calc(var(--u)*1.1)}
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*2.2)}
.zones .zoom{height:calc(var(--u)*18)}
.zones h3{font-family:var(--f-display);font-size:var(--fs-h3);margin-top:calc(var(--u)*1.1);display:flex;align-items:baseline;gap:.6em}
.zones h3 span{font-family:var(--f-body);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.zones p{color:var(--dim);font-size:var(--fs-s);margin-top:.3em}
.venue-note{display:flex;align-items:center;gap:calc(var(--u)*.8);font-size:var(--fs-s);font-weight:600;margin-top:auto}

/* ---------- 13 · compare ---------- */
.compare{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*2.2)}
.pairs li{display:grid;grid-template-rows:calc(var(--u)*12) calc(var(--u)*16.5) auto;gap:calc(var(--u)*.8);min-height:0}
.pairs .zoom{height:100%}
.pairs .zoom span{position:absolute;left:calc(var(--u)*.8);top:calc(var(--u)*.8);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3em .75em;border-radius:99px}
.pair-real span{background:rgba(247,233,215,.88);color:var(--ink)}
.pair-concept span{background:var(--gold);color:var(--night);top:auto!important;bottom:calc(var(--u)*.8)}
.pair-concept img{object-position:center top}
.pairs h3{font-family:var(--f-display);font-size:var(--fs-h3)}

/* ---------- 14 · decor ---------- */
.decor{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:calc(var(--u)*4);align-items:center}
.decor-main{aspect-ratio:4/3}
.decor-copy{display:flex;flex-direction:column;gap:calc(var(--u)*1.4)}
.decor-copy .kicker{margin:0}
.decor-copy>p{color:var(--dim)}
.decor-more{align-self:flex-start}
.safety{font-size:var(--fs-xs);line-height:1.5;padding:calc(var(--u)*1) calc(var(--u)*1.2);border-left:3px solid var(--red);background:var(--card)}

/* ---------- 15 · identity ---------- */
.identity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:calc(var(--u)*4);align-items:center}
.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--u)*1);margin-top:calc(var(--u)*2.2)}
.palette li{display:flex;flex-direction:column;gap:.2em}
.palette i{display:block;aspect-ratio:1;border-radius:50%;background:var(--c);border:1px solid rgba(42,26,20,.15);margin-bottom:.4em;max-width:calc(var(--u)*6.5)}
.palette b{font-size:var(--fs-xs);font-weight:600}
.palette code{font-size:var(--fs-xs);color:var(--dim);font-family:var(--f-body);letter-spacing:.04em}
.rules{display:grid;gap:calc(var(--u)*.9);margin-top:calc(var(--u)*2.2)}
.rules>div{display:grid;grid-template-columns:calc(var(--u)*7) 1fr;gap:calc(var(--u)*1.2);font-size:var(--fs-s)}
.rules dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);padding-top:.2em}
.f-play{font-family:var(--f-display);font-weight:700}.f-mont{font-weight:600}.f-allura{font-family:var(--f-script);font-size:1.5em;line-height:1}
.identity-board{aspect-ratio:1448/1086}

/* ---------- 16 · attire ---------- */
.attire{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:calc(var(--u)*4.5);align-items:center}
.attire-img{aspect-ratio:810/421}
.attire-copy{display:flex;flex-direction:column;gap:calc(var(--u)*1.8)}
.attire-copy .kicker{margin-bottom:calc(var(--u)*-.8)}

/* ---------- 17 · jersey ---------- */
.jersey{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:calc(var(--u)*4);align-items:center}
.jersey-copy{display:flex;flex-direction:column;gap:calc(var(--u)*1.4)}
.jersey-copy .kicker{margin:0}
.jersey-tabs{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6);margin-top:calc(var(--u)*.6)}
.jersey-tabs button{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-xs);font-weight:600;padding:.5em .9em .5em .55em;border:1px solid var(--line);border-radius:99px;transition:border-color .2s,background .2s}
.jersey-tabs button i{width:1.1em;height:1.1em;border-radius:50%;background:var(--c);border:1px solid rgba(247,233,215,.35)}
.jersey-tabs button[aria-selected="true"]{border-color:var(--gold);background:rgba(212,175,124,.16)}
#jerseyName{font-family:var(--f-display);font-size:calc(var(--u)*2.2);font-weight:600;color:var(--gold-hi)}
#jerseyDesc{color:var(--dim)}
.jersey-img{aspect-ratio:4/3;background:var(--cream)}
.jersey-img img{object-fit:contain}

/* ---------- 18 · market ---------- */
.market{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:calc(var(--u)*4);align-items:center}
.market-list{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.8) calc(var(--u)*2.4);margin-top:calc(var(--u)*2.4)}
.market-list li{border-top:1px solid var(--gold);padding-top:calc(var(--u)*.9)}
.market-list h3{font-family:var(--f-display);font-size:var(--fs-l)}
.market-list p{font-size:var(--fs-s);color:var(--dim);margin-top:.25em}
.market-img{aspect-ratio:1448/1086}

/* ---------- 19 · products ---------- */
.products{display:flex;flex-direction:column;gap:calc(var(--u)*2.4)}
.product-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*1.6)}
.product-row li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25em;padding:calc(var(--u)*1.4);background:var(--card);border:1px solid var(--line);border-radius:4px}
.product-row img{height:calc(var(--u)*14);width:100%;object-fit:contain;margin-bottom:calc(var(--u)*.8)}
.product-row b{font-family:var(--f-display);font-size:var(--fs-l)}
.product-row span{font-size:var(--fs-xs);color:var(--dim)}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*2.2);counter-reset:p}
.principles li{counter-increment:p;font-size:var(--fs-s);border-top:2px solid var(--red);padding-top:calc(var(--u)*1)}
.principles li::before{content:counter(p);display:block;font-family:var(--f-display);font-size:calc(var(--u)*2);color:var(--red);line-height:1;margin-bottom:.3em}

/* ---------- 20 · budget ---------- */
.budget{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:calc(var(--u)*5);align-items:center}
.budget-bars{display:grid;gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*2.4)}
.bb{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.2em 1em;font-size:var(--fs-s)}
.bb::after{content:"";grid-column:1/-1;height:calc(var(--u)*1.1);width:calc(var(--w) * 2.5);background:var(--red);border-radius:2px}
.bb b{font-variant-numeric:tabular-nums;font-weight:600}
.bb-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:calc(var(--u)*1.1);border-top:2px solid var(--ink);margin-top:calc(var(--u)*.4)}
.bb-total span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bb-total b{font-family:var(--f-display);font-size:calc(var(--u)*2.4);font-variant-numeric:tabular-nums}
.budget-outside h3{font-family:var(--f-display);font-size:var(--fs-h3);margin-bottom:calc(var(--u)*1.4)}
.budget-outside .facts>div{grid-template-columns:calc(var(--u)*12) 1fr}
.budget-outside .facts dd{font-size:var(--fs-s)}

/* ---------- 21 · theme ---------- */
.theme{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:calc(var(--u)*4);align-items:center}
.theme-copy .lead{color:var(--dim)}
.theme-copy .muted{margin-top:calc(var(--u)*1.6)}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1)}
.theme-grid button{position:relative;width:100%;height:100%;min-height:calc(var(--u)*8.2);display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u)*.6);text-align:left;padding:calc(var(--u)*1.3);border:1px solid var(--line);border-radius:4px;background:var(--card);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.theme-grid button:hover{border-color:var(--gold-hi)}
.theme-grid b{font-family:var(--f-display);font-weight:600;font-size:calc(var(--u)*1.45);line-height:1.2}
.theme-grid span{font-size:var(--fs-xs);letter-spacing:.06em;color:var(--dim)}
.theme-grid button[aria-pressed="true"]{background:var(--cream);color:var(--red);border-color:var(--gold-hi);transform:translateY(-2px)}
.theme-grid button[aria-pressed="true"] span{color:var(--red)}
.theme-grid button[aria-pressed="true"]::after{content:"";position:absolute;right:calc(var(--u)*1);top:calc(var(--u)*1);width:calc(var(--u)*1);height:calc(var(--u)*1.35);background:var(--gold);clip-path:polygon(50% 0,58% 36%,100% 40%,58% 44%,50% 100%,42% 44%,0 40%,42% 36%)}

/* ---------- 22 · closing ---------- */
.closing-bg{position:absolute;inset:0;background:url("assets/img/bintang-poster.jpg") center/cover no-repeat;opacity:.5}
.closing-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 50% 55%,rgba(12,19,34,.55),rgba(12,19,34,.92))}
.closing-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*1.4)}
.closing-star{width:calc(var(--u)*2.6);height:calc(var(--u)*3.5);fill:var(--gold-hi);filter:drop-shadow(0 0 calc(var(--u)*1.5) rgba(236,211,166,.6))}
.closing-frame h2{font-size:calc(var(--u)*5.2)}
.closing-script{font-family:var(--f-script);font-size:calc(var(--u)*5);color:var(--gold-hi);line-height:1;margin-top:calc(var(--u)*-1)}
.closing-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*3);margin:calc(var(--u)*2.4) 0 calc(var(--u)*1.4);padding-top:calc(var(--u)*2);border-top:1px solid var(--line);text-align:left;max-width:calc(var(--u)*76)}
.closing-facts dt{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.closing-facts dd{font-size:var(--fs-b);margin-top:.3em}

/* ---------- 19–20 · invitation ---------- */
.invite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--u)*6);align-items:center}
.invite-actions{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*1.4);margin-top:calc(var(--u)*2.6)}
.phone{height:calc(var(--u)*44.5);aspect-ratio:390/844;padding:calc(var(--u)*.75);border-radius:calc(var(--u)*3.2);background:linear-gradient(160deg,#2a3247,#0b111d);box-shadow:0 0 0 1px rgba(212,175,124,.35),0 calc(var(--u)*2) calc(var(--u)*5) rgba(0,0,0,.55)}
.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--u)*2.5);background:var(--night)}
.phone-screen iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform-origin:0 0;transform:scale(var(--s,1))}
.invite-fix{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:calc(var(--u)*4);align-items:center}
.fix-ref .zoom{aspect-ratio:1024/1536;max-height:calc(var(--u)*44);width:auto;margin:0 auto}
.fix-ref .zoom img{object-position:top}
.fix-table{width:100%;border-collapse:collapse;margin-top:calc(var(--u)*1.8);font-size:var(--fs-s)}
.fix-table th,.fix-table td{text-align:left;padding:calc(var(--u)*.55) calc(var(--u)*.8);border-bottom:1px solid var(--line);vertical-align:top}
.fix-table thead th{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700}
.fix-table tbody th{font-weight:700;white-space:nowrap}
.fix-table td:nth-child(2){color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(122,30,30,.55)}
.fix-table td:nth-child(3){font-weight:600}
.fix-todo-label{margin-top:calc(var(--u)*1.8)}

/* ---------- modals ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--cream);max-width:none;max-height:none;width:100vw;height:100dvh;margin:0}
.modal::backdrop{background:rgba(6,10,19,.9);backdrop-filter:blur(4px)}
.modal[open]{display:flex;flex-direction:column}
.modal-bar{display:flex;align-items:center;gap:1em;padding:calc(14px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px))}
.modal-bar p{flex:1;min-width:0;font-family:var(--f-display);font-size:clamp(15px,calc(var(--u)*1.4),24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(247,233,215,.1);flex:none}
.modal-close svg{width:22px;height:22px}
.modal-close:hover{background:rgba(247,233,215,.2)}
.yt-modal .btn-line{border-color:rgba(247,233,215,.35);color:var(--cream)}
.yt-frame{flex:1;display:grid;place-items:center;padding:0 max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));min-height:0}
.yt-frame iframe{width:min(100%,calc((100dvh - 110px)*16/9));aspect-ratio:16/9;border:0;border-radius:6px;background:#000}
.img-stage{flex:1;overflow:auto;display:grid;place-items:center;padding:0 20px 20px;min-height:0}
.img-stage img{max-width:100%;max-height:calc(100dvh - 100px);object-fit:contain;cursor:zoom-in;border-radius:4px}
.img-stage.is-full{place-items:start}
.img-stage.is-full img{max-width:none;max-height:none;cursor:zoom-out}
.ov-list{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:4px max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));align-content:start;counter-reset:ov}
.ov-list button{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border:1px solid rgba(212,175,124,.25);border-radius:6px;background:rgba(247,233,215,.04);transition:border-color .2s,background .2s}
.ov-list button:hover{border-color:var(--gold)}
.ov-list button[aria-current="true"]{background:rgba(212,175,124,.18);border-color:var(--gold)}
.ov-list small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ov-list b{font-family:var(--f-display);font-size:17px;font-weight:600;line-height:1.25}

/* ---------- stacked mode (phones, short windows) ---------- */
@media (max-width:860px),(max-height:500px){
  :root{--u:7px;--fs-xs:11.5px;--fs-s:13.5px;--fs-b:15px;--fs-l:16.5px;--fs-h3:18px;--fs-h2:clamp(28px,7.4vw,40px)}
  html,body{height:auto;overflow:visible}
  body{overflow-x:hidden}
  .deck{position:static}
  .slide{position:relative;inset:auto;display:block;opacity:1;visibility:visible;transition:none;overflow:visible}
  .slide.is-active .frame>*{animation:none}
  .frame{width:auto;height:auto;padding:76px max(20px,env(safe-area-inset-right,0px)) 64px max(20px,env(safe-area-inset-left,0px))}
  .slide+.slide .frame{border-top:1px solid rgba(212,175,124,.12)}
  .lk-full{display:none}
  .topbar{position:fixed;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:rgba(12,19,34,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cream);font-size:11px}
  body[data-tone="paper"]{--tone-fg:var(--cream)}
  body[data-slide="1"] .topbar-chapter{opacity:.7}
  .controls{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .ctl{width:38px;height:38px}
  .ctl-full,#notesBtn,.ctl-sep,.progress{display:none}
  .counter{font-size:12px}
  .notes-panel{display:none}
  .i-star{width:12px;height:16px}

  .cover{min-height:100svh;display:flex;align-items:flex-end}
  .cover-frame{padding-top:110px;padding-bottom:88px;gap:18px}
  .cover-shade{background:linear-gradient(0deg,rgba(8,13,25,.95) 0%,rgba(8,13,25,.7) 55%,rgba(8,13,25,.15) 100%)}
  .ct-a{font-size:clamp(30px,8.4vw,44px)}
  .ct-b{font-size:clamp(64px,19vw,104px)}
  .cover-facts{gap:12px 24px}
  .cover-hint{display:none}

  .agenda,.eval,.vision,.music,.film,.venue-head,.decor,.identity,.attire,.jersey,.market,.budget,.theme,.invite,.invite-fix{grid-template-columns:minmax(0,1fr);gap:24px}
  .phone{height:auto;width:min(100%,330px);margin:0 auto;padding:7px;border-radius:30px}
  .phone-screen{border-radius:24px}
  .fix-ref .zoom{max-height:none;width:min(100%,320px)}
  .table-scroll{overflow-x:auto}
  .eval>*{grid-column:auto!important;grid-row:auto!important}
  .eval-points,.market-list,.op-pros{grid-template-columns:minmax(0,1fr)}
  .eval-points{gap:18px}
  .vision-img{height:auto;aspect-ratio:16/10}
  .option-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .option-panel{grid-template-columns:minmax(0,1fr);gap:18px}
  .ot-t{font-size:16px}
  .option-panel h3{font-size:22px}
  .op-bar{height:auto;flex-direction:column}
  .op-bar span{width:100%!important;padding:8px 10px}
  .ruler-track{height:auto;flex-direction:column}
  .seg{width:100%;padding:10px 12px}
  .ruler{padding-bottom:0}
  .dur-lists{grid-template-columns:minmax(0,1fr);gap:18px}
  .dur-chips li{font-size:13px}
  .timing-stats{grid-template-columns:minmax(0,1fr);gap:14px}
  .timing-stats b{font-size:32px}
  .m3-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .model3d{padding-bottom:64px}
  .m3-stage{flex:none;aspect-ratio:4/3}
  .m3-wait,.m3-head .m3-open,.m3-links .m3-open{display:none}
  .m3-mobile{display:inline-flex;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap}
  .rundown{grid-template-columns:minmax(0,1fr)}
  .rundown-head{flex-direction:column;align-items:flex-start;order:-2}
  .rd-player{position:static;order:-1}
  .rundown-head .kicker{order:0}
  .rd-list li{grid-template-columns:34px minmax(0,1fr);column-gap:10px;row-gap:8px;padding:12px 0}
  .rd-n{grid-row:1}
  .rd-main,.rd-dur,.rd-refs{grid-column:2}
  .rd-dur{justify-self:start}
  .rd-refs:empty{display:none}
  .rd-dur.is-dash{display:none}
  .rd-ref{white-space:normal;text-align:left}
  .rd-n{font-size:20px}.rd-main h3{font-size:18px}.rd-dur{font-size:18px}
  .yt-grid,.yt-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .zones,.pairs,.product-row,.principles,.closing-facts{grid-template-columns:minmax(0,1fr)}
  .product-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles{grid-template-columns:minmax(0,1fr);gap:14px}
  .zones .zoom{height:auto;aspect-ratio:4/3}
  .pairs li{grid-template-rows:auto;grid-template-columns:1fr 1fr}
  .pairs .zoom{height:auto;aspect-ratio:4/3}
  .pairs h3{grid-column:1/-1;grid-row:1}
  .palette i{max-width:56px}
  .product-row img{height:96px}
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-grid button{min-height:96px}
  .theme-grid b{font-size:16px}
  .closing{min-height:80svh;display:flex;align-items:center}
  .closing-frame{width:100%}
  .closing-frame h2{font-size:44px}
  .closing-script{font-size:48px}
  .closing-star{width:24px;height:32px}
  .facts>div,.film-copy .facts>div,.budget-outside .facts>div,.rules>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .ag-t{font-size:19px}
  .yt-play svg{width:64px;height:64px;padding:18px}
}
@media (max-width:420px){
  .yt-grid,.yt-grid.three,.theme-grid{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}