:root {
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Source Serif 4 Variable", "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  --font-ui: var(--font-sans);
  --font-reading: var(--font-serif);
  --font-code: var(--font-mono);

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  /* Every text colour here clears 4.5:1 against --page, and every border on a
     control clears 3:1. --line and --hairline only ever divide things, never
     enclose a control, so they are allowed to stay quiet. */

  --page: #ffffff;
  --ink: #111516;
  --muted: rgba(17, 21, 22, 0.64);
  --edge: rgba(17, 21, 22, 0.5);
  --line: rgba(17, 21, 22, 0.22);
  --hairline: rgba(17, 21, 22, 0.14);
  --accent: #b85332;

  /* Two radii, so nothing has to invent its own. Controls take the smaller one,
     anything card- or media-sized takes the larger. */

  --radius-control: 10px;
  --radius-card: 16px;

  --shell: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-height: 76px;
  --band: clamp(96px, 12vh, 150px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  background: var(--page);
}

html,
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  background: var(--page);
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

::selection {
  color: var(--page);
  background: var(--accent);
}

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

:focus:not(:focus-visible) {
  outline: 0;
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--page);
  background: var(--ink);
  border-radius: var(--radius-control);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Type primitives */

.ident {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.reading {
  font-family: var(--font-reading);
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.55;
}

.accent {
  color: var(--accent);
}

/* One typeface, one size, one weight for the whole wordmark. The two spans
   exist only so `.systems` can carry the accent colour. */

.logo {
  display: inline-flex;
  align-items: baseline;
  padding-block: 11px;
  margin-block: -11px;
  font-family: var(--font-reading);
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.logo__secondary {
  color: var(--accent);
}

/* Controls */

.action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
}

.action:hover,
.action:focus-visible {
  color: var(--page);
  background: var(--ink);
  border-color: var(--ink);
}

.action--solid {
  color: var(--page);
  background: var(--ink);
  border-color: var(--ink);
}

.action--solid:hover,
.action--solid:focus-visible {
  color: var(--page);
  background: var(--accent);
  border-color: var(--accent);
}

/* Navigation */

.site-nav {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  color: var(--ink);
  background: var(--page);
  border-bottom: 1px solid transparent;
}

.site-nav.is-scrolled {
  border-bottom-color: var(--line);
}

.site-nav__inner {
  display: grid;
  min-height: var(--nav-height);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

.app-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.2vw, 36px);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
}

.app-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--muted);
}

.app-nav a:hover,
.app-nav a.is-active {
  color: var(--ink);
}

.nav-contact {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-self: end;
  gap: 9px;
  padding-inline: 16px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
}

.nav-contact:hover {
  color: var(--page);
  background: var(--ink);
  border-color: var(--ink);
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 640px;
  min-height: max(640px, 82svh);
  align-items: center;
  padding-top: calc(var(--nav-height) + 72px);
  padding-bottom: 96px;
}

/* Capped against the viewport, not just in pixels, so the copy can never grow
   across into the 99. Body text over a pixel grid is unreadable. */

.hero__copy {
  max-width: min(720px, 55vw);
}

.hero__title {
  font-family: var(--font-reading);
  font-size: clamp(46px, 5.2vw, 78px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero__deck {
  max-width: 560px;
  margin-top: 24px;
  font-family: var(--font-reading);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.5;
  color: rgba(17, 21, 22, 0.68);
}

.hero__actions {
  margin-top: 32px;
}

/* The 99. The only moving thing on the page, and it behaves like a worn VHS
   tape rather than a smooth animation.

   `.hero__mark__signal` stacks eight copies of the same glyphs: a faint grey
   base, three full copies tinted pure red, green and blue, three more clipped
   to one thin horizontal row each, and one darker copy that sweeps slowly down
   the mark like a tape head losing alignment. `multiply` blending subtracts the
   coloured copies from each other, so they go almost black where they still
   line up and leave coloured fringes where they do not, the way misregistered
   colour plates do on white paper.

   The group is then pixelated by an SVG filter and masked twice, by a row
   grid and a column grid, so each block is a separate square rather than a
   slab merged into its neighbours. The rows are cut wider than the columns, so
   the mark reads as scanlines first and pixels second. Both
   apply to the group after its children are composited, so every displacement
   is snapped to the block grid and the scanline gaps are cut out of the
   glyphs themselves — no overlay rectangle to give the trick away. Offsets are
   written as whole multiples of `--px`, the cell size, for the same reason:
   change `--px` and the blocks, the scanlines and the tearing all scale
   together.

   Layer cycles are short and share no common factor, so blocks tear roughly
   every second and never in the same combination twice. */

.pixel-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hero__mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 4vw;
  font-family: var(--font-reading);
  font-size: min(34vw, 460px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.11em;
  --px: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}

.hero__mark__signal {
  filter: url("#pixel-99");
  -webkit-mask-image:
    repeating-linear-gradient(to bottom, #000 0, #000 9px, transparent 9px, transparent 12px),
    repeating-linear-gradient(to right, #000 0, #000 10px, transparent 10px, transparent 12px);
  mask-image:
    repeating-linear-gradient(to bottom, #000 0, #000 9px, transparent 9px, transparent 12px),
    repeating-linear-gradient(to right, #000 0, #000 10px, transparent 10px, transparent 12px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__mark span {
  display: block;
}

.hero__mark__base {
  color: rgba(17, 21, 22, 0.2);
}

.hero__mark__split,
.hero__mark__band,
.hero__mark__sweep {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}

.hero__mark__split,
.hero__mark__band {
  opacity: 0;
}

.hero__mark__band {
  clip-path: inset(0 0 100% 0);
}

.hero__mark__split--r,
.hero__mark__band--r {
  color: #ff3131;
}

.hero__mark__split--g,
.hero__mark__band--g {
  color: #2bff7e;
}

.hero__mark__split--b,
.hero__mark__band--b {
  color: #3d74ff;
}

.hero__mark__sweep {
  color: rgba(17, 21, 22, 0.3);
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__mark__signal {
    animation: mark-hold 4.7s steps(1, end) infinite;
  }

  .hero__mark__base {
    animation: mark-base 1.9s steps(1, end) infinite;
  }

  .hero__mark__split--r {
    animation: mark-split-r 2.6s steps(1, end) infinite;
  }

  .hero__mark__split--g {
    animation: mark-split-g 2.6s steps(1, end) infinite;
  }

  .hero__mark__split--b {
    animation: mark-split-b 2.6s steps(1, end) infinite;
  }

  .hero__mark__band--r {
    animation: mark-rows-a 1.87s steps(1, end) infinite;
  }

  .hero__mark__band--g {
    animation: mark-rows-b 2.03s steps(1, end) infinite;
  }

  .hero__mark__band--b {
    animation: mark-rows-c 3.13s steps(1, end) infinite;
  }

  .hero__mark__sweep {
    animation: mark-sweep 8.3s linear infinite;
  }
}

/* The scanline grid slips by a third of a line and back, the way a tape loses
   and regains vertical hold. */

@keyframes mark-hold {
  0%,
  4%,
  100% {
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
  }

  0.7% {
    -webkit-mask-position: 0 4px, 0 0;
    mask-position: 0 4px, 0 0;
  }

  2.3% {
    -webkit-mask-position: 0 -4px, 0 0;
    mask-position: 0 -4px, 0 0;
  }
}

@keyframes mark-base {
  0%,
  6.5%,
  100% {
    color: rgba(17, 21, 22, 0.2);
    transform: none;
  }

  0.9% {
    color: rgba(17, 21, 22, 0.06);
    transform: translate(calc(var(--px) * -1), calc(var(--px) * 1));
  }

  2.6% {
    color: rgba(17, 21, 22, 0.32);
    transform: translate(calc(var(--px) * 1), calc(var(--px) * -1));
  }

  4.3% {
    color: rgba(17, 21, 22, 0.1);
    transform: translateX(calc(var(--px) * -1));
  }
}

@keyframes mark-split-r {
  0%,
  6.2%,
  100% {
    opacity: 0;
    transform: none;
  }

  0.5% {
    opacity: 0.61;
    transform: translateX(calc(var(--px) * -2));
  }

  1.9% {
    opacity: 0.46;
    transform: translate(calc(var(--px) * -4), calc(var(--px) * 1));
  }

  3.3% {
    opacity: 0.61;
    transform: translateX(calc(var(--px) * -1));
  }

  4.7% {
    opacity: 0.38;
    transform: translate(calc(var(--px) * -3), calc(var(--px) * -1));
  }
}

@keyframes mark-split-g {
  0%,
  6.2%,
  100% {
    opacity: 0;
    transform: none;
  }

  0.5% {
    opacity: 0.53;
    transform: translateX(calc(var(--px) * 1));
  }

  1.9% {
    opacity: 0.42;
    transform: translateY(calc(var(--px) * -1));
  }

  3.3% {
    opacity: 0.53;
    transform: translateX(calc(var(--px) * -1));
  }

  4.7% {
    opacity: 0.34;
    transform: translateY(calc(var(--px) * 1));
  }
}

@keyframes mark-split-b {
  0%,
  6.2%,
  100% {
    opacity: 0;
    transform: none;
  }

  0.5% {
    opacity: 0.61;
    transform: translateX(calc(var(--px) * 2));
  }

  1.9% {
    opacity: 0.46;
    transform: translate(calc(var(--px) * 4), calc(var(--px) * -1));
  }

  3.3% {
    opacity: 0.61;
    transform: translateX(calc(var(--px) * 3));
  }

  4.7% {
    opacity: 0.38;
    transform: translate(calc(var(--px) * 1), calc(var(--px) * 1));
  }
}

@keyframes mark-rows-a {
  0%,
  7.4%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: none;
  }

  0.6% {
    opacity: 0.88;
    clip-path: inset(13% 0 82% 0);
    transform: translateX(calc(var(--px) * -3));
  }

  2% {
    opacity: 0.7;
    clip-path: inset(38% 0 58% 0);
    transform: translateX(calc(var(--px) * 4));
  }

  3.4% {
    opacity: 0.81;
    clip-path: inset(57% 0 39% 0);
    transform: translateX(calc(var(--px) * -2));
  }

  4.8% {
    opacity: 0.62;
    clip-path: inset(25% 0 71% 0);
    transform: translateX(calc(var(--px) * 3));
  }

  6.2% {
    opacity: 0.75;
    clip-path: inset(73% 0 23% 0);
    transform: translateX(calc(var(--px) * -5));
  }
}

@keyframes mark-rows-b {
  0%,
  7.1%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: none;
  }

  0.5% {
    opacity: 0.75;
    clip-path: inset(46% 0 50% 0);
    transform: translateX(calc(var(--px) * 4));
  }

  1.8% {
    opacity: 0.88;
    clip-path: inset(19% 0 77% 0);
    transform: translateX(calc(var(--px) * -4));
  }

  3.1% {
    opacity: 0.65;
    clip-path: inset(66% 0 30% 0);
    transform: translateX(calc(var(--px) * 2));
  }

  4.4% {
    opacity: 0.81;
    clip-path: inset(31% 0 65% 0);
    transform: translateX(calc(var(--px) * -3));
  }

  5.8% {
    opacity: 0.57;
    clip-path: inset(85% 0 11% 0);
    transform: translateX(calc(var(--px) * 5));
  }
}

@keyframes mark-rows-c {
  0%,
  6.8%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: none;
  }

  0.5% {
    opacity: 0.65;
    clip-path: inset(8% 0 88% 0);
    transform: translateX(calc(var(--px) * 3));
  }

  1.7% {
    opacity: 0.81;
    clip-path: inset(52% 0 44% 0);
    transform: translateX(calc(var(--px) * -5));
  }

  2.9% {
    opacity: 0.7;
    clip-path: inset(28% 0 68% 0);
    transform: translateX(calc(var(--px) * 2));
  }

  4.2% {
    opacity: 0.88;
    clip-path: inset(78% 0 18% 0);
    transform: translateX(calc(var(--px) * -3));
  }

  5.5% {
    opacity: 0.62;
    clip-path: inset(61% 0 35% 0);
    transform: translateX(calc(var(--px) * 5));
  }
}

@keyframes mark-sweep {
  0%,
  4% {
    clip-path: inset(0 0 88% 0);
    transform: translateX(calc(var(--px) * 1));
  }

  52% {
    transform: translateX(calc(var(--px) * -1));
  }

  96%,
  100% {
    clip-path: inset(88% 0 0 0);
    transform: translateX(calc(var(--px) * 1));
  }
}

/* Dark bands */

.chapter {
  border-top: 1px solid var(--hairline);
}

.chapter__inner {
  padding-block: var(--band);
}

.chapter__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.chapter__content {
  max-width: 620px;
}

.cinematic-title {
  max-width: 640px;
  font-family: var(--font-reading);
  font-size: clamp(38px, 3.8vw, 58px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.chapter__copy {
  max-width: 570px;
  margin-top: 22px;
  font-family: var(--font-reading);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: rgba(17, 21, 22, 0.7);
}

.chapter__content .action {
  margin-top: 30px;
}

/* Gatekeeper */

.gatekeeper-visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.gatekeeper-visual img {
  width: 100%;
}

.gatekeeper-visual figcaption {
  padding: 11px 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* The three build questions. Same white as the rest; only the rule divides. */

.standard {
  border-top: 1px solid var(--hairline);
}

.standard__inner {
  padding-block: var(--band);
}

.standard__header {
  max-width: 760px;
}

.section-title {
  font-family: var(--font-reading);
  font-size: clamp(38px, 3.8vw, 58px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.standard__intro {
  max-width: 560px;
  margin-top: 22px;
  color: rgba(17, 21, 22, 0.66);
}

.principles {
  display: grid;
  margin-top: clamp(48px, 6vw, 80px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.principle {
  padding: 26px 32px 30px 0;
  border-right: 1px solid var(--line);
}

.principle + .principle {
  padding-left: 32px;
}

.principle:last-child {
  border-right: 0;
}

.principle__number {
  color: var(--accent);
}

.principle h3 {
  margin-top: 26px;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.principle p {
  max-width: 330px;
  margin-top: 12px;
  font-family: var(--font-reading);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(17, 21, 22, 0.66);
}

/* Systems — one card per system. The whole card is the click target, but there
   is still only one link in the markup: `.system-card__link::after` is stretched
   over the card. That keeps a single tab stop and a single accessible name.
   Planner has no link, so its card is deliberately not clickable. */

.system-ledger {
  display: grid;
  gap: 12px;
  margin-top: clamp(44px, 5vw, 72px);
}

.system-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.system-card__link::after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: inherit;
}

.system-card:has(.system-card__link:hover),
.system-card:has(.system-card__link:focus-visible) {
  background: rgba(17, 21, 22, 0.025);
  border-color: var(--edge);
}

.system-card__id {
  color: var(--accent);
}

.system-card--quiet .system-card__id {
  color: var(--muted);
}

.system-card h3 {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.system-card--quiet h3 {
  color: rgba(17, 21, 22, 0.66);
}

.system-card div p {
  max-width: 480px;
  margin-top: 6px;
  font-family: var(--font-reading);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(17, 21, 22, 0.6);
}

.system-card__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.system-card:has(.system-card__link:hover) .system-card__link {
  color: var(--accent);
}

/* Footer */

.footer {
  color: var(--muted);
  background: var(--page);
  border-top: 1px solid var(--hairline);
}

/* Two items only. The wordmark is not repeated here — the header is fixed, so
   it is already on screen. */

.footer__inner {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer__links {
  display: flex;
  gap: 24px;
}

.footer__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.footer__links a:hover {
  color: var(--ink);
}

@media (max-width: 1000px) {
  .chapter__inner--split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 6vw, 56px);
  }

  .gatekeeper-visual {
    max-width: 720px;
  }

  /* Side by side stops fitting here, so the mark moves above the copy rather
     than sliding underneath it. It is also less than half the size, so the
     blocks, the scanlines and the tearing all halve with it — at full strength
     a 200px mark comes apart too far to read as a 99. */

  .hero__inner {
    min-height: 0;
    padding-top: calc(var(--nav-height) + 200px);
    padding-bottom: 72px;
  }

  .hero__copy {
    max-width: 620px;
  }

  .hero__mark {
    top: calc(var(--nav-height) + 14px);
    right: auto;
    left: var(--gutter);
    font-size: min(47vw, 200px);
    --px: 6px;
    transform: none;
  }

  .hero__mark__signal {
    filter: url("#pixel-99-fine");
    -webkit-mask-image:
      repeating-linear-gradient(to bottom, #000 0, #000 4px, transparent 4px, transparent 6px),
      repeating-linear-gradient(to right, #000 0, #000 5px, transparent 5px, transparent 6px);
    mask-image:
      repeating-linear-gradient(to bottom, #000 0, #000 4px, transparent 4px, transparent 6px),
      repeating-linear-gradient(to right, #000 0, #000 5px, transparent 5px, transparent 6px);
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 28px;
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principle:nth-child(2) {
    border-right: 0;
  }

  .principle:last-child {
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --nav-height: 108px;
  }

  .site-nav__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: 62px 46px;
    column-gap: 16px;
  }

  .app-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    justify-content: flex-start;
    gap: clamp(18px, 5.5vw, 30px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .app-nav a {
    flex: 0 0 auto;
  }

  .nav-contact {
    grid-column: 2;
    grid-row: 1;
  }

  .hero__title {
    font-size: clamp(38px, 11vw, 52px);
  }

  .hero__deck {
    max-width: 460px;
    font-size: 18px;
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .principle,
  .principle + .principle,
  .principle:last-child {
    padding: 24px 0 28px;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }

  .principle:last-child {
    border-bottom: 0;
  }

  .system-card {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 16px;
    padding: 22px 20px;
  }

  .system-card > div {
    grid-column: 2;
  }

  .system-card__link {
    grid-column: 2;
    min-height: 36px;
    justify-content: flex-start;
  }

  /* "© 2026" plus two links still fit on one row at 320px, so the footer keeps
     its shape all the way down. */

  .footer__inner {
    min-height: 0;
    padding-block: 20px;
  }

  .footer__links {
    gap: 20px;
  }
}

@media (max-width: 390px) {
  .logo {
    font-size: 21px;
  }

  .action {
    width: 100%;
    justify-content: space-between;
  }

  .system-card {
    grid-template-columns: 68px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Readers who ask their system for more contrast get full-strength ink on every
   secondary text, and rules solid enough to find. */

@media (prefers-contrast: more) {
  :root {
    --muted: rgba(17, 21, 22, 0.82);
    --edge: var(--ink);
    --line: rgba(17, 21, 22, 0.45);
    --hairline: rgba(17, 21, 22, 0.3);
    --accent: #8f3d21;
  }

  .hero__deck,
  .chapter__copy,
  .standard__intro,
  .principle p,
  .system-card div p,
  .system-card--quiet h3 {
    color: var(--ink);
  }

  .hero__mark {
    display: none;
  }

  .hero__inner {
    padding-top: calc(var(--nav-height) + 72px);
  }
}