/* --------------------------------------------------
   BREAK CONTACT - Modern Tactical RTS Landing Page CSS
   Theme: Field manual / tactical command display
   Ported from the "Konflikt Site" design (Claude Design)
-------------------------------------------------- */

:root {
  /* Ground & panels */
  --bg: #0a0b09;
  --bg-panel: #0d0e0b;
  --bg-panel-2: #0b0c09;
  --bg-footer: #080907;
  --bg-media: #14150f;
  --bg-header: rgba(8, 9, 7, 0.86);
  --bg-cell: rgba(11, 12, 10, 0.9);

  /* Accents */
  --ac: #d8b26a;                 /* sand */
  --ac-hover: #efd9a6;
  --ac-06: rgba(216, 178, 106, 0.06);
  --ac-12: rgba(216, 178, 106, 0.12);
  --ac-16: rgba(216, 178, 106, 0.16);
  --ac-24: rgba(216, 178, 106, 0.24);
  --ac-34: rgba(216, 178, 106, 0.34);
  --ac-35: rgba(216, 178, 106, 0.35);
  --ac-45: rgba(216, 178, 106, 0.45);
  --ac-50: rgba(216, 178, 106, 0.5);
  --ac-55: rgba(216, 178, 106, 0.55);

  --red: #c0524a;                /* alert / suppression / rear plate */
  --red-soft: #d9756c;
  --red-45: rgba(192, 82, 74, 0.45);
  --red-50: rgba(192, 82, 74, 0.5);
  --red-18: rgba(192, 82, 74, 0.18);

  --steel: #7fa8ce;              /* vision / front plate */
  --steel-45: rgba(127, 168, 206, 0.45);
  --steel-55: rgba(127, 168, 206, 0.55);

  /* Text ramp, brightest to dimmest */
  --t-1: #f7f2e4;
  --t-2: #f2eee3;
  --t-3: #d9d4c7;
  --t-4: #c7c2b6;
  --t-5: #a29e92;
  --t-6: #8a867b;
  --t-7: #7e7b70;
  --t-8: #6e6b62;
  --t-9: #5f5d55;
  --t-10: #4e4c45;
  --t-11: #3c3e36;

  /* Hairlines */
  --line-10: rgba(224, 214, 192, 0.1);
  --line-12: rgba(224, 214, 192, 0.12);
  --line-14: rgba(224, 214, 192, 0.14);
  --line-16: rgba(224, 214, 192, 0.16);
  --line-20: rgba(224, 214, 192, 0.2);
  --line-22: rgba(224, 214, 192, 0.22);
  --grid-line: rgba(233, 228, 215, 0.022);
  --fill-faint: rgba(233, 228, 215, 0.018);

  /* Field background — the procedural stack that replaced the photo hero.
     Deliberately louder than --grid-line: that one is a whisper behind panels,
     these are the surface itself and have to read as a plotted map sheet. */
  --field-base: #0c0d0a;
  --field-fine: rgba(233, 228, 215, 0.045);   /* 32px minor grid */
  --field-accent: rgba(216, 178, 106, 0.09);  /* 256px major grid */
  --field-dot: rgba(233, 228, 215, 0.14);     /* 32px dot lattice */
  --field-hatch: rgba(233, 228, 215, 0.05);   /* 112deg hatch */

  /* Fonts */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Metrics */
  --header-min: 70px;
  /* Live height of the sticky header. The bar reflows to two or three rows on
     narrow screens, so app.js measures it and overwrites this. 70px is the
     unwrapped desktop value, used as the no-JS fallback. */
  --header-h: 70px;
  --maxw: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 132px);

  --transition-fast: 180ms ease;
  --transition-normal: 300ms ease;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background-color: var(--bg);
  color: var(--t-4);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--t-1);
}

a {
  color: var(--ac);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--ac-hover);
}

ul {
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

::selection {
  background: rgba(216, 178, 106, 0.3);
  color: var(--t-1);
}

:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --------------------------------------------------
   Shared primitives
-------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}

.section {
  padding: var(--section-y) var(--gutter);
}

/* Mono eyebrow / label */
.eyebrow {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ac);
}

.label {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-9);
}

/* Section heading block: title left, lead right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.section-head--ruled {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-12);
}

.section-head__title {
  max-width: 46ch;
}

.section-head__title .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.section-title {
  margin: 0;
  font: 700 clamp(34px, 4vw, 60px) / 1.02 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--t-1);
}

.section-lead {
  max-width: 52ch;
  font: 400 16px/1.62 var(--font-body);
  color: var(--t-6);
  text-wrap: pretty;
}

/* Hairline seam grid: gap shows the parent background through as 1px rules */
.seam {
  display: grid;
  gap: 1px;
  background: var(--line-10);
}

.seam--top {
  margin-top: 1px;
}

.seam--top > * {
  border-top: 1px solid var(--line-10);
}

.seam--boxed {
  border: 1px solid var(--line-10);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 17px 26px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn-solid {
  background: var(--ac);
  color: #0f100c;
}

.btn-solid:hover {
  background: var(--ac-hover);
  color: #0f100c;
}

.btn-ghost {
  border: 1px solid var(--line-20);
  color: var(--t-3);
}

.btn-ghost:hover {
  border-color: var(--ac-55);
  color: var(--t-1);
}

.btn-small {
  font-size: 12px;
  padding: 11px 20px;
}

.btn-note {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  opacity: 0.62;
}

.btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------
   Sticky header
-------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px clamp(16px, 3vw, 32px);
  min-height: var(--header-min);
  padding: 12px var(--gutter);
  background: var(--bg-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-10);
}

.nav-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(18px, 3.4vw, 48px);
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: var(--t-1);
}

.brand:hover {
  color: var(--t-1);
}

/* The mark: assets/mark.svg — the chamfered sand slab, now cut by an 18 degree
   fault with the two halves slid apart along it. One rule, three sizes; the
   only number that changes per placement is font-size, which sizes the box.
   Shape and colour live in the SVG, which the game repo generates
   (tools/brand/build.mjs) — neither is rebuilt in CSS here. */
.brand-mark {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  font-size: 24px;
}

.brand-mark--hero {
  font-size: clamp(64px, 6.4vw, 96px);
}

/* The wordmark alone — BREAK over CONTACT with the sand rule cut across both.
   Not the lockup: the badge already appears at hero size just below, and beside
   it in a 68px header the two marks compete rather than compound.
   Height-driven so one asset serves the header and the footer; the intrinsic
   width/height on the <img> keeps the box reserved before it decodes. */
.brand-lockup {
  display: block;
  height: 40px;
  width: auto;
  flex: none;
}

.brand-lockup--footer {
  height: 32px;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(14px, 2.2vw, 26px);
}

.nav-link {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-6);
}

.nav-link:hover {
  color: var(--t-2);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}

.nav-actions .btn-ghost {
  padding: 11px 16px;
  border-color: var(--line-16);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: #b6b2a6;
}

.nav-actions .btn-ghost:hover {
  border-color: var(--ac-50);
  color: var(--t-2);
}

/* --------------------------------------------------
   Field background
   The procedural stack that stands in for the old photo hero: a plotted minor
   grid, a major grid in sand, a dot lattice, a diagonal hatch and two soft
   washes. Shared verbatim by the hero and the closing CTA, so these carry
   background only and compose onto whichever section's positioning base
   (.hero-layer / .cta-layer) they are applied to. The vignette and the fade
   are aimed differently per section, so those stay with their section.
-------------------------------------------------- */

.field-layer--grid {
  background: repeating-linear-gradient(90deg, var(--field-fine) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, var(--field-fine) 0 1px, transparent 1px 32px);
}

.field-layer--grid-major {
  background: repeating-linear-gradient(90deg, var(--field-accent) 0 1px, transparent 1px 256px),
    repeating-linear-gradient(0deg, var(--field-accent) 0 1px, transparent 1px 256px);
}

.field-layer--dots {
  opacity: 0.5;
  background: radial-gradient(circle at center, var(--field-dot) 0 1px, transparent 1.4px);
  background-size: 32px 32px;
  /* Offset by half a cell so the dots sit in the middle of the minor grid
     squares rather than on its intersections. */
  background-position: 16px 16px;
}

.field-layer--hatch {
  background: repeating-linear-gradient(112deg, var(--field-hatch) 0 3px, transparent 3px 9px);
}

.field-layer--wash {
  background: radial-gradient(64% 58% at 72% 30%, rgba(216, 178, 106, 0.1) 0%, transparent 60%),
    radial-gradient(76% 66% at 10% 82%, rgba(127, 168, 206, 0.06) 0%, transparent 64%);
}

/* --------------------------------------------------
   Hero
-------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--field-base);
  border-bottom: 1px solid var(--line-10);
}

.hero-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-layer--vignette {
  background: radial-gradient(116% 86% at 24% 36%, transparent 28%, rgba(10, 11, 9, 0.9) 100%);
}

.hero-layer--fade {
  background: linear-gradient(
    180deg,
    rgba(10, 11, 9, 0.5) 0%,
    rgba(10, 11, 9, 0.16) 26%,
    rgba(10, 11, 9, 0.92) 78%,
    #0a0b09 100%
  );
}

.hero-inner {
  position: relative;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: clamp(22px, 3vw, 34px);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
}

.hero-badge__state {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-badge__state::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--red);
  flex: none;
}

.hero-badge__rule {
  width: clamp(20px, 4vw, 64px);
  height: 1px;
  background: var(--line-20);
}

.hero-badge__note {
  letter-spacing: 0.24em;
  color: var(--t-8);
}

/* The mark sits beside the headline rather than above it, so the two read as
   one lockup. `align-items: flex-start` plus the small top nudge optically
   seats the square against the cap height of a line set at 0.9. */
.hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(22px, 3vw, 44px);
}

.hero-title-row .brand-mark {
  margin-top: clamp(6px, 1vw, 16px);
}

.hero-title {
  margin: 0;
  flex: 1 1 min(560px, 100%);
  min-width: 0;
  font: 700 clamp(46px, 7vw, 118px) / 0.9 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--t-1);
  text-wrap: balance;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
}

/* Two equal columns that collapse to one the moment either would go under
   300px — the lead and the call to action, never a lead squeezed to a ribbon. */
.hero-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(26px, 4vw, 72px);
  margin-top: clamp(30px, 4vw, 46px);
}

.hero-lead {
  max-width: 52ch;
  font: 400 clamp(15px, 1.25vw, 18px) / 1.62 var(--font-body);
  color: var(--t-5);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions .btn-ghost {
  padding: 17px 24px;
}

.hero-support {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-9);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: clamp(36px, 5vw, 60px);
  padding: 16px 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line-12);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-7);
}

.hero-stats li {
  white-space: nowrap;
}

.hero-stats li + li::before {
  content: '/';
  margin-right: 26px;
  color: var(--t-11);
}

.hero-stats .is-accent {
  color: var(--ac);
}

/* --------------------------------------------------
   Latest strip
-------------------------------------------------- */

.latest {
  padding: 22px var(--gutter);
  background: var(--ac-06);
  border-bottom: 1px solid var(--ac-16);
}

.latest-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.latest-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}

.latest-item + .latest-item {
  padding-top: 16px;
  border-top: 1px solid var(--ac-16);
}

.latest-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.latest-chip {
  padding: 5px 8px;
  background: var(--ac);
  font: 600 10px/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0f100c;
}

.latest-title {
  margin: 0;
  font: 600 17px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--t-2);
}

.latest-note {
  font: 400 14px/1.5 var(--font-body);
  color: var(--t-6);
}

.latest-date {
  margin-left: auto;
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--t-8);
}

/* --------------------------------------------------
   01 - Tactical DNA
-------------------------------------------------- */

.dna-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.dna-grid > .feature-card {
  background: var(--bg-panel);
}

.mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.feature-media-well {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-media);
}

.feature-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.feature-media-well::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 14, 11, 0.9) 100%);
  pointer-events: none;
}

.media-tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  padding: 4px 7px;
  background: rgba(11, 12, 10, 0.82);
  border: 1px solid var(--line-16);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-6);
}

.media-tag--red {
  border-color: var(--red-45);
  color: var(--red);
}

.media-tag--steel {
  border-color: var(--steel-45);
  color: var(--steel);
}

.media-tag--sand {
  border-color: var(--ac-45);
  color: var(--ac);
}

.feature-content {
  padding: 26px 28px 30px;
}

.feature-name {
  margin: 0 0 12px;
  font: 600 24px/1.1 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--t-2);
}

.feature-text {
  font: 400 15px/1.6 var(--font-body);
  color: var(--t-6);
  text-wrap: pretty;
}

/* Morale state chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.chip {
  padding: 5px 9px;
  border: 1px solid var(--line-14);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b6b2a6;
}

.chip--sand {
  border-color: var(--ac-35);
  color: var(--ac);
}

.chip--red {
  border-color: var(--red-45);
  color: var(--red);
}

.chip--routed {
  background: var(--red-18);
  border-color: var(--red-50);
  color: var(--red-soft);
}

/* 02 - Real ground. The comparison plate is evidence, so it is shown at full
   width and unclipped: no aspect-ratio well and no object-fit: cover, both of
   which would crop the very edges a reader wants to line up. */
.ground-figure {
  margin: 0;
  padding-top: 34px;
}

.ground-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-12);
}

.ground-caption {
  margin-top: 14px;
  font: 400 12px/1.6 var(--font-mono);
  color: var(--t-7);
  text-wrap: pretty;
}

.ground-note {
  max-width: 68ch;
  margin: 34px 0 0;
  font: 400 15px/1.6 var(--font-body);
  color: var(--t-6);
  text-wrap: pretty;
}

.ground-note strong {
  font-weight: 600;
  color: var(--t-1);
}

/* Line-of-sight definition rows */
.defs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin-top: 20px;
  font: 400 12px/1.5 var(--font-mono);
  color: var(--t-7);
}

.defs dt {
  color: var(--ac);
}

/* Armour facing legend */
.facings {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facings .is-front {
  color: var(--steel);
}

.facings .is-side {
  color: var(--ac);
}

.facings .is-rear {
  color: var(--red);
}

/* Compact cards */
.mini-card {
  padding: 30px 28px 34px;
  background: var(--bg-panel-2);
}

.mini-card .label {
  display: block;
  margin-bottom: 14px;
  color: var(--ac);
}

.mini-title {
  margin: 0 0 11px;
  font: 600 21px/1.15 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--t-2);
}

.mini-text {
  font: 400 14px/1.6 var(--font-body);
  color: var(--t-6);
  text-wrap: pretty;
}

/* --------------------------------------------------
   03 - Tactical execution
-------------------------------------------------- */

.exec-intro {
  max-width: 44ch;
}

.exec-intro .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.exec-intro .section-title {
  margin-bottom: 18px;
}

.exec-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  margin-top: clamp(40px, 5vw, 64px);
}

.exec-card {
  padding: 34px 30px 40px;
  background: var(--bg-panel-2);
}

.exec-num {
  font: 700 62px/1 var(--font-display);
  color: var(--ac-24);
  margin-bottom: 22px;
}

.exec-title {
  margin: 0 0 12px;
  font: 600 23px/1.1 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--t-2);
}

.exec-text {
  font: 400 15px/1.6 var(--font-body);
  color: var(--t-6);
  text-wrap: pretty;
}

/* --------------------------------------------------
   Closing CTA
-------------------------------------------------- */

.cta {
  position: relative;
  padding: clamp(80px, 10vw, 150px) var(--gutter);
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line-12);
}

.cta-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Mirrors the hero, aimed the other way: the clear patch sits right-of-centre
   so the copy on the left keeps a quiet ground to sit on. */
.cta-layer--vignette {
  background: radial-gradient(92% 80% at 80% 44%, transparent 28%, rgba(10, 11, 9, 0.9) 100%);
}

.cta-layer--fade {
  background: linear-gradient(
    180deg,
    #0a0b09 0%,
    rgba(10, 11, 9, 0.62) 44%,
    rgba(10, 11, 9, 0.92) 100%
  );
}

.cta-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
}

.cta-copy {
  max-width: 52ch;
}

.cta-copy .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.cta-title {
  margin: 0 0 20px;
  font: 700 clamp(34px, 4.4vw, 64px) / 1.02 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--t-1);
}

.cta-text {
  font: 400 16px/1.62 var(--font-body);
  color: var(--t-5);
  text-wrap: pretty;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-actions .btn {
  padding: 18px 28px;
}

.cta-actions .btn-ghost {
  border-color: var(--line-22);
}

/* --------------------------------------------------
   Mailing list
-------------------------------------------------- */

/* Deliberately quieter than .cta above it: this is the fallback for someone who
   has already decided not to click Play, so it must not compete with it. */
.maillist {
  padding: clamp(44px, 5vw, 72px) var(--gutter);
  background: var(--bg-panel);
  border-top: 1px solid var(--line-12);
}

.maillist-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.maillist-copy {
  max-width: 56ch;
}

.maillist-copy .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.maillist-title {
  margin: 0 0 12px;
  font: 700 clamp(22px, 2.4vw, 32px) / 1.1 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--t-1);
}

.maillist-text {
  margin: 0;
  font: 400 14px/1.6 var(--font-body);
  color: var(--t-5);
  text-wrap: pretty;
}

.maillist-text a {
  color: var(--t-4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maillist-text a:hover {
  color: var(--ac);
}

/* Holds the button, then the Tally iframe that replaces it. The min-width keeps
   the form from collapsing to the button's width once it swaps in. */
.maillist-form {
  flex: 1 1 320px;
  min-width: 280px;
}

.maillist-form iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Small, but never hidden or collapsed: this is the notice that makes the
   signup lawful, so it has to be legible next to the submit action. */
.maillist-consent {
  margin: 14px 0 0;
  max-width: 58ch;
  font: 400 12px/1.55 var(--font-body);
  color: var(--t-7);
  text-wrap: pretty;
}

.maillist-consent strong {
  color: var(--t-5);
  font-weight: 500;
}

.maillist-consent a {
  color: var(--t-6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maillist-consent a:hover {
  color: var(--ac);
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px var(--gutter);
  background: var(--bg-footer);
  border-top: 1px solid var(--line-10);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--t-3);
}

.footer-brand:hover {
  color: var(--t-3);
}


.footer-brand span {
  font: 700 18px/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-copy {
  max-width: 62ch;
  font: 400 13px/1.5 var(--font-body);
  color: var(--t-9);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-links a {
  color: var(--t-6);
}

.footer-links a:hover {
  color: var(--t-2);
}

.footer-links .is-muted {
  color: var(--t-10);
}

/* --------------------------------------------------
   Animations
-------------------------------------------------- */

/* Scroll-reveal enhancement (see app.js). Gated behind .js so the cards stay
   visible when scripting is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@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;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (max-width: 720px) {
  .nav-actions {
    margin-left: 0;
  }

  .latest-date {
    margin-left: 0;
  }

  /* The rail stacks at this width, so the inline separators just leave a
     dangling slash at the head of every line. */
  .hero-stats li + li::before {
    display: none;
  }
}