:root{
  --ink:#07070a; --paper:#0e0e14; --paper2:#14141c;
  --amber:#f5b942; --teal:#2ec4b6; --violet:#7c6cff;
  --coral:#ff5a36; --gold:#ffc857; --lime:#f5b942; --magenta:#2ec4b6; --cyan:#7c6cff;
  --mute:#8b8b96; --line:rgba(255,255,255,.08);
  --text:#f4f4f7; --text2:#c5c5d0;
  /* vw/vh only — never vh (Safari can resolve vh to 0 inside CSS grid) */
  --page-w: min(42vw, 420px);
  --page-h: calc(var(--page-w) * 4 / 3);
  --radius: 2px;
  --c: var(--amber);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%; height:100dvh; height:var(--app-h, 100dvh);
  background:var(--ink);color:var(--text);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; touch-action:manipulation;
  overscroll-behavior:none; overflow:hidden;}
html{--app-h:100dvh; --vvw:100vw; --chrome-h:52px; --nav-h:72px;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.page img,.page picture{max-width:none}
.app{height:100%; height:var(--app-h, 100dvh); display:grid;grid-template-rows:auto 1fr auto; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(245,185,66,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(46,196,182,.08), transparent 55%),
    var(--ink);}
.chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line); backdrop-filter:blur(10px);
  background:rgba(7,7,10,.72); z-index:5;}
.chrome-title{display:flex;flex-direction:column;align-items:center;line-height:1.05;
  font-family:Syne,sans-serif; letter-spacing:.08em; text-transform:uppercase; font-size:11px;}
.chrome-title b{font-size:13px; letter-spacing:.18em;}
.chrome-title span{color:var(--mute); font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.2em;}
.chrome-right{display:flex;gap:8px;align-items:center}
.chip{border:1px solid var(--line); padding:7px 12px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.03);}
.chip.on{border-color:var(--lime); color:var(--lime);}
.chip.ghost{opacity:.7}
.stage{position:relative; display:flex; align-items:center; justify-content:center;
  padding:8px 12px; outline:none; overflow:hidden; min-height:0;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;}


.book{position:relative; width:calc(var(--page-w) * 2 + 8px); height:var(--page-h);
  min-width:0; min-height:0;
  perspective:2200px; transform-style:preserve-3d;}
html.no-3d .book{perspective:none; transform-style:flat}
html.no-3d .page.is-flip-out,html.no-3d .page.is-flip-in,
html.no-3d .book.flip-forward::after,html.no-3d .book.flip-back::after{animation:none !important}
html.no-3d .page.is-enter-left,html.no-3d .page.is-enter-right{
  animation:fadeIn .35s ease both !important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.page{position:absolute; inset:0 auto 0 0; width:var(--page-w); height:var(--page-h);
  background:var(--paper); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transform:translateX(20px) scale(.98);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);}
.page.is-left{left:0; border-radius:4px 0 0 4px;}
.page.is-right{left:calc(var(--page-w) + 8px); border-radius:0 4px 4px 0;}
.page.is-active{opacity:1; pointer-events:auto; transform:none;}
.page.is-exit-left{opacity:0; transform:translateX(-40px) rotateY(8deg);}
.page.is-exit-right{opacity:0; transform:translateX(40px) rotateY(-8deg);}
.page.is-enter-left{animation:enterL .45s cubic-bezier(.2,.8,.2,1) both;}
.page.is-enter-right{animation:enterR .45s cubic-bezier(.2,.8,.2,1) both;}
@keyframes enterL{from{opacity:0;transform:translateX(-50px) rotateY(-10deg)}to{opacity:1;transform:none}}
@keyframes enterR{from{opacity:0;transform:translateX(50px) rotateY(10deg)}to{opacity:1;transform:none}}

/* Phone/CSS fallback: single page. JS overrides --page-w/--page-h with visualViewport math. */
/* Catch portrait phones AND landscape phones (width can exceed 820). */
@media (max-width:700px), ((max-height:520px) and (max-width:980px)){
  :root{
    --page-w: min(96vw, calc(var(--vvw, 100vw) - 16px));
    --page-h: min(calc(var(--page-w) * 4 / 3), calc(var(--app-h, 100dvh) - var(--chrome-h) - var(--nav-h) - 12px));
  }
  .book{width:var(--page-w); height:var(--page-h); min-width:0; min-height:0; perspective:none; transform-style:flat;}
  .page{width:var(--page-w); height:var(--page-h);}
  .page.is-left,.page.is-right{left:0; border-radius:6px;}
  .chrome-title span{display:none}
  .book::before{display:none}
  .page.is-flip-out,.page.is-flip-in{animation:none}
}

/* JS phone classes — authoritative sizing */
html.is-phone .book{
  width:var(--page-w); height:var(--page-h);
  min-width:0; min-height:0; perspective:none; transform-style:flat;
}
html.is-phone .page{width:var(--page-w); height:var(--page-h);}
html.is-phone .page.is-left,html.is-phone .page.is-right{left:0; border-radius:6px;}
html.is-phone .book::before{display:none}
html.is-phone .page.is-flip-out,html.is-phone .page.is-flip-in{animation:none}
html.is-phone .chrome-title span{display:none}
html.is-phone .stage{padding:4px 6px;}

/* Portrait phone: prioritize filling width, readable type */
html.is-phone:not(.is-phone-land) .chrome{padding:8px 10px;}
html.is-phone:not(.is-phone-land) .nav{padding:8px 12px 12px;}
html.is-phone:not(.is-phone-land) .nav button{width:44px; height:44px;}

/* Landscape phone: shrink chrome, maximize page */
html.is-phone-land .chrome{padding:4px 8px; gap:8px;}
html.is-phone-land .chrome-title b{font-size:11px; letter-spacing:.12em;}
html.is-phone-land .chip{padding:4px 8px; font-size:10px;}
html.is-phone-land .nav{padding:4px 10px 6px; gap:8px;}
html.is-phone-land .nav button{width:36px; height:36px; font-size:22px;}
html.is-phone-land .stage{padding:2px 4px;}
html.is-phone-land .progress{height:2px;}


/* Desktop only when not a short landscape phone */
@media (min-width:821px) and (min-height:560px){
  :root{
    --avail-h: calc(100vh - 118px); --avail-h: calc(100dvh - 118px);
    --page-h: min(calc(var(--avail-h) * 0.90), calc((100vw - 40px - 8px) / 2 * 4 / 3));
    --page-w: calc(var(--page-h) * 3 / 4);
  }
}
@media (min-width:821px) and (min-height:900px){
  :root{
    --page-h: min(calc(var(--avail-h) * 0.92), calc((100vw - 40px - 8px) / 2 * 4 / 3));
    --page-w: calc(var(--page-h) * 3 / 4);
  }
}
@media (min-width:1800px) and (min-height:560px){
  :root{
    --page-h: min(calc(var(--avail-h) * 0.92), calc((100vw - 64px - 8px) / 2 * 4 / 3));
    --page-w: calc(var(--page-h) * 3 / 4);
  }
}

/* PAGE INTERNALS */
.rh{position:absolute; top:14px; left:22px; right:22px; display:flex; justify-content:space-between;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); z-index:2;}
.folio{position:absolute; bottom:14px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); z-index:2;}
.folio .n{font-family:Syne,sans-serif; font-size:clamp(14px, 3.6vw, 20px); color:var(--text); letter-spacing:0; font-weight:800;}
.marks span{position:absolute; width:10px; height:10px; border:1px solid rgba(255,255,255,.18); z-index:3;}
.marks span:nth-child(1){top:8px;left:8px; border-right:0;border-bottom:0}
.marks span:nth-child(2){top:8px;right:8px; border-left:0;border-bottom:0}
.marks span:nth-child(3){bottom:8px;left:8px; border-right:0;border-top:0}
.marks span:nth-child(4){bottom:8px;right:8px; border-left:0;border-top:0}

/* COVER */
.page-cover,.page-back{background:#000;}
.cover-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9;}
.cover-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,7,10,.2) 0%, rgba(7,7,10,.55) 45%, rgba(7,7,10,.92) 100%);}
.cover-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px, 6vh, 40px) clamp(16px, 5vw, 32px) clamp(28px, 7vh, 52px); z-index:2;}
.cover-kicker{font-family:"IBM Plex Mono",monospace; font-size:clamp(8px, 2.1vw, 10px); letter-spacing:.22em; color:var(--lime); margin-bottom:12px;}
.page-cover h1{font-family:Syne,sans-serif; font-weight:800; font-size:clamp(40px, 16vw, 86px); line-height:.88; letter-spacing:-.04em;
  background:linear-gradient(120deg, #fff 20%, var(--amber) 55%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.cover-sub{font-family:Syne,sans-serif; font-size:clamp(14px, 4.2vw, 20px); letter-spacing:.28em; margin:10px 0 14px; color:var(--teal); font-weight:700;}
.cover-dek{font-size:clamp(11px, 3.1vw, 14px); line-height:1.45; color:var(--text2); max-width:32ch; margin-bottom:18px;}
.cover-meta{font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.16em; color:var(--mute);}
.reg-marks{position:absolute; inset:0; pointer-events:none; z-index:3;}
.reg-marks i{position:absolute; width:12px; height:12px; border:1px solid rgba(245,185,66,.45);}
.reg-marks i:nth-child(1){top:10px;left:10px} .reg-marks i:nth-child(2){top:10px;right:10px}
.reg-marks i:nth-child(3){bottom:10px;left:10px} .reg-marks i:nth-child(4){bottom:10px;right:10px}
.page-back h2{font-family:Syne,sans-serif; font-weight:800; font-size:clamp(32px, 12vw, 64px); line-height:.92; letter-spacing:-.03em; margin:8px 0 14px;
  color:var(--violet);}

/* TOC */
.page-toc{padding:clamp(28px, 6vh, 52px) clamp(16px, 5vw, 28px) clamp(28px, 5vh, 46px); background:
  linear-gradient(160deg, #12121a, #0a0a10 60%); overflow:auto;}
.page-toc h2{font-family:Syne,sans-serif; font-size:clamp(24px, 8vw, 40px); letter-spacing:-.03em; margin:8px 0 6px;}
.page-toc .dek{font-size:12px; color:var(--text2); margin-bottom:16px; max-width:36ch;}
.toc-grid{display:flex; flex-direction:column; gap:14px;}
.toc-sec{border-left:3px solid var(--c); padding-left:12px;}
.toc-sec h3{font-family:Syne,sans-serif; font-size:13px; letter-spacing:.04em; color:var(--c); margin-bottom:2px;}
.toc-tag{font-size:10px; color:var(--mute); margin-bottom:6px;}
.toc-sec ol{list-style:none; display:flex; flex-direction:column; gap:2px;}
.toc-sec li button{width:100%; display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:baseline;
  text-align:left; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.06);}
.toc-sec .tn{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--c);}
.toc-sec .tt{font-size:11px; font-weight:700; letter-spacing:-.01em;}
.toc-sec .tg{font-size:9px; color:var(--mute); font-family:"IBM Plex Mono",monospace;}

/* IMAGE LEFT */
.idea-img{background:#000; padding:0;}
.idea-img img{width:100%; height:100%; object-fit:cover;}
.img-meta{position:absolute; left:14px; right:14px; bottom:14px; display:flex; gap:10px; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 8px #000; z-index:2;}
.img-meta .badge{background:var(--c); color:#000; font-weight:700; padding:3px 7px; border-radius:2px;}
.img-meta .sec{opacity:.85}
.img-meta .reg{opacity:.5}

/* RIGHT TEXT PAGES */
.page-right{padding:clamp(28px, 6.5vh, 56px) clamp(16px, 5.5vw, 30px) clamp(28px, 5.5vh, 50px); background:
  radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 55%),
  linear-gradient(165deg, #15151e, #0c0c12 70%);
  display:flex; flex-direction:column;}
.page-right h2{font-family:Syne,sans-serif; font-weight:800; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(22px, 7.2vw, 44px); margin:4px 0 8px;}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:clamp(8px, 2.1vw, 10px); letter-spacing:.2em; text-transform:uppercase; color:var(--c); margin-bottom:8px;}
.sub{font-size:clamp(11px, 2.8vw, 14px); color:var(--text2); margin-bottom:12px;}
.desc{font-size:clamp(11.5px, 3vw, 15px); line-height:1.48; color:var(--text2); margin-bottom:14px; max-width:38ch;}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:auto; margin-bottom:10px;
  border-top:1px solid var(--line); padding-top:12px;}
.stats div{display:flex; flex-direction:column; gap:2px;}
.stats em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);}
.stats b{font-size:clamp(11px, 2.9vw, 14px); font-weight:700;}
.stats .flex{color:var(--c); letter-spacing:.05em;}
.hook{font-family:Syne,sans-serif; font-size:clamp(12px, 3.1vw, 16px); line-height:1.3; color:var(--c); font-weight:700; margin-bottom:8px;}

.layout-a .giant{font-family:Syne,sans-serif; font-weight:800; font-size:clamp(64px, 22vw, 120px); line-height:.8; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--c) 55%, transparent); margin:-6px 0 4px; opacity:.9;}
.layout-b .watermark{position:absolute; right:-10px; top:40px; font-family:Syne,sans-serif; font-weight:800; font-size:clamp(100px, 36vw, 200px);
  line-height:1; color:color-mix(in srgb, var(--c) 12%, transparent); letter-spacing:-.08em; pointer-events:none; z-index:0;}
.layout-b h2,.layout-b .sub,.layout-b .desc,.layout-b .stats,.layout-b .hook,.layout-b .rule{position:relative; z-index:1;}
.layout-b .rule{height:3px; width:64px; background:var(--c); margin:0 0 14px;}
.layout-c{flex-direction:row; gap:0; padding-left:0;}
.layout-c .side-num{writing-mode:vertical-rl; transform:rotate(180deg); font-family:Syne,sans-serif; font-weight:800;
  font-size:clamp(42px, 14vw, 72px); letter-spacing:-.04em; color:var(--c); padding:clamp(28px,6vh,52px) 8px clamp(28px,5vh,48px) 14px; border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; min-width:clamp(44px, 10vw, 64px);}
.layout-c .body{padding:clamp(28px,6.5vh,52px) clamp(14px,4vw,22px) clamp(28px,5.5vh,48px) clamp(12px,3.5vw,18px); display:flex; flex-direction:column; flex:1; min-width:0;}
.layout-c .folio{left:70px;}
.layout-d .genre-stamp{position:absolute; top:56px; right:-20px; transform:rotate(12deg);
  font-family:Syne,sans-serif; font-weight:800; font-size:clamp(28px, 9vw, 52px); letter-spacing:-.02em;
  color:color-mix(in srgb, var(--c) 22%, transparent); white-space:nowrap; pointer-events:none;}

.page-end{padding:56px 30px; display:flex; align-items:center;}
.end-inner h2{font-family:Syne,sans-serif; font-size:28px; margin:8px 0 12px;}
.end-inner p{font-size:12.5px; line-height:1.5; color:var(--text2); margin-bottom:10px;}
.end-inner .tiny{font-size:10px; color:var(--mute);}

/* NAV */
.nav{display:flex; align-items:center; gap:12px; padding:10px 16px 16px; z-index:5;}
.nav button{width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  font-size:28px; line-height:1; background:rgba(255,255,255,.04);}
.nav button:active{transform:scale(.96); border-color:var(--lime);}
.progress{flex:1; height:3px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden;}
.progress i{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--amber), var(--teal)); transition:width .3s ease;}

/* DRAWER */
.drawer{position:fixed; inset:0 0 0 auto; width:min(420px,100%); background:rgba(10,10,14,.96);
  border-left:1px solid var(--line); z-index:20; backdrop-filter:blur(16px); overflow:auto;
  padding:16px; animation:slideIn .25s ease;}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
  font-family:Syne,sans-serif; letter-spacing:.06em; text-transform:uppercase;}
.drawer-body .toc-sec{margin-bottom:16px;}

/* PRINT / PDF */
@media print{
  .chrome,.nav,.drawer{display:none!important;}
  body,.app{background:#000; height:auto; display:block; overflow:visible;}
  .stage{padding:0; display:block; overflow:visible;}
  .book{width:100%; height:auto; display:block; perspective:none;}
  .page{position:relative!important; left:auto!important; opacity:1!important; pointer-events:auto!important;
    transform:none!important; width:8.5in; height:11in; margin:0 auto; page-break-after:always; break-after:page;
    box-shadow:none; border:0; animation:none!important;}
  .page-left img{width:100%; height:100%; object-fit:cover;}
}

/* ===== v3 premium motion ===== */
.book{transform-style:preserve-3d}
.page{will-change:transform,opacity; backface-visibility:hidden}
.page.is-flip-out{
  animation: flipOut .42s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: left center;
  z-index: 5;
  box-shadow: -20px 0 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}
.page.is-flip-in{
  animation: flipIn .42s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: right center;
  z-index: 5;
}
@keyframes flipOut{
  0%{transform:rotateY(0); filter:brightness(1); opacity:1}
  70%{filter:brightness(.9); opacity:1}
  100%{transform:rotateY(-78deg); opacity:0; filter:brightness(.75)}
}
@keyframes flipIn{
  0%{transform:rotateY(78deg); opacity:0; filter:brightness(.75)}
  100%{transform:rotateY(0); opacity:1; filter:brightness(1)}
}
/* Replace vw typography clamps with vw-safe equivalents inside pages via @supports */
@supports (height: 1cqh){
  /* keep existing vw in page text — progressive only */
}
.book.flip-forward::after,
.book.flip-back::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background: linear-gradient(90deg, transparent 40%, rgba(0,0,0,.18) 50%, transparent 60%);
  animation: shade .42s ease both;
}
@keyframes shade{0%{opacity:0}40%{opacity:1}100%{opacity:0}}

.reveal-child{
  animation: rise .7s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise{
  from{opacity:0; transform:translate3d(0,18px,0)}
  to{opacity:1; transform:none}
}

.idea-img img,
.page-cover img,
picture.cover-bg,
picture.cover-bg img{
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
picture.cover-bg{position:absolute; inset:0; display:block; width:100%; height:100%;}
picture.cover-bg img{width:100%; height:100%; object-fit:cover;}
.idea-img picture{position:absolute; inset:0; width:100%; height:100%;}
.idea-img picture img{width:100%; height:100%; object-fit:cover;}

/* spine glow */
.book::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:14px; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.35), transparent);
  pointer-events:none; z-index:4; opacity:.55;
}
@media (max-width:820px){
  .book::before{display:none}
  .page.is-flip-out,.page.is-flip-in{animation:none}
}

.reduced-motion .page.is-flip-out,
.reduced-motion .page.is-flip-in,
.reduced-motion .reveal-child,
.reduced-motion .book.flip-forward::after,
.reduced-motion .book.flip-back::after{
  animation:none !important;
}
.reduced-motion .idea-img img,
.reduced-motion .page-cover img{
  transform:none !important; transition:none !important;
}

/* chrome polish */
.chrome{backdrop-filter:blur(16px) saturate(1.2)}
.nav button{transition: transform .2s ease, border-color .2s ease, background .2s ease}
.nav button:hover{border-color:var(--lime); background:rgba(245,185,66,.06)}
.chip{transition: border-color .2s ease, color .2s ease}
.drawer{box-shadow:-24px 0 60px rgba(0,0,0,.5)}


/* cover picture fix */
picture.cover-bg{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;margin:0;padding:0}
picture.cover-bg img, img.cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.page-cover .cover-inner, .page-back .cover-inner{position:relative;z-index:1}

/* drawer above stage */
.drawer{z-index:80 !important; pointer-events:auto}
.drawer[hidden]{display:none !important}
.chrome{z-index:70}


/* fullscreen / immersive chip */
.chip-fs{min-width:34px; text-align:center; font-size:14px; line-height:1;}
html.is-phone-land .chip-fs, html.is-phone .chip-fs{display:inline-flex}
.chip-fs{display:none}
@media (max-width:700px), ((max-height:520px) and (max-width:980px)){
  .chip-fs{display:inline-flex}
}


.nav-fs{display:none; width:auto; height:auto; min-width:34px; border-radius:999px; padding:6px 10px; font-size:14px;}
html.is-phone .nav-fs, html.is-phone-land .nav-fs{display:inline-flex; align-items:center; justify-content:center;}
html.is-immersive .nav-fs{display:inline-flex; border-color:var(--lime); color:var(--lime);}

/* Immersive: hide chrome, keep nav in normal flow so stage keeps height */
html.is-immersive .chrome{display:none !important;}
html.is-immersive .app{grid-template-rows:1fr auto;}
html.is-immersive .nav{padding:4px 10px 6px; gap:8px;}
html.is-immersive .nav button{width:34px; height:34px; font-size:22px;}
html.is-immersive .stage{padding:2px 4px; min-height:0;}
html.is-immersive .book{max-height:100%;}

/* Phone-land typography: keep cover/text inside short pages */
html.is-phone-land .page-cover h1,
html.is-phone-land .page-back h2{
  font-size:clamp(28px, 11vh, 46px); line-height:.9;
}
html.is-phone-land .cover-sub{font-size:clamp(11px, 3.2vh, 15px); letter-spacing:.16em; margin:4px 0 6px;}
html.is-phone-land .cover-dek{font-size:clamp(10px, 2.6vh, 12px); margin-bottom:8px; max-width:36ch;}
html.is-phone-land .cover-kicker,.is-phone-land .cover-meta{font-size:7px;}
html.is-phone-land .cover-content{padding:10px 12px 14px;}
html.is-phone-land .page-toc h2,
html.is-phone-land .page-right h2{font-size:clamp(18px, 5.5vh, 28px);}
html.is-phone-land .page-toc{padding:16px 14px 18px;}
html.is-phone-land .page-right{padding:16px 14px 18px;}
html.is-phone-land .desc,.is-phone-land .sub,.is-phone-land .dek{font-size:clamp(10px, 2.5vh, 12.5px); margin-bottom:8px;}
html.is-phone-land .layout-a .giant{font-size:clamp(36px, 12vh, 64px);}
html.is-phone-land .layout-b .watermark{font-size:clamp(64px, 22vh, 110px); top:24px;}
html.is-phone-land .layout-c .side-num{font-size:clamp(28px, 9vh, 44px); padding:14px 4px;}
html.is-phone-land .stats{padding-top:8px; margin-bottom:6px;}
html.is-phone-land .rh,.is-phone-land .folio{top:8px; bottom:8px; left:12px; right:12px; font-size:7px;}
html.is-phone-land .folio .n{font-size:clamp(12px, 3vh, 16px);}

/* Portrait phone: fill width, tighten chrome a bit more */
html.is-phone:not(.is-phone-land) .page-cover h1{font-size:clamp(36px, 14vw, 64px);}
html.is-phone:not(.is-phone-land) .cover-content{padding:18px 16px 24px;}