/* ==========================================================================
   Cortrecht for Noblesville — stylesheet
   Campaign brand: #fffc00 / #ffffff / #000000.
   Yellow is a FILL, never small text — #fffc00 on white is ~1.1:1. Thin rules
   and label text use --hairline / --link, which flip per theme.
   Plain CSS, no build step, no webfonts. Mobile-first, light + dark aware.
   ========================================================================== */

:root {
  /* --- brand: identical in both themes ---------------------------------- */
  --brand:       #fffc00;   /* fills: strip, buttons, skip link  */
  --brand-hover: #e6e300;
  --on-brand:    #0a0a0a;   /* text on a yellow fill — 18.5:1    */

  /* --- light theme ------------------------------------------------------ */
  --limestone:   #ffffff;   /* page field                        */
  --limestone-2: #f4f4f2;   /* alternating sections, card fields */
  --limestone-3: #d9d9d5;   /* borders                           */
  --ink:         #0a0a0a;   /* body text                         */
  --ink-muted:   #545454;
  --copper:      #474747;   /* eyebrow / small caps label        */
  --link:        #0a0a0a;   /* interactive text + focus ring     */
  --link-hover:  #000000;
  --hairline:    #0a0a0a;   /* rules and accent bars             */

  --max: 68rem;
  --measure: 38rem;         /* prose line length                 */
  --radius: 2px;            /* squared off — civic, not soft     */
  --shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --limestone:   #000000;
    --limestone-2: #0e0e0c;
    --limestone-3: #333330;
    --ink:         #ffffff;
    --ink-muted:   #b0b0ab;
    --copper:      #fffc00;
    --link:        #fffc00;
    --link-hover:  #ffffff;
    --hairline:    #fffc00;
    --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .45);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--limestone);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }
.mt0 { margin-top: 0; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.prose { max-width: var(--measure); }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-alt { background: var(--limestone-2); }

/* --- skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--on-brand);
  padding: .6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- election strip ------------------------------------------------------ */

.strip {
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: .55rem 1.25rem;
  text-wrap: balance;
}
.strip strong { font-weight: 700; }

/* On narrow screens the general-election date is dropped so the bar stays
   one or two lines instead of three. */
@media (max-width: 40rem) {
  .strip { font-size: .82rem; padding: .5rem .9rem; }
  .strip .strip-secondary { display: none; }
}

/* --- header / nav -------------------------------------------------------- */

.site-header {
  background: var(--limestone);
  border-bottom: 1px solid var(--limestone-3);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  max-width: var(--max);
  margin-inline: auto;
  padding: .75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand picture { display: flex; }
.brand img { width: 34px; height: 34px; }
.brand span { line-height: 1.1; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  font-size: .95rem;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--link); }
.nav-links a[aria-current="page"] {
  color: var(--link);
  border-bottom-color: var(--hairline);
}

/* Donate sits in the same list but reads as a button, so it carries the yellow
   fill rather than the shared nav treatment. No border-bottom: the underline
   would sit oddly under a filled chip. */
.nav-links a.nav-donate {
  background: var(--brand);
  color: var(--on-brand);
  padding: .3rem .8rem;
  border-bottom: 0;
  border-radius: var(--radius);
  font-weight: 600;
}
.nav-links a.nav-donate:hover { background: var(--brand-hover); color: var(--on-brand); }

/* --- hairline rule ------------------------------------------------------- */

.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 1.5rem 0;
  max-width: 6rem;
}
.rule-wide { max-width: none; opacity: .5; }

/* --- hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 48rem) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.hero-photo {
  margin: 0;
  border: 1px solid var(--limestone-3);
  border-top: 3px solid var(--hairline);
  background: var(--limestone-2);
  padding: .5rem;
  box-shadow: var(--shadow);
}
/* <picture> is inline by default; these wrap block images inside figures, so
   without this the figure gets a stray text baseline gap under the photo. */
.hero-photo picture,
.gallery picture { display: block; }
.hero-photo img { display: block; width: 100%; }

/* --- donate band ---------------------------------------------------------- */

/* Solid brand yellow in both themes, like the courthouse band — it is meant to
   interrupt the page rather than sit inside it. Text is --on-brand, not --ink,
   because --ink flips to white in dark mode and would vanish here. */
.donate-band {
  background: var(--brand);
  color: var(--on-brand);
  border-block: 1px solid var(--on-brand);
  padding-block: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.donate-band h2 { margin: 0 0 .4rem; color: var(--on-brand); }
.donate-band p  { margin: 0; max-width: var(--measure); color: var(--on-brand); }
.donate-band .btn {
  background: var(--on-brand);
  color: var(--brand);
  border-color: var(--on-brand);
  margin-top: 1.25rem;
  font-size: 1.05rem;
  padding: .8rem 1.6rem;
}
.donate-band .btn:hover { background: #2a2a2a; border-color: #2a2a2a; color: var(--brand); }

/* --- photo + text split --------------------------------------------------- */

.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48rem) {
  .split { grid-template-columns: 19rem minmax(0, 1fr); gap: 3rem; }
}

/* --- photo gallery ------------------------------------------------------- */

.gallery {
  display: grid;
  gap: 1.5rem 1.25rem;
  /* min() is load-bearing: a bare minmax(19rem, 1fr) sets a 304px floor, which
     is wider than the 280px .wrap leaves at a 320px viewport, and the grid
     overflows the page. min(19rem, 100%) lets the track collapse to the
     container when there isn't room. Every other grid here sits inside a
     min-width media query, so this is the only one that needs it. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.gallery figure { margin: 0; }

/* Fixed ratio so the grid stays even. The source files are already cropped to
   4:5 with a per-photo gravity, so object-fit has nothing left to cut off. */
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--limestone-3);
  border-top: 3px solid var(--hairline);
  background: var(--limestone-2);
}

.gallery figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Keep the headshot from filling the whole first screen on a phone — the
   candidate's name should be visible without scrolling. */
@media (max-width: 47.99rem) {
  .hero-photo { max-width: 13rem; }
}

.eyebrow {
  display: block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  margin-bottom: .75rem;
}

.hero h1 { margin-bottom: .25rem; }

.tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-style: italic;
  color: var(--link);
  margin: 0 0 1rem;
}

.lead {
  font-size: 1.125rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* --- courthouse band ----------------------------------------------------- */

.courthouse-band {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  background: var(--brand);
  border-top: 1px solid var(--on-brand);
  overflow: hidden;
  line-height: 0;
}
.courthouse-band img {
  display: block;
  width: 100%;
  min-width: 40rem;
  margin-inline: auto;
}

/* --- buttons ------------------------------------------------------------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: var(--on-brand);
  border: 1px solid var(--brand);
  padding: .7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }

.btn-outline {
  background: transparent;
  color: var(--link);
  border-color: var(--limestone-3);
}
.btn-outline:hover { background: transparent; color: var(--link-hover); border-color: var(--link); }

/* --- pillars (Streets / Schools / Safety) -------------------------------- */

.pillars {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 46rem) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.pillar { border-top: 3px solid var(--hairline); padding-top: 1rem; }
.pillar h3 { margin-bottom: .35rem; }
.pillar p { margin: 0; color: var(--ink-muted); font-size: .98rem; }

/* --- pull quote ---------------------------------------------------------- */

.pullquote {
  margin: 0;
  border-left: 3px solid var(--hairline);
  padding-left: clamp(1rem, 3vw, 2rem);
  max-width: 46rem;
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
}
.pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: .9rem;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- pledge block -------------------------------------------------------- */

.pledge {
  background: var(--limestone);
  border: 1px solid var(--limestone-3);
  border-top: 3px solid var(--hairline);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
}
.pledge h2 { margin-top: 0; }
.pledge p:last-child { margin-bottom: 0; }

/* --- planks (positions) -------------------------------------------------- */

.plank-layout { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .plank-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; }
}

.plank-nav { align-self: start; }
@media (min-width: 60rem) {
  .plank-nav { position: sticky; top: 5.5rem; }
}
.plank-nav h2 {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .75rem;
}
.plank-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .93rem;
  counter-reset: jump;
  border-top: 1px solid var(--limestone-3);
}
.plank-nav li { counter-increment: jump; border-bottom: 1px solid var(--limestone-3); }
.plank-nav a {
  display: block;
  padding: .5rem 0;
  color: var(--ink);
  text-decoration: none;
}
.plank-nav a::before {
  content: counter(jump, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--link);
  margin-right: .6rem;
}
.plank-nav a:hover { color: var(--link); }

.plank { counter-increment: plank; padding-top: 1.75rem; }
.plank + .plank { border-top: 1px solid var(--limestone-3); margin-top: 2.5rem; }
.planks { counter-reset: plank; }

.plank-num {
  display: block;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--link);
  margin-bottom: .5rem;
}
.plank-num::after { content: counter(plank, decimal-leading-zero) " / 09"; }

.plank h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-bottom: .75rem; }

.plank ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}
.plank li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .6rem;
  color: var(--ink);
}
.plank li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: .45rem;
  height: 1px;
  background: var(--link);
}

/* --- about: facts sidebar ------------------------------------------------ */

.about-layout { display: grid; gap: 2.5rem; }
@media (min-width: 58rem) {
  .about-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.5rem; }
}

.facts {
  background: var(--limestone-2);
  border-top: 3px solid var(--hairline);
  padding: 1.5rem;
  align-self: start;
}
@media (min-width: 58rem) { .facts { position: sticky; top: 5.5rem; } }
.facts h2 {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}
.facts dl { margin: 0; font-size: .93rem; }
.facts dt {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
}
.facts dd { margin: 0 0 1rem; }
.facts dd:last-child { margin-bottom: 0; }

figure.inline-photo { margin: 2rem 0; }
figure.inline-photo img { display: block; border: 1px solid var(--limestone-3); }
figure.inline-photo figcaption {
  font-size: .85rem;
  color: var(--ink-muted);
  margin-top: .6rem;
}

/* --- volunteerism -------------------------------------------------------- */

.org-group + .org-group { margin-top: 3rem; }
.org-group > h2 {
  font-size: 1.1rem;
  font-family: var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid var(--limestone-3);
  padding-bottom: .6rem;
}

.org-list { list-style: none; margin: 0; padding: 0; }
.org-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--limestone-3); }
.org-list h3 { margin-bottom: .2rem; font-size: 1.15rem; }
.org-list p { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

/* --- long unbreakable strings --------------------------------------------- */

/* An email address or URL is one "word" to the line breaker, so it sets the
   min-content width of everything containing it. Grid and flex tracks cannot
   size below min-content, so at 320px "Cortrecht4Noblesville@protonmail.com"
   (267px on its own) pushed the Get Connected column to 315px inside a 280px
   container and scrolled the page sideways.
   `anywhere`, not `break-word`: only `anywhere` actually reduces min-content,
   which is the value track sizing reads. It still only breaks when the word
   would otherwise overflow. */
a[href^="mailto:"],
a[href^="http"] { overflow-wrap: anywhere; }

/* Belt and braces for the same class of problem: grid children default to
   min-width:auto, so any future long string would do this again. */
.contact-grid > *,
.footer-grid > *,
.about-layout > *,
.split > * { min-width: 0; }

/* --- forms --------------------------------------------------------------- */

.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--limestone);
  border: 1px solid var(--limestone-3);
  border-radius: var(--radius);
  padding: .6rem .7rem;
}
.field textarea { min-height: 7rem; resize: vertical; }

.checks { list-style: none; margin: 0 0 1rem; padding: 0; }
.checks li { margin-bottom: .5rem; }
.checks label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.checks input { margin-top: .3rem; flex: none; }

.contact-methods { list-style: none; margin: 0; padding: 0; font-size: 1.05rem; }
.contact-methods li { padding: .9rem 0; border-bottom: 1px solid var(--limestone-3); }
.contact-methods span {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  margin-bottom: .15rem;
}

.note {
  background: var(--limestone-2);
  border-left: 3px solid var(--copper);
  padding: 1rem 1.25rem;
  font-size: .93rem;
  color: var(--ink-muted);
}
.note p:last-child { margin-bottom: 0; }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  background: var(--limestone-2);
  border-top: 3px solid var(--hairline);
  padding-block: 2.5rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-size: .95rem;
}

.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 44rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}
.footer-grid strong { font-family: var(--font-display); font-size: 1.1rem; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav li { margin-bottom: .4rem; }
.site-footer nav a { color: var(--ink); text-decoration: none; }
.site-footer nav a:hover { color: var(--link); text-decoration: underline; }

.disclaimer {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--limestone-3);
  font-size: .82rem;
  color: var(--ink-muted);
  max-width: 46rem;
}

/* --- motion -------------------------------------------------------------- */

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

/* --- print --------------------------------------------------------------- */

@media print {
  .site-header, .strip, .courthouse-band, .btn-row, .plank-nav { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}