:root{
  --cheese-2:#ffd94a; --cheese-3:#f9b936; --pep:#c23a2a; --crust:#6b3c1a; --ink:#1d140f;
  --paper:#fff4e4; --paper-edge:#e7dcc7;
  --shadow:0 10px 30px rgba(40,20,0,.18); --shadow-lg:0 18px 60px rgba(40,20,0,.28);
  --pill:linear-gradient(135deg,var(--cheese-2),var(--cheese-3));
  --header-h: 68px;
  --footer-h: 56px;
  --footer-bg-1:#0f2e43;
  --footer-bg-2:#0b2536;
  --footer-grid:#ffffff0d;
  --pz-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeDropShadow dx='0.6' dy='1' stdDeviation='0.8' flood-color='black' flood-opacity='0.35'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23s)' fill='%23f9b936' stroke='%233b220e' stroke-width='1.6' d='M4,3 L16,37 L20,22 L35,18 Z'/%3E%3Ccircle cx='23' cy='15' r='2.8' fill='%23c23a2a' stroke='%23f6d7c5' stroke-width='0.6'/%3E%3Ccircle cx='28' cy='18' r='2.4' fill='%23c23a2a' stroke='%23f6d7c5' stroke-width='0.6'/%3E%3Ccircle cx='19' cy='19' r='2.4' fill='%23c23a2a' stroke='%23f6d7c5' stroke-width='0.6'/%3E%3C/svg%3E") 3 3, auto;
}

html, body { cursor: var(--pz-cursor) !important; }
*, *:hover, *:active, *:focus, *::before, *::after {
  cursor: var(--pz-cursor) !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
::selection{ background: transparent; }
::-moz-selection{ background: transparent; }

*{ box-sizing:border-box }
html,body{ height:100% }
html{
  scroll-behavior:smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-h);
  overscroll-behavior-y: contain;
}
body{
  margin:0;
  font-family:"Quicksand",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:#1a120c;
  overflow-x:hidden;
  padding-top: var(--header-h);
  padding-bottom: 0;
}
.container{ width:min(1200px,92vw); margin-inline:auto }

.claw-bg{ position:fixed; inset:0; z-index:-2; }
.claw-bg .base{ position:absolute; inset:0; background: linear-gradient(180deg, #2a1a10, #1e140c 55%, #1a120c); }
.vignette{ position:absolute; inset:0; background: radial-gradient(1000px 500px at 50% 10%, transparent 55%, rgba(0,0,0,.3) 90%); }
.scratch{ position:absolute; overflow:hidden; border-radius:26px; border:8px solid #3f2413; box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.25); }
.scratch .sky{ width:100%; height:100%; display:block; background:#0b1020; }
.s1{ left:-6vw; right:30vw; top:12vh; height:18vh; transform:rotate(-12deg); }
.s2{ left:10vw; right:10vw; top:44vh; height:18vh; transform:rotate(-8deg); }
.s3{ left:30vw; right:-6vw; top:72vh; height:18vh; transform:rotate(-14deg); }

.pizza-rain{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.pizza-rain canvas{ display:block; width:100%; height:100%; image-rendering: optimizeQuality; }
@media (prefers-reduced-motion: reduce){ .pizza-rain{ display:none; } }

.intro-lock{ overflow:hidden }
#intro{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:radial-gradient(1200px 600px at 50% 30%,#1c120b,#0f0906 85%);
}
.intro-inner{ position:relative; width:min(520px,92vw) }
.door-stage{ position:relative; width:100%; aspect-ratio:579/888; margin-inline:auto; cursor: inherit; }
.door-stage *{ pointer-events:none; }
.door-stage .door,.intro-peek{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.door-closed{ z-index:5; display:block }
.door-open{ display:none }
.door-open.back{ z-index:1 }
.door-open.front{ z-index:4 }
.intro-peek{
  z-index:3; opacity:0; transform:translateX(6%);
  transition:transform .75s cubic-bezier(.18,.9,.2,1),opacity .75s ease-out;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
.door-stage.open .door-closed{ display:none }
.door-stage.open .door-open{ display:block }
.door-stage.open .intro-peek{ opacity:1; transform:translateX(0) }
.intro-hint{
  position:absolute; left:50%; bottom:-2.2rem; transform:translateX(-50%);
  color:#f6e7d2; font-family:"Patrick Hand",cursive; font-size:1.2rem; opacity:.85;
}

.knock-tag{
  position:absolute; z-index:6;
  padding:.35rem .6rem; border-radius:10px;
  background:#fffdf7; border:2px solid #2a1a10; color:#2a1a10;
  font-family:"Patrick Hand", cursive; font-size:1rem;
  box-shadow:0 4px 0 #2a1a10;
  pointer-events:none; opacity:0; transform: translate3d(0,8px,0);
  will-change: transform, opacity;
}
@keyframes riseLeft{ 0%{transform:translate3d(0,8px,0);opacity:0;}25%{opacity:1;}100%{transform:translate3d(-28px,-56px,0);opacity:0;} }
@keyframes riseRight{ 0%{transform:translate3d(0,8px,0);opacity:0;}25%{opacity:1;}100%{transform:translate3d(28px,-56px,0);opacity:0;} }
.knock-left{ left:22%; top:48%; animation: riseLeft .95s ease-out both; }
.knock-right{ right:22%; top:48%; animation: riseRight 1.05s ease-out .12s both; }

/* header */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h); z-index: 2000;
  background: rgba(24,16,10,.78);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(0,0,0,.45);
}
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; height:100% }
.brand{ display:flex; gap:.6rem; align-items:center; padding-inline:0.5rem }
.brand .title{
  font-family:"Fredoka",system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.1rem, 1.7vw, 1.6rem); margin:0;
  letter-spacing:.4px; color:#f8efe4;
}
.token-pill{ display:inline-block; font-family:"Patrick Hand",cursive; font-size:1.05rem; padding:.25rem .6rem; border-radius:999px; color:#3b220e; background:var(--pill); box-shadow:var(--shadow); letter-spacing:.5px }
.cta-bar{ display:flex; gap:.5rem; padding-right:.5rem }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.82rem 1.15rem; border-radius:12px; border:2px solid #22160c0d; font-weight:800; text-decoration:none; transition:transform .05s ease,box-shadow .2s ease,background .2s ease; user-select:none; line-height:1 }
.btn:active{ transform:translateY(1px) scale(.99) }
.btn-primary{ background:var(--pill); color:#3b220e }
.btn-ghost{ background:#fffdf7; color:#3b220e }
.btn:hover{ box-shadow:var(--shadow-lg) }
.btn-ink{ position:relative; border:3px solid #2a1a10; box-shadow:0 6px 0 #2a1a10 }

.hero-grid{
  position:relative; z-index:0;
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 2vw, 28px);
  align-items:center;
  padding: clamp(18px, 2.2vw, 26px);
  background:var(--paper);
  border-radius:26px;
  border:4px solid #2a1a10;
  box-shadow: 0 8px 0 #2a1a10, 0 24px 80px rgba(0,0,0,.25), inset 0 0 0 14px var(--cheese-2);
}
.hero-grid::before{
  content:""; position:absolute; inset:-14px; border-radius:34px; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 40%, #8b4a1f 0 60%, #6e3b1a 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 8px 18px rgba(255,220,170,.15);
  z-index:-1;
}
.hero-title{
  font-family:"Fredoka", system-ui; font-weight:800; line-height:1.05;
  font-size:clamp(2rem, 3.6vw, 3.2rem); color:#2b1a10;
  text-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.hero-title span{ display:block; }
.lede{ margin:.6rem 0 1rem; font-size:1.05rem; line-height:1.6 }
.highlight{ background:linear-gradient(90deg,#fff0b9,#ffe07e); padding:.05rem .25rem; border-radius:6px }
.contract-ink{ margin:.6rem 0 1rem; background:#fff; border:3px solid #2a1a10; border-radius:12px; padding:.6rem .7rem; position:relative; box-shadow:0 6px 0 #2a1a10; }
.contract-row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.contract-row .label{ font-weight:800; color:#2a1a10 }
.contract-row code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff6e7; border:2px dashed #e2cfb0; border-radius:8px; padding:.35rem .5rem }
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap }
.hero-right{ display:grid; place-items:center; position:relative }
.art-round{
  position:relative; width:min(520px, 36vw); aspect-ratio:1 / 1; border-radius:50%;
  background: radial-gradient(120% 120% at 50% 40%, #fff1cc 0 55%, #ffe7bd 60%, #ffe0b1 100%);
  box-shadow:0 10px 0 #2a1a10, 0 26px 80px rgba(0,0,0,.25); border:4px solid #2a1a10;
}
.art-round .ring{ position:absolute; inset:-14px; border-radius:50%; border:10px solid #ffda6a; box-shadow: inset 0 0 0 10px #2a1a10 }
.hero-art{
  position:absolute; inset:0; margin:auto; width:82%; height:82%; object-fit:contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.25)); opacity:1; transition: opacity .4s ease;
}

.dim{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dim.dim-1{
  background: url("/static/img/house.png") center center / cover no-repeat #2c1f16;
  position: relative;
}
.dim.dim-1::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.28);
  z-index:0;
}
.dim.dim-1 .dim-inner{ position:relative; z-index:1; }

.dim.dim-2{
  --bg1:#070914;
  --bg2:#141a37;
  background: radial-gradient(120% 120% at 50% 40%, var(--bg2) 0%, var(--bg1) 100%);
  position: relative; overflow:hidden;
}
.dim.dim-2::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1000px 600px at 50% 30%, transparent 55%, rgba(0,0,0,.45) 95%);
  z-index:0;
}
.dim.dim-2::after{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(rgba(255,255,255,.18) 2px, transparent 3px) 10% 20% / 120px 120px,
    radial-gradient(rgba(173,201,255,.16) 1.6px, transparent 2.6px) 60% 40% / 90px 90px,
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 2px) 20% 80% / 70px 70px;
  animation: driftDim2 42s linear infinite;
  filter: blur(.2px);
  z-index:0;
  opacity:.55;
}
@keyframes driftDim2{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.03); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}
.dim.dim-2 .dim-inner{ position:relative; z-index:1; }

.dim.dim-3{
  --bg1:#1a0810;
  --bg2:#3a1038;
  background: radial-gradient(120% 120% at 50% 40%, var(--bg2) 0%, var(--bg1) 100%);
  position: relative; overflow:hidden;
}
.dim.dim-3::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(700px 500px at 60% 40%, rgba(255,90,120,.12) 0%, transparent 80%);
  animation: dim3glow 9s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes dim3glow{
  0%  { opacity:.18; transform: scale(1); }
  100%{ opacity:.32; transform: scale(1.05); }
}
.dim.dim-3::after{
  content:"";
  position:absolute; inset:-12%;
  background:
    radial-gradient(rgba(255,140,140,.25) 2px, transparent 3px) 20% 30% / 120px 120px,
    radial-gradient(rgba(255,210,160,.18) 1.6px, transparent 2.6px) 70% 60% / 90px 90px,
    radial-gradient(rgba(255,120,120,.15) 1px, transparent 2px) 35% 85% / 70px 70px;
  animation: driftDim3 36s linear infinite;
  filter: blur(.3px);
  z-index:0;
  opacity:.6;
}
@keyframes driftDim3{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(3%, -1.5%, 0) scale(1); }
}
.dim.dim-3 .dim-inner{ position:relative; z-index:1; }

.dim-inner{
  position: relative;
  width: min(1200px, 92vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 2vw, 28px);
  align-items: center;
}

.dim-label{
  position: absolute;
  top: clamp(10px, 4vh, 28px);
  left: clamp(10px, 5vw, 60px);
  z-index: 6;
  font-family: "Patrick Hand", cursive;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: 1px;
  color: #ffe7bd;
  background: #2a1a10cc;
  border: 3px solid #2a1a10;
  border-radius: 12px;
  padding: .35rem .6rem;
  box-shadow: 0 6px 0 #2a1a10;
}

.dim .falling{
  position: absolute;
  top: 50%;
  z-index: 3;
  width: clamp(180px, 28vw, 420px);
  transform: translate3d(0, -50%, 0) rotate(0deg);
  will-change: transform;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.dim[data-side="left"]  .falling{ left: clamp(8px, 6vw, 80px); }
.dim[data-side="right"] .falling{ right: clamp(8px, 6vw, 80px); }

.dim-wipe.above{
  position: absolute;
  z-index: 2;
  width: min(44ch, 38vw);
  pointer-events: none;
  top: 0;
  left: 0;
}
.wipe-text{
  font-family: "Patrick Hand", cursive;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1.5;
  color: rgba(255,249,240,.98);
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  filter: blur(2px);
}
.wipe-text.align-left  { text-align: left; }
.wipe-text.align-right { text-align: right; }
.dim.wipe-start .wipe-text{
  animation:
    wipeReveal 900ms cubic-bezier(.2,.7,.2,1) forwards,
    wipeDeBlur 900ms ease-out forwards;
}
@keyframes wipeReveal{ from{clip-path:inset(0 100% 0 0);opacity:0;} to{clip-path:inset(0 0 0 0);opacity:1;} }
@keyframes wipeDeBlur{ from{filter:blur(2px);} to{filter:blur(0);} }

.card-ink{
  background:#fff9f0;
  border:4px solid #2a1a10;
  border-radius:20px;
  box-shadow: 0 10px 0 #2a1a10, 0 28px 80px rgba(0,0,0,.25), inset 0 0 0 10px var(--cheese-2);
  padding: clamp(16px, 2vw, 22px);
  position: relative;
  z-index: 4;
}
.dim-art{
  width: 100%; height: auto; object-fit: contain; display:block; margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.3));
}
.left-col{ grid-column:1; }
.right-col{ grid-column:2; }

.book{
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .6rem;
  max-height: min(70vh, 640px);
  overflow: hidden;
  font-family: "Patrick Hand", cursive;
}
.book-head{ display:flex; flex-direction:column; gap:.25rem; }
.book-meta{ display:flex; align-items:center; gap:.35rem; font-weight:800; color:#2a1a10; opacity:.85; }
.book-dot{ opacity:.6; }
.book-title{ margin:0; font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height:1.1; color:#2a1a10; }

.book-page{
  position: relative;
  background: linear-gradient(180deg,#fffdf7,#fff7e6);
  border: 3px solid #2a1a10;
  border-radius: 14px;
  padding: clamp(12px,1.6vw,18px);
  line-height: 1.6;
  color:#2a1a10;
  overflow:auto;
  box-shadow: inset 0 0 0 8px #ffebba, 0 8px 0 #2a1a10;
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, filter .45s ease;
  will-change: transform, box-shadow, filter;
  white-space: pre-wrap;
}
.book-page.flip{
  transform: rotateY(-8deg) translateZ(0);
  filter: brightness(0.98);
  box-shadow: inset 0 0 0 8px #ffe29a, 0 10px 0 #2a1a10, 0 30px 50px rgba(0,0,0,.18);
}
.book-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.book-nav{ min-width:96px; height:40px; padding:0 .9rem; font-family:"Fredoka", system-ui, sans-serif; font-weight:900; background:#fffdf7; }
.book-index{ font-weight:900; letter-spacing:.5px; color:#2a1a10; }

.chapter-photo-frame{
  position: absolute;
  top: 10px;
  right: 10px;
  width: clamp(120px, 32%, 220px);
  transform: rotate(2.4deg);
  z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.chapter-photo-frame::before{
  content:"";
  position:absolute;
  top:-10px; left:22%;
  width: 56%;
  height: 16px;
  background: #f5e8b3cc;
  transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.08);
  border-radius: 3px;
}
.chapter-photo-frame img{
  display:block;
  width:100%; height:auto;
  background:#fffdf7;
  border:3px solid #1d140f;
  border-radius:12px;
  box-shadow: 0 6px 0 #1d140f, 0 24px 60px rgba(0,0,0,.18), inset 0 0 0 8px #ffe7bd;
}

.chapter-body{ position: relative; z-index: 1; }

.gallery-grid{
  display:grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(22px, 3.2vw, 40px);
  align-items: stretch;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--paper);
  border-radius: 26px;
  border: 4px solid #2a1a10;
  box-shadow: 0 8px 0 #2a1a10, 0 24px 80px rgba(0,0,0,.25), inset 0 0 0 14px var(--cheese-2);
  min-height: clamp(380px, 56vh, 640px);
}
.gallery-title{
  font-family:"Fredoka", system-ui; font-weight:900;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05; color:#2a1a10; margin:0 0 .6rem;
}
.gallery-lede{ margin:.2rem 0 .6rem; line-height:1.6; max-width: 48ch; }
.gallery-caption{ margin:.35rem 0 1rem; font-size:1.05rem; line-height:1.55; color:#2a1a10; }
.gallery-controls{ display:flex; align-items:center; gap:.6rem; margin:.5rem 0 1rem; }
.gallery-pager{ font-weight:900; color:#2a1a10; min-width:3.8rem; text-align:center; letter-spacing:.5px; }
.gallery-prev,.gallery-next{
  width:46px; height:46px; border-radius:12px;
  display:inline-grid; place-items:center; font-weight:900;
  background:#fffdf8; border:3px solid #2a1a10; box-shadow:0 6px 0 #2a1a10;
}
.gallery-prev:active,.gallery-next:active{ transform: translateY(1px); }

.gallery-links{ display:flex; gap:.5rem; flex-wrap:wrap; }
.gallery-links .tab{
  background:#fff6e7; border:2px solid #2a1a10; border-radius:10px;
  padding:.45rem .7rem; text-decoration:none; color:#2a1a10; font-weight:900;
}
.gallery-links .tab:hover{ background:#fff1c8; }

.box-stack{
  position:relative; width:100%; max-width: min(920px, 60vw);
  margin-left:auto; display:grid; align-items:center;
}
.box-back,.box-frame{
  border-radius: 16px; border: 4px solid #1d140f;
  box-shadow: 0 16px 0 #1d140f, 0 34px 110px rgba(0,0,0,.35);
}
.box-back{
  position:absolute; inset: 0; background:#ffe4ba; border-color:#1b130e; z-index:0;
  transform-origin: 50% 50%;
}
.box-back.b1{ transform: rotate(-6deg) translate(-12px, -14px) scale(.98); }
.box-back.b2{ transform: rotate(8deg) translate(16px, 16px) scale(.98); background:#ffcf86; }
.box-frame{ position:relative; z-index:1; background:#000; aspect-ratio: 16 / 11; overflow:hidden; }
.box-frame::before, .box-frame::after { content:none !important; }
.box-slides{ list-style:none; margin:0; padding:0; position:relative; width:100%; height:100%; }
.box-slide{
  position:absolute; inset:0; opacity:0;
  transform: scale(.985) translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  display:grid; place-items:center;
}
.box-slide.is-active{ opacity:1; transform: scale(1) translateY(0); }
.box-slide img{ width:100%; height:100%; object-fit:cover; border:0; box-shadow:none; }

body{ padding-bottom: 0 !important; }
.site-footer{ position: fixed; left:0; right:0; bottom:0; height:0 !important; background:none !important; border:0 !important; box-shadow:none !important; color:inherit; pointer-events:none; z-index:1800; cursor:inherit !important; }
.site-footer::before, .site-footer::after{ content:none !important; }
.site-footer .inner{ height:0 !important; padding:0 !important; display:block !important; }
.footer-left{ display:none !important; }
.site-footer .btn-x{
  position: fixed !important;
  right: clamp(10px, 2vw, 16px);
  bottom: clamp(10px, 2vw, 14px);
  z-index: 2001;
  pointer-events: auto;
  text-decoration:none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  display:inline-grid; place-items:center;
  height:36px; padding:0 14px;
  background:#d9e9ff; color:#0a2333; font-weight:900;
  border:3px solid #0b2a3e; border-radius:6px;
  box-shadow:0 4px 0 #0b2a3e;
  text-transform:uppercase; letter-spacing:.3px;
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
  cursor: var(--pz-cursor) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.site-footer .btn-x:hover{ filter:brightness(1.04); }
.site-footer .btn-x:active{ transform:translateY(1px); box-shadow:0 3px 0 #0b2a3e; }

.snap{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100svh;
  display:grid; place-items:center;
  padding: clamp(14px, 2vw, 24px);
}

@media (max-width: 1100px){
  .gallery-grid{ grid-template-columns: 1fr; min-height: unset; }
  .box-stack{ max-width: min(820px, 92vw); margin: 10px auto 0; }
}
@media (max-width: 820px){
  .chapter-photo-frame{
    position: relative;
    top: 0; right: 0; margin: 0 auto 10px auto;
    transform: rotate(1.2deg);
    width: clamp(160px, 60%, 320px);
    display:block;
  }
}
@media (max-width: 680px){
  html { scroll-snap-type: none; }
}
@media (max-width: 768px){
  body { padding-top: var(--header-h); }
  .site-header .inner { padding-inline: 10px; }
  .brand .title { font-size: clamp(1rem, 4.5vw, 1.25rem); }
  .token-pill { font-size: .95rem; }
  .cta-bar .btn { padding: .7rem .95rem; }

  .hero-grid{ grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .hero-title{ font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.08; }
  .lede { font-size: 1rem; }
  .cta-row .btn{ width: 100%; justify-content: center; }
  .hero-right { order: 2; }
  .hero-left  { order: 1; }

  .dim-inner{ grid-template-columns: 1fr; gap: 16px; }
  .dim .falling{ width: clamp(160px, 42vw, 360px); }
  .book{ max-height: none; }
  .dim-label{ left: 14px; top: 12px; }
  .left-col, .right-col { grid-column: 1; }
  .dim-wipe.above{ width: min(46ch, 88vw); }
}
@media (max-width: 480px){
  .token-pill { font-size: .9rem; padding: .2rem .5rem; }
  .cta-bar .btn { padding: .65rem .85rem; font-size: .95rem; }
  .hero-title{ font-size: clamp(1.4rem, 8vw, 1.8rem); }
  .dim .falling{ width: clamp(140px, 52vw, 320px); }
}

@media (max-width: 480px){

  .dim-inner {
    gap: 12px;
    padding-inline: 6vw;
  }

  .dim .falling {
    width: clamp(120px, 58vw, 240px);
    position: relative;
    top: auto;
    transform: none !important;
    margin: 0 auto 10px;
    display: block;
  }

  .dim-wipe.above {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 0.6rem;
    left: 0;
    right: 0;
    transform: none !important;
  }
  .wipe-text {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    text-align: center !important;
  }

  .book {
    max-height: unset;
    grid-template-rows: auto 1fr auto;
  }
  .book-page {
    font-size: 0.95rem;
    padding: 14px;
    line-height: 1.5;
  }
  .book-nav {
    min-width: 72px;
    height: 38px;
    font-size: 0.9rem;
  }

  .chapter-photo-frame {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto 12px;
    width: clamp(140px, 70%, 260px);
    transform: rotate(1.2deg);
  }

  .dim-label {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
  }

  .cta-row .btn,
  .book-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .dim.dim-1::before,
  .dim.dim-2::before,
  .dim.dim-3::before {
    background: rgba(0,0,0,.35);
  }
}