/* ============================================================================
   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 ---------- */
.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s-7); margin-top: var(--s-6); }
.gift { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.gift__n {
  display: block; font-family: var(--font-display); font-size: var(--step-1);
  color: var(--accent); font-weight: 700; margin-bottom: var(--s-2);
}
.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; }
@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));
}
.friars .portrait figcaption { font-size: var(--step-1); }
.friars .role { display: block; }

/* 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%; }
.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; }
.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; }
}