:root {
    color-scheme:light;
    --ink:#292c29;
    --muted:#596155;
    --paper:#f6f2e8;
    --cream:#ece7da;
    --metal:#242724;
    --yellow:#ffc52b;
    --line:#cbc6b8;
    --olive:#4c5c50;
    font-family:"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none;
    --text-body:clamp(1rem,.95rem + .18vw,1.125rem);
    --text-small:clamp(.875rem,.83rem + .12vw,1rem);
    --text-lead:clamp(1.0625rem,1rem + .2vw,1.25rem);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:24px;
}

body {
    margin:0;
    min-width:280px;
    min-height:100svh;
    display:flex;
    flex-direction:column;
}

main {
    flex:1;
    min-width:0;
}

img {
    max-width:100%;
}

a {
    color:inherit;
    text-underline-offset:5px;
    text-decoration-thickness:1px;
}

a:hover {
    color:#835300;
}

a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible {
    outline:3px solid #ab6b00;
    outline-offset:5px;
}

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

h2,h3 {
    font-family:"Arial Narrow","Bahnschrift SemiCondensed","Segoe UI",sans-serif;
}

h2 {
    font-size:clamp(32px,3.6vw,52px);
    line-height:1.1;
    letter-spacing:-.035em;
    font-weight:800;
    margin-bottom:24px;
}

h3 {
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.025em;
}

p {
    line-height:1.75;
}

figure {
    margin:0;
}

.skip-link {
    position:absolute;
    top:8px;
    left:16px;
    transform:translateY(-200%);
    z-index:10;
    padding:12px;
    background:var(--yellow);
    color:var(--ink);
}

.skip-link:focus {
    transform:none;
}

.site-header {
    min-height:86px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:16px clamp(20px,5vw,88px);
    background:#202320;
    color:#f6f2e8;
    border-bottom:1px solid #ffffff26;
}

.site-name {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    font-size:17px;
    font-weight:850;
    letter-spacing:.025em;
    line-height:1.2;
}

.site-name img {
    flex-shrink:0;
}

.site-name small {
    display:block;
    color:var(--yellow);
    font-size:10px;
    letter-spacing:.28em;
    margin-top:5px;
}

.site-header nav {
    display:flex;
    gap:28px;
}

.site-header nav a {
    font-size:var(--text-small);
    text-decoration:none;
    border-bottom:2px solid transparent;
    padding:10px 0;
}

.site-header nav a[aria-current] {
    border-color:var(--yellow);
}

.site-header a:hover {
    color:var(--yellow);
}

.site-header a:focus-visible,.hero a:focus-visible,footer a:focus-visible,.journal-callout a:focus-visible {
    outline-color:var(--yellow);
}

.hero {
    position:relative;
    display:grid;
    grid-template-columns:49% 51%;
    background:var(--metal);
    color:var(--paper);
    min-height:660px;
}

.branding {
    position:relative;
    padding:44px clamp(24px,4vw,76px) 40px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    background-image:radial-gradient(#ffffff0c .7px,transparent .7px);
    background-size:5px 5px;
}

.eyebrow {
    font-size:11px;
    font-weight:750;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--olive);
    line-height:1.6;
    margin-bottom:20px;
}

.branding .eyebrow {
    color:var(--yellow);
    font-size:10px;
}

.branding h1 {
    width:100%;
    max-width:480px;
    margin:0;
}

.logo {
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 12px 14px #0005);
}

.tagline {
    font-size:var(--text-lead);
    font-weight:650;
    line-height:1.5;
    margin:22px 0 14px;
    text-wrap:balance;
}

.hero-description {
    font-size:var(--text-body);
    color:#d0d1c6;
    max-width:40ch;
    margin-bottom:26px;
    line-height:1.7;
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:20px 24px;
    flex-wrap:wrap;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    padding:15px 22px;
    min-height:48px;
    background:var(--yellow);
    color:#242724;
    border:1px solid #ffd66c;
    box-shadow:0 4px 0 #9c710b;
    text-decoration:none;
    font-size:var(--text-small);
    font-weight:800;
}

.button:hover {
    background:#ffda72;
    color:#242724;
    box-shadow:0 4px 0 #b2861d;
}

.button:active {
    transform:translateY(2px);
    box-shadow:0 2px 0 #9c710b;
}

.hero-link {
    font-size:var(--text-small);
    color:#f6f2e8;
}

.hero-link:hover {
    color:var(--yellow);
}

.announcement {
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    margin:30px 0 0;
    color:#c9cbbd;
}

.announcement span {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--yellow);
    margin-right:8px;
}

.artwork {
    position:relative;
    overflow:hidden;
    min-height:100%;
}

.artwork>img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:48% center;
    position:absolute;
    inset:0;
}

.artwork:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#171d18dd,transparent 45%);
    pointer-events:none;
}

.art-label {
    position:absolute;
    bottom:30px;
    left:32px;
    right:24px;
    color:white;
    z-index:1;
    font-size:17px;
    font-weight:650;
    margin:0;
    text-shadow:0 2px 4px #000;
}

.art-label small {
    display:block;
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#e8dfc4;
    margin-top:4px;
}

.spec-strip {
    padding:23px clamp(20px,5vw,88px);
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:#e7b633;
    color:#282a25;
    border-top:5px solid transparent;
    border-image:repeating-linear-gradient(125deg,#282a25 0 12px,#e7b633 12px 24px) 5;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:750;
}

.spec-strip span:before {
    content:"+";
    margin-right:12px;
}

.game-section {
    max-width:1300px;
    margin:auto;
    padding:76px clamp(24px,5vw,80px);
}

.section-heading {
    max-width:820px;
    margin-bottom:34px;
}

.section-heading>p:last-child {
    max-width:60ch;
    font-size:var(--text-body);
    color:var(--muted);
    line-height:1.75;
}

.steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.step {
    position:relative;
    background:var(--cream);
    padding:30px 28px;
    border:1px solid var(--line);
    border-top:4px solid #e9b52b;
    box-shadow:3px 4px 0 #ded9cb;
}

.step:after {
    content:"";
    position:absolute;
    top:14px;
    right:14px;
    width:6px;
    height:6px;
    background:#777b70;
    border-radius:50%;
    box-shadow:inset 1px 1px 1px #0006;
}

.step-number {
    display:block;
    color:#735015;
    font-size:11px;
    font-weight:750;
    letter-spacing:.14em;
    margin-bottom:24px;
}

.step p {
    font-size:var(--text-body);
    color:#525a50;
    margin-bottom:0;
    line-height:1.75;
}

.feature-section {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:44px;
    padding:56px max(24px,calc((100vw - 1140px)/2));
    border-block:1px solid var(--line);
    background-color:#e5e0d3;
    background-image:linear-gradient(#c6c1b333 1px,transparent 1px),linear-gradient(90deg,#c6c1b333 1px,transparent 1px);
    background-size:36px 36px;
}

.feature-art {
    max-width:420px;
    margin:auto;
}

.feature-art img {
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 14px 10px #494c3820);
}

.feature-copy {
    max-width:540px;
}

.feature-copy p:not(.eyebrow) {
    font-size:var(--text-body);
    color:#525a50;
    line-height:1.75;
    max-width:50ch;
}

.text-link {
    display:inline-block;
    font-size:14px;
    font-weight:750;
    line-height:1.8;
}

.text-link span {
    margin-left:8px;
}

.screenshot-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px 24px;
}

.screenshot-grid figure {
    min-width:0;
    background:var(--cream);
    border:1px solid var(--line);
    box-shadow:3px 4px 0 #ded9cb;
}

.screenshot-grid a {
    display:block;
    background:#242724;
}

.screenshot-grid img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:contain;
}

.screenshot-grid figcaption {
    padding:16px 0 0;
    font-size:var(--text-small);
    line-height:1.65;
}

.screenshot-grid figcaption span {
    display:block;
    font-size:var(--text-body);
    letter-spacing:.13em;
    font-weight:750;
    color:#735015;
    margin-bottom:8px;
}

.image-note {
    font-size:var(--text-small);
    color:var(--muted);
    margin:20px 0 0;
    max-width:65ch;
}

.journal-callout {
    padding:48px clamp(24px,7vw,120px);
    background:var(--metal);
    color:var(--paper);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-top:6px solid #d7a627;
}

.journal-callout>div {
    max-width:660px;
}

.journal-callout .eyebrow {
    color:var(--yellow);
}

.journal-callout h2 {
    font-size:clamp(30px,3vw,42px);
}

.journal-callout p:last-child {
    color:#c9cbbd;
    margin-bottom:0;
    font-size:var(--text-body);
    line-height:1.75;
    max-width:58ch;
}

.journal-callout .button {
    flex-shrink:0;
}

.videos {
    max-width:1300px;
    width:100%;
    margin:auto;
    padding:64px clamp(24px,5vw,80px);
}

.video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:28px;
}

.video img {
    width:100%;
    height:auto;
    display:block;
}

.video h3 {
    font-size:20px;
    margin-top:14px;
}

.video time {
    font-size:13px;
}

footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding:34px clamp(24px,5vw,88px);
    background:#1c1f1c;
    color:#cccfc2;
    border-top:1px solid #ffffff26;
}

footer a:hover {
    color:var(--yellow);
}

.footer-brand {
    display:flex;
    gap:12px;
    align-items:center;
    text-decoration:none;
    font-size:var(--text-small);
    font-weight:700;
}

.footer-brand small {
    display:block;
    font-size:var(--text-small);
    font-weight:400;
    color:#afb4a6;
    margin-top:5px;
}

footer p,footer>div>a {
    font-size:var(--text-small);
    line-height:1.7;
    margin:0;
}

footer>div {
    text-align:right;
}

.journal-main {
    display:block;
    width:min(1120px,100% - 80px);
    margin:0 auto;
    padding:72px 0 96px;
}

.journal-intro {
    max-width:900px;
    margin-bottom:32px;
    border-left:5px solid #dca622;
    padding-left:28px;
}

.journal-main h1 {
    font-family:"Arial Narrow","Bahnschrift SemiCondensed","Segoe UI",sans-serif;
    font-size:clamp(34px,4.5vw,58px);
    line-height:1.12;
    letter-spacing:-.035em;
    font-weight:800;
    margin:0;
    text-wrap:balance;
}

.journal-subtitle {
    max-width:660px;
    margin:24px 0 0;
    font-size:19px;
    color:var(--muted);
}

.history-note {
    font-size:13px;
    color:var(--muted);
    margin-bottom:36px;
    max-width:740px;
}

.journal-entries {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}

.journal-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--cream);
    border:1px solid var(--line);
    border-top:3px solid #dca622;
    box-shadow:3px 4px 0 #ded9cb;
}

.journal-card-image {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#242724;
    aspect-ratio:16/9;
    overflow:hidden;
}

.journal-card img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.journal-card-copy {
    padding:30px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.entry-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    align-items:center;
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
    margin:0 0 20px;
}

.entry-meta span {
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.journal-card h2 {
    font-size:clamp(25px,2.4vw,32px);
    line-height:1.2;
    letter-spacing:-.025em;
    margin:0 0 18px;
}

.journal-card h2 a {
    text-decoration:none;
}

.entry-excerpt {
    font-size:15px;
    line-height:1.8;
    margin:0 0 24px;
}

.journal-card .text-link {
    margin-top:auto;
    align-self:flex-start;
}

.journal-card:focus-within {
    border-color:#976300;
}

.article-heading {
    max-width:960px;
    margin:0 auto 40px;
    border-bottom:2px solid #dca622;
    padding-bottom:32px;
}

.journal-back {
    display:inline-block;
    font-size:14px;
    margin-bottom:36px;
}

.article-heading h1 {
    max-width:920px;
}

.article-hero {
    max-width:760px;
    margin:0 auto 48px;
}

.article-hero img {
    display:block;
    width:100%;
    height:auto;
}

.journal-main figcaption {
    margin-top:14px;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
}

.article-body,.article-end {
    max-width:680px;
    margin:0 auto;
}

.article-body {
    font-size:18px;
    line-height:1.85;
    overflow-wrap:anywhere;
}

.article-body p {
    margin:0 0 26px;
    line-height:inherit;
}

.article-body h2,.article-body h3,.article-body h4 {
    line-height:1.3;
    font-weight:750;
    margin:44px 0 20px;
    letter-spacing:-.02em;
}

.article-body h2 {
    font-size:30px;
}

.article-body h3 {
    font-size:25px;
}

.article-body h4 {
    font-size:21px;
}

.article-body strong {
    font-weight:700;
}

.article-body th {
    background:var(--cream);
}

.article-end {
    border-top:2px solid #dca622;
    padding-top:32px;
    margin-top:48px;
}

.article-pagination {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:24px;
    margin-bottom:32px;
}

.article-pagination a {
    font-size:16px;
    line-height:1.5;
    padding:18px;
    background:var(--cream);
    border:1px solid var(--line);
}

.article-pagination span {
    display:block;
    font-size:11px;
    margin-bottom:8px;
    color:var(--muted);
}

.journal-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:24px;
    margin:40px 0;
}

.journal-gallery figure,.journal-video {
    margin:0;
    min-width:0;
}

.journal-gallery img,.journal-video video {
    display:block;
    width:100%;
    height:auto;
}

.journal-video {
    margin:40px 0;
}

.journal-video video {
    background:var(--metal);
}

@media(min-width:1600px) {
    .hero {
        min-height:720px;
    }
    .branding {
        padding-left:max(64px,calc((100vw - 1440px)/2));
    }
}

@media(max-width:1000px) {
    .hero {
        grid-template-columns:52% 48%;
    }
    .branding {
        padding:44px 28px;
    }
    .hero-actions {
        gap:20px;
    }
    .step {
        padding:26px 22px;
    }
    .feature-section {
        gap:32px;
    }
    .journal-callout {
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:800px) {
    .site-header {
        min-height:76px;
        padding:14px 24px;
    }
    .site-name {
        font-size:14px;
        gap:8px;
    }
    .site-name img {
        width:34px;
        height:34px;
    }
    .site-header nav {
        gap:20px;
    }
    .hero {
        grid-template-columns:1fr;
        min-height:auto;
    }
    .branding {
        align-items:center;
        text-align:center;
        padding:42px 24px;
    }
    .branding h1 {
        max-width:440px;
    }
    .hero-description {
        max-width:510px;
    }
    .hero-actions {
        justify-content:center;
    }
    .artwork {
        min-height:0;
    }
    .artwork>img {
        position:static;
        height:auto;
        aspect-ratio:16/9;
        object-fit:cover;
    }
    .art-label {
        bottom:22px;
        left:24px;
        font-size:15px;
    }
    .spec-strip {
        justify-content:center;
        font-size:10px;
        padding:18px 24px;
        gap:10px 22px;
    }
    .game-section {
        padding:60px 24px;
    }
    .steps {
        grid-template-columns:1fr;
        gap:20px;
    }
    .step-number {
        margin-bottom:20px;
    }
    .step p {
        max-width:640px;
    }
    .feature-section {
        grid-template-columns:1fr;
        padding:48px 24px;
        gap:32px;
    }
    .feature-art {
        width:min(75%,340px);
    }
    .feature-copy {
        max-width:680px;
        margin:auto;
        width:100%;
    }
    .screenshot-grid {
        grid-template-columns:1fr;
    }
    .journal-main {
        width:calc(100% - 40px);
        padding:44px 0 64px;
    }
    .journal-entries {
        grid-template-columns:1fr;
        gap:28px;
    }
    .journal-card-copy {
        padding:28px 24px;
    }
    .journal-subtitle {
        font-size:17px;
    }
    .article-body {
        font-size:17px;
    }
    .article-heading {
        margin-bottom:28px;
    }
    .journal-back {
        margin-bottom:28px;
    }
    .article-hero {
        margin-bottom:36px;
    }
    footer {
        flex-direction:column;
        align-items:flex-start;
        gap:24px;
    }
    footer>div {
        text-align:left;
    }
}

@media(max-width:360px) {
    .site-header {
        padding:12px 16px;
        gap:12px;
    }
    .site-name {
        font-size:11px;
    }
    .site-name img {
        width:28px;
        height:28px;
    }
    .site-name small {
        font-size:8px;
    }
    .site-header nav {
        gap:14px;
    }
    .site-header nav a {
        font-size:var(--text-small);
    }
    .branding {
        padding:34px 20px;
    }
    .branding .eyebrow {
        font-size:9px;
    }
    .tagline {
        font-size:17px;
    }
    .hero-description {
        font-size:var(--text-body);
    }
    .hero-actions {
        gap:22px;
    }
    .journal-intro {
        padding-left:18px;
    }
    .journal-main h1 {
        font-size:32px;
    }
    .journal-card-copy {
        padding:24px 20px;
    }
    .footer-brand {
        font-size:var(--text-small);
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important;
    }
}

/* Authentic captures: intentional hero crop; gallery and full-size views retain complete framing. */
.gameplay-hero {
    min-width:0;
    display:grid;
    flex-direction:column;
    justify-content:stretch;
    min-height:0;
    padding:0;
    background:#1c1f1c;
    grid-template-rows:minmax(0,1fr) auto;
}
.gameplay-hero:after { content:none; }
.gameplay-link { display:block; min-width:0; }
.gameplay-link img {
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}
.gameplay-hero .art-label {
    position:static;
    padding:18px 28px;
    color:var(--paper);
    text-shadow:none;
    font-size:var(--text-small);
    line-height:1.5;
}
.gameplay-hero .art-label small { color:#c9cbbd; }
.gameplay-feature { width:100%; max-width:none; }
.gameplay-feature img { filter:none; }
.gameplay-feature figcaption {
    font-size:var(--text-small);
    line-height:1.6;
    color:var(--muted);
    margin-top:12px;
}
.gallery-intro {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 24px;
    font-size:var(--text-small);
    color:var(--muted);
    margin-bottom:22px;
}
.gallery-intro span { font-weight:650; color:var(--ink); }
.screenshot-grid { gap:28px 24px; }
.screenshot-grid figure { background:none; border:0; box-shadow:none; }
.screenshot-featured { grid-column:1 / -1; }
.screenshot-grid .gameplay-link img { aspect-ratio:auto; }
.screenshot-grid figcaption { padding:16px 0 0; color:var(--muted); font-size:var(--text-small); }
.screenshot-grid figcaption span { color:var(--ink); font-size:var(--text-body); letter-spacing:0; margin-bottom:4px; }
.gameplay-link:focus-visible { outline-offset:5px; }
.gameplay-link:hover { outline:2px solid #9b760f; outline-offset:3px; }
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}
.image-viewer {
    width:min(1720px,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    max-height:calc(100svh - 32px);
    padding:0;
    overflow:auto;
    border:1px solid #606456;
    background:var(--metal);
    color:var(--paper);
}
.image-viewer::backdrop { background:#0b0e0be8; }
.viewer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 24px;
}
.viewer-header h2 { font-size:22px; line-height:1.3; letter-spacing:-.02em; margin:0; }
.image-viewer button {
    min-height:44px;
    padding:10px 14px;
    border:1px solid #7d8272;
    background:transparent;
    color:var(--paper);
    font:inherit;
    font-size:13px;
    cursor:pointer;
}
.image-viewer button:hover { background:#41463e; }
.image-viewer button:focus-visible,.image-viewer a:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.viewer-close { flex-shrink:0; }
.viewer-close span { font-size:20px; margin-left:8px; }
.viewer-image { display:flex; align-items:center; justify-content:center; background:#151815; }
.viewer-image img { width:auto; height:auto; max-width:100%; max-height:65svh; object-fit:contain; }
.viewer-details { padding:18px 24px 0; }
.viewer-details p { margin:0; font-size:14px; }
.viewer-details .viewer-note { font-size:11px; color:#c9cbbd; margin-top:6px; }
.viewer-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:20px 24px; }
.viewer-controls span { font-size:12px; }
.viewer-controls a { margin-left:auto; font-size:13px; padding:12px 0; }
.viewer-controls a:hover { color:var(--yellow); }
@media(max-width:800px) {
    .gameplay-hero { padding:0; }
    .gameplay-feature { width:100%; max-width:none; }
    .gameplay-hero .art-label { padding:16px 24px; font-size:var(--text-small); }
    .gameplay-hero .art-label small { font-size:9px; }
}
@media(max-width:480px) {
    .viewer-header { padding:12px; gap:12px; }
    .viewer-header h2 { font-size:18px; }
    .viewer-details { padding:14px 12px 0; }
    .viewer-controls { padding:16px 12px; gap:10px; }
    .viewer-controls a { flex-basis:100%; margin-left:0; }
}

/* Full-height hero crop preserves source geometry; its full-size link shows every pixel. */
.gameplay-hero > .gameplay-link { position:relative; min-height:0; }
.gameplay-hero > .gameplay-link img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:59% 50%;
}
.gameplay-hero .art-label small { font-size:12px; letter-spacing:.09em; }
.screenshot-grid .screenshot-featured { grid-column:1 / -1; }
.screenshot-featured figcaption { border-top:2px solid #dca622; }
.home-page .text-link { font-size:var(--text-small); }
.home-page .gameplay .section-heading h2 { max-width:780px; text-wrap:balance; }
@media(max-width:1000px) and (min-width:601px) {
    .screenshot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .screenshot-grid figure:last-child { grid-column:1 / -1; max-width:calc(50% - 12px); }
}
@media(max-width:800px) {
    .gameplay-hero > .gameplay-link { aspect-ratio:16 / 10; }
    .gameplay-hero > .gameplay-link img { object-position:59% 52%; }
    .home-page .game-section { padding:52px 24px; }
    .home-page .feature-section { padding:44px 24px; gap:28px; }
    .home-page .journal-callout { padding:40px 24px; }
    .hero-description { font-size:var(--text-body); }
}
@media(max-width:600px) {
    .screenshot-grid { grid-template-columns:1fr; gap:28px; }
    .gameplay-hero > .gameplay-link { aspect-ratio:4 / 3; }
    .gameplay-hero > .gameplay-link img { object-position:61% 52%; }
    .home-page .branding { padding:34px 24px 36px; }
    .home-page .branding h1 { max-width:380px; }
    .home-page .tagline { margin-top:20px; }
    .home-page .step { padding:26px 24px; }
}

/* Proposed public beta navigation; applied only after final activation approval. */
.site-header-beta-open .nav-beta{color:var(--yellow)}
@media(max-width:600px){
 .site-header-beta-open{flex-wrap:wrap;gap:8px}
 .site-header-beta-open nav{width:100%;justify-content:flex-end;gap:20px}
 .site-header-beta-open nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
}