:root {
    --white: #ffffff;
    --orange: #ff4a19;
    --ink: #15131f;
    --ink-soft: #211d2c;
    --paper: #f3f0ec;
    --muted: #b9b3c2;
    --line: rgba(255, 255, 255, 0.14);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--ink);
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--white);
    font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", "Arial Nova", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button, a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--orange);
    color: var(--ink);
}

.shell {
    width: min(100% - 10vw, 1380px);
    margin-inline: auto;
}

.section {
    padding: clamp(7rem, 12vw, 12rem) 0;
}

.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #15131f;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("assets/hero-world.png");
    background-position: center;
    background-size: cover;
    transform: scale(1.015);
    animation: hero-arrive 1.8s cubic-bezier(.2,.7,.2,1) both;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(15, 13, 23, .94) 0%, rgba(16, 14, 24, .86) 32%, rgba(16, 14, 24, .28) 59%, rgba(15, 13, 23, .05) 100%), linear-gradient(0deg, rgba(13, 11, 19, .42) 0%, transparent 42%);
    pointer-events: none;
}

.site-header {
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    animation: fade-down .8s .1s both;
}

.brand {
    width: clamp(180px, 17vw, 252px);
}

    .brand img {
        width: 100%;
        height: auto;
    }

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 3vw, 3.5rem);
    font-size: .95rem;
}

    .desktop-nav a {
        position: relative;
        color: rgba(255,255,255,.72);
        padding: 1rem 0;
        transition: color .25s ease;
    }

        .desktop-nav a::after {
            content: "";
            position: absolute;
            height: 3px;
            left: 0;
            right: 100%;
            bottom: .58rem;
            background: var(--orange);
            border-radius: 2px;
            transition: right .25s ease;
        }

        .desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a.active {
            color: var(--white);
        }

            .desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a.active::after {
                right: 0;
            }

.mobile-menu {
    display: none;
    position: relative;
}

    .mobile-menu summary {
        list-style: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 50%;
        display: grid;
        place-content: center;
        gap: 5px;
        cursor: pointer;
    }

        .mobile-menu summary::-webkit-details-marker {
            display: none;
        }

        .mobile-menu summary span {
            display: block;
            width: 17px;
            height: 1px;
            background: var(--white);
        }

    .mobile-menu nav {
        position: absolute;
        right: 0;
        top: 54px;
        display: grid;
        min-width: 180px;
        padding: .7rem;
        background: rgba(21,19,31,.96);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 16px 40px rgba(0,0,0,.3);
    }

        .mobile-menu nav a {
            padding: .85rem 1rem;
            border-radius: 10px;
        }

            .mobile-menu nav a:hover {
                background: rgba(255,255,255,.06);
            }

.hero-content {
    min-height: calc(100svh - 122px);
    display: grid;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: clamp(4rem, 7vw, 7rem);
}

.hero-copy {
    width: min(660px, 50vw);
    animation: content-arrive 1s .25s both;
}

.eyebrow, .kicker {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255,255,255,.72);
    letter-spacing: .025em;
    text-transform: none;
    font-size: 1rem;
}

    .eyebrow span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 0 6px rgba(255,74,25,.08);
    }

.hero h1 {
    margin: 2.7rem 0 1.8rem;
    font-size: clamp(4rem, 6vw, 6.4rem);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 680;
}

.hero-intro {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2.8rem;
    flex-wrap: wrap;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 1.75rem;
    border-radius: 999px;
    font-weight: 680;
    font-size: .95rem;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

    .button:hover, .button:focus-visible {
        transform: translateY(-3px);
    }

.button-primary {
    background: var(--orange);
    color: #18131c;
    border: 1px solid var(--orange);
}

    .button-primary:hover {
        background: #ff633a;
    }

.button-ghost {
    border: 1px solid rgba(255,255,255,.42);
    color: var(--white);
}

    .button-ghost:hover {
        border-color: var(--white);
        background: rgba(255,255,255,.06);
    }

.scroll-cue {
    display: flex;
    align-items: center;
    width: 76px;
    margin-top: 4.7rem;
}

    .scroll-cue span {
        display: block;
        height: 4px;
        border-radius: 4px;
    }

        .scroll-cue span:first-child {
            width: 34px;
            background: var(--orange);
        }

        .scroll-cue span:last-child {
            width: 45px;
            background: rgba(255,255,255,.28);
        }

.games-section {
    background: var(--paper);
    color: var(--ink);
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr 1.2fr .72fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 5rem;
}

.kicker {
    color: var(--orange);
    align-self: start;
}

.section-heading h2, .studio-section h2, .journal-heading h2, .press-section h2 {
    margin: 0;
    font-size: clamp(3rem, 5.5vw, 5.7rem);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 650;
}

    .section-heading h2 span {
        color: #817889;
    }

.section-heading > p:last-child, .journal-heading > p {
    margin: 0;
    color: #635d69;
    line-height: 1.7;
    font-size: 1.02rem;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.game-card {
    position: relative;
    display: block;
    border-top: 1px solid rgba(21,19,31,.22);
    padding-top: 1rem;
}

    .game-card:focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 8px;
    }

.game-art {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ink);
}

    .game-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
    }

.game-card:hover .game-art img {
    transform: scale(1.035);
    filter: saturate(1.07);
}

.ai-note {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: 12px;
    z-index: 4;
    margin: 0;
    padding: .42rem .62rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(10,9,15,.7);
    color: rgba(255,255,255,.82);
    font-size: .64rem;
    line-height: 1;
    letter-spacing: .035em;
    backdrop-filter: blur(9px);
}

.game-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

    .game-meta p {
        margin: 0 0 .35rem;
        text-transform: uppercase;
        letter-spacing: .13em;
        color: #776f7d;
        font-size: .72rem;
        font-weight: 650;
    }

    .game-meta h3 {
        margin: 0;
        font-size: clamp(1.8rem, 3vw, 2.7rem);
        letter-spacing: -.04em;
    }

.round-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(21,19,31,.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('assets/Round_Arrow_White.svg');
    background-position: center;
    background-repeat: no-repeat;
    transition: background .25s, border-color .25s, transform .25s, background-image .25s;
    position: relative;
}

.game-card:hover .round-arrow {
    background: var(--orange);
    border-color: var(--orange);
    background-image: url('assets/Round_Arrow_Orange_Hover.svg');
    transform: rotate(12deg);
}
.game-description {
    max-width: 520px;
    margin: 1.2rem 0 0;
    color: #635d69;
    line-height: 1.7;
}

.studio-section {
    position: relative;
    overflow: hidden;
    background: var(--ink);
}

.studio-grid {
    position: relative;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(4rem, 9vw, 10rem);
}

.studio-section h2 em {
    color: var(--orange);
    font-style: normal;
}

.studio-glow {
    position: absolute;
    width: 55vw;
    height: 55vw;
    right: -25vw;
    top: 12%;
    border-radius: 50%;
    background: rgba(255,74,25,.08);
    filter: blur(2px);
}

.studio-copy {
    padding-top: 6.6rem;
}

    .studio-copy > p {
        color: var(--muted);
        line-height: 1.78;
        font-size: 1.05rem;
    }

    .studio-copy .lead {
        color: var(--white);
        font-size: clamp(1.45rem, 2.2vw, 2.2rem);
        line-height: 1.45;
        margin-top: 0;
    }

.principles {
    margin-top: 4rem;
    border-top: 1px solid var(--line);
}

    .principles > div {
        display: grid;
        grid-template-columns: 48px 1fr 1.7fr;
        gap: 1.4rem;
        align-items: baseline;
        padding: 1.4rem 0;
        border-bottom: 1px solid var(--line);
    }

    .principles span {
        color: var(--orange);
        font-size: .78rem;
    }

    .principles strong {
        font-size: 1rem;
    }

    .principles p {
        margin: 0;
        color: #9993a2;
        line-height: 1.55;
    }

.journal-section {
    background: #fbfaf8;
    color: var(--ink);
}

.journal-heading {
    display: grid;
    grid-template-columns: 1fr .45fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 5.5rem;
}

.journal-heading-copy {
    display: grid;
    gap: 1.7rem;
}

    .journal-heading-copy > p {
        margin: 0;
        color: #6d6672;
        line-height: 1.65;
    }

.journal-all-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .7rem;
    padding-bottom: .55rem;
    border-bottom: 2px solid var(--orange);
    font-size: .86rem;
    font-weight: 700;
}

    .journal-all-link span {
        color: var(--orange);
        transition: transform .2s ease;
    }

    .journal-all-link:hover span,
    .journal-all-link:focus-visible span {
        transform: translate(3px, -3px);
    }

    .journal-heading .kicker {
        margin-bottom: 2rem;
    }

.journal-list {
    border-top: 1px solid rgba(21,19,31,.2);
}

    .journal-list > * {
        position: relative;
        display: grid;
        grid-template-columns: .35fr 1.4fr .6fr 48px;
        align-items: center;
        gap: 2rem;
        min-height: 126px;
        border-bottom: 1px solid rgba(21,19,31,.2);
        transition: padding .25s ease, background .25s ease;
    }

        .journal-list > *:hover {
            padding-inline: 1.2rem;
            background: rgba(255,74,25,.045);
        }

.journal-entry:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 5px;
}

.journal-list p {
    margin: 0;
}

.journal-type {
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    font-weight: 700;
}

.journal-list h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    letter-spacing: -.025em;
}

.journal-date {
    color: #77717d;
    font-size: .85rem;
}

.journal-list > * > span {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(21,19,31,.22);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.journal-placeholder {
    opacity: .72;
}

/* Studio log archive */
.log-archive-page {
    min-height: 100vh;
    background: #fbfaf8;
    color: var(--ink);
}

.archive-header-wrap {
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 25%, rgba(255,74,25,.2), transparent 27%),
        var(--ink);
    color: var(--white);
}

.archive-intro {
    padding-top: clamp(6rem, 10vw, 10rem);
    padding-bottom: clamp(6rem, 10vw, 11rem);
}

    .archive-intro h1 {
        max-width: 1050px;
        margin: 1.8rem 0 0;
        font-size: clamp(4.6rem, 10vw, 10rem);
        line-height: .85;
        letter-spacing: -.07em;
    }

        .archive-intro h1 em {
            color: var(--orange);
            font-style: normal;
        }

    .archive-intro > p:last-child {
        max-width: 620px;
        margin: 3rem 0 0 auto;
        color: rgba(255,255,255,.7);
        font-size: clamp(1.1rem, 2vw, 1.5rem);
        line-height: 1.6;
    }

.archive-posts {
    min-height: 42vh;
    padding: clamp(6rem, 10vw, 10rem) 0;
}

/* Studio log article */
.article-page {
    min-height: 100vh;
    background: #fbfaf8;
    color: var(--ink);
}

.article-header-wrap {
    width: 100%;
    background: var(--ink);
}

.article-header {
    color: var(--white);
    background: var(--ink);
    border-bottom-color: rgba(255,255,255,.14);
}

.article-intro {
    padding-top: clamp(6rem, 10vw, 10rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
}

.article-back {
    display: inline-block;
    margin-bottom: 4rem;
    color: #6f6876;
    font-size: .88rem;
    transition: color .2s, transform .2s;
}

    .article-back:hover, .article-back:focus-visible {
        color: var(--orange);
        transform: translateX(-3px);
    }

.article-meta {
    margin: 0 0 2rem;
    color: var(--orange);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.article-intro h1 {
    max-width: 1160px;
    margin: 0;
    font-size: clamp(4rem, 8.3vw, 8.8rem);
    font-weight: 650;
    line-height: .91;
    letter-spacing: -.068em;
}

    .article-intro h1 em {
        color: var(--orange);
        font-style: normal;
    }

.article-deck {
    max-width: 760px;
    margin: 3rem 0 0 auto;
    color: #645e69;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.55;
    letter-spacing: -.015em;
}

.article-hero {
    position: relative;
    margin-bottom: 0;
}

    .article-hero img {
        width: 100%;
        aspect-ratio: 16 / 8.6;
        object-fit: cover;
        border-radius: 4px;
    }

    .article-hero .ai-note {
        bottom: 3.2rem;
    }

    .article-hero figcaption {
        margin-top: 1rem;
        color: #7a7380;
        font-size: .77rem;
    }

.article-layout {
    display: grid;
    grid-template-columns: minmax(190px, .45fr) minmax(0, 1.55fr);
    gap: clamp(4rem, 10vw, 11rem);
    padding-top: clamp(6rem, 10vw, 10rem);
    padding-bottom: clamp(8rem, 12vw, 13rem);
}

.article-layout-single {
    display: block;
}

    .article-layout-single .article-body {
        margin-inline: auto;
    }

.article-aside {
    align-self: start;
    position: sticky;
    top: 2rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--orange);
}

    .article-aside > p {
        margin: 0 0 1.4rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .article-aside ol {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: summary;
    }

    .article-aside li {
        counter-increment: summary;
        position: relative;
        padding: 1.2rem 0 1.2rem 2.6rem;
        border-top: 1px solid rgba(21,19,31,.16);
        color: #6d6672;
        font-size: .85rem;
        line-height: 1.55;
    }

        .article-aside li::before {
            content: "0" counter(summary);
            position: absolute;
            left: 0;
            color: var(--orange);
            font-size: .7rem;
            font-weight: 700;
        }

.article-body {
    max-width: 820px;
}

    .article-body > p {
        margin: 0 0 1.6rem;
        color: #5f5965;
        font-size: clamp(1.03rem, 1.3vw, 1.16rem);
        line-height: 1.85;
    }

    .article-body .article-lead {
        margin-bottom: 3.2rem;
        color: var(--ink);
        font-size: clamp(1.55rem, 2.7vw, 2.45rem);
        line-height: 1.42;
        letter-spacing: -.028em;
    }

    .article-body > h2 {
        margin: 5.2rem 0 1.8rem;
        font-size: clamp(2.3rem, 4.5vw, 4.5rem);
        line-height: 1;
        letter-spacing: -.055em;
    }

    .article-body > h3 {
        margin: 3.4rem 0 1.2rem;
        font-size: clamp(1.55rem, 2.5vw, 2.35rem);
        line-height: 1.15;
        letter-spacing: -.035em;
    }

    .article-body blockquote {
        margin: 4.5rem 0;
        padding: .4rem 0 .4rem clamp(2rem, 5vw, 4rem);
        border-left: 4px solid var(--orange);
        color: var(--ink);
        font-size: clamp(1.65rem, 3vw, 2.8rem);
        font-weight: 620;
        line-height: 1.35;
        letter-spacing: -.035em;
    }

    .article-body > ul,
    .article-body > ol {
        margin: 0 0 2.4rem;
        padding-left: 1.4rem;
        color: #5f5965;
        font-size: clamp(1.03rem, 1.3vw, 1.16rem);
        line-height: 1.8;
    }

    .article-body > p a,
    .article-body > ul a,
    .article-body > ol a {
        border-bottom: 1px solid var(--orange);
        color: var(--ink);
    }

.article-media {
    margin: 4.5rem 0;
}

    .article-media img,
    .article-media video,
    .article-media iframe {
        display: block;
        width: 100%;
        border: 0;
        border-radius: 4px;
        background: #ddd8d2;
    }

    .article-media video,
    .article-media iframe {
        aspect-ratio: 16 / 9;
    }

    .article-media iframe {
        height: auto;
    }

    .article-media figcaption {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-top: .85rem;
        color: #7a7380;
        font-size: .77rem;
        line-height: 1.5;
    }

    .article-media .media-notice {
        flex: 0 0 auto;
        color: #918a95;
    }

.article-note {
    margin: 4rem 0;
    padding: clamp(1.8rem, 4vw, 3rem);
    border-top: 3px solid var(--orange);
    background: #eeeae5;
}

    .article-note strong {
        display: block;
        margin-bottom: .85rem;
        color: var(--ink);
        font-size: 1rem;
    }

    .article-note p {
        margin: 0;
        color: #5f5965;
        line-height: 1.75;
    }

.article-status {
    margin: 5.5rem 0;
    padding: clamp(2rem, 4vw, 4rem);
    background: var(--ink);
    color: var(--white);
}

    .article-status h2 {
        max-width: 650px;
        margin: 1.4rem 0 3rem;
        font-size: clamp(2.2rem, 4vw, 4rem);
        line-height: 1;
        letter-spacing: -.05em;
    }

    .article-status > div {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-top: 1px solid var(--line);
    }

    .article-status article {
        padding: 1.7rem 2rem 0 0;
    }

        .article-status article + article {
            padding-left: 2rem;
            border-left: 1px solid var(--line);
        }

    .article-status span {
        color: var(--orange);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .article-status article p {
        margin: 1rem 0 0;
        color: #b9b3c2;
        font-size: .93rem;
        line-height: 1.7;
    }

.article-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem 0;
    border-bottom: 2px solid var(--orange);
    font-size: 1.05rem;
    font-weight: 700;
}

    .article-cta span {
        color: var(--orange);
        transition: transform .2s;
    }

    .article-cta:hover span, .article-cta:focus-visible span {
        transform: translate(3px, -3px);
    }

.article-footer {
    margin-top: 0;
}

.press-section {
    position: relative;
    min-height: 86svh;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #e84218;
    color: var(--ink);
    padding: 8rem 0;
}

.press-content {
    position: relative;
    z-index: 1;
}

    .press-content > img {
        width: clamp(86px, 9vw, 132px);
        margin-bottom: 4rem;
        filter: brightness(0) saturate(100%);
    }

.press-section .kicker {
    color: var(--ink);
    opacity: .72;
    margin-bottom: 2rem;
}

.press-section h2 {
    max-width: 820px;
    color: var(--white);
}

.press-section p:not(.kicker) {
    max-width: 600px;
    margin: 2rem 0 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(21,19,31,.76);
}

.button-light {
    margin-top: 2.5rem;
    background: var(--white);
    color: var(--ink);
}

.press-path {
    position: absolute;
    width: 62vw;
    height: 160%;
    right: -19vw;
    top: -27%;
    border: clamp(70px, 9vw, 140px) solid rgba(21,19,31,.92);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(24deg);
}

    .press-path::after {
        content: "";
        position: absolute;
        width: 42%;
        height: 42%;
        left: 4%;
        bottom: 8%;
        background: rgba(21,19,31,.92);
        border-radius: 44% 56% 52% 48%;
    }

/* Game pages */
.product-page {
    background: var(--paper);
    color: var(--ink);
}

.product-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
    background: #090810;
}

.product-hero-art, .next-game > img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-hero-art {
    animation: hero-arrive 1.8s cubic-bezier(.2,.7,.2,1) both;
}

.product-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg, rgba(7,6,12,.86) 0%, rgba(9,8,14,.43) 46%, rgba(8,7,13,.07) 78%), linear-gradient(0deg, rgba(7,6,12,.88) 0%, transparent 58%);
}

.product-beach .product-hero-shade {
    background: linear-gradient(90deg, rgba(22,13,17,.75) 0%, rgba(20,12,16,.15) 58%, transparent 82%), linear-gradient(0deg, rgba(15,9,14,.85) 0%, transparent 56%);
}

.product-header {
    position: relative;
    z-index: 5;
}

.product-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100svh - 122px);
    padding-top: 5rem;
    padding-bottom: clamp(4rem, 7vw, 6.5rem);
    animation: content-arrive 1s .2s both;
}

.back-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .65rem;
    margin-bottom: clamp(2.5rem, 6vh, 5rem);
    color: rgba(255,255,255,.72);
    font-size: .86rem;
    transition: color .2s, transform .2s;
}

    .back-link:hover, .back-link:focus-visible {
        color: var(--white);
        transform: translateX(-3px);
    }

.product-eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.5rem;
    color: rgba(255,255,255,.77);
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

    .product-eyebrow span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 18px rgba(255,74,25,.8);
    }

.product-hero h1 {
    max-width: 1080px;
    margin: 0;
    font-size: clamp(5.2rem, 12vw, 11rem);
    font-weight: 680;
    line-height: .82;
    letter-spacing: -.072em;
}

.product-beach .product-hero h1 {
    max-width: 1120px;
    font-size: clamp(4.4rem, 9.7vw, 9.2rem);
}

.product-tagline {
    max-width: 650px;
    margin: 2rem 0 0;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.55;
    color: rgba(255,255,255,.82);
}

.product-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,.25);
}

    .product-hero-footer p {
        margin: 0;
        color: rgba(255,255,255,.65);
        font-size: .76rem;
        font-weight: 650;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .product-hero-footer a {
        display: inline-flex;
        align-items: center;
        gap: .8rem;
        font-weight: 650;
    }

        .product-hero-footer a span {
            color: var(--orange);
            font-size: 1.15rem;
        }

.product-hero > .ai-note {
    right: max(18px, 2.5vw);
    bottom: 16px;
}

.product-section {
    padding: clamp(7rem, 11vw, 11rem) 0;
}

.product-intro {
    background: #f4f1ec;
}

.product-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(4rem, 9vw, 10rem);
}

.product-intro h2, .product-section-heading h2 {
    margin: 2rem 0 0;
    max-width: 650px;
    font-size: clamp(3.2rem, 6vw, 6.4rem);
    font-weight: 650;
    line-height: .96;
    letter-spacing: -.06em;
}

.product-story {
    padding-top: 4.7rem;
}

    .product-story > p {
        color: #696270;
        font-size: 1.04rem;
        line-height: 1.8;
    }

    .product-story .product-lead {
        margin-top: 0;
        color: var(--ink);
        font-size: clamp(1.55rem, 2.4vw, 2.25rem);
        line-height: 1.4;
        letter-spacing: -.025em;
    }

.product-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 4rem 0 0;
    border-top: 1px solid rgba(21,19,31,.2);
}

    .product-facts div {
        padding: 1.25rem 1rem 0 0;
    }

    .product-facts dt {
        margin-bottom: .65rem;
        color: #817a86;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .product-facts dd {
        margin: 0;
        font-size: .92rem;
        line-height: 1.45;
    }

.product-features {
    overflow: hidden;
    background: #0e0c14;
    color: var(--white);
}

.product-beach .product-features {
    background: #087d8c;
}

.product-section-heading {
    display: grid;
    grid-template-columns: .5fr 1.5fr;
    align-items: start;
    gap: 3rem;
    margin-bottom: clamp(4rem, 8vw, 7rem);
}

    .product-section-heading h2 {
        margin: 0;
        max-width: 900px;
    }

.product-beach .product-features .kicker {
    color: #ffe5d8;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.18);
}

    .feature-grid article {
        position: relative;
        min-height: 360px;
        padding: 2rem clamp(1.5rem, 3vw, 3rem) 2rem 0;
        border-right: 1px solid rgba(255,255,255,.18);
    }

        .feature-grid article + article {
            padding-left: clamp(1.5rem, 3vw, 3rem);
        }

        .feature-grid article:last-child {
            border-right: 0;
        }

        .feature-grid article > span {
            color: var(--orange);
            font-size: .73rem;
            font-weight: 700;
            letter-spacing: .12em;
        }

.product-beach .feature-grid article > span {
    color: #ffdbcd;
}

.feature-grid h3 {
    margin: 8.5rem 0 1.2rem;
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    letter-spacing: -.04em;
}

.feature-grid p {
    max-width: 330px;
    margin: 0;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
}

.product-beach .feature-grid p {
    color: rgba(255,255,255,.75);
}

.product-statement {
    padding: clamp(7rem, 13vw, 13rem) 0;
    overflow: hidden;
    background: var(--orange);
    color: var(--ink);
}

    .product-statement .shell {
        display: grid;
        grid-template-columns: .35fr 1.65fr;
        gap: 4rem;
        align-items: start;
    }

    .product-statement img {
        width: clamp(74px, 8vw, 110px);
        filter: brightness(0) saturate(100%);
    }

    .product-statement p {
        max-width: 1020px;
        margin: 0;
        color: var(--white);
        font-size: clamp(3.2rem, 6.5vw, 7.1rem);
        font-weight: 650;
        line-height: .98;
        letter-spacing: -.06em;
    }

.next-game {
    position: relative;
    min-height: 72svh;
    display: grid;
    align-items: end;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
    background: #090810;
}

    .next-game > img {
        transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
    }

    .next-game:hover > img {
        transform: scale(1.025);
    }

.next-game-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(0deg, rgba(8,7,12,.92) 0%, rgba(8,7,12,.15) 76%), linear-gradient(90deg, rgba(8,7,12,.4), transparent 60%);
}

.next-game-content {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(4rem, 7vw, 7rem);
}

    .next-game-content p {
        margin: 0 0 1rem;
        color: var(--orange);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .next-game-content h2 {
        margin: 0;
        font-size: clamp(3.5rem, 8vw, 8rem);
        line-height: .9;
        letter-spacing: -.065em;
    }

    .next-game-content div > span {
        display: block;
        margin-top: 1.2rem;
        color: rgba(255,255,255,.68);
        font-size: 1rem;
    }

.next-game-arrow {
    flex: 0 0 auto;
    width: clamp(64px, 7vw, 94px);
    height: clamp(64px, 7vw, 94px);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    color: var(--orange);
    font-size: 1.8rem;
    transition: background .25s, color .25s, transform .25s;
}

.next-game-content:hover .next-game-arrow, .next-game-content:focus-visible .next-game-arrow {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
    transform: rotate(12deg);
}

.next-game > .ai-note {
    right: max(18px, 2.5vw);
}

.site-footer {
    background: #0e0c14;
    padding: 5rem 0 2rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--line);
}

    .footer-top img {
        width: min(220px, 42vw);
    }

    .footer-top p {
        margin: 0;
        color: rgba(255,255,255,.72);
        text-align: right;
        line-height: 1.5;
    }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    padding-top: 2rem;
    color: rgba(255,255,255,.45);
    font-size: .78rem;
}

    .footer-bottom p {
        margin: 0;
    }

    .footer-bottom nav {
        display: flex;
        gap: 2rem;
    }

    .footer-bottom a:hover {
        color: var(--white);
    }

@keyframes hero-arrive {
    from {
        opacity: 0;
        transform: scale(1.08);
    }

    to {
        opacity: 1;
        transform: scale(1.015);
    }
}

@keyframes content-arrive {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1000px) {
    .shell {
        width: min(100% - 3rem, 900px);
    }

    .hero-backdrop {
        background-position: 64% center;
    }

    .hero::after {
        background: linear-gradient(90deg, rgba(15,13,23,.96) 0%, rgba(15,13,23,.78) 50%, rgba(15,13,23,.2) 100%);
    }

    .hero-copy {
        width: min(620px, 70vw);
    }

    .section-heading {
        grid-template-columns: 1fr 1.8fr;
    }

        .section-heading > p:last-child {
            grid-column: 2;
        }

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

    .studio-copy {
        padding-top: 0;
        max-width: 760px;
    }

    .journal-heading {
        grid-template-columns: 1fr .65fr;
    }

    .product-hero-art {
        object-position: 58% center;
    }

    .product-beach .product-hero-art {
        object-position: 53% center;
    }

    .product-intro-grid {
        grid-template-columns: .8fr 1.2fr;
        gap: 4rem;
    }

    .product-section-heading {
        grid-template-columns: .38fr 1.62fr;
    }

    .feature-grid article {
        min-height: 330px;
    }
}

@media (max-width: 720px) {
    .shell {
        width: calc(100% - 2rem);
    }

    .section {
        padding: 6.5rem 0;
    }

    .site-header {
        height: 92px;
    }

    .brand {
        width: 170px;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-menu {
        display: block;
        z-index: 5;
    }

    .hero-content {
        min-height: calc(100svh - 92px);
        align-items: end;
        padding-bottom: 4rem;
    }

    .hero-backdrop {
        background-position: 66% center;
        opacity: .82;
    }

    .hero::after {
        background: linear-gradient(0deg, rgba(15,13,23,.98) 7%, rgba(15,13,23,.73) 55%, rgba(15,13,23,.3) 100%);
    }

    .hero-copy {
        width: 100%;
    }

    .eyebrow {
        font-size: .82rem;
        gap: .75rem;
    }

        .eyebrow span {
            width: 9px;
            height: 9px;
        }

    .hero h1 {
        margin: 2rem 0 1.3rem;
        font-size: clamp(3.3rem, 15vw, 5.5rem);
    }

    .hero-intro {
        max-width: 430px;
        font-size: 1rem;
    }

    .hero-actions {
        margin-top: 2rem;
    }

    .button {
        min-height: 53px;
        padding-inline: 1.35rem;
        font-size: .88rem;
    }

    .scroll-cue {
        display: none;
    }

    .section-heading {
        display: block;
    }

        .section-heading h2 {
            margin: 1.6rem 0;
        }

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

    .studio-section h2 br {
        display: none;
    }

    .principles > div {
        grid-template-columns: 34px 1fr;
    }

    .principles p {
        grid-column: 2;
    }

    .journal-heading {
        display: block;
    }

        .journal-heading > p,
        .journal-heading-copy {
            margin-top: 1.5rem;
        }

    .archive-intro {
        padding-top: 4.5rem;
        padding-bottom: 6rem;
    }

        .archive-intro h1 {
            font-size: clamp(4rem, 19vw, 6.5rem);
        }

        .archive-intro > p:last-child {
            margin-top: 2rem;
        }

    .journal-list > * {
        grid-template-columns: 1fr 42px;
        gap: .6rem 1rem;
        padding: 1.5rem 0;
    }

    .journal-type, .journal-date {
        grid-column: 1;
    }

    .journal-list h3 {
        grid-column: 1;
    }

    .journal-list > * > span {
        grid-column: 2;
        grid-row: 1 / 4;
    }

    .article-intro {
        padding-top: 4.8rem;
    }

    .article-back {
        margin-bottom: 3rem;
    }

    .article-intro h1 {
        font-size: clamp(3.6rem, 17vw, 5.8rem);
    }

    .article-deck {
        margin-top: 2rem;
    }

    .article-hero {
        width: 100%;
    }

        .article-hero img {
            min-height: 420px;
            aspect-ratio: auto;
            border-radius: 0;
        }

        .article-hero figcaption {
            padding-inline: 1rem;
        }

        .article-hero .ai-note {
            bottom: 2.9rem;
        }

    .article-layout {
        grid-template-columns: 1fr;
        gap: 4rem;
        padding-top: 5rem;
    }

    .article-aside {
        position: static;
    }

    .article-body > h2 {
        margin-top: 4rem;
    }

    .article-body blockquote {
        margin: 3.5rem 0;
    }

    .article-media {
        margin: 3.5rem -1rem;
    }

        .article-media img,
        .article-media video,
        .article-media iframe {
            border-radius: 0;
        }

        .article-media figcaption {
            padding-inline: 1rem;
        }

    .article-status {
        margin-inline: -1rem;
    }

        .article-status > div {
            grid-template-columns: 1fr;
        }

        .article-status article + article {
            padding: 1.7rem 0 0;
            border-left: 0;
            border-top: 1px solid var(--line);
            margin-top: 1.7rem;
        }

    .press-section {
        min-height: 78svh;
    }

    .press-path {
        opacity: .5;
        right: -35vw;
    }

    .footer-top {
        align-items: start;
        flex-direction: column;
        gap: 2rem;
    }

        .footer-top p {
            text-align: left;
        }

    .footer-bottom {
        align-items: start;
        flex-direction: column-reverse;
    }

        .footer-bottom nav {
            flex-wrap: wrap;
            gap: 1.2rem 1.6rem;
        }

    .product-hero-content {
        min-height: calc(100svh - 92px);
        padding-top: 4rem;
        padding-bottom: 4.8rem;
    }

    .product-hero-art {
        object-position: 62% center;
    }

    .product-beach .product-hero-art {
        object-position: 50% center;
    }

    .product-hero-shade, .product-beach .product-hero-shade {
        background: linear-gradient(0deg, rgba(8,7,13,.96) 0%, rgba(8,7,13,.55) 55%, rgba(8,7,13,.14) 100%);
    }

    .back-link {
        margin-bottom: 2.2rem;
    }

    .product-eyebrow {
        font-size: .68rem;
        line-height: 1.45;
    }

    .product-hero h1 {
        font-size: clamp(4.5rem, 23vw, 7rem);
    }

    .product-beach .product-hero h1 {
        font-size: clamp(3.7rem, 17vw, 6rem);
        line-height: .88;
    }

    .product-tagline {
        margin-top: 1.4rem;
        font-size: 1rem;
    }

    .product-hero-footer {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 2rem;
    }

    .product-hero > .ai-note {
        bottom: 10px;
    }

    .product-section {
        padding: 6.5rem 0;
    }

    .product-intro-grid, .product-section-heading, .product-statement .shell {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

        .product-intro h2, .product-section-heading h2 {
            margin-top: 1.5rem;
            font-size: clamp(3.1rem, 15vw, 5rem);
        }

    .product-story {
        padding-top: 0;
    }

        .product-story .product-lead {
            font-size: 1.45rem;
        }

    .product-facts {
        grid-template-columns: 1fr;
        margin-top: 3rem;
    }

        .product-facts div {
            display: grid;
            grid-template-columns: .7fr 1.3fr;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(21,19,31,.14);
        }

        .product-facts dt {
            margin: 0;
        }

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

        .feature-grid article, .feature-grid article + article {
            min-height: 0;
            padding: 1.8rem 0 2rem;
            border-right: 0;
            border-bottom: 1px solid rgba(255,255,255,.18);
        }

        .feature-grid h3 {
            margin: 3.5rem 0 1rem;
        }

    .product-statement .shell {
        gap: 3rem;
    }

    .product-statement p {
        font-size: clamp(3.1rem, 14vw, 5.2rem);
    }

    .next-game {
        min-height: 68svh;
    }

        .next-game > img {
            object-position: 58% center;
        }

    .next-game-content {
        align-items: flex-end;
        margin-bottom: 5.2rem;
    }

        .next-game-content h2 {
            font-size: clamp(3.4rem, 16vw, 5.8rem);
        }

    .next-game-arrow {
        width: 60px;
        height: 60px;
    }

    .next-game > .ai-note {
        bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}