/* Hachure — site styles.
   The palette is the application's own (§8): near-black chrome that recedes,
   survey-instrument amber as the primary accent, graticule cyan reserved for
   selection and measurement. Numbers are set in SF Mono with tabular figures,
   without exception, which is the app's own typographic law. */

:root {
  --ink:        #0b0c0e;
  --ink-raise:  #131519;
  --ink-panel:  #17191e;
  --rule:       #24282e;
  --rule-soft:  #1b1e23;
  --paper:      #e7e4dc;
  --muted:      #8d939c;
  --muted-dim:  #666c75;
  --amber:      #d99e42;
  --amber-dim:  #8a6528;
  --graticule:  #4fd8e3;
  --warn:       #d98a4a;

  --measure: 68ch;
  --page: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
  --label-col: 168px;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 158, 66, 0.32);
  transition: border-color 140ms ease, color 140ms ease;
}
a:hover { border-bottom-color: var(--amber); }

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

/* ── numbers ───────────────────────────────────────────────────────────── */

.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ── shell ─────────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 46px;
  padding-inline: var(--gutter);
  background: rgba(11, 12, 14, 0.92);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--rule-soft);
}

.topbar__mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar__mark::before {
  content: "";
  width: 9px; height: 9px;
  border: 1px solid var(--amber);
  transform: rotate(45deg);
  flex: none;
}

/* Development status, said in the chrome so it travels with every scroll
   position rather than only appearing at the top of the page. */
.topbar__flag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  padding: 3px 7px 2px;
  border-radius: 3px;
  margin-left: 14px;
  white-space: nowrap;
  flex: none;
}
.topbar__head { display: flex; align-items: center; min-width: 0; }

.devbar {
  border: 1px solid var(--amber-dim);
  border-left-width: 3px;
  background: rgba(217, 158, 66, 0.05);
  padding: 14px 18px;
  margin-bottom: 30px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.devbar__k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}
.devbar__t {
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper);
  margin: 0;
  max-width: none;
}
.devbar__t span { color: var(--muted); }

.topnav {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.topnav a { color: var(--muted); border: 0; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--amber); }
@media (max-width: 640px) { .topnav a.is-optional { display: none; } }

/* ── footer readout rail — the app's instrument panel ──────────────────── */

.readout {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0;
  height: 34px;
  padding-inline: var(--gutter);
  background: rgba(11, 12, 14, 0.93);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.readout__cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-inline: 16px;
  border-right: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.readout__cell:first-child { padding-left: 0; }
.readout__cell:last-child { border-right: 0; margin-left: auto; padding-right: 0; }
.readout__k { color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; }
.readout__v { color: var(--paper); }
.readout__v--amber { color: var(--amber); }
@media (max-width: 860px) { .readout__cell.is-optional { display: none; } }
@media (max-width: 560px) { .readout { display: none; } }

/* ── section scaffold ─────────────────────────────────────────────────── */

.band {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(56px, 8vw, 104px);
}
.band--flush { border-top: 0; }

.band__grid {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 860px) {
  .band__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.field {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding-top: 10px;
  position: sticky;
  top: 74px;
}
.field span { display: block; color: var(--amber-dim); margin-top: 6px; letter-spacing: 0.14em; }
@media (max-width: 860px) {
  .field { position: static; padding-top: 0; padding-bottom: 4px; border-bottom: 1px solid var(--rule-soft); }
  .field span { display: inline; margin-left: 10px; }
}

h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; }

h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  max-width: 22ch;
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-weight: 400;
  color: var(--paper);
}

.lede {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--paper);
  max-width: 56ch;
  margin: 22px 0 0;
  font-weight: 300;
}

p { max-width: var(--measure); color: var(--muted); margin: 18px 0 0; }
p strong { color: var(--paper); font-weight: 500; }
p.tight { margin-top: 10px; }

.note {
  border-left: 2px solid var(--amber-dim);
  padding-left: 16px;
  margin-top: 26px;
  max-width: var(--measure);
}
.note p { margin: 0; font-size: 15.5px; }
.note .note__k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}

/* ── figures ──────────────────────────────────────────────────────────── */

figure { margin: 32px 0 0; }
figure img { width: 100%; height: auto; background: var(--ink-raise); }

figcaption {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted-dim);
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
figcaption b { color: var(--muted); font-weight: 400; }
figcaption em { font-style: normal; color: var(--amber-dim); }

.plate { border: 1px solid var(--rule); background: var(--ink-raise); }

/* A capture of the application itself, rather than imagery: it gets a rule and a
   little lift so a near-black window does not dissolve into a near-black page. */
.shot {
  border: 1px solid #2c313a;
  border-radius: 6px;
  background: var(--ink-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.shot { max-width: var(--maxw, 100%); }
.shot--panel { --maxw: 760px; }

/* A reserved slot for a screenshot that has not been dropped in yet. It holds the
   shape the final image will occupy and states the filename it is waiting for, so
   the page does not reflow when the picture arrives. */
.shotslot {
  aspect-ratio: var(--ar, 16 / 10);
  width: 100%;
  max-width: var(--maxw, 100%);
  border: 1px dashed #343a44;
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.012) 0 12px,
      rgba(255, 255, 255, 0) 12px 24px),
    var(--ink-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.shotslot--panel { --maxw: 760px; }

/* A panel crop small enough to read beside its own prose rather than above it.
   Unfloats below the point where the text column stops being wide enough for
   both, which is also where the section itself goes single-column. */
.figfloat {
  float: right;
  clear: right;
  width: min(var(--fw, 340px), 40%);
  margin: 4px 0 20px 34px;
}
/* A left float always starts below anything already floating right, so prose is
   never squeezed into a column between two pictures. */
.figfloat--left {
  float: left;
  clear: both;
  margin: 4px 34px 20px 0;
}
.figfloat img { width: 100%; }
.figfloat figcaption { font-size: 10.5px; }

/* The floats live inside the section's content column, so it has to contain them
   or the next section's rule rides up beside a picture. */
.band__grid > div::after { content: ""; display: block; clear: both; }

@media (max-width: 900px) {
  .figfloat, .figfloat--left {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 30px 0 0;
  }
}
.shotslot__name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--amber);
  word-break: break-all;
}
.shotslot__note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--muted-dim);
  max-width: 46ch;
}
.shotslot__note b { color: var(--muted); font-weight: 400; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
@media (max-width: 720px) {
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
}

.tile figcaption { margin-top: 8px; }

/* ── measured-figure blocks ───────────────────────────────────────────── */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-top: 34px;
}
.metric { background: var(--ink); padding: 20px 22px 22px; }
.metric__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.metric__v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-top: 12px;
}
.metric__v small { font-size: 0.45em; letter-spacing: 0.06em; color: var(--muted); margin-left: 4px; }
.metric__n { font-size: 13.5px; color: var(--muted-dim); margin-top: 8px; line-height: 1.5; }
.metric--lit .metric__v { color: var(--amber); }

/* ── dense listing (the processing catalogue) ─────────────────────────── */

.catalogue { margin-top: 30px; }
.cat__group + .cat__group { margin-top: 34px; }
.cat__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}
.cat__head h3 { font-size: 15px; letter-spacing: 0.02em; }
.cat__count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted-dim);
  margin-left: auto;
}
.cat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
@media (max-width: 720px) { .cat__list { columns: 1; } }
.cat__list li {
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
  color: var(--paper);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.cat__list li span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-dim);
  margin-left: auto;
  text-align: right;
  flex: none;
  letter-spacing: 0.04em;
}

/* ── swipe comparison — the app's A/B pane ────────────────────────────── */

.swipe {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink-raise);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.swipe img { width: 100%; display: block; }
.swipe__b {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 50%;
}
.swipe__b img {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
}
.swipe__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--graticule);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.swipe__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--graticule);
  border-radius: 50%;
  background: rgba(11, 12, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.swipe__tag {
  position: absolute;
  top: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(11, 12, 14, 0.7);
  padding: 4px 9px;
  pointer-events: none;
}
.swipe__tag--a { right: 12px; }
.swipe__tag--b { left: 12px; color: var(--graticule); }

/* ── reference page ───────────────────────────────────────────────────── */

.doc {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-block: 44px 120px;
}
@media (max-width: 940px) { .doc { grid-template-columns: minmax(0, 1fr); } }

.toc { position: sticky; top: 74px; }
@media (max-width: 940px) { .toc { position: static; margin-bottom: 12px; } }

.toc__search {
  width: 100%;
  background: var(--ink-raise);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 11px;
  margin-bottom: 18px;
}
.toc__search::placeholder { color: var(--muted-dim); }
.toc__search:focus { border-color: var(--graticule); outline: none; }

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border: 0;
  border-left: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}
.toc a:hover { color: var(--paper); border-left-color: var(--muted-dim); }
.toc a.is-active { color: var(--amber); border-left-color: var(--amber); }

.doc__body > section { scroll-margin-top: 66px; }
.doc__body > section + section { margin-top: 64px; }

.doc h2 { max-width: none; font-size: clamp(26px, 3vw, 34px); }
.doc h3 { margin-top: 38px; }

.entry {
  border-top: 1px solid var(--rule-soft);
  padding-top: 20px;
  margin-top: 20px;
}
.entry:first-of-type { border-top: 0; }
.entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.entry__head h3 { margin: 0; font-size: 17px; }
.entry__where {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--amber-dim);
  white-space: nowrap;
  overflow-wrap: anywhere;
  white-space: normal;
}
.entry p { font-size: 15.5px; max-width: 72ch; }
.entry .caution, .entry .also {
  display: block;
  margin-top: 12px;
  padding-left: 15px;
  border-left: 2px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 72ch;
}
.entry .caution { border-left-color: var(--warn); }
.entry .caution::before,
.entry .also::before {
  content: attr(data-k);
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 5px;
}
.entry .caution::before { color: var(--warn); }
.entry strong { color: var(--paper); font-weight: 500; }

.keys { width: 100%; border-collapse: collapse; margin-top: 20px; }
.keys th, .keys td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; vertical-align: baseline; }
.keys th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dim); font-weight: 400; }
.keys td:first-child { width: 130px; }
.keys kbd {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--paper);
  background: var(--ink-panel);
  border: 1px solid var(--rule);
  padding: 2px 7px;
  white-space: nowrap;
}
.keys td:last-child { color: var(--muted); }

.is-hidden { display: none !important; }

.nores {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-dim);
  padding: 20px 0;
}

/* ── references ───────────────────────────────────────────────────────── */

.refs { list-style: none; margin: 26px 0 0; padding: 0; columns: 2; column-gap: 44px; }
@media (max-width: 860px) { .refs { columns: 1; } }
.refs li {
  break-inside: avoid;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.refs li b { color: var(--paper); font-weight: 500; }
.refs li span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-bottom: 4px;
}

/* ── page foot ────────────────────────────────────────────────────────── */

.pagefoot {
  border-top: 1px solid var(--rule-soft);
  padding: 40px 0 90px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--muted-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  justify-content: space-between;
}
.pagefoot a { color: var(--muted); border-bottom-color: var(--rule); }
.pagefoot a:hover { color: var(--amber); }

/* ── hero: the hachure plot ───────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: 46px;
  overflow: hidden;
}

.hero__plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--ink) 0%, rgba(11,12,14,0.94) 44%, rgba(11,12,14,0.52) 70%, rgba(11,12,14,0.04) 100%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(11,12,14,0.10) 20%, rgba(11,12,14,0.10) 76%, rgba(11,12,14,0.95) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-bottom: clamp(56px, 9vh, 104px);
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: linear-gradient(to right, var(--amber-dim), transparent);
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin-top: 22px;
  max-width: 16ch;
  color: var(--paper);
}
.hero h1 em { font-style: normal; color: var(--amber); }

.hero__sub {
  margin-top: 24px;
  max-width: 60ch;
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 300;
}
.hero__sub b { color: var(--paper); font-weight: 400; }

.hero__strip {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  width: 100%;
  max-width: 760px;
}
@media (max-width: 900px) { .hero__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; } }
.hero__strip div {
  background: rgba(11, 12, 14, 0.93);
  padding: 12px 20px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
}
.hero__strip b { display: block; font-weight: 400; font-size: 17px; color: var(--paper); letter-spacing: -0.01em; margin-top: 5px; }
.hero__strip div.lit b { color: var(--amber); }

.hero__credit {
  margin-top: 22px;
  max-width: 62ch;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--muted-dim);
}

@media (max-width: 1040px) {
  .hero__plot { opacity: 0.38; }
}

/* ── entrance ─────────────────────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(14px); }
.rise.is-in { opacity: 1; transform: none; transition: opacity 620ms cubic-bezier(.2,.7,.3,1), transform 620ms cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .rise.is-in { transition: none; }
}