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

:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --panel: rgba(255, 255, 255, 0.72);
  --ink: #0a0e14;
  --muted: #465163;
  --faint: #7b8696;
  --line: rgba(10, 14, 20, 0.12);
  --accent: #121212;
  --accent-2: #5c5c5c;
  --on-accent: #f5f6f8;
  --swarm: 18, 18, 18;
  --swarm-2: 110, 110, 110;
  --canvas-opacity: 0.7;
  --glass: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.03));
  --glass-edge: rgba(255,255,255,0.75);
  --glass-shadow: 0 10px 40px rgba(10,14,20,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  --fringe-a: 214, 36, 123;
  --fringe-b: 0, 150, 190;

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05070b;
    --panel: rgba(12, 17, 26, 0.66);
    --ink: #eef2f8;
    --muted: #9aa6b8;
    --faint: #6b778a;
    --line: rgba(190, 210, 240, 0.13);
    --accent: #f0f0f0;
    --accent-2: #949494;
    --on-accent: #05070b;
    --swarm: 240, 240, 240;
    --swarm-2: 148, 148, 148;
    --canvas-opacity: 0.8;
    --glass: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.004));
    --glass-edge: rgba(255,255,255,0.13);
    --glass-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
    --fringe-a: 255, 64, 160;
    --fringe-b: 40, 220, 255;
  }
}

html { scroll-padding-top: 4.5rem; }   /* smooth anchor scrolling is done in script.js, so it always lands exactly */

body {
  position: relative;
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; }
p a, dd a, li a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The background is a fixed layer, like the grid: only the content scrolls over it. It is out of flow, so it
   can never change how tall the page is. */
.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#swarm {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: var(--canvas-opacity);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at 40% 35%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 40% 35%, #000 0%, transparent 78%);
}

.hud {
  position: fixed;
  left: 1.25rem;
  bottom: 1rem;
  z-index: 5;
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
  pointer-events: none;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hud b { color: var(--accent); font-weight: 500; }

.nav, main, footer { position: relative; z-index: 1; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem 2rem;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: linear-gradient(var(--bg), transparent);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font: 700 1.05rem/1 var(--display);
  letter-spacing: 0.28em;
}
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  font: 600 0.82rem/1 var(--display);
  text-decoration: none;
  padding: 0.6rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); }

/* ---------- layout ---------- */
.wrap { max-width: 76rem; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }

.hero { padding-top: 9vh; padding-bottom: 5rem; min-height: 88vh; }
.hero > * { max-width: 44rem; }

.kicker, .label {
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker { margin-bottom: 1.5rem; }

h1 {
  font: 400 clamp(2.8rem, 6.6vw, 5.5rem)/1.02 var(--serif);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.grad {
  background: linear-gradient(100deg, var(--ink), var(--faint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  margin-top: 1.75rem;
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 36rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.25rem; }
.btn {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  font: 600 0.92rem/1 var(--display);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.big { font-size: 1.15rem; padding: 1.1rem 1.8rem; letter-spacing: 0.02em; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 5rem;
  max-width: 62rem !important;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.stats dt { font: 600 1.6rem/1.1 var(--display); letter-spacing: -0.02em; }
.stats dd { margin-top: 0.5rem; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }

/* ---------- sections ---------- */
.section { padding-top: 6.5rem; padding-bottom: 3rem; }
.label { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.label span { color: var(--faint); }
.label::after { content: ""; height: 1px; width: 4rem; background: var(--line); }

h2 {
  font: 400 clamp(2rem, 4.2vw, 3.2rem)/1.08 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 1.4rem;
  max-width: 40rem;
}
.section p { color: var(--muted); font-size: 1.05rem; max-width: 40rem; }
.section p + p { margin-top: 1.1rem; }
.section p strong { color: var(--ink); font-weight: 600; }
.section p em { color: var(--ink); }
.sub { margin-bottom: 2.4rem; }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 4rem; align-items: start; }
.split > div, .split figure { background: var(--panel); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.split > div { padding: 0; background: none; backdrop-filter: none; }

figure { border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem; }
figcaption { margin-top: 0.9rem; font: 400 0.72rem/1.4 var(--mono); color: var(--faint); letter-spacing: 0.04em; }

/* scale ladder */
.scale svg { width: 100%; height: auto; display: block; overflow: visible; }
.scale .axis { stroke: var(--line); stroke-width: 2; }
.scale .ticks circle { fill: var(--bg); stroke: var(--faint); stroke-width: 2; }
.scale .ticks .hot { fill: var(--accent-2); stroke: var(--accent-2); }
.scale .gapband { fill: rgba(var(--swarm), 0.09); stroke: var(--accent); stroke-dasharray: 4 5; stroke-width: 1; }
.scale .sz { font: 500 12px var(--mono); fill: var(--faint); }
.scale .sz.hot { fill: var(--accent-2); }
.scale .nm { font: 600 13.5px var(--display); fill: var(--ink); }
.scale .sb { font: 400 10.5px var(--mono); fill: var(--faint); }
.scale .gaplabel text:first-child { font: 700 13px var(--mono); fill: var(--accent); letter-spacing: 0.18em; }

/* replication animation */
.replic svg { width: 100%; height: auto; display: block; }
.replic .guide { stroke: var(--line); stroke-dasharray: 3 6; }
.replic .shell { fill: rgba(var(--swarm), 0.07); stroke: var(--ink); stroke-width: 2; }
.replic .core { fill: var(--accent); }
.replic .orbit { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 3 7; transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
.replic .cap { font: 500 11px var(--mono); fill: var(--muted); letter-spacing: 0.1em; }
.replic .cap.dim { fill: var(--faint); }
.replic .fs { fill: var(--accent-2); opacity: 0; animation: feed 8s ease-in infinite; }
.replic .fs:nth-child(2) { animation-delay: 0.3s; }
.replic .fs:nth-child(3) { animation-delay: 0.6s; }
.replic .fs:nth-child(4) { animation-delay: 0.9s; }
.replic .fs:nth-child(5) { animation-delay: 1.2s; }
.replic .fs:nth-child(6) { animation-delay: 1.5s; }
.replic .child { transform-box: fill-box; transform-origin: center; animation: bud 8s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes feed {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  38%  { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes bud {
  0%, 12% { transform: translate(60px, 0) scale(0); opacity: 0; }
  40%     { transform: translate(60px, 0) scale(1); opacity: 1; }
  68%     { transform: translate(200px, 0) scale(1); opacity: 1; }
  92%     { transform: translate(200px, 0) scale(1); opacity: 1; }
  100%    { transform: translate(200px, 0) scale(1); opacity: 0; }
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card {
  position: relative;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.6rem 1.4rem 1.4rem;
}
.card .idx, .tag {
  display: inline-block;
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.tag { padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.card h3 { font: 500 1.45rem/1.2 var(--serif); letter-spacing: -0.012em; margin-bottom: 0.7rem; }
.card p { font-size: 0.95rem; color: var(--muted); }
.card p.meta { margin-top: 1.1rem; font: 400 0.7rem/1.5 var(--mono); color: var(--faint); letter-spacing: 0.03em; }

/* rules */
.rules { list-style: none; margin: 1.4rem 0; max-width: 40rem; display: grid; gap: 0.6rem; }
.rules li {
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.97rem;
  color: var(--muted);
}
.rules b { color: var(--ink); font-family: var(--display); }

/* timeline */
.timeline {
  --p: 0;
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-top: 2.2rem;
}
.timeline::before, .timeline::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  height: 2px;
}
.timeline::before { right: 0; background: var(--line); }
.timeline::after { width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  top: -1.95rem;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--faint);
}
.timeline li.done::before { background: var(--accent); border-color: var(--accent); }
.timeline .ph { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.14em; color: var(--accent); }
.timeline h3 { font: 500 1.45rem/1.2 var(--serif); margin: 0.5rem 0 0.5rem; letter-spacing: -0.01em; }
.timeline p { font-size: 0.9rem !important; color: var(--muted); }
.timeline em { display: block; margin-top: 0.8rem; font: normal 500 0.68rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* notes */
.notes { list-style: none; max-width: 52rem; border-top: 1px solid var(--line); }
.notes li {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
  color: var(--muted);
}
.notes time { font: 500 0.78rem/1 var(--mono); color: var(--accent); letter-spacing: 0.06em; }
.notes a { font: 500 0.75rem/1 var(--mono); white-space: nowrap; text-decoration: none; }
.notes a:hover { text-decoration: underline; }

/* contact + footer */
.contact { min-height: 78vh; }
footer {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  padding-bottom: 3.5rem;
  margin-top: 2rem;
}
footer img { margin-top: 0.15rem; flex: none; }
footer p { font-size: 0.8rem; color: var(--faint); max-width: 46rem; line-height: 1.6; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transition: opacity 0.7s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; gap: 1.6rem; }
  .timeline::before, .timeline::after { top: 0; bottom: 0; left: 0.42rem; width: 2px; height: auto; right: auto; }
  .timeline::after { width: 2px; height: calc(var(--p) * 100%); }
  .timeline li::before { top: 0.15rem; left: -2rem; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav { padding: 0.75rem 1.25rem; }
  .cards, .cards.two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; margin-top: 3rem; }
  .notes li { grid-template-columns: 1fr; gap: 0.35rem; }
  .section { padding-top: 4.5rem; }
  .hud { display: none; }
  :root { --canvas-opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .replic .orbit, .replic .fs, .replic .child { animation: none; }
  .replic .child { opacity: 1; transform: translate(200px, 0); }
}

/* ---------- plain-copy additions ---------- */
.status { margin-top: 1.6rem; font: 400 0.78rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--faint); }
.hero > .status { max-width: 44rem; }
.section > p + .rules, .section > .rules + p { margin-top: 1.4rem; }
.notes li { grid-template-columns: 5rem 1fr auto; }

.loop svg { width: 100%; height: auto; display: block; }
.loop .flow { fill: none; stroke: var(--faint); stroke-width: 1.6; }
.loop .arrowhead { fill: var(--faint); }
.loop .node rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1.4; }
.loop .node .n { font: 500 10px var(--mono); fill: var(--faint); letter-spacing: 0.12em; }
.loop .node .t { font: 600 15px var(--display); fill: var(--ink); }
.loop .rep { font: 500 11px var(--mono); fill: var(--faint); letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- glass ---------- */
.split > div,
.split figure,
.card,
.timeline li,
.rules li,
.notes li,
.btn,
.hud,
.nav-cta {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(2px) saturate(1.15);
  -webkit-backdrop-filter: blur(2px) saturate(1.15);
}
.split > div { padding: 2rem 2.25rem; border-radius: 14px; }
.split figure { border-radius: 14px; }
.timeline li { padding: 1.4rem 1.3rem 1.2rem; border-radius: 12px; }
.rules li { border-radius: 10px; border-left: 2px solid var(--ink); }
.notes { border-top: 0; display: grid; gap: 0.6rem; }
.notes li { padding: 1rem 1.25rem; border-bottom: 1px solid var(--glass-edge); border-radius: 10px; }
.btn.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.nav { backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); }
.section p, .section h2 { text-shadow: none; }
@media (max-width: 640px) {
  .split > div { padding: 1.4rem 1.25rem; }
  .timeline li { padding: 1.2rem 1.1rem; }
}

/* serif headlines: the accent phrase goes italic, and serif type needs no faux bold */
.grad { font-style: italic; }
h1, h2 { font-weight: 400; }
.card h3, .timeline h3 { font-weight: 500; }
.section h2 { max-width: 44rem; }

/* ---------- buttons: clear states, work without a mail client ---------- */
.btn, .nav-cta { cursor: pointer; font-family: var(--display); -webkit-tap-highlight-color: transparent; }
button.btn { appearance: none; -webkit-appearance: none; color: inherit; }
.btn { min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.btn:hover, .nav-cta:hover { border-color: var(--ink); }
.btn:active, .nav-cta:active { transform: translateY(1px); filter: brightness(0.94); }
.btn.primary:hover { border-color: var(--accent); filter: brightness(1.12); }
.btn:focus-visible, .nav-cta:focus-visible, .nav-links a:focus-visible, .brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn.done { background: var(--panel); color: var(--ink); border-color: var(--ink); }
.email { margin: 0 0 1.4rem; }
.email span { font: 500 clamp(1.4rem, 3.4vw, 2.1rem)/1.2 var(--mono); letter-spacing: -0.01em; color: var(--ink); user-select: all; -webkit-user-select: all; }
.copy-status { font: 500 0.78rem/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); min-height: 1em; }
.contact .actions { align-items: center; }

/* ---------- thesis statement (replaces the flowchart) ---------- */
.thesis { display: flex; flex-direction: column; justify-content: center; padding: 2.4rem 2.2rem; border-radius: 14px; }
.thesis-label { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.4rem; }
.thesis blockquote { font: 400 clamp(1.6rem, 2.9vw, 2.35rem)/1.22 var(--serif); letter-spacing: -0.015em; color: var(--ink); }
.card { border-radius: 12px; }
.cards.two .card p { max-width: 30rem; }
@media (max-width: 640px) { .thesis { padding: 1.6rem 1.3rem; } }

/* three-up cards (principles) */
.cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cards.three { grid-template-columns: 1fr; } }

/* ---------- timeline: dots and rail share one centre line ----------
   The rail's centre line is a single variable (--rail-y wide, --rail-x narrow). Both the rail and the
   dots are centred on it with translate(-50%, -50%), in px, so they cannot drift apart. */
.timeline { --rail-y: 12px; --pad: 36px; --dot: 14px; padding-top: var(--pad); }
.timeline::before, .timeline::after {
  top: var(--rail-y);
  height: 2px;
  transform: translateY(-50%);
}
.timeline li::before {
  width: var(--dot);
  height: var(--dot);
  top: calc(var(--rail-y) - var(--pad));   /* li starts --pad below the timeline's top edge */
  left: calc(var(--dot) / 2);              /* dot's left edge sits on the card's left edge */
  transform: translate(-50%, -50%);
}
@media (max-width: 980px) {
  .timeline { --rail-x: 8px; --indent: 32px; padding-top: 0; padding-left: var(--indent); }
  .timeline::before, .timeline::after {
    top: 0;
    left: var(--rail-x);
    right: auto;
    width: 2px;
    transform: translateX(-50%);
  }
  .timeline::before { bottom: 0; height: auto; }
  .timeline::after { bottom: auto; height: calc(var(--p) * 100%); }
  .timeline li::before {
    top: 26px;                                   /* level with the "Step n" label */
    left: calc(var(--rail-x) - var(--indent));   /* li starts --indent from the timeline's left edge */
    transform: translate(-50%, -50%);
  }
}

/* timeline cards fade in but never slide: each dot is part of its card, and a sliding card would
   pull its dot off the rail for the length of the animation */
.js .timeline li.rv, .js .timeline li.rv.in { transform: none; }

/* narrow layout: each dot is level with its "Step n" label, derived from the same two numbers that place the label */
@media (max-width: 980px) {
  .timeline { --li-pt: 22px; --label-h: 15px; }
  .timeline .ph { display: block; line-height: var(--label-h); }
  .timeline li { padding-top: var(--li-pt); }
  .timeline li::before { top: calc(var(--li-pt) + var(--label-h) / 2); }
}

/* the card's border pushes its padding box 1px in from the outer edge, and abs-positioned dots are
   placed from the padding box, so the offsets subtract the border width from one shared variable */
.timeline li { --bw: 1px; border-width: var(--bw); }
.timeline li::before {
  top: calc(var(--rail-y) - var(--pad) - var(--bw));
  left: calc(var(--dot) / 2 - var(--bw));
}
@media (max-width: 980px) {
  .timeline li::before {
    top: calc(var(--li-pt) + var(--label-h) / 2);
    left: calc(var(--rail-x) - var(--indent) - var(--bw));
  }
}

/* header: the frosted bar spans the full width, but its content sits in the same column as the page
   (max 76rem including gutters, same gutters as .wrap), so logo and button line up with the content edges */
.nav {
  --gutter: 2rem;
  padding-inline: max(var(--gutter), calc((100% - 76rem) / 2 + var(--gutter)));
}
@media (max-width: 640px) { .nav { --gutter: 1.25rem; } }

/* header frosting lives on a layer that reaches 100vh ABOVE the bar, off-screen. When the page rubber-bands
   at the top, the sticky header moves down with it and this layer fills the gap with the same frosted look.
   (The blur is on this layer, not on .nav: a blurred child of a blurred parent can't see the page behind it.) */
.nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -100vh;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}

/* header items: bold while hovered, dimmed while pressed. An invisible bold copy of each label (data-label) reserves
   the bold width, so nothing shifts when the weight changes. */
.nav-links a, .nav-cta { display: inline-flex; flex-direction: column; align-items: center; transition: opacity 0.12s; }
.nav-links a::after, .nav-cta::after { content: attr(data-label); content: attr(data-label) / ""; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; }
.nav-links a:hover { font-weight: 700; color: var(--ink); }
.nav-cta:hover { font-weight: 700; background: var(--glass); border-color: var(--glass-edge); color: var(--ink); }
.nav-links a:active, .nav-cta:active { opacity: 0.45; transform: none; filter: none; }