/* ==========================================================================
   Praying Wall — site stylesheet
   Two themes from one set of tokens. Dark is the night-sky navy and gold of
   the brand mark; light uses the brand palette Jonathan specified (white,
   deep blue #003F8F, CTA #0066CC, gold accents). The visitor's operating
   system chooses by default; the header toggle overrides and is remembered.
   ========================================================================== */

/* Anything marked hidden stays hidden, whatever display a class sets. */
[hidden] { display: none !important; }

/* --- self-hosted type (no request leaves this site) ----------------------
 *
 * Nothing is fetched from Google, ever.
 *
 * Each face is split by script and tagged with unicode-range, so a browser
 * downloads a file only when the text on the page actually uses characters
 * from it: an English reader never fetches the Vietnamese subset, and a
 * Turkish reader fetches latin-ext without being asked.
 *
 * Newsreader and Archivo are Latin-script families. They cover the Latin
 * languages plus Vietnamese and Turkish. Cyrillic, Devanagari, Bengali,
 * Gurmukhi, Arabic, Chinese, Japanese and Korean are NOT in these families
 * and fall through to the reader's own system font, which costs no download
 * and renders correctly. Russian included — see the delivery note.
 */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/newsreader-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/newsreader-vietnamese-600-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/newsreader-vietnamese-400-italic.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/archivo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/archivo-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/archivo-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/archivo-vietnamese-500-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/archivo-vietnamese-700-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* Urdu is written in Nastaliq. Naskh — the shape Arabic uses, and the shape
   Windows and Android fall back to — is legible to an Urdu reader but reads
   wrong to him, roughly the way a letter set in blackletter reads to us.
   Arabic itself must stay in Naskh, so this cannot be keyed on the script.
   It is keyed on the language: the rules below match only [lang="ur"], and a
   browser downloads a webfont only when something actually matching uses it,
   so no other reader ever pays the 156 KB. The unicode-range keeps the font
   to Arabic-script characters, leaving the brand name, the phone number and
   e-mail addresses in Archivo where they belong. */
@font-face {
  font-family: "Noto Nastaliq Urdu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}

/* --- tokens: dark (default) --------------------------------------------- */

:root {
  color-scheme: dark;

  --bg:          #05081C;
  --bg-2:        #090F2E;
  --bg-deep:     #0D1742;
  --text:        #EAEEFF;
  --dim:         #98A3D4;
  --line:        rgba(160, 176, 255, 0.16);

  --accent:      #F5D275;   /* gold text: links, prices, headings in callouts */
  --accent-2:    #D9A32E;   /* gold marks: icons, rules, borders */
  --accent-soft: rgba(217, 163, 46, 0.09);
  --accent-edge: rgba(217, 163, 46, 0.42);
  --on-badge:    #2A1B00;
  --badge-bg:    #F5D275;

  --surface:     rgba(13, 23, 66, 0.55);
  --surface-2:   rgba(9, 15, 46, 0.8);
  --field:       rgba(9, 15, 46, 0.9);
  --field-focus: rgba(13, 23, 66, 0.95);
  --header:      rgba(5, 8, 28, 0.82);
  --band:        rgba(13, 23, 66, 0.55);

  --btn-bg:      linear-gradient(178deg, #F5D275, #D9A32E);
  --btn-fg:      #2A1B00;
  --btn-shadow:  0 6px 26px rgba(217, 163, 46, 0.3);
  --btn-shadow-hover: 0 10px 34px rgba(217, 163, 46, 0.42);
  --btn-hover-bg: linear-gradient(178deg, #F8DC8C, #E0AC3A);

  --ghost-bg:    rgba(29, 63, 184, 0.16);
  --ghost-hover: rgba(29, 63, 184, 0.3);
  --ghost-edge:  rgba(150, 170, 255, 0.38);
  --ghost-fg:    #EAEEFF;

  --focus:       #F5D275;

  --hero-bg:
    radial-gradient(64% 48% at 50% 6%, rgba(122, 69, 222, 0.38), transparent 68%),
    radial-gradient(50% 40% at 50% 0%, rgba(29, 63, 184, 0.5), transparent 70%),
    linear-gradient(180deg, #090F2E, #05081C 78%);
  --give-bg:
    radial-gradient(58% 100% at 50% 100%, rgba(122, 69, 222, 0.3), transparent 70%),
    #090F2E;
  --lockup-shadow: drop-shadow(0 18px 50px rgba(122, 69, 222, 0.4));

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  --wrap: 1120px;
  --r: 14px;
}

/* --- tokens: light — applied by OS preference or by the toggle ---------- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #FFFFFF; --bg-2: #F7F9FC; --bg-deep: #E8EDF4;
    --text: #071C3D; --dim: #465775; --line: rgba(0, 63, 143, 0.14);
    --accent: #003F8F; --accent-2: #A96A08;
    --accent-soft: rgba(242, 193, 78, 0.16); --accent-edge: rgba(169, 106, 8, 0.45);
    --on-badge: #071C3D; --badge-bg: #FFE08A;
    --surface: #F7F9FC; --surface-2: #FFFFFF; --field: #FFFFFF; --field-focus: #FFFFFF;
    --header: rgba(255, 255, 255, 0.88); --band: #F7F9FC;
    --btn-bg: #0066CC; --btn-fg: #FFFFFF; --btn-hover-bg: #003F8F;
    --btn-shadow: 0 6px 20px rgba(0, 102, 204, 0.22);
    --btn-shadow-hover: 0 10px 28px rgba(0, 63, 143, 0.28);
    --ghost-bg: rgba(0, 102, 204, 0.06); --ghost-hover: rgba(0, 102, 204, 0.12);
    --ghost-edge: rgba(0, 63, 143, 0.35); --ghost-fg: #003F8F;
    --focus: #0066CC;
    --hero-bg:
      radial-gradient(60% 46% at 50% 4%, rgba(154, 56, 229, 0.12), transparent 70%),
      radial-gradient(50% 40% at 50% 0%, rgba(22, 155, 255, 0.16), transparent 72%),
      linear-gradient(180deg, #F7F9FC, #FFFFFF 80%);
    --give-bg:
      radial-gradient(58% 100% at 50% 100%, rgba(154, 56, 229, 0.1), transparent 70%),
      #F7F9FC;
    --lockup-shadow: drop-shadow(0 14px 32px rgba(0, 38, 92, 0.18));
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --bg-2: #F7F9FC; --bg-deep: #E8EDF4;
  --text: #071C3D; --dim: #465775; --line: rgba(0, 63, 143, 0.14);
  --accent: #003F8F; --accent-2: #A96A08;
  --accent-soft: rgba(242, 193, 78, 0.16); --accent-edge: rgba(169, 106, 8, 0.45);
  --on-badge: #071C3D; --badge-bg: #FFE08A;
  --surface: #F7F9FC; --surface-2: #FFFFFF; --field: #FFFFFF; --field-focus: #FFFFFF;
  --header: rgba(255, 255, 255, 0.88); --band: #F7F9FC;
  --btn-bg: #0066CC; --btn-fg: #FFFFFF; --btn-hover-bg: #003F8F;
  --btn-shadow: 0 6px 20px rgba(0, 102, 204, 0.22);
  --btn-shadow-hover: 0 10px 28px rgba(0, 63, 143, 0.28);
  --ghost-bg: rgba(0, 102, 204, 0.06); --ghost-hover: rgba(0, 102, 204, 0.12);
  --ghost-edge: rgba(0, 63, 143, 0.35); --ghost-fg: #003F8F;
  --focus: #0066CC;
  --hero-bg:
    radial-gradient(60% 46% at 50% 4%, rgba(154, 56, 229, 0.12), transparent 70%),
    radial-gradient(50% 40% at 50% 0%, rgba(22, 155, 255, 0.16), transparent 72%),
    linear-gradient(180deg, #F7F9FC, #FFFFFF 80%);
  --give-bg:
    radial-gradient(58% 100% at 50% 100%, rgba(154, 56, 229, 0.1), transparent 70%),
    #F7F9FC;
  --lockup-shadow: drop-shadow(0 14px 32px rgba(0, 38, 92, 0.18));
}

/* --- base --------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px at the default size; rem so the text-size control scales it */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
h3 { font-size: 1.22rem; }

p { margin: 0 0 var(--s4); max-width: 66ch; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Offset vertically, never horizontally: a negative `left` flips under
   dir="rtl" and drags the document thousands of pixels wide. */
.skip {
  position: absolute; inset-inline-start: var(--s4); top: -80px;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: var(--s3) var(--s4); border-radius: var(--r); font-weight: 700; z-index: 100;
  transition: top .18s ease;
}
.skip:focus { top: var(--s3); }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 0; cursor: pointer;
  white-space: nowrap;
  padding: 14px 22px; border-radius: 999px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn-gold {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
}
.btn-gold:hover { transform: translateY(-2px); background: var(--btn-hover-bg); box-shadow: var(--btn-shadow-hover); }

.btn-line {
  background: var(--ghost-bg);
  color: var(--ghost-fg);
  box-shadow: inset 0 0 0 1.5px var(--ghost-edge);
}
.btn-line:hover { transform: translateY(-2px); background: var(--ghost-hover); }

.btn-lg { padding: 17px 30px; font-size: 1.06rem; }
.btn-sm { padding: 10px 18px; font-size: .92rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: 10px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 42px; height: auto; }
.brand span { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; letter-spacing: .01em; }

.header-tools { display: flex; align-items: center; gap: var(--s3); }

/* A slimmer bar on wider screens, so the banner gets the height. */
@media (min-width: 701px) {
  .header-inner { padding-block: 5px; }
  .brand img { width: 34px; }
  .brand span { font-size: 1.1rem; }
  .site-header .theme-toggle { width: 34px; height: 34px; }
  .site-header .theme-toggle svg { width: 17px; height: 17px; }
  .site-header .btn-sm { padding-block: 7px; font-size: .9rem; }
}

.lang { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.lang svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang select {
  appearance: none; background: transparent; border: 0;
  color: var(--text); font-family: var(--sans); font-size: .94rem;
  padding: 6px 4px; cursor: pointer;
}
.lang select option { background: var(--bg-deep); color: var(--text); }

.theme-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: transparent; color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .16s ease, background .16s ease;
}
.theme-toggle:hover { color: var(--text); background: var(--ghost-bg); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme-resolved="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme-resolved="dark"] .theme-toggle .icon-moon { display: none; }

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

.hero {
  position: relative;
  padding-block: var(--s7) var(--s8);
  text-align: center;
  background: var(--hero-bg);
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }

.hero-inner > picture { display: block; }

/* The Praying Wall logo is artwork on white, so it sits on its own clean
   white card in both themes rather than floating on the page colour. */
.lockup-card {
  width: min(440px, 84vw);
  margin-bottom: var(--s5);
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 6px rgba(255, 255, 255, 0.04);
}
.lockup { display: block; width: 100%; height: auto; }

/* The homepage banner: the Praying Wall under the reader's own sky.
   scripts/hero.js picks the day or evening picture from the reader's clock
   and sets data-sky; dawn warms the day picture, night darkens the evening
   one while the cross and the name keep their own light (.hero-glow is the
   same picture, masked to those two shapes). */
.hero.hero-scene {
  --art-h: min(38.5vw, 780px);   /* always the whole picture, never cropped */
  padding-top: 0;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.hero-art { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 2026px); height: var(--art-h); z-index: -1; }
/* Wider than the picture itself: it stays whole and its edges melt into the page. */
@media (min-width: 2027px) {
  .hero-art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
}
.hero-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;   /* a very wide screen loses sky, never the wall */
  transition: filter .8s ease;
}
.hero-art img:not([src]) { visibility: hidden; }
.hero-grade, .hero-fade { position: absolute; inset: 0; pointer-events: none; }
.hero-art .hero-glow {
  opacity: 0;
  -webkit-mask-image:
    radial-gradient(ellipse 19% 40% at 49% 32%, #000 55%, transparent 100%),
    radial-gradient(ellipse 40% 19% at 51% 78%, #000 60%, transparent 100%);
          mask-image:
    radial-gradient(ellipse 19% 40% at 49% 32%, #000 55%, transparent 100%),
    radial-gradient(ellipse 40% 19% at 51% 78%, #000 60%, transparent 100%);
}
.hero-fade {
  background: linear-gradient(180deg, transparent 0%, transparent 86%,
    color-mix(in srgb, var(--bg) 60%, transparent) 95%, var(--bg) 100%);
}
.hero-scene .hero-inner { padding-top: calc(var(--art-h) + var(--s5)); }
.hero-scene .hero-h { margin-top: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); }

.hero-scene[data-sky="dawn"] .hero-art img:not(.hero-glow) { filter: saturate(1.08) brightness(.92); }
.hero-scene[data-sky="dawn"] .hero-grade {
  background: linear-gradient(180deg, rgba(170, 100, 190, .5) 0%, rgba(255, 150, 120, .45) 38%, rgba(255, 190, 130, .2) 60%, transparent 78%);
  mix-blend-mode: multiply;
}
.hero-scene[data-sky="dawn"] .hero-glow { opacity: .7; }

.hero-scene[data-sky="night"] .hero-art img:not(.hero-glow) { filter: brightness(.45) saturate(.85); }
.hero-scene[data-sky="night"] .hero-grade {
  background: linear-gradient(180deg, rgba(10, 18, 70, .65), rgba(10, 18, 70, .2) 70%, transparent);
  mix-blend-mode: multiply;
}
.hero-scene[data-sky="night"] .hero-glow { opacity: .95; }

@media (max-width: 700px) {
  .hero.hero-scene { --art-h: 47vw; }       /* the outer notes trim away; the whole name stays */
}
@media (prefers-reduced-motion: reduce) { .hero-art img { transition: none; } }

.hero-call { margin: var(--s4) 0 0; color: var(--dim); font-size: 1.02rem; text-align: center; }
.hero-call a { color: var(--accent); text-decoration: none; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.hero-call a:hover strong, .hero-call a:focus-visible strong { text-decoration: underline; }
.hero-call strong { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; letter-spacing: .01em; }
.hero-call .num { color: var(--dim); font-size: .95rem; margin-inline-start: 6px; }

.hero .lede {
  font-size: clamp(1.06rem, 2.4vw, 1.3rem);
  color: var(--dim);
  max-width: 54ch;
  margin-bottom: var(--s6);
}

.hero .actions { justify-content: center; margin-bottom: var(--s4); }

.fineprint { font-size: .92rem; color: var(--dim); max-width: 48ch; }

.verse {
  margin: var(--s7) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: 34ch;
}
.verse p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.4;
  color: var(--text); margin-bottom: 6px;
}
.verse cite { font-style: normal; font-size: .88rem; color: var(--accent); letter-spacing: .06em; }

/* --- wall-opens-soon band (Phase A stand-in for counters and feed) ------ */

.soon-band {
  padding-block: var(--s5);
  border-block: 1px solid var(--line);
  background: var(--band);
  text-align: center;
}
.soon-band p { margin: 0 auto; color: var(--dim); font-size: .98rem; max-width: 60ch; }
.soon-band strong { color: var(--text); font-weight: 700; }

/* --- steps -------------------------------------------------------------- */

.steps { padding-block: var(--s8); }
.steps h2 { margin-bottom: var(--s6); }

.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.step-list li { position: relative; padding-inline-start: 60px; }

.step-num {
  position: absolute; inset-inline-start: 0; top: -2px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.24rem; color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent-edge);
}
.step-list p { color: var(--dim); margin-bottom: 0; }

/* --- pillars ------------------------------------------------------------ */

.pillars {
  padding-block: var(--s8);
  background: linear-gradient(180deg, transparent, var(--band) 22%, transparent);
}
.pillars h2 { margin-bottom: var(--s6); }

.pillar-grid { display: grid; gap: var(--s5); }

.pillar {
  padding: var(--s5);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
}
.pillar svg {
  width: 30px; height: 30px; margin-bottom: var(--s3);
  fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pillar h3 { margin-bottom: 6px; }
.pillar p { color: var(--dim); font-size: .96rem; margin-bottom: 0; }

/* --- forms -------------------------------------------------------------- */

.request { padding-block: var(--s8); }
.request-inner { display: grid; gap: var(--s6); }
.request-copy p { color: var(--dim); }

.form { display: grid; gap: var(--s4); }
.hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.field { display: grid; gap: 7px; }
.field label { font-size: .9rem; color: var(--dim); font-weight: 500; }

.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color .16s ease, background-color .16s ease;
}
.field select { cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent-edge);
  background: var(--field-focus);
}
.field select option, .field select optgroup { background: var(--bg-2); color: var(--text); }
.field textarea { resize: vertical; min-height: 120px; }

.row { display: grid; gap: var(--s4); }

.form .btn { justify-self: start; }
.form .fineprint { margin-bottom: 0; }

.form-thanks {
  padding: var(--s5);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--accent-edge);
}
.form-thanks h3 { color: var(--accent); }
.form-thanks p { color: var(--text); margin-bottom: 0; }
.form-again { margin-top: var(--s4); }
.word-body em { font-style: italic; }
.word-body strong { font-weight: 700; }

.form-error { color: var(--accent); }

/* --- crisis notice ------------------------------------------------------ */

.crisis {
  display: flex; gap: var(--s3);
  padding: var(--s4);
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
}
.crisis svg {
  width: 22px; height: 22px; flex: none; margin-top: 2px;
  fill: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linecap: round;
}
.crisis p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text); max-width: none; }

/* --- checkbox and consent ----------------------------------------------- */

.check { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; color: var(--dim); cursor: pointer; }
.check input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--accent-2); flex: none; cursor: pointer; }

.consent {
  margin: 0; padding: var(--s4);
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  display: grid; gap: var(--s3);
}
.consent legend { padding: 0 6px; font-size: .9rem; font-weight: 700; color: var(--text); }
.opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.opt input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--accent-2); flex: none; }
.opt span { display: grid; gap: 2px; }
.opt strong { font-size: .97rem; font-weight: 700; color: var(--text); }
.opt em { font-style: normal; font-size: .87rem; color: var(--dim); }
.opt.is-disabled { opacity: .45; cursor: not-allowed; }

.consent-note { font-size: .84rem; color: var(--dim); margin: 0; }
.field-note { font-size: .84rem; color: var(--accent); margin: 2px 0 0; }
.req-when { color: var(--accent); font-weight: 700; }

/* --- prayer warrior application ----------------------------------------- */

.warriors {
  padding-block: var(--s8);
  background: linear-gradient(180deg, transparent, var(--band) 30%, transparent);
}
.warriors h2 { margin-bottom: var(--s3); }
.lede-sm { color: var(--dim); font-size: 1.04rem; margin-bottom: var(--s6); }

.creed {
  padding: var(--s5);
  margin-bottom: var(--s6);
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--accent-edge);
}
.creed h3 { color: var(--accent); margin-bottom: var(--s2); }
.creed-note { font-size: .9rem; color: var(--dim); margin-bottom: var(--s4); }

.creed-text {
  margin: 0;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--accent-edge);
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.62;
  white-space: pre-line;
  color: var(--text);
  max-width: 56ch;
}

/* --- vision roadmap ----------------------------------------------------- */

.vision { padding-block: var(--s8); }
.vision h2 { margin-bottom: var(--s3); }

.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.roadmap li {
  padding-inline-start: var(--s5);
  border-inline-start: 2px solid var(--line);
}
.roadmap li.done { border-inline-start-color: var(--accent-2); }
.roadmap h3 { margin: 6px 0 4px; }
.roadmap p { color: var(--dim); font-size: .97rem; margin: 0; }

.stage {
  display: inline-block;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  color: var(--dim);
  padding: 3px 10px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.done .stage, .tier-live .stage {
  color: var(--on-badge); background: var(--badge-bg); box-shadow: none;
}

/* --- membership tiers --------------------------------------------------- */

.membership { padding-block: var(--s8); background: var(--band); }
.membership h2 { margin-bottom: var(--s6); }

.tiers { display: grid; gap: var(--s5); }
.tier {
  padding: var(--s5); border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.tier-live { border-color: var(--accent-edge); }
.tier h3 { margin: var(--s3) 0 4px; }
.tier .price { font-family: var(--serif); font-size: 1.2rem; color: var(--accent); margin-bottom: var(--s3); }
.tier p { color: var(--dim); font-size: .97rem; margin-bottom: var(--s3); }
.tier p:last-child { margin-bottom: 0; }
.tier-vow {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-style: italic;
}

/* --- supporters --------------------------------------------------------- */

.invest { padding-block: var(--s8); }
.invest-inner { display: grid; gap: var(--s6); }
.invest-copy p { color: var(--dim); }

/* --- give --------------------------------------------------------------- */

.give {
  padding-block: var(--s8);
  background: var(--give-bg);
  border-top: 1px solid var(--line);
}
.give-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.give p { color: var(--dim); max-width: 56ch; }
.give .actions { justify-content: center; }
.give .disclosure { font-size: .86rem; margin-top: var(--s4); margin-bottom: 0; }

.is-soon { opacity: .55; cursor: default; pointer-events: none; }

/* --- footer ------------------------------------------------------------- */

.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding-top: var(--s7); }

.footer-inner { display: grid; gap: var(--s5); padding-bottom: var(--s6); }
.footer-brand img { width: 66px; margin-bottom: var(--s3); }
.footer-brand p { color: var(--dim); margin: 0; font-family: var(--serif); font-size: 1.06rem; }

.footer-contact { display: grid; gap: 6px; align-content: start; }
.footer-contact a { color: var(--dim); text-decoration: none; font-size: .96rem; width: fit-content; direction: ltr; unicode-bidi: isolate; }
.footer-contact a:hover { color: var(--accent); text-decoration: underline; }
.footer-contact .phone {
  font-family: var(--serif); font-size: 1.5rem; color: var(--accent); margin-bottom: 0;
}
.footer-contact .phone-digits { font-size: 1rem; color: var(--text); margin-bottom: 4px; }
.soon-note { font-size: .86rem; color: var(--dim); max-width: 30ch; display: block; margin-bottom: 6px; }

.legal-line { border-top: 1px solid var(--line); padding-block: var(--s4) var(--s5); }
.legal-line p { font-size: .84rem; color: var(--dim); margin: 0; }

/* --- counters and wall (Phase B; styles kept, markup not yet shipped) --- */

.counters { padding-block: var(--s6); border-block: 1px solid var(--line); background: var(--band); }
.counter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); text-align: center; }
.counter { display: flex; flex-direction: column; gap: 4px; }
.counter-num {
  font-family: var(--serif); font-size: clamp(2.1rem, 7vw, 3.4rem); line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.counter-num[data-state="loading"] { opacity: .4; }
.counter-label { font-size: .86rem; color: var(--dim); letter-spacing: .02em; }
.counter-note { text-align: center; font-size: .82rem; color: var(--dim); margin: var(--s4) auto 0; max-width: 44ch; }

.wall { padding-block: var(--s8); }
.wall-head { margin-bottom: var(--s6); }
.wall-head p { color: var(--dim); }
.wall-status { color: var(--dim); font-size: .95rem; padding-block: var(--s4); }
.wall-feed { display: grid; gap: var(--s4); }

.card {
  padding: var(--s5); border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s3);
}
.card-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.card-who { font-family: var(--serif); font-size: 1.1rem; color: var(--text); }
.card-when { font-size: .82rem; color: var(--dim); }
.card-body { margin: 0; color: var(--text); font-size: 1.02rem; line-height: 1.6; max-width: 62ch; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.prayed {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .94rem; font-weight: 700;
  color: var(--ghost-fg); cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 0;
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1.5px var(--ghost-edge);
  transition: background-color .16s ease, transform .16s ease;
}
.prayed svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.prayed:hover:not(:disabled) { background: var(--ghost-hover); transform: translateY(-1px); }
.prayed.is-done { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-edge); color: var(--accent); }
.prayed:disabled { cursor: default; }
.card-count { font-size: .9rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.wall-foot { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

/* --- legal pages -------------------------------------------------------- */

.legal-page { padding-block: var(--s7) var(--s8); }
.legal-wrap { max-width: 760px; }
.legal-page h1 { margin-bottom: var(--s2); }
.legal-page h2 {
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  margin: var(--s7) 0 var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.legal-page h3 { font-size: 1.05rem; margin: var(--s5) 0 var(--s2); color: var(--accent); }
.legal-page p, .legal-page li { color: var(--dim); }
.legal-page p { max-width: none; }
.legal-page strong { color: var(--text); }
.legal-page ul { margin: 0 0 var(--s4); padding-inline-start: var(--s5); display: grid; gap: 7px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); font-size: .94rem; }
.legal-page th, .legal-page td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-page th { color: var(--text); font-weight: 700; }
.legal-page td { color: var(--dim); }

.legal-meta { font-size: .88rem; color: var(--dim); margin-bottom: var(--s5); }
.legal-note { font-size: .88rem; font-style: italic; }

.legal-callout {
  padding: var(--s5); margin-bottom: var(--s6);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--accent-edge);
}
.legal-callout p { margin: 0; color: var(--text); }

.legal-foot {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center; justify-content: space-between;
  padding-block: var(--s5);
}
.legal-foot p { margin: 0; font-size: .84rem; color: var(--dim); }

/* --- breakpoints -------------------------------------------------------- */

@media (max-width: 560px) {
  /* The emblem carries the brand; the wordmark stands down so the language
     control, theme toggle and CTA never collide. */
  .brand span { display: none; }
  .brand img { flex: none; }
  .site-header .wrap { padding-inline: var(--s4); }
  .header-inner { gap: var(--s2); }
  .header-tools { gap: var(--s2); }
  .lang svg { display: none; }
  .lang select { font-size: .88rem; }
  .acct-link { padding: 8px 4px; }
}

@media (max-width: 440px) {
  .header-tools .btn-sm { padding: 9px 14px; font-size: .86rem; }
}

@media (min-width: 640px) {
  .row { grid-template-columns: 1fr 1fr; }
  .step-list { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
}

@media (min-width: 700px) {
  .wall-feed { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  body { font-size: 1.125rem; }
  .hero { padding-block: var(--s8) var(--s7); }
  .step-list { grid-template-columns: repeat(3, 1fr); }
  .pillar-grid { grid-template-columns: repeat(4, 1fr); }
  .request-inner { grid-template-columns: 0.85fr 1.15fr; gap: var(--s7); align-items: start; }
  .invest-inner { grid-template-columns: 0.85fr 1.15fr; gap: var(--s7); align-items: start; }
}

/* --- one orchestrated entrance, then nothing moves on its own ------------ */

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: rise .8s cubic-bezier(.2, .7, .3, 1) backwards; }
  .hero-inner > picture { animation-delay: .05s; }
  .hero h1 { animation-delay: .18s; }
  .hero .lede { animation-delay: .28s; }
  .hero .actions { animation-delay: .36s; }
  .hero .fineprint { animation-delay: .44s; }
  .hero .verse { animation-delay: .52s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --- account link in the header ----------------------------------------- */
.acct-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--dim);
  font-size: .92rem; font-weight: 500; text-decoration: none; padding: 8px 6px; border-radius: 10px;
}
.acct-link:hover { color: var(--text); }
.acct-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 560px) {
  .acct-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 359px) {
  /* smallest phones: tighten the header so nothing spills sideways */
  .brand img { width: 34px; }
  .header-tools { gap: 4px; }
  .header-tools .btn-sm { padding: 8px 11px; font-size: .8rem; }
  .lang select { font-size: .8rem; }
  .theme-toggle { width: 36px; height: 36px; }
}

/* Shown first on the thank-you panel when a request contains crisis words. */
.crisis-urgent {
  flex-direction: column; gap: var(--s2); margin-bottom: var(--s4);
  border-width: 2px; border-color: var(--accent);
}
.crisis-urgent h3 { margin: 0; font-size: 1.15rem; color: var(--text); }
.crisis-urgent p { margin: 0; color: var(--text); }

/* ==========================================================================
   Prayer Wall (homepage preview, /wall/, /my-request/)
   ========================================================================== */
.wall-home { padding-block: var(--s8); border-block: 1px solid var(--line); background: var(--band); }
.wall-home-head, .wall-page-head { max-width: 62ch; margin-bottom: var(--s5); }
.wall-home-head p, .wall-page-head p { color: var(--dim); }
.wall-page { padding-block: var(--s7) var(--s8); }
.wall-page h1 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 var(--s3); }
.narrow-wrap { max-width: 720px; }
.wall-home .counter-grid, .wall-page .counter-grid { margin-top: var(--s4); }
.counter-num { font-variant-numeric: tabular-nums; }
.wc-list { display: grid; gap: var(--s4); margin-top: var(--s5); }
.wall-status:empty { display: none; }
.wall-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.wall-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.chip {
  background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 999px;
  padding: 7px 15px; font: inherit; font-size: .9rem; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--text); font-weight: 600; }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wc {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s5); display: grid; gap: var(--s3);
}
.wc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.wc-who { font-family: var(--serif); font-size: 1.12rem; color: var(--text); }
.wc-when { font-size: .82rem; color: var(--dim); }
.wc-body { margin: 0; color: var(--text); font-size: 1.04rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 66ch; }
.wc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.wc-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .9rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.wc-count.warriors { color: var(--accent); font-weight: 600; }
.wc-actions { display: flex; align-items: center; gap: var(--s3); }
.wc-pray.is-done { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-edge); }
.wc-pray:disabled { cursor: default; transform: none; }
.wc-report {
  background: none; border: 0; padding: 6px 2px; font: inherit; font-size: .84rem; color: var(--dim);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.wc-report:hover:not(:disabled) { color: var(--text); }
.wc-report:disabled { cursor: default; text-decoration: none; }
.wc-live { margin: 0; font-size: .88rem; color: var(--accent); }

.wall-dialog {
  border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--bg-2); color: var(--text);
  width: min(480px, calc(100vw - 32px));
}
.wall-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.wall-report { display: grid; gap: var(--s3); padding: var(--s5); }
.wall-report h3 { margin: 0; font-family: var(--serif); }
.wall-report .dim { color: var(--dim); margin: 0; font-size: .92rem; }
.wall-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.wall-reason { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.wall-reason input { width: 18px; height: 18px; accent-color: var(--accent-2); }
.wall-note { display: grid; gap: 6px; font-size: .9rem; color: var(--dim); }
.wall-note textarea { background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; }
.wall-msg { margin: 0; color: var(--accent); font-size: .9rem; }
.wall-msg:empty { display: none; }
.wall-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s2); }

.wall-cta { margin-top: var(--s7); padding: var(--s5); border: 1px solid var(--accent-edge); border-radius: var(--r); background: var(--accent-soft); display: grid; gap: var(--s3); justify-items: start; }
.wall-cta p { margin: 0; color: var(--text); }

.status-link { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s2); justify-items: start; }
.status-link p { margin: 0; }
.status-url { overflow-wrap: anywhere; color: var(--accent); font-size: .92rem; }
.st-card { margin-top: var(--s4); }
.st-stage { margin: 0; font-weight: 600; color: var(--accent); }
.st-counts { display: grid; gap: var(--s2); margin-top: var(--s2); }
.st-counts p { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.st-counts .counter-num { font-size: 1.8rem; }
.st-keep { margin-top: var(--s4); font-size: .9rem; }
.site-footer.slim { padding-top: 0; }
.site-footer.slim .legal-line a { color: var(--dim); }

/* --- sharing ------------------------------------------------------------ */
.wc-actions { flex-wrap: wrap; }
.wc-share { position: relative; }
.wc-share-btn {
  background: none; border: 1px solid var(--line); color: var(--text); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.wc-share-btn:hover, .wc-share-btn[aria-expanded="true"] { background: var(--ghost-bg, var(--accent-soft)); border-color: var(--accent-edge); }
.wc-share-menu {
  position: absolute; inset-inline-end: 0; bottom: calc(100% + 8px); z-index: 20; width: min(320px, 86vw);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: grid; gap: 10px;
}
.wc-share-h { margin: 0; font-weight: 600; font-size: .92rem; color: var(--text); }
.wc-share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wc-share-link {
  display: block; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: .9rem; text-align: center;
}
.wc-share-link:hover { background: var(--accent-soft); border-color: var(--accent-edge); }
.wc-share-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-share-note { margin: 0; font-size: .8rem; color: var(--dim); }
.wall-focus { margin-top: var(--s5); }
.wc-focus-h { margin: 0 0 var(--s2); font-weight: 600; color: var(--accent); }
.wc-focus { border: 2px solid var(--accent-edge); }
.st-share { margin-top: var(--s4); display: grid; gap: var(--s2); justify-items: start; }
.st-share p { margin: 0; }
.st-share .wc-share-menu { inset-inline-start: 0; inset-inline-end: auto; top: calc(100% + 8px); bottom: auto; }
@media (max-width: 560px) {
  .wc-share-menu { position: fixed; inset-inline: 12px; bottom: 12px; width: auto; }
  .st-share .wc-share-menu { top: auto; bottom: 12px; inset-inline: 12px; }
}

/* ==========================================================================
   Prayer Wall v2 — tiles, reactions, the full prayer view, comments
   ========================================================================== */

/* tiles */
.wc {
  position: relative; cursor: pointer; gap: var(--s3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wc:hover { transform: translateY(-2px); border-color: var(--accent-edge); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.wc:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wc-head { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.wc-who-wrap { display: grid; gap: 1px; min-width: 0; }
.wc-who { font-family: var(--serif); font-size: 1.1rem; color: var(--text); line-height: 1.2; }
.wc-when { font-size: .8rem; color: var(--dim); }
.wc-body { margin: 0; font-size: 1.05rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.wc-more { font-size: .88rem; font-weight: 600; color: var(--accent); margin-top: -4px; }
.wc-stats { margin: 0; font-size: .86rem; color: var(--dim); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.wc-live { margin: 0; font-size: .86rem; color: var(--accent); }

.av {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 1rem; color: var(--on-badge);
  background: linear-gradient(135deg, var(--badge-bg), var(--accent-2));
}
.av-anon { background: var(--accent-soft); color: var(--text); font-size: 1.05rem; box-shadow: inset 0 0 0 1px var(--accent-edge); }

/* reaction bar */
.rx-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.rx {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.rx:hover { background: var(--accent-soft); border-color: var(--accent-edge); }
.rx:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rx .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rx-emoji { font-size: 1.05rem; line-height: 1; }
.rx-num:empty { display: none; }
.rx-num { font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 600; }
.rx-pray { background: var(--btn-bg, var(--accent)); color: var(--btn-fg, #fff); border-color: transparent; }
.rx-pray:hover { background: var(--btn-hover-bg, var(--accent)); color: var(--btn-fg, #fff); }
.rx-pray.is-done, .rx-amen.is-done {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-edge); box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.rx.pop { animation: rx-pop .45s ease; }
@keyframes rx-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.rx-bar .wc-share { margin-inline-start: auto; }
.rx-bar .wc-share-menu { bottom: calc(100% + 8px); inset-inline-end: 0; }

/* the full prayer view */
html.pv-open, html.pv-open body { overflow: hidden; }
.pv {
  padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); color: var(--text);
  width: min(720px, calc(100vw - 32px)); max-height: min(90vh, 900px); overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.pv[open] { display: flex; animation: pv-in .22s ease-out; }
.pv::backdrop { background: rgba(4, 8, 24, .62); backdrop-filter: blur(3px); }
@keyframes pv-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.pv-sheet { display: flex; flex-direction: column; width: 100%; max-height: inherit; min-height: 0; }
.pv-top { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pv-top .wc-who-wrap { flex: 1; }
.pv-name { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.pv-close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.pv-close:hover { background: var(--accent-soft); }
.pv-close .ic, .pv-report .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pv-scroll { overflow-y: auto; padding: 20px; display: grid; gap: var(--s4); align-content: start; flex: 1; min-height: 0; overscroll-behavior: contain; }
.pv-body { margin: 0; font-size: 1.15rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-report {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0;
  font: inherit; font-size: .84rem; color: var(--dim); cursor: pointer;
}
.pv-report:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
.pv-report:disabled { cursor: default; }
.pv-comments { border-top: 1px solid var(--line); padding-top: var(--s4); display: grid; gap: var(--s3); }
.pv-h { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.pv-count { color: var(--dim); font-family: inherit; font-size: .95rem; }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pv-empty { margin: 0; color: var(--dim); }

.cm { display: flex; gap: 10px; align-items: flex-start; animation: pv-in .2s ease-out; }
.cm .av { width: 32px; height: 32px; font-size: .86rem; }
.cm-main { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; }
.cm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cm-name { font-size: .92rem; }
.cm-when { font-size: .76rem; color: var(--dim); }
.cm-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: .96rem; }
.cm-acts { display: flex; gap: 10px; margin-top: 4px; }
.cm-act { background: none; border: 0; padding: 0; font: inherit; font-size: .76rem; color: var(--dim); cursor: pointer; }
.cm-act:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
.cm.is-removed .cm-body { font-style: italic; color: var(--dim); }
.cm-badge {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px;
  padding: 2px 8px; border: 1px solid var(--line); color: var(--dim);
}
.cm-badge-warrior { background: var(--badge-bg); color: var(--on-badge); border-color: transparent; }
.cm-badge-moderator { border-color: var(--accent-edge); color: var(--accent); }
.cm-badge-admin, .cm-badge-superadmin { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--text); }

.pv-compose { border-top: 1px solid var(--line); padding: 14px 20px 18px; background: var(--bg-2); }
.pv-form { display: grid; gap: 8px; }
.pv-as { margin: 0; font-size: .86rem; color: var(--dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-as strong { color: var(--text); }
.pv-name-in, .pv-form textarea {
  width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: .96rem;
}
.pv-name-in { max-width: 260px; }
.pv-form textarea { resize: none; line-height: 1.45; min-height: 44px; }
.pv-name-in:focus, .pv-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.pv-row { display: flex; gap: 8px; align-items: flex-end; }
.pv-send { flex: none; min-height: 44px; }
.pv-msg { margin: 0; font-size: .86rem; color: var(--accent); }
.pv-msg:empty { display: none; }
.pv-msg.is-held { color: var(--text); background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; }
.pv-note { margin: 0; font-size: .8rem; color: var(--dim); }
.pv-note a { color: var(--accent); }
.pv-compose .crisis-urgent { margin: 4px 0 0; }
.pv .wc-share-menu { bottom: auto; top: calc(100% + 8px); }

@media (max-width: 640px) {
  .pv {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0;
  }
  .pv[open] { animation: pv-up .24s ease-out; }
  @keyframes pv-up { from { transform: translateY(24px); } to { transform: none; } }
  .pv-top { padding: 12px 14px; }
  .pv-scroll { padding: 16px 14px; }
  .pv-compose { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .pv-body { font-size: 1.08rem; }
  .rx { padding: 8px 12px; }
  .rx-comment .rx-label, .rx-share .rx-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wc, .rx { transition: none; }
  .wc:hover { transform: none; }
  .rx.pop, .pv[open], .cm { animation: none; }
}

/* share menu: everything stays inside the panel, whatever the browser offers */
.wc-share-menu { box-sizing: border-box; }
.wc-share-menu * { box-sizing: border-box; }
.wc-share-grid > * { min-width: 0; }
.wc-share-link { overflow-wrap: anywhere; }
.wc-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wc-share-row .btn { width: 100%; min-width: 0; white-space: normal; justify-content: center; text-align: center; padding-inline: 10px; }
.wc-share-row .btn:only-child { grid-column: 1 / -1; }

/* --- Urdu: Nastaliq ------------------------------------------------------
   Nastaliq hangs each word on a steep downward slope, so its descenders
   reach far below the baseline and its ascenders sit high. The default
   leading collides; every block of Urdu text needs roughly double.

   Only weight 400 is shipped. Nastaliq has no true bold, and a browser
   asked for 700 will smear the outline sideways to fake one, which wrecks
   the joins. So weight is pinned at 400 throughout and headings are told
   apart by size, which is how Urdu typography does it anyway. */
[lang="ur"] body,
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4,
[lang="ur"] p, [lang="ur"] li, [lang="ur"] a, [lang="ur"] label,
[lang="ur"] button, [lang="ur"] input, [lang="ur"] select, [lang="ur"] textarea,
[lang="ur"] blockquote, [lang="ur"] summary, [lang="ur"] figcaption,
[lang="ur"] th, [lang="ur"] td, [lang="ur"] legend, [lang="ur"] option {
  font-family: "Noto Nastaliq Urdu", var(--sans);
  font-weight: 400;
}

[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4,
[lang="ur"] .brand span, [lang="ur"] blockquote {
  font-family: "Noto Nastaliq Urdu", var(--serif);
  font-weight: 400;
}

[lang="ur"] body { line-height: 2; }
[lang="ur"] h1 { line-height: 1.75; }
[lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4 { line-height: 1.8; }
[lang="ur"] p, [lang="ur"] li, [lang="ur"] blockquote { line-height: 2.05; }
[lang="ur"] .btn, [lang="ur"] button { line-height: 1.9; }

/* strong and b would otherwise ask for a weight that does not exist */
[lang="ur"] strong, [lang="ur"] b, [lang="ur"] .btn, [lang="ur"] th { font-weight: 400; }

/* the brand name and the phone number are Latin and stay in Archivo —
   the unicode-range already sees to the glyphs; this keeps their metrics */
[lang="ur"] .brand span { font-family: var(--serif); font-weight: 600; }
[lang="ur"] .hero-call a { font-family: var(--sans); line-height: 1.7; }

/* inputs the reader types Urdu into need the leading too, and a little more
   room, or the descenders of the line above clip against the line below */
[lang="ur"] input, [lang="ur"] textarea, [lang="ur"] select {
  line-height: 2; padding-block: 12px;
}
[lang="ur"] textarea { line-height: 2.1; }

/* an underline drawn at the usual offset slices straight through Nastaliq's
   descenders, which swing well below the baseline; drop it clear */
[lang="ur"] a { text-underline-offset: 0.45em; text-decoration-thickness: 1px; }

/* --- Reading in your own language ------------------------------------------
   Under each name: a quiet note saying what the prayer was written in, and a
   small globe that opens the rolodex. The note is empty, and hidden, when the
   prayer is simply in the reader's own language. */
.wc-lang { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.wc-lang-txt { font-size: .78rem; color: var(--dim); font-style: italic; }
.wc-lang-txt:empty { display: none; }
.tr-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; min-height: 26px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font: inherit; font-size: .76rem; cursor: pointer; line-height: 1.2;
}
.tr-btn:hover { color: var(--text); border-color: var(--accent-edge); }
.tr-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; color: var(--text); }
.tr-btn .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.is-translating [data-body] { opacity: .55; transition: opacity .2s; }
.cm-tr { font-size: .72rem; color: var(--dim); font-style: italic; }

/* A prayer written in Urdu stays in Nastaliq wherever it is shown — on an
   English page too — because the paragraph carries its own language. */
.wc-body:lang(ur), .pv-body:lang(ur), .cm-body:lang(ur) {
  font-family: "Noto Nastaliq Urdu", var(--sans); font-weight: 400; line-height: 2.05;
}

/* The rolodex. Rows are 48px; the list is five rows tall with two rows of
   padding above and below, so the first and last languages can reach the
   middle. The gold band behind the middle row is the selection. */
.roll-dialog {
  border: 1px solid var(--line); border-radius: 18px; padding: 0;
  background: var(--bg-2); color: var(--text);
  width: min(360px, calc(100vw - 32px));
}
.roll-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.roll { display: grid; gap: var(--s4); padding: var(--s5); }
.roll h3 { margin: 0; font-family: var(--serif); font-size: 1.15rem; text-align: center; }
.roll-wheel { position: relative; height: 240px; }
.roll-band {
  position: absolute; inset-inline: 0; top: 96px; height: 48px; z-index: 0;
  border-radius: 12px; background: var(--accent-soft);
  border: 1px solid var(--accent-edge); pointer-events: none;
}
.roll-list {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 96px 0; height: 100%; box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  perspective: 520px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
  outline: none;
}
.roll-list::-webkit-scrollbar { display: none; }
.roll-list:focus-visible { box-shadow: 0 0 0 2px var(--focus); border-radius: 12px; }
.roll-opt {
  height: 48px; box-sizing: border-box; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; color: var(--dim);
  transform-origin: 50% 50%; will-change: transform;
}
.roll-main { font-size: 1.06rem; line-height: 1.2; }
.roll-sub { font-size: .7rem; line-height: 1.2; color: var(--dim); }
.roll-opt[aria-selected="true"] { color: var(--text); }
.roll-opt[aria-selected="true"] .roll-main { font-weight: 600; }
.roll-actions { display: flex; justify-content: space-between; gap: var(--s2); }
.roll-actions .btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .roll-opt { transform: none !important; }
  .roll-list { -webkit-mask-image: none; mask-image: none; }
}

/* --- The header on phones ---------------------------------------------------
   A <select> is always as wide as its LONGEST option ("Bahasa Indonesia"),
   whichever language is chosen, and the gold button's label runs long in
   some languages ("Humiling ng panalangin"). Together they pushed the header
   past the edge of most phones in most languages. On phones the language
   control becomes a round globe — the picker is still there, invisible, over
   it, so a tap opens the phone's own list, and it keeps its label for screen
   readers — and the gold button may use two short lines rather than spill. */
@media (max-width: 560px) {
  .lang {
    position: relative; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    justify-content: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim);
  }
  .lang svg { display: block; width: 19px; height: 19px; }
  .lang select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; font-size: 16px;               /* 16px stops iPhones zooming the page on tap */
    cursor: pointer;
  }
  .lang:focus-within { box-shadow: inset 0 0 0 2px var(--focus); color: var(--text); }
  .header-tools .btn-sm {
    white-space: normal; text-align: center; line-height: 1.15;
    max-width: 10.5em; padding: 7px 13px; min-height: 38px;
  }
  .header-tools { min-width: 0; }
}
@media (max-width: 359px) {
  .lang, .theme-toggle { width: 36px; height: 36px; }
  .header-tools .btn-sm { max-width: 9em; padding: 6px 10px; }
}

/* ==========================================================================
   Community, stage 1 — the bell, "Add to my list", answered prayer,
   testimonies, the claim prompt and the My Prayer List page.
   ========================================================================== */

/* the bell in the header (signed-in members only) */
.bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; color: var(--dim); text-decoration: none;
}
.bell:hover { color: var(--text); background: var(--ghost-bg); }
.bell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell-dot {
  position: absolute; top: 3px; inset-inline-end: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--btn-bg, var(--accent)); color: var(--btn-fg, #fff);
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg, #05081C);
}
@media (max-width: 560px) { .bell { width: 36px; height: 36px; } }

/* "Add to my list" */
.rx-follow.is-done {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-edge);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.rx-follow.is-done .ic { fill: currentColor; }
@media (max-width: 420px) {
  /* four buttons and a share on a small phone: the list button goes icon-only */
  .rx-follow .rx-label, .rx-comment .rx-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rx-follow, .rx-comment { padding-inline: 11px; }
}

/* the "Answered" ribbon */
.ans-ribbon {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--badge-bg); color: var(--on-badge); font-size: .76rem; font-weight: 800; letter-spacing: .02em;
  white-space: nowrap;
}
.ans-ribbon .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wc-head .ans-ribbon { margin-inline-start: auto; align-self: center; }
.pv-top .ans-ribbon { align-self: center; }

/* an answered-prayer testimony among the comments */
.cm-testimony .cm-main { border-color: var(--accent-edge); background: var(--accent-soft); }
.cm-kind {
  margin: 0 0 4px; display: flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.cm-kind .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cm-badge-requester { border-color: var(--accent-edge); color: var(--accent); }

/* the invitation to make an account */
.join { display: grid; gap: 12px; max-width: 420px; padding: 22px 24px; }
.join .wall-dialog-actions { justify-content: flex-end; }
.join h3 { margin: 0; font-family: var(--serif); font-size: 1.35rem; }
.join p { margin: 0; line-height: 1.55; }

/* after sending a request: "Want to know when people pray?" */
.claim-box {
  margin-top: var(--s4); padding: var(--s4); border-radius: var(--r);
  border: 1px solid var(--accent-edge); background: var(--accent-soft);
  display: grid; gap: 10px; justify-items: start;
}
.claim-box h4 { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.claim-box p { margin: 0; color: var(--text); line-height: 1.55; }

/* My Prayer List */
.list-page .dim { color: var(--dim); }
.list-page .small { font-size: .88rem; }
.list-page .card { gap: 10px; }
.list-page .link-btn {
  background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9rem;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.list-page .link-btn:hover { color: var(--text); }
.list-signin { max-width: 480px; margin: var(--s5) auto; text-align: center; align-items: center; }
.list-signin h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; }
.list-signin p { margin: 0; }
#list-body { display: grid; gap: var(--s6); margin-top: var(--s5); }
.list-sec { display: grid; gap: var(--s3); scroll-margin-top: 90px; }
.list-h { margin: 0; font-family: var(--serif); font-size: 1.4rem; }
.list-empty { display: grid; gap: 10px; justify-items: start; }
.list-empty p { margin: 0; }

.nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-link {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-decoration: none;
}
.nt-link:hover { border-color: var(--accent-edge); }
.nt.is-new .nt-link { border-color: var(--accent-edge); box-shadow: inset 3px 0 0 var(--accent); }
.nt-mark {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 1.05rem; color: var(--accent); font-weight: 800;
}
.nt-body { display: grid; gap: 2px; min-width: 0; }
.nt-title { font-size: .98rem; }
.nt-sub, .nt-when { font-size: .84rem; color: var(--dim); }
.nt-snip { font-size: .9rem; color: var(--dim); font-style: italic; overflow-wrap: anywhere; }

.mine-list, .fol-list { display: grid; gap: var(--s3); }
.mine-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mine-head .ans-ribbon { margin-inline-start: auto; }
.mine-when { font-size: .82rem; color: var(--dim); }
.fol-who { font-family: var(--serif); font-size: 1.05rem; }
.fol-tr { margin: 0; }
.mine-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.mine-stage, .mine-stats { margin: 0; }
.mine-stats { font-size: .9rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.ans-box { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ans-box > .btn { justify-self: start; }
.ans-mark { display: inline-flex; align-items: center; gap: 6px; }
.ans-mark .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ans-form { display: grid; gap: 10px; }
.ans-label { display: grid; gap: 6px; font-size: .92rem; font-weight: 600; }
.ans-label textarea {
  width: 100%; font: inherit; font-weight: 400; color: var(--text); background: var(--field, var(--surface));
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical;
}
.ans-row, .fol-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fol-pray.is-done { opacity: 1; cursor: default; }

/* Noto Sans — the Daily Word's typeface: one family drawn to match across every
 * script. Self-hosted; each file has a unicode-range, so a reader downloads only
 * the script their language uses. Chinese, Japanese and Korean use the device's
 * own font (their full Noto files are several megabytes). Licence: SIL OFL 1.1. */
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-cyrillic-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-devanagari-400-normal.woff2") format("woff2");
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-greek-400-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-cyrillic-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-devanagari-700-normal.woff2") format("woff2");
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-greek-700-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-vietnamese-700-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-bengali-bengali-400-normal.woff2") format("woff2");
  unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-bengali-bengali-700-normal.woff2") format("woff2");
  unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-gurmukhi-gurmukhi-400-normal.woff2") format("woff2");
  unicode-range: U+0951-0952,U+0964-0965,U+0A01-0A76,U+200C-200D,U+20B9,U+25CC,U+262C,U+A830-A839;
}
@font-face {
  font-family: "Noto Word"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-gurmukhi-gurmukhi-700-normal.woff2") format("woff2");
  unicode-range: U+0951-0952,U+0964-0965,U+0A01-0A76,U+200C-200D,U+20B9,U+25CC,U+262C,U+A830-A839;
}

/* ==========================================================================
   "Will You Answer the Call?" — the Daily Word.
   A band, not a card: it runs edge to edge under a sky that keeps the
   reader's own hour. The word sits on a page to the right like a letter,
   with an illuminated first capital; Amen is a wax seal. Reading text is
   Noto Sans ("Noto Word"), one family across every script.
   ========================================================================== */

.word {
  --word-font: "Noto Word", "Noto Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Microsoft YaHei", sans-serif;
  --gold-1: #FFE7A3; --gold-2: #E8B64C; --gold-3: #B07A17;
  /* sky, set by script from the reader's local hour (dawn / day / dusk / night) */
  --sky-top: #0B1640; --sky-mid: #1B2A66; --sky-low: #3C3A78; --sky-ink: #F4F1E8; --sky-dim: rgba(244, 241, 232, .74);
  --orb-x: 50%; --orb-y: 30%;
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--s7);
  padding: clamp(36px, 6vw, 80px) 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  color: var(--sky-ink);
  font-family: var(--word-font);
  transition: background .8s ease;
}
.word[data-sky="dawn"]  { --sky-top: #2B2D6E; --sky-mid: #B86B7A; --sky-low: #F4B76A; --sky-ink: #FFF8EC; --sky-dim: rgba(255, 248, 236, .84); }
.word[data-sky="day"]   { --sky-top: #2F6FD0; --sky-mid: #6FA8EA; --sky-low: #CFE4F8; --sky-ink: #FFFFFF; --sky-dim: rgba(255, 255, 255, .9); }
.word[data-sky="dusk"]  { --sky-top: #24205A; --sky-mid: #7A3F78; --sky-low: #E08A55; --sky-ink: #FFF4E6; --sky-dim: rgba(255, 244, 230, .84); }
.word[data-sky="night"] { --sky-top: #03061A; --sky-mid: #0A1240; --sky-low: #1C2465; --sky-ink: #F1EEE4; --sky-dim: rgba(241, 238, 228, .72); }
:root[data-theme-resolved="dark"] .word[data-sky="day"] { --sky-top: #0F2E66; --sky-mid: #1F4F96; --sky-low: #3B6FB3; }
:root[data-theme-resolved="dark"] .word[data-sky="dawn"] { --sky-top: #14163F; --sky-mid: #6B3D63; --sky-low: #B9774E; }

/* the sky's furniture */
.word-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.word-stars {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 17% 61%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 26% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 33% 42%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 9%, #fff, transparent 60%), radial-gradient(1px 1px at 52% 33%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 61% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 70% 48%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 11%, #fff, transparent 60%), radial-gradient(1px 1px at 86% 37%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 93% 21%, #fff, transparent 60%), radial-gradient(1px 1px at 12% 84%, #fff, transparent 60%),
    radial-gradient(1px 1px at 39% 76%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 66% 82%, #fff, transparent 60%),
    radial-gradient(1px 1px at 90% 70%, #fff, transparent 60%);
}
.word-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 21% 31%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 48% 57%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 27%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 57% 6%, #fff, transparent 60%);
  animation: word-twinkle 5s ease-in-out infinite alternate;
}
.word[data-sky="night"] .word-stars { opacity: .9; }
.word[data-sky="dusk"] .word-stars, .word[data-sky="dawn"] .word-stars { opacity: .25; }
@keyframes word-twinkle { from { opacity: .15; } to { opacity: 1; } }

.word-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.word-arc path { fill: none; stroke: var(--sky-ink); stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }

.word-rays {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg at var(--orb-x) var(--orb-y), rgba(255, 240, 200, .10) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask-image: radial-gradient(circle at var(--orb-x) var(--orb-y), #000 0%, transparent 55%);
          mask-image: radial-gradient(circle at var(--orb-x) var(--orb-y), #000 0%, transparent 55%);
  animation: word-rays 180s linear infinite; transform-origin: var(--orb-x) var(--orb-y);
}
.word[data-sky="night"] .word-rays { opacity: .35; }
@keyframes word-rays { to { transform: rotate(360deg); } }

.word-orb {
  position: absolute; left: var(--orb-x); top: var(--orb-y); width: clamp(48px, 6vw, 84px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFFBEA 0%, #FFE7A3 38%, rgba(255, 214, 120, .55) 60%, rgba(255, 200, 100, 0) 72%);
  box-shadow: 0 0 60px 24px rgba(255, 214, 130, .35), 0 0 160px 60px rgba(255, 190, 110, .18);
}
.word[data-sky="night"] .word-orb {
  width: clamp(36px, 4.4vw, 60px);
  background: radial-gradient(circle at 38% 40%, #FDFCF4 0%, #E9E6D8 55%, #CFCBBB 70%, rgba(200, 200, 190, 0) 72%);
  box-shadow: 0 0 40px 10px rgba(220, 225, 255, .22);
}
.word[data-sky="night"] .word-orb::after {   /* the crescent's shadow */
  content: ""; position: absolute; inset: 0; border-radius: 50%; transform: translate(28%, -12%);
  background: radial-gradient(circle, var(--sky-mid) 0 66%, transparent 70%);
}

/* layout */
.word-inner { position: relative; display: grid; gap: clamp(20px, 3vw, 48px); align-items: start; }
@media (min-width: 900px) { .word-inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr); } }

.word-side { display: grid; gap: 14px; align-content: start; padding-top: clamp(0px, 4vw, 56px); }
.word-eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-dim); }
.word-h {
  margin: 0; font-family: var(--word-font); font-weight: 700; color: var(--sky-ink);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance; text-shadow: 0 1px 24px rgba(0, 0, 0, .18);
}
.word-h .word-gold {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 10px rgba(255, 200, 90, .35));
}
.word[data-sky="day"] .word-h .word-gold { filter: drop-shadow(0 1px 1px rgba(80, 50, 0, .45)); }

.word-date { display: flex; align-items: flex-end; gap: 14px; margin: 6px 0 0; }
.word-num {
  font-family: var(--serif); font-weight: 600; font-size: clamp(3.6rem, 8vw, 5.6rem); line-height: .8;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: lining-nums; letter-spacing: -.02em;
}
.word-cal { display: grid; gap: 2px; padding-bottom: 6px; }
.word-month { font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.word-weekday { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-dim); }

.word-views { display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 0; font-size: .92rem; color: var(--sky-dim); }
.word-dot { width: 8px; height: 8px; border-radius: 50%; background: #7CE2A0; box-shadow: 0 0 0 0 rgba(124, 226, 160, .6); animation: word-pulse 2.4s ease-out infinite; }
@keyframes word-pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 226, 160, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(124, 226, 160, 0); } }

/* the page the word is written on */
.word-page {
  position: relative; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 253, 247, .97), rgba(253, 248, 236, .96));
  border-radius: 22px; padding: clamp(24px, 3.4vw, 46px) clamp(22px, 3.6vw, 52px) clamp(22px, 3vw, 36px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .6) inset;
  --page-text: #13203F; --page-dim: #5A6787; --page-line: rgba(176, 122, 23, .28);
  color: var(--page-text);
}
:root[data-theme-resolved="dark"] .word-page {
  background: linear-gradient(180deg, rgba(10, 16, 46, .92), rgba(7, 12, 36, .94));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(232, 182, 76, .28);
  --page-text: #F2EEE2; --page-dim: #AEB6D3; --page-line: rgba(232, 182, 76, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.word-page::before {      /* a hairline gold rule at the head of the page */
  content: ""; position: absolute; left: clamp(22px, 3.6vw, 52px); right: clamp(22px, 3.6vw, 52px); top: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--page-line), transparent);
}

.word-text { position: relative; }
.word-body {
  margin: 0; font-size: 1.14rem; line-height: 1.72; white-space: pre-line; overflow-wrap: anywhere;
  color: var(--page-text); max-width: 62ch;
}
@media (max-width: 899px) { .word-body { font-size: 1.06rem; } }
.word-body:lang(ur) { font-family: "Noto Nastaliq Urdu", var(--word-font); line-height: 2.2; }
.word-cap {
  float: left; font-family: var(--serif); font-weight: 600; font-size: 3.6em; line-height: .86;
  margin: .06em .1em -.04em -.02em; padding: .04em .04em 0;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
:root[data-theme-resolved="light"] .word-cap { filter: drop-shadow(0 1px 0 rgba(120, 80, 0, .25)); }

.word-text.is-folded::after {   /* the letter folds over: only the last half line fades */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.7em; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(253, 248, 236, .96));
}
:root[data-theme-resolved="dark"] .word-text.is-folded::after { background: linear-gradient(180deg, transparent, rgba(7, 12, 36, .94)); }

.word-ref {
  margin: 18px 0 0; display: flex; align-items: center; gap: 12px;
  font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-3);
}
:root[data-theme-resolved="dark"] .word-ref { color: var(--gold-2); }
.word-ref::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
@media (min-width: 1180px) {
  /* a study-Bible cross-reference, in the page's margin */
  .word-page.has-margin { padding-right: 190px; }
  .word-page.has-margin .word-ref {
    position: absolute; right: 34px; top: clamp(30px, 3.4vw, 50px); width: 130px; margin: 0;
    flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1.4; letter-spacing: .12em;
  }
}

.word-tr { margin: 14px 0 0; font-size: .86rem; color: var(--page-dim); }
.word-tr button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.word-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-weight: 700; font-size: 1rem; color: var(--gold-3); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 3px; transition: background-size .45s ease;
}
:root[data-theme-resolved="dark"] .word-more { color: var(--gold-1); }
.word-more:hover, .word-more:focus-visible { background-size: 100% 2px; }
.word-more .arr { transition: transform .3s ease; }
.word-more:hover .arr { transform: translateX(4px); }

/* the foot of the letter: seal, Amen, quiet actions, credit */
.word-foot {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--page-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.word-sealwrap { display: inline-flex; align-items: center; gap: 12px; }
.word-seal {
  position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: radial-gradient(circle at 36% 30%, #FFF1C4 0%, #F1C766 30%, #D49A2F 62%, #9C6612 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), inset 0 -4px 8px rgba(90, 50, 0, .35), 0 6px 16px -4px rgba(120, 70, 0, .55);
  display: grid; place-items: center; transition: transform .2s ease;
}
.word-seal::before {        /* the rim pressed into the wax */
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(110, 66, 0, .45), 0 0 0 1px rgba(255, 236, 180, .45);
}
.word-seal svg { width: 26px; height: 26px; fill: none; stroke: #6E4200; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(255, 236, 180, .7)); }
.word-seal:hover { transform: translateY(-1px) rotate(-4deg); }
.word-seal:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.word-seal[aria-pressed="true"] { box-shadow: inset 0 3px 8px rgba(90, 50, 0, .45), inset 0 -1px 2px rgba(255, 255, 255, .35), 0 2px 6px -2px rgba(120, 70, 0, .5); }
.word-seal.stamp { animation: word-stamp .5s cubic-bezier(.3, 1.6, .5, 1); }
.word-seal.stamp::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 214, 120, .9);
  animation: word-ring .9s ease-out forwards;
}
@keyframes word-stamp { 0% { transform: scale(1); } 35% { transform: scale(.84); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes word-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
.word-amen { display: grid; line-height: 1.2; }
.word-amen strong { font-size: 1.05rem; letter-spacing: .02em; }
.word-amen span { font-size: .85rem; color: var(--page-dim); font-variant-numeric: tabular-nums; }

.word-acts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-inline-start: auto; }
.word-act {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 999px;
  background: none; border: 0; font: inherit; font-size: .92rem; font-weight: 600; color: var(--page-text);
  cursor: pointer; text-decoration: none;
}
.word-act:hover { background: rgba(176, 122, 23, .1); }
.word-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.word-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.word-credit { margin: 16px 0 0; font-size: .8rem; color: var(--page-dim); letter-spacing: .02em; }
.word-credit strong { font-weight: 700; color: var(--page-text); }

/* the words arrive like ink drying (not for reduced motion; not before the band is seen) */
.word.is-ready .word-text.ink { animation: word-ink 1.6s ease-out both; }
@keyframes word-ink {
  from { opacity: 0; filter: blur(6px); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to   { opacity: 1; filter: blur(0); -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.word-text.ink {
  -webkit-mask-image: linear-gradient(180deg, #000 0 50%, transparent 75%); -webkit-mask-size: 100% 200%;
          mask-image: linear-gradient(180deg, #000 0 50%, transparent 75%);         mask-size: 100% 200%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.word:not(.is-ready) .word-text.ink { opacity: 0; }

/* sit with it */
.word-veil {
  position: fixed; inset: 0; z-index: 70; background: rgba(2, 4, 16, .86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .9s ease;
}
.word-veil.is-on { opacity: 1; }
.word.is-still { z-index: 71; }
.word.is-still .word-seal::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255, 220, 140, .85); box-shadow: 0 0 30px rgba(255, 210, 120, .5);
  animation: word-breathe 8s ease-in-out infinite;
}
@keyframes word-breathe { 0%, 100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.45); opacity: 1; } }
.word-stillnote { flex-basis: 100%; margin: 6px 0 0; font-size: 1rem; color: var(--page-text); }
.word-stillnote em { font-style: normal; color: var(--page-dim); font-size: .85rem; margin-inline-start: 6px; }
html.word-still-on { overflow: hidden; }

/* the word's own page */
.word-pagewrap { min-height: 60vh; }
.word.word-full { margin-top: 0; padding-top: clamp(28px, 5vw, 64px); }
.word-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.word-nav a { color: var(--sky-ink); font-weight: 700; text-decoration: none; padding: 8px 2px; }
.word-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.word-bring {
  max-width: 760px; margin: var(--s7) auto 0; text-align: center; display: grid; gap: 12px; justify-items: center;
  font-family: var(--word-font);
}
.word-bring h2 { margin: 0; font-family: var(--word-font); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.word-bring p { margin: 0; color: var(--dim); }
.word-bring .row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

@media (max-width: 899px) {
  .word { padding-top: 0; }
  .word-sky { bottom: auto; height: 100%; }
  .word-side { padding-top: 140px; }           /* room for the sun's arc above the heading */
  .word-acts { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .word-side { padding-top: 120px; }
  .word-page { border-radius: 18px; }
  .word-foot { gap: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .word-rays, .word-stars::after, .word-dot { animation: none !important; }
  .word.is-ready .word-text.ink, .word:not(.is-ready) .word-text.ink { animation: none; opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; }
  .word.is-still .word-seal::after { animation: none; transform: scale(1.2); opacity: .8; }
}

/* ==========================================================================
   Text size — the small "Aa" control in the bottom-right corner, every page.
   ========================================================================== */
.ts {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 4px; font-family: var(--sans);
}
.ts-toggle, .ts-btn {
  height: 44px; min-width: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45);
}
.ts-toggle { opacity: .72; transition: opacity .2s ease, transform .2s ease; letter-spacing: -.02em; }
.ts-toggle:hover, .ts-toggle:focus-visible, .ts.is-open .ts-toggle { opacity: 1; }
.ts-toggle small { font-size: 11px; }
.ts-toggle:focus-visible, .ts-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ts-pill {
  display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5);
}
.ts.is-open .ts-pill { display: flex; }
.ts-pill .ts-btn { border: 0; box-shadow: none; background: transparent; min-width: 42px; height: 38px; font-size: 15px; }
.ts-pill .ts-btn:hover:not(:disabled) { background: var(--accent-soft); }
.ts-pill .ts-btn:disabled { opacity: .35; cursor: default; }
.ts-now { min-width: 46px; text-align: center; font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
html.pv-open .ts, html.word-still-on .ts { display: none; }
@media print { .ts { display: none; } }

/* Larger text sizes on small screens: let buttons and cards wrap rather than push the page sideways. */
@media (max-width: 560px) {
  html[data-textsize="115"] .btn, html[data-textsize="130"] .btn, html[data-textsize="150"] .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; }
  html[data-textsize="130"] .actions .btn, html[data-textsize="150"] .actions .btn { flex: 1 1 100%; }
  html[data-textsize] .card, html[data-textsize] main > * { min-width: 0; }
  html[data-textsize] .seg button { white-space: normal; }
  html[data-textsize] .word-bring .row .btn { flex: 1 1 100%; }
}

/* right-to-left: arrows point the way the reader reads */
[dir="rtl"] .word-more .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .word-more:hover .arr { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .word-act svg.flip { transform: scaleX(-1); }

/* --- homepage: the way to the world map ---------------------------------- */
.map-teaser { padding-block: var(--s7); text-align: center; background: var(--band); border-block: 1px solid var(--line); }
.map-teaser-inner { display: grid; gap: var(--s3); justify-items: center; max-width: 720px; }
.map-teaser h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.map-teaser p { margin: 0; color: var(--dim); }

/* Daily Word video: our own still and gold play button until pressed */
.word-video { margin: var(--s5) 0 var(--s4); }
.word-video-play { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--text); font: inherit; font-weight: 700;
  background: radial-gradient(120% 120% at 50% 0%, rgba(232, 190, 92, .18), transparent 60%), var(--surface, rgba(255,255,255,.04)); }
.word-video-play:hover, .word-video-play:focus-visible { border-color: var(--accent); }
.word-video-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(180deg, #f3cf6f, #d9a93c); color: #1a1407; padding-inline-start: 4px; box-shadow: 0 8px 24px rgba(217, 169, 60, .35); }
.word-video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; display: block; }
.word-video-note { font-size: .82rem; color: var(--dim); margin: 8px 0 0; }

/* ==========================================================================
   Round 2 — the Peace Loop: "Need help now", the Blessing, encouragement
   help in comments, rules where people write, Give thanks, the simpler home.
   ========================================================================== */

/* "Need help now" — the same place on every page */
.help-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none;
}
.help-btn:hover { background: var(--ghost-bg); border-color: var(--accent-edge); }
.help-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.help-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 760px) {
  .help-btn { padding: 6px; width: 40px; justify-content: center; }
  .help-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) { .help-btn { width: 36px; min-height: 36px; } }
.help-dialog {
  border: 1px solid var(--line); border-radius: 18px; padding: 0; background: var(--bg-2); color: var(--text);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
}
.help-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.help-box { display: grid; gap: var(--s3); padding: var(--s5); }
.help-box h2 { margin: 0; font-family: var(--serif); font-size: 1.35rem; }
.help-crisis { margin: 0; padding: var(--s3) var(--s4); border-radius: 12px; background: var(--surface);
  border-inline-start: 3px solid var(--accent); line-height: 1.6; }
.help-pray { margin: 0; color: var(--dim); }
.help-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.help-close { justify-self: end; background: none; border: 0; color: var(--dim); font: inherit; font-size: .92rem;
  padding: 10px 6px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.help-close:hover { color: var(--text); }

/* the Blessing — a peaceful end to a visit */
.bless {
  max-width: 640px; margin: var(--s6) auto 0; padding: var(--s6) var(--s5); text-align: center;
  border: 1px solid var(--accent-edge); border-radius: 20px; background: var(--surface);
  display: grid; gap: var(--s3); justify-items: center;
}
.bless[hidden] { display: none; }
.bless-caught { margin: 0; font-size: .92rem; color: var(--dim); }
.bless-caught[hidden] { display: none; }
.bless-h { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--accent); }
.bless-quote { margin: 0; display: grid; gap: 6px; }
.bless-verse { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.65; max-width: 44ch; }
.bless-ref { margin: 0; font-size: .86rem; color: var(--dim); }
.bless-thanks { margin: 0; font-weight: 600; }
.bless-acts { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin: var(--s2) 0 0; }
.bless-acts .btn { min-height: 44px; }
.wall-done[hidden] { display: none; }

/* help to encourage well, under every comment box */
.pv-guide { margin: 0; font-size: .86rem; color: var(--dim); font-style: italic; }
.pv-starters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-starters-label { font-size: .8rem; color: var(--dim); margin-inline-end: 2px; }
.pv-chip {
  border: 1px solid var(--line); background: var(--ghost-bg); color: var(--text); border-radius: 999px;
  padding: 7px 12px; min-height: 36px; font: inherit; font-size: .84rem; line-height: 1.25; cursor: pointer; text-align: start;
}
.pv-chip:hover { border-color: var(--accent-edge); }
.pv-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pv-nudge { border: 1px solid var(--accent-edge); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; }
.pv-nudge p { margin: 0; font-size: .9rem; }
.pv-nudge-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* "How we pray together here", above the request form */
.form-rules { margin: 0 0 var(--s2); padding: var(--s3) var(--s4); border-radius: 12px; background: var(--surface);
  border-inline-start: 3px solid var(--accent-edge); }
.form-rules h3 { margin: 0 0 6px; font-size: .95rem; font-family: var(--sans); font-weight: 700; color: var(--text); }
.form-rules ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 4px; font-size: .9rem; color: var(--dim); }
.opt .opt-staff { font-style: normal; font-size: .82rem; color: var(--dim); border-inline-start: 2px solid var(--accent-edge); padding-inline-start: 8px; margin-top: 4px; }

/* the Daily Word: headings inside the word, and Give thanks */
.word-sub { clear: both; margin: 1.1em 0 .35em; font-family: var(--serif); font-size: 1.14rem; font-weight: 700; color: var(--page-text); letter-spacing: .01em; }
.word-text .word-sub:first-child { margin-top: 0; }
.word-body-more { margin-top: .6em; clear: both; }
.word-thanks {
  max-width: 640px; margin: var(--s7) auto 0; display: grid; gap: 10px; text-align: center; justify-items: center;
}
.word-thanks h2 { margin: 0; font-family: var(--word-font, var(--serif)); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.word-thanks p { margin: 0; color: var(--dim); }
.word-thanks textarea {
  width: 100%; min-height: 76px; resize: vertical; background: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; line-height: 1.5;
}
.word-thanks .thanks-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.word-thanks .thanks-saved { color: var(--accent); font-size: .9rem; }
.word-thanks .thanks-note { font-size: .8rem; }

/* the home page's quiet doorway to everything else */
.home-more { padding-block: var(--s7); text-align: center; }
.home-more .wrap { display: grid; gap: var(--s3); justify-items: center; }
.home-more h2 { margin: 0; }
.home-more p { margin: 0; color: var(--dim); max-width: 52ch; }
.home-more .actions { justify-content: center; }
.page-intro { padding-block: var(--s7) var(--s4); }
.page-intro h1 { margin: 0; }

/* ==========================================================================
   Communities
   ========================================================================== */
.comm-page { padding-block: var(--s6) calc(var(--s8) + 48px); }
.comm-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.comm-head h1 { margin: 0; }
.comm-lede, .comm-about { margin: 0; color: var(--dim); max-width: 66ch; line-height: 1.6; }
.comm-about { color: var(--text); }
.comm-back { display: inline-block; margin-bottom: var(--s3); color: var(--accent); text-decoration: none; font-weight: 600; padding: 8px 0; }
.comm-back:hover { text-decoration: underline; }
.comm-status, .comm-empty { color: var(--dim); }
.comm-note { margin: var(--s3) 0; padding: var(--s3) var(--s4); border-radius: 12px; background: var(--surface); border-inline-start: 3px solid var(--accent-edge); }

.comm-finder { margin: var(--s4) 0 var(--s6); padding: var(--s5); border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--s3); }
.comm-finder h2 { margin: 0; font-size: 1.3rem; }
.comm-finder .dim { margin: 0; color: var(--dim); }
.comm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.comm-chip { border: 1px solid var(--line); background: var(--ghost-bg); color: var(--text); border-radius: 999px; padding: 9px 14px; min-height: 44px;
  font: inherit; font-size: .92rem; cursor: pointer; text-align: start; }
.comm-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.comm-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.comm-finder-lead { margin: 0 0 8px; font-weight: 600; }

.comm-group { margin-top: var(--s6); }
.comm-group h2 { margin: 0 0 var(--s3); font-size: 1.25rem; }
.comm-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .comm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .comm-grid { grid-template-columns: repeat(3, 1fr); } .comm-grid-small { grid-template-columns: repeat(2, 1fr); } }
.comm-card { display: grid; gap: 8px; align-content: start; padding: var(--s4); border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none; min-height: 44px; }
.comm-card:hover, .comm-card:focus-visible { border-color: var(--accent-edge); }
.comm-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.comm-card.is-joined { border-color: var(--accent-edge); }
.comm-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.comm-card-h { margin: 0; font-family: var(--serif); font-size: 1.12rem; }
.comm-card-p { margin: 0; color: var(--dim); font-size: .93rem; line-height: 1.5; }
.comm-card-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .82rem; color: var(--dim); align-items: center; }
.comm-level { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.comm-level-sensitive { border-color: var(--accent-edge); }
.comm-pill { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--text); white-space: nowrap; }
.comm-signin { margin-top: var(--s6); padding: var(--s5); border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--s2); justify-items: start; }
.comm-signin h2 { margin: 0; font-size: 1.2rem; }
.comm-signin p { margin: 0; color: var(--dim); }

.comm-joinrow { margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.comm-joinmsg { color: var(--dim); font-size: .9rem; }
.comm-exit { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 40; padding: 10px 14px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 700; font-size: .88rem; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); min-height: 44px; display: inline-flex; align-items: center; }
.comm-exit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.comm-gentle { margin: 0 0 var(--s4); padding: var(--s4) var(--s5); border-radius: 16px; border: 1px solid var(--accent-edge); background: var(--surface); display: grid; gap: var(--s2); justify-items: start; }
.comm-gentle h2 { margin: 0; font-size: 1.1rem; }
.comm-gentle p { margin: 0; line-height: 1.6; }

.comm-cols { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .comm-cols { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.comm-main { display: grid; gap: var(--s4); min-width: 0; }
.comm-side { display: grid; gap: var(--s4); }
.comm-prompt, .comm-locked, .comm-compose, .comm-help, .comm-rules { padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.comm-prompt h2, .comm-locked h2, .comm-compose h2, .comm-help h2 { margin: 0 0 8px; font-size: 1.05rem; }
.comm-prompt { border-color: var(--accent-edge); }
.comm-prompt p { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; }
.comm-locked p { margin: 0; color: var(--dim); }
.comm-help p { margin: 0 0 8px; font-size: .9rem; line-height: 1.55; }
.comm-rules summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.comm-rules ul { margin: 8px 0 0; padding-inline-start: 1.1em; display: grid; gap: 8px; font-size: .9rem; line-height: 1.5; }
.comm-compose { display: grid; gap: var(--s3); }
.comm-form { display: grid; gap: 10px; }
.comm-form textarea { width: 100%; min-height: 110px; resize: vertical; background: var(--field); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; font: inherit; line-height: 1.5; }
.comm-anon { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.comm-anon input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-2); flex: none; }
.comm-anon span { display: grid; gap: 4px; }
.comm-anon .opt-staff { font-style: normal; font-size: .82rem; color: var(--dim); border-inline-start: 2px solid var(--accent-edge); padding-inline-start: 8px; }
.comm-actions { margin: 0; }
.comm-posts { display: grid; gap: var(--s3); }
.comm-post { padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.comm-post.is-waiting { border-style: dashed; }
.comm-post-top { margin: 0; font-size: .9rem; }
.comm-post-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.comm-waiting, .comm-tr { margin: 0; font-size: .82rem; color: var(--dim); }
.comm-post-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.comm-stat { font-size: .85rem; }
.comm-act { margin-inline-start: auto; background: none; border: 0; color: var(--dim); font: inherit; font-size: .85rem; cursor: pointer; padding: 10px 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.comm-act:hover { color: var(--text); }
.comm-more { display: grid; justify-items: center; }
.comm-more .bless { width: 100%; }

/* sensitive communities: quiet deterrents (they can't stop a screenshot) */
.comm-guard .comm-posts { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.comm-mark { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: flex; flex-wrap: wrap; gap: 64px 96px; padding: 40px;
  align-content: flex-start; overflow: hidden; opacity: .045; transform: rotate(-18deg) scale(1.3); color: var(--text); font-weight: 700; font-size: 1rem; }
.comm-blur .comm-posts, .comm-blur .comm-compose textarea { filter: blur(14px); }
@media (prefers-reduced-motion: no-preference) { .comm-posts { transition: filter .2s ease; } }
@media print { .comm-guard main, .comm-guard .comm-mark { display: none !important; } }

/* the home page's doorway to the Communities */
.home-comm { padding-block: var(--s7); }
.home-comm .wrap { display: grid; gap: var(--s3); justify-items: start; }
.home-comm h2 { margin: 0; }
.home-comm p { margin: 0; color: var(--dim); max-width: 60ch; }

/* --- the full footer: brand and mission, then three tidy columns ---------- */
.site-footer { padding-top: var(--s7); }
.footer-grid {
  display: grid; gap: var(--s6) var(--s5); padding-bottom: var(--s6);
  grid-template-columns: 1fr 1fr;
}
.footer-brand { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; max-width: 40ch; }
.footer-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.footer-logo img { width: 52px; height: auto; margin: 0; }
.footer-logo span { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.footer-brand .footer-tag { margin: 0; color: var(--accent); font-family: var(--serif); font-size: 1.05rem; }
.footer-brand .footer-mission { margin: 0 0 6px; color: var(--dim); font-size: .92rem; line-height: 1.55; font-family: var(--sans); }
.footer-col { display: grid; gap: 4px; align-content: start; }
.footer-col h2 {
  margin: 0 0 8px; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text);
}
.footer-col a {
  color: var(--dim); text-decoration: none; font-size: .94rem; line-height: 1.35; padding: 7px 0;
  width: fit-content; border-radius: 4px;
}
.footer-col a:hover { color: var(--accent); }
.footer-col a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.footer-legal { padding-inline-end: 72px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center; }
.footer-legal a { color: var(--dim); text-decoration: none; direction: ltr; unicode-bidi: isolate; }
.footer-legal a:hover { color: var(--accent); }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: start; }
  .footer-brand { grid-column: auto; }
}
@media (max-width: 340px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ---------- The Prayer Promise ------------------------------------------- */
.promise-note { margin: 0 0 var(--s3); padding: 10px 14px; border-inline-start: 3px solid var(--accent-2); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: .95rem; line-height: 1.5; }
[dir="rtl"] .promise-note { border-radius: 10px 0 0 10px; }
.form-thanks .promise-note { margin-top: var(--s3); }
.st-promise { margin-top: var(--s4); }
.pp { display: grid; gap: 10px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mine-card .pp { padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.pp-h { margin: 0; font-family: var(--serif); font-size: 1.2rem; }
h3.pp-h { font-size: 1.02rem; }
.pp-line { margin: 0; display: flex; gap: 8px; align-items: baseline; line-height: 1.5; }
.pp-line.is-kept { color: var(--accent); }
.pp-mark { font-weight: 700; }
.pp-sub { margin: 6px 0 0; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.pp-notes, .pp-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-note { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-edge); display: grid; gap: 4px; }
.pp-note-body { margin: 0; font-family: var(--serif); font-size: 1.04rem; line-height: 1.5; overflow-wrap: anywhere; }
.pp-upd { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pp-upd:last-child { border-bottom: 0; }
.pp-upd-kind { font-size: .92rem; }
.pp-upd-answered .pp-upd-kind { color: var(--accent); }
.pp-upd-body { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.5; }
.pp-when { font-size: .8rem; color: var(--dim); }
.pp-form { display: grid; gap: 10px; margin-top: 4px; }
.pp-label { display: grid; gap: 6px; font-size: .92rem; }
.pp-label textarea { width: 100%; }
.pp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-msg { margin: 0; font-size: .9rem; color: var(--accent); }
.pp-msg:empty { display: none; }
.pp-msg.is-err { color: #e0716e; }
.pp-msg.is-held { color: var(--text); background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; }
@media (max-width: 520px) {
  .pp-btns .btn { flex: 1 1 100%; }
}

/* ---------- Site-wide counters: prominent, collective --------------------- */
.counters-band { padding-block: var(--s6); background: var(--band); border-block: 1px solid var(--line); }
.counters-h { text-align: center; font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 4.5vw, 2rem); margin: 0 0 var(--s4); }
.counter-grid.counter-grid-4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.counter-grid-4 .counter {
  flex: 1 1 calc(50% - 12px); min-width: 0; padding: 20px 12px; justify-content: flex-start;
  border: 1px solid var(--accent-edge); border-radius: var(--r); background: var(--surface);
}
.counter-grid-4 .counter[hidden] { display: none; }
.counter-grid-4 .counter-num { font-size: clamp(1.9rem, 8vw, 3.2rem); overflow-wrap: anywhere; }
.counter-grid-4 .counter-label { font-size: .9rem; line-height: 1.35; color: var(--text); opacity: .85; }
@media (min-width: 820px) {
  .counter-grid-4 .counter { flex: 1 1 0; padding: 26px 14px; }
}
.wall-page .counters-card { margin-top: var(--s4); }

/* ---------- Profiles and friends ------------------------------------------ */
.people-page .wall-page-head { margin-bottom: var(--s4); }
.pp-card { display: grid; gap: 12px; padding: var(--s5); }
.pp-head { display: flex; gap: 16px; align-items: center; }
.pp-who { display: grid; gap: 4px; min-width: 0; }
.pp-name { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2rem); overflow-wrap: anywhere; }
.pp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-edge); color: var(--accent); font-family: var(--serif); font-size: 1.7rem; overflow: hidden; }
.pp-avatar.is-wallie img { width: 54px; height: auto; }
.pp-about { margin: 0; font-size: 1.05rem; line-height: 1.55; overflow-wrap: anywhere; }
.pp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.pp-msg { margin: 0; font-size: .9rem; color: var(--accent); }
.pp-msg:empty { display: none; }
.pp-actions { display: grid; gap: 8px; }
.pp-stepaway { justify-self: start; font-size: .88rem; }
.pp-confirm { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pp-confirm p { margin: 0; }
.pp-done { margin: 0; }
.pp-edit { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pp-edit-h { margin: 0; font-family: var(--serif); font-size: 1.2rem; }
.pp-edit .field { display: grid; gap: 6px; }
.pp-edit textarea { width: 100%; }
.pp-vis { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pp-vis legend { font-weight: 600; margin-bottom: 6px; }
.pp-radio, .pp-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pp-radio input, .pp-check input { margin-top: 4px; flex: none; width: 20px; height: 20px; }
.pp-radio > span { display: grid; gap: 2px; }
.pp-warn { display: grid; gap: 8px; padding: 12px; border: 1px solid #d0605e; border-radius: 12px; }
.pp-warn p { margin: 0; }
.pp-person { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.pp-person .pp-avatar { width: 44px; height: 44px; font-size: 1.2rem; }
.pp-person .pp-avatar.is-wallie img { width: 38px; }
.pp-person-name { font-weight: 600; overflow-wrap: anywhere; }
.pp-person:hover .pp-person-name { text-decoration: underline; }
.fr-wallie { padding: 14px 16px; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-item { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
@media (min-width: 560px) {
  .fr-item { grid-template-columns: 1fr auto; align-items: center; }
  .fr-item .pp-msg, .fr-item .pp-confirm { grid-column: 1 / -1; }
}
a.circ-person { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 3px; }
.acct-people { margin-bottom: 20px; }
.people-page .tag, .acct-people .tag { display: inline-block; font-size: .76rem; line-height: 1.2; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--accent-edge); color: var(--accent); background: var(--accent-soft); font-weight: 600; white-space: nowrap; }
.people-page .tag.flag-tag { border-color: #d0605e; color: #d0605e; background: transparent; }
.people-page .tag.tag-ok { color: var(--text); }
.people-page .list-sec { margin-top: var(--s5); }
.people-page .list-h { margin: 0 0 12px; }
.pp-who .pp-tags { margin-top: 2px; }
.people-page .link-btn { background: none; border: 0; padding: 4px 0; color: var(--dim); font: inherit; font-size: .88rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.people-page .link-btn:hover { color: var(--text); }

/* Profiles, stage 2: photos and personal walls */
.pp-avatar.has-photo { background: #fff; }
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-avatar.is-wallie img { width: 54px; height: auto; object-fit: contain; }
.pp-photo { display: grid; gap: 8px; }
.pp-label { font-weight: 600; }
.pp-photo-row { display: flex; gap: 16px; align-items: flex-start; }
.pp-photo-row .pp-avatar { width: 88px; height: 88px; font-size: 2.2rem; }
.pp-photo-side { display: grid; gap: 8px; min-width: 0; }
.pp-photo-side p { margin: 0; }
.pp-photo-note { font-size: .92rem; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); }
.pp-photo-note.is-warn { background: transparent; border: 1px solid #d0605e; }
.pp-pick { position: relative; cursor: pointer; }
.pp-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-wall { margin-top: var(--s5); display: grid; gap: 12px; }
.pp-wall > p { margin: 0; }
.pp-post { display: grid; gap: 8px; padding: 16px; }
.pp-post-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pp-post-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.pp-testimony { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--accent-2); background: var(--accent-soft); border-radius: 0 10px 10px 0; display: grid; gap: 4px; }
.pp-testimony p { margin: 0; font-family: var(--serif); font-size: 1.04rem; }
.pp-post .link-btn { justify-self: start; }

/* ---------- Analytics consent ------------------------------------------- */
.ga-banner { position: fixed; z-index: 55; left: max(12px, env(safe-area-inset-left)); right: max(76px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 560px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--accent-edge); background: var(--bg-2); color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); display: grid; gap: 10px; }
.ga-banner[hidden] { display: none; }
.ga-banner p { margin: 0; }
.ga-text { font-size: .94rem; line-height: 1.5; }
.ga-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ga-more { font-size: .88rem; color: var(--dim); }
.ga-choices { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 700px) { .ga-banner { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 160px)); } }
/* The quick-exit button in sensitive communities must never be covered. */
body:has(.comm-exit) .ga-banner { bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); }

/* The wall's order picker. */
.wall-sort { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s4); flex-wrap: wrap; }
.wall-sort label { color: var(--dim); font-size: .94rem; }
.wall-sort select { font: inherit; font-size: .96rem; color: var(--text); background: var(--field); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 36px 9px 12px; cursor: pointer; max-width: 100%; min-height: 44px; }
.wall-sort select:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; }
.wall-sort select option { background: var(--bg-2); color: var(--text); }

/* The Community Fund panel (About page), hidden until the owners switch it on. */
.fund-panel { width: 100%; max-width: 620px; margin: var(--s5) auto var(--s4); padding: var(--s5) var(--s4);
  border: 1px solid var(--accent-edge); border-radius: var(--r); background: var(--bg-2); text-align: center; }
.fund-panel[hidden], .fund-link[hidden] { display: none; }
.fund-panel h3 { margin: 0 0 var(--s4); }
.fund-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); margin-bottom: var(--s3); }
.fund-stat { display: grid; gap: 4px; margin: 0; max-width: none; }
.fund-num { font-family: var(--serif, inherit); font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--text); font-variant-numeric: tabular-nums; }
.fund-label { color: var(--dim); font-size: .94rem; }
.fund-panel .fineprint { margin: 6px auto 0; font-size: .86rem; }
.fund-link { margin: 0; font-size: .94rem; }

/* ---------- Church & ministry pages ---------- */
[data-cover="dawn"]    { background: linear-gradient(135deg, #f6d38a 0%, #e9877a 45%, #6b4fa0 100%); }
[data-cover="olive"]   { background: linear-gradient(135deg, #c9d29a 0%, #6f8a4a 55%, #2f4426 100%); }
[data-cover="wall"]    { background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 34px), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 68px), linear-gradient(160deg, #e4d2a8, #b99a62); }
[data-cover="harvest"] { background: linear-gradient(160deg, #f4c55b 0%, #d98a2b 50%, #7a3d1a 100%); }
[data-cover="river"]   { background: linear-gradient(160deg, #8fd3e8 0%, #3a8fb7 50%, #1d3d6b 100%); }
[data-cover="night"]   { background: radial-gradient(circle at 75% 30%, rgba(255,240,200,.85) 0 3px, transparent 4px), radial-gradient(circle at 25% 60%, rgba(255,255,255,.6) 0 1.5px, transparent 2.5px), radial-gradient(circle at 55% 75%, rgba(255,255,255,.5) 0 1px, transparent 2px), linear-gradient(180deg, #0b1236, #2a2160 70%, #4b2f6e); }
[data-cover="stained"] { background: conic-gradient(from 30deg at 50% 110%, #b3262b, #e3a21a, #2f7d4f, #1f4f9c, #6a2c8c, #b3262b); }
[data-cover="fields"]  { background: linear-gradient(180deg, #bfe3f5 0%, #e8f2c8 48%, #8fbf5a 52%, #4f7d2e 100%); }
.org-cover { height: 180px; border-radius: 18px 18px 0 0; }
.org-cover.is-small { height: 72px; border-radius: 16px 16px 0 0; }
@media (min-width: 720px) { .org-cover { height: 240px; } }
.org-avatar { flex: none; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 3px solid var(--bg);
  color: var(--accent); font-family: var(--serif); font-weight: 700; font-size: 1.2rem; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.org-verified { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--accent); color: var(--bg);
  font-size: .7em; font-family: var(--sans, inherit); vertical-align: middle; }
.org-hint { margin: 0; color: var(--dim); font-size: .86rem; line-height: 1.5; }
.org-bar { display: grid; gap: var(--s3); margin: 0 0 var(--s4); }
.org-bar input[type=search] { width: 100%; min-height: 48px; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font: inherit; }
.org-card { display: grid; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; }
.org-card:hover, .org-card:focus-visible { border-color: var(--accent-edge); }
.org-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.org-card-body { padding: 0 var(--s4) var(--s4); display: grid; gap: 10px; }
.org-card-top { display: flex; gap: 12px; align-items: flex-end; margin-top: -24px; }
.org-card-name { min-width: 0; padding-top: 28px; }
.org-card-name .comm-card-meta { margin-top: 2px; }
.org-clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.org-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.org-mine { margin: 0 0 var(--s5); padding: var(--s4); border-radius: 16px; border: 1px solid var(--accent-edge); background: var(--surface); }
.org-mine h2 { margin: 0 0 8px; font-size: 1.1rem; }
.org-mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.org-mine-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.org-mine-list a { color: var(--accent); font-weight: 700; }
.org-hero { border-radius: 18px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; margin-bottom: var(--s3); }
.org-id { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 0 var(--s4) var(--s4); }
.org-id .org-avatar { width: 108px; height: 108px; font-size: 2.2rem; margin-top: -54px; border-width: 4px; }
.org-name { flex: 1 1 240px; min-width: 0; }
.org-name h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); overflow-wrap: anywhere; }
.org-sub { margin: 4px 0 0; color: var(--dim); }
.org-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.org-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: var(--s3) 0 var(--s4); scrollbar-width: none; }
.org-tab { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dim); font: inherit; font-weight: 700; padding: 12px 14px; min-height: 48px; cursor: pointer; }
.org-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.org-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.org-panel { display: grid; gap: var(--s4); max-width: 760px; }
.org-block { padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.org-block h2 { margin: 0; font-size: 1.1rem; }
.org-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.org-facts { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 6px; }
.org-facts a { color: var(--accent); overflow-wrap: anywhere; }
.org-form { display: grid; gap: var(--s3); max-width: 720px; padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.org-form h2 { margin: var(--s2) 0 0; font-size: 1.1rem; }
.org-form h2:first-child { margin-top: 0; }
.org-row { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .org-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.org-creed, .org-covers { border: 1px solid var(--line); border-radius: 14px; padding: var(--s3) var(--s4); margin: 0; display: grid; gap: 10px; }
.org-creed legend, .org-covers legend { font-weight: 700; padding: 0 6px; }
.org-radio { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 32px; }
.org-radio input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-2); flex: none; }
.org-creed-text summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; }
.org-creed-text .creed-text { white-space: pre-line; margin: 8px 0 0; font-size: .92rem; }
.org-covers { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.org-covers legend { grid-column: 1 / -1; }
.org-swatch { height: 48px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.org-swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.org-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.org-team { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.org-team li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.org-report { padding: var(--s3) var(--s4); border-radius: 14px; border: 1px solid var(--line); display: grid; gap: 10px; }
.org-report summary { cursor: pointer; font-weight: 600; color: var(--dim); min-height: 32px; }
.org-claim-card { display: flex; gap: 12px; align-items: center; }
.org-apply-cta { margin-top: var(--s6); }