/* ==========================================================================
   FORDMAX — Retrospares / Sales / Competitions
   Design system: strict black & white, 80s fast-Ford badge typography.
   Display face: Orbitron (closest web match to the Ford ESCORT/SIERRA badge
   lettering in the brand spec). Labels: Saira Condensed. Body: Saira.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=Saira+Condensed:wght@500;600;700&family=Saira:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --black: #000;
  --white: #fff;
  --ink-70: rgba(0, 0, 0, .7);
  --ink-50: rgba(0, 0, 0, .5);
  --ink-15: rgba(0, 0, 0, .15);
  --paper-70: rgba(255, 255, 255, .7);
  --paper-25: rgba(255, 255, 255, .25);
  --panel: #f4f4f4;

  --font-display: 'Orbitron', 'Arial Black', sans-serif;
  --font-label: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Saira', Arial, sans-serif;

  --border: 3px solid var(--black);
  --shadow-hard: 8px 8px 0 var(--black);
  --shadow-hard-sm: 5px 5px 0 var(--black);

  --container: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 .6em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 4.2rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 800; }
h3 { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; }

p { margin: 0 0 1em; }

a { color: inherit; }

ul { padding-left: 1.2em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Motifs: checkered flag, racing stripes, marquee
   -------------------------------------------------------------------------- */
.checker {
  height: 22px;
  background:
    repeating-conic-gradient(var(--black) 0% 25%, var(--white) 0% 50%)
    0 0 / 22px 22px;
  border-top: var(--border);
  border-bottom: var(--border);
}

.stripes {
  height: 14px;
  background: linear-gradient(
    to bottom,
    var(--black) 0 4px, var(--white) 4px 7px,
    var(--black) 7px 11px, var(--white) 11px
  );
}

.marquee {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: .55rem 0;
}

.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 28s linear infinite;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.05rem;
  white-space: nowrap;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Buttons & chips
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1rem;
  padding: .8rem 1.7rem;
  border: var(--border);
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.btn:hover, .btn:focus-visible {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-2px, -2px);
}

.btn--ghost { background: var(--white); color: var(--black); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--black); color: var(--white); }

.btn--invert { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--invert:hover, .btn--invert:focus-visible {
  background: var(--black); color: var(--white);
  box-shadow: 5px 5px 0 var(--white);
}

.btn[disabled], .btn.is-disabled {
  opacity: .35; pointer-events: none;
}

.chip {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  padding: .2rem .7rem;
  border: 2px solid var(--black);
  background: var(--white);
}

.chip--solid { background: var(--black); color: var(--white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .95rem;
  border-bottom: 3px solid currentColor;
  padding-bottom: .25rem;
  margin-bottom: 1.1rem;
}

/* The full height an .eyebrow occupies — text line (.95rem x 1.6 body leading),
   its padding, its rule, and the margin under it. Blocks that sit where an
   eyebrow would go, but don't have one, reserve this instead. Keep in step with
   the rule above. */
:root { --eyebrow-block: calc(1.52rem + .25rem + 3px + 1.1rem); }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.brand {
  text-decoration: none;
  line-height: 1;
  display: block;
}

/* Public wordmark — the supplied artwork (black on transparency), so the slot
   through the letters and the strapline always match the printed brand. */
.brand__logo {
  display: block;
  height: 2.9rem;
  width: auto;
  max-width: 100%;
}

/* Inverting flips the black art to white and leaves transparency alone. */
.site-footer .brand__logo { filter: invert(1); }

@media (max-width: 600px) {
  .brand__logo { height: 2.2rem; }
}

/* Text wordmark — admin panel only. */
.brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.7rem;
  letter-spacing: .04em;
  display: block;
}

.brand__tag {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  display: block;
  margin-top: .2rem;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(.9rem, 2vw, 1.7rem);
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .98rem;
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--black);
}

.site-nav .nav-cta {
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--white);
  padding: .35rem .9rem;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  background: var(--white);
  color: var(--black);
  border-bottom-color: var(--black);
}

.nav-toggle {
  display: none;
  background: var(--white);
  border: var(--border);
  padding: .45rem .7rem;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: var(--border);
  }

  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: .5rem 0;
  }

  .site-nav li { border-top: 1px solid var(--ink-15); }

  .site-nav a {
    display: block;
    padding: .85rem clamp(1rem, 4vw, 2rem);
    border-bottom: none;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    background: var(--black);
    color: var(--white);
  }

  .site-nav .nav-cta { border: none; }
}

/* --------------------------------------------------------------------------
   Hero (black band)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hero .eyebrow { color: var(--white); }

.hero__lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 34em;
  color: var(--paper-70);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}

/* Featured competition callout inside the hero */
.hero__comp {
  display: inline-block;
  border: 3px solid var(--white);
  padding: .8rem 1.2rem;
  margin-top: 1.5rem;
}

.hero__comp-label {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .76rem;
  opacity: .75;
}

.hero__comp-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.15;
  margin-top: .25rem;
}

.hero__comp-meta {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .85rem;
  margin-top: .3rem;
  color: var(--paper-70);
}

/* Closed draw in the hero: the countdown stays, frozen at 00, with a
   "Draw closed" flag alongside and the drawn date underneath. */
.countdown--closed {
  align-items: center;
  flex-wrap: wrap;
}
.countdown__flag {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .9rem;
  background: var(--white);
  color: var(--black);
  padding: .35rem .7rem;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.countdown__note {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--paper-70);
  margin-top: .7rem;
}

/* Closed-draw badge on the competition page (black-on-white card). */
.draw-closed {
  border: 3px solid var(--black);
  padding: .9rem 1.1rem;
}
.draw-closed__flag {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .95rem;
  background: var(--black);
  color: var(--white);
  padding: .2rem .6rem;
}

.hero__car a { display: block; }

.hero__car { position: relative; }

.hero__car img { width: 100%; }

/* Only the bundled silhouette scans get inverted: black line art -> white car
   melting into the hero. A real photograph must never be put through this,
   or it comes out as a negative. */
.hero__car img.is-artwork {
  filter: invert(1) brightness(.85) contrast(2.2);
  mix-blend-mode: screen;
}

/* Uploaded photos sit in a plain frame instead. */
.hero__car img.is-photo {
  border: 3px solid var(--white);
  background: var(--white);
}

.hero__car figcaption {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  color: var(--paper-70);
  text-align: right;
  margin-top: .4rem;
}

@media (max-width: 760px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__car { order: -1; max-width: 420px; }
}

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */
.countdown {
  display: flex;
  gap: .6rem;
  margin-top: 1.4rem;
}

.countdown__unit {
  border: 2px solid currentColor;
  min-width: 4.2rem;
  padding: .45rem .3rem .35rem;
  text-align: center;
}

.countdown__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  margin-top: .3rem;
}

.countdown--inline {
  gap: .4rem;
}

.countdown--inline .countdown__unit {
  min-width: 3.4rem;
  padding: .3rem .25rem .25rem;
}

.countdown--inline .countdown__value { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Tickets left / draw promise

   Competitions run until they sell out, so the urgency is the stock counter,
   not a clock — a countdown to the published date would tick to zero while the
   draw was still selling. The date rides along as text in .draw-promise.
   -------------------------------------------------------------------------- */
.tickets-left {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  border: 3px solid currentColor;
  padding: .5rem .9rem;
  margin: 0;
}

.tickets-left__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tickets-left__label {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
}

/* On a card the counter sits next to the Enter button, so it shrinks. */
.tickets-left--inline {
  border-width: 2px;
  padding: .3rem .6rem;
}

.tickets-left--inline .tickets-left__value { font-size: 1.2rem; }
.tickets-left--inline .tickets-left__label { font-size: .66rem; }

.tickets-left--hero { margin-top: 1.4rem; }

.draw-promise {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  color: var(--ink-70);
  margin: 0;
}

/* On the black hero the light-on-dark pair swaps. */
.draw-promise--hero {
  color: var(--paper-70);
  margin-top: .7rem;
}

.draw-closed--hero { border-color: var(--white); }

.draw-closed--hero .draw-closed__flag {
  background: var(--white);
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: clamp(2.8rem, 7vw, 5rem) 0;
}

/* Offset anchor jumps so the sticky header doesn't cover the section heading. */
.section[id] {
  scroll-margin-top: 5.5rem;
}

.section--panel { background: var(--panel); border-top: var(--border); border-bottom: var(--border); }

.section--dark {
  background: var(--black);
  color: var(--white);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
  flex-wrap: wrap;
}

.section__head p { max-width: 46em; margin: 0; color: var(--ink-70); }

.section--dark .section__head p { color: var(--paper-70); }

/* --------------------------------------------------------------------------
   Competition ticket cards
   -------------------------------------------------------------------------- */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: clamp(1.3rem, 3vw, 2rem);
}

.comp-card {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--black);
}

.comp-card__media {
  border-bottom: var(--border);
  background: var(--white);
  padding: 1.2rem;
  /* The flag floats over this area, so reserve a clear band for it: its offset
     from the top, the chip itself (.8rem text on 1.6 leading, plus .2rem
     padding and a 2px border top and bottom), and room to breathe underneath.
     Without this the photo grows up under the flag on a narrow card and the
     two collide. */
  padding-top: calc(.8rem + 1.68rem + 4px + .7rem);
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.comp-card__media img { mix-blend-mode: multiply; max-height: 190px; }

.comp-card__flag {
  position: absolute;
  top: .8rem;
  left: .8rem;
  /* Above the photo — the photo's multiply blend makes its own stacking
     context, which would otherwise let it paint over the flag. */
  z-index: 1;
}

.comp-card__body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 1;
  /* ticket perforation */
  background:
    radial-gradient(circle at left center, var(--black) 7px, transparent 7.5px) left top / 14px 14px no-repeat,
    radial-gradient(circle at right center, var(--black) 7px, transparent 7.5px) right top / 14px 14px no-repeat;
}

.comp-card__title { margin: 0; }

.comp-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.comp-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
}

.comp-card__price small {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.comp-card__foot {
  margin-top: auto;
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Sold progress */
.progress {
  border: 2px solid var(--black);
  height: 1.15rem;
  position: relative;
  background: var(--white);
}

.progress__fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  background: var(--black);
}

.progress__label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: .35rem;
  display: block;
}

/* --------------------------------------------------------------------------
   How it works steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  counter-reset: step;
}

.step {
  border: var(--border);
  background: var(--white);
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: var(--shadow-hard-sm);
}

.step__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  display: block;
  margin-bottom: .6rem;
}

.step h3 { margin-bottom: .4rem; }

.step p { margin: 0; color: var(--ink-70); font-size: .98rem; }

/* --------------------------------------------------------------------------
   Parts cards
   -------------------------------------------------------------------------- */
.part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: clamp(1.2rem, 3vw, 1.8rem);
}

.part-card {
  border: var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: box-shadow .12s ease, transform .12s ease;
}

.part-card:hover {
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-2px, -2px);
}

.part-card__media {
  border-bottom: var(--border);
  padding: 1rem;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.part-card__media img { mix-blend-mode: multiply; max-height: 130px; }

.part-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.part-card__title {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.05rem;
  margin: 0;
}

.part-card__fits {
  font-size: .88rem;
  color: var(--ink-70);
  margin: 0;
}

.part-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-top: .6rem;
}

.part-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}

.part-card__foot .btn { padding: .45rem .9rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Winners
   -------------------------------------------------------------------------- */
.winner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.winner-card {
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-hard-sm);
}

.winner-card__media {
  border-bottom: var(--border);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.winner-card__media img { mix-blend-mode: multiply; max-height: 140px; }

.winner-card__body { padding: 1.1rem 1.2rem 1.3rem; }

.winner-card__body h3 { margin-bottom: .25rem; }

.winner-card__detail {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .85rem;
  color: var(--ink-70);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Socials / live draw band
   -------------------------------------------------------------------------- */
.social-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.social-tile {
  border: 3px solid var(--white);
  color: var(--white);
  text-decoration: none;
  padding: 1.2rem 1.3rem;
  display: block;
  transition: background .12s ease, color .12s ease;
}

.social-tile:hover, .social-tile:focus-visible {
  background: var(--white);
  color: var(--black);
}

.social-tile__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.05rem;
  display: block;
}

.social-tile__handle {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  opacity: .75;
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.2rem;
}

.trust-item {
  border: var(--border);
  padding: 1.1rem 1.2rem;
  background: var(--white);
}

.trust-item h3 {
  font-size: .95rem;
  font-family: var(--font-label);
  letter-spacing: .12em;
  margin-bottom: .3rem;
}

.trust-item p { margin: 0; font-size: .92rem; color: var(--ink-70); }

/* --------------------------------------------------------------------------
   Page hero (subpages, black band)
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
}

.page-hero .eyebrow { color: var(--white); }

.page-hero p {
  max-width: 46em;
  color: var(--paper-70);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   FAQ accordion (native details/summary)
   -------------------------------------------------------------------------- */
.faq { border-top: var(--border); }

.faq details { border-bottom: var(--border); }

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.08rem;
  padding: 1rem .2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.faq details[open] summary::after { content: '\2013'; }

.faq details[open] summary { background: var(--black); color: var(--white); padding-left: .8rem; padding-right: .8rem; }

.faq .faq__answer { padding: 1rem .2rem 1.3rem; max-width: 60em; }

.faq .faq__answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Forms (enquiry / skill question)
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: 1rem;
}

.field label {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .88rem;
  margin-bottom: .3rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: var(--border);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .65rem .8rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.section--dark a:focus-visible,
.section--dark .btn:focus-visible,
.hero a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--white);
}

/* Skill question options */
.option-list {
  display: grid;
  gap: .6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.option-list label {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: var(--border);
  padding: .7rem .9rem;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.option-list input[type="radio"] {
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--black);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.option-list input[type="radio"]:checked {
  background: radial-gradient(var(--black) 45%, transparent 50%);
}

.option-list label:has(input:checked) {
  background: var(--black);
  color: var(--white);
}

.option-list label:has(input:checked) input[type="radio"] { border-color: var(--white); }

.option-list label:has(input:checked) input[type="radio"]:checked {
  background: radial-gradient(var(--white) 45%, transparent 50%);
}

/* Ticket quantity stepper */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: var(--border);
}

.stepper button {
  background: var(--black);
  color: var(--white);
  border: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  width: 2.8rem;
  cursor: pointer;
}

.stepper button:hover { background: var(--white); color: var(--black); }

.stepper output {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  min-width: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .4rem;
  font-variant-numeric: tabular-nums;
}

/* Spec table (competition detail) */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
}

.spec-table th,
.spec-table td {
  border: 2px solid var(--black);
  padding: .55rem .8rem;
  text-align: left;
}

.spec-table th {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  background: var(--black);
  color: var(--white);
  width: 34%;
}

/* --------------------------------------------------------------------------
   Notice / free entry callout
   -------------------------------------------------------------------------- */
.notice {
  border: var(--border);
  background: var(--white);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-hard-sm);
}

.notice h3 { margin-bottom: .35rem; }

.notice p:last-child { margin-bottom: 0; }

/* Headline links that shouldn't look like body links until hovered */
.plain-link { text-decoration: none; }

.plain-link:hover, .plain-link:focus-visible { text-decoration: underline; }

/* Pagination (news board) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.pagination__status {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .85rem;
}

/* Comments (competition pages) */
.comment-list {
  display: grid;
  gap: 1rem;
  max-width: 640px;
}

.comment {
  border: var(--border);
  background: var(--white);
  padding: .9rem 1.1rem;
}

.comment__meta {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--ink-70);
  margin: 0 0 .35rem;
}

.comment__body { margin: 0; overflow-wrap: anywhere; }

/* Ticket board (competition pages) */
.ticket-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
  gap: .35rem;
  max-height: 420px;
  overflow-y: auto;
  border: var(--border);
  background: var(--white);
  padding: .8rem;
}

.ticket-board span {
  border: 2px solid var(--black);
  text-align: center;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .82rem;
  padding: .3rem .1rem;
  font-variant-numeric: tabular-nums;
}

.ticket-board .is-gone {
  background: var(--black);
  color: var(--white);
  text-decoration: line-through;
  opacity: .55;
}

/* Stepper with a real (form-submitting) input */
.stepper input[data-stepper-value] {
  width: 3.8rem;
  border: none;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper input[data-stepper-value]::-webkit-outer-spin-button,
.stepper input[data-stepper-value]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--white);
  border-top: var(--border);
  padding: clamp(2.2rem, 5vw, 3.5rem) 0 1.6rem;
  margin-top: 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-bottom: 2.2rem;
}

@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

.site-footer .brand__name,
.site-footer .brand__tag { color: var(--white); }

.site-footer h4 {
  font-family: var(--font-label);
  font-size: .9rem;
  letter-spacing: .18em;
  margin-bottom: .7rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li { margin-bottom: .45rem; }

.site-footer a { color: var(--paper-70); text-decoration: none; }

.site-footer a:hover, .site-footer a:focus-visible { color: var(--white); text-decoration: underline; }

.site-footer__legal {
  border-top: 1px solid var(--paper-25);
  padding-top: 1.2rem;
  font-size: .82rem;
  color: var(--paper-70);
}

.site-footer__legal p { margin-bottom: .4rem; }



/* Cards size to their own content — opening one part's buy form must not
   stretch its neighbours to match. */
.part-grid { align-items: start; }

/* Filter chips are links, so strip the underline and give them a hover. */
a.chip {
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
a.chip:hover,
a.chip:focus-visible {
  background: var(--black);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Part galleries + lightbox
   -------------------------------------------------------------------------- */
/* The media box centres its child with flex. Now that the child is this
   button rather than the image itself, the button has to centre the image
   in turn — otherwise the photo sits hard left. */
.part-gallery__zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.part-gallery__zoom:focus-visible { outline: 3px solid var(--black); outline-offset: -3px; }

.part-gallery {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  padding: .6rem .8rem 0;
}
.part-gallery__thumb {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 2px solid var(--ink-15);
  background: var(--white);
  cursor: pointer;
  overflow: hidden;
}
.part-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.part-gallery__thumb.is-active { border-color: var(--black); }
.part-gallery__thumb:hover { border-color: var(--black); }

.part-gallery__caption {
  margin: .5rem 0 0;
  padding: 0 .8rem;
  font-family: var(--font-label);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-70);
  min-height: 1.2em;
}

.lightbox {
  border: var(--border);
  background: var(--white);
  padding: 0;
  max-width: min(92vw, 1000px);
  max-height: 92vh;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.lightbox__figure { margin: 0; }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  object-fit: contain;
}
.lightbox__caption {
  padding: .7rem 1rem 0;
  font-family: var(--font-label);
  letter-spacing: .04em;
  color: var(--ink-70);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .8rem 1rem 1rem;
  border-top: 2px solid var(--ink-15);
  margin-top: .7rem;
}
.lightbox__count {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .1em;
  margin-right: auto;
}

/* Admin: existing extra photos on the part form. */
.admin-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 1rem;
}
.admin-gallery__item {
  border: 2px solid var(--ink-15);
  padding: .6rem;
}
.admin-gallery__item img {
  width: 100%;
  height: 8rem;
  object-fit: contain;
  background: var(--panel);
  margin-bottom: .5rem;
}

/* Parts page: trim the run-up so stock is visible on a phone without scrolling. */
.page-hero--tight { padding-top: clamp(1.6rem, 4vw, 2.6rem); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.page-hero--tight h1 { margin-bottom: .35em; }
.page-hero--tight p { margin-bottom: 0; max-width: 40em; }
.section--tight { padding-top: clamp(1.4rem, 3vw, 2.2rem); }

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */
/* Every slide occupies the same grid cell, so the hero is always as tall as
   its tallest slide and nothing jumps as it rotates. Inactive slides are
   hidden with visibility, which also takes them out of the tab order. */
.hero-slider__viewport {
  display: grid;
  align-items: center;
}

.hero-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}

.hero-slide.is-active {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

.hero-slide__title {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 900;
  margin-bottom: .5em;
}

/* The stock slide needs no eyebrow — "Fresh in on the shelf" already says what
   it is — but it keeps the space one would take. Without it this slide starts
   flush against the header while every other slide sits below a gap, and the
   jump is obvious as the slider rotates. */
.hero-slide__full {
  width: 100%;
  padding-top: var(--eyebrow-block);
}

/* The stock slide reuses the part cards, on black. Two-up on a phone so this
   slide doesn't become four stacked cards tall — every slide shares the
   tallest one's height, so one long slide pads out all the others. */
.part-grid--hero {
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.part-grid--hero .part-card { background: var(--white); color: var(--black); }
.part-grid--hero .part-card__media { min-height: 110px; padding: .7rem; }
.part-grid--hero .part-card__media img { max-height: 100px; }
.part-grid--hero .part-card__body { padding: .7rem .8rem .9rem; gap: .35rem; }
.part-grid--hero .part-card__title { font-size: .95rem; }

.hero-slider__controls {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
}

.hero-slider__arrow {
  font-family: var(--font-label);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--white);
  background: none;
  border: 2px solid var(--white);
  padding: .45rem .8rem;
  cursor: pointer;
}
.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible { background: var(--white); color: var(--black); }

.hero-slider__dots { display: flex; gap: .45rem; margin-right: auto; }

.hero-slider__dot {
  width: 2.2rem;
  height: 6px;
  padding: 0;
  border: 0;
  background: var(--paper-25);
  cursor: pointer;
}
.hero-slider__dot.is-active { background: var(--white); }
.hero-slider__dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (max-width: 600px) {
  .hero-slider__dot { width: 1.4rem; }
}

/* Part cards link through to their own page. */
.part-card__link { text-decoration: none; display: block; }
.part-card__link:hover .part-card__media,
.part-card__link:focus-visible .part-card__media { background: var(--panel); }
.part-card__title .part-card__link:hover { text-decoration: underline; }

/* Shared gallery block (part pages and competition pages). */
.gallery { border: var(--border); background: var(--white); }
.gallery__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-bottom: 2px solid var(--ink-15);
}
.gallery__main .part-gallery__zoom img { max-height: 420px; width: auto; }
.gallery .part-gallery { padding: .7rem .8rem; }
.gallery .part-gallery__caption { padding: 0 .8rem .7rem; margin: 0; }