/* ───────── Home: "ANC Commissioner" ─────────
   Civic editorial. Navy and red carry the page; blue is the working accent.
   Light Parkinsans display, uppercase Inter labels, a DC street-plan motif. */

.page-home {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #5B6575;
  --accent: var(--blue);
  --soft: #F1F3F6;
}

/* ───────── Hero ───────── */
.hero {
  position: relative; isolation: isolate; color: var(--paper);
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(5, 114, 176, .38), transparent 62%),
    radial-gradient(700px 520px at -10% 40%, rgba(5, 114, 176, .18), transparent 70%),
    var(--navy);
  padding-top: calc(var(--nav-h) + clamp(64px, 12vh, 140px));
}
/* Hillcrest map (images/hillcrest-map.webp, 2400 x 1353). The point just above the HILLCREST
   label sits at 50.05% / 52.76% of the image; that point is anchored to --pin-x / --pin-y,
   where the animated marker sits. --map-w is sized so the map always reaches the left edge. */
.hero {
  --map-w: max(1900px, 175vw);
  --pin-x: 84%;
  --pin-y: clamp(250px, 30vh, 330px);
}
.hero__map {
  position: absolute; z-index: -2; left: var(--pin-x); top: var(--pin-y); width: var(--map-w); aspect-ratio: 2400 / 1353;
  transform: translate(-50.05%, -52.76%); pointer-events: none;
  background: url("../images/hillcrest-map.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: .17;
  /* broad fade centred on Hillcrest; most of the hero shows the map */
  -webkit-mask-image: radial-gradient(ellipse 48% 46% at 50.05% 52.76%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 48% 46% at 50.05% 52.76%, #000 55%, transparent 100%);
}
.js .hero__map { opacity: 0; transition: opacity 2.4s var(--ease) .3s; }
.js .is-ready .hero__map { opacity: .17; }
.hero__pin {
  position: absolute; z-index: -1; left: var(--pin-x); top: var(--pin-y); width: 0; height: 0; pointer-events: none;
}
.hero__pin i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #E0393A;
  box-shadow: 0 0 0 4px rgba(224, 57, 58, .22);
}
.hero__pin i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid #E0393A; animation: pulse 2.8s ease-out infinite; }
.js .hero__pin { opacity: 0; transition: opacity 1s var(--ease) 1.4s; }
.js .is-ready .hero__pin { opacity: 1; }
@media (max-width: 960px) {
  .hero { --map-w: max(1400px, 180vw); --pin-x: 76%; --pin-y: 118px; }
}
@media (max-width: 600px) {
  .hero { --map-w: 1150px; --pin-x: 70%; --pin-y: 104px; }
  }
.hero__grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__grid path, .hero__grid circle { fill: none; stroke: #fff; vector-effect: non-scaling-stroke; }
.grid-lines path { stroke-opacity: .06; stroke-width: 1; }
.grid-avenues path, .grid-avenues circle { stroke-opacity: .12; stroke-width: 1.2; stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.js .is-ready .grid-avenues path, .js .is-ready .grid-avenues circle { animation: draw 3.2s var(--ease) forwards; }
.grid-avenues > :nth-child(2) { animation-delay: .25s !important; }
.grid-avenues > :nth-child(3) { animation-delay: .5s !important; }
.grid-avenues > :nth-child(4) { animation-delay: .65s !important; }
.grid-avenues > :nth-child(5) { animation-delay: .8s !important; }
.grid-avenues > :nth-child(6) { animation-delay: 1s !important; }
html:not(.js) .grid-avenues path, html:not(.js) .grid-avenues circle { stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__inner { display: grid; gap: clamp(22px, 3vh, 36px); }
.hero__eyebrow { display: inline-flex; align-items: baseline; gap: 12px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.hero__eyebrow b { color: var(--paper); font-weight: 600; }
.pulse { position: relative; flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: #E0393A; }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #E0393A; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.hero__title {
  font: 300 clamp(46px, 9.4vw, 148px)/.94 var(--font-display); letter-spacing: -.045em;
  margin-left: -.04em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line--strong { font-weight: 600; }
.js .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .is-ready .hero__title .line > span { transform: none; }
.js .is-ready .hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.js [data-hero-in] { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s; }
.js .is-ready [data-hero-in] { opacity: 1; transform: none; }
.js .is-ready .hero__eyebrow[data-hero-in] { transition-delay: .05s; }

.hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 6px; }
.hero__place { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .78); font-size: 16px; }
.hero__place svg { flex: none; width: 18px; height: 18px; color: #E0393A; }
.nowrap { white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Video: half on navy, half on the red band. Scroll grows it (JS sets --p 0..1). */
.hero__stage { position: relative; margin-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(28px, 5vh, 56px); }
.hero__stage::before {
  content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 46%;
  transform: translateX(-50%); background: var(--red);
}
.video {
  --p: 0;
  position: relative; z-index: 1; aspect-ratio: 16 / 9; overflow: hidden; background: #081a31;
  border-radius: calc(34px - 16px * var(--p));
  transform: scale(calc(.9 + .1 * var(--p))); transform-origin: 50% 0;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
  will-change: transform;
}
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.video:not(.is-playing):not(.has-poster) video { opacity: 0; }
.video__placeholder { position: absolute; inset: 0; background: linear-gradient(160deg, #0f2d52, #081a31); overflow: hidden; }
.video__placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #081a31 0%, rgba(8, 26, 49, .85) 38%, rgba(8, 26, 49, .25) 75%, rgba(8, 26, 49, .5) 100%),
              radial-gradient(60% 90% at 30% 50%, rgba(5, 114, 176, .35), transparent 70%);
}
.video__placeholder img { position: absolute; right: 0; top: 0; width: 62%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(.35) contrast(1.05); }
.video__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(72px, 9vw, 112px); aspect-ratio: 1; margin: 0;
  translate: -50% -50%; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: var(--paper);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: transform .4s var(--ease), background .3s;
}
.video__play svg { width: 34%; height: 34%; margin-left: 6%; }
.video__play::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); animation: pulse 2.6s ease-out infinite; }
.video__play:hover { transform: scale(1.08); background: var(--red); }
.video__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end;
  padding: clamp(16px, 2.4vw, 28px); background: linear-gradient(to top, rgba(8, 26, 49, .75), transparent);
  pointer-events: none;
}
.video__cap .eyebrow { color: rgba(255, 255, 255, .85); }
.video__time { font: 500 13px/1 var(--font-body); letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.video.is-playing .video__play, .video.is-playing .video__cap, .video.is-playing .video__placeholder { opacity: 0; pointer-events: none; }
.video__play, .video__cap, .video__placeholder { transition: opacity .4s; }
.video__note { position: absolute; z-index: 3; left: 50%; bottom: 18%; translate: -50% 0; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.55); font-size: 14px; color: #fff; }

/* ───────── Ticker (on the red band) ───────── */
.ticker { background: var(--red); color: var(--paper); overflow: hidden; padding: 0 0 clamp(26px, 4vh, 40px); }
.ticker__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; flex: none; }
.ticker__list li {
  display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap;
  font: 300 clamp(20px, 2vw, 28px)/1 var(--font-display); letter-spacing: -.02em;
}
.ticker__list li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────── About ───────── */
.about {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  padding-block: clamp(80px, 13vh, 150px);
}
.about__photo { position: relative; }
.about__photo::before {
  content: ""; position: absolute; inset: 7% -14px -14px 7%; border-radius: var(--radius); background: var(--red); z-index: -1;
}
.about__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.about__tag {
  position: absolute; left: 18px; top: 18px; padding: 9px 14px; border-radius: 999px; background: rgba(12, 35, 64, .82);
  color: var(--paper); font: 500 12px/1 var(--font-body); letter-spacing: .14em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.about__copy { display: grid; gap: 24px; min-width: 0; }
.about__copy .h2 { color: var(--navy); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.stats > div { padding: 22px 22px 20px; min-width: 0; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats dt { font: 400 clamp(28px, 3vw, 42px)/1 var(--font-display); letter-spacing: -.04em; color: var(--navy); }
.stats dd { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.35; }

/* ───────── Why I ran ───────── */
.why { background: var(--soft); padding-block: clamp(80px, 13vh, 150px) 0; }
.why__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.why__side { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: 20px; }
.why__side .h2 { color: var(--navy); }
.why__index { display: flex; gap: 8px; margin-top: 12px; }
.why__index li {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  font: 500 13px/1 var(--font-body); color: var(--muted); transition: all .45s var(--ease);
}
.why__index li.is-active { background: var(--navy); border-color: var(--navy); color: var(--paper); transform: scale(1.06); }
.why__list { display: grid; gap: 20px; min-width: 0; }
.issue {
  position: relative; display: grid; gap: 22px; padding: clamp(26px, 3.6vw, 48px);
  background: var(--paper); border-radius: var(--radius); border: 1px solid rgba(12, 35, 64, .06);
  overflow: hidden;
}
.issue::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) .2s; }
.issue.is-in::before, html:not(.js) .issue::before { transform: none; }
.issue__num { font: 500 13px/1 var(--font-body); letter-spacing: .12em; color: var(--blue); }
.issue__quote { font: 300 clamp(26px, 2.7vw, 40px)/1.12 var(--font-display); letter-spacing: -.03em; color: var(--navy); text-wrap: balance; }
.issue__body { white-space: pre-line; color: var(--slate); font-size: 17px; line-height: 1.75; }

.closing { padding-block: clamp(80px, 14vh, 160px); }
.closing__text {
  max-width: 22ch; font: 300 clamp(36px, 5.6vw, 84px)/1.06 var(--font-display); letter-spacing: -.04em; color: var(--navy);
}
.closing__text .w { color: rgba(12, 35, 64, .16); transition: color .35s; }
.closing__text .w.is-lit { color: var(--navy); }
.closing__text .w.is-key { color: var(--red); }
.closing__text .w.is-key:not(.is-lit) { color: rgba(161, 31, 32, .2); }

/* ───────── Pledge ───────── */
.pledge {
  position: relative; overflow: hidden; color: var(--paper);
  background: radial-gradient(900px 500px at 100% 0%, rgba(5, 114, 176, .35), transparent 65%), var(--navy);
  padding-block: clamp(80px, 13vh, 150px);
}
.pledge__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pledge__head { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: 20px; }
.pledge .eyebrow { color: rgba(255, 255, 255, .6); }
.pledge .h2 { font-size: clamp(44px, 6.4vw, 96px); }
.pledge__sign {
  width: min(320px, 80%); height: auto; margin-top: 16px; opacity: .92;
  filter: brightness(0) invert(1); /* black ink to white; works from a local file too */
}
.pledge__list { counter-reset: pledge; border-top: 1px solid rgba(255, 255, 255, .14); }
.pledge__list li {
  counter-increment: pledge; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 24px 4px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pledge__list li::after { content: counter(pledge, decimal-leading-zero); font: 500 12px/1 var(--font-body); letter-spacing: .12em; color: rgba(255, 255, 255, .4); }
.pledge__check {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(5, 114, 176, .22); color: #8FD0F5; box-shadow: inset 0 0 0 1px rgba(143, 208, 245, .3);
  transition: background .4s, color .4s, transform .4s var(--ease);
}
.pledge__check svg { width: 20px; height: 20px; }
.pledge__check use { stroke-dasharray: 30; stroke-dashoffset: 0; }
.js .pledge__list li:not(.is-in) .pledge__check svg { opacity: 0; }
.pledge__check svg { transition: opacity .5s .3s; }
.pledge__text { font: 300 clamp(19px, 1.7vw, 25px)/1.3 var(--font-display); letter-spacing: -.02em; transition: transform .45s var(--ease); }
.pledge__list li:hover .pledge__check { background: var(--red); color: var(--paper); transform: rotate(-8deg) scale(1.06); }
.pledge__list li:hover .pledge__text { transform: translateX(6px); }

/* ───────── Contact ───────── */
.contact {
  position: relative; padding-block: clamp(80px, 13vh, 150px);
  background:
    linear-gradient(to bottom, var(--paper), rgba(255,255,255,.6) 30%, rgba(255,255,255,.6) 70%, var(--paper)),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(12, 35, 64, .05) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(12, 35, 64, .05) 79px 80px),
    var(--paper);
}
.contact__inner { display: grid; gap: clamp(36px, 5vh, 56px); }
.contact__head { display: grid; gap: 18px; max-width: 760px; }
.contact__head .h2 { color: var(--navy); }
.contact__alt { color: var(--muted); }
.contact__alt a { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.card {
  display: grid; align-content: start; gap: 24px; min-width: 0; padding: clamp(22px, 3vw, 36px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 60px -40px rgba(12, 35, 64, .35);
}
.card__head { display: flex; align-items: center; gap: 14px; }
.card__head .h3 { color: var(--navy); }
.card__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(5, 114, 176, .1); color: var(--blue); }
.card__ico svg { width: 21px; height: 21px; }
.card__ico--light { background: rgba(255, 255, 255, .12); color: var(--paper); }
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 4px; }
.card--cal { grid-template-rows: auto 1fr; }
.cal { position: relative; min-height: 660px; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); }
.cal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cal__fallback { position: absolute; inset: 0; height: max-content; margin: auto; padding: 24px; text-align: center; color: var(--muted); font-size: 15px; }
.cal__fallback a { color: var(--blue); }

.signup {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 48px; align-items: center;
  padding: clamp(26px, 3.6vw, 44px); border-radius: var(--radius); color: var(--paper);
  background: radial-gradient(600px 300px at 0% 0%, rgba(5, 114, 176, .45), transparent 70%), var(--navy);
}
.signup__copy { display: flex; gap: 18px; align-items: flex-start; }
.signup__copy p { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.6; }
.signup__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.signup__form .field--wide { grid-column: 1 / -1; }
.signup__form .btn { justify-self: start; }
.signup__form .form__status { grid-column: 1 / -1; color: rgba(255, 255, 255, .75); }
.signup__form .form__status.is-ok { color: #9BE3B5; }
.signup__form .form__status.is-err { color: #FFB4B4; }
.field--dark > span { color: rgba(255, 255, 255, .6); }
.field--dark input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: var(--paper); }
.field--dark input:focus { border-color: #8FD0F5; box-shadow: 0 0 0 4px rgba(143, 208, 245, .18); }

/* Footer sits on navy on this page */
.page-home .atg-foot { background: var(--navy); }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .signup { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .about, .why__inner, .pledge__inner, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .why__side, .pledge__head { position: static; }
  .why__index { display: none; }
  .about__photo { max-width: 440px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: space-between; }
  .hero__stage::before { height: 40%; }
  .about__photo::before { inset: 7% -8px -8px 7%; }
  .video__play { width: 64px; }
  .video { border-radius: calc(22px - 8px * var(--p)); }
  .video__cap .eyebrow { font-size: 11px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 20px; }
  .stats dd { margin: 0; text-align: right; }
  .form__row, .signup__form { grid-template-columns: minmax(0, 1fr); }
  .pledge__list li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .pledge__list li::after { display: none; }
  .pledge__check { width: 40px; height: 40px; }
  .cal { min-height: 720px; margin-inline: -8px; }
  .issue__body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker__list[aria-hidden] { display: none; }
  .ticker__list { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding-inline: 16px; }
  .video { transform: none; }
  .closing__text .w { color: var(--navy); }
}