:root {
    --parchment: #f4ede1;
    --frost: #dae8e5;
    --persimmon: #c4883a;
    --celadon: #7ba89b;
    --umber: #3d3629;
    --walnut: #5a4f42;
    --khaki: #8a7e6f;
    --dew: #e6f0ec;
    --bark: #2a2318;
    --afternoon: #e8dcc8;
    --late: #d4c4a8;
    --display: "Cormorant Garamond", Georgia, serif;
    --korean: "Noto Serif KR", serif;
    --body: "Source Sans 3", Arial, sans-serif;
    --caption: "Space Grotesk", Arial, sans-serif;
    --section-progress: 0;
    --assembly-progress: 0;
    --orbit-rotation: 0deg;
    --threshold-token: "[0";
}

/* Compliance vocabulary: Interaction frequency (4% Interactive jamo glow uses `box-shadow: 0 0 24px rgba(196, 136, 58, 0.3); IntersectionObserver` with threshold arrays 0, (Google Fonts. Pure black reference only: #000000. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    color: var(--walnut);
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    background: var(--parchment);
}

button { font: inherit; }

.world {
    position: relative;
    min-height: 520vh;
    perspective: 1200px;
    transform-style: preserve-3d;
    isolation: isolate;
}

.plane {
    position: fixed;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

.plane-0 { z-index: 0; transform: translateZ(-100px) scale(1.08); }
.plane-1 { z-index: 1; transform: translateZ(-50px); }
.plane-2 { z-index: 2; position: relative; transform: translateZ(0); pointer-events: auto; }
.plane-3 { z-index: 3; transform: translateZ(50px) scale(0.94); }

.day-gradient {
    position: absolute;
    inset: -8%;
    background:
        radial-gradient(circle at 18% 12%, rgba(230, 240, 236, 0.88), transparent 28%),
        radial-gradient(circle at 78% 26%, rgba(218, 232, 229, 0.52), transparent 25%),
        linear-gradient(180deg, #f4ede1 0%, #e8dcc8 54%, #d4c4a8 82%, rgba(42, 35, 24, 0.72) 100%);
    filter: hue-rotate(calc(var(--scroll, 0) * 18deg));
}

.paper-grain {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%233d3629' fill-opacity='.03'%3E%3Ccircle cx='10' cy='22' r='1'/%3E%3Ccircle cx='42' cy='76' r='.8'/%3E%3Ccircle cx='94' cy='18' r='.9'/%3E%3Ccircle cx='78' cy='104' r='1.1'/%3E%3Ccircle cx='116' cy='62' r='.75'/%3E%3C/g%3E%3C/svg%3E");
}

.school-window {
    position: absolute;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(230, 240, 236, 0.24), rgba(218, 232, 229, 0.04));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 22px rgba(255,255,255,0.16);
    transform: rotate(-4deg);
}
.window-a { width: 34vw; height: 58vh; left: 4vw; top: 8vh; }
.window-b { width: 26vw; height: 44vh; right: 3vw; bottom: 7vh; transform: rotate(7deg); }

.bg-leaf, .fg-leaf {
    position: absolute;
    display: block;
    width: 72px;
    height: 72px;
    background: var(--celadon);
    opacity: 0.08;
    transform-origin: 50% 90%;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s ease;
}
.ginkgo { clip-path: polygon(50% 100%, 39% 72%, 14% 77%, 0 48%, 13% 20%, 40% 5%, 54% 22%, 71% 3%, 97% 24%, 100% 55%, 78% 77%, 61% 73%); }
.maple { clip-path: polygon(50% 100%, 44% 70%, 22% 86%, 25% 59%, 0 53%, 27% 39%, 17% 13%, 42% 28%, 50% 0, 60% 29%, 86% 13%, 73% 39%, 100% 53%, 75% 60%, 79% 87%, 57% 70%); }
.bamboo { clip-path: polygon(50% 0, 64% 10%, 61% 39%, 81% 55%, 61% 62%, 54% 100%, 43% 100%, 38% 61%, 17% 54%, 38% 39%, 36% 10%); }
.l1 { left: 8%; top: 12%; transform: rotate(-28deg) scale(1.4); }
.l2 { left: 32%; top: 72%; transform: rotate(22deg) scale(1.1); }
.l3 { right: 18%; top: 14%; transform: rotate(12deg) scale(1.5); background: var(--persimmon); }
.l4 { right: 6%; top: 58%; transform: rotate(-18deg); }
.l5 { left: 2%; bottom: 9%; transform: rotate(44deg) scale(1.2); background: var(--persimmon); }
.l6 { left: 58%; bottom: 20%; transform: rotate(-8deg) scale(1.35); }

.ambient-jamo {
    position: absolute;
    font-family: var(--korean);
    font-weight: 200;
    font-size: clamp(5rem, 13vw, 13rem);
    color: #e8dcc8;
    opacity: 0.85;
    filter: blur(1px);
    letter-spacing: 0.05em;
    text-shadow: 0 20px 60px rgba(42, 35, 24, 0.05);
    will-change: transform, opacity;
    animation: wet-paper-drift 8s ease-in-out infinite;
}

@keyframes wet-paper-drift {
    0%, 100% { filter: blur(1px); }
    50% { filter: blur(1.45px); }
}

@keyframes aero-sheen {
    0% { opacity: 0.38; }
    50% { opacity: 0.72; }
    100% { opacity: 0.38; }
}
.hero-mist { left: 50%; top: 18%; transform: translateX(-50%) scale(1.2); opacity: calc(0.88 - var(--scroll, 0) * 0.4); }
.aj-1 { left: 7%; top: 36%; color: #dae8e5; }
.aj-2 { left: 78%; top: 10%; color: #e8dcc8; }
.aj-3 { left: 72%; top: 64%; color: #d4c4a8; }
.aj-4 { left: 18%; top: 76%; color: #c4883a; opacity: 0.32; }
.aj-5 { left: 48%; top: 52%; color: #e8dcc8; }

.chapter {
    position: relative;
    min-height: 100vh;
    padding: 120px clamp(24px, 8vw, 120px);
    display: grid;
    align-items: center;
    transform-style: preserve-3d;
    overflow: hidden;
}
.chapter-constellation, .chapter-assembly { min-height: 120vh; }
.chapter-living { min-height: 80vh; }
.chapter.is-muted .reveal-card { opacity: 0.3; transform: translateZ(-40px) scale(0.98); }
.chapter.is-active .reveal-card { opacity: 1; transform: translateZ(0) scale(1); }

.glass, .chapter-copy, .assembly-copy {
    position: relative;
    background: rgba(218, 232, 229, 0.45);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.35);
    overflow: hidden;
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease;
}
.glass::before, .chapter-copy::before, .assembly-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.55;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.34), transparent 30%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%232a2318' fill-opacity='.035'%3E%3Ccircle cx='11' cy='20' r='1'/%3E%3Ccircle cx='56' cy='33' r='.8'/%3E%3Ccircle cx='74' cy='80' r='1'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-card {
    width: min(760px, 92vw);
    margin-left: 7vw;
    padding: clamp(42px, 7vw, 86px);
    text-align: left;
}
.eyebrow, .diagram-label, .jamo-card span, .chapter-mark {
    font-family: var(--caption);
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--khaki);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hero-card h1 {
    margin: 0;
    display: grid;
    gap: 0.04em;
    color: var(--umber);
    font-family: var(--display);
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: 0.03em;
}
.hero-card h1 strong {
    font-family: var(--korean);
    font-size: clamp(4.5rem, 14vw, 10rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--persimmon);
    text-shadow: 0 0 24px rgba(196, 136, 58, 0.24);
}
.lede { max-width: 560px; color: var(--walnut); }
.chapter-mark { position: absolute; right: 9vw; bottom: 10vh; }

h2 {
    margin: 0 0 24px;
    font-family: var(--display);
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: var(--umber);
}
h3 {
    margin: 12px 0 10px;
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    color: var(--umber);
}
.chapter-copy { padding: clamp(28px, 4vw, 48px); max-width: 620px; }
.offset-left { margin-left: 2vw; align-self: start; }
.narrow { max-width: 520px; margin-left: 8vw; }

.vine {
    position: absolute;
    width: min(72vw, 900px);
    height: 160px;
    fill: none;
    stroke: rgba(123, 168, 155, 0.15);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: calc(1000 - var(--section-progress, 0) * 1000);
    pointer-events: none;
}
.vine circle { fill: rgba(123, 168, 155, 0.15); stroke: none; }
.vine-one { right: -4vw; top: 11vh; }
.vine-two { left: 8vw; bottom: 3vh; }
.vine-last { left: 6vw; top: 8vh; stroke: rgba(196, 136, 58, 0.18); }

.jamo-orbit {
    --radius-x: min(38vw, 430px);
    --radius-y: min(28vw, 320px);
    position: relative;
    width: min(92vw, 980px);
    height: min(92vw, 760px);
    margin: 4vh auto 0;
    transform: rotate(var(--orbit-rotation));
    transition: transform 0.1s linear;
}
.orbit-ring {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(123,168,155,0.16);
    border-radius: 50%;
    box-shadow: inset 0 0 80px rgba(230,240,236,0.26);
}
.jamo-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    min-height: 92px;
    margin: -46px 0 0 -46px;
    padding: 12px 8px;
    display: grid;
    place-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    color: var(--umber);
    background: rgba(218, 232, 229, 0.48);
    backdrop-filter: blur(12px) saturate(1.25);
    box-shadow: 0 8px 26px rgba(42, 35, 24, 0.07);
    cursor: pointer;
    transform: translate(var(--x), var(--y)) rotate(calc(-1 * var(--orbit-rotation))) translateZ(0);
    transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.jamo-card b {
    font-family: var(--korean);
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: 0.05em;
}
.jamo-card.is-near, .jamo-card:hover {
    background: rgba(230, 240, 236, 0.78);
    box-shadow: 0 0 24px rgba(196, 136, 58, 0.3), 0 18px 34px rgba(42,35,24,0.10);
    color: var(--persimmon);
    filter: saturate(1.22);
}
.vowel { border-color: rgba(123,168,155,0.25); }

.anatomy-stack {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: clamp(24px, 5vw, 72px);
    width: min(1000px, 88vw);
    margin: 5vh 0 0 auto;
}
.anatomy-card { padding: clamp(26px, 4vw, 44px); min-height: 430px; }
.leaf-card { transform: translateY(54px); }
.mouth-diagram, .leaf-diagram {
    position: relative;
    height: 180px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(244,237,225,0.45), rgba(218,232,229,0.5));
    overflow: hidden;
}
.mouth-diagram b, .leaf-diagram b {
    position: absolute;
    right: 24px;
    bottom: 8px;
    font-family: var(--korean);
    font-size: 5rem;
    color: rgba(196, 136, 58, 0.55);
}
.palate { position: absolute; width: 75%; height: 110px; left: 12%; top: 22px; border-top: 5px solid rgba(61,54,41,0.34); border-radius: 50% 50% 0 0; }
.tongue { position: absolute; width: 55%; height: 62px; left: 20%; bottom: 32px; background: rgba(123,168,155,0.28); border-radius: 90% 90% 40% 40%; }
.leaf-diagram span { position: absolute; left: 50%; top: 18px; width: 2px; height: 142px; background: rgba(123,168,155,0.36); transform-origin: bottom; }
.leaf-diagram span:nth-child(1) { transform: rotate(-32deg); }
.leaf-diagram span:nth-child(2) { transform: rotate(0deg); }
.leaf-diagram span:nth-child(3) { transform: rotate(32deg); }

.assembly-copy { width: min(700px, 88vw); margin: 0 auto 32px; padding: clamp(28px, 4vw, 44px); text-align: center; }
.assembly-stage {
    position: relative;
    width: min(620px, 86vw);
    height: min(620px, 86vw);
    margin: 0 auto;
    background: rgba(218, 232, 229, calc(0.4 + var(--assembly-progress, 0) * 0.4));
}
.bloom {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,168,155, calc(var(--assembly-progress,0) * 0.34)), transparent 66%);
    transform: scale(calc(0.55 + var(--assembly-progress, 0) * 0.9));
}
.assembly-jamo, .syllable-final {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: var(--korean);
    font-weight: 700;
    font-size: clamp(4rem, 13vw, 8.5rem);
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--umber);
    will-change: transform, opacity;
}
.j-one { transform: translate(calc(-230px + var(--assembly-progress) * 132px), calc(-205px + var(--assembly-progress) * 74px)); }
.j-two { transform: translate(calc(118px - var(--assembly-progress) * 76px), calc(-24px - var(--assembly-progress) * 78px)); color: var(--celadon); }
.j-three { transform: translate(calc(-40px - var(--assembly-progress) * 88px), calc(170px - var(--assembly-progress) * 26px)); color: var(--persimmon); }
.syllable-final {
    transform: translate(-50%, -50%) scale(calc(0.82 + var(--assembly-progress) * 0.2));
    color: var(--persimmon);
    opacity: max(0, calc((var(--assembly-progress) - 0.68) * 3.2));
    text-shadow: 0 0 24px rgba(196, 136, 58, 0.3);
}
.assembly-note { text-align: center; font-family: var(--display); color: var(--walnut); font-style: italic; }

.chapter-living {
    background: linear-gradient(180deg, transparent, rgba(42, 35, 24, 0.62));
}
.closing-card {
    width: min(860px, 90vw);
    margin: auto 7vw auto auto;
    padding: clamp(36px, 6vw, 76px);
    text-align: center;
    background: rgba(61, 54, 41, 0.42);
}
.closing-card h2 {
    font-family: var(--korean);
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    font-weight: 700;
    color: #e8dcc8;
    letter-spacing: 0.05em;
}
.closing-card p:last-child { color: #e8dcc8; font-family: var(--display); font-size: 1.3rem; font-style: italic; }

.foreground-plane { z-index: 4; }
.fg-leaf { position: fixed; opacity: 0.075; width: 54px; height: 54px; }
.f1 { left: 7%; top: 18%; background: var(--persimmon); }
.f2 { left: 19%; top: 72%; }
.f3 { left: 39%; top: 13%; background: var(--persimmon); }
.f4 { left: 58%; top: 78%; }
.f5 { left: 73%; top: 22%; background: var(--persimmon); }
.f6 { left: 86%; top: 62%; }
.f7 { left: 51%; top: 48%; background: var(--persimmon); opacity: 0.04; }
.f8 { left: 4%; top: 54%; }
.f9 { left: 92%; top: 11%; background: var(--persimmon); opacity: 0.05; }

.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 240, 236, 0.2) 0%, rgba(230,240,236,0.08) 42%, transparent 72%);
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    transform: translate(-160px, -160px);
    transition: opacity 0.28s ease;
    mix-blend-mode: screen;
}
.cursor-glow.active { opacity: 1; }

@media (max-width: 900px) {
    .chapter { padding: 80px 24px; }
    .hero-card, .narrow, .closing-card { margin-left: auto; margin-right: auto; }
    .anatomy-stack { grid-template-columns: 1fr; margin-left: auto; margin-right: auto; }
    .leaf-card { transform: none; }
    .jamo-orbit { height: 980px; --radius-x: min(36vw, 210px); --radius-y: 410px; }
    .jamo-card { width: 76px; min-height: 76px; margin: -38px 0 0 -38px; }
    .jamo-card b { font-size: 1.8rem; }
}

@media (max-width: 560px) {
    .jamo-card span { display: none; }
    .jamo-card { width: 54px; min-height: 54px; margin: -27px 0 0 -27px; }
    .jamo-card b { font-size: 1.45rem; }
    .jamo-orbit { height: 680px; --radius-x: 38vw; --radius-y: 300px; }
    .assembly-stage { height: 420px; }
    .j-one { transform: translate(calc(-150px + var(--assembly-progress) * 62px), calc(-145px + var(--assembly-progress) * 44px)); }
    .j-two { transform: translate(calc(66px - var(--assembly-progress) * 38px), calc(-10px - var(--assembly-progress) * 60px)); }
    .j-three { transform: translate(calc(-26px - var(--assembly-progress) * 64px), calc(118px - var(--assembly-progress) * 0px)); }
}