/* ============================================================
   Le B — global stylesheet
   White & Navy. Ported from design_handoff_leb_website/assets/leb-system.css,
   plus the page-level layout classes for the production site.
   ============================================================ */

:root {
  /* Surfaces */
  --white:  #FFFFFF;   /* default page surface — never off-white */
  --mist:   #EDEFF6;   /* section change, image mat, table zebra */
  --navy:   #0A1024;   /* type, rules, menu curtain, footer */
  --signal: #27356B;   /* links, focus, error — one word per screen */
  --steel:  #8D99C6;   /* hairlines, dividers on navy */

  /* Navy opacity ladder */
  --navy-62: rgba(10,16,36,.62);
  --navy-45: rgba(10,16,36,.45);
  --navy-32: rgba(10,16,36,.32);
  --navy-18: rgba(10,16,36,.18);
  --navy-14: rgba(10,16,36,.14);
  --navy-08: rgba(10,16,36,.08);

  /* Type */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Archivo', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Motion */
  --e-enter:   cubic-bezier(.16,.84,.28,1);
  --e-curtain: cubic-bezier(.76,0,.24,1);
  --t-micro:   180ms;
  --t-state:   240ms;
  --t-wipe:    520ms;
  --t-curtain: 720ms;
  --t-enter:   900ms;

  /* Layout */
  --gutter: 28px;
  --max-w: 1320px;
  --section-gap: 148px;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  letter-spacing: -0.05em;  /* -50 tracking on copy; labels/mono set their own */
  overflow-x: clip;  /* the ink-bleed panes extend past the viewport */
}
::selection { background: var(--signal); color: var(--white); }
a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--navy); }

/* ------------------------------------------------------------
   TYPE SCALE
   ------------------------------------------------------------ */
.d1 { font-family: var(--serif); font-weight: 400; font-size: clamp(72px,13vw,190px); line-height: .86; letter-spacing: -.02em; }
.h1 { font-family: var(--serif); font-size: clamp(44px,5vw,56px); line-height: 1.02; letter-spacing: -.015em; font-weight: 400; }
.h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px,3vw,34px); line-height: 1.2; }
.b1 { font-size: 16px; line-height: 1.7; max-width: 66ch; text-wrap: pretty; }
.l1 { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.m1 { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }

/* ------------------------------------------------------------
   BLUR SWIPE  (signature hover — hero constellation only)
   On hover the blur sweeps across the word letter by letter,
   left to right; each .ch carries its index in --i.
   ------------------------------------------------------------ */
.br { position: relative; display: inline-block; color: var(--navy); }
a.br, a.br:hover { color: var(--navy); }
.br .ch { display: inline-block; will-change: filter; }
.br:hover .ch, .br:focus-visible .ch {
  animation: ch-swipe 560ms var(--e-enter) both;
  animation-delay: calc(var(--i) * 34ms);
}
@keyframes ch-swipe {
  0%   { filter: blur(0); opacity: 1; text-shadow: 0 0 0 rgba(255,255,255,0); }
  38%  { filter: blur(5px); opacity: .96;
         text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 30px rgba(255,255,255,.55); }
  100% { filter: blur(0); opacity: 1; text-shadow: 0 0 0 rgba(255,255,255,0); }
}
.br:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .br:hover .ch, .br:focus-visible .ch { animation: none; }
  .br:hover { opacity: .72; transition: opacity 240ms ease; }
}

/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */
.rv { opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-enter) var(--e-enter), transform var(--t-enter) var(--e-enter); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */
/* nav link without the ink bleed — plain Signal shift on hover */
.nl { color: var(--navy); transition: color var(--t-state) ease; }
.nl:hover { color: var(--signal); }
.nl:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }

.ul { position: relative; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 420ms var(--e-enter); }
.ul:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   MEDIA
   ------------------------------------------------------------ */
.mz { overflow: hidden; background: var(--mist); }
.mz > * { display: block; width: 100%; }
.mz img { height: 100%; object-fit: cover; }
.crop-45 { aspect-ratio: 4 / 5; }
.crop-169 { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------
   BUTTONS — the navy fill always travels LEFT → RIGHT
   ------------------------------------------------------------ */
.bt { position: relative; overflow: hidden; display: inline-block; background: transparent; border: 1px solid var(--navy);
  padding: 15px 28px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: color 380ms var(--e-enter), border-color 380ms ease; }
.bt > span { position: relative; z-index: 1; }
.bt::before { content: ""; position: absolute; inset: -1px; background: var(--navy);
  transition: transform var(--t-wipe) var(--e-enter); }
.bt-p { color: var(--white); }
.bt-p::before { transform: scaleX(1); transform-origin: 100% 50%; }
.bt-p:hover { color: var(--navy); }
.bt-p:hover::before { transform: scaleX(0); }
.bt-s { color: var(--navy); border-color: var(--navy-32); }
.bt-s::before { transform: scaleX(0); transform-origin: 0 50%; }
.bt-s:hover { color: var(--white); border-color: var(--navy); }
.bt-s:hover::before { transform: scaleX(1); }
.bt:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }

/* ------------------------------------------------------------
   TOP RAIL
   ------------------------------------------------------------ */
.rail { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 18px var(--gutter); }
/* the boxed side carries 10px of its own padding — match it on the left
   so both sides sit on the same line */
.rail > div:first-child { padding-top: 12px; }
.rail .slash { opacity: .45; }
.rail-r { text-align: right; display: flex; justify-content: flex-end; align-items: baseline; gap: 26px; }
.rail-r .curtain-trigger { line-height: inherit; }
.rail a { color: var(--navy); }
.curtain-trigger { cursor: pointer; color: var(--signal); background: none; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; }
.curtain-trigger:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }
/* shell mark, centre rail slot — silhouette takes the rail's colour
   (white over the home video, navy on white pages) */
.rail-shell { display: block; width: 56px; height: 100px; background: currentColor;
  -webkit-mask: url(shell.svg) no-repeat center / contain;
  mask: url(shell.svg) no-repeat center / contain;
  transition: opacity var(--t-state) ease; }
.rail-shell:hover { opacity: .7; }
.rail-shell:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }
/* the ＋ swipes up and returns from below on hover */
.plus-clip { display: inline-block; overflow: hidden; vertical-align: bottom; }
.plus { display: inline-block; }
.curtain-trigger:hover .plus { animation: plus-up 520ms var(--e-enter); }
@keyframes plus-up {
  0%   { transform: translateY(0); }
  48%  { transform: translateY(-130%); }
  52%  { transform: translateY(130%); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .curtain-trigger:hover .plus { animation: none; }
}

/* rail actions panel — one solid white box holding both labels */
.rail-box { display: flex; align-items: baseline; gap: 26px; white-space: nowrap;
  background: var(--white); color: var(--navy); padding: 10px 28px; }

@media (max-width: 640px) {
  .rail { padding: 14px 18px; }
  .rail-box { gap: 18px; padding: 9px 16px; }
}
.rail-box a, .rail-box .curtain-trigger { color: var(--navy); transition: opacity var(--t-state) ease; }
.rail-box a:hover, .rail-box .curtain-trigger:hover { opacity: .7; }

/* ------------------------------------------------------------
   HOME HERO — constellation index
   ------------------------------------------------------------ */
.hero { position: relative; height: 100vh; min-height: 720px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, #FFFFFF 0%, #FFFFFF 55%, #E6E9F2 100%); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wordmark { position: relative; text-align: center; margin: 0; }
.wordmark-logo { width: clamp(300px, 38vw, 620px); height: auto; display: block; margin: 0 auto; }
.anchor { position: absolute; }
.anchor.l1 { font-size: 12px; }

@media (max-width: 1024px) {
  .anchor-lg { display: none; }  /* collapse to 4 anchors */
}
@media (max-width: 640px) {
  .hero { flex-direction: column; justify-content: center; gap: 52px; min-height: 100svh; height: auto; padding: 110px var(--gutter) 110px; align-items: stretch; }
  .wordmark { order: 1; }
  .wordmark-logo { width: min(280px, 74vw); }
  .constellation { order: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
  .anchor { position: static; }
}

/* ------------------------------------------------------------
   SECTIONS & EDITORIAL GRID  (2fr / 7fr / 3fr)
   ------------------------------------------------------------ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-gap); }
.section-head { border-top: 1px solid var(--navy-18); padding-top: 16px; margin-bottom: 44px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }

.editorial { display: grid; grid-template-columns: 2fr 7fr 3fr; gap: 34px; align-items: start; }
.ed-rail { line-height: 1.9; opacity: .55; }
.ed-body { display: flex; flex-direction: column; gap: 22px; }
.ed-body p { margin: 0; }
.ed-notes { border-top: 1px solid var(--navy-18); padding-top: 14px; line-height: 1.9; opacity: .6; }
.dropcap::first-letter { float: left; font-family: var(--serif); font-size: 76px; line-height: .72; padding: 6px 12px 0 0; }
.pull { margin: 14px 0; padding-left: 22px; border-left: 1px solid var(--steel);
  font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.25; }

@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; gap: 28px; }
  .ed-notes { display: none; }
}

/* ------------------------------------------------------------
   FOOTER — navy surface, inverted bleed
   ------------------------------------------------------------ */
.footer { background: var(--navy); color: var(--white); padding: 90px var(--gutter) 32px; margin-top: var(--section-gap); }
.footer-grid { max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 40px;
  padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-mark { font-family: var(--serif); font-size: 72px; line-height: .9; }
.footer-mark-logo { width: 190px; height: auto; display: block; }
.footer-addr { margin-top: 18px; font-size: 13px; line-height: 1.7; opacity: .6; max-width: 34ch; }
.footer-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-col-head { font-weight: 400; opacity: .45; margin-bottom: 6px; }
.footer .nl, .footer .nl:hover { color: var(--white); }
.footer-legal { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between;
  padding-top: 22px; opacity: .45; flex-wrap: wrap; gap: 20px; }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   MENU CURTAIN
   ------------------------------------------------------------ */
.curtain { position: fixed; inset: 0; z-index: 60; background: var(--navy); color: var(--white);
  display: flex; flex-direction: column; gap: 28px;
  padding: 22px 28px 40px; overflow-y: auto;
  transform: translateY(-100%); transition: transform var(--t-curtain) var(--e-curtain);
  visibility: hidden; }
.curtain.open { transform: translateY(0); visibility: visible; }
/* leaving via a menu link — the text fades first, then the next page's
   rising exit takes over the still-covered screen */
.curtain.closing > * { opacity: 0; transition: opacity 400ms ease; }
.curtain:not(.open) { transition: transform var(--t-curtain) var(--e-curtain), visibility 0s var(--t-curtain); }

.curtain-rail { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.curtain-close { cursor: pointer; color: var(--steel); background: none; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; }
.curtain-close:focus-visible { outline: 1px solid var(--steel); outline-offset: 3px; }

.cmenu { display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, max-content);
  justify-content: center; align-self: center; margin-top: auto; margin-bottom: 0;
  column-gap: clamp(56px, 6vw, 110px); row-gap: clamp(20px, 3.4vh, 34px);
  /* same voice as the hero constellation labels — Archivo caps, tracked */
  font-size: clamp(20px, 2.4vw, 32px); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.3; }
@media (max-width: 860px) {
  .cmenu { display: flex; flex-direction: column; gap: 20px; font-size: clamp(17px, 5vw, 22px); }
}
.cm { color: var(--white); cursor: pointer; width: max-content; align-self: flex-start;
  opacity: 0; transform: translateX(-115%);
  transition: transform 940ms var(--e-enter), opacity 600ms ease; }
a.cm, a.cm:hover { color: var(--white); }
.cmenu.open .cm { opacity: 1; transform: none; }
.cmenu.open .cm:nth-child(1) { transition-delay: 300ms; }
.cmenu.open .cm:nth-child(2) { transition-delay: 390ms; }
.cmenu.open .cm:nth-child(3) { transition-delay: 480ms; }
.cmenu.open .cm:nth-child(4) { transition-delay: 570ms; }
.cmenu.open .cm:nth-child(5) { transition-delay: 660ms; }
.cmenu.open .cm:nth-child(6) { transition-delay: 750ms; }
.cmenu.open .cm:nth-child(7) { transition-delay: 840ms; }
.cmenu.open .cm:nth-child(8) { transition-delay: 930ms; }
.cmenu.open .cm:nth-child(9) { transition-delay: 1020ms; }
.cm:focus-visible { outline: none; }
.cm:focus-visible .ar { opacity: 1; transform: translateX(0); }

.ar { position: relative; display: inline-block; width: .66em; height: 2px; margin-left: .32em;
  background: currentColor; vertical-align: .22em; opacity: 0; transform: translateX(-.55em);
  transition: opacity 340ms ease, transform 420ms var(--e-enter); }
.ar::after { content: ""; position: absolute; right: -1px; top: 50%; width: .26em; height: .26em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); }
.cm:hover .ar { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .curtain { transition: none; }
  .cm { transition: opacity 240ms ease; transform: none; }
  .cmenu.open .cm { transition-delay: 0ms !important; }
}

/* ------------------------------------------------------------
   LOAD SCREEN — blue field, the logo arrives, then it lifts
   ------------------------------------------------------------ */
.loader { position: fixed; inset: 0; z-index: 100; background: #060E1F;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  transition: opacity 1100ms ease, backdrop-filter 1100ms ease, -webkit-backdrop-filter 1100ms ease; }
.loader.done { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
/* the full intro dissolves more slowly than the between-pages lift */
.loader.slow { transition-duration: 1900ms; }
/* between pages the panel keeps the upward sweep going: it arrives covering
   (as .pt from the previous page) and exits through the top */
.loader.lift { transform: translateY(-100%); transition: transform var(--t-curtain) var(--e-curtain); }
/* between pages the panel is plain blue — no signature */
.loader.plain .loader-logo { display: none; }
/* sized/placed to match .wordmark-logo exactly, so the signature
   appears to hold its spot as the loader dissolves into the hero */
.loader-logo { width: clamp(300px, 38vw, 620px); }
.loader-logo svg { display: block; width: 100%; height: auto; }
/* the signature is written stroke by stroke (site.js drives the dash sweep);
   the fill arrives once the pen has finished */
.loader-logo path { fill-opacity: 0; stroke: #FFFFFF; stroke-width: 7; stroke-linecap: round; }
.loader.off { display: none; }
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ------------------------------------------------------------
   PAGE TRANSITION — navy sweep, wordmark steady, no spinners
   ------------------------------------------------------------ */
.pt { position: fixed; inset: 0; z-index: 80; background: #060E1F; pointer-events: none;
  transform: translateY(100%); }
.pt.on { transition: transform var(--t-curtain) var(--e-curtain); transform: translateY(0); }
.page-enter { animation: page-in 560ms ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
  .page-enter { animation: none; }
}

/* ------------------------------------------------------------
   FORM FIELDS — underline only, no boxes, no radius
   ------------------------------------------------------------ */
input, textarea, select, button { font: inherit; color: inherit; }
input:focus, textarea:focus { outline: none; }
.fld { border: 0; border-bottom: 1px solid rgba(10,16,36,.28); background: transparent; border-radius: 0;
  padding: 10px 0 9px; width: 100%; min-height: 44px; box-sizing: border-box;
  transition: border-color var(--t-state) ease; }
textarea.fld { resize: vertical; min-height: 64px; }
.fld:hover { border-color: rgba(10,16,36,.48); }
.fld:focus { border-color: var(--signal); }
.fld::placeholder { color: rgba(10,16,36,.32); }
.fld[aria-invalid="true"] { border-color: var(--signal); }
.fld:disabled { color: rgba(10,16,36,.22); border-bottom-color: transparent; }
.fld-error { display: none; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--signal); }
.fld[aria-invalid="true"] ~ .fld-error { display: block; }
.fld-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-62); margin-bottom: 6px; }

.form { display: flex; flex-direction: column; gap: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.form-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   MENU PAGE — tabs, dish rows, drink columns, sticky reservation
   ------------------------------------------------------------ */
.menu-layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start;
  padding-top: 140px; padding-bottom: 120px; }
.menu-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 22px; }
/* compact reservation card — the menu owns the page */
.menu-aside .form { gap: 18px; }
.menu-aside .form-row { gap: 18px; }
.menu-aside .fld { min-height: 36px; padding: 6px 0; font-size: 14px; }
.menu-aside textarea.fld { min-height: 44px; }
.menu-aside .fld-label { font-size: 9px; margin-bottom: 3px; }
@media (max-width: 1024px) {
  .menu-layout { grid-template-columns: 1fr; gap: 80px; }
  .menu-aside { position: static; }
}

.tabs { display: flex; align-items: baseline; gap: 24px 30px; flex-wrap: wrap; border-bottom: 1px solid var(--navy-18); padding-bottom: 14px; }
.tab { cursor: pointer; padding-bottom: 2px; background: none; border: 0; padding-top: 0; padding-left: 0; padding-right: 0;
  color: var(--navy-45); border-bottom: 1px solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--t-state) ease, border-color var(--t-state) ease; }
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.tab:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }
.tabs .stamp { margin-left: auto; font-weight: 400; text-transform: none; opacity: .5; }
@media (max-width: 640px) {
  .tabs { flex-wrap: wrap; row-gap: 12px; }
  .tabs .stamp { margin-left: 0; flex-basis: 100%; }
}

.panel { display: flex; flex-direction: column; gap: 46px; padding-top: 34px; }
.panel[hidden] { display: none; }

/* menu switch — the open menu slides away, the next reveals in sequence.
   --dir (±1, set from tab order) decides which way everything travels */
.panel.leaving { animation: menu-out 230ms ease forwards; }
.panel.entering > * { animation: menu-in 620ms var(--e-enter) both; }
.panel.entering > *:nth-child(2) { animation-delay: 70ms; }
.panel.entering > *:nth-child(3) { animation-delay: 140ms; }
.panel.entering > *:nth-child(4) { animation-delay: 210ms; }
.panel.entering > *:nth-child(5) { animation-delay: 280ms; }
.panel.entering > *:nth-child(6) { animation-delay: 350ms; }
@keyframes menu-out {
  to { opacity: 0; transform: translateX(calc(-30px * var(--dir, 1))); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateX(calc(36px * var(--dir, 1))); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel.leaving, .panel.entering > * { animation: none; }
}
.course-head { font-family: var(--serif); font-style: italic; font-size: 26px; margin-bottom: 20px; }
.dishes { display: flex; flex-direction: column; gap: 22px; }
.dish-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.dish-name { font-size: 16px; line-height: 1.4; }
.dish-price { opacity: .6; white-space: nowrap; }
.dish-note { margin-top: 4px; font-size: 13.5px; line-height: 1.55; opacity: .58; }
.dish-mark { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--steel); vertical-align: 2px; }
.dish-mark-new { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--signal); vertical-align: 2px; }
.dish.finished { opacity: .38; }
.dish.finished .dish-name { text-decoration: line-through; }
.dish-finished-flag { margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; }
.menu-foot { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--navy-18);
  padding-top: 16px; opacity: .5; flex-wrap: wrap; }
/* the dish that travels with each food menu */
.menu-photo { display: flex; justify-content: center; padding-top: 12px; }
.menu-photo .mz { width: min(620px, 100%); }

/* wine + spirits — long lists flow in two columns */
.drink-list { columns: 2; column-gap: 60px; }
.drink-head { break-after: avoid; margin-bottom: 16px; }
.drink-list > .drink-head:not(:first-child) { margin-top: 30px; }
.drink-sub { break-after: avoid; margin: 2px 0 14px; color: var(--navy-62); }
.drink-item ~ .drink-sub { margin-top: 26px; }
.drink-item { break-inside: avoid; margin-bottom: 13px; }
.drink-item .dish-name { font-size: 14.5px; }
.drink-item .dish-note { margin-top: 2px; font-size: 12.5px; }
@media (max-width: 760px) {
  .drink-list { columns: 1; }
}

/* ------------------------------------------------------------
   CAPACITY TABLE (private dining) — 1px rules, Mist zebra
   ------------------------------------------------------------ */
.cap-scroll { overflow-x: auto; }
.cap-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.cap-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-62); padding: 12px 16px; border-bottom: 1px solid var(--navy-18); }
.cap-table td { font-size: 15px; padding: 14px 16px; border-bottom: 1px solid var(--navy-14); }
.cap-table tbody tr:nth-child(even) { background: var(--mist); }
.cap-table .m1 { opacity: .6; }

/* ------------------------------------------------------------
   JOURNAL INDEX
   ------------------------------------------------------------ */
.journal-index { display: flex; flex-direction: column; gap: 34px; align-items: flex-start; }
.journal-item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.journal-item .m1 { opacity: .5; }

/* ------------------------------------------------------------
   CURSOR
   ------------------------------------------------------------ */
.cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #0A1024; z-index: 90; pointer-events: none; opacity: 0; transform: translate(-50%,-50%);
  transition: width 180ms ease, height 180ms ease, background 180ms ease, border 180ms ease, opacity 240ms ease; }

/* ------------------------------------------------------------
   FULL-BLEED IMAGE (below the fold only, one per page)
   ------------------------------------------------------------ */
.bleed { position: relative; overflow: hidden; }
.bleed::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,16,36,0) 45%, rgba(10,16,36,.55) 100%); }

/* ============================================================
   PAGE STYLES — ported from the Astro pages' scoped styles
   ============================================================ */


/* -- home -- */
/* non-scrolling landing: the hero is the whole page */
.home-page html, .home-page body { height: 100%; overflow: clip; scroll-behavior: auto; }
.home-page .hero { height: 100svh; min-height: 0; }
  @media (max-width: 640px) {
    /* the stacked constellation may exceed one screen — let it scroll */
  .home-page html, .home-page body { overflow: auto; }
  .home-page .hero { height: auto; min-height: 100svh; }
  }

  /* home hero is dark photography — rail and constellation go white here only */
.home-page .rail, .home-page .rail a.nl, .home-page .rail a.nl:hover,
.home-page .rail .curtain-trigger { color: var(--white); }
.home-page .rail a.nl:hover, .home-page .rail .curtain-trigger:hover { opacity: .72; }
.home-page .rail a.rail-shell { color: var(--white); }
  /* the boxed actions keep their white field + navy labels over the video */
  .rail .rail-box a.nl, .rail .rail-box a.nl:hover,
.home-page .rail .rail-box .curtain-trigger, .home-page .rail .rail-box .curtain-trigger:hover { color: var(--navy); }
.home-page .rail .rail-box a.nl:hover, .home-page .rail .rail-box .curtain-trigger:hover { opacity: .7; }
.home-page .anchor .br, .home-page .anchor a.br:hover { color: var(--white); }

/* -- le-burger -- */
/* the photo floats centered on load; the title rides up over its
     bottom edge — a touch of overlap, both are dark */
  .lb-hero { min-height: 100svh; box-sizing: border-box; background: var(--white);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 100px var(--gutter) 48px; }
  .lb-hero-figure { margin: 0; height: min(52svh, 560px); }
  .lb-hero-figure .lb-float-inner { height: 100%; }
  .lb-hero-figure img { height: 100%; width: auto; display: block; }
  /* negative-film title: white + difference blend inverts against whatever
     it crosses — light over the dark photo, dark over the white page */
  .lb-title { position: relative; z-index: 2; margin: -0.10em 0 0;
    color: #fff; mix-blend-mode: difference;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(64px, 12vw, 170px); line-height: .9; letter-spacing: -.02em; }
  .lb-title .lb-dot { color: #fff; }
  @supports not (mix-blend-mode: difference) {
    .lb-title { color: var(--navy); mix-blend-mode: normal; margin-top: 0.05em; }
  }
  .lb-dot { color: var(--signal); }
  .lb-intro { margin: 34px auto 0; max-width: 44ch; text-align: center; color: var(--navy-62); }

  /* text always passes over the drifting photos, never under */
  .lb-sect { padding-top: 148px; position: relative; z-index: 2; }
  .lb-float { position: relative; z-index: 1; }
  .lb-hero { position: relative; z-index: 2; }
  .lb-quote { margin: 0 auto; max-width: 21ch; text-align: center;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(30px, 4.4vw, 52px); line-height: 1.18; letter-spacing: -.015em; }
  .lb-copy { max-width: 62ch; margin: 64px auto 0; display: flex; flex-direction: column; gap: 22px; }
  .lb-copy + .lb-quote { margin-top: 84px; }
  .lb-copy p { margin: 0; }

  /* floating figures — centered, drifting at their own pace (data-float) */
  .lb-float { margin: 110px auto 0; }
  .lb-float--left { margin-left: max(var(--gutter), 14vw); }
  .lb-float--right { margin-left: auto; margin-right: max(var(--gutter), 16vw); }
  .lb-float-inner { transform: translateY(var(--fy, 0px)); will-change: transform; }
  .lb-float img { display: block; width: 100%; height: auto; }

  .lb-item { display: grid; grid-template-columns: 64px 1fr; gap: 6px 28px;
    max-width: 720px; margin: 0 auto 84px; align-items: baseline; }
  .lb-item:last-child { margin-bottom: 0; }
  .lb-item-n { opacity: .45; }
  .lb-item-title { grid-column: 2; margin: 0; font-family: var(--serif); font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.015em; }
  .lb-item-copy { grid-column: 2; margin: 18px 0 0; }

  .lb-phil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px 72px;
    max-width: 1100px; margin: 0 auto; }
  .lb-phil { margin: 0; }
  .lb-phil-kicker { color: var(--navy-45); }
  .lb-phil-statement { margin: 16px 0 0; font-family: var(--serif); font-weight: 400;
    font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.015em; max-width: 16ch; }
  .lb-phil-copy { margin: 26px 0 0; }

  .lb-finale { margin-top: 148px; background: var(--navy); color: var(--white);
    padding: 140px var(--gutter); text-align: center; }
  .lb-finale-lines { margin: 28px 0 0; font-family: var(--serif); font-weight: 400;
    font-size: clamp(30px, 4.6vw, 54px); line-height: 1.16; letter-spacing: -.015em; }
  /* system button, inverted for navy: the white fill travels left → right */
  .lb-cta { position: relative; overflow: hidden; display: inline-block; margin-top: 48px;
    padding: 15px 28px; color: var(--white); border: 1px solid rgba(255,255,255,.4);
    transition: color 380ms var(--e-enter), border-color 380ms ease; }
  .lb-cta > span { position: relative; z-index: 1; }
  .lb-cta::before { content: ""; position: absolute; inset: -1px; background: var(--white);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-wipe) var(--e-enter); }
  .lb-cta:hover { color: var(--navy); border-color: var(--white); }
  .lb-cta:hover::before { transform: scaleX(1); }
  .lb-cta:focus-visible { outline: 1px solid var(--steel); outline-offset: 3px; }

  /* scroll-into-view: figures unmask with a soft wipe while the photo
     settles out of a slight zoom; quotes resolve from a blur; text rises */
  .lb-float.rv { transform: translateY(40px); transition-duration: 1200ms; }
  .lb-float.rv.in { transform: none; }
  .lb-float.rv .lb-float-inner { clip-path: inset(16% 9% 16% 9%);
    transition: clip-path 1200ms var(--e-enter); }
  .lb-float.rv.in .lb-float-inner { clip-path: inset(0 0 0 0); }
  .lb-float.rv img { transform: scale(1.09); transition: transform 1500ms var(--e-enter); }
  .lb-float.rv.in img { transform: scale(1); }
  .lb-quote.rv { filter: blur(9px);
    transition: opacity 1000ms var(--e-enter), transform 1000ms var(--e-enter), filter 1100ms ease; }
  .lb-quote.rv.in { filter: blur(0); }
  .lb-phil.rv, .lb-item.rv, .lb-copy.rv { transition-duration: 1050ms; }

  /* the navy finale sits directly on the footer */
.le-burger-page footer.footer { margin-top: 0; }

  @media (max-width: 900px) {
    .lb-phil-grid { grid-template-columns: 1fr; gap: 84px; }
  }
  @media (max-width: 640px) {
    .lb-hero { padding: 96px var(--gutter) 32px; }
    .lb-hero-figure { height: min(46svh, 420px); }
    .lb-item { grid-template-columns: 1fr; }
    .lb-item-title, .lb-item-copy { grid-column: 1; }
    .lb-float--left, .lb-float--right { margin-left: auto; margin-right: auto; }
  }

/* -- the-room -- */
.plates { padding-top: 120px; display: grid; grid-template-columns: 5fr 7fr; gap: 34px; align-items: end; }
  @media (max-width: 900px) {
    .plates { grid-template-columns: 1fr; }
  }

/* -- private-dining -- */
.enquiry { padding-top: 120px; }

/* -- reserve -- */
.reserve-layout { padding-top: 180px; padding-bottom: 40px;
    display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
  @media (max-width: 900px) {
    .reserve-layout { grid-template-columns: 1fr; gap: 64px; }
  }

/* -- contact -- */
.contact-layout { padding-top: 180px; padding-bottom: 40px;
    display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: start; }
  .contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 18px; }
  @media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 72px; }
  }

/* -- journal -- */
.np-head { display: flex; align-items: baseline; justify-content: space-between; gap: 28px;
    border-top: 1px solid var(--navy); padding-top: 20px; margin-bottom: 26px; flex-wrap: wrap; }
  .np-mark, .np-title { font-family: var(--serif); font-weight: 400; margin: 0;
    font-size: clamp(44px, 7.5vw, 104px); line-height: .9; letter-spacing: -.02em; }

  .np-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto;
    gap: 1px; background: var(--navy-14); border: 1px solid var(--navy-14); }
  .np-cell { background: var(--white); padding: 18px 20px 24px; color: var(--navy);
    display: flex; flex-direction: column; }
  .np-feature { grid-column: 1 / span 2; grid-row: 1 / span 2; }

  .np-cell-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    border-bottom: 1px solid var(--navy-18); padding-bottom: 10px; margin-bottom: 18px; }
  .np-cell-head .m1 { opacity: .55; }

  .np-media { flex: 1 1 auto; min-height: 0; }
  .np-cell-title { margin-top: 16px; font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; line-height: 1.55; transition: color 240ms ease; }
  .np-cell:hover .np-cell-title { color: var(--signal); }
  a.np-cell:focus-visible { outline: 1px solid var(--signal); outline-offset: -3px; }

  .np-quote-cell { justify-content: flex-start; }
  .np-quote { flex: 1; display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 34px 12px; text-align: center;
    font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; }

  @media (min-width: 1025px) {
    /* let the last two cells finish the row — no empty slots */
    .np-cell:nth-last-child(-n+2):not(.np-feature) { grid-column: span 2; }
  }
  @media (max-width: 1180px) {
    .np-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1024px) {
    .np-grid { grid-template-columns: 1fr 1fr; }
    .np-feature { grid-column: 1 / span 2; grid-row: auto; }
  }
  @media (max-width: 640px) {
    .np-grid { grid-template-columns: 1fr; }
    .np-feature { grid-column: auto; }
  }

/* corrections: html-level rules can't be descendant-prefixed */
html:has(body.home-page), body.home-page { height: 100%; overflow: clip; scroll-behavior: auto; }
@media (max-width: 640px) {
  html:has(body.home-page), body.home-page { overflow: auto; }
}

/* ------------------------------------------------------------
   RECOGNITION — award badges (white pages only)
   ------------------------------------------------------------ */
.awards { display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 4vw, 56px); padding-top: 110px; flex-wrap: wrap; }
.awards img { height: 64px; width: auto; display: block; opacity: .92;
  transition: opacity 300ms ease, transform 300ms ease; }
.awards img:hover { opacity: 1; transform: translateY(-2px); }
.awards--compact { padding-top: 30px; gap: 26px; }
.awards--compact img { height: 42px; }

/* home hero — recognition row, quiet, bottom center over the film */
.hero-awards { position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  display: flex; align-items: center; gap: 36px; z-index: 3; opacity: .8;
  transition: opacity 400ms ease; }
.hero-awards:hover { opacity: 1; }
.hero-awards img { height: 42px; width: auto; display: block; }
@media (max-width: 640px) {
  .hero-awards { position: static; transform: none; justify-content: center;
    padding: 44px 0 56px; }
  .hero-awards img { height: 36px; }
}

/* ------------------------------------------------------------
   OPENTABLE — the widget is an OT-hosted iframe; we frame it
   ------------------------------------------------------------ */
.ot-widget { min-height: 300px; }
.ot-widget iframe { max-width: 100%; }
.curtain-ot { margin-top: auto; margin-bottom: -235px; min-height: 110px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; z-index: 1; }
.curtain-ot iframe { max-width: 100%; }
@media (max-height: 720px) {
  .curtain-ot { display: none; }  /* short screens: menu links stay comfortable */
}