:root {
  --indigo: #29317c;
  --indigo-deep: #1a1f52;
  --muted: #3d4270;
  --footer-muted: #5c6090;
  --cream: #f6f2e9;
  --cream-on-indigo: #e6e1d4;
  --rule-cream: #dcd3bf;
  --rule-indigo: #454c8f;
  --lavender: #c3c6e8;
  --pink: #e0198f;
  --pink-deep: #b3126f;
  --pink-light: #f7a6d1;
  --pink-hero: #f7b6d8;
  --countdown-text: #f4f3f7;
  --white: #fff;

  --font-display: "Archivo", sans-serif;
  --font-serif: "Libre Caslon Text", serif;
  --font-body: "Source Sans 3", sans-serif;

  --gutter: 56px;
  --nav-height: 76px;
}

html {
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--cream);
  color: var(--indigo);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
img { display: block; }

section { scroll-margin-top: var(--nav-height); }

/* 1. Countdown bar */
.countdown {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 12px;
  background: var(--indigo-deep);
  color: var(--countdown-text);
  font: 600 14px var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.countdown[hidden] { display: none; }
.countdown-days { color: var(--pink-light); }

/* 2. Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 16px var(--gutter);
  background: var(--white);
  color: var(--indigo-deep);
  font: 600 15px var(--font-display);
}

.nav-links { display: flex; gap: 28px; }
.nav-toggle { display: none; }

.pill { border-radius: 999px; }
.pill-cta { background: var(--pink); color: var(--white); padding: 12px 20px; }

/* 3. Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--indigo);
  color: var(--white);
  font-family: var(--font-display);
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 80px var(--gutter);
}
.hero-text p { margin: 0; }
.hero-eyebrow {
  color: var(--pink-hero);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-name-block { position: relative; }
.hero-name {
  margin: 0;
  font-size: 84px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero-logo { position: absolute; top: 0; right: 0; width: 200px; height: auto; }
.hero-tagline { font-size: 30px; font-weight: 400; }
.hero-buttons { display: flex; gap: 12px; font-size: 16px; }
.pill-solid { background: var(--white); color: var(--indigo); padding: 16px 26px; font-weight: 800; }
.pill-outline { border: 2px solid var(--white); padding: 14px 24px; font-weight: 600; }
.hero-photo { width: 100%; height: 640px; object-fit: cover; object-position: center top; }

/* 4. About */
#about { display: flex; justify-content: center; padding: 96px var(--gutter); background: var(--white); }
.about-inner { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.about-inner p { margin: 0; text-wrap: pretty; }
.eyebrow {
  color: var(--pink-deep);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.about-lead { font: 30px/1.35 var(--font-serif); }
.about-body { color: var(--muted); font-size: 18px; line-height: 1.65; }

/* 5. Record */
#record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 96px var(--gutter);
  border-top: 1px solid var(--rule-cream);
}
.record-heading { margin: 0 0 20px; font: 400 32px var(--font-serif); }
.record-list { margin: 0; padding: 0; list-style: none; }
.record-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-cream);
  font-size: 18px;
}
.record-role { color: var(--pink-deep); font: italic 16px var(--font-serif); text-align: right; }

/* 6. Photo strip */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 var(--gutter) 96px; }
.photo-strip figure { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.photo-strip img { width: 100%; height: 300px; object-fit: cover; }
.photo-strip figcaption { color: var(--muted); font: italic 16px var(--font-serif); }
.photo-treatment { object-position: center 40%; }
.photo-speaking { object-position: 20% 70%; }
.photo-party { object-position: center 30%; }

/* 7. Endorsements */
#endorsements { display: flex; flex-direction: column; gap: 20px; padding: 96px var(--gutter); background: var(--indigo); color: var(--cream); }
.endorse-header { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; text-align: center; }
.endorse-header .eyebrow { margin: 0; color: var(--pink-light); }
.endorse-title { margin: 0; font: 400 44px var(--font-serif); }
.endorse-subhead {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-indigo);
  color: var(--pink-light);
  font: 400 22px var(--font-serif);
}
.judges, .community { margin: 0; padding: 0; list-style: none; column-gap: 40px; }
.judges li, .community li { break-inside: avoid; }
.judges { columns: 3; margin-bottom: 28px; font-size: 17px; line-height: 1.9; }
.county { color: var(--lavender); }
.community { columns: 4; color: var(--cream-on-indigo); font-size: 16px; line-height: 1.85; }

/* 8. Contact */
#contact { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 48px; padding: 72px var(--gutter); }
.contact-email { display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.contact-heading { margin: 0; font: 400 28px var(--font-serif); }
.contact-address { font-size: 18px; font-style: normal; line-height: 1.6; }
.contact-social { display: flex; gap: 20px; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* 9. Disclaimer */
.disclaimer {
  padding: 20px var(--gutter);
  border-top: 1px solid var(--rule-cream);
  color: var(--footer-muted);
  font-size: 13px;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

/* Tablet */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .hero-name { width: min-content; font-size: 64px; } /* one word per line, as at 1280, so the logo keeps its gap */
  .judges { columns: 2; }
  .community { columns: 3; }
}

/* Phone */
@media (max-width: 768px) {
  .countdown { flex-direction: column; align-items: center; gap: 4px; text-align: center; }

  .nav { justify-content: space-between; }
  .nav-toggle {
    display: block;
    padding: 10px 16px;
    border: 2px solid var(--indigo-deep);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .nav-links { display: none; }
  .nav.open .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--white);
    border-bottom: 1px solid var(--rule-cream);
  }
  .nav.open .nav-links a { padding: 12px 0; }

  .hero { grid-template-columns: 1fr; }
  .hero-photo { order: -1; height: 420px; }
  .hero-name-block { display: flex; flex-direction: column; gap: 20px; }
  .hero-logo { order: -1; position: static; width: 160px; }
  .hero-name { font-size: min(48px, 12vw); } /* 48px clips "PHILLIPSON" below ~390px wide */
  .hero-buttons { flex-wrap: wrap; }

  #record { grid-template-columns: 1fr; gap: 48px; }
  .photo-strip { grid-template-columns: 1fr; }
  .judges { columns: 1; }
  .community { columns: 2; }
  #contact { grid-template-columns: 1fr; gap: 32px; }
}