/* ============================================================
   BLINKX HUB LOUNGE — Ilesa, Osun State
   Roast & grills by day and night, lounge after dark.
   Palette taken from the logo: its coral pink, black, warm white.
   ============================================================ */

@font-face{font-family:"Gloock";src:url("../fonts/Gloock-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --noir:#0c0c0c;
  --surface:#151312;
  --smoke:#1f1c1a;
  /* brand accent sampled straight from the logo artwork */
  --accent:#fb839a;
  --accent-lt:#ffa0b4;
  --accent-dk:#d0687f;
  /* white on the accent is only 2.4:1 — anything sitting ON the accent
     uses this instead, which measures ~7.9:1 */
  --on-accent:#1a0f12;
  --navy:#4d537c;
  --cream:#fff4ec;
  --ash:rgba(255,244,236,.7);
  --ash-dim:rgba(255,244,236,.5);
  --hair:rgba(255,244,236,.15);
  --accent-rgb:251,131,154;
  --noir-rgb:12,12,12;

  --display:"Gloock","Iowan Old Style",Georgia,serif;
  --body:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;

  --t-xs:clamp(.72rem,.7rem + .1vw,.78rem);
  --t-sm:clamp(.86rem,.83rem + .14vw,.95rem);
  --t-base:clamp(1rem,.96rem + .2vw,1.09rem);
  --t-lg:clamp(1.18rem,1.1rem + .38vw,1.4rem);
  --t-xl:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --t-2xl:clamp(2rem,1.6rem + 1.8vw,3.1rem);
  --t-3xl:clamp(2.6rem,1.9rem + 3.2vw,4.6rem);
  --t-4xl:clamp(3.4rem,2.2rem + 5.4vw,7rem);
  --t-5xl:clamp(4rem,2.2rem + 8.4vw,10rem);

  --s1:.5rem; --s2:.85rem; --s3:1.35rem; --s4:2.1rem;
  --s5:3.4rem; --s6:5.2rem; --s7:7.5rem;

  --edge:clamp(1.15rem,4.2vw,4.5rem);
  --wide:1560px;
  --mid:1180px;

  --ease:cubic-bezier(.19,1,.22,1);
  --f:.22s; --m:.5s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--cream);
  font-family:var(--body);font-size:var(--t-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4,.display{font-family:var(--display);font-weight:400;line-height:1.03;letter-spacing:-.018em}

body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--edge)}
.wrap-mid{max-width:var(--mid);margin-inline:auto;padding-inline:var(--edge)}

.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-lt);margin-bottom:var(--s3);
}
.kicker::before{content:"";width:34px;height:2px;background:var(--accent)}

.h-sec{font-size:var(--t-3xl)}
.lead{font-size:var(--t-lg);color:var(--ash);max-width:56ch}
.muted{color:var(--ash)}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6em;padding:1.1em 2em;font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;border:2px solid transparent;overflow:hidden;
  transition:color var(--m) var(--ease),border-color var(--m) var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform var(--m) var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn-fill{background:var(--accent);color:var(--on-accent)}
.btn-fill::before{background:var(--accent-lt)}
.btn-fill:hover{color:var(--on-accent)}
.btn-line{border-color:var(--hair);color:var(--cream)}
.btn-line::before{background:var(--cream)}
.btn-line:hover,.btn-line:focus-visible{color:var(--on-accent);border-color:var(--cream)}
.btn-ghost-accent{border-color:var(--accent);color:var(--accent-lt)}
.btn-ghost-accent::before{background:var(--accent)}
.btn-ghost-accent:hover,.btn-ghost-accent:focus-visible{color:var(--on-accent)}

.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--m) var(--ease)}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   Preloader
   ============================================================ */
#preloader{position:fixed;inset:0;z-index:200;background:var(--noir);
  display:flex;align-items:center;justify-content:center;flex-direction:column}
#preloader.done{pointer-events:none}
.pre-logo{position:relative;width:clamp(190px,32vw,320px);aspect-ratio:1;display:grid;place-items:center}
/* Visible by default so a broken or blocked script still shows the mark
   rather than an empty black screen. The inline head script adds .js the
   moment scripts are alive, which hands the reveal over to the animation. */
.pre-logo img{grid-area:1/1;width:100%;height:auto}
html.js .pre-logo img{opacity:0}
.pre-flare{
  grid-area:1/1;width:150%;height:150%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),0) 62%);
  filter:blur(20px);
}
.pre-sub{margin-top:var(--s3);font-size:var(--t-xs);letter-spacing:.42em;text-transform:uppercase;
  color:var(--ash-dim);opacity:0}
.pre-count{position:absolute;right:var(--edge);bottom:var(--edge);font-family:var(--display);
  font-size:var(--t-2xl);color:var(--accent)}
.pre-curtain{position:fixed;inset:0;z-index:199;background:var(--surface);transform:translateY(100%)}

/* ============================================================
   Header
   ============================================================ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:var(--s3) var(--edge);
  transition:background var(--m) var(--ease),padding var(--m) var(--ease),border-color var(--m);
  border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(12,12,12,.93);backdrop-filter:blur(14px) saturate(140%);
  padding-block:var(--s2);border-bottom-color:var(--hair)}
/* backdrop-filter makes .hdr a containing block for its position:fixed
   children, which collapses the mobile menu overlay to the header box.
   Drop the filter while the menu is open so the panel can fill the screen. */
body.locked .hdr{backdrop-filter:none;-webkit-backdrop-filter:none}
.brand{display:flex;align-items:center;gap:.7em;line-height:1}
.brand img{width:44px;height:44px;object-fit:contain;transition:width var(--m) var(--ease),height var(--m) var(--ease)}
.hdr.stuck .brand img{width:36px;height:36px}
.brand b{font-family:var(--display);font-size:var(--t-lg);font-weight:400;letter-spacing:.04em}
.brand b i{font-style:normal;color:var(--accent)}
.brand small{display:block;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim)}
@media(max-width:560px){.brand small{display:none}}

.nav{display:flex;align-items:center;gap:var(--s5)}
.nav-links{display:flex;align-items:center;gap:var(--s4)}
/* :not(.btn) so these don't outrank .btn-fill and repaint the CTA's label */
.nav-links a:not(.btn){font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;color:var(--ash)}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn)[aria-current=page]{color:var(--cream)}
.nav-cta{padding:.9em 1.6em}

.burger{display:none;flex-direction:column;gap:6px;padding:.45em;z-index:70}
.burger i{display:block;width:26px;height:2px;background:var(--cream);transition:transform var(--m) var(--ease),opacity var(--f)}
.burger.on i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:940px){
  .burger{display:flex}
  .nav-links{position:fixed;inset:0;background:var(--surface);flex-direction:column;justify-content:center;
    gap:var(--s4);clip-path:circle(0% at calc(100% - 3rem) 3rem);transition:clip-path .7s var(--ease)}
  .nav-links.open{clip-path:circle(150% at calc(100% - 3rem) 3rem)}
  .nav-links a:not(.btn){font-family:var(--display);font-size:var(--t-2xl);letter-spacing:0;text-transform:none;color:var(--cream)}
  .nav-cta{font-family:var(--body)!important;font-size:var(--t-xs)!important;letter-spacing:.16em!important;text-transform:uppercase!important}
}
body.locked{overflow:hidden}

/* ============================================================
   Hero
   ============================================================ */
/* padding-top clears the fixed header: it is out of flow, so tall hero
   content would otherwise start at y=0 and sit behind the logo */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:6.5rem;overflow:hidden}
.hero-media{position:absolute;inset:-8% 0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--noir) 2%,rgba(12,12,12,.9) 30%,rgba(12,12,12,.55) 66%,rgba(12,12,12,.78)),
    radial-gradient(60% 50% at 75% 45%,rgba(var(--accent-rgb),.12),transparent 70%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--edge) clamp(3rem,7vh,6rem)}
.hero-grid{max-width:var(--wide);margin-inline:auto}
.hero-title{font-size:var(--t-5xl);line-height:.9;margin-bottom:var(--s3)}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .ln>span{display:block}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-sub{max-width:46ch;color:var(--ash);font-size:var(--t-lg);margin-bottom:var(--s4)}
.hero-acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--hair);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.hero-meta b{color:var(--accent-lt);font-weight:400}
.scroll-cue{position:absolute;right:var(--edge);bottom:clamp(8rem,17vh,11.5rem);z-index:3;
  display:flex;align-items:center;gap:.8em;font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim)}
.scroll-cue i{display:block;width:2px;height:52px;background:linear-gradient(var(--accent),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* on a narrow or short screen the 3-line headline eats the viewport */
@media(max-width:600px){
  .hero-title{font-size:clamp(2.9rem,11.5vw,4rem)}
  .hero-sub{font-size:var(--t-base)}
}
@media(max-height:700px){
  .hero-title{font-size:clamp(2.6rem,7vh,3.6rem)}
  .hero-meta{margin-top:var(--s3)}
}
@media(max-width:820px){
  .scroll-cue{display:none}
  /* on a narrow screen the copy sits right over the middle of the photo,
     so the scrim has to work harder */
  .hero-media::after{
    background:
      linear-gradient(to top,var(--noir) 4%,rgba(12,12,12,.9) 34%,rgba(12,12,12,.68) 70%,rgba(12,12,12,.8)),
      radial-gradient(60% 50% at 75% 45%,rgba(242,101,34,.14),transparent 70%);
  }
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{overflow:hidden;border-block:1px solid var(--hair);padding-block:var(--s3);background:var(--accent)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{font-family:var(--display);font-size:var(--t-xl);padding-inline:var(--s4);
  display:inline-flex;align-items:center;gap:var(--s4);white-space:nowrap;color:var(--on-accent)}
.marquee-track span::after{content:"";width:8px;height:8px;background:var(--on-accent);border-radius:50%;flex:none}

/* ============================================================
   What's on — dated event band, sits right under the hero
   ============================================================ */
.on-now{
  position:relative;background:var(--surface);
  border-bottom:1px solid var(--hair);
  padding-block:clamp(2.4rem,6vh,4.2rem);overflow:hidden;
}
.on-now::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(45% 50% at 22% 50%,rgba(var(--accent-rgb),.16),transparent 70%);
}
.on-now-in{
  position:relative;display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center;
  max-width:var(--wide);margin-inline:auto;padding-inline:var(--edge);
}
/* two flyers for one festival: the run, and its headline day */
.on-posters{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);width:100%;max-width:430px;justify-self:center}
.on-posters figcaption{
  margin-top:.6em;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-dim);text-align:center;
}
.on-poster{position:relative;width:100%;margin:0}
.on-poster img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border:1px solid rgba(var(--accent-rgb),.35);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9),0 0 0 1px rgba(255,244,236,.05);
}
.on-flag{
  position:absolute;top:0;left:0;z-index:2;transform:translate(-6px,-10px);
  background:var(--accent);color:var(--on-accent);
  padding:.45em .8em;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;
}
.on-live{display:inline-flex;align-items:center;gap:.6em}
.on-live i{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.7);animation:onPulse 2.2s ease-out infinite;
}
@keyframes onPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.65)}
  70%{box-shadow:0 0 0 12px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}
.on-body h2{font-size:var(--t-3xl);margin-bottom:var(--s3)}
.on-meta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-bottom:var(--s3);
  padding-block:var(--s3);border-block:1px solid var(--hair);
}
.on-meta div{min-width:0}
.on-meta dt{
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash-dim);margin-bottom:.25em;
}
.on-meta dd{margin:0;font-family:var(--display);font-size:var(--t-lg);color:var(--cream)}
.on-body p{color:var(--ash);max-width:52ch;margin-bottom:var(--s4)}
.on-acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

@media(max-width:820px){
  .on-now-in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .on-posters{max-width:340px}
  /* keep the flag inside the poster on small screens so it can never
     slip above the section and hide under the fixed header */
  .on-flag{transform:none}
  .on-body p{margin-inline:auto}
  .on-meta{justify-content:center}
  .on-acts{justify-content:center}
  .kicker.on-live{justify-content:center}
}

/* ============================================================
   Overview video — shot vertical, so it gets a vertical frame
   ============================================================ */
.film{background:var(--surface);border-block:1px solid var(--hair)}
.film-in{
  display:grid;grid-template-columns:1fr minmax(0,340px);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  max-width:var(--wide);margin-inline:auto;padding-inline:var(--edge);
}
.film-body h2{font-size:var(--t-3xl);margin-bottom:var(--s3)}
.film-body p{color:var(--ash);max-width:48ch;margin-bottom:var(--s4)}
.film-acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

.film-frame{
  position:relative;justify-self:center;width:100%;max-width:340px;
  aspect-ratio:9/16;overflow:hidden;background:var(--noir);
  border:1px solid rgba(var(--accent-rgb),.3);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95);
}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block;background:var(--noir)}
.film-frame.playing .film-play{opacity:0;pointer-events:none}

.film-play{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;gap:var(--s2);
  background:linear-gradient(to top,rgba(12,12,12,.75),rgba(12,12,12,.25) 55%,rgba(12,12,12,.6));
  transition:opacity var(--m) var(--ease);cursor:pointer;
}
.film-play span{
  width:74px;height:74px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;transition:transform var(--m) var(--ease);
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);animation:filmPulse 2.6s ease-out infinite;
}
.film-play span::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:20px solid var(--on-accent);
  border-top:13px solid transparent;border-bottom:13px solid transparent;
}
.film-play:hover span,.film-play:focus-visible span{transform:scale(1.08)}
.film-play b{
  position:absolute;bottom:var(--s3);left:0;right:0;text-align:center;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);font-weight:700;
}
@keyframes filmPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}
  70%{box-shadow:0 0 0 22px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}
@media(max-width:820px){
  .film-in{grid-template-columns:1fr;text-align:center}
  .film-body p{margin-inline:auto}
  .film-acts{justify-content:center}
  .film-frame{max-width:290px;order:-1}
}

/* ============================================================
   The whole kitchen — the breadth the printed menus actually show,
   so the site stops reading like a burger counter
   ============================================================ */
.kitchen-band{background:var(--surface);border-block:1px solid var(--hair)}
.kb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.kb-cell{
  display:block;background:var(--noir);padding:var(--s4);
  transition:background var(--m) var(--ease);position:relative;
}
.kb-cell:hover{background:var(--smoke)}
.kb-cell h3{font-family:var(--display);font-size:var(--t-lg);color:var(--cream);margin-bottom:.35em;line-height:1.15}
.kb-cell span{display:block;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lt)}
.kb-cell p{font-size:var(--t-sm);color:var(--ash-dim);margin-top:.5em}
.kb-foot{
  display:flex;gap:var(--s4);align-items:baseline;flex-wrap:wrap;
  margin-top:var(--s4);font-size:var(--t-sm);color:var(--ash-dim);
}
@media(max-width:980px){.kb-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.kb-grid{grid-template-columns:repeat(2,1fr)}}
/* on a phone keep two dense columns and drop to name + price */
@media(max-width:520px){
  .kb-cell{padding:var(--s3)}
  .kb-cell p{display:none}
  .kb-cell h3{font-size:var(--t-base)}
}

/* ============================================================
   Sunday buffet — a weekly fixture, not a dated event
   ============================================================ */
.buffet{background:var(--surface);border-block:1px solid var(--hair)}
.buffet-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,4rem);align-items:start}
.buffet-shot{position:relative;overflow:hidden;border:1px solid rgba(var(--accent-rgb),.25)}
.buffet-shot img{width:100%;height:auto;display:block}

.buffet-price{
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
  padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--hair);
}
.buffet-price b{font-family:var(--display);font-size:var(--t-3xl);color:var(--accent-lt);line-height:1}
.buffet-price span{font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}

.buffet-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s4)}
.buffet-facts dt{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:.25em}
.buffet-facts dd{margin:0;font-family:var(--display);font-size:var(--t-lg);color:var(--cream)}

.buffet-menu{margin-block:var(--s4)}
.buffet-menu h3{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-lt);font-family:var(--body);margin-bottom:var(--s3);
}
.bm-groups{columns:2;column-gap:var(--s4)}
.bm-group{break-inside:avoid;margin-bottom:var(--s3)}
.bm-group h4{
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:.4em;
}
.buffet-menu ul{font-size:var(--t-sm);color:var(--ash)}
.buffet-menu li{break-inside:avoid;margin-bottom:.42em;padding-left:1em;position:relative}
.buffet-menu li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--accent);border-radius:50%}

@media(max-width:900px){
  .buffet-in{grid-template-columns:1fr}
}
@media(max-width:480px){
  .buffet-facts{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s2)}
  /* two columns of groups on a phone rather than one long scroll */
  .bm-groups{columns:2;column-gap:var(--s3)}
  .buffet-menu ul{font-size:var(--t-xs)}
}

/* ============================================================
   Sections
   ============================================================ */
.sec{padding-block:clamp(4rem,10vh,8.5rem)}
.sec-surface{background:var(--surface)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.sec-head .h-sec{max-width:20ch}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
.split.flip>.split-media{order:2}
.split-media{position:relative;overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split-media.tall img{aspect-ratio:3/4}
.split-body p+p{margin-top:var(--s3)}
/* grid children must be allowed to shrink below their content width */
.split>*{min-width:0}
/* a wider-left variant; as a class it still collapses at the breakpoint */
@media(min-width:861px){.split.split-lead{grid-template-columns:1.2fr .8fr}}
.badge{position:absolute;left:0;bottom:0;background:var(--accent);color:var(--on-accent);padding:var(--s3) var(--s4);max-width:240px}
.badge b{display:block;font-family:var(--display);font-size:var(--t-xl);line-height:1}
.badge span{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s4)}.split.flip>.split-media{order:0}}

/* service cards — dine in / takeout / delivery */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.service{border:1px solid var(--hair);padding:var(--s5) var(--s4);position:relative;overflow:hidden;
  transition:border-color var(--m) var(--ease),background var(--m) var(--ease)}
.service::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--m) var(--ease)}
.service:hover{border-color:rgba(242,101,34,.5);background:var(--smoke)}
.service:hover::before{transform:scaleY(1);transform-origin:top}
.service .ico{width:44px;height:44px;margin-bottom:var(--s3);color:var(--accent)}
.service h3{font-size:var(--t-xl);margin-bottom:var(--s2)}
.service p{color:var(--ash);font-size:var(--t-sm)}
@media(max-width:860px){.services{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.stat{background:var(--noir);padding:var(--s5) var(--s3);text-align:center}
.sec-surface .stat{background:var(--surface)}
.stat b{display:block;font-family:var(--display);font-size:var(--t-3xl);color:var(--accent-lt);line-height:1}
.stat span{display:block;margin-top:var(--s1);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}}

/* rooms / spaces */
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.room{position:relative;display:block;overflow:hidden;min-height:clamp(400px,50vh,560px);background:var(--smoke)}
.room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter var(--m) var(--ease);filter:saturate(.95) brightness(.7)}
.room:hover img,.room:focus-visible img{transform:scale(1.07);filter:saturate(1.08) brightness(.85)}
.room::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,12,12,.95) 4%,rgba(12,12,12,.3) 55%,transparent)}
.room-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s4) var(--s3)}
.room-txt time{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lt)}
.room-txt h3{font-size:var(--t-xl);margin:.35em 0 .3em}
.room-txt p{font-size:var(--t-sm);color:var(--ash);max-width:30ch;max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--m) var(--ease),opacity var(--m) var(--ease)}
.room:hover .room-txt p,.room:focus-visible .room-txt p{max-height:8em;opacity:1}
@media(max-width:1100px){.rooms{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rooms{grid-template-columns:1fr}.room{min-height:320px}.room-txt p{max-height:8em;opacity:1}}

/* dishes */
.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s3)}
.dish-card{position:relative}
.dish-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--smoke)}
.dish-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.dish-card:hover .dish-shot img{transform:scale(1.06)}
.dish-tag{position:absolute;top:var(--s2);left:var(--s2);z-index:2;background:var(--accent);
  padding:.45em 1em;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-accent);font-weight:700}
.dish-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-top:var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--hair)}
.dish-row h3{font-size:var(--t-lg)}
.dish-row b{font-family:var(--display);color:var(--accent-lt);font-size:var(--t-lg);white-space:nowrap}
.dish-card p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--ash)}
@media(max-width:980px){.dishes{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dishes{grid-template-columns:1fr}}

/* testimonials */
.quotes{position:relative;overflow:hidden}
.quote-track{display:flex;transition:transform .8s var(--ease)}
.quote{flex:0 0 100%;padding-inline:clamp(0rem,4vw,4rem);text-align:center}
.quote blockquote{font-family:var(--display);font-size:var(--t-2xl);line-height:1.22;max-width:24ch;margin-inline:auto}
.quote-who{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s4)}
.quote-who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.quote-who div{text-align:left}
.quote-who b{display:block;font-size:var(--t-sm)}
.quote-who span{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.quote-nav{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s5)}
.quote-nav button{width:34px;height:3px;background:var(--hair);transition:background var(--f)}
.quote-nav button[aria-selected=true]{background:var(--accent)}

/* events */
.events{border-top:1px solid var(--hair)}
.event{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s4);align-items:center;
  padding:var(--s4) var(--s2);border-bottom:1px solid var(--hair);
  transition:background var(--m) var(--ease),padding-inline var(--m) var(--ease)}
.event:hover{background:var(--smoke);padding-inline:var(--s4)}
.event time{font-family:var(--display);font-size:var(--t-xl);color:var(--accent-lt);min-width:4.4ch}
.event h3{font-size:var(--t-lg)}
.event .ev-kind{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.event .ev-room{font-size:var(--t-sm);color:var(--ash)}
@media(max-width:760px){.event{grid-template-columns:auto 1fr;gap:var(--s2) var(--s3)}
  .event .ev-kind,.event .ev-room{grid-column:2}}

/* full-bleed band */
.band{position:relative;min-height:58vh;display:flex;align-items:center;overflow:hidden;text-align:center}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.band::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(75% 65% at 50% 50%,rgba(12,12,12,.7),rgba(12,12,12,.88)),
    linear-gradient(to top,rgba(12,12,12,.92),rgba(12,12,12,.6) 45%,rgba(12,12,12,.85))}
.band-in{position:relative;z-index:2;width:100%;padding-inline:var(--edge)}
.band h2{font-size:var(--t-3xl);max-width:20ch;margin:0 auto var(--s3)}
.band p{max-width:52ch;margin:0 auto var(--s4);color:var(--ash)}

/* order strip — the phone number, loud */
.order-strip{background:var(--accent);color:var(--on-accent);padding:var(--s5) var(--edge);text-align:center}
.order-strip h2{font-size:var(--t-2xl);margin-bottom:var(--s2)}
.order-strip .tel{font-family:var(--display);font-size:var(--t-3xl);display:inline-block;line-height:1.05}
.order-strip p{opacity:.92;margin-top:var(--s2)}

/* gallery */
.strip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);scroll-snap-type:x mandatory}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-thumb{background:var(--accent)}
.strip figure{flex:0 0 clamp(230px,26vw,340px);scroll-snap-align:start;position:relative;overflow:hidden}
.strip img{aspect-ratio:3/4;width:100%;object-fit:cover;transition:transform 1s var(--ease)}
.strip figure:hover img{transform:scale(1.05)}

.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s2)}
.gal figure{position:relative;overflow:hidden;cursor:zoom-in;background:var(--smoke)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s3);z-index:2;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(12,12,12,.88),transparent)}
.g-6{grid-column:span 6}.g-4{grid-column:span 4}.g-8{grid-column:span 8}.g-3{grid-column:span 3}.g-12{grid-column:span 12}
.ar-4-3 img{aspect-ratio:4/3}.ar-1-1 img{aspect-ratio:1/1}.ar-3-4 img{aspect-ratio:3/4}.ar-16-9 img{aspect-ratio:16/9}
@media(max-width:860px){.g-6,.g-4,.g-8,.g-3{grid-column:span 6}}

.lbox{position:fixed;inset:0;z-index:150;background:rgba(6,6,6,.97);display:flex;align-items:center;
  justify-content:center;padding:var(--edge);opacity:0;pointer-events:none;transition:opacity var(--m) var(--ease)}
.lbox.on{opacity:1;pointer-events:auto}
.lbox img{max-width:min(92vw,1180px);max-height:82vh;object-fit:contain}
.lbox figcaption{text-align:center;margin-top:var(--s2);font-size:var(--t-sm);color:var(--ash)}
.lbox-x{position:absolute;top:var(--edge);right:var(--edge);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase}

/* ============================================================
   Menu page
   ============================================================ */
.menu-tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5);border-bottom:1px solid var(--hair);padding-bottom:var(--s3)}
.menu-tabs button{padding:.7em 1.3em;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash-dim);border:1px solid transparent;font-weight:700;
  transition:color var(--f),border-color var(--f),background var(--f)}
.menu-tabs button[aria-selected=true]{color:var(--on-accent);background:var(--accent)}
.menu-tabs button:hover{color:var(--cream)}
.menu-tabs button[aria-selected=true]:hover{color:var(--on-accent)}

.menu-panel{display:none}
.menu-panel.on{display:block}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,6vw,6rem)}
@media(max-width:820px){.menu-cols{grid-template-columns:1fr}}
.m-item{padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.m-top{display:flex;align-items:baseline;gap:var(--s2)}
.m-top h3{font-size:var(--t-lg)}
.m-dots{flex:1;border-bottom:1px dotted rgba(255,244,236,.28);transform:translateY(-.3em)}
.m-top b{font-family:var(--display);color:var(--accent-lt);font-size:var(--t-lg);white-space:nowrap}
.m-item p{font-size:var(--t-sm);color:var(--ash);margin-top:.3em;max-width:46ch}
/* a price we have not confirmed is shown as "ask", never as a guess */
.m-top b.m-ask,.dish-row b.m-ask{
  font-family:var(--body);font-size:var(--t-sm);font-style:italic;
  color:var(--ash-dim);text-transform:lowercase;letter-spacing:.02em;
}
.m-note{
  display:flex;gap:var(--s2);align-items:flex-start;
  border-left:2px solid var(--accent);background:rgba(var(--accent-rgb),.07);
  padding:var(--s3) var(--s4);margin-bottom:var(--s5);
  font-size:var(--t-sm);color:var(--ash);max-width:70ch;
}
.m-note b{color:var(--cream);font-family:var(--body);font-weight:700}

/* ------------------------------------------------------------
   Two rooms, two price lists.
   The switch swaps which of the two printed prices is showing;
   both are in the markup, so the page is right before JS runs.
   ------------------------------------------------------------ */
.venue-switch{margin-bottom:var(--s5)}
.vs-q{font-size:var(--t-sm);color:var(--ash);margin-bottom:var(--s3);max-width:52ch}
.vs-btns{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);max-width:560px}
.vs-btns button{
  display:flex;flex-direction:column;gap:.25em;align-items:flex-start;
  padding:var(--s3) var(--s4);background:var(--noir);text-align:left;
  transition:background var(--f),color var(--f);
}
.vs-btns button b{font-family:var(--display);font-size:var(--t-lg);color:var(--cream);line-height:1.1}
.vs-btns button small{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.vs-btns button:hover{background:var(--smoke)}
.vs-btns button[aria-pressed=true]{background:var(--accent)}
.vs-btns button[aria-pressed=true] b,
.vs-btns button[aria-pressed=true] small{color:var(--on-accent)}
.venue-switch[hidden]{display:none}
@media(max-width:560px){
  .vs-btns{grid-template-columns:1fr}
  .vs-btns button{flex-direction:row;align-items:baseline;gap:.6em;flex-wrap:wrap}
}

/* only one of the two prices is ever visible */
.menu-kitchen[data-venue=lounge] .pd,
.menu-kitchen[data-venue=dining] .pl{display:none}
.m-top b .m-ask{
  font-family:var(--body);font-size:var(--t-sm);font-style:italic;
  color:var(--ash-dim);text-transform:lowercase;letter-spacing:.02em;
}

/* a run of dishes under one printed heading */
.m-group + .m-group{margin-top:var(--s6)}
.m-ghead{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s2);margin-bottom:var(--s2);
  border-bottom:1px solid rgba(var(--accent-rgb),.35);
}
.m-ghead h2{
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);
}
.m-ghead span{font-size:var(--t-xs);color:var(--ash-dim);font-style:italic}

/* ------------------------------------------------------------
   Private hire — three separate spaces, plus the planner
   ------------------------------------------------------------ */
.hire-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.hire-card{background:var(--noir);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
/* the photo sits full-bleed at the top of the card, above the number */
.hire-shot{order:-1;margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s2);overflow:hidden}
.hire-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform var(--m) var(--ease)}
.hire-card:hover .hire-shot img{transform:scale(1.04)}
.hire-card > span{
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);
}
.hire-card h3{font-family:var(--display);font-size:var(--t-xl);color:var(--cream);line-height:1.05}
.hire-card p{font-size:var(--t-sm);color:var(--ash)}
.hire-card ul{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--hair)}
.hire-card li{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim);
  padding:.3em 0 .3em 1em;position:relative;
}
.hire-card li::before{content:"";position:absolute;left:0;top:.85em;width:5px;height:1px;background:var(--accent)}

.planner{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;
  margin-top:var(--s5);padding:var(--s4) var(--s5);
  border:1px solid rgba(var(--accent-rgb),.4);
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.03));
}
.planner-mark{
  font-family:var(--display);font-size:var(--t-3xl);color:var(--accent-lt);line-height:1;
}
.planner h3{font-family:var(--display);font-size:var(--t-xl);color:var(--cream);margin-bottom:.25em}
.planner p{font-size:var(--t-sm);color:var(--ash);max-width:58ch}
@media(max-width:980px){.hire-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .planner{grid-template-columns:1fr;text-align:left}
  .planner .btn{justify-self:start}
}

/* ------------------------------------------------------------
   NOURISH — the fast-food counter. Own identity, same palette:
   the eye-catch is the ₦200 figure, not a second brand colour.
   ------------------------------------------------------------ */
.nourish{background:var(--noir);border-block:1px solid var(--hair);position:relative;overflow:hidden}
.nourish::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 88% 0%,rgba(var(--accent-rgb),.14),transparent 62%);
}
.nourish > *{position:relative}

.n-hero{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.8rem,4vw,4rem);
  align-items:center;margin-bottom:var(--s6);
}
.n-mark{
  display:inline-flex;align-items:center;gap:.7em;margin-bottom:var(--s3);
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent-lt);
}
.n-mark::before{content:"";width:34px;height:1px;background:var(--accent)}
.n-hero h2{font-family:var(--display);font-size:var(--t-4xl);line-height:.95;color:var(--cream);margin-bottom:var(--s3)}
.n-hero .lead{max-width:44ch}

.n-price{
  border:1px solid rgba(var(--accent-rgb),.4);
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.03));
  padding:var(--s4);
}
.n-price > span{
  display:block;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ash-dim);margin-bottom:.15em;
}
.n-price > b{
  display:block;font-family:var(--display);font-size:clamp(3.4rem,8vw,5.2rem);
  line-height:.9;color:var(--accent-lt);margin-bottom:var(--s3);
}
.n-price dl{display:grid;grid-template-columns:1fr auto;gap:.5em 1em;
  border-top:1px solid rgba(var(--accent-rgb),.3);padding-top:var(--s3)}
.n-price dt{font-size:var(--t-sm);color:var(--ash)}
.n-price dd{margin:0;font-family:var(--display);font-size:var(--t-sm);color:var(--cream);text-align:right}

/* the counter itself — Nourish is a separate building, so show it */
.n-side{display:flex;flex-direction:column;gap:var(--s3)}
.n-shot{position:relative;overflow:hidden;border:1px solid rgba(var(--accent-rgb),.25)}
.n-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform var(--m) var(--ease)}
.n-shot:hover img{transform:scale(1.03)}
.n-shot figcaption{
  position:absolute;left:0;bottom:0;padding:.5em .9em;
  background:var(--accent);color:var(--on-accent);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}

/* on the menu page it runs wide, between the hero and the price columns */
.n-band{position:relative;overflow:hidden;margin-bottom:var(--s6);border:1px solid rgba(var(--accent-rgb),.25)}
.n-band img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 42%;display:block}
.n-band figcaption{
  position:absolute;left:0;bottom:0;padding:.6em 1.1em;
  background:var(--accent);color:var(--on-accent);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
@media(max-width:820px){.n-band img{aspect-ratio:16/9}}
@media(max-width:520px){.n-band img{aspect-ratio:4/3}}

.n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) clamp(2rem,5vw,4.5rem)}
.n-block h3{
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);
  padding-bottom:var(--s2);margin-bottom:var(--s2);
  border-bottom:1px solid rgba(var(--accent-rgb),.35);
}
.n-block li{display:flex;align-items:baseline;gap:.6em;padding:.42em 0;font-size:var(--t-sm)}
.n-block li span{color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-block li i{flex:1;min-width:1.2em;border-bottom:1px dotted rgba(255,244,236,.2);transform:translateY(-.28em)}
.n-block li b{font-family:var(--display);color:var(--cream);white-space:nowrap}

@media(max-width:1000px){.n-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.n-hero{grid-template-columns:1fr}}
@media(max-width:620px){.n-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   The bar list — printed-sheet density, three columns of it
   ------------------------------------------------------------ */
.bar-sec{background:var(--surface);border-block:1px solid var(--hair)}
.bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) clamp(2rem,5vw,4.5rem)}
.bar-block{break-inside:avoid}
.bar-block h3{
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);
  padding-bottom:var(--s2);margin-bottom:var(--s2);
  border-bottom:1px solid rgba(var(--accent-rgb),.35);
}
.bar-block li{display:flex;align-items:baseline;gap:.6em;padding:.42em 0;font-size:var(--t-sm)}
.bar-block li span{color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-block li i{flex:1;min-width:1.2em;border-bottom:1px dotted rgba(255,244,236,.2);transform:translateY(-.28em)}
.bar-block li b{font-family:var(--display);color:var(--cream);white-space:nowrap}
.bar-foot{margin-top:var(--s5);font-size:var(--t-sm);color:var(--ash-dim);max-width:62ch}

@media(max-width:1000px){.bar-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bar-grid{grid-template-columns:1fr}}
.m-flag{display:inline-block;margin-left:.6em;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-lt);border:1px solid rgba(var(--accent-rgb),.5);padding:.1em .5em;vertical-align:middle}

/* ============================================================
   Forms
   ============================================================ */
.form{max-width:680px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}
.f{margin-bottom:var(--s3)}
.f label{display:block;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:.6em}
.f input,.f select,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);
  color:var(--cream);padding:.85em 0;font:inherit;font-size:var(--t-base);
  transition:border-color var(--m) var(--ease);border-radius:0}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 14px) 1.3em,calc(100% - 8px) 1.3em;background-size:6px 6px;background-repeat:no-repeat;
  -webkit-appearance:none;appearance:none;padding-right:2em}
.f select option{background:var(--surface);color:var(--cream)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--accent-lt)}
.f textarea{resize:vertical}
.f-err{display:none;color:#ff7d90;font-size:var(--t-xs);margin-top:.5em}
.f.bad input,.f.bad select{border-bottom-color:#ff7d90}
.f.bad .f-err{display:block}
.f-note{font-size:var(--t-sm);color:var(--ash-dim);margin-top:var(--s3);max-width:54ch}

.confirm{display:none;border:1px solid rgba(242,101,34,.5);background:rgba(242,101,34,.1);
  padding:var(--s4);max-width:680px;margin-top:var(--s4)}
.confirm.on{display:block}
.confirm h3{font-size:var(--t-xl);margin-bottom:var(--s2)}

/* ============================================================
   Info / contact
   ============================================================ */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
@media(max-width:860px){.info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.info-grid{grid-template-columns:1fr}}
.info h3{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lt);
  margin-bottom:var(--s2);font-family:var(--body)}
.info p,.info a{color:var(--ash);font-size:var(--t-base)}
.info a:hover{color:var(--cream)}
.map-embed{
  position:relative;aspect-ratio:16/10;min-width:0;
  border:1px solid var(--hair);overflow:hidden;background:var(--smoke);
}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  /* the embed ships a bright basemap; tone it to the rest of the page */
  filter:invert(.92) hue-rotate(180deg) saturate(.75) contrast(.92)}
.map-acts{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);font-size:var(--t-sm)}
@media(max-width:520px){.map-embed{aspect-ratio:4/3}}
.map-ph{aspect-ratio:21/9;border:1px dashed var(--hair);display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--ash-dim);font-size:var(--t-sm);padding:var(--s4)}

.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{text-align:left;padding:var(--s3) 0;border-bottom:1px solid var(--hair);font-weight:400}
.hours th{font-family:var(--display);font-size:var(--t-lg)}
.hours td{color:var(--ash);text-align:right;font-variant-numeric:tabular-nums}

/* page intro */
.pintro{position:relative;padding-top:clamp(9rem,18vh,13rem);padding-bottom:clamp(3rem,7vh,5rem);overflow:hidden}
.pintro-bg{position:absolute;inset:0;z-index:0}
.pintro-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.9)}
.pintro-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--noir),rgba(12,12,12,.5))}
.pintro-in{position:relative;z-index:2}
.pintro h1{font-size:var(--t-4xl);margin-bottom:var(--s3)}

/* ============================================================
   Footer
   ============================================================ */
.ftr{background:var(--surface);border-top:1px solid var(--hair);padding-top:var(--s6)}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--s5) var(--s4);padding-bottom:var(--s6)}
@media(max-width:960px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr h4{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lt);
  margin-bottom:var(--s3);font-family:var(--body)}
.ftr p,.ftr a,.ftr li{font-size:var(--t-sm);color:var(--ash)}
.ftr li{margin-bottom:.7em}
.ftr a:hover{color:var(--cream)}
.ftr-logo{display:flex;align-items:center;gap:.8em;margin-bottom:var(--s3)}
.ftr-logo img{width:64px;height:64px;object-fit:contain}
.ftr-logo b{font-family:var(--display);font-size:var(--t-xl);font-weight:400}
.ftr-logo b i{font-style:normal;color:var(--accent)}
.news{display:flex;border-bottom:1px solid var(--hair);margin-top:var(--s3)}
.news input{flex:1;background:none;border:0;color:var(--cream);padding:.8em 0;font:inherit;font-size:var(--t-sm)}
.news input:focus{outline:none}
.news button{padding:0 0 0 var(--s2);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-lt);font-weight:700}
.ftr-btm{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);padding-block:var(--s3);
  border-top:1px solid var(--hair);font-size:var(--t-xs);color:var(--ash-dim)}

/* ============================================================
   Motion primitives
   ============================================================ */
[data-rise]{opacity:0;transform:translateY(26px)}
/* same start state the hero timeline tweens from, so nothing is
   ever painted before its own animation runs */
[data-hero-in]{opacity:0;transform:translateY(22px)}
[data-mask]{clip-path:inset(0 0 100% 0)}
.ln>span[data-line]{transform:translateY(105%)}

.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:180;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;opacity:0}
.cursor.live,.cursor-dot.live{opacity:1}
.cursor{width:34px;height:34px;border:1px solid rgba(255,244,236,.75);margin:-17px 0 0 -17px;
  transition:width .3s,height .3s,margin .3s,opacity .3s}
.cursor-dot{width:5px;height:5px;background:var(--cream);margin:-2.5px 0 0 -2.5px}
.cursor.grow{width:72px;height:72px;margin:-36px 0 0 -36px}
@media(hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rise]{opacity:1;transform:none}
  [data-hero-in]{opacity:1;transform:none}
  [data-mask]{clip-path:none}
  .ln>span[data-line]{transform:none}
  .pre-logo img{opacity:1}
  .cursor,.cursor-dot{display:none}
}