/*
Theme Name: Rosedale Ramblin
Theme URI: https://www.rosedaleramblinband.com
Author: Omnine LLC
Description: Custom one page booking theme for The Rosedale Ramblin Band. Black, blood red, bone. Bebas Neue display, Inter body. Bandsintown powered shows, setlist pager, Past Shows poster archive.
Version: 1.47.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rosedale
*/

:root {
  --night: #050405;
  --deep:  #0C0807;
  --ox:    #2A0B09;
  --rust:  #B84828;
  --blood: #E2472E;
  --ember: #9E2B18;
  --bone:  #F3EBE0;
  --mute:  #C3B6A8;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--bone);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
/* clip is preferable because it leaves nothing to drag, but it is unsupported on
   older phone browsers, so hidden above stays as the floor for those. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--blood); outline-offset: 3px; }

.disp { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; letter-spacing: 0.03em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
section { padding: clamp(64px, 8vw, 108px) 0; scroll-margin-top: 85px; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ BUTTONS · rounded, dimensional, loud ============ */
.btn, .btn-o {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 16px 34px;
  border-radius: var(--radius);
  text-decoration: none; text-align: center; cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px; letter-spacing: 0.09em;
  transition: transform .14s, box-shadow .2s, filter .2s, background .2s, color .2s;
}
.btn {
  background: linear-gradient(180deg, var(--blood), var(--ember));
  color: #FFF8F0;
  border: 1px solid rgba(255, 200, 180, 0.35);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 26px rgba(226,71,46,0.32), 0 2px 6px rgba(0,0,0,0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 16px 38px rgba(226,71,46,0.45), 0 3px 8px rgba(0,0,0,0.5);
}
.btn-o {
  background: rgba(243,235,224,0.03);
  color: var(--bone);
  border: 2px solid rgba(243,235,224,0.55);
}
.btn-o:hover, .btn-o:focus-visible {
  border-color: var(--bone); background: rgba(243,235,224,0.1); transform: translateY(-2px);
}

/* ============ HEADER ============ */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 210; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 22px;
  background: rgba(5,4,5,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184,72,40,0.5);
}
.top .mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; letter-spacing: 0.05em;
  text-decoration: none; white-space: nowrap; color: var(--bone);
}
.top .mark:hover { color: var(--blood); }
.nav { display: flex; gap: 30px; }
.nav a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 0.08em; color: var(--bone);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 48px;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a:focus-visible { color: var(--blood); border-bottom-color: var(--blood); }
.top .btn { min-height: 48px; font-size: 19px; padding: 12px 26px; }

.burger {
  display: none; background: none; border: 2px solid rgba(243,235,224,0.5);
  border-radius: 10px;
  width: 56px; height: 50px; cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--bone); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 205;
  background: #050405;
  padding: 132px 24px 40px;
  overflow-y: auto; display: none;
}
.sheet.open { display: block; }
.sheet a.link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 70px; padding: 16px 0;
  border-bottom: 1px solid rgba(184,72,40,0.55);
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: 0.06em; color: var(--bone);
}
.sheet a.link:hover, .sheet a.link:focus-visible { color: var(--blood); }
.sheet a.link i { font-family: 'Inter', sans-serif; font-style: italic; font-size: 16px; color: var(--mute); text-align: right; }
.sheet .sheet-cta { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.sheet .sheet-cta .btn, .sheet .sheet-cta .btn-o { width: 100%; }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  --hero-photo: clamp(570px, 40vw, 820px);
  --hero-logo: min(560px, 84vw);
  /* The logo rides in the middle of the photo rather than pinned near the top,
     so as the photo grows the space opens above and below it evenly instead of
     stranding it against the header. Measured from below the fixed bar, since
     that strip is covered and does not read as space. */
  --hero-bar: 71px;
  --hero-top: max(125px, calc(var(--hero-bar) + (var(--hero-photo) - var(--hero-bar) - var(--hero-logo) * 0.611) / 2));
  padding: var(--hero-top) 20px 84px; scroll-margin-top: 0;
}
.hero .bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--night);
  background-image: url("assets/img/hero.jpg");
  background-size: contain; background-position: center top; background-repeat: no-repeat;
  filter: saturate(0.9);
}
.hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 84% 115% at 50% 62%, rgba(5,4,5,0.11), rgba(5,4,5,0.66) 88%),
    linear-gradient(180deg, rgba(5,4,5,0.12) 0%, rgba(5,4,5,0.08) 8%, rgba(5,4,5,0.44) 40%, rgba(5,4,5,0.19) 56%, rgba(5,4,5,0.41) 74%, var(--night) 100%);
}
@media (min-width: 1061px) { .hero { --hero-bar: 78px; } }
.hero .inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; }

/* Interactive parallax emblem */
.hero .stage { position: relative; z-index: 3; width: var(--hero-logo, min(560px, 84vw)); margin: 0 auto; perspective: 1000px; }
.hero .relic3d { position: relative; width: 100%; padding-top: 61.1%; transform-style: preserve-3d; transition: transform 0.12s ease-out; }
.hero .relic3d .layer { position: absolute; inset: 0; will-change: transform; transition: transform 0.12s ease-out; }
.hero .relic3d .layer img { position: absolute; top: 0; left: 0; width: 100%; display: block; }
.hero .relic3d .l-rose img { filter: drop-shadow(0 10px 26px rgba(0,0,0,0.75)) drop-shadow(0 0 22px rgba(226,71,46,0.5)); }
.hero .relic3d .l-wings img { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.7)); }
.hero .relic3d .l-text img { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.8)); }
.hero .relic-glow {
  position: absolute; width: 60%; height: 60%; left: 20%; top: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(226,71,46,0.4), transparent 60%);
  mix-blend-mode: screen; opacity: 0.5; filter: blur(6px);
  transition: transform 0.12s ease-out, opacity 0.2s;
}
.hero .stage.hot .relic-glow { opacity: 0.9; }

.hero-loc {
  margin: 26px auto 0; display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 0.2em; color: var(--bone);
}
.hero-loc .dot { color: var(--blood); }
.hero-loc b { color: var(--blood); font-weight: 400; }
/* Two lines on desktop: white line, red line. Locked four-line stack when
   narrow. The long line is 11.21x the font size in Bebas, which sets the caps. */
.hero h1 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(64px, 8.2vw, 100px);
  line-height: 1.0; letter-spacing: 0.02em;
  margin-top: 44px;
}
.hero h1 .ln { display: block; white-space: nowrap; }
.hero h1 .ln .w { white-space: nowrap; }
.hero h1 b.ln { color: var(--blood); font-weight: 400; }
@media (max-width: 1023px) {
  .hero h1 { font-size: clamp(38px, 11.4vw, 92px); line-height: 0.96; }
  .hero h1 .ln .w { display: block; }
}
.hero .creed {
  margin: 20px auto 0; max-width: 44ch;
  font-size: clamp(18px, 2.3vw, 23px); font-weight: 500; color: var(--bone);
}
.hero .cta { margin-top: 18px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Award seal. Under the buttons by default (mobile and scaled down),
   lifts to the top-right corner of the hero on large screens. */
.hero .seal {
  position: absolute; z-index: 6;
  top: 76px; right: clamp(14px, 4vw, 40px);
  width: clamp(92px, 13vw, 150px); height: clamp(92px, 13vw, 150px); margin: 0;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.7));
  transform: rotate(-7deg); transform-origin: top right;
  transition: transform 0.4s cubic-bezier(0.2,0.9,0.25,1), filter 0.4s; cursor: pointer;
}
.hero .seal:hover {
  transform: scale(1.5) rotate(-4deg);
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.85)) drop-shadow(0 0 34px rgba(226,71,46,0.6));
  z-index: 40;
}
.hero .seal svg { width: 100%; height: 100%; display: block; }
.hero .seal img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
@media (min-width: 1160px) {
  .hero .seal {
    position: absolute; top: 150px; right: clamp(24px, 4vw, 72px);
    margin: 0; width: 158px; height: 158px; transform-origin: top right;
  }
}

/* ============ RAIL ============ */
.rail {
  background: linear-gradient(180deg, #170605, var(--night) 80%);
  border-top: 2px solid rgba(226,71,46,0.55);
  border-bottom: 2px solid rgba(226,71,46,0.35);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rail .c { padding: 34px 18px; text-align: center; }
.rail .c + .c { border-left: 1px solid rgba(226,71,46,0.28); }
.rail .n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(27px, 3vw, 36px); letter-spacing: 0.05em; line-height: 1.05;
  color: var(--blood);
}
.rail .l { margin-top: 7px; font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }

/* ============ SONG TICKER ============ */
.songband {
  display: flex; align-items: stretch;
  background: var(--deep);
  border-bottom: 2px solid rgba(226,71,46,0.35);
}
.songband .tag {
  flex: none; display: flex; align-items: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone);
  background: var(--ox); padding: 0 22px;
}
.songband .ticker {
  flex: 1; position: relative; overflow: hidden; white-space: nowrap; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.songband .ticker.dragging { cursor: grabbing; }
.songband .track { display: inline-flex; align-items: center; will-change: transform; }
.songband .song { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.04em; color: var(--bone); padding: 0 4px; -webkit-user-drag: none; }
.songband .sep-rose {
  display: inline-block; height: 15px; width: 34px; margin: 0 15px; position: relative; top: 2px;
  background: url('assets/img/rose-sep.png') center / contain no-repeat;
  -webkit-user-drag: none;
}

/* ============ SECTION HEADS ============ */
.kick {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 0.16em; color: var(--blood);
}
.kick::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--blood); }
h2.h {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(40px, 6.4vw, 76px); line-height: 0.98; letter-spacing: 0.02em;
  margin-top: 14px;
}
h2.h b { color: var(--blood); font-weight: 400; }
.head { margin-bottom: 40px; }
.head.center { text-align: center; }
.head.center .kick::before { display: none; }

/* ============ SHOWS ============ */
#shows { background: var(--night); }
.bit-shell { max-width: 940px; margin: 0 auto; }
.bit-note { margin-top: 22px; text-align: center; font-size: 16px; color: var(--mute); }
.bit-note a { color: var(--blood); font-weight: 600; }
.shows-empty { text-align: center; padding: 20px 0; }
.shows-empty .empty-line { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.02em; color: var(--bone); }
.shows-empty .bit-note { margin-top: 8px; }
.shows-empty .empty-cta { margin-top: 24px; display: flex; justify-content: center; }

/* calendar chooser modal */
.cal-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cal-modal[hidden] { display: none; }
.cal-backdrop { position: absolute; inset: 0; background: rgba(5,4,5,0.74); backdrop-filter: blur(4px); }
.cal-sheet { position: relative; width: 100%; max-width: 384px; background: linear-gradient(180deg, #161010, #0b0807); border: 1px solid rgba(243,235,224,0.14); border-radius: 18px; padding: 26px 24px 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: cal-pop 0.2s ease; }
@keyframes cal-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.cal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(243,235,224,0.16); background: transparent; color: var(--mute); font-size: 20px; line-height: 1; cursor: pointer; transition: 0.15s; }
.cal-close:hover { border-color: var(--blood); color: var(--blood); }
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 30px; }
.cal-head-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(226,71,46,0.2), rgba(158,43,24,0.12)); border: 1px solid rgba(226,71,46,0.3); }
.cal-head-ic .calic { width: 21px; height: 21px; color: var(--blood); }
.cal-head-t { font-family: 'Bebas Neue', sans-serif; font-size: 23px; letter-spacing: 0.02em; color: var(--bone); line-height: 1.05; }
.cal-opts { display: flex; flex-direction: column; gap: 9px; }
.cal-opt { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid rgba(243,235,224,0.14); border-radius: 12px; color: var(--bone); text-decoration: none; transition: 0.15s; }
.cal-opt:hover { border-color: var(--blood); background: rgba(226,71,46,0.08); }
.cal-opt[hidden] { display: none; }
.cal-opt-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--bone); }
.cal-opt-ic svg { width: 23px; height: 23px; }
.cal-opt > span:nth-child(2) { flex: 1; font-weight: 600; font-size: 15.5px; }
.cal-opt-go { color: var(--mute); font-size: 19px; line-height: 1; }
.cal-opt:hover .cal-opt-go { color: var(--blood); }
.cal-foot { margin: 16px 2px 0; text-align: center; font-size: 12.5px; color: var(--mute); }
body.cal-open { overflow: hidden; }

/* ============ UPCOMING SHOWS (custom, Bandsintown-fed) ============ */
.shows-list { max-width: 1000px; margin: 0 auto; }
.calic { width: 16px; height: 16px; flex: none; }

.shows-list .feat {
  position: relative; overflow: hidden;
  display: flex; gap: 30px; align-items: center; justify-content: space-between;
  background: linear-gradient(120deg, #170908, #0c0706);
  border: 1px solid rgba(226,71,46,0.45); border-radius: 18px;
  padding: 40px 44px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.shows-list .feat::after {
  content: ""; position: absolute; top: -40%; right: -8%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(226,71,46,0.22), transparent 62%); pointer-events: none;
}
.feat-l { position: relative; z-index: 1; }
.feat-tag { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 0.2em; color: var(--blood); }
.feat-date { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.06em; color: var(--mute); margin-top: 8px; }
.feat-ven { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 5.5vw, 68px); line-height: 0.98; letter-spacing: 0.01em; color: var(--bone); margin: 2px 0 6px; }
.feat-meta { font-size: 16px; color: var(--mute); }
.feat-cta { display: flex; gap: 14px; margin-top: 26px; }
.feat-badge {
  position: relative; z-index: 1; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; height: 150px; border: 2px solid var(--blood); border-radius: 16px; background: rgba(42,11,9,0.5);
}
.feat-badge span { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.1em; color: var(--blood); }
.feat-badge b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 70px; line-height: 0.8; color: var(--bone); }
.feat-badge i { font-style: normal; font-size: 13px; letter-spacing: 0.14em; color: var(--mute); margin-top: 6px; }

.minis { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.mini {
  display: flex; align-items: center; gap: 22px;
  background: var(--deep); border: 1px solid rgba(243,235,224,0.08); border-radius: 12px;
  padding: 18px 24px; transition: border-color .2s, transform .15s;
}
.mini:hover { border-color: rgba(226,71,46,0.5); transform: translateX(3px); }
.mtile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 10px; background: var(--ox); }
.mmo { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 0.08em; color: var(--blood); }
.mday { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 0.8; color: var(--bone); }
.minfo { flex: 1; min-width: 0; }
.mven { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.02em; color: var(--bone); }
.mmeta { font-size: 14px; color: var(--mute); margin-top: 2px; }
.mini-cta { flex: none; display: flex; gap: 10px; align-items: center; }

.btn.mbtn, .mbtn, .mbtn-o {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 0.06em;
  padding: 10px 20px; border-radius: 9px; text-decoration: none; transition: .2s;
}
.mbtn { color: #FFF8F0; background: linear-gradient(180deg, var(--blood), var(--ember)); box-shadow: 0 6px 16px rgba(226,71,46,0.34); }
.mbtn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(226,71,46,0.5); }
.mbtn-o { color: var(--bone); border: 1px solid rgba(243,235,224,0.32); }
.mbtn-o:hover { border-color: var(--blood); color: var(--blood); }
.feat-cta .btn-o .calic, .feat-cta .btn .calic { width: 17px; height: 17px; }

.shows-sub { margin-top: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.shows-sub-line { font-size: 15px; color: var(--mute); max-width: 44ch; line-height: 1.5; }
.shows-sub .btn { padding-left: 26px; padding-right: 26px; }

@media (max-width: 720px) {
  .shows-list .feat { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .feat-badge { display: none; }
  .feat-cta { flex-direction: column; width: 100%; }
  .feat-cta .btn, .feat-cta .btn-o { width: 100%; }
  .mini { flex-wrap: wrap; gap: 14px; }
  .minfo { flex: 1 1 100%; }
  .mini-cta { width: 100%; }
  .mbtn, .mbtn-o { flex: 1; justify-content: center; }
}

/* Bandsintown widget v3 injects DOM into the page, so it obeys our CSS.
   Buttons become the site's buttons. Rows become the site's rows. */
.bit-shell .bit-widget { font-family: 'Inter', sans-serif !important; }
.bit-shell .bit-widget .bit-upcoming-events-show-all-button,
.bit-shell .bit-widget .bit-play-my-city-button,
.bit-shell .bit-widget .bit-follow-section-block button,
.bit-shell .bit-widget button,
.bit-shell .bit-widget .bit-button {
  background: linear-gradient(180deg, var(--blood), var(--ember)) !important;
  color: #FFF8F0 !important;
  border: 1px solid rgba(255,200,180,0.35) !important;
  border-radius: var(--radius) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 17px !important;
  letter-spacing: 0.08em !important;
  min-height: 48px !important;
  padding: 10px 24px !important;
  box-shadow: 0 8px 20px rgba(226,71,46,0.3) !important;
  text-transform: uppercase !important;
}
.bit-shell .bit-widget .bit-event {
  border-bottom: 1px solid rgba(243,235,224,0.14) !important;
  padding: 18px 0 !important;
}
.bit-shell .bit-widget .bit-date,
.bit-shell .bit-widget .bit-event-date {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 0.05em !important;
  color: var(--blood) !important;
}
.bit-shell .bit-widget .bit-venue { font-weight: 700 !important; font-size: 18px !important; color: var(--bone) !important; }
.bit-shell .bit-widget .bit-location { color: var(--mute) !important; font-size: 16px !important; }
.bit-shell .bit-widget .bit-follow-section-block,
.bit-shell .bit-widget .bit-top-track-button-row {
  margin-bottom: 8px !important;
}

/* ============ LISTEN · the real video wall ============ */
#listen { background: linear-gradient(180deg, var(--night), #0A0605 60%, var(--night)); }
/* featured player */
.vid.feat { max-width: 900px; margin: 0 auto 34px; display: block; }
.vid.feat .thumb { aspect-ratio: 16 / 9; }
.vid.feat .play { width: 86px; height: 86px; font-size: 28px; }
.vid.feat .cap { text-align: center; font-size: 30px; }
.feat-go { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.vid.feat .feat-frame {
  aspect-ratio: 16 / 9; width: 100%; background: #000;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(226,71,46,0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
}
.vid.feat .feat-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.feat-kick {
  display: block; font-family: 'Bebas Neue', sans-serif;
  font-size: 17px; letter-spacing: 0.18em; color: var(--blood);
}

/* the reel */
.reel-shell { position: relative; }
.reel {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 6px 2px 14px;
  scrollbar-width: thin; scrollbar-color: var(--blood) transparent;
}
.reel::-webkit-scrollbar { height: 8px; }
.reel::-webkit-scrollbar-thumb { background: var(--blood); border-radius: 4px; }
.reel::-webkit-scrollbar-track { background: rgba(243,235,224,0.08); border-radius: 4px; }
.reel .vid { flex: 0 0 300px; scroll-snap-align: start; }
.reel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--blood), var(--ember));
  border: 1px solid rgba(255,200,180,0.4);
  color: #FFF8F0; font-size: 26px; line-height: 1;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
}
.reel-btn:hover { filter: brightness(1.1); }
.reel-btn.prev { left: -12px; }
.reel-btn.next { right: -12px; }
.vid {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: none; border: 0; text-align: left;
  transition: transform .16s;
}
.vid:hover, .vid:focus-visible { transform: translateY(-5px); }
.vid .thumb {
  display: flex; align-items: center; justify-content: center;
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center;
  border: 1px solid rgba(226,71,46,0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
  transition: border-color .2s, box-shadow .2s;
}
.vid .thumb .thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
.vid .thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,4,5,0.1), rgba(5,4,5,0.6));
  transition: background .2s;
}
.vid:hover .thumb, .vid:focus-visible .thumb {
  border-color: var(--blood);
  box-shadow: 0 26px 58px rgba(0,0,0,0.7), 0 0 40px rgba(226,71,46,0.28);
}
.vid:hover .thumb::before { background: linear-gradient(180deg, rgba(5,4,5,0.05), rgba(5,4,5,0.45)); }
.vid .play {
  position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--blood), var(--ember));
  border: 1px solid rgba(255,200,180,0.4);
  box-shadow: 0 8px 24px rgba(226,71,46,0.45);
  transition: transform .16s;
}
.vid .play svg { width: 40%; height: 40%; display: block; margin-left: 3px; }
.vid:hover .play { transform: scale(1.08); }
.vid .cap {
  display: block; margin-top: 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 0.04em; color: var(--bone);
}
.vid:hover .cap { color: var(--blood); }
.vid-note { margin-top: 26px; font-size: 16px; color: var(--mute); }

/* lightbox */
.lightbox {
  overscroll-behavior: contain;
  position: fixed; inset: 0; z-index: 500;
  background: rgba(5,4,5,0.96);
  display: flex; align-items: center; justify-content: center;
  padding: 70px 20px 20px;
}
.lightbox[hidden] { display: none; }
.lb-frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; }
.lb-frame #lb-slot { width: 100%; height: 100%; }
.lb-frame iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); display: block; }
/* poster mode: no fixed 16:9 box, let the image set its own portrait shape */
.lightbox.is-image .lb-frame {
  width: auto; height: auto; aspect-ratio: auto;
  max-width: min(640px, 90vw); max-height: 86vh;
}
.lightbox.is-image .lb-frame img {
  display: block; width: auto; height: auto;
  max-width: min(640px, 90vw); max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}
.lb-close {
  position: absolute; top: 18px; right: 20px;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--blood), var(--ember));
  border: 1px solid rgba(255,200,180,0.4);
  color: #FFF8F0; font-size: 22px; line-height: 1;
  box-shadow: 0 8px 24px rgba(226,71,46,0.4);
}
.lb-close:hover { filter: brightness(1.1); }

/* ============ BAND ============ */
#band { background: linear-gradient(180deg, var(--night), #0A0605 55%, var(--night)); }
#band .lede { max-width: 66ch; font-size: clamp(19px, 2.2vw, 23px); color: var(--bone); }
#band .lede + .lede { margin-top: 16px; color: var(--mute); }
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1040px; margin: 44px auto 0;
}
.gallery img {
  width: 100%; display: block; object-fit: cover; aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
}

/* ============ SETLIST ============ */
#setlist .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.set-tab {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px; letter-spacing: 0.08em;
  color: var(--mute); background: transparent;
  border: 2px solid rgba(243,235,224,0.3);
  border-radius: 999px;
  min-height: 52px; padding: 10px 26px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.set-tab:hover { color: var(--bone); border-color: rgba(243,235,224,0.6); }
.set-tab[aria-selected="true"] {
  color: #FFF8F0; border-color: var(--blood);
  background: linear-gradient(180deg, var(--blood), var(--ember));
  box-shadow: 0 8px 22px rgba(226,71,46,0.35);
}
.set-panel { display: none; }
.set-panel.on { display: block; }
.songs { columns: 2; column-gap: 64px; counter-reset: n; }
.songs li {
  counter-increment: n; list-style: none; break-inside: avoid;
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid rgba(243,235,224,0.14);
}
.songs li::before {
  content: counter(n, decimal-leading-zero);
  font-family: 'Bebas Neue', sans-serif; font-size: 17px;
  color: var(--blood); width: 34px; flex: none;
}
.songs .s { font-family: 'Bebas Neue', sans-serif; font-size: 23px; letter-spacing: 0.04em; }
.songs .a { margin-left: auto; font-size: 16px; color: var(--mute); white-space: nowrap; }
.set-foot { margin-top: 28px; font-size: 16px; color: var(--mute); }

/* ============ BOOKING DETAILS ============ */
#booking-details { background: linear-gradient(180deg, var(--night), #0B0706); }
.spec { max-width: 900px; }
.spec .r {
  display: grid; grid-template-columns: 210px 1fr; gap: 10px;
  padding: 20px 0; border-bottom: 1px solid rgba(243,235,224,0.15);
  align-items: baseline;
}
.spec .r:last-child { border-bottom: none; }
.spec .k {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px; letter-spacing: 0.09em; color: var(--blood);
}
.spec .v { font-size: 19px; color: var(--bone); overflow-wrap: anywhere; }
.spec-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ============ MERCH + PAST SHOWS ============ */
#merch .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#merch .duo.solo { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.mega {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 34px 32px;
  text-decoration: none;
  background-size: cover; background-position: center;
  box-shadow: 0 26px 60px rgba(0,0,0,0.6);
  transition: transform .18s, box-shadow .2s;
}
.mega::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,5,0.15) 30%, rgba(5,4,5,0.9));
  transition: background .2s;
}
.mega:hover, .mega:focus-visible { transform: translateY(-5px); box-shadow: 0 34px 74px rgba(0,0,0,0.7); }
.mega > * { position: relative; }
.mega .t { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 4.4vw, 48px); letter-spacing: 0.04em; color: var(--bone); line-height: 1; }
.mega .d { font-size: 17px; color: var(--mute); max-width: 40ch; }
.mega .go {
  margin-top: 14px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px;
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.08em;
  color: #FFF8F0; padding: 11px 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--blood), var(--ember));
  box-shadow: 0 8px 22px rgba(226,71,46,0.35);
}
.mega.store { background: linear-gradient(165deg, #1A0806, var(--ox) 55%, #170605); }
.mega.store::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(226,71,46,0.14), transparent 65%); }
.mega .products {
  display: flex; gap: 16px; justify-content: center; align-items: center;
  margin-bottom: auto; padding: 6px 0 26px;
}
.mega .prod {
  width: 31%; max-width: 168px; aspect-ratio: 1 / 1;
  border-radius: 14px;
  background-color: #FFFFFF; background-size: cover; background-position: center;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
  transform: rotate(-3deg);
  transition: transform .18s;
}
.mega .prod.mid { transform: rotate(2deg) translateY(-8px); }
.mega:hover .prod { transform: rotate(-1deg) translateY(-4px); }
.mega:hover .prod.mid { transform: rotate(1deg) translateY(-12px); }

/* ============ BOOK ============ */
#book {
  text-align: center;
  background: radial-gradient(ellipse 60% 46% at 50% 100%, rgba(42,11,9,0.9), transparent 74%), var(--night);
}
#book .phone {
  display: inline-block; margin-top: 18px; text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 9.4vw, 104px); letter-spacing: 0.04em; color: var(--bone);
  text-shadow: 0 0 34px rgba(226,71,46,0.3);
}
#book .phone:hover, #book .phone:focus-visible { color: var(--blood); }
#book .whom { font-size: 19px; color: var(--mute); }
#book .em { display: inline-block; margin-top: 18px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; color: var(--blood); overflow-wrap: anywhere; }
#book .cta { margin-top: 42px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Follow us */
#follow {
  text-align: center;
  background: linear-gradient(180deg, var(--night), #0B0706);
}
#follow .head { margin-bottom: 26px; }
#follow .follow-note {
  max-width: 620px; margin: 0 auto;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.65; color: var(--mute);
}
#follow .follow-btns { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
#follow .follow-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 30px; border-radius: var(--radius);
  font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em;
  color: var(--bone); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(184,72,40,0.55);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#follow .follow-btn:hover, #follow .follow-btn:focus-visible {
  background: linear-gradient(180deg, var(--blood), var(--ember));
  border-color: rgba(255,200,180,0.4); color: #FFF8F0; transform: translateY(-2px);
}
#follow .follow-ic { display: inline-flex; }
#follow .follow-ic svg { width: 26px; height: 26px; display: block; }
@media (prefers-reduced-motion: reduce) {
  #follow .follow-btn { transition: none; }
  #follow .follow-btn:hover, #follow .follow-btn:focus-visible { transform: none; }
}

/* ============ FOOTER ============ */
.site-foot {
  border-top: 1px solid rgba(226,71,46,0.4);
  padding: 34px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.site-foot .c { font-size: 15px; color: var(--mute); }
.site-foot .s { display: flex; gap: 24px; }
.site-foot .s a {
  font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 0.08em;
  color: var(--bone); text-decoration: none;
}
.site-foot .s a:hover { color: var(--blood); }
.site-foot .by { flex-basis: 100%; text-align: center; margin-top: 6px; }
.site-foot .by a { font-size: 13px; color: var(--mute); opacity: 0.75; letter-spacing: 0.02em; }
.site-foot .by a:hover { color: var(--blood); opacity: 1; }

/* ============ PAST SHOWS PAGE ============ */
.page-hero {
  position: relative; overflow: hidden;
  min-height: 46svh; display: flex; align-items: flex-end;
  padding: 170px 0 50px;
  background-size: cover; background-position: center 40%;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,5,0.8), rgba(5,4,5,0.45) 45%, var(--night));
}
.page-hero .wrap { position: relative; }
.page-hero h1 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(52px, 9vw, 110px); line-height: 0.95; letter-spacing: 0.02em;
}
.page-hero p { margin-top: 12px; max-width: 62ch; font-size: 19px; color: var(--mute); }

.poster-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5.6vw, 64px); letter-spacing: 0.05em; color: var(--blood);
  margin: 56px 0 22px;
  display: flex; align-items: center; gap: 20px;
}
.poster-year::after { content: ""; flex: 1; height: 2px; background: rgba(226,71,46,0.4); border-radius: 2px; }
.poster-year.more { color: var(--mute); }
.poster-year.more::after { background: rgba(243,235,224,0.2); }
.poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.poster-grid .poster {
  display: block; width: 100%; padding: 0; margin: 0; cursor: pointer;
  background: var(--deep); border: 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  transition: transform .16s, box-shadow .2s;
}
.poster-grid .poster:hover, .poster-grid .poster:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,0,0,0.65); }
.poster-grid img { display: block; width: 100%; height: auto; }
.poster-wall .wp-block-gallery { gap: 18px; }
.poster-wall .wp-block-image img, .poster-wall .wp-block-gallery img { border-radius: 10px; }
.back-home { margin: 64px 0 20px; text-align: center; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: flex; }
  .top .btn { display: none; }
}
/* Hero layout. The whole-band photo cannot fit a window shape without a
   letterbox tail through the logo, so the photo sits behind the logo up top and
   a solid panel begins exactly where the logo ends and fills to the bottom,
   keeping the headline on clean dark. The panel is a real block tied to content
   flow, not a positioned gradient, so it cannot drift as the hero height
   changes. Deliberately not behind a width query: browser zoom changes the
   reported viewport width, and gating this made the panel disappear whenever a
   visitor zoomed out. One layout at every width instead. */
.hero { padding-bottom: 0; }
/* The panel begins exactly where the photo ends, at every width. The gap under
   the logo is whatever is left over, so the band is never cropped by the black
   no matter how wide the window gets or how far a visitor zooms out. */
.hero .stage {
  margin-bottom: calc(var(--hero-photo) - var(--hero-top) - var(--hero-logo) * 0.611);
}
.hero .bg {
  top: 0; bottom: auto; height: var(--hero-photo);
  background-size: cover; background-position: center 40%;
}
.hero .bg::after {
  background:
    radial-gradient(ellipse 77% 67% at 50% 41%, rgba(5,4,5,0.15), rgba(5,4,5,0.57) 88%),
    linear-gradient(180deg, rgba(5,4,5,0.42) 0%, rgba(5,4,5,0.17) 30%, rgba(5,4,5,0.33) 70%, rgba(5,4,5,0.51) 100%);
}
.hero .inner { flex: 1; display: flex; flex-direction: column; }
.hero-panel {
  position: relative; flex: 1 1 auto;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: 34px 20px 64px;
  background: var(--night);
}
.hero-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -96px; height: 96px;
  background: linear-gradient(180deg, rgba(5,4,5,0) 0%, var(--night) 100%);
  pointer-events: none;
}
.hero-panel::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%);
  width: 480px; height: 200px; max-width: 82vw; pointer-events: none;
  background: radial-gradient(ellipse, rgba(226,71,46,0.07), transparent 72%);
  filter: blur(14px);
}
@media (max-width: 900px) {
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail .c { border-left: none !important; }
  .rail .c:nth-child(odd) { border-right: 1px solid rgba(226,71,46,0.28); }
  .rail .c:nth-child(-n+2) { border-bottom: 1px solid rgba(226,71,46,0.28); }
  .shots { grid-template-columns: 1fr 1fr; }
  .songs { columns: 1; }
  .spec .r { grid-template-columns: 1fr; gap: 2px; }
  #merch .duo { grid-template-columns: 1fr; }
  .poster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vids { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .songband .song { font-size: 24px; }
  .songband .tag { padding: 0 15px; font-size: 13px; }
  .lightbox { padding: 66px 14px 14px; }
  .hero { --hero-top: 105px; }
  .hero .stage { margin-bottom: 0; }
  .hero h1 { margin-top: 0; }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .shots { grid-template-columns: 1fr; }
  .shots .ph { aspect-ratio: 4 / 3; }
  .songs .a { display: none; }
  #book .cta { flex-direction: column; align-items: stretch; }
  .spec-cta { flex-direction: column; align-items: stretch; }
  .spec-cta .btn, .spec-cta .btn-o { width: 100%; }

}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}