:root {
    --black: #070608;
    --aubergine: #241B2F;
    --burgundy: #3A0D18;
    --cream: #F3E6C8;
    --teal: #126A62;
    --violet: #8D5CFF;
    --brass: #C89B3C;
    --coral: #F05A4F;
    --font-title: "Fraunces", serif;
    --font-body: "Commissioner", sans-serif;
    --font-stamp: "Bebas Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--black);
    color: var(--cream);
    font-family: var(--font-body);
}

button { font: inherit; color: inherit; }

.grain {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(243,230,200,.24) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 80%, rgba(200,155,60,.2) 0 1px, transparent 1px),
        linear-gradient(115deg, transparent, rgba(255,255,255,.04), transparent);
    background-size: 7px 7px, 11px 11px, 100% 100%;
    mix-blend-mode: screen;
}

.tour {
    display: flex;
    width: 600vw;
    height: 100vh;
    transition: transform 1000ms cubic-bezier(.74, -.02, .16, 1);
    transform-style: preserve-3d;
}

.room {
    position: relative;
    width: 100vw;
    height: 100vh;
    flex: 0 0 100vw;
    padding: clamp(24px, 5vw, 70px);
    overflow: hidden;
    display: grid;
    align-content: center;
    isolation: isolate;
}

.room::before,
.room::after {
    content: "";
    position: absolute;
    inset: auto;
    z-index: -1;
    pointer-events: none;
}

.room h2,
.room h1 {
    font-family: var(--font-title);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.07em;
    margin: 0;
    text-wrap: balance;
}

.room h2 { font-size: clamp(64px, 13vw, 184px); max-width: 1050px; }
.room h1 { font-size: clamp(58px, 11vw, 158px); max-width: 980px; }

.manifesto,
.overheard {
    max-width: 620px;
    margin: 28px 0 0;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.28;
    font-weight: 500;
}

.room-label,
.brass-plate,
.caption,
.chant,
.ticker,
.site-mark {
    font-family: var(--font-stamp);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.room-label {
    color: var(--brass);
    font-size: clamp(24px, 4vw, 62px);
    margin-bottom: 12px;
}

.club-map {
    position: fixed;
    right: 28px;
    top: 50%;
    width: 172px;
    height: 172px;
    z-index: 30;
    border: 1px solid rgba(200,155,60,.55);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,27,47,.82), rgba(7,6,8,.72));
    box-shadow: 0 0 0 7px rgba(58,13,24,.45), 0 28px 70px rgba(0,0,0,.55);
    transform: translateY(-50%) scale(.82);
    opacity: 0;
    pointer-events: none;
    transition: .7s ease;
}

body.entered .club-map { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }

.club-map::before {
    content: "";
    position: absolute;
    inset: 32px;
    border: 1px dashed rgba(243,230,200,.35);
    border-radius: 50%;
}

.map-node {
    position: absolute;
    width: 38px;
    height: 38px;
    border: 1px solid var(--brass);
    border-radius: 50%;
    background: var(--burgundy);
    cursor: pointer;
    transition: .25s ease;
}

.map-node span {
    position: absolute;
    right: 44px;
    top: 10px;
    white-space: nowrap;
    opacity: 0;
    color: var(--cream);
    font-family: var(--font-stamp);
    letter-spacing: .06em;
}

.map-node:hover span,
.map-node.active span { opacity: 1; }
.map-node.active { background: var(--brass); color: var(--black); transform: scale(1.16); }
.map-node:nth-child(1) { left: 67px; top: -18px; }
.map-node:nth-child(2) { right: -12px; top: 34px; }
.map-node:nth-child(3) { right: 11px; bottom: 18px; }
.map-node:nth-child(4) { left: 67px; bottom: -18px; }
.map-node:nth-child(5) { left: 11px; bottom: 18px; }
.map-node:nth-child(6) { left: -12px; top: 34px; }

.room-door {
    background: radial-gradient(circle at 50% 46%, rgba(58,13,24,.96) 0 26%, #2b0911 48%, var(--black) 100%);
    justify-items: center;
    text-align: center;
}

.door-panel {
    position: relative;
    width: min(760px, 90vw);
    min-height: 78vh;
    padding: clamp(30px, 7vw, 80px);
    border: 18px solid #21070d;
    border-radius: 42px 42px 10px 10px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.05), transparent 18%, rgba(0,0,0,.26) 52%, transparent),
        repeating-linear-gradient(90deg, rgba(243,230,200,.025) 0 2px, transparent 2px 24px),
        var(--burgundy);
    box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 40px 120px rgba(0,0,0,.75);
}

.brass-plate {
    display: inline-block;
    padding: 8px 18px;
    color: var(--black);
    background: linear-gradient(135deg, var(--brass), #f0cc70, var(--brass));
    border-radius: 999px;
    font-size: 26px;
}

.peephole {
    position: relative;
    display: block;
    width: 118px;
    height: 118px;
    margin: 42px auto 28px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cream) 0 13%, var(--brass) 15% 29%, var(--black) 31% 100%);
    cursor: pointer;
    box-shadow: 0 0 0 14px rgba(200,155,60,.15), 0 0 70px rgba(200,155,60,.5);
    transition: transform .55s ease, box-shadow .55s ease;
}

.peephole:hover { transform: scale(1.08); box-shadow: 0 0 0 26px rgba(200,155,60,.14), 0 0 120px rgba(200,155,60,.7); }
.peephole-ring { position: absolute; inset: -26px; border: 1px dashed rgba(243,230,200,.4); border-radius: 50%; animation: spin 18s linear infinite; }
.peephole-map { position: absolute; inset: 26px; border-radius: 50%; background: conic-gradient(from 40deg, var(--teal), var(--violet), var(--coral), var(--brass), var(--teal)); opacity: .45; }

.site-mark { color: var(--brass); font-size: 28px; margin: 0 0 16px; }
.secret-agenda { position: absolute; left: 7vw; bottom: 7vh; transform: rotate(-8deg); color: var(--brass); }
.secret-agenda span { display: block; font-family: var(--font-stamp); font-size: 36px; }
.secret-agenda strong { font-family: var(--font-title); font-size: 24px; }

.room-coats { background: linear-gradient(135deg, var(--aubergine), #170f1f 60%, var(--black)); }
.room-coats::before { width: 70vw; height: 70vw; right: -26vw; top: -18vw; border-radius: 50%; background: repeating-conic-gradient(from 10deg, rgba(18,106,98,.24) 0 12deg, transparent 12deg 24deg); }
.tag-wall { display: flex; gap: 18px; flex-wrap: wrap; max-width: 930px; margin-top: 42px; }
.claim-tag {
    width: 205px;
    min-height: 210px;
    padding: 24px;
    color: var(--black);
    background: var(--cream);
    border-radius: 18px 18px 70px 18px;
    box-shadow: 11px 13px 0 rgba(200,155,60,.6), 0 26px 50px rgba(0,0,0,.35);
    transform: rotate(var(--tilt, -4deg));
}
.claim-tag:nth-child(2) { --tilt: 5deg; background: #ead7a9; }
.claim-tag:nth-child(3) { --tilt: -1deg; background: #f6c6bd; }
.claim-tag:nth-child(4) { --tilt: 7deg; background: #c9ebe5; }
.claim-tag span { font-family: var(--font-stamp); font-size: 68px; color: var(--coral); }
.claim-tag b { display: block; font-family: var(--font-title); font-size: 38px; line-height: .9; }
.claim-tag em { display: block; margin-top: 18px; font-style: normal; font-size: 14px; line-height: 1.25; }
.velvet-rope { position: absolute; right: 4vw; bottom: 10vh; width: 42vw; height: 190px; border-bottom: 18px solid var(--coral); border-radius: 0 0 50% 50%; transform: rotate(-9deg); }
.velvet-rope i { position: absolute; bottom: -44px; width: 18px; height: 100px; background: var(--brass); border-radius: 9px; }
.velvet-rope i:nth-child(1){ left: 6%; } .velvet-rope i:nth-child(2){ left: 50%; } .velvet-rope i:nth-child(3){ right: 6%; }

.room-roundtable { background: radial-gradient(circle at 70% 45%, rgba(141,92,255,.28), transparent 35%), linear-gradient(160deg, var(--black), var(--aubergine)); }
.table-orbit { position: absolute; right: 9vw; top: 50%; width: min(520px, 46vw); height: min(520px, 46vw); transform: translateY(-50%); border: 1px dashed rgba(243,230,200,.38); border-radius: 50%; animation: wobble 7s ease-in-out infinite; }
.roundtable-core { position: absolute; inset: 22%; display: grid; place-items: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, var(--brass), #92671d); color: var(--black); font-family: var(--font-stamp); font-size: clamp(28px, 4vw, 58px); line-height: .82; box-shadow: 0 0 0 18px rgba(200,155,60,.16); }
.roundtable-core span { font-family: var(--font-body); font-size: 13px; letter-spacing: .02em; }
.chair { position: absolute; width: 116px; height: 64px; border: 1px solid rgba(243,230,200,.6); border-radius: 50%; background: var(--burgundy); color: var(--cream); font-family: var(--font-stamp); font-size: 24px; cursor: pointer; transition: .35s ease; }
.chair:hover { background: var(--teal); transform: scale(1.12) rotate(8deg); }
.chair-a { left: 50%; top: -28px; transform: translateX(-50%); } .chair-b { right: -44px; top: 48%; } .chair-c { left: 50%; bottom: -28px; transform: translateX(-50%); } .chair-d { left: -44px; top: 48%; }
.caption { margin-top: 40px; color: var(--brass); font-size: 24px; max-width: 560px; }

.room-bar { background: linear-gradient(180deg, #11070b, var(--burgundy) 48%, var(--black)); }
.room-bar::before { left: 0; right: 0; bottom: 0; height: 36vh; background: linear-gradient(180deg, #5b2415, #1a0808); border-top: 10px solid var(--brass); }
.bar-top { position: relative; display: flex; align-items: end; gap: 22px; flex-wrap: wrap; margin-top: 48px; z-index: 1; }
.ballot-slip, .coaster, .badge { box-shadow: 0 24px 55px rgba(0,0,0,.42); }
.ballot-slip { width: 240px; min-height: 154px; padding: 22px; background: var(--cream); color: var(--black); transform: skew(-7deg) rotate(-3deg); }
.ballot-slip.against { background: #f3bab4; transform: skew(6deg) rotate(4deg); }
.ballot-slip span { font-family: var(--font-stamp); font-size: 90px; line-height: .75; color: var(--teal); }
.ballot-slip b { display: block; font-size: 15px; margin-top: 12px; }
.coaster { display: grid; place-items: center; width: 170px; height: 170px; padding: 24px; border-radius: 50%; background: var(--teal); text-align: center; font-weight: 800; transform: rotate(12deg); }
.badge { padding: 24px 30px; border-radius: 999px; background: var(--violet); font-family: var(--font-stamp); font-size: 34px; color: var(--cream); transform: rotate(-5deg); }
.stamp-button, .return-door { margin-top: 36px; width: fit-content; border: 2px solid var(--brass); background: transparent; color: var(--brass); padding: 14px 25px 10px; border-radius: 999px; font-family: var(--font-stamp); font-size: 32px; letter-spacing: .08em; cursor: pointer; transition: .25s ease; }
.stamp-button:hover, .return-door:hover { background: var(--brass); color: var(--black); transform: rotate(-2deg) scale(1.04); }
.stamped .bar-top::after { content: "PAID IN AMENDMENTS"; position: absolute; left: 36%; top: -20px; color: var(--coral); border: 6px solid var(--coral); padding: 8px 18px 2px; font-family: var(--font-stamp); font-size: 56px; transform: rotate(-13deg); }

.room-dance { background: radial-gradient(circle at 50% 42%, rgba(240,90,79,.24), transparent 36%), linear-gradient(135deg, var(--aubergine), var(--black)); }
.dance-grid { position: absolute; right: 5vw; top: 12vh; width: min(620px, 48vw); height: min(620px, 72vh); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; transform: perspective(800px) rotateY(-13deg) rotateZ(5deg); }
.dance-grid span { display: grid; place-items: center; border: 1px solid rgba(243,230,200,.32); background: rgba(141,92,255,.18); color: var(--brass); font-family: var(--font-stamp); font-size: clamp(48px, 8vw, 120px); animation: pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 1) * .12s); }
.dance-grid span:nth-child(2n) { background: rgba(18,106,98,.24); color: var(--cream); }
.gavel-shadow { position: absolute; left: 12vw; bottom: 14vh; width: 440px; height: 90px; background: rgba(0,0,0,.58); border-radius: 50%; filter: blur(7px); transform: rotate(-18deg); }
.gavel-shadow::before { content: ""; position: absolute; left: 70px; top: -110px; width: 78px; height: 260px; background: linear-gradient(90deg, var(--brass), #6f4b17); border-radius: 30px; transform: rotate(58deg); }
.chant { max-width: 760px; margin-top: 48px; color: var(--coral); font-size: clamp(28px, 5vw, 78px); line-height: .92; }

.room-courtyard { background: linear-gradient(140deg, var(--teal), #082d2a 44%, var(--black)); }
.room-courtyard::before { width: 72vw; height: 72vw; right: -20vw; bottom: -38vw; border-radius: 50%; background: repeating-conic-gradient(rgba(243,230,200,.16) 0 8deg, rgba(200,155,60,.18) 8deg 13deg, transparent 13deg 24deg); }
.courtyard-board { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 18px; max-width: 950px; margin-top: 42px; }
.courtyard-board article { min-height: 185px; padding: 24px; background: rgba(7,6,8,.42); border: 1px solid rgba(243,230,200,.28); border-radius: 30px; backdrop-filter: blur(6px); }
.courtyard-board b { display: block; color: var(--brass); font-family: var(--font-stamp); font-size: 45px; font-weight: 400; }
.courtyard-board span { display: block; margin-top: 16px; font-size: 19px; line-height: 1.35; }

.ticker { position: fixed; left: 0; bottom: 0; z-index: 25; display: flex; gap: 38px; width: max-content; padding: 10px 0 8px; background: var(--brass); color: var(--black); font-size: 22px; animation: crawl 24s linear infinite; }
.ticker span { padding-left: 38px; white-space: nowrap; }

.room:not(.active) .claim-tag,
.room:not(.active) .bar-top,
.room:not(.active) .courtyard-board,
.room:not(.active) .table-orbit { transform: translateY(24px) scale(.96); opacity: .45; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { rotate: -3deg; } 50% { rotate: 6deg; } }
@keyframes pulse { 0%, 100% { transform: scale(.96); filter: brightness(.9); } 50% { transform: scale(1.04); filter: brightness(1.35); } }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 820px) {
    html, body { overflow: auto; }
    .tour { display: block; width: 100%; height: auto; transform: none !important; }
    .room { min-height: 100vh; height: auto; padding: 80px 22px 120px; }
    .club-map { display: none; }
    .table-orbit, .dance-grid { position: relative; right: auto; top: auto; width: 88vw; height: 88vw; margin-top: 38px; transform: none; }
    .courtyard-board { grid-template-columns: 1fr; }
    .velvet-rope { opacity: .35; width: 80vw; }
}