/* ==========================================================================
   One book, one camera — scene layout for the persistent 3D book.
   html.has3d  → WebGL book drives the scenes (copy fades are set by book3d.js)
   html.no3d   → no WebGL / reduced motion: scenes become a plain illustrated document
   ========================================================================== */
.story3d{position:relative}
.stage3d{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
html.has3d .stage3d{display:block}
.stage3d__bg{position:absolute;inset:0;background:#0B0A09}
/* a pool of warm light behind the book in the dark scenes (book3d.js sets --pool 0…1 and --lx from the key light) */
.stage3d__bg::after{content:"";position:absolute;inset:0;opacity:var(--pool,0);background:radial-gradient(52% 58% at var(--lx,50%) var(--ly,56%),rgba(255,178,128,.2) 0%,rgba(150,52,40,.1) 42%,rgba(60,20,16,0) 72%)}
.stage3d__dust{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the film starts: fade up from black while the lens finds focus (once, when the book is ready) */
.stage3d__curtain{position:absolute;inset:0;background:#070605;transition:opacity 1.7s cubic-bezier(.4,0,.2,1) .1s}
html.book3d-ready .stage3d__curtain{opacity:0}
html.book3d-ready .stage3d__canvas{animation:focus-in 2s cubic-bezier(.2,.7,.2,1) both}
@keyframes focus-in{0%{filter:blur(16px);transform:scale(1.045)}100%{filter:blur(0);transform:scale(1)}}
/* covered by an ordinary section: nothing to composite, nothing to animate */
.stage3d.is-asleep{visibility:hidden}
.stage3d.is-asleep .stage3d__grain{animation-play-state:paused}
.stage3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage3d__grain{position:absolute;inset:-64px;opacity:calc(.05 + (1 - var(--paper,0)) * .07);mix-blend-mode:overlay;background:url(../img/grain.png) 0 0/128px;pointer-events:none;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-31px,14px)}33%{transform:translate(22px,-37px)}50%{transform:translate(-12px,41px)}67%{transform:translate(39px,7px)}83%{transform:translate(-44px,-21px)}100%{transform:translate(0,0)}}
/* vignette: dense in the dark scenes, a breath on paper (book3d.js sets --paper) */
.stage3d__vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 46%,rgba(0,0,0,0) 48%,rgba(6,4,3,.62) 100%);opacity:calc(.22 + (1 - var(--paper,0)) * .78)}
/* letterbox: cinemascope bars for the key moments (book3d.js sets --bars 0…1 from the timeline) */
.letterbox{position:fixed;inset:0;z-index:55;pointer-events:none;display:none}
html.has3d .letterbox{display:block}
.letterbox i{position:absolute;left:0;right:0;height:calc(var(--bars,0) * 11vh);background:#070605}
.letterbox i:first-child{top:0}
.letterbox i:last-child{bottom:0}
@media (prefers-reduced-motion:reduce){.stage3d__grain{animation:none}}
@media (max-width:760px),(max-aspect-ratio:4/5){.letterbox i{height:calc(var(--bars,0) * 7vh)}.stage3d{--ly:30%}}
.zoomplate{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:calc(var(--hdr) + 4vh) 7vw 6vh;background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px;opacity:0;visibility:hidden}
.zoomplate img{height:auto;width:auto;max-height:78vh;max-width:50vw;transform-origin:50% 45%;will-change:transform}

.scene{position:relative;z-index:1;height:calc(var(--len,200) * 1vh)}
.scene--short{--len:90}
.scene[data-scene="arrival"]{--len:240}
.scene[data-scene="opening"]{--len:240}
.scene[data-scene="story"]{--len:280}
.scene[data-scene="enter"]{--len:260}
.scene[data-scene="songs"]{--len:440}
.scene[data-scene="object"]{--len:320}
.scene[data-scene="epilogue"]{--len:300}
.scene__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene__fallback{display:none}

/* ---------- copy blocks */
.copy{position:absolute;z-index:2;color:var(--ink)}
html.has3d .copy{opacity:0;visibility:hidden}
html.has3d .copy[data-in="0"]{opacity:1;visibility:inherit}
.scene--dark .copy{color:#EDE6DA}
.copy__kicker{display:block;font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#C9BFB1}
.copy__kicker--cloth{color:var(--cloth-deep)}
.copy__kicker--rose{color:var(--rose)}
.copy__h1{margin:18px 0 0;font:800 clamp(40px,5.2vw,82px)/.93 var(--sans);text-transform:uppercase;letter-spacing:-.012em;text-wrap:balance;max-width:10.5em}
.copy__h2{margin:14px 0 0;font:700 clamp(34px,4vw,60px)/1 var(--sans);letter-spacing:-.01em;text-wrap:balance}
.copy__h2--caps{text-transform:uppercase;font-weight:800}
.copy__h2--song{font-size:clamp(24px,2.3vw,34px);font-weight:600;line-height:1.2}
.copy__lead{margin:22px 0 0;max-width:30em;font:400 clamp(17px,1.35vw,20px)/1.6 var(--serif);color:#C9C1B5}
.copy__lead--ink{color:var(--ink-soft)}
.copy__body{margin:18px 0 0;max-width:32em;font:400 17px/1.65 var(--serif);color:var(--ink-soft)}
.copy__body--light{color:#D4CCBF}
.copy__small{margin:10px 0 0;font:700 16px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.04em}
.copy__statement{margin:18px 0 0;font:500 clamp(26px,2.7vw,42px)/1.22 var(--sans);letter-spacing:-.005em;text-wrap:balance}
.copy__note{margin:18px 0 0}
.copy__src{margin:22px 0 0;font:400 italic 15px/1.5 var(--serif);color:var(--ink-mute)}
.copy__gloss{margin:16px 0 0;font:400 italic 16px/1.55 var(--serif);color:var(--ink-soft)}
.copy__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.copy__cta--center{justify-content:center}
.copy__scroll{display:flex;align-items:center;gap:12px;margin-top:48px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#9C9387}
.copy__scroll i{width:44px;height:1px;background:currentColor;transform-origin:0 50%;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.copy--hero{left:max(24px,6vw);bottom:12vh;max-width:min(46vw,640px)}
.copy--caption{left:0;right:0;bottom:6vh;text-align:center}
.copy--left{left:max(24px,6vw);top:50%;transform:translateY(-50%);max-width:min(40vw,560px)}
.copy--right{right:max(24px,5vw);top:50%;transform:translateY(-50%);width:min(34vw,470px);max-height:calc(100vh - var(--hdr) - 48px);overflow:auto}
.copy--plate{left:max(24px,6vw);top:50%;transform:translateY(-50%);max-width:min(38vw,560px)}
.copy--product{right:max(24px,5vw);top:calc(var(--hdr) + 3vh);bottom:3vh;width:min(38vw,520px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.copy--finale{left:0;right:0;bottom:9vh;text-align:center;padding:0 24px}
.copy__finale{margin:18px auto 0;max-width:15em;font:400 italic clamp(36px,4.6vw,68px)/1.12 var(--serif);text-wrap:balance}

/* ---------- editorial type (chapter numerals, statements, ruled kickers) */
.copy__kicker{letter-spacing:calc(.24em + (1 - var(--in,1)) * .34em)}
.copy__kicker::before{content:"";display:inline-block;width:28px;height:1px;margin:0 12px 0 0;vertical-align:.32em;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--in,1))}
.copy__num{display:block;margin:0 0 14px -.03em;font:300 clamp(96px,10vw,168px)/.8 var(--serif);letter-spacing:-.02em;color:var(--cloth);user-select:none}
.copy__num--sm{font-size:clamp(64px,5.6vw,92px);margin-bottom:10px}
.copy__num--light{color:var(--rose)}
.copy--chapter{max-width:min(44vw,640px)}
.copy__h2--chapter{font-size:clamp(46px,5.4vw,88px);line-height:.95;text-transform:uppercase;font-weight:800;letter-spacing:-.015em}
.copy__statement--chapter{margin-top:26px;max-width:17em;font:400 clamp(22px,2vw,32px)/1.32 var(--serif);color:var(--ink-soft);letter-spacing:0}
.colophon--big{margin-top:24px;max-width:560px;gap:22px 36px}
.colophon--big dt{font-size:11px}
.colophon--big dd{font-size:clamp(20px,1.7vw,26px);line-height:1.2;font-weight:600}
/* staggered, scroll-driven entrance: book3d.js writes --in (0…1) on each copy block, so it reverses exactly */
html.has3d .copy>*{transform:translate3d(0,calc((1 - var(--in,1)) * var(--k,1) * 22px),0)}
html.has3d .copy>:nth-child(2){--k:1.6}
html.has3d .copy>:nth-child(3){--k:2.3}
html.has3d .copy>:nth-child(4){--k:3}
html.has3d .copy>:nth-child(n+5){--k:3.6}
html.has3d .copy__num{transform:translate3d(calc((1 - var(--in,1)) * -40px),0,0);opacity:var(--in,1)}

.colophon--row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin:32px 0 0;max-width:520px}
.songlist{list-style:none;margin:20px 0 0;padding:0;font:600 15px/1.3 var(--sans)}
.songlist li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dotted #A9A196}
.songlist li span:last-child{color:var(--cloth-deep);font-variant-numeric:tabular-nums}
.allsongs{margin-top:10px}
.allsongs summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 14px/1 var(--sans);letter-spacing:.06em;color:var(--cloth-deep)}
.verse--scene{margin:20px 0 0;font:700 clamp(24px,2.3vw,36px)/1.22 var(--sans)}
.verse--scene .line:last-child{color:var(--cloth-deep)}
.specs--dark{margin-top:26px}
.specs--dark div{border-top-color:rgba(237,230,218,.28)}
.copy--product .buy--cloth .buy__price{border-color:rgba(237,230,218,.28)}
.copy--product .btn--paper{background:var(--cloth);color:#fff}
.copy--product .btn--paper:hover{background:var(--cloth-deep);color:#fff}
.copy--product .cloth-sec__more{color:#EDE6DA}
.copy__thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.copy__thumbs figure{margin:0}
.copy__thumbs img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* exhibition / collection / journal stay ordinary sections over the stage */
.story3d>.expo,.story3d>.coll,.story3d>.cont{position:relative;z-index:1}
html.has3d .story3d>.expo{background:transparent}
.epi--after{position:relative;z-index:1;background:var(--silence);color:#EDE6DA}
.epi--after .epi__in{padding-top:40px}

/* header over dark scenes */
.site-header.on-dark:not(.menu-open){color:#EDE6DA}
.site-header.on-dark .brand,.site-header.on-dark .chapters a,.site-header.on-dark .cart-link,.site-header.on-dark .menu-btn,.site-header.on-dark .lang [aria-current]{color:#EDE6DA}
.site-header.on-dark .lang a{color:#A9A196}
.site-header.on-dark.is-solid{background:rgba(20,18,16,.72);box-shadow:none}

/* ---------- phones: book in the upper part of the screen, copy in a reading panel */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .scene[data-scene="songs"]{--len:480}
  .copy--hero,.copy--left,.copy--right,.copy--plate,.copy--product{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-width:none;max-height:58vh;overflow:auto;padding:28px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  .copy--hero{bottom:0;padding-bottom:40px;background:linear-gradient(0deg,rgba(11,10,9,.94) 62%,rgba(11,10,9,0))}
  .copy--left,.copy--right,.copy--plate{background:linear-gradient(0deg,rgba(243,241,236,.97) 78%,rgba(243,241,236,0));padding-top:56px}
  .copy--product{top:auto;max-height:62vh;background:linear-gradient(0deg,rgba(20,18,16,.97) 82%,rgba(20,18,16,0));padding-top:48px}
  .copy__h1{font-size:40px}
  .copy__h2{font-size:32px}
  .copy__lead{font-size:16px;margin-top:14px}
  .copy__cta{margin-top:22px}
  .copy__scroll{margin-top:22px}
  .copy__statement{font-size:24px}
  .copy__num{font-size:72px;margin-bottom:6px}
  .copy__num--sm{display:none}
  .copy__h2--chapter{font-size:40px}
  .copy__statement--chapter{font-size:19px;margin-top:14px}
  .colophon--big dd{font-size:18px}
  .copy--chapter{max-width:none}
  .colophon--row{margin-top:20px;gap:12px 20px}
  .verse--scene{font-size:24px}
  .copy__thumbs{display:none}
  .copy--caption{bottom:4vh}
  .copy--finale{bottom:6vh}
  .zoomplate{justify-content:center;align-items:flex-start;padding-top:calc(var(--hdr) + 3vh)}
  .zoomplate img{height:auto;width:88vw}
}

/* ---------- no WebGL / reduced motion: an illustrated document */
html.no3d .scene{height:auto}
html.no3d .scene__sticky{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:center;max-width:1320px;margin:0 auto;padding:clamp(72px,9vw,130px) clamp(16px,4vw,56px)}
html.no3d .copy{position:relative;inset:auto;transform:none;width:auto;max-width:none;max-height:none;overflow:visible;padding:0;background:none;opacity:1;visibility:visible}
html.no3d .copy+.copy{grid-column:1}
html.no3d .scene__fallback{display:block;margin:0;grid-column:2;grid-row:1/span 3;align-self:start}
html.no3d .scene__fallback img{width:100%;height:auto}
html.no3d .scene--dark{background:var(--silence)}
html.no3d .scene:not(.scene--dark){background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px}
html.no3d .scene--short{display:none}
html.no3d .copy--caption,html.no3d .copy--finale{text-align:left}
html.no3d .copy__cta--center{justify-content:flex-start}
@media (max-width:760px){html.no3d .scene__sticky{grid-template-columns:1fr}html.no3d .scene__fallback{grid-column:1;grid-row:auto}}

/* ordinary sections between scenes carry their own paper so the stage never shows through behind their text */
.story3d>.coll,.story3d>.cont{background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px}
.stage3d{will-change:transform}
.site-header.on-dark .chapters a span{color:#A9A196}
.scene--dark .ph{color:#F3B9C0;border-color:var(--rose);background:rgba(226,112,125,.08)}