/* ============================================================
   k2-split-mono — "Split Mono"
   Bob Nguyen for Millbrae City Council District 4 · 2026
   E3 kinetic-type DNA + a tall faded right-center Bob photo,
   IBM-Plex-forward structured split layout, vertical pillars,
   mono brutalist budget data rows, sticky-bottom P3 ticker,
   BM2 CAMPAIGN—STATUS panel. Navy identity. Self-contained.
   Motion is transform/opacity only and gated by reduced-motion.
   ============================================================ */

:root {
  --navy: #0a1f44;
  --navy-deep: #08172f;
  --navy-lift: #13294b;
  --red: #b22234;
  --red-bright: #d62b3f;
  --cream: #f7f3e9;
  --paper: #fffdf8;
  --gold: #c9a14a;
  --rule: rgba(10, 31, 68, 0.16);
  --rule-cream: rgba(247, 243, 233, 0.18);

  --display: "Anton", "Archivo", "Arial Narrow", Impact, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1240px;
  --gutter: clamp(18px, 5vw, 64px);
  --ticker-h: 48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Space so the fixed bottom ticker never hides the footer. */
  padding-bottom: 0;
}

img { max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: 12px 18px;
  z-index: 1000;
  font-family: var(--mono);
  font-size: 13px;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- shared text bits ---------- */
.mono-label {
  font-family: var(--mono);
  font-size: clamp(11px, 1.4vw, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.mono-idx {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.05em;
}
.mono-tag {
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-lift);
}

.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.25rem);
  margin: 12px 0 0;
  max-width: 18ch;
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream);
  border-bottom: 2px solid var(--navy);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.02em;
  flex: none;
}
.brand__mark--lg { width: 64px; height: 64px; font-size: 28px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.brand__office {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-lift);
}

.nav__menu { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.nav__menu a:not(.btn) {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s, color 0.18s;
}
.nav__menu a:not(.btn):hover { border-bottom-color: var(--red); }

.lang-toggle {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.lang-toggle:hover { background: var(--navy); color: var(--cream); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 2px solid var(--navy);
  padding: 9px 10px;
  cursor: pointer;
}
.nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.2s, opacity 0.2s;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: transform 0.15s, background 0.18s, color 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn--donate { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn--donate:hover { background: var(--navy); border-color: var(--navy); }
.btn--primary { background: var(--navy); color: var(--cream); }
.btn--primary:hover { background: var(--red); border-color: var(--red); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--cream); }
.btn--invert { border-color: var(--cream); }
.btn--invert.btn--primary { background: var(--cream); color: var(--navy); }
.btn--invert.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn--invert.btn--ghost { color: var(--cream); }
.btn--invert.btn--ghost:hover { background: var(--cream); color: var(--navy); }

/* ============ HERO — SPLIT MONO ============ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 72px);
}
.hero__rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: clamp(20px, 3vw, 36px);
  border-bottom: 2px solid var(--navy);
}
.hero__rule .mono-idx { font-size: 12px; }
.hero__rule .mono-tag--end { margin-left: auto; color: var(--red); }

.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title   photo"
    "body    photo";
  column-gap: clamp(20px, 4vw, 56px);
  row-gap: 0;
  align-items: stretch;
}
.hero__left { min-width: 0; grid-area: body; }
.hero__headline { grid-area: title; }
.hero-photo { grid-area: photo; }
.hero__kicker {
  display: none;            /* desktop: hidden (mobile-only top label) */
  grid-area: kicker;
  font-family: var(--mono);
  font-size: clamp(12px, 3.4vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-lift);
  margin: 0 0 clamp(12px, 3vw, 18px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-lift);
  margin: 0 0 clamp(18px, 2.6vw, 32px);
  grid-area: eyebrow;
}

.hero__headline {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.015em;
  margin: 0;
  /* tightened cap for the narrower split column */
  font-size: clamp(2.6rem, 8.4vw, 5rem);
}
.hero__headline .line { display: block; }
.hero__headline .line--accent { color: var(--red); }

/* ---- Kinetic word cycle ----
   Default (no-js / reduced-motion): the full static phrase shows,
   the cycle viewport + tail are hidden. JS reveals the cycle. */
.cycle { display: none; }
.cycle__tail { display: none; }
.cycle__static { display: inline; }

.js .cycle {
  display: flex;          /* own line: cycling word never shares a line with "growth." */
  position: relative;
  overflow: hidden;
  height: 1em;            /* clip the swap */
  line-height: 1;
}
.js .cycle__static { display: none; }
/* "growth." forced onto its own line so the break is fixed and never reflows on resize */
.js .cycle__tail { display: block; color: var(--red); }

.cycle__viewport { position: relative; display: inline-block; min-width: 1ch; }
.cycle__word {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.9em);
  transition: opacity 0.42s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cycle__viewport .cycle__word { position: absolute; left: 0; top: 0; }
.cycle__viewport .cycle__word.is-measure { position: static; visibility: hidden; opacity: 0; }
.cycle__word.is-active { position: relative; opacity: 1; transform: translateY(0); }
.cycle__word.is-leaving {
  position: absolute;
  opacity: 0;
  transform: translateY(-0.9em);
}

.hero__lede {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--rule);
  max-width: 30ch;
}
.hero__why { margin-top: clamp(18px, 2.4vw, 26px); }
.hero__why p:last-child { margin-bottom: 0; }
.hero__why .mono-label { color: var(--navy-lift); margin-bottom: 8px; }
.hero__why p:not(.mono-label) { margin: 0; font-size: 1rem; max-width: 56ch; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}

/* ---- BM2 CAMPAIGN — STATUS panel (stacked beneath left col) ---- */
.status {
  border: 2px solid var(--navy);
  background: var(--paper);
  margin-top: clamp(28px, 4vw, 44px);
}
.status__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--navy);
  background: var(--navy);
  color: var(--cream);
}
.status__head .status__title { color: var(--cream); }
.status__dot {
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--red-bright);
  border-radius: 0;
  box-shadow: 0 0 0 0 rgba(214, 43, 63, 0.55);
}
.status__rows { margin: 0; padding: 0; }
.srow {
  display: grid;
  grid-template-columns: minmax(72px, 30%) 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
}
.srow:first-child { border-top: none; }
.srow dt { color: var(--navy-lift); }
.srow__val {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-align: right;
  overflow-wrap: anywhere;
}
.srow__clock { font-variant-numeric: tabular-nums; }
.srow--status { background: rgba(201, 161, 74, 0.12); }
.srow__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-weight: 600;
}
.status__pulse { color: var(--red-bright); font-size: 0.9em; line-height: 1; }
.status__cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-left: 2px;
  background: var(--navy);
  vertical-align: -0.18em;
}
.js .status__cursor { animation: bm-blink 1.05s step-end infinite; }
.js .status__dot { animation: bm-pulse 2.4s ease-out infinite; }
@keyframes bm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 43, 63, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(214, 43, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 43, 63, 0); }
}

/* ============ HERO PHOTO — tall faded right-center ============ */
.hero-photo {
  position: relative;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(420px, 60vw, 680px);
  /* bleed toward / off the right edge */
  margin-right: calc(var(--gutter) * -0.6);
}
.hero-photo__pin {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  color: var(--cream);
  background: rgba(8, 23, 47, 0.72);
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.hero-photo__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.hero-photo__svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Feather BOTH sides + soft bottom so it dissolves into the page. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* FALLBACK: when masks are unsupported, fake the feather with matching
   cream gradient overlays so the photo still blends into the page. */
.hero-photo__feather {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  background:
    linear-gradient(90deg, var(--cream) 0%, rgba(247,243,233,0) 22%, rgba(247,243,233,0) 78%, var(--cream) 100%),
    linear-gradient(180deg, rgba(247,243,233,0) 70%, var(--cream) 100%);
}
.no-mask .hero-photo__svg {
  -webkit-mask-image: none;
          mask-image: none;
}
.no-mask .hero-photo__feather { display: block; }

.hero-photo__cap {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 0 18px;
  color: var(--navy);
}
.hero-photo__hint { color: var(--red); font-size: 0.85em; }

/* ============ PRIORITIES — vertical mono rows ============ */
.priorities {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 2px solid var(--navy);
}
.priorities .section-head { max-width: var(--maxw); margin: 0 auto clamp(28px, 4vw, 48px); padding: 0 var(--gutter); }
.priorities .mono-label { color: var(--gold); }
.priorities .mono-idx { color: var(--red-bright); }
.priorities .section-title { color: var(--cream); }

.prio-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  border-top: 1px solid var(--rule-cream);
}
.prio-row {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: clamp(22px, 3.4vw, 34px) 0;
  border-bottom: 1px solid var(--rule-cream);
}
.prio-row__num {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 0.85;
  color: var(--red-bright);
  letter-spacing: -0.01em;
}
.prio-row__body { min-width: 0; }
.prio-row__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  margin: 0 0 8px;
}
.prio-row__text { margin: 0; color: rgba(247, 243, 233, 0.86); font-size: 0.98rem; max-width: 64ch; }

/* ============ BUDGET — mono brutalist data bars ============ */
.budget {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter);
}
.budget .mono-label { color: var(--navy-lift); }
.budget .mono-idx { color: var(--red); }
.budget__body { max-width: 56ch; margin: 18px 0 0; }
.budget__note { color: var(--red); margin-top: 22px; }

.ledger {
  border: 2px solid var(--navy);
  background: var(--paper);
}
.ledger__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) clamp(104px, 16vw, 156px);
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  padding: 10px clamp(14px, 2.4vw, 24px);
  background: var(--navy);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ledger__head span:last-child { text-align: right; }

.bar {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) clamp(104px, 16vw, 156px);
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.4vw, 24px);
  border-top: 1px solid var(--rule);
}
.bar__key {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  min-width: 0;
}
.bar__track {
  position: relative;
  display: block;
  height: clamp(22px, 3vw, 30px);
  background: rgba(10, 31, 68, 0.08);
  border: 2px solid var(--navy);
  min-width: 0;
}
.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--navy);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar.is-revealed .bar__fill { transform: scaleX(1); }
.no-js .bar__fill { transform: scaleX(1); }
.bar:nth-child(2) .bar__fill { background: var(--red); }
.bar:nth-child(3) .bar__fill { background: var(--navy); }
.bar:nth-child(4) .bar__fill { background: var(--gold); }
.bar:nth-child(5) .bar__fill { background: var(--navy-lift); }
.bar__val {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bar:nth-child(2) .bar__val { color: var(--red); }
.bar:nth-child(3) .bar__val { color: var(--navy); }
.bar:nth-child(4) .bar__val { color: var(--gold); }
.bar:nth-child(5) .bar__val { color: var(--navy-lift); }
.bar__unit { font-size: 0.45em; margin-left: 1px; }

/* ============ VOICES ============ */
.voices {
  background: var(--paper);
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  padding: clamp(48px, 8vw, 96px) var(--gutter);
}
.voices .section-head,
.voices__grid { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.voices .mono-label { color: var(--navy-lift); }
.voices .mono-idx { color: var(--red); }
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.quote { margin: 0; padding: clamp(22px, 3vw, 36px); border-left: 1px solid var(--rule); }
.quote:first-child { border-left: none; padding-left: 0; }
.quote blockquote {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.06;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.quote figcaption { color: var(--red); }

/* ============ JOIN ============ */
.join { background: var(--red); color: var(--cream); padding: clamp(48px, 8vw, 104px) var(--gutter); }
.join__inner { max-width: var(--maxw); margin: 0 auto; }
.join__label { color: var(--cream); opacity: 0.85; }
.join__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 6vw, 4.5rem);
  margin: 14px 0 18px;
  max-width: 20ch;
}
.join__body { max-width: 50ch; font-size: clamp(1rem, 1.6vw, 1.2rem); margin: 0 0 28px; }
.join__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============ VOTE ============ */
.vote { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter); }
.vote .mono-label { color: var(--navy-lift); }
.vote .mono-idx { color: var(--red); }
.vote__lede { max-width: 48ch; font-size: clamp(1rem, 1.8vw, 1.25rem); margin: 16px 0 0; }
.vote__dates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 2px solid var(--navy);
}
.vote__card { padding: clamp(22px, 3vw, 36px); }
.vote__card:first-child { border-right: 2px solid var(--navy); }
.vote__card .mono-label { color: var(--red); }
.vote__date {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 12px 0 0;
}
.vote__intro { max-width: 64ch; margin: clamp(18px, 3vw, 26px) 0 0; line-height: 1.55; }
.vote__places { margin-top: clamp(14px, 2.4vw, 22px); }
.vote__addr { margin: 12px 0 0; line-height: 1.5; }
.vote__addr strong { font-weight: 700; }
.vote__hours { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--navy-lift); margin: 10px 0 0; line-height: 1.5; }
.vote__card .vote__hours { color: var(--navy-lift); }

/* ============ FOOTER ============ */
.footer {
  background: var(--navy-deep);
  color: var(--cream);
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  border-top: 4px solid var(--red);
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 56px);
}
.footer .brand__mark--lg { background: var(--cream); color: var(--navy); }
.footer__name { font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; margin: 16px 0 6px; }
.footer__office { color: var(--gold); }
.footer__fppc { font-weight: 700; margin: 0 0 14px; }
.footer__disclaimer { color: rgba(247, 243, 233, 0.72); max-width: 70ch; font-size: 14px; margin: 0 0 14px; }
.footer__copy { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; margin: 0; opacity: 0.7; }

/* ============ LIVE NEWS TICKER (in-flow band between hero & pillars) ============ */
.ticker {
  position: static;
  width: 100%;
  max-width: 100%;
  background: var(--navy-deep);
  color: var(--cream);
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  overflow: hidden;
}
.ticker__bar {
  display: flex;
  align-items: stretch;
  height: var(--ticker-h);
  max-width: 100%;
}
.ticker__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 12px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-right: 2px solid var(--navy-deep);
}
.ticker__dot { font-size: 0.85em; line-height: 1; }
.js .ticker__dot { animation: tk-pulse 1.3s ease-in-out infinite; }
@keyframes tk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.ticker__stamp {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 12px;
  color: var(--gold);
  border-right: 1px solid var(--rule-cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticker__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  will-change: transform;
}
.js .ticker__track { animation: tk-scroll 38s linear infinite; }
.js .ticker:hover .ticker__track,
.js .ticker__track:focus-within { animation-play-state: paused; }
@keyframes tk-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ticker__item a { text-decoration: none; }
.ticker__item a:hover { color: var(--gold); text-decoration: underline; }
.ticker__sep {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--gold);
  font-size: 0.85em;
  font-family: var(--mono);
}

/* JS-off: ticker becomes a calm wrapped readable strip (not fixed). */
.no-js .ticker { position: static; }
.no-js .ticker__bar { height: auto; flex-wrap: wrap; }
.no-js .ticker__track { white-space: normal; flex-wrap: wrap; padding: 8px 0; }
.no-js .ticker__viewport { overflow: visible; padding: 0 12px; }
/* With JS off, the bottom padding reservation is unnecessary. */
.no-js body { padding-bottom: 0; }

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-revealed { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar__fill { transition: none; transform: scaleX(1); }
  .js .ticker__track { animation: none !important; transform: none !important; flex-wrap: wrap; }
  .js .ticker__dot { animation: none; }
  .ticker__viewport { overflow-x: auto; }
  .status__cursor { animation: none; }
  .js .status__dot { animation: none; }
  /* Hero shows the full static phrase, no cycling. */
  .js .cycle { display: none; }
  .js .cycle__static { display: inline; }
  .js .cycle__tail { display: none; }
  .btn, .nav__menu, .cycle__word { transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  /* Mobile order: "BOB NGUYEN · DISTRICT 4" -> title -> photo (under GROWTH) -> body.
     The FILE rule + breadcrumb are removed; the photo now sits above the lede's grey rule. */
  /* adequate breathing room below the sticky nav line for the top kicker */
  .hero { padding-top: clamp(26px, 7vw, 40px); }
  .hero__eyebrow { display: none; }    /* remove breadcrumb on mobile */
  .hero__kicker { display: block; }    /* new topmost text */
  .hero__split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "title"
      "photo"
      "body";
    column-gap: 0;
    row-gap: 0;
  }
  .hero__headline { margin-bottom: clamp(16px, 4vw, 24px); }  /* gap between title and photo */
  .hero-photo {
    margin-right: 0;
    min-height: clamp(300px, 56vw, 440px);
    flex-direction: column;
  }
  .hero-photo__media { width: 100%; }
  /* On mobile feather TOP/BOTTOM (and gently sides) instead of left/right. */
  .hero-photo__svg {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image:
      linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .hero-photo__feather {
    background:
      linear-gradient(180deg, var(--cream) 0%, rgba(247,243,233,0) 16%, rgba(247,243,233,0) 86%, var(--cream) 100%),
      linear-gradient(90deg, var(--cream) 0%, rgba(247,243,233,0) 8%, rgba(247,243,233,0) 92%, var(--cream) 100%);
  }
  /* name already shown as the top kicker on mobile — avoid the duplicate under the photo */
  .hero-photo__cap { display: none; }
}

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 2px solid var(--navy);
    padding: 8px var(--gutter) 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .nav__menu.is-open { max-height: 520px; }
  .nav__menu a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav__menu a:not(.btn):hover { border-bottom-color: var(--rule); }
  .lang-toggle { margin-top: 14px; align-self: flex-start; }
  .btn--donate { margin-top: 12px; }

  .voices__grid { grid-template-columns: 1fr; }
  .quote { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; }
  .quote:first-child { border-top: none; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__eyebrow { flex-wrap: wrap; gap: 8px; }
  .hero__rule { flex-wrap: wrap; gap: 6px 14px; }
  .hero__rule .mono-tag--end { margin-left: 0; }
  .vote__dates { grid-template-columns: 1fr; }
  .vote__card:first-child { border-right: none; border-bottom: 2px solid var(--navy); }
  .prio-row { grid-template-columns: 1fr; gap: 6px; }
  .prio-row__num { font-size: clamp(1.6rem, 9vw, 2.2rem); }

  /* Budget bars stack their label/track/value vertically. */
  .ledger__head { display: none; }
  .bar { grid-template-columns: 1fr; gap: 10px; }
  .bar__val { justify-content: flex-start; }

  /* Slim ticker on mobile; stamp hidden to save room. */
  :root { --ticker-h: 40px; }
  .ticker__stamp { display: none; }
  .no-js .ticker__stamp { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__menu { transition: none; }
}

/* === real candidate photo (added) === */
img.hero-photo__svg{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;background:#0a1f44;}

/* ============================================================
   PHOTO SIZE VARIANT: M
   De-zoom so the WHOLE downtown scene shows (more background, Bob smaller),
   photo fades into the text (left) and the page (right). Size set by the
   right grid column on desktop. Mobile keeps the full-width whole-scene photo.
   ============================================================ */
.hero-photo__media { flex: 0 0 auto; width: 100%; aspect-ratio: 1448 / 1086; }
@media (min-width: 961px) {
  .hero__split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr); }
  .hero-photo { min-height: 0; align-self: center; justify-content: center; margin-right: calc(var(--gutter) * -0.4); }
}
@media (max-width: 960px) {
  .hero-photo { min-height: 0; }
}

/* ============================================================
   ALIGN: photo pulled UP to the top of the headline; data table
   directly BELOW it on the right. Mobile keeps status at the end.
   ============================================================ */
@media (min-width: 961px) {
  .hero__split {
    grid-template-areas:
      "eyebrow eyebrow"
      "title   side"
      "body    side";
  }
  .hero__right {
    grid-area: side;
    align-self: start;                 /* top-align with the headline */
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 26px);
    margin-right: calc(var(--gutter) * -0.4);
  }
  .hero-photo { align-self: stretch; min-height: 0; margin: 0; }  /* fill right column width */
  .hero__right .status { margin-top: 0; width: 100%; }
}
@media (max-width: 960px) {
  /* release photo + status from the wrapper so they keep the mobile order:
     kicker -> title -> photo -> body -> status */
  .hero__right { display: contents; }
  .hero-photo { grid-area: photo; }
  .status { grid-area: status; }
  .hero__split {
    grid-template-areas:
      "kicker"
      "title"
      "photo"
      "body"
      "status";
  }
}

/* ============ FOOTER CONTACT ============ */
.footer__contact { margin-top: clamp(16px, 2.4vw, 22px); }
.footer__cta { color: var(--gold); margin: 0 0 9px; }
.footer__contact-line { margin: 0 0 5px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; }
.footer__contact-line a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(201, 161, 74, 0.5); padding-bottom: 1px; }
.footer__contact-line a:hover,
.footer__contact-line a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }