/* ==========================================================================
   Al-Ghazali Club at Rutgers — Legacy of Light III
   Design language taken from the club's own Instagram identity
   (@rutgersghazaliclub): warm cream ground, deep maroon ink, tan organic
   blobs bleeding off the corners, gold palm-fan, four-point sparkles.
   Every colour below is sampled from that artwork.
   ========================================================================== */

/* ---------- palettes ---------- */
:root,
[data-palette="ghazali"]{
  --paper:      #EFEAD4;   /* sampled: IG post ground            */
  --paper-hi:   #F8F4E4;
  --paper-lo:   #E4DDC2;
  --ink:        #57292C;   /* measured: "Biweekly Online Class", script  */
  --ink-deep:   #35171B;
  --ink-soft:   #6F533B;   /* measured: "Al Ghazali Presents" subtext    */
  --wine:       #7B4249;   /* measured: the big title + the quote        */
  --tan:        #BB9773;   /* sampled: corner blobs, base band   */
  --gold:       #B4894F;
  --gold-hi:    #D8C08C;   /* sampled: bismillah highlight       */
  --gold-deep:  #8A6635;   /* fan gradient only — never used as text */
  --ink-mute:   #6D533C;
  --shadow-rgb: 60 32 26;
}
[data-palette="aubergine"]{
  --paper:      #EFE9DC;
  --paper-hi:   #F8F3E9;
  --paper-lo:   #E2DACA;
  --ink:        #2E1B3C;
  --ink-deep:   #1B0F25;
  --ink-soft:   #5A4568;
  --wine:       #4C2F5F;
  --tan:        #B09678;
  --gold:       #A98450;
  --gold-hi:    #D3BB8A;
  --gold-deep:  #74542B;
  --ink-mute:   #5F4A6D;
  --shadow-rgb: 40 26 52;
}
[data-palette="forest"]{
  --paper:      #F6EBD7;
  --paper-hi:   #FCF6E9;
  --paper-lo:   #EFE2CA;
  --ink:        #183F2A;
  --ink-deep:   #0E2A1B;
  --ink-soft:   #3A5A47;
  --wine:       #2C5A3E;
  --tan:        #B79A6B;
  --gold:       #8A6A37;
  --gold-hi:    #CBAE74;
  --gold-deep:  #7A5D2F;
  --ink-mute:   #4A6551;
  --shadow-rgb: 40 34 20;
}

:root{
  --gap: 42px;
  --edge: clamp(18px, 4vw, 46px);
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-caps: "Cormorant SC", "EB Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 68ch;
  --ease: cubic-bezier(.22,.61,.36,1);
  --z-deco: 0;
  --z-pal: 40;
  --z-lb: 50;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

/* Grain utility — keeps large flat fills from banding / dithering. */
.noise-overlay{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ==========================================================================
   DECOR — the Instagram vocabulary, living in the margins around the flyer
   ========================================================================== */
.deco{
  position:absolute;
  top:0; left:0; right:0;
  height:min(1100px, 130vh);   /* decorate the first screenful, then get out of the way */
  z-index:var(--z-deco);
  pointer-events:none;
  overflow:hidden;
}
.deco__blob{ position:absolute; fill:var(--tan); transition:fill .45s var(--ease); }
.deco__blob--tl{ top:0; left:0;  width:clamp(120px,17vw,300px); height:clamp(100px,14vw,250px); }
.deco__blob--tr{ top:0;    right:0; width:clamp(110px,15vw,300px); height:clamp(84px,11vw,220px); }
.deco__blob--bl{ bottom:0; left:0;  width:clamp(100px,13vw,260px); height:clamp(90px,11vw,220px); }
.deco__blob--br{ bottom:0; right:0; width:clamp(110px,14vw,280px); height:clamp(96px,12vw,240px); }

.deco__fan{ position:absolute; width:clamp(74px,9vw,168px); height:auto; }
.deco__fan--tl{ top:clamp(-8px,-.6vw,0px);   left:clamp(24px,3.4vw,70px); }
.deco__fan--br{ bottom:clamp(46px,5vw,84px); right:clamp(10px,1.6vw,32px); transform:rotate(184deg); }

.spark{ position:absolute; fill:var(--wine); opacity:.85; transition:fill .45s var(--ease); }
.spark--a{ top:24%;    left:clamp(52px,6.4vw,126px);  width:clamp(14px,1.6vw,27px); }
.spark--b{ top:13%;    right:clamp(56px,6.8vw,134px); width:clamp(11px,1.3vw,21px); opacity:.7; }
.spark--c{ bottom:30%; left:clamp(86px,10vw,196px);   width:clamp(10px,1.2vw,19px); opacity:.7; }
.spark--d{ top:52%;    right:clamp(40px,4.8vw,96px);  width:clamp(13px,1.5vw,25px); opacity:.8; }

/* the decor is scenery — never let it crowd a small screen */
@media (max-width:820px){
  .deco__fan--br, .deco__fan--tl, .spark--b, .spark--c{ display:none; }
  .deco__blob{ opacity:.78; }
}

/* ---------- a11y ---------- */
.skip{
  position:fixed; top:10px; left:10px; z-index:100;
  transform:translateY(-160%);
  background:var(--ink); color:var(--paper-hi);
  padding:.7rem 1.1rem; border-radius:999px; text-decoration:none;
  font-family:var(--font-caps);
  font-size:.9rem; font-weight:600; letter-spacing:.06em;
  transition:transform .2s var(--ease);
}
.skip:focus-visible{ transform:translateY(0); }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}


/* ==========================================================================
   MASTHEAD — compact horizontal lockup; the intro animation lands here
   ========================================================================== */
.mast{
  position:relative; z-index:20;
  padding:clamp(14px,1.8vw,22px) 0 clamp(12px,1.6vw,18px);
}
.mast__lockup{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.2vw,16px);
}
.mast__emblem{
  width:var(--mast-emblem, 40px);
  aspect-ratio:512 / 517;
  flex:none;
  /* fallback: the mask PNG is black-ink-on-transparent, so it stands alone */
  background:url("../img/emblem-mask.png") center/contain no-repeat;
}
.mast__wordmark{
  margin:0;
  width:var(--mast-word, 168px);
  aspect-ratio:480 / 42;
  background:url("../img/wordmark-mask.png") center/contain no-repeat;
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .mast__emblem{
    background:var(--ink);
    -webkit-mask:url("../img/emblem-mask.png") center/contain no-repeat;
            mask:url("../img/emblem-mask.png") center/contain no-repeat;
  }
  .mast__wordmark{
    background:var(--ink);
    -webkit-mask:url("../img/wordmark-mask.png") center/contain no-repeat;
            mask:url("../img/wordmark-mask.png") center/contain no-repeat;
  }
}
.mast__sub{
  margin:.42rem 0 0;
  text-align:center;
  font-family:var(--font-caps);
  font-size:.95rem; font-weight:600;
  text-transform:none; letter-spacing:.14em;
  color:var(--ink-soft);
}
.mast::after{
  content:"";
  display:block;
  width:clamp(46px,5vw,74px); height:1px;
  margin:clamp(12px,1.4vw,18px) auto 0;
  background:color-mix(in srgb, var(--ink) 30%, transparent);
}

/* visually hidden but read aloud */
.u-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink);
  color:var(--paper-hi) !important;
  text-decoration:none;
  padding:.68rem 1.35rem;
  min-height:44px;
  border-radius:999px;                 /* soft, matching the IG shapes */
  font-family:var(--font-caps);
  font-size:1.08rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
  transition:background-color .25s var(--ease);
}
.btn:hover{ background:var(--wine); }
.btn::after{ display:none; }

/* ==========================================================================
   STAGE + POSTER
   ========================================================================== */


.poster{
  position:relative;
  margin:0;
  width:-moz-fit-content;
  width:fit-content;
}

.poster__btn{
  display:block;
  padding:0; border:0; background:none;
  line-height:0;
  cursor:pointer;
  position:relative;
  border-radius:10px;                  /* soft corners, matching the IG shapes */
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:
    0 2px 4px   rgb(var(--shadow-rgb) / .09),
    0 12px 28px -10px rgb(var(--shadow-rgb) / .24),
    0 38px 70px -26px rgb(var(--shadow-rgb) / .32);
}
.poster__btn img{
  max-width:100%;
  width:auto; height:auto;
  border-radius:10px;
}
.poster__btn:hover{
  transform:translateY(-4px);
  box-shadow:
    0 2px 4px   rgb(var(--shadow-rgb) / .10),
    0 18px 36px -10px rgb(var(--shadow-rgb) / .28),
    0 48px 84px -26px rgb(var(--shadow-rgb) / .36);
}

.poster__zoom{
  position:absolute; right:14px; bottom:14px;
  width:42px; height:42px;
  display:grid; place-items:center;
  color:var(--paper-hi);
  background:rgb(var(--shadow-rgb) / .58);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:50%;
  opacity:0;
  transition:opacity .25s var(--ease);
}
.poster__zoom svg{ width:19px; height:19px; }
.poster__btn:hover .poster__zoom,
.poster__btn:focus-visible .poster__zoom{ opacity:1; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{
  position:fixed; inset:0;
  z-index:var(--z-lb);
  display:grid; place-items:center;
  padding:clamp(14px,3vw,40px);
}
.lb[hidden]{ display:none; }
/* real two-stop gradient, never a flat dark fill */
.lb__scrim{
  position:absolute; inset:0;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--ink-deep) 94%, #000) 0%,
    var(--ink-deep) 55%,
    color-mix(in srgb, var(--ink-deep) 88%, #000) 100%);
}
.lb__grain{
  position:absolute; inset:0;
  opacity:.035;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.lb__img{
  position:relative;
  max-height:calc(100dvh - 5rem);
  max-width:100%;
  width:auto;
  border-radius:10px;
  box-shadow:0 30px 80px -20px rgb(0 0 0 / .6);
  animation:pop .3s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.975); } to{ opacity:1; transform:none; } }

.lb__close{
  position:absolute; top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px);
  width:46px; height:46px;
  display:grid; place-items:center;
  background:rgb(255 255 255 / .09);
  color:#fff;
  border:1px solid rgb(255 255 255 / .22);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .2s var(--ease);
}
.lb__close:hover{ background:rgb(255 255 255 / .2); }
.lb__close svg{ width:20px; height:20px; }

body.is-locked{ overflow:hidden; }

/* ==========================================================================
   PREVIEW-ONLY palette switcher (delete with its markup to ship)
   ========================================================================== */
.pal[hidden]{ display:none; }
.pal{ position:fixed; right:var(--edge); bottom:var(--edge); z-index:var(--z-pal); }
.pal__toggle{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper-hi);
  border:1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 6px 20px -6px rgb(var(--shadow-rgb) / .3);
  transition:background-color .2s var(--ease);
}
.pal__toggle:hover{ background:var(--paper-lo); }
.pal__toggle svg{ width:21px; height:21px; }

.pal__list{
  position:absolute; right:0; bottom:58px;
  width:262px;
  background:var(--paper-hi);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:12px;
  box-shadow:0 18px 44px -14px rgb(var(--shadow-rgb) / .34);
  padding:.5rem;
}
.pal__list[hidden]{ display:none; }
.pal__title{
  margin:.4rem .55rem .55rem;
  font-size:.95rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink-soft);
}
.pal__opt{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:.7rem;
  align-items:center;
  width:100%;
  padding:.55rem;
  border-radius:8px;
  background:none; border:0; text-align:left; cursor:pointer;
  font-family:var(--font-caps);
  transition:background-color .18s var(--ease);
}
.pal__opt:hover{ background:var(--paper-lo); }
.pal__opt[aria-current="true"]{ background:color-mix(in srgb, var(--tan) 32%, transparent); }
.pal__opt i{
  grid-row:1 / span 2;
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgb(var(--shadow-rgb) / .25);
  background:linear-gradient(135deg, var(--a) 0 42%, var(--b) 42% 78%, var(--c) 78% 100%);
}
.pal__opt b{ font-size:.95rem; font-weight:700; }
.pal__opt em{ font-size:.82rem; font-style:normal; color:var(--ink-soft); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:860px){
  :root{ --gap:22px; }
  .btn{ padding:.62rem 1.1rem; }
}

@media (max-width:520px){
  :root{ --edge:15px; }
  .pal{ right:14px; bottom:14px; }
  .pal__list{ width:224px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .poster__btn:hover{ transform:none; }
}


/* ==========================================================================
   TYPE SCALE + LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--edge); }
.wrap--prose{ max-width:716px; }
/* inside a prose wrap the column IS the wrap, so it lines up with the centred head */
.wrap--prose :is(.prose,.prose-lead,.empty){ max-width:none; }

.section{ position:relative; z-index:1; padding:clamp(56px,7vw,104px) 0; }
.section--top0{ padding-top:clamp(34px,4vw,58px); }
.section--tint{ background:color-mix(in srgb, var(--tan) 17%, var(--paper)); }

.eyebrow{
  margin:0 0 .85rem;
  font-family:var(--font-caps);
  font-size:1.18rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink-soft);
}
.eyebrow--c{ text-align:center; }
.eyebrow__dot{ color:var(--ink-soft); letter-spacing:0; font-size:.82em; }

.h2{
  margin:0 0 clamp(28px,3.4vw,48px);
  font-family:var(--font-caps);
  font-size:clamp(2.15rem,4vw,3.15rem);
  font-weight:700; line-height:1.08;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink);
}
.h2--c{ text-align:center; }

.lead{
  font-family:var(--font-display);
  font-size:clamp(1.08rem,1.55vw,1.3rem);
  font-weight:700; line-height:1.5;
  color:var(--wine);
  max-width:44ch;
  margin:0 0 1.9rem;
}
.prose-lead{
  font-family:var(--font-display);
  font-size:clamp(1.12rem,1.8vw,1.42rem);
  font-weight:700; line-height:1.5;
  color:var(--wine);
  margin:0 0 2rem;
  max-width:var(--measure);
}
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.35em; }
.prose p:last-child{ margin-bottom:0; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* ==========================================================================
   SPEAKER CARDS
   ========================================================================== */
.empty{
  color:var(--ink-soft);
  background:repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--tan) 16%, transparent) 0 8px,
    transparent 8px 16px);
  border:1px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius:10px;
  padding:1rem 1.1rem;
  font-style:italic;
}
.empty{
  display:flex; align-items:center; gap:.8rem;
  max-width:var(--measure);
  padding:1rem 1.2rem;
}
.empty__mark{ color:var(--ink-soft); font-size:1.3rem; font-style:normal; }
.empty__text{ margin:0; }

/* ==========================================================================
   NOTES (bulleted asides on About)
   ========================================================================== */


/* ==========================================================================
   FOOTER — the tan base band from the Instagram artwork
   ========================================================================== */
.foot{
  position:relative; z-index:1;
  background:var(--tan);
  transition:background-color .45s var(--ease);
}
.foot__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; flex-wrap:wrap;
  padding-block:clamp(22px,3vw,34px);
}
.foot__mark{
  width:34px; height:34px; flex:none;
  background:url("../img/emblem-mask.png") center/contain no-repeat;
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .foot__mark{
    background:var(--ink-deep);
    -webkit-mask:url("../img/emblem-mask.png") center/contain no-repeat;
            mask:url("../img/emblem-mask.png") center/contain no-repeat;
  }
}
.foot__name{
  margin:0; flex:1 1 auto;
  font-family:var(--font-caps);
  font-size:1.1rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink-deep);
}
.foot__ig{
  color:var(--ink-deep);
  font-family:var(--font-caps);
  font-size:1.1rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--ink-deep) 45%, transparent);
  padding-bottom:2px;
  min-height:44px; display:inline-flex; align-items:center;
}
.foot__ig:hover{ border-bottom-color:var(--ink-deep); }


/* ==========================================================================
   RESPONSIVE — content
   ========================================================================== */
@media (max-width:560px){
  .foot__inner{ justify-content:center; text-align:center; }
  .foot__name{ flex:1 1 100%; }
}


/* The poster's script flourish ("Registration Required!") is available but
   unused — nothing on the site has copy that calls for it. To add it, load
   Kaushan Script and apply .script to a single short line.
.script{ font-family:"Kaushan Script",cursive; font-weight:400; color:var(--ink); letter-spacing:0; }
*/


/* ==========================================================================
   CONFERENCE ROW — mirrors the live site's 70 / 30 column split
   ========================================================================== */
.lede{
  position:relative; z-index:1;
  --lede-pad:70px;
  padding:clamp(8px,1.2vw,18px) 0 clamp(40px,5vw,72px);
}
.lede__grid{
  display:grid;
  grid-template-columns:minmax(0,70fr) minmax(260px,30fr);
  gap:clamp(26px,3.4vw,52px);
  align-items:start;
}
.lede__side > p{ margin:0 0 1rem; max-width:38ch; }
.lede__title{
  margin:0 0 1.1rem;
  font-family:var(--font-caps);
  font-size:clamp(1.75rem,2.6vw,2.35rem);
  font-weight:700; line-height:1.08;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink);
}
.lede__cta{ margin:1.35rem 0 1.9rem; }
.sidecard{ margin:0; }
.sidecard img{
  width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 10px 26px -12px rgb(var(--shadow-rgb) / .3);
}

/* the flyer is the wide column now, so let it fill it */
.lede .poster{ width:100%; display:flex; justify-content:center; }
.lede .poster__btn{ display:block; max-width:100%; }
/* fit the first screen: masthead + this image + the row's own padding */
.lede .poster__btn img{
  width:auto; height:auto;
  max-width:100%;
  max-height:calc(100dvh - var(--mast-h, 120px) - var(--lede-pad, 70px));
}

/* ==========================================================================
   PAGE (subpage article)
   ========================================================================== */



/* the live site's small bold sub-heads ("Ihya Gems:", "Brief Bio on...") */
.h4{
  margin:clamp(34px,4vw,54px) 0 1.1rem;
  font-family:var(--font-caps);
  font-size:clamp(1.5rem,2.2vw,1.95rem);
  font-weight:700; line-height:1.15;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink);
}
.page .h4:first-of-type{ margin-top:clamp(30px,3.4vw,44px); }

/* full-width course promo */
.promo{ margin:clamp(6px,1vw,14px) 0 clamp(28px,3.4vw,46px); }
.promo img{
  width:100%; height:auto;
  border-radius:14px;
  box-shadow:0 14px 34px -16px rgb(var(--shadow-rgb) / .32);
}

/* ==========================================================================
   SPEAKER ACCORDION — the live site uses <details>
   ========================================================================== */
.acc{ border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.acc__item{ border-bottom:1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.acc__sum{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; gap:.8rem;
  padding:1.05rem .2rem;
  min-height:44px;
  font-family:var(--font-caps);
  font-size:1.28rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.acc__sum::-webkit-details-marker{ display:none; }
.acc__sum::before{
  content:""; flex:none;
  width:11px; height:11px;
  border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);
  transform:rotate(-45deg);
  transition:transform .25s var(--ease);
  margin-left:.15rem;
}
.acc__item[open] > .acc__sum::before{ transform:rotate(45deg); }
.acc__sum:hover{ color:var(--wine); }
.acc__body{ padding:0 .2rem 1.4rem 2.05rem; }
.acc__body p{ margin:0; line-height:1.7; }

/* ==========================================================================
   IHYA GEMS CAROUSEL
   ========================================================================== */
.car{ position:relative; margin:0 0 clamp(20px,2.6vw,34px); }
.car__viewport{ overflow:hidden; border-radius:14px; }
.car__track{
  list-style:none; margin:0; padding:0;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.car__track::-webkit-scrollbar{ display:none; }
.car__slide{
  flex:0 0 100%;
  min-width:100%;          /* track stays scrollable before lazy images resolve */
  scroll-snap-align:center;
  display:flex; justify-content:center;
  padding:0 2px;
}
.car__slide img{
  width:auto; max-width:100%;
  max-height:min(74vh,620px);
  height:auto;
  border-radius:12px;
  box-shadow:0 12px 30px -14px rgb(var(--shadow-rgb) / .3);
}
.car__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  background:var(--paper-hi);
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 6px 18px -8px rgb(var(--shadow-rgb) / .35);
  transition:background-color .2s var(--ease), opacity .2s var(--ease);
  z-index:2;
}
.car__btn:hover{ background:var(--paper-lo); }
.car__btn[disabled]{ opacity:.32; cursor:default; }
.car__btn svg{ width:20px; height:20px; }
.car__btn--prev{ left:clamp(-6px,-.4vw,4px); }
.car__btn--next{ right:clamp(-6px,-.4vw,4px); }

.car__dots{ display:flex; justify-content:center; margin-top:.4rem; }
/* 9px dot, 44px hit area — the target is padding, not the visible mark */
.car__dot{
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  border:0; background:none; cursor:pointer;
}
.car__dot::before{
  content:"";
  width:9px; height:9px;
  border-radius:50%;
  border:1px solid var(--ink-soft);
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.car__dot[aria-selected="true"]::before{ background:var(--ink); border-color:var(--ink); }
.car__dot:hover::before{ border-color:var(--ink); }

/* ==========================================================================
   CROSSLINK — the live site's "Check out our other classes..." line
   ========================================================================== */
.section--tight{ padding:clamp(30px,4vw,54px) 0 clamp(34px,4.5vw,62px); }
.crosslink{
  margin:0 0 .85rem;
  text-align:center;
  font-size:1.02rem;
  color:var(--ink);
}
.crosslink__links{
  margin:0;
  text-align:center;
  display:flex; justify-content:center; align-items:center; gap:.9rem;
  flex-wrap:wrap;
  font-family:var(--font-caps);
  font-size:1.18rem; font-weight:600;
  text-transform:none; letter-spacing:.045em;
}
.crosslink__links a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  padding:.4rem 0;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.crosslink__links a:hover{ color:var(--wine); border-color:var(--wine); }
.crosslink__links > span{ color:var(--ink-soft); }

/* ==========================================================================
   RESPONSIVE — content
   ========================================================================== */
@media (max-width:900px){
  .lede__grid{ grid-template-columns:1fr; }
  .lede__side{ max-width:640px; }
  .lede__side > p{ max-width:none; }
  .sidecard img{ max-width:420px; }
}


/* ==========================================================================
   VIDEO INTRO — the club's promo reel, full-bleed on open
   The reel is 9:16. On a wide screen a real `cover` crops rows 415-865 of
   1280 while the title text spans ~407-911, so "2026" would be lost. The
   sharp copy is `contain` and a blurred, scaled copy behind it fills the
   screen, which reads full-bleed without cropping the message.
   ========================================================================== */
.vintro{
  position:fixed; inset:0;
  z-index:60;
  display:none;                 /* only shown once html.js is set */
  /* Transparent on purpose. The page's own cream ground and .deco layer
     (tan blobs, gold fan, sparkles) are NOT in the reveal-gated set, so they
     are already painted underneath — the reel ends up sitting on the site's
     real background for free, no extra markup. This replaced a blurred,
     scaled copy of the video itself, which read as exactly what it was: a
     zoomed-in duplicate with smeared lettering down the sides. */
  background:transparent;
  opacity:1;
  transition:opacity .6s ease;
}
.vintro.is-out{ opacity:0; pointer-events:none; }

/* Each source matches its screen's orientation — the 16:9 recut on landscape,
   the original 9:16 reel on portrait — so a plain `cover` fills either one with
   almost nothing cropped. The clamps, band fits and blurred backdrops that used
   to live here existed only because one 9:16 file had to serve both.

     1920x1080 / 1600x900 -> exact match, 0 crop
     1440x900             -> 96 source px off each side (type margin ~520px)
     390x844  (portrait)  -> 64 source px off each side (type margin 71px)   */
.vintro__stage{ position:absolute; inset:0; }
.vintro__v{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  object-fit:cover;
}

.vintro__skip{
  position:absolute;
  right:clamp(14px,2.4vw,28px); bottom:clamp(14px,2.4vw,28px);
  z-index:2;
  min-height:44px;
  padding:.7rem 1.3rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  background:var(--paper-hi);
  color:var(--ink);
  font-family:var(--font-caps);
  font-size:1.02rem; font-weight:600;
  letter-spacing:.045em;
  cursor:pointer;
  box-shadow:0 4px 14px -6px rgb(var(--shadow-rgb) / .3);
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.vintro__skip:hover{ background:var(--paper-lo); border-color:var(--ink); }
.vintro__skip:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* Shown only when the browser refuses autoplay. Closing the intro in that case
   means the reel is never seen at all — offer to start it instead. */
.vintro__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:none;
  align-items:center; gap:.6rem;
  min-height:44px;
  padding:.9rem 1.7rem .9rem 1.4rem;
  border-radius:999px;
  border:1px solid rgb(255 255 255 / .45);
  background:rgb(0 0 0 / .55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--font-caps);
  font-size:1.16rem; font-weight:600; letter-spacing:.045em;
  cursor:pointer;
}
.vintro.is-blocked .vintro__play{ display:inline-flex; }
.vintro__play svg{ width:22px; height:22px; }
.vintro__play:hover{ background:rgb(0 0 0 / .72); }
.vintro__play:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .vintro{ display:none!important; }
}