@import url("lounge.css?v=20260803-global");

/* ========================================================================== 
   Kingsland — Hotel · Family Restaurant & Bar · Banquets · Rooms
   Mobile-first stylesheet. Single file, no build step.
   ========================================================================== */

:root {
  --ink: #16191a;
  --ink-soft: #3a4140;
  --paper: #f6f1e8;
  --paper-deep: #ece2d3;
  --cream: #fffbf3;
  --forest: #16362c;
  --forest-soft: #21503f;
  --terracotta: #9b4f34;
  --gold: #c09a57;
  --gold-light: #e3c58d;
  --line: rgba(22, 25, 26, .14);
  --line-light: rgba(255, 251, 243, .2);

  --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shell: 1180px;
  --pad: 20px;
  --radius: 14px;
  --bar: 68px; /* mobile action bar height */
}

* { box-sizing: border-box; }

/* Several interactive surfaces (checkout, staff login, order tracking) are
   switched with the HTML `hidden` attribute. Keep it authoritative even when
   a component class sets display:grid/flex; without this, hidden admin and
   checkout views can appear lower down the page. */
[hidden] { display: none !important; }

/* Account/order history */
.acct h1 { font-size: clamp(2.25rem, 9vw, 4.1rem); }
.acct__root { margin-top: 26px; }
.history { display: grid; gap: 10px; }
.history__row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 4px 14px rgba(22,25,26,.05); }
.history__row strong,.history__status { display:block; font-size:.91rem; font-weight:800; }.history__row small{display:block;color:var(--ink-soft);font-size:.74rem;margin-top:2px}.history__status{text-align:right;color:var(--forest)}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip; /* NOT "hidden" — hidden silently breaks the sticky header on scroll, see note below */
  padding-bottom: var(--bar); /* room for mobile action bar */
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.5rem, 11vw, 5.5rem); }
h2 { font-size: clamp(2rem, 8vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 5vw, 2rem); }

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
}

.eyebrow--light { color: var(--gold-light); }

.section { padding: 64px 0; }
.section--forest { background: var(--forest); color: var(--cream); }
.section--cream  { background: var(--cream); }
.section--deep   { background: var(--paper-deep); }

.lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; }
.section--forest .lede { color: rgba(255, 251, 243, .78); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.btn:active { transform: scale(.98); }
.btn--gold { background: var(--gold); color: #21170a; }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--cream { background: var(--cream); color: var(--forest); }
.btn--line { border-color: currentColor; }
.btn--wa { background: #1faa54; color: #fff; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Header ---------- */

/* The site header is injected inside #site-header. Sticky positioning on the
   child stops working once that one-row wrapper scrolls away, so the wrapper
   itself owns the sticky layer. This keeps the menu search toolbar correctly
   docked underneath it on a phone. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 90;
}

.hdr {
  position: relative;
  z-index: 1;
  background: rgba(246, 241, 232, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }

.brand__mark {
  width: 40px; height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(192,154,87,.45);
  background: #050505;
}

.brand__txt strong {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.brand__txt small {
  display: block;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* nav: hidden on mobile, shown desktop */
.nav { display: none; }

.burger {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 64px 0 auto;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--pad) 22px;
  transform: translateY(-120%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 89;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.drawer.open { transform: translateY(0); }
.drawer a {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.drawer a:last-of-type { border-bottom: 0; }

/* ---------- Mobile bottom action bar ---------- */

.actionbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: env(safe-area-inset-bottom);
}

.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--bar);
  color: var(--cream);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a span[aria-hidden] { font-size: 1.15rem; line-height: 1; }
.actionbar a.is-wa { color: #86e8ab; }

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

.hero {
  position: relative;
  min-height: 82svh;
  display: grid;
  align-items: end;
  background: #241610;
  color: var(--cream);
  overflow: hidden;
}

.hero > img, .hero > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(18, 11, 7, .93) 6%, rgba(20, 12, 8, .5) 52%, rgba(20, 12, 8, .34));
}

.hero__in { position: relative; padding: 96px 0 44px; }

.hero h1 { margin-bottom: 18px; text-wrap: balance; }
.hero h1 em { display: block; color: var(--gold-light); font-style: italic; }

.hero__lede {
  color: rgba(255, 251, 243, .84);
  font-size: 1.02rem;
  max-width: 42ch;
  margin-bottom: 26px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 251, 243, .66);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Four pillars ---------- */

.pillars { display: grid; gap: 14px; }

.pillar {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  min-height: 224px;
}

.pillar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pillar:hover img { transform: scale(1.05); }

.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 9, 6, .9) 12%, rgba(13, 9, 6, .3) 62%, rgba(13, 9, 6, .12));
}

.pillar__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px;
}

.pillar__no {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.pillar h3 { margin-bottom: 6px; }
.pillar p {
  font-size: .86rem;
  color: rgba(255, 251, 243, .76);
  margin-bottom: 12px;
  max-width: 38ch;
}
.pillar__go {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 251, 243, .5);
  padding-bottom: 5px;
  align-self: flex-start;
}

/* ---------- Info / cards ---------- */

.cards { display: grid; gap: 12px; }

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: .9rem; color: var(--ink-soft); margin-bottom: 0; }
.card__no {
  font-family: var(--display);
  color: var(--terracotta);
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 14px 0 0; }
.tags li {
  background: rgba(192, 154, 87, .16);
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
.section--forest .tags li { background: rgba(255, 251, 243, .12); color: rgba(255, 251, 243, .8); }

/* ---------- real photo layouts ---------- */
.space-grid {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.space-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: 0 10px 28px rgba(22,25,26,.07);
}
.space-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}
.space-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s ease;
}
.space-card:hover .space-card__media img { transform: scale(1.045); }
.space-card__body { padding: 18px 18px 20px; }
.space-card__body h3 { font-size: 1.65rem; margin-bottom: 6px; }
.space-card__body p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.section--forest .space-card { background: rgba(255,251,243,.07); border-color: var(--line-light); box-shadow: none; }
.section--forest .space-card__body p { color: rgba(255,251,243,.76); }

.photo-band {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
/* The figure owns a real aspect ratio instead of a min-height, so every tile
   in a row is exactly the same size regardless of how long its caption is.
   The previous rule pushed the caption down with a hard `margin-top: 150px`,
   which broke the moment a caption wrapped onto a second line. */
.photo-band figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
}
.photo-band img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* A true overlay pinned to the bottom edge, only as tall as its own text, so
   the scrim never creeps up over the middle of the photograph. */
.photo-band figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 32px 15px 13px;
  color: var(--cream);
  font-size: .8rem;
  font-weight: 700;
  background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 58%, transparent 100%);
}

.ftr__logo { display: inline-block; width: 136px; margin-bottom: 18px; }
.ftr__logo img { width: 100%; border-radius: 9px; border: 1px solid rgba(227,197,141,.33); }

/* figure with caption
   ---------------------------------------------------------------------------
   THIS WAS THE OVERLAP BUG. The caption used to be `position: relative` with
   `min-height: 260px` and `margin-top: auto` — but `.shot` is not a flex
   container, so `margin-top: auto` did nothing. The result was a 260px-tall
   caption block sitting at the TOP of the figure with its dark gradient
   washing straight over the whole photograph.

   The caption is now absolutely positioned against the bottom edge and sized
   by its own content, so the picture stays visible and the scrim only covers
   the strip of it that sits behind the text. */
.shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  background: var(--ink);
  aspect-ratio: 4 / 3;
}
.shot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 46px 20px 20px;
  color: var(--cream);
  font-size: .82rem;
  line-height: 1.5;
  background: linear-gradient(0deg, rgba(12, 8, 5, .92) 0%, rgba(12, 8, 5, .55) 55%, transparent 100%);
}
.shot figcaption strong { font-weight: 800; }

/* ---------- Menu page ---------- */

.mtoolbar { display: grid; gap: 12px; margin-bottom: 22px; }

.msearch input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
}

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--forest); color: var(--cream); border-color: var(--forest); }

.mcat { margin-bottom: 34px; }
.mcat__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mcat__hd h3 { margin: 0; }
.mcat__hd span { font-size: .7rem; color: var(--ink-soft); white-space: nowrap; }

.dish {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.dish:last-child { border-bottom: 0; }

.dish__name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dish__desc { font-size: .84rem; color: var(--ink-soft); margin: 4px 0 0; grid-column: 1; }
.dish__price { font-family: var(--display); font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.dish__add {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dish__add:active { background: var(--forest); color: var(--cream); }

.vmark {
  width: 13px; height: 13px;
  flex: none;
  border: 1.5px solid;
  border-radius: 2px;
  display: grid;
  place-items: center;
}
.vmark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vmark--veg { color: #1c7a3e; }
.vmark--non { color: #a3341f; }

.pill-best {
  background: var(--gold);
  color: #21170a;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
}

.mempty, .mloading {
  text-align: center;
  padding: 50px 20px;
  color: var(--ink-soft);
}

/* Cart */
.cart {
  position: fixed;
  bottom: var(--bar);
  left: 0; right: 0;
  z-index: 94;
  background: var(--forest);
  color: var(--cream);
  transform: translateY(140%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  max-height: 78svh;
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
}
.cart.show { transform: translateY(0); }

.cart__hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-light);
}
.cart__hd strong { font-family: var(--display); font-size: 1.3rem; margin-right: auto; }
.cart__close {
  background: none; border: 0; color: var(--cream);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.cart__lines { overflow-y: auto; padding: 6px 20px; flex: 1; }

.cline { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.cline__n { font-size: .92rem; font-weight: 600; }
.cline__p { font-family: var(--display); font-size: 1.05rem; }
.qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-light); border-radius: 999px; overflow: hidden; }
.qty button {
  width: 36px; height: 34px;
  background: rgba(255, 255, 255, .07);
  border: 0; color: var(--cream);
  font-size: 1.1rem; cursor: pointer;
}
.qty span { min-width: 32px; text-align: center; font-size: .88rem; font-weight: 700; }

.cart__ft { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-light); }
.cart__tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cart__tot strong { font-family: var(--display); font-size: 1.7rem; }
.cart__note { font-size: .7rem; color: rgba(255, 251, 243, .6); margin: 10px 0 0; text-align: center; }

.cartbar {
  position: fixed;
  bottom: var(--bar);
  left: 0; right: 0;
  z-index: 93;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--gold);
  color: #21170a;
  border: 0;
  width: 100%;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(140%);
  transition: transform .28s ease;
}
.cartbar.show { transform: translateY(0); }
.cartbar span:first-child { margin-right: auto; font-size: .78rem; letter-spacing: .04em; }

/* ---------- Contact / footer ---------- */

/* base footer. The dressed version further down this file overrides the
   background, padding and spacing — keep colour here so there is exactly one
   place that sets it. */
.ftr { color: var(--cream); }
.ftr__grid { display: grid; gap: 30px; }
.ftr__lbl {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px;
}
.ftr a.ftr__lnk { display: block; font-size: .88rem; color: rgba(255, 251, 243, .72); margin-bottom: 11px; }
.ftr a.ftr__lnk:hover { color: var(--cream); }
.ftr__addr { font-size: .88rem; color: rgba(255, 251, 243, .66); max-width: 34ch; }
.ftr__base {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 251, 243, .45);
}

.hours { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.hours li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(227, 197, 141, .16);
  color: rgba(255, 251, 243, .72);
}
/* The label may wrap onto two lines; the TIME never may. Without this the
   row breaks wherever it runs out of room and drops a stray "am" onto its
   own line, which reads as a mistake. The label is the flexible half. */
.hours li > span:first-child { flex: 1 1 auto; min-width: 0; }
.hours li > span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--gold-light);
}

/* ---------- Admin (menu editor) ---------- */

.adm { max-width: 900px; margin: 0 auto; padding: 30px var(--pad) 60px; }
.adm h1 { font-size: clamp(2rem, 8vw, 3rem); }
.adm__bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 26px; }
.adm__grid { display: grid; gap: 12px; margin-bottom: 14px; }
.adm label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 6px; }
.adm input, .adm select, .adm textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
.adm textarea { min-height: 74px; resize: vertical; }
.adm__row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.adm__row small { display: block; color: var(--ink-soft); font-size: .78rem; }
.adm__acts { display: flex; gap: 7px; }
.adm__mini {
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cream);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.adm__mini--del { border-color: #d9b3a8; background: #fdf1ee; color: #93341f; }
.adm__panel { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.adm__msg { padding: 12px 15px; border-radius: 8px; font-size: .84rem; margin-bottom: 16px; }
.adm__msg--ok { background: #e8f2ea; color: #1d5c33; }
.adm__msg--err { background: #fdeeea; color: #8d3421; }
.adm__steps { font-size: .84rem; color: var(--ink-soft); }
.adm__steps li { margin-bottom: 7px; }

/* ---------- Utilities ---------- */

.center { text-align: center; }
.mt0 { margin-top: 0; }
.hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */

@media (min-width: 620px) {
  .section { padding: 84px 0; }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pillar { min-height: 300px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .space-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .photo-band { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .hero__in { padding: 130px 0 60px; }
  .dish { grid-template-columns: 1fr auto auto; align-items: center; }
  .dish__desc { grid-column: 1 / -1; }
  .dish__add { align-self: center; }
  .adm__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  :root { --bar: 0px; }

  body { padding-bottom: 0; }

  .actionbar { display: none; }
  .burger { display: none; }
  .drawer { display: none; }

  .nav { display: flex; align-items: center; gap: 26px; margin-right: 22px; }
  .nav a {
    position: relative;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -7px;
    width: 100%; height: 1px;
    background: var(--terracotta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

  .hdr__in { min-height: 78px; }
  .hero { min-height: 88svh; }
  .section { padding: 108px 0; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillar { min-height: 400px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .space-grid { gap: 20px; }

  .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
  .shot, .shot figcaption { min-height: 440px; }

  /* menu layout: catalog + docked cart */
  .mlayout { display: grid; grid-template-columns: 1fr 350px; gap: 40px; align-items: start; }
  .mtoolbar { grid-template-columns: 1fr auto; align-items: center; }

  .cart {
    position: sticky;
    inset: auto;
    top: 100px;
    transform: none;
    border-radius: var(--radius);
    max-height: calc(100svh - 130px);
    box-shadow: none;
  }
  .cartbar { display: none; }
  .cart__ft { padding-bottom: 18px; }
}

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

/* ==========================================================================
   FINISHING PASS — more depth and consistency, without noisy animation.
   ========================================================================== */
.section--forest {
  background:
    radial-gradient(760px 380px at 92% -10%, rgba(227,197,141,.15), transparent 62%),
    radial-gradient(640px 360px at -10% 105%, rgba(35,80,63,.72), transparent 65%),
    var(--forest);
}
.section--deep { background: linear-gradient(135deg, var(--paper-deep), #f4ecdf); }
.hdr { box-shadow: 0 1px 0 rgba(22,25,26,.03), 0 7px 22px rgba(22,25,26,.025); }
.btn { box-shadow: 0 5px 13px rgba(22,25,26,.08); }
.btn--line { box-shadow: none; }
.card, .space-card { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.photo-band figure { transition: transform .26s ease, box-shadow .26s ease; }
.photo-band img { transition: transform .6s ease; }

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(22,25,26,.15); }
  .btn--line:hover { background: rgba(255,251,243,.1); }
  .section--cream .btn--line:hover, .section--deep .btn--line:hover { background: rgba(22,54,44,.06); }
  .card:hover, .space-card:hover { transform: translateY(-3px); border-color: rgba(192,154,87,.44); box-shadow: 0 18px 34px rgba(22,25,26,.1); }
  .photo-band figure:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(22,25,26,.16); }
  .photo-band figure:hover img { transform: scale(1.04); }
}

/* ==========================================================================
   THE FOOTER, DRESSED
   --------------------------------------------------------------------------
   The footer is the last thing anyone sees, and on a hotel site it is where
   the address and the phone number live — so it is worth more than a black
   box with links in it.

   Restraint is what reads as expensive. Four moves, no ornament:

   1. A CROWN RULE. One hairline across the very top, gold in the centre and
      fading to nothing at both ends. It reads as a threshold — you have
      arrived somewhere — and costs one gradient.

   2. WARMTH FROM ABOVE. A wide, very faint pool of gold light behind the
      brand. Flat black feels like a form; lit black feels like a room.

   3. GOLD RESERVED FOR FACTS. Times, phone number and section labels are
      gold. Body links stay quiet cream. If everything is gold, nothing is.

   4. LINKS THAT ANSWER. A gold rule draws itself under a link on hover
      rather than a colour flash. Slow, deliberate, unhurried.
   ========================================================================== */

.ftr {
  position: relative;
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(192, 154, 87, .13), transparent 62%),
    linear-gradient(180deg, #1a1d1e 0%, var(--ink) 42%);
  padding: 62px 0 26px;
  overflow: hidden;
}

/* the crown rule */
.ftr::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(227, 197, 141, .18) 18%,
    var(--gold) 50%,
    rgba(227, 197, 141, .18) 82%, transparent);
}

.ftr h2 {
  font-size: clamp(1.9rem, 8vw, 3rem);
  letter-spacing: -.015em;
}

.ftr__grid { gap: 38px; }

/* section labels get the same gold rule the page eyebrows use */
.ftr__lbl {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ftr__lbl::after {
  content: "";
  flex: 1 1 auto;
  max-width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(227, 197, 141, .55), transparent);
}

/* links: a rule that draws in, rather than a colour flash */
.ftr a.ftr__lnk {
  position: relative;
  width: fit-content;
  padding-bottom: 2px;
  transition: color .45s cubic-bezier(.22, .61, .36, 1);
}
.ftr a.ftr__lnk::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
  .ftr a.ftr__lnk:hover { color: var(--gold-light); }
  .ftr a.ftr__lnk:hover::after { width: 100%; }
}

.ftr__addr {
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(255, 251, 243, .7);
}

/* the crest, lit rather than boxed */
.ftr__logo img {
  border-color: rgba(227, 197, 141, .3);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(227, 197, 141, .08);
  transition: box-shadow .6s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
  .ftr__logo:hover img {
    box-shadow: 0 14px 42px rgba(0, 0, 0, .5), 0 0 26px rgba(192, 154, 87, .22);
  }
}

/* the base bar */
.ftr__base {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid rgba(227, 197, 141, .14);
  align-items: center;
}
.ftr__base span:last-child {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

@media (max-width: 619px) {
  /* stacked and centred reads better than two ragged half-lines */
  .ftr__base { justify-content: center; text-align: center; gap: 8px; }
}