/* ------------------------------------------------------------------
   Hello Raam: header + portrait sections
   Palette sampled from the brand banner.
------------------------------------------------------------------- */
:root {
  --cream: #fdf8ec;       /* banner sky */
  --saffron: #fdb54e;     /* banner sun */
  --saffron-deep: #ef8a26;
  --rust: #ba3414;        /* banner flags */
  --river: #16506f;       /* banner mountains */
  --night-deep: #0b1f1d;  /* dark text on saffron buttons */
  --ink: #1d3a36;

  /* Guru Dev section: a painted sky (assets/guru-dev-sky.webp) tucked
     under the banner's fading foot above and running down to where the
     vista fades in below. --sky is the painting's bottom blue: it fills
     behind that fade, and shows while the painting loads. */
  --sky: #80bbe0;
  /* How far the sky reaches up under the banner (the banner's faded
     last 12%), and down under the vista: through its pale, hazy crown
     (its first 20%, kept hidden) and the fade where its own blue sky
     takes over (to 33%) */
  --banner-fade: 0.12;
  --tuck-top: calc(var(--banner-h) * var(--banner-fade));
  --vista-h: calc(100vw * 1011 / 1556);
  --tuck-bottom: calc(var(--vista-h) * 0.33);
  --navy: #14324a;
  --rust-deep: #a52f12;

  /* Maharishi section and About: a painting of golden clouds clearing
     to blue sky (assets/maharishi-golden-sky.webp, its top quarter cut
     so it opens in the clouds). It reaches up under the vista's fading
     foot (its last 12%). --gold-sky is its top edge, shown while it loads. */
  --gold-sky: #f1daac;
  --tuck-gold: calc(var(--vista-h) * 0.12);

  /* Text on both light sections: navy (6.5:1 or more), with a rust
     highlight in titles (3.4:1 or more; large text) */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Brand banner geometry */
  /* The painting is 2000 x 667; it's shown 15% taller than that (767),
     filling the width and trimming a little from each side */
  --banner-ratio: 2000 / 767;
  --banner-min: 219px;
  --banner-h: max(var(--banner-min), 100vw * 767 / 2000);
}

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

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

body {
  margin: 0;
  background: #fffaf2;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ---------------- Top navigation ----------------
   Fixed to the top of the screen. At rest it sits on the cream header
   and reads as part of it. Once the page scrolls, the script in
   index.html adds .is-scrolled and the links gather into a floating
   glass pill over the banner. Contact is a gold button pinned to the
   right in both states. */
:root {
  --nav-h: 64px;
  --nav-control-h: 44px;   /* the Contact button's height; the pill never exceeds it */
}

/* In-page links glide to their section and stop just below the fixed nav */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;          /* scroll this far and the nav collapses */
  pointer-events: none;
}

.site-header {
  position: relative;
  z-index: 3;                  /* above the Guru Dev sky tucked beneath it, and
                                  above the vista (2), so the fixed nav inside
                                  stays on top all the way down the page */
}

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding-inline: clamp(16px, 3vw, 40px);
  pointer-events: none;        /* only the pill and the button take clicks */
}

/* --nav-scale widens the pill once scrolled. It drives real sizes (text,
   gaps, side padding) rather than a transform, so text stays crisp and
   the grid keeps the pill clear of the Contact button. Its height is
   fixed to the button's, so it's never taller. */
.topnav { --nav-scale: 1; }
.topnav.is-scrolled { --nav-scale: 1.1; }

.topnav__pill {
  grid-column: 2;
  min-width: 0;
  pointer-events: auto;
  display: flex;
  align-items: center;
  height: var(--nav-control-h);
  padding: 0 calc(24px * var(--nav-scale));
  /* At rest it floats on the banner's painted sky as light cream glass,
     so every link (the saffron current one too) reads clearly */
  background: rgb(253 248 236 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
          backdrop-filter: blur(12px) saturate(1.3);
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    -webkit-backdrop-filter 0.45s ease,
    backdrop-filter 0.45s ease,
    padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.topnav.is-scrolled .topnav__pill {
  background: rgb(253 248 236 / 0.8);
  border-color: rgb(255 255 255 / 0.65);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 12px 32px -12px rgb(0 0 0 / 0.5);
}

.topnav__links {
  display: flex;
  column-gap: calc(clamp(18px, 2.2vw, 36px) * 1.38 * var(--nav-scale));
  margin: 0;
  padding: 0;
  list-style: none;
  transition: column-gap 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.topnav__links a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: var(--ink);
  font-size: calc(1.3225rem * var(--nav-scale));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    font-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.topnav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.topnav__links a:hover { color: var(--rust); }
.topnav__links a:hover::after { transform: scaleX(1); }
.topnav__links a[aria-current] { color: var(--saffron-deep); }

.topnav__links a:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Contact: same saffron pill as the page's main buttons (.button),
   sized for the nav, always on the right. Hidden for now; delete the
   display line to bring it back. */
.topnav__contact {
  display: none;
  grid-column: 3;
  justify-self: end;
  pointer-events: auto;
  /* display: inline-flex;  (restore with the line above) */
  align-items: center;
  height: var(--nav-control-h);
  padding: 0 22px;
  border-radius: 999px;
  background: var(--saffron);
  color: var(--night-deep);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgb(253 181 78 / 0.6);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.topnav__contact:hover {
  background: #ffc56c;
  transform: translateY(-2px);
}

.topnav__contact:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 3px;
}

/* Below 1000px the five links won't fit centred beside the button, so
   they become one swipeable row and Contact stays pinned on the right. */
@media (max-width: 999px) {
  :root {
    --nav-h: 58px;
    --nav-control-h: 40px;
  }

  .topnav {
    display: flex;
    gap: 10px;
    padding-inline: 10px 12px;
  }

  .topnav__pill {
    flex: 1 1 auto;
    padding: 0 6px;
  }

  /* The row already spans the width here, so it doesn't grow */
  .topnav.is-scrolled { --nav-scale: 1; }

  .topnav__links {
    column-gap: 28px;
    padding-inline: 10px 28px;
    overflow-x: auto;
    scrollbar-width: none;
    /* fade the trailing edge so it reads as swipeable */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .topnav__links::-webkit-scrollbar { display: none; }

  .topnav__links a { font-size: 1.24rem; letter-spacing: 0.04em; }

  .topnav__contact {
    flex: none;
    padding: 0 16px;
    font-size: 0.9375rem;
  }
}

/* ---------------- Brand banner ----------------
   Shown whole down to 88%, then the foreground eases out (smootherstep)
   over the last 12%. The Guru Dev sky is tucked beneath that stretch,
   so the scene dissolves cleanly, straight into the painted blue. */
.banner {
  --fade-start: calc(100% - var(--banner-fade) * 100%);
  --fade-span: calc(100% - var(--fade-start));
  position: relative;
  overflow: hidden;
  /* Cream behind the image's sky; clear behind the fading foreground so
     the painted sky below shows through */
  background: linear-gradient(to bottom, var(--cream) calc(var(--fade-start) - 2%), transparent var(--fade-start));
}

.banner img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--banner-ratio);
  min-height: var(--banner-min);
  object-fit: cover;
  object-position: 50% 100%;
  animation: fade-in 1.6s ease-out both;
}

/* The "Hello Raam" wordmark, stacked, in the display serif at its
   heaviest and in the brand cream, as on the original lettered banner.
   It sits on the dark body of the central mountain (about 40% to 76%
   of the height, where cream reads clearly); a faint navy shadow keeps
   the foot of "Raam" crisp over the pale morning mist below. Sized from
   the banner's height so it keeps its place at every width. */
.banner__wordmark {
  position: absolute;
  left: 50%;
  top: 57.5%;
  translate: -50% -50%;
  margin: 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: calc(var(--banner-h) * 0.27);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  line-height: 0.84;
  letter-spacing: -0.025em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0.02em 0.3em rgb(20 50 74 / 0.32);
  pointer-events: none;
  animation: fade-in 1.6s 0.25s ease-out both;
}

.banner__wordmark span { display: block; }

/* Smootherstep fade to transparent from --fade-start */
.banner img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%, #000 var(--fade-start),
    rgb(0 0 0 / 0.991) calc(var(--fade-start) + var(--fade-span) * 0.1),
    rgb(0 0 0 / 0.942) calc(var(--fade-start) + var(--fade-span) * 0.2),
    rgb(0 0 0 / 0.837) calc(var(--fade-start) + var(--fade-span) * 0.3),
    rgb(0 0 0 / 0.683) calc(var(--fade-start) + var(--fade-span) * 0.4),
    rgb(0 0 0 / 0.5)   calc(var(--fade-start) + var(--fade-span) * 0.5),
    rgb(0 0 0 / 0.317) calc(var(--fade-start) + var(--fade-span) * 0.6),
    rgb(0 0 0 / 0.163) calc(var(--fade-start) + var(--fade-span) * 0.7),
    rgb(0 0 0 / 0.058) calc(var(--fade-start) + var(--fade-span) * 0.8),
    rgb(0 0 0 / 0.009) calc(var(--fade-start) + var(--fade-span) * 0.9),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0%, #000 var(--fade-start),
    rgb(0 0 0 / 0.991) calc(var(--fade-start) + var(--fade-span) * 0.1),
    rgb(0 0 0 / 0.942) calc(var(--fade-start) + var(--fade-span) * 0.2),
    rgb(0 0 0 / 0.837) calc(var(--fade-start) + var(--fade-span) * 0.3),
    rgb(0 0 0 / 0.683) calc(var(--fade-start) + var(--fade-span) * 0.4),
    rgb(0 0 0 / 0.5)   calc(var(--fade-start) + var(--fade-span) * 0.5),
    rgb(0 0 0 / 0.317) calc(var(--fade-start) + var(--fade-span) * 0.6),
    rgb(0 0 0 / 0.163) calc(var(--fade-start) + var(--fade-span) * 0.7),
    rgb(0 0 0 / 0.058) calc(var(--fade-start) + var(--fade-span) * 0.8),
    rgb(0 0 0 / 0.009) calc(var(--fade-start) + var(--fade-span) * 0.9),
    transparent 100%
  );
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------- Vista ----------------
   The illustration that introduces the Maharishi section.
   Top: it overlaps the Guru Dev sky by --tuck-bottom. Its pale, hazy
   crown (first 20%) stays hidden so the painted sky shows there instead,
   then it fades in (smootherstep, 20% to 33%) where its own sky is
   already clear blue, under a light mist blur, so blue meets blue.
   Bottom: shown whole down to 88%, then eases out cleanly (smootherstep,
   no blur) over its last 12%, straight into the golden clouds tucked
   beneath it, the same way the banner meets the sky. */
.vista {
  position: relative;
  z-index: 2;                               /* over the sky it overlaps */
  margin-top: calc(-1 * var(--tuck-bottom));
  overflow: hidden;
}

.vista img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 20%,
    rgb(0 0 0 / 0.009) 21.3%, rgb(0 0 0 / 0.058) 22.6%, rgb(0 0 0 / 0.163) 23.9%,
    rgb(0 0 0 / 0.317) 25.2%, rgb(0 0 0 / 0.5) 26.5%, rgb(0 0 0 / 0.683) 27.8%,
    rgb(0 0 0 / 0.837) 29.1%, rgb(0 0 0 / 0.942) 30.4%, rgb(0 0 0 / 0.991) 31.7%,
    #000 33%,
    #000 88%,
    rgb(0 0 0 / 0.991) 89.2%, rgb(0 0 0 / 0.942) 90.4%, rgb(0 0 0 / 0.837) 91.6%,
    rgb(0 0 0 / 0.683) 92.8%, rgb(0 0 0 / 0.5) 94%, rgb(0 0 0 / 0.317) 95.2%,
    rgb(0 0 0 / 0.163) 96.4%, rgb(0 0 0 / 0.058) 97.6%, rgb(0 0 0 / 0.009) 98.8%,
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 20%,
    rgb(0 0 0 / 0.009) 21.3%, rgb(0 0 0 / 0.058) 22.6%, rgb(0 0 0 / 0.163) 23.9%,
    rgb(0 0 0 / 0.317) 25.2%, rgb(0 0 0 / 0.5) 26.5%, rgb(0 0 0 / 0.683) 27.8%,
    rgb(0 0 0 / 0.837) 29.1%, rgb(0 0 0 / 0.942) 30.4%, rgb(0 0 0 / 0.991) 31.7%,
    #000 33%,
    #000 88%,
    rgb(0 0 0 / 0.991) 89.2%, rgb(0 0 0 / 0.942) 90.4%, rgb(0 0 0 / 0.837) 91.6%,
    rgb(0 0 0 / 0.683) 92.8%, rgb(0 0 0 / 0.5) 94%, rgb(0 0 0 / 0.317) 95.2%,
    rgb(0 0 0 / 0.163) 96.4%, rgb(0 0 0 / 0.058) 97.6%, rgb(0 0 0 / 0.009) 98.8%,
    transparent 100%);
}

/* Mist: a light blur over the top fade-in, strongest at its middle */
.vista::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  top: 17%;
  height: 19%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent);
}

/* ---------------- Showcase sections ----------------
   A title-led text block beside a gold-framed jigsaw. Guru Dev is light
   sky blue; Maharishi is light gold and mirrors it. */
.showcase {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  color: var(--navy);
}

/* Guru Dev: the painted sky, always shown top to bottom so its cloud-free
   blue meets the banner above and the vista below. It runs from the
   section top (under the banner's fading foot) down over the vista's
   hidden crown and halfway into its fade-in (26.5% down the vista).
   The file is the painting beside its mirror image (1764 x 1783), so it
   can span wide screens; the mirror line falls behind the portraits.
   Desktop: the pair fills the width. */
.hero {
  --sky-h: calc(100% - var(--tuck-bottom) + var(--vista-h) * 0.265);
  margin-top: calc(-1 * var(--tuck-top));
  background:
    url("assets/guru-dev-sky.webp") 0 0 / 100% var(--sky-h) no-repeat,
    var(--sky);
}

/* Stacked layouts are tall and narrow: the painting keeps its shape and
   shows from its left edge, where its clouds billow in */
@media (max-width: 1000px) {
  .hero { background-size: auto var(--sky-h); }
}

/* Maharishi and About share the golden sky. Desktop: the painting fills
   the width and height (a gentle stretch suits soft clouds). Stacked
   layouts are tall and narrow, so it keeps its shape and centres. */
.golden {
  position: relative;
  z-index: 1;                                /* under the vista's foot */
  margin-top: calc(-1 * var(--tuck-gold));
  padding-top: var(--tuck-gold);             /* content starts below the vista */
  background:
    url("assets/maharishi-golden-sky.webp") 50% 0 / 100% 100% no-repeat,
    var(--gold-sky);
}

@media (max-width: 1000px) {
  .golden { background-size: auto 100%; }
}

.showcase__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 80px);
  max-width: 1640px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 120px) clamp(16px, 4vw, 64px) clamp(80px, 9vw, 144px);
}

/* Mirrored: wall on the left, text on the right (text stays first in
   the markup so it's read first) */
@media (min-width: 1001px) {
  .showcase__inner--flip { grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr); }
  .showcase__inner--flip .showcase__copy { grid-column: 2; grid-row: 1; }
  .showcase__inner--flip .collage { grid-column: 1; grid-row: 1; }
}

/* The Guru Dev section adds back the space it tucks under the banner
   and the vista, plus a little more air above */
.hero .showcase__inner {
  padding-top: calc(var(--tuck-top) + clamp(80px, 10vw, 160px));
  padding-bottom: calc(var(--tuck-bottom) + clamp(56px, 7vw, 120px));
}
.showcase--maharishi .showcase__inner { padding-top: clamp(40px, 5vw, 88px); }

.showcase__copy {
  position: relative;
  z-index: 2;
}

/* Title and lede share the serif so they read as one block:
   the title leads, the lede continues it lighter and smaller. */
.showcase__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.99rem, 5.06vw, 5.29rem);   /* 1.15x */
  font-weight: 600;
  font-variation-settings: "opsz" 120;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.showcase__title em {
  color: var(--rust-deep);
  font-style: italic;
  font-weight: 500;
}

.showcase__lede {
  max-width: 30ch;
  margin: 18px 0 36px;
  color: rgb(20 50 74 / 0.86);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.8vw, 1.6875rem);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  line-height: 1.4;
  text-wrap: pretty;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px 16px 28px;
  border-radius: 999px;
  background: var(--saffron);
  color: var(--night-deep);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgb(170 100 20 / 0.28),
    0 10px 30px -10px rgb(200 120 30 / 0.55);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover { background: #ffc56c; transform: translateY(-2px); }

/* Download glyph: an arrow into a tray, drawn in the text colour.
   It dips slightly on hover. */
.button__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.button:hover .button__icon { transform: translateY(2px); }
.button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------------- Portrait jigsaw ----------------
   Two interlocking columns: the procession over a pair of portraits,
   and the throne portrait over the silver-throne landscape. The side
   column width is tuned so both columns land on the same line; any
   few-pixel difference is closed by the frame marked to grow, whose
   photo trims a sliver (object-fit: cover). */
.collage {
  --gap: clamp(12px, 1.6vw, 24px);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
}

/* Soft warm light behind the wall */
.collage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  aspect-ratio: 1.4;
  translate: -50% -50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 244 218 / 0.14), rgb(255 236 196 / 0.05) 50%, transparent 80%);
}

.collage__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.collage__col--main { flex: 1 1 0; }
.collage__col--side { flex: 0 0 38.5%; }

.collage__pair {
  display: flex;
  flex: 1 0 auto;      /* grows if the main column falls short */
  gap: var(--gap);
}
.collage__pair .frame { flex: 1 1 0; }

.frame--silver { flex: 1 0 auto; }  /* grows if the side column falls short */

.collage--mirror { flex-direction: row-reverse; }

/* ---------------- Gold frame ----------------
   One fine gold line, flush against the photo and lit from the top-left.
   Nothing shades the photo, so it sits forward; a warm glow behind the
   frame lights it like lamplight. */
.frame {
  --rule: 2px;
  position: relative;
  margin: 0;
  padding: var(--rule);
  border-radius: 2px;
  box-shadow:
    0 0 38px -8px rgb(253 196 110 / 0.32),   /* lamplight */
    0 24px 44px -22px rgb(0 0 0 / 0.6);      /* lift */
  animation: frame-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms + 300ms);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
  display: flex;
  flex-direction: column;
}

/* The gold line: a gradient, brightest where the light falls */
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--rule);
  background: linear-gradient(135deg, #fff3cf 0%, #f2d48a 22%, #dcb15d 52%, #f0d088 78%, #c99a48 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.frame__art {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: rgb(0 0 0 / 0.2);
}

.frame__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 52px -6px rgb(253 196 110 / 0.5),
    0 32px 56px -24px rgb(0 0 0 / 0.7);
}

@keyframes frame-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

.frame--throne     { --i: 0; }
.frame--procession { --i: 1; }
.frame--meditating,
.frame--profile    { --i: 2; }
.frame--silver     { --i: 3; }

/* ---------------- Quote ----------------
   Maharishi's words, centred under his portraits across the full width
   of the section's grid, two grid gaps below them (the gap, plus the
   same again as margin). */
.showcase__quote {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 640px;
  margin: clamp(36px, 4.5vw, 80px) 0 0;
  text-align: center;
}

.showcase__quote blockquote {
  position: relative;
  margin: 0;
}

/* A large, faint opening mark behind the words */
.showcase__quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: 50%;
  top: -0.42em;
  translate: -50% 0;
  font-family: var(--font-display);
  font-size: 5em;
  line-height: 1;
  color: rgb(176 128 44 / 0.2);
  pointer-events: none;
}

.showcase__quote p {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  line-height: 1.3;
  text-wrap: balance;
}

/* Deep gold small caps, shared by the quote's caption and the sign-off */
.showcase__quote figcaption,
.about__signoff {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6e470b;   /* 4.8:1 or more anywhere on the golden sky */
}

.showcase__quote figcaption { margin-top: 18px; }

/* ---------------- About ----------------
   A calm close, well below the quote, in the blue sky at the foot of the
   golden painting: a modest title, a few lines, and the sign-off
   attached beneath, centred in the same serif. */
.about {
  position: relative;
  z-index: 1;
  color: var(--navy);
  text-align: center;
  padding: clamp(88px, 11vw, 176px) clamp(16px, 4vw, 64px) clamp(88px, 10vw, 160px);
}

.about__inner {
  max-width: 640px;
  margin: 0 auto;
}

.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.2vw, 2.125rem);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.about__lede {
  max-width: 36ch;
  margin: 14px auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  font-variation-settings: "opsz" 24;
  line-height: 1.55;
  color: rgb(20 50 74 / 0.82);
  text-wrap: pretty;
}

.about__signoff {
  margin: 26px 0 0;
  letter-spacing: 0.32em;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .showcase__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .showcase__lede { margin-inline: auto; }
}

@media (max-width: 640px) {
  /* Phones: the same zig-zag, re-cut for a narrow screen */
  .collage {
    --gap: 12px;
    display: grid;
    grid-template-columns: 2.16fr 1fr;
    grid-template-areas:
      "proc   proc"
      "throne med"
      "throne prof"
      "silver silver";
  }
  .collage__col,
  .collage__pair { display: contents; }
  .frame--procession { grid-area: proc; }
  .frame--throne     { grid-area: throne; }
  .frame--meditating { grid-area: med; }
  .frame--profile    { grid-area: prof; }
  .frame--silver     { grid-area: silver; }

  .collage--mirror {
    grid-template-columns: 1fr 2.16fr;
    grid-template-areas:
      "proc   proc"
      "med    throne"
      "prof   throne"
      "silver silver";
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner img,
  .banner__wordmark,
  .frame { animation: none; }
  .frame,
  .button,
  .button__icon,
  .topnav__pill,
  .topnav__links a,
  .topnav__links a::after,
  .topnav__contact { transition: none; }
}