/* ==========================================================================
   The Lobby Bucharest — static rebuild of the Squarespace layout
   Plain CSS3 · no build step · cPanel-ready
   --------------------------------------------------------------------------
   HOW THE LAYOUT WORKS
   • All positions/sizes were measured from the live Squarespace page at
     1905px wide (1920 screen − scrollbar) and are written in "design px".
   • --u (set in <head>) = one design px at the current window width, so the
     page scales proportionally — the same way Squarespace Fluid Engine does.
   • .sec  = a section with a fixed height  (style="--h:…").
   • .abs  = a block placed at --x / --y with width --w (design px).
   • .track + .sticky = a card that scrolls normally, stops at --top px from
     the top of the window, and lets go when the track ends (--end).
   • Backgrounds scroll with the page, except the dark "vases" panel in the
     stage section, which stays fixed (as on Squarespace).
   ========================================================================== */

:root {
  /* Palette */
  --blue-deep: #455d90;
  --blue-mid:  #617aab;
  --lavender:  #b9c0da;

  /* Neutrals */
  --ink:   #05070b;
  --navy:  #1e2541;
  --cream: #fff6d9;
  --white: #ffffff;

  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  --u: calc(100vw / 1920);          /* replaced by the exact value from script */
  --card-w: 304;                     /* standard photo card: 304 × 352 */
  --card-h: 352;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, p, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  padding: .75rem 1rem; background: var(--cream); color: var(--navy); font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.center { text-align: center; }

/* ---------- Layout engine ---------- */
.sec {
  position: relative;
  height: calc(var(--h) * var(--u));
  isolation: isolate;
}
.sec-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w, var(--card-w)) * var(--u));
  z-index: 2;
}

/* Photo cards */
.card {
  width: calc(var(--w, var(--card-w)) * var(--u));
  aspect-ratio: var(--card-w) / var(--card-h);
  overflow: hidden;
  background: #111;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover img { transform: scale(1.04); }

/* Sticky cards */
.track {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--card-w) * var(--u));
  height: calc((var(--end) - var(--y)) * var(--u));
  z-index: 2;
}
.sticky {
  position: sticky;
  top: calc(var(--top) * var(--u));
}

/* ---------- Links ---------- */
.link-xl, .link-sm, .link-menu {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-family: var(--font-head);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: .12em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .5s var(--ease), opacity .25s ease;
}
.link-xl { font-size: max(18px, calc(26 * var(--u))); color: #fdf6e3; }
.link-sm { font-size: max(14px, calc(16 * var(--u))); color: #fdf6e3; margin-top: calc(16 * var(--u)); }
.link-xl span, .link-sm span { display: inline-block; transition: transform .35s var(--ease); }
.link-xl:hover, .link-sm:hover, .link-menu:hover { background-size: 0 1px; background-position: 100% 100%; }
.link-xl:hover span, .link-sm:hover span { transform: translateX(6px); }
.link-lavender { color: var(--lavender); }

/* ---------- Header (scrolls away with the page, like the original) ---------- */
.site-header {
  position: fixed;               /* hides on scroll down, comes back on scroll up */
  inset: 0 0 auto 0;
  z-index: 100;
  transition: transform .45s var(--ease);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px 0 43px;
  background: var(--blue-deep);
}
.site-header.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; color: var(--white); position: relative; z-index: 120; transition: opacity .25s; }
.brand:hover { opacity: .75; }
.brand-logo { width: 150px; aspect-ratio: 396 / 58; fill: currentColor; }

.nav-list { display: flex; gap: 96px; }
.nav-list a {
  position: relative;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  padding: .4rem 0;
  transition: opacity .25s;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav-list a:hover::after, .nav-list a.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; position: relative; z-index: 120; width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; cursor: pointer; }
.nav-toggle span { position: absolute; left: 9px; width: 26px; height: 1.5px; background: var(--white); transition: transform .45s var(--ease), top .45s var(--ease); }
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* ---------- 1. Hero ---------- */
.t-place {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: max(20px, calc(28 * var(--u)));
  line-height: 1.4;
  text-shadow: 0 1px 16px rgba(40, 55, 90, .35);
}
.hero .link-xl, .room .link-xl { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }

/* ---------- 2. Dining room — the photo is uncovered, then scrolls (see script.js) ---------- */
/* Pure CSS (no JS, so it is perfectly smooth): while the section's top edge is
   below 57% of the window height, the photo stays still and gets uncovered;
   after that it scrolls with the page. Done with a sticky image whose
   "bottom" limit sits 43vh below its own top. */
.room { clip-path: inset(0); }
.room-reveal {
  position: absolute;
  left: 0;
  right: 0;
  top: -100vh;                       /* room for the photo to wait above the section */
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.room-reveal-spacer { height: 100vh; }
.room-img {
  position: sticky;
  bottom: calc(43vh - var(--h) * var(--u));
  display: block;
  width: 100%;
  height: calc(var(--h) * var(--u));
  object-fit: cover;
}

/* ---------- 3. Heritage & Vision ---------- */
.vision { background: #030a09; }
.kicker {
  font-family: var(--font-head);
  font-size: max(11px, calc(12 * var(--u)));
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lavender);
  opacity: .8;
  margin-bottom: calc(14 * var(--u));
}
.h-vision {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: max(30px, calc(54 * var(--u)));
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--lavender);
  margin-bottom: calc(26 * var(--u));
}
.vision-copy p {
  font-size: max(14px, calc(15 * var(--u)));
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.vision-note { margin: calc(26 * var(--u)) 0 calc(34 * var(--u)); padding-left: calc(16 * var(--u)); border-left: 1px solid rgba(185, 192, 218, .35); }
.vision-note strong { display: block; font-family: var(--font-head); font-weight: 600; color: var(--white); }
.card-vision { aspect-ratio: 533 / 548; }

/* ---------- 4. Cellar ---------- */
.h-col {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: max(20px, calc(28 * var(--u)));
  line-height: 1.2;
  margin-bottom: calc(10 * var(--u));
}
.cellar-col { text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.cellar-col p { font-size: max(13px, calc(14 * var(--u))); line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: calc(380 * var(--u)); }
.cellar-col:first-child, .cellar .abs:first-of-type { width: calc(520 * var(--u)); }

/* ---------- 5–6. Events ---------- */
.h-banner {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: max(36px, calc(72 * var(--u)));
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.events .sec-bg { object-position: 50% 0; }   /* cloud panel edge sits right under the banner */
.events::before {                /* keeps white text readable on the bright cloud panel */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 11, .38) 0%, rgba(5, 7, 11, .22) 32%, rgba(5, 7, 11, 0) 45%, rgba(5, 7, 11, 0) 55%, rgba(5, 7, 11, .3) 100%);
}
.ev-text {
  font-size: max(14px, calc(15 * var(--u)));
  line-height: 1.6;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .5);
}
.ev-text strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.15em; margin-bottom: .2em; }
.ev-text.right { text-align: right; }
.ev-text.center { text-align: center; }
.ev-gap { display: block; height: calc(18 * var(--u)); }

.form-row { display: grid; gap: calc(16 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-row label > span {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.form-row em { font-style: normal; opacity: .7; }
.form-row input, .form-row textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  height: max(40px, calc(43 * var(--u)));
  padding: 0 1.25rem;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: rgba(185, 192, 218, .92);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.form-row textarea { height: max(90px, calc(98 * var(--u))); border-radius: 24px; padding: .8rem 1.25rem; resize: vertical; }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(30, 37, 65, .55); }
.form-row input:focus, .form-row textarea:focus { outline: none; background: #fff; border-color: var(--blue-mid); box-shadow: 0 0 0 4px rgba(97, 122, 171, .35); }
.form-row input[aria-invalid="true"] { border-color: #e9a0a0; }
.btn-pill {
  width: 100%;
  height: max(48px, calc(60 * var(--u)));
  border: 0;
  border-radius: 999px;
  background: var(--blue-deep);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn-pill:hover { background: var(--blue-mid); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(69, 93, 144, .9); }
.form-status { min-height: 1.5em; margin-top: .75rem; text-align: center; font-size: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }

/* ---------- 7. Stage ---------- */
.stage { position: relative; height: calc(var(--h) * var(--u)); }
.stage-dark { clip-path: inset(0); }            /* clips the fixed image to this panel */
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* ---------- 8. Menu ---------- */
.menu {
  position: relative;
  z-index: 3;
  min-height: calc(1049 * var(--u));
  background: var(--cream);
  color: var(--navy);
  text-align: center;
  padding: calc(222 * var(--u)) 24px calc(170 * var(--u));
}
.tabs { display: inline-flex; gap: 14px; margin-bottom: calc(40 * var(--u)); }
.tabs button {
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: 400 14px var(--font-body); color: var(--navy); opacity: .75;
  text-underline-offset: 4px;
  transition: opacity .25s;
}
.tabs button:hover { opacity: 1; }
.tabs button[aria-selected="true"] { opacity: 1; text-decoration: underline; }
.h-menu {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: max(26px, calc(38 * var(--u)));
  line-height: 1.2;
  margin-bottom: calc(34 * var(--u));
}
.tab-panel { display: grid; gap: calc(44 * var(--u)); }
.tab-panel[hidden] { display: none; }
.tab-panel:not([hidden]) { animation: panel-in .5s var(--ease) both; }
.dish h3 { font-family: var(--font-head); font-weight: 500; font-size: max(19px, calc(27 * var(--u))); line-height: 1.25; margin-bottom: 6px; }
.dish p { font-size: 13px; line-height: 1.5; color: #3a4160; max-width: 640px; margin-inline: auto; }
.menu-links { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: calc(70 * var(--u)); }
.link-menu { font-size: max(19px, calc(28 * var(--u))); color: var(--blue-deep); }
.link-menu-ro { font-size: 14px; color: var(--blue-deep); text-underline-offset: 3px; }

/* ---------- 9. Reservations ---------- */
.reserve { z-index: 3; }
.reserve-map { height: 100%; background: #222; }           /* full section height */
.reserve-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) invert(.9) contrast(.9) brightness(.95); }
.h-reserve {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: max(36px, calc(72 * var(--u)));
  line-height: 1.1;
  margin-bottom: calc(150 * var(--u));
  text-shadow: 0 2px 20px rgba(40, 55, 90, .35);
}
.reserve-copy address, .reserve-copy .hours { font-size: 14px; line-height: 2; text-shadow: 0 1px 10px rgba(40, 55, 90, .5); }
.reserve-copy a { text-decoration: none; }
.reserve-copy a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-apps { display: block; opacity: .9; }
.reserve-copy .hours { margin-top: calc(34 * var(--u)); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 3;
  height: calc(var(--h) * var(--u));
  background: var(--lavender);
  color: var(--navy);
}
/* Parallax logo (pure CSS, like the original Squarespace footer):
   the logo is sticky to the bottom of the window (8vh above it) and the footer
   clips it, so as the lavender panel slides up it UNVEILS the logo from the
   bottom up while the logo itself stays still. When the panel reaches the
   logo's real place (--y) they scroll on together.
   The sticky layer starts 100vh above the footer so the logo is never pulled
   down to the panel edge; the spacer (::before) — not a margin — sets its
   resting spot, because margins would block the sticky movement. */
.site-footer { clip-path: inset(0); }        /* hides the part of the logo above the panel edge */
.footer-rise {
  position: absolute;
  top: -100vh;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.footer-rise::before {
  content: "";
  display: block;
  height: calc(100vh + var(--y) * var(--u));  /* logo's design spot (--y) inside the footer */
}
.footer-rise .footer-logo {
  position: sticky;
  /* the letters' baseline sits 5vh above the window bottom (the round "O"
     dips 31 design px below the letters), so the first bit of footer that
     scrolls in already shows the bottom of the letters */
  bottom: calc(5vh - 31 * var(--u));
  margin-left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  pointer-events: auto;
}
.footer-logo { display: block; color: var(--navy); transition: color .3s; }
.footer-logo:hover { color: var(--blue-deep); }
.footer-logo svg { display: block; width: 100%; aspect-ratio: 396 / 58; fill: currentColor; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.footer-cols ul { display: grid; justify-items: center; gap: calc(46 * var(--u)); }
.footer-cols a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: max(15px, calc(21 * var(--u)));
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(69, 93, 144, .4);
  transition: color .25s, text-decoration-color .25s;
}
.footer-cols a:hover { color: var(--navy); text-decoration-color: currentColor; }
.footer-legal { font-size: 13px; color: rgba(30, 37, 65, .65); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fade-up  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.js .load-in { animation: fade-up 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * .14s + .1s); }
.js .site-header > * { animation: fade-up .9s var(--ease) both; }

/* ==========================================================================
   Small screens — temporary fallback (the mobile layout will be done next)
   ========================================================================== */
@media (max-width: 1023px) {
  .site-header { padding: 0 20px; }
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: 0; z-index: 110;
    display: flex; align-items: center; padding: 64px 24px 2rem;
    background: var(--blue-deep);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility 0s linear .4s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
  .nav-list { flex-direction: column; gap: 10px; }
  .nav-list a { font-size: 30px; text-transform: none; }
  body.nav-open .site-header { transform: none; }

  .sec, .stage, .site-footer { height: auto; }
  .sec { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 96px 20px; }
  .abs, .track { position: relative; left: auto; top: auto; width: 100%; max-width: 520px; height: auto; }
  .card, .track { width: min(70vw, 300px); }
  .card-vision { width: min(86vw, 420px); }
  .sticky { position: relative; top: auto; }
  .stage { display: block; }
  .stage .sec { min-height: 70vh; }
  .stage .track { position: absolute; left: 50%; top: 20vh; height: calc(100% - 20vh); margin-left: min(-35vw, -150px); }
  .stage .track:nth-of-type(n+4) { display: none; }
  .stage .sticky { position: sticky; top: 20vh; }
  .reserve-map { height: 320px; max-width: none; }
  .h-reserve { margin-bottom: 24px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .site-footer { display: flex; flex-direction: column; gap: 40px; padding: 64px 20px 32px; }
  .footer-logo { max-width: none; }
  .site-footer { clip-path: none; }
  .footer-rise { position: static; padding: 0; }
  .footer-rise::before { display: none; }
  .footer-rise .footer-logo { position: static; margin: 0; width: 100%; }
  .ev-text.right, .ev-text.center { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}