/* =========================================================
   Bloom After Foundation — styles.css
   Palette: navy #0b2e4e (text/UI) · pink #f4879b (accent)
   Type: Cormorant Garamond (display) · Nunito Sans (body/UI)
   ========================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --navy:      #0b2e4e;
  --navy-soft: #3f5871;   /* muted body text — ~7:1 on white */
  --navy-700:  #123a5e;
  --pink:      #f4879b;
  --pink-600:  #ec6f88;
  --rose-ink:  #b23a5b;   /* accessible pink for small labels — ~5.5:1 on white */
  --blush-50:  #fdf2f5;
  --blush-100: #fbe6ea;
  --cream:     #fff7f0;
  --paper:     #ffffff;
  --grey-50:   #f5f6f8;
  --line:      #efe1e4;

  --ink: var(--navy);

  --header-h: 76px;
  --logo-size: 112px;  /* header logo — larger, hangs into the hero */

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 10px rgba(11, 46, 78, .06);
  --shadow-md: 0 18px 50px -22px rgba(11, 46, 78, .35);

  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .1px;
  color: var(--navy);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 1000;
  background: var(--navy); color: #fff; padding: .6rem 1rem;
  border-radius: 10px; text-decoration: none; font-weight: 700;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Shared bits ---------- */
.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-ink);
  margin-bottom: 1rem;
}
.eyebrow-on-navy { color: #ffc7d2; }
/* keep eyebrows pink even where a section sets a paragraph colour */
.story-copy p.eyebrow, .mission-box p.eyebrow { color: var(--rose-ink); }

.section-head { max-width: 40ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head-center { max-width: 46rem; margin-inline: auto; text-align: center; }
.steps-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); text-wrap: balance; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }

.btn-on-navy { background: var(--pink); color: var(--navy); }
.btn-on-navy:hover { background: #ff9fb0; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; text-decoration: none; color: var(--rose-ink);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: gap .18s var(--ease), border-color .18s var(--ease);
}
.link-arrow:hover { gap: .8rem; border-color: var(--rose-ink); }

.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--pink); color: var(--navy);
  padding: .16em .5em; border-radius: 999px; vertical-align: middle;
  margin-left: .1rem;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }

.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-mark {
  width: var(--logo-size); height: var(--logo-size);
  border-radius: 50%;
  /* Solid white — matches the header bar so the disc blends seamlessly */
  background: #fff;
  padding: 6px;
  position: relative; z-index: 3;
  /* Negative bottom margin cancels the extra height so the header stays --header-h;
     the medallion then hangs below into the hero. */
  margin-bottom: calc(var(--header-h) - var(--logo-size));
  transform: translateY(6px);
}

.primary-nav { display: flex; align-items: center; flex: 1 1 auto; }
.nav-menu { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex: 1 1 auto; }
.nav-list { list-style: none; display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); padding: 0; margin: 0; margin-inline: auto; }
.nav-list a {
  text-decoration: none; font-weight: 600; color: var(--navy);
  padding: .4rem 0; position: relative;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--pink); transition: right .25s var(--ease);
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { right: 0; }

/* Donate + socials sit at the right */
.nav-actions { display: flex; align-items: center; gap: .9rem; }

.nav-donate {
  background: var(--navy); color: #fff; border: 0;
  font-weight: 700; padding: .55rem 1.15rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.nav-donate:hover { background: var(--navy-700); transform: translateY(-1px); }
.donate-heart { display: inline-flex; color: var(--pink); }
.donate-heart svg { width: 22px; height: 22px; }

.socials { list-style: none; display: flex; align-items: center; gap: .4rem; padding: 0; margin: 0; }
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--pink); background: rgba(244,135,155,.16);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.social svg { width: 20px; height: 20px; }
.social:hover { color: var(--navy); background: rgba(11,46,78,.12); }

.nav-toggle { display: none; background: transparent; border: 0; padding: .5rem; margin-left: auto; }
.nav-toggle-box { display: block; width: 30px; height: 14px; position: relative; }
.nav-toggle-box span {
  position: absolute; left: 0; height: 2px; width: 100%; background: var(--navy); border-radius: 3px;
  transition: transform .3s var(--ease), top .3s var(--ease), bottom .3s var(--ease);
}
.nav-toggle-box span:nth-child(1) { top: 0; }
.nav-toggle-box span:nth-child(2) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2) { bottom: 6px; transform: rotate(-45deg); }

/* Line-break helper: only breaks on mobile */
.mobile-break { display: none; }
/* Line-break helper: only breaks on desktop */
.desktop-break { display: inline; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--header-h));
  background:
    radial-gradient(120% 90% at 88% -10%, var(--blush-100) 0%, transparent 55%),
    linear-gradient(168deg, var(--blush-50) 0%, var(--cream) 62%, #fff 100%);
}

/* Paper hearts — staggered rise-from-bottom on load */
.hero-hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-heart {
  position: absolute;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0;
  animation: heartRise .95s var(--ease) forwards;
  animation-delay: var(--d, .5s);
}
@keyframes heartRise {
  from { opacity: 0; transform: translateY(70px) rotate(var(--r, 0deg)) scale(.9); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
.hh1, .hh2, .hh3, .hh4, .hh5, .hh6 { background-image: url("../images/heart-1.png"); }
.hh1 { background-image: -webkit-image-set(url("../images/heart-3.webp") 1x); background-image: image-set(url("../images/heart-3.webp") type("image/webp"), url("../images/heart-3.png") type("image/png")); left: 3.5%;  top: 25%; width: 112px; height: 100px; --r: -8deg; --d: .5s; }
.hh2 { background-image: -webkit-image-set(url("../images/heart-1.webp") 1x); background-image: image-set(url("../images/heart-1.webp") type("image/webp"), url("../images/heart-1.png") type("image/png")); left: 12%;  top: 54%; width: 80px; height: 71px; --r: 7deg;  --d: .68s; }
.hh3 { background-image: -webkit-image-set(url("../images/heart-2.webp") 1x); background-image: image-set(url("../images/heart-2.webp") type("image/webp"), url("../images/heart-2.png") type("image/png")); left: 6%;   top: 72%; width: 64px; height: 57px; --r: -5deg; --d: .86s; }
.hh4 { background-image: -webkit-image-set(url("../images/heart-4.webp") 1x); background-image: image-set(url("../images/heart-4.webp") type("image/webp"), url("../images/heart-4.png") type("image/png")); right: 13%; top: 38%; width: 112px; height: 100px; --r: 8deg;  --d: .58s; }
.hh5 { background-image: -webkit-image-set(url("../images/heart-2.webp") 1x); background-image: image-set(url("../images/heart-2.webp") type("image/webp"), url("../images/heart-2.png") type("image/png")); right: 12%;  top: 20%; width: 80px; height: 71px; --r: -6deg; --d: .76s; }
.hh6 { background-image: -webkit-image-set(url("../images/heart-1.webp") 1x); background-image: image-set(url("../images/heart-1.webp") type("image/webp"), url("../images/heart-1.png") type("image/png")); right: 6%;   top: 66%; width: 64px; height: 57px; --r: 5deg;  --d: .94s; }
@media (prefers-reduced-motion: reduce) {
  .hero-heart { animation: none; opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}
@media (max-width: 820px) { .hero-hearts { display: none; } }

.hero-inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 0;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.hero h1 {
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.4rem);
  margin-bottom: 1.1rem;
  max-width: 18ch;
}
.hero .lead {
  font-size: clamp(1.1rem, 1.03rem + .35vw, 1.32rem);
  color: var(--navy-soft);
  max-width: 46ch;
  margin-bottom: 2rem;
}
/* Equal-width buttons — both size to the wider label */
.hero-actions {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: .9rem; justify-content: center;
}

/* Countdown bar — sticky to the bottom of the screen while the hero is on screen */
.countdown {
  position: sticky; bottom: 0; z-index: 80;
  background: var(--pink); color: var(--navy);
  box-shadow: 0 -6px 24px -14px rgba(11,46,78,.4);
}
.countdown-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem clamp(.6rem, 1.5vw, 1.05rem);
  padding-block: .9rem;
  text-align: center;
}
.countdown-lead { font-weight: 600; }
.countdown-lead strong { font-weight: 800; }
.countdown-dot {
  width: .7rem; height: .7rem; border-radius: 50%; background: var(--navy); flex: none;
  box-shadow: 0 0 0 0 rgba(11,46,78,.5); animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(.85); box-shadow: 0 0 0 0 rgba(11,46,78,.45); }
  70%  { transform: scale(1);   box-shadow: 0 0 0 5px rgba(11,46,78,0); }
  100% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(11,46,78,0); }
}
@media (prefers-reduced-motion: reduce) { .countdown-dot { animation: none; } }

.countdown-clock { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.countdown-clock b { font-weight: 800; }
/* No opacity here: it composited navy over pink down to 4.24:1 (below AA).
   Hierarchy comes from size + weight instead, keeping contrast at 5.8:1. */
.countdown-clock .u { font-weight: 600; font-size: .82em; margin-left: .12rem; margin-right: .55rem; }
.countdown-clock .u:last-child { margin-right: 0; }

.countdown-cta {
  font-weight: 800; text-decoration: none; color: var(--navy);
  transition: border-color .18s var(--ease);
}
/* underline sits on the inner span so it hugs the text — on mobile the link
   itself spans the full row, which made the rule run edge to edge */
.countdown-cta .cta-line {
  border-bottom: 2px solid rgba(11,46,78,.35); padding-bottom: 1px;
  transition: border-color .18s var(--ease);
}
.countdown-cta:hover .cta-line { border-color: var(--navy); }
.cd-arrow { display: inline-block; transition: transform .2s var(--ease); }
.countdown-cta:hover .cd-arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .cd-arrow { transition: none; } }

/* =========================================================
   VERSE
   ========================================================= */
.verse {
  position: relative; overflow: hidden;
  padding-block: clamp(5rem, 11vw, 9rem);
  background:
    radial-gradient(55% 100% at 0% 50%, rgba(244,135,155,.22) 0%, rgba(244,135,155,.07) 42%, transparent 68%),
    radial-gradient(55% 100% at 100% 50%, rgba(244,135,155,.22) 0%, rgba(244,135,155,.07) 42%, transparent 68%),
    #fff;
}
.verse-content { position: relative; z-index: 1; text-align: center; }

/* Mission statement card — eyebrow + heading + text, as wide as the three step cards */
.mission-box {
  margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(2rem, 4vw, 3.2rem);
}
.mission-box .eyebrow { max-width: none; font-size: .68rem; letter-spacing: .14em; margin-bottom: .8rem; }
.mission-box h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin-bottom: 1.2rem; }
.mission-box p {
  margin-inline: auto; max-width: 58ch;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.7; color: var(--navy-soft);
}

.verse-fig { max-width: 52ch; margin: clamp(2.6rem, 5vw, 4rem) auto 0; text-align: center; }

/* Flowers drift on scroll — spread out within a vertically-centred band */
.verse-decor {
  position: absolute; left: 0; right: 0; top: calc(50% + 42px);
  height: 700px; transform: translateY(-50%);
  pointer-events: none; z-index: 0;
}
.vf {
  position: absolute;
  background-image: url("../images/flower.png");
  background-image: -webkit-image-set(url("../images/flower.webp") 1x);
  background-image: image-set(url("../images/flower.webp") type("image/webp"), url("../images/flower.png") type("image/png"));
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: translateY(var(--ty, 0px)) rotate(var(--rot, 0deg)) scaleX(var(--sx, 1));
  will-change: transform;
}
/* staggered top → bottom within the band (band itself is centred in the section) */
.vf-l1 { left: 0;   top: 2%;  width: 205px; height: 186px; opacity: .2;  --rot: -10deg; }
.vf-l2 { left: 6%;  top: 44%; width: 122px; height: 111px; opacity: .14; --rot: 12deg; }
.vf-l3 { left: 2%;  top: 80%; width: 86px;  height: 78px;  opacity: .1;  --rot: 3deg; }
.vf-r1 { right: 0;  top: 38%; width: 205px; height: 186px; opacity: .2;  --rot: 10deg;  --sx: -1; }
.vf-r2 { right: 6%; top: 4%;  width: 122px; height: 111px; opacity: .14; --rot: -12deg; --sx: -1; }
.vf-r3 { right: 2%; top: 78%; width: 86px;  height: 78px;  opacity: .1;  --rot: -3deg;  --sx: -1; }
@media (max-width: 900px) { .verse-decor { display: none; } }
.verse-quote {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.32; color: var(--navy);
  text-wrap: balance;
}
.verse-cite {
  margin-top: 1.4rem; font-weight: 700; letter-spacing: .04em; color: var(--rose-ink);
  text-transform: uppercase; font-size: .82rem;
}
.verse-cite span { display: block; color: var(--navy-soft); font-weight: 600; letter-spacing: .12em; margin-top: .25rem; }

/* =========================================================
   STEPS
   ========================================================= */
.steps { background: var(--grey-50); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.step-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem);
}
.step-card {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 1.6rem 1.9rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.step-num {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .45vw, 1.45rem);
  line-height: 1; color: var(--navy);   /* navy — 13.9:1 on the card */
  font-variant-numeric: lining-nums tabular-nums;
}
.step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: var(--blush-50); color: var(--navy);
}
.step-icon svg { width: 28px; height: 28px; }
.step-card h3 { font-size: 1.7rem; margin-bottom: .5rem; }
.step-card p { color: var(--navy-soft); }

/* =========================================================
   STORY
   ========================================================= */
.story { background: var(--paper); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.story-grid {
  display: grid; grid-template-columns: .95fr 1.05fr; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.story-media { position: relative; max-width: 440px; }
.story-media img {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: block;
}
/* Soft pink overlay in the corners (frames the photo, keeps the face clear) */
.story-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(115% 90% at 100% 0%, rgba(244,135,155,.30) 0%, transparent 46%),
    radial-gradient(115% 90% at 0% 100%, rgba(244,135,155,.24) 0%, transparent 48%);
}
.story-copy { max-width: 44ch; }
.story-copy h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin-bottom: 1.1rem; }
.story-copy p { color: var(--navy-soft); margin-bottom: 1rem; }
.story-copy .link-arrow { margin-top: .6rem; }

/* =========================================================
   NOMINATE
   ========================================================= */
.nominate {
  background:
    radial-gradient(60% 90% at 50% 112%, rgba(43,112,178,.34) 0%, transparent 55%),
    radial-gradient(85% 120% at 100% -8%, #1b4c78 0%, transparent 55%),
    radial-gradient(120% 140% at 50% 50%, transparent 40%, rgba(4,20,36,.5) 100%),
    linear-gradient(150deg, #0d3357 0%, #0a2740 100%);
  color: #fff; padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.nominate-inner { max-width: 60ch; margin-inline: auto; text-align: center; }
.nominate h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); margin-bottom: 1.1rem; }
.nominate-text { color: #d7e2ee; margin-bottom: 2rem; }
.nominate .btn { margin-inline: auto; }
.nominate-note {
  margin-top: 1.6rem; font-family: var(--serif); font-style: italic;
  font-size: 1.32rem; line-height: 1.4; color: #ffd7de; text-wrap: balance;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy); color: #dfe8f1; }

/* Top: centered logo + inline slogan with dots */
.footer-top { text-align: center; padding-top: clamp(2.6rem, 5vw, 3.6rem); }
.footer-logo { display: inline-block; }
.footer-logo img { width: 140px; height: 140px; margin-inline: auto; }
.footer-slogan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .9rem; margin-top: 1rem;
  font-family: var(--serif); font-size: 1.4rem; color: #fff;
}
.slogan-dot { width: .38rem; height: .38rem; border-radius: 50%; background: var(--pink); flex: none; }

/* Social icons row (between slogan and the Explore/Get-in-touch rows) */
.footer-socials { list-style: none; display: flex; justify-content: center; align-items: center; gap: .5rem; padding: 0; margin: clamp(1.7rem, 3.5vw, 2.4rem) 0 0; }
.footer-socials .social { color: var(--pink); background: rgba(255,255,255,.06); }
.footer-socials .social:hover { color: #fff; background: rgba(255,255,255,.16); }

/* Explore / Get in touch — heading in front of each row (desktop) */
.footer-cols {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  padding-block: clamp(1.7rem, 3.5vw, 2.4rem) clamp(2rem, 5vw, 3rem);
}
.footer-nav, .footer-contact {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem clamp(.7rem, 1.6vw, 1.1rem);
}
.footer-h {
  font-family: var(--sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pink);
  margin: 0;
}
.footer-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem 0;
}
.footer-nav li { display: inline-flex; align-items: center; }
.footer-nav li.fn-break { display: none; }
.footer-nav li:not(:last-child)::after {
  content: ""; width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--pink); margin: 0 clamp(.7rem, 1.6vw, 1.1rem);
}
.footer-nav li.fn-break::after { display: none; }
.footer-nav a, .footer-donate {
  text-decoration: none; color: #dfe8f1; font-weight: 600;
  background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: color .18s var(--ease); cursor: pointer;
}
.footer-nav a:hover, .footer-donate:hover { color: var(--pink); }
.footer-donate .donate-heart { color: #dfe8f1; transition: color .18s var(--ease); }
.footer-donate:hover .donate-heart { color: var(--pink); }
.footer-donate .donate-heart svg { width: 14px; height: 14px; }

.footer-contact address {
  font-style: normal;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem clamp(.7rem, 1.6vw, 1.1rem);
}
.footer-contact span { color: #c4d2e0; }

/* External links (e.g. e-mail): plain text, underline + pink on hover */
.ext-link { color: #c4d2e0; font-weight: 400; text-decoration: none; transition: color .18s var(--ease); }
.ext-link:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

/* copyright heart — inherits the text colour */
.made-heart { display: inline-flex; vertical-align: -.16em; }
.made-heart svg { width: 1.05em; height: 1.05em; }

/* Base: hairline only as wide as the content, above the copyright row */
.footer-base { padding-bottom: 1.6rem; }
.footer-base-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  padding-top: 1.4rem; font-size: .85rem; color: #b7c6d6;
  border-top: 1px solid rgba(255,255,255,.14);
}
.footer-fine { color: #8ea3b8; }

/* =========================================================
   DONATE RAIL
   ========================================================= */
.donate-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 90;
  background: var(--pink); color: var(--navy); border: 0;
  border-radius: 14px 0 0 14px;
  padding: 1rem .55rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  box-shadow: -8px 10px 30px -12px rgba(11,46,78,.4);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), padding-right .2s var(--ease);
}
.donate-rail:hover { background: #ff9fb0; padding-right: .85rem; }
.donate-rail-heart svg { width: 22px; height: 22px; }
.donate-rail-text {
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: .8rem;
}

/* =========================================================
   MODAL
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11,46,78,.55); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.modal-panel {
  position: relative; z-index: 1;
  width: min(460px, 100%); background: var(--paper);
  border-radius: var(--radius-lg); padding: 2.6rem 2rem 2.2rem;
  text-align: center; box-shadow: 0 40px 90px -30px rgba(11,46,78,.6);
  animation: pop .28s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-panel { animation: none; } }

.modal-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--blush-100); color: var(--pink); margin-bottom: 1.1rem;
}
.modal-mark svg { width: 30px; height: 30px; }
.modal-panel h2 { font-size: 2.1rem; margin-bottom: .7rem; }
.modal-panel p { color: var(--navy-soft); margin-bottom: 1.6rem; }
.modal-close {
  position: absolute; top: .9rem; right: .9rem; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: var(--grey-50); color: var(--navy);
  display: grid; place-items: center; transition: background-color .18s var(--ease);
}
.modal-close:hover { background: var(--blush-100); }
.modal-close svg { width: 20px; height: 20px; }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%);
  z-index: 210; background: var(--navy); color: #fff;
  padding: 1rem 1.4rem; border-radius: var(--radius); font-weight: 600;
  border: 1px solid rgba(244,135,155,.55);
  box-shadow: 0 0 0 4px rgba(244,135,155,.16), 0 0 28px rgba(244,135,155,.45), 0 18px 40px -18px rgba(4,20,36,.8);
  max-width: min(92vw, 460px); text-align: center;
  transition: transform .35s var(--ease), opacity .35s var(--ease); opacity: 0;
}
.toast[hidden] { display: block; } /* keep transitions; visibility handled by class */
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s linear; } }

/* =========================================================
   "COMING SOON" TOOLTIP  (Donate controls)
   Navy bubble matching the toast/modal; shows on hover + keyboard
   focus. Screen readers get the same text via #cs-tip-text.
   ========================================================= */
.cs-tip { position: relative; }
/* the sticky rail is already position:fixed (its own positioning context) —
   don't let the line above knock it back into normal flow */
.donate-rail.cs-tip { position: fixed; }
.cs-tip::after, .cs-tip::before {
  position: absolute; opacity: 0; pointer-events: none;
  transition: opacity .16s var(--ease); z-index: 60;
}
.cs-tip::after {                                   /* bubble */
  content: attr(data-tooltip);
  background: var(--navy); color: #fff;
  font: 700 .8rem/1 var(--sans); letter-spacing: .02em;
  padding: .55rem .72rem; border-radius: 10px; white-space: nowrap;
  border: 3px solid #fff;                          /* crisp white ring */
  box-shadow: 0 0 14px 1px rgba(244, 135, 155, .6), 0 12px 26px -8px rgba(4, 20, 36, .75); /* pink glow + depth */
}
.cs-tip::before { content: ""; width: 0; height: 0; z-index: 61; } /* arrow (sits above the bubble so it can't be covered) */
.cs-tip:hover::after, .cs-tip:hover::before,
.cs-tip:focus-visible::after, .cs-tip:focus-visible::before { opacity: 1; }

/* Default position: above the control (arrow points down) */
.cs-tip::after  { left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); }
.cs-tip::before { left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #fff; }

/* Below the control (header Donate — arrow points up) */
.cs-tip--below::after  { top: calc(100% + 14px); bottom: auto; }
.cs-tip--below::before { top: calc(100% + 7px); bottom: auto;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid #fff; border-top: 0; }

/* Left of the control (sticky rail — arrow points right) */
.cs-tip--left::after  { left: auto; right: calc(100% + 14px); bottom: 50%; transform: translateY(50%); }
.cs-tip--left::before { left: auto; right: calc(100% + 7px); bottom: 50%; transform: translateY(50%);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 8px solid #fff; border-right: 0; }

@media (prefers-reduced-motion: reduce) { .cs-tip::after, .cs-tip::before { transition: none; } }

/* =========================================================
   INTERIOR PAGES  (Our Story, Nominate)
   ========================================================= */

/* Compact hero variants (reuse .hero background + countdown mechanics) */
.page-hero { min-height: calc(66svh - var(--header-h)); }
.page-hero h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); max-width: 20ch; margin-bottom: 1rem; text-wrap: balance; }
.page-hero h1.h1-oneline { max-width: none; }   /* keep short titles on one line on wider screens */
.page-hero .lead { margin-bottom: 0; }
.page-hero .lead.lead-wide { max-width: none; }  /* let the lead sit on one line on wider screens */

/* Interior hero decorative hearts (two left, one right) */
.ih1, .ih2, .ih3 { background-image: url("../images/heart-1.png"); }
.ih1 { background-image: -webkit-image-set(url("../images/heart-3.webp") 1x); background-image: image-set(url("../images/heart-3.webp") type("image/webp"), url("../images/heart-3.png") type("image/png")); left: 5%;  top: 23%; width: 104px; height: 93px; --r: -8deg; --d: .5s; }
.ih2 { background-image: -webkit-image-set(url("../images/heart-1.webp") 1x); background-image: image-set(url("../images/heart-1.webp") type("image/webp"), url("../images/heart-1.png") type("image/png")); left: 9%;  top: 60%; width: 74px;  height: 66px; --r: 7deg;  --d: .68s; }
.ih3 { background-image: -webkit-image-set(url("../images/heart-4.webp") 1x); background-image: image-set(url("../images/heart-4.webp") type("image/webp"), url("../images/heart-4.png") type("image/png")); right: 7%; top: 34%; width: 104px; height: 93px; --r: 8deg;  --d: .58s; }

/* Story article (prose) */
.story-article-section { padding-block: clamp(3rem, 8vw, 6rem); background: #fff; position: relative; overflow: hidden; }
.story-article { max-width: 52rem; position: relative; z-index: 1; }
.story-article > p { font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); line-height: 1.8; color: var(--navy-soft); margin-bottom: 1.5rem; text-align: center; }
.story-article > p:last-child { margin-bottom: 0; }

/* Standout opening line (with pink rule above and below) */
.story-article .story-intro {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.3; color: var(--navy);
  text-align: center; text-wrap: balance; max-width: 26ch;
  margin: 0 auto clamp(2rem, 5vw, 3rem); padding-block: 1.5rem; position: relative;
}

/* Decorative flowers down both sides of the story */
.story-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sf-l1 { left: 0;    top: 3%;  width: 190px; height: 173px; opacity: .18; --rot: -10deg; }
.sf-r1 { right: 0;   top: 9%;  width: 205px; height: 186px; opacity: .2;  --rot: 10deg;  --sx: -1; }
.sf-l2 { left: 4%;   top: 22%; width: 112px; height: 102px; opacity: .13; --rot: 12deg; }
.sf-r2 { right: 3%;  top: 32%; width: 132px; height: 120px; opacity: .15; --rot: -12deg; --sx: -1; }
.sf-l3 { left: 1%;   top: 45%; width: 150px; height: 136px; opacity: .16; --rot: 4deg; }
.sf-r3 { right: 5%;  top: 55%; width: 96px;  height: 87px;  opacity: .11; --rot: -6deg;  --sx: -1; }
.sf-l4 { left: 5%;   top: 68%; width: 120px; height: 109px; opacity: .13; --rot: -8deg; }
.sf-r4 { right: 0;   top: 76%; width: 180px; height: 164px; opacity: .18; --rot: 8deg;   --sx: -1; }
.sf-l5 { left: 2%;   top: 90%; width: 100px; height: 91px;  opacity: .11; --rot: 6deg; }
.sf-r5 { right: 4%;  top: 94%; width: 120px; height: 109px; opacity: .13; --rot: -5deg;  --sx: -1; }
@media (max-width: 900px) { .story-decor { display: none; } }

/* Photo inside the story */
.story-figure { margin: clamp(2.5rem, 6vw, 4rem) auto; text-align: center; max-width: 440px; }
.story-figure .story-media { margin-inline: auto; }
.story-figure figcaption { margin-top: 1rem; font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-ink); }

/* Pull-quote + emphasis: same serif treatment, pink rule above and below */
.story-article .story-pullquote,
.story-article .story-emphasis {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.3; color: var(--navy);
  text-align: center; text-wrap: balance; max-width: 22ch;
  margin: clamp(2.25rem, 6vw, 3.5rem) auto; padding-block: 1.5rem; position: relative;
}
.story-article .story-pullquote::before, .story-article .story-pullquote::after,
.story-article .story-emphasis::before, .story-article .story-emphasis::after,
.story-article .story-intro::before, .story-article .story-intro::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 3px; background: var(--pink);
}
.story-article .story-pullquote::before, .story-article .story-emphasis::before, .story-article .story-intro::before { top: 0; }
.story-article .story-pullquote::after,  .story-article .story-emphasis::after,  .story-article .story-intro::after  { bottom: 0; }

/* Nominate: intro copy */
.nominate-intro { padding-block: clamp(3rem, 8vw, 5.5rem); background: #fff; }
.nominate-intro-inner { max-width: 46rem; text-align: center; }
.nominate-intro-inner > p { font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); line-height: 1.8; color: var(--navy-soft); margin-bottom: 1.4rem; }
.nominate-intro-inner > p:last-child { margin-bottom: 0; }

/* Nominate: Google Form section */
.form-section {
  padding-block: clamp(3rem, 8vw, 6rem);
  background: radial-gradient(80% 60% at 50% 0%, var(--blush-50) 0%, transparent 60%), var(--cream);
}
.form-intro { margin-top: 1.5rem; color: var(--navy-soft); font-size: clamp(1rem, .96rem + .3vw, 1.15rem); max-width: 46ch; margin-inline: auto; }
.form-embed {
  max-width: 760px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: clamp(.5rem, 2vw, 1rem);
}
/* A Google Form embed can't auto-size per step (cross-origin), so we use a
   consistent one-screen frame that scrolls internally instead of a giant fixed block. */
.form-embed iframe {
  width: 100%; height: min(82vh, 900px); min-height: 600px; border: 0; display: block;
  border-radius: calc(var(--radius) - 6px); background: #fff;
}

/* Nominate: closing "hope" band (matches the navy nominate section) */
.hope-band {
  background:
    radial-gradient(60% 90% at 50% 112%, rgba(43,112,178,.34) 0%, transparent 55%),
    radial-gradient(85% 120% at 100% -8%, #1b4c78 0%, transparent 55%),
    radial-gradient(120% 140% at 50% 50%, transparent 40%, rgba(4,20,36,.5) 100%),
    linear-gradient(150deg, #0d3357 0%, #0a2740 100%);
  color: #fff; padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center;
}
.hope-band-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.4; color: #ffd7de;
  text-wrap: balance; max-width: min(92vw, 46rem); margin-inline: auto;
}

/* =========================================================
   EVENT POPUP  ·  START
   Styling only. Toggle the popup itself via SHOW_EVENT_POPUP in
   global/meta.php. Mirrors the Donate modal so it feels native.
   ========================================================= */
.event-popup { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 1.25rem; }
.event-popup[hidden] { display: none; }
.event-popup-backdrop { position: absolute; inset: 0; background: rgba(11,46,78,.55); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.event-popup-panel {
  position: relative; z-index: 1;
  width: min(500px, 100%); overflow: hidden;
  border-radius: var(--radius-lg); padding: 2.8rem 2.2rem 2.3rem;
  text-align: center; box-shadow: 0 40px 90px -30px rgba(11,46,78,.6);
  animation: pop .28s var(--ease);
  color: #fff;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(244,135,155,.30) 0%, transparent 55%),
    radial-gradient(90% 120% at 100% 110%, #1b4c78 0%, transparent 55%),
    linear-gradient(155deg, #0d3357 0%, #0a2740 100%);
}
.event-popup-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .18s var(--ease);
}
.event-popup-close:hover { background: rgba(255,255,255,.28); }
.event-popup-close svg { width: 20px; height: 20px; }
.event-popup-eyebrow {
  font-family: var(--sans); font-weight: 800; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: #ffc7d2; margin-bottom: .5rem;
}
.event-popup-panel h2 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.05; margin-bottom: .9rem;
}
.event-popup-meta {
  font-family: var(--sans); font-weight: 700; color: #eaf1f8;
  font-size: .95rem; line-height: 1.7; margin-bottom: .9rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem .55rem;
}
.event-popup-dot { width: .34rem; height: .34rem; border-radius: 50%; background: var(--pink); }
.event-popup-venue { flex-basis: 100%; color: #c4d2e0; font-weight: 600; }
.event-popup-desc {
  color: #dbe5f0; font-size: 1.02rem; line-height: 1.6;
  max-width: 34ch; margin: 0 auto 1.6rem; text-wrap: balance;
}
.event-popup-actions { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.event-popup-actions .btn { width: 100%; max-width: 260px; }
@media (prefers-reduced-motion: reduce) {
  .event-popup-panel, .event-popup-backdrop { animation: none; }
}
/* =========================================================
   EVENT POPUP  ·  END
   ========================================================= */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; text-align: center; }
  .story-copy { max-width: none; margin-inline: auto; }
  .story-media { order: -1; margin-inline: auto; }
  .story-copy .link-arrow { justify-content: center; }

  .step-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

@media (max-width: 720px) {
  :root { --header-h: 64px; --logo-size: 84px; }

  /* Mobile line breaks */
  .mobile-break { display: inline; }
  .desktop-break { display: none; }

  /* event popup: hide the date/time separator dot on mobile (desktop keeps it) */
  .event-popup-dot { display: none; }
  .event-popup-venue .venue-sep { display: none; }

  /* explicit mobile breaks are supplied in the markup — let them stand,
     and allow a little more width so the intended lines don't re-wrap */
  .hope-band-text { text-wrap: wrap; max-width: 100%; }

  /* Stack hero buttons full width, still equal */
  .hero-actions { display: grid; grid-auto-flow: row; grid-auto-columns: auto; width: min(20rem, 100%); }

  /* Header: solid white bar so it blends with the circle behind the logo */
  .site-header { background: #fff; }
  .site-header.is-scrolled { border-color: transparent; }

  /* Mobile nav */
  .nav-toggle { display: inline-flex; align-items: center; z-index: 2; margin-left: auto; }
  .nav-menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Soft gradient so the panel reads distinctly from the white header bar */
    background: linear-gradient(180deg, #fdf4f6 0%, var(--blush-50) 46%, var(--cream) 100%);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.4rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-140%);
    visibility: hidden;                        /* keep closed-menu links out of the tab order */
    transition: transform .55s var(--ease), visibility 0s linear .55s;   /* closing (slower) */
  }
  .nav-menu.is-open { transform: translateY(0); visibility: visible; transition: transform .34s var(--ease), visibility 0s; } /* opening */
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid rgba(11,46,78,.10); }
  .nav-list a { display: block; padding: .95rem 0; font-size: 1.1rem; text-align: center; }
  .nav-list a::after { display: none; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 1rem; margin-left: 0; padding-top: 1.1rem; }
  .nav-donate { width: 100%; justify-content: center; padding: .9rem; }
  .socials { justify-content: center; gap: .85rem; }
  .nav-menu .social { width: 52px; height: 52px; }
  .nav-menu .social svg { width: 27px; height: 27px; }

  /* Countdown: hide the leading pulse dot; keep the other two together on row 2 */
  .countdown-inner { flex-wrap: wrap; row-gap: .35rem; }
  .countdown-inner > .countdown-dot:first-child { display: none; }
  .countdown-lead { flex-basis: 100%; }
  .countdown-cta { flex-basis: 100%; }

  .donate-rail { top: auto; bottom: 1rem; right: 1rem; transform: none; border-radius: 50%; padding: .95rem; }
  .donate-rail:hover { padding: .95rem; }
  .donate-rail-text { display: none; }
  .donate-rail-heart svg { width: 26px; height: 26px; }

  /* Mission eyebrow: match the James 1:27 eyebrow size on mobile */
  .mission-box .eyebrow { font-size: .8rem; letter-spacing: .16em; }

  /* Even spacing around the mission box: gap above == gutter at its sides.
     Trim the gap under NEW LIVING TRANSLATION to match the space above HOW IT WORKS */
  .verse { padding-top: var(--gutter); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }

  /* ---- Footer ---- */
  .footer-slogan { display: block; line-height: 1.55; }
  .footer-slogan .line-end-dot { display: none; }     /* dots that end a line */
  .suite-comma { display: none; }                      /* comma before the line break */

  /* Headings stacked above their rows */
  .footer-nav, .footer-contact { flex-direction: column; gap: .55rem; }

  /* Explore: break after "Our Story"; drop the dot that ends that line */
  .footer-nav ul { flex-wrap: wrap; }
  .footer-nav li.fn-break { display: block; flex-basis: 100%; height: 0; }
  .footer-nav li.fn-line-end::after { display: none; }

  /* Contact: email on its own line, address centred below */
  .footer-contact address { flex-direction: column; gap: .5rem; text-align: center; }
  .footer-contact .line-end-dot { display: none; }
  .footer-address { display: block; text-align: center; }

  /* Copyright: hide the pipe, break instead */
  .footer-base-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-base-inner .pipe { display: none; }

  /* Hairline should not run edge to edge */
  .footer-base-inner { width: auto; padding-inline: 0; margin-inline: var(--gutter); }
}

/* Larger phones: let a sliver of a paper heart peek in from each edge.
   Threshold + offsets chosen so they never reach the centred hero content. */
@media (min-width: 480px) and (max-width: 820px) {
  .hero-hearts { display: block; }
  .hero-heart { display: none; }
  .hh1, .hh4 { display: block; }
  .hh1 { left: -87px; top: 30%; width: 100px; height: 89px; --r: -8deg; }
  .hh4 { right: -87px; top: 44%; width: 100px; height: 89px; --r: 8deg; }
}

@media (max-width: 380px) {
  :root { --logo-size: 74px; }
}
}