:root {
    /* DESIGN typography tokens: IBM Plex Sans KR** for body text */
    --rice: #F5F0E6;
    --ash: #D8D0C2;
    --ink: #25221E;
    --red: #C9342E;
    --celadon: #B7C7B0;
    --blue: #8FA3AA;
    --brown: #5A4636;
    --rail-x: 34vw;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--rice);
    font-family: "IBM Plex Sans KR", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(183, 199, 176, .28), transparent 28%),
        linear-gradient(115deg, rgba(216, 208, 194, .52), rgba(245, 240, 230, .18) 42%, rgba(143, 163, 170, .16));
    pointer-events: none;
    z-index: -3;
}

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .44;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(90, 70, 54, .10) 0 1px, transparent 1.4px),
        radial-gradient(circle at 72% 44%, rgba(37, 34, 30, .07) 0 1px, transparent 1.6px),
        linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
    background-size: 37px 41px, 53px 47px, 9px 100%;
}

.dawn-shadow {
    position: fixed;
    top: -20vh;
    left: -30vw;
    width: 34vw;
    height: 140vh;
    background: linear-gradient(90deg, transparent, rgba(143, 163, 170, .22), rgba(90, 70, 54, .08), transparent);
    transform: skewX(-18deg) translateX(var(--shadow-x, 0));
    pointer-events: none;
    z-index: 2;
}

.priority-rail {
    position: fixed;
    left: var(--rail-x);
    top: 0;
    width: 1px;
    height: 100vh;
    z-index: 15;
    pointer-events: none;
}

.rail-line {
    position: absolute;
    inset: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(90,70,54,.22) 10%, rgba(90,70,54,.18) 92%, transparent);
    box-shadow: -9px 0 18px rgba(90,70,54,.06), 5px 0 0 rgba(255,255,255,.45);
}

.measure-marks {
    position: absolute;
    inset: 9vh auto 9vh -14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.measure-marks span {
    display: block;
    width: 27px;
    height: 1px;
    background: rgba(90,70,54,.24);
}

.first-tab {
    position: absolute;
    left: -7px;
    top: 7vh;
    width: 18px;
    height: 46px;
    background: var(--red);
    color: var(--rice);
    border-radius: 1px 8px 8px 1px;
    box-shadow: 3px 6px 16px rgba(90,70,54,.25);
    transform: translateY(var(--tab-y, 0));
    transition: transform .18s ease-out;
    font-family: "Noto Serif KR", serif;
    font-weight: 900;
    font-size: 11px;
    display: grid;
    place-items: center;
}

.room-whispers {
    position: fixed;
    right: 4.5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 16;
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.room-whispers a {
    color: rgba(37,34,30,.42);
    text-decoration: none;
    transition: color .5s ease, transform .5s ease;
}

.room-whispers a.active {
    color: var(--red);
    transform: translateX(-8px);
}

.room {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    padding: 9vh 8vw 8vh 9vw;
    display: grid;
    grid-template-columns: 28vw 1fr;
    align-items: center;
}

.room::after {
    content: "";
    position: absolute;
    left: 7vw;
    right: 5vw;
    bottom: -2vh;
    height: 18vh;
    background: linear-gradient(to bottom, transparent, rgba(216,208,194,.42));
    filter: blur(10px);
    z-index: -1;
}

.reveal-item {
    opacity: 0;
    transform: translateY(18px) rotate(var(--tilt, 0deg));
    transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.8,.14,1);
}

.room.is-visible .reveal-item {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt, 0deg));
}

.wordmark {
    position: absolute;
    left: calc(var(--rail-x) - 15vw);
    top: 18vh;
    font-family: "Noto Serif KR", serif;
    font-weight: 700;
    font-size: clamp(34px, 5vw, 82px);
    letter-spacing: -.04em;
}

.red-seal {
    position: absolute;
    left: calc(var(--rail-x) + 2.2vw);
    top: 21vh;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    color: var(--red);
    border: 3px solid var(--red);
    border-radius: 50%;
    font-family: "Noto Serif KR", serif;
    font-weight: 900;
    transform: rotate(-8deg);
    filter: saturate(.9);
}

.red-seal::before,
.stamp-circle::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1px dashed rgba(201,52,46,.38);
}

.door-paper {
    grid-column: 2;
    justify-self: start;
    width: min(44vw, 620px);
    height: 52vh;
    background: linear-gradient(100deg, rgba(245,240,230,.96), rgba(216,208,194,.35));
    border: 1px solid rgba(90,70,54,.16);
    box-shadow: 24px 36px 80px rgba(90,70,54,.14), inset -42px 0 50px rgba(143,163,170,.08);
    position: relative;
    margin-left: 5vw;
}

.door-paper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-top: 54px solid var(--ash);
    border-left: 54px solid transparent;
    opacity: .72;
}

.door-title,
.chapter-copy h1,
.unfolded-page h1 {
    font-family: "Noto Serif KR", serif;
    font-size: clamp(44px, 7vw, 112px);
    font-weight: 300;
    letter-spacing: -.06em;
    line-height: .9;
}

.door-title {
    position: absolute;
    left: 9%;
    bottom: 12%;
    max-width: 420px;
}

.door-seam {
    position: absolute;
    left: 48%;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(201,52,46,.55), rgba(245,240,230,.88), transparent);
    box-shadow: 0 0 28px rgba(245,240,230,.9), 0 0 70px rgba(143,163,170,.42);
}

.door-note {
    position: absolute;
    left: 10%;
    top: 18%;
    color: rgba(37,34,30,.34);
    font-size: 13px;
    letter-spacing: .08em;
}

.caption {
    position: absolute;
    left: 11vw;
    bottom: 12vh;
    max-width: 260px;
    color: var(--brown);
    line-height: 1.8;
}

.chapter-number {
    font-family: "Fraunces", serif;
    font-size: clamp(70px, 14vw, 210px);
    color: rgba(143,163,170,.28);
    align-self: start;
    margin-top: 9vh;
}

.chapter-copy {
    grid-column: 2;
    max-width: 520px;
    margin-left: 8vw;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--red);
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.chapter-copy p,
.unfolded-page p {
    max-width: 380px;
    color: var(--brown);
    line-height: 1.85;
    font-weight: 300;
}

.stamp-stage {
    position: absolute;
    left: calc(var(--rail-x) + 6vw);
    top: 22vh;
    width: 170px;
    height: 170px;
}

.stamp-pad {
    position: absolute;
    inset: 32px 20px 22px 10px;
    background: rgba(90,70,54,.12);
    border: 1px solid rgba(90,70,54,.18);
    transform: rotate(-7deg);
}

.stamp-circle {
    position: absolute;
    inset: 10px 34px 34px 0;
    border: 4px solid var(--red);
    border-radius: 50%;
    color: var(--red);
    display: grid;
    place-items: center;
    font-family: "Noto Serif KR", serif;
    font-size: 54px;
    font-weight: 900;
    transform: rotate(-12deg) scale(.92);
    animation: stampLand 3.4s ease-in-out infinite;
}

.ink-bleed {
    position: absolute;
    inset: 36px 58px 58px 25px;
    border-radius: 50%;
    background: rgba(201,52,46,.08);
    filter: blur(8px);
}

.shelf-system {
    position: absolute;
    left: calc(var(--rail-x) + 3vw);
    top: 20vh;
    width: 43vw;
    height: 45vh;
}

.wood-shelf {
    position: absolute;
    height: 42px;
    border-bottom: 5px solid rgba(90,70,54,.33);
    background: linear-gradient(to bottom, transparent 57%, rgba(216,208,194,.42));
    color: var(--brown);
}

.shelf-one { width: 68%; left: 0; top: 0; }
.shelf-two { width: 52%; left: 12%; top: 34%; }
.shelf-three { width: 78%; left: -5%; top: 68%; }

.shelf-label {
    position: absolute;
    left: 26px;
    top: 8px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.shelf-tab {
    position: absolute;
    left: -17px;
    top: 8px;
    width: 24px;
    height: 23px;
    background: var(--red);
    color: var(--rice);
    font-style: normal;
    text-align: center;
    font-family: "Noto Serif KR", serif;
    box-shadow: 4px 5px 12px rgba(90,70,54,.18);
}

.shelf-copy {
    margin-top: 30vh;
}

.queue-ticket {
    position: absolute;
    left: calc(var(--rail-x) - 18vw);
    top: 28vh;
    width: 180px;
    height: 230px;
    background: var(--ash);
    border: 1px solid rgba(90,70,54,.18);
    box-shadow: 18px 24px 50px rgba(90,70,54,.12);
    padding: 24px;
    transform: rotate(-2deg);
}

.queue-ticket span,
.queue-ticket em {
    display: block;
    font-style: normal;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.queue-ticket strong {
    display: block;
    margin: 20px 0 52px;
    font-family: "Fraunces", serif;
    font-size: 74px;
    font-weight: 500;
    color: var(--red);
}

.queue-line {
    position: absolute;
    left: calc(var(--rail-x) + 4vw);
    top: 43vh;
    display: flex;
    gap: 34px;
    align-items: center;
}

.queue-line::before {
    content: "";
    position: absolute;
    left: -22px;
    right: -22px;
    height: 1px;
    background: rgba(90,70,54,.2);
    z-index: -1;
}

.bead {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ash);
    border: 1px solid rgba(90,70,54,.24);
    animation: beadWait 2.7s ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * .18s);
}

.bead.first {
    width: 24px;
    height: 24px;
    background: var(--celadon);
    box-shadow: 0 0 0 12px rgba(183,199,176,.16), 0 0 32px rgba(183,199,176,.85);
}

.queue-copy {
    margin-top: 26vh;
}

.room-opened {
    background: linear-gradient(to bottom, transparent, rgba(245,240,230,.88) 40%, rgba(183,199,176,.18));
}

.unfolded-page {
    grid-column: 2;
    position: relative;
    width: min(58vw, 780px);
    min-height: 58vh;
    padding: 10vh 8vw;
    background: rgba(245,240,230,.84);
    border: 1px solid rgba(90,70,54,.14);
    box-shadow: 0 0 0 1px rgba(255,255,255,.52) inset, 30px 40px 90px rgba(143,163,170,.18);
    transform-origin: left center;
}

.horizon-tab {
    position: absolute;
    left: -18px;
    top: 50%;
    width: 34vw;
    height: 9px;
    background: var(--red);
    box-shadow: 0 8px 22px rgba(201,52,46,.15);
}

.opened-korean {
    position: absolute;
    right: 10%;
    top: 13%;
    color: rgba(201,52,46,.18);
    font-family: "Noto Serif KR", serif;
    font-size: clamp(80px, 13vw, 180px);
    font-weight: 900;
}

.final-note {
    position: absolute;
    left: 9vw;
    bottom: 11vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.final-note span {
    font-family: "Noto Serif KR", serif;
    font-size: 28px;
    font-weight: 700;
}

.final-note small {
    color: var(--brown);
    letter-spacing: .14em;
}

@keyframes stampLand {
    0%, 70%, 100% { transform: rotate(-12deg) scale(.92); opacity: .92; }
    10% { transform: rotate(-12deg) scale(1.08); opacity: 1; }
    18% { transform: rotate(-12deg) scale(.96); }
}

@keyframes beadWait {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-5px); }
}

@media (max-width: 800px) {
    :root { --rail-x: 22vw; }
    .room { grid-template-columns: 1fr; padding-left: 27vw; padding-right: 7vw; }
    .room-whispers { display: none; }
    .door-paper, .chapter-copy, .unfolded-page { grid-column: 1; margin-left: 0; width: 100%; }
    .wordmark { left: 6vw; font-size: 42px; }
    .red-seal { left: 47vw; }
    .shelf-system, .queue-line, .stamp-stage { left: 28vw; }
    .queue-ticket { left: 29vw; top: 13vh; }
}