/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Big Shoulders"; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url(fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(fonts/libre-franklin-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(fonts/libre-franklin-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(fonts/libre-franklin-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Palette: limited, flat, poster inks ---------- */
:root {
  --cream: #f3e9d4;
  --paper: #faf4e6;
  --ink:   #1c1a17;
  --red:   #b2342b;
  --navy:  #1f3a5f;
  --gold:  #dfa22a;
  --green: #2f6656;
  --display: "Big Shoulders", "Oswald", "Arial Narrow", Impact, sans-serif;
  --text: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
mark { background: #ffe58a; color: var(--ink); padding: 0 .2em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .55rem clamp(1rem, 4vw, 2.5rem);
  background: var(--ink); color: var(--cream);
  font: 700 .95rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase;
}
.topbar__race { color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--red); color: var(--cream);
  padding: clamp(3rem, 8vw, 6rem) 1.25rem clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  border-bottom: 10px solid var(--ink);
}
.hero__rays {
  position: absolute; z-index: -1;
  left: 50%; top: 115%; width: 260vmax; height: 260vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(0,0,0,.13) 0deg 6deg, transparent 6deg 12deg);
}
.hero__inner { max-width: var(--wrap); margin: 0 auto; }
.hero__kicker {
  display: inline-block; margin: 0 0 1rem; padding: .3rem 1rem;
  background: var(--ink); color: var(--gold);
  font: 700 clamp(1rem, 2.4vw, 1.3rem)/1 var(--display); letter-spacing: .3em; text-transform: uppercase;
}
.hero__title {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  font: 900 clamp(4rem, 17vw, 11.5rem)/.82 var(--display);
  text-transform: uppercase; letter-spacing: .01em;
  text-shadow: .045em .045em 0 var(--ink);
}
.hero__title-small {
  font-size: .32em; line-height: 1.25; letter-spacing: .4em; color: var(--gold);
  text-shadow: .08em .08em 0 var(--ink);
  display: flex; align-items: center; gap: .6em;
}
.hero__title-small::before, .hero__title-small::after { content: ""; width: 1.6em; height: .14em; background: currentColor; box-shadow: .08em .08em 0 var(--ink); }
.hero__lede {
  margin: 1.6rem auto 0; max-width: 34ch;
  font: 700 clamp(1.35rem, 3.6vw, 2.1rem)/1.15 var(--display); letter-spacing: .02em;
}
.hero__lede strong { color: var(--gold); }

.hero__faces {
  list-style: none; margin: 2.4rem auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 2vw, 1.25rem);
  max-width: 640px;
}
.hero__faces a { display: block; color: var(--cream); text-decoration: none; }
.hero__faces img {
  aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
  border-radius: 50%; border: 4px solid var(--ink);
  filter: grayscale(1) contrast(1.1) sepia(.25);
  background: var(--cream);
  transition: filter .25s, transform .25s;
}
.hero__faces a:hover img, .hero__faces a:focus-visible img { filter: none; transform: translateY(-4px); }
.hero__faces span {
  display: block; margin-top: .45rem;
  font: 700 clamp(.85rem, 2.4vw, 1.1rem)/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Keyword band ---------- */
.words { background: var(--navy); color: var(--cream); border-bottom: 10px solid var(--ink); }
.words ul {
  list-style: none; margin: 0 auto; padding: 1rem 1rem;
  max-width: var(--wrap);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 0;
  font: 900 clamp(1.15rem, 1.9vw, 1.5rem)/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.words li + li::before { content: "★"; color: var(--gold); margin: 0 .7em; font-size: .7em; vertical-align: .15em; }

@media (max-width: 1100px) and (min-width: 721px) {
  .words ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: .35rem 2rem; }
  .words li + li::before { content: none; }
  .words li::before { content: "★"; color: var(--gold); margin-right: .4em; font-size: .7em; vertical-align: .15em; }
}

/* ---------- Section titles ---------- */
.section-title {
  margin: 0 0 2rem; text-align: center;
  font: 900 clamp(2.2rem, 7vw, 4rem)/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
}
.section-title span { display: inline-block; padding: 0 .4em; border-top: 6px solid currentColor; border-bottom: 6px solid currentColor; }
.section-title--light { color: var(--cream); }

/* ---------- Team / carousel ---------- */
.team { padding: clamp(2.5rem, 7vw, 5rem) clamp(.75rem, 3vw, 2rem); max-width: var(--wrap); margin: 0 auto; }

.carousel__tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
}
.carousel__tabs button {
  border: 3px solid var(--ink); background: transparent; color: var(--ink);
  padding: .35rem 1rem; font: 700 1.15rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.carousel__tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); }

.carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
  border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
  background: var(--paper);
  align-items: flex-start; transition: height .35s ease;
}
@media (min-width: 721px) { .carousel__track { align-items: stretch; } }
.carousel__track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: minmax(240px, 38%) 1fr;
  align-items: start; min-width: 0;
  --c: var(--red);
}
.slide--red   { --c: var(--red);   --tint: #e9b9a6; }
.slide--navy  { --c: var(--navy);  --tint: #a9bccf; }
.slide--gold  { --c: var(--gold);  --tint: #f0d28e; }
.slide--green { --c: var(--green); --tint: #a9cbb9; }

.slide__photo {
  margin: 0; position: relative; align-self: stretch; background: var(--tint);
  border-right: 5px solid var(--ink);
}
.slide__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.15) brightness(1.05);
  mix-blend-mode: multiply;
}
.slide__photo::after { /* colored corner block */
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 14px; background: var(--c);
}
.slide__body { min-width: 0; overflow-wrap: anywhere; padding: clamp(1.25rem, 3.5vw, 2.5rem); }
.slide__name {
  margin: 0; color: var(--c);
  font: 900 clamp(2.4rem, 6vw, 3.8rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .02em;
}
.slide--gold .slide__name { color: #a8740e; }
.slide__role {
  margin: .6rem 0 1rem; font-weight: 600; font-size: 1rem; line-height: 1.45;
}
.slide__tags { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.slide__tags li {
  background: var(--c); color: var(--paper);
  padding: .25rem .6rem; font: 700 .95rem/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.slide--gold .slide__tags li { color: var(--ink); }
.slide__statement { border-top: 3px solid var(--ink); padding-top: 1rem; font-size: 1rem; }
.slide__statement p { margin: 0; }

.carousel__controls { display: flex; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.carousel__controls button {
  width: 3rem; height: 3rem; border: 3px solid var(--ink); background: var(--cream); color: var(--ink);
  font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
}
.carousel__controls button:hover { background: var(--ink); color: var(--cream); }
.carousel__pause { font-size: .9rem !important; }
.carousel__pause .i-play { display: none; }
.carousel__pause[aria-pressed="true"] .i-pause { display: none; }
.carousel__pause[aria-pressed="true"] .i-play { display: inline; }

/* ---------- Why ---------- */
.why {
  background: var(--green); color: var(--cream);
  border-top: 10px solid var(--ink); border-bottom: 10px solid var(--ink);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}
.why__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem;
}
@media (min-width: 900px) {
  .why__grid { grid-template-columns: repeat(6, 1fr); }
  .why__card { grid-column: span 2; }
  .why__card:nth-child(4), .why__card:nth-child(5) { grid-column: span 3; }
}
.why__card { background: var(--cream); color: var(--ink); padding: 1.4rem 1.3rem; border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.why__card p { margin: 0; font-size: 1rem; }
.why__big {
  font: 900 2.1rem/1 var(--display) !important; text-transform: uppercase; letter-spacing: .03em;
  color: var(--red); margin-bottom: .6rem !important;
}
.why__card:nth-child(2) .why__big { color: var(--navy); }
.why__card:nth-child(3) .why__big { color: #a8740e; }
.why__card:nth-child(4) .why__big { color: var(--green); }
.why__card:nth-child(5) .why__big { color: var(--red); }

/* ---------- Poster CTA ---------- */
.poster {
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
  background: var(--gold);
  border-bottom: 10px solid var(--ink);
}
.poster__text { margin: 0 0 1rem; font: 900 clamp(2rem, 6vw, 3.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.btn {
  display: inline-block; padding: .8rem 1.6rem;
  background: var(--ink); color: var(--cream); text-decoration: none;
  font: 700 1.35rem/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--red);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--red); }
.btn small { display: block; font-size: .7em; letter-spacing: .1em; color: var(--gold); margin-top: .2rem; }
.btn[aria-disabled="true"] { cursor: default; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--cream); text-align: center; padding: 2rem 1rem 2.5rem; }
.footer__vote { margin: 0 0 .5rem; font: 700 clamp(1.3rem, 3.5vw, 1.9rem)/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.footer__vote strong { color: var(--gold); }
.footer__when { margin: 0 0 .75rem; font: 700 clamp(1.05rem, 2.6vw, 1.35rem)/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.footer__fine { margin: 0; font-size: .9rem; opacity: .85; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .slide { grid-template-columns: 1fr; }
  .slide__photo { align-self: start; }
  .slide__photo { border-right: 0; border-bottom: 5px solid var(--ink); aspect-ratio: 4 / 3.4; }
  .carousel__track { box-shadow: 6px 6px 0 var(--ink); border-width: 4px; }
  .carousel__tabs button { padding: .35rem .7rem; font-size: 1rem; }
  .words ul { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1rem; text-align: center; }
  .words li + li::before { content: none; }
  .words li::before { content: "★" !important; color: var(--gold); margin-right: .4em; font-size: .7em; vertical-align: .15em; }
  .topbar { justify-content: center; text-align: center; font-size: .8rem; }
}

/* ---------- Print: a quick one-page handout ---------- */
@media print {
  .topbar, .carousel__controls, .carousel__tabs, .poster, .hero__rays { display: none; }
  .hero { background: none; color: var(--ink); border: 0; }
  .carousel__track { display: block; overflow: visible; box-shadow: none; }
  .slide { break-inside: avoid; border-bottom: 3px solid var(--ink); }
}
@media (max-width: 720px) {
  .footer__when span { display: block; }
  .footer__when .sep { display: none; }
}