:root {
  --parchment: #F7E7C2;
  --honey: #C98A42;
  --persimmon: #B85C38;
  --ink: #3E2A1F;
  --moss: #7F8B4B;
  --peach: #F2B6A0;
  --quartz: #D8C7F2;
  --umber: #6E4B36;
  --pen: 'Nanum Pen Script', 'Caveat', cursive;
  --gaegu: 'Gaegu', 'Comic Sans MS', cursive;
  --body: 'Noto Sans KR', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(242, 182, 160, 0.42), transparent 28rem),
    radial-gradient(circle at 83% 28%, rgba(216, 199, 242, 0.32), transparent 26rem),
    linear-gradient(120deg, #F7E7C2 0%, #f4dfaf 55%, #F7E7C2 100%);
  font-family: var(--body);
}

.paper-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(62, 42, 31, .11) 0 1px, transparent 1.4px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(110,75,54,.06) 1px, transparent 1px);
  background-size: 31px 29px, 9px 9px, 11px 11px;
  mix-blend-mode: multiply;
}

.magnetic-field {
  position: fixed;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  left: -16rem;
  top: -16rem;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(216, 199, 242, .18), rgba(242, 182, 160, .08) 36%, transparent 68%);
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.diorama { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
}

.opening { min-height: 112vh; }

.opening::before,
.object-scene::before {
  content: '';
  position: absolute;
  inset: 9% 4% auto auto;
  width: 37rem;
  height: 18rem;
  z-index: -1;
  transform: rotate(-14deg) skewX(-18deg);
  background: rgba(201, 138, 66, .13);
  border: 1px solid rgba(110, 75, 54, .18);
  box-shadow: 0 1.6rem 4rem rgba(62, 42, 31, .12);
}

.pencil-lattice {
  position: absolute;
  width: 46rem;
  height: 34rem;
  opacity: .28;
  background-image:
    linear-gradient(30deg, rgba(62, 42, 31, .24) 1px, transparent 1px),
    linear-gradient(150deg, rgba(62, 42, 31, .16) 1px, transparent 1px);
  background-size: 4.2rem 4.2rem;
  transform: rotate(-9deg) skewX(-18deg);
  pointer-events: none;
}

.lattice-a { right: 3%; top: 7%; }
.lattice-b { left: -5rem; top: 6rem; }
.lattice-c { right: -6rem; bottom: 7rem; }

.stump-stage {
  position: absolute;
  width: clamp(18rem, 36vw, 32rem);
  height: clamp(16rem, 31vw, 27rem);
  left: 18vw;
  top: 26vh;
  transform-style: preserve-3d;
}

.iso-shadow {
  position: absolute;
  width: 82%;
  height: 38%;
  left: 13%;
  bottom: 6%;
  transform: rotate(30deg) skewX(-28deg);
  background: rgba(62, 42, 31, .2);
  filter: blur(16px);
  border-radius: 50%;
}

.stump-top {
  position: absolute;
  left: 13%;
  top: 16%;
  width: 70%;
  height: 52%;
  border-radius: 50%;
  transform: rotate(-18deg) skewX(18deg);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(247, 231, 194, .72) 0 12%, transparent 13%),
    radial-gradient(ellipse at 48% 50%, transparent 0 23%, rgba(184, 92, 56, .38) 24% 25%, transparent 26%),
    radial-gradient(ellipse at 50% 50%, transparent 0 43%, rgba(110, 75, 54, .34) 44% 45%, transparent 46%),
    linear-gradient(145deg, #F7E7C2, #C98A42 65%, #B85C38);
  border: 3px solid rgba(62, 42, 31, .38);
  box-shadow: inset -1.4rem -1rem 0 rgba(110, 75, 54, .22), 0 1.2rem 2rem rgba(62,42,31,.22);
}

.ring { position: absolute; inset: var(--inset); border: 2px solid rgba(110,75,54,.32); border-radius: 50%; }
.ring-one { --inset: 12%; }
.ring-two { --inset: 23%; transform: rotate(7deg); }
.ring-three { --inset: 34%; transform: rotate(-12deg); }
.ring-four { --inset: 43%; transform: rotate(16deg); }
.day-dot { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--persimmon); box-shadow: 0 0 0 .22rem rgba(242,182,160,.5); }
.dot-one { left: 29%; top: 31%; }
.dot-two { left: 57%; top: 22%; }
.dot-three { left: 68%; top: 58%; }

.stump-side { position: absolute; top: 53%; height: 31%; background: linear-gradient(130deg, #C98A42, #6E4B36); }
.side-left { left: 19%; width: 32%; transform: skewY(28deg); border-radius: 0 0 0 2rem; }
.side-right { left: 49%; width: 29%; transform: skewY(-28deg); border-radius: 0 0 2rem 0; filter: brightness(.84); }
.stump-side::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(62,42,31,.13) 13px 15px); }

.sapling { position: absolute; left: 49%; top: 0; width: 8rem; height: 12rem; transform: translateX(-50%); }
.stem { position: absolute; left: 50%; bottom: 14%; width: .42rem; height: 8.4rem; background: var(--moss); border-radius: 2rem; transform: rotate(-4deg); box-shadow: .18rem 0 rgba(62,42,31,.18); }
.leaf { position: absolute; width: 4.6rem; height: 2.2rem; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #7F8B4B, #b3b672); border: 1px solid rgba(62,42,31,.24); }
.leaf::after { content: ''; position: absolute; inset: 48% 8% auto 10%; height: 1px; background: rgba(62,42,31,.34); transform: rotate(-8deg); }
.leaf-a { left: .3rem; top: 3.2rem; transform: rotate(-31deg); }
.leaf-b { right: .1rem; top: 1.5rem; transform: rotate(48deg) scale(.82); }
.paper-sun { position: absolute; width: 2.1rem; height: 2.1rem; background: #F7E7C2; border: 2px solid var(--honey); border-radius: 44% 56% 51% 49%; box-shadow: 0 0 1.8rem rgba(201,138,66,.42); }
.sun-a { right: .8rem; top: 4.9rem; }
.sun-b { left: 1.1rem; top: .5rem; transform: scale(.64); }

.title-strip {
  position: absolute;
  left: 41vw;
  top: 21vh;
  width: min(35rem, 49vw);
  padding: 1.2rem 2.2rem 1.6rem;
  transform: rotate(-7deg);
  background: rgba(247, 231, 194, .88);
  border: 1px solid rgba(62,42,31,.21);
  box-shadow: 0 .8rem 2rem rgba(62,42,31,.16), inset 0 0 0 4px rgba(255,255,255,.16);
  clip-path: polygon(3% 7%, 98% 0, 95% 88%, 66% 100%, 0 92%);
}
.title-strip h1 { margin: 0; font-family: var(--pen); font-size: clamp(5rem, 12vw, 11rem); font-weight: 400; line-height: .78; color: var(--ink); }
.title-strip p { margin: .2rem 0 0; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.7; }
.tiny-stamp, .scene-label { font-family: var(--gaegu); letter-spacing: .06em; color: var(--persimmon); text-transform: lowercase; }

.sunrise-wedge { position: absolute; width: 19rem; height: 11rem; left: 7vw; top: 13vh; transform: rotate(-18deg) skewX(-28deg); background: linear-gradient(135deg, #F7E7C2 0%, #F2B6A0 52%, #C98A42 100%); box-shadow: 1rem 1.2rem 0 rgba(184,92,56,.18); clip-path: polygon(0 0, 100% 22%, 73% 100%, 14% 82%); }
.shadow-pool { position: absolute; width: 18rem; height: 7rem; right: 12vw; bottom: 19vh; border-radius: 50%; background: rgba(110,75,54,.24); filter: blur(6px); transform: rotate(-11deg); }

.crystal-cluster { position: absolute; width: 10rem; height: 10rem; }
.cluster-hero { right: 17vw; top: 54vh; }
.facet { position: absolute; background: linear-gradient(135deg, rgba(247,231,194,.7) 0%, #F2B6A0 48%, #D8C7F2 100%); border: 1px solid rgba(62,42,31,.22); box-shadow: inset 1rem 0 rgba(255,255,255,.24), 0 .8rem 1.3rem rgba(62,42,31,.14); clip-path: polygon(50% 0, 100% 28%, 82% 100%, 19% 92%, 0 31%); }
.f1 { width: 4rem; height: 8rem; left: 3rem; top: .4rem; }
.f2 { width: 3rem; height: 6.5rem; left: .8rem; top: 2.2rem; transform: rotate(-16deg); }
.f3 { width: 3.7rem; height: 7rem; right: .6rem; top: 2rem; transform: rotate(14deg); }

.leaf-envelope { position: absolute; left: 58vw; bottom: 10vh; width: 17rem; transform: rotate(12deg); }
.leaf-envelope svg, .large-leaf { width: 100%; overflow: visible; }
.leaf-envelope path, .large-leaf path { fill: rgba(127,139,75,.56); stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.leaf-envelope path:not(:first-child), .large-leaf path:not(:first-child) { fill: none; stroke-width: 2; opacity: .55; }
.leaf-envelope span { font-family: var(--gaegu); font-size: 1.3rem; margin-left: 4rem; }

.object-scene { display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: min(8vw, 7rem); }
.object-scene::before { inset: 20% auto auto 7%; width: 48rem; height: 25rem; }
.vellum-note, .mineral-copy, .dusk-note { max-width: 35rem; padding: 2rem; background: rgba(247,231,194,.64); box-shadow: 0 1.4rem 3rem rgba(62,42,31,.13); border: 1px solid rgba(62,42,31,.18); backdrop-filter: blur(2px); }
.vellum-note { transform: rotate(-5deg); justify-self: end; clip-path: polygon(0 4%, 94% 0, 100% 86%, 74% 100%, 5% 95%); }
h2 { margin: .2rem 0 1rem; font-family: var(--pen); font-size: clamp(3.4rem, 6vw, 6.4rem); font-weight: 400; line-height: .87; }
article p:not(.scene-label) { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.9; }

.iso-tile { position: relative; width: min(37rem, 45vw); height: 25rem; justify-self: start; transform: rotate(-10deg) skewX(-10deg); background: rgba(201,138,66,.23); box-shadow: 1.6rem 1.7rem 0 rgba(110,75,54,.17), 0 2rem 4rem rgba(62,42,31,.14); border: 1px solid rgba(62,42,31,.19); }
.large-leaf { position: absolute; width: 80%; left: 9%; top: 16%; transform: skewX(10deg) rotate(8deg); }
.tape { position: absolute; width: 8rem; height: 2rem; background: rgba(216,199,242,.5); box-shadow: 0 .3rem .8rem rgba(62,42,31,.14); }
.tape-one { left: -1.3rem; top: 2rem; transform: rotate(-22deg); }
.tape-two { right: 1rem; bottom: 2.8rem; transform: rotate(18deg); }
.annotation, .floating-label, .date-scrap, .closing-strip { font-family: var(--gaegu); font-size: clamp(1.3rem, 2vw, 2rem); }
.anno-left { position: absolute; left: -3rem; bottom: 2rem; transform: skewX(10deg) rotate(-12deg); color: var(--persimmon); }
.floating-label { position: absolute; left: 14vw; bottom: 13vh; padding: .5rem 1.2rem; background: rgba(247,231,194,.7); transform: rotate(7deg); border-bottom: 2px solid rgba(184,92,56,.45); }

.mineral-hour { background: radial-gradient(circle at 65% 47%, rgba(216,199,242,.26), transparent 26rem); }
.glow-orbit { position: absolute; width: 42rem; height: 42rem; right: 2vw; top: 13vh; border-radius: 50%; border: 1px dashed rgba(184,92,56,.24); transform: rotate(-20deg) scaleY(.58); }
.mineral-copy { order: 2; justify-self: start; transform: rotate(4deg); clip-path: polygon(5% 0, 100% 5%, 94% 100%, 0 91%); }
.quartz-table { position: relative; width: min(39rem, 47vw); height: 31rem; justify-self: end; transform: rotate(-9deg); }
.quartz-table::before { content: ''; position: absolute; inset: 35% 10% 13% 6%; transform: rotate(30deg) skewX(-28deg); background: rgba(201,138,66,.19); box-shadow: 1rem 1rem 0 rgba(110,75,54,.13); }
.crystal-prism { position: absolute; bottom: 20%; background: linear-gradient(135deg, rgba(247,231,194,.75) 0%, #F2B6A0 48%, #D8C7F2 100%); border: 2px solid rgba(62,42,31,.24); clip-path: polygon(50% 0, 92% 24%, 100% 78%, 62% 100%, 10% 83%, 0 28%); box-shadow: inset 1.6rem 0 rgba(255,255,255,.2), 0 1.4rem 2rem rgba(62,42,31,.16); }
.prism-one { width: 10rem; height: 22rem; left: 13rem; }
.prism-two { width: 8rem; height: 17rem; left: 6rem; transform: rotate(-13deg); }
.prism-three { width: 8.5rem; height: 19rem; right: 5rem; transform: rotate(12deg); }
.filing-arc { position: absolute; border: 1px solid rgba(62,42,31,.22); border-left: 0; border-bottom: 0; border-radius: 50%; }
.arc-one { width: 22rem; height: 12rem; left: 4rem; top: 4rem; transform: rotate(18deg); }
.arc-two { width: 16rem; height: 8rem; left: 12rem; bottom: 3rem; transform: rotate(-24deg); }
.resin-chip { position: absolute; width: 3rem; height: 2rem; background: var(--honey); clip-path: polygon(12% 10%, 100% 0, 78% 100%, 0 76%); box-shadow: 0 .7rem 1rem rgba(62,42,31,.16); }
.chip-one { left: 2rem; bottom: 8rem; }
.chip-two { right: 1rem; top: 11rem; background: var(--persimmon); }
.date-scrap { position: absolute; right: 12vw; bottom: 12vh; padding: .8rem 1.2rem; transform: rotate(-9deg); background: rgba(216,199,242,.38); }

.evening-ring { background: linear-gradient(180deg, rgba(247,231,194,0) 0%, rgba(110,75,54,.22) 100%); grid-template-columns: .9fr 1.1fr; }
.evening-seal { position: relative; width: min(38rem, 44vw); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: radial-gradient(circle, #F7E7C2 0 11%, #C98A42 12% 53%, #B85C38 54% 70%, #6E4B36 71%); box-shadow: inset -2rem -2rem 0 rgba(62,42,31,.18), 0 2rem 4rem rgba(62,42,31,.22); transform: rotate(-16deg) skewX(8deg); }
.seal-ring { position: absolute; inset: var(--inset); border: 2px solid rgba(62,42,31,.25); border-radius: 50%; }
.r1 { --inset: 10%; } .r2 { --inset: 22%; } .r3 { --inset: 35%; } .r4 { --inset: 47%; }
.ink-blob { position: absolute; background: rgba(62,42,31,.76); border-radius: 54% 46% 68% 32%; }
.b1 { width: 1.4rem; height: 1rem; left: 28%; top: 33%; }
.b2 { width: .9rem; height: 1.2rem; right: 31%; bottom: 29%; }
.dusk-note { transform: rotate(3deg); clip-path: polygon(3% 6%, 100% 0, 92% 95%, 8% 100%, 0 42%); }
.closing-strip { position: absolute; right: 8vw; bottom: 10vh; width: min(34rem, 80vw); padding: 1rem 1.6rem; background: rgba(62,42,31,.86); color: var(--parchment); transform: rotate(-4deg); box-shadow: 0 1rem 2rem rgba(62,42,31,.18); }
.closing-strip span { display: block; color: var(--peach); }
.closing-strip strong { display: block; font-family: var(--pen); font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 400; line-height: .9; }

.magnetic { will-change: transform; transition: transform .7s cubic-bezier(.2,.8,.16,1); }
.reveal { opacity: 0; translate: 0 3rem; transition: opacity 1.1s ease, translate 1.1s ease, transform .7s cubic-bezier(.2,.8,.16,1); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

@keyframes breathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.08) brightness(1.04); }
}
.crystal-prism, .facet { animation: breathe 5.8s ease-in-out infinite; }

@media (max-width: 820px) {
  .scene { min-height: auto; padding: 4rem 1.2rem; }
  .opening { min-height: 105vh; }
  .stump-stage { left: 4vw; top: 32vh; width: 22rem; height: 19rem; }
  .title-strip { left: 7vw; top: 9vh; width: 86vw; }
  .cluster-hero { right: 6vw; top: 66vh; }
  .leaf-envelope { left: 49vw; bottom: 5vh; width: 12rem; }
  .object-scene { display: block; }
  .vellum-note, .mineral-copy, .dusk-note { margin: 0 auto 3rem; }
  .iso-tile, .quartz-table, .evening-seal { width: 92vw; max-width: 34rem; margin: 0 auto; }
  .glow-orbit { right: -14rem; }
  .date-scrap, .floating-label, .closing-strip { position: relative; left: auto; right: auto; bottom: auto; margin: 2rem auto; }
}