*{box-sizing:border-box}
:root{--w:960px;--bg:#121212;--panel:#1A1A1A;--red:#E23636;--silver:#C9CCD1;--dim:#8D9096;--line:#2c2c2c}
html{scroll-behavior:smooth}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(18,18,18,.88),rgba(18,18,18,.88)),url(images/background-photo.jpg) center/cover no-repeat}
body{margin:0;background:var(--bg);color:var(--silver);font:17px/1.65 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:#fff;text-decoration-color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.top{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding:16px max(5vw,calc((100% - var(--w))/2));background:var(--panel);border-bottom:4px solid var(--red)}
.logo{font:900 26px/1 "Arial Black",Impact,Arial,sans-serif;color:#fff;text-decoration:none;letter-spacing:-.5px}
.logo b{color:var(--red)}
.menu{display:flex;flex-wrap:wrap;gap:6px 22px}
.menu a{color:var(--silver);text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:#fff;border-color:var(--red)}
main{width:min(var(--w),100% - 10vw);margin:0 auto;padding:0 0 60px}
.crumbs{padding:20px 0 0;font-size:15px;color:var(--dim)}
.hero{padding:8px 0 8px 28px;border-left:8px solid var(--red);margin:28px 0 20px}
h1{font:900 clamp(34px,6vw,64px)/1.05 "Arial Black",Impact,Arial,sans-serif;color:#fff;letter-spacing:-1.5px;margin:0 0 22px}
h2{font:900 clamp(24px,3.4vw,36px)/1.15 "Arial Black",Arial,sans-serif;color:#fff;margin:48px 0 14px;letter-spacing:-.5px}
h3{font-size:18px;line-height:1.25;color:#fff;margin:0 0 6px}
.text p{margin:0 0 18px}
figure{margin:32px 0}
figure img{width:100%;height:auto;display:block;border:1px solid var(--line)}
figcaption{font-size:14px;color:var(--dim);margin-top:8px}
.toggle{display:flex;gap:0;margin:18px 0}
.toggle button{flex:1;max-width:240px;padding:12px 16px;background:var(--panel);color:var(--silver);border:2px solid var(--line);font:700 16px inherit;cursor:pointer}
.toggle button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.tl-label{margin:6px 0 0;font-weight:700;color:#fff}
.tl{display:flex;align-items:stretch;gap:8px;margin:10px 0 24px}
.years{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;flex:1;border-top:3px solid var(--silver);scrollbar-width:thin}
.years button{white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;background:none;border:0;border-top:3px solid transparent;margin-top:-3px;color:var(--silver);font:900 18px "Arial Black",Arial,sans-serif;padding:14px 18px;cursor:pointer}
.years button:hover{color:#fff;border-top-color:var(--red)}
.arr{width:44px;background:var(--panel);border:2px solid var(--line);color:#fff;font-size:26px;cursor:pointer}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{position:relative;background:var(--panel);padding:18px 16px 16px 60px;border-left:5px solid var(--silver);transition:background .3s}
.card.saga2{border-left-color:var(--red)}
.card.hl{background:#3a1a1a;outline:2px solid var(--red)}
.card.soon{opacity:.85;border-left-style:dashed}
.card .num{position:absolute;left:12px;top:14px;font:900 22px/1 "Arial Black",Arial,sans-serif;color:var(--dim)}
.card p{margin:0;font-size:15px;line-height:1.5}
.card .meta{font-size:13px;color:var(--dim);margin-bottom:8px}
.films{columns:2 300px;padding-left:20px;margin:24px 0}
.films li{margin-bottom:6px;break-inside:avoid}
.films span{color:var(--dim);font-size:14px}
footer{background:var(--panel);border-top:1px solid var(--line);padding:26px max(5vw,calc((100% - var(--w))/2));color:var(--dim);font-size:14px}
footer p{margin:0}
@media(max-width:600px){body{font-size:16px}.hero{padding-left:16px;border-left-width:6px}.toggle button{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
