:root {
    --charcoal-ink: #17120E;
    --aged-washi: #E8D8B8;
    --tea-parchment: #B99A6B;
    --imperial-vermilion: #B43A28;
    --indigo-archive: #243A5A;
    --oxidized-brass: #8C6A2F;
    --soot-gray: #4A4740;
    --rice-paper: #F5EEDC;
    --shadow-heavy: 0 30px 80px rgba(23, 18, 14, .45);
    --shadow-paper: 0 18px 36px rgba(23, 18, 14, .28);
}

/* Typography source note: IBM Plex Mono in tiny doses. Interface and labels: **Zen Kaku Gothic New** for source tags */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--charcoal-ink);
}

body {
    margin: 0;
    color: var(--charcoal-ink);
    font-family: "Noto Serif JP", serif;
    background:
        radial-gradient(circle at 20% 12%, rgba(245, 238, 220, .16), transparent 28rem),
        linear-gradient(90deg, #0f0b08, var(--charcoal-ink) 18%, #2c2118 50%, var(--charcoal-ink));
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: .28;
    background-image:
        linear-gradient(90deg, transparent 0 23px, rgba(245, 238, 220, .08) 24px),
        linear-gradient(0deg, transparent 0 23px, rgba(245, 238, 220, .05) 24px),
        radial-gradient(circle, rgba(245,238,220,.5) 0 1px, transparent 1.4px);
    background-size: 24px 24px, 24px 24px, 140px 130px;
    mix-blend-mode: screen;
}

.lamp-vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 58% 38%, rgba(245, 238, 220, .18), transparent 38%),
        radial-gradient(ellipse at 85% 90%, rgba(180, 58, 40, .08), transparent 35%),
        radial-gradient(ellipse at 0% 65%, rgba(36, 58, 90, .24), transparent 32%),
        linear-gradient(90deg, rgba(23,18,14,.92), transparent 16%, transparent 82%, rgba(23,18,14,.9));
}

.timeline-spine {
    position: fixed;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 72px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.timeline-spine::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 8%;
    bottom: 8%;
    width: 2px;
    background: linear-gradient(var(--oxidized-brass), var(--tea-parchment), var(--oxidized-brass));
    box-shadow: 0 0 0 1px rgba(23,18,14,.5);
}

.spine-mark {
    position: relative;
    width: 43px;
    height: 31px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: var(--aged-washi);
    font-size: 10px;
    letter-spacing: .08em;
    background: rgba(23,18,14,.72);
    border: 1px solid rgba(185,154,107,.55);
    transform: rotate(-2deg);
    transition: transform .45s ease, color .45s ease, background .45s ease;
}

.spine-mark:nth-child(even) { transform: rotate(2deg); }
.spine-mark.active, .spine-mark:hover {
    color: var(--charcoal-ink);
    background: var(--rice-paper);
    transform: translateX(12px) rotate(0deg);
}

.archive-room {
    position: relative;
    min-height: 100vh;
    padding: 7vh 7vw 7vh 140px;
    display: grid;
    grid-template-columns: minmax(320px, 42vw) minmax(320px, 1fr);
    align-items: center;
    gap: 4vw;
    isolation: isolate;
    overflow: hidden;
}

.archive-room::before {
    content: "";
    position: absolute;
    inset: 4vh 3vw 4vh 118px;
    z-index: -2;
    background:
        linear-gradient(100deg, rgba(245,238,220,.06), rgba(185,154,107,.08)),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(232,216,184,.045) 32px);
    border: 1px solid rgba(185,154,107,.18);
    box-shadow: inset 0 0 70px rgba(23,18,14,.62), 0 0 60px rgba(0,0,0,.25);
}

.opening-room {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 110px;
    background: radial-gradient(ellipse at 52% 50%, rgba(140,106,47,.26), transparent 48%);
}

.dust-field {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(245,238,220,.45) 0 1px, transparent 1.5px);
    background-size: 190px 160px;
    animation: dustDrift 18s linear infinite;
    opacity: .25;
}

.map-drawer {
    position: relative;
    width: min(980px, 82vw);
    height: min(620px, 70vh);
    perspective: 1200px;
}

.drawer-face {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    background:
        linear-gradient(90deg, rgba(23,18,14,.2), transparent 18%, rgba(245,238,220,.07) 50%, transparent 80%, rgba(23,18,14,.36)),
        repeating-linear-gradient(90deg, rgba(74,71,64,.18) 0 7px, transparent 7px 18px),
        linear-gradient(135deg, #5b3b22, #8C6A2F 42%, #3a2618);
    border: 22px solid #2a1b11;
    box-shadow: var(--shadow-heavy), inset 0 0 0 2px rgba(245,238,220,.12), inset 0 0 80px rgba(23,18,14,.55);
    transform-origin: top center;
    transition: transform 1.25s cubic-bezier(.2,.8,.14,1), opacity .8s ease;
}

.map-drawer.opened .drawer-face {
    transform: translateY(44vh) rotateX(-18deg);
    opacity: .84;
}

.drawer-label {
    width: min(520px, 70%);
    min-height: 210px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: var(--rice-paper);
    border: 2px solid var(--oxidized-brass);
    outline: 8px solid rgba(23,18,14,.18);
    box-shadow: inset 0 0 24px rgba(185,154,107,.35);
}

.drawer-label h1 {
    margin: 8px 0 2px;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: clamp(46px, 7vw, 92px);
    line-height: .96;
    letter-spacing: -.04em;
    color: var(--charcoal-ink);
}

.drawer-label p {
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(28px, 4vw, 54px);
    color: var(--indigo-archive);
}

.catalog-id, .source-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--soot-gray);
}

.brass-pull {
    position: absolute;
    top: 56px;
    left: 50%;
    width: 260px;
    height: 40px;
    transform: translateX(-50%);
    border: 5px solid var(--oxidized-brass);
    border-top: 0;
    border-radius: 0 0 80px 80px;
    box-shadow: inset 0 -8px 12px rgba(23,18,14,.45), 0 6px 10px rgba(23,18,14,.38);
}

.drawer-handle {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    padding: 13px 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rice-paper);
    background: var(--charcoal-ink);
    border: 1px solid var(--tea-parchment);
    cursor: pointer;
}

.drawer-interior {
    position: absolute;
    inset: 28px;
    padding: 32px;
    background: linear-gradient(145deg, #21150e, #3d2819);
    box-shadow: inset 0 0 80px rgba(0,0,0,.65);
}

.folio-sheet {
    position: relative;
    padding: clamp(28px, 4vw, 52px);
    background:
        radial-gradient(circle at 18% 20%, rgba(245,238,220,.65), transparent 16rem),
        linear-gradient(120deg, rgba(180,58,40,.045), transparent 38%),
        var(--aged-washi);
    border: 1px solid rgba(140,106,47,.72);
    box-shadow: var(--shadow-paper);
}

.folio-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(88deg, rgba(74,71,64,.05) 0 1px, transparent 1px 8px),
        radial-gradient(circle at 92% 8%, rgba(74,71,64,.18), transparent 3rem);
    mix-blend-mode: multiply;
}

.primary-map {
    width: 67%;
    margin: 4% 0 0 8%;
    transform: rotate(-5deg);
}

.primary-map h2, .map-case h2, .exit-wall h2 {
    margin: 12px 0 18px;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 62px);
    line-height: 1.08;
    color: var(--indigo-archive);
}

.primary-map p, .map-case p, .exit-wall p {
    font-size: clamp(16px, 1.35vw, 22px);
    line-height: 1.78;
    color: var(--charcoal-ink);
}

.source-card {
    position: absolute;
    width: 240px;
    padding: 18px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    background: var(--rice-paper);
    border: 1px solid var(--tea-parchment);
    box-shadow: var(--shadow-paper);
    color: var(--soot-gray);
}

.source-card span { color: var(--indigo-archive); font-size: 13px; }
.clipped-card { right: 9%; top: 18%; transform: rotate(8deg); }
.telegram-card { right: 18%; bottom: 14%; transform: rotate(-3deg); }

.opener-caption {
    position: absolute;
    right: 7vw;
    bottom: 7vh;
    max-width: 390px;
    color: var(--aged-washi);
}

.date-numeral {
    position: absolute;
    top: 5vh;
    right: 5vw;
    z-index: -1;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(96px, 18vw, 270px);
    line-height: .8;
    color: rgba(232,216,184,.12);
    text-shadow: 0 2px 0 rgba(23,18,14,.5);
    transform: translateY(20px);
    transition: transform 1s ease, color 1s ease;
}

.archive-room.in-view .date-numeral {
    transform: translateY(0);
    color: rgba(232,216,184,.22);
}

.map-case {
    z-index: 3;
    align-self: center;
}

.tilted-left { transform: rotate(-2.2deg); }
.tilted-right { transform: rotate(2deg); }

.museum-caption {
    margin-top: 24px;
    padding: 12px 14px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--soot-gray);
    background: rgba(245,238,220,.48);
    border-left: 4px solid var(--oxidized-brass);
}

.artifact-table, .ledger-cluster, .railway-board, .newspaper-case, .pacific-overlay, .exit-documents {
    position: relative;
    min-height: 520px;
    align-self: center;
}

.map-artifact, .pacific-overlay {
    position: absolute;
    inset: 8% 2% 4% 0;
    background: var(--tea-parchment);
    border: 2px solid var(--oxidized-brass);
    box-shadow: var(--shadow-heavy);
    transform: rotate(3deg);
    overflow: hidden;
}

.map-artifact::before, .pacific-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.6%, rgba(74,71,64,.16) 50%, transparent 50.4%),
        linear-gradient(0deg, transparent 49.6%, rgba(74,71,64,.12) 50%, transparent 50.4%),
        repeating-linear-gradient(90deg, rgba(36,58,90,.12) 0 1px, transparent 1px 62px),
        repeating-linear-gradient(0deg, rgba(36,58,90,.1) 0 1px, transparent 1px 62px);
}

.route-thread {
    position: absolute;
    inset: 4%;
    width: 92%;
    height: 92%;
    overflow: visible;
}

.route-thread path, .route-thread circle {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coast { stroke: rgba(74,71,64,.66); stroke-width: 7; stroke-dasharray: 10 9; }
.route { stroke: var(--indigo-archive); stroke-width: 4; stroke-dasharray: var(--draw-length, 900); stroke-dashoffset: var(--draw-length, 900); transition: stroke-dashoffset 2.2s ease; }
.archive-room.in-view .route { stroke-dashoffset: 0; }
.route-two { stroke-width: 3; opacity: .7; }
.route-three { stroke: var(--imperial-vermilion); stroke-width: 3; }
.claim-line { stroke: var(--imperial-vermilion); stroke-width: 3; stroke-dasharray: 8 8; }
.route-thread circle { stroke: var(--imperial-vermilion); stroke-width: 4; fill: rgba(180,58,40,.12); }

.map-grid { position: absolute; inset: 0; background: radial-gradient(circle at 48% 48%, transparent 0 70px, rgba(245,238,220,.24) 72px, transparent 74px); }

.margin-question {
    position: absolute;
    padding: 10px 13px;
    max-width: 210px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 13px;
    color: var(--indigo-archive);
    background: rgba(245,238,220,.82);
    border: 1px solid rgba(36,58,90,.35);
    box-shadow: 0 10px 18px rgba(23,18,14,.2);
}

.mq-one { top: 12%; left: 8%; transform: rotate(-5deg); }
.mq-two { bottom: 13%; right: 10%; transform: rotate(4deg); }
.mq-three { left: 12%; bottom: 16%; transform: rotate(-4deg); }

.stamp-vermilion {
    position: absolute;
    right: 9%;
    top: 12%;
    padding: 15px 18px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.05;
    color: var(--imperial-vermilion);
    border: 4px double var(--imperial-vermilion);
    transform: rotate(-12deg) scale(1.25);
    opacity: 0;
    transition: opacity .45s ease .45s, transform .5s cubic-bezier(.16,1.4,.35,1) .45s;
    mix-blend-mode: multiply;
}

.archive-room.in-view .stamp-vermilion, .map-drawer.opened .stamp-vermilion {
    opacity: .88;
    transform: rotate(-12deg) scale(1);
}

.context-note {
    position: absolute;
    right: 7vw;
    bottom: 8vh;
    z-index: 5;
    width: min(380px, 34vw);
    padding: 22px 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: 1.58;
    background: rgba(245, 238, 220, .62);
    border: 1px solid rgba(36,58,90,.45);
    box-shadow: 0 25px 40px rgba(23,18,14,.28);
    backdrop-filter: blur(3px);
    transform-origin: 18% 12%;
    cursor: pointer;
    transition: transform .75s cubic-bezier(.2,.8,.15,1), background .45s ease;
}

.context-note b {
    display: block;
    margin-bottom: 8px;
    color: var(--imperial-vermilion);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 12px;
}

.context-note.lifted {
    transform: rotate(-8deg) translate(-34px, -54px);
    background: rgba(245, 238, 220, .82);
}

.ledger-cluster .notice-sheet {
    position: absolute;
    inset: 10% 14% 14% 4%;
    padding: 32px;
    background: var(--rice-paper);
    border: 1px solid var(--tea-parchment);
    box-shadow: var(--shadow-heavy);
    transform: rotate(-3deg);
    background-image: repeating-linear-gradient(0deg, transparent 0 33px, rgba(36,58,90,.13) 34px 35px);
}

.notice-sheet h3, .surrender-page h3 {
    margin: 16px 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(30px, 4vw, 56px);
    color: var(--indigo-archive);
}

.notice-sheet p { font-size: 18px; line-height: 2.05; }
.redaction-strip {
    display: inline-block;
    width: 170px;
    height: 18px;
    background: var(--soot-gray);
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(23,18,14,.6);
}

.small-stamp { right: 8%; top: 55%; font-size: 15px; }
.ration-ticket {
    position: absolute;
    padding: 18px;
    width: 220px;
    min-height: 110px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: var(--soot-gray);
    background: var(--aged-washi);
    border: 1px dashed var(--oxidized-brass);
    box-shadow: var(--shadow-paper);
}
.ledger-cluster .ration-ticket { right: 1%; top: 18%; transform: rotate(8deg); }
.paper-clip {
    position: absolute;
    right: 24%;
    top: 6%;
    width: 34px;
    height: 90px;
    border: 7px solid var(--soot-gray);
    border-left-width: 4px;
    border-radius: 28px;
    transform: rotate(18deg);
    opacity: .65;
}

.railway-board {
    background: linear-gradient(130deg, rgba(232,216,184,.9), rgba(185,154,107,.9));
    border: 2px solid var(--oxidized-brass);
    box-shadow: var(--shadow-heavy);
    transform: rotate(2deg);
    padding: 70px;
}

.track-line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 48%;
    height: 10px;
    background: var(--soot-gray);
    box-shadow: 0 -16px 0 -13px var(--soot-gray), 0 16px 0 -13px var(--soot-gray);
}
.track-line::after {
    content: "";
    position: absolute;
    inset: -16px 0;
    background: repeating-linear-gradient(90deg, transparent 0 24px, var(--soot-gray) 25px 31px, transparent 32px 60px);
}
.station {
    position: absolute;
    padding: 8px 12px;
    font-family: "IBM Plex Mono", monospace;
    background: var(--rice-paper);
    border: 1px solid var(--charcoal-ink);
}
.s1 { left: 13%; top: 36%; }
.s2 { left: 43%; top: 53%; }
.s3 { right: 12%; top: 35%; }
.telegram-strip {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 18%;
    padding: 16px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    background: var(--rice-paper);
    border-top: 2px dotted var(--soot-gray);
    border-bottom: 2px dotted var(--soot-gray);
}
.wide-redaction { position: absolute; top: 22%; left: 18%; width: 46%; height: 24px; }
.angled-stamp { top: 12%; right: 10%; }

.newspaper-case {
    padding: 38px;
    display: grid;
    grid-template-columns: .55fr 1fr 1fr;
    gap: 22px;
    background: var(--rice-paper);
    border: 1px solid var(--tea-parchment);
    box-shadow: var(--shadow-heavy);
    transform: rotate(-2deg);
    overflow: hidden;
}
.column {
    position: relative;
    min-height: 420px;
    border-right: 1px solid rgba(74,71,64,.28);
    color: var(--charcoal-ink);
}
.col-a { font-family: "Shippori Mincho", serif; font-size: 64px; line-height: 1.05; text-align: center; }
.col-b span, .col-c span {
    display: block;
    height: 18px;
    margin: 18px 0;
    background: linear-gradient(90deg, var(--soot-gray), transparent 88%);
    opacity: .75;
}
.col-c span:nth-child(2) { width: 62%; background: var(--soot-gray); height: 28px; }
.burn-corner {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 150px;
    height: 150px;
    border-radius: 60% 0 0 0;
    background: radial-gradient(circle at 100% 100%, var(--charcoal-ink), #5a2b18 40%, transparent 42%);
}

.pacific-overlay { transform: rotate(2deg); }
.wave-watermark {
    position: absolute;
    inset: 0;
    opacity: .18;
    background:
        radial-gradient(circle at 0 50%, transparent 16px, var(--indigo-archive) 17px 19px, transparent 20px) 0 0 / 58px 42px,
        radial-gradient(circle at 29px 50%, transparent 16px, var(--indigo-archive) 17px 19px, transparent 20px) 0 21px / 58px 42px;
}
.ticket-a { right: 8%; top: 10%; transform: rotate(9deg); }
.ticket-b { right: 17%; bottom: 10%; transform: rotate(-6deg); }

.exit-wall {
    grid-column: 1;
    transform: rotate(-1deg);
}
.exit-documents .surrender-page {
    position: absolute;
    inset: 6% 6% 8% 0;
    padding: 36px;
    background: var(--rice-paper);
    border: 1px solid var(--tea-parchment);
    box-shadow: var(--shadow-heavy);
}
.surrender-page ol {
    padding-left: 24px;
    font-size: 18px;
    line-height: 1.9;
}
.final-stamp { top: auto; right: 10%; bottom: 13%; font-size: 18px; transform: rotate(8deg) scale(1.25); }
.archive-room.in-view .final-stamp { transform: rotate(8deg) scale(1); }

.room-map { background: radial-gradient(ellipse at 80% 45%, rgba(36,58,90,.26), transparent 34rem); }
.room-annexation { background: radial-gradient(ellipse at 20% 30%, rgba(140,106,47,.22), transparent 34rem); }
.room-manchuria { background: radial-gradient(ellipse at 68% 54%, rgba(180,58,40,.12), transparent 34rem); }
.room-war { background: radial-gradient(ellipse at 40% 62%, rgba(74,71,64,.3), transparent 32rem); }
.room-pacific { background: radial-gradient(ellipse at 70% 45%, rgba(36,58,90,.34), transparent 36rem); }
.room-exit { background: radial-gradient(ellipse at 58% 40%, rgba(245,238,220,.12), transparent 30rem); }

@keyframes dustDrift {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-190px,160px,0); }
}

@media (max-width: 980px) {
    .timeline-spine { left: 8px; width: 52px; }
    .archive-room { grid-template-columns: 1fr; padding: 80px 24px 80px 76px; }
    .archive-room::before { inset: 34px 16px 34px 62px; }
    .context-note { position: relative; right: auto; bottom: auto; width: auto; grid-column: 1; }
    .artifact-table, .ledger-cluster, .railway-board, .newspaper-case, .pacific-overlay, .exit-documents { min-height: 430px; }
    .map-drawer { width: 82vw; height: 62vh; }
    .drawer-label { width: 78%; }
    .opener-caption { left: 76px; right: 24px; }
}

@media (max-width: 620px) {
    .timeline-spine { display: none; }
    .archive-room, .opening-room { padding: 48px 18px; }
    .archive-room::before { inset: 18px; }
    .map-drawer { width: 94vw; height: 66vh; }
    .drawer-face { border-width: 14px; }
    .drawer-label h1 { font-size: 42px; }
    .primary-map { width: 88%; margin-left: 3%; }
    .source-card { width: 190px; }
    .clipped-card { right: 1%; }
    .telegram-card { right: 6%; }
    .date-numeral { top: 16px; right: 12px; }
    .newspaper-case { grid-template-columns: 1fr; }
}