/* ============================================================================
   home.css — header, footer, and homepage sections.
   ========================================================================= */

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 4.75rem; }

.wordmark { text-decoration: none; line-height: 1.1; }
.wordmark__name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--brown-900); letter-spacing: -0.01em;
}
.wordmark__place {
  display: block; font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
  color: var(--brown-900); text-decoration: none; padding-block: var(--s-2);
  border-bottom: 2px solid transparent; transition: border-color var(--dur) var(--ease);
}
.nav a:not(.nav__cta):hover { border-bottom-color: var(--accent); }
.nav__cta { border-bottom: 0 !important; }

.navtoggle { display: none; flex-direction: column; gap: 5px; padding: var(--s-2); }
.navtoggle span { display: block; width: 24px; height: 2px; background: var(--brown-900); transition: transform var(--dur) var(--ease), opacity var(--dur); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 60rem) {
  .navtoggle { display: flex; }
  .nav {
    position: absolute; inset: 100% 0 auto; background: #fff;
    border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--s-4) var(--gutter) var(--s-5);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .nav__cta { margin-top: var(--s-4); text-align: center; }
}

/* ---------- Hero ----------
   Split: type on its own brown ground, photograph uncovered beside it.
   The photo is cropped to the friars (object-position bottom) instead of the
   roofline, and no type ever crosses a face. */
.hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: min(78vh, 42rem); }

.hero__copy {
  background: var(--brown-900);
  display: flex; align-items: center;
  padding: var(--s-8) clamp(1.25rem, 4vw, var(--s-8));
  /* pull the copy column out to the page edge, but keep text on the shell grid */
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
.hero__copyIn { max-width: 34rem; }

.hero__motto {
  font-family: var(--font-display); font-style: italic; font-size: var(--step-1);
  color: var(--gold-500); margin-bottom: var(--s-3);
}
.hero__title { color: #fff; font-size: var(--step-4); text-wrap: balance; }
.hero__sub {
  margin-top: var(--s-4); font-size: var(--step-1);
  color: rgba(255,255,255,0.82); line-height: 1.55;
}
.hero__acts { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero__fig { margin: 0; position: relative; overflow: hidden; }
.hero__fig img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 78%;   /* the friars, not the roof */

  /* Handheld camera — THREE movements, three clocks.

     Every previous version failed for the same reason: it was too PERFECT. A
     dead-smooth zoom and a dead-smooth drift still read as a computer, because
     no human hand is that steady. Real footage — even on a tripod — carries a
     constant micro-wobble, and that wobble is what the eye actually reads as
     "camera". Without it you get a moving photograph, which is what the owner
     kept seeing.

     So there are three movements, each on its own clock and its own easing:

       push  13s  linear        the dolly pushing in — holds its rate
       float  7s  ease-in-out   the operator drifting, settling at each end
       shake 3.1s ease-in-out   the hand itself, never still

     13 / 7 / 3.1 share no useful common factor, so the three never realign into
     a recognisable loop. That is the entire trick: a loop the eye can learn
     reads as animation, and one it cannot reads as film.

     Uses the INDEPENDENT scale / translate / rotate properties — three separate
     animations cannot all drive `transform` (each would overwrite the last),
     which is precisely why the earlier versions could only ever do one thing.

     Rotation is kept to ~0.2deg. At this scale that moves the frame corners by
     only ~3px — felt, not seen. Baseline scale 1.10 gives enough oversize that
     neither the drift nor the rotation can ever swing a bare edge into view. */
  transform-origin: 50% 70%;
  scale: 1.10;
  translate: 0 0;
  rotate: 0deg;
  animation: capnz-push  13s   linear      infinite alternate,
             capnz-float  7s   ease-in-out infinite alternate,
             capnz-shake  3.1s ease-in-out infinite alternate;
  will-change: scale, translate, rotate;
  backface-visibility: hidden;   /* stops sub-pixel shimmer on the brickwork */
}

@keyframes capnz-push {
  from { scale: 1.10; }
  to   { scale: 1.24; }
}

/* diagonal drift — a real operator never drifts on a perfect axis */
@keyframes capnz-float {
  from { translate:  1.1%  2.8%; }
  to   { translate: -1.1% -2.8%; }
}

/* the hand. tiny, fast, never still. this is the one that sells it. */
@keyframes capnz-shake {
  from { rotate: -0.20deg; }
  to   { rotate:  0.16deg; }
}

/* Anyone who has asked their system for less motion gets a still photograph.
   Non-negotiable: for some people this kind of drift causes real nausea. */
@media (prefers-reduced-motion: reduce) {
  .hero__fig img { animation: none; scale: 1; translate: 0; rotate: 0deg; }
}
/* a whisper of brown bleeding off the type panel so the join isn't a hard seam */
.hero__fig::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 12%;
  background: linear-gradient(to right, var(--brown-900), transparent);
  z-index: 1; pointer-events: none;
}

@media (max-width: 62rem) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: var(--s-7) var(--gutter); padding-left: var(--gutter); order: 2; }
  .hero__fig { order: 1; aspect-ratio: 16 / 10; }
  .hero__fig::before { display: none; }
  .hero__copyIn { max-width: none; }
}

/* ---------- Greeting ---------- */
.greeting { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.greeting__mark {
  font-family: var(--font-display); font-style: italic; font-size: var(--step-3);
  color: var(--accent); line-height: 1.1; position: relative; padding-top: var(--s-4);
}
.greeting__mark::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 2px; background: var(--accent); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--brown-900); }
@media (max-width: 52rem) { .greeting { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- Gifts ---------- */
/* Four marks now, not three: 13rem lets all four sit on one row on a desktop
   and fall to 2 x 2 on a tablet, instead of leaving a lone orphan card. */
.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.gift { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
/* The numerals said nothing — 01..04 implied a sequence these four marks do not
   have. Replaced by line symbols the Order already owns: a candle, a bowl held
   in open hands, the knotted cord, and the Tau that Francis signed with.
   Stroked, never filled, so they read as drawings beside serif type rather than
   as app icons. Decorative: the heading carries the meaning, so they are
   aria-hidden and add no text of their own. */
.gift__ico-wrap { display: block; margin-bottom: var(--s-3); line-height: 0; }
.gift__ico {
  width: 3.4rem; height: 3.4rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur) var(--ease);
}
.gift:hover .gift__ico { stroke: var(--brown-700, var(--accent)); }

/* One of the four is a filled glyph rather than a stroked drawing (see the note
   in front-page.php), so it needs the opposite paint. */
.gift__ico--solid { fill: var(--accent); stroke: none; transition: fill var(--dur) var(--ease); }
.gift:hover .gift__ico--solid { fill: var(--brown-700); stroke: none; }
.gift h3 { margin-bottom: var(--s-3); }
.gift p { color: var(--text-muted); }

/* ---------- Charism ---------- */
.charism__in { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.charism__note { color: rgba(232,222,217,0.75); margin-bottom: var(--s-5); max-width: 34ch; }
.charism__quote { margin: 0; border-left: 2px solid var(--gold-500); padding-left: var(--s-6); }
.charism__quote p {
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.45; color: #fff;
}
.charism__quote p + p { margin-top: var(--s-5); }
@media (max-width: 56rem) {
  .charism__in { grid-template-columns: 1fr; gap: var(--s-6); }
  .charism__quote { padding-left: var(--s-4); }
}

/* ---------- History ---------- */
.hist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: var(--s-8); align-items: start; }
.hist__body p { margin-bottom: var(--s-4); max-width: 60ch; }
.hist__body .btn { margin-top: var(--s-3); }

.hist__facts { background: var(--paper-3); padding: var(--s-6); border-top: 3px solid var(--accent); }
.hist__facts dl { margin: 0; }
.hist__facts div { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--s-3); padding-block: var(--s-3); }
.hist__facts div + div { border-top: 1px solid var(--rule); }
.hist__facts dt { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--step-0); }
.hist__facts dd { margin: 0; font-size: var(--step--1); color: var(--text-muted); line-height: 1.45; }
.hist__count {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-size: var(--step-1); color: var(--brown-900);
}
@media (max-width: 58rem) { .hist { grid-template-columns: 1fr; } }

/* ---------- Communities ---------- */
.comms { margin-top: var(--s-6); }
.comm { background: #fff; padding: var(--s-6); border-top: 3px solid var(--brown-900); }
.comm h3 { font-size: var(--step-1); }
.comm__place { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: var(--s-1); }
.comm__addr { margin-top: var(--s-4); font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.comm__contact { margin-top: var(--s-4); font-size: var(--step--1); line-height: 1.7; }
.comms__foot { margin-top: var(--s-6); font-weight: 600; }

/* ---------- Call ---------- */
.call__body { margin-bottom: var(--s-6); font-size: var(--step-1); color: var(--text-muted); line-height: 1.6; }

/* ---------- Footer ---------- */
.site-foot { background: var(--brown-900); color: rgba(232,222,217,0.8); padding-top: var(--s-8); margin-top: 0; }
.site-foot__in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-7); padding-bottom: var(--s-7); }
.site-foot .wordmark__name { color: #fff; }
.site-foot__motto { margin-top: var(--s-4); font-family: var(--font-display); font-style: italic; color: var(--gold-500); font-size: var(--step-1); }
.site-foot__nav { display: flex; flex-direction: column; gap: var(--s-2); }
.site-foot__nav h4 {
  color: #fff; font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s-2);
}
.site-foot__nav a { color: rgba(232,222,217,0.8); text-decoration: none; font-size: var(--step--1); }
.site-foot__nav a:hover { color: var(--gold-500); }
.site-foot__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  padding-block: var(--s-5); border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--step--1); color: rgba(232,222,217,0.55);
}
.site-foot__legal p { margin: 0; }
/* Build credit: full-width third line so the copyright/motto pair keeps its
   space-between balance. Deliberately quieter than the legal text around it —
   present and clickable, never competing with the parish's own words. */
.site-foot__credit {
  flex-basis: 100%; margin-top: var(--s-3) !important;
  font-size: 0.82em; color: rgba(232,222,217,0.55);  /* 4.65:1 on brown-900 — WCAG AA */
}
.site-foot__credit a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(232,222,217,0.35);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-foot__credit a:hover, .site-foot__credit a:focus-visible {
  color: var(--gold-500); border-bottom-color: var(--gold-500);
}
@media (max-width: 52rem) { .site-foot__in { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ═══════════════════════════════════════════════════════════════════════
   Inner pages, blog, and the contact form.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Page head ----------
   Inner pages get a quiet head, not a second hero. One hero per site. */
.pagehead { padding-block: clamp(var(--s-7), 7vw, var(--s-8)) var(--s-5); background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.pagehead h1 { font-size: var(--step-4); max-width: 20ch; }
.pagehead__sub { margin-top: var(--s-4); max-width: 58ch; font-size: var(--step-1); color: var(--text-muted); line-height: 1.55; }

.pagefig { margin: 0; }
.pagefig img { width: 100%; max-height: 30rem; object-fit: cover; object-position: center 40%; }

/* ---------- Blog ---------- */
.postcard__img { display: block; overflow: hidden; margin-bottom: var(--s-4); }
.postcard__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur) var(--ease); }
.postcard__img:hover img { transform: scale(1.03); }
.postcard__date { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); }
.postcard h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.postcard h3 a { color: var(--heading); text-decoration: none; }
.postcard h3 a:hover { color: var(--brown-700); text-decoration: underline; text-underline-offset: 3px; }

.pager { margin-top: var(--s-7); }
.pager .nav-links { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pager .page-numbers {
  display: inline-block; min-width: 2.5rem; text-align: center;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--rule);
  text-decoration: none; color: var(--brown-900); font-size: var(--step--1);
}
.pager .page-numbers.current, .pager .page-numbers:hover { background: var(--brown-900); color: #fff; border-color: var(--brown-900); }

/* ---------- Contact form ----------
   Square fields, gold focus ring, no floating labels. A form on a church
   site should look like a form, not a product tour. */
.cform { max-width: 34rem; }
.cform__row { margin-bottom: var(--s-5); }
.cform label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
  color: var(--brown-900);
}
.cform label span[aria-hidden] { color: var(--accent); }
.cform input, .cform textarea {
  width: 100%; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; color: var(--text); font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease);
}
.cform input:hover, .cform textarea:hover { border-color: var(--brown-500); }
.cform input:focus, .cform textarea:focus { border-color: var(--brown-900); }
.cform textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.cform button { margin-top: var(--s-2); }
.cform__note { margin-top: var(--s-4); font-size: var(--step--1); }

/* honeypot — off-screen, never display:none (bots skip hidden fields) */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Form feedback ----------
   Success is quiet. Failure is loud and gives the address, because a message
   that silently vanished is worse than no form at all. */
.formnote { padding: var(--s-5); border-left: 3px solid; margin-bottom: var(--s-5); max-width: 34rem; }
.formnote p { margin: 0; }
.formnote p + p { margin-top: var(--s-2); }
.formnote--ok  { border-color: var(--accent);    background: #faf6ef; color: var(--brown-900); }
.formnote--err { border-color: #a3332a;          background: #fbf1f0; color: #6e211a; }

/* ---------- Mass times table ---------- */
.masstimes { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.masstimes th, .masstimes td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--step--1); }
.masstimes th { font-family: var(--font-body); font-weight: 600; color: var(--brown-900); width: 42%; }
.masstimes td { color: var(--text-muted); }
.tablewrap { overflow-x: auto; }


/* ---------- Crest ----------
   Their real logo: the friar with open arms over the map of New Zealand.
   Sits left of the wordmark. Given room — it is the order's own mark. */
.wordmark { display: flex; align-items: center; gap: var(--s-3); }
.wordmark__crest { width: 3.1rem; height: 3.1rem; object-fit: contain; flex: none; }
.site-foot .wordmark__crest { width: 4rem; height: 4rem; }
.site-foot__brand .wordmark { align-items: flex-start; }
@media (max-width: 30rem) { .wordmark__crest { width: 2.5rem; height: 2.5rem; } }

/* ---------- The friars ----------
   Square portraits, name underneath, nothing else. No hover cards, no
   overlay-on-photo, no fake LinkedIn tiles. These are brothers, not staff.

   The grid BREAKS OUT of .prose. Prose is capped at 68ch because that is a
   comfortable reading measure — but a photograph is not read, and forcing five
   faces into a text column squashed them into the left half of the page with a
   pool of dead space beside it. Text keeps the measure; pictures get the room. */
.prose .friars {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  max-width: none;
  margin-top: var(--s-6);
  margin-bottom: var(--s-8);   /* was colliding with the pullquote underneath */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
/* Names now carry a surname and the "OFMCap." suffix, so a full caption is
   longer than the old one-word label — step-1 wrapped to three lines and pushed
   the rows out of alignment. Names sit at body size; the office sits under the
   name, quieter, so the eye still reads the person first. */
.friars .portrait figcaption { font-size: var(--step-0); line-height: 1.3; }
.friars .post-nom,
.profile .post-nom { display: block; }
.friars .role {
  display: block; margin-top: 2px;
  font-family: var(--font-body);
  font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent);
}

/* Give the pullquote air when it follows the grid. */
.prose .friars + .pullquote,
.prose blockquote.pullquote { margin-top: var(--s-7); }

/* ---------- Crest hard cap ----------
   Belt and braces. The markup also carries width/height attributes so a stale
   or missing stylesheet cannot render the crest at its natural size and blow
   the header apart — which is exactly what happened on 2026-07-17. */
.wordmark__crest { max-width: 3.1rem; max-height: 3.1rem; }

/* ---------- Current page ---------- */
.nav a.is-current { border-bottom-color: var(--accent); color: var(--brown-900); }
.nav a { white-space: nowrap; }
@media (max-width: 68rem) and (min-width: 60.001rem) {
  .nav { gap: var(--s-4); }
  .nav a { font-size: 0.8rem; }
}

/* ---------- Liturgical calendar ----------
   Same escape as the friars grid: a table is not prose and must not be
   squeezed into a 68ch reading measure. */
.prose .tablewrap {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  max-width: none;
  margin-block: var(--s-5) var(--s-7);
}
.calendar th:nth-child(1), .calendar td:nth-child(1) { width: 7.5rem; white-space: nowrap; }
.calendar th:nth-child(2), .calendar td:nth-child(2) { width: 24rem; }
.calendar td:nth-child(2) { color: var(--brown-900); font-family: var(--font-display); font-size: var(--step-0); }
.calendar td:nth-child(1) { font-family: var(--font-display); color: var(--brown-900); }
.calendar td { vertical-align: top; }
.calendar .tag {
  display: inline-block; margin-left: var(--s-2);
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor;
  padding: 1px var(--s-2); border-radius: var(--radius);
  vertical-align: middle;
}

/* ---------- Friar profiles ----------
   Photo beside the words, alternating side down the page so it reads as a
   sequence of people rather than a staff directory. A card with no bio simply
   shows the man's face and his name — which is true — instead of filler. */
.profiles { display: flex; flex-direction: column; gap: var(--s-7); margin-top: var(--s-6); }
.profile {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--s-6); align-items: center;
  border-top: 1px solid var(--rule); padding-top: var(--s-6);
}
.profile:first-child { border-top: 0; padding-top: 0; }
.profile__img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 20%;
  border-radius: var(--radius); filter: saturate(0.95);
  transition: filter var(--dur) var(--ease);
}
.profile:hover .profile__img { filter: saturate(1.05); }
.profile__body h3 { font-size: var(--step-2); }
.profile__role {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-top: var(--s-2);
}
.profile__body p { margin-top: var(--s-3); color: var(--text-muted); max-width: 56ch; }
.profile:nth-child(even) { grid-template-columns: minmax(0, 1fr) 15rem; }
.profile:nth-child(even) .profile__img { order: 2; }
@media (max-width: 46rem) {
  .profile, .profile:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-4); }
  .profile:nth-child(even) .profile__img { order: 0; }
  .profile__img { max-width: 13rem; }
}

/* ---------- Community cards with photographs ---------- */
.commcards {
  display: grid; gap: var(--s-6); margin-top: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.commcard {
  background: #fff; border-top: 3px solid var(--brown-900);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.commcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.commcard__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 30%; }
/* Building photos frame differently from group portraits: the subject fills the
   frame, so centre it rather than favouring the upper third where faces sit. */
.commcard__img--building { object-position: center center; }
.commcard__body { padding: var(--s-5); }
.commcard h3 { font-size: var(--step-1); }
.commcard__place {
  font-size: var(--step--1); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); margin-top: var(--s-1);
}
.commcard__addr { margin-top: var(--s-4); font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.commcard__contact { margin-top: var(--s-4); font-size: var(--step--1); line-height: 1.7; }
.commcard__body { display: flex; flex-direction: column; flex: 1; }
.commcard__web {
  margin-top: auto; padding-top: var(--s-4);
  font-size: var(--step--1); letter-spacing: 0.04em;
}
.commcard__web a {
  text-decoration: none; font-weight: 600; color: var(--brown-900);
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.commcard__web a:hover, .commcard__web a:focus-visible { color: var(--accent); }

.prose .commcards, .prose .profiles {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  max-width: none;
}

/* ---------- Submenu ---------- */
.nav__group { position: relative; }
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 12rem;
  background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; padding: var(--s-2) 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 60;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  padding: var(--s-2) var(--s-4) !important;
  border-bottom: 0 !important; white-space: nowrap;
}
.nav__sub a:hover { background: var(--paper-3); color: var(--brown-700); }
@media (max-width: 60rem) {
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 0 var(--s-4);
  }
  .nav__sub a { border-bottom: 1px solid var(--rule) !important; }
}

/* ---------- Gallery ----------
   Deliberately a plain, dense grid of square photographs — not a carousel and
   not a masonry puzzle. There are 26 pictures of real parish life here; the job
   is to let people see them, not to make the grid the interesting part.
   Captions sit under each frame and stay quiet. */
.gallery {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  margin-top: var(--s-6);
}
.prose .gallery {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  max-width: none;
  margin-bottom: var(--s-7);
}
.gallery__item { margin: 0; }
.gallery__item img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(0.95);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery__item:hover img { filter: saturate(1.08); transform: scale(1.02); }
.gallery__item figcaption {
  margin-top: var(--s-2);
  font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--text-muted); line-height: 1.35;
}

/* On the dark band the captions need to lift off the ground. */
.section--dark .gallery__item figcaption { color: rgba(232,222,217,0.7); }

/* ---------- Lightbox ---------- */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(22, 9, 7, 0.94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; animation: capnz-fade 180ms ease-out; }
@keyframes capnz-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: var(--s-4); }
.lightbox__img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox__cap {
  text-align: center; color: rgba(232,222,217,0.85);
  font-family: var(--font-display); font-size: var(--step-0);
}

.lightbox__close, .lightbox__nav {
  position: absolute; color: #fff; line-height: 1;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%; transition: background var(--dur) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--brown-900); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.lightbox__close { top: var(--s-4); right: var(--s-4); width: 2.75rem; height: 2.75rem; font-size: 1.6rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.8rem; }
.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }

@media (max-width: 40rem) {
  .lightbox__nav { top: auto; bottom: var(--s-4); transform: none; }
  .lightbox__nav--prev { left: 25%; }
  .lightbox__nav--next { right: 25%; }
  .lightbox__img { max-height: 68vh; }
}

/* ---------- Phones ----------
   Nine friars stacked one per row is a punishing scroll on a 390px screen.
   Two-up keeps each face big enough to recognise and cuts the page in half.
   Same for the gallery: 26 photos one-at-a-time is nobody's idea of a gallery. */
@media (max-width: 30rem) {
  .prose .friars, .friars { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .friars .portrait figcaption { font-size: var(--step-0); }
  .gallery, .prose .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .gallery__item figcaption { font-size: 0.68rem; }
}

/* ---------- Ministries ----------
   Seven blocks, each a heading + one paragraph + the gallery grid already
   defined above. The grid is reused deliberately: a second photo component
   would be a second thing to maintain for no gain. The rule that .prose caps
   at 68ch bites here exactly as it does for the friars grid, so each section
   breaks out to the full shell width. */
.ministry { margin: 0 0 var(--s-8); }
.prose .ministry {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  max-width: none;
}
.ministry__title {
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.ministry__lede {
  max-width: 62ch;
  margin: 0;
  color: var(--text-muted);
}
.ministry .gallery { margin-top: var(--s-4); }
.ministry .gallery__item figcaption { margin-top: var(--s-1); }

/* ---------- Events ----------
   Poster beside text, because the friars' notices ARE posters — reproducing one
   at thumbnail size and retyping it underneath is how parish sites end up with
   two versions of the same information. The poster is the picture; the text
   beside it is what a search engine and a screen reader can actually read.
   Falls to one column under 46rem, poster first. */
.events { display: grid; gap: var(--s-8); margin-top: var(--s-6); }
.prose .events {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  max-width: none;
}
.event {
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.event--nopost { grid-template-columns: 1fr; }
.event:last-child { border-bottom: 0; padding-bottom: 0; }
.event__poster img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.08);
}
.event__title { margin: 0 0 var(--s-1); }
.event__sub { margin: 0 0 var(--s-4); color: var(--text-muted); font-style: italic; }
.event__when { margin: 0 0 var(--s-4); }
.event__blurb { margin: 0 0 var(--s-4); color: var(--text-muted); max-width: 60ch; }
.event__sched { margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.event__sched > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-3); }
.event__sched dt { font-weight: 600; }
.event__sched dd { margin: 0; color: var(--text-muted); }
.event__quote { margin: 0; padding-left: var(--s-4); border-left: 2px solid var(--accent); }
.event__quote p { margin: 0 0 var(--s-1); font-family: var(--font-display); }
.event__quote cite { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-muted); font-style: normal; }
.events__none { color: var(--text-muted); }

/* Homepage strip — poster thumbnails, nothing clever. */
.evstrip {
  display: grid; gap: var(--s-6); margin-top: var(--s-6);
  /* FIXED-WIDTH tracks, not 1fr: with only two events, auto-fit 1fr stretched
     each poster to half the shell and a 3:4 thumbnail became 700px tall. These
     are meant to be thumbnails, so the track is capped and the row starts left
     however many events there are. */
  grid-template-columns: repeat(auto-fill, 11.5rem);
  justify-content: start;
}
.evcard { display: block; text-decoration: none; color: inherit; }
.evcard__img img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: var(--radius);
  transition: filter var(--dur) var(--ease);
}
.evcard:hover .evcard__img img { filter: brightness(1.04); }
.evcard__txt { display: block; margin-top: var(--s-3); }
.evcard__txt strong { display: block; font-family: var(--font-display); font-size: var(--step-0); }
.evcard__when { display: block; margin-top: 2px; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text-muted); }
.evcard:hover .evcard__txt strong { color: var(--brown-700); }

@media (max-width: 46rem) {
  .event { grid-template-columns: 1fr; }
  .event__poster { max-width: 22rem; }
  .event__sched > div { grid-template-columns: 5.5rem 1fr; }
}