:root{
  --paper:#ffffff; --ink:#0a0a0a; --black:#000000; --grey:#767676; --line:#b3b3b3; --pale:#cccccc;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Jost',ui-sans-serif,system-ui,sans-serif; --hand:'Caveat',cursive;
  --s5:5px; --s10:10px; --s15:15px; --s20:20px; --s25:25px; --s30:30px; --s50:50px; --s80:80px; --s100:100px;
  --col:1200px; --gut:40px; --sec:90px; --ease:cubic-bezier(.2,.7,.2,1);
  --chip-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%230a0a0a' d='M1.9 1.5 L20.3 1.3 L37.8 1.9 L54.7 2.2 L72.5 2.1 L90.3 1.4 L108.8 2.9 L126.0 1.6 L144.7 3.1 L162.4 2.0 L180.9 1.3 L198.4 1.8 L197.1 12.6 L197.4 25.0 L197.2 35.7 L198.1 46.5 L197.9 56.9 L179.2 57.2 L162.6 57.7 L144.1 58.0 L126.6 57.4 L109.4 58.2 L90.6 57.9 L73.4 58.6 L56.0 57.4 L38.6 57.0 L19.8 58.3 L1.6 57.8 L1.3 47.0 L2.7 35.7 L3.0 24.1 L2.6 13.5Z'/%3E%3C/svg%3E");
  --chip-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-opacity='0.7' stroke-width='1.2' vector-effect='non-scaling-stroke' d='M2.3 2.1 L20.6 3.1 L37.7 2.5 L54.8 2.6 L73.6 3.2 L91.7 1.8 L108.7 2.5 L125.8 2.1 L143.9 1.4 L161.4 2.7 L179.4 1.7 L197.6 2.9 L197.0 13.2 L197.9 25.1 L198.4 36.2 L197.4 46.5 L197.5 58.6 L180.8 57.1 L161.7 57.3 L144.0 57.8 L126.8 57.3 L108.0 57.6 L90.9 57.9 L74.1 58.2 L55.6 58.0 L38.1 56.9 L20.7 58.4 L2.9 58.4 L2.0 46.5 L1.4 35.8 L1.3 23.7 L1.6 12.7Z'/%3E%3C/svg%3E");
  --rib-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 140' preserveAspectRatio='none'%3E%3Cpath fill='%230a0a0a' d='M1.3 0 L1.0 5.8 L0.9 11.5 L1.1 17.3 L1.0 23.1 L1.3 28.9 L0.9 34.6 L1.8 40.4 L1.5 46.2 L1.0 52.0 L1.2 57.8 L1.2 63.5 L1.3 69.3 L1.0 75.1 L1.7 80.9 L1.9 86.6 L1.4 92.4 L1.4 98.2 L1.0 104.0 L1.0 109.7 L1.2 115.5 L1.2 121.3 L1.7 127.1 L1.1 132.8 L1.5 140 L27.1 122 L54.5 140 L55.0 132.8 L54.5 127.1 L54.1 121.3 L54.5 115.5 L54.0 109.7 L54.5 104.0 L55.0 98.2 L54.9 92.4 L54.7 86.6 L54.3 80.9 L54.4 75.1 L54.2 69.3 L54.8 63.5 L54.5 57.8 L54.8 52.0 L54.3 46.2 L54.2 40.4 L54.8 34.6 L55.0 28.9 L54.9 23.1 L54.8 17.3 L54.8 11.5 L54.7 5.8 L54.2 0Z'/%3E%3C/svg%3E");
  --rib-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 140' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-opacity='0.7' stroke-width='1.2' vector-effect='non-scaling-stroke' d='M1.5 0 L1.3 5.8 L0.9 11.5 L0.9 17.3 L1.2 23.1 L1.2 28.9 L1.6 34.6 L1.9 40.4 L1.3 46.2 L1.8 52.0 L1.9 57.8 L1.9 63.5 L1.3 69.3 L1.1 75.1 L1.1 80.9 L1.1 86.6 L1.1 92.4 L1.5 98.2 L1.8 104.0 L1.7 109.7 L1.4 115.5 L1.6 121.3 L1.7 127.1 L1.0 132.8 L1.5 140 L28.3 122 L54.5 140 L54.9 132.8 L54.8 127.1 L54.8 121.3 L54.5 115.5 L54.2 109.7 L54.8 104.0 L54.3 98.2 L54.8 92.4 L55.0 86.6 L54.4 80.9 L54.4 75.1 L54.9 69.3 L54.7 63.5 L54.2 57.8 L54.1 52.0 L54.2 46.2 L54.9 40.4 L54.8 34.6 L54.1 28.9 L54.8 23.1 L55.0 17.3 L54.7 11.5 L54.4 5.8 L54.5 0Z'/%3E%3C/svg%3E");
  --underline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6 C18 2.2 30 4.4 48 3.1 S80 2.4 99 3.4' fill='none' stroke='%230a0a0a' stroke-width='1.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.4;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ol,ul{list-style:none}
button,input{font:inherit;color:inherit;background:none;border:0;letter-spacing:inherit}
button{cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wrap{max-width:calc(var(--col) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
section{position:relative;padding:var(--sec) 0 0}
main>section:last-child{padding-bottom:var(--sec)}
.t{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.t::after{content:"";display:block;width:40px;height:1px;margin:var(--s15) auto 0;background:var(--ink)}
.eyebrow{display:block;font-family:var(--sans);font-weight:400;font-size:12px;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.door{margin-top:var(--s30);display:flex;justify-content:center}

/* paper chip button (F .chip, inverted) */
.chip{position:relative;display:inline-flex;align-items:center;gap:var(--s10);height:52px;padding:0 var(--s25) 0 var(--s20);font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:var(--paper);isolation:isolate;white-space:nowrap}
.chip::before,.chip::after{content:"";position:absolute;inset:0;background:var(--chip-fill) center/100% 100% no-repeat;z-index:-1;transition:transform .3s var(--ease)}
.chip::before{background-image:var(--chip-line);transform:translate(6px,6px)}
.chip:hover::after{transform:translate(3px,3px)}
.chip:active::after{transform:translate(6px,6px)}
.chip svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.chip:hover svg{transform:translateX(3px)}
.ul{position:relative;display:inline-flex;align-items:center;gap:var(--s10);min-height:44px;font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:6px;background:var(--underline) center/100% 100% no-repeat;transform:scaleX(1);transform-origin:left;transition:transform .35s var(--ease)}
.ul:hover::after{transform:scaleX(.35)}
.ul svg{width:14px;height:14px}

/* word badges (spine pill badge) */
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5)}
.badges span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s10);border:1px solid var(--pale);border-radius:9999px;font-family:var(--sans);font-size:12px;line-height:1;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.badges .dm{height:20px;width:auto;flex:none;margin:-2px 0 -2px -3px}

/* a framed studio book */
.fr{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--paper)}
.pat{background:var(--paper) url(assets/pattern/strokes.webp) center/520px repeat}

/* ============ nav: centred masthead with the bookmark ============ */
.mh{position:fixed;left:0;right:0;top:0;z-index:40;height:110px;pointer-events:none}
.mh>*{pointer-events:auto}
.mh-ground{position:absolute;left:0;right:0;top:0;height:64px;background:var(--paper);border-bottom:1px solid var(--pale);opacity:0;transition:opacity .3s linear;pointer-events:none}
.mh.is-compact .mh-ground{opacity:1}
.rib{position:absolute;left:50%;top:0;width:56px;height:96px;margin-left:-28px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;z-index:2;transition:transform .3s var(--ease)}
.rib::before,.rib::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:var(--rib-fill) center/100% 100% no-repeat;z-index:-1}
.rib::before{background-image:var(--rib-line);transform:translate(5px,5px)}
.rib img{width:36px;height:42px;object-fit:contain;transition:transform .45s var(--ease)}
.rib:hover{transform:translateY(6px)}
.rib:hover img{transform:rotate(-4deg)}
.mh.is-compact .rib{transform:translateY(-30px)}
.mh.is-compact .rib:hover{transform:translateY(-24px)}
.mh-side{position:absolute;top:28px;display:flex;align-items:center;gap:var(--s5);transition:transform .35s var(--ease)}
.mh-l{right:calc(50% + 56px)}
.mh-r{left:calc(50% + 56px)}
.mh.is-compact .mh-side{transform:translateY(-18px)}
.mh-lk{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.mh-lk::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:6px;background:var(--underline) center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.mh-lk:hover::after,.mh-lk[aria-current]::after{transform:scaleX(1)}
.mh-lk svg{width:15px;height:15px}
.mh-sep{width:1px;height:18px;background:var(--pale);margin:0 4px}
.mh-phone{display:none}
.findband{position:fixed;left:0;right:0;top:64px;z-index:39;background:var(--paper);border-bottom:1px solid var(--pale);transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .3s var(--ease),opacity .2s linear,visibility 0s .3s}
.findband.open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--ease),opacity .2s linear}
.findband form{max-width:760px;margin:0 auto;padding:var(--s25) var(--gut) var(--s30)}
.field{display:flex;align-items:center;gap:var(--s10);height:52px;border-bottom:1px solid var(--ink)}
.field svg{width:18px;height:18px;flex:none;color:var(--grey)}
.field input{flex:1;height:100%;font-family:var(--serif);font-size:22px;font-style:italic;outline:none}
.field input::placeholder{color:var(--grey)}
.menu{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;align-items:center;overflow:hidden auto;opacity:0;pointer-events:none;transition:opacity .35s ease-out}
.menu.open{opacity:1;pointer-events:auto}
.menu[hidden]{display:none}
.menu .x{position:absolute;right:6px;top:6px;width:48px;height:48px;display:grid;place-items:center}
.menu .x svg{width:18px;height:18px}
.menu .mk{margin-top:46px;width:88px;transform:translateY(-8px);opacity:0;transition:transform .6s var(--ease),opacity .4s linear}
.menu.open .mk{transform:none;opacity:1}
.menu .nm{margin-top:var(--s15);font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}
.menu nav{margin-top:var(--s25);display:flex;flex-direction:column;align-items:center}
.menu nav a{display:block;padding:8px 20px;font-family:var(--sans);font-size:24px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-align:center;transform:translateY(12px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.menu.open nav a{transform:none;opacity:1}
.menu.open nav a:nth-of-type(2){transition-delay:.05s}.menu.open nav a:nth-of-type(3){transition-delay:.1s}.menu.open nav a:nth-of-type(4){transition-delay:.15s}.menu.open nav a:nth-of-type(5){transition-delay:.2s}
.menu nav i{display:block;width:5px;height:5px;margin:3px auto;border:1px solid var(--line);transform:rotate(45deg)}
.menu form{margin-top:var(--s30);width:min(320px,calc(100% - 48px))}
.menu .field{height:48px}
.menu .field input{font-size:19px}
.menu .so{margin:var(--s30) 0 var(--s50);display:flex;gap:var(--s25)}

/* ============ hero ============ */
.hero{padding:140px 0 0;text-align:center}
.hero .eyebrow{letter-spacing:.3em}
.hero h1{margin-top:var(--s25);font-family:var(--serif);font-weight:300;font-size:100px;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.hero .ph{display:none}
.hero .line{margin-top:var(--s25);font-style:italic;font-size:24px;line-height:1.35;color:var(--ink)}
.hero .door{margin-top:var(--s30)}
.art{position:relative;max-width:1440px;margin:-95px auto 0;padding:0 var(--gut);display:flex;justify-content:space-between}
.half{position:relative;width:39%;aspect-ratio:960/500}
.pc{position:absolute;overflow:hidden;z-index:var(--z)}
.pc img{width:100%;height:auto;opacity:0;transform:translateY(5px);transition:opacity .9s linear var(--d),transform 1.2s var(--ease) var(--d)}
.pc::after{content:"";position:absolute;inset:-2px;background:var(--paper);transform:translateX(0);transition:transform 1.3s cubic-bezier(.55,.1,.3,1) var(--d)}
.drawn .pc img{opacity:1;transform:none}
.drawn .pc::after{transform:translateX(101%)}
.pc.fly img{animation:fly 7s ease-in-out 4.5s infinite}
@keyframes fly{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-8px)}}

/* ============ latest verdicts: cards that turn ============ */
.hand{margin-top:var(--s30);display:flex;justify-content:center;align-items:center;gap:var(--s30)}
.card{position:relative;flex:none;width:230px;height:390px;perspective:1300px}
.card.big{width:300px;height:450px}
.card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.card.flipped .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--paper);border:1px solid var(--line)}
.face::before{content:"";position:absolute;inset:9px;border:1px solid transparent;pointer-events:none}
.face.front{padding:var(--s25) var(--s20) var(--s20);width:100%}
.face.front .bk{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.face.front .bk img{max-height:100%;width:auto;max-width:100%;transition:transform .5s var(--ease)}
.card:hover .face.front .bk img{transform:translateY(-8px)}
.face .new{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:var(--s15)}
.face.front .nm{margin-top:var(--s15);font-weight:500;font-size:17px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase}
.face.front .turn{margin-top:var(--s5);display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--grey)}
.face.front .turn svg{width:13px;height:13px}
.face.back{transform:rotateY(180deg);padding:var(--s30) var(--s20) var(--s20);border-color:var(--ink);justify-content:center}
.face.back .lb{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}
.face.back .vv{margin-top:var(--s15);font-weight:500;font-size:34px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.card.big .face.back .vv{font-size:44px}
.face.back .bt{margin-top:var(--s15);font-style:italic;font-size:19px;line-height:1.25;color:var(--ink)}
.face.back .badges{margin-top:var(--s20)}
.face.back .ul{margin-top:var(--s20)}
.face.back .again{position:absolute;right:6px;bottom:6px;width:40px;height:40px;display:grid;place-items:center;color:var(--grey)}
.face.back .again svg{width:15px;height:15px}
.face[inert]{pointer-events:none}

/* ============ mood: pick a card ============ */
.mood .table{position:relative;margin:var(--s30) auto 0;max-width:860px;text-align:center}
.tcards{display:flex;justify-content:center;gap:var(--s25);padding:14px 0 var(--s10);transform-origin:50% 0;transition:transform .7s var(--ease)}
.mood.picked .tcards{transform:scale(.8);margin-bottom:-72px}
.tc{position:relative;flex:none;width:240px;height:360px;perspective:1300px;transition:transform .6s var(--ease),opacity .4s linear}
.tc:nth-child(1){transform:rotate(-4deg) translateY(12px)}
.tc:nth-child(3){transform:rotate(4deg) translateY(12px)}
.mood.picked .tc{transform:none}
.mood.picked .tc:not(.chosen){opacity:.45}
.tc button{position:absolute;inset:0;width:100%}
.tc .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.tc.up .in{transform:rotateY(180deg)}
.tc .bk,.tc .fc{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--paper);border:1px solid var(--ink)}
.tc .bk{display:grid;place-items:center;padding:var(--s15);transition:transform .45s var(--ease)}
.tc .bk img{width:100%;max-height:240px;object-fit:contain}
.tc .bk .star{position:absolute;width:9px;height:9px;background:var(--ink);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.tc:not(.up) button:hover .bk{transform:translateY(-10px)}
.tc .fc{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s15);padding:var(--s20)}
.tc .fc img{width:100%;height:220px;object-fit:contain}
.tc .fc b{font-weight:500;font-size:22px;letter-spacing:.12em;text-transform:uppercase;line-height:1.15;text-align:center}
.tc.chosen .fc{border-width:2px}
.mood .hint{margin-top:var(--s20);font-style:italic;font-size:21px;color:var(--grey)}
.mood.picked .hint{display:none}
.mood .res{display:none;margin-top:var(--s10)}
.mood.picked .res{display:block;animation:deal .6s var(--ease) .25s both}
@keyframes deal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.trio{display:flex;justify-content:center;gap:var(--s30);transition:opacity .25s linear}
.trio.out{opacity:0}
.trio .p{display:flex;flex-direction:column;align-items:center;width:190px}
.trio .fr{width:118px;height:168px;padding:10px}
.trio .fr img{max-height:100%;width:auto;transition:transform .45s var(--ease)}
.trio .p:hover .fr img{transform:translateY(-6px)}
.trio .tt{margin-top:var(--s10);font-weight:500;font-size:17px;line-height:1.2}
.trio .badges{margin-top:var(--s5)}
.mood .res .chip{margin-top:var(--s25)}
.mood .deal{display:inline-flex;align-items:center;gap:var(--s10);margin-top:var(--s15);min-height:44px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.mood .deal svg{width:15px;height:15px}
.mood .deal:hover{color:var(--ink)}

/* ============ dramione ============ */
.dram{padding:var(--s50) 0 0;overflow:hidden}
.dram .stage{position:relative;height:460px;max-width:1200px;margin:0 auto}
.dram .ink{position:absolute;left:50%;top:50%;width:720px;margin:-170px 0 0 -360px;opacity:.16;pointer-events:none}
.dram .say{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center}
.dram h2{margin-top:var(--s15);font-weight:300;font-size:76px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.dram .door{margin-top:var(--s30)}
.dram .fb{position:absolute;display:block}
.dram .fb img{width:100%;height:auto;animation:float 8s ease-in-out infinite}
.dram .fb.b1{left:1%;top:50px;width:210px}
.dram .fb.b2{right:1%;top:10px;width:165px}
.dram .fb.b3{right:16%;top:275px;width:112px}
.dram .fb.b2 img{animation-delay:-3s}.dram .fb.b3 img{animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ============ series: arches and the shelf ============ */
.series .picker{margin-top:var(--s20);display:flex;justify-content:center;gap:var(--s20)}
.arch{position:relative;display:flex;flex-direction:column;align-items:center;width:124px;padding-top:4px;color:var(--grey)}
.arch svg.frame{width:82px;height:106px;overflow:visible}
.arch svg.frame path,.arch svg.frame circle{fill:none;stroke:var(--line);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .25s linear}
.arch .crest{position:absolute;left:50%;top:42px;width:44px;height:44px;margin-left:-22px;object-fit:contain;opacity:.55;transition:opacity .25s linear,transform .4s var(--ease)}
.arch span{margin-top:var(--s10);font-family:var(--sans);font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.arch:hover .crest{transform:translateY(-4px)}
.arch[aria-pressed=true]{color:var(--ink)}
.arch[aria-pressed=true] svg.frame path,.arch[aria-pressed=true] svg.frame circle{stroke:var(--ink)}
.arch[aria-pressed=true] .crest{opacity:1}
.switch{margin-top:var(--s10);display:flex;justify-content:center;gap:var(--s10);min-height:44px}
.switch[hidden]{display:none}
.switch button{position:relative;height:44px;padding:0 var(--s15);font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.switch button::after{content:"";position:absolute;left:var(--s15);right:var(--s15);bottom:6px;height:6px;background:var(--underline) center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.switch button[aria-pressed=true]{color:var(--ink)}
.switch button[aria-pressed=true]::after{transform:scaleX(1)}
.shelfwrap{position:relative;margin-top:var(--s15);min-height:300px}
.shelf{display:flex;justify-content:center;align-items:flex-end;gap:var(--s15);padding-top:50px}
.shelf li{position:relative;width:118px;display:flex;flex-direction:column;align-items:center;text-align:center}
.shelf .n{position:absolute;top:-52px;left:0;right:0;font-family:var(--hand);font-size:34px;line-height:1;transform:rotate(-3deg)}
.shelf .note{position:absolute;top:-24px;left:-20px;right:-20px;font-family:var(--hand);font-size:19px;line-height:1;color:var(--grey);white-space:nowrap}
.shelf .fr{width:118px;height:172px;padding:8px}
.shelf .fr img{max-height:100%;width:auto}
.shelf .tt{margin-top:var(--s10);font-size:15px;line-height:1.15;font-weight:500;min-height:35px}
.shelf .yr{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--grey)}
.shelf li.side .fr{border-style:dashed}
.plate{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px}
.plate.big{border:0;gap:10px}
.plate.big b{font-size:26px}
.plate b{font-weight:500;font-size:15px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
.plate i{font-family:var(--sans);font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.aunote{text-align:center;font-family:var(--hand);font-size:22px;color:var(--grey);min-height:30px;margin-top:var(--s10)}
.series .door{margin-top:var(--s25)}

/* ============ what is coming: the ticket ============ */
.ticket{position:relative;display:grid;grid-template-columns:300px 1fr 230px;max-width:960px;min-height:290px;margin:var(--s25) auto 0;background:var(--black);color:var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.ticket .artp{display:flex;align-items:center;justify-content:center;padding:var(--s20);border-right:1px solid rgba(255,255,255,.22)}
.ticket .artp img{width:100%;max-width:170px}
.ticket .mid{padding:var(--s30);display:flex;flex-direction:column}
.ticket .eyebrow{color:var(--pale)}
.ticket h3{margin-top:var(--s15);font-weight:400;font-style:italic;font-size:38px;line-height:1.05}
.ticket .mid p{margin-top:var(--s15);font-size:20px;line-height:1.35;color:var(--pale)}
.ticket .mid .ul{margin-top:auto;color:var(--paper)}
.ticket .mid .ul::after{filter:invert(1)}
.ticket .stub{position:relative;padding:var(--s30) var(--s25);border-left:1px dashed rgba(255,255,255,.4);display:flex;flex-direction:column;justify-content:center}
.ticket .stub::before,.ticket .stub::after{content:"";position:absolute;left:-15px;width:30px;height:30px;border-radius:50%;background:var(--paper)}
.ticket .stub::before{top:-15px}.ticket .stub::after{bottom:-15px}
.ticket .days{font-weight:300;font-size:108px;line-height:.9}
.ticket .stub small{display:block;margin-top:var(--s5);font-style:italic;font-size:22px}
.ticket .stub .date{margin-top:var(--s20);padding-top:var(--s15);border-top:1px solid rgba(255,255,255,.3);font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.stubs{display:flex;align-items:center;gap:var(--s20);max-width:960px;min-height:84px;margin:var(--s20) auto 0;padding:var(--s15) var(--s25);border:1px solid var(--line)}
.ticket+.stubs{margin-top:var(--s25)}
.stubs .eyebrow{flex:none;width:92px}
.stubs b{display:block;font-weight:500;font-size:21px;line-height:1.2}
.stubs i{display:block;font-size:17px;color:var(--grey)}
.stubs img{margin-left:auto;width:96px;flex:none}
.stubs:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ============ our editions ============ */
.ed .top{margin-top:var(--s20);display:flex;justify-content:center;align-items:center;gap:var(--s25)}
.pill{display:inline-flex;align-items:center;height:32px;padding:0 var(--s15);border:1px solid var(--ink);border-radius:9999px;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.eds{margin-top:var(--s30);display:flex;justify-content:center;gap:var(--s20)}
.eds li{width:172px;text-align:center}
.eds .fr{position:relative;height:250px;padding:var(--s15);overflow:hidden;cursor:zoom-in}
.eds .fr img{max-height:100%;width:auto;transition:opacity .45s linear,transform .6s var(--ease)}
.eds .fr .cl{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;opacity:0;transform:scale(1.08)}
.eds li:hover .fr .cl,.eds li.on .fr .cl{opacity:1;transform:none}
.eds li:hover .fr .fo,.eds li.on .fr .fo{opacity:0}
.eds .fr .zo{position:absolute;right:6px;bottom:6px;width:26px;height:26px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--pale);border-radius:9999px;transition:opacity .3s linear}
.eds .fr .zo svg{width:13px;height:13px}
.eds li:hover .fr .zo,.eds li.on .fr .zo{opacity:0}
.eds b{display:block;margin-top:var(--s10);font-weight:500;font-size:18px;line-height:1.2}
.eds span{display:block;font-family:var(--sans);font-size:12px;line-height:1.35;letter-spacing:.02em;color:var(--grey)}
.craft{margin-top:var(--s50);display:grid;grid-template-columns:repeat(4,1fr) 1.35fr;gap:var(--s20);align-items:stretch}
.craft figure{display:flex;gap:var(--s15);align-items:center}
.craft figure img{width:84px;height:84px;object-fit:cover;flex:none}
.craft b{display:block;font-weight:500;font-size:19px;line-height:1.1}
.craft figcaption span{display:block;font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--grey)}
.ask{display:flex;flex-direction:column;justify-content:center;padding:var(--s15) var(--s20);border:1px solid var(--ink)}
.ask b{font-style:italic;font-weight:500;font-size:22px;line-height:1.1}
.ask .ul{margin-top:var(--s5);min-height:36px}
.ask .ul::after{bottom:4px}

/* ============ read next ============ */
.pairs{margin-top:var(--s50);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s50)}
.pair{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:var(--s15);padding-top:80px}
.pair .x,.pair .y{display:flex;flex-direction:column;align-items:center;text-align:center}
.pair .x .fr{width:118px;height:170px;padding:10px}
.pair .y .fr{width:150px;height:216px;padding:12px}
.pair .fr img{max-height:100%;width:auto;transition:transform .5s var(--ease)}
.pair:hover .y .fr img{transform:translateY(-8px)}
.pair .k{margin-top:var(--s10);font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.pair .n{margin-top:2px;font-weight:500;font-size:18px;line-height:1.2}
.pair .ln{position:absolute;left:22%;right:22%;top:4px;height:84px;overflow:hidden;pointer-events:none}
.pair .ln svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pair .ln .cv{position:absolute;inset:-10px;background:var(--paper);transform-origin:right;transition:transform 1.1s cubic-bezier(.6,.1,.3,1)}
.pairs.in .ln .cv{transform:translateX(105%)}
.pairs.in .pair:nth-child(2) .ln .cv{transition-delay:.2s}
.pairs.in .pair:nth-child(3) .ln .cv{transition-delay:.4s}

/* ============ new in the library ============ */
.news{margin-top:var(--s50);display:grid;grid-template-columns:1fr 290px;gap:var(--s50);align-items:start}
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s25)}
.post{display:flex;flex-direction:column}
.post .fr{height:210px;padding:var(--s15)}
.post .fr img{max-height:100%;width:auto;transition:transform .5s var(--ease)}
.post:hover .fr img{transform:translateY(-6px)}
.post .eyebrow{margin-top:var(--s15)}
.post b{margin-top:var(--s5);font-weight:500;font-size:21px;line-height:1.15}
.post:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.post i{margin-top:var(--s5);font-size:17px;color:var(--grey)}
.season{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s50) var(--s25) var(--s30)}
.season svg.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.season svg.frame path,.season svg.frame circle{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.season .tag{position:relative;display:inline-flex;height:26px;align-items:center;padding:0 var(--s10);border:1px solid var(--ink);border-radius:9999px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.season img{position:relative;width:150px;margin-top:var(--s15);transition:transform .5s var(--ease)}
.season:hover img{transform:rotate(-4deg) translateY(-4px)}
.season .eyebrow{position:relative;margin-top:var(--s15)}
.season b{position:relative;margin-top:var(--s5);font-weight:500;font-style:italic;font-size:26px;line-height:1.1}
.season .ul{position:relative;margin-top:var(--s10)}
.new .door{margin-top:var(--s30)}

/* ============ footer ============ */
.foot{position:relative;padding:var(--s80) 0 var(--s30);border-top:1px solid var(--pale);overflow:hidden}
.foot .ink{position:absolute;left:4%;top:40px;width:760px;opacity:.2;pointer-events:none}
.foot .top{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--s50);align-items:start}
.brand{display:flex;align-items:center;gap:var(--s15)}
.brand img{width:46px}
.brand b{font-weight:400;font-style:italic;font-size:34px;line-height:1}
.follow{margin-top:var(--s30)}
.socials{margin-top:var(--s15);display:flex;gap:var(--s15);flex-wrap:wrap}
.socials a{display:flex;flex-direction:column;justify-content:center;min-width:170px;min-height:64px;padding:var(--s10) var(--s20);border:1px solid var(--ink);background:var(--paper);transition:transform .3s var(--ease)}
.socials a:hover{transform:translateY(-3px)}
.socials b{font-style:italic;font-weight:500;font-size:22px;line-height:1.1}
.socials i{font-family:var(--sans);font-style:normal;font-size:12px;color:var(--grey)}
.cred{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s5)}
.cred div{display:flex;align-items:baseline;gap:var(--s20)}
.cred dt{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.cred dd{font-weight:300;font-size:64px;line-height:1.05;letter-spacing:.08em;text-transform:uppercase}
.cols{position:relative;margin-top:var(--s50);padding-top:var(--s30);border-top:1px solid var(--pale);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s20)}
.cols h3{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:var(--s10)}
.cols a{display:block;padding:5px 0;font-size:19px;line-height:1.3}
.cols a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal{position:relative;margin-top:var(--s50);display:flex;justify-content:space-between;gap:var(--s20);font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--grey)}
.legal i{font-family:var(--serif);font-size:19px;letter-spacing:0;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  .pc::after,.pair .ln .cv{display:none}
  .pc img{opacity:1;transform:none}
}

/* ============ phone ============ */
@media (max-width:900px){
  :root{--gut:16px;--sec:56px}
  body{font-size:19px}
  .t{font-size:26px}
  .mh{height:84px}
  .mh-ground{height:56px}
  .mh-side{display:none}
  .rib{width:46px;height:80px;margin-left:-23px;padding-bottom:22px}
  .rib::before,.rib::after{height:116px}
  .rib img{width:30px;height:35px}
  .mh.is-compact .rib{transform:translateY(-26px)}
  .mh-phone{display:flex;position:absolute;top:6px;height:44px;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:transform .35s var(--ease)}
  .mh-phone.m{left:6px;padding:0 10px}
  .mh-phone.s{right:6px;width:44px;justify-content:center}
  .mh-phone svg{width:18px;height:18px}
  .findband{top:56px}
  .hero{padding:110px 0 0}
  .hero h1{font-size:46px;line-height:1}
  .hero .ph{display:inline}
  .hero .dk{display:none}
  .hero .ph{display:none}
.hero .line{font-size:21px}
  .art{flex-direction:column;margin-top:var(--s20)}
  .half{width:100%}
  .half+.half{margin-top:-14%}
  .hand{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:var(--s30) calc(-1*var(--gut)) 0;padding:var(--s10) var(--gut) var(--s20);gap:var(--s20);scrollbar-width:none}
  .hand::-webkit-scrollbar{display:none}
  .card{width:236px;height:380px;scroll-snap-align:center}
  .card.big{width:280px;height:430px}
  .card.big .face.back .vv{font-size:38px}
  .mood .table{margin-top:var(--s15)}
  .tcards{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:14px calc(50% - 105px) var(--s15);gap:var(--s15);scrollbar-width:none}
  .tcards::-webkit-scrollbar{display:none}
  .tc{width:210px;height:315px;scroll-snap-align:center}
  .tc:nth-child(1),.tc:nth-child(3){transform:none}
  .mood.picked .tcards{transform:none;margin-bottom:0}
  .tc .fc img{height:180px}
  .tc .fc b{font-size:19px}
  .mood .hint{margin-top:var(--s10);font-size:19px}
  .mood .res h3{font-size:22px}
  .trio{gap:var(--s10)}
  .trio .p{width:33%}
  .trio .fr{width:100px;height:146px;padding:8px}
  .trio .tt{font-size:15px}
  .trio .badges span{height:22px;font-size:10.5px;padding:0 7px}
  .dram{padding:var(--s30) 0 0}
  .dram .stage{height:auto;padding-top:250px}
  .dram .ink{width:400px;top:auto;bottom:10px;margin:0 0 0 -200px}
  .dram h2{font-size:46px}
  .dram .say{position:relative;top:auto;transform:none}
  .dram .fb.b1{left:8%;top:10px;width:124px}
  .dram .fb.b2{right:8%;top:0;width:112px}
  .dram .fb.b3{right:auto;left:50%;top:120px;width:84px;margin-left:-30px}
  .series .picker{justify-content:flex-start;overflow-x:auto;margin:var(--s20) calc(-1*var(--gut)) 0;padding:0 var(--gut);gap:var(--s5);scrollbar-width:none}
  .series .picker::-webkit-scrollbar{display:none}
  .arch{flex:none;width:92px}
  .arch svg.frame{width:74px;height:96px}
  .arch .crest{top:38px;width:40px;height:40px;margin-left:-20px}
  .arch span{font-size:10px;letter-spacing:.1em}
  .switch{margin-top:var(--s15)}
  .switch button{padding:0 var(--s10)}
  .shelf{flex-wrap:wrap;gap:34px 8px;padding-top:40px}
  .shelf li{width:82px}
  .shelf .fr{width:82px;height:120px;padding:5px}
  .shelf .n{top:-36px;font-size:26px}
  .shelf .note{top:-16px;font-size:15px}
  .shelf .tt{font-size:13px;min-height:30px}
  .plate.big{border:0;gap:10px}
.plate.big b{font-size:26px}
.plate b{font-size:11px}
  .ticket{grid-template-columns:1fr;margin-top:var(--s30)}
  .ticket .artp{border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding:var(--s20) var(--s30)}
  .ticket .artp img{max-width:130px}
  .ticket .artp{padding:var(--s15) var(--s30)}
  .ticket .mid{padding:var(--s25) var(--s20)}
  .ticket h3{font-size:32px}
  .ticket .mid .ul{margin-top:var(--s15)}
  .ticket .stub{border-left:0;border-top:1px dashed rgba(255,255,255,.4);flex-direction:row;align-items:flex-end;justify-content:space-between;padding:var(--s25) var(--s20)}
  .ticket .stub::before,.ticket .stub::after{top:-15px;bottom:auto}
  .ticket .stub::before{left:-15px}.ticket .stub::after{left:auto;right:-15px}
  .ticket .days{font-size:84px}
  .ticket .stub .date{margin:0;padding:0;border:0;text-align:right}
  .stubs{flex-wrap:wrap;gap:var(--s5) var(--s15);padding:var(--s15)}
  .stubs .eyebrow{width:100%}
  .stubs img{width:64px}
  .stubs>span:not(.eyebrow){flex:1}
  .ed .top{flex-wrap:wrap;gap:var(--s10) var(--s20)}
  .eds{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:var(--s25) calc(-1*var(--gut)) 0;padding:0 var(--gut) var(--s10);gap:var(--s15);scrollbar-width:none}
  .eds::-webkit-scrollbar{display:none}
  .eds li{flex:none;width:150px;scroll-snap-align:start}
  .eds .fr{height:216px}
  .craft{grid-template-columns:1fr 1fr;gap:var(--s15);margin-top:var(--s30)}
  .craft figure img{width:64px;height:64px}
  .craft b{font-size:17px}
  .ask{grid-column:1/-1}
  .pairs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s20);margin:var(--s20) calc(-1*var(--gut)) 0;padding:0 var(--gut) var(--s10);scrollbar-width:none}
  .pairs::-webkit-scrollbar{display:none}
  .pair{flex:none;width:300px;padding-top:62px;scroll-snap-align:center}
  .pair .x .fr{width:96px;height:138px}
  .pair .y .fr{width:118px;height:170px}
  .pair .ln{height:64px;left:26%;right:26%}
  .news{grid-template-columns:1fr;gap:var(--s30);margin-top:var(--s30)}
  .posts{grid-template-columns:1fr;gap:var(--s15)}
  .post{display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto auto 1fr;column-gap:var(--s15);align-items:start}
  .post .fr{grid-row:1/4;height:120px;padding:var(--s10)}
  .post .eyebrow{margin-top:var(--s5)}
  .post b{font-size:19px}
  .post i{font-size:16px}
  .season{max-width:300px;margin:0 auto;width:100%;padding:var(--s30) var(--s20) var(--s25)}
  .season img{width:96px}
  .season b{font-size:23px}
  .foot{padding-top:var(--s50)}
  .foot .ink{left:auto;right:-120px;top:120px;width:520px}
  .foot .top{grid-template-columns:1fr;gap:var(--s30)}
  .brand b{font-size:28px}
  .socials a{min-width:0;flex:1 1 140px}
  .cred{align-items:flex-start}
  .cred div{flex-direction:column;gap:0}
  .cred dd{font-size:40px}
  .cols a{font-size:16px}
  .follow{margin-top:var(--s20)}
  .cols{grid-template-columns:1fr 1fr;gap:var(--s20) var(--s15)}
  .cols a{padding:3px 0}
  .legal{flex-direction:column}
}
.badges span:has(img.dm){display:none}