/* boulder.vote — teaser landing page
   Rebuilt from the Claude Design prototype. Visuals driven by the
   design-system tokens in ds/theme/*.css. */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink, #22313a);
  font-family: var(--font-body);
  color: var(--paper);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
input::placeholder { color: #7a7566; }

.wrap { min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.container { max-width: 1200px; margin: 0 auto; width: 100%; }

@keyframes pop { from { transform: translateY(12px) scale(.94); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-anim] { animation: none !important; transition: none !important; } }

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-direction: column;
  gap: 24px;
  padding: clamp(22px, 4vw, 46px) clamp(22px, 4vw, 46px) clamp(36px, 5vh, 64px);
  border-bottom: 3px solid rgba(15, 22, 27, .4);
  /* Photo hero: dark scrim over the image keeps the cream text legible; --forest
     is the fallback if the image fails. Overrides the forest colorway's flat bg. */
  background-color: var(--forest);
  background-image:
    linear-gradient(180deg, rgba(15, 22, 18, .5) 0%, rgba(15, 22, 18, .72) 100%),
    url("assets/boulder-hero.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; width: 100%; }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .04em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--shade-strong); }
.wordmark .name { color: var(--text-strong); }
.wordmark .dot { color: var(--accent); }

.count-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.count-label { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.count-clock { display: flex; align-items: flex-start; gap: 9px; }
.count-unit { display: flex; flex-direction: column; align-items: center; line-height: 1; }
/* Fixed-width digit cell (1.55em contains the widest pair, ~1.52em) so a ticking
   digit's shape can't reflow the clock — kills the jitter. The display font has no
   tabular figures, so this box, not font-variant-numeric, is what stabilises it. */
.count-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2vw, 30px); color: var(--text-strong); display: inline-block; width: 1.55em; text-align: center; }
.count-num.sec { color: var(--accent); }
.count-unit-label { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.count-colon { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 1.7vw, 24px); color: var(--accent); margin-top: 1px; }
.count-live { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); color: var(--accent); }
/* Mobile: shrink the countdown a notch so it sits inline with the CTA instead of
   wrapping. Pairs with the header-actions/btn trims in the page's inline <style>. */
@media (max-width: 640px) {
  .count-num, .count-colon { font-size: 18px; }
  .count-clock { gap: 6px; }
}

.hero-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: clamp(20px, 2.5vw, 40px); max-width: 1200px; margin: 0 auto; width: 100%; padding: clamp(8px, 3vh, 32px) 0 0; }
.hero-copy { flex: 1 1 360px; min-width: min(100%, 320px); }
@media (max-width: 760px) {
  .hero-main { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  /* Column mode makes the main axis vertical, so hero-copy's `flex: 1 1 360px`
     basis turns into a 360px HEIGHT floor and the box balloons. Reset to content
     size. This override must stay AFTER the base .hero-copy rule above — equal
     specificity means source order decides, and later wins. */
  .hero-copy { flex: 0 1 auto; }
}
.hero-script { font-family: var(--font-script); font-size: clamp(24px, 2.6vw, 36px); color: var(--accent); line-height: 1.1; margin-bottom: 8px; text-wrap: balance; }
.hero-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; line-height: .9; letter-spacing: .01em; text-wrap: balance; }
.hero-title span { display: block; font-weight: 900; text-shadow: 6px 6px 0 var(--shade-strong); }
.hero-title .l1 { font-size: clamp(34px, 6vw, 78px); color: var(--text-strong); }
.hero-title .l2 { font-size: clamp(38px, 6.6vw, 88px); color: var(--accent); }
.hero-lede { margin: 20px 0 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; font-weight: 500; color: var(--text-body); text-wrap: pretty; }
.hero-lede strong { font-weight: 800; color: var(--text-strong); }

/* ---------- Quiz card ---------- */
.card-col { width: 100%; max-width: 1200px; margin: 0 auto; }
.card {
  background: var(--paper); color: var(--ink); text-align: left;
  border: 2px solid rgba(0, 0, 0, .14); border-radius: 14px;
  box-shadow: 10px 10px 0 rgba(8, 12, 16, .42);
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column;
  transition: transform 340ms var(--ease-out, cubic-bezier(.2, .7, .3, 1)), opacity 300ms ease;
}
.card.enter { opacity: 0; transform: translateX(36px) scale(.97); }
.card.enter.from-left { transform: translateX(-36px) scale(.97); }
.card-inner { display: flex; flex-direction: column; height: 100%; flex: 1; }
.kicker { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brick); }
.card-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 900; font-size: clamp(28px, 3.6vw, 44px); line-height: .95; color: var(--ink); text-shadow: 4px 4px 0 rgba(0, 0, 0, .12); margin: 14px 0 0; }
.card-p { margin: 16px 0 0; font-size: 16px; line-height: 1.5; font-weight: 500; color: #3a4750; text-wrap: pretty; }
.card-foot { margin-top: auto; padding-top: 24px; }

.btn-primary { width: 100%; font-family: var(--font-body); font-weight: 800; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: var(--brick); border: 2px solid transparent; border-radius: 8px; padding: 15px 26px; cursor: pointer; box-shadow: 4px 4px 0 rgba(8, 12, 16, .45); transition: transform 120ms var(--ease-out), filter 120ms; }
.btn-primary:hover { filter: brightness(.92); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(8, 12, 16, .45); }

.q-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-meta span { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6b6752; }
.progress { height: 8px; background: rgba(0, 0, 0, .12); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress-bar { height: 100%; background: var(--brick); border-radius: 999px; transition: width 340ms var(--ease-out); }
.q-text { font-family: var(--font-body); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; color: var(--ink); margin: 18px 0 16px; text-wrap: pretty; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: var(--canvas); border: 2px solid rgba(0, 0, 0, .16); border-radius: 8px; padding: 13px 15px; cursor: pointer; font-family: var(--font-body); color: var(--ink); transition: transform 120ms ease, background 120ms ease, border-color 120ms ease; }
.option:hover { background: #fff; border-color: var(--ink); transform: translateX(4px); }
.option .letter { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.option .opt-text { font-weight: 600; font-size: 15px; line-height: 1.3; }
.back-wrap { margin-top: auto; padding-top: 18px; }
.btn-back { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6b6752; background: none; border: none; cursor: pointer; padding: 4px 0; }
.btn-back:hover { color: var(--ink); }

.result-name { font-family: var(--font-display); text-transform: uppercase; font-weight: 900; font-size: clamp(28px, 3.8vw, 46px); line-height: .95; color: var(--ink); text-shadow: 4px 4px 0 rgba(0, 0, 0, .12); margin: 12px 0 0; animation: pop 420ms var(--ease-out) both; }
.result-tagline { font-family: var(--font-script); font-size: clamp(24px, 2.8vw, 32px); color: var(--brick); line-height: 1.05; margin-top: 8px; }
.result-blurb { margin: 16px 0 0; font-size: 16px; line-height: 1.55; font-weight: 500; color: #3a4750; text-wrap: pretty; }
.result-secondary { margin: 14px 0 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #6b6752; }
.result-secondary strong { font-weight: 800; color: var(--ink); }
.result-actions { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.btn-secondary { font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); background: transparent; border: 2px solid var(--ink); border-radius: 8px; padding: 11px 20px; cursor: pointer; transition: transform 120ms, background 120ms, color 120ms; }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-secondary:active { transform: translate(2px, 2px); }
.result-note { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #6b6752; }
.result-note[href] { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.result-note[href]:hover { color: var(--ink); }

/* ---------- Live results ---------- */
.section { padding: clamp(40px, 6vh, 72px) clamp(22px, 4vw, 46px); border-bottom: 3px solid rgba(15, 22, 27, .4); }
.results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(22px, 3vh, 34px); }
.eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.section-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-weight: 900; font-size: clamp(30px, 4.4vw, 60px); line-height: .92; color: var(--text-strong); text-shadow: 4px 4px 0 var(--shade-strong); }
.total { text-align: right; line-height: 1; }
.total-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4vw, 56px); color: var(--accent); text-shadow: 4px 4px 0 var(--shade-strong); }
.total-label { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.stat-list { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 24px); }
.stat { display: flex; flex-direction: column; gap: 9px; }
.stat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.stat-name { font-family: var(--font-body); font-weight: 700; font-size: clamp(15px, 1.6vw, 19px); color: var(--text-strong); }
.stat-figs { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.stat-pct { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2vw, 28px); color: var(--text-strong); }
.stat-count { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text-muted); }
.bar { height: 16px; background: rgba(24, 36, 43, .16); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.bar-fill { height: 100%; border-radius: 999px; transition: width 700ms var(--ease-out); }
.contributed { display: flex; align-items: center; gap: 9px; margin-top: clamp(18px, 2.6vh, 26px); font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--text-strong); }
.not-contributed { margin: clamp(18px, 2.6vh, 26px) 0 0; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-muted); }

/* ---------- By ZIP ---------- */
.zips-head { margin-bottom: clamp(20px, 3vh, 32px); }
.zips-lede { margin: 12px 0 0; max-width: 46em; font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 18px); font-weight: 500; color: var(--text-body); text-wrap: pretty; }
.zip-grid { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 840px) { .zip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .zip-grid { grid-template-columns: 1fr; } }
.zip-card { background: rgba(240, 230, 210, .05); border-radius: 12px; padding: clamp(16px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--border); }
.zip-card.mine { border-color: var(--accent); }
.zip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zip-code { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.6vw, 34px); color: var(--text-strong); line-height: 1; }
.zip-total { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.zip-area-row { display: flex; align-items: center; gap: 8px; }
.zip-area { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.zip-you { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.zip-divider { height: 1px; background: var(--border); }
.zip-lead { display: flex; flex-direction: column; gap: 7px; }
.zip-lead-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.zip-lead-row { display: flex; align-items: center; gap: 10px; }
.zip-lead-row .dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.zip-lead-name { flex: 1; font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--text-strong); }
.zip-lead-pct { flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--text-strong); }

/* ---------- Footer ---------- */
.footer { padding: clamp(40px, 6vh, 72px) clamp(22px, 4vw, 46px); }
.footer-inner { display: flex; flex-direction: column; gap: clamp(22px, 3vh, 32px); max-width: 1200px; margin: 0 auto; width: 100%; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 40px); }
.footer-cta { max-width: 24em; }
.footer-cta-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 900; font-size: clamp(26px, 3vw, 40px); line-height: .95; color: var(--text-strong); text-shadow: 3px 3px 0 var(--shade-strong); }
.footer-cta-sub { margin-top: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text-body); opacity: .9; }
.email-col { flex: 1 1 300px; min-width: min(100%, 260px); max-width: 480px; }
.email-form { display: flex; flex-wrap: wrap; gap: 12px; }
.email-form input { flex: 1 1 220px; min-width: 0; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--ink); background: var(--paper); padding: 13px 16px; border: 2px solid transparent; border-radius: 6px; outline: none; }
.btn-notify { flex: 0 0 auto; font-family: var(--font-body); font-weight: 800; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: var(--brick); border: 2px solid transparent; border-radius: 6px; padding: 13px 26px; cursor: pointer; box-shadow: 4px 4px 0 rgba(8, 12, 16, .5); transition: transform 120ms var(--ease-out), filter 120ms; }
.btn-notify:hover { filter: brightness(.92); }
.btn-notify:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(8, 12, 16, .5); }
.email-error { margin-top: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--accent); }
.email-success { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--text-strong); }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: clamp(16px, 2.5vh, 24px); border-top: 1px solid var(--border); }
.footer-brand .tag { font-size: 12px; color: var(--text-muted); letter-spacing: .02em; }
.footer-fineprint { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.footer-fineprint a { color: inherit; text-decoration: underline; }
.union-bug { position: relative; display: inline-block; width: 54px; color: var(--text-strong); opacity: .92; }
.union-bug text { font-family: var(--font-body); }
.union-bug > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 46.67%; width: auto; pointer-events: none; }

.hidden { display: none !important; }