/*
  Seigneurie website theme (WEB.02, rebuilt by WEB.11 after the lead's reference: docs/web/reference-analysis.md).
  Modern restraint, medieval soul: warm near-black space, full-bleed painted imagery, one gold accent, a sturdy
  serif headline, caps labels with tracking, flat ghost buttons, gold hairlines. The medieval feel comes from the
  art, the serif and the gold, never from ornament piled on. Plain CSS, self-hosted fonts, no third-party request.
  Tokens and components: docs/web/design.md.
*/

/* ---------- Fonts (self-hosted; OFL, licences in web/fonts/) ---------------------------------------- */

/* The headline serif: Merriweather 2.100 (OFL, Reserved Font Name "Merriweather"), instanced at 400 and 700,
   subset to the site's Latin and renamed "Seigneurie Headline", as the OFL asks of a modified version. */
@font-face {
  font-family: "Seigneurie Headline";
  src: url("/fonts/SeigneurieHeadline-Bold.2f55823f2c.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Seigneurie Headline";
  src: url("/fonts/SeigneurieHeadline-Regular.6e88460ad8.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("/fonts/Cinzel-Variable.0e524ea7c4.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/AlegreyaSans-Regular.b0cfc3634d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/AlegreyaSans-Bold.984003d748.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------------------------------------ */

:root {
  /* Colour. The only accent is gold; everything else is warm near-black and parchment. Every text/ground pair
     is held to WCAG AA by tools/web_build.py's CONTRAST_PAIRS. machine_signal #5FF2E6 is deliberately absent:
     it is reserved for the game's machines and never appears on this site (brief.md §4). */
  --color-black: #000000;       /* the nav and the footer: pure black, as the reference */
  --color-bg-deep: #0E0C0A;     /* the utility bar */
  --color-bg: #141110;          /* the page: warm near-black */
  --color-bg-raised: #1E1917;   /* cards, panels, the bridge: a step lighter */
  --color-text: #F1E7D2;        /* parchment: headlines and text (the game's UI_TEXT) */
  --color-muted: #BDB2A0;       /* body copy, dates, secondary text */
  --color-gold: #E2BF6A;        /* the accent: links, the CTA block's light end, caps labels */
  --color-gold-deep: #B08A3E;   /* the CTA block's dark end */
  --color-hairline: #8A6D34;    /* gold hairlines and borders */
  --color-on-gold: #1A1209;     /* text on gold */
  --color-brass: #C8952E;       /* the game's ochre trim (team_trim): the focus ring and the rendered marks */
  --color-navy: #0C2062;        /* the team colour: the press kit's dark logo tile and the rendered marks */
  --color-good: #86A04A;        /* the official server is online */
  --color-rust: #8A3A22;        /* raider_rust: warnings only */
  --color-ink: #2A221D;         /* text on parchment */
  --color-parchment: #DABD97;   /* the press kit's light logo tile */

  /* Grades for the game's captures standing in for paintings: warmer, darker, softer greens (a painting needs none). */
  --grade-capture: sepia(0.3) saturate(0.92) contrast(1.08) brightness(0.86);
  --grade-painted: none;

  /* Type: the headline serif for headlines and titles (mixed case, bold, a soft shadow), Cinzel for the wordmark,
     labels, the nav and buttons (caps, tracked), Alegreya Sans for body copy. */
  --font-headline: "Seigneurie Headline", Georgia, "Times New Roman", serif;
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Alegreya Sans", "Segoe UI", "Gill Sans", system-ui, sans-serif;

  --text-xs: 0.8125rem;  /* 13px: caps labels, legal lines */
  --text-sm: 0.9375rem;  /* 15px: captions, the utility bar */
  --text-base: 1.0625rem;/* 17px: body copy (Alegreya Sans' small x-height reads like 15-16px of most sans) */
  --text-md: 1.25rem;    /* 20px: lead paragraphs */
  --text-lg: 1.625rem;   /* 26px: card titles */
  --text-xl: 2.25rem;    /* 36px: page section headings */
  --text-band: clamp(2rem, 1.2rem + 1.8vw, 3.1rem);   /* a feature band's two-line title: 50px at 1920 */
  --text-hero: clamp(2.1rem, 0.9rem + 3.1vw, 4.2rem); /* the hero's headline: 67px at 1920 */

  --tracking-caps: 0.1em;
  --headline-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.55);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --container: 1180px;
  --container-wide: 1400px;
  --gutter: 1rem;

  --duration: 0.18s;
}

/* ---------- Base -------------------------------------------------------------------------------------- */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden;
}

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

a { color: var(--color-gold); text-underline-offset: 3px; }
a:hover { color: var(--color-text); }

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { margin: 0 0 var(--space-3); }
small, .text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--color-muted); }

code {
  font-family: ui-monospace, "Consolas", "Courier New", monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

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

/* ---------- Accessibility helpers ---------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  z-index: 100;
  transition: top var(--duration) ease;
}
.skip-link:focus { top: var(--space-3); }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ---------- Layout -------------------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container.narrow { max-width: calc(860px + 2 * var(--gutter)); }

@media (min-width: 700px) {
  :root { --gutter: 2rem; }
}

/* ---------- The gold hairline: the reference's thin brass rule between sections ----------------------- */

.hairline {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-hairline) 18%, var(--color-gold) 50%,
                                     var(--color-hairline) 82%, transparent 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.8);
}

/* ---------- Section titles (caps, tracked, centred) --------------------------------------------------- */

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 0.8vw, 1.95rem);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  text-shadow: var(--headline-shadow);
  margin: 0 0 var(--space-5);
}
.section-title--left { text-align: left; font-size: 1.35rem; margin-bottom: var(--space-4); }

.section-more {
  text-align: center;
  margin: var(--space-5) 0 0;
}
.section-more a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
}
.section-more a:hover { color: var(--color-gold); }

/* ---------- Buttons: flat, ghost, caps (the reference's), never skeuomorphic ------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: 0.85rem 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid rgba(241, 231, 210, 0.75);
  cursor: pointer;
  transition: background-color var(--duration) ease, color var(--duration) ease, border-color var(--duration) ease;
}
.btn:hover { color: var(--color-gold); border-color: var(--color-gold); }

/* The one main action of a screen: gold-outlined over a dark glass, filling with gold on hover. */
.btn-primary {
  border: 2px solid var(--color-gold);
  background: rgba(0, 0, 0, 0.55);
  padding: 0.95rem 2.4rem;
  font-size: 1rem;
}
.btn-primary:hover {
  color: var(--color-on-gold);
  background: linear-gradient(180deg, var(--color-gold), var(--color-gold-deep));
  border-color: var(--color-gold);
}

.btn-ghost { background: rgba(0, 0, 0, 0.25); }
.btn-ghost--light { border-color: var(--color-text); background: transparent; font-size: 1rem; padding: 1rem 1.6rem; }

/* ---------- The gold block: the nav's Download (the reference's call to action) --------------------- */

.nav-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 13.5rem;
  padding: 0 var(--space-4);
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-deep) 100%);
  color: var(--color-on-gold);
  text-decoration: none;
  line-height: 1.15;
  transition: filter var(--duration) ease;
}
.nav-cta:hover { color: var(--color-on-gold); filter: brightness(1.08); }
.nav-cta__label {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.1rem;
}
.nav-cta__meta {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-cta:focus-visible { outline-color: var(--color-text); outline-offset: -4px; }

/* ---------- Server status chip ------------------------------------------------------------------------- */

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text);
}

/* An octagon, not a dot: the game draws no perfect circles on made things, and its own status markers are
   octagonal badges (docs/systems/ui.md, IndicatorBadge). */
.status-chip__light {
  --size: 9px;
  width: var(--size);
  height: var(--size);
  flex: none;
  background: var(--color-muted);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.status-chip.is-online .status-chip__light { background: var(--color-good); box-shadow: 0 0 8px var(--color-good); }
.status-chip.is-unknown .status-chip__light { background: var(--color-muted); }
.status-chip.is-checking .status-chip__light {
  background: var(--color-gold);
  animation: chip-pulse 1.4s ease-in-out infinite;
}
@keyframes chip-pulse { 50% { opacity: 0.35; } }

/* ---------- Notices --------------------------------------------------------------------------------------- */

.notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-hairline);
}
.notice--warning { background: var(--color-rust); border-color: var(--color-rust); }

/* ---------- FAQ (native details/summary) ----------------------------------------------------------------- */

.faq-item {
  border-bottom: 1px solid rgba(138, 109, 52, 0.45);
  padding-block: var(--space-3);
}
.faq-item:first-child { border-top: 1px solid rgba(138, 109, 52, 0.45); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  flex: none;
  width: 1ch;
  color: var(--color-gold);
  font-family: var(--font-display);
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item summary:hover { color: var(--color-gold); }
.faq-item p { margin: var(--space-2) 0 0 calc(1ch + var(--space-3)); color: var(--color-muted); }

/*
  Seigneurie website: the pages' layouts (WEB.03, rebuilt by WEB.11 after the lead's reference), on theme.css's
  tokens and components. tools/web_build.py bundles theme.css + this file into one hashed stylesheet and appends
  the generated slot rules (--backdrop, --banner-sm/-lg, --banner-grade: which picture each slot shows). Colours
  come only from theme.css's tokens: tools/tests/test_web_build_site.py holds every colour below to them.
*/

/* ---------- Basics -------------------------------------------------------------------------------------- */

[hidden] { display: none !important; }
main:focus { outline: none; } /* the skip link's target, focused on purpose: no ring round the whole page */

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

kbd {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85em;
  padding: 0.05em 0.45em;
  border: 1px solid rgba(241, 231, 210, 0.45);
  border-bottom-width: 2px;
  border-radius: 3px; /* a small inline key cap, not a "made thing" */
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  white-space: nowrap;
}

/* A capture of the game standing in for a painting is graded warmer and darker; a painting shows as painted. */
.art { position: relative; overflow: hidden; background: var(--color-bg-raised); }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art--capture img { filter: var(--grade-capture); }
.art--painted img { filter: var(--grade-painted); }
.art--placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-muted);
}
.art__fleur { width: auto; height: 3.5rem; color: var(--color-hairline); }
.art__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.art__note { margin: 0; font-size: var(--text-sm); max-width: 26rem; }

/* ---------- The header: utility bar, then the black nav with the gold block ------------------------- */

.site-header {
  position: relative;
  z-index: 50;
}
.utility-bar {
  background: var(--color-bg-deep);
  border-bottom: 1px solid rgba(241, 231, 210, 0.08);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding-inline: var(--gutter);
}
.util-status { margin: 0; min-width: 0; }
.util-status__link { color: var(--color-muted); text-decoration: none; display: inline-flex; }
.util-status__link:hover { color: var(--color-text); }
.util-status .status-chip { color: inherit; gap: 0.55rem; white-space: nowrap; }
.util-status__label { color: var(--color-text); font-weight: 700; }
.util-status__label::after { content: "·"; margin-left: 0.55rem; color: var(--color-hairline); }
.utility-bar__links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.utility-bar__links li + li { border-left: 1px solid rgba(241, 231, 210, 0.25); }
.utility-bar__links a {
  display: block;
  padding: 0 var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.utility-bar__links li:last-child a { padding-right: 0; }
.utility-bar__links a:hover { color: var(--color-gold); }

.site-nav {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  min-height: 4.875rem;
  padding-left: var(--gutter);
  background: var(--color-black);
  border-bottom: 1px solid rgba(138, 109, 52, 0.7);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
  color: var(--color-text);
  text-decoration: none;
}
.brand-mark:hover { color: var(--color-gold); }
.brand-mark__fleur { width: auto; height: 2.6rem; color: currentColor; }
.brand-mark__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem clamp(1.25rem, 2.6vw, 3.4rem);
  margin: 0 auto 0 clamp(1.5rem, 4vw, 5.5rem);
  padding: 0;
}
.site-nav__links a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.0625rem;
  white-space: nowrap;
}
.site-nav__links a:hover { color: var(--color-gold); }
.site-nav__links a[aria-current="page"] {
  color: var(--color-gold);
  box-shadow: inset 0 -2px 0 var(--color-gold);
}
.nav-toggle, .nav-toggle__label { display: none; }
.preview-banner { margin: 0; }

/* On wide screens the nav stays in view; the utility bar scrolls away above it. */
@media (min-width: 1000px) {
  html { scroll-padding-top: 5.5rem; }
  .site-header { position: sticky; top: -2.75rem; }
}

/* The nav collapses into a CSS-only menu below 1000px: the checkbox before the list opens it (keyboard:
   Tab to "Menu", Space). The gold block stays in the bar, shortened to "Download". */
@media (max-width: 999px) {
  .site-nav { gap: var(--space-3); min-height: 4rem; flex-wrap: wrap; }
  .brand-mark__fleur { height: 2.1rem; }
  .brand-mark__word { font-size: 1.05rem; letter-spacing: 0.12em; }
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .nav-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    padding: 0 0.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
  }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle:focus-visible + .nav-toggle__label { outline: 2px solid var(--color-gold); outline-offset: 2px; }
  .nav-toggle:checked + .nav-toggle__label { color: var(--color-gold); }
  .site-nav__links {
    display: none;
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0 calc(-1 * var(--gutter));
    padding: var(--space-2) var(--gutter) var(--space-3);
    background: var(--color-black);
    border-top: 1px solid rgba(241, 231, 210, 0.12);
  }
  .nav-toggle:checked ~ .site-nav__links { display: flex; }
  .site-nav__links a { padding: 0.8rem 0; border-bottom: 1px solid rgba(241, 231, 210, 0.08); }
  .site-nav__links a[aria-current="page"] { box-shadow: none; }
  .nav-cta { min-width: 0; padding: 0 var(--space-3); }
  .nav-cta__long {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap;
  }
  .nav-cta__meta { display: none; }
}
@media (max-width: 520px) {
  .site-nav { gap: var(--space-2); }
  .nav-toggle__label { font-size: 0; gap: 0; padding: 0 0.6rem; }
  .utility-bar__links li:first-child { display: none; }
  .utility-bar__links li + li { border-left: 0; }
  .util-status__label { display: none; }
  .brand-mark__word { font-size: 0.95rem; letter-spacing: 0.1em; }
}

/* ---------- Hero: full-bleed art, a centred two-line serif headline, ghost buttons ------------------- */

.hero {
  position: relative;
  display: grid;
  min-height: clamp(36rem, 42.2vw, 54rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-black);
}
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__art .art { height: 100%; }
.hero__art img { object-position: 50% 62%; }
.hero__art .art--placeholder { padding-bottom: 10rem; }
/* the vignette and the fall to the page's black: the reference's darkened edges and bottom */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 48% at 50% 58%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%),
    radial-gradient(ellipse 120% 95% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.75) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 62%, rgba(20, 17, 16, 0.92) 94%,
                    rgba(20, 17, 16, 1) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-hairline) 18%, var(--color-gold) 50%,
                                     var(--color-hairline) 82%, transparent 100%);
}
.hero__content {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 76rem;
  padding: clamp(5rem, 9vw, 9rem) var(--gutter) clamp(5rem, 7vw, 7rem);
  text-align: center;
}
.hero__title {
  margin: 0 auto;
  font-size: var(--text-hero);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-shadow: var(--headline-shadow);
  text-wrap: balance;
}
.hero__pitch {
  max-width: 44rem;
  margin: var(--space-4) auto 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.7);
}
.hero__links {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.hero__links a { color: var(--color-text); text-decoration-color: rgba(241, 231, 210, 0.45); }
.hero__links a:hover { color: var(--color-gold); }
.hero__links-label {
  margin-right: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
}
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  padding: 0.5rem;
  color: var(--color-text);
}
.hero__cue svg { width: 1.5rem; height: auto; }
.hero__cue:hover { color: var(--color-gold); }

/* The Steam-ready slot (WEB.06): absent from the page until site.json's steam_url is set. */
.hero__steam { display: flex; justify-content: center; margin: var(--space-3) 0 0; }

/* ---------- The Download call to action (works with no JavaScript; site.js only refreshes it) --------- */

.download-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  column-gap: var(--space-5);
  text-wrap: balance;
  margin: var(--space-5) auto 0;
}
.download-actions,
.download-block .download-meta,
.download-note--phone,
.download-verify[open] { grid-column: 1 / -1; }
.download-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.download-meta {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.download-verify, .download-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.download-block .download-verify { justify-self: end; }
.download-block [data-cta-guide] { justify-self: start; }
.download-verify summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-gold);
  width: fit-content;
  margin-inline: auto;
}
.download-verify summary::-webkit-details-marker { display: none; }
.download-verify summary::before { content: "+ "; }
.download-verify[open] summary::before { content: "\2212 "; }
.download-verify p { margin: var(--space-1) 0 0; }
.download-note--phone { display: none; margin-top: var(--space-3); max-width: 30rem; justify-self: center; }

/* On a phone the button still says Windows; this line says what that means. */
@media (hover: none) and (pointer: coarse), (max-width: 540px) {
  .download-note--phone { display: block; }
}

/* ---------- Latest news: cards on the painted dark --------------------------------------------------- */

.ambient {
  position: relative;
  isolation: isolate;
  background: var(--color-bg);
}
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 17, 16, 0.9), rgba(20, 17, 16, 0.84) 50%, rgba(20, 17, 16, 0.94)),
    var(--backdrop, none) center / cover no-repeat;
}
.news-section { padding-block: var(--space-6) var(--space-6); }

/* Cards and tiles: up to three across at the reference's 430 px, centred however many there are (two posts today). */
.news-grid, .media-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 2.8vw, 3.4rem);
}
.news-grid > li, .media-row > li { flex: 1 1 19rem; max-width: 26.9rem; min-width: 0; }
.news-card__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid rgba(241, 231, 210, 0.09);
  transition: border-color var(--duration) ease, transform var(--duration) ease;
}
.news-card__inner:hover { border-color: var(--color-hairline); }
.news-card__media { aspect-ratio: 430 / 245; overflow: hidden; background: var(--color-bg-deep); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__media.art--capture img { filter: var(--grade-capture); }
.news-card__media--empty { display: grid; place-items: center; }
.news-card__fleur { height: 3.5rem; width: auto; color: var(--color-hairline); }
.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4) var(--space-4) var(--space-4);
  text-align: center;
}
.news-card__date { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.news-card__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.45vw, 1.55rem);
  line-height: 1.3;
  text-wrap: balance;
}
.news-card__title a { color: var(--color-text); text-decoration: none; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the post's link */
.news-card__title a:focus-visible { outline: none; }
.news-card__inner:has(a:focus-visible) { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.news-card__inner:hover .news-card__title a { color: var(--color-gold); }
.news-card__summary { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-base); }
.news-card__more {
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ---------- The feature bands: 50/50, art bleeding to the edge, the text on its own darkened scene ---- */

.bands { background: var(--color-bg); }
.band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(32rem, 34.4vw, 47rem);
}
.band + .band { /* the gold hairline between bands */
  border-top: 2px solid var(--color-hairline);
  border-image: linear-gradient(90deg, transparent 0%, var(--color-hairline) 18%, var(--color-gold) 50%,
                                       var(--color-hairline) 82%, transparent 100%) 1;
}
.band__art { position: relative; min-height: 22rem; }
.band__art .art { position: absolute; inset: 0; }
.band__art::after { /* the seam: the art falls into the text side's dark */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 72%, rgba(0, 0, 0, 0.45) 100%),
              linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.35) 100%);
}
.band--flip .band__art::after {
  background: linear-gradient(270deg, transparent 72%, rgba(0, 0, 0, 0.45) 100%),
              linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.35) 100%);
}
.band__text {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: var(--space-6) clamp(1.5rem, 3vw, 3.5rem);
  background: var(--color-bg);
}
.band__text::before { /* the same scene, darkened to about 15% and softened (the reference's band backdrop) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 17, 16, 0.78), rgba(20, 17, 16, 0.86)),
    var(--backdrop, none) center / cover no-repeat;
}
.band__copy { max-width: 35rem; }
.band--flip .band__art { order: 2; }
.band--flip .band__text { justify-content: flex-end; }
.band--flip .band__copy { margin-right: clamp(0rem, 3vw, 3.5rem); }
.band__title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-band);
  line-height: 1.15;
  text-shadow: var(--headline-shadow);
}
.band__copy p { color: var(--color-muted); }
.band__action { margin: var(--space-5) 0 0; }

/* ---------- The bridge: one line and a ghost button ---------------------------------------------------- */

.bridge {
  padding-block: var(--space-6);
  background: var(--color-bg-raised);
  text-align: center;
}
.bridge::before { /* the hairline on top, as between the bands */
  content: "";
  display: block;
  height: 2px;
  margin-top: calc(-1 * var(--space-6));
  margin-bottom: var(--space-6);
  background: linear-gradient(90deg, transparent 0%, var(--color-hairline) 18%, var(--color-gold) 50%,
                                     var(--color-hairline) 82%, transparent 100%);
}
.bridge__line { max-width: 46rem; margin: 0 auto var(--space-4); color: var(--color-text); }
.bridge p:last-child { margin: 0; }

/* ---------- Latest media ------------------------------------------------------------------------------------ */

.media-section { padding-block: var(--space-6); border-top: 2px solid var(--color-hairline); }
.media-section::before {
  background:
    linear-gradient(180deg, rgba(20, 17, 16, 0.8), rgba(20, 17, 16, 0.7) 50%, rgba(20, 17, 16, 0.9)),
    var(--backdrop, none) center 30% / cover no-repeat;
}
.media-tile figure { margin: 0; }
.media-tile__frame {
  position: relative;
  display: block;
  aspect-ratio: 430 / 245;
  overflow: hidden;
  border: 1px solid rgba(241, 231, 210, 0.22);
  background: var(--color-bg-deep);
}
.media-tile__frame img, .media-tile__frame video { width: 100%; height: 100%; object-fit: cover; }
.media-tile__frame img { filter: var(--grade-capture); transition: filter var(--duration) ease, transform 0.4s ease; }
a.media-tile__frame:hover img { filter: none; transform: scale(1.03); }
a.media-tile__frame:hover { border-color: var(--color-gold); }
.media-tile__play { /* the reference's round play mark: a button site.js shows (and hides once the clip plays) */
  position: absolute;
  padding: 0;
  cursor: pointer;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  translate: -50% -50%;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity var(--duration) ease, border-color var(--duration) ease, background-color var(--duration) ease;
}
.media-tile__play:hover, .media-tile__play:focus-visible { border-color: var(--color-gold); background: rgba(0, 0, 0, 0.55); }
.media-tile__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.3rem;
  border-color: transparent transparent transparent var(--color-text);
}
.media-tile__frame.is-playing .media-tile__play { opacity: 0; pointer-events: none; }
.media-tile figcaption { /* the reference's tiles carry no caption: kept for screen readers, shown in the press kit */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap;
}
.media-tile .placeholder { display: grid; place-content: center; justify-items: center; height: 100%; }

/* ---------- Play together tonight (the reference's newsletter band, without a form: the site collects nothing) */

.together {
  position: relative;
  padding-block: calc(var(--space-6) + 1.25rem);
  text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 7.5rem, rgba(0, 0, 0, 0.28) 7.5rem,
                              rgba(0, 0, 0, 0.28) calc(7.5rem + 2px)),
    linear-gradient(180deg, var(--color-bg-raised), var(--color-bg) 100%);
}
.together::before, .together::after { /* iron bands studded with rivets, under a gold hairline */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.25rem;
  background:
    radial-gradient(circle at 50% 50%, var(--color-hairline) 0 2px, rgba(0, 0, 0, 0.9) 2.5px, transparent 3.5px) 0 50% / 2.25rem 100% repeat-x,
    linear-gradient(180deg, var(--color-bg-deep), var(--color-black));
}
.together::before { top: 0; border-bottom: 2px solid var(--color-hairline); }
.together::after { bottom: 0; border-top: 2px solid var(--color-hairline); }
.together__lead { max-width: 40rem; margin: 0 auto var(--space-4); color: var(--color-text); }
.together__status { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.together__status .status-chip {
  padding: 0.65rem 1.4rem;
  border: 1px solid rgba(241, 231, 210, 0.25);
  background: rgba(0, 0, 0, 0.35);
  font-weight: 700;
}
.status-live { display: contents; }
.server-address {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  margin: 0 auto var(--space-4);
}
.server-address__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
}
.server-address__value {
  min-width: min(100%, 22rem);
  padding: 0.35rem 1.5rem;
  border-bottom: 1px solid var(--color-muted);
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.together__join { max-width: 40rem; margin: 0 auto; font-size: var(--text-sm); color: var(--color-muted); }
.together__contact { max-width: 40rem; margin: var(--space-4) auto 0; color: var(--color-muted); }

/* ---------- The links row above the footer (the reference's social row: only what exists, no accounts) */

.social-row {
  padding-block: var(--space-5);
  background: var(--color-bg-raised);
  border-top: 2px solid var(--color-hairline);
}
.social-row__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(2.5rem, 7vw, 5.5rem);
}
.social-row__link {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.social-row__link svg { width: 2.4rem; height: 2.4rem; }
.social-row__link:hover { color: var(--color-gold); }

/* ---------- Before you play: requirements and questions ------------------------------------------------ */

.before-play { padding-block: var(--space-6); background: var(--color-bg); }
.before-play__grid { display: grid; gap: var(--space-5) var(--space-6); }
@media (min-width: 900px) {
  .before-play__grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 0.9rem 0.8rem 0;
  border-bottom: 1px solid rgba(138, 109, 52, 0.45);
}
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid rgba(138, 109, 52, 0.45); }
.spec-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
  width: 1%;
  padding-top: 1rem;
}
.spec-table td { color: var(--color-muted); }
.controls th { white-space: normal; width: 34%; }
@media (max-width: 540px) {
  .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table th { padding-bottom: 0; border-bottom: 0; white-space: normal; }
  .spec-table tr:first-child td { border-top: 0; }
}

/* ---------- Page banners (every page but the home page): a short painted strip under the title -------- */

.page-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(14rem, 17vw, 20rem);
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--color-black);
  overflow: hidden;
}
.page-banner::before { /* the slot's picture, graded like every capture until it is a painting */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--banner-sm, none) center 55% / cover no-repeat;
  filter: var(--banner-grade, none);
}
@media (min-width: 961px) {
  .page-banner::before { background-image: var(--banner-lg, none); }
}
.page-banner::after { /* darkened to carry the title, falling into the page */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 50% 70%, rgba(0, 0, 0, 0.45), transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(20, 17, 16, 0.55) 45%, rgba(20, 17, 16, 0.97) 100%);
  border-bottom: 2px solid var(--color-hairline);
}
.page-banner--tall { min-height: clamp(26rem, 34vw, 36rem); align-items: center; }
.page-banner__inner { width: 100%; }
.page-banner__title {
  margin: 0 auto;
  max-width: 52rem;
  font-size: clamp(2.1rem, 1.3rem + 2.2vw, 3.4rem);
  line-height: 1.15;
  text-shadow: var(--headline-shadow);
  text-wrap: balance;
}
.page-banner__lead {
  max-width: 44rem;
  margin: var(--space-3) auto 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.page-banner__kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
}
.page-banner__kicker a { color: inherit; text-decoration: none; }
.page-banner__kicker a:hover { color: var(--color-text); }
.page-banner__actions { margin: var(--space-5) 0 0; }
.section-fleur { width: auto; height: 4.5rem; margin: 0 auto var(--space-4); color: var(--color-text); }
.lost__links { margin: var(--space-4) 0 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }

/* ---------- Inner pages' text ---------------------------------------------------------------------------- */

.section--page { padding-block: var(--space-5); }
.section--page:last-child { padding-bottom: var(--space-7); }
.section--page h2 {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(138, 109, 52, 0.5);
}
.section--page p, .section--page li { color: var(--color-text); }
.section--page .text-muted { color: var(--color-muted); }
.lead { font-size: var(--text-md); max-width: 42rem; }
.thanks {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-gold) !important;
}

.panel {
  padding: var(--space-4) clamp(1rem, 3vw, 2rem);
  background: var(--color-bg-raised);
  border: 1px solid rgba(241, 231, 210, 0.09);
}
.panel .spec-table tr:first-child th, .panel .spec-table tr:first-child td { border-top: 0; }
.panel .spec-table tr:last-child th, .panel .spec-table tr:last-child td { border-bottom: 0; }
.panel .spec-table td { color: var(--color-text); }

.card-parchment { /* the old parchment card, now a raised panel with a gold rule (the name stays for the copy) */
  padding: var(--space-4) clamp(1rem, 3vw, 2rem);
  background: var(--color-bg-raised);
  border-left: 3px solid var(--color-gold-deep);
}
.card-parchment h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.card-parchment p:last-child { margin-bottom: 0; }

.steps { padding-left: 1.6em; }
.steps li { margin-bottom: var(--space-3); padding-left: var(--space-2); }
.steps li::marker { color: var(--color-gold); font-family: var(--font-headline); font-weight: 700; }

.prose { font-size: 1.125rem; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem); margin-top: var(--space-5); padding-bottom: var(--space-2);
            border-bottom: 1px solid rgba(138, 109, 52, 0.5); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-md); margin-top: var(--space-4); }
.prose h4 { font-size: var(--text-base); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--space-3); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--color-gold); }
.prose blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-gold-deep);
  color: var(--color-muted);
}
.prose pre { overflow-x: auto; padding: var(--space-3); background: rgba(0, 0, 0, 0.4); }
.prose pre code { background: none; padding: 0; }
.prose hr {
  border: 0;
  height: 2px;
  margin-block: var(--space-5);
  background: linear-gradient(90deg, transparent, var(--color-hairline), transparent);
}
.post__back { margin: var(--space-6) 0 0; }

.news-list { margin-top: var(--space-2) !important; }

/* ---------- Press kit ----------------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--space-3) var(--space-4);
  margin: 0;
}
.facts dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
  padding-top: 0.2rem;
}
.facts dd { margin: 0; }
@media (max-width: 540px) {
  .facts { grid-template-columns: 1fr; row-gap: 0; }
  .facts dd { margin-bottom: var(--space-3); }
}
.boilerplate p:last-child { margin-bottom: 0; }

.logo-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 250px;
  padding: var(--space-4);
  text-align: center;
}
.logo-tile .lockup__fleur { height: 110px; width: auto; margin-bottom: auto; }
.logo-tile__img { width: 100%; max-width: 240px; height: auto; margin-bottom: auto; }
.logo-tile__name { margin: var(--space-3) 0 var(--space-1); font-weight: 700; }
.logo-tile p:last-child { margin-bottom: 0; }
.logo-tile--dark { background: var(--color-navy); }
.logo-tile--dark, .logo-tile--dark p { color: var(--color-text) !important; }
.logo-tile--dark a { color: var(--color-gold); }
.logo-tile--light { background: var(--color-parchment); }
.logo-tile--light, .logo-tile--light p { color: var(--color-ink) !important; }
.logo-tile--light a,
.logo-tile--light .lockup__fleur { color: var(--color-navy); }
.logo-tile--light :focus-visible { outline-color: var(--color-navy); }

/* ---------- The press kit's gallery ---------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.shot figure { margin: 0; }
.shot__frame { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(241, 231, 210, 0.2); }
.shot__frame:hover { border-color: var(--color-gold); }
.shot__frame img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.shot__full { white-space: nowrap; }
.placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  background: var(--color-bg-raised);
  color: var(--color-muted);
}
.placeholder__fleur { width: auto; height: 2.5rem; color: var(--color-hairline); }
.placeholder__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ---------- Footer: black, the mark centred, one row of links, two small lines ------------------------- */

.site-footer {
  padding-block: var(--space-6) var(--space-5);
  background: var(--color-black);
  color: var(--color-muted);
  border-top: 2px solid var(--color-hairline);
}
.site-footer__inner { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.site-footer__brand {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.site-footer__fleur { width: auto; height: 3.6rem; color: var(--color-text); }
.site-footer__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.site-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) clamp(1.25rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
}
.site-footer__links a {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.site-footer__links a:hover, .site-footer__links a[aria-current="page"] { color: var(--color-gold); }
.site-footer__meta, .site-footer__legal { margin: 0; font-size: var(--text-sm); }
.site-footer__meta a { color: var(--color-gold); }
.site-footer__legal { margin-top: calc(-1 * var(--space-3)); }

/* ---------- Narrow screens: the bands stack, image first --------------------------------------------- */

@media (max-width: 859px) {
  .band { grid-template-columns: 1fr; min-height: 0; }
  .band--flip .band__art { order: 0; }
  .band__art { min-height: 0; aspect-ratio: 4 / 3; }
  .band__art::after, .band--flip .band__art::after {
    background: linear-gradient(180deg, transparent 65%, rgba(20, 17, 16, 0.9) 100%);
  }
  .band__text, .band--flip .band__text { padding: var(--space-5) var(--gutter) var(--space-6); justify-content: flex-start; }
  .band--flip .band__copy { margin-right: 0; }
  .band__title { margin-bottom: var(--space-4); }
  .hero { min-height: 38rem; }
  .hero__title br { display: none; }
  .hero__content { padding-top: 6rem; padding-bottom: 6rem; }
  .download-actions { flex-direction: column; align-items: stretch; width: min(100%, 22rem); margin-inline: auto; }
  .download-block { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .download-block .download-verify, .download-block [data-cta-guide] { justify-self: center; }
  .news-section, .media-section, .bridge, .before-play { padding-block: var(--space-5); }
  .bridge::before { margin-top: calc(-1 * var(--space-5)); margin-bottom: var(--space-5); }
  .together { padding-block: calc(var(--space-5) + 1.25rem); }
}

/* key caps inside a caps label keep their own size */
.spec-table th kbd { font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--color-text); }

/* Image slots: generated by tools/web_build.py from web/assets/art/slots.json (WEB.11) */
.slot-band-build { --backdrop: url("/assets/art/band-build-backdrop.a0fd8e3a77.webp"); }
.slot-band-explore { --backdrop: url("/assets/art/band-explore-backdrop.5af27254a8.webp"); }
.slot-band-grow { --backdrop: url("/assets/art/band-grow-backdrop.0ff37f5164.webp"); }
.slot-band-together { --backdrop: url("/assets/art/band-together-backdrop.e7ce749c82.webp"); }
.page-banner--credits { --banner-sm: url("/assets/art/banner-credits-960.955fa4fd1d.webp"); --banner-lg: url("/assets/art/banner-credits-1536.9219ae4120.webp"); }
.page-banner--legal { --banner-sm: url("/assets/art/banner-legal-960.eecf459312.webp"); --banner-lg: url("/assets/art/banner-legal-1536.6d77d7ba74.webp"); }
.page-banner--lost { --banner-sm: url("/assets/art/banner-lost-960.6c4ee6112a.webp"); --banner-lg: url("/assets/art/banner-lost-1536.2bf26b3a4c.webp"); }
.page-banner--news { --banner-sm: url("/assets/art/banner-news-960.4951073f84.webp"); --banner-lg: url("/assets/art/banner-news-1536.0f9692bb76.webp"); }
.page-banner--playtest { --banner-sm: url("/assets/art/banner-playtest-960.1e9eece8ff.webp"); --banner-lg: url("/assets/art/banner-playtest-1536.97c64916e4.webp"); }
.page-banner--press { --banner-sm: url("/assets/art/banner-press-960.c97fd627bf.webp"); --banner-lg: url("/assets/art/banner-press-1536.6b910f5ed6.webp"); }
.slot-hero, .ambient { --backdrop: url("/assets/art/hero-backdrop.8d39200492.webp"); }
.page-banner--post-2026-09-28-seigneurie-0-1-the-playtest-build { --banner-sm: url("/assets/art/news/2026-09-28-seigneurie-0-1-the-playtest-build-1280.965c3eaf75.webp"); --banner-lg: url("/assets/art/news/2026-09-28-seigneurie-0-1-the-playtest-build-1536.b9cbb32455.webp"); }
.page-banner--post-2026-10-04-seigneurie-0-3-the-first-full-game { --banner-sm: url("/assets/art/news/2026-10-04-seigneurie-0-3-the-first-full-game-1280.28ea585bbd.webp"); --banner-lg: url("/assets/art/news/2026-10-04-seigneurie-0-3-the-first-full-game-1536.6d5eb511f6.webp"); }