:root {
  --interaction-language-favors-path-draw-roots: 1;
  --soil: #2B1F16;
  --pine: #243F2E;
  --leaf: #86A85D;
  --paper: #F3E8D0;
  --twine: #D07A3A;
  --clay: #9C6B4E;
  --mist: #B8CDD0;
  --season-tint: #243F2E;
  --title: 'Gowun Batang', serif;
  --body: 'Nunito Sans', sans-serif;
  --stamp: 'Bagel Fat One', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--soil);
  color: var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .28;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(243,232,208,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 35%, rgba(36,63,46,.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 78%, rgba(156,107,78,.18) 0 1px, transparent 1.5px);
  background-size: 34px 42px, 47px 39px, 29px 31px;
  mix-blend-mode: soft-light;
}

.firefly {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle, #F3E8D0 0 18%, #D07A3A 42%, transparent 70%);
  pointer-events: none;
  z-index: 29;
  opacity: .8;
  transform: translate(-50%, -50%);
  filter: blur(.3px);
}

.seed-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: grid;
  gap: 18px;
}
.seed-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(243,232,208,.55);
  display: grid;
  place-items: center;
  text-decoration: none;
  position: relative;
  background: rgba(43,31,22,.38);
}
.seed-dot span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  transition: transform .7s ease, background .7s ease;
}
.seed-dot.active span { transform: scale(1.95); background: var(--leaf); }
.seed-dot::before {
  content: attr(data-field);
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) scale(.9);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--paper);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.seed-dot:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }

.wandering-line {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 500vh;
  z-index: 4;
  pointer-events: none;
}
.wandering-line path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .55;
}

.grove-ledger { position: relative; z-index: 5; }
.field {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gate {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(184,205,208,.18), transparent 35%),
    linear-gradient(180deg, #243F2E 0%, #2B1F16 68%, #1c130f 100%);
}
.mist { position: absolute; height: 26vh; width: 80vw; border-radius: 50%; background: rgba(184,205,208,.18); filter: blur(34px); }
.bank-one { left: -15vw; top: 12vh; animation: mistDrift 16s ease-in-out infinite; }
.bank-two { right: -20vw; bottom: 18vh; animation: mistDrift 22s ease-in-out infinite reverse; }
.gate-post, .gate-rail {
  position: absolute;
  background: linear-gradient(90deg, #6f4932, #9C6B4E 45%, #4c2f22);
  box-shadow: inset 0 0 0 2px rgba(43,31,22,.45), 0 22px 50px rgba(0,0,0,.35);
}
.gate-post { width: 44px; height: 56vh; bottom: 13vh; transform: rotate(var(--lean)); border-radius: 18px 18px 6px 6px; }
.left-post { left: 16vw; --lean: -4deg; }
.right-post { left: 40vw; --lean: 3deg; }
.gate-rail { height: 32px; left: 13vw; width: 35vw; border-radius: 20px; transform: rotate(-5deg); }
.rail-top { bottom: 45vh; }
.rail-mid { bottom: 34vh; transform: rotate(4deg); }
.hanging-sign {
  position: absolute;
  left: 22vw;
  top: 18vh;
  width: min(390px, 52vw);
  min-height: 145px;
  padding: 26px 30px;
  text-align: center;
  transform-origin: 50% -20px;
  animation: gateSwing 5.6s ease-in-out infinite;
  background: #F3E8D0;
  color: var(--soil);
  border: 12px solid #9C6B4E;
  border-radius: 24px 18px 30px 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.hanging-sign::before, .hanging-sign::after { content: ''; position: absolute; top: -44px; width: 2px; height: 48px; background: var(--twine); }
.hanging-sign::before { left: 23%; } .hanging-sign::after { right: 23%; }
.painted-word { display: block; font-family: var(--title); font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: -.05em; }
.hanging-sign small { font-family: var(--stamp); color: var(--twine); font-size: 1.05rem; }
.field-note, .ledger-scrap, .night-ledger {
  background: rgba(243,232,208,.93);
  color: var(--soil);
  border: 2px solid rgba(156,107,78,.7);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.gate-note { position: absolute; right: 11vw; bottom: 19vh; width: min(430px, 78vw); padding: 32px; border-radius: 34px 22px 40px 18px; transform: rotate(1.5deg); }
.field-label { margin: 0 0 12px; color: var(--twine); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800; }
h1, h2, h3 { font-family: var(--title); margin: 0; line-height: 1.05; }
h1 { font-size: clamp(2.3rem, 5vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4vw, 4rem); }
h3 { font-size: 1.45rem; }
p { line-height: 1.65; font-size: clamp(1rem, 1.35vw, 1.18rem); }
.leaf-shadow { position: absolute; width: 120px; height: 55px; background: rgba(134,168,93,.22); border-radius: 0 80% 0 80%; filter: blur(2px); transform: rotate(32deg); animation: leafFloat 8s ease-in-out infinite; }
.s1 { right: 18vw; top: 22vh; } .s2 { right: 40vw; bottom: 18vh; animation-delay: -3s; }
.irrigation-start { position: absolute; left: 3vw; bottom: 0; width: 80vw; height: 30vh; border-top: 3px solid rgba(156,107,78,.55); border-radius: 50% 0 0 0; transform: rotate(-8deg); }
.grass, .foreground-grass { position: absolute; left: -5%; right: -5%; bottom: -2px; height: 20vh; background: repeating-linear-gradient(80deg, transparent 0 15px, rgba(134,168,93,.5) 16px 18px, transparent 20px 32px); }

.root-cellar { background: radial-gradient(ellipse at 50% 0%, rgba(36,63,46,.7), transparent 45%), linear-gradient(180deg, #2B1F16, #1c130e); }
.cellar-arch { position: absolute; left: 10vw; right: 10vw; top: 8vh; height: 88vh; border: 2px solid rgba(184,205,208,.12); border-bottom: 0; border-radius: 50% 50% 0 0; }
.root-map { position: absolute; inset: 24vh 5vw 0; opacity: .92; }
.root-line { fill: none; stroke: #B8CDD0; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: rootDraw 5s ease forwards; filter: drop-shadow(0 0 8px rgba(184,205,208,.2)); }
.main-root { stroke: #86A85D; stroke-width: 8; }
.ledger-scrap { position: absolute; padding: 28px; border-radius: 18px 38px 20px 44px; }
.cellar-one { left: 10vw; top: 20vh; width: min(430px, 78vw); transform: rotate(-2deg); }
.cellar-two { right: 13vw; bottom: 16vh; width: min(350px, 70vw); transform: rotate(3deg); }
.ring-seal, .moon-ring, .branch-cross span {
  display: block;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 10px, rgba(156,107,78,.8) 11px 13px, transparent 14px 24px), #F3E8D0;
}
.ring-seal { width: 76px; height: 76px; margin-bottom: 14px; }

.sapling-rows { background: linear-gradient(180deg, #B8CDD0 0%, #F3E8D0 46%, #9C6B4E 100%); color: var(--soil); }
.sky-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 15%, rgba(243,232,208,.8), transparent 30%); }
.row-drift { position: absolute; inset: 0; transform: translateX(0); transition: transform .25s ease-out; }
.sapling { position: absolute; bottom: 17vh; width: 26px; height: 42vh; background: linear-gradient(#243F2E, #2B1F16); border-radius: 20px; transform: rotate(var(--tilt)); }
.sapling::before, .sapling::after, .sapling span { content: ''; position: absolute; width: 80px; height: 42px; background: #86A85D; border-radius: 0 90% 0 90%; opacity: .88; animation: leafFloat 6s ease-in-out infinite; }
.sapling::before { left: -66px; top: 8vh; transform: rotate(-28deg); }
.sapling::after { left: 12px; top: 15vh; transform: rotate(42deg); }
.sapling span { left: -48px; top: 22vh; transform: rotate(14deg); background: #243F2E; opacity: .55; }
.row-a { left: 14vw; --tilt: -4deg; } .row-b { left: 29vw; height: 52vh; --tilt: 3deg; } .row-c { left: 46vw; --tilt: -1deg; } .row-d { left: 63vw; height: 48vh; --tilt: 5deg; } .row-e { left: 78vw; --tilt: -6deg; } .row-f { left: 94vw; height: 46vh; --tilt: 2deg; }
.plant-stake { position: absolute; width: 215px; padding: 18px; background: #F3E8D0; border: 3px solid #9C6B4E; color: #2B1F16; border-radius: 14px; box-shadow: 0 20px 35px rgba(43,31,22,.18); }
.plant-stake::after { content: ''; position: absolute; left: 48%; bottom: -95px; width: 10px; height: 95px; background: #9C6B4E; }
.plant-stake b, .plant-stake em { display: block; } .plant-stake em { margin-top: 8px; font-style: normal; line-height: 1.45; }
.stake-one { left: 20vw; top: 25vh; transform: rotate(-3deg); } .stake-two { left: 54vw; top: 18vh; transform: rotate(2deg); } .stake-three { left: 72vw; top: 43vh; transform: rotate(-5deg); }
.foreground-grass { height: 31vh; background: repeating-linear-gradient(83deg, transparent 0 18px, rgba(36,63,46,.85) 19px 23px, transparent 25px 36px); z-index: 5; }
.field-stamp { position: absolute; left: 8vw; top: 8vh; font-family: var(--stamp); font-size: clamp(3rem, 10vw, 9rem); color: rgba(208,122,58,.45); transform: rotate(-7deg); margin: 0; }

.grafting-table { background: linear-gradient(180deg, #F3E8D0, #c9a77c 48%, #9C6B4E); color: #2B1F16; }
.tabletop { position: absolute; inset: 14vh 6vw 10vh; border-radius: 44px; background: linear-gradient(115deg, rgba(156,107,78,.42), rgba(243,232,208,.5)), repeating-linear-gradient(90deg, rgba(43,31,22,.08) 0 2px, transparent 2px 80px); border: 8px solid #9C6B4E; box-shadow: inset 0 0 70px rgba(43,31,22,.18); transform: rotate(-1deg); }
.tool { position: absolute; z-index: 2; }
.pruning-knife { left: 13vw; top: 23vh; width: 235px; height: 26px; background: #B8CDD0; border-radius: 60% 16px 16px 60%; transform: rotate(-22deg); box-shadow: 92px 0 0 #243F2E; }
.string-spool { right: 16vw; top: 20vh; width: 112px; height: 112px; border-radius: 50%; background: repeating-radial-gradient(circle, #D07A3A 0 7px, #9C6B4E 8px 13px); border: 12px solid #F3E8D0; }
.branch-cross, .graft-stem, .seed-packet { position: absolute; border: 0; cursor: pointer; font-family: var(--body); color: #2B1F16; z-index: 4; }
.branch-cross { left: 24vw; bottom: 24vh; width: 150px; height: 150px; border-radius: 50%; background: transparent; transition: transform .8s ease; }
.branch-cross span { width: 100%; height: 100%; border: 6px solid #9C6B4E; }
.branch-cross.turned { transform: rotate(70deg) scale(1.06); }
.graft-stem { left: 48vw; top: 35vh; width: 38px; height: 280px; background: #243F2E; border-radius: 30px; transform: rotate(10deg); overflow: hidden; }
.tape-wrap { position: absolute; left: -12px; top: 100px; width: 65px; height: 34px; background: #D07A3A; border-radius: 18px; transform: rotate(-12deg) scaleX(.25); transform-origin: left center; transition: transform 1s ease; }
.graft-stem.wrapped .tape-wrap { transform: rotate(-12deg) scaleX(1.25); box-shadow: 0 39px 0 #D07A3A, 0 78px 0 #D07A3A; }
.seed-packet { right: 22vw; bottom: 19vh; width: 245px; min-height: 180px; padding: 68px 22px 22px; background: #F3E8D0; border: 3px solid #9C6B4E; border-radius: 10px 10px 26px 26px; box-shadow: 0 22px 48px rgba(43,31,22,.22); transform: rotate(4deg); }
.packet-flap { position: absolute; left: 0; right: 0; top: 0; height: 66px; background: #d8c49b; clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: top; transition: transform .7s ease; }
.seed-packet.open .packet-flap { transform: rotateX(145deg); }
.seed-packet b, .seed-packet em { display: block; } .seed-packet em { margin-top: 10px; font-style: normal; }
.graft-note { right: 10vw; top: 37vh; width: min(390px, 74vw); transform: rotate(-2deg); }

.night-orchard { background: radial-gradient(ellipse at 50% 22%, rgba(184,205,208,.22), transparent 42%), linear-gradient(180deg, #243F2E, #111812 62%, #2B1F16); }
.moon-ring { position: absolute; background-color: transparent; border: 1px solid rgba(184,205,208,.65); box-shadow: 0 0 34px rgba(184,205,208,.26); opacity: .72; animation: ringPulse 7s ease-in-out infinite; }
.ring-one { width: 210px; height: 210px; left: 14vw; top: 18vh; } .ring-two { width: 330px; height: 330px; right: 11vw; top: 12vh; animation-delay: -2s; } .ring-three { width: 145px; height: 145px; left: 55vw; bottom: 22vh; animation-delay: -4s; }
.birds { position: absolute; left: 10vw; top: 28vh; width: 70vw; height: 80px; animation: birdCross 18s linear infinite; }
.birds span { position: absolute; width: 28px; height: 12px; border-top: 3px solid rgba(43,31,22,.9); border-radius: 50%; }
.birds span:nth-child(2) { left: 40px; top: 18px; } .birds span:nth-child(3) { left: 86px; top: 3px; }
.falling-seeds i { position: absolute; top: -20px; width: 10px; height: 15px; border-radius: 60% 40% 60% 40%; background: #D07A3A; animation: seedFall 8s linear infinite; opacity: .85; }
.falling-seeds i:nth-child(1) { left: 12%; animation-delay: 0s; } .falling-seeds i:nth-child(2) { left: 26%; animation-delay: -2s; } .falling-seeds i:nth-child(3) { left: 38%; animation-delay: -5s; } .falling-seeds i:nth-child(4) { left: 49%; animation-delay: -1s; } .falling-seeds i:nth-child(5) { left: 62%; animation-delay: -4s; } .falling-seeds i:nth-child(6) { left: 74%; animation-delay: -6s; } .falling-seeds i:nth-child(7) { left: 86%; animation-delay: -3s; } .falling-seeds i:nth-child(8) { left: 93%; animation-delay: -7s; }
.night-ledger { position: absolute; left: 50%; top: 50%; width: min(560px, 82vw); padding: 38px; border-radius: 46px 20px 46px 20px; transform: translate(-50%, -50%) rotate(.7deg); text-align: center; }
.night-ledger strong { display: block; margin-top: 22px; font-family: var(--title); font-size: clamp(2.4rem, 7vw, 5rem); color: #243F2E; }

.reveal-note { opacity: 0; translate: 0 26px; transition: opacity 1s ease, translate 1s ease; }
.reveal-note.visible { opacity: 1; translate: 0 0; }

@keyframes gateSwing { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.2deg); } }
@keyframes mistDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8vw); } }
@keyframes leafFloat { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 9px -14px; rotate: 5deg; } }
@keyframes rootDraw { to { stroke-dashoffset: 0; } }
@keyframes ringPulse { 0%,100% { transform: scale(.96); opacity: .55; } 50% { transform: scale(1.05); opacity: .95; } }
@keyframes birdCross { from { transform: translateX(-20vw); } to { transform: translateX(100vw); } }
@keyframes seedFall { from { transform: translateY(-10vh) rotate(0deg); } to { transform: translateY(110vh) rotate(260deg); } }

@media (max-width: 760px) {
  .seed-nav { right: 12px; }
  .gate-rail { width: 58vw; }
  .right-post { left: 58vw; }
  .hanging-sign { left: 9vw; width: 70vw; }
  .gate-note, .cellar-one, .cellar-two, .graft-note { left: 8vw; right: auto; width: 78vw; }
  .cellar-two { bottom: 7vh; }
  .plant-stake { width: 180px; }
  .stake-one { left: 11vw; } .stake-two { left: 44vw; } .stake-three { left: 61vw; }
  .seed-packet { right: 9vw; }
  .graft-stem { left: 35vw; }
}