:root {
    /* marginalia clustered like evidence. create constitutional ceremony plus readable archival marginalia sparingly IDs */
    --ink: #11151F;
    --verdigris: #2F766D;
    --vellum: #F3E4C2;
    --slate: #273044;
    --brass: #C59A43;
    --cinnabar: #C8442E;
    --oxblood: #6E1F2A;
    --title: 'Cinzel', serif;
    --body: 'Newsreader', serif;
    --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--vellum);
    font-family: var(--body);
    background:
        radial-gradient(circle at 15% 8%, rgba(243, 228, 194, .13), transparent 24rem),
        radial-gradient(circle at 86% 46%, rgba(47, 118, 109, .2), transparent 28rem),
        linear-gradient(115deg, #11151F 0%, #171B29 38%, #273044 100%);
    overflow-x: hidden;
    cursor: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(64deg, transparent 0 47%, rgba(243, 228, 194, .22) 48% 49%, transparent 50%),
        linear-gradient(154deg, transparent 0 47%, rgba(197, 154, 67, .16) 48% 49%, transparent 50%),
        repeating-linear-gradient(90deg, rgba(243, 228, 194, .05) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(0deg, rgba(243, 228, 194, .04) 0 1px, transparent 1px 72px);
    mix-blend-mode: screen;
}

body::after {
    content: "§  §  §  |||||  AMND  BRG  PET  QUORUM  |||";
    position: fixed;
    left: -3rem;
    right: -3rem;
    bottom: 1.2rem;
    color: rgba(243, 228, 194, .14);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: 1.8rem;
    white-space: nowrap;
    pointer-events: none;
}

.lantern {
    position: fixed;
    z-index: 60;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(243, 228, 194, .24) 0%, rgba(197, 154, 67, .16) 28%, transparent 68%);
    mix-blend-mode: screen;
    transform: translate3d(50vw, 50vh, 0);
}

.docket-strip {
    position: fixed;
    z-index: 50;
    top: 1rem;
    left: 50%;
    width: min(92vw, 980px);
    transform: translateX(-50%) rotate(-.35deg);
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .65rem .85rem;
    border: 1px solid rgba(197, 154, 67, .55);
    background: rgba(17, 21, 31, .78);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35), inset 0 0 25px rgba(197, 154, 67, .08);
    backdrop-filter: blur(12px);
}

.docket-strip p, .docket, .annotation { font-family: var(--mono); }

.docket-strip p {
    margin: 0;
    color: var(--brass);
    letter-spacing: .26em;
    font-size: .72rem;
}

.docket-strip nav { display: flex; gap: .4rem; }

.docket-strip a {
    color: var(--vellum);
    text-decoration: none;
    font-family: var(--mono);
    font-size: .72rem;
    border: 1px solid rgba(243, 228, 194, .25);
    padding: .28rem .4rem;
    transition: background .3s, color .3s, border-color .3s;
}

.docket-strip a.active, .docket-strip a:hover {
    color: var(--ink);
    background: var(--brass);
    border-color: var(--brass);
}

.compass-mark {
    width: 44px;
    height: 44px;
    border: 1px solid var(--brass);
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle, rgba(243, 228, 194, .14), transparent 60%);
    animation: tremble 1.8s infinite steps(2);
}

.compass-mark span {
    position: absolute;
    top: 6px;
    left: 20px;
    width: 4px;
    height: 31px;
    background: linear-gradient(var(--cinnabar) 0 50%, var(--brass) 51%);
    clip-path: polygon(50% 0, 100% 48%, 50% 100%, 0 48%);
    transform-origin: center;
}

.chamber-map { position: relative; }

.route-map {
    position: fixed;
    z-index: 2;
    inset: 0 0 0 0;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
}

.route-shadow, .route-line, .route-revision {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.route-shadow {
    stroke: rgba(17, 21, 31, .85);
    stroke-width: 14;
    stroke-linecap: round;
}

.route-line {
    stroke: var(--cinnabar);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 12px rgba(200, 68, 46, .42));
}

.route-revision {
    stroke: rgba(243, 228, 194, .5);
    stroke-width: 2;
    stroke-dasharray: 8 12;
    opacity: .55;
}

.room {
    min-height: 100vh;
    position: relative;
    z-index: 5;
    padding: 8rem 7vw 5rem;
    display: grid;
    grid-template-columns: minmax(280px, 42vw) 1fr;
    align-items: center;
    gap: 5vw;
    isolation: isolate;
}

.room:nth-of-type(even) { grid-template-columns: 1fr minmax(280px, 42vw); }
.room:nth-of-type(even) > div:first-of-type { grid-column: 2; }
.room:nth-of-type(even) > .symbol { grid-column: 1; grid-row: 1; }

.room::before {
    content: attr(data-room);
    position: absolute;
    top: 13vh;
    right: 5vw;
    font-family: var(--title);
    font-size: clamp(9rem, 21vw, 24rem);
    line-height: .7;
    color: rgba(243, 228, 194, .045);
    z-index: -1;
}

.room::after {
    content: attr(data-title);
    position: absolute;
    bottom: 8vh;
    left: 5vw;
    font-family: var(--mono);
    color: rgba(197, 154, 67, .35);
    letter-spacing: .36em;
    text-transform: uppercase;
    font-size: .7rem;
}

.room h1, .room h2 {
    font-family: var(--title);
    margin: .35rem 0 1rem;
    color: var(--vellum);
    font-weight: 700;
    letter-spacing: .035em;
    line-height: .85;
    text-shadow: 0 0 22px rgba(243, 228, 194, .14);
}

.room h1 { font-size: clamp(4.6rem, 12vw, 13rem); }
.room h2 { font-size: clamp(3rem, 7.5vw, 8.2rem); }

.room p {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    line-height: 1.35;
    margin: 0;
}

.docket {
    color: var(--brass);
    display: block;
    letter-spacing: .14em;
    font-size: .74rem;
    text-transform: uppercase;
}

.room-plaque, .paper-stack, .bridge-board, .forge-card, .stair-ledger, .gallery-scroll, .final-vellum {
    position: relative;
    padding: clamp(1.6rem, 3.2vw, 3.5rem);
    background:
        linear-gradient(135deg, rgba(243, 228, 194, .95), rgba(243, 228, 194, .78)),
        repeating-linear-gradient(20deg, transparent 0 8px, rgba(17, 21, 31, .06) 9px 10px);
    color: var(--ink);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(110, 31, 42, .28);
    clip-path: polygon(1% 3%, 96% 0, 100% 92%, 91% 100%, 4% 97%, 0 16%);
    transform: rotate(-1.2deg) translateY(30px);
    opacity: .42;
    transition: opacity .8s, transform .8s, filter .8s;
}

.room.active .room-plaque, .room.active .paper-stack, .room.active .bridge-board, .room.active .forge-card, .room.active .stair-ledger, .room.active .gallery-scroll, .room.active .final-vellum {
    opacity: 1;
    transform: rotate(-1.2deg) translateY(0);
}

.room-plaque h1, .paper-stack h2, .bridge-board h2, .forge-card h2, .stair-ledger h2, .gallery-scroll h2, .final-vellum h2 { color: var(--oxblood); }

.room-plaque::before, .paper-stack::before, .bridge-board::before, .forge-card::before, .stair-ledger::before, .gallery-scroll::before, .final-vellum::before {
    content: "";
    position: absolute;
    inset: .75rem;
    border: 1px dashed rgba(110, 31, 42, .28);
    pointer-events: none;
}

.annotation {
    position: absolute;
    max-width: 280px;
    color: rgba(243, 228, 194, .68);
    font-size: .78rem;
    line-height: 1.55;
    letter-spacing: .04em;
    border-left: 2px solid var(--cinnabar);
    padding-left: .85rem;
}

#fogged-square .annotation { right: 9vw; bottom: 16vh; }
#petition-gate .annotation { left: 9vw; top: 22vh; }
#coalition-bridge .annotation { right: 6vw; bottom: 18vh; }
#amendment-forge .annotation { left: 8vw; bottom: 20vh; }
#whip-count-stair .annotation { right: 8vw; top: 24vh; }
#gallery-of-echoes .annotation { left: 7vw; bottom: 18vh; }
#unfinished-round-table .annotation { right: 8vw; bottom: 13vh; }

.symbol {
    justify-self: center;
    position: relative;
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .45));
    opacity: .58;
    transform: translateY(38px) scale(.96);
    transition: opacity .8s, transform .8s;
}

.room.active .symbol { opacity: 1; transform: translateY(0) scale(1); }

.symbol::after {
    content: attr(data-note);
    position: absolute;
    left: 50%;
    top: calc(100% + 1rem);
    width: 240px;
    transform: translateX(-50%) rotate(.8deg);
    color: var(--ink);
    background: var(--vellum);
    font-family: var(--mono);
    font-size: .68rem;
    line-height: 1.35;
    padding: .7rem;
    border: 1px solid var(--brass);
    opacity: 0;
    transition: opacity .35s, top .35s;
}

.symbol:hover::after { opacity: 1; top: calc(100% + .45rem); }

.map-noise {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 52% 52%, transparent 0 18%, rgba(17,21,31,.48) 60%, rgba(17,21,31,.92) 100%);
    animation: fogThin 6s ease-in-out infinite alternate;
    pointer-events: none;
}

.compass {
    width: min(45vw, 430px);
    aspect-ratio: 1;
    border: 2px solid var(--brass);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 228, 194, .12), rgba(39, 48, 68, .68) 62%, rgba(17,21,31,.92));
    animation: tremble 1.5s infinite steps(2);
}

.compass i, .compass b, .compass em {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(197, 154, 67, .42);
    border-radius: 50%;
}

.compass b {
    inset: 27%;
    border-color: rgba(243, 228, 194, .3);
}

.compass em {
    inset: 22% 49%;
    border: 0;
    background: linear-gradient(var(--cinnabar) 0 50%, var(--brass) 51%);
    clip-path: polygon(50% 0, 100% 46%, 50% 100%, 0 46%);
    transform: rotate(var(--needle, -18deg));
    transition: transform .5s;
}

.petition-seal {
    width: 290px;
    height: 360px;
    background: var(--vellum);
    clip-path: polygon(7% 0, 100% 5%, 94% 100%, 0 93%);
}

.petition-seal::before {
    content: "PETITION\A GATE";
    white-space: pre;
    position: absolute;
    inset: 3rem 2rem;
    color: rgba(17,21,31,.56);
    font-family: var(--title);
    font-size: 2.2rem;
    border-top: 3px double rgba(110,31,42,.45);
    border-bottom: 3px double rgba(110,31,42,.45);
    display: grid;
    place-items: center;
    text-align: center;
}

.petition-seal span {
    position: absolute;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    right: 28px;
    bottom: 40px;
    background: radial-gradient(circle, var(--cinnabar), var(--oxblood));
    box-shadow: inset 0 -10px 18px rgba(0,0,0,.24);
}

.room.active .petition-seal span { animation: crackSeal 1.6s .4s both; }

.coalition-tokens {
    width: min(48vw, 520px);
    height: 280px;
    border-bottom: 14px solid var(--verdigris);
    border-radius: 0 0 50% 50%;
}

.coalition-tokens::before, .coalition-tokens::after {
    content: "";
    position: absolute;
    top: 42%;
    width: 54%;
    height: 4px;
    background: var(--cinnabar);
    transform-origin: center;
}

.coalition-tokens::before { left: 0; transform: rotate(16deg); }
.coalition-tokens::after { right: 0; transform: rotate(-16deg); }

.token {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--brass);
    top: 80px;
    left: 20%;
    transition: transform 1s;
}

.token::after {
    content: "";
    position: absolute;
    inset: 18px;
    background: var(--ink);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.token.tower { left: 44%; background: var(--verdigris); }
.token.hand { left: 68%; background: var(--cinnabar); }
.room.active .token.wolf { transform: translateX(30px) rotate(-12deg); }
.room.active .token.tower { transform: translateY(-22px); }
.room.active .token.hand { transform: translateX(-30px) rotate(12deg); }

.anvil {
    width: 380px;
    height: 320px;
}

.anvil-base {
    position: absolute;
    left: 54px;
    bottom: 58px;
    width: 270px;
    height: 95px;
    background: linear-gradient(180deg, var(--slate), var(--ink));
    clip-path: polygon(10% 0, 80% 0, 100% 22%, 68% 40%, 58% 100%, 22% 100%, 30% 42%, 0 25%);
    border-top: 5px solid var(--brass);
}

.hammer {
    position: absolute;
    left: 140px;
    top: 30px;
    width: 54px;
    height: 210px;
    background: var(--brass);
    transform: rotate(36deg);
    transform-origin: bottom;
}

.hammer::before {
    content: "";
    position: absolute;
    left: -58px;
    top: -16px;
    width: 170px;
    height: 52px;
    background: var(--cinnabar);
    border-radius: 6px;
}

.room.active .hammer { animation: stampHammer 2.1s infinite; }

.vote-stairs {
    width: 390px;
    height: 390px;
    transform-style: preserve-3d;
}

.vote-stairs span {
    position: absolute;
    width: 190px;
    height: 42px;
    left: calc(50% - 95px);
    top: calc(50% - 21px);
    background: linear-gradient(90deg, var(--oxblood), var(--brass));
    border: 1px solid rgba(243,228,194,.35);
    transform: rotate(calc(var(--i) * 34deg)) translateY(calc(var(--i) * -27px));
}

.vote-stairs span:nth-child(1) { --i: -2; }
.vote-stairs span:nth-child(2) { --i: -1; }
.vote-stairs span:nth-child(3) { --i: 0; }
.vote-stairs span:nth-child(4) { --i: 1; }
.vote-stairs span:nth-child(5) { --i: 2; }
.room.active .vote-stairs { animation: stairCount 4s linear infinite; }

.masks {
    width: 460px;
    height: 270px;
}

.masks span {
    position: absolute;
    width: 120px;
    height: 160px;
    top: 52px;
    left: 30px;
    background: var(--vellum);
    border-radius: 50% 50% 45% 45%;
    clip-path: polygon(50% 0, 92% 18%, 100% 60%, 74% 100%, 26% 100%, 0 60%, 8% 18%);
}

.masks span::before {
    content: "";
    position: absolute;
    inset: 48px 25px 68px;
    background: linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 52px, var(--ink) 52px 70px);
}

.masks span::after {
    content: attr(data-whisper);
    position: absolute;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--brass);
    font-family: var(--mono);
    font-size: .68rem;
    opacity: .25;
}

.masks span:nth-child(2) { left: 170px; top: 24px; background: #F3E4C2; transform: scale(1.12); }
.masks span:nth-child(3) { left: 310px; background: rgba(243, 228, 194, .82); }
.room.active .masks span { animation: whisper 2.5s ease-in-out infinite alternate; }
.room.active .masks span:nth-child(2) { animation-delay: .4s; }
.room.active .masks span:nth-child(3) { animation-delay: .8s; }

.round-table {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(243,228,194,.18) 0 22%, transparent 23%),
        conic-gradient(from 10deg, var(--brass), var(--oxblood), var(--verdigris), var(--brass));
    border: 16px solid rgba(243, 228, 194, .2);
    animation: tableTurn 18s linear infinite;
}

.round-table::before {
    content: "";
    position: absolute;
    inset: 72px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: inset 0 0 40px rgba(197,154,67,.3);
}

.chair {
    position: absolute;
    width: 48px;
    height: 78px;
    background: var(--vellum);
    left: calc(50% - 24px);
    top: -34px;
    transform-origin: 24px 244px;
    border-radius: 12px 12px 4px 4px;
}

.chair.c2 { transform: rotate(72deg); }
.chair.c3 { transform: rotate(144deg); }
.chair.c4 { transform: rotate(216deg); }
.chair.missing { transform: rotate(288deg); background: transparent; border: 2px dashed var(--cinnabar); }

#coalition-bridge { background: radial-gradient(circle at 30% 60%, rgba(47, 118, 109, .28), transparent 34rem); }
#amendment-forge { background: radial-gradient(circle at 78% 50%, rgba(200, 68, 46, .22), transparent 30rem); }
#whip-count-stair { background: radial-gradient(circle at 38% 46%, rgba(110, 31, 42, .3), transparent 30rem); }
#unfinished-round-table { background: radial-gradient(circle at 50% 52%, rgba(243, 228, 194, .16), transparent 34rem); }

@keyframes tremble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes fogThin { from { opacity: .85; } to { opacity: .46; } }
@keyframes crackSeal { 0% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 100% { clip-path: polygon(0 0,47% 0,42% 42%,54% 48%,45% 100%,0 100%,0 0,55% 0,100% 0,100% 100%,55% 100%,63% 49%,52% 43%); } }
@keyframes stampHammer { 0%, 55%, 100% { transform: rotate(36deg); } 68% { transform: rotate(72deg) translate(24px, 24px); } 74% { transform: rotate(28deg); } }
@keyframes stairCount { to { transform: rotate(360deg); } }
@keyframes whisper { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-12px) rotate(2deg); } }
@keyframes tableTurn { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
    body { cursor: auto; }
    .lantern { display: none; }
    .docket-strip { grid-template-columns: 42px 1fr; }
    .docket-strip nav { grid-column: 1 / -1; justify-content: space-between; }
    .room, .room:nth-of-type(even) {
        grid-template-columns: 1fr;
        min-height: 112vh;
        padding: 9rem 1.1rem 4rem;
    }
    .room:nth-of-type(even) > div:first-of-type, .room:nth-of-type(even) > .symbol { grid-column: auto; grid-row: auto; }
    .annotation { position: relative; inset: auto !important; margin-top: 1.5rem; }
    .symbol { max-width: 90vw; transform: scale(.78); }
    .room h1 { font-size: 4rem; }
    .room h2 { font-size: 3.2rem; }
}