/* Variant claude-fable-5.1.
   Concept: a transit network. The three areas of expertise are three lines, each with four
   stations for the topics it serves and an endstation plate for the outcome it delivers; the nine
   working principles form a ring line around them, and the visitor rides the page along a strip
   map whose carriage travels from the network to the terminus as they scroll. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #f3f4f8;
  --ink: #101828;
  --muted: #4f5668;
  --rule: #d2d6e0;
  --soft: #e7eaf1;
  --accent: #e0a020;
  --accent-ink: #101828;
  --line-1: #b3134b;
  --line-2: #0f766e;
  --line-3: #5b3fd6;
  --line-fg: #ffffff;
  --board-bg: #0f1a2e;
  --board-fg: #f6f7fb;
  --board-muted: #a9b1c4;
  --board-ring: #8a93a8;
  --board-line-1: #ff5f93;
  --board-line-2: #2dd4bf;
  --board-line-3: #a78bfa;
  --strip-w: 0px;
  --strip-h: 0px;
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rail: 6px;
  --gutter: clamp(1rem, 4vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1120;
    --ink: #eef0f6;
    --muted: #a6adc2;
    --rule: #273047;
    --soft: #141c30;
    --accent: #ffc14d;
    --accent-ink: #0b1120;
    --line-1: #ff5f93;
    --line-2: #2dd4bf;
    --line-3: #a78bfa;
    --line-fg: #0b1120;
    --board-bg: #121c33;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120;
  --ink: #eef0f6;
  --muted: #a6adc2;
  --rule: #273047;
  --soft: #141c30;
  --accent: #ffc14d;
  --accent-ink: #0b1120;
  --line-1: #ff5f93;
  --line-2: #2dd4bf;
  --line-3: #a78bfa;
  --line-fg: #0b1120;
  --board-bg: #121c33;
}

@property --p1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p4 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p5 { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--shell-height, 56px);
  padding-left: var(--strip-w);
  padding-bottom: var(--strip-h);
  timeline-scope: --s-expertise, --s-further, --s-approach, --s-background, --s-contact;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

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

.skip {
  position: absolute;
  top: calc(var(--shell-height, 56px) + 0.5rem);
  left: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 84rem);
  margin-inline: auto;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the board (hero) ---------- */

.board {
  position: relative;
  background: var(--board-bg);
  color: var(--board-fg);
  border-bottom: 1px solid var(--rule);
}

.board__inner {
  display: grid;
  gap: clamp(2rem, 4vh, 3rem);
  min-height: calc(100svh - var(--shell-height, 56px));
  padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 5vh, 4rem);
  align-content: center;
}

.board__text {
  display: grid;
  gap: 1rem 3rem;
  min-width: 0;
}

.board__name {
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.board__positioning {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.3;
}
.board__positioning strong { font-weight: 700; }

.board__place {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--board-muted);
}

.board__hint {
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--board-muted);
}

@media (min-width: 60rem) {
  .board__text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
  .board__name { grid-column: 1; grid-row: 1 / 3; }
  .board__positioning { grid-column: 2; grid-row: 1; }
  .board__hint { grid-column: 2; grid-row: 2; }
  .board__place { grid-column: 1; grid-row: 3; }
}

/* ---------- the network: three lines inside a ring ---------- */

.network { min-width: 0; }

.net {
  display: none;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font);
}

.net__ringtrack {
  fill: none;
  stroke: var(--board-ring);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 22 16;
}
.net__ringpt {
  fill: var(--board-bg);
  stroke: var(--board-ring);
  stroke-width: 5;
}
.net__ringlbl {
  fill: var(--board-muted);
  font-size: 15px;
  font-weight: 600;
}

.net__track {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.net__line--1 .net__track, .net__line--1 .net__st, .net__line--1 .net__dot { stroke: var(--board-line-1); }
.net__line--2 .net__track, .net__line--2 .net__st, .net__line--2 .net__dot { stroke: var(--board-line-2); }
.net__line--3 .net__track, .net__line--3 .net__st, .net__line--3 .net__dot { stroke: var(--board-line-3); }
.net__line--1 .net__plate rect, .net__line--1 .net__glow { fill: var(--board-line-1); }
.net__line--2 .net__plate rect, .net__line--2 .net__glow { fill: var(--board-line-2); }
.net__line--3 .net__plate rect, .net__line--3 .net__glow { fill: var(--board-line-3); }

.net__st {
  fill: var(--board-bg);
  stroke-width: 5;
}
.net__stlbl {
  fill: var(--board-fg);
  font-size: 15px;
  font-weight: 700;
}
.net__platename {
  fill: var(--board-bg);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.net__plateout {
  fill: var(--board-bg);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.net__plate { cursor: default; }

.net__glow { opacity: 0.35; }
.net__dot {
  fill: var(--board-fg);
  stroke-width: 3;
}
.net__train--ring .net__glow { fill: var(--board-ring); }
.net__train--ring .net__dot { stroke: var(--board-ring); }

.net__line, .net__ring { transition: opacity 240ms ease; }
.net:has(.net__line--1:hover) :is(.net__line--2, .net__line--3),
.net:has(.net__line--2:hover) :is(.net__line--1, .net__line--3),
.net:has(.net__line--3:hover) :is(.net__line--1, .net__line--2) { opacity: 0.22; }

/* the same network as lists: the phone layout, and the accessible version on wide screens */
.netlist {
  display: grid;
  gap: 2rem;
}
.netlist__line {
  --line: var(--board-fg);
  position: relative;
  padding-left: 2.25rem;
}
.netlist__line--1 { --line: var(--board-line-1); }
.netlist__line--2 { --line: var(--board-line-2); }
.netlist__line--3 { --line: var(--board-line-3); }
.netlist__line::before {
  content: "";
  position: absolute;
  left: calc(0.75rem - var(--rail) / 2);
  top: 1rem;
  bottom: 0.6rem;
  width: var(--rail);
  border-radius: 999px;
  background: var(--line);
}
.netlist__plate {
  display: block;
  margin-left: -2.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--line);
  color: var(--board-bg);
  text-decoration: none;
}
.netlist__plate strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.netlist__plate span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.85;
}
.netlist__stops { display: grid; gap: 0.9rem; }
.netlist__stops li { position: relative; }
.netlist__stops li::before {
  content: "";
  position: absolute;
  left: calc(-2.25rem + 0.75rem - 0.5rem);
  top: 50%;
  width: 1rem;
  height: 1.5rem;
  translate: 0 -50%;
  border-radius: 0.35rem;
  background: var(--board-bg);
  border: 3px solid var(--line);
}
.netlist__stops a {
  font-size: 1rem;
  font-weight: 700;
  color: var(--board-fg);
  text-decoration: none;
}
.netlist__stops a:hover { text-decoration: underline; }
.netlist__ringtitle {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--board-ring);
}
.netlist__pts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.netlist__pts a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border: 2px dashed var(--board-ring);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--board-fg);
  text-decoration: none;
}
.netlist__pts a::before {
  content: "";
  width: 0.6rem;
  height: 0.9rem;
  border-radius: 0.2rem;
  border: 2px solid var(--board-ring);
}
.netlist__pts a:hover { border-style: solid; }

@media (min-width: 60rem) {
  .net { display: block; }
  .netlist { display: none; }
}

/* ---------- the strip map: the carriage travels the page ---------- */

.strip {
  position: fixed;
  z-index: 5;
  background: var(--bg);
  color: var(--ink);
}
.strip__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip__stations {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.strip__stations::before {
  content: "";
  position: absolute;
  background: var(--ink);
}
.strip__station {
  position: relative;
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms ease;
}
.strip__station::before {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--ink);
  transition: transform 180ms ease;
}
.strip__station:hover,
.strip__station:focus-visible,
.strip__station[aria-current] { color: var(--ink); }
.strip__station[aria-current] { font-weight: 700; }
.strip__station:hover::before { transform: scale(1.25); }
.strip__station:focus-visible { outline-offset: 2px; }

.strip__stations::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
  pointer-events: none;
}

@media (max-width: 63.98rem) {
  :root { --strip-h: 3.75rem; }
  .strip {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--strip-h);
    padding: 0.6rem var(--gutter) 0;
    border-top: 1px solid var(--rule);
  }
  .strip__title { display: none; }
  .strip__stations {
    height: 100%;
    align-items: flex-start;
    padding-top: 1.4rem;
  }
  .strip__stations::before {
    left: 0.375rem;
    right: 0.375rem;
    top: 1.4rem;
    translate: 0 -50%;
    height: 3px;
  }
  .strip__stations li { position: relative; width: 0.75rem; height: 0.75rem; }
  .strip__station {
    width: 0.75rem;
    height: 0.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 200%;
  }
  .strip__station::before { inset: 0; translate: 0 -50%; }
  .strip__station[aria-current] {
    position: absolute;
    top: -1.3rem;
    width: auto;
    height: auto;
    overflow: visible;
    text-indent: 0;
    font-size: 0.75rem;
  }
  .strip__station[aria-current]::before { top: 1.3rem; left: 0; bottom: auto; }
  .strip__stations li:nth-child(n + 4) .strip__station[aria-current] { right: 0; text-align: right; }
  .strip__stations li:nth-child(n + 4) .strip__station[aria-current]::before { left: auto; right: 0; }
  .strip__stations::after {
    top: 1.4rem;
    left: calc(0.375rem + (var(--p1) + var(--p2) + var(--p3) + var(--p4) + var(--p5)) * (100% - 0.75rem) / 5);
    translate: -50% -50%;
  }
}

@media (min-width: 64rem) {
  :root { --strip-w: 13.5rem; }
  .strip {
    left: 0;
    top: var(--shell-height, 56px);
    bottom: 0;
    width: var(--strip-w);
    padding: clamp(2rem, 5vh, 3.5rem) 1rem clamp(2rem, 5vh, 3.5rem) var(--gutter);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .strip__stations {
    flex: 1 1 auto;
    flex-direction: column;
    padding-left: 1.75rem;
  }
  .strip__stations::before {
    left: calc(0.375rem - 1.5px);
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
  }
  .strip__station::before {
    left: -1.75rem;
    top: 0.5em;
    translate: 0 -50%;
  }
  .strip__stations::after {
    left: calc(0.375rem - 0.5625rem);
    top: calc(0.375rem + (var(--p1) + var(--p2) + var(--p3) + var(--p4) + var(--p5)) * (100% - 0.75rem) / 5);
    translate: 0 -50%;
  }
}

#expertise { view-timeline-name: --s-expertise; }
#further { view-timeline-name: --s-further; }
#approach { view-timeline-name: --s-approach; }
#background { view-timeline-name: --s-background; }
#contact { view-timeline-name: --s-contact; }

@keyframes progress { from { --p1: 0; } to { --p1: 1; } }
@keyframes progress-2 { from { --p2: 0; } to { --p2: 1; } }
@keyframes progress-3 { from { --p3: 0; } to { --p3: 1; } }
@keyframes progress-4 { from { --p4: 0; } to { --p4: 1; } }
@keyframes progress-5 { from { --p5: 0; } to { --p5: 1; } }

@supports (animation-timeline: view()) and (animation-range: cover 0% cover 60vh) {
  .strip {
    animation-name: progress, progress-2, progress-3, progress-4, progress-5;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --s-expertise, --s-further, --s-approach, --s-background, --s-contact;
    animation-range: cover 0% cover 60vh, cover 0% cover 60vh, cover 0% cover 60vh, cover 0% cover 60vh, cover 0% exit 0%;
  }
}

/* ---------- sections ---------- */

.section {
  padding-block: clamp(4rem, 9vw, 8rem);
  border-bottom: 1px solid var(--rule);
}

.section-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head h2 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.lede {
  max-width: 40ch;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.35;
  color: var(--muted);
}
.lede strong { color: var(--ink); font-weight: 600; }

@media (min-width: 60rem) {
  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
  .section-head__aside { justify-self: end; }
}

/* ---------- expertise: three lines, four stations each ---------- */

.line {
  --line: var(--ink);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--line) 7%, var(--bg));
}
.line + .line { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.line--1 { --line: var(--line-1); }
.line--2 { --line: var(--line-2); }
.line--3 { --line: var(--line-3); }

.line__head {
  display: grid;
  gap: 0.875rem;
  align-content: start;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-radius: 999px;
  background: var(--line);
  color: var(--line-fg);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge::before {
  content: "";
  width: 0.5rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  border: 2px solid var(--line-fg);
}

.line__name {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.line__outcome {
  max-width: 30ch;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  font-weight: 500;
}

/* the stations: a track with four stops, vertical on phones and horizontal on desks */
.stops {
  --mark-w: 1.125rem;
  --mark-h: 1.75rem;
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding-left: calc(var(--mark-w) + 1.25rem);
}
.stops::before {
  content: "";
  position: absolute;
  left: calc(var(--mark-w) / 2 - var(--rail) / 2);
  top: 0.4rem;
  bottom: 0.4rem;
  width: var(--rail);
  border-radius: 999px;
  background: var(--line);
}
.stop {
  position: relative;
  min-width: 0;
}
.stop__mark {
  position: absolute;
  left: calc(-1 * var(--mark-w) - 1.25rem);
  top: 0;
  width: var(--mark-w);
  height: var(--mark-h);
  border-radius: 0.4rem;
  background: var(--bg);
  border: 4px solid var(--line);
  transition: background-color 200ms ease, transform 200ms ease;
}
.stop:hover .stop__mark,
.stop:target .stop__mark { background: var(--line); transform: scale(1.08); }
.stop__name {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.stop__text {
  margin-top: 0.4rem;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}
.stop__evidence {
  margin-top: 0.75rem;
  max-width: 34ch;
  padding-left: 0.75rem;
  border-left: 3px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 500;
}
.stop__tag {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--line);
}

@media (min-width: 60rem) {
  .line { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .stops {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1.25rem;
    padding-left: 0;
    padding-top: calc(var(--mark-h) + 1rem);
  }
  .stops::before {
    left: 0;
    right: 0;
    top: calc(var(--mark-h) / 2 - var(--rail) / 2);
    bottom: auto;
    width: auto;
    height: var(--rail);
  }
  .stop__mark {
    left: 0;
    top: calc(-1 * var(--mark-h) - 1rem);
  }
}

@media (min-width: 80rem) {
  .line { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}

/* ---------- further evidence: a side branch ---------- */

.branch {
  --mark: 1rem;
  --top: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.branch::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--mark) / 2 - 1px);
  width: 2px;
  background: var(--ink);
}
.branch li {
  position: relative;
  padding-left: calc(var(--mark) + 1rem);
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.branch li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: var(--mark);
  height: var(--mark);
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--ink);
}
.branch li:last-child { padding-bottom: 0; }

.roundel {
  display: inline-flex;
  align-items: flex-start;
  max-width: 100%;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
}
.roundel::before {
  content: "";
  flex: none;
  margin-top: 0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
  border: 2px solid var(--accent);
}

@media (min-width: 60rem) {
  .branch { flex-direction: row; }
  .branch::before {
    top: calc(var(--top) + var(--mark) / 2 - 1px);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
  }
  .branch li {
    flex: 1 1 0;
    padding-left: 0;
    padding-right: 1.5rem;
    padding-top: calc(var(--top) + var(--mark) + 0.75rem);
    padding-bottom: 0;
  }
  .branch li::before { top: var(--top); left: 0; }
  .branch li:last-child { flex-grow: 1.6; padding-right: 0; }
}

/* ---------- approach: the ring line ---------- */

.ring {
  --mark-w: 1.125rem;
  --mark-h: 1.75rem;
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  padding-left: calc(var(--mark-w) + 1.25rem);
}
.ring::before {
  content: "";
  position: absolute;
  left: calc(var(--mark-w) / 2 - var(--rail) / 2);
  top: 0.4rem;
  bottom: 0.4rem;
  width: var(--rail);
  border-radius: 999px;
  background: repeating-linear-gradient(to bottom, var(--muted) 0 14px, transparent 14px 22px);
}
.ring__pt { position: relative; min-width: 0; }
.ring__mark {
  position: absolute;
  left: calc(-1 * var(--mark-w) - 1.25rem);
  top: 0;
  width: var(--mark-w);
  height: var(--mark-h);
  border-radius: 0.4rem;
  background: var(--bg);
  border: 4px solid var(--muted);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.ring__pt:hover .ring__mark,
.ring__pt:target .ring__mark { background: var(--accent); border-color: var(--accent); }
.ring__name {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.ring__text {
  margin-top: 0.4rem;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (min-width: 60rem) {
  .ring {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 0;
    padding-top: calc(var(--mark-h) + 1rem);
  }
  .ring::before {
    left: 0;
    right: 0;
    top: calc(var(--mark-h) / 2 - var(--rail) / 2);
    bottom: auto;
    width: auto;
    height: var(--rail);
    background: repeating-linear-gradient(to right, var(--muted) 0 14px, transparent 14px 22px);
  }
  .ring__mark {
    left: 0;
    top: calc(-1 * var(--mark-h) - 1rem);
  }
  /* only the first row sits on the ring track; the other rows carry their own mark */
  .ring__pt:nth-child(n + 4) { padding-top: calc(var(--mark-h) + 0.75rem); }
  .ring__pt:nth-child(n + 4) .ring__mark { top: 0; }
}

/* ---------- background: the career line ---------- */

.summary {
  max-width: 44ch;
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.career {
  --mark: 1.25rem;
  --top: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.career::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--mark) / 2 - var(--rail) / 2);
  width: var(--rail);
  background: var(--ink);
}
.career__stop {
  position: relative;
  padding-left: calc(var(--mark) + 1.25rem);
  padding-bottom: 1.75rem;
  min-width: 0;
}
.career__stop::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0.15rem;
  width: var(--mark);
  height: var(--mark);
  border-radius: 50%;
  background: var(--bg);
  border: 4px solid var(--ink);
}
.career__stop--now::before { background: var(--accent); border-color: var(--accent); }
.career__stop:last-child { padding-bottom: 0; }

.career time {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.career__stop--now time { color: var(--ink); }
.career__role {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.career__org {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
}
.career__focus {
  display: block;
  margin-top: 0.5rem;
  max-width: 30ch;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (min-width: 60rem) {
  .career { flex-direction: row; }
  .career::before {
    top: calc(var(--top) + var(--mark) / 2 - var(--rail) / 2);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: var(--rail);
  }
  .career::after {
    content: "";
    position: absolute;
    right: -2px;
    top: calc(var(--top) + var(--mark) / 2 - 0.5rem);
    width: 1rem;
    height: 1rem;
    border-top: var(--rail) solid var(--ink);
    border-right: var(--rail) solid var(--ink);
    transform: rotate(45deg);
  }
  .career__stop {
    flex: var(--span, 2) 1 11rem;
    padding-left: 0;
    padding-right: 1.5rem;
    padding-top: calc(var(--top) + var(--mark) + 0.75rem);
    padding-bottom: 0;
  }
  .career__stop::before { top: var(--top); }
  .career time {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
}

.facts {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.facts h3 {
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stops-list {
  --mark: 1rem;
  position: relative;
}
.stops-list::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: calc(var(--mark) / 2 - 1px);
  width: 2px;
  background: var(--ink);
}
.stops-list li {
  position: relative;
  padding-left: calc(var(--mark) + 1rem);
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.stops-list li:last-child { padding-bottom: 0; }
.stops-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: var(--mark);
  height: var(--mark);
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--ink);
}
.stops-list strong { display: block; font-weight: 700; }
.stops-list .sub { display: block; color: var(--muted); }
.stops-list .thesis {
  display: block;
  margin-top: 0.25rem;
  max-width: 44ch;
  font-size: 0.875rem;
  color: var(--muted);
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}
.langs li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1rem;
  font-weight: 600;
}
.langs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--bg);
}
.langs .sub { font-weight: 400; color: var(--muted); }

@media (min-width: 60rem) {
  .facts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- terminus (footer) ---------- */

.terminus {
  display: grid;
  align-content: center;
  min-height: 55svh;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.terminus__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.terminus__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--bg);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.terminus__link small {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.terminus__link:hover,
.terminus__link:focus-visible { background: var(--accent); color: var(--accent-ink); }
.terminus__foot {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
@media (min-width: 60rem) {
  .terminus__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- motion ---------- */

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes march { to { stroke-dashoffset: -38; } }
@keyframes beacon {
  0% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 14px transparent; }
}
@keyframes fill-mark {
  from { background-color: var(--bg); border-color: var(--ink); transform: scale(0.85); }
  to { background-color: var(--accent); border-color: var(--accent); transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .net__track {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.1s cubic-bezier(0.3, 0.7, 0.1, 1) both;
  }
  .net__st {
    transform-box: fill-box;
    transform-origin: center;
    animation: pop 500ms cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
  }
  .net__stlbl { animation: fade-in 500ms ease-out both; }
  .net__plate { animation: rise 600ms ease-out both; }
  .net__ringpt,
  .net__ringlbl { animation: fade-in 600ms ease-out both; }
  .net__ringtrack { animation: march 1.6s linear infinite; }
  .strip__stations::after { animation: beacon 2.6s ease-out infinite; }

  @supports (animation-timeline: view()) {
    .career__stop--now::before {
      animation: fill-mark linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 70%;
    }
  }
}

@keyframes ride {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  88% { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes loop {
  0% { offset-distance: 0%; opacity: 0; }
  3% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}

.net__train {
  display: none;
  offset-rotate: 0deg;
  opacity: 0;
}
@supports (offset-path: path("M 0 0 L 1 0")) {
  @media (prefers-reduced-motion: no-preference) {
    .net__train { display: block; animation: ride 7s linear infinite both; }
    .net__train--ring { animation: loop 26s linear infinite both; }
  }
}