/* ==========================================================================
   Design tokens — locked system, see WEB DESIGN TEAM/DESIGN-SYSTEM.md
   Color + layout only; do not add new colors without updating that file.
   ========================================================================== */
:root {
  --bg: #0a0b0a;
  --surface-raised: #17140f;
  --border: rgba(255, 214, 90, 0.10);
  --border-strong: rgba(255, 214, 90, 0.18);
  --text: #f5f3ee;
  --text-muted: #9a9388;
  --text-faint: #5f594c;
  --accent: #ffd400;
  --accent-dim: #a6842e;
  --accent-ink: #17110a;

  /* Not part of the locked palette proper — a single desaturated red used
     ONLY for the destructive remove-from-cart hover state. Kept minimal and
     out of the --accent namespace on purpose. */
  --danger: #c65b4e;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }

h1, h2, .tile-tag, .brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Every number on the site reads like a scoreboard/ticket-stub readout. */
.price, .tile-price, .cart-item-price, .estimated-total, .subtotal,
.tile-badge, .event-date, .discount-note, .cart-nav-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Nav — sticky top bar
   ========================================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
}

.site-nav .brand img {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 4px;
}

.site-nav .cart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.cart-badge {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.cart-badge.hidden { display: none; }

/* Live running total (with volume discount applied), shown next to the
   cart link — event.html only, since it's the page that already has
   product prices loaded. Estimate only; checkout always recomputes it. */
.cart-nav-total {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.cart-nav-total.hidden { display: none; }

/* ==========================================================================
   Marketing/landing header (index.html) — this is a persuasion surface,
   so it keeps a hero-style block. The browse screen (event.html) below
   does NOT use .site-header — it goes straight into content instead.
   ========================================================================== */
.site-header {
  padding: 40px 24px 20px;
  text-align: center;
}

.back-link { margin: 0 0 8px; font-size: 14px; }
.back-link a { color: var(--text-muted); text-decoration: none; }
.back-link a:hover { color: var(--text); text-decoration: underline; }

.site-header h1 { margin: 0 0 8px; font-size: 34px; }
.subtitle { margin: 0 auto; max-width: 46em; color: var(--text-muted); font-size: 15px; }

/* ==========================================================================
   Browse screen top stack (event.html) — sticky title row + chip rail,
   no hero. Buyer already knows what they want; get out of the way.
   ========================================================================== */
.browse-top {
  position: sticky;
  top: 60px;
  z-index: 15;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: 14px;
}

.event-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 20px 12px;
}

.event-title-row .back-link { margin: 0; }
.event-title-row h1, .event-title-row h2 { margin: 0; font-size: 20px; }

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 20px 14px;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.category-tab:hover { border-color: var(--accent-dim); color: var(--text); }

.category-tab.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* Header disclosure — the $5 subject-tracking reel edit add-on, called out
   up top so a buyer sees it before scrolling through clips, on top of the
   existing per-clip checkbox (.tile-vertical-addon) at decision time. */
.addon-banner {
  margin: 0 20px 16px;
  padding: 12px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon-banner p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.addon-banner strong { color: var(--text); font-weight: 600; }

.addon-banner .price-chip {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .addon-banner { margin: 0 12px 14px; flex-wrap: wrap; }
  .addon-banner .price-chip { margin-left: 0; }
}

/* ==========================================================================
   Gallery — one horizontally-scrolling row per category (2026-08-24,
   replaced the old vertical masonry grid — see event.html's render()).
   Native aspect ratio no longer drives layout since tiles sit in a row
   instead of stacking; every tile is a fixed size with the media cropped
   to a consistent 4:5, same as the thumbnail placeholder already used.
   ========================================================================== */
.gallery {
  padding: 4px 0 48px;
  max-width: 1600px;
  margin: 0 auto;
}

.row-section { margin-top: 28px; }
.row-section:first-child { margin-top: 4px; }

.row-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 20px 12px;
}

.row-heading h2 { margin: 0; font-size: 22px; }
.row-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); white-space: nowrap; }

.row-scroller-wrap { position: relative; }

.row-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 20px 8px;
  scrollbar-width: none;
}

.row-scroller::-webkit-scrollbar { display: none; }

.row-arrow {
  position: absolute;
  top: 0;
  bottom: 8px;
  width: 56px;
  z-index: 5;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.row-scroller-wrap:hover .row-arrow,
.row-scroller-wrap:focus-within .row-arrow {
  opacity: 1;
}

.row-arrow.left { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(to right, var(--bg) 15%, transparent); }
.row-arrow.right { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(to left, var(--bg) 15%, transparent); }

.row-arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.row-arrow:hover .row-arrow-btn { border-color: var(--accent-dim); color: var(--accent); }

/* Touch devices scroll these natively by swipe — the hover-to-reveal
   arrows are a mouse affordance, so keep them out of the way and out of
   tab order on anything that can't hover. */
@media (hover: none) {
  .row-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .row-arrow { transition: none; }
  .row-scroller { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .row-heading { padding: 0 12px 10px; }
  .row-scroller { gap: 10px; padding: 2px 12px 8px; }
  .row-section { margin-top: 22px; }
}

.tile {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

@media (min-width: 900px) {
  .tile { width: 300px; }
}

.tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #000;
  line-height: 0;
}

.tile-media img,
.tile-media video.preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface-raised);
}

.tile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(10, 11, 10, 0.72);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: rgba(10, 11, 10, 0.6);
  color: var(--text);
  font-size: 16px;
  line-height: 48px;
  text-align: center;
  padding: 0 0 0 3px;
  cursor: pointer;
}

.preview-play.hidden { display: none; }

/* ==========================================================================
   Full-size preview popup — opened from a tile's video/play-button click.
   One shared instance, filled in per clip; see openVideoModal() in event.html.
   ========================================================================== */
body.modal-open {
  overflow: hidden;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-modal.hidden { display: none; }

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 10, 0.92);
}

.video-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
}

.video-modal-player {
  display: block;
  width: 100%;
  max-height: 82vh;
  border-radius: 8px;
  background: #000;
}

.video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 640px) {
  .video-modal {
    padding: 0;
  }

  .video-modal-content {
    max-width: 100%;
  }

  .video-modal-player {
    max-height: 100vh;
    border-radius: 0;
  }

  /* No room above the video on a full-bleed phone popup — pin the close
     button over the top-right corner of the video itself instead. */
  .video-modal-close {
    top: 12px;
    right: 12px;
    background: rgba(10, 11, 10, 0.72);
    color: var(--text);
  }
}

.tile-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px 10px;
  background: linear-gradient(to top, rgba(10, 11, 10, 0.94), rgba(10, 11, 10, 0));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tile-tag {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.tile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tile-price {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.tile-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Quiet secondary action — always "Buy Now", one-shot (not a toggle). */
.tile-buy-btn {
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(10, 11, 10, 0.5);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.tile-buy-btn:hover { border-color: var(--accent-dim); }
.tile-buy-btn:disabled { opacity: 0.6; cursor: default; }

/* Bold one-tap circular action — quick add/remove to cart. "+" when not in
   cart, checkmark + muted-gold fill (the "active-but-quiet" token) once added. */
.tile-add-circle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-add-circle.in-cart {
  background: var(--accent-dim);
  font-size: 15px;
}

/* Per-clip vertical-edit add-on checkbox — sits inside the scrim, below the
   price/actions row. Quiet by default; the label text itself carries the
   pitch, so no extra background/border treatment. */
.tile-vertical-addon {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  cursor: pointer;
}

.tile-vertical-addon input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.tile-vertical-addon:hover { color: var(--text); }

.loading, .empty {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
}

.gallery .loading, .gallery .empty { width: 100%; }

.empty code {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ==========================================================================
   Landing page — events grid (index.html)
   ========================================================================== */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 24px 48px;
  /* Narrower than before on purpose — with auto-fill, a wide container
     creates more empty column tracks than there are events, which pushes
     the real cards to the left with dead space on the right. Capping the
     container to roughly two cards' width means auto-fill only ever
     creates as many tracks as fit, and the centered container (margin:
     auto) centers that whole row as a group instead. Kept in sync with
     .commercial-promo's max-width below so the bundle bubble underneath
     lines up to exactly the same width as the event row above it. */
  max-width: 680px;
  margin: 0 auto;
}

.event-card {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}

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

.event-card:hover { border-color: var(--accent-dim); }

.event-card h2 { margin: 0 0 6px; font-size: 22px; }
.event-date { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.event-cta { color: var(--accent); font-weight: 600; font-size: 13px; font-family: var(--font-body); }

/* Commercial-bundle entry point on index.html — same card shape as
   .event-card (block link, same border/radius/padding), sized to the full
   width of the .commercial-promo container below the event row so it
   spans exactly as wide as both event cards combined. Only real
   difference is the accent border, since this one card is a bigger offer
   than a single event. Actual pricing detail + the request form live on
   commercial-preview.html, which this links to. */
.commercial-bundle-card {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 36px 22px;
  text-decoration: none;
  color: var(--text);
  text-align: center;
  transition: border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .commercial-bundle-card { transition: none; }
}

.commercial-bundle-card:hover { border-color: var(--accent); }

.commercial-bundle-card h2 { margin: 0 0 4px; font-size: 22px; }
.commercial-bundle-subtitle { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.commercial-bundle-was { display: block; margin: 0 0 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); text-decoration: line-through; }

/* ==========================================================================
   Commercial bundle — a plain entry-point card on index.html (styled like
   an event card, see .commercial-bundle-card below) that links to
   commercial-preview.html, where the actual request form + pricing lives
   (.commercial-promo* below — moved here from index.html so someone can
   see every clip before deciding).
   ========================================================================== */
.commercial-promo {
  max-width: 900px;
  margin: 20px auto 24px;
  padding: 0 24px;
}

.commercial-promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 28px 30px;
}

.commercial-promo-copy { flex: 1 1 320px; min-width: 0; }
.commercial-promo-copy h2 { margin: 0 0 8px; font-size: 24px; }
.commercial-promo-copy > p:not(.commercial-promo-price) { margin: 0; max-width: 46em; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.commercial-promo-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 12px 0 0; }
.commercial-promo-was { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--accent); text-decoration: line-through; text-decoration-color: var(--danger); }
.commercial-promo-now { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--accent); }

.commercial-promo-form {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
}

/* Was var(--bg) (near-black) on the same near-black panel — the fields were
   basically invisible. var(--text) (this system's near-white token) makes
   them read as actual fields against the dark .commercial-promo-inner
   panel; --accent-ink (already used for dark text on the gold accent
   elsewhere) gives the typed value proper contrast on that light field. */
.commercial-promo-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--text);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 13px;
}

.commercial-promo-form input::placeholder { color: var(--text-faint); }
.commercial-promo-form input:focus { outline: none; border-color: var(--accent-dim); }

.commercial-promo-btn {
  margin-top: 4px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.commercial-promo-btn:hover { background: var(--accent-dim); color: var(--text); }
.commercial-promo-btn:disabled { opacity: 0.6; cursor: default; }

.commercial-promo-note { margin: 0; font-size: 11px; color: var(--text); text-align: center; }

.commercial-promo-success,
.commercial-promo-error {
  flex: 0 0 auto;
  width: 260px;
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.commercial-promo-success { color: var(--accent); }
.commercial-promo-error { color: var(--danger); }
.commercial-promo-form.hidden,
.commercial-promo-success.hidden,
.commercial-promo-error.hidden { display: none; }

@media (max-width: 640px) {
  .commercial-promo { padding: 0 16px; margin-bottom: 40px; }
  .commercial-promo-inner { flex-direction: column; align-items: stretch; padding: 22px 20px; }
  .commercial-promo-form,
  .commercial-promo-success,
  .commercial-promo-error { width: 100%; }
}

/* ==========================================================================
   Cart page — recolored to the locked system; full masonry-style rebuild
   is the next (Flows) pass, this keeps it consistent in the meantime.
   ========================================================================== */
.cart-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.cart-item-info { flex: 1; }
.cart-item-info h3 { margin: 0 0 2px; font-size: 15px; color: var(--text); font-family: var(--font-body); text-transform: none; }
.cart-item-info .rider { margin: 0; color: var(--text-muted); font-size: 13px; }
.cart-item-price { font-weight: 600; color: var(--accent); }

/* Per-clip vertical-edit add-on checkbox, mirrors .tile-vertical-addon on
   the gallery tiles. */
.cart-item-addon {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  cursor: pointer;
}

.cart-item-addon input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.cart-item-addon:hover { color: var(--text); }

.remove-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.remove-btn:hover { color: var(--danger); }

.cart-summary {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.cart-summary .subtotal { margin: 0 0 4px; color: var(--text-muted); font-size: 14px; }
.discount-note { margin: 0 0 4px; color: var(--accent); font-weight: 600; font-size: 13px; }
.discount-note.muted { color: var(--text-faint); font-weight: 400; font-family: var(--font-body); }
.estimated-total { margin: 8px 0 16px; font-size: 22px; font-weight: 700; color: var(--text); }

.checkout-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-btn:disabled { opacity: 0.6; cursor: default; }

/* ==========================================================================
   Generic buttons still used on card bodies elsewhere (kept for pages not
   yet migrated to the tile system).
   ========================================================================== */
.card-body button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.card-body button:disabled { opacity: 0.6; cursor: default; }