/* Foreground and scene have separate space, so the book never sits under copy. */
html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body.scene-locked{overflow:hidden}
.forest{height:100svh;min-height:0}
.stage{position:relative;height:100%;min-height:0;background:radial-gradient(ellipse at 70% 48%,#172419 0%,#080e0b 65%)}
.scene-visual{position:absolute;left:36%;right:2%;top:95px;bottom:95px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.scene-visual canvas{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.scene-visual canvas.final-frame{object-fit:contain}
.shade{background:linear-gradient(90deg,#080e0b 0%,#080e0b66 30%,transparent 39%);pointer-events:none}
.hero-copy{left:6%;top:50%;transform:translateY(-50%);width:29%;max-width:420px;transition:none}
.hero-copy h1{font-size:clamp(76px,7.6vw,125px);line-height:.84;margin-bottom:32px}
.hero-copy .hero-question{font-size:clamp(19px,1.7vw,26px);margin-bottom:28px;line-height:1.5}
.hero-copy .eyebrow{margin-bottom:24px}
.hero-copy .primary{min-width:0;width:100%;max-width:300px;font-size:16px;padding:15px 20px;gap:16px}
.hero-copy .formats{font-size:9px;letter-spacing:.09em}
.forest-controls{bottom:24px}
.forest-controls:focus-within{border-color:#d8b37688}
.spread-preview{margin:0;cursor:default}
.spread-preview:hover img{transform:none}
.author{text-align:left}
.author-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:10%;align-items:center}
.author-copy{font-size:20px;max-width:540px;color:var(--paper)}
.author-copy p{margin:0 0 22px;line-height:1.75}
.author-copy p:last-child{color:var(--muted);font-size:17px}
.author-portrait{margin:0;overflow:hidden;max-width:440px}
.author-portrait img{width:100%;display:block;object-fit:cover}
@media(max-width:1000px){
 header{height:75px}
 nav{gap:20px}nav a:last-child{display:block}
 .forest,.stage{min-height:0}
 .hero-copy{left:5%;right:5%;width:auto;max-width:none;top:105px;transform:none;text-align:center}
 .hero-copy .eyebrow{margin-bottom:16px}
 .hero-copy h1{font-size:70px;line-height:1;margin-bottom:15px}
 .hero-copy h1 br{display:none}
 .hero-copy h1 br::after{content:' '}
 .hero-question br{display:none}
 .hero-copy .hero-question{font-size:19px;margin:0 auto 19px}
 .hero-copy .actions{align-items:center}
 .hero-copy .primary{max-width:270px;min-height:48px;font-size:15px;padding:11px 20px}
 .hero-copy .formats{margin:10px 0 0}
 .scene-visual{top:350px;bottom:90px;left:2%;right:2%}
 .shade{display:none}
 .author-copy{font-size:18px}
}
@media(max-width:650px){
 header{height:68px;padding:0 5%;flex-wrap:wrap;align-content:center;gap:8px}
 header .wordmark{font-size:19px}header .wordmark span{display:none}
 nav{display:flex;gap:13px;order:3;width:100%;justify-content:center;font-size:11px}
 nav a:last-child{display:block}
 .sound{margin-left:auto;padding:7px 10px;font-size:10px}
 .forest,.stage{height:100svh;min-height:0}
 .hero-copy{top:93px}
 .hero-copy .eyebrow{font-size:9px;margin-bottom:12px}
 .hero-copy h1{font-size:58px;margin-bottom:13px;letter-spacing:-.035em}
 .hero-copy .hero-question{font-size:16px;line-height:1.5;margin-bottom:15px}
 .hero-copy .primary{max-width:245px;min-height:44px;font-size:14px}
 .scene-visual{top:305px;bottom:92px;left:0;right:0}
 .forest-controls{bottom:16px;gap:9px;padding:11px 13px}
 .forest-controls>div{flex-basis:100%}
 .scroll-hint{font-size:9px}
 .author-layout{grid-template-columns:1fr;gap:28px}
 .author .eyebrow{margin-bottom:18px}
 .author-copy{font-size:18px}
 .author-copy p:last-child{font-size:16px}
}
@media(max-height:700px) and (min-width:1001px){
 .hero-copy h1{font-size:83px;margin-bottom:25px}
 .hero-copy .eyebrow{margin-bottom:18px}
 .hero-copy .hero-question{font-size:20px;margin-bottom:20px}
}
/* One immersive scene: copy sits over the quiet left side of the forest. */
.scene-visual{inset:0}
.scene-visual canvas{object-fit:cover}
.shade{display:block;background:linear-gradient(90deg,#030907e8 0%,#030907a6 25%,#03090725 48%,transparent 67%),linear-gradient(0deg,#080e0bdd,transparent 24%)}
.hero-copy{left:6%;right:auto;top:50%;width:30%;max-width:430px;transform:translateY(-50%);text-align:left}
.hero-copy h1{font-size:clamp(76px,7.4vw,125px);line-height:.84;margin-bottom:30px}
.hero-copy h1 br{display:block}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy .hero-question{font-size:clamp(19px,1.7vw,26px);line-height:1.5;margin:0 0 27px}
.hero-question br{display:block}
.hero-copy .actions{align-items:flex-start}
.hero-copy .formats{margin-top:16px}
nav a[aria-disabled="true"]{opacity:.55}
.author-layout{grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:9%;align-items:center}
.author-portrait{border:1px solid var(--line);max-width:none}
.author-info h2{margin-bottom:30px}
.author-info .author-copy{font-size:19px}
@media(max-width:1000px){
 .hero-copy{left:6%;width:38%;top:49%}
 .hero-copy h1{font-size:clamp(65px,9vw,88px)}
 .hero-copy .hero-question{font-size:20px}
 .hero-copy .primary{max-width:270px}
 .scene-visual{inset:0}
 .scene-visual canvas{object-position:60% center}
 .author-layout{grid-template-columns:1fr 1fr;gap:6%}
}
@media(max-width:650px){
 .hero-copy{top:47%;left:7%;width:58%}
 .hero-copy h1{font-size:70px;margin-bottom:24px;line-height:.84}
 .hero-copy .eyebrow{margin-bottom:20px}
 .hero-copy .hero-question{font-size:18px;margin-bottom:23px}
 .hero-copy .primary{font-size:13px;padding:12px 13px;max-width:240px;gap:10px}
 .hero-copy .formats{font-size:8px;max-width:210px;line-height:1.8}
 .scene-visual canvas{object-position:64% center}
 .shade{background:linear-gradient(90deg,#030907e0,#03090790 40%,#03090710 80%),linear-gradient(0deg,#080e0bdd,transparent 24%)}
 .author-layout{grid-template-columns:1fr;gap:32px}
 .author-portrait{max-width:380px}
 .author-info .author-copy{font-size:18px}
}

.legal-link{font-size:12px;color:var(--muted)}.legal-link:hover,.offer-reference a:hover{color:var(--gold)}.offer-reference{font-size:13px;line-height:1.7}.offer-reference a{color:var(--gold);text-decoration:underline;text-underline-offset:4px}

/* Touch devices play the sequence themselves; the page stays freely scrollable. */
.scene-autoplay .scrub-label,.scene-autoplay #scrub{display:none}
.scene-autoplay .forest-controls{justify-content:space-between;flex-wrap:wrap}
.scene-autoplay .forest-controls>div{flex:1}
.scene-autoplay .scroll-hint{white-space:normal}
@media(max-width:650px){
 .scene-autoplay .hero-copy{top:91px;left:6%;right:6%;width:auto;max-width:none;transform:none;text-align:center}
 .scene-autoplay .hero-copy h1{font-size:clamp(44px,12vw,60px);line-height:1;margin-bottom:10px}
 .scene-autoplay .hero-copy h1 br{display:none}
 .scene-autoplay .hero-copy h1 em{margin-left:.15em}
 .scene-autoplay .hero-copy .eyebrow{margin-bottom:10px}
 .scene-autoplay .hero-copy .hero-question{font-size:16px;line-height:1.35;margin-bottom:13px}
 .scene-autoplay .hero-question br{display:none}
 .scene-autoplay .hero-copy .actions{align-items:center}
 .scene-autoplay .hero-copy .formats{margin-top:8px;max-width:none}
 .scene-autoplay .scene-visual{top:290px;bottom:76px;left:0;right:0}
 .scene-autoplay .scene-visual canvas{object-fit:contain;object-position:center}
 .scene-autoplay .shade{display:none}
 .scene-autoplay .forest-controls{padding:10px 12px;bottom:12px;gap:5px}
 .scene-autoplay .forest-controls>div{flex-basis:auto}
 .scene-autoplay .scroll-hint{font-size:9px;max-width:145px;text-align:right}
}
@media(max-width:650px) and (max-height:650px){
 .scene-autoplay .hero-copy{top:80px}
 .scene-autoplay .hero-copy h1{font-size:40px}
 .scene-autoplay .hero-copy .formats{display:none}
 .scene-autoplay .scene-visual{top:245px;bottom:67px}
}