/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · macrostructure: bespoke enlistment dossier + campaign map · hero: interaction-first field declaration
 * theme: custom · vibe: "weathered field orders, colorful restraint" · paper: oklch(93% 0.025 82) · accent: oklch(74% 0.13 82)
 * display: Bungee · body: Barlow · axes: dark / display-heavy / chromatic-amber
 * studied: no · context: explicit · contrast: pass (40–41) · nav: N7 field slab · footer: Ft1 mast-headed
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive/mobile: pass (34, 49–57) · icons: pass (30) · slop: pass (42–45)
 */
@font-face { font-family: "Bungee"; src: url("./assets/fonts/bungee-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("./assets/fonts/barlow-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("./assets/fonts/barlow-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("./assets/fonts/barlow-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("./assets/fonts/barlow-800.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--color-night); }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}
body:has(#army-fire:checked) { --faction-signal: var(--color-fire); }
body:has(#army-water:checked) { --faction-signal: var(--color-water); }
body:has(#army-grass:checked) { --faction-signal: var(--color-grass); }
body:has(#army-electric:checked) { --faction-signal: var(--color-electric); }
body:has(#army-ground:checked) { --faction-signal: var(--color-ground); }
body:has(#army-flying:checked) { --faction-signal: var(--color-flying); }
body:has(#army-psychic:checked) { --faction-signal: var(--color-psychic); }
body:has(#army-poison:checked) { --faction-signal: var(--color-poison); }
body:has(#army-bug:checked) { --faction-signal: var(--color-bug); }
body:has(#army-normal:checked) { --faction-signal: var(--color-normal); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, summary { font: inherit; }
h1, h2, h3, p { min-width: 0; }
h1, h2, h3 { overflow-wrap: anywhere; font-style: normal; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h2 { margin: 0; font-size: var(--text-h2); }
p { text-wrap: pretty; }
:focus-visible { outline: var(--rule-thick) solid var(--color-focus); outline-offset: var(--space-1); }
::selection { background: var(--color-campaign); color: var(--color-accent-ink); }

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-campaign);
  color: var(--color-accent-ink);
  font-weight: 800;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  min-height: 4.5rem;
  padding-inline: var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-paper);
  border-block-end: var(--rule-thin) solid color-mix(in oklch, var(--color-paper) 24%, transparent);
}
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-1); text-decoration: none; font-family: var(--font-display); font-size: 1rem; white-space: nowrap; }
.wordmark span { color: var(--color-campaign); }
.wordmark small { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.16em; }
.site-header nav { display: flex; align-items: center; gap: var(--space-3); }
.site-header nav a, footer nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.site-header nav a:not(.nav-play) { display: none; }
.nav-play { padding-inline: var(--space-4); background: var(--color-campaign); color: var(--color-accent-ink); }

.dispatch { margin: 0 0 var(--space-4); color: var(--color-campaign); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dispatch span { color: var(--faction-signal, var(--color-fire)); }
.dispatch--dark { color: var(--color-ink-2); }

.enlistment {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: clip;
  background: var(--color-night);
  color: var(--color-paper);
}
.enlistment__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("./assets/main-menu-fortress-v1.png");
  background-size: cover;
  background-position: center;
  opacity: 0.72;
}
.enlistment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-night) 45%, transparent), var(--color-night) 83%);
}
.enlistment__content { width: min(100%, var(--content-max)); margin-inline: auto; padding: 6.5rem var(--page-pad) 9rem; }
.enlistment h1 { max-width: 14ch; margin: 0; font-size: var(--text-hero); }
.enlistment h1 span { color: var(--color-paper); }
.enlistment__lead { max-width: 46rem; margin: var(--space-5) 0 0; color: var(--color-muted-light); font-size: var(--text-lead); }

.army-selector { margin-block-start: var(--space-5); }
.army-selector fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.army-selector legend { padding: 0; color: var(--color-paper); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.army-selector__rail {
  margin-block-start: var(--space-3);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block-start: var(--rule-thin) solid var(--color-rule-dark);
  border-inline-start: var(--rule-thin) solid var(--color-rule-dark);
}
.army-option { min-width: 0; }
.army-option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.army-option label {
  position: relative;
  min-height: 5.25rem;
  padding: var(--space-2);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  align-content: center;
  gap: 0 var(--space-2);
  cursor: pointer;
  border-inline-end: var(--rule-thin) solid var(--color-rule-dark);
  border-block-end: var(--rule-thin) solid var(--color-rule-dark);
  background: color-mix(in oklch, var(--color-night-2) 88%, transparent);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-snap);
}
.army-option label img { inline-size: 2.2rem; block-size: 2.2rem; object-fit: contain; align-self: center; }
.army-option label span { min-width: 0; align-self: end; font-size: var(--text-sm); font-weight: 800; line-height: 1; }
.army-option label small { display: none; }
.army-option__order { display: none; }
.army-option input:focus-visible + label { outline: var(--rule-thick) solid var(--color-focus); outline-offset: -3px; }
.army-option input:checked + label { z-index: 1; background: color-mix(in oklch, var(--faction-signal) 24%, var(--color-night-2)); box-shadow: inset 0 -3px 0 var(--faction-signal); }
.army-option input:checked + label img { transform: scale(1.12); filter: drop-shadow(0 0.2rem 0.35rem color-mix(in oklch, var(--faction-signal) 45%, transparent)); }
.army-option input:checked + label .army-option__order { display: none; }
.army-briefing { min-height: 5.25rem; padding: var(--space-3) var(--space-4); display: grid; align-items: center; border: var(--rule-thin) solid var(--color-rule-dark); border-block-start: 0; background: color-mix(in oklch, var(--faction-signal) 12%, var(--color-night)); }
.army-briefing p { display: none; margin: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
.army-briefing strong { color: var(--faction-signal); font-size: var(--text-xs); letter-spacing: 0.1em; }
.army-briefing span { font-weight: 700; }
.army-briefing b { grid-column: 1 / -1; color: var(--color-muted-light); font-size: var(--text-xs); letter-spacing: 0.06em; }
.army-selector fieldset:has(#army-fire:checked) .army-briefing--fire,
.army-selector fieldset:has(#army-water:checked) .army-briefing--water,
.army-selector fieldset:has(#army-grass:checked) .army-briefing--grass,
.army-selector fieldset:has(#army-electric:checked) .army-briefing--electric,
.army-selector fieldset:has(#army-ground:checked) .army-briefing--ground,
.army-selector fieldset:has(#army-flying:checked) .army-briefing--flying,
.army-selector fieldset:has(#army-psychic:checked) .army-briefing--psychic,
.army-selector fieldset:has(#army-poison:checked) .army-briefing--poison,
.army-selector fieldset:has(#army-bug:checked) .army-briefing--bug,
.army-selector fieldset:has(#army-normal:checked) .army-briefing--normal { display: grid; }
.enlistment__actions { margin-block-start: var(--space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.button {
  min-height: 3rem;
  padding-inline: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  border: var(--rule-thin) solid transparent;
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.button--primary { background: var(--color-campaign); color: var(--color-accent-ink); }
.button--quiet { color: var(--color-paper); border-color: var(--color-rule-dark); background: color-mix(in oklch, var(--color-night) 72%, transparent); }
.enlistment__note { margin: var(--space-4) 0 0; color: var(--color-muted-light); font-size: var(--text-sm); }
.enlistment__note strong { color: var(--faction-signal, var(--color-fire)); }

.orders { position: relative; padding: var(--space-9) var(--page-pad); background: var(--color-paper); }
.orders__stamp { width: 6.6rem; margin-block-end: var(--space-7); padding: var(--space-3); border: var(--rule-thick) double var(--color-ink-2); color: var(--color-ink-2); font-weight: 800; letter-spacing: 0.1em; line-height: 1.1; transform: rotate(-2deg); }
.orders__stamp strong { font-size: 1.6rem; }
.section-copy { max-width: 68rem; }
.section-copy > p:last-child { max-width: 58ch; margin-block-start: var(--space-5); color: var(--color-ink-2); font-size: var(--text-lead); }
.arc-ledger { margin: var(--space-8) 0 0; padding: 0; list-style: none; border-block-start: var(--rule-thick) solid var(--color-ink); }
.arc-ledger li { padding-block: var(--space-5); display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); border-block-end: var(--rule-thin) solid var(--color-rule); }
.arc-ledger span { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; }
.arc-ledger strong { font-size: 1.25rem; line-height: 1; }
.arc-ledger p { grid-column: 2; margin: 0; color: var(--color-ink-2); }
.orders__totals { margin-block-start: var(--space-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: var(--rule-thin) solid var(--color-rule); border-inline-start: var(--rule-thin) solid var(--color-rule); }
.orders__totals div { min-height: 7rem; padding: var(--space-4); display: grid; align-content: center; border-inline-end: var(--rule-thin) solid var(--color-rule); border-block-end: var(--rule-thin) solid var(--color-rule); }
.orders__totals strong { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; }
.orders__totals span { color: var(--color-muted); font-size: var(--text-sm); }

.route-spread { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-7); background: var(--color-night); color: var(--color-paper); }
.route-spread__copy { max-width: 48rem; }
.route-spread__copy > p:not(.dispatch) { color: var(--color-muted-light); font-size: var(--text-lead); }
.route-key { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
.route-key span { padding: var(--space-2) var(--space-3); border: var(--rule-thin) solid var(--color-rule-dark); color: var(--color-muted-light); font-size: var(--text-xs); font-weight: 700; }
.proof { margin: 0; min-width: 0; }
.proof img { width: 100%; height: auto; border: var(--rule-thin) solid var(--color-rule-dark); background: var(--color-night); }
.proof figcaption { padding-block-start: var(--space-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--color-muted-light); font-size: var(--text-sm); }
.proof figcaption strong { color: var(--color-campaign); text-transform: uppercase; letter-spacing: 0.08em; }
.proof--route { grid-column: 1 / -1; }

.trailer { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-6); background: var(--color-night-2); color: var(--color-paper); border-block: var(--rule-thin) solid var(--color-rule-dark); }
.trailer__head { display: grid; gap: var(--space-4); }
.trailer__head > p { max-width: 52ch; margin: 0; color: var(--color-muted-light); font-size: var(--text-lead); }
.trailer__frame { position: relative; border: var(--rule-thick) solid var(--color-campaign); background: #000; box-shadow: 0 1.2rem 3rem color-mix(in oklch, #000 45%, transparent); }
.trailer__frame::before { content: "FIELD FILM / PW–01"; position: absolute; z-index: 2; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); padding: 0.35rem 0.55rem; background: color-mix(in oklch, var(--color-night) 88%, transparent); color: var(--color-campaign); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; pointer-events: none; }
.trailer video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.trailer__sequence { margin: 0; padding: 0; display: grid; list-style: none; border-block-start: var(--rule-thick) solid var(--color-campaign); }
.trailer__sequence li { padding-block: var(--space-3); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--space-3); border-block-end: var(--rule-thin) solid var(--color-rule-dark); }
.trailer__sequence span { grid-row: 1 / 3; color: var(--color-campaign); font-family: var(--font-display); }
.trailer__sequence strong { color: var(--color-paper); }
.trailer__sequence small { color: var(--color-muted-light); }
.trailer__note { max-width: 72ch; margin: 0; color: var(--color-muted-light); font-size: var(--text-xs); }

.battlefield { background: var(--color-night); color: var(--color-paper); }
.battlefield__scene { position: relative; margin: 0; min-height: 28rem; overflow: hidden; }
.battlefield__scene img { width: 100%; height: 100%; min-height: 28rem; object-fit: cover; object-position: center; }
.battlefield__scene::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--color-night)); }
.battlefield__scene figcaption { position: absolute; z-index: 2; inset-inline: var(--page-pad); inset-block-end: var(--space-5); display: grid; color: var(--color-paper); }
.battlefield__scene figcaption span { color: var(--color-campaign); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.battlefield__scene figcaption strong { font-size: 1.15rem; }
.battlefield__copy { padding: var(--space-8) var(--page-pad) var(--space-9); }
.battlefield__copy > p:not(.dispatch) { max-width: 57ch; color: var(--color-muted-light); font-size: var(--text-lead); }
.command-ledger { margin: var(--space-7) 0 0; border-block-start: var(--rule-thick) solid var(--color-campaign); }
.command-ledger div { padding-block: var(--space-4); display: grid; gap: var(--space-1); border-block-end: var(--rule-thin) solid var(--color-rule-dark); }
.command-ledger dt { color: var(--color-campaign); font-weight: 800; }
.command-ledger dd { margin: 0; color: var(--color-muted-light); }

.company { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-7); background: var(--color-paper-2); }
.company__body > p { max-width: 62ch; margin: 0; font-size: var(--text-lead); color: var(--color-ink-2); }
.company-track { margin: var(--space-6) 0 0; padding: 0; list-style: none; border-block-start: var(--rule-thick) solid var(--color-ink); }
.company-track li { padding-block: var(--space-4); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); border-block-end: var(--rule-thin) solid var(--color-rule); }
.company-track li > span { grid-row: 1 / 3; font-family: var(--font-display); color: var(--color-campaign-strong); }
.company-track strong { font-size: 1.1rem; }
.company-track p { margin: 0; color: var(--color-ink-2); }
.proof--squad img { border-color: var(--color-rule); }
.proof--squad figcaption { color: var(--color-ink-2); }

.armies { padding: var(--space-9) 0; background: var(--color-night); color: var(--color-paper); }
.armies__head { padding-inline: var(--page-pad); display: grid; gap: var(--space-4); }
.armies__head > p { max-width: 48ch; color: var(--color-muted-light); }
.war-table { margin-block-start: var(--space-7); padding-inline: var(--page-pad); display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: var(--color-campaign) var(--color-night-2); }
.war-table a { flex: 0 0 min(17rem, 80vw); min-height: 19rem; padding: var(--space-5); display: grid; align-content: start; scroll-snap-align: start; text-decoration: none; border-block: var(--rule-thin) solid var(--color-rule-dark); border-inline-start: var(--rule-thin) solid var(--color-rule-dark); }
.war-table a:last-child { border-inline-end: var(--rule-thin) solid var(--color-rule-dark); }
.war-table img { inline-size: 4rem; block-size: 4rem; margin-block-end: var(--space-6); object-fit: contain; }
.war-table span { color: var(--color-campaign); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.16em; }
.war-table strong { margin-block-start: var(--space-3); font-size: 1.2rem; line-height: 1.2; }
.war-table small { align-self: end; margin-block-start: var(--space-6); color: var(--color-muted-light); }

.musoka { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-6); background: var(--color-paper-3); color: var(--color-ink); }
.musoka__portrait { inline-size: 8rem; block-size: 8rem; display: grid; place-items: center; border: var(--rule-thick) solid var(--color-ink); background: var(--color-paper); }
.musoka__portrait img { inline-size: 7rem; block-size: 7rem; image-rendering: pixelated; }
.musoka__copy > p:not(.dispatch) { max-width: 58ch; font-size: var(--text-lead); }
.musoka__arc { margin: var(--space-5) 0 0; padding: 0; list-style: none; border-block-start: var(--rule-thick) solid var(--color-ink); }
.musoka__arc li { padding-block: var(--space-4); display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3); border-block-end: var(--rule-thin) solid color-mix(in oklch, var(--color-ink) 35%, transparent); }
.musoka__arc span { font-weight: 800; letter-spacing: 0.12em; }
.musoka__arc p { margin: 0; }
.proof--musoka img { border-color: var(--color-ink); }
.proof--musoka figcaption { color: var(--color-ink-2); }
.proof--musoka figcaption strong { color: var(--color-ink); }

.archive { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-7); background: var(--color-paper); }
.archive header { max-width: 68rem; }
.archive header > p:last-child { max-width: 55ch; color: var(--color-ink-2); font-size: var(--text-lead); }
.archive figure { margin: 0; min-width: 0; opacity: 0; transform: translateY(1.5rem); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.archive figure.is-visible { opacity: 1; transform: translateY(0); }
.archive figure img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; object-position: center; border: var(--rule-thin) solid var(--color-ink); }
.archive figure figcaption { padding-block-start: var(--space-3); display: grid; gap: var(--space-1); }
.archive figure figcaption span { color: var(--color-campaign-strong); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; }
.archive figure figcaption strong { font-size: 1.05rem; }

.realism { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-6); background: var(--color-night); color: var(--color-paper); border-block: var(--rule-thick) solid var(--color-danger); }
.realism__mark { inline-size: 7rem; block-size: 7rem; display: grid; place-items: center; border: var(--rule-thick) solid var(--color-danger); color: var(--color-danger); font-family: var(--font-display); font-size: 2rem; transform: rotate(-3deg); }
.realism p:not(.dispatch) { max-width: 62ch; color: var(--color-muted-light); font-size: var(--text-lead); }
.realism__note { padding-block-start: var(--space-4); border-block-start: var(--rule-thin) solid var(--color-rule-dark); font-size: var(--text-sm) !important; font-weight: 700; }

.field-notes { padding: var(--space-9) var(--page-pad); display: grid; gap: var(--space-7); background: var(--color-paper-2); }
.faq-list { border-block-start: var(--rule-thick) solid var(--color-ink); }
.faq-list details { border-block-end: var(--rule-thin) solid var(--color-rule); }
.faq-list summary { min-height: 3.5rem; padding-block: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--font-display); color: var(--color-campaign-strong); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 70ch; margin: 0 0 var(--space-5); color: var(--color-ink-2); }
.credits { padding: var(--space-5); border: var(--rule-thin) solid var(--color-rule); background: var(--color-paper); }
.credits strong { font-size: 1.2rem; }
.credits p { color: var(--color-ink-2); }
.credits a { text-underline-offset: 0.2em; }
.support-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-4); font-weight: 800; white-space: nowrap; }

.final-order { padding: var(--space-9) var(--page-pad) var(--space-10); display: grid; justify-items: start; background: var(--color-paper); }
.final-order > img { inline-size: 5rem; block-size: 5rem; margin-block-end: var(--space-6); object-fit: contain; }
.final-order h2 { max-width: 16ch; }
.final-order > p:not(.dispatch) { max-width: 48ch; margin-block: var(--space-5); color: var(--color-ink-2); font-size: var(--text-lead); }

footer { padding: var(--space-7) var(--page-pad) 6.5rem; display: grid; gap: var(--space-4); background: var(--color-night); color: var(--color-paper); border-block-start: var(--rule-thin) solid var(--color-rule-dark); }
footer p { max-width: 75ch; margin: 0; color: var(--color-muted-light); font-size: var(--text-xs); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
footer nav a { color: var(--color-campaign); }
.mobile-play { position: fixed; z-index: 30; inset-inline: var(--space-3); inset-block-end: max(var(--space-3), env(safe-area-inset-bottom)); min-height: 3.5rem; display: flex; align-items: center; justify-content: center; gap: var(--space-5); background: var(--color-campaign); color: var(--color-accent-ink); text-decoration: none; font-weight: 800; white-space: nowrap; box-shadow: 0 0.6rem 2rem color-mix(in oklch, var(--color-night) 45%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
  .army-option label:hover { background: color-mix(in oklch, var(--color-paper) 8%, var(--color-night-2)); }
  .war-table a:hover { background: var(--color-night-2); }
  .site-header nav a:not(.nav-play):hover, footer nav a:hover { color: var(--color-campaign); }
}

a:active, .button:active, .army-option label:active, summary:active { transform: translateY(1px); }
button:disabled, [aria-disabled="true"], .army-option input:disabled + label { opacity: 0.55; cursor: not-allowed; filter: saturate(0.45); }

@media (min-width: 40rem) {
  .wordmark { font-size: 1.2rem; }
  .site-header nav a:not(.nav-play) { display: inline-flex; }
  .army-selector__rail { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .army-option label { min-height: 5.25rem; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .army-option label img { grid-row: auto; inline-size: 2.8rem; block-size: 2.8rem; }
  .army-option label small { display: none; }
  .enlistment__actions { flex-direction: row; align-items: center; }
  .orders__totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arc-ledger li { grid-template-columns: 6rem 10rem minmax(0, 1fr); align-items: baseline; }
  .arc-ledger p { grid-column: 3; }
  .battlefield__scene { min-height: 40rem; }
  .battlefield__scene img { min-height: 40rem; }
  .musoka__arc li { grid-template-columns: 10rem minmax(0, 1fr); }
  .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive header { grid-column: 1 / -1; }
  .archive__wide, .archive__ceremony { grid-column: 1 / -1; }
  .archive__wide img, .archive__ceremony img { aspect-ratio: 16 / 7; }
  .archive__tall img, .archive__small img { aspect-ratio: 4 / 3; }
  footer { padding-block-end: var(--space-7); grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  footer nav { grid-column: 1 / -1; }
  .mobile-play { display: none; }
}

@media (min-width: 60rem) {
  .site-header { min-height: 5.25rem; }
  .site-header nav { gap: var(--space-6); }
  .enlistment__content { padding-block-start: 6.5rem; padding-block-end: 9rem; }
  .enlistment__lead { margin-block-start: var(--space-6); }
  .army-selector { margin-block-start: var(--space-6); }
  .orders { display: grid; grid-template-columns: 9rem minmax(0, 0.8fr) minmax(26rem, 1.2fr); gap: var(--space-7); }
  .orders__stamp { margin: 0; align-self: start; }
  .arc-ledger { margin: 0; }
  .orders__totals { grid-column: 2 / -1; }
  .route-spread { grid-template-columns: minmax(18rem, 0.55fr) minmax(0, 1.45fr); align-items: end; }
  .proof--route { grid-column: auto; }
  .trailer__head { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.7fr); align-items: end; }
  .trailer__sequence { grid-template-columns: repeat(6, minmax(0, 1fr)); border-inline-start: var(--rule-thin) solid var(--color-rule-dark); }
  .trailer__sequence li { min-height: 8rem; padding: var(--space-4); display: block; border-inline-end: var(--rule-thin) solid var(--color-rule-dark); }
  .trailer__sequence span, .trailer__sequence strong, .trailer__sequence small { display: block; }
  .trailer__sequence strong { margin-block-start: var(--space-4); }
  .battlefield { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(24rem, 0.75fr); align-items: center; }
  .battlefield__scene, .battlefield__scene img { min-height: 50rem; }
  .battlefield__scene::after { inset: 0 0 0 62%; background: linear-gradient(90deg, transparent, var(--color-night)); }
  .battlefield__copy { padding-inline-start: var(--space-4); }
  .company { grid-template-columns: minmax(20rem, 0.7fr) minmax(0, 1.3fr); }
  .company__heading { align-self: end; }
  .proof--squad { grid-column: 1 / -1; }
  .armies__head { grid-template-columns: minmax(0, 1fr) 24rem; align-items: end; }
  .musoka { grid-template-columns: 9rem minmax(0, 0.8fr) minmax(24rem, 1.2fr); align-items: start; }
  .musoka__arc { margin: 0; }
  .proof--musoka { grid-column: 2 / -1; }
  .archive { grid-template-columns: 1.3fr 0.7fr; }
  .archive__wide { grid-column: 1; grid-row: 2 / span 2; }
  .archive__wide img { aspect-ratio: auto; min-height: 47rem; }
  .archive__tall { grid-column: 2; grid-row: 2; }
  .archive__small { grid-column: 2; grid-row: 3; }
  .archive__ceremony { grid-column: 1 / -1; }
  .realism { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
  .field-notes { grid-template-columns: minmax(18rem, 0.6fr) minmax(0, 1.4fr); }
  .credits { grid-column: 2; }
  .final-order { min-height: 44rem; align-content: center; }
  footer { grid-template-columns: auto minmax(0, 1fr) auto; }
  footer nav { grid-column: auto; justify-content: end; }
}

@media (min-width: 90rem) {
  .orders, .route-spread, .trailer, .company, .musoka, .archive, .realism, .field-notes, .final-order { padding-inline: max(var(--page-pad), calc((100% - var(--content-max)) / 2)); }
  .armies__head, .war-table, .site-header, footer { padding-inline: max(var(--page-pad), calc((100% - var(--content-max)) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .archive figure { opacity: 1; transform: none; }
  .route-line { transform: scaleY(1); }
}

@media print {
  .site-header, .mobile-play, .enlistment__actions, footer nav { display: none; }
  .enlistment { min-height: auto; }
  .enlistment__content { padding-block-start: var(--space-8); }
  .archive figure { opacity: 1; transform: none; break-inside: avoid; }
}