/* ============================================================
   POINT — Music · Eat · Drink
   Palette taken from the brand's neon sign: purple neon on a near-black
   field, warmed by the teal-blue interior walls and wood tables.
   The accent variables are still named --gold* so every rule that
   referenced them keeps working; the values are the neon purple.
   ============================================================ */

:root{
  --navy:      #0E1116;
  --navy-2:    #141922;
  --navy-3:    #1B2230;
  --gold:      #A403EB;  /* neon core, sampled from logo.png */
  --gold-lt:   #C86BFF;  /* glow / hover */
  --gold-dk:   #7003A6;  /* pressed + shadow */
  --teal:      #6E9BA8;
  --teal-dk:   #2F5A67;
  --cream:     #F6F1E7;
  --cream-2:   #EDE5D6;
  --ink:       #14171C;
  --ink-soft:  #4A5058;
  --line:      rgba(20,23,28,.12);
  --line-lt:   rgba(246,241,231,.16);

  --ff-serif: 'Playfair Display', Didot, 'Times New Roman', serif;
  --ff-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 4px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--gold); color:#FFF; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#FFF; padding:12px 20px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------------------------------------------------- typography */
.h2{
  font-family:var(--ff-serif);
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:.2em 0 .55em;
  color:var(--ink);
}
.h2--light{ color:var(--cream); }

.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dk);
  margin:0;
}
.eyebrow--light{ color:var(--gold-lt); }

.section{ padding:clamp(70px, 11vw, 150px) 0; }

.sechead{ max-width:660px; margin-bottom:clamp(38px,6vw,68px); }
.sechead__sub{
  color:var(--ink-soft);
  font-size:1.06rem;
  margin:0;
  max-width:56ch;
}
.reel .sechead__sub{ color:rgba(246,241,231,.66); }

/* ---------------------------------------------------- buttons */
.btn{
  --bh:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:var(--bh);
  padding:0 30px;
  font-size:.9rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn--sm{ --bh:42px; padding:0 20px; font-size:.76rem; }

/* Neon purple is dark, so the label is white (5.5:1) rather than near-black.
   On the lighter hover fill we go back to deep aubergine ink (6.2:1). */
.btn--gold{
  background:var(--gold);
  color:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -12px rgba(164,3,235,.75);
}
.btn--gold:hover{
  background:var(--gold-lt);
  color:#1A0324;
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 18px 34px -14px rgba(200,107,255,.9);
}
.btn--gold:active{ transform:translateY(0); }

.btn--ghost{
  border:1px solid rgba(246,241,231,.4);
  color:var(--cream);
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.04);
}
.btn--ghost:hover{ border-color:var(--cream); background:rgba(255,255,255,.1); transform:translateY(-2px); }

.btn--dark{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--dark:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:600; font-size:.88rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-dk);
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform .3s var(--ease); }
.link-arrow:hover{ gap:.8em; color:var(--ink); }
.link-arrow--light{ color:var(--gold-lt); }
.link-arrow--light:hover{ color:var(--cream); }

/* ---------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease),
             backdrop-filter .45s var(--ease), transform .45s var(--ease);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:18px var(--pad);
  display:flex; align-items:center; gap:26px;
  transition:padding .45s var(--ease);
}
.nav__brand{ flex:none; display:block; }
.nav__mark{
  width:112px; height:auto; transition:width .45s var(--ease);
  filter:drop-shadow(0 0 12px rgba(164,3,235,.5));
}

.nav__links{
  display:flex; gap:clamp(14px,2vw,30px);
  margin-left:auto;
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}
.nav__links a{
  color:rgba(246,241,231,.82);
  padding:6px 0;
  position:relative;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-lt);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after,
.nav__links a.is-current::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:16px; flex:none; }

.langswitch{
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em;
  color:rgba(246,241,231,.55);
}
.langswitch button{ color:inherit; padding:4px 2px; transition:color .25s var(--ease); }
.langswitch button:hover{ color:var(--cream); }
.langswitch button.is-active{ color:var(--gold-lt); }

.nav__burger{ display:none; width:34px; height:34px; position:relative; }
.nav__burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--cream);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__burger span:nth-child(1){ top:13px; }
.nav__burger span:nth-child(2){ bottom:13px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* scrolled state */
.nav.is-stuck{
  background:rgba(14,17,22,.86);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--line-lt), 0 12px 40px -20px rgba(0,0,0,.8);
}
.nav.is-stuck .nav__inner{ padding-block:11px; }
.nav.is-stuck .nav__mark{ width:96px; }
.nav.is-hidden{ transform:translateY(-102%); }

/* ---------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  background:var(--navy);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__video{
  width:100%; height:100%;
  object-fit:cover;
  /* the source reel is vertical and shot at night — lift and warm it slightly
     so it reads as a background rather than a phone video */
  filter:saturate(1.08) contrast(1.06) brightness(.72);
  transform:scale(1.04);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 22% 42%, rgba(14,17,22,.30) 0%, rgba(14,17,22,.72) 55%, rgba(14,17,22,.94) 100%),
    linear-gradient(to top, rgba(14,17,22,.98) 0%, rgba(14,17,22,.30) 46%, rgba(14,17,22,.62) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero__content{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:130px var(--pad) 110px;
  color:var(--cream);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lt);
  margin:0 0 26px;
}
.hero__eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.65); }
  70%{ box-shadow:0 0 0 11px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

.hero__title{ margin:0 0 26px; }
/* The real neon lockup already contains the "Music · Eat · Drink" line, so the
   hero shows it as one image. A purple glow behind it makes the sign read as
   lit rather than pasted onto the video. */
.hero__logo{ display:block; max-width:min(560px, 80vw); }
.hero__logo img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 34px rgba(164,3,235,.55))
         drop-shadow(0 10px 30px rgba(0,0,0,.5));
}

.hero__lead{
  font-size:clamp(1.04rem,1.9vw,1.3rem);
  line-height:1.6;
  color:rgba(246,241,231,.86);
  max-width:46ch;
  margin:0 0 38px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,58px);
  list-style:none; margin:0; padding:30px 0 0;
  border-top:1px solid var(--line-lt);
  max-width:640px;
}
.hero__facts li{ display:flex; flex-direction:column; gap:2px; }
.hero__facts strong{
  font-family:var(--ff-serif);
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700;
  color:var(--cream);
  line-height:1;
}
.hero__facts .star{ color:var(--gold); font-size:.8em; margin-left:.1em; }
.hero__facts span{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,241,231,.55);
}

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:24px; height:40px; border:1px solid rgba(246,241,231,.35); border-radius:14px;
  display:grid; place-items:center;
}
.hero__scroll span{
  width:2px; height:8px; border-radius:2px; background:var(--gold-lt);
  animation:scrolldot 1.9s var(--ease) infinite;
}
@keyframes scrolldot{
  0%{ transform:translateY(-6px); opacity:0; }
  40%{ opacity:1; }
  100%{ transform:translateY(7px); opacity:0; }
}

/* ---------------------------------------------------- ticker */
.ticker{
  background:var(--navy);
  border-block:1px solid var(--line-lt);
  overflow:hidden;
  padding:15px 0;
}
.ticker__track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  animation:marquee 34s linear infinite;
  font-family:var(--ff-serif);
  font-size:clamp(1rem,2vw,1.4rem);
  font-style:italic;
  color:rgba(246,241,231,.78);
  white-space:nowrap;
}
.ticker__track i{ color:var(--gold); font-style:normal; font-size:.6em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* ---------------------------------------------------- story */
.story{ background:var(--cream); }
.story__grid{
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:clamp(36px,6vw,90px);
  align-items:center;
}
.story__text p{ color:var(--ink-soft); margin:0 0 1.1em; max-width:52ch; }
.story__text strong{ color:var(--ink); font-weight:600; }
.story__text em{ font-family:var(--ff-serif); font-style:italic; color:var(--ink); }

.story__list{
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; gap:12px;
}
.story__list li{
  position:relative; padding-left:26px;
  font-size:.95rem; color:var(--ink);
}
.story__list li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:11px; height:11px; border-radius:50%;
  border:2.5px solid var(--gold);
}
.story__list li::after{
  content:""; position:absolute; left:4px; top:calc(.52em + 4px);
  width:3px; height:3px; border-radius:50%; background:var(--gold);
}

.story__media{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
}
.story__fig{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); }
.story__fig--tall{ grid-row:span 2; }
.story__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.story__fig:hover img{ transform:scale(1.05); }
.story__fig figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 14px;
  background:linear-gradient(to top, rgba(14,17,22,.9), transparent);
  color:var(--cream);
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
}
.story__fig--tall img{ min-height:340px; }

/* ---------------------------------------------------- signature */
.signature{
  position:relative;
  padding:clamp(90px,14vw,190px) 0;
  color:var(--cream);
  isolation:isolate;
  overflow:hidden;
}
.signature__bg{ position:absolute; inset:0; z-index:-2; }
.signature__bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
}
.signature::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 70% at 30% 50%, rgba(14,17,22,.52), rgba(14,17,22,.9) 70%),
    linear-gradient(to right, rgba(14,17,22,.94), rgba(14,17,22,.5));
}
.signature__inner{ max-width:620px; }
.signature__lead{
  font-size:clamp(1.02rem,1.8vw,1.2rem);
  color:rgba(246,241,231,.88);
  margin:0 0 28px;
}
.signature__price{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 32px;
}
.signature__price span{
  font-family:var(--ff-serif); font-size:clamp(2rem,4vw,2.8rem); font-weight:700;
  color:var(--gold-lt); line-height:1;
}
.signature__price em{
  font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,241,231,.6);
}

/* ---------------------------------------------------- menu */
.menu{ background:var(--cream-2); }
.menu__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(28px,4vw,52px);
  /* Categories vary a lot in length (16 cocktails vs. 3 wines), so a strict
     row grid strands short ones beside a tall one. Let each block find the
     shortest column instead. */
  align-items:start;
  grid-auto-flow:dense;
}
/* A long category would otherwise tower over its neighbours. Give it two grid
   columns of width and split it internally, so the rows stay wide enough that
   drink names like "Sex on the Beach" don't wrap. */
.mcat--long{
  grid-column:span 2;
  column-count:2;
  column-gap:clamp(28px,4vw,52px);
}
.mcat--long .mcat__head{ column-span:all; }
.mcat--long .mitem{ break-inside:avoid; }
@media (max-width:900px){
  .mcat--long{ grid-column:span 1; column-count:1; }
}
/* shown while data/menu.json is in flight, or if it fails to load */
.menu__state{
  grid-column:1/-1;
  margin:0; padding:34px 0;
  color:var(--ink-soft);
  font-size:.95rem;
}
.menu__state--err{ color:#8C2F2F; }
.mcat__head{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:14px; margin-bottom:20px;
  border-bottom:1.5px solid var(--ink);
}
.mcat__head h3{
  font-family:var(--ff-serif); font-size:1.5rem; font-weight:700; margin:0;
  letter-spacing:-.01em;
}
.mcat__note{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-left:auto; text-align:right;
}
.mitem{
  display:grid; grid-template-columns:1fr auto; gap:4px 14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.mitem:last-child{ border-bottom:0; }
.mitem__name{
  font-weight:600; font-size:1.01rem;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.mitem__price{
  font-family:var(--ff-serif); font-size:1.1rem; font-weight:700;
  color:var(--gold-dk); white-space:nowrap;
}
/* Burgers carry two prices (alone / combo): stack them, right-aligned, with the
   variant label small and quiet so the numbers still read as the price. */
.mitem__var{
  display:block; text-align:right; line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.mitem__var + .mitem__var{ margin-top:2px; }
.mitem__var em{
  font-family:var(--ff-sans); font-style:normal; font-weight:600;
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:8px;
}
.mitem__desc{
  grid-column:1/-1;
  font-size:.9rem; color:var(--ink-soft); margin:0; max-width:48ch;
}
.tag{
  font-size:.6rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:3px 7px; border-radius:2px; line-height:1;
}
.tag--pop{ background:var(--gold); color:#FFF; }
.tag--veg{ background:#3F6B4A; color:#EAF3EC; }

/* house special */
.special{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(24px,4vw,52px);
  align-items:center;
  margin-top:clamp(48px,7vw,86px);
  padding:clamp(24px,3.5vw,44px);
  background:var(--navy);
  color:var(--cream);
  border-radius:var(--r);
  overflow:hidden;
}
.special__img{ overflow:hidden; border-radius:2px; }
.special__img img{ width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.1s var(--ease-out); }
.special:hover .special__img img{ transform:scale(1.06); }
.special__body .eyebrow{ color:var(--gold-lt); }
.special__body h3{
  font-family:var(--ff-serif); font-size:clamp(1.7rem,3.4vw,2.5rem);
  font-weight:700; margin:.25em 0 .5em;
}
.special__body p{ color:rgba(246,241,231,.8); margin:0 0 22px; max-width:46ch; }
.special__body em{ color:var(--gold-lt); font-style:italic; }

/* ---------------------------------------------------- reel */
.reel{ background:var(--navy); position:relative; overflow:hidden; }
.reel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 78% 30%, rgba(110,155,168,.14), transparent 70%);
  pointer-events:none;
}
.reel .sechead{ position:relative; }
.reel__stage{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
  position:relative;
}
.reel__phone{
  position:relative;
  width:min(340px, 76vw);
  aspect-ratio:9/16;
  border-radius:26px;
  overflow:hidden;
  background:#000;
  box-shadow:
    0 0 0 8px #1B2230,
    0 0 0 9px rgba(246,241,231,.14),
    0 50px 90px -30px rgba(0,0,0,.9);
}
.reel__phone video{ width:100%; height:100%; object-fit:cover; }
.reel__play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(14,17,22,.32);
  transition:opacity .4s var(--ease), background-color .4s var(--ease);
}
.reel__play svg{
  width:72px; height:72px; fill:var(--cream);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));
  transition:transform .35s var(--ease);
}
.reel__play:hover svg{ transform:scale(1.1); }
.reel__play.is-hidden{ opacity:0; pointer-events:none; }

.reel__mute{
  position:absolute; right:14px; bottom:14px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(14,17,22,.6); backdrop-filter:blur(8px);
  display:grid; place-items:center;
  border:1px solid rgba(246,241,231,.24);
  transition:background-color .3s var(--ease);
}
.reel__mute:hover{ background:rgba(14,17,22,.85); }
.reel__mute svg{ width:20px; height:20px; fill:var(--cream); }
.reel__mute .ico-on{ display:none; }
.reel__mute.is-on .ico-on{ display:block; }
.reel__mute.is-on .ico-off{ display:none; }

.reel__aside{ max-width:34ch; }
.reel__aside blockquote{
  font-family:var(--ff-serif);
  font-size:clamp(1.35rem,2.9vw,2.1rem);
  font-style:italic;
  line-height:1.32;
  color:var(--cream);
  margin:0 0 16px;
}
.reel__aside cite{
  display:block;
  font-style:normal; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(246,241,231,.5);
  margin-bottom:26px;
}

/* ---------------------------------------------------- gallery */
.gallery{ background:var(--cream); }
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  /* let singles back-fill the holes left by the 2x2 and 1x2 features */
  grid-auto-flow:dense;
}
.gitem{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--navy-3);
  cursor:zoom-in;
  aspect-ratio:1;
}
/* a "wide" feature is really a 2x2 block, so its height must match its width */
.gitem--wide{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gitem--tall{ grid-row:span 2; aspect-ratio:auto; }
.gitem img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out), filter .5s var(--ease);
}
.gitem:hover img{ transform:scale(1.07); }
.gitem::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,17,22,.6), transparent 55%);
  opacity:0; transition:opacity .4s var(--ease);
}
.gitem:hover::after{ opacity:1; }
.gitem__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px;
  color:var(--cream);
  font-size:.8rem; letter-spacing:.06em; font-weight:500;
  transform:translateY(10px); opacity:0;
  transition:transform .45s var(--ease), opacity .4s var(--ease);
}
.gitem:hover .gitem__cap{ transform:none; opacity:1; }

/* ---------------------------------------------------- reviews */
.reviews{ background:var(--cream-2); }
.reviews__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.rcard{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 24px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rcard:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -26px rgba(20,23,28,.4); }
.rcard__stars{ color:var(--gold); letter-spacing:.16em; font-size:.9rem; }
.rcard__text{
  font-family:var(--ff-serif);
  font-size:1.06rem; line-height:1.55; font-style:italic;
  color:var(--ink); margin:0; flex:1;
}
.rcard__who{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; color:var(--ink-soft);
  padding-top:12px; border-top:1px solid var(--line);
}
.rcard__who strong{ color:var(--ink); font-weight:600; }
.rcard__who span{ margin-left:auto; }
.reviews__more{ margin-top:34px; text-align:center; }

/* ---------------------------------------------------- visit */
.visit{ background:var(--cream); }
.visit__grid{
  display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
.visit__dl{ margin:8px 0 32px; display:grid; gap:0; }
.visit__dl > div{
  display:grid; grid-template-columns:130px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.visit__dl dt{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:3px;
}
.visit__dl dd{ margin:0; font-size:1.02rem; }
.visit__dl dd a{ border-bottom:1px solid var(--line); transition:border-color .3s; }
.visit__dl dd a:hover{ border-color:var(--gold); }

.openpill{
  display:inline-block; margin-left:10px;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px;
  vertical-align:2px;
}
.openpill.is-open{ background:#DCF5E3; color:#1E6B37; }
.openpill.is-closed{ background:#F6E0E0; color:#8C2B2B; }

.visit__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.visit__tags{
  list-style:none; margin:34px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.visit__tags li{
  font-size:.76rem; letter-spacing:.06em;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--ink-soft);
  background:rgba(255,255,255,.5);
}

.visit__map{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--navy-3);
  box-shadow:0 26px 60px -34px rgba(20,23,28,.55);
}
.visit__map iframe{
  width:100%; height:clamp(340px,46vw,500px); border:0;
  filter:grayscale(.35) contrast(1.04);
}
.visit__maplink{
  position:absolute; left:14px; bottom:14px;
  background:var(--cream); color:var(--ink);
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 16px; border-radius:2px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
.visit__maplink:hover{ transform:translateY(-2px); }

/* ---------------------------------------------------- footer */
.foot{ background:var(--navy); color:rgba(246,241,231,.72); padding:clamp(54px,8vw,88px) 0 26px; }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,5vw,60px);
  padding-bottom:44px;
  border-bottom:1px solid var(--line-lt);
}
.foot__mark{
  width:200px; height:auto; margin-bottom:20px;
  filter:drop-shadow(0 0 18px rgba(164,3,235,.45));
}
.foot__brand p{ margin:0; max-width:38ch; font-size:.95rem; }
.foot__col h3{
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-lt); margin:0 0 16px;
}
.foot__col p{ margin:0 0 9px; font-size:.95rem; }
.foot__col a{ border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.foot__col a:hover{ color:var(--cream); border-color:var(--gold); }

.foot__base{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:22px;
  font-size:.8rem; color:rgba(246,241,231,.42);
}
.foot__base p{ margin:0; }

/* ---------------------------------------------------- fab */
.fab{
  position:fixed; z-index:90;
  left:16px; right:16px; bottom:16px;
  display:none;
  align-items:center; justify-content:center; gap:.55em;
  min-height:54px;
  background:var(--gold); color:#FFF;
  font-size:.86rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.7);
  transform:translateY(140%);
  transition:transform .5s var(--ease-out);
}
.fab svg{ width:19px; height:19px; fill:currentColor; }
.fab.is-in{ transform:none; }

/* ---------------------------------------------------- lightbox */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(9,11,15,.96);
  display:grid; place-items:center;
  padding:clamp(20px,5vw,70px);
  animation:fade .3s var(--ease);
}
/* `display:grid` above would otherwise defeat the [hidden] attribute */
.lb[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } }
.lb img{
  max-width:100%; max-height:82vh;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.lb__cap{
  position:absolute; left:0; right:0; bottom:26px;
  text-align:center; color:rgba(246,241,231,.72);
  font-size:.88rem; margin:0; padding-inline:20px;
}
.lb__close{
  position:absolute; top:18px; right:24px;
  font-size:2.4rem; line-height:1; color:rgba(246,241,231,.75);
  width:48px; height:48px;
  transition:color .25s, transform .25s;
}
.lb__close:hover{ color:var(--cream); transform:rotate(90deg); }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  font-size:2rem; line-height:1;
  color:var(--cream);
  background:rgba(246,241,231,.08);
  border:1px solid rgba(246,241,231,.18);
  transition:background-color .3s;
}
.lb__nav:hover{ background:rgba(246,241,231,.2); }
.lb__nav--prev{ left:clamp(8px,2vw,28px); }
.lb__nav--next{ right:clamp(8px,2vw,28px); }

/* ---------------------------------------------------- reveal */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .story__grid{ grid-template-columns:1fr; }
  .story__media{ order:-1; }
  .visit__grid{ grid-template-columns:1fr; }
  .reel__stage{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .reel__aside{ max-width:44ch; }
  .reel .sechead{ text-align:center; margin-inline:auto; }
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0 0 0 auto;
    width:min(320px,84vw);
    flex-direction:column; gap:4px;
    background:rgba(14,17,22,.98);
    backdrop-filter:blur(20px);
    padding:100px 34px 40px;
    font-size:1rem;
    transform:translateX(102%);
    transition:transform .5s var(--ease-out);
    box-shadow:-20px 0 60px -20px rgba(0,0,0,.8);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line-lt); }
  .nav__burger{ display:block; }
  #orderNav{ display:none; }

  .special{ grid-template-columns:1fr; }
  .special__img{ max-width:340px; }
  .foot__grid{ grid-template-columns:1fr; }
  .fab{ display:flex; }
  body{ padding-bottom:0; }
}

@media (max-width:680px){
  body{ font-size:16px; }
  .hero{ min-height:92svh; }
  .hero__content{ padding-top:118px; padding-bottom:92px; }
  .hero__facts{ gap:22px 34px; }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__scroll{ display:none; }

  .gallery__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .gitem--wide{ grid-column:span 2; grid-row:auto; aspect-ratio:4/3; }
  .gitem--tall{ grid-row:auto; aspect-ratio:1; }

  .story__media{ grid-template-columns:1fr 1fr; }
  .story__fig--tall{ grid-column:span 2; grid-row:auto; }
  .story__fig--tall img{ min-height:0; aspect-ratio:4/3; }

  .visit__dl > div{ grid-template-columns:1fr; gap:4px; }
  .visit__cta .btn{ flex:1 1 100%; }

  .lb__nav{ width:44px; height:44px; font-size:1.5rem; }
}

@media (max-width:420px){
  .reel__phone{ border-radius:20px; }
}

/* print */
@media print{
  .nav,.fab,.hero__media,.reel,.visit__map,.hero__scroll,.ticker{ display:none !important; }
  body{ background:#fff; color:#000; }
}