:root {
    --ink: #10131C;
    --bone: #E8E0CB;
    --cyan: #36D6C9;
    --red: #E0473F;
    --violet: #6F5BFF;
    --brass: #C89B3C;
    --blue: #253B73;
    --serif: 'Instrument Serif', serif;
    --label: 'Archivo Black', sans-serif;
    --body: 'Newsreader', serif;
    --tech: 'IBM Plex Sans Condensed', sans-serif;
}

/* IBM Plex Sans Condensed** for map coordinates; Condense* */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    overflow-x: hidden;
    font-family: var(--body);
}

.civic-table {
    min-height: 100vh;
    background:
        radial-gradient(circle at 22% 12%, rgba(111,91,255,.16), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(54,214,201,.10), transparent 30%),
        linear-gradient(135deg, #10131C 0%, #151929 47%, #0b0d13 100%);
    position: relative;
}

.table-grain,
.ballot-constellation {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.table-grain {
    opacity: .23;
    background-image:
        linear-gradient(90deg, rgba(232,224,203,.04) 1px, transparent 1px),
        linear-gradient(rgba(232,224,203,.035) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: rotate(-2deg) scale(1.08);
}
.ballot-constellation {
    background-image: radial-gradient(circle, rgba(232,224,203,.45) 0 2px, transparent 2px);
    background-size: 57px 43px;
    mask-image: radial-gradient(circle at 52% 46%, black, transparent 72%);
    opacity: .28;
}

.puzzle-tabs {
    position: fixed;
    z-index: 20;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.puzzle-tabs button {
    color: var(--ink);
    background: var(--bone);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 rgba(37,59,115,.65), inset 0 0 0 1px var(--brass);
    font-family: var(--label);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .78rem .8rem;
    clip-path: polygon(0 10%, 87% 0, 100% 35%, 92% 100%, 9% 92%);
    transform: rotate(var(--tab-rot, -3deg));
    transition: transform .45s ease, background .45s ease, color .45s ease;
}
.puzzle-tabs button:nth-child(even) { --tab-rot: 3deg; clip-path: polygon(8% 0, 100% 10%, 92% 88%, 34% 100%, 0 64%); }
.puzzle-tabs button.active { background: var(--cyan); transform: rotate(0deg) translateX(.55rem); }

.chamber {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    padding: clamp(5rem, 7vw, 7rem) clamp(1.5rem, 6vw, 7rem) clamp(3rem, 5vw, 5rem) clamp(7rem, 13vw, 13rem);
    overflow: hidden;
    isolation: isolate;
}
.chamber::before {
    content: attr(data-chamber);
    position: absolute;
    right: 5vw;
    top: 5vh;
    color: rgba(232,224,203,.07);
    font-family: var(--label);
    font-size: clamp(6rem, 16vw, 15rem);
    line-height: 1;
    z-index: -1;
}
h1, h2 {
    font-family: var(--serif);
    font-weight: 400;
    margin: 0;
    letter-spacing: -.04em;
}
h1 { font-size: clamp(5rem, 13vw, 14rem); line-height: .76; }
h2 { font-size: clamp(4rem, 10vw, 11rem); line-height: .78; max-width: 850px; }
.clue-copy, .hero-label p {
    font-size: clamp(1.25rem, 2.1vw, 2rem);
    line-height: 1.25;
    max-width: 650px;
    color: rgba(232,224,203,.86);
}
.stamp, .map-margin, .closing-marginalia, .domain-net, .loose-piece small, .drawer-face i {
    font-family: var(--tech);
    text-transform: uppercase;
    letter-spacing: .14em;
}

.domain-assembly {
    position: absolute;
    left: 16vw;
    top: 8vh;
    display: flex;
    align-items: flex-end;
    gap: .12em;
    transform: rotate(-5deg);
    z-index: 4;
}
.podium-piece, .border-chain, .domain-net {
    display: inline-block;
    color: var(--ink);
    background: var(--bone);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 rgba(200,155,60,.65);
}
.podium-piece {
    font-family: var(--serif);
    font-size: clamp(4rem, 9vw, 9rem);
    line-height: .72;
    padding: .12em .16em .2em;
    clip-path: polygon(17% 0, 88% 8%, 100% 74%, 74% 100%, 0 87%, 6% 20%);
}
.podium-right { transform: scaleX(-1) rotate(4deg); background: var(--cyan); }
.border-chain {
    font-family: var(--serif);
    font-size: clamp(3.7rem, 8vw, 8.5rem);
    line-height: .8;
    padding: .07em .18em .19em;
    clip-path: polygon(0 18%, 14% 0, 30% 17%, 48% 4%, 65% 23%, 82% 0, 100% 18%, 94% 100%, 4% 88%);
}
.domain-net { padding: .5rem .7rem; background: var(--blue); color: var(--bone); transform: rotate(8deg) translateY(-.8rem); }

.hero-label {
    position: absolute;
    left: 47vw;
    top: 45vh;
    max-width: 740px;
    transform: rotate(2deg);
}
.stamp { color: var(--cyan); font-size: .86rem; font-weight: 700; }
.mandate-scatter { position: absolute; inset: 0; }
.loose-piece {
    position: absolute;
    width: clamp(150px, 16vw, 260px);
    min-height: 116px;
    padding: 1.05rem;
    background: var(--bone);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 10px 12px 0 rgba(0,0,0,.3);
    clip-path: polygon(0 13%, 21% 0, 46% 13%, 72% 2%, 100% 20%, 91% 100%, 12% 89%);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.loose-piece b { display: block; font-family: var(--label); text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.55rem); }
.loose-piece small { display: block; margin-top: .7rem; font-size: .72rem; color: var(--blue); }
.p1 { left: 9vw; top: 35vh; transform: rotate(-12deg); }
.p2 { left: 72vw; top: 20vh; transform: rotate(11deg); background: var(--cyan); }
.p3 { left: 38vw; top: 24vh; transform: rotate(7deg); }
.p4 { left: 20vw; top: 68vh; transform: rotate(13deg); background: var(--blue); color: var(--bone); }
.p4 small { color: var(--bone); }
.p5 { left: 67vw; top: 70vh; transform: rotate(-8deg); border-color: var(--red); }
.p6 { left: 46vw; top: 72vh; transform: rotate(4deg); background: var(--brass); }

.seam-svg { position: absolute; inset: auto; pointer-events: none; overflow: visible; }
.seam-svg path, .string-svg path {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    filter: drop-shadow(0 0 8px rgba(54,214,201,.45));
}
.chamber.active .seam-svg path, .chamber.active .string-svg path { animation: trace 2.8s ease forwards; }
.hero-seams { left: 9vw; top: 18vh; width: 80vw; height: 60vh; opacity: .72; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.registration { position: absolute; width: 42px; height: 42px; border: 2px solid var(--brass); }
.top-left { left: 8vw; top: 6vh; border-right: 0; border-bottom: 0; }
.bottom-right { right: 5vw; bottom: 6vh; border-left: 0; border-top: 0; }

#gerrymander-labyrinth { background: linear-gradient(120deg, rgba(37,59,115,.5), transparent 62%); }
.map-margin { color: var(--brass); margin-bottom: 1rem; }
.district-board { position: relative; height: 54vh; margin-top: 3rem; }
.district {
    position: absolute;
    background: rgba(232,224,203,.92);
    color: var(--ink);
    border: 2px solid var(--cyan);
    box-shadow: inset 0 0 0 1px var(--blue), 0 0 26px rgba(54,214,201,.18);
    display: grid;
    place-items: center;
    font-family: var(--label);
    transition: transform .9s ease;
}
.d1 { left: 8%; top: 8%; width: 30%; height: 38%; clip-path: polygon(0 7%, 78% 0, 100% 44%, 62% 100%, 6% 82%); transform: rotate(-4deg); }
.d2 { left: 33%; top: 5%; width: 28%; height: 48%; clip-path: polygon(18% 0, 100% 16%, 88% 78%, 35% 100%, 0 45%); transform: rotate(7deg); }
.d3 { left: 58%; top: 16%; width: 31%; height: 36%; clip-path: polygon(0 20%, 44% 0, 100% 28%, 76% 100%, 12% 82%); transform: rotate(-10deg); }
.d4 { left: 17%; top: 48%; width: 38%; height: 38%; clip-path: polygon(8% 0, 100% 10%, 82% 94%, 25% 100%, 0 54%); transform: rotate(3deg); }
.d5 { left: 53%; top: 54%; width: 27%; height: 34%; clip-path: polygon(0 0, 86% 12%, 100% 76%, 40% 100%, 8% 70%); transform: rotate(12deg); }
.chamber.active .district { transform: rotate(0deg) translateY(-8px); }
.labyrinth-lines { left: 10vw; top: 20vh; width: 82vw; height: 58vh; }
.acetate-note {
    position: absolute;
    right: 7vw;
    bottom: 8vh;
    max-width: 380px;
    padding: 1.1rem;
    border: 1px solid var(--violet);
    background: rgba(111,91,255,.24);
    color: var(--bone);
    transform: rotate(-6deg);
    font-size: 1.25rem;
}

#debate-lock { display: grid; place-items: center; }
.lock-stage { width: min(980px, 88vw); transform: rotate(-1deg); }
.podium-lock { display: flex; align-items: center; justify-content: center; gap: 1.3rem; margin: 3rem 0; }
.podium { width: 170px; height: 230px; background: var(--bone); color: var(--ink); font-family: var(--serif); font-size: 8rem; display: grid; place-items: center; clip-path: polygon(18% 0, 86% 0, 100% 100%, 0 100%); border: 3px solid var(--ink); box-shadow: 0 0 0 5px var(--brass); }
.key-right { transform: scaleX(-1); background: var(--cyan); }
.lock-core { display: flex; gap: .55rem; padding: 1.2rem; background: var(--blue); border: 3px solid var(--brass); }
.lock-core span { width: 42px; height: 126px; background: var(--ink); border: 2px solid var(--bone); transform: translateY(18px); transition: transform .7s ease; }
.chamber.active .lock-core span:nth-child(1) { transform: translateY(0); }
.chamber.active .lock-core span:nth-child(2) { transform: translateY(-16px); }
.chamber.active .lock-core span:nth-child(3) { transform: translateY(9px); }
.chamber.active .lock-core span:nth-child(4) { transform: translateY(-4px); }
.speech-strips { display: grid; gap: .65rem; max-width: 720px; margin-left: auto; }
.speech-strips span { display: block; background: var(--bone); color: var(--ink); padding: .7rem 1rem; font-family: var(--tech); text-transform: uppercase; transform: rotate(var(--r, 2deg)); }
.speech-strips span:nth-child(2) { --r: -2deg; color: var(--red); }
.redacted { box-shadow: inset 190px 0 0 var(--ink); }

.pin-board { position: relative; height: 58vh; margin-top: 2rem; border: 1px solid rgba(232,224,203,.18); background: rgba(232,224,203,.035); }
.pin { position: absolute; z-index: 2; padding: .55rem .8rem; background: var(--brass); color: var(--ink); border-radius: 999px; font-family: var(--label); font-size: .78rem; text-transform: uppercase; box-shadow: 0 0 0 8px rgba(200,155,60,.16); }
.pin::before { content: ''; position: absolute; width: 10px; height: 10px; background: var(--red); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.a { left: 14%; top: 18%; } .b { left: 64%; top: 11%; } .c { left: 80%; top: 62%; } .d { left: 35%; top: 78%; } .e { left: 47%; top: 41%; }
.string-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fit-piece { position: absolute; background: rgba(111,91,255,.28); border: 2px solid var(--violet); color: var(--bone); padding: 1rem; font-family: var(--tech); text-transform: uppercase; clip-path: polygon(0 14%, 92% 0, 100% 80%, 20% 100%); transition: transform .9s ease; }
.fit-a { left: 18%; top: 50%; transform: rotate(8deg); } .fit-b { left: 52%; top: 28%; transform: rotate(-12deg); } .fit-c { left: 58%; top: 70%; transform: rotate(5deg); background: rgba(54,214,201,.2); border-color: var(--cyan); }
.chamber.active .fit-piece { transform: rotate(0deg) translateX(12px); }

#contradiction-drawer { display: grid; place-items: center; }
.drawer { width: min(920px, 84vw); perspective: 900px; }
.drawer-face { height: 170px; background: var(--blue); border: 3px solid var(--brass); display: flex; align-items: center; justify-content: space-between; padding: 2rem; font-family: var(--label); text-transform: uppercase; font-size: clamp(1.2rem, 3vw, 3rem); transform-origin: top; transition: transform 1.1s ease; }
.drawer-face i { font-style: normal; font-size: .8rem; color: var(--cyan); }
.drawer-interior { background: var(--bone); color: var(--ink); padding: 2rem; border: 3px solid var(--ink); transform: translateY(-36px); box-shadow: 0 28px 0 rgba(0,0,0,.28); }
.chamber.active .drawer-face { transform: rotateX(-17deg); }
.fracture-field span { position: absolute; width: 4px; height: 160px; background: var(--red); box-shadow: 0 0 16px rgba(224,71,63,.7); transform: rotate(var(--crack)); }
.fracture-field span:nth-child(1) { --crack: 24deg; left: 18%; top: 22%; } .fracture-field span:nth-child(2) { --crack: -42deg; left: 78%; top: 16%; } .fracture-field span:nth-child(3) { --crack: 68deg; left: 67%; top: 70%; } .fracture-field span:nth-child(4) { --crack: -12deg; left: 31%; top: 76%; } .fracture-field span:nth-child(5) { --crack: 39deg; left: 52%; top: 11%; }

#public-picture { display: grid; align-content: center; grid-template-columns: 1fr minmax(310px, 48vw); gap: 3rem; }
#public-picture h2, #public-picture .final { grid-column: 1; }
.public-emblem { grid-column: 2; grid-row: 1 / span 3; position: relative; min-height: 650px; filter: drop-shadow(0 24px 0 rgba(0,0,0,.22)); }
.face-piece { position: absolute; background: var(--bone); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--cyan); }
.brow { left: 12%; top: 6%; width: 70%; height: 23%; clip-path: polygon(0 26%, 36% 0, 100% 14%, 80% 100%, 8% 76%); }
.eye-left { left: 8%; top: 29%; width: 35%; height: 26%; background: var(--cyan); clip-path: polygon(10% 0, 100% 22%, 72% 100%, 0 84%); }
.eye-right { left: 50%; top: 28%; width: 37%; height: 28%; background: var(--violet); clip-path: polygon(0 19%, 78% 0, 100% 80%, 22% 100%); }
.cheek { left: 18%; top: 55%; width: 48%; height: 28%; background: var(--blue); clip-path: polygon(0 0, 82% 9%, 100% 84%, 16% 100%); }
.mouth { left: 42%; top: 76%; width: 44%; height: 15%; background: var(--brass); clip-path: polygon(0 20%, 100% 0, 82% 100%, 8% 84%); }
.gap { position: absolute; display: grid; place-items: center; color: var(--red); border: 2px dashed var(--red); font-family: var(--label); font-size: 4rem; }
.gap-one { left: 67%; top: 57%; width: 23%; height: 17%; transform: rotate(8deg); }
.gap-two { left: 11%; top: 84%; width: 24%; height: 10%; transform: rotate(-11deg); }
.closing-marginalia { position: absolute; left: 12vw; bottom: 10vh; color: var(--brass); }

@media (max-width: 850px) {
    .puzzle-tabs { left: 0; right: 0; top: 0; transform: none; flex-direction: row; overflow-x: auto; background: rgba(16,19,28,.86); padding: .65rem; }
    .chamber { padding: 6rem 1.2rem 3rem; }
    .domain-assembly, .hero-label { position: relative; left: auto; top: auto; margin: 2rem 0; }
    .mandate-scatter { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
    .loose-piece { position: relative; left: auto; top: auto; width: auto; }
    #public-picture { display: block; }
    .public-emblem { min-height: 520px; margin-top: 2rem; }
}