/* ============================================
   VIDEO STRIP (home hero) — thin, full width
   ============================================ */
.video-strip {
  position: relative;
  width: 100%;
  background: var(--bg);
  padding: 6vh 0 4vh;
}

.video-strip-inner {
  position: relative;
  width: 100%;
  max-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-strip-inner video, .video-strip-inner img {
  width: 100%;
  height: auto;
  max-height: 68vh;
  display: block;
  object-fit: contain;
}

.video-strip-inner::after {
  display: none;
}

/* ============================================
   SECTION LABEL ROW — page title + meta, plain text, no boxes
   ============================================ */
.intro-band {
  padding: 34px clamp(20px, 4vw, 56px) 26px;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}

.intro-band .eyebrow { display: block; margin-bottom: 8px; }

.intro-band h1 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300;
}

/* ============================================
   TEXT UTILITIES — shared by lightbox caption and film-row overlay
   ============================================ */
.sheet-tile-role {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 4px;
}

.sheet-tile-title {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

.sheet-tile-genre {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ============================================
   MUSIC PAGE — section labels between Videography / Live Photography
   ============================================ */
.music-section-label {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px clamp(20px, 4vw, 56px) 22px;
  text-align: center;
}

.music-section-label:first-of-type { padding-top: 8px; }

.music-section-label .eyebrow { display: block; margin-bottom: 6px; }

.music-section-label h2 {
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: 400;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  background: rgba(7,7,7,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox-content {
  max-width: min(1100px, 90vw);
  max-height: 86vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lightbox-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.lightbox-dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  padding: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.lightbox-dots button:hover { background: var(--text-dim); }

.lightbox-dots button.is-active {
  background: var(--text);
  transform: scale(1.3);
}

.lightbox-content img, .lightbox-content video {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  object-fit: contain;
}

.lightbox-caption { text-align: center; }
.lightbox-caption .sheet-tile-role { margin-bottom: 8px; color: var(--accent-text); }
.lightbox-caption .sheet-tile-title { font-size: 1.05rem; color: var(--text); }
.lightbox-caption .sheet-tile-genre { color: var(--text-dim); }

.lightbox-summary {
  margin-top: 14px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
  max-width: 46ch;
  line-height: 1.6;
  margin-left: auto;
  margin-right: auto;
}

.lightbox-summary .specs-line {
  display: block;
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lightbox-summary .specs-line:first-of-type {
  margin-top: 12px;
}

.lightbox-close {
  position: absolute;
  top: 28px;
  right: clamp(20px, 4vw, 56px);
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}
.lightbox-close:hover { color: var(--text); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--text-dim);
  padding: 16px;
  transition: color 0.2s var(--ease);
}
.lightbox-nav:hover { color: var(--accent); }
.lightbox-prev { left: clamp(8px, 2vw, 32px); }
.lightbox-next { right: clamp(8px, 2vw, 32px); }

@media (max-width: 640px) {
  .lightbox {
    padding: 24px 16px;
    background: #070707;
  }
  .lightbox-nav {
    font-size: 2.4rem;
    padding: 16px 12px;
    background: none;
    border-radius: 0;
    color: var(--text);
  }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
}

/* ============================================
   FILM PAGE — one image per row, centered. Image itself stays clean
   (no overlay). On hover: slow crossfade through stills, with dots
   below the image to jump to a specific frame, and a cream info card
   that fades in beneath everything with title/role/summary in dark text.
   ============================================ */
.section-label {
  text-align: center;
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: clamp(20px, 3vw, 36px) 0 clamp(12px, 2vw, 20px);
  margin: 0;
}

.selected-work-label {
  text-align: center;
  font-family: var(--font);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: clamp(32px, 5vw, 56px) 0 clamp(16px, 2.5vw, 28px);
  margin: 0;
}

/* Down-arrow scroll cue next to "Selected Work" — mobile only, hints
   that there's more to scroll to. Fades out once the user scrolls past
   the hero section (JS toggles .is-hidden on .scroll-cue). */
.scroll-cue {
  display: none;
}

.film-rows {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
}

.film-row {
  width: 100%;
}

/* Title overlay on the grid tile's first image — MOBILE ONLY. On
   desktop this stays hidden; desktop keeps its original hover-reveal
   info card and dots, completely unchanged. */
.film-tile-overlay {
  display: none;
}

@media (max-width: 720px) {
  .film-rows {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Mobile: a dark tint sits over the whole image with the title centered
     on top of it — tapping the tile opens the lightbox for everything
     else (other stills, role, full description). Dots and the desktop
     hover-reveal info card are hidden; arrows are hidden here too since
     browsing happens in the lightbox instead. */
  .film-tile-overlay {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background: rgba(7,6,6,0.32);
    z-index: 2;
    pointer-events: none;
  }

  .film-tile-title {
    font-family: var(--font);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    line-height: 1.35;
    color: var(--text);
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }

  .film-row-dots,
  .film-row-info {
    display: none;
  }

  .film-row .carousel-arrow {
    display: none;
  }
}

.film-row-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-raised);
  cursor: pointer;
}

.film-row-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.film-row-frame img.is-active { opacity: 1; }

.film-row:hover .film-row-frame img.is-active {
  transform: scale(1.015);
}

/* Dot guide — only rendered when a row has more than one still;
   clickable to jump straight to a frame, active dot tracks current */
.film-row-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.film-row-dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  padding: 0;
  /* Larger invisible hit area — 32px touch target around the 6px dot */
  position: relative;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.film-row-dots button::before {
  content: '';
  position: absolute;
  inset: -13px;
}

.film-row-dots button:hover { background: var(--text-dim); }

.film-row-dots button.is-active {
  background: var(--text);
  transform: scale(1.3);
}

/* Prev/next arrow buttons for carousels (film row frame, music tiles).
   Dots + hover/swipe remain primary on desktop, so arrows stay hidden
   there; mobile shows them as an easier alternative to swiping. */
.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  color: var(--text);
  font-size: 2.2rem;
  line-height: 1;
  padding: 8px 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.carousel-arrow-prev { left: 4px; }
.carousel-arrow-next { right: 4px; }

@media (max-width: 820px) {
  .carousel-arrow { display: flex; }

  /* Hero section fills most of the first screen on mobile, with the
     video vertically centered inside it. Selected Work naturally follows
     right after, landing near the bottom edge of that first screen as a
     cue that there's more to scroll to. */
  .video-strip {
    min-height: calc(92svh - var(--nav-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

  .video-strip-inner {
    max-height: none;
  }

  .selected-work-label {
    padding-top: 0;
    padding-bottom: 8px;
    position: relative;
  }

  .scroll-cue {
    position: absolute;
    right: clamp(20px, 4vw, 56px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    font-size: 0.9rem;
    color: var(--text-dim);
    transition: opacity 0.4s var(--ease);
    animation: scroll-cue-bounce 1.6s ease-in-out infinite;
  }

  .scroll-cue.is-hidden {
    opacity: 0;
  }

  @keyframes scroll-cue-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }
}

/* Cream info card — hidden until hover (desktop). On mobile (touch
   devices), the @media (hover: none) block below overrides this to be
   permanently visible as a black box with light text. */
.film-row-info {
  max-width: 560px;
  margin: 18px auto 0;
  background: var(--text);
  color: var(--bg);
  text-align: center;
  padding: 22px 28px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), max-height 0.4s var(--ease), margin-top 0.4s var(--ease), padding 0.4s var(--ease);
}

.film-row:hover .film-row-info,
.film-row:focus-within .film-row-info {
  opacity: 1;
  max-height: 360px;
  transform: translateY(0);
}

.film-row-info .sheet-tile-title {
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  margin-bottom: 6px;
  color: var(--bg);
  font-weight: 500;
}

.film-row-info .sheet-tile-role {
  margin-bottom: 14px;
  font-size: 0.68rem;
  color: #4a4644;
}

.film-row-summary {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bg);
  max-width: 46ch;
  line-height: 1.6;
  margin: 0 auto;
}

.film-row-summary .specs-line {
  display: block;
  margin-top: 4px;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6664;
}

.film-row-summary .specs-line:first-of-type {
  margin-top: 12px;
}

/* ============================================
   MUSIC PAGE — uniform grid, titles on hover only
   ============================================ */
.uniform-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: start;
}

@media (max-width: 900px) { .uniform-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .uniform-grid { grid-template-columns: 1fr; } }

.uniform-tile {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
}

.uniform-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease, transform 0.6s var(--ease);
}

.uniform-tile img.is-active { opacity: 1; }

.uniform-tile:hover img.is-active {
  transform: scale(1.03);
}

/* Dot guide for tiles with multiple stills — sits inside the tile, bottom edge */
.uniform-tile-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  transition: opacity 0.3s var(--ease), bottom 0.35s var(--ease);
}

.uniform-tile:hover .uniform-tile-dots {
  opacity: 1;
  bottom: 96px;
}

.uniform-tile-dots button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(235,235,231,0.45);
  padding: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.uniform-tile-dots button:hover {
  background: rgba(235,235,231,0.75);
}

.uniform-tile-dots button.is-active {
  background: var(--text);
  transform: scale(1.3);
}

/* ============================================
   MUSIC PAGE — featured videography grid (larger, centered, 3-up)
   ============================================ */
/* Center column wrapper: label stacked above the Cameron Winter tile */
.video-grid-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}

.videography-label {
  padding: 0 0 clamp(10px, 1.5vw, 18px) 0;
  margin: 0;
  flex-shrink: 0;
}

.video-grid {
  width: 100%;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 24px;
  }
}

.video-tile {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-raised);
  cursor: pointer;
}

.video-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.video-tile img.is-active { opacity: 1; }

.video-tile:hover img.is-active { transform: scale(1.03); }

/* Dots for video-tile carousel */
.video-tile-dots {
  position: absolute;
  bottom: 44px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 3;
  pointer-events: none;
}

.video-tile:hover .video-tile-dots { opacity: 1; pointer-events: auto; }

.video-tile-dots button {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(235,235,231,0.4);
  border: none;
  padding: 0; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.video-tile-dots button:hover { background: rgba(235,235,231,0.7); }
.video-tile-dots button.is-active { background: var(--text); transform: scale(1.3); }

.video-tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-tile-play span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(235,235,231,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,6,6,0.35);
  transition: all 0.3s var(--ease);
}

.video-tile:hover .video-tile-play span {
  border-color: var(--text);
  background: rgba(7,6,6,0.6);
  transform: scale(1.08);
}

.video-tile-play svg {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}

.video-tile-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(7,6,6,0.85) 0%, transparent 100%);
}

.video-tile-line {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.5;
}

.uniform-tile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 16px 18px;
  background: var(--bg);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  z-index: 2;
}

.uniform-tile:hover .uniform-tile-overlay,
.uniform-tile:focus-within .uniform-tile-overlay,
.video-tile:hover .uniform-tile-overlay,
.video-tile:focus-within .uniform-tile-overlay {
  opacity: 1;
  transform: translateY(0);
}

.uniform-tile-line {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text);
}