/* ==========================================================================
   永爱圣经宣道教会 ABMC · abmcla.org
   One stylesheet, no framework. Warm, photo led, Chinese first.
   ========================================================================== */

:root {
  /* brand: sampled from the church logo (#C0B02C) */
  --gold:        #C0B02C;
  --gold-deep:   #8A7C1E;   /* passes AA on cream for text and links */
  --gold-soft:   #EFE9C9;
  --gold-wash:   #FAF6E4;

  --ink:         #211E16;
  --ink-soft:    #56503F;
  --ink-faint:   #7A7360;

  --cream:       #FDFBF5;
  --cream-2:     #F7F2E6;
  --white:       #FFFFFF;

  --forest:      #2B3227;   /* footer and photo overlays */
  --forest-soft: #3C4536;

  --line:        #E6DECA;
  --line-soft:   #F0E9D8;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
               "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-display: Lora, Georgia, "Times New Roman",
               "Songti SC", "STSong", "SimSun", serif;

  --wrap: 1280px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(33, 30, 22, .05), 0 10px 30px rgba(33, 30, 22, .07);
  --shadow-lg: 0 2px 6px rgba(33, 30, 22, .06), 0 24px 60px rgba(33, 30, 22, .13);

  /* Vertical rhythm between sections. The floor is what a phone actually
     gets: at 375px wide every clamp below sits on its minimum, so the
     minimums are the mobile design, not a safety net. They were set for a
     desktop and left the phone looking half empty. */
  --step: clamp(40px, 8vw, 104px);
}

/* --------------------------------------------------------------- reset -- */

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

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

/* the header is sticky, so an in page anchor must stop below it */
:target, [id] { scroll-margin-top: 92px; }

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

/* The page colour lives on <html> so that body::before can sit behind the
   content but still in front of the background. */
html { background: var(--cream); }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* 圣光：整站背景
   Three soft pools of warm light drifting across the whole page, very slowly.
   They sit behind everything (z-index -1) and only show through the sections
   that have no background of their own, so text contrast is never touched.
   One fixed layer, transform and opacity only, so it costs nothing to animate
   and never repaints while scrolling. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 16% 14%, rgba(255, 229, 168, .66), transparent 68%),
    radial-gradient(32% 38% at 84% 34%, rgba(255, 241, 206, .54), transparent 70%),
    radial-gradient(46% 40% at 46% 86%, rgba(255, 225, 160, .42), transparent 72%);
}
/* A second pool, slower and moving the other way. One layer on its own only
   drifts; two layers growing against each other read as light swelling and
   receding, which is the 景深 Chris asked for. */
body::after {
  content: ""; position: fixed; inset: -26%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 44% at 72% 8%, rgba(255, 244, 214, .52), transparent 70%),
    radial-gradient(44% 46% at 24% 66%, rgba(255, 231, 178, .44), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: ambient-grow 46s ease-in-out infinite alternate; }
  body::after { animation: ambient-swell 71s ease-in-out infinite alternate; }
}
@keyframes ambient-grow {
  from { transform: translate3d(-2.5%, -2%, 0) scale(1); opacity: .6; }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.3); opacity: 1; }
}
@keyframes ambient-swell {
  from { transform: translate3d(3%, 2%, 0) scale(1.26); opacity: .28; }
  to   { transform: translate3d(-3%, -2%, 0) scale(.92); opacity: .78; }
}

img, svg, video { max-width: 100%; display: block; }
picture { display: block; }
img { height: auto; background: var(--cream-2); }

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

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .6em; font-weight: 700; letter-spacing: 0; }
h1 { font-size: clamp(30px, 5.2vw, 50px); }
h2 { font-size: clamp(25px, 3.6vw, 36px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

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

/* Hidden from the screen, still read aloud. The !important is deliberate:
   a layout rule further down (.bless > *, say) that sets position:relative
   turns the label back into an inline box, and width/height/clip stop
   applying to inline boxes, so the text reappears in the middle of the page.
   Pinning position is what keeps this reliable. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- layout --- */

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

.section { padding-block: var(--step); }
.section-tight { padding-block: clamp(28px, 5vw, 64px); }
/* Two sections in a row on the same background stack their padding, so 64 at
   the bottom of one plus 104 at the top of the next reads as an empty screen.
   Where the background does not change, the pair shares one gap. Sections
   that bring their own colour keep theirs: there the padding is what gives
   the band its height. */
:is(.section, .section-tight):not(.section-cream, .section-gold, .section-dark)
  + :is(.section, .section-tight):not(.section-cream, .section-gold, .section-dark) {
  padding-top: 0;
}
.section-cream { background: var(--cream-2); }
.section-gold { background: var(--gold-wash); }
.section-dark { background: var(--forest); color: #F2EEE2; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a:not(.btn) { color: var(--gold); }

.eyebrow {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin: 0 0 14px;
}
.section-dark .eyebrow { color: var(--gold); }

.lede { font-size: clamp(18px, 2vw, 20px); color: var(--ink-soft); }

.section-head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-inline: auto; text-align: center; }

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

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(253, 251, 245, .94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 76px;
}

.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
  padding-block: 6px;          /* keeps the logo off the header edges */
}
.brand img { width: 48px; height: 48px; border-radius: 8px; flex: none; }
.brand-name {
  display: block; font-weight: 700; font-size: 17px; line-height: 1.3;
  margin-bottom: 3px;          /* the two lines were running together */
}
.brand-sub {
  display: block; font-size: 11px; color: var(--ink-faint);
  letter-spacing: .02em; line-height: 1.25; white-space: nowrap;
}
.brand > span { min-width: 0; display: block; }

.site-nav ul {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  display: block; padding: 9px 10px; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--gold-wash); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--gold-deep); font-weight: 700; }

.header-cta { display: flex; align-items: center; gap: 10px; }

.lang-link {
  font-size: 14px; padding: 8px 13px; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink-soft);
}
.lang-link:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.nav-toggle {
  display: none; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

@media (max-width: 600px) {
  .header-row { min-height: 62px; gap: 10px; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 15px; }
  .brand-sub { display: none; }
  .lang-link { padding: 7px 11px; font-size: 13px; }
  .nav-toggle { padding: 8px 11px; font-size: 14px; gap: 7px; }
}

@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 10px 20px 20px;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 13px 10px; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .header-cta .btn { display: none; }
}

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

.hero { position: relative; background: var(--forest); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture { width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .52; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,28,21,.72) 0%, rgba(23,28,21,.42) 45%, rgba(23,28,21,.86) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-block: clamp(52px, 11vw, 150px); }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero .lede { color: #EDE9DC; max-width: 48ch; font-size: clamp(17px, 2vw, 20px); }
.hero .eyebrow { color: var(--gold); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* 圣光与慢动作
   两层都是纯 CSS，没有 JS、没有影片，交给 GPU 合成，手机上几乎不耗电。
   一层是照片极慢的推近（32 秒走完，肉眼几乎看不出在动，只觉得画面是活的），
   一层是斜斜落下来的暖光，缓缓飘移。
   两层都包在 prefers-reduced-motion 里：系统设定「减少动态效果」的人完全看不到，
   这对会晕眩的长辈很重要。 */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img {
    animation: hero-drift 32s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes hero-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(0, -1.2%, 0); }
  }

  .hero::before {
    content: ""; position: absolute; inset: -25%; z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(42% 60% at 28% -10%, rgba(255, 242, 214, .34), transparent 62%),
      radial-gradient(34% 70% at 72% -14%, rgba(255, 236, 196, .22), transparent 66%);
    animation: holy-light 19s ease-in-out infinite alternate;
    will-change: opacity, transform;
  }
  @keyframes holy-light {
    from { opacity: .5;  transform: translate3d(-2.5%, -1.5%, 0); }
    to   { opacity: .95; transform: translate3d(2.5%, 1.5%, 0); }
  }
}

/* page hero: shorter, used on inner pages */
.hero-page .hero-inner { padding-block: clamp(40px, 8vw, 104px); }
.hero-page h1 { max-width: 20ch; }

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

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: #1F1C12; border-color: var(--gold); }
.btn-primary:hover { background: #D3C23A; color: #1F1C12; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.btn-sm { padding: 10px 18px; font-size: 15px; }

/* Two buttons next to each other. A margin on the second one looks fine until
   the pair wraps on a phone, and then the lower button sits indented. A flex
   row with a gap wraps cleanly and keeps both left edges aligned. */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.center { justify-content: center; }

/* -----------------------------------------------------------时间卡片 ---- */

/* The service time used to be a big white card under the hero. It is one
   line now, straight to the full schedule. Sized as a tap target in its own
   right, so it still works with a thumb. */
.hero-hours {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; padding: 10px 2px;
  color: #fff; text-decoration: none; font-size: 16px;
}
.hero-hours svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.hero-hours span { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.hero-hours-more {
  margin-left: 12px; padding-left: 12px; color: var(--gold);
  border-left: 1px solid rgba(255, 255, 255, .35);
  text-decoration: underline; text-underline-offset: 3px;
}
.hero-hours:hover .hero-hours-more { color: #fff; }
.hero-hours:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.times-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3.5vw, 38px);
}

.times-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.time-item { padding: 16px 22px; border-left: 1px solid var(--line-soft); }
.time-item:first-child { border-left: 0; padding-left: 0; }
.time-label { font-size: 14px; color: var(--ink-faint); margin: 0 0 4px; letter-spacing: .04em; }
.time-value { font-size: clamp(22px, 2.6vw, 27px); font-weight: 700; margin: 0; line-height: 1.3; }
.time-note { font-size: 14px; color: var(--ink-faint); margin: 4px 0 0; }

@media (max-width: 720px) {
  .time-item { border-left: 0; border-top: 1px solid var(--line-soft); padding: 14px 0; }
  .time-item:first-child { border-top: 0; padding-top: 0; }
}

/* ----------------------------------------------------------- 图文并排 --- */

.split {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: 1fr 1fr;
}
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.split.reverse .split-media { order: 2; }
.split.top { align-items: start; }

/* Two photos sitting side by side have to be the same shape, or the columns
   end up different heights and the text below them stops lining up. The source
   photos are a mix of 3:2 and 16:9, so the box is fixed and the photo is
   cropped into it. */
.even-media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}

figure { margin: 0; }
figcaption { font-size: 14px; color: var(--ink-faint); margin-top: 10px; }

/* --------------------------------------------------------------- cards -- */

.cards {
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}
/* auto-fill keeps the empty tracks, so one or two cards stay card sized
   instead of stretching across the whole row */
.cards-fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: 16px; }
.card-more { margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--gold-deep); font-size: 15px; }

/* -------------------------------------------------------------- 相册 ---- */

.gallery {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px;
}
.gallery figure { position: relative; }
.gallery figcaption {
  font-size: 13.5px; margin-top: 8px; color: var(--ink-faint);
}
/* every thumbnail is the same shape so the grid rows stay level; portrait
   photos are cropped here and shown whole in the lightbox */
.gallery-tall img { aspect-ratio: 4 / 3; object-position: center 28%; }

.photo-band {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.photo-band img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; width: 100%; }
@media (max-width: 760px) { .photo-band { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- 经文块 --- */

.scripture {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 27px);
  line-height: 1.75; color: var(--ink);
  border-left: 3px solid var(--gold); padding-left: clamp(18px, 3vw, 30px);
  margin: 0; max-width: 42ch;
}
.scripture cite {
  display: block; font-family: var(--font-sans); font-style: normal;
  font-size: 15px; color: var(--ink-faint); margin-top: 14px; letter-spacing: .04em;
}
.section-dark .scripture { color: #F4F1E6; border-left-color: var(--gold); }
.section-dark .scripture cite { color: #BDB9A6; }

/* ------------------------------------------------------------- 信息列表 - */

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.facts li {
  display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.facts li:last-child { border-bottom: 0; }
.facts dt, .fact-key {
  flex: 0 0 7.5em; color: var(--ink-faint); font-size: 15px;
}
.fact-val { flex: 1; font-weight: 500; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--ink-soft);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 16px; height: 9px; border-left: 2.5px solid var(--gold-deep);
  border-bottom: 2.5px solid var(--gold-deep); transform: rotate(-45deg);
}

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 56px;
  margin-bottom: 26px;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
}
.steps h3 { margin-bottom: .25em; }
.steps p { color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------- FAQ ---- */

.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-weight: 700; font-size: clamp(17px, 2vw, 19px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .faq-body { padding: 0 10px 22px 0; color: var(--ink-soft); max-width: 68ch; }

/* ------------------------------------------------------ 今日经文 --------- */

.daily {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
  background: linear-gradient(170deg, #FFFDF6 0%, var(--gold-wash) 100%);
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
}
/* the same shaft of light as the hero, dialled right down for a light panel */
.daily::before {
  content: ""; position: absolute; inset: -50% -20% auto -20%; height: 150%;
  pointer-events: none;
  background: radial-gradient(40% 60% at 50% 0%, rgba(255, 221, 140, .40), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .daily::before { animation: holy-light 21s ease-in-out infinite alternate; }
}
.daily > * { position: relative; z-index: 2; }
/* the panel heading carries the section on its own, so it is sized like a
   heading rather than like the small gold labels elsewhere */
.daily .eyebrow {
  font-size: clamp(17px, 2.1vw, 21px); letter-spacing: .06em;
  text-transform: none; margin-bottom: 20px;
}
.daily-verse {
  font-family: var(--font-display); margin: 0 auto;
  font-size: clamp(19px, 2.6vw, 26px); line-height: 1.75; color: var(--ink);
  max-width: 40ch;
}
.daily-ref {
  display: block; margin-top: 14px; font-style: normal;
  color: var(--gold-deep); font-size: 15px; letter-spacing: .05em;
}
.daily-share {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px;
}
/* small, quiet buttons: the verse is the point, sharing is the afterthought */
.daily-share .btn {
  /* 9px rather than 8px: visually identical, but it puts the button at the
     44px minimum tap size, which matters for older hands */
  padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  border-color: var(--line); color: var(--ink-soft);
}
.daily-share .btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.daily-copied { margin-top: 12px; font-size: 14px; color: var(--gold-deep); }
.daily-copied[hidden] { display: none; }

/* ------------------------------------------------------ 为你祷告 --------- */

.bless {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, #4A5C42 0%, #3D4E37 60%, #33412C 100%);
  color: #F2EFE3; border-radius: var(--radius-lg);
  padding: clamp(26px, 5vw, 60px) clamp(22px, 4vw, 54px);
  text-align: center;
}
/* a soft shaft of light behind the card, same idea as the hero */
.bless::before {
  content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background: radial-gradient(44% 56% at 50% 0%, rgba(255,240,205,.20), transparent 68%);
}
.bless > * { position: relative; z-index: 2; }

/* One rhythm for the whole panel instead of each piece bringing its own
   margin: a tight pair at the top, then an even step between the groups.
   Every gap below is set here, so there is one place to change it. */
.bless { --step: clamp(22px, 2.8vw, 30px); }
.bless .eyebrow { margin: 0 0 10px; }
.bless h2 { color: #fff; margin: 0; }
.bless .lede { color: #D6D2C4; max-width: 46ch; margin: 14px auto 0; }

.bless-card {
  max-width: 44ch; margin: var(--step) auto 0;
  min-height: 1px;
}
.bless-card[hidden] { display: none; }
.bless-prayer {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 29px); line-height: 1.7; color: #FFF8E6;
  margin: 0 0 18px;
}
.bless-verse { color: #D6D2C4; font-size: 16px; line-height: 1.85; margin: 0; }
.bless-ref {
  display: block; margin-top: 10px; color: var(--gold);
  font-size: 14px; letter-spacing: .06em;
}
.bless-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: var(--step); }

.bless-input {
  display: block; width: min(100%, 30rem); margin: var(--step) auto 0;
  padding: 14px 18px; font: inherit; font-size: 16px; text-align: center;
  color: #F2EFE3; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
}
.bless-input::placeholder { color: #D2CEC0; }
.bless-input:focus {
  outline: none; border-color: var(--gold);
  background: rgba(255,255,255,.12);
}

/* 例子：按一下就填进输入框。
   给的是会友真的会讲的话，不是分类标签，这样按下去之后
   输入框里留着的那句话读起来还是他自己的事。 */
.bless-eg {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px auto 0; max-width: 34rem;
}
.bless-eg button {
  font: inherit; font-size: 14px; line-height: 1.4;
  padding: 8px 14px; min-height: 36px;
  color: #E7E3D5; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px;
  cursor: pointer;
}
.bless-eg button:hover { background: rgba(255, 255, 255, .16); border-color: var(--gold); }
.bless-eg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.bless-note {
  margin: 16px auto 0; font-size: 13.5px; color: #D2CEC0; max-width: 40ch;
}

/* the crisis and daily-limit answers: a person, not another verse */
.bless-urgent {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 22px;
}
.bless-urgent .btn { font-size: 15px; padding: 11px 18px; }

/* the sparkles: four pointed stars that fade in and out around the card */
.bless-spark {
  position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 1;
  background: #FFF3CF; opacity: 0;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
/* 圣光绽开：the prayer does not just appear, light grows out from behind it.
   JS puts the bloom at the vertical centre of the card, so the light comes
   out of the words rather than out of the box. Both are removed again after
   the animation, so nothing is left running on the page. */
.bless-bloom {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(150%, 1040px); aspect-ratio: 1 / 1; pointer-events: none;
  border-radius: 50%; opacity: 0;
  transform: translate(-50%, -50%) scale(.16);
  background: radial-gradient(circle,
    rgba(255, 250, 232, .95) 0%, rgba(255, 236, 184, .58) 24%,
    rgba(255, 222, 142, .26) 44%, rgba(255, 216, 130, .08) 60%, transparent 72%);
}
.bless-ring {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(86%, 440px); aspect-ratio: 1 / 1; pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(255, 240, 198, .5); opacity: 0;
  transform: translate(-50%, -50%) scale(.28);
}

@media (prefers-reduced-motion: no-preference) {
  .bless-spark { animation: spark 2.6s ease-in-out infinite; }
  .bless-card.is-new { animation: bless-in 1s cubic-bezier(.16, .8, .3, 1) both; }
  .bless-card.is-new .bless-prayer { animation: prayer-glow 2.6s ease-out both; }
  .bless-bloom { animation: bloom 2.3s cubic-bezier(.16, .76, .3, 1) both; }
  .bless-ring { animation: ring 2.1s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes spark {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50%      { opacity: .9; transform: scale(1) rotate(45deg); }
}
@keyframes bless-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes prayer-glow {
  0%   { text-shadow: 0 0 30px rgba(255, 240, 194, 1), 0 0 72px rgba(255, 226, 150, .75); }
  100% { text-shadow: 0 0 0 rgba(255, 240, 194, 0); }
}
@keyframes bloom {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.16); }
  16%  { opacity: .95; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.95); }
}
@keyframes ring {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.28); }
  12%  { opacity: .75; }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(2.5); }
}

/* -------------------------------------------------------------- video --- */

.video-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius); overflow: hidden; background: #1a1a18;
  box-shadow: var(--shadow-lg);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------- contact -- */

.contact-grid { display: grid; gap: clamp(28px, 4vw, 54px); grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.map-frame {
  width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); background: var(--cream-2);
}

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 7px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white);
  color: var(--ink);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--gold-deep); outline: 2px solid var(--gold-soft); outline-offset: 0;
}
.form-note { font-size: 14px; color: var(--ink-faint); }

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

.site-footer { background: var(--forest); color: #D8D5C7; padding-block: clamp(48px, 6vw, 72px) 0; }
.footer-grid {
  display: grid; gap: clamp(26px, 4vw, 48px);
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* two columns of short links instead of one endless stack; the brand blurb
     and the contact block both need the full width to read properly */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-grid > * { min-width: 0; }
  .footer-brand, .footer-grid > *:last-child { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .site-footer li { margin-bottom: 6px; }
  .site-footer { padding-block: 34px 0; }
  .footer-head { margin-bottom: 10px; }
}

.site-footer h2, .footer-head {
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 16px; font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #D8D5C7; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-brand img { width: 58px; height: 58px; border-radius: 10px; margin-bottom: 14px; }
.footer-brand p { color: #ABA89A; font-size: 15px; max-width: 34ch; }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; color: #D8D5C7;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.social a:hover { color: var(--gold); border-color: var(--gold); background: rgba(255,255,255,.12); }

.footer-bottom {
  margin-top: clamp(34px, 5vw, 54px); padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: 14px; color: #93907F;
}

/* -------------------------------------------------------------- 杂项 ---- */

.badge {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-size: 13.5px; font-weight: 700; letter-spacing: .03em;
}

.callout {
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 30px);
}
.callout h3 { margin-bottom: .4em; }

.breadcrumb { font-size: 14px; color: var(--ink-faint); padding-top: 18px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--line); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-deep); text-decoration: underline; }

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: clamp(28px, 4vw, 44px); }
.stack > * + * { margin-top: 18px; }

/* 404 */
.error-page { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.error-code {
  font-family: var(--font-display); font-size: clamp(66px, 14vw, 128px);
  color: var(--gold); line-height: 1; margin: 0 0 10px;
}

@media print {
  .site-header, .site-footer, .hero-media, .btn { display: none; }
  body { background: #fff; font-size: 12pt; }
}