/* ============================================================
   ericstrains.com — clean red & white theme
   Arial-based, mobile-first, minimal ornamentation.
   ============================================================ */

:root {
  /* Colors */
  --c-bg:            #ffffff;
  --c-surface:       #ffffff;
  --c-soft:          #f7f7f8;   /* subtle off-white for alternating areas */
  --c-text:          #1a1a1a;
  --c-text-soft:     #555555;
  --c-text-mute:     #888888;
  --c-border:        #e5e7eb;
  --c-border-strong: #d1d5db;
  --c-red:           #b3261e;   /* matches the AWRX herald */
  --c-red-dark:      #8a1c16;
  --c-red-soft:      #fef2f2;

  /* Type */
  --f-body: Arial, Helvetica, sans-serif;

  /* Layout */
  --w-max: 1180px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Shadow */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.10);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--c-red);
  text-decoration-color: rgba(179, 38, 30, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover { color: var(--c-red-dark); }

h1, h2, h3, h4 {
  font-family: var(--f-body);
  color: var(--c-text);
  margin: 0 0 1rem;
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: 1.85rem; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
@media (min-width: 700px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.2rem; }
}

p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 700px) { .container { padding: 0 1.5rem; } }

main { flex: 1; padding: 2rem 0 3rem; }

/* ---------- Site header ---------- */
/*
 * Layout strategy:
 *   Mobile (≤899px) — flex-wrap on. Row 1: brand + hamburger toggle.
 *     Row 2: social icons (forced via flex-basis 100%). Row 3: nav links
 *     (hidden by default; revealed when .main-nav has .is-open).
 *   Desktop (≥900px) — flex-wrap off. Hamburger hidden. Single inline row:
 *     brand grows to fill, then nav, then social — controlled via order.
 */

.site-header {
  background: var(--c-surface);
  border-bottom: 3px solid var(--c-red);
}

.nameplate {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--c-text);
  flex: 1 1 auto;
  min-width: 0;
}
.brand-emblem { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.brand-emblem img { display: block; height: 48px; width: auto; flex-shrink: 0; }
@media (max-width: 520px) {
  .brand-emblem img { height: 40px; }
}

.brand-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0;
}
.brand-tag {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  font-weight: 400;
  margin-top: 2px;
}
/* Hide tagline below the widest breakpoint so the bar isn't crowded. */
@media (max-width: 1099px) {
  .brand-tag { display: none; }
}

/* Hamburger toggle — visible only at mobile/tablet widths. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { color: var(--c-red); border-color: var(--c-red); outline: 0; }
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top:  7px; }

/* Social icons — always visible. On mobile they wrap onto their own row. */
.site-social {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 100%;
  order: 2;
}
.site-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--c-text);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-social a:hover,
.site-social a:focus-visible {
  color: var(--c-red);
  background: var(--c-red-soft);
  outline: 0;
}
.site-social svg,
.site-social img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain; /* keeps PNG logos proportional inside the 20x20 box */
}

/* Main nav — collapsed by default on mobile; .is-open reveals as a column. */
.main-nav {
  display: none;
  flex: 1 1 100%;
  order: 3;
  flex-direction: column;
  align-items: stretch;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-border);
}
.main-nav.is-open { display: flex; }
.main-nav a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--c-border);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.main-nav a:last-child { border-bottom: 0; }
.main-nav a:hover { color: var(--c-red); }
.main-nav a.is-active { color: var(--c-red); }

/* Desktop layout (≥ 900px) — single inline row, hamburger hidden. */
@media (min-width: 900px) {
  .nameplate {
    padding: 1rem 1.5rem;
    flex-wrap: nowrap;
  }
  .nav-toggle { display: none; }

  .main-nav {
    display: flex;
    flex: 0 0 auto;
    order: 2;
    flex-direction: row;
    gap: 1rem;
    padding-top: 0;
    border-top: 0;
  }
  .main-nav a {
    font-size: 0.9rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 2px solid transparent;
  }
  .main-nav a.is-active { border-bottom-color: var(--c-red); }

  .site-social {
    flex: 0 0 auto;
    order: 3;
  }
}

/* Wide desktop — restore tagline and slightly more breathing room. */
@media (min-width: 1100px) {
  .brand-emblem img { height: 52px; }
  .main-nav { gap: 1.25rem; }
  .main-nav a { font-size: 0.95rem; }
}

/* Legacy circular brand-mark — unused but kept harmless. */
.brand-mark { display: none; }

/* ---------- 20th anniversary banner (home page) ---------- */
.anniversary {
  text-align: center;
  padding: 0.5rem 1rem 2rem;
}
.anniversary-title {
  color: var(--c-red);
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.anniversary-years {
  color: var(--c-red);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0.5rem 0 0;
}
@media (min-width: 700px) {
  .anniversary-title { font-size: 3rem; }
  .anniversary-years { font-size: 1.4rem; }
}
@media (min-width: 1000px) {
  .anniversary-title { font-size: 3.5rem; }
}

/* ---------- etrains ---------- */
.etrains {
  background: var(--c-surface); /* white — was soft grey */
  border-bottom: 1px solid var(--c-border);
  padding: 2.25rem 0;
}
@media (min-width: 700px) { .etrains { padding: 3rem 0; } }

.etrains-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 800px) {
  .etrains-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.etrains-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 0.5rem;
}
.etrains h1 { margin-bottom: 1rem; }
.etrains-lede {
  font-size: 1.1rem;
  color: var(--c-text-soft);
  max-width: 52ch;
}
.etrains-cta {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Latest-video frame in the etrains */
.etrains-video {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 0.75rem;
  box-shadow: var(--shadow-card);
}
.etrains-video-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-red);
  margin: 0 0 0.5rem;
  padding: 0 0.25rem;
}
.etrains-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}
.etrains-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.etrains-video-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 0.75rem 0.25rem 0.25rem;
  line-height: 1.3;
}

/* Fallback quote panel (only renders if the YouTube feed is unavailable) */
.etrains-art {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.etrains-art-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 0.5rem;
}
.etrains-art-quote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--c-text);
  line-height: 1.4;
}
.etrains-art-attr {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--c-text-soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px; /* mobile tap target */
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--c-red);
  color: #fff;
  border-color: var(--c-red);
}
.btn-primary:hover {
  background: var(--c-red-dark);
  border-color: var(--c-red-dark);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--c-red);
  border-color: var(--c-red);
}
.btn-ghost:hover {
  background: var(--c-red);
  color: #fff;
}

/* ---------- Section heading ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 0.25rem;
}
.section-head h2 { margin: 0; }
.section-head .meta { color: var(--c-text-soft); font-size: 0.9rem; }

/* ---------- Card grid ---------- */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
/* When a card is the link itself (custom-runs listing), strip the default
   anchor underline/color so it still reads as a card, not a hyperlink. */
a.card,
a.card:hover,
a.card-link,
a.card-link:hover {
  color: inherit;
  text-decoration: none;
}

.card-media {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
}
.card-media.square { aspect-ratio: 4 / 3; background: var(--c-soft); }
.card-media img,
.card-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  line-height: 1.3;
}
.card-meta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-red);
}
.card-text {
  color: var(--c-text-soft);
  font-size: 0.95rem;
  margin: 0;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-red);
  background: var(--c-red-soft);
  border: 1px solid var(--c-red);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

/* Featured (split column) */
.featured { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0 2rem; }
.featured .card-media { aspect-ratio: 16 / 9; }
@media (min-width: 800px) { .featured { grid-template-columns: 1.5fr 1fr; gap: 1.5rem; } }

/* ---------- Page intro ---------- */
.page-intro {
  max-width: 70ch;
  margin: 0 auto 2rem;
  text-align: center;
}
.page-intro .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-red);
}
.page-intro h1 { margin: 0.5rem 0 1rem; }
.page-intro h2 { margin: 0.5rem 0 1rem; }
.page-intro p {
  color: var(--c-text-soft);
  font-size: 1.05rem;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 800px) { .contact-grid { grid-template-columns: 1.3fr 1fr; gap: 2rem; } }

.contact-form {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 700px) { .contact-form { padding: 1.75rem; } }

.contact-form .field { margin-bottom: 1rem; }
.contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* keeps iOS from auto-zooming on focus */
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 0;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

.contact-aside {
  background: var(--c-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
@media (min-width: 700px) { .contact-aside { padding: 1.75rem; } }

.contact-aside h3 { color: var(--c-text); margin-top: 0; }
.contact-aside ul { list-style: none; padding: 0; margin: 0; }
.contact-aside li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.95rem;
}
.contact-aside li:last-child { border-bottom: 0; }
.contact-aside a { word-break: break-word; }

/* Flash messages */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
  border: 1px solid;
  font-size: 0.95rem;
}
.flash.success {
  background: #f0fdf4;
  border-color: #16a34a;
  color: #166534;
}
.flash.error {
  background: var(--c-red-soft);
  border-color: var(--c-red);
  color: var(--c-red-dark);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  background: var(--c-surface);
  color: var(--c-text);
  border-top: 3px solid var(--c-red);
  padding: 1.5rem 0;
  font-size: 0.9rem;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
@media (min-width: 700px) {
  .site-footer .container { flex-direction: row; text-align: left; }
}
.site-footer .credit { color: var(--c-text-soft); font-size: 0.85rem; }
.site-footer .social {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer .social a {
  color: var(--c-red);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--c-red);
  border-radius: var(--r-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.site-footer .social a:hover {
  background: var(--c-red);
  color: #fff;
}

/* ---------- Playlist cards (videos.php — hybrid expand-to-embed) ---------- */
.playlist-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.playlist-card:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 2px;
}
/* Play-triangle overlay on the thumbnail */
.playlist-card .card-media { position: relative; }
.playlist-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.15);
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  pointer-events: none; /* click goes to the card */
}
.playlist-card:hover .playlist-card__play {
  opacity: 1;
  background: rgba(0, 0, 0, 0.30);
  transform: scale(1.08);
}
/* Expanded state: card stretches to accommodate iframe; remove hover lift. */
.playlist-card.is-expanded {
  cursor: default;
  transform: none;
}
.playlist-card.is-expanded:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}
.playlist-card.is-expanded .card-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Action row appended to the card body when expanded. */
.playlist-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.playlist-card__yt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-red);
  text-decoration: none;
}
.playlist-card__yt:hover { text-decoration: underline; }
.playlist-card__close {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-text-soft);
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.playlist-card__close:hover {
  color: var(--c-red);
  border-color: var(--c-red);
  background: var(--c-red-soft);
}

/* ---------- Collection statistics (top of /collection/) ---------- */
/*
 * "Collection at a glance" panel. White card with multiple breakdown sections
 * (brand, gauge, …) in a responsive grid. Each entry is a two-line block:
 *   row 1: LABEL ........ count
 *   row 2: ━━━━━━━━━━━━━━━━━━  (bar scaled to the section's max)
 * PHP computes counts + percentages in tally_by(); the percentage is exposed
 * as a tooltip on the count rather than as a visible label, keeping each row
 * visually clean.
 */
.collection-stats {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0 auto 2rem;
  max-width: var(--w-max);
  box-shadow: var(--shadow-lift);
}
/* Header row: title/subtitle on the left, "Powered by ITRAINDB" pinned
   to the top right. Wraps onto two lines on narrow screens (credit drops
   below the heading and aligns left so it doesn't look stranded). */
.collection-stats-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.collection-stats-heading {
  min-width: 0;
  flex: 1 1 auto;
}
.collection-stats-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
}
.collection-stats-subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: var(--c-text-soft);
}
.collection-stats-credit {
  margin: 0;
  font-size: 0.7rem;
  color: var(--c-text-mute);
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}
.collection-stats-credit a {
  color: var(--c-text-mute);
  text-decoration: none;
}
.collection-stats-credit a:hover,
.collection-stats-credit a:focus-visible {
  color: var(--c-text-soft);
  text-decoration: underline;
}
@media (max-width: 480px) {
  .collection-stats-credit { text-align: left; }
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
}
@media (min-width: 700px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

.stats-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-mute);
  margin: 0 0 0.85rem;
  font-weight: 600;
}

/* Horizontal bar list — used by the By Brand breakdown. Each .stat-row is
 * label+count on top, bar underneath. Bar width is the entry's share of the
 * section's MAX count (so the top entry always fills the track). */
.stat-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.stat-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stat-count {
  font-size: 0.9rem;
  color: var(--c-text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-pct {
  color: var(--c-text-mute);
  font-size: 0.85em;
  margin-left: 0.15rem;
}
.stat-bar {
  position: relative;
  display: block;
  height: 8px;
  background: #eef0f4;
  border-radius: 999px;
  overflow: hidden;
}
.stat-bar-fill {
  display: block;
  height: 100%;
  background: #1f2937;
  border-radius: 999px;
  transition: width 0.45s ease;
}

/* Search form — right column of the stats panel. */
.stats-search {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.stats-search-field {
  display: flex;
  gap: 0.5rem;
}
.stats-search-field input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stats-search-field input[type="search"]:focus {
  outline: 0;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-red-soft);
}
.stats-search-field .btn {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
}
.stats-search-help {
  margin: 0;
  font-size: 0.8rem;
  color: var(--c-text-mute);
}
.stats-search-summary {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--c-text);
}

.stats-sort-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stats-sort-field label {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  white-space: nowrap;
}
.stats-sort-field select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}
.stats-sort-field select:focus {
  outline: 0;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-red-soft);
}

/* ---------- Photo lightbox (collection cards) ---------- */
/*
 * Each card's photo is wrapped in a <button class="photo-trigger"> so clicks
 * become real, keyboard-accessible actions. The single .photo-modal at the
 * bottom of the page is hidden by default; JS swaps in the clicked image's
 * URL/caption and toggles the `hidden` attribute. Esc, close button, and
 * backdrop click all dismiss it.
 */
.photo-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}
.photo-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.photo-trigger:hover img,
.photo-trigger:focus-visible img {
  transform: scale(1.04);
}
.photo-trigger:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: -3px;
}

.photo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  z-index: 1000;
}
.photo-modal[hidden] { display: none; }

.photo-modal-img {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #000;
}
.photo-modal-caption {
  color: rgba(255, 255, 255, 0.9);
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  max-width: 80ch;
}
.photo-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.photo-modal-close:hover,
.photo-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: 0;
}

/* Lock background scroll while the lightbox is open. */
body.photo-modal-open { overflow: hidden; }

/* ---------- Featured-videos carousel (home page) ---------- */
/*
 * Slides are stacked absolutely inside a 16:9 frame; only the .is-active slide
 * is opaque/interactive. JS swaps which slide has .is-active. Each slide is
 * initially a thumbnail wrapped in a <button class="fv-play">; clicking it
 * replaces the button with a YouTube iframe (autoplay) and freezes auto-advance.
 */
.featured-carousel {
  background: var(--c-soft);
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--c-border);
}
.featured-carousel-title {
  text-align: center;
  margin: 0 0 1.25rem;
}

.fv-carousel {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  outline: none;
}

.fv-track {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.fv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.fv-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.fv-slide iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The clickable thumbnail button — fills the slide. */
.fv-play {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.fv-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.fv-play:hover img,
.fv-play:focus-visible img {
  transform: scale(1.03);
}
.fv-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 56px;
  transform: translate(-50%, -50%);
  opacity: 0.92;
  transition: transform 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}
.fv-play-icon svg { width: 100%; height: 100%; display: block; }
.fv-play:hover .fv-play-icon,
.fv-play:focus-visible .fv-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}
.fv-play:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 3px;
}

/* Prev/next arrows. Hidden when there's only one slide via .fv-single below. */
.fv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.fv-arrow:hover,
.fv-arrow:focus-visible {
  background: var(--c-red);
  outline: 0;
}
.fv-arrow svg { width: 22px; height: 22px; }
.fv-prev { left: 0.75rem; }
.fv-next { right: 0.75rem; }
@media (min-width: 700px) {
  .fv-prev { left: 1rem; }
  .fv-next { right: 1rem; }
}

/* Dots under the track. */
.fv-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.fv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--c-border-strong);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.fv-dot:hover,
.fv-dot:focus-visible {
  background: var(--c-text-soft);
  outline: 0;
}
.fv-dot.is-active {
  background: var(--c-red);
  transform: scale(1.15);
}

/* Single-video case: keep the thumbnail + play affordance, drop the controls. */
.fv-single .fv-arrow,
.fv-single .fv-dots { display: none; }

/* ---------- Pager (collection pagination) ---------- */
/* Lives above and below the collection grid. Five controls in a row:
   « first, ‹ prev, page status, › next, » last. Disabled boundary controls
   render as <span class="is-disabled"> instead of <a>, so they're not
   focusable and visually fade out. */
.pager {
  margin: 1.25rem 0;
}
.pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-red);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pager-btn:hover,
.pager-btn:focus-visible {
  background: var(--c-red);
  color: #fff;
  border-color: var(--c-red);
  outline: 0;
}
.pager-btn.is-disabled {
  color: var(--c-text-mute);
  background: var(--c-soft);
  border-color: var(--c-border);
  cursor: not-allowed;
}
.pager-status {
  padding: 0 0.5rem;
  font-size: 0.95rem;
  color: var(--c-text-soft);
  white-space: nowrap;
}
.pager-range {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.85rem;
  color: var(--c-text-mute);
}
@media (max-width: 480px) {
  .pager-range { display: block; margin-left: 0; }
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.muted { color: var(--c-text-soft); }
.divider {
  height: 1px;
  background: var(--c-border);
  margin: 2rem 0;
  border: 0;
}