:root {
  /* Font compliance phrases: IBM Plex Sans Condensed** from Google Fonts in uppercase with tight tracking. Space Grotesk** Work Sans** for warm readability and rounded human texture. Small status labels */
  --loam: #31271C;
  --clay: #A65F46;
  --gold: #D9A441;
  --sage: #6F7F4F;
  --cream: #F3E3C1;
  --copper: #4C7A6A;
  --violet: #8D6AB8;
  --space: "Space Grotesk", "Work Sans", system-ui, sans-serif;
  --work: "Work Sans", system-ui, sans-serif;
  --plex: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background: var(--loam);
  font-family: var(--work);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(30deg, rgba(217,164,65,.18) 12%, transparent 12.5%, transparent 87%, rgba(217,164,65,.18) 87.5%),
    linear-gradient(150deg, rgba(76,122,106,.13) 12%, transparent 12.5%, transparent 87%, rgba(76,122,106,.13) 87.5%);
  background-size: 92px 160px;
  mix-blend-mode: screen;
}

.mesh-field {
  position: fixed;
  inset: -15%;
  z-index: -3;
  background:
    radial-gradient(circle at 30% 20%, #D9A441, transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(141,106,184,.72), transparent 18%),
    radial-gradient(circle at 18% 72%, rgba(111,127,79,.95), transparent 30%),
    radial-gradient(circle at 68% 70%, rgba(166,95,70,.85), transparent 32%),
    linear-gradient(135deg, #A65F46, #6F7F4F 52%, #8D6AB8);
  filter: blur(18px) saturate(.82);
  opacity: .72;
  animation: meshBreathe 18s ease-in-out infinite alternate;
}

.pollen-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(217,164,65,.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(243,227,193,.55) 0 1px, transparent 2px);
  background-size: 72px 72px, 113px 113px;
  animation: pollenDrift 22s linear infinite;
}

.quest-shell { position: relative; z-index: 1; }

.chapter {
  min-height: 100vh;
  position: relative;
  padding: 9vh 7vw;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.chapter::after {
  content: attr(data-chapter);
  position: absolute;
  right: -3vw;
  bottom: 3vh;
  font-family: var(--space);
  font-size: clamp(3rem, 10vw, 10rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(243,227,193,.12);
  letter-spacing: -.08em;
  z-index: -1;
}

.chapter-tag {
  position: absolute;
  top: 3vh;
  left: 7vw;
  font: 700 .82rem/1 var(--plex);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.domain-title {
  max-width: 10ch;
  margin: 0;
  font-family: var(--space);
  font-size: clamp(5rem, 16vw, 16rem);
  line-height: .72;
  letter-spacing: -.1em;
  text-transform: lowercase;
  color: var(--cream);
  clip-path: polygon(5% 0, 91% 0, 100% 40%, 84% 88%, 18% 100%, 0 55%);
  text-shadow: 8px 4px 0 rgba(166,95,70,.5), -5px -3px 0 rgba(76,122,106,.42);
}

.domain-title::after {
  content: attr(data-text);
  display: block;
  transform: translate(.035em, -.68em);
  color: rgba(141,106,184,.36);
  clip-path: inset(43% 0 35% 0);
}

h2 {
  margin: 0 0 1rem;
  font-family: var(--space);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .84;
  letter-spacing: -.075em;
  text-transform: lowercase;
}

p { font-size: clamp(1rem, 1.6vw, 1.4rem); line-height: 1.55; }

.opening-fragment {
  max-width: 36rem;
  color: var(--cream);
  margin: 2rem 0 0 1vw;
}

.honeycomb {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 8.2rem);
  grid-auto-rows: 7.1rem;
  gap: .45rem 1.35rem;
  transform: rotate(-8deg);
}

.honeycomb-hero { right: 4vw; top: 16vh; }
.honeycomb-orchard { right: 10vw; top: 18vh; transform: rotate(7deg); }
.honeycomb-maze { left: 6vw; top: 15vh; grid-template-columns: repeat(4, 7.2rem); transform: rotate(-13deg); }
.honeycomb-hive { right: 7vw; top: 22vh; transform: rotate(3deg); }
.honeycomb-final { right: 8vw; top: 16vh; transform: rotate(-5deg); }

.hex-cell {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(217,164,65,.72);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: linear-gradient(145deg, rgba(49,39,28,.72), rgba(243,227,193,.1));
  box-shadow: inset 0 0 32px rgba(217,164,65,.08), 0 18px 45px rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  padding: 1.15rem;
  color: var(--cream);
  font: 700 .83rem/1.1 var(--plex);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  transition: transform .8s ease, filter .8s ease;
}

.hex-cell::before,
.hex-cell::after {
  content: "";
  position: absolute;
  inset: 8px;
  clip-path: inherit;
  border: 1px solid rgba(111,127,79,.55);
  opacity: .8;
  pointer-events: none;
}

.hex-cell::after { transform: translate(5px, -4px); border-color: rgba(141,106,184,.38); }

.hex-large { grid-column: span 2; grid-row: span 2; }
.hex-small { transform: scale(.78); }
.hex-glass { background: linear-gradient(150deg, rgba(217,164,65,.42), rgba(243,227,193,.1)); }
.hex-gold { background: linear-gradient(135deg, rgba(217,164,65,.75), rgba(166,95,70,.32)); color: var(--loam); }
.hex-vine { background: rgba(76,122,106,.24); }
.hex-empty { opacity: .62; }
.hex-tilt-a { transform: translateY(3.8rem) rotate(8deg); }
.hex-tilt-b { transform: translateY(-2.1rem) rotate(-11deg); }
.hex-corrupt { animation: softGlitch 3.7s steps(2, end) infinite; }
.active-signal { animation: borderGrow 3.8s ease-in-out infinite; }

.hex-cell:hover { transform: translateY(-10px) rotate(2deg); filter: brightness(1.14); }

.signal-cell,
.final-artifact {
  border: 0;
  cursor: pointer;
  font-family: var(--plex);
}

.signal-cell {
  position: absolute;
  left: 9vw;
  bottom: 10vh;
  width: 18rem;
  height: 15.6rem;
  color: var(--loam);
  background: linear-gradient(135deg, #D9A441, #F3E3C1 58%, #A65F46);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(217,164,65,.65), 0 0 55px rgba(217,164,65,.28);
}

.signal-cell span,
.final-artifact span { position: relative; z-index: 2; }

.lovebot { position: relative; width: 8rem; height: 9rem; }
.bot-head, .bot-body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #4C7A6A, #6F7F4F);
  border: 2px solid #D9A441;
  box-shadow: inset 0 -10px 0 rgba(49,39,28,.2);
}
.bot-head { top: 1.7rem; width: 5.4rem; height: 4.7rem; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.bot-body { bottom: .45rem; width: 4.8rem; height: 4.6rem; border-radius: 46% 46% 52% 52%; background: linear-gradient(160deg, #A65F46, #4C7A6A); }
.bot-head i { position: absolute; top: 1.65rem; width: .9rem; height: .9rem; background: #F3E3C1; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); animation: blink 5s infinite; }
.bot-head i:first-child { left: 1.25rem; }
.bot-head i:nth-child(2) { right: 1.25rem; }
.bot-head b { position: absolute; left: 2.43rem; bottom: .9rem; width: .5rem; height: .5rem; background: #A65F46; border-radius: 50%; }
.antennae span { position: absolute; top: .1rem; width: 2px; height: 2.2rem; background: #D9A441; transform-origin: bottom; }
.antennae span:first-child { left: 2.6rem; transform: rotate(-28deg); }
.antennae span:last-child { right: 2.6rem; transform: rotate(28deg); }
.antennae span::before { content: ""; position: absolute; top: -.55rem; left: -.28rem; width: .7rem; height: .7rem; background: #D9A441; border-radius: 50% 50% 45% 45%; }
.heart-firefly { position: absolute; left: 50%; top: 1.45rem; width: .72rem; height: .72rem; background: #D9A441; border-radius: 50%; box-shadow: 0 0 22px #D9A441; animation: firefly 1.8s infinite; }
.bot-vine { position: absolute; left: .55rem; bottom: .4rem; width: 6.8rem; height: 5.5rem; border-left: 2px solid #6F7F4F; border-bottom: 2px solid #6F7F4F; border-radius: 0 0 0 90%; }

.path-copy { max-width: 38rem; margin-left: 3vw; }
.maze-note { max-width: 35rem; justify-self: end; margin-right: 5vw; }
.bloom-map { max-width: 38rem; margin-left: 4vw; }

.bee-path { position: absolute; width: 52vw; height: 22vw; left: 14vw; bottom: 8vh; overflow: visible; }
.bee-path path { fill: none; stroke: #D9A441; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 17; animation: dashTravel 8s linear infinite; }

.circuit-stem { width: 70%; height: 70%; border-left: 3px solid #6F7F4F; border-bottom: 3px solid #6F7F4F; border-radius: 0 0 0 100%; position: relative; filter: drop-shadow(4px 0 0 rgba(141,106,184,.32)); animation: vineCrawl 5s ease-in-out infinite; }
.circuit-stem::before, .circuit-stem::after { content: ""; position: absolute; width: 1.25rem; height: .7rem; background: #F3E3C1; border-radius: 80% 0; transform: rotate(-30deg); }
.circuit-stem::before { left: -.55rem; top: 30%; }
.circuit-stem::after { right: -.45rem; bottom: -.2rem; background: #D9A441; }
.split { transform: rotate(35deg); }
.bloom { transform: rotate(-25deg) scale(1.08); }

.pressed-flower::before { background: radial-gradient(circle at center, #A65F46 0 16%, transparent 17%), radial-gradient(ellipse, rgba(243,227,193,.7) 0 55%, transparent 56%); border: 0; transform: rotate(20deg); }

.confession-strip { display: grid; gap: 1rem; max-width: 48rem; }
.glitch-line { display: block; padding: 1rem 1.3rem; background: rgba(243,227,193,.1); border-left: 3px solid #A65F46; font: 600 clamp(1.2rem, 2.6vw, 2.1rem)/1.15 var(--space); letter-spacing: -.04em; }
.sealed-message { opacity: 0; transform: translateY(18px); color: var(--gold); font-family: var(--space); transition: .8s ease; }
.sealed-message.show { opacity: 1; transform: translateY(0); }

.cursor-garden { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.clover-trace { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); opacity: .8; animation: cloverFade 1s ease forwards; }
.clover-trace::before { content: "✤"; color: #D9A441; font-size: 18px; text-shadow: 2px 0 #A65F46, -2px 0 #6F7F4F; }

.is-lit .hex-cell { animation-play-state: running; }

@keyframes meshBreathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.08) rotate(4deg); } }
@keyframes pollenDrift { to { background-position: 72px 144px, -113px 226px; } }
@keyframes borderGrow { 0%,100% { box-shadow: inset 0 0 16px rgba(217,164,65,.12), 0 0 0 0 rgba(217,164,65,.55); } 50% { box-shadow: inset 0 0 34px rgba(217,164,65,.22), 0 0 0 8px rgba(217,164,65,0); } }
@keyframes softGlitch { 0%,100% { transform: translate(0); } 38% { transform: translate(4px, -2px); } 42% { transform: translate(-3px, 2px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes firefly { 0%,100% { opacity: .35; transform: translateX(-50%) scale(.8); } 50% { opacity: 1; transform: translateX(-50%) scale(1.3); } }
@keyframes dashTravel { to { stroke-dashoffset: -160; } }
@keyframes vineCrawl { 0%,100% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 18% 12% 0); } }
@keyframes cloverFade { to { opacity: 0; transform: translate(-50%, -80%) rotate(80deg) scale(.4); } }

@media (max-width: 900px) {
  .chapter { min-height: 120vh; padding: 12vh 6vw; align-items: start; }
  .honeycomb { position: relative; right: auto; left: auto; top: auto; margin-top: 4rem; grid-template-columns: repeat(2, minmax(6.4rem, 8rem)); transform: rotate(-5deg); }
  .domain-title { font-size: clamp(4rem, 22vw, 8rem); }
  .signal-cell { position: relative; left: auto; bottom: auto; margin-top: 2rem; width: 14rem; height: 12rem; }
  .maze-note, .path-copy, .bloom-map { margin: 0; justify-self: start; }
  .bee-path { width: 84vw; left: 6vw; }
}