/* tokspur site. Fonts and tokens first, then components in page order. */

/* Self-hosted variable fonts (Latin subset), SIL Open Font License 1.1. See fonts/*-OFL.txt. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('fonts/martian-mono-latin-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ivory: #F5F0E6;
  --bone: #ECE5D7;
  --paper: #FBF8F2;
  --ink: #17140F;
  --umber: #4A433A;
  --stone: #5E574C;
  --rule: #8F8678;
  --hair: #D6CDBD;
  --verm: #E8441C;
  --verm-deep: #B83211;
  --ember: #FF6A3D;
  --carbon: #15120E;
  --carbon-2: #221E18;
  --carbon-line: #3A342B;
  --on-carbon: #EDE6D8;
  --on-carbon-2: #AFA595;

  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(16px, 4.5vw, 48px);
  --section: clamp(80px, 10vw, 144px);
  --lean: 0.5; /* the spur angle: horizontal run per unit of height, 26.6 degrees from vertical */

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { color: var(--verm-deep); }

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

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ivory);
  font-weight: 600;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }
.nb { white-space: nowrap; }
.skip:hover { color: var(--ivory); }
.label, .nav a, .status, .notice__label, .steps__n, .now__date, .credit, .module__state {
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Masthead */

.masthead { padding-block: 22px; }
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.brand { display: inline-flex; color: var(--ink); }
.brand svg { height: 30px; width: auto; }
.brand .spur { fill: var(--verm); }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  text-decoration: none;
  color: var(--ink);
}
.nav a:hover { color: var(--verm-deep); text-decoration: underline; }

/* Hero */

.hero { padding-block: clamp(40px, 7vw, 112px) clamp(8px, 2vw, 32px); }

h1 {
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6.25rem);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 13ch;
  text-wrap: balance;
}

.lede {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 56ch;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--umber);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: clamp(32px, 4vw, 44px);
}

/* Buttons carry the spur cut on their leading edge. The shape is drawn on pseudo-elements, so the focus outline on the link itself is never clipped. */
.btn {
  --h: 52px;
  --fill: var(--ink);
  --face: var(--ivory);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: var(--h);
  padding: 0 calc(22px + var(--h) * var(--lean)) 0 22px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--face);
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.btn::before {
  inset: 0;
  background: var(--fill);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * var(--lean)) 100%, 0 100%);
}
.btn--primary:hover { --fill: var(--verm); --face: var(--ink); color: var(--ink); }
.btn--secondary { --face: var(--ink); color: var(--ink); }
.btn--secondary::after {
  /* inner face, inset 2 px, so the outline keeps a 2 px edge along the cut as well */
  inset: 2px;
  background: var(--ivory);
  clip-path: polygon(0 0, calc(100% - 1.24px) 0, calc(100% - 1.24px - (var(--h) - 4px) * var(--lean)) 100%, 0 100%);
}
.btn--secondary:hover { color: var(--ink); }
.btn--secondary:hover::after { background: var(--bone); }

/* Sections and the commit rule that opens each one. */

.section { padding-block: var(--section); }
.section--bone { background: var(--bone); }

.rule {
  position: relative;
  height: 15px;
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.rule::before {
  /* the commit point: a stem crossing the line */
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 3px;
  height: 22px;
  background: var(--verm);
}
.rule::after {
  /* instrument scale: a fine tick every 8 px, a longer one every 40 px */
  content: "";
  position: absolute;
  left: 34%;
  right: 0;
  bottom: 0;
  height: 9px;
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 40px) bottom left / 100% 9px no-repeat,
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 8px) bottom left / 100% 5px no-repeat;
}

/* With the script and motion allowed, the line draws out from the commit stem as its section arrives. */
.rule--armed { background-size: 0% 1px; transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rule--armed::after { transform: scaleX(0); transform-origin: left; transition: transform 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rule--armed.rule--in { background-size: 100% 1px; }
.rule--armed.rule--in::after { transform: none; }

/* Streamed headings: tokens arrive one at a time and flicker through candidate spellings in vermilion before they settle in ink, with the spur marking the token being decided. */
.st { position: relative; color: transparent; }
.st__ghost { position: absolute; inset: 0 0 auto 0; overflow: hidden; text-align: right; color: var(--verm-deep); white-space: pre; pointer-events: none; }
.st--done { color: inherit; box-shadow: inset 0 -0.06em 0 var(--rule); transition: box-shadow 0.6s ease; }
.st--done:nth-of-type(even) { box-shadow: inset 0 -0.06em 0 var(--verm); }
[data-streaming="settle"] .st--done { box-shadow: inset 0 -0.06em 0 transparent; }
.st--active::after { content: ""; position: absolute; left: 100%; bottom: 0.14em; width: 0.26em; height: 0.52em; margin-left: 0.05em; background: var(--verm); transform: skewX(-26.57deg); }

/* Token band: a strip of paper carrying the commit point motif, scrubbed by scroll. The strip takes the video's paper colour and the video fades out at both sides, so the frame has no visible edge. It stays at its own width, so it stays sharp. */
.band { display: flex; justify-content: center; overflow: hidden; }
.band--row { background: #DED7C0; }
.band__video {
  display: block;
  width: min(100%, 640px);
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 88px);
}
h2 {
  font-size: clamp(2.375rem, 1.5rem + 3.2vw, 4.25rem);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.intro { max-width: 60ch; color: var(--umber); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }

/* Status tags: the shape of the marker carries the state as well as the words. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
}
.status--live::before { background: var(--ink); }
.status--next::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.status--planned { border-style: dashed; }
.status--planned::before { box-shadow: inset 0 0 0 1.5px var(--ink); }

.fig-axis { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.fig-tick { stroke: var(--rule); stroke-width: 1; fill: none; }
.fig-ink { fill: var(--ink); }
.fig-accent { fill: var(--verm); }
.fig-ghost { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.fig-branch { stroke: var(--ink); stroke-width: 2; fill: none; }
.fig-hatch { stroke: var(--umber); stroke-width: 1.2; }
.fig-outline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fig-label { font-family: var(--mono); font-size: 8.5px; font-weight: 500; fill: var(--stone); letter-spacing: 0.01em; }

/* Runtime design */

.design {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.schematic .label { color: var(--stone); display: block; margin-bottom: 14px; }
.stack { display: grid; gap: 30px; }
.layer {
  position: relative;
  padding: 16px 18px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.layer + .layer::before {
  /* connector between layers */
  content: "";
  position: absolute;
  left: 50%;
  top: -31.5px;
  width: 2px;
  height: 30px;
  margin-left: -1px;
  background: var(--ink);
}
.layer--outside { border-style: dashed; background: transparent; }
.layer--core { background: var(--carbon); border-color: var(--carbon); color: var(--on-carbon); }
.layer--hw { background: transparent; border-width: 1.5px 1.5px 6px; }
.layer__name { font-weight: 600; font-size: 1.0625rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.layer__note { font-size: 0.9375rem; line-height: 1.45; color: var(--umber); margin-top: 4px; }
.credit { color: var(--stone); font-weight: 500; }
.layer--core .credit { color: var(--on-carbon-2); }
.modules { margin-top: 12px; display: grid; gap: 6px; }
.module {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--carbon-line);
  font-size: 0.9375rem;
}
.module a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  color: var(--on-carbon);
  text-decoration-color: var(--ember);
}
.module a:hover { color: var(--on-carbon); text-decoration-thickness: 2px; }
.module a:focus-visible { outline-color: var(--ember); }
/* State chips: the fill and border style carry the state as well as the word. */
.module__state { flex: none; padding: 3px 7px; border: 1px solid var(--on-carbon-2); color: var(--on-carbon); }
.module__state--done { background: var(--on-carbon); border-color: var(--on-carbon); color: var(--carbon); }
.module__state--started { border-color: var(--ember); color: var(--ember); }
.module__state--next { border-width: 1px 1px 1px 6px; }
.module__state--planned { border-style: dashed; color: var(--on-carbon-2); }

.parts { display: grid; }
.part { padding-block: 26px; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.part:first-child { border-top: 2px solid var(--ink); }
.part__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.part h3 { margin-bottom: 12px; }
.part__benefit { font-size: 1.125rem; line-height: 1.5; color: var(--ink); max-width: 58ch; }
.part__how { margin-top: 10px; color: var(--umber); max-width: 62ch; font-size: 1rem; }

/* Illustration: reused prefix, proposed tokens, verification and commit. */
.illus {
  margin-top: clamp(56px, 7vw, 96px);
  background: var(--carbon);
  color: var(--on-carbon);
  padding: clamp(20px, 3vw, 36px);
}
.illus__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.illus__title { font-weight: 600; font-size: 1.125rem; }

.tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px 8px;
  margin-block: clamp(24px, 3vw, 36px);
  min-height: 48px;
}
.tok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  font: 500 0.9375rem/1 var(--mono);
  white-space: pre;
  border: 1.5px solid transparent;
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.tok::after { font-size: 0.85em; }
.tok--reused { background: #2C2720; border-color: #4A4237; color: var(--on-carbon); }

/* Final state, shown as the static version and as the last step of the animation. */
.tok--prop { border-color: var(--ember); color: var(--on-carbon); }
.tok--prop::after { content: "\2713"; color: var(--ember); }
.tok--miss { border: 1.5px dotted var(--on-carbon-2); color: var(--on-carbon-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tok--miss::after { content: "\00D7"; color: var(--on-carbon-2); text-decoration: none; font-weight: 600; }
.tok--fix { background: var(--ember); border-color: var(--ember); color: var(--carbon); }
.tok--fix::after { content: "+"; font-weight: 600; }

.commit { width: 3px; margin-inline: 4px; background: var(--ember); transition: opacity 0.3s ease; }
.commit--a { opacity: 0; }

/* Animated steps. The script sets data-mode="play" and data-step from 0 to 3. */
[data-mode="play"] .commit--a { opacity: 1; }
[data-mode="play"] .commit--b { opacity: 0; }
[data-mode="play"] .tok--fix { opacity: 0; transform: translateX(-6px); }
[data-mode="play"][data-step="0"] .tok--prop { opacity: 0; transform: translateX(-6px); }
[data-mode="play"][data-step="1"] .tok--prop {
  border-style: dashed;
  border-color: var(--on-carbon-2);
  color: var(--on-carbon-2);
  text-decoration: none;
  transition-delay: calc(var(--i) * 140ms);
}
[data-mode="play"][data-step="1"] .tok--prop::after { content: none; }
[data-mode="play"][data-step="2"] .tok--prop { transition-delay: calc(var(--i) * 260ms); }
[data-mode="play"][data-step="3"] .commit--a { opacity: 0; }
[data-mode="play"][data-step="3"] .commit--b { opacity: 1; }
[data-mode="play"][data-step="3"] .tok--fix { opacity: 1; transform: none; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  counter-reset: none;
}
.steps li {
  position: relative;
  padding-top: 12px;
  border-top: 1px solid var(--carbon-line);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--on-carbon);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.steps b { font-weight: 600; }
.steps__n { color: var(--ember); margin-right: 8px; }
[data-mode="play"] .steps li { color: var(--on-carbon-2); }
[data-mode="play"] .steps li[data-active] { color: var(--on-carbon); border-top-color: var(--ember); }
.illus__note { margin-top: 18px; font-size: 0.875rem; color: var(--on-carbon-2); }

/* Measurement */

.notice {
  padding: 18px 20px;
  line-height: 1.7;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 980px;
}
.notice__label { background: var(--verm); color: var(--ink); padding: 3px 8px; margin-right: 10px; white-space: nowrap; }

.result { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--ink); color: var(--ivory); font-family: var(--mono); font-stretch: 87.5%; font-size: 0.875rem; }

.targets {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 96px);
}
.targets h3 { font-size: 1.625rem; letter-spacing: -0.02em; }
.targets__intro p { margin-top: 12px; color: var(--umber); }
.targets__list { border-top: 2px solid var(--ink); }
.targets__list li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--hair); }
.targets__list li::before {
  /* a dashed box: set, not yet met */
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 12px;
  height: 12px;
  outline: 1.5px dashed var(--ink);
  outline-offset: -1.5px;
}
.now {
  background: var(--carbon);
  color: var(--on-carbon);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 14px;
}
.now__stage { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 600; font-stretch: 88%; line-height: 1.05; letter-spacing: -0.025em; }
.now p:not([class]) { color: var(--on-carbon); }
.now__date { color: var(--on-carbon-2); padding-top: 12px; border-top: 1px solid var(--carbon-line); }

.docs {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px clamp(32px, 5vw, 72px);
  align-items: start;
}
.docs__title { font-size: 1.125rem; margin-bottom: 8px; }
.docs__intro p { color: var(--umber); font-size: 0.9375rem; max-width: 46ch; }
.docs__list { border-top: 2px solid var(--ink); }
.docs__list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  min-height: 56px;
  padding-block: 8px;
  border-bottom: 1px solid var(--rule);
}
.docs__name { font-weight: 600; }
.docs__state { color: var(--stone); }
.docs__list a { font-weight: 600; text-decoration-color: var(--verm); }

/* Footer */

.footer { background: var(--carbon); color: var(--on-carbon); padding-block: clamp(56px, 7vw, 88px); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 36px clamp(32px, 5vw, 72px);
  align-items: start;
}
.footer__brand svg { height: 34px; width: auto; color: var(--on-carbon); }
.footer__brand .spur { fill: var(--ember); }
.footer__brand p { margin-top: 18px; color: var(--on-carbon-2); max-width: 32ch; }
.footer__nav ul { display: grid; gap: 2px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-carbon); text-decoration: none; }
.footer__nav a:hover { color: var(--ember); text-decoration: underline; }
.footer__nav a:focus-visible { outline-color: var(--ember); }
.footer__legal { display: grid; gap: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--on-carbon-2); }

/* Tablet */

@media (max-width: 1024px) {
  .section__head { grid-template-columns: minmax(0, 1fr); }
  .design { grid-template-columns: minmax(0, 1fr); }
  .schematic { max-width: 560px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record, .targets, .status-grid, .docs { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__legal { grid-column: 1 / -1; }
}

/* Phone */

@media (max-width: 640px) {
  .masthead { padding-block: 14px 6px; }
  .brand svg { height: 26px; }
  .nav { width: 100%; }
  .nav ul { gap: 0; margin-inline: -8px; flex-wrap: nowrap; justify-content: space-between; }
  .nav a { padding-inline: 8px; font-size: 0.75rem; }
  .btn { --h: 50px; }
  .actions .btn { flex: 1 1 100%; justify-content: flex-start; }
  .rule::after { left: 50%; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .tok { font-size: 0.8125rem; padding: 9px 10px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tok, .commit, .steps li { transition: none; }
}

@media print {
  .masthead nav, .skip { display: none; }
  .section, .hero { padding-block: 32px; }
  .now, .illus, .footer, .layer--core { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Hero: the headline runs wide, the lede and actions sit beside it, and the decoding tape runs the full width beneath. */
.hero__top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.hero h1 { max-width: 12ch; }
.hero__side .lede { margin-top: 0; }
.illus--hero { margin-top: clamp(48px, 6vw, 88px); padding-inline: 0; }
.illus--hero .tokens { font-size: clamp(1rem, 0.85rem + 0.7vw, 1.375rem); }

/* Titles set their t in the tokspur letter, sized from the 0.51 em x-height of Instrument Sans (the drawn t is 1.24 x-heights tall plus a hair of overshoot) and seated on the baseline. */
.tt { display: inline-block; margin-inline: 0.01em -0.02em; }
.tt__glyph { display: inline-block; height: calc(0.51em * 1.265); width: auto; vertical-align: calc(-0.51em * 0.025); fill: currentColor; overflow: visible; transition: opacity 0.2s ease; }
.tt__spur { fill: var(--verm); }
.section--bone .tt__spur { fill: var(--verm); }
.tt--wait .tt__glyph { opacity: 0; }

/* The loop: one track with a stem at each stop, vermilion where tokspur does the heavy lifting, and a return path back to the start. */
.loop { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(56px, 7vw, 96px); padding-bottom: 34px; }
.loop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  border-top: 1px solid var(--ink);
  background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 8px) top left / 100% 5px no-repeat;
}
.loop::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 0;
  bottom: 0;
  height: 18px;
  border: 1.5px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
.loop__stop { position: relative; padding: 36px 28px 0 0; }
.loop__stop::before { content: ""; position: absolute; left: 0; top: -14px; width: 3px; height: 30px; background: var(--ink); }
.loop__stop--hot::before { background: var(--verm); }
.loop__stop h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 600; font-stretch: 88%; line-height: 1; letter-spacing: -0.03em; margin-bottom: 14px; }
.loop__stop--hot h3 { color: var(--verm-deep); }
.loop__stop p { color: var(--umber); max-width: 32ch; }

/* Memory: 128 GiB drawn to scale, with the engine's ceiling marked by a stem. */
.mem { max-width: 980px; }
.mem__bar { display: flex; height: 46px; border: 1.5px solid var(--ink); }
.mem__engine { flex: 96; background: var(--ink); position: relative; }
.mem__engine::after { content: ""; position: absolute; right: -2px; top: -10px; bottom: -10px; width: 3px; background: var(--verm); }
.mem__yours { flex: 32; background: repeating-linear-gradient(-63.43deg, var(--ink) 0 1px, transparent 1px 7px); }
.mem__scale { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mono); font-stretch: 87.5%; font-size: 0.8125rem; color: var(--stone); }
.mem__scale span:first-child { flex: 96; }
.mem__scale span:last-child { flex: 32; padding-left: 10px; }
.mem figcaption { margin-top: 14px; color: var(--umber); max-width: 70ch; }

/* Scoreboard: one ledger, one row per measure, the result at the end of each row. */
.ledger { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.ledger th, .ledger td { text-align: left; vertical-align: baseline; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--hair); }
.ledger thead th { font-family: var(--mono); font-stretch: 87.5%; font-size: 0.8125rem; font-weight: 500; color: var(--stone); padding-block: 12px; }
.ledger tbody th { width: 34%; font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); font-weight: 600; font-stretch: 88%; line-height: 1.05; letter-spacing: -0.02em; }
.ledger td { color: var(--umber); }
.ledger td:last-child, .ledger th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.record-note { margin-top: clamp(40px, 5vw, 64px); max-width: 72ch; color: var(--stone); font-size: 0.9375rem; }

/* Shipped: the stages sit on the tape as committed tokens, with the benchmarks still a proposal ahead of the commit stem. */
.now { max-width: 760px; }
.stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ink); }
.stage-tok { position: relative; padding: 30px 16px 0 0; }
.stage-tok::before { content: ""; position: absolute; left: 0; right: 8px; top: -12px; height: 22px; background: var(--ink); }
.stage-tok--next::before { background: transparent; outline: 1.5px dashed var(--ink); outline-offset: -1.5px; }
.stage-tok--next::after { content: ""; position: absolute; left: -10px; top: -22px; width: 3px; height: 42px; background: var(--verm); }
.stage-tok h3 { font-size: 1rem; line-height: 1.25; margin-bottom: 6px; }
.stage-tok p { color: var(--umber); font-size: 0.875rem; line-height: 1.45; }

@media (max-width: 1024px) {
  .hero__top { grid-template-columns: minmax(0, 1fr); }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .loop::after { display: none; }
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 44px; }
}

@media (max-width: 640px) {
  .loop { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .loop::before { right: auto; bottom: 0; width: 1px; height: auto; border-top: 0; border-left: 1px solid var(--ink); background: none; }
  .loop__stop { padding: 0 0 8px 30px; }
  .loop__stop::before { left: -1px; top: 10px; width: 22px; height: 3px; }
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; border-bottom: 1px solid var(--hair); padding-block: 16px; }
  .ledger th, .ledger td { border: 0; padding: 0; }
  .ledger tbody th { width: auto; }
  .ledger td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .ledger td:last-child { grid-column: 2; grid-row: 1; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}