:root{color-scheme:dark;--base:#0c0c10;--panel:#18181f;--ink:#f8f6f2;--muted:#c6c0c2;--gold:#f0c574;--red:#c91f39}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--base);color:var(--ink);font:16px/1.5 "DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:clamp(22px,5vw,80px);padding:13px 5%;background:#0c0c10f5;border-bottom:1px solid #ffffff1c}
.brand{font-weight:950;font-style:italic;letter-spacing:-.055em;color:var(--gold);white-space:nowrap;font-size:clamp(19px,3vw,31px);line-height:1}
.brand b{color:#ff5368}
.brand small{display:block;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.35em;color:var(--ink);margin-top:6px}
nav{display:flex;align-items:center;gap:clamp(14px,3vw,36px);color:var(--muted);font-size:14px;font-weight:700}
nav button,.search-toggle,.close{border:0;background:none;padding:0}
nav a:hover,nav button:hover,.search-toggle:hover{color:var(--gold)}
.search-toggle{margin-left:auto;font-weight:700;font-size:14px}
.hero{position:relative;isolation:isolate;min-height:clamp(480px,45vw,660px);display:grid;align-items:center}
.hero-art{position:absolute;inset:0 0 0 32%;z-index:-1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 29%;display:block}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--base),transparent 58%),linear-gradient(0deg,var(--base),transparent 48%)}
.hero-copy{padding:60px 5%;max-width:790px}
.kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.19em}
h1{font:700 clamp(50px,7vw,105px)/.96 Georgia,serif;letter-spacing:-.055em;margin:16px 0 24px}
.synopsis{font-size:clamp(15px,1.65vw,20px);max-width:410px;color:#e7e0dc}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 10px}
.primary,.secondary{border-radius:7px;padding:10px 18px;border:1px solid transparent;font-weight:800}
.primary{background:var(--red)}
.secondary{background:#202027;border-color:#6b656c}
.primary:hover{background:#a91b31}
.secondary:hover{background:#34343d}
.preview{color:var(--muted);font-size:13px}
#rows,#search-panel{padding:0 5%}
#search-panel{padding-top:20px}
#search{display:block;width:min(100%,560px);margin:6px 0 16px;padding:10px 13px;border-radius:7px;background:var(--panel);border:1px solid #777}
.row{margin:0 0 34px}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
h2{font-size:clamp(19px,2.4vw,31px);line-height:1.2;margin:0}
.row-controls{display:flex;gap:7px}
.row-controls button{background:var(--panel);border:1px solid #47434c;border-radius:50%;width:34px;height:34px;font-size:21px;line-height:1}
.row-controls button:disabled{opacity:.35;cursor:default}
.shelf{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 3px 12px}
.card{flex:0 0 clamp(134px,16vw,224px);scroll-snap-align:start;text-align:left;padding:0;overflow:hidden;border:1px solid #ffffff26;border-radius:8px;background:var(--panel);display:flex;flex-direction:column}
.card:hover{border-color:var(--gold)}
.card img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:#101015}
.card span{padding:9px 10px;font-weight:750;font-size:14px}
footer{border-top:1px solid #ffffff26;color:var(--muted);padding:22px 5%;display:flex;justify-content:space-between;gap:12px;font-size:12px}
dialog{width:min(580px,calc(100% - 28px));max-height:88dvh;background:var(--panel);color:var(--ink);border:1px solid #ffffff45;border-radius:12px;padding:28px}
dialog::backdrop{background:#000c}
.close{position:absolute;top:6px;right:12px;font-size:30px;width:36px;height:36px}
.dialog-poster{width:100px;float:right;margin:18px 0 10px 14px;border-radius:6px}
.dialog-list{padding:0;list-style:none}
.dialog-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #ffffff22}
.dialog-list button{border:0;background:transparent;text-align:left;padding:4px}
iframe,video{width:100%;aspect-ratio:16/9;border:0;background:black;margin-top:14px;clear:both}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:640px){
 header{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 4% 9px}
 nav{grid-row:2;grid-column:1/-1;justify-content:space-between;gap:8px}
 .search-toggle{grid-column:2;grid-row:1}
 .hero{display:block;min-height:0}
 .hero-art{position:relative;inset:auto}
 .hero-art img{height:auto;max-height:53vh;object-fit:contain;background:#100e12}
 .hero-art:after{background:linear-gradient(0deg,var(--base),transparent 17%)}
 .hero-copy{padding:4px 5% 22px;text-align:center}
 h1{font-size:clamp(37px,10vw,58px);margin:10px 0 12px}
 .synopsis{margin:0 auto}
 .actions{justify-content:center;margin-top:16px}
 .card{flex-basis:38%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.row-controls[hidden]{display:none}