:root {
  --bg: #0c0a08;
  --bg-raised: #19140d;
  --ivory: #f7f1e6;
  --ivory-muted: #a89a86;
  --orange: #f1591f;
  --orange-hover: #ff7038;
  --gold: #d9a94f;
  --border: rgba(247, 241, 230, 0.12);
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Golos Text', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Class-level display rules would otherwise beat the UA stylesheet and leave
   [hidden] elements visible. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ivory); font-family: var(--font-body); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.center { text-align: center; }
.muted { color: var(--ivory-muted); font-size: 14px; }

/* Reveal-on-scroll — progressive enhancement: content is visible by default and
   only starts hidden once script.js confirms it can animate it back in. */
html.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js-reveal .reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal,
  html.js-reveal .gallery-item,
  html.js-reveal #gallery .gallery-item { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  html.js-reveal .gallery-item img { transform: none; transition: none; }
  /* The layer stays, but flat against its frame and never moved by the script. */
  #food .gallery-par { top: 0; height: 100%; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(12,10,8,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.brand-logo.small { width: 32px; height: 32px; }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; color: var(--orange); }
.wordmark.small { font-size: 15px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a:not(.nav-cta) { position: relative; padding-bottom: 4px; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--gold); transition: width 0.25s ease;
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  border: none; background: var(--orange); color: var(--bg) !important;
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 13px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav-cta:hover { background: var(--gold); transform: translateY(-1px); }

.lang-switch { display: flex; gap: 3px; margin-left: 4px; background: var(--bg-raised); padding: 3px; border-radius: 999px; border: 1px solid var(--border); }
.lang-btn {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  background: transparent; border: none; color: var(--ivory-muted);
  padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease;
}
.lang-btn.active { color: var(--bg); background: var(--gold); }
.lang-btn:hover:not(.active) { color: var(--gold); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ivory); border-radius: 2px; }

/* Hero */
.hero { position: relative; padding: 90px 24px 80px; max-width: 1160px; margin: 0 auto; overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0; z-index: 0; border-radius: 0 0 32px 32px;
  background: radial-gradient(ellipse at top right, rgba(241,89,31,0.28), transparent 60%),
              radial-gradient(ellipse at bottom left, rgba(217,169,79,0.16), transparent 55%),
              var(--bg);
  opacity: 0.95;
}
.hero-inner { position: relative; z-index: 1; max-width: 680px; }
.hero-logo { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 26px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em;
  font-size: clamp(38px, 7vw, 72px); line-height: 1; margin: 12px 0 26px;
  text-transform: uppercase;
}
.hero-sub { font-size: 17px; color: var(--ivory-muted); max-width: 500px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 15px 28px; border-radius: 999px; font-size: 14px; font-weight: 700; font-family: var(--font-display); border: 2px solid transparent; transition: all 0.2s ease; cursor: pointer; }
.btn-primary { background: var(--orange); color: var(--bg); }
.btn-primary:hover { background: var(--orange-hover); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(0.97); }
.btn-ghost { border-color: var(--border); color: var(--ivory); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* Visit */
.visit { padding: 70px 24px 90px; max-width: 1160px; margin: 0 auto; }
.visit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.visit-card {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 20px;
  padding: 32px; transition: border-color 0.25s ease, transform 0.25s ease;
}
.visit-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.visit-label {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 8px;
}
.hours-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.map-link {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid transparent;
}
.map-link:hover { border-bottom-color: var(--gold); }
.footer-legal { text-align: right; line-height: 1.6; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 28px 24px; }
.footer-inner { max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 12px; }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--bg);
    border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch;
    padding: 16px 24px; gap: 16px; display: none;
  }
  .nav-links.open { display: flex; }
  .lang-switch { align-self: flex-start; margin-left: 0; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-legal { text-align: center; }
}

.hours-list .hours-row:last-child { border-bottom: none; }
.open-badge {
  display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px;
  vertical-align: middle; margin-left: 6px;
}
.open-badge.is-open { color: #8bbf6b; background: rgba(139, 191, 107, 0.14); }
.open-badge.is-closed { color: var(--ivory-muted); background: rgba(247, 241, 230, 0.08); }

/* Legal pages */
.legal { max-width: 780px; margin: 0 auto; padding: 60px 24px 90px; }
.legal h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 8px; }
.legal-updated { color: var(--ivory-muted); font-size: 13px; margin-bottom: 28px; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 34px 0 12px; color: var(--gold); }
.legal p, .legal li { font-size: 15px; line-height: 1.65; color: var(--ivory); }
.legal ul { margin: 10px 0 10px 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--gold); text-decoration: underline; }
.legal-callout {
  background: rgba(241, 89, 31, 0.1); border: 1px solid rgba(241, 89, 31, 0.35);
  border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.6; margin-bottom: 12px;
}
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table th { color: var(--gold); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Privacy line under the forms */
.privacy-note { font-size: 12.5px; color: var(--ivory-muted); line-height: 1.55; margin-top: 2px; }
.privacy-note a { color: var(--gold); text-decoration: underline; }

/* Honeypot: hidden from people, tempting to bots. */

@media (max-width: 720px) {
}

.section-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: clamp(28px, 4.5vw, 42px); margin-bottom: 14px;
}

/* Hero status line */
.hero-status { display: flex; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.hero-status-text { font-size: 13px; color: var(--ivory-muted); }

/* Open / closed badge */
.open-badge {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 4px 11px; border-radius: 999px;
}
.open-badge.is-open { color: #8bbf6b; background: rgba(139, 191, 107, 0.14); }
.open-badge.is-closed { color: var(--ivory-muted); background: rgba(247, 241, 230, 0.08); }

/* About */
.about { padding: 80px 24px 40px; max-width: 1160px; margin: 0 auto; }
.about-body { max-width: 620px; margin: 0 auto 46px; color: var(--ivory-muted); font-size: 16px; }
.about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.about-card {
  background: var(--bg-raised); border: 1px solid var(--border); border-top: 3px solid var(--orange);
  border-radius: 18px; padding: 28px 26px; transition: border-color 0.25s ease, transform 0.25s ease;
}
.about-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.about-card h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.03em; margin-bottom: 10px;
}
.about-card p { font-size: 14px; color: var(--ivory-muted); line-height: 1.6; }

/* Menu */
.menu-section { padding: 80px 24px 40px; max-width: 900px; margin: 0 auto; }
.menu-sub { max-width: 520px; margin: 0 auto 26px; color: var(--ivory-muted); font-size: 14.5px; }

.printed-links {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: center; margin-bottom: 34px; font-size: 12.5px;
}
.printed-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold);
}
.printed-links a { color: var(--ivory-muted); border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.printed-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.menu-toolbar { margin-bottom: 14px; }
.menu-search {
  width: 100%; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 16px; color: var(--ivory);
  font-family: var(--font-body); font-size: 14px;
}
.menu-search:focus { outline: none; border-color: var(--gold); }

.cat-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 16px;
  position: sticky; top: 66px; z-index: 5; background: var(--bg);
  scrollbar-width: none; -ms-overflow-style: none;
}
.cat-chips::-webkit-scrollbar { height: 0; display: none; }
.cat-chip {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--border);
  color: var(--ivory-muted); padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all 0.2s ease;
}
.cat-chip:hover { border-color: var(--gold); color: var(--gold); }
.cat-chip.active { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.menu-group { margin-bottom: 40px; }
.menu-group-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: 0.05em; color: var(--gold);
  margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.menu-items { display: grid; }

.item-row {
  display: flex; gap: 22px; justify-content: space-between; align-items: baseline;
  padding: 15px 4px; border-bottom: 1px solid rgba(247, 241, 230, 0.06);
}
.item-row:last-child { border-bottom: none; }
.item-main { min-width: 0; }
.item-title { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.item-no { color: var(--ivory-muted); font-weight: 500; }
.item-desc { font-size: 13px; color: var(--ivory-muted); margin-top: 5px; line-height: 1.55; }
/* Heat, shown as chillies rather than a SPICY badge, matching the printed menu.
   letter-spacing pulls the emoji together so two read as a pair, not two words.
   The emoji font is asked for explicitly, with a red fallback colour: on a
   device with no emoji font the pepper is drawn from a text font, and would
   otherwise inherit the muted grey of the surrounding type. */
.item-heat {
  font-size: 12.5px; letter-spacing: -0.5px; white-space: nowrap;
  margin-left: 5px; vertical-align: 1px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", sans-serif;
  color: #e2452b;
}

.item-price {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--gold); white-space: nowrap; text-align: right; flex: 0 0 auto;
}
.item-price .variant { display: block; font-size: 13px; }
.item-price .variant em {
  font-style: normal; font-family: var(--font-body); font-weight: 500;
  color: var(--ivory-muted); margin-right: 8px;
}

.addon-note {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 16px; margin-top: 14px; font-size: 12.5px; line-height: 1.6;
}
.addon-note strong {
  display: block; font-family: var(--font-display); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 4px;
}
.addon-note span { color: var(--ivory-muted); }

.no-results { text-align: center; color: var(--ivory-muted); padding: 40px 0; }

/* Visit */
.visit-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.visit-card p { font-size: 15px; line-height: 1.6; }
.visit-card a:hover { color: var(--gold); }
.hours-status { margin-top: 14px; }
.hours-list .hours-row:last-child { border-bottom: none; }

@media (max-width: 860px) {
  .about-cards, .visit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .item-row { flex-direction: column; gap: 6px; }
  .item-price { text-align: left; }
  .item-price .variant { display: inline-block; margin-right: 16px; }
}

/* Legal page */
.legal { max-width: 720px; margin: 0 auto; padding: 60px 24px 90px; }
.legal h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 8px; }
.legal-updated { color: var(--ivory-muted); font-size: 13px; margin-bottom: 30px; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 32px 0 10px; color: var(--gold); }
.legal p { font-size: 15px; line-height: 1.7; }
.legal a { color: var(--gold); text-decoration: underline; }

/* Phone number on the call button — tel: links do nothing on a desktop
   browser, so the number itself is shown where there's room for it. */
.tel-number { display: none; }
@media (min-width: 720px) {
  .btn-ghost .tel-number {
    display: inline; margin-left: 10px; padding-left: 10px;
    border-left: 1px solid var(--border);
    font-family: var(--font-body); font-weight: 500; color: var(--ivory-muted);
  }
  .btn-ghost:hover .tel-number { color: inherit; border-left-color: currentColor; }
}

/* Map */
.map-box {
  margin-top: 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
  aspect-ratio: 4 / 3;
}
.map-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-load {
  width: 100%; height: 100%; background: none; border: none; cursor: pointer;
  color: var(--ivory); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(217, 169, 79, 0.12), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(241, 89, 31, 0.12), transparent 60%);
  transition: background-color 0.2s ease;
}
.map-load:hover { background-color: rgba(247, 241, 230, 0.04); }
.map-load .map-pin { font-size: 26px; }
.map-load small {
  font-family: var(--font-body); font-weight: 400; font-size: 11.5px;
  color: var(--ivory-muted);
}

/* Collapsible categories in the "All" view */
.menu-group > summary.menu-group-title {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; user-select: none;
  transition: color 0.2s ease;
}
.menu-group > summary.menu-group-title::-webkit-details-marker { display: none; }
.menu-group > summary.menu-group-title:hover { color: var(--orange-hover); }
.menu-group > summary.menu-group-title > span:first-child { flex: 1; }

.group-count {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  color: var(--ivory-muted); background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}

/* Chevron, rotating when the category is open */
.menu-group > summary.menu-group-title::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  /* Turns at the same pace as the panel below it, so they read as one motion. */
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-group[open] > summary.menu-group-title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
/* Expanded categories (a single category, or search results) aren't clickable. */
.menu-group[open] .menu-items { padding-top: 4px; }

/* Opening and closing a category.
 *
 * A closed <details> is hidden by a low-specificity browser rule, which our own
 * .menu-items { display: grid } overrides — so the contents have to be hidden
 * here explicitly. This is the resting state only: the movement between the two
 * states is run from script.js.
 *
 * It cannot be done in CSS. A closed <details> has its subtree locked by the
 * browser (content-visibility on ::details-content), so the moment `open` goes
 * away the content stops being laid out and any transition on it is skipped —
 * the category would ease open and then snap shut. script.js keeps the element
 * open until the closing animation has finished, and removes `open` after. */
.menu-group:not([open]) > .menu-group-body { display: none; }
}

/* Instagram — the icon is inline SVG, so no request goes to any third party */
.social-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 13.5px; color: var(--ivory-muted); transition: color 0.2s ease;
}
.social-link:hover { color: var(--gold); }
.social-icon {
  width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
.social-icon .dot { fill: currentColor; stroke: none; }
.footer-social { margin-top: 0; }

/* About copy */
.about-body { max-width: 660px; margin: 0 auto 30px; }
.about-body p { color: var(--ivory-muted); font-size: 15.5px; line-height: 1.75; margin-bottom: 16px; }
.about-body p:last-child { margin-bottom: 0; }
.about-tagline {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--ivory) !important; letter-spacing: 0.01em; padding-top: 8px;
}

/* Restaurant Guru awards */
.awards {
  max-width: 660px; margin: 0 auto 46px; padding-top: 26px;
  border-top: 1px solid var(--border); text-align: center;
}
.awards-label {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 18px;
}
.award-list { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.award {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 20px; flex: 0 1 auto;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.award:hover { border-color: var(--gold); transform: translateY(-2px); }
.award-star { width: 26px; height: 26px; flex: 0 0 auto; fill: var(--orange); }
.award-text { display: flex; flex-direction: column; gap: 2px; }
.award-text strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; max-width: 260px; }
.award-text small { font-size: 11.5px; color: var(--ivory-muted); }

@media (max-width: 600px) {
  .award { width: 100%; }
  .award-text strong { max-width: none; }
}

/* Award badges are links to the certificates */
a.award { position: relative; padding-right: 22px; }
.award-view {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 0; color: var(--gold);
}
.award-view::after {
  content: "↗"; font-size: 15px; opacity: 0.5; transition: opacity 0.2s ease;
}
a.award:hover .award-view::after { opacity: 1; }

/* ---- Contact ---- */
.nav-contact {
  background: none; border: 1px solid var(--border); color: var(--ivory);
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.nav-contact:hover { border-color: var(--gold); color: var(--gold); }
.contact-cta { margin-top: 16px; padding: 12px 22px; font-size: 13px; }

.contact-modal { position: fixed; inset: 0; z-index: 130; }
.contact-backdrop { position: absolute; inset: 0; background: rgba(6, 5, 4, 0.9); }
.contact-inner {
  position: relative; z-index: 1; max-width: 520px; margin: 4vh auto; max-height: 92vh;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden;
}
.contact-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.contact-title {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.contact-close {
  background: none; border: none; color: var(--ivory); font-size: 27px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.contact-close:hover { color: var(--gold); }

.contact-body { padding: 22px; overflow-y: auto; }
.contact-intro { font-size: 14px; color: var(--ivory-muted); line-height: 1.6; margin-bottom: 20px; }

.contact-form { display: grid; gap: 15px; }
.contact-form label { display: grid; gap: 6px; }
.contact-form label > span {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ivory-muted);
}
.contact-form input, .contact-form textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px 14px; color: var(--ivory);
  font-family: var(--font-body); font-size: 14.5px; width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form button[type="submit"] { margin-top: 4px; width: 100%; text-align: center; }
.contact-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Hidden from people, tempting to bots. */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-error { color: var(--orange); font-size: 13.5px; margin: 0; line-height: 1.5; }
.contact-privacy { font-size: 11.5px; color: var(--ivory-muted); line-height: 1.55; margin: 0; }
.contact-privacy a { color: var(--gold); text-decoration: underline; }

.contact-done { padding: 46px 30px; text-align: center; }
.contact-tick {
  width: 56px; height: 56px; border-radius: 50%; background: #8bbf6b; color: var(--bg);
  font-size: 28px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.contact-done h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 20px; margin-bottom: 10px;
}
.contact-done p { color: var(--ivory-muted); font-size: 14.5px; margin-bottom: 24px; }

.footer-socials { display: flex; gap: 18px; flex-wrap: wrap; }

body.modal-open { overflow: hidden; }

@media (max-width: 620px) {
  .contact-inner { margin: 0; height: 100vh; max-height: 100vh; border-radius: 0; }
  .footer-socials { justify-content: center; }
}

/* ---- Contact page ---- */
.contact-page { max-width: 1060px; margin: 0 auto; padding: 60px 24px 90px; }
.contact-intro { max-width: 560px; margin: 0 auto 44px; color: var(--ivory-muted); font-size: 15.5px; }

.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }
.contact-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px;
}

.contact-form { display: grid; gap: 16px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 6px; }
.contact-form label > span {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ivory-muted);
}
.contact-form input, .contact-form textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px 14px; color: var(--ivory);
  font-family: var(--font-body); font-size: 14.5px; width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form button[type="submit"] { margin-top: 4px; width: 100%; text-align: center; }
.contact-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Hidden from people, tempting to bots. */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-error { color: var(--orange); font-size: 13.5px; margin: 0; line-height: 1.5; }
.contact-privacy { font-size: 11.5px; color: var(--ivory-muted); line-height: 1.55; margin: 0; text-align: center; }
.contact-privacy a { color: var(--gold); text-decoration: underline; }

/* Sits just above the button and says what pressing it will do, so the jump to
   the visitor's email app is expected rather than startling. */
.contact-note {
  font-size: 12.5px; color: var(--ivory-muted); line-height: 1.55;
  margin: 0 0 -4px;
}

/* The address, in case no mail app opened and the panel is all they get. */
.contact-done-address { margin-top: -8px; }
.contact-done-address a { color: var(--gold); text-decoration: underline; font-size: 14.5px; }

.contact-done { text-align: center; padding: 30px 10px; }
.contact-tick {
  width: 56px; height: 56px; border-radius: 50%; background: #8bbf6b; color: var(--bg);
  font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.contact-done h2 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 21px; margin-bottom: 10px;
}
.contact-done p { color: var(--ivory-muted); font-size: 14.5px; margin-bottom: 24px; }

.contact-side {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px;
}
.contact-other { font-size: 14px; color: var(--ivory); margin-bottom: 22px; line-height: 1.55; }
.contact-detail { margin-bottom: 24px; }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail p { font-size: 14.5px; line-height: 1.6; }
.contact-detail a:hover { color: var(--gold); }
.contact-detail .social-link { margin-top: 8px; display: flex; }

.contact-cta { margin-top: 16px; padding: 12px 22px; font-size: 13px; }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-card, .contact-side { padding: 22px; }
}
.contact-mailto { color: var(--gold); text-decoration: underline; }

/* ---- Hero photo ---- */
/* The gradient keeps the headline readable over the photograph; without it the
   bright window in the shot swallows the text. */
.hero-photo {
  background:
    linear-gradient(100deg, rgba(12,10,8,.93) 0%, rgba(12,10,8,.74) 34%, rgba(12,10,8,.34) 62%, rgba(12,10,8,.04) 100%),
    url("assets/photos/hero.jpg") center 38% / cover no-repeat,
    var(--bg);
  opacity: 1;
}
@media (max-width: 720px) {
  .hero-photo {
    background:
      linear-gradient(180deg, rgba(12,10,8,.24) 0%, rgba(12,10,8,.52) 20%, rgba(12,10,8,.80) 46%, rgba(12,10,8,.90) 74%, rgba(12,10,8,.96) 100%),
      url("assets/photos/hero.jpg") 90% 50% / cover no-repeat,
      var(--bg);
  }
}

/* ---- Gallery ---- */
.gallery { max-width: 1160px; margin: 0 auto; padding: 30px 24px 40px; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px;
}
.gallery-item {
  margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-raised);
  aspect-ratio: 3 / 4;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.04); }

/* Reveal on scroll. Each photograph rises into place while the picture inside
   settles out of a slight zoom, so scrolling feels like the room opening up.
   The stagger is by position in the row, which is why a wide shot and the two
   portraits beside it land one after another instead of together. */
html.js-reveal .gallery-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js-reveal .gallery-item.in-view { opacity: 1; transform: translateY(0); }

/* Written as :not(.in-view) so the settle never outranks the hover zoom above. */
html.js-reveal .gallery-item:not(.in-view) img { transform: scale(1.07); }

/* The cascade repeats every four items rather than counting up forever, so a
   twelve-photograph gallery still lands in quick groups instead of the last
   pictures waiting a second and a half for their turn. */
html.js-reveal .gallery-item:nth-child(4n + 2) { transition-delay: 0.09s; }
html.js-reveal .gallery-item:nth-child(4n + 3) { transition-delay: 0.18s; }
html.js-reveal .gallery-item:nth-child(4n + 4) { transition-delay: 0.27s; }

/* --- The Room: the photographs pop rather than slide ---------------------- */
/* The overshoot in the easing curve (the 1.56) carries each picture a shade
   past full size before it settles, which is what reads as a pop. */
html.js-reveal #gallery .gallery-item {
  transform: scale(0.9) translateY(14px);
  transition: opacity 0.45s ease,
              transform 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.js-reveal #gallery .gallery-item.in-view { transform: scale(1) translateY(0); }
/* The frame is already growing, so the picture inside needs far less of a zoom. */
html.js-reveal #gallery .gallery-item:not(.in-view) img { transform: scale(1.03); }

/* --- The Food: the photographs drift against the scroll ------------------- */
/* Each picture is mounted taller than its frame and script.js slides it within
   that slack as the section passes, so the food sits at its own depth. The
   frame keeps its own overflow:hidden, so nothing escapes the rounded corner.
   9% of slack against 7% of travel leaves a margin at both extremes — at 7%
   each way the edge lands exactly on the frame and rounding opens a hairline. */
#food .gallery-item { position: relative; }
#food .gallery-par {
  position: absolute; left: 0; right: 0; top: -9%; height: 118%;
  will-change: transform;
}
/* Landscape shots earn a wider slot; portrait ones keep the 3/4 box above. */
.gallery-wide { grid-column: span 2; aspect-ratio: 4 / 3; }

/* Two galleries run back to back, so trim the seam between them. */
.gallery + .gallery { padding-top: 6px; }

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-wide { grid-column: span 1; }
}

/* Legibility over the photograph: rather than darkening the whole image (which
   hides the room), give the elements that sit on bright wood their own ground. */
.hero h1,
.hero .eyebrow { text-shadow: 0 2px 18px rgba(12, 10, 8, 0.55); }
.hero .hero-sub { text-shadow: 0 1px 14px rgba(12, 10, 8, 0.75); }
.hero .btn-ghost {
  background: rgba(12, 10, 8, 0.55);
  backdrop-filter: blur(3px);
  border-color: rgba(247, 241, 230, 0.28);
}
.hero .btn-ghost:hover { background: rgba(12, 10, 8, 0.72); }
.hero .hero-status {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(12, 10, 8, 0.55);
  backdrop-filter: blur(3px);
  padding: 7px 14px 7px 8px; border-radius: 999px;
}