:root {
  --root-burgundy: #3B0714;
  --black-plum: #12070D;
  --gold: #C7A14A;
  --lichen: #8FAF77;
  --cream: #F3E5C4;
  --magenta: #E0447A;
  --display: "Limelight", Georgia, serif;
  --body: "Josefin Sans", Inter, sans-serif;
  --whisper: "Cormorant Garamond", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream);
  background: var(--black-plum);
  font-family: var(--body);
  letter-spacing: .05em;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(88deg, transparent 0 7px, rgba(243,229,196,.05) 8px, transparent 9px),
    radial-gradient(circle at 20% 30%, rgba(199,161,74,.16), transparent 18%),
    radial-gradient(circle at 80% 70%, rgba(224,68,122,.12), transparent 22%);
}

.bark-nav {
  position: fixed;
  top: 4vh;
  right: 3vw;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transform: skewY(-9deg);
}

.tag {
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(199,161,74,.56);
  background: rgba(18,7,13,.76);
  padding: .48rem .72rem .35rem;
  font-family: var(--whisper);
  font-style: italic;
  font-size: .95rem;
  box-shadow: -6px 6px 0 rgba(59,7,20,.75);
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
}

.tag:hover, .tag.active {
  color: var(--cream);
  border-color: var(--lichen);
  transform: translateX(-10px);
}

.narrative-shell { position: relative; }

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: 12vh 7vw;
  margin-top: -8vh;
  background:
    linear-gradient(124deg, var(--root-burgundy), var(--black-plum) 62%, #090306);
}

.scene:first-child { margin-top: 0; }

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.scene::before {
  inset: -16% -10%;
  background: repeating-linear-gradient(105deg, transparent 0 42px, rgba(199,161,74,.055) 43px, transparent 45px);
  transform: skewY(-13deg);
}

.scene::after {
  inset: 5% -8% auto;
  height: 42%;
  background: linear-gradient(94deg, transparent, rgba(224,68,122,.16), transparent 54%);
  clip-path: polygon(0 70%, 100% 8%, 100% 22%, 0 86%);
  opacity: .65;
}

.diagonal-slab {
  position: absolute;
  inset: -10% -12%;
  z-index: -2;
  background: linear-gradient(125deg, rgba(59,7,20,.96), rgba(18,7,13,.82) 66%, rgba(199,161,74,.18));
  filter: drop-shadow(0 0 40px rgba(18,7,13,.8));
}

.slab-wide { clip-path: polygon(0 20%, 68% 0, 100% 100%, 24% 100%); }
.slab-left { clip-path: polygon(0 0, 55% 0, 36% 100%, 0 100%); }
.slab-center { clip-path: polygon(18% 0, 78% 0, 60% 100%, 0 100%); }
.slab-right { clip-path: polygon(42% 0, 100% 0, 100% 100%, 20% 100%); }
.slab-canopy { clip-path: polygon(0 34%, 100% 0, 100% 76%, 0 100%); }

.coordinate {
  position: absolute;
  top: 14vh;
  left: 6vw;
  transform: rotate(-8deg);
  color: var(--gold);
  font-family: var(--whisper);
  font-style: italic;
  font-size: clamp(.85rem, 1.3vw, 1.1rem);
  opacity: .86;
}

.hero-copy, .scene-copy {
  position: relative;
  z-index: 4;
}

.hero-copy { grid-column: 1 / span 7; transform: rotate(-4deg); }
.notch-right { grid-column: 7 / span 5; transform: rotate(-4deg); }
.notch-left { grid-column: 1 / span 6; transform: rotate(-4deg); }
.low { align-self: end; margin-bottom: 8vh; }
.canopy-copy { grid-column: 3 / span 8; text-align: center; transform: rotate(-4deg); }

.chapter {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.65rem);
  letter-spacing: .09em;
}

h1, h2 {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 400;
  line-height: .9;
  text-transform: lowercase;
  position: relative;
  text-shadow: 3px 0 0 rgba(224,68,122,.38), -2px 2px 0 rgba(199,161,74,.18);
}

h1 { font-size: clamp(4.4rem, 13vw, 14rem); max-width: 9ch; }
h2 { font-size: clamp(3rem, 7vw, 8.4rem); max-width: 10ch; }

h1::after, h2::after {
  content: attr(data-text);
  position: absolute;
  left: .035em;
  top: .025em;
  color: var(--magenta);
  clip-path: polygon(0 42%, 100% 37%, 100% 50%, 0 56%);
  opacity: .55;
  animation: glyphTear 5.8s steps(2, end) infinite;
}

p {
  max-width: 38rem;
  font-size: clamp(1.04rem, 1.55vw, 1.35rem);
  line-height: 1.55;
}

.premise {
  max-width: 29rem;
  margin-left: 12vw;
  color: var(--lichen);
  font-weight: 600;
}

.whisper, .final-line {
  font-family: var(--whisper);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
}

.organism-labels {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.organism-labels li {
  color: var(--black-plum);
  background: var(--gold);
  padding: .62rem .86rem .45rem;
  transform: skewX(-14deg);
  box-shadow: -9px 9px 0 rgba(18,7,13,.48);
}

.loom {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .84;
  mix-blend-mode: screen;
  transform: skewY(-7deg) scale(1.08);
}

.ring-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  opacity: .23;
}

.branch-line {
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
  opacity: .48;
  transition: stroke .45s ease, opacity .45s ease, transform .45s ease;
  animation: grow 2.6s ease forwards, livingGlitch 7s steps(2, end) infinite;
}

.scene.in-view .branch-line { stroke-dashoffset: 0; }
.scene.pulsing .branch-line { stroke: var(--lichen); opacity: .8; filter: url(#softGlow); }

.packet-dot {
  fill: var(--lichen);
  opacity: .86;
  animation: packetDrift 5.5s ease-in-out infinite alternate;
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 8;
  width: 22px;
  height: 22px;
  border: 2px solid var(--gold);
  background: var(--black-plum);
  transform: rotate(45deg);
  box-shadow: 0 0 0 7px rgba(143,175,119,.1), 0 0 22px rgba(199,161,74,.55);
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.node:hover, .node.open {
  background: var(--lichen);
  border-color: var(--cream);
  transform: rotate(45deg) scale(1.18);
}

.annotation {
  position: absolute;
  z-index: 9;
  left: 12vw;
  bottom: 12vh;
  max-width: 31rem;
  color: var(--cream);
  border-top: 1px solid var(--gold);
  padding: .8rem 1rem 0 4rem;
  font-family: var(--whisper);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  transform: rotate(-5deg) translateY(16px);
  opacity: .58;
  transition: opacity .38s ease, transform .38s ease, color .38s ease;
}

.annotation::before {
  content: "나무";
  position: absolute;
  left: 0;
  top: .45rem;
  color: var(--magenta);
  font-family: var(--display);
  font-style: normal;
}

.annotation.open {
  opacity: 1;
  color: var(--lichen);
  transform: rotate(-5deg) translateY(0);
}

.trunk-slice {
  position: absolute;
  right: 8vw;
  top: 14vh;
  width: min(36vw, 470px);
  height: 72vh;
  z-index: 2;
  clip-path: polygon(22% 0, 100% 0, 74% 100%, 0 100%);
  background: radial-gradient(ellipse at 55% 52%, transparent 0 14%, rgba(199,161,74,.24) 15% 16%, transparent 17% 25%, rgba(243,229,196,.18) 26% 27%, transparent 28%), linear-gradient(135deg, rgba(59,7,20,.9), rgba(18,7,13,.7));
  border-left: 2px solid rgba(199,161,74,.55);
}

.trunk-slice span {
  position: absolute;
  inset: var(--i, 10%);
  border: 1px solid rgba(199,161,74,.25);
  border-radius: 48%;
  transform: rotate(-18deg);
}
.trunk-slice span:nth-child(1) { --i: 8%; }
.trunk-slice span:nth-child(2) { --i: 17%; }
.trunk-slice span:nth-child(3) { --i: 27%; }
.trunk-slice span:nth-child(4) { --i: 38%; }
.trunk-slice span:nth-child(5) { --i: 50%; }

@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes packetDrift { to { transform: translate(16px, -10px); fill: var(--magenta); } }
@keyframes livingGlitch { 0%, 86%, 100% { transform: translate(0,0); } 88% { transform: translate(3px,-2px); } 90% { transform: translate(-2px,1px); } }
@keyframes glyphTear { 0%, 84%, 100% { transform: translate(0,0); opacity: .32; } 86% { transform: translate(.08em,-.025em); opacity: .9; } 88% { transform: translate(-.045em,.02em); opacity: .48; } }

@media (max-width: 820px) {
  .scene { padding: 14vh 8vw; grid-template-columns: 1fr; }
  .hero-copy, .notch-right, .notch-left, .canopy-copy { grid-column: 1; }
  .bark-nav { right: 2vw; top: 2vh; gap: .25rem; }
  .tag { font-size: .75rem; padding: .38rem .48rem .25rem; }
  .premise { margin-left: 0; }
  h1 { font-size: clamp(3.5rem, 20vw, 6.8rem); }
  h2 { font-size: clamp(2.7rem, 15vw, 5rem); }
  .annotation { left: 8vw; right: 8vw; bottom: 8vh; }
  .trunk-slice { opacity: .38; width: 72vw; right: -18vw; }
}