/* bluewavesc.org. Blue Wave SC's brand as on the sign-up form's header: navy and the wave's sky, on white, in one
   typeface (Figtree, the closest Google Fonts face to the form header's Avenir Next, served from here). */
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --navy: #012957;
  --sky: #29B7FF;
  --white: #ffffff;
  --mist: #c9dcef;      /* the navy's own hue, lightened: secondary words on the navy field */
  --line: #d9e3ee;      /* rules on white, and 2024's gray on the map */
  --ink-2: rgba(1, 41, 87, 0.74);  /* secondary words on white: the navy, lightened by the paper */
  --pad: max(24px, calc((100vw - 1200px) / 2));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font: 400 18px/1.5 "Figtree", "Avenir Next", system-ui, sans-serif;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sky); color: var(--navy); }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, figure { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: var(--pad); }

/* The first screen, built from Apple's event page (apple.com/apple-events): one field, the event's mark at size,
   its name, the date once, one line and the one button, on one centre line. */
.first { background: var(--navy); color: var(--white); padding-block: 40px 72px; text-align: center; }
.lockup { display: flex; align-items: center; justify-content: center; gap: 16px; font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.015em; }
.lockup img { height: 92px; width: auto; }
.lockup span { padding-top: 0.06em; }  /* the name's capitals sit on the mark's middle, measured on the export */
.first h1 {
  margin-top: 56px;
  font-size: clamp(32px, 10.2vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.keep { white-space: nowrap; }
.when { margin-top: 28px; font-size: clamp(20px, 1.2vw + 15px, 30px); font-weight: 700; line-height: 1.2; }
.what { margin: 12px auto 0; max-width: 38em; color: var(--mist); font-size: clamp(17px, 0.5vw + 15px, 22px); line-height: 1.45; text-wrap: balance; }
.go { margin-top: 36px; }
.act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 14px 36px;
  background: var(--sky); color: var(--navy);
  font-size: 19px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none;
  border-radius: 999px;
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.act:hover { background: #5ccaff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.act:focus-visible { outline-color: var(--white); }

@media (max-width: 599px) {
  .first { padding-block: 32px 48px; }
  .lockup { gap: 12px; font-size: 24px; }
  .lockup img { height: 62px; }
  .first h1 { margin-top: 40px; }
  .when { margin-top: 20px; }
  .go { margin-top: 28px; }
  .act { display: flex; width: 100%; min-height: 58px; padding-inline: 16px; font-size: clamp(15px, 4.36vw, 17px); }
}

/* Phase 2 builds these out; until then they stand as plain words in the plan's order. */
.stub { padding-block: 48px; border-top: 1px solid var(--line); }
.stub:first-child { border-top: 0; }
.stub h2 { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.stub p { margin-top: 10px; max-width: 38em; }
.count { font-weight: 800; }
.foot { padding-block: 40px 56px; border-top: 1px solid var(--line); font-size: 16px; }
.org { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.org img { height: 24px; width: auto; }

/* 2. The map. Built from SDPB's candidate map (one color, white hairlines, the district's number first), the Post's SC
   map (a few cities for bearings, the seats as rows) and GGWash's guide (one search over the list; the open district in
   the second color, its card beside the map and never over it). research/map notes.txt has the reading. */
.map { padding-block: 72px 88px; }
.map-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* The year: two words of equal weight; the chosen one filled. Radio buttons, so it works with scripts off. */
.year { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 4px; border: 2px solid var(--navy); border-radius: 999px; min-inline-size: 0; }
.year input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.year label { min-width: 104px; padding: 9px 24px; border-radius: 999px; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.year input:checked + label { background: var(--navy); color: var(--white); }
.year input:not(:checked) + label:hover { background: var(--line); }
.year input:focus-visible + label { outline: 3px solid var(--sky); outline-offset: 2px; }

.statement { max-width: 21ch; font-size: clamp(30px, 2.4vw + 13px, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
.y24 { display: none; }
.map[data-year="2024"] .y24 { display: inline; }
.map[data-year="2024"] .y26 { display: none; }
.map:has(#year-2024:checked) .y24 { display: inline; }
.map:has(#year-2024:checked) .y26 { display: none; }
.map:has(#year-2026:checked) .y24 { display: none; }
.map:has(#year-2026:checked) .y26 { display: inline; }

.map-body { display: grid; gap: 24px; margin-top: 36px; }
.map-figure { position: relative; }
.sc { display: block; width: 100%; height: auto; overflow: visible; }
.sc a { outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
.sc .d path { fill: var(--navy); stroke: var(--white); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.map[data-year="2024"] .sc .d.no24 path { fill: var(--line); }
.map:has(#year-2024:checked) .sc .d.no24 path { fill: var(--line); }
.map:has(#year-2026:checked) .sc .d.no24 path { fill: var(--navy); }
.sc .d:hover path, .sc .d:focus-visible path, .sc .d.is-open path,
.map:has(#year-2026:checked) .sc .d.no24.is-open path, .map:has(#year-2026:checked) .sc .d.no24:hover path, .map:has(#year-2026:checked) .sc .d.no24:focus-visible path { fill: var(--sky); }
.sc .d:focus-visible path { stroke: var(--navy); stroke-width: 2; }
.mark { pointer-events: none; }
.mark .halo { fill: none; stroke: var(--white); stroke-width: 7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mark .ring { fill: var(--sky); stroke: var(--sky); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Cities for bearings: a dot at the city and its name in a small navy plate beside it, which reads on the navy, on
   2024's gray and on the water alike; they never take a tap. */
.cities { position: absolute; inset: 0; pointer-events: none; }
.city { position: absolute; width: 0; height: 0; }
.city::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--navy); }
.city span { position: absolute; padding: 3px 6px 4px; border-radius: 4px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.city-e span { left: 8px; top: 0; transform: translateY(-50%); }
.city-w span { right: 8px; top: 0; transform: translateY(-50%); }
.city-se span { left: 6px; top: 6px; }
.pin { position: absolute; width: 0; height: 0; }
.pin[hidden] { display: none; }
.pin span { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 8px)); padding: 4px 7px 5px; border-radius: 5px; background: var(--navy); color: var(--white); box-shadow: 0 0 0 2px var(--white); font-size: 14px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pin span::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 0; height: 0; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--navy); transform: translateX(-50%); }
.city-sw span { right: 6px; top: 6px; }

/* The card: one object on its own field, one fact per element. */
.card-slot:empty { display: none; }
.card { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.card-top { display: flex; align-items: center; gap: 20px; }
.face { flex: none; width: 112px; height: 112px; border-radius: 14px; object-fit: cover; background: var(--navy); }
.face-initials { display: grid; place-items: center; color: var(--white); font-size: 38px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
.who { min-width: 0; }
.name { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.district { margin-top: 10px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.counties { margin-top: 2px; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.links { display: grid; gap: 4px; margin: 20px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); }
.links a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 17px; font-weight: 700; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.links .site { overflow-wrap: anywhere; }
.icon { flex: none; width: 20px; height: 20px; fill: currentColor; }
.ama { margin-top: 14px; font-size: 16px; font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sources { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.sources summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 700; cursor: pointer; list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms; }
.sources[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.sources ul { margin: 6px 0 0; padding: 0 0 0 18px; max-width: 70ch; }
.sources li + li { margin-top: 4px; }

/* Every district, as rows: the same content as the map, for a phone, a keyboard or a screen reader. */
.roster { margin-top: 56px; }
.find { position: sticky; top: 0; z-index: 2; margin-top: 12px; padding-block: 10px; background: var(--white); border-bottom: 1px solid var(--line); }
.find-title { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.search { display: block; width: 100%; max-width: 560px; height: 52px; padding: 0 16px; border: 2px solid var(--navy); border-radius: 12px; background: var(--white); color: var(--navy); font: inherit; font-size: 18px; -webkit-appearance: none; appearance: none; }
.search::placeholder { color: var(--ink-2); opacity: 1; }
.search:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.search-status { min-height: 0; font-size: 15px; color: var(--ink-2); }
.search-status:not(:empty) { margin-top: 8px; }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.row { border-bottom: 1px solid var(--line); scroll-margin-top: 88px; }
.row[hidden] { display: none; }
.row-head { display: flex; align-items: center; gap: 14px; min-height: 58px; padding-block: 8px; list-style: none; }
summary.row-head { cursor: pointer; }
summary.row-head::-webkit-details-marker { display: none; }
summary.row-head:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; border-radius: 6px; }
.num { flex: none; width: 36px; font-size: 20px; font-weight: 800; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.row-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-name { font-size: 17px; font-weight: 700; line-height: 1.2; }
.row-counties { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.chev { flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
details[open] > summary .chev { transform: rotate(180deg); }
.row-more { display: flex; align-items: flex-start; gap: 16px; padding: 2px 0 18px 50px; }
.row-more .face { width: 72px; height: 72px; border-radius: 10px; font-size: 26px; }
.row-more .links { margin: 0; padding: 0; border: 0; gap: 0; }
.row-more .links a { min-height: 36px; font-size: 16px; }

@media (min-width: 640px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .map-body { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .card-slot { position: sticky; top: 24px; }
  .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .rows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .map { padding-block: 48px 56px; }
  .map-head { gap: 18px; }
  .year { width: 100%; }
  .year label { min-width: 0; }
  .map-body { margin-top: 28px; gap: 20px; }
  .city span { font-size: 11px; padding: 2px 5px 3px; }
  .city-w span { right: auto; left: 0; top: -8px; transform: translate(-50%, -100%); }
  .card { padding: 20px; }
  .card-top { gap: 16px; }
  .face { width: 88px; height: 88px; border-radius: 12px; }
  .face-initials { font-size: 30px; }
  .name { font-size: 24px; }
  .district { margin-top: 6px; font-size: 17px; }
  .roster { margin-top: 40px; }
  .find-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }