/* ============================================================
   World Wide Wo — design system (Laravel build)
   Music. Culture. Movement.  Black & gold.
   Fonts: Playfair Display (display serif) + Poppins (sans).
   ============================================================ */

:root {
  --black: #0a0a0a;
  --black-2: #111111;
  --card: #141414;
  --card-2: #1a1a1a;
  --gold: #d9a441;
  --gold-2: #c8922f;
  --gold-soft: #e6b95c;
  --gold-dim: rgba(217, 164, 65, 0.35);
  --line: rgba(217, 164, 65, 0.18);
  --line-2: rgba(255, 255, 255, 0.07);
  --white: #f5f0e8;
  --grey: #9b968e;
  --grey-2: #6f6a63;
  --dark-text: #141005;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Poppins", "Segoe UI", sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--grey);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--gold-soft); }

h1, h2, h3 { font-family: var(--serif); color: var(--white); line-height: 1.1; margin: 0 0 .5em; }
h4, h5, h6 { font-family: var(--sans); color: var(--white); letter-spacing: .06em; margin: 0 0 .5em; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--gold); color: var(--dark-text); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }

/* ---------- Typography helpers ---------- */

.eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.section-title { font-size: 42px; font-weight: 700; }
.gold { color: var(--gold); }

.divider-gold { width: 70px; height: 2px; background: var(--gold); border: none; margin: 18px 0; }
.divider-gold.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .25s ease;
  white-space: nowrap;
}

.btn svg { width: 15px; height: 15px; flex: none; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  color: var(--dark-text);
}
.btn-gold:hover { color: var(--dark-text); filter: brightness(1.08); transform: translateY(-1px); }

.btn-outline {
  background: rgba(0, 0, 0, .25);
  border-color: var(--gold);
  color: var(--white);
}
.btn-outline:hover { background: var(--gold); color: var(--dark-text); }

.btn-sm { padding: 11px 20px; font-size: 12px; }

.link-gold {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- Cards ---------- */

.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-pad { padding: 28px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(10, 10, 10, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 82px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; }

.main-nav a {
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 2px;
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right .25s ease;
}

.main-nav a:hover, .main-nav a.active { color: var(--gold); }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.header-icons { display: flex; align-items: center; gap: 14px; }
.header-icons a { color: var(--white); display: inline-flex; position: relative; }
.header-icons a:hover { color: var(--gold); }
.header-icons svg { width: 19px; height: 19px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--white);
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }

/* Mobile drawer */
@media (max-width: 1280px) {
  .main-nav {
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 10, 10, .98);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 22px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 4px; border-bottom: 1px solid var(--line-2); }
  .main-nav a::after { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .header-actions .btn { display: none; }
  .site-header .container { gap: 14px; }
}

@media (max-width: 480px) {
  .brand img { height: auto; max-width: min(46vw, 180px); }
  .header-actions { gap: 10px; }
  .header-icons { gap: 10px; }
  .nav-toggle { padding: 8px 10px; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--black) center / cover no-repeat;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.25) 45%, rgba(10,10,10,.55) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 70px;
  width: 100%;
}

.hero-title {
  font-size: clamp(52px, 7.2vw, 96px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .01em;
  margin: 6px 0 18px;
}

.hero-tagline {
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin: 0 0 30px;
}

.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-follow {
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.socials { display: flex; gap: 18px; align-items: center; }
.socials a { color: var(--white); display: inline-flex; }
.socials a:hover { color: var(--gold); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* Live card (hero right) */

.live-card {
  background: rgba(13, 13, 13, .92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.live-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.live-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: var(--dark-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  border-radius: 6px;
  padding: 6px 12px;
  text-transform: uppercase;
}

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
  margin-right: 7px;
  animation: pulse 1.4s infinite;
}
.live-badge .live-dot { background: var(--dark-text); animation: none; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

.viewers { color: var(--grey); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.live-card img.live-thumb, .live-card iframe {
  width: 100%;
  border-radius: 10px;
  display: block;
  border: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.live-card h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 20px 0 6px;
}

.live-card p { font-size: 14px; margin: 0 0 16px; }

/* ============================================================
   WAVEFORM & PLAYER
   ============================================================ */

.waveform { display: flex; align-items: center; gap: 3px; height: 54px; margin: 4px 0 18px; }
.waveform span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--gold);
  height: 30%;
  opacity: .85;
  animation: eq 1.15s ease-in-out infinite alternate;
}
.waveform span:nth-child(3n) { height: 65%; opacity: .6; }
.waveform span:nth-child(4n) { height: 90%; }
.waveform span:nth-child(5n) { height: 45%; opacity: .5; }
.waveform span:nth-child(7n) { height: 75%; opacity: .7; }
@keyframes eq { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }

.player-time { text-align: right; color: var(--grey); font-size: 13px; letter-spacing: .1em; margin: 8px 0 6px; }

.player-controls { display: flex; align-items: center; justify-content: center; gap: 26px; }
.player-controls a { color: var(--white); display: inline-flex; }
.player-controls a:hover { color: var(--gold); }
.player-controls svg { width: 20px; height: 20px; }
.player-controls .play {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  color: var(--dark-text);
  align-items: center;
  justify-content: center;
}
.player-controls .play:hover { color: var(--dark-text); filter: brightness(1.08); }
.player-controls .play svg { width: 22px; height: 22px; }

.track-list { list-style: none; margin: 0; padding: 0; counter-reset: track; }
.track-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 6px;
  border-bottom: 1px solid var(--line-2);
  color: var(--white);
  font-size: 15px;
}
.track-list li::before {
  counter-increment: track;
  content: counter(track, decimal-leading-zero);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}
.track-list li:hover { color: var(--gold-soft); cursor: pointer; }
.track-list .track-time { margin-left: auto; color: var(--grey-2); font-size: 13px; }

/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding: 92px 0; }
.section-dark { background: var(--black-2); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }

/* Who is + stats */

.who-grid {
  display: grid;
  grid-template-columns: .8fr 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.emblem {
  width: 230px; height: 230px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(circle at 50% 40%, rgba(217,164,65,.08), transparent 65%);
}
.emblem::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(217, 164, 65, .25);
}
.emblem img { width: 55%; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }

.stat { text-align: center; padding: 20px 8px; }
.stat svg { width: 26px; height: 26px; color: var(--gold); }
.stat .stat-num { font-family: var(--sans); font-size: 30px; font-weight: 700; color: var(--white); margin: 8px 0 2px; }
.stat .stat-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); }

/* Feature cards */

.features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.feature-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 24px 30px;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feature-card:hover { transform: translateY(-6px); border-color: var(--gold-dim); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.feature-card svg { width: 30px; height: 30px; color: var(--gold); }
.feature-card h4 { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 16px 0 10px; }
.feature-card p { font-size: 13px; margin: 0 0 18px; }
/* Cards that end on their copy (no .arrow below) should not carry the gap. */
.feature-card p:last-child { margin-bottom: 0; }
/* A pill, not a fixed circle. It started as a 34px circle holding a single
   arrow glyph; the content rewrite put email addresses and phone numbers in
   it, which overflowed badly. Sizing to the content handles both. */
.feature-card .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: all .25s ease;
}
.feature-card:hover .arrow { background: var(--gold); color: var(--dark-text); }

/* A button that follows a block of copy needs to clear it. Replaces the
   assorted inline margin-top values these used to carry. */
.btn-after-copy { margin-top: 12px; }

/* Latest release */

.release-grid {
  display: grid;
  grid-template-columns: .95fr 1fr 1.1fr .95fr;
  gap: 40px;
  align-items: center;
}

.album-cover { border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); display: block; }

.release-title { font-size: 44px; font-weight: 700; margin: 0 0 4px; }
.release-sub { color: var(--grey); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 24px; }
.release-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* Live shows */

.live-shows-grid {
  display: grid;
  grid-template-columns: .9fr 1.6fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.video-frame img, .video-frame iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: none; min-height: 300px; }
.video-frame .vf-live { position: absolute; top: 14px; left: 14px; }
.video-frame .vf-viewers { position: absolute; top: 19px; left: 90px; color: #fff; font-size: 12px; letter-spacing: .1em; }
.video-frame .vf-close { position: absolute; top: 10px; right: 14px; color: #fff; font-size: 18px; opacity: .85; }
.video-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
  color: #fff;
}
.video-bar a { color: #fff; display: inline-flex; }
.video-bar a:hover { color: var(--gold); }
.video-bar svg { width: 16px; height: 16px; }
.video-bar .vb-live { color: #ff4d4d; font-size: 11px; font-weight: 700; letter-spacing: .14em; display: flex; align-items: center; }
.video-bar .vb-right { margin-left: auto; display: flex; gap: 16px; }

/* Chat */

.chat { display: flex; flex-direction: column; }
.chat-msg { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.chat-msg:last-of-type { border-bottom: none; }
.chat-msg img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.chat-name { color: var(--white); font-size: 13px; font-weight: 600; margin: 0; }
.chat-text { color: var(--grey); font-size: 13px; margin: 2px 0 0; }
.chat-time { margin-left: auto; color: var(--grey-2); font-size: 11px; white-space: nowrap; }

.chat-input { display: flex; gap: 10px; margin-top: 14px; }
.chat-input input {
  flex: 1;
  min-width: 0;
  background: #1c1c1c;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--white);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 13px;
}
.chat-input input:focus { outline: none; border-color: var(--gold); }
.chat-input button {
  flex: none;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  border: none;
  border-radius: 8px;
  color: var(--dark-text);
  padding: 0 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.chat-input button svg { width: 16px; height: 16px; }

/* Products */

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.product-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.product-card:hover { transform: translateY(-5px); border-color: var(--gold-dim); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.product-card img { border-radius: var(--radius-sm); width: 100%; display: block; }
.product-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.product-name { color: var(--white); font-size: 14px; font-weight: 500; margin: 0; }
.product-price { color: var(--gold); font-size: 14px; font-weight: 600; margin: 2px 0 0; }
.product-cart {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.product-cart:hover { background: var(--gold); color: var(--dark-text); }
.product-cart svg { width: 16px; height: 16px; }

/* Community */

.community-grid { display: grid; grid-template-columns: .9fr 1.8fr; gap: 40px; align-items: center; }

/* Booking */

.booking-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 40px; align-items: start; }
.booking-photo { border-radius: var(--radius); display: block; margin-top: 26px; }

/* ============================================================
   FORMS (native)
   ============================================================ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid .span-2 { grid-column: span 2; }

.field label { display: none; }

.field input, .field select, .field textarea {
  width: 100%;
  background: #1c1c1c;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .14);
}

.field ::placeholder { color: var(--grey-2); }
.field select { appearance: none; color: var(--grey-2); }
.field select:valid { color: var(--white); }
.field textarea { min-height: 120px; resize: vertical; }

.field .error { color: #e07b5a; font-size: 12px; margin: 6px 2px 0; display: block; }

.form-status {
  background: rgba(217, 164, 65, .1);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ============================================================
   BANNERS / CTA / QUOTE
   ============================================================ */

.page-banner {
  position: relative;
  background: var(--black) center / cover no-repeat;
  padding: 130px 0 110px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .58); }
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { font-size: clamp(36px, 5.5vw, 60px); font-weight: 700; }
.page-banner p { color: var(--grey); font-size: 15px; letter-spacing: .06em; }

.cta-band {
  position: relative;
  background: var(--black) center / cover no-repeat;
  padding: 92px 0;
  text-align: center;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.cta-band .container { position: relative; z-index: 2; }
/* Not scoped to .cta-band: the same row is used on its own inside plain
   sections, and there it was inheriting nothing and stacking up left-aligned. */
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

.quote {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.45;
  color: var(--white);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.quote .q { color: var(--gold); font-size: 54px; line-height: 0; vertical-align: -14px; }
.quote-by { text-align: center; color: var(--gold); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; margin-top: 22px; }

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

.site-footer { border-top: 1px solid var(--line); padding: 74px 0 0; background: var(--black); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 46px;
}

.footer-brand img { width: 150px; }
.footer-brand p { font-size: 14px; margin: 14px 0 16px; }

.site-footer h4 { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 11px; }
.site-footer ul a { color: var(--grey); font-size: 14px; }
.site-footer ul a:hover { color: var(--gold); }

.newsletter { display: flex; margin-top: 14px; }
.newsletter input {
  flex: 1;
  min-width: 0;
  background: #1c1c1c;
  border: 1px solid var(--line-2);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--white);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 13px;
}
.newsletter input:focus { outline: none; border-color: var(--gold); }
.newsletter button {
  flex: none;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  border: none;
  border-radius: 0 8px 8px 0;
  color: var(--dark-text);
  padding: 0 16px;
  cursor: pointer;
}
.newsletter button svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid var(--line-2);
  padding: 20px 0;
  text-align: center;
  color: var(--grey-2);
  font-size: 12.5px;
}

/* ============================================================
   ADMIN
   ============================================================ */

.admin-body { background: var(--black-2); min-height: 100vh; }

.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }

.admin-side {
  background: var(--black);
  border-right: 1px solid var(--line);
  padding: 26px 18px;
}
.admin-side .brand img { height: 44px; }
.admin-side nav { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
.admin-side nav a {
  color: var(--grey);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-radius: 8px;
}
.admin-side nav a:hover { color: var(--white); background: var(--card); }
.admin-side nav a.active { color: var(--gold); background: var(--card); }

.admin-main { padding: 34px 38px; }
.admin-main h1 { font-size: 28px; }

.admin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0 34px; }
.admin-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.admin-stat .n { font-size: 30px; font-weight: 700; color: var(--white); font-family: var(--sans); }
.admin-stat .l { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); }
.admin-stat .badge { background: var(--gold); color: var(--dark-text); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-left: 8px; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.admin-table th { color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.admin-table td { color: var(--grey); }
.admin-table td strong { color: var(--white); font-weight: 600; }
.admin-table tr:hover td { background: rgba(255, 255, 255, .015); }

.pill { display: inline-block; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 4px 12px; }
.pill-new { background: rgba(217, 164, 65, .16); color: var(--gold); border: 1px solid var(--gold-dim); }
.pill-done { background: rgba(120, 190, 120, .12); color: #8fce8f; border: 1px solid rgba(120, 190, 120, .3); }

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black) center / cover no-repeat;
  position: relative;
}
.admin-login::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.admin-login .card { position: relative; z-index: 2; width: 400px; max-width: calc(100vw - 40px); padding: 40px; text-align: center; }
.admin-login img { width: 130px; margin-bottom: 8px; }
.admin-login .field { text-align: left; margin-bottom: 14px; }

.inline-form { display: inline; }

/* Grid children may not force the track wider than the viewport */
.hero .container > *, .who-grid > *, .release-grid > *, .live-shows-grid > *,
.community-grid > *, .booking-grid > *, .features > *, .products-grid > *,
.footer-grid > *, .stats-grid > * { min-width: 0; }

/* ---------- Grid modifiers (responsive-safe, replaces inline styles) ---------- */

.features.cols-3 { grid-template-columns: repeat(3, 1fr); }
.features.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.who-grid.two-col { grid-template-columns: .8fr 1.8fr; }
.booking-grid.contact-split { grid-template-columns: .8fr 1.4fr; }

@media (max-width: 1080px) {
  .features.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .who-grid.two-col { grid-template-columns: 1fr; }
  .booking-grid.contact-split { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .features.cols-3, .features.cols-4 { grid-template-columns: 1fr; }
  .stats-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

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

@media (max-width: 1080px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .who-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .who-grid .divider-gold { margin-left: auto; margin-right: auto; }
  .who-grid .btn { margin: 0 auto; }
  .stats-grid { max-width: 460px; margin: 0 auto; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .release-grid { grid-template-columns: 1fr 1fr; }
  .live-shows-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .community-grid, .booking-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .admin-side nav { margin: 0; flex-direction: row; flex-wrap: wrap; }
  .admin-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .section { padding: 58px 0; }
  .section-title { font-size: 30px; }
  .hero { min-height: 0; }
  .hero .container { padding-top: 56px; padding-bottom: 56px; text-align: center; }
  .hero-buttons, .socials { justify-content: center; }
  .features { grid-template-columns: 1fr; }
  .release-grid { grid-template-columns: 1fr; }
  .release-title { font-size: 34px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .quote { font-size: 22px; }
  .quote .q { font-size: 40px; vertical-align: -10px; }
  .emblem { width: 160px; height: 160px; }
  .admin-main { padding: 24px 18px; }
  .admin-cards { grid-template-columns: 1fr; }
  .admin-table { display: block; overflow-x: auto; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card { padding: 12px; }
}

/* ============================================================
   J-WO CONTENT UPDATE — components added for the Home, About
   and Contact rewrite. Uses the existing tokens only.
   ============================================================ */

/* Section intros and lead copy */
.section-intro { text-align: center; margin-bottom: 38px; }
.section-lead { max-width: 780px; margin: 0 0 30px; }
.section-lead.center { margin-left: auto; margin-right: auto; text-align: center; }
.prose-narrow { max-width: 820px; }
.fine-note { font-size: 13px; color: var(--grey-2); margin-top: 22px; }
.empty-note { font-size: 14px; color: var(--grey-2); font-style: italic; }
.card-heading { font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; color: var(--white); }

/* Hero headline — a full sentence, so it needs a smaller scale than the
   original three-word stacked wordmark treatment. */
.hero-title-statement { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06; margin-bottom: 22px; }

/* Hero supporting line */
.hero-note { font-size: 14px; color: var(--gold-soft); margin: 18px 0 0; }
.hero-note strong { color: var(--gold); letter-spacing: .06em; }

/* Feature cards used as links, and non-interactive variants */
a.feature-card { display: block; text-decoration: none; color: inherit; }
.feature-card.static { text-align: left; cursor: default; }
.feature-card.static:hover { transform: none; border-color: var(--line); box-shadow: none; }
.feature-card .arrow.muted { color: var(--grey-2); }
.features.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* Upcoming project */
.project-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.project-kicker { color: var(--gold-soft); font-weight: 500; }
.project-window { color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: 13px; font-weight: 600; margin: 0 0 14px; }

.project-teaser {
  position: relative;
  background: rgba(13, 13, 13, .92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.project-teaser img { width: 100%; border-radius: var(--radius-sm); display: block; margin-bottom: 18px; }
.project-teaser h3 { font-family: var(--serif); font-size: 30px; color: var(--white); margin: 0 0 4px; letter-spacing: .04em; }
.project-teaser p { font-size: 14px; }
.project-flag {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  color: var(--dark-text);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}

/* Music */
.music-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }

/* Visuals */
.visuals-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.video-poster { position: relative; display: block; }
.video-poster img { width: 100%; display: block; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  color: var(--dark-text);
  transition: transform .3s ease;
}
.video-poster:hover .video-play { transform: scale(1.08); }
.video-play svg { width: 24px; height: 24px; }

/* Core values */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { border-left: 2px solid var(--gold-dim); padding: 4px 0 4px 20px; }
.value h4 { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin: 0 0 8px; }
.value p { font-size: 13px; margin: 0; }

/* FAQ */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line-2); padding: 18px 0; }
.faq-item summary {
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500; color: var(--white);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--gold); font-size: 22px; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item summary:hover { color: var(--gold); }
.faq-item p { font-size: 14px; margin: 14px 0 0; }

/* Booking disclaimer + field hints */
.disclaimer { border-top: 1px solid var(--line-2); margin-top: 28px; padding-top: 20px; }
.disclaimer p { font-size: 12px; color: var(--grey-2); margin: 0 0 10px; }
.hint { font-size: 12px; color: var(--grey-2); margin-top: 6px; display: block; }

/* Centered social row */
.socials-center { justify-content: center; }

/* Footer legal */
.footer-legal { font-size: 12px; color: var(--grey-2); max-width: 760px; margin: 8px auto 0; }

@media (max-width: 1080px) {
  .project-grid, .music-grid, .visuals-grid { grid-template-columns: 1fr; gap: 34px; }
  .features.cols-2 { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .values-grid { grid-template-columns: 1fr; }
  .section-lead { text-align: center; }
  .feature-card.static { text-align: center; }
  .value { border-left: none; border-top: 2px solid var(--gold-dim); padding: 16px 0 0; }
}

/* ============================================================
   ABOUT PAGE — editorial layout components.
   Photography-led sections built on the existing tokens; no new
   fonts, colours or radii are introduced here.
   ============================================================ */

/* ---------- Hero ---------- */

.about-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(88vh, 820px);
  padding: 150px 0 72px;
  overflow: hidden;
  background: var(--black);
}

/* The backdrop layer. Currently the PINK SNOW video (see .hero-video for the
   framing); works unchanged for an <img> if a still is ever swapped back in. */
.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two overlays: a vertical wash so the copy always has contrast, and a
   left-weighted one so the text column stays readable over the road. */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 10, 10, .96) 4%, rgba(10, 10, 10, .55) 45%, rgba(10, 10, 10, .72) 100%),
    linear-gradient(to right, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .28) 55%, rgba(10, 10, 10, .6) 100%);
}

.about-hero-inner { position: relative; max-width: 1240px; }

.about-hero-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  margin: 0 0 4px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}

.about-hero-lead {
  max-width: 620px;
  font-size: 15.5px;
  color: var(--white);
  opacity: .82;
  margin: 0 0 14px;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.scroll-cue svg { width: 18px; height: 18px; transition: transform .3s ease; }
.scroll-cue:hover svg { transform: translateX(5px); }

/* ---------- Image + copy splits ---------- */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about-split > * { min-width: 0; }

/* The figure comes first in the DOM so that on mobile the photo always
   sits above its copy, whichever side it takes on desktop. Reversing swaps
   the track widths too, so the copy keeps the wider column either way. */
.about-split.reverse { grid-template-columns: 1.1fr 1fr; }
.about-split.reverse .about-figure { order: 2; }

.about-figure {
  position: relative;
  /* Own stacking context: without it the z-index:-1 frame below would drop
     behind the .section-dark background and disappear. */
  isolation: isolate;
  margin: 0;
  border-radius: var(--radius);
}
.about-figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}

/* Offset gold rule — the same accent language as .divider-gold, drawn as
   a frame instead of a line. */
.about-figure::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  z-index: -1;
}

.about-figure figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 10, .82);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.about-figure figcaption svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

.about-copy .divider-gold { margin: 16px 0 22px; }

/* ---------- Mission / Vision pillars ---------- */

.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pillar-grid > * { min-width: 0; }

.pillar {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 34px 34px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dim);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(217, 164, 65, .08);
  color: var(--gold);
  margin-bottom: 20px;
}
.pillar-icon svg { width: 24px; height: 24px; }

.pillar h3 { font-size: 26px; margin: 6px 0 16px; }
.pillar p { font-size: 14.5px; }
.pillar p:last-child { margin-bottom: 0; }

/* ---------- Full-bleed story band ---------- */

.story-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 620px;
  padding: 100px 0;
  overflow: hidden;
  text-align: center;
}
.story-band-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.story-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, .74) 0%, rgba(10, 10, 10, .93) 72%);
}
.story-band-inner { position: relative; max-width: 840px; }
.story-band-inner p { color: var(--white); opacity: .84; }
.band-kicker {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
  color: var(--gold-soft) !important;
  opacity: 1 !important;
  margin-top: 26px;
}

/* ---------- Creative philosophy ---------- */

.center-prose { margin-left: auto; margin-right: auto; text-align: center; }

.tag-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
}
.tag-row li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease;
}
/* Gold marker drawn in CSS — keeps the row icon-free without a bullet glyph. */
.tag-row li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.tag-row li:hover { border-color: var(--gold-dim); color: var(--gold-soft); }

/* ---------- What inspires J-Wo ---------- */

/* Five items: three across, then the remaining two centred on the row
   below rather than left-hanging in a 3-column grid. */
.inspire-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.inspire {
  position: relative;
  flex: 1 1 300px;
  max-width: 380px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.inspire:hover {
  transform: translateY(-5px);
  border-color: var(--gold-dim);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

.inspire-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  opacity: .16;
}
.inspire-icon {
  display: inline-flex;
  color: var(--gold);
  margin-bottom: 16px;
}
.inspire-icon svg { width: 28px; height: 28px; }
.inspire h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.inspire p { font-size: 13.5px; margin: 0; }

/* ---------- Core values (numbered) ---------- */

.values-grid .value { position: relative; transition: border-color .3s ease; }
.values-grid .value:hover { border-color: var(--gold); }
.value-num {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
  opacity: .55;
  margin-bottom: 6px;
}

/* ---------- Statement panel ---------- */

.statement-panel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 44px 46px;
}
.statement-panel .divider-gold { margin: 16px 0 24px; }
.statement-lead {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.4;
  color: var(--white);
  margin: 0 0 20px;
}
.statement-panel p:last-child { margin-bottom: 0; }

/* ---------- Beyond the music ---------- */

.merch-panel {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 30px;
  align-items: start;
  max-width: 940px;
}
.merch-panel > * { min-width: 0; }
.merch-panel .divider-gold { margin: 16px 0 22px; }
.merch-panel .btn { margin-top: 12px; }

.merch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(217, 164, 65, .08);
  color: var(--gold);
}
.merch-icon svg { width: 32px; height: 32px; }

/* ============================================================
   HERO VIDEO — the animated PINK SNOW cover behind the Home and
   About heroes. The source is a 1:1 square, so it is deliberately
   framed high: object-position keeps the title arc and the figure
   in view while the wide crop trims the empty edges.
   ============================================================ */

/* The poster doubles as the section background, which covers every case
   where the video never paints: still buffering, autoplay refused by the
   browser, decode failure, or reduced motion. */
.has-hero-video {
  background-image: url("../img/pink-snow-hero-poster.jpg");
  background-position: center 8%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Static-cover hero (Home). Centred crop. */
.has-hero-cover {
  background-image: url("../img/pink-snow-cover.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Hero with no second column — the live card is absent, which is the normal
   state. One track instead of two, and the copy is capped so it does not run
   the full 1240px and turn into unreadably long lines. */
.hero-solo .container { grid-template-columns: 1fr; }
.hero-solo .container > * { max-width: 760px; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 8% keeps the whole "PINK SNOW" title arc and the figure's head inside a
     wide crop. Centre framing slices the lettering in half, which reads as a
     mistake rather than a crop. */
  object-position: center 8%;
  /* Sits under .hero::before (z-index 1) and the copy (z-index 2). */
  z-index: 0;
  pointer-events: none;
}

/* On the About hero the layers are negative — see .about-hero-bg. */
.about-hero .hero-video { z-index: -2; }

/* Portrait viewports scale the square by height, so the overflow is
   horizontal and the vertical offset above no longer applies — centre it. */
@media (max-aspect-ratio: 1/1) {
  .hero-video { object-position: center; }
  .has-hero-video { background-position: center; }
}

/* ============================================================
   MUSIC PAGE
   ============================================================ */

/* Says out loud that the content below is not final. */
.placeholder-note {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 780px; margin: 0 auto 30px;
  padding: 14px 18px;
  border: 1px dashed var(--gold-dim);
  border-radius: var(--radius-sm);
  background: rgba(217, 164, 65, .05);
  font-size: 13px; color: var(--gold-soft);
}
.placeholder-note svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }

.tracklist { list-style: none; counter-reset: none; margin: 0; padding: 0; max-width: 900px; margin-inline: auto; }

.tracklist-row {
  display: grid;
  grid-template-columns: 42px 34px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: background .25s ease, border-color .25s ease;
}
.tracklist-row:last-child { border-bottom: 1px solid transparent; }
.tracklist-row:hover { background: var(--card); border-color: var(--gold-dim); }

/* An unreleased row carries no play control, so it gets no hover response
   either — and it closes the gap the missing control would leave. */
.tracklist-row.is-pending { grid-template-columns: 42px 1fr auto; }
.tracklist-row.is-pending:hover { background: none; border-color: transparent; border-bottom-color: var(--line-2); }

.tracklist-num { font-family: var(--serif); font-size: 17px; color: var(--gold); opacity: .55; }

.tracklist-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--gold);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tracklist-play svg { width: 14px; height: 14px; }
.tracklist-row:hover .tracklist-play { background: var(--gold); color: var(--dark-text); border-color: var(--gold); }

.tracklist-title { color: var(--white); font-size: 15.5px; font-weight: 500; min-width: 0; }
.tracklist-tag {
  display: inline-block; margin-left: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 2px 9px;
  vertical-align: 2px;
}
.tracklist-time { color: var(--grey-2); font-size: 13px; font-variant-numeric: tabular-nums; }

.center-text { text-align: center; }

/* ---------- Dialog ---------- */

.wwo-modal {
  width: min(480px, calc(100vw - 36px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--grey);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
}
.wwo-modal::backdrop { background: rgba(6, 6, 6, .82); }

.wwo-modal-body { position: relative; padding: 40px 34px 32px; text-align: center; }

.wwo-modal-close {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none; border-radius: 50%;
  color: var(--grey-2); cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.wwo-modal-close:hover { color: var(--gold); background: rgba(217, 164, 65, .1); }
.wwo-modal-close svg { width: 16px; height: 16px; }

.wwo-modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(217, 164, 65, .08);
  color: var(--gold);
  margin-bottom: 18px;
}
.wwo-modal-icon svg { width: 24px; height: 24px; }

.wwo-modal h3 {
  font-family: var(--serif);
  font-size: 32px; font-weight: 700; color: var(--white);
  margin: 6px 0 12px;
}
.wwo-modal p { font-size: 14.5px; margin: 0; }

.wwo-modal-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 26px;
}

@media (max-width: 480px) {
  .wwo-modal-body { padding: 34px 22px 26px; }
  .wwo-modal-actions .btn { width: 100%; justify-content: center; }
}

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

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.gallery-grid > * { min-width: 0; }

/* A wide shot spans both columns so the page does not read as a plain
   two-by-two contact sheet. */
.shot-wide { grid-column: 1 / -1; }

.shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.shot:hover { border-color: var(--gold-dim); box-shadow: 0 22px 50px rgba(0, 0, 0, .55); }

.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The caption sits over the foot of the photo, on a gradient rather than a
   solid bar, so it stays readable without boxing off the image. */
.shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 46px 22px 20px;
  background: linear-gradient(to top, rgba(10, 10, 10, .92) 20%, rgba(10, 10, 10, 0) 100%);
}
.shot-title {
  display: block;
  color: var(--white);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}
.shot-caption { display: block; color: var(--grey); font-size: 13.5px; margin-top: 4px; }

@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 16px; }
  .shot figcaption { padding: 40px 16px 16px; }
  .shot-title { font-size: 18px; }
}

/* ============================================================
   YOUTUBE LIVE PAGE
   ============================================================ */

/* The announcement block. .video-frame already styles both the still and the
   iframe that replaces it when the channel goes live, so this only caps the
   width and centres it. */
.live-frame { max-width: 960px; margin: 0 auto; }
.live-frame img { width: 100%; display: block; }

.live-actions { margin-top: 30px; }
.live-announce .fine-note { margin-top: 18px; }

@media (max-width: 700px) {
  .tracklist-row { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 13px 10px; }
  .tracklist-play { display: none; }
  .tracklist-tag { display: none; }
}

/* ---------- Music section placeholder ---------- */

/* Stands in for the track list until real songs are published. */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  padding: 40px 24px;
  border: 1px dashed var(--gold-dim);
  border-radius: var(--radius);
  background: rgba(217, 164, 65, .04);
}
.coming-soon-icon { display: inline-flex; color: var(--gold); margin-bottom: 16px; }
.coming-soon-icon svg { width: 32px; height: 32px; }
.coming-soon-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  margin: 0;
}
.coming-soon-note {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 12px 0 0;
}

/* The same cover as the animated album art. <video> has no intrinsic
   max-width the way <img> does, so it needs sizing explicitly. */
.album-video {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--black-2);
}

/* Reduced motion: hide the backdrop so the poster background shows through.
   Playback itself is stopped in wwo.js — CSS cannot pause a video, and a
   hidden one may keep decoding. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ---------- About page responsive ---------- */

@media (max-width: 1080px) {
  .about-split, .about-split.reverse { grid-template-columns: 1fr; gap: 40px; }
  .about-split.reverse .about-figure { order: 0; }
  .about-figure::before { inset: 12px -12px -12px 12px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .story-band { min-height: 0; padding: 84px 0; }
}

@media (max-width: 700px) {
  .about-hero { min-height: 0; padding: 118px 0 56px; }
  .about-hero-lead { font-size: 14.5px; }
  .pillar { padding: 30px 24px 26px; }
  .pillar h3 { font-size: 22px; }
  .statement-panel { padding: 30px 24px; }
  .inspire { flex-basis: 100%; max-width: none; }
  .merch-panel { grid-template-columns: 1fr; gap: 22px; }
  .about-figure figcaption { left: 12px; bottom: 12px; font-size: 10px; padding: 6px 12px; }
}