/* pallas — page styles. Tokens come from ds/ (Cultural Capital design system). Values follow the Pallas handoff. */

html,body{background:#fff}
a{color:var(--ink)}
a:hover{color:var(--ink);opacity:1}
[hidden]{display:none !important}

/* ---------- TextLink (ds components/core/TextLink) ---------- */
.textlink{
  position:relative;display:inline-block;color:var(--text-primary);text-decoration:none;opacity:1;
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:var(--leading-label);
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 1px;padding-bottom:2px;
  transition:background-size var(--dur-base) var(--ease-out);
}
.textlink:hover,.textlink:focus-visible,.textlink.is-active{background-size:100% 1px}
.textlink--big{font-size:clamp(30px,3.4vw,48px);font-weight:500;font-variation-settings:'wdth' 112;letter-spacing:-.025em;text-transform:none;line-height:1.1;padding-bottom:6px}
.textlink--brand{font-size:18px;font-weight:600;font-variation-settings:'wdth' 125;letter-spacing:-.04em;text-transform:none;line-height:1.1}
/* Previous / Next / Close */
.textlink--nav{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--stone);transition:opacity 240ms,background-size var(--dur-base) var(--ease-out)}
/* open / tear out / dog-ear */
.textlink--act{font-size:13px;font-weight:500;font-variation-settings:'wdth' 112;letter-spacing:0;text-transform:none;line-height:1.3;color:inherit;transition:opacity 240ms,color 260ms,transform 260ms cubic-bezier(.2,.7,.1,1),background-size var(--dur-base) var(--ease-out)}
/* corner-bar and drawer-tab links */
.qlink{position:relative;display:inline-block;text-decoration:none;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--graphite);padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size var(--dur-base) var(--ease-out)}
.qlink:hover,.qlink:focus-visible,.qlink.is-active{background-size:100% 1px;color:var(--graphite)}
.qlink.is-active{color:var(--ink)}

/* ---------- corner bars ---------- */
.corner{position:fixed;z-index:5}
.corner--tl{top:var(--edge);left:var(--edge)}
.corner--tr{top:var(--edge);right:var(--edge)}
.corner--br{right:var(--edge);bottom:var(--edge);font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.3;color:var(--graphite);font-variant-numeric:tabular-nums}
.corner--bl{left:var(--edge);bottom:var(--edge)}
.corner--links{display:flex;align-items:baseline;gap:10px;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.3;color:var(--graphite);font-variant-numeric:tabular-nums}

/* ---------- 01 Home ---------- */
.home{min-height:100vh;background:var(--white);display:grid;place-items:center;padding:var(--space-9) var(--edge)}
.home__stack{display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-3vh)}
.home__kicker{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ref-cobalt)}
.home__studio{margin:0;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:clamp(12px,.95vw,14px);font-weight:500;line-height:1.3;letter-spacing:.06em}
.home__presents{margin:0;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:clamp(10px,.8vw,12px);font-weight:500;line-height:1.3;letter-spacing:.01em;color:var(--ink)}
.home__title{margin:clamp(14px,1.6vw,24px) 0 0;font-family:var(--font-sans);font-variation-settings:'wdth' 125;font-size:clamp(112px,21vw,330px);font-weight:600;line-height:.8;letter-spacing:-.05em;color:var(--ink);padding-right:.05em}
.home__tagline{margin:clamp(28px,3.2vw,48px) 0 0;font-family:var(--font-sans);font-size:clamp(17px,1.5vw,22px);font-weight:400;line-height:1.4;letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.home__nav{margin-top:clamp(72px,10vh,128px);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.4vw,20px)}
.home__lead{margin:0;font-family:var(--font-sans);font-size:clamp(14px,1.05vw,16px);font-weight:400;line-height:1.3;letter-spacing:.005em;color:var(--graphite)}
.home__links{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:clamp(32px,4.4vw,72px)}

/* ---------- 02 Film ---------- */
.cinema{position:relative;min-height:100vh;background:var(--white);display:grid;place-items:center;padding:72px var(--edge) 88px;overflow:hidden}

/* The set. Overlays are placed in % of the photograph (1550 × 1400) and sized in cqw so they stay registered at every size. */
.tv{position:relative;width:min(92vw,calc((100vh - 160px) * 1.107),880px);aspect-ratio:1550 / 1400;container-type:inline-size}
.tv__photo{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.tv__shadow{position:absolute;border-radius:50%;mix-blend-mode:multiply;pointer-events:none}
.tv__shadow--soft{left:4%;width:90%;top:92.6%;height:6.5%;background:rgba(0,0,0,.16);filter:blur(2.2cqw)}
.tv__shadow--contact{left:30.5%;width:32%;top:95.2%;height:1.6%;background:rgba(0,0,0,.42);filter:blur(.45cqw)}

.tv__screen{position:absolute;left:11.36%;top:14.14%;width:75.16%;height:60%;border-radius:1.1% / 1.5%;overflow:hidden;background:#171a19}
.tv__picture{position:absolute;inset:0;transform-origin:50% 50%}
.tv__stills{position:absolute;inset:0}
.tv__still{position:absolute;inset:0;opacity:0;pointer-events:none}
.tv__still-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tv__band{position:absolute;left:0;right:0;top:-7%;height:7%;background:linear-gradient(180deg,#050505,#000 40%,#151515);opacity:0;pointer-events:none}
.tv__noise{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.tv__dot{position:absolute;left:50%;top:50%;width:1.2cqw;height:1.2cqw;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 1.4cqw .6cqw rgba(220,240,255,.85),0 0 4cqw 1.4cqw rgba(200,225,255,.4);pointer-events:none;opacity:0}
.tv__vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 8cqw rgba(0,0,0,.5),inset 0 0 1.4cqw rgba(0,0,0,.55)}
.tv__glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 36%,transparent 37%)}
.tv__osd{position:absolute;top:7%;left:7%;pointer-events:none;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:4.4cqw;font-weight:500;line-height:1;letter-spacing:.01em;color:#d6ffd2;text-shadow:0 0 .8cqw rgba(140,255,150,.75),.25cqw .25cqw 0 rgba(0,0,0,.7)}
.tv__osd.is-dislike{color:#ffd4cf;text-shadow:0 0 .8cqw rgba(255,70,55,.8),.25cqw .25cqw 0 rgba(0,0,0,.7)}

.tv__badge{position:absolute;left:45.03%;top:78.21%;width:8.9%;height:2.5%;display:grid;place-items:center;pointer-events:none;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:.9cqw;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap;color:var(--ref-cobalt);text-shadow:0 .08cqw 0 rgba(255,255,255,.8)}
.tv__label{position:absolute;top:82.68%;height:1.86%;display:flex;align-items:center;pointer-events:none;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:1.25cqw;font-weight:500;line-height:1;color:#d2d3d4}
.tv__label--dislike{right:57.03%;padding-right:.9cqw}
.tv__label--like{left:56.5%}
.tv__button{position:absolute;top:82.68%;width:5.68%;height:1.86%;padding:0;border:0;cursor:pointer;background:url(assets/tv-cap.png) center / 100% 100% no-repeat;transition:transform 80ms,filter 80ms;-webkit-tap-highlight-color:transparent}
.tv__button--dislike{left:42.97%}
.tv__button--like{left:50.19%}
.tv__button:active{transform:translateY(.12cqw);filter:brightness(.88)}
.tv__button:focus-visible{outline:1px solid #fff;outline-offset:2px}

/* ---------- quick view drawer (ds components/overlay/Drawer) ---------- */
.drawer{position:fixed;inset:0;z-index:100;pointer-events:none}
.drawer.is-open{pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:var(--overlay-scrim);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;bottom:0;right:0;width:min(440px,100vw);background:var(--surface-page);border-left:1px solid var(--rule);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.drawer.is-open .drawer__panel{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear 0s}
.drawer__head{height:var(--header-h);padding:0 var(--edge);display:flex;align-items:center;justify-content:space-between;flex:none}
.drawer__title{font:var(--label-font);letter-spacing:var(--tracking-label);text-transform:uppercase}
.drawer__body{flex:1;overflow:auto;padding:0 var(--edge)}
.qv{display:flex;flex-direction:column;gap:36px;padding:8px 0 64px}
.qv__tabs{display:flex;align-items:baseline;gap:24px;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.3;color:var(--graphite);font-variant-numeric:tabular-nums}
.qv__empty{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.4;color:var(--stone)}
.qv__still{margin:0 calc(var(--edge) * -1);display:flex;flex-direction:column;gap:10px}
.qv__frame{aspect-ratio:1165 / 840;background:#171a19;overflow:hidden}
.qv__frame img{display:block;width:100%;height:100%;object-fit:cover}
.qv__cap{padding:0 var(--edge);font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.3;color:var(--graphite);font-variant-numeric:tabular-nums}
.qv__cap--center{padding:0;text-align:center}

/* the shelf */
.shelf{display:flex;flex-direction:column;margin:0 calc(var(--edge) * -1)}
.shelf__row{display:flex;align-items:flex-end;gap:1px;padding:28px calc(var(--edge) + 6px) 0;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:pan-x}
.shelf__row::-webkit-scrollbar{display:none}
.shelf__board{height:12px;background:linear-gradient(180deg,#f4f4f2 0,#e6e6e2 55%,#d4d4cf 100%);box-shadow:inset 0 1px 0 rgba(0,0,0,.08),0 1px 0 #c4c4bf,0 18px 24px -12px rgba(0,0,0,.26)}
.shelf__fade{height:5px;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,0))}
.spine{position:relative;flex:none;display:block;padding:0;border:0;cursor:pointer;overflow:hidden;transform:none;transition:transform 320ms cubic-bezier(.2,.7,.1,1)}
.spine:hover{transform:translateY(-10px)}
.spine.is-selected{transform:translateY(-16px)}
.spine--dvd{width:23px;height:300px;border-radius:2px 2px 1px 1px;box-shadow:0 1px 1.5px rgba(0,0,0,.32),inset 0 0 0 .5px rgba(0,0,0,.3)}
.spine__cap{position:absolute;left:0;right:0;height:8px}
.spine__cap--top{top:0;background:linear-gradient(180deg,#2a2a2a,#0e0e0e);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.spine__cap--bottom{bottom:0;background:linear-gradient(0deg,#2a2a2a,#0e0e0e);box-shadow:0 -1px 0 rgba(255,255,255,.12)}
.spine__text{position:absolute;left:0;right:0;top:16px;bottom:14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.spine__title{writing-mode:vertical-rl;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:11px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.spine__year{writing-mode:vertical-rl;font-family:var(--font-sans);font-size:8.5px;font-weight:500;line-height:1;white-space:nowrap;opacity:.78}
.spine__gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(255,255,255,.06) 12%,rgba(255,255,255,.34) 24%,rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 70%,rgba(0,0,0,.26) 100%)}
.spine--book{border-radius:1.5px 1.5px 1px 1px;box-shadow:0 1px 1.5px rgba(0,0,0,.3),inset 0 0 0 .5px rgba(0,0,0,.22)}
.spine__text--book{top:14px;bottom:12px}
.spine__btitle{writing-mode:vertical-rl;font-family:'Gloock',serif;font-size:12.5px;line-height:1;white-space:nowrap}
.spine__author{writing-mode:vertical-rl;font-family:'Newsreader',serif;font-style:italic;font-size:9.5px;line-height:1;white-space:nowrap;opacity:.85}
.spine__paper{position:absolute;inset:0;pointer-events:none;background:url(assets/paper.png) 0 0 / 160px 160px;opacity:.35;mix-blend-mode:multiply}
.spine__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,250,240,.45),rgba(255,250,240,0) 3%,rgba(255,250,240,0) 97%,rgba(255,250,240,.4)),linear-gradient(90deg,rgba(0,0,0,.24),rgba(255,255,255,.1) 30%,rgba(255,255,255,.04) 60%,rgba(0,0,0,.22))}
.spine__crease{position:absolute;left:26%;top:0;bottom:0;width:1px;background:rgba(255,253,245,.18)}

/* pages laid flat in the literature drawer */
.qv__page{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.qv__page-box{position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 8px 14px rgba(0,0,0,.07))}
.qv__page-in{position:absolute;left:0;top:0;width:330px;height:520px;transform-origin:0 0}
.qv__page-mask{position:absolute;inset:0}
.qv__page-mask.is-torn{mask-image:url(assets/tear-piece.png);-webkit-mask-image:url(assets/tear-piece.png);mask-size:100% 100%;-webkit-mask-size:100% 100%}
.qv__page-mask.is-folded{clip-path:polygon(52px 0,100% 0,100% 100%,0 100%,0 52px)}
.qv__page-core{position:absolute;inset:0;pointer-events:none;background:url(assets/tear-core.png) 0 0 / 100% 100%}
.qv__fold{position:absolute;left:0;top:0;width:52px;height:52px;filter:drop-shadow(1.5px 2px 1.6px rgba(60,40,10,.3))}
.qv__fold-tri{position:absolute;inset:0;clip-path:polygon(100% 0,0 100%,100% 100%);background-color:#ebe3cf;background-image:linear-gradient(315deg,rgba(60,40,10,.05),rgba(255,255,255,0) 45%,rgba(255,255,255,.5) 50%),url(assets/paper.png);background-size:auto,256px 256px}

/* ---------- 03 Literature ---------- */
.lit{position:relative;min-height:100vh;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:72px var(--edge) 88px;overflow:hidden;user-select:none;-webkit-user-select:none}
.stage{position:relative;flex:none}
.stage__inner{position:absolute;left:0;top:0;width:660px;height:520px;transform-origin:0 0;perspective:2400px}
.book{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:495px 260px;transition:transform 1150ms cubic-bezier(.45,.05,.2,1);--ty:0px;--sk:0deg}
.book__base{position:absolute;top:0;height:520px;transform:translateZ(-34px);border-radius:3px;box-shadow:16px 24px 38px -6px rgba(0,0,0,.20),4px 6px 12px rgba(0,0,0,.13),1px 1px 2px rgba(0,0,0,.16);transition:left 950ms cubic-bezier(.45,.05,.2,1) 200ms,width 950ms cubic-bezier(.45,.05,.2,1) 200ms,opacity 600ms ease 500ms}
.book__spread{position:absolute;left:-65.2px;top:-40.6px;width:796px;height:596px;transform:translateZ(-1px);background:url(assets/book-spread.jpg) 0 0 / 100% 100% no-repeat;pointer-events:none;opacity:0}
.book__spine{position:absolute;left:296px;top:0;width:34px;height:520px;transform-origin:100% 50%;transform:rotateY(-90deg);border-radius:2px;overflow:hidden;isolation:isolate;background:url(assets/book-spine.jpg) 0 0 / 100% 100% no-repeat}
.book__spine-text{position:absolute;left:0;right:0;top:28px;bottom:24px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.book__spine-title{writing-mode:vertical-rl;font-family:'Ultra',serif;font-size:15px;line-height:1;letter-spacing:-.01em;color:#0e0c10;white-space:nowrap;mix-blend-mode:multiply;opacity:.92}
.book__spine-imprint{writing-mode:vertical-rl;font-family:'Newsreader',serif;font-size:8.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#efe4cc;white-space:nowrap;opacity:.88}
.book__spine-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.06) 40%,rgba(0,0,0,.14))}

/* right page */
.book__right{position:absolute;left:330px;top:0;width:330px;height:520px;border-radius:0 3px 3px 0}
.book__right-in{position:absolute;inset:0;border-radius:0 3px 3px 0;overflow:hidden}
.book__right-tex{position:absolute;inset:0;background:url(assets/page-right.jpg) 0 0 / 100% 100% no-repeat;filter:brightness(.97)}
.book__right-clip{position:absolute;inset:0;clip-path:polygon(0px 0px,330px 0px,330px 0px,330px 520px,0px 520px)}
.book__rshadow{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(30,20,5,.34),rgba(30,20,5,.10) 30%,transparent 70%)}
/* the dog-ear flap */
.flap{position:absolute;right:0;top:0;transform-style:preserve-3d;transform-origin:50% 50%;pointer-events:none}
.flap__front{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;clip-path:polygon(0 0,100% 0,100% 100%);border-top-right-radius:3px}
.flap__front-page{position:absolute;right:0;top:0;width:330px;height:520px}
.flap__front-shade{position:absolute;inset:0;background:linear-gradient(225deg,rgba(255,255,255,0) 30%,rgba(60,40,10,.10) 50%);opacity:0;transition:opacity 420ms}
.flap__back{position:absolute;inset:0;backface-visibility:hidden;transform:rotate3d(1,1,0,180deg);transition:filter 520ms cubic-bezier(.2,.7,.1,1)}
.flap__paper{position:absolute;inset:0;clip-path:polygon(0 0,0 100%,100% 100%);background-color:#e6d3ac;background-image:linear-gradient(225deg,transparent 50%,rgba(255,250,235,.6) 50.4%,rgba(255,250,235,.16) 55%,rgba(255,255,255,0) 64%,rgba(60,40,10,.16) 100%),url(assets/paper-photo.jpg);background-size:auto,330px 330px}

/* left page, dog-ear markers, fore-edge */
.book__left{position:absolute;left:0;top:0;width:330px;height:520px;transform:translateZ(.5px);border-radius:3px 0 0 3px}
.book__left-in{position:absolute;inset:0;border-radius:3px 0 0 3px;overflow:hidden}
.ears{position:absolute;left:-8px;top:0;width:30px;height:44px;cursor:pointer}
.ear{position:absolute;left:2px;width:6px;height:8px;clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(225deg,#efe8d6 0 45%,#c4b594 55%)}
.book__fore{position:absolute;left:660px;top:3px;width:34px;height:514px;transform-origin:0 50%;transform:translateZ(2px) rotateY(90deg);background:url(assets/book-fore.jpg) 0 0 / 100% 100%;box-shadow:inset 3px 0 4px rgba(0,0,0,.18)}

/* the excerpt page: the stub bound at the gutter and the piece that tears away */
.book__stub{position:absolute;left:0;top:0;width:330px;height:520px;transform:translateZ(1px);pointer-events:none;filter:drop-shadow(-.6px 0 .9px rgba(40,25,5,.3))}
.book__stub-mask{position:absolute;inset:0;mask-image:url(assets/tear-stub.png),linear-gradient(#000 var(--ty),transparent var(--ty));-webkit-mask-image:url(assets/tear-stub.png),linear-gradient(#000 var(--ty),transparent var(--ty));mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-composite:intersect;-webkit-mask-composite:source-in}
.book__stub-core{position:absolute;inset:0;background:url(assets/tear-core-stub.png) 0 0 / 100% 100%}
.book__torn{position:absolute;left:0;top:0;width:330px;height:520px;transform-origin:100% 100%;transform-style:preserve-3d;transform:translateZ(1px);cursor:grab;touch-action:none}
.book__piece{position:absolute;inset:0;transform-origin:0 var(--ty);transform:skewX(var(--sk));filter:drop-shadow(.9px .3px 1.3px rgba(40,25,5,.34))}
.book__piece-mask{position:absolute;inset:0;border-radius:3px 0 0 3px;overflow:hidden;mask-image:url(assets/tear-piece.png),linear-gradient(#000 var(--ty),transparent var(--ty));-webkit-mask-image:url(assets/tear-piece.png),linear-gradient(#000 var(--ty),transparent var(--ty));mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-composite:intersect;-webkit-mask-composite:source-in}
.book__piece-core{position:absolute;inset:0;pointer-events:none;background:url(assets/tear-core.png) 0 0 / 100% 100%}
.book__below{position:absolute;inset:0;border-radius:3px 0 0 3px;overflow:hidden;mask-image:linear-gradient(transparent var(--ty),#000 var(--ty));-webkit-mask-image:linear-gradient(transparent var(--ty),#000 var(--ty))}
.book__lshadow{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(270deg,rgba(30,20,5,.34),rgba(30,20,5,.10) 30%,transparent 70%)}

/* cover */
.book__cover{position:absolute;left:330px;top:0;width:330px;height:520px;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(0deg) translateZ(3px)}
.cover__front{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px 5px 5px 2px;overflow:hidden;isolation:isolate}
.cover__photo{position:absolute;inset:0;background:url(assets/book-cover.jpg) 0 0 / 100% 100% no-repeat}
.cover__ink{position:absolute;inset:0;mask-image:url(assets/ink-wear.png);-webkit-mask-image:url(assets/ink-wear.png);mask-size:100% 100%;-webkit-mask-size:100% 100%;filter:blur(.25px)}
.cover__imprint{position:absolute;right:20px;bottom:24px;font-family:'Newsreader',serif;font-size:9px;font-weight:600;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:#f4ebd6;white-space:nowrap;text-align:right}
.cover__block{position:absolute;left:62px;right:18px;top:122px;display:flex;flex-direction:column;align-items:flex-start}
.cover__title{font-family:'Ultra',serif;font-size:66px;line-height:.86;letter-spacing:-.035em;color:#0e0c10;margin-left:-3px;mix-blend-mode:multiply;opacity:.94}
.cover__rule{width:132px;height:1.5px;margin:30px 0 22px;background:#efe4cc;opacity:.9}
.cover__sub{font-family:'Ultra',serif;font-size:24px;line-height:1.12;letter-spacing:-.01em;color:#f1e7d0;opacity:.95;text-wrap:balance}
.cover__sheen{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.06),rgba(255,255,255,0) 34%,rgba(0,0,0,0) 62%,rgba(0,0,0,.06))}
.cover__back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);border-radius:5px 2px 2px 5px;overflow:hidden}

/* the turning leaf: inner 132px and outer 198px segments hinged at x = 132 */
.leaf{position:absolute;left:330px;top:0;width:330px;height:520px;transform-origin:0 50%;transform-style:preserve-3d;transform:translateZ(2px) rotateY(0deg);pointer-events:none}
.leaf__seg1{position:absolute;left:0;top:0;width:132px;height:520px;transform-style:preserve-3d}
.leaf__seg2{position:absolute;left:132px;top:0;width:198px;height:520px;transform-origin:0 50%;transform-style:preserve-3d}
.leaf__face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
.leaf__face--back{transform:rotateY(180deg)}
.leaf__face--r{border-radius:0 3px 3px 0}
.leaf__face--l{border-radius:3px 0 0 3px}
.leaf__pg{position:absolute;left:0;top:0;width:330px;height:520px}
.leaf__pg--b1{left:-198px}
.leaf__pg--f2{left:-132px}
.leaf__shade{position:absolute;inset:0;background:#2a2014;opacity:0}
.leaf__shade--back{opacity:.3}

/* the torn stack beside the book */
.stack{position:absolute;left:700px;top:330px;width:150px;height:196px;cursor:pointer}
.stack__page{position:absolute;left:0;top:0;width:330px;height:520px;transform-origin:0 0;filter:drop-shadow(0 3px 3px rgba(0,0,0,.16)) drop-shadow(0 16px 26px rgba(0,0,0,.08))}
.stack__mask{position:absolute;inset:0;mask-image:url(assets/tear-piece.png);-webkit-mask-image:url(assets/tear-piece.png);mask-size:100% 100%;-webkit-mask-size:100% 100%}
.stack__core{position:absolute;inset:0;pointer-events:none;background:url(assets/tear-core.png) 0 0 / 100% 100%}

/* controls under the book */
.lit__controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;min-height:20px}
.lit__controls-l{display:flex;justify-content:flex-start}
.lit__controls-c{display:flex;justify-content:center;gap:40px}
.lit__controls-r{display:flex;justify-content:flex-end}

/* ---------- BookPage (330 × 520) ---------- */
.pg{position:relative;width:330px;height:520px;overflow:hidden;isolation:isolate;background-color:#ead9b6;color:#2a241b}
.pg__tex{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.pg__ink{position:absolute;inset:0;mix-blend-mode:multiply}
.pg__title{position:absolute;left:0;right:0;top:150px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pg__title-name{font-family:'Gloock',serif;font-size:44px;line-height:.98;letter-spacing:-.02em;color:#1d1b18}
.pg__title-rule{width:36px;height:1px;margin:22px 0 18px;background:#1d1b18}
.pg__title-sub{font-family:'Newsreader',serif;font-style:italic;font-size:15px;line-height:1.3;color:#24211d}
.pg__title-imprint{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-family:var(--font-sans);font-variation-settings:'wdth' 100;font-size:8px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#4d4943}
.pg__ex{position:absolute;left:38px;right:34px;top:74px}
.pg__num{text-align:center;font-family:'Gloock',serif;font-size:26px;line-height:1;color:#1d1b18}
.pg__body{margin-top:28px;font-family:'Newsreader',serif;font-size:14.5px;line-height:1.52;font-optical-sizing:auto;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pg__body p{margin:0;text-wrap:pretty}
.pg__folio{position:absolute;bottom:26px;text-align:center;font-family:'Newsreader',serif;font-size:11px;color:#5a544c}
.pg__folio--ex{left:38px;right:34px}
.pg__folio--info{left:34px;right:38px}
.pg__info{position:absolute;left:34px;right:38px;top:42px}
.pg__info-title{font-family:'Newsreader',serif;font-style:italic;font-size:23px;line-height:1.1;color:#1d1b18;text-wrap:balance}
.pg__info-byline{margin-top:7px;font-family:var(--font-sans);font-size:10.5px;font-weight:500;line-height:1.3;color:#4d4943}
.pg__info-rule{height:1px;margin:16px 0 14px;background:#bfa983}
.pg__info-sections{display:flex;flex-direction:column;gap:12px;font-family:'Newsreader',serif;font-size:12.5px;line-height:1.42;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.pg__sec{display:flex;flex-direction:column;gap:3px}
.pg__sec p{margin:0}
.pg__sec-h{font-family:var(--font-sans);font-size:10px;font-weight:600;line-height:1.3;color:var(--ref-cobalt)}
.pg__tech{margin:0 0 4px !important}