/* ==========================================================================
   Democratic Judges — demjudges.com
   Brand palette sampled from the original DJ logo artwork:
     deep blue #2471B8 · sky #31A8DF · magenta #D91570
   Typeface pair (Oswald + Inter) carried over from the original site's own
   Google-font set. Static site, no CMS.
   ========================================================================== */

:root {
  --blue: #2471b8;
  --blue-dk: #1b5893;
  --blue-dkr: #123f6c;
  --sky: #31a8df;
  --sky-lt: #e8f4fb;
  --mag: #d91570;
  --mag-dk: #b30f5b;

  --ink: #10233c;
  --ink-2: #33465e;
  --ink-3: #5d6f86;
  --line: #dde5ee;
  --line-2: #eef3f8;
  --paper: #ffffff;
  --paper-2: #f6f9fc;

  --shadow-sm: 0 1px 2px rgba(16, 35, 60, 0.06),
    0 2px 6px rgba(16, 35, 60, 0.05);
  --shadow: 0 2px 4px rgba(16, 35, 60, 0.06),
    0 10px 26px rgba(16, 35, 60, 0.09);
  --shadow-lg: 0 4px 8px rgba(16, 35, 60, 0.07),
    0 24px 60px rgba(16, 35, 60, 0.14);

  --r: 12px;
  --r-lg: 18px;
  --wrap: 1200px;
  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue-dk);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--mag);
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- utility bar */
.util {
  background: var(--ink);
  color: #b9c7d8;
  font-size: 13.5px;
}
.util .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.util a {
  color: #d6e2ef;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  gap: 7px;
}
.util a:hover {
  color: #fff;
}
.util .util-spacer {
  margin-left: auto;
}
.util svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.75;
}
.util-count {
  color: #fff;
  font-weight: 600;
}
.util-count b {
  color: var(--sky);
}

/* ---------------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
/* The wordmark is the real DJ artwork, never re-created in CSS — the sky-blue
   "DEMOCRATIC" only reads correctly as part of the drawn lockup. */
.brand-lockup {
  height: 46px;
  width: auto;
}
.brand-icon {
  display: none;
  height: 44px;
  width: auto;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav a:hover {
  background: var(--sky-lt);
  color: var(--blue-dk);
}
.nav a[aria-current="page"] {
  color: var(--blue-dk);
  box-shadow: inset 0 -3px 0 var(--mag);
}
/* `.nav a` outranks `.btn-mag`, so without this the nav Donate button renders
   dark ink on magenta (3.2:1). Keep button colours winning inside the nav. */
.nav a.btn-mag,
.nav a.btn-mag:hover {
  color: #fff;
}
.nav a.btn:hover {
  background: var(--mag-dk);
}

.burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
}
.burger span::before {
  top: -6px;
}
.burger span::after {
  top: 6px;
}
.burger span,
.burger span::before,
.burger span::after {
  transition: transform 0.18s ease, opacity 0.14s ease, top 0.18s ease;
}
/* Open state: the same three bars become an X, so the button the panel sits
   under is unambiguously "close". */
.burger[aria-expanded="true"] {
  border-color: var(--blue);
  background: var(--sky-lt);
}
.burger[aria-expanded="true"] span {
  background: transparent;
}
.burger[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 24px;
  min-height: 48px;
  border-radius: 10px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.tier-link svg,
.btn-sm svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.btn-mag {
  background: var(--mag);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-mag:hover {
  background: var(--mag-dk);
  color: #fff;
}
.btn-blue {
  background: var(--blue);
  color: #fff;
}
.btn-blue:hover {
  background: var(--blue-dk);
  color: #fff;
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue-dk);
  background: var(--sky-lt);
}
.btn-onblue {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}
.btn-onblue:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: #fff;
}
.btn-sm {
  padding: 9px 16px;
  min-height: 40px;
  font-size: 14px;
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: linear-gradient(160deg, #123f6c 0%, #1b5893 45%, #2471b8 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      780px 460px at 88% -8%,
      rgba(49, 168, 223, 0.45),
      transparent 70%
    ),
    radial-gradient(
      560px 400px at 4% 108%,
      rgba(217, 21, 112, 0.3),
      transparent 68%
    );
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  padding-top: 68px;
  padding-bottom: 68px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 54px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cde8f8;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mag);
  box-shadow: 0 0 0 3px rgba(217, 21, 112, 0.28);
  flex: none;
}
.hero h1 {
  color: #fff;
  font-size: clamp(40px, 6.4vw, 74px);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 em {
  font-style: normal;
  color: var(--sky);
}
.hero-lede {
  font-size: clamp(17px, 1.7vw, 20px);
  color: #d7e6f3;
  max-width: 56ch;
  margin: 0 0 30px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* countdown / dates card in hero */
.hero-card {
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
}
.hero-card h2 {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.countdown {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.cd-unit {
  flex: 1;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 6px 9px;
  text-align: center;
}
.cd-unit b {
  display: block;
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
}
.cd-unit span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 5px;
}
.date-rows {
  border-top: 1px solid var(--line);
}
.date-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
}
.date-row:last-child {
  border-bottom: 0;
}
.date-row dt {
  color: var(--ink-3);
  margin: 0;
}
.date-row dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

/* ----------------------------------------------------------------- sections */
.sec {
  padding: 74px 0;
}
.sec-tight {
  padding: 52px 0;
}
.sec-alt {
  background: var(--paper-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.sec-ink {
  background: var(--ink);
  color: #c4d2e2;
}
.sec-ink h2,
.sec-ink h3 {
  color: #fff;
}

.sec-head {
  max-width: 760px;
  margin-bottom: 40px;
}
.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.kicker {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mag);
  margin: 0 0 12px;
}
.sec-ink .kicker {
  color: var(--sky);
}
.sec h2 {
  font-size: clamp(30px, 4vw, 45px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.sec-head p {
  font-size: 18px;
  margin: 0;
}
.sec-ink .sec-head p {
  color: #b6c6d9;
}

/* ------------------------------------------------------------- tier summary */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tier-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--sky);
}
.tier-num {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 4px;
}
.tier-card h3 {
  font-size: 21px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tier-card p {
  margin: 0 0 18px;
  font-size: 15.5px;
  color: var(--ink-3);
}
.tier-link {
  margin-top: auto;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mag);
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  gap: 7px;
}

/* WCAG 2.5.8 — standalone links that are not inline in a sentence (breadcrumbs,
   definition-list rows, endorsement lists) each need a 24px pointer target.
   Links inside running prose are covered by the inline exception and are left
   alone so body copy keeps its natural leading. */
.crumbs a,
.kv dd > a,
.end-list li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ---------------------------------------------------------------- filter bar */
.filters {
  position: sticky;
  top: 78px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.filters-in {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 15px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.chip:hover {
  border-color: var(--sky);
  color: var(--blue-dk);
}
.chip[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.chip .n {
  font-size: 12px;
  background: var(--line-2);
  color: var(--ink-3);
  border-radius: 999px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .n {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.search-wrap {
  position: relative;
  margin-left: auto;
  min-width: 240px;
  flex: 1 1 240px;
  max-width: 340px;
}
.search-wrap svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ink-3);
  pointer-events: none;
}
input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
}
input[type="search"] {
  padding-left: 40px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sky);
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 168, 223, 0.2);
}

/* -------------------------------------------------------------- judge cards */
.group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 48px 0 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.group-head:first-of-type {
  margin-top: 0;
}
.group-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  text-transform: uppercase;
  margin: 0;
}
.group-head .tag {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: 4px 11px;
  border-radius: 999px;
}
.group-head .tag.appellate {
  /* --sky behind white 12.5px text is only 2.7:1; this is the same hue,
     darkened until it clears AA for small text. */
  background: #16719b;
}
.group-head .tag.statewide {
  background: var(--mag);
}
.group-note {
  margin: 14px 0 26px;
  font-size: 15.5px;
  color: var(--ink-3);
  max-width: 78ch;
}
.group-note b {
  color: var(--ink-2);
}

.judge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}

.jcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.jcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--sky);
}
.jcard-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(170deg, #dfeaf4, #c9dcec);
  overflow: hidden;
}
.jcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.jcard-photo .noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 44px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(160deg, var(--blue), var(--blue-dkr));
  letter-spacing: 0.02em;
}
.badge {
  position: absolute;
  top: 11px;
  left: 11px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mag);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
}
.badge.open {
  background: var(--blue-dk);
}
.jcard-body {
  padding: 17px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.jcard-court {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mag);
  margin-bottom: 6px;
  min-height: 2.2em;
}
.jcard h3 {
  font-size: 21px;
  line-height: 1.12;
  margin: 0 0 8px;
}
.jcard h3 a {
  color: var(--ink);
  text-decoration: none;
}
.jcard h3 a:hover {
  color: var(--blue-dk);
}
.jcard-meta {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.jcard-links {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.iconlink {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-3);
  background: #fff;
}
.iconlink:hover {
  border-color: var(--blue);
  color: var(--blue-dk);
  background: var(--sky-lt);
}
.iconlink svg {
  width: 17px;
  height: 17px;
}

.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--ink-3);
}
.empty h3 {
  font-size: 24px;
  text-transform: uppercase;
}

/* --------------------------------------------------------- judge detail page */
.jhero {
  background: linear-gradient(155deg, #123f6c, #2471b8);
  color: #fff;
  padding: 46px 0 46px;
}
.jhero-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}
.jhero-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #dfeaf4;
  box-shadow: var(--shadow-lg);
}
.jhero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.jhero h1 {
  color: #fff;
  font-size: clamp(32px, 5vw, 54px);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.jhero .court {
  font-family: var(--display);
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0 0 20px;
}
.jhero .bio {
  font-size: 18px;
  color: #d9e7f4;
  max-width: 62ch;
  margin: 0 0 24px;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
}
.pill {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #eaf4fb;
}
.pill.mag {
  background: var(--mag);
  border-color: var(--mag);
  color: #fff;
}

.panels {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 32px;
  align-items: start;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.panel h2 {
  font-size: 21px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.panel h3 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 8px;
}
.panel p:last-child {
  margin-bottom: 0;
}
.panel-mag {
  border-left: 4px solid var(--mag);
}
.aside {
  position: sticky;
  top: 100px;
}
.kv {
  margin: 0;
  font-size: 15px;
}
.kv div {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
}
.kv div:last-child {
  border-bottom: 0;
}
.kv dt {
  flex: 0 0 86px;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 2px;
}
.kv dd {
  margin: 0;
  word-break: break-word;
  flex: 1;
}
.end-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.end-list li {
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
  font-size: 15.5px;
}
.end-list li:last-child {
  border-bottom: 0;
}
.end-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mag);
}
.socials {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.crumbs {
  font-size: 14px;
  padding: 16px 0;
  color: var(--ink-3);
}
.crumbs a {
  color: var(--blue-dk);
}
.crumbs span {
  padding: 0 7px;
  opacity: 0.5;
}

/* ------------------------------------------------------------------ platform */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: 4px 4px var(--r) var(--r);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.pillar:nth-child(2n) {
  border-top-color: var(--sky);
}
.pillar:nth-child(3n) {
  border-top-color: var(--mag);
}
.pillar .ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--sky-lt);
  color: var(--blue-dk);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.pillar .ico svg {
  width: 24px;
  height: 24px;
}
.pillar h3 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pillar p {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------- numbers */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 600;
  line-height: 1;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9db2c8;
  margin-top: 10px;
}

/* ---------------------------------------------------------------- steps/vote */
.steps {
  counter-reset: s;
  display: grid;
  gap: 18px;
}
.step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: s;
  content: counter(s);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.step h3 {
  font-size: 21px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.step p:last-child {
  margin-bottom: 0;
}

.callout {
  background: var(--sky-lt);
  border: 1px solid #bfe0f2;
  border-left: 5px solid var(--sky);
  border-radius: 4px var(--r) var(--r) 4px;
  padding: 20px 24px;
  margin: 26px 0;
}
.callout h3 {
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout.warn {
  background: #fff5f9;
  border-color: #f6cede;
  border-left-color: var(--mag);
}

/* ------------------------------------------------------------------- ballot */
.ballot-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ballot-head {
  background: var(--ink);
  color: #fff;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ballot-head img {
  height: 44px;
  width: auto;
}
.ballot-head h2 {
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
  margin: 0;
}
.ballot-head p {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: #a9bccf;
}
.ballot-sec {
  padding: 6px 26px 18px;
}
.ballot-sec h3 {
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-dk);
  border-bottom: 2px solid var(--sky-lt);
  padding-bottom: 8px;
  margin: 22px 0 4px;
}
.ballot-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dotted var(--line);
}
.ballot-row:last-child {
  border-bottom: 0;
}
.ballot-row .office {
  font-size: 13.5px;
  color: var(--ink-3);
}
.ballot-row .who {
  font-weight: 600;
  color: var(--ink);
  font-size: 16.5px;
}
.ballot-row .who .inc {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mag);
  border: 1px solid #f3cbdd;
  background: #fff5f9;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
  white-space: nowrap;
}
.ballot-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink-3);
  border-radius: 4px;
  flex: none;
}

/* --------------------------------------------------------------------- forms */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.field .req {
  color: var(--mag);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checks {
  display: grid;
  gap: 10px;
}
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15.5px;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.check:hover {
  border-color: var(--sky);
  background: var(--sky-lt);
}
.check input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--blue);
  flex: none;
}
.help {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 6px 0 0;
}
.form-status {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 15px;
  display: none;
}
.form-status.show {
  display: block;
}
.form-status.ok {
  background: #eaf7ef;
  border: 1px solid #b8e2c8;
  color: #1c6b3a;
}
.form-status.err {
  background: #fff1f4;
  border: 1px solid #f4c4d3;
  color: #9a1140;
}
.form-status.busy {
  background: var(--sky-lt);
  border: 1px solid #bfe0f2;
  color: var(--blue-dkr);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* -------------------------------------------------------------------- donate */
.amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.amount {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  padding: 18px 8px;
  min-height: 62px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  display: grid;
  place-items: center;
}
.amount:hover {
  background: #fff;
  color: var(--blue-dkr);
  border-color: #fff;
}

/* -------------------------------------------------------------------- footer */
.site-foot {
  background: var(--ink);
  color: #95a8bd;
  font-size: 15px;
  padding: 56px 0 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 38px;
  padding-bottom: 40px;
}
.site-foot h4 {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-foot a {
  color: #b7c8da;
  text-decoration: none;
}
.site-foot a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-foot li {
  padding: 1px 0;
}
/* WCAG 2.5.8 — these are navigation lists, not inline prose, so each link
   needs a 24px-minimum pointer target of its own. */
.site-foot li a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.foot-legal a,
.disclaimer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.foot-brand img {
  height: 52px;
  margin-bottom: 16px;
}
.foot-brand p {
  margin: 0 0 16px;
  max-width: 34ch;
}
.soc {
  display: flex;
  gap: 10px;
}
.soc a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: #cfdcea;
}
.soc a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.soc svg {
  width: 18px;
  height: 18px;
}
.disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 24px 0 30px;
  font-size: 13px;
  line-height: 1.7;
  color: #7e93aa;
}
.disclaimer strong {
  color: #c3d3e3;
}
.disclaimer p {
  margin: 0 0 8px;
  max-width: 100ch;
}
.foot-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 18px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px;
}
.foot-legal .util-spacer {
  margin-left: auto;
}

/* ==================================================== responsive: iPad first */
@media (max-width: 1080px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .panels {
    grid-template-columns: 1fr;
  }
  .aside {
    position: static;
  }
}

@media (max-width: 1024px) {
  /* iPad portrait */
  .nav a {
    font-size: 14px;
    padding: 8px 9px;
  }
  .brand-lockup {
    height: 40px;
  }
  .site-head .wrap {
    min-height: 70px;
  }
  .filters {
    top: 70px;
  }
  /* Once the chips wrap, the search field should own the next row outright
     rather than floating right and leaving a dead gap beside the chips. */
  .search-wrap {
    margin-left: 0;
    max-width: none;
    flex: 1 1 100%;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-card {
    max-width: 560px;
  }
  .tier-cards {
    grid-template-columns: 1fr;
  }
  .sec {
    padding: 58px 0;
  }
}

@media (max-width: 900px) {
  /* `.site-head` sets backdrop-filter, which makes it the containing block for
     any position:fixed descendant — so the panel can never escape the header.
     Anchor it deliberately BELOW the header instead of trying to overlay the
     viewport, which previously painted white over the logo and the burger and
     left the menu with no visible way to close it. */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 8px 20px 22px;
    gap: 4px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.open {
    display: flex;
  }
  /* Dimmed page behind the open panel, so it reads as a layer and a tap
     anywhere outside it is an obvious way out. */
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(16, 35, 60, 0.45);
    z-index: 90;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .nav a {
    font-size: 18px;
    padding: 15px 14px;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
  }
  .nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--mag);
  }
  .nav .btn {
    margin-top: 14px;
    border-bottom: 0;
  }
  .burger {
    display: flex;
  }
  body.nav-open {
    overflow: hidden;
  }
  .jhero-grid {
    grid-template-columns: 190px 1fr;
    gap: 26px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16.5px;
  }
  .wrap,
  .wrap-narrow {
    padding: 0 18px;
  }
  .util .wrap {
    font-size: 12.5px;
    gap: 6px 16px;
  }
  .util .util-spacer {
    margin-left: 0;
  }
  .hero .wrap {
    padding-top: 44px;
    padding-bottom: 48px;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .sec {
    padding: 46px 0;
  }
  .jhero-grid {
    grid-template-columns: 1fr;
  }
  .jhero-photo {
    max-width: 230px;
  }
  .judge-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
  }
  .search-wrap {
    max-width: none;
    margin-left: 0;
  }
  .step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .amounts {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .panel {
    padding: 22px 20px;
  }
  .ballot-sec {
    padding: 6px 18px 14px;
  }
  .ballot-head {
    padding: 18px;
  }
}

@media (max-width: 420px) {
  .brand-lockup {
    display: none;
  }
  .brand-icon {
    display: block;
  }
  .judge-grid {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
  .jcard-body {
    padding: 13px 13px 14px;
  }
  .jcard h3 {
    font-size: 17px;
  }
  .jcard-court {
    font-size: 10.5px;
  }
  .jcard-meta {
    display: none;
  }
  .countdown {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==================================================================== print */
@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }
  .util,
  .site-head,
  .filters,
  .site-foot,
  .no-print,
  .hero,
  .sec-ink {
    display: none !important;
  }
  body {
    font-size: 10.5pt;
    line-height: 1.3;
    color: #000;
    background: #fff;
  }
  .sec {
    padding: 0;
  }
  /* No outer box: a bordered block that spans pages draws stray rules down
     the dead space at each page end. Header rule only. */
  .ballot-sheet {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .ballot-head {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1.5pt solid #000;
    padding: 0 0 8pt;
    break-after: avoid;
  }
  .ballot-head h2 {
    color: #000 !important;
    font-size: 15pt;
  }
  .ballot-head p {
    color: #333 !important;
  }
  /* Sections must FLOW across the page break — avoiding a break inside a
     whole section left half of every printed page empty and pushed the guide
     to three pages. Keep individual rows and their headings intact instead. */
  .ballot-sec {
    padding: 0;
    break-inside: auto;
  }
  .ballot-sec h3 {
    color: #000;
    border-bottom: 1pt solid #000;
    font-size: 9pt;
    margin: 8pt 0 0;
    padding-bottom: 3pt;
    break-after: avoid;
    break-inside: avoid;
  }
  /* Tuned so all 31 races + the § 253.1612 disclaimer land on two sheets —
     one fold, pocket-sized, which is how a slate card actually gets used. */
  .ballot-row {
    padding: 2pt 0;
    break-inside: avoid;
  }
  .ballot-row .who {
    font-size: 10.5pt;
    line-height: 1.2;
  }
  .ballot-row .who .inc {
    color: #000;
    border-color: #666;
    background: #fff;
  }
  .ballot-row .office {
    font-size: 8pt;
    line-height: 1.25;
  }
  .print-only {
    display: block !important;
  }
  a[href]::after {
    content: "";
  }
}
.print-only {
  display: none;
}