a[data-link][hidden]{display:none!important}
@font-face { font-family: 'Shrikhand'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Shrikhand-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/SpaceGrotesk-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/SpaceGrotesk-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Kaushan Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/KaushanScript-normal-400.woff2') format('woff2'); }

/* ============ Gavel Drop · the after-party street ============ */
:root {
  --tar: #0b0e11;
  --tar-deep: #07090b;
  --tar-2: #12171c;
  --cyan: #5fe6ff;
  --cyan-glow: rgba(95, 230, 255, .45);
  --cyan-soft: rgba(95, 230, 255, .16);
  --paper: #cfe6ff;
  --paper-shade: #7fa9d8;
  --walnut: #aa4f18;
  --walnut-hi: #e98549;
  --marker: #f3c14b;
  --ink: #f6eeea;
  --ink-soft: #cbbcb4;
  --night: #18100c;
  --deep: #392518;
  --buy: #e98549;
  --f-display: "Shrikhand", Georgia, serif;
  --f-body: "Space Grotesk", system-ui, sans-serif;
  --f-hand: "Kaushan Script", cursive;
  --gap: 14px;
  --r: 4px;
  --edge: inset 0 0 0 1px rgba(95, 230, 255, .55), 0 0 0 1px rgba(95, 230, 255, .12), 0 0 24px rgba(95, 230, 255, .14);
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.rm { scroll-behavior: auto; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  background-color: var(--tar);
  /* asphalt aggregate: crushed stone set in tar */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23ffffff'%3E%3Cpath fill-opacity='.06' d='M12 18l5-3 4 4-3 5-6-1zM70 9l6 1 1 5-5 2-3-4zM140 30l4-4 6 2-1 6-6 1zM40 66l5-2 3 5-4 4-5-2zM110 80l7-1 2 5-5 4-5-3zM160 110l4-3 5 3-2 5-5 0zM22 130l6-2 3 5-5 3-4-2zM90 150l5-4 5 3-1 6-6 0zM150 165l4-2 4 3-3 4-5-1z'/%3E%3Cpath fill-opacity='.04' d='M55 30l3-2 3 3-2 3-4-1zM125 52l3-3 4 2-1 4-4 0zM8 92l4-1 2 3-3 3-3-2zM75 112l3-2 3 2-2 4-3-1zM130 135l3-1 2 3-3 2-3-2zM45 170l3-2 3 2-2 3-3-1z'/%3E%3Cpath fill-opacity='.09' d='M32 44l2-1 2 2-2 2-2-1zM98 40l2-1 1 2-2 2-2-1zM170 70l2-1 2 2-2 1-2-1zM62 96l2-1 2 2-2 2-2-1zM12 160l2-1 2 2-2 2-2-1zM118 172l2-1 2 2-2 1-2-1z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--tar) 0%, var(--tar-2) 50%, var(--tar-deep) 100%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font: 400 clamp(36px, 5.4vw, 76px)/.98 var(--f-display); color: var(--ink); text-shadow: 0 0 18px rgba(95, 230, 255, .25); }
h2 em, h1 em { font-style: normal; color: var(--walnut-hi); text-shadow: 0 0 14px rgba(233, 133, 73, .55), 0 0 2px rgba(255, 210, 170, .8); }
.label { margin: 0 0 14px; font: 600 12px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.note { margin: 10px 0 0; font: 400 22px/1.2 var(--f-hand); color: var(--marker); transform: rotate(-2deg); }

/* ---------- buttons ---------- */
.buy, .ghost, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border-radius: 999px; cursor: pointer;
  font: 700 14px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s, background-color .25s, color .25s;
}
.buy { background: var(--buy); color: var(--night); border: 0; box-shadow: 0 0 0 1px #ffd1b2 inset, 0 0 26px rgba(233, 133, 73, .55); }
.buy:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #ffe2cc inset, 0 0 40px rgba(233, 133, 73, .85); }
.buy:active { transform: translateY(1px) scale(.98); }
.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(95, 230, 255, .5); }
.ghost:hover { color: var(--cyan); box-shadow: 0 0 18px var(--cyan-soft), inset 0 0 12px var(--cyan-soft); transform: translateY(-2px); }
.ghost:active { transform: scale(.97); }
.chip { min-height: 38px; padding: 0 14px; background: #f6eeea; color: var(--night); border: 0; }
.chip img { width: 16px; height: 16px; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 0 16px var(--cyan-glow); }
.buy--sm { min-height: 38px; padding: 0 16px; font-size: 12px; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 60px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  transition: background-color .3s, backdrop-filter .3s, transform .35s;
}
html.is-scrolled .top { background: rgba(11, 14, 17, .78); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 1px 0 rgba(95, 230, 255, .2); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 36px; height: 36px; border-radius: 6px; box-shadow: var(--edge); }
.brand__name { font: 400 21px/1 var(--f-display); color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); white-space: nowrap; }
.brand.is-buzz .brand__name, .closed.is-buzz { opacity: .35; text-shadow: none; }
#burger { order: 3; width: 44px; height: 44px; border: 1px solid rgba(95, 230, 255, .45); border-radius: 50%; background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }
#burger span:not(.sr) { width: 18px; height: 2px; background: var(--cyan); display: block; transition: transform .3s; }
#burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
#burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
#nav {
  position: fixed; top: 68px; left: 12px; right: 12px; padding: 14px;
  display: none; flex-direction: column; gap: 4px;
  background: rgba(14, 19, 24, .96); border-radius: 10px; box-shadow: var(--edge), 0 20px 40px rgba(0, 0, 0, .6);
}
#nav.is-open { display: flex; }
#nav a { display: block; padding: 12px; color: var(--ink); text-decoration: none; font: 600 14px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid #1d252c; transition: color .2s, border-color .2s; }
#nav a b { color: var(--cyan); font-weight: 600; margin-right: 6px; font-size: 11px; }
#nav a:hover, #nav a.is-active { color: var(--cyan); border-color: var(--cyan); }
.top__end { display: flex; align-items: center; gap: 8px; }
.top__end .chip--x, #motion { display: none; }
#motion { min-height: 38px; padding: 0 14px; font-size: 11px; }
@media (max-width: 439px) { .brand__name { display: none; } }
.buy--sm { white-space: nowrap; }

/* the slot where copied ballots are cast */
.vote-slot { position: relative; width: 44px; height: 14px; border-radius: 3px; background: #05070a; box-shadow: var(--edge); display: block; }
.vote-slot__lips { position: absolute; inset: 5px 6px; background: #000; border-radius: 2px; box-shadow: 0 0 6px var(--cyan) inset; transition: transform .2s; }
.vote-slot__sign { position: absolute; top: 20px; right: -8px; font: 400 18px/1 var(--f-display); font-style: normal; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); white-space: nowrap; opacity: 0; pointer-events: none; }
.vote-slot.is-counted .vote-slot__sign { opacity: 1; }
html.js:not(.rm) .vote-slot.is-counted .vote-slot__sign { animation: tally-on 1.6s steps(1) both; }
html.js:not(.rm) .vote-slot.is-swallow .vote-slot__lips { transform: scaleY(1.8); }
@keyframes tally-on { 0% { opacity: 0 } 6% { opacity: 1 } 10% { opacity: .2 } 16% { opacity: 1 } 88% { opacity: 1 } 92% { opacity: .3 } 96% { opacity: 1 } 100% { opacity: 0 } }

/* the ballot that flies from the seal into the slot */
.cast { position: fixed; z-index: 70; left: 0; top: 0; width: 84px; height: 50px; pointer-events: none; perspective: 300px; }
.cast i { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, #dcedff 0 30%, #3d6fb0 30% 48%, #dcedff 48% 62%, #c4524a 62% 78%, #dcedff 78%); box-shadow: 0 0 0 1px #7fa9d8, 0 0 14px rgba(95, 230, 255, .6); }
.cast i:first-child { top: 0; transform-origin: 50% 100%; transition: transform .3s .1s; }
.cast i:last-child { bottom: 0; }
.cast.is-folding i:first-child { transform: rotateX(-178deg); }

/* ---------- altitude gauge ---------- */
.gauge { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.gauge__label, .gauge__zone { display: none; }
.gauge__tube { position: absolute; inset: 0; background: rgba(95, 230, 255, .12); }
.gauge__mark { position: absolute; inset: 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transform-origin: left; transform: scaleX(var(--scroll, 0)); }
.gauge__read { position: absolute; top: 64px; right: 12px; font: 400 15px/1 var(--f-hand); color: var(--marker); }
html.rm .gauge__mark { transform: scaleX(1); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; overflow: clip; padding: 76px 18px 70px; min-height: 100vh; }
.hero__haze { position: absolute; inset: -10% 0 auto; height: 90vh; pointer-events: none; }
.hero__haze i { position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 35%, rgba(95, 230, 255, .2), transparent 70%), radial-gradient(30% 30% at 20% 80%, rgba(233, 133, 73, .12), transparent 70%); }
.hero__inner { position: relative; display: grid; gap: 22px; max-width: 1320px; margin: 0 auto; }
.hero__stage { position: relative; height: 300px; display: flex; justify-content: center; align-items: flex-start; }
.wall-wrap { position: relative; width: 236px; z-index: 1; }
.wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; aspect-ratio: 4 / 5;
  padding: 6px; background: #05070a; border-radius: 8px; box-shadow: var(--edge), 0 30px 60px rgba(0, 0, 0, .6);
  perspective: 900px;
}
.tile { position: relative; display: block; transform-style: preserve-3d; border-radius: 3px; }
.tile b, .tile s { position: absolute; inset: 0; border-radius: 3px; backface-visibility: hidden; text-decoration: none; }
.tile b {
  background: url("../img/coin-700.jpg") no-repeat;
  background-size: 400% 500%;
  background-position: calc(var(--c) * 33.333%) calc(var(--r) * 25%);
  box-shadow: inset 0 0 0 1px rgba(95, 230, 255, .35);
  transition: transform .3s, box-shadow .3s;
}
.tile s { transform: rotateY(180deg); background: #111 url("../img/scene-1.jpg") center / cover; box-shadow: inset 0 0 0 1px rgba(95, 230, 255, .5); }
.tile:nth-child(6n+2) s { background-image: url("../img/scene-2.jpg"); }
.tile:nth-child(6n+3) s { background-image: url("../img/scene-3.jpg"); }
.tile:nth-child(6n+4) s { background-image: url("../img/scene-4.jpg"); }
.tile:nth-child(6n+5) s { background-image: url("../img/scene-5.jpg"); }
.tile:nth-child(6n) s { background-image: url("../img/logo-512.jpg"); }
.tile:nth-child(7) s, .tile:nth-child(14) s { background-image: url("../img/hero-900.jpg"); }
.tile:hover b { transform: translateZ(-14px); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 14px var(--cyan-glow); }
.tile:nth-child(1) { --c: 0; --r: 0; --sx: -42; --sy: -30; --sr: -64; }
.tile:nth-child(2) { --c: 1; --r: 0; --sx: -12; --sy: -40; --sr: 40; }
.tile:nth-child(3) { --c: 2; --r: 0; --sx: 22; --sy: -36; --sr: -22; }
.tile:nth-child(4) { --c: 3; --r: 0; --sx: 40; --sy: -24; --sr: 70; }
.tile:nth-child(5) { --c: 0; --r: 1; --sx: -50; --sy: -6; --sr: 30; }
.tile:nth-child(6) { --c: 1; --r: 1; --sx: -20; --sy: 12; --sr: -48; }
.tile:nth-child(7) { --c: 2; --r: 1; --sx: 30; --sy: -14; --sr: 56; }
.tile:nth-child(8) { --c: 3; --r: 1; --sx: 52; --sy: 4; --sr: -36; }
.tile:nth-child(9) { --c: 0; --r: 2; --sx: -36; --sy: 22; --sr: -70; }
.tile:nth-child(10) { --c: 1; --r: 2; --sx: -8; --sy: 30; --sr: 24; }
.tile:nth-child(11) { --c: 2; --r: 2; --sx: 14; --sy: 26; --sr: -60; }
.tile:nth-child(12) { --c: 3; --r: 2; --sx: 44; --sy: 18; --sr: 44; }
.tile:nth-child(13) { --c: 0; --r: 3; --sx: -46; --sy: 36; --sr: 52; }
.tile:nth-child(14) { --c: 1; --r: 3; --sx: -26; --sy: 44; --sr: -28; }
.tile:nth-child(15) { --c: 2; --r: 3; --sx: 26; --sy: 40; --sr: 66; }
.tile:nth-child(16) { --c: 3; --r: 3; --sx: 48; --sy: 32; --sr: -54; }
.tile:nth-child(17) { --c: 0; --r: 4; --sx: -30; --sy: 50; --sr: -40; }
.tile:nth-child(18) { --c: 1; --r: 4; --sx: -4; --sy: 56; --sr: 62; }
.tile:nth-child(19) { --c: 2; --r: 4; --sx: 18; --sy: 52; --sr: -66; }
.tile:nth-child(20) { --c: 3; --r: 4; --sx: 38; --sy: 46; --sr: 34; }

.faller { position: absolute; z-index: 3; left: 50%; top: 0; width: 196px; margin-left: -10px; pointer-events: none; }
.faller__body { position: relative; transform-origin: 50% 100%; transform: rotate(-8deg); }
.edgelit { width: 100%; }
.edgelit--tube {
  position: absolute; inset: 0; transform: scale(1.025);
  filter: brightness(0) drop-shadow(0 0 1.5px var(--cyan)) drop-shadow(0 0 1.5px var(--cyan)) drop-shadow(0 0 12px var(--cyan));
}
html.js:not(.rm) .edgelit--tube { animation: buzz-edge 3.7s steps(1) infinite; }
@keyframes buzz-edge { 0%, 61%, 66%, 100% { opacity: 1 } 62% { opacity: .86 } 64% { opacity: .9 } 88% { opacity: .93 } }
.edgelit:not(.edgelit--tube) { position: relative; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }

.puddle { position: absolute; left: 4%; right: 4%; bottom: -54px; height: 70px; pointer-events: none; clip-path: polygon(6% 30%, 22% 8%, 48% 14%, 70% 2%, 92% 20%, 98% 60%, 80% 92%, 50% 84%, 24% 100%, 2% 70%); }
.puddle i { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 30%, rgba(95, 230, 255, .32), rgba(95, 230, 255, .04) 70%, transparent), linear-gradient(180deg, rgba(233, 133, 73, .14), transparent); filter: blur(3px); transform-origin: 50% 0; }
html.js:not(.rm) .puddle i { animation: puddle-wobble 6s ease-in-out infinite alternate; }
@keyframes puddle-wobble { from { transform: scaleX(1) skewX(0); filter: blur(3px); } to { transform: scaleX(1.04) skewX(-3deg); filter: blur(5px); } }

.hero__copy { position: relative; z-index: 4; }
h1 { font: 400 36px/1.02 var(--f-display); letter-spacing: -.005em; }
h1 .l1 { display: block; color: var(--ink); text-shadow: 0 0 2px rgba(255, 255, 255, .6), 0 0 18px rgba(95, 230, 255, .55); }
h1 .l2 { display: block; margin-top: 6px; }
.note--hero { display: flex; align-items: flex-end; gap: 4px; font-size: 21px; margin: 2px 0 14px 30px; }
.note svg path { fill: none; stroke: var(--marker); stroke-width: 2.4; stroke-linecap: round; }
.hero__row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 20px; }
.hero__row .buy { flex: 1 1 200px; min-height: 54px; font-size: 15px; }
.lede { max-width: 44ch; margin: 22px 0 0; color: var(--ink-soft); font-size: 17px; }

/* the seal tag (CA box) */
.seal { position: relative; max-width: 520px; transform-origin: 50% -16px; }
.seal__cord { position: absolute; left: 34px; top: -22px; width: 2px; height: 30px; background: linear-gradient(var(--walnut-hi), var(--marker)); }
.seal__tag {
  position: relative; padding: 16px 16px 14px 26px; color: #10202e;
  background: linear-gradient(180deg, #dcedff, var(--paper));
  border-radius: 6px 6px 6px 6px; transform: rotate(-1.4deg);
  box-shadow: 0 0 0 1px #9cc6ef inset, 0 0 0 5px var(--paper), 0 0 0 6px #4b7fb4, 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px rgba(95, 230, 255, .2);
}
.seal__hole { position: absolute; left: 30px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--tar); box-shadow: 0 0 0 3px #b9c3cc, 0 0 0 4px #6e7a85; }
.seal__label { margin: 4px 0 6px; font: 700 11px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: #234f7c; }
#ca-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .55); border: 1px dashed #4b7fb4; border-radius: 4px; color: #10202e; transition: background-color .2s, transform .2s; }
#ca-copy:hover { background: #fff; transform: translateY(-1px); }
#ca-copy:active { transform: scale(.99); }
#ca-text { font: 600 13px/1.4 var(--f-body); word-break: break-all; font-variant-numeric: tabular-nums; }
.ca__tap { font: 700 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #8a3a0e; }
#ca-copy.is-copied .ca__tap { font-size: 0; }
#ca-copy.is-copied .ca__tap::after { content: "counted ✓"; font-size: 11px; color: #0d5a6c; }
.stubs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 2px dotted #7fa9d8; }
.stub { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; background: #fff; color: #10202e; border-radius: 4px; border: 1px solid #9cc6ef; font: 600 12px/1 var(--f-body); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.stub img { width: 16px; height: 16px; }
.stub:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 6px 0 -2px #4b7fb4; }
.note--seal { font-size: 19px; margin: 14px 0 0 12px; }

/* blowing ballots in the gutter (ambient) */
.gutter { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none; overflow: hidden; }
.gutter i { position: absolute; bottom: 8px; width: 16px; height: 10px; background: linear-gradient(180deg, transparent 30%, #3d6fb0 30% 45%, transparent 45% 60%, #c4524a 60% 72%, transparent 72%), var(--paper); border-radius: 1px; opacity: .55; box-shadow: 0 0 6px rgba(95, 230, 255, .4); }
.gutter i:nth-child(1) { left: 6%; transform: rotate(12deg); }
.gutter i:nth-child(2) { left: 18%; transform: rotate(-30deg); }
.gutter i:nth-child(3) { left: 33%; transform: rotate(70deg); }
.gutter i:nth-child(4) { left: 47%; transform: rotate(-8deg); }
.gutter i:nth-child(5) { left: 61%; transform: rotate(40deg); }
.gutter i:nth-child(6) { left: 72%; transform: rotate(-60deg); }
.gutter i:nth-child(7) { left: 84%; transform: rotate(20deg); }
.gutter i:nth-child(8) { left: 93%; transform: rotate(-16deg); }
html.js:not(.rm) .gutter i { animation: gutter-blow 13s linear infinite; }
html.js:not(.rm) .gutter i:nth-child(2n) { animation-duration: 17s; animation-delay: -6s; }
html.js:not(.rm) .gutter i:nth-child(3n) { animation-duration: 21s; animation-delay: -11s; }
@media (max-width: 699px) { .gutter i:nth-child(n+4) { display: none; } }
html.is-calm .gutter i { animation-play-state: paused !important; }
@keyframes gutter-blow {
  0% { transform: translate(-30vw, 0) rotate(0); }
  30% { transform: translate(-6vw, -24px) rotate(160deg); }
  55% { transform: translate(12vw, 0) rotate(250deg); }
  100% { transform: translate(40vw, -8px) rotate(520deg); }
}

/* ---------- the opening: he drops in ---------- */
html.js:not(.rm):not(.drop-skip) .faller { animation: gavel-fall .55s cubic-bezier(.55, 0, 1, .45) .15s both; }
html.js:not(.rm):not(.drop-skip) .faller__body { animation: gavel-thud .42s ease-out .7s both; }
html.js:not(.rm):not(.drop-skip) .hero__stage { animation: floor-knock .3s linear .7s both; }
html.js:not(.rm):not(.drop-skip) .tile { animation: tile-knock .75s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(.74s + (var(--r) * 40ms) + (var(--c) * 25ms)); }
html.js:not(.rm):not(.drop-skip) h1 .l1, html.js:not(.rm):not(.drop-skip) h1 .l2 { animation: neon-ignite .6s linear both; }
html.js:not(.rm):not(.drop-skip) h1 .l1 { animation-delay: 1.1s; }
html.js:not(.rm):not(.drop-skip) h1 .l2 { animation-delay: 1.35s; }
html.js:not(.rm):not(.drop-skip) .hero__copy .label,
html.js:not(.rm):not(.drop-skip) .note--hero,
html.js:not(.rm):not(.drop-skip) .lede { animation: cord-drop .7s cubic-bezier(.3, 1.5, .5, 1) 1.5s both; transform-origin: 50% 0; }
html.js:not(.rm):not(.drop-skip) .hero__row { animation: cord-drop .7s cubic-bezier(.3, 1.5, .5, 1) 1.55s both; transform-origin: 20% 0; }
html.js:not(.rm):not(.drop-skip) .seal { animation: cord-drop .9s cubic-bezier(.3, 1.6, .5, 1) 1.65s both; }
@keyframes gavel-fall { from { transform: translateY(-120vh) rotate(-30deg); } to { transform: translateY(0) rotate(0); } }
@keyframes gavel-thud {
  0% { transform: rotate(-8deg) scale(1.12, .84); }
  45% { transform: rotate(-8deg) scale(.94, 1.08); }
  75% { transform: rotate(-8deg) scale(1.02, .98); }
  100% { transform: rotate(-8deg) scale(1); }
}
@keyframes floor-knock { 0%, 100% { transform: none; } 30% { transform: translateY(4px); } 60% { transform: translateY(-2px); } }
@keyframes tile-knock {
  from { transform: translate(calc(var(--sx) * 1vw), calc(var(--sy) * 1vh)) rotate(calc(var(--sr) * 1deg)) rotateY(180deg); opacity: .5; }
  to { transform: none; opacity: 1; }
}
@keyframes neon-ignite {
  0% { opacity: .15; clip-path: inset(0 100% 0 0); }
  20% { opacity: 1; }
  28% { opacity: .3; }
  36% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 -10% 0 0); }
}
@keyframes cord-drop { 0% { opacity: 0; transform: translateY(-26px) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
.dust { position: absolute; z-index: 5; width: 14px; height: 9px; background: var(--paper); border-radius: 1px; box-shadow: 0 0 8px var(--cyan-glow); pointer-events: none; }

/* ---------- strips and panels ---------- */
.strip { position: relative; max-width: 1320px; margin: 0 auto; padding: 90px 18px; }
.strip__head { margin-bottom: 36px; max-width: 860px; }
.tier { position: relative; display: grid; gap: 22px; }
.card, .panel, .booth, .poll__cab, .chart__frame {
  position: relative; border-radius: 10px;
  background: linear-gradient(160deg, rgba(30, 40, 48, .82), rgba(10, 13, 16, .92));
  box-shadow: var(--edge), 0 24px 50px rgba(0, 0, 0, .5);
}
.card::before, .panel::before, .booth::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1.5px var(--cyan), 0 0 16px var(--cyan-glow);
}
.card { display: flex; flex-direction: column; justify-content: flex-end; padding: 70px 22px 24px; transform: rotate(-1deg); }
.card:nth-child(2) { transform: rotate(1deg); }
.card__num { position: absolute; top: 12px; right: 18px; font: 400 54px/1 var(--f-display); color: var(--walnut-hi); text-shadow: 0 0 14px rgba(233, 133, 73, .5); }
.card h3 {
  position: absolute; top: -16px; left: 16px; padding: 10px 18px; border-radius: 22px;
  font: 400 22px/1 var(--f-display); color: var(--night); background: var(--paper);
  box-shadow: 0 0 0 2px var(--cyan), 0 0 18px var(--cyan-glow);
}
.card h3::after { content: ""; position: absolute; left: 26px; bottom: -10px; border: 6px solid transparent; border-top: 8px solid var(--paper); border-bottom: 0; }
.card p { margin: 0; color: var(--ink); font-size: 16px; }
.panel { margin: 0; overflow: hidden; }
.panel--feature img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.caption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; padding: 10px 14px; background: var(--paper); color: #10202e; font: 400 20px/1.25 var(--f-hand); border-radius: 3px; transform: rotate(-1deg); box-shadow: 0 0 0 2px var(--cyan); }
main { overflow-x: hidden; overflow-x: clip; }
.tumbler { position: absolute; z-index: 4; width: 96px; right: 22px; bottom: 210px; transform: rotate(24deg); pointer-events: none; }
.sfx { position: absolute; z-index: 5; right: 6%; bottom: -36px; font: 400 54px/1 var(--f-display); color: var(--marker); transform: rotate(-8deg); text-shadow: 0 0 18px rgba(243, 193, 75, .55), 3px 3px 0 var(--night); pointer-events: none; }

/* panels ignite one by one */
html.js:not(.rm) [data-reveal] > .card, html.js:not(.rm) [data-reveal] > .panel, html.js:not(.rm) [data-reveal] > .booth { opacity: 0; transform: translateY(30px) rotate(var(--tilt, 0deg)); transition: opacity .6s, transform .8s cubic-bezier(.2, 1.3, .4, 1); transition-delay: calc(var(--i, 0) * 160ms); }
html.js:not(.rm) [data-reveal].seen > .card, html.js:not(.rm) [data-reveal].seen > .panel, html.js:not(.rm) [data-reveal].seen > .booth { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
html.js:not(.rm) [data-reveal].seen > .card::before, html.js:not(.rm) [data-reveal].seen > .panel::before, html.js:not(.rm) [data-reveal].seen > .booth::before { animation: edge-run .9s linear both; animation-delay: calc(var(--i, 0) * 160ms + .1s); }
.card:nth-child(1) { --tilt: -1deg; } .card:nth-child(2) { --tilt: 1deg; } .card:nth-child(3) { --tilt: -.5deg; }
@keyframes edge-run { 0% { clip-path: inset(0 100% 100% 0); } 40% { clip-path: inset(0 0 100% 0); } 70% { clip-path: inset(0 0 0 0); } 78% { opacity: .4; } 100% { clip-path: inset(0); opacity: 1; } }
html.js:not(.rm) .count__copy.reveal:not(.seen), html.js:not(.rm) .strip__head.reveal:not(.seen) { opacity: 0; }
html.js:not(.rm) .count__copy.reveal, html.js:not(.rm) .strip__head.reveal { transition: opacity .8s; }

/* ---------- the count: ballot box globe ---------- */
.count { display: grid; gap: 30px; align-items: center; }
.tank { position: relative; width: min(90vw, 440px); height: 70vh; max-height: 640px; min-height: 460px; margin: 0 auto 60px; perspective: 1200px; cursor: grab; touch-action: pan-y; outline-offset: 10px; }
.tank:active { cursor: grabbing; }
.tank__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--ty, 0) * 1deg + var(--px, 0) * 8deg)) rotateX(calc(var(--py, 0) * -3deg)); transition: transform .5s cubic-bezier(.2, 1, .3, 1); }
html.rm .tank__body { transform: none; }
.tank__back { position: absolute; inset: 22px 0 34px; border-radius: 6px; background: radial-gradient(70% 50% at 50% 40%, rgba(95, 230, 255, .14), transparent 70%), linear-gradient(180deg, rgba(20, 30, 38, .9), rgba(8, 10, 12, .96)); }
.tank__lid { position: absolute; z-index: 6; left: -8px; right: -8px; top: 0; height: 26px; border-radius: 6px; background: linear-gradient(180deg, #2a3640, #11171c); box-shadow: inset 0 0 0 1px rgba(95, 230, 255, .6), 0 0 18px var(--cyan-soft); }
.tank__lid i { position: absolute; left: 30%; right: 30%; top: 10px; height: 6px; background: #000; border-radius: 2px; box-shadow: inset 0 0 6px var(--cyan); }
.tank__gl { position: absolute; inset: 22px 0 34px; width: 100%; height: calc(100% - 56px); pointer-events: none; }
.tank__gl--front { z-index: 4; }
.tank__who { position: absolute; z-index: 3; left: 18%; right: 18%; top: 14%; pointer-events: none; transform: rotate(calc(var(--bob, 0) * 6deg - 4deg)) translateY(calc(var(--lift, 0) * -30px)); }
.tank__glass { position: absolute; z-index: 5; inset: 22px 0 34px; border-radius: 6px; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, .1) 0 8%, transparent 8% 60%, rgba(255, 255, 255, .05) 60% 64%, transparent 64%); box-shadow: inset 2px 0 0 var(--cyan), inset -2px 0 0 var(--cyan), inset 0 0 0 1px rgba(95, 230, 255, .4), 0 0 30px rgba(95, 230, 255, .3), 0 0 80px rgba(95, 230, 255, .12); }
.tank__base { position: absolute; z-index: 6; left: -12px; right: -12px; bottom: 0; height: 36px; border-radius: 4px; display: grid; place-items: center; font: 700 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #ffe9d8; background: linear-gradient(180deg, var(--walnut-hi), var(--walnut) 40%, #5a2a0d); box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
/* settled ballots: the still picture (motion off, no WebGL) */
.tank__still {
  position: absolute; z-index: 4; inset: 22px 0 34px; pointer-events: none; opacity: .95;
  --s: linear-gradient(180deg, #cfe6ff 0 30%, #3d6fb0 30% 45%, #cfe6ff 45% 60%, #c4524a 60% 72%, #cfe6ff 72%);
  background: var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s);
  background-repeat: no-repeat;
  background-size: 18px 11px, 16px 10px, 18px 11px, 14px 9px, 18px 11px, 16px 10px, 18px 11px, 14px 9px, 16px 10px, 18px 11px, 16px 10px, 14px 9px, 18px 11px, 16px 10px;
  background-position: 8% 98%, 20% 99%, 33% 97%, 46% 99%, 58% 98%, 70% 99%, 84% 97%, 94% 99%, 14% 93%, 52% 94%, 76% 92%, 22% 40%, 80% 30%, 60% 62%;
}
.tank__still::after {
  content: ""; position: absolute; inset: 0;
  background: var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s), var(--s);
  background-repeat: no-repeat;
  background-size: 16px 10px, 18px 11px, 14px 9px, 18px 11px, 16px 10px, 14px 9px, 18px 11px, 16px 10px, 14px 9px, 18px 11px, 16px 10px, 18px 11px, 14px 9px, 16px 10px, 18px 11px, 14px 9px;
  background-position: 4% 96%, 27% 95%, 39% 96%, 64% 95%, 89% 96%, 11% 88%, 36% 90%, 63% 89%, 88% 90%, 8% 18%, 30% 26%, 70% 12%, 92% 48%, 6% 60%, 40% 76%, 86% 72%;
  filter: drop-shadow(0 0 4px rgba(95, 230, 255, .45));
}
html.gl-on .tank__still { display: none; }

/* ---------- press room reel ---------- */
.reel { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 30px 4px 20px; margin: 0 -18px; padding-left: 18px; scrollbar-width: none; cursor: grab; }
.reel::-webkit-scrollbar { display: none; }
.reel.is-drag { scroll-snap-type: none; cursor: grabbing; }
.reel__track { display: flex; gap: 22px; width: max-content; padding-right: 18px; transform: skewX(calc(var(--skew, 0) * 1deg)); transition: transform .4s; }
.reel figure { position: relative; flex: 0 0 auto; width: 78vw; max-width: 420px; margin: 0; scroll-snap-align: start; border-radius: 10px; overflow: visible; box-shadow: var(--edge), 0 24px 50px rgba(0, 0, 0, .5); counter-increment: shot; }
.reel figure:nth-child(odd) { transform: rotate(-.8deg); }
.reel figure:nth-child(even) { transform: rotate(.8deg) translateY(14px); }
.reel figure img { border-radius: 10px; width: 100%; aspect-ratio: 1; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.reel figure::after { content: "3." counter(shot); position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; font: 700 11px/1 var(--f-body); letter-spacing: .2em; color: var(--cyan); background: rgba(5, 7, 10, .85); border-radius: 3px; }
.reel figcaption { position: absolute; top: -18px; left: 12px; right: 30px; padding: 10px 14px; background: var(--paper); color: #10202e; font: 400 18px/1.25 var(--f-hand); border-radius: 18px; box-shadow: 0 0 0 2px var(--cyan), 0 0 16px var(--cyan-glow); }
.reel__track { counter-reset: shot; }
.reel__rail { height: 3px; margin-top: 18px; background: rgba(170, 79, 24, .35); border-radius: 2px; overflow: hidden; }
.reel__rail i { display: block; height: 100%; width: 30%; background: var(--walnut-hi); transform: translateX(calc(var(--reel, 0) * 233%)); }

/* ---------- exit poll machine ---------- */
.poll { display: grid; gap: 30px; align-items: center; justify-items: center; }
.poll__cab { width: min(100%, 380px); padding: 20px 20px 0; background: linear-gradient(180deg, #7a3812, var(--walnut) 30%, #5a2a0d); box-shadow: inset 0 0 0 1px rgba(255, 200, 160, .3), 0 0 0 2px #2a1408, 0 30px 60px rgba(0, 0, 0, .6); }
.poll__sign { margin: -2px 0 14px; text-align: center; font: 400 38px/1 var(--f-display); color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 0 0 22px var(--cyan-glow); }
.poll__window { height: 180px; overflow: hidden; border-radius: 6px; background: radial-gradient(60% 70% at 50% 30%, rgba(95, 230, 255, .3), #0a0d10); box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 30px rgba(0, 0, 0, .8); }
.poll__window img { width: 70%; margin: 6px auto 0; }
.poll__screen { margin: 14px 0; padding: 8px; text-align: center; font: 700 13px/1 var(--f-body); letter-spacing: .3em; color: var(--marker); background: #120a05; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(243, 193, 75, .4); }
.poll__screen span { opacity: .35; }
.poll.is-counting .poll__screen span { opacity: 1; }
.poll__mouth { position: relative; padding-bottom: 20px; }
.poll__lips { display: block; height: 10px; margin: 0 10%; background: #000; border-radius: 3px; box-shadow: inset 0 0 6px var(--cyan); }
.poll__slip { position: relative; margin: -4px 14% 0; padding: 16px 14px 18px; min-height: 96px; background: linear-gradient(180deg, #a9c6e6, var(--paper) 22%, #e3f0ff); color: #10202e; transform-origin: 50% 0; box-shadow: 0 10px 20px rgba(0, 0, 0, .4); clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 100%, 88% 92%, 82% 100%, 76% 92%, 70% 100%, 64% 92%, 58% 100%, 52% 92%, 46% 100%, 40% 92%, 34% 100%, 28% 92%, 22% 100%, 16% 92%, 10% 100%, 4% 92%, 0 100%); }
.poll__slip p { margin: 0; font: 400 21px/1.25 var(--f-hand); text-align: center; }
html.js:not(.rm) .poll.is-printed .poll__slip { animation: slip-curl .8s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes slip-curl { 0% { transform: scaleY(.05) rotateX(70deg); } 60% { transform: scaleY(1.04) rotateX(-8deg); } 100% { transform: none; } }
.poll__lever { position: absolute; right: 2px; top: 150px; z-index: 2; width: 34px; height: 150px; touch-action: none; cursor: grab; pointer-events: auto; }
.poll__arm { position: absolute; left: 0; top: 30px; width: 10px; height: 100px; background: linear-gradient(90deg, #9aa5ae, #e6eef3, #6d7880); border-radius: 5px; transform-origin: 50% 100%; transform: rotate(calc(var(--pull, 0) * 120deg + 0deg)); }
.poll__arm b { position: absolute; left: -9px; top: -24px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffbe94, var(--walnut-hi) 50%, var(--walnut)); box-shadow: 0 0 14px rgba(233, 133, 73, .6); }
html.js:not(.rm) .poll.is-pulling .poll__arm { animation: lever-pull .7s cubic-bezier(.3, 1.4, .5, 1) both; }
html.js:not(.rm) .poll.is-pulling .poll__cab { animation: floor-knock .25s linear 2; }
@keyframes lever-pull { 0% { transform: rotate(0); } 30% { transform: rotate(130deg); } 100% { transform: rotate(0); } }
.poll__cab { position: relative; }
.poll__side { text-align: center; }
.buy--pull { min-height: 56px; padding: 0 34px; font-size: 15px; }
.poll__count { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); letter-spacing: .06em; }
.poll__count b { color: var(--cyan); font-size: 18px; }

/* ---------- chart ---------- */
.chart__frame { padding: 10px; background: linear-gradient(180deg, #2a1408, #120a05); box-shadow: var(--edge), inset 0 0 0 10px #3a1c0b; }
[data-chart-frame] { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 420px; background: #05070a; border-radius: 4px; overflow: hidden; }
[data-chart-frame] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- how to buy ---------- */
.booths { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.booth { padding: 30px 24px 26px; }
.booth__n { position: absolute; top: 14px; right: 18px; font: 400 54px/1 var(--f-display); color: var(--walnut-hi); text-shadow: 0 0 14px rgba(233, 133, 73, .5); }
.booth img { width: 40px; height: 40px; padding: 6px; background: #f6eeea; border-radius: 10px; }
.booth h3 { margin: 16px 0 8px; font: 400 26px/1.1 var(--f-display); color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.booth p { margin: 0; color: var(--ink); font-size: 16px; }
.booth:nth-child(1) { --tilt: -.8deg; } .booth:nth-child(2) { --tilt: .6deg; } .booth:nth-child(3) { --tilt: -.4deg; }
.buystrip__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.buystrip__row .buy { min-height: 56px; padding: 0 36px; }

/* ---------- footer: the floor ---------- */
.floor {
  position: relative; overflow: hidden; margin-top: 60px; padding: 120px 18px 40px; color: var(--ink);
  background:
    linear-gradient(180deg, var(--tar-deep) 0, rgba(7, 9, 11, .55) 90px, rgba(7, 9, 11, .2) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg stroke='%231e0e05' stroke-width='2'%3E%3Crect x='0' y='0' width='100' height='40' fill='%234c240e'/%3E%3Crect x='100' y='0' width='60' height='40' fill='%23522710'/%3E%3Crect x='0' y='40' width='40' height='40' fill='%23552911'/%3E%3Crect x='40' y='40' width='120' height='40' fill='%2345210d'/%3E%3C/g%3E%3Cpath d='M8 14q30 -6 80 2M110 26q20 4 44 -2M50 58q40 -6 100 4M6 66q14 4 28 -2' stroke='%23622f12' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"),
    #3a1c0b;
}
.closed { position: absolute; top: 34px; left: 50%; transform: translateX(-50%) rotate(-3deg); margin: 0; font: 400 34px/1 var(--f-display); white-space: nowrap; color: var(--walnut-hi); text-shadow: 0 0 6px var(--walnut-hi), 0 0 22px rgba(233, 133, 73, .6); transition: opacity .2s, text-shadow .2s; }
html.js:not(.rm) .closed.is-off { opacity: .25; text-shadow: none; transition-delay: .6s; }
.floor__thud { position: absolute; right: -2vw; bottom: 30px; font: 400 clamp(90px, 22vw, 320px)/1 var(--f-display); color: rgba(246, 238, 234, .05); pointer-events: none; }
.floor__inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; display: grid; gap: 26px; }
.floor__brand { display: flex; align-items: center; gap: 16px; }
.floor__logo { width: 88px; height: 88px; border-radius: 10px; box-shadow: var(--edge); }
.floor__name { margin: 0; font: 400 34px/1 var(--f-display); color: var(--cyan); text-shadow: 0 0 12px var(--cyan-glow); }
.floor__tag { margin: 6px 0 0; font: 400 20px/1.2 var(--f-hand); color: var(--marker); }
.floor__legal { max-width: 70ch; margin: 0; padding: 14px 16px; font-size: 14px; color: var(--ink); background: rgba(7, 9, 11, .82); border-radius: 6px; }
.floor__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; padding: 10px 16px; background: rgba(7, 9, 11, .82); border-radius: 6px; width: max-content; max-width: 100%; }
.floor__links a:not(.chip) { color: #f6eeea; font-weight: 600; font-size: 14px; text-underline-offset: 4px; }
.floor__links a:not(.chip):hover { color: var(--cyan); }
.floor__boards { position: relative; z-index: 1; height: 90px; margin-top: 20px; }
.floor__body { position: absolute; left: 50%; bottom: -40px; width: 90px; transform: translateX(-50%) rotate(90deg); filter: drop-shadow(0 0 8px rgba(95, 230, 255, .35)) drop-shadow(-10px 10px 10px rgba(0, 0, 0, .7)); }

/* 404 */
.lost { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 40px 18px; text-align: center; }
.lost img { width: 120px; border-radius: 14px; box-shadow: var(--edge), 0 0 40px var(--cyan-soft); }
.lost h1 { font-size: clamp(40px, 8vw, 96px); }
.lost h1 em { display: block; }

/* ---------- wider screens ---------- */
@media (min-width: 700px) {
  .tier { grid-template-columns: 1fr 1fr; }
  .booths { grid-template-columns: repeat(3, 1fr); }
  .poll { display: flex; justify-content: center; align-items: center; gap: 110px; }
  .poll__side { text-align: left; }
  .poll__lever { right: -36px; }
  .floor__inner { grid-template-columns: auto 1fr; align-items: start; }
  .floor__links { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  body { font-size: 18px; }
  .top { height: 66px; padding: 0 36px; gap: 22px; }
  #burger { display: none; }
  #nav { position: static; display: flex; flex-direction: row; gap: 6px; padding: 0; background: none; box-shadow: none; }
  #nav a { padding: 8px 10px; font-size: 12px; letter-spacing: .14em; }
  .top__end .chip--x:not([hidden]), #motion { display: inline-flex; }
  .gauge { left: auto; top: 25vh; right: 10px; bottom: auto; width: 64px; height: 50vh; text-align: right; }
  .gauge__label, .gauge__zone { display: block; position: absolute; right: 18px; font: 700 10px/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
  .gauge__label { top: -22px; right: 0; }
  .gauge__zone { bottom: -22px; right: 0; white-space: nowrap; color: var(--ink-soft); }
  .gauge__tube { left: auto; right: 4px; width: 3px; border-radius: 2px; }
  .gauge__mark { inset: auto -5px auto -5px; top: 0; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--walnut), var(--walnut-hi)); box-shadow: 0 0 10px rgba(233, 133, 73, .7); transform: translateY(calc(var(--scroll, 0) * (50vh - 12px))); }
  html.rm .gauge__mark { transform: translateY(calc(50vh - 12px)); }
  .gauge__read { top: 50%; right: 16px; font-size: 18px; }

  .hero { padding: 96px 60px 60px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 30px; }
  .hero__copy { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .hero__stage { grid-column: 2; grid-row: 1; height: 760px; max-height: calc(100vh - 110px); align-items: center; }
  .wall-wrap { width: min(470px, 34vw, calc((100vh - 140px) * .8)); margin-left: 12%; }
  .faller { width: min(420px, 29vw, calc((100vh - 120px) * .6)); top: auto; bottom: -10px; left: 0; margin-left: 0; }
  .puddle { bottom: -30px; }
  h1 { font-size: clamp(50px, 4.9vw, 76px); line-height: .98; }
  .hero__row .buy { flex: 0 0 auto; padding: 0 36px; }
  .note--hero { margin-left: 46%; }
  .strip { padding: 90px 60px; }
  .tier { grid-template-columns: 5fr 4fr 4fr 6fr; align-items: stretch; min-height: 440px; }
  .card { padding-top: 90px; }
  .card__num { top: 60px; left: 20px; right: auto; font-size: 150px; color: rgba(233, 133, 73, .22); text-shadow: 0 0 30px rgba(233, 133, 73, .25); }
  .tumbler { width: 150px; right: 25%; top: -96px; bottom: auto; }
  .card p { position: relative; }
  .strip__head { margin-bottom: 70px; }
  .sfx { right: 30%; bottom: -46px; font-size: 76px; }
  .count { grid-template-columns: 1fr 1.1fr; }
  .tank { height: 82vh; max-height: 820px; width: 500px; }
  .reel { margin: 0 -60px; padding-left: 60px; }
  .reel figure { width: 420px; }
  .floor { padding: 150px 60px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}