/*
Theme Name: The Shiloh House of Prayer
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: A site for The Shiloh House of Prayer, a healing power prayer ministry in Newark, New Jersey that meets on the Gethsemane Prayer Line. Built from scratch for this ministry.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shiloh-house
*/

/* ==========================================================================
   WHY THESE COLOURS (chosen by elimination; read before changing them)

   This ministry has no building. It meets on a telephone conference call, so
   the site's one job is to get a stranger onto that call, or to get their
   prayer request to someone who will pray. Many of the people it serves are
   older and will read it on a phone. So: calm, warm, very high contrast, and
   one colour that means "this is the prayer line".

   Not navy.       Every church web company already uses it; it reads as an
                   institution, and this is a prayer group that began in a
                   basement.
   Not purple.     The lazy shorthand for "spiritual".
   Not gold.       Reads megachurch, and gold text fails contrast on light
                   grounds for exactly the readers this site is for.
   Not terracotta  DESIGN.md bans that family by name.
     on cream.
   Not green.      Floulex's own site is deep green, and a green prayer site
                   reads as a garden centre.
   Not teal.       Calm, but cold and clinical; a healing ministry in teal
                   looks like a clinic's patient portal.

   Wine. Red is the colour of Pentecost, and Apostolic churches take their
   name from Acts 2, so the colour belongs to this tradition rather than being
   applied to it. A deep wine, not a bright red, because bright red reads as
   alarm or a sale, and the site has to feel calm.

   The accent is spent in ONE place: the prayer line. The line card, the join
   button and the phone dock are wine; everything else is warm paper and ink.
   A visitor learns in one screen that wine means "call here".

   Measured, not eyeballed (WCAG ratio):
     ink #221e1b on paper #f7f3ec ........ 14.96
     muted #5b534b on paper .............. 6.82   on wash #efe8de 6.20
     wine #7a1f33 on paper ............... 9.17   on wash 8.34
     paper on wine ....................... 9.17
     on-wine-soft #f1dde1 on wine ........ 7.81
     on-wine-muted #e4c3ca on wine ....... 6.26
   Every text pair clears 4.5 with room to spare, because body text is read
   by older eyes on a phone in daylight.

   TYPE
   Display: Alegreya, a warm calligraphic serif drawn for long reading. It has
   a hand in it, which suits a ministry that writes its name the way Gerald
   does, and it is not Playfair or Cormorant, the two faces every church
   template reaches for.
   Body: Atkinson Hyperlegible Next, drawn by the Braille Institute for readers
   with low vision. Letters that are easy to confuse (1 l I, 0 O, 5 S, 8 B) are
   made deliberately different, which matters on a site whose most important
   content is phone numbers and an access code. Both faces are OFL, self
   hosted, nothing owed per site.
   ========================================================================== */

:root {
	--sh-paper: #f7f3ec;
	--sh-wash: #efe8de;
	--sh-ink: #221e1b;
	--sh-muted: #5b534b;
	--sh-line: #d8cdbd;
	--sh-wine: #7a1f33;
	--sh-wine-deep: #5c1424;
	--sh-on-wine: #f7f3ec;
	--sh-on-wine-soft: #f1dde1;
	--sh-on-wine-muted: #e4c3ca;
	--sh-cut: var(--sh-paper);

	--sh-serif: "Alegreya", "Iowan Old Style", Georgia, serif;
	--sh-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

	--sh-body: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
	--sh-small: 1.0625rem;
	--sh-lede: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5625rem);
	--sh-h1: clamp(2.35rem, 1.45rem + 3.3vw, 4.1rem);
	--sh-h2: clamp(1.8rem, 1.35rem + 1.6vw, 2.6rem);
	--sh-h3: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
	--sh-num: clamp(2.05rem, 1.45rem + 2.4vw, 2.9rem);

	--sh-gutter: clamp(1rem, 4vw, 2.5rem);
	--sh-sec: clamp(3.25rem, 7vw, 6.5rem);
	--sh-head-h: 5.25rem;
}

/* ------------------------------------------------------------------ base */

html { scroll-padding-top: calc(var(--sh-head-h) + 1rem); }

body {
	margin: 0;
	background: var(--sh-paper);
	color: var(--sh-ink);
	font-family: var(--sh-sans);
	font-size: var(--sh-body);
	line-height: 1.6;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, .sh-serif {
	font-family: var(--sh-serif);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: var(--sh-ink);
	text-wrap: balance;
}
h1 { font-size: var(--sh-h1); margin: 0 0 0.45em; }
h2 { font-size: var(--sh-h2); margin: 0 0 0.5em; }
h3 { font-size: var(--sh-h3); margin: 0 0 0.4em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--sh-wine); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--sh-wine-deep); text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--sh-wine); outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; height: auto; display: block; }

.sh-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--sh-ink); color: var(--sh-paper); padding: 0.75rem 1rem;
	font-weight: 700;
}
.sh-skip:focus { top: 1rem; color: var(--sh-paper); }

.sh-sr {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* WordPress's flow layout puts its own gap between blocks. Ours is set per
   component, so the core gap is neutralised inside our own containers only. */
.wp-site-blocks > * { margin-block-start: 0; }
.sh-main .wp-block-post-content > * { margin-block-start: 0; }

.sh-wrap {
	width: 100%;
	max-width: 76rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sh-gutter);
	padding-right: var(--sh-gutter);
}

.sh-measure { max-width: 40rem; }

/* ---------------------------------------------------------------- header */

.sh-head-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.sh-head {
	background: var(--sh-paper);
	border-bottom: 1px solid var(--sh-line);
	transition: box-shadow 0.25s ease;
}
.sh-head.is-stuck { box-shadow: 0 1px 0 var(--sh-line), 0 8px 24px -18px rgba(34, 30, 27, 0.55); }

.sh-head-in {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--sh-head-h);
	position: relative;
}

.sh-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--sh-ink);
	margin-right: auto;
	flex-shrink: 0;
}
.sh-brand:hover { color: var(--sh-ink); }
.sh-brand .sh-mark { width: 2.6rem; height: auto; color: var(--sh-wine); flex: none; }
/* The engraved mark needs room for its line work to read: about 3.5rem in
   the bar, against 2.6rem for the drawn flat mark. */
.sh-brand .sh-mark.is-art { width: 3.6rem; height: auto; }
.sh-foot-brand .sh-mark.is-art { width: 3.4rem; margin-top: 0; }
.sh-brand-name {
	font-family: var(--sh-serif);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.02;
}
.sh-brand-name > span { display: block; }

.sh-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.35rem; }
.sh-nav a {
	color: var(--sh-ink);
	text-decoration: none;
	font-size: 1.0625rem;
	font-weight: 600;
	padding: 0.4rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.sh-nav a:hover { color: var(--sh-wine); border-bottom-color: var(--sh-line); }
.sh-nav a[aria-current="page"] { color: var(--sh-wine); border-bottom-color: var(--sh-wine); }

.sh-panel { display: flex; align-items: center; gap: 1.6rem; }

.sh-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--sh-wine);
	color: var(--sh-on-wine);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 0.7rem 1.1rem;
	border-radius: 0.35rem;
	white-space: nowrap;
}
.sh-cta:hover { background: var(--sh-wine-deep); color: var(--sh-on-wine); }
.sh-cta svg, .sh-tap svg, .sh-dock svg { width: 1.15em; height: 1.15em; flex: none; }

/* The phone toggle. A <details> so it opens with no JavaScript at all; its
   panel is the SIBLING .sh-panel rather than its own content, so the one
   <nav> on the page is never inside a details. That keeps check-widths.py's
   nav-wrap check measuring the real bar instead of silently skipping it. */
.sh-menu { display: none; }
.sh-menu > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 0.6rem 0.95rem;
	border: 1.5px solid var(--sh-ink);
	border-radius: 0.35rem;
	color: var(--sh-ink);
	user-select: none;
}
.sh-menu > summary::-webkit-details-marker { display: none; }
.sh-burger { display: inline-block; width: 1.1rem; height: 0.8rem; position: relative; }
.sh-burger::before, .sh-burger::after, .sh-burger > i {
	content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.sh-burger::before { top: 0; }
.sh-burger > i { top: calc(50% - 1px); }
.sh-burger::after { bottom: 0; }
.sh-menu[open] > summary { background: var(--sh-ink); color: var(--sh-paper); }

/* Measured with the desktop bar forced on: brand, five items and the button
   fit on one row down to about 940px. Below 920 the name is squeezed onto
   three lines. So the menu button takes over under 960. Re-measure if an item
   is added or a label gets longer.
   Re-measured 2026-10-21 after "Videos" was added (six items): the row fits
   down to 1020px and overflows from 1010, so the menu button now takes over
   under 1030. */
@media (max-width: 1029px) {
	:root { --sh-head-h: 4.6rem; }
	.sh-menu { display: block; }
	.sh-panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--sh-paper);
		border-bottom: 1px solid var(--sh-line);
		box-shadow: 0 18px 30px -22px rgba(34, 30, 27, 0.6);
		padding: 0.5rem var(--sh-gutter) 1.5rem;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	.sh-menu[open] ~ .sh-panel { display: flex; }
	.sh-menu:not([open]) ~ .sh-panel > .sh-nav { display: none; }
	.sh-nav ul { flex-direction: column; gap: 0; }
	.sh-nav li { border-bottom: 1px solid var(--sh-line); }
	.sh-nav a { display: block; font-size: 1.25rem; padding: 0.85rem 0; border-bottom: 0; }
	.sh-nav a[aria-current="page"] { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
	.sh-cta { justify-content: center; font-size: 1.1875rem; padding: 0.95rem 1rem; }
	.sh-brand-name { font-size: 1.2rem; }
	.sh-brand .sh-mark { width: 2.3rem; }
	.sh-brand .sh-mark.is-art { width: 3.1rem; }
}
@media (max-width: 359px) {
	.sh-brand-name { font-size: 1.05rem; }
	.sh-brand .sh-mark { width: 1.9rem; }
	.sh-brand .sh-mark.is-art { width: 2.6rem; }
	.sh-menu > summary { padding: 0.55rem 0.7rem; }
}

/* ----------------------------------------------------------------- frame */

.sh-main { display: block; }

/* Inner pages: reading column plus a rail that keeps the prayer line in view.
   The ministry IS the line, so on every page the number and the code never
   scroll away on a desktop. On a phone the dock at the bottom does that job. */
.sh-frame { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: var(--sh-sec); }
.sh-rail { margin-top: 3rem; }
@media (min-width: 1040px) {
	.sh-frame {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22.5rem;
		gap: clamp(3rem, 5vw, 5.5rem);
		align-items: start;
	}
	.sh-rail { margin-top: 0; position: sticky; top: calc(var(--sh-head-h) + 1.75rem); }
}

.sh-body > .sh-sec + .sh-sec { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.sh-sec > * + *, .sh-band .sh-wrap > * + * { margin-top: 1rem; }
.sh-sec > h2 + *, .sh-sec > h3 + *, .sh-band .sh-wrap > h2 + * { margin-top: 0; }
.sh-sec > .sh-steps, .sh-sec > .sh-req, .sh-sec > .sh-psalm,
.sh-band .sh-wrap > .sh-steps, .sh-band .sh-wrap > .sh-req { margin-top: 1.75rem; }
.sh-sec > .sh-quote, .sh-sec > .sh-photo { margin-top: 2rem; }

/* WordPress's flow layout zeroes margin-block-end on every block at (0,1,0),
   which beats a bare h2 rule, so headings are given their space here. */
.sh-main h1 { margin-bottom: 0.45em; }
.sh-main h2 { margin-bottom: 0.55em; }
.sh-main h3 { margin-bottom: 0.35em; }

.sh-kicker {
	font-weight: 700;
	color: var(--sh-wine);
	font-size: var(--sh-small);
	margin-bottom: 0.65rem !important;
}
.sh-lede { font-size: var(--sh-lede); line-height: 1.5; color: var(--sh-ink); }
.sh-page-head h1 { max-width: 17ch; }
.sh-page-head .sh-lede { max-width: 36rem; }

/* Plain lists, set for reading: a short wine rule instead of a bullet. */
.sh-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sh-line); }
.sh-list > li {
	padding: 0.8rem 0 0.8rem 1.6rem;
	border-bottom: 1px solid var(--sh-line);
	position: relative;
}
.sh-list > li::before {
	content: ""; position: absolute; left: 0; top: 1.45rem;
	width: 0.85rem; height: 2px; background: var(--sh-wine);
}
/* Two columns as a grid, not CSS columns: rows line up across the two, so
   every hairline runs the full width and nothing is left hanging. */
@media (min-width: 720px) {
	.sh-list.is-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

/* ------------------------------------------------------ the prayer line card */

.sh-card {
	background: var(--sh-wine);
	color: var(--sh-on-wine);
	padding: clamp(1.5rem, 3vw, 2.1rem);
	border-radius: 0.5rem;
	--sh-cut: var(--sh-wine);
	container-type: inline-size;
}
.sh-card a { color: var(--sh-on-wine); }
.sh-card-name {
	font-family: var(--sh-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.85rem);
	line-height: 1.15;
	margin: 0 0 1.1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid rgba(247, 243, 236, 0.28);
}
.sh-card-label {
	font-size: var(--sh-small);
	color: var(--sh-on-wine-muted);
	margin: 0 0 0.1rem;
	font-weight: 600;
}
.sh-card-num {
	/* Sized off the CARD, not the viewport: the same card sits in the hero, in
	   a 22.5rem rail and on a phone, and a viewport-sized number overflowed
	   the card between 900 and 960px. 11cqi keeps "(978) 990-5444" on one
	   line at any card width. */
	font-size: var(--sh-num);
	font-size: clamp(1.6rem, 11cqi, 2.9rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.9rem;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}
.sh-card-num a { text-decoration: none; white-space: nowrap; }
.sh-card-num a:hover { text-decoration: underline; }
.sh-card-code {
	font-size: calc(var(--sh-num) * 0.86);
	font-size: clamp(1.45rem, 9.5cqi, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 1.1rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.sh-card-times { margin: 0 0 1.3rem; padding: 0.95rem 0 0; border-top: 1px solid rgba(247, 243, 236, 0.28); }
.sh-card-times dt { font-weight: 700; margin: 0; }
.sh-card-times dd { margin: 0; color: var(--sh-on-wine-soft); }

.sh-tap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: var(--sh-paper);
	color: var(--sh-wine) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.25;
	text-align: center;
	padding: 1rem 1rem;
	border-radius: 0.4rem;
	min-height: 3.5rem;
}
.sh-tap:hover { background: #fff; text-decoration: none; }
.sh-card-note { font-size: var(--sh-small); color: var(--sh-on-wine-soft); margin: 0.9rem 0 0; line-height: 1.5; }
.sh-card-note strong { color: var(--sh-on-wine); }

/* Live status: filled in by site.js from the schedule in Eastern time. Hidden
   until the script has something true to say, so no-script visitors simply
   read the times above it. */
.sh-status {
	margin: 1.1rem 0 0;
	padding-top: 0.95rem;
	border-top: 1px solid rgba(247, 243, 236, 0.28);
	font-size: var(--sh-small);
	line-height: 1.45;
	color: var(--sh-on-wine);
}
.sh-status[hidden] { display: none; }
.sh-status .sh-dot {
	display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
	background: var(--sh-on-wine-muted); margin-right: 0.45rem; vertical-align: 0.05em;
}
.sh-status.is-live .sh-dot { background: #fff; box-shadow: 0 0 0 0.22rem rgba(255, 255, 255, 0.25); }

/* ---------------------------------------------------------------- home */

.sh-band { padding: var(--sh-sec) 0; }
.sh-band.is-wash { background: var(--sh-wash); --sh-cut: var(--sh-wash); }

.sh-hero { padding-top: clamp(2.25rem, 5vw, 4.5rem); }
.sh-hero-grid { display: grid; gap: 2.25rem; }
.sh-hero h1 { max-width: 15ch; }
.sh-hero .sh-lede { max-width: 33rem; }
.sh-hero-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.5rem; font-weight: 700; }
@media (min-width: 900px) {
	.sh-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
}

.sh-split { display: grid; gap: 2rem; }
@media (min-width: 860px) {
	.sh-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
	.sh-split.is-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
}

/* Steps: numbered because the order is real. */
.sh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.sh-steps > li {
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1.15rem 0;
	border-top: 1px solid var(--sh-line);
	align-items: start;
}
.sh-steps > li:last-child { border-bottom: 1px solid var(--sh-line); }
.sh-step-n {
	font-family: var(--sh-serif);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--sh-wine);
}
.sh-step-t { font-weight: 700; font-size: var(--sh-lede); line-height: 1.3; margin: 0 0 0.25rem; }
.sh-step-t a { white-space: nowrap; }
.sh-steps p:not(.sh-step-t) { color: var(--sh-muted); margin: 0; }
@media (min-width: 860px) {
	.sh-band .sh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
	.sh-band .sh-steps > li { grid-template-columns: 1fr; border-bottom: 0 !important; padding-top: 1.4rem; border-top: 2px solid var(--sh-wine); }
}

.sh-note { color: var(--sh-muted); }

/* The verse. Set large, in the serif's italic, with the reference under it. */
.sh-psalm { margin: 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--sh-wine); }
.sh-psalm p {
	font-family: var(--sh-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem);
	line-height: 1.38;
	margin: 0 0 0.8rem;
	color: var(--sh-ink);
}
.sh-psalm cite { font-style: normal; color: var(--sh-muted); font-size: var(--sh-small); font-weight: 600; }

/* Prayer request numbers: each one a full width target a thumb cannot miss. */
.sh-req { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.sh-req a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-decoration: none;
	background: var(--sh-paper);
	border: 1.5px solid var(--sh-ink);
	border-radius: 0.45rem;
	padding: 1rem 1.25rem;
	color: var(--sh-ink);
	min-height: 4rem;
}
.sh-req a:hover { border-color: var(--sh-wine); color: var(--sh-wine); }
.sh-req-num { font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-req-call { font-weight: 700; color: var(--sh-wine); font-size: var(--sh-small); white-space: nowrap; }
@media (min-width: 1040px) {
	.sh-band .sh-req { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- pictures */

.sh-photo { margin: 0; }
.sh-photo img { width: 100%; height: auto; border-radius: 0.4rem; background: var(--sh-wash); }
.sh-photo figcaption, .sh-photo .wp-element-caption {
	margin-top: 0.65rem;
	font-size: var(--sh-small);
	color: var(--sh-muted);
	line-height: 1.45;
	text-align: left;
}
.sh-photo.is-portrait { max-width: 22rem; }
.wp-block-video video, .wp-block-embed iframe { width: 100%; border-radius: 0.4rem; }
.wp-block-embed { margin: 0; }
.wp-block-embed__wrapper { position: relative; }

.sh-person { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 680px) {
	.sh-person { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 2.25rem; }
}
.sh-role { color: var(--sh-wine); font-weight: 700; margin: -0.3rem 0 0.8rem; }

/* A quotation in the founder's own words. */
.sh-quote { margin: 0; padding: 1.4rem 0 0; border-top: 2px solid var(--sh-wine); }
.sh-quote p {
	font-family: var(--sh-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
	line-height: 1.4;
	margin: 0 0 0.7rem;
}
.sh-quote cite { font-style: normal; color: var(--sh-muted); font-size: var(--sh-small); font-weight: 600; }

/* ------------------------------------------------------------ schedule */

.sh-times { margin: 0; border-top: 1px solid var(--sh-line); }
.sh-times > div {
	display: grid;
	gap: 0.15rem 1.5rem;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--sh-line);
}
@media (min-width: 600px) {
	.sh-times > div { grid-template-columns: 12rem minmax(0, 1fr); }
}
.sh-times dt { font-weight: 700; }
.sh-times dd { margin: 0; }
.sh-times dd strong { font-size: var(--sh-lede); }
.sh-times dd span { display: block; color: var(--sh-muted); }

/* ------------------------------------------------------------------ give */

.sh-zelle {
	border: 1.5px solid var(--sh-ink);
	border-radius: 0.5rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	background: var(--sh-paper);
	max-width: 34rem;
}
.sh-zelle-label { font-weight: 700; color: var(--sh-muted); margin: 0 0 0.25rem; }
.sh-zelle-num { font-size: var(--sh-num); font-weight: 700; line-height: 1.1; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.sh-copy {
	font: inherit;
	font-weight: 700;
	font-size: 1.0625rem;
	background: var(--sh-wine);
	color: var(--sh-on-wine);
	border: 0;
	border-radius: 0.35rem;
	padding: 0.75rem 1.1rem;
	cursor: pointer;
	min-height: 3rem;
}
.sh-copy:hover { background: var(--sh-wine-deep); }
.sh-copy[hidden] { display: none; }
.sh-copied { margin: 0.7rem 0 0; color: var(--sh-wine); font-weight: 700; }
.sh-copied[hidden] { display: none; }
.sh-give-ways { display: grid; gap: 1.25rem; max-width: 70rem; }
@media (min-width: 760px) { .sh-give-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-give-ways .sh-zelle { max-width: none; }
/* A phone number must never break across lines: two cards side by side are
   narrower than the one card was, so the number steps down to fit. */
.sh-give-ways .sh-zelle-num { white-space: nowrap; font-size: min(var(--sh-num), 1.9rem); }
.sh-give-how { margin: 1.4rem 0 0.4rem; }

/* ---------------------------------------------------------------- videos */

.sh-vids + .sh-vids { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sh-vids-name { margin: 0 0 1.25rem; }
.sh-vid-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.sh-vid { display: flex; flex-direction: column; gap: 0.35rem; }
.sh-vid-play, .sh-vid-playing { display: flex; flex-direction: column; gap: 0.6rem; color: var(--sh-ink); text-decoration: none; }
.sh-vid-play:hover .sh-vid-title { text-decoration: underline; }
.sh-vid-play:focus-visible { outline: 3px solid var(--sh-wine); outline-offset: 4px; border-radius: 0.5rem; }
.sh-vid-thumb {
	position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 0.5rem; background: var(--sh-wash);
}
.sh-vid-thumb img, .sh-vid-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.sh-vid-btn {
	position: absolute; left: 50%; top: 50%; width: 3.75rem; height: 3.75rem; margin: -1.875rem 0 0 -1.875rem;
	border-radius: 50%; background: var(--sh-wine); box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}
.sh-vid-btn::after {
	content: ""; position: absolute; left: 1.45rem; top: 1.15rem;
	border-style: solid; border-width: 0.725rem 0 0.725rem 1.2rem;
	border-color: transparent transparent transparent var(--sh-on-wine);
}
.sh-vid-title { font-weight: 700; line-height: 1.3; }
.sh-vid-date { color: var(--sh-muted); font-size: var(--sh-small); }
.sh-vids-all { margin: 1.25rem 0 0; font-weight: 700; }
.sh-give-how + .sh-steps-plain { margin-top: 0; }

.sh-steps-plain { margin: 0; padding-left: 1.6rem; }
.sh-steps-plain li { padding-left: 0.3rem; margin-bottom: 0.55rem; }
.sh-steps-plain li::marker { font-weight: 700; color: var(--sh-wine); }

/* ---------------------------------------------------------------- footer */

.sh-foot { background: var(--sh-wash); border-top: 1px solid var(--sh-line); --sh-cut: var(--sh-wash); }
.sh-foot-in {
	display: grid;
	gap: 2.25rem;
	padding-top: clamp(2.75rem, 5vw, 4rem);
	padding-bottom: 2rem;
}
@media (min-width: 860px) {
	.sh-foot-in { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}
.sh-foot-brand { display: flex; gap: 0.8rem; align-items: flex-start; }
.sh-foot-brand .sh-mark { width: 2.4rem; height: auto; color: var(--sh-wine); flex: none; margin-top: 0.2rem; }
.sh-foot-name { font-family: var(--sh-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.15; margin: 0 0 0.35rem; }
.sh-foot p { font-size: var(--sh-small); }
.sh-foot-sub { color: var(--sh-muted); }
.sh-foot-h { font-weight: 700; margin: 0 0 0.5rem; font-size: var(--sh-small); }
.sh-foot ul { list-style: none; margin: 0; padding: 0; }
.sh-foot li { margin: 0 0 0.35rem; }
.sh-foot li a, .sh-foot-line a { color: var(--sh-ink); font-size: var(--sh-small); }
.sh-foot li a:hover, .sh-foot-line a:hover { color: var(--sh-wine); }
.sh-foot-line p { margin: 0 0 0.3rem; }
.sh-foot-legal { padding-top: 1.25rem; padding-bottom: 1.75rem; border-top: 1px solid var(--sh-line); }
.sh-foot-legal p { color: var(--sh-muted); margin: 0; }

/* -------------------------------------------------------- the phone dock */

/* On a phone the prayer line is always one tap away, on every page. */
.sh-dock { display: none; }
@media (max-width: 959px) {
	body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
	.sh-dock {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		background: var(--sh-wine);
		color: var(--sh-on-wine);
		text-decoration: none;
		font-weight: 700;
		font-size: 1.1875rem;
		line-height: 1.2;
		padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
		min-height: 4.25rem;
		box-shadow: 0 -10px 24px -18px rgba(34, 30, 27, 0.7);
	}
	.sh-dock:hover { color: var(--sh-on-wine); background: var(--sh-wine-deep); }
	.sh-dock { transition: transform 0.25s ease; }
	.sh-dock.is-away { transform: translateY(110%); }
	.sh-dock small { display: block; font-weight: 600; font-size: 0.95rem; color: var(--sh-on-wine-soft); }
}

/* ---------------------------------------------------------------- motion */

/* One reveal, once per element, and only when script is running: the class
   .js is set in the head before paint, so with no script nothing is hidden. */
.js .sh-rev { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .sh-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .sh-rev { opacity: 1; transform: none; transition: none; }
	.sh-head { transition: none; }
}

/* ------------------------------------------------------------------- 404 */

.sh-404 { padding: var(--sh-sec) 0; }