/* ==========================================================================
   Epican Tapas Lounge
   Direction: unhurried editorial luxury. Warm white, oak, walnut and deep brown,
   with the wax-seal black used sparingly. Slow, scroll-led motion.
   Type: Pinyon Script for the name, Bodoni Moda for headlines, Hanken Grotesk for reading.
   ========================================================================== */

:root {
  --paper: #faf6ee;
  --ivory: #f3ebdc;
  --linen: #e9ddc7;
  --oak: #c9a678;
  --oak-light: #e6cda6;
  --oak-deep: #8a6440;
  --walnut: #6e4b33;
  --umber: #7a5a40;
  --cocoa: #5a3a26;
  --espresso: #2e1d13;
  --ink: #3f2f25;
  --ink-soft: #725f4c;
  --gold: #b8935a;
  --leaf: #6f8f5f;
  --line: rgba(110, 75, 51, 0.2);
  --line-strong: rgba(110, 75, 51, 0.4);

  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Hanken Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1360px;
  --section-y: clamp(6rem, 12vw, 11rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
html.is-loading { overflow: hidden; background-color: #3d281b !important; }
html.is-loading body { background-color: #3d281b !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
em { font-style: italic; }
::selection { background: var(--oak-light); color: var(--ink); }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--walnut); color: var(--paper); padding: .7rem 1rem; text-decoration: none; transition: top 160ms var(--ease-out); }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--oak-deep); outline-offset: 3px; border-radius: 1px; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* soft paper grain: one static fixed layer */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .17 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.h2 em { font-style: italic; color: var(--oak-deep); }
.h2--light { color: var(--paper); }
.h2--lead { font-size: clamp(2.8rem, 6.8vw, 6rem); max-width: 14ch; }
.subhead { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .8rem 1.9rem;
  font-family: var(--sans); font-weight: 400; font-size: .86rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--walnut); border-radius: 1px;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 160ms var(--ease-out);
}
.btn--solid { background: var(--walnut); color: var(--paper); }
.btn--line { background: transparent; color: var(--walnut); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--cocoa); border-color: var(--cocoa); }
  .btn--line:hover { background: var(--walnut); color: var(--paper); }
}
.link-arrow { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; padding-block: .5rem; color: var(--walnut); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease-out); }
.link-arrow .ico { transition: transform 280ms var(--ease-out); }
.link-arrow:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { background-size: 100% 1px; }
  .link-arrow:hover .ico { transform: translateX(5px); }
}
.link-arrow--light { color: var(--paper); }
.link-plain { background: none; border: 0; padding: .4rem 0; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); font-size: .95rem; }
@media (hover: hover) { .link-plain:hover { color: var(--ink); } }

.round-btn {
  display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgba(250, 246, 238, .08); color: var(--paper); border: 1px solid rgba(250, 246, 238, .38);
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 160ms var(--ease-out), opacity 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.round-btn:active { transform: scale(0.93); }
.round-btn[disabled] { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .round-btn:not([disabled]):hover { background: var(--paper); color: var(--espresso); border-color: var(--paper); } }
.rv .round-btn { color: var(--walnut); background: rgba(255, 255, 255, .25); border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .rv .round-btn:not([disabled]):hover { background: var(--walnut); color: var(--paper); border-color: var(--walnut); } }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse 80% 42% at 50% 46%, #7b5339 0%, #5a3a26 52%, #3d281b 100%) #3d281b;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--ease-in-out), visibility 0s linear 1100ms;
}
.loader__seal-wrap { position: relative; width: clamp(8rem, 22vw, 12rem); aspect-ratio: 1; display: grid; place-items: center; }
.loader__seal-wrap::before, .loader__seal-wrap::after { content: ""; position: absolute; inset: -14%; border: 1px solid rgba(230, 205, 166, .5); border-radius: 50%; animation: ring 3.2s var(--ease-out) infinite; }
.loader__seal-wrap::after { animation-delay: 1.6s; }
@keyframes ring { 0% { transform: scale(.82); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.loader__seal { width: 100%; height: auto; border-radius: 50%; animation: seal-in 1000ms var(--ease-out) both; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(230, 205, 166, .22); }
.loader__bar { position: absolute; left: 50%; bottom: max(2.5rem, 10vh); width: min(24rem, 64vw); height: 2px; transform: translateX(-50%); background: rgba(250, 246, 238, .2); overflow: hidden; border-radius: 2px; }
.loader__bar i { position: absolute; inset: 0; background: var(--oak-light); transform-origin: left; transform: scaleX(0); }
.loader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
.loader.is-done .loader__seal-wrap { transform: translateY(-14px) scale(.96); opacity: 0; transition: transform 700ms var(--ease-in-out), opacity 500ms ease; }
.loader.is-done .loader__bar { opacity: 0; transition: opacity 300ms ease; }
@keyframes seal-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ---------- header + dropdown menu ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 56; height: 4.75rem;
  --bar-ink: var(--ink); --bar-accent: var(--walnut);
  --logo-lg: 6.25rem; --logo-top: 1.5rem; --logo-scale: .416; --logo-shift: -.3rem;
  color: var(--bar-ink); transition: color 700ms ease;
}
.site-header[data-theme="clear"] { --bar-ink: var(--paper); --bar-accent: var(--oak-light); }
/* no bar: just the words and buttons, in the colour that reads on the section underneath */
.site-header[data-theme="night"], .site-header[data-theme="espresso"], .site-header[data-theme="umber"] { --bar-ink: var(--paper); --bar-accent: var(--oak-light); }
.site-header__inner { position: relative; height: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.brand { position: relative; display: block; width: 13rem; height: 4.75rem; text-decoration: none; }
.brand img {
  position: absolute; left: 0; top: var(--logo-top); width: var(--logo-lg); height: var(--logo-lg); border-radius: 50%;
  transform-origin: 0 0; box-shadow: 0 22px 44px -22px rgba(46, 29, 19, .6);
  transition: transform 800ms var(--ease-out), box-shadow 800ms ease;
}
.brand__name {
  position: absolute; left: calc(var(--logo-lg) * var(--logo-scale) + .8rem); top: 50%;
  font-family: var(--script); font-size: 2.3rem; line-height: 1; color: var(--bar-accent); white-space: nowrap; padding-top: .12em;
  opacity: 0; transform: translate(-10px, -50%); filter: blur(4px);
  transition: opacity 300ms ease, transform 400ms var(--ease-out), filter 300ms ease, color 700ms ease;
}
.site-header.is-compact .brand img { transform: translateY(var(--logo-shift)) scale(var(--logo-scale)); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); }
.site-header.is-compact .brand__name { opacity: 1; transform: translate(0, -50%); filter: none; transition: opacity 600ms ease 220ms, transform 800ms var(--ease-out) 220ms, filter 600ms ease 220ms, color 700ms ease; }
@media (max-width: 760px) {
  .site-header { --logo-lg: 4.6rem; --logo-top: 1.1rem; --logo-scale: .55; --logo-shift: .05rem; }
  .brand { width: 9rem; }
  .brand__name { font-size: 1.7rem; }
  .menu-btn__label { font-size: 1.1rem; }
  .menu-btn__lines { width: 1.6rem; height: .7rem; }
}

.menu-btn { display: inline-flex; align-items: center; gap: 1rem; background: none; border: 0; padding: .6rem 0 .6rem .6rem; color: inherit; -webkit-tap-highlight-color: transparent; }
.menu-btn__label { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; letter-spacing: .01em; line-height: 1; }
.menu-btn__lines { position: relative; width: 2rem; height: .85rem; display: block; }
.menu-btn__lines i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 380ms var(--ease-out), top 380ms var(--ease-out), left 300ms var(--ease-out); }
.menu-btn__lines i:first-child { top: 0; }
.menu-btn__lines i:last-child { top: calc(100% - 1px); }
.menu-btn:active .menu-btn__label { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover .menu-btn__lines i:first-child { left: .6rem; }
  .menu-btn:hover .menu-btn__lines i:last-child { right: .6rem; }
}
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { top: 50%; left: .3rem; right: .3rem; transform: rotate(40deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { top: 50%; left: .3rem; right: .3rem; transform: rotate(-40deg); }

.drop-scrim { position: fixed; inset: 0; z-index: 54; background: rgba(46, 29, 19, .42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 320ms ease, visibility 0s linear 320ms; }
.drop-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 320ms ease; }
.drop {
  position: fixed; z-index: 55; top: 4.6rem; right: var(--gutter); width: min(27rem, calc(100vw - var(--gutter) * 2));
  background: var(--espresso); color: var(--paper); padding: 1.1rem 1.75rem 1.5rem; border-radius: 3px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(230, 205, 166, .14);
  transform-origin: 90% 0; opacity: 0; transform: translateY(-10px) scale(.96); visibility: hidden;
  transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.drop.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 280ms ease, transform 420ms var(--ease-out), visibility 0s; }
.drop__list li { border-bottom: 1px solid rgba(250, 246, 238, .12); opacity: 0; transform: translateY(8px); transition: opacity 150ms ease, transform 150ms ease; }
.drop.is-open .drop__list li { opacity: 1; transform: none; transition: opacity 500ms ease, transform 600ms var(--ease-out); }
.drop.is-open .drop__list li:nth-child(1) { transition-delay: 90ms; }
.drop.is-open .drop__list li:nth-child(2) { transition-delay: 140ms; }
.drop.is-open .drop__list li:nth-child(3) { transition-delay: 190ms; }
.drop.is-open .drop__list li:nth-child(4) { transition-delay: 240ms; }
.drop.is-open .drop__list li:nth-child(5) { transition-delay: 290ms; }
.drop__list a { display: grid; gap: .15rem; padding: 1rem 0; text-decoration: none; position: relative; }
.drop__name { font-family: var(--serif); font-size: 1.85rem; line-height: 1.15; transition: transform 420ms var(--ease-out), color 260ms ease; }
.drop__menu > a { padding-bottom: .35rem; }
.drop__sub { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; padding-bottom: 1rem; }
.drop__sub a { display: inline-block; padding: .35rem 0; font-size: .84rem; letter-spacing: .04em; color: rgba(250, 246, 238, .7); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 200ms ease, background-size 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .drop__sub a:hover { color: var(--oak-light); background-size: 100% 1px; } }
.drop__list a[aria-current="true"] .drop__name { color: var(--oak-light); }
.drop__note { font-size: .84rem; color: rgba(250, 246, 238, .6); letter-spacing: .02em; }
.drop__list a:active .drop__name { transform: translateX(4px) scale(.99); }
@media (hover: hover) and (pointer: fine) { .drop__list a:hover .drop__name { transform: translateX(10px); color: var(--oak-light); } }
.drop__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--oak-light); color: var(--espresso); text-decoration: none; font-weight: 400; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 1px; transition: background-color 220ms ease, transform 160ms var(--ease-out); }
.drop__cta:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .drop__cta:hover { background: var(--paper); } }

/* ---------- hero: one lamp in a dark room, the seal turning beneath it ----------
   One screen tall. The seal sways on its own; scrolling spins it, and the faster the
   scroll the faster it turns, before settling face-on again. Positions are in screen
   heights so the stage keeps its composition on any window. */
.hero {
  position: relative; background: #0b0705; color: var(--paper);
  --stage: min(36svh, 22rem);                          /* scale of the lamp, beam and table */
  --stage-cy: 43svh;
  --seal: calc(var(--stage) * .75);
  --cy: calc(var(--stage-cy) + var(--stage) * .125);    /* sits lower, so the gap above the table stays the same */
  --shade-w: calc(var(--stage) * .36);
  --shade-h: calc(var(--shade-w) * 1.12);
  --lamp-y: 5svh;
  --beam-top: calc(var(--lamp-y) + var(--shade-h) * .9);
  --table-y: calc(var(--stage-cy) + var(--stage) * .62);
  --thick: calc(var(--seal) * .055);
}
.hero__pin { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; isolation: isolate; }

/* the room with the lights off */
.stage { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 60% at 50% 34%, #1c120c 0%, #0d0806 52%, #060403 100%); }
/* the stage melts into the page colour at the bottom, so the next section's colour can rise into it */
.stage { -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.stage__cam { position: absolute; inset: 0; transform-origin: 50% var(--cy); will-change: transform; }

/* the pendant: a frosted glass bell like the ones over the booths */
.lamp { position: absolute; left: 50%; top: 0; width: var(--shade-w); height: calc(var(--lamp-y) + var(--shade-h)); transform: translateX(-50%); }
.lamp__cord { position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--lamp-y) + 2px); background: linear-gradient(rgba(230, 205, 166, 0), rgba(230, 205, 166, .12) 45%, rgba(230, 205, 166, .45)); }
.lamp__shade {
  position: absolute; left: 0; right: 0; top: var(--lamp-y); height: var(--shade-h);
  border-radius: 46% 46% 9% 9% / 58% 58% 7% 7%;
  background: linear-gradient(100deg, #2a1d14 0%, #3b2a1d 45%, #22170f 100%);
  box-shadow: inset 0 -2px 0 rgba(255, 220, 170, .08);
  overflow: hidden;
}
.lamp__shade::before { /* lit glass */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(60% 46% at 50% 74%, #fff6df 0%, #ffd9a0 24%, rgba(232, 160, 88, .9) 52%, rgba(150, 90, 45, .85) 78%, rgba(90, 55, 30, .9) 100%),
    linear-gradient(100deg, rgba(255, 255, 255, .0) 20%, rgba(255, 240, 215, .25) 34%, rgba(255, 255, 255, 0) 48%);
  background-blend-mode: screen;
}
.lamp__shade::after { /* the glass gets brighter toward the rim */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 9%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #fffaf0, rgba(255, 220, 160, .3) 70%, transparent);
}
.lamp__bulb { position: absolute; left: 50%; top: 66%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fffdf6 0%, rgba(255, 236, 196, .9) 30%, rgba(255, 200, 130, 0) 70%); filter: blur(2px); }
.lamp__bloom {
  position: absolute; left: 50%; top: calc(var(--lamp-y) + var(--shade-h) * .55); width: calc(var(--shade-w) * 5.5); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, .42) 0%, rgba(232, 150, 80, .16) 26%, rgba(200, 120, 60, .05) 48%, transparent 68%);
  pointer-events: none;
}

/* the light falling from it */
.beam { position: absolute; left: 50%; top: var(--beam-top); width: calc(var(--stage) * 2.5); height: calc(var(--table-y) - var(--beam-top) + var(--stage) * .2); transform: translateX(-50%); filter: blur(18px); pointer-events: none; }
.beam::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(41% 0, 59% 0, 96% 100%, 4% 100%);
  background: linear-gradient(to bottom, rgba(255, 214, 150, .34) 0%, rgba(255, 196, 128, .14) 45%, rgba(255, 190, 120, .06) 85%, rgba(255, 190, 120, 0) 100%);
}
.dust { position: absolute; left: 50%; top: var(--beam-top); width: calc(var(--stage) * 2.5); height: calc(var(--table-y) - var(--beam-top)); transform: translateX(-50%); pointer-events: none; }

/* a round glass table catching the light */
.table { position: absolute; left: 50%; top: var(--table-y); width: calc(var(--stage) * 2.3); aspect-ratio: 4.4 / 1; transform: translate(-50%, -50%); pointer-events: none; }
.table__top {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 42%, rgba(255, 206, 140, .34) 0%, rgba(232, 160, 96, .14) 42%, rgba(150, 95, 55, .05) 72%, rgba(0, 0, 0, 0) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 228, 186, .14), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.table__top::after { /* the front lip of the glass */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -2px; height: 46%; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-bottom: 1px solid rgba(255, 220, 170, .12);
}
.table__shadow { position: absolute; left: 50%; top: 46%; width: 29%; height: 20%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); }

/* the seal: a stack of thin layers makes a medallion with a real edge when it turns */
.rig { position: absolute; left: 50%; top: var(--cy); width: var(--seal); height: var(--seal); margin: calc(var(--seal) / -2) 0 0 calc(var(--seal) / -2); perspective: calc(var(--seal) * 5); pointer-events: none; }
.rig--mirror {
  top: calc(var(--table-y) * 2 - var(--cy) + var(--seal) * .02); transform: scaleY(-1); opacity: .22;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .25) 22%, transparent 40%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .25) 22%, transparent 40%);
}
.coin { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: rotateX(8deg) rotateY(-16deg); }
.coin > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin__face { transform: translateZ(calc(var(--thick) / 2)); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.coin__back { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.coin__edge { background: url("../assets/img/seal-edge.webp") center / 100% 100% no-repeat; transform: translateZ(calc(var(--thick) * var(--z))); }
.coin__light { /* warm light from the lamp, and a sheen that travels as it turns */
  transform: translateZ(calc(var(--thick) / 2 + .5px)); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-mask: url("../assets/img/seal.webp") center / 100% 100% no-repeat; mask: url("../assets/img/seal.webp") center / 100% 100% no-repeat;
  background:
    linear-gradient(112deg, rgba(255, 238, 205, 0) 44%, rgba(255, 238, 205, .1) 48.5%, rgba(255, 246, 228, .2) 50%, rgba(255, 238, 205, .1) 51.5%, rgba(255, 238, 205, 0) 56%) var(--sheen, 30%) 0 / 300% 100% no-repeat,
    linear-gradient(to bottom, rgba(255, 196, 120, .13) 0%, rgba(255, 196, 120, 0) 40%, rgba(0, 0, 0, .42) 100%);
}

/* first frame copy: the name, low and centred, like a title card */
.hero__intro { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: opacity, transform; }
.hero__intro > * { pointer-events: auto; }
.hero__title { position: absolute; left: 50%; bottom: 6.5svh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: max-content; }
.hero__wordmark {
  font-family: var(--script); font-weight: 400; font-size: clamp(4.2rem, 10svh, 8rem); line-height: 1.12; padding: 0 .3em;
  background-image: linear-gradient(100deg, #9a7230 0%, #c49a52 22%, #f3dca6 44%, #fff6e2 50%, #f3dca6 56%, #c49a52 78%, #9a7230 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6));
}
.hero__sub { font-family: var(--sans); font-weight: 400; font-size: clamp(.7rem, 1.4svh, .84rem); letter-spacing: .46em; text-indent: .46em; text-transform: uppercase; color: rgba(230, 205, 166, .8); margin-top: .1rem; }
.hero__status { position: absolute; left: var(--gutter); bottom: 4.5svh; display: inline-flex; align-items: center; gap: .65rem; font-size: .74rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 246, 238, .78); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--oak-deep); flex: none; }
.is-open-now .dot { background: var(--leaf); animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 143, 95, .5); } 50% { box-shadow: 0 0 0 .4rem rgba(111, 143, 95, 0); } }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 4.5svh; display: flex; align-items: center; gap: .9rem; font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(250, 246, 238, .55); }
.hero__scroll i { width: 3.5rem; height: 1px; background: rgba(250, 246, 238, .22); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--oak-light); transform: translateX(-100%); animation: scroll-cue 2.6s var(--ease-in-out) infinite; }
@keyframes scroll-cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* the pill button: one shape for every reservation link */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.8rem; border-radius: 999px;
  font-weight: 400; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  background: var(--oak-light); color: var(--espresso);
  transition: background-color 260ms ease, color 260ms ease, transform 160ms var(--ease-out);
}
.pill-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pill-btn:hover { background: var(--paper); } }
.site-header__end { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.pill-btn--header { min-height: 2.5rem; padding: .55rem 1.25rem; font-size: .72rem; background: var(--bar-accent); color: var(--pill-ink, var(--paper)); }
.site-header[data-theme="clear"], .site-header[data-theme="night"], .site-header[data-theme="espresso"], .site-header[data-theme="umber"] { --pill-ink: var(--espresso); }
@media (hover: hover) and (pointer: fine) { .site-header:not([data-theme="clear"]):not([data-theme="night"]):not([data-theme="espresso"]):not([data-theme="umber"]) .pill-btn--header:hover { background: var(--cocoa); } }

/* the seal is the star of the first frame, so the header carries only the small mark and the name */
.site-header .brand img { transform: translateY(var(--logo-shift)) scale(var(--logo-scale)); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); }
.site-header .brand__name { opacity: 1; transform: translate(0, -50%); filter: none; }

/* ---- entrance, once the loader lifts: the lamp flickers on, the light falls, the seal surfaces ---- */
.js .lamp__shade::before, .js .lamp__shade::after, .js .lamp__bulb, .js .lamp__bloom { opacity: 0; }
.js .beam, .js .dust, .js .table { opacity: 0; }
.js .rig { opacity: 0; translate: 0 4svh; }
.js .rig--mirror { opacity: 0; translate: 0 -4svh; }
.js .hero__wordmark { clip-path: inset(-.3em 100% -.3em 0); }
.js .hero__sub, .js .hero__status, .js .hero__scroll { opacity: 0; transform: translateY(10px); }
.js:not(.is-ready) .site-header { opacity: 0; }

.is-ready .lamp__shade::before, .is-ready .lamp__shade::after, .is-ready .lamp__bulb, .is-ready .lamp__bloom { animation: lamp-on 1300ms linear 250ms both; }
.is-ready .lamp__bloom { animation: lamp-on 1300ms linear 250ms both, hum 6s ease-in-out 1600ms infinite; }
.is-ready .beam { opacity: 1; transition: opacity 1800ms ease 650ms; }
.is-ready .dust { opacity: 1; transition: opacity 2400ms ease 1400ms; }
.is-ready .table { opacity: 1; transition: opacity 1600ms ease 850ms; }
.is-ready .rig { opacity: 1; translate: 0 0; transition: opacity 1800ms ease 700ms, translate 2400ms var(--ease-out) 700ms; }
.is-ready .rig--mirror { opacity: .22; }
.is-ready .hero__wordmark { clip-path: inset(-.3em -.3em -.3em -.3em); transition: clip-path 1800ms var(--ease-in-out) 1500ms; }
.is-ready .hero__sub, .is-ready .hero__status, .is-ready .hero__scroll { opacity: 1; transform: none; transition: opacity 1100ms ease, transform 1100ms var(--ease-out); }
.is-ready .hero__sub { transition-delay: 2300ms; }
.is-ready .hero__status { transition-delay: 2600ms; }
.is-ready .hero__scroll { transition-delay: 2800ms; }
.is-ready .site-header { animation: fade-in 1200ms ease 2200ms both; }
@keyframes lamp-on { 0% { opacity: 0; } 7% { opacity: .65; } 11% { opacity: .05; } 19% { opacity: .8; } 23% { opacity: .25; } 34% { opacity: 1; } 40% { opacity: .7; } 52%, 100% { opacity: 1; } }
@keyframes hum { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  /* the lamp hangs from the very top like on a laptop, between the name and Menu; a slimmer shade fits the gap */
  .hero { --stage: min(64vw, 30svh); --stage-cy: 41svh; --lamp-y: 4svh; --shade-w: calc(var(--stage) * .24); }
  .hero__title { bottom: 10.5svh; }
  .hero__wordmark { font-size: clamp(3.6rem, 19vw, 5rem); }
  .hero__sub { letter-spacing: .34em; text-indent: .34em; font-size: .68rem; }
  .hero__status { left: 50%; bottom: 4.5svh; transform: translateX(-50%); white-space: nowrap; }
  .js .hero__status { transform: translate(-50%, 10px); }
  .is-ready .hero__status { transform: translateX(-50%); }
  .hero__scroll { display: none; }
  .pill-btn--header { display: none; }
}

/* statement: pinned, words light up with scroll */
.statement { position: relative; height: 270svh; background: var(--espresso); color: var(--paper); }
.statement__sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.statement__text { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 5.6vw, 5.4rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.statement__text .w { display: inline-block; opacity: .13; will-change: opacity; }
.statement__text .em-soft, .statement__text .em-bold { font-family: var(--script); font-weight: 400; font-style: normal; font-size: 1.32em; line-height: .8; letter-spacing: 0; padding: .36em .2em .55em .5em; margin: -.36em -.14em -.55em -.46em; }
.statement__text .em-soft { color: #94714a; }
.statement__text .em-bold {
  color: #e2c27a;
  background: linear-gradient(100deg, #c99f4c 0%, #e8c978 30%, #fff1c9 50%, #e2bd69 70%, #c99f4c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
}

/* gallery: sideways scroll through the photographs */
.gallery { position: relative; height: 430svh; background: linear-gradient(180deg, var(--espresso) 0, var(--ivory) 11rem, var(--ivory) 100%); }
.gallery__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center;
  background:
    radial-gradient(38% 40% at 14% 62%, rgba(201, 166, 120, .26), transparent 70%),
    radial-gradient(34% 36% at 86% 78%, rgba(111, 143, 95, .16), transparent 70%);
}
.gallery__track { display: flex; align-items: center; gap: clamp(5rem, 10vw, 10rem); padding-inline: var(--gutter) 16vw; width: max-content; will-change: transform; backface-visibility: hidden; }
.g-item { flex: none; }
.g-item--intro { width: min(34rem, 82vw); display: grid; gap: 1.75rem; justify-items: start; margin-right: clamp(0rem, 3vw, 3rem); }
.g-item--intro p { color: var(--ink-soft); max-width: 32ch; font-size: 1.1rem; }
.g-frame {
  position: relative; padding: clamp(.6rem, 1vw, .9rem); border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .46));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(110, 75, 51, .1), 0 50px 80px -50px rgba(70, 45, 25, .55), 0 2px 8px -4px rgba(70, 45, 25, .18);
}
.g-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .22) 100%); }
.g-frame { width: fit-content; }
.g-in { position: relative; overflow: hidden; border-radius: 4px; background: var(--linen); }
.g-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.g-item figcaption { width: 0; min-width: 100%; margin-top: 1.1rem; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); padding-left: .25rem; }
.g-item--a .g-in { height: 44svh; width: calc(44svh * 4 / 3); }
.g-item--a { transform: translateY(-11svh); }
.g-item--b .g-in { height: 40svh; width: calc(40svh * 5 / 4); }
.g-item--b { transform: translateY(12svh); }
.g-item--d .g-in { height: 48svh; width: calc(48svh * .595); }
.g-item--d { transform: translateY(11svh); }
.g-item--e .g-in { height: 44svh; width: calc(44svh * 4 / 3); }
.g-item--e { transform: translateY(-8svh); }
.gallery__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.5rem; height: 1px; background: var(--line); }
.gallery__bar i { position: absolute; inset: 0; background: var(--walnut); transform-origin: left; transform: scaleX(0); }

@media (max-width: 799px) {
  .gallery { height: auto !important; padding-block: var(--section-y); }
  .gallery__pin { position: static; height: auto; overflow: visible; display: block; }
  .gallery__track { flex-direction: column; align-items: stretch; width: auto; padding-inline: var(--gutter); gap: 3.5rem; transform: none !important; }
  .gallery__bar { display: none; }
  .g-item--a, .g-item--b, .g-item--d, .g-item--e { transform: none; }
  .g-frame { width: auto; }
  .g-item--a .g-in { height: auto; width: 100%; aspect-ratio: 4 / 3; }
  .g-item--b .g-in { height: auto; width: 100%; aspect-ratio: 5 / 4; }
  .g-item--d .g-in { height: auto; width: 100%; aspect-ratio: .595; }
  .g-item--e .g-in { height: auto; width: 100%; aspect-ratio: 4 / 3; }
  .g-item--d { width: 78%; align-self: center; }  /* a set width: an auto margin would shrink it to nothing */
  .g-frame img { transform: none !important; }
}

.section { padding-block: var(--section-y); }

/* hours */
.hours { background: linear-gradient(180deg, var(--ivory) 0, var(--umber) 8rem); color: var(--paper); position: relative; overflow: hidden; }
.hours .h2 { color: var(--paper); }
.hours__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: 3.5rem; align-items: center; }
.hours__intro { grid-column: 1 / 6; display: grid; gap: 1.5rem; justify-items: start; }
.hours__live { display: grid; gap: .25rem; }
.hours__live-state { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; }
.hours__live-detail { color: var(--oak-light); font-size: 1rem; letter-spacing: .02em; }
.hours__copy { color: rgba(251, 248, 242, .82); max-width: 32ch; }
.hours__chart { grid-column: 6 / -1; position: relative; padding-bottom: 2.4rem; --day: 6.75rem; --time: 7.5rem; --gap: clamp(.9rem, 2vw, 1.5rem); }
.hours__axis { position: relative; height: 1.1rem; margin: 0 calc(var(--time) + var(--gap)) .9rem calc(var(--day) + var(--gap)); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oak-light); }
.hours__axis span { position: absolute; top: 0; left: calc(var(--at) * 100%); transform: translateX(-50%); white-space: nowrap; }
.hours__grid-lines { position: absolute; top: 2rem; bottom: 2.4rem; left: calc(var(--day) + var(--gap)); right: calc(var(--time) + var(--gap)); pointer-events: none; }
.hours__grid-lines i { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100%); width: 1px; background: rgba(250, 246, 238, .12); }
.hours__rows li { display: grid; grid-template-columns: var(--day) 1fr var(--time); column-gap: var(--gap); align-items: center; padding-block: .8rem; border-top: 1px solid rgba(251, 248, 242, .16); position: relative; }
.hours__rows li:last-child { border-bottom: 1px solid rgba(251, 248, 242, .16); }
.hours__day { font-family: var(--serif); font-size: 1.15rem; color: rgba(251, 248, 242, .78); transition: color 200ms ease; position: relative; }
.hours__time { font-variant-numeric: tabular-nums; font-size: .94rem; letter-spacing: .03em; color: rgba(251, 248, 242, .7); white-space: nowrap; text-align: right; }
.hours__track { position: relative; height: .7rem; }
.hours__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 100%); right: 0; background: var(--oak-light); opacity: .55; border-radius: 1px; transform-origin: left; }
.hours__rows li.is-today .hours__day, .hours__rows li.is-today .hours__time { color: var(--paper); }
.hours__rows li.is-today .hours__track i { background: var(--paper); opacity: 1; }
.hours__rows li.is-today .hours__day::before { content: ""; position: absolute; left: -.85rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem; background: var(--paper); border-radius: 50%; }

.js .hours__track i { transform: scaleX(0); }
.hours__chart.is-in .hours__track i { transform: scaleX(1); transition: transform 900ms var(--ease-out); }
.hours__chart.is-in li:nth-child(1) i { transition-delay: 60ms; }
.hours__chart.is-in li:nth-child(2) i { transition-delay: 120ms; }
.hours__chart.is-in li:nth-child(3) i { transition-delay: 180ms; }
.hours__chart.is-in li:nth-child(4) i { transition-delay: 240ms; }
.hours__chart.is-in li:nth-child(5) i { transition-delay: 300ms; }
.hours__chart.is-in li:nth-child(6) i { transition-delay: 360ms; }
.hours__chart.is-in li:nth-child(7) i { transition-delay: 420ms; }

.hours__now { position: absolute; top: 0; bottom: 2.4rem; left: calc(var(--day) + var(--gap)); right: calc(var(--time) + var(--gap)); pointer-events: none; }
.hours__now-line { position: absolute; top: 1.7rem; bottom: 0; left: 0; width: 1px; background: var(--paper); opacity: 0; transition: opacity 400ms ease 900ms; }
.hours__now-line.is-on { opacity: .9; }
.hours__now-line::before { content: ""; position: absolute; top: -.3rem; left: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--paper); }
.hours__now-line span { position: absolute; bottom: -1.9rem; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }

@media (max-width: 900px) {
  .hours__intro, .hours__chart { grid-column: 1 / -1; }
  .hours__now-line span { display: none; }
}
@media (max-width: 520px) {
  .hours__axis { margin-inline: 0; }
  .hours__axis { font-size: .6rem; letter-spacing: .04em; }
  .hours__grid-lines { display: none; }
  .hours__rows li { grid-template-columns: 1fr auto; grid-template-areas: "day time" "track track"; row-gap: .4rem; padding-block: .55rem; }
  .hours__day { font-size: .98rem; }
  .hours__time { font-size: .8rem; }
  .hours__track { height: .42rem; }
  .hours__axis { font-size: .56rem; margin-bottom: .5rem; }
  .hours__live-state { font-size: 1.65rem; }
  .hours .h2 { font-size: 2.4rem; }
  .hours__day { grid-area: day; }
  .hours__time { grid-area: time; }
  .hours__track { grid-area: track; }
  .hours__now { display: none; }
  .hours__rows li.is-today .hours__day::before { left: -.8rem; }
}


/* reserve + contact */
.reserve { background: linear-gradient(180deg, var(--umber) 0, var(--linen) 8rem); }
.reserve__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: 4rem; align-items: start; }
.reserve__form-col { grid-column: 1 / 8; }
.reserve__lede { margin-top: 1.1rem; color: var(--ink-soft); max-width: 46ch; }
.contact { grid-column: 9 / -1; padding-top: .6rem; }
.contact__list { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.contact__list dt { font-weight: 400; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oak-deep); margin-bottom: .2rem; }
.contact__list dd { font-family: var(--serif); font-size: 1.4rem; line-height: 1.3; }
.contact__list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .contact__list a:hover { background-size: 100% 1px; } }

.form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem 1.75rem; margin-top: 2.5rem; }
.field { grid-column: 1 / -1; display: grid; gap: .5rem; align-content: start; }
.field--half { grid-column: span 3; }
.field--third { grid-column: span 2; }
.field label { font-weight: 400; font-size: .85rem; letter-spacing: .05em; }
.optional { color: var(--ink-soft); font-weight: 300; margin-left: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .6rem .1rem; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  font-weight: 400; font-variant-numeric: lining-nums; font-size: 1.05rem; color: var(--ink); transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none; appearance: none;
}
.field select { padding-right: 1.75rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e4b33' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .1rem center / 1.2rem no-repeat; }
.field select:disabled { color: var(--ink-soft); cursor: not-allowed; }
.field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.6; }
.field ::placeholder { color: #9a8670; opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--walnut); box-shadow: 0 1px 0 0 var(--walnut); }
.field.has-error input, .field.has-error select { border-bottom-color: #a2432f; }
.field__error { min-height: 0; font-size: .84rem; color: #a2432f; }
.field__error:empty { display: none; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .5rem; }
.form__hint { font-size: .88rem; color: var(--ink-soft); }
.form[hidden], .confirm[hidden] { display: none; }

.confirm { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); outline: none; }
.confirm__title { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; }
.confirm__lead { color: var(--ink-soft); margin-top: .4rem; max-width: 44ch; }
.confirm__list { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 2rem; margin-top: 1.75rem; }
.confirm__list dt { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oak-deep); padding-top: .25em; }
.confirm__list dd { font-family: var(--sans); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; font-size: 1.1rem; line-height: 1.35; }
.confirm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 2rem; }
.confirm:not([hidden]) { animation: rise 420ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .reserve__form-col, .contact { grid-column: 1 / -1; }
  .contact { padding-top: 0; }
  .contact__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .field--half, .field--third { grid-column: 1 / -1; }
  .contact__list { grid-template-columns: 1fr; }
  .confirm__list { grid-template-columns: 1fr; gap: .1rem; }
  .confirm__list dd { margin-bottom: .6rem; }
}

/* location */
.location__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: 2.5rem; align-items: end; }
.location__text { grid-column: 1 / 5; display: grid; gap: 1.5rem; justify-items: start; }
.location__address { font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; }
.location { color: var(--paper); background: linear-gradient(180deg, var(--linen) 0, var(--espresso) 8rem); }
.location .h2 { color: var(--paper); }
.location__address { color: rgba(250, 246, 238, .86); }
.btn--light { background: transparent; color: var(--paper); border-color: rgba(250, 246, 238, .5); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--paper); color: var(--espresso); border-color: var(--paper); } }
.location .map-fallback { color: var(--oak-light); }
.location__map { grid-column: 5 / -1; aspect-ratio: 16 / 10; background: #3a281c; border: 1px solid rgba(250, 246, 238, .12); overflow: hidden; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; color: var(--walnut); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.location__map { position: relative; }
.location__map iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; filter: sepia(.28) saturate(.75) contrast(.96); }
@media (max-width: 900px) {
  .location__text, .location__map { grid-column: 1 / -1; }
  .location__map { aspect-ratio: 4 / 3; }
}



/* ---------- menu: the pages ---------- */
.menu { background: linear-gradient(180deg, var(--ivory) 0, var(--espresso) 9rem); color: var(--paper); padding-block: var(--section-y) calc(var(--section-y) * .7); position: relative; overflow-x: clip; }
.menu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 26% at 50% 34%, rgba(201, 166, 120, .14), transparent 72%); pointer-events: none; }
.menu__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; }
.menu__note { color: var(--oak-light); font-size: .95rem; letter-spacing: .02em; }
.menu-ui { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: 1.1rem; border-bottom: 1px solid rgba(250, 246, 238, .16); }
.menu-ui[hidden], [data-menu-ui][hidden] { display: none; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
.menu-tabs button { position: relative; background: none; border: 0; padding: .55rem 0; font-weight: 400; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(250, 246, 238, .55); transition: color 220ms ease; }
.menu-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: var(--oak-light); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease-out); }
.menu-tabs button[aria-current="true"] { color: var(--paper); }
.menu-tabs button[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .menu-tabs button:hover { color: var(--paper); } }
.menu-count { font-size: .85rem; letter-spacing: .1em; color: rgba(250, 246, 238, .6); font-variant-numeric: tabular-nums; }

.mstage { position: relative; margin-top: clamp(2rem, 4vw, 3rem); perspective: 1700px; overflow-x: clip; outline-offset: -6px; }
.mstage__nav { position: sticky; top: calc(50svh - 1.7rem); height: 0; z-index: 6; display: flex; justify-content: space-between; padding-inline: var(--gutter); pointer-events: none; }
.mstage__nav .round-btn { pointer-events: auto; background: rgba(46, 29, 19, .55); }
.mstage__list { display: grid; justify-items: center; align-items: start; transform-style: preserve-3d; touch-action: pan-y; }
.mpage { grid-area: 1 / 1; width: min(46rem, 90vw); will-change: transform, opacity; transform-origin: 50% 24%; user-select: none; -webkit-user-select: none; }
.mpage__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; -webkit-tap-highlight-color: transparent; }
.mpage__open img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(250, 246, 238, .08); background: #fff; pointer-events: none; }
.mpage__open::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: rgba(46, 29, 19, 0); transition: background-color 400ms ease; pointer-events: none; }
.mpage.is-far .mpage__open { cursor: pointer; }
.mpage.is-far .mpage__open::after { background: rgba(46, 29, 19, .35); }
.mend { background: var(--paper); color: var(--ink); aspect-ratio: 2004 / 3000; display: grid; place-content: center; justify-items: center; gap: 1.4rem; text-align: center; padding: 2.5rem; border-radius: 3px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); }
.mend__seal { width: 7.5rem; height: 7.5rem; border-radius: 50%; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.mend__title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.mend__text { color: var(--ink-soft); max-width: 28ch; }
.mend__text a { color: var(--walnut); }

.menu__foot { margin-top: 2rem; display: grid; gap: 2rem; }
.menu__hint { text-align: center; font-size: .88rem; color: rgba(250, 246, 238, .55); letter-spacing: .03em; }

/* plain-text menu, for reading aloud, searching and copying */
.menu-text { max-width: 60rem; margin-inline: auto; width: 100%; }
.menu-text summary { cursor: pointer; width: max-content; margin-inline: auto; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 246, 238, .7); padding: .6rem 0; border-bottom: 1px solid rgba(250, 246, 238, .25); list-style: none; }
.menu-text summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .menu-text summary:hover { color: var(--paper); } }
.menu-text__body { margin-top: 1.5rem; background: var(--paper); color: var(--ink); padding: clamp(1.25rem, 4vw, 3rem); }
.menu-text__pages { display: grid; gap: 3.5rem; }
.menu-page { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.menu-page + .menu-page { padding-top: 3rem; border-top: 1px solid var(--line); }
.menu-page__title { grid-column: 1 / -1; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; margin-bottom: 1.5rem; }
.item { padding-block: .8rem; }
.item:first-child { padding-top: 0; }
.item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; }
.item__name { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; line-height: 1.3; color: var(--ink); }
.item__price { font-variant-numeric: tabular-nums; font-weight: 400; font-size: .92rem; color: var(--walnut); white-space: nowrap; }
.item__desc { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; margin-top: .15rem; max-width: 42ch; }
.item__choices { color: var(--oak-deep); font-style: italic; font-size: .93rem; margin-top: .3rem; }
.item--drink { padding-block: .55rem; }
.item--tight { padding-top: 0; }
.menu-group { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.menu-group--first { margin-top: 0; }
.menu-group__title { font-weight: 400; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oak-deep); margin-bottom: .6rem; }
.item__head--sub { margin-top: .85rem; }
.item__choices-lead { font-family: var(--serif); font-weight: 500; font-size: 1rem; }
.opts { margin-top: .5rem; display: grid; gap: .1rem; }
.opts li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; font-style: italic; font-size: .98rem; line-height: 1.45; }
.opts li > span:last-child { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 400; font-size: .92rem; color: var(--walnut); }
.opts--described li { align-items: flex-start; padding-block: .3rem; }
.opts--described small { display: block; font-style: normal; font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.opts--plain li { display: list-item; list-style: none; color: var(--ink); }
.opts--names li { font-style: normal; font-weight: 500; font-size: 1rem; padding-block: .35rem; }
.steps { display: grid; gap: 1rem; margin-top: .85rem; }
.steps dt { font-weight: 400; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.steps dd { font-size: 1rem; line-height: 1.4; }
.steps .opts { margin-top: .2rem; }
@media (max-width: 760px) { .menu-page { grid-template-columns: 1fr; } .menu-col + .menu-col { margin-top: 1.5rem; } }

/* lightbox */
.lightbox { padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(30, 19, 12, .97); color: var(--paper); overflow: hidden; opacity: 1; transition: opacity 260ms ease, display 260ms allow-discrete, overlay 260ms allow-discrete; }
.lightbox:not([open]) { opacity: 0; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox__scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4.5rem 0 6rem; }
.lightbox__scroll img { display: block; margin-inline: auto; width: clamp(780px, 100vw, 1400px); max-width: none; height: auto; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.lightbox__close { position: fixed; top: 1rem; right: 1rem; z-index: 3; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(46, 29, 19, .8); border: 1px solid rgba(250, 246, 238, .4); color: var(--paper); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.lightbox__close:active { transform: scale(0.94); }
@media (hover: hover) { .lightbox__close:hover { background: var(--paper); color: var(--espresso); } }
.lightbox__nav { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; gap: 1rem; z-index: 3; }
.lightbox__nav .round-btn { background: rgba(46, 29, 19, .85); }

/* ---------- reviews: translucent cards on a fisheye ---------- */
.reviews { position: relative; overflow: clip; background: linear-gradient(180deg, var(--espresso) 0, var(--ivory) 9rem); }
.reviews__bg { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 64%, transparent 86%); mask-image: linear-gradient(transparent, #000 22%, #000 64%, transparent 86%); background: linear-gradient(rgba(250, 246, 238, .62), rgba(250, 246, 238, .8)), url("../assets/img/reviews-bg.jpg") center / cover no-repeat; }
.reviews .wrap, .reviews .rv { position: relative; }
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.reviews__summary { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.reviews__score { font-family: var(--sans); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; font-size: clamp(3.4rem, 5.6vw, 4.8rem); line-height: .9; letter-spacing: -.03em; color: var(--ink); }  /* Bodoni thins its hairlines at display sizes; the 4's diagonal vanished */
.reviews__star { width: clamp(2rem, 3vw, 2.6rem); height: clamp(2rem, 3vw, 2.6rem); color: var(--gold); fill: var(--gold); flex: none; }
.reviews__label { max-width: 13ch; font-size: .95rem; line-height: 1.35; color: var(--ink-soft); }
.reviews__label b { font-weight: 500; color: var(--ink); }

.rv__viewport { position: relative; height: clamp(25rem, 62svh, 31rem); perspective: 1300px; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); user-select: none; -webkit-user-select: none; }
.rv__viewport:active { cursor: grabbing; }
.rv__viewport:focus-visible { outline-offset: -6px; }
.rv__list { position: absolute; inset: 0; transform-style: preserve-3d; }
.rv-card {
  position: absolute; left: 50%; top: 50%; width: min(31rem, 78vw); height: 21.5rem; margin: 0; display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .3));
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 40px 60px -40px rgba(70, 45, 25, .5);
  will-change: transform, opacity; backface-visibility: hidden;
}
.rv-card.is-far { cursor: pointer; }
.rv-card__rating { display: flex; align-items: center; gap: 1.2rem; }
.rv-card__score { font-family: var(--serif); font-weight: 500; font-optical-sizing: none; font-size: clamp(3.8rem, 6vw, 5rem); line-height: .85; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.stars { display: inline-flex; gap: .22rem; color: var(--gold); }
.stars svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.stars .is-empty { fill: none; }
.rv-card__text { font-size: .9rem; font-weight: 400; line-height: 1.5; color: #34261d; flex: 1; display: -webkit-box; -webkit-line-clamp: 11; -webkit-box-orient: vertical; overflow: hidden; }
.rv-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(110, 75, 51, .25); font-size: .88rem; color: var(--ink-soft); }
.rv-card__name { font-weight: 400; color: var(--ink); }
.rv-card__tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oak-deep); }

.rv__controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; width: min(36rem, calc(100% - var(--gutter) * 2)); margin: 1.25rem auto 0; }
.rv__range { flex: 1; display: block; }
.rv__range input { width: 100%; height: 2.75rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rv__range input::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
.rv__range input::-moz-range-track { height: 1px; background: var(--line-strong); }
.rv__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: calc(-.625rem + .5px); border-radius: 50%; background: var(--walnut); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--walnut); transition: transform 160ms var(--ease-out); }
.rv__range input::-moz-range-thumb { width: .95rem; height: .95rem; border-radius: 50%; background: var(--walnut); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--walnut); }
.rv__range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.rv__links { text-align: center; margin-top: 1.25rem; }
.rv__note { text-align: center; margin: .5rem auto 0; max-width: 46ch; font-size: .85rem; color: var(--oak-deep); padding-inline: var(--gutter); }
.rv__note code { font-size: .85em; background: rgba(255, 255, 255, .5); padding: .05em .35em; }

/* the cards rise in once, when the section is reached */
.js .rv:not(.is-live) .rv-card { opacity: 0; }
.js .reviews__head.reveal { transition-duration: 1300ms; }

/* ---------- one page colour that flows from section to section ----------
   With JavaScript on, sections are see-through and the whole page takes one colour.
   As the next section rises up the screen, that colour blends towards the next one, and the
   outgoing and incoming sections crossfade with it. No bands, no hard edges.
   (Without JavaScript each section keeps its own colour, defined above.) */
html.js { background-color: #0b0705; }
html.js body { background-color: transparent; }
/* the flowing colour lives on its own layer behind everything: repainting one flat layer is cheap on phones,
   repainting the whole page every frame is not. The page background itself (which phones use to tint
   their status bar and toolbar) only changes once per section. */
/* iPhone Safari paints solid bars over the status bar and toolbar whenever something pinned to the screen
   has a background. Phones skip the pinned layers, so the page runs edge to edge under them. */
@media (hover: none) {
  .grain { display: none; }
  /* a pinned header that spans the full width reads to Safari as a top bar, so it gets a solid strip above it.
     Pull its box in by the page margin (and drop the same padding inside): the logo and Menu don't move. */
  .site-header { left: var(--gutter); right: var(--gutter); }
  .site-header__inner { max-width: var(--maxw); padding-inline: 0; }
  /* the menu arrows stuck to the screen read to Safari as a bar too: on phones they ride with the page */
  .mstage__nav { position: absolute; top: 1.25rem; left: 0; right: 0; }
}
.page-tint { position: fixed; inset: -12vh 0; z-index: -1; pointer-events: none; background: #0b0705; transform: translateZ(0); }
.is-xfade { will-change: opacity; }
html.js .hero, html.js .statement, html.js .gallery, html.js .menu, html.js .reviews,
html.js .hours, html.js .reserve, html.js .location, html.js .site-footer { background: transparent; }
/* ---------- footer ---------- */
.site-footer { background: var(--espresso); color: var(--paper); padding: 0 0 2.5rem; overflow: hidden; }
.site-footer__mark {
  font-family: var(--script); font-size: clamp(7rem, 24vw, 22rem); line-height: .9; text-align: center; padding: .05em .1em .16em; user-select: none;
  background-image: linear-gradient(100deg, #9a7230 0%, #b8914a 18%, #d8b874 32%, #f6e4b8 44%, #fff8e8 50%, #f6e4b8 56%, #d8b874 68%, #b8914a 82%, #9a7230 100%);
  background-size: 50% 100%; background-repeat: repeat-x; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45));
}
.site-footer__mark.is-in { animation: gloss 9s linear infinite; }
@keyframes gloss { from { background-position: 0 0; } to { background-position: 200% 0; } }
.site-footer__row { display: grid; grid-template-columns: 1.3fr auto auto; gap: 2rem 3rem; align-items: center; margin-top: clamp(1.5rem, 4vw, 3rem); padding-top: 2rem; border-top: 1px solid rgba(250, 246, 238, .16); }
.site-footer__brand { display: flex; align-items: center; gap: 1rem; }
.site-footer__brand img { width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.site-footer__tag { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: rgba(250, 246, 238, .8); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.site-footer a { text-decoration: none; font-size: .88rem; letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; } }
.site-footer__fine { font-size: .82rem; color: rgba(250, 246, 238, .55); }
@media (max-width: 900px) { .site-footer__row { grid-template-columns: 1fr; } }

/* ---------- scroll reveals: slow, with a little blur that clears ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1200ms ease, transform 1300ms var(--ease-out), filter 1200ms ease; }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .media-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1400ms var(--ease-in-out); }
.js .media-reveal.is-in { clip-path: inset(0); }

/* ---------- reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .js .rig, .is-ready .rig { translate: none; }
  .js .hero__wordmark { clip-path: none; opacity: 0; }
  .is-ready .hero__wordmark { opacity: 1; transition: opacity 900ms ease 600ms; }
  .js .hero__sub, .js .hero__status, .js .hero__scroll { transform: none; }
  .js .reveal { transform: none; filter: none; }
  .js .media-reveal { clip-path: none; }
  .statement { height: auto; padding-block: var(--section-y); }
  .statement__sticky { position: static; height: auto; }
  .statement__text .w { opacity: 1; }
  .gallery { height: auto !important; padding-block: var(--section-y); }
  .gallery__pin { position: static; height: auto; overflow: visible; display: block; }
  .gallery__track { flex-direction: column; align-items: stretch; width: auto; padding-inline: var(--gutter); gap: 3.5rem; transform: none !important; }
  .gallery__bar { display: none; }
  .g-item--a, .g-item--b, .g-item--d, .g-item--e { transform: none; }
  .g-frame { width: auto; }
  .g-item--a .g-in { height: auto; width: 100%; aspect-ratio: 4 / 3; }
  .g-item--b .g-in { height: auto; width: 100%; aspect-ratio: 5 / 4; }
  .g-item--d .g-in { height: auto; width: 100%; aspect-ratio: .595; }
  .g-item--e .g-in { height: auto; width: 100%; aspect-ratio: 4 / 3; }
  .g-frame img { transform: none !important; }
  .drop, .drop.is-open { transform: none; }
  .drop__list li { transform: none; }
  .loader { transition-duration: 1ms; }
}