/* ==========================================================================
   Chapters of the book (front page). Paper, cloth, ink, silence.
   Initial "hidden" states exist only under html.js + motion allowed.
   ========================================================================== */
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,24px)}
.ph{display:inline-block;font:500 12px/1.45 var(--sans);letter-spacing:.03em;color:#8A1F2D;border:1px dashed var(--cloth);padding:3px 8px;background:rgba(196,44,64,.06);vertical-align:middle}
.ph--dark{color:#F3B9C0;border-color:var(--rose);background:rgba(226,112,125,.08)}
.ph--small{font-size:11px;padding:1px 6px;margin-left:8px}
.story{overflow:clip}
.story section{position:relative}
.lbl{color:var(--cloth)}

/* reveal states (JS + motion only) */
html.js.motion [data-reveal="rise"],html.js.motion [data-reveal="stagger"]>*{opacity:0;transform:translateY(28px)}
html.js.motion [data-reveal="words"] .w,html.js.motion [data-reveal="lines"] .w{display:inline-block;opacity:0;transform:translateY(.5em)}
.w{will-change:auto}

/* ---------- next page in the hero book (revealed by the scroll page-turn) */
.b-page--next{transform:translateZ(calc(var(--t) * .43 - .6px))}
.pg--plate{overflow:hidden}
.b-page--landed{transform:translateZ(calc(var(--t) / 2 + 2.6px))}
.pg__plate{position:absolute;inset:5.5% 6% 10% 6%;width:88%;height:84.5%;object-fit:cover;object-position:50% 34%}
.pg__cap{position:absolute;left:6%;right:6%;bottom:4.2%;font:500 2.3cqw/1.3 var(--sans);color:var(--ink-mute)}
.pg--chapter{padding:0}
.pg__kicker{position:absolute;left:0;right:0;top:9%;text-align:center;font:600 2.1cqw/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--cloth)}
.pg__numeral{position:absolute;left:0;right:0;top:15%;text-align:center;font:200 30cqw/1 var(--sans);color:var(--ink)}
.pg__chapter{position:absolute;left:0;right:0;top:50%;text-align:center;font:800 10cqw/1 var(--sans);text-transform:uppercase;letter-spacing:-.01em}
.pg__text{position:absolute;left:14%;right:14%;top:64%;text-align:center;font:400 3.2cqw/1.55 var(--serif);color:var(--ink-soft)}

/* ---------- turn (flat spread; becomes visually hidden when the 3D turn runs) */
.spread-sec{padding:clamp(72px,10vw,140px) 0;background:var(--table)}
.spread{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));filter:drop-shadow(0 30px 40px rgba(40,22,16,.18))}
.spread__page{margin:0;aspect-ratio:.736;background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px;position:relative;container-type:inline-size}
.spread__page--l{box-shadow:inset -40px 0 50px -40px rgba(40,30,20,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10% 12%}
.spread__page--r{box-shadow:inset 40px 0 50px -40px rgba(40,30,20,.3)}
.spread__kicker{margin:0;font:600 max(11px,2.1cqw)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--cloth)}
.spread__numeral{margin:.1em 0 0;font:200 28cqw/1 var(--sans)}
.spread__title{margin:0;font:800 10cqw/1 var(--sans);text-transform:uppercase}
.spread__text{margin:5cqw 0 0;font:400 max(15px,3.2cqw)/1.55 var(--serif);color:var(--ink-soft)}
.spread__plate{position:absolute;inset:5.5% 6% 10% 6%;width:88%;height:84.5%;object-fit:cover;object-position:50% 34%}
.spread__cap{position:absolute;left:6%;right:6%;bottom:4.2%;font:500 max(12px,2.3cqw)/1.3 var(--sans);color:var(--ink-mute)}
html.turn-3d .spread-sec{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);padding:0}

/* ---------- full-bleed photograph with a mask reveal */
.bleed{height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.bleed__mask{position:absolute;inset:0;overflow:hidden}
.bleed__img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform-origin:50% 50%}
.bleed__cap{position:absolute;left:clamp(16px,5.5vw,80px);bottom:clamp(28px,7vh,80px);right:clamp(16px,5.5vw,80px);max-width:640px;color:#fff;z-index:2}
.bleed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(0deg,rgba(20,10,8,.55),rgba(20,10,8,0));pointer-events:none}
.bleed__cap .lbl{color:#fff;opacity:.9}
.bleed__text{margin:16px 0 0;font:700 clamp(28px,3.4vw,48px)/1.1 var(--sans)}
html.turn-3d .bleed--after-turn{margin-top:-100vh;margin-top:-100svh}

/* ---------- story text */
.story-sec{padding:clamp(96px,13vw,180px) 0 clamp(64px,8vw,120px)}
.story-sec__lede{grid-column:1/span 8;margin:0;font:500 clamp(28px,3.4vw,50px)/1.2 var(--sans);letter-spacing:-.005em}
.colophon{grid-column:10/span 3;margin:8px 0 0;display:flex;flex-direction:column;gap:20px}
.colophon div{border-top:1px solid var(--rule);padding-top:10px}
.colophon dt{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.colophon dd{margin:8px 0 0;font:600 18px/1.3 var(--sans)}
.story-sec__body{grid-column:3/span 6;margin-top:56px;font:400 19px/1.75 var(--serif);color:#2E2B27}
@media (max-width:900px){.story-sec__lede,.colophon,.story-sec__body{grid-column:1/-1}.colophon{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.story-sec__body{margin-top:36px}}

/* ---------- objects */
.objects{padding:0 0 clamp(96px,14vw,200px)}
.objects__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,24px);align-items:start}
.objects__item{margin:0}
.objects__item--0{grid-column:1/span 5}
.objects__item--1{grid-column:7/span 6;margin-top:clamp(80px,14vw,200px)}
.objects__item--2{grid-column:3/span 4;margin-top:80px}
.objects__frame{overflow:hidden;aspect-ratio:4/5;background:#E6E1D7}
.objects__frame img{width:100%;height:115%;object-fit:cover}
.objects figcaption{margin-top:14px;font:500 14px/1.45 var(--sans);color:var(--ink-mute)}
@media (max-width:700px){.objects__item--0{grid-column:1/span 10}.objects__item--1{grid-column:3/span 10;margin-top:48px}}

/* ---------- Chapter II: the book on red cloth */
.cloth-sec{background:var(--cloth) url(../img/cloth-tile.jpg) 0 0/280px;color:#fff;padding:clamp(96px,12vw,170px) 0;overflow:hidden}
.cloth-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 30% 50%,rgba(255,220,210,.10),rgba(60,0,10,.28));pointer-events:none}
.cloth-sec__grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.tome-stage--chapter{grid-column:1/span 6}
.cloth-sec__copy{grid-column:7/span 6}
.cloth-sec .lbl{color:#fff;opacity:.9}
.cloth-sec__title{margin:18px 0 0;font:800 clamp(40px,5vw,72px)/.95 var(--sans);text-transform:uppercase;letter-spacing:-.01em}
.cloth-sec__text{margin:26px 0 0;max-width:34em;font:400 19px/1.65 var(--serif)}
.specs{margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;max-width:560px}
.specs div{border-top:1px solid rgba(255,255,255,.45);padding-top:10px}
.specs dt{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.specs dd{margin:8px 0 0;font:600 16px/1.35 var(--sans)}
.cloth-sec__more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;color:#fff;font:600 15px/1 var(--sans);letter-spacing:.03em}
.cloth-sec__more:hover{color:#fff;opacity:.85}
@media (max-width:900px){.tome-stage--chapter,.cloth-sec__copy{grid-column:1/-1}.tome-stage--chapter{height:420px}}

/* the closed 3D book (jacketed) */
.tome-stage{height:620px;display:flex;align-items:center;justify-content:center;perspective:1800px;position:relative}
.tome{--w:300px;--h:405px;--t:34px;position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(8deg) rotateY(var(--ry,32deg)) rotateZ(-2deg)}
.tome__face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tome__front{inset:0;transform:translateZ(calc(var(--t) / 2));overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.tome__front img{width:100%;height:100%;object-fit:cover}
.tome__sheen{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 65%);transform:translateX(-120%)}
.tome__back{inset:0;background:#F4F3F0;transform:rotateY(180deg) translateZ(calc(var(--t) / 2))}
.tome__spine{left:calc(var(--w) / 2 - var(--t) / 2);top:0;width:var(--t);height:var(--h);background:#FAFAF8;transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0;box-shadow:inset 0 0 14px rgba(0,0,0,.14)}
.tome__spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 10px/1 var(--sans);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.tome__spine i{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.tome__fore{left:calc(var(--w) / 2 - var(--t) / 2 + 2px);top:5px;width:calc(var(--t) - 4px);height:calc(var(--h) - 10px);background:repeating-linear-gradient(90deg,#F6F3EC 0 1px,#DCD6CA 1px 2px);transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px))}
.tome__top{left:3px;top:calc(var(--h) / 2 - var(--t) / 2);width:calc(var(--w) - 6px);height:calc(var(--t) - 4px);background:repeating-linear-gradient(0deg,#F6F3EC 0 1px,#DCD6CA 1px 2px);transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px))}
.tome__bot{left:3px;top:calc(var(--h) / 2 - var(--t) / 2);width:calc(var(--w) - 6px);height:calc(var(--t) - 4px);background:#D8D2C6;transform:rotateX(-90deg) translateZ(calc(var(--h) / 2 - 3px))}
.tome-shadow{position:absolute;left:50%;top:50%;width:320px;height:60px;margin:200px 0 0 -160px;background:radial-gradient(closest-side,rgba(40,0,8,.45),rgba(40,0,8,0));transform:rotateX(70deg)}

/* ---------- leaf through the book */
.leaf-sec{background:var(--table);padding:clamp(80px,9vw,120px) 0 clamp(60px,6vw,80px)}
.leaf-sec__pin{display:flex;flex-direction:column;gap:clamp(20px,3vh,36px)}
.leaf-sec__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.leaf-sec__title{margin:0;font:700 clamp(32px,3.6vw,52px)/1.05 var(--sans)}
.leaf-sec__text{margin:0;max-width:26em;font:400 17px/1.6 var(--serif);color:var(--ink-soft)}
.leaf-sec__foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.leaf-sec__label{margin:0;font:600 15px/1.3 var(--sans)}
.leaf-sec__label [data-leaf-n]{color:var(--cloth);margin-right:10px}
.leaf-sec__nav{display:flex;gap:8px}
.round-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 18px/1 var(--sans);cursor:pointer;transition:background .25s,color .25s}
.round-btn:hover{background:var(--ink);color:var(--paper)}
/* flat fallback: swipeable spreads */
.leafbook__list{list-style:none;margin:0;padding:0 clamp(16px,4vw,56px) 12px;display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.leafbook__spread{flex:0 0 min(92vw,980px);scroll-snap-align:center}
.leafbook__spread figure{margin:0}
.leafbook__pages{display:grid;grid-template-columns:1fr 1fr;box-shadow:0 24px 40px -18px rgba(40,22,16,.35)}
.leafbook__pages img{width:100%;aspect-ratio:.736;object-fit:cover}
.leafbook__spread figcaption{margin-top:12px;font:500 14px/1.4 var(--sans);color:var(--ink-soft)}
.leafbook__n{color:var(--cloth-deep);font-weight:600;margin-right:6px}
html.leaf-3d .leafbook__list{display:none}
html:not(.leaf-3d) .leaf-sec__foot{display:none}
/* 3D leaf book (built by story.js) */
.lb{position:relative;margin:0 auto;perspective:2400px;height:var(--lbh)}
.lb__book{position:absolute;left:50%;top:0;width:calc(var(--lpw) * 2);height:var(--lbh);margin-left:calc(var(--lpw) * -1);transform-style:preserve-3d;transform:rotateX(14deg)}
.lb__board{position:absolute;top:calc(var(--lsq) * -1);height:calc(var(--lbh) + var(--lsq) * 2);width:calc(var(--lpw) + var(--lsq));background:var(--cloth) url(../img/cloth-tile.jpg) 0 0/220px;transform:translateZ(-3px);box-shadow:0 30px 50px -20px rgba(40,22,16,.45)}
.lb__board--l{left:calc(var(--lsq) * -1)}
.lb__board--r{left:var(--lpw)}
.lb__page{position:absolute;top:0;width:var(--lpw);height:var(--lbh);background-size:100% 100%;backface-visibility:hidden}
.lb__page--l{left:0;box-shadow:inset -30px 0 40px -30px rgba(40,30,20,.35)}
.lb__page--r{left:var(--lpw);box-shadow:inset 30px 0 40px -30px rgba(40,30,20,.35)}
.lb__leaf{position:absolute;left:var(--lpw);top:0;width:var(--lpw);height:var(--lbh);transform-style:preserve-3d;pointer-events:none}
.lb .b-seg__f,.lb .b-seg__b{background-size:var(--lpw) var(--lbh)}

/* ---------- contents */
.toc-sec{padding:clamp(96px,12vw,170px) 0;background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px}
.toc-sec__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.toc-sec__head{grid-column:1/span 3}
.toc-sec__title{margin:0;font:700 clamp(40px,4.5vw,64px)/1 var(--sans)}
.toc-sec__text{margin:20px 0 0;font:400 16px/1.6 var(--serif);color:var(--ink-soft)}
.songs{grid-column:5/span 8;list-style:none;margin:0;padding:0;columns:2;column-gap:56px}
.songs__item{break-inside:avoid}
.songs__row{display:flex;align-items:baseline;gap:8px;padding:9px 0;color:var(--ink);text-decoration:none;font:600 16px/1.3 var(--sans)}
.songs__dots{flex:1;border-bottom:1.5px dotted #A9A196;transform:translateY(-4px)}
.songs__p{font-variant-numeric:tabular-nums;min-width:2.2em;text-align:right}
a.songs__row .songs__t{background:linear-gradient(var(--cloth),var(--cloth)) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--ease)}
a.songs__row:hover .songs__t,a.songs__row:focus-visible .songs__t{background-size:100% 1.5px}
a.songs__row:hover,a.songs__row:focus-visible{color:var(--cloth-deep)}
a.songs__row .songs__p{color:var(--cloth)}
.songs__preview{position:fixed;left:0;top:0;z-index:30;width:200px;padding:10px;background:#fff;box-shadow:0 18px 40px rgba(40,22,16,.25);pointer-events:none;opacity:0;transform:translate(-50%,-110%) scale(.9);transition:opacity .25s,transform .35s var(--ease)}
.songs__preview.is-on{opacity:1;transform:translate(-50%,-110%) scale(1)}
.songs__preview img{width:100%;height:auto}
@media (max-width:900px){.toc-sec__head,.songs{grid-column:1/-1}.songs{columns:1;margin-top:36px}.songs__preview{display:none}}

/* ---------- Chapter III: verse in the dark */
.verse-sec{background:var(--silence);color:#EDE6DA;padding:clamp(96px,12vw,160px) 0}
.verse-sec__pin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;min-height:min(820px,90vh)}
.verse-sec__text{grid-column:1/span 7}
.verse-sec .lbl{color:var(--rose)}
.verse{margin:44px 0 0;font:700 clamp(30px,3.7vw,56px)/1.16 var(--sans);letter-spacing:-.005em}
.verse--small{margin:0;font-size:clamp(22px,2.2vw,32px)}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line__in{display:inline-block}
.verse .line:last-child{color:var(--rose)}
.verse__gloss{margin:24px 0 0;max-width:36em;font:400 italic 17px/1.55 var(--serif);color:#C9C1B5}
.verse__src{margin:36px 0 0;font:400 italic 16px/1.5 var(--serif);color:#A9A196}
.verse-sec__print{grid-column:9/span 4;margin:0}
.print{background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px;padding:12%;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.print img{width:100%;height:auto}
.verse-sec__print figcaption{margin-top:16px;font:500 13px/1.4 var(--sans);color:#A9A196}
@media (max-width:900px){.verse-sec__text,.verse-sec__print{grid-column:1/-1}.verse-sec__print{margin-top:56px;max-width:420px}}

.vimg{height:115vh;min-height:640px;overflow:hidden;background:var(--silence)}
.vimg__mask{position:absolute;inset:0;overflow:hidden}
.vimg__img{width:100%;height:120%;object-fit:cover;object-position:50% 40%}
.vimg__card{position:absolute;right:clamp(16px,5.5vw,80px);bottom:clamp(40px,10vh,110px);max-width:520px;background:var(--silence);color:#EDE6DA;padding:clamp(28px,3vw,44px)}
@media (max-width:700px){.vimg{height:auto;min-height:0;padding-top:110vw}.vimg__mask{height:110vw}.vimg__card{position:relative;right:auto;bottom:auto}}

/* ---------- Chapter IV: exhibition wall */
.expo{overflow-x:clip;background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px;padding:clamp(96px,12vw,160px) 0 clamp(60px,6vw,90px)}
.expo__pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(36px,6vh,64px);min-height:100vh;min-height:100svh}
.expo__head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.expo__title{margin:16px 0 0;font:800 clamp(40px,5.4vw,80px)/.95 var(--sans);text-transform:uppercase;max-width:12em;letter-spacing:-.01em}
.expo__aside{max-width:360px;font:400 17px/1.6 var(--serif);color:var(--ink-soft)}
.expo__aside p{margin:0 0 14px}
.expo__track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:12px 0 24px}
.expo__track:focus-visible{outline-offset:-3px}
html.expo-pin .expo__track{overflow:visible}
/* pinned gallery: the heading, the prints and their captions always share ONE screen — the prints are sized from the height that is left */
html.expo-pin .expo{padding:0}
html.expo-pin .expo__pin{box-sizing:border-box;height:100vh;height:100svh;min-height:0;padding:calc(var(--hdr,72px) + 2.5vh) 0 3vh;gap:clamp(14px,3vh,36px)}
html.expo-pin .expo__head{flex:none;flex-wrap:nowrap;width:100%}
html.expo-pin .expo__title{margin-top:10px;font-size:clamp(28px,min(4.4vw,6.4vh),68px)}
html.expo-pin .expo__aside{flex:0 1 340px;font-size:clamp(14px,2vh,17px)}
html.expo-pin .expo__aside p:last-child{margin-bottom:0}
html.expo-pin .expo__track{flex:1 1 0;min-height:0;padding:10px 0 0;container-type:size}
html.expo-pin .expo__item{width:clamp(150px,min(26vw,(100cqh - 100px) / 1.34),480px)}
html.expo-pin .expo__item figcaption{margin-top:14px}
.expo__wall{list-style:none;margin:0;padding:0 clamp(16px,4vw,56px);display:flex;gap:clamp(24px,3.4vw,48px);width:max-content}
.expo__item{width:clamp(240px,24vw,360px);scroll-snap-align:start}
.expo__item figure{margin:0}
.expo__print{display:block;width:100%;padding:8%;border:0;background:#fff;cursor:zoom-in;box-shadow:0 1px 0 #DDD8CE,14px 16px 0 rgba(28,27,25,.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.expo__print:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 1px 0 #DDD8CE,18px 26px 30px rgba(28,27,25,.12)}
.expo__print img{width:100%;aspect-ratio:1005/1400;object-fit:cover}
.expo__item figcaption{margin-top:18px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;font-family:var(--sans)}
.expo__n{grid-row:span 2;font:600 13px/1.5 var(--sans);color:var(--cloth)}
.expo__t{font:600 17px/1.3 var(--sans)}
.expo__m{font:400 14px/1.3 var(--sans);color:var(--ink-mute)}
.lightbox{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(20,18,16,.94);color:#EDE6DA}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:transparent}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-height:92vh}
.lightbox img{max-height:80vh;width:auto;background:#fff;padding:2vh}
.lightbox figcaption{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--sans)}
.lightbox__t{font:600 18px/1.3 var(--sans)}
.lightbox__m{font:400 14px/1.3 var(--sans);color:#A9A196}
.lightbox__close{position:fixed;top:16px;right:16px;width:48px;height:48px;border:0;background:transparent;color:#EDE6DA;cursor:pointer}

/* ---------- Chapter V: collection */
.coll{padding:clamp(110px,13vw,190px) 0 clamp(80px,10vw,140px)}
.coll__title{margin:16px 0 0;font:700 clamp(36px,4.2vw,60px)/1.05 var(--sans);max-width:13em}
.coll__grid{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,24px);row-gap:clamp(56px,7vw,100px);align-items:start}
.coll__item--0{grid-column:1/span 7}
.coll__item--1{grid-column:9/span 4;margin-top:clamp(80px,14vw,200px)}
.coll__item--2{grid-column:2/span 4}
.coll__item--3{grid-column:7/span 6;margin-top:clamp(40px,8vw,120px)}
.coll__item--4{grid-column:1/span 5}
.coll__item--5{grid-column:7/span 5}
.coll__link{display:block;color:var(--ink);text-decoration:none}
.coll__img{overflow:hidden;aspect-ratio:4/5;background:#E6E1D7}
.coll__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.coll__link:hover .coll__img img{transform:scale(1.035)}
.coll__meta{display:grid;grid-template-columns:1fr auto;column-gap:16px;margin-top:18px}
.coll__name{margin:0;font:700 22px/1.25 var(--sans)}
.coll__desc{grid-column:1;margin:6px 0 0;font:400 15px/1.45 var(--sans);color:var(--ink-mute)}
.coll__price{grid-column:2;grid-row:1/span 2;margin:0;font:600 17px/1.25 var(--sans);text-align:right;white-space:nowrap}
@media (max-width:760px){.coll__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.coll__item--0{grid-column:1/-1}.coll__item--1,.coll__item--2,.coll__item--3,.coll__item--4,.coll__item--5{grid-column:span 1;margin-top:0}.coll__meta{grid-template-columns:1fr}.coll__price{grid-column:1;grid-row:auto;text-align:left;margin-top:6px}.coll__desc{display:none}.coll__name{font-size:17px}}

/* ---------- Chapter VI: the story continues */
.cont{padding:clamp(80px,10vw,140px) 0 clamp(110px,14vw,190px)}
.cont__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.cont__grid>header{grid-column:1/span 4}
.cont__title{margin:14px 0 0;font:700 clamp(34px,3.6vw,52px)/1.05 var(--sans)}
.cont__text{margin:18px 0 0;font:400 17px/1.6 var(--serif);color:var(--ink-soft)}
.notes{grid-column:6/span 7;list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.notes__row{display:grid;grid-template-columns:110px 140px 1fr 24px;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-family:var(--sans);transition:padding .4s var(--ease)}
.notes__row:hover{padding-left:10px;color:var(--cloth-deep)}
.notes__type{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cloth)}
.notes__title{font:600 19px/1.3 var(--sans)}
.cont__empty{grid-column:6/span 7;font:400 18px/1.6 var(--serif);color:var(--ink-soft)}
@media (max-width:900px){.cont__grid>header,.notes,.cont__empty{grid-column:1/-1}.notes{margin-top:36px}.notes__row{grid-template-columns:1fr 24px;gap:8px}.notes__date,.notes__type{grid-column:1}.notes__title{grid-column:1}.notes__arrow{grid-column:2;grid-row:1/span 3}}

/* ---------- Epilogue */
.epi{background:var(--silence);color:#EDE6DA}
.epi__in{padding-top:clamp(110px,14vw,190px);padding-bottom:clamp(80px,10vw,130px);text-align:center;display:flex;flex-direction:column;align-items:center}
.tome-stage--epi{height:300px;width:100%}
.tome-stage--epi .tome{--w:170px;--h:230px;--t:20px}
.tome-stage--epi .tome-shadow{width:200px;margin:110px 0 0 -100px;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0))}
.epi__kicker{margin:28px 0 0;color:var(--rose)}
.epi__msg{margin:24px 0 0;max-width:16em;font:400 italic clamp(38px,5vw,72px)/1.15 var(--serif)}
.epi__cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:52px}
.btn.is-disabled{opacity:.55;cursor:default}
.btn.is-disabled:hover{transform:none}
.news{margin-top:80px;width:100%;max-width:560px;text-align:left}
.news label{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.news__row{display:flex;margin-top:14px;border-bottom:1.5px solid #EDE6DA}
.news input[type=email]{flex:1;min-width:0;min-height:54px;background:transparent;border:0;color:#EDE6DA;font:400 18px/1 var(--serif);padding:0}
.news input[type=email]::placeholder{color:#8C857A}
.news input:focus-visible{outline:none}
.news__row:focus-within{border-bottom-color:var(--rose)}
.news button{display:flex;align-items:center;gap:8px;background:none;border:0;color:#EDE6DA;font:600 15px/1 var(--sans);cursor:pointer;min-height:54px;padding:0 0 0 18px}
.news__status{min-height:1.4em;margin:12px 0 0;font:500 14px/1.4 var(--sans);color:var(--rose)}
.hp{position:absolute;left:-9999px}
.site-footer--dark{border-top:1px solid #3A3631}
/* the pinned book stays above the chapter that waits underneath it */
.hero{z-index:5}
.story>.pin-spacer:first-child{z-index:5;position:relative}
.bleed--after-turn{z-index:1}
.tome-stage--chapter .tome{--w:340px;--h:459px;--t:38px}
.tome-stage--chapter .tome-shadow{width:380px;margin:230px 0 0 -190px}
@media (max-width:760px){
  .spread{grid-template-columns:1fr;padding:0 16px}
  .spread__page--l{aspect-ratio:auto;padding:56px 24px 48px;box-shadow:inset 0 -40px 50px -40px rgba(40,30,20,.25)}
  .spread__numeral{font-size:96px}
  .spread__title{font-size:44px}
  .spread__text{font-size:17px;margin-top:20px}
  .spread__page--r{box-shadow:inset 0 40px 50px -40px rgba(40,30,20,.25)}
  .spread__cap{font-size:12px}
  .tome-stage--chapter{height:380px}
  .tome-stage--chapter .tome{--w:220px;--h:297px;--t:26px}
  .tome-stage--chapter .tome-shadow{width:240px;margin:150px 0 0 -120px}
}