/* sediment.foo, the page in front of Sediment's sites. It's laid out like a
   core sample: the surface at the top, then a section per layer, each marked
   on a depth ruler down the left with a core in that layer's colour and
   grain, down to bedrock at the foot.
   The colours, fonts and parts are the app's own (static/css/site.css and
   sediment.css): "Field notes" in the light, "Basalt" in the dark. There is
   one accent, the app's: rust in the light, amber in the dark, and amber on
   the bedrock band, which is dark in both. */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --bg: #f1ece1;
  --surface: #faf7f0;
  --text: #221e19;
  --muted: #6b6155;
  --line: #d9cfbe;
  --accent: #9c3f1a;
  --on-accent: #ffffff;
  --deep: #4a3b30;
  --layer-0: #faf7f0; --on-layer-0: #221e19;
  --layer-1: #d7d1ca; --on-layer-1: #221e19;
  --layer-2: #b4aca3; --on-layer-2: #221e19;
  --layer-3: #90867d; --on-layer-3: #221e19;
  --layer-4: #6d6156; --on-layer-4: #f1ece1;
  --layer-5: #4a3b30; --on-layer-5: #f1ece1;
  --bedrock: #352a23; --on-bedrock: #f1ece1;
  --radius: 3px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --frame: 100rem;
  --gutter: clamp(1rem, 6vw - 2.5rem, 5rem);

  /* Basalt's accent, which the bedrock band wears in both schemes: the
     light theme's rust is too dark to read on it (2.1:1); this is 5.6:1 on
     the light bedrock and 4.9:1 on the dark one. */
  --accent-basalt: #d9955a;

  /* Worked out from the theme, as the app does. */
  --r-control: calc(var(--radius) * 0.5 + 5px);
  --r-card: calc(var(--radius) + 8px);
  --line-strong: color-mix(in srgb, var(--line) 72%, var(--muted));
  --line-hover: color-mix(in srgb, var(--line) 40%, var(--muted));
  --tint: color-mix(in srgb, var(--text) 5%, transparent);
  --tint-strong: color-mix(in srgb, var(--text) 9%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text));
  --accent-press: color-mix(in srgb, var(--accent) 76%, var(--text));
  /* The page's own accent, kept for the ground line over the bedrock band. */
  --accent-page: var(--accent);

  /* The ruler down the left of each section, and its core. */
  --rule-w: 8rem;
  --core-w: 2rem;
  --wave: clamp(14px, 2.2vw, 30px);

  /* Each layer's grain, as in the app's cross-section (tools/strata/build.py). */
  --tex-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16'%3E%3Ccircle cx='5' cy='4' r='1.3'/%3E%3Ccircle cx='17' cy='9' r='1.3'/%3E%3Ccircle cx='26' cy='3' r='1.1'/%3E%3Ccircle cx='10' cy='13' r='1.1'/%3E%3Ccircle cx='24' cy='14' r='0.9'/%3E%3C/svg%3E");
  --tex-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Cpath d='M3 4h8M19 11h8' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='21' cy='4' r='1.1'/%3E%3Ccircle cx='7' cy='11' r='1.1'/%3E%3C/svg%3E");
  --tex-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='12'%3E%3Cpath d='M2 3h20M24 9h18' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --tex-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8'%3E%3Cpath d='M0 2h36M6 6h10M22 6h8' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --tex-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M2.5 9.5L8 .5' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --tex-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='22'%3E%3Cpath d='M0 .5h56M0 11.5h56M.5 0v11M28.5 11v11' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
}

/* Basalt on screens only: paper always gets Field notes, whose dark ink
   prints well on white. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #131518;
    --surface: #1b1e22;
    --text: #e8e4dc;
    --muted: #959289;
    --line: #2d3137;
    --accent: #d9955a;
    --on-accent: #111111;
    --deep: #5b4636;
    --layer-0: #1b1e22; --on-layer-0: #e8e4dc;
    --layer-1: #282626; --on-layer-1: #e8e4dc;
    --layer-2: #352e2a; --on-layer-2: #e8e4dc;
    --layer-3: #41362e; --on-layer-3: #e8e4dc;
    --layer-4: #4e3e32; --on-layer-4: #e8e4dc;
    --layer-5: #5b4636; --on-layer-5: #e8e4dc;
    --bedrock: #423227; --on-bedrock: #e8e4dc;
    --radius: 4px;
  }
}

/* A layer: its colour, what's drawn on it, and its grain. */
.l1 { --band: var(--layer-1); --on-band: var(--on-layer-1); --tex: var(--tex-1); }
.l2 { --band: var(--layer-2); --on-band: var(--on-layer-2); --tex: var(--tex-2); }
.l3 { --band: var(--layer-3); --on-band: var(--on-layer-3); --tex: var(--tex-3); }
.l4 { --band: var(--layer-4); --on-band: var(--on-layer-4); --tex: var(--tex-4); }
.l5 { --band: var(--layer-5); --on-band: var(--on-layer-5); --tex: var(--tex-5); }
.l6 { --band: var(--bedrock); --on-band: var(--on-bedrock); --tex: var(--tex-6); }

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  overflow-wrap: break-word;
}
body > * { flex-shrink: 0; }
main { flex: 1 0 auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { overflow: hidden; }

.visually-hidden, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 0.6rem; left: 0.6rem; z-index: 99; padding: 0.55rem 0.9rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-control);
}

.frame { max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); }
/* Widths in @media are in em, the px width over 16 (760px is 47.5em), so the
   layouts change over sooner when someone has set their browser's text
   larger. */

/* Small uppercase mono labels, as in the app. */
.sd-label {
  display: block; margin: 0 0 0.9rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; line-height: 1.4;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}

/* The brand: four bars of shrinking width, then the name. */
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
}
.mark { display: inline-grid; gap: 2px; width: 18px; }
.mark i { display: block; height: 3px; background: var(--layer-5); }
.mark i:nth-child(1) { background: var(--accent); width: 100%; }
.mark i:nth-child(2) { background: var(--layer-3); width: 80%; }
.mark i:nth-child(3) { background: var(--layer-4); width: 55%; }
.mark i:nth-child(4) { width: 30%; }

/* ── Buttons (the app's .sd-btn) ────────────────────────────────────── */
.sd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.35rem; padding: 0.45rem 0.95rem; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04);
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.sd-btn:hover { background: color-mix(in srgb, var(--text) 5%, var(--surface)); border-color: var(--line-hover); }
.sd-btn:active { background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.sd-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sd-btn.primary:active { background: var(--accent-press); }
.sd-btn.small { min-height: 2rem; padding: 0.3rem 0.75rem; font-size: 0.82rem; gap: 0.4rem; }
.sd-btn.big { min-height: 2.75rem; padding: 0.65rem 1.25rem; font-size: 0.95rem; }
.arrow { font-weight: 400; }

/* ── Header ─────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; min-height: 3.5rem; }
.top-inner > .brand { margin-right: auto; }
.nav { display: none; gap: 0.25rem 1.6rem; }
.nav a {
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--accent); }
.go { flex: none; }
@media (min-width: 47.5em) { .nav { display: flex; } }

/* ── 0.0 m: the surface ─────────────────────────────────────────────── */
.hero { padding: clamp(1.6rem, 6vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-bottom: clamp(1.2rem, 3vh, 1.75rem); }
.eyebrow-more { white-space: nowrap; }
.sep { color: var(--line-strong); }
.sd-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text);
}
.sd-pip { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero-grid { display: grid; gap: 1.25rem 4rem; }
.hero h1 { font-size: clamp(2.25rem, 7.6vw, 5.9rem); line-height: 0.98; letter-spacing: -0.04em; }
.hero h1 .line { display: block; }
.lede { max-width: 58ch; font-size: clamp(1.05rem, 1.45vw, 1.2rem); line-height: 1.55; }
.hero .lede { max-width: 46ch; margin: 0; }
.hero .sub { max-width: 50ch; margin: 0.8rem 0 0; font-size: 0.95rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.hero-note { max-width: 50ch; margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--muted); }
/* Side by side, the headline gets one column, so it's sized to that and
   keeps to its two lines. */
@media (min-width: 62.5em) {
  .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .hero-side { padding-bottom: 0.4rem; }
  .hero h1 { font-size: clamp(3.4rem, 6.2vw, 5.9rem); }
}
/* On a small phone, the buttons and the invitation line come first, so both
   are on the first screen; the line about the sites follows them. */
@media (max-width: 26.25em) {
  .hero-side { display: flex; flex-direction: column; }
  .hero .sub { order: 1; margin-top: 1rem; }
  .hero .actions .sd-btn { flex: 1 1 auto; }
}

/* The cross-section, its caption, and the sheet's title block under it. */
.ground {
  margin-top: clamp(2.25rem, 6vh, 4rem); overflow: hidden; container-type: inline-size;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.ground figure { margin: 0; padding-top: 0.6rem; }
.ground figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem;
  padding: 0.8rem 1.15rem 0.85rem; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--muted);
}
.ground figcaption .sd-label { margin: 0; color: var(--text); }
.readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--surface); color: var(--text); }
.ground .readout { border-top: 1px solid var(--line); }
.readout > div { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 0.9rem 1.15rem 1rem; border-right: 1px solid var(--line); }
.readout > div:last-child { border-right: 0; }
.readout dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-wrap: pretty; }
.readout dd { margin: 0.35rem 0 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.readout.sheet dd { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
@media (max-width: 40em) {
  .readout.sheet { grid-template-columns: 1fr 1fr; }
  .readout.sheet > div:nth-child(2n) { border-right: 0; }
  .readout.sheet > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* The app's cross-section art (static/css/sediment.css, .strata-art and .sa-*).
   Words in it are sized in the drawing's own units (--u), which shrink with
   it, so the smaller it's drawn the more units they get. Under 40rem the
   tall narrow drawing takes over; past 30rem high it stops growing and
   shows more ground to its right instead. */
.strata-art { display: block; width: 100%; height: auto; }
.art-wide { aspect-ratio: 12 / 5; --u: 13px; }
.art-narrow { display: none; aspect-ratio: 360 / 440; max-height: 30rem; --u: 15px; }
@container (max-width: 75rem) { .art-wide { --u: 15px; } }
@container (max-width: 60rem) { .art-wide { --u: 18px; } }
@container (max-width: 46rem) { .art-wide { --u: 21px; } }
@container (max-width: 40rem) { .art-wide { display: none; } .art-narrow { display: block; } }
.art-more, .bands-long { display: none; }
@container (min-width: 24.5rem) { .art-more, .bands-long { display: inline; } .bands-short { display: none; } }
@container (min-width: 26rem) { .art-narrow { --u: 13px; } }
.sa-band-0 { fill: var(--layer-1); }
.sa-band-1 { fill: var(--layer-2); }
.sa-band-2 { fill: var(--layer-3); }
.sa-band-3 { fill: var(--layer-4); }
.sa-band-4 { fill: var(--layer-5); }
.sa-band-5 { fill: var(--bedrock); }
.sa-tex { fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: 0.3; }
.sa-tex circle { stroke: none; }
.sa-tex-0 { stroke: var(--on-layer-1); fill: var(--on-layer-1); }
.sa-tex-1 { stroke: var(--on-layer-2); fill: var(--on-layer-2); }
.sa-tex-2 { stroke: var(--on-layer-3); }
.sa-tex-3 { stroke: var(--on-layer-4); }
.sa-tex-4 { stroke: var(--on-layer-5); }
.sa-tex-5 { stroke: var(--on-bedrock); }
.sa-root { fill: none; stroke: var(--on-layer-1); stroke-width: 1.2; stroke-linecap: round; opacity: 0.35; }
.sa-fault { fill: none; stroke: var(--on-layer-4); stroke-width: 1.6; opacity: 0.5; }
.sa-surface { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.sa-card rect { rx: min(var(--radius), 8px); }
.sa-card .bar { fill: var(--muted); }
.sa-card.live .bar { fill: var(--accent); }
.sa-card .face { fill: var(--surface); }
.sa-card .edge { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sa-ink { fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sa-ink.strong { stroke: var(--text); }
.sa-cavity rect { fill: none; stroke: var(--on-layer-5); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.75; vector-effect: non-scaling-stroke; }
.sa-trail { stroke: var(--surface); stroke-width: 10; opacity: 0.35; }
.sa-path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.1 9; }
.sa-chev { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sa-crumb { fill: var(--layer-2); }
.sa-text { font-family: var(--font-mono); font-size: var(--u); letter-spacing: 0.12em; text-transform: uppercase; }
.sa-note, .sa-num { fill: var(--muted); }
.sa-num { font-size: calc(var(--u) * 0.88); letter-spacing: 0.02em; text-transform: none; }
.sa-num.zero { fill: var(--text); }
.sa-name-0 { fill: var(--on-layer-1); }
.sa-name-1 { fill: var(--on-layer-2); }
.sa-name-2 { fill: var(--on-layer-3); }
.sa-name-3 { fill: var(--on-layer-4); }
.sa-name-4 { fill: var(--on-layer-5); }
.sa-name-5 { fill: var(--on-bedrock); }
.sa-ruler { fill: var(--bg); }
.sa-ruler-edge { fill: none; stroke: var(--line); }
.sa-tick { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.sa-tick.minor { stroke: var(--line-strong); stroke-width: 1; }
.sa-zero { fill: none; stroke: var(--accent); stroke-width: 3; }

/* ── The layers ─────────────────────────────────────────────────────── */
/* Each section sits on the page's own ground; its layer shows in the core
   down the ruler on the left, so the cores line up into one sample, light
   at the top and dark at the foot. */
.stratum { position: relative; border-top: 1px solid var(--line); }
.stratum > .frame {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(3.5rem, 9vh, 6rem);
}
.body { min-width: 0; container-type: inline-size; }
.body h2 { max-width: 17ch; margin: 0 0 1.5rem; font-size: clamp(2.05rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; }
.narrow { max-width: 54ch; }

/* The ruler mark: where the layer starts, its name, and how long ideas in it
   have gone untouched. On a phone it's a line over the section's words, with
   a square of the core; wider, it's a column down the section's left with the
   core along its edge. */
.ruler {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong);
}
.ruler::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px);
}
.r-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; margin: 0; font-family: var(--font-mono); }
.r-depth { font-size: 1.05rem; letter-spacing: 0.01em; white-space: nowrap; }
.r-name { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }
.r-age { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); }
.core {
  position: relative; order: -1; flex: none; display: block; width: 1.9rem; height: 1.9rem;
  background: var(--band); border: 1px solid var(--line-strong); border-radius: 2px;
}
.core::after, .log tbody th::after {
  content: ""; position: absolute; inset: 0; background: var(--on-band); opacity: 0.3;
  -webkit-mask-image: var(--tex); mask-image: var(--tex);
}

@media (min-width: 47.5em) {
  .stratum > .frame { grid-template-columns: var(--rule-w) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4.5rem); }
  .body { grid-column: 2; }
  .ruler {
    position: absolute; top: 0; bottom: 0; left: var(--gutter); width: var(--rule-w);
    display: block; margin: 0; padding: 0; border: 0;
  }
  /* The mark itself, where the layer starts. The surface's is in the accent. */
  .ruler::after { top: 0; bottom: auto; right: var(--core-w); height: 2px; background: var(--text); }
  .l1 .ruler::after { height: 3px; background: var(--accent); }
  .r-label { position: absolute; top: 1rem; left: 0; right: calc(var(--core-w) + 0.8rem); display: grid; gap: 0.35rem; }
  .r-depth { font-size: 1.3rem; line-height: 1; }
  .core {
    position: absolute; top: 0; bottom: 0; right: 0; z-index: 1;
    width: var(--core-w); height: auto; border-width: 0 1px; border-radius: 0;
  }
  /* Ticks down the core's side: a short one every 16px, a long one every 64px. */
  .core::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: calc(100% + 1px); width: 14px;
    background:
      repeating-linear-gradient(180deg, var(--muted) 0 1px, transparent 1px 64px) right top / 14px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--line-strong) 0 1px, transparent 1px 16px) right top / 7px 100% no-repeat;
  }
}
@media (min-width: 68.75em) { :root { --rule-w: 9rem; --core-w: 2.25rem; } }

/* A card: the app's .sd-card, a 2px top edge that turns accent on hover, or
   when something in it has the keyboard's focus. */
.card {
  padding: 1.2rem 1.2rem 1.15rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-top: 2px solid var(--line); border-radius: var(--r-card);
  transition: border-color 0.12s;
}
.card:hover, .card:focus-within { border-top-color: var(--accent); }

/* ── Topsoil: what it is ────────────────────────────────────────────── */
.intro { display: grid; gap: 1.25rem 3.5rem; max-width: 76rem; }
.intro .lede { margin: 0; }
.aside { margin: 0; padding-left: 1rem; border-left: 2px solid var(--accent); color: var(--muted); font-size: 0.95rem; max-width: 40ch; }
@media (min-width: 73.75em) { .intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; } }

/* The seven kinds, each drawn as a little idea card like the ones in the
   cross-section: two to a row on a phone, all seven in one on a wide
   screen, like the app's own kind picker. The last one takes the rest of
   its row, so no row ends in a gap. */
.kinds-label { margin-top: 3rem; }
.kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kind { display: flex; flex-direction: column; padding: 1rem 1rem 1.05rem; }
.kind h3 { margin: 0 0 0.25rem; font-size: 1.2rem; letter-spacing: -0.025em; }
.kind p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.kind:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; align-content: start; }
.kind:last-child .glyph { grid-row: 1 / span 2; width: 100%; margin: 0.1rem 0 0; }
@container (min-width: 34rem) { .kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 50rem) { .kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kind:last-child { grid-column: span 2; } }
@container (min-width: 64rem) {
  .kinds { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .kind:last-child { grid-column: auto; display: flex; }
  .kind:last-child .glyph { width: 4.5rem; margin: 0 0 0.9rem; }
}
.glyph { display: block; width: 4.5rem; height: auto; margin: 0 0 0.9rem; overflow: visible; }
@container (max-width: 33.99rem) { .kind:not(:last-child) .glyph { width: 3.75rem; margin-bottom: 0.75rem; } .kind { padding: 0.85rem 0.85rem 0.95rem; } }
.glyph rect { rx: min(var(--radius), 8px); }
.g-bar { fill: var(--muted); transition: fill 0.12s; }
.card:hover .g-bar { fill: var(--accent); }
.g-face { fill: var(--bg); }
.g-edge { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-ink { fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-ink.strong { stroke: var(--text); }

/* ── Silt: how ideas sink ───────────────────────────────────────────── */
.split { display: grid; gap: 2.75rem 4.5rem; }
@media (min-width: 73.75em) { .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.split-text p { max-width: 52ch; }
.readout.pair { grid-template-columns: 1fr 1fr; max-width: 30rem; margin-top: 1.9rem; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }

/* The layers as a strip log: each row a little deeper than the last, with
   the core down its first column (each layer's colour and grain) and an
   idea's preview squashing as it sinks. */
.log-box { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.log { --cw: 1.75rem; width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.log caption { display: table-caption; caption-side: top; margin: 0; padding: 0.85rem 1rem; text-align: left; }
.log thead th {
  padding: 0.55rem 1rem; text-align: left; border-top: 1px solid var(--line); background: var(--bg);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

.log tbody :is(td, th) { padding: 0.5rem 1rem; vertical-align: middle; border-top: 1px solid var(--line); }
.log thead th:first-child, .log tbody th { padding-left: calc(var(--cw) + 1rem); }
.log tbody th {
  position: relative; text-align: left; white-space: nowrap;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em;
}
.log tbody th::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--cw); background: var(--band); }
.log tbody th::after { right: auto; width: var(--cw); }
.log tbody tr:first-child th::before { box-shadow: inset 0 3px 0 var(--accent); }
.log-d { white-space: nowrap; font-family: var(--font-mono); font-size: 0.85rem; }
.log td:nth-child(3) { color: var(--muted); }
.log tr.l1 > * { height: 2.9rem; }
.log tr.l2 > * { height: 3.1rem; }
.log tr.l3 > * { height: 3.35rem; }
.log tr.l4 > * { height: 3.65rem; }
.log tr.l5 > * { height: 4rem; }
.log tr.l6 > * { height: 4.5rem; }
.log .pv-col { width: 6.5rem; }
.log thead .pv-col { text-align: right; }
.pv {
  display: block; width: 4.6rem; margin-left: auto; padding: 0.3rem 0.4rem;
  background: repeating-linear-gradient(180deg, var(--line-strong) 0 1px, transparent 1px 6px) content-box, var(--bg);
  border: 1px solid var(--line-strong); border-top: 3px solid var(--muted); border-radius: 2px;
}
.pv-1 { height: 2.15rem; border-top-color: var(--accent); }
.pv-2 { height: 1.7rem; }
.pv-3 { height: 1.3rem; }
.pv-4 { height: 0.95rem; padding-block: 0.2rem; }
.pv-5 { height: 0.7rem; padding-block: 0.15rem; }
.pv-6 { height: 0.5rem; padding-block: 0.1rem; }
.log-note { margin: 0.9rem 0 0; max-width: 52ch; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 35em) {
  .log { --cw: 1rem; }
  .log .pv-col { display: none; }
  .log caption, .log thead th, .log tbody :is(td, th) { padding-inline: 0.6rem; }
  .log thead th:first-child, .log tbody th { padding-left: calc(var(--cw) + 0.6rem); }
  .log tbody th { font-size: 1rem; }
  .log td:nth-child(3) { font-size: 0.88rem; }
}

/* ── Clay: how ideas rise ───────────────────────────────────────────── */
.lifts { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 61.25em) { .lifts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lift { display: grid; align-content: start; gap: 0.3rem; }
.lift-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.7rem; }
.lift-m { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.lift-m .sd-label { margin: 0 0 0.55rem; font-size: 0.62rem; letter-spacing: 0.14em; line-height: 1.2; }
.chevs { flex: none; width: 1.5rem; height: auto; margin-top: 0.2rem; }
.chevs path { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chevs path.on { stroke: var(--accent); }
.lift h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.lift p:last-child { margin: 0; font-size: 0.94rem; color: var(--muted); }
/* One under another (a tablet, a big phone): each a row, the lift beside the words. */
@media (min-width: 30em) and (max-width: 61.1875em) {
  .lift { grid-template-columns: 6rem minmax(0, 1fr) auto; column-gap: 1.25rem; row-gap: 0.25rem; align-items: center; }
  .lift-top { display: contents; }
  .lift-m { grid-column: 1; grid-row: 1 / span 2; }
  .chevs { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .lift h3 { grid-column: 2; grid-row: 1; align-self: end; }
  .lift p:last-child { grid-column: 2; grid-row: 2; align-self: start; }
}
.fine { max-width: 62ch; margin: 1.25rem 0 0; font-size: 0.92rem; color: var(--muted); }

/* What it takes: a tally of looks or +1s, drawn to the same width for the
   same depth, so 37 thin marks and 19 wide ones end up level. The last mark,
   the one that brings it back to the surface, is in the accent. */
.dig { margin-top: 2.5rem; padding: 1.3rem 1.4rem 0.6rem; }
.dig .sd-label { margin-bottom: 0.8rem; }
.dig-row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 6.5rem; align-items: center; gap: 0.5rem 1.25rem;
  padding: 0.85rem 0; border-top: 1px solid var(--line);
}
.dig-row p { margin: 0; }
.dig-depth { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.3; }
.dig-depth span { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dig-count { text-align: right; font-size: 0.92rem; color: var(--muted); white-space: nowrap; }
.dig-count strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.tally { --n: 1; display: block; height: 1.4rem; }
.tally.looks {
  background:
    linear-gradient(var(--accent), var(--accent)) right / 3px 100% no-repeat,
    linear-gradient(90deg, transparent calc(100% - 2px), var(--muted) 0) 0 0 / calc(100% / var(--n)) 100% repeat-x;
}
.tally.plus {
  background:
    linear-gradient(90deg, transparent 0 4px, var(--accent) 4px) right / calc(100% / var(--n)) 100% no-repeat,
    linear-gradient(90deg, transparent 0 4px, var(--line-strong) 4px) 0 0 / calc(100% / var(--n)) 100% repeat-x;
}
.tally.n1 { width: calc(100% / 37); min-width: 6px; }
.tally.n19 { --n: 19; }
.tally.n37 { --n: 37; }
@media (max-width: 40em) {
  .dig { padding-inline: 1.1rem; }
  .dig-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tally { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Shale: who sees what ───────────────────────────────────────────── */
.ledger { display: grid; gap: 0 2.75rem; margin: 2rem 0 0; }
@media (min-width: 40em) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 73.75em) { .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ledger > div { padding: 1.1rem 0 1.7rem; border-top: 1px solid var(--line); }
.ledger dt { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.ledger .n { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; color: var(--muted); }
.ledger dd { max-width: 42ch; margin: 0; text-wrap: pretty; }

/* ── Slate: your own ──────────────────────────────────────────────── */
/* One card for the Sediment you could have: the address with a blank to
   fill in, and what comes with it. Nothing on it is a link or a button,
   since asking for one isn't open yet. */
.site { container-type: inline-size; margin-top: 2.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.site-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin: 0; }
.site-top .sd-label { margin: 0; color: var(--text); }
.status {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.65rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
}
/* As big as the card allows (cqi). If it can't fit on one line it breaks
   before ".sediment.foo" (the <wbr> in index.html), never inside a word. */
.site-name {
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  font-size: clamp(1.75rem, 7vw, 6rem); font-size: clamp(1.75rem, 10.5cqi, 6.25rem);
  line-height: 1; letter-spacing: -0.04em;
}
/* "yours": a blank for the name, underlined dashed like a line to write on. */
.site-name .blank { text-decoration: underline dashed; text-decoration-thickness: 0.045em; text-underline-offset: 0.14em; }
.site-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: clamp(1.4rem, 3vw, 2rem) 0 0; border-top: 1px solid var(--line); }
.site-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.site-facts dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.site-facts dd { margin: 0; font-size: 0.95rem; }
@container (min-width: 26rem) { .site-facts > div { grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; } }
@container (min-width: 44rem) {
  .site-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 0; }
  .site-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0.8rem 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
}

/* ── Bedrock: the foot ──────────────────────────────────────────────── */
/* Dark in both schemes, so it wears Basalt's accent, and its quieter words
   are its own light colour mixed into it (5:1 or better). */
.foot {
  --fg: var(--on-bedrock);
  --soft: color-mix(in srgb, var(--fg) 70%, var(--band));
  --line-b: color-mix(in srgb, var(--fg) 22%, var(--band));
  --accent: var(--accent-basalt); --on-accent: #111111;
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--fg));
  --accent-press: color-mix(in srgb, var(--accent) 76%, var(--fg));
  border-top: 0;
  background: var(--band); color: var(--fg);
}
.wave {
  position: absolute; left: 0; bottom: calc(100% - 1px); z-index: 2; display: block;
  width: 100%; height: var(--wave); fill: var(--band); pointer-events: none;
}
.ground-line { fill: none; stroke: var(--accent-page); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.foot .sd-label, .foot .r-age { color: var(--soft); }
.foot .ruler { border-color: var(--line-b); }
.foot .ruler::after { background: repeating-linear-gradient(90deg, var(--line-b) 0 1px, transparent 1px 12px); }
.foot .core { background: color-mix(in srgb, var(--band) 86%, var(--fg)); border-color: var(--line-b); }
@media (min-width: 47.5em) {
  .foot .ruler::after { background: var(--fg); }
  .foot .core::before {
    background:
      repeating-linear-gradient(180deg, var(--soft) 0 1px, transparent 1px 64px) right top / 14px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--line-b) 0 1px, transparent 1px 16px) right top / 7px 100% no-repeat;
  }
}
.foot > .frame { padding-bottom: 2.5rem; }
.foot .lede { color: var(--soft); }
.foot .actions { margin-top: 0.4rem; }
/* The plain button is an outline in the band's own colours, so it stays
   quieter than the filled one beside it. */
.foot .sd-btn:not(.primary) { background: transparent; border-color: var(--line-b); color: var(--fg); }
.foot .sd-btn:not(.primary):hover { background: color-mix(in srgb, var(--fg) 10%, var(--band)); }
.foot .mark i:nth-child(2) { background: color-mix(in srgb, var(--fg) 72%, var(--band)); }
.foot .mark i:nth-child(3) { background: color-mix(in srgb, var(--fg) 52%, var(--band)); }
.foot .mark i:nth-child(4) { background: color-mix(in srgb, var(--fg) 34%, var(--band)); }
.foot-grid {
  display: grid; gap: 2rem 1.5rem; grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(3.5rem, 9vh, 5.5rem); padding-top: 2rem; border-top: 1px solid var(--line-b);
}
@media (min-width: 26.25em) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 62.5em) {
  .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: auto; }
}
.foot-brand p { max-width: 32ch; margin: 0.8rem 0 0; color: var(--soft); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot-grid li { color: var(--soft); text-wrap: pretty; }
.foot-grid a { color: var(--fg); text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin: 3rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line-b); }

/* ── The page that isn’t there (404.html) ───────────────────────────── */
.lost-grid { display: grid; gap: 2.5rem 4rem; }
.lost .lede { max-width: 44ch; margin: 1.4rem 0 0; }
.lost .ground { max-width: 40rem; margin: 0; }
@media (min-width: 62.5em) { .lost-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.art-lost { aspect-ratio: 600 / 220; --u: 13px; }
@container (max-width: 30rem) { .art-lost { --u: 22px; } }
.hole-air { fill: var(--surface); }
.hole-wall { fill: none; stroke: var(--text); stroke-width: 1.5; opacity: 0.6; vector-effect: non-scaling-stroke; }
.heap { fill: var(--layer-2); }
.flag-pole { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.flag { fill: var(--muted); }
.foot.slim > .frame { display: block; padding-block: 2.25rem 2rem; }
.foot.slim .foot-bottom { align-items: center; margin: 0; padding: 0; border: 0; font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.foot.slim .foot-bottom a { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* Paper leaves out backgrounds, so the bedrock band's light words and the
   filled buttons' white labels print in the page's dark ink instead, and
   the band's amber in the page's rust (amber is 2.5:1 on white). */
@media print {
  .top { position: static; }
  .wave, .ruler { display: none; }
  .foot { --fg: var(--text); --accent: var(--accent-page); background: none; }
  .sd-btn.primary { background: none; color: var(--text); }
}