:root {
  --oxblood: #190000;
  --oxblood-raised: #2a0606;
  --line: rgba(255, 255, 255, 0.16);
  --cream: #f4e7da;
  --red: #e0162f;
  --white: #ffffff;
  --muted: #d9c4bd;
  --display: "Archivo", "Arial Black", sans-serif;
  --body: "Inter", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--oxblood);
  color: var(--white);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--white);
  color: var(--oxblood);
}
.skip-link:focus { top: 16px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--cream);
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 44%;
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(18px, 3vw, 36px);
  font-weight: 600;
  font-size: 15px;
}
.site-nav a { padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover,
.site-nav a.is-active { border-bottom-color: var(--red); }

.hero__nav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  padding: 16px var(--gutter);
  background: var(--oxblood);
  color: var(--white);
}

/* Contact sits in line with the other tabs, as a red button with the same text size */
.site-nav .nav-contact {
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  white-space: nowrap;
}
.site-nav .nav-contact:hover { background: #b80f24; }
.site-nav { align-items: center; }

/* Header on the Past Events and That's Hot pages */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.topbar__name {
  font-family: var(--display);
  font-size: 20px;
  font-stretch: 125%;
  font-weight: 800;
  white-space: nowrap;
}

.page__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(44px, 8vw, 88px);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.page__intro {
  max-width: 680px;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
}

/* Longer text, like the That's Hot community description */
.prose { max-width: 680px; }
.page__title + .prose { margin-top: 28px; }
.prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; }
.prose p:last-child { margin-bottom: 0; }
.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* That's Hot page: the fire heart logo beside the title, glowing faintly.
   "screen" blending makes the logo's black background disappear into the page. */
.hot-intro { position: relative; }
.hot-intro > * { position: relative; z-index: 1; }
.hot-intro::before {
  content: "";
  position: absolute;
  top: clamp(8px, 2vw, 24px);
  right: var(--gutter);
  width: clamp(160px, 30vw, 400px);
  aspect-ratio: 1;
  /* Two black patches, cut tight to "THAT'S" and "HOT", hide the lettering
     without touching the heart outline; with "screen" blending, black disappears */
  background:
    linear-gradient(#000, #000) 51% 56.2% / 33.5% 9.4% no-repeat,
    linear-gradient(#000, #000) 51% 65.2% / 22% 8.6% no-repeat,
    url("images/thats-hot-logo.jpg") center / contain no-repeat;
  opacity: 0.36;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Past Events gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Square posters show in full, centered on a dark card */
.gallery img.gallery__square { object-fit: contain; background: #0b0b0b; }
.gallery figcaption { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; }
.gallery__date { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
.gallery__link { display: block; color: inherit; text-decoration: none; }
.flier__open { display: block; cursor: zoom-in; }
.flier__open img { transition: opacity .2s ease; }
.flier__open:hover img { opacity: 0.85; }
.lightbox--single .lightbox__prev,
.lightbox--single .lightbox__next { display: none; }
.lightbox__download[hidden] { display: none; }
/* Past Shows: smaller cards, whole flier visible on a dark card */
.gallery--shows { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gallery--shows img { aspect-ratio: 3 / 4; object-fit: contain; background: #0b0b0b; }
.gallery--shows figcaption { font-size: 14px; }
.gallery--shows .gallery__date { font-size: 13px; }
.gallery__link img { transition: opacity .2s ease; }
.gallery__link:hover img, .gallery__link:focus-visible img { opacity: 0.85; }
.gallery__more { display: inline-block; margin-top: 6px; color: var(--red); font-size: 14px; font-weight: 600; }
.gallery__link:hover .gallery__more { text-decoration: underline; text-underline-offset: 3px; }

.empty-note {
  margin: 0;
  padding-bottom: clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 17px;
}

.hero__name {
  position: absolute;
  top: 0.14em;
  right: 0;
  left: 0;
  margin: 0;
  color: var(--red);
  font-family: var(--display);
  font-size: 9.3vw;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: center;
  white-space: nowrap;
}

/* Sections */
.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter) 0;
  scroll-margin-top: 8px;
}

.section__title {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(28px, 4.5vw, 44px);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Upcoming events: compact rows, so several can stack */
.event-list { display: grid; gap: clamp(16px, 2vw, 24px); }
.event-list .row-card { grid-template-columns: clamp(96px, 12vw, 150px) 1fr; }
.event-list .row-card img { object-position: 50% 12%; }
.row-card__kicker time { color: var(--red); font-weight: 700; }
.row-card__meta { color: var(--muted); font-size: 15px; }

/* Event photo galleries */
.back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.back-link:hover { color: var(--white); }
.event-page__title { font-size: clamp(36px, 6vw, 72px); }
.event-page__meta { margin: 0 0 28px; color: var(--muted); font-size: 17px; }
.event-page__hint { margin: 16px 0 24px; color: var(--muted); font-size: 14px; }
.button-red {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--display);
  font-size: 14px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.button-red:hover { background: #b80f24; }

/* Press Kit */
.button-outline {
  display: inline-block;
  padding: 9px 21px;
  border: 1px solid var(--cream);
  border-radius: 999px;
  color: var(--cream);
  font-family: var(--display);
  font-size: 14px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.button-outline:hover { background: var(--cream); color: var(--oxblood); }
.press-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.press-facts { display: grid; gap: 14px; max-width: 680px; margin: 32px 0 0; }
.press-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.press-facts dt { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.press-facts dd { margin: 0; }
/* Every clip shows in the same 4:5 frame, cropped to fill, so the grid lines up */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.clip-grid video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #000; }
.press-shows { max-width: 760px; margin: 0 0 16px; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; }
.press-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }

/* Photos keep their own shape, stacked in columns */
.photo-grid { columns: 3 260px; column-gap: 12px; }
.photo { position: relative; margin: 0 0 12px; break-inside: avoid; }
.photo img { width: 100%; border-radius: 6px; }
.photo__download {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(25, 0, 0, 0.75);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.photo:hover .photo__download,
.photo__download:focus-visible { opacity: 1; }
.photo__download:hover { background: var(--red); }
@media (hover: none) { .photo__download { opacity: 1; } }

/* Full-screen photo viewer */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 0, 0, 0.96);
  color: var(--white);
}
.lightbox::backdrop { background: rgba(10, 0, 0, 0.96); }
.lightbox__img {
  position: absolute;
  inset: 64px 72px 72px;
  width: calc(100% - 144px);
  height: calc(100% - 136px);
  object-fit: contain;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--red); }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { top: 50%; left: 12px; transform: translateY(-50%); }
.lightbox__next { top: 50%; right: 12px; transform: translateY(-50%); }
.lightbox__bar {
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--muted);
}

/* Event and mix rows */
.row-card {
  display: grid;
  grid-template-columns: clamp(110px, 24vw, 240px) 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  padding-bottom: clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--line);
}
.row-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.row-card__text { display: grid; gap: 6px; min-width: 0; }
.row-card__kicker { color: var(--muted); font-size: 14px; font-weight: 500; }
.row-card__title {
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 600;
  line-height: 1.2;
}
.row-card__action {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.row-card:hover .row-card__title { text-decoration: underline; text-underline-offset: 4px; }

/* Videos */
.videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px);
}
.video { display: block; min-width: 0; }
.video--feature { grid-column: 1 / -1; }

.video__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--oxblood-raised);
}
.video__frame img,
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: var(--red);
  transition: transform 0.15s ease;
}
.video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--white);
  transform: translate(-50%, -50%);
}
.video:hover .video__play { transform: scale(1.1); }

.video__title {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.video--feature .video__title { font-size: clamp(16px, 2.2vw, 20px); font-weight: 600; }

/* Footer */
.footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name social contact";
  align-items: center;
  gap: 20px 28px;
}
.footer__name {
  grid-area: name;
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-stretch: 125%;
  font-weight: 800;
}
.footer__social {
  grid-area: social;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: color 0.15s ease;
}
.footer__social a:hover { color: var(--red); }
.footer__social svg { width: 24px; height: 24px; }
.footer__contact {
  grid-area: contact;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--display);
  font-size: 15px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.footer__contact:hover { background: #b80f24; }

/* Tablets and small laptops: menu moves under the name so all the tabs fit */
@media (max-width: 1180px) {
  .topbar { flex-direction: column; }
  .topbar .site-nav { gap: clamp(14px, 2.4vw, 28px); }
}

/* Phones and small tablets: no room for Contact in the menu; it stays in the footer */
@media (max-width: 720px) {
  .site-nav .nav-contact { display: none; }
}

/* Phone layout: same full-height photo and red title as desktop */
@media (max-width: 640px) {
  .hero__photo { object-position: 72% 40%; }
  .hero__line { display: block; }
  .hero__name {
    top: 0.3em;
    font-size: 17.5vw;
    line-height: 0.92;
  }
  /* The bottom of the photo is light on phones, so the menu needs no bar */
  .hero__nav {
    display: flex;
    padding: 12px 8px 16px;
    background: transparent;
    color: var(--oxblood);
  }
  /* All five tabs stay on one line, scaling down with the screen width */
  .site-nav,
  .topbar .site-nav {
    justify-content: center;
    gap: 2.4vw;
    font-size: clamp(10px, 3vw, 14px);
    white-space: nowrap;
  }

  .page__intro { font-size: 17px; }
  .prose p { margin-bottom: 14px; font-size: 15px; line-height: 1.55; }
  /* On phones the logo tucks into the top right corner, behind the title */
  .hot-intro::before {
    top: 12px; right: 4px; width: 140px; opacity: 0.28;
  }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery img { border-radius: 8px; }

  .section { padding-top: 40px; }
  .section__title { margin-bottom: 16px; }

  /* Square image overlapping the edge of a raised card */
  .row-card {
    position: relative;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 14px 30px 0;
  }
  .row-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 20px;
    left: 54px;
    border-radius: 10px;
    background: var(--oxblood-raised);
  }
  .row-card img,
  .row-card__text { position: relative; }
  .row-card img { border-radius: 8px; }
  .row-card__kicker { font-size: 13px; }
  .row-card__title { font-size: 16px; }
  .row-card__action { margin-top: 2px; font-size: 14px; }
  .event-list { gap: 4px; }
  .event-list .row-card { grid-template-columns: 96px minmax(0, 1fr); }
  .row-card__meta { font-size: 14px; }

  /* Videos swipe sideways inside their own row */
  .videos {
    display: flex;
    gap: 12px;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .videos::-webkit-scrollbar { display: none; }
  .video,
  .video--feature { flex: 0 0 84%; scroll-snap-align: start; }
  .videos--single .video { flex-basis: 100%; }
  /* On the Videos page, stack the videos instead of swiping */
  .videos--page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }
  .video__frame { border-radius: 8px; }
  .video__play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .video__title,
  .video--feature .video__title { font-size: 14px; font-weight: 500; }

  .photo-grid { columns: 2; column-gap: 8px; }
  .photo { margin-bottom: 8px; }
  .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .press-facts div { grid-template-columns: 1fr; gap: 4px; }
  .photo__download { right: 6px; bottom: 6px; width: 34px; height: 34px; }
  .lightbox__img { inset: 60px 8px 76px; width: calc(100% - 16px); height: calc(100% - 136px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 12px; transform: none; }

  /* Name with the icons right under it on the left; Contact centered beside them */
  .footer {
    padding-top: 40px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name contact" "social contact";
    gap: 2px 16px;
  }
  .footer__name { align-self: end; font-size: 17px; white-space: nowrap; }
  .footer__social { align-self: start; gap: 0; margin-left: -6px; }
  .footer__social a { width: 36px; height: 36px; }
  .footer__social svg { width: 22px; height: 22px; }
  .footer__contact { align-self: center; padding: 9px 18px; font-size: 14px; }
}

/* Home page mixes: a row of covers that scrolls sideways (swipe on phones, arrows on desktop) */
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scroller-buttons { display: flex; gap: 8px; margin-bottom: 24px; }
.scroller-button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--white);
  font-size: 18px; cursor: pointer;
}
.scroller-button:hover { border-color: var(--red); color: var(--red); }
.scroller-button:disabled { opacity: 0.3; cursor: default; }
.mix-scroller {
  display: flex; gap: 16px;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-overflow-scrolling: touch;
}
.mix-card { flex: 0 0 clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.mix-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.mix-card__kicker { display: block; margin-bottom: 4px; color: var(--red); font-size: 13px; font-weight: 600; }
.mix-card__title { display: block; font-weight: 600; line-height: 1.35; }
.mix-card:hover .mix-card__title { text-decoration: underline; text-decoration-color: var(--red); }
.section__more { margin: 20px 0 0; }
@media (max-width: 720px) {
  .scroller-buttons { display: none; }
  /* About one and a half covers show, so the next one peeking in says "swipe" */
  .mix-card { flex-basis: 62vw; }
}

/* Home page: a small bouncing arrow at the bottom of the photo, gone once you start scrolling */
.scroll-cue {
  position: absolute; left: 50%; bottom: 8px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--oxblood);
  transform: translateX(-50%);
  animation: cue-bounce 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
@keyframes cue-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
@media (max-width: 720px) { .scroll-cue { bottom: 8px; } }
@media (min-width: 721px) { .scroll-cue { display: none; } }

/* Every page except home: the top bar (name and menu) stays at the top of the screen while scrolling */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--oxblood); }
@media (max-width: 720px) { html:has(.topbar) { scroll-padding-top: 72px; } }

/* Desktop home page: as the photo scrolls away, its menu bar catches at the top of the screen and stays.
   Once caught, it shows the white MOJIE'S WORLD name on the left, like the other pages' top bar. */
.hero__nav-brand { display: none; }
@media (min-width: 721px) {
  html { scroll-padding-top: 76px; }
  .hero.is-nav-stuck .hero__nav {
    position: fixed; top: 0; bottom: auto; z-index: 30;
    justify-content: flex-end;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  }
  .hero.is-nav-stuck .hero__nav-brand {
    display: block; margin-right: auto; padding: 0; border: 0;
    color: var(--white); font-family: var(--display); font-size: 20px; font-stretch: 125%; font-weight: 800;
  }
  .hero.is-nav-stuck .hero__nav-brand:hover { border: 0; }
}

/* Menu button (hamburger): only on phones and small tablets */
.menu-toggle { display: none; }
@media (max-width: 720px) {
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    padding: 11px 10px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .menu-toggle__bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .topbar {
    position: sticky;
    flex-direction: row;
    padding: 18px 16px;
  }

  /* The menu folds away behind the button (only when JavaScript can open it) */
  .js .site-nav { display: none; }
  .js .is-menu-open .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 16px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--oxblood);
    color: var(--white);
    font-size: 18px;
    white-space: normal;
  }
  .js .is-menu-open .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .js .is-menu-open .site-nav a.is-active { color: var(--red); }
  .js .is-menu-open .site-nav .nav-contact {
    display: block;
    align-self: flex-start;
    margin-top: 20px;
    padding: 10px 24px;
    border: 0;
    color: var(--white);
  }

  /* Home page: the button sits in the top right corner of the photo */
  .hero .menu-toggle {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 21;
    margin: 0;
    color: var(--red);
  }
  /* Room for the button above the big title */
  .js .hero__name { top: 52px; }
  .js .hero.is-menu-open .hero__nav { top: 52px; bottom: auto; }
}

/* Home page on phones: the photo stops short so "Upcoming Events" and its Get Tickets link
   show on the first screen, and the red menu button stays in the corner while scrolling */
@media (max-width: 720px) {
  .hero { min-height: calc(100svh - 150px); }
  .hero .menu-toggle { position: fixed; top: 2px; right: 6px; border-radius: 50%; transition: background-color 0.2s ease; }
  /* Past the photo, a soft dark circle keeps the red lines readable over videos and covers */
  .hero .menu-toggle.is-scrolled { background: rgba(25, 0, 0, 0.82); }
  .js .hero__name { top: 46px; }
  #events.section { padding-top: 22px; }
  #events .section__title { margin-bottom: 12px; }
  /* The open menu drops down under the button wherever the page is scrolled to */
  .js .hero.is-menu-open .hero__nav {
    position: fixed;
    top: 50px;
    right: 12px;
    left: 12px;
    z-index: 29;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  .js .hero.is-menu-open .hero__nav a:last-of-type:not(.nav-contact) { border-bottom: 0; }
}

/* Very small phones (320px wide): keep the footer inside the screen */
@media (max-width: 359px) {
  .footer { column-gap: 10px; padding-left: 12px; padding-right: 12px; }
  .footer__name { font-size: 15px; }
  .footer__social a { width: 32px; height: 32px; }
  .footer__contact { padding: 8px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video__play { transition: none; }
}

/* v43 */