/* =========================================================
   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 ---------- */
:root {
  /* Brand */
  --ink:        #0b1b2b;   /* deep midnight blue */
  --ink-2:      #12293f;
  --night:      #071522;
  --orange:       #d66915;
  --orange-soft:  #ea6420;
  /* #d66915 reaches only 3.33:1 on cream — fine as a fill or on the dark
     sections, too weak for small label text. Same hue, taken darker until it
     clears 4.5:1 on every light surface the site uses. */
  --orange-ink:   #a75210;
  --cream:      #faf7f0;
  --cream-2:    #f3ede1;
  --paper:      #ffffff;
  --line:       #e4dccb;
  --line-dark:  rgba(232, 217, 164, .22);

  /* Text */
  --text:       #1f2a35;
  --text-soft:  #57657a;
  --text-invert:#f4efe3;
  --text-invert-soft: rgba(244, 239, 227, .72);

  /* Type — DM Sans throughout, separated by weight and size rather than by
     mixing faces. It is a variable font with real italics, so every weight
     and style this sheet asks for is drawn rather than synthesised. */
  --dm:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:   var(--dm);
  --heading: var(--dm);
  --sans:    var(--dm);

  /* 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(--cream);
  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(--orange-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--orange);
  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 ---------- */
/* The scale below was drawn for Cormorant Garamond, whose small x-height
   needs large sizes to read. Georgia is 11% wider at the same px with a much
   larger x-height, so the display sizes come down to compensate. */
h1, h2, h3, h4 {
  font-family: var(--heading);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 5.3vw, 3.95rem); font-weight: 400; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.08rem; 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(--orange-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(--orange-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(--cream-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(--orange-soft); }
.topbar__list { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.topbar__langs { color: var(--orange-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(--orange-soft); }
.lang:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lang[aria-pressed="true"] {
  color: #21190a; background: var(--orange-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;
}
html[lang="kn"] {
  --serif: "Noto Serif Kannada", "Tunga", serif;
  --sans:  "Noto Sans Kannada", "Tunga", sans-serif;
  --heading: "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;
}
/* Indic glyphs carry taller ascenders and descenders, so the display
   sizes that suit Cormorant need a little more room to breathe. */
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"] .brand__sub, html[lang="kn"] .brand__sub, html[lang="hi"] .brand__sub,
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"] .brand__sub, html[lang="kn"] .brand__sub, html[lang="hi"] .brand__sub {
  font-size: .82rem; margin-top: 1px;
}
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(250, 247, 240, .92);
  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; gap: 13px; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font-family: var(--serif); font-size: 1.24rem; font-weight: 600;
  color: var(--ink); letter-spacing: .01em;
}
.brand__sub {
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-ink); font-weight: 600; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative; text-decoration: none;
  padding: 10px 13px; border-radius: var(--radius);
  font-size: .88rem; font-weight: 500; 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(--orange);
  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: inherit; 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(--orange); color: #21190a; box-shadow: 0 10px 26px -12px rgba(201, 162, 39, .8); }
.btn--primary:hover { background: #d9b437; }
.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(--orange-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(--orange-ink); font-size: 1.05rem;
}
.link-arrow:hover::after { transform: translateX(6px); }
.section--dark .link-arrow { color: var(--orange-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; padding-block: clamp(90px, 13vw, 150px); }
.hero__content { max-width: 780px; }
.hero h1 { color: var(--text-invert); text-wrap: balance; }
.hero .eyebrow { color: var(--orange-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: 300;
  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(--orange-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(--orange-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); max-width: 720px; }
.page-hero h1 { color: var(--text-invert); font-size: clamp(2.3rem, 5vw, 3.6rem); }
.page-hero p { color: var(--text-invert-soft); }
.crumbs { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-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(--orange-soft); }
.card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  text-transform: uppercase;
  color: var(--orange-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(--cream); }
.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(--orange-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(--orange); 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(--orange); 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(--orange); transform: translateY(-2px); box-shadow: var(--shadow); }
.sermon:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sermon__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; background: var(--cream-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(--orange-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(--orange); 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(--orange); color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--orange); 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(--orange); 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(--orange); 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(--orange-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(244,239,227,.06); color: var(--text-invert);
}
.newsletter .inline-form input::placeholder { color: rgba(244,239,227,.5); }
.newsletter .inline-form input:focus { outline: none; border-color: var(--orange); }

/* Info box */
.info-box {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--orange); 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(--orange-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(--orange); border-radius: var(--radius);
  padding: 26px 28px;
}

/* Map placeholder */
.map-frame {
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--cream-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(--orange);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  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(--orange-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(--cream-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 orange 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(--orange); }
.site-footer .brand__sub { color: var(--orange); }               /* 5.17 on #071522 */
.verse-band .eyebrow, .verse-band .verse-ref { color: #f0914f; } /* 6.27 on #12293f */
.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(--orange);
  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(--orange-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(--orange-soft); }
.section--dark .goal__verse cite { color: var(--orange-soft); }
.section--dark .goal__body { color: var(--text-invert-soft); }

/* ---------- 9. Footer ---------- */
.site-footer { background: var(--night); color: var(--text-invert-soft); font-size: .92rem; }
.site-footer a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--orange-soft); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-block: clamp(52px, 7vw, 82px); }
.footer__brand .brand__name { color: var(--text-invert); }
.footer__brand p { margin-top: 18px; max-width: 34ch; }
.footer h4 { color: var(--text-invert); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer address { font-style: normal; line-height: 1.75; }
.social { display: flex; gap: 12px; margin-top: 22px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark);
  display: grid; place-items: center; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  transition: all .25s var(--ease);
}
.social a:hover { border-color: var(--orange); background: rgba(201,162,39,.14); color: var(--orange-soft); }
.footer__bottom {
  border-top: 1px solid var(--line-dark); padding-block: 26px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .88rem;
}

/* ---------- 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(--cream);
  }

  .nav {
    position: fixed; inset: 0 0 auto; top: 0; z-index: 120;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); 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(--serif); 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%, #dcd6c4 50%, #f2d49e 70%, #e7b176 86%, #d2914f 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: #d2a92f; stroke-width: 13; stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(201,162,39,.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: #27405c; 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: #27405c; 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(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 8.4vw, 5.1rem); letter-spacing: .04em;
  line-height: 1.06; text-transform: uppercase; color: #16304d;
  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(--orange); 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: #1c3450;
}
.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: #3a5370;
}

.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; } }