/* ============================================================
   SPOTLIGHT OVERLAY
   (mouse-tracking canvas that dims everything but a lit circle)
   ============================================================ */
#overlay-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5000;
  filter: blur(6px);
}




  /* CAROUSEL */
/* Outer wrapper that holds all carousels */
.carousel-viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: max(min(calc((0.75*831px - 59px) / 3), calc(25vw + 50px)), 125px);    /* first carousel starts near center */
  /* 50vh guarantees enough room below the last carousel to scroll it to
     true vertical center — scrollIntoView({block:'center'}) can only
     center an element if there's at least (viewportHeight - elementHeight)/2
     of scrollable space after it, which maxes out at 50vh. The old
     ~33vh value fell short, so clicking VIDEO would hit the bottom of
     the page before the second carousel reached center. */
  padding-bottom: calc((100vh - 59px) / 3); /* roughly 33% of viewport height */
  /* vw-based so the gap shrinks in step with the viewport as it
     narrows — no per-breakpoint override, it just scales down
     continuously as width decreases. */
  gap: 8vw;
}

/* Each carousel block just centers its content */
.carousel-withdots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Your existing carousel CSS */
.carousel {
  position: relative;
  width: 75vw;
  display: flex;
  align-items: center;
}

.carousel-track-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
  /* Without this, mobile browsers can claim horizontal touch drags for
     their own native panning before JS even gets a chance to react —
     preventDefault() in touchmove isn't always enough on its own.
     pan-y explicitly tells the browser "vertical scrolling is still
     yours, horizontal is not," handing swipe gestures to our JS. */
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 0.4s ease;
}

/* Each music slide is a link (sizing lives on the <a> — see prior
   comment history); video slides are plain <div>s since an iframe
   doesn't need to link anywhere. Both share this sizing regardless of
   tag, so the selector targets the class only, not a specific tag. */
.carousel-track .carousel-item {
  display: block;
  width: calc((100% - 59px) / 3);
  flex-shrink: 0; /* stop the browser from squeezing all items to fit —
                     without this, adding overflow:hidden below drops the
                     item's automatic min-width to 0, so flex-shrink:1
                     (the default) lets every item shrink until all 5 fit
                     instead of holding width and letting extras overflow */
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
}

.carousel-track .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2 videos share the same row width the music carousel splits 3 ways
   (minus 1 gap instead of 2, since there's one fewer item) — width
   drives the layout here, height just follows from the 16:9 ratio. */
.carousel-track .video-item {
  width: calc((100% - 30px) / 2);
  height: auto;
  aspect-ratio: 16 / 9;
}

.carousel-track .video-item iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.carousel-btn {
  background: #222;
  color: white;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 6px;
  transition: background 0.2s;
  position: relative;
  z-index: 10;
}

.carousel-btn:hover {
  background: #444;
}

/* Buttons only had :hover styled — after a click, a button keeps
   keyboard focus even once the mouse moves away (unlike :hover,
   which ends immediately), so whatever the browser's or theme's
   default focus-ring color is was showing through unstyled. This
   makes the focus state intentional instead of leaving it to
   whatever default happens to apply. */
.carousel-btn:focus {
  background: #444;
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.carousel-btn:active {
  background: #444;
}

.left-btn { margin-right: 10px; }
.right-btn { margin-left: 10px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 10px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  background: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-dot.active {
  background: #333;
}

/* ============================================================
   BIO SECTION
   Plain picture + paragraph, side by side. Shares the carousels'
   column width (75vw) for visual consistency, but has none of the
   carousel machinery — no track, no buttons, no dots, no JS.
   ============================================================ */
.bio-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6vw;
  width: 75vw;
}

.bio-photo {
  width: 30%;
  max-width: 380px;
  flex-shrink: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.bio-text {
  max-width: 560px;
}

.bio-text h2 {
  font-family: "zedou", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 16px;
}

.bio-text p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   PRESS CAROUSEL
   Same track/buttons/dots/swipe mechanism as the music and video
   carousels (initCarousel() applies to any .carousel-withdots
   automatically) — one full-width card per slide (quote + summary +
   link out), plus one video slide. Not embeds — most news sites
   block being framed by other domains anyway, and reproducing a full
   article verbatim isn't something to build regardless of whether
   it's technically possible. This is the standard "press mention"
   pattern instead, made swipeable like the rest of the page.
   ============================================================ */
#carousel-press .carousel-track .carousel-item {
  /* Always 1 full-width card per slide, regardless of viewport —
     unlike MUSIC/VIDEO, this carousel doesn't step down from 3→2→1
     items at breakpoints, so this needs to override the shared rule
     unconditionally rather than only within a media query. */
  width: 100%;
  /* Explicitly decoupled from the shared .video-item height formula
     (used by the VIDEO carousel) — without this, that rule's fixed
     height would still apply here since it targets a different
     property than min/max-height do, even though this ID-scoped rule
     otherwise wins on everything else. */
  height: auto;
  /* Overrides the shared square/flex-shrink:0 rule — text cards vary
     in height by nature, so this uses a generous min/max range with
     content centered inside instead of a fixed aspect-ratio, and
     overflow:visible so a slightly longer summary never gets clipped. */
  aspect-ratio: auto;
  overflow: visible;
  /*min-height: 40vw;*/
  max-height: 580px; /* roomy enough for logo, title, tagline, quote,
                         description, and link (or video) stacked
                         together without anything overflowing */
  display: flex;
  align-items: center;
  justify-content: center;
}

.press-card {
  max-width: 620px;
  padding: 20px;
  text-align: center;
}

/* Scoped to #carousel-press specifically — a plain .press-logo class
   was losing a specificity fight against the shared photo-carousel
   rule (.carousel-track .carousel-item img { width:100%; height:100%;
   object-fit:cover }), which also matches any <img> inside a
   .carousel-item, including this logo. That's what was stretching it
   into a tall rectangle instead of a small square. The ID here
   outranks that rule regardless of source order. */
#carousel-press .press-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  margin: 0 auto 12px;
  /* display:block explicitly, rather than relying on the default
     inline value — the shared .carousel-track .carousel-item img
     rule also sets display:block on any <img> here (same specificity
     fight as before), and a block-level element ignores its parent's
     text-align:center, which is why the logo wasn't centering even
     after the size was fixed. margin:0 auto centers it properly once
     display:block is confirmed. */
  display: block;
}

.press-card h3 {
  font-family: "zedou", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 2px;
}

.press-source-desc {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin: 0 0 16px;
}

.press-quote {
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 16px;
}

.headline {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 16px;
}

.press-quote::before,
.press-quote::after {
  content: '"';
}

.press-summary {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 20px;
}

.press-link {
  display: inline-block;
  font-weight: 700;
  color: #8b0000;
  text-decoration: none;
  border-bottom: 2px solid #8b0000;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.press-link:hover {
  color: #b30000;
  border-color: #b30000;
}

.press-card .press-video iframe {
  width: min(60%, 300px);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
  margin: 0 auto 16px;
}

/* ============================================================
   PICS GRID
   A responsive mosaic — most tiles share a base size, and a few
   deliberately span extra columns/rows for visual variety. Column
   COUNT is fully automatic (auto-fill + minmax): the browser fits
   as many columns as the available width allows, so no breakpoints
   are needed just to reflow it. The media queries below only shrink
   the base tile size, so tiles stay a sensible size on narrow
   screens instead of just cramming in more of them.
   ============================================================ */
.pics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 160px;
  grid-auto-flow: dense; /* fills gaps left by spanning tiles instead
                             of leaving holes in the mosaic */
  gap: 12px;
  width: 90vw;
  max-width: 1100px;
}

.pics-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Deliberately larger tiles mixed into the grid — move these classes
   onto different <img> tags to change which photos stand out. */
.pics-grid .pic-big {
  grid-column: span 2;
  grid-row: span 2;
}

.pics-grid .pic-wide {
  grid-column: span 2;
}

.pics-grid .pic-tall {
  grid-row: span 2;
}

.pics-grid .pic-32 {
  grid-column: span 3;
  grid-row: span 2;
}







@media (max-width: 1105px) {
  #overlay-canvas {
    filter: blur(4px);
  }
}

@media (max-width: 970px) {
  /* ============================================================
     CAROUSEL — 2 ITEMS AT 970px
     Same idea as the 3-item calc, just for 2 slides: subtract one
     gap (30px) instead of two, then split the remainder in half.
     ============================================================ */
  .carousel-track .carousel-item {
    width: calc((100% - 30px) / 2);
  }

  /* The rule above also matches .video-item (it shares the
     .carousel-item class) — for MUSIC that's the intended 2-image
     split, but VIDEO should drop to 1 at this tier, so re-assert
     full width specifically for video items after it. */
  .carousel-track .video-item {
    width: 100%;
  }

  .carousel-viewport {
    padding-top: max(min(calc((0.75*831px - 59px) / 3), calc(25vw + 50px)), 125px);
  }

  /* Below 970px, switch the top margin from height-based to
     width-based so it shrinks in step with the viewport as it
     narrows, same as the carousel gap. */
  /*.carousel-viewport {
    padding-top: 22vw;
  }*/

}


@media (max-width: 600px) {
  /* ============================================================
     CAROUSEL — SINGLE ITEM BELOW 600px
     Only one slide shows at a time; it grows to fill the wrapper.
     No JS change needed — initCarousel() reads itemWidth from
     offsetWidth at runtime, so it naturally steps by one full-width
     item at this breakpoint.
     ============================================================ */
  .carousel-track .carousel-item {
    width: 100%;
  }

  /* Video's height is capped by its width via the 16:9 ratio — MUSIC's
     square at this tier is 75vw tall, but a 75vw-wide video is only
     ~42vw tall. Widening just the video row (not the music one) lets
     it get taller too. Going past ~94vw starts crowding the buttons
     against the screen edge, so this is close to the practical
     ceiling rather than a full height match (which would need the
     video to be ~133vw wide — not possible on a phone screen). */
  #carousel-video .carousel {
    width: 94vw;
  }

  /* Same treatment for PRESS — buttons already shrink/push outward
     globally at this breakpoint (see .left-btn/.right-btn and
     .carousel-btn below), so widening this row the same way VIDEO's
     is lets the podcast card (and its embedded video) grow bigger too
     instead of staying capped at the shared 75vw width. */
  #carousel-press .carousel {
    width: 94vw;
  }

  /* Smaller margin so more of that width goes to the item itself
     rather than the gap around the buttons. */
  .left-btn { margin-right: 12px; }
  .right-btn { margin-left: 12px; }

  .carousel-viewport {
    padding-top: max(min(calc((0.75*831px - 59px) / 3), calc(25vw + 50px)), 125px);
  }

  /* ============================================================
     BIO SECTION — STACKED BELOW 600px
     Side-by-side doesn't leave enough room for either the photo or
     the text at this width, so stack them instead.
     ============================================================ */
  .bio-section {
    flex-direction: column;
    width: 90vw;
    text-align: center;
    gap: 24px;
  }

  .bio-photo {
    width: 60%;
    max-width: 200px;
  }

  /* ============================================================
     PICS GRID — SMALLER TILES BELOW 600px
     ============================================================ */
  .pics-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: 100px;
    gap: 8px;
    width: 92vw;
  }

  /* ============================================================
     PRESS CAROUSEL — SMALLER TEXT BELOW 600px
     ============================================================ */
  .press-quote {
    font-size: 17px;
  }

  .press-summary {
    font-size: 14px;
  }

  #carousel-press .press-logo {
    width: 32px;
    height: 32px;
  }

  .press-source-desc {
    font-size: 11px;
  }

  .press-card .press-video iframe {
    width: 92%;
  }

  /* ============================================================
     CAROUSEL BUTTONS — VARIABLES FOR 600 → 330
     ============================================================ */
  .carousel-btn {
    --vw-max: 600px;
    --vw-min: 330px;

    --btn-pad-y-max: 8px;
    --btn-pad-y-min: 5px;
    --btn-pad-x-max: 10px;
    --btn-pad-x-min: 6px;
    --btn-font-max: 18px;
    --btn-font-min: 12px;

    padding: calc(
      var(--btn-pad-y-min) +
      (var(--btn-pad-y-max) - var(--btn-pad-y-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    )
    calc(
      var(--btn-pad-x-min) +
      (var(--btn-pad-x-max) - var(--btn-pad-x-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    font-size: calc(
      var(--btn-font-min) +
      (var(--btn-font-max) - var(--btn-font-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

}

@media (max-width: 330px) {
  .carousel-btn {
    padding: 5px 6px;
    font-size: 12px;
  }

}