:root {
  --bg: #06120d;
  --band: #0a1b14;
  --surface: rgba(16, 38, 29, 0.6);
  --line: rgba(217, 178, 108, 0.2);
  --line-strong: rgba(217, 178, 108, 0.45);
  --field: rgba(0, 0, 0, 0.28);
  --field-line: rgba(244, 237, 221, 0.18);
  --gold: #d9b26c;
  --gold-light: #f4dca4;
  --text: #f4eddd;
  --muted: #b8b2a0;
  --error: #ffab9c;
  --radius: 14px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
}

a { color: var(--gold-light); text-underline-offset: 3px; }
.muted { color: var(--muted); }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 32px); }

/* ---------------------------------------------------------------- Hero */

.hero { position: relative; isolation: isolate; overflow: hidden; }

/* The hero photo, blurred into a soft green glow behind everything. */
.hero-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-ambient::before {
  content: "";
  position: absolute;
  inset: -80px;
  background: url("../assets/mahjong-hero-460.jpg") center 70% / cover no-repeat;
  filter: blur(50px) saturate(1.25) brightness(0.42);
  /* Fade out before the bottom edge, or a rounding gap can show a lighter line there. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
}
.hero-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217, 178, 108, 0.12), transparent 60%),
    radial-gradient(ellipse at 25% 30%, rgba(20, 84, 56, 0.5), transparent 70%),
    linear-gradient(to bottom, rgba(6, 18, 13, 0.1) 0%, rgba(6, 18, 13, 0.5) 60%, var(--bg) 94%);
}

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}
.brand {
  font: 700 14px/1 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.brand span { color: var(--gold); }
/* The café's round logo, as a white badge like on the flyer, beside the name. */
.brand-logo { display: inline-flex; align-items: center; gap: 12px; }
/* Keeps "Lush Cafe" as one piece, so the gap above only sits beside the logo. */
.brand-logo .brand-name { color: var(--text); }
.brand-logo img { flex: none; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.footer-logo { display: block; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; }
.header-nav { display: flex; align-items: center; gap: 20px; }
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header-call svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.header-nav .header-cta { display: none; }

/* Phones and tablets: laid out like the flyer. The title block comes first,
   and the photo is pulled up underneath it so the title sits on the dark wall
   and the drinks start just below the date. The top half of the photo is wall,
   so pulling it up by half its width lands the glasses under the date. */
.hero-inner { padding-bottom: 8px; }
.hero-copy { position: relative; z-index: 1; text-align: center; }
.hero-copy-top { padding-top: 4px; }
.hero-media {
  --media-w: min(100vw, 640px);
  position: relative;
  width: var(--media-w);
  margin: calc(var(--media-w) * -0.5) 0 0 50%;
  transform: translateX(-50%);
}
.hero-media picture { display: block; }
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 86%, transparent 100%);
}
/* Once the photo is narrower than the screen, soften its sides too. */
@media (min-width: 641px) and (max-width: 959px) {
  .hero-media img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 24%, #000 86%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 24%, #000 86%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
  }
}
.hero-copy-bottom { margin-top: -18px; }

.eyebrow, .kicker {
  margin: 0 0 14px;
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.title {
  margin: 0;
  font: 800 clamp(52px, 14vw, 100px)/0.98 var(--serif);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff3d2 0%, #ecc67e 45%, #b8873a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}
.title em { font-style: italic; font-weight: 700; }
.subtitle {
  margin: 12px 0 22px;
  font: 700 clamp(21px, 5.4vw, 30px)/1.2 var(--serif);
}
.when {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(6, 18, 13, 0.4);
  font: 600 14px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.when-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.hero-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 22px;
}
.hero-price-amount { font: 800 46px/1 var(--serif); color: var(--gold-light); white-space: nowrap; }
.hero-price-plus { margin-left: 0.04em; font-size: 0.58em; vertical-align: 0.6em; }
.hero-price-note { text-align: left; font-size: 13px; line-height: 1.45; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-actions .btn-ghost { display: none; }
.hero-fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* Desktop: the widened photo fills the whole hero, edge to edge. Its left
   side is new background that darkens into the page colour, so the copy sits
   there and the drinks, bites and tiles stay on the right. */
@media (min-width: 960px) {
  .header-nav .header-cta { display: inline-flex; }
  .hero { display: flex; flex-direction: column; min-height: clamp(680px, 54vw, 820px); }
  .hero-inner {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 540px);
    align-content: center;
    padding: 24px 0 88px;
  }
  .hero-copy { text-align: left; }
  .hero-copy-top { padding-top: 0; }
  .hero-copy-bottom { margin-top: 30px; }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    margin: 0;
    transform: none;
  }
  .hero-media picture { height: 100%; }
  .hero-media img {
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    /* Fully visible past the bottom of the plate and tiles, then fades into the page. */
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  }
  .hero-price, .hero-actions { justify-content: flex-start; }
  .hero-actions .btn-ghost { display: inline-flex; }
}
/* Narrower desktops show less of the new background, so keep the title clear of the glasses. */
@media (min-width: 960px) and (max-width: 1199px) {
  .hero-inner { grid-template-columns: minmax(0, 400px); }
  .title { font-size: 80px; }
  .subtitle { font-size: 26px; }
  .hero-actions .btn-ghost { display: none; }
}

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  font: 700 15px/1 var(--sans);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
}
.btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.btn-gold {
  color: #1d1406;
  background: linear-gradient(180deg, #f8e3ae 0%, #dcb064 55%, #c4933f 100%);
  box-shadow: 0 10px 28px -10px rgba(217, 178, 108, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); }
.btn-ghost { color: var(--gold-light); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { background-color: rgba(217, 178, 108, 0.08); }
.btn-sm { min-height: 40px; padding: 0 20px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: progress; filter: saturate(0.6) brightness(0.85); transform: none; }

/* ---------------------------------------------------------------- Sections */

.section { padding: 64px 0; }
@media (min-width: 960px) { .section { padding: 96px 0; } }
/* The hero already ends in open space, so the first section starts closer. */
main > .section:first-child { padding-top: 48px; }
.section-band {
  background: linear-gradient(180deg, var(--band), #08160f);
  border-block: 1px solid var(--line);
}
.section-head { margin-bottom: 28px; }
.section-head-center { text-align: center; }
.section-head-center .section-title::after { margin-inline: auto; }
.section-title {
  margin: 0;
  font: 700 clamp(28px, 6vw, 38px)/1.15 var(--serif);
}
.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.subhead { margin: 40px 0 18px; font: 700 22px/1.2 var(--serif); }

/* What's included */
.perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.perks li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
@media (min-width: 720px) {
  .perks { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .perks li { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px; }
}
.perk-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold);
}
.perk-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perks strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.perks span:not(.perk-icon) { font-size: 14px; color: var(--muted); }

/* Details + booking card */
.booking-grid { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .booking-grid { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 80px; align-items: start; }
}

.facts { margin: 0; border-top: 1px solid var(--line); }
.facts > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font: 600 12px/1.9 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.facts dd { margin: 0; }
.fact-link { display: block; width: fit-content; margin-top: 4px; font-size: 14px; font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 14px; font-size: 15px; color: var(--muted); }
.steps li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
}
.steps strong { display: block; color: var(--text); font-weight: 600; }

.reserve { scroll-margin-top: 16px; }
.card {
  padding: 28px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(21, 48, 37, 0.94), rgba(10, 26, 19, 0.96));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
}
@media (min-width: 420px) { .card { padding: 32px 28px; } }
.card-head { margin-bottom: 22px; }
.card-head h2 { margin: 0; font: 700 28px/1.15 var(--serif); }
.seats-left {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(217, 178, 108, 0.14);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Form */

.field { margin-bottom: 16px; }
.field-row { display: grid; column-gap: 14px; }
@media (min-width: 560px) and (max-width: 959px) { .field-row { grid-template-columns: 1fr 1fr; } }

label, .label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.optional { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }

input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  font: 500 16px/1.4 var(--sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(244, 237, 221, 0.38); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 178, 108, 0.2);
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px #10261d inset;
  caret-color: var(--text);
}
.field.invalid input { border-color: var(--error); }
.field.invalid input:focus { box-shadow: 0 0 0 3px rgba(255, 171, 156, 0.2); }
.error { margin: 6px 0 0; font-size: 13px; color: var(--error); }
.error:empty { display: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.seats-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--field);
}
.stepper button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gold-light);
  font: 500 22px/1 var(--sans);
  cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: rgba(217, 178, 108, 0.1); }
.stepper button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.stepper button:disabled { color: rgba(244, 237, 221, 0.22); cursor: not-allowed; }
.stepper output { min-width: 36px; text-align: center; font: 700 18px/1 var(--sans); }
.hint { margin: 0; font-size: 13px; color: var(--muted); }

.summary {
  margin: 22px 0;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  font-size: 14px;
}
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--muted); }
.summary-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.summary-total {
  align-items: baseline;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.summary-total span:last-child { font: 800 26px/1 var(--serif); color: var(--gold-light); }

.btn-sep { opacity: 0.55; }
.notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 171, 156, 0.5);
  border-radius: 10px;
  background: rgba(255, 171, 156, 0.08);
  font-size: 14px;
}
.fine { margin: 14px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------- Hold / closed panels */

.panel { padding: 12px 0 4px; text-align: center; outline: none; }
.panel h2 { margin: 0 0 10px; font: 700 30px/1.15 var(--serif); }
.panel p { margin: 0 auto 24px; max-width: 34ch; color: var(--muted); }
.panel p strong { color: var(--text); overflow-wrap: anywhere; }
.panel-mark {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8e3ae, #c4933f);
}
.panel-mark svg { width: 30px; height: 30px; fill: none; stroke: #1d1406; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.pay {
  margin: 0 0 18px;
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  text-align: left;
}
.pay > div { padding: 11px 0; }
.pay > div + div { border-top: 1px solid var(--line); }
.pay dt { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pay dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin: 0; font-weight: 700; }
.pay dd > span { overflow-wrap: anywhere; }
.pay-ref { font: 700 20px/1 var(--sans); letter-spacing: 0.12em; white-space: nowrap; color: var(--gold-light); }
.panel-hold .btn { margin-bottom: 16px; }
.panel .hold-note { max-width: none; margin-bottom: 18px; font-size: 14px; }
.link-button {
  border: 0;
  background: none;
  color: var(--gold-light);
  font: 600 14px/1.4 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- FAQ */

.faq details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; border-radius: 4px; }
.faq p { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

.section-policies { padding-top: 0; }
.policies { display: grid; gap: 32px 48px; }
.policies > div { scroll-margin-top: 24px; }
.policies .subhead { margin: 0 0 12px; font-size: 20px; }
.policy-list { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.policy-list, .policies p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.policies p { margin: 0 0 10px; }
@media (min-width: 760px) {
  .policies { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
  padding: 40px 16px calc(112px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.site-footer p { margin: 4px 0; }
.site-footer .copyright { margin-top: 14px; font-size: 12px; opacity: 0.75; }
@media (min-width: 960px) { .site-footer { padding-bottom: 48px; } }

/* Sticky booking bar on phones, hidden once the form is on screen */
.mobile-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(6, 18, 13, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.25s ease;
}
.mobile-bar.is-hidden { transform: translateY(110%); }
.mobile-bar-text { display: grid; line-height: 1.3; }
.mobile-bar-text strong { font-size: 14px; }
.mobile-bar-text span { font-size: 13px; color: var(--muted); }
.mobile-bar .btn { min-height: 46px; padding: 0 26px; }
@media (min-width: 960px) { .mobile-bar { display: none; } }