/* ==========================================================================
   Taj Restaurant & Banquet — pages.css
   Hero, page headers, and per-page section styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  align-items: center;
  min-height: min(88dvh, 54rem);
  /* 7rem top and bottom pushed the hall-capacity row just under the fold on a
     laptop, which reads as the page being cut off rather than as something to
     scroll for. The whole hero now lands inside a 950px viewport. */
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: .38;
  filter: saturate(.85) contrast(1.05);
  animation: kenburns 26s var(--ease-out) infinite alternate;
}
@keyframes kenburns { from { scale: 1.03; } to { scale: 1.14; } }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--ink-900) 6%, color-mix(in oklab, var(--ink-900) 74%, transparent) 46%, color-mix(in oklab, var(--ink-900) 40%, transparent) 78%),
    linear-gradient(180deg, color-mix(in oklab, var(--ink-900) 88%, transparent) 0%, transparent 26%, var(--ink-900) 99%);
}

.hero-inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; }
}

.hero-copy > * + * { margin-top: 1.35rem; }
.hero-title { margin-top: 1rem; }
.hero-title .line { display: block; }
.hero-title .line-2 { padding-left: clamp(0rem, -1rem + 6vw, 3.5rem); }
.hero-sub { max-width: 42ch; }
.hero-cta { --gap: .85rem; margin-top: 2rem; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero-meta div { display: grid; gap: .15rem; }
.hero-meta dt { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-400); font-weight: 700; }
.hero-meta dd { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }

/* Arched hero image column */
.hero-art { position: relative; display: none; }
@media (min-width: 60rem) { .hero-art { display: block; } }
.hero-art .arch-frame { max-width: 30rem; margin-left: auto; }
.hero-art .arch-frame img { aspect-ratio: 3 / 4; }
/* Soft halo behind the arch rather than a competing outline. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -12% -10% -14% 6%;
  background: radial-gradient(58% 52% at 62% 44%, color-mix(in oklab, var(--gold-400) 22%, transparent), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}
.hero-chip {
  position: absolute;
  left: -1.5rem;
  bottom: 2.5rem;
  display: grid;
  gap: .2rem;
  padding: 1rem 1.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-800) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -30px var(--shadow-color);
}
.hero-chip .big {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold-200);
}
.hero-chip .lbl { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: .55rem;
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-hint i {
  display: block;
  width: 1px; height: 2.5rem;
  background: linear-gradient(180deg, var(--gold-400), transparent);
  animation: hint 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes hint { 0%,100% { scale: 1 .3; opacity: .4; } 50% { scale: 1 1; opacity: 1; } }

/* --------------------------------------------------------------------------
   Marquee strip
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
  background: color-mix(in oklab, var(--ink-850) 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee ul {
  display: flex;
  flex: none;
  gap: 3rem;
  padding-right: 3rem;
  align-items: center;
  animation: scroll-x 38s linear infinite;
}
.marquee:hover ul { animation-play-state: paused; }
.marquee li {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  font-style: italic;
  color: var(--text-dim);
  white-space: nowrap;
}
.marquee li::after { content: ""; width: 6px; height: 6px; rotate: 45deg; background: var(--gold-500); flex: none; }
@keyframes scroll-x { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  z-index: var(--z-content);
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 120% at 50% -20%, color-mix(in oklab, var(--gold-400) 13%, transparent), transparent 70%);
}
.page-head-inner { max-width: 52rem; }
.page-head.center .page-head-inner { margin-inline: auto; text-align: center; }
.page-head > .wrap > .page-head-inner > * + * { margin-top: 1.1rem; }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-xs); color: var(--text-faint); }
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--gold-300); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--gold-600); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   Quick action cards (home)
   -------------------------------------------------------------------------- */
.action-card { display: grid; }
.action-card .card-body { display: grid; gap: .7rem; align-content: start; }
.action-card .step {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  color: color-mix(in oklab, var(--gold-400) 42%, transparent);
}
.action-card .go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-decoration: none;
}
.action-card .go svg { width: 1rem; height: 1rem; transition: translate var(--dur-2) var(--ease-out); }
.action-card:hover .go svg { translate: .3rem 0; }

/* --------------------------------------------------------------------------
   Split feature (image + copy)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.is-reversed .split-media { order: 2; }
}
.split-copy > * + * { margin-top: 1.15rem; }
.split-media { position: relative; }
.split-media img { border-radius: var(--r-lg); }
.split-media.is-arch img { border-radius: var(--arch); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.stat { display: grid; gap: .2rem; }
.stat .num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  line-height: 1;
  color: var(--gold-200);
  font-variant-numeric: tabular-nums;
}
.stat .lbl { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Dish cards
   -------------------------------------------------------------------------- */
.dish-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.dish {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  overflow: hidden;
  transition: border-color var(--dur-3), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
}
.dish:hover {
  border-color: var(--line-strong);
  transform: translateY(-5px);
  box-shadow: 0 28px 60px -34px color-mix(in oklab, var(--gold-400) 70%, transparent);
}
.dish-media { position: relative; overflow: hidden; }
.dish-media img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.dish:hover .dish-media img { transform: scale(1.07); }
.dish-media .badge { position: absolute; top: .7rem; left: .7rem; }
.dish-body { display: grid; gap: .55rem; align-content: start; padding: 1rem 1.05rem 1.15rem; }
.dish-name { font-family: "Manrope", sans-serif; font-size: var(--fs-base); font-weight: 700; line-height: 1.3; }
.dish-desc { font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.5; }
.dish-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; }
.dish-price { font-size: var(--fs-lg); font-weight: 700; color: var(--gold-200); font-variant-numeric: tabular-nums; }

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--gold-200);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.add-btn:hover { background: var(--grad-gold); color: #16110a; transform: translateY(-2px); }
.add-btn svg { width: .9rem; height: .9rem; }
.add-btn.is-added { background: var(--jade); border-color: transparent; color: #06130d; }

/* --------------------------------------------------------------------------
   Menu / order page layout
   -------------------------------------------------------------------------- */
.menu-toolbar {
  position: sticky;
  top: clamp(4rem, 3.4rem + 1.6vw, 4.9rem);
  z-index: var(--z-sticky);
  display: grid;
  gap: .7rem;
  padding-block: .7rem;
  margin-bottom: 1.6rem;
}
/* The toolbar lives inside .wrap, so a background on the element itself stops
   at the gutter — and the page then scrolls visibly through the strip of bare
   gutter down either side of it. The backdrop has to reach past its own box.

   Exactly one gutter each way, not a round 50vw: .wrap is 100% minus two
   gutters, so this lands flush on the viewport edges and adds no horizontal
   overflow. (50vw put 220px of overflow into the document — invisible behind
   body{overflow-x:hidden}, but real.) */
.menu-toolbar::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  background: color-mix(in oklab, var(--ink-900) 94%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
/* A pill, to rhyme with the chips directly beneath it, and tightened up —
   the old slab was the tallest thing on a phone screen and the icon floated
   loose inside it. */
.search-field { position: relative; display: flex; align-items: center; }
.search-field .search-ico {
  position: absolute;
  left: 1.05rem;
  display: grid;
  place-items: center;
  color: var(--gold-400);
  pointer-events: none;
}
.search-field .search-ico svg { width: 1.05rem; height: 1.05rem; }
.search-field .input {
  padding-left: 2.85rem;
  padding-right: 2.85rem;
  min-height: 2.9rem;
  border-radius: var(--r-pill);
  background-color: color-mix(in oklab, var(--cream) 5%, transparent);
  border-color: var(--line);
}
.search-field .input:focus {
  background-color: color-mix(in oklab, var(--cream) 2%, transparent);
}
/* Our own clear button, so it looks the same in every browser. */
.search-field .input::-webkit-search-cancel-button,
.search-field .input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.search-clear {
  position: absolute;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 1.95rem; height: 1.95rem;
  border-radius: 50%;
  color: var(--text-faint);
  transition: color var(--dur-1), background var(--dur-1);
}
.search-clear:hover { color: var(--text); background: color-mix(in oklab, var(--cream) 10%, transparent); }
.search-clear svg { width: .95rem; height: .95rem; }

/* The chips scroll; the result count stays put beside them.

   `min-width: 0` on the scroller is the whole thing. A flex item will not go
   narrower than its own content by default, so the chips were laid out at
   their full 591px inside a 313px column — `overflow-x: auto` never engaged,
   and body{overflow-x:hidden} simply cut the last categories off the screen
   where no amount of scrolling could reach them. */
.menu-filters {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}
.menu-filters .chips { flex: 1 1 auto; min-width: 0; }
.menu-filters .badge { flex: none; }

.menu-section + .menu-section { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.menu-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.menu-section-head h2 { font-size: var(--fs-2xl); color: var(--gold-200); }

/* Order-partner logos */
.partner-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.partner {
  display: grid;
  gap: .3rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-800) 70%, transparent);
  text-decoration: none;
  color: var(--cream);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring), background var(--dur-2);
}
.partner:hover { border-color: var(--line-strong); transform: translateY(-3px); background: color-mix(in oklab, var(--gold-400) 8%, transparent); }
.partner strong { font-size: var(--fs-base); }
.partner span { font-size: var(--fs-xs); color: var(--text-faint); }

/* Cart lines */
.cart-line {
  display: grid;
  grid-template-columns: 3.75rem 1fr auto;
  gap: .85rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
}
.cart-line img { width: 3.75rem; height: 3.75rem; object-fit: cover; border-radius: 10px; }
.cart-line-main { display: grid; gap: .4rem; align-content: start; justify-items: start; min-width: 0; }
.cart-line-name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.cart-line-price { font-size: var(--fs-sm); color: var(--gold-200); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cart-line-remove { font-size: var(--fs-xs); color: var(--text-faint); text-decoration: underline; justify-self: end; }
.cart-line-remove:hover { color: var(--danger); }

.totals { display: grid; gap: .55rem; font-size: var(--fs-sm); }
.totals div { display: flex; justify-content: space-between; gap: 1rem; }
.totals .grand {
  padding-top: .7rem;
  margin-top: .3rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--gold-200);
}
.totals span { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Booking wizard
   -------------------------------------------------------------------------- */
.booking-layout { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 64rem) { .booking-layout { grid-template-columns: 1.55fr .95fr; } }

.step-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.step-card + .step-card { margin-top: 1.25rem; }
.step-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.35rem; }
.step-num {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--gold-300);
  font-size: var(--fs-sm);
  font-weight: 800;
  flex: none;
}
.step-head h2 { font-size: var(--fs-xl); }

/* Calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cal-month { font-family: "Cormorant Garamond", Georgia, serif; font-size: var(--fs-xl); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal-dow {
  padding-block: .4rem;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cal-day {
  min-height: clamp(2.4rem, 2rem + 1.2vw, 3rem);
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-spring);
}
.cal-day:hover:not(:disabled) { border-color: var(--line-strong); color: var(--gold-200); transform: translateY(-2px); }
.cal-day:disabled { opacity: .22; cursor: not-allowed; }
.cal-day.is-today { border-color: var(--line); color: var(--gold-300); font-weight: 700; }
.cal-day.is-selected { background: var(--grad-gold); color: #16110a; font-weight: 800; border-color: transparent; }
.cal-day.is-empty { pointer-events: none; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .5rem; }
.slot {
  padding: .6rem .3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.slot:hover { border-color: var(--line-strong); color: var(--gold-200); }
.slot[aria-pressed="true"] { background: var(--grad-gold); color: #16110a; font-weight: 700; border-color: transparent; }

/* Sticky booking summary */
.summary-card {
  position: sticky;
  top: 7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, color-mix(in oklab, var(--ink-700) 88%, var(--gold-600)), var(--ink-850));
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  box-shadow: 0 30px 70px -40px var(--shadow-color);
}
.summary-card h3 { margin-bottom: 1.1rem; }
.summary-rows { display: grid; gap: .7rem; font-size: var(--fs-sm); }
.summary-rows div { display: flex; justify-content: space-between; gap: 1rem; }
.summary-rows dt { color: var(--text-faint); }
.summary-rows dd { margin: 0; text-align: right; font-weight: 600; }
.summary-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--gold-200);
}

/* The submit button stays clickable while the wizard is incomplete so that
   pressing it can explain what is still missing. */
.btn.is-incomplete { opacity: .62; }
.btn.is-incomplete:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   Pricing / package tiers
   -------------------------------------------------------------------------- */
.tier { display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.tier.is-featured { border-color: var(--line-strong); box-shadow: var(--glow-gold); }
.tier.is-featured::before {
  content: "Most booked";
  position: absolute;
  top: 1rem; right: 1rem;
  padding: .3em .8em;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  color: #16110a;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: .5rem 0 1.35rem;
}
.tier-price .amount {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--gold-200);
}
.tier-price .per { font-size: var(--fs-sm); color: var(--text-faint); }
.tier-list { display: grid; gap: .7rem; font-size: var(--fs-sm); color: var(--text-dim); }
.tier-list li { display: flex; gap: .65rem; align-items: flex-start; }
.tier-list svg { width: 1rem; height: 1rem; margin-top: .35rem; color: var(--gold-400); flex: none; }

/* --------------------------------------------------------------------------
   Tray / catering table
   -------------------------------------------------------------------------- */
.tray-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tray-table th, .tray-table td { padding: .8rem .65rem; text-align: left; border-bottom: 1px solid var(--line); }
.tray-table th {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-300);
  white-space: nowrap;
}
.tray-table tbody th {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cream);
  white-space: normal;
}
.tray-table td.num, .tray-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tray-table tbody tr { transition: background var(--dur-1); }
.tray-table tbody tr:hover { background: color-mix(in oklab, var(--gold-400) 6%, transparent); }
.table-scroll { overflow-x: auto; border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  grid-auto-rows: 12rem;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  cursor: zoom-in;
  padding: 0;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), filter .5s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--ink-900) 85%, transparent));
  opacity: 0;
  transition: opacity var(--dur-2);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: .85rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-200);
  text-align: left;
  translate: 0 .6rem;
  opacity: 0;
  transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out);
}
.gallery-item:hover figcaption { opacity: 1; translate: 0; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

/* The dish photographs carry the Taj wordmark across their top third; bias the
   crop downwards so the food, not the logo, fills the cell. */
.gallery-grid.is-dishes img { object-position: center 92%; }
.gallery-grid.is-dishes .wide img { object-position: center 74%; }
@media (max-width: 34rem) { .gallery-item.wide { grid-column: span 1; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(2rem, 1rem + 3.5vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .contact-layout { grid-template-columns: 1.05fr .95fr; } }

.info-card { display: grid; gap: 1.35rem; padding: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); }
.info-row { display: flex; gap: 1rem; align-items: flex-start; }
.info-row svg { width: 1.35rem; height: 1.35rem; color: var(--gold-400); flex: none; margin-top: .18rem; }
.info-row h3 { font-family: "Manrope", sans-serif; font-size: var(--fs-base); font-weight: 700; margin-bottom: .25rem; }
.info-row p, .info-row a { font-size: var(--fs-sm); color: var(--text-dim); text-decoration: none; margin: 0; }
.info-row a:hover { color: var(--gold-200); }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Tints Google's light map to match the dark theme; hover restores it. */
  filter: invert(1) hue-rotate(180deg) saturate(.65) brightness(.92) contrast(.95);
  transition: filter var(--dur-3);
}
.map-frame:hover { filter: none; }
.map-frame iframe { border: 0; width: 100%; height: 100%; }

.hours-list { display: grid; gap: .55rem; font-size: var(--fs-sm); }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px dashed color-mix(in oklab, var(--gold-400) 16%, transparent); }
.hours-list li:last-child { border-bottom: 0; }
.hours-list .day { color: var(--text-dim); }
.hours-list .time { color: var(--cream); font-variant-numeric: tabular-nums; }
.hours-list li.is-closed .time { color: var(--text-faint); }
.hours-list li.is-today { color: var(--gold-200); }
.hours-list li.is-today .day, .hours-list li.is-today .time { color: var(--gold-200); font-weight: 700; }

.open-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35em .85em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.open-pill.is-open { background: color-mix(in oklab, var(--jade) 18%, transparent); color: var(--jade); }
.open-pill.is-closed { background: color-mix(in oklab, var(--cream) 10%, transparent); color: var(--text-faint); }
.open-pill i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.open-pill.is-open i { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 130% at 50% 0%, color-mix(in oklab, var(--gold-400) 16%, transparent), transparent 68%),
    linear-gradient(180deg, var(--ink-850), var(--ink-900));
}
.cta-band .wrap { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band .cluster { justify-content: center; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Misc page bits
   -------------------------------------------------------------------------- */
.note {
  display: flex;
  gap: .7rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--gold-400) 6%, transparent);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.note svg { width: 1.1rem; height: 1.1rem; color: var(--gold-400); flex: none; margin-top: .22rem; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.5rem; font-size: var(--fs-2xl); }
.prose h3 { margin-top: 1.85rem; }
.prose ul { display: grid; gap: .6rem; padding-left: 1.15rem; list-style: disc; color: var(--text-dim); }
.prose li::marker { color: var(--gold-500); }


/* ==========================================================================
   Light theme corrections
   ========================================================================== */

/* The hero photograph was sunk to 38% so cream type could sit on it. Against
   ivory the opposite is true — the picture has to come forward or the veils
   bleach it away entirely. */
/* Near-black swallows a busy interior shot; ivory does not. At the opacity
   that works on the dark theme the photograph competes with the headline and
   with the arch, and the whole hero turns to mud. Here it is pulled back to
   warm texture, so the dish in the arch is the only actual photograph — the
   same composition the dark theme arrives at by other means. */
:root[data-theme="light"] .hero-bg img {
  opacity: .3;
  filter: saturate(.6) contrast(.95) brightness(1.05);
}
:root[data-theme="light"] .hero-bg::after {
  background:
    linear-gradient(100deg,
      var(--ink-900) 14%,
      color-mix(in oklab, var(--ink-900) 88%, transparent) 52%,
      color-mix(in oklab, var(--ink-900) 60%, transparent) 88%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--ink-900) 92%, transparent) 0%,
      transparent 30%,
      var(--ink-900) 97%);
}

/* "Added" turns the button jade; the deepened light-mode jade needs pale
   type on it rather than the near-black used on the brighter dark-mode one. */
:root[data-theme="light"] .add-btn.is-added { color: #f2fbf6; }

/* The marquee and the sticky menu toolbar both float over the page on a
   translucent ground — on paper they need to be opaque enough to hide what
   scrolls beneath them. */
:root[data-theme="light"] .marquee { background: color-mix(in oklab, #efe6d3 88%, transparent); }
:root[data-theme="light"] .menu-toolbar { background: color-mix(in oklab, var(--ink-900) 96%, transparent); }

/* Panels that were "one step lighter than the page" have to become one step
   deeper instead, or they disappear into it. */
:root[data-theme="light"] .cta-band::before {
  background:
    radial-gradient(60% 130% at 50% 0%, color-mix(in oklab, var(--gold-500) 20%, transparent), transparent 68%),
    linear-gradient(180deg, #f1e9d7, #f6f1e7);
}
:root[data-theme="light"] .info-card { box-shadow: var(--shadow-card); }

/* Gallery captions ride a scrim over the photograph, so they stay light. */
:root[data-theme="light"] .gallery-item::after {
  background: linear-gradient(180deg, transparent 45%, color-mix(in oklab, #16110a 82%, transparent));
}
:root[data-theme="light"] .gallery-item figcaption { color: #f3e2a4; }