:root {
/* TOKENS:BEGIN */
  /* GENERATED by tools/sync-brand.mjs. Do not hand-edit. */
  --deep: #211713;
  --ground2: #2D211C;
  --ground: #382A25;
  --plate: #443630;
  --plate2: #51413B;

  --ink: #FEF9F1;
  --ink2: #E6E1D9;
  --ink3: #CFCBC5;
  --faint: #B6B3AD;

  --spring: #37C2DC;
  --spring-mark: #25B7D1;
  --spring-wash: #003A44;
  --sump: #85B4FF;
  --sump-mark: #6CA4FF;
  --sump-wash: #002D72;
  --rossa: #EDA082;
  --rossa-mark: #DA8F71;
  --rossa-wash: #581D00;

  /* One name for the primary, so a swap is one line. */
  --accent: var(--spring);
  --accent-mark: var(--spring-mark);
  --accent-wash: var(--spring-wash);
/* TOKENS:END */
}

/* ==========================================================================
   base.css — tokens, reset, type, layout primitives.

   The look is a CAVE SURVEY: hairline rules with station ticks, tabular
   figures, cross-sections drawn to a scale bar, and a grade against every
   number. Cavers grade a survey by how it was measured, which is the
   cheapest honesty mechanism there is.

   Every colour above is generated. A hex anywhere else in css/ or js/ fails
   the build.
   ========================================================================== */

:root {
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Karla', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1180px;
  --measure: 68ch;
  --gut: clamp(20px, 5vw, 56px);
  --rule: 1px;

  --r-sm: 3px;
  --r: 6px;
  --r-lg: 12px;

  --step: clamp(56px, 9vw, 116px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The survey chrome is anchored to headings; keep them clear of the bar. */
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink2);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 6.4vw, 74px); letter-spacing: -.032em; }
h2 { font-size: clamp(27px, 3.5vw, 41px); letter-spacing: -.026em; }
h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.014em; }
h4 { font-size: 16px; letter-spacing: -.006em; }

p { margin: 0 0 1.1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
strong, b { color: var(--ink); font-weight: 700; }
em, i { font-style: italic; }
hr { border: 0; border-top: var(--rule) solid var(--plate2); margin: var(--step) 0; }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: .86em;
  font-variant-numeric: tabular-nums;
}
code { color: var(--ink); background: var(--plate); padding: .1em .38em; border-radius: var(--r-sm); }

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

/* `hidden` is a UA style and loses to any class that sets display. Every
   button and panel this site toggles carries one, so without this the app
   shows a Swap button to a reader with no wallet. */
[hidden] { display: none !important; }
canvas { display: block; }

/* ---- layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
/* A MEASURE APPLIED TO CHILDREN, not a container. A sibling site set
   max-width on the wrapper itself, so every argument on the site was
   indented by a quarter of the viewport with nothing aligned to it. */
.prose > * { max-width: var(--measure); }
.prose > .full, .prose > figure, .prose > table, .prose > .scroll { max-width: none; }

section { padding-block: var(--step); }
section + section { padding-top: 0; }

/* Wide content scrolls INSIDE its own box. Note that a scroll container
   still has a min-content contribution, so the box needs min-width: 0 in a
   grid or the page widens instead of the box scrolling. */
.scroll { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }

.grid { display: grid; gap: clamp(18px, 2.6vw, 34px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- reveal ------------------------------------------------------------- */
/* SCOPED TO .js, set by an inline script before any stylesheet parses. A
   sibling shipped this unscoped and hid its entire page from anyone without
   JavaScript — 37 elements at opacity 0 waiting for an observer that never
   ran. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].seen {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent-mark); color: var(--deep);
  padding: 10px 16px; border-radius: var(--r); font-weight: 700;
}
.skip:focus { top: 12px; }