/* =========================================================================
   home.css — Editorial-only styles for index.html
   Loaded AFTER styles.css. Scoped to .is-home so it doesn't bleed.
   ========================================================================= */

.is-home {
  --h-bg: #EFE6D4;          /* warmer than global bg — feels like cream paper */
  --h-ink: #1E1C1A;         /* deeper ink for editorial contrast */
  --h-terra: #B35E33;       /* deeper terracotta for colour-block */
  --h-terra-deep: #7C3F21;
  --h-leaf: #3E4A3D;        /* deeper banana-leaf */
  --h-rule: #CDC3AC;
}

.is-home { background: var(--h-bg); color: var(--h-ink); }

/* --- Paper-grain overlay ------------------------------------------------ */

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s5);
  align-items: center;
  padding: 14px var(--container-pad);
  border-bottom: 1px solid var(--h-rule);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
}
.masthead .m-left  { text-align: left;  opacity: .72; }
.masthead .m-cent  { font-family: var(--font-display); font-size: 18px; letter-spacing: 0; text-transform: none; opacity: 1; }
.masthead .m-cent b { color: var(--h-terra); font-weight: 500; font-style: italic; }
.masthead .m-right { text-align: right; opacity: .72; }
@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr; gap: 6px; text-align: center; padding: 12px var(--container-pad); }
  .masthead .m-left, .masthead .m-right { text-align: center; }
}

/* --- Subnav ------------------------------------------------------------- */

.subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(239, 230, 212, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--h-rule);
}
.subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-pad);
  height: 56px;
}
.subnav ul {
  display: flex; gap: var(--s6);
  list-style: none; margin: 0; padding: 0;
}
.subnav a {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .72;
  transition: opacity var(--m-fast) var(--ease), color var(--m-fast) var(--ease);
}
.subnav a:hover, .subnav a.is-active { opacity: 1; color: var(--h-terra); }
.subnav .reserve {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--h-terra);
  opacity: 1;
  border-bottom: 1px solid var(--h-terra);
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  .subnav ul { display: none; }
}

/* --- HERO (type-driven, asymmetric) ------------------------------------ */

.hero-ed {
  position: relative;
  padding: clamp(32px, 5vh, 64px) var(--container-pad) var(--s6);
  min-height: 94vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--s6);
}

.hero-ed-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  position: relative;
}
@media (max-width: 900px) {
  .hero-ed-grid { grid-template-columns: 1fr; gap: var(--s7); }
}

/* Vertical spine text on the far left */
.hero-spine {
  position: absolute;
  left: -28px;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .38;
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 900px) { .hero-spine { display: none; } }

.hero-kannada {
  font-family: 'Noto Sans Kannada', var(--font-display), sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: 0;
  color: var(--h-terra);
  margin-bottom: var(--s5);
  line-height: 1.05;
  display: block;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
  margin-bottom: var(--s6);
}
.hero-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--h-ink); opacity: .4;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 9.4vw, 148px);
  line-height: .94;
  letter-spacing: -0.02em;
  color: var(--h-ink);
  margin: 0 0 var(--s7) 0;
}
.hero-headline em {
  font-style: italic;
  color: var(--h-terra);
  font-weight: 400;
}
.hero-headline .indent { display: inline-block; margin-left: 1.6em; }
.hero-headline .outdent { display: inline-block; margin-left: -.1em; }

.hero-sub {
  max-width: 36ch;
  font-size: clamp(16px, 1.15vw, 18px);
  color: var(--h-ink);
  opacity: .78;
  line-height: 1.55;
  margin: 0 0 var(--s6) 0;
}

.hero-image-panel {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Bleed to the right edge of the viewport */
  margin-right: calc(var(--container-pad) * -1);
}
@media (max-width: 900px) { .hero-image-panel { margin-right: 0; } }

.hero-image-panel .panel-img {
  position: relative;
  aspect-ratio: 4/5;
  background-color: #4A2C18;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 60%, rgba(30,28,26,.48) 100%),
    url("https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1600&q=85&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-image-panel .panel-img::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode: overlay;
  opacity: .35;
}
.hero-image-panel .panel-img::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 18px 18px 18px;
  color: rgba(255,255,255,.82);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.3;
}
.hero-image-panel .panel-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .55;
}

/* Ledger at base of hero */
.hero-ledger {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--h-rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: var(--s6);
  align-items: end;
}
@media (max-width: 900px) {
  .hero-ledger { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}
.hero-ledger .unit {
  display: flex; flex-direction: column; gap: 4px;
}
.hero-ledger .unit b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .9;
  letter-spacing: -0.02em;
  color: var(--h-ink);
}
.hero-ledger .unit span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
}
.hero-ledger .scroll {
  align-self: end;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .5;
  writing-mode: horizontal-tb;
  display: flex; align-items: center; gap: 10px;
}
.hero-ledger .scroll::after { content: "↓"; font-size: 16px; }
@media (max-width: 900px) { .hero-ledger .scroll { display: none; } }

/* --- Ticker (black band with editorial ledger) ------------------------- */

.ticker {
  background: var(--h-ink);
  color: var(--h-bg);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  margin-top: 0;
}
.ticker-inner {
  display: flex;
  gap: var(--s6);
  white-space: nowrap;
  animation: ticker 48s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -.005em;
  opacity: .92;
}
.ticker-inner span.sep {
  display: inline-flex; align-items: center;
  color: var(--h-terra);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 14px;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; }
}

/* --- 8-pointed Hoysala star divider ------------------------------------ */

.star-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s5) 0;
}
.star-rule::before, .star-rule::after {
  content: "";
  flex: 1;
  max-width: 90px;
  height: 1px;
  background: var(--h-rule);
}
.star-rule svg {
  width: 14px; height: 14px;
  color: var(--h-terra);
  opacity: .7;
}

/* --- Folio index (pillar grid reimagined) ------------------------------ */

.folio {
  padding: clamp(56px, 8vh, 110px) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
}
.folio-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: var(--s7);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--h-rule);
}
.folio-head h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--h-ink);
}
.folio-head h2 em { color: var(--h-terra); font-weight: 400; }
.folio-head .pagination {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
}

.folio-row {
  display: grid;
  grid-template-columns: 72px 1fr 340px 40px;
  gap: var(--s6);
  padding: var(--s7) 0;
  border-bottom: 1px solid var(--h-rule);
  align-items: center;
  color: var(--h-ink);
  transition: background var(--m-base) var(--ease), padding var(--m-base) var(--ease);
  position: relative;
}
.folio-row:last-of-type { border-bottom: 1px solid transparent; }
.folio-row:hover {
  background: linear-gradient(90deg, rgba(179,94,51,0) 0%, rgba(179,94,51,.06) 60%, rgba(179,94,51,0) 100%);
}
.folio-row:hover .folio-thumb { transform: scale(1.015); }
.folio-row:hover .folio-arrow { transform: translateX(8px); color: var(--h-terra); }
/* Reverse variant — HTML source order is num, thumb, body, arrow.
   Grid columns match that order so no reflow hacks are needed. */
.folio-row.reverse {
  grid-template-columns: 72px 340px 1fr 40px;
}
.folio-row.reverse .folio-body { padding-left: var(--s4); }
@media (max-width: 900px) {
  .folio-row, .folio-row.reverse {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "num body"
      "thumb thumb";
    gap: var(--s4);
  }
  .folio-row .folio-num        { grid-area: num; }
  .folio-row .folio-body       { grid-area: body; padding-left: 0 !important; }
  .folio-row .folio-thumb-slot { grid-area: thumb; margin-top: var(--s4); }
  .folio-row .folio-arrow      { display: none; }
}

.folio-num {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--h-ink);
  opacity: .35;
  font-variant-numeric: lining-nums;
}
.folio-row:hover .folio-num { opacity: 1; color: var(--h-terra); }

.folio-body .folio-eye {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
  margin-bottom: var(--s3);
}
.folio-body h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 52px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--h-ink);
  margin: 0 0 var(--s3) 0;
}
.folio-body h3::before { content: "\201C"; opacity: .5; margin-right: 4px; }
.folio-body h3::after  { content: "\201D"; opacity: .5; margin-left: 4px; }
.folio-body p {
  color: var(--h-ink); opacity: .72;
  max-width: 38ch;
  margin: 0;
  font-size: 15px;
}

.folio-thumb-slot { align-self: stretch; }
.folio-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  transition: transform var(--m-slow) var(--ease);
}
.folio-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.18'/></svg>");
  mix-blend-mode: overlay; z-index: 1; opacity: .5;
}
.folio-thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px; left: 12px; right: 12px;
  color: rgba(255,255,255,.85);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  z-index: 2;
}
.t-stays {
  background-color: #4E2D17;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 50%, rgba(30,28,26,.4) 100%),
    url("https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=1000&q=80&auto=format&fit=crop");
  background-size: cover; background-position: center;
}
.t-dining {
  background-color: #2A2D23;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 50%, rgba(30,28,26,.4) 100%),
    url("https://images.unsplash.com/photo-1676716260600-217008b2e00a?w=1000&q=80&auto=format&fit=crop");
  background-size: cover; background-position: center;
}
.t-events {
  background-color: #3F2D18;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 50%, rgba(30,28,26,.4) 100%),
    url("https://images.unsplash.com/photo-1587271636175-90d58cdad458?w=1000&q=80&auto=format&fit=crop");
  background-size: cover; background-position: center;
}
.t-celebrate {
  background-color: #5A2B12;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 50%, rgba(30,28,26,.4) 100%),
    url("https://images.unsplash.com/photo-1536392706976-e486e2ba97af?w=1000&q=80&auto=format&fit=crop");
  background-size: cover; background-position: center;
}

.folio-arrow {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--h-ink);
  opacity: .35;
  transition: transform var(--m-base) var(--ease), color var(--m-base) var(--ease), opacity var(--m-base) var(--ease);
  justify-self: end;
}
.folio-row:hover .folio-arrow { opacity: 1; }

/* --- Bleed pull-quote moment ------------------------------------------- */

.bleed {
  position: relative;
  height: 66vh;
  min-height: 460px;
  overflow: hidden;
  background-color: #6C4527;
  background-image: url("https://images.unsplash.com/photo-1564078516393-cf04bd966897?w=2000&q=82&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}
.bleed::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(30,28,26,.15) 0%, rgba(30,28,26,.45) 100%),
    radial-gradient(70% 90% at 70% 40%, rgba(255,230,200,.14), transparent 60%);
}
.bleed::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%);
}
.bleed-label {
  position: absolute;
  top: var(--s6); left: var(--container-pad);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,243,236,.75);
  z-index: 2;
}
.bleed-quote {
  position: absolute;
  bottom: var(--s8); right: var(--container-pad);
  max-width: 460px;
  padding: var(--s6);
  background: var(--h-bg);
  color: var(--h-ink);
  border: 1px solid var(--h-rule);
  z-index: 2;
}
.bleed-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.25;
  margin: 0 0 var(--s4) 0;
}
.bleed-quote cite {
  display: block;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
}
@media (max-width: 720px) {
  .bleed-quote { position: relative; bottom: 0; right: 0; margin: 55vh 20px 20px; max-width: none; }
}

/* --- About editorial (drop cap + aside) ------------------------------- */

.about-ed {
  padding: clamp(64px, 9vh, 120px) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(40px, 7vw, 120px);
}
@media (max-width: 900px) {
  .about-ed { grid-template-columns: 1fr; gap: var(--s6); }
}

.about-aside {
  border-top: 1px solid var(--h-ink);
  padding-top: var(--s5);
  display: grid;
  gap: var(--s4);
}
.about-aside .pair {
  display: grid; gap: 2px;
}
.about-aside .pair span {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .55;
}
.about-aside .pair b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--h-ink);
}

.about-col {
  max-width: 720px;
}
.about-col .tag {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-terra);
  margin-bottom: var(--s5);
  display: inline-block;
}
.about-col p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.25;
  color: var(--h-ink);
  margin: 0 0 var(--s6) 0;
}
.about-col p em { color: var(--h-terra); }

.drop-cap {
  float: left;
  font-family: var(--font-display);
  font-size: 5.4em;
  line-height: .82;
  margin: .04em .08em -.1em 0;
  color: var(--h-terra);
  font-style: italic;
  font-weight: 400;
}

.about-col .signoff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--h-ink);
  margin-top: var(--s5);
  border-bottom: 1px solid var(--h-ink);
  padding-bottom: 4px;
}
.about-col .signoff::after { content: "→"; }
.about-col .signoff:hover { color: var(--h-terra); border-color: var(--h-terra); }

/* --- Kalash moment ---------------------------------------------------- */

.kalash-section {
  padding: clamp(64px, 9vh, 110px) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative;
}
@media (max-width: 900px) {
  .kalash-section { grid-template-columns: 1fr; gap: var(--s6); }
  .kalash-section .k-img { order: 3; }
}

.k-icon {
  width: clamp(90px, 12vw, 160px);
  color: var(--h-terra);
  opacity: .9;
  flex-shrink: 0;
}

.k-body .eye {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
  margin-bottom: var(--s4);
  display: inline-block;
}
.k-body h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 56px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 var(--s5) 0;
}
.k-body h2::before { content: "\201C"; opacity: .5; margin-right: 4px; }
.k-body h2::after  { content: "\201D"; opacity: .5; margin-left: 4px; }
.k-body p {
  max-width: 42ch;
  color: var(--h-ink);
  opacity: .78;
  margin: 0 0 var(--s5);
}
.k-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s6);
  margin-bottom: var(--s6);
}
.k-stats .u { display: grid; gap: 2px; }
.k-stats .u b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -.01em;
  color: var(--h-ink);
}
.k-stats .u span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .55;
}

.k-img {
  width: 260px;
  aspect-ratio: 3/4;
  background-color: #3F2C18;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.5) 100%),
    url("https://images.unsplash.com/photo-1523438885200-e635ba2c371e?w=900&q=82&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  position: relative;
}
.k-img::before {
  content: "PHOTOGRAPHED — KALASH BANQUET HALL";
  position: absolute; inset: auto 12px 10px 12px;
  color: rgba(255,255,255,.88);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* --- Leaf colour-block section ---------------------------------------- */

.leaf-section {
  background: var(--h-terra);
  color: #F5EBDA;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
@media (max-width: 900px) {
  .leaf-section { grid-template-columns: 1fr; }
}

/* Left: pure terracotta colour block with text */
.leaf-text {
  padding: clamp(64px, 9vh, 110px) clamp(32px, 5vw, 88px);
  align-self: center;
  max-width: 680px;
  position: relative;
}

/* Subtle banana-leaf line motif — single, monochrome, placed as watermark */
.leaf-text::before {
  content: "";
  position: absolute;
  top: 20px; right: 20px;
  width: 72px; height: 140px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 140' fill='none' stroke='%23F5EBDA' stroke-width='1.2' stroke-linecap='round'><path d='M36 4 C58 30 62 70 58 105 C54 128 44 136 36 136 C28 136 18 128 14 105 C10 70 14 30 36 4 Z' stroke-opacity='0.22'/><line x1='36' y1='8' x2='36' y2='132' stroke-opacity='0.25'/><line x1='36' y1='32' x2='18' y2='58' stroke-opacity='0.18'/><line x1='36' y1='32' x2='54' y2='58' stroke-opacity='0.18'/><line x1='36' y1='60' x2='16' y2='88' stroke-opacity='0.18'/><line x1='36' y1='60' x2='56' y2='88' stroke-opacity='0.18'/><line x1='36' y1='88' x2='18' y2='112' stroke-opacity='0.18'/><line x1='36' y1='88' x2='54' y2='112' stroke-opacity='0.18'/></svg>") no-repeat center/contain;
  opacity: .6;
  pointer-events: none;
}

/* Right: clean dosa photo, no overlay */
.leaf-image {
  position: relative;
  background-image:
    linear-gradient(270deg, rgba(30,28,26,0) 70%, rgba(124,63,33,.15) 100%),
    url("https://images.unsplash.com/photo-1668236543090-82eba5ee5976?w=1600&q=85&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  min-height: 460px;
}
.leaf-image::after {
  content: "PHOTOGRAPHED — BENNE DOSE / LEAF RESTAURANT";
  position: absolute;
  bottom: 16px; left: 20px; right: 20px;
  color: rgba(245, 235, 218, .88);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .leaf-image { min-height: 340px; order: -1; }
}
.leaf-text .eye {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245,235,218,.7);
  margin-bottom: var(--s5);
  display: inline-block;
}
.leaf-text h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #F5EBDA;
  margin: 0 0 var(--s5) 0;
  max-width: 14ch;
}
.leaf-text .lead {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 20px);
  font-style: normal;
  line-height: 1.5;
  color: rgba(245,235,218,.82);
  margin: 0 0 var(--s6) 0;
  max-width: 40ch;
}
.leaf-text .signoff {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #F5EBDA;
  border-bottom: 1px solid rgba(245,235,218,.45);
  padding-bottom: 4px;
  transition: border-color var(--m-fast) var(--ease);
  margin-bottom: var(--s6);
}
.leaf-text .signoff::after { content: "→"; }
.leaf-text .signoff:hover { border-color: #F5EBDA; }

.leaf-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s6);
  max-width: 480px;
}
@media (max-width: 640px) { .leaf-meta { grid-template-columns: 1fr; } }
.leaf-meta .u {
  display: grid; gap: 2px;
  padding-top: var(--s3);
  border-top: 1px solid rgba(245,235,218,.18);
}
.leaf-meta .u span {
  font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,235,218,.6);
}
.leaf-meta .u b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: #F5EBDA;
}

/* --- Location editorial ---------------------------------------------- */

.loc-ed {
  padding: clamp(64px, 9vh, 110px) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .loc-ed { grid-template-columns: 1fr; } }

.loc-head .eye {
  font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
  margin-bottom: var(--s4);
  display: inline-block;
}
.loc-head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 62px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0 0 var(--s6) 0;
}
.loc-head h2::before { content: "\201C"; opacity: .5; }
.loc-head h2::after  { content: "\201D"; opacity: .5; }
.loc-head p {
  max-width: 40ch;
  color: var(--h-ink); opacity: .78;
  margin: 0 0 var(--s6) 0;
}

.loc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
}
.loc-list li {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) 0;
  border-top: 1px dashed var(--h-rule);
  font-size: 15px;
}
.loc-list li:last-child { border-bottom: 1px dashed var(--h-rule); }
.loc-list .dist {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--h-terra);
  font-variant-numeric: tabular-nums;
}
.loc-list .name { color: var(--h-ink); }
.loc-list .mode {
  font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink); opacity: .5;
  justify-self: end;
}

.loc-map {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--h-bg);
  border: 1px solid var(--h-rule);
  overflow: hidden;
}
.loc-map svg { width: 100%; height: 100%; display: block; }
.loc-map .pin-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -130%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--h-terra);
  background: var(--h-bg);
  padding: 2px 10px;
  white-space: nowrap;
}
.loc-map .caption {
  position: absolute;
  bottom: 14px; left: 14px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .55;
}

/* --- Reservation mega CTA -------------------------------------------- */

.reserve-mega {
  padding: clamp(80px, 12vh, 150px) var(--container-pad);
  text-align: left;
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.reserve-mega .eye {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-ink);
  opacity: .6;
  margin-bottom: var(--s6);
  display: inline-block;
}
.reserve-mega h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 12vw, 200px);
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--h-ink);
  margin: 0 0 var(--s7) 0;
}
.reserve-mega h2 em {
  color: var(--h-terra);
  font-style: italic;
}
.reserve-mega .tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 40px);
  color: var(--h-ink);
  border-bottom: 1px solid var(--h-ink);
  padding-bottom: 8px;
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.reserve-mega .tel::before { content: "↘"; color: var(--h-terra); }
.reserve-mega .tel:hover { color: var(--h-terra); border-color: var(--h-terra); }
.reserve-mega .sub {
  display: block;
  margin-top: var(--s5);
  font-size: 14px;
  color: var(--h-ink);
  opacity: .65;
  max-width: 42ch;
}

/* --- Ed footer -------------------------------------------------------- */

.ed-footer {
  background: var(--h-ink);
  color: var(--h-bg);
  padding: var(--s8) var(--container-pad) var(--s5);
}
.ed-footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--s7);
}
@media (max-width: 900px) {
  .ed-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}
@media (max-width: 560px) {
  .ed-footer-inner { grid-template-columns: 1fr; }
}
.ed-footer .brand {
  font-family: var(--font-display);
  font-size: 30px;
  margin-bottom: var(--s4);
  display: block;
}
.ed-footer .brand em { color: var(--h-terra); font-style: italic; }
.ed-footer p, .ed-footer a, .ed-footer li {
  color: rgba(239,230,212,.72);
  font-size: 13px;
  margin: 0;
}
.ed-footer a:hover { color: var(--h-terra); }
.ed-footer h4 {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(239,230,212,.5);
  margin: 0 0 var(--s4) 0;
  font-weight: 500;
}
.ed-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }

.ed-footer-ledger {
  max-width: var(--container);
  margin: var(--s6) auto 0;
  padding-top: var(--s4);
  border-top: 1px solid rgba(239,230,212,.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239,230,212,.55);
}
@media (max-width: 720px) {
  .ed-footer-ledger { grid-template-columns: repeat(2, 1fr); }
}

.ed-copy {
  max-width: var(--container);
  margin: var(--s5) auto 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font-size: 11px;
  color: rgba(239,230,212,.45);
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (max-width: 560px) { .ed-copy { flex-direction: column; } }

/* --- Reveal (subtle editorial) --------------------------------------
   Default: visible. No-JS / slow-JS users get working content.
   When body.js-ready is set, unobserved elements animate in. */

.ed-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
body.js-ready .ed-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}
body.js-ready .ed-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ed-reveal,
  body.js-ready .ed-reveal,
  body.js-ready .ed-reveal:not(.is-visible) {
    opacity: 1; transform: none; transition: none;
  }
}

/* --- Utility overrides just for home --------------------------------- */

.is-home .hidden-home { display: none; }

/* =========================================================================
   MENU — Toggle trigger + full-screen editorial overlay
   ========================================================================= */

/* --- Trigger in masthead --------------------------------------------- */

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--h-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  z-index: 90;
  transition: color var(--m-base) var(--ease);
}
.menu-trigger:hover { color: var(--h-terra); }

.menu-trigger .t-word {
  display: inline-block;
  transition: opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease);
  min-width: 3.4em;
  text-align: right;
  padding-right: 2px;
}
.menu-trigger .t-word.t-close {
  position: absolute;
  right: 36px;
  opacity: 0;
  transform: translateY(6px);
}

.menu-trigger .t-mark {
  position: relative;
  width: 22px;
  height: 14px;
  flex-shrink: 0;
}
.menu-trigger .t-mark .ln {
  position: absolute;
  left: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform var(--m-base) var(--ease),
              width var(--m-base) var(--ease),
              top var(--m-base) var(--ease),
              opacity var(--m-base) var(--ease);
}
.menu-trigger .t-mark .ln:nth-child(1) { top: 2px;  width: 100%; }
.menu-trigger .t-mark .ln:nth-child(2) { top: 7px;  width: 70%; }
.menu-trigger .t-mark .ln:nth-child(3) { top: 12px; width: 88%; }

/* Open state — morph to × */
.is-home.menu-open .menu-trigger .t-word.t-open {
  opacity: 0;
  transform: translateY(-6px);
}
.is-home.menu-open .menu-trigger .t-word.t-close {
  opacity: 1;
  transform: translateY(0);
}
.is-home.menu-open .menu-trigger .t-mark .ln:nth-child(1) {
  top: 7px;
  width: 100%;
  transform: rotate(45deg);
}
.is-home.menu-open .menu-trigger .t-mark .ln:nth-child(2) {
  opacity: 0;
  width: 0;
}
.is-home.menu-open .menu-trigger .t-mark .ln:nth-child(3) {
  top: 7px;
  width: 100%;
  transform: rotate(-45deg);
}

/* Masthead needs to stay above the overlay so trigger is reachable */
.is-home.menu-open .masthead {
  position: relative;
  z-index: 85;
  background: var(--h-bg);
}

/* --- Overlay scaffold ------------------------------------------------- */

body.is-home { overflow-x: hidden; }
body.is-home.menu-open { overflow: hidden; }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--h-bg);
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity 420ms var(--ease-out), clip-path 520ms var(--ease);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}
.is-home.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0 0 0% 0);
}

/* Paper texture inside overlay */
.menu-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .42;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- Top bar inside overlay (brand centered) ------------------------- */

.menu-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--container-pad);
  border-bottom: 1px solid var(--h-rule);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--h-ink);
  position: relative;
  z-index: 1;
}
.menu-topbar .tb-left { opacity: .6; }
.menu-topbar .tb-cent {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.menu-topbar .tb-cent b { color: var(--h-terra); font-weight: 500; font-style: italic; }
.menu-topbar .tb-right { text-align: right; opacity: .6; }
@media (max-width: 720px) {
  .menu-topbar { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .menu-topbar .tb-left, .menu-topbar .tb-right { display: none; }
}

/* --- Body: list + preview ------------------------------------------- */

.menu-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 8vh, 96px) var(--container-pad);
  align-items: stretch;
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 900px) {
  .menu-body { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s6) var(--container-pad); }
}

/* List of menu items */
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  align-content: start;
  gap: clamp(8px, 1.4vh, 18px);
}

.menu-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--s5);
  align-items: baseline;
  padding: clamp(10px, 1.4vh, 18px) 0;
  border-bottom: 1px solid transparent;
  color: var(--h-ink);
  text-decoration: none;
  position: relative;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), color var(--m-base) var(--ease);
}
.is-home.menu-open .menu-item { opacity: 1; transform: translateX(0); }

/* staggered entrance */
.is-home.menu-open .menu-item:nth-child(1) { transition-delay: 180ms; }
.is-home.menu-open .menu-item:nth-child(2) { transition-delay: 250ms; }
.is-home.menu-open .menu-item:nth-child(3) { transition-delay: 320ms; }
.is-home.menu-open .menu-item:nth-child(4) { transition-delay: 390ms; }
.is-home.menu-open .menu-item:nth-child(5) { transition-delay: 460ms; }
.is-home.menu-open .menu-item:nth-child(6) { transition-delay: 530ms; }
.is-home.menu-open .menu-item:nth-child(7) { transition-delay: 600ms; }

.menu-item::after {
  content: "";
  position: absolute;
  left: 48px; right: 0; bottom: 0;
  height: 1px;
  background: var(--h-rule);
  transform-origin: left;
  transform: scaleX(1);
  transition: background var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
.menu-item:last-child::after { background: transparent; }

/* Left-edge terracotta indicator that slides in on hover */
.menu-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--h-terra);
  transform: translateY(-50%);
  transition: height var(--m-base) var(--ease);
}
.menu-item:hover::before,
.menu-item:focus-visible::before {
  height: 70%;
}

.menu-item .m-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--h-ink);
  opacity: .45;
  font-variant-numeric: lining-nums;
  letter-spacing: .02em;
  transition: color var(--m-base) var(--ease), opacity var(--m-base) var(--ease);
}

.menu-item .m-main {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: var(--s5);
  align-items: baseline;
}
@media (max-width: 640px) {
  .menu-item .m-main { grid-template-columns: 1fr; gap: 2px; }
  .menu-item { grid-template-columns: 36px 1fr auto; }
}

.menu-item .m-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--h-ink);
  transition: color var(--m-base) var(--ease), transform var(--m-base) var(--ease);
  display: inline-block;
}

.menu-item .m-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.35vw, 22px);
  color: var(--h-ink);
  opacity: .7;
  line-height: 1.3;
  max-width: 42ch;
  transition: opacity var(--m-base) var(--ease), color var(--m-base) var(--ease);
}
.menu-item .m-tag::before { content: "\201C"; margin-right: 2px; }
.menu-item .m-tag::after  { content: "\201D"; margin-left: 2px; }

.menu-item .m-arrow {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--h-ink);
  opacity: .35;
  transform: translateX(0);
  transition: transform var(--m-base) var(--ease), color var(--m-base) var(--ease), opacity var(--m-base) var(--ease);
}

/* Hover / active interactions */
.menu-item:hover,
.menu-item:focus-visible {
  outline: none;
  color: var(--h-terra);
}
.menu-item:hover .m-num,
.menu-item:focus-visible .m-num { color: var(--h-terra); opacity: 1; }
.menu-item:hover .m-title,
.menu-item:focus-visible .m-title { color: var(--h-terra); transform: translateX(10px); }
.menu-item:hover .m-tag,
.menu-item:focus-visible .m-tag { color: var(--h-terra); opacity: .9; }
.menu-item:hover .m-arrow,
.menu-item:focus-visible .m-arrow { color: var(--h-terra); opacity: 1; transform: translateX(12px); }
.menu-item:hover::after,
.menu-item:focus-visible::after { background: var(--h-terra); }

/* --- Preview panel --------------------------------------------------- */

.menu-preview {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: var(--s6);
  border: 1px solid var(--h-rule);
  background: #E8DDC5;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 620ms var(--ease-out) 300ms, transform 620ms var(--ease-out) 300ms;
}
.is-home.menu-open .menu-preview { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .menu-preview { min-height: 260px; }
}

.menu-preview .preview-stack {
  position: absolute; inset: 0;
  overflow: hidden;
}
.menu-preview .preview-frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease);
  background-size: cover;
  background-position: center;
}
.menu-preview .preview-frame.is-active { opacity: 1; }

.menu-preview .preview-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode: overlay;
  opacity: .4;
}

.preview-frame[class*="preview-"] {
  background-size: cover;
  background-position: center;
}

.preview-default {
  background-color: #B9A77F;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.5) 100%),
    url("https://images.unsplash.com/photo-1495365200479-c4ed1d35e1aa?w=1400&q=82&auto=format&fit=crop");
}
.preview-stays {
  background-color: #4E2D17;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%),
    url("https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1400&q=82&auto=format&fit=crop");
}
.preview-dining {
  background-color: #1E261D;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%),
    url("https://images.unsplash.com/photo-1676716244847-3fae1a2afb5b?w=1400&q=82&auto=format&fit=crop");
}
.preview-events {
  background-color: #3F2D18;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%),
    url("https://images.unsplash.com/photo-1587271407850-8d438ca9fdf2?w=1400&q=82&auto=format&fit=crop");
}
.preview-offers {
  background-color: #5A2B12;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%),
    url("https://images.unsplash.com/photo-1615500025837-cf3a8716c83d?w=1400&q=82&auto=format&fit=crop");
}
.preview-location {
  background-color: #3A332A;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.6) 100%),
    url("https://images.unsplash.com/photo-1695692929156-69dc2e6444c4?w=1400&q=82&auto=format&fit=crop");
}
.preview-about {
  background-color: #4A4439;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%),
    url("https://images.unsplash.com/photo-1625244724120-1fd1d34d00f6?w=1400&q=82&auto=format&fit=crop");
}
.preview-contact {
  background-color: #4A3C20;
  background-image:
    linear-gradient(180deg, rgba(30,28,26,0) 55%, rgba(30,28,26,.55) 100%),
    url("https://images.unsplash.com/photo-1573052905904-34ad8c27f0cc?w=1400&q=82&auto=format&fit=crop");
}

.menu-preview .preview-head {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  color: rgba(245, 235, 218, .88);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.menu-preview .preview-head svg {
  width: 12px; height: 12px;
  color: rgba(245, 235, 218, .7);
}

.menu-preview .preview-caption {
  position: relative; z-index: 2;
  color: #F5EBDA;
}
.menu-preview .preview-caption .kn {
  font-family: 'Noto Sans Kannada', var(--font-display), sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.05;
  color: #F5EBDA;
  display: block;
  margin-bottom: var(--s4);
  opacity: .95;
}
.menu-preview .preview-caption .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.2;
  color: #F5EBDA;
  margin: 0 0 var(--s3) 0;
}
.menu-preview .preview-caption .meta {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 235, 218, .7);
}

/* --- Bottom bar ------------------------------------------------------ */

.menu-bottombar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--container-pad);
  border-top: 1px solid var(--h-rule);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--h-ink);
  position: relative;
  z-index: 1;
  gap: var(--s5);
}
.menu-bottombar a { color: var(--h-ink); opacity: .8; }
.menu-bottombar a:hover { color: var(--h-terra); opacity: 1; }
.menu-bottombar .bb-left {
  display: flex; align-items: center; gap: var(--s4);
}
.menu-bottombar .bb-left::before {
  content: "CALL";
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--h-ink); opacity: .5;
}
.menu-bottombar .bb-left a {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: normal;
  letter-spacing: .02em;
  text-transform: none;
  opacity: 1;
}
.menu-bottombar .bb-cent  {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  opacity: .65;
}
.menu-bottombar .bb-right { text-align: right; }
.menu-bottombar .bb-right a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--h-terra);
  border-bottom: 1px solid var(--h-terra);
  padding-bottom: 2px;
  opacity: 1;
}
@media (max-width: 720px) {
  .menu-bottombar { grid-template-columns: 1fr; justify-items: center; gap: var(--s3); text-align: center; }
  .menu-bottombar .bb-left, .menu-bottombar .bb-right { text-align: center; }
}

/* --- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-item,
  .menu-preview,
  .menu-trigger .t-mark .ln,
  .menu-trigger .t-word,
  .preview-frame {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}