/* ---------------------------------------------------------------------------
   Kenilworth 41 Club — theme
   The national 41 Club mark is greyscale, so the site is too: a silver accent
   over the shared family.css layout, with no brand hue anywhere.
   --------------------------------------------------------------------------- */

:root {
  --accent: #5d636b; /* slate — on white surfaces */
  --accent-dk: #a8aeb6; /* silver — on the dark header, hero and footer */
  --accent-dark: #3f444a; /* hover state */
  --accent-ink: #ffffff; /* text on an accent-filled button */

  --hero-from: #3a3f45;
  --hero-to: #17191c;
}

/* A greyscale site loses the colour cue that tells you a card is interactive,
   so lean a little harder on elevation and rules instead. */
.card {
  border-top-width: 3px;
}

.card:hover {
  border-top-color: var(--ink);
}

/* Milestone row — the bit of the page that would be coloured on the other
   three sites, rendered in tone instead. */
.milestones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.milestone {
  padding: 30px 22px;
  text-align: center;
  background: var(--white);
}

.milestone strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}

.milestone span {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Emblem panel */
.emblem-panel {
  display: grid;
  gap: 28px;
  align-items: center;
  text-align: center;
}

.emblem-panel img {
  width: min(320px, 70vw);
  margin: 0 auto;
}

@media (min-width: 820px) {
  .emblem-panel {
    grid-template-columns: 320px 1fr;
    text-align: left;
  }

  .emblem-panel img {
    margin: 0;
  }
}