/* ==========================================================================
   Divine Mercy Catholic Church - Okponglo, East Legon
   Glass-white theme with the Divine Mercy rays: red & pale blue.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Divine Mercy palette */
  --red-900:#7B0A1C;
  --red-700:#A50E28;
  --red-600:#C8102E;      /* primary red ray */
  --red-400:#E4566B;
  --red-100:#FBE7EA;

  --blue-900:#0B2E5C;
  --blue-800:#123C74;
  --blue-700:#1B4FA0;     /* primary blue */
  --blue-500:#3C7DD9;
  --blue-300:#8FBCEB;     /* pale ray */
  --blue-100:#E8F1FB;

  --gold:#C9A227;

  /* Neutrals */
  --ink:#111A2B;
  --ink-soft:#3A4759;
  --ink-mute:#68758A;
  --line:#E3E9F2;
  --bg:#F6F8FC;
  --white:#FFFFFF;

  /* Glass */
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.85);
  --glass-blur:saturate(180%) blur(20px);

  /* Shadows */
  --sh-xs:0 1px 2px rgba(17,26,43,.05);
  --sh-sm:0 2px 10px rgba(17,26,43,.06);
  --sh-md:0 10px 30px -12px rgba(17,26,43,.18), 0 2px 8px rgba(17,26,43,.04);
  --sh-lg:0 30px 70px -30px rgba(11,46,92,.35), 0 8px 24px -12px rgba(17,26,43,.12);

  /* Shape & motion */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --ease:cubic-bezier(.22,.7,.3,1);
  --t:.38s var(--ease);

  /* Type */
  /* One typeface across the whole site. Two tokens remain so the intent of
     each piece of text is still readable in the CSS - and so a display face
     could be reintroduced in one line - but both resolve to Inter. */
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Layout */
  --wrap:1200px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --nav-h:76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);overflow-x:hidden}
body{
  margin:0;
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--blue-700);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.022em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.35rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
h4{font-size:1.1rem;font-family:var(--body);font-weight:650;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.4em}
::selection{background:var(--red-100);color:var(--red-900)}

/* ---------- 3. Ambient background ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(760px 560px at 8% -6%, rgba(200,16,46,.10), transparent 62%),
    radial-gradient(820px 620px at 100% 2%, rgba(27,79,160,.12), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(143,188,235,.18), transparent 64%),
    linear-gradient(180deg,#FBFCFE 0%,var(--bg) 55%,#EEF3FA 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(17,26,43,.045) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000,transparent 78%);
}

/* ---------- 4. Layout helpers ---------- */
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.wrap-wide{width:min(1400px,100% - var(--gut)*2);margin-inline:auto}
section{position:relative;padding:clamp(4rem,8vw,7rem) 0}
.section-tight{padding:clamp(2.5rem,5vw,4rem) 0}
.center{text-align:center}
.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.stack>*+*{margin-top:1rem}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- 5. Shared atoms ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.73rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red-600);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--red-600),var(--blue-300))}
.eyebrow.blue{color:var(--blue-700)}
.eyebrow.center-line{justify-content:center}
/* A centred eyebrow needs a rule on both sides, otherwise the single left-hand
   dash pushes the words off the axis of the heading below. */
.eyebrow.center-line::after{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-300),var(--red-600));
}
.eyebrow.blue.center-line::after{background:linear-gradient(90deg,var(--red-600),var(--blue-300))}
/* On the narrowest phones the two rules eat width the words need, and a
   wrapped label leaves them stranded either side of a two-line block. Drop
   them: the text still centres perfectly on its own. */
@media (max-width:390px){
  .eyebrow.center-line::before,
  .eyebrow.center-line::after{display:none}
}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-mute);max-width:62ch}
.center .lede{margin-inline:auto}
/* A page hero carries one sentence, centred under the title. The 62ch body
   measure broke it early and left a single word stranded on line two with
   half the row empty beside it, so here it takes the width of the page.
   balance keeps the two halves even on the narrower screens where it must
   still wrap. (This class was in the markup on seven pages but had never
   been given a rule.) */
.lede-single{max-width:none;text-wrap:balance}
.section-head{max-width:70ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-head.center{margin-inline:auto}
.divider-rays{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.85rem 0 1rem}
.divider-rays i{display:block;height:3px;border-radius:3px}
.divider-rays i:nth-child(1){width:44px;background:var(--red-600)}
.divider-rays i:nth-child(2){width:8px;height:8px;border-radius:50%;background:var(--blue-700)}
.divider-rays i:nth-child(3){width:44px;background:var(--blue-300)}

/* Glass surface */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
}
.card{padding:clamp(1.5rem,2.6vw,2rem);position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:#fff}
.card-link{display:block;color:inherit}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.7rem;border-radius:var(--r-pill);
  font-size:.94rem;font-weight:650;letter-spacing:.005em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn-red{background:linear-gradient(135deg,var(--red-600),var(--red-700));color:#fff;box-shadow:0 12px 26px -12px rgba(200,16,46,.75)}
.btn-red:hover{box-shadow:0 18px 34px -14px rgba(200,16,46,.85);transform:translateY(-2px)}
.btn-blue{background:linear-gradient(135deg,var(--blue-700),var(--blue-900));color:#fff;box-shadow:0 12px 26px -12px rgba(27,79,160,.7)}
.btn-blue:hover{box-shadow:0 18px 34px -14px rgba(27,79,160,.8);transform:translateY(-2px)}
.btn-ghost{background:var(--glass-strong);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.btn-ghost:hover{border-color:var(--blue-300);color:var(--blue-700);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-sm{padding:.62rem 1.2rem;font-size:.85rem}
.btn-lg{padding:1.05rem 2.1rem;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.center .btn-row{justify-content:center}

/* Pills / tags */
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem .85rem;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:650;letter-spacing:.02em;
  background:var(--blue-100);color:var(--blue-800);border:1px solid rgba(27,79,160,.12);
}
.pill-red{background:var(--red-100);color:var(--red-700);border-color:rgba(200,16,46,.14)}
.pill-gold{background:#FBF4DF;color:#8A6F12;border-color:rgba(201,162,39,.22)}
.pill-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}

/* Icon chip */
.chip{
  width:52px;height:52px;border-radius:15px;flex:none;
  display:grid;place-items:center;margin-bottom:1.1rem;
  background:linear-gradient(140deg,var(--red-100),var(--blue-100));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(27,79,160,.4);
  color:var(--red-600);
}
.chip svg{width:24px;height:24px}
.chip.blue{color:var(--blue-700)}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  transition:background var(--t),box-shadow var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom-color:rgba(227,233,242,.9);
  box-shadow:0 4px 24px -14px rgba(17,26,43,.3);
}
.topbar{
  background:linear-gradient(90deg,var(--blue-900),var(--blue-700) 45%,var(--red-700));
  color:rgba(255,255,255,.92);font-size:.78rem;letter-spacing:.01em;
}
.topbar .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:36px;padding-block:.3rem}
.topbar a{color:inherit;opacity:.9}
.topbar a:hover{opacity:1;text-decoration:underline}
.topbar-left{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.topbar-social{display:flex;gap:.65rem;align-items:center}
.topbar-social svg{width:15px;height:15px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--ink)}
.brand-mark{
  width:46px;height:46px;flex:none;display:block;
  border-radius:50%;overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(11,46,92,.45);
}
.brand-mark img,.brand-mark svg{width:100%;height:100%;object-fit:cover;display:block}
.brand-text b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.05;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand-text span{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-600);font-weight:650;margin-top:.18rem;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav-links a{
  display:block;padding:.55rem .68rem;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:550;color:var(--ink-soft);white-space:nowrap;
  transition:color .22s,background .22s;
}
/* Keep the bar on one line as it narrows: first drop the secondary button,
   then tighten the links, then hand over to the mobile menu. */
@media (max-width:1360px){
  .nav-cta .btn-ghost{display:none}
}
@media (max-width:1240px){
  .nav-links a{padding:.5rem .52rem;font-size:.84rem}
  .brand-text b{font-size:1.15rem}
  .brand-text span{font-size:.58rem;letter-spacing:.12em}
}
.nav-links a:hover{color:var(--blue-700);background:rgba(232,241,251,.75)}
.nav-links a.active{color:var(--red-700);background:var(--red-100)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--glass-strong);cursor:pointer;place-items:center}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .3s var(--ease),background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1140px){
  .nav-toggle{display:grid}
  .nav-links{
    position:fixed;inset:calc(var(--nav-h) + 36px) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    padding:1.1rem var(--gut) 1.6rem;
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--line);
    box-shadow:var(--sh-lg);
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    max-height:calc(100vh - var(--nav-h) - 36px);overflow-y:auto;
  }
  .nav-open .nav-links{transform:none;opacity:1;visibility:visible}
  .nav-links a{padding:.85rem 1rem;font-size:1rem;border-radius:var(--r-md)}
  .nav-cta .btn-ghost{display:none}
}
@media (max-width:640px){
  .topbar-left .hide-sm{display:none}
  .topbar{font-size:.72rem}
  .brand-mark{width:38px;height:38px}
  .brand-text b{font-size:1.05rem}
  .brand-text span{font-size:.55rem;letter-spacing:.1em}
  .nav{gap:.6rem}
  .nav-cta{gap:.4rem}
}
@media (max-width:400px){
  .brand-text span{display:none}
}
/* Smallest phones (320px): the Donate label goes, leaving the heart, so the
   menu button always stays on screen and reachable. */
@media (max-width:390px){
  .nav-cta .btn-red .btn-label{display:none}
  .nav-cta .btn-red{padding:.62rem .85rem}
  .brand-mark{width:36px!important;height:36px!important}
  .brand-text b{font-size:1rem}
  .nav{gap:.45rem}
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,7vw,6.5rem);
  isolation:isolate;
}
/* ---- 7a. Hero backdrop aura --------------------------------------------
   Two huge soft cones washing the whole hero, anchored under the figure.
   Only `opacity` animates, so the browser never repaints - it composites
   an already-rasterised layer. Costs essentially nothing.                  */
.hero-aura{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  --apex-x:63%;            /* sits beneath the figure on desktop */
  --apex-y:-6%;
  animation:auraIn 2.2s var(--ease) both;
}
@media (max-width:980px){ .hero-aura{--apex-x:50%;--apex-y:-10%} }
@keyframes auraIn{from{opacity:0}to{opacity:1}}

.aura-ray{
  position:absolute;left:var(--apex-x);top:var(--apex-y);
  width:150%;height:135%;margin-left:-75%;
  transform-origin:50% 0;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
  /* A static mask feathers the sides of the cone, so the light has no hard
     edge. Masks are rasterised once - this costs nothing per frame. */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 34%,#000 66%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 34%,#000 66%,transparent 100%);
  animation:auraBreathe var(--dur,15s) ease-in-out infinite alternate;
}
.aura-red{
  transform:rotate(24deg);
  background:linear-gradient(to bottom,
    rgba(200,16,46,.20) 0%, rgba(200,16,46,.11) 38%, rgba(200,16,46,0) 84%);
}
.aura-pale{
  transform:rotate(-24deg);--dur:19s;animation-delay:-6s;
  background:linear-gradient(to bottom,
    rgba(96,158,220,.24) 0%, rgba(143,188,235,.13) 38%, rgba(143,188,235,0) 84%);
}
/* Stacked layout puts the headline directly over the aura - hold it back. */
@media (max-width:980px){ .hero-aura{opacity:.55} }
.aura-core{
  position:absolute;left:var(--apex-x);top:var(--apex-y);
  width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,.45) 42%,rgba(255,255,255,0) 72%);
  animation:auraBreathe 11s ease-in-out infinite alternate;
}
@keyframes auraBreathe{from{opacity:.55}to{opacity:1}}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:.35em}
.hero h1 .script{
  display:block;font-style:italic;font-weight:500;
  background:linear-gradient(105deg,var(--red-600),var(--blue-700) 65%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-loc{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  padding:.45rem 1rem .45rem .55rem;border-radius:var(--r-pill);
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--sh-sm);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
}
.hero-loc b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red-600);color:#fff}
.hero-loc svg{width:13px;height:13px}
.hero .lede{font-size:clamp(1.08rem,1.7vw,1.28rem);margin-bottom:1.8rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.4rem);margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.hero-stat b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--blue-800);line-height:1}
.hero-stat span{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute);font-weight:600}

/* ---- 7b. The Divine Mercy stage ----------------------------------------
   Light flowing from the Sacred Heart. Every animated layer moves only
   `transform` and `opacity`, so all of it runs on the compositor. There
   are no filters on moving elements (a blur would force a repaint every
   frame) - the softness comes from gradient falloff instead.              */
.hero-visual{position:relative}

.mercy-stage{
  position:relative;margin:0;
  aspect-ratio:400/470;
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  border:6px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-lg);
  /* A soft field, deeper at the head so the light has something to glow
     against, clearing at the foot so the rays spill out into the page. */
  background:
    radial-gradient(80% 54% at 50% 40%, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 64%),
    linear-gradient(180deg,#D4E2F3 0%,#E3EDF9 28%,#F1F6FD 60%,#F9FCFE 100%);
  --heart-x:50%;
  --heart-y:41%;
}

/* Halo of light around the Heart */
.mercy-glow{
  position:absolute;left:var(--heart-x);top:var(--heart-y);
  width:74%;aspect-ratio:1;margin:-37% 0 0 -37%;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.98) 0%, rgba(255,252,250,.62) 24%,
    rgba(255,246,247,.30) 44%, rgba(255,250,250,.12) 64%,
    rgba(255,255,255,.04) 82%, rgba(255,255,255,0) 100%);
  animation:mercyGlow 7s ease-in-out infinite;
}
@keyframes mercyGlow{
  0%,100%{transform:scale(1);opacity:.86}
  50%    {transform:scale(1.09);opacity:1}
}

/* The two broad cones - the steady body of each ray.
   These sit ABOVE the figure, so the light falls across the garment the
   way it does in the image of the Divine Mercy. */
.mercy-cone{
  position:absolute;left:var(--heart-x);top:var(--heart-y);z-index:4;
  width:54%;height:96%;margin-left:-27%;
  transform-origin:50% 0;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 74%,transparent 100%);
  animation:mercyBreathe 9s ease-in-out infinite alternate;
}
.cone-red{
  transform:rotate(27deg);
  background:linear-gradient(to bottom,
    rgba(200,16,46,.30) 0%, rgba(200,16,46,.22) 40%,
    rgba(200,16,46,.10) 72%, rgba(200,16,46,0) 100%);
}
.cone-pale{
  transform:rotate(-27deg);animation-duration:12s;animation-delay:-4s;
  background:linear-gradient(to bottom,
    rgba(150,198,240,.46) 0%, rgba(163,203,240,.30) 40%,
    rgba(180,215,245,.12) 72%, rgba(180,215,245,0) 100%);
}
@keyframes mercyBreathe{from{opacity:.6}to{opacity:1}}

/* Individual shafts of light that shoot outward and fade */
.mercy-ray{
  position:absolute;left:var(--heart-x);top:var(--heart-y);z-index:5;
  width:15%;height:92%;margin-left:-7.5%;
  transform-origin:50% 0;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 34%,#000 66%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 34%,#000 66%,transparent 100%);
  opacity:0;
  transform:rotate(var(--a)) scaleY(.5);
  animation:mercyRay var(--dur,6.5s) cubic-bezier(.25,.5,.35,1) var(--d,0s) infinite;
}
.r-red{
  background:linear-gradient(to bottom,
    rgba(214,32,62,.62) 0%, rgba(200,16,46,.28) 42%, rgba(200,16,46,0) 100%);
}
.r-pale{
  background:linear-gradient(to bottom,
    rgba(232,244,255,.95) 0%, rgba(126,180,232,.42) 40%, rgba(143,188,235,0) 100%);
}
@keyframes mercyRay{
  0%  {opacity:0;   transform:rotate(var(--a)) scaleY(.45)}
  14% {opacity:.95}
  62% {opacity:.34}
  100%{opacity:0;   transform:rotate(var(--a)) scaleY(1.3)}
}

/* Rings of mercy pulsing out from the Heart */
/* A soft-edged gradient ring, not a drawn circle - a hard border would read
   as a loading spinner rather than as light. */
.mercy-pulse{
  position:absolute;left:var(--heart-x);top:var(--heart-y);z-index:6;
  width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;border-radius:50%;
  background:radial-gradient(circle,
    rgba(200,16,46,0) 58%, rgba(200,16,46,.26) 78%, rgba(200,16,46,0) 100%);
  opacity:0;
  animation:mercyPulse 5.4s cubic-bezier(.2,.6,.3,1) var(--d,0s) infinite;
}
.mercy-pulse.p2{
  background:radial-gradient(circle,
    rgba(120,178,232,0) 58%, rgba(120,178,232,.30) 78%, rgba(120,178,232,0) 100%);
}
@keyframes mercyPulse{
  0%  {transform:scale(.5);opacity:0}
  20% {opacity:.34}
  100%{transform:scale(4.2);opacity:0}
}

/* Optional drop-in photograph of the Divine Mercy */
.mercy-photo{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:3;object-fit:cover;display:none;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.25) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.25) 88%,transparent 100%);
}
/* With a picture in place the drawn light steps back so it does not compete
   with the rays already in the image. */
.mercy-stage.has-photo .mercy-photo{display:block}
.mercy-stage.has-photo .mercy-cone{opacity:.5}
.mercy-stage.has-photo .mercy-glow{opacity:.4}
.mercy-stage.has-photo .mercy-heart{display:none}

/* The Heart - the source of the light, and the focus of the whole panel */
.mercy-heart{
  position:absolute;left:var(--heart-x);top:var(--heart-y);z-index:7;
  width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;
  /* Centred, so it reads as a point of light rather than a polished sphere */
  background:radial-gradient(circle,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.97) 13%,
    rgba(255,196,208,.94) 27%, rgba(226,58,88,.76) 45%,
    rgba(200,16,46,.34) 63%, rgba(200,16,46,.11) 81%, rgba(200,16,46,0) 100%);
  animation:mercyHeart 3.4s ease-in-out infinite;
}
@keyframes mercyHeart{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.16)}
}

/* Slow drifting motes of light */
.mercy-motes{position:absolute;inset:0;z-index:2;pointer-events:none}
.mercy-motes i{
  position:absolute;bottom:-4%;left:var(--x);
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);
  opacity:0;
  animation:mercyMote var(--dur,14s) linear var(--d,0s) infinite;
}
@keyframes mercyMote{
  0%  {transform:translateY(0) scale(.7);opacity:0}
  12% {opacity:.85}
  80% {opacity:.5}
  100%{transform:translateY(-60vh) scale(1.1);opacity:0}
}

/* Pause everything the moment it leaves the screen, or the tab is hidden */
.mercy-stage.paused *,
.hero-aura.paused *,
.hero-aura.paused{animation-play-state:paused!important}

/* Fewer moving parts on small screens */
@media (max-width:560px){
  .mercy-ray.ray-extra,.mercy-motes{display:none}
}
.hero-float{
  position:absolute;left:-5%;bottom:-3%;width:min(250px,64%);
  padding:1.1rem 1.25rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid #fff;box-shadow:var(--sh-lg);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-float .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--red-600);font-weight:700}
.hero-float .v{font-family:var(--display);font-size:1.5rem;color:var(--ink);font-weight:650;line-height:1.15}
.hero-float .n{font-size:.8rem;color:var(--ink-mute)}
.hero-badge{
  position:absolute;right:-4%;top:6%;
  width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:linear-gradient(140deg,var(--red-600),var(--red-700));color:#fff;
  box-shadow:0 18px 34px -14px rgba(200,16,46,.7);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  border:4px solid rgba(255,255,255,.85);
}
/* Stacked layout: the mass-times strip sits right below, so the floating
   card and the badge would only crowd the figure. */
@media (max-width:980px){.hero-badge,.hero-float{display:none}}

/* ---------- 7c. The home banner ----------------------------------------
   Full-bleed photographs behind a welcome. Cross-fade plus a very slow
   drift; the pictures are cover-cropped here by design, so the drift costs
   nothing at the edges.                                                   */
.banner{
  position:relative;overflow:hidden;isolation:isolate;
  /* full-bleed: the generic section padding would shrink the content box and
     leave the words stranded halfway up the frame */
  padding:0;
  background:linear-gradient(140deg,#0B2E5C,#3A0A16);
}
/* The hero, edge to edge under the header */
.home-banner{height:clamp(420px, calc(100vh - 150px), 760px)}
/* The same slideshow set inside a page: shorter, and with corners, because
   it sits on the page rather than running off both edges of it. */
.banner-inline{
  height:clamp(420px, 60vh, 620px);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
}
.banner-frames{position:absolute;inset:0;z-index:0}
.banner-frame{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.banner-frame.is-active{opacity:1}
/* The whole photograph is shown, never cropped - so a portrait keeps every
   face. The space either side is filled with a blurred, darkened copy of the
   same picture (one download, the browser caches it), which reads as a
   deliberate mat rather than as empty letterboxing. There is no slow zoom:
   it would crop back the very edges we are keeping. */
.banner-blur{
  position:absolute;inset:-5%;width:110%;height:110%;
  object-fit:cover;display:block;
  filter:blur(30px) saturate(1.15) brightness(.55);
  transform:translateZ(0);
}
.banner-photo{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;object-position:center top;
  /* The foot of the frame is reserved for the words, so the picture is
     fitted into what is left and the two never sit on top of each other.
     Padding shrinks the content box, and object-fit respects it. */
  box-sizing:border-box;
  padding-bottom:var(--words, 210px);
}

/* Legibility: a wash dark enough for white type, light enough to see faces */
.banner::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,18,38,.92) 0%, rgba(6,18,38,.80) 22%, rgba(6,18,38,.42) 40%,
    rgba(6,18,38,.10) 60%, rgba(6,18,38,.06) 100%);
}

.banner-inner{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;color:#fff;
  padding:clamp(1.5rem,4vw,3rem) clamp(3.2rem,7vw,5.5rem) clamp(3.4rem,5vw,4.4rem);
}
.banner-eyebrow{
  font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#FFD7DD;margin-bottom:1rem;
  /* these photographs are bright; the motto needs to hold its own */
  text-shadow:0 2px 14px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.5);
}
.banner-title{
  color:#fff;margin:0 0 .5rem;
  font-size:clamp(1.75rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.025em;
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.banner-text{
  margin:0 0 1.8rem;max-width:52ch;
  font-size:clamp(1rem,1.7vw,1.22rem);color:rgba(255,255,255,.93);
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.banner-words{display:flex;flex-direction:column;align-items:center}
.banner-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
/* A glass button that reads on a photograph */
.btn-clear{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-clear:hover{background:rgba(255,255,255,.26);border-color:#fff;transform:translateY(-2px)}

.banner-inner.is-swapping .banner-title,
.banner-inner.is-swapping .banner-text{opacity:0;transform:translateY(10px)}
.banner-title,.banner-text{transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* only where the eyebrow is the stage of the story does it change per slide */
.banner-staged .banner-eyebrow{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.banner-staged .banner-inner.is-swapping .banner-eyebrow{opacity:0;transform:translateY(10px)}

.banner-nav{
  position:absolute;z-index:4;top:50%;margin-top:-26px;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s,transform .25s,border-color .25s;
}
.banner-nav:hover{background:var(--red-600);border-color:var(--red-600);transform:scale(1.07)}
.banner-nav svg{width:22px;height:22px}
.banner-nav.prev{left:clamp(.7rem,2vw,1.6rem)}
.banner-nav.next{right:clamp(.7rem,2vw,1.6rem)}

.banner-dots{
  position:absolute;z-index:4;left:0;right:0;bottom:clamp(1rem,2.4vw,1.8rem);
  display:flex;justify-content:center;gap:.55rem;
}
.banner-dot{
  width:34px;height:4px;padding:0;border:0;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .3s,width .3s;
}
.banner-dot:hover{background:rgba(255,255,255,.7)}
.banner-dot.is-current{background:var(--red-600);width:48px}

/* On a wide screen the words move to one side and the photograph takes the
   full height of the frame beside them. A portrait then stands nearly 750px
   tall - every face large and whole - instead of being squeezed into the
   band above a centred caption. */
@media (min-width:1100px){
  .banner-photo{
    padding-bottom:0;
    padding-left:48%;
    /* flush to the right edge, so the blurred mat reads as the ground the
       words sit on rather than as a gap around the picture */
    object-position:right center;
  }
  .banner-inner{
    width:48%;
    align-items:flex-start;text-align:left;justify-content:center;
    padding:clamp(1.5rem,4vw,3rem) clamp(1.4rem,2.6vw,2.4rem)
            clamp(1.5rem,4vw,3rem) clamp(3.4rem,5vw,5rem);
  }
  /* full column width, or the two buttons wrap onto separate lines */
  .banner-words{align-items:flex-start;width:100%}
  .banner-actions{justify-content:flex-start}
  .banner-title{font-size:clamp(1.9rem,3.1vw,2.8rem)}
  .banner-inline .banner-title{font-size:clamp(1.6rem,2.4vw,2.2rem)}
  /* --textmax is measured per slide (see widen() in main.js). max-content
     means the line is only as long as the sentence needs: it fills the room
     beside the picture instead of breaking early, and wraps only when the
     sentence genuinely outruns the space. The ch cap is the long stop. */
  .banner-text{width:max-content;max-width:min(var(--textmax, 34ch), 92ch)}
  /* the wash follows the words: heavy on the left, clear over the picture */
  .banner::after{
    background:
      linear-gradient(to right,
        rgba(6,18,38,.92) 0%, rgba(6,18,38,.80) 34%, rgba(6,18,38,.34) 52%,
        rgba(6,18,38,.08) 70%, rgba(6,18,38,.04) 100%),
      linear-gradient(to top, rgba(6,18,38,.55) 0%, rgba(6,18,38,0) 26%);
  }
  .banner-nav.prev{left:auto;right:calc(clamp(.7rem,2vw,1.6rem) + 64px)}
  .banner-nav{top:auto;bottom:clamp(1.6rem,3vw,2.4rem);margin-top:0}
  .banner-dots{left:clamp(3.4rem,5vw,5rem);right:auto;justify-content:flex-start}
}

@media (max-width:760px){
  /* a phone has the height to spare, and the picture needs it: the caption
     stack alone takes well over half the frame */
  .home-banner{height:clamp(440px, calc(100vh - 120px), 720px)}
  .banner-inline{height:clamp(420px, calc(100vh - 190px), 660px);border-radius:var(--r-md)}
  .banner-nav{width:42px;height:42px;margin-top:-21px}
  .banner-nav svg{width:18px;height:18px}
  .banner-inner{padding-inline:clamp(2.8rem,10vw,3.4rem)}
  .banner-dot{width:26px}
  .banner-dot.is-current{width:36px}
}
/* On a small handset the side arrows sit right where the words are, and the
   padding kept clear for them is wider than the room the caption needs. The
   block cannot shrink past its widest button, so it overflowed the column and
   ran under the arrows. Swipe and the dots navigate just as well here, so the
   arrows go and the full width goes to the words. */
@media (max-width:480px){
  .banner-nav{display:none}
  .banner-inner{
    padding-inline:clamp(1.25rem,5vw,1.75rem);
    /* the caption stack is tall here; every pixel it gives back is one the
       photograph keeps */
    padding-bottom:clamp(2.6rem,7vw,3.4rem);
  }
  .banner-words{max-width:100%}
}
/* Ten dots squeeze edge to edge on the smallest handsets - give them room */
@media (max-width:400px){
  .banner-dots{gap:.4rem}
  .banner-dot{width:18px}
  .banner-dot.is-current{width:26px}
}
@media (prefers-reduced-motion:reduce){
  .banner-frame{transition:none}
}

/* ---------- 9c. A word from the Rector -----------------------------------
   A short letter beside the Welcome Home copy: his photograph, his words and
   his signature. It sits in the same column as the collage, under it.      */
.rector{
  margin-bottom:clamp(1.2rem,2.6vw,1.9rem);
  /* flow-root so the floated portrait is contained by the card */
  display:flow-root;
  padding:clamp(1.2rem,2.4vw,1.7rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.92);
  border:1px solid var(--glass-line);
  /* it leads the column now, so it carries the weight of a real card */
  box-shadow:var(--sh-lg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
/* Floated rather than in a column of its own: the opening lines sit beside
   his photograph and the rest of the letter runs the full width of the card,
   instead of every line being squeezed into a narrow ribbon. */
.rector-photo{
  float:left;
  margin:.25rem clamp(1rem,2vw,1.45rem) .55rem 0;
  /* a share of the CARD, not of the viewport: below 900px the card goes
     full width, so a vw-based size would shrink it just as it gained room */
  width:clamp(160px,38%,230px);aspect-ratio:4/5;
  border-radius:var(--r-md);overflow:hidden;
  border:4px solid #fff;box-shadow:var(--sh-md);background:var(--blue-100);
}
.rector-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
/* min-width:0 or a long word would push the card wider than its column */
.rector-body{min-width:0}
.rector-eyebrow{
  display:block;margin-bottom:.55rem;
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-600);
}
.rector-msg p{margin:0 0 .6rem;font-size:.98rem;line-height:1.66;color:var(--ink-soft)}
.rector-msg p:first-child{font-size:1.06rem;color:var(--ink);font-weight:600}
.rector-msg p:last-child{margin-bottom:0}
.rector-sign{
  clear:left;
  margin:.95rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;
}
.rector-sign b{font-family:var(--display);font-size:1.3rem;color:var(--blue-900);font-weight:600}
.rector-sign span{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-700)}
/* On a narrow screen the photograph goes above the words rather than beside */
@media (max-width:560px){
  .rector-photo{float:none;margin:0 0 1rem;width:clamp(150px,46vw,210px)}
}

/* ---------- 9b. The welcome collage -------------------------------------
   A scrapbook of parish life. These are wide group photographs where people
   reach both edges of the frame, so nothing is cropped to fit a tile: each
   picture keeps its own proportions and the columns fill around them. That
   is what stops somebody being sliced off at a tile boundary.             */
.collage{
  margin-top:clamp(1.8rem,3.6vw,2.8rem);
  column-count:5;
  column-gap:clamp(.5rem,1vw,.8rem);
}
.collage-tile{
  margin:0 0 clamp(.5rem,1vw,.8rem);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  overflow:hidden;border-radius:var(--r-md);
  border:3px solid rgba(255,255,255,.9);box-shadow:var(--sh-md);
  background:var(--blue-100);
  transition:transform var(--t),box-shadow var(--t);
}
.collage-tile img{
  width:100%;height:auto;display:block;
  transition:transform .9s var(--ease);
}
.collage-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.collage-tile:hover img{transform:scale(1.04)}
/* Step the columns down with the width, so no face ever gets too small */
@media (max-width:1100px){ .collage{column-count:4} }
@media (max-width:820px){  .collage{column-count:3} }
@media (max-width:560px){  .collage{column-count:2} }

/* ---------- 8. Mass times strip ---------- */
.times-strip{margin-top:-1px}
.times-card{padding:clamp(1.4rem,2.4vw,2rem);height:100%}
.times-card h4{display:flex;align-items:center;gap:.6rem;color:var(--ink);margin-bottom:1rem;font-size:1rem}
.times-card h4 i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--red-600)}
.times-card.b h4 i{background:var(--blue-700)}
.times-card.p h4 i{background:var(--blue-300)}
.time-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-top:1px dashed var(--line)}
.time-row:first-of-type{border-top:0}
.times-sub{margin-top:1.1rem;padding-bottom:.2rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red-700)}
.times-sub + .time-row{border-top:0}
.time-row .l{font-weight:600;color:var(--ink);font-size:.92rem}
.time-row .n{display:block;font-weight:400;color:var(--ink-mute);font-size:.78rem;line-height:1.4}
.time-row .t{font-family:var(--display);font-size:1.12rem;font-weight:650;color:var(--red-700);white-space:nowrap}
.times-card.b .time-row .t{color:var(--blue-700)}

/* ---------- 9. Feature / content blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
/* Columns of very different heights read better squared off at the top than
   centred against each other - used where a tall stack sits beside copy. */
.split.split-start{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
/* Uneven two-column rows that collapse on small screens */
.split-wide{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:center}
.split-narrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
@media (max-width:900px){
  .split-wide,.split-narrow{grid-template-columns:1fr}
}
.split.reverse .split-media{order:2}
@media (max-width:900px){.split.reverse .split-media{order:0}}
.split-media{position:relative}
.frame{
  border-radius:var(--r-xl);overflow:hidden;
  border:6px solid rgba(255,255,255,.9);box-shadow:var(--sh-lg);
  aspect-ratio:5/4;background:var(--blue-100);
}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.frame:hover img{transform:scale(1.05)}
.frame-tall{aspect-ratio:4/5}
.media-stack{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.media-stack .frame{aspect-ratio:1}
.media-stack .frame:first-child{grid-row:span 2;aspect-ratio:auto}

/* Feature list */
.feat-list{list-style:none;padding:0;margin:1.6rem 0 0}
.feat-list li{display:flex;gap:.9rem;margin-bottom:1.1rem;align-items:flex-start}
.feat-list .tick{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:2px;
  background:var(--red-100);color:var(--red-600);
}
.feat-list .tick svg{width:13px;height:13px}
.feat-list b{display:block;color:var(--ink);font-weight:650;font-size:.98rem}
.feat-list span{font-size:.9rem;color:var(--ink-mute)}

/* ---------- 10. Ministry cards ---------- */
.ministry{position:relative;padding-top:1.7rem}
.ministry::before{
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--red-600),var(--blue-300));
  opacity:0;transition:opacity var(--t);
}
.ministry:hover::before{opacity:1}
.ministry h3{font-size:1.22rem;margin-bottom:.4rem}
.ministry p{font-size:.92rem;margin-bottom:1rem;color:var(--ink-mute)}
.ministry .meet{display:flex;align-items:center;gap:.5rem;font-size:.79rem;color:var(--blue-800);font-weight:600;padding-top:.9rem;border-top:1px solid var(--line)}
.ministry .meet svg{width:14px;height:14px;color:var(--blue-500)}

/* ---------- 11. Project / fundraising ---------- */
.project-band{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-800) 40%,var(--red-900) 130%);
  border-radius:var(--r-xl);
  padding:clamp(2.2rem,5vw,4rem);
  box-shadow:var(--sh-lg);
}
.project-band::before{
  content:"";position:absolute;width:640px;height:640px;right:-180px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.55),transparent 66%);
}
.project-band::after{
  content:"";position:absolute;width:520px;height:520px;left:-200px;bottom:-240px;border-radius:50%;
  background:radial-gradient(circle,rgba(143,188,235,.36),transparent 68%);
}
.project-band>*{position:relative;z-index:1}
.project-band h2,.project-band h3{color:#fff}
.project-band .eyebrow{color:#FFC9D1}
.project-band .eyebrow::before{background:linear-gradient(90deg,#FFC9D1,var(--blue-300))}
.project-band p{color:rgba(255,255,255,.82)}
.project-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.project-grid>*{min-width:0}
@media (max-width:900px){.project-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .project-band{padding:1.5rem 1.15rem;border-radius:var(--r-lg)}
  .project-band h2,.project-band p{overflow-wrap:anywhere}
  .project-band .meter-top{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:1rem}
  .project-band .meter-goal{text-align:left}
  .project-band .meter-note{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem}
  .project-band .btn-row{display:grid;grid-template-columns:minmax(0,1fr)}
  .project-band .btn{width:100%;max-width:100%;padding-inline:1rem;white-space:normal;text-align:center;line-height:1.35}
  .project-band .video-shell{width:100%;max-width:100%}
}

/* Progress meter */
.meter{margin:1.8rem 0}
.meter-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.7rem}
.meter-raised{font-family:var(--display);font-size:clamp(1.55rem,2.9vw,2.15rem);font-weight:700;color:#fff;line-height:1}
.meter-raised small{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:600;margin-bottom:.35rem}
.meter-goal{text-align:right;font-size:.88rem;color:rgba(255,255,255,.75)}
.meter-goal b{display:block;font-family:var(--display);font-size:1.35rem;color:#fff}
.meter-bar{height:12px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.meter-fill{
  height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--red-400),var(--red-600) 40%,#fff 160%);
  box-shadow:0 0 18px rgba(228,86,107,.65);
  transition:width 1.6s var(--ease);
}
.meter-note{display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.7);margin-top:.6rem}

/* Light meter variant for the project page */
.meter-light .meter-raised{color:var(--red-700)}
.meter-light .meter-raised small{color:var(--ink-mute)}
.meter-light .meter-goal{color:var(--ink-mute)}
.meter-light .meter-goal b{color:var(--ink)}
.meter-light .meter-bar{background:var(--blue-100);box-shadow:inset 0 1px 3px rgba(27,79,160,.14)}
.meter-light .meter-note{color:var(--ink-mute)}

/* Video */
.video-shell{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(140deg,var(--blue-900),var(--red-900));
  border:1px solid rgba(255,255,255,.3);box-shadow:var(--sh-lg);
}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-ph{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;text-align:center;padding:1.6rem;
  background:
    radial-gradient(circle at 50% 42%,rgba(200,16,46,.42),transparent 58%),
    linear-gradient(140deg,#0B2E5C,#7B0A1C);
  color:#fff;
}
.video-ph .play{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:pulseRing 2.6s ease-out infinite;
}
.video-ph .play::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;
}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}70%{box-shadow:0 0 0 26px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* The video starts muted because that is the only way a browser will let it
   start at all, so it has to offer the sound back plainly. */
.video-sound{
  /* clear of YouTube's own control bar, which occupies the bottom ~40px */
  position:absolute;z-index:2;left:50%;bottom:clamp(3.2rem,7vw,3.8rem);
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(12,26,48,.72);border:1px solid rgba(255,255,255,.4);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:.82rem;font-weight:600;letter-spacing:.01em;
  box-shadow:var(--sh-md);
  transition:background .25s,transform .25s,border-color .25s;
}
.video-sound:hover{background:var(--red-600);border-color:var(--red-600);transform:translateX(-50%) translateY(-2px)}
.video-sound svg{width:17px;height:17px;flex:none}
@media (max-width:520px){
  .video-sound{font-size:.76rem;padding:.5rem .9rem}
}
.video-ph b{font-family:var(--display);font-size:1.35rem;font-weight:600}
.video-ph span{font-size:.85rem;color:rgba(255,255,255,.72);max-width:34ch}

/* ---------- 11b. Project page furniture ----------------------------------
   These belong to the Building Project page, not to the slideshow that used
   to sit above them. */

/* A tighter page head, so the picture leads instead of the words */
.page-hero.page-hero-tight{padding:clamp(.9rem,2vw,1.4rem) 0 clamp(.6rem,1.3vw,.9rem)}
.page-hero.page-hero-tight h1{font-size:clamp(1.65rem,3.3vw,2.35rem);margin-bottom:.22em}
.page-hero.page-hero-tight .crumbs{margin-bottom:.55rem}
.page-hero.page-hero-tight .eyebrow{margin-bottom:.45rem}
.page-hero.page-hero-tight .lede{font-size:clamp(.98rem,1.35vw,1.1rem)}
/* On the narrowest phones the standfirst runs to three lines and squeezes the
   picture off the screen. The title and the label above it already say this,
   so it steps aside and the slides get the room. */
@media (max-width:340px){
  .page-hero.page-hero-tight .lede{display:none}
}
.section-flush{padding:0 0 clamp(2rem,4vw,3rem)}

/* The call to action that the slideshow leads into */
.story-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  margin-top:1.2rem;
  padding:clamp(1.2rem,2.6vw,1.8rem) calc(6px + clamp(1.2rem,3.2vw,2.6rem));
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--blue-900),var(--blue-800) 55%,var(--red-900));
  box-shadow:var(--sh-md);
}
.story-cta p{margin:0;color:rgba(255,255,255,.88);font-size:.98rem;max-width:60ch}
.story-cta b{color:#fff;font-family:var(--display);font-size:1.25rem;display:block;margin-bottom:.2rem}

/* Phases timeline */
.phases{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.phase{display:flex;gap:1.1rem;padding:1.2rem 1.4rem;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--sh-sm)}
.phase-dot{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff;background:var(--ink-mute)}
.phase[data-status="complete"] .phase-dot{background:linear-gradient(140deg,#1F9D55,#157347)}
.phase[data-status="active"] .phase-dot{background:linear-gradient(140deg,var(--red-600),var(--red-700));box-shadow:0 0 0 5px var(--red-100)}
.phase[data-status="upcoming"] .phase-dot{background:var(--blue-300)}
.phase-dot svg{width:15px;height:15px}
.phase b{display:block;color:var(--ink);font-size:1rem;font-weight:650}
.phase span{font-size:.88rem;color:var(--ink-mute)}

/* Giving options */
.give{text-align:center;padding:2rem 1.5rem}
.give .amt{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--blue-800);line-height:1;margin-bottom:.3rem}
.give .lbl{font-size:.86rem;color:var(--ink-mute);margin-bottom:1.2rem}
.give.featured{background:linear-gradient(160deg,rgba(200,16,46,.08),rgba(255,255,255,.75));border-color:rgba(200,16,46,.22)}
.give.featured .amt{color:var(--red-700)}

/* ---------- 12. Events ---------- */
.event{display:grid;grid-template-columns:96px 1fr;gap:1.3rem;align-items:start;padding:1.4rem 1.5rem}
.event-date{
  border-radius:var(--r-md);padding:.75rem .4rem;text-align:center;
  background:linear-gradient(150deg,var(--blue-700),var(--blue-900));color:#fff;
  box-shadow:0 10px 22px -12px rgba(27,79,160,.75);
}
.event-date b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1;font-weight:700}
.event-date span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;margin-top:.2rem;opacity:.9}
.event.feast .event-date{background:linear-gradient(150deg,var(--red-600),var(--red-900));box-shadow:0 10px 22px -12px rgba(200,16,46,.75)}
.event h4{margin-bottom:.25rem;font-size:1.06rem}
.event p{font-size:.9rem;color:var(--ink-mute);margin-bottom:.6rem}
.event .meta{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.79rem;color:var(--ink-mute)}
.event .meta span{display:inline-flex;align-items:center;gap:.35rem}
.event .meta svg{width:13px;height:13px;color:var(--blue-500)}
@media (max-width:520px){.event{grid-template-columns:74px 1fr;gap:1rem;padding:1.15rem}}

/* ---------- 13. Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem}
.gallery-item{
  position:relative;overflow:hidden;border-radius:var(--r-md);aspect-ratio:1;margin:0;
  border:4px solid rgba(255,255,255,.9);box-shadow:var(--sh-md);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t);
}
.gallery-item:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--sh-lg)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(11,46,92,.82));
  color:#fff;font-size:.8rem;font-weight:600;
  opacity:0;transform:translateY(8px);transition:opacity var(--t),transform var(--t);
}
.gallery-item:hover figcaption{opacity:1;transform:none}
.gallery-item.wide{grid-column:span 2;aspect-ratio:2/1}
@media (max-width:600px){.gallery-item.wide{grid-column:span 1;aspect-ratio:1}}
.gallery-item a{display:block;width:100%;height:100%;color:inherit}

/* Play badge on a video tile */
.tile-play{
  position:absolute;inset:0;margin:auto;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(200,16,46,.88);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6),0 0 0 5px rgba(255,255,255,.32);
  transition:transform var(--t),background var(--t);
}
.tile-play::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.gallery-item:hover .tile-play{transform:scale(1.09);background:var(--red-600)}

/* Small mark on a tile that came from the Facebook page */
.tile-src{
  position:absolute;top:.55rem;right:.55rem;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--blue-800);
  box-shadow:0 2px 8px rgba(17,26,43,.22);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--t),transform var(--t);
}
.tile-src svg{width:14px;height:14px}
.gallery-item:hover .tile-src{opacity:1;transform:none}

.gallery-note{
  margin:1.4rem 0 0;text-align:center;
  font-size:.84rem;color:var(--ink-mute);
}
.gallery-note a{font-weight:600}

/* Nothing to show yet - say so plainly rather than repeating a placeholder */
.gallery.is-empty{display:block}
.gallery-empty{
  text-align:center;padding:clamp(2.4rem,6vw,4rem) 1.5rem;
  border-radius:var(--r-lg);
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px dashed rgba(143,188,235,.6);
}
.gallery-empty .chip{margin:0 auto 1.1rem}
.gallery-empty b{
  display:block;font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);
  font-weight:650;color:var(--ink);margin-bottom:.5rem;
}
.gallery-empty p{
  font-size:.93rem;color:var(--ink-mute);max-width:46ch;margin:0 auto 1.4rem;
}
.gallery-empty-photo{
  display:block;width:100%;max-width:720px;height:auto;
  margin:0 auto 1.3rem;border-radius:var(--r-md);
  box-shadow:var(--sh-md);
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:2rem;
  background:rgba(11,26,43,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.lightbox.open{display:grid;animation:fadeIn .3s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:min(1100px,92vw);max-height:84vh;border-radius:var(--r-lg);box-shadow:var(--sh-lg);border:4px solid rgba(255,255,255,.2)}
.lightbox-close{position:absolute;top:1.4rem;right:1.6rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.lightbox-cap{margin-top:1rem;color:rgba(255,255,255,.85);text-align:center;font-size:.9rem}

/* ---------- 14. Sacraments accordion ---------- */
.acc{border-radius:var(--r-lg);overflow:hidden}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:last-child{border-bottom:0}
.acc-btn{
  width:100%;display:flex;align-items:center;gap:1rem;text-align:left;
  padding:1.25rem clamp(1.1rem,2.4vw,1.8rem);background:transparent;border:0;cursor:pointer;
  font-family:var(--display);font-size:1.18rem;font-weight:650;color:var(--ink);
  transition:background .25s,color .25s;
}
.acc-btn:hover{background:rgba(232,241,251,.6);color:var(--blue-800)}
.acc-btn .num{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-family:var(--body);font-size:.8rem;font-weight:700;
  background:var(--red-100);color:var(--red-700);
}
.acc-btn .caret{margin-left:auto;width:18px;height:18px;color:var(--ink-mute);transition:transform .3s var(--ease)}
.acc-item.open .acc-btn{color:var(--red-700)}
.acc-item.open .acc-btn .caret{transform:rotate(180deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc-panel-inner{padding:0 clamp(1.1rem,2.4vw,1.8rem) 1.6rem calc(clamp(1.1rem,2.4vw,1.8rem) + 34px + 1rem)}
.acc-panel-inner p{font-size:.94rem;margin-bottom:.7rem}
.acc-panel-inner p:last-child{margin-bottom:0}

/* ---------- 15. Forms ---------- */
.form-shell{padding:clamp(1.6rem,3.2vw,2.8rem)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.84rem;font-weight:650;color:var(--ink);margin-bottom:.42rem}
.field label .req{color:var(--red-600);margin-left:.15rem}
.field .hint{font-size:.77rem;color:var(--ink-mute);font-weight:400;margin-top:.3rem;display:block}
.input,select.input,textarea.input{
  width:100%;padding:.82rem 1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.82);border:1.5px solid var(--line);
  color:var(--ink);font-size:.95rem;transition:border-color .2s,box-shadow .2s,background .2s;
  appearance:none;
}
.input::placeholder{color:#A6B1C2}
.input:focus{outline:0;border-color:var(--blue-500);background:#fff;box-shadow:0 0 0 4px rgba(60,125,217,.14)}
.input:disabled{background:#F1F4F9;color:var(--ink-mute)}
textarea.input{min-height:120px;resize:vertical;line-height:1.6}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368758A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:15px;padding-right:2.6rem;
}
.field.invalid .input{border-color:var(--red-600);box-shadow:0 0 0 4px rgba(200,16,46,.1)}
.err{display:none;font-size:.78rem;color:var(--red-700);margin-top:.32rem;font-weight:600}
.field.invalid .err{display:block}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
@media (max-width:640px){.row-2,.row-3{grid-template-columns:1fr;gap:0}}

/* Checkbox / radio grids */
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.check{
  display:flex;align-items:center;gap:.7rem;padding:.75rem .95rem;cursor:pointer;
  border-radius:var(--r-md);border:1.5px solid var(--line);background:rgba(255,255,255,.7);
  font-size:.88rem;font-weight:550;color:var(--ink-soft);
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s;
}
.check:hover{border-color:var(--blue-300);background:#fff}
.check input{width:19px;height:19px;flex:none;margin:0;accent-color:var(--red-600);cursor:pointer}
.check:has(input:checked){border-color:var(--red-600);background:var(--red-100);color:var(--red-900);box-shadow:0 0 0 3px rgba(200,16,46,.08)}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.87rem;color:var(--ink-soft);line-height:1.6}
.consent input{margin-top:.25rem;width:19px;height:19px;flex:none;accent-color:var(--red-600)}

/* Stepper */
.steps{display:flex;align-items:center;gap:.4rem;margin-bottom:2rem;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;color:var(--ink-mute)}
.step .n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--white);border:1.5px solid var(--line);color:var(--ink-mute);
  font-size:.8rem;transition:all .3s var(--ease);
}
.step.active{color:var(--red-700)}
.step.active .n{background:linear-gradient(140deg,var(--red-600),var(--red-700));border-color:transparent;color:#fff;box-shadow:0 0 0 4px var(--red-100)}
.step.done .n{background:var(--blue-700);border-color:transparent;color:#fff}
.step.done{color:var(--blue-800)}
.step-line{flex:1;min-width:14px;height:2px;background:var(--line);border-radius:2px}
.step-line.done{background:var(--blue-300)}
@media (max-width:760px){.step span.lbl{display:none}}

.fieldset{display:none;border:0;padding:0;margin:0}
.fieldset.active{display:block;animation:stepIn .4s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.fieldset legend{
  font-family:var(--display);font-size:1.5rem;font-weight:650;color:var(--ink);
  padding:0;margin-bottom:.25rem;
}
.fs-note{font-size:.9rem;color:var(--ink-mute);margin-bottom:1.7rem}
.form-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line)}

/* Form result */
.result{display:none;text-align:center;padding:clamp(2rem,5vw,3.5rem)}
.result.show{display:block;animation:stepIn .5s var(--ease)}
.result .seal{
  width:88px;height:88px;border-radius:50%;margin:0 auto 1.5rem;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--red-600),var(--red-700));color:#fff;
  box-shadow:0 20px 40px -16px rgba(200,16,46,.7);
}
.result .seal svg{width:40px;height:40px}
.result .ref{
  display:inline-block;margin:1rem 0 1.5rem;padding:.7rem 1.4rem;border-radius:var(--r-pill);
  background:var(--blue-100);border:1px dashed var(--blue-300);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1rem;font-weight:700;color:var(--blue-900);letter-spacing:.06em;
}
.notice{
  display:flex;gap:.8rem;padding:.95rem 1.1rem;border-radius:var(--r-md);font-size:.86rem;
  background:var(--blue-100);border:1px solid rgba(27,79,160,.16);color:var(--blue-900);margin-bottom:1.4rem;
}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue-700)}
.notice.warn{background:#FFF8E6;border-color:rgba(201,162,39,.3);color:#7A5F0B}
.notice.warn svg{color:var(--gold)}
.notice.red{background:var(--red-100);border-color:rgba(200,16,46,.18);color:var(--red-900)}
.notice.red svg{color:var(--red-600)}

/* ---------- 16. Page hero (inner pages) ---------- */
.page-hero{position:relative;padding:clamp(1.6rem,3.4vw,2.6rem) 0 clamp(1.4rem,2.8vw,2rem);overflow:hidden;text-align:center}
.page-hero::before{
  content:"";position:absolute;inset:-40% 50% auto;transform:translateX(50%);
  width:min(1100px,150%);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(200,16,46,.10),rgba(27,79,160,.08) 45%,transparent 68%);
}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.3rem);margin-bottom:.25em}
.page-hero .crumbs{margin-bottom:.9rem}
.crumbs{display:flex;justify-content:center;gap:.5rem;font-size:.8rem;color:var(--ink-mute);margin-bottom:1.2rem}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--red-600)}
.crumbs span{opacity:.5}

/* ---------- 17. Quote ---------- */
.quote{position:relative;text-align:center;padding:clamp(2.2rem,5vw,3.6rem);max-width:900px;margin-inline:auto}
.quote blockquote{
  margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(1.35rem,2.8vw,2.05rem);line-height:1.42;color:var(--ink);font-weight:500;
}
.quote cite{
  display:block;margin-top:1.2rem;font-style:normal;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red-600);font-weight:700;
}
.quote-mark{font-family:var(--display);font-size:4.2rem;line-height:.6;color:var(--blue-300);opacity:.5;display:block;margin-bottom:.2rem}

/* ---------- 18. CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);text-align:center;
  padding:clamp(2.6rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
  background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(232,241,251,.72));
  border:1px solid #fff;box-shadow:var(--sh-lg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.cta-band::before{
  content:"";position:absolute;width:520px;height:520px;left:-180px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.16),transparent 66%);
}
.cta-band::after{
  content:"";position:absolute;width:520px;height:520px;right:-190px;bottom:-250px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,79,160,.18),transparent 66%);
}
.cta-band>*{position:relative;z-index:1}

/* ---------- 19. Footer ---------- */
.site-footer{
  position:relative;margin-top:clamp(3rem,6vw,5rem);color:rgba(255,255,255,.72);
  background:linear-gradient(160deg,var(--blue-900) 0%,#081F3F 55%,#2A0810 140%);
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;width:700px;height:700px;right:-240px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.26),transparent 66%);
}
.footer-top{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(1.6rem,3vw,3rem);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem}
@media (max-width:940px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.site-footer h5{
  font-family:var(--body);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;font-weight:700;margin:0 0 1.1rem;
}
.site-footer a{color:rgba(255,255,255,.72);transition:color .2s}
.site-footer a:hover{color:#fff}
.f-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.f-brand b{font-family:var(--display);font-size:1.25rem;color:#fff;line-height:1.1;display:block}
.f-brand span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#FFC9D1}
.f-list{list-style:none;padding:0;margin:0;font-size:.89rem}
.f-list li{margin-bottom:.6rem}
.f-contact li{display:flex;gap:.7rem;align-items:flex-start}
.f-contact svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--blue-300)}
.f-social{display:flex;gap:.6rem;margin-top:1.2rem}
.f-social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  transition:background .25s,transform .25s,border-color .25s;
}
.f-social a:hover{background:var(--red-600);border-color:var(--red-600);transform:translateY(-3px)}
.f-social svg{width:16px;height:16px}
.footer-bottom{
  position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);
  padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:rgba(255,255,255,.55);
}
.footer-verse{
  position:relative;z-index:1;text-align:center;padding:1.8rem 0;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--display);font-style:italic;font-size:1.15rem;color:rgba(255,255,255,.82);
}

/* ---------- 20. Utilities & motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:6px}

/* Back to top */
.to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.86);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-md);color:var(--blue-800);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .35s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-600);color:#fff;border-color:var(--red-600)}
.to-top svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  /* The rays end their cycle invisible, so hold them at a still, radiant
     pose instead of letting them vanish for visitors who ask for calm. */
  .mercy-ray{opacity:.5!important;transform:rotate(var(--a)) scaleY(1)!important}
  .mercy-pulse,.mercy-motes{display:none!important}
}

@media print{
  .site-header,.site-footer,.to-top,.btn,.hero-aura,.mercy-motes{display:none!important}
  .mercy-ray{opacity:.45!important;transform:rotate(var(--a)) scaleY(1)!important}
  .mercy-pulse{display:none!important}
  body{background:#fff}
  body::before,body::after{display:none}
}

/* ---------- 14. Announcements & bulletins --------------------------------
   A notice board: date and tag down the left, the notice itself on the
   right. Bulletins are downloads, so they read as files, not as articles. */
.notes{display:flex;flex-direction:column;gap:clamp(.8rem,1.6vw,1.1rem)}
.note{
  display:grid;grid-template-columns:clamp(120px,15%,170px) 1fr;
  gap:clamp(1rem,2.4vw,2rem);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  border-radius:var(--r-lg);
  background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:var(--sh-sm);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  transition:box-shadow var(--t),transform var(--t);
}
.note:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.note-side{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.note-side time{
  font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--blue-900);
  line-height:1.2;
}
.note-tag,.note-pin{
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:var(--r-pill);
}
.note-tag{background:var(--blue-100);color:var(--blue-700)}
.note-pin{background:var(--red-100);color:var(--red-700)}
.note-body h3{margin:0 0 .45rem;font-size:clamp(1.15rem,2vw,1.42rem);color:var(--ink)}
.note-body p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.66}
.note-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;
  font-size:.86rem;font-weight:700;color:var(--red-600);
}
.note-link svg{width:16px;height:16px;transition:transform var(--t)}
.note-link:hover svg{transform:translateX(3px)}
@media (max-width:640px){
  .note{grid-template-columns:1fr;gap:.7rem}
  .note-side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.5rem}
}

/* The newest bulletin, given a card of its own */
.bulletin-lead{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2.4vw,1.8rem);
  padding:clamp(1.2rem,2.6vw,1.9rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.92);border:1px solid var(--glass-line);
  box-shadow:var(--sh-lg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.bulletin-badge{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.9rem .8rem;border-radius:var(--r-md);
  background:var(--red-100);color:var(--red-700);
  font-size:.66rem;font-weight:800;letter-spacing:.12em;
}
.bulletin-badge svg{width:26px;height:26px}
.bulletin-lead-body h3{margin:.35rem 0 .3rem;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--ink)}
.bulletin-date{margin:0;font-size:.9rem;color:var(--ink-mute);font-weight:600}
.bulletin-note{margin:.5rem 0 0;font-size:.88rem;color:var(--ink-soft)}
.bulletin-lead-act{display:flex;flex-direction:column;gap:.55rem}
.bulletin-lead-act .btn{white-space:nowrap}
.bulletin-lead-act .btn svg{width:17px;height:17px;margin-right:.4rem}
@media (max-width:820px){
  .bulletin-lead{grid-template-columns:auto 1fr;}
  .bulletin-lead-act{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
}

/* Earlier bulletins: a list of files */
.bulletin-head{
  margin:clamp(1.8rem,3.4vw,2.6rem) 0 .9rem;
  font-size:1.05rem;letter-spacing:.02em;color:var(--ink-mute);
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.74rem;
}
.bulletins{display:flex;flex-direction:column;gap:.55rem}
.bulletin-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:.85rem 1.1rem;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.bulletin-row:hover{background:#fff;border-color:var(--blue-300);transform:translateX(3px)}
.bulletin-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--red-100);color:var(--red-700)}
.bulletin-ico svg{width:19px;height:19px}
.bulletin-row-body{display:flex;flex-direction:column;min-width:0}
.bulletin-row-body b{font-size:.96rem;color:var(--ink);font-weight:650}
.bulletin-row-body span{font-size:.82rem;color:var(--ink-mute)}
.bulletin-get{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--blue-100);color:var(--blue-700)}
.bulletin-get svg{width:17px;height:17px}

/* Nothing published yet */
.empty-note{
  margin:0;padding:clamp(1.4rem,3vw,2.2rem);text-align:center;
  border-radius:var(--r-lg);border:1px dashed var(--line);
  background:var(--glass);color:var(--ink-mute);font-size:.95rem;
}
.empty-note-quiet{border:0;background:none;padding:1rem 0;text-align:left;font-size:.88rem}

/* ---------- 21. Day Born Groups -------------------------------------------
   Seven cards, one per day. They read as a set rather than seven separate
   things, so the numeral carries the eye across them.                      */
.days{
  display:grid;
  /* four across, so a group photograph is big enough to pick faces out of */
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.4vw,1.1rem);
}
@media (max-width:1000px){ .days{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){  .days{grid-template-columns:repeat(2,1fr)} }
.day{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:var(--sh-sm);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.day-photo{aspect-ratio:4/3;background:var(--blue-100);overflow:hidden}
.day-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.day:hover .day-photo img{transform:scale(1.05)}
.day-body{position:relative;padding:clamp(.85rem,1.8vw,1.15rem) clamp(.85rem,1.6vw,1.1rem)}
.day:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-300)}
/* the day's number, set large and pale behind the name */
.day-n{
  position:absolute;top:-.05em;right:.15em;
  font-size:clamp(2.4rem,3.4vw,3.2rem);font-weight:700;line-height:1;
  color:var(--blue-100);letter-spacing:-.04em;pointer-events:none;opacity:.85;
}
.day h3{
  position:relative;margin:0 0 .3rem;
  font-size:clamp(1.1rem,1.7vw,1.3rem);color:var(--blue-900);
}
.day-names{
  position:relative;margin:0;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--red-600);
}
.day-meta{
  position:relative;margin:.45rem 0 0;
  font-size:.8rem;color:var(--ink-mute);
}