/*
Theme Name: Saint John Mark
Theme URI: https://saintjeanmarc.org
Description: Block theme for the Church of Saint John Mark, Byblos. Design system v3 "Limestone and light": white pages, ink text, one liturgical crimson, full-bleed photography, classical display type and the Romanesque arch of the parish logo as a quiet signature.
Author: WeCanSync
Author URI: https://wecansync.com
Version: 3.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: stjm
*/
/* ==========================================================================
0. DESIGN TOKENS
Light pages; photographs carry light-on-dark text. One accent (crimson). Sharp edges.
Documented exception: arch-topped images (the logo motif).
========================================================================== */
:root {
/* Colour: light by default. Photographic areas re-map these (see "Inverse scope"). */
--c-paper: #fcfcfa; /* page */
--c-band: #f3f1ec; /* bands, panels: limestone */
--c-raised: #fefefd; /* documents, dropdowns */
--c-ink: #1e1d1b; /* text, 16.4:1 */
--c-muted: #5c5852; /* secondary text, 6.9:1 */
--c-hair: rgb(30 29 27 / 0.14);
--c-hair-strong: rgb(30 29 27 / 0.32);
--c-on-dark: #f3efe8; /* text on photographs and crimson */
--c-shade: 20 19 18; /* RGB of the photo scrim */
--c-crimson: #a4222a; /* the single accent: fills, markers */
--c-crimson-deep: #8a1c23; /* hover, footer */
--c-crimson-text: #a4222a; /* the accent used as text, 7.2:1 */
/* Compatibility aliases (v1 names used by PHP-rendered components) */
--stjm-bg: var(--c-paper);
--stjm-surface: var(--c-band);
--stjm-raised: var(--c-raised);
--stjm-ink: var(--c-ink);
--stjm-ink-2: var(--c-muted);
--stjm-line: var(--c-hair);
--stjm-accent: var(--c-crimson-text);
--stjm-accent-soft: rgb(30 29 27 / 0.05);
--stjm-accent-ink: var(--c-ink);
/* Type: Libre Baskerville for headings, titles and editorial text; Lato for
everything read or operated (body, navigation, buttons, forms, captions).
Optical scale: the Baskerville face is size-adjusted to 82% (section 1) so
its capitals stand as tall as the classical display scale below intends;
a display size of 2rem renders Baskerville at about 1.64rem. Lato is not
adjusted. */
--f-display: "Libre Baskerville", "Amiri", Baskerville, Georgia, "Times New Roman", serif;
--f-sans: "Lato", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-display: clamp(3rem, 1.7rem + 5.2vw, 6.5rem);
--fs-h1: clamp(2.75rem, 1.8rem + 3.6vw, 5rem);
--fs-h2: clamp(2.2rem, 1.6rem + 2.3vw, 3.6rem);
--fs-h3: clamp(1.55rem, 1.3rem + 0.8vw, 2rem);
--fs-h4: clamp(1.3rem, 1.2rem + 0.35vw, 1.5rem);
--fs-h5: 1.2rem;
--fs-h6: 1.05rem;
--fs-lede: clamp(1.35rem, 1.15rem + 0.65vw, 1.7rem);
--fs-body: 1.0625rem;
--fs-small: 0.875rem;
--fs-label: 0.75rem;
--fw-display: 400; /* Baskerville regular: headings stay calm, never bold */
--fw-body: 400;
--fw-strong: 700; /* Lato bold: labels, buttons, emphasis */
--lh-display: 1.08;
--lh-heading: 1.14;
--lh-title: 1.25; /* h4 to h6, card and list titles */
--lh-body: 1.7;
--ls-display: -0.012em;
--ls-heading: -0.006em;
--ls-label: 0.18em; /* tracked capitals: labels, eyebrows */
--ls-button: 0.16em;
/* Gold: a quiet second light on the pages (button hovers, fine frames,
the shrines cross). Decorative strokes only, never text on paper. */
--c-gold: #a7884e; /* 3.1:1 on paper: a visible line, not a text colour */
--c-gold-line: rgb(167 136 78 / 0.55);
/* Buttons (section 4) */
--btn-pad-y: 1rem;
--btn-pad-x: 1.9rem;
--btn-size: 0.78rem;
--btn-hover-bg: rgb(30 29 27 / 0.045);
--btn-hover-c: var(--c-crimson); /* hover frame and text: crimson on light pages, white on dark (inverse scope, .give) */
/* Space and layout */
--wide: 82rem;
--gutter: clamp(1.25rem, 4vw, 3rem);
--section: clamp(5rem, 10vw, 9.5rem);
--header-h: 5.25rem;
/* Motion */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--quick: 0.25s;
/* Layers */
--z-pill: 25;
--z-header: 30;
--z-grain: 40;
--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E");
--icon-stroke: 1.3px; /* Tabler line icons: one hairline at every size */
color-scheme: light;
}
/* ==========================================================================
1. FONTS (self-hosted; Arabic faces load only for Arabic text)
========================================================================== */
/* Client-supplied files (OFL), subset to Latin. Baskerville is variable (400 to 700). */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 82%; src: url("assets/fonts/libre-baskerville-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400 700; font-display: swap; size-adjust: 82%; src: url("assets/fonts/libre-baskerville-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/lato-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("assets/fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/amiri-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/amiri-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* ==========================================================================
2. BASE
========================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--c-paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0;
background: var(--c-paper);
color: var(--c-ink);
font-family: var(--f-sans);
font-size: var(--fs-body);
font-weight: var(--fw-body);
line-height: var(--lh-body);
letter-spacing: 0.005em;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
strong, b { font-weight: var(--fw-strong); }
:where(button, input, select, textarea) { font-family: var(--f-sans); }
/* Film grain: one fixed, non-interactive layer */
body::after {
content: "";
position: fixed; inset: 0; z-index: var(--z-grain);
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { max-width: 100%; height: auto; }
::selection { background: var(--c-crimson); color: var(--c-on-dark); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.icon[stroke] { stroke-width: var(--icon-stroke); }
.icon[stroke] * { vector-effect: non-scaling-stroke; }
.screen-reader-text { 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.screen-reader-text:focus { clip: auto; width: auto; height: auto; margin: 0; z-index: 100; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; padding: 0.75rem 1rem; background: var(--c-ink); color: var(--c-paper); white-space: normal; }
/* Headings: Libre Baskerville at its regular weight, generous leading.
The hierarchy is carried by size and space, never by weight. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
font-family: var(--f-display);
font-weight: var(--fw-display);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--c-ink);
padding-block-end: 0.06em; /* descender clearance */
}
:where(h1) { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
:where(h2) { font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
:where(h3) { font-size: var(--fs-h3); }
:where(h4) { font-size: var(--fs-h4); line-height: var(--lh-title); letter-spacing: 0; }
:where(h5) { font-size: var(--fs-h5); line-height: var(--lh-title); letter-spacing: 0; }
:where(h6) { font-size: var(--fs-h6); line-height: var(--lh-title); letter-spacing: 0; font-style: italic; }
:where(em, i, cite) { font-style: italic; }
/* ==========================================================================
3. TYPE UTILITIES
========================================================================== */
/* Label: tracked capitals in Lato. Rationed: hero + 1 per 3 sections. */
.label, .is-style-label, .home-hero__kicker {
font-family: var(--f-sans);
font-size: var(--fs-label);
font-weight: var(--fw-strong);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-muted);
line-height: 1.4;
margin: 0 0 1.25rem;
}
.lede, .intro__lede, .home-hero__lede {
font-family: var(--f-display);
font-size: var(--fs-lede);
font-weight: var(--fw-display);
line-height: 1.4;
color: var(--c-ink);
max-width: 34ch;
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.018em; }
/* ==========================================================================
4. BUTTONS: the carved tablet
Three levels, one shape: a rectangle with its four corners cut at 45
degrees, like a tablet of carved stone (clip-path). The cut edges are
drawn with four corner gradients, so the frame follows the bevel and the
whole button works on an (no pseudo-elements needed).
- Primary (.btn, the default WordPress button, form submit): liturgical
crimson with light text. Hover: the fill falls away, leaving a
transparent tablet framed in --btn-hover-c: crimson frame and text on
light pages, white over photographs, Give and the footer.
- Secondary (.btn--secondary, .btn--outline, "Outline" block style): the
same tablet drawn as a hairline in the scope's ink. Hover: it fills
with crimson.
- Text (.text-link, .btn--text): tracked capitals and an arrow; a gold
hairline underlines the words on hover.
Sizes: .btn--sm (header), .btn--lg (Give). --chamfer sets the cut.
========================================================================== */
.wp-block-button__link, .wp-element-button, .btn, .wpcf7-submit {
--chamfer: 0.6rem;
--edge: var(--c-crimson); /* colour of the frame, straight and cut edges */
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem;
box-sizing: border-box; min-height: 3.25rem;
padding: var(--btn-pad-y) var(--btn-pad-x);
border: 1px solid var(--edge);
border-radius: 0;
outline: 0;
background-color: var(--c-crimson);
background-image:
linear-gradient(to bottom right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(to bottom left, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(to top left, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(to top right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px));
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-size: var(--chamfer) var(--chamfer);
background-repeat: no-repeat;
background-origin: border-box;
clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
color: var(--c-on-dark);
font-family: var(--f-sans); font-size: var(--btn-size); font-weight: var(--fw-strong); line-height: 1.2;
letter-spacing: var(--ls-button); text-transform: uppercase;
text-decoration: none; white-space: nowrap; cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), --edge 0.4s var(--ease), transform 0.12s var(--ease);
}
.wp-block-button__link::after, .btn::after {
content: ""; width: 1.1em; height: 1.1em; margin-inline-end: -0.2em; background: currentColor;
-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
transition: transform 0.4s var(--ease);
}
.wp-block-button__link:hover, .btn:hover, .wpcf7-submit:hover {
--edge: var(--btn-hover-c);
background-color: transparent; border-color: var(--btn-hover-c); color: var(--btn-hover-c);
}
.wp-block-button__link:hover::after, .btn:hover::after { transform: translateX(4px); }
.wp-block-button__link:active, .btn:active, .wpcf7-submit:active { transform: translateY(1px); }
/* The cut corners clip anything drawn outside, so focus is drawn inside the tablet */
.wp-block-button__link:focus-visible, .btn:focus-visible, .wpcf7-submit:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
/* Secondary: the same tablet as a hairline; fills with crimson on hover */
.wp-block-button.is-style-outline > .wp-block-button__link, .btn--outline, .btn--secondary {
--edge: var(--c-hair-strong);
background-color: transparent;
color: var(--c-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover, .btn--outline:hover, .btn--secondary:hover {
--edge: var(--c-crimson);
background-color: var(--c-crimson); border-color: var(--c-crimson); color: var(--c-on-dark);
}
/* Text: no frame, a gold hairline under the words on hover */
.text-link, .btn--text {
display: inline-flex; align-items: center; gap: 0.65rem;
font-family: var(--f-sans); font-size: var(--btn-size); font-weight: var(--fw-strong); letter-spacing: var(--ls-button); text-transform: uppercase;
color: var(--c-ink);
text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.6em;
transition: text-decoration-color 0.45s var(--ease), color var(--quick) var(--ease);
}
.text-link::after {
content: ""; width: 1.1em; height: 1.1em; background: currentColor;
-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
transition: transform 0.45s var(--ease);
}
.text-link:hover, .btn--text:hover { text-decoration-color: var(--c-gold); }
.text-link:hover::after { transform: translateX(4px); }
.btn.btn--text { min-height: 0; padding: 0; border: 0; background: none; clip-path: none; color: var(--c-ink); }
.btn.btn--text:hover { background: none; color: var(--c-ink); }
[dir="rtl"] :is(.text-link, .wp-block-button__link, .btn)::after { transform: scaleX(-1); }
[dir="rtl"] :is(.text-link, .wp-block-button__link, .btn):hover::after { transform: scaleX(-1) translateX(4px); }
/* Sizes */
.btn--sm { --chamfer: 0.45rem; min-height: 2.6rem; padding: 0.7rem 1.15rem; gap: 0.6rem; font-size: 0.72rem; }
.btn--lg { --chamfer: 0.75rem; min-height: 4rem; padding: 1.3rem 2.75rem; gap: 1.1rem; font-size: 0.9rem; letter-spacing: 0.2em; }
/* --edge animates with the fill where the browser supports typed properties */
@property --edge { syntax: ""; inherits: true; initial-value: #a4222a; }
.wp-block-buttons { gap: 1rem 1.25rem; }
/* ==========================================================================
5. HEADER
Solid by default. Over a cinematic first section it starts transparent
and turns solid once scrolled (html.has-overlay-header + .is-scrolled).
========================================================================== */
.site-header {
position: sticky;
inset-block-start: var(--wp-admin--admin-bar--height, 0px);
z-index: var(--z-header);
background: rgb(252 252 250 / 0.92);
backdrop-filter: blur(12px) saturate(1.1);
border-block-end: 0; /* no line under the bar (client, 15 October) */
transition: background-color 0.4s var(--ease);
}
.has-overlay-header .site-header {
position: fixed; inset-inline: 0;
background: linear-gradient(to bottom, rgb(15 14 13 / 0.7), rgb(15 14 13 / 0));
backdrop-filter: none;
}
.has-overlay-header.is-scrolled .site-header {
background: rgb(252 252 250 / 0.94);
backdrop-filter: blur(12px) saturate(1.1);
}
.site-header__inner {
box-sizing: border-box; max-width: var(--wide); margin-inline: auto;
padding-inline: var(--gutter); height: var(--header-h);
display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
/* Brand: the parish mark alone (its name is in the link's aria-label) */
.brand { display: inline-flex; align-items: center; flex: none; color: var(--c-ink); text-decoration: none; }
.brand__mark { display: block; width: 3.6rem; height: auto; transition: opacity var(--quick) var(--ease); }
.brand:hover .brand__mark { opacity: 0.8; }
.menu-button {
display: none; align-items: center; justify-content: center;
width: 2.9rem; height: 2.9rem; padding: 0;
border: 1px solid var(--c-hair-strong); border-radius: 0;
background: transparent; color: var(--c-ink); cursor: pointer;
transition: border-color var(--quick) var(--ease);
}
.menu-button:hover { border-color: var(--c-ink); }
.menu-button .icon { width: 1.4rem; height: 1.4rem; }
.menu-button__close { display: none; }
.menu-open .menu-button__open { display: none; }
.menu-open .menu-button__close { display: block; }
/* The bar: mark, the menu centred, Mass times on the end side */
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__list { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.nav__link {
position: relative;
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.7rem 0.6rem;
border: 0; background: none; cursor: pointer;
font: inherit; font-family: var(--f-sans); font-size: 0.8125rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--c-ink); text-decoration: none; white-space: nowrap;
}
/* A hairline under the word on hover, while open, and for the current section */
.nav__link::before {
content: ""; position: absolute; inset-inline: 0.6rem; inset-block-end: 0.3rem; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform 0.4s var(--ease);
}
.nav__link:hover::before, .nav__toggle[aria-expanded="true"]::before, .nav__item.is-current > .nav__link::before { transform: scaleX(1); }
.nav__toggle::before { inset-inline-end: calc(0.6rem + 1.25rem); }
.nav__caret { width: 0.85rem; height: 0.85rem; transition: transform 0.4s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
/* Panels (shared) */
.nav__panel { display: none; }
.nav__toggle[aria-expanded="true"] + .nav__panel { display: block; }
.nav__panel ul { margin: 0; padding: 0; list-style: none; }
.nav__panel a { color: var(--c-ink); text-decoration: none; }
.nav__heading { margin: 0; font-family: var(--f-display); font-size: 2.1rem; font-weight: var(--fw-display); line-height: 1.1; letter-spacing: var(--ls-display); color: var(--c-ink); }
.nav__panel .nav__overview {
display: inline-flex; align-items: center; gap: 0.6rem; margin-block-start: 1.5rem;
font-family: var(--f-sans); font-size: var(--btn-size); font-weight: var(--fw-strong); letter-spacing: var(--ls-button); text-transform: uppercase;
text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.6em;
transition: text-decoration-color 0.45s var(--ease);
}
.nav__panel .nav__overview:hover { text-decoration-color: var(--c-gold); color: var(--c-ink); }
.nav__overview .icon { width: 1.05rem; height: 1.05rem; transition: transform 0.45s var(--ease); }
.nav__overview:hover .icon { transform: translateX(4px); }
.nav__group-title { display: block; margin: 0 0 1rem; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
a.nav__group-title:hover { color: var(--c-ink); }
/* Page links: an arrow steps in on hover */
.nav__plain a, .nav__group li a {
position: relative; display: inline-block;
padding-block: 0.55rem; font-size: 1.0625rem; line-height: 1.35;
transition: color var(--quick) var(--ease);
}
.nav__plain a::after, .nav__group li a::after {
content: ""; position: absolute; inset-inline-start: calc(100% + 0.55rem); inset-block-start: calc(50% - 0.5rem); /* beside the words, taking no room */
width: 1rem; height: 1rem; background: currentColor;
-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.nav__plain a:hover, .nav__group li a:hover, .nav__panel a[aria-current="page"] { color: var(--c-crimson-text); }
.nav__plain a:hover::after, .nav__group li a:hover::after, .nav__panel a[aria-current="page"]::after { opacity: 1; transform: none; }
[dir="rtl"] :is(.nav__plain, .nav__group) a::after { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] :is(.nav__plain, .nav__group) a:hover::after { transform: scaleX(-1); }
/* Churches & Shrines: arch-topped pictures, as the arcade on the home page */
.nav__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 2rem); }
.nav__tile { display: grid; gap: 0.9rem; }
.nav__tile-img { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 100vmax 100vmax 0 0; background: var(--c-band); }
.nav__tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--img-grow-time) var(--img-grow-ease); }
.nav__tile:hover .nav__tile-img img { transform: scale(var(--img-grow)); }
.nav__tile-name { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.25; text-align: center; text-wrap: balance; }
/* Apostolic Organizations: the emblems on framed plaques, as on the page covers */
.nav__tiles--emblems { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav__emblem {
display: grid; place-items: center; aspect-ratio: 1;
background: var(--c-band); color: var(--c-crimson);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.5rem;
transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.nav__emblem .tessera__icon {
position: static; inset: auto; z-index: auto; filter: none;
width: 46%; height: 46%; color: inherit; stroke-width: 1.8;
transition: transform var(--img-grow-time) var(--img-grow-ease);
}
.nav__tile--emblem:hover .nav__emblem, .nav__tile--emblem[aria-current="page"] .nav__emblem { background: var(--c-paper); border-color: var(--c-crimson); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.nav__tile--emblem:hover .nav__emblem .tessera__icon { transform: scale(1.08); }
}
.nav__tile--emblem .nav__tile-name { font-size: 1rem; }
/* Mass times: the small primary button (section 4) with its clock, no arrow */
.nav__mass::after { content: none; }
.nav__mass .icon { width: 1.05rem; height: 1.05rem; }
/* Desktop: a full-width paper panel under the bar. The section's name on the
start side, its pages in roomy columns on the end side. */
@media (min-width: 80rem) {
.site-header__inner > .nav { flex: 1; }
.nav__list { margin-inline: auto; }
.nav__intro { display: block; }
/* A centred 1400px box under the bar, framed like the site's panels */
.nav__panel {
position: absolute; inset-inline: 0; inset-block-start: 100%;
box-sizing: border-box; width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto;
background: var(--c-paper);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.75rem;
box-shadow: 0 40px 80px -36px rgb(30 29 27 / 0.32);
}
.nav__panel-inner {
box-sizing: border-box; margin-inline: auto;
padding: clamp(2.75rem, 4vw, 3.75rem) clamp(2.5rem, 4vw, 4rem) clamp(3rem, 4.5vw, 4.25rem);
display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 2rem clamp(3rem, 5vw, 5rem); align-items: start;
}
.nav__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); align-items: start; }
.nav__plain { columns: 2 14rem; column-gap: clamp(2rem, 4vw, 4rem); }
.nav__plain li, .nav__group li { break-inside: avoid; }
.nav__panel--groups .nav__body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 3vw, 3rem); }
/* Group titles share one row and the lists start together, however the titles wrap */
.nav__panel--groups .nav__body { grid-template-rows: auto auto; }
.nav__panel--groups .nav__group { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 2; } /* definite rows, so everything keeps the menu order */
.nav__panel--groups .nav__group-title { align-self: end; }
.nav__panel--groups .nav__plain { columns: 1; grid-row: 2; }
.nav__group:has(li:nth-child(7)) { grid-column: span 2; }
.nav__group:has(li:nth-child(7)) ul { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
/* A section with a single group (Miscellaneous: the prayers, client 16 October): its list in two columns */
.nav__panel--groups .nav__group:only-child { grid-column: 1 / -1; max-width: 44rem; }
.nav__group:only-child ul { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.nav__panel--tiles .nav__body { display: block; }
@media (prefers-reduced-motion: no-preference) {
.nav__toggle[aria-expanded="true"] + .nav__panel { animation: stjm-drop 0.35s var(--ease); }
}
}
@keyframes stjm-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 80rem) and (max-width: 90rem) {
.nav { gap: 1rem; }
.nav__list { gap: 0.1rem; }
.nav__link { padding-inline: 0.45rem; letter-spacing: 0.1em; }
.nav__link::before { inset-inline: 0.45rem; }
.nav__toggle::before { inset-inline-end: calc(0.45rem + 1.25rem); }
}
/* Below desktop: a full sheet under the bar. Sections in Baskerville rows,
their pages opening beneath, Mass times at the foot. */
@media (max-width: 79.999rem) {
.menu-button { display: inline-flex; }
/* the header's blur would make it the containing block of the fixed sheet */
.menu-open .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--c-paper) !important; }
.nav {
display: none;
position: fixed; inset: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0 0; z-index: var(--z-header);
flex-direction: column; align-items: stretch; gap: 2.25rem;
padding: 0.5rem var(--gutter) 2.5rem;
background: var(--c-paper); overflow-y: auto; overscroll-behavior: contain;
}
.menu-open .nav { display: flex; }
.menu-open body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
.menu-open .nav { animation: stjm-sheet 0.35s var(--ease); }
}
.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav__item { border-block-end: 1px solid var(--c-hair); }
.nav__link { width: 100%; justify-content: space-between; padding: 1.2rem 0; font-family: var(--f-display); font-size: 1.6rem; letter-spacing: var(--ls-heading); text-transform: none; white-space: normal; text-align: start; }
.nav__link::before { display: none; }
.nav__caret { width: 1.15rem; height: 1.15rem; }
.nav__intro { display: block; padding-block-end: 0.25rem; }
.nav__heading { display: none; }
.nav__panel .nav__overview { margin-block-start: 0; }
.nav__panel-inner { display: grid; gap: 1.5rem; padding: 0 0 1.75rem; }
.nav__body { display: grid; gap: 1.5rem; }
.nav__plain a, .nav__group li a { padding-block: 0.5rem; }
/* The shrines as a plain list here: no room for pictures */
.nav__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.nav__tile { display: block; padding-block: 0.5rem; font-size: 1.0625rem; }
.nav__tile-img, .nav__emblem { display: none; }
.nav__tile-name { font-family: var(--f-sans); font-size: 1.0625rem; text-align: start; }
.nav__tile:hover, .nav__tile[aria-current="page"] { color: var(--c-crimson-text); }
.nav__mass { width: 100%; min-height: 3.5rem; font-size: 0.8125rem; margin-block-start: auto; }
}
@keyframes stjm-sheet { from { opacity: 0; } to { opacity: 1; } }
/* ==========================================================================
6. CINEMATIC SECTION (core/cover, block style "Cinematic")
Full-bleed photograph, scrim from the bottom, text set low.
Add "is-hero" for the first screen. Bottom-right position mirrors the text.
========================================================================== */
.wp-block-cover.is-style-cinematic {
min-height: min(94svh, 62rem) !important;
padding: 0;
align-items: flex-end;
overflow: hidden;
}
.wp-block-cover.is-style-cinematic > .wp-block-cover__background {
opacity: 1 !important;
background: linear-gradient(to top, rgb(15 14 13 / 0.94) 0%, rgb(15 14 13 / 0.62) 32%, rgb(15 14 13 / 0.12) 68%, rgb(15 14 13 / 0.4) 100%) !important;
}
.wp-block-cover.is-style-cinematic > .wp-block-cover__inner-container {
box-sizing: border-box; width: 100%; max-width: var(--wide); margin-inline: auto;
padding: 0 var(--gutter) clamp(3rem, 8vw, 6.5rem);
color: var(--c-ink);
}
.wp-block-cover.is-style-cinematic .wp-block-cover__inner-container > * { max-width: 40rem; }
.wp-block-cover.is-style-cinematic.is-position-bottom-right .wp-block-cover__inner-container > * { margin-inline-start: auto; text-align: end; }
.wp-block-cover.is-style-cinematic.is-position-bottom-right .wp-block-buttons { justify-content: flex-end; }
.wp-block-cover.is-style-cinematic h1, .wp-block-cover.is-style-cinematic h2 { margin: 0 0 1.25rem; }
.wp-block-cover.is-style-cinematic p:not(.label) { color: rgb(237 231 220 / 0.86); max-width: 36rem; }
.wp-block-cover.is-style-cinematic .label { color: rgb(237 231 220 / 0.82); text-shadow: 0 1px 12px rgb(0 0 0 / 0.5); }
.wp-block-cover.is-style-cinematic .wp-block-buttons { margin-block-start: 2rem; }
.wp-block-cover.is-style-cinematic + .wp-block-cover.is-style-cinematic { border-block-start: 1px solid var(--c-hair); }
.wp-block-cover.is-style-cinematic.is-hero { min-height: 100svh !important; }
.wp-block-cover.is-style-cinematic.is-hero h1 { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.02em; max-width: 12ch; }
/* ==========================================================================
7. TILES (core/cover, block style "Tile") inside a .tiles grid
========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-hair); }
.tiles > * { margin: 0 !important; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-cover.is-style-tile {
position: relative; min-height: clamp(20rem, 34vw, 30rem) !important;
padding: clamp(1.25rem, 2.5vw, 2rem); align-items: flex-end; overflow: hidden;
}
.wp-block-cover.is-style-tile > .wp-block-cover__background {
opacity: 1 !important;
background: linear-gradient(to top, rgb(15 14 13 / 0.9), rgb(15 14 13 / 0.15) 55%, rgb(15 14 13 / 0.05)) !important;
}
.wp-block-cover.is-style-tile .wp-block-cover__image-background { transition: transform var(--img-grow-time) var(--img-grow-ease); }
.wp-block-cover.is-style-tile .wp-block-cover__inner-container { width: 100%; }
.wp-block-cover.is-style-tile h3 { margin: 0 0 0.35rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); }
.wp-block-cover.is-style-tile h3 a { color: var(--c-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.75rem; }
.wp-block-cover.is-style-tile h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole tile is the link */
.wp-block-cover.is-style-tile h3 a::after {
content: ""; width: 0.7em; height: 0.7em; background: currentColor;
-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
transition: transform var(--quick) var(--ease);
}
.wp-block-cover.is-style-tile:hover h3 a::after { transform: translateX(5px); }
.wp-block-cover.is-style-tile p { margin: 0; font-size: var(--fs-small); color: rgb(237 231 220 / 0.8); max-width: 34ch; }
@media (max-width: 47.999rem) { .tiles, .tiles--3 { grid-template-columns: 1fr; } }
/* ==========================================================================
8. LINK ROW: two or three destinations divided by hairlines
========================================================================== */
.link-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); border-block: 1px solid var(--c-hair); }
.link-row > * { position: relative; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem); margin: 0 !important; transition: background-color var(--quick) var(--ease); }
.link-row > * + * { border-inline-start: 1px solid var(--c-hair); }
.link-row > *:hover { background: var(--c-band); }
.link-row h3 { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); }
.link-row h3 a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--c-ink); text-decoration: none; }
.link-row h3 a::before { content: ""; position: absolute; inset: 0; }
.link-row h3 a::after { content: ""; flex: none; width: 0.75em; height: 0.75em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform var(--quick) var(--ease); }
.link-row > *:hover h3 a::after { transform: translateX(5px); }
.link-row p { margin: 0; color: var(--c-muted); font-size: 0.9375rem; max-width: 40ch; }
@media (max-width: 47.999rem) { .link-row > * + * { border-inline-start: 0; border-block-start: 1px solid var(--c-hair); } }
/* ==========================================================================
9. SECTIONS (non-photo): same dark family, two depths
========================================================================== */
.section { padding-block: var(--section) calc(var(--section) * 1.08); }
.section--nave { background: var(--c-band); }
.section-head { max-width: 46rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.section-head h2, .section-title { margin: 0 0 1rem; font-size: var(--fs-h2); }
.section-head p, .section-intro { margin: 0 0 2.5rem; color: var(--c-muted); font-size: 1.0625rem; max-width: 44ch; }
/* ==========================================================================
10. PAGE INTRO (inner pages)
Cinematic when the featured image is large enough, otherwise split with the arch.
========================================================================== */
.site-main { padding-block-end: var(--section); }
.intro-wrap { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.intro { display: grid; gap: 2rem; align-items: end; }
.intro--image { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 7vw, 6rem); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: 0 0 2rem; padding: 0; list-style: none; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.crumbs li + li::before { content: ""; display: inline-block; width: 1.2rem; height: 1px; margin-inline-end: 0.7rem; vertical-align: middle; background: var(--c-hair-strong); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs [aria-current] { color: var(--c-ink); }
.intro__title { margin: 0; font-size: var(--fs-h1); max-width: 16ch; }
.intro__lede { margin: 1.5rem 0 0; color: var(--c-muted); }
.intro__media { margin: 0; }
.intro__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro-wrap--centered .intro { justify-items: center; text-align: center; grid-template-columns: 1fr; }
.intro-wrap--centered .crumbs ol { justify-content: center; }
.intro-wrap--centered .intro__title, .intro-wrap--centered .intro__lede { margin-inline: auto; }
@media (max-width: 47.999rem) {
.intro--image { grid-template-columns: 1fr; }
.intro__media { max-width: 22rem; }
}
.intro-wrap:has(.intro--cinematic) { padding: 0; }
.intro--cinematic {
position: relative; display: flex; align-items: flex-end;
min-height: min(80svh, 48rem);
margin-inline: calc(50% - 50vw);
padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 6vw, 5rem);
overflow: hidden; isolation: isolate;
}
.intro--cinematic .intro__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.intro--cinematic .intro__bg img { width: 100%; height: 100%; object-fit: cover; }
.intro--cinematic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(15 14 13 / 1) 0%, rgb(15 14 13 / 0.6) 40%, rgb(15 14 13 / 0.2) 75%, rgb(15 14 13 / 0.55) 100%); }
.intro--cinematic .intro__text { box-sizing: border-box; width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.intro--cinematic .intro__lede { color: rgb(237 231 220 / 0.86); }
/* The arch: Romanesque round top from the parish logo. A signature, used sparingly. */
.arch img, .is-style-arch img { border-radius: 100vmax 100vmax 0 0; }
/* ==========================================================================
11. READING CONTENT
========================================================================== */
.entry > :where(h2, h3) { margin-block: 3.5rem 1.25rem; }
.entry > h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); }
.entry > h3 { font-size: 1.6rem; }
.entry p, .entry li { color: var(--c-ink); }
.entry .lead { font-family: var(--f-display); font-size: var(--fs-lede); line-height: 1.4; color: var(--c-ink); }
.entry ol, .entry ul { padding-inline-start: 1.25rem; }
.entry li + li { margin-block-start: 0.6rem; }
.entry li::marker { color: var(--c-crimson-text); }
.entry a:not(.wp-block-button__link, .btn):not(.text-link, .watch__link, .ft__more) { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-crimson-text); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.entry a:not(.wp-block-button__link, .btn):not(.text-link, .watch__link, .ft__more):hover { color: var(--c-crimson-text); }
.entry figure { margin-block: 2.5rem; }
.wp-element-caption, .entry .wp-block-image figcaption { margin-block-start: 0.75rem; font-size: var(--fs-small); color: var(--c-muted); }
.entry--wide { --wp--style--global--content-size: 54rem; }
.wp-block-quote { position: relative; margin-inline: 0; padding: 0.25rem 0 0.25rem 2.25rem; border: 0; font-family: var(--f-display); font-style: italic; font-size: 1.55rem; line-height: 1.5; }
.wp-block-quote:not(.is-style-document)::before { content: "\201C"; position: absolute; inset-inline-start: 0; inset-block-start: -0.12em; font-family: var(--f-display); font-style: normal; font-size: 3.2em; line-height: 1; color: var(--c-gold); }
.wp-block-quote p { margin: 0; color: var(--c-ink) !important; }
.wp-block-quote p + p { margin-block-start: 1em; }
.wp-block-quote cite { display: block; margin-block-start: 1rem; font-family: var(--f-sans); font-size: var(--fs-label); font-style: normal; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.wp-block-quote.is-style-document {
padding: clamp(1.75rem, 4vw, 3rem);
background: var(--c-raised);
border: 1px solid var(--c-hair-strong);
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
font-style: normal; font-size: 1.4rem; line-height: 1.6;
}
.wp-block-list.is-style-checklist { list-style: none; padding-inline-start: 0; display: grid; gap: 0; border-block-start: 1px solid var(--c-hair); }
.wp-block-list.is-style-checklist li { position: relative; margin: 0; padding: 1rem 0 1rem 2.5rem; border-block-end: 1px solid var(--c-hair); }
.wp-block-list.is-style-checklist li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.35rem; width: 1rem; height: 1rem; border: 1px solid var(--c-crimson-text); }
.wp-block-group.is-style-panel { padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--c-band); border: 1px solid var(--c-hair); }
.wp-block-group.is-style-panel > :first-child { margin-block-start: 0; }
.wp-block-group.is-style-panel > :last-child { margin-block-end: 0; }
.wp-block-group.is-style-panel h2, .wp-block-group.is-style-panel h3 { font-size: 1.75rem; margin-block: 0 0.75rem; }
.wp-block-gallery.has-nested-images { gap: 1px; }
.wp-block-gallery.has-nested-images figure.wp-block-image { overflow: hidden; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.92); transition: transform var(--img-grow-time) var(--img-grow-ease), filter 0.6s var(--img-grow-ease); }
.entry--prayer { --wp--style--global--content-size: 40rem; }
.entry--prayer > p { font-family: var(--f-display); font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.9rem); line-height: 1.55; color: var(--c-ink); }
.entry--prayer > p:first-child::first-letter { float: inline-start; font-size: 3.4em; line-height: 0.82; padding-inline-end: 0.08em; padding-block-start: 0.08em; color: var(--c-crimson-text); }
.timeline { list-style: none; margin-block: 0.5rem 3rem; padding: 0; border-block-start: 1px solid var(--c-hair); }
.timeline li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; margin: 0; padding: 1.1rem 0; border-block-end: 1px solid var(--c-hair); align-items: baseline; }
.timeline__year { font-family: var(--f-display); font-size: 1.65rem; font-weight: 400; line-height: 1; color: var(--c-ink); font-variant-numeric: lining-nums; }
.timeline__text { color: var(--c-muted); }
@media (max-width: 30rem) { .timeline li { grid-template-columns: 1fr; gap: 0.25rem; } }
/* ==========================================================================
12. MASS TIMES
========================================================================== */
.time { display: inline-block; margin: 0.15rem 0.35rem 0.15rem 0; padding: 0.2rem 0.6rem; border: 1px solid var(--c-hair-strong); color: var(--c-ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); }
.today__head { display: flex; align-items: center; gap: 1rem; }
.today__icon { width: 2.25rem; height: 2.25rem; color: var(--c-crimson-text); }
.today__title { margin: 0; font-size: 1.9rem; }
.today__day { margin: 0.2rem 0 0; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.today__list { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0; padding: 0; list-style: none; }
.today__row { display: flex; flex-direction: column; gap: 0.4rem; }
.today__church { color: var(--c-ink); font-weight: 500; text-decoration: none; }
.today__church:hover { color: var(--c-crimson-text); }
.today__empty { margin: 0; color: var(--c-muted); }
.today__more, .glance__link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.today__more .icon, .glance__link .icon { transition: transform var(--quick) var(--ease); }
.today__more:hover .icon, .glance__link:hover .icon { transform: translateX(4px); }
@media (max-width: 63.999rem) { .today { grid-template-columns: 1fr; } }
.schedule { margin-block: 1.5rem 3rem; }
.schedule__table { width: 100%; border-collapse: collapse; }
.schedule__table th, .schedule__table td { padding: 1rem 0.85rem; text-align: start; vertical-align: top; }
.schedule__table thead th { font-family: var(--f-display); font-size: 1.3rem; font-weight: 400; line-height: 1.15; border-block-end: 1px solid var(--c-hair-strong); }
.schedule__table thead a { color: var(--c-ink); text-decoration: none; }
.schedule__table thead a:hover { color: var(--c-crimson-text); }
.schedule__table tbody tr { border-block-end: 1px solid var(--c-hair); }
.schedule__table tbody th { font-weight: 500; white-space: nowrap; }
.schedule__table tr.is-today { background: var(--c-band); }
.schedule__today { display: inline-block; margin-inline-start: 0.5rem; padding: 0.1rem 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-crimson-text); border: 1px solid currentColor; vertical-align: 0.15em; line-height: 1.5; }
.schedule__none { color: var(--c-hair-strong); }
@media (max-width: 47.999rem) {
.schedule__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.schedule__table, .schedule__table tbody, .schedule__table tr, .schedule__table th, .schedule__table td { display: block; }
.schedule__table tbody tr { padding: 1.1rem 0.25rem; }
.schedule__table tbody th { padding: 0 0 0.5rem; font-family: var(--f-display); font-size: 1.5rem; }
.schedule__table td { padding: 0.3rem 0; }
.schedule__table td.is-empty { display: none; }
.schedule__table td::before { content: attr(data-church); display: block; font-size: var(--fs-small); color: var(--c-muted); }
.schedule__table tr.is-today { padding-inline: 0.85rem; }
}
.glance { margin-block: 0 3rem; padding: clamp(1.5rem, 3.5vw, 2.25rem); background: var(--c-band); border: 1px solid var(--c-hair); }
.glance__title { margin: 0 0 1.5rem; font-size: 1.75rem; }
.glance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2.5rem; margin: 0; }
.glance dt, .contact dt { display: flex; align-items: center; gap: 0.5rem; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.glance dt .icon, .contact dt .icon { color: var(--c-crimson-text); }
.glance dd { margin: 0.5rem 0 0; }
.glance__masses { margin: 0; padding: 0; list-style: none; }
.glance__day { display: inline-block; min-width: 5.5rem; font-weight: 500; }
.glance__link { margin-block-start: 1.5rem; }
/* ==========================================================================
13. CONTACT, BANK, FORMS
========================================================================== */
.contact { display: grid; gap: 1.5rem; margin: 0; }
.contact dd { margin: 0.4rem 0 0; }
.contact a { color: var(--c-ink); text-decoration: none; }
.contact a:hover { color: var(--c-crimson-text); }
.contact__phones { display: flex; flex-direction: column; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.contact--compact { gap: 1.1rem; font-size: 0.9375rem; }
.bank { display: grid; margin: 0; border: 1px solid var(--c-hair); background: var(--c-band); }
.bank__row { padding: 1.1rem 1.4rem; }
.bank__row + .bank__row { border-block-start: 1px solid var(--c-hair); }
.bank dt { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.bank dd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.35rem 0 0; }
.bank__value { font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; word-break: break-all; }
.copy { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; padding: 0.4rem 0.75rem; background: transparent; color: var(--c-ink); border: 1px solid var(--c-hair-strong); font: inherit; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.copy:hover { border-color: var(--c-ink); }
.copy__done { display: none; color: var(--c-crimson-text); }
.copy.is-copied .copy__icon { display: none; }
.copy.is-copied .copy__done { display: inline; }
.wpcf7 form { display: grid; gap: 1.5rem; }
.wpcf7 label { display: grid; gap: 0.5rem; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.wpcf7 :where(input[type="text"], input[type="email"], input[type="tel"], textarea), .wp-block-search__input {
box-sizing: border-box; width: 100%; padding: 0.95rem 1rem;
background: var(--c-band); color: var(--c-ink);
border: 1px solid #6f675d; border-radius: 0;
font: inherit; font-family: var(--f-sans); font-size: 1rem; letter-spacing: 0; text-transform: none;
}
.wpcf7 textarea { min-height: 10rem; resize: vertical; }
.wpcf7 :where(input, textarea):focus { outline: 2px solid var(--c-ink); outline-offset: 1px; border-color: var(--c-ink); }
.wpcf7-submit { justify-self: start; -webkit-appearance: none; appearance: none; }
.wpcf7-not-valid-tip { margin-block-start: 0.35rem; color: var(--c-crimson-text); font-family: var(--f-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 0.9rem 1.1rem; border: 1px solid var(--c-hair-strong); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--c-crimson-text); }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7-form-control-wrap { display: block; }
.map-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-band); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(0.95); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-grid h2, .contact-form h2 { margin-block-start: 0; }
.contact-form { margin-block-start: var(--section); padding-block-start: 3rem; border-block-start: 1px solid var(--c-hair); }
@media (max-width: 47.999rem) { .contact-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
14. MORE IN THIS SECTION
========================================================================== */
/* More in this section (stjm/section-nav): a limestone band before the footer.
Two modes from the same markup (inc/blocks.php):
- .more--photos (every sibling page has a photograph, six or fewer): tall
panels side by side like the bays of a cloister; the one under the
pointer widens, its photograph grows and a gold frame is drawn inside.
- .more--doors (some pages have no photograph): paper tiles, each with a
small lancet doorway and a cross; the frame appears on hover. */
.site-main:has(.more) { padding-block-end: 0; }
.more-wrap { margin-block-start: var(--section); }
.site-main--history .more-wrap { margin-block-start: 0; }
.more {
position: relative; isolation: isolate;
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.more::before { /* the band runs edge to edge behind the wide column */
content: ""; position: absolute; z-index: -1;
inset-block: 0; inset-inline: calc(50% - 50vw); /* a background only: the page clips the scrollbar overhang */
background: var(--c-band);
}
.more__title {
margin: 0 0 clamp(2rem, 4vw, 3rem);
font-family: var(--f-display); font-weight: 400;
font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
color: var(--c-ink);
}
.more__list { margin: 0; padding: 0; list-style: none; }
.more__item { position: relative; display: flex; text-decoration: none; color: var(--c-ink); }
.more__item:focus-visible { outline: 2px solid var(--c-crimson); outline-offset: 3px; }
.more__name { font-family: var(--f-display); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.more__go .icon { display: block; width: 1.35rem; height: 1.35rem; transition: transform 0.5s var(--ease); }
.more__item:hover .more__go .icon, .more__item:focus-visible .more__go .icon { transform: translateX(5px); }
/* ---- Photographs: the cloister bays ---- */
.more--photos .more__list {
display: flex; gap: clamp(0.5rem, 1vw, 0.9rem);
height: clamp(24rem, 34vw, 31rem);
}
.more--photos .more__list > li { flex: 1 1 0; min-width: 0; transition: flex-grow 0.9s var(--ease); }
@media (hover: hover) {
.more--photos .more__list > li:hover, .more--photos .more__list > li:focus-within { flex-grow: 1.85; }
}
.more--photos .more__item { height: 100%; overflow: hidden; align-items: flex-end; color: var(--c-on-dark); background: #2a2724; }
.more__media { position: absolute; inset: 0; }
.more__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--img-grow-time) var(--img-grow-ease), filter 0.9s var(--ease); filter: saturate(0.88); }
.more--photos .more__item:hover .more__media img { transform: scale(var(--img-grow)); filter: saturate(1); }
.more--photos .more__item::after { /* shade under the name */
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgb(20 19 18 / 0.85) 0%, rgb(20 19 18 / 0.35) 38%, rgb(20 19 18 / 0) 62%);
}
.more--photos .more__item::before { /* the inner frame, drawn on hover */
content: ""; position: absolute; inset: 0.7rem; z-index: 2; pointer-events: none;
border: 1px solid rgb(201 173 114 / 0.75);
opacity: 0; transform: scale(1.02);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.more--photos .more__item:hover::before, .more--photos .more__item:focus-visible::before { opacity: 1; transform: none; }
.more--photos .more__name {
position: relative; z-index: 1;
padding: clamp(1.25rem, 2vw, 1.75rem); padding-inline-end: 3.5rem;
font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.more--photos .more__go { position: absolute; z-index: 1; inset-block-end: clamp(1.4rem, 2.1vw, 1.9rem); inset-inline-end: clamp(1.25rem, 2vw, 1.75rem); color: var(--c-on-dark); }
/* ---- No photographs: doorways ---- */
.more--doors .more__list { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.more--doors .more__list > li { flex: 1 1 15rem; } /* the last row stretches: no empty cells */
.more--doors .more__item {
height: 100%; box-sizing: border-box; min-height: 12.5rem;
flex-direction: column; justify-content: space-between; gap: 1.75rem;
padding: clamp(1.5rem, 2.5vw, 2rem);
background: var(--c-paper);
border: 1px solid var(--c-hair);
outline: 1px solid transparent; outline-offset: -0.55rem;
transition: outline-color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.more--doors .more__item:hover { outline-color: var(--c-gold-line); border-color: var(--c-hair-strong); }
.more__door {
position: relative; display: grid; place-items: center;
width: 2.4rem; height: 3.3rem; color: var(--c-crimson);
}
.more__door::before { /* a small lancet doorway */
content: ""; position: absolute; inset: 0; background: var(--c-gold);
-webkit-mask: var(--lancet-line) center / 100% 100% no-repeat; mask: var(--lancet-line) center / 100% 100% no-repeat;
}
.more__door .icon { width: 1.1rem; height: 1.1rem; margin-block-start: 0.6rem; }
.more--doors .more__name { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); padding-inline-end: 2rem; }
.more--doors .more__go { position: absolute; inset-block-end: clamp(1.5rem, 2.5vw, 2rem); inset-inline-end: clamp(1.5rem, 2.5vw, 2rem); color: var(--c-muted); transition: color 0.4s var(--ease); }
.more--doors .more__item:hover .more__name, .more--doors .more__item:hover .more__go { color: var(--c-crimson-text); }
/* ---- Phones and small tablets: the bays become a sideways row ---- */
@media (max-width: 47.999rem) {
.more--photos .more__list {
height: auto; display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 17rem);
overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
scrollbar-width: none; padding-block-end: 0.25rem;
margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.more--photos .more__list::-webkit-scrollbar { display: none; }
.more--photos .more__list > li { scroll-snap-align: start; aspect-ratio: 3 / 4; }
.more--doors .more__item { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.25rem; }
.more--doors .more__go { position: static; margin-inline-start: auto; }
.more--doors .more__name { padding-inline-end: 0; }
}
/* ==========================================================================
15. FOOTER: the crimson band
========================================================================== */
/* Floating "Mass times", shown after the first screen */
.mass-pill { /* the small primary button (section 4), fixed in the corner after the first screen */
position: fixed; inset-inline-end: clamp(1rem, 3vw, 2rem); inset-block-end: clamp(1rem, 3vw, 2rem); z-index: var(--z-pill);
min-height: 3rem;
opacity: 0; transform: translateY(12px); pointer-events: none;
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), --edge 0.4s var(--ease);
}
.mass-pill::after { content: none; }
.mass-pill:hover { --btn-hover-c: var(--c-crimson); background-color: rgb(252 252 250 / 0.94); }
.is-scrolled-far .mass-pill { opacity: 1; transform: none; pointer-events: auto; }
/* ==========================================================================
16. HOME (v1 compositions, restyled; recomposed in the next phase)
========================================================================== */
.site-main--home { padding-block-end: 0; }
.home > .alignfull { margin-block: 0; }
.home > * + * { margin-block-start: 0; }
.home-section { padding-block: var(--section) calc(var(--section) * 1.08); }
.home-hero { padding-block: clamp(3rem, 7vw, 6rem); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.home-hero h1 { margin: 0; font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.02em; max-width: 11ch; }
.home-hero__lede { margin: 1.75rem 0 2.25rem; color: var(--c-muted); }
.home-hero__text > * + * { margin-block-start: 0; }
.home-hero__media { margin: 0; }
.home-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: min(78vh, 46rem); object-fit: cover; border-radius: 100vmax 100vmax 0 0; }
@media (max-width: 47.999rem) { .home-hero__grid { grid-template-columns: 1fr; } .home-hero__media { order: -1; } }
.home-today { background: var(--c-band); padding-block: 2rem; border-block: 1px solid var(--c-hair); }
.home-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.home-story__statement { margin: 0; font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2.3vw, 3.4rem); line-height: 1.15; }
.home-story__body p { margin-block: 0 1.1rem; color: var(--c-muted); }
.dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 3rem 0 2rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--c-hair); }
.dates div { margin: 0; }
.dates dt { font-family: var(--f-display); font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.4rem); line-height: 1; color: var(--c-ink); }
.dates dd { margin: 0.6rem 0 0; font-size: 0.9375rem; color: var(--c-muted); }
@media (max-width: 47.999rem) { .home-story__grid { grid-template-columns: 1fr; } .dates { grid-template-columns: 1fr 1fr; } }
.shrines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--c-hair); border: 1px solid var(--c-hair); }
.shrine { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.5rem; background: var(--c-paper); transition: background-color var(--quick) var(--ease); }
.shrine:hover { background: var(--c-band); }
.shrine img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 100vmax 100vmax 0 0; }
.shrine h3 { margin: 0 0 0.5rem; font-size: 1.6rem; }
.shrine h3 a { color: var(--c-ink); text-decoration: none; }
.shrine h3 a::after { content: ""; position: absolute; inset: 0; }
.shrine p { margin: 0; font-size: 0.9375rem; color: var(--c-muted); }
.shrine .shrine__meta { margin-block-start: 0.75rem; color: var(--c-ink); font-size: var(--fs-small); }
.shrine--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.shrine--lead img { aspect-ratio: 16 / 10; border-radius: 0; }
.shrine--lead h3 { font-size: var(--fs-h3); }
@media (max-width: 63.999rem) { .shrines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.999rem) { .shrines { grid-template-columns: 1fr; } .shrine--lead { grid-template-columns: 1fr; } }
.life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(2rem, 4vw, 4rem); }
.life__group h3 { margin: 0 0 1.25rem; font-size: 1.9rem; }
.life__group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.life__group a { color: var(--c-ink); font-weight: 500; text-decoration: none; }
.life__group a:hover { color: var(--c-crimson-text); }
.life__group li span { display: block; font-size: 0.9375rem; color: var(--c-muted); }
@media (max-width: 63.999rem) { .life { grid-template-columns: 1fr 1fr; } }
@media (max-width: 47.999rem) { .life { grid-template-columns: 1fr; } }
.orgs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 23rem); gap: 1px; margin: 0; padding: 0 0 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--c-hair-strong) transparent; }
.org { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--c-band); }
.org img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.org__mark { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--c-raised); }
.org__mark img { width: 4rem; height: auto; aspect-ratio: auto; opacity: 0.75; }
.org__body { padding: 1.5rem; }
.org h3 { margin: 0 0 0.6rem; font-size: 1.55rem; }
.org h3 a { color: var(--c-ink); text-decoration: none; }
.org h3 a::after { content: ""; position: absolute; inset: 0; }
.org p { margin: 0; font-size: 0.9375rem; color: var(--c-muted); }
.home-prayer { background: var(--c-band); text-align: center; }
.home-prayer__text { margin: 0 auto; max-width: 30ch; font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1.2; }
.home-prayer__source { margin: 2rem 0 0; }
.home-prayer__source a { color: var(--c-muted); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.org-section { padding-block: 3rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.org-section + .org-section { border-block-start: 1px solid var(--c-hair); }
.org-section > h2 { margin-block-start: 0; }
.org-section h3 { font-size: 1.5rem; margin-block: 2rem 0.6rem; }
.org-section__image img { width: 100%; max-height: 26rem; object-fit: cover; }
.archive-photo img { width: 15.5rem; max-width: 100%; filter: grayscale(1) contrast(1.05); }
/* ==========================================================================
17. STYLE GUIDE page helpers
========================================================================== */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1px; background: var(--c-hair); border: 1px solid var(--c-hair); }
.sg-swatch { background: var(--c-paper); padding: 0 0 1rem; font-size: var(--fs-small); }
.sg-swatch i { display: block; height: 6rem; margin-block-end: 0.9rem; }
.sg-swatch b, .sg-swatch span { display: block; padding-inline: 1rem; }
.sg-swatch b { font-weight: 500; }
.sg-swatch span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.sg-type { border-block-start: 1px solid var(--c-hair); }
.sg-type > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; padding-block: 1.75rem; border-block-end: 1px solid var(--c-hair); align-items: baseline; }
.sg-type small { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.5; }
.sg-type p, .sg-type h1, .sg-type h2, .sg-type h3 { margin: 0; }
@media (max-width: 47.999rem) { .sg-type > div { grid-template-columns: 1fr; gap: 0.75rem; } }
.sg-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
/* ==========================================================================
18. MISC
========================================================================== */
.notfound { padding-block: calc(var(--header-h) + 4rem) var(--section); }
.wp-block-search__inside-wrapper { gap: 0.5rem; }
.wp-block-search__button { margin: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
body::after, .site-header, .site-footer, .more-wrap, .mass-pill { display: none !important; }
body { background: #fff; color: #000; }
}
/* Canvas template: sections run edge to edge, no page intro */
.site-main--canvas { padding-block-end: 0; }
.canvas > .alignfull { margin-block: 0; }
.canvas > * + * { margin-block-start: 0; }
@media (max-width: 47.999rem) {
.wp-block-cover.is-style-cinematic.is-position-bottom-right .wp-block-cover__inner-container > * { margin-inline-start: 0; text-align: start; }
.wp-block-cover.is-style-cinematic.is-position-bottom-right .wp-block-buttons { justify-content: flex-start; }
}
/* ==========================================================================
19. HERO: full-bleed video, text bottom-left
========================================================================== */
.hero {
position: relative;
display: flex; align-items: flex-end;
min-height: 100svh;
margin-block: 0 !important;
overflow: hidden; isolation: isolate;
background: var(--c-paper);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(110% 85% at 0% 100%, rgb(15 14 13 / 0.82) 0%, rgb(15 14 13 / 0.35) 45%, rgb(15 14 13 / 0) 72%),
linear-gradient(to top, rgb(15 14 13 / 0.9) 0%, rgb(15 14 13 / 0.35) 40%, rgb(15 14 13 / 0.1) 65%, rgb(15 14 13 / 0.5) 100%);
}
.hero__content {
box-sizing: border-box; width: 100%; max-width: var(--wide); margin-inline: auto;
padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(3rem, 9vh, 6rem);
}
.hero__label, .hero__text { text-shadow: 0 1px 18px rgb(0 0 0 / 0.55); }
.hero__label {
margin: 0 0 0.75rem;
font-family: var(--f-sans); font-size: clamp(0.78rem, 0.74rem + 0.15vw, 0.875rem); font-weight: 700;
letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink);
}
.hero__title {
margin: 0; max-width: 18ch;
font-size: clamp(2.6rem, 1.5rem + 3.9vw, 5.25rem); line-height: 1.02; letter-spacing: -0.015em;
text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}
.hero__text {
margin: 1.25rem 0 0; max-width: 58ch;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); line-height: 1.6;
color: rgb(237 231 220 / 0.9);
}
.hero__button { margin-block-start: 2rem; }
.hero__toggle {
position: absolute; inset-inline-end: var(--gutter); inset-block-end: clamp(3rem, 9vh, 6rem);
display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
border: 1px solid rgb(237 231 220 / 0.45); background: rgb(15 14 13 / 0.3); color: var(--c-ink);
cursor: pointer; transition: border-color var(--quick) var(--ease), background-color var(--quick) var(--ease);
}
.hero__toggle:hover { border-color: var(--c-ink); background: rgb(15 14 13 / 0.6); }
.hero__toggle .icon { width: 1.1rem; height: 1.1rem; }
.hero__toggle-play, .hero__toggle[aria-pressed="true"] .hero__toggle-pause { display: none; }
.hero__toggle[aria-pressed="true"] .hero__toggle-play { display: block; }
@media (max-width: 47.999rem) {
.hero { min-height: 92svh; }
.hero__toggle { inset-block-start: calc(var(--header-h) + 1rem); inset-block-end: auto; }
}
/* The hero is the page's opening: no gap between it and the next band */
.home > .hero + * { margin-block-start: 0; }
/* WordPress adds the block gap between header, main and footer; the design runs them flush. */
.wp-site-blocks > * { margin-block: 0 !important; }
/* ==========================================================================
20. INVERSE SCOPE
Photographs, the crimson footer and the header floating over the hero
re-map the colour tokens, so every component inside reads light-on-dark.
========================================================================== */
.hero,
.wp-block-cover.is-style-cinematic,
.wp-block-cover.is-style-tile,
.intro--cinematic,
.site-footer,
:root:not(.menu-open) .has-overlay-header:not(.is-scrolled) .site-header {
--c-ink: var(--c-on-dark);
--c-muted: rgb(243 239 232 / 0.8);
--c-hair: rgb(243 239 232 / 0.2);
--c-hair-strong: rgb(243 239 232 / 0.55);
--c-paper: #141312;
--c-crimson-text: #f2a9ac;
--c-gold: #c9ad72;
--c-gold-line: rgb(201 173 114 / 0.6);
--btn-hover-bg: rgb(243 239 232 / 0.1);
--btn-hover-c: #fff;
color: var(--c-on-dark);
}
/* The logo is dark line art: light it up wherever the scope is dark */
.site-footer .brand__mark,
:root:not(.menu-open) .has-overlay-header:not(.is-scrolled) .site-header .brand__mark { filter: invert(1) sepia(0.12) brightness(0.96); }
/* Solid header on light pages: give dropdown panels their light surface back */
.has-overlay-header:not(.is-scrolled) .nav__panel { --c-paper: #fcfcfa; --c-band: #f3f1ec; --c-ink: #1e1d1b; --c-muted: #5c5852; --c-hair: rgb(30 29 27 / 0.14); --c-hair-strong: rgb(30 29 27 / 0.32); --c-crimson-text: #a4222a; --c-gold: #a7884e; --c-gold-line: rgb(167 136 78 / 0.55); --btn-hover-bg: rgb(30 29 27 / 0.045); --btn-hover-c: var(--c-crimson); color: var(--c-ink); }
@media (max-width: 79.999rem) {
.menu-open .site-header { background: var(--c-paper) !important; }
}
/* Header children sit on one line: no block-gap margins (they also offset the fixed mobile drawer) */
.site-header__inner > *, .site-header__inner .nav { margin: 0 !important; }
/* ==========================================================================
21. STORY: two columns. Photographs on the left (the church, with the altar
photograph overlapping its lower corner), the statement and text on the right.
Only the statement animates: its words fill with ink as it scrolls into view.
========================================================================== */
.story { padding-block: clamp(4rem, 8vw, 7rem); margin-block: 0 !important; }
.story__inner {
box-sizing: border-box; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter);
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
/* Photographs */
.story__media { position: relative; padding-block-end: clamp(3rem, 9vw, 7rem); padding-inline-end: clamp(2rem, 7vw, 6rem); }
.story__wide { margin: 0; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--c-band); }
.story__wide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.story__tall { position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 46%; margin: 0; z-index: 1; }
.story__tall-frame { border: clamp(0.4rem, 0.8vw, 0.75rem) solid var(--c-paper); border-radius: 100vmax 100vmax 0 0; overflow: hidden; background: var(--c-paper); box-shadow: 0 30px 50px -30px rgb(30 29 27 / 0.35); }
.story__tall img { display: block; width: 100%; aspect-ratio: 820 / 956; object-fit: cover; border-radius: 100vmax 100vmax 0 0; }
.story__tall figcaption { margin-block-start: 0.5rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--c-muted); text-align: end; }
/* Statement and text */
.story__statement {
margin: 0 0 1.75rem;
font-size: clamp(1.9rem, 1.25rem + 1.6vw, 2.8rem);
line-height: 1.12; letter-spacing: -0.012em;
view-timeline-name: --story-statement;
}
.story__word { color: var(--c-ink); }
.story__text p { margin: 0 0 1rem; color: var(--c-muted); max-width: 62ch; }
.story__dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0 1.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--c-hair-strong); }
.story__dates div { margin: 0; }
.story__dates dt { font-family: var(--f-display); font-size: clamp(2.3rem, 1.7rem + 1.4vw, 3.1rem); line-height: 1; color: var(--c-ink); font-variant-numeric: lining-nums; }
.story__dates dd { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--c-muted); }
@media (max-width: 63.999rem) {
.story__inner { grid-template-columns: 1fr; }
.story__media { max-width: 42rem; }
}
@media (max-width: 47.999rem) {
.story__wide { aspect-ratio: 4 / 4.3; }
.story__media { padding-inline-end: 2.5rem; padding-block-end: 4.5rem; }
.story__tall { width: 48%; }
}
/* The only motion: words fill with ink as the statement crosses the screen */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.story__word {
animation: story-ink linear both;
animation-timeline: --story-statement;
animation-range: cover calc(5% + var(--i) * 1.2%) cover calc(12% + var(--i) * 1.2%);
}
}
}
@keyframes story-ink { from { color: rgb(30 29 27 / 0.16); } to { color: var(--c-ink); } }
/* Story link, now that the dates row is gone */
.story__link { margin-block-start: 1.25rem; }
/* Story statement: one full-width row above the two columns, with highlighted phrases */
.story__statement {
grid-column: 1 / -1;
max-width: 30ch;
margin: 0 0 clamp(0.5rem, 2vw, 1.5rem);
font-size: clamp(2.1rem, 1.1rem + 2.9vw, 4.1rem);
line-height: 1.12;
}
@media (min-width: 64rem) { .story__statement { max-width: none; } }
.story__mark { /* emphasis by type alone: italic crimson, no band */
font-style: italic;
color: var(--c-crimson);
background: none;
}
.story__mark .story__word { color: inherit; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.story__mark .story__word { animation-name: story-ink-mark; }
}
}
@keyframes story-ink-mark { from { color: rgb(164 34 42 / 0.2); } to { color: var(--c-crimson); } }
/* Parish emblem (white) as a seal on the large story photograph, bottom-left */
.story__wide { position: relative; }
.story__wide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 0% 100%, rgb(20 19 18 / 0.55), rgb(20 19 18 / 0) 70%); }
.story__wide .story__seal { position: absolute; inset-inline-start: clamp(1rem, 2.6vw, 2rem); inset-block-end: clamp(1rem, 2.6vw, 2rem); z-index: 1; width: clamp(3.5rem, 8vw, 6.25rem); height: auto; object-fit: contain; opacity: 0.94; filter: drop-shadow(0 2px 12px rgb(0 0 0 / 0.35)); }
/* Name of the person in the tall story photograph, set over the image */
.story__tall-frame { position: relative; }
.story__tall-frame::after { content: ""; position: absolute; inset: 45% 0 0; pointer-events: none; background: linear-gradient(to top, rgb(20 19 18 / 0.82), rgb(20 19 18 / 0)); }
.story__person { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0 clamp(0.9rem, 2vw, 1.4rem) clamp(0.9rem, 2vw, 1.3rem); margin: 0; color: var(--c-on-dark); text-align: start; }
.story__person-role { font-family: var(--f-sans); font-size: clamp(0.62rem, 0.55rem + 0.25vw, 0.75rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(243 239 232 / 0.85); }
.story__person-name { font-family: var(--f-display); font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem); font-weight: 400; line-height: 1.15; padding-block-start: 0.35rem; max-width: max-content; text-shadow: 0 1px 10px rgb(0 0 0 / 0.4); }
.story__tall .story__person { margin: 0; font-size: inherit; letter-spacing: normal; color: var(--c-on-dark); text-align: start; }
.story__tall .story__person-name { color: var(--c-on-dark); }
.story__tall .story__person { align-items: flex-start; }
.story__tall .story__person-role { color: var(--c-on-dark); text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.story__tall-frame::after { inset: 38% 0 0; background: linear-gradient(to top, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.55) 45%, rgb(20 19 18 / 0)); }
/* ==========================================================================
22. IMAGE HOVER: a slow, smooth grow inside the frame
Every photograph enlarges gently on hover; its frame (and any arch shape)
stays still because the frame clips. Cards and tiles trigger it from
anywhere on the card. Logos, the emblem seal and the hero video are left
alone. Only on devices that can hover, and never under reduced motion.
========================================================================== */
:root {
--img-grow: 1.06;
--img-grow-time: 1.4s;
--img-grow-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Frames that clip the growing photograph */
.wp-block-image,
.wp-block-gallery figure.wp-block-image,
.story__wide,
.story__tall-frame,
.shrine__media,
.org,
.intro__media,
.visit__media,
.home-hero__media,
.org-section__image { overflow: hidden; }
/* Arch-shaped frames carry the arch themselves, so the clip keeps the shape */
.intro__media.arch, .wp-block-image.is-style-arch, .home-hero__media { border-radius: 100vmax 100vmax 0 0; }
.shrine__media { display: block; border-radius: 100vmax 100vmax 0 0; }
.shrine--lead .shrine__media { border-radius: 0; }
/* The photographs that grow */
:is(
.wp-block-image img,
.story__wide > img:not(.story__seal),
.story__tall-frame > img,
.shrine__media img,
.org > img,
.intro__media img,
.intro__bg img,
.visit__media img,
.home-hero__media img,
.org-section__image img,
.wp-block-cover__image-background
) {
transition: transform var(--img-grow-time) var(--img-grow-ease), filter 0.6s var(--img-grow-ease);
transform-origin: 50% 50%;
backface-visibility: hidden;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.wp-block-image:hover img,
.story__wide:hover > img:not(.story__seal),
.story__tall-frame:hover > img,
.shrine:hover .shrine__media img,
.org:hover > img,
.intro__media:hover img,
.visit__media:hover img,
.home-hero__media:hover img,
.org-section__image:hover img,
.wp-block-cover.is-style-tile:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-cinematic:hover .wp-block-cover__image-background {
transform: scale(var(--img-grow));
}
/* Full-screen photographs move less: the frame is the whole screen */
.wp-block-cover.is-style-cinematic:hover .wp-block-cover__image-background { transform: scale(1.03); }
/* Gallery keeps its slight colour lift alongside the grow */
.wp-block-gallery figure.wp-block-image:hover img { filter: saturate(1); }
}
/* Logos and marks never grow */
.brand__mark, .org__mark img, .story__seal { transform: none !important; transition: none; }
/* ==========================================================================
23. SCROLL REVEAL: a slow, smooth fade-in as content enters the screen
Same selector list as inc/reveal.php (keep both in sync). Hidden only when
html.reveal-on is set by the head script; revealed by site.js.
========================================================================== */
:root {
--reveal-time: 1.2s;
--reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--reveal-shift: 28px;
}
.reveal-on :is(
.intro__text, .intro__media,
.entry > *,
.section-head, .section-title, .section-intro,
.today,
.story__media, .story__text > *,
.shrines > li, .arcade > li, .orgs > li, .lineage__row, .orgs-mosaic > li, .life__group,
.link-row > *, .tiles > *,
.wp-block-cover.is-style-cinematic .wp-block-cover__inner-container > *,
.home-prayer__text, .home-prayer__source,
.visit > *,
.wp-block-gallery > figure,
.hx-archive__aside, .hx-scene, .hx-incipit > *, .hx-plates > *, .hx-storeys__inner > *, .hx-tablet > *, .hx-sea__panel, .hx-print > *, .hx-works__text, .hx-works__gallery > figure, .hx-works__mosaic, .hx-finale__inner > *, .cp-works__lede, .cp-pair > *, .cp-pair__duo > figure, .cp-vow > *, .cp-lamens__text, .cp-plates > *, .cp-strip__list > li, .cp-light__lede, .cp-light__w, .cp-light__text, .cp-icon, .cp-register > *, .cp-deed__sheet, .in-school > *, .in-facts > li, .in-register, .in-office > *, .in-band, .in-way__list > li, .in-adoration > *, .in-rosary__list > li, .in-masses > *, .in-memory, .in-note, .in-door > *, .in-notice__plate, .in-water, .in-arch, .in-request__plate, .in-journey > *, .in-cert__sheet, .in-dossier__list > li, .in-file, .in-graces > *, .in-rest > *, .in-prayer > *, .in-gallery .cp-gallery__item, .og-intro > *, .og-stages__lead, .og-stage, .og-today__panel, .og-album, .og-founding > *, .og-word > *, .og-banner > *, .og-motto > *, .og-troop__text, .og-troop .cp-gallery__item, .sh-threshold > *, .sh-plaque__panel, .sh-icon > *, .sh-feast > *, .sh-name > *, .sh-ledger > *, .sh-inscription > *, .sh-road > *, .sh-martyr > *, .sh-reading, .sh-route > li, .sh-procession > p, .sh-temple > *, .sh-day > *, .sh-walk__text, .sh-walk__mosaic > figure, .sh-hidden__inner, .sh-garden,
.scripture__inner > *, .scripture__quote > *,
.more,
.sg-swatches, .sg-type > div
) {
transition:
opacity var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms),
transform var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms),
background-color var(--quick) var(--ease);
}
.reveal-on :is(
.intro__text, .intro__media,
.entry > *,
.section-head, .section-title, .section-intro,
.today,
.story__media, .story__text > *,
.shrines > li, .arcade > li, .orgs > li, .lineage__row, .orgs-mosaic > li, .life__group,
.link-row > *, .tiles > *,
.wp-block-cover.is-style-cinematic .wp-block-cover__inner-container > *,
.home-prayer__text, .home-prayer__source,
.visit > *,
.wp-block-gallery > figure,
.hx-archive__aside, .hx-scene, .hx-incipit > *, .hx-plates > *, .hx-storeys__inner > *, .hx-tablet > *, .hx-sea__panel, .hx-print > *, .hx-works__text, .hx-works__gallery > figure, .hx-works__mosaic, .hx-finale__inner > *, .cp-works__lede, .cp-pair > *, .cp-pair__duo > figure, .cp-vow > *, .cp-lamens__text, .cp-plates > *, .cp-strip__list > li, .cp-light__lede, .cp-light__w, .cp-light__text, .cp-icon, .cp-register > *, .cp-deed__sheet, .in-school > *, .in-facts > li, .in-register, .in-office > *, .in-band, .in-way__list > li, .in-adoration > *, .in-rosary__list > li, .in-masses > *, .in-memory, .in-note, .in-door > *, .in-notice__plate, .in-water, .in-arch, .in-request__plate, .in-journey > *, .in-cert__sheet, .in-dossier__list > li, .in-file, .in-graces > *, .in-rest > *, .in-prayer > *, .in-gallery .cp-gallery__item, .og-intro > *, .og-stages__lead, .og-stage, .og-today__panel, .og-album, .og-founding > *, .og-word > *, .og-banner > *, .og-motto > *, .og-troop__text, .og-troop .cp-gallery__item, .sh-threshold > *, .sh-plaque__panel, .sh-icon > *, .sh-feast > *, .sh-name > *, .sh-ledger > *, .sh-inscription > *, .sh-road > *, .sh-martyr > *, .sh-reading, .sh-route > li, .sh-procession > p, .sh-temple > *, .sh-day > *, .sh-walk__text, .sh-walk__mosaic > figure, .sh-hidden__inner, .sh-garden,
.scripture__inner > *, .scripture__quote > *,
.more,
.sg-swatches, .sg-type > div
):not(.is-revealed) {
opacity: 0;
transform: translate3d(0, var(--reveal-shift), 0);
}
/* Grid dividers belong to the items (not a grey container showing through gaps), so they fade in with them */
.shrines { background: transparent; border: 0; gap: 0; }
.shrine { box-shadow: 0 0 0 0.5px var(--c-hair-strong); }
.tiles { background: transparent; gap: 2px; }
/* ==========================================================================
24. SCRIPTURE: full-bleed photograph, warm light, a cross of light, a quote
Edge to edge (no container), centred: the quotation is the whole message.
========================================================================== */
.scripture {
position: relative; isolation: isolate; overflow: hidden;
display: grid; place-items: center;
min-height: min(88svh, 52rem);
margin-block: 0 !important;
margin-inline: calc(50% - 50vw) !important;
width: 100vw; max-width: none !important;
color: var(--c-on-dark);
--c-ink: var(--c-on-dark);
}
.scripture__bg { position: absolute; inset: 0; z-index: -2; }
.scripture__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; /* trims from the foot, where the photographer's mark sits */ filter: saturate(0.82) contrast(1.02); }
/* Atmosphere: warm light from above, a deep vignette at the edges, calm in the middle */
.scripture::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(60% 55% at 50% 36%, rgb(255 233 196 / 0.16) 0%, rgb(255 233 196 / 0) 70%),
radial-gradient(120% 95% at 50% 45%, rgb(20 19 18 / 0.35) 0%, rgb(20 19 18 / 0.72) 75%, rgb(20 19 18 / 0.86) 100%),
linear-gradient(to bottom, rgb(20 19 18 / 0.35), rgb(20 19 18 / 0.15) 40%, rgb(20 19 18 / 0.55));
}
.scripture__inner {
box-sizing: border-box; width: 100%; max-width: 62rem;
padding: clamp(4.5rem, 10vw, 7.5rem) var(--gutter);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* The cross: two hairlines of light, the foot fading into the air */
.scripture__cross {
position: relative; display: block;
width: 1.75rem; height: clamp(4.5rem, 9vw, 6.5rem);
margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
opacity: 0.85;
}
.scripture__cross::before, .scripture__cross::after {
content: ""; position: absolute; background: rgb(243 239 232 / 0.9);
box-shadow: 0 0 14px rgb(255 236 205 / 0.55), 0 0 2px rgb(255 236 205 / 0.8);
}
.scripture__cross::before { /* upright */
left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%);
background: linear-gradient(to bottom, rgb(243 239 232 / 0.95) 0%, rgb(243 239 232 / 0.9) 55%, rgb(243 239 232 / 0) 100%);
}
.scripture__cross::after { /* crossbar, a third of the way down */
top: 28%; left: 0; right: 0; height: 1.5px;
}
/* The quotation */
.scripture__quote { margin: 0; padding: 0; border: 0; font-family: var(--f-display); }
.scripture__line { margin: 0; color: var(--c-on-dark); text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.35); }
.scripture__line--first { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; }
.scripture__line--next { margin-block-start: clamp(0.9rem, 2vw, 1.4rem); font-size: clamp(1.45rem, 1rem + 1.7vw, 2.5rem); font-style: italic; font-weight: 500; line-height: 1.25; color: rgb(243 239 232 / 0.9); }
.scripture__cite {
display: flex; align-items: center; justify-content: center; gap: 1rem;
margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
}
.scripture__cite::before, .scripture__cite::after { content: ""; width: clamp(1.75rem, 4vw, 3rem); height: 1px; background: rgb(243 239 232 / 0.45); }
.scripture__cite cite { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(243 239 232 / 0.88); }
/* Seamless joins: the sections either side sit closer to the photograph */
.story:has(+ .scripture) { padding-block-end: clamp(3rem, 6vw, 4.5rem); }
.scripture + .home-section, .scripture + * { padding-block-start: clamp(3.5rem, 6vw, 5rem); }
/* Tighter rhythm across the site: less dead space between sections */
:root { --section: clamp(4rem, 7.5vw, 7rem); }
.story { padding-block: clamp(3.5rem, 7vw, 6rem); }
/* ==========================================================================
25. CHURCHES & SHRINES: "The Arcade"
Four Romanesque niches standing on one plinth, numbered like stations of a
pilgrimage, on a limestone ground with faint stone courses.
========================================================================== */
/* Section ground: the page's white (home page) */
.home-shrines {
position: relative;
background: var(--c-paper);
}
/* Centred heading with a small cross between two rules */
.home-shrines .section-title, .home-shrines .section-intro { text-align: center; margin-inline: auto; }
.home-shrines .section-intro { max-width: 40ch; margin-block-end: clamp(3rem, 6vw, 4.5rem); }
.home-shrines .section-title { position: relative; padding-block-start: 3.25rem; }
.home-shrines .section-title::before {
content: ""; position: absolute; inset-block-start: 0; left: 50%; transform: translateX(-50%);
width: 9rem; height: 1.6rem;
background:
linear-gradient(var(--c-crimson), var(--c-crimson)) 50% 0 / 1.5px 100% no-repeat,
linear-gradient(var(--c-crimson), var(--c-crimson)) 50% 32% / 0.85rem 1.5px no-repeat,
linear-gradient(to right, transparent, var(--c-hair-strong)) 0 32% / 3.4rem 1px no-repeat,
linear-gradient(to left, transparent, var(--c-hair-strong)) 100% 32% / 3.4rem 1px no-repeat;
}
/* The arcade */
.arcade {
list-style: none; margin: 0; padding: 0 0 clamp(1.75rem, 3vw, 2.5rem);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.25rem, 2.6vw, 2.5rem);
position: relative;
counter-reset: niche;
}
/* The plinth the four niches stand on */
.arcade::after {
content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--c-hair-strong) 8%, var(--c-hair-strong) 92%, transparent);
}
.niche { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.niche__numeral {
font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.18em;
color: var(--c-crimson); margin-block-end: 0.85rem;
}
/* The arch: photograph inside a carved double molding */
.niche__arch {
position: relative; display: block; width: 100%;
padding: clamp(0.4rem, 0.7vw, 0.6rem);
border: 1px solid var(--c-hair-strong);
border-block-end: 0;
border-radius: 100vmax 100vmax 0 0;
transition: border-color 0.6s var(--img-grow-ease);
}
.niche__arch::before { /* inner molding line */
content: ""; position: absolute; inset: clamp(0.4rem, 0.7vw, 0.6rem); inset-block-end: 0;
border: 1px solid rgb(30 29 27 / 0.1); border-block-end: 0; border-radius: 100vmax 100vmax 0 0;
pointer-events: none; z-index: 1;
}
.niche__media { display: block; overflow: hidden; border-radius: 100vmax 100vmax 0 0; aspect-ratio: 3 / 4.2; background: var(--c-raised); }
.niche__media img {
display: block; width: 100%; height: 100%; object-fit: cover;
filter: sepia(0.18) saturate(0.85) contrast(1.03);
transition: transform var(--img-grow-time) var(--img-grow-ease), filter 0.8s var(--img-grow-ease);
}
.niche__title { margin: 1.35rem 0 0.6rem; font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.85rem); line-height: 1.12; text-wrap: balance; }
.niche__title a { color: var(--c-ink); text-decoration: none; }
.niche__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* the whole niche is the link */
.niche__text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-muted); max-width: 30ch; }
.niche__meta { display: flex; flex-direction: column; gap: 0.2rem; margin: 1rem 0 0; font-size: 0.8125rem; color: var(--c-ink); }
.niche__meta b { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); margin-inline-end: 0.4rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.niche:hover .niche__media img { transform: scale(var(--img-grow)); filter: sepia(0.05) saturate(1) contrast(1.03); }
.niche:hover .niche__arch { border-color: var(--c-crimson); }
}
.niche:focus-within .niche__arch { border-color: var(--c-crimson); }
/* Tablet: two by two. Phone: a row of arches to swipe through. */
@media (max-width: 63.999rem) {
.arcade { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2.5rem, 5vw, 3.5rem); }
.arcade::after { display: none; }
}
@media (max-width: 39.999rem) {
.arcade {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.arcade::-webkit-scrollbar { display: none; }
.niche { scroll-snap-align: start; }
}
/* Niche titles sit inside the arch, over the foot of the photograph */
.niche__media { position: relative; }
.niche__arch { position: relative; }
.niche__arch::after { content: ""; position: absolute; inset: 45% clamp(0.4rem, 0.7vw, 0.6rem) 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(20 19 18 / 0.85) 0%, rgb(20 19 18 / 0.45) 45%, rgb(20 19 18 / 0)); }
.niche .niche__title { position: absolute; inset-inline: clamp(0.4rem, 0.7vw, 0.6rem); inset-block-end: 0; z-index: 2; margin: 0; padding: 0 1rem clamp(1.1rem, 2vw, 1.6rem); text-align: center; }
.niche .niche__title a { color: var(--c-on-dark); text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
/* ==========================================================================
26. LANCET ARCH for the shrine niches (replaces the round arch there)
Two arcs of radius 0.7 x width meeting at a point: the arch of the parish
logo and of the medieval churches of the Levant. Vector masks scale with the
niche; the photo has a fixed 3:4.2 frame, so the shape never distorts.
========================================================================== */
:root {
--lancet-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 420' preserveAspectRatio='none'%3E%3Cpath d='M0 420V201A210 210 0 0 1 150 0A210 210 0 0 1 300 201V420Z'/%3E%3C/svg%3E");
--lancet-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 420' preserveAspectRatio='none'%3E%3Cpath d='M1 420V201.5A209 209 0 0 1 150 1.5A209 209 0 0 1 299 201.5V420' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.niche__arch { border: 0; border-radius: 0; --frame-c: var(--c-hair-strong); }
.niche__arch::before {
inset: 0; border: 0; border-radius: 0; z-index: 0;
background: var(--frame-c);
-webkit-mask: var(--lancet-line) center / 100% 100% no-repeat;
mask: var(--lancet-line) center / 100% 100% no-repeat;
transition: background-color 0.6s var(--img-grow-ease);
}
.niche__media {
border-radius: 0;
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat;
mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.niche__arch::after { inset: 45% clamp(0.4rem, 0.7vw, 0.6rem) 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.niche:hover .niche__arch { --frame-c: var(--c-crimson); border-color: transparent; }
}
.niche:focus-within .niche__arch { --frame-c: var(--c-crimson); }
/* The angel on the peak of each arch, like a finial (client, 15 October).
It stands just above the point of the lancet; the numeral moves up to
make room. Solid emblem in the accent, lit to full on hover. */
.arcade { --angel: clamp(2.1rem, 1.7rem + 1vw, 2.75rem); padding-block-start: 0.25rem; }
.niche__numeral { margin-block-end: calc(var(--angel) * 0.82 + 0.85rem); }
.niche__angel {
position: absolute; z-index: 2; pointer-events: none;
inset-block-start: calc(var(--angel) * -0.84); inset-inline-start: 50%;
width: var(--angel); aspect-ratio: 1; transform: translateX(-50%);
color: var(--c-crimson); opacity: 0.88;
transition: opacity 0.6s var(--img-grow-ease), transform 0.6s var(--img-grow-ease);
}
.niche__angel svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.niche:hover .niche__angel { opacity: 1; transform: translateX(-50%) translateY(-2px); }
}
[dir="rtl"] .niche__angel { transform: translateX(50%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { [dir="rtl"] .niche:hover .niche__angel { transform: translateX(50%) translateY(-2px); } }
/* ==========================================================================
27. APOSTOLIC ORGANIZATIONS: "A Living Lineage"
Oldest first. A single lancet window (left, sticky) shows the organization
being read; the rows (right) carry founding year, name and a description
that unfolds on hover or focus. Phones: thumbnails in the rows, text open.
========================================================================== */
.lineage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
/* The window */
.lineage__frame {
position: sticky; inset-block-start: calc(var(--header-h) + 2rem);
aspect-ratio: 3 / 4.2;
background: var(--c-band);
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat;
mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.lineage__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.9s var(--img-grow-ease), transform 1.6s var(--img-grow-ease); }
.lineage__slide.is-active { opacity: 1; transform: none; }
.lineage__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Typographic panel for organizations without a photograph */
.lineage__type {
display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem;
width: 100%; height: 100%; box-sizing: border-box;
padding: 2rem 2rem clamp(2rem, 4vw, 3rem);
background:
radial-gradient(80% 60% at 50% 25%, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 70%),
var(--c-crimson-deep);
color: var(--c-on-dark); text-align: center;
}
.lineage__type-year { font-family: var(--f-display); font-size: clamp(4rem, 2rem + 5vw, 7rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; }
.lineage__type-name { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(243 239 232 / 0.85); }
/* The rows */
.lineage__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--c-hair-strong); }
.lineage__row { position: relative; border-block-end: 1px solid var(--c-hair); }
.lineage__thumb { display: none; }
.lineage__link {
display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; column-gap: clamp(1rem, 2.5vw, 2rem); align-items: baseline;
padding: clamp(1.4rem, 2.6vw, 2rem) 0;
color: var(--c-ink); text-decoration: none;
}
.lineage__year { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.6rem); font-weight: 400; line-height: 1; color: var(--c-muted); font-variant-numeric: lining-nums; transition: color 0.5s var(--img-grow-ease); }
.lineage__name { display: block; font-family: var(--f-display); font-size: clamp(1.45rem, 1.15rem + 0.9vw, 2.1rem); font-weight: 400; line-height: 1.15; text-wrap: balance; }
/* The description unfolds (grid-rows 0fr to 1fr: no height measuring) */
.lineage__text { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.7s var(--img-grow-ease), opacity 0.6s var(--img-grow-ease), margin 0.7s var(--img-grow-ease); }
.lineage__text > span { overflow: hidden; font-size: 0.9375rem; line-height: 1.6; color: var(--c-muted); max-width: 52ch; }
.lineage__arrow { width: 1.4rem; height: 1.4rem; align-self: center; color: var(--c-crimson); opacity: 0; transform: translateX(-0.6rem); transition: opacity 0.5s var(--img-grow-ease), transform 0.5s var(--img-grow-ease); }
.lineage__row.is-active .lineage__year { color: var(--c-crimson); }
.lineage__row.is-active .lineage__text { grid-template-rows: 1fr; opacity: 1; margin-block-start: 0.7rem; }
.lineage__row.is-active .lineage__arrow { opacity: 1; transform: none; }
/* Tablet and phone: no window; each row carries its own small arch and stays open */
@media (max-width: 63.999rem) {
.lineage { grid-template-columns: 1fr; }
.lineage__frame { display: none; }
.lineage__row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 1.1rem; align-items: center; padding-block: 1.1rem; }
.lineage__thumb {
display: block; position: relative; aspect-ratio: 3 / 4.2; overflow: hidden; background: var(--c-band);
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat;
mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.lineage__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lineage__thumb .lineage__type { padding: 0.6rem 0.3rem; justify-content: center; }
.lineage__thumb .lineage__type-year { font-size: 1.35rem; }
.lineage__thumb .lineage__type-name { display: none; }
.lineage__link { grid-template-columns: minmax(0, 1fr) auto; padding: 0; row-gap: 0.25rem; }
.lineage__year { grid-column: 1; font-size: 1.1rem; color: var(--c-crimson); }
.lineage__body { grid-column: 1; }
.lineage__arrow { grid-column: 2; grid-row: 1 / span 2; opacity: 1; transform: none; }
.lineage__text { grid-template-rows: 1fr; opacity: 1; margin-block-start: 0.4rem; }
.lineage__name { font-size: 1.3rem; }
.lineage__text > span { font-size: 0.875rem; }
}
/* The lineage window always fits on screen beside the rows (it is sticky) */
.lineage__frame { width: min(100%, calc((100svh - var(--header-h) - 4rem) / 1.4)); justify-self: center; }
/* ==========================================================================
28. APOSTOLIC ORGANIZATIONS: "The Mosaic"
Five tiles, five proportions, on a 12-column grid of square-ish row units.
The oldest society (1831) is the largest tile; two portraits stand level with it,
side by side; two bands close the composition.
No arches here: arches belong to the churches.
========================================================================== */
.orgs-mosaic {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: clamp(4.75rem, 7.2vw, 7.25rem);
gap: clamp(0.6rem, 1.1vw, 1rem);
}
.tessera--a { grid-column: 1 / 7; grid-row: 1 / 5; } /* the largest: since 1831 */
.tessera--b { grid-column: 7 / 10; grid-row: 1 / 5; } /* portrait, full height of the largest */
.tessera--c { grid-column: 10 / 13; grid-row: 1 / 5; } /* portrait, full height of the largest */
.tessera--d { grid-column: 1 / 7; grid-row: 5 / 7; } /* band */
.tessera--e { grid-column: 7 / 13; grid-row: 5 / 7; } /* band */
.tessera { position: relative; overflow: hidden; margin: 0; background: var(--c-band); isolation: isolate; }
.tessera__img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.88) contrast(1.02);
transition: transform var(--img-grow-time) var(--img-grow-ease), filter 0.8s var(--img-grow-ease);
}
.tessera--c .tessera__img { object-position: 50% 45%; }
/* Shade from the foot, where the title sits */
.tessera::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(20 19 18 / 0.82) 0%, rgb(20 19 18 / 0.35) 38%, rgb(20 19 18 / 0) 64%);
}
/* The mat: a fine inset hairline, like the setting of a mosaic */
.tessera::after {
content: ""; position: absolute; inset: clamp(0.5rem, 0.9vw, 0.8rem); z-index: 1; pointer-events: none;
border: 1px solid rgb(243 239 232 / 0.32);
transition: border-color 0.6s var(--img-grow-ease);
}
.tessera__title {
position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
margin: 0; padding: 0 clamp(1.25rem, 2.4vw, 2rem) clamp(1.15rem, 2.2vw, 1.8rem);
font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.75rem); line-height: 1.12; text-wrap: balance;
}
.tessera__title a { color: var(--c-on-dark); text-decoration: none; text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
.tessera__title a::after { content: ""; position: absolute; inset: -100vh 0 0 0; } /* whole tile clickable */
.tessera--a .tessera__title { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.75rem); max-width: 18ch; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.tessera:hover .tessera__img { transform: scale(var(--img-grow)); filter: saturate(1) contrast(1.02); }
.tessera:hover::after { border-color: rgb(243 239 232 / 0.7); }
}
.tessera:focus-within::after { border-color: rgb(243 239 232 / 0.8); }
/* Tablet: same idea on 6 columns */
@media (max-width: 63.999rem) {
.orgs-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(4.5rem, 11vw, 6.5rem); }
.tessera--a { grid-column: 1 / 7; grid-row: 1 / 4; }
.tessera--b { grid-column: 1 / 4; grid-row: 4 / 7; }
.tessera--c { grid-column: 4 / 7; grid-row: 4 / 7; }
.tessera--d { grid-column: 1 / 7; grid-row: 7 / 9; }
.tessera--e { grid-column: 1 / 7; grid-row: 9 / 11; }
}
/* Phone: large tile, two portraits side by side, then the bands */
@media (max-width: 39.999rem) {
.orgs-mosaic { grid-auto-rows: 5.25rem; gap: 0.5rem; }
.tessera--a { grid-row: 1 / 4; }
.tessera--b { grid-row: 4 / 7; }
.tessera--c { grid-row: 4 / 7; }
.tessera__title { font-size: 1.15rem; padding: 0 1rem 1rem; }
.tessera--a .tessera__title { font-size: 1.5rem; }
}
/* Emblems: each organization's own sign, in the upper-left corner of its tile */
.tessera__icon {
position: absolute; z-index: 2; pointer-events: none;
inset-block-start: clamp(1.25rem, 2.4vw, 2rem); inset-inline-start: clamp(1.25rem, 2.4vw, 2rem);
display: block; width: clamp(2rem, 1.6rem + 0.9vw, 2.6rem); height: auto;
color: var(--c-on-dark); filter: drop-shadow(0 1px 8px rgb(0 0 0 / 0.55));
}
.tessera--a .tessera__icon { width: clamp(2.6rem, 2rem + 1.4vw, 3.5rem); }
/* A soft shade in the corner so the emblem reads on light photographs */
.tessera::before {
background:
radial-gradient(circle at 0 0, rgb(20 19 18 / 0.55) 0, rgb(20 19 18 / 0) clamp(7rem, 12vw, 10rem)),
linear-gradient(to top, rgb(20 19 18 / 0.82) 0%, rgb(20 19 18 / 0.35) 38%, rgb(20 19 18 / 0) 64%);
}
@media (max-width: 39.999rem) {
.tessera__icon { width: 1.75rem; inset-block-start: 1rem; inset-inline-start: 1rem; }
.tessera--a .tessera__icon { width: 2.25rem; }
}
/* ==========================================================================
29. GIVE: a full-bleed photograph (the client's nave image in golden
light), shaded from the end side so the lit cross stays clear, carrying
the scripture on sharing (Acts 2:44-45) and the Donate button. Vaulted
top edge, a fine inset frame with praying hands at the apex, and an
entrance (slow zoom-out, lifting veil, then the words). Later rules in
this section override earlier ones: read it bottom-up.
========================================================================== */
.give {
position: relative; isolation: isolate; overflow: hidden;
display: grid; align-items: center;
min-height: min(86svh, 50rem);
margin-block: 0 !important;
margin-inline: calc(50% - 50vw) !important;
width: 100vw; max-width: none !important;
color: var(--c-on-dark);
--c-ink: var(--c-on-dark);
--c-muted: rgb(243 239 232 / 0.8);
--c-hair-strong: rgb(243 239 232 / 0.55);
--c-gold: #c9ad72;
--c-gold-line: rgb(201 173 114 / 0.6);
--btn-hover-bg: rgb(243 239 232 / 0.1);
--btn-hover-c: #fff;
}
.give__bg { position: absolute; inset: 0; z-index: -2; }
.give__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; filter: saturate(0.9) contrast(1.02); }
.give::before { /* the overlay: deep on the text side, clear over the church */
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to right, rgb(20 19 18 / 0.9) 0%, rgb(20 19 18 / 0.78) 30%, rgb(20 19 18 / 0.32) 58%, rgb(20 19 18 / 0) 78%),
linear-gradient(to top, rgb(20 19 18 / 0.35), rgb(20 19 18 / 0) 35%);
}
[dir="rtl"] .give::before {
background:
linear-gradient(to left, rgb(20 19 18 / 0.9) 0%, rgb(20 19 18 / 0.78) 30%, rgb(20 19 18 / 0.32) 58%, rgb(20 19 18 / 0) 78%),
linear-gradient(to top, rgb(20 19 18 / 0.35), rgb(20 19 18 / 0) 35%);
}
.give__inner { box-sizing: border-box; width: 100%; max-width: var(--wide); margin-inline: auto; padding: clamp(4.5rem, 10vw, 7.5rem) var(--gutter); }
.give__text { max-width: 36rem; display: grid; justify-items: start; }
.give__scripture { margin: 0; }
.give__quote { margin: 0; padding: 0; border: 0; }
.give__quote p {
margin: 0;
font-family: var(--f-display); font-size: clamp(1.85rem, 1.15rem + 1.95vw, 3rem); line-height: 1.18;
color: var(--c-on-dark); text-wrap: pretty; text-shadow: 0 1px 18px rgb(0 0 0 / 0.35);
}
.give__quote p::before { content: "\201C"; }
.give__quote p::after { content: "\201D"; }
.give__mark { /* the highlighted words: Baskerville italic in candle gold, no band */
font-style: italic; color: #e3cc98; background: none;
}
.give__cite { margin-block-start: clamp(1.25rem, 2vw, 1.75rem); }
.give__cite cite { font-family: var(--f-sans); font-style: normal; font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.give__note { margin: clamp(2rem, 3.5vw, 2.75rem) 0 0; max-width: 38ch; color: rgb(243 239 232 / 0.85); line-height: 1.6; }
.btn.give__link { margin-block-start: 1.75rem; }
/* Tablet: the text column covers more of the picture, so the shade reaches further */
@media (max-width: 63.999rem) {
.give::before {
background: linear-gradient(to right, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.7) 55%, rgb(20 19 18 / 0.35) 100%);
}
[dir="rtl"] .give::before {
background: linear-gradient(to left, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.7) 55%, rgb(20 19 18 / 0.35) 100%);
}
}
/* Phone: shade from the foot, where the text sits */
@media (max-width: 39.999rem) {
.give { min-height: 0; align-items: end; }
.give__bg img { object-position: 60% 40%; }
.give::before, [dir="rtl"] .give::before {
background: linear-gradient(to top, rgb(20 19 18 / 0.92) 0%, rgb(20 19 18 / 0.78) 55%, rgb(20 19 18 / 0.3) 100%);
}
.give__inner { padding-block: 9rem 3.5rem; }
}
/* End-side variant: for photographs whose subject sits on the start side
(the nave image: the lit cross and altar are left of centre) */
.give--end .give__text { margin-inline-start: auto; }
.give--end .give__bg img { object-position: 38% 50%; }
.give--end::before {
background:
linear-gradient(to left, rgb(20 19 18 / 0.9) 0%, rgb(20 19 18 / 0.8) 32%, rgb(20 19 18 / 0.38) 58%, rgb(20 19 18 / 0) 80%),
linear-gradient(to top, rgb(20 19 18 / 0.3), rgb(20 19 18 / 0) 35%);
}
[dir="rtl"] .give--end::before {
background:
linear-gradient(to right, rgb(20 19 18 / 0.9) 0%, rgb(20 19 18 / 0.8) 32%, rgb(20 19 18 / 0.38) 58%, rgb(20 19 18 / 0) 80%),
linear-gradient(to top, rgb(20 19 18 / 0.3), rgb(20 19 18 / 0) 35%);
}
@media (max-width: 63.999rem) {
.give--end::before { background: linear-gradient(to left, rgb(20 19 18 / 0.9) 0%, rgb(20 19 18 / 0.72) 55%, rgb(20 19 18 / 0.4) 100%); }
[dir="rtl"] .give--end::before { background: linear-gradient(to right, rgb(20 19 18 / 0.9) 0%, rgb(20 19 18 / 0.72) 55%, rgb(20 19 18 / 0.4) 100%); }
}
@media (max-width: 39.999rem) {
.give--end .give__text { margin-inline-start: 0; }
.give--end .give__bg img { object-position: 28% 40%; }
.give--end::before, [dir="rtl"] .give--end::before {
background: linear-gradient(to top, rgb(20 19 18 / 0.92) 0%, rgb(20 19 18 / 0.8) 55%, rgb(20 19 18 / 0.25) 100%);
}
}
/* Arched top, lower height, larger Donate, entrance.
The top edge rises into a wide vault: the section is masked by a solid
body plus a half-ellipse cap of height --arch (tangent vertical at the
edges, so there are no corners). */
.give {
--arch: clamp(2.75rem, 7vw, 7rem);
min-height: min(68svh, 40rem);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100.5A50 100 0 0 1 100 100.5Z'/%3E%3C/svg%3E") top / 100% var(--arch) no-repeat,
linear-gradient(#000, #000) bottom / 100% calc(100% - var(--arch) + 1px) no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100.5A50 100 0 0 1 100 100.5Z'/%3E%3C/svg%3E") top / 100% var(--arch) no-repeat,
linear-gradient(#000, #000) bottom / 100% calc(100% - var(--arch) + 1px) no-repeat;
}
.give__inner { padding-block: calc(var(--arch) + clamp(2rem, 4vw, 3.5rem)) clamp(3.5rem, 7vw, 5.5rem); }
.btn.give__link { margin-block-start: clamp(1.75rem, 3vw, 2.5rem); }
/* Height: the text may start inside the vault, since the arch is only at full
height near the centre and the text sits towards the side. */
.give { min-height: 0; }
.give__inner { padding-block: calc(var(--arch) * 0.55 + clamp(1.5rem, 3vw, 2.5rem)) clamp(3rem, 5.5vw, 4.5rem); }
.give__text { max-width: 40rem; }
.give__quote p { font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.7rem); }
@media (max-width: 39.999rem) {
.give__inner { padding-block: calc(var(--arch) + 6rem) 3rem; }
}
/* Keep the lit cross whole in the shorter frame, and each highlighted phrase on one line */
.give--end .give__bg img { object-position: 38% 22%; }
@media (min-width: 40rem) { .give__mark { white-space: nowrap; } }
/* Entrance: the photograph settles from a slow zoom as a dark veil lifts,
then the words follow. Only when the reveal script runs (it never
does under prefers-reduced-motion). */
.reveal-on .give__bg img { transform: scale(1.14); transition: transform 2.6s var(--reveal-ease); }
.reveal-on .give__bg.is-revealed img { transform: none; }
.reveal-on .give__bg::after { /* the dim light: a dark veil that lifts (opacity only) */
content: ""; position: absolute; inset: 0; background: rgb(20 19 18);
opacity: 0.5; transition: opacity 2.2s var(--reveal-ease);
}
.reveal-on .give__bg.is-revealed::after { opacity: 0; }
.reveal-on .give__text > * {
transition:
opacity var(--reveal-time) var(--reveal-ease) calc(var(--reveal-delay, 0ms) + 500ms),
transform var(--reveal-time) var(--reveal-ease) calc(var(--reveal-delay, 0ms) + 500ms),
background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
.reveal-on .give__text > *:not(.is-revealed) { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
@media (max-width: 39.999rem) {
.give { --arch: 2.5rem; min-height: 0; }
.give__inner { padding-block: calc(var(--arch) + 7rem) 3rem; }
.btn.give__link { padding-inline: 2rem; }
}
/* ==========================================================================
30. WATCH MASS: three portrait cards (3:4), set like the organization
tiles: the still full-bleed, a fine inset mat, a crimson rule and the
title over a shade from the foot. Each card plays in place (the Facebook
player loads on press). Today's Masses and the Facebook page underneath.
========================================================================== */
.watch {
margin-block: 0 !important;
background: var(--c-band);
padding-block: clamp(4rem, 8vw, 6.5rem) clamp(4rem, 7vw, 5.5rem);
}
.watch.alignfull { margin-inline: calc(50% - 50vw) !important; width: 100vw; max-width: none !important; }
.watch__inner { box-sizing: border-box; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.watch__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.watch__title { margin: 0 0 0.75rem; font-size: var(--fs-h2); }
.watch__intro { margin: 0; max-width: 46ch; color: var(--c-muted); font-size: 1.0625rem; }
.vgrid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.watch--all .vgrid { row-gap: clamp(1.5rem, 3vw, 2.5rem); }
.vcard__frame { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 4; background: #141312; }
.vcard__frame::before { /* shade from the foot, where the title sits */
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.45) 34%, rgb(20 19 18 / 0) 60%);
}
.vcard__frame::after { /* the mat */
content: ""; position: absolute; inset: clamp(0.5rem, 0.9vw, 0.8rem); z-index: 2; pointer-events: none;
border: 1px solid rgb(243 239 232 / 0.32);
transition: border-color 0.6s var(--img-grow-ease);
}
.vcard__frame iframe { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; background: #141312; }
.vcard__frame.is-playing::before, .vcard__frame.is-playing::after, .vcard__frame.is-playing .vcard__text { display: none; }
.poster { position: absolute; inset: 0; display: block; overflow: hidden; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster--fit .poster__img { object-fit: contain; object-position: 50% 24%; }
.vcard .poster .poster__blur { filter: blur(16px) brightness(0.5) saturate(0.9); transform: scale(1.25); }
.vcard .poster__img { filter: saturate(0.92); transition: transform var(--img-grow-time) var(--img-grow-ease); }
.vcard__play { position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vcard__play:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: -6px; }
.vcard__text {
position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; pointer-events: none;
padding: 0 clamp(1.25rem, 2.2vw, 1.9rem) clamp(1.15rem, 2vw, 1.7rem);
color: var(--c-on-dark);
}
.vcard__when { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(243 239 232 / 0.8); }
.vcard__when.is-live { color: var(--c-on-dark); }
.vcard__title { margin: 0.7rem 0 0; font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.8rem); line-height: 1.14; color: var(--c-on-dark); text-wrap: balance; text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
.vcard__foot { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: rgb(243 239 232 / 0.85); }
.vcard__btn { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(243 239 232 / 0.6); color: var(--c-on-dark); transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), transform 0.3s var(--ease); }
.vcard__btn .icon { display: block; width: 40%; height: 40%; margin: 0; } /* Phosphor's triangle is optically centred in its own box */
.vcard.is-live .vcard__btn, .vcard__frame:hover .vcard__btn, .vcard__play:focus-visible ~ .vcard__text .vcard__btn { background: rgb(243 239 232 / 0.16); border-color: var(--c-on-dark); }
.vcard__frame:active .vcard__btn { transform: scale(0.96); }
/* Watch on Facebook: a second round control at the end of the foot row,
above the play surface so it opens Facebook instead of the in-card player */
.vcard__fb { /* Tabler's Facebook glyph is the bare f: a ring like the play button's */
position: absolute; z-index: 5;
inset-inline-end: clamp(1.25rem, 2.2vw, 1.9rem); inset-block-end: clamp(1.15rem, 2vw, 1.7rem);
display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%;
border: 1px solid rgb(243 239 232 / 0.6); color: var(--c-on-dark);
transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), transform 0.3s var(--ease);
}
.vcard__fb .icon { display: block; width: 46%; height: 46%; }
.vcard__fb:hover, .vcard__fb:focus-visible { background: rgb(243 239 232 / 0.16); border-color: var(--c-on-dark); }
.vcard__fb:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }
.vcard__fb:active { transform: scale(0.96); }
.entry .vcard a.vcard__fb { color: var(--c-on-dark); text-decoration: none; }
.vcard__frame.is-playing .vcard__fb { display: none; }
/* Two-up cards on large phones (30 to 40rem): smaller controls, and the
duration gives way so play and Facebook keep the row (Facebook's player
shows it). Smaller phones get one card per row (section 30). */
@media (min-width: 30rem) and (max-width: 39.999rem) {
.watch--all .vcard__btn, .watch--all .vcard__fb { width: 2.25rem; }
.watch--all .vcard__dur { display: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.vcard__frame:hover .poster__img { transform: scale(var(--img-grow)); }
.vcard__frame:hover::after { border-color: rgb(243 239 232 / 0.7); }
}
/* Live: a real status, so a small crimson dot that breathes */
.watch__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-crimson); flex: none; }
@media (prefers-reduced-motion: no-preference) {
.watch__dot { animation: watch-live 1.8s ease-in-out infinite; }
}
@keyframes watch-live { 0%, 100% { box-shadow: 0 0 0 0 rgb(164 34 42 / 0.55); } 50% { box-shadow: 0 0 0 0.4rem rgb(164 34 42 / 0); } }
.watch__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 3rem; margin-block-start: clamp(2rem, 3.5vw, 2.75rem); padding-block-start: 1.5rem; border-block-start: 1px solid var(--c-hair); }
.watch__link { display: inline-flex; align-items: center; gap: 0.65rem; font-size: var(--btn-size); font-weight: var(--fw-strong); letter-spacing: var(--ls-button); text-transform: uppercase; color: var(--c-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.6em; transition: text-decoration-color 0.45s var(--ease); }
.watch__link .icon { width: 1.05rem; height: 1.05rem; flex: none; transition: transform 0.45s var(--ease); }
.watch__link:hover { text-decoration-color: var(--c-gold); }
.watch__link:hover .icon:last-child { transform: translateX(4px); }
[dir="rtl"] .watch__link .icon:last-child { transform: scaleX(-1); }
.watch__empty { margin: 0; padding: 2rem; background: var(--c-paper); color: var(--c-muted); }
.watch--all { margin-inline: auto !important; width: auto; max-width: var(--wide) !important; padding-block: 0 var(--section); background: transparent; }
.watch--all .watch__inner { padding-inline: max(0px, calc(var(--gutter) - (100vw - min(100vw, var(--wide))) / 2)); }
.entry .watch a { text-decoration: none; }
.entry .watch .watch__link { color: var(--c-ink); }
.entry .vgrid { padding-inline-start: 0; margin-inline: 0; }
.entry .vgrid > li { margin: 0; padding: 0; }
.entry .vgrid > li::before { content: none; }
/* Phone: the three cards scroll sideways (the Watch Mass page keeps two to a row) */
@media (max-width: 39.999rem) {
.watch:not(.watch--all) .vgrid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-block-end: 0.25rem; }
.watch:not(.watch--all) .vgrid > li { scroll-snap-align: start; }
.watch--all .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Two-up: the title stays under the date and cross; four lines at most
(the full title is in the play button's label) */
.watch--all .vcard__title { font-size: 1.05rem; line-height: 1.18; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.watch--all .vcard__when { font-size: 0.66rem; letter-spacing: 0.12em; }
.watch--all .vcard__foot { margin-block-start: 0.75rem; }
}
/* Small tablets (40 to 48rem): three cards are too narrow for the title
under the date and cross. The Watch Mass page goes to two per row; the
home page keeps three with a smaller title, four lines at most. */
@media (min-width: 40rem) and (max-width: 47.999rem) {
.watch--all .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.watch:not(.watch--all) .vcard__title { font-size: 1.12rem; line-height: 1.18; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.watch:not(.watch--all) .vcard__when { font-size: 0.66rem; letter-spacing: 0.12em; }
.watch:not(.watch--all) .vcard__foot { margin-block-start: 0.75rem; }
.watch:not(.watch--all) :is(.vcard__btn, .vcard__fb) { width: 2.25rem; }
.watch:not(.watch--all) .vcard__dur { display: none; }
}
/* Small phones: the Watch Mass page shows one card per row */
@media (max-width: 29.999rem) {
.watch--all .vgrid { grid-template-columns: minmax(0, 1fr); }
.watch--all .vcard__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.5rem); -webkit-line-clamp: unset; line-clamp: none; display: block; }
.watch--all .vcard__when { font-size: var(--fs-label); }
}
/* ==========================================================================
31. EVENTS: the next occasion as a feature with a calendar leaf, the
following ones as an agenda; on the Events page, every upcoming event as
a card, then past events.
========================================================================== */
/* "All events" at the top right: it shares the title's row, centred on it */
.events__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.events__head > div { display: contents; }
.events__head .section-title { grid-column: 1; grid-row: 1; }
.events__head .section-intro { grid-column: 1 / -1; grid-row: 2; margin-block-end: 0; }
.events__head > .watch__link { grid-column: 2; grid-row: 1; justify-self: end; }
.events__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
/* The calendar leaf: day over month, like a page torn from a liturgical calendar */
.leaf {
position: absolute; inset-inline-start: clamp(1rem, 2vw, 1.5rem); inset-block-start: clamp(1rem, 2vw, 1.5rem); z-index: 2;
display: grid; justify-items: center; min-width: 4.75rem; padding: 0.6rem 0.8rem 0.55rem;
background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-hair-strong); outline: 1px solid var(--c-gold-line); outline-offset: -4px;
box-shadow: 0 10px 30px -12px rgb(20 19 18 / 0.45);
}
.leaf__day { font-family: var(--f-display); font-size: 2.2rem; font-weight: 400; line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; }
.leaf__month { margin-block-start: 0.3rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-crimson-text); }
.ev-feature__media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--c-band); }
.ev-feature__media img, .ev-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--img-grow-time) var(--img-grow-ease); }
.ev-feature__body { padding-block-start: 1.5rem; }
.ev-feature__when, .ev-card__when, .agenda__when { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.ev-feature__title { margin: 0.55rem 0 0; font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1.1; }
.ev-feature__title a, .ev-card__title a, .agenda__title a { color: var(--c-ink); text-decoration: none; }
.ev-feature__title a:hover, .ev-card__title a:hover, .agenda__title a:hover { color: var(--c-crimson-text); }
.ev-feature__text, .ev-card__text { margin: 1rem 0 0; color: var(--c-muted); max-width: 52ch; line-height: 1.6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.ev-feature:hover .ev-feature__media img, .ev-card:hover .ev-card__media img { transform: scale(var(--img-grow)); }
}
.ev-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.9rem 0 0; color: var(--c-ink); font-size: 0.9375rem; }
.ev-fact { display: inline-flex; align-items: center; gap: 0.45rem; }
.ev-fact .icon { width: 1.05rem; height: 1.05rem; color: var(--c-crimson-text); flex: none; }
.agenda { margin: 0; padding: 0; list-style: none; display: grid; }
.agenda__item { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.75rem; border-block-start: 1px solid var(--c-hair); }
.agenda__item:first-child { padding-block-start: 0; border: 0; }
.agenda__leaf { display: grid; justify-items: center; align-content: start; padding: 0.55rem 0.5rem 0.5rem; border: 1px solid var(--c-hair-strong); }
.agenda__leaf-day, .agenda__leaf .agenda__leaf__day { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; white-space: nowrap; }
.agenda__leaf__month { margin-block-start: 0.25rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-crimson-text); }
.agenda__title { margin: 0.4rem 0 0; font-size: 1.45rem; line-height: 1.15; }
.agenda__when { order: -1; }
.agenda__body { display: flex; flex-direction: column; }
.agenda__body .ev-facts { margin-block-start: 0.6rem; font-size: 0.875rem; color: var(--c-muted); }
.events__empty { margin: 0; padding: 2rem; background: var(--c-band); color: var(--c-muted); max-width: 52ch; }
/* Events page */
.ev-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 2.5rem); }
.ev-card { display: flex; flex-direction: column; }
.ev-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-block-end: 1.25rem; background: var(--c-band); }
.ev-card__title { margin: 0.45rem 0 0; font-size: 1.65rem; line-height: 1.12; }
.ev-card .ev-facts { font-size: 0.875rem; }
.events__past { margin-block-start: clamp(4rem, 8vw, 6rem); }
.events__past-title { margin: 0 0 2rem; font-size: var(--fs-h3); }
.agenda--past { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); column-gap: 3rem; }
.agenda--past .agenda__item:first-child { padding-block-start: 1.75rem; border-block-start: 1px solid var(--c-hair); }
/* Event page */
.event-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-block-end: var(--section); }
.event-layout > .entry { margin: 0; }
.ev-panel { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; padding: 1.75rem; background: var(--c-band); }
.ev-panel .leaf { position: static; justify-self: start; box-shadow: none; }
.ev-panel__list { margin: 0; display: grid; gap: 1rem; }
.ev-panel__list dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.ev-panel__list dd { margin: 0.25rem 0 0; color: var(--c-ink); }
@media (max-width: 63.999rem) {
.events__grid { grid-template-columns: minmax(0, 1fr); }
.event-layout { grid-template-columns: minmax(0, 1fr); }
.ev-panel { position: static; }
}
@media (max-width: 39.999rem) {
.leaf { min-width: 4rem; padding: 0.5rem 0.6rem; }
.leaf__day { font-size: 1.8rem; }
.agenda__item { grid-template-columns: 4rem minmax(0, 1fr); gap: 1.1rem; }
.agenda--past { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
32. CONTACT: ways to reach the parish (the call leads in crimson), the
form beside office hours, telephone and address, then a full-width map
with the way to the church set over it.
========================================================================== */
.cx { margin-inline: calc(50% - 50vw) !important; width: 100vw; max-width: none !important; margin-block: 0 !important; }
.cx > :not(.cx-map), .cx-map__inner { box-sizing: border-box; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.cx-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
.cx-action {
position: relative; display: grid; align-content: start; gap: 0.35rem;
min-height: 11rem; padding: clamp(1.5rem, 2.5vw, 2.25rem);
border: 1px solid var(--c-hair-strong); margin-inline-start: -1px;
color: var(--c-ink); text-decoration: none;
transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.cx-action:first-child { margin-inline-start: 0; }
.cx-action__icon { width: 1.75rem; height: 1.75rem; margin-block-end: 1.5rem; color: var(--c-crimson-text); }
.cx-action__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.cx-action__value { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem); line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: lining-nums; }
.cx-action__arrow { position: absolute; inset-inline-end: clamp(1.25rem, 2vw, 1.75rem); inset-block-start: clamp(1.5rem, 2.5vw, 2.25rem); width: 1.25rem; height: 1.25rem; transition: transform var(--quick) var(--ease); }
.cx-action:hover { background: var(--c-band); }
.cx-action:hover .cx-action__arrow { transform: translate(3px, -3px); }
.cx-action:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; z-index: 1; }
.cx-action:active { transform: translateY(1px); }
.cx-action--lead { background: var(--c-band); border-color: var(--c-hair-strong); color: var(--c-ink); outline: 1px solid var(--c-gold-line); outline-offset: -0.6rem; transition: background-color var(--quick) var(--ease), outline-color 0.45s var(--ease), outline-offset 0.45s var(--ease); }
.cx-action--lead .cx-action__value { font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.4rem); }
.cx-action--lead:hover { background: #ece8e0; border-color: var(--c-hair-strong); outline-color: var(--c-gold); outline-offset: -0.55rem; }
[dir="rtl"] .cx-action__arrow { transform: scaleX(-1); }
.cx-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); margin-block: clamp(4rem, 8vw, 6.5rem); align-items: start; }
.cx-form__title { margin: 0 0 0.75rem; font-size: var(--fs-h2); }
.cx-form__intro { margin: 0 0 2.25rem; color: var(--c-muted); max-width: 46ch; }
.cx-form .cx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.cx-form .wpcf7 textarea { min-height: 8.5rem; }
.cx-form .wpcf7 label { font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.cx-form .wpcf7 :where(input[type="text"], input[type="email"], input[type="tel"], textarea) { background: var(--c-paper); border: 1px solid var(--c-hair-strong); }
.cx-info { display: grid; gap: 0; background: var(--c-band); padding: clamp(1.75rem, 3vw, 2.5rem); }
.cx-block + .cx-block { margin-block-start: 1.75rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--c-hair); }
.cx-block__title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.cx-block__title .icon { width: 1.1rem; height: 1.1rem; color: var(--c-crimson-text); }
.cx-hours, .cx-phones { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.cx-hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-variant-numeric: tabular-nums; }
@media (max-width: 39.999rem) { .cx-hours li { flex-direction: column; gap: 0.1rem; } } /* day above time, every row alike */
.cx-hours li span:first-child { color: var(--c-muted); }
.cx-phones a { color: var(--c-ink); font-family: var(--f-display); font-size: 1.4rem; text-decoration: none; font-variant-numeric: lining-nums; }
.cx-phones a:hover { color: var(--c-crimson-text); }
.cx-address { font-style: normal; line-height: 1.6; }
.cx-map { position: relative; display: grid; min-height: clamp(30rem, 48vw, 38rem); }
.cx-map__frame { position: absolute; inset: 0; }
.cx-map__frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.55) contrast(1.02); }
.cx-map__card {
position: relative; z-index: 1; align-self: center;
box-sizing: border-box; width: min(27rem, calc(100% - 2 * var(--gutter)));
margin-inline-start: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
margin-block: 3rem;
padding: clamp(1.75rem, 3vw, 2.5rem);
background: var(--c-paper); border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.7rem;
box-shadow: 0 24px 60px -24px rgb(20 19 18 / 0.45);
}
.cx-map__title { margin: 0 0 0.75rem; font-size: var(--fs-h3); }
.cx-map__card > p { margin: 0 0 1.5rem; color: var(--c-muted); line-height: 1.6; }
.cx-routes { margin: 0 0 1.75rem; display: grid; gap: 1rem; }
.cx-routes dt { font-weight: 600; }
.cx-routes dd { margin: 0.2rem 0 0; color: var(--c-muted); font-size: 0.9375rem; line-height: 1.55; }
@media (max-width: 63.999rem) {
.cx-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cx-action--lead { grid-column: 1 / -1; }
.cx-action { margin-inline-start: 0; margin-block-start: -1px; }
.cx-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 39.999rem) {
.cx-actions { grid-template-columns: minmax(0, 1fr); }
.cx-action { min-height: 0; }
.cx-action__icon { margin-block-end: 0.75rem; }
.cx-form .cx-row { grid-template-columns: minmax(0, 1fr); }
.cx-map { display: block; min-height: 0; }
.cx-map__frame { position: relative; height: 18rem; }
.cx-map__card { width: auto; margin: -3rem var(--gutter) 0; }
}
/* Scroll reveal for sections 30-32 (same motion as section 23) */
.reveal-on :is(.watch__head, .vgrid > li, .watch__foot, .events__head, .ev-feature, .agenda__item, .ev-card, .cx-actions, .cx-form, .cx-info, .cx-map__card) {
transition: opacity var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms);
}
.reveal-on :is(.watch__head, .vgrid > li, .watch__foot, .events__head, .ev-feature, .agenda__item, .ev-card, .cx-actions, .cx-form, .cx-info, .cx-map__card):not(.is-revealed) {
opacity: 0; transform: translate3d(0, var(--reveal-shift), 0);
}
/* Contact: sit on the page's wide measure (aligned with the title); only the map is full-bleed */
.cx { margin-inline: auto !important; width: auto; max-width: var(--wide) !important; }
.cx > :not(.cx-map) { max-width: none; padding-inline: 0; }
.cx-map { margin-inline: calc(50% - 50vw); width: 100vw; }
.entry .cx a:not(.btn):not(.wpcf7-submit) { text-decoration: none; }
.entry .cx .cx-phones a:hover { color: var(--c-crimson-text); }
.cx-action:not(.cx-action--lead) .cx-action__value { font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem); overflow-wrap: normal; word-break: normal; }
.cx-form .wpcf7 form { gap: 1.5rem; }
.cx-form .wpcf7 label { display: grid; gap: 0.5rem; }
.cx-form .wpcf7 .wpcf7-form-control-wrap { display: block; }
.cx-form .wpcf7 :where(input[type="text"], input[type="email"], input[type="tel"], textarea) { box-sizing: border-box; width: 100%; }
.cx-map__card { margin-inline-start: max(var(--gutter), calc((100vw - var(--wide)) / 2)); }
.entry .cx a.cx-action { color: var(--c-ink); }
.entry .cx a.cx-action--lead { color: var(--c-ink); }
/* The map's own place card sits top-left, so the way to the church sits on the end side */
.cx-map__card { justify-self: end; margin-inline: 0 max(var(--gutter), calc((100vw - var(--wide)) / 2)); }
@media (max-width: 39.999rem) { .cx-map__card { margin: -3rem var(--gutter) 0; } }
/* Side margin when the screen is narrower than the wide measure plus gutters */
.cx > :not(.cx-map) { padding-inline: max(0px, calc(var(--gutter) - (100vw - min(100vw, var(--wide))) / 2)); }
/* Watch Mass and Events pages: on the wide measure, aligned with the page title */
.watch--all .watch__inner, .events--all { padding-inline: max(0px, calc(var(--gutter) - (100vw - min(100vw, var(--wide))) / 2)); }
.events--all { box-sizing: border-box; padding-block-end: var(--section); }
.entry :is(.watch, .events) a:not(.btn) { text-decoration: none; }
.entry .events a:not(.btn) { color: var(--c-ink); }
.entry .events a:not(.btn):hover { color: var(--c-crimson-text); }
.entry :is(.watch__list, .ev-cards, .agenda, .cx-hours, .cx-phones) { padding-inline-start: 0; margin-inline: 0; }
.entry :is(.watch__list, .ev-cards, .agenda, .cx-hours, .cx-phones) > li { margin: 0; padding-inline-start: 0; }
.entry :is(.watch__list, .ev-cards, .agenda, .cx-hours, .cx-phones) > li::before { content: none; }
.entry .vcard__when, .entry .vcard__foot { color: rgb(243 239 232 / 0.82); }
.entry .vcard__when.is-live, .entry .vcard__title { color: var(--c-on-dark); }
/* The cross in the mat: the top line of the frame parts at the centre and a
small Latin cross, drawn in the same fine line, stands in the opening with
its arms on the line. */
.vcard__frame { --mat-inset: clamp(0.5rem, 0.9vw, 0.8rem); --mat-c: rgb(243 239 232 / 0.32); --cross-w: 1.15rem; --cross-h: 1.7rem; --cross-gap: 1.1rem; }
.vcard__frame::after {
inset: var(--mat-inset);
border-color: var(--mat-c); border-block-start: 0;
background: linear-gradient(to right, var(--mat-c) 0 calc(50% - var(--cross-gap)), transparent 0 calc(50% + var(--cross-gap)), var(--mat-c) 0) top / 100% 1px no-repeat;
}
.vcard__cross {
position: absolute; z-index: 3; pointer-events: none;
inset-inline-start: calc(50% - var(--cross-w) / 2);
inset-block-start: calc(var(--mat-inset) - var(--cross-h) * 0.3);
width: var(--cross-w); height: var(--cross-h);
background:
linear-gradient(rgb(243 239 232 / 0.85), rgb(243 239 232 / 0.85)) 50% 0 / 1.5px 100% no-repeat,
linear-gradient(rgb(243 239 232 / 0.85), rgb(243 239 232 / 0.85)) 0 30% / 100% 1.5px no-repeat;
filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.45));
transition: opacity 0.6s var(--img-grow-ease);
}
.vcard__frame.is-playing .vcard__cross { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.vcard__frame:hover { --mat-c: rgb(243 239 232 / 0.7); }
}
/* A soft shade at the head as well, so the cross and the mat read on bright stills */
.vcard__frame::before { background: linear-gradient(to bottom, rgb(20 19 18 / 0.55) 0%, rgb(20 19 18 / 0) 22%), linear-gradient(to top, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.45) 34%, rgb(20 19 18 / 0) 60%); }
.vcard__frame { --cross-w: 1.3rem; --cross-h: 1.95rem; --cross-gap: 1.2rem; }
.vcard__frame::before { background: radial-gradient(9rem 5rem at 50% 0, rgb(20 19 18 / 0.55), rgb(20 19 18 / 0) 100%), linear-gradient(to bottom, rgb(20 19 18 / 0.6) 0%, rgb(20 19 18 / 0) 24%), linear-gradient(to top, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.45) 34%, rgb(20 19 18 / 0) 60%); }
.vcard__cross { background: linear-gradient(var(--c-on-dark), var(--c-on-dark)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--c-on-dark), var(--c-on-dark)) 0 30% / 100% 2px no-repeat; filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.7)); }
/* Room above the cross: the top line of the mat sits lower than the other three sides */
.vcard__frame { --mat-top: calc(var(--mat-inset) + 0.9rem); }
.vcard__frame::after { inset-block-start: var(--mat-top); }
.vcard__cross { inset-block-start: calc(var(--mat-top) - var(--cross-h) * 0.3); }
/* ==========================================================================
33. VISIT THE CHURCH (home): a postcard. A wide photograph of the church
from outside, and a limestone plaque laid over its lower edge (crimson
rule at the head, like the event leaves and the map card) with the
invitation and three practical columns: where, office hours (with a live
open/closed note), how to reach the parish.
========================================================================== */
.visit2 { margin-block: 0 !important; margin-inline: calc(50% - 50vw) !important; width: 100vw; max-width: none !important; padding-block: var(--section) calc(var(--section) * 1.08); }
.visit2__inner { box-sizing: border-box; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.visit2__media { margin: 0; overflow: hidden; aspect-ratio: 21 / 8; background: var(--c-band); }
.visit2__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; /* keeps the bell tower and its cross */ filter: saturate(0.85); transition: transform var(--img-grow-time) var(--img-grow-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.visit2__media:hover img { transform: scale(var(--img-grow)); }
}
.visit2__plaque {
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3.25rem);
margin: calc(-1 * clamp(4rem, 9vw, 8rem)) clamp(1rem, 4vw, 4rem) 0;
padding: clamp(2rem, 3.5vw, 3rem);
background: var(--c-paper); border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.75rem;
box-shadow: 0 30px 70px -35px rgb(20 19 18 / 0.45);
}
.visit2__title { margin: 0; font-size: clamp(2.2rem, 1.6rem + 1.7vw, 3.2rem); line-height: 1.05; }
.visit2__text { margin: 1rem 0 0; color: var(--c-muted); line-height: 1.6; max-width: 38ch; }
.visit2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-block-start: 1.75rem; }
.visit2__actions .btn:active { transform: translateY(1px); }
.visit2__col { padding-inline-start: 0; }
.visit2__label { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.visit2__label .icon { width: 1.1rem; height: 1.1rem; color: var(--c-crimson-text); flex: none; }
.visit2__value { font-style: normal; line-height: 1.6; color: var(--c-ink); }
.visit2__hours, .visit2__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.visit2__hours li { display: grid; gap: 0.1rem; font-variant-numeric: tabular-nums; }
.visit2__hours li span { color: var(--c-muted); font-size: 0.875rem; }
.visit2__lines a { color: var(--c-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.visit2__lines a:not(.visit2__mail) { font-family: var(--f-display); font-size: 1.3rem; font-variant-numeric: lining-nums; }
.visit2__lines a:hover { color: var(--c-crimson-text); }
.visit2__mail { font-size: 0.9375rem; overflow-wrap: anywhere; }
.reveal-on :is(.visit2__media, .visit2__plaque) { transition: opacity var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms); }
.reveal-on :is(.visit2__media, .visit2__plaque):not(.is-revealed) { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
/* Tablet: the invitation across the top of the plaque, the three columns below */
@media (max-width: 63.999rem) {
.visit2__plaque { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visit2__lead { grid-column: 1 / -1; }
}
/* Phone: the photograph squarer, the plaque stacked */
@media (max-width: 39.999rem) {
.visit2__media { aspect-ratio: 4 / 3; }
.visit2__plaque { grid-template-columns: minmax(0, 1fr); margin: -3rem 0.75rem 0; padding: 1.75rem 1.5rem; gap: 1.75rem; }
.visit2__col { padding: 0; }
}
/* Room to breathe (client, 15 October): the plaque in two tiers at every
width. The invitation runs across the top (title and text on the start
side, the actions on the end side); where, office hours and how to reach
the parish share the full width below, so each column has a third of
the plaque instead of a fifth. Space, not lines, separates them. */
.visit2__plaque {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 4.5vw, 4.5rem);
margin-inline: clamp(0.75rem, 2.5vw, 2.5rem);
padding: clamp(2.75rem, 5vw, 4.5rem) clamp(2.25rem, 5vw, 4.5rem);
outline-offset: -0.85rem;
}
.visit2__lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.1rem 3rem; }
.visit2__title { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.1rem); line-height: 1.08; }
.visit2__text { grid-column: 1; margin-block-start: 0; max-width: 46ch; line-height: 1.75; }
.visit2__lead > .visit2__title { grid-column: 1; }
.visit2__actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; flex-direction: column; align-items: flex-end; gap: 1.25rem; margin: 0; }
.visit2__col { font-size: 0.9688rem; }
.visit2__label { gap: 0.65rem; margin-block-end: 1.35rem; }
.visit2__label .icon { width: 1.2rem; height: 1.2rem; }
.visit2__value { line-height: 1.8; }
.visit2__hours { gap: 1rem; }
.visit2__hours li { gap: 0.2rem; }
.visit2__lines { gap: 0.8rem; }
.visit2__lines a:not(.visit2__mail) { font-size: 1.25rem; }
.visit2__mail { margin-block-start: 0.2rem; overflow-wrap: normal; word-break: normal; }
/* Tablet: the actions drop under the text */
@media (max-width: 63.999rem) {
.visit2__lead { grid-template-columns: minmax(0, 1fr); }
.visit2__actions { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 1rem 1.75rem; margin-block-start: 0.5rem; }
}
/* Phone: one column, still generous */
@media (max-width: 39.999rem) {
.visit2__plaque { grid-template-columns: minmax(0, 1fr); margin-inline: 0.75rem; padding: 2.25rem 1.75rem; gap: 2.25rem; outline-offset: -0.6rem; }
.visit2__actions { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
34. FOOTER: the church at night. Deep navy, warm ivory and muted gold
(the gold is the footer's own light; crimson stays the accent of the
pages). A gold arched corbel table, the band of small blind arches under
Romanesque eaves, runs across the head with a cross at its centre. Light
falls from above as from a clerestory. The week's Masses sit in an arched
panel; the site in four groups; how to reach and follow the parish.
========================================================================== */
.site-footer {
--ft-ivory: #f1eadb;
--ft-mute: rgb(241 234 219 / 0.7);
--ft-gold: #c2a66b;
--ft-gold-line: rgb(194 166 107 / 0.38);
--c-ink: var(--ft-ivory);
--c-muted: var(--ft-mute);
position: relative; isolation: isolate; overflow: hidden;
color: var(--ft-ivory);
background:
radial-gradient(60% 55% at 50% 0%, rgb(194 166 107 / 0.13), rgb(194 166 107 / 0) 70%),
radial-gradient(35% 45% at 88% 35%, rgb(64 92 156 / 0.16), rgb(64 92 156 / 0) 100%),
radial-gradient(30% 40% at 8% 70%, rgb(120 40 52 / 0.12), rgb(120 40 52 / 0) 100%),
linear-gradient(to bottom, #131c2f, #0c1322);
}
.ft { box-sizing: border-box; max-width: var(--wide); margin-inline: auto; padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem; }
.ft a { color: var(--ft-ivory); text-decoration: none; transition: color var(--quick) var(--ease); }
.ft a:hover { color: var(--ft-gold); }
.ft a:focus-visible { outline: 2px solid var(--ft-gold); outline-offset: 3px; }
.ft .icon { color: inherit; }
/* The arched corbel table with the cross at its centre */
.ft__band { display: flex; align-items: center; gap: 1.25rem; margin-block-end: clamp(3rem, 6vw, 4.5rem); }
.ft__arcade {
flex: 1; height: 15px; opacity: 0.75;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='15' viewBox='0 0 32 15'%3E%3Cpath d='M0 .75H32M3 15V9.5A13 8 0 0 1 29 9.5V15' fill='none' stroke='%23c2a66b' stroke-width='1'/%3E%3C/svg%3E") left top / 32px 15px repeat-x;
}
.ft__arcade:last-child { background-position: right top; }
.ft__cross {
flex: none; width: 1.5rem; height: 2.3rem; margin-block-start: 0.4rem;
background:
linear-gradient(var(--ft-gold), var(--ft-gold)) 50% 0 / 2px 100% no-repeat,
linear-gradient(var(--ft-gold), var(--ft-gold)) 0 30% / 100% 2px no-repeat;
filter: drop-shadow(0 0 10px rgb(194 166 107 / 0.55));
}
/* Identity and scripture */
.ft__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem clamp(3rem, 7vw, 7rem); align-items: end; }
.ft__brand { display: grid; justify-items: start; gap: 0.9rem; }
.ft__mark { width: 4.1rem; height: auto; filter: invert(1) sepia(0.35) saturate(0.6) brightness(1.02); }
.ft__name { font-family: var(--f-display); font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4.1rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; color: var(--ft-ivory); max-width: 13ch; }
.ft__place { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ft-gold); line-height: 1.7; max-width: 44ch; }
.ft a.ft__brand:hover .ft__name { color: var(--ft-ivory); }
.ft__verse { margin: 0; }
.ft__verse blockquote { margin: 0; padding: 0; border: 0; }
.ft__verse p { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.45rem, 1.15rem + 0.9vw, 2rem); line-height: 1.3; color: var(--ft-ivory); text-wrap: pretty; max-width: 26ch; }
.ft__verse p::before { content: "\201C"; }
.ft__verse p::after { content: "\201D"; }
.ft__verse figcaption { margin-block-start: 1rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ft-gold); }
/* Body: the Masses, the site, how to reach the parish */
.ft__body {
display: grid; grid-template-columns: minmax(17rem, 0.95fr) minmax(0, 1.75fr) minmax(14rem, 0.85fr);
gap: 3rem clamp(2.5rem, 4.5vw, 4.5rem); align-items: start;
margin-block-start: clamp(3.5rem, 6vw, 5rem); padding-block-start: clamp(3rem, 5vw, 4rem);
border-block-start: 1px solid rgb(241 234 219 / 0.12);
}
.ft__label { margin: 0 0 1.1rem; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ft-gold); }
.ft__more { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--btn-size); font-weight: var(--fw-strong); letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.6em; transition: text-decoration-color 0.45s var(--ease), color var(--quick) var(--ease); }
.ft .ft__more:hover { color: var(--ft-ivory); text-decoration-color: var(--ft-gold); }
.ft__more .icon { width: 1rem; height: 1rem; flex: none; transition: transform var(--quick) var(--ease); }
.ft__more:hover .icon:last-child { transform: translateX(4px); }
[dir="rtl"] .ft__more .icon:last-child { transform: scaleX(-1); }
.ft__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem clamp(2rem, 3.5vw, 3.5rem); }
.ft__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; font-size: 0.9375rem; }
.ft__links a { color: var(--ft-mute); }
.ft__links a:hover { color: var(--ft-ivory); }
.ft__reach { font-size: 0.9375rem; }
.ft__address { font-style: normal; line-height: 1.65; color: var(--ft-mute); }
.ft__lines { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.ft__lines li:first-child a { font-family: var(--f-display); font-size: 1.45rem; font-variant-numeric: lining-nums; }
.ft__actions { display: grid; justify-items: start; gap: 0.85rem; margin-block-start: 2rem; }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-block-start: clamp(3rem, 6vw, 4.5rem); padding-block-start: 1.5rem; border-block-start: 1px solid rgb(241 234 219 / 0.12); font-size: var(--fs-small); color: var(--ft-mute); }
.ft__base p { margin: 0; }
.ft__base a { color: var(--ft-mute); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 63.999rem) {
.ft__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
.ft__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ft__nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 39.999rem) {
.ft__band { gap: 0.75rem; }
.ft__body { grid-template-columns: minmax(0, 1fr); }
.ft__nav { grid-row: auto; gap: 2.25rem 1.5rem; }
}
.ft__place { display: grid; gap: 0.2rem; max-width: none; }
.ft__place span:last-child { color: var(--ft-mute); }
@media (max-width: 74.999rem) {
.ft__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ft__nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 39.999rem) {
.ft__body { grid-template-columns: minmax(0, 1fr); }
.ft__nav { grid-row: auto; }
}
/* Footer, second pass: the arch is a window onto the church at dusk (gold
keystone cross above, gold inset line within); the links in three columns;
the wider Maronite Church as one quiet line above the copyright. */
.ft__body { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) minmax(13rem, 15rem); }
.ft__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.ft__window {
position: relative; display: block; margin-block-start: 2.6rem;
aspect-ratio: 3 / 4; border-radius: 50% 50% 0 0 / 7rem 7rem 0 0;
box-shadow: 0 0 0 1px var(--ft-gold-line), 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.ft__window-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; border-radius: inherit; filter: saturate(0.9); }
.ft__window::after { /* the inset gold line, following the arch */
content: ""; position: absolute; inset: 0.55rem; border-radius: 50% 50% 0 0 / 6.4rem 6.4rem 0 0;
border: 1px solid rgb(194 166 107 / 0.55); pointer-events: none;
transition: border-color var(--quick) var(--ease);
}
.ft__window::before { /* the keystone cross above the arch */
content: ""; position: absolute; inset-block-start: -2.35rem; inset-inline-start: calc(50% - 0.6rem);
width: 1.2rem; height: 1.8rem;
background:
linear-gradient(var(--ft-gold), var(--ft-gold)) 50% 0 / 2px 100% no-repeat,
linear-gradient(var(--ft-gold), var(--ft-gold)) 0 30% / 100% 2px no-repeat;
filter: drop-shadow(0 0 8px rgb(194 166 107 / 0.5));
}
.ft a.ft__window:hover::after { border-color: var(--ft-gold); }
.ft a.ft__window:focus-visible { outline: 2px solid var(--ft-gold); outline-offset: 4px; }
.ft__related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem; margin-block-start: clamp(3rem, 5vw, 4rem); padding-block-start: 1.5rem; border-block-start: 1px solid rgb(241 234 219 / 0.12); }
.ft__related .ft__label { margin: 0; }
.ft__related-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.ft__related-list a { color: var(--ft-mute); }
.ft__related-list a:hover { color: var(--ft-ivory); }
.ft__related + .ft__base { margin-block-start: 1.5rem; }
@media (max-width: 74.999rem) {
.ft__body { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); }
.ft__nav { grid-column: 1 / -1; grid-row: 2; }
.ft__window { max-width: none; }
}
@media (max-width: 39.999rem) {
.ft__body { grid-template-columns: minmax(0, 1fr); }
.ft__nav { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft__window { width: min(17rem, 80%); margin-inline: auto; border-radius: 50% 50% 0 0 / 6rem 6rem 0 0; }
.ft__window::after { border-radius: 50% 50% 0 0 / 5.4rem 5.4rem 0 0; }
.ft__related { display: grid; }
}
.ft__nav .ft__label { white-space: nowrap; }
@media (min-width: 75rem) { .ft__body { grid-template-columns: minmax(12rem, 14.5rem) minmax(0, 1fr) minmax(13rem, 15rem); } }
@media (max-width: 39.999rem) { .ft__nav .ft__label { white-space: normal; } }
/* The keystone: a crimson medallion with the giving hand, set under the apex
of the vaulted edge (inside it, since the section is masked to the arch) */
.give__keystone {
position: absolute; z-index: 2; pointer-events: none;
inset-block-start: calc(var(--arch) * 0.32);
inset-inline-start: 50%; transform: translateX(-50%);
display: grid; place-items: center;
width: clamp(3.4rem, 4.5vw, 4.4rem); aspect-ratio: 1; border-radius: 50%;
background: var(--c-crimson); color: var(--c-on-dark);
box-shadow: 0 0 0 1px rgb(243 239 232 / 0.55), 0 0 0 0.45rem rgb(20 19 18 / 0.28), 0 10px 30px -8px rgb(0 0 0 / 0.55);
}
.give__keystone .icon { width: 52%; height: 52%; }
[dir="rtl"] .give__keystone { transform: translateX(50%); }
@media (max-width: 39.999rem) {
.give__keystone { inset-block-start: 0.9rem; width: 3rem; }
}
.reveal-on .give__keystone { transition: opacity 1.2s var(--reveal-ease) 0.9s; }
.reveal-on .give__bg:not(.is-revealed) ~ .give__keystone { opacity: 0; }
.give__keystone { inset-block-start: clamp(0.8rem, 1.2vw, 1.1rem); }
@media (min-width: 40rem) { .give__inner { padding-block-start: calc(var(--arch) * 0.55 + clamp(1.5rem, 3vw, 2.5rem) + 2.25rem); } }
/* The mat of the vault (replaces the crimson keystone medallion): a fine
ivory line inset from the edges, following the arch at the head, down the
sides and along the foot, as on the Watch Mass cards. At the apex the
line parts and the giving hand, drawn in the same fine line, stands in
the opening. */
.give__mat {
--mat-i: clamp(0.7rem, 1.2vw, 1.1rem);
--mat-c: rgb(243 239 232 / 0.4);
--gap: clamp(1.7rem, 2.2vw, 2.1rem);
position: absolute; inset: var(--mat-i); z-index: 2; pointer-events: none;
}
.give__mat::before { /* the arch */
content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
height: calc(var(--arch) - var(--mat-i));
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.5 100A49.5 99.5 0 0 1 99.5 100' fill='none' stroke='%23f3efe8' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
opacity: 0.4;
-webkit-mask: linear-gradient(to right, #000 calc(50% - var(--gap)), transparent 0 calc(50% + var(--gap)), #000 0);
mask: linear-gradient(to right, #000 calc(50% - var(--gap)), transparent 0 calc(50% + var(--gap)), #000 0);
}
.give__mat::after { /* the sides and the foot */
content: ""; position: absolute; inset: calc(var(--arch) - var(--mat-i) - 1px) 0 0;
border: 1px solid var(--mat-c); border-block-start: 0;
}
.give__keystone {
position: absolute; inset-block-start: calc(var(--key) * -0.5); inset-inline-start: calc(50% - var(--key) / 2);
--key: clamp(1.9rem, 2.4vw, 2.3rem);
width: var(--key); height: var(--key); transform: none;
display: block; border-radius: 0; background: none; box-shadow: none;
color: var(--c-on-dark);
filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.6));
}
.give__keystone .icon { display: block; width: 100%; height: 100%; }
[dir="rtl"] .give__keystone { transform: none; }
@media (max-width: 39.999rem) {
.give__keystone { inset-block-start: calc(var(--key) * -0.5); width: var(--key); --key: 1.7rem; }
}
.reveal-on .give__mat { transition: opacity 1.2s var(--reveal-ease) 0.9s; }
.reveal-on .give__bg:not(.is-revealed) ~ .give__mat { opacity: 0; }
/* The text no longer needs room for the medallion */
@media (min-width: 40rem) { .give__inner { padding-block-start: calc(var(--arch) * 0.55 + clamp(1.5rem, 3vw, 2.5rem) + 1rem); } }
/* Room above the giving hand: the frame line sits lower at the head */
.give__mat { --mat-top: calc(var(--mat-i) + 1.1rem); inset: var(--mat-top) var(--mat-i) var(--mat-i); }
.give__mat::before { height: calc(var(--arch) - var(--mat-top)); }
.give__mat::after { inset-block-start: calc(var(--arch) - var(--mat-top) - 1px); }
@media (max-width: 39.999rem) { .give__mat { --mat-top: calc(var(--mat-i) + 0.8rem); } }
/* ==========================================================================
35. HISTORY (/history/): the story of the church told in pictures
The live wording in its order (inc/history.php). Each chapter has its own
composition: cover lancet, archive scenes, interlude, incipit, plates,
storeys, carved tablet, sea, museum print, works, finale through the arch.
Dates set large are only those in the text. No one-sided accents: frames
are full hairlines with the gold inner line; rows divide with hairlines.
========================================================================== */
.site-main--history { padding-block-end: 0; }
.history > .hx { max-width: none !important; width: auto; margin-block: 0 !important; margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1) !important; } /* edge to edge without 100vw, which counts the scrollbar and clipped the finale credit */
.hx {
--hx-w: min(var(--wide), 100% - 2 * var(--gutter));
--hx-gable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 170' preserveAspectRatio='none'%3E%3Cpath d='M0.5 170L150 1L299.5 170' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.hx p { margin: 0; }
.hx blockquote { margin: 0; padding: 0; border: 0; quotes: none; }
.hx blockquote::before, .hx blockquote::after { content: none; }
.hx figure { margin: 0; }
.hx-frame { position: relative; overflow: hidden; }
.hx-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--img-grow-time) var(--img-grow-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.hx-frame:hover img { transform: scale(var(--img-grow)); }
}
.hx-credit {
margin-block-start: 0.85rem;
font-family: var(--f-sans); font-size: 0.6875rem; font-weight: 700; line-height: 1.5;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted);
}
/* Light-on-dark chapters (cover, storeys, finale) */
.hx-cover, .hx-storeys, .hx-finale {
--c-ink: var(--c-on-dark);
--c-muted: rgb(243 239 232 / 0.8);
--c-hair: rgb(243 239 232 / 0.2);
--c-hair-strong: rgb(243 239 232 / 0.55);
--c-paper: #141312;
--c-crimson-text: #f2a9ac;
--c-gold: #c9ad72;
--c-gold-line: rgb(201 173 114 / 0.6);
color: var(--c-on-dark);
}
/* A date from the text, set large; a range joined by a fine gold rule */
.hx-year {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em;
margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem) !important;
font-family: var(--f-display); font-weight: 400;
font-size: clamp(3.2rem, 2.2rem + 4vw, 6rem); line-height: 1; letter-spacing: -0.02em;
color: var(--c-ink);
}
.hx-year span + span::before {
content: ""; display: inline-block; vertical-align: middle;
width: 0.55em; height: 1px; margin-inline-end: 0.3em; background: var(--c-gold);
}
.hx-year--sm { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem); }
.hx-plates p:not(.hx-year), .hx-sea__panel p:not(.hx-year), .hx-works p:not(.hx-year) {
font-size: 1.125rem; line-height: 1.8; color: var(--c-ink); max-width: 62ch;
}
/* The illuminated initial */
.has-initial::first-letter {
float: inline-start;
margin: 0.06em 0.14em 0 0;
font-family: var(--f-display); font-size: 4.4em; line-height: 0.82; font-weight: 400;
color: var(--c-crimson-text);
}
/* ---- Cover: the church at night, the title inside a lancet window ---- */
.hx-cover {
position: relative; isolation: isolate; overflow: hidden;
display: grid; place-items: center;
min-height: 100svh; box-sizing: border-box;
padding: calc(var(--header-h) + 1.5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
}
.hx-cover__bg { position: absolute; inset: 0; z-index: -2; }
.hx-cover__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
.hx-cover__bg img { animation: hx-settle 7s var(--reveal-ease) both; }
.hx-cover__window { animation: hx-rise 1.8s var(--reveal-ease) 0.3s both; }
}
@keyframes hx-settle { from { transform: scale(1.09); } to { transform: none; } }
@keyframes hx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hx-cover::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(42% 60% at 50% 58%, rgb(20 19 18 / 0.62) 0%, rgb(20 19 18 / 0.25) 70%, rgb(20 19 18 / 0) 100%),
linear-gradient(to bottom, rgb(20 19 18 / 0.6) 0%, rgb(20 19 18 / 0.05) 30%, rgb(20 19 18 / 0.1) 70%, rgb(20 19 18 / 0.55) 100%);
}
.hx-cover__window {
position: relative; box-sizing: border-box;
width: min(40rem, 100%); height: min(76svh, 44rem); min-height: 26rem;
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
padding: 0 clamp(1.5rem, 5vw, 3.5rem) clamp(2.25rem, 5vh, 3.5rem);
text-align: center;
}
.hx-cover__window::before, .hx-cover__window::after { /* a double lancet line: gold outside, ivory inside */
content: ""; position: absolute; pointer-events: none;
-webkit-mask: var(--lancet-line) center / 100% 100% no-repeat; mask: var(--lancet-line) center / 100% 100% no-repeat;
}
.hx-cover__window::before { inset: 0; background: var(--c-gold-line); }
/* The cover photograph (the church through a stone arch) frames the title itself: no drawn lancet over it */
.hx-cover__window::before, .hx-cover__window::after, .hx-cover__cross { display: none; }
.hx-cover__window::after { inset: 0.7rem 0.7rem 0; background: rgb(243 239 232 / 0.28); }
.hx-cover__cross { position: absolute; inset-block-start: 17%; inset-inline-start: 50%; transform: translateX(-50%); color: var(--c-gold); }
.hx-cover__cross .icon { display: block; width: clamp(2rem, 3vw, 2.6rem); height: auto; filter: drop-shadow(0 0 10px rgb(255 226 180 / 0.45)); }
.hx-cover .crumbs ol { justify-content: center; margin-block-end: clamp(1.5rem, 4vh, 2.5rem); }
.hx-cover__label {
margin-block-end: 1rem !important;
font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
color: var(--c-gold);
}
.hx-cover__title {
margin: 0; font-family: var(--f-display); font-weight: 400;
font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem); line-height: var(--lh-display); letter-spacing: var(--ls-display);
color: var(--c-on-dark); text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / 0.45);
}
/* ---- Archive: the 1763 account as four scenes beside a sticky lancet ---- */
.hx-archive {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start;
}
.hx-archive__aside { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); text-align: center; }
.hx-archive__media .hx-frame {
aspect-ratio: 300 / 420;
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat; mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.hx-archive__source { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-block-start: 2rem !important; }
.hx-archive__source-name {
max-width: 18rem;
font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; line-height: 1.7;
letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.hx-archive__source-year { font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--c-ink); }
.hx-archive__doc {
position: relative;
padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.75rem) !important;
background: var(--c-band);
border: 1px solid var(--c-hair) !important;
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
}
.hx-scene { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); padding-block: clamp(1.75rem, 3.5vw, 2.6rem); }
.hx-scene + .hx-scene { border-block-start: 1px solid var(--c-hair); }
.hx-scene__icon { color: var(--c-crimson); padding-block-start: 0.35rem; }
.hx-scene__icon .icon { display: block; width: 2rem; height: 2rem; }
.hx-scene p { font-family: var(--f-display); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.85; color: var(--c-ink); }
/* ---- Interlude: the church today ---- */
.hx-interlude { height: clamp(20rem, 58vw, 46rem); overflow: hidden; }
.hx-interlude img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* ---- Incipit: Saint Peter's journey ---- */
.hx-incipit { width: min(46rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
.hx-route { position: relative; list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-route::before { /* the road from the first city to the last */
content: ""; position: absolute; inset-block-start: 1.15rem; inset-inline: 16.667%;
height: 0; border-block-start: 1px dashed var(--c-gold);
}
.hx-route li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.hx-route .icon { display: block; box-sizing: border-box; width: 2.3rem; height: 2.3rem; padding: 0.3rem; background: var(--c-paper); color: var(--c-muted); }
.hx-route .is-here .icon { color: var(--c-crimson); }
.hx-route span { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.hx-route .is-here span { color: var(--c-ink); }
.hx-incipit__text { font-family: var(--f-display); font-size: var(--fs-lede); line-height: 1.6; color: var(--c-ink); }
/* ---- Plates: the Crusader church ---- */
.hx-plates {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 3rem); align-items: start;
}
.hx-plates__text { grid-column: 1 / span 6; grid-row: 1; }
.hx-plate--plan { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.hx-plate--sketch { grid-column: 1 / span 7; grid-row: 2 / span 2; }
.hx-plates__quake { grid-column: 9 / span 4; grid-row: 3; align-self: end; }
.hx-plate .hx-frame {
padding: clamp(0.9rem, 2.2vw, 1.75rem);
background: var(--c-band);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.5rem;
}
.hx-plate .hx-frame img { height: auto; mix-blend-mode: multiply; }
/* ---- Storeys: the church as stable, barracks and headquarters ---- */
.hx-storeys { position: relative; isolation: isolate; overflow: hidden; padding: var(--section) var(--gutter); }
.hx-storeys__bg { position: absolute; inset: 0; z-index: -2; }
.hx-storeys__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.7); }
.hx-storeys::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(20 19 18 / 0.92) 0%, rgb(20 19 18 / 0.8) 55%, rgb(20 19 18 / 0.7) 100%); }
.hx-storeys__inner {
width: min(var(--wide), 100%); margin-inline: auto;
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(3rem, 7vw, 7rem); align-items: center;
}
.hx-storeys__text { font-family: var(--f-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.7; color: var(--c-on-dark); }
.hx-storeys__floors {
position: relative; list-style: none; margin: clamp(4rem, 7vw, 5.5rem) 0 0; padding: 0;
border: 1px solid var(--c-gold-line);
}
.hx-storeys__floors::before { /* the roof: a gable over the three floors */
content: ""; position: absolute; inset-inline: -1px; inset-block-end: 100%;
height: clamp(3.5rem, 6vw, 5rem); background: var(--c-gold-line);
-webkit-mask: var(--hx-gable) center / 100% 100% no-repeat; mask: var(--hx-gable) center / 100% 100% no-repeat;
}
.hx-storeys__floors li { display: grid; grid-template-columns: 2.75rem 2rem minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); }
.hx-storeys__floors li + li { border-block-start: 1px solid var(--c-hair); }
.hx-floor__n { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: var(--c-gold); }
.hx-storeys__floors .icon { width: 1.9rem; height: 1.9rem; color: var(--c-on-dark); }
.hx-floor__name { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-dark); }
/* ---- Tablet: 1764 and the marble plaque, carved in stone ---- */
.hx-tablet { width: min(54rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; text-align: center; }
.hx-tablet .hx-year { justify-content: center; }
.hx-tablet__text { max-width: 42rem; margin-inline: auto !important; font-size: 1.125rem; line-height: 1.8; }
.hx-tablet__stone {
--chamfer: clamp(1.1rem, 2.5vw, 1.75rem);
--edge: var(--c-gold);
position: relative;
margin-block-start: clamp(2.25rem, 4vw, 3rem) !important;
padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 7vw, 5.5rem) !important;
border: 1px solid var(--edge) !important;
background-color: #f1efea;
background-image:
linear-gradient(to bottom right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(to bottom left, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(to top left, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(to top right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
radial-gradient(80% 40% at 78% 82%, rgb(30 29 27 / 0.035) 0%, transparent 70%),
radial-gradient(60% 30% at 18% 30%, rgb(255 255 255 / 0.7) 0%, transparent 70%),
radial-gradient(120% 90% at 30% 20%, #f8f7f4 0%, #ecebe5 100%);
background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 0, 0 0;
background-size: var(--chamfer) var(--chamfer), var(--chamfer) var(--chamfer), var(--chamfer) var(--chamfer), var(--chamfer) var(--chamfer), auto, auto, auto;
background-repeat: no-repeat;
background-origin: border-box;
clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.hx-tablet__cross { display: block; margin-block-end: 1.5rem; color: #8d877d; }
.hx-tablet__cross .icon { width: 1.9rem; height: 1.9rem; }
.hx-tablet__stone p {
font-family: var(--f-display); font-size: clamp(0.95rem, 0.86rem + 0.4vw, 1.15rem); line-height: 2.05;
letter-spacing: 0.09em; text-transform: uppercase; text-wrap: balance;
color: #4c4740; text-shadow: 0 1px 0 rgb(255 255 255 / 0.9), 0 -1px 0 rgb(30 29 27 / 0.12);
}
/* ---- Sea: 1840, the panel laid over the photograph ---- */
.hx-sea {
margin-block: var(--section);
display: grid; grid-template-columns: var(--gutter) repeat(12, minmax(0, 1fr)); align-items: center;
}
.hx-sea__media { grid-column: 6 / -1; grid-row: 1; }
.hx-sea__media .hx-frame { aspect-ratio: 16 / 10; }
.hx-sea__panel {
grid-column: 2 / span 6; grid-row: 1; z-index: 1;
padding: clamp(2rem, 4vw, 3.5rem);
background: var(--c-paper);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
}
.hx-sea__icon { display: block; margin-block-end: 1rem; color: var(--c-crimson); }
.hx-sea__icon .icon { width: 2.1rem; height: 2.1rem; }
/* ---- Print: the 1935 photograph mounted like a museum print ---- */
.hx-print { width: min(50rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; text-align: center; }
.hx-print__mount .hx-frame {
padding: clamp(0.9rem, 3.5vw, 2.6rem);
background: #efede7;
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.5rem;
box-shadow: 0 40px 70px -50px rgb(30 29 27 / 0.55);
}
.hx-print__mount img { height: auto; }
.hx-print__text { max-width: 38rem; margin: clamp(2.25rem, 4vw, 3rem) auto 0 !important; font-family: var(--f-display); font-size: var(--fs-lede); line-height: 1.55; color: var(--c-ink); text-wrap: balance; }
/* ---- Works: the bell dome and the windows; the excavations ---- */
.hx-works {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 3rem);
}
.hx-works__text { grid-column: 1 / span 7; }
.hx-works__gallery { display: contents; } /* the photographs sit on the chapter grid, so the 1970s paragraph can tuck in under the two shorter ones */
.hx-works__a { grid-column: 1 / span 5; grid-row: 2 / span 2; }
.hx-works__b { grid-column: 6 / span 3; grid-row: 2; }
.hx-works__c { grid-column: 9 / span 4; grid-row: 2; }
.hx-works__a .hx-frame { aspect-ratio: 4 / 5; }
.hx-works__a img { object-position: 46% 20%; }
.hx-works__b { margin-block-start: clamp(3rem, 7vw, 6rem); }
.hx-works__b .hx-frame { aspect-ratio: 300 / 420; -webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat; mask: var(--lancet-fill) center / 100% 100% no-repeat; }
.hx-works__c { margin-block-start: clamp(1.5rem, 3.5vw, 3rem); }
.hx-works__c .hx-frame { aspect-ratio: 1 / 1; }
.hx-works__mosaic { grid-column: 7 / -1; grid-row: 3; align-self: start; }
/* ---- Finale: through the arch, to the present day ---- */
.hx-finale {
position: relative; isolation: isolate; overflow: hidden;
display: grid; place-items: center; text-align: center;
min-height: min(94svh, 58rem); box-sizing: border-box;
padding: var(--section) var(--gutter);
}
.hx-finale__bg { position: absolute; inset: 0; z-index: -2; }
.hx-finale__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; filter: sepia(0.25) brightness(0.85); }
.hx-finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 52%, rgb(20 19 18 / 0.72) 0%, rgb(20 19 18 / 0.55) 60%, rgb(20 19 18 / 0.78) 100%); }
.hx-finale__inner { max-width: 50rem; }
.hx-year--ghost {
justify-content: center; margin: 0 0 -0.32em !important;
font-size: clamp(6.5rem, 3rem + 15vw, 17rem); line-height: 1;
color: transparent; -webkit-text-stroke: 1px var(--c-gold-line);
}
.hx-finale__text {
position: relative;
font-family: var(--f-display); font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.7rem); line-height: 1.32;
color: var(--c-on-dark); text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.4);
}
.hx-finale__credit { position: absolute; inset-block-end: 1.1rem; inset-inline-end: var(--gutter); margin: 0 !important; color: rgb(243 239 232 / 0.72); }
/* ---- Below 64rem: one column, the compositions loosen ---- */
@media (max-width: 63.999rem) {
.hx-archive { grid-template-columns: minmax(0, 1fr); }
.hx-archive__aside { position: static; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem; align-items: end; text-align: start; }
.hx-archive__source { align-items: flex-start; margin: 0 !important; }
.hx-plates, .hx-works { grid-template-columns: minmax(0, 1fr); }
.hx-plates > *, .hx-works > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
.hx-plate--plan { width: min(26rem, 100%); }
.hx-storeys__inner { grid-template-columns: minmax(0, 1fr); }
.hx-sea { grid-template-columns: minmax(0, 1fr); }
.hx-sea__media, .hx-sea__panel { grid-column: 1; grid-row: auto; }
.hx-sea__panel { margin: clamp(-4rem, -8vw, -2.5rem) var(--gutter) 0; }
.hx-works__gallery { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); }
.hx-works__gallery > * { grid-row: auto; }
.hx-works__b { grid-column: 1; }
.hx-works__c { grid-column: 2; }
.hx-works__a { grid-column: 1 / -1; }
.hx-works__a .hx-frame { aspect-ratio: 4 / 3; }
.hx-works__b, .hx-works__c { margin-block-start: 0; }
.hx-works__c .hx-frame { aspect-ratio: 300 / 420; }
}
@media (max-width: 39.999rem) {
.hx-cover__window { height: auto; min-height: 72svh; padding-inline: 1.25rem; }
.hx-cover__window::after { inset: 0.5rem 0.5rem 0; }
.hx-cover .crumbs { display: none; }
.hx-archive__aside { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
.hx-scene { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.hx-route span { font-size: 0.625rem; letter-spacing: 0.12em; }
.hx-finale__credit { inset-inline: var(--gutter); text-align: center; }
}
/* ==========================================================================
36. THE CHURCH PAGES: Restoration, Baptism House Dome, Stained-Glass
Windows, Icons, Archive (stjm/church-page, inc/church-pages.php).
Same family as History (section 35: .hx, plates, credits, years), each
page with its own composition. Template "Story" (no page intro).
========================================================================== */
.site-main--story { padding-block-end: 0; }
.cp-text { font-size: 1.125rem; line-height: 1.8; color: var(--c-ink); max-width: 62ch; }
.cp-num { font-family: var(--f-display); font-size: 1.04em; color: var(--c-crimson-text); white-space: nowrap; }
/* ---- Covers ---- */
.cp-cover .crumbs ol { margin-block-end: clamp(1.25rem, 3vw, 2rem); }
.cp-cover__title {
margin: 0; font-family: var(--f-display); font-weight: 400;
font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.6rem); line-height: var(--lh-display); letter-spacing: var(--ls-display);
text-wrap: balance;
}
/* Full-bleed photograph, title at the foot on the start side */
.cp-cover--photo {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: flex-end;
min-height: min(92svh, 60rem); box-sizing: border-box;
padding: calc(var(--header-h) + 2rem) 0 clamp(3rem, 7vh, 5rem);
--c-ink: var(--c-on-dark); --c-muted: rgb(243 239 232 / 0.8); --c-hair-strong: rgb(243 239 232 / 0.55);
color: var(--c-on-dark);
}
.cp-cover--photo .cp-cover__bg { position: absolute; inset: 0; z-index: -2; }
.cp-cover--photo .cp-cover__bg img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
.cp-cover--photo .cp-cover__bg img { animation: hx-settle 7s var(--reveal-ease) both; }
.cp-cover .cp-cover__text { animation: hx-rise 1.6s var(--reveal-ease) 0.25s both; }
}
.cp-cover--photo::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgb(20 19 18 / 0.55) 0%, rgb(20 19 18 / 0) 26%),
linear-gradient(to top, rgb(20 19 18 / 0.82) 0%, rgb(20 19 18 / 0.35) 40%, rgb(20 19 18 / 0) 70%);
}
.cp-cover--photo .cp-cover__text { width: var(--hx-w); margin-inline: auto; }
.cp-cover--photo .cp-cover__title { color: var(--c-on-dark); max-width: 14ch; text-shadow: 0 2px 30px rgb(0 0 0 / 0.4); }
/* Paper cover with the photograph in a lancet (or a round seal) */
.cp-cover--arch, .cp-cover--seal {
width: var(--hx-w); margin-inline: auto; box-sizing: border-box;
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center;
padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.cp-cover--arch .cp-cover__frame {
aspect-ratio: 300 / 420; max-height: 78svh; margin-inline: auto; overflow: hidden;
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat; mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.cp-cover--seal .cp-cover__frame {
aspect-ratio: 1; border-radius: 50%; overflow: hidden;
outline: 1px solid var(--c-gold-line); outline-offset: clamp(0.6rem, 1.2vw, 1rem);
margin: clamp(0.6rem, 1.2vw, 1rem);
}
.cp-cover__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-cover__media .hx-credit { text-align: center; }
/* ---- Restoration ---- */
.cp--restoration .cp-cover__bg img { object-position: 50% 40%; }
.cp-works { width: var(--hx-w); margin: var(--section) auto; }
.cp-rail { /* the years of the works on one century, 1900 to 2000 */
position: relative; list-style: none; margin: 0 0 clamp(3rem, 6vw, 4.5rem); padding: 0;
height: 6.5rem;
}
.cp-rail::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: 1px solid var(--c-hair-strong); }
.cp-rail li { position: absolute; inset-block: 0; inset-inline-start: calc(var(--at) * 100%); width: 0; }
.cp-rail li::before { content: ""; position: absolute; inset-block-start: calc(50% - 0.6rem); height: 1.2rem; border-inline-start: 1px solid var(--c-crimson); }
.cp-rail span {
position: absolute; inset-block-start: 0; transform: translateX(-50%);
font-family: var(--f-display); font-size: clamp(1rem, 0.85rem + 0.6vw, 1.45rem); line-height: 1; color: var(--c-ink);
}
.cp-rail .is-low span { inset-block-start: auto; inset-block-end: 0; }
[dir="rtl"] .cp-rail span { transform: translateX(50%); }
.cp-works__lede { max-width: 58rem; font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.6rem); line-height: 1.65; color: var(--c-ink); }
.cp-pair {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.cp-pair__tall .hx-frame { aspect-ratio: 2 / 3; }
.cp-pair__body { padding-block-start: clamp(0rem, 6vw, 5rem); }
.cp-pair__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.6vw, 1.4rem); margin-block-start: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.cp-pair__a .hx-frame { aspect-ratio: 4 / 5; }
.cp-pair__b { margin-block-start: clamp(2rem, 5vw, 4rem); }
.cp-pair__b .hx-frame { aspect-ratio: 1; }
.cp-pair__b img { object-position: 50% 50%; }
.cp-vow {
position: relative; isolation: isolate; text-align: center;
padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
}
.cp-vow::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.cp-vow__cross { display: block; margin-block-end: 1.5rem; color: var(--c-crimson); }
.cp-vow__cross .icon { width: 2.2rem; height: 2.2rem; }
.cp-vow p { max-width: 40rem; margin-inline: auto !important; font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.4; color: var(--c-ink); text-wrap: balance; }
.cp--restoration + .more-wrap, .cp-vow { margin-block-end: 0; }
/* ---- Baptism House Dome ---- */
.cp-lamens { width: min(60rem, 100% - 2 * var(--gutter)); margin: clamp(3rem, 7vw, 5.5rem) auto var(--section); }
.cp-lamens__text { font-family: var(--f-display); font-size: clamp(1.35rem, 1.05rem + 1.15vw, 2.15rem); line-height: 1.55; color: var(--c-ink); }
.cp-plates {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 3rem); align-items: start;
}
.cp-plates__plan { grid-column: 1 / span 4; grid-row: 1; }
.cp-plates__text { grid-column: 6 / span 7; grid-row: 1; align-self: center; }
.cp-plates__louvre { grid-row: 2; align-self: end; }
.cp-plates__icon { display: block; margin-block-end: 1.25rem; color: var(--c-crimson); }
.cp-plates__icon .icon { width: 2.1rem; height: 2.1rem; }
.cp-strip { width: var(--hx-w); margin: var(--section) auto; }
.cp-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); align-items: start; }
.cp-strip__list > li:nth-child(even) { margin-block-start: clamp(2rem, 5vw, 4rem); }
.cp-strip__item .hx-frame { aspect-ratio: 3 / 4; }
.cp-strip__item img { filter: saturate(0.9); }
/* ---- Stained-Glass Windows: light in the dark ---- */
.cp--glass .cp-cover__bg img { object-position: 50% 42%; }
.cp-light {
position: relative; isolation: isolate; overflow: hidden;
padding: var(--section) var(--gutter);
background: #141312; color: var(--c-on-dark); text-align: center;
--c-ink: var(--c-on-dark); --c-muted: rgb(243 239 232 / 0.78); --c-gold-line: rgb(201 173 114 / 0.6);
}
.cp-light::before { /* coloured light falling from the windows */
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(28% 32% at 32% 52%, rgb(164 34 42 / 0.28) 0%, transparent 70%),
radial-gradient(26% 30% at 52% 46%, rgb(62 92 160 / 0.24) 0%, transparent 70%),
radial-gradient(26% 30% at 70% 54%, rgb(201 160 80 / 0.22) 0%, transparent 70%);
filter: blur(30px);
}
.cp-light__lede { max-width: 46rem; margin-inline: auto !important; font-family: var(--f-display); font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.35rem); line-height: 1.45; color: var(--c-on-dark); text-wrap: balance; }
.cp-light__windows {
width: min(var(--wide), 100%); margin: clamp(3.5rem, 7vw, 6rem) auto clamp(6rem, 10vw, 8rem);
display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: end;
}
.cp-light__w .hx-frame {
aspect-ratio: 300 / 480;
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat; mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.cp-light__w--a img { object-position: 50% 30%; }
.cp-light__w--c img { object-position: 50% 30%; }
.cp-light__w { position: relative; }
.cp-light__w .hx-credit { position: absolute; inset-inline: 0; inset-block-start: 100%; color: rgb(243 239 232 / 0.6); } /* credits hang below, so the three windows stand on one line */
.cp-light__text { max-width: 44rem; margin-inline: auto !important; font-size: 1.125rem; line-height: 1.85; color: rgb(243 239 232 / 0.88); }
/* ---- Archive ---- */
.cp-register {
width: min(66rem, 100% - 2 * var(--gutter)); margin: var(--section) auto clamp(3rem, 6vw, 5rem);
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start;
}
.cp-register__count { font-family: var(--f-display); font-size: clamp(6rem, 3.5rem + 9vw, 11rem); line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--c-gold); }
.cp-deed { width: min(54rem, 100% - 2 * var(--gutter)); margin: 0 auto var(--section); }
.cp-deed__sheet {
position: relative; margin: 0;
padding: clamp(2.25rem, 6vw, 4.75rem) clamp(1.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
background: radial-gradient(120% 90% at 50% 0%, #fefefd 0%, #f6f5f1 70%, #efede7 100%);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.75rem;
box-shadow: 0 40px 80px -60px rgb(30 29 27 / 0.55);
}
.cp-deed__text p { font-family: var(--f-display); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.95; color: var(--c-ink); }
.cp-deed__sign { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; margin-block-start: clamp(2rem, 4vw, 3rem); }
.cp-deed__name { font-family: var(--f-display); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); color: var(--c-ink); }
.cp-deed__seal { /* a wax seal pressed beside the name */
display: grid; place-items: center; flex: none;
width: 3.6rem; height: 3.6rem; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #c0424a 0%, var(--c-crimson) 45%, #6e161c 100%);
box-shadow: inset 0 0 0 0.3rem rgb(0 0 0 / 0.12), inset 0 0 0 0.36rem rgb(255 255 255 / 0.12), 0 2px 6px rgb(30 29 27 / 0.35);
color: rgb(243 239 232 / 0.9); transform: rotate(-8deg);
}
.cp-deed__seal .icon { width: 1.5rem; height: 1.5rem; }
/* ---- Below 64rem ---- */
@media (max-width: 63.999rem) {
.cp-cover--arch, .cp-cover--seal { grid-template-columns: minmax(0, 1fr); }
.cp-cover--arch .cp-cover__media { max-width: 22rem; }
.cp-cover--seal .cp-cover__media { max-width: 18rem; }
.cp-pair { grid-template-columns: minmax(0, 1fr); }
.cp-pair__tall { max-width: 26rem; }
.cp-pair__body { padding: 0; }
.cp-plates { grid-template-columns: minmax(0, 1fr); }
.cp-plates > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
.cp-plates__plan { max-width: 22rem; }
.cp-strip__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(70%, 16rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.cp-strip__list > li { scroll-snap-align: start; margin: 0 !important; }
}
@media (max-width: 39.999rem) {
.cp-rail { height: 5.5rem; }
.cp-rail span { font-size: 0.8rem; }
.cp-light__windows { grid-template-columns: 1fr 1fr; }
.cp-light__w--b { grid-column: 1 / -1; grid-row: 1; max-width: 70%; justify-self: center; }
.cp-register { grid-template-columns: minmax(0, 1fr); }
.cp-register__count { font-size: 6rem; }
}
/* ---- Dome, second pass (client): photo cover like the other pages; the sketch
replaced by a gallery of the dome from 1935 to today, opening in a lightbox ---- */
.cp--dome .cp-cover__bg img { object-position: 50% 30%; }
.cp-plates__gallery { grid-column: 1 / span 8; grid-row: 2; }
.cp-plates__louvre { grid-column: 10 / span 3; }
.cp-gallery {
display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 2vw, 1.75rem) clamp(0.75rem, 1.4vw, 1.1rem);
}
.cp-gallery__item { display: flex; flex-direction: column; min-width: 0; }
.cp-gallery__item--lead { grid-row: span 2; }
.cp-gallery__open { display: block; position: relative; cursor: zoom-in; }
.cp-gallery__item--lead .cp-gallery__open { flex: 1; display: flex; }
.cp-gallery__item--lead .hx-frame { flex: 1; min-height: 20rem; }
.cp-gallery__item:not(.cp-gallery__item--lead) .hx-frame { aspect-ratio: 1; }
.cp-gallery .hx-frame { display: block; }
.cp-gallery__open:focus-visible { outline: 2px solid var(--c-crimson); outline-offset: 3px; }
.cp-gallery .hx-credit { margin-block-start: 0.6rem; font-size: 0.625rem; }
.lightbox {
box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none;
margin: 0; padding: clamp(3.5rem, 7vh, 5rem) clamp(1rem, 6vw, 6rem);
border: 0; background: transparent; color: var(--c-on-dark);
display: none; place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgb(20 19 18 / 0.94); }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100dvh - 10rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); }
.lightbox__cap { font-family: var(--f-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(243 239 232 / 0.72); text-align: center; }
.lightbox__btn {
position: fixed; display: grid; place-items: center;
width: 3rem; height: 3rem; padding: 0;
border: 1px solid rgb(243 239 232 / 0.35); background: rgb(20 19 18 / 0.4); color: var(--c-on-dark);
cursor: pointer; transition: border-color var(--quick) var(--ease), background-color var(--quick) var(--ease);
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { border-color: #c9ad72; background: rgb(20 19 18 / 0.7); outline: 0; }
.lightbox__btn .icon { width: 1.35rem; height: 1.35rem; }
.lightbox__close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.lightbox__prev, .lightbox__next { inset-block-start: calc(50% - 1.5rem); }
.lightbox__prev { inset-inline-start: 1rem; }
.lightbox__next { inset-inline-end: 1rem; }
.lightbox__prev .icon { transform: scaleX(-1); }
[dir="rtl"] .lightbox__prev .icon { transform: none; }
[dir="rtl"] .lightbox__next .icon { transform: scaleX(-1); }
@media (max-width: 63.999rem) {
.cp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-gallery__item--lead { grid-column: 1 / -1; grid-row: auto; }
.cp-gallery__item--lead .hx-frame { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 39.999rem) {
.lightbox__prev, .lightbox__next { inset-block-start: auto; inset-block-end: 1rem; }
}
/* Icons and Archive open with a full-bleed photograph too (client, 15 October) */
.cp--icons .cp-cover__bg img { object-position: 50% 45%; }
.cp--archive .cp-cover__bg img { object-position: 50% 50%; }
/* ---- Icons, third pass (client: sharp, no arches): a bento of exactly four cells,
each in its own material. II, the 1932 painting and the fullest entry, leads in
gold leaf; I is framed paper; IV is crimson; III is a band over a photograph of
the church. Sharp corners throughout, like the rest of the site. ---- */
.cp-icons { width: var(--hx-w); margin: var(--section) auto; }
.cp-icons__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.cp-icon {
position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
min-height: 16rem; padding: clamp(1.75rem, 3vw, 2.75rem);
padding-block-start: calc(clamp(1.25rem, 2.4vw, 2rem) + 4.5rem); /* room under the numeral at any height */
}
.cp-icon__num {
position: absolute; inset-block-start: clamp(1.25rem, 2.4vw, 2rem); inset-inline-start: clamp(1.75rem, 3vw, 2.75rem);
display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: 0.5rem; box-sizing: border-box;
border: 1px solid currentColor;
font-family: var(--f-display); font-size: 1rem; line-height: 1;
}
.cp-icon__year { font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height: 1; }
.cp-icon__text { font-family: var(--f-display); font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem); line-height: 1.7; max-width: 46ch; }
/* I: paper, framed */
.cp-icons__list > :nth-child(1) { grid-column: 8 / span 5; grid-row: 1; }
.cp-icon--paper { background: var(--c-band); color: var(--c-ink); border: 1px solid var(--c-hair); outline: 1px solid var(--c-gold-line); outline-offset: -0.6rem; }
.cp-icon--paper .cp-icon__num, .cp-icon--paper .cp-icon__year { color: var(--c-crimson-text); }
/* II: gold leaf, the lead */
.cp-icons__list > :nth-child(2) { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: clamp(28rem, 40vw, 36rem); }
.cp-icon--gold {
color: #1e1d1b;
background:
radial-gradient(60% 50% at 30% 25%, rgb(255 246 222 / 0.6) 0%, transparent 70%),
linear-gradient(150deg, #e2d0a4 0%, #c9ad72 48%, #ad8c50 100%);
outline: 1px solid rgb(30 29 27 / 0.35); outline-offset: -0.75rem;
}
.cp-icon--gold .cp-icon__year { font-size: clamp(3.4rem, 2.4rem + 3.6vw, 6rem); }
.cp-icon--gold .cp-icon__text { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.6; max-width: 34ch; }
/* IV: crimson */
.cp-icons__list > :nth-child(4) { grid-column: 8 / span 5; grid-row: 2; }
.cp-icon--crimson { background: var(--c-crimson); color: var(--c-on-dark); outline: 1px solid rgb(243 239 232 / 0.3); outline-offset: -0.6rem; }
/* III: a band over a photograph of the church */
.cp-icons__list > :nth-child(3) { grid-column: 1 / -1; grid-row: 3; min-height: clamp(18rem, 26vw, 24rem); }
.cp-icon--photo { color: var(--c-on-dark); background: #1e1d1b; }
.cp-icon__bg { position: absolute; inset: 0; z-index: -2; }
.cp-icon__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cp-icon--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(20 19 18 / 0.88) 0%, rgb(20 19 18 / 0.6) 45%, rgb(20 19 18 / 0.15) 100%); }
.cp-icon--photo .cp-icon__text { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.55; max-width: 32ch; }
@media (max-width: 63.999rem) {
.cp-icons__list { grid-template-columns: minmax(0, 1fr); }
.cp-icons__list > :nth-child(n) { grid-column: 1; grid-row: auto; }
.cp-icons__list > :nth-child(2) { min-height: 26rem; }
}
/* ==========================================================================
37. THE CHURCHES & SHRINES PAGES: Our Lady of the Gate, Our Lady of the
Seas, Saint Aquilina the Martyr, Our Lady of Poverty (stjm/shrine-page,
inc/shrine-pages.php). The family of the Church pages (section 36: photo
cover, frames, credits, dates set large), each page with compositions of
its own. The shrine niche is the lancet of the home arcade, the one arch
these pages use. No one-sided accents: full hairlines, gold inner lines.
========================================================================== */
.sh .cp-text { font-size: 1.125rem; line-height: 1.85; }
/* The shrine niche: a photograph in the lancet, a gold line around it */
.sh-niche { position: relative; padding: clamp(0.55rem, 1vw, 0.85rem); }
.sh-niche::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: var(--c-gold);
-webkit-mask: var(--lancet-line) center / 100% 100% no-repeat; mask: var(--lancet-line) center / 100% 100% no-repeat;
}
.sh-niche__frame {
aspect-ratio: 300 / 420; overflow: hidden;
-webkit-mask: var(--lancet-fill) center / 100% 100% no-repeat; mask: var(--lancet-fill) center / 100% 100% no-repeat;
}
.sh-niche__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--img-grow-time) var(--img-grow-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.sh-niche:hover img { transform: scale(var(--img-grow)); }
}
/* A date or day from the text, set in Baskerville */
.sh-feast__date {
margin: 0 0 clamp(1rem, 2vw, 1.5rem) !important;
font-family: var(--f-display); font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4.2rem); line-height: 1; letter-spacing: -0.015em;
color: var(--c-crimson-text);
}
/* ---------------------------------------------------- OUR LADY OF THE GATE */
.sh--gate .cp-cover__bg img { object-position: 50% 55%; }
/* Threshold: the church beside its vaulted gateway, the text crossing into the photograph's margin */
.sh-threshold {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center;
}
.sh-threshold__media { grid-column: 1 / span 7; grid-row: 1; }
.sh-threshold__media .hx-frame { aspect-ratio: 3 / 4; }
.sh-threshold__media img { object-position: 30% 50%; }
.sh-threshold__text {
grid-column: 7 / -1; grid-row: 1; z-index: 1;
padding: clamp(2rem, 4vw, 3.5rem);
background: var(--c-paper);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
}
/* Plaque: 1763 on a paper panel laid over the lane to the castle */
.sh-plaque {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center; justify-content: flex-end;
min-height: clamp(34rem, 72vh, 48rem); padding: clamp(3rem, 7vw, 6rem) max(var(--gutter), calc((100% - var(--wide)) / 2));
box-sizing: border-box;
}
.sh-plaque__bg { position: absolute; inset: 0; z-index: -1; }
.sh-plaque__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.sh-plaque__panel {
width: min(32rem, 100%); box-sizing: border-box;
padding: clamp(2rem, 4vw, 3.25rem);
background: rgb(252 252 250 / 0.95);
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
box-shadow: 0 40px 80px -40px rgb(20 19 18 / 0.55);
}
/* Icon: the painting of the Virgin in her niche, the text in two calm columns beneath */
.sh-icon {
width: min(66rem, 100% - 2 * var(--gutter)); margin: var(--section) auto;
display: grid; justify-items: center; gap: clamp(2.5rem, 5vw, 4rem);
}
.sh-icon__niche { width: min(21rem, 72vw); }
.sh-icon__niche img { object-position: 50% 8%; transform-origin: 50% 20%; }
.sh-icon__text {
columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4.5rem);
font-size: 1.125rem; line-height: 1.85; color: var(--c-ink);
}
/* Feast: a limestone band, the day set large, the garden photograph bleeding to the edge */
.sh-feast {
position: relative; isolation: isolate;
display: grid; grid-template-columns: var(--gutter) repeat(12, minmax(0, 1fr)); align-items: center;
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.sh-feast::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.sh-feast__text { grid-column: 2 / span 5; padding-inline-end: clamp(1rem, 3vw, 3rem); }
.sh-feast__icon { display: block; margin-block-end: 1.25rem; color: var(--c-crimson); }
.sh-feast__icon .icon { width: 2.1rem; height: 2.1rem; }
.sh-feast__media { grid-column: 7 / -1; }
.sh-feast__media .hx-frame { aspect-ratio: 4 / 3; }
.sh--gate + .more-wrap { margin-block-start: 0; }
/* --------------------------------------------------- OUR LADY OF THE SEAS */
.sh--seas .cp-cover__bg img { object-position: 50% 45%; }
/* Name: the live heading and “Saydet Martine”, the Virgin on her pillar in the niche */
.sh-name {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
}
.sh-name__title {
margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); max-width: 18ch;
font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
text-wrap: balance;
}
.sh-name__niche img { object-position: 50% 0%; }
/* Ledger: two dates of the archive, then the paragraph across the measure */
.sh-ledger {
width: min(60rem, 100% - 2 * var(--gutter)); margin: var(--section) auto;
padding-block: clamp(2.5rem, 5vw, 4rem);
border-block: 1px solid var(--c-hair);
}
.sh-ledger__dates {
display: grid; grid-template-columns: 1fr 1fr; margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
font-family: var(--f-display); font-size: clamp(3.2rem, 2.2rem + 4vw, 6rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-ink);
}
.sh-ledger__dates span + span { padding-inline-start: clamp(1.5rem, 4vw, 3rem); border-inline-start: 1px solid var(--c-hair); }
.sh-ledger__text { font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.7; color: var(--c-ink); }
/* Inscription: the plaque above the door, carved, in the middle of its paragraph */
.sh-inscription { width: min(50rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
.sh-inscription .cp-text { max-width: none; }
.sh-inscription__stone { margin: clamp(2.5rem, 5vw, 3.5rem) 0 !important; text-align: center; }
.sh-inscription__stone p { max-width: 34rem; margin-inline: auto !important; }
/* Road: the courtyard photograph wide, the paragraph on a paper panel, the altar inset */
.sh-road {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
}
.sh-road__wide { grid-column: 1 / span 9; grid-row: 1; }
.sh-road__wide .hx-frame { aspect-ratio: 16 / 10; }
.sh-road__panel {
grid-column: 6 / -1; grid-row: 1; z-index: 1; margin-block-start: clamp(14rem, 30vw, 26rem);
padding: clamp(2rem, 4vw, 3.25rem);
background: var(--c-paper); border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
}
.sh-road__altar { grid-column: 2 / span 3; grid-row: 1; align-self: end; z-index: 2; }
.sh-road__altar .hx-frame { aspect-ratio: 3 / 4; outline: 1px solid var(--c-paper); outline-offset: -0.5rem; }
/* ------------------------------------------------------- SAINT AQUILINA */
.sh--aquilina .cp-cover__bg img { object-position: 50% 45%; }
/* Martyr: the portrait mounted in gold leaf, her two years beside */
.sh-martyr {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
}
.sh-martyr__mount {
padding: clamp(0.9rem, 2.2vw, 1.6rem);
background:
radial-gradient(60% 50% at 30% 22%, rgb(255 246 222 / 0.65) 0%, transparent 70%),
linear-gradient(150deg, #e2d0a4 0%, #c9ad72 48%, #ad8c50 100%);
outline: 1px solid rgb(30 29 27 / 0.3); outline-offset: -0.45rem;
box-shadow: 0 50px 80px -50px rgb(30 29 27 / 0.6);
}
.sh-martyr__mount img { display: block; width: 100%; height: auto; outline: 1px solid rgb(30 29 27 / 0.35); }
/* Window: the eagle in the stone wall, a band across the page */
.sh-window { position: relative; height: clamp(16rem, 34vw, 30rem); overflow: hidden; }
.sh-window img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 42%; }
/* Reading: the long paragraph on one calm measure, with its initial */
.sh-reading { width: min(44rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
/* Procession: the cathedral, the old market and her street on one line */
.sh-procession { width: min(60rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
.sh-route {
position: relative; list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 3.75rem); padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center;
}
.sh-route::before { content: ""; position: absolute; inset-inline: 16.66%; inset-block-start: 1.9rem; border-block-start: 1px solid var(--c-gold-line); }
.sh-route li { position: relative; display: grid; justify-items: center; gap: 0.9rem; }
.sh-route__icon {
display: grid; place-items: center; width: 3.8rem; height: 3.8rem;
background: var(--c-paper); border: 1px solid var(--c-hair-strong); color: var(--c-crimson);
transform: rotate(45deg);
}
.sh-route__icon .icon { width: 1.5rem; height: 1.5rem; transform: rotate(-45deg); }
.sh-route__name { font-family: var(--f-display); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); line-height: 1.3; color: var(--c-ink); }
.sh-procession > p { max-width: none; }
/* Temple: 1994 and 2005, the statue beneath; the bell tower standing tall */
.sh-temple {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end;
}
.sh-temple__statue { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.sh-temple__statue .hx-frame { aspect-ratio: 16 / 10; }
.sh-temple__tower .hx-frame { aspect-ratio: 2 / 3; }
/* Day: the feast on limestone, the altar in its niche */
.sh-day {
position: relative; isolation: isolate;
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
width: var(--hx-w); margin: var(--section) auto 0; box-sizing: border-box;
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.sh-day::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.sh-day__niche { width: min(19rem, 100%); justify-self: center; }
.sh-day__lede { font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.6rem); line-height: 1.6; color: var(--c-ink); max-width: 38ch; }
/* --------------------------------------------------- OUR LADY OF POVERTY */
.sh--poverty .cp-cover__bg img { object-position: 50% 60%; }
/* Walk: the text on its measure, a mosaic of the way in: garden, vault, gate */
.sh-walk {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.sh-walk__text { position: sticky; top: calc(var(--header-h) + 2rem); }
.sh-walk__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.4vw, 1.1rem); }
.sh-walk__a { grid-column: 1 / -1; }
.sh-walk__a .hx-frame { aspect-ratio: 3 / 2; }
.sh-walk__b .hx-frame { aspect-ratio: 2 / 3; }
.sh-walk__c { align-self: end; }
.sh-walk__c .hx-frame { aspect-ratio: 3 / 4; }
.sh-walk__c img { object-position: 22% 50%; }
/* Hidden: the Ottoman years, told over the darkened sandstone of the altar */
.sh-hidden {
position: relative; isolation: isolate; overflow: hidden;
display: grid; place-items: center;
min-height: clamp(34rem, 80vh, 50rem); padding: clamp(4rem, 9vw, 7rem) var(--gutter); box-sizing: border-box;
color: var(--c-on-dark);
}
.sh-hidden__bg { position: absolute; inset: 0; z-index: -2; }
.sh-hidden__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sh-hidden::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgb(20 19 18 / 0.78) 0%, rgb(20 19 18 / 0.9) 100%); }
.sh-hidden__inner { max-width: 44rem; }
.sh-hidden__icon { display: block; margin-block-end: 1.5rem; color: #c9ad72; }
.sh-hidden__icon .icon { width: 2.2rem; height: 2.2rem; }
.sh-hidden__inner p { font-family: var(--f-display); font-size: clamp(1.1rem, 0.98rem + 0.45vw, 1.35rem); line-height: 1.85; color: var(--c-on-dark); text-wrap: pretty; }
/* Garden: the two statues, opening full size */
.sh-garden { width: min(52rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
.sh-garden .cp-gallery { grid-template-columns: 1fr 1fr; align-items: start; }
.sh-garden .cp-gallery__item--lead { grid-row: auto; }
.sh-garden .cp-gallery__item .hx-frame { aspect-ratio: 2 / 3; min-height: 0; }
.sh-garden .cp-gallery__item:nth-child(2) { margin-block-start: clamp(3rem, 8vw, 6rem); }
/* ---- Below 64rem: one column, the compositions loosen ---- */
@media (max-width: 63.999rem) {
.sh-threshold, .sh-road { grid-template-columns: minmax(0, 1fr); }
.sh-threshold__media, .sh-threshold__text, .sh-road__wide, .sh-road__panel, .sh-road__altar { grid-column: 1; grid-row: auto; }
.sh-threshold__text { margin: -3rem 1rem 0; }
.sh-plaque { justify-content: center; min-height: 0; padding-block: 12rem 3rem; }
.sh-feast { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-inline: var(--gutter); }
.sh-feast__text, .sh-feast__media { grid-column: 1; padding: 0; }
.sh-name, .sh-martyr, .sh-temple, .sh-day, .sh-walk { grid-template-columns: minmax(0, 1fr); }
.sh-name__niche { width: min(18rem, 78vw); justify-self: center; }
.sh-martyr__icon { width: min(24rem, 100%); justify-self: center; }
.sh-road__panel { margin: -3rem 1rem 0; }
.sh-road__altar { width: 60%; margin: 2rem 0 0; justify-self: end; }
.sh-walk__text { position: static; }
.sh-day__lede { max-width: none; }
}
@media (max-width: 40rem) {
.sh-threshold__text, .sh-road__panel { margin-inline: 0.5rem; padding: 1.75rem 1.4rem; }
.sh-plaque__panel { padding: 1.75rem 1.4rem; }
.sh-route__name { font-size: 0.95rem; }
.sh-ledger__dates { font-size: clamp(2.6rem, 12vw, 3.4rem); }
.sh-garden .cp-gallery { gap: 0.75rem; }
}
/* ==========================================================================
38. THE APOSTOLIC ORGANIZATIONS PAGES (stjm/org-page, inc/org-pages.php)
Children of /ministries/ at /Apostolic-organizations//. A paper
cover with the organization's emblem on a framed plaque (most groups have
few or no photographs), then a composition of its own. Family of the
Church pages (section 36): years set large, frames, credits, the tablet.
========================================================================== */
.og .cp-text { font-size: 1.125rem; line-height: 1.85; }
/* Cover: limestone, the title on the start side, the emblem on a plaque */
.og-cover { position: relative; isolation: isolate; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.og-cover::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.og-cover__inner {
width: var(--hx-w); margin-inline: auto;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.og-cover .crumbs ol { margin-block-end: clamp(1.25rem, 3vw, 2rem); }
.og-cover__title {
margin: 0; max-width: 18ch;
font-family: var(--f-display); font-weight: 400;
font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.8rem); line-height: var(--lh-display); letter-spacing: var(--ls-display);
text-wrap: balance;
}
.og-cover__plaque {
display: grid; place-items: center;
width: clamp(10rem, 18vw, 15rem); aspect-ratio: 1;
background: var(--c-paper); color: var(--c-crimson);
border: 1px solid var(--c-hair-strong);
outline: 1px solid var(--c-gold-line); outline-offset: -0.7rem;
}
.og-cover__plaque .tessera__icon { /* the mosaic's emblem, here set in its plaque, not in a tile corner */
position: static; inset: auto; z-index: auto; filter: none;
width: 58%; height: 58%; color: var(--c-crimson); stroke-width: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
.og-cover__text { animation: hx-rise 1.4s var(--reveal-ease) 0.1s both; }
.og-cover__plaque { animation: hx-rise 1.6s var(--reveal-ease) 0.3s both; }
}
/* Photo cover (client, 16 October): the church as the cover, the emblem as a gold seal over the title */
.og-cover--photo { min-height: min(84svh, 54rem); }
.og-seal {
display: grid; place-items: center;
width: clamp(4rem, 3.2rem + 2.4vw, 5.5rem); aspect-ratio: 1; margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
background: rgb(20 19 18 / 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgb(201 173 114 / 0.75);
outline: 1px solid rgb(201 173 114 / 0.4); outline-offset: -0.4rem;
color: #d9bf86;
}
.og-seal .tessera__icon { position: static; inset: auto; z-index: auto; filter: none; width: 56%; height: 56%; color: inherit; stroke-width: 2.4; }
.og-cover--photo .og-cover__title { max-width: 16ch; }
.og--immaculate-conception .cp-cover__bg img { object-position: 50% 22%; }
.og--maronite-apostolic-movement .cp-cover__bg img { object-position: 50% 45%; }
.og--knights-and-vanguards .cp-cover__bg img { object-position: 30% 30%; }
.og--youth-movement .cp-cover__bg img { object-position: 55% 55%; }
.og--cedar-scouts .cp-cover__bg img { object-position: 50% 55%; }
/* ------------------------------------------- IMMACULATE CONCEPTION */
.og-intro {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
}
.og-intro__lede { font-family: var(--f-display); font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.8rem); line-height: 1.6; color: var(--c-ink); }
.og-intro__media .hx-frame { aspect-ratio: 3 / 4; }
/* The three stages: rows on full hairlines, the years on the start side */
.og-stages { width: min(64rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
.og-stages__lead { margin-block-end: clamp(2rem, 4vw, 3rem) !important; font-family: var(--f-display); font-size: var(--fs-h4); color: var(--c-muted); }
.og-stages__list { list-style: none; margin: 0; padding: 0; }
.og-stage {
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start;
padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
border-block-start: 1px solid var(--c-hair);
}
.og-stage:last-child { border-block-end: 1px solid var(--c-hair); }
.og-stage__years { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.1rem); margin: 0 !important; }
.og-stage__title { margin: 0 0 1rem; font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-title); color: var(--c-ink); text-wrap: balance; }
/* Today: the women and the men, paper and limestone */
.og-today {
width: min(64rem, 100% - 2 * var(--gutter)); margin: var(--section) auto clamp(2rem, 4vw, 3rem);
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch;
}
.og-today__panel { padding: clamp(2rem, 4vw, 3.25rem); }
.og-today__panel--paper { background: var(--c-paper); border: 1px solid var(--c-hair); outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem; }
.og-today__panel--stone { background: var(--c-band); align-self: end; }
.og-today__num {
margin: 0 0 1rem !important;
font-family: var(--f-display); font-size: clamp(3.4rem, 2.4rem + 4vw, 6.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-crimson-text);
}
.og-album { width: min(64rem, 100% - 2 * var(--gutter)); margin: 0 auto var(--section); }
.og-album .cp-gallery { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
.og-album .cp-gallery__item--lead { grid-row: auto; }
.og-album .cp-gallery__item .hx-frame { min-height: 0; }
.og-album .cp-gallery__item--lead .hx-frame { aspect-ratio: 3 / 4; }
.og-album .cp-gallery__item:nth-child(2) .hx-frame { aspect-ratio: 3 / 2; }
/* -------------------------------------- MARONITE APOSTOLIC MOVEMENT */
.og-founding {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start;
}
.og-founding__media { position: sticky; top: calc(var(--header-h) + 2rem); }
.og-founding__media .hx-frame { aspect-ratio: 2 / 3; }
.og-word .og-word__emblem { display: block; margin-block-end: 1.5rem; color: var(--c-crimson); }
.og-word .og-word__emblem .icon { width: 2.2rem; height: 2.2rem; }
.og-word p { max-width: 46rem; font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem); line-height: 1.55; }
/* -------------------------------------------- KNIGHTS AND VANGUARDS */
.og-banner {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
}
.og-banner__mount .hx-frame {
padding: clamp(0.9rem, 2.5vw, 2rem); background: #efede7;
border: 1px solid var(--c-hair); outline: 1px solid var(--c-gold-line); outline-offset: -0.5rem;
box-shadow: 0 40px 70px -50px rgb(30 29 27 / 0.55);
}
.og-banner__mount img { height: auto; }
.og-banner__lede { font-family: var(--f-display); font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.55rem); line-height: 1.65; color: var(--c-ink); }
/* ------------------------------------------------- YOUTH MOVEMENT */
.og-motto { width: min(50rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; }
.og-motto .cp-text { max-width: none; }
.og-motto__stone { margin: clamp(2.5rem, 5vw, 3.5rem) 0 !important; text-align: center; }
.og-motto__stone p { max-width: 34rem; margin-inline: auto !important; }
/* --------------------------------------------------- CEDAR SCOUTS */
.og-troop {
width: var(--hx-w); margin: var(--section) auto;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.og-troop__text { position: sticky; top: calc(var(--header-h) + 2rem); }
.og-troop .cp-gallery { grid-template-columns: 1fr 1fr; }
.og-troop .cp-gallery__item--lead { grid-column: 1 / -1; grid-row: auto; }
.og-troop .cp-gallery__item--lead .hx-frame { aspect-ratio: 3 / 2; min-height: 0; }
.og-troop .cp-gallery__item:not(.cp-gallery__item--lead) .hx-frame { aspect-ratio: 3 / 4; }
/* ---- Below 64rem: one column ---- */
@media (max-width: 63.999rem) {
.og-cover__inner { grid-template-columns: minmax(0, 1fr); }
.og-cover__plaque { width: 8.5rem; }
.og-intro, .og-founding, .og-banner, .og-troop, .og-today { grid-template-columns: minmax(0, 1fr); }
.og-intro__media { width: min(22rem, 100%); }
.og-founding__media, .og-troop__text { position: static; }
.og-founding__media { width: min(22rem, 100%); }
.og-stage { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.og-today__panel--stone { align-self: auto; }
}
@media (max-width: 40rem) {
.og-album .cp-gallery { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
39. THE INFORMATIONAL PAGES: Activities, Prayers, Gallery, Contact
(stjm/info-page, inc/info-pages.php). Client, 16 October 2026: the standard
page head (no full-bleed photograph), then a treatment per page: structured
for office information and procedures, quiet and luminous for the prayers.
========================================================================== */
.info { --in-w: min(60rem, 100% - 2 * var(--gutter)); }
.info .cp-text { font-size: 1.125rem; line-height: 1.85; max-width: 62ch; }
.info .cp-text a, .in-note a { color: var(--c-crimson-text); text-decoration: underline; text-decoration-color: var(--c-gold-line); text-underline-offset: 0.2em; }
.info .cp-text a:hover, .in-note a:hover { text-decoration-color: currentColor; }
.in-lede { font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); line-height: 1.6; color: var(--c-ink); max-width: 46rem; }
/* The standard page head */
.ph { position: relative; isolation: isolate; padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(2.5rem, 5.5vw, 4.25rem); }
.ph::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.ph__inner { width: var(--hx-w); margin-inline: auto; }
.ph .crumbs ol { margin-block-end: clamp(1rem, 2.5vw, 1.5rem); }
.ph__title {
margin: 0; max-width: 22ch;
font-family: var(--f-display); font-weight: 400;
font-size: clamp(2.3rem, 1.6rem + 2.8vw, 4.1rem); line-height: var(--lh-display); letter-spacing: var(--ls-display);
text-wrap: balance;
}
/* Prayers: on paper, centred, under a small gold cross */
.ph--prayer { text-align: center; padding-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.ph--prayer::before { background: var(--c-paper); }
.ph--prayer .crumbs ol { justify-content: center; }
.ph--prayer .ph__title { margin-inline: auto; }
.ph__cross { display: block; margin-block-end: 1.1rem; color: var(--c-gold); }
.ph__cross .icon { width: 1.9rem; height: 1.9rem; }
@media (prefers-reduced-motion: no-preference) {
.ph__inner { animation: hx-rise 1.2s var(--reveal-ease) 0.05s both; }
}
/* A plain note after a quotation or a list */
.in-note { width: var(--in-w); margin: clamp(2rem, 4vw, 3rem) auto var(--section); }
/* ---- Religious Education Center: the lede, the curriculum at a glance, September ---- */
.in-school {
width: var(--hx-w); margin: var(--section) auto clamp(3rem, 6vw, 4.5rem);
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start;
}
.in-school__text > * + * { margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem) !important; }
.in-school__media .hx-frame { aspect-ratio: 3 / 4; }
.in-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border: 1px solid var(--c-hair); }
.in-facts li { display: grid; align-content: start; gap: 0.35rem; padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.25rem, 3vw, 2.25rem); font-size: 0.9375rem; color: var(--c-muted); }
.in-facts li + li { border-inline-start: 1px solid var(--c-hair); }
.in-facts__big { font-family: var(--f-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; color: var(--c-ink); }
.in-facts__icon { color: var(--c-crimson); }
.in-facts__icon .icon { width: 1.9rem; height: 1.9rem; }
.in-facts li:last-child span:nth-child(2) { font-family: var(--f-display); font-size: 1.25rem; color: var(--c-ink); }
.in-register {
width: var(--hx-w); margin: 0 auto var(--section); box-sizing: border-box;
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
padding: clamp(2rem, 4.5vw, 3.25rem); background: var(--c-band);
outline: 1px solid var(--c-gold-line); outline-offset: -0.65rem;
}
.in-register__month { font-family: var(--f-display); font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4rem); line-height: 1; color: var(--c-crimson-text); }
/* ---- Listening Office: the lede, then the hours on one clean plate ---- */
.in-office { width: var(--in-w); margin: var(--section) auto; }
.in-hours {
display: grid; grid-template-columns: auto 1fr 1fr; align-items: stretch;
margin-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
background: var(--c-paper); border: 1px solid var(--c-hair-strong);
}
.in-hours__icon { display: grid; place-items: center; padding-inline: clamp(1.25rem, 3vw, 2rem); color: var(--c-crimson); background: var(--c-band); border-inline-end: 1px solid var(--c-hair); }
.in-hours__icon .icon { width: 2rem; height: 2rem; }
.in-hours__cell { display: grid; align-content: center; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem); }
.in-hours__cell + .in-hours__cell { border-inline-start: 1px solid var(--c-hair); }
.in-hours__label, .in-hours__time { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.2; color: var(--c-ink); }
.in-office__note { color: var(--c-muted); }
/* ---- Pilgrimages and Processions: a band of the parish procession, then the way ---- */
.in-band { margin-block: 0; }
.in-band .hx-frame { height: clamp(14rem, 34vw, 28rem); }
.in-band img { object-position: 50% 42%; }
.in-way { width: var(--in-w); margin: var(--section) auto; }
.in-way__list { position: relative; list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; }
.in-way__list::before { content: ""; position: absolute; inset-block: 1.4rem; inset-inline-start: 1.4rem; border-inline-start: 1px dashed var(--c-gold-line); }
.in-way__list li { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 1.75rem); align-items: start; padding-block: 1rem; }
.in-way__mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; background: var(--c-paper); border: 1px solid var(--c-hair-strong); color: var(--c-crimson); }
.in-way__mark .icon { width: 1.25rem; height: 1.25rem; }
.in-way__list p { font-size: 1.125rem; line-height: 1.8; color: var(--c-ink); padding-block-start: 0.35rem; }
/* ---- Eucharistic Adoration: the hour at the heart of a monstrance of light ---- */
.in-adoration { width: var(--in-w); margin: var(--section) auto; display: grid; justify-items: center; text-align: center; gap: clamp(2.5rem, 5vw, 3.5rem); }
.in-adoration__sun {
position: relative; display: grid; place-items: center;
width: min(26rem, 82vw); aspect-ratio: 1;
background:
radial-gradient(circle, rgb(252 252 250) 0 26%, rgb(201 173 114 / 0.22) 26.4%, transparent 27%),
repeating-conic-gradient(from 0deg, rgb(201 173 114 / 0.55) 0 0.6deg, transparent 0.6deg 7.5deg);
-webkit-mask: radial-gradient(circle, #000 0 52%, transparent 70%); mask: radial-gradient(circle, #000 0 52%, transparent 70%);
}
.in-adoration__host {
display: grid; place-items: center; align-content: center; gap: 0.2rem;
width: 46%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #fffdf7, #f3ead6);
box-shadow: 0 0 0 1px rgb(167 136 78 / 0.6), 0 0 0 0.55rem rgb(252 252 250), 0 0 0 calc(0.55rem + 1px) rgb(167 136 78 / 0.45), 0 0 4rem rgb(201 173 114 / 0.45);
font-family: var(--f-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.in-adoration__hour { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-crimson-text); }
.in-adoration__text { max-width: 36rem; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.55; color: var(--c-ink); text-wrap: balance; }
/* ---- The Rosary Prayer: the three churches like beads on one string ---- */
.in-rosary { width: var(--hx-w); margin: var(--section) auto; }
.in-rosary__lede { margin-inline: auto !important; text-align: center; text-wrap: balance; }
.in-rosary__list { position: relative; list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.in-rosary__list::before { content: ""; position: absolute; inset-inline: 8%; inset-block-start: 40%; border-block-start: 1px dotted var(--c-gold); z-index: -1; }
.in-bead { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.in-bead__niche { width: 100%; }
.in-bead--sjm .in-bead__niche { max-width: 19rem; }
.in-bead--seas .in-bead__niche, .in-bead--aquilina .in-bead__niche { max-width: 14.5rem; }
.in-bead__text { max-width: 22ch; }
.in-bead__where { display: block; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.3; color: var(--c-ink); }
.in-bead__when { display: block; margin-block-start: 0.4rem; color: var(--c-muted); }
.in-bead--sjm .in-bead__where { font-size: 1.45rem; }
/* ---- Spiritual Activities: the lede, then the week of Masses ---- */
.in-masses { width: var(--hx-w); margin: var(--section) auto; }
.in-masses .schedule { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
/* ---- Intentions of the Holy Mass: the Pope's words, by candlelight ---- */
.in-memory { width: var(--in-w); margin: var(--section) auto 0; text-align: center; }
.in-memory__icon { display: block; margin-block-end: 1.5rem; color: var(--c-gold); }
.in-memory__icon .icon { width: 2.4rem; height: 2.4rem; }
.in-memory__quote p { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.5; color: var(--c-ink); text-wrap: balance; }
.in-memory__quote cite, .in-prayer__text cite { display: block; margin-block-start: 1.25rem; font-family: var(--f-sans); font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.info--intentions-of-the-holy-mass .in-note { text-align: center; }
.info--intentions-of-the-holy-mass .in-note .cp-text { margin-inline: auto; }
/* ---- Confessions: the church door beside the sentence; "Remember" as a framed notice ---- */
.in-door { width: var(--hx-w); margin: var(--section) auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.in-door__media .hx-frame { aspect-ratio: 3 / 4; }
.in-door__media img { object-position: 50% 78%; }
.in-door__icon { display: block; margin-block-end: 1.5rem; color: var(--c-crimson); }
.in-door__icon .icon { width: 2.2rem; height: 2.2rem; }
.in-door__lede { max-width: 30ch; font-family: var(--f-display); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.35rem); line-height: 1.45; color: var(--c-ink); text-wrap: balance; }
.in-notice { position: relative; isolation: isolate; padding: clamp(4rem, 8vw, 6rem) var(--gutter); }
.in-notice::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.in-notice__plate {
width: min(48rem, 100%); margin-inline: auto; box-sizing: border-box;
padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
background: var(--c-paper); border: 1px solid var(--c-hair-strong);
outline: 1px solid var(--c-gold-line); outline-offset: -0.7rem;
}
.in-notice__title { margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--c-ink); }
.in-notice__lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.in-notice__list { list-style: none; margin: 0; padding: 0 clamp(1rem, 3.5vw, 2.75rem); }
.in-notice__list + .in-notice__list { border-inline-start: 1px solid var(--c-hair); }
.in-notice__list li { display: flex; align-items: center; gap: 0.9rem; padding-block: 0.7rem; font-size: 1.0625rem; color: var(--c-ink); }
.in-notice__mark { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--c-hair-strong); }
.in-notice__mark .icon { width: 1rem; height: 1rem; }
.in-notice__list--keep .in-notice__mark { color: var(--c-crimson); border-color: var(--c-gold-line); }
.in-notice__list--avoid .in-notice__mark { color: var(--c-muted); }
.in-notice__list--avoid li { color: var(--c-muted); }
/* ---- Baptism: the words over still water, the arch of the Baptism House, the request ---- */
.in-water { position: relative; isolation: isolate; width: min(48rem, 100% - 2 * var(--gutter)); margin: var(--section) auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.in-water::before { /* faint rings spreading on water, from the drop */
content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-block-start: 1.2rem;
width: min(44rem, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%);
background: repeating-radial-gradient(circle, rgb(167 136 78 / 0.24) 0 1px, transparent 1px 2.6rem);
-webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%);
}
.in-water__drop { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-block-end: clamp(2rem, 4vw, 2.75rem); color: var(--c-gold); background: var(--c-paper); }
.in-water__drop .icon { width: 1.8rem; height: 1.8rem; }
.in-water__quote p { font-family: var(--f-display); font-size: clamp(1.35rem, 1.08rem + 1.05vw, 2rem); line-height: 1.55; color: var(--c-ink); text-wrap: balance; }
.in-arch { width: var(--hx-w); margin-inline: auto; }
.in-arch .hx-frame { aspect-ratio: 21 / 9; }
.in-arch img { object-position: 50% 45%; }
.in-request { position: relative; z-index: 1; margin-block-start: calc(clamp(2.5rem, 5vw, 4rem) * -1); padding: 0 var(--gutter) var(--section); }
.in-request__plate {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: center;
width: min(44rem, 100%); margin-inline: auto; box-sizing: border-box;
padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
background: var(--c-paper); border: 1px solid var(--c-hair-strong);
outline: 1px solid var(--c-gold-line); outline-offset: -0.6rem;
box-shadow: 0 30px 60px -45px rgb(30 29 27 / 0.55);
}
.in-request__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--c-gold-line); color: var(--c-crimson); }
.in-request__icon .icon { width: 1.5rem; height: 1.5rem; }
.in-request__plate p { font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.65; color: var(--c-ink); }
.in-request__plate a { color: var(--c-crimson-text); text-decoration: underline; text-decoration-color: var(--c-gold-line); text-underline-offset: 0.2em; }
/* ---- First Holy Communion: the path from December to the celebration ---- */
.in-journey { width: var(--in-w); margin: var(--section) auto; }
.in-journey__route { margin-block: clamp(2.75rem, 5vw, 3.75rem) clamp(2rem, 4vw, 2.75rem) !important; }
.in-journey__media { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.in-journey__media .hx-frame { aspect-ratio: 16 / 9; }
.in-journey__media img { object-position: 50% 35%; }
/* ---- Marriage: the covenant as a certificate, the documents as a dossier, the way of the file ---- */
.in-cert { position: relative; isolation: isolate; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); }
.in-cert::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--c-band); }
.in-cert__sheet {
width: min(46rem, 100%); margin-inline: auto; box-sizing: border-box; text-align: center;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
background: radial-gradient(120% 90% at 50% 0%, #fffefb 0%, var(--c-paper) 70%);
border: 1px solid var(--c-gold);
outline: 1px solid var(--c-gold-line); outline-offset: -0.85rem;
box-shadow: inset 0 0 0 0.45rem var(--c-paper), inset 0 0 0 calc(0.45rem + 1px) rgb(167 136 78 / 0.35), 0 40px 70px -50px rgb(30 29 27 / 0.55);
}
.in-cert__cross { display: block; margin-block-end: 1.5rem; color: var(--c-gold); }
.in-cert__cross .icon { width: 1.8rem; height: 1.8rem; }
.in-cert__quote p { font-family: var(--f-display); font-size: clamp(1.2rem, 1.02rem + 0.7vw, 1.6rem); line-height: 1.7; color: var(--c-ink); text-wrap: balance; }
.in-cert__quote cite { display: block; margin-block-start: 1.5rem; font-family: var(--f-sans); font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.in-dossier { width: var(--hx-w); margin: var(--section) auto clamp(3rem, 6vw, 4.5rem); }
.in-dossier__title { margin: 0 0 clamp(2rem, 4vw, 2.75rem); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--c-ink); }
.in-dossier__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid var(--c-hair); }
.in-dossier__list li { display: grid; align-content: start; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 3.5vw, 2.5rem); border-block-end: 1px solid var(--c-hair); }
.in-dossier__list li:not(:nth-child(3n + 1)) { border-inline-start: 1px solid var(--c-hair); }
.in-dossier__num { font-family: var(--f-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; color: var(--c-gold); }
.in-dossier__list p { font-size: 1.0625rem; line-height: 1.65; color: var(--c-ink); }
.in-file { width: min(52rem, 100% - 2 * var(--gutter)); margin: 0 auto var(--section); }
.in-file__flow { list-style: none; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.in-file__flow li:not(.in-file__arrow) { display: flex; align-items: center; gap: 1rem; padding: clamp(1.1rem, 2.5vw, 1.5rem); background: var(--c-band); border: 1px solid var(--c-hair); font-family: var(--f-display); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.3; color: var(--c-ink); }
.in-file__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--c-paper); border: 1px solid var(--c-gold-line); color: var(--c-crimson); }
.in-file__icon .icon { width: 1.25rem; height: 1.25rem; }
.in-file__arrow { color: var(--c-gold); }
.in-file__arrow .icon { width: 1.6rem; height: 1.6rem; }
[dir="rtl"] .in-file__arrow .icon { transform: scaleX(-1); }
/* ---- Anointing of the Sick: the olive tree beside the five graces ---- */
.in-graces { width: var(--hx-w); margin: var(--section) auto 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.in-graces__media { position: sticky; top: calc(var(--header-h) + 2rem); }
.in-graces__media .hx-frame { aspect-ratio: 4 / 5; }
.in-graces__list { list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0; }
.in-graces__list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-block: clamp(1.1rem, 2.2vw, 1.5rem); border-block-start: 1px solid var(--c-hair); }
.in-graces__list li:last-child { border-block-end: 1px solid var(--c-hair); }
.in-graces__num { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.3; color: var(--c-gold); }
.in-graces__list p { font-size: 1.125rem; line-height: 1.75; color: var(--c-ink); }
/* ---- Funerals: one quiet paragraph under the church at dusk ---- */
.in-rest { width: min(42rem, 100% - 2 * var(--gutter)); margin: var(--section) auto; text-align: center; }
.in-rest__media .hx-frame { aspect-ratio: 16 / 10; }
.in-rest__cross { display: block; margin-block: clamp(2.5rem, 5vw, 3.25rem) 1.25rem; color: var(--c-gold); }
.in-rest__cross .icon { width: 1.8rem; height: 1.8rem; }
.in-rest__text { font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.7; color: var(--c-ink); text-wrap: pretty; }
/* ---- The prayers: the shrine in its niche over a luminous card ---- */
.in-prayer {
position: relative; isolation: isolate;
display: grid; justify-items: center;
padding-block: clamp(1rem, 2vw, 1.5rem) var(--section);
}
.in-prayer::before { /* soft light falling from above */
content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1;
background: radial-gradient(60% 55% at 50% 0%, rgb(201 173 114 / 0.16) 0%, transparent 70%), var(--c-paper);
}
.in-prayer__niche { width: min(16rem, 62vw); margin-block-end: calc(clamp(3rem, 6vw, 4.5rem) * -1); z-index: 1; }
.in-prayer__niche .sh-niche__frame { box-shadow: 0 30px 60px -40px rgb(30 29 27 / 0.6); }
.in-prayer__panorama { width: min(60rem, 100% - 2 * var(--gutter)); margin-block-end: calc(clamp(3rem, 6vw, 4.5rem) * -1); z-index: 1; }
.in-prayer__panorama .hx-frame { aspect-ratio: 21 / 9; }
.in-prayer__card {
width: min(46rem, 100% - 2 * var(--gutter)); box-sizing: border-box;
padding: calc(clamp(3rem, 6vw, 4.5rem) + clamp(2rem, 4vw, 3rem)) clamp(1.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
text-align: center;
background: linear-gradient(180deg, #fffefb 0%, var(--c-band) 100%);
border: 1px solid var(--c-hair);
outline: 1px solid var(--c-gold-line); outline-offset: -0.75rem;
}
.in-prayer__intro { margin-block-end: 1.75rem !important; font-family: var(--f-sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.7; text-transform: uppercase; color: var(--c-muted); text-wrap: balance; }
.in-prayer__text p {
font-family: var(--f-display); font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem); line-height: 1.95;
color: var(--c-ink); text-wrap: pretty;
}
/* ---- Gallery: the photographs in a calm masonry, opening full size ---- */
.in-gallery { width: var(--hx-w); margin: var(--section) auto; }
.in-gallery .cp-gallery { display: block; columns: 3 18rem; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.in-gallery .cp-gallery__item { break-inside: avoid; margin-block-end: clamp(0.75rem, 1.6vw, 1.25rem); }
.in-gallery .cp-gallery__item .hx-frame { aspect-ratio: auto; min-height: 0; }
.in-gallery .cp-gallery__item img { height: auto; }
/* ---- Contact: the page as built, under the standard head ---- */
.in-contact { margin: clamp(2.5rem, 5vw, 4rem) 0 0; overflow-x: clip; } /* the contact block keeps its own widths and its full-bleed map */
/* ---- Below 64rem ---- */
@media (max-width: 63.999rem) {
.in-school, .in-register, .in-graces, .in-door { grid-template-columns: minmax(0, 1fr); }
.in-dossier__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-dossier__list li:not(:nth-child(3n + 1)) { border-inline-start: 0; }
.in-dossier__list li:nth-child(2n) { border-inline-start: 1px solid var(--c-hair); }
.in-door__media { width: min(22rem, 100%); }
.in-school__media { width: min(20rem, 100%); }
.in-graces__media { position: static; width: min(20rem, 100%); }
.in-rosary__list { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.in-rosary__list::before { display: none; }
}
@media (max-width: 40rem) {
.in-facts { grid-template-columns: minmax(0, 1fr); width: 100%; }
.in-facts li + li { border-inline-start: 0; border-block-start: 1px solid var(--c-hair); }
.in-hours { grid-template-columns: auto minmax(0, 1fr); }
.in-hours__icon { grid-row: span 2; }
.in-hours__cell + .in-hours__cell { border-inline-start: 0; border-block-start: 1px solid var(--c-hair); }
.in-notice__lists { grid-template-columns: minmax(0, 1fr); }
.in-dossier__list { grid-template-columns: minmax(0, 1fr); }
.in-dossier__list li:nth-child(2n) { border-inline-start: 0; }
.in-file__flow { grid-template-columns: minmax(0, 1fr); }
.in-file__arrow { justify-self: center; transform: rotate(90deg); }
.in-request__plate { grid-template-columns: minmax(0, 1fr); }
.in-notice__list { padding-inline: 0; }
.in-notice__list + .in-notice__list { border-inline-start: 0; border-block-start: 1px solid var(--c-hair); margin-block-start: 0.75rem; padding-block-start: 0.75rem; }
.in-prayer__card { padding-inline: 1.4rem; }
}