/* ==========================================================================
   Sri Madvirat Pothuluri Veerabrahmendra Swamy Vari Annadhana Seva Samithi
   Visual language: festival.

   Two earlier palettes ran saffron, then sandal and tulsi. Both read as
   restrained, and restraint was the wrong note: this is a trust that cooks
   for a village on the day of the annasamaradhana. So the site is now set
   the way a temple courtyard is set on that morning — marigold and green
   against warm white, kolam dots along the edges, garlands between the
   sections, and the deity in a marigold arch.

   Marigold (--brass-a) is decoration and never carries text. Text and
   buttons use the flame reds, which are the only oranges here that clear
   4.5:1: #c2410c is 5.2:1 on white and #9a3412 is 7.0:1 on the paper.

   Every colour on the site comes from a token here. Nothing is hard-coded
   except the transparent whites over dark grounds.
   ========================================================================== */

:root {
  /* Marigold — garlands, arches, kolam, ornament. Decoration only. */
  --brass-a: #f0a04b;
  --brass-b: #e8913c;
  --marigold-soft: #ffd9a0;
  --marigold-lite: #f7bb70;   /* marigold light enough to read on the green */

  /* Flame — buttons, links, rules. These carry text. */
  --brass: #c2410c;
  --flame: #a8330a;
  --flame-deep: #8f2c08;
  --brass-ink: #9a3412;
  --on-brass: #ffffff;

  /* Kumkum and tulsi — headings and the dark grounds */
  --forest: #7c2d12;
  --forest-deep: #14513c;
  --tulsi: #1c7a5c;
  --gold: #f0a04b;

  /* Festival grounds */
  --paper: #ffffff;
  --cream: #fffaf2;
  --cream-2: #fff2e0;
  --tulsi-tint: #dcf0e6;
  --rose-tint: #fdeef0;
  --ink: #2b1a10;
  --ink-soft: #5b4130;
  --line: rgba(124, 45, 18, 0.14);
  --line-strong: rgba(124, 45, 18, 0.3);
  --line-warm: #f6d9b2;

  /* Type */
  --font-display: "Yeseva One", "Noto Serif Telugu", Georgia, serif;
  --font-body: "Mulish", "Noto Serif Telugu", system-ui, sans-serif;
  --font-telugu: "Noto Serif Telugu", "Mulish", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(56px, 9vw, 112px);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 2px 4px rgba(124, 45, 18, 0.04), 0 18px 40px -26px rgba(124, 45, 18, 0.35);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  /* Telugu, Kannada, Malayalam and Tamil compound words run far longer than
     English ones, and a heading is set large: on a 320px screen a single
     Malayalam word in an h2 was 16px wider than the phone. break-word only
     acts when the word genuinely cannot fit the line, so nothing hyphenates
     that did not have to. */
  overflow-wrap: break-word;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--brass-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--forest);
  color: #fff;
  padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Ten languages

   The English wording ships in the HTML and every other language arrives as a
   dictionary that i18n.js swaps in, so with JavaScript off the page still
   reads — in English. <html> then carries the choice: data-lang for the code,
   data-nonlatin for anything that is not set in Latin type, and dir for the
   two that read right to left.

   Yeseva One has no Indic or Arabic glyphs, so in those languages the display
   face gives way to the script's own Noto, one weight heavier to keep the
   headings looking like headings. Only the face the page is actually in gets
   downloaded; the <link> is added at run time.
   -------------------------------------------------------------------------- */

:root { --font-script: var(--font-body); }
[data-lang="te"] { --font-script: "Noto Serif Telugu", "Mulish", serif; }
[data-lang="hi"] { --font-script: "Noto Sans Devanagari", "Mulish", sans-serif; }
[data-lang="kn"] { --font-script: "Noto Sans Kannada", "Mulish", sans-serif; }
[data-lang="ta"] { --font-script: "Noto Sans Tamil", "Mulish", sans-serif; }
[data-lang="ml"] { --font-script: "Noto Sans Malayalam", "Mulish", sans-serif; }
[data-lang="or"] { --font-script: "Noto Sans Oriya", "Mulish", sans-serif; }
[data-lang="pa"] { --font-script: "Noto Sans Gurmukhi", "Mulish", sans-serif; }
[data-lang="ur"] { --font-script: "Noto Nastaliq Urdu", "Mulish", serif; }
[data-lang="ar"] { --font-script: "Noto Naskh Arabic", "Mulish", serif; }

[data-nonlatin] body { font-family: var(--font-script); line-height: 1.8; }
[data-nonlatin] h1,
[data-nonlatin] h2,
[data-nonlatin] h3,
[data-nonlatin] .display { font-family: var(--font-script); font-weight: 600; }

/* Nastaliq hangs well below its baseline and needs the room. */
[data-lang="ur"] body { line-height: 2.1; }

/* A language other than English cannot paint until its dictionary has landed,
   or the visitor watches English turn over word by word. The wait is one
   same-origin JSON file; lang-init.js lifts this after 2.5s come what may. */
[data-i18n-pending] body { visibility: hidden; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 780px; }
/* Narrow measure that still starts at the site's left margin, so sections
   don't visibly shift in and out as you scroll. */
/* flow-root so a floated figure inside stays inside its own section. */
.wrap-measure { display: flow-root; }
.wrap-measure > * { max-width: 800px; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(30px, 4.5vw, 54px); }
.section-paper { background: var(--paper); }
.section-cream { background: var(--cream-2); }
.section-dark { background: var(--forest-deep); color: rgba(247, 242, 230, 0.86); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lede { color: rgba(247, 242, 230, 0.8); }
.section-dark a { color: var(--brass-a); }

.stack > * + * { margin-top: 20px; }
.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
/* Every .grid-3 on the site holds exactly three things, and auto-fit drops to
   two of them plus an orphan below 857px — 3x240 + 2 gaps against a 0.9w
   measure. The same objection the four-up grid above already answers: go
   straight from three to one. */
@media (max-width: 856px) { .grid-3 { grid-template-columns: 1fr; } }
/* Four items: forces 2x2 rather than an orphaned 3+1 row. */
.grid-pairs { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.grid-split { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: center; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.display,
h1 { font-family: var(--font-display); font-size: clamp(34px, 5.4vw, 58px); color: var(--forest); letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 40px); color: var(--forest); }
h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); color: var(--forest); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
[data-nonlatin] .eyebrow { letter-spacing: 0.06em; text-transform: none; font-size: 14px; }

.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.small { font-size: 14px; color: var(--ink-soft); }
.tiny { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Justified body text

   Prose is set to both margins. Justification is only switched on above 700px,
   because below that every column is a single narrow one and justifying it
   opens rivers of white space between the words. `hyphens: auto` is what keeps
   the word spacing even; Telugu is unaffected by it, since the browser has no
   hyphenation pattern for the script and simply leaves those words whole.
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
  /* Only the full measure. The list used to include .stack, .pillar and .card,
     which is how a 220px pillar and a 46px step-number chip came to be set
     justified: the query asks how wide the *window* is, and those columns are
     narrow at every window size. Two hundred and twenty pixels is 26 characters,
     and justifying 26 characters opens rivers you can read down. */
  .wrap-measure > p:not(.eyebrow):not(.pending),
  .prose p,
  .notice > p {
    text-align: justify;
    hyphens: auto;
    /* Not with text-wrap: pretty, which body sets. The two are rival last-line
       strategies, and in Chrome the pair makes the last line of a paragraph
       come out justified to the full measure — "…carried that plainness
       forward for            centuries." That was on nearly every paragraph on
       the site, because every one of them is a <span data-i18n> with a newline
       after it, and the trailing whitespace is what pretty miscounts. */
    text-wrap: wrap;
  }
}

.section-head { max-width: 660px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head > * + * { margin-top: 14px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   Ornament — a diamond chain, built from rotated squares only
   -------------------------------------------------------------------------- */

.ornament { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.ornament.center { justify-content: center; }
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 120px);
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
.ornament i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--brass); display: block; }
.ornament i:nth-of-type(2) { width: 10px; height: 10px; background: var(--gold); }
.section-dark .ornament::before,
.section-dark .ornament::after,
.hero .ornament::before,
.hero .ornament::after { background: linear-gradient(to right, transparent, rgba(247, 242, 230, 0.35), transparent); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}
[data-nonlatin] .btn { font-family: var(--font-script); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  /* Dark green on brass, not white: white on this brass is 2.2:1 and fails. */
  background: linear-gradient(100deg, var(--brass-a), var(--brass-b));
  color: var(--on-brass);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.btn-primary:hover { color: var(--on-brass); filter: brightness(1.06); }

.btn-outline { border-color: var(--line-strong); color: var(--forest); background: transparent; }
.btn-outline:hover { border-color: var(--brass); color: var(--brass-ink); background: rgba(184, 134, 47, 0.05); }

.btn-light { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.btn-light:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.utility { background: var(--forest-deep); color: rgba(247, 242, 230, 0.82); font-size: 13px; }
.utility .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  flex-wrap: wrap;
}
.utility a { color: rgba(247, 242, 230, 0.82); text-decoration: none; }
.utility a:hover { color: #fff; }
.utility-contact { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }

/* Ten languages are too many for a row of buttons, so the switcher is a plain
   <select>: one control, the operating system's own list, and on a phone the
   native wheel. Each option is labelled in its own script. */
.lang-switch { display: flex; align-items: center; }
.lang-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.1)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23F7F2E6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  background-size: 10px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 30px 6px 12px;
  cursor: pointer;
  min-height: 32px;
}
.lang-select:hover { background-color: rgba(255, 255, 255, 0.16); }
/* The list itself is drawn by the operating system, on its own ground. */
.lang-select option { color: var(--ink); background: var(--paper); }
[dir="rtl"] .lang-select { background-position: left 10px center; padding: 6px 12px 6px 30px; }

/* The whole header is locked to the top: the contact strip and the nav travel
   together, wrapped in .site-head so the offset never has to be a magic number
   that a font change can invalidate. On a phone 104px of locked chrome is too
   much of a 760px screen, so there only the nav bar stays. */
.site-head { position: sticky; top: 0; z-index: 40; }
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
@media (max-width: 620px) {
  /* A sticky child can only stick inside its parent's box, so the phone rule is
     not "unstick the wrapper and stick the bar" — it is to keep the wrapper
     sticky and pull it up by exactly the contact strip's height. The strip
     scrolls away, the nav bar lands at the top, and 44px of a small screen is
     given back. */
  .site-head { top: -44px; }
}

/* An anchored section must clear the locked header rather than hide under it. */
section[id], [id]:target { scroll-margin-top: 140px; }
@media (max-width: 620px) { section[id], [id]:target { scroll-margin-top: 78px; } }
/* The chrome — utility bar, masthead, footer — runs wider than the 1140px
   reading measure. The measure exists so a line of prose is not too long to
   follow; a masthead is not prose, and holding the full name and eight nav
   items inside it left them jammed together with 150px of empty screen on
   either side. The footer follows so the three bars share one edge. */
.masthead .wrap,
.utility .wrap,
.footer .wrap { max-width: 1400px; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 84px; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand img { width: 52px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
/* The measure has to hold the full registered name on the two lines its <br />
   asks for: "Sri Madvirat Pothuluri Veerabrahmendra" is 38 characters, and at
   24ch it broke into four. */
.brand-name { font-family: var(--font-display); font-size: 15px; color: var(--forest); letter-spacing: 0.01em; max-width: none; }
[data-nonlatin] .brand-name { font-family: var(--font-script); font-size: 15px; }
.brand-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
[data-nonlatin] .brand-sub { letter-spacing: 0.02em; text-transform: none; font-size: 12px; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--brass-ink); }
.nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--brass); }
.nav a.btn { color: #fff; padding: 12px 22px; border-bottom: 1px solid transparent; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   The masthead's width is a property of the language, not of the viewport

   How much room the row needs changes completely with what is in it. Measured
   on this site, the brand plus eight items wants 1000px in Punjabi, 1270px in
   English, 1459px in Malayalam and 1525px in Tamil — and 1525px is wider than
   the 1400px the wrap is capped at, so in Tamil the row does not fit on any
   monitor made. A media query cannot see which of those it is looking at; it
   only knows the width of the glass. That is why the old 1140px breakpoint
   left the row hanging 5px off the right edge of an 1180px tablet in English,
   and would have overflowed a 1440px laptop outright in Tamil.

   So main.js measures the row against the space it has and writes data-nav on
   <html>. These are the rules for the compact answer.
   -------------------------------------------------------------------------- */

html[data-nav="compact"] .nav-toggle {
  display: block;
}
html[data-nav="compact"] .brand {
  /* Beside the menu button the name must be allowed to shrink and wrap,
     where on a wide screen it is held at its full two lines. */
  flex: 0 1 auto;
  min-width: 0;
}
html[data-nav="compact"] .masthead .wrap {
  min-height: 72px;
  position: relative;
}
html[data-nav="compact"] .nav {
  position: absolute;
  inset: 100% 0 auto 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px var(--gutter) 20px;
  display: none;
  box-shadow: var(--shadow);
}
html[data-nav="compact"] .nav[data-open="true"] {
  display: flex;
}
html[data-nav="compact"] .nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
html[data-nav="compact"] .nav a[aria-current="page"] {
  border-bottom-color: var(--line);
}
html[data-nav="compact"] .nav a.btn {
  margin-top: 16px;
  padding: 12px 24px;
}
html[data-nav="compact"] .brand img {
  width: 44px;
}

/* Until that measurement has run, and for a visitor with no JavaScript at all,
   the width is all there is to go on — and with no JavaScript no dictionary is
   ever fetched, so the page is certainly the English one, which needs 1280px.
   These are the same declarations, applied only while data-nav is unset. */
@media (max-width: 1280px) {
  html:not([data-nav]) .nav-toggle {
    display: block;
  }
  html:not([data-nav]) .brand {
    /* Beside the menu button the name must be allowed to shrink and wrap,
       where on a wide screen it is held at its full two lines. */
    flex: 0 1 auto;
    min-width: 0;
  }
  html:not([data-nav]) .masthead .wrap {
    min-height: 72px;
    position: relative;
  }
  html:not([data-nav]) .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    display: none;
    box-shadow: var(--shadow);
  }
  html:not([data-nav]) .nav[data-open="true"] {
    display: flex;
  }
  html:not([data-nav]) .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  html:not([data-nav]) .nav a[aria-current="page"] {
    border-bottom-color: var(--line);
  }
  html:not([data-nav]) .nav a.btn {
    margin-top: 16px;
    padding: 12px 24px;
  }
  html:not([data-nav]) .brand img {
    width: 44px;
  }
}

/* The street address goes at the same point in every language: it is the one
   item in the utility bar with no fixed job, and the bar is not the nav. */
@media (max-width: 1140px) { .util-address { display: none; } }

/* Phones: the utility bar was stacking to three lines and pushing the hero
   almost off the first screen. Keep the phone number and the language switch
   on one row; the email address is on every page footer anyway. */
@media (max-width: 620px) {
  .utility .wrap { flex-wrap: nowrap; gap: 10px; min-height: 38px; }
  .utility-contact a[href^="mailto"] { display: none; }
  .utility { font-size: 12.5px; }
  .lang-select { padding: 5px 26px 5px 10px; font-size: 12.5px; }
  /* Beside a menu button there is no room for the line the <br /> asks for, so
     the name wraps where it will rather than breaking into a narrow column.
     The size that goes with this lives at the end of the file — see "Phones,
     after the festival layer". */
  .brand-name br { display: none; }
  .brand-sub { font-size: 10px; }
  .masthead .wrap { min-height: 66px; gap: 12px; }
}

/* At 320px the emblem, the name and the menu button want 206px of a 194px
   space, and the name overlapped the button. min-width and the wrap rule are
   the floor, so the name can never push the button off the screen however
   narrow the glass or long the word. */
.brand-text { min-width: 0; }
.brand-name { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Hero and page headers
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--forest-deep); color: var(--cream); overflow: hidden; }
.hero .wrap { position: relative; z-index: 3; }
.hero-inner { max-width: 720px; padding-block: clamp(64px, 11vw, 128px); }
.hero-inner > * + * { margin-top: 22px; }
.hero h1 { color: #fff; }
.hero .lede { color: rgba(247, 242, 230, 0.86); }
.hero .eyebrow { color: var(--brass-a); }
.hero-emblem {
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 470px);
  opacity: 0.13;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 860px) { .hero-emblem { display: none; } }

.page-head { background: var(--forest-deep); color: var(--cream); padding-block: clamp(44px, 7vw, 76px); position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 3; max-width: 1140px; }
.page-head-inner > * + * { margin-top: 16px; }
.page-head h1 { color: #fff; }
.page-head .lede { color: rgba(247, 242, 230, 0.8); max-width: 620px; }
.page-head .eyebrow { color: var(--brass-a); }
.page-head .hero-emblem { opacity: 0.09; }

/* --------------------------------------------------------------------------
   Image placeholders — replaced when the trust's photographs arrive
   -------------------------------------------------------------------------- */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 220px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--cream-2);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(31, 77, 61, 0.05) 0 10px,
    transparent 10px 20px
  );
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.7;
}
.ph-tall { min-height: 400px; }
.ph-wide { min-height: 320px; }
.ph-square { aspect-ratio: 1; min-height: 0; }

/* --------------------------------------------------------------------------
   Photographs and video
   -------------------------------------------------------------------------- */

.photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-2);
}
.photo-tall { aspect-ratio: 4 / 5; }
.photo-square { aspect-ratio: 1; }
.photo-wide { aspect-ratio: 16 / 10; }


.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.video-item { margin: 0; }
.video-item video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--radius);
  background: var(--forest-deep);
  border: 1px solid var(--line);
}
.video-item figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Cards, pillars, lists
   -------------------------------------------------------------------------- */

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.card > * + * { margin-top: 12px; }

.pillar { border-top: 2px solid var(--brass); padding-top: 20px; }
.pillar > * + * { margin-top: 10px; }
.pillar-num { font-family: var(--font-mono); font-size: 12px; color: var(--brass-ink); letter-spacing: 0.1em; }

.checklist { display: grid; gap: 14px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
/* A grid or flex item will not shrink below its own longest unbreakable run,
   and an email address is one such run: info@brahmangariannadhanam.com sets a
   290px floor, which held the Donate page 28px wider than a 320px screen and
   scrolled the whole site sideways. Both halves are needed — the min-width to
   let the item shrink, and a wrap rule that actually lowers the floor. */
.checklist li,
.checklist li > * { min-width: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.checklist li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  transform: rotate(45deg);
  background: var(--brass);
}

.facts { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 0; }
.facts div {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.facts dt { color: var(--ink-soft); font-size: 14px; }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; gap: 3px; } }

/* --------------------------------------------------------------------------
   A photograph of the Swamy, lit

   The same idea as the hero: a warm radial behind the picture, so the deity
   sits in light rather than in a rectangle. Static — a breathing glow beside
   running text would be a distraction rather than an atmosphere.
   -------------------------------------------------------------------------- */

.deity { position: relative; margin: 0 0 24px; max-width: 340px; }
.deity::before {
  content: "";
  position: absolute;
  /* Inset, not outset: a blur paints outside its box without adding to the
     page's layout width, where a negative inset spilled past the gutter and
     scrolled the About page sideways on a phone. */
  inset: 6%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 140, 0.55) 0%,
    rgba(199, 154, 58, 0.3) 38%,
    rgba(184, 134, 47, 0) 72%
  );
  filter: blur(34px);
  z-index: 0;
}
.deity img { position: relative; z-index: 1; box-shadow: 0 18px 44px rgba(31, 77, 61, 0.28); }
.deity figcaption {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
@media (min-width: 700px) {
  .deity { float: right; margin: 6px 0 20px 34px; }
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.gallery .ph { min-height: 215px; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Slideshow

   Without JavaScript every slide simply stacks as an ordinary list of
   photographs, which is a perfectly good page. `main.js` sets data-ready and
   the slides then share one grid cell and cross-fade. Height is governed by
   the tallest slide, so nothing jumps as the caption length changes.
   -------------------------------------------------------------------------- */

.slideshow { position: relative; max-width: 940px; }
.slide-frame { position: relative; }

.slides { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.slideshow[data-ready="true"] .slides { grid-template-areas: "slide"; gap: 0; }
.slideshow[data-ready="true"] .slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease;
}
.slideshow[data-ready="true"] .slide[data-current="true"] { opacity: 1; visibility: visible; }

.slide-caption {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  min-height: 2.8em;
}

.slide-arrow {
  position: absolute;
  top: calc(50% - 34px);
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(247, 242, 230, 0.92);
  color: var(--forest-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.slide-arrow:hover { background: #fff; border-color: var(--brass-a); color: var(--brass-ink); }
.slide-prev { left: 12px; }
.slide-next { right: 12px; }
.slideshow[data-ready="true"] .slide-arrow { display: flex; }

.slide-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.slideshow[data-ready="true"] .slide-bar { display: flex; }

/* Thirteen dots plus the Pause button is wider than a phone, so the bar wraps
   rather than pushing the page sideways. */
.slide-bar { flex-wrap: wrap; }
.slide-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.slide-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.slide-dot[aria-selected="true"] { background: var(--brass-a); border-color: var(--brass-a); }

.slide-toggle {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(247, 242, 230, 0.92);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
}
.slide-toggle:hover { color: var(--brass-ink); border-color: var(--brass-a); }

@media (max-width: 620px) {
  .slide-arrow { width: 40px; height: 40px; }
  .slide-dot { width: 14px; height: 14px; }
  .slide-toggle { min-height: 40px; }
}

/* --------------------------------------------------------------------------
   Auto-scrolling photo strip
   Two identical groups translate by exactly -50%, so the loop is seamless.
   The spacing is margin-right on each item rather than a flex gap: a gap
   between the two groups would not be included in the 50%, and the strip
   would drift a few pixels every lap.
   -------------------------------------------------------------------------- */

.strip {
  position: relative;
  overflow: hidden;
  --strip-fade: var(--cream);
}
.strip::before,
.strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(36px, 8vw, 130px);
  z-index: 2;
  pointer-events: none;
}
.strip::before { left: 0; background: linear-gradient(to right, var(--strip-fade), transparent); }
.strip::after { right: 0; background: linear-gradient(to left, var(--strip-fade), transparent); }

.strip-track {
  display: flex;
  width: max-content;
  animation: strip-scroll var(--strip-duration, 90s) linear infinite;
  will-change: transform;
}
.strip:hover .strip-track,
.strip:focus-within .strip-track,
.strip[data-paused="true"] .strip-track { animation-play-state: paused; }

/* Content that moves on its own needs a way to stop it (WCAG 2.2.2).
   Hover alone does not count, and does not exist on a touch screen. */
.strip-toggle {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid rgba(247, 242, 230, 0.5);
  border-radius: 999px;
  background: rgba(20, 56, 44, 0.62);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
[data-nonlatin] .strip-toggle { font-family: var(--font-script); }
.strip-toggle:hover { background: rgba(20, 56, 44, 0.82); }
.strip-reverse .strip-track { animation-direction: reverse; }

.strip-group { display: flex; }
.strip-item { flex: none; margin-right: 14px; }
.strip-item img {
  display: block;
  width: clamp(150px, 21vw, 250px);
  /* The width/height attributes are a presentational hint that beats
     aspect-ratio unless one axis is auto. Without this the tiles render
     500px tall. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-2);
}
.strip + .strip { margin-top: 14px; }

@keyframes strip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Someone who has asked for less motion gets a strip they scroll themselves. */
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip-track { animation: none; }
  .strip-group[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   Donate — account panels
   -------------------------------------------------------------------------- */

.account {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
}
.account > * + * { margin-top: 18px; }
.account-foreign { border-top-color: var(--tulsi); }
.account-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.account-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}

.fields { margin: 0; }
.field {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.field:last-child { border-bottom: 0; }
.field dt { font-size: 13.5px; color: var(--ink-soft); }
.field dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; }
.copy {
  border: 1px solid var(--line-strong);
  background: transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 11px;
  cursor: pointer;
  min-height: 32px;
  white-space: nowrap;
}
.copy:hover { border-color: var(--brass); color: var(--brass-ink); }
.copy[data-copied="true"] { border-color: var(--tulsi); color: var(--tulsi); }
@media (max-width: 560px) {
  .field { grid-template-columns: 1fr auto; }
  .field dt { grid-column: 1 / -1; }
}

.notice {
  border-inline-start: 3px solid var(--gold);
  background: rgba(184, 134, 47, 0.08);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.notice strong { color: var(--forest); }
.notice-tulsi { border-inline-start-color: var(--tulsi); background: rgba(31, 77, 61, 0.07); }

.upi-block { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 3vw, 32px); align-items: center; }
.upi-block .ph { min-height: 200px; }
@media (max-width: 620px) { .upi-block { grid-template-columns: 1fr; } }

.pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-ink);
  background: rgba(184, 134, 47, 0.08);
  border: 1px dashed rgba(184, 134, 47, 0.4);
  border-radius: var(--radius);
  padding: 5px 10px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
/* A grid item stretches to its row, and a grid container hands that spare
   height to its own auto rows — so the field beside a hinted one grew a
   taller label row and a taller control, and sat lower than its neighbour.
   Packing the rows to the start keeps every label and control on one line
   across the row, whatever hints the columns carry. */
.field-group { display: grid; align-content: start; gap: 7px; }
.field-group label { font-size: 14px; font-weight: 600; color: var(--forest); }
.field-group .hint { font-size: 12.5px; color: var(--ink-soft); }
.field-group .opt { font-weight: 400; color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 48px;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--brass); outline: 2px solid rgba(184, 134, 47, 0.18); outline-offset: 0; }

.give-form { margin-top: 20px; }

/* Preset amounts. These only fill the number field beside them, so the field
   stays the single source of truth and a custom amount is never a second
   input to keep in step. */
.amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.amount {
  font-family: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 14px;
  min-height: 40px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.amount:hover { border-color: var(--brass); color: var(--brass-ink); }
.amount[aria-pressed="true"] {
  border-color: var(--brass);
  background: rgba(184, 134, 47, 0.08);
  color: var(--brass-ink);
  font-weight: 600;
}

#pledge-total, #pay-online-total { font-variant-numeric: tabular-nums; }
#pledge-total:not(:empty)::before,
#pay-online-total:not(:empty)::before { content: " "; }

/* The two-step flow hides whole sections with the `hidden` attribute. The UA
   rule for it is weaker than any author rule, so `.grid { display: grid }`
   would happily un-hide an account block. This has to win outright. */
[hidden] { display: none !important; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236D5648' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}

input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 10px 0;
}
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 14px;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 14px;
  margin-inline-end: 12px;
  min-height: 40px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--brass);
  color: var(--brass-ink);
}

/* "Change my details" — a button, because it acts on this page rather than
   navigating, but it should read as the quiet link it is. */
.linkish {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--brass-ink);
  background: none;
  border: 0;
  padding: 6px 0;
  min-height: 40px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkish:hover { color: var(--forest); }

/* PAN and address are one child of the form grid, so they need their own
   gap or they sit flush against each other. */
#pledge-india-only { display: grid; gap: 18px; }

#pledge-summary { font-variant-numeric: tabular-nums; }
#accounts { margin-top: clamp(24px, 3.5vw, 40px); }
#accounts > * + * { margin-top: clamp(20px, 3vw, 32px); }
#bank-claim > * + * { margin-top: 14px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: 15px; padding: 14px 18px; border-radius: var(--radius); display: none; }
.form-status[data-state="ok"] { display: block; background: rgba(31, 77, 61, 0.09); border-inline-start: 3px solid var(--tulsi); color: var(--tulsi); }
.form-status[data-state="error"] { display: block; background: rgba(179, 68, 0, 0.08); border-inline-start: 3px solid var(--brass); color: var(--brass-ink); }

/* --------------------------------------------------------------------------
   Contact tiles
   -------------------------------------------------------------------------- */

.tile {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.tile:hover { border-color: var(--brass); transform: translateY(-2px); color: inherit; }
.tile .label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
[data-nonlatin] .tile .label { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
.tile .value { font-family: var(--font-display); font-size: 20px; color: var(--forest); margin-top: 6px; word-break: break-word; }
/* Long addresses break mid-word at display size; drop them to the body face. */
.tile .value-plain { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; word-break: normal; overflow-wrap: anywhere; }
[data-nonlatin] .tile .value { font-family: var(--font-script); font-size: 18px; }

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */

.cta { background: linear-gradient(100deg, var(--forest-deep), var(--tulsi)); color: rgba(247, 242, 230, 0.92); padding-block: clamp(44px, 7vw, 76px); }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.93); }
.cta .ornament::before, .cta .ornament::after { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent); }
.cta .ornament i { background: var(--brass-a); }
.cta .ornament i:nth-of-type(2) { background: rgba(199, 154, 58, 0.7); }
.cta .btn-primary { background: linear-gradient(100deg, var(--brass-a), var(--brass-b)); color: var(--on-brass); }
.cta .btn-primary:hover { color: var(--on-brass); filter: brightness(1.06); }
.cta .btn-outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cta .btn-outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--forest-deep); color: rgba(247, 242, 230, 0.72); padding-block: clamp(44px, 6vw, 72px) 32px; font-size: 14.5px; }
.footer h3 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
[data-nonlatin] .footer h3 { font-family: var(--font-script); letter-spacing: 0.02em; text-transform: none; font-size: 14px; }
.footer a { color: rgba(247, 242, 230, 0.72); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 470px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-links { display: grid; gap: 10px; }
.footer-brand img { width: 62px; margin-bottom: 18px; }
.footer-name { font-family: var(--font-display); color: #fff; font-size: 17px; line-height: 1.4; }
[data-nonlatin] .footer-name { font-family: var(--font-script); }
.regs {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(247, 242, 230, 0.55);
}
.regs span { border: 1px solid rgba(247, 242, 230, 0.18); border-radius: 3px; padding: 3px 8px; }
.credit {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(247, 242, 230, 0.42);
  max-width: 70ch;
}
.credit a { color: rgba(247, 242, 230, 0.55); text-decoration: underline; }
.credit a:hover { color: #fff; }
/* Only the page carrying the credit needs the tighter gap below it. */
.credit + .footer-base { margin-top: 20px; }

.footer-base {
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 22px;
  border-top: 1px solid rgba(247, 242, 230, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(247, 242, 230, 0.55);
}

/* --------------------------------------------------------------------------
   Touch targets and legibility on phones
   Audited at 390px: utility links, language buttons, footer links and the
   copy buttons were all under the 44px touch minimum, and several labels sat
   at 10-11px. Fixed here rather than by shrinking the desktop design.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .utility .wrap { min-height: 44px; }
  .utility-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .lang-select { min-height: 40px; padding: 8px 32px 8px 14px; font-size: 13px; }
  .nav-toggle { min-height: 44px; }
  .brand-sub { font-size: 11px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-links li { line-height: 1.5; }
  .card p a,
  .facts dd a { display: inline-flex; align-items: center; min-height: 40px; }
  .copy { min-height: 40px; padding: 9px 13px; }
  .strip-toggle { top: 8px; right: 10px; }
  .regs { font-size: 11.5px; }
  .regs span { padding: 5px 9px; }
  .pending,
  .account-tag { font-size: 11.5px; padding: 7px 11px; }
  .ph { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .utility, .masthead, .cta, .nav-toggle, .copy { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hero, .page-head, .footer, .section-dark { background: #fff !important; color: #000 !important; }
  .hero h1, .page-head h1, .footer a, .footer-name { color: #000 !important; }
  .hero::after, .hero-emblem, .hero-canvas, .page-canvas { display: none; }
}

/* ==========================================================================
   FESTIVAL LAYER

   Everything above is the site's structure and mechanics — the grid, the
   slideshow, the strip, the forms — and it is deliberately untouched. This
   last section is the look: kolam borders, marigold arches, garlands,
   pill buttons and the tri-colour blocks. It is appended rather than woven
   in so the two can be told apart, and so a future palette can replace this
   block alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kolam — the dotted border that opens the page and closes it
   Two staggered dot grids, marigold and tulsi, drawn entirely in gradients.
   -------------------------------------------------------------------------- */

.site-head::before,
.footer::after {
  content: "";
  display: block;
  height: 14px;
  background-color: var(--cream-2);
  background-image:
    radial-gradient(circle at 13px 7px, var(--brass-a) 2.6px, transparent 3.1px),
    radial-gradient(circle at 39px 7px, var(--tulsi) 2.6px, transparent 3.1px);
  background-size: 52px 14px;
}
.footer { position: relative; }
.footer::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 13px 7px, var(--tulsi) 2.6px, transparent 3.1px),
    radial-gradient(circle at 39px 7px, var(--brass-a) 2.6px, transparent 3.1px);
}

/* The garland: a single row of marigold, hung along the foot of the hero and
   of every page header. */
.hero::before,
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  z-index: 4;
  pointer-events: none;
  background-image: radial-gradient(circle at 12px 9px, var(--brass-a) 4.2px, transparent 4.8px);
  background-size: 24px 18px;
  opacity: 0.62;
}

/* The locked header grew by the height of the kolam strip, so the phone rule
   that pulls the contact bar out of view has to pull that strip with it. */
@media (max-width: 620px) {
  .site-head { top: -58px; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead { background: var(--paper); border-bottom: 2px solid var(--line-warm); }
.brand-name { font-size: 16px; }
.brand-sub { color: var(--brass-ink); }
.nav a { font-weight: 600; color: var(--ink-soft); }
.nav a:hover { color: var(--brass-ink); }
.nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--brass-a); }
.nav a.btn { color: var(--on-brass); }
.nav-toggle { border-radius: var(--radius-pill); border-width: 2px; border-color: var(--line-warm); color: var(--forest); }

/* --------------------------------------------------------------------------
   Buttons — pills, the way a festival poster sets them
   -------------------------------------------------------------------------- */

.btn { border-radius: var(--radius-pill); font-weight: 800; padding: 13px 26px; }
.btn-primary {
  /* Flame, not marigold: white on marigold is 2.4:1 and unreadable. */
  background: linear-gradient(100deg, var(--brass), var(--flame));
  color: var(--on-brass);
  box-shadow: 0 10px 22px -14px rgba(168, 51, 10, 0.9);
}
.btn-primary:hover { color: var(--on-brass); filter: brightness(1.08); }
.btn-outline { border-width: 2px; border-color: var(--brass-a); background: var(--paper); color: var(--forest); }
.btn-outline:hover { border-color: var(--brass); background: var(--cream-2); color: var(--brass-ink); }
.btn-light { background: var(--paper); border: 2px solid var(--brass-a); color: var(--forest); }
.btn-light:hover { background: var(--cream-2); border-color: var(--brass); color: var(--brass-ink); }
/* Over the dark grounds it goes back to being a light-on-dark outline. */
.cta .btn-light,
.cta .btn-outline,
.section-dark .btn-light,
.section-dark .btn-outline,
.footer .btn-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.cta .btn-light:hover,
.cta .btn-outline:hover,
.section-dark .btn-light:hover,
.section-dark .btn-outline:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; color: #fff; }

/* --------------------------------------------------------------------------
   Eyebrow — a pill, in tulsi green
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--tulsi-tint);
  /* On the mint the mid green is 4.0:1; the deep one is 7.7:1. */
  color: var(--forest-deep);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
[data-nonlatin] .eyebrow { padding: 6px 16px; }
.hero .eyebrow,
.page-head .eyebrow { background: var(--tulsi-tint); color: var(--forest-deep); }
.section-dark .eyebrow,
.cta .eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Ornament — marigold beads rather than brass diamonds
   -------------------------------------------------------------------------- */

.ornament i { width: 9px; height: 9px; border-radius: 50%; transform: none; background: var(--brass-a); }
.ornament i:nth-of-type(2) { width: 12px; height: 12px; background: var(--tulsi); }
.ornament::before,
.ornament::after { background: linear-gradient(to right, transparent, var(--line-warm), transparent); }

.checklist li::before {
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  transform: none;
  background: var(--brass-a);
  box-shadow: 0 0 0 3px rgba(240, 160, 75, 0.22);
}

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

   Two columns: the Swamy in a marigold arch, and the words beside him. The
   arch is a fan of conic marigold behind a frame whose top is a half-round —
   the shape a temple niche makes. A WebGL canvas sits behind both and adds
   the light and the drifting petals; without it (no WebGL, or a reader who
   has asked for less motion) the arch and the glow below still stand.
   -------------------------------------------------------------------------- */

.hero {
  background: radial-gradient(92% 74% at 50% 0%, var(--cream-2) 0%, var(--cream) 66%);
  color: var(--ink);
}
.hero .hero-emblem { display: none; }
.hero h1 { color: var(--forest); }
.hero .lede { color: var(--ink-soft); }

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(30px, 4.6vw, 54px);
  align-items: center;
  padding-block: clamp(44px, 6.5vw, 74px);
}
/* The words come first in the source so a phone reads the headline before it
   scrolls past a portrait; the arch is moved to the left only once there are
   two columns to move it into. */
.hero-inner { max-width: none; padding-block: 0; }
.hero-portrait { order: -1; position: relative; margin: 0; }

.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 150, 0.85) 0%, rgba(240, 160, 75, 0.4) 42%, rgba(240, 160, 75, 0) 72%);
  filter: blur(30px);
  z-index: 0;
}

.portrait-ring {
  position: absolute;
  inset: -20px;
  z-index: 1;
  border-radius: 999px 999px 30px 30px;
  background: repeating-conic-gradient(from 0deg, var(--brass-a) 0deg 6deg, var(--marigold-soft) 6deg 12deg);
  opacity: 0.6;
  animation: ring-turn 220s linear infinite;
}

.portrait-frame {
  position: relative;
  z-index: 2;
  border-radius: 999px 999px 20px 20px;
  overflow: hidden;
  border: 6px solid var(--cream);
  box-shadow: 0 26px 60px -34px rgba(124, 45, 18, 0.65);
}
.portrait-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 0;
  display: block;
}
.hero-portrait figcaption {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

@keyframes ring-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-portrait { order: 0; width: min(100%, 380px); margin-inline: auto; }
  /* The phone rule that made room under the old full-bleed photograph. */
  .hero-inner { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Page headers — the same warm band, without the portrait
   -------------------------------------------------------------------------- */

.page-head {
  background: radial-gradient(92% 80% at 50% 0%, var(--cream-2) 0%, var(--cream) 70%);
  color: var(--ink);
  padding-bottom: clamp(52px, 8vw, 84px);
}
.page-head h1 { color: var(--forest); }
.page-head .lede { color: var(--ink-soft); }
.page-head .hero-emblem { opacity: 0.07; }

/* The brass mandala (js/page-three.js) sits under the emblem and over the
   ground, in the same lane the hero canvas uses on the home page. It follows
   the emblem's rule about narrow screens: no emblem, no mandala. */
.page-canvas {
  position: absolute;
  right: -70px;
  top: 0;
  /* A canvas is a replaced element: with top/bottom and an auto height it
     falls back to its 2:1 intrinsic ratio instead of stretching, so the
     height is stated. */
  height: 100%;
  width: min(46vw, 470px);
  display: block;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 860px) { .page-canvas { display: none; } }

/* --------------------------------------------------------------------------
   Blocks

   The three-up rows are the poster's coloured cards: marigold, tulsi, rose,
   repeating. Text inside each was measured against its own ground — the
   softest pairing here is ink-soft on the mint, at 7.9:1.
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 2px solid var(--line-warm);
  border-radius: 22px;
}

.pillar {
  border: 2px solid var(--line-warm);
  border-radius: 22px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--cream-2);
}
.grid > .pillar:nth-child(3n + 2) { background: var(--tulsi-tint); border-color: #b9dfcc; }
.grid > .pillar:nth-child(3n + 2) h3 { color: var(--forest-deep); }
.grid > .pillar:nth-child(3n + 3) { background: var(--rose-tint); border-color: #f6cdd3; }
.grid > .pillar:nth-child(3n + 3) h3 { color: #8c2136; }

/* The same chip carries a step number ("01") and a role ("Treasurer"), so it
   is a pill that hugs its text rather than a fixed circle. */
.pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 2px solid var(--brass-a);
  color: var(--brass-ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.notice {
  border-inline-start: 4px solid var(--brass);
  background: var(--cream-2);
  border-radius: 0 16px 16px 0;
}
.notice-tulsi { border-inline-start-color: var(--tulsi); background: var(--tulsi-tint); }

.tile { border: 2px solid var(--line-warm); border-radius: 22px; }
.tile:hover { border-color: var(--brass-a); background: var(--cream-2); }

.account { border: 2px solid var(--line-warm); border-top: 5px solid var(--brass); border-radius: 22px; }
.account-foreign { border-top-color: var(--tulsi); }
.account-tag { border-color: var(--line-warm); border-width: 2px; }

.photo, .strip-item img, .video-item video { border-radius: var(--radius); }

/* Controls keep a smaller radius than the blocks: an 18px corner on a 48px
   input reads as a lozenge rather than a field. */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], select, textarea { border-radius: var(--radius-sm); border-color: var(--line-warm); border-width: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--brass); outline-color: rgba(194, 65, 12, 0.2); }
.copy, .amount, input[type="file"]::file-selector-button, .slide-toggle, .nav-toggle {
  border-radius: var(--radius-pill);
  border-color: var(--line-warm);
  border-width: 2px;
}
.amount[aria-pressed="true"] { border-color: var(--brass); background: var(--cream-2); color: var(--brass-ink); }
.form-status { border-radius: var(--radius-sm); }

.slide-arrow { border-width: 2px; border-color: var(--line-warm); background: var(--paper); color: var(--brass-ink); }
.slide-arrow:hover { border-color: var(--brass-a); background: var(--cream-2); }
.slide-dot { border-width: 2px; border-color: var(--line-warm); }
.slide-dot[aria-selected="true"] { background: var(--brass); border-color: var(--brass); }

/* --------------------------------------------------------------------------
   The donate band — the one place the marigold gradient is allowed to run
   the full width. The heading sits on it at 24px+, where 3:1 is the bar.
   -------------------------------------------------------------------------- */

.cta {
  /* The mockup ran this band orange into marigold. Marigold is too light to
     carry white: at #e8913c white is 2.5:1, which fails even the 3:1 that
     large text is allowed. The sweep stops at the flame instead, where white
     is 5.2:1 at the palest end, and the marigold appears in the beads. */
  background: linear-gradient(120deg, var(--flame-deep) 0%, var(--flame) 42%, var(--brass) 100%);
  color: #fff;
  border-radius: clamp(20px, 3vw, 30px);
  margin-inline: var(--gutter);
}
.cta .wrap { max-width: 1240px; }
.cta p { color: rgba(255, 255, 255, 0.94); }
.cta .ornament i { background: var(--marigold-soft); }
.cta .ornament i:nth-of-type(2) { background: #fff; }
.cta .btn-primary { background: var(--paper); color: var(--brass-ink); box-shadow: 0 10px 22px -14px rgba(60, 20, 0, 0.7); }
.cta .btn-primary:hover { background: var(--cream-2); color: var(--brass-ink); }

/* --------------------------------------------------------------------------
   Footer — tulsi green, and the kolam again along the very bottom
   -------------------------------------------------------------------------- */

/* The tulsi green is lighter than the forest green it replaced, so every
   translucent white over it was re-measured. At the old alphas the credit
   line came out at 2.8:1 and the base row at 3.7:1. */
.footer { padding-bottom: 54px; color: rgba(255, 250, 242, 0.78); }
.footer a { color: rgba(255, 250, 242, 0.78); }
.footer-base,
.regs { color: rgba(255, 250, 242, 0.68); }
.credit { color: rgba(255, 250, 242, 0.62); }
.credit a { color: rgba(255, 250, 242, 0.78); }
.footer a:hover { color: var(--marigold-lite); }
/* Marigold proper is 4.3:1 on the green; this lighter one is 5.4:1. */
.section-dark a { color: var(--marigold-lite); }

/* --------------------------------------------------------------------------
   The language picker

   Shown once, on a first visit, over the English page. It is not a marketing
   interruption and is not styled like one: the emblem, the question in two
   scripts, and ten doors. Whichever is chosen is remembered, and the header
   switcher can change it afterwards.
   -------------------------------------------------------------------------- */

.lang-picker {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(20, 56, 44, 0.62);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
[data-picker-open] body { overflow: hidden; }

.lang-picker-card {
  width: min(560px, 100%);
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line-warm);
  box-shadow: 0 30px 70px -30px rgba(20, 56, 44, 0.6);
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
}
.lang-picker-head img { margin-inline: auto; }
.lang-picker-head h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 28px);
  color: var(--forest);
  margin-top: 14px;
}
.lang-picker-head p {
  font-family: "Noto Serif Telugu", var(--font-body), serif;
  color: var(--ink-soft);
  font-size: 16px;
  margin-top: 6px;
}

.lang-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.lang-picker-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 62px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-sm);
  color: var(--forest);
  cursor: pointer;
  font-family: var(--font-body);
}
.lang-picker-option:hover {
  border-color: var(--brass);
  background: var(--cream-2);
}
.lang-picker-native { font-size: 18px; line-height: 1.5; }
.lang-picker-english { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; }
.lang-picker-note { margin-top: 20px; font-size: 12.5px; color: var(--ink-soft); }

/* Each label is set in its own script, so the face has to follow the option
   rather than the page — the page underneath is still in English. */
.lang-picker-option[lang="te"] .lang-picker-native { font-family: "Noto Serif Telugu", serif; }
.lang-picker-option[lang="hi"] .lang-picker-native { font-family: "Noto Sans Devanagari", sans-serif; }
.lang-picker-option[lang="kn"] .lang-picker-native { font-family: "Noto Sans Kannada", sans-serif; }
.lang-picker-option[lang="ta"] .lang-picker-native { font-family: "Noto Sans Tamil", sans-serif; }
.lang-picker-option[lang="ml"] .lang-picker-native { font-family: "Noto Sans Malayalam", sans-serif; }
.lang-picker-option[lang="or"] .lang-picker-native { font-family: "Noto Sans Oriya", sans-serif; }
.lang-picker-option[lang="pa"] .lang-picker-native { font-family: "Noto Sans Gurmukhi", sans-serif; }
.lang-picker-option[lang="ur"] .lang-picker-native { font-family: "Noto Nastaliq Urdu", serif; line-height: 2; }
.lang-picker-option[lang="ar"] .lang-picker-native { font-family: "Noto Naskh Arabic", serif; }

/* --------------------------------------------------------------------------
   Phones, after the festival layer

   This has to sit here, at the end. The festival layer above re-sets
   .brand-name to 16px, and it does so with the same specificity as the phone
   rule four hundred lines earlier — so the later one won and the phone rule
   had been doing nothing at all. The registered name came out at 16px on a
   320px screen, wrapped to six lines, and made a sticky masthead 152px tall:
   a fifth of the phone, permanently, on every page.

   The rest of the block is what buys the height back. The sub-line is the
   registration number, which is on every page of the footer as well.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .brand-name { font-size: 13px; line-height: 1.2; }
}
@media (max-width: 400px) {
  /* .masthead is carried on both of these only to outrank the compact-header
     block's own `.brand img { width: 44px }`, which is one class heavier than
     a bare `.brand img` and would otherwise win here too. */
  .masthead .brand img { width: 38px; }
  .masthead .brand { gap: 10px; }
  .brand-name { font-size: 12.5px; }
  .brand-sub { display: none; }
}

/* --------------------------------------------------------------------------
   Right to left — Urdu and Arabic

   The layout is written in logical properties almost throughout, so `dir` on
   <html> does nearly all of it. What is left is the handful of places that
   are positioned by hand, plus the photo strips: those are a transform-driven
   marquee whose direction is part of the animation, not part of the reading,
   so they stay left to right whatever the text does.
   -------------------------------------------------------------------------- */

/* A telephone number, an email address, an account number or an IFSC code is
   Latin text in an Arabic sentence, and the bidi algorithm will otherwise push
   its leading "+" to the far end: "+91 94915 72748" reads "72748 94915 91+". */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
/* Account names, numbers, IFSC and SWIFT codes: the value never translates. */
[dir="rtl"] .fields dd { direction: ltr; unicode-bidi: isolate; text-align: right; }

[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: 0; }
[dir="rtl"] .hero-emblem { right: auto; left: -70px; }
/* The canvas is placed in the emblem's box, so it has to follow it across. */
[dir="rtl"] .page-canvas { right: auto; left: -70px; }
[dir="rtl"] .slide-prev { left: auto; right: 12px; }
[dir="rtl"] .slide-next { right: auto; left: 12px; }
[dir="rtl"] .strip { direction: ltr; }
[dir="rtl"] .strip-toggle { direction: rtl; right: auto; left: 12px; }
[dir="rtl"] select {
  background-position: left 14px center;
  padding-right: 14px;
  padding-left: 40px;
}
[dir="rtl"] .hp { left: auto; right: -9999px; }

@media (max-width: 620px) {
  [dir="rtl"] .strip-toggle { right: auto; left: 10px; }
}

@media print {
  .site-head::before, .footer::after, .hero::before, .page-head::after,
  .hero-canvas, .portrait-ring { display: none !important; }
  .hero, .page-head { background: #fff !important; }
  .cta { margin-inline: 0; }
  .lang-picker { display: none !important; }
}