:root {
  --bark-ink: #1B1712;
  --hanji-cream: #F1E6CF;
  --cambium-green: #587246;
  --sap-amber: #C9862C;
  --mulberry-violet: #5A3A55;
  --new-leaf-blue: #8BAEB4;
  --title: "Fraunces", serif;
  --serif-kr: "Noto Serif KR", serif;
  --interface: "IBM Plex Sans KR", "Inter", sans-serif;
  --mono: "Azeret Mono", monospace;
  --compliance-token: "KR**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bark-ink); }

body {
  margin: 0;
  color: var(--hanji-cream);
  font-family: var(--interface);
  background:
    radial-gradient(circle at 18% 78%, rgba(88, 114, 70, .18), transparent 29rem),
    radial-gradient(circle at 82% 18%, rgba(90, 58, 85, .38), transparent 34rem),
    var(--bark-ink);
  overflow-x: hidden;
}

.grain-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(93deg, transparent 0 8px, rgba(241,230,207,.06) 9px, transparent 13px),
    radial-gradient(circle at 30% 40%, rgba(201,134,44,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(139,174,180,.12) 0 1px, transparent 2px);
  background-size: auto, 53px 61px, 83px 89px;
}

.mote-field {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hanji-cream);
  opacity: .42;
  transform: translate3d(var(--x), var(--y), 0);
  animation: drift var(--d) linear infinite;
}

@keyframes drift {
  0% { translate: 0 8vh; opacity: 0; }
  18% { opacity: .45; }
  100% { translate: 4vw -110vh; opacity: 0; }
}

.ring-nav {
  position: fixed;
  left: clamp(14px, 2vw, 28px);
  top: 50%;
  z-index: 12;
  display: grid;
  gap: 18px;
  transform: translateY(-50%);
}

.ring-mark {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: rgba(241,230,207,.72);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid rgba(241,230,207,.22);
  border-radius: 50%;
  background: rgba(27,23,18,.54);
  transition: .45s ease;
}

.ring-mark:hover,
.ring-mark.active {
  color: var(--bark-ink);
  border-color: var(--sap-amber);
  background: var(--sap-amber);
  box-shadow: 0 0 28px rgba(201,134,44,.58);
}

.ring-mark::after {
  content: attr(data-chapter);
  position: absolute;
  left: 48px;
  top: 50%;
  width: 130px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--hanji-cream);
  font-family: var(--interface);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(27,23,18,.72);
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: .35s ease;
}

.ring-mark:hover::after,
.ring-mark.active::after { opacity: 1; transform: translate(0, -50%); }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: clamp(70px, 8vw, 130px) clamp(28px, 8vw, 120px);
}

.chapter::before {
  content: attr(data-scene);
  position: absolute;
  right: clamp(24px, 4vw, 70px);
  top: clamp(22px, 5vw, 56px);
  font-family: var(--mono);
  font-size: clamp(44px, 9vw, 126px);
  color: rgba(241,230,207,.045);
}

.trunk-orbit {
  position: absolute;
  width: min(92vw, 880px);
  aspect-ratio: 1;
  left: -18vw;
  top: 4vh;
  opacity: .88;
}

.ring-slice { width: 100%; height: 100%; filter: drop-shadow(0 40px 80px rgba(0,0,0,.42)); }
.ring-lines ellipse { fill: none; stroke: rgba(241,230,207,.18); stroke-width: 3; stroke-dasharray: 8 12; animation: ringBreath 8s ease-in-out infinite alternate; }
.ring-lines ellipse:nth-child(even) { stroke: rgba(201,134,44,.26); animation-duration: 11s; }
.arc-word { fill: var(--hanji-cream); font: 700 35px var(--title); letter-spacing: .045em; }

@keyframes ringBreath { to { stroke-dashoffset: 80; opacity: .58; } }

.bark-gate {
  background:
    radial-gradient(ellipse at var(--mx, 58%) var(--my, 44%), rgba(241,230,207,.96) 0 8rem, rgba(241,230,207,.35) 12rem, transparent 18rem),
    repeating-radial-gradient(ellipse at 18% 50%, rgba(241,230,207,.08) 0 3px, transparent 5px 20px),
    linear-gradient(112deg, #1B1712, #1B1712 46%, #271b16 100%);
  color: var(--bark-ink);
}

.bark-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(27,23,18,.98), rgba(27,23,18,.78)),
    repeating-linear-gradient(98deg, rgba(241,230,207,.06) 0 2px, transparent 5px 17px);
  clip-path: polygon(0 0, calc(100% - var(--peel, 0%)) 0, calc(88% - var(--peel, 0%)) 100%, 0 100%);
  transition: clip-path .22s linear;
}

.gate-etching {
  position: relative;
  z-index: 5;
  width: min(680px, 82vw);
  margin-left: clamp(20px, 17vw, 250px);
  padding: clamp(24px, 4vw, 54px);
  border-radius: 55% 45% 52% 48% / 40% 48% 52% 60%;
  background: rgba(241,230,207,.64);
  box-shadow: inset 0 0 60px rgba(27,23,18,.16), 0 42px 110px rgba(27,23,18,.52);
}

.folio {
  margin: 0 0 16px;
  font-family: var(--mono);
  color: var(--sap-amber);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
}

h1, h2 {
  margin: 0;
  font-family: var(--title);
  font-weight: 850;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  line-height: .86;
}

h1 { font-size: clamp(76px, 14vw, 210px); letter-spacing: -.08em; }
h2 { font-size: clamp(50px, 8vw, 128px); letter-spacing: -.055em; }
p { font-size: clamp(16px, 1.35vw, 22px); line-height: 1.7; }
.lyric, .canopy-note p, .archive-label p, .seed-packet p, .office-panel p { font-family: var(--serif-kr); }

.peel-tab {
  position: absolute;
  right: 5vw;
  bottom: 6vh;
  z-index: 6;
  color: var(--sap-amber);
  font-family: var(--mono);
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}

.cambium-office { background: linear-gradient(135deg, #1B1712 0%, #27321f 45%, #587246 140%); }
.cambium-ribbon { position: absolute; inset: -12% -8%; background: radial-gradient(ellipse at 28% 65%, rgba(241,230,207,.13), transparent 30%), conic-gradient(from 226deg at 18% 70%, transparent, rgba(88,114,70,.6), transparent 40%); filter: blur(1px); }

.leaf-panel, .archive-label, .canopy-note, .seed-packet, .hidden-annotation {
  position: relative;
  z-index: 5;
  background: rgba(241,230,207,.91);
  color: var(--bark-ink);
  box-shadow: 0 34px 95px rgba(0,0,0,.34), inset 0 0 38px rgba(201,134,44,.12);
}

.leaf-panel {
  width: min(650px, 78vw);
  margin-left: clamp(35px, 17vw, 260px);
  padding: clamp(28px, 5vw, 60px);
  clip-path: ellipse(49% 43% at 50% 50%);
  cursor: grab;
  transform: translate(var(--leaf-x, 0), var(--leaf-y, 0)) rotate(var(--leaf-rot, -4deg));
  transition: box-shadow .35s ease;
}
.leaf-panel.dragging { cursor: grabbing; box-shadow: 0 42px 130px rgba(201,134,44,.32); }

.receipt-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.receipt-strip span { padding: 8px 12px; border: 1px solid rgba(27,23,18,.22); border-radius: 999px; font-family: var(--mono); font-size: 11px; color: var(--cambium-green); }

.hidden-annotation { position: absolute; left: 53%; top: 57%; width: min(360px, 35vw); padding: 22px; border-radius: 35px 12px 32px 12px; opacity: .76; transform: rotate(3deg); }
.hidden-annotation strong { display: block; color: var(--mulberry-violet); font-family: var(--title); font-size: 26px; }
.hidden-annotation span { font-family: var(--serif-kr); }

.vein-chart { position: absolute; inset: auto 0 6vh auto; width: min(70vw, 900px); height: 70vh; opacity: .72; }
.vein-chart path { fill: none; stroke: var(--hanji-cream); stroke-width: 2; stroke-dasharray: 8 13; }
.vein-chart .resin-path { stroke: var(--sap-amber); stroke-width: 5; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: drawResin 7s ease-in-out infinite alternate; }
.vein-chart circle { fill: var(--sap-amber); }
@keyframes drawResin { to { stroke-dashoffset: 0; } }

.ring-archive { background: radial-gradient(circle at 58% 45%, rgba(90,58,85,.62), transparent 40rem), linear-gradient(130deg, #1B1712, #2a201b 55%, #5A3A55 125%); }
.archive-disc { position: absolute; left: -15vw; top: 50%; width: min(96vw, 900px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 31px, rgba(241,230,207,.22) 32px 34px, transparent 36px 66px), radial-gradient(circle, rgba(201,134,44,.18), transparent 68%); animation: slowTurn 42s linear infinite; }
.disc-core { position: absolute; inset: 39%; border-radius: 50%; background: var(--sap-amber); box-shadow: 0 0 80px rgba(201,134,44,.44); }
.ledger-row { position: absolute; left: 50%; top: 50%; font-family: var(--mono); font-size: 12px; color: rgba(241,230,207,.86); transform-origin: 0 0; }
.row-a { transform: rotate(18deg) translateX(180px); }
.row-b { transform: rotate(112deg) translateX(250px); }
.row-c { transform: rotate(247deg) translateX(210px); }
@keyframes slowTurn { to { rotate: 360deg; } }

.archive-label { width: min(560px, 78vw); margin-left: auto; padding: clamp(28px, 4vw, 52px); border-radius: 28px 90px 30px 120px; transform: rotate(-2deg); }
.stamp-cloud { position: absolute; right: 12vw; bottom: 11vh; display: grid; grid-template-columns: repeat(2, 72px); gap: 14px; }
.stamp-cloud span { display: grid; place-items: center; height: 72px; border: 2px solid rgba(201,134,44,.7); color: var(--sap-amber); font-family: var(--serif-kr); transform: rotate(var(--r, -8deg)); opacity: .8; }
.stamp-cloud span:nth-child(2) { --r: 6deg; } .stamp-cloud span:nth-child(3) { --r: 3deg; } .stamp-cloud span:nth-child(4) { --r: -12deg; }

.canopy-exchange { background: radial-gradient(circle at 75% 22%, rgba(139,174,180,.55), transparent 28rem), linear-gradient(145deg, #1B1712, #587246 92%); }
.canopy-note { width: min(610px, 76vw); padding: clamp(28px, 4vw, 58px); border-radius: 18px 100px 70px 22px; margin-left: clamp(70px, 13vw, 210px); }
.leaf-tabs { position: relative; z-index: 6; display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 0 clamp(70px, 13vw, 210px); }
.leaf-tab { border: 1px solid rgba(241,230,207,.34); padding: 16px 28px; border-radius: 100% 20% 80% 25%; background: rgba(27,23,18,.42); color: var(--hanji-cream); font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: .35s ease; }
.leaf-tab.active, .leaf-tab:hover { background: var(--new-leaf-blue); color: var(--bark-ink); transform: rotate(-3deg) translateY(-4px); }
.tab-output { position: relative; z-index: 6; max-width: 520px; margin-left: clamp(70px, 13vw, 210px); color: var(--hanji-cream); font-family: var(--serif-kr); }
.abacus-branch { position: absolute; right: 7vw; bottom: 18vh; width: 340px; height: 3px; background: var(--hanji-cream); transform: rotate(-23deg); }
.abacus-branch i { position: absolute; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: var(--sap-amber); box-shadow: 0 0 20px rgba(201,134,44,.45); animation: bead 6s ease-in-out infinite alternate; }
.abacus-branch i:nth-child(1) { left: 8%; } .abacus-branch i:nth-child(2) { left: 26%; animation-delay: -.8s; } .abacus-branch i:nth-child(3) { left: 48%; animation-delay: -1.6s; } .abacus-branch i:nth-child(4) { left: 68%; animation-delay: -2.4s; } .abacus-branch i:nth-child(5) { left: 84%; animation-delay: -3.2s; }
@keyframes bead { to { translate: 38px 0; background: var(--hanji-cream); } }

.seed-vault { background: radial-gradient(circle at 72% 42%, rgba(139,174,180,.35), transparent 22rem), radial-gradient(circle at 20% 72%, rgba(90,58,85,.5), transparent 30rem), #1B1712; }
.vault-orbit { position: absolute; right: -15vw; width: min(86vw, 780px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(139,174,180,.22) 0 2px, transparent 3px 42px); box-shadow: inset 0 0 120px rgba(139,174,180,.2); }
.seed-packet { width: min(590px, 80vw); padding: clamp(30px, 4vw, 58px); margin-left: clamp(40px, 14vw, 220px); border-radius: 18px; clip-path: polygon(0 7%, 50% 0, 100% 7%, 100% 100%, 0 100%); }
.seal-row { display: flex; gap: 18px; margin: 28px 0; }
.wax-seal { width: 74px; height: 74px; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #C9862C, #8f5118); color: var(--hanji-cream); font: 600 12px var(--mono); text-transform: uppercase; box-shadow: inset -8px -10px 18px rgba(27,23,18,.34), 0 10px 30px rgba(0,0,0,.24); transition: .35s ease; }
.wax-seal.open { background: radial-gradient(circle, #8BAEB4, #587246); color: var(--bark-ink); transform: scale(.9) rotate(12deg); }
.vault-message { padding: 14px 16px; border: 1px dashed rgba(27,23,18,.35); font-family: var(--serif-kr); color: var(--mulberry-violet); }
.moon-window { position: absolute; right: 8vw; top: 17vh; width: 210px; height: 210px; display: grid; place-items: center; border-radius: 50%; background: var(--new-leaf-blue); color: var(--bark-ink); font: 800 30px var(--title); box-shadow: 0 0 90px rgba(139,174,180,.54); }

@media (max-width: 760px) {
  .ring-nav { left: 10px; gap: 9px; }
  .ring-mark { width: 30px; height: 30px; }
  .ring-mark::after { display: none; }
  .gate-etching, .leaf-panel, .archive-label, .canopy-note, .seed-packet { margin-left: 38px; width: calc(100vw - 68px); }
  .hidden-annotation { position: relative; left: 38px; top: auto; width: calc(100vw - 68px); margin-top: 20px; }
  .leaf-tabs, .tab-output { margin-left: 38px; }
  .abacus-branch, .moon-window { opacity: .45; right: -80px; }
}