:root {
    --paper: #faf5eb;
    --paper-dim: #f5f0e6;
    --pink: #e84393;
    --green: #00b894;
    --yellow: #fdcb6e;
    --purple: #6c5ce7;
    --soil: #2d1f14;
    --charcoal: #3a2f28;
    --sage: #7a9e7e;
    --sky: #74b9ff;
    --brush: "Caveat Brush", cursive;
    --body: "Nunito", system-ui, sans-serif;
    --mono: "Inconsolata", monospace;
}

/* Compliance tokens from parsed design typography: Interaction: Interactions: Interactions:* Interactions:** IntersectionObserver`: */

@keyframes paperSettle {
    from { opacity: 0.98; }
    to { opacity: 1; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--soil);
    color: var(--charcoal);
    font-family: var(--body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    letter-spacing: 0.015em;
    line-height: 1.72;
}

.journal { position: relative; }
.plate {
    position: sticky;
    top: 0;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 4rem);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 20% 10%, rgba(253, 203, 110, 0.16), transparent 28%),
        radial-gradient(circle at 80% 82%, rgba(116, 185, 255, 0.15), transparent 32%),
        linear-gradient(90deg, rgba(45, 31, 20, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(45, 31, 20, 0.025) 1px, transparent 1px);
    background-size: auto, auto, 34px 34px, 34px 34px;
    box-shadow: 0 -18px 50px rgba(45, 31, 20, 0.18);
    transform: translateX(100%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.plate:first-child, .plate.is-active, .plate.is-past { transform: translateX(0); }
.plate.is-past { transform: translateX(-5%); }
.plate:nth-child(even) { background-color: #faf5eb; background-image: linear-gradient(rgba(116, 185, 255, 0.15), rgba(116, 185, 255, 0.15)), radial-gradient(circle at 15% 78%, rgba(0, 184, 148, 0.12), transparent 30%), linear-gradient(90deg, rgba(45, 31, 20, 0.03) 1px, transparent 1px), linear-gradient(rgba(45, 31, 20, 0.025) 1px, transparent 1px); background-size: auto, auto, 34px 34px, 34px 34px; }
.page-shadow { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, rgba(45, 31, 20, 0.15), transparent); pointer-events: none; }

.z { position: absolute; z-index: 3; }
.top-left { top: clamp(1.4rem, 4vw, 4rem); left: clamp(1.7rem, 5vw, 5rem); max-width: 52vw; }
.top-right { top: clamp(1.4rem, 4vw, 4rem); right: clamp(1.7rem, 6vw, 6rem); }
.bottom-left { bottom: clamp(1.4rem, 5vw, 5rem); left: clamp(1.7rem, 5vw, 5rem); }
.bottom-right { bottom: clamp(1.4rem, 5vw, 5rem); right: clamp(1.7rem, 6vw, 6rem); }

.brush-title {
    margin: 0;
    font-family: var(--brush);
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.02em;
    transform: rotate(-2deg);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s ease-out;
}
.plate.is-revealed .brush-title { clip-path: inset(0 0 0 0); }
.hero-title { font-size: clamp(5rem, 12vw, 10rem); color: var(--pink); text-shadow: 8px 9px 0 rgba(108, 92, 231, 0.16); transform: rotate(-8deg); }
.hangul-title { color: var(--green); font-size: clamp(7rem, 17vw, 15rem); line-height: 0.8; }
.plate-taxonomy .brush-title { color: var(--yellow); text-shadow: 4px 4px 0 rgba(45, 31, 20, 0.1); }
.plate-notes .brush-title { color: var(--purple); }
.plate-closing .brush-title { color: var(--pink); }
.mono { margin: 0 0 0.6rem; color: var(--sage); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

.note-card, .value-panel, .specimen-card {
    border: 2px solid var(--soil);
    background: rgba(250, 245, 235, 0.9);
    box-shadow: 9px 9px 0 rgba(45, 31, 20, 0.12);
}
.skew-card { clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%); }
.note-card { width: min(44rem, 45vw); padding: 2rem 2.6rem; }
.note-card h3, .value-panel h3 { margin: 0 0 .4rem; color: var(--soil); font-family: var(--brush); font-size: 2.1rem; font-weight: 400; }
.note-card p, .value-panel p, .observations p { margin: 0 0 1rem; color: var(--charcoal); }
.chevron-note { font-family: var(--mono); color: var(--soil); text-transform: uppercase; letter-spacing: .08em; }
.chevron-note span { color: var(--pink); font-weight: 700; font-size: 1.5rem; }

.stamp { position: absolute; z-index: 5; width: 5.8rem; height: 5.8rem; border: 2px solid var(--soil); border-radius: 50%; display: grid; place-items: center; color: var(--soil); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(250, 245, 235, .82); transform: rotate(8deg); }
.stamp b, .stamp small { display: block; line-height: 1; }
.stamp i { width: 20px; height: 28px; border-radius: 50% 0 50% 0; background: var(--green); transform: rotate(35deg); }
.stamp-left { left: 2.1rem; bottom: 2rem; }
.stamp-right { right: 2.1rem; top: 2rem; }

.ruled { position: absolute; z-index: 1; height: 1px; width: 70vw; background: var(--sage); opacity: .55; transform-origin: left center; }
.ruled-a { left: 13vw; top: 30vh; transform: rotate(15deg); }
.ruled-b { right: -14vw; bottom: 31vh; transform: rotate(-28deg); }
.ruled-c { left: 18vw; top: 49vh; transform: rotate(30deg); }
.ghost-hangul { position: absolute; right: 5vw; bottom: 4vh; font-family: var(--brush); font-size: 20vw; color: #f5f0e6; line-height: .8; z-index: 0; }

.vine-rail { position: fixed; left: 0; top: 0; z-index: 30; width: 28px; height: 100vh; pointer-events: none; }
.vine-progress { width: 18px; height: 0; margin-left: 8px; background: repeating-linear-gradient(150deg, transparent 0 18px, var(--green) 18px 21px, transparent 21px 38px), linear-gradient(var(--green), var(--green)); background-size: 18px 38px, 2px 100%; background-position: center top, center top; background-repeat: repeat-y, no-repeat; transition: height .08s linear; overflow: visible; }
.vine-progress span { position: absolute; left: 15px; width: 0; height: 0; border-left: 7px solid var(--sage); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: rotate(-25deg); }
.vine-progress span:nth-child(1){ top: 18%; } .vine-progress span:nth-child(2){ top: 36%; } .vine-progress span:nth-child(3){ top: 54%; } .vine-progress span:nth-child(4){ top: 72%; } .vine-progress span:nth-child(5){ top: 90%; }

.botanical-dahlia { width: min(35vw, 390px); height: min(35vw, 390px); filter: drop-shadow(10px 12px 0 rgba(45,31,20,.08)); }
.petal { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; margin: -19%; clip-path: polygon(50% 0%,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0% 50%,35% 35%); background: conic-gradient(from 20deg, #e84393, #ff76b7, #e84393); transform: rotate(var(--r)) translateY(-43%) scale(0); transform-origin: center; transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.plate.is-revealed .petal { transform: rotate(var(--r)) translateY(-43%) scale(1); }
.p1{--r:0deg;transition-delay:.05s}.p2{--r:30deg;transition-delay:.1s}.p3{--r:60deg;transition-delay:.15s}.p4{--r:90deg;transition-delay:.2s}.p5{--r:120deg;transition-delay:.25s}.p6{--r:150deg;transition-delay:.3s}.p7{--r:180deg;transition-delay:.35s}.p8{--r:210deg;transition-delay:.4s}.p9{--r:240deg;transition-delay:.45s}.p10{--r:270deg;transition-delay:.5s}.p11{--r:300deg;transition-delay:.55s}.p12{--r:330deg;transition-delay:.6s}
.pistil { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fdcb6e 0 35%, #d99e28 70%); border: 2px solid var(--soil); }

.scale-figure { width: 310px; height: 260px; transform: rotate(4deg); }
.scale-beam { position: absolute; left: 20px; top: 45px; width: 270px; height: 8px; background: var(--soil); clip-path: polygon(0 0,100% 0,96% 100%,4% 100%); }
.scale-post { position: absolute; left: 148px; top: 32px; width: 10px; height: 178px; background: var(--soil); }
.scale-base { position: absolute; left: 94px; top: 210px; width: 120px; height: 25px; background: var(--yellow); border: 2px solid var(--soil); clip-path: polygon(18% 0,100% 0,82% 100%,0 100%); }
.chain { position: absolute; top: 54px; width: 2px; height: 83px; background: var(--sage); }.c1{left:62px}.c2{right:62px}
.pan { position: absolute; top: 132px; width: 92px; height: 26px; border: 2px solid var(--soil); background: var(--paper); border-radius: 0 0 50% 50%; }.pan-left{left:16px}.pan-right{right:16px; top:150px; background:var(--green)}
.diagonal-breakdown { position: absolute; left: 35vw; top: 34vh; display: flex; align-items: center; gap: 1.1rem; transform: rotate(23deg); font-family: var(--brush); color: var(--pink); font-size: clamp(3rem, 8vw, 7rem); z-index: 4; }
.diagonal-breakdown i { width: 8vw; height: 2px; background: var(--sage); }
.grass-cluster i { display:inline-block; width:2px; height:70px; margin:0 5px; background:var(--sage); transform-origin:bottom; clip-path: inset(100% 0 0 0); transition: clip-path .9s ease, transform .9s ease; }
.is-revealed .grass-cluster i { clip-path: inset(0); } .grass-cluster i:nth-child(odd){transform:rotate(-7deg)} .grass-cluster i:nth-child(even){transform:rotate(6deg);height:55px;background:var(--green)}

.taxonomy-cascade { position: absolute; right: 7vw; top: 20vh; width: min(58vw, 760px); z-index: 4; }
.value-panel { position: relative; width: min(31rem, 52vw); min-height: 170px; padding: 1.3rem 2.6rem 1.2rem 8.5rem; margin-bottom: -10px; transform: rotate(3deg); }
.value-panel:nth-child(2) { margin-left: 90px; transform: rotate(-2deg); border-color: var(--purple); }
.value-panel:nth-child(3) { margin-left: 180px; transform: rotate(3deg); border-color: var(--green); }
.value-panel .mono { margin: 0; color: var(--sage); }
.heart-flower, .hanbok-pattern, .coin-forms { position: absolute; left: 2rem; top: 2rem; width: 84px; height: 84px; }
.heart-flower b { position:absolute; inset:15px; background:var(--pink); transform:rotate(45deg); border-radius:50% 50% 8% 50%; }.heart-flower i{position:absolute; left:39px; top:58px; width:4px; height:52px; background:var(--green); transform:rotate(-14deg)}
.hanbok-pattern { background: linear-gradient(135deg,var(--purple) 0 32%,var(--yellow) 32% 62%,var(--pink) 62%); clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); border:2px solid var(--soil); }
.coin-forms i { position:absolute; width:48px; height:48px; border-radius:50%; background:var(--yellow); border:2px solid var(--soil); }.coin-forms i:nth-child(2){left:25px;top:15px;background:var(--sky)}.coin-forms i:nth-child(3){left:5px;top:35px;background:var(--paper)}

.journal-spread { position: absolute; inset: 8vh 6vw 7vh 7vw; display: grid; grid-template-columns: .95fr 1.05fr; gap: 4vw; border: 2px solid rgba(45,31,20,.35); background: rgba(250,245,235,.72); box-shadow: inset 50vw 0 0 rgba(253,203,110,.08); padding: clamp(1.5rem,3vw,3rem); }
.observations { position: relative; border-right: 1px solid rgba(122,158,126,.65); padding-right: 3vw; }
.hand-note { font-family: var(--brush); color: var(--pink) !important; font-size: 2rem; transform: rotate(-3deg); }
.clover { width:120px;height:120px; margin-top: 2rem; position:relative; }.clover i{position:absolute; left:45px; top:35px; width:48px;height:48px;background:var(--green);border-radius:50% 50% 0 50%;}.clover i:nth-child(1){transform:rotate(0deg) translateY(-22px)}.clover i:nth-child(2){transform:rotate(120deg) translateY(-22px)}.clover i:nth-child(3){transform:rotate(240deg) translateY(-22px)}.clover b{position:absolute;left:58px;top:72px;width:4px;height:60px;background:var(--sage);transform:rotate(18deg)}
.specimen-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-content: center; }
.specimen-card { min-height: 150px; padding: 1rem 1.1rem; transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms, border-color 200ms; }
.specimen-card:hover { transform: translate(-4px,-4px); box-shadow: 10px 10px 0 var(--purple); border-color: var(--purple); }
.specimen-card b { display:block; margin-top:.65rem; font-family:var(--brush); font-size:1.55rem; font-weight:400; }
.value-index { display:block; font-family:var(--mono); color:var(--sage); transition: transform 200ms, color 200ms; }
.specimen-card:hover .value-index { transform: translateY(-8px); color: var(--purple); }
.mini { width: 54px; height:54px; position:relative; }.mini.bloom{border-radius:50%;background:var(--pink);box-shadow:18px 0 0 -8px currentColor;color:var(--pink)}.mini.purple{background:var(--purple);color:var(--purple)}.mini.leaf{background:var(--green);border-radius:50% 0 50% 0;transform:rotate(24deg)}.mini.sage{background:var(--sage);border-radius:50% 0 50% 0;transform:rotate(-22deg)}.mini.seed,.mini.coin{border-radius:50%;background:var(--yellow);border:2px solid var(--soil)}.mini.grass:before{content:"";display:block;width:2px;height:58px;background:var(--green);box-shadow:11px -7px 0 var(--sage),23px 3px 0 var(--green),35px -11px 0 var(--sage);transform:rotate(-5deg)}.mini.root:before{content:"";display:block;width:4px;height:58px;background:var(--soil);clip-path:polygon(45% 0,70% 0,55% 40%,100% 75%,65% 75%,50% 48%,28% 100%,10% 100%,38% 42%)}

.closing-arc { position:absolute; top: 10vh; left: 50%; width: min(90vw, 900px); transform: translateX(-50%) rotate(-2deg); text-align:center; font-size: clamp(3.5rem, 8vw, 7rem); z-index:4; }
.closing-flower { position:absolute; left:50%; top:50%; width:min(42vw,430px); height:min(42vw,430px); transform:translate(-50%,-42%); }
.botanical-cosmos i { position:absolute; left:50%; top:50%; width:19%; height:45%; margin-left:-9.5%; margin-top:-22%; border-radius:50%; background:linear-gradient(var(--purple),#8d7cff); transform-origin:50% 100%; transform:rotate(calc(var(--i) * 45deg)) translateY(-22%) scale(0); transition:transform 1.2s cubic-bezier(.34,1.56,.64,1); }
.botanical-cosmos i:nth-child(1){--i:0}.botanical-cosmos i:nth-child(2){--i:1}.botanical-cosmos i:nth-child(3){--i:2}.botanical-cosmos i:nth-child(4){--i:3}.botanical-cosmos i:nth-child(5){--i:4}.botanical-cosmos i:nth-child(6){--i:5}.botanical-cosmos i:nth-child(7){--i:6}.botanical-cosmos i:nth-child(8){--i:7}
.is-revealed .botanical-cosmos i { transform:rotate(calc(var(--i) * 45deg)) translateY(-22%) scale(1); }
.botanical-cosmos b { position:absolute; left:50%; top:50%; width:21%;height:21%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,var(--yellow) 0 12%,#d69b18 13% 100%); border:2px solid var(--soil); }
.closing-meta { position:absolute; bottom:7vh; left:50%; transform:translateX(-50%); text-align:center; }
.compass { position:relative; width:70px;height:70px;margin:1rem auto 0;border:2px solid var(--soil);border-radius:50%; }.compass span{position:absolute;left:32px;top:5px;width:3px;height:58px;background:var(--soil)}.compass span:nth-child(2){transform:rotate(45deg)}.compass span:nth-child(3){transform:rotate(90deg)}.compass span:nth-child(4){transform:rotate(135deg)}

@media (max-width: 850px) {
    .plate { position: relative; min-height: 100vh; transform: none !important; padding: 5rem 1.2rem 3rem; }
    .z, .journal-spread, .taxonomy-cascade, .closing-arc, .closing-flower, .closing-meta { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; }
    .top-left, .top-right, .bottom-left, .bottom-right { max-width: none; margin: 1.5rem 0; }
    .note-card, .value-panel { width: 100%; max-width: none; }
    .botanical-dahlia { margin: 2rem auto; width: 260px; height: 260px; }
    .scale-figure { margin-left:auto; width:260px; }
    .diagonal-breakdown { position: relative; left:auto; top:auto; transform:rotate(8deg); margin:2rem 0; }
    .taxonomy-cascade { width:100%; }.value-panel, .value-panel:nth-child(2), .value-panel:nth-child(3) { margin: 1rem 0; transform: none; padding-left: 7rem; width:100%; }
    .journal-spread { display:block; padding:1.2rem; }.observations { border-right:0; padding-right:0; }
    .specimen-grid { grid-template-columns: repeat(2,1fr); }
    .closing-flower { width:280px;height:280px;margin:2rem auto; }
    .stamp { transform: scale(.8); transform-origin: top right; }
}