:root {
    /* Interactions should feel like archival gestures: hovering over a name warms its lantern. Source Sans 3** for interface labels. */
    --archive-bone: #E8DDC7;
    --ink-umber: #2B2118;
    --lantern-amber: #C7923E;
    --ash-violet: #6E647A;
    --moss-remembrance: #66785F;
    --faded-rose: #B9827A;
    --deep-night: #14131A;
    --heading: 'Cormorant Garamond', serif;
    --prose: 'Noto Serif', serif;
    --interface: 'Source Sans 3', sans-serif;
    --kr: 'Noto Sans KR', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--archive-bone);
    background: var(--deep-night);
    font-family: var(--prose);
    overflow-x: hidden;
}

.grain, .ash-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}
.grain {
    opacity: .18;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(232,221,199,.35) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(43,33,24,.35) 0 1px, transparent 1px);
    background-size: 42px 38px, 29px 31px;
    mix-blend-mode: overlay;
}
.ash-vignette {
    z-index: 19;
    background: radial-gradient(circle at 66% 38%, transparent 0 22%, rgba(20,19,26,.24) 58%, rgba(20,19,26,.78) 100%);
}

.binding-spine {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 37%;
    width: 22px;
    z-index: 12;
    pointer-events: none;
}
.binding-spine::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(199,146,62,.58);
    box-shadow: 0 0 18px rgba(199,146,62,.22);
}
.binding-spine span {
    position: absolute;
    left: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--lantern-amber);
    box-shadow: 0 0 24px var(--lantern-amber);
}
.binding-spine span:nth-child(1) { top: 17%; }
.binding-spine span:nth-child(2) { top: 48%; }
.binding-spine span:nth-child(3) { top: 79%; }

.archive-tabs {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.archive-tabs a {
    writing-mode: vertical-rl;
    text-decoration: none;
    color: rgba(232,221,199,.64);
    font: 500 12px/1 var(--interface);
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 12px 7px;
    background: rgba(232,221,199,.08);
    border-left: 1px solid rgba(199,146,62,.4);
    transition: color .7s ease, background .7s ease, transform .7s ease;
}
.archive-tabs a:hover, .archive-tabs a.active {
    color: var(--lantern-amber);
    background: rgba(199,146,62,.13);
    transform: translateX(4px);
}

.chamber {
    position: relative;
    min-height: 100vh;
    padding: 9vh 8vw 9vh 10vw;
    display: grid;
    align-items: center;
    overflow: hidden;
}
.vellum {
    color: var(--ink-umber);
    background:
        linear-gradient(115deg, rgba(255,255,255,.18), transparent 36%),
        radial-gradient(circle at 12% 18%, rgba(185,130,122,.18), transparent 30%),
        rgba(232,221,199,.88);
    border: 1px solid rgba(43,33,24,.16);
    box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 0 44px rgba(110,100,122,.13);
    backdrop-filter: blur(8px);
}
.rubric {
    margin: 0 0 18px;
    font: 600 12px/1 var(--interface);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ash-violet);
}
h1, h2 {
    font-family: var(--heading);
    font-weight: 500;
    letter-spacing: .055em;
    margin: 0;
}
h1 { font-size: clamp(4.8rem, 13vw, 12rem); color: var(--archive-bone); text-shadow: 0 0 34px rgba(199,146,62,.3); }
h2 { font-size: clamp(2.5rem, 6vw, 6rem); line-height: .94; color: var(--ink-umber); }
.kr { font-family: var(--kr); }

.threshold {
    background: radial-gradient(circle at 67% 45%, rgba(199,146,62,.13), transparent 26%), linear-gradient(180deg, #14131A, #201B20 70%, #14131A);
}
.lantern {
    position: absolute;
    right: 22vw;
    top: 24vh;
    width: 68px;
    height: 92px;
    border-radius: 34px 34px 26px 26px;
    background: radial-gradient(circle at 50% 62%, #E8DDC7 0 6%, #C7923E 18%, rgba(199,146,62,.15) 50%, transparent 72%);
    box-shadow: 0 0 80px 36px rgba(199,146,62,.22), 0 0 180px 88px rgba(199,146,62,.1);
    animation: candle 4s ease-in-out infinite;
}
.veil-page {
    width: min(920px, 78vw);
    min-height: 62vh;
    margin-left: 18vw;
    padding: 52px 58px;
    background: rgba(232,221,199,.08);
    color: var(--archive-bone);
    border-color: rgba(232,221,199,.16);
}
.invitation { font: 300 22px/1 var(--interface); letter-spacing: .32em; text-transform: uppercase; color: rgba(232,221,199,.7); }
.faint-names { position: relative; height: 220px; margin-top: 28px; }
.name-mark {
    position: absolute;
    border: 0;
    background: transparent;
    color: rgba(232,221,199,.38);
    font: 400 24px var(--heading);
    letter-spacing: .08em;
    cursor: pointer;
    transition: color .8s ease, text-shadow .8s ease, transform .8s ease;
}
.name-mark:nth-child(1) { left: 4%; top: 18%; }
.name-mark:nth-child(2) { left: 35%; top: 8%; }
.name-mark:nth-child(3) { left: 62%; top: 42%; }
.name-mark:nth-child(4) { left: 12%; top: 66%; }
.name-mark:nth-child(5) { left: 52%; top: 78%; }
.name-mark:hover, .name-mark.warm { color: var(--lantern-amber); text-shadow: 0 0 18px rgba(199,146,62,.75); transform: translateY(-3px); }
.thread-field, .garden-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
svg path { fill: none; stroke: rgba(199,146,62,.42); stroke-width: 1; stroke-dasharray: 7 8; }

.lantern-index { background: linear-gradient(180deg, #14131A, #2B2118); }
.drawer-glow { position: absolute; left: 32%; top: 45%; width: 260px; height: 260px; border-radius: 50%; background: rgba(199,146,62,.16); filter: blur(30px); }
.index-drawer { width: min(720px, 62vw); margin-left: 31vw; padding: 48px; transform: rotate(-1.5deg); }
.tab-fan { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0; }
.tab-fan button, .soft-prompt {
    border: 1px solid rgba(43,33,24,.24);
    background: rgba(232,221,199,.44);
    color: var(--ink-umber);
    padding: 14px 20px;
    font: 600 13px var(--interface);
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .55s ease, transform .55s ease, color .55s ease;
}
.tab-fan button:hover, .tab-fan button.selected { background: var(--lantern-amber); transform: translateY(-6px) rotate(-2deg); }
.drawer-note, .source-card { font-size: 20px; color: var(--ash-violet); }
.archive-labels { position: absolute; left: 9vw; top: 24vh; display: grid; gap: 18px; color: rgba(232,221,199,.55); font: 13px var(--interface); letter-spacing: .16em; text-transform: uppercase; }

.palimpsest { background: linear-gradient(180deg, #2B2118, #E8DDC7); }
.article-leaf { width: min(760px, 60vw); min-height: 70vh; margin-left: 40vw; padding: 58px; position: relative; transform: rotate(.8deg); }
.article-text { max-width: 42ch; font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.78; }
.ghost-copy { position: absolute; color: rgba(110,100,122,.25); font: 500 28px var(--heading); max-width: 420px; transform: rotate(-4deg); }
.copy-a { left: -150px; top: 160px; }
.copy-b { right: -110px; bottom: 150px; }
.margin-note { position: absolute; left: -86px; bottom: 52px; writing-mode: vertical-rl; color: var(--faded-rose); font-size: 18px; }

.footnote-garden { background: linear-gradient(180deg, #E8DDC7, #66785F); }
.garden-bed { width: min(800px, 62vw); margin-left: 14vw; padding: 54px; }
.flowers { display: flex; gap: 28px; flex-wrap: wrap; margin: 42px 0; }
.citation { border: 0; background: transparent; color: var(--ink-umber); font: 600 14px var(--interface); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.citation span { display: block; width: 54px; height: 68px; margin: 0 auto 12px; border-radius: 52% 48% 50% 50%; background: radial-gradient(circle at 45% 36%, var(--faded-rose), transparent 40%), linear-gradient(145deg, rgba(185,130,122,.55), rgba(102,120,95,.38)); box-shadow: inset 0 -12px 22px rgba(43,33,24,.12); transform: rotate(-10deg); transition: transform .7s ease, filter .7s ease; }
.citation:hover span, .citation.open span { transform: translateY(-10px) rotate(4deg); filter: drop-shadow(0 12px 18px rgba(43,33,24,.22)); }
.garden-threads path { stroke: rgba(102,120,95,.72); }

.revision-river { display: block; padding-top: 14vh; background: linear-gradient(180deg, #66785F, #14131A); color: var(--archive-bone); }
.revision-river h2 { color: var(--archive-bone); max-width: 760px; margin-left: 41vw; }
.revision-river .rubric { margin-left: 41vw; color: rgba(232,221,199,.64); }
.river { position: relative; height: 46vh; margin-top: 10vh; overflow: hidden; border-top: 1px solid rgba(232,221,199,.18); border-bottom: 1px solid rgba(232,221,199,.12); }
.river::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(175deg, transparent 0 30px, rgba(232,221,199,.05) 31px 32px); animation: ripple 12s linear infinite; }
.paper-boat { position: absolute; width: 260px; padding: 22px; background: rgba(232,221,199,.78); color: var(--ink-umber); font: 500 18px var(--heading); box-shadow: 0 24px 50px rgba(0,0,0,.24); clip-path: polygon(0 18%, 80% 0, 100% 50%, 78% 100%, 0 82%); animation: drift 18s linear infinite; }
.paper-boat:nth-child(1) { top: 18%; left: -20%; animation-delay: 0s; }
.paper-boat:nth-child(2) { top: 46%; left: -30%; animation-delay: -5s; }
.paper-boat:nth-child(3) { top: 28%; left: -28%; animation-delay: -10s; }
.paper-boat:nth-child(4) { top: 62%; left: -42%; animation-delay: -14s; }

.open-room { background: radial-gradient(circle at 66% 45%, rgba(199,146,62,.15), transparent 28%), #14131A; }
.empty-chair { position: absolute; left: 24vw; bottom: 20vh; width: 110px; height: 150px; border: 2px solid rgba(232,221,199,.28); border-bottom: 0; }
.empty-chair::before, .empty-chair::after { content: ""; position: absolute; bottom: -72px; width: 2px; height: 74px; background: rgba(232,221,199,.28); }
.empty-chair::before { left: 18px; } .empty-chair::after { right: 18px; }
.blank-page { width: min(560px, 48vw); margin-left: 48vw; padding: 54px; }
.blank-page p:last-of-type { font-size: 21px; line-height: 1.7; }
.soft-prompt { margin-top: 28px; background: rgba(199,146,62,.24); }

.revealed .vellum { animation: breathe 5s ease-in-out infinite; }

@keyframes candle { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.08) translateY(-3px); opacity: 1; } }
@keyframes breathe { 0%,100% { filter: saturate(1); } 50% { filter: saturate(1.1) brightness(1.04); } }
@keyframes drift { from { transform: translateX(0) rotate(-2deg); } to { transform: translateX(145vw) rotate(3deg); } }
@keyframes ripple { from { transform: translateX(0); } to { transform: translateX(-120px); } }

@media (max-width: 760px) {
    .binding-spine { left: 28px; }
    .archive-tabs { display: none; }
    .chamber { padding: 8vh 7vw 8vh 15vw; }
    .veil-page, .index-drawer, .article-leaf, .garden-bed, .blank-page { width: 100%; margin-left: 0; padding: 32px; }
    h1 { font-size: 4.2rem; }
    h2 { font-size: 2.7rem; }
    .revision-river h2, .revision-river .rubric { margin-left: 10vw; }
    .ghost-copy, .margin-note { display: none; }
}