/* SELAS featured-page mockups — shared brand shell */
:root{
  --black:#0b0b0e;--black-2:#111116;--black-3:#17171d;
  --gold:#c2a05f;--gold-bright:#e8c987;--gold-dim:#8d7548;
  --cream:#ece7dc;--gray:#8f8a7e;--gray-dim:#5b5850;
  --line:rgba(194,160,95,.22);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--black);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
nav{position:sticky;top:0;z-index:20;display:flex;justify-content:center;align-items:center;padding:18px 22px;background:linear-gradient(to bottom,rgba(11,11,14,.96),rgba(11,11,14,.85));backdrop-filter:blur(8px);border-bottom:1px solid rgba(236,231,220,.06)}
.wordmark{display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap}
.wm-main{font-weight:500;font-size:13px;letter-spacing:.45em;text-indent:.45em;color:var(--gold);text-transform:uppercase}
.wm-sub{font-weight:400;font-size:10px;letter-spacing:.2em;color:var(--gray);text-transform:uppercase}
.city-tag{font-size:10px;letter-spacing:.2em;color:var(--gray-dim);text-transform:uppercase}
.page-head{text-align:center;padding:34px 24px 10px}
.page-head .eyebrow{font-size:10px;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.page-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,7vw,44px);line-height:1.1}
.page-head h1 em{font-style:italic;color:var(--gold)}
.page-head .sub{color:var(--gray);font-size:13.5px;margin-top:10px}

/* placeholder "photo": gold-lit gradient + serif S so the layout reads honestly
   without real member photos */
.ph{position:relative;background:
  radial-gradient(120% 90% at 30% 20%,rgba(194,160,95,.28),transparent 55%),
  radial-gradient(100% 80% at 75% 80%,rgba(141,117,72,.25),transparent 60%),
  var(--black-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph::after{content:"S";font-family:var(--serif);font-style:italic;font-size:96px;color:rgba(194,160,95,.28)}
.ph .badge{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);background:rgba(11,11,14,.65);border:1px solid var(--line);padding:6px 10px;backdrop-filter:blur(4px)}

.btn{display:inline-block;cursor:pointer;border:1px solid var(--gold);background:transparent;color:var(--gold);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;padding:14px 26px;transition:all .3s ease;text-align:center}
.btn:hover{background:var(--gold);color:var(--black)}
.btn.solid{background:var(--gold);color:var(--black)}

/* interested overlay (same in all mockups) */
.ov{position:fixed;inset:0;z-index:60;background:rgba(11,11,14,.92);backdrop-filter:blur(10px);display:none;align-items:flex-end;justify-content:center}
.ov.open{display:flex}
.sheet{width:100%;max-width:560px;background:var(--black-2);border-top:1px solid var(--line);padding:30px 26px calc(30px + env(safe-area-inset-bottom))}
.sheet h3{font-family:var(--serif);font-weight:300;font-size:26px;margin-bottom:4px}
.sheet h3 em{font-style:italic;color:var(--gold)}
.sheet .hint{color:var(--gray);font-size:12.5px;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
.field input,.field textarea{width:100%;background:var(--black);border:1px solid rgba(236,231,220,.13);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:16px;padding:13px 14px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:none;height:64px}
.sheet .btn{width:100%;margin-top:8px}
.sheet .close{background:none;border:none;color:var(--gray);font-size:12px;letter-spacing:.2em;text-transform:uppercase;width:100%;text-align:center;margin-top:16px;cursor:pointer}
.sheet .privacy{color:var(--gray-dim);font-size:11px;text-align:center;margin-top:14px}