:root {
    --archive-ink: #17130F;
    --bone-vellum: #E8DDC7;
    --oxidized-blue: #2F5F73;
    --vermilion-correction: #C43A2F;
    --tarnished-gold: #B9974A;
    --bruised-plum: #4A2847;
    --pale-graphite: #9A9387;
    --seam-pull-x: 0px;
    --seam-pull-y: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--archive-ink);
    background:
        radial-gradient(circle at 18% 8%, rgba(185, 151, 74, 0.16), transparent 24rem),
        radial-gradient(circle at 84% 72%, rgba(74, 40, 71, 0.42), transparent 35rem),
        linear-gradient(130deg, #17130F 0%, #211913 42%, #4A2847 100%);
    font-family: Literata, Georgia, serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(232, 221, 199, 0.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(23, 19, 15, 0.12) 0 1px, transparent 1px 9px);
    mix-blend-mode: overlay;
    z-index: 20;
}

.archive-table {
    position: relative;
    min-height: 100vh;
    padding: 5vh 7vw 9vh;
}

.ambient-stamps span {
    position: fixed;
    font-family: "Red Hat Mono", monospace;
    color: rgba(232, 221, 199, 0.22);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    border: 1px solid rgba(185, 151, 74, .18);
    padding: .45rem .7rem;
    transform: rotate(-9deg);
}
.ambient-stamps span:nth-child(1) { left: 3vw; top: 19vh; }
.ambient-stamps span:nth-child(2) { right: 5vw; top: 12vh; transform: rotate(12deg); }
.ambient-stamps span:nth-child(3) { right: 6vw; bottom: 8vh; transform: rotate(-15deg); }

.cursor-aura {
    position: fixed;
    left: 0;
    top: 0;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border: 1px solid rgba(196, 58, 47, .42);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(196, 58, 47, .55);
    font-family: "Noto Serif KR", serif;
    font-size: 1.8rem;
    pointer-events: none;
    transform: translate3d(50vw, 50vh, 0);
    transition: border-color .25s ease;
    z-index: 30;
}

.tab-ring {
    position: fixed;
    inset: 4vh auto auto 3vw;
    z-index: 15;
    display: grid;
    gap: .65rem;
}

.page-tab {
    width: 10.5rem;
    padding: .65rem .7rem .55rem;
    color: var(--bone-vellum);
    text-decoration: none;
    font-family: "Red Hat Mono", monospace;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    background: linear-gradient(90deg, rgba(185,151,74,.28), rgba(47,95,115,.12));
    border: 1px solid rgba(185,151,74,.45);
    box-shadow: 0 8px 22px rgba(0,0,0,.34);
    transform: translateX(calc(var(--i, 0) * 2px)) rotate(-2deg);
}

.page-tab em {
    display: block;
    color: var(--pale-graphite);
    font-style: normal;
    margin-top: .2rem;
    text-decoration: line-through var(--vermilion-correction);
}
.page-tab.active { background: linear-gradient(90deg, #B9974A, rgba(196,58,47,.36)); color: #17130F; }
.page-tab:nth-child(2) { --i: 3; }
.page-tab:nth-child(3) { --i: -2; }
.page-tab:nth-child(4) { --i: 4; }
.page-tab:nth-child(5) { --i: -1; }

.codex-shell {
    position: relative;
    width: min(1180px, 84vw);
    margin: 0 auto;
}

.vellum-page {
    position: relative;
    min-height: 92vh;
    padding: clamp(2rem, 5vw, 5rem);
    background:
        linear-gradient(90deg, rgba(23,19,15,.18), transparent 5%, transparent 48%, rgba(23,19,15,.28) 50%, transparent 52%, transparent 95%, rgba(23,19,15,.18)),
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 17rem),
        repeating-linear-gradient(0deg, rgba(154,147,135,.16) 0 1px, transparent 1px 2.05rem),
        #E8DDC7;
    border: 1px solid rgba(185, 151, 74, .55);
    box-shadow: 0 4rem 7rem rgba(0,0,0,.62), inset 0 0 6rem rgba(74,40,71,.12);
    overflow: hidden;
}

.vellum-page::before, .vellum-page::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
}
.vellum-page::before { left: 0; box-shadow: inset -34px 0 46px rgba(23,19,15,.12); }
.vellum-page::after { right: 0; box-shadow: inset 34px 0 46px rgba(23,19,15,.16); }

.watermark {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Noto Serif KR", serif;
    font-size: clamp(9rem, 25vw, 23rem);
    color: rgba(74,40,71,.075);
    letter-spacing: -.22em;
    pointer-events: none;
    z-index: 0;
}

.argument-seam {
    position: fixed;
    left: calc(50% + var(--seam-pull-x));
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 12;
    background: linear-gradient(180deg, transparent, #C43A2F 15%, #B9974A 50%, #C43A2F 85%, transparent);
    box-shadow: 0 0 28px rgba(196,58,47,.42);
    transition: left .12s linear;
}
.seam-glyph {
    position: absolute;
    top: 48%;
    left: 50%;
    translate: -50% -50%;
    writing-mode: vertical-rl;
    font-family: "Noto Serif KR", serif;
    color: #C43A2F;
    background: #17130F;
    border: 1px solid rgba(185,151,74,.6);
    padding: 1rem .25rem;
}
.seam-label {
    position: absolute;
    left: .8rem;
    font-family: "Red Hat Mono", monospace;
    color: rgba(232,221,199,.55);
    text-transform: uppercase;
    font-size: .62rem;
    letter-spacing: .16em;
    white-space: nowrap;
}
.seam-label.top { top: 6vh; }
.seam-label.bottom { bottom: 7vh; transform: rotate(180deg); }

.citation-threads {
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
}
.thread {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 8 13;
    stroke-linecap: round;
    opacity: .6;
}
.thread-one { stroke: #2F5F73; animation: drawThread 7s ease-in-out infinite alternate; }
.thread-two { stroke: #C43A2F; animation: drawThread 8.5s ease-in-out infinite alternate-reverse; }
.thread-three { stroke: #B9974A; animation: drawThread 9s ease-in-out infinite alternate; }
@keyframes drawThread { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }

.scene-panel {
    position: relative;
    z-index: 2;
    min-height: 88vh;
    padding: clamp(2rem, 5vw, 4.5rem) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.article-head { padding-top: 1rem; }
.metadata-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: "Red Hat Mono", monospace;
    color: var(--oxidized-blue);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}
h1, h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    margin: 0;
    color: #17130F;
}
h1 {
    font-size: clamp(5rem, 14vw, 14rem);
    line-height: .8;
    letter-spacing: -.08em;
    text-shadow: 2px 2px 0 rgba(185,151,74,.35), -1px 0 rgba(196,58,47,.25);
}
h2 { font-size: clamp(2.4rem, 5vw, 5rem); line-height: .92; }
p { font-size: clamp(1.02rem, 1.45vw, 1.28rem); line-height: 1.75; }
.subtitle { max-width: 37rem; color: var(--bruised-plum); font-size: clamp(1.35rem, 2vw, 2rem); }
.korean { font-family: "Noto Serif KR", serif; }
.mono-label, .card-tag, .scene-number, .source-card span {
    font-family: "Red Hat Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
}
.scene-number { color: #C43A2F; margin-bottom: 1rem; }

.contradiction-mark {
    align-self: flex-start;
    border: 1px solid #C43A2F;
    background: rgba(196,58,47,.08);
    color: #4A2847;
    font-family: "Red Hat Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .75rem 1rem;
    cursor: pointer;
    box-shadow: 5px 5px 0 rgba(196,58,47,.18);
    transition: transform .25s ease, background .25s ease;
}
.contradiction-mark:hover { transform: rotate(-1deg) translateY(-2px); background: rgba(196,58,47,.18); }

.split-definition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 5vw, 5rem);
    margin-top: 3rem;
    opacity: 0;
    transform: rotateX(58deg) translateY(3rem);
    transform-origin: top center;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1);
}
.split-definition.open { opacity: 1; transform: rotateX(0) translateY(0); }
.definition-card {
    min-height: 20rem;
    padding: 2rem;
    border: 1px solid rgba(154,147,135,.6);
    background: rgba(232,221,199,.5);
    position: relative;
}
.definition-card:nth-child(1) { transform: translateX(calc(var(--seam-pull-x) * -.15)) rotate(-1.2deg); border-left: 4px solid #2F5F73; }
.definition-card:nth-child(2) { transform: translateX(calc(var(--seam-pull-x) * .15)) rotate(1.4deg); border-right: 4px solid #C43A2F; }
.card-tag { color: #2F5F73; }

.two-column, .index-spread {
    display: grid;
    grid-template-columns: 1.07fr .93fr;
    gap: clamp(1.5rem, 6vw, 6rem);
}
.page-column { border-top: 2px solid #B9974A; padding-top: 1.5rem; }
.shield-sidebar {
    padding: 2rem;
    background: linear-gradient(135deg, rgba(47,95,115,.12), rgba(74,40,71,.16));
    border: 1px solid rgba(47,95,115,.5);
    clip-path: polygon(10% 0, 100% 0, 100% 86%, 52% 100%, 0 86%, 0 0);
}
.footnote-drawer {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 2rem;
    overflow: hidden;
    background: rgba(74,40,71,.11);
    border-left: 4px solid #C43A2F;
    color: #17130F;
    transition: grid-template-rows .48s ease, padding .48s ease;
}
.footnote-drawer.open { grid-template-rows: 1fr; padding: 1.5rem 2rem; }
.footnote-drawer > * { min-height: 0; }

.lead { max-width: 52rem; font-size: clamp(1.18rem, 2vw, 1.8rem); color: #4A2847; }
.apparatus {
    position: relative;
    min-height: 22rem;
    margin: 2rem 0;
    border-top: 1px dashed rgba(154,147,135,.75);
    border-bottom: 1px dashed rgba(154,147,135,.75);
}
.slip {
    position: absolute;
    border: 1px solid rgba(23,19,15,.35);
    background: #E8DDC7;
    color: #17130F;
    font-family: "Red Hat Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
    padding: .8rem 1rem;
    cursor: pointer;
    box-shadow: 8px 12px 22px rgba(23,19,15,.22);
    transition: transform .35s ease, background .35s ease;
}
.slip:hover, .slip.active { background: #B9974A; transform: rotate(0deg) scale(1.05); }
.claim-slip { left: 8%; top: 18%; transform: rotate(-7deg); }
.source-slip { left: 34%; top: 8%; transform: rotate(5deg); }
.translation-slip { right: 12%; top: 22%; transform: rotate(-3deg); }
.revision-slip { left: 18%; bottom: 17%; transform: rotate(3deg); }
.exception-slip { right: 28%; bottom: 11%; transform: rotate(-8deg); }
.counter-slip { right: 7%; bottom: 32%; transform: rotate(7deg); }
.source-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.source-card {
    min-height: 10rem;
    padding: 1rem;
    background: rgba(47,95,115,.1);
    border: 1px solid rgba(47,95,115,.42);
    transform: rotateY(0) rotate(var(--card-tilt, -1deg));
    transition: transform .45s ease, background .45s ease, border-color .45s ease;
}
.source-card.active { --card-tilt: 2deg; transform: rotateY(180deg) rotate(2deg); background: rgba(196,58,47,.12); border-color: #C43A2F; }
.source-card.active p, .source-card.active span { transform: rotateY(180deg); display: block; }
.source-card span { color: #2F5F73; }
.source-card p { font-size: .96rem; line-height: 1.55; }

.redaction-block {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid rgba(196,58,47,.55);
    background: linear-gradient(120deg, rgba(196,58,47,.11), rgba(74,40,71,.12));
    box-shadow: inset 0 0 0 1rem rgba(232,221,199,.18);
}
.reversible {
    position: relative;
    font-size: clamp(1.4rem, 2.8vw, 2.6rem);
    line-height: 1.35;
    color: #17130F;
}
.reversible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: .18rem;
    background: #C43A2F;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}
.reversible.inverted::after { transform: scaleX(1); }
.margin-loop {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    color: #C43A2F;
    font-family: "Red Hat Mono", monospace;
}
.folded-citation {
    margin-left: auto;
    width: min(31rem, 90%);
    padding: 1.5rem;
    background: #E8DDC7;
    border: 1px solid #B9974A;
    transform: perspective(700px) rotateY(-18deg) translateX(2rem);
    box-shadow: -24px 16px 35px rgba(23,19,15,.18);
}

.unresolved-panel { color: #E8DDC7; }
.unresolved-panel h2, .unresolved-panel p { color: #E8DDC7; }
.unresolved-panel::before {
    content: "";
    position: absolute;
    inset: 5% -5%;
    background: linear-gradient(135deg, rgba(74,40,71,.94), rgba(23,19,15,.82));
    z-index: -1;
    border: 1px solid rgba(185,151,74,.3);
}
.index-spread { grid-template-columns: 1fr; gap: .7rem; }
.index-entry {
    display: grid;
    grid-template-columns: 1.3fr .7fr .9fr;
    gap: 1rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(232,221,199,.25);
    font-family: "Red Hat Mono", monospace;
    color: #E8DDC7;
}
.index-entry span { font-family: "Noto Serif KR", serif; color: #B9974A; font-size: 1.2rem; }
.index-entry b:last-child { color: #C43A2F; text-decoration: line-through; }
.lacquer-seal {
    width: 8rem;
    height: 8rem;
    margin: 3rem auto 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #E8DDC7;
    background: radial-gradient(circle, #C43A2F, #4A2847 72%);
    font-family: "Red Hat Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .14em;
    transform: rotate(-12deg);
    box-shadow: 0 0 0 .5rem rgba(196,58,47,.2);
}

.claim-text { translate: calc(var(--seam-pull-x) * -.08) calc(var(--seam-pull-y) * -.02); }
.counter-text { translate: calc(var(--seam-pull-x) * .08) calc(var(--seam-pull-y) * .02); }
.paper-fold {
    position: absolute;
    width: 12rem;
    height: 12rem;
    background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(185,151,74,.14), rgba(23,19,15,.18));
    z-index: 3;
    pointer-events: none;
}
.fold-left { left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.fold-right { right: 0; bottom: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

@media (max-width: 900px) {
    .archive-table { padding: 7rem 1rem 4rem; }
    .codex-shell { width: 100%; }
    .tab-ring { grid-template-columns: repeat(5, minmax(0,1fr)); left: 1rem; right: 1rem; top: 1rem; }
    .page-tab { width: auto; font-size: .55rem; padding: .5rem; }
    .page-tab em { display: none; }
    .split-definition, .two-column, .source-cards { grid-template-columns: 1fr; }
    h1 { font-size: 5rem; }
    .metadata-row, .margin-loop { flex-direction: column; }
    .cursor-aura { display: none; }
}