/* ==========================================================================
   Halifax Imperial Wheelers — main stylesheet
   Order: reset → base → layout → components.
   Tokens live in tokens.css. Everything here references those custom props.
   ========================================================================== */

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

/* 18px root: scales the whole rem-based system up to match the design.
   (The design runs noticeably larger than a 16px baseline.) */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  /* The whole page sits on the subtle off-white band, NOT pure white. */
  background: var(--c-band);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--c-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 400; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--w-semibold); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* Accessibility skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-navy); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A full-bleed coloured band that breaks out of the container */
.band { background: var(--c-band); }
.band--plain { background: var(--c-white); }
.band--blue { background: var(--c-blue-tint); }
.band--lavender { background: var(--c-lavender); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }

/* Serif section heading (Abril) */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--c-navy);
  margin-bottom: var(--sp-5);
}
.section-intro {
  max-width: 46ch;
  color: var(--c-muted);
  margin-bottom: var(--sp-6);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn--solid { background: var(--c-navy); color: #fff; }
.btn--solid:hover { background: #1d2a63; }

.btn--outline {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
  border-width: 2px;
  padding: 0.85rem 1.6rem;
}
.btn--outline:hover { background: rgba(39, 54, 123, 0.06); }

/* Text link with trailing arrow (e.g. "More events", "Visit nopinz shop").
   Slightly larger than the body to read as a clear, tappable call to action. */
.btn--text {
  padding: 0;
  color: var(--c-navy);
  font-weight: var(--w-semibold);
  font-size: 1.5rem; /* prominent call-to-action link (was 1.1rem) */
  background: none;
  border: none;
}
.btn--text .ico { font-size: 1.15em; } /* arrow scales with the link */
.btn--text:hover { gap: var(--sp-3); }

.ico { flex: none; }

/* ---- Header / nav -------------------------------------------------------- */
/* White header over the #f8f8f8 hero band — the subtle tonal step draws the
   faint dividing line above the hero, matching the design. */
.site-header { background: var(--c-white); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand:hover { text-decoration: none; }
/* Logo is a wide (landscape) badge — size by height, let width follow. */
.brand__logo { width: auto; height: 86px; }
.brand__name {
  /* Hidden visually (the badge carries the name) but kept for a11y/SEO */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.primary-nav a:not(.btn) {
  font-weight: var(--w-light);
  font-size: 1.3rem; /* ~23px on the 18px root */
  color: var(--c-nav-link);
}
.primary-nav a:not(.btn):hover { text-decoration: none; color: var(--c-navy); }
.primary-nav a[aria-current="page"] { color: var(--c-navy); font-weight: var(--w-medium); }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--c-navy); font-size: 1.6rem; padding: var(--sp-1);
}
.nav-toggle .ico { width: 1.6rem; height: 1.6rem; }
.nav-toggle__close { display: none; }

/* ---- Hero ----------------------------------------------------------------
   Full-bleed: the image runs to the LEFT viewport edge, the off-white body
   fills the right and aligns its content to the container. Same bleed trick
   as the "Coming up next" events feature. */
.hero {
  background: var(--c-band);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hero__media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  max-height: 55vh; /* keep the image in proportion on tall/large screens */
  object-fit: cover;
  /* The hero image is square-cornered in the design (unlike other images). */
  border-radius: 0;
}
.hero__body {
  display: flex;
  align-items: center;
  padding-block: var(--sp-8);
  padding-left: var(--sp-8);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.hero__body-inner { max-width: 46ch; }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.hero__text { font-size: var(--fs-lead); color: var(--c-muted); max-width: 42ch; }
/* Small "Ride with us" nudge under the hero subtext. */
.hero__nudge { margin-top: var(--sp-4); font-size: 1.05rem; color: var(--c-navy); font-weight: var(--w-medium); }
.hero__nudge a { color: var(--c-navy); text-decoration: underline; }

/* ---- Generic card -------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.card--blue { background: var(--c-blue-tint); }

/* ---- Accordion (native <details>) --------------------------------------- */
.accordion { display: grid; gap: var(--sp-3); }

.accordion__item {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 0 var(--sp-5);
}
.accordion__item[open] { padding-bottom: var(--sp-5); }

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-weight: var(--w-medium);
  color: var(--c-navy);
  font-size: 1.3rem;
}
.accordion__body { padding-bottom: var(--sp-2); }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary .ico {
  color: var(--c-ink);
  transition: transform var(--transition);
  width: 1.1rem; height: 1.1rem;
}
.accordion__item[open] .accordion__summary .ico--chevron { transform: rotate(180deg); }

.accordion__body { color: var(--c-muted); font-size: var(--fs-small); }
.accordion__body > p { margin-bottom: var(--sp-3); }

/* FAQ variant: thin ruled rows with a +/− toggle, no card fill */
.faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--c-hairline); padding: 0; }
.faq__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5); cursor: pointer; list-style: none;
  color: var(--c-navy); font-weight: var(--w-medium); font-size: var(--fs-faq);
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary .ico { color: var(--c-ink); transition: transform var(--transition); font-size: 1.5rem; }
.faq__item[open] .faq__summary .ico { transform: rotate(45deg); } /* + becomes × */
.faq__body { color: var(--c-muted); font-size: 1.11rem; padding-bottom: var(--sp-5); max-width: 80ch; }
.faq__body a { color: var(--c-navy); text-decoration: underline; }

/* ---- Event card ---------------------------------------------------------- */
.event-card {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.event-card__title {
  /* Sans (Figtree), not the Abril display serif — matches the design. */
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  color: var(--c-navy);
  line-height: var(--lh-snug);
}
.event-card__meta { display: grid; gap: var(--sp-2); margin-block: var(--sp-1) var(--sp-2); }
.event-card__meta li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); color: var(--c-navy); font-weight: var(--w-medium);
}
.event-card__meta .ico { color: var(--c-navy); font-size: 1rem; }
.event-card__desc { color: var(--c-muted); font-size: var(--fs-small); }
.event-card__cta { margin-top: auto; padding-top: var(--sp-3); }

/* ---- Tables (records) ---------------------------------------------------- */
.record-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.record-table th {
  text-align: left;
  font-weight: var(--w-semibold);
  color: var(--c-faint);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--c-hairline);
  white-space: nowrap;
}
.record-table td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-text);
  vertical-align: top;
}
.record-table td:first-child { color: var(--c-text); font-weight: var(--w-medium); }
.record-table .stacked { display: grid; gap: 2px; }
.record-table .stacked .muted { color: var(--c-faint); }
.table-scroll { overflow-x: auto; }

/* ---- Tabs (pills) -------------------------------------------------------- */
.tablist { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.tab {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: 1.05rem;
  color: var(--c-ink);
  background: var(--c-surface);
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tab:hover { background: #ececec; }
.tab[aria-selected="true"] { background: var(--c-navy); color: #fff; }
.tabpanel[hidden] { display: none; }
.tabpanel__title {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 1.25rem;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}

/* ---- Carousel ------------------------------------------------------------ */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 24vw, 360px);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;

  /* Full-viewport bleed: the track breaks out of the container so slides run
     edge to edge (and peek past both sides), while the first slide still lines
     up with the container's left edge via the inline padding. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.carousel__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Caption overlay — a fixed-height translucent band pinned to the foot of
   every slide, so the overlay reads identically across all photos. Title and
   credit are each clamped to a single line to guarantee a consistent size. */
.carousel__caption {
  position: absolute;
  inset: auto 0 0 0;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding-inline: var(--sp-4);
  background: rgba(33, 37, 48, 0.55);
  color: var(--c-white);
}
.carousel__caption-title,
.carousel__caption-credit {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carousel__caption-title {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  line-height: 1.25;
}
.carousel__caption-credit {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}
.carousel__controls { display: flex; gap: var(--sp-2); }
.carousel__btn {
  display: none; /* shown by JS when overflow exists */
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-navy);
  background: var(--c-white);
  color: var(--c-navy);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* ---- Footer -------------------------------------------------------------- */
/* White in the design (the lavender belongs to the carousel band above it). */
.site-footer { background: var(--c-white); padding-top: var(--sp-9); }
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}
.site-footer__brand .brand__logo { width: auto; height: 84px; }
.site-footer__head {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 1.32rem; /* ~+2px; larger size eases the "too heavy" feel */
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.legal-prose { max-width: 70ch; }
.legal-prose h2 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 1.4rem;
  color: var(--c-navy);
  margin-top: var(--sp-7);
}
.legal-prose p,
.legal-prose li { color: var(--c-muted); line-height: var(--lh-body); }
.legal-prose ul { padding-left: var(--sp-5); list-style: disc; }
.legal-prose li + li { margin-top: var(--sp-3); }
.legal-prose a { color: var(--c-navy); text-decoration: underline; }

.site-footer__head--stacked { margin-top: var(--sp-6); }
.site-footer__links { display: grid; gap: var(--sp-3); }
.site-footer__links a { color: var(--c-muted); font-size: var(--fs-body); }
.site-footer__legal {
  border-top: 1px solid var(--c-hairline);
  padding-block: var(--sp-5);
  color: var(--c-faint);
  font-size: var(--fs-small);
}
.site-footer__legal p + p { margin-top: var(--sp-2); }
.site-footer__legal a { color: var(--c-muted); text-decoration: underline; }

/* ---- Utilities ----------------------------------------------------------- */
.flow > * + * { margin-top: var(--sp-4); }
.muted { color: var(--c-muted); }
.lead { font-size: var(--fs-lead); color: var(--c-muted); }

/* ==========================================================================
   Page compositions
   ========================================================================== */

/* Two-column split used for Regular Rides.
   align-items:start pins the accordion AND the image to the top, so opening a
   panel no longer shifts the image up and down. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.split__media--tall img { aspect-ratio: 4 / 5; }
.split__col { display: flex; flex-direction: column; }
.split__more { margin-top: var(--sp-5); }

/* Attached variant: image butts straight onto the card with no gap; the two
   share a single rounded-rectangle silhouette (left corners on the card,
   right corners on the image). The image stretches to the card's height. */
.split--attached { gap: 0; align-items: stretch; }
.split--attached > .card { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.split--attached .split__media { display: flex; }
.split--attached .split__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
}

/* Home "Regular Rides" — single featured ride (Thursday), static grey card */
.ride-solo__title {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: 1.3rem;
  color: var(--c-navy);
  margin-bottom: var(--sp-3);
}
.ride-solo p { color: var(--c-muted); font-size: var(--fs-small); }

/* Home intro: centred copy on the pale-blue band under the hero */
.intro-band {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  color: var(--c-muted);
  font-size: 1.11rem; /* ~+2px over body; the lead keeps its own size */
}
.intro-band__lead {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.7rem);
  color: var(--c-navy);
  font-weight: var(--w-medium);
}
.intro-band__cta { margin-top: var(--sp-6); }

/* Featured "Coming up next" event — full-bleed image on the left that runs to
   the viewport edge, with the content aligned to the container on the right. */
.events-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
}
.events-feature__media { align-self: stretch; }
.events-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  max-height: 75vh; /* taller cap than the hero, per the design */
  object-fit: cover;
  border-radius: 0 var(--r-lg) var(--r-lg) 0; /* rounded inner corners only */
}
.events-feature__body {
  padding-block: var(--sp-9);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.event-feature__label { margin-bottom: var(--sp-4); }
.events-feature .event-card {
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  max-width: 560px;
}
.event-feature__more { margin-top: var(--sp-5); }

/* Events grid */
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

/* FAQ spans the full content width in the design */
.home-faq .faq { max-width: none; }

/* Carousel header / footer rows */
.carousel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.carousel-head .section-title { margin-bottom: 0; }
.carousel-foot { margin-top: var(--sp-5); }
.ico--left { transform: rotate(90deg); }
.ico--right { transform: rotate(-90deg); }

/* Club Rides — vertical tabs + meta panel inside one card */
/* Tab titles sit on the plain (white) page; only the meta panel is blue. */
.club-rides { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--sp-7); align-items: start; }
.tablist--vertical { flex-direction: column; gap: 0; margin-bottom: 0; align-items: stretch; }
.club-rides__tab {
  font-family: var(--font-body);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-hairline);
  padding: var(--sp-4) 0;
  font-size: 1.4rem;
  color: var(--c-faint);
  cursor: pointer;
  transition: color var(--transition);
}
.club-rides__tab:hover { color: var(--c-ink); }
.club-rides__tab[aria-selected="true"] { color: var(--c-navy); font-weight: var(--w-semibold); }

.club-rides__panels {
  background: var(--c-blue-tint);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.ride-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.ride-meta li { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-navy); font-size: 1.05rem; font-weight: var(--w-medium); }
.ride-meta .ico { color: var(--c-navy); font-size: 1.3rem; }
.ride-meta__body { border-top: 1px solid var(--c-hairline); padding-top: var(--sp-4); color: var(--c-muted); font-size: var(--fs-small); }

/* What to bring / Club Kit */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: stretch; }
.two-col > div { display: flex; flex-direction: column; }
.two-col > div > .card { flex: 1; }
.kit-list { margin: var(--sp-4) 0 0; display: grid; gap: 2px; }
.kit-list dt { font-weight: var(--w-semibold); color: var(--c-text); font-size: var(--fs-small); margin-top: var(--sp-3); }
.kit-list dd { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
.kit-card { display: flex; flex-direction: column; }
.kit-card__cta { margin-top: var(--sp-5); }

/* "Just turn up" — the primary call to action. A filled navy block so it reads
   as the one thing we actually want a visitor to do. */
.cta-turnup {
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
}
.cta-turnup__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-label);
  font-weight: var(--w-semibold);
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.cta-turnup__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}
.cta-turnup__body {
  max-width: 56ch;
  margin-inline: auto;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Get in touch — contact list (Ride with us) */
.contact-list { margin: var(--sp-4) 0 0; display: grid; gap: 2px; }
.contact-list dt { font-weight: var(--w-semibold); color: var(--c-text); font-size: var(--fs-small); margin-top: var(--sp-4); }
.contact-list dd { margin: 0; font-size: var(--fs-small); }
.contact-list dd a { color: var(--c-navy); }

/* ---- Membership page ----------------------------------------------------- */
.membership {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-8);
  align-items: start;
}
.membership__points {
  list-style: disc;
  padding-left: 1.2em;
  display: grid;
  gap: var(--sp-4);
  color: var(--c-muted);
  font-size: var(--fs-small);
  max-width: 54ch;
  margin-top: var(--sp-5);
}
.membership__points a { color: var(--c-navy); text-decoration: underline; }
.membership__pay { padding: var(--sp-6); text-align: center; }
.membership__btn { width: 100%; justify-content: center; }
.membership__rule { border: none; border-top: 1px solid var(--c-hairline); margin: var(--sp-5) 0; }
.membership__scan { font-weight: var(--w-semibold); color: var(--c-navy); margin-bottom: var(--sp-5); }
.membership__qr { width: 220px; height: 220px; margin-inline: auto; border-radius: var(--r-sm); }

/* ---- History page -------------------------------------------------------- */
.history-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.history-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.history-chapter--imgright .history-chapter__media { order: 2; }
.history-chapter__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.history-era {
  font-family: var(--font-display);
  font-size: 1.35rem; /* ~24px — a serif pre-header, distinct from body copy */
  color: var(--c-navy);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
}
.history-title {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.history-chapter__text { color: var(--c-muted); }
.history-chapter__text p:not(.history-era) { font-size: var(--fs-small); margin-bottom: var(--sp-4); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  /* Hero stacks: image on top (full width), body below */
  .hero { grid-template-columns: 1fr; }
  .hero__media img { min-height: 300px; }
  .hero__body {
    padding: var(--sp-6) var(--gutter) var(--sp-7);
  }
  .hero__body-inner { max-width: none; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }

  .split,
  .events-grid,
  .club-rides,
  .two-col,
  .membership,
  .history-intro,
  .history-chapter { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* Image sits above its text when stacked, regardless of desktop side */
  .history-chapter--imgright .history-chapter__media { order: 0; }

  /* Attached split un-attaches when stacked: normal card + image radii */
  .split--attached > .card { border-radius: var(--r-md); }
  .split--attached .split__media img {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
  }

  /* Events feature stacks: image on top (full width), content below */
  .events-feature { grid-template-columns: 1fr; gap: 0; }
  .events-feature__media img { min-height: 280px; border-radius: 0; }
  .events-feature__body { padding: var(--sp-6) var(--gutter) var(--sp-7); }

  .tablist--vertical { flex-direction: row; flex-wrap: wrap; }
  .club-rides__tab { border-bottom: none; padding: var(--sp-2) 0; }
  .club-rides__tab[aria-selected="true"] { text-decoration: underline; text-underline-offset: 6px; }
}

@media (max-width: 680px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    background: var(--c-white);
    box-shadow: -8px 0 40px rgba(39, 54, 123, 0.12);
    padding: var(--sp-8) var(--sp-5);
    transform: translateX(100%);
    transition: transform 200ms ease;
    z-index: 50;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav__list { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  body.nav-open { overflow: hidden; }

  .section { padding-block: var(--sp-7); }
  .site-footer__inner { grid-template-columns: 1fr; }

  /* Ride meta: the 2-up grid can't shrink its tracks below their content's
     min-content width on very narrow screens, so it overflows the panel (and
     the page). Stack it into a single column on phones. */
  .ride-meta { grid-template-columns: 1fr; }
}

/* On very narrow screens (magnified phones etc.) shave the root font-size a
   touch. Because everything scales off this in rem — text AND the rem-based
   gutters/gaps — it buys a little horizontal breathing room right where things
   get tight, without shrinking type enough to hurt readability. */
@media (max-width: 325px) {
  html { font-size: 106.25%; } /* ~17px vs the 18px default */
}

/* ---- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .carousel__track { scroll-behavior: auto; }
}