/* ==========================================================================
   say.church — shared styles
   Cinematic, classical, warm. Dark palette · antique gold · ivory.
   ========================================================================== */

:root {
  --ink: #0b0a09;
  --ink-2: #13100d;
  --umber: #1a130e;
  --navy: #0d1522;
  --navy-2: #111c2d;
  --gold: #c9a45c;
  --gold-hi: #e0c48a;
  --gold-deep: #74561c;          /* gold for text on ivory (AA) */
  --ivory: #f3ead8;
  --ivory-2: #e9dec7;
  --ivory-soft: #d6cbb6;         /* secondary text on dark */
  --ivory-mute: #a99f8d;         /* tertiary text on dark (AA ≥ 4.5 on ink) */
  --line: rgba(201, 164, 92, 0.35);

  --serif: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

  --pad: clamp(24px, 5vw, 72px);
  --maxw: 1320px;
  --section: clamp(72px, 8vw, 120px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

@media (min-width: 900px) {
  body { font-size: 20px; }
}

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

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

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

.nowrap { white-space: nowrap; }

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

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

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 64px;
  padding: 16px 40px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  box-shadow: 0 10px 40px -12px rgba(201, 164, 92, 0.55);
}
.btn:hover {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  box-shadow: 0 16px 48px -12px rgba(224, 196, 138, 0.6);
}
.btn .arrow { transition: transform 0.35s var(--ease); font-family: var(--sans); font-weight: 400; }
.btn:hover .arrow { transform: translateX(4px); }

.text-link {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.text-link:hover { color: var(--gold-hi); border-color: var(--gold-hi); }

/* ---------- Site header / nav ---------- */

.site-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  padding-block: clamp(20px, 3vw, 36px);
}
.wordmark {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ivory);
  text-decoration: none;
}
.wordmark span { color: var(--gold); }
.site-nav ul {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  margin: 0; padding: 0;
  list-style: none;
}
.site-nav ul a {
  font-size: 17px;
  letter-spacing: 0.12em;
  color: var(--ivory-soft);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.site-nav ul a:hover { color: var(--ivory); border-color: var(--gold); }

/* ---------- Painting credit ---------- */

.credit {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ivory-mute);
}

/* ==========================================================================
   HERO (homepage)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 35%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 10, 9, 0.55) 0%, rgba(11, 10, 9, 0) 22%),
    linear-gradient(0deg, rgba(11, 10, 9, 0.97) 0%, rgba(11, 10, 9, 0.88) 32%, rgba(11, 10, 9, 0.25) 62%, rgba(11, 10, 9, 0) 80%);
}

.hero__content {
  width: 100%;
  padding-top: 140px;
  padding-bottom: clamp(72px, 10vh, 120px);
}

.hero__title {
  font-size: clamp(38px, 10.4vw, 64px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.03em;
  color: var(--ivory);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.hero__verse {
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 30em;
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.95;
  color: var(--ivory-2);
}
.verse-phrase { display: block; white-space: nowrap; }

.hero__verse cite {
  display: inline-block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.86em;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.hero__actions { margin-top: clamp(36px, 4vw, 52px); }

.hero__credit {
  position: absolute;
  right: var(--pad);
  bottom: 24px;
  max-width: none;
  white-space: nowrap;
  letter-spacing: 0;
  text-align: right;
}

@media (max-width: 899px) {
  .hero__credit {
    position: static;
    margin-top: 40px;
    text-align: left;
  }
  .hero__content { padding-bottom: 32px; }
}

@media (min-width: 900px) {
  /* Painting sits to the right and dissolves into the dark — like a gallery wall lit from one side */
  .hero__media {
    left: 28%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
    mask-image: linear-gradient(90deg, transparent, #000 34%);
  }
  .hero__media img { object-position: 60% 35%; }
  .hero__media::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(11, 10, 9, 0.82) 16%, rgba(11, 10, 9, 0.25) 42%, rgba(11, 10, 9, 0) 62%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0) 34%),
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%);
  }
  .hero__content {
    padding-bottom: clamp(96px, 14vh, 150px);
  }
  .hero__title { font-size: clamp(60px, 6.2vw, 100px); }
}

/* Hero entrance — CSS only, so content is always rendered without JS */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: settle 2.4s var(--ease) both; }
  .rise { animation: rise 1.3s var(--ease) both; }
  .rise--2 { animation-delay: 0.15s; }
  .rise--3 { animation-delay: 0.3s; }
  .rise--4 { animation-delay: 0.45s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   FIGURES gallery
   ========================================================================== */

.figures {
  padding-block: var(--section) 32px;
  background: var(--ink);
}

.figures__head {
  display: grid;
  gap: 28px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
@media (min-width: 1000px) {
  .figures__head { grid-template-columns: 7fr 5fr; align-items: end; gap: 64px; }
}
.figures__title {
  margin-top: 24px;
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 700;
  line-height: 1.12;
}
.figures__intro {
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ivory-soft);
  max-width: 24em;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4 / 5;
  scroll-margin-top: 32px;
  isolation: isolate;
}
.tile--paul { aspect-ratio: 3 / 4; }

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.4s var(--ease), filter 0.8s;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(11, 10, 9, 0.96) 0%, rgba(11, 10, 9, 0.78) 26%, rgba(11, 10, 9, 0.12) 58%, rgba(11, 10, 9, 0) 72%);
  pointer-events: none;
}

/* B&W engravings: warm, sepia-toned so they sit in the palette */
.tile--engraving img {
  height: 84%;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
  filter: grayscale(1) sepia(0.6) saturate(1.1) contrast(1.3) brightness(0.6);
}
/* Elijah's open sky reads paler than the other plates — pull it down to match */
#elijah img { filter: grayscale(1) sepia(0.6) saturate(1.1) contrast(1.35) brightness(0.52); }
.tile--engraving::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 35%, rgba(11, 10, 9, 0) 40%, rgba(11, 10, 9, 0.55) 100%),
    linear-gradient(160deg, rgba(150, 96, 40, 0.45), rgba(30, 17, 8, 0.72));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.tile__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 2.4vw, 36px);
  color: var(--ivory);
  text-decoration: none;
}

.tile__name {
  font-size: clamp(34px, 2.8vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.tile__ref {
  order: -1;
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--gold-hi);
}
.tile__note {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ivory-2);
}
.tile__soon {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  padding: 5px 14px;
  border: 1px solid rgba(243, 234, 216, 0.38);
  border-radius: 999px;
  background: rgba(11, 10, 9, 0.55);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--ivory-2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Live tiles — Abraham, Hannah */
.tile--live .tile__name { font-size: clamp(64px, 7vw, 116px); line-height: 1.05; }
.tile--live .tile__ref { font-size: 16px; }
.tile--live .tile__note { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); }
.tile__open {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-top: 26px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.14em;
  transition: background-color 0.35s;
}
.tile__open .arrow { font-family: var(--sans); font-weight: 400; transition: transform 0.35s var(--ease); }
.tile--live .tile__live {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  left: clamp(24px, 2.4vw, 36px);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.28em;
  color: var(--gold-hi);
}
.tile--live a:hover img,
.tile--live a:focus-visible img { transform: scale(1.04); }
.tile--live a:hover .tile__open { background: var(--gold-hi); }
.tile--live a:hover .tile__open .arrow { transform: translateX(4px); }
.tile--live a:focus-visible { outline-offset: -6px; }

/* Arriving from a mood pill */
.tile:target { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Per-painting framing (mobile 4:5 defaults) */
#paul img       { object-position: 62% 30%; }
#lords-prayer img { object-position: 38% 40%; }
#david-51 img     { object-position: 50% 40%; }
#david-23 img     { object-position: 42% 30%; }
#solomon img      { object-position: 100% 100%; }
#jabez img        { object-position: 50% 55%; }
#elijah img       { object-position: 50% 50%; }
#daniel img       { object-position: 50% 28%; }
#jonah img        { object-position: 70% 50%; }
#gethsemane img   { object-position: 50% 55%; }
#nehemiah img     { object-position: 50% 50%; }

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(240px, 34vw, 300px);
    grid-auto-flow: dense;
  }
  .tile, .tile--paul { aspect-ratio: auto; grid-row: span 2; }
  .tile--paul { grid-column: span 2; }
  .tile--wide { grid-column: span 2; grid-row: span 1; }
  .tile--feature { grid-column: span 2; }
}
@media (min-width: 640px) and (max-width: 999px) {
  /* keep the 2-column grid free of holes */
  #gethsemane { grid-column: span 1; }
}

@media (min-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(240px, 23vw, 320px);
    gap: 14px;
  }
  .tile--paul { grid-column: span 3; }
  .tile--wide { grid-column: span 2; grid-row: span 1; }
  .tile--feature { grid-column: span 2; grid-row: span 2; }
  #paul img  { object-position: 62% 30%; }
  #solomon img { object-position: 100% 100%; }
  .tile--live .tile__inner { padding: clamp(32px, 3.6vw, 56px); }
}

/* ==========================================================================
   QUOTE BAND
   ========================================================================== */

.band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(400px, 56svh, 620px);
  padding-block: 64px 88px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.band__media { position: absolute; inset: 0; z-index: -1; }
.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 35%;
}
.band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(11, 10, 9, 0.55), rgba(11, 10, 9, 0.85) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 10, 9, 0) 22%, rgba(11, 10, 9, 0) 78%, var(--ink) 100%);
}
.band__line {
  font-family: var(--serif);
  font-size: clamp(36px, 5.6vw, 84px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--ivory);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}
.band__rule {
  width: 72px;
  height: 1px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  background: var(--gold);
}
.band__credit {
  position: absolute;
  right: var(--pad);
  bottom: 22px;
  text-align: right;
}
@media (max-width: 639px) {
  .band__credit { left: var(--pad); text-align: center; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  padding-block: clamp(72px, 8vw, 112px) 48px;
  background: var(--ink);
  border-top: 1px solid rgba(201, 164, 92, 0.18);
}
.site-footer__top {
  display: grid;
  gap: 32px;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(243, 234, 216, 0.1);
}
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr auto; align-items: end; }
}
.site-footer .wordmark { font-size: clamp(30px, 3vw, 40px); }
.site-footer__line {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ivory-soft);
}
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin: 0; padding: 0;
  list-style: none;
}
.site-footer__nav a {
  font-size: 18px;
  color: var(--ivory-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.site-footer__nav a:hover { color: var(--ivory); border-color: var(--gold); }
.site-footer__credits {
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ivory-mute);
}
.site-footer__credits a {
  color: var(--gold);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.site-footer__credits a:hover { color: var(--gold-hi); }

/* ==========================================================================
   HANNAH page
   ========================================================================== */

.p-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.p-hero__media { position: absolute; inset: 0; z-index: -1; }
.p-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 60%;
}
.p-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 10, 9, 0.7) 0%, rgba(11, 10, 9, 0) 26%),
    linear-gradient(0deg, rgba(11, 10, 9, 0.97) 0%, rgba(11, 10, 9, 0.82) 30%, rgba(11, 10, 9, 0.1) 60%, rgba(11, 10, 9, 0) 75%);
}

.breadcrumb {
  padding-top: clamp(96px, 12vh, 128px);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ivory-soft);
}
.breadcrumb li + li::before {
  content: "/";
  margin-inline: 14px;
  color: var(--gold);
  opacity: 0.8;
}
.breadcrumb a {
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 234, 216, 0.3);
  transition: color 0.3s, border-color 0.3s;
}
.breadcrumb a:hover { color: var(--ivory); border-color: var(--gold); }
.breadcrumb [aria-current] { color: var(--ivory); }

.p-hero__content {
  margin-top: auto;
  padding-top: 48px;
  padding-bottom: clamp(40px, 8vh, 96px);
}
.p-hero__name {
  margin-top: 8px;
  font-size: clamp(96px, 14vw, 200px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ivory);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}
.p-hero__sub {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ivory-2);
}
.p-hero__credit { margin-top: clamp(28px, 4vh, 48px); max-width: 26em; }

@media (min-width: 900px) {
  .p-hero__media img { object-position: 30% 50%; }
  /* Hannah and the child stay lit on the left; Eli's busy robe drops into calm darkness behind the title */
  .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.7) 0%, rgba(11, 10, 9, 0) 22%),
      linear-gradient(90deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0) 45%, rgba(11, 10, 9, 0.6) 53%, rgba(11, 10, 9, 0.9) 61%, rgba(11, 10, 9, 0.96) 74%, rgba(11, 10, 9, 0.97) 100%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.8) 0%, rgba(11, 10, 9, 0) 30%);
  }
  .p-hero__content {
    display: flex;
    justify-content: flex-end;
  }
  .p-hero__block { width: min(46%, 640px); }
  .p-hero__credit { max-width: none; }
}

/* Section scaffolding */
.chapter {
  padding-block: var(--section);
}
.chapter__num {
  display: flex;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.scripture .chapter__num { justify-content: center; }
.chapter__title {
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 700;
  line-height: 1.18;
}

/* 一 · Story — ivory paper */
.story {
  background:
    radial-gradient(90% 70% at 10% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%),
    var(--ivory);
  color: #1d1712;
}
.story .eyebrow { color: var(--gold-deep); }
.story__grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
}
@media (min-width: 1000px) {
  .story__grid { grid-template-columns: 5fr 7fr; align-items: start; }
}
.story__text {
  max-width: 34em;
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 2.05;
  color: #2a221b;
}
.story__text p + p { margin-top: 1em; }
.story__text::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  font-size: 3.4em;
  line-height: 1;
  font-weight: 700;
  color: var(--gold-deep);
}

/* 二 · Scripture */
.scripture {
  position: relative;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(201, 164, 92, 0.1), rgba(201, 164, 92, 0) 65%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  text-align: center;
}
.scripture .chapter__title { font-size: clamp(30px, 3.4vw, 48px); }
.scripture__quote {
  position: relative;
  max-width: 24em;
  margin: clamp(64px, 7vw, 96px) auto 0;
  padding: 0;
  font-size: clamp(26px, 3vw, 44px);
}
/* Brackets live in the blockquote's padding — never on top of the text */
.scripture__quote blockquote {
  position: relative;
  margin: 0;
  padding: clamp(36px, 3.6vw, 52px) clamp(48px, 6vw, 84px);
}
.scripture__ending { white-space: nowrap; }
.scripture__quote blockquote p {
  font-family: var(--serif);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--ivory);
  text-align: left;
  text-align-last: left;
}
/* Corner brackets drawn as rules so their position is exact, independent of font metrics */
.qmark {
  position: absolute;
  width: clamp(20px, 2.4vw, 30px);
  height: clamp(44px, 5.4vw, 72px);
  border: 0 solid var(--gold);
  font-size: 0;
  color: transparent;
  opacity: 0.9;
  pointer-events: none;
}
.qmark--open { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.qmark--close { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
@media (max-width: 699px) {
  .scripture__quote blockquote { padding: 32px 30px; }
  .scripture__quote blockquote p { text-align: left; text-align-last: left; }
}
.scripture__cite {
  display: block;
  margin-top: 28px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* 三 · Prayer */
.prayer {
  background: var(--umber);
  background: linear-gradient(180deg, var(--umber) 0%, var(--ink) 100%);
}
.prayer__grid {
  display: grid;
  gap: clamp(40px, 5vw, 88px);
}
@media (min-width: 1000px) {
  .prayer__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .prayer__figure { position: sticky; top: 48px; }
}
.prayer__figure { margin: 0; }
.detail {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
/* Explicit 4:5 crop of the 2000×1634 painting: x 360–1060, y 400–1275 —
   Hannah's face in the upper third, Samuel's face just below centre. */
.detail img {
  position: absolute;
  top: -45.71%;          /* 400 / 875 */
  left: -51.43%;         /* 360 / 700 */
  width: 285.71%;        /* 2000 / 700 */
  max-width: none;
  height: auto;
}
.detail::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.35), inset 0 0 120px rgba(0, 0, 0, 0.55);
}
.prayer__figure figcaption { margin-top: 16px; }

.prayer__text {
  margin-top: clamp(32px, 3vw, 44px);
  padding-top: clamp(32px, 3vw, 44px);
  border-top: 1px solid var(--gold);
  max-width: 30em;
}
.prayer__text p {
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 2.15;
  letter-spacing: 0.03em;
  color: var(--ivory);
}
.prayer__text p + p { margin-top: 0.9em; }
.prayer__amen {
  color: var(--gold-hi) !important;
  font-weight: 600;
  letter-spacing: 0.3em !important;
}
.prayer__lead {
  margin-top: 20px;
  font-size: clamp(18px, 1.5vw, 20px);
  color: var(--ivory-mute);
}

@media (max-width: 999px) {
  .prayer__figure { max-width: 520px; }
}

/* CTA */
.cta {
  padding-block: var(--section) 48px;
  background: var(--ink);
  text-align: center;
  border-top: 1px solid rgba(201, 164, 92, 0.16);
}
.cta__title {
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.25;
}
.cta__sub {
  margin: 24px auto 0;
  max-width: 24em;
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ivory-soft);
}
.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: clamp(40px, 4vw, 56px);
}

/* Art-directed mobile covers: the painting resolves before the reading begins. */
@media (max-width: 899px) {
  .hero { min-height: max(780px, 100svh); }
  .hero__media { bottom: auto; height: clamp(430px, 58svh, 640px); }
  .hero__media img { object-position: 55% 48%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, .65), transparent 24%),
      linear-gradient(0deg, var(--ink), rgba(11, 10, 9, .9) 12%, rgba(11, 10, 9, .25) 32%, transparent 52%);
  }
  .hero__content { padding-top: clamp(350px, 46svh, 520px); padding-bottom: 28px; }
  .hero__title { font-size: clamp(32px, 9.2vw, 64px); }
  .hero__verse { font-size: clamp(16px, 4.35vw, 22px); margin-top: 24px; line-height: 1.95; }
  .hero__verse cite { margin-top: 12px; }
  .hero__actions { margin-top: 26px; }
  .hero__credit { margin-top: 28px; font-size: clamp(9px, 2.7vw, 13px); }
  .p-hero { min-height: max(760px, 100svh); }
  .p-hero__media { bottom: auto; height: clamp(490px, 68svh, 720px); }
  .p-hero__media img { object-position: 33% 50%; }
  .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, .8), rgba(11, 10, 9, .1) 30%, transparent 45%),
      linear-gradient(0deg, var(--ink), rgba(11, 10, 9, .6) 14%, transparent 35%);
  }
  .p-hero__content { padding-top: clamp(320px, 41svh, 460px); padding-bottom: 32px; }
  .p-hero__name { font-size: clamp(80px, 23vw, 144px); }
  .p-hero__credit { max-width: 36em; font-size: 11px; }
}

/* Preserve the sleeping king and the descending light above the tile caption. */
#solomon::after {
  background: linear-gradient(90deg, rgba(11, 10, 9, .86), rgba(11, 10, 9, .5) 40%, transparent 75%),
    linear-gradient(0deg, rgba(11, 10, 9, .5), transparent 45%);
}
@media (max-width: 639px) {
  .site-nav__inner { gap: 12px; }
  .site-nav ul { gap: 16px; }
  .site-nav ul a { font-size: 13px; letter-spacing: .04em; display: inline-flex; align-items: center; min-height: 44px; }
  .wordmark { font-size: 21px; }
  .breadcrumb { padding-top: 94px; }
  .breadcrumb ol { font-size: 13px; }
  .breadcrumb li + li::before { margin-inline: 10px; }
  .scripture__quote { font-size: 22px; }
  .scripture__cite { font-size: 14px; letter-spacing: .08em; }
  .band__credit { font-size: 10px; letter-spacing: 0; }
  .band__line { letter-spacing: .03em; }
  .tile__name { font-size: 32px; }
  .tile--paul { aspect-ratio: 3 / 5; }
  #paul img { height: 74%; object-position: 62% 30%; }
  #solomon { aspect-ratio: 4 / 5; }
  #solomon img { height: 76%; }
  #paul img, #solomon img {
    -webkit-mask-image: linear-gradient(#000 78%, transparent);
    mask-image: linear-gradient(#000 78%, transparent);
  }
  #solomon::after { background: linear-gradient(0deg, var(--ink) 22%, rgba(11, 10, 9, .5) 34%, transparent 52%); }
}
@media (max-width: 359px) {
  :root { --pad: 20px; }
  .site-nav ul { gap: 12px; }
  .wordmark { font-size: 18px; }
  .site-nav ul a { font-size: 12px; }
  .hero__verse { font-size: 15px; letter-spacing: 0; }
}

/* ==========================================================================
   ABRAHAM — Tiepolo, Abraham and the Three Angels (colour oil)
   ========================================================================== */

/* 1280×720 illustration: dark sky and plain on the left, Abraham kneeling at ~44–66% x,
   the three angels at ~67–92% x. Every crop keeps the span 44–92% in frame. */
.p-hero--abraham .p-hero__media img,
#abraham img { filter: brightness(0.95) contrast(1.04); }

.p-hero--abraham .p-hero__name {
  font-size: clamp(80px, 8vw, 120px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media (min-width: 900px) {
  /* Scene fills the right ~88%; its dark left edge dissolves into the page behind the title */
  .p-hero--abraham .p-hero__media {
    left: max(12%, 50% - 560px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
    mask-image: linear-gradient(90deg, transparent, #000 24%);
  }
  .p-hero--abraham .p-hero__media img { object-position: 80% 40%; }
  .p-hero--abraham .p-hero__media::after {
    background:
      linear-gradient(90deg, rgba(11, 10, 9, 0.75) 0%, rgba(11, 10, 9, 0.35) 22%, rgba(11, 10, 9, 0) 40%),
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 14%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0) 24%);
  }
  .p-hero--abraham .p-hero__content { justify-content: flex-start; }
  .p-hero--abraham .p-hero__block { width: auto; }
}
@media (max-width: 899px) {
  /* Landscape scene sits under the nav at a height that keeps Abraham and all three angels in */
  .p-hero--abraham .p-hero__media {
    top: 64px;
    height: min(112vw, 62svh);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%);
    mask-image: linear-gradient(180deg, transparent, #000 8%);
  }
  .p-hero--abraham .p-hero__media img { object-position: 87% 50%; }
  .p-hero--abraham .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6), rgba(11, 10, 9, 0) 14%),
      linear-gradient(0deg, var(--ink), rgba(11, 10, 9, 0.6) 16%, rgba(11, 10, 9, 0) 34%);
  }
  .p-hero--abraham { min-height: 0; }
  .p-hero--abraham .p-hero__content { padding-top: calc(min(112vw, 62svh) - 110px); }
  .p-hero--abraham .p-hero__name { font-size: min(19.5vw, 150px); letter-spacing: 0.04em; }
}

/* Scripture: a long plea, a descending count, then the answer */
.scripture__quote--long { max-width: 25em; font-size: clamp(23px, 2.5vw, 38px); }
.scripture__quote--climax {
  max-width: 31em;
  margin-top: clamp(40px, 5vw, 64px);
  font-size: clamp(20px, 2vw, 30px);
}
.scripture__answer { color: var(--gold-hi); }
.scripture__quote--climax .scripture__plea,
.scripture__quote--climax .scripture__answer {
  display: block;
  text-wrap: balance;
  line-break: strict;
}
.scripture__quote--climax .scripture__answer { margin-top: 0.65em; }

.scripture__bridge {
  max-width: 26em;
  margin: clamp(64px, 7vw, 104px) auto 0;
}
.scripture__bridge p {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.9;
  color: var(--ivory-soft);
}
.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px clamp(14px, 2vw, 30px);
  margin: 0 0 clamp(20px, 2vw, 28px);
  padding: 0;
  list-style: none;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.countdown li { font-size: clamp(17px, 1.6vw, 22px); }
.countdown li:nth-child(1) { opacity: 0.4; }
.countdown li:nth-child(2) { opacity: 0.5; }
.countdown li:nth-child(3) { opacity: 0.6; }
.countdown li:nth-child(4) { opacity: 0.7; }
.countdown li:nth-child(5) { opacity: 0.82; }
.countdown li:last-child { font-size: clamp(28px, 2.8vw, 40px); color: var(--gold-hi); }

@media (max-width: 639px) {
  .scripture__quote--long { font-size: 20px; }
  .scripture__quote--climax { font-size: 19px; }
  .scripture__bridge { max-width: 18em; }
}

/* 4:5 crop of the 1280×720 illustration, full height, x ≈ 45–90%:
   Abraham's raised face and hands on the left, the three angels on the right. */
.detail--abraham img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 84% 50%;
}

/* ---------- Gallery lead tile — Abraham ---------- */

#abraham {
  aspect-ratio: 2 / 3;
  background: var(--ink);
}
/* Scene on top, the label below on page ink */
#abraham img {
  height: 58%;
  object-position: 90% 50%;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
#abraham::after {
  background: linear-gradient(0deg, rgba(11, 10, 9, 0.9) 0%, rgba(11, 10, 9, 0.6) 30%, rgba(11, 10, 9, 0) 46%);
}
#abraham .tile__name { font-size: min(64px, 17vw); white-space: nowrap; letter-spacing: 0.02em; }
.tile__quote { display: none; }

@media (min-width: 640px) {
  /* Editorial lead: museum label on the left, the plate on the right */
  #abraham { grid-column: 1 / -1; grid-row: span 2; aspect-ratio: auto; }
  /* Crop to the kneeling Abraham and the three angels; the dark hillside left of him feathers into the label */
  #abraham img {
    left: auto;
    right: 0;
    width: 62%;
    height: 100%;
    object-position: 88% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%);
    mask-image: linear-gradient(90deg, transparent, #000 12%);
  }
  #abraham::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.35) 0%, rgba(11, 10, 9, 0) 10%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%);
  }
  #abraham .tile__name { font-size: clamp(56px, 7.4vw, 124px); }
}
@media (min-width: 1000px) {
  #abraham img { width: 58%; }
  /* label, excerpt and caption share one left edge */
  .tile--live .tile__live { left: clamp(32px, 3.6vw, 56px); }
  .tile__quote {
    display: block;
    position: absolute;
    top: clamp(64px, 6vw, 96px);
    left: clamp(32px, 3.6vw, 56px);
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--ivory-2);
  }
}

/* App integration: preserve existing state classes and DOM-driven visibility. */
:root {
  --bg: var(--navy); --bg-card: #131e2c; --text: var(--ivory);
  --text-muted: #c2b9a8; --gold-light: var(--gold-hi); --gold-dark: var(--gold-hi);
  --border: rgba(201,164,92,.4); --font: var(--sans);
  --shadow: 0 12px 36px #0003; --shadow-sm: 0 4px 20px #0002;
  --pad: clamp(20px,5vw,72px); --section: clamp(48px,6vw,88px);
  color-scheme: dark;
}
html { scroll-padding-bottom: 90px; }
body { font-size: 16px; line-height: 1.75; }
button, input, textarea, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, .logo-text { font-family: var(--serif); }
button, input, textarea, select, a { max-width: 100%; }
:focus-visible, .btn:focus-visible, .lang-toggle button:focus-visible, .nav-item:focus-visible,
.tone-option input[type="radio"]:focus-visible + label,
.tag-chip input:focus-visible + label {
  outline: 3px solid var(--gold-hi); outline-offset: 4px;
}
.app-wrapper { max-width: none; background: var(--navy); box-shadow: none; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.top-bar, #topbar {
  background: rgba(11,10,9,.76); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 14px var(--pad); min-height: 76px; gap: 16px;
}
.home-page .top-bar, .figure-page .top-bar { position: absolute; inset: 0 0 auto; background: linear-gradient(#0b0a09b3,#0b0a091a); border: 0; }
.top-bar .logo { gap: 8px; }
.top-bar .logo-text, #topbar .logo-text { font-size: clamp(21px,2.2vw,28px); color: var(--ivory); font-weight: 600; letter-spacing: .01em; }
.logo-icon { flex-shrink: 0; }
.top-bar .logo-icon { width: 24px; height: 28px; }
.wordmark-dot, .header-link { color: var(--gold-hi); }
.header-link { font-size: 15px; text-decoration: none; padding-block: 10px; }
.lang-toggle { background: #0b0a0966; border: 1px solid var(--line); padding: 2px; gap: 0; border-radius: 999px; }
.lang-toggle button { color: var(--ivory); font-size: 13px; min-height: 38px; min-width: 36px; padding: 5px 8px; }
.lang-toggle button.active { color: var(--ink); background: var(--gold); box-shadow: none; }
#authBtn { width: 40px; height: 40px; min-height: 40px; border: 1px solid var(--line); color: var(--gold-hi); background: #0b0a0966; }
.top-bar-actions { gap: 10px; }
.btn { min-height: 48px; padding: 11px 24px; border-radius: 999px; font-size: 16px; letter-spacing: .02em; box-shadow: none; white-space: normal; line-height: 1.5; }
.btn-primary, .btn-save-reminder { color: var(--ink); background: var(--gold); border: 1px solid var(--gold); }
.btn-primary:hover, .btn-save-reminder:hover { background: var(--gold-hi); color: var(--ink); }
.btn-secondary, .btn-icon { color: var(--ivory); border: 1px solid var(--line); background: transparent; }
.btn-secondary:hover, .btn-icon:hover { background: #c9a45c1a; color: var(--gold-hi); border-color: var(--gold); }
.btn-sm { min-height: 44px; padding: 9px 16px; font-size: 14px; }
.home-page .page-content { display: block; width: 100%; max-width: none; padding: 0; }
.hero { min-height: 100svh; }
.hero__content { padding-top: 150px; padding-bottom: 112px; }
.hero__title { max-width: 10em; font-size: clamp(44px,6.2vw,88px); line-height: 1.23; }
.hero__verse { max-width: 24em; margin-top: 26px; font-size: clamp(18px,1.7vw,22px); line-height: 1.9; }
.hero-sub-ref { text-align: left; color: var(--gold-hi); font-size: .85em; margin-top: 12px; }
.hero__actions { margin-top: 30px; }
.hero-cta { width: auto; min-height: 60px; padding: 16px 38px; font-family: var(--serif); font-size: 20px; letter-spacing: .12em; }
.hero__credit { bottom: 88px; font-size: 12px; color: var(--ivory-soft); }
.pray-section { background: radial-gradient(ellipse at 80% 0%,#c9a45c0d,transparent 65%),var(--navy); padding: var(--section) var(--pad); scroll-margin-top: 20px; }
.pray-wrap { max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }
.generator-heading { margin-bottom: 6px; }
.generator-heading h2 { font-size: clamp(30px,4vw,48px); margin: 12px 0; }
.generator-heading > p:last-child { color: var(--ivory-soft); font-size: 17px; }
.card { background: #111c2dcc; border-color: var(--line); padding: clamp(20px,3vw,28px); border-radius: 16px; box-shadow: none; }
.card-title { color: var(--ivory); font-size: 17px; font-family: var(--serif); font-weight: 500; letter-spacing: .04em; display: block; }
.card-hint { color: var(--text-muted); font-size: 13px; white-space: normal; text-align: right; }
textarea, input[type="text"], input[type="url"], select, .diary-picker, .publish-select {
  background: #0b1320; border: 1px solid var(--line); color: var(--ivory); border-radius: 10px; padding: 14px 16px; font-size: 17px;
}
textarea { line-height: 1.9; min-height: 150px; }
#needInput { font-size: 19px; min-height: 160px; }
::placeholder { color: #b7af9f; opacity: 1; }
.char-counter { color: var(--text-muted); font-size: 14px; }
.char-counter-row { margin-top: 8px; }
.tone-group { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.tone-option { min-width: 0; }
.tone-option label { min-height: 54px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ivory); font-size: 16px; font-weight: 400; gap: 8px; }
.tone-option label > span:first-child { font-size: 15px; filter: saturate(.6); }
.tone-option label:hover { border-color: var(--gold); color: var(--gold-hi); background: #c9a45c0d; }
.tone-option input[type="radio"]:checked + label { color: var(--ink); background: var(--gold); border-color: var(--gold); box-shadow: none; font-weight: 500; }
.generate-btn { min-height: 64px; font: 600 22px/1.5 var(--serif); border-radius: 999px; }
.result-section { gap: 20px; max-width: 850px; width: 100%; align-self: center; }
.verse-card, .result-box, .verse-box { background: var(--ivory); color: var(--ink); color-scheme: light; border: 1px solid var(--gold); box-shadow: none; padding: clamp(22px,3vw,32px); font-family: var(--serif); font-size: 20px; line-height: 1.9; }
.verse-card, .verse-box { border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; }
.verse-card .verse-text { color: var(--ink); font: 400 20px/1.9 var(--serif); }
.verse-card .verse-ref { color: var(--gold-deep); font: 500 15px/1.7 var(--serif); }
.prayer-title { color: var(--ink); font-size: 22px; }
.prayer-body { font-size: 20px; line-height: 1.9; }
.result-controls { gap: 10px; padding: 24px 0 0; }
.result-controls .btn-secondary { border: 1px solid var(--gold-deep); color: var(--gold-deep); border-radius: 999px; font: 500 14px/1.5 var(--sans); background: transparent; }
.result-controls .btn-secondary:hover { color: var(--ink); border-color: var(--ink); background: #c9a45c24; }
.result-controls svg { stroke: currentColor; }
.result-box :focus-visible { outline-color: var(--gold-deep); }
.step-indicator { color: var(--ivory-soft); font-size: 16px; }
.spinner { border-color: #0b0a0940; border-top-color: var(--ink); }
.divider { color: var(--gold-hi); font-family: var(--serif); font-size: 15px; }
.save-prompt { background: #172436; border: 1px solid var(--line); box-shadow: none; padding: 18px 20px; flex-wrap: wrap; }
.save-prompt p { color: var(--ivory); font-size: 16px; }
.result-status-error { background: #351d1b; color: #ffd3bc; border-color: #c18a70; }
.figures { padding-top: var(--section); }
.figures__head { margin-bottom: 32px; }
.figures__title { font-size: clamp(36px,5vw,66px); margin-top: 16px; }
.figures__intro { font-size: 18px; }
.tile__ref { letter-spacing: .08em; }
.tile__name { overflow-wrap: anywhere; }
.tile__soon { color: var(--ivory); background: #0b0a09cf; }
.tile .nowrap { white-space: normal; }
.compact-footer { padding-block: 32px; }
.compact-footer .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; }
.compact-footer .wordmark { font-size: 26px; }
.compact-footer p { font-size: 14px; color: var(--ivory-soft); flex: 1; }
.compact-footer a:last-child { font-size: 14px; color: var(--gold-hi); text-underline-offset: 4px; }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; display: flex; justify-content: space-around; align-items: stretch; z-index: 100; max-width: 720px; background: #0b101bea; border-top: 1px solid var(--line); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 4px; text-decoration: none; color: var(--ivory-mute); font-size: 12px; line-height: 1.25; min-height: 52px; gap: 5px; justify-content: center; border-radius: 10px; }
.nav-item.active { color: var(--gold-hi); background: #c9a45c12; }
.nav-item [data-i18n] { max-width: 100%; text-align: center; white-space: normal; }
.nav-item .nav-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-item.active .nav-icon { transform: none; }
.nav-item .nav-icon { display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.modal-overlay { background: #0009; backdrop-filter: blur(10px); }
.modal { background: #121d2c; border: 1px solid var(--line); color: var(--ivory); box-shadow: 0 24px 100px #0008; max-height: calc(100svh - 40px); overflow-y: auto; }
.modal h2 { color: var(--ivory); font: 600 24px/1.4 var(--serif); }
.modal p { color: var(--text-muted); }
#authLoggedIn [data-i18n="authSyncStatus"] { color: #a4d6b6 !important; }
.auth-avatar { margin-inline: auto; }
.toast { background: #101927f5; border: 1px solid var(--gold); color: var(--ivory); max-width: calc(100vw - 32px); white-space: normal; text-align: center; width: max-content; }
.utility-page .page-content { width: min(100%,880px); padding: 24px var(--pad) 32px; }
.utility-page .page-title { text-align: left; padding: 28px 24px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(ellipse at right top,#c9a45c1f,transparent 70%),linear-gradient(135deg,#18263a,#0b101b); }
.utility-page .page-title h1 { font-size: clamp(28px,4vw,40px); color: var(--ivory); letter-spacing: .01em; }
.utility-page .page-title p { margin: 12px 0 0; max-width: none; color: var(--ivory-soft); font-size: 15px; }
.stat-card, .reminder-card, .group-bar { background: #131e2c; border-color: var(--line); }
.stat-card .stat-value { color: var(--gold-hi); font-family: var(--serif); }
.stat-card .stat-label { font-size: 14px; }
.tag-chip label, .filter-tab { min-height: 44px; display: inline-flex; align-items: center; border-color: var(--line); }
.tag-chip input:checked + label, .filter-tab.active { color: var(--ink); background: var(--gold); }
.journal-entry, .prayer-card { background: var(--ivory); color: var(--ink); --text: var(--ink); --text-muted: #62594c; --gold-dark: #74561c; --gold-light: #c9a45c; }
.journal-entry .entry-text, .prayer-card .prayer-text { font-family: var(--serif); font-size: 18px; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; }
.journal-entry .entry-delete { color: #74561c; }
.reminder-title, .reminder-footer-text { color: var(--text-muted); font-size: 14px; }
.reminder-time-block { background: #0d1522; border-color: var(--gold); }
.reminder-time-label, .reminder-time-text, .btn-perm-request { color: var(--gold-hi); }
.reminder-time-label { font-size: 13px; }
.reminder-time-text { font-family: var(--serif); font-size: 30px; }
.reminder-divider { border-color: var(--line); }
.btn-perm-request { border-color: var(--gold); border-radius: 999px; min-height: 44px; font-size: 15px; }
.reminder-badge.default, .permission-badge.default { color: #74561c; }
.reminder-btn-wrap:focus-within { outline: 3px solid var(--gold-hi); outline-offset: 4px; border-radius: 14px; }
.group-bar { flex-wrap: wrap; }
.group-list-item:hover, .group-list-item.current { background: #243044; }
.group-list-item-badge { color: var(--ink); background: var(--gold); }
.code-box { background: var(--ink); color: var(--gold-hi); }
.publish-select { min-width: 0; }
.translation-label { opacity: 1; }
.figure-page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.figure-page .btn-primary { width: auto; }
.figure-cta { max-width: 100%; padding: 18px 28px; font-family: var(--serif); font-size: 19px; }
.figure-page .prayer__text p { line-height: 1.9; }
.figure-page .p-hero__content { padding-bottom: 100px; }
.figure-page .site-footer { padding-block: 40px 24px; }
.figure-page .site-footer__top { padding-bottom: 24px; }
.figure-page .site-footer__credits { margin-top: 20px; }
.countdown li:nth-child(n) { opacity: 1; }
.bookmarks-page { padding: 100px var(--pad) calc(110px + env(safe-area-inset-bottom)); background: radial-gradient(ellipse at top right,#c9a45c15,transparent 50%),var(--navy); align-items: stretch; }
.bookmarks-page #topbar { height: auto; justify-content: space-between; flex-wrap: wrap; pointer-events: none; }
.bookmarks-page #topbar .logo { margin-right: auto; color: var(--ivory); text-decoration: none; }
.bookmarks-heading { width: min(100%,1120px); margin: 20px auto 0; }
.bookmarks-heading h1 { font-size: clamp(32px,5vw,48px); margin-top: 12px; }
.bookmarks-page #grid { max-width: 1120px; margin: 32px auto 0; padding: 24px 16px; border: 1px solid var(--line); border-radius: 16px; background: #111c2d; gap: 28px 12px; }
.bookmarks-page .bookmark .icon-wrap, .bookmarks-page .icon-preview { background: var(--ivory); border: 1px solid var(--gold); }
.bookmarks-page .bookmark .label, .bookmarks-page .add-wrap .label { color: var(--ivory); font-size: 14px; text-shadow: none; }
.bookmarks-page .add-btn { background: transparent; border-color: var(--gold); color: var(--gold-hi); }
.bookmarks-page #btn-login, .bookmarks-page .modal .btn-save { background: var(--gold); color: var(--ink); }
.bookmarks-page #btn-logout, .bookmarks-page .modal .btn-cancel { background: transparent; border: 1px solid var(--line); color: var(--ivory); }
.bookmarks-page .modal label { color: var(--ivory-soft); }
.bookmarks-page .modal input { background: var(--navy); color: var(--ivory); border-color: var(--line); }
.bookmarks-page .modal .hint { color: var(--text-muted); }
.bookmarks-page #ctx-menu { background: #172436; border: 1px solid var(--line); }
.bookmarks-page .ctx-item { color: var(--ivory); }
.bookmarks-page .ctx-item:hover { background: #c9a45c22; }
.bookmarks-page .ctx-item.danger { color: #ffb8ac; }
.bookmarks-page .ctx-item.danger:hover { background: #572720; }
.bookmarks-page .modal .btn { border-radius: 999px; }
@media (max-width: 1099px) { .tone-group { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 899px) {
  .hero { min-height: 88svh; }
  .hero__media { inset: 0; height: 100%; }
  .hero__media img { object-position: 55% 30%; }
  .hero__media::after { background: linear-gradient(180deg,#0b0a0980,transparent 24%),linear-gradient(0deg,#0b0a09 0%,#0b0a09ee 22%,#0b0a0988 48%,transparent 76%); }
  .hero__content { padding-top: max(300px,36svh); padding-bottom: 28px; }
  .hero__title { font-size: clamp(44px,7.5vw,64px); }
  .hero__verse { font-size: 18px; max-width: 27em; margin-top: 20px; }
  .hero__actions { margin-top: 22px; }
  .hero__credit { position: static; white-space: normal; margin-top: 24px; text-align: left; font-size: 11px; }
  .figure-page .p-hero__content { padding-bottom: 36px; }
  .figure-page .nowrap, .scripture__ending { white-space: normal; }
}
@media (max-width: 599px) {
  .top-bar, #topbar { padding: 12px 16px; min-height: 72px; gap: 6px; }
  .top-bar .logo-icon { width: 18px; }
  .top-bar .logo { gap: 4px; }
  .top-bar .logo-text { font-size: 20px; }
  .top-bar-actions { gap: 6px; }
  #authBtn { width: 34px; height: 38px; min-height: 38px; }
  .lang-toggle button { min-width: 29px; padding-inline: 6px; font-size: 12px; }
  .hero__title { font-size: clamp(40px,11.3vw,60px); letter-spacing: -.02em; }
  .hero-cta { min-height: 54px; font-size: 18px; }
  .pray-section { padding-inline: 16px; }
  .pray-wrap { gap: 18px; }
  .card { padding: 20px 16px; }
  .tone-group { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .tone-option label { min-height: 52px; font-size: 16px; }
  .card-heading-row { align-items: flex-start; flex-direction: row; gap: 12px; }
  .card-hint { max-width: 48%; margin: 0; }
  .card-title { font-size: 16px; }
  #needInput { font-size: 18px; padding: 12px; }
  .result-box, .verse-card { padding: 22px; }
  .result-box, .verse-card .verse-text, .prayer-body { font-size: 19px; }
  .result-controls .btn { padding-inline: 12px; }
  .save-prompt { gap: 12px; }
  .save-prompt p { flex-basis: 100%; }
  .save-actions { margin-left: auto; }
  .utility-page .page-content { padding-inline: 16px; gap: 20px; }
  .utility-page .page-title { padding: 24px 20px; }
  .compact-footer .wrap { display: block; }
  .compact-footer p { margin: 10px 0; }
  .figure-page .p-hero--abraham .p-hero__name { font-size: 19vw; }
  .figure-page .scripture__quote blockquote { padding-inline: 24px; }
  .figure-page .chapter__title { font-size: 34px; }
  .figure-page .prayer__text p { font-size: 20px; }
  .bookmarks-page #logged-in-area { gap: 6px; }
  .bookmarks-page #user-name { max-width: 4rem; }
  .bookmarks-page #sync-status { max-width: 4rem; white-space: normal; }
}
@media (max-width: 359px) {
  .top-bar { flex-wrap: wrap; }
  .top-bar-actions { margin-left: auto; }
  .hero__title { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Keep focus and icon contrast on the light reading surfaces. */
.skip-link { z-index: 1000; }
.result-controls .btn-secondary:hover svg { stroke: currentColor; }
.journal-entry :focus-visible, .prayer-card :focus-visible { outline-color: var(--gold-deep); }
#authUserEmail, .group-bar-name { overflow-wrap: anywhere; }

/* Undo the legacy desktop grid: 520px textareas, full-height cards, two-column utility pages. */
textarea { height: 180px; min-height: 120px; resize: vertical; }
#needInput { height: 190px; min-height: 120px; }
.card { min-height: 0; }
.pray-section { padding-top: clamp(36px, 4.5vw, 64px); }
.generate-btn { width: 100%; align-self: stretch; }
.utility-page .page-content { display: flex; flex-direction: column; gap: 24px; }
.utility-page .page-content > * { min-width: 0; }
.stat-card { padding: 18px 16px; }
.group-action-row .btn { flex: 1; }
.utility-page .filter-tabs { align-self: flex-start; }
.utility-page .divider { margin-top: 8px; }
.utility-page .empty-state { padding-block: 32px 16px; }
.empty-state p { color: var(--text-muted); }
.bookmarks-page .bookmark .label { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  textarea { height: 150px; }
  #needInput { height: 150px; }
}

/* Optional music control, alongside the account and language controls. */
.bgmusic-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  flex-shrink: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ivory-mute);
  background: #0b0a0966; cursor: pointer; pointer-events: auto;
  transition: color .2s, border-color .2s, background-color .2s;
}
.bgmusic-toggle:hover, .bgmusic-toggle[aria-pressed="true"] {
  color: var(--gold-hi); border-color: var(--gold); background: #c9a45c12;
}
.bgmusic-header-actions { display: flex; align-items: center; gap: 10px; }
.bgmusic-toggle--fixed { position: fixed; top: 18px; right: 16px; z-index: 110; }
@media (max-width: 599px) {
  .bottom-nav .nav-item { font-size: 11px; }
}

/* Prayer wall: stone, high-window light, and quiet parchment. */
[data-dust] { position: relative; isolation: isolate; }
.light-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; border-radius: inherit; }
.light-dust[hidden] { display: none; }
.prayer-wall-page {
  background-color: #171715;
  background-size: 180px 180px, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, repeat, repeat, no-repeat;
  background-position: 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.07' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 75% 0%, #8c774533, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 138px, #090a0a50 139px 142px, #ffffff03 143px 145px),
    repeating-linear-gradient(90deg, #30312c30 0 239px, #0d0d0c40 240px 243px, transparent 244px 480px),
    linear-gradient(110deg, #151615, #252621 55%, #141514);
}
.prayer-wall-page .app-wrapper { background: transparent; }
.prayer-wall-page .page-content { width: min(100%, 920px); gap: 24px; }
.prayer-wall-page .wall-hero {
  position: relative; overflow: hidden; border: 0; border-radius: 0;
  background: transparent; text-align: center; padding: 68px 20px 48px;
}
.prayer-wall-page .wall-hero::before {
  content: ''; position: absolute; inset: -140px -10% -80px 5%; z-index: -1;
  background: linear-gradient(125deg, transparent 33%, #fceac50a 39%, #fceac533 44%, #e8ce8514 52%, transparent 62%);
  filter: blur(15px); pointer-events: none;
}
.prayer-wall-page .wall-hero::after {
  content: ''; position: absolute; top: -22px; right: 22%; width: 38px; height: 70px;
  background: #ffefbc9c; box-shadow: 0 0 45px 12px #efdaa040;
  transform: rotate(28deg); filter: blur(10px); z-index: -1; pointer-events: none;
}
.prayer-wall-page .wall-hero h1 { font-size: clamp(38px, 6vw, 58px); letter-spacing: .16em; font-weight: 500; }
.prayer-wall-page .wall-hero p { max-width: 36em; margin: 20px auto 0; font-family: var(--serif); line-height: 2; color: #d6cbb5; }
.prayer-wall-page .prayer-submit {
  border: 1px solid #bca37555; border-radius: 16px; padding: clamp(22px, 4vw, 36px);
  background: linear-gradient(135deg, #292b26ed, #191c1bee); box-shadow: 0 16px 48px #0003;
}
.prayer-wall-page .prayer-submit .card-title { color: #eadfc9; font-size: 21px; font-weight: 500; letter-spacing: .06em; }
.prayer-wall-page #categoryGroup { display: flex; gap: 10px; margin: 22px 0 18px; }
.prayer-wall-page #categoryGroup .tag-chip { flex: 1 1 88px; }
.prayer-wall-page #categoryGroup label {
  display: flex; justify-content: center; min-height: 50px; padding: 10px 16px;
  font-family: var(--serif); font-size: 17px; color: #ded3be; background: #ffffff03; border: 1px solid #bcaa804f;
}
.prayer-wall-page #categoryGroup input:checked + label { background: #dac394; color: #312a1c; border-color: #dac394; }
.prayer-wall-page #prayerNeedInput {
  height: 160px; padding: 20px; color: #332e25; background: linear-gradient(120deg, #f5eedf, #e9dec8);
  border: 1px solid #c7b58d; border-radius: 10px; font-family: var(--serif); font-size: 18px; line-height: 1.9; color-scheme: light;
}
.prayer-wall-page #prayerNeedInput::placeholder { color: #776d5d; }
.prayer-char-count { display: block; margin-top: 6px; text-align: right; color: #cbbd9f; font-size: 12px; font-variant-numeric: tabular-nums; }
.prayer-wall-page .publish-select { background: #1c211e; color: #e6dcc9; border-color: #bba77b55; }
.prayer-wall-page .group-action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.prayer-wall-page .group-action-row .btn { flex: 0 1 auto; min-height: 44px; padding: 8px 12px; font-size: 13px; border-color: transparent; color: #c2b69e; }
.prayer-wall-page .group-action-row .btn:hover { color: #f3e3c2; border-color: #bca37555; }
.prayer-wall-page .group-bar { background: #151816a8; border: 1px solid #bca37544; }
.prayer-wall-page .group-bar-name { color: #dfc795; font-weight: 500; }
.wall-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.prayer-wall-page .wall-filters .filter-tab { padding: 8px 20px; background: #16191666; color: #d6c9af; border: 1px solid #a992634d; border-radius: 999px; }
.prayer-wall-page .wall-filters .filter-tab.active { background: #d9c18e; color: #302719; border-color: #d9c18e; }
.prayer-wall-page #sortTabs { border: 0; background: transparent; margin: -8px 0 0; padding: 0; }
.prayer-wall-page #sortTabs .filter-tab { background: transparent; color: #b9ad94; border-radius: 0; border: 0; border-bottom: 1px solid transparent; padding: 6px 12px; }
.prayer-wall-page #sortTabs .filter-tab.active { color: #ead4a7; border-bottom-color: #ceb17b; }
.prayer-wall-page #prayerList { display: grid; gap: 26px; padding-block: 8px 20px; }
.prayer-wall-page .prayer-card {
  position: relative; border: 1px solid #cbbb96; border-radius: 5px 14px 5px 14px;
  padding: 30px clamp(22px, 4vw, 34px) 26px; margin: 0;
  background: radial-gradient(ellipse at 5% 0%, #fffdf270, transparent 65%), linear-gradient(100deg, #e8ddc5, #f6efdf 24%, #f0e6d1 78%, #e0d1b4);
  box-shadow: 0 12px 30px #0003; color-scheme: light;
}
.prayer-wall-page .prayer-card::before, .prayer-wall-page .prayer-card::after {
  content: ''; position: absolute; left: 7px; right: 7px; height: 7px; border-radius: 50%; pointer-events: none;
}
.prayer-wall-page .prayer-card::before { top: -3px; background: linear-gradient(#d4c49f, #fbf4e3 60%, #b4a17b); box-shadow: 0 2px 3px #67533714; }
.prayer-wall-page .prayer-card::after { bottom: -3px; background: linear-gradient(#b8a680, #e9ddc1 55%, #f7efdf); box-shadow: 0 3px 4px #0002; }
.prayer-wall-page .prayer-card .prayer-meta { justify-content: flex-start; gap: 8px 12px; padding-right: 40px; }
.prayer-wall-page .prayer-card .author { color: #65573f; font-weight: 400; letter-spacing: .08em; }
.prayer-wall-page .prayer-card .category-badge { color: #6f5527; border: 1px solid #ab8e5440; background: #aa88490d; font-weight: 400; }
.prayer-wall-page .prayer-card .group-badge { color: #5a634b; background: #74805a12; }
.prayer-wall-page .prayer-card .prayer-text { margin: 24px 0; color: #3a3023; font-size: 19px; line-height: 2; }
.prayer-wall-page .prayer-footer { flex-wrap: wrap; gap: 12px; }
.prayer-wall-page .candle-count { color: #776342; font-size: 13px; margin-bottom: 12px; }
.prayer-wall-page .candle-btn { min-height: 44px; font-family: var(--serif); font-size: 15px; color: #71531f; border-color: #ac8c5366; padding: 9px 20px; }
.prayer-wall-page .candle-btn:hover, .prayer-wall-page .candle-btn.lit { background: #bb964324; border-color: #a78542; color: #6d4a13; }
.prayer-wall-page .candle-btn:disabled { opacity: 1; cursor: default; }
.prayer-wall-page .prayer-time { margin-left: auto; }
.wall-candle { position: absolute; top: 33px; right: 30px; width: 20px; height: 40px; pointer-events: none; }
.candle-wax { position: absolute; bottom: 0; left: 2px; width: 16px; height: 27px; border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, #bcae90, #fffae6 42%, #cfbd99); box-shadow: 0 3px 4px #5d482624; }
.candle-wax::before { content: ''; position: absolute; top: -5px; left: 7px; width: 2px; height: 6px; background: #544533; border-radius: 1px; }
.candle-flame { position: absolute; top: -7px; left: 5px; width: 10px; height: 19px; border-radius: 65% 35% 55% 45%; background: radial-gradient(ellipse at 50% 80%, #fffbe6 8%, #ffd86c 45%, #d99429 80%); opacity: 0; transform-origin: 50% 100%; }
.candle-glow { position: absolute; width: 80px; height: 80px; top: -36px; left: -30px; background: radial-gradient(ellipse, #f6bf6170, #edb34d22 40%, transparent 70%); opacity: 0; }
.is-lit .candle-flame, .is-answered .candle-flame { opacity: 1; }
.is-lit .candle-glow, .is-answered .candle-glow { opacity: 1; }
.is-answered .candle-wax { background: linear-gradient(90deg, #aa7826, #f3d67f 42%, #bf8f3e); }
.prayer-wall-page .prayer-card.is-answered { border-color: #bc913e; padding-top: 58px; }
.answered-ribbon { position: absolute; top: 12px; left: 0; padding: 3px 18px 3px 26px; background: #a37b35; color: #fff8e5; font-family: var(--serif); font-size: 12px; letter-spacing: .08em; border-radius: 0 2px 10px 0; }
.prayer-wall-page .empty-state { padding: 44px 24px; border: 1px solid #cbb47e33; background: #171b1866; border-radius: 12px; text-align: center; }
.prayer-wall-page .empty-icon { color: #dcc28e; font-size: 36px; margin-bottom: 18px; }
.prayer-wall-page .empty-state p { color: #d5c7ab; font-family: var(--serif); }
.comfort-verse { position: relative; padding: 24px 50px 24px 28px; border: 1px solid #cbb47e55; border-left: 3px solid #d4b777; border-radius: 8px; background: #272c24; color: #efe2c7; font-family: var(--serif); font-size: 17px; line-height: 2; }
.comfort-verse[hidden] { display: none; }
.comfort-verse p { margin: 0; }
.comfort-dismiss { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: transparent; color: #ddcaa5; font-size: 24px; cursor: pointer; }
@keyframes wall-flame { 0%, 100% { transform: rotate(-3deg) scale(.95, 1); opacity: .85; } 50% { transform: rotate(4deg) scale(1.06, .94); opacity: 1; } }
@keyframes wall-glow-up { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes wall-comfort { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .is-lit .candle-flame, .is-answered .candle-flame { animation: wall-glow-up 1.6s ease-out both, wall-flame 3.8s 1.6s ease-in-out infinite; }
  .is-lit .candle-glow, .is-answered .candle-glow { animation: wall-glow-up 1.6s ease-out both; }
  .comfort-verse:not([hidden]) { animation: wall-comfort .7s ease-out both; }
}
@media (max-width: 480px) {
  .prayer-wall-page .wall-hero { padding: 48px 8px 28px; }
  .prayer-wall-page .wall-hero p { font-size: 14px; max-width: 20em; }
  .prayer-wall-page #categoryGroup { gap: 8px; }
  .prayer-wall-page #categoryGroup .tag-chip { flex-basis: calc(33.333% - 8px); }
  .prayer-wall-page #categoryGroup label { padding-inline: 10px; font-size: 16px; }
  .prayer-wall-page .wall-filters .filter-tab { padding-inline: 16px; }
  .prayer-wall-page .prayer-card { padding-inline: 22px; }
  .wall-candle { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .light-dust { display: none; }
  .prayer-wall-page .fade-in, .comfort-verse, .candle-flame, .candle-glow { animation: none !important; transition: none !important; }
  .reveal, .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* English hero: Latin headline/verse is longer — scale down so the CTA stays above the fold. */
html[lang="en"] .hero__title { font-size: clamp(36px, 4.6vw, 68px); max-width: 12em; line-height: 1.12; }
html[lang="en"] .hero .hero-sub, html[lang="en"] .hero [data-i18n="heroSub"] { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; max-width: 34em; }
@media (max-width: 480px) { html[lang="en"] .hero__title { font-size: clamp(32px, 9vw, 44px); } }


/* Finished figure pages and live gallery tiles, scoped to their app pages. */
/* ==========================================================================
   FIGURE PAGES — shared pieces for David, Solomon, Elijah, Gethsemane
   ========================================================================== */

/* Scripture: verse-by-verse lines, a gold highlight, a muted translator's note */
.figure-page .scripture__line {
  display: block;
  text-wrap: balance;
  line-break: strict;
}
.figure-page .scripture__line + .scripture__line { margin-top: 0.4em; }
.figure-page .scripture__hl { color: var(--gold-hi); }
.figure-page .scripture__note {
  font-size: 0.6em;
  letter-spacing: 0;
  color: var(--ivory-mute);
  vertical-align: 0.15em;
}

/* Phones and small tablets: the painting starts just under the breadcrumb (its top fades into
   the nav), so the breadcrumb never sits on a face; the title sits on the darkened foot of the painting. */
@media (max-width: 899px) {
  .figure-page .p-hero--david .p-hero__media,
  .figure-page .p-hero--solomon .p-hero__media,
  .figure-page .p-hero--elijah .p-hero__media,
  .figure-page .p-hero--gethsemane .p-hero__media {
    top: clamp(88px, 12svh, 120px);
    height: clamp(460px, 64svh, 700px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%);
    mask-image: linear-gradient(180deg, transparent, #000 9%);
  }
  .figure-page .p-hero--david .p-hero__media::after,
  .figure-page .p-hero--solomon .p-hero__media::after,
  .figure-page .p-hero--elijah .p-hero__media::after,
  .figure-page .p-hero--gethsemane .p-hero__media::after {
    background: linear-gradient(0deg, var(--ink), rgba(11, 10, 9, .75) 16%, rgba(11, 10, 9, 0) 40%);
  }
}

/* Footer: with six live pages the link list wraps inside a fixed measure
   instead of squeezing the wordmark column */
.figure-page .site-footer__nav { max-width: 36em; }
@media (min-width: 900px) {
  .figure-page .site-footer__nav ul { justify-content: flex-end; }
}

/* ==========================================================================
   DAVID · Psalm 23 — Honthorst, 1601×2000 portrait: face ≈ (0.30, 0.22),
   crown from y ≈ 0.12, harp and hands at the lower right
   ========================================================================== */

/* Desktop: Hannah's layout — the face stays lit on the left; the title sits on the dark
   background and harp at the right. Top-aligned so the crown clears the breadcrumb. */
@media (min-width: 900px) {
  .figure-page .p-hero--david .p-hero__media img { object-position: 30% 0%; }
  .figure-page .p-hero--david .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.65) 0%, rgba(11, 10, 9, 0) 18%),
      linear-gradient(90deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0) 47%, rgba(11, 10, 9, 0.55) 55%, rgba(11, 10, 9, 0.85) 64%, rgba(11, 10, 9, 0.92) 100%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.8) 0%, rgba(11, 10, 9, 0) 30%);
  }
}
@media (max-width: 899px) {
  .figure-page .p-hero--david .p-hero__media img { object-position: 30% 0%; }
}

/* 4:5 crop: x 240–1160, y 160–1310 — crown, upturned face and beard, the harp's scroll at the right edge */
.figure-page .detail--david img {
  top: -13.91%;       /* 160 / 1150 */
  left: -26.09%;      /* 240 / 920 */
  width: 174.02%;     /* 1601 / 920 */
}

/* Verses set line by line, like a song */
.figure-page .scripture__quote--verses { max-width: 28em; font-size: clamp(22px, 2.3vw, 34px); }
@media (max-width: 639px) {
  .figure-page .scripture__quote--verses { font-size: 20px; }
}

/* ==========================================================================
   SOLOMON — Giordano, 1280×883. Safe source rectangle: x 280–584, y 0–380.
   This shows the robed figure and raised hand, excluding the sleeping king,
   the lower-left figure and the bare-chested angels. Each window clips before
   the decorative scrim; darkness is not used to hide an exposed torso.
   ========================================================================== */

/* Cover the window with the safe rectangle, preserving the painting's proportions.
   Container units keep both source limits intact at every window aspect ratio. */
:is(.figure-page, .home-page) .solomon-window {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  container-type: size;
  --painting-width: max(421.052632cqw, 336.842105cqh);
  --painting-left: -0.21875;
}
.figure-page .p-hero--solomon .solomon-window img,
.figure-page .band .solomon-window img,
.home-page #figures #solomon .solomon-window img {
  position: absolute;
  inset: 0 auto auto;
  left: calc(var(--painting-width) * var(--painting-left));
  width: var(--painting-width);
  max-width: none;
  height: auto;
  object-fit: fill;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.figure-page .p-hero--solomon .p-hero__media { overflow: hidden; }
.figure-page .p-hero--solomon .p-hero__name { white-space: nowrap; }

/* The safe portrait occupies the left; the title has its own dark space on the right. */
@media (min-width: 900px) {
  .figure-page .p-hero--solomon .solomon-window { right: 40%; }
  .figure-page .p-hero--solomon .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 20%),
      linear-gradient(90deg, transparent 36%, var(--ink) 60%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.8), transparent 30%);
  }
  .figure-page .p-hero--solomon .p-hero__name { font-size: clamp(80px, 10vw, 156px); letter-spacing: 0.06em; }
}

/* 4:5 detail: the same safe source rectangle, without a hover transform. */
.figure-page .detail--solomon img {
  top: 0;
  left: -92.105263%;  /* 280 / 304 */
  width: 421.052632%; /* 1280 / 304 */
}

/* The shared band uses only clouds and light: x 640–900, y 0–300. */
.figure-page .band .solomon-window {
  --painting-width: max(492.307693cqw, 426.666667cqh);
  --painting-left: -0.5;
}

/* ==========================================================================
   ELIJAH — Ferdinand Bol, 2000×1814: the angel in white at the left (face ≈ 0.29, 0.15),
   reaching toward Elijah asleep in a red cloak (head ≈ 0.69, 0.37); flask ≈ (0.22, 0.61)
   ========================================================================== */

.figure-page .p-hero--elijah .p-hero__name { white-space: nowrap; }

/* Desktop: full-bleed, dropped just below the breadcrumb so the angel's face is clear of it;
   the title sits low on the left over the darkened ground, well below both faces. */
@media (min-width: 900px) {
  .figure-page .p-hero--elijah .p-hero__media {
    top: clamp(36px, 6vh, 64px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%);
    mask-image: linear-gradient(180deg, transparent, #000 10%);
  }
  .figure-page .p-hero--elijah .p-hero__media img { object-position: 50% 0%; }
  .figure-page .p-hero--elijah .p-hero__media::after {
    background:
      linear-gradient(90deg, rgba(11, 10, 9, 0.7) 0%, rgba(11, 10, 9, 0.35) 30%, rgba(11, 10, 9, 0) 48%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.96) 0%, rgba(11, 10, 9, 0.8) 18%, rgba(11, 10, 9, 0) 42%);
  }
  .figure-page .p-hero--elijah .p-hero__content {
    max-width: none;
    justify-content: flex-start;
    padding-bottom: clamp(40px, 7vh, 88px);
  }
  .figure-page .p-hero--elijah .p-hero__block { width: min-content; }
  .figure-page .p-hero--elijah .p-hero__name { font-size: clamp(72px, min(8vw, 13vh), 150px); }
}
@media (max-width: 899px) {
  .figure-page .p-hero--elijah .p-hero__media img { object-position: 43% 0%; }
}

/* 4:5 crop: x 800–1600, y 280–1280 — the reaching hand and Elijah's whole face, hand on his brow */
.figure-page .detail--elijah img {
  top: -28%;          /* 280 / 1000 */
  left: -100%;        /* 800 / 800 */
  width: 250%;        /* 2000 / 800 */
}

/* Scripture: the plea, then the two gentle wake-up calls */
.figure-page .scripture__quote--again { margin-top: clamp(28px, 3vw, 44px); }

/* ==========================================================================
   GETHSEMANE — Carl Bloch, 1669×2000 portrait: Jesus in red kneeling, head bowed against
   the angel (faces ≈ 0.52–0.56, 0.38–0.45; group x 0.2–0.65, y 0.38–0.75). The painting's
   left edge is near-black, which lets it dissolve into the page on wide screens.
   ========================================================================== */

.figure-page .p-hero--gethsemane .p-hero__name { white-space: nowrap; letter-spacing: 0.04em; }

/* Desktop: the painting hangs to the right of the title like the homepage hero,
   its black left edge melting into the ink; the title sits in that darkness. */
@media (min-width: 900px) {
  .figure-page .p-hero--gethsemane .p-hero__media {
    left: 22%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
    mask-image: linear-gradient(90deg, transparent, #000 18%);
  }
  .figure-page .p-hero--gethsemane .p-hero__media img { object-position: 50% 60%; }
  .figure-page .p-hero--gethsemane .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0) 30%);
  }
  .figure-page .p-hero--gethsemane .p-hero__content {
    max-width: none;
    justify-content: flex-start;
  }
  .figure-page .p-hero--gethsemane .p-hero__block { width: min-content; }
  .figure-page .p-hero--gethsemane .p-hero__name { font-size: clamp(56px, 5.6vw, 104px); }
}
@media (max-width: 899px) {
  /* phones crop only sideways; on tablets the 45% keeps the whole kneeling group above the title */
  .figure-page .p-hero--gethsemane .p-hero__media img { object-position: 45% 45%; }
  .figure-page .p-hero--gethsemane .p-hero__name { font-size: min(15.5vw, 120px); }
}

/* 4:5 crop: x 520–1240, y 620–1520 — the angel leaning toward Jesus' bowed head, down to his clasped hands */
.figure-page .detail--gethsemane img {
  top: -68.89%;       /* 620 / 900 */
  left: -72.22%;      /* 520 / 720 */
  width: 231.81%;     /* 1669 / 720 */
}

/* The quote's last sentence — the turn — on its own gold line */
.figure-page .scripture__quote--gethsemane .scripture__hl { margin-top: 0.6em; }

/* ==========================================================================
   INDEX — six live pages
   ========================================================================== */

/* Live tiles in the single, wide and feature slots: same pieces, scaled to the tile;
   the caption (now with a button) is taller, so the scrim reaches a little higher */
.home-page #figures .tile--compact::after {
  background: linear-gradient(0deg, rgba(11, 10, 9, 0.96) 0%, rgba(11, 10, 9, 0.85) 32%, rgba(11, 10, 9, 0.3) 58%, rgba(11, 10, 9, 0) 74%);
}
.home-page #figures .tile--compact .tile__name { font-size: 48px; }
.home-page #figures .tile--live.tile--compact .tile__note { font-size: 19px; }
.home-page #figures .tile--compact .tile__open {
  gap: 10px;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  letter-spacing: 0.08em;
}
@media (min-width: 640px) {
  .home-page #figures .tile--compact .tile__name { font-size: clamp(36px, 3.6vw, 52px); }
}
@media (min-width: 1000px) {
  .home-page #figures .tile--compact .tile__inner { padding: clamp(22px, 2.2vw, 32px); }
  .home-page #figures .tile--live.tile--compact .tile__live { left: clamp(22px, 2.2vw, 32px); }
}

/* Elijah — Bol's colour painting replaces the engraving: angel and sleeper both in frame */
.home-page #figures #elijah img { object-position: 42% 50%; }

/* Solomon uses the shared safe portrait window at every gallery breakpoint. */
.home-page #figures #solomon::after {
  background: linear-gradient(0deg, var(--ink), rgba(11, 10, 9, 0.85) 32%, transparent 70%);
}



/* Bol's colour painting replaces the old engraving in this tile. */
.home-page #figures #elijah img { filter: none; }
.home-page #figures #david-23 .tile__name { font-size: clamp(28px, 3vw, 42px); }

/* Mood links: spacious gold hairline pills above the gallery. */
.home-page #figures .mood-picker { margin-bottom: clamp(40px, 5vw, 64px); }
.home-page #figures .mood-picker__title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.3;
}
.home-page #figures .moods {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-page #figures .mood {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 16px 26px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--ivory);
  text-decoration: none;
  background: rgba(11, 10, 9, .25);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.home-page #figures .mood .arrow {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--gold);
  transition: transform .35s var(--ease), color .35s;
}
.home-page #figures .mood:hover,
.home-page #figures .mood:focus-visible { background: var(--gold); color: var(--ink); }
.home-page #figures .mood:hover .arrow,
.home-page #figures .mood:focus-visible .arrow { color: var(--ink); transform: translateX(4px); }
@media (max-width: 899px) {
  .home-page #figures .moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .home-page #figures .mood { width: 100%; gap: 6px; padding: 14px 16px; font-size: 19px; letter-spacing: .02em; }
}
@media (max-width: 599px) {
  .home-page #figures .moods { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .home-page #figures .moods li { display: flex; }
  .home-page #figures .mood { min-height: 64px; font-size: clamp(16px, 4.6vw, 19px); padding: 14px 12px 14px 16px; letter-spacing: 0; }
}
@media (max-width: 359px) {
  .home-page #figures .mood { padding-inline: 12px 10px; font-size: 16px; }
}

@media (max-width: 639px) {
  .figure-page .scripture__quote--gethsemane { font-size: clamp(18px, 5.6vw, 22px); }
}

/* brand logo image */
.site-logo{display:block;height:44px;width:auto}
@media (max-width:640px){.site-logo{height:32px}}

.logo:has(.site-logo) .logo-icon{display:none!important}

/* ===== top sky banner ===== */
.sky-banner{position:relative;width:100%;overflow:hidden;background:#050505;line-height:0}

.sky-banner__img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;object-position:center}
.sky-banner__stars{position:absolute;inset:0 0 35% 0;pointer-events:none;
 background-image:
 radial-gradient(1.2px 1.2px at 62% 18%,#fff8e0 60%,transparent),radial-gradient(1px 1px at 71% 9%,#fff 60%,transparent),
 radial-gradient(1.4px 1.4px at 83% 22%,#ffeec2 60%,transparent),radial-gradient(1px 1px at 91% 12%,#fff 60%,transparent),
 radial-gradient(1px 1px at 55% 30%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 96% 35%,#ffe9b0 60%,transparent),
 radial-gradient(1px 1px at 76% 40%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 8%,#fff 60%,transparent);
 animation:sbTwinkle 4.5s ease-in-out infinite}
.sky-banner__stars--b{background-image:
 radial-gradient(1px 1px at 66% 28%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 87% 6%,#fff3cf 60%,transparent),
 radial-gradient(1px 1px at 79% 15%,#fff 60%,transparent),radial-gradient(1.1px 1.1px at 59% 8%,#fff 60%,transparent),
 radial-gradient(1px 1px at 93% 26%,#fff 60%,transparent),radial-gradient(1px 1px at 8% 30%,#fff 60%,transparent);
 animation-delay:2.2s;animation-duration:5.5s}
.sky-banner__glow{position:absolute;left:7%;top:8%;width:24%;aspect-ratio:1;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(255,228,150,.35) 0%,rgba(255,200,90,.12) 35%,transparent 70%);mix-blend-mode:screen;animation:sbBreathe 6s ease-in-out infinite}
.sky-banner__horizon{position:absolute;left:-10%;right:-10%;bottom:0;height:30%;pointer-events:none;
 background:radial-gradient(60% 55% at 22% 100%,rgba(255,200,100,.28),transparent 70%);mix-blend-mode:screen;animation:sbBreathe 7s ease-in-out infinite reverse}
@keyframes sbTwinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes sbBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.sky-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(to bottom,transparent,#0b0b0c);pointer-events:none}
@media (prefers-reduced-motion:reduce){.sky-banner *{animation:none!important}}
.sky-banner::after{height:30%}
@media (max-width:700px){
 .sky-banner{padding-top:64px}
 .sky-banner__img{max-height:none;object-fit:contain}
}
@media (min-width:701px){
 .sky-banner{padding-top:56px}
 .sky-banner__img{height:clamp(240px,40vh,380px);max-height:none;width:100%;object-fit:cover;object-position:42% 45%}
}
@media (min-width:701px){
 .sky-banner__img{object-fit:contain;object-position:center;background:#050505}
 .sky-banner{background:#050505}
}

.logo.brand{gap:4px}
.home-page .hero__title{font-size:clamp(32px,3.6vw,52px)!important;text-align:left;line-height:1.2}
.home-page .hero__content{text-align:left;align-items:flex-start}

.site-logo{display:block;height:46px;width:auto;mix-blend-mode:normal}
@media (max-width:640px){.site-logo{height:34px}}
section.hero h1.hero__title{font-size:clamp(30px,3.4vw,48px)!important;max-width:14em;text-align:left}
@media (max-width:640px){section.hero h1.hero__title{font-size:clamp(28px,7.6vw,36px)!important}}
.sky-banner__img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 100%);mask-composite:intersect}
.sky-banner,.sky-banner__img{background:#0b0b0c!important}
@media (max-width:700px){.sky-banner__img{-webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent);mask-image:linear-gradient(to bottom,#000 75%,transparent)}}

.sky-banner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 20px 56px!important;line-height:1.4;background:radial-gradient(70% 90% at 50% 40%,#1a140a 0%,#0b0b0c 70%)!important}
.sky-banner__logo{display:block;width:min(640px,86vw);height:auto;position:relative;z-index:1;filter:drop-shadow(0 0 24px rgba(233,196,106,.25))}
.sky-banner__tag{position:relative;z-index:1;margin:14px 0 0;color:#e9d39a;letter-spacing:.5em;font-size:15px;font-family:"Noto Serif SC",serif;opacity:.9}
.sky-banner__stars{inset:0!important}
.sky-banner__glow{left:22%!important;top:4%!important;width:22%!important}
.sky-banner::after{height:22%}
@media (max-width:700px){.sky-banner{padding:84px 16px 36px!important}.sky-banner__tag{font-size:13px;letter-spacing:.35em}.sky-banner__glow{left:4%!important;width:40%!important}}

.site-logo{height:64px!important;width:auto}
@media (max-width:640px){.site-logo{height:44px!important}}


#lang-en,#lang-yue{display:none!important}
/* desktop: bottom nav becomes top menu */
@media (min-width:1024px){
 .bottom-nav{top:18px;bottom:auto!important;left:50%;transform:translateX(-50%);width:auto!important;max-width:none!important;background:transparent!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;gap:6px;z-index:120}
 .bottom-nav .nav-item{flex-direction:row!important;gap:8px;padding:8px 16px!important;border-radius:999px;font-size:15px!important;color:#e9dcc0;min-width:0!important;flex:none!important;background:transparent}
 .bottom-nav .nav-item svg{width:18px;height:18px}
 .bottom-nav .nav-item:hover{background:rgba(233,196,106,.10);color:#f3d88a}
 .bottom-nav .nav-item.active{background:rgba(233,196,106,.14)!important;color:#f3d88a!important}
 body,.app-wrapper,.figure-page{padding-bottom:0!important}
 .site-footer{margin-bottom:0!important}
}
@media (min-width:1024px){.bottom-nav{position:absolute!important}}

/* ==========================================================================
   PAUL · Ephesians 3 — Rembrandt, 1200×1460 portrait: face ≈ (0.62, 0.30)
   ========================================================================== */
@media (min-width: 900px) {
  .figure-page .p-hero--paul .p-hero__media {
    left: 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
    mask-image: linear-gradient(90deg, transparent, #000 20%);
  }
  .figure-page .p-hero--paul .p-hero__media img { object-position: 60% 22%; }
  .figure-page .p-hero--paul .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0) 30%);
  }
  .figure-page .p-hero--paul .p-hero__content { max-width: none; justify-content: flex-start; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--paul .p-hero__media {
    top: clamp(88px, 12svh, 120px);
    height: clamp(460px, 64svh, 700px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%);
    mask-image: linear-gradient(180deg, transparent, #000 9%);
  }
  .figure-page .p-hero--paul .p-hero__media::after {
    background: linear-gradient(0deg, var(--ink), rgba(11, 10, 9, .75) 16%, rgba(11, 10, 9, 0) 40%);
  }
  .figure-page .p-hero--paul .p-hero__media img { object-position: 62% 20%; }
}
/* 4:5 crop: x 600–1080, y 300–900 — his face, hand at his beard, down to the open book */
.figure-page .detail--paul img {
  top: -50%;          /* 300 / 600 */
  left: -125%;        /* 600 / 480 */
  width: 250%;        /* 1200 / 480 */
}

.footer-loc{font-size:12px;opacity:1;letter-spacing:.05em;margin-top:6px;}

.site-footer__nav a{font-size:13px!important;opacity:1}
.site-footer__nav ul{gap:6px 20px!important}

/* ==========================================================================
   SITE BACKGROUND — warm deep brown-black + ecclesiastical damask in the side gutters.
   images/pattern-sanctuary.svg (3KB tile: quatrefoil tracery + cross, olive branch,
   grapevine, dove). The pattern is a layer *behind* all content (z-index -1) spanning
   the whole page, so it can never cover the hero cross; it fades out toward the
   centre so the content column stays clean (clear from 50% ± 580px — the widest
   content column is 1156px). Desktop only (≥1024px).
   Gold at 18%: at 8% it was effectively ~3% in a 1440px gutter — invisible.
   ========================================================================== */
html {
  background-color: #0b0806;
  background-image: radial-gradient(130% 1400px at 50% 0, #1b130c 0%, #100b08 45%, #0b0806 100%);
  background-repeat: no-repeat;
}
body,
body.home-page, body.figure-page, body.utility-page, body.bookmarks-page { background: transparent; }
body::before { display: none; }
@media (min-width: 1024px) {
  :root {
    /* gentle stepped fade that reaches right up to the content column, which stays clean */
    --pat-fade: #000 0, #000 calc(50% - 820px), rgba(0,0,0,.75) calc(50% - 700px), rgba(0,0,0,.35) calc(50% - 620px), transparent calc(50% - 580px),
                transparent calc(50% + 580px), rgba(0,0,0,.35) calc(50% + 620px), rgba(0,0,0,.75) calc(50% + 700px), #000 calc(50% + 820px), #000 100%;
  }
  body { position: relative; }   /* style.css already does this from 1024px */
  body::before,
  .figure-page .scripture::before,
  .figure-page .prayer::before {
    content: "";
    display: block;          /* style.css hides body::before on desktop; this layer replaces it */
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url(../images/pattern-baroque.webp) center top / 320px 320px repeat;
    opacity: .28;
    -webkit-mask-image: linear-gradient(90deg, var(--pat-fade));
    mask-image: linear-gradient(90deg, var(--pat-fade));
  }
  /* figure-page colour bands (navy scripture, umber prayer) are full-width fills that hid the
     page pattern: they carry their own copy above their fill and below their content */
  .figure-page .scripture,
  .figure-page .prayer { position: relative; isolation: isolate; }
}
/* flat full-width fills that used to hide the gutters (heroes and the ivory story chapters keep theirs) */
.app-wrapper { background: transparent; }
.home-page .pray-section { background: radial-gradient(ellipse at 80% 0%, #c9a45c0d, transparent 65%); }
.figures, .cta { background: transparent; }
/* footers were opaque/85% and hid the pattern; keep them a darker band but let it show through */
.site-footer { background: rgba(8, 6, 4, .55); }
.bookmarks-page { background: radial-gradient(ellipse at top right, #c9a45c15, transparent 50%); }
.bookmarks-page #grid { background: rgba(26, 19, 12, .78); }
/* warm the homepage prayer cards to match the band (were navy) */
.home-page .pray-section .card { background: rgba(28, 21, 14, .82); }
.home-page .pray-section textarea { background: #120d09; }

/* ===== Gutter pattern continuity: all pattern layers share ONE origin (the viewport), so tile
   phase never jumps at section boundaries; footer no longer dims or rules the gutters. ===== */
@media (min-width: 1024px) {
  body::before,
  .figure-page .scripture::before,
  .figure-page .prayer::before { background-attachment: fixed; background-position: center top; }
}
.site-footer,
.diary-page .site-footer,
.wall-page .site-footer,
.about-page .site-footer { background: transparent !important; border-top: 0 !important; }
/* page-level glows on .app-wrapper ended abruptly at the footer and brightened the pattern above it */
@media (min-width: 1024px) {
  .diary-page .app-wrapper, .wall-page .app-wrapper, .about-page .app-wrapper, body .app-wrapper { background: transparent !important; }
}

/* === figs7 pages === */
/* ==========================================================================
   Seven figure pages — 主祷文 / 但以理 / 摩西 / 尼希米 / 希西家 / 约伯 / 哈拿.
   They share Paul's hero: on desktop the painting hangs to the right and melts into the ink
   behind the title; on phones it sits under the breadcrumb with the title on its darkened foot.
   Everything for these pages (hero, detail crops, tiles, moods, footer columns) lives in this block.
   ========================================================================== */
.figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--nehemiah, .p-hero--hezekiah) .p-hero__name { white-space: nowrap; }
@media (min-width: 900px) {
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--moses, .p-hero--nehemiah, .p-hero--hezekiah, .p-hero--job, .p-hero--hannah) .p-hero__media {
    left: 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
    mask-image: linear-gradient(90deg, transparent, #000 20%);
  }
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--moses, .p-hero--nehemiah, .p-hero--hezekiah, .p-hero--job, .p-hero--hannah) .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%),
      linear-gradient(90deg, rgba(11, 10, 9, 0.8) 0%, rgba(11, 10, 9, 0.45) 22%, rgba(11, 10, 9, 0) 42%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0) 30%);
  }
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--moses, .p-hero--nehemiah, .p-hero--hezekiah, .p-hero--job, .p-hero--hannah) .p-hero__content {
    max-width: none;
    justify-content: flex-start;
  }
  /* three-character names stay on one line inside the title column */
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--nehemiah, .p-hero--hezekiah) .p-hero__name {
    font-size: clamp(72px, 9.5vw, 150px);
  }
}
@media (max-width: 899px) {
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--moses, .p-hero--nehemiah, .p-hero--hezekiah, .p-hero--job, .p-hero--hannah) .p-hero__media {
    top: clamp(88px, 12svh, 120px);
    height: clamp(460px, 64svh, 700px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%);
    mask-image: linear-gradient(180deg, transparent, #000 9%);
  }
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--moses, .p-hero--nehemiah, .p-hero--hezekiah, .p-hero--job, .p-hero--hannah) .p-hero__media::after {
    background: linear-gradient(0deg, var(--ink), rgba(11, 10, 9, .75) 16%, rgba(11, 10, 9, 0) 40%);
  }
  .figure-page :is(.p-hero--lords-prayer, .p-hero--daniel, .p-hero--nehemiah, .p-hero--hezekiah) .p-hero__name {
    font-size: clamp(72px, 21vw, 144px);
  }
}

/* Pale or crowded left edges (Tissot's white robes, de Backer's red gown): a deeper scrim under the title */
@media (min-width: 900px) {
  .figure-page :is(.p-hero--lords-prayer, .p-hero--hezekiah) .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%),
      linear-gradient(90deg, rgba(11, 10, 9, 0.94) 0%, rgba(11, 10, 9, 0.78) 20%, rgba(11, 10, 9, 0.3) 38%, rgba(11, 10, 9, 0) 52%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0) 30%);
  }
}

/* ---------- 主祷文 — Tissot, 1111×1480 portrait: Jesus standing ≈ (0.38, 0.14–0.60), disciples seated below ---------- */
@media (min-width: 900px) {
  .figure-page .p-hero--lords-prayer .p-hero__media img { object-position: 40% 28%; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--lords-prayer .p-hero__media img { object-position: 35% 22%; }
}
/* 4:5 crop: x 180–780, y 180–930 — Jesus with open arms, the nearest listeners at his feet */
.figure-page .detail--lords-prayer img {
  top: -24%;          /* 180 / 750 */
  left: -30%;         /* 180 / 600 */
  width: 185.17%;     /* 1111 / 600 */
}

/* ---------- 但以理 — Rubens, landscape 1.478:1: Daniel ≈ x 0.60–0.80, face (0.70, 0.17) ---------- */
@media (min-width: 900px) {
  .figure-page .p-hero--daniel .p-hero__media img { object-position: 88% 50%; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--daniel .p-hero__media img { object-position: 80% 50%; }
}
/* 4:5 crop (of 2000×1353): x 1010–1650, y 100–900 — upturned face, clasped hands, the red cloak */
.figure-page .detail--daniel img {
  top: -12.5%;        /* 100 / 800 */
  left: -157.81%;     /* 1010 / 640 */
  width: 312.5%;      /* 2000 / 640 */
}

/* ---------- 摩西 — Rembrandt, 1202×1500 portrait: tablets y 0.02–0.36, face ≈ (0.50, 0.45) ---------- */
@media (min-width: 900px) {
  .figure-page .p-hero--moses .p-hero__media img { object-position: 50% 4%; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--moses .p-hero__media img { object-position: 50% 6%; }
}
/* 4:5 crop: x 200–1000, y 0–1000 — the raised tablets down to his face and beard */
.figure-page .detail--moses img {
  top: 0;
  left: -25%;         /* 200 / 800 */
  width: 150.25%;     /* 1202 / 800 */
}

/* ---------- 尼希米 — color painting 1672×941, figure kneeling right (≈0.73, 0.3) ---------- */
.figure-page .p-hero--nehemiah .p-hero__media img { object-position: 74% 30%; }

/* ---------- 希西家 — de Backer, square: Isaiah ≈ x 0.37–0.55, the king ≈ x 0.52–0.72, y 0.27–0.70 ---------- */
@media (min-width: 900px) {
  .figure-page .p-hero--hezekiah .p-hero__media img { object-position: 50% 25%; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--hezekiah .p-hero__media img { object-position: 60% 40%; }
}
/* 4:5 crop (of 1200×1196): x 390–870, y 250–850 — the prophet's raised hand and the king turning toward him */
.figure-page .detail--hezekiah img {
  top: -41.67%;       /* 250 / 600 */
  left: -81.25%;      /* 390 / 480 */
  width: 250%;        /* 1200 / 480 */
}

/* ---------- 约伯 — Bonnat, 1324×1500: face ≈ (0.49, 0.23), open hands at y ≈ 0.75–0.85 ---------- */
@media (min-width: 900px) {
  .figure-page .p-hero--job .p-hero__media img { object-position: 50% 22%; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--job .p-hero__media img { object-position: 50% 18%; }
}
/* 4:5 crop: x 300–1020, y 200–1100 — upturned face, the long beard, the thin chest */
.figure-page .detail--job img {
  top: -22.22%;       /* 200 / 900 */
  left: -41.67%;      /* 300 / 720 */
  width: 183.89%;     /* 1324 / 720 */
}

/* ---------- 哈拿 — Victors, 1237×1500: face ≈ (0.57, 0.30), clasped hands ≈ (0.53, 0.65) ---------- */
@media (min-width: 900px) {
  .figure-page .p-hero--hannah .p-hero__media img { object-position: 55% 40%; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--hannah .p-hero__media img { object-position: 58% 40%; }
}
/* 4:5 crop: x 300–1020, y 180–1080 — the red hat, her face, down to the clasped hands */
.figure-page .detail--hannah img {
  top: -20%;          /* 180 / 900 */
  left: -41.67%;      /* 300 / 720 */
  width: 171.81%;     /* 1237 / 720 */
}

/* ---------- Scripture: a long passage, and a second, quieter quote under the first ---------- */
.figure-page .scripture__quote--passage { max-width: 28em; font-size: clamp(20px, 2vw, 30px); }
.figure-page .scripture__quote--second {
  max-width: 26em;
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(20px, 2.1vw, 32px);
}
/* closing sentences here are longer than the measure: let them wrap, without stranding a lone character */
.figure-page :is(.scripture__quote--passage, .scripture__quote--second, .scripture__quote--lords) .scripture__ending { white-space: normal; }
.figure-page :is(.scripture__quote--passage, .scripture__quote--second, .scripture__quote--lords) blockquote p { text-wrap: pretty; }
@media (max-width: 639px) {
  .figure-page .scripture__quote--passage,
  .figure-page .scripture__quote--second { font-size: 19px; }
}

/* ---------- Index gallery: thirteen live pages ---------- */
.home-page #figures #lords-prayer img { object-position: 38% 30%; }
.home-page #figures #daniel img       { object-position: 80% 30%; }
.home-page #figures #moses img        { object-position: 50% 12%; }
.home-page #figures #hezekiah img     { object-position: 58% 35%; }
.home-page #figures #job img          { object-position: 50% 15%; }
.home-page #figures #hannah img       { object-position: 55% 12%; }
.home-page #figures #nehemiah img     { object-position: 50% 50%; }
@media (min-width: 1000px) {
  .home-page #figures #daniel img { object-position: 72% 30%; }
}

/* Mood pills: ten of them — on the 3-column tablet grid the last one closes the block full-width */
@media (min-width: 600px) and (max-width: 899px) {
  .home-page #figures .moods li:last-child { grid-column: 1 / -1; }
}

/* ---------- Footer: thirteen figure links set in neat columns ---------- */
.site-footer__nav .footer-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px 28px !important;
  justify-content: start;
}
.figure-page .site-footer__nav:has(.footer-figs) { max-width: none; }
@media (min-width: 640px) {
  .site-footer__nav .footer-figs { grid-template-columns: repeat(3, minmax(0, max-content)); }
}
@media (min-width: 1000px) {
  .site-footer__nav .footer-figs { grid-template-columns: repeat(4, minmax(0, max-content)); }
}
/* === /figs7 pages === */
/* === overflow fix: long scripture endings must wrap everywhere === */
.scripture__ending { white-space: normal !important; }
/* hannah: on very wide screens show the whole figure (face + clasped hands) */
@media (min-width: 1600px) {
  .figure-page .p-hero--hannah .p-hero__media img { object-fit: contain; object-position: 72% 50%; }
}

/* === more-prayers === */
.more-prayers {
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid rgba(201, 168, 76, 0.16);
}
.more-prayers__title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ivory);
  margin-bottom: 24px;
}
.more-prayers__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 14px;
  background: #C9A84C;
}
.more-prayers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.more-prayers__list a {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  height: 100%;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(243, 234, 216, 0.03);
  color: var(--ivory);
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.more-prayers__list a:hover,
.more-prayers__list a:focus-visible {
  border-color: #C9A84C;
  background: rgba(201, 168, 76, 0.07);
}
.more-prayers__list img {
  grid-row: 1 / span 2;
  width: 112px;
  height: 84px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 25%;
  background: var(--ink-2);
}
.more-prayers__name {
  align-self: end;
  padding-right: 16px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.more-prayers__note {
  align-self: start;
  padding-right: 16px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ivory-soft);
}
@media (min-width: 768px) {
  .more-prayers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .more-prayers__list a { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; }
  .more-prayers__list img { grid-row: auto; width: 100%; height: auto; }
  .more-prayers__name { align-self: start; padding: 16px 18px 0; font-size: 19px; }
  .more-prayers__note { padding: 0 18px 18px; margin-top: 4px; }
}
/* footer brand: small Chinese name beside the say.church wordmark */
.wordmark__cn {
  display: inline-block;
  margin-left: 0.7em;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ivory-soft);
  vertical-align: 0.2em;
}
/* === /more-prayers === */
/* === solomon closing band: praying king (left) + distant city (right); text on the dark wall between === */
.band--king .band__media img { object-position: 50% 45%; filter: none; }
.band--king .band__media::after {
  background:
    radial-gradient(34% 70% at 50% 50%, rgba(11, 10, 9, 0.55), rgba(11, 10, 9, 0) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 10, 9, 0.15) 18%, rgba(11, 10, 9, 0.15) 82%, var(--ink) 100%);
}
@media (max-width: 699px) {
  /* mobile: king fills the upper part, line sits low on the darkened bottom */
  .band--king { min-height: 520px; align-items: end; padding-block: 0 56px; }
  .band--king .band__media img { object-position: 20% 30%; }
  .band--king .band__media::after {
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(11, 10, 9, 0) 14%, rgba(11, 10, 9, 0) 42%, rgba(11, 10, 9, 0.88) 72%, var(--ink) 100%);
  }
  .band--king .band__line { font-size: clamp(30px, 8.6vw, 40px); }
}
@media (min-width: 700px) { .band--king .wrap { padding-left: calc(var(--pad, 24px) + 8vw); } }
/* === figs17 pages (generated) === */
/* same hero as the figs7 pages: painting hangs right on desktop, sits under the breadcrumb on phones */
@media (min-width: 900px) {
  .figure-page .p-hero--new .p-hero__media { left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
  .figure-page .p-hero--new .p-hero__media::after { background: linear-gradient(180deg, rgba(11,10,9,.6) 0%, rgba(11,10,9,0) 18%), linear-gradient(90deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,.5) 22%, rgba(11,10,9,0) 42%), linear-gradient(0deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,0) 30%); }
  .figure-page .p-hero--new .p-hero__content { max-width: none; justify-content: flex-start; }
}
@media (max-width: 899px) {
  .figure-page .p-hero--new .p-hero__media { top: clamp(88px, 12svh, 120px); height: clamp(460px, 64svh, 700px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%); mask-image: linear-gradient(180deg, transparent, #000 9%); }
  .figure-page .p-hero--new .p-hero__media::after { background: linear-gradient(0deg, var(--ink), rgba(11,10,9,.75) 16%, rgba(11,10,9,0) 40%); }
}
.figure-page .p-hero--new .p-hero__name { white-space: nowrap; }
@media (min-width: 900px) { .figure-page .p-hero--joshua .p-hero__name, .figure-page .p-hero--samuel .p-hero__name, .figure-page .p-hero--jehoshaphat .p-hero__name, .figure-page .p-hero--ezra .p-hero__name, .figure-page .p-hero--jeremiah .p-hero__name, .figure-page .p-hero--habakkuk .p-hero__name, .figure-page .p-hero--jabez .p-hero__name, .figure-page .p-hero--mary .p-hero__name, .figure-page .p-hero--stephen .p-hero__name { font-size: clamp(72px, 9.5vw, 150px); } }
@media (max-width: 899px) { .figure-page .p-hero--joshua .p-hero__name, .figure-page .p-hero--samuel .p-hero__name, .figure-page .p-hero--jehoshaphat .p-hero__name, .figure-page .p-hero--ezra .p-hero__name, .figure-page .p-hero--jeremiah .p-hero__name, .figure-page .p-hero--habakkuk .p-hero__name, .figure-page .p-hero--jabez .p-hero__name, .figure-page .p-hero--mary .p-hero__name, .figure-page .p-hero--stephen .p-hero__name { font-size: clamp(64px, 20vw, 144px); } }
@media (min-width: 900px) { .figure-page .p-hero--zechariah .p-hero__name { font-size: clamp(64px, 7.6vw, 124px); } }
@media (max-width: 899px) { .figure-page .p-hero--zechariah .p-hero__name { font-size: clamp(56px, 16vw, 112px); } }
.figure-page .p-hero--isaac .p-hero__media img { object-position: 45% 30%; }
.figure-page .p-hero--jacob .p-hero__media img { object-position: 50% 35%; }
.figure-page .p-hero--joseph .p-hero__media img { object-position: 72% 40%; }
.figure-page .p-hero--joshua .p-hero__media img { object-position: 50% 50%; }
.figure-page .p-hero--gideon .p-hero__media img { object-position: 55% 35%; }
.figure-page .p-hero--samuel .p-hero__media img { object-position: 70% 40%; }
.figure-page .p-hero--jehoshaphat .p-hero__media img { object-position: 40% 30%; }
.figure-page .p-hero--ezra .p-hero__media img { object-position: 28% 30%; }
.figure-page .p-hero--jeremiah .p-hero__media img { object-position: 60% 45%; }
.figure-page .p-hero--habakkuk .p-hero__media img { object-position: 22% 30%; }
.figure-page .p-hero--jabez .p-hero__media img { object-position: 80% 30%; }
.figure-page .p-hero--samson .p-hero__media img { object-position: 72% 30%; }
.figure-page .p-hero--mary .p-hero__media img { object-position: 60% 20%; }
.figure-page .p-hero--zechariah .p-hero__media img { object-position: 10% 50%; }
.figure-page .p-hero--simeon .p-hero__media img { object-position: 60% 55%; }
.figure-page .p-hero--stephen .p-hero__media img { object-position: 50% 60%; }
.figure-page .p-hero--peter .p-hero__media img { object-position: 66% 35%; }
/* tall paintings: on desktop show the whole figure (no upscaling), hung to the right */
@media (min-width: 900px) {
  .figure-page .p-hero--gideon .p-hero__media { left: auto; right: 0; width: auto; aspect-ratio: 1084 / 1500; max-width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
}
/* detail figures of the new pages are their own 4:5 files */
.figure-page .detail--own img { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* === /figs17 pages === */
/* === figure gallery (30 prayers, filter by theme) === */
.fig-tabs { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0; list-style: none; }
.fig-tab { font: 500 15px/1 var(--sans); letter-spacing: .04em; color: var(--ivory-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.fig-tab:hover { border-color: var(--gold); color: var(--ivory); }
.fig-tab[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.fig-tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.fig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .fig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .fig-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fig-card[hidden] { display: none; }
.fig-card a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); color: var(--ivory); text-decoration: none; border: 1px solid rgba(201,164,92,.16); }
.fig-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fig-card--engraving img { filter: grayscale(1) sepia(.6) saturate(1.1) contrast(1.15) brightness(.85); }
.fig-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,10,9,.94) 0%, rgba(11,10,9,.7) 28%, rgba(11,10,9,0) 58%); }
.fig-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(12px, 1.4vw, 20px); }
.fig-card__ref { margin: 0 0 4px; font: 400 12px/1.4 var(--sans); letter-spacing: .08em; color: var(--gold-hi); }
.fig-card__name { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.15 var(--serif); color: var(--ivory); }
.fig-card__note { margin: 6px 0 0; font: 400 clamp(13px, 1vw, 15px)/1.45 var(--serif); color: var(--ivory-soft); }
.fig-card a:hover img, .fig-card a:focus-visible img { transform: scale(1.05); }
.fig-card a:hover { border-color: rgba(201,164,92,.5); }
.fig-card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 639px) {
  .fig-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fig-tabs::-webkit-scrollbar { display: none; }
  .fig-tab { flex: 0 0 auto; padding: 9px 15px; font-size: 14px; }
}
/* footer: figure links grouped by theme */
.footer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
@media (min-width: 640px) { .footer-groups { grid-template-columns: repeat(4, minmax(0, max-content)); } }
@media (min-width: 1100px) { .footer-groups { grid-template-columns: repeat(7, minmax(0, max-content)); } }
.footer-group__title { margin: 0 0 8px; font: 500 12px/1.4 var(--sans); letter-spacing: .12em; color: var(--gold); }
.footer-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.footer-group a, .footer-groups__more a { font-size: 13px; color: var(--ivory-mute); text-decoration: none; }
.footer-group a:hover, .footer-groups__more a:hover { color: var(--ivory); }
.footer-groups__more { margin: 18px 0 0; font-size: 13px; color: var(--ivory-mute); }
.site-footer__nav:has(.footer-groups) { max-width: none; }
/* === /figure gallery === */
.figure-page .p-hero__sub .nowrap { display: inline-block; max-width: 100%; }

/* prayer text: indent + right amen */
.prayer__text p{text-indent:2em!important}
.prayer__text p.prayer__amen,.prayer__amen{text-align:right!important;text-indent:0!important}
/* === faq === */
.faq { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid rgba(201, 168, 76, 0.16); }
.faq__title { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.18; color: var(--ivory); margin: 0 0 clamp(20px, 2.4vw, 32px); }
.faq__intro { max-width: 46em; margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: 17px; line-height: 1.9; color: rgba(245, 239, 228, 0.82); }
.faq__list { display: grid; gap: 0; max-width: 52em; }
.faq__item { padding: 18px 0; border-bottom: 1px solid rgba(201, 168, 76, 0.14); }
.faq__item:first-child { border-top: 1px solid rgba(201, 168, 76, 0.14); }
.faq__q { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--gold, #c9a84c); }
.faq__a { margin: 0; font-size: 16px; line-height: 1.85; color: rgba(245, 239, 228, 0.78); }
@media (max-width: 599px) { .faq__q { font-size: 17px; } .faq__a, .faq__intro { font-size: 15.5px; } }
/* === topic hubs === */
.figure-page .p-hero__name.p-hero__name--hub { font-size: clamp(48px, 6.2vw, 104px); white-space: normal; }
@media (max-width: 899px) { .figure-page .p-hero__name.p-hero__name--hub { font-size: clamp(40px, 11.5vw, 72px); } }
.hub-figs { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.hub-fig { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: start; padding: 16px; border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 6px; background: rgba(255, 255, 255, 0.02); }
.hub-fig img { width: 112px; height: 140px; object-fit: cover; border-radius: 4px; display: block; }
.hub-fig__name { margin: 0 0 4px; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.4; }
.hub-fig__name a { color: var(--ivory); text-decoration: none; }
.hub-fig__ref { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; color: var(--gold, #c9a84c); }
.hub-fig__text { margin: 0 0 10px; font-size: 15.5px; line-height: 1.8; color: rgba(245, 239, 228, 0.78); }
.prayer--hub .prayer__text { max-width: 40em; }
.hub-more, .faq__related { margin: 24px 0 0; font-size: 15px; line-height: 1.9; color: rgba(245, 239, 228, 0.7); }
.hub-more a, .faq__related a, .topic-links a { color: var(--gold, #c9a84c); }
.topic-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; list-style: none; }
.topic-links a { display: inline-block; padding: 8px 16px; border: 1px solid rgba(201, 168, 76, 0.35); border-radius: 999px; text-decoration: none; font-size: 15px; }
.footer-group__title a { color: inherit; text-decoration: none; }
.footer-group__title a:hover { text-decoration: underline; }
@media (max-width: 599px) { .hub-fig { grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; } .hub-fig img { width: 84px; height: 105px; } }
.faq__intro { max-width: 52em; text-wrap: wrap; } .faq__a, .hub-more, .faq__related { text-wrap: wrap; }
.faq__intro, .faq__list { max-width: 880px; }
.faq__intro, .faq__list { max-width: none; }
.compact-footer .footer-loc { flex: 0 0 100%; margin: 0; }
/* === footer: two columns on desktop — brand left, links + © + music credit right === */
@media (min-width: 1024px) {
  .site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 48px; row-gap: 0; align-items: start; }
  .site-footer__top > div:first-child { display: contents; }
  .site-footer__top .wordmark { grid-column: 1; grid-row: 1 / 3; align-self: end; justify-self: start; }
  .site-footer__top .site-footer__line { grid-column: 1; grid-row: 3 / 5; align-self: start; margin-top: 12px; }
  .site-footer__top .site-footer__nav { grid-column: 2; grid-row: 1 / 3; justify-self: end; margin: 0 0 18px; max-width: none; }
  .site-footer__top .site-footer__nav ul, .site-footer__top .footer-groups__more { justify-content: end; text-align: right; }
  .site-footer__top .footer-loc { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; margin: 0; }
  .site-footer__top:not(:has(.site-footer__nav)) .footer-loc { grid-row: 1 / 3; align-self: end; }
  .compact-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; row-gap: 6px; align-items: center; }
  .compact-footer .wrap > .wordmark { grid-column: 1; grid-row: 1; }
  .compact-footer .wrap > .footer-loc { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; align-self: end; flex: none; }
}
/* === figure-page footer with the 7-theme directory: directory row on top, brand/info row below === */
@media (min-width: 1024px) {
  .site-footer__top:has(.footer-groups) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; row-gap: 0; }
  .site-footer__top:has(.footer-groups) .site-footer__nav { display: contents; }
  .site-footer__top .footer-groups { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 28px; width: 100%; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(243, 234, 216, 0.1); text-align: left; }
  .site-footer__top .footer-group:has(a[href="david-psalm23.html"]) { grid-column: span 2; }
  .site-footer__top .footer-group:has(a[href="david-psalm23.html"]) ul { column-count: 2; column-gap: 28px; display: block; }
  .site-footer__top .footer-group ul { justify-content: start; text-align: left; }
  .site-footer__top:has(.footer-groups) .wordmark { grid-column: 1; grid-row: 2; align-self: end; }
  .site-footer__top:has(.footer-groups) .site-footer__line { grid-column: 1; grid-row: 3 / 5; align-self: start; }
  .site-footer__top:has(.footer-groups) .footer-groups__more { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; align-self: end; margin: 0 0 6px; }
  .site-footer__top:has(.footer-groups) .footer-loc { grid-column: 2; grid-row: 3; }
}
@media (max-width: 1023px) { .site-footer__top .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .site-footer__top:has(.footer-groups) { display: flex; flex-direction: column; gap: 28px; } .site-footer__top:has(.footer-groups) .site-footer__nav { order: -1; padding-bottom: 24px; border-bottom: 1px solid rgba(243, 234, 216, 0.1); } }
/* footer: soft warm text instead of bright white */
.site-footer .wordmark span { color: var(--gold-hi, #e2c27a); }
.site-footer .footer-group a:hover, .site-footer .footer-figs a:hover, .site-footer .footer-groups__more a:hover, .site-footer .wordmark:hover { color: rgba(232, 208, 160, .95); }
/* === Solomon v3 (repaint of the Dream of Solomon, 1672×941; figure + raised hand in the left half, dark clouds right): full-bleed, title on the right === */
.figure-page .p-hero--solomon .p-hero__media img { object-position: 30% 30%; }
@media (min-width: 900px) {
  .figure-page .p-hero--solomon .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0) 18%),
      linear-gradient(270deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0.45) 30%, rgba(11, 10, 9, 0) 50%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.8) 0%, rgba(11, 10, 9, 0) 30%);
  }
  .figure-page .p-hero--solomon .p-hero__content { justify-content: flex-end; }
}
@media (max-width: 899px) { .figure-page .p-hero--solomon .p-hero__media img { object-position: 22% 30%; } }
.home-page #figures #solomon img, #solomon img { object-position: 50% 40%; height: 100%; }
@media (min-width: 900px) { .figure-page .p-hero--solomon .p-hero__block { margin-right: -4vw; transform: translateX(4vw); } }
/* === Jacob v3 (repaint, 1672×941; figures x 35–99%): title on the dark left === */
.figure-page .p-hero--jacob .p-hero__media img { object-position: 100% 0%; }
@media (min-width: 900px) {
  .figure-page .p-hero--jacob .p-hero__content { justify-content: flex-start; max-width: none; }
  .figure-page .p-hero--jacob .p-hero__block { width: min(34%, 520px); }
  .figure-page .p-hero--jacob .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11,10,9,.35) 0%, rgba(11,10,9,0) 6%),
      linear-gradient(90deg, rgba(11,10,9,.8) 0%, rgba(11,10,9,.35) 26%, rgba(11,10,9,0) 40%),
      linear-gradient(0deg, rgba(11,10,9,.8) 0%, rgba(11,10,9,0) 30%);
  }
}
@media (max-width: 899px) { .figure-page .p-hero--jacob .p-hero__media img { object-position: 80% 35%; } }
/* === footer: every variant in the muted warm tone (gold dot keeps its gold) === */
html body footer.site-footer :is(.wordmark, .wordmark__cn, p, a, small) { color: #a8894f !important; opacity: 1; }
html body footer.site-footer .wordmark > span { color: var(--gold-hi, #e2c27a) !important; }
html body footer.site-footer a:hover { color: #ba995c !important; }
@media (min-width: 900px) { .figure-page .p-hero--jacob .p-hero__media { top: 64px; } }
/* === Paul v3 (repaint, 1672×941; Paul seated right ≈ 55–95%): full-width hero, title on the dark wall left === */
@media (min-width: 900px) {
  .figure-page .p-hero--paul .p-hero__media img { object-position: 100% 30%; }
  .figure-page .p-hero--paul .p-hero__block { width: min(34%, 520px); }
  .figure-page .p-hero--paul .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11,10,9,.45) 0%, rgba(11,10,9,0) 10%),
      linear-gradient(0deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,0) 30%);
  }
}
@media (max-width: 899px) { .figure-page .p-hero--paul .p-hero__media img { object-position: 92% 30%; } }
.home-page #figures #paul img, #paul img { object-position: 50% 30%; }
/* === Samuel v3 (repaint, 1672×941; figures x 36–100%, heads ≈ 25–30%): image starts under the nav, title on the dark left === */
.figure-page .p-hero--samuel .p-hero__media img { object-position: 100% 20%; }
@media (min-width: 900px) {
  .figure-page .p-hero--samuel .p-hero__media { top: 64px; left: 34%; }
  .figure-page .p-hero--samuel .p-hero__block { width: min(32%, 500px); }
  .figure-page .p-hero--samuel .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11,10,9,.35) 0%, rgba(11,10,9,0) 6%),
      linear-gradient(90deg, rgba(11,10,9,.7) 0%, rgba(11,10,9,0) 22%),
      linear-gradient(0deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,0) 30%);
  }
}
@media (max-width: 899px) { .figure-page .p-hero--samuel .p-hero__media img { object-position: 82% 20%; } }
.home-page #figures #samuel img, #samuel img { object-position: 50% 30%; }
/* === start these heroes under the nav bar so no head touches it (desktop) === */
@media (min-width: 900px) {
  .figure-page :is(.p-hero--mary, .p-hero--samson, .p-hero--stephen, .p-hero--zechariah) .p-hero__media { top: 64px; }
  .figure-page :is(.p-hero--mary, .p-hero--samson, .p-hero--stephen, .p-hero--zechariah) .p-hero__media::after {
    background:
      linear-gradient(180deg, rgba(11,10,9,.35) 0%, rgba(11,10,9,0) 6%),
      linear-gradient(90deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,.5) 22%, rgba(11,10,9,0) 42%),
      linear-gradient(0deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,0) 30%);
  }
  .figure-page .p-hero--mary .p-hero__media img { object-position: 60% 0%; }
  .figure-page .p-hero--stephen .p-hero__media img { object-position: 50% 35%; }
}
/* Mary + Stephen: picture starts further right so the title sits on plain dark */
@media (min-width: 900px) {
  .figure-page :is(.p-hero--mary, .p-hero--stephen) .p-hero__media { left: 40%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
  .figure-page :is(.p-hero--mary, .p-hero--stephen) .p-hero__block { width: min(36%, 560px); }
}
@media (min-width: 900px) {
  .figure-page :is(.p-hero--mary, .p-hero--stephen) .p-hero__media { left: max(40%, 680px); }
}
/* topic hubs: center the prayer block */
.prayer--hub .wrap > .reveal { max-width: 720px; margin-inline: auto; text-align: center; }
.prayer--hub .prayer__lead { margin-inline: auto; }
.prayer--hub .prayer__text { max-width: none; text-align: left; }
.prayer--hub .prayer__text p.prayer__amen { text-align: right !important; }
.prayer--hub .wrap > .reveal > .eyebrow { justify-content: center; display: flex; }
/* topic hubs: hero title on one line on desktop, sized to the dark column */
@media (min-width: 900px) {
  .figure-page .p-hero__name.p-hero__name--hub { white-space: nowrap; font-size: clamp(44px, 4.6vw, 92px); letter-spacing: 0.04em; }
}
/* thanksgiving hub: painting on the right, title on the dark left */
@media (min-width: 900px) {
  .figure-page .p-hero--hub-thanks .p-hero__media { left: auto; right: 0; width: 55%; }
  .figure-page .p-hero--hub-thanks .p-hero__media img { object-fit: cover; object-position: 50% 30%; }
  .figure-page .p-hero--hub-thanks .p-hero__media::after {
    background: linear-gradient(180deg, rgba(11,10,9,.75) 0%, rgba(11,10,9,0) 20%), linear-gradient(270deg, rgba(11,10,9,0) 62%, rgba(11,10,9,.85) 90%, #0b0a09 100%), linear-gradient(0deg, rgba(11,10,9,.8) 0%, rgba(11,10,9,0) 30%);
  }
  .figure-page .p-hero--hub-thanks .p-hero__content { justify-content: flex-start; }
}
/* flipped heroes: painting right, title on the dark left */
@media (min-width: 900px) {
  .figure-page .p-hero.p-hero--flip .p-hero__media { left: auto; right: 0; width: 56%; }
  .figure-page .p-hero.p-hero--flip .p-hero__media img { object-fit: cover; object-position: 50% 25%; }
  .figure-page .p-hero.p-hero--flip .p-hero__media::after {
    background: linear-gradient(180deg, rgba(11,10,9,.75) 0%, rgba(11,10,9,0) 20%), linear-gradient(270deg, rgba(11,10,9,0) 60%, rgba(11,10,9,.85) 90%, #0b0a09 100%), linear-gradient(0deg, rgba(11,10,9,.8) 0%, rgba(11,10,9,0) 30%);
  }
  .figure-page .p-hero.p-hero--flip .p-hero__content { justify-content: flex-start; }
}
/* home hero v2: keep text clear of the praying hands */
@media (min-width: 900px) {
  .home-page .hero__media { left: 40%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
  .home-page .hero__media img { object-position: 55% 35%; }
}
@media (max-width: 899px) {
  .home-page .hero { min-height: 0; }
  .home-page .hero__media { inset: 0 0 auto 0; height: min(134vw, 66svh); }
  .home-page .hero__media img { object-position: 50% 30%; }
  .home-page .hero__media::after { background: linear-gradient(180deg,#0b0a0980,transparent 22%),linear-gradient(0deg,#0b0a09 0%,#0b0a09cc 14%,transparent 40%); }
  .home-page .hero__content { padding-top: calc(min(134vw, 66svh) - 24px); }
}

/* Painting light: percentages belong to the full rendered image, before cropping. */
.home-page .hero__media { z-index: 0; overflow: hidden; isolation: isolate; }
.home-page .hero__content { position: relative; z-index: 1; }
.home-page .hero__media img { display: block; animation: none; transform: none; }
.home-page .hero__media::after { z-index: 2; pointer-events: none; }
.hero__glow {
  position: absolute;
  left: var(--image-left, 0px);
  top: var(--image-top, 0px);
  width: var(--image-width, 100%);
  height: var(--image-height, 100%);
  /* Above the painting and its gradients, inside the media below the text. */
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
}
.hero--anim-ready .hero__glow { visibility: visible; }
.hero__glow > span { position: absolute; z-index: 0; mix-blend-mode: screen; }
/* Restore the foreground hair above the light, in the same image coordinates. */
.home-page .hero__glow > .hero__head {
  position: absolute;
  left: 31.9521%;
  top: 25.1381%;
  width: 32.5046%;
  height: 21.8232%;
  z-index: 2;
  object-fit: fill;
  animation: none;
  transform: none;
}

.hero__glow > .hero__halo {
  z-index: 1;
  left: 48.5%;
  top: 28%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 151, .95), rgba(246, 190, 86, .65) 36%, rgba(227, 157, 57, .22) 58%, transparent 72%);
  transform: translate(-50%, -50%) scale(.94);
  opacity: .15;
}
.hero__beam {
  left: 32%;
  top: 14.5%;
  width: 14%;
  height: 35%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 230, 171, .9), rgba(246, 201, 121, .5) 40%, rgba(224, 167, 76, .15) 58%, transparent 72%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(-32deg);
  opacity: .08;
}
.hero__mote, .hero__star { left: var(--x); top: var(--y); }
.hero__mote {
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: rgb(255, 231, 180);
  box-shadow: 0 0 5px 1px rgba(255, 217, 143, .7), 0 0 10px rgba(246, 195, 102, .35);
  opacity: .4;
}
.hero__star {
  width: var(--size, 12px);
  height: var(--size, 12px);
  filter: drop-shadow(0 0 3px rgba(255, 226, 166, .85));
  transform: translate(-50%, -50%) scale(.6);
  opacity: .1;
}
.hero__star::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255, 239, 205);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
/* The left sky falls under the desktop title fade. */
@media (min-width: 900px) {
  .hero__star--left { display: none; }
}
.hero--anim-ready .hero__halo { animation: hero-halo 8s ease-in-out infinite; }
.hero--anim-ready .hero__beam { animation: hero-beam 10s ease-in-out infinite; }
.hero--anim-ready .hero__mote { animation: hero-mote var(--duration, 16s) ease-in-out var(--delay, 0s) infinite alternate; }
.hero--anim-ready .hero__star { animation: hero-star var(--duration, 4s) ease-in-out var(--delay, 0s) infinite; }
.hero .hero__glow > span { animation-play-state: paused; }
.hero--anim-visible.hero--anim-ready .hero__glow > span { animation-play-state: running; }
@keyframes hero-halo {
  0%, 100% { opacity: .15; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: .45; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes hero-beam {
  0%, 100% { opacity: .08; }
  50% { opacity: .3; }
}
@keyframes hero-mote {
  from { opacity: .4; transform: translate(-2px, 5px); }
  to { opacity: .9; transform: translate(2px, -8px); }
}
@keyframes hero-star {
  0%, 100% { opacity: .1; transform: translate(-50%, -50%) scale(.6) rotate(-8deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__glow { display: none; }
  .hero .hero__glow > span { animation: none; }
}

/* Section sky: above the background/painting, below the content. */
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}
.hero--anim-ready .hero__sky { visibility: visible; }
.hero__sky-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: .08;
  transform: translate(-50%, -50%) scale(.85);
}
.hero__sky-star:not(.hero__star) {
  border-radius: 50%;
  background: rgb(255, 239, 205);
  box-shadow: 0 0 4px 1px rgba(255, 226, 166, .3);
}
.hero--anim-ready .hero__sky > .hero__sky-star {
  animation: hero-sky-twinkle var(--duration) ease-in-out var(--delay) infinite;
  animation-play-state: paused;
}
.hero--anim-ready.hero--anim-visible .hero__sky > .hero__sky-star {
  animation-play-state: running;
}
@keyframes hero-sky-twinkle {
  0%, 100% { opacity: .08; transform: translate(-50%, -50%) scale(.85); }
  50% { opacity: var(--peak); transform: translate(-50%, -50%) scale(1.05); }
}
/* The painting stacks above the copy at tablet widths; keep the sky sparse too. */
@media (max-width: 899px) {
  .hero__sky-star { left: var(--mobile-x); top: var(--mobile-y); }
  .hero__sky-star:nth-child(n + 7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__sky { display: none; }
  .hero .hero__sky > .hero__sky-star { animation: none; }
}

/* Public prayer engagement */
.engage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 24px; }
.engage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--gold); font: inherit; font-size: 14px; line-height: 1.6; cursor: pointer; text-decoration: none; }
.engage-btn:hover, .engage-btn[aria-pressed="true"] { background: rgba(201,164,92,.12); color: var(--gold-hi); }
.engage-btn:disabled { opacity: .6; cursor: wait; }
.engage-btn:focus-visible, .share-sheet :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.engage-status { flex-basis: 100%; color: var(--ivory-mute); font-size: 13px; }
.engage-status:empty { display: none; }
.engage-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); color: var(--gold); }
.engage-dialog::backdrop { background: rgba(0,0,0,.8); }
.engage-dialog__close { display: flex; margin-left: auto; margin-bottom: 12px; }
.engage-card-preview { display: block; width: 100%; max-height: 65dvh; object-fit: contain; }
.engage-qr { width: 272px; max-width: 100%; padding: 16px; margin: 20px auto; background: #fff; }
.engage-qr img, .engage-qr canvas { max-width: 100%; }
.wall-card.is-share-target { outline: 2px solid var(--gold); outline-offset: 4px; scroll-margin-top: 100px; }
.wall-card__foot { flex-wrap: wrap; }
.wall-card__foot .engage-btn { font-size: 12px; padding: 6px 10px; }
.wall-card__foot .engage-btn .ic { width: 16px; height: 16px; }
.hero__actions .engage-btn { margin-left: 12px; }

/* Sharing action placement; the shared metallic treatment is defined below. */
.p-hero__actions { margin-top: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__actions .engage-btn { margin-left: 0; }
[data-page-engage] { gap: 12px; margin-top: 24px; }
[data-page-engage] [data-scripture-card] { min-height: 48px; padding: 11px 20px; font-size: 16px; font-weight: 600; border-color: var(--gold); }
.share-float { display: none; }
@media (max-width: 768px) {
  .share-float {
    display: inline-flex; position: fixed; z-index: 130;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: max(var(--share-nav-clearance, 100px), calc(88px + env(safe-area-inset-bottom, 0px)));
    min-height: 56px; padding: 12px 18px; border-radius: 999px; font-size: 18px;
    box-shadow: 0 4px 18px rgba(11,10,9,.35);
  }
  .wall-card .wall-card__foot { gap: 8px; }
  .wall-card__foot .wall-who { flex-basis: 100%; }
  .wall-card__foot .engage-btn, .wall-card__foot .wall-count, .wall-card__foot .wall-pray { white-space: nowrap; }
  [data-page-engage] .share-btn, [data-page-engage] [data-scripture-card] { flex: 1 1 auto; }
  [data-page-engage] [data-page-amen] { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .share-btn { transition: none; }
}

/* Shared bottom sheet, on every screen size. */
.share-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; box-sizing: border-box; width: 100%; max-width: 480px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 24px 0 0; border: 1px solid rgba(232,199,122,.2); border-top-color: #E8C77A; border-bottom: 0; border-radius: 22px 22px 0 0; background: linear-gradient(180deg,#2a2116 0%,#1E1810 40%); background-color: #1E1810; color: #F6E7C1; box-shadow: 0 -12px 48px rgba(12,10,8,.35); }
.share-sheet[open] { animation: share-sheet-in 240ms cubic-bezier(.16,1,.3,1); }
.share-sheet::backdrop { background: rgba(12,10,8,.72); }
.share-sheet h2 { margin: 0 24px 22px; text-align: center; font: inherit; font-size: 18px; font-weight: 600; color: #F6E7C1; }
.share-sheet__row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 22px 0; padding: 3px 12px 20px; }
.share-sheet__item { grid-column: span 2; min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 10px; border: 0; padding: 0; background: transparent; color: #E8C77A; font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.share-sheet__icon { display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border: 2px solid #E8C77A; border-radius: 50%; color: #F3D58C; background: #1E1810; box-shadow: 0 0 10px rgba(243,213,140,.28); }
.share-sheet__icon svg { width: 28px; height: 28px; }
.share-sheet__wordmark { font-size: 12px; font-weight: 700; }
.share-sheet__letter { font-size: 26px; font-weight: 600; }
.share-sheet__item:hover .share-sheet__icon, .share-sheet__item:focus-visible .share-sheet__icon { border-color: #F3D58C; background: #2a2116; box-shadow: 0 0 10px rgba(243,213,140,.42); }
.share-sheet__panel { padding: 8px 24px 20px; text-align: center; }
.share-sheet__panel p { color: #E8C77A; font-size: 13px; line-height: 1.7; }
.share-sheet__panel .engage-qr { margin: 16px auto; width: 200px; }
.share-sheet__panel .engage-qr img, .share-sheet__panel .engage-qr canvas { max-width: 100%; }
.share-sheet__panel textarea { width: 100%; color: #F3D58C; background: #1E1810; }
.share-sheet__panel .engage-btn { color: #F3D58C; border-color: #E8C77A; background: #1E1810; }
.share-sheet__toast { margin: 0; min-height: 24px; padding: 0 24px 12px; text-align: center; color: #F3D58C; font-size: 13px; }
.share-sheet__cancel { width: 100%; min-height: 56px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(232,199,122,.35); color: #F3D58C; background: #1E1810; font: inherit; font-size: 15px; cursor: pointer; }
.share-sheet__cancel:hover { background: #2a2116; }
.share-sheet :focus-visible { outline: 2px solid #F3D58C; outline-offset: 3px; }
@keyframes share-sheet-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .share-sheet[open] { animation: none; } }

/* Framed gold actions. At DPR 1, 128px assets render at half size.
   WCAG contrast: #3b200c on #e2bd5e = 8.35:1. */
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save) {
  --gold-button-height: 64px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: var(--gold-button-height); min-height: 0;
  min-width: 0; max-width: 100%; gap: 12px;
  padding: 0 calc(var(--gold-button-height) * .62);
  border: 0; border-radius: 999px;
  background: url(/images/ui/btn-cap-l3.webp) left center / auto 100% no-repeat,
    url(/images/ui/btn-cap-r3.webp) right center / auto 100% no-repeat,
    url(/images/ui/btn-mid2.webp) center / 100% 100% no-repeat;
  color: #3b200c; font-family: var(--serif); font-size: 19px;
  font-weight: 700; line-height: 1; letter-spacing: .025em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,232,170,.65), 0 -1px 0 rgba(40,20,5,.35);
  box-shadow: 0 0 18px rgba(230,180,80,.25), 0 4px 8px rgba(40,20,5,.3);
  opacity: 1; filter: none; cursor: pointer;
  transition: filter .4s ease, transform .2s ease;
}
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save)::before { content: none; }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save)::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,250,220,.5) 50%, transparent 70%);
  transform: translateX(-140%);
}
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):is(:hover, :focus-visible):not(:disabled) { filter: brightness(1.06); }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):focus-visible { outline: 2px solid #efd38a; outline-offset: 4px; }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):active:not(:disabled) { transform: translateY(1px); }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):disabled { opacity: .6; cursor: not-allowed; }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save) svg, :is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save) .arrow {
  color: #3b200c; flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(255,232,170,.6));
}
.share-classic > span { display: inline-flex; align-items: center; gap: 12px; background: none; color: inherit; }
.share-classic > span::before {
  content: ""; width: 2px; height: calc(var(--gold-button-height) * .55); flex: 0 0 2px;
  background: linear-gradient(to right, #3b200c 0 1px, rgba(255,232,170,.65) 1px 2px);
}
.share-classic .share-icon, #shareBtn.share-classic svg,
.wall-card__foot .share-classic .share-icon {
  width: 26px; height: 26px; flex: 0 0 auto; fill: #3b200c; stroke: none;
  filter: drop-shadow(0 1px 0 rgba(255,232,170,.6));
}
.share-classic:disabled { opacity: 1; cursor: wait; }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):is(.btn-sm, [class*="--sm"], .share-classic--card, .share-classic--footer, .btn-save-reminder, .dy-hint__btn,
  :where(.wall-card, .dy-card, .p-card, .card, footer, .site-footer) *) {
  --gold-button-height: 46px; font-size: 16px; gap: 8px;
}
.share-classic:is([class*="--sm"], [class*="--card"], [class*="--footer"]) > span { gap: 8px; }
.share-classic:is([class*="--sm"], [class*="--card"], [class*="--footer"]) .share-icon,
.wall-card__foot .share-classic .share-icon { width: 20px; height: 20px; }
:is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):is(.share-float, .share-classic--floating) {
  --gold-button-height: 56px; width: 56px; height: 56px; padding: 0; gap: 0;
  background: radial-gradient(circle, #f3d27a 0%, #e2bd5e 55%, #b98a2f 100%);
  box-shadow: inset 0 0 0 3px #d9b052, inset 0 0 0 5px #8a6122,
    0 0 18px rgba(230,180,80,.25), 0 4px 8px rgba(40,20,5,.3);
}
.share-classic:is(.share-float, .share-classic--floating) > span { display: none; }
@media (max-width: 768px) {
  :is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):is(.share-float, .share-classic--floating) { position: fixed; }
}
@media (max-width: 480px) {
  :is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save) { font-size: 16px; letter-spacing: 0; gap: 8px; }
  /* Long figure CTAs need slightly tighter in-rim padding on narrow screens. */
  .figure-page .btn-primary.figure-cta { padding-inline: 32px; gap: 4px; }
}
.reminder-btn-wrap { width: 124px; height: 46px; align-self: center; }
/* Dim example content individually so share actions retain full contrast. */
.dy-card.dy-card--sample:has(.share-classic) { opacity: 1; filter: none; }
.dy-card--sample:has(.share-classic) .dy-card__thumb,
.dy-card--sample:has(.share-classic) .dy-card__body > :not(.dy-card__share) { opacity: .72; filter: saturate(.8); }
.dy-card__share { opacity: 1; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  :is(button.share-classic, :is(.btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save)):is(:hover, :focus-visible):not(:disabled)::after { animation: gold-cta-shimmer 1.8s ease-out; }
}
@keyframes gold-cta-shimmer { to { transform: translateX(140%); } }
@media (prefers-reduced-motion: reduce) {
  :is(button.share-classic, :is(.btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save)), :is(.btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save) .arrow { transition: none; }
  :is(button.share-classic, :is(.btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save))::after { animation: none; }
  :is(button.share-classic, :is(.btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save)):active, :is(.btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):hover .arrow { transform: none; }
}
@media (min-width: 900px) {
  /* Match every section's .wrap, overriding earlier full-width hero variants. */
  .figure-page .p-hero .p-hero__content {
    max-width: var(--maxw);
    margin-block: auto;
    padding-block: 56px;
    align-items: center;
  }
  .figure-page .p-hero .p-hero__block { margin-right: 0; transform: none; }
  .figure-page .p-hero--solomon:not(.p-hero--flip) .p-hero__block { text-align: right; }
  .figure-page .p-hero .p-hero__sub .nowrap { display: block; white-space: normal; }
}
@media (min-width: 1280px) {
  .figure-page .p-hero .p-hero__name { font-size: clamp(108px, 10vw, 164px);
  }
  .figure-page .p-hero.p-hero--moses .p-hero__name { font-size: clamp(200px, 11vw, 216px); }
  .figure-page .p-hero .p-hero__name--hub { font-size: clamp(52px, 4.8vw, 94px); }
  .figure-page .p-hero .p-hero__sub { font-size: clamp(26px, 1.8vw, 35px); }
  .figure-page .p-hero.p-hero--gethsemane .p-hero__name { font-size: clamp(72px, 5.8vw, 112px); }
  .figure-page .p-hero.p-hero--zechariah .p-hero__name { font-size: clamp(88px, 7.8vw, 124px); }
}
@media (min-width: 769px) { :is(.share-classic, .btn-gold, .btn-primary, .btn-save-reminder, .dy-save, .dy-hint__btn, .ab-btn--gold, .bookmarks-page #btn-login, .bookmarks-page .modal .btn-save):is(.share-float, .share-classic--floating) { display: none; } }

@media (min-width: 1280px) {
  .figure-page .p-hero.p-hero--abraham .p-hero__name { font-size: clamp(96px, 8vw, 124px); }
  .figure-page .p-hero.p-hero--samuel .p-hero__name { font-size: clamp(100px, 7vw, 116px); }
  .figure-page .p-hero:is(.p-hero--mary, .p-hero--stephen) .p-hero__name { font-size: clamp(108px, 8vw, 130px); }
}
@media (min-width: 1600px) {
  .figure-page .p-hero--moses .p-hero__sub { max-width: 10.5em; }
}

/* Old Safari/WebView modal surface; vh precedes dvh for older engines. */
.share-fallback-surface { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(12,10,8,.8); }
.share-modal-fallback { display: block; z-index: 10001; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.engage-dialog.share-modal-fallback { position: relative; inset: auto; margin: auto; box-sizing: border-box; }
.share-sheet.share-modal-fallback { position: absolute; inset: auto 0 0; margin: 0 auto; }
.share-inapp { position: fixed; inset: 0; z-index: 10000; box-sizing: border-box; padding: 190px 24px 32px; overflow: auto; color: #efd38a; background: rgba(0,0,0,.9); text-align: center; }
.share-inapp__arrow { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; width: 160px; height: 160px; }
.share-inapp p { font-size: 21px; line-height: 1.7; }
.share-inapp small { display: block; margin: 24px 0 16px; font-size: 14px; }
.share-inapp .engage-actions { justify-content: center; flex-wrap: wrap; }
.share-global-toast { position: fixed; z-index: 2147483647; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 48px); box-sizing: border-box; padding: 12px 18px; border: 1px solid #E8C77A; border-radius: 8px; background: #1E1810; color: #F3D58C; text-align: center; font-size: 14px; pointer-events: none; }

/* Keep the painting's shading over the light and head cutout so the cutout matches the painting exactly. */
.home-page .hero__media::after { z-index: 4; pointer-events: none; }

/* v150: clearer halo and beam, brighter left stars. */
.hero__glow > .hero__halo { width: 19%; }
@keyframes hero-halo {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: .75; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes hero-beam {
  0%, 100% { opacity: .2; }
  50% { opacity: .5; }
}
@media (min-width: 900px) { .hero__star--left { display: block; } }
.hero__star--left { width: calc(var(--size, 12px) * 1.7); height: calc(var(--size, 12px) * 1.7); filter: drop-shadow(0 0 4px rgba(255, 226, 166, .95)) drop-shadow(0 0 9px rgba(246, 195, 102, .5)); }
.hero__sky-star { width: calc(var(--size) * 1.8); height: calc(var(--size) * 1.8); }
.hero__sky-star.hero__star { width: calc(var(--size) * 1.8); height: calc(var(--size) * 1.8); min-width: 11px; min-height: 11px; filter: drop-shadow(0 0 4px rgba(255, 226, 166, .95)) drop-shadow(0 0 10px rgba(246, 195, 102, .5)); }
.hero__sky-star:not(.hero__star) { box-shadow: 0 0 6px 2px rgba(255, 226, 166, .6), 0 0 12px rgba(246, 195, 102, .3); }
@keyframes hero-sky-twinkle {
  0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.8); }
  50% { opacity: .95; transform: translate(-50%, -50%) scale(1.1); }
}

/* v152: individual light rays fanning from the painted light source toward the head. */
.hero__glow > .hero__beam { display: none; }
.hero__glow > .hero__ray {
  left: 24%;
  top: 2.5%;
  width: var(--w);
  height: var(--len);
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(var(--a));
  background: linear-gradient(180deg, rgba(255, 244, 214, 0) 0%, rgba(255, 240, 200, .95) 8%, rgba(255, 224, 160, .55) 45%, rgba(246, 200, 120, 0) 100%);
  filter: blur(3px);
  border-radius: 50%;
  opacity: .1;
}
.hero--anim-ready .hero__glow > .hero__ray { animation: hero-ray var(--duration) ease-in-out var(--delay) infinite; }
@keyframes hero-ray {
  0%, 100% { opacity: .08; }
  45% { opacity: var(--peak); }
  60% { opacity: calc(var(--peak) * .6); }
}
@media (prefers-reduced-motion: reduce) { .hero__glow > .hero__ray { animation: none !important; } }

/* ===== Phones & tablets (<1024px): the same grapevine/baroque pattern as the desktop gutters,
   as one continuous, unmasked layer behind all content (scroll-attached; fixed is janky on iOS). ===== */
@media (max-width: 1023px) {
  body { position: relative; }
  body::before,
  .figure-page .scripture::before,
  .figure-page .prayer::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url(../images/pattern-baroque.webp) center top / 200px 200px repeat;
    opacity: .22;
  }
  .figure-page .scripture,
  .figure-page .prayer { position: relative; isolation: isolate; }
}

/* footer divider rules: brighter muted antique gold, 1px, fading at both ends (all pages) */
.site-footer .site-footer__top,
.site-footer .site-footer__nav,
.site-footer .footer-groups {
  border-image: linear-gradient(90deg, rgba(201,162,90,0), rgba(201,162,90,.6) 14%, rgba(201,162,90,.6) 86%, rgba(201,162,90,0)) 1;
}

/* ===== Sitewide divider lines (v175): same as the footer rules — 1px muted antique gold
   rgba(201,162,90,.6); standalone separators fade out at both ends. Frames, cards, buttons untouched. ===== */
:root { --rule-gold: rgba(201,162,90,.6); --rule-fade: linear-gradient(90deg, rgba(201,162,90,0), var(--rule-gold) 14%, var(--rule-gold) 86%, rgba(201,162,90,0)) 1; }
section.faq, section.cta, section.more-prayers, .faq--home,
.faq__list .faq__item, .ab-list > li, .reminder-divider { border-image: var(--rule-fade); }
.modal-divider { background: linear-gradient(90deg, rgba(201,162,90,0), var(--rule-gold) 14%, var(--rule-gold) 86%, rgba(201,162,90,0)); }
/* full-width bar edges (top bar / bottom tab bar) */
.top-bar, #topbar { border-bottom-color: var(--rule-gold); }
.bottom-nav { border-top-color: var(--rule-gold); }

/* homepage "你今天怎么了？" options: one line on phones (360–430px), arrow stays aligned */
@media (max-width: 639px) {
  .home-page #figures .mood { white-space: nowrap; font-size: clamp(13px, 3.9vw, 16px); letter-spacing: 0; gap: 4px; }
  .home-page #figures .mood > span:first-child { min-width: 0; overflow: hidden; text-overflow: clip; }
}
/* figure-page prayers: 阿们 centred, large Songti (gold on the dark band) */
.prayer__text p.prayer__amen, .prayer__amen, .prayer--hub .prayer__text p.prayer__amen { text-align: center !important; text-indent: 0 !important; font-family: "Noto Serif SC", var(--serif) !important; font-weight: 700; font-size: 1.9em; line-height: 1.5; letter-spacing: .45em !important; padding-left: .45em; margin-top: .7em; }
/* mood heading (此刻，你心里有什么想对神说？): one balanced line on phones */
.home-page #figures .mood-picker__title { text-wrap: balance; }
@media (max-width: 639px) { .home-page #figures .mood-picker__title { font-size: clamp(19px, 6.1vw, 26px); letter-spacing: 0; } }

/* Prayer invitation: warm photographic backdrop and accessible live text. */
.home-page #figures .mood-picker {
  position: relative; isolation: isolate; padding: 52px 0 0;
  margin-bottom: 64px;
}
.home-page #figures .mood-picker::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 -40px 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(11,10,9,.84) 35%, rgba(11,10,9,.08) 78%), linear-gradient(0deg, var(--ink) 5%, transparent 70%), url('../images/cross-wide.webp') right top / cover no-repeat;
}
.home-page #figures .mood-picker__eyebrow {
  display: flex; align-items: center; gap: 24px; max-width: 670px;
  margin: 0 0 24px; color: var(--gold); font: 500 16px/1.6 var(--serif); letter-spacing: .16em;
}
.home-page #figures .mood-picker__eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.home-page #figures .mood-picker__title {
  max-width: 100%; margin: 0 0 22px; color: var(--gold-hi);
  font-size: clamp(30px, 3.6vw, 52px); font-weight: 600; line-height: 1.45; letter-spacing: .02em;
  text-wrap: balance;
}
.home-page #figures .mood-picker__verse { margin: 0 0 34px; max-width: 740px; color: var(--ivory-soft); font: 400 20px/1.8 var(--serif); }
.home-page #figures .mood-picker__verse p { margin: 0; }
.home-page #figures .mood-picker__verse cite { font-style: normal; font-size: 17px; }
.home-page #figures .moods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.home-page #figures .moods li { display: flex; min-width: 0; }
.home-page #figures .mood {
  width: 100%; min-height: 62px; padding: 13px 15px; gap: 9px;
  font-size: 16px; letter-spacing: 0; white-space: nowrap;
  border-color: var(--gold); background: linear-gradient(180deg, rgba(201,164,92,.14), rgba(11,10,9,.86));
}
.home-page #figures .mood > span[data-i18n] { flex: 1; }
.home-page #figures .mood__icon { width: 23px; height: 23px; flex: 0 0 23px; color: var(--gold-hi); }
.home-page #figures .mood .arrow { font-size: 18px; }
.home-page #figures .mood:hover, .home-page #figures .mood:focus-visible { background: var(--gold); color: var(--ink); }
.home-page #figures .mood:hover .mood__icon, .home-page #figures .mood:focus-visible .mood__icon { color: var(--ink); }
.home-page #figures .mood:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.home-page #figures .mood-picker__divider { display: flex; align-items: center; gap: 18px; margin-top: 40px; color: var(--gold); }
.home-page #figures .mood-picker__divider::before, .home-page #figures .mood-picker__divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.home-page #figures .mood-picker__divider::after { transform: rotate(180deg); }
.home-page #figures .mood-picker__divider span { font-size: 30px; line-height: 1; }
@media (min-width: 900px) and (max-width: 1199px) {
  .home-page #figures .moods { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-page #figures .mood { padding-inline: 13px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .home-page #figures .moods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-page #figures .moods li:last-child { grid-column: auto; }
}
@media (max-width: 599px) {
  .home-page #figures .mood-picker { padding-top: 28px; margin-bottom: 44px; }
  .home-page #figures .mood-picker::before { inset: 0 -20px 0; background-position: center, center, 70% top; opacity: .7; }
  .home-page #figures .mood-picker__eyebrow { font-size: 12px; gap: 12px; margin-bottom: 18px; }
  .home-page #figures .mood-picker__title { font-size: clamp(27px, 7.4vw, 38px); line-height: 1.55; letter-spacing: 0; }
  .home-page #figures .mood-picker__verse { font-size: 16px; line-height: 1.85; margin-bottom: 26px; }
  .home-page #figures .mood-picker__verse cite { font-size: 14px; }
  .home-page #figures .moods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-page #figures .mood { min-height: 55px; padding: 12px 10px; gap: 6px; font-size: clamp(12px, 3.5vw, 16px); }
  .home-page #figures .mood__icon { width: 20px; height: 20px; flex-basis: 20px; }
  .home-page #figures .mood .arrow { font-size: 16px; }
  .home-page #figures .mood-picker__divider { margin-top: 30px; }
}

/* Position the invitation cross lower and to the right of the heading. */
@media (min-width: 600px) {
  .home-page #figures .mood-picker::before {
    background-size: auto, auto, auto 100%;
    background-position: center, center, calc(100% + 310px) 65px;
  }
}

/* Three rows keep the prayer links clear of the cross on the right. */
@media (min-width: 900px) {
  .home-page #figures .moods { width: 68%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-page #figures .mood { padding-inline: 12px; gap: 7px; font-size: 15px; }
  .home-page #figures .mood-picker::before { background-size: auto, auto, auto 430px; background-position: center, center, calc(86% + 290px) 65px; }
}

@media (min-width: 900px) and (max-width: 1199px) {
 .home-page #figures .mood { font-size: 13px; padding-inline: 8px; gap: 5px; }
 .home-page #figures .mood__icon { width: 20px; height: 20px; flex-basis: 20px; }
 .home-page #figures .moods { width: 74%; }
}

/* Bring the invitation closer to the generate-prayer action. */
.home-page .pray-section { padding-bottom: 24px; }
.home-page #figures { padding-top: 16px; }
.home-page #figures .mood-picker { padding-top: 24px; }