/* ============================================================
   RABBIT - the warren
   not a shaft. a network. the reader is a camera pulled through
   bent tunnels, past branch mouths, into chambers that loop back.

   the type law (locked, round 8): the hand headlines, the type
   reads, the mono holds the proof. marck script is the digger's
   ink hand; spectral is the field report; plex is the instrument.

   this build: a real material substrate (rock plates, a light
   cone, dust) painted on one canvas, under a plain readable
   document. depth is physical: instruments read true meters
   from the camera's vertical position (--dm is meters / 214).
   ============================================================ */

:root{
  /* the earth: soil. loam at the surface, umber below, bedrock at the
     bottom. warm browns only; the one cold thing down here is the lamp. */
  --ink:        oklch(0.245 0.030 58);
  --ink-deep:   oklch(0.135 0.020 52);
  --ink-raise:  oklch(0.300 0.034 60);
  --loam:       oklch(0.465 0.058 62);   /* the surface soil, top of the world */
  --bedrock:    oklch(0.160 0.010 255);  /* the grey stone floor, 214 m */

  /* the find: warm paper, recovered from the earth.
     lifted one step from round 7 for contrast over the rock. */
  --bone:       oklch(0.930 0.018 88);
  --bone-dim:   oklch(0.872 0.012 80);
  --bone-faint: oklch(0.735 0.016 76);

  /* the headlamp: a cold silver-blue beam */
  --beam:       oklch(0.900 0.032 235);
  --beam-hot:   oklch(0.970 0.016 230);

  /* the thread: red-lead, the scribe's correcting hand, the one hot thing */
  --thread:     oklch(0.655 0.200 30);
  --thread-deep:oklch(0.510 0.190 32);

  --hair:       oklch(0.90 0.03 78 / 0.13);
  --hair-strong:oklch(0.90 0.03 78 / 0.26);

  --hand: "Marck Script", "Marck Script Fallback", "Segoe Script", cursive;
  --text: "Spectral", "Spectral Fallback", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-soft: cubic-bezier(0.22,0.61,0.36,1);
  --ease-io: cubic-bezier(0.83,0,0.17,1);

  /* the camera bus: written once per frame by js */
  --t: 0;        /* progress along the warren path, 0..1 */
  --dm: 0;       /* true depth, meters / 214, 0..1 */
  --wx: 0px;     /* content translate x = centerX - cameraX */
  --wy: 0px;     /* content translate y = centerY - cameraY */
  --bend: 0;     /* path tangent lean at the camera, deg (unitless) */
}

*{ box-sizing:border-box; }
/* the page itself digs: loam at the top, umber through the middle,
   bedrock at the base. in warren mode the canvas paints the same ramp
   in true meters; this gradient carries flow mode, no-js, and print-off. */
html{ background:
  linear-gradient(180deg,
    oklch(0.560 0.062 66) 0%,
    oklch(0.470 0.056 62) 14%,
    oklch(0.372 0.046 58) 33%,
    oklch(0.288 0.036 55) 52%,
    oklch(0.212 0.026 52) 74%,
    oklch(0.176 0.018 54) 89%,
    oklch(0.235 0.012 250) 93.5%,
    var(--bedrock) 100%) no-repeat var(--bedrock); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html,body{ margin:0; }
body{
  background:transparent;
  font-family:var(--text);
  color:var(--bone-dim);
  font-size:clamp(16px,1.02vw + 12px,19px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--thread); color:oklch(0.98 0.01 85); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--beam); outline-offset:3px; border-radius:2px; }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:90; }
.skip:focus{ left:14px; top:14px; background:var(--ink-raise); color:var(--bone);
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em;
  padding:0.6rem 0.9rem; border:1px solid var(--hair-strong); }
.hp{ position:absolute; left:-9999px; top:-9999px; opacity:0; pointer-events:none; }

/* hide the OS cursor in warren mode: the headlamp is the cursor.
   exception (a11y): the native cursor returns over selectable text
   and form fields; the lamp ring coexists there. */
html.warren.lamp-cursor,
html.warren.lamp-cursor a,
html.warren.lamp-cursor button,
html.warren.lamp-cursor .node{ cursor:none; }
html.warren.lamp-cursor .specimen,
html.warren.lamp-cursor .specimen .cite,
html.warren.lamp-cursor input,
html.warren.lamp-cursor textarea{ cursor:auto; }
html.warren.lamp-cursor input[type="text"],
html.warren.lamp-cursor input[type="email"],
html.warren.lamp-cursor textarea{ cursor:text; }

/* ============================================================
   THE SCROLL TRACK - a tall empty element, its only job is scroll
   distance. height is set by js from the true path length.
   ============================================================ */
#track{ display:none; }
html.warren #track{ display:block; pointer-events:none; }

/* ============================================================
   THE SUBSTRATE CANVAS - every rock plate, the light cone, dust.
   fixed, full-viewport, painted by js. gated on .warren.
   ============================================================ */
#cave{ position:fixed; inset:0; z-index:-4; display:none; pointer-events:none; }
html.warren #cave{ display:block; }

/* daylight at the entrance, ember near bedrock, vignette. all three
   read true depth (--dm = meters/214), so the atmosphere is physical:
   daylight dies by ~60 m, the ember only lives near the bottom. */
#glow{ position:fixed; left:0; right:0; top:0; height:56vh; z-index:-3; pointer-events:none; display:none;
  background:radial-gradient(72% 118% at 50% -22%,
    oklch(0.90 0.06 88 / 0.24), oklch(0.86 0.06 84 / 0.06) 45%, transparent 74%);
  opacity:calc(1 - var(--dm) * 3.4); }
#ember{ position:fixed; left:0; right:0; bottom:0; height:44vh; z-index:-3; pointer-events:none; display:none;
  background:
    radial-gradient(64% 130% at 50% 118%, oklch(0.50 0.17 32 / 0.30), transparent 70%),
    linear-gradient(0deg, oklch(0.40 0.16 32 / 0.13), transparent 78%);
  mix-blend-mode:screen;
  opacity:calc(max(0, var(--dm) - 0.72) / 0.28 * 0.9); }
#vignette{ position:fixed; inset:0; z-index:6; pointer-events:none; display:none;
  background:radial-gradient(120% 96% at 50% 46%,
    transparent calc(78% - var(--dm) * 16%), oklch(0.06 0.014 50 / 0.5) 98%);
  opacity:calc(0.20 + var(--dm) * 0.5); }
html.warren #glow, html.warren #ember, html.warren #vignette{ display:block; }

/* the annunciator: names the gallery you are entering, unhurried. it lives
   in the top strip ABOVE the content frame: chambers settle top-in-view at
   ~8% viewport, so at 2% the pill can never sit on an eyebrow (audit v5 F6). */
#crossing{ position:fixed; left:50%; top:2%; z-index:22; pointer-events:none;
  transform:translateX(-50%) translateY(8px); opacity:0;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--beam); white-space:nowrap; text-shadow:0 0 18px oklch(0.86 0.06 235 / 0.5);
  /* the scrim pill: the annunciator crosses mid-glide content, so it carries
     its own patch of dark (audit v4 F2-6) */
  padding:0.5rem 1.1rem 0.44rem 1.35rem; border-radius:999px;
  background:oklch(0.10 0.016 52 / 0.72); border:1px solid var(--hair);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
#crossing.flash{ animation:crossing 3.2s var(--ease) both; }
@keyframes crossing{
  0%{ opacity:0; transform:translateX(-50%) translateY(10px); }
  12%{ opacity:0.92; transform:translateX(-50%) translateY(0); }
  72%{ opacity:0.92; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-8px); } }

/* ============================================================
   THE OVERTURE - map self-draws while depth boots to the surface.
   only shown in warren mode; removed from the dom after it runs.
   ============================================================ */
#overture{ position:fixed; inset:0; z-index:60; display:none;
  background:radial-gradient(120% 100% at 50% 40%, oklch(0.175 0.024 56), var(--ink-deep) 80%);
  align-items:center; justify-content:center;
  transition:opacity 0.8s var(--ease); }
html.warren.booting #overture{ display:flex; }
#overture.done{ opacity:0; pointer-events:none; }
.ov-inner{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.ov-map{ width:116px; height:auto; overflow:visible; }
.ov-edge, .ov-loop{ fill:none; stroke:var(--beam); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.ov-loop{ stroke:var(--thread); stroke-width:1.3; opacity:0.85; }
.ov-node{ fill:var(--beam); opacity:0; }
.ov-read{ font-family:var(--mono); color:var(--bone-faint); font-size:0.84rem;
  letter-spacing:0.1em; display:flex; align-items:baseline; gap:0.5em; }
.ov-read b{ color:var(--beam); font-size:1.5rem; font-weight:500; font-variant-numeric:tabular-nums; }
#ovskip{ position:fixed; bottom:24px; right:24px; background:none; border:0;
  color:var(--bone-faint); font-family:var(--mono); font-size:0.74rem; letter-spacing:0.16em;
  text-transform:uppercase; cursor:pointer; padding:0.6rem; opacity:0.75;
  transition:opacity 0.3s var(--ease); }
#ovskip:hover{ opacity:1; color:var(--beam); }

/* ============================================================
   THE INSTRUMENT - gauge (top-right) + warren map (bottom-left).
   type floor raised to 10px+: an instrument you cannot read is
   not an instrument.
   ============================================================ */
/* above ground the instruments sleep: a compass has no business in a meadow */
html.warren #gauge, html.warren #map{ transition:opacity 0.7s var(--ease); }
html.warren.aboveground #gauge, html.warren.aboveground #map{ opacity:0; pointer-events:none; }
#gauge{
  position:fixed; top:20px; right:20px; z-index:20;
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  color:var(--bone-faint); text-align:right; user-select:none;
  display:flex; gap:12px; align-items:stretch;
}
#gauge .read{ display:flex; flex-direction:column; gap:3px; padding-top:1px; }
#gauge .depth{ color:var(--beam); font-size:13.5px; letter-spacing:0.02em; }
#gauge .depth b{ font-weight:600; font-variant-numeric:tabular-nums; }
#gauge .cham{ text-transform:uppercase; letter-spacing:0.16em; font-size:10px; }
#gauge .conn{ color:var(--bone-faint); font-size:10px; letter-spacing:0.1em; }
#gauge .conn b{ color:var(--thread); font-weight:600; }
#sound{ order:-1; align-self:flex-start; width:28px; height:28px; margin-top:-2px;
  background:oklch(0.21 0.026 56 / 0.60); border:1px solid var(--hair-strong);
  color:var(--bone-faint); display:grid; place-items:center; cursor:pointer;
  transition:border-color 0.3s var(--ease), color 0.3s var(--ease); }
#sound:hover{ border-color:var(--beam); color:var(--beam); }
#sound .eq{ display:none; align-items:flex-end; gap:2px; height:12px; }
#sound .eq i{ width:2.5px; background:currentColor; border-radius:1px;
  animation:eq 1.05s var(--ease-soft) infinite; animation-play-state:paused; height:5px; }
#sound.live .eq i{ animation-play-state:running; }
#sound .eq i:nth-child(1){ animation-delay:0s; }
#sound .eq i:nth-child(2){ animation-delay:0.22s; height:9px; }
#sound .eq i:nth-child(3){ animation-delay:0.44s; height:6px; }
@keyframes eq{ 0%,100%{ transform:scaleY(0.55); } 45%{ transform:scaleY(1.35); } }
#sound.on .eq{ display:flex; } #sound.on .ic-off{ display:none; }
#sound.on{ color:var(--beam); border-color:oklch(0.90 0.03 235 / 0.4); }
#core{ width:9px; align-self:stretch; min-height:64px; border:1px solid var(--hair-strong);
  position:relative; overflow:hidden; background:oklch(0.15 0.020 52 / 0.6); }
/* neutral progress (path traveled), never a pretend soil column: the ramp
   read "bedrock" at the 152 m burrow (audit v4 F3-9) */
#core .fill{ position:absolute; left:0; right:0; top:0; height:calc(var(--t) * 100%);
  background:oklch(0.62 0.035 72 / 0.55); }
#core .head{ position:absolute; left:-2px; right:-2px; top:calc(var(--t) * 100%);
  height:1px; background:var(--thread); box-shadow:0 0 6px 1px var(--thread); }

/* the warren map - two drawings of one network.
   .mini: the compact card (flow mode, small screens).
   .rail: the full network standing along the left edge (wide warren mode).
   the red thread is laid BEHIND the reader: js extrudes each edge with
   stroke-dashoffset from the camera's true position along that segment. */
#map{ position:fixed; left:20px; bottom:18px; z-index:20; width:168px;
  font-family:var(--mono); color:var(--bone-faint); user-select:none;
  transition:transform 0.5s var(--ease); transform-origin:bottom left; }
#map:hover{ transform:scale(1.14); }
/* without js the nodes are dead circles and the gauge is frozen: hide both
   rather than announce instruments that lie (audit v4 F4-1) */
html:not(.js) #map, html:not(.js) #gauge{ display:none; }
/* flow mode: the card collapses behind a small toggle so it can never sit on
   the CTA, the readout, or a section's left column (audit v4 F0-1/F3-7) */
#maptoggle{ display:none; align-items:center; gap:0.5em; background:oklch(0.20 0.026 56 / 0.92);
  border:1px solid var(--hair); color:var(--bone-faint); font-family:var(--mono);
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer;
  padding:0.55rem 0.8rem; border-radius:3px; }
#maptoggle svg{ color:var(--thread); }
#maptoggle:hover{ color:var(--beam); border-color:var(--hair-strong); }
html:not(.warren).js #maptoggle{ display:inline-flex; }
html:not(.warren) #map.collapsed{ padding:0; background:none; border:0; box-shadow:none; }
html:not(.warren) #map.collapsed #mapbody{ display:none; }
#map .node .hit{ fill:transparent; stroke:none; }
/* flow mode scrolls a document under the fixed mini map, so it gets its own
   card of soil to sit on. warren mode keeps it bare over open canvas. */
html:not(.warren) #map{ padding:8px 10px; background:oklch(0.20 0.026 56 / 0.92);
  border:1px solid var(--hair); border-radius:3px;
  box-shadow:0 18px 44px -30px oklch(0.06 0.014 50 / 0.9); }
#map .rail{ display:none; }
@media (min-width:1360px){
  html.warren #map{ left:20px; top:50%; bottom:auto; width:158px;
    transform:translateY(-50%); transform-origin:left center; }
  html.warren #map:hover{ transform:translateY(-50%); }
  html.warren #map .mini{ display:none; }
  html.warren #map .rail{ display:block; width:100%; height:auto; max-height:min(84vh,700px); overflow:visible; }
  html.warren #map .cap{ text-align:center; margin-left:0; }
}
#map .ndep{ font-size:10px; letter-spacing:0.05em; fill:var(--bone-faint); opacity:0.7;
  font-variant-numeric:tabular-nums; }
#map .rail .nlbl{ font-size:11px; }
#map .cap{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--bone-faint);
  opacity:0.75; margin:0 0 6px 2px; }
#map svg{ width:100%; height:auto; display:block; overflow:visible; }
#map .edge{ fill:none; stroke:var(--hair-strong); stroke-width:1.4; }
#map .edge.on{ filter:drop-shadow(0 0 3px oklch(0.655 0.20 30 / 0.5)); }
#map .thread-edge{ fill:none; stroke:var(--thread); stroke-width:1.4; stroke-linecap:round; }
#map .branchedge{ fill:none; stroke:var(--hair); stroke-width:1.1; stroke-dasharray:2 3; }
#map .loop{ fill:none; stroke:oklch(0.60 0.035 72 / 0.30); stroke-width:1.1; stroke-dasharray:3 3; transition:stroke 0.8s var(--ease); }
#map .loop.on{ stroke:var(--thread); stroke-dasharray:3 3; }
#map .node{ cursor:pointer; }
#map .node circle{ fill:var(--ink-raise); stroke:var(--hair-strong); stroke-width:1.2;
  transition:stroke 0.4s var(--ease), fill 0.4s var(--ease); }
#map .node:hover circle, #map .node:focus-visible circle{ stroke:var(--beam); }
#map .node.passed circle{ fill:var(--thread-deep); stroke:var(--thread-deep); }
#map .node.here circle{ fill:var(--thread); stroke:var(--thread); }
#map .node .nlbl{ font-size:10.5px; letter-spacing:0.06em; fill:var(--bone-faint); opacity:0;
  transition:opacity 0.3s var(--ease); pointer-events:none; }
#map .node:hover .nlbl, #map .node:focus-visible .nlbl, #map .node.here .nlbl{ opacity:1; }
#map .home circle{ fill:none; }
#map .home .ring{ fill:none; stroke:var(--hair-strong); stroke-width:1; }
#map .home .dot{ fill:var(--beam); }
#map .home.here .dot{ fill:var(--thread); }
#map .lamp{ fill:var(--beam); filter:drop-shadow(0 0 4px oklch(0.90 0.05 235 / 0.9)); }
#map .lamphalo{ fill:oklch(0.90 0.05 235 / 0.18); }

/* ============================================================
   QUINZEL - the field guide made visible. she keeps to the low
   band of the screen so she never sits on the words: parked, she
   waits in the lower-right; digging, she scoots along the bottom
   toward wherever the tunnel is going, always feet-down (a body
   flip + a clamped lean instead of full rotation, so she can
   never travel upside-down or backwards).
   ============================================================ */
#quin{ position:fixed; left:0; top:0; z-index:31; width:92px; height:80px; pointer-events:none;
  transform:translate(var(--qx,-220px),var(--qy,-220px)) rotate(var(--qr,0deg)) scaleX(var(--qf,1)) scale(calc(var(--qs,1) * var(--qbase,1)));
  transform-origin:50% 62%; will-change:transform; opacity:var(--qo,0);
  transition:opacity 0.5s var(--ease);
  filter:drop-shadow(0 8px 16px oklch(0 0 0 / 0.5)); }
/* touch layout (audit v5 P1-7): smaller in the corner on coarse pointers,
   gone entirely on phones - she must never sit on the copy. */
@media (pointer: coarse){ #quin{ --qbase:0.68; } }
@media (max-width: 700px){ #quin{ display:none !important; } }
#quin svg{ display:block; width:100%; height:100%; overflow:visible; }
#quin .q-glow{ opacity:0; transition:opacity 0.8s var(--ease); }
html.warren #quin .q-glow{ opacity:1; }
/* when she is the cursor, the headlamp is bright and always lit */
html.lamp-cursor #quin .q-glow{ opacity:1; }
html.lamp-cursor #quin{ z-index:31; filter:drop-shadow(0 6px 14px oklch(0 0 0 / 0.55)); }
/* the rabbit now IS the cursor; the old DOM ring + dot are redundant
   (her headlamp replaces them). only the depth readout stays. */
html.lamp-cursor #lampcursor .ring,
html.lamp-cursor #lampcursor .dot{ display:none; }
#quin .q-earL, #quin .q-earR{ transform-box:fill-box; transform-origin:50% 94%;
  transition:transform 0.45s var(--ease); }
#quin.dig .q-earL{ transform:rotate(-26deg); }
#quin.dig .q-earR{ transform:rotate(-18deg); }
#quin.twitch .q-earR{ animation:earTwitch 0.55s var(--ease); }
@keyframes earTwitch{ 0%,100%{ transform:rotate(0deg);} 35%{ transform:rotate(-22deg);} 70%{ transform:rotate(8deg);} }
#quin .q-eye-open{ transition:transform 0.12s linear; transform-origin:center; }
#quin.blink .q-eye-open{ transform:scaleY(0.12); }
#quin .q-eye-dig{ opacity:0; }
#quin.dig .q-eye-dig{ opacity:1; }
#quin.dig .q-eye-open{ opacity:0; }
#quin .q-legs rect{ transform-box:fill-box; transform-origin:50% 12%; }
#quin.dig .q-legA{ animation:scrabA 0.26s linear infinite; }
#quin.dig .q-legB{ animation:scrabB 0.26s linear infinite; }
@keyframes scrabA{ 0%,100%{ transform:rotate(18deg);} 50%{ transform:rotate(-18deg);} }
@keyframes scrabB{ 0%,100%{ transform:rotate(-18deg);} 50%{ transform:rotate(18deg);} }
#quin .q-tail{ transform-box:fill-box; transform-origin:80% 50%; }
#quin.dig .q-tail{ animation:tailWag 0.34s linear infinite; }
@keyframes tailWag{ 0%,100%{ transform:rotate(8deg);} 50%{ transform:rotate(-8deg);} }
#quin .q-breathe{ animation:breathe 3.2s var(--ease-soft) infinite; transform-box:fill-box; transform-origin:50% 100%; }
#quin.dig .q-breathe{ animation:none; }
@keyframes breathe{ 0%,100%{ transform:scaleY(1);} 50%{ transform:scaleY(1.026);} }
@media (prefers-reduced-motion: reduce){ #quin{ display:none !important; } }
/* the 92px body never squats on the words: over any text block she thins
   out and shrinks until the pointer leaves (audit v4 F2-7) */
html.lamp-cursor #quin.overtext{ opacity:calc(var(--qo,1) * 0.38); }

/* ============================================================
   THE GRAIN - one full-viewport film grain over the whole site
   (audit v5 P1-5.3): a tileable 128px noise plate at whisper
   opacity that unifies the vector art, the canvas soil, and the
   type into one photographed surface. static, cheap, and the
   single biggest "not flat digital" fix on the page.
   ============================================================ */
#grain{ position:fixed; inset:0; z-index:52; pointer-events:none;
  background:url("../assets/grain.png") repeat; background-size:128px 128px;
  opacity:0.045; }

/* ============================================================
   THE LAMP CURSOR - the headlamp replaces the OS cursor.
   an instant-follow ring + depth readout; the big light pool is
   painted on the canvas and eases behind (that lag is the
   signature). over interactives the pool tightens and brightens
   (.aim) instead of pulling elements around: a lamp focusing,
   not a magnet. it is the diegetic replacement for magnetism.
   ============================================================ */
#lampcursor{ position:fixed; left:0; top:0; z-index:30; pointer-events:none;
  transform:translate(var(--lx,-100px), var(--ly,-100px)); transition:opacity 0.3s var(--ease); }
#lampcursor .ring{ position:absolute; left:-13px; top:-13px; width:26px; height:26px;
  border:1px solid oklch(0.90 0.04 235 / 0.7); border-radius:50%;
  box-shadow:0 0 12px oklch(0.86 0.05 235 / 0.4), inset 0 0 6px oklch(0.86 0.05 235 / 0.3);
  transition:transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease); }
#lampcursor .dot{ position:absolute; left:-2px; top:-2px; width:4px; height:4px; border-radius:50%;
  background:var(--beam-hot); box-shadow:0 0 8px 2px oklch(0.90 0.06 235 / 0.8); }
#lampcursor .rd{ position:absolute; left:18px; top:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:0.12em; color:oklch(0.86 0.05 235 / 0.8); white-space:nowrap; font-variant-numeric:tabular-nums; }
#lampcursor.aim .ring{ transform:scale(0.72); border-color:var(--beam-hot);
  box-shadow:0 0 18px oklch(0.90 0.06 235 / 0.6), inset 0 0 8px oklch(0.90 0.06 235 / 0.45); }
#lampcursor.press .ring{ transform:scale(0.6); border-color:var(--thread); }

/* ============================================================
   CONTENT - one copy, two modes.
   default: normal vertical flow, fully readable (safe-failure baseline).
   warren: main goes fixed and rides the camera; chambers at world coords.
   every chamber carries a soft dark scrim behind its words so the
   copy never fights the rock for contrast.
   ============================================================ */
main{ position:relative; z-index:5; }
.chamber{ position:relative; padding-block:clamp(9rem,20vh,15rem); padding-inline:clamp(1.4rem,7vw,3rem); }
.wrap{ max-width:78rem; margin:0 auto; }
.col{ max-width:46rem; }

html.warren main{ position:fixed; inset:0; z-index:5; width:100vw; height:100dvh;
  /* skew FIRST in the list so it acts on screen coordinates after the
     translation; the old order sheared far chambers sideways by hundreds of
     px at settle (world y is huge before the translate) */
  transform:skewX(calc(var(--bend) * -0.04deg)) translate3d(var(--wx), var(--wy), 0);
  will-change:transform; overflow:visible; padding:0; pointer-events:none; }
html.warren .chamber{ position:absolute; left:0; top:0; padding:0;
  width:var(--cw, 52rem); max-width:none;
  transform:translate(calc(var(--wpx) * 1px - 50%), calc(var(--wpy) * 1px - 50%));
  pointer-events:auto; }
html.warren .chamber > *{ pointer-events:auto; }
html.warren .chamber .wrap{ position:relative; }
html.warren .chamber .wrap::before{ content:""; position:absolute; inset:-3.5rem -4rem; z-index:-1;
  pointer-events:none; border-radius:2.5rem;
  background:radial-gradient(ellipse at 50% 45%,
    oklch(0.105 0.020 50 / 0.64), oklch(0.105 0.020 50 / 0.34) 56%, transparent 80%); }
/* the surface is a daylight poster in dark ink: it carries NO scrim panel
   (round 12 - this generic warren scrim was the "dark panel" over the hero) */
html.warren #surface .wrap::before{ display:none; }
html.warren .chamber p, html.warren .chamber h1, html.warren .chamber h2,
html.warren .chamber h3, html.warren .chamber .eyebrow{
  text-shadow:0 1px 14px oklch(0.06 0.014 50 / 0.58); }
html.warren .specimen p, html.warren .specimen h3{ text-shadow:none; }

.eyebrow{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--bone-faint); display:flex; align-items:center; gap:0.8em; margin:0 0 1.6rem; }
.eyebrow .n{ color:var(--thread); }
.eyebrow:before{ content:""; width:26px; height:1px; background:var(--hair-strong); }

/* the hand headlines; the type reads. h3 belongs to the reading layer
   so claims and titles keep their gravitas. */
h1,h2{ font-family:var(--hand); font-weight:400; margin:0; color:var(--bone); text-wrap:balance; }
h1{ font-size:clamp(3.4rem,10.5vw,8.8rem); line-height:1.08; letter-spacing:0.004em; }
h2{ font-size:clamp(2.5rem,5.6vw,4.8rem); line-height:1.14; letter-spacing:0.006em; }
h3{ font-family:var(--text); font-weight:600; margin:0; color:var(--bone);
  font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.22; text-wrap:balance; }

/* lamp-sweep reveal: a band of light passes across the headline as the camera
   arrives at its chamber. driven by --sweep (0%..130%) from js. warren only. */
html.warren h2.sweeping, html.warren h1.sweeping{
  -webkit-mask-image:linear-gradient(100deg, #000 calc(var(--sweep,0%) - 40%), #000 calc(var(--sweep,0%) - 12%), rgba(0,0,0,0.35) var(--sweep,0%), #000 calc(var(--sweep,0%) + 25%));
  mask-image:linear-gradient(100deg, #000 calc(var(--sweep,0%) - 40%), #000 calc(var(--sweep,0%) - 12%), rgba(0,0,0,0.35) var(--sweep,0%), #000 calc(var(--sweep,0%) + 25%)); }

p{ margin:0 0 1.2rem; text-wrap:pretty; }
.lead{ font-size:clamp(1.14rem,1.55vw,1.38rem); color:var(--bone-dim); line-height:1.62; }
em{ font-style:italic; }
strong{ font-weight:600; color:var(--bone); }

/* entry reveal - flow mode only. a committed excavation from below:
   the content climbs out of a deep clip, not a polite 20px fade.
   js-gated. warren mode reveals via the camera. */
.js .rise{ opacity:0; transform:translateY(26px);
  clip-path:inset(0 0 62% 0);
  transition:opacity 0.95s var(--ease), transform 0.95s var(--ease), clip-path 1.05s var(--ease); }
.js .rise.in{ opacity:1; transform:none; clip-path:inset(0 0 0 0);
  animation:unclip 0s 1.15s forwards; }
@keyframes unclip{ to{ clip-path:none; } }
.d1{ transition-delay:0.08s } .d2{ transition-delay:0.16s } .d3{ transition-delay:0.24s }
.d4{ transition-delay:0.32s }

/* ============ surface / hero ============ */
/* THE CLEARING - the full-viewport above-ground stage. five depth layers
   painted edge to edge; the burrow mouth sits at (50%, 80%) of the frame and
   every layer's transform-origin is that mouth, so the scroll-driven dive
   (js writes the layer transforms) reads as falling INTO the hole, layers
   parting at different rates, daylight dying as the dark floods in.
   it is fixed (it lives outside main, so the warren camera transform never
   traps it) and simply absolute at the top of the document without js. */
#clearing{ position:fixed; inset:0; height:100dvh; z-index:1; overflow:hidden;
  pointer-events:none; background:oklch(0.90 0.05 90); }
html:not(.js) #clearing{ position:absolute; }
.cl-layer{ position:absolute; inset:0; transform-origin:50% 80%; will-change:transform; }
.cl-layer svg{ display:block; width:100%; height:100%; }
.cl-rays{ mix-blend-mode:screen; }
/* the ray drift animates the LAYER's opacity (composited), never an inner
   svg group (which would repaint the whole full-viewport svg per frame) */
.cl-rays{ animation:raydrift 12s var(--ease-soft) infinite alternate; }
@keyframes raydrift{ 0%{ opacity:0.72; } 100%{ opacity:1; } }
/* pollen: seven html dots on their own composited layer. two alternating
   paths, staggered phases, so the air reads alive without a repaint. */
.cl-motes{ pointer-events:none; }
.cl-motes i{ position:absolute; border-radius:50%; background:#fff3c8;
  box-shadow:0 0 6px 1px rgba(255,243,200,0.55);
  opacity:0; will-change:transform,opacity; animation:pollen 10s linear infinite; }
.cl-motes i:nth-child(2n){ animation-name:pollen2; animation-duration:13s; }
.cl-motes i:nth-child(1){ animation-delay:0s; }
.cl-motes i:nth-child(2){ animation-delay:-3s; }
.cl-motes i:nth-child(3){ animation-delay:-6s; }
.cl-motes i:nth-child(4){ animation-delay:-8.5s; }
.cl-motes i:nth-child(5){ animation-delay:-1.5s; }
.cl-motes i:nth-child(6){ animation-delay:-10s; }
.cl-motes i:nth-child(7){ animation-delay:-4.5s; }
@keyframes pollen{
  0%{ transform:translate(0,0); opacity:0; }
  12%{ opacity:0.75; }
  70%{ opacity:0.55; }
  100%{ transform:translate(34px,-52px); opacity:0; } }
@keyframes pollen2{
  0%{ transform:translate(0,0); opacity:0; }
  15%{ opacity:0.6; }
  70%{ opacity:0.45; }
  100%{ transform:translate(-42px,-38px); opacity:0; } }
/* rim-light ring: a warm halo that sweeps past as the frame goes dark */
.cl-rim{ position:absolute; left:50%; top:80%; width:130vmax; height:130vmax;
  transform:translate(-50%,-50%) scale(var(--rim-s,0.3)); opacity:var(--rim-o,0);
  border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(circle, transparent 30%, oklch(0.82 0.10 78 / 0.55) 42%,
    oklch(0.62 0.09 60 / 0.25) 50%, transparent 62%); }
/* the dark of the mouth flooding the frame */
.cl-dark{ position:absolute; inset:0; opacity:var(--dk,0);
  background:radial-gradient(120% 100% at 50% 80%, #050301 62%, #0b0704 100%); }
@media (prefers-reduced-motion: reduce){
  .cl-rays{ animation:none; }
  .cl-motes i{ animation:none; opacity:0.5; }
  .cl-layer{ will-change:auto; }
}

/* the surface chamber carries only the words, set low-left over the scene
   so the burrow mouth stays visible at the compositional centre. column
   flow: the round-9 build left this as a flex ROW, which collapsed the
   whole hero to a sliver on every phone (audit v4 F0-1). */
#surface{ min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(3rem,7vh,5rem) clamp(4rem,9vh,6rem); }
#surface .wrap{ width:100%; max-width:none; margin:0; position:relative; }
/* no scrim panel over the scene (round 12): above ground the ink is DARK,
   like the brandline - a daylight poster is written in ink, not projected in
   white. this beats any scrim: the scene stays fully visible and the words
   hold against sky, sun, and meadow alike. */
#surface .hero-h{ color:oklch(0.27 0.045 55);
  text-shadow:0 1px 0 oklch(0.97 0.03 90 / 0.4), 0 2px 16px oklch(0.95 0.04 90 / 0.3); }
#surface .lead{ color:oklch(0.225 0.035 55);
  text-shadow:0 1px 0 oklch(0.97 0.03 90 / 0.55), 0 0 12px oklch(0.95 0.04 90 / 0.45); }
/* the flux word writes in the same dark ink; its wet edge reads warm sepia */
#surface .hw.flux .hw-ink{ color:inherit; }
#surface .hw.flux .hw-ink.wet{ color:oklch(0.42 0.10 40); text-shadow:none; }
#surface .nib .nib-body{ fill:oklch(0.30 0.045 55); }
#surface .nib .nib-slit{ stroke:oklch(0.92 0.02 88); }
#surface .nib .nib-eye{ fill:oklch(0.92 0.02 88); }
/* the brandline reads against open sky, not against the scrim's heart */
#surface .brandline{ color:oklch(0.34 0.045 62 / 0.95); text-shadow:0 1px 10px oklch(0.95 0.03 90 / 0.45); }
#surface .brandline b{ color:oklch(0.28 0.045 60); }
#surface .hero-h{ font-size:clamp(3rem,7.6vw,6.6rem); }
#surface .subhero{ max-width:33rem; }
html.warren #surface{ min-height:0; display:block; --cw:min(94vw,80rem); padding:0; }
html.warren #surface .wrap{ width:min(94vw,80rem); }
.brandline{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--bone-faint); margin-bottom:2.4rem; }
.brandline b{ color:var(--bone-dim); font-weight:500; }

/* the handwriting engine: each word is inked behind a traveling nib.
   the mask edge is the pen's wet frontier; --w runs 0..116 from js.
   the slack (padding/margins) is generous on purpose: marck script
   throws real ascender loops and exit strokes, and nothing the pen
   writes may ever be clipped by an invisible box.
   no js = no mask = the whole line simply reads. */
.hero-h{ position:relative; overflow:visible; }
/* inline slack tightened to a hairline (audit v5 P1-5): the old 0.16em pad
   spaced "dig  past" visibly at hero sizes. vertical slack stays generous
   for marck script's ascender loops. */
.hw{ display:inline-block; position:relative; overflow:visible;
  padding:0.12em 0.05em 0.30em; margin:-0.12em -0.04em -0.30em; }
.hw-ink{ display:inline-block; }
.js .hw-ink{ --w:0;
  -webkit-mask-image:linear-gradient(103deg,#000 calc(var(--w) * 1% - 18%),transparent calc(var(--w) * 1% + 4%));
  mask-image:linear-gradient(103deg,#000 calc(var(--w) * 1% - 18%),transparent calc(var(--w) * 1% + 4%)); }
.js .hw-ink.done{ -webkit-mask-image:none; mask-image:none; }
.hw.flux .hw-ink{ color:var(--bone); }
.hw.flux .hw-ink.wet{ color:var(--beam-hot); text-shadow:0 0 22px oklch(0.90 0.05 235 / 0.35); }
.hw.flux .hw-ink{ transition:color 0.5s var(--ease), text-shadow 0.5s var(--ease), opacity 0.34s var(--ease); }
.flux .strike{ position:absolute; left:2%; right:4%; top:46%; height:0.42em; transform:translateY(-50%);
  overflow:visible; pointer-events:none; opacity:0; transition:opacity 0.34s var(--ease); width:94%; }
.flux .strike path{ fill:none; stroke:var(--thread); stroke-width:4; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  filter:drop-shadow(0 0 7px oklch(0.655 0.20 30 / 0.55)); }
.flux.struck .strike{ opacity:1; }
.flux.fading .hw-ink, .flux.fading .strike{ opacity:0; }
.nib{ position:absolute; left:0; top:0; z-index:3; pointer-events:none; opacity:0;
  transform:translate(var(--nx,0px),var(--ny,0px)) rotate(34deg);
  transition:opacity 0.28s var(--ease); will-change:transform; }
.nib.on{ opacity:1; }
.nib svg{ display:block; filter:drop-shadow(0 4px 10px oklch(0 0 0 / 0.6)); }
.nib .nib-body{ fill:var(--bone); transition:fill 0.25s var(--ease); }
.nib .nib-slit{ stroke:var(--ink-deep); stroke-width:1.2; }
.nib .nib-eye{ fill:var(--ink-deep); }
.nib.red .nib-body{ fill:var(--thread); }

#surface .readout, #surface .descend{ color:oklch(0.30 0.04 55); text-shadow:none; }
#surface .readout b{ color:oklch(0.30 0.07 250); }
#surface .descend .arrow{ border-color:oklch(0.32 0.05 55 / 0.55); color:oklch(0.28 0.05 55); }
#surface .descend:hover .arrow{ border-color:oklch(0.28 0.05 55); }
.subhero{ max-width:38rem; margin-top:2rem; }
.readout{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.08em; color:var(--bone-faint);
  margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:0.4rem 1.8rem; align-items:center; }
.readout b{ color:var(--beam); font-weight:500; }
.descend{ margin-top:3rem; display:inline-flex; align-items:center; gap:0.9rem;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bone-dim); padding:0.85rem 0; cursor:pointer; background:none; border:0; }
.descend .arrow{ width:34px; height:34px; border:1px solid var(--hair-strong); border-radius:50%;
  display:grid; place-items:center; color:var(--beam);
  transition:transform 0.6s var(--ease), border-color 0.6s var(--ease); }
.descend:hover .arrow{ transform:translateY(4px); border-color:var(--beam); }
.descend .arrow svg{ animation:bob 2.4s var(--ease-soft) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(-1px)} 50%{transform:translateY(3px)} }

/* ============ why / formats ============ */
html.warren #why{ --cw:min(90vw,54rem); }
.formats{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(1.6rem,4vw,4rem); margin-top:3.4rem; }
.format{ border-top:1px solid var(--hair-strong); padding-top:1.4rem; }
.format.carrot{ margin-top:1.6rem; }
.format .kick{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  margin-bottom:1rem; display:flex; align-items:center; gap:0.6em; }
.format.trail .kick{ color:var(--beam); }
.format.carrot .kick{ color:var(--thread); }
.format .kick .tick{ width:20px; height:1px; }
.format.trail .kick .tick{ background:var(--beam); }
.format.carrot .kick .tick{ background:var(--thread); }
.format h3{ margin-bottom:0.7rem; }
.format.carrot h3{ font-style:italic; font-weight:500; }
.format p{ font-size:1rem; color:var(--bone-dim); margin:0; }

/* ============ the seam - four panels, what a dig yields ============
   graphite panels split by hairlines; each carries a monochrome
   point-field graphic painted once by js, a title, one line, and
   a bordered way down. the panels are the site's only grid, and
   the graphics are the only place the canvas language leaves the
   cave: dots, threads, and one warm carrot. */
html.warren #seam{ --cw:min(84vw,80rem); }
.seam-chamber .wrap{ max-width:84rem; }
.panels{ margin-top:3.2rem; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--hair); border:1px solid var(--hair); }
.panel{ background:oklch(0.130 0.017 53 / 0.90); padding:1.5rem 1.5rem 1.7rem;
  display:flex; flex-direction:column; min-width:0; }
.pgfx{ width:100%; aspect-ratio:1/1.02; display:block; margin-bottom:1.35rem; }
.panel h3{ font-size:1.16rem; margin-bottom:0.55rem; }
.pdesc{ font-size:0.95rem; line-height:1.6; color:var(--bone-dim); margin:0 0 1.5rem; flex:1; }
.pgo{ align-self:flex-start; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--bone-dim); border:1px solid var(--hair-strong);
  padding:0.6rem 1.2rem; transition:color 0.4s var(--ease), border-color 0.4s var(--ease),
  background-color 0.4s var(--ease); }
.pgo:hover, .pgo:focus-visible{ color:var(--beam); border-color:var(--beam);
  background:oklch(0.90 0.03 235 / 0.06); }

/* ============ method / descent ladder (sequenced) ============ */
html.warren #method{ --cw:min(90vw,58rem); }
.ladder{ margin-top:3rem; }
.rung{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:baseline;
  padding:1.5rem 0; border-top:1px solid var(--hair); }
.rung:last-child{ border-bottom:1px solid var(--hair); }
.rung .meta{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--bone-faint);
  white-space:nowrap; padding-top:0.5rem; display:flex; flex-direction:column; gap:0.2rem; }
.rung .meta .num{ color:var(--thread); font-size:0.95rem; }
.rung .body h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin-bottom:0.5rem; }
.rung .body p{ font-size:1rem; color:var(--bone-dim); margin:0; max-width:44rem; }
/* in warren mode the rungs sequence past the camera, each earning
   real scroll (the window is widened by the path itself) */
html.warren .rung{ opacity:0.25; transform:translateY(8px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.warren .rung.lit{ opacity:1; transform:none; }
html.warren .rung.lit .num{ text-shadow:0 0 12px oklch(0.655 0.20 30 / 0.7); }

/* ============ the find ============ */
html.warren #bedrock{ --cw:min(84vw,76rem); }
#bedrock{ padding-bottom:clamp(6rem,14vh,10rem); }
/* the specimen and the carrot letter share a row in warren mode, so the
   letter is readable at settle instead of buried below the fold (F3-3) */
html.warren #bedrock .col{ max-width:none; }
html.warren #bedrock .yield{ display:grid; grid-template-columns:minmax(0,48rem) minmax(15rem,1fr);
  gap:clamp(1.6rem,3vw,3rem); align-items:start; }
html.warren #bedrock .letter{ margin-top:3rem; }
.specimen{ position:relative; margin-top:3rem; max-width:52rem;
  background-color:oklch(0.90 0.02 88);
  background-image:url("../assets/plates/paper.webp");
  background-size:cover;
  color:oklch(0.24 0.024 60); padding:clamp(2rem,5vw,3.6rem);
  border:1px solid oklch(0.55 0.028 62 / 0.4);
  box-shadow:0 1px 0 oklch(1 0 0 / 0.4) inset, 0 40px 90px -50px oklch(0 0 0 / 0.9),
    0 0 120px -20px oklch(0.86 0.06 235 / 0.30); }
.specimen.surfaced{ transform:rotate(-0.35deg); transition:transform 1.2s var(--ease-soft); }
.specimen > *{ position:relative; }
.specimen .dig{ position:absolute; inset:-1px; overflow:hidden; pointer-events:none; display:none; z-index:5; }
.js.warren .specimen .dig{ display:block; }
.specimen .dirt{ position:absolute; inset:0 0 -28px 0; will-change:transform;
  background-image:
    repeating-linear-gradient(180deg, transparent 0, transparent 26px, oklch(0.82 0.05 72 / 0.06) 26px, oklch(0.82 0.05 72 / 0.06) 27px),
    linear-gradient(180deg, oklch(0.300 0.040 55), oklch(0.190 0.026 52) 58%, oklch(0.125 0.018 50));
  clip-path:polygon(0% 0%, 100% 0%, 100% calc(100% - 22px), 92% calc(100% - 6px), 81% calc(100% - 18px),
    70% calc(100% - 2px), 58% calc(100% - 16px), 47% calc(100% - 5px), 36% calc(100% - 19px),
    24% calc(100% - 3px), 13% calc(100% - 15px), 5% calc(100% - 7px), 0% calc(100% - 20px)); }
.specimen .dirt .dl{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--bone-faint); white-space:nowrap; }
.specimen .dirt .dl b{ color:var(--thread); font-weight:500; }
.specimen .kick{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--thread-deep); display:flex; align-items:center; gap:0.8em; margin-bottom:1.4rem; }
.specimen .kick:after{ content:""; flex:1; height:1px; background:oklch(0.55 0.028 62 / 0.35); }
.specimen h3{ color:oklch(0.20 0.024 60); font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.14;
  letter-spacing:0.002em; margin-bottom:1.4rem; font-weight:600; }
.claim{ font-family:var(--text); font-size:1.13rem; line-height:1.62; color:oklch(0.30 0.024 60);
  margin-bottom:1.8rem; transition:color 0.5s var(--ease); }
.cite{ position:relative; color:oklch(0.22 0.024 60); cursor:pointer; font-weight:500;
  background-image:linear-gradient(var(--thread-deep),var(--thread-deep));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size 0.4s var(--ease), color 0.35s var(--ease); }
.cite:hover, .cite:focus, .cite.open{ background-size:100% 1.5px; }
.cite.open{ color:var(--thread-deep); }
.specimen.tracing .claim{ color:oklch(0.30 0.024 60 / 0.4); }
.specimen.tracing .cite.open{ color:var(--thread-deep); }
.cite .source{ position:absolute; left:0; bottom:calc(100% + 14px); z-index:6; width:max-content; max-width:min(88vw,30rem);
  font-family:var(--mono); font-size:0.68rem; line-height:1.5; letter-spacing:0.02em;
  color:var(--bone); background:var(--ink-deep); border:1px solid var(--hair-strong);
  padding:0.7rem 0.85rem; opacity:0; transform:translateY(6px); pointer-events:none;
  box-shadow:0 20px 44px -22px oklch(0 0 0 / 0.9);
  transition:opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.cite .source.flip{ bottom:auto; top:calc(100% + 14px); }
.cite .source:before{ content:"primary source \00b7"; color:var(--thread); }
.cite .source:after{ content:""; position:absolute; left:14px; top:100%; width:2px; height:14px;
  background:linear-gradient(180deg, var(--thread), transparent); }
.cite .source.flip:after{ top:auto; bottom:100%; background:linear-gradient(0deg, var(--thread), transparent); }
.cite:hover .source, .cite:focus .source, .cite.open .source{ opacity:1; transform:translateY(0); pointer-events:auto; }
.recordblock{ font-family:var(--mono); font-size:0.76rem; line-height:2; letter-spacing:0.02em;
  color:oklch(0.34 0.024 60); border-top:1px solid oklch(0.55 0.028 62 / 0.4); padding-top:1.2rem; margin-top:0.4rem; }
.recordblock .k{ color:oklch(0.46 0.026 60); }
.recordblock .zero{ color:var(--thread-deep); font-weight:600; }
.depthmeter{ letter-spacing:0.05em; color:var(--thread-deep); }
.stamp{ position:absolute; top:clamp(1.4rem,4vw,2.6rem); right:clamp(1.2rem,4vw,2.4rem);
  transform:rotate(-11deg); border:2.5px solid var(--thread-deep); color:var(--thread-deep);
  font-family:var(--mono); font-weight:600; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  padding:0.4rem 0.7rem; border-radius:3px; opacity:0.82; mix-blend-mode:multiply; line-height:1.3; text-align:center; }
.stamp small{ display:block; font-size:0.52rem; letter-spacing:0.14em; opacity:0.85; }
.letter{ margin-top:2.4rem; max-width:40rem; padding-left:clamp(1rem,3vw,2rem); border-left:1px solid var(--hair-strong); }
.letter .kick{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--thread); margin-bottom:1.2rem; }
.letter blockquote{ margin:0; font-family:var(--text); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.5; color:var(--bone); }
.letter cite{ display:block; margin-top:1.4rem; font-family:var(--mono); font-style:normal; font-size:0.72rem;
  letter-spacing:0.12em; color:var(--bone-faint); }

/* side passages (branch links + the source-tunnel button) -
   meaningful + keyboard-reachable everywhere */
.sidepassage{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem; }
.sidepassage .branch{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--bone-faint); display:inline-flex; align-items:center; gap:0.6rem; text-align:left;
  background:none; border:0; padding:0 0 2px; cursor:pointer;
  border-bottom:1px solid var(--hair-strong); transition:color 0.4s var(--ease), border-color 0.4s var(--ease); }
.sidepassage .branch .arw{ color:var(--thread); }
.sidepassage .branch:hover, .sidepassage .branch:focus-visible{ color:var(--beam); border-color:var(--beam); }
.sidepassage .branch.src:hover, .sidepassage .branch.src:focus-visible{ color:var(--thread); border-color:var(--thread); }
.specimen .sidepassage .branch{ color:oklch(0.40 0.026 60); border-color:oklch(0.55 0.028 62 / 0.45); }
.specimen .sidepassage .branch .arw{ color:var(--thread-deep); }
.specimen .sidepassage .branch:hover, .specimen .sidepassage .branch:focus-visible{
  color:var(--thread-deep); border-color:var(--thread-deep); }

/* ============ the two rules - the one place the site shouts.
   the numerals stay in the digger's hand; the claims themselves
   are set in the reading face, because a rule is a claim. ============ */
html.warren #rules{ --cw:min(94vw,72rem); }
.rules-chamber .wrap{ max-width:72rem; }
.rules{ margin-top:3.4rem; display:flex; flex-direction:column; gap:clamp(3rem,7vw,6rem); }
.rule{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,5vw,4rem); align-items:start;
  padding-top:1.8rem; border-top:1px solid var(--hair-strong); }
.rule .idx{ font-family:var(--hand); font-weight:400;
  font-size:clamp(5rem,15vw,12rem); line-height:0.8; color:var(--beam); }
.rule.ethics .idx{ color:var(--thread); }
.rule .body{ max-width:42rem; padding-top:clamp(0.5rem,2vw,1.5rem); }
.rule .tag{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--beam); margin-bottom:0.9rem; display:block; }
.rule.ethics .tag{ color:var(--thread); }
.rule p{ font-family:var(--text); font-weight:500; font-size:clamp(1.45rem,2.9vw,2.35rem); line-height:1.32;
  letter-spacing:0.002em; color:var(--bone); margin:0; }
.rule.ethics{ margin-left:clamp(0rem,8vw,7rem); }

/* ============ the burrow ============ */
html.warren #burrow{ --cw:min(90vw,44rem); }
#burrow .col{ max-width:40rem; }
.intake{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:0.8rem; align-items:stretch; }
.intake .field{ flex:1 1 18rem; display:flex; align-items:center; gap:0.7rem; border:1px solid var(--hair-strong);
  padding:0.9rem 1.1rem; font-family:var(--mono); font-size:0.82rem; color:var(--bone-dim);
  background:oklch(0.20 0.026 55 / 0.45); transition:border-color 0.4s var(--ease); }
.intake .field:focus-within{ border-color:var(--beam); }
.intake .field.invalid{ border-color:var(--thread); }
.intake .field .pre{ color:var(--bone-faint); white-space:nowrap; }
.intake input{ flex:1; min-width:0; background:none; border:0; color:var(--bone); font-family:var(--mono);
  font-size:0.82rem; letter-spacing:0.02em; }
.intake input::placeholder{ color:var(--bone-faint); }
.intake input:focus{ outline:none; }
.submit{ display:inline-flex; align-items:center; justify-content:center; gap:0.7rem; padding:0.9rem 1.3rem;
  background:var(--thread); color:oklch(0.98 0.01 40); font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.14em; text-transform:uppercase; font-weight:600; border:0; cursor:pointer;
  transition:transform 0.5s var(--ease), box-shadow 0.5s var(--ease), opacity 0.3s var(--ease); }
.submit:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -16px oklch(0.655 0.20 30 / 0.8); }
.submit:active{ transform:translateY(0); }
.submit[disabled]{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }
.formnote{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.04em; color:var(--beam);
  margin-top:1rem; min-height:1.2em; }
.formnote.err{ color:var(--thread); }
.formnote.err .formnote-link{ color:var(--thread); border-bottom:1px solid var(--thread); }
.formnote .formnote-link{ color:var(--beam); border-bottom:1px solid transparent; transition:border-color 0.3s var(--ease), color 0.3s var(--ease); }
.formnote .formnote-link:hover{ color:var(--beam-hot); border-color:var(--beam); }
.privacy{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.05em; color:var(--bone-faint);
  margin-top:0.6rem; max-width:34rem; line-height:1.8; }
.signed{ margin-top:2.2rem; font-family:var(--text); font-style:italic; font-size:1.05rem; color:var(--bone-dim); }

/* contact info in the burrow chamber */
.contact-row{ margin-top:1.6rem; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--bone-faint); display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 0.6rem; }
.contact-label{ color:var(--bone-faint); opacity:0.7; letter-spacing:0.16em; text-transform:uppercase; }
.contact-link{ color:var(--beam); border-bottom:1px solid transparent; transition:border-color 0.3s var(--ease), color 0.3s var(--ease); }
.contact-link:hover{ color:var(--beam-hot); border-color:var(--beam); }
.contact-sep{ color:var(--hair-strong); opacity:0.5; }
.signed b{ font-style:normal; font-weight:400; color:var(--thread); font-family:var(--hand); font-size:1.35em; }

/* the colophon rides the base of the burrow chamber in warren mode */
.warrencolophon{ display:none; margin-top:3rem; font-family:var(--mono); font-size:0.7rem;
  letter-spacing:0.08em; color:var(--bone-faint); line-height:1.9; }
html.warren .warrencolophon{ display:block; }
.warrencolophon .zero{ color:var(--thread); }
.warrencolophon a{ border-bottom:1px solid var(--hair-strong); }

/* ============ footer ============ */
footer{ position:relative; z-index:5; border-top:1px solid var(--hair);
  padding:clamp(4rem,9vh,7rem) clamp(1.4rem,7vw,3rem) clamp(3rem,6vh,5rem); text-align:center; }
html.warren footer{ display:none; }
footer .mark{ font-family:var(--hand); font-weight:400; font-size:1.8rem; color:var(--bone); letter-spacing:0.04em; }
footer .pos{ font-family:var(--text); font-style:italic; color:var(--bone-dim); max-width:34rem; margin:1.2rem auto 2.4rem; }
footer .colophon{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; color:var(--bone-faint); line-height:1.9; }
footer .colophon .zero{ color:var(--thread); }
footer .contact-line{ margin-top:1.2rem; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; color:var(--bone-faint); }
footer .contact-line span{ opacity:0.6; text-transform:uppercase; letter-spacing:0.16em; }
footer .contact-line a{ color:var(--beam); border-bottom:1px solid transparent; transition:border-color 0.3s var(--ease), color 0.3s var(--ease); margin:0 0.15rem; }
footer .contact-line a:hover{ color:var(--beam-hot); border-color:var(--beam); }
footer .contact-line .sep{ color:var(--hair-strong); opacity:0.5; margin:0 0.2rem; }
footer .colophon a{ border-bottom:1px solid var(--hair-strong); }

/* ---------- responsive (flow mode: mobile + tablet + reduced motion) ---------- */
@media (max-width: 1360px){
  .panels{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .formats{ grid-template-columns:1fr; }
  .format.carrot{ margin-top:0; }
  #gauge{ top:auto; bottom:16px; right:16px; }
  #gauge #core{ min-height:44px; }
  #map{ width:132px; left:14px; bottom:12px; }
  #map:hover{ transform:none; }
  .rung{ grid-template-columns:1fr; gap:0.4rem; }
  .rung .meta{ padding-top:0; flex-direction:row; gap:0.8rem; }
  .rule{ grid-template-columns:1fr; gap:0.4rem; }
  .rule .idx{ font-size:clamp(4rem,20vw,7rem); }
  .rule.ethics{ margin-left:0; }
}
@media (max-width: 640px){
  .panels{ grid-template-columns:1fr; }
  .pgfx{ aspect-ratio:1/0.7; }
}
/* flow mode (<1100px): the burrow mouth sits under the lower text rows, so
   the ink there flips back to bone over the dark (round 12) */
@media (max-width: 1099px){
  #surface .lead{ text-shadow:0 1px 0 oklch(0.97 0.03 90 / 0.3); }
  #surface .subhero .lead:last-child{ color:oklch(0.95 0.015 88);
    text-shadow:0 1px 2px oklch(0.12 0.02 50 / 0.6), 0 2px 10px oklch(0.12 0.02 50 / 0.45); }
  #surface .readout, #surface .descend{ color:oklch(0.92 0.014 85);
    text-shadow:0 1px 3px oklch(0.10 0.02 50 / 0.6); }
  #surface .readout b{ color:var(--beam); }
  #surface .descend .arrow{ border-color:oklch(0.90 0.03 78 / 0.5); color:var(--beam); }
  #surface .descend:hover .arrow{ border-color:var(--beam); }
}
/* flow mode between 900-1100px keeps the gauge top-right: give the copy a
   safe right margin so the instrument never sits on a section's last words
   (audit v5 F8) */
@media (min-width: 900px) and (max-width: 1099px){
  html.js:not(.warren) .chamber{ padding-right:180px; }
}
@media (max-height: 960px) and (min-width: 1100px){
  .pgfx{ aspect-ratio:1/0.66; }
  .panel{ padding:1.1rem 1.2rem 1.3rem; }
  .panel h3{ font-size:1.06rem; }
  .pdesc{ font-size:0.88rem; margin-bottom:1.1rem; }
}
@media (max-width: 700px){
  /* phones: the instruments shrink to two solid corner chips (map, sound)
     and dim while the page scrolls, so the copy is never fought for
     (audit v5 P1-7/acceptance 6). the sr announcer keeps working. */
  .chamber{ padding-bottom:clamp(7rem,16vh,11rem); }
  #gauge .read, #gauge #core{ display:none; }
  #gauge{ bottom:12px; right:12px; gap:0; }
}
@media (pointer: coarse), (max-width: 700px){
  #maptoggle, html:not(.warren) #gauge{ transition:opacity 0.25s var(--ease-soft); }
  html.scrolling:not(.warren) #maptoggle,
  html.scrolling:not(.warren) #gauge,
  html.scrolling:not(.warren) #map{ opacity:0.22; }
}
@media (max-width: 560px){
  .chamber{ padding-inline:1.3rem; }
  #gauge .read{ display:none; }
  #map .cap{ display:none; }
  .stamp{ position:static; display:inline-block; transform:rotate(-3deg); margin-bottom:1rem; }
  .cite{ cursor:text; }
  .cite .source{ position:static; display:block; width:auto; max-width:100%; opacity:1; transform:none;
    pointer-events:auto; box-shadow:none; margin-top:0.5rem; color:oklch(0.34 0.024 60);
    background:oklch(0.90 0.02 88 / 0.6); border-color:oklch(0.55 0.028 62 / 0.4); }
  .cite .source:before{ color:var(--thread-deep); }
  .cite .source:after{ display:none; }
  .intake .field{ flex-basis:100%; }
}

@media (prefers-reduced-motion: reduce){
  #cave,#vignette,#ember{ display:none !important; }
  #glow{ opacity:0.5; }
  #crossing{ display:none; }
  html.warren.booting #overture{ display:none; }
  .js .rise{ opacity:1; transform:none; clip-path:none; transition:none; }
  .js .hw-ink{ -webkit-mask-image:none; mask-image:none; }
  .nib, .flux .strike{ display:none !important; }
  .hw.flux .hw-ink{ color:inherit; text-shadow:none; }
  .descend .arrow svg{ animation:none; }
  #sound .eq i{ animation:none; transform:scaleY(1); }
  html.warren .rung{ opacity:1; transform:none; }
}

@media (prefers-contrast: more){
  :root{ --hair:oklch(0.90 0.03 78 / 0.26); --hair-strong:oklch(0.90 0.03 78 / 0.42);
    --bone-faint:oklch(0.805 0.016 76); }
}

/* ---------- print: the trail becomes the paper it claims to be.
   the sources print with it; a trail without its traces is not a trail. ---------- */
@media print{
  html,body{ background:#fff; color:#1a1a1a; }
  #cave,#glow,#ember,#vignette,#crossing,#overture,#gauge,#map,#track,#quin,#lampcursor,#grain,
  .descend,.intake,.sidepassage,.nib,.flux .strike,.pgfx,footer .mark,#clearing,#maptoggle{ display:none !important; }
  html.warren main{ position:static; transform:none; height:auto; }
  html.warren .chamber{ position:static; transform:none; width:auto; page-break-inside:avoid; padding:1.5rem 0; }
  html.warren .chamber .wrap::before{ display:none; }
  .specimen{ box-shadow:none; border:1px solid #999; background:#fbf9f2; }
  h1,h2,h3{ color:#111; text-shadow:none; }
  .rule p, .lead, p{ color:#222; text-shadow:none; }
  .panel{ background:none; border-bottom:1px solid #ccc; }
  .cite .source{ position:static; display:block; width:auto; max-width:100%; opacity:1; transform:none;
    box-shadow:none; margin-top:0.4rem; color:#333; background:#f2efe6; border:1px solid #bbb; }
  .cite .source:before{ content:"source \00b7"; color:#8a2f22; }
  .cite .source:after{ display:none; }
}