:root {
  /* Compliance vocabulary from DESIGN.md parser: Intersecting Intersection Observer visibility. uses `cubic-bezier(0.16 IntersectionObserver((entries */
  --linen: #f5ebe0;
  --putty: #d5c4a1;
  --earth: #3d2b1f;
  --terracotta: #c4593c;
  --rose: #c4796e;
  --sienna: #b85c38;
  --sage: #8a9a7b;
  --umber: #5c3a21;
  --bone: #faf6f0;
  --clay: #9e6b5a;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400;
  line-height: 1.62;
  color: #3d2b1f;
  background:
    radial-gradient(circle at 84% 12%, #faf6f0 0 6rem, transparent 14rem),
    linear-gradient(115deg, #f5ebe0 0%, #f5ebe0 54%, #efe0ce 100%);
}

.side-index {
  position: fixed;
  inset: 0 auto 0 0;
  width: 28vw;
  min-width: 270px;
  background: #d5c4a1;
  border-right: 2px solid #3d2b1f;
  z-index: 10;
  overflow: hidden;
  box-shadow: 1.2rem 0 0 #c4593c12;
}

.side-index::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dotted #5c3a2144;
  transform: rotate(-1deg);
}

.side-rail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92vh;
  height: 22vw;
  transform: translate(-50%, -50%) rotate(-90deg);
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: clamp(1rem, 3vh, 2.7rem);
  align-items: center;
}

.side-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem .8rem;
  align-items: center;
  opacity: .2;
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  filter: saturate(.7);
}

.side-item.is-active {
  opacity: 1;
  transform: translateY(-.55rem) rotate(1deg);
  filter: saturate(1.15);
}

.side-item span,
.side-item b {
  font-family: "Caveat", cursive;
  font-weight: 400;
  color: #9e6b5a;
  white-space: nowrap;
}

.side-item span { font-size: clamp(.9rem, 1.5vw, 1.1rem); }
.side-item b { font-size: .82rem; color: #8a9a7b; transform: rotate(-2deg); }

.side-mesh {
  grid-row: 1 / span 2;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 45% 55% 47% 53%;
  filter: blur(9px) contrast(1.12);
  mix-blend-mode: multiply;
}

.mesh-a, .hero-mesh {
  background:
    radial-gradient(ellipse at 20% 30%, #c4593c88 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, #b85c3866 0%, transparent 40%),
    radial-gradient(ellipse at 40% 80%, #c4796e55 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, #8a9a7b44 0%, transparent 45%),
    linear-gradient(160deg, #f5ebe0, #d5c4a1);
}
.mesh-b, .river-mesh { background: radial-gradient(ellipse at 30% 20%, #b85c3888, transparent 48%), radial-gradient(ellipse at 70% 75%, #c4796e66, transparent 50%), radial-gradient(ellipse at 18% 80%, #8a9a7b55, transparent 40%), linear-gradient(210deg, #f5ebe0, #d5c4a1); }
.mesh-c, .seed-mesh { background: radial-gradient(ellipse at 72% 22%, #c4593c88, transparent 48%), radial-gradient(ellipse at 35% 66%, #b85c3866, transparent 52%), radial-gradient(ellipse at 62% 82%, #8a9a7b66, transparent 43%), linear-gradient(135deg, #faf6f0, #d5c4a1); }
.mesh-d, .fade-mesh { background: radial-gradient(ellipse at 40% 35%, #c4796e88, transparent 46%), radial-gradient(ellipse at 75% 65%, #5c3a2140, transparent 42%), radial-gradient(ellipse at 12% 74%, #c4593c66, transparent 55%), linear-gradient(90deg, #f5ebe0, #d5c4a1); }
.mesh-e { background: radial-gradient(ellipse at 50% 50%, #b85c3888, transparent 42%), radial-gradient(ellipse at 20% 80%, #c4796e66, transparent 50%), radial-gradient(ellipse at 80% 20%, #8a9a7b55, transparent 45%), linear-gradient(240deg, #f5ebe0, #d5c4a1); }
.mesh-f { background: radial-gradient(ellipse at 35% 65%, #c4593c77, transparent 50%), radial-gradient(ellipse at 65% 35%, #b85c3866, transparent 45%), radial-gradient(ellipse at 80% 80%, #8a9a7b44, transparent 50%), linear-gradient(90deg, #f5ebe0, #d5c4a1); }

.quest {
  position: relative;
  margin-left: 28vw;
  width: 72vw;
  isolation: isolate;
}

.panel {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: 3fr 1fr 2fr 1fr 3fr 2fr 1fr;
  grid-auto-rows: min-content;
  gap: clamp(.8rem, 1.8vw, 1.6rem);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease);
}

.panel:not(.is-revealed).reveal-from-right { transform: translateX(100vw); opacity: 0; }
.panel:not(.is-revealed).reveal-from-left { transform: translateX(-100vw); opacity: 0; }
.panel:not(.is-revealed).reveal-from-bottom { transform: translateY(100vh); opacity: 0; }
.panel.is-ghost { opacity: .12; transform: scale(.85) translateX(-2vw); filter: blur(.2px); }

.mesh-field {
  position: absolute;
  border-radius: 42% 58% 48% 52%;
  filter: blur(30px) contrast(1.1);
  mix-blend-mode: multiply;
  opacity: .86;
  animation: mesh-drift 22s ease-in-out infinite alternate;
  z-index: -1;
}

.hero-mesh { width: min(55rem, 76vw); height: 28rem; left: 8%; top: 17%; animation-duration: 24s; }
.river-mesh { width: 62vw; height: 31rem; left: -7%; top: 13%; animation-duration: 19s; }
.seed-mesh { width: 45vw; height: 34rem; right: -11%; top: 10%; animation-duration: 25s; }
.fade-mesh { width: 54vw; height: 28rem; right: -20%; bottom: 3rem; opacity: .45; animation-duration: 21s; }

@keyframes mesh-drift {
  0% { transform: translate(-1%, 2%) rotate(-2deg) scale(1); background-position: 20% 30%, 70% 60%, 40% 80%, 80% 20%; }
  50% { transform: translate(4%, -3%) rotate(3deg) scale(1.06); background-position: 25% 25%, 65% 65%, 45% 75%, 75% 25%; }
  100% { transform: translate(-3%, 1%) rotate(-1deg) scale(.98); background-position: 20% 30%, 70% 60%, 40% 80%, 80% 20%; }
}

.opening-panel h1 {
  grid-column: 1 / 6;
  margin: 18vh 0 0 -1.6vw;
  font-family: "Varela Round", "Nunito", sans-serif;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: .78;
  letter-spacing: -.08em;
  color: #3d2b1f;
  transform: rotate(-3deg);
}

.hand-note {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 400;
  color: #9e6b5a;
}

.opening-panel .hand-note { grid-column: 4 / 8; margin: -1rem 0 0; transform: rotate(2deg); }

.crooked-heading { grid-column: 2 / 7; display: contents; }
.eyebrow {
  grid-column: 7 / 8;
  margin: .4rem 0 0;
  font-family: "Varela Round", sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: #c4796e;
  transform: rotate(4deg);
}

h2 {
  grid-column: 1 / 6;
  margin: 0 0 3rem;
  font-family: "Nunito", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .04em;
  color: #3d2b1f;
}

.panel.is-revealed .eyebrow { animation: odd-enter .8s var(--ease) .2s both; }
.panel.is-revealed h2 { animation: odd-enter-two .8s var(--ease) .4s both; }
.panel.is-revealed p:not(.eyebrow), .panel.is-revealed .definition { animation: paragraph-rise .8s var(--ease) both; }

@keyframes odd-enter { from { opacity: 0; transform: translateX(-4rem) rotate(-7deg); } to { opacity: 1; transform: translateX(0) rotate(4deg); } }
@keyframes odd-enter-two { from { opacity: 0; transform: translateY(4rem) rotate(2deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes paragraph-rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }

.anti-grid { grid-column: 1 / 8; display: grid; grid-template-columns: 3fr 1fr 2fr 1fr 3fr 2fr 1fr; }
.definition { margin: 0; font-size: clamp(1.35rem, 2.7vw, 2.3rem); line-height: 1.25; color: #3d2b1f; }
.ghost-def { grid-column: 1 / 5; opacity: .3; transform: rotate(-1deg); }
.half-def { grid-column: 3 / 7; margin-top: -1.2rem; opacity: .6; transform: rotate(2deg); }
.full-def { grid-column: 2 / 8; margin-top: -1.4rem; opacity: 1; transform: rotate(-.5deg); }

.specimen {
  position: absolute;
  padding: .42rem .65rem;
  border: 1px solid #5c3a2166;
  background: #faf6f0aa;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #5c3a21;
  text-transform: uppercase;
}
.specimen-one { right: 12%; top: 12%; transform: rotate(5deg); }
.specimen-two { left: 7%; bottom: 13%; transform: rotate(-3deg); }

.fibo-rule { grid-column: 1 / 4; display: flex; align-items: center; gap: .65rem; margin-top: 10vh; }
.fibo-rule span { display: block; border-radius: 999px; background: #c4593c; opacity: .7; }
.fibo-rule span:nth-child(1), .fibo-rule span:nth-child(2), .fibo-rule span:nth-child(10), .fibo-rule span:nth-child(11) { width: 1px; height: 1px; }
.fibo-rule span:nth-child(3), .fibo-rule span:nth-child(9) { width: 2px; height: 2px; }
.fibo-rule span:nth-child(4), .fibo-rule span:nth-child(8) { width: 3px; height: 3px; }
.fibo-rule span:nth-child(5), .fibo-rule span:nth-child(7) { width: 5px; height: 5px; }
.fibo-rule span:nth-child(6) { width: 8px; height: 8px; }

.ring { position: absolute; border: 1px solid #3d2b1f26; border-radius: 50%; pointer-events: none; }
.ring-small { width: 11rem; height: 11rem; right: 8%; top: 40%; }
.ring-large { width: min(20rem, 34vw); height: min(20rem, 34vw); left: -7rem; bottom: 18%; }

.network-lines { grid-column: 1 / 8; width: 112%; margin-left: -8%; opacity: .9; }
.network-lines path { fill: none; stroke: #3d2b1f; stroke-width: 1.25; opacity: .15; stroke-linecap: round; stroke-linejoin: round; }
.network-lines circle { fill: none; stroke: #c4593c; stroke-width: 1.5; opacity: .75; }
.fragment { position: relative; margin: 0; padding: .75rem 1rem; background: #faf6f08c; border-left: 2px solid #c4593c; font-weight: 300; }
.frag-one { grid-column: 1 / 4; transform: rotate(-2deg); }
.frag-two { grid-column: 4 / 8; margin-top: -3rem; transform: rotate(1deg); }
.frag-three { grid-column: 2 / 5; margin-top: 1rem; transform: rotate(3deg); }

.perspective-field { grid-column: 1 / 8; display: grid; grid-template-columns: 3fr 1fr 2fr 1fr 3fr 2fr 1fr; align-items: start; min-height: 48vh; }
.perspective-text { margin: 0; color: #3d2b1f; }
.perspective-text.tiny { grid-column: 5 / 8; font-size: .92rem; opacity: .55; transform: rotate(3deg); }
.perspective-text.medium { grid-column: 2 / 6; margin-top: 9vh; font-size: clamp(1.25rem, 2.3vw, 2rem); opacity: .78; transform: rotate(-1deg); }
.perspective-text.large { grid-column: 1 / 7; margin-top: -1rem; font-size: clamp(2rem, 4.3vw, 4.2rem); font-weight: 300; line-height: 1.05; }
.side-note { position: absolute; right: 6%; bottom: 16%; transform: rotate(8deg); }

.spiral-lines { grid-column: 1 / 5; width: min(38rem, 55vw); margin-top: -1rem; }
.spiral-lines path { fill: none; stroke: #3d2b1f; stroke-width: 1.4; opacity: .15; stroke-linecap: round; stroke-linejoin: round; }
.spiral-lines circle { fill: #c4593c; opacity: .62; }
.growth-copy { margin: 0; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300; line-height: 1.22; }
.growth-copy.first { grid-column: 5 / 8; margin-top: 10vh; transform: rotate(2deg); }
.growth-copy.second { grid-column: 3 / 7; margin-top: -2rem; transform: rotate(-2deg); }

.ending-copy { grid-column: 2 / 8; margin: 5vh 0 0; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300; line-height: 1.35; color: #3d2b1f; }
.ending-panel { min-height: 112vh; }

.fixed-label {
  position: fixed;
  right: 1.3rem;
  bottom: 2.2rem;
  z-index: 20;
  font-family: "Caveat", cursive;
  font-size: 1.18rem;
  color: #c4593c;
  opacity: .58;
  transform: rotate(90deg);
  pointer-events: none;
}

.draw-ready path { stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash); }
.draw-ready.is-drawn path { animation: draw-line 1.45s var(--ease) forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .side-index { width: 8vw; min-width: 54px; }
  .side-index::before { inset: .45rem; }
  .side-rail { width: 88vh; height: 3rem; gap: 1.3rem; }
  .side-item { grid-template-columns: 1fr; justify-items: center; }
  .side-item span { width: 1ch; overflow: hidden; font-size: 1rem; }
  .side-item b, .side-mesh { display: none; }
  .quest { margin-left: 8vw; width: 92vw; }
  .panel { padding: 4rem 1.2rem; grid-template-columns: repeat(7, 1fr); }
  .opening-panel h1 { grid-column: 1 / 8; font-size: clamp(3.6rem, 18vw, 7rem); }
  h2 { grid-column: 1 / 8; }
  .eyebrow { grid-column: 1 / 3; }
  .fragment, .frag-one, .frag-two, .frag-three, .growth-copy.first, .growth-copy.second, .ending-copy { grid-column: 1 / 8; margin-top: 1rem; }
  .spiral-lines { grid-column: 1 / 8; width: 92vw; }
}