:root {
    --lacquer: #07080D;
    --mirror: #17243A;
    --oxblood: #5A1422;
    --brass: #C9A45C;
    --absinthe: #B9D98B;
    --ivory: #F1E4C8;
    --velvet: #241222;
    --wax: #9E2F2F;
    --title: "Cinzel Decorative", serif;
    --body: "Cormorant Garamond", serif;
    --stamp: "Barlow Condensed", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ivory);
    font-family: var(--body);
    background:
        radial-gradient(circle at 20% 15%, rgba(201, 164, 92, 0.13), transparent 28rem),
        radial-gradient(circle at 88% 40%, rgba(185, 217, 139, 0.09), transparent 22rem),
        linear-gradient(120deg, #07080D 0%, #17243A 48%, #241222 100%);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: 0.17;
    background-image:
        repeating-radial-gradient(circle at 17% 23%, rgba(241, 228, 200, 0.22) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(98deg, transparent 0 11px, rgba(201, 164, 92, 0.08) 12px, transparent 13px 28px);
    mix-blend-mode: overlay;
}

.map-etching {
    position: fixed;
    inset: -15vh -10vw;
    pointer-events: none;
    opacity: 0.18;
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 7.5rem, rgba(201, 164, 92, 0.24) 7.6rem 7.7rem),
        repeating-linear-gradient(80deg, transparent 0 8rem, rgba(241, 228, 200, 0.07) 8.05rem 8.12rem, transparent 8.2rem 14rem);
}

.seal-nav {
    position: fixed;
    right: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: grid;
    gap: 1rem;
}

.nav-seal {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    color: var(--ivory);
    text-decoration: none;
    font: 600 0.85rem var(--stamp);
    letter-spacing: 0.08em;
    border: 1px solid rgba(201, 164, 92, 0.75);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 20, 34, 0.9), rgba(7, 8, 13, 0.9));
    box-shadow: 0 0 0 0.25rem rgba(201, 164, 92, 0.08), inset 0 0 1rem rgba(158, 47, 47, 0.35);
    transition: transform 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}

.nav-seal::before { content: attr(data-room); }
.nav-seal span { display: none; }
.nav-seal.active, .nav-seal:hover {
    transform: rotate(-12deg) scale(1.12);
    background: radial-gradient(circle, #9E2F2F, #5A1422 62%, #07080D);
    box-shadow: 0 0 1.4rem rgba(201, 164, 92, 0.35), inset 0 0 1rem rgba(241, 228, 200, 0.12);
}

.chapter {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 6rem clamp(1.5rem, 5vw, 6rem);
    overflow: hidden;
}

.chapter::before {
    content: "";
    position: absolute;
    inset: 1.3rem;
    border: 1px solid rgba(201, 164, 92, 0.32);
    border-radius: 42% 58% 48% 52% / 4% 5% 6% 5%;
    pointer-events: none;
}

.chapter-label, .stamp, .mirror-strip, .scroll-cue, .luggage-tag, .bottle span, .note, .placard {
    font-family: var(--stamp);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.chapter-label {
    position: absolute;
    left: 2.2rem;
    top: 2rem;
    color: var(--brass);
    writing-mode: vertical-rl;
    font-size: 0.95rem;
}

h1, h2 {
    margin: 0;
    font-family: var(--title);
    color: var(--ivory);
    font-weight: 700;
    line-height: 0.96;
    text-shadow: 0 0 1.2rem rgba(201, 164, 92, 0.12);
}

h1 { font-size: clamp(3.4rem, 11vw, 9.5rem); }
h2 { font-size: clamp(2.3rem, 6vw, 5.8rem); }
p { font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; }
.stamp { color: var(--brass); font-size: 0.95rem; }

.threshold {
    background:
        radial-gradient(circle at 50% 42%, rgba(201, 164, 92, 0.18), transparent 18rem),
        linear-gradient(90deg, #07080D, #17243A 50%, #07080D);
}

.embassy-door {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 2;
    transition: transform 0.5s ease;
}

.door-panel {
    position: relative;
    background:
        linear-gradient(90deg, rgba(201, 164, 92, 0.14), transparent 5%, transparent 95%, rgba(201, 164, 92, 0.14)),
        repeating-linear-gradient(90deg, rgba(241, 228, 200, 0.035) 0 1px, transparent 1px 3rem),
        linear-gradient(140deg, #05060A, #17243A 50%, #07080D);
    border-inline: 1px solid rgba(201, 164, 92, 0.48);
    transition: transform 1.2s cubic-bezier(.62,.01,.2,1);
}

.door-panel::before {
    content: "";
    position: absolute;
    inset: 8% 9%;
    border: 1px solid rgba(201, 164, 92, 0.45);
    background: conic-gradient(from 0deg at 50% 0%, transparent, rgba(201, 164, 92, 0.14), transparent 32%);
}

body.door-open .door-left { transform: translateX(-78%); }
body.door-open .door-right { transform: translateX(78%); }

.brass-peephole {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: min(44vw, 28rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ivory);
    background:
        radial-gradient(circle at center, #07080D 0 33%, transparent 34%),
        repeating-conic-gradient(from 5deg, #C9A45C 0 7deg, #5A1422 7deg 9deg, #C9A45C 9deg 14deg);
    box-shadow: inset 0 0 0 1.2rem rgba(7, 8, 13, 0.88), 0 0 4rem rgba(201, 164, 92, 0.25);
    font: 700 clamp(1.1rem, 3vw, 2.2rem) var(--title);
}

.mirror-strip {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 18vh;
    padding: 0.8rem 1rem;
    text-align: center;
    color: rgba(241, 228, 200, 0.72);
    border-block: 1px solid rgba(201, 164, 92, 0.4);
    background: linear-gradient(90deg, transparent, rgba(241, 228, 200, 0.08), transparent);
}

.flag-ribbon {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.2rem;
    z-index: 4;
    background: linear-gradient(#C9A45C, #9E2F2F 30%, #F1E4C8 31% 34%, #17243A 35% 72%, #B9D98B);
}
.ribbon-left { left: 4vw; }
.ribbon-right { right: 4vw; }

.threshold-copy {
    position: relative;
    z-index: 1;
    max-width: 63rem;
    text-align: center;
    transform: translateY(8vh);
}

.scroll-cue {
    position: absolute;
    bottom: 2rem;
    color: var(--brass);
    font-size: 0.9rem;
    animation: cue 2.6s ease-in-out infinite;
}

@keyframes cue { 50% { transform: translateY(0.5rem); opacity: 0.55; } }

.credentials {
    background: radial-gradient(ellipse at center, rgba(36, 18, 34, 0.65), transparent 60%), #07080D;
    grid-template-columns: minmax(18rem, 52rem) minmax(16rem, 34rem);
    gap: 4rem;
}

.silver-tray {
    position: relative;
    width: min(80vw, 48rem);
    aspect-ratio: 1.45;
    border-radius: 50%;
    border: 2px solid rgba(201, 164, 92, 0.72);
    background:
        radial-gradient(ellipse at center, rgba(241, 228, 200, 0.14), transparent 55%),
        linear-gradient(115deg, rgba(23, 36, 58, 0.74), rgba(7, 8, 13, 0.9));
    box-shadow: inset 0 0 3rem rgba(201, 164, 92, 0.18), 0 2rem 5rem rgba(0,0,0,0.55);
    transform: rotate(-5deg);
}

.passport, .envelope, .luggage-tag {
    position: absolute;
    box-shadow: 0 1.2rem 2rem rgba(0,0,0,0.35);
}

.passport {
    left: 12%; top: 19%; width: 16rem; min-height: 21rem; padding: 2rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(201, 164, 92, 0.7);
    background:
        repeating-radial-gradient(circle at 50% 40%, transparent 0 0.8rem, rgba(201, 164, 92, 0.14) 0.85rem 0.9rem),
        linear-gradient(145deg, #5A1422, #241222);
}

.passport-mark {
    display: grid; place-items: center; width: 5rem; aspect-ratio: 1; margin-bottom: 2rem;
    border-radius: 50%; border: 1px solid var(--brass); color: var(--brass); font-family: var(--stamp);
}

.passport h2 { font-size: 1.55rem; }
.passport p { font-size: 1.05rem; }

.envelope {
    right: 12%; top: 27%; width: 19rem; height: 12rem; padding: 3.7rem 2rem 1rem;
    color: var(--velvet);
    background: linear-gradient(145deg, #F1E4C8, #cdbb94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: rotate(8deg);
}

.envelope::before, .envelope::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(90,20,34,0.28); clip-path: polygon(0 0, 50% 55%, 100% 0); }
.envelope::after { clip-path: polygon(0 100%, 50% 45%, 100% 100%); }

.wax-seal {
    position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
    width: 4.4rem; height: 4.4rem; display: grid; place-items: center;
    border-radius: 45% 53% 48% 57%; background: #9E2F2F; color: var(--ivory);
    font: 700 1rem var(--title); box-shadow: inset 0 0 1rem rgba(90,20,34,0.8);
    animation: sealPress 5s ease-in-out infinite;
}

@keyframes sealPress { 0%,70%,100% { transform: translate(-50%, -50%) scale(1); } 76% { transform: translate(-50%, -50%) scale(0.88) rotate(-5deg); } 84% { transform: translate(-50%, -50%) scale(1.05); } }

.luggage-tag {
    right: 24%; bottom: 12%; padding: 1rem 1.4rem; color: #07080D; background: #C9A45C;
    border-radius: 0.7rem 0.7rem 1.8rem 0.7rem; transform: rotate(-13deg); font-weight: 700;
}
.luggage-tag span { color: #5A1422; }

.side-note { max-width: 34rem; }

.accord { background: radial-gradient(circle at center, rgba(90,20,34,0.38), transparent 38rem), linear-gradient(#17243A, #07080D); }

.treaty-table {
    position: relative; width: min(82vw, 62rem); aspect-ratio: 1.55; border-radius: 50%;
    background: radial-gradient(ellipse at center, #241222 0 34%, #17243A 35% 58%, #07080D 62%);
    border: 2px solid #C9A45C; box-shadow: inset 0 0 4rem rgba(201,164,92,0.2), 0 2rem 6rem rgba(0,0,0,0.58);
    transform: rotate(var(--table-tilt, 0deg)); transition: transform 0.25s ease-out;
}
.table-ring { position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(201,164,92,0.55); }
.ring-two { inset: 18%; border-style: dashed; animation: ringTrace 12s linear infinite; }
@keyframes ringTrace { to { transform: rotate(360deg); } }

.table-center { position: absolute; inset: 27% 25%; display: grid; place-items: center; text-align: center; }
.table-center h2 { font-size: clamp(2rem, 5vw, 4.6rem); }
.table-center p:last-child { max-width: 26rem; }

.placard {
    position: absolute; padding: 0.7rem 1.2rem; border: 1px solid rgba(201,164,92,0.8); color: #07080D;
    background: linear-gradient(#F1E4C8, #C9A45C); cursor: pointer; transform-origin: center; font-size: 0.95rem;
}
.placard:hover { background: #B9D98B; }
.placard-a { left: 45%; top: 4%; transform: rotate(2deg); }
.placard-b { right: 7%; top: 43%; transform: rotate(82deg); }
.placard-c { left: 44%; bottom: 4%; transform: rotate(180deg); }
.placard-d { left: 7%; top: 43%; transform: rotate(-84deg); }
.secret-phrase { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); color: var(--absinthe); font-style: italic; font-size: 1.35rem; }

.coupe { position: absolute; width: 8rem; height: 10rem; opacity: 0.8; }
.coupe::before { content: ""; display: block; width: 7rem; height: 4rem; border: 2px solid rgba(241,228,200,0.5); border-radius: 0 0 50% 50%; background: linear-gradient(transparent 42%, rgba(185,217,139,0.42)); }
.coupe::after { content: ""; display: block; width: 2px; height: 5rem; margin: 0 auto; background: rgba(241,228,200,0.5); box-shadow: -2rem 5rem 0 -1px rgba(241,228,200,0.5), 2rem 5rem 0 -1px rgba(241,228,200,0.5); }
.coupe-left { left: 10vw; bottom: 14vh; transform: rotate(14deg); }
.coupe-right { right: 11vw; top: 15vh; transform: rotate(-18deg); }

.backbar { background: linear-gradient(90deg, #07080D, #17243A 48%, #241222); grid-template-columns: 1fr 0.8fr; gap: 4rem; }
.bottle-arc { display: flex; align-items: end; gap: clamp(0.6rem, 2vw, 1.8rem); padding: 3rem; border-bottom: 2px solid rgba(201,164,92,0.65); background: radial-gradient(ellipse at bottom, rgba(201,164,92,0.18), transparent 65%); }
.bottle { position: relative; width: clamp(4.4rem, 8vw, 7rem); border: 1px solid rgba(241,228,200,0.45); border-radius: 2rem 2rem 0.7rem 0.7rem; box-shadow: inset 0 0 2rem rgba(255,255,255,0.09), 0 0 2rem rgba(185,217,139,0.08); overflow: hidden; }
.bottle::before { content: ""; position: absolute; left: 35%; right: 35%; top: -2rem; height: 3rem; border: 1px solid rgba(241,228,200,0.4); background: inherit; }
.bottle::after { content: ""; position: absolute; inset: auto 0 0; height: var(--fill); background: var(--liquid); animation: shimmer 4s ease-in-out infinite; }
.bottle span { position: absolute; z-index: 2; left: 50%; bottom: 1rem; transform: translateX(-50%) rotate(-90deg); color: var(--ivory); font-size: 0.85rem; }
.absinthe { height: 25rem; --fill: 72%; --liquid: rgba(185,217,139,0.62); }
.oxblood { height: 20rem; --fill: 58%; --liquid: rgba(158,47,47,0.68); }
.blue { height: 28rem; --fill: 64%; --liquid: rgba(23,36,58,0.9); }
.gold { height: 22rem; --fill: 48%; --liquid: rgba(201,164,92,0.68); }
.ivory { height: 18rem; --fill: 52%; --liquid: rgba(241,228,200,0.55); }
@keyframes shimmer { 50% { filter: brightness(1.35); transform: translateY(-0.4rem); } }
.backbar-copy { max-width: 35rem; }
.decanter { position: absolute; right: 8vw; bottom: 8vh; width: 12rem; height: 15rem; border: 1px solid rgba(241,228,200,0.35); clip-path: polygon(35% 0, 65% 0, 65% 32%, 90% 52%, 76% 100%, 24% 100%, 10% 52%, 35% 32%); background: rgba(241,228,200,0.06); }
.decanter-glow { position: absolute; inset: 50% 12% 0; background: radial-gradient(circle, rgba(185,217,139,0.55), rgba(185,217,139,0.12)); animation: shimmer 4.8s ease-in-out infinite; }

.gallery { background: radial-gradient(circle at 20% 50%, rgba(201,164,92,0.14), transparent 26rem), #07080D; grid-template-columns: 1fr 0.8fr; gap: 5rem; }
.frosted-screen { position: relative; width: min(85vw, 48rem); height: 34rem; border: 1px solid rgba(201,164,92,0.55); background: linear-gradient(110deg, rgba(241,228,200,0.16), rgba(23,36,58,0.44), rgba(241,228,200,0.08)); backdrop-filter: blur(5px); box-shadow: inset 0 0 5rem rgba(241,228,200,0.08); overflow: hidden; }
.frosted-screen::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 3rem, rgba(201,164,92,0.12) 3.05rem 3.12rem); }
.note { position: absolute; padding: 0.8rem 1.1rem; color: #07080D; background: #F1E4C8; box-shadow: 0 1rem 1.8rem rgba(0,0,0,0.25); animation: noteGlide 9s ease-in-out infinite; }
.note-one { left: 8%; top: 20%; }
.note-two { right: 12%; top: 48%; animation-delay: -2s; }
.note-three { left: 36%; bottom: 15%; animation-delay: -4s; }
@keyframes noteGlide { 50% { transform: translateX(2.2rem) rotate(4deg); opacity: 0.68; } }
.silhouette { position: absolute; left: 19%; bottom: 0; width: 8rem; height: 23rem; border-radius: 50% 50% 0 0; background: linear-gradient(rgba(7,8,13,0.18), rgba(7,8,13,0.7)); filter: blur(1px); }
.silhouette.second { left: auto; right: 18%; height: 18rem; }
.gallery-copy { max-width: 38rem; }

.balcony { background: radial-gradient(circle at 50% 68%, rgba(185,217,139,0.13), transparent 28rem), linear-gradient(#17243A, #07080D); }
.world-table { position: relative; width: min(84vw, 66rem); aspect-ratio: 1.8; border-radius: 50%; border: 1px solid rgba(201,164,92,0.62); background: radial-gradient(ellipse at center, rgba(23,36,58,0.82), rgba(7,8,13,0.96) 68%), repeating-radial-gradient(ellipse at center, transparent 0 4rem, rgba(201,164,92,0.18) 4.06rem 4.12rem); overflow: hidden; }
.negotiation-seal { position: absolute; inset: 14%; display: grid; place-items: center; text-align: center; border-radius: 50%; border: 1px dashed rgba(201,164,92,0.62); padding: 2rem; background: radial-gradient(circle, rgba(90,20,34,0.38), transparent 64%); }
.negotiation-seal span { position: absolute; inset: 8%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(201,164,92,0.2) 0 3deg, transparent 3deg 8deg); animation: ringTrace 18s linear infinite reverse; }
.negotiation-seal p { max-width: 33rem; z-index: 1; }
.negotiation-seal h2 { z-index: 1; }
.map-line { position: absolute; height: 1px; width: 52%; background: linear-gradient(90deg, transparent, #C9A45C, transparent); opacity: 0.48; }
.line-a { left: 6%; top: 33%; transform: rotate(-14deg); }
.line-b { right: 6%; top: 55%; transform: rotate(12deg); }
.line-c { left: 25%; bottom: 18%; transform: rotate(4deg); }
.final-card { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); width: min(90vw, 42rem); text-align: center; padding: 1rem 2rem; background: rgba(7,8,13,0.62); border: 1px solid rgba(201,164,92,0.45); }
.final-card p:last-child { margin: 0.2rem 0 0; }

.is-visible .chapter-label { animation: stampIn 0.9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes stampIn { from { opacity: 0; transform: translateY(-1rem) rotate(8deg); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
    .seal-nav { right: 0.55rem; gap: 0.6rem; }
    .nav-seal { width: 1.9rem; height: 1.9rem; font-size: 0.7rem; }
    .chapter { padding: 5rem 1.4rem; }
    .credentials, .backbar, .gallery { grid-template-columns: 1fr; }
    .silver-tray { width: 92vw; transform: rotate(0deg); }
    .passport { width: 12rem; min-height: 16rem; padding: 1.2rem; }
    .envelope { width: 14rem; height: 9rem; right: 5%; }
    .bottle-arc { transform: scale(0.85); transform-origin: left bottom; padding: 1rem; }
    .frosted-screen { height: 28rem; }
    .chapter-label { left: 0.8rem; }
}