/* The descent is the design: the topsoil wears the default web on purpose,
   and every layer down trades a little of that default for something particular. */
:root {
  --plain: system-ui, -apple-system, 'Hiragino Sans', sans-serif;
  --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --column-w: 56px;
  --ease: cubic-bezier(.5, .05, .2, 1);
  --ground-ink: #3C332A; /* the ground line (mole.css): the colour of the stroke on the face in mole.svg */
  --air: #EEF1EE; /* the surface, above the ground line (surface.css; the mole's face is filled with it) */
}
@media (max-width: 700px) { :root { --column-w: 28px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #16201F; scroll-behavior: auto; }
body { color: #1F2328; -webkit-font-smoothing: antialiased; }

/* soil and rock colours, shallow to deep */
#topsoil, [data-stratum="topsoil"]  { --bg: #FAFAF7; --ink: #1F2328; --dim: #6A6F76; --link: #2F5BD3; --face: var(--plain); }
#alluvium, [data-stratum="alluvium"] { --bg: #E6D9B8; --ink: #3B3222; --dim: #74684F; --link: #3B3222; --face: var(--plain); }
#diluvium, [data-stratum="diluvium"] { --bg: #A8613E; --ink: #FBEFE3; --dim: #EBC9B2; --link: #FBEFE3; --face: var(--mincho); }
#bedrock, [data-stratum="bedrock"]  { --bg: #4B4F5C; --ink: #ECE8F2; --dim: #B4B0C2; --link: #ECE8F2; --face: var(--mincho); }
#pluton, [data-stratum="pluton"]   { --bg: #16201F; --ink: #D6E6DF; --dim: #8EA69D; --link: #9FD8C6; --face: var(--mincho); }
#lowercrust, [data-stratum="lowercrust"] { --bg: #1E1416; --ink: #EEDFD8; --dim: #A8918A; --link: #F0A98C; --face: var(--mincho); } /* near the mantle: the dark warms */

/* each layer's own grain, so a contact changes the material, not only the paint. Two tiles, scaled:
   --tex the tile, --tex-size how coarse, --tex-o how strong. Grains coarsen with depth. */
#topsoil  { --tex: url(grain-specks.svg);  --tex-size: 160px; --tex-o: .22; } /* humus: fine */
#alluvium { --tex: url(grain-specks.svg);  --tex-size: 300px; --tex-o: .30; } /* sand */
#diluvium { --tex: url(grain-laminae.svg); --tex-size: 400px 200px; --tex-o: .22; } /* clay laid in thin beds */
#bedrock  { --tex: url(grain-laminae.svg); --tex-size: 800px 400px; --tex-o: .26; } /* rock in thick beds */
#pluton   { --tex: url(grain-specks.svg);  --tex-size: 640px; --tex-o: .30; } /* crystals */
#lowercrust { --tex: url(grain-specks.svg); --tex-size: 900px; --tex-o: .34; } /* gabbro: coarser crystals */

.layer {
  position: relative;
  min-height: 100svh;
  margin-top: -28px; /* room for the contact edge to bite into the layer above */
  padding: calc(14vh + 28px) calc(var(--column-w) + clamp(16px, 7vw, 120px)) 14vh clamp(16px, 9vw, 160px);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--face);
  container-type: inline-size; /* titles size against the writable width, not the viewport */
  isolation: isolate; /* the grain (z -1) sits over the layer's paint and under its words */
}
.layer::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tex) 0 0 / var(--tex-size); opacity: var(--tex-o);
}
.layer:first-child { margin-top: 0; padding-top: 14vh; }

.horizon { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; color: var(--dim); font: 400 15px/1.4 var(--plain); }
.horizon-name { color: var(--ink); font-weight: 600; }
.horizon-depth { font-variant-numeric: tabular-nums; }
/* the layer where the samples start says so once, across its top */
.sample-line { margin-top: 14px; color: var(--ink); font: 600 clamp(20px, 2.6vw, 30px)/1.4 var(--mincho); letter-spacing: 0.04em; line-break: strict; word-break: auto-phrase; text-wrap: balance; }

/* the Moho: the face under the last layer. The line is the face; under it, half a screen of undug
   rock — exactly as tall as the viewport middle needs to reach the face at full scroll (svh: never taller) */
.moho {
  position: relative; min-height: 50svh;
  padding: 14px calc(var(--column-w) + clamp(16px, 7vw, 120px)) 28px clamp(16px, 9vw, 160px);
  background: #0B1110;
  border-top: 1px solid #8EA69D;
  color: #D6E6DF; font: 400 15px/1.6 var(--plain);
}
.moho-label { display: flex; gap: 16px; align-items: baseline; color: #8EA69D; font-variant-numeric: tabular-nums; }
.moho-name { color: #D6E6DF; font-weight: 600; }
.moho-jp { margin-top: 10px; font: 400 17px/1.8 var(--mincho); line-break: strict; word-break: auto-phrase; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}