/* =========================================================
   HERO
   ========================================================= */
.hero { padding-block: clamp(var(--s6), 6vw, var(--s8)); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: center; }
.hero-copy > * + * { margin-top: var(--s5); }
.hero-copy h1 { max-width: 13ch; font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem); }
.hero .lead { color: var(--band-muted); max-width: 32rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-place { color: var(--band-muted); font-size: var(--fs-sm); font-style: normal; }
.hero-media { position: relative; justify-self: center; width: min(100%, 24rem); }
.hero-media > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 2px; background: var(--band-2); }
@media (max-width: 52rem) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-media { width: min(100%, 22rem); justify-self: start; }
}

/* =========================================================
   CLUB (institutional)
   ========================================================= */
.mission { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: start; }
.mission .statement { font: 600 var(--fs-3)/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: pretty; max-width: 26ch; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s8); }
.values li { border-left: 3px solid var(--primary); padding-left: var(--s4); }
.values li > * + * { margin-top: var(--s2); }
.values p { color: var(--muted); }
.facts-wrap { margin-top: var(--s8); }
.facts-wrap > h3 { margin-bottom: var(--s5); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.facts > div { padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 1px solid var(--border); }
.facts dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.facts dd { font-weight: 600; margin-top: var(--s1); }
.member-band { margin-top: var(--s8); padding: clamp(var(--s6), 5vw, var(--s7)); border-radius: var(--r); }
.member-band > h3 { font-size: var(--fs-2); max-width: 30rem; margin-bottom: var(--s6); }
.member-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.member-doors > div { border-top: 1px solid var(--border); padding-top: var(--s5); }
.member-doors > div > * + * { margin-top: var(--s3); }
.member-doors p { color: var(--muted); max-width: 30rem; }
.member-doors .btn { margin-top: var(--s4); }
@media (max-width: 52rem) {
  .mission { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; gap: var(--s5); }
  .member-doors { grid-template-columns: 1fr; }
}

/* =========================================================
   WHAT'S ON (marketing)
   ========================================================= */
.event-list { border-top: 1px solid var(--border); }
.event { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding-block: var(--s5); border-bottom: 1px solid var(--border); }
.event-when { font-weight: 600; }
.event h3 { margin-bottom: var(--s1); }
.event p:not(.event-when) { color: var(--muted); max-width: 38rem; }
.follow { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.follow p { color: var(--muted); }
.gallery-head { margin: var(--s8) 0 var(--s5); }
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 18vw, 15rem); gap: var(--s3); }
.tile { position: relative; margin: 0; overflow: hidden; border-radius: 2px; color: var(--band-text); --court-floor: var(--band-2); background: var(--band-2); }
.tile.a { grid-column: span 4; grid-row: span 2; }
.tile.b { grid-column: span 2; }
.tile.c { grid-column: span 2; }
.tile.t2 { background: var(--accent); color: var(--band); --court-floor: var(--accent); }
.tile.t3, .tile.t5 { background: var(--tint); color: var(--text); --court-floor: var(--tint); }
.tile.t4 { background: var(--band); --court-floor: var(--band); }
.tile-art, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile figcaption { position: absolute; left: 0; bottom: 0; padding: var(--s2) var(--s3); background: var(--band); color: var(--band-text); font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 52rem) {
  .event { grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
  .event .btn { justify-self: start; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .tile figcaption { font-size: 0.8125rem; padding: var(--s1) var(--s2); line-height: 1.3; }
  .tile.a { grid-column: span 2; grid-row: span 2; }
  .tile.b, .tile.c { grid-column: span 2; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
.details { display: grid; gap: var(--s5); }
.details dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.details dd { margin-top: var(--s1); font-size: var(--fs-1); font-weight: 600; font-style: normal; }
.details dd a { text-decoration: none; border-bottom: 2px solid var(--border); }
.details dd a:hover { border-color: var(--text); }
.details dd a.sub { display: inline-block; margin-top: var(--s3); font-size: var(--fs-0); font-weight: 600; }
.form-note { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 52rem) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .form-row { grid-template-columns: 1fr; }
}