:root { --club-red:#ff563f; --club-black:#111111; --club-cream:#eee9df; --club-lilac:#c8b8ff; }
body { color:var(--club-black); background:var(--club-cream); }
.site-shell { background:var(--club-cream); }
.site-header { position:absolute; inset:0 0 auto; z-index:30; min-height:74px; padding:0 clamp(20px,3.6vw,56px); color:var(--club-black); background:transparent; border-bottom:1px solid rgba(17,17,17,.18); backdrop-filter:none; }
.logo span { color:var(--club-black); font-size:17px; font-weight:900; letter-spacing:-.02em; }
.logo i { background:var(--club-red); }
.main-nav a { color:rgba(17,17,17,.58); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.main-nav a:hover { color:var(--club-black); }
.site-header .header-button,.site-header .messages-button { min-height:40px; color:var(--club-black)!important; background:transparent!important; border:1px solid var(--club-black)!important; border-radius:0; }
.site-header .header-button:hover,.site-header .messages-button:hover { color:#fff; background:var(--club-black); }
.menu-button span { background:var(--club-black); }

.club-main { overflow:hidden; }
.club-intro { position:relative; min-height:100svh; padding:110px clamp(20px,3.6vw,56px) 42px; display:flex; flex-direction:column; justify-content:space-between; background:var(--club-cream); }
.club-number { font-size:11px; font-weight:800; letter-spacing:.16em; }
.club-stage { position:relative; flex:1; min-height:480px; display:flex; align-items:center; }
.club-intro h1 { position:relative; z-index:4; width:100%; margin:0; color:var(--club-black); font-family:"Space Grotesk",sans-serif; font-size:clamp(76px,13.5vw,206px); font-weight:700; line-height:.72; letter-spacing:-.09em; transform:translateX(-.025em); }
.club-intro h1::after { content:"●"; display:inline-block; margin-left:.035em; color:var(--club-red); font-size:.18em; vertical-align:top; transform:translateY(-.35em); }
.club-visual { position:absolute; z-index:3; inset:42px 0 38px 42%; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:8px; }
.club-visual figure { position:relative; margin:0; overflow:hidden; background:#222; }
.club-visual img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); transition:filter .3s ease,transform .5s ease; }
.club-visual figure:hover img { filter:grayscale(0) contrast(1.02); transform:scale(1.025); }
.club-visual figcaption { position:absolute; left:10px; bottom:9px; padding:5px 7px; color:#fff; background:var(--club-black); font-size:9px; font-weight:900; letter-spacing:.12em; }
.visual-main { grid-row:1/3; }
.visual-main img { object-position:center; }
.visual-top img { object-position:center 30%; }
.visual-bottom img { object-position:center 58%; }
.club-intro-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:24px; border-top:1px solid var(--club-black); padding-top:22px; }
.club-intro-bottom p { margin:0; font-size:clamp(18px,2vw,28px); line-height:1.1; letter-spacing:-.035em; }
.club-arrow { width:64px; height:64px; display:grid; place-items:center; color:var(--club-black); border:1px solid var(--club-black); border-radius:50%; font-size:28px; }
.club-arrow:hover { color:#fff; background:var(--club-black); }
.club-join { justify-self:end; display:flex; align-items:center; gap:44px; min-width:270px; padding:18px 0; color:var(--club-black); border-bottom:2px solid var(--club-black); font-weight:800; text-transform:uppercase; }
.club-join span { font-size:22px; }

.club-directory { padding:clamp(76px,8vw,118px) clamp(20px,3.6vw,56px); color:#fff; background:var(--club-black); }
.directory-head { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; margin-bottom:42px; }
.directory-head span { color:rgba(255,255,255,.5); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.directory-head h2 { margin:14px 0 0; color:#fff; font-family:"Space Grotesk",sans-serif; font-size:clamp(54px,8vw,116px); font-weight:600; line-height:.86; letter-spacing:-.07em; }
.directory-head .member-toolbar { color:rgba(255,255,255,.5); }
.club-directory .filter-row { gap:0; margin-bottom:26px; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.club-directory .filter-button { min-height:50px; padding:0 22px; color:rgba(255,255,255,.52); background:transparent; border:0; border-right:1px solid rgba(255,255,255,.16); border-radius:0; }
.club-directory .filter-button.active,.club-directory .filter-button:hover { color:var(--club-black); background:var(--club-lilac); }
.club-directory .musician-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto; gap:12px; }
.club-directory .member-card { min-height:460px; aspect-ratio:3/4; border-radius:0; }
.club-directory .musician-gallery:has(.member-card:only-child) { grid-template-columns:1fr; }
.club-directory .musician-gallery .member-card:only-child { min-height:520px; aspect-ratio:18/7; }
.club-directory .member-card:only-child img { object-position:center 34%; }
.club-directory .profile-loading { color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.2); }
.club-directory .start-chat { right:20px; bottom:20px; color:var(--club-black); background:var(--club-lilac); border:0; border-radius:0; }
.club-directory .start-chat:hover { color:#fff; background:var(--club-red); }

.club-method { padding:clamp(76px,9vw,132px) clamp(20px,3.6vw,56px); background:var(--club-lilac); }
.method-intro { max-width:1060px; margin:0 0 clamp(70px,10vw,150px); font-family:"Space Grotesk",sans-serif; font-size:clamp(50px,7vw,102px); font-weight:600; line-height:.92; letter-spacing:-.065em; }
.method-list { border-top:2px solid var(--club-black); }
.method-list article { display:grid; grid-template-columns:70px 1fr 1fr; align-items:center; gap:22px; padding:25px 0; border-bottom:1px solid rgba(17,17,17,.35); }
.method-list b { font-size:12px; }
.method-list h3 { margin:0; font-family:"Space Grotesk",sans-serif; font-size:clamp(24px,3vw,42px); letter-spacing:-.045em; }
.method-list p { margin:0; color:rgba(17,17,17,.6); font-size:16px; }

.club-final { min-height:78svh; padding:clamp(76px,9vw,130px) clamp(20px,3.6vw,56px); display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; color:#fff; background:var(--club-red); }
.club-final p { max-width:1100px; margin:0; font-family:"Space Grotesk",sans-serif; font-size:clamp(78px,13vw,188px); font-weight:700; line-height:.76; letter-spacing:-.085em; }
.club-final button { align-self:flex-end; min-width:min(100%,360px); display:flex; justify-content:space-between; padding:20px 0; color:#fff; background:none; border:0; border-bottom:2px solid #fff; font-size:15px; font-weight:800; text-transform:uppercase; cursor:pointer; }
.club-final button span { font-size:24px; }
.site-footer { min-height:88px; color:rgba(255,255,255,.54); background:var(--club-black); border:0; }

@media(max-width:760px){
 .site-header { min-height:64px; }
 .main-nav { background:var(--club-cream); }
 .main-nav a { color:var(--club-black); }
 .club-intro { min-height:760px; padding:94px 20px 28px; }
 .club-stage { min-height:500px; display:block; padding-top:38px; }
 .club-intro h1 { font-size:clamp(70px,22vw,102px); line-height:.8; word-break:normal; max-width:100%; }
 .club-visual { inset:145px 0 24px 0; grid-template-columns:1.2fr .8fr; }
 .club-intro-bottom { grid-template-columns:1fr auto; }
 .club-intro-bottom p { font-size:18px; }
 .club-arrow { width:52px; height:52px; }
 .club-join { grid-column:1/-1; justify-self:stretch; min-width:0; }
 .club-directory,.club-method,.club-final { padding-left:20px; padding-right:20px; }
 .directory-head { grid-template-columns:1fr; }
 .club-directory .musician-gallery { grid-template-columns:1fr; }
 .club-directory .member-card,.club-directory .musician-gallery .member-card:only-child { min-height:430px; aspect-ratio:4/5; }
 .method-intro { font-size:clamp(46px,13vw,64px); }
 .method-list article { grid-template-columns:40px 1fr; gap:12px; }
 .method-list article p { grid-column:2; }
 .club-final { min-height:640px; }
 .club-final p { font-size:clamp(72px,21vw,100px); }
}