:root {
    --background: #0f1115;
    --surface: #171a21;
    --surface-alt: #1e222b;
    --border: #2c323d;

    --text: #f4f6f8;
    --text-muted: #aeb6c2;

    /* Gold sampled from the studio mark */
    --accent: #d6a54c;
    --accent-hover: #e9bd6d;

    /* Warm cream backing the dark wolf mark sits on */
    --mark-backing: #f2e8d5;

    --primary-button-text: #16171a;
    --header-background: rgba(15, 17, 21, 0.94);

    /* The gold the hero glows are drawn in, as an RGB triplet for rgba() */
    --glow-rgb: 214, 165, 76;

    /* A cool counterweight to the gold, used only in the featured band */
    --cool-glow-rgb: 120, 104, 196;

    --mark-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    --media-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

    color-scheme: dark;

    --font-body:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        "Cormorant Garamond",
        "Iowan Old Style",
        Garamond,
        "Times New Roman",
        serif;

    --content-width: 1180px;
    --narrow-width: 760px;

    --radius: 18px;

    /* Clears the sticky header when a link jumps to a section. */
    --anchor-offset: 96px;
}

/*
 * The dark palette above is the default. js/theme.js sets data-theme on the
 * root element, and only a visitor who has chosen light gets these values:
 * a warm ivory ground with the gold darkened far enough to read as text.
 */
:root[data-theme="light"] {
    --background: #f7f3eb;
    --surface: #fffaf3;
    --surface-alt: #eee4d4;
    --border: #d6c9b5;

    --text: #20242b;
    --text-muted: #59616b;

    /*
     * Dark enough to clear 4.5:1 against all three light grounds, including
     * --surface-alt, where the previous gold fell just short.
     */
    --accent: #855912;
    --accent-hover: #744b0d;

    --mark-backing: #f2e8d5;

    --primary-button-text: #fffaf3;
    --header-background: rgba(247, 243, 235, 0.94);

    --glow-rgb: 214, 165, 76;
    --cool-glow-rgb: 120, 104, 196;

    --mark-shadow: 0 1px 3px rgba(71, 52, 22, 0.35);
    --media-shadow: 0 18px 40px rgba(71, 52, 22, 0.18);

    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;

    font-family: var(--font-body);

    background: var(--background);
    color: var(--text);

    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

/* One focus ring for every interactive element on the site. */
a:focus-visible,
button:focus-visible,
video:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;

    border-radius: 4px;
}

/* Section anchors land below the sticky header rather than behind it. */
main > section[id] {
    scroll-margin-top: var(--anchor-offset);
}

/*
 * A keyboard visitor can jump the header and land on the page content. The
 * link stays out of the way until it takes focus.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 20;

    padding: 12px 18px;

    color: var(--primary-button-text);

    background: var(--accent);
    border-radius: 10px;

    font-weight: 700;
    text-decoration: none;
}

.container {
    width: min(calc(100% - 40px), var(--content-width));
    margin-inline: auto;
}

/*
 * A reading column. The start margin matches what .container's auto margins
 * work out to, so a narrow section lines up with the full-width sections
 * above and below it instead of centring itself between them.
 */
.narrow {
    max-width: var(--narrow-width);

    margin-inline: max(20px, calc((100% - var(--content-width)) / 2)) auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;

    background: var(--header-background);
    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(12px);
}

.header-inner {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    font-weight: 700;
    text-decoration: none;
}

.brand span {
    font-family: var(--font-display);
    font-weight: 700;

    font-size: 1.3rem;
    line-height: 1.1;
    letter-spacing: 0.005em;
}

/*
 * The mark is a dark wolf on a transparent background, so it needs a
 * light backing to stay legible against the dark header. The disc is
 * drawn in CSS; the source PNG is untouched.
 */
.brand-logo {
    width: 48px;
    height: 48px;

    padding: 2px;

    object-fit: contain;

    background: var(--mark-backing);
    border-radius: 50%;

    box-shadow: var(--mark-shadow);
}

/*
 * The auto margin carries the theme toggle to the right with the nav, rather
 * than space-between stranding the nav in the middle of the header.
 */
.main-nav {
    display: flex;
    gap: 26px;

    margin-left: auto;
}

/*
 * The vertical padding is what makes each nav item a comfortable tap target
 * on a phone; the header's own min-height absorbs it on a desktop.
 */
.main-nav a {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    color: var(--text-muted);
    text-decoration: none;

    font-size: 0.95rem;
    font-weight: 600;
}

.main-nav a:hover {
    color: var(--text);
}

/*
 * The toggle names the theme it switches to. The icon is drawn in CSS to
 * match: a rayed sun beside "Light" and a crescent moon beside "Dark".
 */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    gap: 8px;

    min-height: 36px;
    padding: 6px 12px;

    color: var(--text-muted);

    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;

    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--text);

    background: var(--surface-alt);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Without the script the button could do nothing, so it is not shown. */
:root:not([data-theme]) .theme-toggle {
    display: none;
}

.theme-toggle-icon {
    width: 8px;
    height: 8px;

    margin: 3px;

    background: currentColor;
    border-radius: 50%;

    outline: 2px dotted currentColor;
    outline-offset: 2px;
}

:root[data-theme="light"] .theme-toggle-icon {
    width: 14px;
    height: 14px;

    margin: 0;

    background: transparent;
    outline: 0;

    box-shadow: inset -4px -3px 0 0 currentColor;
}

.eyebrow {
    margin: 0 0 12px;

    color: var(--accent);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

/*
 * Cormorant Garamond runs small and light next to the sans body stack,
 * so the display headings are sized up and the tight tracking the old
 * grotesque headings used is relaxed back towards neutral.
 */
h1,
h2,
h3,
.brand span {
    font-family: var(--font-display);
}

h1 {
    max-width: 860px;

    margin-bottom: 24px;

    font-weight: 600;
    font-size: clamp(2.8rem, 6.4vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
}

h2 {
    margin-bottom: 18px;

    font-weight: 600;
    font-size: clamp(2.2rem, 4.4vw, 3.3rem);
    line-height: 1.14;
    letter-spacing: -0.006em;
}

h3 {
    margin-bottom: 14px;

    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.3;
    letter-spacing: 0;
}

.hero-copy {
    max-width: 720px;

    margin-bottom: 34px;

    color: var(--text-muted);

    font-size: 1.2rem;
}

.large-copy {
    font-size: 1.2rem;
}

.section {
    padding: 90px 0;
}

.section-alt {
    background: var(--surface);
}

/*
 * A slim band for a bare row of links, where a full section's padding would
 * strand the row in empty space.
 */
.section-compact {
    padding: 34px 0;
}

.section-compact .page-links {
    margin-top: 0;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 42px;
}

.section-heading > p:last-child,
.large-copy,
.narrow > p {
    color: var(--text-muted);
}

/*
 * .narrow > p outranks .eyebrow on specificity, which left the eyebrow
 * labels inside narrow containers muted instead of accented. Restore the
 * accent so every eyebrow on the site matches.
 */
.narrow > p.eyebrow {
    color: var(--accent);
}

/*
 * A link sitting inside body copy, rather than one of the site's button or
 * list components. Those carry their own class and are left alone.
 */
.narrow p a:not([class]),
.section-heading p a:not([class]) {
    color: var(--accent);

    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.narrow p a:not([class]):hover,
.section-heading p a:not([class]):hover {
    color: var(--accent-hover);
}

/* Buttons and status */

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 14px;

    margin-top: 30px;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 22px;

    border-radius: 10px;

    font-weight: 700;
    text-decoration: none;
}

.primary-button {
    background: var(--accent);
    color: var(--primary-button-text);

    box-shadow: 0 10px 24px rgba(var(--glow-rgb), 0.18);
}

.primary-button:hover {
    background: var(--accent-hover);
}

.secondary-button {
    color: var(--text);

    border: 1px solid var(--border);
}

.secondary-button:hover {
    border-color: var(--accent);
    background: var(--surface-alt);
}

/*
 * The availability marker. The wording carries the meaning on its own, so
 * the gold ring and dot are decoration rather than the only signal.
 */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 7px 15px;

    color: var(--accent);

    background: rgba(var(--glow-rgb), 0.12);
    border: 1px solid rgba(var(--glow-rgb), 0.45);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.status-pill::before {
    content: "";

    width: 8px;
    height: 8px;

    background: currentColor;
    border-radius: 50%;
}

/* Homepage hero */

.hero {
    padding: 92px 0 88px;

    background:
        radial-gradient(
            circle at 76% 40%,
            rgba(var(--glow-rgb), 0.16),
            transparent 42%
        );
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.92fr);

    align-items: center;
    gap: 64px;
}

/*
 * The homepage headline shares its row with the game artwork, so it is set
 * smaller than the full-width headings on the inner pages.
 */
.hero-content h1 {
    max-width: 16ch;
    margin-bottom: 22px;

    font-size: clamp(2.3rem, 4.5vw, 3.7rem);
}

.hero-content .hero-copy {
    max-width: 46ch;
    margin-bottom: 28px;
}

.hero-release {
    display: grid;
    gap: 12px;

    justify-items: start;
}

.hero-release p {
    max-width: 42ch;
    margin: 0;

    color: var(--text-muted);
}

.hero-release strong {
    color: var(--text);
}

.hero-media {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;
}

.hero-game-logo {
    width: clamp(130px, 16vw, 180px);
    height: auto;
}

.hero-shot {
    width: 100%;
    max-width: 300px;
    height: auto;

    border-radius: 22px;

    box-shadow: var(--media-shadow);
}

/* Featured release */

/*
 * The one band on the site that borrows colour from the game rather than the
 * studio palette: a thin liquid-coloured rule across the top and a cool glow
 * opposite the usual gold.
 */
.featured {
    position: relative;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(var(--glow-rgb), 0.12),
            transparent 46%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(var(--cool-glow-rgb), 0.12),
            transparent 46%
        ),
        var(--surface);
}

.featured::before {
    content: "";

    position: absolute;
    inset: 0 0 auto;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e0556b,
        #e8a33d,
        #4fb87a,
        #3f9fe0,
        #9b6fd6
    );
}

.featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);

    align-items: center;
    gap: 64px;
}

.featured-logo {
    width: clamp(120px, 14vw, 150px);
    height: auto;

    margin-bottom: 14px;
}

.featured-content h2 {
    margin-bottom: 16px;
}

.featured-content .large-copy {
    max-width: 52ch;
    margin-bottom: 30px;
}

.feature-list {
    display: grid;
    gap: 14px;

    max-width: 54ch;
    margin: 0;
    padding: 0;

    list-style: none;
}

.feature-list li {
    position: relative;

    padding-left: 30px;

    color: var(--text-muted);
}

/* A small gold diamond, echoing the stars in the studio mark. */
.feature-list li::before {
    content: "";

    position: absolute;
    left: 4px;
    top: 0.62em;

    width: 9px;
    height: 9px;

    background: var(--accent);
    transform: rotate(45deg);
}

.feature-list strong {
    color: var(--text);
}

.featured-media {
    display: flex;
    justify-content: center;
}

.featured-media img {
    width: 100%;
    max-width: 290px;
    height: auto;

    border-radius: 22px;

    box-shadow: var(--media-shadow);
}

/* Follow rows */

.follow-block {
    margin-top: 34px;
}

.follow-label {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.social-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.social-links a {
    display: inline-flex;
    align-items: center;

    min-height: 42px;
    padding: 9px 16px;

    color: var(--text-muted);

    border: 1px solid var(--border);
    border-radius: 999px;

    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.social-links a:hover {
    color: var(--text);

    background: var(--surface-alt);
    border-color: var(--accent);
}

.section-alt .social-links a:hover {
    background: var(--background);
}

/* Contact */

.contact-email {
    display: inline-block;

    margin-top: 6px;

    color: var(--accent);

    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    text-decoration: none;
}

.contact-email:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Game cards */

.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.game-card {
    display: flex;
    flex-direction: column;

    padding: 30px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.section-alt .game-card {
    background: var(--surface-alt);
}

.game-card-header {
    margin-bottom: 24px;
}

.game-type,
.game-meta span {
    font-size: 0.78rem;
    font-weight: 700;
}

.game-type {
    color: var(--accent);

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.game-card p {
    color: var(--text-muted);
}

.game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 24px;
}

.game-meta span {
    padding: 5px 9px;

    color: var(--text-muted);

    border: 1px solid var(--border);
    border-radius: 8px;
}

/* The link sits on the card floor so cards of unequal copy stay aligned. */
.game-card .game-link {
    margin-top: auto;
    padding-top: 12px;
}

.game-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 14px;
}

.game-title-row h3 {
    margin: 0;
}

.game-card .game-title-row {
    flex-direction: column;
    align-items: flex-start;

    gap: 9px;
}

.working-title {
    padding: 5px 9px;

    color: var(--text-muted);

    border: 1px solid var(--border);
    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 700;
}

.game-link {
    display: inline-block;

    margin-top: 12px;

    color: var(--accent);

    font-weight: 700;
    text-decoration: none;
}

.game-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Game pages */

.game-hero {
    padding: 80px 0 90px;

    border-bottom: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(var(--glow-rgb), 0.12),
            transparent 36%
        );
}

.game-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.back-link {
    width: fit-content;

    color: var(--text-muted);

    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover {
    color: var(--text);
}

.game-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);

    align-items: center;
    gap: 64px;
}

.game-page-title h1 {
    margin-bottom: 0;

    font-size: clamp(2.5rem, 5vw, 4rem);
}

.title-with-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 24px;
}

.game-intro {
    max-width: 46ch;

    margin-bottom: 26px;

    color: var(--text-muted);

    font-size: 1.2rem;
}

.game-page-meta {
    margin-top: 0;
}

.game-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 14px;

    margin-top: 26px;
}

.game-art-placeholder,
.screenshot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-muted);

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.game-art-placeholder {
    min-height: 360px;

    padding: 30px;
}

.game-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;

    gap: 70px;
    align-items: start;
}

.game-main-content {
    max-width: 760px;
}

.game-main-content p:not(.eyebrow) {
    color: var(--text-muted);
}

.game-details-card {
    padding: 28px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.game-details-card h2 {
    margin-bottom: 24px;

    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0;
}

.game-details {
    margin: 0;
}

.game-details > div {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid var(--border);
}

.game-details > div:first-child {
    padding-top: 0;
}

.game-details > div:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.game-details dt {
    color: var(--text-muted);

    font-size: 0.9rem;
}

.game-details dd {
    margin: 0;

    font-weight: 700;
    text-align: right;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}

.screenshot-placeholder {
    aspect-ratio: 9 / 16;

    padding: 24px;

    text-align: center;
}

/*
 * The game emblem sits above the page title. It is sized in CSS rather than
 * by its width/height attributes, which are there to reserve the right
 * space while the image loads.
 */
.game-logo {
    width: clamp(150px, 22vw, 240px);
    height: auto;

    margin-bottom: 22px;
}

/*
 * The hero media is 9:16 portrait, so dropping it into the hero column at
 * full size would run absurdly tall on a wide screen. Capping the width keeps
 * it beside the title rather than towering over it.
 */
.game-hero-shot {
    display: flex;
    justify-content: center;
}

.game-hero-shot img {
    width: auto;
    height: auto;
    max-width: min(100%, 320px);

    border-radius: 22px;

    box-shadow: var(--media-shadow);
}

/* The launch video, shown further down the page rather than in the hero. */
.video-frame {
    display: flex;
    justify-content: center;
}

.video-frame video {
    width: auto;
    height: auto;
    max-width: min(100%, 320px);

    /*
     * preload="none" means no video metadata arrives until playback is asked
     * for, so the 9:16 box is declared here to hold its space from first
     * paint.
     */
    aspect-ratio: 9 / 16;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--media-shadow);
}

/* Screenshot gallery */

/*
 * Four portrait screenshots across the content width land at roughly 280px
 * each, which keeps the baked-in captions readable without the shots
 * dominating the page. The grid stays flush with the section heading at
 * every width rather than centring itself under it.
 */
.screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 24px;
}

.screenshot-gallery img {
    width: 100%;
    height: auto;

    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Feature highlights */

/*
 * The card count varies by page, so the track count follows the available
 * width rather than a fixed number: four across the content width, and
 * fewer as the viewport narrows.
 */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 24px;
}

.feature-card {
    padding: 28px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.section-alt .feature-card {
    background: var(--surface-alt);
}

.feature-card h3 {
    margin-bottom: 10px;

    font-size: 1.35rem;
}

.feature-card p {
    margin: 0;

    color: var(--text-muted);
}

/* Standard content pages */

.page-hero {
    padding: 90px 0 80px;

    border-bottom: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(var(--glow-rgb), 0.10),
            transparent 38%
        );
}

.support-email {
    color: var(--accent);

    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

.support-email:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.support-list {
    margin: 28px 0;

    padding-left: 22px;

    color: var(--text-muted);
}

.support-list li {
    margin-bottom: 10px;
}

.support-games {
    display: grid;
    gap: 12px;

    margin: 28px 0;
}

.support-games a {
    padding: 16px 18px;

    color: var(--text);

    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;

    font-weight: 700;
    text-decoration: none;
}

.support-games a:hover {
    border-color: var(--accent);
}

.support-games .support-games-note {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 0.9rem;
    font-weight: 400;
}

.support-note {
    color: var(--text-muted);

    font-size: 0.9rem;
}

.page-links {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.page-links a {
    display: inline-flex;
    align-items: center;

    min-height: 46px;
    padding: 12px 16px;

    color: var(--text);

    border: 1px solid var(--border);
    border-radius: 10px;

    font-weight: 700;
    text-decoration: none;
}

.page-links a:hover {
    border-color: var(--accent);
}

/* Privacy policies */

.policy-content {
    max-width: 820px;
}

.policy-content > section {
    margin-bottom: 58px;
}

.policy-content > section:last-child {
    margin-bottom: 0;
}

.policy-content h2 {
    margin-bottom: 18px;

    font-weight: 700;
    font-size: clamp(1.65rem, 3.2vw, 2.2rem);
    letter-spacing: 0;

    /*
     * Cormorant Garamond defaults to old-style figures, which leaves the
     * section numbers sitting at x-height against the capitals beside
     * them. Lining figures keep the numbered policy headings even.
     */
    font-variant-numeric: lining-nums;
}

.policy-content p,
.policy-content li {
    color: var(--text-muted);
}

.policy-content a {
    color: var(--accent);
}

.policy-content a:hover {
    color: var(--accent-hover);
}

.policy-content code {
    padding: 2px 6px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;

    font-size: 0.92em;

    overflow-wrap: anywhere;
}

.policy-content ul {
    padding-left: 24px;
}

.policy-content li {
    margin-bottom: 8px;
}

.policy-updated {
    color: var(--text-muted);

    font-size: 0.9rem;
}

/* Footer */

.site-footer {
    padding: 56px 0 30px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-size: 0.92rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));

    gap: 40px;

    padding-bottom: 34px;
}

.footer-brand-link {
    margin-bottom: 16px;

    color: var(--text);
}

.footer-brand-link .brand-logo {
    width: 40px;
    height: 40px;
}

.footer-brand-link span {
    font-size: 1.15rem;
}

.footer-tagline {
    max-width: 34ch;
    margin: 0 0 12px;
}

.footer-contact {
    margin: 0;
}

.footer-contact a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.footer-contact a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.footer-heading {
    margin: 0 0 10px;

    color: var(--text);

    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-column ul {
    display: grid;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-column a {
    display: inline-block;

    padding: 7px 0;

    text-decoration: none;
}

.footer-column a:hover {
    color: var(--text);
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    gap: 8px 24px;

    padding-top: 22px;

    border-top: 1px solid var(--border);
}

.footer-bottom p {
    margin: 0;
}

/* Responsive */

/*
 * The gallery drops to two columns ahead of the site's usual 900px step so
 * a screenshot never gets too narrow to read. The columns are capped rather
 * than stretched, which stops two portrait shots filling a tablet screen.
 */
@media (max-width: 1100px) {
    .screenshot-gallery {
        grid-template-columns: repeat(2, minmax(0, 340px));
    }
}

@media (max-width: 900px) {
    .hero {
        padding: 72px 0 76px;
    }

    .hero-grid,
    .featured-grid,
    .game-page-heading,
    .game-content-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .hero-content h1,
    .hero-content .hero-copy,
    .hero-release p {
        max-width: none;
    }

    .game-art-placeholder {
        min-height: 280px;
    }

    .game-details-card {
        max-width: 600px;
    }

    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    :root {
        /* The header stacks into a taller column below this width. */
        --anchor-offset: 172px;
    }

    /*
     * The brand and theme toggle share the top row and the nav takes a
     * full-width row beneath, so the toggle adds no height to the header.
     */
    .header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;

        gap: 32px 12px;

        padding-block: 16px;
    }

    .brand {
        justify-self: start;
    }

    .main-nav {
        grid-row: 2;
        grid-column: 1 / -1;

        width: 100%;

        gap: 16px;

        margin-left: 0;

        overflow-x: auto;
    }

    .game-hero {
        padding: 60px 0 70px;
    }

    .section {
        padding: 70px 0;
    }

    .game-grid {
        grid-template-columns: 1fr;
    }

    .hero-media {
        gap: 14px;
    }

    .hero-shot {
        max-width: 260px;
    }

    .screenshot-grid {
        grid-template-columns: 1fr;
    }

    .screenshot-placeholder {
        max-width: 360px;
    }

    .screenshot-gallery {
        grid-template-columns: minmax(0, 340px);

        gap: 20px;
    }

    .button-row .primary-button,
    .button-row .secondary-button {
        flex: 1 1 auto;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 32px 24px;
    }
}

/*
 * On the narrowest phones the brand fills most of the top row, so the toggle
 * drops its label and keeps only the icon; its aria-label still names it.
 */
@media (max-width: 380px) {
    .header-inner {
        column-gap: 8px;
    }

    .theme-toggle {
        justify-content: center;

        width: 34px;
        min-height: 34px;

        padding: 0;
    }

    .theme-toggle-text {
        display: none;
    }
}