@font-face {
  font-family: "Wild Honey";
  src: url('fonts/wild-honey.ttf') format('truetype');
  font-display: swap;
}

html { scroll-behavior: smooth; }

body {
  background-image: url('images/paper-grain.jpg');
  background-repeat: repeat;
  background-size: 900px auto;
  background-attachment: fixed;
  background-blend-mode: multiply;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* #video has no top padding, so keep the sticky nav from covering it when scrolled to */
#video { scroll-margin-top: 3.5rem; }

/* "next section" arrow links at the foot of each section */
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline: auto;
  border-radius: 9999px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  animation: scroll-cue-bob 2.4s ease-in-out infinite;
}

.scroll-cue:hover,
.scroll-cue:focus-visible { opacity: 1; }
.scroll-cue:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }
.scroll-cue svg { width: 1.75rem; height: 1.75rem; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue { animation: none; }
}

.gig-photo { filter: saturate(0.88) sepia(6%) contrast(1.02); }

/* "Behind the scenes" mosaic: justified rows with no gaps. A flex item with
   flex-grow = its aspect ratio and aspect-ratio set to match gets a width
   proportional to that ratio, so every tile in a row shares one height.
   Phones: each row splits into its two pairs (4 bands of 2). sm+: 2 rows of 4. */
.bts-mosaic { background: #1c1a19; }
.bts-row { display: flex; flex-direction: column; }
.bts-pair { display: flex; flex: var(--pr) 1 0; min-width: 0; }

.bts-tile {
  position: relative;
  display: block;
  flex: var(--r) 1 0;
  min-width: 0;
  aspect-ratio: var(--r);
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
}

.bts-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s ease;
}

/* soft inner vignette that melts the seams between neighbouring photos */
.bts-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgb(0 0 0 / 28%);
  pointer-events: none;
  transition: box-shadow 0.7s ease;
}

.bts-tile:hover img,
.bts-tile:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1) sepia(0%) contrast(1.04) brightness(1.04);
}

.bts-tile:hover::after,
.bts-tile:focus-visible::after { box-shadow: inset 0 0 30px rgb(0 0 0 / 12%); }
.bts-tile:focus-visible { outline: none; }
.bts-tile:focus-visible::after { outline: 3px solid #f5efe6; outline-offset: -3px; }

@media (width >= 40rem) {
  .bts-row { flex-direction: row; }
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 90%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }

.lightbox-image {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgb(0 0 0 / 60%);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 10%);
  color: #f5efe6;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lightbox-close svg,
.lightbox-nav svg { width: 1.5rem; height: 1.5rem; }

.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover,
.lightbox-nav:hover { background: rgb(255 255 255 / 25%); }

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 2px solid #f5efe6; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .bts-tile img, .bts-tile::after { transition: none; }
  .bts-tile:hover img, .bts-tile:focus-visible img { transform: none; }
}