/* =====================================================================
   Covo House — one page site
   Brand: charcoal #1c1c1c / burnt orange #da722f, carried from the
   original coming-soon page. Accents pulled from the venue renders:
   emerald tile, brass, tan leather, warm cream.
   ===================================================================== */

:root{
  --dark:#1c1c1c;
  --ink:#141414;
  --ink-deep:#0e0e0e;
  --orange:#da722f;
  --orange-soft:rgba(218,114,47,.7);
  --orange-faint:rgba(218,114,47,.28);
  --cream:#f1e8de;
  --cream-dim:rgba(241,232,222,.66);
  --cream-faint:rgba(241,232,222,.38);
  --brass:#b08a52;
  --green:#1d5c46;
  --line:rgba(241,232,222,.14);

  --ease:cubic-bezier(.19,1,.22,1);
  --gutter:clamp(1.5rem,5vw,5.5rem);
  --section-y:clamp(5rem,13vh,9.5rem);
  --maxw:1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--dark);
  color:var(--cream);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }

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

:focus-visible{ outline:1px solid var(--orange); outline-offset:4px; }

/* ---------- shared type ---------- */

.eyebrow{
  display:inline-flex; align-items:center; gap:.9em;
  font-size:.66rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--orange);
}
.eyebrow::before{
  content:""; width:clamp(20px,3vw,38px); height:1px;
  background:var(--orange-faint);
}

h1,h2,h3{ font-weight:200; line-height:1.12; letter-spacing:-.005em; }
h1{ font-size:clamp(2.3rem,6.2vw,4.6rem); }
h2{ font-size:clamp(1.85rem,4.2vw,3.1rem); }
h3{
  font-size:.82rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  line-height:1.5;
}

/* a comfortable measure, applied only to running prose so it never
   clips the small tracked labels */
.lede,.body-text p,.pillar p,.visit__note{ max-width:62ch; }
.lede{ font-size:clamp(1rem,1.6vw,1.2rem); color:var(--cream-dim); }
.body-text > p + p{ margin-top:1.35em; }
.body-text{ color:var(--cream-dim); }

.rule{
  height:1px; width:100%;
  background:linear-gradient(90deg,rgba(218,114,47,.55),rgba(218,114,47,.1) 55%,transparent);
}

.tag{
  display:inline-flex; align-items:center; gap:.7em;
  border:1px solid var(--orange-faint);
  border-radius:999px;
  padding:.55em 1.3em;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--orange);
  white-space:nowrap;
}
.tag::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(218,114,47,.16);
}

.btn{
  display:inline-block;
  border:1px solid var(--orange-faint);
  color:var(--orange);
  font-size:.7rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  padding:1.05em 2.4em;
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,
             box-shadow .45s ease,transform .45s var(--ease);
}
.btn:hover{
  background:var(--orange); color:var(--dark); border-color:var(--orange);
  box-shadow:0 12px 34px rgba(218,114,47,.3);
  transform:translateY(-2px);
}

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

/* ---------- socials ---------- */

.socials{ display:flex; gap:.9rem; }
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--orange-faint);
  color:var(--orange);
  transition:transform .4s var(--ease),background-color .4s ease,
             border-color .4s ease,color .4s ease,box-shadow .4s ease;
}
.socials a:hover{
  transform:translateY(-4px) scale(1.06);
  background:var(--orange); border-color:var(--orange); color:var(--dark);
  box-shadow:0 10px 26px rgba(218,114,47,.38);
}
.socials svg{ width:18px; height:18px; fill:currentColor; }

/* =====================================================================
   1. SPLASH
   ===================================================================== */

.splash{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1.4rem,4vh,2.6rem);
  text-align:center;
  background:var(--dark);
  padding:clamp(1.5rem,5vh,3rem) 1.5rem;
}
.splash::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
  opacity:0; animation:fadeIn 2.4s ease forwards .3s;
}

/* the light left at the origin point — sits above the site, below the splash,
   so it carries on glowing after the splash itself has gone. Animated with
   transform and opacity only, so it never touches layout. */
.portal{
  position:fixed; z-index:90;
  left:var(--ex,50%); top:var(--ey,50%);
  width:680px; height:680px; margin:-340px 0 0 -340px;
  border-radius:50%;
  /* A long, many-stopped falloff rather than a hard-edged disc. The extra
     stops cost nothing — the gradient is painted once and the layer is only
     ever transformed after that — and the blur takes the last hard edge off
     so it reads as light rather than as a shape. */
  background:radial-gradient(circle,
              rgba(255,236,214,.30) 0%,
              rgba(253,205,156,.24) 14%,
              rgba(236,157,86,.17)  28%,
              rgba(218,114,47,.11)  42%,
              rgba(218,114,47,.06)  56%,
              rgba(218,114,47,.025) 70%,
              rgba(218,114,47,.008) 84%,
              rgba(218,114,47,0)    100%);
  filter:blur(26px);
  opacity:0; transform:perspective(900px) translate3d(0,0,-300px);
  pointer-events:none;
  will-change:transform,opacity;
}

/* =====================================================================
   2b. ENTERING — the site opens out of the button
   Everything here animates transform, opacity or a single clip-path circle.
   Nothing animates width, height or colour: those force layout or a full
   repaint every frame, which is what made the earlier version stutter.

   Sequence, from the moment Enter is pressed:
     0.00s  the splash travels past you and fades — you move through it
     0.12s  a soft, feathered glow lifts at the centre of the button
     0.30s  the site opens from that exact point and widens outwards
     2.85s  hero copy arrives from behind the room
     3.60s  fully open, the room still drifting forward for another 1.6s
   ===================================================================== */

/* The doorway passing around you. This is a real Z translation under
   perspective, not a flat scale — the frame accelerates outwards the way
   something does when you walk through it, which is the single strongest
   cue that you are the one moving forward. */
.splash.is-leaving{
  pointer-events:none;
  animation:splashOut 1.35s cubic-bezier(.5,0,.62,1) forwards;
  transform-origin:var(--ex,50%) var(--ey,50%);
}
@keyframes splashOut{
  from{ opacity:1; transform:perspective(1100px) translate3d(0,0,0); }
  to{   opacity:0; transform:perspective(1100px) translate3d(0,0,285px); }
}

/* The light at the threshold, coming past you as you cross it. Feathered in
   time as well as at the edges: it lifts gently, holds, then gives out over
   more than half its length rather than snapping off. */
.portal.is-open{ animation:originGlow 2.9s cubic-bezier(.3,.42,.26,1) forwards .12s; }
@keyframes originGlow{
  0%{   opacity:0;   transform:perspective(900px) translate3d(0,0,-300px); }
  20%{  opacity:.82; }
  46%{  opacity:.62; }
  72%{  opacity:.26; }
  100%{ opacity:0;   transform:perspective(900px) translate3d(0,0,600px); }
}

.splash__logo{
  width:min(480px,78vw);
  opacity:0; transform:translateY(28px) scale(1.04); filter:blur(6px);
  animation:logoIn 1.8s var(--ease) forwards .35s;
}
.splash__rule{
  width:0; height:1px; opacity:0;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  animation:ruleIn 1.6s var(--ease) forwards 1.05s;
}
.splash__sub{
  font-size:clamp(.66rem,2.2vw,.76rem);
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  color:var(--orange-soft);
  opacity:0; transform:translateY(14px);
  animation:fadeUp 1.4s var(--ease) forwards 1.3s;
}
.splash__enter{
  opacity:0; transform:translateY(16px);
  animation:fadeUp 1.4s var(--ease) forwards 1.6s;
}
.splash .socials{
  opacity:0; transform:translateY(14px);
  animation:fadeUp 1.3s var(--ease) forwards 1.95s;
}

@keyframes logoIn{ to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes ruleIn{ to{ width:min(300px,58vw); opacity:.85; } }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ to{ opacity:1; } }

/* =====================================================================
   2. SITE SHELL
   ===================================================================== */

.site{
  opacity:0; visibility:hidden;
  transition:opacity 1.2s ease .25s,visibility 1.2s ease .25s;
}
.site.is-open{ opacity:1; visibility:visible; }

/* The iris. The page opens as a circle centred on the Enter button — JS
   measures the button and writes --ex / --ey / --rmax before this runs, so
   the site genuinely emerges from the point that was pressed.

   Only the circle's radius and a slight scale are animated. Held on a class
   that JS strips the moment it finishes: a lingering clip-path or transform
   would re-base the fixed top bar against this element, not the viewport. */
.site.is-zooming{
  animation:iris 3.3s cubic-bezier(.45,0,.12,1) forwards .3s;
  will-change:clip-path;
}
/* Deliberately the only animated property on this element. Running a
   transform alongside the clip-path makes the compositor redo both on the
   same layer every frame, which is the sort of thing that starts to stutter
   on a full-page element. The hero image keeps its own slow settle. */
@keyframes iris{
  from{ clip-path:circle(0px at var(--ex) var(--ey)); }
  to{   clip-path:circle(var(--rmax) at var(--ex) var(--ey)); }
}

/* the surround stays black while the aperture is open, so the site reads as
   a lit room seen through a gap and not as a page fading up */
body.is-entering{ background:#050505; }

/* hero copy arriving once you are inside */
.site.is-open .hero__inner > *{
  animation:heroRise 1.35s var(--ease) backwards;
}
.site.is-open .hero__inner > :nth-child(1){ animation-delay:2.85s; }
.site.is-open .hero__inner > :nth-child(2){ animation-delay:3.00s; }
.site.is-open .hero__inner > :nth-child(3){ animation-delay:3.15s; }
.site.is-open .hero__inner > :nth-child(4){ animation-delay:3.30s; }
/* The copy arrives from further back than the room behind it. Two layers
   travelling different distances in Z is what actually reads as depth —
   more so than any single element moving on its own. */
@keyframes heroRise{
  from{ opacity:0; transform:perspective(900px) translate3d(0,24px,-150px); }
  to{   opacity:1; transform:perspective(900px) translate3d(0,0,0); }
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:clamp(.85rem,2vh,1.15rem) var(--gutter);
  background:rgba(20,20,20,0);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(0px);
  transform:translateY(-100%);
  transition:transform .8s var(--ease),background-color .6s ease,
             border-color .6s ease,backdrop-filter .6s ease;
}
.topbar.is-visible{ transform:translateY(0); }
.topbar.is-solid{
  background:rgba(20,20,20,.82);
  border-bottom-color:var(--line);
  backdrop-filter:blur(14px) saturate(120%);
}
.topbar__logo{ position:relative; z-index:2; margin-right:auto; }
.topbar__logo img{ width:clamp(104px,13vw,148px); }
.topbar__actions{ position:relative; z-index:2; display:flex; align-items:center; gap:.75rem; }
.topbar nav{ display:flex; align-items:center; gap:clamp(1.1rem,3vw,2.4rem); }
.topbar nav a{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream-faint);
  padding-block:.4em;
  position:relative;
  transition:color .4s ease;
}
.topbar nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--orange);
  transition:right .5s var(--ease);
}
.topbar nav a:hover{ color:var(--orange); }
.topbar nav a:hover::after{ right:0; }

/* Gift cards — the one thing in the header you can buy. Solid rather than
   outlined: against a near-black bar the filled orange is the only treatment
   that genuinely carries, and dark text on it clears AA at 5:1. */
.topbar__gift{
  position:relative;
  display:inline-block;
  text-transform:uppercase;
  background:var(--orange);
  border:1px solid var(--orange);
  color:var(--dark) !important;
  padding:.95em 1.85em;
  margin-left:.9rem;
  font-size:.64rem; font-weight:400; letter-spacing:.2em;
  white-space:nowrap;
  box-shadow:0 6px 20px rgba(218,114,47,.26);
  transition:background-color .35s ease,box-shadow .35s ease,
             transform .35s var(--ease);
}
.topbar__gift::after{ display:none; }   /* no underline sweep, it is a solid */
.topbar__gift:hover{
  background:#e8813c;
  box-shadow:0 12px 30px rgba(218,114,47,.45);
  transform:translateY(-1px);
}
.topbar__gift:active{ transform:translateY(0); }
.topbar__gift[hidden]{ display:none; }

/* Hamburger — desktop has room for the links themselves, so this only exists
   below 680px. Outlined rather than solid so it sits beside the gift card
   button without competing with it. */
.burger{
  display:none;
  position:relative;
  width:42px; height:42px;
  flex:0 0 auto;
  align-items:center; justify-content:center;
  border:1px solid var(--orange-faint);
  color:var(--orange);
  transition:border-color .4s ease,background-color .4s ease;
}
.burger:hover{ border-color:var(--orange); }
.burger span{
  position:absolute; left:50%; width:18px; height:1px;
  background:currentColor;
  transform:translateX(-50%);
  transition:transform .45s var(--ease),opacity .3s ease;
}
.burger span:nth-child(1){ transform:translate(-50%,-5px); }
.burger span:nth-child(2){ transform:translate(-50%,0); }
.burger span:nth-child(3){ transform:translate(-50%,5px); }
/* into a cross, on the same axis, so it reads as the same control */
body.is-navopen .burger span:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
body.is-navopen .burger span:nth-child(2){ opacity:0; }
body.is-navopen .burger span:nth-child(3){ transform:translate(-50%,0) rotate(-45deg); }

/* the page behind the panel must not scroll; kept separate from .is-locked so
   closing the menu can never unlock a splash or lightbox that is still open */
body.is-navopen{ overflow:hidden; height:100vh; }

/* =====================================================================
   3. HERO
   ===================================================================== */

.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
/* the media box overshoots the hero top and bottom so the parallax
   shift never exposes an edge */
.hero__media{ position:absolute; top:-6%; left:0; right:0; height:112%; z-index:-2; overflow:hidden; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 55%;
  transform:perspective(1600px) translate3d(0,0,130px);
  transition:transform 5.2s var(--ease);
  will-change:transform;
}
.site.is-open .hero__media img{ transform:perspective(1600px) translate3d(0,0,0); }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(28,28,28,.97) 0%,
      rgba(28,28,28,.9) 14%,
      rgba(28,28,28,.5) 38%,
      rgba(28,28,28,.16) 62%,
      rgba(28,28,28,.5) 100%),
    linear-gradient(to right,rgba(28,28,28,.82) 0%,rgba(28,28,28,.5) 30%,rgba(28,28,28,.16) 48%,transparent 64%),
    radial-gradient(130% 70% at 50% 108%,rgba(0,0,0,.55),transparent 68%);
}

.hero__inner{
  position:relative;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(7rem,18vh,10rem) var(--gutter) clamp(3.5rem,9vh,5.5rem);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(1.1rem,2.6vh,1.9rem);
}
.hero h1{ max-width:19ch; }
.hero .lede{ max-width:48ch; }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
  margin-top:.6rem;
}

.scroll-cue{
  position:absolute; bottom:clamp(1.2rem,3vh,2rem); right:var(--gutter);
  display:flex; align-items:center; gap:.9rem;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-faint);
}
.scroll-cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(to bottom,var(--orange-faint),transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; top:0; left:0; width:1px; height:14px;
  background:var(--orange);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-14px); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(44px); opacity:0; }
}

/* =====================================================================
   4. SECTIONS
   ===================================================================== */

section{ position:relative; }
.section{ padding-block:var(--section-y); }
.section--ink{ background:var(--ink); }
.section--deep{ background:var(--ink-deep); }
.section-head{ display:flex; flex-direction:column; gap:1.1rem; max-width:56ch; }

/* --- offering: text + image --- */
.offering__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.offering__copy{ display:flex; flex-direction:column; gap:1.6rem; }
.offering__figure{ position:relative; }
.offering__figure .frame{ display:block; }
.offering__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
}
.offering__figure figcaption{
  margin-top:1rem;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-faint);
}
.frame{ position:relative; overflow:hidden; }
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(241,232,222,.1);
}

/* --- offers ---
   The two standing weekly deals. Both cards are lifted from the lightbox
   posters in the window: one solid burnt orange with near-black type, one
   near-black with cream and orange. Keeping the pair in opposite treatments is
   what makes the band read as an offer rather than another content section,
   and the inset hairline frame is the same motif the menu covers use. */
.offers__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.offer{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(158px,17vw,224px);
  align-items:stretch;
  min-height:clamp(236px,24vw,310px);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.offer:not(.offer--art){ grid-template-columns:minmax(0,1fr); }
.offer__body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.85rem; min-width:0;
  padding:clamp(1.9rem,3.6vw,2.7rem) clamp(1.4rem,2.6vw,2rem)
          clamp(1.9rem,3.6vw,2.7rem) clamp(1.6rem,3.2vw,2.6rem);
}
/* The poster sits as an object on the card rather than filling a panel:
   inset from the edges and `contain`ed, so it is always shown whole whatever
   the card height works out to, and a landscape picture dropped in later is
   not cropped either. A cover-filled slot only stays honest while the card
   height happens to match the artwork's ratio, which it does not once the
   copy runs to another line. */
.offer__media{
  position:relative; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,1.9vw,1.5rem);
  padding-left:0;
}
.offer__media img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
/* The drawn border from the posters. Only on a card with no artwork — where
   a poster is present it brings its own printed border, and this line was
   running straight across it. */
.offer:not(.offer--art)::before{
  content:""; position:absolute; inset:14px; z-index:3; pointer-events:none;
  border:1px solid currentColor; opacity:.3;
  transition:inset .6s var(--ease),opacity .6s ease;
}
.offer:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(0,0,0,.42); }
.offer:not(.offer--art):hover::before{ inset:10px; opacity:.5; }

.offer__kicker{
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  opacity:.78;
}
.offer__title{
  font-size:clamp(1.55rem,2.9vw,2.25rem);
  font-weight:200; letter-spacing:.02em; text-transform:uppercase;
  line-height:1.08;
  max-width:15ch;
}
.offer__rule{
  display:block; width:38px; height:1px;
  background:currentColor; opacity:.42;
  transition:width .55s var(--ease),opacity .55s ease;
}
.offer:hover .offer__rule{ width:64px; opacity:.8; }
.offer__detail{
  font-size:.95rem; line-height:1.6; opacity:.72; max-width:28ch;
}
/* the time band — the one element that carries a solid, exactly as on the
   printed poster, so the hours are the last thing the eye lands on */
.offer__time{
  margin-top:auto;
  display:inline-flex; align-items:center;
  padding:.6em 1.15em;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
}

/* solid orange, near-black type — the Free Tapas poster */
.offer--ember{
  background:linear-gradient(158deg,#e07c34 0%,var(--orange) 52%,#c9662a 100%);
  color:#171717;
}
.offer--ember:not(.offer--art)::before{ opacity:.42; }
.offer--ember:not(.offer--art):hover::before{ opacity:.7; }
.offer--ember .offer__time{ background:#171717; color:var(--cream); }

/* near-black, cream type with an orange lead — the Cheese Board poster */
.offer--dark{
  background:linear-gradient(158deg,#212121 0%,#181818 58%,#121212 100%);
  color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--line);
}
.offer--dark .offer__kicker{ color:var(--orange); opacity:1; }
.offer--dark:not(.offer--art)::before{ border-color:var(--orange); opacity:.22; }
.offer--dark:not(.offer--art):hover::before{ opacity:.46; }
.offer--dark .offer__rule{ background:var(--orange); }
.offer--dark .offer__time{ background:var(--orange); color:#171717; }

/* --- pillars --- */
.pillars__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:clamp(2.5rem,6vh,4rem);
  background:var(--line);
  border-block:1px solid var(--line);
}
.pillar{
  background:var(--ink);
  padding:clamp(1.9rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:background-color .6s ease;
}
.pillar:hover{ background:#181818; }
.pillar__no{
  font-size:.64rem; letter-spacing:.24em; color:var(--orange-soft);
}
.pillar h3{ color:var(--cream); }
.pillar p{ font-size:.95rem; color:var(--cream-dim); }

/* --- gallery ---
   Three columns of 3:2 tiles. Feature tiles take two columns and two rows,
   so they end up the same shape as the others and the grid never gaps. */
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:clamp(.6rem,1.2vw,1rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.tile{
  position:relative; overflow:hidden;
  aspect-ratio:3/2;
  background:var(--ink-deep);
  cursor:zoom-in;
}
.tile--wide{
  grid-column:span 2; grid-row:span 2;
  aspect-ratio:auto;   /* height comes from the two rows it spans */
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.01);
  transition:transform 1.3s var(--ease),opacity .8s ease,filter 1.1s ease;
  filter:saturate(.92);
}
.tile:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(241,232,222,.08);
  transition:box-shadow .6s ease;
}
.tile:hover::after{ box-shadow:inset 0 0 0 1px var(--orange-faint); }
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.3rem 1.1rem;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(to top,rgba(14,14,14,.88),transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease,transform .5s var(--ease);
}
.tile:hover figcaption{ opacity:1; transform:translateY(0); }

/* --- menus --- */
.menus__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(.7rem,1.4vw,1.1rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}

/* Menu covers, not photo tiles. Putting a render behind these repeated the
   images the gallery shows directly above and needed so much darkening to
   keep the type legible that the pictures turned to mud. A plain, framed
   card borrows the site's own materials instead: charcoal, a hairline, a
   thin orange rule, and the wide-tracked caps used everywhere else. */
.menu-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem;
  min-height:clamp(230px,25vw,290px);
  padding:clamp(2rem,4vw,2.6rem) clamp(1.4rem,3vw,2rem);
  text-align:center;
  background:linear-gradient(165deg,#212121 0%,#191919 58%,#141414 100%);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .6s ease,transform .6s var(--ease),background-color .6s ease;
}
/* the inset frame is what makes it read as a cover rather than a panel */
.menu-card::before{
  content:""; position:absolute; inset:13px; pointer-events:none;
  border:1px solid rgba(218,114,47,.16);
  transition:border-color .6s ease,inset .6s var(--ease);
}
.menu-card__label{
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--orange-soft);
}
.menu-card h3{
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  font-weight:200; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream);
  line-height:1.3;
}
.menu-card__rule{
  width:34px; height:1px; background:var(--orange-faint);
  transition:width .55s var(--ease),background-color .55s ease;
}
.menu-card__note{
  font-size:.85rem; color:var(--cream-dim); max-width:26ch;
}
.menu-card__cue{
  margin-top:.5rem;
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--orange);
}
.menu-card__cue::after{
  content:"↗"; font-size:.85em; line-height:1;
  transition:transform .45s var(--ease);
}

.menu-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--orange-faint),0 18px 40px rgba(0,0,0,.45);
}
.menu-card:hover::before{ inset:10px; border-color:rgba(218,114,47,.42); }
.menu-card:hover .menu-card__rule{ width:56px; background:var(--orange); }
.menu-card:hover .menu-card__cue::after{ transform:translate(2px,-2px); }

/* One or two menus would otherwise sit stranded against the left edge. They
   are centred instead, with the fluted-screen motif from the room carried
   into the space either side so the row still reads as a composed band
   rather than a gap. Three or more fill the width on their own. */
.menus__grid[data-count="1"]{ grid-template-columns:1fr minmax(0,360px) 1fr; }
.menus__grid[data-count="2"]{ grid-template-columns:1fr repeat(2,minmax(0,320px)) 1fr; }

.menus__grid[data-count="1"]::before,
.menus__grid[data-count="1"]::after,
.menus__grid[data-count="2"]::before,
.menus__grid[data-count="2"]::after{
  content:"";
  align-self:stretch;
  min-height:100%;
  /* the slatted timber screens that run through the venue */
  background:repeating-linear-gradient(90deg,
              transparent 0 7px,
              rgba(218,114,47,.14) 7px 8px);
  pointer-events:none;
}
/* each side fades out towards the edge of the page */
.menus__grid[data-count="1"]::before,
.menus__grid[data-count="2"]::before{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 92%);
          mask-image:linear-gradient(90deg,transparent,#000 92%);
}
.menus__grid[data-count="1"]::after,
.menus__grid[data-count="2"]::after{
  -webkit-mask-image:linear-gradient(270deg,transparent,#000 92%);
          mask-image:linear-gradient(270deg,transparent,#000 92%);
}
.menus__grid .menu-card[hidden]{ display:none; }

@media (max-width:680px){
  .menus__grid,
  .menus__grid[data-count="1"],
  .menus__grid[data-count="2"]{ grid-template-columns:1fr; }
  /* stacked in order, with no decorative columns to leave blank rows */
  .menus__grid[data-count="1"]::before,
  .menus__grid[data-count="1"]::after,
  .menus__grid[data-count="2"]::before,
  .menus__grid[data-count="2"]::after{ content:none; }
  .menu-card{ min-height:200px; }
}

/* --- faq --- */
.faq{
  margin-top:clamp(2.5rem,6vh,4rem);
  border-top:1px solid var(--line);
}
.faq__item{ border-bottom:1px solid var(--line); }

.faq__q{
  width:100%;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:2rem;
  padding:clamp(1.25rem,2.6vh,1.7rem) 0;
  text-align:left;
  font-size:clamp(.95rem,1.5vw,1.08rem);
  font-weight:300; line-height:1.45;
  color:var(--cream);
  transition:color .4s ease;
}
.faq__q:hover{ color:var(--orange); }

/* a hairline plus that loses its upright stroke when open, so it reads as a
   minus — same restraint as the rules used elsewhere on the page */
.faq__mark{
  position:relative; flex:none;
  width:13px; height:13px; margin-top:.42em;
}
.faq__mark::before,
.faq__mark::after{
  content:""; position:absolute; left:0; top:50%;
  width:13px; height:1px; background:var(--orange);
  transition:transform .45s var(--ease),opacity .35s ease;
}
.faq__mark::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__mark::after{ transform:rotate(0deg); opacity:0; }

/* grid-template-rows animates cleanly and never touches layout height
   directly, which keeps the open/close smooth on a long list */
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  max-width:70ch;
  padding:0 3rem clamp(1.3rem,2.6vh,1.7rem) 0;
  color:var(--cream-dim);
  font-size:.95rem;
}

@media (max-width:680px){
  .faq__q{ gap:1.2rem; font-size:.95rem; }
  .faq__a p{ padding-right:1.5rem; }
}

/* --- visit --- */
.visit__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.info-block + .info-block{ margin-top:clamp(2rem,4vh,2.8rem); }
.info-block__label{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--orange-soft);
  padding-bottom:.9rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.info-block address{ font-style:normal; color:var(--cream-dim); line-height:1.95; }
.hours{ display:flex; flex-direction:column; gap:.55rem; }
.hours__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  font-size:.92rem; color:var(--cream-dim);
}
.hours__row span:first-child{
  letter-spacing:.1em; text-transform:uppercase; font-size:.7rem;
  color:var(--cream-faint);
}
.hours__row.is-closed span:last-child{ color:var(--cream-faint); }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.contact-list a{
  color:var(--cream-dim);
  border-bottom:1px solid transparent;
  transition:color .4s ease,border-color .4s ease;
}
.contact-list a:hover{ color:var(--orange); border-bottom-color:var(--orange-faint); }
.visit__aside .socials{ margin-top:1.4rem; }
.visit__note{
  margin-top:clamp(2rem,4vh,2.8rem);
  padding:clamp(1.3rem,3vw,1.9rem);
  border:1px solid var(--orange-faint);
  color:var(--cream-dim);
  font-size:.92rem;
}
.visit__note strong{
  display:block; margin-bottom:.5rem;
  color:var(--orange); font-weight:400;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
}

/* --- footer --- */
.footer{
  border-top:1px solid var(--line);
  padding-block:clamp(2.2rem,5vh,3.2rem);
  background:var(--ink-deep);
}
.footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem;
}
.footer img{ width:clamp(120px,15vw,160px); opacity:.9; }
.footer__note{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-faint);
}

/* =====================================================================
   5. LIGHTBOX
   ===================================================================== */

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3.5rem);
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .55s ease,visibility .55s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:82vh; object-fit:contain;
  transform:scale(.97); opacity:0;
  transition:transform .7s var(--ease),opacity .5s ease;
}
.lightbox.is-open img{ transform:scale(1); opacity:1; }
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:clamp(1rem,4vh,2.2rem);
  text-align:center;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-faint);
  padding-inline:1.5rem;
}
.lightbox__btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line);
  color:var(--cream-dim);
  transition:border-color .4s ease,color .4s ease,background-color .4s ease;
}
.lightbox__btn:hover{ border-color:var(--orange); color:var(--orange); }
.lightbox__btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; }
.lightbox__close{ top:clamp(1rem,3vh,2rem); right:clamp(1rem,3vw,2rem); }
.lightbox__prev{ left:clamp(.5rem,2vw,2rem); top:50%; margin-top:-26px; }
.lightbox__next{ right:clamp(.5rem,2vw,2rem); top:50%; margin-top:-26px; }

/* =====================================================================
   6b. MAILING LIST POPUP
   Deliberately echoes the coming-soon page it grew out of: centred, tracked
   caps, underline-only fields.
   ===================================================================== */

.signup{
  position:fixed; inset:0; z-index:180;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(7px);
  opacity:0; visibility:hidden;
  transition:opacity .6s ease,visibility .6s ease;
}
.signup.is-open{ opacity:1; visibility:visible; }
.signup[hidden]{ display:none; }

.signup__panel{
  position:relative;
  width:100%; max-width:460px;
  padding:clamp(2.2rem,5vw,3.2rem) clamp(1.6rem,4vw,2.8rem);
  text-align:center;
  background:linear-gradient(165deg,#212121 0%,#181818 60%,#131313 100%);
  box-shadow:inset 0 0 0 1px var(--line),0 30px 70px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.985);
  transition:transform .7s var(--ease);
}
.signup.is-open .signup__panel{ transform:none; }

.signup__panel .eyebrow{ justify-content:center; }
.signup__panel h2{
  margin:.9rem 0 .8rem;
  font-size:clamp(1.5rem,3.2vw,2rem);
}
.signup__body{
  color:var(--cream-dim); font-size:.92rem;
  max-width:34ch; margin-inline:auto;
}

.signup__form{
  display:flex; flex-direction:column; gap:1.1rem;
  margin-top:1.8rem;
}
.signup__form input{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--orange-faint);
  color:var(--cream);
  font:inherit; font-size:.92rem;
  letter-spacing:.12em; text-align:center;
  padding:.75rem .5rem;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.signup__form input::placeholder{
  color:rgba(218,114,47,.5);
  text-transform:uppercase; letter-spacing:.22em; font-size:.68rem;
}
.signup__form input:focus{
  outline:0; border-bottom-color:var(--orange);
  box-shadow:0 6px 18px -14px rgba(218,114,47,.9);
}
.signup__form .btn{ margin-top:.3rem; align-self:center; }
.signup__form .btn[disabled]{ opacity:.5; pointer-events:none; }

.signup__msg{
  min-height:1.2em; margin-top:.2rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-soft);
  opacity:0; transition:opacity .4s ease;
}
.signup__msg.show{ opacity:1; }
.signup__msg.is-error{ color:#e0864f; }

.signup__close{
  position:absolute; top:.9rem; right:.9rem;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:var(--cream-faint);
  transition:color .4s ease,background-color .4s ease;
}
.signup__close:hover{ color:var(--orange); background:rgba(218,114,47,.08); }
.signup__close svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; }

@media (prefers-reduced-motion:reduce){
  .signup__panel{ transform:none; }
}

/* =====================================================================
   6. SCROLL REVEALS
   ===================================================================== */

.reveal{
  opacity:0; transform:translateY(30px); filter:blur(5px);
  transition:opacity 1.15s var(--ease),transform 1.15s var(--ease),filter 1.15s ease;
}
.reveal.is-in{ opacity:1; transform:none; filter:blur(0); }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal[data-delay="4"]{ transition-delay:.48s; }

.rule-grow{ width:0; transition:width 1.5s var(--ease); }
.rule-grow.is-in{ width:100%; }

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */

@media (max-width:1000px){
  .offering__grid{ grid-template-columns:1fr; }
  .offering__figure{ max-width:520px; }
  .offering__figure img{ aspect-ratio:3/2; }
  .pillars__grid{ grid-template-columns:1fr; }
  .visit__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile--wide{ grid-column:span 2; grid-row:span 1; aspect-ratio:3/2; }
  /* The copy needs room beside the poster, so one card per row from here. The
     card is much wider on its own row, so the poster and the card height both
     step up together — same 0.674 proportion, so the artwork still fills its
     slot instead of floating in the middle of it. */
  .offers__grid{ grid-template-columns:1fr; }
  .offer{
    grid-template-columns:minmax(0,1fr) clamp(162px,22.9vw,229px);
    min-height:clamp(240px,34vw,340px);
  }
}

/* The bar runs out of room for six links, the logo and the gift card button
   at around 820px — earlier than the phone breakpoint below, so the hamburger
   takes over here rather than at 680. */
@media (max-width:880px){
  /* The links will not fit on one line beside the logo at this width, so the
     same <nav> becomes a full panel under the bar. Reusing the element rather
     than duplicating the links keeps Offers/Menus/FAQ — which switch
     themselves on and off — correct in both places for free.
     It is positioned absolutely, not fixed: .topbar carries a transform, and
     a transformed ancestor becomes the containing block for fixed children,
     which would size the panel to the bar instead of the viewport.
     --bar-h is measured in site.js and kept current on resize. */
  .burger{ display:inline-flex; }
  .topbar nav{
    position:absolute; top:100%; left:0; right:0;
    z-index:1;
    height:calc(100vh - var(--bar-h,64px));
    height:calc(100dvh - var(--bar-h,64px));
    overflow-y:auto;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    padding:clamp(1.6rem,5vh,2.6rem) var(--gutter) clamp(2rem,6vh,3rem);
    background:var(--ink-deep);
    border-top:1px solid var(--line);
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .45s ease,transform .55s var(--ease),
               visibility 0s linear .55s;
  }
  body.is-navopen .topbar nav{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .45s ease,transform .55s var(--ease),visibility 0s;
  }

  /* the fluted-screen motif from the room, same as the menu flanks */
  .topbar nav::after{
    content:""; position:absolute;
    left:var(--gutter); right:var(--gutter); bottom:clamp(2rem,6vh,3rem);
    height:74px; pointer-events:none;
    background:repeating-linear-gradient(90deg,
                transparent 0 7px,rgba(218,114,47,.14) 7px 8px);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000);
            mask-image:linear-gradient(to bottom,transparent,#000);
  }

  .topbar nav a{
    display:block;
    font-size:1rem; letter-spacing:.2em;
    color:var(--cream);
    padding-block:1.15rem;
    border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(12px);
    transition:opacity .45s ease,transform .55s var(--ease),color .4s ease;
  }
  /* must be stated: the display:block above would otherwise beat [hidden] and
     put Offers/Menus/FAQ back in the panel while their sections are off */
  .topbar nav a[hidden]{ display:none; }
  .topbar nav a::after{ display:none; }
  body.is-navopen .topbar nav a{ opacity:1; transform:none; }
  body.is-navopen .topbar nav a:nth-child(1){ transition-delay:.08s; }
  body.is-navopen .topbar nav a:nth-child(2){ transition-delay:.14s; }
  body.is-navopen .topbar nav a:nth-child(3){ transition-delay:.20s; }
  body.is-navopen .topbar nav a:nth-child(4){ transition-delay:.26s; }
  body.is-navopen .topbar nav a:nth-child(5){ transition-delay:.32s; }
  body.is-navopen .topbar nav a:nth-child(6){ transition-delay:.38s; }
}

@media (max-width:680px){
  body{ line-height:1.65; }
  /* The links are already in the hamburger panel by this width; the gift card
     button is the only thing sharing the bar with the logo, so it just needs
     to be a touch smaller on a phone. */
  .topbar__gift{
    margin-left:0;
    padding:.9em 1.35em;
    font-size:.6rem; letter-spacing:.16em;
  }
  .hero{ align-items:flex-end; }
  .hero h1{ max-width:100%; }
  .scroll-cue{ display:none; }
  .gallery__grid{ grid-template-columns:1fr; gap:.5rem; }
  .tile,.tile--wide{ grid-column:span 1; grid-row:span 1; aspect-ratio:3/2; }
  .tile figcaption{ opacity:1; transform:none; font-size:.58rem; padding:1rem .9rem .8rem; }
  .lightbox__prev,.lightbox__next{ top:auto; bottom:clamp(3.4rem,9vh,5rem); margin-top:0; }
  .lightbox__prev{ left:clamp(1rem,6vw,2rem); }
  .lightbox__next{ right:clamp(1rem,6vw,2rem); }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:520px){
  .splash__sub{ letter-spacing:.24em; text-indent:.24em; }
  /* Everything tightens so the copy still has a column to sit in beside the
     poster: smaller type, less padding, tighter tracking on the kicker so it
     stays on one line. The slot is proportioned to what the card actually
     ends up being at this width, so the poster fills it rather than floating. */
  .offer{
    grid-template-columns:minmax(0,1fr) clamp(122px,36vw,152px);
    min-height:clamp(196px,53vw,224px);
  }
  .offer__body{ padding:1.5rem 1rem 1.5rem 1.35rem; gap:.62rem; }
  .offer__title{ font-size:1.2rem; line-height:1.14; max-width:none; }
  .offer__kicker{ font-size:.56rem; letter-spacing:.2em; }
  .offer__detail{ font-size:.86rem; line-height:1.5; }
  .offer__time{ font-size:.64rem; letter-spacing:.16em; padding:.5em .9em; }
  .offer__media{ padding:1rem .9rem; padding-left:0; }
}

@media (max-height:640px){
  .splash__logo{ width:min(340px,66vw); }
  .splash__rule{ display:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .splash__logo,.splash__rule,.splash__sub,.splash__enter,.splash .socials,
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .splash__rule{ width:min(300px,58vw); }
  .rule-grow{ width:100%; }
  .hero__media img{ transform:none; }

  .topbar nav,.topbar nav a{ transition-delay:0s !important; }

  /* no iris, no glow — the splash simply gives way */
  .site.is-zooming{ animation:none; transform:none; opacity:1; clip-path:none; }
  .portal,.portal.is-open{ display:none; }
  .splash.is-leaving{ animation:none; opacity:0; visibility:hidden; }
  body.is-entering{ background:var(--dark); }
  .site.is-open .hero__inner > *{ animation:none; opacity:1; transform:none; filter:none; }
}

/* ---------- print ---------- */
@media print{
  .splash,.topbar,.burger,.scroll-cue,.lightbox,.gallery__grid{ display:none !important; }
  .site{ opacity:1 !important; visibility:visible !important; }
  body{ background:#fff; color:#111; }
}