.hero{position:relative;background:var(--noir);color:var(--surface)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(42vw,1.2fr);align-items:stretch;min-height:100dvh}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;min-height:100dvh;padding-block:calc(var(--header-offset,var(--header)) + 32px) 64px;padding-inline:max(var(--gutter),calc((100vw - var(--container))/2)) 40px}
.hero-copy h1{margin-bottom:36px;font-size:clamp(2.35rem,4.2vw,3.45rem);line-height:1.12;letter-spacing:-.03em;max-width:14ch;text-wrap:balance}
.hero-art{position:relative;min-width:0;min-height:100dvh}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% center}
.hero-art::after{content:"";position:absolute;inset:0 0 auto;height:calc(var(--header-offset,var(--header)) + 28px);background:linear-gradient(to bottom,rgb(0 0 0 / 45%),transparent);pointer-events:none}
.hero .button:focus-visible{outline-color:var(--lime);box-shadow:0 0 0 4px var(--noir)}
:is(.js,[data-header-pending]) .header{transition:background-color var(--motion-standard),box-shadow var(--motion-standard)}
:is(.js,[data-header-pending]) .header:not(.is-scrolled){background:transparent;border-radius:0;box-shadow:none}
:is(.js,[data-header-pending]) .header-underlay{display:none}
:is(.js,[data-header-pending]) .hero{margin-top:calc(-1 * var(--header-offset,var(--header)))}

.platforms{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:32px;align-items:center;padding-block:32px;border-bottom:1px solid var(--line)}
.platforms>.anchor-alias{position:absolute;top:0}
.platforms h2{font-size:1.25rem;font-weight:500;line-height:1.3;letter-spacing:-.02em}
.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.platform-card{display:grid;grid-template-columns:46% minmax(0,1fr);min-width:0;border:4px solid var(--noir);border-radius:var(--radius-card);background:var(--noir);color:var(--surface);text-decoration:none;overflow:hidden}
.platform-card>img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
.platform-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:12px;font-size:var(--ui);font-weight:500;line-height:1.4}
.platform-caption>[aria-hidden]{font-size:1.25rem;line-height:1}
.platform-card:hover .platform-caption{color:var(--lime)}
.platform-card:hover .platform-caption>span:first-child{text-decoration:underline;text-underline-offset:5px}
.platform-card:focus-visible{outline:3px solid var(--forest);outline-offset:5px;box-shadow:0 0 0 5px var(--surface)}

.updates{padding-block:64px 40px}
.update-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--radius-feature);overflow:hidden}
.update-panel{position:relative;min-width:0}
.update-panel>.anchor-alias{position:absolute;top:0}
.update-releases{background:var(--noir);color:var(--surface)}
.update-news{background:#e0f888;color:var(--ink)}
.update-content{display:grid;grid-template-rows:auto 1fr auto;height:100%;min-height:0;padding:44px 48px 28px;text-decoration:none}
.update-copy h2{font:400 clamp(3rem,5.5vw,5rem)/1.02 var(--font-display);letter-spacing:-.03em;margin-bottom:20px}
.update-releases h2{color:var(--lime)}
.update-copy p{font-size:var(--body);line-height:1.55;max-width:34ch}
.update-releases .update-copy p{color:var(--panel)}
.update-art{display:grid;place-items:center;min-width:0;padding:12px 0}
.update-news .update-art{background:#e0f888}
.update-art img{width:auto;max-width:72%;height:148px;object-fit:contain}
.update-action{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding-top:20px;border-top:1px solid currentColor;font-size:var(--ui);font-weight:500;text-decoration:none}
.update-action::after{content:"";position:absolute;inset:0;border-radius:var(--radius-card)}
.update-action>span:last-child{font-size:1.75rem;line-height:1}
.update-releases .update-action{color:var(--lime)}
.update-panel:hover .update-action>span:first-child{text-decoration:underline;text-underline-offset:6px}
.update-action:focus-visible{outline:none;box-shadow:none}
.update-action:focus-visible::after{outline:3px solid currentColor;outline-offset:-8px}
.update-releases .update-action:focus-visible::after{outline-color:var(--lime)}

@media(max-width:79.999rem){.update-content{padding:36px 32px 24px}.update-art img{height:136px}}
@media(max-width:63.999rem){.hero h1{font-size:clamp(2.15rem,4vw,3rem)}.platforms{grid-template-columns:1fr;gap:20px}.platform-grid{max-width:640px}.updates{padding-block:48px 32px}.update-content{padding:32px 28px 24px}.update-art img{height:128px}}
@media(max-width:47.999rem){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:clamp(2.05rem,8vw,2.75rem)}.hero-copy{justify-content:flex-end;padding-bottom:40px;color:var(--surface);background:linear-gradient(to top,rgb(0 0 0 / 78%) 0%,rgb(0 0 0 / 34%) 38%,transparent 68%)}.hero-copy h1{margin-bottom:28px}.hero-art{position:absolute;inset:0;min-height:0}.hero-art img{object-position:center 42%}.platforms{padding-block:24px;gap:16px}.platform-grid{max-width:420px;gap:12px}.platform-card{display:block;border-width:3px}.platform-card>img{height:auto;aspect-ratio:16/9}.platform-caption{padding:8px 10px}.updates{padding-block:32px 24px}.update-spread{grid-template-columns:minmax(0,1fr)}.update-content{padding:28px 24px 20px;min-height:0}.update-copy h2{font-size:3.25rem;margin-bottom:16px}.update-copy p{font-size:var(--ui)}.update-art{padding:12px 0}.update-art img{width:auto;max-width:78%;height:132px}.update-action{min-height:52px;padding-top:16px}}
@media(forced-colors:active){.platform-card{border-color:LinkText}.platform-caption{color:LinkText}.update-panel{border:1px solid CanvasText}.update-action:focus-visible::after{outline-color:Highlight}}
@media print{.updates{padding-block:32px}.update-panel{break-inside:avoid}.update-releases,.update-news{background:white;color:black}.update-releases h2,.update-releases .update-copy p,.update-releases .update-action{color:black}.hero{background:white;color:black}.hero-copy p{color:black}}
