/* carrotwm.org: "The Dig".
   One page, five strata: sky → leaf → topsoil → midsoil → deepsoil → bedrock.
   Every color pair below is contrast-verified (see DESIGN.md). No JS anywhere. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* strata */
  --sky:      oklch(0.93 0.05 135);
  --leaf:     oklch(0.64 0.115 152);
  --topsoil:  oklch(0.35 0.045 80);
  --midsoil:  oklch(0.27 0.04 75);
  --deepsoil: oklch(0.19 0.03 65);
  --bedrock:  oklch(0.13 0.018 60);

  /* inks */
  --hero-ink: oklch(0.17 0.042 155);
  --hero-mut: oklch(0.25 0.055 153);
  --soil-ink: oklch(0.95 0.015 95);
  --soil-mut: oklch(0.8 0.025 90);

  /* the root */
  --carrot:   oklch(0.68 0.17 45);
  --carrot-deep: oklch(0.58 0.16 42);
  --rust:     oklch(0.5 0.15 40);
  --sprout:   oklch(0.74 0.13 150);
  --cta-text: oklch(0.97 0.01 90);

  /* the garden's botanical greens, deep to bright */
  --green-a: oklch(0.3 0.085 150);
  --green-b: oklch(0.42 0.105 148);
  --green-c: oklch(0.52 0.11 146);

  /* type */
  --font-display: "Young Serif", "Georgia-Fallback", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "Arial-Fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;
  --t-display: clamp(2.5rem, 5vw + 1.3rem, 5rem);
  --t-h2: clamp(1.8rem, 2.4vw + 1rem, 2.9rem);
  --t-h3: 1.3125rem;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;

  /* space (4pt scale) */
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --sect-pad: clamp(5rem, 10vw, 8.5rem);

  /* motion */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* stack */
  --z-content: 1;
  --z-nav: 10;

  /* the garden's rendered height tracks the viewport width PROPORTIONALLY
     (560/1440 = 0.3889), so browser zoom and ultrawide screens scale the
     whole scene like an image instead of top-cropping it. the 320px floor
     keeps mobile at the slice-and-crop-sides behavior; the 86vh guard only
     bites on short ultrawide windows. --garden-scale mirrors whichever term
     wins, so the left carrot stays glued to the soil line in every case */
  --garden-h: max(300px, min(calc(100vw * 0.2306), 86vh));
  --garden-scale: max(100vw / 1440, var(--garden-h) / 332);
}

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* metric-matched fallbacks to tame swap shift */
@font-face {
  font-family: "Georgia-Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 112%;
  ascent-override: 88%;
  descent-override: 24%;
}
@font-face {
  font-family: "Arial-Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 22%;
}

/* ---------------------------------------------------------------- base */

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

html {
  scroll-behavior: smooth;
  background: var(--bedrock);
}

/* body is soil-dark, NOT leaf: it sits behind every section, and any
   sub-pixel rounding crack between boxes flashes the body color. green
   cracks read as glitches; dark ones read as soil */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--soil-ink);
  background: var(--bedrock);
  -webkit-text-size-adjust: 100%;
}

/* seam backstop: at fractional zoom levels adjacent sections can round to
   device pixels with a 1px gap between them. everything inside main sits on
   soil, so a gap flashes soil instead of the body's leaf green */
main {
  background: var(--midsoil);
}
.footer {
  margin-top: -1px;
}

::selection {
  background: var(--carrot);
  color: var(--bedrock);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
  line-height: 1.1;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 160ms var(--ease-quart), color 160ms var(--ease-quart);
}

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

svg {
  display: block;
}

/* keyboard users skip the nav; visible only while focused */
.skip {
  position: absolute;
  z-index: var(--z-nav);
  left: 1rem;
  top: -4rem;
  padding: 0.6em 1.2em;
  background: var(--hero-ink);
  color: var(--cta-text);
  border-radius: 0 0 0.6rem 0.6rem;
  text-decoration: none;
  transition: top 160ms var(--ease-quart);
}
.skip:focus-visible {
  top: 0;
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-5) clamp(1.25rem, 5vw, 3rem);
  color: var(--hero-ink);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
}

.wm-dim {
  opacity: 0.55;
}

.carrot-mark {
  width: 1.7rem;
  height: 1.7rem;
}
.carrot-mark .cm-root {
  fill: var(--rust);
}
.carrot-mark .cm-leaf {
  fill: var(--hero-ink);
}
.carrot-mark .cm-line {
  stroke: var(--carrot);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  font-size: var(--t-small);
  font-weight: 700;
}

.nav-links a {
  text-decoration-color: transparent;
  white-space: nowrap;
  /* real touch targets (wcag 2.5.8) without changing the visual rhythm */
  padding-block: 0.55em;
}
.nav-links a[aria-current="page"] {
  text-decoration-color: currentColor;
}
.nav-links a:hover {
  text-decoration-color: currentColor;
}

.nav-cta {
  padding: 0.45em 1.1em;
  background: var(--hero-ink);
  color: var(--cta-text);
  border-radius: 1.2rem 0.4rem 1.2rem 0.4rem;
  text-decoration: none;
  transition: border-radius 220ms var(--ease-quint), transform 160ms var(--ease-quart);
}
.nav-cta:hover {
  border-radius: 0.4rem 1.2rem 0.4rem 1.2rem;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 96svh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--sky) 0%, var(--leaf) 62%);
  color: var(--hero-ink);
  overflow: clip;
}

.hero-copy {
  width: min(100% - 2.5rem, 46rem);
  margin: auto auto 0;
  padding-top: clamp(7rem, 16vh, 11rem);
  text-align: center;
}

.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.015em;
  line-height: 1.04;
}

.hero-lead {
  max-width: 54ch;
  margin: var(--s-6) auto 0;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  color: var(--hero-mut);
}

.hero-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.hero-meta {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--hero-mut);
}

.garden {
  width: 100%;
  height: var(--garden-h);
  margin-top: var(--s-6);
  pointer-events: none;
}

/* the gutter carrot: one continuous element living in the topsoil stratum,
   its top poking up into the hero. anchored from the TOP so the crown sits on
   the hero's soil line (soil line = 24.3% of garden height above hero bottom;
   the trailing term is the crown's own offset inside the svg) */
.left-carrot {
  position: absolute;
  pointer-events: none;
  /* the soil line sits 140 garden-units above the hero's bottom edge; its px
     position scales with the garden's slice zoom, so track --garden-scale */
  top: calc(-140 * var(--garden-scale) - clamp(7px, 0.85vw, 12px));
  height: calc(100% + 140 * var(--garden-scale) + clamp(7px, 0.85vw, 12px));
  left: clamp(0.75rem, 4vw, 4rem);
  width: clamp(24px, 3vw, 44px);
  overflow: visible;
}
/* the thread stretches to the stratum's full height... */
.lc-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* ...while the body keeps its drawn proportions, always */
.lc-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* garden scenery, botanical-plate edition. fronds recolor through inherit +
   currentColor: one fr-* class on the wrapper tones a whole placed frond */
.fr-a { fill: var(--green-a); color: var(--green-a); }
.fr-b { fill: var(--green-b); color: var(--green-b); }
.fr-c { fill: var(--green-c); color: var(--green-c); }
.p-rachis {
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-linecap: round;
  fill: none;
}
.f-rachis {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}
.soil-band { fill: var(--topsoil); }
.soil-lip {
  fill: none;
  stroke: oklch(0.27 0.045 70);
  stroke-width: 3;
}
.carrot-body { fill: var(--carrot); }
.carrot-flank { fill: var(--carrot-deep); }
.carrot-core {
  stroke: oklch(0.75 0.15 55);
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  opacity: 0.7;
}
.scar {
  stroke: var(--rust);
  stroke-width: 1.1;
  stroke-linecap: round;
  fill: none;
  opacity: 0.85;
}
.hair {
  stroke: var(--rust);
  stroke-width: 0.8;
  stroke-linecap: round;
  fill: none;
  opacity: 0.8;
}
.pebble { fill: oklch(0.42 0.04 80); }
.pebble-dark { fill: oklch(0.29 0.035 72); }
.root-frag {
  stroke: oklch(0.5 0.11 45);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  opacity: 0.55;
}
.worm {
  stroke: oklch(0.55 0.09 25);
  stroke-width: 4.5;
  stroke-linecap: round;
  fill: none;
}
.buried-carrot { fill: oklch(0.55 0.12 48); }
.buried-ring {
  stroke: oklch(0.4 0.08 45);
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
}
.buried-hair {
  stroke: oklch(0.42 0.08 45);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
}
/* queen anne's lace: lace-dome umbels, forked bracts, one dark heart floret */
.qal-stem {
  stroke: var(--green-b);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}
.qal-ray {
  stroke: oklch(0.85 0.03 105);
  stroke-width: 0.6;
  stroke-linecap: round;
  fill: none;
  opacity: 0.8;
}
.qal-bract {
  stroke: var(--green-c);
  stroke-width: 0.9;
  stroke-linecap: round;
  fill: none;
}
.qal-floret { fill: oklch(0.96 0.015 100); }
.qal-heart { fill: oklch(0.36 0.13 20); }
.qal-bud { fill: oklch(0.78 0.06 125); }
.qal-curl {
  stroke: oklch(0.62 0.09 130);
  stroke-width: 0.8;
  stroke-linecap: round;
  fill: none;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  padding: 0.75em 1.7em;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  border-radius: 1.6rem 0.55rem 1.6rem 0.55rem; /* leaf-shaped */
  transition: border-radius 260ms var(--ease-quint), transform 180ms var(--ease-quart),
    background-color 180ms var(--ease-quart);
}
.btn:hover {
  border-radius: 0.55rem 1.6rem 0.55rem 1.6rem;
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn-ink {
  background: var(--hero-ink);
  color: var(--cta-text);
}
.btn-ghost {
  border: 2px solid var(--hero-ink);
  color: var(--hero-ink);
}
.btn-carrot {
  background: var(--carrot);
  color: var(--bedrock);
  font-size: 1.1875rem;
}
.btn-carrot:hover {
  background: oklch(0.72 0.175 47);
}
.btn-ghost-light {
  border: 2px solid var(--soil-mut);
  color: var(--soil-ink);
}

/* ---------------------------------------------------------------- strata */

.stratum {
  position: relative;
  padding: var(--sect-pad) 0;
}

.wrap {
  position: relative;
  z-index: var(--z-content);
  width: min(100% - 2.5rem, 66rem);
  margin-inline: auto;
}

.stratum h2 {
  font-size: var(--t-h2);
  max-width: 24ch;
}

.lead {
  max-width: 58ch;
  margin-top: var(--s-5);
  font-size: 1.125rem;
  color: var(--soil-mut);
}

/* soft geological transitions instead of hard cuts */
.topsoil {
  background: linear-gradient(to bottom, var(--topsoil) 0, var(--topsoil));
  color: var(--soil-ink);
}
.midsoil {
  background: linear-gradient(to bottom, var(--topsoil) 0, var(--midsoil) 7rem);
  color: var(--soil-ink);
}
.deepsoil {
  background: linear-gradient(to bottom, var(--midsoil) 0, var(--deepsoil) 7rem);
  color: var(--soil-ink);
}
.bedrock {
  background: linear-gradient(to bottom, var(--deepsoil) 0, var(--bedrock) 7rem);
  color: var(--soil-ink);
  padding-bottom: 0;
}

/* the four strata share one positioned wrapper, so the underground root can
   be one single element spanning all of them: joints cannot exist */
.dig {
  position: relative;
  /* overlap the hero's last pixel row: the hero's own green gradient can
     otherwise peek between the garden svg's bottom edge and the section
     boundary at fractional zoom. the svg's soil is the same color as the
     first stratum, so the 1px overlap is invisible */
  margin-top: -1px;
}
.root-hair {
  fill: none;
  stroke: var(--carrot);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.5;
}
.root-node {
  fill: var(--carrot);
  opacity: 0.45;
}
/* ---------------------------------------------------------------- topsoil: sprouts */

.sprouts {
  list-style: none;
  padding: 0;
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-7);
}

.sprout {
  max-width: 44ch;
}

.sprout-mark {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--s-3);
}
.sm-stem {
  fill: none;
  stroke: var(--sprout);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sm-leaf {
  fill: var(--sprout);
}
.sm-leaf-b {
  fill: var(--sprout);
  opacity: 0.72;
}

.sprout h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.25;
}

.sprout p {
  margin-top: var(--s-2);
  color: var(--soil-mut);
  font-size: 1rem;
}

/* ---------------------------------------------------------------- midsoil: ledger */

.ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  margin-top: var(--s-8);
}

.ledger-h {
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.grown-h {
  color: var(--sprout);
}
.growing-h {
  color: var(--carrot);
}

.grown-list,
.growing-list {
  list-style: none;
  padding: 0;
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
}

.grown-list li {
  padding-left: 1.6rem;
  position: relative;
}
.grown-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 60% 40% 55% 45%;
  background: var(--sprout);
}

.growing-list li {
  padding-left: 1.6rem;
  position: relative;
  color: var(--soil-mut);
}
.growing-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.52em;
  width: 0.5rem;
  height: 0.62rem;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; /* a seed */
  border: 1.5px solid var(--carrot);
}
.growing-list strong {
  color: var(--soil-ink);
}

.ledger-note {
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--soil-mut);
}

.mid-cta {
  margin-top: var(--s-7);
  font-size: 1.125rem;
}
.mid-cta a {
  color: var(--carrot);
}
.ledger-note a,
.roots-links a,
.bedrock-changelog a {
  color: var(--carrot);
}

/* ---------------------------------------------------------------- deepsoil: roots */

.rootlets {
  list-style: none;
  padding: 0;
  margin-top: var(--s-8);
  display: grid;
  gap: var(--s-6);
}

.rootlet {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-4);
  align-items: start;
  max-width: 62ch;
}
.rootlet:nth-child(even) {
  margin-left: clamp(0rem, 8vw, 7rem);
}

.rootlet-conn {
  width: 3.5rem;
  height: 2.75rem;
  margin-top: 0.3rem;
}
.conn-main {
  fill: none;
  stroke: var(--carrot);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.65;
}
.conn-hair {
  fill: none;
  stroke: var(--carrot);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.45;
}
.conn-node {
  fill: var(--carrot);
}

.rootlet-head {
  font-size: 1.125rem;
  line-height: 1.4;
}
.clib {
  color: var(--soil-mut);
  text-decoration-thickness: 1.5px;
}
.became {
  margin: 0 0.55em;
  color: var(--carrot);
}
.grew {
  color: var(--sprout);
}

.rootlet-how {
  margin-top: var(--s-2);
  color: var(--soil-mut);
  font-size: 1rem;
  max-width: 56ch;
}

/* receipts: one flowing terminal ledger line, not a metric wall */
.receipts {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-4);
  font-family: var(--font-mono);
  line-height: 2.1;
  border-block: 1px solid oklch(0.32 0.04 60);
}
.receipt {
  display: inline;
  white-space: nowrap;
}
.receipt:not(:last-child)::after {
  content: " \00B7 ";
  color: var(--soil-mut);
  white-space: normal;
  margin-inline: 0.9ch;
}
.receipt-val {
  color: var(--carrot);
  font-size: 1.25rem;
  font-weight: 700;
  margin-right: 0.6ch;
}
.receipt-label {
  color: var(--soil-mut);
  font-size: var(--t-small);
}

.kicker {
  margin-top: var(--s-7);
  max-width: 58ch;
  font-size: 1.1875rem;
  line-height: 1.6;
}
.kicker-mark {
  color: var(--carrot);
  font-family: var(--font-display);
  margin-right: 0.5ch;
}

.roots-links {
  margin-top: var(--s-5);
  color: var(--soil-mut);
  font-size: var(--t-small);
  max-width: 58ch;
}

/* ---------------------------------------------------------------- bedrock */

.bedrock .wrap {
  text-align: center;
  padding-block: 0 var(--s-8);
}

.bedrock h2 {
  margin-inline: auto;
}
.bedrock .lead {
  margin-inline: auto;
}

.bedrock-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.bedrock-changelog {
  margin: var(--s-7) auto 0;
  max-width: 52ch;
  color: var(--soil-mut);
  font-size: var(--t-small);
}
.bedrock-changelog strong {
  color: var(--soil-ink);
}

/* the footer is body-level chrome on every page (a real contentinfo
   landmark), so it paints its own bedrock */
.footer {
  background: var(--bedrock);
  border-top: 1px solid oklch(0.22 0.02 60);
  padding: var(--s-6) 0 var(--s-7);
  font-size: var(--t-small);
  color: var(--soil-mut);
}
.footer a {
  display: inline-block;
  padding-block: 0.35em;
}
/* on the burrow page the footer follows deepsoil, not a bedrock section */
.about-page .footer {
  background: linear-gradient(to bottom, var(--deepsoil) 0, var(--bedrock) 4rem);
  border-top: none;
}
.footer-grid {
  display: grid;
  gap: var(--s-3);
  text-align: center;
}
.footer a {
  color: var(--soil-ink);
}
.footer a:hover {
  color: var(--carrot);
}
.footer-colophon {
  max-width: 58ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- motion */

/* page-load choreography: the garden greets you */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-copy > * {
  animation: rise-in 640ms var(--ease-quint) both;
}
.hero-copy > *:nth-child(2) { animation-delay: 90ms; }
.hero-copy > *:nth-child(3) { animation-delay: 180ms; }
.hero-copy > *:nth-child(4) { animation-delay: 260ms; }

/* fronds breathe */
@keyframes sway {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.6deg); }
}
.sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 6.5s ease-in-out infinite alternate;
}
.sway-2 { animation-duration: 8s; animation-delay: -2s; }
.sway-3 { animation-duration: 5.5s; animation-delay: -4s; }

/* scroll-driven: the dig deepens as you scroll. static-friendly defaults; the
   animation only takes over where view timelines exist. */
@supports (animation-timeline: view()) {
  @keyframes rise-soft {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .sprout,
  .rootlet,
  .skill,
  .pantry-row,
  .contact-list li {
    animation: rise-soft linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }

  @keyframes draw-conn {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
  }
  .conn-main {
    stroke-dasharray: 100;
    animation: draw-conn linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
  }

  @keyframes wipe-in {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  .receipts {
    animation: wipe-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .sway,
  .sprout,
  .rootlet,
  .skill,
  .pantry-row,
  .contact-list li,
  .conn-main,
  .receipts {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------- responsive */

@media (min-width: 700px) {
  .sprouts {
    grid-template-columns: repeat(2, 1fr);
  }
  .ledger {
    grid-template-columns: 1.15fr 1fr;
  }
}

@media (min-width: 1050px) {
  .sprouts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7) var(--s-8);
  }
  .sprout-wide {
    grid-column: span 2;
    max-width: 52ch;
  }
  /* the last sprout settles under the middle-right so the corner doesn't sit empty */
  .sprout:last-child {
    grid-column: 2 / span 2;
  }
  /* organic row rhythm: alternate sprouts settle at different depths */
  .sprout:nth-child(2) { margin-top: var(--s-6); }
  .sprout:nth-child(4) { margin-top: var(--s-5); }
  .sprout:nth-child(6) { margin-top: var(--s-6); }
}

@media (max-width: 699px) {
  .nav {
    padding-block: var(--s-4);
  }
  .nav-links {
    gap: 0.8rem;
  }
  /* changelog and github stay reachable from footer and docs; the pill must fit */
  .nav-changelog,
  .nav-github {
    display: none;
  }
  .left-carrot {
    left: 0.5rem;
    width: 18px;
  }
  .rootlet {
    grid-template-columns: 2.25rem 1fr;
    gap: var(--s-3);
  }
  .rootlet:nth-child(even) {
    margin-left: 0;
  }
  .rootlet-conn {
    width: 2.25rem;
    height: 1.8rem;
  }
  .receipts {
    padding-inline: var(--s-4);
  }
  .tunnel {
    right: 0.4rem;
    width: 26px;
  }
  /* slide the burrow scene left so the rabbit and the mouth both fit the
     narrow slice window (the soil spans far enough to cover the shift) */
  .bs-shift {
    transform: translateX(-100px);
  }
}

/* ---------------------------------------------------------------- docs: the almanac */

/* docs pages have no hero: the nav sits on soil, in light ink */
.docs-page .nav {
  position: static;
  color: var(--soil-ink);
  background: var(--midsoil);
}
.docs-page .nav-cta {
  background: var(--soil-ink);
  color: var(--bedrock);
}
.docs-page .carrot-mark .cm-leaf {
  fill: var(--sprout);
}

/* a lifted carrot tone: body-link contrast on midsoil needs more light */
:root {
  --carrot-link: oklch(0.74 0.155 48);
}

.docs-shell {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
  padding-block: var(--s-6) var(--s-9);
}

.docs-side {
  font-size: var(--t-small);
  margin-bottom: var(--s-6);
}
.docs-side summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--soil-ink);
  padding: 0.5em 0;
}
.docs-side-label {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--carrot);
}
.docs-side ul {
  list-style: none;
  padding: 0;
  margin-top: var(--s-2);
}
.docs-side a {
  display: block;
  padding: 0.32em 0;
  color: var(--soil-mut);
  text-decoration: none;
}
.docs-side a:hover {
  color: var(--soil-ink);
}
.docs-side a[aria-current="page"] {
  color: var(--soil-ink);
  font-weight: 700;
}

.docs-article {
  max-width: 70ch;
  min-width: 0;
}
.docs-article h1 {
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.6rem);
}
.docs-article h2 {
  font-size: 1.5rem;
  margin-top: var(--s-7);
}
.docs-article h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1875rem;
  margin-top: var(--s-6);
}
.docs-article p,
.docs-article li {
  line-height: 1.7;
}
.docs-article p {
  margin-top: var(--s-4);
}
.docs-article ul,
.docs-article ol {
  margin-top: var(--s-4);
  padding-left: 1.4em;
}
.docs-article li {
  margin-top: var(--s-2);
}
.docs-article a {
  color: var(--carrot-link);
}
.docs-article hr {
  border: none;
  border-top: 1px solid oklch(0.37 0.04 70);
  margin-block: var(--s-7);
}

.docs-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: oklch(0.21 0.028 70);
  padding: 0.12em 0.38em;
  border-radius: 5px;
}
.docs-article pre.code {
  background: oklch(0.16 0.022 65);
  border: 1px solid oklch(0.3 0.035 70);
  border-radius: 10px;
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
  overflow-x: auto;
}
.docs-article pre.code code {
  background: none;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.docs-article .anchor {
  margin-left: 0.4ch;
  color: var(--carrot);
  text-decoration: none;
  opacity: 0;
  transition: opacity 140ms var(--ease-quart);
}
.docs-article h1:hover .anchor,
.docs-article h2:hover .anchor,
.docs-article h3:hover .anchor,
.docs-article h4:hover .anchor,
.docs-article .anchor:focus-visible {
  opacity: 0.8;
}

.docs-article .table-scroll {
  overflow-x: auto;
  margin-top: var(--s-5);
}
.docs-article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
}
.docs-article th {
  text-align: left;
  font-size: var(--t-small);
  padding: 0.4em 1.2em 0.4em 0;
  border-bottom: 1px solid oklch(0.42 0.045 70);
}
.docs-article td {
  padding: 0.55em 1.2em 0.55em 0;
  border-bottom: 1px solid oklch(0.31 0.035 70);
  vertical-align: top;
}

.docs-article blockquote {
  background: oklch(0.3 0.045 75);
  border: 1px solid oklch(0.38 0.045 72);
  border-radius: 10px;
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}
.docs-article blockquote p {
  margin-top: 0;
}
.docs-article blockquote p + p {
  margin-top: var(--s-3);
}

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid oklch(0.35 0.04 70);
}
.docs-pager a {
  color: var(--soil-ink);
  text-decoration: none;
  max-width: 46%;
}
.docs-pager a:hover {
  color: var(--carrot-link);
}
.pager-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--soil-mut);
}
.pager-next {
  text-align: right;
}

@media (min-width: 1050px) {
  .docs-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-8);
  }
  .docs-side {
    position: sticky;
    top: var(--s-5);
    align-self: start;
    max-height: calc(100svh - var(--s-6));
    overflow-y: auto;
  }
  .docs-side summary {
    display: none;
  }
}

/* ---------------------------------------------------------------- about: the burrow */

.about-hero {
  min-height: 78svh;
}

/* the burrow scene has its own aspect (1440x230 viewBox after sky crop) */
.burrow-scene {
  height: max(240px, min(calc(100vw * 0.1597), 86vh));
}

/* burrow scene colors */
.mound { fill: oklch(0.32 0.045 78); }
.burrow-mouth { fill: oklch(0.14 0.02 60); }
.burrow-shade { fill: oklch(0.22 0.03 65); }
.mound-grass {
  stroke: var(--green-b);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}
/* the real bunny's broken-patch coat, painted inside the silhouette clip:
   white base, slate patches, white streaks cutting back in */
.rb-white { fill: oklch(0.94 0.006 95); }
.rb-slate { fill: oklch(0.45 0.012 265); }
.rb-earfill { fill: oklch(0.47 0.012 265); }
.rb-earfill-b { fill: oklch(0.39 0.012 265); }
.rb-tail { fill: oklch(0.92 0.006 95); }
.rb-ear-in {
  stroke: oklch(0.58 0.028 25);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.rb-crease {
  stroke: oklch(0.33 0.012 265);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  opacity: 0.6;
}
.rb-eye { fill: oklch(0.16 0.01 270); }
.rb-glint { fill: oklch(0.97 0 0); }
.rb-nose { fill: oklch(0.35 0.015 270); }
.rb-paw, .rb-whisker {
  stroke: oklch(0.62 0.012 265);
  stroke-width: 1.3;
  stroke-linecap: round;
  fill: none;
}

/* the tunnel: the burrow's passage down the right gutter */
.tunnel {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: clamp(0.75rem, 4vw, 4rem);
  width: clamp(32px, 4vw, 64px);
}
.tunnel svg {
  width: 100%;
  height: 100%;
}
.tunnel-bore {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
  opacity: 0.55;
}
.tunnel-branch {
  stroke-width: 10;
  opacity: 0.4;
}
.tunnel-chamber {
  fill: oklch(0.22 0.03 65);
  opacity: 0.6;
}

/* skills: four beds, staggered like the rootlets */
.skills {
  list-style: none;
  padding: 0;
  margin-top: var(--s-8);
  display: grid;
  gap: var(--s-7) var(--s-8);
}
.skill {
  max-width: 46ch;
}
.skill h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--soil-ink);
}
.skill p {
  margin-top: var(--s-2);
  color: var(--soil-mut);
}
.skill-evidence {
  font-size: var(--t-small);
}
.skill-evidence a {
  color: var(--carrot);
}

/* the pantry: stored produce, drawn to scale */
.pantry {
  list-style: none;
  padding: 0;
  margin-top: var(--s-8);
  display: grid;
  gap: var(--s-7);
}
.pantry-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--s-5);
  align-items: start;
  max-width: 60ch;
}
.pantry-glyph {
  display: flex;
  justify-content: center;
  padding-top: 0.2rem;
}
.pantry-carrot {
  width: calc(var(--carrot-size, 2rem) * 1.4);
  height: auto;
}
.pantry-carrot .cm-root { fill: var(--carrot); }
.pantry-carrot .cm-leaf { fill: var(--sprout); }
.pantry-carrot .cm-line {
  stroke: var(--rust);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}
.pantry-seedling .sprout-mark {
  width: 2rem;
  height: 2rem;
}
.pantry-head {
  font-size: 1.3125rem;
  font-weight: 700;
}
.pantry-head a {
  color: var(--soil-ink);
  text-decoration-color: var(--carrot);
}
.pantry-stars {
  margin-left: 0.9ch;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  color: var(--carrot);
}
.pantry-planted {
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--soil-mut);
}
.pantry-desc {
  margin-top: var(--s-2);
  color: var(--soil-mut);
}
.pantry-aside {
  margin-top: 0.2rem;
  font-size: var(--t-small);
  color: var(--soil-mut);
  font-style: italic;
}

/* the deepest chamber: contact */
.contact-list {
  list-style: none;
  padding: 0;
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-4);
  font-size: 1.125rem;
}
.contact-list a {
  color: var(--soil-ink);
  text-decoration-color: var(--carrot);
}
.contact-list a:hover {
  color: var(--carrot);
}
.contact-k {
  display: inline-block;
  min-width: 6.5ch;
  margin-right: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--carrot);
}
.contact-note {
  margin-left: 0.75ch;
  font-size: var(--t-small);
  color: var(--soil-mut);
}
.contact-note a {
  color: var(--soil-mut);
}
.back-up {
  margin-top: var(--s-8);
}
.back-up a {
  color: var(--carrot);
}

@media (min-width: 900px) {
  .skills {
    grid-template-columns: repeat(2, 1fr);
  }
  .skill:nth-child(2) { margin-top: var(--s-7); }
  .skill:nth-child(4) { margin-top: var(--s-7); }
  .skill:nth-child(even) { justify-self: end; }
  .pantry-row:nth-child(2) { margin-left: clamp(0rem, 8vw, 7rem); }
  .pantry-row:nth-child(3) { margin-left: clamp(0rem, 4vw, 3.5rem); }
}