/* LANDING-4: progressive paging. Without JS every section remains ordinary flow. */
body.landing-page{padding-top:var(--site-bar-height,56px)}
html body.landing-page>.nav.nav-v1{position:fixed;inset:0 0 auto;z-index:30}
html:has(body.landing-page.shelf-reading){overflow:hidden;scroll-snap-type:none}
#landingStyleRows{display:contents}
.landing-slide{position:relative;isolation:isolate;min-height:calc(100dvh - var(--site-bar-height,56px));scroll-margin-top:var(--site-bar-height,56px);background:var(--site-page)}
.landing-paged{scroll-snap-type:y mandatory;scroll-padding-top:var(--site-bar-height,56px)}
.landing-paged .landing-slide{height:calc(100dvh - var(--site-bar-height,56px));scroll-margin-top:0;scroll-snap-align:start;scroll-snap-stop:always}
.landing-paged.landing-moving{scroll-snap-type:none}
.landing-slide.style-slide{display:flex;flex-direction:column;justify-content:center}
.style-slide>.landing-style-row{flex:none;width:100%;padding:32px 56px;border:0;margin:0;gap:64px}
.style-slide .landing-style-copy{position:relative;z-index:1}
#paste-up .landing-style-copy,#image-studio .landing-style-copy{grid-column:2;grid-row:1}
#paste-up .landing-style-art,#image-studio .landing-style-art{grid-column:1;grid-row:1}
.slide-background{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.slide-background img{width:100%;height:100%;object-fit:cover;display:block}
.slide-background img:not([src]){visibility:hidden}
.style-slide:has(.slide-background) .landing-style-copy p{color:var(--site-ink)}
/* A soft page-colour gradient, confined to the text column; never a panel. */
.style-slide:has(.slide-background) .landing-style-copy::before{content:"";position:absolute;z-index:-1;inset:-40px calc(-1 * var(--wash-edge,40px));background:rgba(254,254,244,var(--slide-wash,0));mask-image:linear-gradient(to right,transparent,#000 var(--wash-edge,40px),#000 calc(100% - var(--wash-edge,40px)),transparent),linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-composite:intersect;pointer-events:none}
.style-slide:has(.slide-background) .landing-book-hint{color:var(--site-ink);text-shadow:0 0 12px var(--site-page),0 0 16px var(--site-page),0 0 20px var(--site-page)}
.style-slide .landing-book img{box-shadow:none}
#how-it-works.landing-slide{display:flex;flex-direction:column;padding:32px 56px;border:0}
.how-content{margin:auto 0;flex:none}
.how-content>h2{margin-bottom:36px}
.slide-explore{align-self:center;flex:none;border:0;background:none;color:var(--site-muted);font:14px/1.4 var(--site-body);padding:12px;min-height:44px;margin-top:32px;cursor:pointer}
.slide-explore svg{display:block;width:20px;height:20px;margin:8px auto 0;fill:none;stroke:currentColor;stroke-width:1.5;animation:slide-chevron 2.4s ease-in-out infinite}
.explore-touch{display:none}
@keyframes slide-chevron{50%{transform:translateY(5px)}}
.landing-dots{position:fixed;right:8px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;z-index:20}
.landing-paged .landing-dots{display:flex}
.landing-dots button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;color:var(--site-ink)}
.landing-dots button::before{content:"";width:6px;height:6px;border:1px solid currentColor;border-radius:50%;background:var(--site-page)}
.landing-dots button[aria-current=true]::before{background:currentColor}
.landing-dots button:focus-visible{outline:2px solid var(--site-ink);outline-offset:-2px}
body:has(.shelf-reader) .landing-dots{visibility:hidden}
#image-studio>.landing-style-row{margin-top:auto;margin-bottom:auto}
#image-studio>.landing-footer{flex:none;width:100%;margin-top:0;padding:16px 56px}
#image-studio .studio-step-picture{max-height:240px}
@media(hover:none) and (pointer:coarse){.landing-paged .landing-dots{display:none}.explore-fine{display:none}.explore-touch{display:inline}}
@media(max-width:820px){
 .style-slide{--wash-edge:16px}
 .style-slide>.landing-style-row{padding:24px 16px;gap:16px}
 #how-it-works.landing-slide{padding:24px 16px}
 .how-content>h2{margin-bottom:16px}
 #image-studio>.landing-style-row{padding:16px;gap:12px}
 #image-studio .landing-studio-steps{gap:10px 12px}
 #image-studio .studio-step-picture{width:96px;height:128px;aspect-ratio:3/4}
 #image-studio .landing-studio-steps figcaption{margin-top:4px;line-height:1.3;font-size:14px}
 #image-studio .landing-studio-steps figcaption span{display:inline;margin-right:6px}
 #image-studio .landing-style-label{margin-bottom:4px}
 #image-studio .landing-style-copy h2{margin-bottom:8px}
 #image-studio .landing-style-copy>a{margin-top:4px}
 #image-studio .landing-style-copy>p:not(.landing-style-label){font-size:15px;line-height:1.4}
 #image-studio>.landing-footer{padding:8px 16px}
 #image-studio>.landing-footer nav{margin-bottom:0;gap:16px}
 .landing-top .hero-picture{height:min(125vw,calc(100dvh - var(--site-bar-height,56px) - var(--landing-offer) - var(--hero-actions-height)))}
}
@media(prefers-reduced-motion:reduce){.slide-explore svg{animation:none}}

#art-collection .landing-style-copy,#more-styles .landing-style-copy{grid-column:1;grid-row:1}
#art-collection .landing-style-art,#more-styles .landing-style-art{grid-column:2;grid-row:1}
/* LANDING-ASSETS-1: height-aware desktop scale; touch keeps the approved layout. */
@media(min-width:821px) and (hover:hover) and (pointer:fine){
 .landing-slide{--slide-heading:clamp(36px,4.9vh,48px);--slide-copy:clamp(17px,2.12vh,21px);--wash-edge:32px}
 .style-slide>.landing-style-row{padding:clamp(24px,4vh,40px) 32px;gap:32px;grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
 #paste-up>.landing-style-row,#image-studio>.landing-style-row{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
 .style-slide .landing-style-copy{max-width:560px}
 .landing-page :is(.landing-style-copy h2,#how-it-works h2){font-size:var(--slide-heading);line-height:1.12}
 .landing-page .landing-style-copy>p:not(.landing-style-label),.landing-page .landing-steps p{font-size:var(--slide-copy);line-height:1.5}
 .landing-page .landing-style-copy .landing-style-label{font-size:14px}
 .landing-page .landing-style-copy>a{font-size:17px}
 .style-slide .landing-style-art{max-width:100%}
 .style-slide .landing-book picture{max-height:58vh}
 .style-slide .landing-book img{max-height:58vh;object-fit:contain}
 .style-slide .landing-style-art>img{max-height:58vh;object-fit:contain}
 #how-it-works.landing-slide{padding:32px 56px}
 #how-it-works .step-art{width:36.4px;height:36.4px}
 #how-it-works h3{font-size:26px}
 #how-it-works .how-content>h2{margin-bottom:clamp(24px,4vh,40px)}
 #how-it-works .slide-explore{margin-top:clamp(12px,3vh,32px)}
 #image-studio .studio-step-picture{max-height:none}
 #image-studio .landing-studio-steps{gap:16px}
}
@media(max-width:820px) and (hover:none) and (pointer:coarse){
 #art-collection .landing-style-row:has(.landing-book){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
 #paste-up .landing-style-row:has(.landing-book){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
}

/* Touch paging is programmatic. Native momentum/snap never owns this document. */
html.landing-touch-paged{overflow:hidden;overscroll-behavior:none;scroll-snap-type:none;scrollbar-width:none}
html.landing-touch-paged::-webkit-scrollbar{display:none}
.landing-touch-paged body.landing-page{overscroll-behavior:none;touch-action:pan-x pinch-zoom}
.landing-touch-paged .landing-slide{height:calc(var(--landing-viewport-height,100dvh) - var(--site-bar-height,56px));min-height:0;scroll-snap-align:none}
.landing-touch-paged body.shelf-reading{touch-action:auto}

/* LANDING-MOBILE-1: phones only; tablet and desktop remain above. */
.hero-scroll-cue{display:none}
@media(max-width:599px){
 .landing-hero,body:has(#firstBookOffer:not([hidden])) .landing-hero{height:calc(100dvh - var(--site-bar-height,56px) - var(--landing-offer,0px));min-height:0;display:block}
 .landing-top .hero-picture{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0}
 .landing-hero img{object-fit:cover;object-position:var(--hero-tall-focal)!important}
 .hero-copy{position:absolute;left:0;right:0;bottom:88px;z-index:2;width:auto;max-width:none;display:flex;gap:12px;padding:0 24px;background:none;color:var(--hero-ink);--hero-ink:inherit;--hero-halo:254,254,244}
 .landing-hero[data-ink="light"] .hero-copy{--hero-ink:var(--site-page);--hero-button-text:var(--site-ink);--hero-halo:51,51,51}
 .landing-hero[data-ink="dark"] .hero-copy{--hero-ink:var(--site-ink);--hero-button-text:var(--site-page)}
 .landing-page .hero-copy h1,.hero-copy .hero-line{position:static;max-width:none;min-height:0;display:block;pointer-events:auto}
 .landing-page .hero-copy h1{font-size:39.6px;line-height:1.1}
 .hero-copy .hero-line{font-size:17px;line-height:1.3}
 .hero-copy .hero-price{color:inherit;text-shadow:0 0 12px rgba(var(--hero-halo),.6),0 0 20px rgba(var(--hero-halo),.6);align-self:auto}
 .hero-copy .landing-button{align-self:flex-start;margin-top:4px}
 .hero-copy .hero-controls{position:absolute;right:24px;bottom:0;margin:0}
 .hero-scroll-cue{position:absolute;z-index:2;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:block;text-align:center;color:var(--hero-ink);font:14px/1.4 var(--site-body);text-shadow:0 0 12px rgba(var(--hero-halo),.6);transition:opacity .4s;pointer-events:none;white-space:nowrap}
 .hero-scroll-cue svg{display:block;margin:6px auto 0;width:16px;height:12px;fill:none;stroke:currentColor;stroke-width:1;animation:hero-scroll-drift 4s ease-in-out infinite}
 .hero-scrolled .hero-scroll-cue{opacity:0}
 @keyframes hero-scroll-drift{50%{transform:translateY(4px)}}
 html.landing-touch-paged{overflow-y:auto;overscroll-behavior-y:none;scroll-snap-type:y mandatory;scroll-padding-top:var(--site-bar-height,56px)}
 .landing-touch-paged body.landing-page{touch-action:pan-y pinch-zoom}
 .landing-touch-paged body.shelf-reading{touch-action:auto}
 .landing-paged .landing-slide,.landing-touch-paged .landing-slide{height:auto;min-height:calc(100dvh - var(--site-bar-height,56px));scroll-snap-align:start;scroll-snap-stop:always}
 html.landing-moving{scroll-snap-type:none}
 .landing-slide.style-slide{justify-content:flex-start}
 .style-slide>.landing-style-row{margin-top:auto;margin-bottom:auto}
 #image-studio .landing-studio-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:599px) and (prefers-reduced-motion:reduce){.hero-scroll-cue{transition:none}.hero-scroll-cue svg{animation:none}}

/* LANDING-FIX-2: broad phone-only light/dark support behind the copy; no panel. */
@media(max-width:599px){
 .hero-scroll-cue{z-index:3}
 .hero-copy::before{content:"";position:absolute;z-index:-1;inset:-100px -40px -110px;pointer-events:none;background:linear-gradient(to bottom,rgba(var(--hero-halo),0),rgba(var(--hero-halo),.74) 100px,rgba(var(--hero-halo),.74) calc(100% - 80px),rgba(var(--hero-halo),0))}
}