/* =========================================================
   NORTHAMPTON ROAD RUNNERS — DESIGN SYSTEM
   Brand: Burgundy #732444 · Gold #edac1a
   ========================================================= */

:root {
  /* Brand */
  --burgundy: #732444;
  --burgundy-deep: #4a1429;
  --burgundy-darker: #2a0a17;
  --gold: #edac1a;
  --gold-soft: #f5c44a;
  --gold-deep: #b8830a;
  /* Accessible gold for text on light (cream/white) backgrounds — ~5.2:1 on
     cream, meets WCAG AA. The brighter --gold is only AA on dark surfaces. */
  --gold-text: #8a6200;

  /* Neutrals */
  --cream: #fdf8f3;
  --cream-warm: #f7ede0;
  --ink: #1a0f15;
  --slate: #5a4f55;
  --line: rgba(115, 36, 68, 0.12);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Scale */
  --container: 1280px;
  --radius: 14px;
  --radius-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- RESET ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--burgundy-darker); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--burgundy-darker);
}

h1 { font-size: clamp(2.75rem, 8vw, 6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 5vw, 3.75rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--gold);
}

/* Keyword eyebrow rendered INSIDE the <h1>. Sits above the main slogan
   visually, but is part of the H1's text content so Google parses the H1
   with the target keywords included — strictly better than a sibling
   <span class="eyebrow"> for SEO signalling. Styled to match the existing
   .eyebrow decorative treatment (gold horizontal line before the label). */
.h1-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 1.1rem;
  line-height: 1.3;
}
.h1-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}

/* Members-area gate — hide gated content by default from first paint.
   Previously this rule was injected by members-gate.js at runtime, which
   caused a brief "flash" of the login screen between page navigations for
   already-authenticated members: the JS-injected gate rendered before the
   async session check completed. Moving these rules into the shared
   stylesheet means the browser knows to hide gated content immediately,
   and the JS can then reveal it synchronously if a session exists. */
[data-members-gated] { display: none; }
[data-members-gated].open { display: block; }
/* On the dark burgundy hero (index.html) the eyebrow needs a light colour
   so it reads against the background. */
.hero .h1-eyebrow {
  color: var(--gold);
  opacity: 0.9;
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--slate);
  max-width: 60ch;
  line-height: 1.55;
}

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

section { position: relative; }

.section-pad {
  padding: clamp(80px, 12vw, 160px) 0;
}
/* Tighter section rhythm — used on SEO landing pages where the reader is
   coming to consume article-style content and the standard 80-160px
   vertical padding feels bloated between text blocks. */
.section-pad-tight {
  padding: clamp(32px, 5vw, 60px) 0;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.01em;
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-primary {
  background: var(--burgundy);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--burgundy-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(115, 36, 68, 0.5);
}
.btn-gold {
  background: var(--gold);
  color: var(--burgundy-darker);
}
.btn-gold:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(237, 172, 26, 0.55);
}
.btn-ghost {
  background: transparent;
  color: var(--burgundy-darker);
  border: 1.5px solid currentColor;
}
.btn-ghost:hover {
  background: var(--burgundy-darker);
  color: var(--cream);
}
.btn-light {
  background: var(--cream);
  color: var(--burgundy-darker);
}
.btn-light:hover { background: var(--gold); }
.btn .arrow {
  transition: transform 0.35s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: all 0.35s var(--ease);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: rgba(253, 248, 243, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(115, 36, 68, 0.08);
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 30px -15px rgba(115, 36, 68, 0.2);
}
.nav.scrolled .nav-inner {
  background: rgba(253, 248, 243, 0.95);
  box-shadow: 0 14px 40px -15px rgba(115, 36, 68, 0.3);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--burgundy-darker);
  letter-spacing: -0.01em;
}
.brand-logo {
  width: 46px;
  height: 46px;
  display: inline-block;
  flex: 0 0 auto;
  background: url('/assets/uploads/logo/NRR-logo-burgundy.png') center / contain no-repeat;
  /* Hide the literal "NRR" text — the crest now carries the brand mark. */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.brand-logo::after {
  content: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  position: relative;
  padding: 9px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: 999px;
  transition: all 0.25s var(--ease);
}
.nav-links a:hover { color: var(--burgundy); }
.nav-links a.active {
  background: var(--burgundy);
  color: var(--cream);
}
.nav-cta {
  padding: 11px 22px !important;
  background: var(--gold);
  color: var(--burgundy-darker) !important;
  font-weight: 600 !important;
}
.nav-cta:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--cream);
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: rotate(45deg); top: 0; }
.nav-toggle.open span::after { transform: rotate(-45deg); top: 0; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 88px 16px auto 16px;
    background: var(--cream);
    border-radius: 28px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-shadow: 0 25px 60px -20px rgba(115, 36, 68, 0.4);
    transform: scaleY(0.95) translateY(-10px);
    transform-origin: top;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease);
    /* Cap to the viewport with a bit of breathing room, and let the panel
       scroll — otherwise expanding the "More" accordion pushes the last
       items (including the Members-area link) below the bottom of the
       screen on phones with no way to reach them. Uses dvh where supported
       to account for iOS Safari's dynamic address bar. */
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.open {
    transform: scaleY(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a { padding: 14px 18px; }
}

/* ---------- NAV DROPDOWN ("More") ---------- */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: 999px;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger,
.nav-dropdown-trigger.active {
  color: var(--burgundy);
  background: rgba(115, 36, 68, 0.07);
}
.nav-dropdown-trigger svg {
  transition: transform 0.25s var(--ease);
}
.nav-dropdown.open .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  /* Hidden by default — switched to display:flex when parent has .open. */
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--cream);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 20px 50px -15px rgba(115, 36, 68, 0.35);
  border: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  animation: ddIn 0.18s var(--ease);
}
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a {
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  font-weight: 500;
  color: var(--ink) !important;
  border-radius: 12px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none !important;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: rgba(115, 36, 68, 0.07) !important;
  color: var(--burgundy) !important;
}
.nav-dropdown-menu .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(115, 36, 68, 0.08);
  display: grid; place-items: center;
  color: var(--burgundy);
  flex-shrink: 0;
}
.nav-dropdown-menu .label-block {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.nav-dropdown-menu .sub {
  display: block;
  font-size: 0.75rem;
  color: var(--slate);
  font-weight: 400;
  margin-top: 1px;
}
/* Highlight the gated "Members area" entry inside the More dropdown */
.nav-dropdown-menu a.members-link {
  margin-top: 6px;
  position: relative;
  background: linear-gradient(135deg, rgba(115,36,68,0.06), rgba(237,172,26,0.10)) !important;
  border: 1px solid rgba(237,172,26,0.35);
}
.nav-dropdown-menu a.members-link:hover {
  background: linear-gradient(135deg, rgba(115,36,68,0.12), rgba(237,172,26,0.18)) !important;
}
.nav-dropdown-menu a.members-link .icon {
  background: var(--burgundy);
  color: var(--gold);
}

@media (max-width: 900px) {
  /* In the mobile slide-down nav, the dropdown becomes an inline section. */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; }
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: 0;
    background: rgba(115, 36, 68, 0.04);
    margin-top: 4px;
    padding: 6px;
    animation: none;
  }
  /* .nav-dropdown-menu base is already display:none from desktop rule;
     the .open rule sets display:flex which also applies here. */
  .nav-dropdown-menu a { padding: 12px 14px !important; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at top right, #4a1429 0%, var(--burgundy-darker) 55%, #15080d 100%);
  color: var(--cream);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero h1 {
  color: var(--cream);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800;
}
.hero h1 .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  display: inline-block;
}
.hero p {
  margin-top: 30px;
  color: rgba(253, 248, 243, 0.78);
  max-width: 50ch;
  font-size: 1.18rem;
  line-height: 1.55;
}
.hero-actions {
  margin-top: 42px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(237, 172, 26, 0.25);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-meta-item .label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.hero-meta-item .value {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(253, 248, 243, 0.9);
}

/* Hero visual */
.hero-visual {
  position: relative;
  height: 540px;
}
.hero-card {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.hero-card-main {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #732444 0%, #b8830a 100%);
  display: grid;
  place-items: center;
  position: relative;
}
.hero-card-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(237, 172, 26, 0.4), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(115, 36, 68, 0.6), transparent 50%);
}
.hero-stat-floating {
  position: absolute;
  background: var(--cream);
  color: var(--burgundy-darker);
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255,255,255,0.5);
  z-index: 3;
}
.hero-stat-floating .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  color: var(--burgundy);
  line-height: 1;
}
.hero-stat-floating .lbl {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  margin-top: 4px;
}
.float-1 { top: 30px; right: -10px; animation: float 6s ease-in-out infinite; }
.float-2 { bottom: 60px; left: -20px; animation: float 7s ease-in-out infinite 1s; }
.float-3 { bottom: 180px; right: 20px; animation: float 8s ease-in-out infinite 0.5s; }

/* Hero carousel */
.hero-carousel {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s ease-out;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 10, 23, 0.05) 0%, rgba(42, 10, 23, 0.45) 100%);
}
.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  z-index: 4;
  padding: 8px 14px;
  background: rgba(26, 15, 21, 0.45);
  border-radius: 99px;
  backdrop-filter: blur(8px);
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(253, 248, 243, 0.45);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s var(--ease);
}
.hero-dot:hover { background: rgba(253, 248, 243, 0.85); }
.hero-dot.active {
  background: var(--gold);
  width: 28px;
  border-radius: 99px;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(253, 248, 243, 0.92);
  color: var(--burgundy-darker);
  border: 0;
  cursor: pointer;
  z-index: 4;
  display: grid; place-items: center;
  transition: all 0.3s var(--ease);
  opacity: 0;
}
.hero-card-main:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover {
  background: var(--gold);
  transform: translateY(-50%) scale(1.05);
}
.hero-arrow.prev { left: 14px; }
.hero-arrow.next { right: 14px; }
@media (max-width: 700px) {
  .hero-arrow { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Hero ambient runner illustration */
.hero-runner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.95;
}

/* Hero pattern overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(237, 172, 26, 0.15) 1px, transparent 0);
  background-size: 30px 30px;
  opacity: 0.4;
  z-index: 1;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--cream));
  z-index: 1;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { height: 380px; }
}

/* Marquee */
.marquee {
  background: var(--burgundy-darker);
  color: var(--gold);
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid rgba(237,172,26,0.2);
  border-bottom: 1px solid rgba(237,172,26,0.2);
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
}
.marquee-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.marquee-item.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  font-style: italic;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- STATS ---------- */
.stats {
  background: var(--cream);
  padding: clamp(70px, 10vw, 120px) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-card {
  position: relative;
  padding: 36px 30px;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -20px rgba(115, 36, 68, 0.25);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 3.9rem);
  font-weight: 800;
  color: var(--burgundy);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-num .plus { color: var(--gold-text); }
.stat-label {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
}
.stat-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--burgundy);
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: 0.85;
}
@media (max-width: 800px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FEATURE CARDS ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  margin-bottom: 60px;
}
.section-head h2 { max-width: 18ch; }
.section-head p { max-width: 40ch; color: var(--slate); }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  position: relative;
  padding: 36px 30px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: all 0.4s var(--ease);
  overflow: hidden;
}
.feature-card:hover {
  border-color: var(--burgundy);
  background: var(--burgundy-darker);
  color: var(--cream);
  transform: translateY(-6px);
  box-shadow: 0 25px 60px -20px rgba(115, 36, 68, 0.4);
}
.feature-card:hover h3,
.feature-card:hover p { color: inherit; }
.feature-card:hover .feature-icon {
  background: var(--gold);
  color: var(--burgundy-darker);
}
.feature-card:hover p { opacity: 0.85; }
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--burgundy);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  transition: all 0.4s var(--ease);
}
.feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.feature-card p {
  color: var(--slate);
  font-size: 0.97rem;
  line-height: 1.6;
  transition: color 0.3s;
}
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- EVENTS GRID ---------- */
.events-section {
  background: var(--burgundy-darker);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.events-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(237, 172, 26, 0.12), transparent 60%);
}
.events-section .container { position: relative; }
.events-section h2 { color: var(--cream); }
.events-section .section-head p { color: rgba(253, 248, 243, 0.7); }

.events-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.filter-chip {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(253, 248, 243, 0.07);
  color: var(--cream);
  border: 1px solid rgba(253, 248, 243, 0.15);
  transition: all 0.3s var(--ease);
}
.filter-chip:hover { border-color: var(--gold); }
.filter-chip.active {
  background: var(--gold);
  color: var(--burgundy-darker);
  border-color: var(--gold);
  font-weight: 600;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.event-card {
  background: rgba(253, 248, 243, 0.05);
  border: 1px solid rgba(253, 248, 243, 0.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.event-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.event-card:hover {
  background: rgba(253, 248, 243, 0.09);
  transform: translateY(-4px);
  border-color: var(--gold);
}
.event-card:hover::before { transform: scaleY(1); }
.event-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--gold);
  font-family: var(--font-display);
}
.event-date .day {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.event-date .mo {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.event-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 600;
}
.event-card h3 {
  color: var(--cream);
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.event-card p {
  color: rgba(253, 248, 243, 0.7);
  font-size: 0.92rem;
  margin-bottom: 18px;
}
.event-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(253, 248, 243, 0.85);
  padding-top: 18px;
  border-top: 1px solid rgba(253, 248, 243, 0.12);
}
.event-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.event-meta svg { color: var(--gold); }
@media (max-width: 800px) { .events-grid { grid-template-columns: 1fr; } }

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  background: var(--cream);
  padding: clamp(80px, 12vw, 150px) 0;
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(237, 172, 26, 0.18), transparent 70%);
  border-radius: 50%;
}
.testimonials .container { position: relative; }
.testimonial-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 14px 4px 30px;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 clamp(300px, 35vw, 440px);
  background: var(--cream-warm);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  scroll-snap-align: start;
  position: relative;
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease);
}
.testimonial-card:hover { transform: translateY(-4px); }
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 16px; right: 28px;
  font-family: 'Georgia', serif;
  font-size: 7rem;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
  font-weight: 700;
}
.testimonial-card blockquote {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 28px;
  position: relative;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.testimonial-meta .name {
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--burgundy-darker);
}
.testimonial-meta .role {
  font-size: 0.82rem;
  color: var(--slate);
}
.testimonial-controls {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.tc-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cream-warm);
  border: 1px solid var(--line);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
}
.tc-btn:hover {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}

/* ---------- CTA BAND ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-darker) 100%);
  color: var(--cream);
  padding: clamp(80px, 10vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 50%, rgba(237, 172, 26, 0.18), transparent 50%);
}
.cta-band .container { position: relative; }
.cta-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: center;
}
.cta-band h2 {
  color: var(--cream);
  font-size: clamp(2rem, 5vw, 3.75rem);
}
.cta-band h2 .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}
.cta-band p {
  color: rgba(253, 248, 243, 0.78);
  margin-top: 20px;
  font-size: 1.1rem;
  max-width: 50ch;
}
.cta-actions { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 800px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--burgundy-darker);
  color: rgba(253, 248, 243, 0.75);
  padding: 80px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cream);
  margin-bottom: 18px;
}
.footer p { font-size: 0.92rem; line-height: 1.6; max-width: 38ch; }
.footer h5,
.footer .footer-heading {
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-weight: 700;
}

/* Skip-to-content link (Eleventy base layout) — visible only on focus. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--burgundy);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul li a {
  font-size: 0.93rem;
  transition: color 0.25s;
}
.footer ul li a:hover { color: var(--gold); }
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(253, 248, 243, 0.2);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
}
.footer-socials a:hover {
  background: var(--gold);
  color: var(--burgundy-darker);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(253, 248, 243, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.85rem;
  color: rgba(253, 248, 243, 0.55);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ---------- STRAVA CLUB PANEL ---------- */
.strava-panel {
  background:
    radial-gradient(circle at 85% 15%, rgba(252, 76, 2, 0.18), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(115, 36, 68, 0.95), transparent 60%),
    linear-gradient(135deg, var(--burgundy-darker), var(--burgundy));
  color: var(--cream);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}
.strava-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(252,76,2,0.16) 1px, transparent 0);
  background-size: 34px 34px;
  opacity: 0.5;
  pointer-events: none;
}
.strava-panel .container { position: relative; z-index: 1; }
.strava-head {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 30px;
  align-items: center;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .strava-head { grid-template-columns: 1fr; }
}
.strava-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fc4c02;
  background: rgba(252, 76, 2, 0.16);
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 12px;
}
.strava-head h2 { color: var(--cream); font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; }
.strava-head h2 .accent { color: #fc4c02; }
.strava-head .lead { color: rgba(253,248,243,0.85); font-size: 1.05rem; line-height: 1.6; max-width: 56ch; margin-top: 10px; }
.strava-cta { text-align: right; }
@media (max-width: 760px) { .strava-cta { text-align: left; } }

.strava-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.strava-stat {
  background: rgba(253,248,243,0.06);
  border: 1px solid rgba(252, 76, 2, 0.28);
  border-radius: 14px;
  padding: 18px 22px;
}
.strava-stat .label {
  color: rgba(253,248,243,0.7);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.strava-stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--cream);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1;
  margin-top: 6px;
  display: flex; align-items: baseline; gap: 6px;
}
.strava-stat .num .unit {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fc4c02;
  font-weight: 700;
}

.strava-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.strava-highlight {
  background: rgba(253,248,243,0.06);
  border: 1px solid rgba(253,248,243,0.12);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.strava-highlight:hover {
  background: rgba(252, 76, 2, 0.10);
  border-color: rgba(252, 76, 2, 0.40);
}
.strava-highlight::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: #fc4c02;
}
.strava-highlight .member {
  font-size: 0.92rem; font-weight: 700; color: var(--cream);
}
.strava-highlight .activity {
  color: rgba(253,248,243,0.85); font-size: 0.86rem; line-height: 1.5;
}
.strava-highlight .meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
  color: #fc4c02; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em;
}
.strava-highlight .meta span { display: inline-flex; align-items: center; gap: 4px; }

.strava-meta {
  margin-top: 22px;
  color: rgba(253,248,243,0.55);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.strava-empty {
  background: rgba(253,248,243,0.06);
  border: 1.5px dashed rgba(253,248,243,0.20);
  border-radius: 14px;
  padding: 22px;
  color: rgba(253,248,243,0.7);
  text-align: center;
  font-size: 0.92rem;
}

/* ---------- PAGE HEADER (subpages) ---------- */
.page-head {
  position: relative;
  background: linear-gradient(135deg, var(--burgundy-darker) 0%, var(--burgundy) 100%);
  color: var(--cream);
  /* Tighter than the home hero — inner pages need to surface content
     above the fold rather than dominate the viewport. */
  padding: clamp(110px, 14vw, 150px) 0 clamp(60px, 8vw, 90px);
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(237, 172, 26, 0.18) 1px, transparent 0);
  background-size: 30px 30px;
  opacity: 0.5;
}
.page-head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--cream));
}
.page-head .container { position: relative; z-index: 2; }
.page-head .eyebrow { color: var(--gold); }
.page-head .eyebrow::before { background: var(--gold); }
.page-head h1 {
  color: var(--cream);
  /* Override the global h1 size on inner pages — the home hero is
     still big via .hero h1; this only affects subpages. */
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 8px;
}
.page-head p {
  margin-top: 16px;
  font-size: 1.05rem;
  color: rgba(253, 248, 243, 0.8);
  max-width: 60ch;
  line-height: 1.55;
}
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(253, 248, 243, 0.6);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--gold); }
/* "Back to Members area" pill — sits at the top of any gated page's page-head */
.back-to-members {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  margin-bottom: 22px;
  background: rgba(237, 172, 26, 0.15);
  border: 1px solid rgba(237, 172, 26, 0.45);
  color: var(--gold-text);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.back-to-members:hover {
  background: var(--gold);
  color: var(--burgundy-darker);
  border-color: var(--gold);
  transform: translateX(-3px);
}
.back-to-members svg {
  transition: transform 0.25s var(--ease);
}
.back-to-members:hover svg { transform: translateX(-2px); }
.back-to-members .lock-mini {
  display: inline-flex; align-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--burgundy-darker); color: var(--gold);
  justify-content: center; flex-shrink: 0;
}
.back-to-members:hover .lock-mini {
  background: var(--burgundy); color: var(--gold);
}

/* ---------- ABOUT — CONTENT ---------- */
.split-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split-content.reverse > div:first-child { order: 2; }
@media (max-width: 900px) {
  .split-content { grid-template-columns: 1fr; gap: 50px; }
  .split-content.reverse > div:first-child { order: 0; }
}
.split-content p {
  color: var(--slate);
  margin-bottom: 18px;
  font-size: 1.02rem;
  line-height: 1.7;
}
.image-block {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--burgundy) 0%, var(--gold) 100%);
}
.image-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(237,172,26,0.4), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(115,36,68,0.5), transparent 50%);
}
.image-tag {
  position: absolute;
  bottom: 24px; left: 24px;
  background: var(--cream);
  color: var(--burgundy-darker);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.4);
}

/* ---------- TIMELINE ---------- */
.timeline {
  position: relative;
  padding-left: 30px;
  margin-top: 40px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--burgundy), transparent);
}
.timeline-item {
  position: relative;
  margin-bottom: 40px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -36px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--gold);
}
.timeline-year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--burgundy);
}
.timeline-text {
  margin-top: 6px;
  color: var(--slate);
  font-size: 0.97rem;
}

/* ---------- TRAINING SCHEDULE ---------- */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.schedule-day {
  padding: 22px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 200px;
  transition: all 0.3s var(--ease);
  position: relative;
}
.schedule-day:hover {
  transform: translateY(-3px);
  border-color: var(--burgundy);
  box-shadow: 0 14px 30px -15px rgba(115,36,68,0.3);
}
.schedule-day.feature {
  background: var(--burgundy-darker);
  color: var(--cream);
  border-color: var(--burgundy);
}
.schedule-day.feature .day-name { color: var(--gold); }
.schedule-day.feature .session-title { color: var(--cream); }
.day-name {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: 12px;
}
.session-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--burgundy-darker);
  margin-bottom: 6px;
  line-height: 1.2;
}
.session-time {
  font-size: 0.84rem;
  opacity: 0.75;
}
.session-empty {
  font-size: 0.85rem;
  opacity: 0.4;
  font-style: italic;
}
@media (max-width: 1100px) { .schedule-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .schedule-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- GALLERY ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s var(--ease);
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.big { grid-column: span 2; grid-row: span 2; }
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--burgundy), var(--gold));
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 10, 23, 0.88), transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: var(--cream);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.gallery-overlay h4 {
  color: var(--cream);
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.gallery-overlay p {
  font-size: 0.83rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-item.big { grid-column: span 2; }
}

/* ---------- FORM ---------- */
.form-section {
  background: var(--cream-warm);
  padding: clamp(70px, 10vw, 130px) 0;
  position: relative;
}
.form-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 60px);
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 30px 70px -25px rgba(115, 36, 68, 0.25);
  border: 1px solid var(--line);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
.form-row.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--burgundy-darker);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-warm);
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  transition: all 0.3s var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: 0;
  border-color: var(--burgundy);
  background: var(--cream);
  box-shadow: 0 0 0 4px rgba(115, 36, 68, 0.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-actions {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.form-note {
  font-size: 0.85rem;
  color: var(--slate);
  max-width: 32ch;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- ANIMATIONS ---------- */
[data-aos] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-aos="fade-left"] { transform: translateX(-30px); }
[data-aos="fade-right"] { transform: translateX(30px); }
[data-aos="zoom"] { transform: scale(0.92); }
[data-aos].in {
  opacity: 1;
  transform: translate(0) scale(1);
}
[data-aos][data-delay="1"] { transition-delay: 0.1s; }
[data-aos][data-delay="2"] { transition-delay: 0.2s; }
[data-aos][data-delay="3"] { transition-delay: 0.3s; }
[data-aos][data-delay="4"] { transition-delay: 0.4s; }

/* ---------- UTILITIES ---------- */
.text-center { text-align: center; }
.mb-md { margin-bottom: 28px; }
.mb-lg { margin-bottom: 50px; }
.mt-md { margin-top: 28px; }
.bg-cream { background: var(--cream); }
.bg-warm { background: var(--cream-warm); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   SOCIAL PANEL — Instagram-style grid + Follow CTA
   All selectors are prefixed with .social-panel to win against
   the per-page inline <style> blocks on home-*.html variants.
   Layout-critical properties also use !important as a final safety net,
   because some home pages have global `img { ... }` rules with their
   own positioning and opacity rules.
   ========================================================= */
.social-panel {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--cream);
  position: relative;
  display: block !important;
}
.social-panel .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.social-panel .social-panel-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 36px;
}
.social-panel .social-panel-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--burgundy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.social-panel .social-panel-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--burgundy-darker);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
  font-weight: 700;
}
.social-panel .social-panel-head h2 .accent { color: var(--burgundy); }
.social-panel .social-panel-head .social-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 35%, #8134af 70%, #515bd4 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 99px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.social-panel .social-panel-head .social-follow:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(221, 42, 123, 0.45);
}

/* THE GRID — critical layout, forced */
.social-panel .social-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
}
@media (max-width: 900px) {
  .social-panel .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* TILES — clickable square cards */
.social-panel .social-tile {
  position: relative !important;
  aspect-ratio: 1 / 1;
  width: auto !important;        /* defeat full-width `a` rules */
  max-width: none !important;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #8134af, #dd2a7b);
  display: block !important;
  text-decoration: none !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.social-panel .social-tile:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35);
}

/* IMAGE — fills the tile; forced visible (some home pages have a global
   `img { opacity: 0 }` rule for their hero carousels). */
.social-panel .social-tile img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* PLACEHOLDER — shown when no image (or image fails to load) */
.social-panel .social-tile .social-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.85);
}
.social-panel .social-tile.has-image .social-placeholder { display: none; }

/* HOVER OVERLAY — caption reveal */
.social-panel .social-tile .social-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.7));
  display: flex;
  align-items: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 2;
}
.social-panel .social-tile:hover .social-overlay,
.social-panel .social-tile:focus-visible .social-overlay { opacity: 1; }
.social-panel .social-tile .social-overlay span {
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* SMALL CORNER IG BADGE — only on tiles that have a real image */
.social-panel .social-tile .social-iglogo {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 3;
}
.social-panel .social-tile:hover .social-iglogo,
.social-panel .social-tile:focus-visible .social-iglogo { opacity: 1; }
.social-panel .social-tile:not(.has-image) .social-iglogo { display: none; }

/* PLACEHOLDER STATE — Instagram-gradient tiles */
.social-panel .social-tile:not(.has-image) {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 35%, #8134af 70%, #515bd4 100%);
}
.social-panel .social-tile:not(.has-image) .social-placeholder {
  color: rgba(255,255,255,0.9);
}
.social-panel .social-tile:not(.has-image) .social-placeholder svg {
  width: 38px;
  height: 38px;
}

.social-panel .social-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  border: 1.5px dashed rgba(115,36,68,0.2);
  border-radius: 18px;
  background: var(--cream-warm);
  color: var(--slate);
}
.social-panel .social-empty strong {
  display: block;
  color: var(--burgundy-darker);
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.social-panel .social-empty a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.social-panel .social-hint {
  margin: 24px auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--slate);
  font-size: 0.88rem;
  line-height: 1.55;
  font-style: italic;
}

@media (max-width: 700px) {
  .social-panel .social-panel-head { gap: 18px; }
  .social-panel .social-panel-head .social-follow {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   RACE REVIEWS (members-only)
   Shared styles for /race-reviews.html and /race-review.html.
   All classes prefixed .rv- to avoid collision with race results (.rr-).
   ========================================================= */

/* Top CTA banner (Just finished a race? / Write a review + view toggle) —
   text on the left, actions (Write button + Cards|Table toggle) on the right.
   Rendered as an explicit two-column grid so the actions stay on the same
   row without collapsing next to the button. */
.rv-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, rgba(115, 36, 68, 0.06), rgba(237, 172, 26, 0.10));
  border: 1px solid rgba(237, 172, 26, 0.30);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 40px;
}
.rv-cta h3 { margin: 0 0 4px; color: var(--burgundy-darker); }
.rv-cta p  { margin: 0; color: var(--slate); font-size: 0.94rem; }
.rv-cta-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
@media (max-width: 820px) {
  .rv-cta { grid-template-columns: 1fr; }
  .rv-cta-actions { justify-content: space-between; width: 100%; }
}
@media (max-width: 480px) {
  .rv-cta-actions { flex-wrap: wrap; gap: 10px; }
  .rv-cta-actions .btn { width: 100%; justify-content: center; }
  .rv-cta-actions .rv-view-toggle { margin-left: auto; }
}

/* Result-count row (small line just before the results list) */
.rv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
}

/* View mode toggle (Cards | Table) — sits in the CTA actions */
.rv-view-toggle {
  display: inline-flex;
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px;
  flex-shrink: 0;
}
.rv-view-toggle button {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s var(--ease);
}
.rv-view-toggle button:hover { color: var(--burgundy); }
.rv-view-toggle button.active {
  background: var(--burgundy);
  color: var(--cream);
  box-shadow: 0 2px 6px rgba(115, 36, 68, 0.20);
}
.rv-view-toggle button svg { width: 14px; height: 14px; }

/* Table view — sortable headers, zebra rows, full-row click */
.rv-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
  box-shadow: 0 6px 20px -12px rgba(115, 36, 68, 0.18);
}
.rv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  min-width: 780px;
}

/* Sticky header on scroll — helps when the table gets long */
.rv-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cream-warm);
  border-bottom: 2px solid rgba(115, 36, 68, 0.28);
  text-align: left;
  padding: 12px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--burgundy-darker);
  font-weight: 800;
  white-space: nowrap;
}
.rv-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.rv-table thead th.sortable:hover { background: rgba(237, 172, 26, 0.14); color: var(--burgundy); }
.rv-table thead th.sortable .rv-sort-arrow {
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 6px;
  opacity: 0.35;
  transition: opacity 0.15s var(--ease), transform 0.2s var(--ease);
  vertical-align: -1px;
}
.rv-table thead th.sortable.is-sorted .rv-sort-arrow {
  opacity: 1;
  color: var(--gold);
}
.rv-table thead th.sortable.is-sorted.desc .rv-sort-arrow { transform: rotate(180deg); }

/* Body cells */
.rv-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}
.rv-table tbody tr:last-child td { border-bottom: 0; }

/* Zebra rows — subtle but readable */
.rv-table tbody tr:nth-child(even) td { background: rgba(115, 36, 68, 0.025); }
.rv-table tbody tr:nth-child(odd)  td { background: var(--cream); }

/* Row hover + full-row click affordance */
.rv-table tbody tr {
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.rv-table tbody tr:hover td {
  background: rgba(237, 172, 26, 0.12);
}
.rv-table tbody tr:hover .rv-t-view { gap: 8px; color: var(--burgundy-darker); }
.rv-table tbody tr:focus { outline: none; }
.rv-table tbody tr:focus td { background: rgba(237, 172, 26, 0.18); }

/* Featured rows get a warmer background + left accent stripe on the first cell */
.rv-table tbody tr.is-featured td { background: rgba(237, 172, 26, 0.12); }
.rv-table tbody tr.is-featured:hover td { background: rgba(237, 172, 26, 0.22); }
.rv-table tbody tr.is-featured td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Race title cell */
.rv-table .rv-t-race {
  font-weight: 700;
  color: var(--burgundy-darker);
  line-height: 1.3;
}
.rv-table .rv-t-race .headline {
  display: block;
  font-weight: 400;
  font-style: italic;
  color: var(--slate);
  font-size: 0.82rem;
  margin-top: 2px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-table .rv-t-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(115, 36, 68, 0.10);
  color: var(--burgundy);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.rv-table .rv-t-featured-pin {
  background: var(--gold);
  color: var(--burgundy-darker);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.rv-table .rv-t-view {
  color: var(--burgundy);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.86rem;
  transition: gap 0.15s var(--ease), color 0.15s var(--ease);
}

.rv-table .rv-t-photos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--slate);
  font-size: 0.82rem;
  white-space: nowrap;
}
.rv-table .rv-t-photos svg { width: 12px; height: 12px; }

@media (max-width: 700px) {
  .rv-table-wrap { border-radius: 12px; }
  .rv-table .rv-t-race .headline { max-width: 220px; }
}

/* Star rating (read-only) — five gold pips out of a possible five */
.rv-stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  vertical-align: middle;
}
.rv-stars .star {
  width: 15px; height: 15px;
  color: var(--line);
}
.rv-stars .star.on { color: var(--gold); }

/* Star rating (interactive — click to rate) */
.rv-star-input {
  display: inline-flex;
  gap: 6px;
  padding: 6px 2px;
}
.rv-star-input button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--line);
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.rv-star-input button svg { width: 26px; height: 26px; display: block; }
.rv-star-input button:hover { transform: scale(1.1); }
.rv-star-input button.on { color: var(--gold); }
.rv-star-input button.hover-through { color: rgba(237,172,26,0.5); }

/* Filter chips (shared with results, but scoped so we can restyle if needed) */
.rv-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rv-filter .rv-chip {
  background: rgba(115, 36, 68, 0.07);
  color: var(--burgundy);
  border: 1px solid rgba(115, 36, 68, 0.18);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.rv-filter .rv-chip.active {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}
.rv-filter .rv-group-label {
  align-self: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin-right: 4px;
}

.rv-count {
  color: var(--slate);
  font-size: 0.86rem;
  margin: 4px 0 12px;
}
.rv-count strong { color: var(--burgundy-darker); }

/* Review card list */
.rv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.rv-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.rv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(115, 36, 68, 0.30);
  border-color: rgba(115, 36, 68, 0.25);
}
.rv-card.is-featured {
  border-color: rgba(237, 172, 26, 0.45);
  background: linear-gradient(180deg, rgba(237, 172, 26, 0.08), var(--cream) 60%);
}
.rv-card-hero {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--burgundy-darker), var(--burgundy));
  position: relative;
  overflow: hidden;
}
.rv-card-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rv-card-hero .rv-featured-pin {
  position: absolute; top: 10px; right: 10px;
  background: var(--gold);
  color: var(--burgundy-darker);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.rv-card-hero .rv-hero-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(237,172,26,0.85);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 20px;
  text-align: center;
  line-height: 1.2;
}
.rv-card-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.rv-card-body .top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.rv-card-body .race-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--burgundy-darker);
  line-height: 1.2;
  margin: 0;
}
.rv-card-body .headline {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: italic;
}
.rv-card-body .meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--slate);
  align-items: center;
}
.rv-card-body .meta .pill {
  background: rgba(115,36,68,0.08);
  color: var(--burgundy);
  padding: 2px 9px;
  border-radius: 99px;
  font-weight: 600;
}
.rv-card-body .foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}
.rv-card-body .foot .author { color: var(--slate); }
.rv-card-body .foot .read {
  color: var(--burgundy);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.rv-card-body .foot .read:hover { gap: 8px; }

/* Empty state */
.rv-empty {
  background: var(--cream-warm);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 22px;
  color: var(--slate);
  text-align: center;
}
.rv-empty h3 { color: var(--burgundy-darker); margin-bottom: 8px; }

/* Callout box (best-bit / watch-out) — used on the individual review view */
.rv-callout {
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(237,172,26,0.10), transparent 70%);
  padding: 14px 18px;
  border-radius: 0 12px 12px 0;
  margin: 16px 0;
}
.rv-callout .rv-callout-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--burgundy);
  margin-bottom: 4px;
}
.rv-callout.rv-callout-watch {
  border-left-color: #b7442e;
  background: linear-gradient(90deg, rgba(183,68,46,0.10), transparent 70%);
}
.rv-callout.rv-callout-watch .rv-callout-label { color: #8f3021; }
.rv-callout p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink); }

/* Category ratings grid on the single review view */
.rv-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.rv-category-cell {
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.rv-category-cell .rv-category-label {
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin-bottom: 4px;
}

/* Photo gallery on the single review view */
.rv-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.rv-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform 0.25s var(--ease);
}
.rv-gallery img:hover { transform: scale(1.02); }
.rv-gallery.single img { height: auto; max-height: 480px; }

/* Photo lightbox (very light — reuses existing overlay pattern) */
.rv-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26, 15, 21, 0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.rv-lightbox.show { display: flex; }
.rv-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }

/* Submission modal — shares field styling with results modal but rebranded */
.rv-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 15, 21, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 30px 20px;
  overflow-y: auto;
}
.rv-modal.show { display: flex; }
.rv-modal-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
  max-width: 680px;
  width: 100%;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.4);
  margin: auto;
}
.rv-modal-card h3 { color: var(--burgundy-darker); margin-bottom: 6px; }
.rv-modal-card .sub {
  color: var(--slate); font-size: 0.92rem; margin-bottom: 20px; line-height: 1.55;
}
.rv-modal-card .field { margin-bottom: 16px; }
.rv-modal-card .field.two,
.rv-modal-card .field.three {
  display: grid;
  gap: 12px;
}
.rv-modal-card .field.two  { grid-template-columns: 1fr 1fr; }
.rv-modal-card .field.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .rv-modal-card .field.two,
  .rv-modal-card .field.three { grid-template-columns: 1fr; }
}

.rv-modal-card label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: 6px;
}
.rv-modal-card label .opt {
  color: var(--slate);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

.rv-modal-card input[type="text"],
.rv-modal-card input[type="date"],
.rv-modal-card input[type="url"],
.rv-modal-card textarea,
.rv-modal-card select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--cream-warm);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.rv-modal-card textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.rv-modal-card input:focus,
.rv-modal-card textarea:focus,
.rv-modal-card select:focus {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 4px rgba(115, 36, 68, 0.08);
}

/* Would-recommend pill buttons */
.rv-recommend-row {
  display: inline-flex;
  gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.rv-recommend-row .rv-rec-opt {
  background: var(--cream-warm);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.rv-recommend-row .rv-rec-opt.on {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--cream);
}
.rv-recommend-row .rv-rec-opt.on[data-val="no"] { background: #8f3021; border-color: #8f3021; }
.rv-recommend-row .rv-rec-opt.on[data-val="maybe"] { background: var(--gold); border-color: var(--gold); color: var(--burgundy-darker); }

/* Photo picker — thumbnails + add-more button */
.rv-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.rv-photo-slot {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1.5px dashed var(--line);
  background: var(--cream-warm);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 8px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.rv-photo-slot:hover {
  border-color: var(--burgundy);
  background: rgba(115,36,68,0.05);
}
.rv-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.rv-photo-slot .rv-photo-status {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(115, 36, 68, 0.75);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px;
  text-align: center;
}
.rv-photo-slot .rv-photo-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(26,15,21,0.75);
  color: var(--cream);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.rv-photo-slot .rv-photo-remove:hover { background: var(--burgundy); }
.rv-photo-slot .rv-photo-size {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(26,15,21,0.7);
  color: var(--cream);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
}
.rv-photos-help {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 8px;
  line-height: 1.5;
}

/* Category rating rows in the form */
.rv-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.rv-cat-row:last-child { border-bottom: 0; }
.rv-cat-row .rv-cat-name {
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
}
.rv-cat-row .rv-cat-name .rv-cat-hint {
  color: var(--slate);
  font-size: 0.78rem;
  margin-left: 4px;
}

/* Modal error + success banners (reuse rr- pattern colours) */
.rv-modal-err,
.rv-modal-success {
  display: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.rv-modal-err { background: #ffe3e7; color: #5a0d22; }
.rv-modal-success {
  background: linear-gradient(135deg, rgba(60, 164, 92, 0.10), rgba(237, 172, 26, 0.12));
  color: var(--burgundy-darker);
}
.rv-modal-err.show,
.rv-modal-success.show { display: block; }

.rv-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Single review view — slim hero (stars + title + headline), body carries
   all the metadata (distance, terrain, date, location, finish time). */
.rv-view-hero {
  background: linear-gradient(135deg, var(--burgundy-darker), var(--burgundy));
  color: var(--cream);
  padding: clamp(50px, 7vw, 90px) 0 clamp(30px, 4vw, 50px);
}
.rv-view-hero h1 {
  color: var(--cream);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.rv-view-hero .rv-view-headline {
  color: rgba(253,248,243,0.9);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  max-width: 60ch;
}
.rv-view-hero .rv-stars .star { width: 22px; height: 22px; }

/* Meta row — same visual layout as the original hero design, just
   relocated to the top of the body (cream background). Pills adapted
   from gold-on-burgundy to burgundy-on-gold-tint so they stay readable
   on cream. Everything else keeps the identical rhythm and spacing. */
.rv-view-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.94rem;
  color: var(--slate);
  margin-bottom: 6px;
}
.rv-view-meta .pill {
  background: rgba(237, 172, 26, 0.18);
  color: var(--burgundy-darker);
  padding: 4px 12px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(237, 172, 26, 0.35);
}
.rv-view-meta strong { color: var(--burgundy-darker); }

/* Attribution row — reviewer + date on the left, recommendation pill right */
.rv-attribution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.rv-attribution-line {
  color: var(--slate);
  font-size: 0.94rem;
}
.rv-attribution-line strong { color: var(--burgundy-darker); }
.rv-attribution-line .dot { color: var(--line); margin: 0 8px; }

.rv-view-body {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.75;
}
.rv-view-body p { margin-bottom: 14px; }

/* Recommendation pill — now lives in the body attribution row (still same
   pill styling; kept here so it doesn't drift if we ever move it back). */
.rv-view-recommend {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}
.rv-view-recommend.yes   { background: rgba(60, 164, 92, 0.14);  color: #2b7a49; }
.rv-view-recommend.no    { background: rgba(183, 68, 46, 0.14);  color: #8f3021; }
.rv-view-recommend.maybe { background: rgba(237,172,26, 0.16);   color: var(--burgundy-darker); }