* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #F5F3EE;          /* Ivory — main background */
  --bg-dark: #111111;     /* Soft Black — entrance fallback bg */
  --bg-accent: #e7ddcc;   /* Whitish Orange — placeholder, confirm exact hex with Ernest */
  --text: #111111;        /* Soft Black */
  --text-muted: #8C8982;  /* Warm Grey */
  --entrance-text: #f0ebe1; /* near-ivory text over dark video, not tied to --bg on purpose
                                since it needs slightly more contrast against video footage */
  --center-tile-scale: 1.15; /* Highlights carousel center-tile emphasis, tune 1.12–1.18 by feel */
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ENTRANCE SCREEN — the one dark section on the whole site */
.entrance {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-dark);
}

.entrance-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.entrance-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 9, 8, 0.45);
}

.entrance-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--entrance-text);
  text-align: center;
}

.wordmark-logo {
  width: 60%;
  max-width: 280px;
  height: auto;
}

.scroll-cue {
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  margin-top: 1.5rem;
  text-transform: uppercase;
  color: var(--entrance-text);
}

.stat-line {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin-top: 1.5rem;
  color: var(--entrance-text);
}

.stat-line .word {
  display: inline-block;
}

.marquee {
  background: var(--bg);
  border-top: 1px solid var(--text-muted);
  border-bottom: 1px solid var(--text-muted);
  overflow: hidden;
  padding: 0.6rem 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   HIGHLIGHTS — pinned horizontal scroll (desktop)
   / transform-based auto-creep carousel (mobile).
   ============================================================ */

.highlights-section {
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg);
  padding: 60px 0 48px 0;
}

.highlights-header {
  padding: 0 40px;
  margin-bottom: 40px;
  text-align: center;
}

.highlights-eyebrow {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.highlights-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 56px);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}

.highlights-track {
  display: flex;
  gap: 24px;
  padding: 0 40px;
  width: max-content;
  touch-action: pan-y;
  cursor: grab;
  padding-top: 40px;
  padding-bottom: 40px;
}

.highlight-tile {
  position: relative;
  width: 220px;
  height: 390px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(160deg, #d9d4c8, #bfb9a8);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transform: scale(1);
  transition: transform 180ms ease-out;
  cursor: pointer;
}

.highlight-tile.is-center {
  transform: scale(var(--center-tile-scale));
  z-index: 2;
}

.highlight-tile:nth-child(odd) {
  background: linear-gradient(160deg, #cfc8b8, #a8a293);
}

.highlight-tile-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* CSS-level backup for the draggable="false" attribute set in main.js —
   stops the browser's native image drag-out ghost, which was fighting
   with the Highlights carousel's own drag-to-scroll and smearing custom
   thumbnail images. Only matters for <img> tiles; <video> was never
   affected since video elements aren't natively draggable this way. */
.highlight-tile-thumb,
.fitness-tile-thumb,
.lifestyle-thumb,
.event-tile-thumb {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.highlight-tile .index,
.highlight-tile .label {
  position: relative;
  z-index: 1;
}

.highlight-tile .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  display: block;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.highlight-tile .tag {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

.highlight-tile .index {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.progress-track {
  position: absolute;
  bottom: 32px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: rgba(17, 17, 17, 0.1);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--text);
}

/* ============================================================
   LIFESTYLE — swipeable stacked deck, tap-to-play into the same
   shared overlay Highlights uses. Data source: category =
   "Lifestyle".
   ============================================================ */

.lifestyle-section {
  background-color: var(--bg);
  padding: 60px 0 48px 0;
}

.lifestyle-header {
  padding: 0 40px;
  margin-bottom: 40px;
  text-align: center;
}

.lifestyle-eyebrow {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.lifestyle-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 56px);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}

.lifestyle-deck-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lifestyle-deck {
  position: relative;
  width: 260px;
  height: 462px;
}

.lifestyle-tile {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(160deg, #d9d4c8, #bfb9a8);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  transition: transform 260ms ease, opacity 260ms ease;
}

.lifestyle-tile.pos-0 {
  transform: translateY(0) scale(1);
  z-index: 3;
}

.lifestyle-tile.pos-1 {
  transform: translateY(18px) scale(0.94);
  z-index: 2;
  opacity: 0.85;
}

.lifestyle-tile.pos-2 {
  transform: translateY(32px) scale(0.88);
  z-index: 1;
  opacity: 0.6;
}

.lifestyle-tile.pos-hidden {
  opacity: 0;
  z-index: 0;
  transform: translateY(-30px) scale(1);
  pointer-events: none;
}

.lifestyle-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.lifestyle-tile .label {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 40px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.lifestyle-tile .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  display: block;
}

.lifestyle-tile .tag {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

.lifestyle-deck-btn {
  margin-top: 20px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 150ms ease, color 150ms ease;
}

.lifestyle-deck-btn:hover {
  background: var(--text);
  color: var(--bg);
}

/* ============================================================
   FITNESS — static 2-column grid, portrait tiles.
   Data source: category = "Fitness" (includes collection-tagged
   clips like "Hyrox" — see main.js).
   ============================================================ */

.fitness-section {
  background-color: var(--bg);
  padding: 60px 0 48px 0;
}

.fitness-header {
  padding: 40px 40px;
  margin-bottom: 40px;
  text-align: center;
  background-color: var(--bg-dark);
}

/* ============================================================
   CAM-META — REC dot + fake incrementing timecode. Purely
   decorative flavor tied to the film-production motif; the
   timecode number means nothing and just ticks upward via
   main.js. Scoped to Fitness and Event Coverage only per
   Echo's call — Highlights and Lifestyle stay as they are.
   ============================================================ */
.cam-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rec-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c0392b;
}

.rec-dot .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0392b;
  animation: rec-pulse 1.6s ease-in-out infinite;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.timecode {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CORNER BRACKETS — viewfinder-style L marks that snap in on
   tile hover. Scoped to Fitness (.fitness-tile) and Event
   Coverage (.event-tile) only, matching the cam-meta scope above.
   ============================================================ */
.bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  border: 2px solid #ffffff;
  pointer-events: none;
}

.bracket.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; transform: translate(6px, 6px); }
.bracket.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; transform: translate(-6px, 6px); }
.bracket.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; transform: translate(6px, -6px); }
.bracket.br { bottom: 10px; right: 10px; border-left: none; border-top: none; transform: translate(-6px, -6px); }

@media (hover: hover) {
  .fitness-tile:hover .bracket,
  .event-tile:hover .bracket {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rec-dot .dot {
    animation: none;
  }
  .bracket {
    transition: none;
  }
}

.fitness-eyebrow {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.fitness-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 56px);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--bg);
}

.fitness-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 20px;
  max-width: 900px;
  margin: 0 auto;
}

.fitness-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(160deg, #d9d4c8, #bfb9a8);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}

.fitness-tile-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.fitness-tile .label {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 40px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.fitness-tile .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  display: block;
}

.fitness-tile .tag {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* ============================================================
   EVENT COVERAGE — same static grid pattern again.
   Data source: category = "Event Coverage".
   ============================================================ */

.events-section {
  background-color: var(--bg);
  padding: 60px 0 48px 0;
}

.events-header {
  padding: 40px 40px;
  margin-bottom: 40px;
  text-align: center;
  background-color: var(--bg-dark);
}

.events-eyebrow {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.events-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 56px);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--bg);
}

.events-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 24px;
  gap: 10px;
  padding: 0 20px;
  max-width: 900px;
  margin: 0 auto;
}

.event-tile {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(160deg, #d9d4c8, #bfb9a8);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}

.event-tile-hero {
  grid-column: span 4;
  grid-row: span 14;
}

.event-tile-small {
  grid-column: span 2;
  grid-row: span 6;
}

.event-tile-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.event-tile .label {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 40px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.event-tile .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  display: block;
}

.event-tile-small .name {
  font-size: 14px;
}

.event-tile .tag {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .events-wall {
    grid-template-columns: repeat(4, 1fr);
  }

  .event-tile-hero {
    grid-column: span 4;
    grid-row: span 12;
  }

  .event-tile-small {
    grid-column: span 2;
    grid-row: span 6;
  }
}

/* Desktop spotlight — click a tile, enlarged card appears, rest dims.
   Shared by HIGHLIGHTS, LIFESTYLE, FITNESS, and EVENTS via
   window.openMediaOverlay(). */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 200;
}

.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-card {
  position: relative;
  overflow: hidden;
  /* 340x600 is only the FALLBACK shown briefly before the clicked
     clip's real dimensions are known — main.js overwrites width/height
     inline (as px) once the video's metadata loads, sizing the card to
     that clip's actual aspect ratio instead of always staying 9:16.
     max-width/max-height stay as a hard safety cap either way, so the
     card can never push past the viewport regardless of source size. */
  width: 340px;
  height: 600px;
  max-width: 90vw;
  max-height: 86vh;
  border-radius: 4px;
  background: linear-gradient(160deg, #d9d4c8, #bfb9a8);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  /* extra bottom padding so the name/tag label clears the native
     <video controls> bar instead of sitting on top of it */
  padding: 28px 28px 68px 28px;
  transition: width 0.3s ease, height 0.3s ease;
}

.lightbox-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.lightbox-card > div {
  position: relative;
  z-index: 1;
  padding: 20px 4px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  margin: -20px -4px -4px;
}

.lightbox-card .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  display: block;
}

.lightbox-card .tag {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

/* When the video (or its card) is pushed into true browser Fullscreen
   via the native controls, drop the artificial dark gradient behind
   the label — relies on main.js toggling this class on fullscreenchange */
.lightbox-card.is-fullscreen > div {
  background: none;
}

.lightbox-close {
  position: absolute;
  top: 28px;
  right: 32px;
  background: none;
  border: none;
  color: var(--bg);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  z-index: 2;
}

/* Mobile full-viewport takeover */
.mobile-fullscreen-overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #d9d4c8, #bfb9a8);
  display: flex;
  align-items: flex-end;
  /* extra bottom padding so the label clears the native video controls bar */
  padding: 32px 32px 76px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 200;
}

.mobile-fullscreen-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-fullscreen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mobile-fullscreen-overlay > div {
  position: relative;
  z-index: 1;
  padding: 20px 4px 4px;
  /* mobile playback is already a fullscreen takeover, so no gradient scrim here */
  background: none;
  margin: -20px -4px -4px;
}

.mobile-fullscreen-overlay .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  display: block;
}

.mobile-fullscreen-overlay .tag {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

.mobile-fullscreen-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  z-index: 2;
}

/* ============================================================
   FOOTER — column grid + divider + labeled social row, kept
   in the ivory palette.
   ============================================================ */

.site-footer {
  background-color: var(--bg-dark);
  color: var(--bg);
  padding: 4rem 2rem 2.5rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.footer-col-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.footer-link,
.footer-text {
  font-size: 0.9rem;
  color: var(--bg);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--bg-accent);
}

.footer-divider {
  max-width: 1100px;
  margin: 2.5rem auto;
  border-top: 1px solid var(--text-muted);
  opacity: 0.5;
}

.footer-social-row {
  display: flex;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-social-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bg);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-social-item:hover {
  color: var(--bg-accent);
}

.footer-social-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--text-muted);
}

.footer-logo {
  height: 22px;
  width: auto;
}

.footer-copyright {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-social-row {
    flex-direction: column;
    gap: 1.2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}

/* Smaller tiles on narrow screens — the carousel mechanic itself
   (auto-creep, drag, center-focus) is now identical on every screen size. */
@media (max-width: 768px) {
  .highlight-tile {
    width: 160px;
    height: 284px;
  }

  .progress-track {
    position: static;
    margin: 8px 40px 0 40px;
  }
}

/* ============================================================
   INTERACTION LAYER — hover lift, tap/click press feedback,
   focus rings, and a "grow a little" zoom on video tile hover.

   Video tiles (highlight, fitness, lifestyle, event) each already
   have JS-driven transforms on the TILE itself (carousel center
   scale, deck stack position, drag offset), so scaling the tile
   on hover would fight those. Instead the hover "grow" is applied
   to the inner *-thumb video only, clipped by the tile's own
   overflow: hidden — same visual result, zero transform conflicts.
   ============================================================ */

/* ============================================================
   CUSTOM CURSOR — desktop-only "Play" pill that replaces the
   native pointer over any video tile, site-wide (Highlights,
   Fitness, Lifestyle, Events). The pill element itself is
   created and positioned by main.js; this just styles it and
   hides the native cursor over tiles so the pill reads as a
   replacement, not an addition.

   Trade-off: on the Highlights carousel the native cursor
   normally shows grab/grabbing while dragging the track — that's
   set on .highlights-track, a different element, so it still works,
   but visually the pill sits on top of tiles during a drag too.
   Flagging this so it doesn't look like a bug if Ernest asks.
   ============================================================ */
.custom-cursor-pill {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  pointer-events: none;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 180ms ease;
}

.custom-cursor-pill.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .highlight-tile,
  .fitness-tile,
  .lifestyle-tile,
  .event-tile {
    cursor: none;
  }
}

@media (max-width: 768px) {
  .custom-cursor-pill {
    display: none;
  }
}

@media (hover: hover) {
  .highlight-tile-thumb,
  .fitness-tile-thumb,
  .lifestyle-thumb,
  .event-tile-thumb {
    transition: transform 320ms ease;
  }

  .highlight-tile:hover .highlight-tile-thumb,
  .fitness-tile:hover .fitness-tile-thumb,
  .lifestyle-tile:hover .lifestyle-thumb,
  .event-tile:hover .event-tile-thumb {
    transform: scale(1.06);
  }

  .highlight-tile,
  .fitness-tile,
  .event-tile {
    transition: transform 180ms ease-out, box-shadow 200ms ease;
  }

  .highlight-tile:hover,
  .fitness-tile:hover,
  .event-tile:hover {
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.2);
  }

  .lifestyle-deck-btn,
  .footer-social-icon {
    transition: transform 200ms ease, background-color 150ms ease, color 150ms ease;
  }

  .footer-social-item:hover {
    transform: translateX(3px);
  }

  .footer-social-item:hover .footer-social-icon {
    transform: scale(1.15) rotate(-6deg);
  }

  .lightbox-close,
  .mobile-fullscreen-close {
    transition: transform 150ms ease, opacity 150ms ease;
  }

  .lightbox-close:hover,
  .mobile-fullscreen-close:hover {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

/* Press/tap feedback — works on touch too, unlike :hover */
.highlight-tile:active {
  filter: brightness(0.94);
}

.fitness-tile:active,
.event-tile:active,
.lifestyle-tile:active {
  transform: scale(0.97);
}

.fitness-tile,
.event-tile,
.lifestyle-tile {
  transition: transform 150ms ease, opacity 260ms ease, box-shadow 200ms ease;
}

.lifestyle-deck-btn:active {
  transform: scale(0.93);
}

.lightbox-close:active,
.mobile-fullscreen-close:active {
  transform: scale(0.88);
}

.footer-social-item {
  transition: color 150ms ease, transform 150ms ease;
}

.footer-social-item:active {
  transform: scale(0.95);
}

/* Footer links get an underline-slide on hover, on top of the
   existing color-shift, plus tap feedback */
.footer-link {
  position: relative;
  display: inline-block;
  transition: color 150ms ease;
}

.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width 220ms ease;
}

.footer-link:hover::after {
  width: 100%;
}

.footer-link:active {
  opacity: 0.6;
}

/* Focus rings — keyboard nav gets the same clarity mouse users get from hover */
a:focus-visible,
button:focus-visible,
.highlight-tile:focus-visible,
.fitness-tile:focus-visible,
.lifestyle-tile:focus-visible,
.event-tile:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.mobile-fullscreen-overlay :focus-visible,
.lightbox-overlay :focus-visible,
.site-footer :focus-visible,
.fitness-header :focus-visible,
.events-header :focus-visible {
  outline-color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .highlight-tile-thumb,
  .fitness-tile-thumb,
  .lifestyle-thumb,
  .event-tile-thumb,
  .highlight-tile,
  .fitness-tile,
  .event-tile,
  .lifestyle-tile,
  .footer-link::after,
  .footer-social-item,
  .footer-social-icon,
  .lightbox-close,
  .mobile-fullscreen-close,
  .lifestyle-deck-btn,
  .custom-cursor-pill {
    transition: none !important;
  }
}