/* 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)}
/* the rail (shelf) pushes fixed right-edge links inwards */
.rail-open .corner--tr{right:calc(208px + var(--edge))}

/* ---------- 01 Home ---------- */
.home{min-height:100vh;background:var(--white);display:grid;place-items:center;padding:clamp(24px,6vh,var(--space-9)) var(--edge) clamp(32px,6vh,var(--space-9))}
.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' 125;font-size:clamp(17px,1.35vw,21px);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ref-cobalt);text-decoration:none}
.home__studio:hover{color:var(--ref-cobalt);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.home__studio:active{opacity:.6}
.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}
/* the your-taste bar: from the first response */
.home__bar{margin-top:40px;width:100%;max-width:420px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 18px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.home__bar:active{opacity:.6}
.home__bar-word{font-family:var(--font-sans);font-variation-settings:'wdth' 125;font-size:22px;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ref-cobalt)}
.home__bar-note{font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.3;color:var(--graphite);text-align:right}
.home__nav{margin-top:clamp(24px,5vh,104px);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__taste{position:relative;display:inline-block;font-weight:700;color:var(--ink);text-decoration:none;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)}
.home__taste:hover,.home__taste:focus-visible{background-size:100% 1px}
/* the objects: the set above `film`, the paperback above `literature`; both the photograph and the word are links */
.home__objects{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:clamp(56px,7vw,128px);margin-top:clamp(10px,1.6vh,20px)}
.home__object{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vh,30px)}
.home__photo{position:relative;display:block;height:clamp(150px,30vh,320px)}
.home__photo img{position:relative;display:block;height:100%;width:auto;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.14)) drop-shadow(0 10px 14px rgba(0,0,0,.10))}
.home__photo--book img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.16)) drop-shadow(0 10px 14px rgba(0,0,0,.10))}
.home__ground{position:absolute;left:6%;right:6%;bottom:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,18,15,.26),rgba(20,18,15,0));filter:blur(2px)}
.home__photo--book .home__ground{left:4%;right:4%;bottom:-4px;height:10px}

/* ---------- 02 Film ---------- */
.cinema{position:relative;min-height:100vh;background:var(--white);display:grid;place-items:center;padding:72px var(--edge) 88px;overflow:hidden;transition:padding 320ms cubic-bezier(.2,.7,.1,1)}
.rail-open .cinema{padding-right:calc(208px + var(--edge))}

/* 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;transition:width 320ms cubic-bezier(.2,.7,.1,1)}
.rail-open .tv{width:min(calc(92vw - 208px),calc((100vh - 160px) * 1.107),880px)}
@supports (height:100dvh){.rail-open .tv{width:min(calc(92vw - 208px),calc((100dvh - 160px) * 1.107),880px)}}
.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}
/* the cap lights up as the remote tilts towards it (phones) */
.tv__glow{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 420ms cubic-bezier(.2,.7,.1,1)}
.tv__glow--dislike{filter:drop-shadow(0 0 .35cqw rgba(255,60,45,.8)) drop-shadow(0 0 1.1cqw rgba(255,60,45,.8))}
.tv__glow--like{filter:drop-shadow(0 0 .35cqw rgba(80,230,110,.8)) drop-shadow(0 0 1.1cqw rgba(80,230,110,.8))}
.tv__glow>span{position:absolute;inset:0;-webkit-mask:url(assets/tv-cap-mask.png) center / 100% 100% no-repeat;mask:url(assets/tv-cap-mask.png) center / 100% 100% no-repeat}
.tv__glow--dislike>span{background:#ff5a4a}
.tv__glow--like>span{background:#5fe07a}

/* ---------- the remote (phones; shown by app.js below 640px) ---------- */
.remote{position:fixed;left:50%;z-index:4;transform:translateX(-50%);pointer-events:none}
.remote__tilt{position:absolute;inset:0;transform-origin:50% 115%;pointer-events:auto;touch-action:pan-y;cursor:grab;transition:transform 560ms cubic-bezier(.2,.7,.1,1)}
.remote__art{position:absolute;left:0;top:0;width:246px;height:893px;transform-origin:0 0}
.remote__body{position:absolute;left:0;top:0;width:246px;height:893px;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22)) drop-shadow(6px 14px 16px rgba(0,0,0,.16))}
.remote__btn{position:absolute;padding:0;border:0;cursor:pointer;pointer-events:auto;background:0 0 / 100% 100% no-repeat;transition:transform 70ms,filter 70ms;-webkit-tap-highlight-color:transparent}
.remote__btn::before{content:'';position:absolute}
.remote__btn--dislike{left:54px;top:201px;width:53px;height:42px;background-image:url(assets/remote-power.png)}
.remote__btn--dislike::before{inset:-26px -11px -34px -24px}
.remote__btn--like{left:129px;top:199px;width:47px;height:46px;background-image:url(assets/remote-green.png)}
.remote__btn--like::before{inset:-24px -24px -32px -11px}
.remote__btn:active{transform:translateY(1.5px);filter:brightness(.86)}
.remote__label{position:absolute;top:254px;width:100px;margin:0;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:16px;font-weight:600;line-height:1;letter-spacing:.01em;color:#3d3d3c;text-align:center}
.remote__label--dislike{left:30px}
.remote__label--like{left:102px}
.remote__brand{position:absolute;left:0;right:0;top:400px;margin:0;text-align:center;font-family:var(--font-sans);font-variation-settings:'wdth' 125;font-size:22px;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ref-cobalt)}

/* ---------- the shelf: mini shelf (below 900px) ---------- */
.mini{position:fixed;left:var(--edge);bottom:var(--edge);z-index:5;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.mini__link{display:flex;align-items:flex-end;gap:16px;width:min(calc(100vw - 2 * var(--edge)),420px);min-height:44px;text-decoration:none;color:var(--ink);font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.mini__link:active{opacity:.6}
.mini__strip{flex:1;min-width:0;display:flex;align-items:flex-end;height:40px;border-bottom:1px solid var(--graphite);overflow:hidden}
.mini__spine{display:block;flex:none;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2),inset 1px 0 0 rgba(255,255,255,.18),inset -1px 0 0 rgba(0,0,0,.18);transition:width 360ms cubic-bezier(.2,.7,.1,1),margin 360ms cubic-bezier(.2,.7,.1,1),opacity 200ms}
.mini__text{flex:none;display:flex;align-items:baseline;gap:8px;padding-bottom:2px}
.mini__count{color:var(--stone)}

/* ---------- the shelf: desktop rail (900px and up) and its closed tab ---------- */
.rail{position:fixed;top:0;right:0;bottom:0;width:208px;z-index:6;background:var(--white);border-left:1px solid var(--rule);display:flex;flex-direction:column}
.rail__head{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:var(--edge) 20px 0;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}
.rail__filters{flex:none;display:flex;align-items:baseline;gap:14px;padding:16px 20px 0;font-variant-numeric:tabular-nums}
.rail__f{font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3;color:var(--stone);text-decoration:none}
.rail__f:hover{color:var(--stone)}
.rail__f.is-active,.rail__f.is-active:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.rail__rows{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:22px;padding:28px 20px 0}
.rail__row{flex:none;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid var(--graphite)}
.rail__slot{flex:none;overflow:hidden;display:flex;justify-content:flex-start;transition:width 360ms cubic-bezier(.2,.7,.1,1)}
.rail__spine{flex:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:7px 0 6px;border:0;border-radius:0;cursor:pointer;font:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 1px 0 0 rgba(255,255,255,.16),inset -1px 0 0 rgba(0,0,0,.22);transition:opacity 200ms}
.rail__spine:hover{filter:brightness(1.08)}
.rail__spine-title{min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;writing-mode:vertical-rl;font-family:var(--font-sans);font-size:9px;font-weight:600;line-height:1}
.rail__spine--book .rail__spine-title{font-family:'Newsreader',serif}
.rail__spine-meta{flex:none;writing-mode:vertical-rl;font-family:var(--font-sans);font-size:8px;font-weight:500;line-height:1;opacity:.8;font-variant-numeric:tabular-nums}
.rail__caption{flex:none;min-height:16px;padding:12px 20px var(--edge);font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3;color:var(--stone)}
.rail__tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:6;display:block;writing-mode:vertical-rl;padding:20px 9px;background:var(--white);border:1px solid var(--rule);border-right:0;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.rail__tab:hover{color:var(--graphite)}
.rail__tab:active{opacity:.6}
/* the spine in flight between the screen and its slot */
.flyer{position:fixed;z-index:60;pointer-events:none;transform-origin:0 0;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 8px 18px rgba(0,0,0,.14)}
.flyer__title{writing-mode:vertical-rl;min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:600;line-height:1}

/* ---------- 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__tabs-end{margin-left:auto}
.qv__profile{font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ref-cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.qv__profile:hover{color:var(--ref-cobalt)}
.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;transition:padding 320ms cubic-bezier(.2,.7,.1,1)}
.rail-open .lit{padding-right:calc(208px + var(--edge))}
.stage{position:relative;flex:none}
.stage.is-phone{overflow:clip}
.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}

/* 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}
/* phones: the scrub bar between passage and notes, the actions with their swipe captions, Previous / Next */
.lit__phone{display:flex;flex-direction:column;gap:28px;margin-top:-20px}
.scrub{position:relative;height:24px;margin:-8px 0 -12px;cursor:pointer;touch-action:none}
.scrub__track{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--rule)}
.scrub__thumb{position:absolute;top:10px;left:0;width:50%;height:3px;background:var(--ink);transition:left 520ms cubic-bezier(.2,.7,.1,1)}
.lit__phone-acts{display:flex;justify-content:space-between;align-items:flex-start}
.lit__phone-act{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lit__phone-act--r{align-items:flex-end}
.lit__hint{font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3;color:var(--stone);overflow:hidden;max-height:20px;transition:opacity 500ms cubic-bezier(.2,.7,.1,1),max-height 500ms cubic-bezier(.2,.7,.1,1) 300ms}
.lit__phone-nav{display:flex;justify-content:center;align-items:baseline;gap:24px}

/* ---------- 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:calc(12px * var(--fit, 1));font-family:'Newsreader',serif;font-size:calc(12.5px * var(--fit, 1));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}

/* ---------- 04 Taste profile: the sorting table ---------- */
.taste{position:relative;min-height:100vh;background:var(--white);user-select:none;-webkit-user-select:none}
.taste__bar{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;align-items:baseline;padding:var(--edge)}
.taste__switch{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)}
.taste__empty{min-height:100vh;display:grid;place-items:center;padding:0 var(--edge)}
.taste__empty p{margin:0;max-width:16ch;text-align:center;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:clamp(26px,3.4vw,48px);font-weight:500;line-height:1.15;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.taste__empty-link{font-weight:600;color:var(--ref-cobalt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.taste__empty-link:hover{color:var(--ref-cobalt)}
.taste__body{display:grid;grid-template-columns:404px minmax(0,1fr);column-gap:48px;padding:0 0 64px var(--edge)}
.taste__col{padding-top:112px}
.taste__h{margin:0;font-family:var(--font-sans);font-variation-settings:'wdth' 125;font-size:40px;font-weight:600;line-height:.95;letter-spacing:-.04em;color:var(--ink)}
.taste__basis,.taste__note{margin:16px 0 0;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}
.taste__note{margin:0;line-height:1.4;text-wrap:pretty}
.taste__findings{margin-top:56px;display:flex;flex-direction:column;gap:22px}
.tf{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;padding:0;border:0;background:none;text-align:left;cursor:pointer;opacity:.36;transition:opacity 320ms cubic-bezier(.2,.7,.1,1)}
.tf:hover,.tf.is-active{opacity:1}
.tf__num{font-family:'Newsreader',serif;font-style:italic;font-size:17px;line-height:1.6;color:var(--stone)}
.tf__text{display:flex;flex-direction:column;gap:4px}
.tf__dir{font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3;color:var(--ref-cobalt)}
.tf__dir--away{color:var(--ref-cola)}
.tf__title{font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:28px;font-weight:500;line-height:1.08;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.taste__detail{margin-top:44px;padding:22px 0 0 42px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:16px}
.taste__detail-ev,.taste__rel{margin:0;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.4;color:var(--graphite);font-variant-numeric:tabular-nums}
.taste__terms{margin:0;display:flex;flex-direction:column;gap:12px}
.taste__terms dt{font-family:'Newsreader',serif;font-style:italic;font-size:18px;line-height:1.25;color:var(--ink)}
.taste__terms dd{margin:3px 0 0;font-family:'Newsreader',serif;font-size:15px;line-height:1.42;color:var(--graphite);text-wrap:pretty}
/* the table: the works lie on white and re-sort into bands */
.taste__table{position:relative;min-height:calc(100vh - 64px)}
.tlabel{position:absolute;left:24px;top:0;transition:transform 700ms cubic-bezier(.2,.7,.1,1);font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3}
.tobj{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 700ms cubic-bezier(.2,.7,.1,1),opacity 500ms cubic-bezier(.2,.7,.1,1);cursor:zoom-in}
.tobj__print{padding:8px 8px 9px;background:#fbfbf9;box-shadow:0 1px 1px rgba(0,0,0,.14),0 3px 6px -2px rgba(0,0,0,.10),0 14px 26px -10px rgba(0,0,0,.22)}
.tobj__frame{aspect-ratio:1165 / 840;background:#171a19;pointer-events:none;overflow:hidden}
.tobj__frame img{display:block;width:100%;height:100%;object-fit:cover}
.tobj__page{position:relative;width:165px;height:260px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 10px 16px rgba(0,0,0,.09))}
.tobj__page-in{position:absolute;left:0;top:0;width:330px;height:520px;transform-origin:0 0;transform:scale(.5)}
.tobj__cap{margin:12px 0 0;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3;color:var(--graphite);transition:opacity 400ms}
/* examining one work */
.taste__exam{position:fixed;inset:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:var(--edge);cursor:zoom-out;overflow:auto}
.taste__exam-close{position:absolute;top:var(--edge);right:var(--edge)}
.taste__exam-print{width:min(760px,100%);padding:12px 12px 13px;background:#fbfbf9;box-shadow:0 1px 1px rgba(0,0,0,.14),0 6px 12px -4px rgba(0,0,0,.10),0 30px 60px -20px rgba(0,0,0,.28)}
.taste__exam-page{position:relative;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 22px 34px rgba(0,0,0,.12))}
.taste__exam-text{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:13px;font-weight:500;line-height:1.4;color:var(--graphite);text-align:center}
.taste__exam-text p{margin:0}
.taste__exam-cap{color:var(--ink)}

/* reduced motion: things appear in place instead of moving (the fly-in and the hints are skipped in script) */
@media (prefers-reduced-motion:reduce){
  .rail__slot,.rail__spine,.mini__spine,.tobj,.tlabel,.scrub__thumb,.stage__inner,.cinema,.lit,.tv,.remote__tilt{transition:none}
}

/* ---------- Mobile and touch (2026-10-21). Every rule below is gated by a media or feature query that desktop
   browsers with a mouse do not match, or produces the same value on desktop (dvh equals vh there). ---------- */

/* Mobile browsers' toolbars make 100vh taller than the visible screen; dvh is the visible height. */
@supports (height:100dvh) {
  .home,.cinema,.lit{min-height:100dvh}
  .tv{width:min(92vw,calc((100dvh - 160px) * 1.107),880px)}
}

/* Touch: no double-tap zoom delay on controls; hover effects that would stick after a tap stay off. */
@media (pointer:coarse) {
  html{touch-action:manipulation}
  /* The TV's cap buttons are 6 px tall on a phone: an invisible hit area of about 44 px makes them usable, each
     extending outwards over its own label, so the two never overlap. */
  .tv__button::before{content:'';position:absolute;top:-19px;bottom:-19px}
  .tv__button--dislike::before{left:-26px;right:-2px}
  .tv__button--like::before{left:-2px;right:-26px}
  /* text controls get room for a fingertip without changing how they look */
  .lit__controls .textlink{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px;background-position:0 calc(100% - 10px)}
  .corner .qlink{padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px;background-position:0 calc(100% - 8px)}
  .drawer__head .textlink,.corner--tr .textlink,.qv__tabs .qlink{padding-top:14px;padding-bottom:14px;margin-top:-14px;margin-bottom:-14px;background-position:0 calc(100% - 12px)}
}
@media (hover:none) {
  .spine:hover{transform:none}
  .spine.is-selected{transform:translateY(-16px)}
}

/* Narrow screens: the title scales with the width below 420 px (identical to the approved 112 px at 375 px), and the
   counter sits above the bottom links instead of colliding with them. */
@media (max-width:420px) {
  .home__title{font-size:29.8vw}
}
/* Phones (handoff update 2): the home objects stack, the literature mini shelf sits in the flow, the profile stacks. */
@media (max-width:639px) {
  .home__objects{flex-direction:column;align-items:center;gap:56px}
  .home__photo{height:min(60vw,260px)}
  .mini--lit{position:static}
  .lit__phone .textlink{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px;background-position:0 calc(100% - 10px)}
  .taste__bar{position:static;padding:20px}
  .taste__body{display:block;padding:0 0 64px}
  .taste__col{padding:40px 20px 0}
  .taste__h{font-size:36px}
  .taste__basis{margin-top:14px}
  .taste__findings{margin-top:40px;gap:18px}
  .tf{grid-template-columns:30px minmax(0,1fr);column-gap:6px;min-height:44px}
  .tf__num{font-size:16px}
  .tf__text{gap:3px}
  .tf__title{font-size:24px;line-height:1.1}
  .taste__detail{margin:32px 20px 0;padding:20px 0 0 36px;gap:14px}
  .taste__terms dd{font-size:16px}
  .taste__table,.taste__table--phone{min-height:0;height:auto !important;margin-top:44px;display:flex;flex-direction:column;gap:28px}
  .tband{display:flex;flex-direction:column;gap:14px}
  .tband__label{margin:0;padding:0 20px;font-family:var(--font-sans);font-variation-settings:'wdth' 112;font-size:12px;font-weight:500;line-height:1.3}
  .tband__row{display:flex;gap:20px;overflow-x:auto;padding:4px 20px 18px;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .tband__row::-webkit-scrollbar{display:none}
  .tband .tobj{position:static;flex:none;scroll-snap-align:start;transform:none;transition:none}
  .tobj__print{padding:7px 7px 8px;box-shadow:0 1px 1px rgba(0,0,0,.14),0 3px 6px -2px rgba(0,0,0,.10),0 12px 22px -10px rgba(0,0,0,.22)}
  .tobj__cap{margin-top:10px}
  .taste__exam{background:rgba(255,255,255,.94);backdrop-filter:none;-webkit-backdrop-filter:none;gap:24px;padding:20px}
  .taste__exam-close{top:20px;right:20px}
  .taste__exam-print{width:100%;padding:8px 8px 9px;box-shadow:0 1px 1px rgba(0,0,0,.14),0 20px 40px -16px rgba(0,0,0,.28)}
}

/* Phones in landscape: less vertical padding so the TV and the book use the height that is there. */
@media (max-height:520px) and (orientation:landscape) {
  .home{padding:40px var(--edge)}
  .home__stack{transform:none}
  .home__title{font-size:min(21vw,25vh)}
  .home__tagline{margin-top:3vh}
  .home__nav{margin-top:6vh}
  .cinema{padding:46px var(--edge) 46px}
  .tv{width:min(92vw,calc((100vh - 92px) * 1.107),880px)}
  .lit{padding:44px var(--edge) 40px;gap:12px}
}
@supports (height:100dvh) {
  @media (max-height:520px) and (orientation:landscape) {
    .tv{width:min(92vw,calc((100dvh - 92px) * 1.107),880px)}
  }
}

/* Phones: the book shows one page at a time (js/book.js, below 640px). Sideways swipes on the pages vote, so the browser
   must not treat them as scrolling or history gestures; the stage is clipped (not hidden) so nothing scrolls sideways. */
@media (max-width:639px) {
  .book__right,.book__torn{touch-action:none}
  .lit{overflow:clip}
}