/* ==========================================================================
   Mercy Manor — Design System
   Granbury, TX · Christian women's residential recovery ministry

   Palette concept: "Limestone & Clay" — pulled from the actual materials
   of Hood County rather than an abstract color-theory mood ("hope = green,
   dawn = orange"). That approach produced two consecutive AI-tell palettes
   (warm-ivory/sage/gold, then a purple/indigo accent — literally the most
   recognizable AI-generated-site tell there is, traceable to Tailwind's
   indigo-500 default). Grounding in real material references instead:
     - Limestone — the pale stone the actual Hood County Courthouse and
       most of the Hill Country is built from. The neutral base, warm-gray,
       not yellow-cream.
     - Iron/ink — a true near-black charcoal for text and dark sections.
       Not a colored "mood" dark (no purple-black, no green-black) —
       genuinely neutral, like aged iron or a chiseled inscription.
     - Red clay — the actual soil color of the region. The one strong
       accent color, used for every CTA and point of emphasis. Warm,
       specific, and completely outside the purple/teal/gold-gradient
       family AI defaults to.
     - Live oak — the deep, near-black-green of the region's namesake
       tree, used narrowly and functionally for safety/crisis content
       only (not spread across the UI as a second decorative color).
   Only two true accent hues, on a true neutral scale — fewer named
   "brand colors" than the last two attempts, which is itself part of
   what makes a palette read as designed rather than generated.

   Body class .rv-ready is a safety hook: ALL elements start fully visible
   (opacity:1, transform:none). Scroll-reveal / counters are enhancement
   layered on top, never a requirement to read the page. This protects
   against Cloudflare's email-protection script breaking IntersectionObserver
   (lesson carried over from the Shalom Park build). Do not remove.
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ---- Color: "Limestone & Clay" ---- */
  --bg:        #EAE4D8;   /* limestone — warm stone-gray, not yellow cream */
  --bg-alt:    #DFD6C4;   /* deeper limestone — alternating section bands */
  --bg-deep:   #D3C6AE;   /* buff limestone — cards/callouts */
  --fg:        #221E19;   /* iron ink — genuinely neutral dark, no color cast */
  --fg-soft:   #3E3830;
  --muted:     #574E3D;   /* WCAG AA: passes 4.5:1 on --bg, --bg-alt, AND --bg-deep (#D3C6AE, deepest card) at 4.8:1 */
  --rule:      #C9BC9F;
  --rule-soft: #D8CBB2;
  --rule-strong: #857A66; /* form-field borders: 4.0:1 on --white, meets WCAG 1.4.11 non-text contrast (3:1); --rule was 1.75:1 */

  --accent:       #33422C;   /* Live oak — deep, near-black green; used narrowly (safety content, one pillar icon), not as a general secondary color */
  --accent-dark:  #1A1712;   /* Iron-black — dark sections + dark numeral/text emphasis (true neutral, not a colored "mood" dark) */
  --accent-tint:  #E1E6DA;

  --gold:       #9C3B26;   /* Red clay — the single strong accent: every CTA, link emphasis, border, eyebrow */
  --gold-dark:  #7A2D1C;   /* AA-safe for white text on a clay button background (9.0:1) */
  --gold-darker: #5E2214;  /* hover state (11.6:1) */
  --gold-tint:  #EAD3C7;

  --terracotta: #2A3524;   /* Deep live oak — crisis/safety-block accent only, deliberately distinct from the clay CTA color so hotline content never reads as a giving upsell */
  --terracotta-tint: #E5E9DE;

  --crisis-bg:  #E9EDE2;
  --crisis-edge: #2A3524;

  --white: #FBF9F4;

  /* ---- Type ---- */
  --font-heading: Iowan Old Style, Palatino Linotype, Palatino, "URW Palladio L", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;

  /* ---- Layout ---- */
  --max-width: 42rem;
  --max-wide: 72rem;
  --pad: 1.5rem;
  --radius: 10px;
  --radius-lg: 18px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;
}

html {
  font-size: 18px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Safety: everything visible by default, always. */
body.rv-ready * {
  opacity: 1 !important;
}

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

/* Sample/placeholder imagery — original illustration, clearly watermarked,
   swap out for consented real photography before publishing. See the
   "SAMPLE" stamp baked into each SVG. */
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-caption {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
  color: var(--fg);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 0.55em; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); margin-bottom: 0.6em; }
h3 { font-size: 1.3rem; margin-bottom: 0.5em; }
h4 { font-size: 1.05rem; margin-bottom: 0.4em; }

p {
  margin-bottom: 1.1em;
  max-width: var(--max-width);
}

p.lede {
  font-size: 1.2rem;
  color: var(--fg-soft);
}

.measure-wide p, .measure-wide { max-width: var(--max-wide); }

a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--gold-dark); }

ul, ol { padding-left: 1.3em; margin-bottom: 1.1em; }
li { margin-bottom: 0.45em; max-width: var(--max-width); }

strong { font-weight: 600; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-dark);
  color: var(--white);
  padding: 0.75em 1.25em;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

header.site-header {
  padding: 1.1rem var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}

nav.main-nav {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  white-space: nowrap;
}
.logo .logo-mark { color: var(--gold-dark); }

/* No hamburger/disclosure widget: with only six nav items, the simplest
   deploy-safe pattern is letting nav-links wrap onto additional lines at
   narrow widths. A JS-toggled off-canvas menu would mean the nav depends
   on JS to become reachable on mobile — exactly the pattern this project's
   safety rule forbids. Nothing here needs a toggle button. */

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.9rem 1.5rem;
  flex-wrap: wrap;
}

.nav-links a {
  text-decoration: none;
  color: var(--fg-soft);
  font-size: 0.97rem;
  font-weight: 500;
  padding: 0.3em 0.1em;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--accent-dark);
  border-bottom-color: var(--gold);
}

.btn {
  display: inline-block;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 0.65em 1.4em;
  border: 2px solid transparent;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: var(--gold-dark);
  color: var(--white) !important;
}
.btn-gold:hover { background: var(--gold-darker); color: var(--white) !important; }
.btn-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-dark) !important;
}
.btn-outline:hover { background: var(--accent-tint); }
.btn-ghost {
  background: transparent;
  color: var(--fg) !important;
  border-color: var(--rule);
}
/* Ghost button on a dark (.section-deep) background — uses the palette's
   own clay tint rather than a hardcoded hex. */
.section-deep .btn-ghost {
  border-color: var(--gold-tint);
  color: var(--white) !important;
}
.btn-lg { padding: 0.85em 1.9em; font-size: 1.08rem; }
.btn-block { display: block; width: 100%; text-align: center; }

.nav-links .cta { margin-left: 0.25rem; }
.nav-links .cta a {
  background: var(--gold-dark);
  color: var(--white) !important;
  border-radius: 999px;
  padding: 0.55em 1.3em;
  border-bottom: none;
}
.nav-links .cta a:hover { background: var(--gold-darker); }
.nav-links .cta-secondary a {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent-dark) !important;
  border-radius: 999px;
  padding: 0.5em 1.2em;
}
.nav-links .cta-secondary a:hover { background: var(--accent-tint); }

@media (max-width: 860px) {
  nav.main-nav { flex-wrap: wrap; row-gap: 0.75rem; }
  .nav-links { width: 100%; gap: 0.75rem 1.1rem; }
  .nav-links .cta { margin-left: 0; }
}

/* ==========================================================================
   Layout / sections
   ========================================================================== */

main { display: block; }

.section {
  padding: 4.5rem var(--pad);
}
.section-tight { padding: 3rem var(--pad); }
.section-alt { background: var(--bg-alt); }
.section-deep { background: var(--accent-dark); color: var(--white); }
.section-deep h1, .section-deep h2, .section-deep h3 { color: var(--white); }
.section-deep p { color: #E9E4D6; }
.section-deep a { color: var(--gold-tint); }

.wrap {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.wrap-narrow {
  max-width: 46rem;
  margin: 0 auto;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 0.9em;
  display: inline-block;
}
.section-deep .eyebrow { color: var(--gold-tint); }

.grid {
  display: grid;
  gap: 2rem;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 5rem var(--pad) 4rem;
  background:
    radial-gradient(ellipse at 15% 0%, var(--gold-tint) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}
.hero .wrap { text-align: left; }
.hero h1 { max-width: 18ch; }
.hero .tagline {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--fg-soft);
  max-width: 42ch;
  margin-bottom: 1.6em;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.hero-location {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 1.3rem;
}

/* ==========================================================================
   Stat blocks
   ========================================================================== */

.stat-band {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
}
@media (max-width: 760px) { .stat-band { grid-template-columns: 1fr; } }

.stat {
  border-left: 3px solid var(--gold);
  padding-left: 1.1rem;
}
.stat .stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--accent-dark);
  line-height: 1;
  display: block;
  margin-bottom: 0.25em;
}
.section-deep .stat .stat-num { color: var(--gold-tint); }
.stat .stat-label { color: var(--muted); font-size: 0.95rem; }
.section-deep .stat .stat-label { color: #D8D2C1; }
.stat .stat-source { font-size: 0.78rem; color: var(--muted); display: block; margin-top: 0.4em; }

/* ==========================================================================
   Pillars / cards
   ========================================================================== */

.pillar-card, .card {
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

/* Audience-router cards on the homepage — a card that is itself a link */
a.audience-card {
  display: block;
  text-decoration: none !important;
  color: var(--fg) !important;
  transition: transform 0.15s var(--ease), border-color 0.15s;
}
a.audience-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}
a.audience-card h3 { color: var(--fg); }
a.audience-card p { color: var(--fg-soft); }
.audience-cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--gold-dark);
}
.pillar-card .pillar-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  color: var(--accent-dark);
}

/* ==========================================================================
   Pull quote
   ========================================================================== */

.pull-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.4;
  color: var(--accent-dark);
  max-width: 38ch;
  position: relative;
  padding-left: 1.4rem;
  border-left: 4px solid var(--gold);
}
.pull-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1rem;
  color: var(--muted);
  margin-top: 1rem;
}

/* ==========================================================================
   Crisis / resource callout
   ========================================================================== */

.crisis-block {
  background: var(--crisis-bg);
  border: 1px solid var(--crisis-edge);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin: 2rem 0;
}
.crisis-block h2 { color: var(--terracotta); margin-bottom: 0.6em; font-size: 1.3rem; line-height: 1.2; }
.crisis-list { list-style: none; padding: 0; margin: 0; }
.crisis-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6em 0;
  border-bottom: 1px dashed #E3B8A2;
  margin: 0;
}
.crisis-list li:last-child { border-bottom: none; }
.crisis-list a { font-weight: 700; color: var(--terracotta); white-space: nowrap; }

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline {
  position: relative;
  padding-left: 2.2rem;
  border-left: 2px solid var(--rule);
  max-width: var(--max-wide);
}
.timeline-item {
  position: relative;
  padding-bottom: 2.4rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.25rem;
  width: 0.85rem; height: 0.85rem;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--gold);
}
.timeline-item.is-done::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.timeline-item.is-next::before { background: var(--white); box-shadow: 0 0 0 2px var(--gold); }
.timeline-item .timeline-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}
.timeline-item.is-done .timeline-tag { color: var(--accent-dark); }
.timeline-item.is-next .timeline-tag { color: var(--gold-dark); }

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.faq {
  border-top: 1px solid var(--rule);
  max-width: var(--max-wide);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--fg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold-dark);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a {
  padding: 0 0 1.4rem;
  color: var(--fg-soft);
}

/* ==========================================================================
   Giving ladder
   ========================================================================== */

.give-ladder {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) { .give-ladder { grid-template-columns: 1fr; } }

.give-tier {
  background: var(--white);
  border: 2px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease);
  font-family: var(--font-body);
}
.give-tier:hover { transform: translateY(-2px); border-color: var(--gold); }
.give-tier.is-selected { border-color: var(--gold); background: var(--gold-tint); }
.give-tier .amt {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  color: var(--accent-dark);
  display: block;
  margin-bottom: 0.3em;
}
.give-tier .desc { display: block; color: var(--fg-soft); font-size: 0.98rem; margin: 0; }

.give-summary {
  margin-top: 1.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  font-size: 1.08rem;
}
.give-summary strong { color: var(--accent-dark); }

.frequency-toggle {
  display: inline-flex;
  background: var(--bg-deep);
  border-radius: 999px;
  padding: 0.3rem;
  margin-bottom: 2rem;
}
.frequency-toggle button {
  border: none;
  background: none;
  padding: 0.55em 1.3em;
  border-radius: 999px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.frequency-toggle button.is-active {
  background: var(--accent);
  color: var(--white);
}

.transparency-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.5rem 0;
}
.transparency-badges .badge {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.6em 1em;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--white);
}

/* ==========================================================================
   Forms
   ========================================================================== */

form.stack { display: flex; flex-direction: column; gap: 1.1rem; max-width: 32rem; }
label { display: block; font-weight: 600; margin-bottom: 0.35em; font-size: 0.95rem; }
input, textarea, select {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--white);
  color: var(--fg);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.form-note { font-size: 0.85rem; color: var(--muted); }

/* ==========================================================================
   Jump nav / table of contents
   ========================================================================== */

.jump-nav {
  background: var(--bg-deep);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.jump-nav h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; margin-bottom: 0.6em; }
.jump-nav ol { list-style: decimal; padding-left: 1.2em; margin: 0; }
.jump-nav a { text-decoration: none; }

/* ==========================================================================
   Article / resource hub — long-form education content
   ========================================================================== */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.article-meta strong { color: var(--fg-soft); }

.article-body h2 { margin-top: 2.2em; }
.article-body h3 { margin-top: 1.6em; }
.article-body p, .article-body li { max-width: var(--max-wide); }

.callout-box {
  border-left: 3px solid var(--gold);
  background: var(--gold-tint);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2rem 0;
}
.callout-box h3 { margin-bottom: 0.4em; color: var(--gold-darker); }
.callout-box p:last-child { margin-bottom: 0; }

.resource-card {
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: block;
  text-decoration: none !important;
  color: var(--fg) !important;
  transition: transform 0.15s var(--ease), border-color 0.15s;
}
.resource-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.resource-card h3 { color: var(--fg); }
.resource-card p { color: var(--fg-soft); margin-bottom: 0.6em; }
.resource-card .resource-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
  margin-bottom: 0.6em;
}
.resource-card .resource-read-more { font-weight: 700; color: var(--gold-dark); }

/* Situation-router cards not yet built. Deliberately unlinked — a dashed,
   quiet card reads as "coming", where a dead link reads as a broken promise. */
.resource-card.is-pending {
  background: transparent;
  border-style: dashed;
  opacity: 0.72;
  cursor: default;
}
.resource-card.is-pending:hover {
  transform: none;
  border-color: var(--rule-soft);
}
.resource-card.is-pending .media-caption {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
}

/* ==========================================================================
   Draft / placeholder flags — visible in dev, easy to grep, remove on publish
   ========================================================================== */

.draft-flag {
  display: inline-block;
  background: var(--terracotta-tint);
  color: var(--terracotta);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25em 0.6em;
  border-radius: 5px;
  margin-bottom: 0.6em;
}

.privacy-note {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: 1.1rem 1.4rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.98rem;
  color: var(--fg-soft);
  margin-bottom: 2rem;
}

/* ==========================================================================
   Scroll reveal (enhancement only — see safety note at top of file)
   ========================================================================== */

.reveal {
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.js-ready .reveal {
  opacity: 0.001;
  transform: translateY(18px);
}
body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.site-footer {
  background: var(--accent-dark);
  color: #E9E4D6;
  padding: 3.5rem var(--pad) 2rem;
}
footer.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 760px) {
  footer.site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  footer.site-footer .wrap { grid-template-columns: 1fr; }
}
footer.site-footer h3 {
  color: var(--gold-tint);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9em;
}
footer.site-footer ul { list-style: none; padding: 0; }
footer.site-footer a {
  color: #E9E4D6;
  text-decoration: none;
  font-size: 0.95rem;
}
footer.site-footer a:hover { color: var(--gold-tint); text-decoration: underline; }
footer.site-footer p { color: #C9C3B2; max-width: 32ch; font-size: 0.95rem; }
.footer-bottom {
  max-width: var(--max-wide);
  margin: 0 auto;
  border-top: 1px solid #4C5D44;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #B7B09E;
}
.footer-bottom a { color: #B7B09E; }

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/* ==========================================================================
   Baked-pixel photo hero + breakers (composited in PIL; no object-fit crop).
   Copy overlays the cream text-field baked into the image, locked to fixed %.
   ========================================================================== */
.photo-hero{position:relative;background:var(--bg);}
.photo-hero>img{display:block;width:100%;height:auto;}
.photo-hero .ph-copy{padding:1.4rem var(--pad) .2rem;}
.photo-hero .ph-eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.5rem;}
.photo-hero h1{margin:.1em 0 .35em;max-width:16ch;
  font-size:clamp(1.75rem,6.4vw,2.3rem);line-height:1.12;}
.photo-hero .ph-tagline{color:var(--fg-soft);max-width:44ch;
  font-size:clamp(1.02rem,2.4vw,1.18rem);line-height:1.45;margin:0;}
@media(min-width:721px){
  .photo-hero .ph-copy{position:absolute;top:15%;width:33%;padding:0;}
  .photo-hero.left .ph-copy{left:5%;}
  .photo-hero.right .ph-copy{right:5%;}
  .photo-hero h1{font-size:clamp(1.6rem,2.9vw,2.9rem);}
  .photo-hero .ph-tagline{font-size:clamp(1rem,1.35vw,1.22rem);max-width:34ch;}
}
.breaker{margin:2.75rem 0;}
.breaker>img{display:block;width:100%;height:auto;}

@media(min-width:721px){
  .photo-hero.ph-lower .ph-copy{top:auto;bottom:12%;}
}

/* ==========================================================================
   EPIC HERO CONCEPT — new, additive only
   Full-viewport, full-bleed, immersive. Everything below this comment is
   the only new design work; every rule above is the site's real system,
   untouched.

   THE IMAGE: a real sunrise photo of Hood County, supplied as an
   evaluation placeholder. It is licensed for neither web use nor
   publication, so it is watermarked directly into the pixels (diagonal
   repeat + corner tag) — the same discipline a licensed stock-photo
   comp would carry, so this can never accidentally ship as-is. When real,
   cleared photography exists (per the board's own Hood County photo
   category — zero consent risk, fastest to obtain), swap the base64 data
   URI below for that image's real src.

   WHY A LANDSCAPE, SPECIFICALLY: of the five imagery categories in the
   board's photography plan, "Granbury & Hood County" (courthouse limestone
   at golden hour, live oaks, farm-to-market roads at dawn) is the only
   category with zero privacy/consent risk — no board member, resident, or
   facility exterior involved. That makes it the fastest real photography
   to actually obtain, and the natural first hero image once it exists.

   WHEN REAL PHOTOGRAPHY ARRIVES: swap the base64 data URI on the <img>
   below for the real file (still an <img>, never a CSS background-image —
   that was the exact mistake flagged in the old site's Lighthouse audit).
   Serve as WebP with a responsive srcset, keep fetchpriority="high" and
   explicit width/height, and preload it in <head>. That is what keeps this
   "epic" look from costing the Lighthouse score more than it has to.
   ========================================================================== */

.hero-epic {
  position: relative;
  height: 100dvh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--accent-dark);
}

.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 64% 42%;
}

/* Slow ambient drift on the photo — the only motion in the hero besides
   the scroll cue. Respects reduced-motion via the global media query above. */
.hero-scene {
  animation: heroDrift 34s ease-in-out infinite alternate;
  transform-origin: 50% 60%;
}
@keyframes heroDrift {
  0%   { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1.09) translateY(-1.2%); }
}

/* Vignette + bottom fade, so text is legible without an opaque box, and
   the section resolves smoothly into --bg rather than a hard cut. */
.hero-epic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(26,23,18,.68) 0%, rgba(26,23,18,.34) 40%, rgba(26,23,18,.06) 64%, rgba(26,23,18,.04) 100%),
    linear-gradient(180deg, rgba(26,23,18,.4) 0%, rgba(26,23,18,.04) 28%, rgba(26,23,18,.08) 58%, rgba(26,23,18,.62) 100%);
  z-index: 1;
}
.hero-epic::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 14vh;
  background: linear-gradient(180deg, rgba(234,228,216,0) 0%, var(--bg) 92%);
  z-index: 2;
}

.hero-epic .wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max-wide);
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-bottom: 6.5rem;
  text-align: left;
}
/* Keep the hero copy itself a readable, left-anchored column within that
   full-width container, so on wide screens it stays left rather than drifting
   toward the centre of the image. */
.hero-epic .eyebrow,
.hero-epic h1,
.hero-epic .tagline,
.hero-epic .wrap > p { max-width: 34rem; }
.hero-epic h1 { max-width: 15ch; }

.hero-epic .eyebrow {
  color: var(--gold-tint);
  background: rgba(26,23,18,.28);
  padding: 0.35em 0.7em;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

.hero-epic h1 {
  color: var(--white);
  max-width: 12ch;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  text-shadow: 0 2px 26px rgba(0,0,0,.45);
}

.hero-epic .tagline {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  color: #EFE9DC;
  max-width: 36ch;
  margin-bottom: 1.9em;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

.hero-epic .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #EFE9DC;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  opacity: .88;
}
.hero-scroll-cue .line {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, rgba(239,233,220,.9), rgba(239,233,220,0));
  animation: cueDrop 2.1s ease-in-out infinite;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0.4); transform-origin: top; opacity: .4; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.4); transform-origin: top; opacity: .4; }
}

.hero-epic .sample-tag {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 3;
  background: rgba(26,23,18,.55);
  color: var(--gold-tint);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4em 0.75em;
  border-radius: 5px;
  backdrop-filter: blur(2px);
}

@media (max-width: 620px) {
  .hero-epic { align-items: flex-end; }
  .hero-epic .wrap { padding-bottom: 4.5rem; }
  .hero-epic h1 { max-width: 14ch; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene { animation: none; transform: scale(1.04); }
  .hero-scroll-cue .line { animation: none; }
}


/* --- Hero (epic) ghost button: light variant for legibility over the photo --- */
.hero-epic .btn-ghost { color: var(--white) !important; border-color: rgba(251,249,244,.65); }
.hero-epic .btn-ghost:hover { background: rgba(251,249,244,.14); border-color: var(--white); }

/* --- Header call affordance --- */
.nav-call a { font-weight: 600; white-space: nowrap; color: var(--gold-dark); }
.nav-call a:hover { color: var(--gold-darker); }

/* --- Quick Exit (safety) — get-help, the-need, hood-county --- */
.quick-exit { position: fixed; bottom: 1rem; right: 1rem; z-index: 80; background: var(--accent-dark); color: var(--white) !important; font-size: .82rem; font-weight: 700; letter-spacing: .02em; padding: .6em 1.1em; border-radius: 999px; text-decoration: none !important; box-shadow: 0 2px 12px rgba(0,0,0,.28); }
.quick-exit:hover, .quick-exit:focus { background: #000; color: #fff !important; }

/* --- Breadcrumbs (deep pages) --- */
.breadcrumbs { font-size: .85rem; color: var(--muted); max-width: var(--max-wide); margin: 0 auto; padding: 1rem var(--pad) 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "\203A"; margin-right: .5em; color: var(--rule); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs [aria-current="page"] { color: var(--fg-soft); }

/* --- Numbered step badges (get-help "three steps") --- */
.timeline-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); font-weight: 700; font-family: var(--font-heading); margin-bottom: .6rem; }



/* ---------------------------------------------------------------
   Board — horizontal bio cards (photo left, bio right, soft fade)
   Added 2026-07-11. Photo edge dissolves into the card surface;
   placeholders (.ph) render contained until real photos arrive.
   --------------------------------------------------------------- */
.board-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  padding: 0;
}
.board-card .board-photo {
  position: relative;
  min-height: 260px;
  background: var(--accent-tint);
}
.board-card .board-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.board-card .board-photo img.ph {
  object-fit: contain; padding: 2.5rem; opacity: .8;
}
.board-card .board-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--white) 100%);
  pointer-events: none;
}
.board-card .board-bio { padding: 1.75rem 2rem; }
.board-card .board-bio h3 { margin-top: 0; }
@media (max-width: 700px) {
  .board-card { grid-template-columns: 1fr; }
  .board-card .board-photo { min-height: 300px; }
  .board-card .board-photo::after {
    background: linear-gradient(to bottom, transparent 70%, var(--white) 100%);
  }
}

/* ---------------------------------------------------------------
   Print styles — added 2026-07-11 (church-toolkit bulletin inserts
   and general page printing). White paper, dark ink, no chrome.
   --------------------------------------------------------------- */
@media print {
  :root {
    --bg: #ffffff;
    --fg: #1a1a1a;
  }
  body {
    background: #ffffff !important;
    color: #1a1a1a !important;
    font-size: 11pt;
  }
  .site-header, .site-footer, .skip-link, .quick-exit,
  .hero-ctas, .jump-nav, .btn, .nav-call,
  section.section-deep, .resource-card, .audience-cta,
  .no-print {
    display: none !important;
  }
  main, section, .wrap, .wrap-narrow {
    background: #ffffff !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 7in !important;
  }
  h1, h2, h3, h4, .eyebrow, .tagline, p, li, cite {
    color: #1a1a1a !important;
    background: transparent !important;
  }
  a { color: #1a1a1a !important; text-decoration: underline; }
  a[href^="/"]::after { content: " (mercymanorhome4women.org" attr(href) ")"; font-size: 9pt; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  .callout-box {
    background: #ffffff !important;
    border: 1.5pt solid #1a1a1a !important;
    padding: 12pt !important;
    margin: 10pt 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .timeline-item, blockquote.pull-quote, .faq-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  blockquote.pull-quote {
    border-left: 2pt solid #1a1a1a !important;
    padding-left: 10pt !important;
  }
  .stat-band { display: block !important; }
  .stat { border: 1pt solid #1a1a1a !important; margin-bottom: 6pt; padding: 6pt !important; }
}

/* ── Data table (transparency / factual key-value tables) ───────────── */
.data-table{width:100%;border-collapse:collapse;font-size:.95rem;}
.data-table th,.data-table td{padding:.7rem .9rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(0,0,0,.10);}
.data-table th[scope="row"]{font-weight:600;width:38%;white-space:normal;}
.data-table tr:last-child th,.data-table tr:last-child td{border-bottom:none;}
@media (max-width:540px){
  .data-table th[scope="row"],.data-table td{display:block;width:100%;}
  .data-table th[scope="row"]{border-bottom:none;padding-bottom:.15rem;}
  .data-table td{padding-top:0;}
}

/* ==========================================================================
   Homepage fixes — 19 Jul 2026 (hero clip, mission-verse contrast, self-select)
   ========================================================================== */

/* 1) Hero headline was clipped at the top: the hero is 100dvh and bottom-aligned,
   so on shorter viewports the first line (eyebrow/H1) overflowed above the fold.
   Center the content and reserve space below the fixed header. */
.hero-epic { align-items: center; }
.hero-epic > .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 5.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 640px) {
  .hero-epic > .wrap { padding-top: 5rem; }
  .hero-epic h1 { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
}

/* 2) Mission verse was invisible: .pull-quote colour is --accent-dark, and the
   .section-deep band background is ALSO --accent-dark. Force a light quote on
   the dark band. */
.section-deep .pull-quote { color: #FBF7EE; }
.section-deep .pull-quote cite { color: var(--gold-tint); }

/* 3) "Which of these is you?" — make the self-select a deliberate stop the
   reader must act on, not a passthrough. */
.audience-choice {
  background: var(--accent-tint);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.audience-choice h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); margin-bottom: .6rem; }
.audience-choice .audience-lead {
  font-size: 1.16rem;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--fg-soft);
  margin-bottom: 2.25rem;
}
.audience-choice a.audience-card {
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.audience-choice a.audience-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  border-color: var(--gold);
}


/* ==========================================================================
   Mobile sticky action bar (19 Jul 2026)
   Enhancement only: the same Call + Get Help actions exist in the header, so
   this never gates content on JS. Injected by main.js; hidden on print.
   ========================================================================== */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: .5rem; padding: .5rem calc(env(safe-area-inset-right) + .5rem) calc(env(safe-area-inset-bottom) + .5rem) calc(env(safe-area-inset-left) + .5rem);
  background: rgba(26,23,18,.97); box-shadow: 0 -2px 14px rgba(0,0,0,.22);
}
.action-bar a { flex: 1; text-align: center; padding: .9em 1em; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 1.02rem; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.action-bar .ab-call { background: var(--gold-dark); color: #fff !important; }
.action-bar .ab-help { background: var(--white); color: var(--accent-dark) !important; border: 1px solid var(--gold-tint); }
.action-bar a:focus-visible { outline: 3px solid var(--gold-tint); outline-offset: 2px; }
@media (max-width: 680px) { .action-bar { display: flex; } body { padding-bottom: 4.75rem; } }
@media print { .action-bar { display: none !important; } }

/* ==========================================================================
   Audience-first navigation (19 Jul 2026)
   Deploy-safe: built on native <details>/<summary> — fully keyboard-accessible
   and reachable with NO JavaScript. Desktop = dropdown bar; mobile = a "Menu"
   button that opens an accordion. Get Help is first and emphasized.
   ========================================================================== */
nav.main-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-drawer { }
.nav-drawer > summary { list-style: none; cursor: pointer; }
.nav-drawer > summary::-webkit-details-marker { display: none; }
.nav-groups { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3rem 1.4rem; }
.nav-group { position: relative; }
.nav-group > details > summary,
.nav-group > .nav-flat {
  list-style: none; cursor: pointer; font-weight: 500; color: var(--fg-soft);
  font-size: .97rem; padding: .4em .1em; display: inline-flex; align-items: center;
  gap: .3em; white-space: nowrap; text-decoration: none; background: none; border: 0;
}
.nav-group > details > summary::-webkit-details-marker { display: none; }
.nav-group > details > summary::after { content: "▾"; font-size: .72em; color: var(--gold-dark); }
.nav-group > details[open] > summary { color: var(--gold-dark); }
.nav-group--help > details > summary { color: var(--gold-dark); font-weight: 700; }
.nav-submenu { list-style: none; margin: 0; padding: .4rem; }
.nav-submenu a { display: block; padding: .58em .85em; text-decoration: none; color: var(--fg-soft); border-radius: 8px; white-space: nowrap; font-size: .96rem; }
.nav-submenu a:hover { background: var(--accent-tint); color: var(--gold-dark); }
.nav-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.nav-actions .nav-call { font-weight: 600; text-decoration: none; color: var(--fg-soft); white-space: nowrap; }
.nav-actions .nav-give {
  background: var(--gold-dark); color: var(--white) !important; border-radius: 999px;
  padding: .55em 1.3em; text-decoration: none; font-weight: 600; white-space: nowrap;
}
.nav-actions .nav-give:hover { background: var(--gold-darker); }
.nav-group > details > summary:focus-visible,
.nav-drawer > summary:focus-visible,
.nav-actions a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Desktop nav bar: a plain sibling <ul>, NOT nested inside the <details>
   drawer. A closed <details>'s non-summary children don't reliably
   contribute to layout even when forced visible via `display` overrides
   (Chromium treats them as content-visibility:hidden internally), which was
   silently collapsing the header to zero height and letting the hero
   section render on top of the nav on every page. Fixed 20 Jul 2026. */
.nav-groups--bar { display: none; }

/* Desktop: show the bar, hide the mobile Menu drawer entirely */
@media (min-width: 861px) {
  .nav-groups--bar { display: flex !important; flex: 1; }
  .nav-drawer { display: none !important; }
  .nav-group > details > .nav-submenu {
    position: absolute; top: calc(100% + .45rem); left: 0; min-width: 240px;
    background: var(--white); border: 1px solid var(--rule); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.15); z-index: 60;
  }
}
/* Mobile: Menu button toggles an accordion on its own full-width row */
@media (max-width: 860px) {
  .nav-drawer { order: 3; width: 100%; }
  .nav-drawer > summary {
    display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--fg);
    padding: .55em 1em; border: 1px solid var(--rule); border-radius: 10px;
  }
  .nav-drawer > summary::after { content: "\2630"; } /* ☰ */
  .nav-drawer[open] > summary::after { content: "\2715"; } /* ✕ */
  .nav-drawer > .nav-groups { flex-direction: column; align-items: stretch; gap: 0; padding-top: .5rem; }
  .nav-group > details > summary { padding: .8em .2em; border-top: 1px solid var(--rule-soft); }
  .nav-group > details > .nav-submenu { padding-left: 1rem; }
  .nav-actions { margin-left: auto; }
  .nav-actions .nav-call { display: none; } /* the fixed bottom action bar carries Call on mobile */
}

/* Active section highlight (data-active set per page at build) */
.nav-group > details[data-active] > summary { color: var(--gold-dark); }
@media (min-width: 861px) {
  .nav-group > details[data-active] > summary { box-shadow: inset 0 -2px 0 var(--gold); }
}


/* Brand badge in the header logo (SVG recreation of the Mercy Manor mark) */
.logo { align-items: center; }
.logo .logo-badge { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }


/* ==========================================================================
   The Twelve — church sponsorship wall (26 Jul 2026)
   Twelve place-cards on /partners/the-twelve plus a miniature wall teaser on
   /partners. CSS-only, zero JS. An OPEN place is dashed and quiet; a CARRIED
   place is solid, on white, and carries the church's name. Launches with all
   twelve open — never mark a place carried until a church has covenanted and
   approved its listing in writing.
   ========================================================================== */
.twelve-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 980px) { .twelve-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .twelve-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .twelve-wall { grid-template-columns: 1fr; } }

.place-card {
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 9.5rem;
}
.place-card--open {
  border: 2px dashed var(--rule);
  background: transparent;
}
.place-card--carried {
  border: 2px solid var(--gold);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.place-num {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
}
.place-card--carried .place-num { color: var(--gold-dark); }
.place-line {
  margin: 0;
  color: var(--fg-soft);
  font-size: .95rem;
  line-height: 1.45;
  flex-grow: 1;
}
.place-church {
  margin: 0;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.35;
}
.place-since {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}
.place-claim {
  font-weight: 600;
  font-size: .92rem;
  color: var(--gold);
  text-decoration: none;
}
.place-claim:hover, .place-claim:focus-visible { text-decoration: underline; color: var(--gold-darker); }

/* Miniature wall — the /partners teaser band */
.twelve-mini {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.1rem 0 .4rem;
}
.twelve-mini span {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 2px dashed var(--rule);
  display: inline-block;
}
.twelve-mini span.is-carried {
  border: 2px solid var(--gold);
  background: var(--gold-tint);
}

@media print {
  .place-card--open { border: 1pt dashed #1a1a1a !important; }
  .place-card--carried { border: 1pt solid #1a1a1a !important; }
}

/* ==========================================================================
   Homepage hero fix — 29 Oct 2026 (content taller than the viewport)
   The hero was locked to 100dvh and its content (eyebrow, H1, tagline, two
   buttons, phone line) measured taller than that on common screens
   (1,088px of copy in a 900px hero). Centring then pushed the H1 up under
   the header and the buttons down into the bottom fade, where they were
   unreadable, and the phone line below the hero entirely. Let the hero grow
   with its content, keep the copy clear of the 14vh bottom fade and the
   scroll cue, and size the headline and tagline so they fit comfortably.
   ========================================================================== */
.hero-epic { height: auto; min-height: 100dvh; align-items: center; }
.hero-epic > .wrap {
  padding-top: 3.5rem;
  padding-bottom: calc(14vh + 4rem);   /* clears the ::after fade and the scroll cue */
}
.hero-epic h1 {
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  max-width: 14ch;
  margin-top: 0.35em;
  text-wrap: balance;   /* no single-word last line; ignored by older browsers */
}
.hero-epic .tagline {
  font-size: clamp(1.02rem, 1.55vw, 1.22rem);
  max-width: 46ch;
  margin-bottom: 1.6em;
}
@media (max-width: 640px) {
  .hero-epic > .wrap { padding-top: 2.5rem; padding-bottom: calc(14vh + 3.5rem); }
  .hero-epic h1 { font-size: clamp(1.8rem, 7vw, 2.3rem); max-width: 15ch; }
}
/* Short laptop viewports (e.g. 1280x720): tighten the headline so the
   buttons land closer to the first screen. */
@media (min-width: 641px) and (max-height: 780px) {
  .hero-epic > .wrap { padding-top: 2.5rem; }
  .hero-epic h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
  .hero-epic .tagline { font-size: 1.05rem; margin-bottom: 1.3em; }
}