:root {
  /* Compliance lexicon: four voices structured carries subtle warmth from its humanist proportions prevents feeling (Google Intersection Observer at 30% viewport entry Intersection Observer. Each section defines its own set of annotation strings (e.g. */
  --deep-humus: #2a2118;
  --weathered-ink: #3d3427;
  --frosted-lichen: #d4cdb8;
  --parchment-damp: #e8e0cc;
  --mushroom-gray: #6b6358;
  --oxidized-brass: #b8a07a;
  --moss-amber: #8a7e45;
  --russet-spore: #a0563c;
  --glass: rgba(107, 99, 88, 0.35);
  --brass-line: rgba(184, 160, 122, 0.3);
  --ease-focus: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment-damp);
  background:
    radial-gradient(circle at 20% 12%, rgba(138, 126, 69, 0.12), transparent 28rem),
    radial-gradient(circle at 80% 72%, rgba(160, 86, 60, 0.10), transparent 30rem),
    var(--deep-humus);
  font-family: "Literata", Georgia, serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}

.noise-filter {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
}

.texture-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  filter: url(#soilNoise);
}

.observation-lens {
  position: relative;
  z-index: 2;
  width: min(70vw, 1040px);
  margin: 0 auto;
}

.hud-frame {
  position: fixed;
  inset: 5vw;
  z-index: 10;
  border: 1px solid rgba(184, 160, 122, 0.28);
  pointer-events: none;
  transition: inset 500ms var(--ease-focus), border-color 500ms ease-out;
}

body.scrolled .hud-frame {
  inset: calc(5vw + 5px);
  border-color: rgba(184, 160, 122, 0.38);
}

.corner {
  --arm: 40px;
  position: absolute;
  width: 86px;
  height: 86px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oxidized-brass);
  cursor: pointer;
  pointer-events: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 250ms ease-out;
}

.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background: var(--oxidized-brass);
  transition: width 500ms var(--ease-focus), height 500ms var(--ease-focus), background 250ms ease-out;
}

.corner::before { width: var(--arm); height: 2px; }
.corner::after { width: 2px; height: var(--arm); }
.corner span { position: absolute; white-space: nowrap; }
.corner span::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--oxidized-brass);
}

body.scrolled .corner { --arm: 35px; }
.corner:hover { color: var(--moss-amber); }
.corner:hover::before,
.corner:hover::after,
.corner:hover span::before { background: var(--moss-amber); }

.corner-tl { left: -1px; top: -1px; }
.corner-tl::before, .corner-tl::after { left: 0; top: 0; }
.corner-tl span { left: 16px; top: 47px; }
.corner-tl span::before { left: -12px; top: -18px; }

.corner-tr { right: -1px; top: -1px; }
.corner-tr::before, .corner-tr::after { right: 0; top: 0; }
.corner-tr span { right: 16px; top: 47px; }
.corner-tr span::before { right: -12px; top: -18px; }

.corner-bl { left: -1px; bottom: -1px; }
.corner-bl::before, .corner-bl::after { left: 0; bottom: 0; }
.corner-bl span { left: 16px; bottom: 47px; }
.corner-bl span::before { left: -12px; bottom: -18px; }

.corner-br { right: -1px; bottom: -1px; }
.corner-br::before, .corner-br::after { right: 0; bottom: 0; }
.corner-br span { right: 16px; bottom: 47px; }
.corner-br span::before { right: -12px; bottom: -18px; }

.hud-note {
  position: fixed;
  top: 50%;
  z-index: 11;
  color: rgba(232, 224, 204, 0.74);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: opacity 200ms ease-out;
}

.hud-left { left: 2.3vw; transform: translateY(-50%) rotate(180deg); }
.hud-right { right: 2.3vw; transform: translateY(-50%); }
.hud-note.fading { opacity: 0; }

.title-plate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.mycelium {
  position: absolute;
  width: min(82vw, 980px);
  color: var(--oxidized-brass);
  opacity: 0.06;
  transform: rotate(-4deg);
}

.title-copy {
  position: relative;
  transform: translateY(12px);
  opacity: 0;
  animation: titleAppear 800ms ease-out 120ms forwards;
}

.plate-kicker,
.specimen-label,
.date-stamp,
.taxonomy-lead {
  font-family: "IBM Plex Mono", monospace;
  color: var(--oxidized-brass);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-variation-settings: "WONK" var(--wonk, 1), "opsz" 72;
}

h1 {
  --wonk: 0;
  font-size: clamp(4.2rem, 12vw, 11rem);
  line-height: 0.86;
  color: var(--frosted-lichen);
  text-shadow: 0 0 42px rgba(184, 160, 122, 0.12);
  animation: wonkWarm 1200ms var(--ease-focus) 100ms forwards;
}

h2 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.95;
  color: var(--frosted-lichen);
}

h3 {
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  color: var(--parchment-damp);
  line-height: 1;
}

.specimen-label {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid rgba(184, 160, 122, 0.35);
  background: rgba(107, 99, 88, 0.20);
}

.collection,
.field-notes,
.taxonomy,
.colophon {
  padding: 14vh 0;
  min-height: 100vh;
}

.section-intro {
  position: relative;
  margin-bottom: 3rem;
  max-width: 42rem;
}

.section-intro p { color: rgba(232, 224, 204, 0.78); }
.specimen-no {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--oxidized-brass);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.1em;
  transition: color 250ms ease-out;
}

.section-intro > .specimen-no { position: static; display: block; margin-bottom: 0.8rem; }

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}

.specimen-card,
.field-notes,
.taxonomy,
.colophon-card {
  position: relative;
  min-height: 180px;
  max-height: 180px;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 12px;
  border: 1px solid var(--brass-line);
  background: rgba(107, 99, 88, 0.35);
  color: var(--parchment-damp);
  backdrop-filter: blur(14px) saturate(0.8);
  box-shadow: inset 0 1px 0 rgba(232, 224, 204, 0.15);
  transition: max-height 500ms var(--ease-focus), transform 250ms ease-out, border-color 250ms ease-out, box-shadow 250ms ease-out, backdrop-filter 500ms var(--ease-focus);
  cursor: pointer;
}

.specimen-card::after,
.field-notes::after,
.taxonomy::after,
.colophon-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  filter: url(#glassNoise);
}

.specimen-card:hover,
.field-notes:hover,
.taxonomy:hover,
.colophon-card:hover {
  border-color: rgba(184, 160, 122, 0.6);
  box-shadow: inset 0 1px 0 rgba(232, 224, 204, 0.15), 0 0 20px rgba(184, 160, 122, 0.08);
}

.specimen-card:hover .specimen-no,
.field-notes:hover .specimen-no,
.taxonomy:hover .specimen-no,
.colophon-card:hover .specimen-no { color: var(--moss-amber); }

.specimen-card.is-open,
.field-notes.is-open,
.taxonomy.is-open,
.colophon-card.is-open {
  max-height: 980px;
  backdrop-filter: blur(4px) saturate(0.8);
  transform: scale(1.02) rotate(calc(var(--rot, 0deg) + 0.5deg));
}

.tilt-neg { --rot: -2deg; transform: rotate(var(--rot)); margin-top: 1.4rem; }
.tilt-pos { --rot: 1.5deg; transform: rotate(var(--rot)); }
.tilt-mid { --rot: 3deg; transform: rotate(var(--rot)); margin-top: -0.8rem; }
.tilt-neg-soft { --rot: -1deg; transform: rotate(var(--rot)); margin-top: 1.1rem; }
.tilt-neg:hover, .tilt-pos:hover, .tilt-mid:hover, .tilt-neg-soft:hover { transform: rotate(calc(var(--rot) + 0.5deg)); }

.card-content,
.journal-page,
.ledger-table,
.colophon-card p,
.small-illustration,
.fold-button {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.is-open .card-content,
.is-open .journal-page,
.is-open .ledger-table,
.is-open.colophon-card p,
.is-open .small-illustration,
.is-open .fold-button {
  opacity: 1;
  transform: translateY(0);
}

.is-open .card-content { transition-delay: 200ms; }
.is-open .journal-page, .is-open .ledger-table { transition-delay: 200ms; }
.is-open .fold-button { transition-delay: 350ms; }

.card-illustration {
  width: 76px;
  height: 58px;
  margin-bottom: 1rem;
  opacity: 0.82;
  background: var(--oxidized-brass);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.mushroom-icon { mask-image: radial-gradient(ellipse at center 22%, #000 0 38%, transparent 39%), linear-gradient(#000 0 0); mask-size: 76px 42px, 12px 38px; mask-position: center top, center bottom; }
.fern-icon { mask-image: linear-gradient(78deg, transparent 45%, #000 46% 52%, transparent 53%), radial-gradient(ellipse, #000 0 58%, transparent 60%); mask-size: 76px 58px, 18px 10px; }
.ring-icon { border: 1.5px solid var(--oxidized-brass); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 8px, var(--oxidized-brass) 9px 10px); mask-image: none; }
.beetle-icon { border-radius: 50% 50% 42% 42%; background: var(--oxidized-brass); width: 54px; }

.hand-note,
.marginalia {
  font-family: "Caveat", cursive;
  color: var(--oxidized-brass);
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
}

.fold-button {
  margin-top: 1rem;
  border: 1px solid rgba(184, 160, 122, 0.4);
  background: transparent;
  color: var(--oxidized-brass);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.botanical-divider svg {
  width: 100%;
  height: 80px;
  fill: none;
  stroke: var(--oxidized-brass);
  stroke-width: 1.2;
  opacity: 0.58;
}

.field-notes,
.taxonomy,
.colophon-card {
  width: min(100%, 46rem);
  margin: 0 auto;
}

.field-notes {
  background: rgba(232, 224, 204, 0.82);
  color: var(--weathered-ink);
}

.field-notes h2,
.taxonomy h2,
.colophon-card h2 { margin-bottom: 1.2rem; }
.field-notes h2 { color: var(--weathered-ink); }

.journal-page { position: relative; max-width: 38rem; margin: 0 auto; }
.dropcap::first-letter {
  float: left;
  font-family: "Fraunces", Georgia, serif;
  font-size: 3.5em;
  line-height: 0.82;
  padding: 0.11em 0.12em 0 0;
  text-shadow: 1px 1px 0 rgba(184, 160, 122, 0.3);
}

.marginalia {
  position: absolute;
  width: 9rem;
  color: var(--russet-spore);
}
.marginalia span {
  position: absolute;
  top: 50%;
  width: 5rem;
  border-top: 1px dotted var(--oxidized-brass);
}
.note-one { left: -11rem; top: 4rem; }
.note-one span { left: 8.2rem; }
.note-two { right: -11rem; top: 15rem; }
.note-two span { right: 8.4rem; }

.ledger-table {
  border-top: 1px solid var(--oxidized-brass);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
}

.ledger-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(184, 160, 122, 0.32);
  position: relative;
}

.ledger-head {
  color: var(--oxidized-brass);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ledger-row small {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  color: var(--frosted-lichen);
  transition: max-height 250ms ease-out, color 250ms ease-out;
}

.ledger-row:hover small { max-height: 4rem; color: var(--oxidized-brass); }
.ledger-row:hover { color: var(--moss-amber); }

.colophon {
  display: grid;
  place-items: center;
}

.small-illustration {
  width: 132px;
  height: 82px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--oxidized-brass);
  background:
    radial-gradient(ellipse at 35% 66%, transparent 0 18px, var(--oxidized-brass) 19px 20px, transparent 21px),
    radial-gradient(ellipse at 62% 58%, transparent 0 24px, var(--oxidized-brass) 25px 26px, transparent 27px),
    linear-gradient(90deg, transparent 48%, var(--oxidized-brass) 49% 51%, transparent 52%);
  opacity: 0.7;
}

@keyframes wonkWarm { to { --wonk: 1; font-variation-settings: "WONK" 1, "opsz" 72; } }
@keyframes titleAppear { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .observation-lens { width: min(82vw, 760px); }
  .specimen-grid { grid-template-columns: 1fr; }
  .hud-note { display: none; }
  .marginalia { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 1rem 0; }
  .marginalia span { display: none; }
}

@media (max-width: 620px) {
  .hud-frame { inset: 1.2rem; }
  body.scrolled .hud-frame { inset: 1.4rem; }
  .corner span { display: none; }
  .observation-lens { width: calc(100vw - 4.6rem); }
  .collection, .field-notes, .taxonomy, .colophon { padding: 10vh 0; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.25rem; }
}