.club-page { background: var(--ivory); }

.club-hero { position: relative; isolation: isolate; min-height: min(820px, 90vh); overflow: hidden; background: #c6e4f6; }
.club-hero-photo { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.club-hero-inner { position: relative; width: calc(100% - var(--hero-gutter) - var(--hero-gutter)); min-height: inherit; margin: auto; }
.club-hero h1 { position: absolute; top: 294px; left: -12px; width: min(55vw, 710px); margin: 0; color: var(--navy); font: 600 clamp(1.1rem, 2vw, 1.75rem)/1.35 var(--sans); letter-spacing: .18em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 12px rgba(247,242,233,.9); }
.club-hero-note { position: absolute; top: 365px; left: 0; width: min(44vw, 560px); text-align: center; }
.club-hero-quote { margin: 0; color: var(--navy); font: italic 400 clamp(1.8rem, 2.5vw, 2.5rem)/1.08 var(--serif); text-shadow: 0 1px 8px rgba(247,242,233,.95), 0 1px 2px var(--ivory); }
.club-hero-signature { position: relative; width: clamp(195px, 21.25vw, 271px); aspect-ratio: 164 / 42; margin: .5rem auto 0; overflow: hidden; }
.club-hero-signature img { position: absolute; top: 50%; left: 50%; width: 519%; height: auto; max-width: none; transform: translate(-52.1%, -30.5%); }

.club-intro { padding: clamp(4rem, 7vw, 6rem) 1.5rem 3rem; text-align: center; }
.club-intro-inner { max-width: 740px; margin: auto; }
.club-intro h2, .club-join h2 { margin: .35rem 0 1rem; color: var(--navy); font: 600 clamp(3rem, 5vw, 4.6rem)/1 var(--serif); }
.club-intro-inner > p:last-child, .club-join-inner > p:not(.eyebrow) { margin: 0 auto; max-width: 680px; font: 400 clamp(1.15rem, 2vw, 1.4rem)/1.35 var(--serif); }

.club-levels { padding: 0 1.5rem 4rem; }
.club-level { max-width: 1080px; margin: auto; }
.club-level + .club-level { border-top: 1px solid rgba(180,135,67,.6); }
.club-level-inner { display: grid; grid-template-columns: minmax(180px, 290px) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); min-height: 480px; padding: 1.5rem clamp(1rem, 4vw, 3rem); }
.club-level-art { display: flex; align-items: center; justify-content: center; min-width: 0; }
.club-level-art img { display: block; width: min(100%, 225px); height: auto; }
.club-level-copy { max-width: 620px; }
.club-level h2 { margin: .25rem 0 1.1rem; color: var(--navy); font: 600 clamp(3.2rem, 5vw, 4.6rem)/.95 var(--serif); }
.club-level-copy p:not(.eyebrow) { max-width: 570px; margin: 0 0 .8rem; font: 400 1.05rem/1.7 var(--sans); }
.club-level-copy .club-level-lead { color: var(--navy); font-weight: 600; }

.club-join { padding: 4.5rem 1.5rem 5.5rem; background: var(--paper); text-align: center; }
.club-join-inner { max-width: 760px; margin: auto; }
.club-join-link { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 48px; margin-top: 2rem; padding: .8rem 1.6rem; border: 1px solid var(--gold); border-radius: 3px; background: var(--navy); color: white; font: 600 .8rem/1.4 var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: background-color .15s ease, transform .15s ease; }
.club-join-link:hover { background: #102f52; transform: translateY(-2px); }

@media (max-width: 1199px) and (min-width: 1000px) {
  .club-hero h1 { top: 245px; }
  .club-hero-note { top: 440px; width: min(29vw, 320px); }
}

@media (min-width: 2200px) {
  .club-hero { min-height: 40vw; }
  .club-hero-photo { object-position: center 70%; }
}

@media (max-width: 999px) {
  .club-hero { min-height: 900px; }
  .club-hero-photo { top: 400px; bottom: auto; height: 500px; object-position: 72% center; }
  .club-hero h1 { top: 200px; left: 0; width: 100%; font-size: clamp(1.2rem, 2.8vw, 1.55rem); }
  .club-hero-note { top: 270px; left: 50%; width: min(80%, 470px); transform: translateX(-50%); }
  .club-hero-quote { font-size: clamp(1.7rem, 3.5vw, 2.1rem); }
}

@media (min-width: 701px) and (max-width: 999px) {
  .club-hero-signature { margin-top: 0; }
}

@media (max-width: 700px) {
  .club-hero { --club-photo-top: clamp(365px, calc(537px - 43vw), 400px); min-height: 760px; }
  .club-hero-photo { top: var(--club-photo-top); height: calc(760px - var(--club-photo-top)); object-position: 75% center; }
  .club-hero h1 { top: 175px; font-size: clamp(1.15rem, 4vw, 1.5rem); letter-spacing: .12em; }
  .club-hero-note { top: 245px; width: min(90%, 420px); }
  .club-level-inner { grid-template-columns: 1fr; gap: .5rem; min-height: 0; padding: 2.5rem 0 3rem; }
  .club-level-art img { width: min(44vw, 195px); }
  .club-level-copy { text-align: center; margin: auto; }
  .club-level h2 { font-size: clamp(2.9rem, 9vw, 3.8rem); }
  .club-level-copy p:not(.eyebrow) { font-size: .98rem; line-height: 1.6; }
}

@media (max-width: 480px) {
  .club-hero-photo { object-position: 72% center; }
  .club-hero h1 { top: 155px; font-size: 1.05rem; }
  .club-hero-note { top: 225px; }
  .club-hero-quote { font-size: 1.8rem; }
  .club-intro { padding-top: 3.5rem; }
  .club-levels { padding: 0 1.25rem 3rem; }
  .club-level-art img { width: min(48vw, 185px); }
  .club-join { padding: 3.8rem 1.25rem 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .club-join-link { transition: none; }
}