/* =========================================================
   Eternal Life Fellowship Church, Bengaluru
   Global stylesheet
   ---------------------------------------------------------
   1. Tokens          6. Buttons & links
   2. Reset/base      7. Sections & components
   3. Typography      8. Media placeholders
   4. Layout          9. Footer
   5. Header/nav     10. Responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
/* Palette supplied by the church: deep navy, warm gold, off-white, charcoal.
   Gold is the one that needs care — at #D2AC68 it reaches only 1.96:1 on the
   off-white, so it is a fill and a colour for text on navy, never for text on
   a light ground. --gold-ink is the same hue and saturation taken darker
   until it clears 4.5:1, and small gold text uses that instead. */
:root {
  /* Brand */
  --ink:        #172D42;   /* deep navy — the dominant colour */
  --ink-2:      #1E3A54;   /* a step up, for banded sections on navy */
  --night:      #0F1F2E;   /* a step down, for the footer */
  --gold:       #D2AC68;   /* warm gold — fills, rules, text on navy */
  --gold-soft:  #DCBB82;
  --gold-ink:   #876528;   /* 4.50:1 on the tint, 4.91 on off-white, 5.35 on white */
  --offwhite:   #F7F5F0;
  --offwhite-2: #EFEBE2;
  --paper:      #ffffff;
  --line:       #E2DCD0;
  --line-dark:  rgba(210, 172, 104, .24);

  /* Text */
  --text:       #333333;   /* charcoal — 11.60:1 on off-white */
  --text-soft:  #5E6C7A;   /* 4.52:1 on the tint, 4.94 on off-white */
  --text-invert:#F7F5F0;
  --text-invert-soft: rgba(247, 245, 240, .74);

  /* Type — as specified: Playfair Display for headings, Inter for everything
     else. Both are open-licence families served from Google Fonts, so every
     visitor sees the same thing rather than falling back to a system face. */
  --playfair: "Playfair Display", Georgia, "Times New Roman", serif;
  --inter:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Headings and navigation, after hillsong.com. Proxima Nova is a Mark
     Simonson Studio retail face, licensed by pageview and served by Adobe
     Fonts under a domain-locked kit, so it cannot be shipped from here. It is
     named first under the exact family name an Adobe kit publishes, so adding
     that kit's <link> would switch the whole site over with no CSS change,
     and anyone with it installed gets it today. Figtree is the loaded
     fallback: the closest free geometric sans to Proxima Nova, and what
     visitors will actually see. */
  --proxima:  "proxima-nova", "Proxima Nova", Figtree, var(--inter);
  --serif:    var(--playfair);
  --heading:  var(--proxima);
  --display:  var(--proxima);
  --sans:     var(--inter);

  /* Space */
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(34px, 4.6vw, 64px);
  --maxw: 1200px;
  --maxw-narrow: 760px;

  /* Effects */
  --radius: 4px;
  --radius-lg: 14px;
  --arch: 50% 50% 6px 6px / 42% 42% 6px 6px;  /* church-window arch */
  --shadow-sm: 0 2px 10px rgba(11, 27, 43, .06);
  --shadow:    0 18px 44px -22px rgba(11, 27, 43, .38);
  --shadow-lg: 0 34px 80px -34px rgba(11, 27, 43, .52);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Every rem on this sheet resolves against the root, so the base lives here
   rather than on body. A percentage keeps a visitor's own larger default font
   size intact and scales with it. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--offwhite);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
/* No overflow-x on <html>/<body>: it turns them into scroll containers and
   breaks position:sticky. Anything that could bleed sideways is clipped at
   the component level instead. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold-soft); color: var(--ink); }

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

/* Visually hidden, still available to screen readers. Uses clip-path rather
   than left:-9999px, which inflates the document's scroll width. */
.sr-only, .skip-link {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: auto; height: auto; margin: 0; padding: 12px 20px;
  clip-path: none; overflow: visible;
  background: var(--ink); color: var(--text-invert);
  border-radius: 0 0 var(--radius) 0;
}

/* ---------- 3. Typography ---------- */
/* Weights are the ones the church specified: 700 for the main heading, 600
   for section headings. Playfair is a high-contrast face whose hairlines
   thin out as it shrinks, so it stays on the headings and never on body
   copy, and the tracking closes slightly at display sizes. */
h1, h2, h3, h4 {
  font-family: var(--heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.021em;
  line-height: 1.13;
}
h2 {
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.17;
}
h3 { font-size: clamp(1.15rem, 1.9vw, 1.42rem); font-weight: 600; }
h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
/* Footer and card h4s are small tracked labels, not display type — they stay
   on the UI sans, where Georgia would read as a mistake. */
.footer h4, .info-box h4 { font-family: var(--sans); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--text-soft);
  line-height: 1.75;
}
.verse {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.42;
  font-style: italic;
  font-weight: 300;
}
.verse-ref {
  display: block; margin-top: 18px;
  font-family: var(--sans); font-style: normal;
  font-size: .84rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-ink);
}
.text-center { text-align: center; }
.muted { color: var(--text-soft); }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section); position: relative; }
.section-head { max-width: 700px; margin-bottom: clamp(20px, 2.8vw, 32px); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
/* A heading that has to stay on one line needs more measure than the 700px
   that suits a paragraph, so this modifier widens the head and puts the
   reading width back on the prose underneath it. */
.section-head--wide { max-width: 1000px; }
.section-head--wide > p, .section-head--wide > blockquote { max-width: 700px; margin-inline: auto; }
.section-head--wide > .eyebrow { max-width: none; }
.section--dark { background: var(--ink); color: var(--text-invert); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-invert); }
.section--dark .lead, .section--dark .muted { color: var(--text-invert-soft); }
.section--tint { background: var(--offwhite-2); }
.section--paper { background: var(--paper); }

.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.split--media-right .split__media { order: 2; }
/* With the imagery gone most .split__body blocks stand alone in the wrap,
   so they need their own measure or the lines run far too long to read. */
.split__body { max-width: 72ch; }
.split .split__body { max-width: none; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--dark .rule { background: var(--line-dark); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 5. Header / nav ---------- */
.topbar {
  background: var(--night);
  color: var(--text-invert-soft);
  font-size: .8rem;
  letter-spacing: .02em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 42px; flex-wrap: wrap;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--gold-soft); }
.topbar__list { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.topbar__langs { color: var(--gold-soft); letter-spacing: .06em; }

/* Language switcher */
.langs { display: flex; align-items: center; gap: 2px; }
.lang {
  background: none; border: 0; cursor: pointer; color: var(--text-invert-soft);
  font: inherit; font-size: .84rem; letter-spacing: .04em; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.lang + .lang { position: relative; }
.lang + .lang::before {
  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: rgba(244, 239, 227, .22);
}
.lang:hover { color: var(--gold-soft); }
.lang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lang[aria-pressed="true"] {
  color: #17212B; background: var(--gold-soft); font-weight: 600;
}
.lang[aria-pressed="true"]::before, .lang[aria-pressed="true"] + .lang::before { opacity: 0; }

/* Indic scripts get their own faces — Cormorant and Inter have no
   Tamil, Kannada or Devanagari glyphs and would fall back to a
   mismatched system font. */
html[lang="ta"] {
  --serif: "Noto Serif Tamil", "Latha", serif;
  --sans:  "Noto Sans Tamil", "Latha", sans-serif;
  --heading: "Noto Serif Tamil", serif;
  --display: "Noto Serif Tamil", serif;
}
html[lang="kn"] {
  --serif: "Noto Serif Kannada", "Tunga", serif;
  --sans:  "Noto Sans Kannada", "Tunga", sans-serif;
  --heading: "Noto Serif Kannada", serif;
  --display: "Noto Serif Kannada", serif;
}
html[lang="hi"] {
  --serif: "Noto Serif Devanagari", "Mangal", serif;
  --sans:  "Noto Sans Devanagari", "Mangal", sans-serif;
  --heading: "Noto Serif Devanagari", serif;
  --display: "Noto Serif Devanagari", serif;
}
/* Indic glyphs carry taller ascenders and descenders, so the display
   sizes that suit Cormorant need a little more room to breathe. */
/* No case and no tracking for the Indic scripts. */
html[lang="ta"] h1, html[lang="kn"] h1, html[lang="hi"] h1,
html[lang="ta"] h2, html[lang="kn"] h2, html[lang="hi"] h2 {
  text-transform: none;
  letter-spacing: .01em;
}
html[lang="ta"] h1, html[lang="kn"] h1, html[lang="hi"] h1,
html[lang="ta"] h2, html[lang="kn"] h2, html[lang="hi"] h2,
html[lang="ta"] h3, html[lang="kn"] h3, html[lang="hi"] h3 {
  line-height: 1.28; letter-spacing: 0;
}
html[lang="ta"] .eyebrow, html[lang="kn"] .eyebrow, html[lang="hi"] .eyebrow,
html[lang="ta"] .crumbs, html[lang="kn"] .crumbs, html[lang="hi"] .crumbs {
  letter-spacing: .08em; text-transform: none;
}
html[lang="ta"] .btn, html[lang="kn"] .btn, html[lang="hi"] .btn {
  letter-spacing: .02em; text-transform: none;
}
/* Wide tracking and small-caps sizing suit Latin labels but break Indic
   conjuncts apart and render them too small to read. Reset both, and give
   the tiny labels a little more size. */
html[lang="ta"] .stat__label, html[lang="kn"] .stat__label, html[lang="hi"] .stat__label,
html[lang="ta"] .card__meta, html[lang="kn"] .card__meta, html[lang="hi"] .card__meta,
html[lang="ta"] .time-row__day, html[lang="kn"] .time-row__day, html[lang="hi"] .time-row__day,
html[lang="ta"] .field label, html[lang="kn"] .field label, html[lang="hi"] .field label,
html[lang="ta"] .info-box dt, html[lang="kn"] .info-box dt, html[lang="hi"] .info-box dt,
html[lang="ta"] .footer h4, html[lang="kn"] .footer h4, html[lang="hi"] .footer h4,
html[lang="ta"] .footer h4, html[lang="kn"] .footer h4, html[lang="hi"] .footer h4,
html[lang="ta"] .field label, html[lang="kn"] .field label, html[lang="hi"] .field label,
html[lang="ta"] .info-box dt, html[lang="kn"] .info-box dt, html[lang="hi"] .info-box dt {
  font-size: .9rem;
}
html[lang="ta"] .eyebrow, html[lang="kn"] .eyebrow, html[lang="hi"] .eyebrow {
  font-size: .88rem;
}
html[lang="ta"] .lang, html[lang="kn"] .lang, html[lang="hi"] .lang { letter-spacing: 0; }
/* Translated button labels are long sentences rather than two English words.
   `white-space: nowrap` turns them into one unbreakable box that widens its
   whole grid column, so let them wrap and stay centred. */
html[lang="ta"] .btn, html[lang="kn"] .btn, html[lang="hi"] .btn,
html[lang="ta"] .time-row__when, html[lang="kn"] .time-row__when, html[lang="hi"] .time-row__when {
  white-space: normal; text-align: center;
}
/* These display-size labels hold short English words ("Care", "Word"). The
   translations are whole words in a wider script, so at 2.9rem they no longer
   fit their grid column. */
html[lang="ta"] .stat__num, html[lang="kn"] .stat__num, html[lang="hi"] .stat__num {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.25;
}
/* Grid and flex children default to min-width:auto, so a single long word can
   push its whole column wider than the screen. Letting the tracks shrink is
   the actual fix; the wrap rule then breaks the word instead of the layout.
   Applies in every language — the translations just made it visible. */
.split > *, .grid > *, .times > *, .card, .tile, .footer__top > *,
.belief-list li > *, .time-row > *, .info-box dd { min-width: 0; }
html[lang="ta"] body, html[lang="kn"] body, html[lang="hi"] body { overflow-wrap: break-word; }
/* Brief dimming while a translation file is fetched. */
html.lang-loading body { opacity: .55; transition: opacity .15s linear; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 240, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 78px;
}

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* The supplied lockup is a single horizontal artwork — tree, ELFC and the
   full church name — so it replaces the old mark-plus-text pair outright.
   Intrinsic width/height are on the <img> so the browser reserves the right
   space before it loads and the header does not jump. */
.brand__logo {
  display: block;
  height: 56px;
  width: auto;
}
/* The wordmark inside the artwork is navy, which would disappear against the
   navy footer, so that ground gets the reversed version of the same file. */
.footer__logo {
  display: block;
  height: 74px;
  width: auto;
  margin: 0 0 16px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  font-family: var(--heading); font-weight: 600;
  position: relative; text-decoration: none;
  padding: 10px 9px; border-radius: var(--radius);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text);
  transition: color .25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown groups */

.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); width: 46px; height: 42px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 1.6px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. Buttons ---------- */
.btn {
  /* .btn has to look identical on <a> and on <button>. A <button> arrives with
     the UA's own widget styling — an opaque ButtonFace background, its own font
     and margin — which made the ghost variant render as a solid white pill
     (its cream text invisible until :hover replaced the background). Resetting
     these here keeps every variant element-agnostic; variants below still set
     their own background because they come later in the cascade. */
  appearance: none; -webkit-appearance: none;
  background: transparent; font-family: var(--sans); margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-size: .92rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--gold); color: #17212B; box-shadow: 0 10px 26px -12px rgba(201, 162, 39, .8); }
.btn--primary:hover { background: #D2AC68; }
.btn--dark { background: var(--ink); color: var(--text-invert); }
.btn--dark:hover { background: var(--ink-2); }
.btn--ghost { border-color: rgba(244, 239, 227, .38); color: var(--text-invert); }
.btn--ghost:hover { border-color: var(--gold-soft); background: rgba(244, 239, 227, .08); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--text-invert); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn-row.is-centered { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font-weight: 600; font-size: .9rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}
.link-arrow::after {
  content: "→"; transition: transform .28s var(--ease); color: var(--gold-ink); font-size: 1.05rem;
}
.link-arrow:hover::after { transform: translateX(6px); }
.section--dark .link-arrow { color: var(--gold-soft); }

/* ---------- 7. Components ---------- */

/* Hero */
.hero {
  position: relative; min-height: min(88vh, 820px);
  display: flex; align-items: center;
  background: var(--night); color: var(--text-invert);
  overflow: hidden;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Weighted to the left, where the headline sits, so the footage itself
     stays visible on the right. A flat overlay dark enough to carry the
     text would crush the whole shot to near-black. */
  background:
    linear-gradient(180deg, rgba(7,21,34,.38) 0%, rgba(7,21,34,0) 26%, rgba(7,21,34,0) 60%, rgba(7,21,34,.58) 100%),
    linear-gradient(90deg, rgba(7,21,34,.84) 0%, rgba(7,21,34,.66) 38%, rgba(7,21,34,.40) 58%, rgba(7,21,34,.16) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,.10) 0%, transparent 60%);
}
@media (max-width: 860px) {
  /* Narrow screens: the text spans the full width, so darken vertically
     instead of from the left. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(7,21,34,.62) 0%, rgba(7,21,34,.44) 40%, rgba(7,21,34,.78) 100%),
      radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,.10) 0%, transparent 60%);
  }
}
.hero__inner { position: relative; z-index: 2;}
.hero__content { max-width: 780px; }
.hero h1 { color: var(--text-invert); text-wrap: balance; }
.hero .eyebrow { color: var(--gold-soft); }
.hero__lead { color: var(--text-invert-soft); font-size: clamp(1.05rem, 1.8vw, 1.28rem); max-width: 560px; }
/* Scripture set as the hero lead reads better in the serif, with room to breathe. */
.hero__lead--verse {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.12rem, 2vw, 1.5rem); line-height: 1.52;
  max-width: 660px; color: var(--text-invert);
}
.hero__ref {
  margin-top: 14px; font-size: .82rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 38px;
  padding-top: 26px; border-top: 1px solid var(--line-dark);
  font-size: .9rem; color: var(--text-invert-soft);
}
.hero__meta strong { color: var(--gold-soft); font-weight: 600; letter-spacing: .04em; }

/* Page banner (interior pages) */
.page-hero {
  position: relative; background: var(--ink); color: var(--text-invert); overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 12% 0%, rgba(201,162,39,.16) 0%, transparent 62%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,27,43,.62), rgba(11,27,43,.92));
}
.page-hero__inner { position: relative; z-index: 2; padding-block: clamp(31px, 7vw, 26px); }
/* Interior page heroes now use h2, matching the homepage hero. The colour
   rule has to follow the tag or the heading renders navy on navy. The size
   override is gone so both heroes share the standard h2 scale. */
.page-hero h2 { color: var(--text-invert); }
/* The homepage hero sits in the same 720px column as the interior page
   heroes, so the heading starts at the same x on every page. It was in a
   redundant nested .wrap, which double-padded it 184px further left. */
/* .hero__inner { max-width: 720px; } */
.page-hero p { color: var(--text-invert-soft); }
.crumbs { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 20px; }
.crumbs a { text-decoration: none; opacity: .8; }
.crumbs a:hover { opacity: 1; }

/* Verse band */
.verse-band {
  background: var(--ink-2); color: var(--text-invert);
  text-align: center; padding-block: clamp(28px, 3.6vw, 44px);
  position: relative; overflow: hidden;
}
.verse-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, rgba(201,162,39,.14), transparent 70%);
}
.verse-band .wrap { position: relative; }

/* Cards */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600; margin-bottom: 12px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: .95rem; }
.card__foot { margin-top: auto; padding-top: 20px; }
.card--flat { background: transparent; border: 0; }
.card--flat:hover { transform: none; box-shadow: none; }

/* Play badge over video thumbs */

/* Service times */
.times { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.time-row {
  display: grid; grid-template-columns: 190px 1fr auto;
  gap: 18px; align-items: center;
  padding: 24px 28px; border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.time-row:last-child { border-bottom: 0; }
.time-row:hover { background: var(--offwhite); }
.time-row__day { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.time-row__what { color: var(--text-soft); font-size: .96rem; }
.time-row__what strong { color: var(--text); display: block; font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
.time-row__when {
  font-size: .88rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-ink); white-space: nowrap;
}

/* Feature list / beliefs */
.belief-list { counter-reset: b; display: grid; gap: 4px; }
.belief-list li {
  list-style: none; counter-increment: b;
  display: grid; grid-template-columns: 54px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.belief-list li::before {
  content: counter(b, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.section--dark .belief-list li { border-color: var(--line-dark); }

/* Stats */
.stat__num { font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 2.9rem); color: var(--ink); line-height: 1; }
.stat__label { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-top: 9px; }

/* Ministry tile */
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  display: flex; align-items: flex-end; min-height: 180px;
  text-decoration: none; color: var(--text-invert); background: var(--ink);
  border: 1px solid rgba(232,217,164,.14);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tile:hover { background: var(--ink-2); border-color: var(--gold); transform: translateY(-3px); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,21,34,0) 30%, rgba(7,21,34,.85) 100%);
}
.tile__body { position: relative; z-index: 2; padding: 26px; }
.tile__body h3 { color: var(--text-invert); margin-bottom: 6px; font-size: 1.35rem; }
.tile__body p { color: var(--text-invert-soft); font-size: .88rem; margin: 0; }

/* Arched media frame (church window motif) */

/* Video frame */

/* Gallery strip */

/* Quote band with bg image */
.quote-band { position: relative; overflow: hidden; background: var(--night); color: var(--text-invert); }
.quote-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,21,34,.94), rgba(7,21,34,.6)); }
.quote-band .wrap { position: relative; z-index: 2; padding-block: clamp(38px, 5vw, 66px); }

/* Person card */

/* Sermon list — the only pictures on the site are YouTube's own thumbnails */
.video-embed {
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); border: 1px solid var(--line); max-width: 940px;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.sermon-list { display: grid; gap: 14px; }
.sermon {
  display: grid; grid-template-columns: 184px 1fr; gap: 20px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); text-decoration: none; color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sermon:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.sermon:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sermon__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; background: var(--offwhite-2);
}
.sermon__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sermon__thumb::after {
  content: "\25B6"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; text-shadow: 0 2px 10px rgba(0,0,0,.6);
  background: rgba(11,27,43,.18); opacity: .92; transition: background .25s var(--ease);
}
.sermon:hover .sermon__thumb::after { background: rgba(11,27,43,.34); }
.sermon__body { display: grid; gap: 6px; }
.sermon__meta {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}
.sermon__title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.sermon__cta { font-size: .8rem; font-weight: 600; color: var(--gold-ink); letter-spacing: .04em; }
@media (max-width: 620px) {
  .sermon { grid-template-columns: 1fr; gap: 14px; }
  .sermon__thumb { max-width: 100%; }
}

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.chip {
  border: 1px solid var(--line); background: var(--paper);
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  font-size: .88rem; font-weight: 600; letter-spacing: .04em; color: var(--text-soft);
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }

/* Tabs */
.tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line);
}
.tab {
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  padding: 11px 22px; border-radius: 999px;
  font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text-soft); transition: all .25s var(--ease);
}
.tab:hover { border-color: var(--gold); color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tab[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--text-invert);
}
.tab-panel { max-width: 74ch; }
.tab-panel[hidden] { display: none; }
.tab-panel > h2 { margin-bottom: 20px; }
@media (max-width: 560px) { .tab { flex: 1 1 calc(50% - 5px); text-align: center; } }

/* Accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 24px 44px 24px 0; position: relative;
  font-family: var(--serif); font-size: 1.25rem; color: var(--ink);
}
.acc__btn::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.5rem; font-family: var(--sans); transition: transform .3s var(--ease);
}
.acc__btn[aria-expanded="true"]::after { content: "−"; }
.acc__panel { display: none; padding: 0 0 26px; color: var(--text-soft); max-width: 68ch; }
.acc__panel.is-open { display: block; }

/* Forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--text-soft); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .96rem; color: var(--text);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.form-note { font-size: .88rem; color: var(--text-soft); }
.form-status { font-size: .9rem; padding: 12px 16px; border-radius: var(--radius); display: none; }
.form-status.is-visible { display: block; }
.form-status[data-state="ok"] { background: rgba(201,162,39,.12); border: 1px solid var(--gold-soft); color: var(--ink); }

/* Newsletter band */
.newsletter { background: var(--ink); color: var(--text-invert); }
.newsletter .inline-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.newsletter .inline-form input {
  flex: 1 1 260px; padding: 15px 18px; border-radius: 999px;
  border: 1px solid var(--line-dark); background: rgba(247,245,240,.06); color: var(--text-invert);
}
.newsletter .inline-form input::placeholder { color: rgba(247,245,240,.5); }
.newsletter .inline-form input:focus { outline: none; border-color: var(--gold); }

/* Info box */
.info-box {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 26px 28px;
}
.info-box h4 { margin-bottom: 8px; }
.info-box dl { margin: 0; display: grid; gap: 12px; }
.info-box dt { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.info-box dd { margin: 3px 0 0; color: var(--text-soft); }

.info1-box {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 26px 28px;
}

/* Map placeholder */
.map-frame {
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--offwhite-2); border: 1px solid var(--line);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Scripture pull-quote inside a section */
.scripture {
  margin: 0 0 24px; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.14rem; line-height: 1.55; color: var(--ink);
}
.scripture cite {
  display: block; margin-top: 10px; font-style: normal; font-family: var(--sans);
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft);
}
.scripture--after { margin: 28px 0 0; }
.section--dark .scripture { color: var(--text-invert); border-color: var(--gold-soft); }
.section--dark .scripture cite { color: var(--text-invert-soft); }
html[lang="ta"] .scripture, html[lang="kn"] .scripture, html[lang="hi"] .scripture { font-style: normal; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 16ch; margin-inline: auto; }



/* ---------- Modal (native <dialog>) ------------------------------------
   <dialog> gives the focus trap, Escape-to-close and top-layer stacking for
   free; only the look and the backdrop click need writing. */
.modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(760px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 8vh);
  overflow: visible;
}
.modal::backdrop { background: rgba(7, 21, 34, .62); }
.modal__panel {
  position: relative;
  background: var(--paper); color: var(--text);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(28px, 5vw, 52px);
  max-height: calc(100dvh - 8vh); overflow-y: auto;
}
.modal__panel h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); margin-bottom: .6em; }
.modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; color: var(--text-soft); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.modal__close:hover { background: var(--offwhite-2); color: var(--ink); }
.modal__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in .28s var(--ease) both; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(10px); } }
}

/* On the dark grounds the relationship inverts: the brighter gold carries
   4.88:1 there, while the darkened one would disappear. Each dark surface
   gets the shade that clears 4.5 on it. */
.section--dark .eyebrow, .quote-band .eyebrow, .cta-band .eyebrow,
.newsletter .eyebrow, .section--dark .verse-ref, .quote-band .verse-ref,
.section--dark .info-box dt { color: var(--gold); }
.verse-band .eyebrow, .verse-band .verse-ref { color: var(--gold); } /* 5.50 on #1E3A54 */
/* Scripture citations invert the same way. --gold-ink is cut for light
   grounds and reaches only 2.85:1 on the navy, so every dark surface takes
   the bright gold instead. */
.section--dark cite, .quote-band cite, .cta-band cite, .verse-band cite,
.newsletter cite, .page-hero cite, .section--dark .goal__verse cite,
.page-hero .goal__verse cite, .section--dark .verse cite,
.quote-band .verse cite { color: var(--gold); }
.section--dark .goal__verse, .section--dark .verse,
.section--dark p, .section--dark .lead,
.page-hero .goal__verse { color: var(--text-invert-soft); }
.section--dark .goal__verse, .page-hero .goal__verse { border-left-color: var(--gold); }
.page-hero .eyebrow, .page-hero .verse-ref { color: var(--gold); }
html[lang="ta"] .nav a, html[lang="kn"] .nav a, html[lang="hi"] .nav a {
  text-transform: none; letter-spacing: .01em; font-size: .88rem;
}
.lang[lang="ta"] { font-family: "Noto Sans Tamil", sans-serif; }
.lang[lang="kn"] { font-family: "Noto Sans Kannada", sans-serif; }
.lang[lang="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }

/* Each commitment reads title, then the verse it rests on, then what it means
   in practice. The verse is set apart by a gold rule and italics rather than
   by another type size, so the three parts stay easy to tell apart without
   the item turning into a stack of competing headings. */
.belief-list--goal li { padding: 26px 0; }
.goal__title {
  display: block; font-size: 1.12rem; font-weight: 600;
  color: var(--ink); margin-bottom: 10px;
}
.goal__verse {
  margin: 0 0 12px; padding-left: 16px;
  border-left: 2px solid var(--gold);
  font-style: italic; font-size: .98rem; line-height: 1.6;
  color: var(--text);
}
.goal__verse cite {
  /* The dash travels with the reference; on its own it would strand at the
     end of a line. nowrap only past 30em, where there is room for it. */
  font-style: normal; font-size: .86rem; letter-spacing: .04em; color: var(--gold-ink);
}
@media (min-width: 30em) { .goal__verse cite { white-space: nowrap; } }
.goal__body { margin: 0; color: var(--text-soft); }
.section--dark .goal__title { color: var(--text-invert); }
.section--dark .goal__verse { color: var(--text-invert); border-color: var(--gold-soft); }
.section--dark .goal__verse cite { color: var(--gold-soft); }
.section--dark .goal__body { color: var(--text-invert-soft); }

/* ---------- 9. Footer ---------- */
/* ---------- Footer ----------
   Laid out from the church's reference design: a verse band across the top,
   then four columns — brand, quick links, meeting times, contact — over a
   copyright bar, with a lit ridge in the bottom corner. Every link, time and
   address here is the site's own; the reference's placeholders are not used. */
.site-footer {
  position: relative;
  background: var(--night);
  color: var(--text-invert-soft);
  font-size: .92rem;
  overflow: hidden;
  isolation: isolate;
}
.site-footer a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--gold); }
.footer__sprite { display: none; }
.footer__body { position: relative; z-index: 2; }

/* The header runs edge to edge, so the footer tracks it instead of staying in
   the old 1200px column. That column was leaving 416px of dead margin down
   each side at 1920 against the header's 44px. Same padding ramp as the
   header, capped so four columns do not drift apart on an ultra-wide screen. */
/* Scoped to the widths where the header itself goes full-bleed. Below the nav
   breakpoint the header returns to the standard wrap, so the footer does too
   and the two stay flush at every size. */
@media (min-width: 1241px) {
  .site-footer .wrap {
    max-width: 1920px;
    padding-inline: clamp(24px, 2.4vw, 44px);
  }
}
/* With the full width available the columns can breathe, and the brand text
   no longer needs to sit in a narrow measure. */
@media (min-width: 1500px) {
  .footer__top { gap: 60px; }
  .footer__col::before { left: -30px; }
  .footer__tagline { max-width: 42ch; }
}

/* Verse band */
.footer__verse {
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--line-dark);
  padding-block: clamp(30px, 4.4vw, 52px);
  text-align: center;
}
.footer__verse-text {
  margin: 0 auto;
  max-width: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 3.1vw, 2.15rem);
  line-height: 1.34;
  color: var(--text-invert);
}
.footer__verse-text em {
  font-style: inherit;
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
/* The rule either side of the reference is drawn with flex lines rather than
   a background image, so it tracks the text width at any size. */
.footer__verse-ref {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 18px auto 0;
  max-width: 560px;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.footer__verse-ref::before, .footer__verse-ref::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.footer__verse-ref::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* Columns */
.footer__top {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1.15fr 1.2fr;
  gap: 46px;
  padding-block: clamp(44px, 5.6vw, 72px);
}
.footer__col { position: relative; }
/* The hairline rules between columns in the reference. They are drawn on the
   column rather than as borders so the first one is skipped cleanly. */
.footer__col::before {
  content: ""; position: absolute; left: -23px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line-dark);
}
.site-footer h4 {
  font-family: var(--heading);
  color: var(--gold);
  font-size: 1.06rem; font-weight: 700;
  letter-spacing: .01em; text-transform: none;
  margin: 0 0 16px;
}
.footer__logo { display: block; height: 74px; width: auto; margin: 0 0 18px; }
.footer__tagline { margin: 0 0 20px; max-width: 36ch; font-style: italic; line-height: 1.72; }
.footer__headship {
  margin: 0; padding-top: 18px; border-top: 2px solid var(--gold);
  display: inline-block;
  color: var(--gold); font-weight: 700; font-size: 1rem;
}
.footer__headship-ref { margin: 4px 0 0; color: var(--text-invert); font-size: .9rem; }

/* Icon lists */
.fi { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fi--ext { width: 14px; height: 14px; opacity: .75; }
.footer__links, .footer__contact {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.footer__meets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer__links a, .footer__contact a { display: flex; align-items: center; gap: 13px; }
.footer__links .fi, .footer__contact .fi { color: var(--gold); }
.footer__links a:hover .fi, .footer__contact a:hover .fi { color: var(--gold-soft); }
.footer__meets li { display: flex; align-items: flex-start; gap: 13px; }
.footer__meets .fi { color: var(--gold); margin-top: 2px; }
.footer__meets strong { display: block; color: var(--text-invert); font-weight: 600; margin-bottom: 1px; }
.footer__meets span { display: block; line-height: 1.6; }
.site-footer h4.footer__follow { margin: 24px 0 14px; padding-top: 18px; border-top: 1px solid var(--line-dark); }

.social { display: flex; gap: 12px; }
.social a {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line-dark);
  display: grid; place-items: center;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.social a:hover { border-color: var(--gold); background: rgba(210,172,104,.14); color: var(--gold); }

/* Lit ridge in the corner, drawn rather than supplied as artwork. */
.footer__scene {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: min(560px, 62%); height: auto; pointer-events: none;
}

.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  font-size: .88rem;
}
.footer__bottom p { margin: 0; }


/* ---------- 10. Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
/* The nav collapses to a menu button earlier than the rest of the layout.
   Tamil, Kannada and Hindi labels are far longer than the English ones, and
   the Tamil row in particular needs the full 1200px container to fit, so the
   whole site switches to the menu button below that. */
@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }
  /* A backdrop-filter on the sticky header makes it the containing block for
     any fixed descendant, which pushed the .nav panel down by the header's own
     offset and let its last links fall below the fold. Below the breakpoint the
     panel is fixed, so the blur goes and the bar becomes fully opaque instead. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--offwhite);
  }

  .nav {
    position: fixed; inset: 0 0 auto; top: 0; z-index: 120;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--offwhite); padding: 96px var(--gutter) 40px;
    height: 100dvh; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    /* The closed panel stays inside the viewport and is hidden instead of
       being parked off-canvas — a translated fixed panel widens the document
       and lets the whole page scroll sideways on a phone. */
    transform: translateY(-10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .35s var(--ease), opacity .3s var(--ease), visibility .35s;
  }
  .nav.is-open {
    transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav a { padding: 17px 0; font-size: 1.18rem; font-family: var(--sans); font-weight: 500; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 26px; justify-content: center; }
  .nav-toggle { position: relative; z-index: 130; }
  body.nav-open { overflow: hidden; }

}

/* On wide screens the translated labels still need a tighter row than the
   English ones to stay inside the 1200px container. */
@media (min-width: 1241px) {
  html[lang="ta"] .nav, html[lang="kn"] .nav, html[lang="hi"] .nav { gap: 0; }
  html[lang="ta"] .nav a, html[lang="kn"] .nav a, html[lang="hi"] .nav a {
    padding: 10px 7px; font-size: .8rem;
  }
  html[lang="ta"] .nav .btn, html[lang="kn"] .nav .btn, html[lang="hi"] .nav .btn {
    padding: 11px 16px; font-size: .84rem; margin-left: 6px;
  }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split--media-right .split__media { order: 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar__inner { justify-content: center; text-align: center; padding-block: 8px; }
  .topbar__list { justify-content: center; gap: 14px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .time-row { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .time-row__when { justify-self: start; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { justify-content: center; text-align: center; }
  .hero { min-height: 78vh; }
}
@media (max-width: 420px) {
  .btn { width: 100%; }
  .btn-row { gap: 10px; }
}

/* Print */
@media print {
  .site-header, .topbar, .nav-toggle, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Welcome splash (homepage, once per session) ----------
   The sky is drawn in CSS rather than loaded as a photograph so the
   screen paints on the first frame — a splash that waits for an image
   is worse than no splash at all. */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; overflow: hidden;
  opacity: 1; transition: opacity .7s var(--ease);
  /* The whole overlay is the dismiss control now that the Skip button is
     gone, so the cursor is the only affordance saying "this is clickable". */
  cursor: pointer;
}
.splash[hidden] { display: none !important; }
.splash.is-leaving { opacity: 0; pointer-events: none; }
html.splash-open, html.splash-open body { overflow: hidden; }

.splash__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(118% 86% at 20% 74%, rgba(255,221,156,.96) 0%, rgba(255,194,116,.62) 24%, rgba(255,194,116,0) 58%),
    linear-gradient(180deg, #7fa9cf 0%, #a9c4d8 26%, #E2DCD0 50%, #E7CFA4 70%, #DCBB82 86%, #D2AC68 100%);
}
/* Photographic sky. Sits above the CSS gradient, which stays as the fallback:
   if the file is missing the gradient simply shows through, so the splash is
   never broken or blank. */
.splash__photo {
  position: absolute; inset: 0;
  background-image: url("../images/img-41-welcome-bg.jpg");
  background-size: cover; background-position: center 42%;
  background-repeat: no-repeat;
}
/* Keeps the dark navy lettering readable whatever the photograph does. */
.splash__wash {
  position: absolute; inset: 0;
  /* Only a whisper now. Legibility for the small print is handled locally by
     the halo behind the verse, so the picture itself stays uncovered. */
  background:
    linear-gradient(180deg,
      rgba(255,252,245,.03) 0%,
      rgba(255,252,245,.07) 34%,
      rgba(255,251,241,.16) 64%,
      rgba(255,250,238,.24) 84%,
      rgba(255,250,238,.28) 100%);
}

.splash__rays {
  position: absolute; left: 20%; top: 74%; width: 190vmax; height: 190vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255,238,200,.30) 0deg 5deg, rgba(255,238,200,0) 5deg 26deg,
    rgba(255,238,200,.22) 26deg 30deg, rgba(255,238,200,0) 30deg 54deg,
    rgba(255,238,200,.28) 54deg 59deg, rgba(255,238,200,0) 59deg 86deg,
    rgba(255,238,200,.18) 86deg 90deg, rgba(255,238,200,0) 90deg 120deg,
    rgba(255,238,200,.24) 120deg 125deg, rgba(255,238,200,0) 125deg 360deg);
  animation: splash-rays 44s linear infinite;
  mask-image: radial-gradient(closest-side, #000 18%, transparent 72%);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 72%);
}
@keyframes splash-rays { to { transform: translate(-50%,-50%) rotate(360deg); } }

.splash__hills {
  position: absolute; left: -4%; right: -4%; bottom: -2%; height: 34%;
  background:
    radial-gradient(60% 150% at 18% 100%, #5d6b63 0 60%, transparent 61%),
    radial-gradient(72% 140% at 62% 100%, #6b7a6d 0 60%, transparent 61%),
    radial-gradient(90% 130% at 100% 100%, #4e5a55 0 60%, transparent 61%);
  opacity: .5; filter: blur(.4px);
}

.splash__inner {
  position: relative; z-index: 2; text-align: center;
  padding: 24px clamp(20px, 5vw, 48px); max-width: 920px;
}
.splash__cross { width: clamp(58px, 9vw, 96px); height: auto; display: block; margin: 0 auto 18px; }
.splash__bar {
  fill: none; stroke: #D2AC68; stroke-width: 13; stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(210,172,104,.6));
}
/* Resting state is the finished cross. The keyframes only play it in, so if
   animations never run — throttled tab, low-power mode — the cross is simply
   there rather than invisible. */
.splash__bar--v { stroke-dasharray: 162; stroke-dashoffset: 0; animation: splash-draw-v .85s .15s cubic-bezier(.3,.8,.3,1); }
.splash__bar--h { stroke-dasharray: 86;  stroke-dashoffset: 0; animation: splash-draw-h .65s .85s cubic-bezier(.3,.8,.3,1); }
@keyframes splash-draw-v { from { stroke-dashoffset: 162; } to { stroke-dashoffset: 0; } }
@keyframes splash-draw-h { from { stroke-dashoffset: 86; }  to { stroke-dashoffset: 0; } }

.splash__welcome {
  text-shadow: 0 1px 10px rgba(255,252,245,.55);
  font-family: "Great Vibes", "Cormorant Garamond", cursive;
  font-size: clamp(1.15rem, 3.2vw, 2rem); line-height: 1.05;
  color: #243E58; margin: 0; letter-spacing: .01em;
  text-transform: lowercase;
}
/* "Great Vibes" has no Tamil, Kannada or Devanagari glyphs, so the script
   lead-in falls back to the language's own serif rather than a random
   system font picked by the browser. */
html[lang="ta"] .splash__welcome,
html[lang="kn"] .splash__welcome,
html[lang="hi"] .splash__welcome {
  font-family: var(--serif);
  font-size: clamp(1rem, 2.7vw, 1.55rem);
  letter-spacing: .02em;
}
/* Indic scripts have no case, and the tracked uppercase treatment makes the
   conjuncts hard to read, so both name lines drop it. */
html[lang="ta"] .splash__title,
html[lang="kn"] .splash__title,
html[lang="hi"] .splash__title {
  text-transform: none; letter-spacing: .01em;
  font-size: clamp(2rem, 7vw, 4.2rem);
}
html[lang="ta"] .splash__to,
html[lang="kn"] .splash__to,
html[lang="hi"] .splash__to {
  text-transform: none; letter-spacing: .08em;
  font-size: clamp(.82rem, 2vw, 1.1rem);
}

.splash__to {
  margin: 14px 0 0; font-size: clamp(.68rem, 1.6vw, .92rem);
  letter-spacing: .3em; text-transform: uppercase; color: #243E58; font-weight: 500;
  text-wrap: balance;
}
.splash__title {
  text-shadow: 0 1px 8px rgba(255,252,245,.6);
  margin: 6px 0 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.1rem, 7.4vw, 4.5rem); letter-spacing: .05em;
  line-height: 1.06; text-transform: uppercase; color: #172D42;
  text-wrap: balance;
}
.splash__rule {
  width: min(320px, 62vw); height: 1px; margin: 20px auto 18px;
  background: linear-gradient(90deg, transparent, rgba(22,48,77,.38), transparent);
  position: relative;
}
.splash__rule::after {
  content: "✝"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%);
  background: transparent; color: var(--gold); font-size: 1.15rem;
  text-shadow: 0 0 10px rgba(255,240,205,.9), 0 0 3px rgba(255,240,205,1);
}
.splash__verse {
  /* The halo is the element's own background, so it simply paints behind the
     text. A ::before with a negative z-index lands in the wrong stacking
     context here and never shows. */
  padding: 22px 36px 18px;
  background: radial-gradient(56% 74% at 50% 50%,
    rgba(255,252,245,.92) 0%, rgba(255,252,245,.66) 50%, rgba(255,252,245,0) 84%);
  text-shadow: 0 1px 3px rgba(255,252,245,.9), 0 0 14px rgba(255,252,245,.65);
  margin: 0 auto; max-width: 56ch; font-family: var(--serif); font-style: italic;
  font-size: clamp(.98rem, 2.1vw, 1.22rem); line-height: 1.5; color: #172D42;
}
.splash__verse cite {
  display: block; margin-top: 12px; font-style: normal; font-family: var(--sans);
  font-size: clamp(.64rem, 1.3vw, .76rem); letter-spacing: .24em;
  text-transform: uppercase; color: #445C75;
}

.splash__inner > * { animation: splash-rise .9s; }
.splash__welcome { animation-delay: .5s; }
.splash__title   { animation-delay: .74s; }
.splash__to      { animation-delay: .9s; }
.splash__rule    { animation-delay: 1.0s; }
.splash__verse   { animation-delay: 1.15s; }
@keyframes splash-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .splash__rays { animation: none; }
  .splash__bar { animation: none !important; }
  .splash__inner > * { animation: none !important; }
}
@media print { .splash { display: none !important; } }

/* Buttons hold their label on one line everywhere except the narrowest
   phones, where "What we believe about this" is wider than the screen and
   nowrap would clip it. Below 460px the label wraps and centres instead. */
@media (max-width: 460px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding-inline: 22px;
    letter-spacing: .04em;
  }
}

/* On a 320px screen the brand lockup (267px, flex-shrink:0) left no room for
   the menu button and pushed it 25px off the right edge. Below 400px it is
   allowed to shrink and the lockup steps down a size. */
@media (max-width: 400px) {
  .brand { flex-shrink: 1; min-width: 0; }
}

/* ---------- Full-bleed header, after hillsong.com ----------
   Their header spans the whole viewport: the logo sits hard against the left
   edge on a 20px gutter and the navigation is optically centred, with no
   max-width column. Ours was a 1200px box centred in the window, which on a
   1440px screen left 176px of dead space down each side and read as a
   floating, centre-aligned bar. Below the nav breakpoint the phone panel is
   unchanged. */
@media (min-width: 1241px) {
  .topbar__inner,
  .site-header__inner {
    max-width: none;
    padding-inline: clamp(24px, 2.4vw, 44px);
  }
}
/* Nothing is centred: the brand holds the left edge and the nav the right,
   at every desktop width. The lockup is kept at its natural width so its
   internal spacing cannot flex with the viewport. */
@media (min-width: 1241px) {
  .site-header__inner > .brand { flex: 0 0 auto; min-width: max-content; }
  .site-header__inner > .nav   { margin-left: auto; }
}

/* The lockup steps down with the viewport so it never crowds the menu
   button; below 400px the header bar tightens with it. */
@media (max-width: 1240px) { .brand__logo { height: 48px; } }
@media (max-width: 480px)  { .brand__logo { height: 42px; } }
@media (max-width: 400px)  { .brand__logo { height: 38px; } }
@media (max-width: 560px)  { .footer__logo { height: 62px; } }

/* Footer, narrow screens: the column rules only make sense while the columns
   sit side by side, so they come off as the grid folds. */
@media (max-width: 1024px) {
  .footer__col::before { display: none; }
  .footer__scene { width: min(420px, 74%); opacity: .75; }
}
@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr; gap: 38px; }
  .footer__tagline, .footer__verse-text { max-width: none; }
  .footer__verse-ref { gap: 12px; }
}
@media (max-width: 560px) {
  .footer__logo { height: 62px; }
  .footer__bottom { justify-content: flex-start; }
  .footer__scene { width: 78%; opacity: .6; }
}

/* A heading whose break point is written into the source as a real newline
   instead of a <br>. A <br> would split the text node in two, and the language
   switcher keys on whole text nodes — the heading would silently stop
   translating in Tamil, Kannada and Hindi. norm() collapses the newline, so
   the dictionary key is untouched. On a phone the forced break is dropped and
   the heading wraps to fit. */
.h-break { white-space: pre-line; }
@media (max-width: 640px) { .h-break { white-space: normal; } }