/* ============================================
   NETTLETIE - Global styles
   Tip: tweak the 4 vars in :root to reskin
   the whole site (e.g. seasonal colour shift).
   ============================================ */

:root {
  --bg: #0d0d0e;
  --bg-2: #111011;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, .65);
  --cyan: #00b1b1;
  --cyan-glow: 0 0 24px rgba(0, 177, 177, .35);

  --menu-h: 80px;
  --footer-h: 240px;

  --r-md: 10px;        /* matches iframe radius - used everywhere */
  --r-lg: 14px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  animation: page-in .5s var(--ease) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--cyan); }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

button { font-family: inherit; }

/* Subtle film grain overlay - modern fancy touch.
   Sits BELOW the fixed header (z-index 50 vs header's 100) so it
   doesn't mix-blend with the menu and cause perceived weight changes. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ============================================
   HEADER / MENU
   ============================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--menu-h);
  z-index: 100;
  /* Solid background - no backdrop-filter and no near-transparency.
     This guarantees the header reads identically on every page
     regardless of what background image is behind it. */
  background: var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__nav {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  padding: 0 40px;
}

.site-header__link {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
  transition: color .25s var(--ease);
}

.site-header__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--cyan);
  transition: width .3s var(--ease), left .3s var(--ease);
}

.site-header__link:hover { color: var(--cyan); }
.site-header__link:hover::after,
.site-header__link.is-active::after { width: 100%; left: 0; }
.site-header__link.is-active { color: var(--cyan); }

.hamburger {
  display: none;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 12px;
  z-index: 120;
}

.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .25s var(--ease);
}

/* Hover styles only on devices that actually support hover (mouse).
   Without this, mobile browsers leave the :hover state stuck after a
   tap - making the hamburger look cyan even when the menu is closed. */
@media (hover: hover) {
  .hamburger:hover span { background: var(--cyan); }
}

/* When the menu is open, all bars turn cyan - visual confirmation */
.hamburger.is-open span { background: var(--cyan); }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   MOBILE LOGO IN HEADER
   Hidden on desktop. On mobile the centred logo
   replaces the missing nav links so the header
   has a clear identity.
   ============================================ */

.site-header__logo {
  display: none;             /* hidden on desktop */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 36px;
  z-index: 110;
}

.site-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  position: relative;
  width: 100%;
  min-height: var(--footer-h);
  padding: 40px 20px 32px;
  background: linear-gradient(to bottom, rgba(13, 13, 14, 0) 0%, rgba(13, 13, 14, .9) 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 10;
}

/* ============================================
   SOCIAL ICONS
   Icons are self-contained 24x24 SVGs with a
   white circle badge baked in. We just render
   them at a uniform 38px size - no wrapper.
   ============================================ */

.socials {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}

.socials__link img {
  width: 38px;
  height: 38px;
  display: block;
}

.socials__link:hover {
  transform: translateY(-2px);
  /* Cyan glow on hover preserves the white icon while signalling brand colour */
  filter: drop-shadow(0 0 10px rgba(0, 177, 177, .8));
}

.footer__contact {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  padding: 6px 0;
  position: relative;
}

.footer__contact::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .9;
}

.footer__contact:hover { color: var(--cyan); }

.footer__copy {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: center;
}

/* ============================================
   HERO (index page)
   ============================================ */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: -3%; left: -3%;
  width: 106%;
  height: 106%;
  background-image: url('../images/hero.jpg');
  background-size: cover;
  /* 22% from top - keeps the band members' heads in frame even
     when the viewport is tall. Tweak this if your hero image changes. */
  background-position: center 22%;
  background-repeat: no-repeat;
  transition: transform .15s ease-out;
  will-change: transform;
  z-index: 1;
}

/* Mobile: portrait hero image, natural aspect ratio (no 100vh).
   The image shows in full, gradient fades the bottom edge into the dark
   background so there is no visible hard cut. No parallax on mobile.
   Negative margin on .latest pulls it up so it overlaps the gradient. */
@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: unset;
    /* aspect-ratio matches hero-mobile.jpg (1597×2396 ≈ 2:3) */
    aspect-ratio: 1597 / 2396;
    max-height: 90vh;
  }

  .hero__bg {
    background-image: url('../images/hero-mobile.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--bg);
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform: none !important;   /* kill JS parallax on mobile */
    will-change: auto;
  }

  .hero__gradient {
    /* Very aggressive bottom fade - starts at 55% and is fully opaque
       at 95%, so the photo edge is completely invisible. */
    background:
      linear-gradient(to bottom,
        rgba(13, 13, 14, .55) 0%,
        rgba(13, 13, 14, 0) 10%,
        rgba(13, 13, 14, 0) 45%,
        rgba(13, 13, 14, .6) 65%,
        rgba(13, 13, 14, .9) 82%,
        var(--bg) 95%,
        var(--bg) 100%);
  }

  /* Hero logo hidden on mobile - the header logo replaces it */
  .hero__logo { display: none; }

  /* Pull the Latest Release section UP so it overlaps the hero gradient,
     removing any visible gap or hard line between photo and content. */
  .page--home .latest {
    margin-top: -80px;
    position: relative;
    z-index: 2;
  }
}

.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 30%, rgba(13,13,14,.35) 100%),
    linear-gradient(to bottom,
      rgba(13, 13, 14, .55) 0%,
      rgba(13, 13, 14, 0) 15%,
      rgba(13, 13, 14, 0) 42%,
      rgba(13, 13, 14, .7)  72%,
      rgba(13, 13, 14, .95) 88%,
      var(--bg) 100%);
}

/* Cursor-following glow was removed per user request - kept the hero clean. */

.hero__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(440px, 70vw);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 30px rgba(0, 177, 177, .25));
  /* No delay - immediate fade-in so the logo appears with the page */
  animation: logo-in .8s var(--ease) both, logo-pulse 5s ease-in-out 1s infinite;
}

@keyframes logo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Subtle pulse - modern feature #1.
   Glow intensity gently breathes; logo itself stays still. */
@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 4px 26px rgba(0, 177, 177, .22)); }
  50%      { filter: drop-shadow(0 4px 38px rgba(0, 177, 177, .45)); }
}

/* ============================================
   LATEST RELEASE (home page) - feature #5
   ============================================ */

.latest {
  position: relative;
  padding: 100px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg);
}

.latest__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}

.latest__title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 32px;
}

.latest__embed {
  width: 100%;
  max-width: 720px;
  margin-bottom: 28px;
}

.latest__embed iframe {
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .5);
}

.latest__cta {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

.latest__cta:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg);
}

/* Scroll-snap on home - feature #7 */
.home {
  scroll-snap-type: y proximity;
}
.home .hero, .home .latest {
  scroll-snap-align: start;
}

/* ============================================
   PAGE LAYOUT (videos, music, concerts, about)
   ============================================ */

/* ============================================
   SPA PAGES
   Each <section class="page"> is one "view".
   Inactive views are removed from layout entirely;
   the active view fades in with a subtle transition.
   ============================================ */

.page {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}

.page.is-active {
  display: flex;
  animation: page-fade .35s var(--ease);
}

@keyframes page-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Full-bleed pages (gallery) sit edge-to-edge with no header offset */
.page--full {
  min-height: 100vh;
}

/* Standard content pages get a top pad equal to the fixed header,
   plus inner padding for breathing room. */
.page__pad {
  flex: 1 0 auto;
  padding: calc(var(--menu-h) + 24px) 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 8px;
}

/* Hide the global footer on full-bleed pages (gallery) - they manage
   their own visual chrome and don't need a separate footer below. */
body[data-current="gallery"] .site-footer { display: none; }

/* Stack of spotify embeds - direct iframes, no wrapper divs */
.music-stack {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.music-stack iframe {
  width: 100%;
  border: 0;
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.embed-wrap {
  width: 100%;
  max-width: 1440px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 20px;
}

.embed-wrap iframe {
  width: 100%;
  max-width: 920px;
  border: 0;
  display: block;
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

/* Video embeds get 16:9 ratio; Spotify overrides below */
.embed-wrap:not(.embed-wrap--spotify) iframe {
  aspect-ratio: 16 / 9;
}

.embed-wrap--spotify {
  padding: 10px 20px;
}

/* Spotify: height is set per-embed in HTML (singles 152px, album 380px).
   We must NOT set height or aspect-ratio here - they override the attribute. */
.embed-wrap--spotify iframe {
  aspect-ratio: unset;
  height: revert;
  max-width: 920px;
  border-radius: var(--r-lg);
}

/* Concerts: round-corner wrapper around Bandsintown widget.
   The widget renders as nested divs - overflow:hidden clips them
   to the rounded shape, matching the iframe radii on other pages. */
.embed-wrap--concerts {
  max-width: 1128px;
  padding: 50px 20px;
  min-height: 400px;
}

.concerts-frame {
  width: 100%;
  max-width: 920px;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  background: var(--bg);
}

/* ── Bandsintown widget overrides ──────────────────────────
   The widget renders its own DOM elements in the main document.
   We can target its inner classes for cosmetic adjustments.

   Strategy:
   - Cyan buttons (TICKETS/RSVP/FOLLOW) → pill shape + bold
   - Dark/outline buttons (NOTIFY ME, date borders) → keep original radius
   - All text → consistent left alignment with uniform indent
   - Bandsintown logo → half size
*/

/* Force everything left-aligned with consistent padding */
.concerts-frame .bit-widget,
.concerts-frame [class*="bit-"] {
  text-align: left !important;
}

/* All top-level widget sections get the same left padding */
.concerts-frame [class*="bit-follow"],
.concerts-frame [class*="bit-event"],
.concerts-frame [class*="bit-header"],
.concerts-frame [class*="bit-logo"],
.concerts-frame [class*="bit-tab"],
.concerts-frame [class*="bit-nav"] {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* FOLLOW section - row layout: text left, button right */
.concerts-frame [class*="bit-follow-section"],
.concerts-frame [class*="follow-section"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.concerts-frame [class*="bit-follow-section"] [class*="header"],
.concerts-frame [class*="follow-section"] [class*="header"] {
  flex: 1 !important;
  margin-bottom: 0 !important;
}

/* FOLLOW button (cyan) → pill + bold */
.concerts-frame [class*="follow-section"] button,
.concerts-frame [class*="follow-section"] a[class*="btn"],
.concerts-frame [class*="follow-section"] [class*="cta"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* TICKETS / RSVP buttons (cyan) → pill + bold */
.concerts-frame [class*="bit-ticket"],
.concerts-frame [class*="ticket-cta"],
.concerts-frame [class*="rsvp-cta"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Bandsintown logo → half the default size */
.concerts-frame [class*="bit-logo"],
.concerts-frame .bit-logo {
  transform: scale(0.5) !important;
  transform-origin: left center !important;
}

/* ============================================
   VIDEOS GRID - feature #3
   Click-to-play YouTube thumbnails.
   ============================================ */

.videos {
  width: 100%;
  max-width: 1200px;
  padding: 30px 20px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}

.video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 50%);
  z-index: 1;
  pointer-events: none;
}

.video-card__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-card__play::after {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .9);
  position: relative;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

.video-card__play::before {
  content: '';
  position: absolute;
  z-index: 3;
  width: 0; height: 0;
  border-left: 18px solid var(--white);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
  transition: border-left-color .25s var(--ease);
}

.video-card:hover .video-card__play::after {
  background: var(--cyan);
  border-color: var(--cyan);
}

.video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 5;
}

/* ============================================
   ABOUT PAGE
   ============================================ */

.about {
  position: relative;
  min-height: 100vh;
  padding-top: var(--menu-h);
  overflow: hidden;
}

/* Parallax background - feature #6 */
.about__parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: .25;
}

.about__parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 13, 14, .65) 0%, rgba(13, 13, 14, .88) 60%, var(--bg) 100%);
}

@media (max-width: 900px) {
  /* iOS doesn't honour fixed bg attachment well - fall back to scroll */
  .about__parallax { background-attachment: scroll; }
}

.about__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 70px 30px 60px;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
}

.about__inner p { margin-bottom: 18px; }

.about__inner b {
  font-weight: 600;
  color: #fff;
}

.about__inner h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  margin: 36px 0 22px;
  color: var(--cyan);
}

/* Lineup with member photos - rounded-square thumbs matching iframe radius */
.about__lineup {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 24px;
}

.about__lineup li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.member-photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-md);
  flex-shrink: 0;
  background: var(--bg-2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

.member-info {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
}

.member-info b {
  display: block;
  color: var(--cyan);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.member-info span {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ============================================
   GALLERY
   ============================================ */

.gallery {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--bg);   /* matches header - same #0d0d0e grey */
  cursor: default;
}

.gallery__stage { position: absolute; inset: 0; z-index: 1; }

/* Each slide is a flex container that centers a contained <img>.
   The gallery background stays solid black behind contained photos -
   we tried a blurred-image fill earlier but browser blur rendering
   was inconsistent and showed un-blurred duplicates on the sides. */
.gallery__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* MUST match FADE_MS in js/gallery.js so JS lock and visual fade
     finish at the same time. Both slides crossfade simultaneously. */
  transition: opacity 1s ease-in-out;
  pointer-events: none;
  /* Padding caps the visible photo zone - wider screens get black
     side-margin matching where the arrows sit, narrower screens
     get a small breathing gap from the edges. */
  padding: 20px max(80px, calc(50vw - 620px));
}

.gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.gallery__slide-img {
  display: block;
  max-width: 100%;
  /* Cap height so very tall photos don't dominate; the gallery is
     full-viewport but we leave breathing room for arrows + thumbs. */
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* Gallery vignette removed - solid bg color is cleaner */

.gallery__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}

.gallery.is-hovering .gallery__overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Inner constraint: positions arrows close to the photo on wide
   screens. clamp() lets arrows sit just outside the photo area
   regardless of whether the photo is portrait (narrow) or landscape (wide). */
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery__arrow:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 0, 0, .55);
  transform: translateY(-50%) scale(1.06);
}

/* Arrows stop drifting to the screen edges on wide monitors -
   they stay within ~1280px of the centre, matching the photo zone. */
.gallery__arrow--left  { left:  max(24px, calc(50vw - 640px)); }
.gallery__arrow--right { right: max(24px, calc(50vw - 640px)); }

.gallery__arrow svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tighter, thinner thumb strip - fixes "too thick semi-transparent border" */
.gallery__thumbs {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  padding: 2px;
  background: rgba(0, 0, 0, .45);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 95vw;
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery__thumbs::-webkit-scrollbar { display: none; }

.gallery__thumb {
  width: 64px;
  height: 56px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  opacity: .55;
  transition: opacity .25s var(--ease), outline-color .25s var(--ease);
  outline: 1px solid transparent;       /* thinner - was 2px */
  outline-offset: -1px;
  border-radius: 3px;
}

.gallery__thumb:hover { opacity: 1; }

.gallery__thumb.is-active {
  opacity: 1;
  outline-color: var(--cyan);
}

/* ============================================
   MOBILE DROPDOWN MENU
   ============================================ */

.mobile-menu {
  position: fixed;
  top: var(--menu-h);
  left: 0; right: 0;
  background: rgba(13, 13, 14, .98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .6);
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu a {
  display: block;
  padding: 18px 24px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: color .25s var(--ease), background .25s var(--ease), padding-left .25s var(--ease);
}

.mobile-menu a:hover {
  color: var(--cyan);
  background: rgba(0, 177, 177, .06);
  padding-left: 32px;
}

.mobile-menu a.is-active { color: var(--cyan); }
.mobile-menu a:last-child { border-bottom: none; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .hamburger { display: block; }
  .site-header__logo { display: block; }      /* show centred logo on mobile */

  .embed-wrap { padding: 18px 10px; }

  .videos {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .latest { padding: 60px 16px 40px; }

  .socials { gap: 10px; }
  .socials__link { width: 36px; height: 36px; }
  .socials__link img { width: 36px; height: 36px; }

  .about__inner { padding: 50px 22px 40px; font-size: 16px; }
  .about__lineup { grid-template-columns: 1fr; }

  /* Mobile gallery: photos take the full screen, no padding caps.
     object-fit: contain - photo fits fully without cropping. On a
     portrait phone screen vertical photos will fill nicely;
     horizontal photos get small black bars top/bottom. */
  .gallery__slide { padding: 0; }
  .gallery__slide-img {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    box-shadow: none;
  }

  .gallery__arrow { width: 40px; height: 40px; }
  .gallery__arrow--left  { left:  10px; }
  .gallery__arrow--right { right: 10px; }

  .gallery__thumb { width: 56px; height: 48px; }
  .gallery__thumbs { bottom: 18px; }
}

@media (max-width: 480px) {
  .footer__contact { font-size: 13px; }
  .gallery__thumb { width: 48px; height: 42px; }
}