/* ════════════════════════════════════════════════════════════════════
   Yogi Ashok Sharma Bhatta — ashoksharmabhatta.com.np
   ────────────────────────────────────────────────────────────────────
   The page is paced like a day of practice: it opens in light, sinks
   into a still dark centre at the lineage and the mountains, then
   returns to light for the record, the work and the invitation.

   Signature: the rim of a singing bowl. A wide, shallow arc — the
   profile of a bowl seen edge-on — carries the header's mark and the
   section rules; the rings a struck bowl sends outward appear behind
   the sound-healing panel, and again across the footer.

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Shared pieces (eyebrow, rule, reveal, links, buttons)
     05  Navigation
     06  Hero
     07  Journey
     08  Practice
     09  Tradition
     10  Retreats
     11  Credentials
     12  Organisations
     13  Gallery & lightbox
     14  Connect & form
     15  Footer & floating WhatsApp
     16  Motion preferences & print
   ════════════════════════════════════════════════════════════════════ */


/* ── 07 · Journey ────────────────────────────────────────────────── */
.journey__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

/* An aside beside his story. It carries the saffron rule the old placeholder
   had, but none of its dashed-box scaffolding — this is finished text, not a
   slot waiting to be filled. It becomes a <blockquote> the day his own words
   arrive; see the README. */
.pathnote {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: var(--measure);
  border-left: 2px solid var(--saffron);
  padding: .35rem 0 .35rem clamp(1.25rem, 3vw, 2rem);
}
.pathnote__label {
  font-size: .70rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--saffron-ink);
  margin: 0 0 .8rem;
}
.pathnote__body {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.12rem, 2.1vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.journey__figure { margin: 0; }
.journey__figure img { width: 100%; }

/* ── The practice clip ────────────────────────────────────────────
   A moving portrait rather than a broadcast: muted, looping, and it
   only begins once it is on screen. The controls stay out of the way
   until the frame is hovered or focused. */
.clip {
  position: relative;
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: 540 / 960;
}
.clip__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--stone);
}

/* A whisper of warmth over the footage, so it belongs to the page. */
.clip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(42,33,24,.12) 0%, transparent 26%, transparent 62%, rgba(42,33,24,.42) 100%);
}

.clip__controls {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  z-index: 2;
  display: flex;
  gap: .4rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.clip:hover .clip__controls,
.clip:focus-within .clip__controls { opacity: 1; transform: none; }
/* Without a pointer there is nothing to hover, so the controls simply stay. */
@media (hover: none) { .clip__controls { opacity: 1; transform: none; } }

.clip__btn {
  width: 40px; height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251, 247, 240, .28);
  border-radius: 50%;
  background: rgba(42, 33, 24, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  cursor: pointer;
  padding: 0;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.clip__btn:hover { background: rgba(42, 33, 24, .8); border-color: rgba(251, 247, 240, .5); }
.clip__icon { width: 20px; height: 20px; }

/* One icon per state — the other is folded away. */
.clip__icon--play,
.clip__icon--sound { display: none; }
.clip__btn[aria-pressed="false"] .clip__icon--pause,
.clip__btn[aria-pressed="false"] .clip__icon--muted { display: none; }
#clipPlay[aria-pressed="false"] .clip__icon--play { display: block; }
#clipSound[aria-pressed="true"] .clip__icon--sound { display: block; }
#clipSound[aria-pressed="true"] .clip__icon--muted { display: none; }
.journey__figure figcaption {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .9rem;
}

@media (min-width: 900px) {
  .journey__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: start;
  }
  .journey__figure { position: sticky; top: 6rem; }
}

/* His own words — visibly a place being kept, not a finished quotation. */
/* ── 08 · Practice ───────────────────────────────────────────────── */
.offer { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

/* Sound healing leads — it is the offering he is sought for, so it is
   given the whole width and the resonance mark. The other three are quiet. */
.offer__lead {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.offer__lead-media img { width: 100%; }

.offer__lead-body { position: relative; }

.offer__num {
  font-family: var(--deva);
  font-size: 1.05rem;
  color: var(--saffron-ink);
  margin: 0 0 .5rem;
  letter-spacing: .04em;
}

/* Resonance — the rings a struck bowl sends outward. The one ambient
   motion on the page: very slow, very faint, and stilled for anyone who
   asks for reduced motion. */
.rings {
  position: absolute;
  /* Contained on small screens; the offset placement waits for room. */
  top: -3.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 11rem; height: 11rem;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.rings circle {
  fill: none;
  stroke: var(--saffron);
  stroke-width: .6;
  opacity: .22;
  transform-origin: 100px 100px;
}
.is-in .rings { opacity: 1; }
.is-in .rings circle { animation: resonate 9s var(--ease) infinite; }
.is-in .rings circle:nth-child(2) { animation-delay: .8s; }
.is-in .rings circle:nth-child(3) { animation-delay: 1.6s; }
.is-in .rings circle:nth-child(4) { animation-delay: 2.4s; }

@keyframes resonate {
  0%       { transform: scale(.72); opacity: 0; }
  18%      { opacity: .26; }
  100%     { transform: scale(1.18); opacity: 0; }
}

.offer__rest { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.offer__item p { color: var(--ink-soft); margin: 0; max-width: 32rem; }

.practice__wide { margin: clamp(3rem, 7vw, 5rem) 0 0; }
.practice__wide img { width: 100%; }

.offer__cta {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  color: var(--ink);
}
.offer__cta a {
  color: var(--saffron-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 102, 31, .35);
}
.offer__cta a:hover { border-color: var(--saffron); }

@media (min-width: 820px) {
  .rings { top: -4.75rem; left: -5.5rem; transform: none; width: 13rem; height: 13rem; }
  .offer__lead { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .offer__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem); }
  .offer__item p { font-size: 1rem; }
}


/* ── 09 · Tradition ──────────────────────────────────────────────── */
.section--dark { background: var(--deep); color: var(--light-ink); }
.section--dark .h2 { color: var(--light-ink); }

.trad__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.trad__figure { margin: 0; }
.trad__figure img { width: 100%; }

@media (min-width: 940px) {
  .trad__grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    align-items: start;
  }
  .trad__figure { position: sticky; top: 6rem; }
}


/* ── 10 · Retreats ───────────────────────────────────────────────── */
.section--retreats { padding-top: 0; }

.retreat__band {
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  max-height: 62vh;
  overflow: hidden;
}
.retreat__band img {
  width: 100%;
  height: 100%;
  max-height: 62vh;
  object-fit: cover;
  object-position: 50% 24%;
}

/* The journeys are a real dated sequence, so the list is ordered and the
   years are given as Nepal keeps them — Bikram Sambat, with BS beneath. */
.timeline { list-style: none; margin: 0; padding: 0; }

.timeline__item {
  display: grid;
  gap: .75rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  border-top: 1px solid var(--light-rule);
}
.timeline__item:last-child { border-bottom: 1px solid var(--light-rule); }

.timeline__year {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.timeline__year [lang="ne"] {
  font-family: var(--deva);
  font-size: 1.65rem;
  font-weight: 400;
  color: #D98B45;
  line-height: 1;
}
.timeline__ce {
  font-size: .70rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--light-soft);
}

.timeline__body p {
  margin: 0;
  color: var(--light-soft);
  max-width: 40rem;
}

@media (min-width: 780px) {
  .timeline__item { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .timeline__year { flex-direction: column; gap: .3rem; align-items: flex-start; }
}

/* Care before a journey — framed as care for the guest. */
.care {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 44rem;
  border-left: 2px solid var(--saffron);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.care__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--light-ink);
  margin: 0 0 .8rem;
}
.care p { color: var(--light-soft); margin: 0 0 1rem; }
.care p:last-child { margin-bottom: 0; }


/* ── 11 · Credentials ────────────────────────────────────────────── */
.creds { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }

.creds__title {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--saffron-ink);
  margin: 0 0 1.75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--stone);
}

.creds__list { margin: 0; }
.creds__row {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--stone);
}
.creds__row:last-child { border-bottom: 0; }

.creds__row dt {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: .3rem;
}
.creds__row dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.creds__year {
  margin-top: .35rem !important;
  font-size: .72rem !important;
  letter-spacing: .18em;
  color: var(--saffron-ink) !important;
}

.creds__note {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 34rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 820px) {
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem); }
}


/* ── 12 · Organisations ──────────────────────────────────────────── */
.orgs { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }

.org {
  background: var(--white);
  border: 1px solid var(--stone);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.org__deva {
  font-family: var(--deva);
  font-size: .95rem;
  color: var(--saffron-ink);
  margin: 0 0 .35rem;
}
.org__body { color: var(--ink-soft); margin: 0 0 1.4rem; }

.org__meta { margin: 0 0 1.6rem; display: grid; gap: .5rem; }
.org__meta > div { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.org__meta dt {
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 6.5rem;
}
.org__meta dd { margin: 0; font-size: .92rem; }

.org__seva { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .65rem; }
.org__seva li {
  display: flex;
  gap: .85rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--stone);
}
.org__seva li:last-child { border-bottom: 0; }
.org__seva [lang="ne"] { font-family: var(--deva); font-size: .95rem; color: var(--ink); }
.org__seva span:last-child { font-size: .85rem; color: var(--ink-soft); letter-spacing: .04em; }

.org .link-arrow { margin-top: auto; align-self: flex-start; }

.orgs__mission {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 36rem;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  color: var(--ink);
}

@media (min-width: 820px) {
  .orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── 13 · Gallery & lightbox ─────────────────────────────────────── */
.section--gallery { background: var(--white); }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.6vw, 1.25rem) clamp(.6rem, 1.6vw, 1.25rem);
  align-items: start;
}
.gallery__item { margin: 0; }
/* The frame, not the figure, does the clipping — the name below it must stay
   clear of the image's hover lift. */
.gallery__frame { overflow: hidden; }
.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 1.1s var(--ease), opacity .5s var(--ease);
}
.gallery__item img:hover { transform: scale(1.03); }
/* The asana, named in the page's own type rather than burnt into the picture.
   Same idiom as the caption under the practice clip. */
.gallery__item figcaption {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .8rem;
}

@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery__item figcaption { font-size: .78rem; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(26, 26, 26, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  object-fit: contain;
  background: none;
}
.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: var(--light-ink);
  cursor: pointer;
  padding: 10px;
}
.lightbox__close svg { width: 100%; height: 100%; }


/* ── 14 · Connect & form ─────────────────────────────────────────── */
.connect__head { margin-bottom: clamp(2.75rem, 6vw, 4rem); }
.connect__welcome {
  max-width: 40rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.connect__grid { display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); }

/* ── How to reach him ─────────────────────────────────────────────
   A plain definition list, set properly: label left, value right, aligned
   on the baseline, one hairline between each. No marks, no colour ranking,
   no motion — the section beside it is a form, and two competing
   treatments in one panel is one too many. */
.contact { margin: 0 0 2.75rem; }
.contact__row {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--stone);
  display: grid;
  gap: .3rem;
}
.contact__row:first-child { border-top: 1px solid var(--stone); }

.contact dt {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--saffron-ink);
}
.contact dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  display: grid;
  gap: .1rem;
  color: var(--ink);
}
.contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
  transition: border-color .35s var(--ease), color .35s var(--ease);
  justify-self: start;
  min-height: 1.6rem;
  word-break: break-word;
}
.contact a:hover,
.contact a:focus-visible { color: var(--saffron-ink); border-color: var(--saffron); }

@media (min-width: 560px) {
  .contact__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }
}

.social { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.social a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .55rem .95rem .55rem .7rem;
  border: 1px solid var(--stone);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.social a:hover { color: var(--saffron-ink); border-color: var(--saffron); }
.social svg { width: 18px; height: 18px; flex: none; }

/* ── The letter ───────────────────────────────────────────────────
   A field here is a writing line, not a box. White boxes on cream were the
   one place the page looked like a form bolted onto it; a hairline with the
   page showing through reads as something to write on. On focus a saffron
   rule draws itself in from the left — the same gesture the section links
   in the header make. */
.form__intro {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.form__grid { display: grid; gap: 1.9rem 1.5rem; }

.field { position: relative; }
.field label {
  display: block;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .45rem;
  transition: color .35s var(--ease);
}
.field:focus-within label { color: var(--saffron-ink); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .3rem 0 .7rem;
  -webkit-appearance: none;
  appearance: none;
}
/* The rule below is the field's edge, so the browser's own outline would
   double it. Focus is shown by the rule and the label together. */
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; }
.field textarea { display: block; min-height: 7.5rem; resize: vertical; }

.field__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--stone);
}
.field__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}
.field:focus-within .field__rule::after { transform: scaleX(1); }

/* A real chevron, drawn once. The old arrow was two linear-gradients pinned
   21px from the top, which slid off the moment the field changed height. */
.field--select select {
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%234A4A4A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15rem center;
  background-size: 12px 8px;
}

/* A field that has been flagged holds a saffron rule and says why, right
   under itself. The message is tied to the control with aria-describedby,
   so it is announced when focus lands there — the note at the foot is a
   summary, not the explanation. */
.field__err {
  margin: .5rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--saffron-ink);
  min-height: 0;
}
.field__err:empty { display: none; }
.field.is-invalid .field__rule { background: var(--saffron); }
.field.is-invalid label { color: var(--saffron-ink); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
.btn--send { display: inline-flex; align-items: center; gap: .75rem; }
.btn--send svg { width: 19px; height: 12px; flex: none; transition: transform .45s var(--ease); }
.btn--send:hover svg { transform: translateX(4px); }

.form__note { margin: 0; font-size: .88rem; color: var(--saffron-ink); }

@media (min-width: 560px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .connect__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(3rem, 6vw, 5rem); }
}


/* ── 15 · Footer & floating WhatsApp ───────────────────────────────
   The bowl, struck. A plane laid back in perspective carries rings that
   travel outward and fade; the address stands on three depths above it and
   parts a little as the deck turns toward the pointer. All of it is
   transform and opacity, so none of it can shift the page.
   ──────────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* the plane is wider than the page */
  background: var(--deep);
  color: var(--light-soft);
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem);
  font-size: .92rem;
  /* Where the bowl is struck: the centre of the blessing, measured UP from
     the footer's bottom edge rather than as a fraction of its height. The
     footer nearly doubles in height when the three columns stack, so a
     percentage put the strike point in the middle of the link list on a
     phone. What sits below the blessing — the credit and the bottom padding
     — barely changes. Measured, it holds at 90px up to about 780px, ramps
     to 110px by 1200px as the bottom padding and the blessing reach their
     own clamp ceilings, and is flat again above that. This tracks it to
     within about 2px across 380–1920px. */
  --strike: clamp(5.625rem, 3.3rem + 4.76vw, 6.875rem);
  perspective: 1100px;
  perspective-origin: 50% calc(100% - var(--strike));
}

/* ── The scene ────────────────────────────────────────────────────── */
/* Masked so the rings dissolve toward the edges of the footer instead of
   being cut off square by its bounds — the sound thins out, it does not
   stop at a border. */
.footer__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  -webkit-mask-image: radial-gradient(125% 95% at 50% calc(100% - var(--strike)), #000 24%, rgba(0,0,0,.55) 58%, transparent 88%);
          mask-image: radial-gradient(125% 95% at 50% calc(100% - var(--strike)), #000 24%, rgba(0,0,0,.55) 58%, transparent 88%);
}

/* A warm rise where the bowl is struck, sitting under the blessing. */
.footer__glow {
  position: absolute;
  left: 50%; bottom: var(--strike);
  width: min(120vw, 60rem);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, 50%);
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(217, 139, 69, .17) 0%,
              rgba(217, 139, 69, .07) 42%,
              transparent 72%);
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.footer.is-struck .footer__glow { opacity: 1; }

/* Laid back so the rings read as circles on a floor receding from the
   reader. `preserve-3d` is what makes it perspective rather than a squash. */
/* Centred on the blessing, not on the footer: `top` places the middle of
   the plane, which is where the rings are born. Anchoring it by `bottom`
   put that centre up near the footer's top edge, and every ring was clipped
   away before it was seen. */
/* Anchored by its bottom edge and then pushed down half its own height, so
   its middle — where the rings are born — lands exactly on the strike line
   whatever height the footer happens to be. */
.footer__plane {
  position: absolute;
  left: 50%; bottom: var(--strike);
  width: min(190vw, 96rem);
  aspect-ratio: 1;
  transform: translate(-50%, 50%) rotateX(72deg);
  transform-style: preserve-3d;
}

/* A scaled element scales its own border, so a ring starting at nothing
   would draw a stroke of nothing. They come in at 30% instead, faded up
   from zero, which reads as emerging without the hairline disappearing. */
.footer__ring,
.footer__strike {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(217, 139, 69, .55);
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;  /* keep it off the main thread */
}

/* Six rings on a 21s round: one leaves about every three and a half
   seconds, near the pace of an easy breath. */
.footer.is-struck .footer__ring {
  animation: footerResonate 21s linear infinite;
  animation-delay: calc(var(--i) * 3.5s);
}

/* The single ring that goes out when the reader first arrives — the strike
   itself. It runs once, brighter and quicker than the ambient round. */
.footer.is-struck .footer__strike {
  border-color: rgba(217, 139, 69, .8);
  animation: footerStrike 4.2s var(--ease-out) .2s both;
}

@keyframes footerResonate {
  0%   { transform: scale(.30); opacity: 0; }
  16%  { opacity: .34; }
  70%  { opacity: .12; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes footerStrike {
  0%   { transform: scale(.26); opacity: 0; }
  14%  { opacity: .60; }
  100% { transform: scale(1.04); opacity: 0; }
}

/* ── The address, on three depths ─────────────────────────────────── */
.footer__deck {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}

/* Reuses `.reveal` for its observer, but carries its own depth through the
   rise — a bare `transform: none` on arrival would flatten the parallax. */
/* Depth is carried whether or not the layer also rises: the credit is the
   last line on the page and can never clear the reveal observer's bottom
   margin, so it is given its depth and left visible. */
.footer__layer { transform: translate3d(0, 0, var(--z, 0)); }
.footer__layer.reveal {
  transform: translate3d(0, 22px, var(--z, 0));
  transition-delay: var(--d, 0s);
}
.footer__layer.reveal.is-in { transform: translate3d(0, 0, var(--z, 0)); }

.footer__top {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--light-rule);
  transform-style: preserve-3d;
}

.footer__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 300;
  color: var(--light-ink);
  margin: 0 0 .3rem;
  letter-spacing: -.008em;
}
.footer__deva { font-family: var(--deva); margin: 0 0 .6rem; color: var(--light-soft); font-size: .95rem; }
.footer__place {
  margin: 0 0 1rem;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #D98B45;
}
.footer__line { margin: 0; max-width: 26rem; line-height: 1.7; }

.footer__label {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #D98B45;
  margin: 0 0 1rem;
}
.footer__list, .footer__social { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__social { margin-top: 1.5rem; }

/* A link answers the way the section links do: a rule drawn in from the
   left, and the word carried a little toward the reader. */
.footer a {
  position: relative;
  color: var(--light-soft);
  text-decoration: none;
  transition: color .35s var(--ease), transform .35s var(--ease);
  display: inline-block;
  min-height: 1.7rem;
}
.footer__list a::after,
.footer__social a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .28rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
.footer a:hover { color: var(--light-ink); }
.footer__list a:hover, .footer__social a:hover { transform: translateX(3px); }
.footer__list a:hover::after,
.footer__list a:focus-visible::after,
.footer__social a:hover::after,
.footer__social a:focus-visible::after { transform: scaleX(1); }

/* ── The blessing, at the centre of the rings ─────────────────────── */
.footer__om {
  text-align: center;
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.footer__om [lang="ne"] {
  font-family: var(--deva);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: #D98B45;
  line-height: 1.2;
}
.footer__om-en {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--light-soft);
}

.footer__credit {
  text-align: center;
  margin: 0;
  font-size: .74rem;
  letter-spacing: .1em;
  color: rgba(195, 183, 166, .78);
}
.footer__credit a { color: rgba(195, 183, 166, .95); border-bottom: 1px solid rgba(195,183,166,.25); }

@media (min-width: 780px) {
  .footer__top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
}



/* ── 16 · Motion preferences & print ─────────────────────────────── */

@media print {
  .nav, .wa, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .footer { background: #fff !important; color: #000 !important; }
  .section--dark .h2, .h3--light, .prose--light p, .prose--light .lede { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ── 17 · Motion ──────────────────────────────────────────────────
   Motion here has one job: to make the page feel unhurried. Everything
   below moves slowly, moves once, and moves only on the compositor
   (transform and opacity), so nothing ever costs a layout. All of it is
   stilled by the reduced-motion block in the critical CSS.
   ──────────────────────────────────────────────────────────────── */

/* Depth on scroll — the hero holds back a little as the page moves past
   it, the way a distant thing does. Driven from js/main.js. */
.hero__plate img { will-change: transform; }

/* Stagger — items in a group arrive in sequence rather than together, so
   a section resolves like a held breath rather than a switch. */
.offer__rest    .reveal:nth-child(2),
.creds          .reveal:nth-child(2) { transition-delay: .1s; }
.offer__rest    .reveal:nth-child(3) { transition-delay: .2s; }

.timeline__item:nth-child(2) { transition-delay: .08s; }
.timeline__item:nth-child(3) { transition-delay: .16s; }
.timeline__item:nth-child(4) { transition-delay: .24s; }

.orgs .org:nth-child(2) { transition-delay: .12s; }

/* Three across: the second row restarts the cascade rather than continuing it. */
.gallery__item:nth-child(2) { transition-delay: .06s; }
.gallery__item:nth-child(3) { transition-delay: .12s; }
.gallery__item:nth-child(5) { transition-delay: .06s; }
.gallery__item:nth-child(6) { transition-delay: .12s; }

/* Photographs settle rather than appear: they come to rest from very
   slightly too close, which reads as a camera finding focus. */
.gallery__item.reveal img,
.journey__figure.reveal img,
.trad__figure.reveal img,
.practice__wide.reveal img,
.retreat__band.reveal img {
  transform: scale(1.045);
  transition: transform 1.5s var(--ease);
}
.gallery__item.reveal.is-in img,
.journey__figure.reveal.is-in img,
.trad__figure.reveal.is-in img,
.practice__wide.reveal.is-in img,
.retreat__band.reveal.is-in img { transform: none; }
/* The hover lift on gallery images must win once they have settled. */
.gallery__item.is-in img:hover { transform: scale(1.03); }

/* A card lifts and turns a few degrees toward the pointer. Small enough
   to register as attention rather than as an effect. */
.tilt { transform-style: preserve-3d; }
.tilt-wrap { perspective: 900px; }
/* The transition is added only once the card has arrived — before that the
   reveal owns `transform`, and overriding it here would cancel the fade. */
.tilt.is-in { transition: transform .5s var(--ease); }

/* Sections carry a faint vertical drift, finishing as they centre. */
@media (prefers-reduced-motion: no-preference) {
  .section__head .h2 { transition-delay: .04s; }
}