/*
Theme Name: Le Sommeil
Description: Official website for Le Sommeil baroque music ensemble
Version: 2.1.39
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
*/

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: 'Instrument Sans', sans-serif;
}

html { scroll-behavior: smooth; }

/* Brand orange text highlight (#F3664A). */
::selection {
  background: #F3664A;
  color: #fff;
}

::-moz-selection {
  background: #F3664A;
  color: #fff;
}

/* Touch devices flash the tapped element grey by default — replace that
   tap highlight with the brand orange so every tap matches the identity. */
html {
  -webkit-tap-highlight-color: rgba(243, 102, 74, 0.35);
}

a,
button {
  -webkit-tap-highlight-color: rgba(243, 102, 74, 0.45);
}

/* Keyboard/mouse focus rings follow the brand orange instead of the
   default grey-blue outline. */
:focus-visible {
  outline: 2px solid #F3664A;
  outline-offset: 2px;
}

/* ===== NAV OVERLAY ===== */
/* Full-page dim behind the drawer. The drawer's own gradient reaches 0% at
   its left edge where the links sit, so without this the links would float
   over whatever section is behind them. Dimming the whole page keeps them
   readable everywhere; clicking the scrim closes the menu. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* Right-side drawer: a delicate dark gradient that hugs the menu links
   (it ends with the last item instead of running down the viewport), and
   the page stays visible underneath. */
#nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 82vw);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 24px 28px 28px;
  /* Right-to-left fade stretched over the full page height. The eased
     stops reach 0% exactly at the panel's left edge and rise very gently
     at first, so the drawer melts into the page without a visible seam. */
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 20%,
    rgba(0, 0, 0, 0.16) 40%,
    rgba(0, 0, 0, 0.36) 60%,
    rgba(0, 0, 0, 0.58) 80%,
    rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

#nav-overlay.open {
  pointer-events: auto;
  transform: translateX(0);
}

#nav-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-bottom: 48px;
}

#nav-overlay nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

#nav-overlay nav a {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}

#nav-overlay nav a:hover { opacity: 1; }

/* ===== FIXED HEADER ===== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  mix-blend-mode: difference;
  /* The fixed bar must not swallow clicks aimed at the content scrolling
     beneath it — only its two interactive children stay clickable. */
  pointer-events: none;
}

.logo-mark,
#hamburger-btn {
  pointer-events: auto;
}

.logo-mark {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 48px;
  aspect-ratio: 434 / 293;
  background: url('assets/moth-mark.png') center / contain no-repeat;
  cursor: pointer;
  flex-shrink: 0;
}

#hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

/* ===== HERO SECTION ===== */
#album {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #120c07;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slide.active { opacity: 1; }

/* The stacked, transparent inactive slides sit above the active one in the
   paint order and would swallow its clicks — only the active slide may take
   pointer events. */
.hero-slide:not(.active) { pointer-events: none; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slide-placeholder {
  width: 100%;
  height: 100%;
}

.hero-slide-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-slide-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep the 16:9 embed covering the slide whatever its aspect ratio is.
   The embed is oversized (112%) and pinned to the BOTTOM, so the top band —
   where YouTube's embedded player draws the video title card (showinfo=0 is
   deprecated and cannot hide it) — falls outside the visible area. */
.hero-slide-video iframe {
  position: absolute;
  bottom: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 199vh;
  height: 112vh;
  transform: translateX(-50%);
  border: 0;
}

@supports (height: 100svh) {
  .hero-slide-video iframe {
    width: 199svh;
    height: 112svh;
  }
}

.hero-slides::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.18) 45%,
    transparent 100%);
  pointer-events: none;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px;
  z-index: 10;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.hero-arrow:hover { opacity: 1; }
.hero-arrow-prev { left: 4px; }
.hero-arrow-next { right: 4px; }

.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 40px 44px;
  display: flex;
  align-items: flex-end;
  gap: 48px;
  z-index: 5;
  will-change: transform, opacity;
}

.hero-bottom h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(60px, 9.5vw, 136px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 0.88;
  letter-spacing: -2px;
  flex-shrink: 0;
}

.hero-bottom p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(13px, 1.15vw, 17px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  max-width: 340px;
  margin: 0 0 10px;
}

.hero-corner {
  position: fixed;
  bottom: 40px;
  right: 28px;
  width: 48px;
  aspect-ratio: 434 / 293;
  background: url('assets/moth-mark.png') center / contain no-repeat;
  mix-blend-mode: difference;
  z-index: 5;
  pointer-events: none;
}

/* Mute/unmute button for the hero background video. Sits above the scrim,
   clear of .hero-bottom and of the fixed .hero-corner mark. */
.hero-sound-toggle {
  position: absolute;
  right: 24px;
  bottom: 76px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.hero-sound-toggle:hover {
  background: rgba(0, 0, 0, 0.7);
}

.hero-sound-toggle .icon-muted { display: none; }
.hero-sound-toggle.is-muted .icon-muted { display: block; }
.hero-sound-toggle.is-muted .icon-sound { display: none; }

/* ===== SEMELE SECTION ===== */
#semele {
  background: #000;
  padding: 80px 40px 64px;
  display: flex;
  flex-direction: column;
  min-height: 90vh;
}

.semele-images {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 56px;
  will-change: transform, opacity;
}

.semele-art {
  position: relative;
  width: clamp(240px, 34vw, 500px);
  flex-shrink: 0;
}

.semele-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 2;
  background: #111;
  overflow: hidden;
}

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

.semele-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #1c1c1c 0%, #0a0a0a 50%, #181818 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.semele-cover-placeholder span {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* CSS vinyl record */
.semele-vinyl {
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  right: -50%;
  top: 5%;
  z-index: 1;

  /* layered radial gradients: hole → label → dark ring → ice blue vinyl */
  background:
    radial-gradient(circle at 50% 50%,
      #0c0c0c    0%,   #0c0c0c  3.5%,
      transparent 3.6%
    ),
    radial-gradient(circle at 50% 50%,
      #f0e8d8  3.6%, #e6dcca 13%,
      #d8ccb4 19%,   #c8bc9e 19.8%,
      transparent 19.9%
    ),
    radial-gradient(circle at 50% 50%,
      #222 19.9%, #222 21.2%,
      transparent 21.3%
    ),
    repeating-radial-gradient(circle at 50%,
      transparent 0%, transparent 1.6%,
      rgba(255,255,255,0.03) 1.7%, rgba(255,255,255,0.03) 1.9%
    ),
    radial-gradient(circle at 45% 40%,
      #d0e8f4 0%, #c0dced 25%,
      #a8cedd 55%, #90c0d0 75%,
      #80b0c4 100%
    );

  box-shadow:
    6px 12px 48px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.semele-text {
  will-change: transform, opacity;
}

.semele-text h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  line-height: 1;
  letter-spacing: -1px;
}

.semele-text p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
}

/* ===== ABOUT SECTION ===== */
#about {
  background: #f5f2ed;
  padding: 20px 13vw 0;
  position: relative;
}


#about .section-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #000;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
  padding-left: 26px;
}

/* Column layout */
.about-columns {
  display: flex;
  min-height: 730px;
  overflow: hidden;
}

.about-col {
  border-left: 2px solid #000;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow 0.45s ease;
}

.about-col:first-child { border-left: none; }

.about-col.active { flex: 0 0 auto; cursor: default; }

.about-col-header {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  padding: 21px 26px;
  white-space: nowrap;
  user-select: none;
}

/* Body: hidden in collapsed cols */
.about-col-body {
  display: none;
  flex: 1;
  padding: 16px 26px 73px 0;
  will-change: transform, opacity;
}

.about-col.active .about-col-body { display: block; }

/* Band names */
.band-list {
  display: flex;
  flex-direction: column;
  padding: 0 36px 0 20px;
}

.band-list p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(36px, 4.5vw, 66px);
  color: #000;
  margin: 0;
  line-height: 0.88;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.band-list p:hover { color: #F3664A; }

/* Band list links */
.band-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.band-list a:hover { color: #F3664A; }

/* Text content for other cols */
.text-content {
  padding: 10px 0 0 20px;
  width: 42ch;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.text-content p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 23px;
  color: #000;
  line-height: 1.6;
  margin: 0 0 26px;
}

.text-content p:last-child { margin: 0; }

/* Thin iOS-style scrollbar */
.text-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.text-content::-webkit-scrollbar {
  width: 3px;
}

.text-content::-webkit-scrollbar-track {
  background: transparent;
}

.text-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}

.text-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

.text-content a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.text-content a:hover { opacity: 0.5; }

/* Partners & Collaborators: hovering a line turns it brand orange
   (same behaviour as band names) instead of fading to gray. */
.ls-partners-list p { transition: color 0.2s ease; }

.ls-partners-list p:hover { color: #F3664A; }

.ls-partners-list a {
  color: inherit;
  transition: color 0.2s ease;
}

.ls-partners-list a:hover {
  color: #F3664A;
  opacity: 1;
}

/* Partner logos render as a small monochrome mark next to the name. */
.partner-logo {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  vertical-align: middle;
}

.partner-logo img {
  height: 26px;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.85;
}

.about-quote {
  font-size: 20px !important;
  font-style: italic;
  opacity: 0.7;
  border-left: 2px solid #000;
  padding-left: 16px !important;
  margin-bottom: 32px !important;
}

/* Prev/next column arrows, anchored to the section sides. The top offset is
   constant rather than a 50% of the section: the section grows when a tall
   column (The Band) is active, and a percentage would make the arrows jump
   with it. 429px = section top padding (20) + label (~44) + half of the
   columns' 730px base height (365). */
.about-arrow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 429px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  opacity: 1;
  transition: opacity 0.2s;
}

.about-arrow-nav:hover { opacity: 0.6; }
.about-arrow-prev { left: 16px; }
.about-arrow-next { right: 16px; }

/* ===== MEDIA SECTION ===== */
/* Two stacked blocks — Video above, Photo below — each with the same
   column accordion. The bottom padding lets the cream breathe before the
   programmes section, which owns its own padding. */
#media {
  background: #f5f2ed;
  padding: 80px 13vw 64px;
  position: relative;
}

#media .section-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #000;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
  display: block;
  padding-left: 26px;
}

.media-block + .media-block { margin-top: 56px; }

/* Each block is the anchor for its own pair of column arrows. */
.media-block { position: relative; }

/* Prev/next column arrows for the three media blocks. */
.media-video-arrow-nav,
.media-photo-arrow-nav,
.media-disc-arrow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  opacity: 1;
  transition: opacity 0.2s;
}

.media-video-arrow-nav:hover,
.media-photo-arrow-nav:hover,
.media-disc-arrow-nav:hover { opacity: 0.6; }

/* Sit in the 13vw section gutter, at the far sides like About/Programs. */
.media-video-arrow-prev,
.media-photo-arrow-prev,
.media-disc-arrow-prev { left: calc(16px - 13vw); }

.media-video-arrow-next,
.media-photo-arrow-next,
.media-disc-arrow-next { right: calc(16px - 13vw); }

/* The Videos block hugs its 16:9 embed: the black column dividers end just
   past the video instead of running down to the fixed 730px row height. */
.media-block-video .media-columns {
  min-height: 0;
}

.media-block-video .media-col-body {
  padding-bottom: 28px;
}

/* The Photo block has seven tabs, too many for the row at desktop widths.
   Inactive headers give up space (shrink + ellipsis) so every tab stays
   visible, and the active photo is a touch narrower to make room. */
@media (min-width: 768px) {
  /* Every media tab title stays on one line: while the column widths
     animate, the text must not re-flow into a second line — it stays
     pinned to the left edge and clips with an ellipsis instead. */
  .media-block .media-col-header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .media-block-photo .media-col {
    flex: 0 1 auto;
    min-width: 0;
  }

  .media-block-photo .media-col.active {
    flex: 0 0 auto;
  }

  .media-block-photo .media-col-header {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 16px;
  }

  .media-block-photo .media-photo {
    width: clamp(300px, 34vw, 640px);
  }

  /* The credit sits under the photo; without a cap its long single line
     would widen the active column and push the tabs out again. */
  .media-block-photo .media-photo-credit {
    max-width: clamp(300px, 34vw, 640px);
  }

  /* Same accordion trade as Photo: inactive tabs give up space so the
     active video can take more of the row. */
  .media-block-video .media-col {
    flex: 0 1 auto;
    min-width: 0;
  }

  .media-block-video .media-col.active {
    flex: 0 0 auto;
  }
}

.media-columns {
  display: flex;
  min-height: 730px;
  overflow: hidden;
}

.media-col {
  border-left: 2px solid #000;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow 0.45s ease;
}

.media-col:first-child { border-left: none; }
.media-col.active { flex: 0 0 auto; cursor: default; }

.media-col-header {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  padding: 21px 26px;
  white-space: normal;
  user-select: none;
  line-height: 1.2;
}

.media-col-body {
  display: none;
  padding: 0 26px 56px 20px;
  will-change: transform;
}

.media-col.active .media-col-body { display: block; }

.media-photo {
  width: clamp(300px, 38vw, 600px);
  aspect-ratio: 1;
  overflow: hidden;
}

.media-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-photo-placeholder {
  width: 100%;
  height: 100%;
  background: #c8c4bc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-photo-placeholder span {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 9px;
  color: rgba(0,0,0,0.3);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.media-photo-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.media-photo-slides,
.media-photo-slide {
  position: absolute;
  inset: 0;
}

.media-photo-slide {
  opacity: 0;
  transition: opacity 0.4s ease;
  /* The stacked, transparent slides sit above the current one and would
     swallow its clicks — only the visible slide takes pointer events. */
  pointer-events: none;
}

.media-photo-slide.is-current {
  opacity: 1;
  pointer-events: auto;
}

.media-photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-photo-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.media-photo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.media-photo-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.media-photo-count {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.media-video {
  width: clamp(320px, 42vw, 780px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #c8c4bc;
}

.media-video iframe,
.media-video video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.media-photo-credit {
  margin: 12px 0 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.3px;
}

.media-disc-note {
  margin: 10px 0 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.5);
}

/* Click-to-zoom lightbox: shows the original, uncropped file. */
.media-photo-open { display: block; cursor: zoom-in; }

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

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

.media-lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.media-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s ease;
}

.media-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

body.lightbox-open { overflow: hidden; }

/* ===== PROGRAMS SECTION ===== */
/* The bottom padding lets the cream breathe under the columns before the dark
   shop section starts. The mobile block already had 48px here; desktop was
   left at 0, so the dividers ran straight into the next section. */
#programs { background: #f5f2ed; padding: 20px 13vw 64px; position: relative; }

#programs .section-label { font-size: 28px; font-weight: 600; margin: 0 0 10px; display: block; color: #000; padding-left: 26px; }

/* No min-height: the square photo sets the row height, and the inactive
   columns stretch to it. A fixed 730px would leave dead space under the photo
   at every width below ~1330px, where the clamp yields less than 730. */
.programs-columns { display: flex; margin-left: 26px; overflow: hidden; }

.programs-col { border-left: 2px solid #000; flex: 0 0 auto; cursor: pointer; overflow: hidden; }
.programs-col:first-child { border-left: none; }
.programs-col.active { cursor: default; }

.programs-col-header { font-size: 17px; font-weight: 500; padding: 21px 26px; white-space: nowrap; color: #000; }
.programs-col.active .programs-col-header { display: none; }

.programs-col-body { display: none; will-change: transform; }
.programs-col.active .programs-col-body { display: block; }

.programs-photo {
  position: relative;
  width: clamp(400px, 55vw, 750px);
  aspect-ratio: 1;
  overflow: hidden;
}

.programs-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #2a2010 0%, #1a1208 40%, #080604 100%);
}

.programs-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Poster covers: the artwork carries the full copy, so the text overlay is
   hidden — the poster renders clean on desktop and mobile. */
.programs-photo.has-poster .programs-overlay { display: none; }

/* Mobile crop of the poster: shown on phones only. Two classes so it beats
   the display:block on .programs-photo img. */
.programs-photo .programs-photo-mobile { display: none; }

.programs-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 20px 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.programs-overlay-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.programs-overlay-for { font-size: 14px; margin: 0 0 36px; opacity: 0.9; }
.programs-overlay-quote { font-size: 13px; line-height: 1.55; margin: 0 0 36px; max-width: 340px; opacity: 0.9; }
.programs-overlay-desc { font-size: 13px; line-height: 1.55; max-width: 340px; opacity: 0.9; }

.programs-overlay-links {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.programs-links-group {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
}

.programs-links-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.6;
}

.programs-links-group a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}

.programs-links-group a:hover { opacity: 1; }

/* Gallery carousel inside a programme photo: keep the overlay text clear of
   the nav row and right-align the arrows, away from the left-aligned copy.
   The z-index lifts the nav above the full-bleed .programs-overlay, which
   would otherwise swallow the arrow clicks. The same bottom strip keeps the
   copy clear of the "Read more" chip on non-poster tiles too. */
.programs-photo:not(.has-poster) .programs-overlay { padding-bottom: 64px; }
.programs-photo .media-photo-nav { justify-content: flex-end; bottom: 16px; padding: 0 20px; z-index: 2; }

/* "Read more" PDF button, pinned over the tile's bottom-left corner. On
   poster tiles the overlay is hidden, so the chip is the only copy there;
   the subtle dark fill keeps it readable over light posters and dark photos. */
.programs-read-more {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.95;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.programs-read-more:hover {
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
}

.photo-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Prev/next column arrows, anchored to the section sides. */
.programs-arrow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  opacity: 1;
  transition: opacity 0.2s;
}

.programs-arrow-nav:hover { opacity: 0.6; }
.programs-arrow-prev { left: 16px; }
.programs-arrow-next { right: 16px; }

/* ===== SHOP SECTION ===== */
#shop {
  position: relative;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

#shop .section-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
  position: absolute;
  top: 52px;
  left: 28px;
  z-index: 2;
  margin: 0;
  transform: translateX(340px);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.16,1,0.3,1), opacity 600ms ease;
}

#shop .section-label.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.shop-merch {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 50%, #1a1a1a 100%);
}

.shop-merch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
}

.shop-coming-soon span {
  font-family: 'Beth Ellen', cursive;
  font-size: clamp(56px, 12vw, 96px);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ===== CALENDAR SECTION ===== */
#calendar {
  background: #000;
  padding: 52px 10vw 56px;
  height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* The entrance headings sit at translateX(340px) until they scroll into
     view; without clipping they widen the whole document, which lets the
     page pan sideways and hides the left accordion arrows. */
  overflow-x: clip;
}

#calendar .section-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 48px 0;
  letter-spacing: 0.5px;
  transform: translateX(340px);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.16,1,0.3,1) 300ms, opacity 900ms ease 300ms;
}

#calendar h2 {
  transform: translateX(340px);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.16,1,0.3,1) 500ms, opacity 900ms ease 500ms;
}

.events-list {
  transform: translateY(80px);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.16,1,0.3,1) 200ms, opacity 900ms ease 200ms;
}

.events-list.is-visible {
  transform: translateY(0);
  opacity: 1;
}

#calendar.is-visible .section-label,
#calendar.is-visible h2 {
  transform: translateX(0);
  opacity: 1;
}

#calendar h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0 0;
  line-height: 1;
  will-change: transform, opacity;
}

.calendar-main {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.events-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.event-row {
  display: grid;
  grid-template-columns: 150px 90px 1fr;
  gap: 100px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.event-date, .event-time, .event-venue {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(16px, 1.5vw, 22px);
  color: #fff;
  font-weight: 500;
}

.calendar-pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.calendar-pag-pill {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.calendar-pag-pill button {
  background: none;
  border: none;
  color: #fff;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.calendar-pag-pill button:hover { opacity: 1; }

.calendar-pag-count {
  color: #fff;
  font-size: 14px;
  padding: 0 8px;
  font-family: 'Instrument Sans', sans-serif;
  white-space: nowrap;
}

/* ===== CONTACT SECTION ===== */
#contact {
  background: #000;
  padding: 40px 10vw 80px;
}

.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 56px;
  margin-left: 0;
}

.contact-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-square {
  width: 24px;
  height: 24px;
  background: #fff;
  flex-shrink: 0;
}

.contact-title-group h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.contact-body {
  margin-left: 0;
  padding-left: 40px;
}

.contact-intro {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 56px;
}

.contact-blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 72px;
}

.contact-col-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  margin: 0 0 2px;
}

.contact-name {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.contact-detail a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.contact-detail a:hover { opacity: 0.6; }

.contact-detail {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.contact-outro {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

/* ===== FOOTER ===== */
footer {
  background: #000;
  padding: 0;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 40px 40px;
}

.footer-top h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(80px, 13vw, 190px);
  color: #fff;
  margin: 0;
  line-height: 0.9;
  font-weight: 700;
}

/* Instagram glyph next to the big wordmark, right above the footer card.
   Vertically centered against the wordmark and sized with the viewport so
   it keeps visual weight next to the huge title. */
.footer-instagram {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.2s;
}

.footer-instagram svg {
  width: clamp(44px, 4.2vw, 60px);
  height: clamp(44px, 4.2vw, 60px);
}

.footer-instagram:hover { opacity: 0.7; }

.footer-card {
  background: #f5f2ed;
  border-radius: 0;
  padding: 64px 40px 80px;
  text-align: center;
}

.footer-moth {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.footer-moth img {
  width: 140px;
  height: auto;
}

.footer-bottom {
  text-align: center;
}

/* Social icons: monochrome, currentColor, only rendered for filled URLs. */
.footer-social {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-social a:hover { opacity: 0.5; }

.footer-social svg {
  width: 22px;
  height: 22px;
}

.footer-contact {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
  color: #000;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.footer-contact a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.footer-contact a:hover { opacity: 0.5; }

.footer-legal {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 8px;
}

.footer-credits {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {

  /* HERO */
  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 20px 28px;
  }

  /* SEMELE */
  #semele { padding: 56px 20px 48px; overflow: hidden; }

  /* ABOUT */
  #about { padding: 20px 20px 0; }
  #about .section-label { padding-left: 0; font-size: 22px; }
  .about-columns { flex-direction: column; min-height: unset; height: 60vh; margin: 0 40px; touch-action: pan-y; }
  .about-col { border: none; height: 100%; }
  .about-col:not(.active) { display: none; }
  .about-col.active { border-left: 2px solid #000; border-right: 2px solid #000; }
  .about-col-header { white-space: normal; padding: 16px 20px; flex: 0 0 auto; }
  .about-col-body { overflow-y: auto; }
  .band-list { padding: 0 20px 20px 16px; }
  .band-list p { white-space: normal; font-size: clamp(20px, 6.5vw, 34px); }
  .text-content { width: auto; max-height: none; overflow-y: visible; }
  .about-arrow-nav { display: flex; padding: 4px; top: 50%; }
  .about-arrow-prev { left: 20px; }
  .about-arrow-next { right: 20px; }

  /* The accordions are inset just enough to leave room for the side
     arrows in the gutters, so the arrows stay visible while scrolling. */

  /* MEDIA */
  #media { padding: 40px 20px 48px; }
  #media .section-label { padding-left: 0; font-size: 22px; }
  .media-block + .media-block { margin-top: 40px; }
  .media-columns { flex-direction: column; min-height: unset; height: 60vh; margin: 0 40px; touch-action: pan-y; }
  .media-col { display: flex; flex-direction: column; border: none; height: 100%; }
  .media-col:not(.active) { display: none; }
  .media-col.active { border-left: 2px solid #000; border-right: 2px solid #000; }
  .media-col-header { padding: 16px 20px; flex: 0 0 auto; }
  .media-col-body { flex: 1; overflow: hidden; padding: 0 20px 20px 16px; }
  /* Square photo leaves room for the credit/note below it; the old
     100% height pushed those captions out of the block on mobile. */
  .media-photo { width: 100%; height: auto; aspect-ratio: 1; }
  .media-video { width: 100%; height: 100%; }

  /* DISCOGRAPHY & PHOTOS — hug the content so the black dividers end with
     the credit/note. Headers are single-line and fixed height, so the
     photos below always sit at the same level. */
  .media-block-disc .media-columns,
  .media-block-photo .media-columns { height: auto; }

  .media-block-disc .media-col,
  .media-block-photo .media-col { height: auto; }

  .media-block-disc .media-col-header,
  .media-block-photo .media-col-header {
    min-height: 52px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .media-video-arrow-nav,
  .media-photo-arrow-nav,
  .media-disc-arrow-nav { padding: 4px; }
  .media-video-arrow-prev,
  .media-photo-arrow-prev,
  .media-disc-arrow-prev { left: 0; }
  .media-video-arrow-next,
  .media-photo-arrow-next,
  .media-disc-arrow-next { right: 0; }

  /* PROGRAMS */
  #programs { padding: 20px 20px 48px; }
  #programs .section-label { padding-left: 0; font-size: 22px; }
  .programs-columns { flex-direction: column; min-height: unset; margin: 0 40px; touch-action: pan-y; }
  .programs-col { display: flex; flex-direction: column; border: none; }
  .programs-col:not(.active) { display: none; }
  .programs-col.active { border-left: 2px solid #000; border-right: 2px solid #000; }
  .programs-col-header { display: none; }

  /* Poster-style programme card: the image layers fill the card absolutely
     (no grid/aspect-ratio quirks), while the overlay copy in normal flow
     sets the card height — square minimum via its own min-height below. */
  .programs-photo {
    display: grid;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .programs-photo > img,
  .programs-photo .media-photo-carousel,
  .programs-photo .programs-photo-placeholder {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Dark, slightly blurred backdrop behind the copy, like the poster. */
  .programs-photo img {
    filter: blur(3px) brightness(0.55) saturate(0.85);
    transform: scale(1.06);
  }

  /* Poster covers on mobile: the artwork is the whole card — sharp, natural
     ratio — and the text overlay is hidden (the poster already contains the
     copy). Desktop keeps the square frame with the overlay. */
  .programs-photo.has-poster { display: block; }
  .programs-photo.has-poster > img {
    position: static;
    height: auto;
    filter: none;
    transform: none;
  }
  .programs-photo.has-poster .programs-overlay { display: none; }

  /* Phones show the vertical crop; the square poster stays on desktop. */
  .programs-photo.has-mobile .programs-photo-poster { display: none; }
  .programs-photo.has-mobile .programs-photo-mobile { display: block; }

  /* Poster cards keep a slim side gutter so the section arrows fit next
     to them without covering the artwork. */
  .programs-columns:has(.programs-photo.has-poster) { margin: 0 40px; }
  .programs-col.active:has(.programs-photo.has-poster) { border-left: none; border-right: none; }

  /* Poster-style card: the overlay keeps a minimum height so the copy
     always sits at the bottom, even when it outgrows the square photo.
     Capped so wider (landscape) phones don't get an absurdly tall card. */
  .programs-overlay {
    position: relative;
    grid-area: 1 / 1;
    padding: 22px;
    background: rgba(10, 10, 10, 0.2);
    min-height: min(125vw, 620px);
  }

  /* Large title with a thin white rule, then the copy clustered lower. */
  .programs-overlay-title {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    font-size: clamp(32px, 11vw, 52px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0.4px;
  }

  .programs-overlay-for {
    margin: auto 0 14px;
    font-size: 12px;
    letter-spacing: 0.2px;
    line-height: 1.6;
    opacity: 0.9;
  }

  .programs-overlay-quote {
    margin: 0 0 14px;
    max-width: none;
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.9;
  }

  .programs-overlay-desc {
    max-width: none;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.2px;
    opacity: 0.9;
  }

  .programs-overlay-links {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .programs-arrow-nav { display: flex; padding: 4px; }
  .programs-arrow-prev { left: 20px; }
  .programs-arrow-next { right: 20px; }

  /* CALENDAR */
  #calendar { height: auto; min-height: 100svh; padding: 48px 20px 56px; }
  #calendar .section-label { margin-left: 0; font-size: 24px; margin-bottom: 20px; }
  #calendar h2 { margin-left: 0; }

  /* The entrance slides in from translateX(340px). These headings are full
     width here, so any positive offset pushes the document past the viewport
     and the phone renders the whole page zoomed out. Fade only on mobile;
     .is-visible is more specific, so it still resolves the animation. */
  #calendar .section-label,
  #calendar h2 { transform: none; }
  .calendar-main { margin-top: 48px; }
  .events-list { width: 100%; }

  /* Stack each event: date and time share the first line, venue sits under
     them. Grid rather than flex-wrap so the time stays pinned right however
     long the date is. Separators are brighter here to match the design. */
  .events-list { border-top-color: rgba(255, 255, 255, 0.7); }

  .event-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  }

  .event-date  { grid-area: 1 / 1; font-size: clamp(17px, 4.5vw, 20px); }
  .event-time  { grid-area: 1 / 2; font-size: clamp(17px, 4.5vw, 20px); font-weight: 700; }
  .event-venue { grid-area: 2 / 1 / 3 / -1; font-size: clamp(17px, 4.5vw, 20px); }

  /* CONTACT */
  #contact { padding: 40px 20px 60px; }
  .contact-square { display: none; }
  .contact-header { margin-left: 0; }
  .contact-body { margin-left: 0; padding-left: 0; }
  .contact-intro { font-size: clamp(18px, 5vw, 24px); margin-bottom: 32px; }
  .contact-outro { font-size: clamp(20px, 5.5vw, 28px); }

  /* FOOTER */
  footer { padding: 0; }
  .footer-top { padding: 32px 20px 32px; }
  .footer-top h2 { font-size: clamp(48px, 14vw, 80px); }
  .footer-card { padding: 48px 20px 56px; }
}