:root {
  /* Typography compliance notes: IBM Plex Mono** from Google Fonts sparingly for tiny engraved coordinates; Source Sans 3** from Google Fonts for friendly interface labels. */
  --loam: #2F261C;
  --moss: #4F6F3A;
  --mushroom: #8A5A3B;
  --gold: #C1A15A;
  --fern: #1F3D2B;
  --parchment: #E8D8B8;
  --clay: #B4745D;
  --soft-shadow: rgba(47, 38, 28, 0.24);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--loam);
  font-family: "Source Sans 3", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(193, 161, 90, 0.24), transparent 28rem),
    radial-gradient(circle at 84% 32%, rgba(180, 116, 93, 0.16), transparent 25rem),
    linear-gradient(112deg, #E8D8B8 0%, #dfc99f 52%, #E8D8B8 100%);
  overflow-x: hidden;
}

.spore-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.38;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, rgba(47, 38, 28, 0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(79, 111, 58, 0.13) 0 0.8px, transparent 1.3px),
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(47,38,28,0.04));
  background-size: 13px 17px, 19px 23px, 100% 100%;
}

.trail-nav {
  position: fixed;
  z-index: 50;
  top: 1.1rem;
  left: 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.trail-nav a {
  color: var(--loam);
  text-decoration: none;
}

.twig-mark {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.95rem;
  padding: 0.44rem 0.78rem;
  border: 1px solid rgba(47, 38, 28, 0.24);
  border-radius: 57% 43% 46% 54% / 52% 35% 65% 48%;
  background: rgba(232, 216, 184, 0.62);
  box-shadow: 0 0.35rem 1rem rgba(47, 38, 28, 0.12);
}

.trail-tokens {
  display: flex;
  gap: 0.48rem;
  padding-top: 0.18rem;
}

.trail-tokens a {
  display: inline-flex;
  min-width: 3.1rem;
  justify-content: center;
  padding: 0.38rem 0.58rem;
  border-radius: 44% 56% 51% 49% / 61% 44% 56% 39%;
  color: #E8D8B8;
  background: var(--moss);
  box-shadow: inset 0 -0.2rem 0 rgba(31, 61, 43, 0.28), 0 0.35rem 0.75rem rgba(47, 38, 28, 0.14);
  transition: background 900ms ease, transform 700ms ease;
}

.trail-tokens a:hover,
.trail-tokens a.active {
  background: var(--fern);
  transform: rotate(-2deg) translateY(0.08rem);
}

.story-vine {
  position: absolute;
  top: 16vh;
  left: 50%;
  width: min(96vw, 1200px);
  height: 4300px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}

.story-vine path {
  fill: none;
  stroke: var(--moss);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--vine-progress, 0));
  filter: drop-shadow(0 8px 0 rgba(193, 161, 90, 0.28));
}

.clearing {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(5.8rem, 9vw, 9rem) clamp(1.2rem, 6vw, 6rem);
  isolation: isolate;
}

.clearing::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  z-index: -1;
  border-radius: 52% 48% 56% 44% / 46% 58% 42% 54%;
  background: radial-gradient(circle at 36% 40%, rgba(255,255,255,0.17), transparent 35%), rgba(232, 216, 184, 0.22);
}

.scene-copy {
  position: relative;
  z-index: 4;
  max-width: 45rem;
}

.mono-knot,
.stone-stack,
.card-back small {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.11em;
  text-transform: lowercase;
}

.mono-knot {
  margin: 0 0 1rem;
  color: var(--mushroom);
  font-size: 0.78rem;
}

h1,
h2 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.055em;
  color: var(--loam);
}

h1 { font-size: clamp(4.2rem, 14vw, 12.5rem); }
h2 { font-size: clamp(3.1rem, 9vw, 8.5rem); }

p {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.65;
}

.first-step {
  min-height: 112vh;
  justify-items: end;
  align-items: end;
  padding-bottom: 10vh;
}

.hero-copy {
  margin-right: 5vw;
  text-align: left;
}

.poetic {
  max-width: 35rem;
  margin-left: clamp(0rem, 7vw, 8rem);
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  color: var(--fern);
}

.whisper {
  display: inline-block;
  margin-left: clamp(2rem, 14vw, 14rem);
  color: var(--clay);
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
}

.hero-curve-wrap {
  position: absolute;
  inset: 10vh 2vw auto 0;
  width: min(74rem, 98vw);
  height: 62vh;
  z-index: 1;
}

.hero-curve {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-curve path {
  fill: none;
  stroke: var(--moss);
  stroke-width: 28;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawFirstCurve 3.6s cubic-bezier(.55,.05,.22,.98) 0.3s forwards, mossPulse 7s ease-in-out 4s infinite;
}

@keyframes drawFirstCurve { to { stroke-dashoffset: 0; } }
@keyframes mossPulse { 50% { stroke: #1F3D2B; } }

.mushroom {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 0.28rem;
  transform-origin: bottom center;
  transition: transform 1200ms ease;
}

.mushroom i {
  display: block;
  width: 1.3rem;
  height: 2.2rem;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(#8A5A3B 0 43%, #E8D8B8 44% 100%);
  box-shadow: inset 0 0.15rem 0 #B4745D;
}

.cluster-a { left: 12vw; bottom: 18vh; }
.clearing.in-view .mushroom { transform: rotate(-5deg) translateY(-0.25rem); }

.dew-dot {
  position: absolute;
  z-index: 5;
  right: 18vw;
  top: 31vh;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(193, 161, 90, 0.75);
  border-radius: 50%;
  color: var(--moss);
  background: rgba(232, 216, 184, 0.52);
  box-shadow: 0 0 1.3rem rgba(193, 161, 90, 0.2), inset 0 0 1rem rgba(255,255,255,0.18);
  cursor: pointer;
  transition: box-shadow 900ms ease, color 900ms ease, transform 900ms ease;
}

.dew-dot:hover,
.dew-dot.bright {
  color: var(--clay);
  transform: scale(1.08);
  box-shadow: 0 0 2.4rem rgba(193, 161, 90, 0.72), inset 0 0 1.2rem rgba(255,255,255,0.34);
}

.moss-line {
  grid-template-columns: 1fr 1fr;
  gap: 7vw;
}

.narrow-copy {
  justify-self: start;
  max-width: 33rem;
  margin-left: 6vw;
}

.stone-stack {
  z-index: 4;
  display: grid;
  gap: 1rem;
  justify-self: center;
  transform: rotate(4deg);
}

.stone-stack span {
  padding: 1.2rem 2.1rem;
  border-radius: 50% 46% 54% 44% / 55% 45% 58% 42%;
  color: #E8D8B8;
  background: var(--fern);
  box-shadow: inset 0 -0.42rem 0 rgba(47, 38, 28, 0.23), 0 1rem 1.8rem rgba(47, 38, 28, 0.18);
}

.stone-stack span:nth-child(2) { margin-left: 2rem; background: var(--moss); }
.stone-stack span:nth-child(3) { margin-left: -1rem; background: var(--mushroom); }

.fern-shadow {
  position: absolute;
  right: -6rem;
  bottom: 3vh;
  width: min(31rem, 60vw);
  opacity: 0.22;
}

.fern-shadow path {
  fill: none;
  stroke: var(--fern);
  stroke-width: 9;
  stroke-linecap: round;
}

.pocket-charms {
  align-content: center;
  gap: 4rem;
}

.charms-heading {
  justify-self: start;
  margin-left: 8vw;
  max-width: 39rem;
}

.charm-field {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  width: min(70rem, 100%);
  perspective: 1200px;
}

.charm-card {
  position: relative;
  width: clamp(12rem, 20vw, 16.5rem);
  height: clamp(16rem, 26vw, 21rem);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 1100ms cubic-bezier(.2,.68,.2,1.02);
}

.charm-card:nth-child(1) { transform: rotate(-7deg); }
.charm-card:nth-child(2) { transform: translateY(1.3rem) rotate(4deg); }
.charm-card:nth-child(3) { transform: translateY(-0.7rem) rotate(-2deg); }
.charm-card:nth-child(4) { transform: translateY(1rem) rotate(7deg); }
.charm-card.flipped:nth-child(n),
.charm-card:hover:nth-child(n) { transform: rotateY(180deg) rotate(1deg); }

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  border: 2px solid rgba(47, 38, 28, 0.22);
  border-radius: 64% 36% 48% 52% / 42% 56% 44% 58%;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 0.55rem rgba(193, 161, 90, 0.13), inset 0 -1rem 1.4rem rgba(47, 38, 28, 0.12), 0 1.3rem 2.1rem rgba(47, 38, 28, 0.2);
}

.card-front {
  color: var(--loam);
  background:
    radial-gradient(ellipse at 50% 36%, rgba(79,111,58,0.32) 0 16%, transparent 17%),
    radial-gradient(ellipse at 50% 53%, rgba(79,111,58,0.24) 0 23%, transparent 24%),
    #d7bf8f;
}

.card-front b {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 1.55rem;
}

.card-front i { color: var(--mushroom); }

.card-back {
  transform: rotateY(180deg);
  color: var(--parchment);
  background: linear-gradient(145deg, #1F3D2B, #2F261C);
}

.card-back em {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.55;
}

.card-back small { color: var(--gold); }

.deep-bend {
  color: var(--parchment);
  background:
    radial-gradient(circle at 70% 25%, rgba(180,116,93,0.28), transparent 22rem),
    linear-gradient(160deg, #1F3D2B, #2F261C 74%);
}

.deep-bend h2,
.deep-bend p { color: var(--parchment); }
.deep-bend .mono-knot { color: var(--gold); }

.texture-bowl {
  position: relative;
  z-index: 4;
  width: min(64rem, 94vw);
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 48% 52% 45% 55% / 58% 40% 60% 42%;
  background: rgba(31, 61, 43, 0.56);
  box-shadow: inset 0 0 4rem rgba(232, 216, 184, 0.06), 0 2rem 6rem rgba(0,0,0,0.24);
}

.large-poem {
  max-width: 52rem;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.45rem, 3vw, 2.65rem);
  font-style: italic;
}

.beetle {
  position: absolute;
  z-index: 5;
  left: var(--beetle-x, 16%);
  top: var(--beetle-y, 70%);
  width: 1.65rem;
  height: 2.15rem;
  border-radius: 55% 45% 48% 52%;
  background: #2F261C;
  box-shadow: inset 0.34rem 0 #4F6F3A, 0 0.18rem 0 #C1A15A;
  transition: transform 800ms ease;
}

.beetle span {
  position: absolute;
  width: 2.4rem;
  height: 1px;
  left: -0.4rem;
  top: 0.8rem;
  background: rgba(193, 161, 90, 0.8);
  box-shadow: 0 0.46rem rgba(193, 161, 90, 0.7), 0 -0.46rem rgba(193, 161, 90, 0.7);
}

.mud-arrows {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  display: flex;
  gap: 1.1rem;
}

.mud-arrows span {
  width: 3.8rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(138, 90, 59, 0.58);
  transform: rotate(-18deg);
}

.home-dusk {
  min-height: 100vh;
}

.seal {
  position: relative;
  z-index: 4;
  width: min(38rem, 92vw);
  text-align: center;
}

.seal svg {
  width: min(23rem, 80vw);
  margin-bottom: -3rem;
  overflow: visible;
}

.seal-vine {
  fill: none;
  stroke: var(--moss);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 950;
  stroke-dashoffset: 950;
  transition: stroke-dashoffset 2500ms cubic-bezier(.39,.01,.19,1);
}

.home-dusk.in-view .seal-vine { stroke-dashoffset: 0; }

.seal strong {
  display: inline-block;
  margin-top: 1rem;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.35rem;
  color: var(--mushroom);
}

@media (max-width: 820px) {
  .trail-nav { flex-direction: column; }
  .trail-tokens { flex-wrap: wrap; max-width: 11rem; }
  .first-step { justify-items: start; }
  .hero-copy { margin: 0; }
  .moss-line { grid-template-columns: 1fr; }
  .narrow-copy,
  .charms-heading { margin-left: 0; }
  .story-vine { left: 42%; opacity: 0.54; }
  .charm-card { width: 42vw; min-width: 10rem; }
}