/* One stationary painting carries the landing and the film together. */
.opening{position:relative;isolation:isolate}
.opening-art{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:-1;overflow:hidden;background:var(--paper)}
.opening-art img{width:100%;height:100%;object-fit:cover;object-position:59% center}
.opening-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eddfc3ef 0%,#eddfc3a6 28%,transparent 55%);pointer-events:none}
.opening-content{position:relative}
.hero{height:100svh;min-height:780px;max-height:none;overflow:visible;isolation:auto}
.hero:after{display:none}
.hero-bottom{color:var(--ink);text-shadow:0 1px 8px var(--paper)}
.hero-copy{padding-bottom:90px}
.media{background:transparent;border:0;padding:50px 8% 120px}
.media-film{max-width:1200px;margin:auto;box-shadow:0 22px 75px #201f1950;border:1px solid #ddcbaa70;background:#242720}
.video-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#242720;color:#eee0c6;gap:16px}
.film-play{width:76px;height:76px;border:1px solid #b9a98d;border-radius:50%;display:grid;place-items:center;font:42px/1 Georgia,serif;padding-left:5px;color:#d5bd96}
.video-placeholder p{font-family:Brush,serif;font-size:clamp(40px,5vw,68px);line-height:1}
.video-placeholder>span:last-child{font:600 12px Vietnam,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#b8b29f}
.media-film figcaption{padding:18px 24px;color:#ebdcc0;border-top:1px solid #e4d2b12b}
.media-film figcaption span:last-child{color:#c7b797}
.game{position:relative;background:#ede0c7;color:var(--ink);padding-top:100px;padding-bottom:100px}
.feature-heading{text-align:center;margin-bottom:75px}
.feature-heading h2{margin:0 auto 22px}.feature-heading .eyebrow{color:var(--red);margin:0 auto}
.feature-rows{display:grid;gap:85px}
.feature-row{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:center}
.feature-row:nth-child(even){grid-template-columns:1fr 1.2fr}
.feature-row:nth-child(even) .feature-screenshot{order:2}
.feature-row:nth-child(even) .feature-copy{order:1}
.feature-screenshot{display:block;width:100%;height:auto;border:1px solid #ac967954;box-shadow:0 12px 30px #201f191c}
.placeholder-index{font:36px/1 Spectral,serif;margin-bottom:15px;opacity:.6}
.feature-screenshot p{font:600 13px Vietnam,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.feature-screenshot>span:last-child{font:14px Spectral,serif}
.feature-copy .number{color:var(--red);font-size:18px}
.feature-copy h3{font:400 clamp(40px,4.4vw,65px)/.95 Brush,serif;margin:16px 0 24px}
.feature-copy p{font-size:18px;line-height:1.85;color:var(--muted)}
.defenders{position:relative;background:#e5d7bc;border-top:1px solid var(--line)}
@media(max-width:1050px){.hero{min-height:850px}.media{padding-left:6%;padding-right:6%}.opening-art img{object-position:57% center}.opening-art:after{background:linear-gradient(90deg,#eddfc3ef 0%,#eddfc3b0 32%,transparent 67%)}.feature-row,.feature-row:nth-child(even){gap:6%}}
@media(max-width:700px){.hero{height:100svh;min-height:850px}.hero-copy{padding-top:113px}.opening-art img{object-position:65% center}.opening-art:after{background:linear-gradient(180deg,#ede0c7f5 0%,#ede0c7eb 48%,#ede0c720 82%)}.media{padding:20px 5% 70px}.video-placeholder{min-height:230px;gap:13px}.film-play{width:50px;height:50px;font-size:30px}.video-placeholder p{font-size:38px}.media-film figcaption{padding:14px 17px}.hero-bottom{bottom:25px}.game{padding:65px 6%}.feature-heading{margin-bottom:42px}.feature-rows{gap:48px}.feature-row,.feature-row:nth-child(even){grid-template-columns:1fr;gap:24px}.feature-row:nth-child(even) .feature-screenshot,.feature-row:nth-child(even) .feature-copy{order:initial}.feature-copy h3{font-size:45px;margin:10px 0 16px}.feature-copy p{font-size:17px}.feature-heading h2{font-size:3.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:700px){.video-placeholder{width:100%;min-height:0;aspect-ratio:16/10}}

/* Intact original painting, framed separately for each hero. No cutout or blending. */
.roster .portrait{position:relative;height:auto;aspect-ratio:360/600;overflow:hidden}
.roster .portrait img{position:absolute;width:464.444444%;max-width:none;height:auto;object-fit:initial;mix-blend-mode:normal;transform:none;transition:none;top:calc(var(--crop-y) / -600 * 100%);left:calc(var(--crop-x) / -360 * 100%)}
.roster article:nth-child(1){--crop-x:625;--crop-y:145}
.roster article:nth-child(2){--crop-x:850;--crop-y:170}
.roster article:nth-child(3){--crop-x:1045;--crop-y:225}
.roster article:nth-child(4){--crop-x:1312;--crop-y:225}
.header .brand{flex-shrink:0}
.header .brand img{width:48px;height:48px;object-fit:contain}.header .brand small{font-size:inherit;letter-spacing:inherit}
@media(max-width:700px){.header .brand img{width:35px;height:35px}.header nav{gap:10px}}
@media(max-width:380px){.header .brand{font-size:9px}.header nav{font-size:11px}}

footer{flex-wrap:wrap}footer .footer-copyright{flex-basis:100%;font:400 12px/1.6 Vietnam,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:8px}
