/*
Theme Name: Gracious Hope
Theme URI: https://gracioushopefellowship.com
Author: Floulex Web
Description: Built from scratch for Gracious Hope Bible Fellowship, the online ministry of Pastor Dr. Alexander L. Redd. Block theme, no page builder, no plugins.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: gracious-hope
*/

/*
 * BRAND, carried over rather than replaced.
 *
 * Every colour comes from his logo or his old site:
 *   blue  #0d3aa9  the blue his old site used for headings and buttons
 *   royal #0060b4  the blue figure and wordmark in the logo
 *   red   #b4303c  "Exalting Christ to the nations" in the logo. Spent in one
 *                  place only: Give.
 *   gold  #f8b038  the sunrise rays behind the cross. Used as light on the
 *                  night-blue bands, never as text on white (1.9:1).
 *   navy  #0b1e46  the dark blue background image behind his old pages.
 *   mist  #eef2f8  his old pale grey section ground, cooled toward the blue.
 *
 * Type: Marcellus, a flared Roman capital face, is the nearest open licence
 * match to the wordmark in his logo. Lato is what his old site was set in,
 * kept for the reading text so the voice stays familiar.
 *
 * Contrast, measured: ink on paper 15.97, blue on mist 8.51, royal on paper
 * 6.30, red under white 6.12, muted on mist 6.68, gold on navy 8.74, the pale
 * text on navy 9.38 or higher. Nothing on the site is under 4.5:1.
 */

:root {
	--gh-ink: #14213d;
	--gh-navy: #0b1e46;
	--gh-navy-2: #102a5c;
	--gh-blue: #0d3aa9;
	--gh-royal: #0060b4;
	--gh-red: #b4303c;
	--gh-red-deep: #962632;
	--gh-gold: #f8b038;
	--gh-mist: #eef2f8;
	--gh-paper: #ffffff;
	--gh-muted: #4b5568;
	--gh-line: #c9d3e3;
	--gh-pale: #d5def0;
	--gh-gut: clamp(1rem, 4vw, 2.5rem);
	--gh-max: 76rem;
	--gh-measure: 44rem;
	--gh-left: max(var(--gh-gut), calc((100% - var(--gh-max)) / 2));
	--gh-sec: clamp(3.5rem, 8vw, 6.5rem);
	--gh-display: Marcellus, 'Palatino Linotype', Palatino, Georgia, serif;
	--gh-body: Lato, 'Helvetica Neue', Arial, sans-serif;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--gh-paper); color: var(--gh-ink); font-family: var(--gh-body); }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--gh-blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
abbr[title] { text-decoration: none; cursor: help; }
cite { font-style: normal; }

:focus-visible { outline: 3px solid var(--gh-blue); outline-offset: 3px; }
.gh-hero :focus-visible, .gh-foot :focus-visible, .gh-band-night :focus-visible { outline-color: var(--gh-gold); }
main:focus { outline: none; }

.gh-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gh-skip {
	position: absolute; left: 1rem; top: -6rem; z-index: 1000;
	background: var(--gh-navy); color: #fff; padding: .85rem 1.25rem;
	font-weight: 700; font-size: 1rem; text-decoration: none;
}
.gh-skip:focus { top: 1rem; outline-color: var(--gh-gold); }

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

.gh-eyebrow {
	margin: 0 0 .9rem; font-family: var(--gh-body); font-weight: 700; font-size: 1rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--gh-royal);
}
.gh-eyebrow a { color: inherit; text-decoration: none; }
.gh-eyebrow a:hover { text-decoration: underline; }
.gh-eyebrow-gold { color: var(--gh-gold); }
/* On a page under a hub, the hub's name is the way back: it has to look like a link. */
.gh-back a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.gh-back a:hover { text-decoration-thickness: 2px; }
.gh-back-ico { flex: none; }

/* ─── Buttons ──────────────────────────────────────────────────────────── */

.gh-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0 0; }
.gh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 3rem; padding: .8rem 1.5rem; border: 2px solid transparent;
	font-family: var(--gh-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
	text-decoration: none; letter-spacing: .01em; transition: background-color .18s, color .18s, border-color .18s;
}
.gh-btn-solid { background: var(--gh-blue); color: #fff; }
.gh-btn-solid:hover { background: var(--gh-navy); color: #fff; }
.gh-btn-line { background: transparent; color: var(--gh-blue); border-color: var(--gh-blue); }
.gh-btn-line:hover { background: var(--gh-blue); color: #fff; }
.gh-btn-gold { background: var(--gh-gold); color: var(--gh-navy); }
.gh-btn-gold:hover { background: #fff; color: var(--gh-navy); }
.gh-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.gh-btn-ghost:hover { background: #fff; color: var(--gh-navy); }
.gh-btn-give { background: var(--gh-red); color: #fff; }
.gh-btn-give:hover { background: var(--gh-red-deep); color: #fff; }

/* ─── Header ───────────────────────────────────────────────────────────── */

.gh-head { position: sticky; top: 0; z-index: 100; background: var(--gh-paper); border-bottom: 1px solid var(--gh-line); }
.admin-bar .gh-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .gh-head { top: 0; } }
.gh-bar-in { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; position: relative; }

.gh-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--gh-royal); margin-right: auto; flex: 0 1 auto; min-width: 0; }
.gh-brand-mark { width: 4.25rem; height: auto; flex: none; }
.gh-brand-name { display: flex; flex-direction: column; font-family: var(--gh-display); line-height: 1.05; text-transform: uppercase; letter-spacing: .04em; }
.gh-brand-1 { font-size: 1.4rem; }
.gh-brand-2 { font-size: 1rem; letter-spacing: .12em; color: var(--gh-ink); }

.gh-panel { display: contents; }
.gh-nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.gh-nav-item { position: relative; }
.gh-nav a, .gh-drop-sum {
	display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .6rem;
	font-weight: 700; font-size: 1.0625rem; color: var(--gh-ink); text-decoration: none; white-space: nowrap;
}
.gh-nav-list > li > a[aria-current], .gh-drop-sum.is-current { box-shadow: inset 0 -3px 0 var(--gh-royal); }
.gh-nav a:hover, .gh-drop-sum:hover { color: var(--gh-blue); text-decoration: underline; text-underline-offset: .3em; }

.gh-drop > summary { list-style: none; cursor: pointer; }
.gh-drop > summary::-webkit-details-marker { display: none; }
.gh-caret { transition: transform .18s; }
.gh-drop[open] .gh-caret { transform: rotate(180deg); }
.gh-drop-panel {
	position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20; min-width: 15.5rem;
	list-style: none; margin: 0; padding: .5rem 0; background: var(--gh-paper);
	border: 1px solid var(--gh-line); border-top: 3px solid var(--gh-royal);
	box-shadow: 0 18px 40px -24px rgba(11, 30, 70, .45);
}
/* A strip of the panel bridging the gap under the label, so a pointer moving
   down from "About" to "Our story" never leaves the group and shuts it. */
.gh-drop-panel::before { content: ""; position: absolute; left: -.5rem; right: -.5rem; top: -.85rem; height: .85rem; }
.gh-drop-panel a { display: block; padding: .65rem 1.15rem; font-weight: 400; white-space: normal; }
.gh-drop-panel a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--gh-royal); }

.gh-cta {
	display: inline-flex; align-items: center; min-height: 2.9rem; padding: .7rem 1.4rem;
	background: var(--gh-red); color: #fff; font-weight: 700; font-size: 1.0625rem; text-decoration: none;
}
.gh-cta:hover, .gh-cta[aria-current] { background: var(--gh-red-deep); color: #fff; }

.gh-menu { display: none; }
.gh-menu > summary { list-style: none; cursor: pointer; }
.gh-menu > summary::-webkit-details-marker { display: none; }
.gh-menu-btn {
	display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .6rem 1rem;
	border: 2px solid var(--gh-ink); font-weight: 700; font-size: 1.0625rem; color: var(--gh-ink);
}
.gh-burger { position: relative; width: 1.15rem; height: .85rem; display: inline-block; }
.gh-burger::before, .gh-burger::after, .gh-burger span {
	content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .2s, opacity .2s;
}
.gh-burger::before { top: 0; }
.gh-burger span { top: calc(50% - 1px); }
.gh-burger::after { bottom: 0; }
.gh-menu[open] .gh-burger::before { transform: translateY(.36rem) rotate(45deg); }
.gh-menu[open] .gh-burger span { opacity: 0; }
.gh-menu[open] .gh-burger::after { transform: translateY(-.36rem) rotate(-45deg); }

/* The phone menu. One nav either way: on a phone the same list becomes the
   panel, each dropdown group shown open as a heading with its links under it.
   Breakpoint re-measured 2026-10-27 after the three small dropdowns came back
   (bar forced on at every 2px): the bar itself fits on one row down to 620,
   but with the carets the church name beside the mark wraps to three lines
   below 992. The hand-over is below 1010, which leaves room for a 17px
   classic scrollbar, and an iPad in landscape (1024) keeps the full bar.
   It was 979 for the flat bar and 1079 for the first, bigger dropdowns. */
@media (max-width: 1009px) {
	.gh-bar-in { min-height: 4.5rem; gap: 1rem; }
	.gh-menu { display: block; }
	.gh-panel { display: none; }
	.gh-nav { display: none; }
	.gh-menu[open] + .gh-panel {
		display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
		max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto;
		background: var(--gh-paper); border-bottom: 1px solid var(--gh-line);
		padding: .5rem var(--gh-gut) 1.75rem; box-shadow: 0 24px 40px -30px rgba(11, 30, 70, .5);
	}
	.gh-menu[open] + .gh-panel .gh-nav { display: block; }
	.gh-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.gh-nav-item { border-bottom: 1px solid var(--gh-line); }
	.gh-nav a, .gh-drop-sum { display: flex; padding: .85rem 0; font-size: 1.125rem; white-space: normal; }
	.gh-nav-list > li > a[aria-current], .gh-drop-sum.is-current { box-shadow: none; }
	.gh-nav-list > li > a[aria-current] { color: var(--gh-blue); text-decoration: underline; text-underline-offset: .3em; }
	.gh-drop-sum { color: var(--gh-royal); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; padding-bottom: .25rem; }
	.gh-drop-panel { position: static; border: 0; box-shadow: none; padding: 0 0 .6rem; min-width: 0; }
	.gh-drop-panel::before { display: none; }
	.gh-drop-panel a { padding: .6rem 0 .6rem 1rem; font-size: 1.125rem; }
	.gh-drop-panel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gh-royal); }
	.gh-caret { display: none; }
	.gh-cta { margin-top: 1.25rem; width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
	.gh-brand-mark { width: 3.25rem; }
	.gh-brand-1 { font-size: 1.15rem; }
	.gh-brand-2 { font-size: 1rem; letter-spacing: .06em; }
	.gh-menu-btn { padding: .55rem .8rem; }
}
@media (max-width: 374px) {
	.gh-brand-mark { display: none; }
}

/* ─── The page body ────────────────────────────────────────────────────── */

/* Every page shares one left edge: the edge of the header. Reading text keeps
   a 44rem measure but starts where the logo starts, so moving between pages
   never makes the text jump sideways. */
.gh-content { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--gh-sec); }
.gh-content-home { padding: 0; }
.gh-content > * {
	margin-left: var(--gh-left); margin-right: var(--gh-gut);
	max-width: var(--gh-measure); margin-block: 0;
}
.gh-content > * + * { margin-top: 1.25rem; }
.gh-content > .alignwide { max-width: var(--gh-max); margin-right: var(--gh-left); }
.gh-content > .alignfull { margin-left: 0; margin-right: 0; max-width: none; }
.gh-content > .alignfull + *, .gh-content > * + .alignfull { margin-top: 0; }
.gh-content > .alignfull:last-child { margin-bottom: calc(var(--gh-sec) * -1); }
.gh-content-home > .alignfull:last-child { margin-bottom: 0; }

.gh-content p, .gh-content li, .gh-prose p, .gh-prose li { font-size: 1.125rem; line-height: 1.7; }
.gh-content h2, .gh-prose h2 { margin-top: 2.75rem; margin-bottom: .25rem; }
.gh-content h3, .gh-prose h3 { margin-top: 2rem; margin-bottom: .25rem; }
.gh-content > h2:first-child, .gh-content > h3:first-child { margin-top: 0; }
/* Plain lists only. Every component list (cards, schedule, books) carries a
   gh- class and lays itself out. */
.gh-content ul:not([class*="gh-"]), .gh-content ol:not([class*="gh-"]) { padding-left: 1.25rem; }
.gh-content ul:not([class*="gh-"]) > li + li, .gh-content ol:not([class*="gh-"]) > li + li { margin-top: .35rem; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.gh-lede, .gh-content .gh-lede { font-size: 1.3125rem; line-height: 1.55; color: var(--gh-ink); }

.gh-content blockquote, .gh-prose blockquote, .gh-verse {
	margin-left: var(--gh-left); padding: .25rem 0 .25rem 1.4rem; border-left: 3px solid var(--gh-gold);
}
.gh-verse p { font-family: var(--gh-display); font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height: 1.35; margin: 0; }
.gh-verse cite, .gh-verse .gh-verse-ref { display: block; margin-top: .6rem; font-family: var(--gh-body); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-royal); }

.gh-more { margin-top: 1rem; }
.gh-more a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; }
.gh-more a:hover { text-decoration: underline; }
.gh-more .gh-ico, .gh-onair-link .gh-ico { width: 1.15rem; height: 1.15rem; transition: transform .18s; }
.gh-more a:hover .gh-ico { transform: translateX(3px); }

.gh-note { padding: 1rem 1.25rem; background: var(--gh-mist); border-left: 3px solid var(--gh-royal); }

/* Images in page bodies: square corners and a hairline, like prints. */
.gh-content .wp-block-image img, .gh-prose .wp-block-image img { display: block; border: 1px solid var(--gh-line); }
.gh-content .gh-portrait img { border: 0; }
.gh-content .wp-block-image figcaption, .gh-plate figcaption, .gh-prose figcaption { margin-top: .6rem; font-size: 1rem; color: var(--gh-muted); }
.gh-plate { margin: 0; }
.gh-plate img { display: block; width: 100%; }

/* ─── Inner page head ──────────────────────────────────────────────────── */

.gh-phead { position: relative; overflow: hidden; background: var(--gh-mist); border-bottom: 1px solid var(--gh-line); padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.25rem, 5vw, 3.5rem); }
.gh-phead > .gh-wrap { position: relative; }
.gh-phead-h { margin: 0; font-family: var(--gh-display); font-weight: 400; font-size: var(--wp--preset--font-size--display-1, 3.5rem); line-height: 1.08; color: var(--gh-ink); max-width: 22ch; }
.gh-phead-lede { margin: 1.1rem 0 0; max-width: 40rem; font-size: 1.3125rem; line-height: 1.55; color: var(--gh-ink); }
.gh-phead-post .gh-phead-h { max-width: 30ch; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); }
.gh-byline { margin-top: 1.1rem; gap: .35rem 1.25rem; color: var(--gh-muted); }
.gh-byline p, .gh-byline .wp-block-post-date { margin: 0; font-size: 1.0625rem; color: var(--gh-muted); }

/* ─── Home: the opening ────────────────────────────────────────────────── */

.gh-hero {
	position: relative; overflow: hidden; isolation: isolate;
	background-color: var(--gh-navy);
	background-image: radial-gradient(120% 90% at 50% 115%, #173a7d 0%, var(--gh-navy) 62%);
	color: #fff; padding-block: clamp(4rem, 9vw, 7.25rem) clamp(4rem, 8vw, 6.5rem);
}
.gh-rays { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; z-index: -1; opacity: .3; }
.gh-rays-fan { transform-origin: 600px 640px; transform-box: view-box; }
/* The light moves all the time, slowly enough that nobody sees it loop
   (Howard, 2026-10-27: "slow and continuous and not able to see loop").
   The svg fades in once; the fan sways and the glow breathes on two
   unrelated periods, both alternate, so neither ever jumps back to its start
   and the pair takes minutes to line up the same way again. The rays run 900
   units from the base point and the furthest corner is 877, and the fan never
   scales below 1.03, so a few degrees of turn never shows an end or a gap. */
@media (prefers-reduced-motion: no-preference) {
	.gh-rays { animation: gh-rays-in 2.4s ease-out both; }
	.gh-rays-fan {
		animation: gh-sway 19s ease-in-out infinite alternate, gh-glow 13s ease-in-out infinite alternate;
		will-change: transform;
	}
}
@keyframes gh-rays-in {
	from { opacity: 0; }
	to   { opacity: .3; }
}
@keyframes gh-sway {
	from { transform: rotate(-2.5deg) scale(1.03); }
	to   { transform: rotate(2.5deg) scale(1.07); }
}
@keyframes gh-glow {
	from { opacity: 1; }
	to   { opacity: .72; }
}
.gh-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.gh-hero-h { margin: 0; font-family: var(--gh-display); font-weight: 400; font-size: var(--wp--preset--font-size--display-1, 4rem); line-height: 1.04; color: #fff; }
.gh-hero-lede { margin: 1.4rem 0 0; max-width: 34rem; font-size: 1.3125rem; line-height: 1.55; color: var(--gh-pale); }
.gh-hero-tag { margin: 1.1rem 0 0; font-family: var(--gh-display); font-size: 1.2rem; color: var(--gh-gold); }
.gh-hero-tag cite { font-family: var(--gh-body); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; margin-left: .35rem; }

.gh-onair { background: var(--gh-navy-2); border-top: 3px solid var(--gh-gold); padding: clamp(1.4rem, 3vw, 2rem); }
.gh-onair-h { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-family: var(--gh-body); font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gh-gold); }
.gh-onair-h .gh-ico { width: 1.35rem; height: 1.35rem; }
.gh-sched { list-style: none; margin: 0; padding: 0; }
.gh-sched li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.16); }
.gh-sched-day { font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-gold); }
.gh-sched-what { font-size: 1.125rem; color: #fff; }
.gh-sched-time { font-weight: 700; font-size: 1.125rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-onair-note { margin: 1rem 0 0; font-size: 1rem; color: var(--gh-pale); }
.gh-onair-link { margin: .9rem 0 0; }
.gh-onair-link a { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 700; }

/* The same schedule on a light ground. */
.gh-sched-box { border-top: 3px solid var(--gh-gold); background: var(--gh-mist); padding: .5rem 1.5rem 1.25rem; }
.gh-sched-box .gh-sched li { border-top-color: var(--gh-line); }
.gh-sched-box .gh-sched li:first-child { border-top: 0; }
.gh-sched-box .gh-sched-day { color: var(--gh-royal); }
.gh-sched-box .gh-sched-what, .gh-sched-box .gh-sched-time { color: var(--gh-ink); }
.gh-sched-note { margin: .75rem 0 0; font-size: 1rem; color: var(--gh-muted); }

/* ─── Home: sections ───────────────────────────────────────────────────── */

.gh-sec { padding-block: var(--gh-sec); }
.gh-sec-mist { background: var(--gh-mist); }
.gh-sec-line { border-top: 1px solid var(--gh-line); }
.gh-sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.gh-sec-head > div { max-width: 40rem; }
.gh-sec-h { margin: 0; font-family: var(--gh-display); font-weight: 400; font-size: var(--wp--preset--font-size--display-2, 2.4rem); line-height: 1.12; color: var(--gh-ink); }
.gh-sec-sub { margin: .75rem 0 0; font-size: 1.125rem; color: var(--gh-muted); }
.gh-sec-all { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.gh-sec-all:hover { text-decoration: underline; }
.gh-sec-all .gh-ico { width: 1.15rem; height: 1.15rem; }

/* The teaching series now running. */
.gh-feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.gh-feature-fig { margin: 0; }
.gh-feature-fig img { display: block; width: 100%; border: 1px solid var(--gh-line); }
.gh-feature-h { margin: 0; font-family: var(--gh-display); font-weight: 400; font-size: var(--wp--preset--font-size--display-2, 2.4rem); line-height: 1.12; }
.gh-feature-sub { margin: .6rem 0 0; font-family: var(--gh-display); font-size: 1.45rem; color: var(--gh-royal); }
.gh-feature p { font-size: 1.125rem; }

/* Who we are. */
.gh-who { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.gh-portrait { margin: 0; max-width: 22rem; }
.gh-portrait img { display: block; width: 100%; border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.gh-portrait figcaption { margin-top: .85rem; font-size: 1rem; color: var(--gh-muted); text-align: center; }
.gh-who-text .gh-verse { margin-left: 0; }
.gh-who-text p { font-size: 1.125rem; }

/* The give band. */
.gh-give { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.gh-give p { font-size: 1.125rem; }
.gh-give-side { border-left: 3px solid var(--gh-red); padding-left: 1.5rem; }
.gh-give-side p { margin: 0 0 1rem; color: var(--gh-ink); }

/* ─── Video cards ──────────────────────────────────────────────────────── */

.gh-vids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }
.gh-vid-link { display: block; color: var(--gh-ink); text-decoration: none; }
.gh-vid-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gh-navy); }
.gh-vid-frame img, .gh-vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.gh-vid-frame img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.gh-vid-link:hover .gh-vid-frame img { transform: scale(1.04); }
.gh-vid-play {
	position: absolute; left: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
	background: var(--gh-gold); color: var(--gh-navy); border-radius: 50%; transition: transform .2s;
}
.gh-vid-play .gh-ico { width: 1.6rem; height: 1.6rem; margin-left: .2rem; }
.gh-vid-link:hover .gh-vid-play { transform: scale(1.08); }
.gh-vid-title { margin: 1rem 0 .3rem; font-family: var(--gh-body); font-weight: 700; font-size: 1.1875rem; line-height: 1.35; }
.gh-vid-link:hover .gh-vid-title { text-decoration: underline; text-underline-offset: .2em; }
.gh-vid-date { display: block; font-size: 1rem; color: var(--gh-muted); }
.gh-vid.is-playing .gh-vid-play { display: none; }

/* A series is one row that scrolls inside its own box. */
.gh-series-h { margin: 0 0 1.5rem; }
.gh-serie { padding-top: 2.25rem; margin-top: 2.25rem; border-top: 1px solid var(--gh-line); }
.gh-serie-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 1.25rem; }
.gh-serie-title { margin: 0; font-family: var(--gh-display); font-weight: 400; font-size: 1.75rem; }
.gh-serie-all { font-weight: 700; }
.gh-vids-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 1rem; }
.gh-vids-row > li { scroll-snap-align: start; }
.gh-vids-row .gh-vid-title { font-size: 1.0625rem; }

/* ─── Blog cards ───────────────────────────────────────────────────────── */

.gh-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }
.gh-card-link { display: block; color: var(--gh-ink); text-decoration: none; }
.gh-card-frame { display: block; aspect-ratio: 4 / 3; background: var(--gh-paper); border: 1px solid var(--gh-line); overflow: hidden; }
.gh-card-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gh-card-title { margin: 1rem 0 .3rem; font-family: var(--gh-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.gh-card-link:hover .gh-card-title { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.gh-card-date { font-size: 1rem; color: var(--gh-muted); }

/* ─── Books ────────────────────────────────────────────────────────────── */

.gh-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.gh-shelf-link { display: block; text-decoration: none; color: var(--gh-ink); }
.gh-shelf-frame { display: block; aspect-ratio: 1; background: var(--gh-paper); border: 1px solid var(--gh-line); padding: .75rem; }
.gh-shelf-frame img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.gh-shelf-link:hover img { transform: translateY(-4px); }
.gh-shelf-title { display: block; margin-top: .85rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.gh-shelf-link:hover .gh-shelf-title { text-decoration: underline; }

.gh-books { list-style: none; margin: 0; padding: 0; }
.gh-book { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; padding-block: clamp(2.25rem, 5vw, 3.5rem); border-top: 1px solid var(--gh-line); scroll-margin-top: 6rem; }
.gh-book:first-child { border-top: 0; padding-top: 0; }
.gh-book-fig { margin: 0; background: var(--gh-mist); border: 1px solid var(--gh-line); padding: clamp(.75rem, 2vw, 1.5rem); }
.gh-book-fig img { display: block; width: 100%; max-height: 32rem; object-fit: contain; }
.gh-book-title { margin: 0 0 1rem; font-family: var(--gh-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.15; }
.gh-book-body p { font-size: 1.125rem; line-height: 1.7; margin: 0 0 1rem; }
.gh-book-buy { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem !important; }

/* ─── Watch, contact, give ─────────────────────────────────────────────── */

.gh-watch { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gh-watch li { margin: 0 !important; }
.gh-watch-link {
	display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .2rem 1rem; height: 100%;
	padding: 1.35rem 1.4rem; border: 1px solid var(--gh-line); border-top: 3px solid var(--gh-royal);
	background: var(--gh-paper); color: var(--gh-ink); text-decoration: none; transition: border-color .18s, background-color .18s;
}
.gh-watch-link:hover { background: var(--gh-mist); border-top-color: var(--gh-gold); }
.gh-watch-link .gh-ico { grid-row: span 2; width: 2.25rem; height: 2.25rem; color: var(--gh-royal); }
.gh-watch-name { font-weight: 700; font-size: 1.1875rem; }
.gh-watch-link:hover .gh-watch-name { text-decoration: underline; }
.gh-watch-note { font-size: 1rem; color: var(--gh-muted); line-height: 1.5; }

.gh-socials { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0 !important; }
.gh-socials li { margin: 0 !important; }
.gh-socials a { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid var(--gh-line); color: var(--gh-royal); transition: background-color .18s, color .18s; }
.gh-socials a:hover { background: var(--gh-royal); color: #fff; }
.gh-socials .gh-ico { width: 1.3rem; height: 1.3rem; }

.gh-contact-list { list-style: none; margin: 0; padding: 0 !important; }
.gh-contact-list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .85rem; align-items: start; margin: 0 0 1rem !important; }
.gh-contact-list .gh-ico { width: 1.35rem; height: 1.35rem; margin-top: .2rem; color: var(--gh-royal); }
.gh-contact-k { display: block; font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-muted); }
.gh-contact-page a { font-size: 1.1875rem; overflow-wrap: anywhere; }

.gh-give-cta { margin: 1.75rem 0 0; }
.gh-give-wait { padding: 1.5rem; border: 2px dashed var(--gh-line); background: var(--gh-mist); }
.gh-btn.is-placeholder { cursor: not-allowed; background: var(--gh-muted); color: #fff; }
.gh-give-note { margin: 1rem 0 0 !important; font-size: 1rem !important; color: var(--gh-ink); }

/* ─── Two columns inside page bodies ───────────────────────────────────── */

.gh-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gh-split > * { min-width: 0; }
.gh-split figure { margin: 0; }
.gh-split figure img { display: block; width: 100%; }
.gh-split > div > *:first-child, .gh-split > .wp-block-group > *:first-child { margin-top: 0; }

/* About us: four short versions, each pointing at its full page. */
.gh-content > .gh-summaries { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* A hub that opens on its sections (Get involved) needs no gap above them. */
.gh-content > .gh-summaries:first-child { margin-top: 0; }
.gh-content .gh-vids, .gh-content .gh-series { margin-top: 1.5rem; }
.gh-summaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--gh-line); }
.gh-summaries > * { padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(0rem, 3vw, 2.75rem) clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: 1px solid var(--gh-line); margin: 0 !important; }
.gh-summaries > *:nth-child(even) { padding-left: clamp(1.25rem, 3vw, 2.75rem); padding-right: 0; border-left: 1px solid var(--gh-line); }
.gh-summaries h2 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.gh-summaries p { margin: 0 0 .75rem; }
/* An odd count leaves the last section alone: it takes the full row rather than half of one. */
.gh-summaries > *:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }

/* Core beliefs: a numbered list, because the order is the order of the creed. */
.gh-creed { list-style: none; margin: 0; padding: 0 !important; counter-reset: creed; }
.gh-creed > li { counter-increment: creed; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--gh-line); margin: 0 !important; }
.gh-creed > li::before { content: counter(creed, decimal-leading-zero); font-family: var(--gh-display); font-size: 1.5rem; color: var(--gh-royal); line-height: 1.3; }
.gh-creed h3 { margin: 0 0 .35rem; }
.gh-creed p { margin: 0; }

/* Volunteer questions. */
.gh-faq { border-top: 1px solid var(--gh-line); }
.gh-faq details { border-bottom: 1px solid var(--gh-line); }
.gh-faq summary { cursor: pointer; padding: 1.1rem 0; font-weight: 700; font-size: 1.1875rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.gh-faq summary::-webkit-details-marker { display: none; }
.gh-faq summary::after { content: "+"; font-family: var(--gh-display); font-size: 1.6rem; line-height: 1; color: var(--gh-royal); }
.gh-faq details[open] summary::after { content: "\2212"; }
.gh-faq details > p { margin: 0 0 1.25rem; }

/* Free resources. */
.gh-links { list-style: none; padding: 0 !important; border-top: 1px solid var(--gh-line); }
.gh-links li { margin: 0 !important; border-bottom: 1px solid var(--gh-line); }
.gh-links a { display: block; padding: 1rem 0; font-weight: 700; }
.gh-links span { display: block; font-weight: 400; color: var(--gh-muted); font-size: 1rem; }

/* ─── Contact form ─────────────────────────────────────────────────────── */

.gh-form { display: grid; gap: 1.1rem; }
.gh-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.gh-field { margin: 0 !important; display: grid; gap: .4rem; }
.gh-field label { font-weight: 700; font-size: 1.0625rem; }
.gh-field input, .gh-field textarea {
	width: 100%; padding: .8rem .9rem; font: inherit; font-size: 1.125rem; color: var(--gh-ink);
	background: #fff; border: 2px solid #7484a0; border-radius: 0;
}
.gh-field input:focus-visible, .gh-field textarea:focus-visible { outline-offset: 1px; border-color: var(--gh-blue); }
.gh-form.is-off input, .gh-form.is-off textarea { background: var(--gh-mist); border-style: dashed; color: var(--gh-ink); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--gh-ink); }
.gh-form-off { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: var(--gh-mist); border-left: 3px solid var(--gh-royal); }
.gh-form-off p { margin: 0; }
.gh-form-ok { padding: 1rem 1.25rem; background: #e6f4ea; border-left: 3px solid #1e7a3c; }
.gh-hp { position: absolute; left: -9999px; }

/* ─── Blog listing and posts ───────────────────────────────────────────── */

.gh-list { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--gh-sec); }
.gh-posts { list-style: none; margin: 0; padding: 0; max-width: 56rem; }
.gh-post-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.75rem; padding-block: 1.75rem; border-top: 1px solid var(--gh-line); }
.gh-posts > li:first-child .gh-post-row { border-top: 0; padding-top: 0; }
.gh-post-thumb { margin: 0; }
/* A post with no artwork (none of his do; the launch post could) takes the full row. */
.gh-post-row:not(:has(.gh-post-thumb)) .gh-post-text { grid-column: 1 / -1; }
.gh-post-thumb img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; background: var(--gh-paper); border: 1px solid var(--gh-line); }
.gh-post-title { margin: 0; font-family: var(--gh-display); font-weight: 400; font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem); line-height: 1.2; }
.gh-post-title a { color: var(--gh-ink); text-decoration: none; }
.gh-post-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.gh-post-date { margin-top: .4rem; font-size: 1rem; color: var(--gh-muted); }
.gh-post-excerpt { margin-top: .6rem; }
.gh-post-excerpt p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.gh-pager { margin-top: 2.5rem; gap: .5rem; font-weight: 700; flex-wrap: wrap; }
.gh-pager a, .gh-pager .page-numbers { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .4rem .8rem; border: 1px solid var(--gh-line); text-decoration: none; }
.gh-pager .current { background: var(--gh-blue); color: #fff; border-color: var(--gh-blue); }
.gh-pager .dots { border: 0; }

.gh-post-wrap { padding-block: clamp(2rem, 5vw, 3.5rem) var(--gh-sec); }
.gh-post-hero { margin: 0 0 2.25rem; max-width: var(--gh-measure); }
.gh-post-hero img { display: block; width: 100%; height: auto; border: 1px solid var(--gh-line); }
.gh-prose { max-width: var(--gh-measure); }
.gh-prose > * { margin-block: 0 1.15rem; }
.gh-prose img { height: auto; }
.gh-terms { max-width: var(--gh-measure); margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gh-line); font-size: 1rem; color: var(--gh-muted); }
.gh-post-nav { max-width: var(--gh-measure); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.gh-post-nav > div { font-size: 1rem; }
.gh-post-nav .post-navigation-link-next { text-align: right; grid-column: 2; }
.gh-post-nav a { display: block; font-weight: 700; font-size: 1.0625rem; }
.gh-404 { padding-block: 2.5rem var(--gh-sec); }

/* ─── Footer ───────────────────────────────────────────────────────────── */

.gh-foot { background: var(--gh-navy); color: var(--gh-pale); }
.gh-foot-top { padding-block: clamp(3.5rem, 7vw, 5.5rem) 3rem; }
.gh-foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.75rem, 3.5vw, 3.5rem); }
.gh-foot-logo { display: block; width: 100%; max-width: 17rem; background: #fff; padding: .9rem 1.1rem; }
.gh-foot-id p { margin: 1.25rem 0 1.5rem; font-size: 1.0625rem; line-height: 1.65; color: var(--gh-pale); }
.gh-foot-h { margin: 0 0 1rem; font-family: var(--gh-body); font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gh-gold); }
.gh-foot a { color: #fff; }
.gh-foot .gh-sched li { grid-template-columns: minmax(0, 1fr) auto; padding: .7rem 0; }
.gh-foot .gh-sched li:first-child { border-top: 0; padding-top: 0; }
.gh-foot .gh-sched-day { grid-column: 1 / -1; font-size: 1rem; }
.gh-foot .gh-sched-what, .gh-foot .gh-sched-time { font-size: 1.0625rem; }
.gh-foot-note { margin: .75rem 0 0; font-size: 1rem; color: var(--gh-pale); }
.gh-foot .gh-contact-list li { font-size: 1.0625rem; }
.gh-foot .gh-contact-list .gh-ico { color: var(--gh-gold); }
.gh-foot .gh-contact-list a { overflow-wrap: anywhere; }
.gh-foot-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.gh-foot-nav li { break-inside: avoid; padding: .2rem 0; font-size: 1.0625rem; }
.gh-foot-nav a { text-decoration: none; }
.gh-foot-nav a:hover, .gh-foot-nav a[aria-current] { text-decoration: underline; }
.gh-socials-foot a { border-color: rgba(255,255,255,.35); color: #fff; }
.gh-socials-foot a:hover { background: var(--gh-gold); border-color: var(--gh-gold); color: var(--gh-navy); }
.gh-foot-base { border-top: 1px solid rgba(255,255,255,.16); }
.gh-foot-base-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem 1.5rem; }
.gh-foot-base p { margin: 0; font-size: 1rem; }

/* The Floulex credit: quiet, and never louder than the church's own name. */
.gh-foot-base .fx-credit { color: var(--gh-pale); }
.gh-content > .fx-credit-about { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--gh-line); }
.gh-content .fx-credit-about { font-size: 1rem; color: var(--gh-muted); }

/* ─── Reveal: once, and never without script ───────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.js .gh-rev { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
	.js .gh-rev.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ─── Narrower screens ─────────────────────────────────────────────────── */

@media (max-width: 1000px) {
	.gh-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.gh-hero-grid, .gh-feature, .gh-who, .gh-give, .gh-split { grid-template-columns: minmax(0, 1fr); }
	.gh-who .gh-portrait { max-width: 15rem; }
	.gh-vids, .gh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* An odd number of cards cannot fill a two-column grid, so they become rows. */
	.gh-vids.is-odd, .gh-cards { grid-template-columns: minmax(0, 1fr); }
	.gh-vids.is-odd .gh-vid-link, .gh-cards .gh-card-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 1.25rem; align-items: start; }
	.gh-vids.is-odd .gh-vid-frame, .gh-cards .gh-card-frame { grid-row: span 3; }
	.gh-vids.is-odd .gh-vid-title, .gh-cards .gh-card-title { margin-top: 0; }
	.gh-vids-row { grid-template-columns: none; }
	.gh-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gh-book { grid-template-columns: minmax(0, 1fr); }
	.gh-book-fig img { max-height: 24rem; }
}
@media (max-width: 680px) {
	.gh-summaries { grid-template-columns: minmax(0, 1fr); }
	.gh-summaries > *, .gh-summaries > *:nth-child(even) { padding: 1.75rem 0; border-left: 0; }
	.gh-watch { grid-template-columns: minmax(0, 1fr); }
	.gh-field-row { grid-template-columns: minmax(0, 1fr); }
	.gh-post-row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.1rem; }
	.gh-sched li { grid-template-columns: minmax(0, 1fr) auto; }
	.gh-sched-day { grid-column: 1 / -1; }
	.gh-foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.gh-vids { grid-template-columns: minmax(0, 1fr); }
	.gh-vids .gh-vid-link, .gh-vids.is-odd .gh-vid-link, .gh-cards .gh-card-link { display: block; }
	.gh-vids.is-odd .gh-vid-title, .gh-cards .gh-card-title { margin-top: 1rem; }
	.gh-vids-row { grid-auto-columns: 82%; }
	.gh-post-nav { grid-template-columns: minmax(0, 1fr); }
	.gh-post-nav .post-navigation-link-next { grid-column: auto; text-align: left; }
	.gh-hero-tag cite { display: block; margin: .3rem 0 0; }
}
@media (max-width: 400px) {

	.gh-foot-nav ul { columns: 1; }
}
.gh-post-nav .post-navigation-link__label { display: block; font-weight: 400; color: var(--gh-muted); }

/* ─── Hooks with no rule of their own ──────────────────────────────────── */
/* These classes exist so a page or a script can find an element. Declared
   here so the audit can tell a hook from a renamed class that lost its rule. */
.gh-main, .gh-bar, .gh-hero-copy, .gh-has-drop, .gh-foot-col, .gh-form-wrap,
.gh-post-text, .gh-card, .gh-card-img, .gh-sched-foot, .gh-socials-page { min-width: 0; }
.gh-ico { flex: none; }
.gh-ico-youtube, .gh-ico-facebook, .gh-ico-instagram, .gh-ico-x, .gh-ico-tiktok, .gh-ico-twitch,
.gh-ico-phone, .gh-ico-mail, .gh-ico-pin, .gh-ico-arrow, .gh-ico-play, .gh-ico-live { display: inline-block; vertical-align: middle; }

@media (max-width: 480px) {
	.gh-shelf { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.gh-shelf-link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
	.gh-shelf-title { margin-top: 0; }
}

/* Anything positioned inside a card (the screen-reader text included) must
   belong to the card. Otherwise, in a row that scrolls sideways, it is placed
   against the page instead and widens the whole document. */
.gh-vid, .gh-card, .gh-shelf li, .gh-book, .gh-vids-row { position: relative; }
.gh-series-h + .gh-serie { border-top: 0; margin-top: 0; padding-top: 0; }
.gh-series { margin-top: clamp(3rem, 6vw, 4.5rem) !important; }