:root {
  /* Compliance typography tokens: Merriweather Sans** in 400/500 for poetic body copy and small explanatory fragments. Roboto Condensed letters appears like a carved stone signal. Roboto Condensed** in 700/900 for the `lov.st` wordmark. */
  --soil: #17110F;
  --amethyst: #4A235F;
  --moss: #2F7D45;
  --sapphire: #163F72;
  --garnet: #9E2146;
  --citrine: #D7B84A;
  --ivory: #E7D7B1;
  --copper: #A86132;
  --display: "Roboto Condensed", "Arial Narrow", Roboto, system-ui, sans-serif;
  --body: "Merriweather Sans", Merriweather, Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(circle at 18% 10%, rgba(74, 35, 95, .55), transparent 28rem),
    radial-gradient(circle at 88% 38%, rgba(22, 63, 114, .35), transparent 28rem),
    linear-gradient(135deg, #090706 0%, var(--soil) 48%, #0d160f 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

body.signal-tuned .clearing { filter: saturate(1.18) contrast(1.05); }
body.signal-tuned .zpath i,
body.signal-tuned .signal-map span.active { box-shadow: 0 0 28px var(--citrine), 0 0 42px var(--moss); }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 15% 20%, rgba(231, 215, 177, .18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(106deg, transparent 0 8px, rgba(168, 97, 50, .12) 9px 10px);
  mix-blend-mode: overlay;
}

.edge {
  position: fixed;
  left: 0;
  width: 100%;
  height: 9rem;
  z-index: 20;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 16rem 8rem;
  opacity: .85;
}

.edge-top {
  top: 0;
  background-image: radial-gradient(ellipse at 50% -10%, #0a140b 0 42%, transparent 45%), radial-gradient(ellipse at 20% 10%, var(--moss) 0 8%, transparent 10%);
}

.edge-bottom {
  bottom: -2rem;
  transform: rotate(180deg);
  background-image: radial-gradient(ellipse at 50% -10%, #0a140b 0 42%, transparent 45%), radial-gradient(ellipse at 80% 8%, var(--amethyst) 0 7%, transparent 9%);
}

.signal-map {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .8rem;
  z-index: 35;
}

.signal-map span {
  width: .72rem;
  height: .72rem;
  border: 1px solid var(--copper);
  background: var(--soil);
  transform: rotate(45deg);
  transition: background .4s, box-shadow .4s, border-color .4s;
}

.signal-map span.active { background: var(--citrine); border-color: var(--ivory); }

.forage { position: relative; }

.clearing {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, minmax(4rem, auto));
  gap: clamp(1rem, 2vw, 2rem);
  background:
    radial-gradient(circle at var(--gx, 70%) var(--gy, 25%), rgba(215, 184, 74, .12), transparent 16rem),
    radial-gradient(circle at 12% 82%, rgba(47, 125, 69, .25), transparent 22rem);
}

.clearing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(115deg, transparent 0 46%, rgba(215, 184, 74, .12) 47%, transparent 49% 100%),
    radial-gradient(ellipse at 40% 115%, rgba(74, 35, 95, .42), transparent 45%);
}

.clearing::after {
  content: "";
  position: absolute;
  inset: -6rem;
  z-index: -1;
  opacity: .42;
  background-image:
    radial-gradient(ellipse at 12% 30%, transparent 0 50%, rgba(47, 125, 69, .55) 51% 53%, transparent 54%),
    radial-gradient(ellipse at 80% 76%, transparent 0 46%, rgba(168, 97, 50, .5) 47% 49%, transparent 50%),
    repeating-linear-gradient(42deg, transparent 0 4.8rem, rgba(231, 215, 177, .06) 4.9rem 5rem);
}

.clearing-found { --gx: 18%; --gy: 22%; }
.clearing-antenna { background-color: rgba(47, 125, 69, .08); }
.clearing-beetle { background-color: rgba(22, 63, 114, .12); }
.clearing-seed { background-color: rgba(74, 35, 95, .12); }
.clearing-vow { background-color: rgba(158, 33, 70, .1); }

.moon-stone {
  grid-column: 1 / 8;
  grid-row: 1 / 5;
  align-self: center;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 44% 56% 49% 51% / 56% 43% 57% 44%;
  background: linear-gradient(140deg, rgba(231, 215, 177, .14), rgba(23, 17, 15, .72)), #201915;
  border: 2px solid rgba(231, 215, 177, .18);
  box-shadow: inset 0 0 40px rgba(0,0,0,.75), 0 0 120px rgba(215, 184, 74, .16);
  transform: rotate(-3deg);
}

.rune {
  margin: 0;
  color: var(--citrine);
  font-family: UnifrakturCook, fantasy;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: .8;
  text-shadow: 0 0 24px var(--citrine);
}

h1, h2, .chapter, .stamp, .talismans, .charm { font-family: var(--display); text-transform: uppercase; }

h1 {
  margin: 0;
  font-size: clamp(5rem, 21vw, 18rem);
  letter-spacing: -.08em;
  line-height: .72;
  font-weight: 900;
  color: var(--ivory);
  text-shadow: .06em .06em 0 #000, 0 0 32px rgba(215, 184, 74, .28);
}

.carved, .root-copy {
  display: block;
  color: rgba(231, 215, 177, .72);
  letter-spacing: .16em;
  font-size: .78rem;
  text-transform: uppercase;
}

.plaque {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: linear-gradient(145deg, rgba(23, 17, 15, .88), rgba(74, 35, 95, .45));
  border: 1px solid rgba(231, 215, 177, .28);
  clip-path: polygon(3% 8%, 96% 0, 100% 86%, 92% 100%, 0 94%);
  box-shadow: 0 1.8rem 3rem rgba(0,0,0,.36), inset 0 0 0 2px rgba(168, 97, 50, .18);
}

.plaque::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 2rem;
  bottom: 1rem;
  height: .28rem;
  background: linear-gradient(90deg, transparent, var(--moss), var(--citrine), transparent);
  border-radius: 50%;
  transform-origin: left;
  animation: vineDraw 5s ease-in-out infinite;
}

.plaque-right { grid-column: 8 / 13; grid-row: 2 / 5; }
.plaque-left { grid-column: 1 / 6; grid-row: 2 / 5; }
.ivory { background: linear-gradient(145deg, rgba(231, 215, 177, .94), rgba(215, 184, 74, .78)); color: var(--soil); }
.vow-plaque { grid-column: 4 / 10; grid-row: 2 / 5; text-align: center; }

.stamp {
  margin: 0 0 .8rem;
  color: var(--citrine);
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 700;
}

.ivory .stamp { color: var(--garnet); }

h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 5vw, 5.5rem);
  line-height: .86;
  letter-spacing: -.045em;
  font-weight: 900;
}

h2 span { position: relative; }
h2 span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.14em;
  height: .12em;
  width: 100%;
  background: var(--moss);
  border-radius: 999px 40% 999px 30%;
  transform-origin: left;
  animation: underlineRoot 4.5s ease-in-out infinite;
  box-shadow: .5rem .18rem 0 -.08rem var(--copper), 1.4rem .28rem 0 -.11rem var(--citrine);
}

.plaque p:not(.stamp) {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.8;
}

.zpath { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.zpath i {
  position: absolute;
  display: block;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--citrine), var(--moss), transparent);
  filter: drop-shadow(0 0 12px var(--citrine));
  transform-origin: left;
  animation: pathGlow 6s ease-in-out infinite;
}
.zpath i:nth-child(1) { --r: 6deg; left: 13%; top: 23%; width: 36%; transform: rotate(6deg); }
.zpath i:nth-child(2) { --r: 126deg; left: 44%; top: 30%; width: 34%; transform: rotate(126deg); animation-delay: .5s; }
.zpath i:nth-child(3) { --r: -4deg; left: 42%; top: 68%; width: 42%; transform: rotate(-4deg); animation-delay: 1s; }

.relic, .botanical-device, .beetle, .seed-pod, .underground-heart { position: relative; }
.shell-relic { grid-column: 7 / 10; grid-row: 5 / 7; width: 12rem; height: 9rem; }
.snail {
  position: absolute; inset: 1rem;
  border-radius: 55% 45% 48% 52%;
  background: radial-gradient(circle at 44% 48%, var(--garnet) 0 9%, transparent 10%), repeating-radial-gradient(circle at 40% 50%, var(--copper) 0 .45rem, #2b1c17 .5rem .82rem);
  box-shadow: 0 0 32px rgba(158, 33, 70, .55);
}
.diode { position: absolute; right: 1.4rem; top: 3.6rem; width: 2rem; height: 2rem; background: var(--garnet); border-radius: 50%; box-shadow: 0 0 28px var(--garnet); animation: pulse 2.4s infinite; }

.chapter {
  grid-column: 1 / 5;
  grid-row: 1 / 2;
  color: var(--citrine);
  letter-spacing: .22em;
  font-weight: 900;
}
.vertical { writing-mode: vertical-rl; grid-column: 1 / 2; grid-row: 1 / 6; font-size: clamp(1.4rem, 3vw, 3rem); }

.antenna { grid-column: 8 / 12; grid-row: 2 / 6; min-height: 28rem; }
.dish { position: absolute; right: 18%; top: 12%; width: 13rem; height: 7rem; border-radius: 50% 50% 12% 12%; border: .6rem solid var(--copper); border-bottom: none; transform: rotate(-18deg); background: rgba(22, 63, 114, .35); }
.mast { position: absolute; right: 43%; top: 28%; width: .8rem; height: 18rem; background: linear-gradient(var(--citrine), var(--copper), var(--soil)); transform: rotate(8deg); }
.bulb { position: absolute; right: 37%; top: 18%; width: 3rem; height: 3rem; border-radius: 50%; background: var(--citrine); box-shadow: 0 0 44px var(--citrine); animation: pulse 3s infinite; }
.rings { position: absolute; right: 18%; top: 4%; width: 13rem; height: 13rem; border: 2px solid rgba(215, 184, 74, .28); border-radius: 50%; animation: spin 18s linear infinite; }

.talismans { grid-column: 5 / 9; grid-row: 5 / 6; list-style: none; display: flex; gap: .8rem; flex-wrap: wrap; padding: 0; margin: 0; transform: rotate(-5deg); }
.talismans li { padding: .55rem .9rem; color: var(--soil); background: var(--ivory); border: 2px solid var(--copper); box-shadow: .35rem .35rem 0 var(--garnet); }

.beetle { grid-column: 3 / 8; grid-row: 2 / 6; min-height: 28rem; }
.beetle span { position: absolute; }
.body { left: 42%; top: 20%; width: 4.8rem; height: 19rem; border-radius: 48%; background: linear-gradient(90deg, var(--soil), var(--sapphire), var(--soil)); box-shadow: 0 0 35px rgba(22, 63, 114, .85); }
.wing { top: 18%; width: 12rem; height: 19rem; border-radius: 70% 30% 70% 30%; background: linear-gradient(135deg, rgba(22, 63, 114, .88), rgba(47, 125, 69, .5), rgba(215, 184, 74, .28)); border: 2px solid var(--citrine); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.wing-left { right: 50%; transform-origin: right center; transform: rotate(-8deg); }
.wing-right { left: 50%; transform-origin: left center; transform: scaleX(-1) rotate(-8deg); }
.beetle.open .wing-left { transform: rotate(-34deg) translateX(-1rem); }
.beetle.open .wing-right { transform: scaleX(-1) rotate(-34deg) translateX(-1rem); }
.root-copy { grid-column: 4 / 11; grid-row: 6 / 7; color: var(--citrine); }

.seed-pod { grid-column: 7 / 12; grid-row: 1 / 6; min-height: 32rem; }
.pod-core { position: absolute; left: 20%; top: 8%; width: min(42vw, 24rem); height: min(62vw, 34rem); border-radius: 55% 45% 60% 40%; background: radial-gradient(circle at 45% 30%, var(--citrine), transparent 12%), linear-gradient(150deg, var(--moss), #0d2616 48%, var(--amethyst)); border: 3px solid var(--copper); box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 0 70px rgba(47, 125, 69, .38); transform: rotate(12deg); }
.vein { position: absolute; height: 3px; background: var(--citrine); box-shadow: 0 0 18px var(--citrine); transform-origin: left; opacity: .35; animation: vein 4s infinite; }
.v1 { left: 34%; top: 27%; width: 14rem; transform: rotate(40deg); }
.v2 { left: 36%; top: 42%; width: 16rem; transform: rotate(-18deg); animation-delay: .45s; }
.v3 { left: 32%; top: 58%; width: 15rem; transform: rotate(22deg); animation-delay: .9s; }
.v4 { left: 38%; top: 72%; width: 10rem; transform: rotate(-36deg); animation-delay: 1.35s; }

.charm {
  grid-column: 2 / 5;
  grid-row: 5 / 6;
  align-self: end;
  justify-self: start;
  border: 2px solid var(--citrine);
  color: var(--ivory);
  background: linear-gradient(135deg, var(--garnet), var(--amethyst));
  padding: 1rem 1.2rem;
  letter-spacing: .18em;
  box-shadow: .45rem .45rem 0 var(--soil), 0 0 28px rgba(158, 33, 70, .5);
  cursor: pointer;
  transform: rotate(-4deg);
}

.underground-heart { grid-column: 2 / 5; grid-row: 2 / 5; min-height: 22rem; }
.underground-heart span { position: absolute; left: 22%; top: 20%; width: 12rem; height: 12rem; background: var(--garnet); transform: rotate(45deg); box-shadow: 0 0 70px var(--garnet); animation: heart 2.6s infinite; }
.underground-heart span::before, .underground-heart span::after { content: ""; position: absolute; width: 12rem; height: 12rem; background: var(--garnet); border-radius: 50%; }
.underground-heart span::before { left: -6rem; }
.underground-heart span::after { top: -6rem; }

.root-nav { grid-column: 8 / 13; grid-row: 5 / 6; display: flex; gap: .9rem; flex-wrap: wrap; align-self: end; }
.root-nav a { color: var(--ivory); text-decoration: none; border-bottom: 3px solid var(--moss); font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; }

[data-float] { transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .18s linear; }

@keyframes vineDraw { 0%,100% { transform: scaleX(.12); opacity: .45; } 45%,70% { transform: scaleX(1); opacity: 1; } }
@keyframes underlineRoot { 0%,100% { transform: scaleX(.25); } 55% { transform: scaleX(1); } }
@keyframes pathGlow { 0% { opacity: .12; transform: scaleX(.1) rotate(var(--r, 0deg)); } 45%,75% { opacity: 1; } 100% { opacity: .18; transform: scaleX(1); } }
@keyframes pulse { 0%,100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes vein { 0%,100% { opacity: .2; filter: hue-rotate(0deg); } 50% { opacity: 1; filter: hue-rotate(50deg); } }
@keyframes heart { 0%,100% { transform: rotate(45deg) scale(.92); } 50% { transform: rotate(45deg) scale(1.06); } }

@media (max-width: 820px) {
  .clearing { display: block; padding: 6rem 1.2rem; }
  .moon-stone, .plaque, .shell-relic, .antenna, .beetle, .seed-pod, .underground-heart { margin: 1rem 0 2rem; width: auto; min-height: 18rem; }
  .plaque { min-height: auto; }
  .signal-map { right: .5rem; }
  .vertical { writing-mode: horizontal-tb; }
  .root-nav { margin-top: 2rem; }
}