:root {
    --deep-bark: #17130E;
    --moss-ink: #2F4632;
    --lichen: #8A9A82;
    --hanji: #F1EBDD;
    --silk: #B8D6D9;
    --thread: #D86F45;
    --chalk: #D7D1C4;
    --plum: #4B2E3D;
    --serif: "Gowun Batang", serif;
    --editorial: "Instrument Serif", serif;
    --sans-kr: "Noto Sans KR", sans-serif;
    --measure: "Manrope", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--hanji);
    background: var(--deep-bark);
    font-family: var(--sans-kr);
    overflow-x: hidden;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: .22;
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(241,235,221,.14) 0 1px, transparent 1px),
        radial-gradient(circle at 75% 62%, rgba(184,214,217,.1) 0 1px, transparent 1px),
        linear-gradient(105deg, transparent 0 47%, rgba(215,209,196,.05) 48% 52%, transparent 53% 100%);
    background-size: 13px 17px, 19px 23px, 100% 100%;
}

.stitched-tabs {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 40;
    display: flex;
    gap: 8px;
    transform: rotate(-2deg);
}

.stitched-tabs button {
    padding: 8px 12px;
    border: 1px dashed rgba(215,209,196,.46);
    border-radius: 999px;
    color: rgba(241,235,221,.7);
    font-family: var(--measure);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(23,19,14,.46);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: color .4s ease, border-color .4s ease, background .4s ease, transform .4s ease;
}

.stitched-tabs button.active {
    color: var(--deep-bark);
    border-color: var(--thread);
    background: var(--chalk);
    transform: translateY(5px) rotate(2deg);
}

.ritual {
    width: 100%;
    scroll-snap-type: y mandatory;
}

.room {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    scroll-snap-align: start;
    isolation: isolate;
}

.room > * {
    transform-style: preserve-3d;
}

.room::before {
    content: attr(data-scene);
    position: absolute;
    left: 28px;
    top: 38%;
    writing-mode: vertical-rl;
    font-family: var(--measure);
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(215,209,196,.52);
    z-index: 4;
}

.root-room {
    background:
        radial-gradient(circle at 78% 16%, rgba(184,214,217,.16), transparent 22%),
        radial-gradient(circle at 5% 92%, rgba(75,46,61,.65), transparent 36%),
        linear-gradient(140deg, #17130E 0%, #1d2117 56%, #2F4632 100%);
}

.moon {
    position: absolute;
    width: 24vw;
    height: 24vw;
    right: -7vw;
    top: -8vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,214,217,.72), rgba(184,214,217,.12) 55%, transparent 68%);
    filter: blur(1px);
}

.trunk {
    position: absolute;
    left: 19vw;
    bottom: -10vh;
    width: 24vw;
    min-width: 245px;
    height: 112vh;
    border-radius: 48% 41% 0 0 / 12% 16% 0 0;
    background:
        linear-gradient(90deg, rgba(241,235,221,.06), transparent 15% 82%, rgba(23,19,14,.42)),
        repeating-linear-gradient(97deg, rgba(215,209,196,.1) 0 2px, transparent 2px 17px),
        linear-gradient(180deg, #2F4632, #17130E 80%);
    box-shadow: inset 42px 0 60px rgba(23,19,14,.55), 40px 0 110px rgba(0,0,0,.32);
    transform: rotate(3deg);
}

.bark-line {
    position: absolute;
    top: 7%;
    bottom: 0;
    width: 2px;
    background: rgba(215,209,196,.18);
    border-radius: 50%;
}
.bark-line-a { left: 34%; transform: rotate(4deg); }
.bark-line-b { left: 62%; transform: rotate(-3deg); }

.cloth-label {
    position: absolute;
    left: -48px;
    bottom: 22vh;
    width: 270px;
    padding: 22px 24px 19px;
    color: var(--deep-bark);
    background: var(--hanji);
    border: 1px solid rgba(23,19,14,.2);
    box-shadow: 0 25px 55px rgba(0,0,0,.35);
    transform: rotate(-7deg);
}

.cloth-label::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(47,70,50,.44);
}

.label-pin {
    position: absolute;
    right: 22px;
    top: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--thread);
    box-shadow: 0 0 0 8px rgba(216,111,69,.18);
}

.cloth-label strong {
    display: block;
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.03em;
}

.cloth-label small {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: rgba(23,19,14,.72);
}

.root-cord {
    position: absolute;
    inset: 21vh 3vw 4vh 0;
    z-index: 2;
    overflow: visible;
}

.root-cord path {
    fill: none;
    stroke: var(--thread);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.root-cord .cord-shadow {
    stroke: rgba(23,19,14,.55);
    stroke-width: 13;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transform: translate(8px, 12px);
}

.root-copy {
    position: absolute;
    right: 9vw;
    bottom: 17vh;
    max-width: 320px;
    color: rgba(241,235,221,.68);
    font-family: var(--sans-kr);
    font-size: 13px;
    line-height: 1.8;
    border-left: 1px dashed rgba(215,209,196,.42);
    padding-left: 18px;
}

.differentiator-note {
    position: absolute;
    left: 56vw;
    bottom: 8vh;
    z-index: 5;
    max-width: 260px;
    color: rgba(184,214,217,.56);
    font-family: var(--measure);
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .16em;
    text-transform: uppercase;
    transform: rotate(3deg);
}

.wordmark {
    position: absolute;
    left: 47vw;
    top: 25vh;
    margin: 0;
    font-family: var(--editorial);
    font-size: clamp(86px, 16vw, 235px);
    font-weight: 400;
    line-height: .72;
    letter-spacing: -.07em;
    color: rgba(241,235,221,.16);
    transform: rotate(-4deg);
}

.wordmark span { color: rgba(184,214,217,.22); }

.ring-room {
    background: linear-gradient(118deg, var(--hanji), var(--chalk) 63%, #c8c1b2);
    color: var(--deep-bark);
}

.table-sheet {
    position: absolute;
    background: rgba(241,235,221,.62);
    border: 1px solid rgba(47,70,50,.22);
    box-shadow: 0 18px 65px rgba(47,70,50,.13);
}
.sheet-one { width: 62vw; height: 54vh; left: 8vw; top: 19vh; transform: rotate(-8deg); }
.sheet-two { width: 50vw; height: 45vh; right: 4vw; top: 30vh; transform: rotate(6deg); background: rgba(184,214,217,.22); }

.ring-guide {
    position: absolute;
    left: 10vw;
    top: 12vh;
    width: min(44vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: rotate(-10deg);
}

.ring-guide span {
    position: absolute;
    inset: calc(var(--i, 0) * 8%);
    border: 1px solid rgba(47,70,50,.24);
    border-radius: 50%;
}
.ring-guide span:nth-child(1) { --i: 0; }
.ring-guide span:nth-child(2) { --i: 1; }
.ring-guide span:nth-child(3) { --i: 2; }
.ring-guide span:nth-child(4) { --i: 3; }
.ring-guide b {
    position: absolute;
    left: 46%;
    top: 49%;
    font-family: var(--measure);
    font-size: 13px;
    color: var(--thread);
}

.pattern-piece {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    color: var(--moss-ink);
    font-family: var(--serif);
    font-size: clamp(22px, 3vw, 42px);
    background: rgba(241,235,221,.78);
    border: 1px dashed rgba(47,70,50,.42);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.pattern-piece em {
    display: block;
    margin-top: 8px;
    font-family: var(--measure);
    font-size: 10px;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.piece-shoulder { width: 240px; height: 220px; right: 15vw; top: 17vh; clip-path: polygon(18% 10%, 83% 0, 100% 43%, 62% 100%, 3% 76%); }
.piece-waist { width: 280px; height: 190px; left: 38vw; top: 39vh; clip-path: ellipse(49% 37% at 50% 50%); }
.piece-sleeve { width: 215px; height: 365px; right: 26vw; bottom: 4vh; clip-path: polygon(39% 0, 78% 8%, 100% 88%, 40% 100%, 0 21%); }

.chalk-map {
    position: absolute;
    inset: 8vh 3vw;
    z-index: 2;
}
.chalk-map path {
    fill: none;
    stroke: rgba(216,111,69,.62);
    stroke-width: 3;
    stroke-dasharray: 10 18;
    stroke-linecap: round;
}

.ring-room h2,
.bark-room h2,
.canopy-room h2,
.seed-room h2 {
    position: absolute;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(46px, 8vw, 120px);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -.06em;
    z-index: 5;
}
.ring-room h2 { left: 8vw; bottom: 8vh; max-width: 700px; color: rgba(47,70,50,.82); }
.annotation {
    position: absolute;
    right: 7vw;
    bottom: 11vh;
    z-index: 5;
    max-width: 350px;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(23,19,14,.68);
    border-top: 1px dashed rgba(47,70,50,.34);
    padding-top: 16px;
}

.bark-room {
    background:
        radial-gradient(circle at 22% 14%, rgba(216,111,69,.16), transparent 26%),
        linear-gradient(90deg, #17130E, #2F4632 56%, #4B2E3D);
}

.garment-stand {
    position: absolute;
    top: 9vh;
    left: 50%;
    width: 2px;
    height: 76vh;
    background: rgba(215,209,196,.48);
}
.garment-stand::before {
    content: "";
    position: absolute;
    left: -190px;
    top: 0;
    width: 380px;
    height: 80px;
    border-top: 4px solid rgba(215,209,196,.45);
    border-radius: 50%;
}

.bark-garment {
    position: absolute;
    left: 50%;
    top: 16vh;
    width: min(46vw, 470px);
    height: 68vh;
    transform: translateX(-50%);
    filter: drop-shadow(0 34px 50px rgba(0,0,0,.45));
}

.panel {
    position: absolute;
    top: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(100deg, rgba(241,235,221,.09) 0 5px, transparent 5px 18px),
        linear-gradient(180deg, rgba(215,209,196,.74), rgba(138,154,130,.72));
    border: 1px solid rgba(241,235,221,.18);
    backdrop-filter: blur(3px);
    transform-origin: top center;
    transition: transform .9s ease;
}
.panel-left { left: 6%; width: 34%; clip-path: polygon(38% 0, 100% 6%, 82% 100%, 0 92%); transform: rotate(-7deg); }
.panel-center { left: 31%; width: 38%; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); background-color: rgba(184,214,217,.18); }
.panel-right { right: 6%; width: 34%; clip-path: polygon(0 6%, 62% 0, 100% 92%, 18% 100%); transform: rotate(7deg); }
.bark-garment.unfurled .panel-left { transform: rotate(-15deg) translateX(-18px); }
.bark-garment.unfurled .panel-center { transform: translateY(-8px) scaleX(1.04); }
.bark-garment.unfurled .panel-right { transform: rotate(15deg) translateX(18px); }

.seams {
    position: absolute;
    inset: 0;
    z-index: 5;
}
.seams path {
    fill: none;
    stroke: var(--thread);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 8 13;
}

.thread-spool {
    position: absolute;
    left: 12vw;
    bottom: 15vh;
    width: 126px;
    height: 126px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    color: var(--deep-bark);
    background: repeating-radial-gradient(circle, var(--thread) 0 5px, #ba5536 6px 11px);
    font-family: var(--measure);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
}

.needle {
    position: absolute;
    right: 17vw;
    top: 22vh;
    width: 3px;
    height: 210px;
    background: var(--silk);
    border-radius: 999px;
    transform: rotate(35deg);
    box-shadow: 0 0 28px rgba(184,214,217,.55);
}
.needle::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    width: 13px;
    height: 28px;
    border: 2px solid var(--silk);
    border-radius: 50%;
}

.bark-room h2 { left: 7vw; top: 10vh; max-width: 520px; color: rgba(241,235,221,.82); }
.vertical-note {
    position: absolute;
    right: 8vw;
    bottom: 12vh;
    writing-mode: vertical-rl;
    font-family: var(--editorial);
    font-size: 54px;
    color: rgba(184,214,217,.28);
}

.canopy-room {
    background:
        linear-gradient(90deg, rgba(23,19,14,.94), rgba(47,70,50,.86)),
        radial-gradient(circle at 70% 40%, rgba(184,214,217,.24), transparent 36%);
}

.screen {
    position: absolute;
    top: 8vh;
    bottom: 7vh;
    width: 24vw;
    border: 1px solid rgba(184,214,217,.22);
    background: linear-gradient(90deg, rgba(241,235,221,.08), rgba(184,214,217,.13));
    box-shadow: inset 0 0 55px rgba(241,235,221,.04);
}
.screen-a { left: 22vw; transform: skewY(-3deg); }
.screen-b { left: 43vw; transform: skewY(2deg); }
.screen-c { left: 64vw; transform: skewY(-1deg); }

.canopy-silhouette {
    position: absolute;
    left: 48vw;
    top: 19vh;
    width: 250px;
    height: 520px;
    background:
        radial-gradient(circle at 50% 10%, var(--silk) 0 42px, transparent 43px),
        linear-gradient(180deg, rgba(184,214,217,.66), rgba(138,154,130,.58));
    clip-path: polygon(42% 6%, 58% 6%, 72% 20%, 88% 96%, 12% 96%, 28% 20%);
    filter: drop-shadow(0 35px 60px rgba(0,0,0,.45));
    transition: clip-path .7s ease, transform .25s ease, background .7s ease;
}

.swatch-leaves button {
    position: absolute;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 115px;
    height: 74px;
    border-radius: 6% 94% 14% 86% / 34% 62% 38% 66%;
    border: 1px solid rgba(241,235,221,.22);
    color: var(--deep-bark);
    font-family: var(--measure);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
    transition: transform .5s ease, filter .5s ease;
}
.swatch-leaves button:hover { transform: rotate(9deg) scale(1.08); filter: brightness(1.1); }
.leaf-one { left: 10vw; top: 19vh; background: var(--lichen); transform: rotate(-17deg); }
.leaf-two { left: 14vw; bottom: 18vh; background: var(--silk); transform: rotate(14deg); }
.leaf-three { right: 11vw; top: 17vh; background: var(--plum); color: var(--hanji) !important; transform: rotate(21deg); }
.leaf-four { right: 16vw; bottom: 15vh; background: var(--chalk); transform: rotate(-9deg); }

.canopy-room h2 { left: 8vw; bottom: 10vh; max-width: 600px; color: rgba(241,235,221,.78); }
.canopy-room .annotation { color: rgba(241,235,221,.68); border-color: rgba(184,214,217,.24); }

.seed-room {
    background:
        radial-gradient(circle at 50% 50%, rgba(184,214,217,.14), transparent 35%),
        linear-gradient(135deg, var(--chalk), var(--hanji) 54%, #d6cec0);
    color: var(--deep-bark);
}

.seed-packet {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 5;
    width: min(460px, 72vw);
    min-height: 300px;
    padding: 76px 46px 40px;
    text-align: center;
    background:
        radial-gradient(circle at 18% 22%, rgba(216,111,69,.12), transparent 18%),
        var(--hanji);
    border: 1px solid rgba(47,70,50,.25);
    box-shadow: 0 35px 80px rgba(47,70,50,.22);
    transform: translate(-50%, -50%) rotate(-3deg);
}
.seed-packet::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(47,70,50,.4);
}
.seed-packet strong {
    display: block;
    position: relative;
    font-family: var(--serif);
    font-size: clamp(44px, 7vw, 82px);
    letter-spacing: -.05em;
    color: var(--moss-ink);
}
.seed-packet small {
    position: relative;
    display: block;
    margin-top: 20px;
    font-family: var(--sans-kr);
    color: rgba(23,19,14,.6);
}
.seed-packet.stamped {
    animation: stampBloom .65s cubic-bezier(.2,.8,.2,1);
}
.stamp-ring {
    position: absolute;
    left: 50%;
    top: 24px;
    width: 90px;
    height: 90px;
    border: 4px double rgba(216,111,69,.78);
    border-radius: 50%;
    transform: translateX(-50%) rotate(12deg);
}

.monogram-thread {
    position: absolute;
    inset: 10vh 8vw;
    z-index: 2;
}
.monogram-thread path {
    fill: none;
    stroke: var(--thread);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.acorn-toggle {
    position: absolute;
    right: 12vw;
    bottom: 16vh;
    width: 120px;
    height: 138px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--hanji);
    background: linear-gradient(180deg, var(--plum), var(--deep-bark));
    border-radius: 50% 50% 46% 46% / 38% 38% 60% 60%;
    font-family: var(--measure);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    transform: rotate(8deg);
}

.seed-room h2 { left: 7vw; top: 12vh; max-width: 540px; color: rgba(47,70,50,.75); }
.final-copy {
    position: absolute;
    left: 10vw;
    bottom: 12vh;
    max-width: 360px;
    color: rgba(23,19,14,.62);
    line-height: 1.8;
    border-left: 1px dashed rgba(47,70,50,.36);
    padding-left: 18px;
}

.room.in-view .pattern-piece { transform: translateY(-9px) rotate(var(--tilt, 0deg)); }
.room.in-view .piece-shoulder { --tilt: -4deg; }
.room.in-view .piece-waist { --tilt: 3deg; }
.room.in-view .piece-sleeve { --tilt: 8deg; }
.room.in-view .panel-left { transform: rotate(-11deg) translateX(-8px); }
.room.in-view .panel-right { transform: rotate(11deg) translateX(8px); }

@keyframes stampBloom {
    0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); filter: saturate(1); }
    38% { transform: translate(-50%, -50%) rotate(-3deg) scale(.96); filter: saturate(1.5); }
    100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); filter: saturate(1); }
}

@media (max-width: 760px) {
    .stitched-tabs { left: 10px; right: 10px; top: 10px; overflow-x: auto; }
    .stitched-tabs button { white-space: nowrap; padding: 7px 9px; font-size: 10px; }
    .trunk { left: 8vw; width: 44vw; }
    .wordmark { left: 37vw; top: 31vh; }
    .cloth-label { width: 230px; left: 10px; }
    .piece-shoulder { right: 4vw; top: 19vh; }
    .piece-waist { left: 12vw; top: 43vh; }
    .piece-sleeve { right: 7vw; bottom: 7vh; }
    .annotation { right: 7vw; left: 28vw; max-width: none; }
    .bark-garment { width: 76vw; }
    .screen { width: 36vw; }
    .screen-a { left: 12vw; }
    .screen-b { left: 36vw; }
    .screen-c { left: 60vw; }
    .canopy-silhouette { left: 32vw; width: 210px; height: 440px; }
    .swatch-leaves button { width: 86px; height: 58px; }
}