/* dilmun.css — additions to the verbatim site.css (Round 10b): three project themes (Dilmun, Eanna,
   Mistmarch) on the same seam as the existing four (values only, the n-* anatomy is untouched), the archived
   badge and the status pills. Theme colours are derived from the keyart masters of 2026-09-09
   (accent = the art's light source, secondary = its second hue, grounds = its darks). */
/* ---- Dilmun theme (keyart 2026-09-09): teal-green dusk over still water, the low sun as gold. ---- */
.dilmun {
    --n-abyss: #0a1614;
    --n-deep:  #10221f;
    --n-panel: #173029;
    --n-teal:  #eaa94f;   /* sun gold — primary accent */
    --n-blue:  #8fc1b5;   /* sea teal (the sky and water) — secondary */
    --n-foam:  #e8ede9;
    --n-muted: #9fb2ab;
    --n-line:      rgba(234, 169, 79, 0.22);
    --n-line-soft: rgba(232, 237, 233, 0.08);
    --n-abyss-rgb: 10,22,20;
    --n-deep-rgb:  16,34,31;
    --n-teal-rgb:  234,169,79;
    --n-blue-rgb:  143,193,181;
}
.dilmun { background: var(--n-abyss); color: var(--n-foam); }
.dilmun .wrap { max-width: 72rem; }
/* ---- Eanna theme (keyart 2026-09-09): lapis night, the gate's glow as gold. ---- */
.eanna {
    --n-abyss: #070c12;
    --n-deep:  #0c1830;
    --n-panel: #122544;
    --n-teal:  #e2a844;   /* gate gold — primary accent */
    --n-blue:  #8fb0e6;   /* pale lapis (the glazed brick) — secondary */
    --n-foam:  #e9edf5;
    --n-muted: #9aa8bf;
    --n-line:      rgba(226, 168, 68, 0.22);
    --n-line-soft: rgba(233, 237, 245, 0.08);
    --n-abyss-rgb: 7,12,18;
    --n-deep-rgb:  12,24,48;
    --n-teal-rgb:  226,168,68;
    --n-blue-rgb:  143,176,230;
}
.eanna { background: var(--n-abyss); color: var(--n-foam); }
.eanna .wrap { max-width: 72rem; }
.archived-badge { display:inline-block; font-size:.62em; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  vertical-align:middle; margin-left:.4em; padding:.15em .5em; border-radius:999px; border:1px solid currentColor; opacity:.75; }
/* ---- Mistmarch theme (keyart 2026-09-09; replaces the provisional manifest colours): moss and mist, the lanterns as ember. ---- */
.mistmarch {
    --n-abyss: #0d1410;
    --n-deep:  #16211a;
    --n-panel: #223124;
    --n-teal:  #a3c48f;   /* mist green (the lit meadow) — primary accent */
    --n-blue:  #e2a75e;   /* lantern ember — secondary */
    --n-foam:  #eef2ea;
    --n-muted: #a2b3a3;
    --n-line:      rgba(163, 196, 143, 0.22);
    --n-line-soft: rgba(238, 242, 234, 0.08);
    --n-abyss-rgb: 13,20,16;
    --n-deep-rgb:  22,33,26;
    --n-teal-rgb:  163,196,143;
    --n-blue-rgb:  226,167,94;
}
.mistmarch { background: var(--n-abyss); color: var(--n-foam); }
.mistmarch .wrap { max-width: 72rem; }
/* status / planned marks on flagship pages (same pill as the rail's archived badge) */
.n-mark { display:inline-block; font-size:.62em; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  vertical-align:middle; margin-left:.4em; padding:.15em .5em; border-radius:999px; border:1px solid currentColor; opacity:.8; }
.n-mark--status { color: var(--n-teal); }
.n-mark--planned { color: var(--n-blue); }
/* ---- Shellby & Co. theme (keyart 2026-10-03, Round 17): violet dusk, the beacon as gold, the snail as lilac. ---- */
.shellby {
    --n-abyss: #0f0b1d;
    --n-deep:  #191230;
    --n-panel: #251b45;
    --n-teal:  #f5cf6a;   /* beacon gold (the light source, the logo lettering) — primary accent */
    --n-blue:  #b9a2ea;   /* snail lilac — secondary */
    --n-foam:  #f2edf8;
    --n-muted: #ada3c4;
    --n-line:      rgba(245, 207, 106, 0.22);
    --n-line-soft: rgba(242, 237, 248, 0.08);
    --n-abyss-rgb: 15,11,29;
    --n-deep-rgb:  25,18,48;
    --n-teal-rgb:  245,207,106;
    --n-blue-rgb:  185,162,234;
}
.shellby { background: var(--n-abyss); color: var(--n-foam); }
.shellby .wrap { max-width: 72rem; }
/* ---- video blocks on project pages (Round 17; driven by js/media.js, inert without it) ---- */
/* hero loop: sits over the still key art, invisible until it is actually playing; never shown on a
   small screen or with reduced motion (media.js does not load it there either) */
.s-hero__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.s-hero__loop.is-playing { opacity: 1; }
@media (max-width: 46rem), (prefers-reduced-motion: reduce) { .s-hero__loop { display: none; } }
/* the logo stands in for the display-face title */
.n-hero h1.s-logo { margin-bottom: var(--space-sm); line-height: 0; }
.s-logo img { display: block; width: min(34rem, 88vw); height: auto; filter: drop-shadow(0 6px 28px rgba(0,0,0,.55)); }
/* trailer: full content width, 16:9 box reserved before anything loads */
.s-video { border: 1px solid var(--n-line); border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.s-video video { display: block; width: 100%; height: 100%; }
.n-lead + .n-lead { margin-top: var(--space-md); }
/* feature list with clips: two columns; a clip card holds its clip beside the text */
.s-features { grid-template-columns: 1fr; }
.s-feature--clip { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.s-clip { aspect-ratio: 16 / 9; background: var(--n-abyss); }
.s-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-feature__text { padding: var(--space-md); }
@media (min-width: 60rem) {
    .s-features { grid-template-columns: 1.7fr 1fr; }
    .s-feature--clip { flex-direction: row; align-items: center; }
    .s-feature--clip .s-clip { flex: 0 0 19rem; align-self: stretch; aspect-ratio: auto; min-height: 10.7rem; }
    .s-features > .n-feature:not(.s-feature--clip) { display: flex; flex-direction: column; justify-content: center; }
    .s-features > .s-feature--clip:last-child { grid-column: 1 / -1; }
}
/* plain lists inside .n-body (How the game is built / Where it stands) */
.s-list { padding-left: 1.2rem; }
.s-list li + li { margin-top: .45rem; }
.s-list li::marker { color: var(--n-teal); }
/* landing page: a hero panel's short description under its tagline */
.hero__blurb { max-width: 34rem; margin-bottom: var(--space-md); color: var(--n-foam); }
.hero__blurb, .hero-panel.shellby .hero__lede { text-shadow: 0 1px 14px rgba(var(--n-abyss-rgb), .9); }
/* small screens: this panel's copy is one paragraph longer than the others; keep it clear of the switcher dots */
@media (max-width: 46rem) { .hero-switch.is-switcher .hero-panel.shellby .hero-panel__body { padding-bottom: 5.5rem; } }

/* ---- The Deathless theme (2026-10-13): the stove-side dark of the renders, hoard gold, the needle's red. ---- */
.deathless {
    --n-abyss: #16130e;
    --n-deep:  #1f1a12;
    --n-panel: #2c2518;
    --n-teal:  #e6b450;   /* hoard gold — primary accent */
    --n-blue:  #d0694f;   /* the needle's red base — secondary */
    --n-foam:  #f3eee2;
    --n-muted: #b3a892;
    --n-line:      rgba(230, 180, 80, 0.22);
    --n-line-soft: rgba(243, 238, 226, 0.08);
    --n-abyss-rgb: 22,19,14;
    --n-deep-rgb:  31,26,18;
    --n-teal-rgb:  230,180,80;
    --n-blue-rgb:  208,105,79;
}
.deathless { background: var(--n-abyss); color: var(--n-foam); }
.deathless .wrap { max-width: 72rem; }
/* project page: the plate is a 32:9 strip of eight renders, so it sits above the text at its own
   ratio (nothing is cropped at any width) instead of covering the hero behind it */
.n-hero.d-hero { display: block; min-height: 0; }
.d-hero .n-hero__media { position: static; aspect-ratio: 32 / 9; }
.d-hero .n-hero__media img { object-fit: contain; }
.d-hero .n-hero__body { padding-block: var(--space-lg) var(--space-xl); }
.d-hero h1 { font-size: clamp(2.6rem, 10vw, 6rem); }
.d-play { margin-top: var(--space-lg); }
.d-numbers, .d-also { margin-top: var(--space-lg); }
/* the play button is the page's one live action: solid enough to read as primary */
.deathless a.n-cta__btn { background: rgba(var(--n-teal-rgb), .16); border-color: var(--n-teal); color: var(--n-foam); font-weight: 600; }
.deathless a.n-cta__btn:hover, .deathless a.n-cta__btn:focus-visible { background: var(--n-teal); color: var(--n-abyss); }
.deathless .n-cta__note { max-width: 46rem; margin-inline: auto; line-height: 1.6; }
/* landing page panel: the whole strip, uncropped, in the upper part of the stage; the copy sits below it */
.hero-panel.deathless .n-hero__media { inset: 0 0 auto 0; height: 46%; }
.hero-panel.deathless .n-hero__media img { object-fit: contain; object-position: 50% 60%; }
.hero-panel.deathless .n-hero__scrim { background: linear-gradient(180deg, rgba(var(--n-abyss-rgb),.25) 0%, rgba(var(--n-abyss-rgb),0) 30%, rgba(var(--n-abyss-rgb),0) 100%); }
.hero-panel.deathless .hero__lede { text-shadow: 0 1px 14px rgba(var(--n-abyss-rgb), .9); }
/* small screens: two stacked buttons make this panel's copy taller; keep it clear of the switcher dots */
@media (max-width: 46rem) {
    .hero-panel.deathless .n-hero__media { height: 34%; }
    .hero-switch.is-switcher .hero-panel.deathless .hero-panel__body { padding-bottom: 5.5rem; }
}
/* The Deathless player page: the game on a stage of at most 1280×800, centred; everything around it is the
   plain dark background (js/player.js scales the stage down on smaller windows) */
.d-player-body { margin: 0; background: #16130e; }
.d-player { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.d-player__fit { width: 1280px; max-width: 100%; height: 800px; overflow: auto; background: #16130e; }
.d-player__fit.is-scaled { max-width: none; overflow: hidden; flex: none; }
.d-player__stage { display: block; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; }
.d-player__foot { padding: var(--space-sm) var(--space-md) var(--space-md); text-align: center; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .08em; color: var(--n-muted); background: #16130e; }
.d-player__foot a { color: var(--n-muted); }
.d-player__foot a:hover, .d-player__foot a:focus-visible { color: var(--n-teal); }

/* ---- Seven Gates theme (2026-10-16): the dark ground behind the reliefs, fired clay, the lapis of the game's seal buttons. ---- */
.sevengates {
    --n-abyss: #15110d;
    --n-deep:  #1e1913;
    --n-panel: #2b241b;
    --n-teal:  #d9a66b;   /* fired clay — primary accent */
    --n-blue:  #5b7fd0;   /* lapis — secondary */
    --n-foam:  #f2e8d8;
    --n-muted: #b8a68c;
    --n-line:      rgba(217, 166, 107, 0.22);
    --n-line-soft: rgba(242, 232, 216, 0.08);
    --n-abyss-rgb: 21,17,13;
    --n-deep-rgb:  30,25,19;
    --n-teal-rgb:  217,166,107;
    --n-blue-rgb:  91,127,208;
}
.sevengates { background: var(--n-abyss); color: var(--n-foam); }
.sevengates .wrap { max-width: 72rem; }
/* project page: the same strip-above-the-text hero as The Deathless (.d-hero), at this plate's 3:1 ratio */
.sg-hero .n-hero__media { aspect-ratio: 3 / 1; }
.sevengates a.n-cta__btn { background: rgba(var(--n-teal-rgb), .16); border-color: var(--n-teal); color: var(--n-foam); font-weight: 600; }
.sevengates a.n-cta__btn:hover, .sevengates a.n-cta__btn:focus-visible { background: var(--n-teal); color: var(--n-abyss); }
.sevengates .n-cta__note { max-width: 46rem; margin-inline: auto; line-height: 1.6; }
.sevengates .n-body code { font-size: .92em; }
/* landing page panel: the whole strip, uncropped, in the upper part of the stage; the copy sits below it */
.hero-panel.sevengates .n-hero__media { inset: 0 0 auto 0; height: 46%; }
.hero-panel.sevengates .n-hero__media img { object-fit: contain; object-position: 50% 60%; }
.hero-panel.sevengates .n-hero__scrim { background: linear-gradient(180deg, rgba(var(--n-abyss-rgb),.25) 0%, rgba(var(--n-abyss-rgb),0) 30%, rgba(var(--n-abyss-rgb),0) 100%); }
.hero-panel.sevengates .hero__lede { text-shadow: 0 1px 14px rgba(var(--n-abyss-rgb), .9); }
@media (max-width: 46rem) {
    .hero-panel.sevengates .n-hero__media { height: 34%; }
    .hero-switch.is-switcher .hero-panel.sevengates .hero-panel__body { padding-bottom: 5.5rem; }
}