@charset "UTF-8";
/* =====================================================================
   Maa Vaishnow Sewa Trust — site theme
   ---------------------------------------------------------------------
   The palette is sampled from the trust's own logo (#D84000) rather than
   picked from a swatch library. Type is a bilingual pair so Hindi typed
   into the CMS sets properly instead of falling back to a system font.
   No CSS framework — every rule here is doing a job for this site.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------- */
:root {
  /* Colour — 8 values, 4 of them structural */
  --paper:      #FFFDF9;   /* ground: near-white with a warm whisper      */
  --stone:      #F3EDE4;   /* alternate band / card fill                  */
  --ink:        #241611;   /* headings, footer ground (warm near-black)   */
  --slate:      #6E625B;   /* muted body + meta text (5.4:1 on paper)     */
  --brand:      #D84000;   /* the trust's vermilion, straight off the logo */
  --brand-ink:  #A62F00;   /* text-safe depth of the same red (7:1)       */
  --gota:       #B08637;   /* antique brass — hairlines and rules         */
  --jyot:       #F2A73B;   /* flame amber — highlights, used sparingly    */

  --line:       color-mix(in srgb, var(--gota) 34%, transparent);
  --line-soft:  color-mix(in srgb, var(--ink) 10%, transparent);

  /* Type */
  --display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif;
  --body:    "Mukta", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.4rem, 1.55rem + 3.5vw, 4.4rem);
  --fs-h1:      clamp(2rem,  1.45rem + 2.2vw, 3.1rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
  --fs-h3:      clamp(1.15rem, 1.06rem + .42vw, 1.42rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;

  /* Space + shape */
  --wrap:    76rem;
  --gutter:  clamp(1.15rem, .6rem + 2.2vw, 3rem);
  --band-y:  clamp(3.25rem, 2rem + 5vw, 6.5rem);
  --radius:  3px;          /* almost square — puja goods are not rounded  */

  --shadow: 0 1px 2px rgba(36,22,17,.05), 0 8px 24px -12px rgba(36,22,17,.18);
}

/* ---------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.72 var(--body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: 0; }

p { margin: 0 0 1.15em; max-width: 68ch; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.15rem; font-size: var(--fs-sm);
}
.skip:focus { left: .5rem; top: .5rem; color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   2b. Devanagari
   ---------------------------------------------------------------------
   Letter-spacing is a Latin device. Applied to Devanagari it pulls matras
   and conjuncts away from the consonants they belong to — "सेवा" renders
   as "से वा". So every tracked element loses its tracking in Hindi, and
   uppercasing (which Devanagari has no concept of) goes with it.
   Line height also needs a little more room for the shirorekha and the
   vowel signs that sit above and below it.
   ------------------------------------------------------------------- */
:lang(hi) .shead__eyebrow,
:lang(hi) .hero__eyebrow,
:lang(hi) .brand__tag,
:lang(hi) .crumbs,
:lang(hi) .stat__l,
:lang(hi) .cinfo__k,
:lang(hi) .bankcard dt,
:lang(hi) .register__note,
:lang(hi) .donate__vpalabel,
:lang(hi) .field__legend,
:lang(hi) .quote__role,
:lang(hi) .foot h3,
:lang(hi) .topbar,
:lang(hi) .btn {
  letter-spacing: normal;
  text-transform: none;
}

:lang(hi) body { line-height: 1.85; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) h4,
:lang(hi) .hero__title {
  line-height: 1.32;
  letter-spacing: normal;
}
/* The trust's own name and the mantra are Devanagari in both languages. */
.brand__name:lang(hi) { letter-spacing: normal; }

/* ---------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------- */
.wrap {
  width: min(var(--wrap), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.wrap--narrow { width: min(46rem, 100% - (var(--gutter) * 2)); }

.band { padding-block: var(--band-y); }
.band--stone { background: var(--stone); }
.band--ink   { background: var(--ink); color: var(--stone); }
.band--tight { padding-block: calc(var(--band-y) * .6); }

.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink a { color: var(--jyot); }

/* Section head — the eyebrow is a label, not decoration: it names the
   kind of content that follows. */
.shead { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }
.shead__eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: .85rem;
}
.shead__eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.band--ink .shead__eyebrow { color: var(--jyot); }
.band--ink .shead__eyebrow::after { background: color-mix(in srgb, var(--gota) 45%, transparent); }
.shead h2 { margin-bottom: .35em; }
.shead__sub { color: var(--slate); max-width: 58ch; margin: 0; }
.band--ink .shead__sub { color: color-mix(in srgb, var(--stone) 78%, transparent); }

/* ---------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: color-mix(in srgb, var(--stone) 82%, transparent);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2.5rem; flex-wrap: wrap;
}
.topbar a { color: var(--stone); text-decoration: none; }
.topbar a:hover { color: var(--jyot); }
.topbar__mantra {
  font-family: var(--display);
  color: var(--jyot);
  font-size: .82rem;
  letter-spacing: normal;   /* Devanagari — never tracked */
}
.topbar__links { display: flex; gap: 1.25rem; align-items: center; }
/* The address is long and the phone matters more on a narrow screen. */
@media (max-width: 32rem) { .topbar__email { display: none; } }

/* Language switcher — both options always visible, so a Hindi reader can see
   हिन्दी without first working out what a globe icon means. */
.langsw {
  display: flex; align-items: center;
  border: 1px solid color-mix(in srgb, var(--gota) 45%, transparent);
  border-radius: 100px; overflow: hidden;
}
.langsw__opt {
  display: block; padding: .2rem .7rem;
  font-size: var(--fs-xs); line-height: 1.5;
  color: color-mix(in srgb, var(--stone) 75%, transparent) !important;
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.langsw__opt + .langsw__opt { border-left: 1px solid color-mix(in srgb, var(--gota) 35%, transparent); }
.langsw__opt:hover { background: color-mix(in srgb, var(--jyot) 22%, transparent); color: var(--paper) !important; }
.langsw__opt.is-on { background: var(--jyot); color: var(--ink) !important; font-weight: 600; }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__in {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.brand img { height: 2.6rem; width: auto; }
.brand__text { display: none; }
.brand__name {
  display: block;
  font-family: var(--display); font-size: 1.06rem; color: var(--ink);
  line-height: 1.15; letter-spacing: -.01em;
}
.brand__tag {
  display: block; margin-top: .1rem;
  font-size: .68rem; color: var(--slate); letter-spacing: .13em;
  text-transform: uppercase; line-height: 1;
}
/* Below the nav breakpoint the sticky call bar already carries this action,
   so the header keeps only the logo and the menu. Scoped to .masthead so it
   outranks the .btn display rule that comes later in this file. */
.masthead .nav__cta { display: none; flex: none; }
@media (min-width: 60rem) { .masthead .nav__cta { display: inline-flex; } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, .3rem + 1.1vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .4rem 0;
  font-size: .95rem; font-weight: 500; color: var(--ink);
  text-decoration: none; position: relative;
  /* Hindi labels are multi-word ("सेवा बुक करें") and were breaking across
     two lines inside their own item, which pushed the bar out of shape. */
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--brand-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.navtoggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .8rem;
  font: inherit; font-size: var(--fs-sm); color: var(--ink); cursor: pointer;
}
.navtoggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.navtoggle__bars::before, .navtoggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after  { top: 6px; }

.drawer {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  padding-block: 1rem 1.5rem;
}
.drawer[data-open] { display: block; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
  display: block; padding: .8rem 0; text-decoration: none;
  color: var(--ink); font-size: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
}
.drawer__list a[aria-current="page"] { color: var(--brand-ink); }

@media (min-width: 60rem) {
  .nav { display: block; }
  .navtoggle, .drawer { display: none !important; }
}
/* The wordmark beside the logo only appears once there is genuinely room for
   it. The Hindi name is wider than the English one, and between 60 and 74rem
   the logo alone already says who this is. */
@media (min-width: 74rem) {
  .brand__text { display: block; }
}

/* ---------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font: 600 var(--fs-body)/1 var(--body);
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-ink); color: #fff; }
.btn--primary:hover { background: var(--brand); color: #fff; }
.btn--ghost { border-color: var(--gota); color: var(--brand-ink); background: transparent; }
.btn--ghost:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn--onink { border-color: color-mix(in srgb, var(--gota) 60%, transparent); color: var(--paper); }
.btn--onink:hover { background: var(--jyot); border-color: var(--jyot); color: var(--ink); }
.btn--sm { padding: .55rem 1rem; font-size: var(--fs-sm); }
.btn--wa { background: #1EA95A; color: #fff; }
.btn--wa:hover { background: #17864A; color: #fff; }

.btnrow { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------------------------------------------------------------------
   6. Hero
   ---------------------------------------------------------------------
   Two additions carry the styling here, and both come from the subject
   rather than from a stock effect:

   · a torana — the scalloped marigold-and-leaf string hung over the
     doorway of a house that is holding a puja — runs along the top edge,
     so entering the page reads like stepping through a dressed door;
   · a jyot glow behind the headline, so the type sits in warm lamp light
     instead of on a flat grey scrim.

   Both are pure CSS gradients: no extra image, no extra request.
   ------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: var(--stone); overflow: hidden; }

/* Torana: alternating brass scallops with an amber bead in each dip. */
.hero::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 18px; z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 11px 0, var(--jyot) 0 2.5px, transparent 2.6px) 0 7px / 22px 18px repeat-x,
    radial-gradient(circle at 11px -4px, color-mix(in srgb, var(--gota) 92%, #fff) 0 9px, transparent 9.5px) 0 0 / 22px 18px repeat-x,
    linear-gradient(var(--brand), var(--brand)) 0 0 / 100% 3px no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.hero__slides { display: grid; }
/* Slides cut rather than cross-fade. Two slides fading at once both dip
   below full opacity, so the dark hero background flashes through in the
   middle of the transition — and a cut costs nothing on a slow phone. */
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  min-height: clamp(28rem, 20rem + 26vw, 40rem);
  display: grid; align-items: center;
  opacity: 0; visibility: hidden;
}
.hero__slide[data-active] { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* the jyot: a warm pool of lamp light where the headline sits */
    radial-gradient(60% 70% at 22% 52%, rgba(242,167,59,.20) 0%, rgba(242,167,59,.07) 42%, transparent 72%),
    linear-gradient(100deg, rgba(36,22,17,.94) 0%, rgba(36,22,17,.82) 38%, rgba(36,22,17,.35) 72%, rgba(36,22,17,.55) 100%);
}

.hero__body {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
  padding-left: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  max-width: 42rem;
}
/* A brass rule down the side, picking up the eyebrow's short rule and the
   register's ruling — the same line running through the whole site. */
.hero__body::before {
  content: "";
  position: absolute; left: 0; top: clamp(3.5rem, 2rem + 6vw, 6rem); bottom: clamp(3.5rem, 2rem + 6vw, 6rem);
  width: 2px;
  background: linear-gradient(var(--brand) 0 22%, var(--gota) 22% 58%, transparent 58%);
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--jyot); font-weight: 600; margin-bottom: 1.1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.hero__eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--gota);
}
/* h1 on the first slide, p on the rest — same treatment either way. */
.hero__title {
  font-family: var(--display); font-weight: 400;
  line-height: 1.14; letter-spacing: -.012em; text-wrap: balance;
  font-size: var(--fs-display);
  color: var(--paper);
  margin: 0 0 .5em;
  max-width: none;
  text-shadow: 0 2px 18px rgba(20,10,4,.55);
}
.hero__title em {
  font-style: normal;
  color: var(--jyot);
  display: block;
}
.hero__sub {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem);
  color: color-mix(in srgb, var(--stone) 90%, transparent);
  max-width: 46ch; margin-bottom: 1.9rem;
  text-shadow: 0 1px 10px rgba(20,10,4,.5);
}
.hero .btnrow { margin-bottom: 1.25rem; }

/* Slide controls — a lit wick for the current slide, an unlit one for the
   rest, which reads as a count without needing a number. */
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 1.5rem;
  display: flex; justify-content: center; align-items: center; gap: .6rem; z-index: 3;
}
.hero__dot {
  width: 2.25rem; height: 3px; padding: 0; border: 0; cursor: pointer;
  border-radius: 2px;
  background: color-mix(in srgb, var(--stone) 32%, transparent);
  transition: background-color .25s ease, box-shadow .25s ease, width .25s ease;
}
.hero__dot:hover { background: color-mix(in srgb, var(--stone) 60%, transparent); }
.hero__dot[aria-current="true"] {
  width: 3rem;
  background: var(--jyot);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--jyot) 65%, transparent);
}

/* ---------------------------------------------------------------------
   7. Page header (interior pages)
   ------------------------------------------------------------------- */
.pagehead {
  background: var(--ink); color: var(--stone);
  padding-block: clamp(2.75rem, 1.75rem + 4vw, 5rem);
  position: relative;
}
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0 22%, var(--gota) 22% 34%, transparent 34%);
}
.pagehead h1 { color: var(--paper); margin-bottom: .3em; }
.pagehead__sub { color: color-mix(in srgb, var(--stone) 80%, transparent); max-width: 60ch; margin: 0; }
.crumbs { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; color: color-mix(in srgb, var(--stone) 65%, transparent); }
.crumbs a { color: var(--jyot); text-decoration: none; }
.crumbs span { padding-inline: .5rem; }

/* ---------------------------------------------------------------------
   8. Prose (richtext from the CMS)
   ------------------------------------------------------------------- */
.prose { font-size: 1.09rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.7em; }
.prose img { border-radius: var(--radius); margin-block: 1.75rem; }
.prose blockquote {
  margin: 2rem 0; padding: .35rem 0 .35rem 1.5rem;
  border-left: 3px solid var(--brand);
  font-family: var(--display); font-size: 1.2rem; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.75rem; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); }
.prose th { font-weight: 600; background: var(--stone); }

/* ---------------------------------------------------------------------
   9. Sewa / feature cards
   ------------------------------------------------------------------- */
.cards {
  display: grid; gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.band--stone .card { background: var(--paper); }
.card__mark {
  font-family: var(--display); font-size: 1.9rem; line-height: 1;
  color: var(--brand); margin-bottom: .9rem;
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--slate); font-size: .97rem; margin-bottom: 0; }
.card__more {
  margin-top: 1.1rem; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; align-self: flex-start;
}
.card__more::after { content: " →"; }

/* ---------------------------------------------------------------------
   10. THE SAMAGRI REGISTER — the signature element.
   The trust keeps handwritten puja checklists in a ruled register. This
   sets that artefact as real type: item on the left, quantity on the
   right, brass rules between, a filled square where the trust supplies
   the item. Everything else on the site stays quieter than this.
   ------------------------------------------------------------------- */
.register {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.register__head {
  padding: clamp(1.25rem, .9rem + 1.2vw, 2rem) clamp(1.15rem, .8rem + 1.4vw, 2.25rem);
  border-bottom: 2px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--gota) 12%, transparent) 7px 8px),
    var(--stone);
}
.register__mantra {
  font-family: var(--display); color: var(--brand-ink);
  font-size: 1.05rem; letter-spacing: .06em; margin-bottom: .3rem;
}
.register__title { font-family: var(--display); font-size: var(--fs-h3); margin: 0; }
.register__note { font-size: var(--fs-xs); color: var(--slate); margin: .45rem 0 0; letter-spacing: .04em; }

.register__list { list-style: none; margin: 0; padding: 0; counter-reset: samagri; }
.register__row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: baseline;
  gap: .5rem .9rem;
  padding: .72rem clamp(1.15rem, .8rem + 1.4vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.register__row:nth-child(even) { background: color-mix(in srgb, var(--stone) 45%, transparent); }
.register__row:last-child { border-bottom: 0; }

.register__num {
  counter-increment: samagri;
  font-size: var(--fs-xs); color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.register__num::before { content: counter(samagri, decimal-leading-zero); }

.register__item { min-width: 0; }
.register__hi {
  font-family: var(--display); font-size: 1.12rem; line-height: 1.4;
  color: var(--ink); display: block;
}
.register__en {
  font-size: var(--fs-xs); color: var(--slate);
  letter-spacing: .05em; text-transform: uppercase;
}
.register__qty {
  font-size: .95rem; font-variant-numeric: tabular-nums;
  color: var(--ink); white-space: nowrap; font-weight: 500;
}
/* The supply mark: a filled square = the trust stocks this item. */
.register__row[data-supplied] .register__qty::after {
  content: ""; display: inline-block;
  width: .5rem; height: .5rem; margin-left: .6rem;
  background: var(--brand); vertical-align: baseline;
}
.register__foot {
  padding: clamp(1.15rem, .8rem + 1.4vw, 1.9rem);
  border-top: 2px solid var(--ink);
  background: var(--stone);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between;
}
.register__key { font-size: var(--fs-xs); color: var(--slate); margin: 0; display: flex; align-items: center; gap: .5rem; }
.register__key::before {
  content: ""; width: .5rem; height: .5rem; background: var(--brand); flex: none;
}

/* Two columns once there's room — a register spread reads across the fold */
@media (min-width: 56rem) {
  .register__list { columns: 2; column-gap: 0; }
  .register__row { break-inside: avoid; }
  .register__list > .register__row:nth-child(even) { background: none; }
}

/* ---------------------------------------------------------------------
   11. Product (samagri) grid
   ------------------------------------------------------------------- */
.pgrid {
  display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.pcard {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pcard:hover { border-color: var(--gota); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.pcard__media { aspect-ratio: 4 / 3; background: var(--stone); position: relative; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }

/* No photograph yet? Set the Devanagari name as the tile. Reads as a
   deliberate typographic plate rather than a broken image. */
.pcard__plate {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 1rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--gota) 8%, transparent) 10px 11px),
    var(--stone);
}
.pcard__plate span {
  font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  color: var(--brand-ink); text-align: center; line-height: 1.3;
}
.pcard__body { padding: .95rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.pcard__name { font-family: var(--display); font-size: 1.08rem; line-height: 1.3; margin: 0 0 .25rem; }
.pcard__hi { font-family: var(--display); font-size: .92rem; color: var(--brand-ink); margin: 0 0 .45rem; }
.pcard__sum { font-size: var(--fs-sm); color: var(--slate); margin: 0 0 .9rem; }
.pcard__price {
  margin-top: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pcard__price small { font-weight: 400; color: var(--slate); }
.pcard__ask { margin-top: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-ink); }

/* Category filter — plain links, so it works with JS off */
.pfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; padding: 0; list-style: none; }
.pfilter a {
  display: inline-block; padding: .45rem .95rem;
  font-size: var(--fs-sm); text-decoration: none;
  border: 1px solid var(--line); border-radius: 100px; color: var(--slate);
  transition: all .18s ease;
}
.pfilter a:hover { border-color: var(--gota); color: var(--brand-ink); }
.pfilter a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Product detail */
.pdetail { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 52rem) { .pdetail { grid-template-columns: 1fr 1fr; align-items: start; } }
.pdetail__media { border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--stone); }
.pdetail__media img { width: 100%; }
.pdetail__meta { list-style: none; margin: 1.5rem 0; padding: 0; border-top: 1px solid var(--line); }
.pdetail__meta li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; font-size: var(--fs-sm); }
.pdetail__meta dt, .pdetail__meta .k { color: var(--slate); }
.pdetail__meta .v { font-weight: 600; }

/* ---------------------------------------------------------------------
   12. Granth library (the scanned pages, treated as documents not photos)
   ------------------------------------------------------------------- */
.granth {
  display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.granth__item {
  display: block; position: relative;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--paper); overflow: hidden; cursor: zoom-in;
  padding: 0; margin: 0; width: 100%; text-align: left;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.granth__item:hover { border-color: var(--gota); transform: translateY(-2px); box-shadow: var(--shadow); }
.granth__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
.granth__cap {
  padding: .6rem .75rem;
  font-size: var(--fs-xs); color: var(--slate);
  border-top: 1px solid var(--line-soft);
}

/* Lightbox — one dialog, reused. It fills the viewport so the close and
   step controls sit against the image, not against the page behind it. */
.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  background: rgba(20,12,9,.96);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(20,12,9,.96); }
.lightbox__in {
  display: grid; place-items: center;
  min-height: 100%; padding: clamp(.75rem, 2vw, 2rem);
}
.lightbox img { max-height: 88vh; width: auto; border-radius: var(--radius); background: var(--paper); }
.lightbox__cap { color: var(--stone); font-size: var(--fs-sm); margin-top: .75rem; text-align: center; }
.lightbox__close {
  position: fixed; top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
  background: rgba(20,12,9,.7); color: var(--stone);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
  background: rgba(20,12,9,.7); color: var(--stone);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

/* ---------------------------------------------------------------------
   13. Photo gallery (real photographs)
   ------------------------------------------------------------------- */
.gallery {
  display: grid; gap: clamp(.5rem, .25rem + .8vw, .9rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.gallery__item {
  position: relative; border: 0; padding: 0; margin: 0; width: 100%;
  background: var(--stone); border-radius: var(--radius); overflow: hidden;
  cursor: zoom-in; aspect-ratio: 1;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery__item:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------------
   14. Stats
   ------------------------------------------------------------------- */
.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.stat { background: var(--paper); padding: clamp(1.25rem, 1rem + 1vw, 2rem); text-align: center; }
.band--stone .stat { background: var(--paper); }
.band--ink .stat { background: color-mix(in srgb, var(--ink) 88%, #fff); }
.stat__n {
  font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  color: var(--brand); line-height: 1; display: block; margin-bottom: .3rem;
}
.band--ink .stat__n { color: var(--jyot); }
.stat__l { font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--slate); }
.band--ink .stat__l { color: color-mix(in srgb, var(--stone) 70%, transparent); }

/* ---------------------------------------------------------------------
   15. FAQ + testimonials
   ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.15rem 0; font: 400 var(--fs-h3)/1.35 var(--display); color: var(--ink);
}
.faq__q::after {
  content: "+"; margin-left: auto; color: var(--brand);
  font-family: var(--body); font-size: 1.5rem; line-height: 1;
  transition: transform .22s ease;
}
.faq__item[data-open] .faq__q::after { transform: rotate(45deg); }
.faq__a { display: none; padding-bottom: 1.35rem; color: var(--slate); max-width: 66ch; }
.faq__item[data-open] .faq__a { display: block; }
.faq__a > :last-child { margin-bottom: 0; }

.quotes { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quote {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 1vw, 2rem);
}
.quote__text { font-family: var(--display); font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
.quote__text::before { content: "“"; color: var(--gota); font-size: 2rem; line-height: 0; vertical-align: -.35rem; margin-right: .15rem; }
.quote__by { display: flex; align-items: center; gap: .75rem; margin-top: 1.1rem; }
.quote__by img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.quote__name { font-weight: 600; font-size: .95rem; }
.quote__role { font-size: var(--fs-xs); color: var(--slate); }

/* ---------------------------------------------------------------------
   16. CTA
   ------------------------------------------------------------------- */
.cta { text-align: center; }
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta p { max-width: 54ch; margin-inline: auto; }
.cta .btnrow { justify-content: center; margin-top: 1.75rem; }

/* ---------------------------------------------------------------------
   17. Contact
   ------------------------------------------------------------------- */
.contact { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 56rem) { .contact { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.cinfo { list-style: none; margin: 0; padding: 0; }
.cinfo li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.cinfo li:first-child { border-top: 1px solid var(--line); }
.cinfo__k { font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--slate); padding-top: .25rem; min-width: 5.5rem; }
.cinfo__v { font-size: 1.02rem; }
.cinfo__v a { text-decoration: none; }
.cinfo__v a:hover { text-decoration: underline; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field label .req { color: var(--brand); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 0;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field--pair { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) { .field--pair { grid-template-columns: 1fr 1fr; } }
.form__hp { position: absolute; left: -9999px; }
.form__note { font-size: var(--fs-xs); color: var(--slate); margin: 0; }

.formmsg { padding: .9rem 1.1rem; border-radius: var(--radius); font-size: var(--fs-sm); display: none; }
.formmsg[data-show] { display: block; }
.formmsg--ok { background: color-mix(in srgb, #1EA95A 12%, var(--paper)); border: 1px solid #1EA95A; color: #14663a; }
.formmsg--err { background: color-mix(in srgb, var(--brand) 10%, var(--paper)); border: 1px solid var(--brand); color: var(--brand-ink); }

.mapwrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2rem; }
.mapwrap iframe { display: block; width: 100%; height: 22rem; border: 0; }

/* ---------------------------------------------------------------------
   17b. Donate + sewa booking
   ---------------------------------------------------------------------
   The site does not take the money, so the page is laid out as two plain
   steps: where to send it, then tell us what you sent.
   ------------------------------------------------------------------- */
.donate { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 58rem) { .donate { grid-template-columns: 1fr 1.1fr; align-items: start; } }

.donate__ways { display: grid; gap: 1.5rem; }
.donate__way {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}
.band--stone .donate__way { background: var(--paper); }
.donate__wayhead {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-h3); margin-bottom: 1.1rem;
}
.donate__step {
  flex: none;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-ink); color: #fff;
  font-family: var(--body); font-size: .95rem; font-weight: 600;
}

.donate__qr { margin: 0 0 1.1rem; text-align: center; }
/* Sized generously on purpose: the trust's QR is a photo of a whole standee,
   so the code itself is only a fraction of the image. A small render is a
   code that will not scan. */
.donate__qr img {
  width: min(22rem, 100%); margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: .6rem;
}
.donate__qr figcaption {
  margin-top: .7rem; font-size: var(--fs-sm); color: var(--slate);
}

.donate__vpa {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .75rem .9rem;
  background: var(--stone); border-radius: var(--radius);
}
.donate__vpalabel {
  font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.donate__vpa code { font-size: 1rem; font-weight: 600; color: var(--ink); }

/* Bank details read as a record card, not a paragraph */
.bankcard { margin: 0; }
.bankcard > div {
  display: grid; grid-template-columns: 9rem 1fr; gap: .5rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.bankcard > div:first-child { border-top: 1px solid var(--line-soft); }
.bankcard dt {
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.bankcard dd { margin: 0; font-size: 1.02rem; }
.bankcard code {
  font-family: var(--body); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  cursor: pointer; border-bottom: 1px dashed var(--gota);
}
.bankcard code:hover { color: var(--brand-ink); }
.bankcard code.is-copied { border-bottom-style: solid; color: var(--brand-ink); }
/* The confirmation word comes from the page's language via the attribute. */
.bankcard code.is-copied::after {
  content: " " attr(data-copied-label);
  font-size: var(--fs-xs); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
@media (max-width: 30rem) { .bankcard > div { grid-template-columns: 1fr; gap: .15rem; } }

.donate__report {
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
}
.band--stone .donate__report { background: var(--paper); }
.donate__report h3 { margin-bottom: .4em; }
.donate__report .shead__sub { margin-bottom: 1.5rem; }

.donate__note { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.donate__80g {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: 34rem;
}

/* Amount chips */
.field__legend { font-size: var(--fs-sm); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: .5rem 1rem; cursor: pointer;
  background: var(--paper); color: var(--brand-ink);
  border: 1px solid var(--gota); border-radius: 100px;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s ease, color .18s ease;
}
.chip:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Checkboxes */
.checks { display: grid; gap: .6rem; }
.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .97rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .18rem; flex: none; accent-color: var(--brand-ink); }

.g80fields, .gotrafields {
  border-left: 3px solid var(--gota);
  padding-left: 1rem; margin-top: .25rem;
  display: grid; gap: 1.1rem;
}
.g80fields[hidden], .gotrafields[hidden] { display: none; }

/* Sewa list */
.sewalist {
  display: grid; gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}
.sewacard {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gota);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.band--stone .sewacard { background: var(--paper); }
.sewacard h3 { margin-bottom: .2em; }
.sewacard__hi { font-family: var(--display); color: var(--brand-ink); margin: 0 0 .7em; }
.sewacard p { font-size: .97rem; color: var(--slate); }
.sewacard__meta { margin: 1rem 0 0; font-size: var(--fs-sm); }
.sewacard__meta > div { display: flex; gap: .6rem; padding: .3rem 0; }
.sewacard__meta dt { color: var(--slate); min-width: 6.5rem; }
.sewacard__meta dd { margin: 0; font-weight: 500; }

.bookwrap {
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.5rem);
  max-width: 52rem;
}
.band--stone .bookwrap { background: var(--paper); }
.bookwrap h3 { margin-bottom: 1.1rem; }

/* Booking / donation confirmation panel */
.receipt {
  background: var(--paper);
  border: 1px solid var(--gota);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin-top: 1rem;
}
.receipt strong { font-size: 1.1rem; letter-spacing: .04em; }

/* ---------------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------------- */
.foot { background: var(--ink); color: color-mix(in srgb, var(--stone) 76%, transparent); padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0; }
.foot__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.foot h3 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--jyot); font-family: var(--body); font-weight: 600; margin-bottom: 1.1rem; }
.foot__logo { height: 2.75rem; width: auto; margin-bottom: 1.1rem; background: var(--paper); padding: .45rem .6rem; border-radius: var(--radius); }
.foot p { font-size: var(--fs-sm); line-height: 1.7; max-width: 40ch; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .6rem; }
.foot a { color: color-mix(in srgb, var(--stone) 88%, transparent); text-decoration: none; font-size: var(--fs-sm); }
.foot a:hover { color: var(--jyot); }

.social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social a {
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gota) 45%, transparent);
  transition: background-color .2s ease, border-color .2s ease;
}
.social a:hover { background: var(--jyot); border-color: var(--jyot); }
.social svg { width: 1rem; height: 1rem; fill: var(--stone); }
.social a:hover svg { fill: var(--ink); }

.foot__bar {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  border-top: 1px solid color-mix(in srgb, var(--stone) 15%, transparent);
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Sticky call bar — this audience calls; on mobile it is the primary action */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid color-mix(in srgb, var(--gota) 40%, transparent);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem .5rem; font-size: .95rem; font-weight: 600;
  text-decoration: none; color: #fff;
}
.callbar__call { background: var(--brand-ink); }
.callbar__wa   { background: #1EA95A; }
@media (min-width: 60rem) { .callbar { display: none; } }
@media (max-width: 59.99rem) { body { padding-bottom: 3.4rem; } }

/* ---------------------------------------------------------------------
   19. Motion — one orchestrated reveal, nothing more
   ---------------------------------------------------------------------
   Scoped to .js so content is only ever hidden when the script that
   reveals it is actually running. Without JS — or if the observer fails —
   everything is simply visible.
   ------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0ms);
}

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

/* ---------------------------------------------------------------------
   20. Print — the register is the thing people will actually print
   ------------------------------------------------------------------- */
@media print {
  .topbar, .masthead, .callbar, .foot, .hero__dots, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: 0; }
  .register { border: 1px solid #000; box-shadow: none; }
  .register__row { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}