/* ==========================================================
   VOICE Campaign — Components
   Depends on tokens.css. Strict grayscale. Ubuntu throughout.
   ========================================================== */

/* ---- base ---- */
body {
  font-family: var(--font);
  font-weight: var(--w-light);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad-x); }

/* ---- the V-mark : five bars whose tops trace a V ----
   Reads as the letter V, a ballot checkmark, and a soundwave.
   Markup: .vmark > .vmark-bars > 5x .bar.bN  +  .vmark-word > 5x .glyph */
.vmark-bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  height: 170px;
}
.vmark-bars .bar {
  width: 44px;
  background: var(--ink);
  transform-origin: bottom;
  transform: scaleY(0);
  animation: rise var(--t-fade) var(--ease) forwards;
}
.bar.b1 { height: 170px; animation-delay: 0.28s; }
.bar.b2 { height: 106px; animation-delay: 0.37s; }
.bar.b3 { height: 54px;  animation-delay: 0.46s; }
.bar.b4 { height: 106px; animation-delay: 0.55s; }
.bar.b5 { height: 170px; animation-delay: 0.64s; }

.vmark-word {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}
.vmark-word .glyph {
  width: 44px;
  text-align: center;
  font-size: var(--t-glyph);
  font-weight: var(--w-bold);
  color: var(--ink);
}

@keyframes rise { to { transform: scaleY(1); } }

/* ---- mini equalizer : 5 bars, one lit, locates a commitment in VOICE ----
   Set the lit bar with .lit. Heights trace the same V (30/19/10/19/30). */
.mini {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
}
.mini span { width: 7px; background: var(--gray-3); }
.mini span.lit { background: var(--ink); }

/* ---- equalizer divider : quiet waveform texture strip ---- */
.eq-divider {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 46px;
  padding: 0 var(--pad-x);
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.eq-divider span { width: 4px; background: var(--gray-3); }

/* ---- section heading : label motif with a trailing hairline ---- */
.section-heading {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: var(--t-lead);
  font-weight: var(--w-med);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
}
.section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}

/* ---- candidate name (hero display) ---- */
.name {
  font-size: var(--t-display);
  font-weight: var(--w-med);
  letter-spacing: var(--track-tight);
  line-height: 1.04;
  color: var(--ink);
}
.office {
  font-size: var(--t-name);
  font-weight: var(--w-reg);
  letter-spacing: 0.02em;
  color: var(--gray-1);
}

/* ---- tagline ---- */
.tagline { font-size: var(--t-lead); font-weight: var(--w-light); color: var(--ink); }
.tagline b { font-weight: var(--w-med); }

/* ---- commitment row ---- */
.row {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: center;
  gap: 36px;
  padding: 34px 0;
  border-bottom: 1px solid var(--hair);
}
.row:first-of-type { border-top: 1px solid var(--hair); }
.row .letter {
  font-size: var(--t-letter);
  font-weight: var(--w-med);
  line-height: 1;
  color: var(--ink);
}
.row .name-label {
  font-size: var(--t-name);
  font-weight: var(--w-med);
  letter-spacing: var(--track-name);
  text-transform: uppercase;
  color: var(--gray-2);
  margin-bottom: 9px;
}
.row .headline {
  font-size: var(--t-head);
  font-weight: var(--w-med);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.row .support {
  font-size: var(--t-body);
  font-weight: var(--w-light);
  color: var(--gray-1);
  max-width: 46ch;
}

/* ---- footer : dark close ---- */
.footer {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: var(--sp-5) var(--pad-x);
}
.footer .fname { font-size: 20px; font-weight: var(--w-med); letter-spacing: 0.02em; }
.footer .fmeta {
  margin-top: 10px;
  font-size: var(--t-micro);
  font-weight: var(--w-reg);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9b9b9b;
}

/* ---- ghost button : pill, fills on hover ---- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ---- on-load fade-up ---- */
.fade {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp var(--t-fade) var(--ease) forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---- responsive ---- */
@media (max-width: 640px) {
  :root { --pad-x: 24px; }
  .vmark-bars { gap: 14px; height: 132px; }
  .vmark-bars .bar { width: 32px; }
  .bar.b1, .bar.b5 { height: 132px; }
  .bar.b2, .bar.b4 { height: 82px; }
  .bar.b3 { height: 42px; }
  .vmark-word { gap: 14px; }
  .vmark-word .glyph { width: 32px; font-size: 29px; }
  .row { grid-template-columns: 64px 1fr; gap: 20px; }
  .row .letter { font-size: 56px; }
  .row .mini { display: none; }
  .row .headline { font-size: 22px; }
}