/* Hallmark · genre: editorial · macrostructure: Map / Diagram · theme: Brutal
 * tone: brutalist · audience: prospective investors · use: prove the engineering
 * anchor hue: warm red 28° · axes: light paper / display-heavy / warm accent
 * nav: N7 Brutal slab · footer: Ft4 Dense colophon · features: F3 Tabular spec sheet
 * section head: stacked single-column + S5 bottom-anchored (map legend)
 * enrichment: Tier A — the system map is drawn in the theme's own rules; no imagery
 * type: Bricolage Grotesque (display) + Geist (body) + Geist Mono (outlier, 2 slots:
 *       spec-sheet values, colophon)
 * motion: node-ink-on · slab-press (2 primitives)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * slop test: 58/58 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 *            chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 *            icons: pass (30) · mobile: pass (34, 49, 50–57)
 * verified: 320 / 375 / 414 / 768 / 1024 / 1280 / 1440 / 1920 px — no h-scroll,
 *           no contrast failure, no two-line clickable text, nothing past the edge
 */
@import url("/tokens.css");

/* ─────────────────────────── reset + root ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 350;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 600; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }

.tnum, .spec, .colophon .tnum { font-variant-numeric: tabular-nums; }
.tint { color: var(--color-accent); font-style: normal; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-sm); top: -4rem; z-index: var(--z-sticky);
  background: var(--color-ink); color: var(--color-on-ink);
  padding: var(--space-sm) var(--space-md); font-weight: 600;
}
.skip:focus { top: var(--space-sm); }

:where(a, button, [tabindex]):focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 2px;
}
.ink :where(a, button):focus-visible,
.band--stops :where(a, button):focus-visible {
  outline-color: var(--color-focus-invert);
}

/* ─────────────────────────── N7 · brutal slab nav ─────────────────────────── */
.slab {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-lg);
  background: var(--color-paper);
  border-bottom: var(--rule-thick) solid var(--color-rule);
  padding: 0 var(--page-gutter);
}
.slab__mark {
  display: flex; align-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: var(--text-md);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-right: var(--rule-mid) solid var(--color-rule);
  align-self: stretch;
  white-space: nowrap;
}
.slab__mark-cut { color: var(--color-muted); }
.slab__nav { display: flex; align-self: stretch; align-items: center; margin-inline-start: auto; min-width: 0; }
.slab__nav ul { display: flex; align-items: stretch; }
.slab__nav a {
  display: flex; align-items: center; height: 100%;
  padding: var(--space-md) var(--space-md);
  font-size: var(--text-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-caps);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.slab__nav a:hover { background: var(--color-ink); color: var(--color-on-ink); }
.slab__cta { align-self: center; }

/* ─────────────────────────── buttons ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--space-sm) var(--space-lg);
  border: var(--rule-thick) solid var(--color-ink);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.btn--fill { background: var(--color-ink); color: var(--color-on-ink); }
.btn--fill:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn:hover { border-color: var(--color-accent-deep); }
.btn:active { transform: translateY(2px); }
.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
  background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule-soft);
}
.slab__nav a:active { background: var(--color-accent-deep); color: var(--color-on-accent); }
.btn--big {
  min-height: 60px; padding: var(--space-md) var(--space-xl);
  font-size: var(--text-md); border-width: var(--rule-slab);
}

/* ─────────────────────────── hero ─────────────────────────── */
.hero {
  padding: clamp(2.25rem, 6vw, var(--space-2xl)) var(--page-gutter) var(--space-3xl);
  border-bottom: var(--rule-slab) solid var(--color-rule);
}
.hero__orient {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-sm); color: var(--color-muted);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  margin-bottom: var(--space-lg);
}
.hero__display {
  font-size: var(--text-display);
  text-transform: uppercase;
  font-stretch: 92%;
  margin-bottom: var(--space-xl);
}
.hero__display > span { display: block; }
.hero__foot {
  display: grid; gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-mid) solid var(--color-rule);
  padding-top: var(--space-lg);
}
.lede { font-size: var(--text-md); max-width: 46ch; line-height: 1.45; }
.hero__note { font-size: var(--text-base); color: var(--color-muted); max-width: 52ch; }

@media (min-width: 62rem) {
  .hero__foot { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-2xl); }
  .hero__display { margin-bottom: var(--space-2xl); }
}

/* ─────────────────────────── bands + section heads ─────────────────────────── */
.band { padding: var(--space-3xl) var(--page-gutter); }
.band--map    { padding-bottom: var(--space-2xl); }
.band--seam   { padding-top: var(--space-2xl); border-top: var(--rule-slab) solid var(--color-rule); padding-bottom: var(--space-2xl); }
.band--systems{ padding-top: var(--space-2xl); border-top: var(--rule-slab) solid var(--color-rule); }
.band--stops  { background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--space-3xl); }
.band--build  { border-top: var(--rule-slab) solid var(--color-rule); }
.band--cta    { border-top: var(--rule-slab) solid var(--color-accent); padding-block: var(--space-3xl) var(--space-4xl); }

.head { max-width: 68ch; margin-bottom: var(--space-2xl); }
.head__title { font-size: var(--text-2xl); text-transform: uppercase; margin-bottom: var(--space-md); }
.head__dek { color: var(--color-muted); max-width: var(--measure); }
.head--invert .head__dek { color: var(--color-on-ink-2); }

/* ─────────────────────────── the map ─────────────────────────── */
.map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.bar {
  border: var(--rule-thick) solid var(--color-rule);
  background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md);
}
.bar__name {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.bar__role {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm);
  color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em;
}

.wire { display: none; background: var(--color-ink); width: var(--rule-thick); }

.node {
  border: var(--rule-thick) solid var(--color-rule);
  border-top-width: 0;
  display: flex; flex-direction: column;
}
.node__head { background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-lg); }
.node__reads {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--color-on-ink-2); margin-bottom: var(--space-sm);
}
.node__reads b { color: var(--color-on-ink); font-weight: 500; }
.node__name { font-size: var(--text-xl); text-transform: uppercase; margin-bottom: var(--space-2xs); }
.node__expand {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-on-ink-3); margin-bottom: var(--space-sm);
}
.node__what { color: var(--color-on-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.node__drives {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--color-muted);
  padding: var(--space-sm) var(--space-lg) 0;
}
.sinks { padding: var(--space-xs) var(--space-lg) var(--space-lg); flex: 1; }
.sinks li {
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  font-size: var(--text-sm); font-weight: 500;
}
.sinks li:last-child { border-bottom: 0; padding-bottom: 0; }
.sinks span {
  display: block; font-weight: 350; color: var(--color-muted);
  font-size: var(--text-xs); letter-spacing: 0.01em; line-height: 1.45;
}

.map__legend {
  margin-top: var(--space-lg);
  font-size: var(--text-sm); color: var(--color-muted); max-width: 74ch;
}
.key {
  display: inline-block; vertical-align: middle;
  margin-right: var(--space-2xs);
}
.key--rule { width: 26px; height: var(--rule-thick); background: var(--color-ink); }

/* ink-on reveal — the only scroll motion on the page */
.ink-wait { opacity: 0.001; }
.is-inked {
  animation: ink-on var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes ink-on { from { opacity: 0.001; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .is-inked { animation-delay: 0ms; }
  .btn:active { transform: none; }
}

@media (min-width: 60rem) {
  .map {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* mews bar | run | entra bar | run | the three systems */
    grid-template-rows: auto var(--space-xl) auto var(--space-xl) auto;
    column-gap: var(--space-lg);
    row-gap: 0;
  }
  .bar--mews  { grid-area: 1 / 1 / 2 / 5; }
  .bar--entra {
    grid-area: 3 / 3 / 4 / 7;
    position: relative; z-index: var(--z-raised);
    justify-content: flex-end; text-align: right;
  }
  .wire { display: block; justify-self: center; align-self: stretch; }
  /* Mews reaches Halo and Lark; the Lark run passes behind the Entra bar */
  .wire--drop  { grid-area: 2 / 1 / 5 / 3; }
  .wire--cross { grid-area: 2 / 3 / 5 / 5; z-index: var(--z-base); transform: translateX(-22px); }
  /* Entra reaches Lark and Clocky */
  .wire--in-1 { display: none; }
  .wire--in-2 { grid-area: 4 / 3 / 5 / 5; transform: translateX(22px); }
  .wire--in-3 { grid-area: 4 / 5 / 5 / 7; }
  .node { border-top-width: var(--rule-thick); }
  .node--1 { grid-area: 5 / 1 / 6 / 3; }
  .node--2 { grid-area: 5 / 3 / 6 / 5; }
  .node--3 { grid-area: 5 / 5 / 6 / 7; }
}
@media (max-width: 59.999rem) {
  .bar { margin-bottom: var(--space-sm); }
  .bar--entra { margin-bottom: var(--space-lg); }
  .node { border-top-width: var(--rule-thick); margin-bottom: var(--space-lg); }
}

/* seam · a ledger strip: thick vertical dividers, no boxes — distinct from .stops and .rules */
.seam {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-thick) solid var(--color-rule);
}
.seam article { padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
.seam h3 { font-size: var(--text-md); text-transform: none; margin-bottom: var(--space-xs); }
.seam p { color: var(--color-muted); font-size: var(--text-sm); max-width: 46ch; }
@media (min-width: 56rem) {
  .seam { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); }
  .seam article { padding: var(--space-lg) var(--space-xl) var(--space-xl); border-bottom: 0;
                  border-left: var(--rule-thick) solid var(--color-rule); }
  .seam article:first-child { padding-left: 0; border-left: 0; }
  .seam article:last-child  { padding-right: 0; }
}

/* status ledger in the CTA — where each product actually is today */
.status {
  margin: 0 0 var(--space-xl); display: grid; gap: 0;
  border-top: var(--rule-mid) solid var(--color-rule); max-width: 78ch;
}
.status > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs) var(--space-lg);
  padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.status dt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}
.status dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 48rem) {
  .status > div { grid-template-columns: 9ch minmax(0, 1fr); align-items: baseline; }
}

/* ─────────────────────────── F3 · tabular spec sheets ─────────────────────────── */
.sys {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-2xl);
  border-top: var(--rule-mid) solid var(--color-rule);
}
.sys:first-of-type { border-top: 0; padding-top: 0; }
.sys__name {
  font-size: var(--text-3xl); text-transform: uppercase;
  font-stretch: 88%; margin-bottom: var(--space-2xs);
}
.sys__line {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  color: var(--color-accent); margin-bottom: var(--space-md);
}
.sys__body { max-width: 48ch; color: var(--color-ink-2); }
.spec { font-size: var(--text-sm); }
.spec th, .spec td {
  text-align: left; vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.spec tr:first-child th, .spec tr:first-child td { border-top: var(--rule-mid) solid var(--color-rule); }
.spec th {
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: var(--text-xs); color: var(--color-muted); width: 34%;
}
.spec td:first-of-type { font-family: var(--font-outlier); font-weight: 500; width: 32%; }
.spec td:last-child { color: var(--color-muted); padding-right: 0; }

@media (min-width: 60rem) {
  .sys { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); }
  .spec th { width: 30%; }
}
@media (max-width: 34rem) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
  .spec tr:first-child { border-top: var(--rule-mid) solid var(--color-rule); }
  .spec th, .spec td,
  .spec tr:first-child th, .spec tr:first-child td { border: 0; padding: 0; }
  .spec th { margin-bottom: var(--space-3xs); }
  .spec td:first-of-type { width: auto; font-size: var(--text-sm); margin-bottom: var(--space-3xs); }
}

/* ─────────────────────────── what stops happening ─────────────────────────── */
.band--stops .head__title { color: var(--color-on-ink); }
.stops {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-mid) solid var(--color-on-ink-3);
}
.stops li {
  padding: var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--color-on-ink-3);
  display: grid; gap: var(--space-2xs) var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
}
.stops h3 { font-size: var(--text-md); text-transform: none; color: var(--color-on-ink); }
.stops p { color: var(--color-on-ink-2); max-width: 60ch; font-size: var(--text-sm); }
@media (min-width: 48rem) {
  .stops li { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: baseline; }
}

/* ─────────────────────────── how we build ─────────────────────────── */
.rules { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: var(--rule-mid) solid var(--color-rule); }
.rules article { padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
.rules h3 { font-size: var(--text-md); text-transform: none; margin-bottom: var(--space-2xs); }
.rules p { color: var(--color-muted); max-width: 52ch; font-size: var(--text-sm); }
@media (min-width: 48rem) {
  .rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-3xl); }
  .rules article { padding-inline-end: var(--space-md); }
}

.integrations__title {
  font-family: var(--font-body); font-weight: 500; font-weight: 500;
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--color-muted);
  margin: var(--space-2xl) 0 var(--space-md);
}
.integrations { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.integrations li {
  border: var(--rule-mid) solid var(--color-rule);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm); font-weight: 500;
}

/* ─────────────────────────── CTA ─────────────────────────── */
.cta__line {
  font-size: var(--text-display-s); text-transform: uppercase;
  font-stretch: 92%; max-width: 18ch; margin-bottom: var(--space-md);
}
.cta__sub { color: var(--color-muted); max-width: 52ch; margin-bottom: var(--space-xl); }

/* ─────────────────────────── Ft4 · dense colophon ─────────────────────────── */
.colophon {
  border-top: var(--rule-thick) solid var(--color-rule);
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  background: var(--color-paper-2);
}
.colophon p {
  font-family: var(--font-outlier);
  font-size: var(--text-sm); line-height: 1.7;
  color: var(--color-ink-2); max-width: 74ch;
}
.colophon b { font-weight: 500; color: var(--color-ink); }
.colophon a {
  border-bottom: var(--rule-mid) solid var(--color-accent);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.colophon a:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* ─────────────────────────── narrow-viewport nav ─────────────────────────── */
@media (max-width: 60rem)  { .slab__nav-wide { display: none; } }
@media (max-width: 46rem)  { .slab { gap: var(--space-sm); } .slab__nav a { padding-inline: var(--space-sm); } }
@media (max-width: 34rem)  {
  .btn--big { font-size: var(--text-sm); padding: var(--space-md) var(--space-lg); min-height: 52px; border-width: var(--rule-thick); }
  .slab { flex-wrap: wrap; padding-block: var(--space-xs); align-items: center; }
  .slab__mark { padding-block: var(--space-xs); }
  .slab__cta { margin-inline-start: auto; }
  .slab__nav { order: 3; flex-basis: 100%; margin-inline-start: 0; overflow-x: auto; }
  .slab__nav ul { gap: 0; }
  .slab__nav a { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; }
  .btn { padding-inline: var(--space-md); }
}