@font-face {
    font-family: Sora;
    src: url('/assets/fonts/sora.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --bg: #09171b;
    --surface: #10252b;
    --ink: #edf2e9;
    --muted: #a8bebc;
    --line: #2b4145;
    --mint: #b6e4ce;
    --gold: #e8c78d;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 15px/1.75 Sora, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.wrap { width: min(1000px, calc(100% - 80px)); margin-inline: auto; }
.skip-link {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    padding: 8px 14px;
    background: var(--ink);
    color: var(--bg);
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.company { padding-block: 80px 26px; }
.mascot-strip { position: relative; margin-top: 14px; }
.mascot-strip[hidden] { display: none; }
#company-mascot { display: block; width: 100%; height: 126px; image-rendering: pixelated; }
#mascot-toggle { position: absolute; top: 0; right: 0; padding: 6px 8px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font: 400 10px/1.4 Sora, system-ui, sans-serif; cursor: pointer; }
#mascot-toggle:hover { color: var(--mint); }
#mascot-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.eyebrow {
    margin: 0 0 18px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
h1 {
    margin: 0 0 23px;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 450;
    letter-spacing: -2.8px;
    line-height: 1.2;
}
h1 span { color: var(--gold); font-weight: 350; }
.company-description { max-width: 700px; margin: 0; color: var(--muted); }
.cinematic { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #071115; }
.cinematic-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #071115; }
.cinematic figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 16px; color: var(--muted); font-size: 11px; }
.cinematic figcaption span:first-child { color: var(--mint); }
.game {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.game-media { margin: 0; background: #071115; border-right: 1px solid var(--line); }
.gameplay-video { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; aspect-ratio: 9 / 16; background: #071115; }
.gameplay-choices { display: flex; gap: 5px; padding: 9px; border-top: 1px solid var(--line); }
.gameplay-choices[hidden] { display: none; }
.gameplay-choices button {
    flex: 1;
    min-height: 44px;
    padding: 8px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    font: 500 11px/1.3 Sora, system-ui, sans-serif;
    cursor: pointer;
}
.gameplay-choices button:hover { color: var(--ink); border-color: var(--mint); }
.gameplay-choices button[aria-pressed="true"] { color: #132922; background: var(--mint); border-color: var(--mint); }
.gameplay-choices button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.game-media figcaption { display: grid; gap: 3px; padding: 5px 14px 16px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.game-copy { padding: 40px; align-self: center; }
.game-copy .eyebrow { margin-bottom: 10px; }
h2 { margin: 0 0 18px; font: 400 40px/1.2 Georgia, serif; letter-spacing: -1px; }
.game-copy p:not(.eyebrow) { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.button {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-height: 44px;
    padding: 11px 18px;
    margin-top: 4px;
    background: var(--mint);
    color: #132922;
    border: 1px solid var(--mint);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}
.button:hover { background: var(--ink); border-color: var(--ink); }
.button span { font-size: 19px; line-height: 1; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 40px; padding-block: 21px 30px; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; color: var(--muted); font-size: 10px; }
.site-footer a { color: var(--mint); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--ink); }
@media (max-width: 800px) {
    .wrap { width: calc(100% - 48px); }
    .company { padding-block: 55px 35px; }
    .game { grid-template-columns: 280px minmax(0, 1fr); }
    .game-copy { padding: 26px; }
}
@media (max-width: 680px) {
    .game { display: flex; flex-direction: column; }
    .game-copy { order: -1; align-self: stretch; }
    .game-media { border-right: 0; border-top: 1px solid var(--line); }
    .gameplay-choices, .game-media figcaption { max-width: 340px; margin-inline: auto; }
}
@media (max-width: 420px) {
    .wrap { width: calc(100% - 36px); }
    h1 { font-size: 35px; letter-spacing: -1.7px; }
    .company-description { font-size: 14px; }
    .game-copy { padding: 24px; }
}