/* ==========================================================================
   La Favola — Midnight Trattoria design system
   ========================================================================== */

@import url('../fonts/fonts.css');

:root{
  /* ---- color: dark, candlelit trattoria. one direction, no flinching ---- */
  --ink:        #14100D;
  --surface:    #1C1610;
  --surface-2:  #241C14;
  --wine:       #6E1F2B;
  --wine-deep:  #3E1119;
  --brass:      #C6A15B;
  --brass-hi:   #E3C179;
  --ivory:      #F3EADB;
  --ivory-dim:  #C9BEAC;
  --taupe:      #8C7B68;
  --line:       rgba(243,234,219,.13);
  --line-strong:rgba(243,234,219,.24);
  --overlay-b:  rgba(15,11,8,.78);
  --overlay-t:  rgba(15,11,8,0);
  --focus:      #E3C179;
  --success:    #7FA87A;
  --error:      #D97B62;

  /* ---- type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:   .78rem;
  --fs-sm:   .9rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.2rem;
  --fs-lg:   clamp(1.97rem, 1.15rem + 3.45vw, 3.45rem);
  --fs-xl:   clamp(1.97rem, 1.15rem + 3.45vw, 3.45rem);
  --fs-2xl:  clamp(1.97rem, 1.15rem + 3.45vw, 3.45rem);

  /* ---- spacing: 4/8pt rhythm ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --container: 1240px;
  --container-narrow: 760px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur: 300ms;
}

/* ---- reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar{ display: none; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button, input, textarea, select{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure{ margin: 0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
main{ display: block; }

::selection{ background: var(--brass); color: var(--ink); }

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

.skip-link{
  position: absolute; left: var(--sp-4); top: -60px;
  background: var(--brass); color: var(--ink); padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; z-index: 200;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top: var(--sp-4); }

/* ---- layout helpers ---- */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.container-narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.overflow-x{ overflow-x: auto; }

section{ position: relative; }
.section-pad{ padding-block: clamp(64px, 9vw, 128px); }
.section-pad-sm{ padding-block: clamp(44px, 6vw, 80px); }

/* ---- eyebrow / headings ---- */
.eyebrow{
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); font-weight: 700; margin-bottom: var(--sp-4);
}
.eyebrow::before{ content:''; width: 22px; height: 1px; background: var(--brass); }
.h-display{ font-size: var(--fs-2xl); line-height: .98; letter-spacing: -.01em; }
.h-display em, .accent-italic{ font-style: italic; font-weight: 500; color: var(--brass-hi); }
.h-section{ font-size: var(--fs-xl); line-height: 1.05; }
.h-sub{ font-size: var(--fs-lg); line-height: 1.15; }
.lede{ font-size: var(--fs-md); color: var(--ivory-dim); line-height: 1.65; max-width: 62ch; }
.body-muted{ color: var(--ivory-dim); }
.small-caps-label{
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}

/* ---- buttons ---- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .95em 1.7em; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--brass); color: var(--ink); }
.btn-primary:hover{ background: var(--brass-hi); }
.btn-ghost{ background: transparent; color: var(--ivory); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass-hi); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

/* ---- header / nav ---- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--sp-5);
  background: linear-gradient(to bottom, rgba(15,11,8,.55), transparent);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(20,16,13,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-block: var(--sp-3);
  border-bottom-color: var(--line);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }

.wordmark{ display: inline-flex; align-items: center; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); color: var(--ivory); letter-spacing: -.01em; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease); }
.wordmark:hover{ opacity: .82; }
.wordmark span{ color: var(--brass-hi); }
.wordmark img{ display: block; width: auto; max-width: none; flex-shrink: 0; }
.wordmark-nav img{ height: 56px; }
.wordmark-footer img{ height: 128px; }
@media (min-width: 560px){ .wordmark-nav img{ height: 72px; } }

.nav-desktop{ display: none; }
.nav-desktop ul{ display: flex; align-items: center; gap: clamp(1rem, 1.6vw, var(--sp-6)); flex-wrap: nowrap; }
.nav-desktop a{
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--ivory-dim); position: relative; padding-block: var(--sp-1); white-space: nowrap;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{ color: var(--brass-hi); }
.nav-desktop a[aria-current="page"]::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--brass);
}

.nav-right{ display: flex; align-items: center; gap: var(--sp-5); }
.nav-right > .lang-switch, .nav-right > .btn-primary{ display: none; }

.lang-switch{ display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); letter-spacing: .06em; }
.lang-switch a{ color: var(--taupe); font-weight: 700; padding: var(--sp-1); }
.lang-switch a[aria-current="true"]{ color: var(--brass-hi); }
.lang-switch a:hover{ color: var(--ivory); }
.lang-switch .sep{ color: var(--line-strong); }

.nav-toggle{
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span{ display: block; width: 18px; height: 1px; background: var(--ivory); margin-inline: auto; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.nav-mobile{
  position: fixed; inset: 0; z-index: 99; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; padding: var(--sp-8) clamp(20px,6vw,56px);
  transform: translateY(-100%); transition: transform var(--dur) var(--ease);
  visibility: hidden;
}
.nav-mobile.is-open{ transform: translateY(0); visibility: visible; }
.nav-mobile ul{ display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-8); }
.nav-mobile ul a{ font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); font-style: italic; color: var(--ivory); }
.nav-mobile ul a[aria-current="page"]{ color: var(--brass-hi); }
.nav-mobile .lang-switch{ font-size: var(--fs-sm); gap: var(--sp-3); }
.nav-mobile-foot{ display: flex; flex-direction: column; gap: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-6); }

@media (min-width: 1180px){
  .nav-desktop{ display: block; }
  .nav-toggle{ display: none; }
  .nav-right > .lang-switch{ display: flex; }
  .nav-right > .btn-primary{ display: inline-flex; }
}

/* ---- hero ---- */
.hero{
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; color: var(--ivory);
}
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transform: scale(1.06); }
@media (max-width: 700px){
  .menu-hero-media img{ object-position: 20% 38%; }
}
.hero-media::after{
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(20,16,13,.35) 46%, rgba(20,16,13,.55) 100%),
    linear-gradient(to right, rgba(20,16,13,.35), transparent 60%);
}
.hero-content{ position: relative; z-index: 1; padding-block: clamp(120px, 20vw, 180px) clamp(56px, 8vw, 96px); width: 100%; }
.hero:not(.page-hero) .hero-content{ padding-block: clamp(200px, 30vw, 340px) clamp(40px, 6vw, 64px); }
.hero:not(.page-hero) .h-display{ font-size: clamp(1.97rem, 1.15rem + 3.45vw, 3.45rem); }
.hero:not(.page-hero) .hero-tagline{ font-size: .92rem; max-width: 38ch; }
.hero-tagline{ font-size: var(--fs-md); color: var(--ivory-dim); max-width: 46ch; margin-top: var(--sp-5); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }
.hero-meta-band{ background: var(--ink); }
.hero-meta{ display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-block: var(--sp-6); }
.hero-meta-item{ display: flex; flex-direction: column; gap: var(--sp-1); }
.hero-meta-item .num{ font-family: var(--font-display); font-size: 1.4rem; color: var(--brass-hi); font-style: italic; }
.hero-meta-item .lbl{ font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); }

/* page hero (non-home) — shorter */
.page-hero{ min-height: 62svh; }
.page-hero .hero-content{ padding-block: clamp(120px,18vw,160px) clamp(48px,6vw,72px); }

/* ---- generic section header ---- */
.section-head{ max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before{ display: none; }

/* ---- price badge (student-friendly signal) ---- */
.price-strip{
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6);
}
.price-chip{
  display: flex; align-items: baseline; gap: var(--sp-2);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm); color: var(--ivory-dim);
}
.price-chip b{ font-family: var(--font-display); color: var(--brass-hi); font-size: 1.05em; }

/* ---- dish grid (home teaser) ---- */
.dish-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.dish-card{ display: flex; flex-direction: column; gap: var(--sp-4); }
.dish-card .frame{ aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.dish-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.dish-card:hover img{ transform: scale(1.06); }
.dish-card h3{ font-size: 1.15rem; font-weight: 600; }
.dish-card .desc{ font-size: var(--fs-sm); color: var(--ivory-dim); line-height: 1.55; }
.dish-card .price, .split .price{ font-family: var(--font-display); font-style: italic; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
@media (max-width: 980px){ .dish-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .dish-grid{ grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

/* ---- instagram grid + reel (home teaser) ---- */
.ig-showcase{ display: grid; grid-template-columns: 1fr 260px; gap: var(--sp-6); align-items: start; margin-top: var(--sp-7); }
.ig-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ig-tile{ position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius); display: block; background: var(--surface); }
.ig-tile img, .ig-tile video{ width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ig-tile:hover img, .ig-tile:hover video{ transform: scale(1.08); }
.ig-tile::after{ content: ""; position: absolute; inset: 0; background: rgba(20,16,13,.35); opacity: 0; transition: opacity 250ms var(--ease); }
.ig-tile:hover::after{ opacity: 1; }
.ig-tile .ig-icon{ position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; color: var(--ivory); opacity: 0; transition: opacity 250ms var(--ease); }
.ig-tile:hover .ig-icon{ opacity: 1; }
.ig-reel-embed{ aspect-ratio: 9/16; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ig-reel-embed video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-cta{ display: flex; justify-content: center; margin-top: var(--sp-6); }
@media (max-width: 860px){ .ig-showcase{ grid-template-columns: 1fr; } .ig-reel-embed{ max-width: 260px; margin-inline: auto; } }
@media (max-width: 560px){ .ig-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } }

/* ---- split (image + text) ---- */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split > *{ min-width: 0; }
.split .frame{ border-radius: var(--radius); overflow: hidden; }
.split .frame img{ width: 100%; height: 100%; object-fit: cover; }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
  .split.reverse{ direction: ltr; }
}
.split .frame.tall{ aspect-ratio: 4/5; }
.split .frame.wide{ aspect-ratio: 16/11; }

/* ---- trust strip ---- */
.trust-strip{
  display: flex; flex-wrap: wrap; row-gap: var(--sp-3); column-gap: clamp(24px, 5vw, 64px); justify-content: center;
  padding-block: var(--sp-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-item{ display: flex; align-items: center; gap: var(--sp-3); color: var(--ivory-dim); font-size: var(--fs-sm); }
.trust-break{ flex-basis: 100%; height: 0; }
.trust-item svg{ width: 20px; height: 20px; color: var(--brass); flex-shrink: 0; }

/* ---- menu ---- */
.menu-tabs{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: clamp(32px,5vw,56px); }
.menu-tab{
  padding: var(--sp-2) var(--sp-5); border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-sm); letter-spacing: .04em; color: var(--ivory-dim);
}
.menu-tab[aria-current="true"]{ border-color: var(--brass); color: var(--brass-hi); }
.menu-tab:hover{ color: var(--ivory); border-color: var(--line-strong); }

.menu-category{ padding-block: clamp(40px,6vw,64px); border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.menu-category:last-of-type{ padding-bottom: 0; }
.menu-category:first-of-type{ border-top: none; }
.menu-category-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.menu-category-head h2{ font-size: var(--fs-lg); font-style: italic; font-weight: 500; }
.menu-category-note{ font-size: var(--fs-sm); color: var(--taupe); }

.menu-visual-mobile{ margin-bottom: var(--sp-6); }
.menu-visual-desktop{ display: none; }
.menu-thumbs{ gap: var(--sp-4); }
.menu-thumb{ flex: 1 1 0; aspect-ratio: 4/5; min-width: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: none; padding: 0; cursor: pointer; display: block; }
.menu-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease); }
.menu-thumb:hover img, .menu-thumb:focus-visible img{ transform: scale(1.09); }
.menu-thumb:focus-visible{ outline: 2px solid var(--brass-hi); outline-offset: 2px; }

/* ---- lightbox ---- */
.lightbox{ position: fixed; inset: 0; z-index: 200; background: rgba(10,8,6,.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); }
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox-stage{ width: min(85vw, 820px); aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.lightbox-stage img{ width: 100%; height: 100%; object-fit: cover; }
.lightbox-btn{ position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(20,16,13,.6); color: var(--ivory); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lightbox-btn:hover{ background: var(--surface); border-color: var(--brass-hi); }
.lightbox-close{ top: clamp(16px,3vw,32px); right: clamp(16px,3vw,32px); }
.lightbox-prev{ left: clamp(8px,2vw,32px); top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: clamp(8px,2vw,32px); top: 50%; transform: translateY(-50%); }
@media (max-width: 700px){ .lightbox-stage{ width: 92vw; } .lightbox-prev{ left: 8px; } .lightbox-next{ right: 8px; } }
@media (min-width: 780px){
  .menu-visual-mobile{ display: none; }
  .menu-visual-desktop{ display: flex; margin-bottom: var(--sp-6); }
}

.menu-list{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-8); }
@media (max-width: 780px){ .menu-list{ grid-template-columns: 1fr; } }

.menu-item{ display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--line); }
.menu-item-row{ display: flex; align-items: baseline; gap: var(--sp-3); }
.menu-item-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.menu-item-leader{ flex: 1; border-bottom: 1px dotted var(--line-strong); height: 1px; margin-bottom: .35em; }
.menu-item-price{ font-variant-numeric: tabular-nums; color: var(--brass-hi); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.menu-item-desc{ font-size: var(--fs-sm); color: var(--ivory-dim); line-height: 1.5; }
.menu-item-tag{
  display: inline-block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--success); border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; margin-left: var(--sp-2);
}

.menu-callout{
  margin-top: clamp(48px,6vw,72px); padding: clamp(28px,4vw,44px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; justify-content: space-between;
}

/* ---- reservations form ---- */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field{ display: flex; flex-direction: column; gap: var(--sp-2); }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-dim); font-weight: 700; }
.field input, .field select, .field textarea{
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: .85em 1em; font-size: var(--fs-base); color: var(--ivory);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--taupe); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brass); outline: none; background: var(--surface-2); }
.field textarea{ resize: vertical; min-height: 110px; }
.field-hint{ font-size: var(--fs-sm); line-height: 1.5; color: var(--taupe); }
.form-foot{ display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap: wrap; }
.form-note{ font-size: var(--fs-xs); color: var(--taupe); max-width: 40ch; }
.form-status{ font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); display: none; }
.form-status.is-visible{ display: block; }
.form-status.ok{ background: rgba(127,168,122,.12); color: var(--success); border: 1px solid rgba(127,168,122,.4); }
.form-status.err{ background: rgba(217,123,98,.12); color: var(--error); border: 1px solid rgba(217,123,98,.4); }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---- venue grid (spaces & events hub) ---- */
.venue-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.venue-tile{ position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.venue-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.venue-tile:hover img, .venue-tile:focus-visible img{ transform: scale(1.06); }
.venue-tile::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,9,.85) 0%, rgba(15,12,9,.15) 45%, rgba(15,12,9,0) 65%); }
.venue-tile-label{ position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px,3vw,28px); z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.venue-tile-label h3{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); color: var(--ivory); }
.venue-tile-label span{ display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi); margin-top: .3em; }
.venue-tile-arrow{ flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(243,234,219,.4); display: inline-flex; align-items: center; justify-content: center; color: var(--ivory); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.venue-tile-arrow svg{ width: 18px; height: 18px; }
.venue-tile:hover .venue-tile-arrow, .venue-tile:focus-visible .venue-tile-arrow{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
.venue-tile.is-soon::before{ content: attr(data-soon-label); position: absolute; top: clamp(14px,2.5vw,22px); left: clamp(14px,2.5vw,22px); z-index: 1; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink); background: var(--brass-hi); padding: .4em .9em; border-radius: 999px; }
.venue-tile.span-2{ grid-column: 1 / -1; aspect-ratio: 21/9; }
@media (max-width: 700px){ .venue-grid{ grid-template-columns: 1fr; } .venue-tile.span-2{ aspect-ratio: 4/3; } }

/* ---- space detail page ---- */
.space-hero{ position: relative; min-height: 56vh; display: flex; align-items: flex-end; overflow: hidden; color: var(--ivory); }
.space-hero .hero-media{ position: absolute; inset: 0; }
.space-hero .hero-media img{ width: 100%; height: 100%; object-fit: cover; }
.space-hero .hero-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,9,.92) 0%, rgba(15,12,9,.35) 55%, rgba(15,12,9,.15) 100%); }
.space-hero .container{ position: relative; z-index: 1; padding-block: clamp(32px,6vw,56px); }
.space-facts{ display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-5); }
.space-fact{ display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ivory-dim); }
.space-fact svg{ width: 18px; height: 18px; color: var(--brass); flex-shrink: 0; }

.space-gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.space-gallery-note{ text-align: center; padding: clamp(32px,5vw,48px); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--taupe); font-size: var(--fs-sm); }

/* ---- booking form contact options ---- */
.booking-alt{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.booking-alt-btn{ flex: 1 1 220px; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.booking-alt-btn:hover{ border-color: var(--brass); background: var(--surface-2); }
.booking-alt-btn .icon{ width: 42px; height: 42px; border-radius: 50%; background: rgba(198,161,91,.14); color: var(--brass-hi); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.booking-alt-btn .icon svg{ width: 20px; height: 20px; }
.booking-alt-btn strong{ display: block; font-size: var(--fs-sm); color: var(--ivory); }
.booking-alt-btn span{ display: block; font-size: var(--fs-xs); color: var(--taupe); margin-top: .2em; }

.booking-embed{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(12px, 2vw, 20px); overflow: hidden; }


/* ---- info cards (contact) ---- */
.info-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.info-card{ padding: clamp(24px,3vw,32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.info-card .icon{ color: var(--brass); width: 26px; height: 26px; margin-bottom: var(--sp-4); }
.info-card h3{ font-size: 1rem; margin-bottom: var(--sp-3); letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; }
.info-card a{ color: var(--ivory-dim); }
.info-card a:hover{ color: var(--brass-hi); }
@media (max-width: 860px){ .info-grid{ grid-template-columns: 1fr; } }

.hours-table{ width: 100%; border-collapse: collapse; }
.hours-table td{ padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.hours-table td:first-child{ color: var(--ivory-dim); }
.hours-table td:last-child{ text-align: right; font-variant-numeric: tabular-nums; color: var(--ivory); }
.hours-table tr.closed td:last-child{ color: var(--taupe); }

.map-frame{ border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); filter: grayscale(.25) sepia(.15) brightness(.85); }
.map-frame iframe{ width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---- footer ---- */
.site-footer{ background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(56px,7vw,88px) var(--sp-6); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-8); }
.footer-brand p{ color: var(--ivory-dim); font-size: var(--fs-sm); margin-top: var(--sp-4); max-width: 32ch; }
.footer-social{ display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a{ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ivory-dim); transition: color 200ms, border-color 200ms; }
.footer-social a:hover{ color: var(--brass-hi); border-color: var(--brass-hi); }
.footer-social svg{ width: 16px; height: 16px; }
.footer-col h4{ font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); margin-bottom: var(--sp-4); font-family: var(--font-body); font-weight: 700; }
.footer-col ul{ display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a{ color: var(--ivory-dim); font-size: var(--fs-sm); }
.footer-col a:hover{ color: var(--brass-hi); }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--taupe); }
.footer-bottom .lang-switch{ order: 2; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---- motion hooks (GSAP targets; CSS gives sane pre-JS state) ---- */
.reveal{ opacity: 0; transform: translateY(28px); }
.reveal-fade{ opacity: 0; }
.reveal-scale img{ transform: scale(1.08); }
.js-ready .reveal, .js-ready .reveal-fade{ will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-fade{ opacity: 1 !important; transform: none !important; }
}
.no-js .reveal, .no-js .reveal-fade{ opacity: 1; transform: none; }

/* ---- scroll-to-top button ---- */
.scroll-top-btn{
  position: fixed; left: clamp(14px,2.5vw,24px); bottom: clamp(14px,2.5vw,24px); z-index: 150;
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ivory-dim); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.scroll-top-btn svg{ width: 12px; height: 12px; }
.scroll-top-btn.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover, .scroll-top-btn:focus-visible{ border-color: var(--brass-hi); color: var(--brass-hi); }

/* ---- floating booking button ---- */
.book-fab{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: #c6a15b; color: #14100d;
  font-family: var(--font-body, inherit); font-weight: 600; font-size: 15px;
  padding: 14px 24px; text-decoration: none;
  box-sizing: border-box; border: 3px solid transparent; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  animation: badge-jump 8s ease-in-out infinite;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.book-fab:hover, .book-fab:focus-visible, .book-fab:active{
  animation-play-state: paused;
  transform: translateY(0) !important;
  background-color: #ffffff !important;
  border-color: #ffffff;
}
@keyframes badge-jump{
  0%, 86%, 100%{ transform: translateY(0); background-color: #c6a15b; }
  89%{ transform: translateY(-13px); background-color: #ffffff; }
  91%{ transform: translateY(0); background-color: #c6a15b; }
  93%{ transform: translateY(-13px); background-color: #ffffff; }
  95%{ transform: translateY(0); background-color: #c6a15b; }
}
@media (prefers-reduced-motion: reduce){
  .book-fab{ animation: none; }
}

/* ---- booking widget ---- */
.bk{ min-height: 560px; }
.bk-step{ margin-bottom: 1.6rem; }
.bk-label{ display:block; font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color:#8a6a24; margin-bottom: .7rem; }
.bk-party{ display:flex; flex-wrap:wrap; gap:8px; }
.bk-chip{ min-width:44px; height:44px; padding:0 14px; border-radius:999px; border:1px solid #d8c9ac; background:transparent; color:#2a2018; font:inherit; cursor:pointer; transition: all .15s; }
.bk-chip:hover{ border-color: var(--brass-hi); }
.bk-chip[aria-pressed="true"], .bk-chip.is-sel{ background:#c6a15b; border-color:#c6a15b; color:#14100d; font-weight:600; }
.bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.bk-cal-title{ font-family: var(--font-display, serif); font-size: 1.25rem; text-transform: capitalize; }
.bk-nav{ width:38px; height:38px; border-radius:50%; border:1px solid #d8c9ac; background:transparent; color:inherit; cursor:pointer; display:grid; place-items:center; }
.bk-nav:hover:not(:disabled){ border-color: var(--brass-hi); }
.bk-nav:disabled{ opacity:.3; cursor:default; }
.bk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.bk-dow{ text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#7d6c55; padding-bottom:4px; }
.bk-day{ aspect-ratio:1; border-radius:50%; border:0; background:transparent; color:#b9ab93; font:inherit; font-size:14px; display:grid; place-items:center; cursor:default; position:relative; }
.bk-day.is-open{ color:#7a5a1c; background:rgba(198,161,91,.22); cursor:pointer; font-weight:600; }
.bk-day.is-open:hover{ background:rgba(198,161,91,.3); }
.bk-day.is-full{ text-decoration: line-through; }
.bk-day.is-sel{ background:#c6a15b; color:#14100d; }
.bk-day.is-today::after{ content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:currentColor; }
.bk-legend{ font-size:12px; color:#7d6c55; margin-top:.8rem; }
.bk-slots h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7d6c55; margin:1rem 0 .5rem; font-weight:500; }
.bk-slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.bk-slot{ padding:12px 0; border-radius:10px; border:1px solid #c6a15b; background:transparent; color:#7a5a1c; font:inherit; font-weight:600; cursor:pointer; transition:all .15s; }
.bk-slot:hover{ background:#c6a15b; color:#14100d; }
.bk-slot.is-sel{ background:#c6a15b; color:#14100d; }
.bk-summary{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid #d8c9ac; border-radius:12px; margin-bottom:1.4rem; background:rgba(198,161,91,.06); }
.bk-summary b{ color:#6b4d12; font-weight:600; }
.bk-link{ background:none; border:0; color:#8a6a24; text-decoration:underline; cursor:pointer; font:inherit; padding:0; }
.bk-form{ display:grid; gap:14px; }
.bk-form label{ display:grid; gap:6px; font-size:13px; color:#4a3d2d; }
.bk-form input, .bk-form textarea{ background:#fffaf0; border:1px solid #d8c9ac; border-radius:10px; padding:12px 14px; color:#2a2018; font:inherit; font-size:16px; }
.bk-form input:focus, .bk-form textarea:focus{ outline:none; border-color:#c6a15b; }
.bk-form .bk-hp{ position:absolute; left:-9999px; opacity:0; height:0; }
.bk-consent{ display:flex !important; grid-template-columns:none; gap:10px; align-items:flex-start; font-size:12px !important; color:#7d6c55 !important; }
.bk-consent input{ margin-top:3px; }
.bk-err{ color:#a3261f; font-size:14px; min-height:1em; }
.bk-btn{ background:#c6a15b; color:#14100d; border:0; border-radius:999px; padding:14px 26px; font:inherit; font-weight:600; cursor:pointer; }
.bk-btn:hover:not(:disabled){ background:#b78f45; }
.bk-btn:disabled{ opacity:.6; cursor:default; }
.bk-btn.ghost{ background:transparent; border:1px solid #8a6a24; color:#6b4d12; }
.bk-done{ text-align:center; padding:1rem 0; }
.bk-check{ width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:#c6a15b; color:#14100d; display:grid; place-items:center; font-size:32px; animation: bk-pop .4s ease; }
@keyframes bk-pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.bk-done h3{ font-family: var(--font-display, serif); font-size:1.7rem; margin:0 0 .5rem; }
.bk-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:1.4rem; }
.bk-loading{ opacity:.5; pointer-events:none; }

.booking-embed:has(.bk){ background:#f3eadb; border-color:#d8c9ac; color:#2a2018; }
.booking-embed .body-muted{ color:#6d5c45; }
.booking-embed .bk-btn.ghost:hover{ background:rgba(198,161,91,.2); }
.bk-day.is-sel{ background:#c6a15b !important; color:#14100d !important; }
.bk-slot:hover, .bk-slot.is-sel{ background:#c6a15b; color:#14100d; }

/* ---- misc ---- */
.divider{ height: 1px; background: var(--line); border: 0; margin-block: 0; }
.badge-new{ color: var(--brass-hi); }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* responsive type/layout tune at breakpoints (375 / 768 / 1024 / 1440) */
@media (max-width: 700px){
  .section-pad{ padding-block: clamp(48px, 12vw, 80px); }
}