:root {
  /* IBM Plex Sans* Sans** only for small organizational labels if needed */
  --burgundy: #5A1024;
  --plum: #260914;
  --paper: #F4E8D1;
  --moss: #6F8A3C;
  --soil: #4B3425;
  --apricot: #F0A85A;
  --ink: #1C1714;
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --hand: "Gaegu", "Comic Sans MS", cursive;
  --body: "Noto Sans KR", system-ui, sans-serif;
  --label: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.34;
  background:
    radial-gradient(circle at 12% 18%, rgba(75,52,37,0.18) 0 1px, transparent 2px) 0 0 / 39px 37px,
    radial-gradient(circle at 82% 58%, rgba(90,16,36,0.15) 0 1px, transparent 2px) 0 0 / 57px 43px,
    linear-gradient(105deg, transparent 0 47%, rgba(75,52,37,0.08) 48%, transparent 51%);
  mix-blend-mode: multiply;
}

.plot {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 7vh 7vw;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  background: var(--paper);
}
.plot::after {
  content: "";
  position: absolute;
  inset: 1.4rem;
  border: 1px solid rgba(75,52,37,0.16);
  clip-path: polygon(0 0, 36% 0, 36% 3px, 3px 3px, 3px 76%, 0 76%, 0 0, 100% 0, 100% 100%, 62% 100%, 62% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 24%, 100% 24%);
  pointer-events: none;
}
h1, h2 { font-family: var(--display); margin: 0; line-height: 0.92; letter-spacing: 0.035em; }
h1 { font-size: clamp(3.4rem, 10vw, 11rem); }
h2 { font-size: clamp(3rem, 8vw, 8.5rem); }
p { margin: 0; }
.seed-label, .scroll-state {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.seed-label { color: var(--apricot); }
.raw-note, .hand-fragment, .edge-text, .last-note, .margin-scribble, .map-bed span { font-family: var(--hand); }
.reveal-fragment { opacity: 0; filter: blur(8px); transform: translateY(24px) rotate(var(--rot, 0deg)); transition: opacity 1100ms ease, filter 1100ms ease, transform 1100ms ease, box-shadow 1100ms ease; }
.plot.is-active .reveal-fragment { opacity: 1; filter: blur(0); transform: translateY(0) rotate(var(--rot, 0deg)); }

@keyframes dampPaperPulse {
  0%, 100% { box-shadow: 0 1.2rem 0 rgba(75,52,37,0.14); }
  50% { box-shadow: 0 1.6rem 0 rgba(75,52,37,0.24); }
}

.plot-seed { background: linear-gradient(145deg, var(--paper) 0 62%, rgba(111,138,60,0.16)); }
.soil-speckles { position: absolute; inset: 0; background: radial-gradient(circle, rgba(75,52,37,0.20) 0 1px, transparent 2px) 0 0 / 31px 29px; opacity: 0.22; }
.moss-strip { --rot: -2deg; grid-column: 1 / 8; grid-row: 7 / 9; background: var(--moss); clip-path: polygon(0 36%, 100% 0, 95% 64%, 14% 100%); opacity: 0.86; }
.title-shard { --rot: -3deg; grid-column: 2 / 10; grid-row: 3 / 6; align-self: center; padding: clamp(1.4rem, 4vw, 3rem); color: var(--paper); background: var(--burgundy); clip-path: polygon(4% 8%, 100% 0, 94% 82%, 12% 100%, 0 72%); box-shadow: 0 1.6rem 0 rgba(75,52,37,0.20); }
.title-shard .seed-label { margin-bottom: 1rem; color: var(--apricot); }
.raw-note { --rot: 2deg; grid-column: 8 / 12; grid-row: 2 / 4; align-self: end; color: var(--plum); font-size: clamp(1.6rem, 3vw, 3rem); line-height: 0.98; }
.thorn-bracket::before, .thorn-bracket::after { content: ""; display: block; width: 4rem; height: 0.45rem; margin: 0.3rem 0; background: var(--burgundy); clip-path: polygon(0 50%, 88% 0, 100% 50%, 88% 100%); }
.margin-scribble { --rot: -4deg; grid-column: 2 / 5; grid-row: 2 / 3; font-size: 1.45rem; color: var(--soil); }
.sprout-mark { position: absolute; width: 4.8rem; height: 5.5rem; opacity: 0; transform: scale(0.6) rotate(var(--r)); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.9,.2,1.2); }
.plot.is-active .sprout-mark { opacity: 1; transform: scale(1) rotate(var(--r)); }
.sprout-mark::before, .sprout-mark::after { content: ""; position: absolute; bottom: 1.4rem; left: 50%; width: 1.7rem; height: 2.4rem; background: var(--moss); clip-path: polygon(0 50%, 100% 0, 78% 100%); transform-origin: bottom center; }
.sprout-mark::before { transform: translateX(-105%) rotate(-18deg); }
.sprout-mark::after { transform: translateX(8%) rotate(22deg) scaleX(-1); }
.sprout-mark span { position: absolute; left: 50%; bottom: 0; width: 3px; height: 3.3rem; background: var(--soil); transform: rotate(-5deg); }
.sprout-a { --r: 9deg; left: 73vw; top: 69vh; transition-delay: 220ms; }
.sprout-b { --r: -15deg; left: 16vw; top: 16vh; transition-delay: 420ms; }
.sprout-c { --r: 23deg; right: 9vw; top: 18vh; transition-delay: 620ms; }

.plot-compost { background: var(--ink); color: var(--paper); }
.plot-compost::after { border-color: rgba(244,232,209,0.16); }
.compost-bed { --rot: 3deg; grid-column: 2 / 6; grid-row: 2 / 5; padding: 2rem; color: var(--ink); background: var(--paper); clip-path: polygon(0 10%, 92% 0, 100% 82%, 12% 100%); font-size: clamp(1.2rem, 2vw, 2rem); line-height: 1.35; box-shadow: 1rem 1rem 0 rgba(240,168,90,0.22); }
.compost-bed p { margin-top: 1rem; }
.compost-layer { position: absolute; background: var(--soil); opacity: 0.78; }
.layer-one { --rot: -2deg; left: 35vw; top: 12vh; width: 43vw; height: 24vh; clip-path: polygon(0 28%, 100% 0, 94% 78%, 10% 100%); }
.layer-two { --rot: 2deg; right: -4vw; bottom: 15vh; width: 58vw; height: 26vh; background: var(--burgundy); clip-path: polygon(10% 0, 100% 22%, 86% 100%, 0 72%); }
.leaf-shadow { position: absolute; background: rgba(111,138,60,0.34); filter: blur(1px); clip-path: polygon(48% 0, 100% 44%, 56% 100%, 0 52%); }
.leaf-one { width: 17rem; height: 8rem; left: 8vw; bottom: 14vh; transform: rotate(-18deg); }
.leaf-two { width: 12rem; height: 20rem; right: 12vw; top: 12vh; transform: rotate(22deg); }
.burgundy-note { --rot: -3deg; grid-column: 7 / 12; grid-row: 4 / 8; padding: 2.2rem; background: var(--burgundy); color: var(--paper); clip-path: polygon(8% 0, 100% 10%, 88% 100%, 0 86%); align-self: center; }
.burgundy-note p { margin-top: 1.2rem; max-width: 25rem; line-height: 1.8; }
.hand-fragment { position: absolute; font-size: clamp(1.5rem, 3vw, 3.2rem); color: var(--apricot); }
.fragment-one { --rot: 6deg; left: 13vw; bottom: 20vh; }
.fragment-two { --rot: -7deg; right: 12vw; top: 19vh; }
.root-line { position: absolute; overflow: visible; pointer-events: none; }
.root-line path { fill: none; stroke: var(--moss); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--path-length, 1000); stroke-dashoffset: var(--path-length, 1000); transition: stroke-dashoffset 1200ms ease; }
.compost-root { left: 19vw; top: 44vh; width: 50vw; height: 28vh; opacity: 0.74; }

.plot-weather { background: linear-gradient(125deg, var(--paper), #ead9b8); }
.weather-cut { position: absolute; background: var(--burgundy); box-shadow: 0 2rem 0 rgba(38,9,20,0.11); }
.cut-a { --rot: -4deg; left: -6vw; top: 19vh; width: 62vw; height: 30vh; clip-path: polygon(0 0, 100% 18%, 82% 100%, 0 72%); }
.cut-b { --rot: 3deg; right: -9vw; bottom: 9vh; width: 70vw; height: 33vh; clip-path: polygon(12% 0, 100% 8%, 100% 100%, 0 82%); }
.moss-shape { position: absolute; background: rgba(111,138,60,0.52); clip-path: polygon(0 46%, 28% 4%, 100% 24%, 78% 92%, 22% 100%); }
.moss-a { width: 28vw; height: 24vh; left: 11vw; bottom: 17vh; transform: rotate(5deg); }
.moss-b { width: 20vw; height: 18vh; right: 12vw; top: 12vh; transform: rotate(-8deg); }
.weather-copy { --rot: 2deg; grid-column: 5 / 11; grid-row: 3 / 6; color: var(--paper); align-self: center; z-index: 2; }
.weather-copy h2 { text-shadow: 0 0.25rem 0 rgba(38,9,20,0.26); }
.edge-text { position: absolute; z-index: 3; max-width: 18rem; font-size: clamp(1.5rem, 2.5vw, 2.6rem); line-height: 0.96; color: var(--plum); }
.edge-left { --rot: -4deg; left: 9vw; top: 11vh; }
.edge-right { --rot: 5deg; right: 8vw; bottom: 35vh; text-align: right; }
.rain-tags { position: absolute; left: 50vw; top: 16vh; display: grid; gap: 1.2rem; transform: rotate(16deg); }
.seed-dot { width: 0.9rem; height: 0.9rem; background: var(--apricot); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: 0.4; transition: opacity 600ms ease, transform 600ms ease; }
.plot.is-active .seed-dot.is-bright { opacity: 1; transform: scale(1.45); }

.plot-common { background: var(--plum); color: var(--paper); }
.plot-common::after { border-color: rgba(244,232,209,0.14); }
.map-label { grid-column: 2 / 7; grid-row: 1 / 2; align-self: end; }
.plot-map { position: absolute; inset: 14vh 8vw 12vh; }
.map-bed { position: absolute; padding: 1.2rem 1.4rem; min-height: 8rem; color: var(--ink); background: var(--paper); clip-path: polygon(0 8%, 94% 0, 100% 84%, 8% 100%); display: flex; align-items: center; box-shadow: 0.7rem 0.7rem 0 rgba(240,168,90,0.28); }
.map-bed span { font-size: clamp(1.2rem, 2.3vw, 2.3rem); line-height: 1; }
.bed-one { --rot: -3deg; width: 23vw; left: 3%; top: 26%; }
.bed-two { --rot: 2deg; width: 28vw; left: 33%; top: 6%; background: #F0A85A; }
.bed-three { --rot: -2deg; width: 26vw; right: 4%; top: 38%; }
.bed-four { --rot: 4deg; width: 30vw; left: 22%; bottom: 2%; background: rgba(111,138,60,0.96); color: var(--paper); }
.twig { position: absolute; height: 4px; background: var(--soil); transform-origin: center; clip-path: polygon(0 35%, 100% 0, 96% 100%, 3% 70%); }
.twig-one { width: 22vw; left: 18%; top: 32%; transform: rotate(18deg); }
.twig-two { width: 18vw; right: 20%; top: 31%; transform: rotate(-28deg); }
.twig-three { width: 26vw; left: 49%; bottom: 22%; transform: rotate(12deg); }
.common-root { inset: 6% 4%; width: 92%; height: 82%; opacity: 0.45; }
.common-root path { stroke: var(--apricot); stroke-width: 3; }
.common-title { --rot: -2deg; grid-column: 2 / 9; grid-row: 6 / 8; align-self: end; z-index: 3; color: var(--apricot); }
.thinking-insect { position: absolute; width: 1.2rem; height: 1.2rem; background: var(--apricot); border-radius: 50%; }
.thinking-insect::before, .thinking-insect::after { content: ""; position: absolute; width: 1.4rem; height: 2px; background: var(--paper); top: -0.35rem; }
.thinking-insect::before { left: -0.9rem; transform: rotate(-32deg); }
.thinking-insect::after { right: -0.9rem; transform: rotate(32deg); }
.insect-one { left: 71vw; top: 18vh; }
.insect-two { left: 15vw; bottom: 17vh; transform: scale(0.75) rotate(-20deg); }

.plot-return { background: radial-gradient(circle at 50% 42%, rgba(111,138,60,0.20), transparent 33rem), var(--paper); place-items: center; text-align: center; }
.quiet-field { --rot: 1deg; grid-column: 5 / 9; grid-row: 2 / 6; align-self: center; justify-self: center; width: min(24rem, 64vw); height: min(24rem, 64vw); border: 2px solid rgba(90,16,36,0.18); clip-path: polygon(50% 0, 96% 16%, 100% 70%, 58% 100%, 12% 86%, 0 26%); display: grid; place-items: center; background: rgba(244,232,209,0.58); }
.single-sprout { position: relative; width: 7rem; height: 8rem; }
.single-sprout::before, .single-sprout::after { content: ""; position: absolute; top: 0.4rem; width: 3.4rem; height: 4.4rem; background: var(--moss); clip-path: polygon(44% 0, 100% 42%, 56% 100%, 0 54%); }
.single-sprout::before { left: 0; transform: rotate(-18deg); }
.single-sprout::after { right: 0; transform: scaleX(-1) rotate(-18deg); }
.single-sprout span { position: absolute; left: 50%; bottom: 0; width: 4px; height: 7rem; background: var(--soil); transform: rotate(4deg); }
.seal-label { position: absolute; bottom: 18%; font-family: var(--hand); font-size: 1.6rem; color: var(--soil); }
.burgundy-seal { --rot: -2deg; grid-column: 3 / 11; grid-row: 6 / 8; justify-self: center; padding: 1.5rem 2.4rem; background: var(--burgundy); color: var(--paper); clip-path: polygon(4% 0, 100% 10%, 94% 100%, 0 84%); }
.burgundy-seal h2 { font-size: clamp(2.6rem, 6vw, 6.6rem); }
.burgundy-seal p { margin-top: 0.7rem; color: var(--apricot); font-family: var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.last-note { --rot: 5deg; position: absolute; right: 10vw; top: 22vh; font-size: clamp(1.4rem, 2.6vw, 2.6rem); color: var(--plum); }

.scroll-state { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; padding: 0.55rem 0.75rem; background: var(--plum); color: var(--paper); border: 1px solid var(--apricot); transform: rotate(-1deg); }

@media (max-width: 760px) {
  .plot { padding: 6vh 6vw; grid-template-columns: repeat(6, 1fr); }
  .title-shard { grid-column: 1 / 7; grid-row: 3 / 5; }
  .raw-note { grid-column: 2 / 7; grid-row: 5 / 7; }
  .margin-scribble { grid-column: 1 / 5; }
  .compost-bed, .burgundy-note, .weather-copy, .common-title, .burgundy-seal { grid-column: 1 / 7; }
  .burgundy-note { grid-row: 5 / 8; }
  .weather-copy { grid-row: 3 / 5; }
  .map-bed { width: 58vw; }
  .bed-two { left: 22%; }
  .bed-three { right: 0; top: 42%; }
  .bed-four { left: 4%; width: 70vw; }
  .edge-right { bottom: 14vh; }
  .scroll-state { font-size: 0.62rem; }
}