/* Variant A - Night sky. Mirrors the yard sign: navy panel with the copy (left), photo (right), treeline on the panel. */
body { background: var(--buff); }
.site-header { background: rgba(22,38,74,.94); color: var(--buff); }
.brand-mark, .brand-text { color: var(--buff); }
.site-nav .btn, .header-actions .btn { background: var(--buff); color: var(--navy); border-color: var(--buff); }
.site-nav .btn:hover, .header-actions .btn:hover { background: var(--white); }
.nav-toggle { color: var(--buff); }
.header-actions .hdr-about { background: var(--pine); color: var(--buff); border-color: var(--pine); }
.header-actions .hdr-about:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.header-actions .hdr-about[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--buff); }

/* hero: navy copy panel LEFT, photo RIGHT, seam cut at the brand angle (12.4deg). No text ever sits on the face. */
.hero-photo { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 48%); background: var(--navy); color: var(--buff); min-height: min(76vh, 720px); position: relative; }
/* the panel overlaps the photo by 160px and that overlap is sliced at 12.4deg (tan * 720px ~ 158px). Copy stays left of the cut. */
.hero-panel { position: relative; z-index: 2; order: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--navy);
  margin-right: -160px; clip-path: polygon(0 0, 100% 0, calc(100% - 160px) 100%, 0 100%);
  padding: clamp(2.5rem, 6vw, 5rem) calc(160px + 2rem) 0 max(1.25rem, calc((100vw - var(--wrap)) / 2)); }
.hero-copy { position: relative; z-index: 2; padding-bottom: clamp(5rem, 10.5vw, 10rem); width: 100%; }
.hero-copy > * { max-width: min(100%, 32rem); }
.hero-copy .hero-vote { max-width: none; white-space: nowrap; }
.hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.hero-copy .cta { flex-wrap: wrap; }
.hero-copy .kicker { color: #cfe3d6; }
.hero-copy h1 { color: var(--buff); }
.hero-copy .sub { color: #e6e0cc; }
.hero-copy .hero-vote { color: #cfe3d6; }
.hero-copy .hero-vote strong { color: var(--buff); }
.hero-treeline { position: absolute; left: 0; right: 0; bottom: -2px; color: var(--pine); line-height: 0; z-index: 1; }
.hero-treeline svg { width: 100%; height: auto; min-width: 100%; }
.hero-media { position: relative; order: 2; min-height: 360px; z-index: 1; }
.hero-media picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 28%; }
/* hero lockup modes */
.hero-lockup svg { width: min(280px, 70%); height: auto; color: var(--buff); margin-bottom: 1.25rem; }
.lockup-svg .hero-copy h1 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: #cfe3d6; }
.office-line { font-weight: 800; font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--buff); border-top: 3px solid var(--pine); padding-top: .75rem; margin-top: .25rem; display: inline-block; }

@media (max-width: 860px) {
  .hero-photo { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { order: 1; min-height: 0; height: min(62vw, 240px); }
  .hero-img { object-position: 50% 30%; }
  .hero-panel { order: 2; margin: 0; clip-path: none; padding: 1.25rem 1.25rem 0; }
  .hero-copy { padding-bottom: 4rem; }
  .hero-copy > * { max-width: 100%; }
  .hero-copy .kicker { margin-bottom: .4rem; }
  .hero-copy h1 { margin-bottom: .4em; }
  .hero-copy .sub { margin-bottom: .75em; }
  .hero-copy .cta { margin-top: 1rem; gap: .5rem; }
  .hero-copy .cta .btn { flex: 1 1 45%; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: .6rem .8rem; }
  .hero-copy .hero-vote { margin-top: .85rem; }
  .hero-lockup svg { width: min(220px, 60%); margin-bottom: .75rem; }
}
@media (max-width: 860px) { .hero-copy .hero-vote { white-space: normal; } }
@media (max-width: 375px) {
  .hero-media { height: 132px; }
  .hero-copy .kicker { font-size: .75rem; letter-spacing: .08em; }
  .hero-copy .kicker .kick-date { display: none; }
  .hero-copy h1 { font-size: 1.9rem; }
  .hero-copy .cta .btn { white-space: nowrap; padding: .6rem .5rem; font-size: .95rem; }
}
@media (max-width: 420px) { .hero-copy .kicker .kick-date { display: block; padding-left: 0; } }
@media (max-width: 375px) { .hero-copy .kicker .kick-date { display: none; } }


/* sections: pine (priorities) -> buff (case) -> white (vote) */
.priorities { background: var(--pine); color: var(--buff); padding-top: clamp(2rem, 5vw, 4rem); }
.priorities h2 { color: var(--buff); }
.priorities .kw-row { border-top-color: rgba(246,240,220,.35); }
.priorities .kw span { color: var(--buff); }
.priorities .card { background: var(--buff); color: var(--ink); border-top-color: var(--navy); box-shadow: 0 18px 40px -24px rgba(15,27,54,.6); }
.priorities .card h3 { color: var(--pine-deep); }
.priorities sup.fn a { color: inherit; }
.sources { background: var(--buff); }
.case { background: var(--buff); }
.case h3 { color: var(--pine-deep); }
.case .case-pt:last-child { border-top-color: var(--pine); }
.vote-teaser { background: var(--buff); border-top: 8px solid var(--navy); }
.page-head { background: var(--navy); color: var(--buff); padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-head .lede { color: #e6e0cc; }
.vote-card h3 { color: var(--navy); }
.foot-mark { color: var(--pine); background: var(--buff); }
@media (max-width: 420px) { .hero-copy .kicker .kick-dot { display: none; } }