/* The header scrolls with the page: fragment targets need no header offset. */
html{scroll-padding-top:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
section[id],main[id]{scroll-margin-top:0}
body{overflow-x:hidden}
main{min-width:0}
.hero{overflow:hidden}
.stories-layout,.book-layout,.offer{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.book-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.offer{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.stories-layout>*,.book-layout>*,.offer>*,.game-intro>*,.game-info>*,.section-top>*,.actions>*{min-width:0}
@media(min-width:761px) and (max-width:1050px){
 .book-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
 .game-intro{display:block}.game-intro>p{max-width:540px;margin-bottom:32px}
 .game-info{flex-wrap:wrap}.game-dates{flex-wrap:wrap}
 .choices{flex-wrap:wrap}.choice{flex:1;min-width:140px}
}
@media(max-width:760px){
 html{scroll-padding-top:0}
 .stories-layout,.book-layout,.offer{grid-template-columns:minmax(0,1fr)}
 .hero h1{font-size:clamp(76px,24vw,165px)}
 .story-copy h2{font-size:clamp(56px,18vw,77px)}
 .playbook h2{font-size:clamp(31px,10vw,43px)}
 .offer h2{font-size:clamp(48px,16vw,78px);line-height:1.02}
 .offer h2 br{display:block}.offer h2 em{margin-left:0}
 .game-intro h2{font-size:clamp(31px,10vw,43px)}
 .closing h2{font-size:clamp(29px,9vw,37px)}
 .section-pad{padding:56px max(20px,6%)}
 .section-top{gap:12px;align-items:flex-start;font-size:9px;letter-spacing:1px}
 .section-top>span:last-child{font-size:8px;line-height:1.7}
 .hero-art{right:0;width:82%;opacity:.55}
 .hero-content{padding-inline:max(20px,6%)}
 .hero-description{font-size:14px;max-width:270px}
 .hero-question{font-size:clamp(27px,8vw,34px)}
 .hero .button,.closing .button{font-size:12px}
 .hero-footnote{font-size:9px}
 .stories-layout{gap:34px}
 .story-copy>p,.book-copy p,.offer-intro>p{font-size:14px}
 .story-copy>.vote-note{font-size:11px}
 .choices{width:100%;gap:10px}
 .choice{width:auto;flex:1;min-width:0;padding:15px 10px;font-size:24px}
 .choice .mono{font-size:9px}
 .episode-composition{width:100%;max-width:350px;padding-right:16px}
 .poster-heading{font-size:clamp(36px,13vw,57px);left:18px;right:12px}
 .poster-top,.poster-bottom{left:16px;right:16px;font-size:7px;letter-spacing:1px}
 .poster-side{right:0;font-size:7px}
 .book-thumbnail{width:94%;max-width:430px}
 .book-copy h3{font-size:clamp(32px,10vw,39px)}
 .release-note{font-size:12px}.release-note small{font-size:11px}
 .premier-offer{padding:22px 18px}
 .offer-top{gap:10px;flex-wrap:wrap;font-size:9px;letter-spacing:1px}
 .price>span{font-size:82px}.price>small{font-size:9px}
 .included li{font-size:14px}.included small{font-size:12px}
 .purchase{padding-inline:16px;gap:12px;font-size:13px}
 .purchase-note,.standard-offer p,.offer-disclosure{font-size:12px}
 .standard-offer .mono{font-size:9px}
 .game-intro>p,.game-info>p{font-size:13px}
 .game-window{width:100%;min-width:0}
 .game-window-top{gap:8px;font-size:8px;letter-spacing:1px}
 .game-window-top span:last-child{font-size:7px}
 .game-dates{gap:20px;flex-wrap:wrap;justify-content:flex-start}
 .game-dates>div{flex:1;min-width:120px}.game-dates .mono{font-size:8px;letter-spacing:1px}
 .interlude-label{gap:12px;align-items:flex-start;letter-spacing:1px}
 .interlude-label>span{max-width:48%;font-size:8px}
 .interlude-message{text-align:right}
 .closing{padding-bottom:160px}
 .closing .actions{align-items:flex-start;flex-direction:column;gap:10px}
 .closing-character{right:7%;width:75px}
 .phone-notification{right:0}
 footer{gap:22px;padding-bottom:100px}
 footer>.mono{line-height:1.8;max-width:100%}
 footer>div{gap:18px;flex-wrap:wrap;font-size:12px}
 .motion-control{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));min-height:40px}
 /* Phone content stays visible during fast scrolling and in-app navigation. */
 .reveal,.motion-ready .reveal.pending{opacity:1;transform:none;transition:none}
}
@media(max-width:600px){
 .site-header{height:112px;padding:10px max(20px,6%) 8px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:center}
 .site-header .brand{justify-self:start;font-size:15px;gap:10px}
 .site-header .brand-character{height:48px;max-width:28px}
 .site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}
 .site-header nav a{min-height:36px;display:flex;align-items:center;padding:7px 0;white-space:nowrap}
 .site-header nav i{margin-left:6px}
 .hero{padding-top:112px;min-height:800px}
 .hero-content{padding-top:32px}
 .hero-content .eyebrow{font-size:8px;letter-spacing:.5px;line-height:1.7}
 .hero-art{top:112px;bottom:52px}
 .manifesto-strip{font-size:11px;gap:8px}
}

/* Every story sprite uses the same native 140:168 proportions and scale. */
.traveler,.closing-character{width:100px;height:120px;aspect-ratio:5/6}
.closing-character{transform-origin:50% 100%;will-change:transform}
.closing-character .sprite{background-image:url('assets/phone-cash-v3.png');background-size:100% 100%}
.closing-character img{width:100%;height:auto;aspect-ratio:5/6}
@media(max-width:760px){.traveler,.closing-character{width:80px;height:96px}}

/* Each section gets one brief cash gust in the space above its label. */
.stories,.playbook{position:relative}
.cash-gust{position:absolute;inset:0 0 auto;height:76px;overflow:hidden;pointer-events:none;contain:layout paint;--gust-rise:36px}
.cash-gust-reverse{transform:scaleX(-1)}
.gust-note{position:absolute;top:0;left:-48px;width:32px;height:16px;background:url('assets/pixel-banknote.svg') center/contain no-repeat;image-rendering:pixelated;opacity:0;--delay:0s;--spin:0deg}
.gust-note:nth-child(2){--delay:.07s;--spin:65deg}
.gust-note:nth-child(3){--delay:.14s;--spin:-45deg}
.gust-note:nth-child(4){--delay:.21s;--spin:100deg}
.gust-note:nth-child(5){--delay:.28s;--spin:-80deg}
.cash-gust.is-running .gust-note{animation:cash-gust 1.9s cubic-bezier(.28,.12,.63,.95) var(--delay) both}
.cash-gust.is-done{display:none}
@keyframes cash-gust{
 0%{transform:translate3d(0,12px,0) rotate(var(--spin));opacity:0}
 8%{opacity:.85}
 32%{transform:translate3d(calc(32vw + 24px),var(--gust-rise),0) rotate(calc(var(--spin) + 100deg))}
 65%{transform:translate3d(calc(65vw + 52px),10px,0) rotate(calc(var(--spin) + 235deg));opacity:.85}
 92%{opacity:.7}
 100%{transform:translate3d(calc(100vw + 100px),var(--gust-rise),0) rotate(calc(var(--spin) + 365deg));opacity:0}
}
.book-copy .creator-prompt{font-size:clamp(18px,2vw,23px);line-height:1.45;color:var(--ink);max-width:30ch;margin-top:25px}
/* A single nonflashing pixel cursor marks an intentional selection. */
.button:after,.choice:after,.nav-purchase:after,.creator-cta:after{content:'';position:absolute;left:-7px;top:calc(50% - 3px);width:6px;height:6px;background:var(--green);opacity:0;pointer-events:none}
.choice,.nav-purchase{position:relative}
.creator-cta{position:relative}.creator-cta:after{background:#497a3e}
@keyframes pixel-select{0%{transform:translateX(-4px);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(hover:hover) and (pointer:fine){
 :is(.button,.choice,.nav-purchase,.creator-cta):hover:after{animation:pixel-select .16s steps(2,end) both}
}
:is(.button,.choice,.nav-purchase,.creator-cta):focus-visible:after{animation:pixel-select .16s steps(2,end) both}
@media(max-width:760px){
 .cash-gust{height:44px;--gust-rise:16px}
 .gust-note:nth-child(n+4){display:none}
 .gust-note{width:26px;height:13px}
 .book-copy .creator-prompt{font-size:20px}
 .creator-cta{font-size:13px;gap:14px;max-width:100%}
}
@media(prefers-reduced-motion:reduce){.cash-gust{display:none}:is(.button,.choice,.nav-purchase,.creator-cta):is(:hover,:focus-visible):after{opacity:1;animation:none}}