/* Canonical tokens. DESIGN.md mirrors these values and their roles. */
:root {
    --bg-primary: #0d0e0f;
    --bg-surface: #141618;
    --bg-elevated: #1c1f22;
    --text-primary: #e8e4dc;
    --text-secondary: #b2afa9;
    --text-tertiary: #96938e;
    --accent: #c8a96e;
    --accent-hover: #dfc28e;
    --accent-dim: #7a6540;
    --border: #686b70;
    --mines-accent: #8ecce9;
    --horizon-accent: #c7b69e;
    --signal-accent: #afbfc1;
    --scrollbar-thumb: #777b80;
    --scrollbar-hover: #a4a8ad;
    --scrollbar-active: #c8a96e;
    --font-body: Arial, Helvetica, sans-serif;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-utility: 'DM Mono', monospace;
    --shell: 1080px;
    --section-gap: 3.5rem;
    --header-h: 4.5rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); scrollbar-gutter: stable; }
* { scrollbar-width: auto; scrollbar-color: var(--scrollbar-thumb) var(--bg-primary); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 3px solid var(--bg-primary); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scrollbar-active); }
body { margin: 0; min-height: 100vh; font: 400 1rem/1.7 var(--font-body); color: var(--text-primary); background: var(--bg-primary); }
h1, h2, h3 { margin: 0; font-family: var(--font-body); line-height: 1.17; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 500; }
h3 { font-size: 1.55rem; font-weight: 500; }
p, figure, blockquote { margin: 0; }
p { max-width: 65ch; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .25em; transition: color .18s; cursor: pointer; }
a:hover { color: var(--accent-hover); }
a:active { color: var(--text-primary); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.shell { width: min(calc(100% - 3rem), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; top: .6rem; left: 1rem; z-index: 100; padding: .7rem 1rem; color: var(--bg-primary); background: var(--accent); transform: translateY(-180%); }
.skip-link:focus { transform: none; color: var(--bg-primary); }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg-primary); border-bottom: 1px solid var(--border); }
.site-header__inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand strong { font: 400 1.4rem/1.2 var(--font-display); color: var(--text-primary); white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: .3rem 1.4rem; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); font: 400 .75rem/1.4 var(--font-utility); letter-spacing: .035em; text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .6em; }
.menu-toggle.button { display: none; }
.hero { padding: 2.25rem 0 1.5rem; }
.hero h1 { font-size: clamp(3.1rem, 5.2vw, 4.5rem); letter-spacing: -.045em; line-height: 1.05; }
.hero h1 em { font: italic 400 1.12em/1 var(--font-display); color: var(--accent); }
.hero__lead { color: var(--text-secondary); margin-top: .9rem; font-size: 1.125rem; }
.section-label, .eyebrow, .game-card__status { display: block; margin-bottom: .8rem; font: 400 .7rem/1.6 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 48px; padding: .75rem 1.15rem; border: 1px solid var(--accent); border-radius: 0; background: transparent; color: var(--accent); font: 600 .9rem/1.5 var(--font-body); text-decoration: none; transition: color .18s, background .18s, border-color .18s; text-align: center; }
.button:hover { color: var(--bg-primary); background: var(--accent-hover); border-color: var(--accent-hover); }
.button--primary { color: var(--bg-primary); background: var(--accent); }
.button--primary:hover { color: var(--bg-primary); background: var(--accent-hover); }
.button:active { background: var(--text-primary); color: var(--bg-primary); }
.button--ghost { border-color: var(--border); color: var(--text-primary); }
.button--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-elevated); }
.button:disabled { cursor: default; opacity: .6; }
.text-link { display: inline-block; text-decoration: underline; text-decoration-color: var(--accent-dim); }
.text-link:hover { text-decoration-color: currentColor; }
.text-link span, .button span { margin-left: .25rem; }
.quiet-link { color: var(--text-secondary); font-size: .9rem; }
.section-link { margin-top: 1.5rem; }
.section { padding-block: var(--section-gap); }
.section--dense { padding-top: 0; }
.section--featured { padding-bottom: calc(var(--section-gap) / 2); }
.section--development { padding-top: calc(var(--section-gap) / 2); }
.section--with-divider { border-top: 1px solid var(--border); }
.section__header { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; margin-bottom: 1.7rem; }
.section__header--single { grid-template-columns: 1fr; }
.section__copy, .section-copy, .detail-card p, .game-card p, .highlight p, .legal-copy p { color: var(--text-secondary); }
.section-copy p + p, .detail-card p + p, .legal-copy p + p { margin-top: 1rem; }
.section-copy h2 { color: var(--text-primary); margin-bottom: 1rem; }
.two-column { display: grid; grid-template-columns: .85fr 1.4fr; gap: 4rem; align-items: start; }
.two-column--featured { align-items: center; }
.featured-game { display: grid; grid-template-columns: 1.5fr 1fr; border: 1px solid var(--border); background: var(--bg-surface); }
.featured-game__copy { padding: 1.75rem 2rem; align-self: center; }
.featured-game__copy h2 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.featured-game__description { color: var(--text-secondary); margin-top: 1rem; }
.featured-game__copy > .quiet-link { display: inline-block; margin-top: 1.2rem; }
/* Frame source rows 300–920 of the original 1024×1536 poster: the pulse
 * stays intact and the lettering below the frame is excluded in full.
 * The image scales uniformly; only this media frame clips its overflow. */
.featured-game__art {
    --art-source-height: 1536;
    --art-crop-top: 300;
    --art-crop-height: 620;
    position: relative;
    overflow: hidden;
    margin: 0;
    border-left: 1px solid var(--border);
    min-width: 0;
    min-height: 350px;
    background: var(--bg-primary);
}
.featured-game__art img {
    position: absolute;
    top: calc(-100% * var(--art-crop-top) / var(--art-crop-height));
    left: 0;
    width: 100%;
    height: calc(100% * var(--art-source-height) / var(--art-crop-height));
    object-fit: cover;
    object-position: center top;
}
figcaption { font: 400 .65rem/1.6 var(--font-utility); color: var(--text-secondary); padding: .6rem .9rem; }
.upcoming-grid, .detail-grid, .highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.game-grid, .stack-grid { display: grid; gap: 1.5rem; }
.game-card, .detail-card, .highlight, .legal-copy { padding: 1.75rem; background: var(--bg-surface); border: 1px solid var(--border); min-width: 0; }
.game-card { display: flex; flex-direction: column; align-items: start; position: relative; }
.game-card .game-card__status { color: var(--text-secondary); }
.game-card__motif { width: 100%; margin: .25rem 0 1.3rem; color: var(--text-tertiary); }
.game-card__motif svg { display: block; width: 100%; height: 64px; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.game-card__motif .game-card__motif-marker { stroke: var(--text-primary); stroke-width: 1.75; }
.game-card h3 { margin-bottom: .8rem; }
.game-card .text-link { margin-top: auto; padding-top: 1.1rem; }
.catalogue-feature { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; background: var(--bg-surface); border: 1px solid var(--border); padding: 1.75rem; }
.catalogue-feature img { width: 220px; aspect-ratio: 2/3; object-fit: cover; }
.catalogue-feature h3 { font-size: 2.5rem; margin-bottom: 1rem; }
.catalogue-feature p { color: var(--text-secondary); }
.page-hero { padding: 3.5rem 0 2.75rem; }
.page-hero__inner { max-width: 750px; }
.page-hero__layout { display: grid; gap: 2rem; }
.page-hero__layout--game { grid-template-columns: 1.5fr .9fr; align-items: center; gap: 4rem; }
.page-hero__lead, .page-hero__summary { font-size: 1.125rem; color: var(--text-secondary); margin-top: 1rem; max-width: 60ch; }
.breadcrumb { display: inline-block; margin-bottom: 1.5rem; }
.game-art { border: 1px solid var(--border); }
.game-art img { width: 100%; max-height: 490px; object-fit: cover; }
.game-facts { display: grid; gap: .7rem; margin: 1.5rem 0 0; }
.game-facts > div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; }
.game-facts dt { font: 400 .75rem/1.7 var(--font-utility); color: var(--text-tertiary); }
.game-facts dd { margin: 0; color: var(--text-secondary); font-size: .9rem; }
.support-note { font-size: .9rem; color: var(--text-secondary); margin-top: 1rem; }
.detail-card h2, .highlight h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.detail-card h3 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }
.feature-list { padding-left: 1.2rem; color: var(--text-secondary); margin-bottom: 0; }
.feature-list li + li { margin-top: .4rem; }
.link-stack { display: flex; flex-direction: column; align-items: start; gap: .75rem; margin-top: 1.25rem; }
.reading-width { max-width: 800px; }
.art-panel { min-height: 200px; position: relative; background: var(--bg-surface); border: 1px solid var(--border); overflow: hidden; }
.art-panel__pulse { position: absolute; border: 1px solid var(--accent-dim); border-radius: 50%; }
.art-panel__pulse--one { inset: 10% 25%; }
.art-panel__pulse--two { inset: 25% 35%; }
.art-panel__marker { position: absolute; inset: 45% auto auto 48%; width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent); }
.site-footer { margin-top: 1rem; padding: 2.5rem 0 1.25rem; background: var(--bg-surface); border-top: 1px solid var(--border); }
.site-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.site-footer__title { font: 400 1.6rem/1.3 var(--font-display); }
.site-footer__text { margin-top: .65rem; color: var(--text-secondary); font-size: .9rem; }
.footer-nav { display: flex; flex-wrap: wrap; align-content: start; justify-content: end; gap: .5rem 1.5rem; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; font-size: .9rem; color: var(--text-secondary); }
.footer-nav a:hover { color: var(--accent); }
.site-footer__bottom { padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: .8rem; }
.cookie-banner { position: fixed; inset: auto 0 0; z-index: 50; background: var(--bg-elevated); border-top: 1px solid var(--border); }
.cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.cookie-banner__text { color: var(--text-secondary); font-size: .8rem; }
.cookie-banner__actions { display: flex; gap: .75rem; flex-shrink: 0; }
/* Never make visibility depend on JavaScript, observer thresholds, or animation completion. */
.fade-in { opacity: 1; transform: none; }
.is-revealing { animation: section-entry .4s ease-out both; }
@keyframes section-entry { from { transform: translateY(8px); } to { transform: none; } }
/* Keep the opening compact when browser chrome reduces laptop content height. */
@media (min-width: 761px) and (max-height: 800px) {
    .hero { padding-block: 1.5rem 1.25rem; }
    .hero h1 { font-size: clamp(3rem, 4.5vw, 3.75rem); }
}
@media (max-width: 900px) {
    .main-nav { gap: .7rem; }
    .two-column { gap: 2rem; }
    .page-hero__layout--game { gap: 2rem; }
    .featured-game { grid-template-columns: 1.4fr .9fr; }
}
@media (max-width: 760px) {
    :root { --header-h: 4.25rem; --section-gap: 2.5rem; }
    .shell { width: min(calc(100% - 2rem), var(--shell)); }
    .site-header__inner { flex-wrap: wrap; gap: 0; padding-block: .6rem; }
    .brand strong { font-size: 1.25rem; }
    html:not(.navigation-ready) .site-header { position: static; }
    .main-nav { display: grid; grid-template-columns: 1fr; width: 100%; gap: 0; padding-top: .6rem; }
    .navigation-ready .menu-toggle { display: inline-flex; min-height: 44px; padding: .45rem .7rem; font-size: .8rem; }
    .navigation-ready .main-nav { display: none; }
    .navigation-ready .menu-open .main-nav { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); margin-top: .6rem; padding-block: .5rem; }
    .main-nav a { font-size: .8rem; min-height: 48px; }
    .hero { padding: 2rem 0 1.75rem; }
    .hero h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
    .hero .section-label { font-size: .65rem; letter-spacing: .07em; }
    .hero__lead { font-size: 1rem; }
    .featured-game { grid-template-columns: 1fr; }
    .featured-game__copy { padding: 1.5rem; }
    .featured-game__copy h2 { font-size: 2.5rem; }
    .featured-game__art { border-left: 0; border-top: 1px solid var(--border); min-height: 0; aspect-ratio: 8 / 5; }
    .section--featured { padding-bottom: calc(var(--section-gap) * .4); }
    .section--development { padding-top: calc(var(--section-gap) * .4); }
    .hero__actions { gap: 1rem; }
    .section__header, .two-column, .detail-grid, .highlights, .upcoming-grid, .page-hero__layout--game, .site-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .page-hero { padding: 2.25rem 0 2rem; }
    .page-hero__lead, .page-hero__summary { font-size: 1.05rem; }
    .game-card, .detail-card, .highlight, .legal-copy { padding: 1.4rem; }
    .catalogue-feature { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.4rem; }
    .catalogue-feature img { order: 2; width: 100%; height: 210px; object-position: 50% 56%; }
    .catalogue-feature h3 { font-size: 2rem; }
    .catalogue-feature .hero__actions { flex-direction: column; align-items: start; }
    .game-art { max-width: 360px; }
    .game-art img { max-height: 350px; object-position: 50% 56%; }
    .footer-nav { justify-content: start; gap: .25rem 1.25rem; }
    .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: .75rem; padding-block: .8rem; }
    .cookie-banner__actions { justify-content: end; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
    * { scrollbar-color: auto; }
    .button, .game-card, .detail-card, .featured-game { border-color: ButtonText; }
    :focus-visible { outline-color: Highlight; }
}