:root {
    --embassy-night: #07111F;
    --treaty-vellum: #F3E5C2;
    --lacquer-burgundy: #6E1F2F;
    --diplomatic-brass: #C99A3D;
    --map-verdigris: #2F6F64;
    --morning-apricot: #F4A261;
    --ink-blue: #182A45;
    --display: "Cinzel Decorative", serif;
    --body: "Newsreader", serif;
    --sans: "Instrument Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--treaty-vellum);
    background: var(--embassy-night);
    font-family: var(--body);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
    opacity: .18;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(243, 229, 194, .28) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 80%, rgba(201, 154, 61, .2) 0 1px, transparent 1px),
        linear-gradient(115deg, transparent, rgba(255,255,255,.05), transparent);
    background-size: 19px 23px, 31px 37px, 100% 100%;
    mix-blend-mode: overlay;
}

.brass-cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    border: 1px solid var(--diplomatic-brass);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    opacity: .55;
    transform: translate(-50%, -50%);
}

.protocol-nav {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 18px;
    border: 1px solid rgba(201, 154, 61, .45);
    border-radius: 999px;
    background: rgba(7, 17, 31, .72);
    box-shadow: 0 12px 35px rgba(0,0,0,.32), inset 0 0 18px rgba(201,154,61,.08);
    backdrop-filter: blur(14px);
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 10px;
}

.protocol-nav a { color: var(--treaty-vellum); text-decoration: none; opacity: .82; }
.protocol-nav a:hover { color: var(--diplomatic-brass); opacity: 1; }
.nav-seal {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lacquer-burgundy);
    border: 1px solid var(--diplomatic-brass);
    color: var(--diplomatic-brass);
    font-family: var(--display);
    font-size: 11px;
}

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8rem 7vw;
    border-bottom: 1px solid rgba(201,154,61,.22);
}

.scene::before {
    content: attr(data-chamber);
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--mono);
    letter-spacing: .35em;
    font-size: 10px;
    color: rgba(243,229,194,.52);
}

.chapter-word {
    position: absolute;
    inset: auto auto 3vh 3vw;
    font-family: var(--display);
    font-size: clamp(5rem, 16vw, 18rem);
    line-height: .8;
    color: rgba(201,154,61,.08);
    pointer-events: none;
    white-space: nowrap;
}

.arrival {
    background:
        radial-gradient(circle at 50% 28%, rgba(244,162,97,.32), transparent 22%),
        linear-gradient(180deg, #07111F 0%, #07111F 56%, #182A45 100%);
}

.rising-sun {
    position: absolute;
    width: clamp(280px, 42vw, 620px);
    height: clamp(280px, 42vw, 620px);
    top: 8vh;
    border-radius: 50%;
    background: radial-gradient(circle, #F3E5C2 0 18%, #F4A261 42%, rgba(244,162,97,.18) 68%, transparent 70%);
    filter: blur(.2px);
    transform: translateY(var(--sun-rise, 46px));
    transition: transform 1.2s ease-out;
}

.deco-gate {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(201,154,61,.18) 43px 45px, transparent 46px 86px),
        radial-gradient(ellipse at 50% 32%, transparent 0 24%, rgba(7,17,31,.78) 24.4% 26%, transparent 26.5%);
    mask-image: linear-gradient(to bottom, black, black 70%, transparent);
}

.embassy-facade {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 34vh;
    display: flex;
    justify-content: center;
    gap: 5vw;
    background: linear-gradient(180deg, transparent, rgba(7,17,31,.96) 30%);
}

.embassy-facade span {
    width: min(9vw, 105px);
    height: 100%;
    background: linear-gradient(90deg, #07111F, #182A45 45%, #07111F);
    border-left: 1px solid rgba(201,154,61,.2);
    border-right: 1px solid rgba(201,154,61,.2);
}

.invitation, .vellum-panel {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,.28), transparent 24%),
        repeating-linear-gradient(45deg, rgba(201,154,61,.09) 0 1px, transparent 1px 10px),
        var(--treaty-vellum);
    color: var(--ink-blue);
    border: 1px solid rgba(201,154,61,.7);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 10px rgba(201,154,61,.08);
}

.invitation {
    width: min(740px, 84vw);
    min-height: 430px;
    padding: 78px 70px 66px;
    text-align: center;
    transform: rotate(-1.2deg);
}

.folder-flap {
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 118px;
    transform-origin: top;
    background: linear-gradient(160deg, #6E1F2F, #4d1421 70%);
    clip-path: polygon(0 0,100% 0,86% 100%,14% 100%);
    border: 1px solid var(--diplomatic-brass);
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s;
    z-index: 2;
}

.invitation:hover .folder-flap, .invitation.open .folder-flap { transform: rotateX(68deg); filter: brightness(1.18); }

.mono-line {
    margin: 0 0 22px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--map-verdigris);
}

h1, h2 { font-family: var(--display); margin: 0; }
h1 { font-size: clamp(3.2rem, 8vw, 7.6rem); color: var(--diplomatic-brass); text-shadow: 0 1px 0 #6E1F2F; }
h2 { font-size: clamp(2rem, 4vw, 4.8rem); line-height: .98; color: var(--ink-blue); }
p { font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.45; }

.treaty-copy { max-width: 500px; margin: 22px auto 0; }

.wax-seal {
    position: absolute;
    right: 58px;
    bottom: 44px;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 20%),
        radial-gradient(circle, #8b2739, #6E1F2F 62%, #3d0c16);
    color: var(--diplomatic-brass);
    font-family: var(--display);
    font-size: 44px;
    box-shadow: inset 0 6px 18px rgba(255,255,255,.12), inset 0 -9px 18px rgba(0,0,0,.24), 0 14px 28px rgba(110,31,47,.38);
    transform: scale(var(--seal-scale, 1));
}

.wax-seal::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(201,154,61,.65);
    border-radius: 50%;
}

.invitation-edge {
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(201,154,61,.38);
    pointer-events: none;
}

.ribbon-caption, .telegram-strip, .margin-note, .archive-line {
    font-family: var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
}

.arrival-caption {
    position: absolute;
    bottom: 8vh;
    padding: 11px 18px;
    background: var(--lacquer-burgundy);
    color: var(--treaty-vellum);
    border-top: 1px solid var(--diplomatic-brass);
    border-bottom: 1px solid var(--diplomatic-brass);
}

.map-room {
    background:
        radial-gradient(circle at 80% 20%, rgba(47,111,100,.26), transparent 28%),
        linear-gradient(135deg, #07111F, #182A45 55%, #07111F);
}

.atlas-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .86; }
.route { fill: none; stroke: var(--diplomatic-brass); stroke-width: 2; stroke-dasharray: 1400; stroke-dashoffset: var(--route-offset, 1400); transition: stroke-dashoffset 1.8s ease; }
.route-b { stroke: var(--map-verdigris); stroke-width: 1.4; }
.route-c { stroke: var(--morning-apricot); stroke-width: 1.2; }

.map-panel {
    width: min(650px, 72vw);
    padding: 56px;
    margin-left: 22vw;
    transform: rotate(.8deg);
}

.telegram-strip {
    position: absolute;
    padding: 12px 28px;
    background: var(--lacquer-burgundy);
    color: var(--treaty-vellum);
    border-left: 4px solid var(--diplomatic-brass);
    box-shadow: 0 16px 38px rgba(0,0,0,.25);
    transform: translateX(var(--strip-shift, -30px)) rotate(-2deg);
    opacity: var(--strip-opacity, .25);
    transition: transform .9s ease, opacity .9s ease;
}
.strip-one { left: 8vw; top: 24vh; }
.strip-two { right: 6vw; bottom: 20vh; transform: translateX(calc(var(--strip-shift, -30px) * -1)) rotate(2deg); }

.compass-rose {
    position: absolute;
    left: 12vw;
    bottom: 12vh;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(201,154,61,.5);
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 11deg, rgba(201,154,61,.32) 11deg 14deg, transparent 14deg 45deg);
}

.treaty {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(201,154,61,.24), transparent 45%),
        linear-gradient(180deg, #182A45, #07111F);
}

.protocol-table {
    position: relative;
    width: min(920px, 82vw);
    height: min(570px, 62vh);
    border-radius: 50%;
    background:
        radial-gradient(ellipse, rgba(243,229,194,.11) 0 37%, transparent 38%),
        linear-gradient(145deg, #6E1F2F, #182A45 55%, #07111F);
    border: 2px solid var(--diplomatic-brass);
    box-shadow: 0 45px 95px rgba(0,0,0,.5), inset 0 0 0 28px rgba(7,17,31,.35), inset 0 0 0 31px rgba(201,154,61,.25);
}

.inner-table {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    border: 1px solid rgba(243,229,194,.36);
    background: var(--embassy-night);
}

.nameplate {
    position: absolute;
    min-width: 150px;
    padding: 12px 18px;
    text-align: center;
    background: linear-gradient(180deg, #F3E5C2, #d8be82);
    color: var(--ink-blue);
    border: 1px solid var(--diplomatic-brass);
    font-family: var(--display);
    font-size: 18px;
    box-shadow: 0 12px 24px rgba(0,0,0,.28);
    transform: rotate(var(--plate-rotate, 0deg));
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.plate-one { top: 8%; left: 39%; --plate-rotate: -8deg; }
.plate-two { bottom: 8%; left: 39%; --plate-rotate: 7deg; }
.plate-three { left: 7%; top: 45%; --plate-rotate: 84deg; }
.plate-four { right: 7%; top: 45%; --plate-rotate: -84deg; }
.scene.is-lit .nameplate { transform: rotate(0deg); }

.treaty-lamps span {
    position: absolute;
    width: 260px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(244,162,97,.24), transparent 67%);
    opacity: var(--lamp-opacity, .28);
    transition: opacity 1s ease;
}
.treaty-lamps span:nth-child(1) { left: 18vw; top: 20vh; }
.treaty-lamps span:nth-child(2) { right: 16vw; top: 25vh; }
.treaty-lamps span:nth-child(3) { left: 39vw; bottom: 18vh; }

.folder-object {
    position: absolute;
    width: 160px;
    height: 105px;
    border-radius: 8px;
    background: var(--lacquer-burgundy);
    border: 1px solid var(--diplomatic-brass);
}
.folder-object span { display: block; width: 52%; height: 18px; background: #8a2a3d; border-radius: 8px 8px 0 0; margin-top: -17px; }
.folder-a { left: 23%; top: 28%; transform: rotate(18deg); }
.folder-b { right: 22%; bottom: 25%; transform: rotate(-16deg); }
.folded-note { position: absolute; right: 33%; top: 33%; padding: 22px; background: #F3E5C2; color: var(--ink-blue); transform: rotate(9deg); font-family: var(--body); }
.margin-note { position: absolute; right: 4vw; bottom: 12vh; max-width: 230px; color: rgba(243,229,194,.7); border-left: 1px solid var(--diplomatic-brass); padding-left: 18px; }

.translation {
    background:
        linear-gradient(90deg, rgba(47,111,100,.18), transparent 30%, rgba(201,154,61,.12)),
        #07111F;
}
.booth-glass {
    position: absolute;
    inset: 12vh 12vw;
    border: 1px solid rgba(243,229,194,.22);
    background: linear-gradient(115deg, rgba(243,229,194,.08), rgba(47,111,100,.08), transparent);
    box-shadow: inset 0 0 55px rgba(243,229,194,.05);
}
.headset-icon { position: absolute; left: 13vw; top: 22vh; width: 170px; height: 120px; border: 8px solid var(--diplomatic-brass); border-bottom: 0; border-radius: 110px 110px 0 0; opacity: .62; }
.headset-icon span { position: absolute; bottom: -34px; width: 34px; height: 62px; background: var(--lacquer-burgundy); border: 1px solid var(--diplomatic-brass); }
.headset-icon span:first-child { left: 0; } .headset-icon span:last-child { right: 0; }
.translation-document { width: min(560px, 70vw); padding: 48px; justify-self: end; margin-right: 8vw; }
.caption-cloud {
    position: absolute;
    max-width: 360px;
    padding: 18px 24px;
    background: rgba(243,229,194,.12);
    border: 1px solid rgba(201,154,61,.38);
    color: var(--treaty-vellum);
    font-size: clamp(1.1rem, 2vw, 1.7rem);
    backdrop-filter: blur(8px);
    opacity: var(--caption-opacity, .34);
    transform: translateY(var(--caption-y, 22px));
    transition: transform 1s ease, opacity 1s ease;
}
.caption-a { left: 17vw; top: 38vh; }
.caption-b { left: 29vw; top: 50vh; text-align: right; }
.caption-c { left: 20vw; bottom: 18vh; }

.archive {
    background:
        radial-gradient(circle at 20% 10%, rgba(110,31,47,.45), transparent 30%),
        linear-gradient(150deg, #07111F, #182A45);
}
.seal-wall {
    position: relative;
    width: min(860px, 84vw);
    min-height: 470px;
}
.archive-seal {
    position: absolute;
    width: clamp(120px, 16vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(201,154,61,.75);
    background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.15), transparent 18%), #6E1F2F;
    color: var(--diplomatic-brass);
    font-family: var(--display);
    font-size: clamp(1rem, 2vw, 1.9rem);
    box-shadow: inset 0 10px 20px rgba(255,255,255,.08), inset 0 -14px 22px rgba(0,0,0,.28), 0 22px 42px rgba(0,0,0,.38);
    cursor: pointer;
    transition: transform .45s ease, filter .45s ease;
}
.archive-seal::after { content: ""; position: absolute; inset: 15%; border: 1px dashed rgba(201,154,61,.55); border-radius: 50%; }
.archive-seal:hover, .archive-seal.active { transform: translateY(-8px) scale(1.04); filter: brightness(1.15); }
.archive-seal:nth-child(1) { left: 5%; top: 10%; }
.archive-seal:nth-child(2) { left: 38%; top: 0; }
.archive-seal:nth-child(3) { right: 2%; top: 22%; }
.archive-seal:nth-child(4) { left: 20%; bottom: 4%; }
.archive-seal:nth-child(5) { right: 25%; bottom: 0; }
.archive-line { position: absolute; bottom: 11vh; left: 50%; transform: translateX(-50%); width: min(680px, 80vw); padding: 20px 28px; text-align: center; background: rgba(243,229,194,.1); border-top: 1px solid var(--diplomatic-brass); border-bottom: 1px solid var(--diplomatic-brass); color: var(--treaty-vellum); }

.daybreak {
    color: var(--ink-blue);
    background:
        radial-gradient(circle at 50% 18%, #F4A261, transparent 26%),
        linear-gradient(180deg, #07111F 0%, #182A45 28%, #F4A261 64%, #F3E5C2 100%);
}
.daybreak .chapter-word { color: rgba(110,31,47,.1); }
.sunrise-compass {
    position: absolute;
    width: min(620px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(110,31,47,.35);
    background: repeating-conic-gradient(from 0deg, rgba(201,154,61,.55) 0 2deg, transparent 2deg 15deg);
    opacity: .45;
    animation: compassTurn 30s linear infinite;
}
.sunrise-compass span { position: absolute; left: 50%; top: 50%; width: 1px; height: 50%; background: rgba(110,31,47,.5); transform-origin: top; }
.sunrise-compass span:nth-child(1) { transform: rotate(0deg); }
.sunrise-compass span:nth-child(2) { transform: rotate(45deg); }
.sunrise-compass span:nth-child(3) { transform: rotate(90deg); }
.sunrise-compass span:nth-child(4) { transform: rotate(135deg); }
.balcony-rail { position: absolute; bottom: 14vh; width: 100%; height: 90px; border-top: 3px solid rgba(110,31,47,.45); border-bottom: 1px solid rgba(110,31,47,.3); background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(110,31,47,.38) 71px 76px, transparent 77px 140px); }
.final-dossier { width: min(680px, 76vw); padding: 58px; z-index: 2; transform: rotate(-.7deg); }

@keyframes compassTurn { to { transform: rotate(360deg); } }

.is-lit { --route-offset: 0; --strip-shift: 0px; --strip-opacity: 1; --lamp-opacity: .78; --caption-opacity: 1; --caption-y: 0px; --sun-rise: 0px; }

@media (max-width: 760px) {
    .protocol-nav { width: calc(100% - 20px); gap: 8px; overflow-x: auto; justify-content: flex-start; }
    .scene { padding: 7rem 24px; }
    .scene::before { display: none; }
    .invitation { padding: 72px 26px 42px; width: 92vw; }
    .wax-seal { right: 24px; bottom: 18px; width: 70px; height: 70px; font-size: 32px; }
    .map-panel, .translation-document, .final-dossier { width: 90vw; padding: 32px; margin: 0; }
    .telegram-strip { left: 6vw; right: auto; max-width: 84vw; }
    .strip-two { bottom: 9vh; }
    .protocol-table { height: 520px; }
    .nameplate { min-width: 110px; font-size: 13px; }
    .caption-cloud { left: 8vw; max-width: 78vw; }
    .caption-b { left: 15vw; }
    .seal-wall { min-height: 620px; }
}