:root {
  --bg: #faf5f5;
  --ink: #060606;
  --body: #434445;
  --title: #313030;
  --desc: #5f5f5f;
  --mute: #6e6e6e;
  --blue: #3a53ed;
  --path: #2c6fff;
  --route: #a9a7a7;
  --node: #8f8d8d;
  --rule: #cbc9d6;
  --hover: rgba(23, 22, 15, .05);
  --chip: #efeaea;
  --keyline: #fff;
  --card-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --col: 560px;
  --rail-x: -21px;
  --node-top: 43px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --flag: #2c6fff;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #191817;
  --ink: #f5f3f0;
  --body: #b9b8b6;
  --title: #e8e6e3;
  --desc: #a3a2a0;
  --mute: #9a9997;
  --blue: #7ea2ff;
  --route: #5e5c5c;
  --node: #6f6d6d;
  --rule: #39383f;
  --hover: rgba(255, 255, 255, .06);
  --chip: #2b2928;
  --keyline: rgba(255, 255, 255, .14);
  --card-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  --flag: #55524e;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

@media (hover: hover) and (pointer: fine) {
  html { overscroll-behavior-y: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 16px/1.6 var(--sans);
  letter-spacing: -.12px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }

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

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 30;
  padding: 8px 12px; border-radius: 6px;
  background: var(--ink); color: var(--bg);
  font: 500 12px/1.4 var(--mono);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Above the page and below the lever, which stays visible through the theme change. */
#veil { position: fixed; inset: 0; z-index: 30; opacity: 0; pointer-events: none; }

.label {
  font: 500 12px/1.8 var(--mono);
  letter-spacing: 1.84px;
  text-transform: uppercase;
  color: var(--mute);
}

/* ID block */
.id {
  display: flex; flex-wrap: wrap; justify-content: center; text-align: center;
  padding: 40px 16px 0;
}
/* Tracking adds space after the last letter, so centred lines sit left. This balances it. */
@media (max-width: 1399px) { .id .label > * { padding-left: 1.84px; } }
.id h1 { font: inherit; letter-spacing: inherit; color: var(--ink); }
.id .strip { display: none; }

@media (min-width: 1400px) {
  .id { position: fixed; top: 72px; left: 72px; padding: 0; gap: 20px; text-align: left; }
  .id .strip {
    display: block; width: 9px;
    background: radial-gradient(circle, var(--route) .7px, transparent 1px) 0 0 / 3px 3px;
  }
}

/* Status board. Flaps stay dark in both themes, like a real one, and only transform during a flip. */
.flap-status { flex-basis: 100%; margin-top: 10px; --flap-bg: #1d1c1b; --flap-ink: #f5f3f0; }
[data-theme="dark"] .flap-status { --flap-bg: #2b2928; }
.js .flap-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .flap-board { display: none; }
.flap-board { display: flex; flex-direction: column; gap: 3px; min-height: 47px; perspective: 550px; font: 500 14px/1 var(--mono); letter-spacing: 0; }
.flap-line { display: flex; justify-content: center; gap: 1px; color: var(--flap-ink); }
.flap-line [data-split-flap-character]::after { content: ""; position: absolute; top: 50%; display: block; width: 100%; height: var(--split-flap-crease); background: var(--flap-bg); transform: translateY(-50%); }
.flap-line [data-split-flap-flap] { box-sizing: content-box; width: 1em; height: .5em; border-radius: 2px; background: var(--flap-bg); line-height: 1; }
.flap-line [data-split-flap-flap="top"] { align-items: flex-start; padding-top: 4px; }
.flap-line [data-split-flap-flap="bottom"] { align-items: flex-end; padding-bottom: 4px; }
/* Right side once there's room beside the name, and fixed once it clears the 560px column. */
@media (min-width: 760px) {
  .flap-status { position: absolute; top: 40px; right: 24px; flex-basis: auto; margin: 0; }
  .flap-line { justify-content: flex-end; }
}
@media (min-width: 1110px) { .flap-status { position: fixed; z-index: 11; } }
@media (min-width: 1400px) { .flap-status { top: 72px; right: 72px; } }

/* Hero */
main { position: relative; }
.col { width: min(var(--col), 100% - 56px); margin-inline: auto; }
.hero { display: flex; flex-direction: column; align-items: center; padding-top: 40px; text-align: center; }
@media (min-width: 1400px) { .hero { padding-top: 96px; } }

.breaker {
  position: relative; display: block;
  width: 240px; height: 260px; padding: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --anatomy-paper: var(--bg); --bk-floor: #3a3835; --bk-wall-a: #5a5753; --bk-wall-b: #6e6a65;
}
[data-theme="dark"] .breaker { --bk-floor: #080808; --bk-wall-a: #161514; --bk-wall-b: #201f1d; }
.breaker:focus-visible { outline-offset: 6px; border-radius: 14px; }
.breaker > svg { display: block; width: 240px; height: 260px; }
.flag { fill: var(--flag); }
.bk-floor { fill: var(--bk-floor); }
.bk-wall-a { fill: var(--bk-wall-a); }
.bk-wall-b, .bk-rail { fill: var(--bk-wall-b); }

/* The lever is the one strong contrast in the drawing, so it reads as the thing to touch. */
.lever { position: absolute; z-index: 31; display: block; touch-action: none; cursor: grab; }
.bk-lever * { transition: fill .42s ease, stroke .42s ease; }
.lever:active { cursor: grabbing; }
.lever svg { display: block; overflow: visible; }
.bk-lever { --anatomy-face: #2f2d2a; --anatomy-lit-top: #4a4743; --anatomy-lit-shade: #262422; --anatomy-lit: #111; --anatomy-mid: #8a8782; --anatomy-lo: #6a6763; }
[data-theme="dark"] .bk-lever { --anatomy-face: #e8e5df; --anatomy-lit-top: #fff; --anatomy-lit-shade: #cfcbc4; --anatomy-lit: #fff; --anatomy-mid: #77746e; --anatomy-lo: #8f8c86; }

/* Rolling flag: a strip in the face plane, moved by the lever. */
.fx-window { position: absolute; z-index: 31; left: 0; top: 0; display: block; width: 26px; height: 12px; overflow: hidden; transform-origin: 0 0; pointer-events: none; }
.fx-strip { display: block; font: 500 8px/12px var(--mono); letter-spacing: .4px; text-align: center; color: #fff; }
.fx-strip span { display: block; height: 12px; }
.fx-strip .on { background: #2259e0; }
.fx-strip .off { background: #55524e; }

/* Glow in the dark: a faint pulse so the switch is easy to find with the lights off. */
.lever::after { content: ""; position: absolute; inset: -7px; border-radius: 12px; background: radial-gradient(closest-side, rgba(126, 162, 255, .5), rgba(126, 162, 255, 0)); opacity: 0; pointer-events: none; z-index: -1; }
[data-theme="dark"] .lever::after { animation: fx-glow 2.8s ease-in-out infinite; }
[data-theme="dark"] .breaker text { fill: #9db8ff; }
@keyframes fx-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .lever::after { animation: none; opacity: .7; }
}

.role { margin-top: 36px; font-weight: 500; color: var(--ink); line-height: 1.8; }
.intro { color: var(--desc); max-width: 30rem; text-wrap: balance; }

/* Feed from the hero into the timeline */
.feed { position: relative; height: 136px; margin-top: 20px; }
/* Wide enough for the label to sit beside the centred intro text instead of below it. */
@media (min-width: 720px) { .feed { margin-top: -52px; } }
.feed .tag {
  position: absolute; left: calc(var(--rail-x) + 54.5px); top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min-content; text-align: center;
  color: var(--blue);
  font: 500 10px/1.2 var(--mono); letter-spacing: 1px; text-transform: uppercase;
}
.feed svg.curve { position: absolute; top: 48px; left: var(--rail-x); overflow: visible; }
.curve path { fill: none; stroke: var(--path); stroke-width: 1; }

/* Timeline */
.route {
  position: relative; padding-bottom: 28px;
  view-timeline: --route block;
}
.rail, .fill { position: absolute; left: var(--rail-x); top: 0; bottom: 0; width: 1px; pointer-events: none; }
/* A gradient, because a 1px dashed border renders unevenly at fractional phone densities. */
.rail { background: repeating-linear-gradient(to bottom, var(--route) 0 3px, transparent 3px 6px); }
.fill { background: var(--path); }
.head { display: none; }
@supports (animation-timeline: view()) {
  /* Clip, not scaleY: a route-tall layer exceeds phone GPU texture limits and garbles. Paint cost is a 1px-wide line. */
  .fill {
    animation: energize linear both;
    animation-timeline: --route;
    animation-range: cover 35vh cover calc(100% - 65vh);
    animation-range: cover 35svh cover calc(100% - 65svh);
  }
  @keyframes energize { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

  /* A small dot moved by the route's measured height, so only a tiny layer is composited. */
  .head {
    display: block;
    animation: travel linear both;
    animation-timeline: --route;
    animation-range: cover 35vh cover calc(100% - 65vh);
    animation-range: cover 35svh cover calc(100% - 65svh);
  }
  @keyframes travel { from { transform: translateY(0); } to { transform: translateY(var(--route-h, 0px)); } }
}
.head {
  position: absolute; left: calc(var(--rail-x) - 2px); top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--path); pointer-events: none;
  box-shadow: 0 0 5px 1px rgba(44, 111, 255, .7), 0 0 14px 4px rgba(44, 111, 255, .28);
}
@media (prefers-reduced-motion: reduce) {
  .fill { animation: none; clip-path: none; }
  .head { display: none; }
}

.timeline { display: flex; flex-direction: column; gap: 36px; }
.entry { position: relative; }
.when {
  display: block; margin-bottom: 8px;
  font: 500 12px/1.2 var(--mono); letter-spacing: 1.05px; color: var(--mute);
}
.when small { font-size: 10px; letter-spacing: .9px; margin-right: 8px; }

.mark {
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-bottom: 6px; border-radius: 50%;
  background: var(--chip); color: var(--ink);
  box-shadow: 0 0 0 1px var(--keyline);
  font: 500 10px/1 var(--mono); letter-spacing: 0;
}

.node, .dot {
  position: absolute; border-radius: 50%;
  transition: background-color .28s ease, box-shadow .28s ease;
}
.node {
  left: calc(var(--rail-x) - 5px); top: var(--node-top); width: 11px; height: 11px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--node), inset 0 0 0 3px var(--bg), inset 0 0 0 6px var(--node);
}
.node.passed { box-shadow: inset 0 0 0 1px var(--path), inset 0 0 0 3px var(--bg), inset 0 0 0 6px var(--path); }
.dot { left: calc(var(--rail-x) - 2px); top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--node); }
.dot.passed { background: var(--path); }
.node::after, .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--path); opacity: 0; pointer-events: none;
}
.node.passed::after { --pulse-to: 2.4; animation: dot-pulse .72s var(--ease-out); }
.dot.passed::after { --pulse-to: 3.6; animation: dot-pulse .72s var(--ease-out); }
@keyframes dot-pulse { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(var(--pulse-to)); } }

.company { font: inherit; font-weight: 500; line-height: 1.8; color: var(--ink); }
.current {
  margin-left: 8px;
  font: 500 12px/1 var(--mono); letter-spacing: .96px; text-transform: uppercase; color: var(--blue);
}
.job { font-weight: 500; }
.rows { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.rows li { position: relative; }
.row {
  display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px;
  min-height: 72px; padding: 8px 12px 8px 8px; border-radius: 16px;
}
a.row { transition: background-color .15s ease; }
@media (hover: hover) { a.row:hover { background: var(--hover); } }
a.row:focus-visible { background: var(--hover); border-radius: 16px; }
.fan { position: relative; display: block; height: 52px; }
.card {
  position: absolute; left: 21px; top: 2px;
  width: 36px; height: 48px; border-radius: 4px; overflow: hidden;
  background: var(--chip);
  box-shadow: 0 0 0 1px var(--keyline), var(--card-shadow);
}
.card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card:nth-child(1) { transform: translate(-16px) rotate(-7deg) scale(.9); }
.card:nth-child(3) { transform: translate(16px) rotate(7deg) scale(.9); }
.card:nth-child(2) { z-index: 1; }
.tile { display: grid; place-items: center; font: 500 10px/1 var(--mono); color: var(--ink); }
.name { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: var(--title); }
a.row .name::after { content: " ↗"; content: " ↗" / ""; color: var(--mute); }
.what { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--desc); }

.end-mark { position: absolute; left: calc(var(--rail-x) - 3.5px); bottom: 0; color: var(--path); }

/* Toolkit and sign-off */
.toolkit { margin-top: 44px; }
.toolkit h2 { font: inherit; font-weight: 500; color: var(--ink); line-height: 1.8; margin-bottom: 8px; }
.toolkit div { display: grid; grid-template-columns: 124px 1fr; gap: 12px; padding: 6px 0; }
.toolkit dt { font: 500 11px/1.9 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.toolkit dd { font-size: 14px; line-height: 1.5; letter-spacing: 0; }

.signoff { margin-top: 44px; padding-bottom: calc(40vh + 40px); }
.signoff strong { display: block; font-weight: 500; color: var(--body); }
.signoff p { font-size: 14px; line-height: 1.6; }
.signoff a { text-decoration: underline; text-decoration-color: var(--route); text-underline-offset: 3px; }

/* Bottom fade and links. A gradient, not backdrop blur, which would repaint a full-width band on every scrolled frame. */
.fade {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: 120px;
  background: linear-gradient(to top, var(--bg) 42%, transparent);
  pointer-events: none;
}
.links {
  position: fixed; left: 50%; bottom: 14px; z-index: 11; transform: translateX(-50%);
  display: flex; gap: 12px;
}
.links a {
  display: block; padding: 8px 6px;
  font: 500 12px/1.2 var(--mono); letter-spacing: 2.16px; text-transform: uppercase; color: var(--mute);
  transition: color .15s ease;
}
@media (hover: hover) { .links a:hover { color: var(--ink); } }

/* Credit in the bottom right corner, desktop only. */
.inspo { display: none; }
@media (min-width: 1110px) {
  .inspo {
    position: fixed; right: 24px; bottom: 14px; z-index: 11;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font: 500 11px/1.3 var(--mono); letter-spacing: .6px; color: var(--mute);
  }
  .inspo a { text-decoration: underline; text-decoration-color: var(--route); text-underline-offset: 2px; transition: color .15s ease; }
}
@media (hover: hover) { .inspo a:hover { color: var(--ink); } }

/* One-shot reveal: opacity and translate only */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .52s var(--ease-out), transform .52s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

@media (min-width: 1000px) {
  .when { position: absolute; right: calc(100% + 42px); top: 28px; margin: 0; text-align: right; white-space: nowrap; }
  .when small { display: block; margin: 0 0 2px; }
}

@media (max-width: 999px) {
  :root { --rail-x: -14px; --node-top: 65px; }
  .entry.no-when { --node-top: 43px; }
}

@media (max-width: 480px) {
  .toolkit div { grid-template-columns: 1fr; gap: 0; }
  .links { gap: 2px; }
  .links a { letter-spacing: 1.2px; }
  .row { padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; }
  .node::after, .dot::after { animation: none !important; }
}