/* ==========================================================================
   SAI ABHIPSA DASH — operator's record
   Instrument panel. Sibling to offsage.com: same near-black ground, same
   JetBrains Mono, same acid accent. Different frame — this one sells the
   person who decides what the machine builds.

   Rules held throughout: radius 0, no shadow, no glow, no gradient wash.
   Corner ticks instead of rounded cards. One accent, rationed to ~8% of a screen.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  --void: #08080a;
  --panel: #111116;
  --panel-2: #17171d;
  --panel-3: #1e1e26;
  --edge-3: #26262f;
  --edge-2: #33333e;

  --text: #efede6;
  --mute: #a3a199;
  --mute-2: #8a8880;

  --acid: #c9f24d;
  --acid-dim: #a9d92f;

  /* every secondary tone is derived from the two inks, never invented */
  --line: rgb(239 237 230 / 0.11);
  --line-2: rgb(239 237 230 / 0.2);
  --line-3: rgb(239 237 230 / 0.06);
  --grid: rgb(239 237 230 / 0.045);

  --on-acid: #08080a;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(0.6875rem, 0.66rem + 0.13vw, 0.75rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.66vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
  --step-hero: clamp(2.75rem, 0.9rem + 9.6vw, 8.5rem);

  --pad: clamp(1.125rem, 0.5rem + 2.6vw, 3.5rem);
  --rule: 1px solid var(--line);
  --rule-2: 1px solid var(--line-2);
  --measure: 60ch;
  --snap: cubic-bezier(0.2, 0.9, 0.25, 1);
  --wipe: cubic-bezier(0.33, 1, 0.68, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  background: var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
svg { fill: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
b, strong { font-weight: 600; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

::selection { background: var(--acid); color: var(--on-acid); }

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

/* --- typographic roles ---------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--acid); }

.label {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-2);
  font-variant-numeric: tabular-nums;
}

.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--mute);
  max-width: 44ch;
}

.prose { max-width: var(--measure); color: var(--mute); }
.prose p + p { margin-top: 1.4em; }
.prose em { font-style: normal; color: var(--text); }
.prose b { color: var(--text); }

/* --- the panel: a visible grid, never a decorative one -------------------- */
.sheet {
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* corner ticks: the panel's registration marks, drawn instead of rounded boxes */
.ticked { position: relative; }
.ticked::before,
.ticked::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  pointer-events: none;
}
.ticked::before { top: -1px; left: -1px; border-top: 1px solid var(--acid); border-left: 1px solid var(--acid); }
.ticked::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--acid); border-right: 1px solid var(--acid); }

/* --- masthead ------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgb(8 8 10 / 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: var(--rule);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.8rem;
}
.masthead__mark {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__mark .dot {
  width: 6px; height: 6px; background: var(--acid); flex: none;
}
.masthead__nav { display: flex; gap: clamp(0.9rem, 2.2vw, 2rem); }

.navlink {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mute-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--snap), border-color 0.18s var(--snap);
}
.navlink:hover { color: var(--text); border-color: var(--line-2); }
.navlink[aria-current="page"] { color: var(--acid); border-color: var(--acid); }

@media (max-width: 36rem) {
  .masthead__in { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-block: 0.65rem; }
  .masthead__nav { justify-content: space-between; }
  .navlink { font-size: 0.625rem; letter-spacing: 0.04em; }
}

/* --- controls: proofing grammar, now in the dark ------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 2.875rem; padding: 0.6rem 1.2rem;
  border: 1px solid var(--edge-2); border-radius: 0;
  background: transparent; color: var(--text);
  font-family: var(--font-data);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.09s linear, color 0.09s linear,
              border-color 0.18s var(--snap), transform 0.22s var(--snap);
}
.btn:hover { border-color: var(--acid); color: var(--acid); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--acid); border-color: var(--acid); color: var(--on-acid); }
.btn--primary:hover { background: var(--acid-dim); border-color: var(--acid-dim); color: var(--on-acid); }
.btn__arrow { transition: transform 0.22s var(--snap); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

.wipe {
  text-decoration: none;
  background-image: linear-gradient(var(--acid), var(--acid));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.26s var(--wipe), color 0.18s var(--snap);
}
.wipe:hover { color: var(--acid); background-size: 0 1px; background-position: 100% 100%; }

.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-family: var(--font-data);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--acid);
}
.arrow-link span:first-child {
  background-image: linear-gradient(var(--acid), var(--acid));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.26s var(--wipe);
}
.arrow-link:hover span:first-child { background-size: 0 1px; background-position: 100% 100%; }
.arrow-link__arrow { transition: transform 0.22s var(--snap); }
.arrow-link:hover .arrow-link__arrow { transform: translate(3px, -3px); }

/* --- section scaffolding -------------------------------------------------- */
.section { position: relative; padding-block: clamp(3.5rem, 2.2rem + 5vw, 7.5rem); border-top: var(--rule); }
.section__head {
  display: grid; gap: clamp(0.85rem, 1.6vw, 2rem);
  margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}
@media (min-width: 62rem) {
  .section__head { grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr); }
}
.section__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.section__title em { font-style: normal; color: var(--acid); }

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(2.5rem, 5.5vw, 5rem); }
  .split--a { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.split__a > * + * { margin-top: 1.1rem; }
.split__a .prose + .prose { margin-top: 0; }

.page-head { border-top: 0; padding-block: clamp(2rem, 1.4rem + 2.6vw, 4rem) clamp(2.5rem, 2rem + 2.6vw, 4.5rem); }
.page-head__in { display: grid; gap: clamp(0.8rem, 1.5vw, 1.5rem); max-width: 56rem; margin-bottom: clamp(2rem, 3.5vw, 3.5rem); }
.page-head__title { font-size: clamp(1.9rem, 0.85rem + 3.4vw, 3.6rem); line-height: 1.06; letter-spacing: -0.032em; max-width: 22ch; }
.page-head__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62rem) {
  .page-head__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .page-head__aside { align-self: end; }
}
.minor-head {
  font-family: var(--font-data); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-2);
  margin-bottom: 1rem;
}

/* --- records: the site's workhorse. every fact is a row ------------------- */
.record { width: 100%; border-collapse: collapse; text-align: left; }
.record th, .record td { padding: 0.72rem 1rem 0.72rem 0; border-bottom: var(--rule); vertical-align: baseline; }
.record thead th {
  font-family: var(--font-data); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-2);
  border-bottom-color: var(--line-2);
}
.record tbody th { font-weight: 500; color: var(--text); }
.record td { font-family: var(--font-data); font-size: 0.8125rem; color: var(--mute); }
.record td:first-child { white-space: nowrap; color: var(--mute-2); width: 1%; padding-right: 2rem; }
.record tr:last-child th, .record tr:last-child td { border-bottom: 0; }

/* --- HERO ----------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem) clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero__eyebrow {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: space-between;
  padding: 0.7rem clamp(0.75rem, 2vw, 1.25rem);
  border-bottom: var(--rule);
  font-family: var(--font-data); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-2);
}
.hero__thesis {
  grid-column: 1 / -1;
  display: grid; gap: clamp(1.25rem, 3vw, 3rem);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 8.333% 100%, 100% 50%;
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem) clamp(0.75rem, 2vw, 1.25rem);
}
@media (min-width: 62rem) {
  .hero__thesis { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
}
.hero__name {
  font-size: var(--step-hero);
  line-height: 0.84;
  letter-spacing: -0.045em;
  max-width: 15ch;
}
.hero__name .ln { display: block; }
.hero__claim {
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--mute);
  max-width: 40ch;
  padding-bottom: 0.4rem;
}
.hero__claim em { font-style: normal; color: var(--acid); }
.hero__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.25rem);
  border-top: var(--rule);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.hero__readout {
  display: flex; flex-wrap: wrap; gap: 0.4rem clamp(1.25rem, 3vw, 2.75rem);
  font-family: var(--font-data); font-size: var(--step--1);
  letter-spacing: 0.06em; color: var(--mute-2);
}
.hero__readout b { color: var(--acid); font-weight: 500; }

/* --- THE MACHINE: block diagram, the signature moment -------------------- */
.machine { position: relative; border-top: var(--rule); border-bottom: var(--rule); }
.machine__stage { position: relative; aspect-ratio: 1200 / 380; width: 100%; }
.machine__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.machine__wires path, .machine__wires line { transition: stroke 0.26s var(--snap), stroke-width 0.26s var(--snap); }

.operator {
  position: absolute; left: 1.67%; top: 36.84%; width: 19.2%; height: 26.3%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(0.6rem, 1.4vw, 1rem);
  background: var(--panel); border: 1px solid var(--edge-3);
}
.operator__k { font-family: var(--font-data); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-2); }
.operator__v { margin-top: 0.35rem; font-weight: 600; letter-spacing: -0.015em; font-size: var(--step-1); }
.operator__n { margin-top: 0.5rem; font-family: var(--font-data); font-size: var(--step--1); color: var(--acid); }

.ports {
  position: absolute; left: 27.5%; right: 6.67%; top: 5.26%; bottom: 5.26%;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 5.9% 5%;
}
.port {
  position: relative; display: block; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(0.5rem, 1.1vw, 0.9rem);
  background: var(--panel); border: 1px solid var(--edge-3);
  text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: background-color 0.22s var(--snap), border-color 0.22s var(--snap),
              transform 0.24s var(--snap);
}
.port:hover, .port.is-on { background: var(--panel-2); border-color: var(--acid); transform: translate(-2px, -2px); }
.port__n {
  font-family: var(--font-data); font-size: var(--step--1);
  letter-spacing: 0.1em; color: var(--mute-2);
  transition: color 0.22s var(--snap);
}
.port:hover .port__n, .port.is-on .port__n { color: var(--acid); }
.port__t { margin-top: 0.25rem; font-weight: 600; font-size: var(--step-0); letter-spacing: -0.014em; line-height: 1.2; }

.machine__readout {
  display: grid; gap: 1rem clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.25rem);
  border-top: var(--rule);
}
@media (min-width: 52rem) { .machine__readout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.machine__k { font-family: var(--font-data); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-2); }
.machine__v { margin-top: 0.5rem; font-size: var(--step-1); line-height: 1.5; color: var(--mute); max-width: 62ch; }
.machine__v b { color: var(--text); }

@media (max-width: 47.99rem) {
  .machine__stage { aspect-ratio: auto; display: block; padding: 0; }
  .machine__wires { display: none; }
  .operator { position: static; width: 100%; height: auto; margin: 0 0 1px; }
  .ports { position: static; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1px; background: var(--line); }
  .port { border: 0; padding: 0.9rem 1rem; }
  .port:hover, .port.is-on { transform: none; }
}

/* --- numbers that behave like readings ------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-2); }
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: clamp(1rem, 2vw, 1.5rem) clamp(0.5rem, 1.4vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem) 0; border-bottom: var(--rule); }
@media (min-width: 52rem) {
  .stat { border-right: var(--rule); padding-right: clamp(1rem, 2vw, 2rem); }
  .stat:last-child { border-right: 0; }
  .stat:not(:nth-child(4n + 1)) { padding-left: clamp(1rem, 2vw, 2rem); }
}
.stat__n {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 700; font-size: var(--step-4);
  line-height: 0.95; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}
.stat__n sup { font-size: 0.34em; vertical-align: baseline; position: relative; bottom: 0.5em; left: 0.12em; color: var(--mute-2); letter-spacing: 0; }
.stat__k { margin-top: 0.55rem; font-family: var(--font-data); font-size: var(--step--1); letter-spacing: 0.1em; line-height: 1.55; color: var(--mute-2); text-transform: uppercase; }

/* --- engagement ladder: numbers as a measured range ----------------------- */
.ladder { display: grid; gap: 0; border-top: var(--rule-2); }
.rung {
  display: grid; gap: 0.3rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(0.85rem, 1.8vw, 1.2rem);
  border-bottom: var(--rule);
}
@media (min-width: 52rem) {
  .rung { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(8rem, 10rem); align-items: center; }
}
.rung__k { font-weight: 500; font-size: var(--step-1); letter-spacing: -0.014em; }
.rung__k span { display: block; font-family: var(--font-data); font-size: var(--step--1); color: var(--mute-2); letter-spacing: 0.08em; margin-top: 0.15rem; }
.rung__track { position: relative; height: 26px; }
.rung__track::before { content: ""; position: absolute; inset-block: 0; inset-inline: 0; border-bottom: 1px solid var(--line); }
.rung__fill {
  position: absolute; inset-block: 1px; inset-inline-start: 0; width: 0;
  background: repeating-linear-gradient(90deg, var(--mute-2) 0 2px, transparent 2px 6px);
  border-right: 1px solid var(--mute-2);
  transition: width 0.7s var(--wipe);
}
.rung--hi .rung__fill { background: repeating-linear-gradient(90deg, var(--acid) 0 2px, transparent 2px 6px); border-right-color: var(--acid); }
.rung--hi .rung__price { color: var(--acid); }
.rung__price { font-family: var(--font-data); font-size: var(--step-0); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* --- entries: a published list of things ---------------------------------- */
.entries { border-top: var(--rule-2); container-type: inline-size; }
.entry {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding-block: clamp(0.95rem, 1.8vw, 1.35rem);
  border-bottom: var(--rule);
  text-decoration: none;
  transition: background-color 0.2s var(--snap), padding-left 0.24s var(--snap);
}
.entry__no { grid-column: 1; grid-row: 1; }
.entry__title { grid-column: 2; grid-row: 1; }
.entry__meta { grid-column: 2; grid-row: 2; }
.entry__go { display: none; grid-column: 4; grid-row: 1; }
@container (min-width: 38rem) {
  .entry { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 12rem) 1.5rem; align-items: baseline; }
  .entry:hover { padding-left: 0.85rem; background: rgb(239 237 230 / 0.03); }
  .entry__meta { grid-column: 3; grid-row: 1; }
  .entry__go { display: block; color: var(--acid); opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.2s var(--snap), transform 0.24s var(--snap); }
  .entry:hover .entry__go { opacity: 1; transform: none; }
}
.entry__no { font-family: var(--font-data); font-size: var(--step--1); color: var(--mute-2); }
.entry__title { font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -0.014em; }
.entry__meta { font-family: var(--font-data); font-size: var(--step--1); color: var(--mute-2); line-height: 1.5; }

/* --- timeline ------------------------------------------------------------- */
.timeline { border-top: var(--rule-2); container-type: inline-size; }
.tl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.15rem 1.25rem; padding-block: clamp(1rem, 1.8vw, 1.35rem); border-bottom: var(--rule); }
.tl__yr { grid-column: 1; grid-row: 1; }
.tl__role { grid-column: 2; grid-row: 1; }
.tl__note { grid-column: 2; grid-row: 2; }
@container (min-width: 42rem) {
  .tl { grid-template-columns: 7.5rem minmax(0, 1fr) 12.5rem; align-items: baseline; }
  .tl__note { grid-column: 3; grid-row: 1; }
}
.tl__yr { font-family: var(--font-data); font-size: var(--step--1); color: var(--acid); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tl__role { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.014em; line-height: 1.3; }
.tl__role span { display: block; font-weight: 400; color: var(--mute-2); font-size: var(--step-0); line-height: 1.45; margin-top: 0.15rem; }
.tl__note { font-family: var(--font-data); font-size: var(--step--1); line-height: 1.6; color: var(--mute-2); }

/* --- numbered steps ------------------------------------------------------- */
.steps { border-top: var(--rule-2); }
.step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1rem; border-bottom: var(--rule); }
.step__n { font-family: var(--font-data); font-size: var(--step--1); color: var(--acid); }
.step__t { font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -0.014em; }
.step__d { margin-top: 0.3rem; font-size: var(--step-0); color: var(--mute); }

/* --- quote ---------------------------------------------------------------- */
.pull {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.28; letter-spacing: -0.022em;
  max-width: 30ch; text-wrap: pretty;
  color: var(--text);
}

/* --- footer --------------------------------------------------------------- */
.footer { border-top: var(--rule); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.footer__grid { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }
.footer__sign {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: 700; font-size: var(--step-2);
  line-height: 1.04; letter-spacing: -0.028em; max-width: 17ch;
}
.footer__col h3 { font-family: var(--font-data); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 0.9rem; }
.footer__col li + li { margin-top: 0.45rem; }
.footer__col a { font-size: var(--step-0); text-decoration: none; }
.footer__base {
  margin-top: clamp(2rem, 3.5vw, 2.75rem); padding-top: 1rem;
  border-top: var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-family: var(--font-data); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2);
}

/* --- figures -------------------------------------------------------------- */
.figcap { margin-top: 0.75rem; font-family: var(--font-data); font-size: var(--step--1); line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute-2); max-width: 56ch; }
.fig { margin: 0; }
.fig svg { width: 100%; height: auto; overflow: visible; }
.stand { background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px); background-size: 8.333% 100%; }
@media (max-width: 47.99rem) { .stand .s-crown { stroke-width: 3.4; } .stand .s-stem { stroke-width: 4.4; } .stand .s-ground { stroke-width: 6.4; } .stand .s-band { stroke-width: 3; } .stand .s-hatch { stroke-width: 3.4; } .stand .s-lead { stroke-width: 3.6; } .stand .s-text { font-size: 36px; } .stand .s-unit { display: none; } }

/* --- motion: four, no decorative loops ------------------------------------ */
[data-enter] { opacity: 0; transform: translateY(8px); }
.mounted [data-enter] { animation: mount 0.5s var(--snap) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes mount { to { opacity: 1; transform: none; } }

.draw path, .draw line, .draw circle, .draw polyline { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); }
.mounted .draw path, .mounted .draw line, .mounted .draw circle, .mounted .draw polyline {
  animation: draw 1.1s var(--wipe) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-enter] { opacity: 1; transform: none; }
  .draw path, .draw line, .draw circle, .draw polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
}

@media print {
  .masthead { display: none; }
  body { background: #fff; color: #000; }
  .btn, .arrow-link { display: none; }
}
/* --- spec lists: capability inventories, not feature cards ---------------- */
.spec { margin-top: 1rem; border-top: var(--rule); }
.spec li {
  padding-block: 0.55rem;
  border-bottom: var(--rule);
  font-size: var(--step-0);
  color: var(--mute);
  padding-left: 1.1rem;
  position: relative;
}
.spec li::before {
  content: "";
  position: absolute; left: 0; top: 0.78em;
  width: 5px; height: 1px;
  background: var(--mute-2);
}

/* --- carbon instrument, dark register ------------------------------------- */
.tabs { display: flex; border-bottom: var(--rule-2); position: relative; flex-wrap: wrap; isolation: isolate; }
.tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  position: relative; z-index: 1;
  padding: 0.7rem 1rem;
  font-family: var(--font-data); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute-2);
  transition: color 0.2s var(--snap);
}
.tabs button:hover { color: var(--text); }
.tabs button:not([aria-selected="true"]):hover { background: rgb(239 237 230 / 0.05); }
.tabs button[aria-selected="true"] { color: var(--on-acid); }
.tabs__slab {
  position: absolute; bottom: -1px; left: 0;
  height: calc(100% + 1px);
  background: var(--acid);
  transition: transform 0.34s var(--snap), width 0.34s var(--snap);
}

.bars { display: grid; gap: 1.5rem; }
.barrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
@media (min-width: 40rem) { .barrow { grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: 1rem; align-items: center; } }
.barrow__k { font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text); }
.barrow__k span { display: block; font-size: 0.625rem; letter-spacing: 0.16em; color: var(--mute-2); }
.barrow__track { position: relative; height: 34px; }
.barrow__track::before { content: ""; position: absolute; inset-block: 0; inset-inline: 0; border-bottom: 1px solid var(--line); }
.barrow__fill {
  position: absolute; inset-block: 1px; inset-inline-start: 0; width: 0;
  background: repeating-linear-gradient(90deg, var(--mute-2) 0 3px, transparent 3px 6px);
  border-right: 1px solid var(--mute-2);
  transition: width 0.62s var(--wipe);
}
.barrow__val {
  position: absolute; inset-inline-start: 0; bottom: calc(100% + 6px);
  font-family: var(--font-data); font-size: 0.75rem; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transition: opacity 0.3s var(--snap);
}
.barrow--mean .barrow__fill { background: var(--acid); border-right-color: var(--acid); }
.barrow--mean .barrow__val { color: var(--acid); }

/* --- HERO, personal register: the name leads, the claim follows ----------- */
.hero__name { font-size: clamp(2.25rem, 0.6rem + 5.4vw, 5.5rem); max-width: none; letter-spacing: -0.04em; }
.hero__sub {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--mute);
  max-width: 44ch;
}
.hero__claim { font-size: var(--step-2); line-height: 1.14; font-weight: 500; max-width: 26ch; color: var(--text); letter-spacing: -0.026em; }

/* --- THE ARC: her trajectory plotted on a measured axis ------------------ */
.arc { grid-column: 1 / -1; border-top: var(--rule); border-bottom: var(--rule); padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.arc__axis { width: 100%; height: auto; }
.arc__marks { position: relative; height: clamp(7rem, 9vw, 7.5rem); margin-top: 0.5rem; }
.mark {
  position: absolute; left: var(--x); top: 0;
  width: 14rem; max-width: 40vw;
  transform: translateX(-50%);
}
/* short-stem chapters drop to a second row and read outward from their own
   stem, so a dense cluster of chapters can never collide */
.mark--low { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.mark--low:not(.mark--end) { transform: none; text-align: left; }
.mark--end { transform: translateX(-100%); text-align: right; }
.mark__yr { font-family: var(--font-data); font-size: var(--step--1); letter-spacing: 0.1em; color: var(--mute-2); }
.mark__t { margin-top: 0.2rem; font-weight: 500; font-size: var(--step-0); letter-spacing: -0.012em; line-height: 1.25; }
.mark__d { margin-top: 0.15rem; font-family: var(--font-data); font-size: var(--step--1); color: var(--mute-2); line-height: 1.4; }
.mark--hi .mark__yr, .mark--hi .mark__t { color: var(--acid); }

@media (max-width: 47.99rem) {
  .arc__marks { height: 15rem; }
  .mark { width: 10.5rem; max-width: 46vw; }
  .mark--low { padding-top: 3rem; }
}

/* --- positions: stated opinions, numbered, not feature cards ------------- */
.positions { border-top: var(--rule-2); }
.position { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 1rem; padding-block: clamp(1rem, 2vw, 1.5rem); border-bottom: var(--rule); }
.position__n { font-family: var(--font-data); font-size: var(--step--1); color: var(--mute-2); }
.position__t { font-family: var(--font-display); font-variation-settings: "wdth" 106; font-weight: 600; font-size: var(--step-1); line-height: 1.28; letter-spacing: -0.018em; }
.position__d { margin-top: 0.45rem; font-size: var(--step-0); color: var(--mute); }

/* lead entries get more presence than the reference lists below them */
.entries--lead .entry { padding-block: clamp(1.15rem, 2.4vw, 1.75rem); }
.entries--lead .entry__title { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; }
.entries--lead .entry__no { color: var(--acid); }

/* ==========================================================================
   LUSTRE — one material, done properly.

   Rule change, stated: v1 forbade shadows entirely. That was aimed at
   cast/elevation shadows and glow, which fake depth. Inset bevels and wells
   are a different thing - they are how a machined surface reads as solid,
   which is the material this design already claims to be. So: no cast shadow,
   no glow, no blur. Inset bevels and one raking key light, both rationed.

   Budget: max ~4% luminance shift on a surface, ~5% for the key light. Any
   more and it stops being lustre and starts being a gradient template.
   ========================================================================== */

:root {
  --sheen: linear-gradient(180deg, rgb(239 237 230 / 0.038), rgb(239 237 230 / 0) 44%);
  --sheen-strong: linear-gradient(180deg, rgb(239 237 230 / 0.075), rgb(239 237 230 / 0.012) 52%);
  --bevel-up: inset 0 1px 0 rgb(239 237 230 / 0.085);
  --bevel-down: inset 0 -1px 0 rgb(0 0 0 / 0.6);
  --well-in: inset 0 1px 3px rgb(0 0 0 / 0.55), inset 0 -1px 0 rgb(239 237 230 / 0.05);
}

/* the key light: fixed, above the page, below the header. this is the single
   biggest reason a dark interface stops looking flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(130% 70% at 50% -12%, rgb(201 242 77 / 0.06), rgb(201 242 77 / 0.012) 42%, transparent 68%);
  mix-blend-mode: soft-light;
}

/* raised surfaces: bevel top-light, bottom-shade, and a sheen across the face */
.port,
.btn,
.tabs__slab {
  background-image: var(--sheen);
  box-shadow: var(--bevel-up), var(--bevel-down);
}
.btn--primary,
.tabs__slab {
  background-image: var(--sheen-strong);
}
.port:hover, .port.is-on { box-shadow: var(--bevel-up), var(--bevel-down), 0 0 0 1px rgb(201 242 77 / 0.09); }

/* anodised sweep: light travelling across the button face on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 34%, rgb(255 255 255 / 0.3) 47%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--wipe);
}
.btn:hover::after { transform: translateX(130%); }
.btn > * { position: relative; }

/* recessed surfaces: data tracks read as milled channels, not printed rules */
.rung__track,
.barrow__track,
.arc__axis {
  background: linear-gradient(180deg, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0) 60%);
  box-shadow: var(--well-in);
}

/* rows gain light as they pass under the key light */
.record tbody tr,
.entry,
.rung,
.tl { transition: background-color 0.25s var(--snap), padding-left 0.25s var(--snap); }
.record tbody tr:hover,
.rung:hover,
.tl:hover { background-color: rgb(239 237 230 / 0.028); }

/* ==========================================================================
   SCROLL — orientation and pacing. Native scrolling is kept on purpose.

   A smooth-scroll hijack makes a long text page worse to read, breaks fast
   flicks, and takes the scrollbar away from people who rely on it. So none of
   that. Instead: a progress indicator for orientation, one-shot reveals that
   give the page a response to being explored, and a way back up.
   ========================================================================== */

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 30;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

.to-top {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 25;
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 2.5rem; padding: 0.5rem 0.85rem;
  border: var(--rule-2); border-radius: 0;
  background: var(--panel); color: var(--mute);
  font-family: var(--font-data); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--bevel-up), var(--bevel-down);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.28s var(--snap), transform 0.28s var(--snap), visibility 0.28s, color 0.18s, border-color 0.18s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--acid); border-color: var(--acid); }
.to-top span { transition: transform 0.22s var(--snap); }
.to-top:hover span { transform: translateY(-2px); }

/* one-shot reveals: the only scroll-linked motion on the page */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.62s var(--wipe), transform 0.72s var(--wipe);
  transition-delay: calc(var(--d, 0) * 65ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .progress { display: none; }
}

/* --- GEO: answer blocks --------------------------------------------------
   Self-contained, fact-dense passages written to be extracted without the
   surrounding page. Question in the accent, answer as a real dd so the
   definition structure survives parsing. */
.facts { border-top: var(--rule-2); }
.fact { padding-block: clamp(1.25rem, 2.2vw, 1.85rem); border-bottom: var(--rule); }
.fact h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600; font-size: var(--step-1);
  line-height: 1.3; letter-spacing: -0.016em;
  color: var(--acid);
  max-width: 34ch;
}
.fact p {
  margin: 0.7rem 0 0;
  max-width: 76ch;
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--mute);
}