/* ==========================================================================
   Ayan Heritage Walks — Deccan basalt & haldi
   --------------------------------------------------------------------------
   A theme layer over Bootstrap 5.3. The palette is drawn from the materials of
   the walks themselves: the blue-black basalt the Deccan is cut from, the cream
   of lime plaster, turmeric and kumkum, and the indigo of old textile.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Ink & stone */
  --ink:        #17130f;
  --basalt:     #2e2a26;
  --stone:      #55504a;
  --mute:       #7a736b;

  /* Ground */
  --cream:      #fbf6ec;
  --sand:       #f2e8d8;
  --paper:      #ffffff;
  --rule:       #e2d7c3;

  /* Accents */
  --kumkum:     #a8321e;
  --kumkum-ink: #7e2415;
  --haldi:      #cf9426;
  --haldi-lit:  #edd39a;
  --indigo:     #1f3b54;
  --leaf:       #4a6142;

  /* Type */
  --display: 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --marathi: 'Tiro Devanagari Marathi', 'Mukta', serif;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --radius:  4px;

  --shadow-sm: 0 1px 2px rgba(23, 19, 15, .06), 0 2px 8px rgba(23, 19, 15, .05);
  --shadow-md: 0 2px 6px rgba(23, 19, 15, .07), 0 12px 32px rgba(23, 19, 15, .09);
  --shadow-lg: 0 6px 16px rgba(23, 19, 15, .09), 0 28px 64px rgba(23, 19, 15, .14);

  /* Bootstrap overrides */
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--basalt);
  --bs-body-font-family: var(--body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.7;
  --bs-link-color: var(--kumkum);
  --bs-link-hover-color: var(--kumkum-ink);
  --bs-border-color: var(--rule);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--stone);
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  background-color: var(--cream);
  color: var(--basalt);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  /* A whisper of handmade-paper tooth, drawn rather than loaded. */
  background-image:
    radial-gradient(circle at 20% 12%, rgba(207, 148, 38, .05), transparent 42%),
    radial-gradient(circle at 84% 0%, rgba(168, 50, 30, .04), transparent 38%);
  background-attachment: fixed;
}

::selection { background: var(--haldi-lit); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--kumkum);
  outline-offset: 3px;
  border-radius: 2px;
}

img, picture, svg { max-width: 100%; }
img { height: auto; }

/* <picture> is inline by default, which gives the <img> inside it no definite
   height to resolve `height: 100%` against. Every <picture> here is a plain
   wrapper, so make it a block that fills whatever box it is placed in. */
picture { display: block; }
.hero__figure picture,
.walk-card__media picture,
.post-card__media picture,
.mosaic__item picture,
.press-card picture { height: 100%; }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 1200;
  padding: .7rem 1.2rem;
  background: var(--ink);
  color: var(--sand);
  border-radius: var(--radius);
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------- typography */

h1, h2, h3, h4, .display-face {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

p { text-wrap: pretty; }

a { color: var(--kumkum); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--kumkum-ink); }

/* Small-caps label above a heading — the recurring "kicker". */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kumkum);
  margin-bottom: .9rem;
}
.kicker::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: .55;
}
.kicker--center::after {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: .55;
}

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.65;
  color: var(--stone);
}

.devanagari { font-family: var(--marathi); font-weight: 400; }

/* Marathi long-form: larger, looser, with room for the matras. */
[lang="mr"] .prose,
.prose[lang="mr"] {
  font-family: var(--marathi);
  font-size: 1.2rem;
  line-height: 2;
}

.prose { max-width: 40rem; }
/* Reset every child, then space them from each other. Both selectors carry the
   same specificity, so the flow rule below wins on source order — a `.prose p`
   rule with its own margin would silently beat it. */
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.25em; }
.prose p { color: var(--basalt); }
.prose h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.prose > h3 + *, .prose > h4 + * { margin-top: .8em; }
.prose > * + h3 { margin-top: 2.2em; }
.prose > * + h4 { margin-top: 1.8em; }
.prose ul { padding-left: 0; list-style: none; }
.prose li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .5rem;
}
.prose li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .72em;
  width: .5rem; height: .5rem;
  background: var(--haldi);
  transform: rotate(45deg);
}
.prose blockquote {
  margin: 2em 0;
  padding: .2rem 0 .2rem 1.6rem;
  border-left: 3px solid var(--haldi);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
}
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { font-weight: 500; }

/* --------------------------------------------------------------- ornaments */

/* Clip an image into an arched opening. objectBoundingBox units, so one
   definition serves every size. Declared once in partials/ornaments.php. */
.arched { clip-path: url(#ayan-arch); }
.arched-soft { border-radius: 50vw 50vw var(--radius) var(--radius) / 28% 28% 0 0; }

/* The cusped-arch outline, drawn as a crowning ornament. */
.ig-cta__arch {
  width: clamp(6rem, 14vw, 9rem);
  height: auto;
  color: var(--haldi);
  opacity: .55;
  margin-bottom: -.5rem;
}

/* Section divider: a rangoli-ish run of diamonds on a hairline. */
.rule-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  border: 0;
  color: var(--haldi);
}
.rule-ornament::before,
.rule-ornament::after {
  content: "";
  flex: 1 1 auto;
  max-width: 7rem;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--rule));
}
.rule-ornament::after { --dir: left; }
.rule-ornament i {
  width: .42rem; height: .42rem;
  background: currentColor;
  transform: rotate(45deg);
  opacity: .75;
}
.rule-ornament i:nth-child(2) { width: .6rem; height: .6rem; opacity: 1; }

/* Jaali lattice, for dark grounds. Pure CSS gradients — no image request. */
.jaali {
  position: relative;
  isolation: isolate;
}
.jaali::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    repeating-linear-gradient( 45deg, var(--haldi) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, var(--haldi) 0 1px, transparent 1px 22px);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 78%);
}

/* ------------------------------------------------------------------ layout */

.shell {
  width: min(100% - (var(--gutter) * 2), 76rem);
  margin-inline: auto;
}
.shell--wide { width: min(100% - (var(--gutter) * 2), 90rem); }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 50rem); }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section--sand { background: var(--sand); }
.section--ink {
  background: var(--ink);
  color: var(--sand);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--cream); }
.section--ink .kicker { color: var(--haldi); }
.section--ink .lede { color: rgba(242, 232, 216, .78); }
.section--ink a { color: var(--haldi-lit); }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(251, 246, 236, .88);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 20px rgba(23, 19, 15, .06);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.65rem; height: 2.65rem;
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--haldi-lit);
  border-radius: 50%;
  font-family: var(--marathi);
  font-size: 1.02rem;
  line-height: 1;
  padding-bottom: .12em;
  letter-spacing: .01em;
}
.brand__name {
  display: block;
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand__tag {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: .12rem;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.4rem);
}
.nav-main a {
  position: relative;
  padding: .4rem 0;
  font-size: .94rem;
  font-weight: 500;
  color: var(--basalt);
  text-decoration: none;
  white-space: nowrap;
}
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .05rem;
  height: 1.5px;
  background: var(--kumkum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after { transform: scaleX(1); }
.nav-main a[aria-current="page"] { color: var(--kumkum); }

.nav-ig { display: inline-flex; align-items: center; gap: .42rem; }
.nav-ig svg { width: 1.05em; height: 1.05em; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  font: inherit;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- offcanvas  */

.offcanvas {
  --bs-offcanvas-bg: var(--ink);
  --bs-offcanvas-color: var(--sand);
  --bs-offcanvas-width: min(24rem, 86vw);
  --bs-offcanvas-border-width: 0;
}
.offcanvas .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: .6;
}
.nav-drawer { display: flex; flex-direction: column; gap: .1rem; }
.nav-drawer a {
  padding: .85rem 0;
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 232, 216, .12);
}
.nav-drawer a:hover, .nav-drawer a[aria-current="page"] { color: var(--haldi); }

/* ----------------------------------------------------------------- buttons */

.btn-ayan,
.btn-ayan-ghost,
.btn-ayan-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.btn-ayan {
  background: var(--kumkum);
  color: var(--cream);
  box-shadow: 0 1px 2px rgba(126, 36, 21, .3), 0 8px 22px rgba(126, 36, 21, .22);
}
.btn-ayan:hover { background: var(--kumkum-ink); color: var(--cream); transform: translateY(-1px); }

.btn-ayan-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ayan-ghost:hover { background: var(--ink); color: var(--cream); }

.btn-ayan-light {
  background: transparent;
  color: var(--sand);
  border-color: rgba(242, 232, 216, .4);
}
.btn-ayan-light:hover { background: var(--haldi); border-color: var(--haldi); color: var(--ink); }

.btn-wa { background: #1da851; color: #fff; box-shadow: 0 8px 22px rgba(29, 168, 81, .25); }
.btn-wa:hover { background: #178c43; color: #fff; }

/* Text link with a moving arrow. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  text-decoration: none;
}
.link-more svg { transition: transform .25s ease; width: 1em; height: 1em; }
.link-more:hover svg { transform: translateX(.28rem); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__mark {
  font-family: var(--marathi);
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--haldi);
  opacity: .95;
  margin-bottom: .6rem;
}
.hero h1 { margin: 0 0 1.1rem; }
.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--kumkum);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
}
.hero__meta b { color: var(--ink); font-weight: 600; }

.hero__figure {
  position: relative;
  isolation: isolate;   /* so the companion arch can sit behind the photograph */
  aspect-ratio: 4 / 5;
}
.hero__figure picture, .hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__figure::before {
  /* A second arch offset behind the photograph, the way a printed block sits
     slightly off its outline. A clipped border cannot do this — the clip eats
     the top edge — so this is a filled shape instead. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(.85rem, .85rem);
  background: var(--haldi);
  opacity: .28;
  clip-path: url(#ayan-arch);
  pointer-events: none;
}

.hero__seal {
  position: absolute;
  right: -1.2rem; bottom: 1.5rem;
  width: 8.5rem; height: 8.5rem;
  color: var(--kumkum);
  opacity: .92;
}
.hero__seal text { font-family: var(--body); font-size: 8.4px; letter-spacing: .28em; }

/* ------------------------------------------------------------- walk cards  */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.walk-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease,
              border-color .3s ease;
}
.walk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--haldi);
  color: inherit;
}
.walk-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.walk-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.walk-card:hover .walk-card__media img { transform: scale(1.045); }
.walk-card__kicker {
  position: absolute;
  left: 0; bottom: 0;
  padding: .4rem .85rem;
  background: var(--ink);
  color: var(--haldi-lit);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.walk-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.4rem 1.5rem 1.5rem;
}
.walk-card__body h3 { margin: 0 0 .55rem; font-size: 1.4rem; }
.walk-card__body p {
  margin: 0;
  font-size: .95rem;
  color: var(--stone);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------ fact strip   */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div {
  background: var(--paper);
  padding: 1.15rem 1.25rem;
}
/* Two columns keeps the cells fully packed where the item count is even and a
   full-width row sits between them — otherwise the leftover cells show the
   grid's own rule colour as a gap. */
.facts--two { grid-template-columns: repeat(2, 1fr); }
.facts dt {
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: .3rem;
  font-weight: 600;
}
.facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.08rem;
  color: var(--ink);
  line-height: 1.35;
}
.section--ink .facts { background: rgba(242,232,216,.16); border-color: rgba(242,232,216,.16); }
.section--ink .facts > div { background: var(--ink); }
.section--ink .facts dd { color: var(--cream); }
.section--ink .facts dt { color: var(--haldi); }

/* ---------------------------------------------------------------- gallery  */

.album + .album { margin-top: clamp(3rem, 6vw, 5rem); }
.album__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.album__head h2 { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2rem); }
.album__head p { margin: 0; color: var(--mute); font-size: .92rem; }

.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: .85rem;
}
.mosaic__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  /* These tiles are <button>s, so the UA padding and border have to go or the
     photograph sits inside a frame of page background. */
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--sand);
  cursor: zoom-in;
}
.mosaic__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .8, .3, 1), filter .35s ease;
}
.mosaic__item:hover img { transform: scale(1.05); filter: brightness(.92); }
.mosaic__item img { display: block; }

/* Lead each album with one large tile, but only once the grid is wide enough
   to have columns to spare. The rows are sized by the square tiles, so the
   feature tile just stretches across two of them. */
@media (min-width: 62rem) {
  .mosaic__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 12, 9, .94);
  backdrop-filter: blur(3px);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.lightbox__cap {
  margin-top: 1rem;
  text-align: center;
  color: rgba(242, 232, 216, .82);
  font-size: .9rem;
  max-width: 46rem;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgba(242, 232, 216, .3);
  border-radius: 50%;
  background: rgba(23, 19, 15, .5);
  color: var(--sand);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--kumkum); border-color: var(--kumkum); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* -------------------------------------------------------------- instagram  */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
}
.ig-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 8rem;
}
.ig-card blockquote { margin: 0 !important; }

.ig-cta {
  display: grid;
  place-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  border: 1px dashed rgba(242, 232, 216, .32);
  border-radius: var(--radius);
}
.ig-cta__handle {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--haldi);
}

/* ----------------------------------------------------------------- quotes  */

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.9rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.quote-card p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
}
.quote-card footer {
  margin-top: auto;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.stars { color: var(--haldi); letter-spacing: .1em; font-size: .95rem; }

/* ------------------------------------------------------------------ press  */

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.press-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  transition: box-shadow .3s ease, transform .3s ease;
}
.press-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.press-card img {
  width: 100%;
  border-radius: 2px;
  cursor: zoom-in;
  background: var(--sand);
}
.press-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .85rem;
  font-size: .8rem;
  color: var(--mute);
  letter-spacing: .05em;
}
.press-card__meta b { color: var(--kumkum); text-transform: uppercase; letter-spacing: .12em; }

/* ------------------------------------------------------------- post cards  */

.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.post-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  margin-bottom: 1.1rem;
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card time {
  display: block;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: .45rem;
}
.post-card h3 { margin: 0 0 .55rem; font-size: 1.3rem; }
.post-card:hover h3 { color: var(--kumkum); }
.post-card p { margin: 0; font-size: .94rem; color: var(--stone); }

/* --------------------------------------------------------------- contacts  */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.9rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover {
  border-color: var(--haldi);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--kumkum);
  margin-bottom: .35rem;
}
.contact-card__icon svg { width: 1.25rem; height: 1.25rem; }
.contact-card dt {
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.contact-card dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ink);
}

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

.site-footer {
  background: var(--ink);
  color: rgba(242, 232, 216, .72);
  /* The generous bottom padding keeps the last line clear of the fixed
     WhatsApp button, which always sits in the bottom-right corner. */
  padding-block: clamp(3.5rem, 7vw, 5rem) clamp(5rem, 8vw, 6.5rem);
}
.site-footer h2, .site-footer h3 { color: var(--cream); }
.site-footer a { color: rgba(242, 232, 216, .82); text-decoration: none; }
.site-footer a:hover { color: var(--haldi); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-title {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--haldi);
  margin-bottom: 1rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.footer-brand__mark {
  font-family: var(--marathi);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--haldi);
  margin-bottom: .7rem;
  display: block;
}

.social-row { display: flex; gap: .65rem; margin-top: 1.2rem; }
.social-row a {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(242, 232, 216, .22);
  border-radius: 50%;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.social-row a:hover { background: var(--haldi); border-color: var(--haldi); color: var(--ink); }
.social-row svg { width: 1.1rem; height: 1.1rem; }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242, 232, 216, .14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  font-size: .82rem;
  color: rgba(242, 232, 216, .55);
}

/* Skyline of shikharas above the footer. It scales proportionally rather than
   stretching, so the spires keep their profile at every width. */
.footer-skyline {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
  margin-bottom: -1px;
}

/* ------------------------------------------------------------ float action */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: #1da851;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 6px 28px rgba(29, 168, 81, .38);
  transition: transform .25s ease, background-color .2s ease;
}
.wa-float:hover { transform: translateY(-2px); background: #178c43; color: #fff; }
.wa-float svg { width: 1.2rem; height: 1.2rem; }
.wa-float span { display: inline; }

/* ------------------------------------------------------------------ misc   */

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  padding: .3rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
  background: var(--paper);
}

.breadcrumbs {
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--mute);
  margin-bottom: 1.25rem;
}
.breadcrumbs a { color: var(--stone); text-decoration: none; }
.breadcrumbs a:hover { color: var(--kumkum); }
.breadcrumbs span { margin-inline: .45rem; opacity: .5; }

.empty-note {
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  text-align: center;
  color: var(--stone);
  background: var(--paper);
}

/* Reveal on scroll — opt-in, and inert without JS or with reduced motion. */
.reveal { opacity: 0; transform: translateY(18px); }
.js .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 62rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { aspect-ratio: 3 / 2; max-width: 34rem; }
  .hero__seal { width: 6.5rem; height: 6.5rem; right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-main { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 40rem) {
  .footer-grid { grid-template-columns: 1fr; }
  .brand__tag { display: none; }
  .wa-float span { display: none; }
  .wa-float { padding: .9rem; }
  .hero__seal { display: none; }
  .facts { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .wa-float, .lightbox, .nav-toggle { display: none !important; }
  body { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}