:root {
  --royal: #0132a0;      /* sampled from the header artwork */
  --royal-deep: #001f68;  /* darkened companion for footer + gradients */
  --royal-tint: #e9eefb;
  --gold: #ffe84b;
  --ground: #fafafa;
  --ink: #16202e;
  --ink-soft: #4a5568;
  --rule: #d8dee9;
  --measure: 68ch;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.wrap {
  width: min(100% - 2.5rem, 62rem);
  margin-inline: auto;
}

/* ---- header ---- */
.masthead {
  background: var(--royal);
  padding: 1.25rem 0;
}
.wordmark {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}
.wordmark span { color: var(--gold); }

/* ---- banner: home hero + interior page headers ---- */
/* Both are the same treatment - the header artwork stretched edge to edge
   under a royal scrim, copy above it - and differ only in height, set on each
   below. `cover` scales the artwork to fill and crops the overflow rather than
   distorting it; `100% 100%` would squash the cougars on tall narrow viewports.

   background-image is set INLINE by the layouts (the processed URL is
   fingerprinted and this stylesheet is served static, so it cannot know that
   hash). Everything that does not depend on the URL lives here. Two
   consequences: ::after carries the gradient scrim, because layering it into
   background-image here would be overridden by the inline declaration; and
   .pagehead must never use the `background` shorthand later in this file,
   which would reset the inline image. The scrim is what lets white headline
   text pass contrast over the artwork's mid-blues. */
.hero,
.pagehead {
  background-color: var(--royal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  isolation: isolate;
}
.hero::after,
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(1, 50, 160, 0.82) 0%, rgba(0, 31, 104, 0.93) 100%);
}
.hero > .wrap,
.pagehead > .wrap { position: relative; z-index: 1; }
.hero { padding: clamp(3rem, 9vw, 5.5rem) 0; }
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  max-width: 20ch;
  color: #fff;
}
.hero p {
  max-width: 46ch;
  margin: 1.25rem 0 0;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: #d6e0f2;
}
.datebar {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 2.25rem;
  padding: 0.85rem 1.4rem;
  border-left: 5px solid var(--gold);
  background: rgba(255, 255, 255, 0.08);
}
.datebar .label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.datebar .value { font-size: 1.2rem; font-weight: 600; color: #fff; }

/* ---- generic section ---- */
section { padding: clamp(2.75rem, 7vw, 4.5rem) 0; }
section > .wrap > h2 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  margin-bottom: 0.5rem;
}
.lede { color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2rem; }

/* ---- ballot cards ---- */
.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--royal);
  border-radius: 3px;
  padding: 1.75rem;
}
.card h3 { font-size: 1.3rem; margin-bottom: 0.35rem; color: var(--royal-deep); }
.card .kicker {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  display: block;
  margin-bottom: 0.6rem;
}
.card p { margin: 0 0 0.9rem; }
.card p:last-of-type { margin-bottom: 0; }


/* ---- dates ---- */
.dates { border-collapse: collapse; width: 100%; max-width: 44rem; }
.dates th, .dates td {
  text-align: left;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.dates th { font-weight: 600; color: var(--ink-soft); font-size: 0.9375rem; }
.dates td { font-weight: 600; white-space: nowrap; }
.dates tr.highlight td, .dates tr.highlight th { color: var(--royal); }
.dates tr.highlight td { font-size: 1.0625rem; }

/* ---- contact ---- */
.contact { background: var(--royal-tint); }
.btn {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.9rem 1.75rem;
  background: var(--royal);
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  font-weight: 600;
}
.btn:hover, .btn:focus { background: var(--royal-deep); }

/* ---- footer ---- */
footer {
  background: var(--royal-deep);
  color: #b9c6dd;
  padding: 2.25rem 0;
  font-size: 0.875rem;
}
.disclosure { margin: 0; color: #fff; font-weight: 600; }
.affiliation { margin: 0.4rem 0 0; }

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

/* ---- notes / attribution ---- */
.note {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---- feature + split layout ---- */
.split {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 46rem) {
  .split { grid-template-columns: 1fr; }
}
.split > div > p { max-width: 58ch; }

.readmore {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 3px;
  padding: 1.4rem 1.5rem;
}
.readmore > strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.readmore ul { margin: 0; padding-left: 1.1rem; }
.readmore li { margin-bottom: 0.7rem; font-size: 0.9375rem; }
.readmore a { color: var(--royal); font-weight: 600; }
.readmore a:hover { color: var(--royal-deep); }
.readmore .src {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ---- calculator callout ---- */
.calc .btn { margin-top: 0.5rem; }
.calc .note { margin-top: 1.25rem; }

/* ---- proposition cards ---- */
.card .kicker { color: var(--royal); }

/* ================= multi-page furniture ================= */

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
a.wordmark { text-decoration: none; }
.nav { display: flex; gap: 1.5rem; }
.nav a {
  color: #cddaf0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a.here { color: #fff; border-bottom-color: var(--gold); }

/* ---- interior page header ---- */
.pagehead { padding: clamp(2.5rem, 7vw, 4rem) 0; }
.pagehead h1 {
  color: #fff;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  max-width: 22ch;
}
.pagehead .lede { color: #d6e0f2; margin: 1rem 0 0; max-width: 52ch; }

/* ---- prose (markdown body) ---- */
.prose { max-width: 44rem; }
.prose h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
  margin: 2.5rem 0 0.75rem;
  color: var(--royal-deep);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; color: var(--royal-deep); }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
/* :not(.btn) matters. A bare `.prose a` is specificity 0-1-1 and outranks
   `.btn` at 0-1-0, so any button placed inside prose - like the calculator
   link on the VATRE page - got royal text on a royal background and vanished.
   Excluding buttons here fixes every current and future case instead of
   patching them one at a time. */
.prose a:not(.btn) { color: var(--royal); font-weight: 600; }
.prose a:not(.btn):hover { color: var(--royal-deep); }
.prose strong { color: var(--ink); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose thead th { color: var(--royal-deep); font-weight: 700; }
.prose blockquote {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.2rem;
  background: var(--royal-tint);
  border-left: 4px solid var(--royal);
  border-radius: 3px;
}

/* wide tables must scroll inside themselves, never the page */
.prose { overflow-x: auto; }

/* ---- proposition detail blocks ---- */
.props .prop {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--royal);
  border-radius: 3px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  max-width: 46rem;
}
.prop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.prop-id {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.props h2 { font-size: 1.35rem; margin: 0 0 0.5rem; color: var(--royal-deep); }
.prop-sum { margin: 0 0 1.1rem; color: var(--ink-soft); }
.prop-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.prop-items { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.prop-items li { margin-bottom: 0.4rem; }
.prop-ask {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--royal-deep);
}

/* ---- footer additions ---- */
.foot-vote { margin: 0 0 0.5rem; color: #fff; font-weight: 600; font-size: 1rem; }
.foot-contact { margin: 0 0 1.25rem; }
.foot-contact a { color: var(--gold); font-weight: 600; }

.more { margin: 1.75rem 0 0; }
.dates-section { background: var(--ground); }


/* ================= brand artwork ================= */

/* Masthead lockup: the mark sits beside the wordmark, not instead of it —
   the logo reads "LS" and a visitor who does not already know the committee
   needs the name spelled out. */
a.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.wordmark .mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
  background: #fff;
}
.wordmark-text { line-height: 1; }

@media (max-width: 40rem) {
  .wordmark .mark { width: 34px; height: 34px; }
}


/* ================= featured VATRE block ================= */

/* Carries the page's primary message, so it gets the tinted band, a heavier
   lede, and more vertical room than an ordinary section. Everything else on
   the home page is deliberately quieter than this. */
.feature {
  background: var(--royal-tint);
  padding: clamp(3rem, 8vw, 5rem) 0;
  border-top: 4px solid var(--royal);
}
.eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--royal);
}
.feature > .wrap > h2 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  color: var(--royal-deep);
  max-width: 18ch;
  margin-bottom: 0.9rem;
}
.lede-lg {
  font-size: clamp(1.0625rem, 2.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 2.5rem;
}
.feature h3 {
  font-size: 1.2rem;
  color: var(--royal-deep);
  margin: 0 0 0.6rem;
}
.feature .readmore { background: #fff; }

/* ---- Facebook link ---- */
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
.ctas .btn { margin-top: 0; }
.btn-fb, .foot-fb { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-fb { background: #fff; color: var(--royal); border: 1px solid var(--royal); }
.btn-fb:hover, .btn-fb:focus { background: var(--royal); color: #fff; }
.foot-fb { color: var(--gold); font-weight: 600; text-decoration: none; margin-left: 1.25rem; }
.foot-fb:hover { text-decoration: underline; }
.foot-fb .icon { vertical-align: middle; }
@media (max-width: 34rem) {
  .foot-fb { display: flex; margin: 0.6rem 0 0; }
}

/* ---- FAQ ---- */
/* h2 is a section label (General, The projects, Taxes), set as a small caps
   rule rather than a serif heading so it reads as a divider and never competes
   with a question for the eye. */
.faq h2 {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--royal);
  margin: 3rem 0 0;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--royal);
}
.faq h2:first-of-type { margin-top: 2rem; }

/* Each question is a <details>. The whole summary row is the click target, not
   just the words, so it is forgiving on a phone. */
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  padding: 1.1rem 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  line-height: 1.3;
  color: var(--royal-deep);
  list-style: none;                    /* Firefox default triangle */
}
.qa summary::-webkit-details-marker { display: none; }  /* Safari default triangle */
.qa summary:hover { color: var(--royal); }
.qa summary:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 3px;
}
.qa[open] summary { color: var(--royal); }

/* Chevron drawn from two borders - no icon file, no request. Points down when
   closed, up when open. */
.qa summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.5rem;
  border-right: 2px solid var(--royal);
  border-bottom: 2px solid var(--royal);
  transform: rotate(45deg);
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .qa summary::after { transition: transform 150ms ease; }
}

.qa-body { padding: 0 0 1.4rem; max-width: 54ch; }
.qa-body > :first-child { margin-top: 0; }
.qa-body > :last-child { margin-bottom: 0; }
.qa-body p { font-size: 1.0625rem; line-height: 1.6; }

/* The sourcing line and the "More:" pointers - present, out of the way. */
.faq > p:first-child { font-size: 0.875rem; color: var(--ink-soft); font-style: italic; }
.qa-body em:only-child { font-size: 0.875rem; color: var(--ink-soft); }

/* ---- get involved ---- */
/* Two equal asks side by side - time and money - so neither reads as the
   afterthought. They stack on narrow screens through the existing .cards
   grid. */
.help-cards { margin-top: 2rem; align-items: start; }
.help-cards .card h3 { font-size: 1.45rem; }
.help-cards .btn { margin-top: 0.75rem; }
.ways { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.ways li { margin-bottom: 0.55rem; }
.ways a { color: var(--royal); font-weight: 600; }
.note-biz {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}
.note-biz strong { color: var(--royal-deep); }

/* An item's note is our explanation sitting under the district's verbatim
   line. Indented and set apart so a reader can always tell which words are
   whose - the page says so directly in the sourcing note. */
.item-note {
  display: block;
  margin-top: 0.25rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--gold);
  font-size: 0.875rem;
  color: var(--ink-soft);
}