/*
 * AASHJ – main stylesheet
 *
 * Colours come from the coat of arms of the Administration: deep navy outline, the gold of
 * the mitre and crosier, the red of St Martin's cloak and the pale sky of the upper field.
 * Type: Instrument Sans throughout – a calm, contemporary grotesque; headings set tighter and heavier.
 */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */
:root {
	--white: #FFFFFF;
	--sky: #EDF2F8;          /* upper field of the arms: tinted bands */
	--sky-line: #D5E0EC;
	--navy: #13284A;         /* outline of the arms: headings, primary */
	--navy-deep: #0C1B33;    /* top bar, footer */
	--gold: #C9A24B;         /* mitre and crosier: buttons, rules */
	--gold-light: #E3C77F;   /* gold on dark ground */
	--gold-ink: #85651E;     /* gold as text on white */
	--red: #9C2B22;          /* St Martin's cloak: rubric labels */
	--ink: #1C2230;
	--muted: #5A6172;
	--rule: #E2E5EB;

	--display: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--gutter: clamp(16px, 4vw, 40px);
	--max: 76rem;
	--radius: 6px;
	--section: clamp(48px, 7vw, 96px);
	--shadow: 0 1px 2px rgba(12, 27, 51, .06), 0 8px 24px rgba(12, 27, 51, .08);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.site-main { flex: 1 0 auto; }
.site-main:focus { outline: none; }
.topbar, .site-header, .site-footer { flex-shrink: 0; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; color: var(--navy); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.018em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
/* Links: a light underline that darkens on hover, so pages full of links (priests, parishes) stay calm. */
a {
	color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .22em;
	text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
	transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--red); text-decoration-color: currentColor; }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
abbr[title] { text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }

.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 { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: var(--white); padding: .6rem 1rem; border-radius: var(--radius); }
.skip-link:focus { top: 12px; color: var(--white); }

/* Rubric: small red capitals, like the instructions printed in red in a missal. */
.eyebrow, .facts__label, .masses__day, .event__type, .map-pop__zone {
	font-family: var(--sans);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red);
	line-height: 1.3;
}
.eyebrow { margin: 0 0 .9rem; }
.eyebrow--light { color: var(--gold-light); }

.button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 46px; padding: .65rem 1.4rem;
	border: 1px solid var(--navy); border-radius: 3px;
	background: var(--navy); color: var(--white);
	font: 600 .98rem/1.2 var(--sans); letter-spacing: .02em;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
.button--gold { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.button--gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-deep); }
.button--ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--white); }
.button--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); color: var(--white); }
.button--quiet { background: transparent; color: var(--navy); }
.button--quiet:hover { background: var(--sky); color: var(--navy); border-color: var(--navy); }

.more { font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--navy); white-space: nowrap; }
.more::after { content: " →"; color: var(--gold-ink); }
.more:hover { color: var(--red); text-decoration: underline; }
.more--light { color: var(--white); }
.more--light::after { color: var(--gold-light); }
.more--light:hover { color: var(--gold-light); }

/* Marker for data still awaiting confirmation (shown only on local builds). */
.tbc {
	display: inline-grid; place-items: center;
	width: 1.1em; height: 1.1em; margin-left: .3em;
	border-radius: 50%; background: var(--red); color: var(--white);
	font: 700 .66rem/1 var(--sans); vertical-align: .3em; cursor: help;
}

/* ---------------------------------------------------------------- top bar */
.topbar { background: var(--navy-deep); color: rgba(255, 255, 255, .82); font-size: .86rem; }
.topbar :focus-visible { outline-color: var(--gold-light); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 40px; }
.topbar__day { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.topbar__day time { color: var(--white); font-weight: 600; }
.topbar__liturgy { display: inline-flex; align-items: center; gap: 7px; }
.lit-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.lit-dot--green { background: #2F8A55; }
.lit-dot--violet { background: #7A4CB0; }
.lit-dot--red { background: #C8322A; }
.lit-dot--rose { background: #E29AB0; }
.lit-dot--white { background: #FFFFFF; }
.topbar__links { display: flex; align-items: center; gap: 4px 20px; }
.topbar__links a { color: rgba(255, 255, 255, .86); text-decoration: none; white-space: nowrap; }
.topbar__links a:hover { color: var(--white); text-decoration: underline; }
.topbar__lang { display: flex; gap: 2px; list-style: none; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .2); }
.topbar__lang a { display: block; padding: 2px 6px; border-radius: 2px; font-weight: 600; letter-spacing: .06em; }
.topbar__lang a.is-current { color: var(--gold-light); }
.topbar__lang abbr, .site-nav__lang abbr { text-decoration: none; }
.site-nav__lang { display: none; }
.topbar .topbar__give { padding: .3rem .95rem; border-radius: 2px; background: var(--gold); color: var(--navy-deep); font-weight: 700; letter-spacing: .03em; }
.topbar .topbar__give:hover { background: var(--gold-light); color: var(--navy-deep); text-decoration: none; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--rule); transition: box-shadow .2s ease; }
.admin-bar .site-header { top: 32px; }
.site-header.is-stuck { box-shadow: 0 6px 18px rgba(12, 27, 51, .08); }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 92px; }

.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; text-decoration: none; color: var(--navy); min-width: 0; }
.brand:hover { color: var(--navy); }
.brand__arms { width: auto; height: 64px; flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font-family: var(--display); font-weight: 650; font-size: 1.32rem; line-height: 1.05; letter-spacing: -.02em; }
.brand__sub { font-family: var(--display); font-size: .98rem; line-height: 1.2; color: var(--muted); letter-spacing: -.005em; }

.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav__list { display: flex; align-items: center; list-style: none; }
.site-nav__list li { position: relative; list-style: none; }
.site-nav__list a { display: block; padding: .6rem .75rem; color: var(--ink); font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap; }
.site-nav__list > li > a { position: relative; }
.site-nav__list > li > a::after {
	content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px;
	background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.site-nav__list > li > a:hover { color: var(--navy); }
.site-nav__list > li > a:hover::after,
.site-nav__list > .current-menu-item > a::after,
.site-nav__list > .current-menu-ancestor > a::after,
.site-nav__list > .current_page_item > a::after { transform: scaleX(1); }
.site-nav__list > .current-menu-item > a,
.site-nav__list > .current-menu-ancestor > a,
.site-nav__list > .current_page_item > a { color: var(--navy); }
.site-nav__list .menu-item-has-children > a { padding-right: 1.5rem; }
.site-nav__list .menu-item-has-children > a::before {
	content: ""; position: absolute; right: .6rem; top: 50%; width: .36em; height: .36em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg); opacity: .55;
}
.site-nav__list .sub-menu {
	position: absolute; top: calc(100% + 1px); left: 0; min-width: 250px;
	padding: 8px; list-style: none; background: var(--white);
	border: 1px solid var(--rule); border-top: 2px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-nav__list .sub-menu a { padding: .55rem .8rem; border-radius: 3px; font-weight: 500; }
.site-nav__list .sub-menu a:hover { background: var(--sky); color: var(--navy); }

/* Search: a magnifier at the end of the header opens a full-width field below it (main.js). */
.search-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 3px; background: var(--white); color: var(--navy); transition: background-color .15s ease, border-color .15s ease; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--sky); border-color: var(--sky-line); color: var(--navy); }
.search-toggle__close, .search-toggle[aria-expanded="true"] .search-toggle__open { display: none; }
.search-toggle[aria-expanded="true"] .search-toggle__close { display: block; }
.search-panel { position: absolute; top: 100%; left: 0; right: 0; padding: 22px 0 24px; background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px rgba(12, 27, 51, .12); }
.search-panel[hidden] { display: none; }
.search-panel__form { display: flex; align-items: center; gap: 12px; }
.search-panel__form input { flex: 1; min-width: 0; padding: .55rem 0; border: 0; border-bottom: 2px solid var(--navy); border-radius: 0; background: transparent; color: var(--navy); font: 600 clamp(1.25rem, 1rem + 1.1vw, 1.7rem)/1.2 var(--display); letter-spacing: -.015em; }
.search-panel__form input::placeholder { color: var(--muted); opacity: .7; }
.search-panel__form input:focus { outline: none; border-bottom-color: var(--gold); }
.search-panel__jump { margin-top: 18px; }
@media (max-width: 640px) {
	.search-panel { padding: 16px 0 18px; }
	.search-panel__form .button { padding-inline: 1rem; }
}

.nav-toggle {
	display: none; align-items: center; gap: 10px;
	min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--rule); border-radius: 3px;
	background: var(--white); color: var(--navy); font: 600 .98rem/1 var(--sans); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* ---------------------------------------------------------------- photo credit */
.photo-credit {
	position: absolute; right: var(--gutter); bottom: 14px; z-index: 2; margin: 0;
	font-size: .78rem; letter-spacing: .02em; color: rgba(255, 255, 255, .78);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(480px, 74vh, 760px); background: var(--navy); color: var(--white); overflow: hidden; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(12, 27, 51, .88) 0%, rgba(12, 27, 51, .66) 38%, rgba(12, 27, 51, .18) 70%, rgba(12, 27, 51, .05) 100%),
		linear-gradient(0deg, rgba(12, 27, 51, .55) 0%, rgba(12, 27, 51, 0) 35%);
}
.hero--plain::before { background: linear-gradient(120deg, var(--navy-deep), var(--navy)); }
.hero__inner { padding-block: 72px 140px; }
.hero__title { color: var(--white); font-size: clamp(2.15rem, 1.4rem + 3.7vw, 4.6rem); font-weight: 650; line-height: 1.02; letter-spacing: -.03em; max-width: 15ch; }
.hero .photo-credit { bottom: 104px; }
.hero__lede { margin: 1.4rem 0 0; max-width: 34rem; font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); color: rgba(255, 255, 255, .88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 0; }

/* Four photo tiles, overlapping the bottom of the hero. */
.tiles { position: relative; z-index: 3; margin-top: -88px; }
.tiles__grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile {
	position: relative; display: flex; align-items: flex-end; min-height: 200px; overflow: hidden;
	border-radius: var(--radius); background: var(--navy); color: var(--white); text-decoration: none;
	box-shadow: var(--shadow); isolation: isolate;
}
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 27, 51, .92) 0%, rgba(12, 27, 51, .45) 55%, rgba(12, 27, 51, .15) 100%); }
.tile__text { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; }
.tile__label { font-family: var(--display); font-size: 1.32rem; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.tile__label::after { content: "→"; margin-left: .3em; color: var(--gold-light); font-family: var(--sans); font-size: 1.1rem; }
.tile__desc { font-size: .92rem; color: rgba(255, 255, 255, .82); }
.tile:hover { color: var(--white); }
.tile:hover .tile__img { transform: scale(1.05); }
.tile:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section); }
.section:not(.section--sky) + .section:not(.section--sky) { padding-top: 0; }
.section--sky { background: var(--sky); }
.section__title { font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.6rem); letter-spacing: -.025em; }
.section > .wrap > .section__title { margin-bottom: 1.5rem; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: .8rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule); position: relative; }
.block-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--gold); }
.block-head__title { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem); letter-spacing: -.02em; }
.block-title { font-size: 1.45rem; margin: 2.6rem 0 1rem; }
.place__main > :first-child .block-title, .place__main > .block-title:first-child { margin-top: 0; }

.intro { max-width: 44rem; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5rem 0 0; }
.jump a { padding: .4rem 1rem; border: 1px solid var(--sky-line); border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 600; font-size: .95rem; text-decoration: none; }
.jump a:hover { border-color: var(--navy); background: var(--sky); color: var(--navy); }
.season-note { color: var(--muted); margin: .25rem 0 0; }
.season-note strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- today: Mass now + calendar */
.today { padding-top: clamp(48px, 6vw, 80px); }
.today__grid { display: grid; gap: clamp(36px, 5vw, 72px); }
.horarium__date { margin: -.4rem 0 .6rem; color: var(--muted); font-size: .95rem; }
.horarium__list { list-style: none; }
.horarium__row {
	display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: baseline; gap: 4px 12px;
	padding: .55rem .6rem; margin-inline: -.6rem; border-bottom: 1px solid var(--rule); border-radius: 3px;
	break-inside: avoid; transition: opacity .3s ease;
}
.horarium__time { font: 600 1.15rem/1.2 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--navy); }
.horarium__place a { color: var(--ink); font-weight: 600; text-decoration: none; }
.horarium__place a:hover { color: var(--red); text-decoration: underline; }
.horarium__note { display: block; font-size: .86rem; line-height: 1.35; color: var(--muted); }
.horarium__flag { font: 700 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--red); }
.horarium__row.is-past { opacity: .42; }
.horarium__row.is-next { background: var(--sky); border-bottom-color: transparent; }
.horarium__row.is-next .horarium__time { color: var(--red); }
.horarium__done { margin: .8rem 0 0; }

.events { list-style: none; }
.event { display: grid; grid-template-columns: 4rem 1fr; gap: 16px; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start; padding: .45rem 0 .5rem; border: 1px solid var(--sky-line); border-radius: 3px; background: var(--white); line-height: 1; }
.event__day { font: 650 1.6rem/1 var(--display); color: var(--navy); letter-spacing: -.02em; }
.event__month { margin-top: .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.event__type { margin: .1rem 0 .3rem; }
.event__title { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.event__title a { text-decoration: none; }
.event__title a:hover { text-decoration: underline; }
.event__meta { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- administrator band */
.administrator { background: var(--navy); color: rgba(255, 255, 255, .88); padding-block: var(--section); overflow: hidden; }
.administrator :focus-visible { outline-color: var(--gold-light); }
.administrator__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; position: relative; }
.administrator__photo img { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; box-shadow: 0 20px 48px rgba(0, 0, 0, .3); }
.administrator__name { color: var(--white); font-size: clamp(2rem, 1.5rem + 1.7vw, 2.9rem); letter-spacing: -.025em; margin-bottom: 1.1rem; }
.administrator__body p { max-width: 36rem; font-size: 1.12rem; }
.administrator__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 1.8rem; }
.administrator__arms { display: none; text-align: center; }
.administrator__arms img { width: 190px; margin-inline: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25)); }
.administrator__arms figcaption { margin-top: .5rem; font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }

/* ---------------------------------------------------------------- map */
.atlas__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.atlas__text p { max-width: 32rem; }
.atlas__text .section__title { margin-bottom: 1rem; }
.place-map { position: relative; z-index: 0; height: clamp(360px, 52vh, 540px); border-radius: var(--radius); background: var(--sky-line); border: 1px solid var(--sky-line); box-shadow: var(--shadow); overflow: hidden; }
.place-map--wide { height: clamp(320px, 46vh, 460px); margin-top: clamp(28px, 4vw, 44px); }
.place-map noscript p { padding: 20px; }
.place-map .leaflet-tile-pane { filter: grayscale(.9) sepia(.12) contrast(.92) brightness(1.04); }
.map-pin span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--navy); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(12, 27, 51, .45); }
.map-pin--main span { background: var(--red); border-color: var(--white); box-shadow: 0 0 0 3px rgba(201, 162, 75, .55), 0 1px 4px rgba(12, 27, 51, .45); }
.map-pop .leaflet-popup-content-wrapper { border-radius: 4px; box-shadow: var(--shadow); }
.map-pop .leaflet-popup-content { margin: 14px 18px 14px 16px; font: 1rem/1.4 var(--sans); color: var(--ink); }
.map-pop .leaflet-popup-content p { margin: 0; }
.map-pop__zone { margin-bottom: 2px !important; font-size: .7rem; }
.map-pop__name { font: 600 1.15rem/1.2 var(--display); letter-spacing: -.015em; }
.leaflet-container .map-pop__name a { color: var(--navy); text-decoration: none; }
.leaflet-container .map-pop__name a:hover { color: var(--red); text-decoration: underline; }
.map-pop__church { color: var(--muted); font-size: .9rem; }
.map-pop__mass { margin-top: 6px !important; font-variant-numeric: tabular-nums; }
.map-pop__mass span { font-weight: 600; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.6rem 0 1.8rem; border-top: 1px solid var(--sky-line); }
.figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1rem 0 .9rem; border-bottom: 1px solid var(--sky-line); }
.figures div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--sky-line); }
.figures div:nth-child(even) { padding-left: 1.2rem; }
.figures dt { font-size: .9rem; color: var(--muted); }
.figures dd { margin: 0; font: 600 2.3rem/1 var(--display); color: var(--navy); letter-spacing: -.03em; }

/* ---------------------------------------------------------------- page head */
.page-head { position: relative; isolation: isolate; background: var(--sky); padding: clamp(44px, 6vw, 80px) 0 clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--sky-line); }
.page-head__title { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 650; line-height: 1.05; letter-spacing: -.03em; max-width: 20ch; }
.page-head__lede { margin: 1rem 0 0; max-width: 40rem; font-size: 1.18rem; color: var(--muted); }
.page-head + .wrap:not(.place):not(.profile):not(.section) { padding-top: clamp(28px, 4vw, 48px); }

/* Page content: text written in the editor lines up with the sections; section blocks run full width. */
.page-content { padding-top: clamp(28px, 4vw, 48px); }
.page-content--home { padding-top: 0; }
/* The opening paragraph written in the editor reads as the introduction. */
.page-content > p:first-child { font-size: 1.15rem; line-height: 1.6; }
.page-content > :not(.aasj-block) { max-width: 44rem; margin-left: max(var(--gutter), calc((100% - var(--max)) / 2)); margin-right: var(--gutter); }
.page-content > .aasj-block--timetable:first-child .timetable-intro { padding-top: 0; }
.timetable-intro { padding-bottom: 8px; }
.place-map--preview { display: grid; place-items: center; color: var(--muted); font-weight: 600; }
.page-head--photo .page-head__img { object-position: 50% 40%; }
.page-head--photo { display: flex; align-items: flex-end; min-height: clamp(300px, 44vh, 460px); padding: 0; background: var(--navy); border-bottom: 0; overflow: hidden; }
.page-head--photo .page-head__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Darker at the foot and along the left, where the words sit, so they read over a pale wall or sky too. */
.page-head--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 27, 51, .45) 0%, rgba(12, 27, 51, 0) 60%), linear-gradient(0deg, rgba(12, 27, 51, .9) 0%, rgba(12, 27, 51, .5) 45%, rgba(12, 27, 51, .15) 100%); }
.page-head--photo .page-head__inner { padding-block: 120px clamp(36px, 5vw, 56px); }
.page-head--photo .page-head__title { color: var(--white); }
.page-head--photo .page-head__lede { color: rgba(255, 255, 255, .88); }
.page-head--photo .eyebrow { color: var(--gold-light); }

/* ---------------------------------------------------------------- news cards */
.cards { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s ease, translate .25s var(--ease); }
.card:hover { box-shadow: var(--shadow); }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 18px 22px 22px; }
.card__meta { margin: 0 0 .35rem; color: var(--muted); font-size: .9rem; }
.card__title { font-size: 1.25rem; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__excerpt { margin: .6rem 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- Mass times */
.masses { display: grid; gap: 20px 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.masses__day { margin-bottom: .5rem; }
.masses__list { list-style: none; }
.masses__item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .7rem; padding: .3rem 0; border-bottom: 1px dotted var(--rule); }
.masses__item:last-child { border-bottom: 0; }
.masses__time { order: -1; font: 600 1.18rem/1.25 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.masses__days { color: var(--ink); }
.masses__meta { flex-basis: 100%; font-size: .9rem; line-height: 1.35; color: var(--muted); }
.masses__other { list-style: none; margin-top: .5rem; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.masses__other li { padding: .1rem 0; }
.masses__other .masses__meta { display: inline; }
.masses__period { font-style: italic; }
.masses__none, .masses__empty { color: var(--muted); font-style: italic; margin: 0; }

.timetable .section__title { margin-bottom: 1.4rem; }
.timetable__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.timetable__place { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--navy); border-radius: 0 0 var(--radius) var(--radius); padding: 20px 24px 20px; }
.timetable__head { margin-bottom: 14px; }
.timetable__name { font-size: 1.4rem; }
.timetable__name a { text-decoration: none; }
.timetable__name a:hover { text-decoration: underline; }
.timetable__church { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.35; }

/* ---------------------------------------------------------------- places */
.place-list { list-style: none; display: grid; column-gap: clamp(24px, 4vw, 56px); }
/* Each row opens its place; the whole row responds to the pointer. */
.place-list__item { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.place-list__item::before { content: ""; position: absolute; inset: 0 -.8rem; z-index: -1; border-radius: 4px; background: var(--sky); opacity: 0; transition: opacity .15s ease; }
.place-list__item:hover::before, .place-list__item:focus-within::before { opacity: 1; }
.place-list__link { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.place-list__link::after { content: ""; position: absolute; inset: 0; }
.place-list__name { font: 600 1.22rem/1.2 var(--display); color: var(--navy); letter-spacing: -.015em; }
.place-list__item:hover .place-list__name { color: var(--red); }
.place-list__church { color: var(--muted); font-size: .95rem; line-height: 1.35; }
.place-list__times { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font: 600 1.05rem/1.25 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.place-list__day { font: 600 .68rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.place { display: grid; gap: clamp(28px, 4vw, 64px); padding-block: clamp(36px, 5vw, 64px) var(--section); }
.place__aside { align-self: start; }
.facts { background: var(--sky); border-radius: var(--radius); padding: 24px 26px; }
.facts__label { margin: 1.2rem 0 .25rem; }
.facts__label:first-child { margin-top: 0; }
.facts__value { margin: 0; overflow-wrap: anywhere; }
.facts__links a + a { margin-left: 1rem; }
.facts__map { margin-top: .35rem; font-weight: 600; }
/* Feast days: one per line, a small gold bullet, the date in bold. */
.feasts { list-style: none; padding: 0; }
.feasts li { position: relative; padding-left: 1.05rem; }
.feasts li + li { margin-top: .3rem; }
.feasts li::before { content: ""; position: absolute; left: .15rem; top: calc(.8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.feasts__date { font-weight: 600; color: var(--navy); }
.lead-text { font-size: 1.18rem; max-width: 42rem; }
.link-list { list-style: none; }
.link-list li { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.link-list:not(.link-list--large) a { font-weight: 600; text-decoration: none; }
.link-list:not(.link-list--large) a::after { content: "→"; display: inline-block; margin-left: .4em; color: var(--gold-ink); transition: transform .2s ease; }
.link-list:not(.link-list--large) a:hover::after { transform: translateX(3px); }
.link-list .members__contact { margin-top: .2rem; }
.link-list .members__contact a { font-weight: 400; }
.link-list .members__contact a::after { content: none; }
.link-list--large li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 1rem 0; }
.link-list--large a { font: 600 1.2rem/1.3 var(--display); letter-spacing: -.01em; text-decoration: none; }
.link-list--large a:hover { text-decoration: underline; }
.link-list__host { color: var(--muted); font-size: .95rem; }

.prose { max-width: 44rem; }
.prose > * + h2, .prose > * + h3 { margin-top: 2rem; }
.prose h2 { font-size: 1.55rem; margin-bottom: .6rem; }
.prose h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 2px solid var(--gold); font-family: var(--display); font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.prose figure, .prose .wp-block-image { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); }
.place__main > .prose { margin-top: 2.4rem; }

/* ---------------------------------------------------------------- people */
.people { display: grid; gap: 0 clamp(24px, 3vw, 44px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.person { display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 1.2rem 0; border-top: 1px solid var(--rule); }
.person--compact { grid-template-columns: 56px 1fr; }
.person__photo img, .person__initials { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.person__initials { display: grid; place-items: center; background: var(--sky); color: var(--navy); font: 600 1.25rem/1 var(--display); letter-spacing: .02em; border: 1px solid var(--sky-line); }
.person--compact .person__initials { font-size: 1.15rem; }
.person__name { font-size: 1.15rem; }
.person__name a { text-decoration: none; }
.person__name a:hover { text-decoration: underline; }
.person__role { margin: .2rem 0 0; font-weight: 600; font-size: .98rem; }
.person__order { margin: .1rem 0 0; color: var(--muted); font-style: italic; font-size: .95rem; }
.person__places { margin: .35rem 0 0; font-size: .95rem; }
.person__contact { display: flex; flex-direction: column; gap: .1rem; margin: .45rem 0 0; font-size: .95rem; color: var(--muted); }
.person__contact a { color: var(--muted); }
.person__contact a:hover { color: var(--red); }

/* A person's page (Administratori, a priest): the navy of the Administrator band on the home page,
   with the portrait as the header's photo. */
.profile-head { background: var(--navy); color: rgba(255, 255, 255, .85); padding-block: clamp(36px, 5vw, 64px); overflow: hidden; }
.profile-head :focus-visible { outline-color: var(--gold-light); }
.profile-head__grid { display: grid; gap: 24px clamp(28px, 4vw, 56px); align-items: center; }
.profile-head__photo img { display: block; width: 100%; max-width: 150px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; box-shadow: 0 20px 48px rgba(0, 0, 0, .3); }
.profile-head__photo .person__initials { width: clamp(120px, 18vw, 180px); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); background: rgba(255, 255, 255, .07); color: var(--white); border-color: rgba(255, 255, 255, .18); }
.profile-head__name { color: var(--white); font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem); font-weight: 650; line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; }
.profile-head__lede { margin: 1rem 0 0; max-width: 36rem; font-size: 1.15rem; color: rgba(255, 255, 255, .78); }
.profile-head__arms { display: block; }
.profile-head__arms img { width: 104px; }
.profile-head__arms figcaption { font-size: .7rem; }
/* Phones: the portrait and the arms side by side above the name. */
.profile-head__grid--arms { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "photo arms" "text text"; }
.profile-head__grid--arms .profile-head__photo { grid-area: photo; }
.profile-head__grid--arms .profile-head__text { grid-area: text; }
.profile-head__grid--arms .profile-head__arms { grid-area: arms; justify-self: end; align-self: end; }
.profile__prose { margin-bottom: 2.4rem; }
.profile__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 2rem 0 0; }
.more--back::after { content: none; }
.more--back::before { content: "← "; color: var(--gold-ink); }
.contact__lines--first { margin-top: .6rem; padding-top: 0; border-top: 0; }

/* The places a priest serves: a panel like the zones; each cell has the church's photo as a
   small square, or the map pin when there is no photo yet. */
.served { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.served__item { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule), 1px 1px 0 var(--rule); transition: background-color .2s ease; }
.served__item:hover { background: var(--sky); }
.served__media { width: 72px; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--sky); border: 1px solid var(--sky-line); display: grid; place-items: center; }
.served__media img { width: 100%; height: 100%; object-fit: cover; }
.served__media:empty::before { content: ""; width: 26px; height: 26px; background: var(--navy); opacity: .35; -webkit-mask: var(--i-pin) center / contain no-repeat; mask: var(--i-pin) center / contain no-repeat; }
.served__name { font-size: 1.15rem; letter-spacing: -.015em; }
.served__name a { color: var(--navy); text-decoration: none; }
.served__name a::after { content: ""; position: absolute; inset: 0; }
.served__item:hover .served__name a { color: var(--red); }
.served__item:has(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: -4px; }
.served__name a:focus-visible { outline: 0; }
.served__church { margin: .2rem 0 0; color: var(--muted); font-size: .93rem; line-height: 1.35; }
.served__times { margin: .55rem 0 0; font: 600 .98rem/1.3 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.served__times .place-list__day { display: block; }

/* ---------------------------------------------------------------- communities */
.community-index { display: grid; gap: 32px clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.community-index__place { font-size: 1.25rem; padding-bottom: .45rem; margin-bottom: .45rem; border-bottom: 1px solid var(--rule); }
.community-index__place a { text-decoration: none; }
.community-index__list { list-style: none; }
.community-index__list li { padding: .4rem 0; }
.community-index__count { display: block; color: var(--muted); font-size: .9rem; }
.members__contact { display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; color: var(--muted); font-size: .95rem; }
.members__contact a { color: var(--muted); }

/* ---------------------------------------------------------------- calendar */
.calendar__filter { margin: 0 0 2.6rem; }
.jump a.is-current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.calendar__month + .calendar__month { margin-top: 2.8rem; }
.calendar__title { display: flex; align-items: baseline; gap: .45rem; font-size: 1.45rem; padding-bottom: .5rem; border-bottom: 2px solid var(--navy); }
.calendar__y { color: var(--muted); font-weight: 500; }
.calendar__past { margin-top: 3rem; }
/* Wider screens: an agenda, the month in its own column beside its events. */
@media (min-width: 820px) {
	.calendar__month { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 64px); align-items: start; }
	.calendar__title { position: sticky; top: 116px; flex-direction: column; gap: .15rem; padding: 1rem 0 0; border-bottom: 0; font-size: 1.9rem; letter-spacing: -.025em; }
	.calendar__y { font-size: 1rem; letter-spacing: .02em; }
	.calendar__month .events { border-top: 2px solid var(--navy); }
	.calendar__month + .calendar__month { margin-top: 3.4rem; }
	.calendar__past { margin-left: calc(11rem + clamp(24px, 4vw, 64px)); }
}
.calendar__past summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: .5rem 0; }
.calendar__past[open] .event { opacity: .75; }

/* ---------------------------------------------------------------- structure
   Each commission is a card of its own: what it does on white, who leads it in a tinted band at the
   foot. The zones are one panel; each cell draws the rule on its right and below and the panel clips
   those at its edge, so a row that is not full still looks finished at any width. */
.commissions { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(16px, 2vw, 24px); }
.commission { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.commission__title { margin: 0; padding: 22px 24px; font-size: 1.18rem; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.commission__title:has(+ .commission__desc) { padding-bottom: 0; }
.commission__desc { margin: 0; padding: .5rem 24px 22px; color: var(--muted); font-size: .98rem; }
.commission__lead { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: auto; padding: 16px 24px; background: var(--sky); border-top: 1px solid var(--sky-line); }
.commission__photo { width: 44px; height: 44px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--white); }
.commission__photo.person__initials { font-size: .88rem; background: var(--white); }
.commission__name { margin: 0; font-weight: 600; line-height: 1.35; color: var(--ink); }
.commission__name a { color: var(--ink); text-decoration: none; }
.commission__name a:hover { color: var(--red); text-decoration: underline; }
.commission .person__contact { margin-top: .1rem; font-size: .92rem; }
.zones__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.zone { padding: 24px 26px 26px; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule), 1px 1px 0 var(--rule); }
.zone__title { margin: 0 0 .75rem; font: 600 .74rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); text-wrap: balance; }
.zone__list { list-style: none; }
.zone__item { padding: .26rem 0; }
.zone__item a { font-weight: 600; text-decoration: none; color: var(--ink); }
.zone__item a:hover { color: var(--red); text-decoration: underline; }
@media (max-width: 639px) {
	.zone__list { columns: 2; column-gap: 16px; }
	.zone__item { break-inside: avoid; }
}

/* ---------------------------------------------------------------- donate
   The page is for one thing: sending a gift. The accounts come first, one row per currency,
   the IBAN large and on one line, each with its own copy button. */
.donate__hint { margin: 0; color: var(--muted); }
/* One card, like a transfer slip: the three accounts, then the details they share. */
.transfer { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.accounts { list-style: none; }
.account { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 10px 32px; padding: 24px 28px; }
.account + .account { border-top: 1px solid var(--rule); }
.account__currency { margin: 0; display: flex; flex-direction: column; }
.account__code { font: 650 1.75rem/1 var(--display); letter-spacing: .01em; color: var(--navy); }
.account__name { margin-top: .35rem; font-size: .9rem; color: var(--muted); }
.account__iban { margin: 0; font: 500 clamp(1.05rem, .9rem + .6vw, 1.4rem)/1.3 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .045em; color: var(--ink); white-space: nowrap; }
.account__copy { min-height: 42px; padding: .5rem 1.15rem; font-size: .92rem; }
.transfer__details { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.2fr) minmax(0, 1fr); margin: 0; background: var(--sky); border-top: 1px solid var(--sky-line); }
.detail { padding: 20px 28px 22px; }
.detail + .detail { border-left: 1px solid var(--sky-line); }
.detail__label { font: 600 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.detail__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: .45rem 0 0; }
.detail__value { min-width: 0; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.detail__sub { display: block; margin-top: .1rem; font-weight: 400; font-size: .95rem; color: var(--muted); }
/* Copy buttons carry an icon; once copied it turns into a tick. Icons: Lucide (ISC licence). */
:root {
	--i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:is(.account__copy, .detail__copy)::before {
	content: ""; flex: none; width: 1em; height: 1em; background: currentColor;
	-webkit-mask: var(--i-copy) center / contain no-repeat; mask: var(--i-copy) center / contain no-repeat;
}
:is(.account__copy, .detail__copy).is-copied::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
.detail__copy { display: inline-flex; align-items: center; gap: .4em; flex: none; padding: .25rem .65rem; border: 1px solid var(--sky-line); border-radius: 3px; background: var(--white); color: var(--navy); font: 600 .82rem/1.35 var(--sans); white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.detail__copy:hover { border-color: var(--navy); }
:is(.account__copy, .detail__copy).is-copied { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.donate__note { margin: 1.4rem 0 0; max-width: 44rem; color: var(--muted); }
.donate__ask { margin: 1.25rem 0 0; color: var(--muted); }
.donate__ask a { font-weight: 600; }
.donate-why__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.donate-why__text .section__title { margin-bottom: 1rem; }
.donate-why__text .prose { max-width: 36rem; font-size: 1.12rem; }
/* The Administration in numbers: a card like the accounts above, two by two, numbers on one line. */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; background: var(--white); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .45rem; padding: clamp(20px, 2.6vw, 32px) clamp(20px, 2.6vw, 34px); }
.stats__item:nth-child(odd) { border-right: 1px solid var(--rule); }
.stats__item:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
.stats__value { margin: 0; font: 650 clamp(2.4rem, 1.7rem + 2.2vw, 3.5rem)/1 var(--display); letter-spacing: -.035em; color: var(--navy); font-variant-numeric: tabular-nums; }
.stats__label { font-size: 1rem; line-height: 1.35; color: var(--muted); }
@media (min-width: 900px) {
	.donate-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* ---------------------------------------------------------------- contact
   Same language as the donate page: white cards with a gold top edge. */
.contact__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact__text .section__title { margin-bottom: 1rem; }
.contact__text .prose { max-width: 36rem; font-size: 1.12rem; }
.contact__card { padding: 26px 30px 28px; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); }
.contact__address { margin: .45rem 0 .6rem; font-size: 1.1rem; line-height: 1.55; }
.contact__lines { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.officials { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.officials__people { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.officials__bodies { list-style: none; padding: 16px 26px 18px; background: var(--sky); border-top: 1px solid var(--rule); }
.officials__bodies li + li { margin-top: .6rem; }
.officials__body { display: inline; margin: 0; font-size: 1rem; }
.officials__desc { display: inline; margin: 0; color: var(--muted); }
.officials__desc::before { content: " · "; color: var(--gold-ink); }
/* Rules drawn by each cell on its right and below, clipped at the panel edge (see the zones). */
.official { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 24px 26px; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule), 1px 1px 0 var(--rule); }
.official__photo img, .official__photo .person__initials { width: 64px; height: 64px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.official__photo .person__initials { font-size: 1.15rem; }
.official__role { margin: 0; font: 600 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.official__name { margin: .3rem 0 .35rem; font-size: 1.15rem; }
.official__name a { text-decoration: none; }
.official__name a:hover { text-decoration: underline; }
.contact-more__grid { display: grid; gap: 28px clamp(28px, 4vw, 64px); }
.contact-more__grid .block-title { margin-top: 0; }
@media (min-width: 820px) {
	.contact__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.contact-more__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- useful links
   Each group is one white panel with a gold top edge, like the people on the contact page; the
   whole cell is the link. One row on wide screens, stacked below. */
:root { --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); }
.weblinks { list-style: none; display: grid; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.weblink { position: relative; display: flex; flex-direction: column; padding: 24px 26px 22px; transition: background-color .2s ease; }
.weblink + .weblink { border-top: 1px solid var(--rule); }
.weblink:hover { background: var(--sky); }
.weblink:has(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: -4px; }
.weblink__name { margin: 0; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.weblink__name a { color: inherit; text-decoration: none; }
.weblink__name a:focus-visible { outline: 0; }
.weblink__name a::after { content: ""; position: absolute; inset: 0; }
.weblink__desc { margin: .45rem 0 0; color: var(--muted); font-size: .98rem; line-height: 1.5; }
.weblink__host { display: flex; align-items: center; gap: .35em; margin: auto 0 0; padding-top: 1rem; font-size: .9rem; font-weight: 600; color: var(--gold-ink); overflow-wrap: anywhere; }
.weblink__host::after { content: ""; flex: none; width: .95em; height: .95em; background: currentColor; -webkit-mask: var(--i-out) center / contain no-repeat; mask: var(--i-out) center / contain no-repeat; transition: transform .25s var(--ease); }
.weblink:hover .weblink__host::after { transform: translate(2px, -2px); }
.weblink:hover .weblink__name { color: var(--red); }
/* Each site's own icon beside its name, on a white tile so dark and light icons sit alike. */
.weblink--logo { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.weblink__text { display: flex; flex-direction: column; height: 100%; }
.weblink__logo { display: grid; place-items: center; width: 52px; height: 52px; padding: 4px; background: var(--white); border: 1px solid var(--sky-line); border-radius: 10px; }
.weblink__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.weblink__logo--letter { font: 650 1.3rem/1 var(--display); color: var(--navy); background: var(--sky); }
/* Links within the site (page not found): the arrow points on, not out. */
.weblinks--inside .weblink__name::after { content: " →"; color: var(--gold-ink); }
@media (min-width: 900px) {
	.weblinks { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.weblink { padding: 28px 30px 26px; }
	.weblink + .weblink { border-top: 0; border-left: 1px solid var(--rule); }
}

/* Phones and small tablets: the currency and the button on one line, the IBAN below (it may wrap between groups). */
@media (max-width: 819px) {
	.account { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 18px 20px; }
	.account__name { margin-top: .25rem; }
	.account__iban { grid-column: 1 / -1; grid-row: 2; white-space: normal; font-size: .95rem; letter-spacing: .02em; text-wrap: balance; }
	.transfer__details { grid-template-columns: 1fr; }
	.detail { padding: 16px 20px 18px; }
	.detail + .detail { border-left: 0; border-top: 1px solid var(--sky-line); }
}
.notice { background: var(--sky); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; }
.notice .block-title { margin-top: 0; font-size: 1.3rem; }
.notice p:last-child { margin-bottom: 0; }
.nav-links { display: flex; gap: 16px; margin-top: 2rem; }

/* ---------------------------------------------------------------- search
   One list for every kind of result, in the white panel with the gold edge; the picture column holds
   the photo, else the date (events, news), the initials (priests) or an icon. */
:root {
	--i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--i-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}
.search-again { display: flex; gap: 10px; max-width: 40rem; margin-bottom: clamp(24px, 3vw, 36px); }
.search-again input { flex: 1; min-width: 0; padding: .7rem 1rem; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--sky-line); border-radius: var(--radius); }
.search-again input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.results { list-style: none; max-width: 52rem; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.result { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 24px; transition: background-color .2s ease; }
.result + .result { border-top: 1px solid var(--rule); }
.result:hover { background: var(--sky); }
.result:has(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: -4px; }
.result__media { display: grid; place-items: center; width: 60px; }
.result__media img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.result__media .person__initials { width: 56px; font-size: 1rem; }
.result__media .event__date { width: 56px; padding: .4rem 0; }
.result__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 4px; background: var(--sky); border: 1px solid var(--sky-line); }
.result__icon::before { content: ""; width: 24px; height: 24px; background: var(--navy); opacity: .4; -webkit-mask: var(--icon, var(--i-pin)) center / contain no-repeat; mask: var(--icon, var(--i-pin)) center / contain no-repeat; }
.result__icon--bashkesi { --icon: var(--i-users); }
.result__icon--page { --icon: var(--i-page); }
.result__title { margin: .15rem 0 0; font-size: 1.15rem; letter-spacing: -.015em; }
.result__title a { color: var(--navy); text-decoration: none; }
.result__title a::after { content: ""; position: absolute; inset: 0; }
.result__title a:focus-visible { outline: 0; }
.result:hover .result__title a { color: var(--red); }
.result__line { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.4; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .78); padding: clamp(44px, 6vw, 72px) 0 24px; font-size: .98rem; }
.site-footer :focus-visible { outline-color: var(--gold-light); }
.site-footer a { color: rgba(255, 255, 255, .9); text-decoration-color: rgba(255, 255, 255, .3); }
.site-footer a:hover { color: var(--white); text-decoration-color: var(--gold-light); }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.site-footer__brand { display: flex; align-items: center; gap: 18px; }
.site-footer__brand img { width: 73px; height: auto; flex: none; }
.site-footer__name { margin: 0; font: 600 1.25rem/1.2 var(--display); letter-spacing: -.02em; color: var(--white); }
.site-footer__motto { margin: .4rem 0 0; font: 600 .76rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.site-footer .button--gold { color: var(--navy-deep); text-decoration: none; }
.site-footer__grid { display: grid; gap: 32px clamp(24px, 4vw, 56px); }
.site-footer__title { color: var(--white); font: 600 .8rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer address { margin-bottom: 1em; }
.site-footer__list { list-style: none; }
.site-footer__list li { padding: .22rem 0; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .86rem; color: rgba(255, 255, 255, .55); }
.site-footer__base p { margin: 0; }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 640px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.figures div:nth-child(odd), .figures div:nth-child(even) { padding: 1rem 1rem .9rem; border-right: 1px solid var(--sky-line); }
	.figures div:first-child { padding-left: 0; }
	.figures div:last-child { border-right: 0; }
}
@media (min-width: 820px) {
	.place-list { grid-template-columns: repeat(2, 1fr); }
	.place { grid-template-columns: minmax(0, 1fr) 340px; }
	.profile-head__grid { grid-template-columns: 240px minmax(0, 1fr); }
	.profile-head__photo img { max-width: 280px; }
	.profile-head__grid--arms { grid-template-areas: "photo text" "photo arms"; }
	.profile-head__grid--arms .profile-head__arms { justify-self: start; align-self: start; }
	.profile-head__grid:has(.person__initials) { grid-template-columns: 180px minmax(0, 1fr); }
	.administrator__grid { grid-template-columns: 300px minmax(0, 1fr); }
	.today__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
	.site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
	.atlas__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.atlas__text .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.atlas__text .figures div:nth-child(odd) { padding-left: 0; }
	.atlas__text .figures div:nth-child(even) { border-right: 0; }
	.administrator__grid { grid-template-columns: 340px minmax(0, 1fr) 220px; }
	.administrator__arms { display: block; }
	.profile-head__grid--arms { grid-template-columns: 280px minmax(0, 1fr) 200px; grid-template-areas: "photo text arms"; }
	.profile-head__grid--arms .profile-head__arms { justify-self: center; align-self: center; }
	.profile-head__arms img { width: 180px; }
	.profile-head__arms figcaption { font-size: .78rem; }
	.horarium__list--split { columns: 2; column-gap: 32px; }
}
@media (max-width: 1099px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px var(--gutter) 24px; background: var(--white);
		border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px rgba(12, 27, 51, .12);
		max-height: calc(100vh - 92px); overflow-y: auto;
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; align-items: stretch; }
	.site-nav__list a { padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; }
	.site-nav__list > li > a::after, .site-nav__list .menu-item-has-children > a::before { display: none; }
	.site-nav__list .sub-menu { position: static; min-width: 0; padding: 0 0 0 1rem; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }
	.site-nav__list .sub-menu a { padding: .65rem 0; border-radius: 0; }
	.site-nav__list .sub-menu a:hover { background: none; }
	.site-nav__lang { display: flex; gap: 8px; margin-top: 16px; list-style: none; }
	.site-nav__lang a { display: block; min-width: 48px; padding: .55rem .9rem; border: 1px solid var(--rule); border-radius: 3px; text-align: center; font-weight: 600; letter-spacing: .06em; color: var(--navy); text-decoration: none; }
	.site-nav__lang a.is-current { background: var(--navy); border-color: var(--navy); color: var(--white); }
	.tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile { min-height: 170px; }
}
/* Phones: on a parish page, the address and map link follow the Mass times instead of sitting at the very end. */
@media (max-width: 819px) {
	.place--vend { gap: 0; }
	.place--vend .place__main { display: contents; }
	.place--vend .place__masses { order: 1; }
	.place--vend .place__aside { order: 2; margin-top: 2rem; }
	.place--vend .place__main > :not(.place__masses) { order: 3; }
	.administrator__photo img { max-width: 240px; }
}
@media (max-width: 640px) {
	.topbar__links a:not(.topbar__give), .topbar__lang { display: none; }
	.topbar__liturgy { display: none; }
	.site-header__inner { min-height: 76px; gap: 12px; }
	.brand { gap: 10px; }
	.brand__arms { height: 50px; }
	.brand__name { font-size: 1.05rem; }
	.brand__sub { font-size: .84rem; }
	.nav-toggle { padding: .5rem .7rem; }
	.nav-toggle__label { display: none; }
	.site-nav { max-height: calc(100vh - 76px); }
	.hero { min-height: 0; }
	.hero__inner { padding-block: 56px 112px; }
	.tiles { margin-top: -64px; }
	.tiles__grid { gap: 10px; }
	.tile { min-height: 140px; }
	.tile__text { padding: 12px 14px; }
	.tile__label { font-size: 1.08rem; }
	.tile__desc { display: none; }
	.horarium__row { grid-template-columns: 3.7rem 1fr; }
	.horarium__flag { grid-column: 2; }
	.photo-credit { left: var(--gutter); right: var(--gutter); bottom: 10px; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, clear of the title */
	.hero .photo-credit { bottom: 74px; }
	.page-head--photo .page-head__inner { padding-top: 96px; }
}

/* ---------------------------------------------------------------- contact icons
   Phone numbers, email addresses, map links and the places a priest serves carry a small icon,
   so they are recognised at a glance and need no underline. Icons: Lucide (ISC licence). */
:root {
	--i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	--i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
a[href^="tel:"] { --icon: var(--i-phone); }
a[href^="mailto:"] { --icon: var(--i-mail); }
.facts__map a, .person__places { --icon: var(--i-pin); }
:is(.person__contact, .facts__value, .members__contact, .site-footer) a:is([href^="tel:"], [href^="mailto:"])::before,
.facts__map a::before, .person__places::before {
	content: ""; display: inline-block; flex: none; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.14em;
	background: currentColor; opacity: .7;
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
:is(.person__contact, .members__contact, .site-footer) a:is([href^="tel:"], [href^="mailto:"]) { text-decoration: none; }
/* The icon stays with its number or address; a long address may still break. */
:is(.person__contact, .facts__value, .members__contact, .site-footer) a:is([href^="tel:"], [href^="mailto:"]) { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
:is(.person__contact, .members__contact, .site-footer) a:is([href^="tel:"], [href^="mailto:"]):hover { text-decoration: underline; }

/* ---------------------------------------------------------------- page details */
/* On a parish page the contact box stays in view beside the Mass times. */
@media (min-width: 820px) {
	.place__aside { position: sticky; top: 116px; }
}
/* Three footer columns until the social channels are filled in. */
@media (min-width: 1000px) {
	.site-footer__grid:not(:has(> :nth-child(4))) { grid-template-columns: 1.2fr 1fr 1fr; }
}
/* An empty list points somewhere useful. */
.notice--empty { max-width: 44rem; }
.notice--empty .block-title { margin-bottom: .4rem; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2rem; }

/* ---------------------------------------------------------------- motion
   Calm and sparing: each page opens with its photo settling and its title rising; content rises
   into view as it is reached; the next Mass pulses; pages cross-fade. html.motion is set in <head>
   only when the visitor has not asked for reduced motion, so nothing is hidden without it. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

@keyframes aasj-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes aasj-settle { from { opacity: 0; transform: scale(1.06); } 30% { opacity: 1; } }
@keyframes aasj-fade { from { opacity: 0; } }
@keyframes aasj-show { to { opacity: 1; transform: none; } }
@keyframes aasj-pin { from { opacity: 0; transform: scale(.2); } }
@keyframes aasj-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes aasj-pulse {
	0% { box-shadow: 0 0 0 0 rgba(156, 43, 34, .5); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(156, 43, 34, 0); }
}

/* Opening: the photo fades in and settles once it has loaded (main.js adds .is-loaded), the words
   follow one after another, then the tiles. */
.motion :is(.hero__img, .page-head__img) { animation: aasj-settle 2.6s var(--ease) both paused; }
.motion :is(.hero__img, .page-head__img).is-loaded,
.motion:not(.motion-ready) :is(.hero__img, .page-head__img) { animation-play-state: running; }
.motion :is(.hero__inner, .page-head__inner, .profile-head__text) > * { animation: aasj-rise .9s var(--ease) both; }
.motion :is(.hero__inner, .page-head__inner, .profile-head__text) > :nth-child(2) { animation-delay: .12s; }
.motion :is(.hero__inner, .page-head__inner, .profile-head__text) > :nth-child(3) { animation-delay: .24s; }
.motion :is(.hero__inner, .page-head__inner, .profile-head__text) > :nth-child(4) { animation-delay: .36s; }
.motion .tile { animation: aasj-rise .8s var(--ease) both; }
.motion .tile:nth-child(1) { animation-delay: .45s; }
.motion .tile:nth-child(2) { animation-delay: .53s; }
.motion .tile:nth-child(3) { animation-delay: .61s; }
.motion .tile:nth-child(4) { animation-delay: .69s; }
.motion .photo-credit { animation: aasj-fade 1.2s .9s both; }

/* Content rises into view as it is reached (main.js adds .is-in just before it comes on screen; keep
   this list the same as there). */
.motion :where(.block-head, .section__title, .horarium__row, .events > .event, .cards > .card, .people > .person,
	.place-list > .place-list__item, .zones__grid > .zone, .timetable__grid > .timetable__place, .accounts > .account, .weblinks > .weblink, .results > .result, .commissions > .commission,
	.administrator__photo, .administrator__body, .administrator__arms, .atlas__text, .place-map) {
	transition: opacity .5s var(--ease), transform .5s var(--ease), translate .25s var(--ease), box-shadow .2s ease, background-color .2s ease;
}
.motion :where(.block-head, .section__title, .horarium__row, .events > .event, .cards > .card, .people > .person,
	.place-list > .place-list__item, .zones__grid > .zone, .timetable__grid > .timetable__place, .accounts > .account, .weblinks > .weblink, .results > .result, .commissions > .commission,
	.administrator__photo, .administrator__body, .administrator__arms, .atlas__text, .place-map):not(.is-in) {
	opacity: 0; transform: translateY(10px);
}
/* Already on screen when first seen: no rise, no fade. */
.motion .is-instant { transition-duration: 0s, 0s, .25s, .2s, .2s !important; }
/* If the script never runs, show everything after a moment. */
.motion:not(.motion-ready) :where(.block-head, .section__title, .horarium__row, .events > .event, .cards > .card, .people > .person,
	.place-list > .place-list__item, .zones__grid > .zone, .timetable__grid > .timetable__place, .accounts > .account, .weblinks > .weblink, .results > .result, .commissions > .commission,
	.administrator__photo, .administrator__body, .administrator__arms, .atlas__text, .place-map) {
	animation: aasj-show 0s 2s forwards;
}

/* The parishes appear on the map from north to south (map.js sets --d on each pin). */
.motion .place-map.is-in .map-pin span { animation: aasj-pin .5s var(--ease) both; animation-delay: var(--d, 0s); }

/* "Mesha sot": a pulse beside the Mass being celebrated now or coming next. */
.horarium__row.is-now { background: var(--sky); border-bottom-color: transparent; }
.horarium__row.is-now .horarium__time { color: var(--red); }
.horarium__row:is(.is-now, .is-next) .horarium__flag::before {
	content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
	background: var(--red); vertical-align: 1px; animation: aasj-pulse 3s ease-out infinite;
}
.horarium__row.is-now .horarium__flag::before { animation-duration: 1.6s; }

/* Small responses to the pointer. */
.tile__label::after { display: inline-block; transition: transform .25s var(--ease); }
.tile:hover .tile__label::after { transform: translateX(4px); }
.card:hover { translate: 0 -3px; }
.card__media img { transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.button:active { translate: 0 1px; }
@media (max-width: 1099px) {
	.motion .site-nav.is-open { animation: aasj-drop .22s var(--ease); }
}
.motion .search-panel:not([hidden]) { animation: aasj-drop .22s var(--ease); }

/* Between pages: a short cross-fade, with the header and top bar holding still. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
.topbar { view-transition-name: aasj-topbar; }
.site-header { view-transition-name: aasj-header; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.tile:hover .tile__img, .card:hover .card__media img, .tile:hover .tile__label::after { transform: none; }
	.card:hover, .button:active { translate: none; }
}

@media print {
	.topbar, .site-header, .site-footer, .jump, .hero__actions, .tiles, .place-map, .atlas { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.page-head--photo { min-height: 0; background: none; }
	.page-head--photo .page-head__img, .page-head--photo::before, .photo-credit { display: none; }
	.page-head--photo .page-head__title { color: var(--navy); }
	.timetable__place, .facts { border: 0; padding: 0; break-inside: avoid; }
	a { text-decoration: none; color: inherit; }
}