/* Archivo, self-hosted (SIL OFL). Variable: weight 400-900, width 62-125.
   Latin subset only — 88KB roman + 100KB italic. */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2-variations"),
       url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-italic-var.woff2") format("woff2-variations"),
       url("assets/fonts/archivo-italic-var.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   F.T. Franks Jr. — Wilson County Board of Education, District 7
   Direction: the yard sign, rebuilt for a screen.

   Taken from the sign: the black ground, the blue-to-gold gradient
   on the display caps, the red brush band, heavy italic extended
   caps. Left behind: the outlines, the drop shadows, and the
   gradient on anything small enough to have to read.

   The gradient is spent once, on the wordmark. Everything after it
   is quiet on purpose.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Sampled from the print artwork (4034px, 300dpi), not the photo.
     The ground is navy, not black — that was the photo misleading us. */
  --navy:     #080F1F;   /* the sign's ground */
  --navy-2:   #0C1428;   /* reading ground, a half-step up */
  --navy-lit: #011972;   /* the glow behind the wordmark */
  --gold:     #EADB21;   /* the sign's yellow — lemon, not orange */
  --gold-hi:  #F9EE5E;
  --gold-out: #FAD900;   /* the outline on the display caps */
  --mint:     #ABEBCA;   /* top of the WILSON gradient */
  --mint-2:   #E5EAC4;
  --red:      #EE0035;   /* hot, pink-leaning — not a brick red */
  --red-dark: #910321;
  --paper:    #F9F5E2;   /* the sign's warm white */
  --paper-2:  #9AA3B8;   /* secondary, tinted to the navy */
  --rule:     #1C2740;

  --t-base:  1.1875rem;
  --t-small: 0.9375rem;
  --t-place: clamp(1.25rem, 2.6vw, 1.625rem);
  --t-era:   clamp(1.5rem, 3.4vw, 2.125rem);
  --t-name:  clamp(2.6rem, 10vw, 7rem);
  --t-quote: clamp(1.1875rem, 2.2vw, 1.4375rem);

  --measure: 64ch;
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --year-col: 7.5rem;
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-2);
  color: var(--paper);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-base);
  font-variation-settings: "wdth" 100;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter); top: 0.75rem; z-index: 10;
  padding: 0.5rem 0.875rem;
  background: var(--gold); color: var(--navy);
  font-size: var(--t-small); font-weight: 600;
}

/* ═══════════ MASTHEAD ═══════════ */

.hero {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(116,166,240,.13) 1.1px, transparent 1.2px),
    radial-gradient(125% 95% at 28% 20%, rgba(1,25,114,.60), transparent 64%);
  background-size: 7px 7px, auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}
.hero-inner { max-width: var(--wrap); margin-inline: auto; }

.hero-office {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  color: var(--paper-2);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The wordmark: the sign's own two-line lockup, in live text. */
.hero-name {
  margin: 0;
  font-size: var(--t-name);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;

  -webkit-text-stroke: 0.035em var(--gold-out);
  paint-order: stroke fill;
}

.wm-line {
  display: block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wm-1 {
  background-image: linear-gradient(177deg,
    var(--paper) 4%, #F4EFAE 34%, var(--gold-hi) 62%, var(--gold) 88%, #D5C20C 100%);
}
.wm-2 {
  background-image: linear-gradient(177deg,
    var(--mint) 4%, var(--mint-2) 38%, var(--gold-hi) 66%, var(--gold) 90%, #D5C20C 100%);
}
.wm-2 .wm-for { -webkit-text-fill-color: var(--mint); }
.hero-name .wm-for {
  font-size: 0.42em;
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0.01em;
}

/* The red band, carrying his line the way the sign carries it. */
.band {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: clamp(1.5rem, 3.2vw, 2.1rem) 0 clamp(1.7rem, 3.4vw, 2.3rem);
  background: linear-gradient(100deg, var(--red-dark), var(--red) 45%, var(--red-dark));
  clip-path: polygon(0.0% 4.3%, 3.33% 5.32%, 6.67% 8.78%, 10.0% 4.42%, 13.33% 4.82%, 16.67% 5.58%, 20.0% 1.75%, 23.33% 4.86%, 26.67% 5.98%, 30.0% 7.53%, 33.33% 0.89%, 36.67% 2.88%, 40.0% 0.86%, 43.33% 7.69%, 46.67% 6.59%, 50.0% 0.4%, 53.33% 9.33%, 56.67% 9.17%, 60.0% 6.21%, 63.33% 5.85%, 66.67% 1.5%, 70.0% 0.14%, 73.33% 5.02%, 76.67% 0.57%, 80.0% 1.81%, 83.33% 2.3%, 86.67% 0.29%, 90.0% 4.41%, 93.33% 4.19%, 96.67% 8.0%, 100.0% 4.93%, 100.0% 93.66%, 96.67% 91.33%, 93.33% 93.06%, 90.0% 97.9%, 86.67% 96.48%, 83.33% 91.19%, 80.0% 94.28%, 76.67% 99.81%, 73.33% 94.96%, 70.0% 99.15%, 66.67% 92.49%, 63.33% 90.51%, 60.0% 98.55%, 56.67% 99.6%, 53.33% 94.17%, 50.0% 98.54%, 46.67% 94.3%, 43.33% 97.78%, 40.0% 91.17%, 36.67% 93.25%, 33.33% 92.68%, 30.0% 93.5%, 26.67% 97.22%, 23.33% 98.48%, 20.0% 99.96%, 16.67% 99.98%, 13.33% 93.14%, 10.0% 94.84%, 6.67% 96.79%, 3.33% 95.25%, 0.0% 96.58%);
}
.band-text {
  margin: 0;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  color: #fff;
  font-size: clamp(1.0625rem, 2.9vw, 1.875rem);
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "wdth" 112;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-district {
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  color: var(--paper-2);
  font-size: var(--t-small);
  font-weight: 500;
}
.hero-district b { color: var(--gold); font-weight: 700; }

.hero-figure { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.hero-figure img { width: 100%; border-top: 5px solid var(--gold-out); }

.hero-line {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  max-width: 36ch;
  font-size: var(--t-quote);
  font-weight: 500;
  line-height: 1.32;
  text-wrap: pretty;
}

/* ═══════════ SECTIONS ═══════════ */

.section {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.75rem, 7vw, 5rem) var(--gutter) 0;
}
.words { padding-top: clamp(3rem, 8vw, 5.5rem); }

.quote {
  margin: 0;
  max-width: 56ch;
  font-size: var(--t-quote);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}
.quote p { margin: 0 0 0.85em; }
.quote p:last-child { margin-bottom: 0; }
.quote-plain { font-size: var(--t-base); line-height: 1.6; max-width: var(--measure); }
.students-first { font-style: italic; font-weight: 800; color: var(--gold); }

/* ── Era heading ── */
.era { padding-bottom: 0.7rem; border-bottom: 3px solid var(--gold); }
.era-second { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.era-title {
  margin: 0;
  font-size: var(--t-era);
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "wdth" 110;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.era-span {
  margin: 0.3rem 0 0;
  color: var(--gold-dim);
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── The ledger ── */
.ledger { margin: 0; padding: 0; list-style: none; }
.entry { padding: clamp(1.3rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--rule); }
.entry:last-child { border-bottom: 0; }

.entry-year {
  margin: 0 0 0.3rem;
  color: var(--gold);
  font-size: var(--t-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.entry-place {
  margin: 0;
  font-size: var(--t-place);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.entry-role {
  margin: 0.45rem 0 0;
  max-width: var(--measure);
  color: var(--paper-2);
  text-wrap: pretty;
}

.entry-figure { margin: clamp(1.1rem, 2.6vw, 1.6rem) 0 0; max-width: 30rem; }
.entry-figure-wide { max-width: 44rem; }
.portrait { max-width: 23rem; }

.entry-figure figcaption,
.figure-full figcaption {
  margin-top: 0.55rem;
  color: var(--paper-2);
  font-size: var(--t-small);
  line-height: 1.45;
}
.figure-full {
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2rem, 4.5vw, 3rem);
  max-width: 34rem;
}

@media (max-width: 45.999rem) {
  .entry-year:empty { display: none; }
}

@media (min-width: 46rem) {
  .entry {
    display: grid;
    grid-template-columns: var(--year-col) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .entry-year { margin: 0; padding-top: 0.3em; text-align: right; line-height: 1.3; }
  .era { padding-left: calc(var(--year-col) + clamp(1.5rem, 3vw, 2.5rem)); }
  .quote, .quote-plain, .figure-full {
    margin-left: calc(var(--year-col) + clamp(1.5rem, 3vw, 2.5rem));
  }
}

/* ── Why now ── */
.why {
  max-width: none;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background: var(--navy);
}
.why > * { max-width: var(--wrap); margin-inline: auto; }

@media (min-width: 46rem) {
  .why > .quote, .why > .figure-full {
    margin-left: auto;
    padding-left: calc(var(--year-col) + clamp(1.5rem, 3vw, 2.5rem));
    max-width: var(--wrap);
  }
  .why > .quote { max-width: var(--wrap); }
  .why > .quote p { max-width: 56ch; }
  .why > .quote-plain p { max-width: var(--measure); }
  .why > .figure-full img { max-width: 23rem; }
}

/* ═══════════ CALL TO ACTION ═══════════ */

.cta {
  display: inline-block;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: 0.75em 1.5em;
  background: var(--gold);
  color: var(--navy);
  font-size: var(--t-base);
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "wdth" 108;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 140ms ease, transform 140ms ease;
}
.cta:hover, .cta:focus-visible { background: var(--gold-hi); transform: translateY(-2px); }
.cta-big { font-size: clamp(1.125rem, 2.6vw, 1.5rem); }

.closing {
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  background:
    linear-gradient(100deg, var(--red-dark), var(--red) 48%, var(--red-dark));
}
.closing-inner { max-width: var(--wrap); margin-inline: auto; }
.closing-head {
  margin: 0;
  max-width: 22ch;
  font-size: var(--t-era);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 112;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
}
.closing-sub {
  margin: 1.1rem 0 0;
  max-width: 54ch;
  color: #FBE3E1;
  text-wrap: pretty;
}
/* Two asks side by side: the ballot one stays solid, the yard sign
   one is outlined so the hierarchy survives being read first. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.cta-row .cta { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }

/* At phone width the longer label wraps; pull it in so both sit on one line. */
@media (max-width: 26rem) {
  .cta { font-size: 1.0625rem; padding: 0.75em 1.15em; }
  .cta-big { font-size: 1.0625rem; }
}

.closing .cta { background: #fff; color: var(--red-dark); }

/* Outlined, so it reads as the second ask even though it comes first.
   Gold on the navy masthead, white on the red closing band. */
.cta-ghost {
  background: transparent;
  color: var(--gold);
  box-shadow: inset 0 0 0 2px currentColor;
}
.closing .cta-ghost { color: #fff; }
.cta-ghost:hover, .cta-ghost:focus-visible,
.closing .cta-ghost:hover, .closing .cta-ghost:focus-visible {
  background: var(--gold);
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--gold);
}
.closing .cta:hover, .closing .cta:focus-visible { background: var(--gold); color: var(--navy); }
.closing-second { margin: clamp(1.4rem, 3vw, 1.9rem) 0 0; font-size: var(--t-small); }
.closing-second a { text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.closing-note { display: block; margin-top: 0.4rem; color: #F6CFCC; }

/* ═══════════ MOTION ═══════════ */

@media (prefers-reduced-motion: no-preference) {
  .hero-office, .hero-name, .band, .hero-district,
  .hero-figure, .hero-line, .hero .cta {
    animation: settle 640ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .hero-office   { animation-delay:  60ms; }
  .hero-name     { animation-delay: 120ms; }
  .band          { animation-delay: 240ms; }
  .hero-district { animation-delay: 340ms; }
  .hero-figure   { animation-delay: 400ms; }
  .hero-line     { animation-delay: 480ms; }
  .hero .cta     { animation-delay: 550ms; }

  @keyframes settle {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  body, .hero, .why, .closing { background: #fff; color: #000; }
  .hero-name { color: #000; -webkit-text-fill-color: #000; -webkit-text-stroke: 0; }
  .cta, .skip { display: none; }
  .entry { break-inside: avoid; }
}