:root {
  --ballot-cotton: #F2E9D8;
  --ink-chamber-navy: #17223B;
  --seal-vermilion: #C93D2B;
  --precinct-green: #3F6B4F;
  --ledger-violet: #67507A;
  --brass-lamp: #C9A646;
  --carbon-smudge: #2A2522;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-chamber-navy);
  font-family: "Newsreader", serif;
  background:
    radial-gradient(circle at 78% 12%, rgba(201,166,70,.26), transparent 28rem),
    radial-gradient(circle at 8% 0%, rgba(103,80,122,.25), transparent 24rem),
    linear-gradient(145deg, #17223B 0%, #2A2522 48%, #17223B 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    repeating-linear-gradient(92deg, rgba(242,233,216,.025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(42,37,34,.12) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
  z-index: 5;
}

.binder-tabs {
  position: fixed;
  left: 0;
  top: 12vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: "Public Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .67rem;
}

.binder-tab {
  color: var(--ballot-cotton);
  text-decoration: none;
  background: rgba(23,34,59,.82);
  border: 1px solid rgba(201,166,70,.45);
  border-left: 0;
  padding: .85rem .6rem .85rem 1rem;
  width: 8.8rem;
  transform: translateX(-5.7rem);
  transition: transform .45s ease, background .45s ease, color .45s ease;
  box-shadow: 0 .5rem 1.6rem rgba(0,0,0,.22);
}

.binder-tab:hover,
.binder-tab.active {
  transform: translateX(0);
  background: var(--ballot-cotton);
  color: var(--ink-chamber-navy);
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 7vw 8vw 7vw 11vw;
  isolation: isolate;
}

.scene::after {
  content: attr(data-scene);
  position: absolute;
  right: 2vw;
  bottom: 1.2vw;
  font-family: "Public Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .42em;
  color: rgba(242,233,216,.24);
  font-size: .75rem;
}

h1, h2 {
  font-family: "Libre Baskerville", serif;
  margin: 0;
  line-height: .95;
  color: var(--ink-chamber-navy);
}

h1 { font-size: clamp(4rem, 12vw, 11rem); letter-spacing: -.08em; }
h2 { font-size: clamp(2.6rem, 6.5vw, 6.8rem); letter-spacing: -.055em; }

p { font-size: clamp(1.08rem, 1.7vw, 1.65rem); line-height: 1.45; }

.archive-table {
  min-height: 84vh;
  position: relative;
  display: grid;
  place-items: center;
}

.lamp-glow {
  position: absolute;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,166,70,.56), rgba(201,166,70,.18) 38%, transparent 70%);
  filter: blur(2px);
  transform: translate(15vw, -16vh);
  animation: lampBreath 8s ease-in-out infinite;
}

.cotton-ballot,
.ballot-article,
.dispute-sheet,
.unfinished-article,
.lantern-card,
.map-table-panel {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 36%),
    repeating-linear-gradient(0deg, rgba(42,37,34,.035) 0 1px, transparent 1px 11px),
    var(--ballot-cotton);
  box-shadow: 0 2.4rem 5rem rgba(0,0,0,.38), inset 0 0 0 1px rgba(42,37,34,.14);
}

.hero-ballot {
  position: relative;
  width: min(82vw, 74rem);
  min-height: 60vh;
  padding: clamp(2rem, 6vw, 6rem);
  transform: rotate(-3deg);
  clip-path: polygon(0 0, 88% 0, 100% 18%, 100% 100%, 0 100%);
}

.fold-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(132deg, transparent 0 55%, rgba(42,37,34,.18) 55.2%, transparent 56%);
  pointer-events: none;
}

.metadata,
.chapter,
.map-ledger,
.article-tabs,
.revision-strip,
.ritual-button,
.roll-ledger,
.citation-card,
.loose-note,
.amendment-ribbon {
  font-family: "Public Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .76rem;
}

.metadata { color: var(--precinct-green); }
.quiet-line { max-width: 38rem; color: var(--carbon-smudge); font-size: clamp(1.3rem, 2.4vw, 2.6rem); }

.ranked-ovals { display: flex; gap: 1.1rem; margin-top: 5vh; opacity: .5; }
.ranked-ovals span,
.waiting-ovals i {
  display: block;
  width: 5rem;
  height: 2.1rem;
  border: 2px solid rgba(23,34,59,.42);
  border-radius: 50%;
}

.stamp-seal {
  position: absolute;
  right: 7vw;
  bottom: 8vh;
  width: 8.3rem;
  height: 8.3rem;
  border: .45rem double var(--seal-vermilion);
  color: var(--seal-vermilion);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Public Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  transform: rotate(13deg) scale(.86);
  opacity: .72;
  transition: transform .25s ease, filter .4s ease, opacity .4s ease;
}

.stamp-seal.impressed { transform: rotate(13deg) scale(1.05); opacity: .95; filter: saturate(1.5); }

.loose-note {
  position: absolute;
  background: rgba(103,80,122,.84);
  color: var(--ballot-cotton);
  padding: 1rem 1.2rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.28);
}
.note-one { left: 14vw; top: 13vh; transform: rotate(7deg); }
.note-two { right: 10vw; bottom: 14vh; transform: rotate(-8deg); background: rgba(63,107,79,.9); }

.scene-title-block { width: min(44rem, 86vw); color: var(--ballot-cotton); z-index: 2; }
.scene-title-block h2, .scene-title-block p { color: var(--ballot-cotton); }
.chapter { color: var(--brass-lamp); }

.precinct-map-table {
  grid-template-columns: .75fr 1.25fr;
  gap: 4vw;
  background: linear-gradient(110deg, rgba(23,34,59,.92), rgba(42,37,34,.82));
}

.map-table-panel {
  position: relative;
  min-height: 70vh;
  padding: 2vw;
  transform: rotate(2deg);
  overflow: hidden;
}

.precinct-map { width: 100%; height: 58vh; }
.map-boundary { fill: rgba(63,107,79,.12); stroke: var(--precinct-green); stroke-width: 5; }
.map-seam { fill: none; stroke: rgba(103,80,122,.72); stroke-width: 3; stroke-dasharray: 10 12; }
.source-thread { fill: none; stroke: var(--brass-lamp); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s ease; }
.source-thread.drawn { stroke-dashoffset: 0; }
.map-pins circle { fill: var(--seal-vermilion); stroke: var(--ballot-cotton); stroke-width: 4; }

.citation-card {
  position: absolute;
  background: var(--ballot-cotton);
  border-left: .35rem solid var(--precinct-green);
  padding: 1rem;
  color: var(--carbon-smudge);
}
.card-a { left: 4vw; bottom: 10vh; }
.card-b { right: 4vw; top: 8vh; border-color: var(--brass-lamp); }
.map-ledger { color: var(--ledger-violet); border-top: 1px solid rgba(42,37,34,.2); padding-top: 1rem; }

.article-under-revision { grid-template-columns: 1fr .38fr; gap: 3vw; background: var(--carbon-smudge); }
.ballot-article { position: relative; padding: 5vw; transform: rotate(-1.5deg); min-height: 72vh; }
.article-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; }
.article-tabs span { background: rgba(23,34,59,.1); padding: .65rem 1rem; }
.article-tabs .selected { background: var(--seal-vermilion); color: var(--ballot-cotton); }
.lede { font-size: clamp(1.5rem, 2.8vw, 3rem); color: var(--carbon-smudge); }
mark { background: rgba(103,80,122,.25); color: var(--ledger-violet); }
.revision-strip { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0; }
.revision-strip span { border: 1px solid var(--precinct-green); color: var(--precinct-green); padding: .6rem .9rem; }
.redaction-block { position: relative; overflow: hidden; border: 1px solid rgba(42,37,34,.18); padding: 1.2rem; }
.redaction-bar { position: absolute; inset: 1rem; background: var(--carbon-smudge); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
.redaction-block.revealed .redaction-bar { transform: translateX(105%) scaleX(.04); }

.margin-debate {
  position: relative;
  background: rgba(103,80,122,.9);
  color: var(--ballot-cotton);
  padding: 2rem;
  align-self: start;
  margin-top: 14vh;
  transform: rotate(4deg);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.28);
}
.margin-debate p, .margin-debate span { font-family: "Public Sans", sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; display: block; }
.margin-debate strong { font-family: "Newsreader", serif; font-size: 2rem; }
.paperclip { position: absolute; width: 2rem; height: 4rem; border: .25rem solid var(--brass-lamp); border-radius: 1rem; right: 2rem; top: -1.5rem; }

.tally-lantern { background: radial-gradient(circle at 54% 26%, rgba(201,166,70,.35), transparent 32rem), var(--ink-chamber-navy); place-items: center; }
.lantern-card { width: min(62rem, 86vw); min-height: 70vh; padding: 5vw; text-align: center; position: relative; overflow: hidden; }
.lantern { margin: 0 auto 2rem; width: 9rem; height: 12rem; border-radius: 45% 45% 15% 15%; background: radial-gradient(circle, var(--brass-lamp), rgba(201,166,70,.15)); border: 3px solid var(--carbon-smudge); box-shadow: 0 0 4rem rgba(201,166,70,.7); }
.tally-bundles { font-family: "Noto Sans Symbols 2", "Public Sans", sans-serif; font-size: clamp(3rem, 8vw, 8rem); letter-spacing: .16em; color: var(--carbon-smudge); }
.tally-bundles span { display: inline-block; transition: transform .8s ease, color .8s ease; }
.tally-bundles.tight span { transform: skewX(-11deg) translateY(-.2rem); color: var(--seal-vermilion); }
.ritual-button { border: 0; background: var(--seal-vermilion); color: var(--ballot-cotton); padding: 1rem 1.4rem; cursor: pointer; }

.dispute-margins { background: linear-gradient(170deg, var(--ballot-cotton), #d9cfbd); }
.dispute-sheet { margin-left: auto; width: min(72rem, 88vw); padding: 5vw 7vw; transform: rotate(1.2deg); position: relative; }
.procedural-note { max-width: 42rem; }
.objection-stack { display: grid; gap: 1rem; width: min(30rem, 100%); margin-left: auto; }
.objection { opacity: .25; transform: translateX(3rem); transition: opacity .7s ease, transform .7s ease; border-left: .4rem solid var(--seal-vermilion); padding: 1rem; background: rgba(201,166,70,.16); font-family: "Public Sans", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.objection.visible { opacity: 1; transform: translateX(0); }
.amendment-ribbon { position: absolute; left: -4vw; bottom: 15vh; background: rgba(103,80,122,.86); color: var(--ballot-cotton); padding: 1.2rem 8vw; transform: rotate(-8deg); }

.open-roll-call { background: var(--carbon-smudge); }
.unfinished-article { width: min(84rem, 90vw); margin: auto; min-height: 78vh; padding: 6vw; clip-path: polygon(0 0, 94% 0, 100% 8%, 100% 100%, 0 100%); }
.roll-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 3rem 0; color: var(--precinct-green); }
.roll-ledger span { border-bottom: 1px solid rgba(42,37,34,.18); padding-bottom: .8rem; }
.waiting-ovals { display: flex; gap: 1rem; flex-wrap: wrap; }
.waiting-ovals i:nth-child(odd) { border-color: var(--brass-lamp); box-shadow: inset 0 0 1.5rem rgba(201,166,70,.16); }

.foldable { transition: transform .9s cubic-bezier(.2,.9,.18,1), clip-path .9s cubic-bezier(.2,.9,.18,1); }
.foldable.opened { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: rotate(0deg) scale(1.015); }

@keyframes lampBreath { 0%, 100% { opacity: .72; transform: translate(15vw, -16vh) scale(.96); } 50% { opacity: 1; transform: translate(15vw, -16vh) scale(1.04); } }

@media (max-width: 800px) {
  .scene { padding: 6rem 5vw; }
  .binder-tabs { top: auto; bottom: 0; left: 0; right: 0; flex-direction: row; overflow-x: auto; }
  .binder-tab { transform: none; min-width: 8rem; width: auto; border-left: 1px solid rgba(201,166,70,.45); }
  .precinct-map-table, .article-under-revision { grid-template-columns: 1fr; }
  .hero-ballot { width: 92vw; }
  .roll-ledger { grid-template-columns: 1fr; }
}