.hidden { display: none !important; }

:root {
  --void: #0B0D0B;
  --panel: #121612;
  --raised: #1A211A;
  --line: #263026;
  --bone: #E5E4DA;
  --muted: #7E877B;
  --toxic: #86C232;
  --toxic-hi: #A8E063;
  --arterial: #E33B2E;
  --gore: #8E1F16;
  --amberish: #E8C15A;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cond: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Impact, sans-serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wide: min(1400px, 92vw);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--void); color: var(--bone);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  margin: 0; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* Shared furniture ------------------------------------------------ */
.eyebrow { font-family: var(--cond); text-transform: uppercase; letter-spacing: .22em;
  font-size: 10.5px; font-weight: bold; color: var(--toxic); margin: 0 0 10px; }
h2 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.0; margin: 0 0 12px; text-wrap: balance; }
.lnk { display: inline-block; margin-top: 6px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .12em; font-weight: bold; font-size: 13px; color: var(--toxic-hi);
  border-bottom: 1px solid rgba(168,224,99,.35); padding-bottom: 2px; }
.lnk:hover { border-bottom-color: var(--toxic-hi); }

/* ---------- top nav ---------- */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(6,8,6,.86), rgba(6,8,6,0));
  transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; }
.topnav.stuck { background: rgba(8,10,8,.94); border-bottom-color: var(--line); backdrop-filter: blur(10px); }
.topnav-in { width: var(--wide); margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 14px 0; }
.wordmark { font-family: var(--cond); font-weight: bold; font-size: clamp(17px, 2vw, 21px);
  letter-spacing: .2em; line-height: 1; }
.wordmark .bite { position: relative; display: inline-block; }
.wordmark .bite::after { content: ""; position: absolute; right: -3px; top: -5px; width: 11px; height: 11px;
  border-radius: 50%; background: #0A0C0A; box-shadow: 4px 7px 0 -4px #0A0C0A; }
.wordmark small { display: block; font-size: 8px; letter-spacing: .42em; color: var(--toxic); margin-top: 4px; }
.topnav-links { display: flex; gap: 22px; margin-left: auto; font-family: var(--cond);
  text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: bold; color: var(--muted); }
.topnav-links a:hover { color: var(--bone); }
.topnav-cta { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: bold; font-size: 13px; color: #FF7A6E; border: 1px solid rgba(227,59,46,.55);
  border-radius: 999px; padding: 9px 18px; white-space: nowrap; }
.topnav-cta:hover { border-color: var(--arterial); box-shadow: 0 0 24px rgba(227,59,46,.25); }
@media (max-width: 820px) { .topnav-links { display: none; } .topnav-cta { margin-left: auto; } }
/* The wordmark is one word and must never break: at 375px the tracking pushed
   the D onto its own line, which reads as a rendering fault rather than a logo. */
.wordmark > span { white-space: nowrap; }
@media (max-width: 460px) {
  .topnav-in { gap: 12px; }
  .wordmark { font-size: 15px; letter-spacing: .13em; }
  .wordmark small { letter-spacing: .26em; font-size: 7.5px; }
  .topnav-cta { font-size: 12px; padding: 8px 14px; }
}

/* ---------- hero ---------- */
/* Deliberately a little under a full viewport: at exactly 100svh nothing below
   the fold is ever visible at rest, and the page reads as though it has no
   below. Letting the next section's top edge peek is the cheapest possible
   scroll affordance. */
.hero { position: relative; min-height: clamp(600px, 92svh, 920px);
  display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-veil { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,7,6,.72) 0%, rgba(5,7,6,.22) 32%, rgba(5,7,6,.78) 76%, var(--void) 100%),
    radial-gradient(ellipse 80% 65% at 30% 50%, transparent 30%, rgba(0,0,0,.55) 100%); }
.hero-inner { position: relative; width: var(--wide); margin: 0 auto; padding: 118px 0 84px; }
.hero h1 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(46px, 9.5vw, 108px); line-height: .9; margin: 0 0 22px; text-wrap: balance;
  text-shadow: 0 6px 44px rgba(0,0,0,.85); }
.hero h1 em { font-style: normal; color: var(--arterial); text-shadow: 0 0 44px rgba(227,59,46,.5); }
.lede { max-width: 58ch; color: #CDD1C3; margin: 0; font-size: clamp(16px, 1.6vw, 18.5px);
  text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.lede b { color: var(--bone); font-weight: 600; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 0; }
.btn-go, .btn-quiet, .btn-primary { font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .13em; font-weight: bold; font-size: 15px; border-radius: 999px;
  padding: 15px 32px; border: 1px solid; display: inline-block; transition: box-shadow .18s ease, transform .18s ease; }
.btn-go { background: rgba(227,59,46,.14); border-color: var(--arterial); color: #FF8A7E; }
.btn-go:hover { box-shadow: 0 0 34px rgba(227,59,46,.36); transform: translateY(-1px); }
.btn-quiet { border-color: var(--line); color: var(--bone); background: rgba(10,13,10,.5); }
.btn-quiet:hover { border-color: var(--toxic); color: var(--toxic-hi); }

.hero-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  letter-spacing: .02em; margin: 16px 0 0; max-width: 62ch;
  text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.hero-note a { color: #FF8A7E; border-bottom: 1px solid rgba(227,59,46,.4); }
.hero-note a:hover { border-bottom-color: var(--arterial); }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 38px 0 0; padding: 0; }
.hero-facts li { display: flex; align-items: baseline; gap: 8px; }
.hero-facts b { font-family: var(--cond); font-size: 30px; line-height: 1; color: var(--toxic-hi); }
/* Direct child only: the figure itself is a <span class="n"> inside the <b>, and
   an unscoped `.hero-facts span` styled the number as though it were the label. */
.hero-facts li > span { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.hero-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: 22px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll { animation: bob 2.4s ease-in-out infinite; }
  @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
}

/* ---------- generic section ---------- */
main { display: block; }
.sec { width: var(--wide); margin: 0 auto; padding: 92px 0; }
.sec-head { max-width: 64ch; margin-bottom: 34px; }
.sec-head p:last-child { color: var(--muted); margin: 0; }
.sec-head p b, .beat p b { color: var(--bone); font-weight: 600; }

/* ---------- the wave curve ---------- */
.wave { margin: 0 0 54px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--panel), #0E120E); padding: 30px 28px 22px; }
.wave-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(6px, 1.4vw, 20px);
  align-items: end; height: clamp(150px, 22vw, 240px); }
.wb { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.wb::after { content: ""; display: block; height: calc(var(--v) * 1%);
  background: linear-gradient(180deg, var(--gore), rgba(142,31,22,.35));
  border-top: 2px solid var(--arterial); border-radius: 3px 3px 0 0; }
.wb.last::after { background: linear-gradient(180deg, var(--arterial), rgba(227,59,46,.3));
  box-shadow: 0 0 26px rgba(227,59,46,.34); }
.wb.convoy::after { background: repeating-linear-gradient(45deg, rgba(134,194,50,.34) 0 6px, transparent 6px 12px);
  border-top-color: var(--toxic); }
.wb b { font-family: var(--cond); font-size: clamp(15px, 2vw, 22px); text-align: center;
  color: var(--bone); margin-bottom: 5px; }
.wb.convoy b { color: var(--toxic-hi); }
.wb i { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--muted); }
.wave figcaption { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px; }
.wave figcaption b { color: var(--bone); font-weight: 600; }

/* ---------- beats ---------- */
.beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.beat-n { font-family: var(--mono); font-size: 11px; color: var(--toxic); letter-spacing: .16em; }
.beat h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: 21px; margin: 8px 0 8px; }
.beat p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- split feature ---------- */
.split { width: var(--wide); margin: 0 auto; padding: 74px 0; display: grid;
  grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 72px); align-items: center;
  border-top: 1px solid var(--line); }
.split.reverse .split-img { order: 2; }
.split-img { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #0E120E; }
.split-img img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 12 / 5;
  filter: saturate(.82) contrast(1.04); }
.plate-tag { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 10px;
  color: rgba(229,228,218,.62); background: rgba(6,8,6,.72); border-top: 1px solid var(--line);
  border-right: 1px solid var(--line); padding: 6px 12px; text-transform: uppercase; letter-spacing: .08em; }
.split-txt p { color: var(--muted); }
.split-txt p b { color: var(--bone); font-weight: 600; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; padding: 54px 0; }
  .split.reverse .split-img { order: 0; }
}

/* ---------- doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1040px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }
.door { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 22px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(12,16,12,.82);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.door:hover { transform: translateY(-2px); }
.door.drill { border-color: rgba(227,59,46,.55); background: linear-gradient(180deg, rgba(30,14,12,.7), rgba(12,16,12,.85)); }
.door.drill:hover { border-color: var(--arterial); box-shadow: 0 0 34px rgba(227,59,46,.25); }
.door-tag { font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em; font-size: 10px;
  font-weight: bold; color: var(--toxic-hi); }
.door-name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: 29px; font-weight: bold; line-height: 1; margin: 0; }
.door-copy { color: var(--muted); font-size: 14.5px; }
.door-copy b { color: var(--bone); font-weight: 600; }
.door-cta { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: bold; font-size: 14px; margin-top: 4px; }
.door.drill .door-cta, .door.drill .door-tag { color: #FF7A6E; }
.door-foot { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }

/* A locked door is a posting order, not a broken link: it keeps its place, but
   the accent drains out, the edge goes dashed, and the CTA becomes a status. */
.door.locked { background: rgba(10,13,10,.6); border: 1px dashed #222A22; cursor: default; }
.door.locked:hover { transform: none; border-color: #2C352C; box-shadow: none; }
.door.locked .door-name { color: #6E766B; }
/* --muted, not a darker grey: this copy explains the roadmap, and the old
   #5C6459 fell under 4.5:1 against the near-black panel. */
.door.locked .door-copy { color: var(--muted); }
.door-tag.lock { color: var(--muted); }
.door-status { display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: bold; font-size: 14px; color: #7E877B; }
.door-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #48513F; }
.door.real.locked .door-status { color: rgba(232,193,90,.8); }
.door.real.locked .door-status::before { background: var(--amberish); box-shadow: 0 0 8px rgba(232,193,90,.55); }
/* The main-game door: locked, but filed as the destination, not a footnote —
   amber accents against the Drill's red, and its name keeps full weight. */
.door.real .door-tag { color: var(--amberish); }
.door.real.locked { border-color: rgba(232,193,90,.32); }
.door.real.locked .door-name { color: var(--bone); }
@media (prefers-reduced-motion: no-preference) {
  .door.real.locked .door-status::before { animation: standby 2.6s ease-in-out infinite; }
  @keyframes standby { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.door-link { color: var(--amberish); border-bottom: 1px solid rgba(232,193,90,.35); }
.door-link:hover { border-bottom-color: var(--amberish); }

/* The live door is a card with two destinations now — straight into a run, or
   to the mode page for anyone who wants to know what they are agreeing to —
   so it stopped being one big anchor. */
.door.drill { cursor: default; }
.door-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.door-go { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-weight: bold;
  font-size: 14px; color: #FF8A7E; background: rgba(227,59,46,.14); border: 1px solid var(--arterial);
  border-radius: 999px; padding: 11px 22px; transition: box-shadow .18s ease; }
.door-go:hover { box-shadow: 0 0 26px rgba(227,59,46,.35); }
.door-more { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: bold; font-size: 13px; color: var(--muted); border-bottom: 1px solid transparent; }
.door-more:hover { color: var(--bone); border-bottom-color: var(--line); }

/* Seven bars, the size of a signature. The whole chart lives on /drill; this is
   just enough to show that the thing escalates. */
.door-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 6px; }
.door-spark i { flex: 1; height: calc(var(--v) * 1%); border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, var(--arterial), rgba(142,31,22,.4)); }
.door-sparklabel { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .02em; }

/* ---------- mode page ---------- */
/* The orientation strip under the Drill hero: one Authority filing line that
   places the mode inside the game, so nobody mistakes the Drill for the whole. */
.mode-note { width: var(--wide); margin: 0 auto; padding: 14px 18px; display: flex;
  flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between;
  border: 1px solid rgba(232,193,90,.3); border-radius: 12px; background: rgba(20,18,10,.55);
  font-size: 13.5px; color: var(--muted); }
.mode-note b { color: var(--bone); font-weight: 600; }
.mode-note a { color: var(--amberish); border-bottom: 1px solid rgba(232,193,90,.35); }
.mode-note a:hover { border-bottom-color: var(--amberish); }
.mode-note-lnk { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: bold; font-size: 12px; white-space: nowrap; }
.mode-hero { min-height: clamp(560px, 82svh, 820px); }
.mode-hero .hero-bg { object-position: center 62%; }
.crumb { color: var(--muted); border-bottom: 1px solid transparent; }
.crumb:hover { color: var(--bone); border-bottom-color: var(--line); }
.topnav-links a.here { color: var(--bone); }

/* ---------- pacts ---------- */
.pacts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .pacts { grid-template-columns: 1fr; } }
.pact { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 24px 26px; }
.pact.hard { border-color: rgba(232,193,90,.4); background: linear-gradient(180deg, rgba(30,25,10,.5), var(--panel)); }
.pact-tag { font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em;
  font-size: 10px; font-weight: bold; color: var(--toxic); }
.pact.hard .pact-tag { color: var(--amberish); }
.pact h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em;
  font-size: 30px; margin: 8px 0 6px; }
.pact-line { font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: #D6D9CB; font-size: 17px; margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); }
.pact p { color: var(--muted); margin: 0; font-size: 14.5px; }
.pact p b { color: var(--bone); font-weight: 600; }

.grades { margin-top: 26px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(12,16,12,.6); padding: 18px 22px; }
.grades-head { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10px; font-weight: bold; color: var(--muted); display: block; margin-bottom: 12px; }
.grade-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: g; }
.grade-list li { border-left: 2px solid var(--toxic); padding-left: 12px; }
.grade-list li:nth-child(2) { border-left-color: var(--toxic-hi); }
.grade-list li:nth-child(3) { border-left-color: var(--amberish); }
.grade-list li:nth-child(4) { border-left-color: var(--gore); }
.grade-list li.lost { border-left-color: #3E4A3C; }
.grade-list b { display: block; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; }
.grade-list i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--muted); }

/* ---------- live wire ---------- */
.wire-sec { border-top: 1px solid var(--line); }
.wire-box { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.wire-stat { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  padding: 15px 20px; border-bottom: 1px solid var(--line); background: rgba(26,33,26,.5); }
.wire-stat .ws { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wire-stat .ws b { color: var(--bone); font-size: 14px; }
.wire-stat .ws.living b { color: var(--toxic-hi); }
.wire-stat .ws.dead b { color: #FF7A6E; }
.wire-loading { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wire-districts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border-bottom: 1px solid var(--line); }
.wd { background: var(--panel); padding: 12px 15px; }
.wd-name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: bold; }
.wd-pop { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.wd-state { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: bold; margin-top: 3px; }
.wd.holding .wd-state { color: var(--toxic-hi); }
.wd.contested .wd-state { color: var(--amberish); }
.wd.failing .wd-state, .wd.lost .wd-state { color: #FF7A6E; }
.wd.silent .wd-state { color: var(--muted); }
.wire-feed { list-style: none; margin: 0; padding: 8px 20px 16px; max-height: 340px; overflow-y: auto; }
.wire-feed li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1A211A; font-size: 13.5px; }
.wire-feed li:last-child { border-bottom: none; }
.wire-feed .fdot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; }
.fdot.k { background: var(--arterial); box-shadow: 0 0 7px rgba(227,59,46,.6); }
.fdot.e { background: var(--amberish); }
.fdot.g { background: var(--toxic); }
.wire-feed time { font-family: var(--mono); font-size: 10px; color: var(--muted); flex: none; padding-top: 3px; }

/* ---------- records ---------- */
.records { position: relative; padding: 104px 0; overflow: hidden; border-top: 1px solid var(--line); }
/* The plate sits behind the type rather than beside it, so it is dimmed hard —
   but not to nothing. At the original scrim weight the photograph was
   indistinguishable from flat black, which is a 200KB request for no picture. */
.records-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .5; filter: saturate(.7); }
.records-veil { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(9,11,9,.46) 26%, rgba(9,11,9,.52) 72%, var(--void) 100%),
    linear-gradient(90deg, rgba(9,11,9,.86) 0%, rgba(9,11,9,.3) 62%, transparent 100%); }
.records-in { position: relative; width: var(--wide); margin: 0 auto; }
.records-lede { color: var(--muted); max-width: 62ch; margin: 0 0 26px; }
.record-card { margin: 0; border: 1px solid rgba(232,193,90,.35); border-radius: 14px;
  background: rgba(12,16,12,.82); padding: 20px 24px; max-width: 760px; }
.record-card figcaption { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10px; font-weight: bold; color: var(--amberish); }
.record-card blockquote { margin: 10px 0 0; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 18px; line-height: 1.62; color: #D6D9CB; border-left: 2px solid rgba(232,193,90,.4); padding-left: 18px; }

/* ---------- manual grid ---------- */
.manual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.mcard { display: block; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 18px 20px; transition: border-color .16s ease, transform .16s ease; }
.mcard:hover { border-color: var(--toxic); transform: translateY(-2px); }
.mcard-i { font-family: var(--mono); font-size: 10px; color: #3E4A3C; display: block; margin-bottom: 6px; }
.mcard-t { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: 19px; font-weight: bold; display: block; }
.mcard-d { color: var(--muted); font-size: 13.5px; display: block; margin-top: 5px; line-height: 1.5; }
.mcard.all { border-color: rgba(134,194,50,.4); display: flex; flex-direction: column; justify-content: center; }
.mcard.all .mcard-t { color: var(--toxic-hi); }

/* ---------- enlist ---------- */
.enlist { text-align: center; width: var(--wide); margin: 0 auto; padding: 92px 0; border-top: 1px solid var(--line); }
.enlist h2 { max-width: 22ch; margin-inline: auto; }
.enlist > p { color: var(--muted); max-width: 58ch; margin: 0 auto; }
.enlist-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 12px; }
.btn-primary { background: rgba(232,193,90,.12); border-color: var(--amberish); color: var(--amberish); }
.btn-primary:hover { box-shadow: 0 0 26px rgba(232,193,90,.25); }
.enlist-note { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: #080A08; }
.foot-in { width: var(--wide); margin: 0 auto; padding: 46px 0 30px; display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 800px) { .foot-in { grid-template-columns: 1fr 1fr; } }
.foot-mark { font-family: var(--cond); font-weight: bold; letter-spacing: .18em; font-size: 15px; display: block; }
.foot-sub { font-size: 13px; color: var(--muted); max-width: 44ch; display: block; margin-top: 8px; }
.foot-col { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.foot-col b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; color: var(--bone); margin-bottom: 3px; }
.foot-col a { color: var(--muted); }
.foot-col a:hover { color: var(--toxic-hi); }
.foot-rule { width: var(--wide); margin: 0 auto; padding: 16px 0 44px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: #4A5247; }