@charset "UTF-8";
/* ==========================================================================
   Our Lady of Health Church, Muthamizh Nagar
   Theme: "Blue Hour & Gold"

   Contents
   --------
   01  Design tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Buttons & links
   06  Site header / navigation
   07  Hero (home) & page banner
   08  Cards, panels & grids
   09  Mass timings tables
   10  Timeline
   11  Accordion
   12  Gallery & lightbox
   13  Prayer sheets  (incl. Tamil)
   13b Document viewer  (the printed feast invitation)
   14  Callouts, notices & CTA bands
   15  Footer
   16  Utilities
   17  Motion, focus & print
   ========================================================================== */

@import url("../fonts/fonts.css");

/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root{
  /* Brand — pulled from the parish's own blue-hour photograph and gilded statue */
  --navy-900:#0b1730;
  --navy-800:#0f1e3d;
  --navy-700:#14264a;
  --navy-600:#1b3a6b;
  --navy-500:#2b5390;

  --gold-600:#8f7210;
  --gold-500:#c9a227;
  --gold-400:#d9b64a;
  --gold-300:#e6cf8a;
  --gold-100:#f5ead0;

  --maroon:#8c1d2f;

  --ivory:#f7f5ef;
  --ivory-deep:#efebe0;
  --white:#ffffff;

  --ink:#141c2b;
  --ink-soft:#5a6474;
  --ink-faint:#8a92a0;
  --rule:#e4e0d5;
  --rule-soft:#efece3;

  /* Surfaces */
  --bg:var(--white);
  --bg-alt:var(--ivory);
  --surface:var(--white);

  /* Type */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Tamil. Fallbacks are the Tamil-capable faces already present on each
     platform: Nirmala UI / Latha (Windows), Tamil Sangam MN (macOS, iOS),
     Noto Sans Tamil (Android). Never Bamini — see fonts.css for why. */
  --font-tamil:"Noto Serif Tamil","Nirmala UI","Latha","Tamil Sangam MN",
               "Noto Sans Tamil",serif;

  /* Fluid type scale */
  --fs-xs:0.75rem;
  --fs-sm:0.8125rem;
  --fs-base:1rem;
  --fs-md:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-h4:clamp(1.0625rem,.55vw + .95rem,1.25rem);
  --fs-h3:clamp(1.3rem,1vw + 1.05rem,1.65rem);
  --fs-h2:clamp(1.7rem,2vw + 1.2rem,2.6rem);
  --fs-h1:clamp(2.1rem,3.4vw + 1.3rem,3.6rem);
  --fs-hero:clamp(2.3rem,4.6vw + 1.1rem,4.4rem);

  /* Spacing */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:2.5rem; --sp-8:3rem;
  --sp-9:4rem;   --sp-10:5rem;  --sp-11:6.5rem;

  /* Structure */
  --container:1200px;
  --container-narrow:820px;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --header-h:76px;

  --shadow-sm:0 1px 3px rgba(15,30,61,.07),0 1px 2px rgba(15,30,61,.05);
  --shadow:0 8px 26px rgba(15,30,61,.11);
  --shadow-lg:0 20px 50px rgba(11,23,48,.18);

  --ease:cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}

img,picture,svg,video{display:block;max-width:100%;height:auto}
svg{fill:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
ul,ol{margin:0;padding:0}
figure,blockquote{margin:0}
address{font-style:normal}
hr{border:none;border-top:1px solid var(--rule);margin:var(--sp-7) 0}

/* Screen-reader-only, but focusable */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:200;background:var(--gold-500);color:var(--navy-900);
  padding:.7rem 1.4rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.14;
  margin:0 0 var(--sp-4);
  color:var(--navy-800);
  letter-spacing:.005em;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.24}
h4{font-size:var(--fs-h4);line-height:1.34}
h5{font-size:var(--fs-base);font-family:var(--font-body);font-weight:600;
   letter-spacing:.02em}

p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}

a{color:var(--navy-600);text-decoration-color:rgba(27,58,107,.35);
  text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color .16s var(--ease),text-decoration-color .16s var(--ease)}
a:hover{color:var(--gold-600);text-decoration-color:var(--gold-500)}

strong,b{font-weight:600;color:var(--navy-800)}
em{font-style:italic}
small{font-size:var(--fs-sm)}

.eyebrow{
  display:block;margin:0 0 var(--sp-3);
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);
}
.eyebrow--light{color:var(--gold-300)}

.lede{font-size:var(--fs-lg);line-height:1.7;color:var(--ink-soft)}

.rule{width:64px;height:2px;background:var(--gold-500);
  border:none;margin:var(--sp-5) 0}
.rule--center{margin-inline:auto}

/* Decorative gold flourish used above centred section headings */
.flourish{
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  margin:0 0 var(--sp-4);color:var(--gold-500);
}
.flourish::before,.flourish::after{
  content:"";height:1px;width:52px;
  background:linear-gradient(90deg,transparent,var(--gold-500));
}
.flourish::after{background:linear-gradient(270deg,transparent,var(--gold-500))}
.flourish span{font-size:.8rem;line-height:1}

blockquote.scripture{
  font-family:var(--font-display);
  font-size:var(--fs-h3);line-height:1.4;color:var(--navy-700);
  font-style:italic;text-align:center;
  padding:var(--sp-6) var(--sp-5);margin:0;
}
blockquote.scripture cite{
  display:block;margin-top:var(--sp-4);
  font-family:var(--font-body);font-size:var(--fs-sm);font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);
}

.prose>*+*{margin-top:var(--sp-4)}
.prose h2{margin-top:var(--sp-8)}
.prose h3{margin-top:var(--sp-6)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li{margin-bottom:var(--sp-2)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}

/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2rem)}
.container--narrow{max-width:var(--container-narrow)}

.section{padding-block:clamp(var(--sp-8),7vw,var(--sp-11))}
.section--tight{padding-block:clamp(var(--sp-7),5vw,var(--sp-9))}
.section--alt{background:var(--bg-alt)}
.section--navy{background:var(--navy-800);color:#cdd8ea}
.section--navy h2,.section--navy h3{color:var(--white)}
.section--navy a{color:var(--gold-300)}

.section-head{max-width:660px;margin-bottom:var(--sp-7)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{color:var(--ink-soft)}

.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

/* Text beside an image, image on the right by default */
.split{display:grid;gap:clamp(var(--sp-5),4vw,var(--sp-8));align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){
  .split{grid-template-columns:1.15fr 1fr}
  .split--even{grid-template-columns:1fr 1fr}
  /* Two documents side by side read as a pair only if their tops line up. */
  .split--top{align-items:start}
  .split--reverse>*:first-child{order:2}
}

/* ==========================================================================
   05  BUTTONS & LINKS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.55rem;border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  border:1px solid transparent;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--primary{background:var(--gold-500);color:var(--navy-900);
  border-color:var(--gold-500);box-shadow:0 4px 14px rgba(201,162,39,.28)}
.btn--primary:hover{background:var(--gold-400);border-color:var(--gold-400);
  color:var(--navy-900);box-shadow:0 7px 20px rgba(201,162,39,.36)}

.btn--navy{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}
.btn--navy:hover{background:var(--navy-600);border-color:var(--navy-600);color:var(--white)}

.btn--ghost{background:transparent;color:var(--white);
  border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{background:rgba(255,255,255,.11);border-color:var(--white);
  color:var(--white)}

.btn--outline{background:transparent;color:var(--navy-700);border-color:var(--rule)}
.btn--outline:hover{border-color:var(--gold-500);color:var(--gold-600);
  background:rgba(201,162,39,.05)}

.btn--sm{padding:.6rem 1.1rem;font-size:var(--fs-xs)}
.btn--block{width:100%}

.arrow-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-600);text-decoration:none;
  border-bottom:1px solid var(--gold-500);padding-bottom:2px;
}
.arrow-link:hover{color:var(--navy-700);border-color:var(--navy-700)}
.arrow-link::after{content:"\2192";transition:transform .18s var(--ease)}
.arrow-link:hover::after{transform:translateX(3px)}

/* ==========================================================================
   06  SITE HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--navy-800);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.site-header__inner{
  display:flex;align-items:center;gap:var(--sp-5);
  min-height:var(--header-h);
  max-width:var(--container);margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2rem);
}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand__mark{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gold-500);color:var(--navy-900);
  font-size:1.18rem;line-height:1;
}
.brand__text{display:flex;flex-direction:column;line-height:1.12}
.brand__name{
  font-family:var(--font-display);font-size:1.16rem;font-weight:600;
  color:var(--white);letter-spacing:.01em;
}
.brand__place{
  font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;
  color:#9fb0cc;margin-top:3px;
}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:.15rem;list-style:none}
.nav__link{
  display:block;padding:.55rem .72rem;border-radius:var(--radius-sm);
  font-size:.795rem;font-weight:500;letter-spacing:.055em;
  text-transform:uppercase;color:#b9c6dd;text-decoration:none;
  transition:color .16s var(--ease),background .16s var(--ease);
  white-space:nowrap;
}
.nav__link:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav__link[aria-current="page"]{color:var(--gold-300)}
.nav__link[aria-current="page"]:hover{color:var(--gold-300)}

.header__cta{margin-left:.6rem;flex-shrink:0}

/* Hamburger */
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;
  border-radius:var(--radius-sm);color:var(--white);
  align-items:center;justify-content:center;
}
.nav-toggle:hover{background:rgba(255,255,255,.1)}
.nav-toggle__bars{display:block;position:relative;width:22px;height:2px;
  background:currentColor;border-radius:2px;transition:background .16s var(--ease)}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:22px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .22s var(--ease)}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1150px){
  .nav-toggle{display:flex}
  .header__cta{display:none}
  .nav{
    position:fixed;inset:var(--header-h) 0 0;margin:0;
    background:var(--navy-900);
    padding:var(--sp-5) clamp(1.1rem,4vw,2rem) var(--sp-9);
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .3s var(--ease),visibility .3s var(--ease);
  }
  .nav[data-open="true"]{transform:translateX(0);visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li+li{border-top:1px solid rgba(255,255,255,.09)}
  .nav__link{padding:1.05rem .25rem;font-size:.9rem;letter-spacing:.09em;
    border-radius:0}
  .nav__link:hover{background:transparent;color:var(--gold-300)}
  body[data-nav-open="true"]{overflow:hidden}
}

/* ==========================================================================
   07  HERO (HOME) & PAGE BANNER
   ========================================================================== */
.hero{position:relative;isolation:isolate;
  min-height:clamp(520px,74vh,760px);display:grid;align-items:center}
.hero__media,.hero__media img{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,23,48,.94) 0%,rgba(11,23,48,.78) 42%,rgba(11,23,48,.42) 100%),
    linear-gradient(0deg,rgba(11,23,48,.55) 0%,transparent 45%);
}
/* The hero inner div carries BOTH .container and .hero__inner. .container
   sets margin-inline:auto, so a max-width here would centre the whole text
   block in the viewport rather than sitting it at the container's left edge --
   which is what it used to do. Constrain the children instead, and the block
   starts flush left where it belongs. */
.hero__inner{position:relative;z-index:2;
  padding-block:clamp(var(--sp-8),9vw,var(--sp-10))}
/* Deliberately uncapped, so "Our Lady of Health Church" sets on one line at
   the top of the clamp. The container's own 1200px keeps it from stretching. */
.hero h1{color:var(--white);font-size:var(--fs-hero);margin-bottom:0}
.hero__lede{color:#cdd8ea;font-size:var(--fs-lg);line-height:1.7;
  margin-bottom:var(--sp-6);max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* Scroll cue */
.hero__cue{
  position:absolute;bottom:var(--sp-5);left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:rgba(255,255,255,.62);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;
}
.hero__cue span{display:block;width:1px;height:32px;
  background:linear-gradient(180deg,var(--gold-500),transparent);
  animation:cue 2.4s var(--ease) infinite}
.hero__cue:hover{color:var(--white)}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* Interior page banner */
.page-banner{position:relative;isolation:isolate;background:var(--navy-800)}
.page-banner__media{position:absolute;inset:0}
.page-banner__media img{width:100%;height:100%;object-fit:cover;
  object-position:center 40%;opacity:.42}
.page-banner__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,23,48,.9),rgba(11,23,48,.62))}
.page-banner__inner{position:relative;z-index:2;
  padding-block:clamp(var(--sp-7),6vw,var(--sp-9));max-width:720px}
.page-banner h1{color:var(--white);margin-bottom:var(--sp-3)}
.page-banner p{color:#cdd8ea;max-width:560px;margin:0}

.breadcrumbs{margin-bottom:var(--sp-4);font-size:var(--fs-xs);
  letter-spacing:.06em;color:#9fb0cc}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none}
.breadcrumbs li+li::before{content:"/";margin-right:.4rem;color:rgba(255,255,255,.32)}
.breadcrumbs a{color:#9fb0cc;text-decoration:none}
.breadcrumbs a:hover{color:var(--gold-300)}
.breadcrumbs [aria-current="page"]{color:var(--gold-300)}

/* ==========================================================================
   08  CARDS, PANELS & GRIDS
   ========================================================================== */
.card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:var(--sp-5);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),
             transform .18s var(--ease);
}
.card--hover:hover{border-color:var(--gold-300);box-shadow:var(--shadow);
  transform:translateY(-3px)}
.card h3{margin-bottom:var(--sp-3)}
.card p{color:var(--ink-soft);font-size:var(--fs-base)}
.card__icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-100);color:var(--gold-600);font-size:1.15rem;
  margin-bottom:var(--sp-4);
}

/* Three-across quick facts sitting directly under the hero */
.quickbar{background:var(--navy-700);color:var(--white)}
.quickbar__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1px;background:rgba(255,255,255,.13)}
.quickbar__item{background:var(--navy-700);padding:var(--sp-5) var(--sp-5)}
.quickbar__label{margin:0 0 .55rem;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.quickbar__value{margin:0 0 .3rem;font-family:var(--font-display);
  font-size:1.4rem;font-weight:600;color:var(--white);line-height:1.2}
.quickbar__note{margin:0;font-size:var(--fs-sm);color:#a9bbd6;line-height:1.55}

/* Image card with caption */
.figure{border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:1px solid var(--rule);box-shadow:var(--shadow)}
.figure img{width:100%;object-fit:cover}
.figure--tall img{aspect-ratio:3/4}
.figure--wide img{aspect-ratio:16/10}
.figure--square img{aspect-ratio:1/1}
.figure figcaption{padding:.9rem 1.1rem;font-size:var(--fs-sm);
  color:var(--ink-soft);text-align:center;font-style:italic;
  border-top:1px solid var(--rule-soft)}

/* A figure whose image is a document worth enlarging -- a painted board, a
   notice, a certificate. Opens in the existing lightbox. object-fit is
   reset to contain: cropping a list of names to a tidy aspect ratio would
   cut names off. */
.figure--doc img{aspect-ratio:auto;object-fit:contain;display:block}
.figure__zoom{
  display:block;width:100%;padding:0;border:none;background:none;
  cursor:zoom-in;position:relative;overflow:hidden}
.figure__zoom img{transition:transform .45s var(--ease)}
.figure__zoom:hover img{transform:scale(1.03)}
.figure__cue{
  position:absolute;inset:auto 0 0;padding:1.5rem .8rem .7rem;
  background:linear-gradient(0deg,rgba(11,23,48,.85),transparent);
  color:var(--white);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.figure__zoom:hover .figure__cue,
.figure__zoom:focus-visible .figure__cue{opacity:1}
/* Without JS the lightbox never initialises, so don't promise a zoom. */
.no-js .figure__zoom{cursor:default}
.no-js .figure__cue{display:none}

/* Stat block */
.stat{text-align:center;padding:var(--sp-4) var(--sp-3)}
.stat__num{display:block;font-family:var(--font-display);
  font-size:clamp(2rem,3vw,2.7rem);font-weight:700;color:var(--gold-500);
  line-height:1.05}
.stat__label{display:block;margin-top:.5rem;font-size:var(--fs-sm);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.section--navy .stat__label{color:#a9bbd6}

/* Feature panel — ivory box with a gold left edge */
.panel{
  background:var(--ivory);border-left:3px solid var(--gold-500);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--sp-5) var(--sp-6);
}
.panel h3{margin-bottom:var(--sp-3)}
.panel p{color:var(--ink-soft)}

/* Simple definition list used for parish details */
.deflist{display:grid;gap:0}
.deflist>div{display:grid;grid-template-columns:1fr;gap:.15rem;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--rule-soft)}
.deflist>div:last-child{border-bottom:none}
.deflist dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-600)}
.deflist dd{margin:0;color:var(--ink)}

/* Secondary detail hanging beneath a value in a deflist -- e.g. the parish
   priest's ordination and birth dates under his name. Deliberately NOT extra
   dt/dd rows: they belong to the person, not to the parish, and promoting
   them to siblings of "Address" and "Telephone" would say otherwise.
   A nested <dl> is the correct structure for "these facts describe that
   value", and it keeps the dates machine-readable via <time>. */
.subfacts{
  display:grid;gap:.1rem .7rem;margin:.45rem 0 0;
  font-size:var(--fs-sm);line-height:1.6;
}
.subfacts dt{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.subfacts dd{margin:0;color:var(--ink-soft)}
/* Two columns from the first breakpoint where the label and value fit side by
   side; stacked below that, which is how it must read on a phone. */
@media (min-width:420px){
  .subfacts{grid-template-columns:auto 1fr;align-items:baseline}
  .subfacts dt{text-align:left}
}
@media (min-width:640px){
  .deflist>div{grid-template-columns:200px 1fr;gap:var(--sp-4);align-items:baseline}
}

/* ==========================================================================
   09  MASS TIMINGS TABLES
   ========================================================================== */
.timetable{width:100%;border-collapse:collapse;
  background:var(--surface);font-size:var(--fs-base)}
.timetable caption{
  caption-side:top;text-align:left;padding:0 0 var(--sp-4);
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;
  color:var(--navy-800);
}
.timetable th,.timetable td{
  padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
}
.timetable thead th{
  background:var(--navy-800);color:var(--white);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;border-bottom:none;
}
.timetable thead th:first-child{border-top-left-radius:var(--radius-sm)}
.timetable thead th:last-child{border-top-right-radius:var(--radius-sm)}
.timetable tbody tr:nth-child(even){background:var(--ivory)}
.timetable tbody tr:last-child th,
.timetable tbody tr:last-child td{border-bottom:none}
.timetable tbody th{font-weight:600;color:var(--navy-800);white-space:nowrap}
.timetable .time{font-family:var(--font-display);font-size:1.14rem;
  font-weight:600;color:var(--navy-700);white-space:nowrap}
.timetable .lang{display:inline-block;padding:.16rem .55rem;border-radius:999px;
  background:var(--gold-100);color:var(--gold-600);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

.table-wrap{overflow-x:auto;border:1px solid var(--rule);
  border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.table-wrap .timetable{border-radius:var(--radius)}

/* ==========================================================================
   10  TIMELINE
   ========================================================================== */
.timeline{position:relative;list-style:none;padding-left:0}
.timeline::before{
  content:"";position:absolute;left:9px;top:.6rem;bottom:.6rem;width:1px;
  background:linear-gradient(180deg,var(--gold-500),var(--rule));
}
.timeline>li{position:relative;padding-left:2.6rem;padding-bottom:var(--sp-6)}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{
  content:"";position:absolute;left:3px;top:.55rem;
  width:13px;height:13px;border-radius:50%;
  background:var(--white);border:2px solid var(--gold-500);
}
.timeline__year{
  display:block;font-family:var(--font-body);font-size:var(--fs-xs);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:.35rem;
}
.timeline h3{font-size:var(--fs-h4);margin-bottom:var(--sp-2)}
.timeline p{color:var(--ink-soft);font-size:var(--fs-base);margin:0}

/* ==========================================================================
   11  ACCORDION
   ========================================================================== */
.accordion{border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:var(--surface)}
.accordion__item+.accordion__item{border-top:1px solid var(--rule)}
.accordion__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;padding:1.15rem var(--sp-5);text-align:left;
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:600;
  color:var(--navy-800);transition:background .16s var(--ease)}
.accordion__trigger:hover{background:var(--ivory)}
.accordion__trigger::after{
  content:"";flex-shrink:0;width:9px;height:9px;
  border-right:2px solid var(--gold-500);border-bottom:2px solid var(--gold-500);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .22s var(--ease)}
.accordion__trigger[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
.accordion__panel{padding:0 var(--sp-5) var(--sp-5);color:var(--ink-soft)}
.accordion__panel[hidden]{display:none}
.accordion__panel>*+*{margin-top:var(--sp-3)}

/* ==========================================================================
   12  GALLERY & LIGHTBOX
   ========================================================================== */
.gallery{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.gallery__item{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  background:var(--ivory-deep);cursor:zoom-in;border:none;padding:0;
  aspect-ratio:4/3;display:block;width:100%;
}
.gallery__item--tall{aspect-ratio:3/4}
.gallery__item--wide{grid-column:span 2}
@media (max-width:560px){.gallery__item--wide{grid-column:span 1}}
.gallery__item img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s var(--ease)}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item figcaption{
  position:absolute;inset:auto 0 0;padding:1.6rem .95rem .8rem;
  background:linear-gradient(0deg,rgba(11,23,48,.88),transparent);
  color:var(--white);font-size:var(--fs-sm);text-align:left;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.gallery__item:hover figcaption,
.gallery__item:focus-visible figcaption{opacity:1;transform:translateY(0)}

.lightbox{
  position:fixed;inset:0;z-index:300;display:none;
  place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(8,16,34,.94);backdrop-filter:blur(6px);
}
.lightbox[data-open="true"]{display:grid}
.lightbox__img{max-width:100%;max-height:78vh;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg)}
.lightbox__caption{margin-top:var(--sp-4);color:#cdd8ea;text-align:center;
  font-size:var(--fs-base);max-width:60ch}
.lightbox__close,.lightbox__nav{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.11);color:var(--white);font-size:1.3rem;
  transition:background .16s var(--ease)}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);font-size:1.1rem}
.lightbox__nav--prev{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}

/* ==========================================================================
   13  PRAYER SHEETS
   ========================================================================== */
.prayer{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:var(--sp-6);
  position:relative;
}
.prayer+.prayer{margin-top:var(--sp-5)}
.prayer h3{margin-bottom:var(--sp-2)}
.prayer__meta{margin:0 0 var(--sp-4);font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600)}
.prayer__body{font-size:var(--fs-md);line-height:1.9;color:var(--ink)}
.prayer__body p+p{margin-top:var(--sp-4)}
.prayer__body .rubric{color:var(--maroon);font-style:italic;font-size:var(--fs-base)}
.prayer__body .response{font-weight:600;color:var(--navy-700)}
.prayer--feature{background:var(--ivory);border-color:var(--gold-300)}

.litany{list-style:none;columns:2;column-gap:var(--sp-7);font-size:var(--fs-base)}
.litany li{margin-bottom:.4rem;break-inside:avoid}
@media (max-width:640px){.litany{columns:1}}

/* --------------------------------------------------------------------------
   Tamil prayer text.

   Tamil needs more room than Latin at the same nominal size: the glyphs sit
   on a smaller effective x-height, and vowel signs extend well above and
   below the baseline (the i- and ai-signs, the pulli dot), so tight leading
   makes consecutive lines collide. Hence the size bump and generous leading.

   Applied via [lang="ta"] rather than a class, so the language declaration
   that screen readers and translation tools need is the same hook that
   drives the typography — one source of truth, impossible to get out of sync.
   -------------------------------------------------------------------------- */
[lang="ta"]{font-family:var(--font-tamil)}

/* Headings default to line-height 1.14, which is right for Cormorant and
   far too tight for Tamil -- the vowel signs above and below the baseline
   would touch the neighbouring line. */
h1[lang="ta"],h2[lang="ta"],h3[lang="ta"],h4[lang="ta"]{line-height:1.5}

/* Tamil set INSIDE an otherwise-Latin heading -- e.g. the home page's
   "Arokiya Madha ... (ஆரோக்கிய மாதா)". The heading's own 1.14 still applies,
   so the Tamil needs its own. Both rules are here on purpose: line-height on
   an inline box grows the line box in every browser, and :has() is the tidier
   fix where supported. Browsers without :has() still get the inline rule. */
h1 [lang="ta"],h2 [lang="ta"],h3 [lang="ta"],h4 [lang="ta"]{line-height:1.42}
h1:has([lang="ta"]),h2:has([lang="ta"]),
h3:has([lang="ta"]),h4:has([lang="ta"]){line-height:1.42}

.prayer--tamil{
  background:linear-gradient(180deg,var(--ivory) 0%,var(--white) 62%);
  border-color:var(--gold-300);
  box-shadow:var(--shadow-sm);
}
.prayer__body--tamil{
  font-size:clamp(1.08rem,.42vw + 1rem,1.28rem);
  line-height:2.05;
  color:var(--ink);
  text-align:left;          /* never justify Tamil — no hyphenation to
                               absorb the slack, so rivers open up */
}
.prayer__body--tamil p+p{margin-top:var(--sp-5)}
/* The closing "Amen." set apart, as it is on the printed prayer card. */
.prayer__body--tamil .amen{font-weight:600;color:var(--maroon)}

/* English gloss beneath the Tamil — quieter, so the Tamil stays primary. */
.prayer__gloss{
  margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:1px solid var(--rule);
  font-size:var(--fs-base);line-height:1.8;color:var(--ink-soft);
}
.prayer__gloss p+p{margin-top:var(--sp-3)}

/* ==========================================================================
   13b  DOCUMENT VIEWER  (the printed feast invitation)
   --------------------------------------------------------------------------
   Why page images and not <iframe src="*.pdf">:

   An iframed PDF is unreliable on exactly the devices this parish uses.
   iOS Safari renders only the first page inside an iframe and gives no way
   to reach the rest; Android Chrome commonly declines to render at all and
   offers a download instead. On top of that the source file is 18 MB of
   scanned artwork, which no one should be made to fetch just to read the
   programme.

   So each page is rasterised to a WebP once, at 1400px wide (comfortably
   sharp for the Tamil text), and the four are stacked inside one scrolling
   box. That renders identically in every browser, costs ~250 KB for the
   first page with the rest lazily fetched, and the untouched PDF stays
   available as a download for printing.

   overscroll-behavior:contain is the property that makes this feel right:
   scrolling inside the frame moves the document and does NOT leak into the
   page once you hit the end. The frame is deliberately capped well below
   full viewport height so there is always page left to scroll on either
   side of it -- a viewer that fills the screen is a scroll trap.
   ========================================================================== */
.docview{
  position:relative;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--ivory-deep);
  box-shadow:var(--shadow-sm);
  overflow:hidden;              /* clips the children to the rounded corners */
}

.docview__scroll{
  overflow:auto;
  height:min(78vh,860px);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y proximity; /* pages settle into place, never mid-page */
  scroll-padding-top:var(--sp-3);
  /* Keep the scrollbar permanently visible. On macOS the overlay scrollbar
     is hidden until you scroll, which hides the one affordance that tells
     people this box scrolls at all. */
  /* Chrome 121+/Firefox honour these standard properties and then IGNORE the
     ::-webkit-scrollbar rules below, so the two are alternatives rather than
     a cascade. 'auto' (not 'thin') on purpose: the scrollbar is the only
     thing telling people the frame scrolls, so it should not be dainty. */
  scrollbar-width:auto;
  scrollbar-color:var(--gold-500) var(--ivory-deep);
}
.docview__scroll::-webkit-scrollbar{width:11px;height:11px}
.docview__scroll::-webkit-scrollbar-track{background:var(--ivory-deep)}
.docview__scroll::-webkit-scrollbar-thumb{
  background:var(--gold-500);border-radius:99px;
  border:2px solid var(--ivory-deep)}
.docview__scroll::-webkit-scrollbar-thumb:hover{background:var(--gold-600)}
.docview__scroll::-webkit-scrollbar-corner{background:var(--ivory-deep)}

.docview__pages{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-4);padding:var(--sp-4);
  width:100%;
}
.docview__page{
  position:relative;margin:0;
  scroll-snap-align:start;
  flex:0 0 auto;max-width:100%;
}
.docview__page img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-sm);
  box-shadow:0 2px 12px rgba(15,30,61,.16);
  background:var(--white);
}
.docview__page figcaption{
  position:absolute;top:var(--sp-3);left:var(--sp-3);
  padding:.2rem .6rem;border-radius:99px;
  background:rgba(11,23,48,.72);color:var(--white);
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  pointer-events:none;
}

/* -- Zoomed state ---------------------------------------------------------
   On a phone a full page shrunk to 360px makes the Tamil unreadable, so the
   toggle switches the pages to their natural width. The box then scrolls
   horizontally as well as vertically, which is the point.
   ------------------------------------------------------------------------- */
.docview[data-zoom="true"] .docview__pages{
  align-items:flex-start;width:max-content}
.docview[data-zoom="true"] .docview__page{max-width:none}
.docview[data-zoom="true"] .docview__page img{width:1400px;max-width:none}
.docview[data-zoom="true"] .docview__scroll{scroll-snap-type:none}

/* -- Toolbar -------------------------------------------------------------- */
.docview__bar{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--rule);
  background:var(--surface);
}
.docview__hint{
  margin:0;flex:1 1 15rem;
  font-size:var(--fs-sm);color:var(--ink-soft)}
.docview__btn{
  display:inline-flex;align-items:center;gap:.45rem;
  text-decoration:none;      /* the download control is an <a>, not a button */
  padding:.5rem .9rem;border:1px solid var(--rule);border-radius:99px;
  background:var(--ivory);color:var(--navy-700);
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:background .16s var(--ease),
                            border-color .16s var(--ease),color .16s var(--ease)}
.docview__btn:hover{background:var(--gold-100);border-color:var(--gold-300);
  color:var(--navy-900)}
.docview__btn[aria-pressed="true"]{
  background:var(--navy-800);border-color:var(--navy-800);color:var(--white)}

/* No JS: the zoom toggle cannot work, so hide it rather than show a dead
   control. Fit-to-width still reads fine, and the PDF download still works. */
.no-js .docview__btn--zoom{display:none}

@media (max-width:600px){
  .docview__scroll{height:min(72vh,620px)}
  .docview__pages{padding:var(--sp-3);gap:var(--sp-3)}
}

@media print{
  /* A scrolling box prints as one clipped page. Let it all out instead. */
  .docview__scroll{height:auto;overflow:visible}
  .docview__bar{display:none}
  .docview__page{break-inside:avoid;page-break-inside:avoid}
  .docview__page img{box-shadow:none}
}

/* ==========================================================================
   14  CALLOUTS, NOTICES & CTA BANDS
   ========================================================================== */
.notice{
  display:flex;gap:var(--sp-4);align-items:flex-start;
  background:var(--gold-100);border:1px solid var(--gold-300);
  border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-base);color:#5c4a11;
}
.notice__icon{flex-shrink:0;font-size:1.1rem;line-height:1.5}
.notice p{margin:0}
.notice p+p{margin-top:var(--sp-2)}
.notice--info{background:#eef3fa;border-color:#cfdcee;color:#274766}

/* Feast highlight band */
.feast-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy-900);color:#cdd8ea;
}
.feast-band__media{position:absolute;inset:0;z-index:-1}
.feast-band__media img{width:100%;height:100%;object-fit:cover;opacity:.3}
.feast-band__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,23,48,.93),rgba(11,23,48,.66))}
.feast-band__inner{display:grid;gap:var(--sp-6);align-items:center;
  padding-block:clamp(var(--sp-8),7vw,var(--sp-10))}
@media (min-width:900px){.feast-band__inner{grid-template-columns:1.3fr auto}}
.feast-band h2{color:var(--white)}
.feast-band .date{
  font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);
  font-weight:700;color:var(--gold-400);line-height:1;display:block}
.feast-band .date small{display:block;font-family:var(--font-body);
  font-size:var(--fs-sm);letter-spacing:.2em;text-transform:uppercase;
  color:#9fb0cc;margin-top:.6rem;font-weight:500}

.cta-band{background:var(--ivory);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.cta-band__inner{display:grid;gap:var(--sp-5);align-items:center;
  padding-block:var(--sp-8)}
@media (min-width:820px){.cta-band__inner{grid-template-columns:1fr auto}}
.cta-band h2{margin-bottom:var(--sp-2)}
.cta-band p{color:var(--ink-soft);margin:0}

/* --------------------------------------------------------------------------
   Parish YouTube channel band.

   Two ways in, because they serve different people: the button is for anyone
   already on a computer (you cannot scan your own screen), and the QR is for
   a phone held up to someone else's screen, or to a printout on the notice
   board. Hence the QR is not merely decorative and must stay scannable --
   which is why it sits on a WHITE tile rather than directly on the navy.
   A QR's outer modules need a light quiet zone; drop it straight onto a dark
   panel and the code bleeds into the background and stops scanning.
   -------------------------------------------------------------------------- */
.channel{
  background:
    radial-gradient(120% 140% at 12% 0%, var(--navy-600) 0%, transparent 58%),
    var(--navy-800);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.09);
}
.channel__inner{
  display:grid;gap:clamp(var(--sp-5),4vw,var(--sp-8));
  align-items:center;padding-block:clamp(var(--sp-8),6vw,var(--sp-9));
}
@media (min-width:800px){
  .channel__inner{grid-template-columns:1fr auto}
}
.channel h2{color:var(--white);margin-bottom:var(--sp-3)}
.channel p{color:#c3d0e6}
/* The global rule paints <strong> navy-800 -- invisible on a navy band. */
.channel strong{color:var(--white)}
.channel__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);
  align-items:center;margin-top:var(--sp-5)}

/* The channel address, shown in full so it can be read out or copied. */
.channel__url{
  font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--gold-300);word-break:break-all}

/* YouTube's own red, used only on the button, so the control is instantly
   recognisable without letting brand red loose on the rest of the band. */
.btn--youtube{
  background:#ff0033;color:var(--white);border:1px solid #ff0033;
  display:inline-flex;align-items:center;gap:.6rem}
.btn--youtube:hover{background:#d9002b;border-color:#d9002b;color:var(--white)}
.btn--youtube svg{width:1.15em;height:1.15em;flex:0 0 auto}

/* Instagram has no single flat brand colour -- its mark is a gradient. Using
   that gradient on a solid button next to YouTube's red would give the band
   two competing loud fills, so the button is outlined instead and the gradient
   is kept where it belongs: on the glyph, via a mask. */
.btn--instagram{
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.42);
  display:inline-flex;align-items:center;gap:.6rem}
.btn--instagram:hover{
  background:rgba(255,255,255,.1);border-color:var(--white);color:var(--white)}
.btn--instagram svg{width:1.15em;height:1.15em;flex:0 0 auto}

.channel__links{display:grid;gap:.35rem;margin-top:var(--sp-4)}

.channel__qr{
  margin:0;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-3);
}
.channel__qr a{
  display:block;padding:var(--sp-3);border-radius:var(--radius);
  background:var(--white);          /* the quiet zone, continued */
  box-shadow:var(--shadow-lg);
  transition:transform .2s var(--ease)}
.channel__qr a:hover{transform:translateY(-3px)}
.channel__qr img{
  display:block;width:clamp(168px,20vw,232px);height:auto;
  border-radius:var(--radius-sm)}
.channel__qr figcaption{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-300);text-align:center}

@media print{
  /* The QR is the one part of this worth having on paper. */
  .channel{background:none;color:var(--ink);border-top:1px solid #ccc}
  .channel h2,.channel p{color:var(--ink)}
  .channel__actions{display:none}
  .channel__qr figcaption,.channel__url{color:var(--ink)}
  .channel__qr a{box-shadow:none}
}

/* News / announcement list */
.news-item{display:grid;gap:var(--sp-2);padding:var(--sp-5) 0;
  border-bottom:1px solid var(--rule-soft)}
.news-item:last-child{border-bottom:none}
.news-item__date{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-600)}
.news-item h3{font-size:var(--fs-h4);margin:0}
.news-item p{color:var(--ink-soft);font-size:var(--fs-base);margin:0}
@media (min-width:760px){
  .news-item{grid-template-columns:150px 1fr;gap:var(--sp-5)}
  .news-item__date{padding-top:.3rem}
}

/* Map */
.map-embed{position:relative;border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;background:var(--ivory-deep)}
.map-embed iframe{display:block;width:100%;height:420px;border:0}

/* ==========================================================================
   15  FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-900);color:#93a4c1;
  font-size:var(--fs-base);padding-block:var(--sp-9) var(--sp-5)}
.site-footer__grid{display:grid;gap:var(--sp-7);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.site-footer h2,.site-footer h3{color:var(--white)}
.site-footer h3{font-family:var(--font-body);font-size:var(--fs-sm);
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:var(--sp-4)}
.site-footer a{color:#b9c6dd;text-decoration:none}
.site-footer a:hover{color:var(--gold-300)}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:.55rem}
.site-footer .brand__name{font-size:1.25rem}
.site-footer p{line-height:1.75}

.footer__bottom{
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  font-size:var(--fs-sm);color:#7f92b1}
.footer__bottom nav{margin-left:auto;display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* ==========================================================================
   16  UTILITIES
   ========================================================================== */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}
.mb-0{margin-bottom:0}
.mb-5{margin-bottom:var(--sp-5)}
.mb-6{margin-bottom:var(--sp-6)}
.mb-7{margin-bottom:var(--sp-7)}
.measure{max-width:66ch}
.measure-narrow{max-width:52ch}
.note-quiet{font-size:var(--fs-sm);color:var(--ink-soft)}
.mx-auto{margin-inline:auto}

/* ==========================================================================
   17  MOTION, FOCUS & PRINT
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
  border-radius:3px;
}
.site-header :focus-visible,.hero :focus-visible,
.site-footer :focus-visible,.lightbox :focus-visible{
  outline-color:var(--gold-300);
}

/* Gentle reveal on scroll — progressive, and inert without JS */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.site-footer,.hero__cue,.nav-toggle,.lightbox,
  .cta-band,.feast-band__media,.skip-link,.breadcrumbs{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  h1,h2,h3{color:#000;page-break-after:avoid}
  .section{padding-block:1rem}
  .prayer,.card,.panel{border:1px solid #ccc;box-shadow:none;
    page-break-inside:avoid}
  .page-banner{background:#fff}
  .page-banner h1,.page-banner p{color:#000}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .litany{columns:2}
}