/* =====================================================================
   THE CLIQUE PARTYLIST — Old Hollywood / Oscars / Ivy League
   Mobile-first. Tuned for 360–430px, enhanced at 768px and 1024px.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --blue-950:#0a1633;
  --blue-900:#0E2A6B;
  --blue-800:#14357F;
  --blue-700:#1C46A0;

  --gold-400:#E8C560;
  --gold-500:#D4AF37;
  --gold-600:#B8912B;

  --red-800:#7C1B29;
  --red-700:#8B1E2D;

  --cream:#F7F1E1;
  --ink:#0a1633;

  --gold-grad: linear-gradient(180deg,#F4DE8E 0%,#D4AF37 45%,#9E7B22 100%);
  --gold-hairline: rgba(212,175,55,.5);
  --gold-glow: rgba(212,175,55,.35);

  --silk-blue: none; /* set at runtime via JS from members.json assets.silkBlue */

  --container-max: 1100px;
  --edge: 1.25rem;

  --ease: cubic-bezier(.22,.75,.28,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);   /* ease-out-expo: slow, graceful settle */
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .8s;
  --dur-reveal: 1.1s;
}

@media (min-width:600px){ :root{ --edge: 2rem; } }
@media (min-width:1024px){ :root{ --edge: 3rem; } }

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ height:100%; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Root paints darkened deep-blue silk so the viewport can NEVER show white,
     no matter the device width, zoom, or reflow state. Cover-fit scales the
     silk to fill the whole thing; the dark layer matches the body's tone. */
  background-color:var(--blue-950);
  background-image:
    linear-gradient(rgba(10,22,51,.72), rgba(10,22,51,.72)),
    var(--silk-blue);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  overflow-x:hidden;
  width:100%;
  min-height:100svh;
  background-color:var(--blue-950);
  color:var(--cream);
  font-family:"EB Garamond", Georgia, serif;
  font-size:1rem;
  line-height:1.6;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; height:100%; }

/* fixed silk-blue texture behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:var(--silk-blue);
  background-size:cover;
  background-position:center;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212,175,55,.09), transparent 65%),
    rgba(10,22,51,.72);
  z-index:-1;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; }
a{ color:var(--gold-400); }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gold-500); color:var(--ink);
  padding:.6em 1em; z-index:1000;
  font-family:"Cinzel", serif;
}
.skip-link:focus{ left:var(--edge); top:var(--edge); }

/* ---------- Shared type utilities ---------- */
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25), 0 0 18px rgba(212,175,55,.25);
}

.eyebrow{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.72rem;
}

/* ---------- Gold Art Deco divider ---------- */
.gold-rule{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:min(220px, 70%);
  margin:1.75rem auto 0;
}
.gold-rule--tight{ margin-top:1.25rem; width:min(160px,60%); }
.gold-rule__line{
  height:1px; flex:1 1 auto;
  background:linear-gradient(90deg, transparent, var(--gold-hairline) 30%, var(--gold-hairline) 70%, transparent);
}
.gold-rule__diamond{
  display:inline-block;
  width:5px; height:5px;
  background:var(--gold-grad);
  transform:rotate(45deg);
  flex:none;
  box-shadow:0 0 6px rgba(212,175,55,.6);
}
.gold-rule__diamond--lg{ width:8px; height:8px; }

/* ---------- Buttons ---------- */
.btn-gold{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--ink);
  background:var(--gold-grad);
  border:1px solid var(--gold-600);
  border-radius:2px;
  padding:.9rem 2rem;
  min-height:44px;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold:active{ transform:translateY(0); }
.btn-gold:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }

.btn-ghost-gold{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--gold-400);
  background:transparent;
  border:1px solid var(--gold-hairline);
  border-radius:2px;
  padding:.85rem 1.5rem;
  min-height:44px;
  cursor:pointer;
  display:block;
  margin:2.5rem auto 3rem;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-ghost-gold:hover{ background:rgba(212,175,55,.1); color:var(--gold-500); }
.btn-ghost-gold:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

/* ---------- Scroll reveal ----------
   Enhances an already-visible default: content is only hidden when JS is
   active (html.js), so no-JS / headless / hidden-tab renders never ship blank.
   Ease-out-expo gives a slow, expensive settle rather than a linear slide. */
.js .reveal{
  opacity:0;
  transform:translateY(38px) scale(.985);
  transition:opacity var(--dur-reveal) var(--ease-expo),
             transform var(--dur-reveal) var(--ease-expo);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:0; transform:none; transition:opacity .5s ease; }
  .js .reveal.is-visible{ opacity:1; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3.5rem var(--edge) 5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0;
  background-image:var(--silk-blue);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  /* brighter + more contrast so the silk folds read clearly, not flat navy */
  filter:brightness(.72) saturate(1.15) contrast(1.08);
  z-index:-3;
  opacity: 30%;
}
.hero__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 8%, rgba(232,197,96,.26), transparent 60%),
    radial-gradient(ellipse 120% 75% at 50% 100%, rgba(10,22,51,.6), transparent 60%),
    linear-gradient(180deg, rgba(10,22,51,.42) 0%, rgba(10,22,51,.2) 38%, rgba(10,22,51,.6) 100%);
  z-index:-2;
  opacity: 70%;
  mix-blend-mode: color-dodge;
}
.hero__sparkle{
  position:absolute;
  top:8%;
  left:50%;
  transform:translateX(-50%);
  opacity:.9;
  animation:sparkle-pulse 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.6));
}
@keyframes sparkle-pulse{
  0%,100%{ opacity:.55; transform:translateX(-50%) scale(.9) rotate(0deg); }
  50%{ opacity:1; transform:translateX(-50%) scale(1.08) rotate(8deg); }
}
@media (prefers-reduced-motion:reduce){
  .hero__sparkle{ animation:none; }
}

.hero__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:640px;
}
.hero__eyebrow{
  font-family:"Cinzel", serif;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.62rem;
  color:var(--gold-400);
  opacity:.85;
  margin-bottom:1.5rem;
  min-height:1em;
}
.hero__eyebrow--bottom{ margin:1.25rem 0 0; }
.hero__logo{
  width:min(78vw,420px);
  height:auto;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(212,175,55,.25));
}
.hero__tagline{
  font-family:"Cinzel", serif;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:clamp(1.5rem, 6vw, 2.25rem);
  margin-top:1rem;
}

.hero__scroll-cue{
  position:absolute;
  bottom:1.75rem;
  left:50%;
  transform:translateX(-50%);
  background:none;
  border:1px solid var(--gold-hairline);
  border-radius:50%;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-400);
  cursor:pointer;
  animation:bounce-cue 2.2s ease-in-out infinite;
}
@keyframes bounce-cue{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,6px); }
}
@media (prefers-reduced-motion:reduce){
  .hero__scroll-cue{ animation:none; }
}
.hero__scroll-cue:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; }

/* =====================================================================
   BIO
   ===================================================================== */
.bio{
  padding:5rem var(--edge);
  display:flex;
  justify-content:center;
}
.bio__frame{
  position:relative;
  max-width:640px;
  width:100%;
  padding:3rem 1.75rem;
  text-align:center;
  background:linear-gradient(180deg, rgba(20,53,127,.35), rgba(10,22,51,.15));
  border:1px solid var(--gold-hairline);
  box-shadow:0 0 40px rgba(212,175,55,.08), inset 0 0 60px rgba(10,22,51,.4);
}
.bio__corner{
  position:absolute;
  width:22px; height:22px;
  border:1px solid var(--gold-500);
  opacity:.85;
}
.bio__corner--tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.bio__corner--tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.bio__corner--bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.bio__corner--br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.bio__eyebrow{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--gold-400);
  margin-bottom:1.25rem;
}
.bio__text{
  font-family:"EB Garamond", serif;
  font-size:1.15rem;
  line-height:1.85;
  color:var(--cream);
}
.bio__text::first-line{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:1.3rem;
}

/* =====================================================================
   LINEUP
   ===================================================================== */
.lineup{
  padding:5rem var(--edge) 4rem;
  max-width:var(--container-max);
  margin:0 auto;
}
.lineup__head{ text-align:center; margin-bottom:2.75rem; }
.lineup__eyebrow{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:.7rem;
  color:var(--gold-400);
  margin-bottom:.6rem;
}
.lineup__heading{
  font-family:"Playfair Display", serif;
  font-weight:800;
  font-style:italic;
  font-size:clamp(1.9rem, 6vw, 2.9rem);
  color:var(--cream);
}

.lineup__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.1rem 1rem;
}
@media (min-width:768px){
  .lineup__grid{ grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
}
@media (min-width:1024px){
  .lineup__grid{ grid-template-columns:repeat(4, 1fr); gap:2rem; }
}

.member-card{
  appearance:none;
  background:none;
  border:none;
  color:inherit;
  padding:0;
  display:block;
  width:100%;
  text-align:center;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease);
}
.member-card:hover, .member-card:focus-visible{ transform:translateY(-4px); }
.member-card:focus-visible{ outline:2px solid var(--gold-500); outline-offset:6px; }
.member-card:active{ transform:translateY(-1px); }

.member-card--featured{
  grid-column:1 / -1;
}
.member-card--featured .member-card__frame{
  max-width:340px;
  margin:0 auto;
  aspect-ratio:4/5;
}
@media (min-width:768px){
  .member-card--featured .member-card__frame{ max-width:380px; }
}

.member-card__frame{
  display:block;
  position:relative;
  aspect-ratio:3/4;
  border-radius:999px 999px 10px 10px;
  overflow:hidden;
  border:2px solid var(--gold-500);
  box-shadow:
    0 0 0 1px rgba(10,22,51,.6),
    0 0 0 5px rgba(212,175,55,.16),
    0 10px 26px rgba(0,0,0,.5),
    inset 0 0 22px rgba(0,0,0,.55);
  background:var(--blue-900);
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.member-card:hover .member-card__frame,
.member-card:focus-visible .member-card__frame{
  box-shadow:
    0 0 0 1px rgba(10,22,51,.6),
    0 0 0 6px rgba(212,175,55,.32),
    0 14px 34px rgba(0,0,0,.55),
    inset 0 0 22px rgba(0,0,0,.5),
    0 0 30px rgba(212,175,55,.4);
}
.member-card__frame::after{
  content:"";
  position:absolute; inset:5px;
  border:1px solid rgba(212,175,55,.55);
  border-radius:999px 999px 6px 6px;
  pointer-events:none;
}
.member-card__photo{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}

.member-card__plaque{
  margin-top:1.15rem;
  padding:0 .25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.member-card__name{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:1.1rem;
  line-height:1.24;
  color:var(--cream);
}
.member-card__position{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.66rem;
  margin-top:.4rem;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* Secondary "clickable" affordance under each name. */
.member-card__cta{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:.8rem;
  padding:.42rem .95rem;
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.58rem;
  color:var(--gold-400);
  border:1px solid var(--gold-hairline);
  border-radius:999px;
  background:rgba(212,175,55,.06);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.member-card__cta-arrow{ font-size:1.1em; line-height:0; margin-top:-.05em; transition:transform var(--dur-fast) var(--ease); }
.member-card:hover .member-card__cta,
.member-card:focus-visible .member-card__cta{
  background:rgba(212,175,55,.18);
  color:var(--cream);
  border-color:var(--gold-500);
  box-shadow:0 0 16px rgba(212,175,55,.28);
}
.member-card:hover .member-card__cta-arrow,
.member-card:focus-visible .member-card__cta-arrow{ transform:translateX(3px); }
/* Featured-only decorative tagline: hidden by default, revealed on desktop. */
.member-card__quote{ display:none; }

/* =====================================================================
   BANNER
   ===================================================================== */
.banner{
  position:relative;
  padding:5rem var(--edge);
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(160deg, var(--red-800) 0%, var(--blue-900) 55%, var(--blue-950) 100%);
  border-top:1px solid var(--gold-hairline);
  border-bottom:1px solid var(--gold-hairline);
}
.banner__glow{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212,175,55,.22), transparent 65%);
  pointer-events:none;
}
.banner__inner{ position:relative; max-width:520px; margin:0 auto; }
.banner__tagline{
  font-family:"Playfair Display", serif;
  font-weight:800;
  font-style:italic;
  font-size:clamp(1.6rem, 6vw, 2.2rem);
  margin-bottom:2rem;
}
.banner__hashtags{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin-bottom:2.75rem;
}
.banner__hashtags li{
  font-family:"Cinzel", serif;
  font-weight:700;
  letter-spacing:.08em;
  font-size:clamp(1.05rem, 4.4vw, 1.4rem);
  color:var(--cream);
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.banner__hashtags li:first-child{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:clamp(1.2rem, 5.2vw, 1.65rem);
}

.banner__qr{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.banner__qr-frame{
  padding:.6rem;
  background:var(--cream);
  border:3px solid var(--gold-500);
  border-radius:4px;
  box-shadow:0 0 24px rgba(212,175,55,.35), 0 8px 20px rgba(0,0,0,.4);
}
.banner__qr-frame img{ width:150px; height:150px; object-fit:contain; }
.banner__qr-caption{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--gold-400);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
  text-align:center;
  padding:3rem var(--edge) 3.5rem;
  border-top:1px solid var(--gold-hairline);
  background:var(--blue-950);
}
.site-footer__logo{
  width:42px; height:42px;
  object-fit:contain;
  margin:0 auto 1rem;
  opacity:.9;
}
.site-footer__party{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--gold-400);
  margin-bottom:.5rem;
}
.site-footer__meta{
  font-family:"EB Garamond", serif;
  font-size:.85rem;
  color:rgba(247,241,225,.7);
  margin-bottom:.35rem;
}
.site-footer__year{
  font-family:"EB Garamond", serif;
  font-size:.78rem;
  color:rgba(247,241,225,.45);
}

/* =====================================================================
   OVERLAYS (shared)
   ===================================================================== */
.overlay{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
}
.overlay[hidden]{ display:none; }
.overlay__backdrop{
  position:absolute; inset:0;
  background:rgba(6,12,28,.82);
  backdrop-filter:blur(3px);
}
.overlay__close{
  appearance:none;
  background:rgba(10,22,51,.6);
  border:1px solid var(--gold-hairline);
  color:var(--gold-400);
  width:40px; height:40px;
  min-width:44px; min-height:44px;
  border-radius:50%;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.overlay__close:hover{ background:rgba(212,175,55,.15); color:var(--cream); }
.overlay__close:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

/* ---------- Intro modal ---------- */
.intro-card{
  position:relative;
  z-index:1;
  width:min(92vw, 400px);
  max-height:88svh;
  overflow-y:auto;
  background:linear-gradient(180deg, var(--blue-800), var(--blue-950));
  border:1px solid var(--gold-500);
  border-radius:6px;
  padding:1.75rem 1.5rem 2rem;
  text-align:center;
  box-shadow:0 0 0 1px rgba(10,22,51,.6), 0 20px 60px rgba(0,0,0,.6), 0 0 50px rgba(212,175,55,.18);
  opacity:0;
  transform:scale(.92) translateY(10px);
  transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.overlay--intro.is-open .intro-card{
  opacity:1;
  transform:scale(1) translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .intro-card{ transition:none; }
}
.intro-card .overlay__close{
  position:absolute;
  top:.75rem; right:.75rem;
}
.intro-card__frame{
  width:100%;
  aspect-ratio:4/3;
  border-radius:60px 60px 8px 8px;
  overflow:hidden;
  border:2px solid var(--gold-500);
  box-shadow:0 0 0 5px rgba(212,175,55,.14), inset 0 0 30px rgba(0,0,0,.5);
  margin-bottom:1.25rem;
}
.intro-card__photo{ width:100%; height:100%; object-fit:cover; }
.intro-card__eyebrow{
  font-family:"Cinzel", serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.05rem;
  color:var(--cream);
  margin-bottom:.6rem;
}
.intro-card__tagline{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.85rem;
  margin-bottom:1.5rem;
}

/* ---------- Credentials overlay ---------- */
.overlay--credentials{ align-items:stretch; justify-content:stretch; }
.overlay--credentials .overlay__backdrop{
  background-image:var(--silk-blue);
  background-size:cover;
  background-position:center;
}
.overlay--credentials .overlay__backdrop::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(6,12,28,.88);
}
.cred-sheet{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform var(--dur-med) var(--ease);
  background:linear-gradient(180deg, rgba(14,42,107,.35), rgba(10,22,51,.55));
}
.overlay--credentials.is-open .cred-sheet{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .cred-sheet{ transition:none; }
}
.cred-sheet__topbar{
  display:flex;
  justify-content:flex-end;
  padding:1rem var(--edge);
  flex:none;
}
.cred-sheet__scroll{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 var(--edge) 2rem;
}
.cred-sheet__head{ text-align:center; padding-bottom:1rem; }
.cred-sheet__frame{
  width:130px; height:130px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--gold-500);
  box-shadow:0 0 0 5px rgba(212,175,55,.16), 0 8px 22px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.5);
}
.cred-sheet__photo{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.cred-sheet__name{
  font-family:"Playfair Display", serif;
  font-weight:800;
  font-size:1.5rem;
  color:var(--cream);
}
.cred-sheet__position{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.75rem;
  margin-top:.5rem;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.cred-sheet__body{
  max-width:640px;
  margin:1.5rem auto 0;
}
.cred-section{ margin-bottom:2.25rem; }
.cred-section__title{
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--gold-400);
  padding-bottom:.6rem;
  border-bottom:1px solid var(--gold-hairline);
  margin-bottom:1.1rem;
}
.cred-section__list li{
  position:relative;
  padding-left:1.4rem;
  font-family:"EB Garamond", serif;
  font-size:1.02rem;
  line-height:1.65;
  color:var(--cream);
  margin-bottom:.65rem;
}
.cred-section__list li::before{
  content:"\25C6";
  position:absolute;
  left:0; top:.05em;
  color:var(--gold-500);
  font-size:.65em;
  text-shadow:0 0 6px rgba(212,175,55,.5);
}

.cred-empty{
  text-align:center;
  padding:3rem 1rem 1rem;
}
.cred-empty__moon{
  font-size:2.6rem;
  color:var(--gold-400);
  display:block;
  margin-bottom:1.25rem;
  text-shadow:0 0 20px rgba(212,175,55,.4);
}
.cred-empty__text{
  font-family:"EB Garamond", serif;
  font-style:italic;
  font-size:1.15rem;
  line-height:1.7;
  color:rgba(247,241,225,.9);
  max-width:360px;
  margin:0 auto;
}

/* =====================================================================
   Utility: visually hidden (for future use)
   ===================================================================== */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =====================================================================
   PRELOADER  (Old Hollywood curtain — gold ring, crescent, shimmer)
   ===================================================================== */
body.is-loading{ overflow:hidden; }
.preloader{
  position:fixed; inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(28,70,160,.55), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, #0E2A6B 0%, #0a1633 70%);
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  animation:pl-rise .9s var(--ease) both;
}
@keyframes pl-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.preloader__emblem{ width:140px; height:140px; filter:drop-shadow(0 0 26px rgba(212,175,55,.45)); }
.preloader__ring{
  transform-origin:70px 70px;
  stroke-dasharray:150 240;
  animation:pl-spin 1.5s linear infinite;
}
.preloader__ring2{
  transform-origin:70px 70px;
  animation:pl-spin 3.4s linear infinite reverse;
}
@keyframes pl-spin{ to{ transform:rotate(360deg); } }
.preloader__moon{
  transform-origin:70px 70px;
  animation:pl-moon 2.6s ease-in-out infinite;
}
@keyframes pl-moon{ 0%,100%{ opacity:.9; } 50%{ opacity:1; } }
.preloader__star{
  transform-origin:70px 28px;
  animation:pl-star 2.2s ease-in-out infinite;
}
@keyframes pl-star{ 0%,100%{ opacity:.5; transform:scale(.85) rotate(0deg); } 50%{ opacity:1; transform:scale(1.12) rotate(10deg); } }

.preloader__word{
  margin-top:1.6rem;
  font-family:"Playfair Display", serif;
  font-weight:800;
  font-size:clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing:.02em;
  background:linear-gradient(100deg,#9E7B22 0%,#F4DE8E 42%,#FFF6D6 50%,#F4DE8E 58%,#9E7B22 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:pl-shimmer 2.6s linear infinite;
}
@keyframes pl-shimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.preloader__sub{
  margin-top:.6rem;
  font-family:"Cinzel", serif;
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  font-size:.68rem;
  color:var(--gold-400);
  opacity:.85;
  padding-left:.36em;
}
.preloader__bar{
  margin-top:1.6rem;
  width:150px; height:2px;
  background:rgba(212,175,55,.16);
  border-radius:2px;
  overflow:hidden;
  display:block;
}
.preloader__bar i{
  display:block; height:100%;
  width:40%;
  background:var(--gold-grad);
  box-shadow:0 0 12px rgba(212,175,55,.7);
  animation:pl-load 1.35s var(--ease) infinite;
}
@keyframes pl-load{
  0%{ transform:translateX(-120%); }
  60%{ transform:translateX(150%); }
  100%{ transform:translateX(280%); }
}
@media (prefers-reduced-motion:reduce){
  .preloader__ring,.preloader__ring2,.preloader__moon,.preloader__star,
  .preloader__word,.preloader__bar i,.preloader__stage{ animation:none; }
  .preloader__word{ background-position:0 0; }
}

/* =====================================================================
   DESKTOP ENHANCEMENTS  (min-width only — mobile layout is untouched)
   ===================================================================== */
@media (min-width:1024px){
  /* --- Hero: grander --- */
  .hero{ padding:4rem var(--edge) 6rem; }
  .hero__logo{ width:min(46vw, 560px); }
  .hero__eyebrow{ font-size:.72rem; }
  .hero__tagline{ font-size:clamp(2.2rem, 4vw, 3rem); }
  .hero__bg{ background-position:center 22%; }

  /* --- Bio: wide centerpiece --- */
  .bio{ padding:7rem var(--edge); }
  .bio__frame{
    max-width:860px;
    padding:4rem 4rem 3.5rem;
  }
  .bio__corner{ width:34px; height:34px; }
  .bio__eyebrow{ font-size:.9rem; letter-spacing:.28em; margin-bottom:1.75rem; }
  .bio__text{ font-size:1.4rem; line-height:1.95; }
  .bio__text::first-line{ font-size:1.65rem; }

  /* --- Lineup: more air --- */
  .lineup{ padding:7rem var(--edge) 6rem; }
  .lineup__head{ margin-bottom:3.75rem; }
  .lineup__grid{ gap:2.25rem 2rem; }

  /* --- Featured President: two-column editorial showcase --- */
  .member-card--featured{
    display:grid;
    grid-template-columns:320px 1fr;
    align-items:center;
    gap:3.5rem;
    max-width:880px;
    margin:1rem auto 3.5rem;
    padding:.5rem 0 3.5rem;
    text-align:left;
    border-bottom:1px solid var(--gold-hairline);
  }
  .member-card--featured .member-card__frame{ max-width:320px; margin:0; aspect-ratio:4/5; }
  .member-card--featured .member-card__plaque{ margin-top:0; padding:0; align-items:flex-start; text-align:left; }
  .member-card--featured .member-card__cta{ font-size:.68rem; padding:.6rem 1.2rem; margin-top:1.6rem; }
  .member-card--featured .member-card__name{
    font-size:clamp(2rem, 3.4vw, 2.9rem);
    line-height:1.08;
  }
  .member-card--featured .member-card__position{
    font-size:.9rem;
    letter-spacing:.2em;
    margin-top:.85rem;
  }
  .member-card--featured .member-card__quote{
    display:block;
    margin-top:1.5rem;
    padding-top:1.4rem;
    border-top:1px solid var(--gold-hairline);
    font-family:"Playfair Display", serif;
    font-style:italic;
    font-weight:700;
    font-size:1.5rem;
    max-width:22ch;
    background:var(--gold-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .member-card--featured:hover{ transform:none; }
  .member-card--featured:hover .member-card__frame{ transform:translateY(-4px); }

  /* --- Banner: hashtags beside QR --- */
  .banner{ padding:6rem var(--edge); }
  .banner__inner{
    max-width:940px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    column-gap:4rem;
    row-gap:1.5rem;
    text-align:left;
  }
  .banner__tagline{ grid-column:1 / -1; text-align:center; margin-bottom:.5rem; font-size:2.6rem; }
  .banner__hashtags{ margin-bottom:0; gap:1.1rem; }
  .banner__hashtags li{ font-size:1.5rem; }
  .banner__hashtags li:first-child{ font-size:1.8rem; }
  .banner__qr{ align-self:center; }
  .banner__qr-frame img{ width:170px; height:170px; }

  /* --- Footer --- */
  .site-footer{ padding:3.5rem var(--edge) 4rem; }
  .site-footer__logo{ width:52px; height:52px; }
  .site-footer__party{ font-size:1rem; }
}

/* Non-featured member card hover only lifts the frame on desktop (finer feel) */
@media (min-width:1024px) and (hover:hover){
  .member-card:not(.member-card--featured):hover{ transform:none; }
  .member-card:not(.member-card--featured):hover .member-card__frame{ transform:translateY(-6px); }
}

/* --- Wide desktop: 5-across slate (15 members = 3 clean rows) --- */
@media (min-width:1280px){
  :root{ --container-max:1200px; }
  .lineup__grid{ grid-template-columns:repeat(5, 1fr); }
  .bio__text{ font-size:1.5rem; }
}