/* Tokens — the whole plate world lives here. Light is the default; dark is redefined
   under the OS preference (unless the visitor pinned light) and under an explicit pin. */

:root {
  color-scheme: light dark;

  /* Plate roles */
  --ink: #0e1512;
  --ground: #dde4e0;
  --field: #0b453a;
  --datum: #142a4c;
  --signal: #f2a900;
  --annot: #c42d6b;

  /* Derived roles. Every one of these is contrast-tested in tools/check-contrast.mjs. */
  --ink-soft: #3c4a44; /* secondary type on --ground, tinted from the ground hue */
  --signal-ink: #8a6100; /* legend gold where it must read as a mark on --ground */
  --rail: #142a4c; /* the traverse rail on --ground */
  --focus: #c42d6b; /* focus ring on --ground */
  --focus-plate: #f2599b; /* focus ring on the --field and --datum plates */
  --annot-plate: #f2599b; /* annotation marks on the --field and --datum plates */
  --on-annot: #fdf3f7; /* label inside an --annot mark */
  --on-annot-plate: #0e1512; /* label inside an --annot-plate mark */
  --on-field: #d6ede1; /* type on the green field, tinted from it */
  --on-field-soft: #a9c6bd; /* secondary type on the green field */
  --on-datum: #dfe8f7;
  --on-datum-soft: #a9bbd6;
  --on-signal: #0e1512;
  --annot-ink: #9e1f55; /* annotation used as body-size type on --ground */
  --hairline: #0e1512;
  --hairline-alpha: 0.24;
  --field-hairline: #e9efea;
  --field-hairline-alpha: 0.28;
  --ground-raise: #e7ecea; /* raised paper inside the ground, e.g. cards */
  --selection-bg: #f2a900;
  --selection-ink: #0e1512;

  /* Type */
  --face-display: Archivo, "Liberation Sans Narrow", "Arial Narrow", system-ui, sans-serif;
  --face-mono: "Martian Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  --wdth-condensed: 72;
  --wdth-normal: 100;

  --step--2: clamp(0.66rem, 0.63rem + 0.14vw, 0.74rem);
  --step--1: clamp(0.81rem, 0.77rem + 0.18vw, 0.92rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.33rem, 1.26rem + 0.33vw, 1.55rem);
  --step-2: clamp(1.66rem, 1.54rem + 0.58vw, 2.05rem);
  --step-3: clamp(2.07rem, 1.86rem + 1.03vw, 2.75rem);
  --step-4: clamp(2.59rem, 2.21rem + 1.85vw, 3.8rem);
  --step-5: clamp(3.2rem, 2.4rem + 4vw, 6rem);

  --measure: 66ch;

  /* Space — 4px base, geometric */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.25rem;
  --space-3xl: 8rem;

  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --chrome-inset: clamp(1rem, 0.6rem + 1.4vw, 3rem); /* the outer plate margin: never over 48px */
  --measure-page: 84rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9efea;
    --ground: #0b120f;
    --field: #0b453a;
    --datum: #1b3a66;
    --signal: #ffc02e;
    --annot: #f2599b;

    --ink-soft: #9fb3aa;
    --signal-ink: #ffc02e;
    --rail: #5b82b5;
    --focus: #f2599b;
    --focus-plate: #f2599b;
    --annot-plate: #f2599b;
    --on-annot: #0e1512;
    --on-annot-plate: #0e1512;
    --on-field: #d6ede1;
    --on-field-soft: #a9c6bd;
    --on-datum: #dfe8f7;
    --on-datum-soft: #b6c8e2;
    --on-signal: #0e1512;
    --annot-ink: #f2599b;
    --hairline: #e9efea;
    --hairline-alpha: 0.26;
    --field-hairline: #e9efea;
    --field-hairline-alpha: 0.3;
    --ground-raise: #121b17;
    --selection-bg: #ffc02e;
    --selection-ink: #0e1512;
  }
}

:root[data-theme="dark"] {
  --ink: #e9efea;
  --ground: #0b120f;
  --field: #0b453a;
  --datum: #1b3a66;
  --signal: #ffc02e;
  --annot: #f2599b;

  --ink-soft: #9fb3aa;
  --signal-ink: #ffc02e;
  --rail: #5b82b5;
  --focus: #f2599b;
  --focus-plate: #f2599b;
  --annot-plate: #f2599b;
  --on-annot: #0e1512;
  --on-annot-plate: #0e1512;
  --on-field: #d6ede1;
  --on-field-soft: #a9c6bd;
  --on-datum: #dfe8f7;
  --on-datum-soft: #b6c8e2;
  --on-signal: #0e1512;
  --annot-ink: #f2599b;
  --hairline: #e9efea;
  --hairline-alpha: 0.26;
  --field-hairline: #e9efea;
  --field-hairline-alpha: 0.3;
  --ground-raise: #121b17;
  --selection-bg: #ffc02e;
  --selection-ink: #0e1512;
}

/* Base — faces, reset, landmarks, and the browser surfaces the plate also owns. */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  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";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-latin.woff2") format("woff2");
  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;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--signal) var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-display);
  font-variation-settings: "wdth" var(--wdth-normal);
  font-size: var(--step-0);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-ink);
}

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
}

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

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--focus);
  text-decoration-thickness: 2px;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

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

/* The mono voice carries measurement only: coordinates, years, chips, legend keys. */
.u-mono {
  font-family: var(--face-mono);
  font-size: var(--step--1);
  font-variation-settings: "wdth" 87.5;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.u-nowrap {
  white-space: nowrap;
}

.u-label {
  font-family: var(--face-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  z-index: 20;
  top: var(--space-2xs);
  left: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  background: var(--signal);
  color: var(--on-signal);
  font-family: var(--face-mono);
  font-size: var(--step--1);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .skip-link {
    transition: transform var(--dur-fast) var(--ease-out);
  }
}

/* Plates — the survey system: chrome, contour field, traverse rail, section plates. */

/* ── Page frame ─────────────────────────────────────────────────────────── */

.plate {
  position: relative;
  padding-block: var(--space-2xl);
  padding-inline: var(--chrome-inset);
  background: var(--ground);
  color: var(--ink);
}

.plate__inner {
  max-width: var(--measure-page);
  margin-inline: auto;
}

.plate--field {
  background: var(--field);
  color: var(--on-field);
  --ink: var(--on-field);
  --ink-soft: var(--on-field-soft);
  --hairline: var(--field-hairline);
  --hairline-alpha: var(--field-hairline-alpha);
  --focus: var(--focus-plate);
  --annot: var(--annot-plate);
  --on-annot: var(--on-annot-plate);
  --signal-ink: var(--signal);
  --rail: var(--on-field-soft);
}

.plate--datum {
  background: var(--datum);
  color: var(--on-datum);
  --ink: var(--on-datum);
  --ink-soft: var(--on-datum-soft);
  --hairline: var(--on-datum);
  --hairline-alpha: 0.28;
  --focus: var(--focus-plate);
  --annot: var(--annot-plate);
  --on-annot: var(--on-annot-plate);
  --signal-ink: var(--signal);
  --rail: var(--on-datum-soft);
}

.plate__head {
  display: grid;
  gap: var(--space-xs);
  padding-block-end: var(--space-m);
  margin-block-end: var(--space-xl);
  border-block-end: 1px solid
    color-mix(in oklab, var(--hairline) calc(var(--hairline-alpha) * 100%), transparent);
}

.plate__num {
  color: var(--ink-soft);
}

.plate__title {
  font-size: var(--step-3);
  font-variation-settings: "wdth" 84;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.plate__lead {
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: var(--step-0);
}

/* ── Chrome: language + theme ───────────────────────────────────────────── */

.chrome {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  align-items: center;
  justify-content: space-between;
}

.chrome__mark {
  color: var(--ink-soft);
}

.chrome__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  align-items: center;
  margin-inline-start: auto;
}

.chrome__set {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.chrome__legend {
  color: var(--ink-soft);
  margin-inline-end: var(--space-3xs);
}

@media (max-width: 47.99rem) {
  .chrome__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .switch__item {
    padding-inline: var(--space-2xs);
  }
}

.switch {
  display: flex;
  border: 1px solid color-mix(in oklab, var(--hairline) 46%, transparent);
}

.switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--space-xs);
  font-family: var(--face-mono);
  font-size: var(--step--2);
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}

.switch__item + .switch__item {
  border-inline-start: 1px solid color-mix(in oklab, var(--hairline) 46%, transparent);
}

.switch__item:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--annot) 16%, transparent);
}

.switch__item[aria-current="true"],
.switch__item[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow: inset 0 -3px 0 var(--ink);
}

/* ── PL.01 Hero ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  gap: var(--space-l);
  min-height: 100svh;
  padding-block: var(--space-s) var(--space-l);
  align-content: stretch;
  overflow: clip;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-m);
  align-content: stretch;
  max-width: var(--measure-page);
  width: 100%;
  margin-inline: auto;
  min-height: 0;
}

/* Coordinate ticks along the top and left edges of the plate. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    var(--tick-direction, to right),
    color-mix(in oklab, var(--field-hairline) 55%, transparent) 0 1px,
    transparent 1px var(--tick-step, 2.5rem)
  );
}

.hero::before {
  inset-block-start: 0;
  inset-inline: 0;
  height: 0.5rem;
}

.hero::after {
  --tick-direction: to bottom;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0.5rem;
}

.hero__contour {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: var(--on-field);
  opacity: 0.22;
  /* The field is drawn everywhere and fades out under the type, so the drawing
     survives at full strength in the open part of the plate. */
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.35) 0%,
    rgb(0 0 0 / 0.2) 42%,
    rgb(0 0 0 / 1) 78%
  );
}

@media (min-width: 60rem) {
  /* Coordinate ticks along the top and left edges of the plate. */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      var(--tick-direction, to right),
      color-mix(in oklab, var(--field-hairline) 55%, transparent) 0 1px,
      transparent 1px var(--tick-step, 2.5rem)
    );
  }

  .hero::before {
    inset-block-start: 0;
    inset-inline: 0;
    height: 0.5rem;
  }

  .hero::after {
    --tick-direction: to bottom;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0.5rem;
  }

  .hero__contour {
    opacity: 0.42;
    mask-image: linear-gradient(
      to right,
      rgb(0 0 0 / 0.1) 0%,
      rgb(0 0 0 / 0.25) 34%,
      rgb(0 0 0 / 1) 62%
    );
  }
}

.hero__contour svg {
  width: 100%;
  height: 100%;
}

.contour__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

.contour__line--major {
  stroke-width: 1.6;
}

/* The scrubbed year, lit across the whole plate: a survey band, not a tooltip. */
.hero__band {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: calc(100% / var(--span, 30));
  opacity: 0;
  translate: calc(var(--year-index, 0) * 100%) 0;
  background: color-mix(in oklab, var(--annot-plate) 30%, transparent);
  border-inline: 1px solid var(--annot-plate);
  pointer-events: none;
}

.hero__band[data-active="true"] {
  opacity: 1;
}

.hero__body {
  display: grid;
  gap: var(--space-l) var(--space-2xl);
  align-content: center;
  grid-column: 1 / -1;
}

@media (min-width: 60rem) {
  .hero__body {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
  }
}

.hero__lede {
  display: grid;
  gap: var(--space-m);
  align-content: end;
}

/* Marginalia: the measured results a survey sheet prints beside the drawing. */
.hero__marginalia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  align-items: baseline;
  margin: 0;
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid color-mix(in oklab, var(--field-hairline) 34%, transparent);
}

.hero__marginalia-head {
  display: none;
}

@media (min-width: 60rem) {
  .hero__marginalia {
    display: grid;
    gap: var(--space-s);
    align-content: end;
    padding-block-start: var(--space-s);
  }

  .hero__marginalia-head {
    display: block;
  }

  .hero__fact {
    display: grid;
  }
}

.hero__marginalia-head dt {
  color: var(--on-field-soft);
}

.hero__marginalia dd {
  margin: 0;
}

.hero__fact {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.hero__fact dt {
  color: var(--on-field-soft);
  font-family: var(--face-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__fact dd {
  margin: 0;
  white-space: nowrap;
  color: var(--signal);
  font-family: var(--face-mono);
  font-size: var(--step-0);
  font-variation-settings: "wdth" 87.5;
  font-variant-numeric: tabular-nums;
}

.hero__name {
  font-size: var(--step-5);
  font-variation-settings: "wdth" 66;
  word-spacing: 0.1em;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-transform: uppercase;
  margin-block-end: var(--space-3xs);
}

.hero__role {
  display: block;
  color: var(--on-field);
  font-family: var(--face-mono);
  font-size: var(--step--1);
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__summary {
  max-width: 54ch;
  color: var(--on-field-soft);
}

.hero__foot {
  display: grid;
  gap: var(--space-m);
  align-items: end;
}

@media (min-width: 60rem) {
  .hero__foot {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 47.99rem) {
  .hero {
    padding-block: var(--space-2xs) var(--space-m);
  }

  .hero__inner {
    gap: var(--space-s);
  }

  .hero__name {
    font-size: clamp(2.7rem, 2.2rem + 3.4vw, 3.4rem);
  }

  .hero__foot {
    gap: var(--space-s);
  }

  /* On a phone the action comes before the datum strip, so it lands on the first screen. */
  .hero__foot .actions {
    order: -1;
  }
}

.datum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: center;
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid color-mix(in oklab, var(--field-hairline) 28%, transparent);
  color: var(--on-field-soft);
}

.datum__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.datum__item + .datum__item::before {
  content: "";
  width: 4px;
  height: 4px;
  background: currentColor;
  transform: rotate(45deg);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-m);
  background: var(--signal);
  color: var(--on-signal);
  font-family: var(--face-mono);
  font-size: var(--step--1);
  font-weight: 700;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--signal);
}

.button:hover {
  background: var(--annot);
  border-color: var(--annot);
  color: var(--on-annot);
}

.link-mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--face-mono);
  font-size: var(--step--1);
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-underline-offset: 0.3em;
}

/* The vertical axis of the plate: the seniority bands the contour climbs. */
.hero__bands {
  display: flex;
  gap: var(--space-s);
  color: var(--on-field-soft);
}

.hero__bands li {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.hero__bands li::before {
  content: "";
  width: 1rem;
  height: 1px;
  background: currentColor;
}

@media (min-width: 60rem) {
  .hero__bands {
    position: absolute;
    inset-block: 22% 34%;
    inset-inline-start: calc(var(--chrome-inset) * -0.9);
    z-index: 2;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .hero__bands li {
    flex-direction: column;
    writing-mode: vertical-rl;
    rotate: 180deg;
  }

  .hero__bands li::before {
    width: 1px;
    height: 1.25rem;
  }
}

/* ── Traverse scrub (the signature interaction) ─────────────────────────── */

.scrub__status {
  min-height: 1.4em;
  margin: 0;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.scrub {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-2xs);
}

.scrub__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-m);
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--space-2xs);
  color: var(--on-field-soft);
}

.scrub__track {
  display: flex;
  align-items: flex-start;
  border-block-start: 1px solid color-mix(in oklab, var(--field-hairline) 40%, transparent);
}

.scrub__tick {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-3xs);
  color: var(--on-field-soft);
  font-family: var(--face-mono);
  font-size: var(--step--2);
  font-variation-settings: "wdth" 75;
  font-variant-numeric: tabular-nums;
}

/* Tick height reads the year's station count. The count arrives as a data
   attribute rather than an inline custom property, because a `style-src 'self'`
   policy refuses inline style attributes and every tick would collapse. */
.scrub__tick::before {
  content: "";
  width: 1px;
  height: 0.4rem;
  background: currentColor;
  opacity: 0.35;
}

.scrub__tick[data-load="1"]::before {
  height: 0.7rem;
  opacity: 0.55;
}

.scrub__tick[data-load="2"]::before {
  height: 0.95rem;
  opacity: 0.7;
}

.scrub__tick[data-load="3"]::before {
  height: 1.2rem;
  opacity: 0.85;
}

.scrub__tick[data-load="4"]::before,
.scrub__tick[data-load="5"]::before,
.scrub__tick[data-load="6"]::before,
.scrub__tick[data-load="7"]::before,
.scrub__tick[data-load="8"]::before {
  height: 1.45rem;
  opacity: 1;
}

.scrub__tick[data-major="true"]::before {
  width: 2px;
}

.scrub__tick span {
  opacity: 0;
}

.scrub__tick[data-major="true"] span {
  opacity: 1;
}

.scrub__tick:hover,
.scrub__tick:focus-visible {
  color: var(--signal);
}

.scrub__tick[aria-pressed="true"] {
  color: var(--signal);
  font-weight: 700;
}

.scrub__tick[aria-pressed="true"] span {
  opacity: 1;
}

.scrub__tick[aria-pressed="true"]::before {
  height: 1.75rem;
  width: 2px;
  opacity: 1;
  background: var(--signal);
}

@media (max-width: 47.99rem) {
  .scrub__tick:not([data-major="true"]) {
    display: none;
  }
}

/* ── PL.02 Legend ───────────────────────────────────────────────────────── */

.legend {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 60rem) {
  .legend {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

.legend__key {
  display: grid;
  gap: var(--space-xs);
  padding-block-start: var(--space-s);
  border-block-start: 2px solid var(--signal-ink);
}

.legend__title {
  font-size: var(--step-1);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.01em;
}

.legend__evidence {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* ── PL.03 Traverse ─────────────────────────────────────────────────────── */

.traverse {
  display: grid;
  gap: 0;
}

.station {
  position: relative;
  display: grid;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-m);
  padding-inline-start: var(--space-l);
  border-block-start: 1px solid
    color-mix(in oklab, var(--hairline) calc(var(--hairline-alpha) * 100%), transparent);
}

.station:last-child {
  border-block-end: 1px solid
    color-mix(in oklab, var(--hairline) calc(var(--hairline-alpha) * 100%), transparent);
}

@media (min-width: 60rem) {
  .station {
    grid-template-columns: 14rem 1fr;
  }
}

/* The rail runs through every station; the dot is the station mark. */
.station::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.5rem;
  width: 1px;
  background: var(--rail);
}

.station::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--space-m) + 0.45em);
  inset-inline-start: 0.5rem;
  width: 9px;
  height: 9px;
  translate: -4px 0;
  background: var(--ground);
  border: 2px solid var(--rail);
  border-radius: 50%;
}

.station[data-current="true"]::after {
  background: var(--signal-ink);
  border-color: var(--signal-ink);
  width: 13px;
  height: 13px;
  translate: -6px 0;
}

.station[data-marked="true"]::after {
  background: var(--annot);
  border-color: var(--annot);
  width: 13px;
  height: 13px;
  translate: -6px 0;
}

.station__meta {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  color: var(--ink-soft);
}

.station__dates {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.station__band {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--ink-soft);
}

.station__band::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}

.station__now,
.station__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  width: fit-content;
  padding: 2px var(--space-2xs);
  font-family: var(--face-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.station__now {
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 700;
}

.station__mark {
  background: var(--annot);
  color: var(--on-annot);
  font-weight: 700;
}

.station__body {
  display: grid;
  gap: var(--space-2xs);
}

.station__org {
  font-size: var(--step-1);
  font-variation-settings: "wdth" 88;
}

.station__role {
  color: var(--annot-ink);
  font-family: var(--face-mono);
  font-size: var(--step--1);
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.04em;
}

.plate--field .station__role,
.plate--datum .station__role {
  color: var(--signal);
}

.station__scope {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  margin-block-start: var(--space-3xs);
}

.chip {
  padding: 3px var(--space-2xs);
  border: 1px solid color-mix(in oklab, var(--hairline) 38%, transparent);
  color: var(--ink-soft);
  font-family: var(--face-mono);
  font-size: var(--step--2);
  font-variation-settings: "wdth" 75;
  letter-spacing: 0.02em;
}

.traverse__more {
  display: flex;
  justify-content: flex-start;
  margin-block-start: var(--space-m);
}

.button--ghost {
  background: none;
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--hairline) 55%, transparent);
}

.button--ghost:hover {
  background: var(--annot);
  border-color: var(--annot);
  color: var(--on-annot);
}

.button__count {
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.04em;
}

/* ── PL.04 Plates (portfolio) ───────────────────────────────────────────── */

.works {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
}

.work {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding: var(--space-m);
  border: 1px solid color-mix(in oklab, var(--hairline) 45%, transparent);
}

.work__body,
.work__key {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.work__key {
  gap: var(--space-m);
}

/* One plate on the page is the v1 case: it takes the full width and sets its
   legend key beside the body rather than leaving half the plate empty. */
@media (min-width: 60rem) {
  .work:only-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    column-gap: var(--space-xl);
    padding: var(--space-l);
  }

  .work:only-child .work__head {
    grid-column: 1 / -1;
  }

  .work:only-child .work__key {
    padding-inline-start: var(--space-m);
    border-inline-start: 1px solid color-mix(in oklab, var(--hairline) 30%, transparent);
  }
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink-soft);
}

.work__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.work__status::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--signal-ink);
  transform: rotate(45deg);
}

.work__title {
  font-size: var(--step-2);
  font-variation-settings: "wdth" 84;
  text-transform: uppercase;
}

.work__summary {
  max-width: var(--measure);
}

.work__mechanism {
  max-width: var(--measure);
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--signal-ink);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.work__link {
  justify-self: start;
}

.work__image {
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in oklab, var(--hairline) 45%, transparent);
}

/* ── PL.05 Instruments ──────────────────────────────────────────────────── */

.instruments {
  columns: 1;
  column-gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .instruments {
    columns: 2;
  }
}

@media (min-width: 75rem) {
  .instruments {
    columns: 3;
  }
}

.instrument {
  break-inside: avoid;
  margin-block-end: var(--space-l);
}

.instruments__key {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-s);
  color: var(--ink-soft);
}

.chip[data-in-use="true"],
.instruments__key::before {
  border-color: var(--signal-ink);
  box-shadow: inset 2px 0 0 var(--signal-ink);
}

.instruments__key::before {
  content: "";
  width: 1.5rem;
  height: 1rem;
  border: 1px solid var(--signal-ink);
}

.instrument__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-s);
  border-block-end: 1px solid
    color-mix(in oklab, var(--hairline) calc(var(--hairline-alpha) * 100%), transparent);
  color: var(--ink);
}

.instrument__title::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--rail);
}

.instrument:nth-child(2n) .instrument__title::before {
  background: var(--annot);
}

.instrument:nth-child(3n) .instrument__title::before {
  background: var(--signal-ink);
}

/* ── PL.06 Field notes ──────────────────────────────────────────────────── */

.notes {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .notes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.note__title {
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-s);
  border-block-end: 1px solid
    color-mix(in oklab, var(--hairline) calc(var(--hairline-alpha) * 100%), transparent);
  color: var(--ink-soft);
}

.note__list {
  display: grid;
  gap: var(--space-s);
}

.note__item {
  display: grid;
  gap: 2px;
}

.note__detail {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ── PL.07 Contact ──────────────────────────────────────────────────────── */

.contact {
  display: grid;
  gap: var(--space-l);
}

.contact__email {
  font-size: clamp(1.6rem, 0.9rem + 3.6vw, 4.2rem);
  font-variation-settings: "wdth" 72;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--signal);
  word-break: break-word;
  justify-self: start;
  border-block-end: 2px solid color-mix(in oklab, var(--signal) 50%, transparent);
}

.contact__email:hover {
  color: var(--annot);
  border-block-end-color: var(--annot);
}

.contact__rows {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 48rem) {
  .contact__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.contact__row {
  display: grid;
  gap: var(--space-3xs);
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid color-mix(in oklab, var(--field-hairline) 30%, transparent);
}

.contact__label {
  color: var(--on-field-soft);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  padding-block: var(--space-l);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  justify-content: space-between;
  max-width: var(--measure-page);
  margin-inline: auto;
  color: var(--on-field-soft);
}

/* ── Root bounce + 404 ──────────────────────────────────────────────────── */

.bounce {
  display: grid;
  gap: var(--space-l);
  place-content: center;
  min-height: 100svh;
  padding: var(--gutter);
  text-align: start;
}

.bounce__name {
  font-size: var(--step-4);
  font-variation-settings: "wdth" 70;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.bounce__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Every isoline carries pathLength="100", so one rule draws them all and no
     path needs an inline style a `style-src 'self'` policy would block. */
  .contour__line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 1200ms var(--ease-out) forwards;
  }

  .contour__line[data-level="1"] {
    animation-delay: 90ms;
  }

  .contour__line[data-level="2"] {
    animation-delay: 180ms;
  }

  .contour__line[data-level="3"] {
    animation-delay: 270ms;
  }

  .contour__line[data-level="4"] {
    animation-delay: 360ms;
  }

  .contour__line[data-level="5"] {
    animation-delay: 450ms;
  }

  .contour__line[data-level="6"] {
    animation-delay: 540ms;
  }

  .hero__band {
    transition:
      opacity var(--dur-fast) var(--ease-out),
      translate var(--dur-mid) var(--ease-out);
  }

  .station::after,
  .station__mark,
  .scrub__tick,
  .button,
  .switch__item,
  .contact__email {
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      width var(--dur-fast) var(--ease-out),
      height var(--dur-fast) var(--ease-out);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}


/* Generated by build/build.mjs from content/profile.json. */
:root {
  --span: 30;
}