:root,[data-theme="dark"]{color-scheme:dark;--page:#101114;--page-rgb:16,17,20;--surface:#1e1a18;--surface-2:#26211e;--surface-3:#2e2826;--ink:#ede6d6;--ink-rgb:237,230,214;--copy:#b7ac9c;--copy-hi:#d8cdbd;--muted:#a79e8e;--faint:#8d8478;--line:rgba(237,230,214,.12);--line-strong:rgba(237,230,214,.25);--accent:#2b2b30;--accent-deep:#222226;--accent-hi:#f4f1ea;--accent-hover:#34343b;--crimson:#e8321e;--shadow:0 28px 90px rgba(0,0,0,.44);--nav-bg:rgba(13,11,10,.82);--radius-lg:28px;--radius-md:18px;--focus:#f4f1ea;--pearl:#f4f1ea;--red:#e8321e;} *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background:var(--page)}body{min-width:320px;background:var(--page);color:var(--ink);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,select{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit}img{max-width:100%}::selection{background:rgba(43,43,48,.55)} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .modal-engage{flex-wrap:wrap} @keyframes bcUp{from{transform:translateY(48px);opacity:.6}to{transform:none;opacity:1}} .no-scroll{overflow:hidden}.view{display:none}.view.active{display:block}.page{padding-top:68px} /* 2026-09-27: transparent chrome — no gray box. A soft top scrim keeps the nav legible over hero art; it fades to fully transparent so the bar never reads as a solid surface. Deep Charcoal #101114 page bg. */ .topbar{position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 max(28px,calc((100vw - 1460px)/2));border-bottom:0;background:linear-gradient(to bottom,rgba(10,10,12,.78),rgba(10,10,12,.38) 55%,rgba(10,10,12,0));backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}.top-left{display:flex;align-items:center;gap:2px;min-width:0}.wm-glyph{flex:none;display:block}.wordmark{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;cursor:pointer;font-family:"Previously Display",serif;font-size:23px;letter-spacing:.01em;color:var(--ink);padding:8px 12px 8px 0;margin-right:10px;transition:color .18s ease,transform .12s ease}.wordmark:hover{color:var(--accent-hi)}.wordmark:active{transform:scale(.96)}.primary-nav{display:flex;align-items:center;gap:3px}.nav-btn{position:relative;min-height:44px;min-width:44px;border:0;background:transparent;color:var(--muted);padding:0 15px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:680;transition:color .18s ease,background .18s ease,transform .12s ease}.nav-btn:hover{color:var(--ink);background:rgba(var(--ink-rgb),.075)}.nav-btn:active{transform:scale(.96);background:rgba(var(--ink-rgb),.12)}/* 2026-09-27: active section must be unmistakable on phone + desktop. */ .nav-btn.active{color:#fff;font-weight:700;background:rgba(237,230,214,.16);box-shadow:inset 0 0 0 1px rgba(237,230,214,.22)}.nav-btn.active::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:4px;background:var(--accent-hi);box-shadow:0 0 10px rgba(232,50,30,.65);transform-origin:center;animation:navLine .24s ease both}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .18s,background .18s,transform .12s}.icon-btn:hover{color:var(--ink);background:rgba(var(--ink-rgb),.075)}.icon-btn:active{transform:scale(.92)} .cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid transparent;border-radius:999px;background:var(--accent);color:#fff;padding:0 22px;cursor:pointer;text-decoration:none;font-size:13px;font-weight:760;letter-spacing:.01em;box-shadow:0 10px 30px rgba(43,43,48,.26);transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,box-shadow .18s ease,border-color .18s ease}.cta:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 15px 36px rgba(43,43,48,.34)}.cta:active{transform:translateY(0) scale(.975);box-shadow:0 6px 18px rgba(43,43,48,.24)}.cta:disabled{cursor:wait;opacity:.58;transform:none;box-shadow:none}.cta.secondary{border-color:var(--line-strong);background:rgba(var(--ink-rgb),.045);box-shadow:none;color:var(--ink)}.cta.secondary:hover{border-color:rgba(237,230,214,.4);background:rgba(var(--ink-rgb),.095)}.cta.compact{min-height:44px;padding:0 18px}.cta.textual{min-height:38px;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink)}.cta.textual:hover{color:var(--accent-hi);transform:none}.cta .short{display:none} .hero{--hero-ink:#ede6d6;position:relative;min-height:min(900px,calc(100svh - 68px));overflow:hidden;display:flex;align-items:flex-end;background:#0d0b0a;color:var(--hero-ink)}.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.025);visibility:hidden;transition:opacity .9s cubic-bezier(.2,.65,.2,1),visibility .9s}.hero-slide.active{opacity:1;visibility:visible}.hero-slide picture{display:block;width:100%;height:100%}.hero-slide img,.hero-slide picture img{width:100%;height:100%;object-fit:cover;object-position:center 23%;filter:saturate(.8) contrast(1.06);animation:heroDrift 17s ease-in-out infinite alternate}.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,10,.88) 0%,rgba(13,11,10,.58) 35%,rgba(13,11,10,.10) 72%),linear-gradient(0deg,var(--page) 0%,rgba(13,11,10,.55) 26%,rgba(13,11,10,.12) 100%)}.hero-copy{position:relative;z-index:3;width:min(840px,75vw);padding:120px 0 94px max(42px,calc((100vw - 1360px)/2))}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:17px;color:var(--accent-hi);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}.hero h1{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(56px,7.5vw,116px);font-weight:590;line-height:.88;letter-spacing:-.052em;text-wrap:balance}.hero h1 em{display:block;color:var(--accent-hi);font-style:normal}.hero p{max-width:625px;margin:27px 0 31px;color:var(--copy-hi);font-size:18px;line-height:1.64}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.hero .cta.secondary{border-color:rgba(237,230,214,.28);background:rgba(13,11,10,.38);color:#ede6d6}.hero .cta.secondary:hover{background:rgba(237,230,214,.13)}.hero-controls{position:absolute;z-index:4;right:max(42px,calc((100vw - 1360px)/2));bottom:94px;display:flex;align-items:center;gap:14px}.round-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(237,230,214,.28);border-radius:50%;background:rgba(13,11,10,.48);color:#ede6d6;cursor:pointer;font-size:19px;transition:background .18s,border-color .18s,transform .12s}.round-btn:hover{border-color:var(--accent-hi);background:var(--accent)}.round-btn:active{transform:scale(.92)} /* ---------- Trailer hero (Amendment A): muted autoplay, Netflix parity ---------- */ .hero-slide{overflow:hidden} /* ---------- Hero single-commit skeleton (James 2026-09-26) ---------- First paint is a branded shimmer skeleton, never a hardcoded title. .hero-loading is removed by paintHeroItems() on the single commit. */ .hero-skel picture{display:block;width:100%;height:100%;background:#141110} .hero-skel-shimmer{position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(237,230,214,.07) 50%,transparent 75%);background-size:200% 100%;animation:heroSkelShimmer 1.6s linear infinite} @keyframes heroSkelShimmer{to{background-position:-200% 0}} .hero-loading .hero-slide{opacity:1;visibility:visible} .skel-bar{display:block;height:.68em;border-radius:8px;background:rgba(237,230,214,.10);margin:.22em 0;position:relative;overflow:hidden} .skel-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(237,230,214,.16) 50%,transparent 70%);background-size:200% 100%;animation:heroSkelShimmer 1.5s linear infinite}.skel-bar.sw1{width:min(520px,72%)}.skel-bar.sw2{width:min(340px,48%)}.skel-bar.sw3{width:min(560px,94%)}.skel-bar.sw4{width:min(400px,66%)} .hero-trailer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,177.78vh);aspect-ratio:16/9;border:0;pointer-events:none;background:transparent} .hero-facade{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;padding:0} .hero-facade .trailer-play{position:absolute;left:50%;top:44%} .hero-copy{pointer-events:none} .hero-copy button,.hero-copy a{pointer-events:auto} .hero-controls .round-btn.trailer-btn svg{display:block} .hero-controls .round-btn.trailer-btn .ic-muted{display:none} .hero-controls .round-btn.trailer-btn.is-muted .ic-muted{display:block} .hero-controls .round-btn.trailer-btn.is-muted .ic-unmuted{display:none} @media(max-width:600px){.hero-controls .round-btn.trailer-btn{display:grid}} .trailer-ctl{position:absolute;z-index:4;right:10px;bottom:10px;display:flex;gap:8px} .trailer-ctl .round-btn{width:38px;height:38px;font-size:16px} .trailer-ctl .round-btn svg{display:block} .trailer-ctl .round-btn .ic-muted{display:none} .trailer-ctl .round-btn.is-muted .ic-muted{display:block} .trailer-ctl .round-btn.is-muted .ic-unmuted{display:none} .shell{max-width:1440px;margin:auto;padding:108px 40px 126px}.section{margin-top:118px}.section:first-child{margin-top:0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.section-head h2,.browse-head h2,.library-hero h2{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(34px,4.4vw,64px);font-weight:570;line-height:1.04;letter-spacing:-.042em}.section-head p,.browse-head p{max-width:610px;margin-top:12px;color:var(--muted);font-size:15px;line-height:1.7}.section-actions{display:flex;align-items:center;gap:6px}.text-link{position:relative;display:inline-flex;align-items:center;min-height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:10px 3px;font-size:13px;font-weight:760}.text-link::after{content:"";position:absolute;left:3px;right:3px;bottom:7px;height:1px;background:var(--accent-hi);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.text-link:hover::after{transform:scaleX(1)}.text-link:active{color:var(--accent-hi)} .timeline{position:relative;display:block;margin-top:52px}.tl-hours{position:relative}.tl-hrow{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:96px;border-top:1px solid var(--line)}.tl-hrow:first-child{border-top:0}.tl-tick{position:relative;padding:14px 16px 14px 0}.tl-tick .tick{height:auto;min-height:68px}.tl-hcards{display:flex;flex-direction:column;gap:18px;padding:14px 0;min-width:0}.tl-hcards .tl-btn{margin:0}@media(max-width:700px){.tl-hrow{grid-template-columns:64px minmax(0,1fr)}}.timeline[hidden]{display:none}.tl-rail{position:relative;min-height:100%}.tl-rail::before{content:"";position:absolute;top:6px;bottom:6px;left:118px;width:2px;background:linear-gradient(var(--line-strong),var(--line) 60%,transparent)}.tick{position:relative;height:118px}.tick .t{position:absolute;left:0;top:-9px;width:104px;text-align:right;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;color:var(--muted);letter-spacing:.02em}.tick .t small{display:block;font-family:Inter,sans-serif;font-size:9px;letter-spacing:.2em;color:var(--faint);margin-top:2px}.tick::after{content:"";position:absolute;left:112px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--page);border:2px solid var(--faint)}.tick.major::after{border-color:var(--red);box-shadow:0 0 0 5px rgba(232,50,30,.12)}.tick.major .t{color:var(--ink)}.daypart{position:absolute;left:0;top:-34px;display:flex;align-items:center;gap:10px;color:var(--accent-hi);font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}.daypart::after{content:"";width:52px;height:1px;background:var(--accent-hi);opacity:.5}.now-marker{position:absolute;left:96px;right:0;top:0;z-index:5;display:flex;align-items:center;gap:10px;pointer-events:none}.now-marker .dot{width:12px;height:12px;flex:none;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(232,50,30,.18),0 0 16px var(--accent-hi);animation:nowpulse 2s ease-in-out infinite}.now-marker .line{flex:1;height:2px;background:linear-gradient(90deg,var(--red),rgba(232,50,30,.15));box-shadow:0 0 18px rgba(232,50,30,.55)}.now-marker .pill{flex:none;background:var(--red);border:1px solid var(--red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;padding:7px 12px;border-radius:999px;box-shadow:0 8px 26px rgba(43,43,48,.5);white-space:nowrap}@keyframes nowpulse{50%{box-shadow:0 0 0 9px rgba(232,50,30,.08),0 0 16px var(--red)}}.events{position:relative;display:block;padding-left:44px;min-width:0}button.tl-btn{all:unset;display:block;width:100%;margin:0 0 22px;cursor:pointer;text-align:left;box-sizing:border-box}button.tl-btn:focus-visible .event{outline:2px solid var(--focus);outline-offset:3px}.event{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);transition:transform .3s cubic-bezier(.2,.7,.25,1),border-color .25s,box-shadow .3s}.event:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 60px rgba(0,0,0,.5)}.event .art{position:relative;min-height:172px;background:var(--surface-2)}.event .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.event .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(13,11,10,.55));pointer-events:none}.event .mono{position:absolute;inset:0;display:grid;place-items:center;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:64px;color:var(--ink);background:linear-gradient(135deg,#1e1a18,#2b2b30 130%)}.event .air{position:absolute;left:14px;bottom:12px;z-index:2;background:rgba(13,11,10,.78);backdrop-filter:blur(8px);border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;letter-spacing:.02em;color:var(--ink);white-space:nowrap}.event .air small{display:block;font-family:Inter,sans-serif;font-size:9px;letter-spacing:.18em;color:var(--accent-hi);font-weight:800;margin-bottom:2px}.event .body{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}.event h3{margin:0;font-size:21px;font-weight:780;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.live-pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em}.live-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:nowpulse 1.6s ease-in-out infinite}.event .meta{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.event .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}.net{display:inline-flex;align-items:center;min-height:30px;padding:0 13px;border-radius:999px;background:rgba(237,230,214,.07);border:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--copy);white-space:nowrap}.go{color:var(--accent-hi);font-size:12.5px;font-weight:780;white-space:nowrap}.event::before{content:"";position:absolute;left:-44px;top:50%;width:44px;height:2px;background:var(--line-strong);pointer-events:none}.event::after{content:"";position:absolute;left:-50px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 12px rgba(237,230,214,.25);pointer-events:none}.timeline-foot{display:flex;justify-content:center;margin-top:4px}.schedule-toggle{display:none;margin:14px auto 0}.schedule-toggle.visible{display:inline-flex}.timeline-empty{display:grid;place-items:center;min-height:250px;padding:40px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--copy);text-align:center;line-height:1.6;margin-top:52px}.timeline-empty[hidden]{display:none}.earlier{margin-top:56px;border-top:1px solid var(--line);padding-top:30px}.earlier[hidden]{display:none}.earlier h4{margin:0 0 18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:800}.earlier-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}button.mini{all:unset;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .2s,transform .2s;cursor:pointer;color:var(--ink);box-sizing:border-box;min-width:0}button.mini:hover{border-color:var(--line-strong);transform:translateY(-2px)}button.mini:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.mini .mt{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;color:var(--accent-hi);white-space:nowrap;flex:none}.mini .mini-copy{display:flex;flex-direction:column;min-width:0}.mini .ms{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini .mn{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-note{margin-top:40px;color:var(--faint);font-size:12px;line-height:1.6}@media(prefers-reduced-motion:reduce){.now-marker .dot,.live-pill::before{animation:none}.event,.event:hover{transform:none;transition:none}button.mini,button.mini:hover{transform:none}} .poster-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}.poster-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;text-align:left;box-shadow:0 18px 48px rgba(0,0,0,.14);transition:transform .26s cubic-bezier(.2,.75,.2,1),border-color .22s,box-shadow .22s}.poster-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 26px 58px rgba(0,0,0,.23)}.poster-card:active{transform:translateY(-2px) scale(.987)}.poster-art{position:relative;display:block;overflow:hidden;aspect-ratio:2/3;background:var(--surface-2)}.poster-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .3s}.poster-card:hover .poster-art img{transform:scale(1.035);filter:saturate(1.07)}.poster-art::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.7))}.poster-badge{position:absolute;z-index:2;left:12px;bottom:11px;padding:5px 8px;border-radius:7px;background:rgba(13,11,10,.72);color:#ede6d6;font-size:9px;font-weight:760;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(10px)}.poster-copy{display:block;padding:17px 16px 18px}.poster-copy h3{display:-webkit-box;min-height:2.4em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.2}.genre{display:block;margin-top:7px;color:var(--muted);font-size:11px} .wide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.wide-card{position:relative;overflow:hidden;min-height:360px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#0d0b0a;cursor:pointer;text-align:left;color:#ede6d6;box-shadow:var(--shadow);transition:transform .25s,border-color .22s}.wide-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}.wide-card:active{transform:translateY(-1px) scale(.99)}.wide-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.wide-card:hover img{transform:scale(1.04)}.wide-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,11,10,.94),rgba(13,11,10,.02) 70%)}.wide-copy{position:absolute;z-index:2;inset:auto 26px 25px}.wide-copy h3{margin-top:7px;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:24px;line-height:1.08}.wide-copy span{color:var(--copy-hi);font-size:12px} .ad-slot{position:relative;display:flex;justify-content:center;align-items:center}.ad-label{position:absolute;top:10px;right:14px;color:var(--muted);font-size:9px;letter-spacing:.15em;text-transform:uppercase}.ad-unit{border:1px solid var(--line);border-radius:16px;background:var(--surface)}.ad-copy strong{display:block;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:19px;font-weight:600;line-height:1.2}.ad-copy span{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.55} .ad-leaderboard{margin:0 auto;padding:36px 20px;min-height:162px;border-bottom:1px solid var(--line);background:rgba(var(--ink-rgb),.02)}.ad-leaderboard .ad-unit{display:flex;align-items:center;gap:26px;width:728px;max-width:100%;min-height:90px;padding:18px 28px}.ad-leaderboard .ad-copy{flex:1;min-width:0} .more-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:17px;align-items:start}.ad-rail .ad-unit{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:300px;max-width:100%;min-height:600px;margin-left:auto;padding:30px 24px;border-radius:var(--radius-lg);text-align:center}.ad-rail .ad-copy strong{font-size:21px} @media(max-width:1199px){.more-layout{grid-template-columns:1fr}.ad-rail .ad-unit{width:300px;min-height:250px;margin:4px auto 0}} @media(max-width:820px){.ad-leaderboard{min-height:310px;padding:28px 16px}.ad-leaderboard .ad-unit{flex-direction:column;justify-content:center;gap:14px;width:300px;min-height:250px;padding:24px 20px;text-align:center}.ad-leaderboard .ad-copy strong{font-size:18px}} .spotlight{position:relative;overflow:hidden;min-height:690px;border-radius:var(--radius-lg);background:#0d0b0a;color:#ede6d6;box-shadow:var(--shadow)}.spotlight img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8)}.spotlight::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,10,.94),rgba(13,11,10,.58) 45%,rgba(13,11,10,.12)),linear-gradient(0deg,rgba(13,11,10,.88),transparent 58%)}.spotlight-copy{position:relative;z-index:2;display:flex;min-height:690px;max-width:650px;padding:70px 62px;flex-direction:column;justify-content:flex-end}.spotlight-copy h2{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(44px,5.8vw,80px);line-height:.92;letter-spacing:-.047em}.spotlight-copy h2 em{display:block;color:var(--accent-hi);font-style:normal}.spotlight-copy p{margin:23px 0 27px;color:var(--copy-hi);font-size:16px;line-height:1.72}.snapshot-note{margin-top:26px;color:var(--faint);font-size:11px;line-height:1.55} .browse{min-height:100vh}.browse .shell{padding-top:104px}.browse-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}.search-wrap{display:flex;align-items:center;gap:10px;width:min(470px,100%);border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:0 18px;transition:border-color .2s,box-shadow .2s,background .2s}.search-wrap:hover{border-color:var(--line-strong)}.search-wrap:focus-within{border-color:var(--accent-hi);box-shadow:0 0 0 4px rgba(43,43,48,.15);background:var(--surface-2)}.search-wrap svg{flex:none;color:var(--muted)}.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);padding:15px 0}.search-wrap input::placeholder{color:var(--muted)}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:31px}.search-count{margin:-16px 0 22px;color:var(--muted);font-size:12.5px}.search-count:empty{display:none} /* ============ REWIND BROWSE TABS: TV · Movies · Music style contract ============ The music lane mounts the Music panel inside Browse; this one component styles the tab switcher for all three tabs. Selected state via [aria-selected="true"] (preferred) or .active. TV is the default tab. No tab-specific overrides. */ .browse-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(13,11,10,.55);margin-bottom:31px;max-width:100%} .browse-tab{flex:1 1 0;border:0;background:transparent;color:var(--muted);font:700 13px/1 "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.02em;padding:12px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .18s ease,background .18s ease,transform .12s ease} .browse-tab:hover{color:var(--ink);background:rgba(237,230,214,.07)} .browse-tab:active{transform:scale(.97)} .browse-tab[aria-selected="true"],.browse-tab.active{background:var(--pearl);color:#101114} .browse-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px} [data-theme="light"] .browse-tab[aria-selected="true"],[data-theme="light"] .browse-tab.active{background:#2b2b30;color:#f4f1ea} @media(max-width:560px){.browse-tabs{display:flex;width:100%}.browse-tab{padding:12px 8px;font-size:12.5px}} @media(prefers-reduced-motion:reduce){.browse-tab{transition:none}}.chip{min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);padding:0 17px;cursor:pointer;font-size:12px;font-weight:650;transition:color .17s,background .17s,border-color .17s,transform .12s}.chip:hover{color:var(--ink);border-color:var(--line-strong);background:rgba(var(--ink-rgb),.055)}.chip:active{transform:scale(.96)}.chip.active{border-color:var(--accent);background:var(--accent);color:var(--ink)}.catalog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}.empty{display:none;padding:74px 20px;border:1px dashed var(--line);border-radius:var(--radius-md);color:var(--muted);text-align:center}.empty.visible{display:block}#emptyState .cta{margin-top:20px} .library{min-height:100vh}.library-hero{padding:120px 40px 75px;text-align:center}.library-hero .eyebrow{justify-content:center}.library-hero p{max-width:650px;margin:23px auto;color:var(--copy);font-size:16px;line-height:1.7}.library-hero h2 span{color:var(--accent-hi)}.library-native{max-width:1160px;margin:0 auto 140px;padding:0 40px}.library-surface{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}.library-top{display:flex;align-items:center;justify-content:space-between;padding:23px 28px;border-bottom:1px solid var(--line)}.library-top h2{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:23px}.meta{color:var(--accent-hi);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.library-grid{display:grid;grid-template-columns:1fr 1fr;min-height:430px}.library-empty{display:grid;place-items:center;padding:50px;text-align:center}.empty-mark{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 19px;border:1px solid var(--line);border-radius:50%;color:var(--accent-hi)}.library-empty h3{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:25px}.library-empty p{max-width:410px;margin:12px auto 24px;color:var(--muted);line-height:1.65}.library-art{position:relative;overflow:hidden;min-height:430px}.library-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.72)}.library-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface),transparent 34%),linear-gradient(0deg,var(--surface),transparent 35%)} .modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s}.modal.open{opacity:1;visibility:visible;pointer-events:auto}.modal-card{position:relative;width:min(850px,100%);max-height:min(900px,92svh);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);transform:translateY(16px) scale(.985);opacity:.3;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s}.modal.open .modal-card{transform:none;opacity:1}#showModal .modal-card{width:min(1200px,100%)}.modal-card>img{display:block;width:100%;max-height:400px;object-fit:cover}.modal-body{padding:30px}.modal-body h2{margin:9px 0 11px;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(28px,4vw,42px);line-height:1.03}.modal-body>p{color:var(--muted);line-height:1.67}.modal-cast{display:none;margin-top:14px;color:var(--copy);font-size:13px;line-height:1.6}.modal-cast strong{color:var(--ink);font-weight:700}.modal-close{position:absolute;z-index:3;top:15px;right:15px;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(237,230,214,.28);border-radius:50%;background:rgba(13,11,10,.78);color:#fff;cursor:pointer;font-size:23px;line-height:1;backdrop-filter:blur(10px);transition:background .18s,border-color .18s,transform .14s}.modal-close:hover{background:var(--accent);border-color:var(--accent-hi)}.modal-close:active{transform:scale(.9)}.modal-actions{display:flex;gap:10px;margin-top:24px}.beta-card{width:min(660px,100%)}.beta-card .modal-body{padding:42px}.beta-card h2{font-size:clamp(32px,5vw,48px);line-height:1}.beta-form{display:grid;gap:15px;margin-top:27px}.field{display:grid;gap:8px;text-align:left}.field label{font-size:12px;font-weight:750;color:var(--copy)}.field input,.field select{width:100%;min-height:50px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);padding:13px 14px;transition:border-color .18s,background .18s,box-shadow .18s}.field input::placeholder{color:var(--muted)}.field input:hover,.field select:hover{border-color:var(--line-strong)}.field input:focus,.field select:focus{outline:0;border-color:var(--accent-hi);background:var(--surface);box-shadow:0 0 0 4px rgba(43,43,48,.15)}.field select{cursor:pointer}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}.form-note{color:var(--muted);font-size:12px;line-height:1.55}.form-status{display:none;min-height:44px;padding:12px 14px;border-radius:10px;background:rgba(43,43,48,.12);color:var(--accent-hi);font-size:13px;line-height:1.45;text-align:left}.form-status.visible{display:block}.form-status.error{background:color-mix(in srgb,var(--crimson) 13%,transparent);color:var(--ink)}.manual-fallback{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);transition:border-color .2s,background .2s,box-shadow .2s}.manual-fallback.prominent{border-color:rgba(237,230,214,.45);background:rgba(43,43,48,.11);box-shadow:0 0 0 4px rgba(43,43,48,.1)}.manual-copy{min-width:0;text-align:left}.manual-copy strong{display:block;font-size:12px}.manual-copy a{display:block;overflow:hidden;margin-top:4px;padding:6px 0;color:var(--accent-hi);font-size:12px;text-overflow:ellipsis;white-space:nowrap;text-underline-offset:3px}.manual-actions{display:flex;gap:7px}.mini-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);padding:0 13px;cursor:pointer;text-decoration:none;font-size:11px;font-weight:740;white-space:nowrap;transition:background .18s,border-color .18s,transform .12s}.mini-btn:hover{border-color:var(--accent-hi);background:rgba(var(--ink-rgb),.07)}.mini-btn:active{transform:scale(.95)}.copy-buffer{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:.01} footer{border-top:1px solid var(--line);padding:38px 40px;color:var(--muted);font-size:12px}.footer-inner{max-width:1360px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-links{display:flex;gap:6px;flex-wrap:wrap}.footer-links button{min-height:44px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;padding:0 11px;font-size:12px;transition:color .17s,background .17s}.footer-links button:hover{color:var(--ink);background:rgba(var(--ink-rgb),.06)}.footer-links button:active{transform:scale(.96)}.reveal{opacity:1;transform:none}.reveal.in{animation:revealIn .72s cubic-bezier(.2,.72,.2,1) both} @keyframes navLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes revealIn{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes heroDrift{to{transform:scale(1.075) translate3d(-.7%,.4%,0)}} @media(max-width:1100px){.poster-grid,.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.wide-card{min-height:320px}} @media(max-width:820px){.topbar{padding:0 18px}.hero-copy{width:84vw;padding-left:28px}.hero-controls{right:28px}.shell{padding-inline:24px}.poster-grid,.catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.wide-grid{grid-template-columns:1fr 1fr}.wide-card:last-child{grid-column:1/-1}.browse-head{align-items:start;flex-direction:column}.search-wrap{width:100%}.spotlight-copy{padding:58px 42px}} @media(max-width:600px){.topbar{height:auto;min-height:62px;padding:9px 10px 0;flex-wrap:wrap;row-gap:0}.top-left{display:contents}.wordmark{order:1;margin-right:4px;font-size:21px;min-height:44px;display:inline-flex;align-items:center}.top-actions{order:2;margin-left:auto;gap:2px}.primary-nav{order:3;flex:1 1 100%;gap:0;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}.primary-nav::-webkit-scrollbar{display:none}.nav-btn{flex:none;min-height:44px;padding:0 12px;font-size:11px}.nav-btn.active::after{left:12px;right:12px}#inboxBtn{flex:none}.icon-btn[data-go="browse"]{display:none}.cta.nav-cta{min-height:44px;padding:0 13px}.cta .long{display:none}.cta .short{display:inline}.page{padding-top:118px}.hero{min-height:calc(100svh - 118px)}.hero-slide:nth-of-type(1) img{object-position:50% center}.hero-slide:nth-of-type(2) img{object-position:46% center}.hero-slide:nth-of-type(3) img{object-position:50% center}.hero-slide::after{background:linear-gradient(0deg,var(--page) 0%,rgba(13,11,10,.78) 48%,rgba(13,11,10,.14) 100%)}.hero-copy{width:100%;padding:280px 18px 92px}.hero h1{font-size:clamp(44px,14.7vw,66px)}.hero p{font-size:15px;margin-block:20px 25px}.hero-controls{left:18px;right:auto;bottom:35px}.hero-controls .round-btn{display:none}.shell{padding:78px 16px 90px}.section{margin-top:84px}.section-head{align-items:start;flex-direction:column;margin-bottom:23px}.section-head h2{font-size:clamp(33px,10vw,48px)}.timeline{grid-template-columns:64px minmax(0,1fr);margin-top:36px}.tl-rail::before{left:50px}.tick{height:96px}.tick .t{width:44px;font-size:11px}.tick .t small{font-size:8px}.tick::after{left:44px;top:-5px;width:10px;height:10px}.daypart{font-size:8.5px;top:-28px;letter-spacing:.12em}.now-marker{left:40px}.now-marker .pill{font-size:9px;padding:5px 9px}.events{padding-left:20px}button.tl-btn{margin-bottom:16px}.event{grid-template-columns:1fr}.event .art{min-height:150px}.event .art::after{background:linear-gradient(0deg,rgba(13,11,10,.5),transparent 60%)}.event::before{left:-20px;width:20px}.event::after{left:-24px}.event .body{padding:16px 18px}.event h3{font-size:17px}.earlier-grid{grid-template-columns:1fr 1fr}.timeline-empty{margin-top:36px}.poster-grid,.catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.poster-copy{padding:13px 12px 14px}.poster-copy h3{font-size:13px}.poster-badge{left:8px;bottom:8px}.wide-grid{grid-template-columns:1fr}.wide-card,.wide-card:last-child{grid-column:auto;min-height:340px}.spotlight{min-height:650px;border-radius:20px}.spotlight img{object-position:64% center}.spotlight-copy{min-height:650px;padding:45px 23px}.spotlight-copy h2{font-size:clamp(40px,13vw,61px)}.browse .shell{padding-top:80px}.library-hero{padding:86px 19px 55px}.library-native{padding:0 14px;margin-bottom:90px}.library-grid{grid-template-columns:1fr}.library-art{order:-1;min-height:250px}.library-empty{padding:36px 22px 42px}.library-top{padding:20px}.library-top .meta{display:none}.modal{padding:8px}.wtw{padding:20px 18px;margin-top:18px}.wtw h3{font-size:19px}.wtw-svc{min-width:0;flex:1 1 calc(50% - 5px);padding:12px 14px;min-height:60px}.wtw-logo{width:34px;height:34px}.wtw-txt b{font-size:14px}.modal-card{border-radius:18px;max-height:95svh}#showModal #trailerStageTop{border-radius:18px 18px 0 0;height:auto;aspect-ratio:16/9;max-height:260px}#showModal #trailerStageTop .play-btn{width:76px;height:76px;border-width:2.5px}#showModal #trailerStageTop .play-btn svg{width:28px;height:28px;margin-left:4px}#showModal #trailerStageTop .play-wrap{gap:10px}#showModal #trailerStageTop .watch-label{min-height:36px;font-size:11.5px}#showModal .no-trailer-note{padding:12px 19px 0}.modal-card>img{max-height:260px}.modal-body,.beta-card .modal-body{padding:24px 19px}.modal-actions,.form-actions{align-items:stretch;flex-direction:column}.form-row{grid-template-columns:1fr}.manual-fallback{grid-template-columns:1fr}.manual-actions{width:100%}.mini-btn{flex:1}.footer-inner{align-items:center;flex-direction:column;text-align:center}.footer-links{justify-content:center}} @media(max-width:600px){.wordmark{font-size:17px;margin-right:4px;padding-right:6px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide img{animation:none}.reveal,.reveal.in{opacity:1;transform:none;animation:none}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}} /* Priority-one polish: live lineup, editorial spotlight, embedded trailers, and real footer. */ .skip-link{position:fixed;z-index:200;left:16px;top:10px;transform:translateY(-150%);padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--page);font-size:12px;font-weight:800;text-decoration:none;transition:transform .18s ease}.skip-link:focus{transform:none} .eyebrow,.meta,.poster-badge,.genre,.wide-copy>span,.card-action,.ad-label{font-family:"Inter",sans-serif;font-weight:760;letter-spacing:-.01em}.eyebrow{font-size:10.5px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.poster-badge,.ad-label{text-transform:uppercase;letter-spacing:.12em} .brand-band{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.65fr) auto;align-items:center;gap:34px;margin-top:64px;padding:38px 40px;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(43,43,48,.16),rgba(43,43,48,.03))}.brand-band h2{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(29px,3vw,46px);font-weight:570;line-height:1;letter-spacing:-.042em}.brand-props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.brand-prop{color:var(--copy);font-size:13px;font-weight:720;line-height:1.45}.brand-prop::before{content:"";display:block;width:24px;height:2px;margin-bottom:10px;background:var(--accent-hi)} .poster-copy h3{display:-webkit-box;min-height:2.4em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-family:"Inter",sans-serif;font-size:15px;font-weight:780;letter-spacing:-.01em}.card-action{display:block;margin-top:12px;color:var(--accent-hi);font-size:11px}.wide-copy h3{font-family:"Inter",sans-serif;font-size:22px;font-weight:780;letter-spacing:-.01em;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.wide-copy .card-action{margin-top:10px}.poster-grid.movies{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px} .spotlight{display:grid;grid-template-columns:55fr 45fr;min-height:520px;border:1px solid var(--line);background:var(--surface)}.spotlight::after{display:none}.spotlight-media{position:relative;overflow:hidden;min-height:520px}.spotlight-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface),transparent 22%)}.spotlight img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82)}.spotlight-copy{order:-1;min-height:520px;max-width:none;padding:58px 56px;justify-content:center}.spotlight-copy h2{font-size:clamp(42px,5vw,72px)} .trailer-stage{position:relative;overflow:hidden;aspect-ratio:16/9;margin-top:24px;border:1px solid var(--line);border-radius:16px;background:#0d0b0a} /* Generic facade/player treatment (the Watch Free stage reuses it): the trailer-at-top rules below override these for #trailerStageTop only. */ .trailer-stage iframe,.trailer-facade,.trailer-facade img{display:block;width:100%;height:100%;border:0} .trailer-facade{position:relative;width:100%;padding:0;border:0;background:#0d0b0a;cursor:pointer} .trailer-facade img{object-fit:cover} .trailer-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.34),rgba(0,0,0,.04));pointer-events:none} .trailer-loading{position:absolute;z-index:3;left:14px;bottom:14px;display:none;padding:8px 11px;border-radius:999px;background:rgba(13,11,10,.84);color:#fff;font-size:11px;font-weight:760} .trailer-loading.visible{display:block} /* ---- Trailer stage at the TOP of the title-detail popup (Gate 2 Rev 2) ---- Full-bleed across the card: height min(470px,52vw) at full card width, art cropped cinematically via object-fit:cover. Zero dead space on the right. Scoped to #trailerStageTop: the Watch Free section reuses .trailer-stage with its own 16:9 box styles and must NOT inherit this treatment. */ #trailerStageTop{position:relative;overflow:hidden;height:min(470px,52vw);aspect-ratio:auto;margin-top:0;border:0;background:#0d0b0a;border-radius:24px 24px 0 0} #trailerStageTop .stage-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} #trailerStageTop iframe,#trailerStageTop .trailer-facade,#trailerStageTop .trailer-facade img{display:block;width:100%;height:100%;border:0} #trailerStageTop .trailer-facade img{object-fit:cover} #trailerStageTop .trailer-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer} #trailerStageTop .trailer-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,.05) 55%,rgba(0,0,0,.18))} #trailerStageTop .play-wrap{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px} #trailerStageTop .play-btn{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;border:3px solid rgba(255,255,255,.9);background:var(--accent);color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 0 10px rgba(43,43,48,.28);transition:transform .18s ease} #trailerStageTop .trailer-facade:hover .play-btn{transform:scale(1.06)} #trailerStageTop .play-btn svg{width:38px;height:38px;margin-left:5px} #trailerStageTop .watch-label{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;background:rgba(13,11,10,.8);border:1px solid rgba(237,230,214,.25);color:#fff;font-size:12.5px;font-weight:760;letter-spacing:.06em;backdrop-filter:blur(8px)} #trailerStageTop .trailer-loading{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);display:none;padding:9px 16px;border-radius:999px;background:rgba(13,11,10,.88);color:#fff;font-size:12px;font-weight:760;letter-spacing:.03em} #trailerStageTop .trailer-loading.visible{display:block} /* Player expanded in place at the top */ #trailerStageTop .player{position:absolute;inset:0;background:#000} #trailerStageTop .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #trailerStageTop .stage-ctrls{position:absolute;z-index:3;top:14px;left:14px;display:flex;gap:10px} #trailerStageTop .stage-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(237,230,214,.28);border-radius:50%;background:rgba(13,11,10,.78);color:#fff;cursor:pointer;backdrop-filter:blur(10px);transition:background .18s,border-color .18s} #trailerStageTop .stage-btn:hover{background:var(--accent);border-color:var(--accent-hi)} #trailerStageTop .stage-btn svg{width:20px;height:20px} #trailerStageTop .stage-btn .is-off{display:none} #trailerStageTop .trailer-facade:focus-visible,#trailerStageTop .stage-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* Honest no-trailer caption: muted line beneath the stage, centered */ .no-trailer-note{display:block;max-width:840px;margin-inline:auto;padding:14px 30px 0;color:var(--muted);font-size:13px;text-align:center;letter-spacing:.01em} .no-trailer-note[hidden]{display:none} .no-trailer-note .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint);margin-right:8px;vertical-align:1px} #showModal .modal-body{max-width:840px;margin-inline:auto}.trailer-play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:68px;height:68px;border:2px solid rgba(255,255,255,.82);border-radius:50%;background:var(--accent);color:#fff;transform:translate(-50%,-50%);font-size:25px;box-shadow:0 16px 45px rgba(0,0,0,.45)} .wtw{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);padding:24px 26px;position:relative;overflow:hidden} .wtw::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-hi),var(--accent))} .wtw h3{font-size:21px;font-weight:750;letter-spacing:.01em;margin:0 0 8px} .wtw-disclosure{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 18px;max-width:60ch} .wtw-group{margin:0 0 18px} .wtw-group:last-of-type{margin-bottom:12px} .wtw-label{font-size:11px;font-weight:750;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:12px} .wtw-label::after{content:"";flex:1;height:1px;background:var(--line)} .wtw-btns{display:flex;flex-wrap:wrap;gap:10px} .wtw-svc{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);border:1px solid var(--line-strong);border-radius:14px;padding:12px 16px;min-height:60px;min-width:200px;background:rgba(237,230,214,.03);transition:transform .15s ease,border-color .15s ease,background .15s ease} .wtw-svc:hover{transform:translateY(-2px);border-color:rgba(237,230,214,.55);background:rgba(237,230,214,.06)} .wtw-svc:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .wtw-logo{width:40px;height:40px;border-radius:10px;flex:none;object-fit:cover;background:#0d0b0a} .wtw-txt{min-width:0} .wtw-txt b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wtw-txt span{font-size:12.5px;color:var(--muted)} .wtw-svc.wtw-primary{background:var(--accent);border-color:var(--accent);color:#fff} .wtw-svc.wtw-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .wtw-svc.wtw-primary .wtw-txt span{color:rgba(255,255,255,.84)} .wtw-tag{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.18);color:#fff;padding:4px 10px;border-radius:999px;margin-left:auto;flex:none} .wtw-fresh{font-size:12px;color:var(--faint);line-height:1.55;margin:2px 0 0} .wtw-empty{font-size:14px;color:var(--muted);line-height:1.6;padding:6px 0 2px} .modal-actions{align-items:center}.modal-actions .cta.textual{min-height:44px;margin-left:auto;padding:0 12px} /* Watch Free (Gate 3, 2026-09-24): second native .wtw section in the title popup. Sits below trailer/synopsis, above paid "Where to watch". Rendered only when real free data exists — the node is absent from the DOM otherwise. */ .wtw-free .wtw-label.free-ads{color:var(--accent-hi)} .plays-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px} .free-plays-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px} .free-src{font-size:11px;font-weight:750;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .free-stage{margin:0} .trailer-facade .free-plays-badge{position:absolute;top:12px;left:12px;z-index:3} .free-disc{font-size:13px;color:var(--muted);line-height:1.55;margin:12px 0 14px;max-width:60ch} .free-out{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0 0 10px} .free-verified{font-size:12px;color:var(--faint);line-height:1.55;margin:0 0 18px;max-width:62ch} .free-fallback{border:1px dashed var(--line-strong);border-radius:14px;padding:18px;margin:0 0 18px;background:rgba(237,230,214,.02)} .free-fallback .free-retry{width:100%;margin-bottom:10px} .free-fallback p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 12px} .wtw-search-tag{color:var(--faint)}.wtw-honesty{font-size:13px;font-style:italic;color:var(--muted);line-height:1.6;margin:0 0 12px;max-width:60ch} @media(max-width:600px){.free-out{width:100%;justify-content:center}} .beta-benefits{display:grid;gap:10px;margin:23px 0 20px;list-style:none}.beta-benefits li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--copy);font-size:14px;line-height:1.5}.beta-benefits li::before{content:"✓";color:var(--ink);font-weight:800}.next-step{color:var(--ink)!important;font-weight:670}.privacy-note{margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45} .footer-shell{max-width:1360px;margin:auto}.footer-main{display:grid;grid-template-columns:1.3fr repeat(3,minmax(130px,.7fr));gap:46px;padding:32px 0 42px}.footer-brand{max-width:390px;color:var(--copy);font-size:14px;line-height:1.7}.footer-brand strong{display:block;margin-bottom:12px;font-family:"Previously Display",serif;color:var(--ink);font-size:26px;font-weight:400}.footer-group h2{margin-bottom:13px;color:var(--ink);font-size:12px}.footer-group a,.footer-group button,.social-placeholder{display:block;width:max-content;max-width:100%;min-height:44px;border:0;background:none;color:var(--muted);padding:7px 0;text-decoration:none;font-size:12px;cursor:pointer}.footer-group a:hover,.footer-group button:hover{color:var(--accent-hi)}.social-placeholder{cursor:default}.footer-base{display:flex;justify-content:space-between;gap:24px;padding:25px 0 5px;border-top:1px solid var(--line);color:var(--muted);line-height:1.55}.footer-base p{max-width:720px}.sr-anchor{scroll-margin-top:90px} @media(min-width:601px){.spotlight-copy .cta{align-self:flex-start;width:auto}} @media(min-width:1200px){.more-layout{align-items:stretch}} @media(min-width:1440px){.poster-grid.movies{max-width:none}} @media(max-width:900px){.brand-band{grid-template-columns:1fr;gap:24px}.brand-band .cta{align-self:flex-start}.brand-props{grid-template-columns:repeat(3,1fr)}.footer-main{grid-template-columns:1fr 1fr}.spotlight{grid-template-columns:1fr 1fr}.spotlight-copy{padding:44px 34px}} @media(max-width:600px){.nav-cta{display:inline-flex;min-height:44px;padding:0 13px;font-size:12px}.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - 62px);padding:96px 18px 90px}.brand-band{margin-top:46px;padding:30px 18px}.brand-props{grid-template-columns:1fr;gap:13px}.brand-prop::before{display:inline-block;margin:0 10px 3px 0}.poster-grid.movies{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.poster-grid.movies .poster-card:last-child{grid-column:1/-1;max-width:calc(50% - 5px);width:100%;justify-self:center}.spotlight{grid-template-columns:1fr}.spotlight-copy{min-height:auto;padding:40px 24px}.spotlight-media{min-height:310px}.spotlight-media::after{background:linear-gradient(0deg,var(--surface),transparent 24%)}.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.footer-base{flex-direction:column}.trailer-play{width:58px;height:58px}} @media(max-width:1100px){} /*PV2-CSS-APPENDED*/ /* ============================================================ Previously — round 2 additions: retention, motion, HD artwork (appended 2026-09-23; extends the base Midnight Noir styles) ============================================================ */ /* ---------- Page transitions ---------- */ .view{animation:none} .view.active{animation:viewIn .45s cubic-bezier(.2,.72,.2,1) both} @keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ---------- Cards: hover lift + glow + zoom (fine pointers only) ---------- */ .poster-card,.wide-card{position:relative;transition:transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s ease,border-color .3s ease} .poster-card .poster-art,.wide-card .poster-art{overflow:hidden} .poster-card .poster-art img,.wide-card img{transition:transform .55s cubic-bezier(.2,.7,.25,1),filter .3s ease} @media (hover:hover) and (pointer:fine){ .poster-card:hover,.poster-card:focus-within{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(237,230,214,.14);z-index:2} .wide-card:hover,.wide-card:focus-within{transform:translateY(-4px);box-shadow:0 22px 54px rgba(0,0,0,.5),0 0 0 1px rgba(237,230,214,.12);z-index:2} .poster-card:hover .poster-art img,.poster-card:focus-within .poster-art img{transform:scale(1.07)} .wide-card:hover img,.wide-card:focus-within img{transform:scale(1.05)} .card-hover{opacity:0;transition:opacity .28s ease} .poster-card:hover .card-hover,.poster-card:focus-within .card-hover, .wide-card:hover .card-hover,.wide-card:focus-within .card-hover{opacity:1} .star-btn{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease,background .18s,border-color .18s} .poster-card:hover .star-btn,.poster-card:focus-within .star-btn, .wide-card:hover .star-btn,.wide-card:focus-within .star-btn{opacity:1;transform:none} .star-btn[aria-pressed="true"]{opacity:1;transform:none} } @media (hover:none),(pointer:coarse){ .card-hover{display:none} .poster-card:active,.wide-card:active{transform:scale(.985)} } /* Hover overlay: quick actions (desktop/keyboard only; touch uses the modal) */ .card-hover{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:12px;background:linear-gradient(0deg,rgba(13,11,10,.82) 0%,rgba(13,11,10,.25) 45%,transparent 70%);pointer-events:none} .card-hover .hover-actions{pointer-events:auto;display:flex;gap:8px} .hover-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid rgba(237,230,214,.3);background:rgba(13,11,10,.72);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);transition:background .18s,border-color .18s,transform .14s} .hover-chip:hover{background:var(--accent);border-color:var(--accent-hi)} .hover-chip:active{transform:scale(.93)} /* Star toggle (cards) */ .star-btn{position:absolute;top:10px;right:10px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(237,230,214,.32);background:rgba(13,11,10,.72);color:#ede6d6;cursor:pointer;backdrop-filter:blur(8px);transition:background .18s,border-color .18s,transform .14s,color .18s} .star-btn svg{width:18px;height:18px} .star-btn:hover{border-color:var(--accent-hi)} .star-btn:active{transform:scale(.88)} .star-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-hi);color:#fff} .star-btn[aria-pressed="true"] svg{fill:currentColor} .star-btn.pop{animation:starPop .38s cubic-bezier(.2,.9,.3,1.4)} @keyframes starPop{0%{transform:scale(.6)}55%{transform:scale(1.25)}100%{transform:scale(1)}} /* ---------- Star + labels: one-time hint, hover tooltips ---------- */ /* One-time coach-mark hint (touch/coarse pointers only; shown once via JS) */ .star-hint{position:fixed;z-index:190;max-width:232px;background:var(--accent-deep);color:#ede6d6;border-radius:14px;padding:13px 15px;font-size:14px;line-height:1.45;box-shadow:0 14px 34px rgba(0,0,0,.42);text-align:left} .star-hint[hidden]{display:none} .star-hint::before{content:"";position:absolute;top:-7px;right:30px;border:7px solid transparent;border-bottom-color:var(--accent-deep);border-top:0} .star-hint p{margin:0 0 10px} .star-hint button{display:inline-block;min-height:44px;min-width:44px;background:#ede6d6;color:var(--accent-deep);border:0;border-radius:999px;font-weight:700;font-size:13.5px;padding:8px 18px;cursor:pointer} /* Netflix-style hover tooltips: fine pointers with hover ONLY — never on touch */ @media (hover:hover) and (pointer:fine){ .hover-chip[data-tip]{position:relative} /* star-btn is already position:absolute */ [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);background:#1e1a18;color:#ede6d6;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;padding:8px 12px;border-radius:8px;z-index:60;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;box-shadow:0 8px 20px rgba(0,0,0,.35)} [data-tip]::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e1a18;border-bottom:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .18s ease} [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)} [data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1} } /* FIX 2026-09-24: badge overlapped trailer chip; hover overlay above badge */ .poster-card:hover .card-hover,.poster-card:focus-within .card-hover, .wide-card:hover .card-hover,.wide-card:focus-within .card-hover{z-index:3} /* FIX 2026-09-24: .poster-card/.wide-card use overflow:hidden, so an above-the-button tooltip on .star-btn (top:10px) is clipped away. Star tooltips drop BELOW the button, right-anchored — fully visible. */ .star-btn[data-tip]::after{bottom:auto;top:calc(100% + 9px);left:auto;right:-4px;transform:translateY(-4px)} .star-btn[data-tip]:hover::after,.star-btn[data-tip]:focus-visible::after{transform:translateY(0)} .star-btn[data-tip]::before{bottom:auto;top:calc(100% + 4px);left:auto;right:15px;transform:none;border-top:0;border-bottom:5px solid #1e1a18} /* NEW-episode badge */ .new-badge{position:absolute;top:10px;left:10px;z-index:3;padding:5px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;box-shadow:0 6px 18px rgba(43,43,48,.5);animation:badgeIn .4s cubic-bezier(.2,.9,.3,1.2) both} @keyframes badgeIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}} .new-pill{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;letter-spacing:.07em;vertical-align:middle} /* ---------- Inbox bell ---------- */ #inboxBtn{position:relative} .inbox-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 4px 12px rgba(43,43,48,.55);animation:badgeIn .35s cubic-bezier(.2,.9,.3,1.3) both} .inbox-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;max-height:46svh;overflow:auto} .inbox-item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);cursor:pointer;transition:border-color .2s,transform .18s,background .2s} .inbox-item:hover{border-color:var(--accent-hi);transform:translateX(3px)} .inbox-item img{width:52px;height:76px;object-fit:cover;border-radius:10px;flex:none} .inbox-item .inbox-copy{min-width:0} .inbox-item h3{font-size:15px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inbox-item p{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inbox-empty{padding:26px 10px;color:var(--muted);text-align:center;line-height:1.6} .inbox-sub{color:var(--muted);font-size:14px;margin-top:6px} /* ---------- Rails (horizontal scroll) ---------- */ .rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,17vw,210px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 2px 18px;scroll-snap-type:x proximity;scrollbar-width:thin} .rail .poster-card{scroll-snap-align:start} .section-foot{margin-top:6px} /* ---------- Top 10 charts (Gate 3 build) ---------- Rank numerals are real text; #1 alone gets the graphite accent. */ .top10-rail{padding:8px 18px 22px 34px;scroll-padding-left:34px;scrollbar-width:none} /* Lock chart card width against the later 1100px+ .rail widening (approved mockup size) */ .rail.top10-rail{grid-auto-columns:clamp(150px,17vw,210px);gap:14px} @media(max-width:640px){.rail.top10-rail{grid-auto-columns:clamp(132px,38vw,168px);gap:10px}} /* Empty state spans the rail full-width instead of one card column */ .rail.top10-rail.is-empty{display:block;padding:8px 0 4px} .rail.top10-rail.is-empty .top10-empty{max-width:560px;margin:0 auto} .top10-rail::-webkit-scrollbar{display:none} @media(min-width:641px){.top10-rail{padding:10px 40px 26px 52px;scroll-padding-left:52px}} .tcard{position:relative;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;scroll-snap-align:start;border-radius:var(--radius-md)} .tcard:focus-visible{outline:2px solid var(--focus);outline-offset:4px} .tcard .artwrap{position:relative;display:block} .tcard .art{position:relative;display:block;aspect-ratio:2/3;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.35);background:var(--surface-2);transition:transform .26s cubic-bezier(.2,.75,.2,1),border-color .22s,box-shadow .22s} .tcard:hover .art{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 26px 60px rgba(0,0,0,.5)} .tcard .art picture{position:absolute;inset:0;display:block} .tcard .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tcard .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(5,4,3,.72) 100%)} /* Art-overlay chips use fixed pearl ink (the hero's --hero-ink pattern): the artwork is always dark, in both themes. */ .tcard .ptype{position:absolute;z-index:2;left:10px;top:10px;font-size:9.5px;font-weight:800;letter-spacing:.14em;padding:5px 9px;border-radius:999px;background:rgba(13,11,10,.72);border:1px solid var(--line-strong);color:#ede6d6;backdrop-filter:blur(6px)} .tcard .pgenre{position:absolute;z-index:2;left:12px;top:38px;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,230,214,.78)} .tcard .ptitle{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.12;letter-spacing:-.01em;color:#ede6d6;text-shadow:0 2px 12px rgba(0,0,0,.8)} @media(min-width:641px){.tcard .ptitle{left:14px;right:14px;bottom:14px;font-size:19px}.tcard .ptype{left:12px;top:12px}.tcard .pgenre{left:14px}} .tcard .rank{position:absolute;z-index:3;left:-.34em;bottom:-8px;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:58px;line-height:.8;letter-spacing:-.04em;color:var(--ink);text-shadow:0 3px 16px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9);pointer-events:none} .tcard .rank.r1{color:#2b2b30;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 22px rgba(0,0,0,.9)} @media(min-width:641px){.tcard .rank{font-size:78px;bottom:-10px;left:-.32em}} .tcard .meta{display:block;padding:12px 4px 0} .tcard .meta .t{display:block;color:var(--ink);font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tcard .meta .g{display:block;margin-top:5px;font-size:12px;color:var(--muted)} .tcard .meta .trate{color:var(--accent-hi);font-weight:700} .top10-fresh{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--faint);font-size:12.5px;font-weight:600} .top10-fresh .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(232,50,30,.8);flex:none} .top10-fresh.stale{color:var(--muted)} .top10-fresh.stale .dot{background:var(--muted);box-shadow:none} .top10-empty{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:38px 26px;text-align:center} .top10-empty h3{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:23px;font-weight:570;letter-spacing:-.02em;line-height:1.2} .top10-empty p{margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.65} .top10-empty .cta{margin-top:20px} /* ---------- "One film." signature band (slim, between the charts) ---------- */ .onefilm{margin:64px -40px 8px;padding:44px 40px;text-align:center;border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(43,43,48,.10),rgba(43,43,48,.02))} .onefilm .eyebrow{justify-content:center} .onefilm .eyebrow::after{content:"";width:28px;height:1px;background:currentColor} .onefilm h2{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:44px;font-weight:570;letter-spacing:-.038em;line-height:1.05} .onefilm p{margin-top:12px;color:var(--muted);font-size:15px} @media(max-width:640px){.onefilm{margin:44px -16px 6px;padding:34px 18px}.onefilm h2{font-size:30px}.onefilm p{font-size:13.5px}} @media(prefers-reduced-motion:reduce){.tcard:hover .art{transform:none}} /* ---------- Schedule rows with artwork ---------- */ @keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .schedule-art{width:52px;height:76px;border-radius:10px;object-fit:cover;background:var(--surface-3)} .freshness{font-size:12px;color:var(--muted);font-weight:400} /* ---------- Modal engage row (star + alerts) ---------- */ .modal-engage{display:flex;gap:10px;margin:14px 0 4px} .engage-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 18px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-size:13.5px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,transform .14s,color .2s} .engage-btn:hover{border-color:var(--accent-hi)} .engage-btn:active{transform:scale(.94)} .engage-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-hi);color:#fff} .engage-btn[aria-pressed="true"] svg{fill:currentColor} .engage-btn.ring svg{animation:bellRing .5s ease;transform-origin:top center} @keyframes bellRing{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}55%{transform:rotate(-11deg)}80%{transform:rotate(6deg)}} .modal-rating{margin-top:10px;color:var(--copy);font-size:13px} .modal-rating strong{color:var(--accent-hi);font-size:15px} /* ---------- Library alerts ---------- */ .library-alerts{margin:6px 0 26px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)} .library-alerts h2{font-size:19px;margin-bottom:4px} .library-alerts-sub{color:var(--muted);font-size:13px;margin-bottom:14px} .alert-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--line)} .alert-row:first-of-type{border-top:none} .alert-row img{width:40px;height:58px;object-fit:cover;border-radius:8px} .alert-row .alert-copy{flex:1;min-width:0} .alert-row h3{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alert-row p{font-size:12px;color:var(--muted)} .alert-toggle{position:relative;flex:none;width:52px;height:30px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-3);cursor:pointer;transition:background .22s,border-color .22s} .alert-toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#8d8478;transition:transform .22s cubic-bezier(.2,.8,.3,1.2),background .22s} .alert-toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-hi)} .alert-toggle[aria-pressed="true"]::after{transform:translateX(22px);background:#fff} /* ---------- Browse show-more ---------- */ .browse-more{display:flex;justify-content:center;margin:26px 0 8px} /* ---------- Footer wordmark ---------- */ .footer-wordmark{font-size:21px;display:inline-flex;align-items:center;gap:10px}.footer-wordmark .wm-glyph{flex:none} /* ---------- Legal status note ---------- */ .legal-status{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.6} /* ---------- Trailer facade polish ---------- */ .trailer-facade img{transition:transform .5s cubic-bezier(.2,.7,.25,1)} .trailer-facade:hover img{transform:scale(1.04)} /* ---------- Micro-interactions ---------- */ .chip,.nav-btn,.round-btn,.text-link,.icon-btn{transition:color .18s,background .18s,border-color .18s,transform .14s} .chip:active,.nav-btn:active,.round-btn:active,.icon-btn:active{transform:scale(.93)} .cta{transition:background .2s,border-color .2s,transform .14s,box-shadow .25s} .cta:active{transform:scale(.96)} .cta:not(.secondary):hover{box-shadow:0 10px 30px rgba(43,43,48,.4)} /* ---------- Responsive: rails & schedule ---------- */ @media (max-width:640px){ .rail{grid-auto-columns:clamp(132px,38vw,168px);gap:10px} .modal-engage{flex-wrap:wrap} } @media (min-width:1100px){ .rail{grid-auto-columns:clamp(170px,13vw,220px)} } /* ---------- Reduced motion: everything calms down ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} .hero-slide img{animation:none!important} .view.active{animation:none} html{scroll-behavior:auto} } /* ---------- Card open button (wraps art + copy) ---------- */ .card-open{all:unset;display:block;width:100%;cursor:pointer;color:inherit;font:inherit;text-align:left;box-sizing:border-box} .card-open:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:18px} .card-rating{display:block;margin-top:6px;font-size:12.5px;color:var(--accent-hi);font-weight:700} .sr-anchor{scroll-margin-top:90px} /* Wide-card hover overlay alignment */ .wide-card .card-hover{border-radius:inherit} /* ---------- Neutral Guide (bet #1) ---------- */ .neutral-line{font-size:12.5px;color:var(--muted)} .neutral-line .text-link{font-size:12.5px} .rank-note{color:var(--muted);font-size:13px} /* ============ REWIND DRAG-DROP THEME HOOKS (shared module: previously-site/batch3-2026-09-26/shared/drag-drop/) ============ :root{--pv-drop:var(--dnd-red);--pv-handle:var(--dnd-bone);--pv-gap:rgba(232,50,30,.16);--pv-ghost:var(--dnd-charcoal);--pv-spring:cubic-bezier(.2,.9,.25,1.2)}/* --pv-* aliases the shared PreviouslyDnD tokens (--dnd-*) so the drag visual language has one source of truth */ /* ---------- genre pill slider (tucked into Browse) ---------- */ .filter-row.genre-slider{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-snap-type:x proximity;padding-bottom:8px;margin-bottom:23px} .filter-row.genre-slider::-webkit-scrollbar{height:6px} .filter-row.genre-slider::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .filter-row.genre-slider .chip{flex:0 0 auto;scroll-snap-align:start} #genrePills{display:contents} .chip .gct{opacity:.6;font-weight:600;font-size:11px;margin-left:7px;font-variant-numeric:tabular-nums} /* Catch-up one-liner (James approved 2026-09-27): single honest line, no calculator */ .cu-block{border-top:1px solid rgba(237,230,214,.12);margin-top:14px;padding-top:14px} .cu-line{font-size:14.5px;line-height:1.6;color:#EDE6D6} .cu-line strong{font-weight:600;color:#F4F1EA} .cu-line .cu-day{color:#E8321E;font-weight:600} .cu-pills{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .cu-pills button{background:transparent;border:1px solid rgba(237,230,214,.16);color:#9a917f;font-size:12.5px;padding:6px 13px;border-radius:999px;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s} .cu-pills button:hover{border-color:rgba(237,230,214,.4);color:#EDE6D6} .cu-pills button.on{background:#2B2B30;border-color:#2B2B30;color:#F4F1EA} .primary-nav .nav-btn .nav-ic{display:inline-flex;flex:none;margin-right:7px;vertical-align:-2px} .primary-nav .nav-btn .nav-ic svg{display:block} /* 2026-09-27: section-reorder handle/drop styles (moved from section-reorder.js ensureStyles(); runtime