/* ============================================================
   DIRTBAG MEDIA CO. — "The Descent"
   Palette (Dirtbag Media brand guide): ink #080808 · char #151210
            gold #B8965A · gold lift #CDA869 · cream #F0E6D0
   Type: Bebas Neue (display) / Barlow Condensed (everything else)
   Gold is an accent — rules, labels, numbers, one-word emphasis.
   Long text is always cream.
   ============================================================ */

:root {
  /* brand tokens */
  --ink: #080808;
  --char: #151210;
  --char-2: #221d19;
  --gold: #b8965a;
  --gold-lift: #cda869;
  --gold-dim: #8f7444;
  --cream: #f0e6d0;
  --cream-2: #d8cfbb;
  --cream-dim: #9c937f;
  --hair: rgba(184, 150, 90, 0.24);
  --hair-soft: rgba(240, 230, 208, 0.08);

  /* semantic aliases used through the page */
  --accent: var(--gold-lift);
  --fg: var(--cream);           /* flips dark over the daylight bands */
  --fg-dim: rgba(240, 230, 208, 0.72);
  --hairline: var(--hair);
  --scrim: rgba(8, 8, 8, 0.86);

  --display: "Bebas Neue", "Haettenschweiler", Impact, sans-serif;
  --body: "Barlow Condensed", "Helvetica Neue", sans-serif;
  --mono: "Barlow Condensed", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* body text over the daylight bands flips dark — warm, never pure black */
body.daylight {
  --fg: #171310;
  --fg-dim: rgba(23, 19, 16, 0.75);
  --hairline: rgba(23, 19, 16, 0.24);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-weight: 300;
  color: var(--fg);
  background: var(--ink); /* painted over by WebGL; fallback if no GL */
  overflow-x: hidden;
  transition: color 0.5s ease;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-lift); color: var(--ink); }

/* small tracked caps — the guide's label voice, used for eyebrows and HUD */
.mono {
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: 0.14em;
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--gold-lift);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.noscript-note {
  position: relative;
  z-index: 60;
  max-width: 42rem;
  margin: 0 auto;
  padding: 22vh 1.5rem 4rem;
  color: var(--cream);
  display: grid;
  gap: 1rem;
  text-align: center;
}
.noscript-note h1 { font-family: var(--display); font-weight: 400; font-size: 3rem; letter-spacing: 0.01em; }
.noscript-note ul { list-style: none; display: grid; gap: 0.5rem; }
.noscript-note a { color: var(--gold-lift); }

/* ---------- canvas + loader ---------- */

#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { display: grid; gap: 0.9rem; justify-items: center; padding: 1.5rem; text-align: center; }
.loader-brand {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  letter-spacing: 0.06em;
  line-height: 0.9;
  color: var(--cream);
}
/* the guide's hairline, doing the work a divider would */
.loader-inner::after {
  content: "";
  width: 54px;
  height: 2px;
  background: var(--gold);
  order: -1;
}
.loader-elev {
  color: var(--gold-lift);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 2.4rem);
}
/* A permanent dark scrim, so the wordmark and nav read identically over the
   daylight bands, the night bands, and any photo that drifts beneath. */
.site-header::before {
  content: "";
  position: absolute;
  inset: -1px 0 -2.5rem;
  z-index: -1;
  background: linear-gradient(var(--scrim) 35%, rgba(8, 8, 8, 0));
  pointer-events: none;
}
.site-header .brand,
.site-header .site-nav a { color: var(--cream); }
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  padding: 0.3rem 0;
}
/* the three-peak mark is transparent artwork — no plate, no crop */
.brand-logo { display: block; width: auto; height: 30px; }
.brand-name {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  line-height: 1;
  padding-top: 2px;
}
.site-nav { display: flex; gap: clamp(0.9rem, 2.4vw, 1.8rem); align-items: center; }
.site-nav a {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  opacity: 0.82;
  transition: opacity 0.2s, color 0.2s;
  padding: 0.5rem 0.2rem;
}
.site-nav a:hover { opacity: 1; color: var(--gold-lift); }
.site-nav .nav-cta {
  opacity: 1;
  color: var(--gold-lift);
  border: 1px solid var(--gold);
  padding: 0.5rem 1.1rem;
}
.site-nav .nav-cta:hover { background: var(--gold-lift); color: var(--ink); }

/* hamburger — only shown on narrow screens */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  background: none;
  border: 1px solid var(--hair);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 5px;
  grid-auto-flow: row;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
body.nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- altimeter HUD ---------- */

.altimeter {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.8rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: grid;
  justify-items: end;
  gap: 0.55rem;
  text-align: right;
  pointer-events: none;
  /* stays cream at every altitude — the ticks sit on photos */
  color: var(--cream);
  filter: drop-shadow(0 1px 6px rgba(8, 8, 8, 0.85));
  transition: opacity 0.45s ease, visibility 0.45s;
}
/* the gauge belongs to the descent — once you reach the films and the
   valley floor the reading has bottomed out, so it steps aside */
body.grounded .altimeter { opacity: 0; visibility: hidden; }
.alt-readout {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: rgba(8, 8, 8, 0.42);
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
}
.alt-value {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.alt-unit {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold-lift);
}
.alt-strip-window {
  height: 150px;
  width: 22px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.alt-strip-window::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-lift);
}
.alt-strip { position: absolute; right: 0; top: 0; width: 100%; }
.alt-strip .tick { height: 12px; position: relative; }
.alt-strip .tick::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 1px;
  width: 8px;
  background: currentColor;
  opacity: 0.55;
}
.alt-strip .tick.major::after { width: 18px; opacity: 0.95; }
.alt-band {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-lift);
  writing-mode: vertical-rl;
  text-shadow: 0 1px 8px rgba(8, 8, 8, 0.8);
}

/* below the desktop breakpoint the full gauge would collide with the band
   panel, so it collapses to a compact readout in the corner */
@media (max-width: 1023px) {
  .altimeter {
    top: auto;
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    right: 0.9rem;
    transform: none;
    gap: 0;
  }
  .alt-strip-window { display: none; }
  .alt-band {
    writing-mode: horizontal-tb;
    font-size: 0.68rem;
    margin-top: 0.3rem;
  }
}

/* ---------- content skeleton ---------- */

.content { position: relative; z-index: 10; pointer-events: none; }
.content a, .content button, .content iframe, .content img { pointer-events: auto; }
.films, .about, .contact { pointer-events: auto; }

/* the deck's most recognizable tell: short gold rule, tracked gold caps */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(0.8rem, 1vw, 0.94rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--gold);
}

.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.5vw, 5.75rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.section-sub { color: var(--fg-dim); max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; }

/* ---------- hero ---------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 1.4rem;
  padding: 6rem clamp(1.2rem, 6vw, 6rem) 4rem;
}
.hero-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.01em;
  font-size: clamp(3.6rem, 11vw, 9.4rem);
  display: grid;
  text-shadow: 0 4px 40px rgba(8, 8, 8, 0.35);
}
.hero-title-accent { color: var(--gold-lift); }
.hero-tag {
  max-width: 46ch;
  color: var(--fg-dim);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 300;
  line-height: 1.42;
}
.hero-cue {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 2rem;
}
.cue-arrow { color: var(--gold-lift); animation: bob 2s ease-in-out infinite; font-size: 1.05rem; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ---------- altitude bands (3D corridors) ---------- */

.band {
  min-height: 175vh;
  padding: 0 clamp(1.2rem, 6vw, 6rem);
}
/* the head rides with you through its band: sticky, centered in the open
   corridor between the photo walls, and always dark glass so the type reads
   identically on the daylight bands and the night ones */
/* The panel sticks only through the first stretch of its band, then scrolls
   away — otherwise it is still pinned when the next band's panel arrives and
   the two stack on screen. */
.band-head-wrap {
  height: 105vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}
.band-head {
  position: sticky;
  top: 26vh;
  max-width: min(36rem, calc(100vw - 2.4rem));
  width: fit-content;
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  text-align: center;
  padding: 1.6rem 2.1rem 1.8rem;
  color: var(--cream);
  background: rgba(8, 8, 8, 0.66);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--gold);
  pointer-events: none;
}
.band-head .eyebrow { justify-content: center; }
.band-title-btn {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.band-title-btn:hover { border-color: var(--gold); color: var(--gold-lift); }
.band-title-btn:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 4px; }
.band-head h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.band-head .band-sub {
  color: var(--cream-2);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.45;
  max-width: 44ch;
}
.band-head .band-elev {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.band-enter-btn {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lift);
  border: 1px solid var(--gold);
  padding: 0.7rem 1.3rem;
  margin-top: 0.4rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s, color 0.2s;
}
.band-enter-btn:hover { background: var(--gold-lift); color: var(--ink); }
.band-enter-btn:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; }

/* reels sit three clicks deep inside the gallery, so the panel advertises them
   during the descent and jumps straight to that tab */
.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.4rem;
}
.band-actions .band-enter-btn { margin-top: 0; }
.band-reels-btn {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold-lift);
  border: 1px solid var(--gold);
  padding: 0.7rem 1.3rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s, color 0.2s;
}
.band-reels-btn:hover { background: transparent; color: var(--gold-lift); }
.band-reels-btn:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; }

/* ---------- films ---------- */

.films {
  position: relative;
  background: var(--ink);
  padding: 16vh clamp(1.2rem, 6vw, 6rem);
  display: grid;
  gap: 4rem;
  color: var(--cream);
}
/* the valley floor fades up out of the 3D scene rather than butting into it */
.films::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22vh;
  height: 22vh;
  background: linear-gradient(rgba(8, 8, 8, 0), var(--ink));
  pointer-events: none;
}
.films .section-sub { color: var(--cream-2); }
.films-head { display: grid; gap: 0.9rem; }
.film-list { display: grid; gap: 4.5rem; }
.film {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
  align-items: end;
}
.film:nth-child(even) { grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.6fr); }
.film:nth-child(even) .film-frame { order: 2; }
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--hair);
}
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-meta { display: grid; gap: 0.6rem; padding-bottom: 0.4rem; }
.film-idx {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.film-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.film-blurb { color: var(--cream-2); font-size: 1.02rem; font-weight: 300; max-width: 36ch; line-height: 1.5; }
@media (max-width: 860px) {
  .film, .film:nth-child(even) { grid-template-columns: 1fr; }
  .film:nth-child(even) .film-frame { order: 0; }
  .film-list { gap: 3rem; }
}

/* ---------- about ---------- */

.about {
  background: var(--char);
  color: var(--cream);
  padding: 13vh clamp(1.2rem, 6vw, 6rem);
  display: grid;
  gap: 3rem;
  border-top: 1px solid var(--hair-soft);
}
.about .section-title { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-copy { display: grid; gap: 1.2rem; max-width: 60ch; }
.about-copy p {
  color: var(--cream-2);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 300;
  line-height: 1.55;
}
.services {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.6rem;
  font-size: 1.02rem;
}
.services li {
  border-top: 1px solid var(--hair);
  padding-top: 0.55rem;
  color: var(--cream);
  font-weight: 300;
}
.services li::before { content: "— "; color: var(--gold-lift); }
.about-portrait img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--hair);
}
.about-portrait figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 22rem; }
}

/* ---------- contact ---------- */

.contact {
  background: var(--ink);
  color: var(--cream);
  min-height: 100svh;
  padding: 12vh clamp(1.2rem, 6vw, 6rem) 2.5rem;
  display: grid;
  align-content: center;
  gap: 1.8rem;
  border-top: 1px solid var(--hair-soft);
}
.contact-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.contact-title .accent { color: var(--gold-lift); font-style: normal; }
.contact-sub { color: var(--cream-2); max-width: 48ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.45; }
.contact-links { display: grid; gap: 1.2rem; justify-items: start; }
.contact-mail {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--gold-lift);
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
  overflow-wrap: anywhere;
}
.contact-mail:hover { border-color: var(--gold); }
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-2);
}
.contact-row a {
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}
.contact-row a:hover { color: var(--gold-lift); border-color: var(--gold); }
.footer {
  margin-top: 12vh;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  border-top: 1px solid var(--hair);
  padding-top: 1.2rem;
}
.footer a {
  color: var(--gold-lift);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- project gallery overlay ---------- */

body.overlay-open { overflow: hidden; }

.gallery {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: clamp(1.2rem, 4vw, 3rem);
  padding-top: max(clamp(1.2rem, 4vw, 3rem), env(safe-area-inset-top));
  color: var(--cream);
}
.gallery[hidden] { display: none; }
.gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 1.5rem;
}
.gallery-headings { min-width: 0; }
.gallery-meta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.gallery-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0.5rem 0;
  overflow-wrap: anywhere;
}
.gallery-sub { color: var(--cream-2); max-width: 56ch; font-weight: 300; line-height: 1.5; }
.gallery-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--hair);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.gallery-close:hover { border-color: var(--gold); color: var(--gold-lift); }
.gallery-close-x { font-size: 1.1rem; line-height: 1; }

/* ---------- gallery filter tabs ---------- */

.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.7rem;
}
.gallery-tabs[hidden] { display: none; }
.gallery-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid var(--hair);
  color: var(--cream-2);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  min-height: 42px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.gallery-tab:hover { border-color: var(--gold); color: var(--gold-lift); }
.gallery-tab[aria-pressed="true"] {
  background: var(--gold-lift);
  border-color: var(--gold-lift);
  color: var(--ink);
}
.gallery-tab-n {
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--cream-dim);
}
.gallery-tab[aria-pressed="true"] .gallery-tab-n { color: rgba(8, 8, 8, 0.62); }

/* Masonry via CSS columns. The column *count* is capped per gallery (--gcols,
   set in main.js) because the browser balances content into as few columns as
   it can: six photos in a four-column grid pack into three and leave the right
   third of the screen empty. Capping at ceil(count / 2) makes every allowed
   column fill, so a short gallery still spans the full width. */
.gallery-grid {
  column-width: 300px;
  column-count: var(--gcols, 4);
  column-gap: 0.9rem;
}
.gallery-item {
  all: unset;
  cursor: zoom-in;
  display: block;
  width: 100%;
  margin-bottom: 0.9rem;
  break-inside: avoid;
  position: relative;
  background: var(--char-2);
}
.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.gallery-item:hover img, .gallery-item:focus-visible img {
  transform: scale(1.02);
  filter: brightness(1.08);
}
.gallery-item:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 2px; }

/* ---------- reels (vertical YouTube Shorts, in the Reels tab) ---------- */

/* Reels leave the masonry behind: a 9:16 player is only ever as wide as a
   phone screen wants to be, so the cards keep a fixed width and pack from the
   left instead of stretching to fill the row. */
/* Centred, not left-packed: two reels hugging the top-left of a wide screen
   read as a mistake, while the same two centred read as a deliberate pair.
   auto-fit collapses the empty tracks, so this holds at any count. */
.gallery-grid.is-reels {
  column-count: auto;
  column-width: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  gap: 1.6rem 1.4rem;
  justify-content: center;
  align-items: start;
  max-width: 1500px;
  margin-inline: auto;
  padding-top: 0.4rem;
}
.reel {
  break-inside: avoid;
  margin-bottom: 0.9rem;
}
.gallery-grid.is-reels .reel { margin-bottom: 0; }
.reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 1px solid var(--hair);
}
/* not everything in this tab is a Short — a horizontal cut gets a 16:9 card
   two columns wide, rather than being pillarboxed inside a phone-shaped frame */
.gallery-grid.is-reels .reel.is-wide { grid-column: span 2; }
.reel.is-wide .reel-frame { aspect-ratio: 16 / 9; }
@media (max-width: 620px) {
  .gallery-grid.is-reels .reel.is-wide { grid-column: span 1; }
}
.reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reel-cap {
  margin-top: 0.6rem;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 620px) {
  .gallery-head {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1rem;
  }
  .gallery-close { align-self: flex-start; }
  .gallery-grid { columns: 1; }
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(8, 8, 8, 0.96);
  display: grid;
  place-items: center;
  padding: 3.5rem 1rem 3.5rem;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(96vw, 1600px);
  max-height: min(82vh, 1100px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-cap {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-align: center;
  max-width: 90vw;
}
.lightbox-close {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: 0.9rem;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, 0.6);
  border: 1px solid var(--hair);
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold-lift); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, 0.55);
  border: 1px solid var(--hair);
  color: var(--cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lightbox-nav:hover { border-color: var(--gold); color: var(--gold-lift); background: rgba(8, 8, 8, 0.8); }
.lightbox-nav.prev { left: max(0.6rem, 2vw); }
.lightbox-nav.next { right: max(0.6rem, 2vw); }
@media (max-width: 620px) {
  .lightbox { padding: 3.5rem 0.5rem 4rem; }
  .lightbox img { max-width: 100vw; max-height: 74vh; }
  .lightbox-nav { width: 46px; height: 46px; font-size: 1.6rem; }
}

/* ---------- reveals ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- narrow screens ---------- */

@media (max-width: 760px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed;
    inset: 0 0 auto;
    top: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: rgba(8, 8, 8, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    transform: translateY(-102%);
    transition: transform 0.35s var(--ease);
    z-index: -2;
  }
  body.nav-open .site-nav { transform: none; }
  .site-nav a {
    color: var(--cream);
    opacity: 1;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--hair-soft);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .site-nav .nav-cta {
    margin-top: 1rem;
    justify-content: center;
    border-color: var(--gold);
  }
  .coords { display: none; }
  .band { min-height: 165vh; }
  .band-head-wrap { height: 98vh; }
  .band-head { padding: 1.3rem 1.4rem 1.5rem; }
  .band-head .band-sub { font-size: 0.96rem; }
  .hero { padding-top: 7rem; }
  .footer { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cue-arrow { animation: none; }
  .gallery-item img, .site-nav { transition: none; }
}