/* Oh!Mumbai — editorial features layer.
   Loads AFTER character.css and frontend-polish.css.

   Purpose: the last-mile editorial polish that gives long-form pages
   real magazine feel — drop caps, pull quotes, small ornamental
   section dividers, a hero scroll cue, numeric refinement.
   Scoped via body.page-* classes; NO copy edits, NO JS changes. */

/* ─── Drop cap — the About page opening paragraph ─────────────────────────
   A confident chocolate initial in TT Gertika Bold, sitting on 3 lines,
   with a hairline saffron rule after the first line for editorial flair. */
body.page-about main .sec:first-of-type .sec-head + .col-span-5 > p.font-geometria:first-of-type{
  text-indent:0;
}
body.page-about main .sec:first-of-type .sec-head + .col-span-5 > p.font-geometria:first-of-type::first-letter{
  font-family:var(--font-gertika), serif;
  font-weight:700;
  color:var(--color-chocolate);
  float:left;
  font-size:4.25rem;
  line-height:.9;
  padding:.2rem .5rem 0 0;
  margin:0;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
@media (max-width:768px){
  body.page-about main .sec:first-of-type .sec-head + .col-span-5 > p.font-geometria:first-of-type::first-letter{
    font-size:3rem;
    padding:.15rem .35rem 0 0;
  }
}

/* ─── Pull quote — the founder quote on the About page ────────────────────
   Only one paragraph on the site matches `.eyebrow + p.font-geometria` and
   that's the founder quote «...» — this scoped selector makes it a
   proper pull quote without touching any HTML.

   Reads as: a saffron rule down the left, larger Gertika type in
   chocolate, subtle guillemet contrast, a comfortable measure. */
body.page-about .col-span-5 > p.eyebrow + p.font-geometria{
  font-family:var(--font-gertika), serif;
  font-weight:400;
  font-size:clamp(1.125rem, 1.5vw, 1.375rem);
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--color-chocolate);
  padding-left:clamp(1.25rem, 2.2vw, 1.75rem);
  border-left:2px solid var(--color-saffron, #d4a256);
  margin-block:.5rem 1.75rem;
  max-width:56ch;
  text-wrap:pretty;
}
body.page-about .col-span-5 > p.eyebrow + p.font-geometria::first-line{
  letter-spacing:-.008em;
}

/* ─── Contacts page — larger, editorial location + hours block ───────────
   Green ground; the address / hours are the whole payload. Give them
   real presence. */
body.page-contacts main .sec:first-of-type .col-span-6 > p.font-gertika,
body.page-contacts main .sec:first-of-type .col-span-6 > h3.font-gertika,
body.page-contacts main .sec:first-of-type .col-span-6 h3{
  font-family:var(--font-gertika), serif;
  font-size:clamp(1.5rem, 2vw, 1.875rem);
  line-height:1.15;
  letter-spacing:-.015em;
}

/* Hours numerals — tabular so 12:00 / 13:00 / 23:00 stack visually */
body.page-contacts main p:where(:has(> span.text-sm)),
main .col-span-2.col-start-11 > p:where(:has(> span.text-sm)),
footer p:where(:has(> span.text-gray-light)){
  font-variant-numeric:tabular-nums lining-nums;
}

/* ─── Hero scroll cue — index page only ───────────────────────────────────
   A tiny, centred chevron that gently breathes; sits below the CTA row
   without competing with it. Vanishes on scroll (via the .rv system —
   it starts revealed, no reverse). */
body.page-index .hero > .mx-auto{position:relative}
body.page-index .hero > .mx-auto::after{
  content:"";
  position:absolute;
  left:50%; bottom:clamp(28px, 5vh, 56px);
  width:22px; height:22px;
  transform:translateX(-50%);
  border-right:1.5px solid var(--color-saffron, #d4a256);
  border-bottom:1.5px solid var(--color-saffron, #d4a256);
  rotate:45deg;
  opacity:.7;
  animation:heroCue 2.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
  z-index:12;
}
@keyframes heroCue{
  0%,100%{transform:translate(-50%, 0) rotate(45deg);opacity:.35}
  50%{transform:translate(-50%, 8px) rotate(45deg);opacity:.9}
}
@media (max-width:768px){
  body.page-index .hero > .mx-auto::after{width:18px; height:18px; bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  body.page-index .hero > .mx-auto::after{animation:none;opacity:.55}
}

/* ─── Section-head number — small editorial "01. 02." index next to h2 ───
   Applied only where a section-head sits inside main.bg-biege (About /
   Interior) so the chocolate numeral reads at good contrast. Uses CSS
   counters — no HTML change. */
body.page-about main.bg-biege,
body.page-interior main.bg-biege{counter-reset:sec}
body.page-about main.bg-biege .sec > .sec-head::before,
body.page-interior main.bg-biege .sec > .sec-head::before{
  counter-increment:sec;
  content:counter(sec, decimal-leading-zero);
  position:absolute;
  font-family:var(--font-geometria), sans-serif;
  font-size:.75rem;
  letter-spacing:.22em;
  font-weight:500;
  color:var(--color-saffron-deep, #ad7a3a);
  opacity:.75;
  transform:translateY(-1.75rem);
}
body.page-about main.bg-biege .sec > .sec-head,
body.page-interior main.bg-biege .sec > .sec-head{position:relative}

/* On tablet+phone the numeral would waste top space — hide it */
@media (max-width:900px){
  body.page-about main.bg-biege .sec > .sec-head::before,
  body.page-interior main.bg-biege .sec > .sec-head::before{display:none}
}

/* ─── Caption polish — italic serif-of-a-sort for photo captions ─────────
   Uses Gertika Regular italic-approximation via oblique (the trial family
   ships regular + bold, no italic). Subtle. */
main .caption{
  font-family:var(--font-geometria), sans-serif;
  font-size:.8125rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--color-saffron-deep, #ad7a3a);
  opacity:.9;
  padding-top:.75rem;
}
main.bg-chocolate .caption{color:var(--color-saffron, #d4a256)}

/* ─── About page image column caption — refined ───────────────────────── */
body.page-about main .col-span-3 .caption{
  padding-top:1rem;
  border-top:1px solid color-mix(in srgb, var(--color-saffron, #d4a256) 30%, transparent);
  display:inline-block;
  padding-inline-end:1rem;
}

/* ─── Interior gallery — mild asymmetry via nth-child hooks ──────────────
   The gallery is a repeating .col-span-6 grid. Give every 4th tile a
   small vertical offset so the eye reads it as a curated layout rather
   than a uniform grid. Purely visual — same content order. */
@media (min-width:900px){
  body.page-interior main .gal > button.col-span-6:nth-child(4n+2){
    transform:translateY(clamp(12px, 1.8vw, 28px));
  }
  body.page-interior main .gal > button.col-span-6:nth-child(4n+2):hover{
    transform:translateY(clamp(12px, 1.8vw, 28px));
  }
}

/* ─── Footer bottom bar — copyright refinement ─────────────────────────── */
footer .col-span-12.flex.gap-6.py-8 > p{
  font-size:.8125rem;
  letter-spacing:.03em;
  opacity:.8;
}

/* ─── Print — a bonus, real editorial move ─────────────────────────────── */
@media print{
  :root{color-scheme:light}
  html, body, main, footer{
    background:#fff !important;
    color:#111 !important;
  }
  .site-header, .bk-overlay, .lb, footer .flex.gap-5,
  .hero::before, .hero::after,
  body.page-index .hero > .mx-auto::after{display:none !important}
  .hero{height:auto !important; min-height:0 !important}
  .hero > img{position:static !important; height:auto !important; width:100% !important; max-height:40vh; object-fit:cover}
  h1,h2,h3{color:#111 !important; text-shadow:none !important}
  .eyebrow{color:#7a5a2a !important; opacity:1}
  .mn-card{break-inside:avoid; page-break-inside:avoid}
  .mn-img{aspect-ratio:auto; height:auto}
  a{color:#7a3f24 !important; text-decoration:underline}
}