:root{
  --ground:#0A0D0F; --surface:#13181B; --raise:#1C2226;
  --ink:#E9EEF0; --muted:#78878D; --dim:#4A575C;
  --accent:#5FD4D6; --accent-dim:#2E7C7E;
  --rule:rgba(233,238,240,.13);
  --display:"Bodoni Moda",ui-serif,Georgia,serif;
  --body:"Karla",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:520ms;
}
*{box-sizing:border-box;margin:0;padding:0}
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
html,body{height:100%;overscroll-behavior:none}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-weight:400;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  touch-action:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- shell ---------- */
#app{position:fixed;inset:0;display:flex;flex-direction:column}

.rail{position:absolute;top:0;left:0;right:0;height:2px;z-index:40;display:flex;gap:2px;padding:0 0}
.rail i{flex:1;background:rgba(233,238,240,.14);transition:background 300ms var(--ease)}
.rail i.on{background:var(--accent)}

#stage{position:relative;flex:1;overflow:hidden;perspective:2200px;perspective-origin:50% 50%}

.page{
  position:absolute;inset:0;
  will-change:transform,opacity;
  backface-visibility:hidden;
  display:flex;
}
.page[data-state="live"]{z-index:10}
.page[data-state="off"]{z-index:5;pointer-events:none}
.page[data-state="hidden"]{display:none}

/* ---------- media ---------- */
.frame{position:absolute;inset:0;overflow:hidden;background:#000}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame.contain img{object-fit:contain;background:var(--ground)}
.veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,9,10,.86) 0%,rgba(6,9,10,.34) 26%,rgba(6,9,10,0) 52%)}
.veil.top{background:linear-gradient(to bottom,rgba(6,9,10,.7) 0%,rgba(6,9,10,0) 40%),
  linear-gradient(to top,rgba(6,9,10,.86) 0%,rgba(6,9,10,.3) 30%,rgba(6,9,10,0) 60%)}

/* ---------- caption ---------- */
.cap{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(20px,4.5vw,64px) clamp(72px,9vh,104px);
  z-index:12;pointer-events:none;max-width:74ch}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-weight:500;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.eyebrow s{width:26px;height:1px;background:var(--accent-dim);display:block;text-decoration:none}
.cap h2{font-family:var(--display);font-weight:400;line-height:1.06;
  font-size:clamp(28px,5.2vw,54px);text-wrap:balance;margin-bottom:14px}
.cap p{font-size:clamp(14px,1.5vw,16.5px);line-height:1.62;color:#BFCACE;max-width:60ch;font-weight:300}
/* on a video page the player's own bar owns the bottom band — the caption sits above it */
.cap.overvid{padding-bottom:calc(clamp(72px,9vh,104px) + 64px)}
.cap.overvid h2{font-size:clamp(22px,4vw,44px)}

/* ---------- cover ---------- */
.cover .mast{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(26px,5vw,60px) clamp(20px,4.5vw,64px) clamp(78px,10vh,112px)}
.cover .brand{font-family:var(--display);font-size:clamp(13px,1.5vw,15px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink)}
.cover h1{font-family:var(--display);font-weight:400;font-size:clamp(58px,13vw,150px);
  line-height:.86;letter-spacing:-.02em}
.cover h1 em{font-style:italic;color:var(--accent)}
.cover .meta{display:flex;gap:clamp(18px,4vw,46px);flex-wrap:wrap;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:20px}
.cover .meta b{color:var(--ink);font-weight:500}

/* ---------- duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--rule);position:absolute;inset:0}
.duo .cell{position:relative;overflow:hidden;background:#000}
.duo .cell img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.duo{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

/* ---------- note page ---------- */
.note{position:absolute;inset:0;background:var(--ground);display:grid;
  grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,72px);
  padding:clamp(56px,8vh,96px) clamp(20px,4.5vw,64px) clamp(88px,11vh,120px)}
@media (max-width:820px){.note{grid-template-columns:1fr;grid-template-rows:auto 1fr;
  padding-top:clamp(40px,6vh,64px);overflow-y:auto;touch-action:pan-y}}
.note .txt h2{font-family:var(--display);font-size:clamp(26px,3.6vw,44px);font-weight:400;
  line-height:1.1;margin-bottom:18px;text-wrap:balance}
.note .txt p{font-size:15.5px;line-height:1.72;color:#B4C0C4;font-weight:300;max-width:56ch;margin-bottom:14px}
.note dl{margin-top:26px;border-top:1px solid var(--rule)}
.note dl div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--rule)}
.note dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.note dd{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.note .vis{position:relative;height:100%;min-height:220px;border:1px solid var(--rule);
  background:var(--surface);overflow:hidden}
.note .vis img{width:100%;height:100%;object-fit:cover;opacity:.9}

/* ---------- video ---------- */
.vid{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* a clip is shown whole, whatever its shape and the screen's: a horizontal one on a
   phone, a vertical one on a laptop. The poster, blurred, fills the rest. */
.vid video{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.vid .vbg{position:absolute;inset:-6%;background:center/cover no-repeat;filter:blur(28px) brightness(.45) saturate(1.1)}
.vctl{position:absolute;left:0;right:0;bottom:0;z-index:26;
  padding:0 clamp(20px,4.5vw,64px) clamp(74px,9.5vh,106px);pointer-events:none}
.vbar{pointer-events:auto;display:flex;align-items:center;gap:16px;
  background:rgba(10,13,15,.62);backdrop-filter:blur(14px);
  border:1px solid var(--rule);border-radius:2px;padding:11px 16px;max-width:560px}
.vbar button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;opacity:.9}
.vbar button:hover{opacity:1;color:var(--accent)}
.vbar svg{width:17px;height:17px;fill:currentColor}
.scrub{flex:1;height:22px;display:flex;align-items:center;cursor:pointer;position:relative}
.scrub .track{width:100%;height:2px;background:rgba(233,238,240,.2);position:relative}
.scrub .fill{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0%}
.vtime{font-size:11.5px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
/* centred button only — never a full-page overlay, or it swallows navigation taps */
.bigplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;display:flex;align-items:center;justify-content:center;z-index:25;
  cursor:pointer;transition:opacity 300ms var(--ease)}
.bigplay span{width:74px;height:74px;border:1px solid rgba(233,238,240,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(10,13,15,.36);
  backdrop-filter:blur(6px);transition:border-color 250ms,transform 250ms}
.bigplay:hover span{border-color:var(--accent);transform:scale(1.05)}
.bigplay svg{width:22px;height:22px;fill:var(--ink);margin-left:3px}
.bigplay.gone{opacity:0;pointer-events:none}

/* ---------- end page ---------- */
.end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:clamp(40px,8vw,80px);gap:6px;background:var(--ground)}
.end .eyebrow{justify-content:center;text-align:center;flex-wrap:wrap}
/* the leading rule reads as a pointer on a left-aligned caption; centred it is noise */
.end .eyebrow s{display:none}
.end h2{font-family:var(--display);font-size:clamp(32px,6vw,64px);font-weight:400;line-height:1.04;
  text-wrap:balance;max-width:16ch;margin-bottom:10px}
.end p{color:#B4C0C4;font-weight:300;font-size:16px;line-height:1.65;max-width:46ch;margin-bottom:30px}
.cta{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--accent);color:var(--accent);
  padding:13px 26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  background:none;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background 220ms,color 220ms}
.cta:hover{background:var(--accent);color:#06191A}

/* ---------- chrome ---------- */
#bar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;
  gap:clamp(10px,2vw,20px);padding:0 clamp(14px,3vw,26px);height:56px;
  background:linear-gradient(to top,rgba(8,11,12,.92),rgba(8,11,12,0));pointer-events:none}
#bar>*{pointer-events:auto}
.count{font-size:11.5px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:52px}
.count b{color:var(--ink);font-weight:500}
.spacer{flex:1}
.tog{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.tog button{padding:7px 11px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);transition:color 200ms,background 200ms}
.tog button[aria-pressed="true"]{color:var(--ink);background:var(--raise)}
.tog button:hover{color:var(--ink)}
.icobtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:2px;color:var(--muted);transition:color 200ms,border-color 200ms}
.icobtn:hover{color:var(--accent);border-color:var(--accent-dim)}
.icobtn svg{width:15px;height:15px;fill:currentColor}
/* clips playing on the paper in Book mode, laid over their frames */
.bvids{position:absolute;inset:0;z-index:50;pointer-events:none}
.bv{position:absolute;overflow:hidden}
.bv.hide{visibility:hidden}
.bv video{width:100%;height:100%;display:block;object-fit:contain;background:transparent}
.bv[data-fit="cover"] video{object-fit:cover}
.bvctl{position:absolute;bottom:14px;display:flex;gap:6px;pointer-events:auto}
.bv[data-at="r"] .bvctl{left:24px}
.bv[data-at="l"] .bvctl{right:24px}
.bv[data-at="c"] .bvctl{left:50%;transform:translateX(-50%)}
.bvctl button{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,13,15,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background 200ms}
.bvctl button:hover{background:rgba(10,13,15,.8)}
.bvctl svg{width:14px;height:14px;fill:currentColor}
/* Save offline: the button and the small panel above it */
#offbtn[hidden]{display:none}
#offbtn .i-ok{display:none}
#offbtn.saved{color:var(--accent);border-color:var(--accent-dim)}
#offbtn.saved .i-ok{display:block}#offbtn.saved .i-dl{display:none}
#offbtn.stale{position:relative}
#offbtn.stale::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
#offp{position:absolute;right:clamp(14px,3vw,26px);bottom:62px;width:min(300px,calc(100vw - 28px));
  padding:14px 16px;background:var(--raise);border:1px solid var(--rule);border-radius:3px;
  font-size:13px;line-height:1.45;color:var(--muted);display:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#offp.on{display:block}
#offp p{margin:0 0 10px}
#offp b{color:var(--ink);font-weight:500}
#offp .offnote{font-size:12px;color:var(--dim)}
#offp .offdim{font-size:12px;color:var(--dim)}
#offp .offerr{font-size:12px;color:#E0876A}
.offbar{height:3px;background:var(--rule);margin:0 0 12px}
.offbar i{display:block;height:100%;width:0;background:var(--accent);transition:width 200ms}
.offact{display:flex;gap:8px;justify-content:flex-end}
.offact button{padding:7px 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:2px;color:var(--ink)}
.offact button.pri{background:var(--accent);border-color:var(--accent);color:#06191A}
.hint{position:absolute;top:22px;right:clamp(14px,3vw,26px);z-index:30;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:opacity 700ms}
.hint.gone{opacity:0}
/* Words on a laptop, marks on a phone — the bar has to fit at 360px without
   the two toggles climbing over each other. */
.tog button .n{display:none}
@media (max-width:620px){
  .lbl{display:none}
  .count{min-width:44px;font-size:11px}
  #bar{gap:8px;padding:0 12px}
  .tog button .w{display:none}
  .tog button .n{display:block;min-width:15px;text-align:center;font-size:12px;letter-spacing:0}
  .tog button{padding:8px 10px}
  .icobtn{width:32px;height:32px}
}

/* ================= BOOK MODE =================
   Real leaves: each sheet has a front and a back face and rotates
   around the spine. The corner peels under the pointer. */
#book{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:contain;
  padding:clamp(16px,3vw,44px) clamp(12px,3vw,40px) 74px;
  background:radial-gradient(120% 90% at 50% 40%,#171D21 0%,#0A0D0F 78%)}
body[data-mode="book"] #book{display:flex}
body[data-mode="book"] #stage{visibility:hidden;pointer-events:none}

.spreadwrap{position:relative;perspective:2600px;perspective-origin:50% 46%}
.spread{position:relative;display:block;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.side{position:absolute;top:0;height:100%;width:50%;overflow:hidden;background:#F2F0EC}
.side.l{left:0}.side.r{left:50%}
.gutter{position:absolute;top:0;bottom:0;left:50%;width:26px;transform:translateX(-50%);z-index:60;
  pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 42%,
  rgba(0,0,0,.22) 50%,rgba(0,0,0,.16) 58%,rgba(0,0,0,0) 100%)}

/* three stacked layers per turning side:
   under = the page beneath, cur = the page being lifted (corner clipped away),
   fold = the lifted corner itself — the reverse of cur, mirrored across the crease */
.lay{position:absolute;inset:0;overflow:hidden;background:#F2F0EC;display:flex;flex-direction:column}
.lay.under{z-index:1}
.lay.cur{z-index:2}
.foldclip{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  filter:drop-shadow(-3px -3px 9px rgba(0,0,0,.34))}
.foldinner{position:absolute;inset:0;background:#EDEAE4;overflow:hidden;
  transform-origin:0 0;will-change:transform}
.foldinner .fc,.foldinner .fm{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  transform-origin:0 0;background:#F2F0EC}
/* the back of a printed sheet is never as bright as its face */
.foldinner .fm{filter:brightness(.93) saturate(.9)}
.foldclip .gloss{position:absolute;inset:0;pointer-events:none}
.creaseglow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}

/* paper layout */
.paper{flex:1;display:flex;flex-direction:column;padding:7% 8% 6%;min-height:0;color:#1A1F22;position:relative}
/* ---------- page ground colour and page numbers ---------- */
.pbg{display:contents}
.pbg>.paper{background:var(--pg)!important}
.pbg[data-tone="dark"]>.paper{color:#E9EEF0}
.pbg[data-tone="dark"] .ptit,.pbg[data-tone="dark"] .pblocks h3{color:#E9EEF0}
.pbg[data-tone="dark"] .ptxt,.pbg[data-tone="dark"] .pblocks p{color:#B4C0C4!important}
.pbg[data-tone="dark"] .pcap,.pbg[data-tone="dark"] .prow span:first-child{color:#9FB0B5}
.pbg[data-tone="dark"] .prow span:last-child{color:#E9EEF0}
.pbg[data-tone="dark"] .peye{color:var(--accent)}
.pbg[data-tone="light"] .ptit,.pbg[data-tone="light"] .pblocks h3,.pbg[data-tone="light"] .prow span:last-child{color:#1A1F22!important}
.pbg[data-tone="light"] .ptxt,.pbg[data-tone="light"] .pblocks p{color:#48545A!important}
.pbg[data-tone="light"] .pcap{color:#6E7A80!important}
.pbg[data-tone="light"] .peye{color:#2E7C7E!important}
.folio{position:absolute;bottom:2.6%;font-size:clamp(7px,.8vw,10px);letter-spacing:.14em;color:#8A959A;font-variant-numeric:tabular-nums;pointer-events:none}
.side.l .folio{left:8%}.side.r .folio{right:8%}
.spread.oneup .folio{left:50%;right:auto;transform:translateX(-50%)}
.pbg[data-tone="dark"] .folio{color:#6F7E84}
/* a light ground on screen: dark type on the pages that show their ground */
.page[data-tone="light"] .textp,.page[data-tone="light"] .note,.page[data-tone="light"] .end,
.page[data-tone="light"][data-variant="text-below"] .cap{color:#1A1F22}
.page[data-tone="light"] .textp p,.page[data-tone="light"] .note p,.page[data-tone="light"] .end p,
.page[data-tone="light"][data-variant="text-below"] .cap p,.page[data-tone="light"] .note dd{color:#3F4B50}
.page[data-tone="light"] .textp .eyebrow,.page[data-tone="light"] .note .eyebrow,.page[data-tone="light"] .end .eyebrow,
.page[data-tone="light"][data-variant="text-below"] .eyebrow{color:#16797B}
.page[data-tone="light"] .note dt{color:#6B767B}
.page[data-tone="light"] .note dl,.page[data-tone="light"] .note dl div{border-color:rgba(26,31,34,.14)}
.page[data-tone="light"] .end .cta{color:#16797B;border-color:#16797B}
.paper .ph{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.paper .ph img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.paper .pcap{margin-top:6%;font-size:clamp(7px,.95vw,11px);letter-spacing:.14em;
  text-transform:uppercase;color:#6E7A80;text-align:center}
.paper.bleed{padding:0}
.paper.bleed .ph{position:relative;background:#0E1214}
.paper.bleed .ph img{position:relative;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.paper.bleed .ph img.vb{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(18px) brightness(.5)}

.paper.cov{position:relative;justify-content:flex-end;background:#11161A;color:#E9EEF0;padding:0}
.paper.cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.paper.cov .covtx{position:relative;padding:10% 9%;z-index:2;
  background:linear-gradient(to top,rgba(8,11,12,.9),rgba(8,11,12,0))}
.paper.cov h3{font-family:var(--display);font-size:clamp(20px,3.6vw,46px);line-height:.94;font-weight:400}
.paper.cov h3 em{font-style:italic;color:var(--accent)}
.paper.cov small{display:block;margin-top:8px;font-size:clamp(7px,.9vw,10px);
  letter-spacing:.24em;text-transform:uppercase;color:#9FB0B5}

.paper .ptit{font-family:var(--display);font-size:clamp(11px,1.7vw,21px);line-height:1.12;
  margin-bottom:.5em;font-weight:400}
.paper .peye{font-size:clamp(6.5px,.85vw,9.5px);letter-spacing:.2em;text-transform:uppercase;
  color:#2E7C7E;margin-bottom:.7em}
.paper .ptxt{font-size:clamp(7.5px,1.02vw,12px);line-height:1.62;color:#48545A;font-weight:300}
.paper .prow{display:flex;justify-content:space-between;gap:8px;padding:.42em 0;
  border-bottom:1px solid rgba(26,31,34,.14);font-size:clamp(6.5px,.86vw,10px)}
.paper .prow span:first-child{letter-spacing:.14em;text-transform:uppercase;color:#8A959A}
.paper .prow span:last-child{color:#1A1F22;font-variant-numeric:tabular-nums}
.paper .stack{flex:1;display:flex;flex-direction:column;gap:5%;min-height:0}
.paper .stack .ph{flex:1}

.playbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:auto;cursor:pointer;transition:transform 200ms var(--ease),border-color 200ms;
  width:clamp(28px,4.4vw,54px);height:clamp(28px,4.4vw,54px);border-radius:50%;
  border:1px solid rgba(255,255,255,.85);background:rgba(10,13,15,.4);
  display:flex;align-items:center;justify-content:center;z-index:3}
.paper.half-l .playbadge.edge{left:100%}
.paper.half-r .playbadge.edge{left:0}
.playbadge:hover{transform:translate(-50%,-50%) scale(1.08);border-color:var(--accent)}
.playbadge svg{width:38%;height:38%;fill:#fff;margin-left:8%;pointer-events:none}

/* corner grab handles — invisible, just define where the page can be lifted */
.grab{display:none}
.spread{touch-action:none}
.grab:active{cursor:grabbing}
.grab.br{right:0;bottom:0}
.grab.tr{right:0;top:0}
.grab.bl{left:0;bottom:0}
.grab.tl{left:0;top:0}

/* narrow screens: one page at full width, spine at the turning edge */
.spread.oneup .side{left:0;width:100%}
.spread.oneup .side.r{z-index:2}
.spread.oneup .side.l{z-index:1;visibility:hidden}
.spread.oneup .side.l.active{visibility:visible;z-index:3}
.spread.oneup .gutter{display:none}
.spread.oneup .grab{width:34%;height:30%}
.spread.oneup .grab.bl,.spread.oneup .grab.tl{left:0}
/* the reverse of a leaf in one-up view reads as paper seen from behind */
.foldinner.reverse .fc{filter:brightness(.8) saturate(.55) contrast(.92)}

/* tap any photo to see it at its own shape, no rotating the phone */
#zoom{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(6,9,10,.96);padding:14px;cursor:zoom-out}
#zoom.on{display:flex}
#zoom .zbody{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
  position:relative;cursor:auto}
#zoom img,#zoom video{max-width:100%;max-height:82vh;object-fit:contain;display:block;background:#000}
#zoom .zctl{position:absolute;left:0;right:0;bottom:-58px;display:flex;justify-content:center}
#zoom .zx{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;z-index:210;
  border:1px solid var(--rule);border-radius:50%;background:rgba(10,13,15,.75);
  backdrop-filter:blur(10px);color:var(--ink);cursor:pointer}
#zoom .zx:hover{border-color:var(--accent);color:var(--accent)}
#zoom .zx svg{width:17px;height:17px;fill:currentColor}
#zoom .znote{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);pointer-events:none}

/* a landscape frame carried across the gutter — the reason spreads exist */
.paper.wide{padding:0;background:#0E1214}
.paper.wide .ph{width:100%;height:100%;position:relative;overflow:hidden}
.paper.wide .ph img{position:absolute;top:0;height:100%;width:200%;
  max-width:none;max-height:none;object-fit:cover;display:block}
/* the caption lies over the frame, so both halves keep the same height and meet exactly at the fold */
.paper.wide .pcap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:3% 6% 2.4%;text-align:right;color:#DDE5E8;
  background:linear-gradient(to top,rgba(6,9,10,.7),rgba(6,9,10,0))}
.paper.wide .pcap:empty{display:none}
.paper.wide.half-l .ph img{left:0}
.paper.wide.half-r .ph img{right:0}
.spread.oneup .paper.wide .ph img{position:static;width:100%;object-fit:contain}

/* one-up: the photo owns the page, fitted whole on a dark ground */
.spread.oneup .lay,.spread.oneup .foldinner .fc,.spread.oneup .foldinner .fm{background:#0E1214}
.spread.oneup .paper{padding:0;background:#0E1214;color:#E9EEF0;position:relative}
.spread.oneup .paper .ph{width:100%;height:100%}
.spread.oneup .paper .ph img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.spread.oneup .paper .stack{gap:2px;padding:0}
.spread.oneup .paper .pcap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 18px 20px;
  color:#9FB0B5;text-align:left;
  background:linear-gradient(to top,rgba(6,9,10,.88),rgba(6,9,10,0))}
.spread.oneup .paper.note-p,.spread.oneup .paper.end-p{padding:9% 8%}
.spread.oneup .paper.text-p .pbox{position:static;width:auto;height:auto;padding:9% 8%;flex:1}
.spread.oneup .paper.mix[data-side="right"],.spread.oneup .paper.mix[data-side="bottom"]{flex-direction:column}
.spread.oneup .paper.mix[data-side="left"],.spread.oneup .paper.mix[data-side="top"]{flex-direction:column-reverse}
.spread.oneup .paper.mix .pvis{flex-basis:clamp(30%,var(--split),62%)}
.spread.oneup .paper.mix .pvis img{width:100%;height:100%}
.spread.oneup .paper .pbelow{padding:14px 18px 22px;margin:0}
.spread.oneup .paper .pblocks{column-count:1!important}
.spread.oneup .paper .ptit{color:#E9EEF0;font-size:clamp(18px,5.2vw,26px)}
.spread.oneup .paper .ptxt{color:#B4C0C4;font-size:clamp(12px,3.4vw,15px)}
.spread.oneup .paper .prow{border-bottom-color:rgba(233,238,240,.14);font-size:clamp(10px,2.8vw,12px)}
.spread.oneup .paper .prow span:last-child{color:#E9EEF0}
.spread.oneup .paper .peye{color:var(--accent)}

.bookhint{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);z-index:58;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  pointer-events:none;transition:opacity 600ms}

/* ---------- layout variants ----------
   One optional "variant" per page, set in the studio. The type decides what is
   on the page; the variant only moves it. No variant = the original layout. */
.page[data-variant="cap-right"] .cap{left:auto;right:0;text-align:right;margin-left:auto}
.page[data-variant="cap-right"] .cap .eyebrow{justify-content:flex-end}
.page[data-variant="cap-right"] .cap p{margin-left:auto}
.page[data-variant="no-cap"] .cap,.page[data-variant="no-cap"] .veil{display:none}
.page[data-variant="2-1"] .duo{grid-template-columns:2fr 1fr}
.page[data-variant="1-2"] .duo{grid-template-columns:1fr 2fr}
@media (max-width:640px){
  .page[data-variant="2-1"] .duo,.page[data-variant="1-2"] .duo{grid-template-columns:1fr}
  .page[data-variant="2-1"] .duo{grid-template-rows:2fr 1fr}
  .page[data-variant="1-2"] .duo{grid-template-rows:1fr 2fr}
}
.page[data-variant="photo-left"] .note{grid-template-columns:.95fr 1.05fr}
.page[data-variant="photo-left"] .note .vis{order:-1}
@media (max-width:820px){ .page[data-variant="photo-left"] .note{grid-template-columns:1fr} }
/* text under the frame: the photo shown whole, the words in their own block, nothing overlaid */
.page[data-variant="text-below"]{flex-direction:column;background:var(--ground)}
.page[data-variant="text-below"] .frame{position:relative;inset:auto;flex:1;min-height:0;background:var(--ground)}
.page[data-variant="text-below"] .frame img{object-fit:contain}
.page[data-variant="text-below"] .veil{display:none}
.page[data-variant="text-below"] .cap{position:relative;flex:none;max-width:none;
  padding:clamp(18px,3vh,32px) clamp(20px,4.5vw,64px) clamp(74px,10vh,104px)}
.page[data-variant="text-below"] .cap h2{font-size:clamp(24px,3.4vw,40px)}
.page[data-variant="text-below"] .cap p{max-width:68ch}

/* ---------- mixed page: photo + words, side and size set in the studio ---------- */
.note.mix{display:flex;padding:0;gap:0;align-items:stretch;overflow:hidden;grid-template-columns:none}
.note.mix[data-side="right"]{flex-direction:row}
.note.mix[data-side="left"]{flex-direction:row-reverse}
.note.mix[data-side="bottom"]{flex-direction:column}
.note.mix[data-side="top"]{flex-direction:column-reverse}
.note.mix .vis{flex:0 0 var(--split);height:auto;min-height:0;min-width:0;border:0;background:var(--ground);order:0}
.note.mix .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,contain);opacity:1}
.note.mix .txt{flex:1;min-width:0;min-height:0;overflow-y:auto;touch-action:pan-y;display:flex;flex-direction:column;
  justify-content:var(--valign,center);padding:clamp(28px,6vh,80px) clamp(20px,4vw,60px) clamp(78px,11vh,116px)}
.note.mix .txt>*{flex:none}
@media (max-width:820px){
  .note.mix{overflow:hidden}
  .note.mix[data-side="right"],.note.mix[data-side="bottom"]{flex-direction:column}
  .note.mix[data-side="left"],.note.mix[data-side="top"]{flex-direction:column-reverse}
  .note.mix .vis{flex-basis:clamp(30%,var(--split),62%)}
  .note.mix .txt{justify-content:flex-start;padding-top:24px}
}

/* type settings from the studio: every size is the base size times --ts */
.textp .tin,.note.mix .txt{text-align:var(--ta,left)}
.textp p,.note.mix .txt p{font-size:calc(clamp(15px,1.25vw,16.5px) * var(--ts,1));line-height:var(--tl,1.72);font-family:var(--tf,var(--body))}
.textp h2{font-size:calc(clamp(30px,4.6vw,56px) * var(--ts,1))!important}
.textp h3{font-size:calc(clamp(19px,1.9vw,24px) * var(--ts,1))!important}
.textp .blocks h3{margin-top:1.1em}
.textp .blocks h3:first-child{margin-top:0}
.note.mix .txt h2{font-size:calc(clamp(26px,3.6vw,44px) * var(--ts,1))}
.textp .blocks{column-gap:var(--tg,2.2em)!important}
.paper.mix .pwords,.paper.text-p .pbox{text-align:var(--ta,left)}
.paper.mix .ptxt,.paper.text-p .ptxt{font-size:calc(clamp(7.5px,1.02vw,12px) * var(--ts,1));line-height:var(--tl,1.62);font-family:var(--tf,var(--body))}
.paper.text-p .pblocks{column-gap:var(--tg,2.2em)}
.paper.text-p .ptit,.paper.mix .ptit{font-size:calc(clamp(11px,1.7vw,21px) * var(--ts,1))}
/* text pages on paper are sized to the page (cqh), exactly like the studio draws them,
   so the text breaks across pages the same way in both */
.lay,.foldinner .fc,.foldinner .fm{container-type:size}
.paper.text-p .peye{font-size:1.4cqh;margin-bottom:1.2cqh}
.paper.text-p .ptit{font-size:calc(4.2cqh * var(--ts,1))!important;line-height:1.1;margin-bottom:2.5cqh}
.paper.text-p .pblocks{font-size:calc(1.7cqh * var(--ts,1) * var(--shrink,1));line-height:var(--tl,1.65)}
.paper.text-p .pblocks h3{font-family:var(--display);font-weight:400;font-size:1.41em;line-height:1.2;margin:.9em 0 .45em;break-after:avoid;color:inherit}
.paper.text-p .pblocks h3:first-child{margin-top:0}
.paper.text-p .pblocks p{margin:0 0 .7em;font-family:var(--tf,var(--body));text-align:var(--ta,left);color:#48545A;font-weight:300}
.spread.oneup .paper.text-p .pblocks p{color:#B4C0C4}
.spread.oneup .paper.text-p .pblocks h3{color:#E9EEF0}

/* ---------- text page ---------- */
.textp{position:absolute;inset:0;background:var(--ground);overflow-y:auto;touch-action:pan-y;
  padding:clamp(56px,9vh,110px) clamp(20px,6vw,96px) clamp(90px,12vh,130px)}
.textp .tin{max-width:1100px;margin:0 auto}
/* the frame set in the studio, on screens wide enough to hold it */
@media (min-width:821px){
  .textp{padding:0;overflow:hidden}
  .textp .tin{position:absolute;left:var(--bx,8%);top:var(--by,9%);width:var(--bw,84%);height:var(--bh,82%);
    max-width:none;margin:0;overflow-y:auto;padding-bottom:64px}
}
.textp h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,56px);line-height:1.06;
  margin-bottom:clamp(20px,4vh,40px);text-wrap:balance;max-width:20ch}
.textp .blocks{column-count:var(--cols,1);column-gap:clamp(28px,4vw,64px)}
.textp section{margin-bottom:26px}
.textp h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.9vw,24px);line-height:1.2;
  margin-bottom:10px;break-after:avoid}
.textp p{font-size:clamp(15px,1.25vw,16.5px);line-height:1.72;color:#BFCACE;font-weight:300;margin-bottom:12px}
@media (max-width:820px){ .textp .blocks{column-count:1} }

/* the same choices on paper, in book mode */
.paper .pbelow{margin-top:5%;flex:none}
.paper .pbelow .ptxt{margin-bottom:.5em}
.paper.text-p{padding:0;overflow:hidden;position:relative}
.paper.text-p .pbox{position:absolute;left:var(--bx,8%);top:var(--by,9%);width:var(--bw,84%);height:var(--bh,82%);
  overflow:hidden;display:flex;flex-direction:column}
.paper.mix{flex-direction:row;gap:5%}
.paper.mix[data-side="left"]{flex-direction:row-reverse}
.paper.mix[data-side="bottom"]{flex-direction:column}
.paper.mix[data-side="top"]{flex-direction:column-reverse}
.paper.mix .pvis{flex:0 0 calc(var(--split) - 2.5%);position:relative;min-width:0;min-height:0}
.paper.mix .pvis img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,contain)}
.paper.mix .pwords{flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:var(--valign,center)}
.paper.mix .pspecs{margin-top:6%}
.paper .pblocks{column-gap:6%;flex:1;min-height:0;overflow:hidden}
.paper[data-variant="cap-right"] .pcap{text-align:right}
.paper[data-variant="no-cap"] .pcap{visibility:hidden}
.paper[data-variant="2-1"] .stack .ph:first-child{flex:2}
.paper[data-variant="1-2"] .stack .ph:last-child{flex:2}

@media (prefers-reduced-motion:reduce){
  :root{--dur:1ms}
  .page{transition:none!important}
  .leaf{transition-duration:1ms}
}

/* ---------- boot / paywall screen ---------- */
#boot{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:var(--ground);padding:28px}
.bootbox{max-width:34rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.bootbrand{font-family:var(--display);font-size:13px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted)}
#boot h1{font-family:var(--display);font-weight:400;font-size:clamp(24px,5vw,40px);line-height:1.1;
  color:var(--ink);text-wrap:balance}
#boot p{font-size:15px;line-height:1.62;color:#B4C0C4;font-weight:300;max-width:44ch}
#bootactions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.bootbtn{display:inline-flex;align-items:center;border:1px solid var(--accent);color:var(--accent);
  background:none;cursor:pointer;padding:12px 24px;font:inherit;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;text-decoration:none;transition:background 200ms,color 200ms}
.bootbtn:hover{background:var(--accent);color:#06191A}