:root {
  --dawn-paper: #F5E6C8;
  --ballot-black: #17110D;
  --municipal-blue: #234E70;
  --campaign-vermilion: #D83A2E;
  --highlighter-yellow: #F2C84B;
  --oxidized-green: #3E6B4F;
  --dusk-purple: #4B315F;
  --archive-ink-gray: #6E655D;
  --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ballot-black);
  background: var(--dawn-paper);
  font-family: "Chivo", sans-serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .22;
  background:
    radial-gradient(circle at 10% 20%, var(--ballot-black) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 80% 30%, var(--archive-ink-gray) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(100deg, transparent 0 8px, rgba(23,17,13,.08) 9px, transparent 10px 20px);
  mix-blend-mode: multiply;
}

.plaza-nav {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  gap: 6px;
  transform: rotate(1.5deg);
}

.plaza-nav a {
  color: var(--dawn-paper);
  background: var(--ballot-black);
  border: 2px solid var(--ballot-black);
  padding: 7px 12px;
  text-decoration: none;
  text-transform: uppercase;
  font: 700 18px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .05em;
  box-shadow: 3px 3px 0 var(--campaign-vermilion);
}

.plaza-nav a.active { background: var(--highlighter-yellow); color: var(--ballot-black); }

.ballot-clock {
  position: fixed;
  left: clamp(14px, 3vw, 42px);
  bottom: clamp(12px, 4vw, 42px);
  width: clamp(150px, 18vw, 245px);
  aspect-ratio: 1;
  border: 5px solid var(--ballot-black);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(242,200,75,.9) 19% 21%, transparent 22%),
    repeating-conic-gradient(from -8deg, rgba(23,17,13,.28) 0 2deg, transparent 2deg 30deg),
    var(--dawn-paper);
  z-index: 45;
  box-shadow: 13px 15px 0 rgba(23,17,13,.24);
  transition: background .4s;
}

.clock-label {
  position: absolute;
  inset: 17% auto auto 16%;
  font: 900 20px/0.86 "Barlow Condensed", sans-serif;
  color: var(--municipal-blue);
  transform: rotate(-12deg);
}

.clock-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 50%;
  border-radius: 99px;
}

.pencil-hand {
  width: 42%;
  height: 9px;
  background: linear-gradient(90deg, var(--highlighter-yellow) 0 72%, var(--ballot-black) 73% 84%, var(--campaign-vermilion) 85%);
  transform: rotate(calc(-60deg + (var(--progress) * 250deg)));
}

.mic-hand {
  width: 33%;
  height: 15px;
  background: var(--municipal-blue);
  transform: rotate(calc(18deg + (var(--progress) * 190deg)));
}

.mic-hand::after {
  content: "";
  position: absolute;
  right: -17px;
  top: -7px;
  width: 24px;
  height: 28px;
  border-radius: 50%;
  background: var(--ballot-black);
  box-shadow: inset 5px 0 0 var(--archive-ink-gray);
}

.clock-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 11px;
  background: rgba(23,17,13,.26);
  transform-origin: 0 50%;
  transform: rotate(calc(35deg + (var(--progress) * 145deg))) scaleX(calc(1.1 + var(--progress)));
  filter: blur(2px);
}

.clock-pin {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  background: var(--campaign-vermilion);
  border: 3px solid var(--ballot-black);
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) clamp(22px, 6vw, 92px);
  isolation: isolate;
}

.scene::before {
  content: attr(data-hour);
  position: absolute;
  right: 4vw;
  bottom: 3vw;
  font: 900 clamp(54px, 13vw, 190px)/.8 "Barlow Condensed", sans-serif;
  color: rgba(23,17,13,.08);
  z-index: -1;
}

h1, h2 { font-family: "Newsreader", serif; margin: 0; letter-spacing: -.055em; }

h1 {
  font-size: clamp(82px, 18vw, 250px);
  line-height: .73;
  max-width: 900px;
  transform: rotate(-5deg);
  text-shadow: 7px 7px 0 var(--highlighter-yellow), 13px 13px 0 var(--campaign-vermilion);
}

h2 { font-size: clamp(58px, 10vw, 150px); line-height: .82; }

p { font-size: clamp(17px, 2vw, 24px); line-height: 1.42; }

.barcode { font-family: "Libre Barcode 39 Text", system-ui; font-size: clamp(24px, 4vw, 52px); margin: 0 0 10px; }

.dawn { background: var(--dawn-paper); }
.sun-disc {
  position: absolute;
  left: -70px;
  bottom: -90px;
  width: clamp(260px, 42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--highlighter-yellow) 0 48%, transparent 49%), repeating-radial-gradient(circle, rgba(216,58,46,.3) 0 3px, transparent 4px 10px);
  animation: pulseInk 5s ease-in-out infinite;
}

.masthead-wrap { position: relative; z-index: 2; margin-left: 8vw; }
.masthead-rule { width: min(760px, 72vw); height: 12px; background: var(--ballot-black); margin-top: 22px; transform: rotate(-2deg); }

.agenda-fragments { position: absolute; right: 8vw; top: 30vh; display: grid; gap: 12px; }
.agenda-fragments span, .notice, .broadsheet, .amendment-board, .count-window, .archive-desk {
  background: rgba(245,230,200,.92);
  border: 3px solid var(--ballot-black);
  box-shadow: 10px 10px 0 rgba(23,17,13,.18);
}
.agenda-fragments span { padding: 10px 16px; font: 700 22px "Barlow Condensed"; text-transform: uppercase; transform: translateX(80px) rotate(var(--r, -3deg)); opacity: .2; transition: .8s; }
.agenda-fragments span.aligned { transform: translateX(0) rotate(var(--r, -3deg)); opacity: 1; }
.agenda-fragments span:nth-child(2) { --r: 2deg; }
.agenda-fragments span:nth-child(3) { --r: -7deg; }
.agenda-fragments span:nth-child(4) { --r: 4deg; }

.notice { max-width: 430px; padding: 28px; position: absolute; left: 10vw; bottom: 8vh; }
.tilted { transform: rotate(3deg); }
.crosswalk { position: absolute; right: -4vw; bottom: 12vh; width: 38vw; height: 180px; background: repeating-linear-gradient(90deg, var(--municipal-blue) 0 32px, transparent 32px 58px); transform: rotate(-18deg); opacity: .8; }

.morning { background: linear-gradient(115deg, var(--dawn-paper) 0 44%, var(--oxidized-green) 45%); }
.chapter-label { font: 900 clamp(24px, 4vw, 58px)/1 "Barlow Condensed"; letter-spacing: .08em; text-transform: uppercase; color: var(--campaign-vermilion); }
.strip-left { width: min(560px, 90vw); padding: 30px; transform: rotate(-3deg); column-count: 2; column-gap: 24px; }
.strip-left h2 { column-span: all; color: var(--municipal-blue); }
.ballot-flutter { position: absolute; right: 7vw; top: 18vh; display: flex; flex-wrap: wrap; width: min(520px, 58vw); gap: 16px; perspective: 900px; }
.ballot-flutter div { width: 150px; height: 92px; padding: 12px; background: var(--dawn-paper); border: 2px dashed var(--ballot-black); font: 800 24px/1 "Barlow Condensed"; transform-origin: top; animation: flipBallot 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .18s); }
.ballot-flutter div:nth-child(2) { --i: 1; } .ballot-flutter div:nth-child(3) { --i: 2; } .ballot-flutter div:nth-child(4) { --i: 3; } .ballot-flutter div:nth-child(5) { --i: 4; }
.map-fragment { position: absolute; right: 10vw; bottom: 8vh; width: 390px; max-width: 80vw; height: 250px; border: 4px solid var(--ballot-black); background: linear-gradient(90deg, transparent 49%, var(--ballot-black) 50% 51%, transparent 52%), linear-gradient(0deg, transparent 49%, var(--ballot-black) 50% 51%, transparent 52%), var(--highlighter-yellow); transform: rotate(5deg); }
.map-fragment span { position: absolute; font: 700 20px "Barlow Condensed"; text-transform: uppercase; } .map-fragment span:nth-child(1){left:22px;top:18px}.map-fragment span:nth-child(2){right:28px;top:60px}.map-fragment span:nth-child(3){left:48px;bottom:38px}.map-fragment span:nth-child(4){right:32px;bottom:22px}
.placard { display:inline-block; margin-top: 9vh; padding: 16px 24px; background: var(--campaign-vermilion); color: var(--dawn-paper); border: 4px solid var(--ballot-black); font-family: "Barlow Condensed"; font-weight: 900; }
.bob { animation: placardBob 2.3s ease-in-out infinite; }

.noon { background: var(--highlighter-yellow); }
.vertical { position:absolute; left: 20px; top: 16vh; writing-mode: vertical-rl; color: var(--municipal-blue); }
.debate-circle { position:absolute; right: 7vw; top: 12vh; width: min(520px, 58vw); aspect-ratio: 1; border: 5px solid var(--ballot-black); border-radius: 50%; background: radial-gradient(circle, transparent 0 45%, rgba(216,58,46,.15) 46%); }
.debate-circle span { position:absolute; width: 58px; height: 38px; background: var(--municipal-blue); border: 3px solid var(--ballot-black); transform: translate(-50%, -50%); }
.debate-circle span:nth-child(1){left:50%;top:2%}.debate-circle span:nth-child(2){left:89%;top:27%}.debate-circle span:nth-child(3){left:82%;top:75%}.debate-circle span:nth-child(4){left:50%;top:98%}.debate-circle span:nth-child(5){left:13%;top:75%}.debate-circle span:nth-child(6){left:10%;top:27%}
.debate-columns { position: relative; width: min(650px, 78vw); padding: 34px; column-count: 2; column-rule: 4px solid var(--campaign-vermilion); transform: rotate(2deg); z-index:2; }
.debate-columns h2, .debate-columns blockquote { column-span: all; }
.debate-columns blockquote { margin: 18px 0 0; font: 800 clamp(28px, 4vw, 58px)/.95 "Newsreader"; color: var(--campaign-vermilion); }
.route-line { position:absolute; inset: auto 4vw 6vh auto; width: 68vw; max-width: 900px; height: 320px; fill:none; stroke: var(--ballot-black); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.route-line.drawn { animation: drawRoute 2s ease forwards; }
.headline-weather { position:absolute; bottom: 4vh; left: 8vw; max-width: 860px; text-transform: uppercase; font: 900 32px "Barlow Condensed"; }

.afternoon { background: var(--municipal-blue); color: var(--dawn-paper); }
.amendment-board { color: var(--ballot-black); padding: 32px; width: min(720px, 88vw); transform: rotate(-2deg); }
.ribbons { display:grid; gap: 14px; width: min(700px, 88vw); margin: 32px 0 0 10vw; }
.ribbons span { padding: 14px 26px; background: var(--highlighter-yellow); color: var(--ballot-black); border: 3px solid var(--ballot-black); font: 800 28px "Barlow Condensed"; text-transform: uppercase; transform: rotate(var(--r, 1deg)); }
.ribbons span:nth-child(2){--r:-2deg}.ribbons span:nth-child(3){--r:3deg}.ribbons span:nth-child(4){--r:-4deg}
.stamp-button { margin: 34px 0 0 16vw; border: 4px solid var(--ballot-black); background: var(--campaign-vermilion); color: var(--dawn-paper); padding: 18px 26px; font: 900 34px "Barlow Condensed"; text-transform: uppercase; box-shadow: 8px 8px 0 var(--ballot-black); cursor: pointer; transform: rotate(2deg); }
.stamp-field { position:absolute; right: 10vw; bottom: 12vh; width: 360px; max-width: 75vw; min-height: 220px; }
.stamp-mark { position:absolute; border: 8px solid var(--campaign-vermilion); color: var(--campaign-vermilion); padding: 14px 20px; font: 900 38px "Barlow Condensed"; text-transform: uppercase; transform: rotate(var(--rot)) scale(.3); opacity: 0; animation: stampSpread .55s ease forwards; filter: url(#none); }
.poster-stack { position:absolute; right: 6vw; top: 12vh; display:grid; gap: 0; transform: rotate(7deg); }
.poster-stack b { display:block; background: var(--dawn-paper); color: var(--ballot-black); border: 3px solid var(--ballot-black); padding: 18px 36px; font: 900 48px "Barlow Condensed"; margin-top: -10px; }

.dusk { background: linear-gradient(135deg, var(--dusk-purple), var(--municipal-blue)); color: var(--dawn-paper); }
.count-window { color: var(--ballot-black); width: min(620px, 88vw); padding: 34px; background: rgba(245,230,200,.82); backdrop-filter: blur(3px); }
.queue-line { position:absolute; left: 8vw; bottom: 15vh; width: 78vw; height: 80px; border-bottom: 7px solid var(--highlighter-yellow); }
.queue-line span { position:relative; display:inline-block; width: 34px; height: 64px; margin-right: clamp(18px, 6vw, 92px); background: var(--ballot-black); border-radius: 30px 30px 8px 8px; animation: queueSway 2s ease-in-out infinite; }
.tally-wall { position:absolute; right: 8vw; top: 20vh; width: min(430px, 72vw); min-height: 320px; padding: 24px; background: rgba(23,17,13,.32); border: 3px solid var(--dawn-paper); font: 900 44px/1.2 "Barlow Condensed"; letter-spacing: .15em; }
.count-strip { position:absolute; right: 4vw; bottom: 4vh; background: var(--ballot-black); color: var(--dawn-paper); padding: 10px 18px; font-family: "Barlow Condensed"; text-transform: uppercase; }

.midnight { background: var(--ballot-black); color: var(--dawn-paper); }
.archive-lamp { position:absolute; right: 0; top: 0; width: 52vw; height: 52vw; background: radial-gradient(circle at 70% 10%, rgba(242,200,75,.38), transparent 55%); }
.archive-desk { position:relative; width:min(760px, 90vw); padding: 38px; color: var(--ballot-black); background: var(--dawn-paper); transform: rotate(1deg); }
.archive-note { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--archive-ink-gray); }
.archive-labels { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 42px; max-width: 760px; }
.archive-labels span { padding: 12px 18px; border: 2px solid var(--dawn-paper); color: var(--dawn-paper); font: 700 22px "Barlow Condensed"; text-transform: uppercase; }
.final-whisper { position:absolute; right: 7vw; bottom: 8vh; max-width: 520px; color: var(--highlighter-yellow); font-family: "Newsreader"; font-size: clamp(34px, 5vw, 82px); line-height: .95; }

@keyframes pulseInk { 50% { transform: scale(1.04); filter: saturate(1.25); } }
@keyframes flipBallot { 0%,100% { transform: rotateX(0) rotate(-2deg); } 50% { transform: rotateX(32deg) rotate(3deg); } }
@keyframes placardBob { 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
@keyframes stampSpread { to { opacity: .88; transform: rotate(var(--rot)) scale(1); filter: blur(.2px); } }
@keyframes queueSway { 50% { transform: translateY(-7px); } }

@media (max-width: 760px) {
  .plaza-nav { left: 10px; right: 10px; overflow-x: auto; }
  .ballot-clock { opacity: .82; transform: scale(.76); transform-origin: bottom left; }
  .agenda-fragments, .poster-stack, .tally-wall { position: relative; inset: auto; margin-top: 28px; }
  .notice, .stamp-field, .final-whisper { position: relative; inset: auto; margin-top: 28px; }
  .strip-left, .debate-columns { column-count: 1; }
  .debate-circle { opacity: .26; right: -30vw; }
  .route-line { width: 100vw; }
}