/* THE SPEAKERS — Official Website */
:root {
  --bg: #050505;
  --bg-2: #060606;
  --text: #e8e8e8;
  --text-dim: #bdbdbd;
  --text-mute: #8f8f8f;
  --red: #e03131;
  --border: rgba(255, 255, 255, 0.25);
  /* mockups set every large title in a light geometric sans; body stays mono */
  --display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red); }
::placeholder { color: #8a8a8a; letter-spacing: 0.15em; font-family: 'IBM Plex Mono', monospace; }
input, textarea, button { font-family: 'IBM Plex Mono', monospace; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Chrome: nav, title, socials ---------- */
.nav {
  position: fixed; left: 0; top: 0; bottom: 0; width: 200px; z-index: 50;
  display: flex; flex-direction: column; padding: 28px 0 0 36px; pointer-events: none;
}
/* readability scrims — hero photos run bright behind the chrome */
.nav::before {
  content: ''; position: fixed; left: 0; top: 0; bottom: 0; width: 300px; z-index: -1;
  background: linear-gradient(to right, rgba(4,4,4,0.86), rgba(4,4,4,0.45) 55%, rgba(4,4,4,0));
  pointer-events: none;
}
.nav__logo { width: 84px; height: 84px; object-fit: contain; cursor: pointer; pointer-events: auto; }
.nav__toggle { display: none; }
.nav__items { display: flex; flex-direction: column; gap: 29px; margin-top: 62px; }
.nav__item { display: flex; align-items: center; gap: 10px; cursor: pointer; pointer-events: auto; user-select: none; }
.nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: 0; flex: none; margin-left: -16px; }
.nav__label { font-size: 14px; letter-spacing: 0.3em; color: #c6c6c6; transition: all 0.2s; }
.nav__item:hover .nav__label { color: #fff; letter-spacing: 0.32em; }
.nav__item.is-active .nav__dot { opacity: 1; }
.nav__item.is-active .nav__label { color: #fff; }

.site-title {
  position: fixed; top: 38px; left: 0; right: 0; text-align: center; z-index: 40; pointer-events: none;
}
.site-title::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 165px; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(4,4,4,0.88) 0, rgba(4,4,4,0.8) 60px, rgba(4,4,4,0.45) 110px, rgba(4,4,4,0) 100%);
  pointer-events: none;
}
.site-title span {
  font-family: var(--display);
  font-size: 43px; letter-spacing: 0.6em; color: #f2f2f2; font-weight: 200;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); padding-left: 0.62em;
}
body[data-section="home"] .site-title { display: none; }

.socials::before {
  content: ''; position: fixed; right: 0; top: 0; bottom: 0; width: 170px; z-index: -1;
  background: linear-gradient(to left, rgba(4,4,4,0.72), rgba(4,4,4,0));
  pointer-events: none;
}
.socials {
  position: fixed; right: 32px; top: 150px; z-index: 50;
  display: flex; flex-direction: column; gap: 27px; align-items: center;
}
.socials a { opacity: 0.95; transition: all 0.2s; display: block; line-height: 0; }
.socials a:hover { opacity: 1; transform: scale(1.15); }

/* ---------- Sections ---------- */
.section {
  display: none;
  padding-left: 200px; padding-right: 96px;
  position: relative; min-height: 100vh;
  animation: fadeIn 0.5s ease;
}
.section.is-active { display: block; }
.section__overlay { position: absolute; inset: 0; }
.section__inner { position: relative; margin: 0 auto; }

.heading-red { font-family: var(--display); font-size: 27px; letter-spacing: 0.55em; color: var(--red); font-weight: 300; padding-left: 0.55em; }
.rule-red { width: 90px; height: 1px; background: var(--red); margin: 24px auto 0; }
.btn {
  display: inline-block; border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 12px 22px; font-size: 11px; letter-spacing: 0.28em; color: var(--text);
  transition: all 0.25s; cursor: pointer; background: transparent;
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* HOME */
#home {
  /* artwork bottom sits at 70px + 0.88214 x 120vh; leave a little air under it */
  min-height: calc(70px + 108vh);
  background-color: #030303;
  background-image: url('../assets/img/cover-csp.jpg');
  background-repeat: no-repeat;
  background-size: auto 120vh;
  background-position: center calc(70px - 14.14vh);
}
#home .section__overlay { background: radial-gradient(ellipse at center, rgba(3,3,3,0) 40%, rgba(3,3,3,0.85) 100%); }

/* MUSIC */
#music { background: var(--bg-2) url('../assets/img/bg-music.jpg') center / cover no-repeat; }
#music .section__overlay { background: rgba(4, 4, 4, 0.82); }
#music .section__inner { max-width: 1040px; padding: 200px 40px 150px; text-align: center; }
.music__sub { font-size: 14px; letter-spacing: 0.45em; color: #d8d8d8; margin-top: 34px; padding-left: 0.45em; }
.albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.album { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.album img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.album__name { font-size: 14px; letter-spacing: 0.3em; color: #f0f0f0; margin-top: 8px; line-height: 1.7; min-height: 3.4em; }
.album__year { font-size: 12px; letter-spacing: 0.35em; color: #9a9a9a; }

/* VIDEOS */
#videos { min-height: 120vh; background: var(--bg-2); }
.videos__hero {
  height: 520px; position: relative; margin: 0 -96px 0 -200px;
  background: #000 url('../assets/img/bg-videos-hero.jpg') center 28% / cover no-repeat;
}
.videos__hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0.1) 45%, rgba(6,6,6,0.96) 100%);
}
.videos__dim {
  position: absolute; inset: 460px 0 0 0;
  background:
    linear-gradient(to bottom, rgba(6,6,6,0.72) 0, rgba(6,6,6,0.88) 420px, rgba(6,6,6,0.98) 900px, #060606 1250px),
    url('../assets/img/bg-videos-seats.jpg') center top / 1600px auto no-repeat;
}
#videos .section__inner { max-width: 1160px; margin: -60px auto 0; padding: 0 40px 220px; text-align: center; }
.tabs { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.tab + .tab::before {
  content: '\2022'; color: #6a6a6a; margin-right: 20px; font-size: 11px;
  display: inline-block; vertical-align: middle;
}
.tab {
  font-size: 12px; letter-spacing: 0.3em; cursor: pointer; color: #c2c2c2;
  padding-bottom: 6px; border-bottom: 1px solid transparent; transition: all 0.2s; user-select: none;
}
.tab:hover { color: #fff; }
.tab.is-active { color: var(--red); border-bottom-color: var(--red); }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; margin-top: 52px; }
.video-card { cursor: pointer; text-align: left; }
.video-card:hover { opacity: 0.85; }
.video-card__thumb {
  position: relative; border: 1px solid rgba(255, 255, 255, 0.18);
  aspect-ratio: 16 / 9; overflow: hidden;
}
.video-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.85) contrast(1.05);
}
.video-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.video-card__play::before {
  content: ''; width: 0; height: 0;
  border-left: 22px solid var(--red);
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.video-card__title { font-size: 13px; letter-spacing: 0.22em; color: #f0f0f0; margin-top: 14px; line-height: 1.5; min-height: 2.9em; }
/* Two of the YouTube titles wrap to a second line. The min-height above keeps the
   category labels on one baseline, but leaves air under the short titles. Where
   subgrid exists, let the row itself do the aligning and drop the reserved space. */
@supports (grid-template-rows: subgrid) {
  .video-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .video-card__title { min-height: 0; align-self: start; }
}
.video-card__cat { font-size: 10px; letter-spacing: 0.28em; color: var(--text-mute); margin-top: 6px; }
.videos__empty { margin-top: 70px; font-size: 13px; letter-spacing: 0.3em; color: #9a9a9a; }

/* LIVE */
#live { background: var(--bg) url('../assets/img/bg-live.jpg') center / cover no-repeat; }
#live .section__overlay { background: rgba(4, 4, 4, 0.72); }
#live .section__inner { max-width: 820px; padding: 230px 40px 230px; text-align: center; }
.live__title { font-family: var(--display); font-size: 76px; letter-spacing: 0.42em; color: #f5f5f5; font-weight: 200; padding-left: 0.42em; }
.live__rule { width: 64px; height: 2px; background: var(--red); margin: 26px auto 0; }
.live__lede { font-size: 13px; letter-spacing: 0.18em; color: #cfcfcf; margin-top: 34px; line-height: 2.1; }
.shows { margin-top: 80px; text-align: left; }
.shows__label { font-size: 13px; letter-spacing: 0.3em; color: var(--red); }
.shows__empty { border-top: 1px solid var(--border); margin-top: 18px; padding: 56px 10px; text-align: center; }
.shows__empty-title { font-family: var(--display); font-size: 24px; letter-spacing: 0.32em; color: var(--text); font-weight: 300; padding-left: 0.32em; }
.shows__empty-sub { font-size: 12px; letter-spacing: 0.22em; color: #9a9a9a; margin-top: 18px; line-height: 2; }
.shows__cta { margin-top: 34px; }
.shows__bottom-rule { border-top: 1px solid var(--border); }

/* BAND */
#band { background: var(--bg-2); }
.band__hero {
  height: 680px; position: relative; margin: 0 -96px 0 -200px;
  background: #000 url('../assets/img/bg-band-hero.jpg') center 30% / cover no-repeat;
}
.band__hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,6,6,0.4) 0%, rgba(6,6,6,0.15) 40%, rgba(6,6,6,1) 100%);
}
#band .section__inner { max-width: 760px; margin: -90px auto 0; padding: 0 40px 210px; }
.band__head { text-align: center; }
.band__kicker { font-size: 13px; letter-spacing: 0.4em; color: var(--red); }
.band__title { font-family: var(--display); font-size: 36px; letter-spacing: 0.38em; color: #f2f2f2; margin-top: 18px; font-weight: 200; padding-left: 0.38em; }
.band__rule { width: 120px; height: 1px; background: var(--red); margin: 22px auto 0; }
.band__bio {
  font-size: 13.5px; line-height: 2.15; letter-spacing: 0.06em; color: #d6d6d6;
  margin-top: 46px; display: flex; flex-direction: column; gap: 26px;
}
.band__bio p { margin: 0; }
.band__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 64px; }
.band__photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.12); }
.band__photo-wide { width: 100%; margin-top: 22px; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.12); }

/* MERCH */
#merch { background: #0a0505 url('../assets/img/bg-merch.jpg') center / cover no-repeat; }
#merch .section__overlay { background: rgba(8, 4, 4, 0.8); }
#merch .section__inner { max-width: 1100px; padding: 200px 40px 150px; text-align: center; }
.merch__title { font-family: var(--display); font-size: 32px; letter-spacing: 0.48em; color: #f2f2f2; font-weight: 200; padding-left: 0.48em; }
.merch__lede { font-size: 12.5px; letter-spacing: 0.2em; color: #cfcfcf; margin-top: 28px; line-height: 2.1; }
.merch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 34px; margin-top: 64px; }
.product { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.product__frame {
  width: 100%; aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.055);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: background 0.25s;
}
.product:hover .product__frame { background: rgba(255, 255, 255, 0.085); }
.product__frame img {
  max-width: 84%; max-height: 90%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
.product__frame, .product__name { cursor: pointer; }
.product__name { font-size: 12.5px; letter-spacing: 0.26em; color: #f0f0f0; margin-top: 6px; line-height: 1.9; min-height: 3.8em; transition: color 0.2s; }
.product__name:hover { color: #fff; }
.product__price { font-size: 12px; letter-spacing: 0.2em; color: var(--text-dim); }
.product .btn { padding: 11px 20px; font-size: 10.5px; letter-spacing: 0.26em; }

/* NEWS / NEWSLETTER */
#news {
  min-height: 130vh;
  background: var(--bg-2) url('../assets/img/bg-news.jpg') center top / cover no-repeat;
}
#news .section__overlay {
  /* the copy lands over the middle figure; sink a soft pool behind it */
  background:
    radial-gradient(ellipse 700px 400px at 50% 38%, rgba(4, 4, 4, 0.7), rgba(4, 4, 4, 0) 72%),
    rgba(5, 5, 5, 0.6);
}
#news .section__inner { max-width: 640px; padding: 300px 40px 260px; text-align: center; }
.news__kicker { font-size: 13px; letter-spacing: 0.45em; color: #d8d8d8; }
.news__title { font-family: var(--display); font-size: 48px; letter-spacing: 0.34em; color: #f5f5f5; margin-top: 26px; font-weight: 200; padding-left: 0.34em; }
.news__rule {
  width: 220px; height: 1px; margin: 20px auto 0;
  background: linear-gradient(to right, transparent, var(--red) 30%, var(--red) 70%, transparent);
}
.news__lede { font-size: 12.5px; letter-spacing: 0.16em; color: #d0d0d0; margin-top: 32px; line-height: 2.2; }
.newsletter { display: flex; margin-top: 48px; border: 1px solid rgba(255, 255, 255, 0.6); }
.newsletter input {
  flex: 1; background: transparent; border: none; outline: none; color: #f0f0f0;
  padding: 18px 20px; font-size: 12px; letter-spacing: 0.2em;
}
.newsletter button {
  background: transparent; border: none; border-left: 1px solid rgba(255, 255, 255, 0.6);
  color: #f0f0f0; padding: 18px 30px; font-size: 12px; letter-spacing: 0.3em;
  cursor: pointer; transition: all 0.25s;
}
.newsletter button:hover { background: var(--red); color: #fff; }
.newsletter-thanks {
  display: none; margin-top: 48px; border: 1px solid var(--red); padding: 20px;
  font-size: 12px; letter-spacing: 0.28em; color: #f0f0f0;
}

/* CONTACT */
#contact { background: var(--bg-2); }
.contact__bg { position: absolute; inset: 0; background: #000 url('../assets/img/bg-contact.jpg') center 20% / cover no-repeat; }
.contact__fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,6,6,0.25) 0%, rgba(6,6,6,0.65) 55%, rgba(6,6,6,0.92) 100%);
}
#contact .section__inner {
  max-width: 1080px; padding: 520px 40px 220px;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: start;
}
.contact__title { font-family: var(--display); font-size: 34px; letter-spacing: 0.42em; color: #f2f2f2; font-weight: 200; padding-left: 0.42em; }
.contact__lede { font-size: 12.5px; letter-spacing: 0.12em; color: #cfcfcf; margin-top: 28px; line-height: 2.2; }
.contact__emails { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.contact__email-label { font-size: 12px; letter-spacing: 0.3em; color: #f0f0f0; font-weight: 600; }
.contact__emails a { font-size: 12.5px; letter-spacing: 0.08em; color: var(--text-dim); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form input, .contact-form textarea {
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.55);
  color: #f0f0f0; padding: 16px 18px; font-size: 12px; letter-spacing: 0.18em; outline: none;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form button {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.65); color: #f0f0f0;
  padding: 16px; font-size: 12px; letter-spacing: 0.32em; cursor: pointer; transition: all 0.25s;
}
.contact-form button:hover { background: var(--red); border-color: var(--red); }

/* ---------- LEGAL (privacy / terms) ---------- */
#privacy, #terms { background: var(--bg-2); }
#privacy .section__overlay, #terms .section__overlay {
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.55) 0, rgba(6, 6, 6, 0) 620px);
}
body[data-section="privacy"] .site-title::before,
body[data-section="terms"] .site-title::before {
  background: linear-gradient(to bottom, #0b0b0b 0, #0b0b0b 92px, rgba(11, 11, 11, 0) 100%);
}
.legal { max-width: 760px; padding: 200px 40px 170px; }
.legal__kicker { font-size: 13px; letter-spacing: 0.4em; color: var(--red); text-align: center; padding-left: 0.4em; }
.legal__title {
  font-family: var(--display); font-weight: 200; font-size: 40px; letter-spacing: 0.3em;
  color: #f2f2f2; text-align: center; margin: 18px 0 0; padding-left: 0.3em;
}
.legal__rule { width: 120px; height: 1px; background: var(--red); margin: 24px auto 0; }
.legal__updated {
  font-size: 11px; letter-spacing: 0.28em; color: var(--text-mute);
  text-align: center; margin: 26px 0 0; padding-left: 0.28em;
}
.legal__body { margin-top: 68px; font-size: 13px; line-height: 2.05; letter-spacing: 0.04em; color: #cdcdcd; }
.legal__body h2 {
  font-family: var(--display); font-weight: 300; font-size: 19px; letter-spacing: 0.22em;
  color: #f2f2f2; margin: 52px 0 20px; padding-left: 0.22em;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; color: #e8e8e8; margin: 32px 0 12px;
}
.legal__body p { margin: 0 0 20px; }
.legal__body ul { margin: 0 0 20px; padding: 0; list-style: none; }
.legal__body li { position: relative; padding-left: 22px; margin-bottom: 12px; }
.legal__body li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 1px; background: var(--red); }
.legal__body a { color: #e8e8e8; border-bottom: 1px solid rgba(224, 49, 49, 0.55); }
.legal__body a:hover { color: var(--red); }
.legal__note {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11.5px; line-height: 2; letter-spacing: 0.06em; color: var(--text-mute);
}
.legal__back { margin-top: 44px; text-align: center; }

/* footer legal links are the only way into these pages */
.footer__legal span { cursor: pointer; transition: color 0.2s; }
.footer__legal span:hover { color: var(--red); }

/* ---------- Form status ---------- */
/* Bot trap: off-screen rather than display:none, which scrapers look for. */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.form-status {
  display: none; margin-top: 16px;
  font-size: 11.5px; line-height: 1.9; letter-spacing: 0.1em;
}
.form-status.is-shown { display: block; }
.form-status.is-error { color: var(--red); }
.form-status.is-busy  { color: var(--text-mute); }
.form-status.is-done  { color: #8fd18f; }
form.is-sending button[type="submit"] { opacity: 0.5; pointer-events: none; }

/* ---------- Footer ---------- */
.footer { position: relative; background: #0a0a0a; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer__meta {
  padding: 30px 96px 30px 220px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: 1200px; margin: 0 auto; gap: 20px;
}
.footer__copy { font-size: 10.5px; letter-spacing: 0.25em; color: var(--text-mute); line-height: 2; }
.footer__brand { text-align: center; }
.footer__brand-line { width: 1px; height: 22px; background: #555; margin: 0 auto 8px; }
.footer__brand span { font-size: 11px; letter-spacing: 0.35em; color: var(--text-dim); }
.footer__legal { text-align: right; font-size: 10.5px; letter-spacing: 0.25em; color: var(--text-mute); line-height: 2; }

/* ---------- Product modal ---------- */
.pmodal { position: fixed; inset: 0; z-index: 120; display: none; }
.pmodal.is-open { display: block; }
body.pmodal-open { overflow: hidden; }
.pmodal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(6px); }
.pmodal__panel {
  position: relative; z-index: 1;
  width: min(1000px, calc(100vw - 48px)); max-height: calc(100vh - 48px);
  margin: 24px auto; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #0c0c0c; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
  animation: fadeIn 0.28s ease;
}
.pmodal__close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  background: transparent; border: none; color: #c8c8c8;
  font-size: 15px; line-height: 1; padding: 8px; cursor: pointer; transition: color 0.2s;
}
.pmodal__close:hover { color: var(--red); }

.pmodal__media {
  background: rgba(255, 255, 255, 0.055);
  display: flex; align-items: center; justify-content: center; padding: 34px;
}
.pmodal__media img {
  max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.6));
}

.pmodal__detail { padding: 52px 44px 40px; display: flex; flex-direction: column; }
.pmodal__kicker { font-size: 10px; letter-spacing: 0.34em; color: var(--red); }
.pmodal__name {
  font-family: var(--display); font-weight: 200; font-size: 26px; letter-spacing: 0.16em;
  color: #f4f4f4; margin: 16px 0 0; line-height: 1.5;
}
.pmodal__price { font-size: 15px; letter-spacing: 0.22em; color: var(--text-dim); margin-top: 14px; }

.pmodal__form { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; }
.pmodal__names { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pmodal__field { display: flex; flex-direction: column; gap: 9px; border: none; padding: 0; margin: 0; }
.pmodal__field[hidden] { display: none; }   /* class rule would otherwise beat [hidden] */
.pmodal__field > span, .pmodal__field > legend {
  font-size: 10px; letter-spacing: 0.3em; color: #a8a8a8; padding: 0;
}
.pmodal__field input {
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.4);
  color: #f0f0f0; padding: 13px 14px; font-size: 12px; letter-spacing: 0.14em; outline: none;
  transition: border-color 0.2s;
}
.pmodal__field input:focus { border-color: rgba(255, 255, 255, 0.85); }
.pmodal__field input.is-invalid { border-color: var(--red); }

.pmodal__size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pmodal__size-row input { position: absolute; opacity: 0; pointer-events: none; }
.pmodal__size-row label {
  min-width: 50px; text-align: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35); padding: 11px 6px;
  font-size: 11px; letter-spacing: 0.18em; color: #d0d0d0; transition: all 0.2s; user-select: none;
}
.pmodal__size-row label:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.pmodal__size-row input:checked + label { background: var(--red); border-color: var(--red); color: #fff; }
.pmodal__size-row input:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }
.pmodal__sizes.is-invalid legend { color: var(--red); }

.pmodal__error { display: none; font-size: 11px; letter-spacing: 0.12em; color: var(--red); line-height: 1.8; }
.pmodal__error.is-shown { display: block; }

.pmodal__submit {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); color: #f0f0f0;
  padding: 16px; font-size: 12px; letter-spacing: 0.32em; cursor: pointer; transition: all 0.25s;
}
.pmodal__submit:hover { background: var(--red); border-color: var(--red); color: #fff; }

.pmodal__done {
  margin-top: 34px; padding: 22px 24px;
  border: 1px solid rgba(143, 209, 143, 0.4); background: rgba(143, 209, 143, 0.07);
  font-size: 12px; line-height: 2; letter-spacing: 0.05em; color: #d6ecd6;
}
.pmodal__done strong { display: block; color: #8fd18f; font-weight: 600; letter-spacing: 0.16em; margin-bottom: 8px; }
.pmodal__note {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px; line-height: 2; letter-spacing: 0.05em; color: var(--text-mute);
}
.pmodal__note strong { color: #cfcfcf; font-weight: 400; }

@media (max-width: 860px) {
  .pmodal__panel { grid-template-columns: 1fr; width: calc(100vw - 24px); margin: 12px auto; max-height: calc(100vh - 24px); }
  .pmodal__media { padding: 30px 24px 14px; }
  .pmodal__media img { max-height: 240px; }
  .pmodal__detail { padding: 30px 24px 30px; }
  .pmodal__name { font-size: 20px; letter-spacing: 0.12em; }
  .pmodal__names { grid-template-columns: 1fr; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 5vw;
}
.lightbox.is-open { display: flex; }
.lightbox__frame {
  position: relative; width: min(1100px, 90vw); aspect-ratio: 16 / 9;
  background: #000; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
}
.lightbox__frame iframe { width: 100%; height: 100%; border: none; }
.lightbox__close {
  position: absolute; top: -38px; right: 0; color: #fff;
  font-size: 14px; letter-spacing: 0.3em; cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .albums, .video-grid, .merch-grid { grid-template-columns: repeat(2, 1fr); }
  #contact .section__inner { grid-template-columns: 1fr; gap: 50px; padding-top: 420px; }
}
@media (max-width: 760px) {
  .section { padding-left: 24px; padding-right: 24px; }
  .videos__hero, .band__hero { margin: 0 -24px; }
  .nav { width: auto; padding: 18px 0 0 18px; }
  .nav::before { display: none; }
  .nav__logo { width: 48px; height: 48px; position: relative; z-index: 1; }

  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 20px; right: 18px; z-index: 60;
    width: 42px; height: 42px; padding: 0 8px;
    background: transparent; border: none; cursor: pointer; pointer-events: auto;
  }
  .nav__toggle span {
    display: block; height: 1.5px; background: #eaeaea; border-radius: 2px;
    transition: transform 0.28s, opacity 0.2s;
  }
  body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav__items {
    position: fixed; inset: 0; margin: 0; gap: 26px;
    justify-content: center; align-items: center;
    background: rgba(5, 5, 5, 0.94); backdrop-filter: blur(14px); pointer-events: auto;
    transform: translateX(-100%); transition: transform 0.32s ease;
  }
  body.nav-open .nav__items { transform: none; }
  .nav__label { font-size: 15px; letter-spacing: 0.32em; }
  .nav__dot { margin-left: -14px; }

  /* the rail has nowhere to live on a phone — the icons ride inside the menu */
  .socials::before { display: none; }
  .socials {
    right: 0; left: 0; top: auto; bottom: 42px; z-index: 55;
    flex-direction: row; justify-content: center; gap: 20px; flex-wrap: wrap;
    opacity: 0; pointer-events: none; transition: opacity 0.32s ease;
  }
  body.nav-open .socials { opacity: 1; pointer-events: auto; }
  .albums, .video-grid, .merch-grid { grid-template-columns: 1fr; }

  /* the wide desktop tracking overflows a phone; scale the display type down */
  .site-title { top: 30px; }
  .site-title span { font-size: 13px; letter-spacing: 0.3em; padding-left: 0.3em; }
  body.nav-open .site-title { opacity: 0; }
  .heading-red { font-size: 17px; letter-spacing: 0.32em; padding-left: 0.32em; }
  .live__title { font-size: 42px; letter-spacing: 0.28em; padding-left: 0.28em; }
  .band__title { font-size: 19px; letter-spacing: 0.2em; padding-left: 0.2em; }
  .merch__title { font-size: 16px; letter-spacing: 0.22em; padding-left: 0.22em; }
  .news__title { font-size: 25px; letter-spacing: 0.22em; padding-left: 0.22em; }
  .contact__title { font-size: 23px; letter-spacing: 0.28em; padding-left: 0.28em; }
  .shows__empty-title { font-size: 15px; letter-spacing: 0.18em; padding-left: 0.18em; }
  .music__sub { font-size: 12px; letter-spacing: 0.3em; }

  /* desktop hero padding leaves a phone scrolling through empty space */
  #music .section__inner,
  #merch .section__inner { padding: 130px 0 90px; }
  #live .section__inner { padding: 150px 0 140px; }
  #news .section__inner { padding: 170px 0 150px; }
  #videos .section__inner { padding: 0 0 120px; }
  #band .section__inner { padding: 0 0 120px; }
  #contact .section__inner { padding: 260px 0 130px; }
  .legal { padding: 130px 0 100px; }
  .legal__title { font-size: 23px; letter-spacing: 0.2em; padding-left: 0.2em; }
  .legal__kicker { font-size: 11px; letter-spacing: 0.3em; }
  .legal__body h2 { font-size: 16px; letter-spacing: 0.16em; padding-left: 0.16em; }
  .videos__hero { height: 260px; }
  .band__hero { height: 340px; }
  .videos__dim { inset: 220px 0 0 0; background-size: 900px auto; }
  /* same rule, phone geometry: logo is 48px at 18px padding -> centre 42px,
     and the artwork is sized off the viewport width here (0.11786 x 135vw = 15.91vw) */
  #home {
    /* artwork bottom lands at 42px + 0.88214 x 135vw */
    min-height: calc(72px + 119vw);
    background-size: auto 135vw;
    background-position: center calc(42px - 15.91vw);
  }

  /* SUBSCRIBE next to the field is wider than the viewport */
  .newsletter { flex-direction: column; }
  .newsletter button { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.6); }

  .footer__meta { padding: 26px 24px; grid-template-columns: 1fr; text-align: center; }
  .footer__legal { text-align: center; }
}