/* Oh!Mumbai — coherence pass.
   One section-header pattern, one type scale, one media scale, one vertical rhythm.
   Loads last, after styles.css / site.css / mobile.css. */

:root{
  --pad-x:  clamp(20px, 4vw, 64px);    /* page gutter at every width */
  --sec:    clamp(72px, 6.5vw, 112px); /* between sections */
  --gap-y:  clamp(24px, 2.2vw, 32px);  /* within a grid */
  --rule:   color-mix(in srgb, currentColor 22%, transparent);
}

/* ─── Container: fluid, capped, always guttered ────────────────────────────── */
.w-\[90rem\]{width:100%;max-width:90rem;padding-inline:var(--pad-x)}
.site-header header,
.menu-panel .w-\[90rem\]{padding-inline:var(--pad-x)}
/* nav labels never wrap — the gutter tightens this row at mid widths */
.site-header .col-span-5.flex > a,
.site-header .col-span-5.flex > span,
.site-header nav > a{white-space:nowrap;flex-shrink:0}
.site-header .col-span-5.flex{gap:.75rem}
main > .w-screen{width:100%}

/* the compiled Tailwind only shipped the utilities the original markup used —
   backfill the grid set so new spans actually resolve */
.col-span-1{grid-column:span 1/span 1}.col-span-7{grid-column:span 7/span 7}
.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}
.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}
.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}
.col-start-3{grid-column-start:3}.col-start-6{grid-column-start:6}
.col-start-8{grid-column-start:8}

/* ─── Vertical rhythm ─────────────────────────────────────────────────────── */
.sec{padding-block:var(--sec);row-gap:var(--gap-y)}
.sec + .sec{padding-top:0}
footer > section.pt-30{padding-top:var(--sec)}

/* ─── Heroes ──────────────────────────────────────────────────────────────── */
.hero{position:relative;height:min(88svh,880px);min-height:560px}
.hero::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(41,27,22,.38),rgba(41,27,22,.10) 45%,rgba(41,27,22,.55));
}
.page-hero{position:relative;min-height:clamp(320px,32vw,460px);padding-top:80px}
.page-hero > .absolute.inset-0::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(41,27,22,.34),rgba(41,27,22,.16) 55%,rgba(41,27,22,.36));
}

/* ─── The one section-header pattern: eyebrow + h2 (+ link), on a hairline ── */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
  padding-bottom:1.5rem;margin-bottom:calc(var(--gap-y) + .5rem);
  border-bottom:1px solid var(--rule);
}
.sec-head-t{display:flex;flex-direction:column;gap:.75rem;min-width:0;flex:1 1 30ch}
.sec-head h1,.sec-head h2{margin:0;max-width:34ch;text-wrap:balance}
.sec-head h1{max-width:22ch}
.sec-head h2 br{display:none}          /* headers wrap on measure, not on hard breaks */
.sec-head .eyebrow + h2{margin-top:0}
.sec-head > a{flex:0 0 auto}

.eyebrow{
  font-family:var(--font-geometria),sans-serif;
  font-size:.8125rem;line-height:1.3;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;margin:0;opacity:.72;
}
.caption{
  font-family:var(--font-geometria),sans-serif;
  font-size:.875rem;line-height:1.4;margin:0;opacity:.7;
}

/* ─── Type scale ──────────────────────────────────────────────────────────── */
main .text-base, footer .text-base{font-size:1.0625rem;line-height:1.58}
h1.text-\[3\.75rem\]{font-size:clamp(2.5rem,4.4vw,4rem);letter-spacing:-.015em}
h2.text-\[2\.5rem\]{font-size:clamp(1.875rem,2.9vw,2.625rem);line-height:1.1;letter-spacing:-.02em}
main h3.text-2xl, footer h3.text-2xl{font-size:clamp(1.1875rem,1.5vw,1.4375rem);line-height:1.32}
.sub{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.25}

/* prose: no hard breaks mid-paragraph, one readable measure */
main p.font-geometria br, footer p.font-geometria br{display:none}
main p.font-geometria{max-width:62ch}
.sec-close{max-width:52ch}

/* Contrast on the green ground.
   Brand green #848a4d tops out at 3.67:1 even against pure white, so 17px body
   copy could not pass 4.5:1 at any foreground — the ground was the constraint.
   Deepened to the same olive hue for the two blocks that carry body text:
   white now reads 6.2:1, the muted labels 5.6:1. Delete these two rules to
   restore the original green. */
footer.bg-green, main.bg-green{background-color:#5f6538}
main.bg-green .text-gray-light, footer .text-gray-light{color:#e8ead9}
main.bg-biege .text-gray{color:#6f665f}

/* ─── Media scale: aspect by role, no fixed pixel slabs ───────────────────── */
.media-pano{width:100%;height:auto;aspect-ratio:16/7;max-height:min(72vh,620px)}
.media-wide{width:100%;height:auto;aspect-ratio:21/9}
.media-tall{width:100%;height:auto;aspect-ratio:5/6}
.media-portrait{width:100%;height:auto;aspect-ratio:4/5}
.media-dish{width:100%;height:auto;aspect-ratio:3/4}
.media-sq{width:100%;height:auto;aspect-ratio:1/1}

/* ─── Interior gallery ────────────────────────────────────────────────────── */
.gal{row-gap:var(--gap-y)}
.gal-pair{row-gap:var(--gap-y)}
/* tiles with no intrinsic ratio fill their row instead of leaving a hole under the copy */
.gal > button.col-span-6:not(.media-pano):not(.media-tall),
.gal-fill{align-self:stretch;min-height:clamp(320px,30vw,520px)}
.gal-copy{align-self:start}
.gal .sec-close{padding-top:var(--gap-y)}

/* ─── Footer ──────────────────────────────────────────────────────────────
   Was: the same location shown twice (static map JPG + live widget) side by
   side, a contact column stretched by justify-between, and a bottom bar with
   the logo floating between two unrelated link clusters. Now: statement +
   details left, one map right, then logo · nav on the left of the bar with
   social icons alone on the right. */
footer > section{padding-top:var(--sec);row-gap:0}
footer .col-span-6.justify-between{justify-content:flex-start;gap:clamp(28px,3vw,44px)}
footer .col-span-6.justify-between > h2{padding-bottom:0;margin:0}
footer img.col-span-3.h-96, footer iframe.col-span-3.h-96{height:auto;aspect-ratio:4/5}
footer .border-b-2.pt-20{padding-top:var(--sec);padding-bottom:1.75rem;align-items:center}
footer .border-b-2 a[href="index.html"]{display:inline-flex;align-items:center}
footer .border-b-2 a[href="index.html"] svg{width:clamp(150px,13vw,196px);height:auto;display:block}

/* phone · email are one unbreakable unit — as separate flex children the "·"
   landed wherever the row happened to wrap and stranded at the line end */
footer .flex.gap-6:has(button){justify-content:flex-start;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cta-links{display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap;white-space:nowrap}
.cta-links > p{margin:0;justify-content:center}
footer .col-span-12.flex.gap-6.py-8{padding-block:1.5rem;align-items:center}

/* ─── Menu page ───────────────────────────────────────────────────────────── */
.mn-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 0 2.5rem}
.mn-tabs{grid-column:2}
.mn-view{position:static;grid-column:3;justify-self:end;transform:none;top:auto;right:auto}
.mn-img{width:100%;height:auto;aspect-ratio:3/4}
.mn-meta span:first-child, .mn-desc{color:#6f665f}
.mn-pill{background:rgba(77,54,46,.42)}
.mn-name{font-size:1.0625rem}
.mn-meta{font-size:1.0625rem;font-variant-numeric:tabular-nums}
.mn-grid{row-gap:3rem}

@media (max-width:1100px){
  /* promoted to full width here — split it so the right half isn't a green hole */
  footer .col-span-6.justify-between{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,4vw,48px);align-items:start;
  }
}

@media (max-width:768px){
  .cta-links{flex-wrap:wrap;white-space:normal}
  footer .col-span-6.justify-between{grid-template-columns:minmax(0,1fr)}
  .mn-bar{grid-template-columns:1fr;gap:1rem;padding:.5rem 0 2rem}
  .mn-tabs, .mn-view{grid-column:1}
  /* position:relative so the .mn-view-ind (position:absolute top:5 left:5)
     stays inside the view pill instead of escaping up to .mn-bar and
     drawing a white pill over the tabs row. */
  .mn-view{justify-self:center;position:relative}
  .page-hero{padding-top:64px;min-height:260px}
  .hero{height:calc(100svh - 64px);min-height:480px}
  .sec-head{margin-bottom:var(--gap-y)}
  footer img.col-span-3.h-96, footer iframe.col-span-3.h-96{aspect-ratio:4/3}
}