/* Recess · The Theater (v20261020th1) */
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-400i.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
:root{--ink:#fbefe0;--mute:#d8c2d6;--pink:#ff5fb8;--teal:#43e6d8;--amber:#ffb84d;--gold:#e9b85c;--serif:"Cormorant Garamond",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#140a1c;color:var(--ink);font:15px/1.45 var(--sans);-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#amb{position:fixed;inset:-40px;z-index:0;pointer-events:none;background:#140a1c url(room-m.webp) center/cover no-repeat;filter:blur(26px) brightness(.32) saturate(1.2)}
@media (min-aspect-ratio:1/1){#amb{background-image:url(room-w.webp)}}
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 48px 0}
.back{position:absolute;left:calc(8px + env(safe-area-inset-left));top:calc(6px + env(safe-area-inset-top));display:flex;align-items:center;gap:2px;height:32px;padding:0 10px 0 6px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:13px;opacity:.75;background:rgba(30,14,40,.45);border:1px solid rgba(255,220,240,.14)}
.back:hover,.back:focus-visible{opacity:1;outline:none;border-color:rgba(255,184,77,.6)}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top h1{margin:0;font:italic 600 26px/1 var(--serif);color:#ffe3f2;letter-spacing:.02em;text-shadow:0 0 6px #ff5fb8,0 0 18px rgba(255,95,184,.7),0 0 36px rgba(255,95,184,.35)}
main{position:relative;z-index:1;padding-bottom:calc(36px + env(safe-area-inset-bottom))}

/* stage: the painted room, screen positioned over the painted screen */
#stage{position:relative;width:100%;aspect-ratio:390/500;margin:0 auto;background:#1a0c24 url(room-m.webp) center top/100% auto no-repeat;overflow:hidden;
 --sl:30.9%;--st:35.5%;--sw:41%;--sh:29.6%;   /* idle = painted screen (phone art) */
 --pl:3%;--pt:29.6%;--pw:94%;--ph:41.3%}        /* playing = big 16:9 */
#stage::after{content:'';position:absolute;inset:auto 0 0;height:18%;background:linear-gradient(transparent,#140a1c);pointer-events:none}
@media (min-width:700px) and (min-aspect-ratio:1/1){
 #stage{width:min(100%,1180px,calc((100vh - 170px) * 16 / 9));aspect-ratio:16/9;background:#1a0c24 url(room-w.webp) center/100% 100% no-repeat;border-radius:0 0 18px 18px;
  --sl:33.2%;--st:22.2%;--sw:35.2%;--sh:35.6%;--pl:21.8%;--pt:10%;--pw:58%;--ph:58%}
 #stage::after{height:12%}
}
.scr{position:absolute;z-index:2;left:var(--sl);top:var(--st);width:var(--sw);height:var(--sh);transition:left .7s cubic-bezier(.5,0,.2,1),top .7s cubic-bezier(.5,0,.2,1),width .7s cubic-bezier(.5,0,.2,1),height .7s cubic-bezier(.5,0,.2,1)}
#stage.on .scr{left:var(--pl);top:var(--pt);width:var(--pw);height:var(--ph)}
.glass{position:absolute;inset:0;overflow:hidden;border-radius:4px;background:radial-gradient(70% 70% at 50% 45%,#f2f4ff,#bcc8f0 55%,#7b86c4);box-shadow:0 0 0 2px rgba(233,184,92,.0),0 0 30px rgba(190,205,255,.45),0 0 80px rgba(190,205,255,.18)}
#stage.on .glass{background:#05030a;box-shadow:0 0 0 2px rgba(233,184,92,.75),0 0 0 5px rgba(80,30,20,.9),0 0 40px rgba(190,205,255,.35),0 18px 50px rgba(0,0,0,.6)}
.glass iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hint{position:absolute;inset:0;display:grid;place-items:center;font:italic 600 clamp(15px,2.2vw,24px)/1.1 var(--serif);color:#3a2450;opacity:.8;pointer-events:none;transition:opacity .3s}
#stage.on .hint{opacity:0}
/* velvet curtains */
.cur{position:absolute;top:-2%;bottom:-2%;width:51%;z-index:2;pointer-events:none;background:
 repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(255,120,120,.10) 7%,rgba(0,0,0,.05) 11%,rgba(0,0,0,.42) 16.6%),
 linear-gradient(180deg,#a3142a,#7a0c1f 60%,#4e0614);box-shadow:inset 0 -18px 30px rgba(0,0,0,.5);transition:transform 1.15s cubic-bezier(.6,0,.25,1)}
.cur.l{left:-1%;transform-origin:left;transform:scaleX(.36);border-right:2px solid rgba(233,184,92,.5)}
.cur.r{right:-1%;transform-origin:right;transform:scaleX(.36);border-left:2px solid rgba(233,184,92,.5)}
.val{position:absolute;left:-2%;right:-2%;top:-3%;height:11%;z-index:3;pointer-events:none;border-radius:0 0 40% 40%/0 0 100% 100%;background:repeating-linear-gradient(90deg,#8d1024 0,#b01a33 4%,#6e0a1c 8%);box-shadow:0 3px 0 rgba(233,184,92,.7),0 8px 14px rgba(0,0,0,.45)}
#stage.shut .cur{transform:scaleX(1);transition-duration:.35s}
#stage.open .cur{transform:scaleX(.035)}
/* controls under the screen */
.bar{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s .4s;white-space:nowrap}
#stage.on .bar{opacity:1;pointer-events:auto}
.bar button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,220,240,.22);background:rgba(30,14,40,.78);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bar button:hover,.bar button:focus-visible{border-color:var(--amber);outline:none;box-shadow:0 0 14px rgba(255,184,77,.35)}
.bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bar .now{min-width:0;max-width:52vw;overflow:hidden;text-overflow:ellipsis;padding:0 8px;font:italic 600 18px/1.1 var(--serif);color:#ffe8c8;text-shadow:0 1px 6px #000}
.bar .now small{font:12px var(--sans);color:var(--mute);margin-left:6px}
.bar .x{margin-left:4px;background:rgba(80,14,34,.8)}

/* poster wall */
.row{position:relative;margin:18px auto 0;max-width:1180px}
.row h2{margin:0 16px 8px;font:italic 600 22px/1.1 var(--serif);color:#ffe8c8;display:flex;align-items:center;gap:8px}
.row h2::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--g,#ff5fb8);box-shadow:0 0 10px var(--g,#ff5fb8)}
.r-picks{--g:#ffb84d}.r-comedy{--g:#43e6d8}.r-feel{--g:#ff5fb8}
.rail{list-style:none;margin:0;padding:4px 16px 12px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail li{flex:none;width:134px;scroll-snap-align:start}
.pc{position:relative;display:block;width:100%;aspect-ratio:2/3;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#1a0c24;color:var(--ink);text-align:left;font:inherit;-webkit-tap-highlight-color:transparent;
 box-shadow:0 0 0 2px rgba(233,184,92,.55),0 0 0 4px rgba(40,14,30,.9),0 10px 22px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s}
.pc img{position:absolute;left:50%;top:-16.7%;height:133.4%;width:auto;max-width:none;transform:translateX(-50%);filter:saturate(1.05) contrast(1.05)}
.pc::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,8,28,.15),transparent 30%,transparent 45%,rgba(14,6,20,.92) 78%);box-shadow:inset 0 0 22px rgba(10,4,16,.6)}
.pc .t{position:absolute;z-index:2;left:9px;right:9px;bottom:9px;display:flex;flex-direction:column;gap:3px}
.pc b{font:italic 700 17px/1.02 var(--serif);color:#fff2dc;text-shadow:0 1px 4px #000}
.pc i{font-style:normal;font-size:11px;color:var(--mute)}
.pc em{align-self:flex-start;font-style:normal;font-size:10px;letter-spacing:.04em;padding:2px 7px;border-radius:99px;color:#140a1c;background:var(--g,#ffb84d);opacity:.92}
.pc .pl{position:absolute;z-index:2;left:50%;top:38%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(20,8,28,.55);border:1.5px solid rgba(255,232,200,.8);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.pc .pl::after{content:'';margin-left:3px;border-left:12px solid #ffe8c8;border-top:8px solid transparent;border-bottom:8px solid transparent}
.pc:hover,.pc:focus-visible{transform:translateY(-3px);outline:none;box-shadow:0 0 0 2px var(--g,#ffb84d),0 0 0 4px rgba(40,14,30,.9),0 0 22px color-mix(in srgb,var(--g,#ffb84d) 55%,transparent),0 12px 24px rgba(0,0,0,.55)}
.pc:hover .pl,.pc:focus-visible .pl,.pc[aria-current="true"] .pl{opacity:1;transform:none}
.pc[aria-current="true"]{box-shadow:0 0 0 2px var(--g,#ffb84d),0 0 0 4px rgba(40,14,30,.9),0 0 26px var(--g,#ffb84d)}
@media (min-width:900px){
 .rail{flex-wrap:wrap;overflow:visible;padding:4px 20px 8px;gap:16px}
 .rail li{width:calc((100% - 6 * 16px) / 7)}
 .row h2{margin:0 20px 10px}
}
@media (prefers-reduced-motion:reduce){.scr,.cur,.pc,.pc .pl,.bar,.hint{transition:none!important}}