/* ══════════════════════════════════════════════════════════════════
   maestro — the board at working light
   Palette and manners per LORE-v3.md. Single dark theme.
   No external requests: system font stacks only.

   Two palettes coexist here and they never mix on one plane. The rain
   is the environment and keeps its own colours; the board is the object
   and sits on opaque plates that occlude the rain. --charcoal, --brass
   and --teal DUPLICATE values hardcoded in rain.js (lines 12-13 and 78);
   rain.js does not read these variables. Keep them in sync by hand — a
   change here alone silently desyncs the page from the rain.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* environment palette, exact — mirrors rain.js's hardcoded values */
  --orange:   #E8842C;
  --charcoal: #1A1714;
  --cream:    #F2E9D8;
  --teal:     #2E7E74;
  --brass:    #C9A227;
  --blood:    #8C2B1E;

  /* board palette, sampled from the approved hero */
  --board:        #0A0911;
  --bone:         #E1DDDA;
  --copper:       #AD7051;
  --copper-deep:  #8B6453;
  --amber:        #DBA23F;
  --silver:       #C6C2BF;

  /* derived from the board, for interface use */
  --board-lift:   #131120;
  --board-sunk:   #06060C;
  --board-rule:   #2A2536;
  --bone-dim:     #A8A39F;

  /* derived surfaces */
  --ink:      #0B0908;
  --panel:    rgba(26, 23, 20, 0.92);
  --panel-lift: #221E19;
  --rule:     #45392C;
  --rule-hi:  #6B5940;
  --dim:      #B9AC96;
  /* the quietest voice still allowed to carry a sentence: 4.6:1 on --ink.
     --rule-hi is a rule colour, not a text colour — it fails AA below 18px. */
  --dim-2:    #8A7A63;

  --outline:  3px;
  --drop:     7px;

  /* Condensation is done with a horizontal scale, not a font file: system
     narrow faces exist on some platforms and not others, and the wordmark
     must look identical everywhere. */
  --display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans",
             system-ui, sans-serif;
  --squeeze: 0.79;
  --serif:   "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             "URW Palladio L", Georgia, "Liberation Serif", serif;
  --mono:    ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono",
             "Liberation Mono", Menlo, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(1.1rem, 4vw, 3.25rem);
  --band-gap: clamp(4.5rem, 11vh, 8.5rem);
}

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

html {
  background: var(--charcoal);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(16px, 0.55rem + 0.6vw, 18.5px);
  line-height: 1.62;
  overflow-x: hidden;
}

/* ── background layers ─────────────────────────────────────────── */

#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 18%,
      rgba(26, 23, 20, 0.30) 0%,
      rgba(26, 23, 20, 0.72) 55%,
      rgba(11, 9, 8, 0.90) 100%);
}

main, .topbar, .foot { position: relative; z-index: 2; }

/* ── small helpers ─────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--orange);
  color: var(--ink);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

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

.mono, code, pre { font-family: var(--mono); }

code {
  font-size: 0.86em;
  color: var(--brass);
  background: rgba(201, 162, 39, 0.09);
  border: 1px solid rgba(201, 162, 39, 0.28);
  padding: 0.05em 0.34em;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

a { color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ── top bar ───────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem var(--gutter);
  border-bottom: 2px solid var(--rule);
  background: rgba(11, 9, 8, 0.82);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cream);
}
.brand-mark { display: inline-flex; }
.brand-word {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
}
.brand:hover .brand-word { color: var(--orange); }

.topnav {
  display: flex;
  gap: clamp(0.7rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.topnav a {
  color: var(--dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--cream); border-bottom-color: var(--orange); }
.topnav-out { color: var(--brass) !important; }

/* ── hero ──────────────────────────────────────────────────────── */

.hero {
  padding: clamp(2rem, 6vh, 4rem) var(--gutter) 0;
  max-width: 1240px;
  margin: 0 auto;
}

.hero-text { margin-top: clamp(-2.2rem, -1.4vw, -0.4rem); position: relative; }

/* The hook has to be readable without scrolling, so the plate is capped by
   viewport height rather than by its own aspect ratio, and crops instead. */
.plate--hero .plate-frame {
  aspect-ratio: auto;
  height: clamp(190px, 36vh, 400px);
}
/* Narrow frames crop horizontally, and Oscar sits at the left of the plate:
   anchor there so the crop never takes his face out of the picture. */
@media (max-width: 900px) {
  .plate--hero .plate-frame img { object-position: 18% center; }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.5rem;
}
.eyebrow--hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.eyebrow--hero::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--rule);
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.78;
  font-size: clamp(3.6rem, 15vw, 11rem);
  margin: 0;
  color: var(--cream);
  text-shadow: var(--drop) var(--drop) 0 var(--ink);
  transform: scaleX(var(--squeeze));
  transform-origin: left center;
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 4.6vw, 2.6rem);
  color: var(--orange);
  margin: 0.5rem 0 0;
  line-height: 1.15;
}

.subhead {
  max-width: var(--measure);
  margin: 1.15rem 0 0;
  font-size: 1.06em;
  color: var(--cream);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 0;
}

.hero-fine {
  max-width: 56ch;
  margin: 2.4rem 0 0;
  padding-left: 1.1rem;
  border-left: var(--outline) solid var(--brass);
  color: var(--dim);
  font-size: 0.95em;
}

/* the one quip the hero region is allowed */
.hero-quip {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  color: var(--dim-2);
  font-style: italic;
  font-size: 0.95rem;
}

/* ── buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border: var(--outline) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--brass); color: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn-ghost:hover { background: var(--cream); color: var(--ink); }
.btn:hover, .btn:focus-visible { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }

/* ── plates (art containers + placeholders) ────────────────────── */

/* A plate is a window onto the board world. It is opaque, so it occludes
   the rain rather than tinting over it; its ground is --board, a cool
   black one step away from the rain's warm --charcoal, and that step is
   what makes it read as an object in front of the environment. Corners
   stay square and no filter, blend mode or opacity is ever applied to
   board imagery — the palette is already in the pixels. */

.plate { margin: 0; }

.plate-frame {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  border: var(--outline) solid var(--copper-deep);
  border-radius: 0;
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
  background: var(--board);
  overflow: hidden;
}

.plate-holder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  background-color: var(--board);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(173, 112, 81, 0.07) 0 2px,
    transparent 2px 13px);
}
.holder-mono { width: clamp(48px, 9vw, 88px); height: auto; opacity: 0.9; }
.holder-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--dim-2);
}

.plate-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the diagrams open at full size; the anchor must not become the layout box */
.plate-zoom { position: absolute; inset: 0; display: block; }
.plate--diagram .plate-frame img { object-fit: contain; padding: clamp(0.5rem, 2vw, 1.25rem); }
.plate--terminal .plate-frame { background: var(--ink); }
.plate--terminal .plate-frame img { padding: 0; }
/* set by rain.js: the art is late, or the art has arrived */
.plate-frame img.is-missing { display: none; }
.plate-frame.has-art .plate-holder { display: none; }

.plate figcaption {
  margin-top: 0.85rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--dim);
  font-size: 0.92rem;
  max-width: 54ch;
}
.fig-n {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-right: 0.5rem;
}

/* ── bands ─────────────────────────────────────────────────────── */

.band {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--band-gap) var(--gutter) 0;
}

.band-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }

.sec-no {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}
.sec-no span {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  padding: 0.15rem 0.4rem;
  border: 2px solid var(--brass);
  color: var(--brass);
  letter-spacing: 0.08em;
}
.sec-no::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--rule);
}

.sec-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.9;
  font-size: clamp(2.5rem, 8.4vw, 5.6rem);
  margin: 0;
  max-width: 22ch;
  color: var(--cream);
  text-shadow: 5px 5px 0 var(--ink);
  transform: scaleX(var(--squeeze));
  transform-origin: left center;
}

.sec-lede {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  color: var(--cream);
}

/* ── roster ────────────────────────────────────────────────────── */

.roster {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: var(--outline) solid var(--rule-hi);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.roster thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-bottom: 2px solid var(--rule-hi);
  background: var(--ink);
}
.roster tbody tr { border-bottom: 1px solid var(--rule); }
.roster tbody tr:last-child { border-bottom: 0; }
.roster tbody tr:hover { background: rgba(201, 162, 39, 0.05); }
.roster th[scope="row"] {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02em;
  color: var(--cream);
  text-align: left;
  padding: 0.85rem 1.1rem;
  white-space: nowrap;
  width: 1%;
}
.roster td { padding: 0.85rem 1.1rem; vertical-align: top; color: var(--dim); }
.roster td.seat {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--brass);
  white-space: nowrap;
  width: 1%;
  line-height: 1.7;
}

.band#household .plate--wide { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ── split layouts ─────────────────────────────────────────────── */

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.split--portrait { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); }
.split--install  { grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); }

@media (max-width: 860px) {
  .split, .split--portrait, .split--install { grid-template-columns: minmax(0, 1fr); }
}

/* ── the record ─────────────────────────────────────────────── */

.ledger {
  border: var(--outline) solid var(--brass);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
  background: var(--ink);
}
.ledger-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid var(--brass);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.ledger-tag { color: var(--teal); }
.ledger-body { overflow-x: auto; }
.ledger pre {
  margin: 0;
  padding: 1rem 0.9rem;
  font-size: 0.72rem;
  line-height: 1.95;
  color: var(--dim);
  white-space: pre;
}
.ledger .ln { color: var(--rule-hi); margin-right: 0.75rem; }
.ledger .k { color: var(--dim); }
.ledger .v { color: var(--cream); }
.ledger .v-open { color: var(--orange); }
.ledger .v-warn { color: var(--orange); }
.ledger .v-ok { color: var(--teal); }
.ledger .ok { color: var(--teal); font-weight: 700; }
.ledger .bad { color: var(--blood); font-weight: 700; }
.ledger-foot {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--dim);
  font-style: italic;
}
.ledger-foot .mono { font-style: normal; font-size: 0.9em; color: var(--brass); }

.notes h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  color: var(--brass);
}
.drawers { margin: 0 0 1.6rem; }
.drawers dt {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream);
  font-size: 1.05em;
  margin-top: 1rem;
}
.drawers dt:first-child { margin-top: 0; }
.drawers dd {
  margin: 0.2rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--dim);
  font-size: 0.96em;
}
.pull {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 2px solid var(--rule-hi);
  border-left: var(--outline) solid var(--blood);
  font-size: 0.95em;
  color: var(--cream);
}
.pull .mono { font-size: 0.82em; color: var(--brass); }

/* ── night / recovery ──────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.prose p { margin-top: 0; }

.checkpoint {
  margin-top: 1.8rem;
  padding: 1.2rem 1.3rem;
  background: var(--panel);
  border: var(--outline) solid var(--rule-hi);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.checkpoint p { margin: 0 0 0.7rem; color: var(--dim); }
.checkpoint p:last-child { margin-bottom: 0; }
.checkpoint-title {
  font-family: var(--mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass) !important;
}
.checkpoint-line {
  font-size: 0.9rem;
  color: var(--teal) !important;
  border-left: 3px solid var(--teal);
  padding-left: 0.8rem;
  letter-spacing: 0.02em;
}

/* ── crests ────────────────────────────────────────────────────── */

.crests {
  list-style: none;
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  padding: 0;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.crest {
  text-align: center;
  padding: 1.5rem 1rem 1.2rem;
  background: var(--panel);
  border: var(--outline) solid var(--rule-hi);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.crest svg { width: clamp(74px, 12vw, 96px); height: auto; }
.crest .shield {
  fill: rgba(11, 9, 8, 0.75);
  stroke: var(--ink);
  stroke-width: 5;
}
.crest .charge { fill: none; stroke-width: 6; }
/* the family marks are told apart by their charge, not by hue: bone
   shield, copper charge, the same on all three. */
.crest--claude  .shield,
.crest--gpt     .shield,
.crest--gemini  .shield { stroke: var(--bone); }
.crest--claude  .charge,
.crest--gpt     .charge,
.crest--gemini  .charge { stroke: var(--copper); }

.crest-name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.5rem;
  margin: 0.9rem 0 0.2rem;
  color: var(--cream);
}
.crest-note {
  margin: 0;
  font-style: italic;
  color: var(--dim);
  font-size: 0.94rem;
}
.crest-rev {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.crest-rev b { color: var(--brass); font-weight: 400; }

/* ── the ladder ────────────────────────────────────────────────── */

.ladder {
  border-top: 2px solid var(--rule);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
}
.ladder h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  margin: 0 0 1.2rem;
  color: var(--brass);
}
.rungs {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.rungs li {
  padding: 1.1rem 1.2rem;
  background: var(--panel);
  border: 2px solid var(--rule-hi);
  border-top: var(--outline) solid var(--brass);
  color: var(--dim);
  font-size: 0.97em;
}
.rung-n {
  display: block;
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--orange);
  margin-bottom: 0.35rem;
}
.rungs em { color: var(--cream); font-style: italic; }
.ladder-foot { margin: 0; max-width: var(--measure); color: var(--cream); }
.ladder-foot em { color: var(--orange); font-style: italic; }

/* ── the three rules ───────────────────────────────────────────── */

.rules {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  padding: 0;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}
.rule {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background: var(--panel);
  border: var(--outline) solid var(--rule-hi);
  border-top: var(--outline) solid var(--brass);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.rule-n {
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--copper);
}
.rule-title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.22rem;
  line-height: 1.1;
  color: var(--cream);
}
.rule p:last-child {
  margin: 0;
  color: var(--dim);
  font-size: 0.97em;
}

/* ── install ───────────────────────────────────────────────────── */

.install-step {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 1.9rem 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.12em;
  color: var(--cream);
}
.install-step:first-child { margin-top: 0; }
.install-step span {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--orange);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.85rem;
}
.install-note {
  margin: 0;
  padding-left: 2.65rem;
  color: var(--dim);
  font-size: 0.96em;
  max-width: 58ch;
}
.install-note code.cmd { color: var(--teal); border-color: rgba(46, 126, 116, 0.4); background: rgba(46, 126, 116, 0.08); }

.copyline {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.9rem 0 0.9rem 2.65rem;
  border: var(--outline) solid var(--brass);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--ink);
  flex-wrap: wrap;
}
.copyline code {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  font-size: 0.83rem;
  line-height: 1.95;
  color: var(--cream);
  background: transparent;
  border: 0;
  overflow-x: auto;
  white-space: pre;
}
.copy {
  flex: none;
  border: 0;
  border-left: var(--outline) solid var(--brass);
  background: var(--brass);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 1.1rem;
  cursor: pointer;
}
.copy:hover { background: var(--orange); }
.copy[data-done="1"] { background: var(--teal); color: var(--cream); }

.commands {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  border-top: 2px solid var(--rule);
}
.commands li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.commands code {
  flex: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--brass);
  font-size: 0.86rem;
}
.commands span { color: var(--dim); font-size: 0.93rem; font-style: italic; }

/* ── trees ─────────────────────────────────────────────────────── */

.trees {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}
.plate figcaption a { color: var(--brass); }
.plate figcaption a:hover { color: var(--orange); }

/* ── footer ────────────────────────────────────────────────────── */

.foot {
  margin-top: clamp(5rem, 12vh, 9rem);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 7vw, 4.5rem);
  border-top: var(--outline) solid var(--brass);
  background: rgba(11, 9, 8, 0.9);
}
.foot > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.foot-tag {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 7.4vw, 4.4rem);
  line-height: 0.95;
  margin: 0 auto 1.8rem;
  color: var(--brass);
  transform: scaleX(var(--squeeze));
  transform-origin: left center;
}
.foot-grid {
  display: grid;
  gap: 1.1rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.foot-grid p { margin: 0; color: var(--dim); font-size: 0.95rem; }
.foot-fine {
  margin: 1.6rem auto 0;
  max-width: 60ch;
  color: var(--dim-2);
  font-style: italic;
  font-size: 0.92rem;
}

/* ── narrow screens ────────────────────────────────────────────── */

@media (max-width: 720px) {
  .roster, .roster thead, .roster tbody, .roster tr, .roster th, .roster td {
    display: block;
    width: auto;
  }
  .roster thead { display: none; }
  .roster { border-width: var(--outline); }
  .roster tbody tr {
    padding: 0.9rem 0.2rem;
    border-bottom: 2px solid var(--rule);
  }
  .roster th[scope="row"] {
    white-space: normal;
    padding: 0 1rem 0.15rem;
    font-size: 1.1em;
  }
  .roster td.seat { padding: 0 1rem 0.4rem; white-space: normal; }
  .roster td { padding: 0 1rem; }
  .hero-text { margin-top: 1.5rem; }
  .wordmark { text-shadow: 4px 4px 0 var(--ink); }
  .sec-title { text-shadow: 3px 3px 0 var(--ink); }
  .cta { gap: 0.75rem; }
  .btn { padding: 0.8rem 1.2rem; font-size: 0.78rem; letter-spacing: 0.12em; }
}

@media (max-width: 400px) {
  .topnav { font-size: 0.7rem; gap: 0.6rem; }
  .copyline { margin-left: 0; }
  .install-note { padding-left: 0; }
}

/* ── reduced motion ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; box-shadow: 6px 6px 0 var(--ink); }
}

/* ── print: the record, on paper ────────────────────────────── */

@media print {
  #rain, .vignette, .topnav, .copy { display: none; }
  body { color: #000; background: #fff; }
  .plate-frame, .roster, .ledger, .crest, .rule, .checkpoint { box-shadow: none; }
}