/* ══════════════════════════════════════════════════════════════════════════
   MARMALADE CLUB — design system
   Orange-first, pink and yellow secondary. Alternating glow / pastel sections.
   Flat, saturated surfaces. Playfair Display italic, Plus Jakarta Sans body.
   Built iPad-first (1024–1366) with a dedicated mobile layout below 768.
   ══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul{list-style:none}

:root{
  /* orange — fiesta bright. --o-500 is a FILL only: white text on it is 2.9:1, so
     anything set in orange type uses --o-600, which clears AA on white, cream and pastel. */
  --o-800:#6B2400; --o-700:#8F3100; --o-600:#B83E00; --o-500:#FF6A00;
  --o-400:#FF8A2B; --o-300:#FFA85C;
  --o-150:#FFD5B5; --o-100:#FFE6D4; --o-050:#FFF5EC;
  /* pink — secondary */
  --p-700:#7E0E36; --p-600:#A81147; --p-500:#F5397F; --p-400:#FF7AA6;
  --p-150:#FFD0E0; --p-100:#FFE2EC; --p-050:#FFF3F7;
  /* yellow — secondary */
  --y-600:#B37D00; --y-500:#FFB300; --y-400:#FFCB47;
  --y-150:#FFEDB8; --y-100:#FFF4D6; --y-050:#FFFBEC;
  /* ink + cream */
  --ink:#3A1400; --ink-2:#7A3C1A; --ink-3:#9A6647;
  --cream:#FFF6EE; --cream-2:rgba(255,246,238,.76); --cream-3:rgba(255,246,238,.52);
  /* section grounds */
  --dark-o:#8F3100; --darker-o:#6B2400; --dark-p:#A81147; --deep:#2A0E00;

  --ff-d:'Playfair Display',Georgia,'Times New Roman',serif;
  --ff-b:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1180px;
  --wrap-narrow:940px;
  --nav-h:74px;
  /* Deliberately small. The design leans on flat colour and photography, not on
     rounding — every surface used to be 28px and read as soft rather than sharp. */
  --r-lg:10px; --r-md:8px; --r-sm:6px
}

body{
  background:var(--cream);color:var(--ink);
  font-family:var(--ff-b);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}

/* Playfair Display, always italic. The swing in its italic is the fiesta; the high stroke
   contrast is the premium. It needs tighter tracking than Fraunces did — a Didone-ish face
   sets loose by default at display sizes. */
.d,.hero-kicker,h1,h2,h3,.price,.stat-num,.nav-cta,.btn{font-family:var(--ff-d)}
h1,h2,h3,.d{font-style:italic;font-weight:800;line-height:1.06;letter-spacing:-.022em}
h1,.title{letter-spacing:-.028em}

/* ── grain + shared atoms ─────────────────────────────────────────────── */
/* Deliberately no mix-blend-mode: a fixed, blended, full-viewport layer forces the
   whole document into one composited layer and makes every scroll a full repaint —
   which on an iPad reads as the page tearing. Plain low-opacity noise costs nothing. */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.sec{position:relative;overflow:hidden;padding:clamp(66px,7.6vw,128px) 0}
.sec-tight{padding:clamp(34px,4vw,54px) 0}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.icon{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.icon.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Every editorial photograph on the site gets the same treatment: a hair of blur so it
   sits behind the type rather than competing with it, and a warm wash that pulls the
   stock library and the venue's own phone photos into one palette. */
.collage figure,.cls-img,.ev-img,.gal figure,.sess-hero,.sess-strip figure,.evrow-img,
.about-art .mosaic,.phead-bg,.hire{--pic-tint:linear-gradient(168deg,rgba(255,106,0,.15),rgba(184,62,0,.06) 52%,rgba(245,57,127,.11))}
.collage figure>img,.cls-img>img,.ev-img>img,.gal figure>img,.sess-hero>img,
.sess-strip figure>img,.evrow-img>img,.about-art .mosaic>img,.hire>img{
  filter:blur(.6px) saturate(1.12) contrast(1.03)}
.collage figure::before,.cls-img::before,.ev-img::before,.gal figure::before,
.sess-hero::before,.sess-strip figure::before,.evrow-img::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--pic-tint)}

/* A photograph sunk into a section ground. Sits above the section's own gradient but below
   the blobs and the content, so it reads as texture rather than as an image. */
.sec-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.11;pointer-events:none;mix-blend-mode:multiply}

.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
@media(max-width:640px){.blob{filter:blur(48px);opacity:.8}}
.sec>.wrap,.sec>.sec-head{position:relative;z-index:2}

.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:.64rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;margin-bottom:17px}
.eyebrow::before{content:'';width:30px;height:1px;background:currentColor;opacity:.55}
.title{font-size:clamp(2.3rem,5.2vw,4.3rem)}
.title-sm{font-size:clamp(1.8rem,3.6vw,2.8rem)}
/* headline sized for a half-width column rather than the full page */
.title-col{font-size:clamp(2.1rem,4vw,3.4rem)}
.lead{font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.78;font-weight:400;max-width:62ch}
.muted{opacity:.72}
.sec-head{margin-bottom:clamp(38px,4.4vw,60px)}
.sec-head.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-head.center .lead{text-align:center}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-style:italic;font-weight:800;font-size:1rem;letter-spacing:-.01em;
  padding:14px 26px;border-radius:8px;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn .icon{font-size:20px}
.btn-sm{padding:10px 18px;font-size:.9rem;border-radius:6px}
.btn-lg{padding:17px 32px;font-size:1.08rem}

/* Fiesta orange carries INK, not white — white on #FF6A00 is 2.9:1. */
.btn-orange{background:var(--o-500);color:var(--ink)}
.btn-orange:hover{background:#FF7D1F;box-shadow:0 6px 18px -8px rgba(255,106,0,.75)}
.btn-pink{background:var(--p-600);color:#fff}
.btn-pink:hover{background:#C31555;box-shadow:0 6px 18px -8px rgba(168,17,71,.8)}
.btn-yellow{background:var(--y-500);color:#4A2400}
.btn-yellow:hover{background:#FFC42B;box-shadow:0 6px 18px -8px rgba(179,125,0,.7)}
.btn-cream{background:#fff;color:var(--o-600);border:1px solid rgba(184,62,0,.2)}
.btn-cream:hover{background:var(--o-050)}
.btn-ghost{border:1px solid currentColor;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-block{width:100%}

/* ── glossy cards ─────────────────────────────────────────────────────── */
.card{position:relative;border-radius:var(--r-md);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card-lift:hover{transform:translateY(-4px)}

.glass{background:rgba(255,255,255,.86);border:1px solid rgba(184,62,0,.14);
  box-shadow:0 10px 26px -20px rgba(58,20,0,.5)}
.glass-dark{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}

/* ── reveal ───────────────────────────────────────────────────────────── */
/* The hidden state is gated on html.js-rv, which mc.js sets immediately before it starts
   observing. If mc.js fails to load, fails to parse, or its observer breaks, the content is
   simply there with no animation. It was NOT gated once: a mangled selector meant nothing was
   ever observed and the whole site rendered blank at opacity 0. A decorative animation must
   never be able to hide content. */
.js-rv .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js-rv .rv.in{opacity:1;transform:none}
.js-rv .rv-l{opacity:0;transform:translateX(-26px)}.js-rv .rv-l.in{opacity:1;transform:none}
.js-rv .rv-r{opacity:0;transform:translateX(26px)}.js-rv .rv-r.in{opacity:1;transform:none}
.js-rv .rv-l,.js-rv .rv-r{transition:opacity .75s var(--ease),transform .75s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ══════════════════════════════════════════════════════════════════════
   NAV — always orange
   ══════════════════════════════════════════════════════════════════════ */
#mcnav{position:fixed;inset:0 0 auto 0;z-index:900;height:var(--nav-h);
  background:linear-gradient(100deg,var(--o-600) 0%,var(--o-500) 42%,#FF8434 78%,var(--o-500) 100%);
  box-shadow:0 10px 34px -14px rgba(58,20,0,.7);
  transition:height .3s var(--ease),box-shadow .3s}
#mcnav::after{content:'';position:absolute;inset:0 0 auto 0;height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
#mcnav::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--y-500),var(--p-500),var(--y-500));background-size:220% 100%;
  animation:navFlow 9s linear infinite;opacity:.9}
@keyframes navFlow{to{background-position:220% 0}}
body.nav-tight #mcnav{height:60px}
.nav-in{position:relative;z-index:3;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(18px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:38px;width:auto;transition:height .3s var(--ease);
  filter:drop-shadow(0 2px 8px rgba(58,20,0,.45))}
body.nav-tight .nav-logo img{height:30px}
.nav-links{display:flex;align-items:center;gap:clamp(6px,1.2vw,16px)}
.nav-links a{position:relative;font-size:.82rem;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.9);
  padding:9px 12px;border-radius:6px;transition:color .2s,background .2s}
.nav-links a::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;
  background:var(--y-400);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.13)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:#fff}
.nav-cta{margin-left:6px;padding:11px 22px;font-size:.92rem}
.nav-burger{display:none;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.24)}
.nav-burger .icon{font-size:26px}

/* mobile drawer — separate layout, not a squeezed desktop nav */
#mcdrawer{position:fixed;inset:0;z-index:950;display:none;flex-direction:column;
  background:linear-gradient(165deg,var(--o-600),var(--o-500) 45%,var(--p-600));
  opacity:0;transition:opacity .3s var(--ease)}
#mcdrawer.open{display:flex;opacity:1}
.dr-top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);
  padding:0 clamp(18px,5vw,28px);flex-shrink:0}
.dr-top img{height:34px}
.dr-x{width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff}
.dr-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 clamp(22px,7vw,40px)}
.dr-links a{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:clamp(2rem,9vw,2.9rem);
  color:rgba(255,255,255,.94);padding:8px 0;line-height:1.1;
  border-bottom:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:space-between}
.dr-links a .icon{font-size:26px;opacity:.5}
.dr-foot{padding:22px clamp(22px,7vw,40px) calc(28px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════════════
   SECTION GROUNDS
   ══════════════════════════════════════════════════════════════════════ */
.bg-orange{background:linear-gradient(150deg,var(--o-600) 0%,var(--o-500) 52%,#FF8B3C 100%);color:var(--cream)}
.bg-orange-pastel{background:linear-gradient(168deg,var(--o-050) 0%,#FFE7D2 55%,#FFDCC4 100%);color:var(--ink)}
.bg-orange-dark{background:linear-gradient(155deg,var(--darker-o) 0%,var(--dark-o) 55%,#94380B 100%);color:var(--cream)}
.bg-pink-pastel{background:linear-gradient(168deg,var(--p-050) 0%,#FFE2ED 52%,#FFD2E3 100%);color:var(--ink)}
.bg-pink-dark{background:linear-gradient(155deg,var(--p-700) 0%,var(--p-600) 55%,#C3235F 100%);color:var(--cream)}
.bg-yellow-splash{
  background:
    radial-gradient(ellipse 68% 52% at 10% 18%,#FFE566 0%,transparent 56%),
    radial-gradient(ellipse 55% 65% at 90% 82%,#E08000 0%,transparent 53%),
    radial-gradient(ellipse 66% 40% at 66% 0%,#FFF5A0 0%,transparent 50%),
    radial-gradient(ellipse 42% 56% at 32% 88%,#FFC107 0%,transparent 50%),
    radial-gradient(ellipse 60% 60% at 52% 48%,#FFCC00 0%,#FFE040 100%);
  color:#4A2E00}
.bg-pastel-mix{background:linear-gradient(150deg,var(--y-050) 0%,var(--o-050) 38%,var(--p-050) 100%);color:var(--ink)}
.bg-cream{background:var(--cream);color:var(--ink)}
.on-dark .eyebrow,.bg-orange .eyebrow,.bg-orange-dark .eyebrow,.bg-pink-dark .eyebrow{color:var(--y-400)}
.bg-orange-pastel .eyebrow,.bg-cream .eyebrow{color:var(--o-500)}
.bg-pink-pastel .eyebrow{color:var(--p-600)}
.bg-yellow-splash .eyebrow{color:#8A5A00}
.bg-pastel-mix .eyebrow{color:var(--o-500)}
.bg-orange .lead,.bg-orange-dark .lead,.bg-pink-dark .lead{color:var(--cream-2)}

/* section divider — a marmalade drip */
.drip{display:block;width:100%;height:clamp(26px,3.4vw,46px);position:relative;z-index:3;margin-bottom:-1px}
.drip.flip{transform:rotate(180deg);margin:-1px 0 0}

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */
#hero{position:relative;min-height:100svh;height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:calc(var(--nav-h) + 24px) 0 56px}
.hero-slides{position:absolute;inset:-4%;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(3px) saturate(1.3) contrast(1.06) brightness(1.05);opacity:0;transform:scale(1.08);
  transition:opacity 1.6s var(--ease),transform 9s linear}
.hero-slide.on{opacity:1;transform:scale(1.16)}
.hero-wash{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 78% 64% at 50% 46%,rgba(255,106,0,.26) 0%,rgba(184,62,0,.62) 58%,rgba(58,20,0,.88) 100%),
    linear-gradient(180deg,rgba(58,20,0,.62) 0%,rgba(184,62,0,.34) 34%,rgba(42,14,0,.88) 100%)}
.hero-wash::after{content:'';position:absolute;inset:0;mix-blend-mode:overlay;
  background:linear-gradient(120deg,rgba(255,179,0,.32),transparent 42%,rgba(245,57,127,.34))}
.hero-in{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.4vw,26px);padding:0 clamp(18px,4vw,40px);width:100%;max-width:940px}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-style:italic;font-weight:700;
  font-size:clamp(.78rem,1.5vw,.95rem);letter-spacing:.2em;text-transform:uppercase;color:var(--y-400);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,203,71,.45);border-radius:6px;
  padding:8px 20px;backdrop-filter:blur(10px);box-shadow:0 0 26px rgba(255,179,0,.28)}
.hero-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.hero-glow{position:absolute;width:min(78vw,600px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle,rgba(245,57,127,.42) 0%,rgba(245,57,127,.20) 40%,transparent 70%),
    radial-gradient(circle,rgba(255,179,0,.32) 0%,rgba(255,106,0,.20) 44%,transparent 72%);
  filter:blur(52px);animation:pulseGlow 5s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.hero-logo{position:relative;z-index:2;width:min(80vw,470px);height:auto;
  filter:drop-shadow(0 18px 42px rgba(50,14,2,.6)) drop-shadow(0 0 30px rgba(255,205,120,.42));
  animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-sub{font-size:clamp(1rem,1.9vw,1.28rem);font-style:italic;color:rgba(255,247,241,.92);
  max-width:34ch;text-shadow:0 2px 18px rgba(60,18,2,.7)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.hero-facts{display:flex;gap:clamp(14px,3vw,40px);flex-wrap:wrap;justify-content:center;margin-top:10px}
.hero-fact{display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,247,241,.9)}
.hero-fact b{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:clamp(1.2rem,2.4vw,1.6rem);
  color:var(--y-400)}
.hero-fact span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:9px}
.hero-dots i{width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;
  transition:background .3s,width .3s,transform .3s}
.hero-dots i.on{background:var(--y-400);width:26px;border-radius:2px}

/* ══════════════════════════════════════════════════════════════════════
   COLLAGE (motto + about)
   ══════════════════════════════════════════════════════════════════════ */
.collage{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  grid-auto-rows:minmax(0,1fr)}
.collage figure{position:relative;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(58,20,0,.6)}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.collage figure:hover img{transform:scale(1.07)}
.collage .c1{grid-column:span 4;aspect-ratio:16/11}
.collage .c2{grid-column:span 2;aspect-ratio:3/4}
.collage .c3{grid-column:span 2;aspect-ratio:1}
.collage .c4{grid-column:span 2;aspect-ratio:1}
.collage .c5{grid-column:span 2;aspect-ratio:1}
.collage .c6{grid-column:span 3;aspect-ratio:3/2}
.collage .c7{grid-column:span 3;aspect-ratio:3/2}
/* the tilt read as scrapbook rather than minimal — kept as a no-op so the markup
   does not need touching on six pages */
.collage-tilt .c1,.collage-tilt .c2,.collage-tilt .c4,.collage-tilt .c7{transform:none}

/* motto icon cards */
.mottos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.motto{position:relative;border-radius:var(--r-md);padding:24px 22px;
  background:var(--m-bg,rgba(255,255,255,.13));border:1px solid var(--m-line,rgba(255,255,255,.22));
  transition:background .25s}
.motto:hover{background:var(--m-bg-h,rgba(255,255,255,.2))}
.motto-ico{width:46px;height:46px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;background:var(--m-ico,var(--y-500));color:var(--m-icot,#4A2400)}
.motto-ico .icon{font-size:26px}
/* Position-driven, so every motto grid on the site picks the four hues up with no markup. */
.motto:nth-child(4n+1){--m-ico:#FFB300;--m-icot:#4A2400;--m-bg:rgba(255,179,0,.15);--m-bg-h:rgba(255,179,0,.23);--m-line:rgba(255,179,0,.42)}
.motto:nth-child(4n+2){--m-ico:#F5397F;--m-icot:#ffffff;--m-bg:rgba(245,57,127,.16);--m-bg-h:rgba(245,57,127,.24);--m-line:rgba(245,57,127,.44)}
.motto:nth-child(4n+3){--m-ico:#FF7A4D;--m-icot:#3A1400;--m-bg:rgba(255,122,77,.17);--m-bg-h:rgba(255,122,77,.25);--m-line:rgba(255,122,77,.46)}
.motto:nth-child(4n+4){--m-ico:#FFF1E0;--m-icot:#8F3100;--m-bg:rgba(255,241,224,.14);--m-bg-h:rgba(255,241,224,.22);--m-line:rgba(255,241,224,.42)}
.motto h3{font-size:1.2rem;margin-bottom:7px}
.motto p{font-size:.9rem;line-height:1.6;color:rgba(255,246,238,.84)}


/* ── calendar ──────────────────────────────────────────────────────────────
   Month grid on the left, the selected day's events on the right. Every colour
   in here comes from --cv, an "r,g,b" triple set inline per event by mc.js from
   the swatch it hashed out of the event's own identity. Nothing about any
   specific event is styled here, so the owner can rename, add or delete freely.
   ────────────────────────────────────────────────────────────────────────── */
.calwrap{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(18px,2.4vw,34px);
  align-items:start}
.cal{position:relative;background:#fff;border:1px solid rgba(184,62,0,.16);border-radius:var(--r-lg);
  padding:clamp(14px,1.6vw,20px);box-shadow:0 18px 40px -30px rgba(58,20,0,.42)}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cal-top h3{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1.32rem;
  color:var(--ink);margin:0;text-align:center;flex:1}
.cal-nav{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(184,62,0,.22);border-radius:var(--r-sm);background:var(--o-050);
  color:var(--o-600);cursor:pointer;transition:background .2s,border-color .2s}
.cal-nav:hover:not(:disabled){background:var(--o-100);border-color:rgba(184,62,0,.4)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-nav .icon{font-size:21px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.cal-dow span{text-align:center;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-pad{aspect-ratio:1}
.cal-day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;border:1px solid transparent;border-radius:var(--r-sm);
  background:none;font-family:var(--ff-b);cursor:default;padding:0;
  transition:background .18s,border-color .18s,transform .18s}
.cal-n{font-size:.86rem;font-weight:600;color:var(--ink-3);line-height:1}
.cal-day.has{cursor:pointer;background:var(--o-050);border-color:rgba(184,62,0,.14)}
.cal-day.has .cal-n{color:var(--ink);font-weight:700}
.cal-day.has:hover{background:var(--o-100);border-color:rgba(184,62,0,.34);transform:translateY(-1px)}
.cal-day.past{opacity:.42}
.cal-day.today .cal-n{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.cal-day.on{background:var(--ink);border-color:var(--ink)}
.cal-day.on .cal-n{color:var(--cream)}
.cal-dots{display:flex;gap:2px;align-items:center;height:5px}
.cal-dots i{width:5px;height:5px;border-radius:50%;display:block}
.cal-day.on .cal-dots i{box-shadow:0 0 0 1px rgba(255,255,255,.45)}
/* Legend is built from whatever strands appear in the visible month. */
.cal-key{display:flex;flex-wrap:wrap;gap:7px 13px;margin-top:15px;padding-top:13px;
  border-top:1px dashed rgba(184,62,0,.2)}
.cal-key-i{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;
  color:var(--ink-2)}
.cal-key-i i{width:9px;height:9px;border-radius:3px;display:block;flex-shrink:0}

.cal-panel-head{margin-bottom:16px}
.cal-panel-head .eyebrow{color:var(--o-600)}
.cal-panel-head h3{font-family:var(--ff-d);font-style:italic;font-weight:800;
  font-size:clamp(1.6rem,3vw,2.1rem);color:var(--ink);margin-top:6px;line-height:1}
.cal-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:50px 20px;text-align:center;color:var(--ink-3);border:1px dashed rgba(184,62,0,.24);
  border-radius:var(--r-lg)}
.cal-empty .icon{font-size:34px;opacity:.6}

.cev-list{display:flex;flex-direction:column;gap:13px}
/* One event card. --cv is the event's own colour, set inline. */
.cev{display:grid;grid-template-columns:132px 1fr;overflow:hidden;border-radius:var(--r-lg);
  background:#fff;border:2px solid rgba(var(--cv),.34);
  box-shadow:0 14px 32px -26px rgba(58,20,0,.5);transition:border-color .22s,transform .22s}
.cev:hover{border-color:rgb(var(--cv));transform:translateY(-2px)}
.cev-img{position:relative;overflow:hidden}
.cev-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.1) contrast(1.02)}
.cev-tint{position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(var(--cv),.42),rgba(var(--cv),.14) 60%,rgba(var(--cv),.3))}
.cev-img-none{display:flex;align-items:center;justify-content:center;background:rgba(var(--cv),.16)}
.cev-img-none .icon{font-size:36px;color:rgb(var(--cv))}
.cev-body{padding:15px 17px 15px;display:flex;flex-direction:column;gap:7px;min-width:0}
.cev-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cev-kind{font-size:.6rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;background:rgb(var(--cv));color:var(--cv-ink)}
.cev-time{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;
  color:var(--ink-2)}
.cev-time .icon{font-size:15px;color:rgb(var(--cv))}
.cev h4{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1.22rem;
  line-height:1.1;color:var(--ink);margin:0}
.cev-sub{font-size:.78rem;font-weight:600;color:var(--ink-3);margin:0}
.cev-desc{font-size:.84rem;line-height:1.55;color:var(--ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cev-foot{margin-top:auto;padding-top:9px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
.cev-price{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1.02rem;
  color:var(--cv-deep,var(--ink))}
.cev-cta{background:rgb(var(--cv));color:var(--cv-ink)}
.cev-cta:hover{filter:brightness(1.06)}

/* The calendar page gives each event a full row and a much bigger picture, which
   is the whole point of "explore": one thing at a time, properly shown. */
.cev-big{gap:20px}
.cev-big .cev{grid-template-columns:1fr;border-width:3px}
.cev-big .cev-img{aspect-ratio:16/7}
.cev-big .cev-body{padding:20px 22px 22px;gap:9px}
.cev-big .cev h4{font-size:clamp(1.5rem,2.6vw,2rem)}
.cev-big .cev-sub{font-size:.88rem}
.cev-big .cev-desc{font-size:.92rem;-webkit-line-clamp:4}
.cev-big .cev-price{font-size:1.3rem}

@media (max-width:860px){
  .calwrap{grid-template-columns:1fr}
  .cev{grid-template-columns:104px 1fr}
  .cev-body{padding:13px 14px}
  .cev h4{font-size:1.08rem}
  .cev-desc{display:none}
}
@media (max-width:460px){
  .cev{grid-template-columns:1fr}
  .cev-img{aspect-ratio:16/8}
  .cev-big .cev-img{aspect-ratio:16/9}
}

/* ── pinned calendar button ────────────────────────────────────────────────
   Follows the reader down every page. Sits clear of the iOS home indicator and
   hides itself on the calendar page, where it would just point at itself. */
.calfab{position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + env(safe-area-inset-bottom));
  z-index:880;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;
  border-radius:var(--r-md);border:2px solid rgba(255,255,255,.22);
  background:linear-gradient(150deg,var(--o-500),var(--p-500));color:#fff;
  font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1rem;text-decoration:none;
  box-shadow:0 16px 38px -14px rgba(58,20,0,.66);
  transition:transform .22s var(--ease),box-shadow .22s,opacity .3s}
.calfab:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(58,20,0,.7)}
.calfab .icon{font-size:21px}
/* the mascot rides along on the button */
.calfab-bear{width:30px;height:30px;object-fit:contain;display:block;flex-shrink:0;margin-right:-2px;
  /* the mascot is orange and so is that end of the button, so it needs a little separation */
  filter:drop-shadow(0 1px 2px rgba(58,20,0,.4))}
.calfab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:11px;background:rgba(255,255,255,.92);color:var(--p-600);
  font-family:var(--ff-b);font-style:normal;font-weight:900;font-size:.72rem}
body.on-calendar .calfab{display:none}
@media (max-width:600px){
  .calfab{padding:10px 14px;font-size:.92rem;gap:7px}
  .calfab .calfab-label{display:none}
  .calfab .icon{font-size:22px}
  .calfab-bear{width:27px;height:27px}
}


/* the mascot line: the bear from the logo, used as a friendly aside */
.bearline{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-md);
  background:rgba(255,179,0,.14);border:2px solid rgba(255,179,0,.4)}
.bearline img{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.bearline p{font-size:.92rem;line-height:1.55;margin:0}
.bearline b{font-weight:800}
.on-dark .bearline p{color:var(--cream-2)}

/* ══════════════════════════════════════════════════════════════════════
   CLASS CARDS
   ══════════════════════════════════════════════════════════════════════ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,26px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.6vw,18px)}

.cls{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 10px 26px -20px rgba(58,20,0,.45);border:1px solid rgba(184,62,0,.14);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative}
.cls:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(58,20,0,.55)}
.cls-img{position:relative;aspect-ratio:16/10;overflow:hidden;flex-shrink:0}
/* Each class carries its own hue: --pic-tint is set inline per card from the programme
   palette in mc.js, and the extra blur pushes the photograph behind the title. */
.cls-img>img{filter:blur(1.5px) saturate(1.16) contrast(1.02)}
.cls-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cls:hover .cls-img img{transform:scale(1.08)}
.cls-img::after{content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(42,14,0,0) 30%,rgba(42,14,0,.48) 62%,rgba(42,14,0,.84) 100%)}
.cls-badges{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:7px;flex-wrap:wrap;z-index:4}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:5px}
.chip-beg{background:var(--y-500);color:#4A2400}
.chip-int{background:var(--p-500);color:#fff}
.chip-all{background:#fff;color:var(--o-600)}
.chip-day{background:rgba(42,14,0,.72);color:#fff}
.cls-name{position:absolute;left:16px;right:16px;bottom:13px;z-index:4;color:#fff}
.cls-name .d{font-size:1.42rem;line-height:1.05;text-shadow:0 3px 16px rgba(0,0,0,.6)}
.cls-name small{display:block;font-size:.76rem;font-weight:600;opacity:.82;margin-top:3px}
.cls-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:13px;flex:1}
.cls-tag{font-size:.92rem;font-style:italic;color:var(--o-600);font-weight:600;line-height:1.45}
/* Two fixed columns rather than a wrapping flex row. A long teacher name (Carlos Rendón) used
   to push its own card's date picker a line lower than the other two, so the three cards
   stopped lining up. */
.cls-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;
  min-height:37px;font-size:.83rem;color:var(--ink-2)}
.cls-meta span{display:inline-flex;align-items:center;gap:5px}
.cls-meta .icon{font-size:17px;color:var(--o-400)}
.cls-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px dashed rgba(255,106,0,.28)}
.price{font-style:italic;font-weight:800;font-size:1.78rem;color:var(--o-600);line-height:1}
.price small{font-size:.62rem;font-family:var(--ff-b);font-style:normal;font-weight:600;color:var(--ink-3);
  display:block;letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.mc-select{width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid rgba(255,106,0,.3);
  background:var(--o-050);color:var(--ink);font-size:.88rem;font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F26418' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.mc-select:focus{outline:none;border-color:var(--o-500);box-shadow:0 0 0 4px rgba(255,106,0,.14)}

/* ══════════════════════════════════════════════════════════════════════
   MEMBERSHIP
   ══════════════════════════════════════════════════════════════════════ */
.mem-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
/* Each tier carries its own hue as a wash rather than a flat translucent white, so the
   three read as three products at a glance instead of one repeated card. */
/* The hue wash sits ON a dark scrim, not on the section colour. Washing straight onto the
   dark-orange band lifted the card luminance far enough that the cream bullets fell to
   2.3:1 on the yellow tier. The scrim keeps every card darker than the band behind it, so
   the hue reads as a tint and the text keeps its contrast. */
.plan{position:relative;border-radius:var(--r-lg);padding:22px 22px 24px;overflow:hidden;
  background:linear-gradient(168deg,var(--pl-wash,rgba(255,255,255,.13)),rgba(255,255,255,.03)),
             linear-gradient(168deg,rgba(30,9,0,.50),rgba(30,9,0,.34));
  border:2px solid var(--pl-line,rgba(255,255,255,.22));
  transition:border-color .25s,transform .25s;display:flex;flex-direction:column;gap:9px}
.plan:hover{transform:translateY(-3px);border-color:var(--pl-hue,rgba(255,255,255,.45))}
.plan.feat{border-color:var(--pl-hue,rgba(255,203,71,.6));
  box-shadow:0 0 0 1px var(--pl-line,transparent),0 20px 44px -26px rgba(0,0,0,.7)}
/* header row: mark and name side by side rather than stacked, which is most of the height saved */
.plan-top{display:flex;align-items:center;gap:13px}
.plan-top h3{margin:0}
.plan-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px dashed var(--pl-line,rgba(255,255,255,.22))}
.plan-flag{position:absolute;top:0;right:0;font-size:.62rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 14px;border-radius:0 0 0 8px;background:var(--y-500);color:#4A2400;z-index:3}
.plan h3{font-size:1.5rem;position:relative;color:var(--pl-ink,inherit)}
.plan-mark{position:relative;width:42px;height:42px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:var(--pl-hue,var(--y-500));color:var(--pl-hue-t,#4A2400);flex-shrink:0}
.plan-mark .icon{font-size:25px}
/* Tier art: the mascot illustration IS the mark, so it loses the solid tile and gets the room
   the drawing needs. The white background is already cut out, so it sits straight on the card. */
.plan-mark.art{width:84px;height:84px;border-radius:0;background:none;color:inherit}
.plan-mark.art img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:600px){.plan-mark.art{width:72px;height:72px}}
.plan-price{position:relative;font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:2.2rem;
  line-height:1;color:var(--pl-ink,var(--y-400))}
.plan-price em{font-size:.85rem;font-family:var(--ff-b);font-style:normal;font-weight:700;
  color:var(--cream-3);letter-spacing:.06em}
.plan ul{display:flex;flex-direction:column;gap:6px;position:relative;margin-top:2px}
.plan li{display:flex;gap:8px;font-size:.85rem;line-height:1.4;color:var(--cream)}
.plan li .icon{font-size:18px;color:var(--pl-ink,var(--y-400));flex-shrink:0;margin-top:1px}

/* ══════════════════════════════════════════════════════════════════════
   EVENT CARDS
   ══════════════════════════════════════════════════════════════════════ */
.ev{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ev-pastel,#fff);box-shadow:0 10px 26px -20px rgba(126,14,54,.4);
  border:1px solid var(--ev-line,rgba(168,17,71,.14));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ev:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(126,14,54,.5)}
.ev-img{position:relative;aspect-ratio:5/3;overflow:hidden;flex-shrink:0}
.ev-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ev:hover .ev-img img{transform:scale(1.08)}
.ev-img::after{content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(60,8,26,0) 30%,rgba(60,8,26,.52) 62%,rgba(60,8,26,.86) 100%)}
.ev-date{position:absolute;top:12px;left:12px;z-index:4;text-align:center;border-radius:6px;overflow:hidden;
  background:#fff;min-width:58px}
.ev-date b{display:block;font-family:var(--ff-d);font-style:italic;font-weight:900;font-size:1.4rem;
  line-height:1;padding:8px 10px 2px;color:var(--p-600)}
.ev-date span{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:0 10px 7px;color:var(--ink-3)}
.ev-flag{position:absolute;top:12px;right:12px;z-index:4}
.ev-name{position:absolute;left:16px;right:16px;bottom:12px;z-index:4;color:#fff}
.ev-name .d{font-size:1.3rem;line-height:1.08;text-shadow:0 3px 16px rgba(0,0,0,.6)}
.ev-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.ev-body p{font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.ev-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px dashed var(--ev-line,rgba(245,57,127,.3))}
.ev-foot .price{color:var(--p-500)}

/* ══════════════════════════════════════════════════════════════════════
   VENUE HIRE CARDS
   ══════════════════════════════════════════════════════════════════════ */
.hire{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(340px,36vw,430px);
  display:flex;flex-direction:column;padding:22px;isolation:isolate;color:#fff;
  border:3px solid var(--hue-line,rgba(255,255,255,.34));
  box-shadow:0 26px 58px -30px rgba(0,0,0,.8);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.hire:hover{transform:translateY(-8px);box-shadow:0 40px 76px -30px rgba(0,0,0,.85);
  border-color:var(--hue,rgba(255,255,255,.7))}
.hire-mark{width:40px;height:40px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);border:1px solid var(--hue-line,rgba(255,255,255,.28));
  color:var(--hue,#fff);flex-shrink:0}
.hire-mark .icon{font-size:23px}
.hire>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1s var(--ease)}
.hire:hover>img{transform:scale(1.07)}
.hire>.hire-tint{position:absolute;inset:0;z-index:1}
.hire>.hire-tint::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,4,12,.06) 0%,rgba(20,4,12,.42) 44%,rgba(20,4,12,.84) 100%)}
.hire-top,.hire h3,.hire p,.hire-incl,.hire-foot{position:relative;z-index:3}
.hire-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:auto;
  padding-bottom:18px}
.hire-cap{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.3);
  border-radius:5px;padding:6px 11px;color:#fff}
/* --hue is set per card so the name and the price carry that package's colour */
.hire h3{font-size:clamp(1.45rem,2.2vw,1.85rem);margin-bottom:8px;color:var(--hue,#fff);
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hire p{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.9);margin-bottom:13px}
.hire-incl{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.hire-incl span{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:700;
  padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.2);
  white-space:nowrap}
.hire-incl .icon{font-size:14px;color:var(--hue,var(--y-400))}
.hire-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hire-price{font-family:var(--ff-d);font-style:italic;font-weight:900;line-height:1;color:var(--hue,#fff);
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hire-price small{display:block;font-family:var(--ff-b);font-style:normal;font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:3px;text-shadow:none}
.hire-price b{font-size:1.9rem}

/* ══════════════════════════════════════════════════════════════════════
   MENU TEASER SLIDER
   ══════════════════════════════════════════════════════════════════════ */
/* A low, continuously moving ribbon rather than a wall of tall cards: the section is a
   teaser, so the job is to show a lot of the menu in a little vertical space. The track is
   duplicated in the markup and translated by exactly -50%, which is what makes the loop
   seamless. Hovering or focusing anything inside pauses it. */
.slider{position:relative;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.slider-track{display:flex;gap:12px;width:max-content;animation:drift 46s linear infinite}
.slider:hover .slider-track,.slider:focus-within .slider-track{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .slider{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .slider-track{animation:none;width:auto}
}
.drink{position:relative;flex:0 0 auto;width:250px;border-radius:var(--r-md);overflow:hidden;
  background:#fff;border:1px solid rgba(184,62,0,.14);display:flex;align-items:center;gap:12px;
  padding:8px 14px 8px 8px;transition:border-color .2s}
.drink:hover{border-color:var(--o-400)}
.drink-img{width:56px;height:56px;border-radius:5px;overflow:hidden;flex-shrink:0}
.drink-img img{width:100%;height:100%;object-fit:cover}
.drink-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.drink-b h4{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:.95rem;line-height:1.15;
  color:#4A2400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drink-b p{display:none}
.drink-b b{font-family:var(--ff-d);font-style:italic;font-size:1.02rem;color:var(--o-600);line-height:1.1}
.slider-nav{display:none}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT + REVIEWS
   ══════════════════════════════════════════════════════════════════════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:stretch}
/* the reveal wrapper is the grid child, so it has to pass the stretch down to the art */
.about-grid>*:first-child{display:flex;flex-direction:column}
.about-grid>*:first-child>.about-art{flex:1 1 auto}
.about-art{position:relative;min-height:clamp(400px,46vw,660px);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 34px 74px -34px rgba(58,20,0,.6)}
.about-art .mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  filter:blur(3px) saturate(1.18);transform:scale(1.06)}
.about-art .mosaic img{width:100%;height:100%;object-fit:cover}
.about-art .veil{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,245,236,.78) 0%,rgba(255,227,206,.6) 42%,rgba(255,190,140,.4) 72%,rgba(255,106,0,.3) 100%)}
.about-art .logo-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12%}
.about-art .logo-front img{width:100%;max-width:340px;height:auto;
  filter:drop-shadow(0 16px 34px rgba(58,20,0,.36));animation:floaty 7s ease-in-out infinite}
/* Promise cards replace the customer-review block: the club has not opened yet, so it can
   speak for itself but it cannot quote anybody. */
.promises{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.promise{display:flex;gap:15px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:var(--m-bg,rgba(255,255,255,.6));border:1px solid var(--m-line,rgba(184,62,0,.16))}
.promise .motto-ico{margin-bottom:0;width:40px;height:40px;flex-shrink:0}
.promise .motto-ico .icon{font-size:22px}
.promise b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:3px}
.promise span{display:block;font-size:.86rem;line-height:1.6;color:var(--ink-2)}

.reviews{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.review{position:relative;border-radius:var(--r-md);padding:17px 19px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 16px 38px -24px rgba(58,20,0,.5)}
.review .stars{display:flex;gap:1px;color:var(--y-500);margin-bottom:7px}
.review .stars .icon{font-size:17px;font-variation-settings:'FILL' 1}
.review p{font-size:.9rem;line-height:1.6;font-style:italic;color:var(--ink-2)}
.review cite{display:block;font-style:normal;font-size:.76rem;font-weight:800;color:var(--o-600);margin-top:8px;
  letter-spacing:.04em}
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px clamp(16px,3vw,30px);margin-top:22px}
@media(min-width:1100px){.stat-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column}
.stat-num{font-style:italic;font-weight:900;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;color:var(--o-500)}
.stat span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}

/* ══════════════════════════════════════════════════════════════════════
   CTA TILES (reviews / instagram / wifi)
   ══════════════════════════════════════════════════════════════════════ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px 22px;text-align:left;
  border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:var(--cream);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  transition:transform .35s var(--ease),background .35s,border-color .35s}
.tile::after{content:'';position:absolute;inset:-40% -30% auto auto;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,var(--tg,rgba(255,179,0,.3)) 0%,transparent 70%);filter:blur(28px);
  z-index:0;transition:opacity .4s;opacity:.75}
.tile:hover{transform:translateY(-6px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.tile:hover::after{opacity:1}
.tile>*{position:relative;z-index:2}
.tile-ico{width:52px;height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--tc,var(--y-500));color:#3A1D00;margin-bottom:8px}
.tile-ico .icon{font-size:28px}
.tile-label{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1.24rem}
.tile-sub{font-size:.85rem;line-height:1.5;color:var(--cream-2)}
.tile-perk{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:10px;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:5px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24)}
.tile-perk .icon{font-size:15px}
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta-pair .btn{padding:22px 30px;font-size:1.16rem;border-radius:var(--r-lg)}

/* ══════════════════════════════════════════════════════════════════════
   MAP + FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.map-shell{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 66px -34px rgba(58,20,0,.6);border:2px solid rgba(255,106,0,.28)}
#map{height:clamp(340px,42vw,480px);width:100%;background:var(--o-050)}
.map-shell::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:400;
  box-shadow:inset 0 0 90px rgba(255,106,0,.3);border-radius:var(--r-lg)}
.leaflet-container{filter:saturate(1.15) hue-rotate(-8deg) contrast(.96) brightness(1.03)}
.map-card{position:absolute;z-index:500;left:20px;bottom:20px;max-width:330px;border-radius:var(--r-md);
  padding:20px 22px;background:rgba(255,247,241,.96);box-shadow:0 20px 46px -22px rgba(58,20,0,.6);
  border:1px solid rgba(255,106,0,.24)}
.map-card h3{font-size:1.3rem;margin-bottom:6px;color:var(--o-600)}
.map-card p{font-size:.86rem;line-height:1.55;color:var(--ink-2);margin-bottom:12px}
.mc-pin{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50% 50% 50% 8px;
  transform:rotate(-45deg);background:linear-gradient(150deg,var(--o-400),var(--o-600));
  box-shadow:0 8px 20px -6px rgba(58,20,0,.8);border:2.5px solid #fff}
.mc-pin .icon{transform:rotate(45deg);color:#fff;font-size:22px}

#mcfoot{background:linear-gradient(170deg,var(--deep),#1C0A03);color:var(--cream-2);
  padding:clamp(52px,6vw,78px) 0 0;position:relative;overflow:hidden}
#mcfoot::before{content:'';position:absolute;inset:auto 0 auto 0;top:0;height:3px;
  background:linear-gradient(90deg,var(--o-500),var(--p-500),var(--y-500),var(--o-500));
  background-size:220% 100%;animation:navFlow 11s linear infinite}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,48px)}
.foot-logo{width:190px;margin-bottom:16px}
.foot-col h4{font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1.06rem;color:var(--y-400);
  margin-bottom:14px}
.foot-col li{margin-bottom:9px}
.foot-col a,.foot-col p{font-size:.87rem;line-height:1.6;color:rgba(255,247,241,.66);transition:color .2s}
.foot-col a:hover{color:var(--o-300)}
.foot-hours{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;
  color:rgba(255,247,241,.66);padding:5px 0;border-bottom:1px dashed rgba(255,247,241,.12)}
.foot-hours b{color:var(--cream);font-weight:600}
.foot-social{display:flex;gap:9px;margin-top:14px}
.foot-social a{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--cream);
  transition:background .25s,transform .25s}
.foot-social a:hover{background:var(--o-500);transform:translateY(-3px)}
.foot-bar{margin-top:clamp(34px,4vw,52px);padding:20px 0 26px;border-top:1px solid rgba(255,247,241,.1);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:.78rem;color:rgba(255,247,241,.45)}
.foot-bar a:hover{color:var(--o-300)}

/* ══════════════════════════════════════════════════════════════════════
   MODALS — ticket / enquiry / wifi
   ══════════════════════════════════════════════════════════════════════ */
.ov{position:fixed;inset:0;z-index:9800;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(44,16,5,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease);padding:0}
.ov.open{opacity:1;pointer-events:auto}
@media(min-width:640px){.ov{align-items:center;padding:26px}}
.ov-card{position:relative;width:100%;max-width:520px;max-height:94svh;display:flex;flex-direction:column;
  background:#FFFDFB;color:var(--ink);overflow:hidden;
  border-radius:12px 12px 0 0;transform:translateY(40px);transition:transform .32s var(--ease);
  box-shadow:0 40px 90px -30px rgba(44,16,5,.75)}
.ov.open .ov-card{transform:none}
@media(min-width:640px){.ov-card{border-radius:12px;max-height:90svh}}
.ov-head{position:relative;flex-shrink:0;padding:22px 24px 18px;color:#fff;overflow:hidden;
  background:var(--o-600)}
.ov-head.pink{background:var(--p-600)}
.ov-head.yellow{background:var(--y-500);color:#4A2400}
.ov-head h3{position:relative;font-size:1.5rem;line-height:1.08}
.ov-head p{position:relative;font-size:.85rem;opacity:.9;margin-top:4px}
.ov-x{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.2);color:inherit;
  border:1px solid rgba(255,255,255,.3);transition:background .2s}
.ov-x:hover{background:rgba(255,255,255,.34)}
.ov-body{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:14px;
  -webkit-overflow-scrolling:touch}
.ov-foot{flex-shrink:0;padding:16px 24px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,106,0,.16);background:rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:10px}
.ov-total{display:flex;align-items:center;justify-content:space-between;font-size:.9rem;color:var(--ink-2)}
.ov-total b{font-family:var(--ff-d);font-style:italic;font-weight:900;font-size:1.7rem;color:var(--o-500)}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.inp{width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1px solid rgba(255,106,0,.26);
  background:#fff;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:var(--o-500);box-shadow:0 0 0 4px rgba(255,106,0,.13)}
.tt-row{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--r-sm);
  background:#fff;border:1px solid rgba(255,106,0,.16)}
.tt-row.sel{border-color:var(--o-500);box-shadow:0 0 0 3px rgba(255,106,0,.12)}
.tt-info{flex:1;min-width:0}
.tt-info b{display:block;font-size:.94rem;font-weight:700}
.tt-info span{display:block;font-size:.76rem;color:var(--ink-3);line-height:1.4;margin-top:2px}
.tt-price{font-family:var(--ff-d);font-style:italic;font-weight:900;color:var(--o-500);font-size:1.1rem}
.qty{display:flex;align-items:center;gap:2px;background:var(--o-050);border-radius:6px;padding:3px;
  border:1px solid rgba(255,106,0,.2)}
.qty button{width:32px;height:32px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;color:var(--o-600);transition:background .18s}
.qty button:hover{background:rgba(255,106,0,.14)}
.qty span{min-width:26px;text-align:center;font-weight:800;font-size:.95rem}
.ov-err{font-size:.83rem;color:#C41A1A;font-weight:600;min-height:1.1em}
.ov-ok{text-align:center;padding:16px 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ov-ok .icon{font-size:64px;color:#1E9E5A}
.ov-ok h4{font-size:1.7rem}
.ov-ok p{font-size:.92rem;color:var(--ink-2);max-width:34ch}
.wifi-creds{display:flex;flex-direction:column;gap:10px}
.wifi-cred{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  border-radius:var(--r-sm);background:#fff;border:1.5px dashed rgba(255,106,0,.34)}
.wifi-cred div{min-width:0}
.wifi-cred small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.wifi-cred b{font-size:1.06rem;font-weight:800;letter-spacing:.02em}
.notice{font-size:.8rem;line-height:1.55;color:var(--ink-3);background:rgba(255,179,0,.12);
  border:1px solid rgba(255,179,0,.3);border-radius:var(--r-sm);padding:11px 13px}

/* ══════════════════════════════════════════════════════════════════════
   PAGE HEADERS (subpages)
   ══════════════════════════════════════════════════════════════════════ */
.phead{position:relative;padding:calc(var(--nav-h) + clamp(46px,6vw,80px)) 0 clamp(46px,6vw,80px);
  overflow:hidden;color:var(--cream)}
.phead-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:blur(3px) saturate(1.2);transform:scale(1.08)}
.phead-wash{position:absolute;inset:0;z-index:1}
.phead .wrap{position:relative;z-index:3}
.phead h1{font-size:clamp(2.5rem,6.4vw,5rem);text-shadow:0 4px 28px rgba(44,16,5,.55)}
.phead .lead{color:rgba(255,247,241,.9);margin-top:14px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,247,241,.62);margin-bottom:16px}
.crumbs a:hover{color:var(--y-400)}
.crumbs .icon{font-size:15px}

/* pill filter row */
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.pill{font-size:.82rem;font-weight:700;padding:9px 18px;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,106,0,.22);color:var(--ink-2);
  transition:all .22s var(--ease)}
.pill:hover{border-color:var(--o-400);color:var(--o-600)}
.pill.on{background:linear-gradient(150deg,var(--o-400),var(--o-600));color:#fff;border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(194,71,10,.8)}

/* accordion */
.acc{border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.68);
  border:1px solid rgba(255,106,0,.16);margin-bottom:10px;
  box-shadow:0 14px 34px -24px rgba(58,20,0,.5)}
.acc summary{padding:17px 20px;font-family:var(--ff-d);font-style:italic;font-weight:800;font-size:1.06rem;
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .icon{color:var(--o-500);transition:transform .3s var(--ease)}
.acc[open] summary .icon{transform:rotate(45deg)}
.acc .acc-b{padding:0 20px 19px;font-size:.9rem;line-height:1.68;color:var(--ink-2)}
.acc .acc-b p+p{margin-top:10px}

/* ══════════════════════════════════════════════════════════════════════
   TABLET  (iPad — the demo device)
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  :root{--wrap:960px}
  .nav-links a{font-size:.76rem;padding:8px 9px}
  .nav-cta{padding:10px 17px;font-size:.85rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .mem-grid{grid-template-columns:1fr;gap:34px}
  .about-grid{grid-template-columns:1fr;gap:34px}
  .about-art{max-width:520px;margin:0 auto}
  .tiles{grid-template-columns:1fr}
  .collage{gap:10px}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE  (dedicated layout)
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  :root{--nav-h:64px;--r-lg:22px;--r-md:16px}
  body{font-size:15px}
  .sec{padding:clamp(46px,11vw,64px) 0}
  .title{font-size:clamp(2.05rem,10vw,2.7rem)}
  .lead{font-size:.96rem}
  .btn{padding:14px 24px;font-size:.95rem}
  .btn-lg{padding:16px 28px;font-size:1rem}
  .hero-ctas{flex-direction:column;width:100%;max-width:330px}
  .hero-ctas .btn{width:100%}
  #hero{min-height:auto;padding:calc(var(--nav-h) + 34px) 0 54px}
  .hero-logo{width:min(76vw,300px)}
  .hero-facts{gap:20px}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  /* mobile collage — a horizontal filmstrip instead of a mosaic */
  .collage{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
    scrollbar-width:none;-ms-overflow-style:none}
  .collage::-webkit-scrollbar{display:none}
  .collage figure{flex:0 0 68%;scroll-snap-align:center;aspect-ratio:4/3!important;transform:none!important}
  .collage .c1,.collage .c2,.collage .c3,.collage .c4,.collage .c5,.collage .c6,.collage .c7{grid-column:auto}
  .mottos{grid-template-columns:1fr}
  .cta-pair{grid-template-columns:1fr}
  .cta-pair .btn{padding:18px 24px;font-size:1.05rem}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .map-card{position:static;max-width:none;margin-top:14px;border-radius:var(--r-md)}
  .map-shell{border-radius:var(--r-md)}
  #map{height:290px}
  .hire{min-height:300px;padding:20px}
  /* Cards grow tall on a narrow screen as the include-chips wrap, so the fixed
     gradient swallowed the photograph entirely. Ease it off and lean on the
     text-shadow for contrast instead. */
  .hire>.hire-tint::after{background:linear-gradient(180deg,rgba(20,4,12,.14) 0%,rgba(20,4,12,.38) 42%,rgba(20,4,12,.8) 100%)}
  .hire p{text-shadow:0 2px 10px rgba(20,4,12,.7)}
  .hire-incl span{background:rgba(20,4,12,.34);border-color:rgba(255,255,255,.3)}
  .drink{width:220px}
  .plan{padding:22px 20px}
  .about-art{aspect-ratio:4/5}
  .ov-body{padding:18px 18px}
  .ov-head{padding:20px 20px 16px}
  .ov-foot{padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
  .stat-row{gap:20px}
}
@media(max-width:380px){
  .hero-facts{display:none}
  .chip{font-size:.6rem;padding:5px 9px}
}

/* print — nobody prints a salsa club, but the SEO page gets exported */
@media print{
  #mcnav,#mcdrawer,.grain,.hero-dots{display:none!important}
  body{background:#fff}
}