/**
 * Lifecentre brand foundation + module styles.
 *
 * Built to "Lifecentre Brand Guidelines", Godzspeed Communications 2026.
 * Accent tokens (--lc-accent-*) are injected per site by LC_Assets::print_tokens().
 */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
	/* Primary colours (p.17/20/23). The only two permitted for text. */
	--lc-black: #000000;
	--lc-cream: #f7f6ee;

	/* Accents are injected per stream; these are the Church/parent defaults. */
	--lc-accent-light: #b9d7e9;
	--lc-accent-mid: #80b3cd;
	--lc-accent-deep: #1b87b2;

	/* Type (p.14/15). Georgia is a system face, so only the sans is loaded. */
	--lc-font-sans: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--lc-font-serif: Georgia, "Times New Roman", Times, serif;

	--lc-weight-body: 400; /* Roman  — body copy */
	--lc-weight-head: 500; /* Medium — headings, subheadings, descriptors */

	/* Leading. The guide specifies font size x 1 throughout, which is a print
	   spec: at 1.0 body copy is unreadable on screen and fails WCAG 1.4.12.
	   Display type keeps the tight 1.0; body relaxes to 1.5. */
	--lc-leading-display: 1;
	--lc-leading-body: 1.5;

	/* Tracking. Descriptors are set at 50 (p.15) = 0.05em. */
	--lc-tracking-descriptor: 0.05em;

	--lc-space-xs: 0.5rem;
	--lc-space-sm: 1rem;
	--lc-space-md: 2rem;
	--lc-space-lg: 4rem;
	--lc-space-xl: 6rem;

	--lc-measure: 34em; /* Comfortable line length for body copy. */
}

/* ---------------------------------------------------------------------------
   2. Typography primitives
   ------------------------------------------------------------------------- */

/* Why every heading class below is written twice.
   ---------------------------------------------
   Divi's Theme Options typography — heading size, weight, family, tracking,
   line height and colour — is printed as Customizer CSS on bare `h1`…`h6`.
   One type selector, so a single `.lc-*` class outranks it and the brand scale
   holds.

   Inside the Visual Builder it does not. `et_divi_add_customizer_css()` runs
   its heading selectors through `$scope_heading_selectors()` when
   `et_fb_is_enabled()`, prefixing each one with `.et-fb-post-content` (Divi
   5.9.0, functions.php ~line 5671; body copy gets the same treatment at ~5887).
   `h1` becomes `.et-fb-post-content h1` — one class *and* one type, which beats
   a single class. So in the builder, and only in the builder, every Lifecentre
   heading was rendered in Divi's Customizer type: its size, its weight, its
   family, its tracking, its grey. The author laid out a page against type the
   saved page never uses.

   Divi does the same thing on the front end with narrow columns —
   `.et_pb_column_1_3 h1 { font-size: 26px }`, also one class and one type —
   which collapsed an LC heading placed in a 1/3, 1/4, 1/5, 1/6 or 2/5 column.

   Repeating the class costs nothing and outranks both. Deliberately two classes
   and no more: a size set in Divi's Design tab is written as
   `.lc_heartbeat_hero_0 .lc-display`, also two classes, and Divi prints its
   module CSS after this stylesheet — so the author's own setting still wins.
   Only the classes that can land on an `h1`–`h6` are doubled; everything else
   was never in the fight. */
.lc-display.lc-display,
.lc-heading.lc-heading,
.lc-subheading.lc-subheading {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	line-height: var(--lc-leading-display);
	letter-spacing: 0;
	text-align: left; /* Flush left (p.15). */
	margin: 0;
	text-wrap: balance;
}

/* Divi styles h1–h6 and body copy with its own colours, which beat a colour
   merely inherited from the canvas. Every piece of Lifecentre type therefore
   claims `inherit` explicitly, so the canvas pairing always wins. Without this,
   headings render in Divi's default dark grey on the black and deep-accent
   canvases — unreadable, and off-brand. */
.lc-display.lc-display,
.lc-heading.lc-heading,
.lc-subheading.lc-subheading,
.lc-descriptor,
.lc-body,
.lc-quote,
.lc-quote__attribution,
.lc-schedule__title.lc-schedule__title,
.lc-schedule__desc,
.lc-schedule__note,
.lc-schedule__date,
.lc-pathway__label,
.lc-pathway__title.lc-pathway__title,
.lc-accordion__title.lc-accordion__title,
.lc-card__title.lc-card__title,
.lc-resource__title.lc-resource__title,
.lc-pathway__price,
.lc-pathway__desc,
.lc-details__label,
.lc-details__value,
.lc-details__note,
.lc-family__name,
.lc-family__tagline,
.lc-team__group-title.lc-team__group-title,
.lc-team__name.lc-team__name,
.lc-team__role,
.lc-team__leave,
.lc-team__bio,
.lc-team__initials,
.lc-sermon__title.lc-sermon__title,
.lc-sermon__series,
.lc-sermon__campus,
.lc-sermon__meta,
.lc-sermon__description,
.lc-sermon__scripture,
.lc-sermon__topic,
.lc-sermon__listen-label,
.lc-sermon__pill,
.lc-timeline__date,
.lc-timeline__title.lc-timeline__title,
.lc-location__name.lc-location__name,
.lc-location__address,
.lc-video__name.lc-video__name,
.lc-video__meta,
.lc-menu__descriptor,
.lc-menu__heading.lc-menu__heading,
.lc-menu__column-title.lc-menu__column-title,
.lc-menu__aside-heading,
.lc-menu__label,
.lc-menu__note,
.lc-menu__column-body,
.lc-menu__footnote {
	color: inherit;
}

/* And the same claim again, at a specificity that survives a Theme Builder
   layout.
   -------------------------------------------------------------------------
   Two classes beat the bare `h1`…`h6` Divi prints its Customizer heading colour
   on, and that held everywhere the modules had been used — inside the page's
   own content. It does not hold in a Theme Builder header, footer or body,
   which is where a menu lives: `et_builder_maybe_wrap_css_selector()` wraps
   every one of those selectors in `ET_BUILDER_CSS_PREFIX` there, so `h3`
   becomes `.et-db #et-boc .et-l h3`. That carries an ID, and no number of
   classes beats an ID — so an LC heading in a Theme Builder layout was
   rendered in Divi's default #333: dark grey on cream, and invisible on black.

   The answer is the same claim written against the same wrapper, which is one
   ID and four classes to Divi's one ID, two classes and a type. No
   `!important`, so a colour an author sets in the Design tab — which Divi
   prints after this stylesheet, wrapped the same way — still wins the tie. */
.et-db #et-boc .et-l .lc-display.lc-display,
.et-db #et-boc .et-l .lc-heading.lc-heading,
.et-db #et-boc .et-l .lc-subheading.lc-subheading,
.et-db #et-boc .et-l .lc-schedule__title.lc-schedule__title,
.et-db #et-boc .et-l .lc-pathway__title.lc-pathway__title,
.et-db #et-boc .et-l .lc-accordion__title.lc-accordion__title,
.et-db #et-boc .et-l .lc-card__title.lc-card__title,
.et-db #et-boc .et-l .lc-resource__title.lc-resource__title,
.et-db #et-boc .et-l .lc-team__group-title.lc-team__group-title,
.et-db #et-boc .et-l .lc-team__name.lc-team__name,
.et-db #et-boc .et-l .lc-sermon__title.lc-sermon__title,
.et-db #et-boc .et-l .lc-timeline__title.lc-timeline__title,
.et-db #et-boc .et-l .lc-location__name.lc-location__name,
.et-db #et-boc .et-l .lc-video__name.lc-video__name,
.et-db #et-boc .et-l .lc-menu__heading.lc-menu__heading,
.et-db #et-boc .et-l .lc-menu__column-title.lc-menu__column-title {
	color: inherit;
}

/* The signature mixed setting: sans Medium with a Georgia italic phrase.
   Authors mark the italic run with <em> and it picks this up automatically. */
.lc-display.lc-display em,
.lc-heading.lc-heading em,
.lc-subheading.lc-subheading em,
.lc-quote em,
.lc-accordion__title.lc-accordion__title em,
.lc-card__title.lc-card__title em,
.lc-resource__title.lc-resource__title em,
.lc-giving__card-title.lc-giving__card-title em,
.lc-giving-calc__title.lc-giving-calc__title em,
.lc-sermon__title.lc-sermon__title em,
.lc-timeline__title.lc-timeline__title em,
.lc-location__name.lc-location__name em,
.lc-video__name.lc-video__name em,
.lc-menu__heading.lc-menu__heading em,
.lc-menu__column-title.lc-menu__column-title em,
.lc-menu__label em {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-weight: 400;
}

.lc-display.lc-display {
	font-size: clamp(2.5rem, 6.5vw, 5.5rem);
}

.lc-heading.lc-heading {
	font-size: clamp(1.75rem, 3.4vw, 3rem);
}

.lc-subheading.lc-subheading {
	font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.lc-body {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: var(--lc-leading-body);
	letter-spacing: 0;
	max-width: var(--lc-measure);
	margin: 0;
}


/* Descriptor: Medium, all caps, +50 tracking (p.15). */
.lc-descriptor {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.8125rem;
	line-height: var(--lc-leading-display);
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
	margin: 0;
}

/* Accent-coloured italic runs — opt-in, and always drawn from the per-site
   tokens rather than any one stream's colour.

   On cream the colour is --lc-accent-ink, which LC_Brand sets per stream: the
   deep accent where it clears the 3:1 minimum for large text (Morning Sky
   3.76:1, Olive Branch 3.70:1) and black where it does not (Ember manages only
   2.44:1). On black, accent-light gives ~14:1 for all three. On the light- and
   deep-accent canvases the accent-on-accent pairing lands near 2.7:1, so
   italics stay with the canvas text colour there. */
.lc-em-accent em,
.lc-em-accent i {
	color: var(--lc-accent-ink, var(--lc-accent-deep));
}

/* Modules put the canvas and the accent-italic class on the same element, so
   each canvas needs a compound selector as well as a descendant one. Without
   the compound form the override silently never matches — which on Care's black
   canvas meant black italics on black. */
.lc-canvas--black.lc-em-accent em,
.lc-canvas--black.lc-em-accent i,
.lc-canvas--black .lc-em-accent em,
.lc-canvas--black .lc-em-accent i {
	color: var(--lc-accent-light);
}

.lc-canvas--light.lc-em-accent em,
.lc-canvas--light.lc-em-accent i,
.lc-canvas--light .lc-em-accent em,
.lc-canvas--light .lc-em-accent i,
.lc-canvas--deep.lc-em-accent em,
.lc-canvas--deep.lc-em-accent i,
.lc-canvas--deep .lc-em-accent em,
.lc-canvas--deep .lc-em-accent i {
	color: inherit;
}

/* An explicitly chosen emphasis colour is a deliberate design decision, so it
   overrides the canvas guards above. Matching their specificity and coming
   later in the sheet is enough — no !important needed. Contrast is the
   designer's call at that point. */
.lc-em-accent.lc-em-custom em,
.lc-em-accent.lc-em-custom i,
.lc-em-accent.lc-em-custom .lc-display.lc-display em,
.lc-em-accent.lc-em-custom .lc-heading.lc-heading em {
	color: var(--lc-em-color);
}

/* ---------------------------------------------------------------------------
   3. Canvases
   The four approved text/canvas pairings (p.19/22/25). Background and text
   colour always travel together so they cannot be mismatched.
   ------------------------------------------------------------------------- */

.lc-canvas--cream {
	background-color: var(--lc-cream);
	color: var(--lc-black);
}

.lc-canvas--black {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

.lc-canvas--light {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
}

.lc-canvas--deep {
	background-color: var(--lc-accent-deep);
	color: var(--lc-cream);
}

.lc-canvas--cream .lc-rule,
.lc-canvas--light .lc-rule {
	border-color: rgba(0, 0, 0, 0.2);
}

.lc-canvas--black .lc-rule,
.lc-canvas--deep .lc-rule {
	border-color: rgba(247, 246, 238, 0.3);
}

/* ---------------------------------------------------------------------------
   4. Shared pieces
   ------------------------------------------------------------------------- */

.lc-emblem {
	display: block;
	width: auto;
	height: 2.5rem;
}

/* A whole supplied lockup — the emblem over the name — rather than the emblem
   on its own. Sized by width, since the files are square with the artwork
   centred in them; the module using one sets how wide. */
.lc-lockup {
	display: block;
	max-width: 100%;
	height: auto;
}

.lc-heartbeat {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.lc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-button {
	display: inline-block;
	/* Inherit the canvas text colour rather than the UA link colour, so the
	   border and ghost label stay inside the approved pairing. */
	color: inherit;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.9375rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	/* No text-transform: the label reads as it was typed. Caps used to be set
	   here, so every label came out shouting whatever was typed, and getting
	   anything else meant knowing to reach for Divi's Capitalization control.
	   The typed text is the honest default; caps are now the deliberate choice,
	   set per button under Design → Button → Capitalization (LC Button), or
	   typed into the label for the buttons other modules render themselves. */
	text-decoration: none;
	padding: 1.15em 2.4em;
	border: 1px solid currentColor;
	/* Square. The pill and the underlined label both went; the boxed button is
	   the one shape used across the family of sites. */
	border-radius: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Filled button swaps the canvas and its text colour round, so the pair stays
   within the palette on every canvas. Black on cream is also the standing
   default, so a button dropped somewhere without a canvas class still lands
   inside the palette.

   The fill and the label are both set on the anchor rather than on the inner
   span, so a colour chosen in Divi's Design tab — or carried by a preset —
   lands on the same element and wins. */
.lc-button--solid {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

.lc-canvas--black .lc-button--solid,
.lc-canvas--deep .lc-button--solid {
	background-color: var(--lc-cream);
	color: var(--lc-black);
}

.lc-button--ghost {
	background-color: transparent;
}

.lc-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* An LC Button child module. Divi wraps every module in a div of its own, and
   that wrapper — not the anchor — is the flex item inside .lc-buttons, so it
   has to shrink to the button rather than fill the row. */
.lc-buttons__item {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.lc-buttons__item > .lc-button {
	width: 100%;
}

/* Tones. The guideline swatch pages (p.19/22/25) show black type on the light
   accent and cream type on the mid and deep accents; these three pairings are
   the only ones used for accent-filled blocks. */
.lc-tone--light {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
}

.lc-tone--mid {
	background-color: var(--lc-accent-mid);
	color: var(--lc-cream);
}

.lc-tone--deep {
	background-color: var(--lc-accent-deep);
	color: var(--lc-cream);
}

/* ---------------------------------------------------------------------------
   5. Heartbeat Hero
   ------------------------------------------------------------------------- */

.lc-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: var(--lc-space-xl) var(--lc-space-md);
}

.lc-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
	align-items: flex-start;
}

.lc-hero--center .lc-hero__inner {
	align-items: center;
	text-align: center;
}

.lc-hero--center .lc-display,
.lc-hero--center .lc-body {
	text-align: center;
}

.lc-hero--center .lc-body {
	margin-inline: auto;
}

.lc-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

/* The LC Button children. They belong to the copy column so that a split hero
   keeps them beside the photograph rather than under it, but they want more air
   above them than the lines of copy do. */
.lc-hero__text .lc-buttons {
	margin-top: var(--lc-space-sm);
}

.lc-hero--center .lc-hero__text .lc-buttons {
	justify-content: center;
}

/* Two-column hero: copy one side, masked photograph the other. */
.lc-hero--split .lc-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	gap: var(--lc-space-lg);
}

.lc-hero--split.lc-hero--media-left .lc-hero__inner {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}

.lc-hero--split.lc-hero--media-left .lc-hero__media {
	order: -1;
}

@media (max-width: 900px) {
	.lc-hero--split .lc-hero__inner,
	.lc-hero--split.lc-hero--media-left .lc-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--lc-space-md);
	}

	/* Copy leads on small screens regardless of the desktop arrangement. */
	.lc-hero--split.lc-hero--media-left .lc-hero__media {
		order: 0;
	}
}

/* The mask sits on the wrapper rather than the image itself, so that a tint
   painted behind the photograph is clipped to the same shape. `isolation`
   keeps the blend below contained to this element instead of mixing with the
   heartbeat and canvas behind it. */
.lc-hero__media {
	position: relative;
	width: 100%;
	isolation: isolate;

	/* The quarter-turned heart mask, from the supplied brand vector
	   (assets/svg/lc-heart-mask.svg). Using the real silhouette rather than a
	   constructed approximation means the corners and the inner junction are the
	   brand's own — nothing about the mark is redrawn here (p.12, rules 6 and 7).
	   The path is a single continuous outline, so the lobes cannot separate.

	   It is referenced here rather than emitted per module, so replacing the file
	   updates every hero at once and the shape is never cached inside Divi's
	   generated CSS. A custom mask URL overrides it via --lc-media-mask. */
	-webkit-mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* The photograph fills the mask. A square is the default; the module can
   override the ratio. */
.lc-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--lc-media-ratio, 1 / 1);
	object-fit: cover;
}

/* Photography is black and white throughout the brand (p.30). The filter is a
   safety net for images that have not already been treated. */
.lc-hero__media--mono img {
	filter: grayscale(1);
}


/* Brand colour overlay (p.31–34). The photograph contributes luminosity and the
   tint contributes hue, giving a true duotone rather than a flat colour wash
   over the top — which is what the guide's temperature/tint recipe produces. */
.lc-hero__media--tinted {
	background-color: var(--lc-media-tint);
}

.lc-hero__media--tinted img {
	mix-blend-mode: luminosity;
}

/* ---------------------------------------------------------------------------
   6. Schedule
   ------------------------------------------------------------------------- */

.lc-schedule {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-schedule__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lc-schedule__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lc-space-sm);
	padding-bottom: var(--lc-space-xs);
	border-bottom: 1px solid;
	margin-bottom: var(--lc-space-md);
}

.lc-schedule__grid {
	display: grid;
	gap: var(--lc-space-sm);
	grid-template-columns: repeat(var(--lc-schedule-columns, 2), minmax(0, 1fr));
	margin-top: var(--lc-space-md);
}

@media (max-width: 720px) {
	.lc-schedule__grid {
		grid-template-columns: 1fr;
	}
}

.lc-schedule__item {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	text-decoration: none;
}

a.lc-schedule__item {
	transition: transform 0.18s ease;
}

a.lc-schedule__item:hover,
a.lc-schedule__item:focus-visible {
	transform: translateY(-2px);
}

.lc-schedule__date {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.8125rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	line-height: 1;
	padding: 0.75rem 1rem;
	background-color: var(--lc-accent-mid);
}

.lc-schedule__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lc-schedule__title.lc-schedule__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.0625rem;
	line-height: 1.2;
	margin: 0;
}

.lc-schedule__desc,
.lc-schedule__note {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0;
}

.lc-schedule__note {
	font-style: italic;
	font-family: var(--lc-font-serif);
}

.lc-schedule__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lc-space-sm);
	margin-top: var(--lc-space-md);
}

.lc-schedule__footer a {
	color: inherit;
}

/* ---------------------------------------------------------------------------
   7. Scripture / quote
   ------------------------------------------------------------------------- */

.lc-scripture {
	position: relative;
	overflow: hidden;
	padding: var(--lc-space-lg) var(--lc-space-md);
	text-align: center;
}

.lc-scripture__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lc-space-md);
}

.lc-quote {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0;
	text-wrap: balance;
}

.lc-quote__attribution {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 1rem;
	line-height: 1;
	margin: 0;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   8. Pathways — heartbeat bars used as content containers
   ------------------------------------------------------------------------- */

.lc-pathways {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-pathways__inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* 1180px is the standing width every module holds its content to, and it is the
   right one for a row of cards: three columns of it are already the width copy
   wants to be read at. A single wide entry is the case that wants out of it —
   a banner that stops 300px short of the section it sits in reads as a mistake
   — so the cap is a setting rather than a constant. The blurb keeps its own
   measure either way; that is typography, not layout. */
.lc-pathways--width-row .lc-pathways__inner,
.lc-pathways--width-bleed .lc-pathways__inner {
	max-width: none;
}

/* Edge to edge, out of the row's gutters. The same escape LC Statement's band
   makes, and it needs the same clip on the document, or the negative margins
   show up as a horizontal scrollbar. */
.lc-pathways--width-bleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

html:has(.lc-pathways--width-bleed) {
	overflow-x: clip;
}

.lc-pathways__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-pathways-columns, 3), minmax(0, 1fr));
	gap: var(--lc-space-md);
	margin-top: var(--lc-space-md);
	/* Bars sit on a shared baseline so their differing heights read as one
	   heartbeat rhythm across the row. */
	align-items: end;
}

.lc-pathways--top .lc-pathways__grid {
	align-items: start;
}

.lc-pathways--centre .lc-pathways__grid {
	align-items: center;
}

/* Matched heights. Nothing to do with the heartbeat — it is what a row of
   framed cards wants, so their bottom edges line up however long the blurbs
   run. */
.lc-pathways--stretch .lc-pathways__grid {
	align-items: stretch;
}

/* A framed card has no bar to stand on, so the standing baseline default reads
   as matched heights instead and the row lines up without a second setting.
   Hanging from the top and centring on a midline still do what they say. */
.lc-pathways--framed.lc-pathways--bottom .lc-pathways__grid {
	align-items: stretch;
}

@media (max-width: 860px) {
	.lc-pathways__grid {
		grid-template-columns: 1fr;
	}

	/* Stacked, varying bar heights are just inconsistent whitespace rather than
	   a rhythm, so they level out. */
	.lc-pathway__bar {
		min-height: 9rem !important;
	}
}

.lc-pathway {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

.lc-pathway__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--lc-pathway-height, 16rem);
	padding: 1.5rem 1rem;
	text-align: center;
}

.lc-pathway__bar .lc-emblem {
	height: 2rem;
	margin-bottom: 0.35rem;
}

/* The bar and the words together, so a picture has something to sit beside.
   `display: contents` everywhere but that one layout, which leaves the bar and
   the body the pathway's own children exactly as they were before this wrapper
   existed. */
.lc-pathway__pane {
	display: contents;
}

.lc-pathway__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.lc-pathway__picture {
	display: block;
	width: var(--lc-pathway-figure, 224px);
	max-width: 100%;
	height: auto;
}

.lc-pathway__label {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: var(--lc-leading-display);
}

.lc-pathway__term {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--lc-black);
}

/* On the mid and deep tones the term sits on a dark fill, so it takes cream. */
.lc-tone--mid .lc-pathway__term,
.lc-tone--deep .lc-pathway__term {
	color: var(--lc-cream);
}

.lc-pathway__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

.lc-pathway__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem var(--lc-space-sm);
	width: 100%;
}

.lc-pathway__title.lc-pathway__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.375rem;
	line-height: 1.15;
	margin: 0;
}

.lc-pathway__price {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.375rem;
	line-height: 1.15;
	margin: 0;
	white-space: nowrap;
}

.lc-pathway__desc {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.9375rem;
	line-height: var(--lc-leading-body);
	margin: 0;
}

.lc-pathway .lc-buttons {
	margin-top: 0.35rem;
}

/* Content alignment. The bar itself always centres its own label — it is a
   block of colour with two words in it — so this is the words underneath. */
.lc-pathways--text-centre .lc-pathway__body {
	align-items: center;
	text-align: center;
}

.lc-pathways--text-centre .lc-pathway__head {
	justify-content: center;
}

/* Title size. Three classes, so it clears the doubled selector the title uses
   to win against Divi's own heading rules in the builder. */
.lc-pathways--title-medium .lc-pathway__title.lc-pathway__title {
	font-size: 1.75rem;
}

.lc-pathways--title-large .lc-pathway__title.lc-pathway__title {
	font-size: clamp(1.875rem, 2.6vw, 2.625rem);
}

/* The price sits on the title's baseline, so it grows with it — a step behind
   at the largest size, where matching it would make the fee the headline. */
.lc-pathways--title-medium .lc-pathway__price {
	font-size: 1.75rem;
}

.lc-pathways--title-large .lc-pathway__price {
	font-size: clamp(1.5rem, 1.8vw, 1.875rem);
}

/* ---------------------------------------------------------------------------
   8b. Framed pathways — the same content without the bar

   The other way to draw a pathway: no block of colour, just a card with an
   edge, the title large at the top and the button on the bottom line. It is the
   shape a row of programmes takes when the heartbeat belongs to something else
   on the page, and it is one setting rather than a second module because the
   content is identical — a label, a title, a sub-label, a blurb and a way in.

   The markup does not change between the two. `display: contents` is what makes
   that possible: the bar's box goes and its words stay, joining the card's own
   column where they can be ordered around the title. So the front end and the
   builder draw the same DOM and only the section's class differs.
   ------------------------------------------------------------------------- */

.lc-pathways--framed .lc-pathway {
	align-items: flex-start;
	gap: var(--lc-space-sm);
	padding: var(--lc-space-md);
	/* A floor, set on the section: a card is never shorter than this and the row
	   still grows past it for a long blurb. Nothing without one. */
	min-height: var(--lc-pathways-card-height, 0px);
}

.lc-pathways--framed .lc-pathway__bar,
.lc-pathways--framed .lc-pathway__body {
	display: contents;
}

/* With the bar's box goes its fill, and the tone's paired text colour would be
   left painting cream words onto a cream card. */
.lc-pathways--framed .lc-pathway__bar,
.lc-pathways--framed .lc-pathway__term {
	color: inherit;
}

/* Reading order: emblem, label, title and price, sub-label, blurb, button. The
   sub-label belongs to the bar's label inside a bar and to the title here,
   which is the one thing the two styles genuinely disagree about. */
.lc-pathways--framed .lc-pathway__label {
	order: 1;
}

.lc-pathways--framed .lc-pathway__head {
	order: 2;
}

.lc-pathways--framed .lc-pathway__term {
	order: 3;
}

.lc-pathways--framed .lc-pathway__desc {
	order: 4;
}

.lc-pathways--framed .lc-pathway .lc-buttons {
	order: 5;
}

/* "Year 1" over a title is the role the descriptor plays at the top of a
   section, not the display size it takes inside a bar. */
.lc-pathways--framed .lc-pathway__label {
	font-size: 0.8125rem;
	line-height: var(--lc-leading-display);
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
}

/* Set under a large title the sub-label is a sub-heading, so it is sized off
   the title rather than off the bar label it sits under in the other style. */
.lc-pathways--framed.lc-pathways--title-medium .lc-pathway__term {
	font-size: 1.125rem;
}

.lc-pathways--framed.lc-pathways--title-large .lc-pathway__term {
	font-size: 1.375rem;
}

/* Where the cards are matched in height the spare room goes above the blurb:
   titles stay at the top of each card and the blurbs and buttons sit on the
   bottom, which is what makes a row of them line up rather than merely share an
   outline. */
.lc-pathways--framed .lc-pathway__desc,
.lc-pathways--framed .lc-pathway .lc-buttons {
	margin-top: auto;
}

/* Only the first of the two takes it. With `auto` on both, the spare room would
   be split between the two gaps and neither would sit anywhere in particular. */
.lc-pathways--framed .lc-pathway__desc ~ .lc-buttons {
	margin-top: 0;
}

.lc-pathways--text-centre.lc-pathways--framed .lc-pathway {
	align-items: center;
	text-align: center;
}

.lc-pathways--text-centre.lc-pathways--framed .lc-pathway .lc-buttons {
	justify-content: center;
}

/* Long-hand rather than the `border` shorthand, so the colour `.lc-rule` sets
   from the canvas survives. */
.lc-pathways--style-ruled .lc-pathway {
	border-width: 1px;
	border-style: solid;
}

/* The frame is part of the design here rather than a divider, so it takes the
   canvas text colour at full strength instead of the hairline's 20%. */
.lc-pathways--style-outlined .lc-pathway {
	border: 1px solid currentColor;
}

.lc-pathways--style-tile .lc-pathway {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
}

/* Stacked, a framed card has the room to keep its padding but not to keep four
   columns of it — and a height floor set to match a row of cards is only empty
   space once there is no row left to match, exactly as the bar heights level
   out above. */
@media (max-width: 860px) {
	.lc-pathways--framed .lc-pathway {
		padding: var(--lc-space-md) var(--lc-space-sm);
		min-height: 0;
	}
}

/* Buttons. The pathway renders one outlined button and the section's choice is
   applied over it here, so the setting lives once on the row rather than three
   times over on the pathways in it. */
.lc-pathways--button-solid .lc-pathway .lc-button {
	background-color: var(--lc-black);
	color: var(--lc-cream);
	border-color: var(--lc-black);
}

.lc-canvas--black.lc-pathways--button-solid .lc-pathway .lc-button,
.lc-canvas--deep.lc-pathways--button-solid .lc-pathway .lc-button {
	background-color: var(--lc-cream);
	color: var(--lc-black);
	border-color: var(--lc-cream);
}

/* A tile is light whatever the canvas behind it, so its filled button keeps the
   black-on-cream pairing rather than the canvas's inverted one. */
.lc-pathways--style-tile.lc-pathways--button-solid .lc-pathway .lc-button {
	background-color: var(--lc-black);
	color: var(--lc-cream);
	border-color: var(--lc-black);
}

.lc-pathways--button-accent .lc-pathway .lc-button {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	border-color: var(--lc-accent-light);
}

/* The light accent on a light-accent ground is not a button, so where the card
   or the canvas is already light the fill steps up to the mid accent — still
   black type, per the swatch pages (p.19/22/25). */
.lc-canvas--light.lc-pathways--button-accent .lc-pathway .lc-button,
.lc-pathways--style-tile.lc-pathways--button-accent .lc-pathway .lc-button {
	background-color: var(--lc-accent-mid);
	color: var(--lc-black);
	border-color: var(--lc-accent-mid);
}

.lc-pathways--button-caps .lc-pathway .lc-button {
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
}

/* On the label rather than the anchor: it is the words that are underlined, and
   the padding around them is not part of the line. */
.lc-pathways--button-underline .lc-pathway .lc-button > span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Full-width buttons grow inside .lc-buttons, which is a flex row — this works
   for the anchor the front end prints and the span the builder does alike. */
.lc-pathways--buttons-full .lc-pathway .lc-buttons {
	width: 100%;
}

.lc-pathways--buttons-full .lc-pathway .lc-buttons > .lc-button {
	flex: 1 1 100%;
	padding-inline: 1rem;
	text-align: center;
}

/* A pathway that takes the whole row rather than one column of it. `1 / -1` is
   every column the section is cut into, whatever that number is — so a banner
   over a row of three is one grid, and not two modules trying to agree on a
   width they cannot agree on: each carries its own padding, its own cap and its
   own idea of how wide the section is.

   Below 860px the grid is already a single column, where this is a no-op. */
.lc-pathway--span {
	grid-column: 1 / -1;
}

/* The wide card's blurb is held to the measure body copy is held to everywhere
   else. A sentence run across 1180px — or across the two thirds of it the words
   get beside a picture — is a line to scan rather than to read. In a row of
   three the column is already narrower than the measure, so this only bites
   where the card is wide. */
.lc-pathways--one .lc-pathway__desc,
.lc-pathways--beside .lc-pathway--pictured .lc-pathway__desc {
	max-width: var(--lc-measure);
}

/* ---------------------------------------------------------------------------
   8c. A picture beside the words

   The wide single entry: a graphic one side, the title, the blurb and the
   button the other, the two panes centred on the same midline. It is what one
   programme across the section wants, where a row of three wants the cards.

   The words are the pane the bar and the body were wrapped in; the picture is
   its own figure beside it. Nothing else about a pathway changes, and the
   markup is the same in every style.

   It is read pathway by pathway rather than section-wide: only a pathway that
   has actually been given a picture is split in two. That is what lets one
   section carry a banner across the top and a row of plain cards under it —
   the banner takes the layout, its siblings keep the stacked one.
   ------------------------------------------------------------------------- */

.lc-pathways--beside .lc-pathway--pictured {
	flex-direction: row;
	align-items: center;
	gap: var(--lc-space-md);
}

.lc-pathways--beside .lc-pathway--pictured .lc-pathway__pane {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* A step wider than the stacked cards' gap. This is a banner rather than a
	   card in a row: the title is large, the blurb is a sentence or two, and at
	   1rem the three of them read as one block. */
	gap: var(--lc-space-md);
	/* The words take whatever the picture leaves, and `min-width: 0` is what
	   lets them: a flex item's floor is its content, so a long title would
	   otherwise push the figure narrower than it was asked to be. */
	flex: 1 1 0;
	min-width: 0;
}

.lc-pathways--beside .lc-pathway__figure {
	flex: 0 0 40%;
}

.lc-pathways--split-third .lc-pathway__figure {
	flex-basis: 33%;
}

.lc-pathways--split-twofifths .lc-pathway__figure {
	flex-basis: 40%;
}

.lc-pathways--split-half .lc-pathway__figure {
	flex-basis: 50%;
}

/* Words one side, picture the other. Ordered rather than reordered in the
   markup, so the title still comes first for anything reading the page. */
.lc-pathways--beside-flipped .lc-pathway__figure {
	order: 9;
}

/* Nothing is bottom-anchored here. The two panes are centred on each other, so
   the spare room in a card taller than its content belongs above and below the
   pair rather than inside the words. */
.lc-pathways--beside .lc-pathway--pictured .lc-pathway__desc,
.lc-pathways--beside .lc-pathway--pictured .lc-buttons {
	margin-top: 0;
}

.lc-pathways--text-centre.lc-pathways--beside .lc-pathway--pictured .lc-pathway__pane {
	align-items: center;
}

/* Stacked, there is no "beside": the picture goes over the words, centred on
   them, and the pane goes back to being the column it is in every other style. */
@media (max-width: 860px) {
	.lc-pathways--beside .lc-pathway--pictured {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--lc-space-sm);
	}

	.lc-pathways--beside .lc-pathway__figure {
		flex: 0 0 auto;
		align-self: center;
	}
}

/* ---------------------------------------------------------------------------
   9. Detail rows — label left, value right, hairline between
   ------------------------------------------------------------------------- */

.lc-details {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-details__inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* Scoped for the same reason as the sermon tags and the Events badges — Divi's
   `.et-l--body ul` outranks a bare class and would bullet and indent the rows. */
.lc-details .lc-details__list {
	list-style: none;
	margin: var(--lc-space-md) 0 0;
	padding: 0;
}

.lc-details .lc-details__item {
	display: block;
	list-style: none;
}

.lc-details .lc-details__item::marker {
	content: "";
}

.lc-details__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem var(--lc-space-md);
	padding: 1.15rem 0;
	border-bottom: 1px solid;
}

/* The list item is only a wrapper; the row element carries the rules, so the
   top hairline has to be addressed through it. */
.lc-details__item:first-child .lc-details__row {
	border-top: 1px solid;
}

a.lc-details__row {
	text-decoration: none;
	color: inherit;
}

a.lc-details__row:hover .lc-details__label,
a.lc-details__row:focus-visible .lc-details__label {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.lc-details__label {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.375rem, 2.6vw, 2.25rem);
	line-height: 1.1;
	margin: 0;
}

.lc-details__value {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.375rem, 2.6vw, 2.25rem);
	line-height: 1.1;
	margin: 0;
	white-space: nowrap;
}

.lc-details__note {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: var(--lc-leading-body);
	flex-basis: 100%;
	margin: 0;
	opacity: 0.75;
}

.lc-details__footer {
	margin-top: var(--lc-space-md);
}

/* ---------------------------------------------------------------------------
   10. Family bar
   ------------------------------------------------------------------------- */

.lc-family {
	padding: var(--lc-space-md);
}

.lc-family__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

/* Scoped, as above: Divi's `.et-l--body ul` would otherwise bullet the tiles and
   push the whole grid 1em right of the heading above it. */
.lc-family .lc-family__list {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(var(--lc-family-columns, 3), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.lc-family .lc-family__item {
	display: block;
	list-style: none;
}

.lc-family .lc-family__item::marker {
	content: "";
}

@media (max-width: 720px) {
	/* Scoped to match the base rule above. A media query adds no specificity, so
	   a bare `.lc-family__list` here would lose to it and the tiles would stay
	   three across on a phone. */
	.lc-family .lc-family__list {
		grid-template-columns: 1fr;
	}
}

.lc-family__link {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.35rem 1.25rem;
	text-decoration: none;
	color: var(--lc-black);
	background-color: var(--lc-family-accent, var(--lc-accent-light));
	transition: filter 0.18s ease;
}

.lc-family__link:hover,
.lc-family__link:focus-visible {
	filter: brightness(0.96);
}

.lc-family__name {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.0625rem;
	line-height: 1.1;
}

.lc-family__name em {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-weight: 400;
}

.lc-family__tagline {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.lc-family__link[aria-current="true"] {
	cursor: default;
	opacity: 0.72;
}

/* Builder only: the tiles are generated from the brand registry server-side, so
   the preview shows the heading and a note in place of them. */
.lc-family__vb-note {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

/* --- Cards view -----------------------------------------------------------
   The shape the College and Care pages use: one column per site, each the
   stream's emblem over its lockup, a sentence or two, and a button. Same list
   as the bar, drawn at page scale rather than as a strip of tiles.

   The grid is the only thing holding the columns apart — no fill, no frame —
   because here the emblem in the stream's own accent is what distinguishes one
   column from the next, and a tile behind it would fight that. */

.lc-family--cards {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-family--cards .lc-family__inner {
	gap: var(--lc-space-lg);
	align-items: center;
	text-align: center;
}

.lc-family--cards .lc-family__list {
	gap: var(--lc-space-lg) var(--lc-space-md);
	width: 100%;
}

/* Divi's `.et-l--body ul` again: the same scoping as the bar's list, for the
   same reason. */
.lc-family--cards .lc-family__item {
	display: flex;
}

/* Equal-height columns, as the cards module does it: whatever space a short
   blurb leaves goes above the button rather than below it, so the row of
   buttons lands on one line however unevenly the blurbs run. */
.lc-family__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lc-space-xs);
	min-width: 0;
	text-align: center;
}

.lc-family__lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lc-space-sm);
	color: inherit;
	text-decoration: none;
}

/* The supplied lockup, sized by width — it is a square file with the artwork
   centred in it, so the clear space around the mark is the file's own and the
   spacing above and below the card's copy comes from that rather than from a
   gap set here. Capped as a share of the column as well as in rem, so a
   two-column row does not blow the mark up to fill it. */
.lc-family__logo {
	width: min(var(--lc-family-logo, 18rem), 70%);
	height: auto;
}

/* The type version's mark, where a stream has no lockup file. */
.lc-family__card .lc-family__emblem {
	height: var(--lc-family-emblem, 5.5rem);
	max-width: 100%;
}

/* The lockup at page scale: "Lifecentre" in the sans over the stream word in
   Georgia italic, the two set as one block rather than a line of running text. */
.lc-family--cards .lc-family__name {
	display: block;
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.lc-family--cards .lc-family__name em {
	display: block;
	font-size: 0.68em;
	line-height: 1.1;
}

.lc-family--cards .lc-family__tagline {
	display: block;
	font-size: 1rem;
	line-height: var(--lc-leading-body);
	/* A measure, not a column width: three columns of a wide viewport would
	   otherwise set the blurb in lines too long to read comfortably. */
	max-width: 34ch;
}

/* Only the type version needs a step down to the blurb — the artwork brings its
   own clear space. */
.lc-family__lockup:not(:has(.lc-family__logo)) + .lc-family__tagline {
	margin-top: var(--lc-space-xs);
}

/* `auto` is the whole mechanism, as in the cards module: whatever space a short
   blurb leaves goes above the button rather than below it. */
.lc-family__buttons {
	margin-top: auto;
	padding-top: var(--lc-space-md);
	justify-content: center;
	width: 100%;
}

/* Full-width buttons grow inside .lc-buttons, which is a flex row — this works
   for the anchor the front end prints and the span the builder does alike. */
.lc-family--buttons-full .lc-family__buttons > .lc-button {
	flex: 1;
	padding-inline: 1rem;
	text-align: center;
}

.lc-family--buttons-auto .lc-family__buttons {
	width: auto;
}

/* Two steps down, as the cards module: four lockups side by side stop reading
   long before the viewport is narrow enough to want a single column. The 720px
   rule follows the 980px one so it wins where both match. */
@media (max-width: 980px) {
	.lc-family--cards .lc-family__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.lc-family--cards .lc-family__list {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   11. Statement band — one large heading over a photograph
   ------------------------------------------------------------------------- */

.lc-statement {
	position: relative;
	overflow: hidden;
}

/* Full width.

   Divi drops the module into a column inside a row with its own max-width and
   gutters. Pulling the margins out to half the difference between the row and
   the viewport puts the band back edge to edge without asking the author to
   restyle the section around it.

   `vw` counts the scrollbar, so where the scrollbar takes real width — Windows,
   and any browser not using overlay scrollbars — the band overhangs the document
   by half of it on each side. The rule below clips that overhang at the root.
   `clip` rather than `hidden`: it does not make the root a scroll container, so
   position: sticky elsewhere on the page keeps working. It is scoped with :has()
   so pages without a bleeding band are left alone. */
.lc-statement--bleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

html:has(.lc-statement--bleed) {
	overflow-x: clip;
}

/* The frame carries the padding rather than the band, because it is also the
   element the Visual Builder writes the custom properties onto. Declaring them
   in one place keeps the builder preview and the front end identical. */
.lc-statement__frame {
	position: relative;
	padding-top: var(--lc-statement-pad-top, var(--lc-space-xl));
	padding-bottom: var(--lc-statement-pad-bottom, var(--lc-space-xl));
	padding-inline: var(--lc-space-md);
}

.lc-statement__media {
	position: absolute;
	inset: 0;
	z-index: 0;

	/* Contains the tint's blend, so it mixes with the photograph beneath it and
	   not with the canvas or the heading. */
	isolation: isolate;
}

.lc-statement__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--lc-statement-focal, center);
}

/* Photography is black and white throughout the brand (p.30). */
.lc-statement__media--mono .lc-statement__image {
	filter: grayscale(1);
}

/* Brand colour overlay (p.31–34): the photograph supplies luminosity, the tint
   supplies hue, which is a duotone rather than a wash. */
.lc-statement__media--tinted {
	background-color: var(--lc-media-tint);
}

.lc-statement__media--tinted .lc-statement__image {
	mix-blend-mode: luminosity;
}

/* Scrim: the canvas colour laid back over the photograph, so the heading keeps
   its contrast whatever the picture is doing behind it. It follows the canvas,
   so it darkens on black and deep accent — where the text is cream — and
   lightens on cream and light accent, where the text is black. At full strength
   the band reads as a flat brand colour. */
.lc-statement__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--lc-black);
	opacity: var(--lc-statement-scrim, 0);
}

.lc-canvas--cream .lc-statement__scrim {
	background-color: var(--lc-cream);
}

.lc-canvas--light .lc-statement__scrim {
	background-color: var(--lc-accent-light);
}

.lc-canvas--deep .lc-statement__scrim {
	background-color: var(--lc-accent-deep);
}

.lc-statement__inner {
	position: relative;
	z-index: 1;
	max-width: var(--lc-statement-width, 1180px);
	margin-inline: auto;
}

/* Flush left is the guide's setting (p.15); the other two are opt-in. The
   heading claims its alignment explicitly because .lc-display hard-sets left. */
.lc-statement--center .lc-statement__inner,
.lc-statement--center .lc-statement__heading {
	text-align: center;
}

.lc-statement--right .lc-statement__inner,
.lc-statement--right .lc-statement__heading {
	text-align: right;
}

@media (max-width: 720px) {
	.lc-statement__frame {
		padding-inline: var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   12. Team
   The one grid whose contents come from the database rather than the layout.
   Group headings only appear when the module is set to group; a single
   ungrouped bucket produces the same grid with no heading above it.
   ------------------------------------------------------------------------- */

.lc-team {
	/* Both alignments default to the flush-left setting the brand asks for
	   (p.15); the classes further down are the only things that move them. Two
	   properties rather than one because a centred card needs its contact links
	   centred as well, and those sit in a flex column where `text-align` does
	   nothing. */
	--lc-team-text-align: left;
	--lc-team-text-items: flex-start;
	--lc-team-head-align: left;

	/* The rule under a group heading, as a width so one custom property covers
	   both having it and not. */
	--lc-team-rule: 1px;

	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-team--rule-none {
	--lc-team-rule: 0;
}

.lc-team--text-center {
	--lc-team-text-align: center;
	--lc-team-text-items: center;
}

.lc-team--text-end {
	--lc-team-text-align: right;
	--lc-team-text-items: flex-end;
}

.lc-team--head-center {
	--lc-team-head-align: center;
}

.lc-team--head-end {
	--lc-team-head-align: right;
}

/* One module continuing the block above it, rather than opening a section of
   its own — the way a team page built from several of these gets its groups to
   read as one grid. The module keeps its own bottom padding, so the last block
   in a run still closes the section properly; it is only the seam above that
   closes up, to the same measure as the gap between rows.

   The negative margin assumes the block above uses the module's own vertical
   padding. If that has been changed in the Design tab, set this module's top
   margin there instead of using this. */
.lc-team--joined {
	margin-top: calc(var(--lc-space-md) - var(--lc-space-lg));
	padding-top: 0;
}

/* The heading, wherever it sits. Four classes, so it outranks both the doubled
   `.lc-heading.lc-heading` in section 2 and Divi's builder-scoped
   `.et-fb-post-content h2` — see the note at the top of that section. */
.lc-team .lc-team__inner > .lc-descriptor,
.lc-team .lc-team__head > .lc-descriptor,
.lc-team .lc-team__inner > .lc-heading.lc-heading,
.lc-team .lc-team__head > .lc-heading.lc-heading,
.lc-team .lc-team__group-title.lc-team__group-title {
	text-align: var(--lc-team-head-align);
}

/* The heading set to sit beside the photographs: a grid item spanning the cells
   the first row is short of, which is where the designed page puts "Staff Team"
   — level with the top row, out to the left of it. `max()` because a block whose
   count fills the row leaves nothing to span, and `span 0` is not a value.

   It only holds where there is a hole to fill, so below the tablet breakpoint —
   two columns, then one — the heading goes back to a full row of its own. */
.lc-team__group--head-inline .lc-team__head {
	grid-column: 1 / span max(var(--lc-team-empty), 1);
	align-self: start;
}

@media (max-width: 980px) {
	.lc-team__group--head-inline .lc-team__head {
		grid-column: 1 / -1;
	}
}

.lc-team__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

.lc-team__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
}

/* Between groups, not before the first one — the heading above the first group
   already has the module's own padding over it. */
.lc-team__group + .lc-team__group {
	margin-top: var(--lc-space-md);
}

/* Two classes, and it matters. `.lc-subheading.lc-subheading` in section 2 sets
   `margin: 0` on every subheading, which is also two classes — so written with
   one, the space below the rule never applied and the rule sat hard against the
   top of the photographs. */
.lc-team__group-title.lc-team__group-title {
	padding-bottom: var(--lc-space-xs);
	border-bottom: var(--lc-team-rule, 1px) solid;
	margin-bottom: var(--lc-space-md);
}

/* With no rule there is nothing for the padding to hold off, so the heading
   keeps only the gap. */
.lc-team--rule-none .lc-team__group-title.lc-team__group-title {
	padding-bottom: 0;
}

/* A rule the width of the words rather than the width of the section. On a
   right-aligned grid a full-width rule draws a line across a mostly empty row;
   under the heading alone it reads as an underline and stays attached to what
   it belongs to. */
.lc-team--rule-text .lc-team__group-title.lc-team__group-title {
	width: fit-content;
}

.lc-team--head-center.lc-team--rule-text .lc-team__group-title.lc-team__group-title {
	margin-inline: auto;
}

.lc-team--head-end.lc-team--rule-text .lc-team__group-title.lc-team__group-title {
	margin-inline-start: auto;
}

.lc-team__grid {
	/* Two column counts, deliberately. `--lc-team-columns` is the author's,
	   written as an inline style, which no stylesheet rule can override — an
	   inline declaration outranks a media query. `--lc-team-cols` is the count
	   actually in force, set only here, so the breakpoints below can step it
	   down. Everything that needs to know how wide a row is reads the second. */
	--lc-team-cols: var(--lc-team-columns, 3);
	--lc-team-gap: var(--lc-space-md);

	/* How many cells of the first row are empty, given the member count.
	   `mod(cols - mod(count, cols), cols)` rather than `cols - mod(count, cols)`
	   so a count that fills the row exactly gives 0 rather than `cols`, which
	   would indent a full grid by a whole row.

	   Recomputed at every breakpoint for free, because it is arithmetic over
	   `--lc-team-cols` rather than a number worked out in PHP. Browsers without
	   CSS `mod()` substitute an invalid value, the alignment rules below fall
	   back to `auto`, and the grid is left-aligned — which is the default. */
	--lc-team-empty: mod(
		var(--lc-team-cols) - mod(var(--lc-team-count, 0), var(--lc-team-cols)),
		var(--lc-team-cols)
	);

	display: grid;
	gap: var(--lc-team-gap);
	grid-template-columns: repeat(var(--lc-team-cols), minmax(0, 1fr));
}

/* Two steps down rather than straight to one column: a portrait grid at three
   or more across still reads at tablet width, it just needs fewer of them. */
@media (max-width: 980px) {
	.lc-team__grid {
		--lc-team-cols: 2;
	}
}

@media (max-width: 620px) {
	.lc-team__grid {
		--lc-team-cols: 1;
	}
}

/* Alignment of a row that does not fill.
   ---------------------------------------
   Fractional tracks eat all the free space, so `justify-content` has nothing to
   distribute and cannot push a short row anywhere. Moving the *first* card
   instead does it exactly: auto-placement carries every card after it along, so
   the short row is the top one and every row below it is full. That is what
   makes a stack of these modules read as one grid — a block of two, a block of
   three and a block of twenty all finish flush against the same right edge, and
   step in from the left by however many people the block is short.

   `:first-of-type` rather than `:first-child` because the heading, when it is
   set to sit beside the photographs, is a div in the same grid and comes first.
   In that case the heading is already occupying the empty run (see below) and
   this resolves to the same column the card would have taken anyway. */
.lc-team__grid--end > .lc-team__member:first-of-type {
	grid-column-start: calc(var(--lc-team-empty) + 1);
}

/* Half the empty run, rounded down, so an odd remainder leans left. Written as
   `(e - e mod 2) / 2` rather than with `round()`, to depend on one CSS maths
   function instead of two. */
.lc-team__grid--center > .lc-team__member:first-of-type {
	grid-column-start: calc(
		(var(--lc-team-empty) - mod(var(--lc-team-empty), 2)) / 2 + 1
	);
}

.lc-team__member {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* The shape is one custom property, so the photograph and the initials block
   that stands in for a missing one are always cropped identically — one member
   without a picture cannot knock the row out of alignment. */
.lc-team__photo {
	--lc-team-ratio: 1 / 1;

	position: relative;
	width: 100%;
}

.lc-team__photo--portrait {
	--lc-team-ratio: 4 / 5;
}

.lc-team__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--lc-team-ratio);
	object-fit: cover;
}

.lc-team__photo--circle img,
.lc-team__photo--circle.lc-team__photo--empty {
	border-radius: 50%;
}

.lc-team__photo--square img,
.lc-team__photo--portrait img,
.lc-team__photo--square.lc-team__photo--empty,
.lc-team__photo--portrait.lc-team__photo--empty {
	border-radius: 10px;
}

/* The brand silhouette, from the same file and the same custom property as the
   hero — replacing assets/svg/lc-heart-mask.svg re-masks these portraits too.
   It sits on the wrapper, so the initials placeholder takes the shape as well.
   It crops hard at the top: worth checking faces survive it before choosing it
   for a whole staff list. */
.lc-team__photo--heart {
	-webkit-mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Photography is black and white throughout the brand (p.30). A safety net for
   portraits that have not already been treated. */
.lc-team__photo--mono img {
	filter: grayscale(1);
}

.lc-team__photo--empty {
	aspect-ratio: var(--lc-team-ratio);
	display: grid;
	place-items: center;
	background-color: var(--lc-accent-light);
	color: var(--lc-black);

	/* The rounded shapes put their radius on this element, and the figure below
	   is a pseudo-element inside it, so it has to be clipped to the shape. The
	   heart is masked on the wrapper instead, which clips its contents already. */
	overflow: hidden;
}

/* The figure that stands in for a missing photograph.
   -------------------------------------------------
   A mask over `currentColor` rather than a picture, so the silhouette is the
   card's own ink at low strength on every canvas and there is no second colour
   to keep in step with the palette. `contain` and a bottom anchor mean the same
   file sits correctly in a square, in a 4:5 portrait and inside the heart:
   full height, centred, standing on the lower edge. */
.lc-team__photo--figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	opacity: 0.22;
	-webkit-mask-image: url("../svg/lc-person.svg");
	mask-image: url("../svg/lc-person.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
}

.lc-team__initials {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	color: var(--lc-black);
}

.lc-team__text {
	display: flex;
	flex-direction: column;
	align-items: var(--lc-team-text-items);
	gap: 0.3rem;
	text-align: var(--lc-team-text-align);
}

/* Divi's own `p { padding-bottom: 1em }`, which its `p:last-of-type` then takes
   back off the last one, would otherwise space this card by which of its fields
   happen to be filled in rather than by the gap above: a title with a note under
   it carries an em that the same title on the card beside it does not, and the
   last line of the two cards stops falling on the same line. Doubled class
   because `p:last-of-type` is a class-and-element too, and this has to win the
   cascade wherever the stylesheets end up in it. */
.lc-team__text.lc-team__text p {
	padding-bottom: 0;
}

.lc-team__name.lc-team__name {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.0625rem;
	line-height: 1.2;
	margin: 0;
}

/* The title is the Georgia italic run of the card, the same relationship the
   guide sets up between sans and serif in a headline (p.15). */
.lc-team__role {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.3;
	margin: 0;
}

/* A member who is away.
   --------------------
   Quiet on purpose: someone on parental leave is still on the team, and the card
   should read as a note against their name rather than as a warning. So it is the
   descriptor's small tracked sans at low contrast, and nothing else — the
   photograph is left exactly as it is. Fading it made a row of portraits uneven
   for a reason a reader cannot see, and read as absence rather than as a note.

   `.lc-team__member--away` is still on the card, so a site that wants a treatment
   of its own has something to hang it on. */
.lc-team__leave {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.6875rem;
	line-height: 1.3;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	opacity: 0.55;

	/* The same offset .lc-team__contact carries, because the note stands in the
	   same slot: it is what a card shows where the card beside it shows an
	   address, and the two want to sit on one line. */
	margin: 0.15rem 0 0;
}

.lc-team__bio {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0;
}

.lc-team__contact {
	display: flex;
	flex-direction: column;
	align-items: var(--lc-team-text-items);
	gap: 0.1rem;
	margin-top: 0.15rem;
}

/* Links take the canvas colour rather than Divi's link colour, and break rather
   than widen the card — a long address is the one string on a team card that
   cannot be shortened. */
.lc-team__link,
.lc-team__email,
.lc-team__phone {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: inherit;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.lc-team__name.lc-team__name .lc-team__link {
	font-size: inherit;
	font-weight: inherit;
}

.lc-team__link:hover,
.lc-team__link:focus-visible,
.lc-team__email:hover,
.lc-team__email:focus-visible,
.lc-team__phone:hover,
.lc-team__phone:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Builder only: shown where the query matches nobody, so an author is never
   left looking at an empty area wondering whether the module is broken. */
.lc-team__vb-note {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   13. Latest sermon — the split card, and the campus switcher
   The one module whose content comes from outside WordPress. Two shapes share
   these rules: a single campus renders one card, and "all campuses" renders the
   same card once per campus inside a radio-driven switcher.
   ------------------------------------------------------------------------- */

.lc-sermon {
	padding: var(--lc-space-lg) var(--lc-space-md);

	/* The filled state of a switcher pill. The brand permits four text/canvas
	   pairings and no others, so a pill cannot invent a colour: it swaps the
	   canvas and its text colour round, exactly as .lc-button--solid does. Two
	   rules here save one per canvas per pill position further down. */
	--lc-pill-on-bg: var(--lc-black);
	--lc-pill-on-fg: var(--lc-cream);
}

.lc-sermon.lc-canvas--black,
.lc-sermon.lc-canvas--deep {
	--lc-pill-on-bg: var(--lc-cream);
	--lc-pill-on-fg: var(--lc-black);
}

.lc-sermon__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
}

/* ---- The card ---- */

.lc-sermon__card {
	display: grid;
	gap: var(--lc-space-md);

	/* The artwork takes slightly more than half. A 16:9 still needs the width to
	   read as a video, and the detail column is short measure by design. */
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
}

.lc-sermon--media-right .lc-sermon__art {
	order: 2;
}

.lc-sermon--no-art .lc-sermon__card,
.lc-sermon__card--no-art {
	grid-template-columns: minmax(0, 1fr);
}

/* Below this the two columns are too narrow for either job — the video stops
   reading as a video and the summary runs to three words a line. */
@media (max-width: 860px) {
	.lc-sermon__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-sermon--media-right .lc-sermon__art {
		order: 0;
	}
}

/* ---- Artwork and player ---- */

/* The ratio is one custom property set per instance by the module, so the
   poster, the placeholder box and the player that replaces them are always the
   same shape — swapping in the iframe cannot shift the page. */
.lc-sermon__player,
.lc-sermon__poster {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: var(--lc-sermon-ratio, 16 / 9);
	overflow: hidden;

	/* Rounded or not is one setting, and the radius the brand rounds to is not
	   the author's to pick, so the module declares the property as 12px or 0
	   rather than as a length someone typed. */
	border-radius: var(--lc-sermon-art-radius, 12px);
	background-color: rgba(0, 0, 0, 0.08);
}

.lc-sermon__player .lc-sermon__poster {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.lc-sermon__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lc-sermon__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The play badge itself is the shared one — see "The play badge" in section 18,
   which styles `.lc-sermon__play` alongside `.lc-media__play`. A video is a
   video wherever it appears, and an author who has chosen an icon for one has
   chosen it for all of them. */

a.lc-sermon__poster:hover .lc-sermon__play,
a.lc-sermon__poster:focus-visible .lc-sermon__play {
	transform: translate(-50%, -50%) scale(1.08);
}

a.lc-sermon__poster:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- Detail column ---- */

.lc-sermon__detail {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.lc-sermon__series,
.lc-sermon__campus {
	margin: 0;
}

.lc-sermon__title.lc-sermon__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.1;
	margin: 0;
}

.lc-sermon__meta {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0;
	opacity: 0.85;
}

/* Separators are generated rather than typed, so a hidden speaker or an absent
   duration never leaves a dangling middot. */
.lc-sermon__meta-item + .lc-sermon__meta-item::before {
	content: "·";
	margin: 0 0.5em;
}

.lc-sermon__description {
	margin: 0;
	max-width: var(--lc-measure);
}

.lc-sermon__description p {
	margin: 0 0 0.7em;
}

.lc-sermon__description p:last-child {
	margin-bottom: 0;
}

/* Set in the serif italic, the same relationship the guide draws between sans
   and Georgia in a headline (p.15) — it is a citation, not body copy. */
.lc-sermon__scripture {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.4;
	margin: 0;
}

/* Scoped to the module, and the marker killed twice over, for the same reason
   as the Events badges: Divi's `.et-l--body ul` (and `.entry-content ul`, and
   three more) sets `list-style-type: disc` with a 1em indent and 23px of bottom
   padding, at a specificity a bare class does not beat. Unscoped, the tags
   arrive bulleted and indented out of line with the rest of the card. */
.lc-sermon .lc-sermon__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0.2rem 0 0;
	padding: 0;
}

.lc-sermon .lc-sermon__topic {
	display: block;
	list-style: none;
}

.lc-sermon .lc-sermon__topic::marker {
	content: "";
}

.lc-sermon__topic {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.42rem 0.7rem;
	border: 1px solid;
	border-radius: 999px;
	opacity: 0.75;
}

/* ---- Audio ---- */

.lc-sermon__listen {
	margin-top: 0.3rem;
}

.lc-sermon__listen-label {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	margin: 0 0 0.45rem;
	opacity: 0.75;
}

/* The browser's own player, which cannot be restyled beyond its box. It is here
   because preload="none" makes it free to include — it draws controls and
   fetches nothing until someone presses play. */
.lc-sermon__audio {
	display: block;
	width: 100%;
	max-width: 26rem;
}

.lc-sermon__actions {
	margin-top: 0.5rem;
}

/* ---- The campus switcher ---- */

.lc-sermon__shared {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.lc-sermon__tabs {
	/* The radios are positioned out of the flow, so the wrapper has to contain
	   them. */
	position: relative;
}

/* Visually hidden but still focusable and still a radio group, which is what
   gives the switcher arrow-key navigation and a screen-reader announcement
   without a line of JavaScript. display:none would take all three away. */
.lc-sermon__radio,
.lc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lc-sermon__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--lc-space-md);
}

.lc-sermon__pill {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.7rem 1.15rem;
	border: 1px solid;

	/* Rounded or square, set per instance. Square is the shape .lc-button uses
	   across the family of sites; the tags below stay rounded either way,
	   because they are labels and these are controls. */
	border-radius: var(--lc-sermon-pill-radius, 999px);
	cursor: pointer;
	color: inherit;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lc-sermon__panel {
	/* Overrides .lc-sermon__card's own display, so nothing shows until a rule
	   below turns one panel on. Equal specificity, so it must stay after that
	   rule in the file. If this stylesheet fails to load entirely, every panel
	   is visible — all the content, badly laid out, rather than none of it. */
	display: none;
}

/*
 * The switcher itself.
 *
 * Per-instance ids cannot appear in a shared stylesheet, which rules out
 * `:has(#id:checked)`. So the radios sit as siblings ahead of the pills and the
 * panels, and position does the matching: the nth radio, when checked, fills the
 * nth pill and shows the nth panel. That is why there is a fixed ceiling on how
 * many campuses render — LC_Sermons::MAX_CAMPUSES, and one rule per position
 * here. Six is double what the church currently runs.
 */
.lc-sermon__radio:nth-of-type(1):checked ~ .lc-sermon__panels .lc-sermon__panel:nth-child(1),
.lc-sermon__radio:nth-of-type(2):checked ~ .lc-sermon__panels .lc-sermon__panel:nth-child(2),
.lc-sermon__radio:nth-of-type(3):checked ~ .lc-sermon__panels .lc-sermon__panel:nth-child(3),
.lc-sermon__radio:nth-of-type(4):checked ~ .lc-sermon__panels .lc-sermon__panel:nth-child(4),
.lc-sermon__radio:nth-of-type(5):checked ~ .lc-sermon__panels .lc-sermon__panel:nth-child(5),
.lc-sermon__radio:nth-of-type(6):checked ~ .lc-sermon__panels .lc-sermon__panel:nth-child(6) {
	display: grid;
}

/*
 * The filled pill.
 *
 * `:is()` because the row lives in one of two places: a sibling of the radios
 * when it sits above or below the card, and inside the visible panel when it
 * sits at the top of the text column. Both are reached as a descendant of a
 * following sibling, so one rule per position still does it — and since only
 * one panel is ever displayed, the copies in the hidden ones cannot collide.
 */
.lc-sermon__radio:nth-of-type(1):checked ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(1),
.lc-sermon__radio:nth-of-type(2):checked ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(2),
.lc-sermon__radio:nth-of-type(3):checked ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(3),
.lc-sermon__radio:nth-of-type(4):checked ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(4),
.lc-sermon__radio:nth-of-type(5):checked ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(5),
.lc-sermon__radio:nth-of-type(6):checked ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(6) {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

/* The focus ring belongs on the label, because the radio it describes is the
   one thing on screen nobody can see. */
.lc-sermon__radio:nth-of-type(1):focus-visible ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(1),
.lc-sermon__radio:nth-of-type(2):focus-visible ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(2),
.lc-sermon__radio:nth-of-type(3):focus-visible ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(3),
.lc-sermon__radio:nth-of-type(4):focus-visible ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(4),
.lc-sermon__radio:nth-of-type(5):focus-visible ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(5),
.lc-sermon__radio:nth-of-type(6):focus-visible ~ :is(.lc-sermon__pills, .lc-sermon__panels) .lc-sermon__pill:nth-child(6) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * Where the buttons sit.
 *
 * The DOM order is fixed — radios, then pills, then panels — because that is what
 * the sibling selectors above depend on, so position is a layout question rather
 * than a markup one. Both alternatives work on .lc-sermon__tabs itself: the
 * radios are taken out of flow, so it is free to be a flex column or a grid
 * without them becoming items in it.
 */

/* Below the card. The margin moves with the row rather than staying under it. */
.lc-sermon--switcher-below .lc-sermon__tabs {
	display: flex;
	flex-direction: column;
}

.lc-sermon--switcher-below .lc-sermon__pills {
	order: 2;
	margin: var(--lc-space-md) 0 0;
}

/* At the top of the text column: the row is rendered inside the card, so there
   is nothing to place — the card's own grid has already put it beside the
   artwork. The detail column supplies the rhythm with its gap, so the row's own
   bottom margin comes off, and a little is put back to set the buttons apart
   from the campus name directly under them. */
.lc-sermon__detail > .lc-sermon__pills {
	margin-bottom: 0.25rem;
}

/* Builder only: shown where the feed has nothing, so an author is never left
   looking at an empty area wondering whether the module is broken. */
.lc-sermon__vb-note {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

@media (max-width: 720px) {
	.lc-sermon {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   14. Events — the upcoming-events grid, and the campus filter
   Cards are read from Church Center (LC_Events). The card is one link to the
   event's own page there, so nothing in here is separately interactive.
   ------------------------------------------------------------------------- */

.lc-events {
	padding: var(--lc-space-lg) var(--lc-space-md);

	/* The filled state of a filter pill, on the same two rules as the sermon
	   switcher: a pill swaps the canvas and its text colour round rather than
	   inventing a colour outside the four approved pairings. */
	--lc-pill-on-bg: var(--lc-black);
	--lc-pill-on-fg: var(--lc-cream);
}

.lc-events.lc-canvas--black,
.lc-events.lc-canvas--deep {
	--lc-pill-on-bg: var(--lc-cream);
	--lc-pill-on-fg: var(--lc-black);
}

.lc-events__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

/* The intro sits under the heading as one line of body copy, so it takes the
   gap of a paragraph rather than the section gap the grid needs. */
.lc-events__inner > .lc-intro {
	margin: 0;
}

.lc-events__inner > .lc-events__grid,
.lc-events__inner > .lc-events__filters {
	margin-top: var(--lc-space-md);
}

/* ---- The grid ---- */

.lc-events__grid {
	display: grid;
	gap: var(--lc-space-sm);
	grid-template-columns: repeat(var(--lc-events-columns, 3), minmax(0, 1fr));
}

/* Two steps down rather than straight to one column, the same ladder the team
   grid uses: a three- or four-up grid of portrait cards is still readable at
   two, and only becomes unreadable below a phone's width. */
@media (max-width: 1024px) {
	.lc-events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.lc-events__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- The card ---- */

.lc-events__card {
	display: flex;
	flex-direction: column;
	/* The hairline below is drawn inside the track, not added to it. */
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--lc-cream);
	color: var(--lc-black);
	text-decoration: none;
}

/* On a cream canvas a cream card would be invisible, so there the card takes
   the light accent instead — the same relationship the schedule cards use. */
.lc-events.lc-canvas--cream .lc-events__card {
	background-color: var(--lc-accent-light);
}

/* On the light-accent canvas the pairing has to invert: the page is already that
   accent, so a card carrying it would disappear outright — body and all, not
   just its picture. Cream is the other half of the same pair. */
.lc-events.lc-canvas--light .lc-events__card {
	background-color: var(--lc-cream);
}

/* Edge definition where the card and the page are both light.
   Church Center supplies the artwork and a lot of it is set on cream, so on a
   cream canvas the picture runs straight into the page and the card loses its
   top edge even though the body below it is tinted. A hairline is how this brand
   separates things everywhere else — see .lc-rule — and it is the answer that
   holds on every canvas. A drop shadow would only read on the two light ones,
   and the system carries no decorative shadow at all: the single box-shadow in
   this stylesheet is on the sermon play badge, where it is doing a legibility
   job over a photograph whose colours are not knowable.
   On the black and deep canvases no line is needed: the card is cream against a
   dark page and its edge is already the strongest one on screen. */
.lc-events.lc-canvas--cream .lc-events__card,
.lc-events.lc-canvas--light .lc-events__card {
	border: 1px solid rgba(0, 0, 0, 0.14);
}

a.lc-events__card {
	transition: transform 0.18s ease;
}

a.lc-events__card:hover,
a.lc-events__card:focus-visible {
	transform: translateY(-2px);
}

a.lc-events__card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- Artwork ---- */

.lc-events__media {
	position: relative;
	aspect-ratio: var(--lc-events-ratio, 16 / 9);
	overflow: hidden;
	background-color: var(--lc-accent-mid);
}

.lc-events__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Where Church Center has no artwork. The initials keep the card the same
   height as the ones beside it, so one missing picture cannot knock a row out
   of alignment. */
.lc-events__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lc-events__initials {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	color: var(--lc-black);
}

/* ---- Card body ---- */

.lc-events__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;

	/* Pushes the badges to the bottom edge, so a row of cards with titles of
	   different lengths still lines its badges up. */
	flex: 1 1 auto;
}

.lc-events__title.lc-events__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.0625rem;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}

.lc-events__when {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0;
}

/* Generated rather than typed, so switching the date, the time or the
   recurrence off cannot leave a stray divider behind. */
.lc-events__sep {
	padding: 0 0.4em;
	opacity: 0.45;
}

.lc-events__place {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	margin: 0;
	opacity: 0.7;
}

.lc-events__summary {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0.15rem 0 0;
}

/* ---- Badges ---- */

/* Scoped to the module, and the marker killed twice over, because Divi styles
   lists in content areas — `.entry-content ul` sets a disc and a left padding,
   at a specificity a bare class does not beat. A badge that arrived indented
   behind a bullet is what this prevents. `display: block` is the belt to
   `list-style`'s braces: with no list-item box there is no marker to style. */
.lc-events .lc-events__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: auto 0 0;
	padding: 0.5rem 0 0;
}

.lc-events .lc-events__badge {
	display: block;
	list-style: none;
}

.lc-events .lc-events__badge::marker {
	content: "";
}

.lc-events__badge {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.45rem 0.6rem;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.07);
}

/* The star is drawn by the stylesheet rather than typed into the markup, so the
   badge's text stays a plain translatable string and a screen reader is not made
   to announce a decorative glyph. */
.lc-events__badge--featured::before {
	content: "\2605";
	margin-right: 0.4em;
}

/* ---- The campus filter ---- */

.lc-events__filters {
	/* The radios are positioned out of the flow, so the wrapper has to contain
	   them. */
	position: relative;
}

/* Visually hidden but still focusable and still a radio group, which is what
   gives the filter arrow-key navigation and a screen-reader announcement
   without a line of JavaScript. display:none would take all three away. */
.lc-events__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lc-events__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--lc-space-md);
}

.lc-events__pill {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.7rem 1.15rem;
	border: 1px solid;
	border-radius: 999px;
	cursor: pointer;
	color: inherit;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/*
 * The filter itself.
 *
 * Per-instance ids cannot appear in a shared stylesheet, which rules out
 * `:has(#id:checked)`. So the radios sit as siblings ahead of the pills and the
 * grid, and position does the matching: the nth radio, when checked, fills the
 * nth pill and hides every card that does not carry the nth campus's class.
 * The first radio is "all campuses" and hides nothing, so the campus positions
 * start at two — and that is why there is a fixed ceiling on how many campuses
 * are offered: LC_Events::MAX_FILTERS, and one rule per position here.
 *
 * If this stylesheet fails to load, every card is visible and the pills are
 * plain text — the unfiltered list, which is the right thing to fall back to.
 */
/* Scoped to a module the script has not claimed. Where lc-events.js is running
   it owns filtering as well as paging — a page is "the next six of whatever the
   filter left", and CSS cannot count — so these rules would fight it. */
.lc-events:not(.lc-events--js) .lc-events__radio:nth-of-type(2):checked ~ .lc-events__grid > .lc-events__card:not(.lc-events__card--c1),
.lc-events:not(.lc-events--js) .lc-events__radio:nth-of-type(3):checked ~ .lc-events__grid > .lc-events__card:not(.lc-events__card--c2),
.lc-events:not(.lc-events--js) .lc-events__radio:nth-of-type(4):checked ~ .lc-events__grid > .lc-events__card:not(.lc-events__card--c3),
.lc-events:not(.lc-events--js) .lc-events__radio:nth-of-type(5):checked ~ .lc-events__grid > .lc-events__card:not(.lc-events__card--c4),
.lc-events:not(.lc-events--js) .lc-events__radio:nth-of-type(6):checked ~ .lc-events__grid > .lc-events__card:not(.lc-events__card--c5),
.lc-events:not(.lc-events--js) .lc-events__radio:nth-of-type(7):checked ~ .lc-events__grid > .lc-events__card:not(.lc-events__card--c6) {
	display: none;
}

.lc-events__radio:nth-of-type(1):checked ~ .lc-events__pills .lc-events__pill:nth-child(1),
.lc-events__radio:nth-of-type(2):checked ~ .lc-events__pills .lc-events__pill:nth-child(2),
.lc-events__radio:nth-of-type(3):checked ~ .lc-events__pills .lc-events__pill:nth-child(3),
.lc-events__radio:nth-of-type(4):checked ~ .lc-events__pills .lc-events__pill:nth-child(4),
.lc-events__radio:nth-of-type(5):checked ~ .lc-events__pills .lc-events__pill:nth-child(5),
.lc-events__radio:nth-of-type(6):checked ~ .lc-events__pills .lc-events__pill:nth-child(6),
.lc-events__radio:nth-of-type(7):checked ~ .lc-events__pills .lc-events__pill:nth-child(7) {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

/* The focus ring belongs on the label, because the radio it describes is the
   one thing on screen nobody can see. */
.lc-events__radio:nth-of-type(1):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(1),
.lc-events__radio:nth-of-type(2):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(2),
.lc-events__radio:nth-of-type(3):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(3),
.lc-events__radio:nth-of-type(4):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(4),
.lc-events__radio:nth-of-type(5):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(5),
.lc-events__radio:nth-of-type(6):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(6),
.lc-events__radio:nth-of-type(7):focus-visible ~ .lc-events__pills .lc-events__pill:nth-child(7) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- Pagination ---- */

/*
 * The pager is drawn by PHP but hidden until lc-events.js adds `lc-events--js`
 * to the module. A pager that cannot page is worse than no pager, so with the
 * script blocked, missing or broken there is no pager and every event in the
 * total prints instead — a long page rather than a broken one.
 */
.lc-events__pager {
	display: none;
}

/* The second selector is the Visual Builder's: the preview has no script to
   claim the module, but an author still has to see that the grid pages. */
.lc-events--js .lc-events__pager,
.lc-events__pager--preview {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: var(--lc-space-md);
}

/*
 * `hidden` is how the script takes a card or a page button off screen, because
 * it removes the element from the accessibility tree as well. These rules are
 * required, not belt-and-braces: `.lc-events__card` sets a display of its own,
 * and author CSS beats the browser's default styling for `[hidden]`.
 */
.lc-events__card[hidden],
.lc-events__page[hidden],
.lc-events--js .lc-events__pager[hidden] {
	display: none;
}

.lc-events__page {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	min-width: 2.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid;
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* The page you are on, filled the same way a chosen campus pill is — the brand
   permits four text/canvas pairings and a control cannot invent a colour. */
.lc-events__page[aria-current="page"] {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

.lc-events__page:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- Footer and empty state ---- */

.lc-events__actions {
	margin-top: var(--lc-space-md);
}

.lc-events__empty {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 1rem;
	line-height: var(--lc-leading-body);
	margin: var(--lc-space-sm) 0 0;
}

/* Builder only: shown where the feed has nothing, so an author is never left
   looking at an empty area wondering whether the module is broken. */
.lc-events__vb-note {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

@media (max-width: 720px) {
	.lc-events {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   15. Accordions
   Copy and a photograph one side, a stack of disclosure panels the other.
   The panels are real <details> elements: no JavaScript, keyboard operable and
   announced as expanded or collapsed for nothing, and a page whose scripts fail
   still opens them.
   ------------------------------------------------------------------------- */

.lc-accordions {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

/* `width: 100%` is what stops the section sliding sideways as panels open.

   Divi 5 gives every module that declares a layout option group the class
   `et_flex_module`, which makes the module root `display: flex`. That turns this
   wrapper from a block into a flex item, and for a flex item `margin: 0 auto` is
   not "centre me" — auto margins in the cross axis beat `align-self: stretch`,
   so the item sizes to its content and then centres. The width then follows
   whatever is open: a closed <details> contributes almost nothing, so the whole
   section snapped between its content width and its column width every time a
   panel was toggled, taking the copy, the rule and the accordions with it.
   Stating the width makes the item fill its column the way a block would, and
   max-width and the auto margins go back to doing what they say. */
.lc-accordions__inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--lc-accordions-columns, minmax(0, 1fr) minmax(0, 1fr));
	gap: var(--lc-space-lg);
	/* Both columns take the height of the taller one, which is what lets the rule
	   between them — drawn on the panel — run the full depth of the section
	   rather than stopping under the last accordion. */
	align-items: stretch;
}

/* Swapping the sides moves the panel rather than re-ordering the markup, so the
   copy stays first in the document and in the reading order. */
.lc-accordions--panel-left .lc-accordions__panel {
	order: -1;
}

.lc-accordions__copy {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
	align-items: flex-start;
}

/* The lines of copy sit closer together than the photograph does to them. */
.lc-accordions__text {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

/* `isolation` keeps the tint's blend below contained to this element rather
   than mixing with the canvas behind it. */
.lc-accordions__media {
	position: relative;
	width: 100%;
	isolation: isolate;
}

.lc-accordions__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--lc-media-ratio, auto);
	object-fit: cover;
}

/* The same brand silhouette the hero uses, referenced rather than emitted, so
   replacing assets/svg/lc-heart-mask.svg re-masks these too. */
.lc-accordions__media--masked {
	-webkit-mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Photography is black and white throughout the brand (p.30). */
.lc-accordions__media--mono img {
	filter: grayscale(1);
}

/* Brand colour overlay (p.31-34): luminosity from the photograph, hue from the
   tint, which is a duotone rather than a wash. */
.lc-accordions__media--tinted {
	background-color: var(--lc-media-tint);
}

.lc-accordions__media--tinted img {
	mix-blend-mode: luminosity;
}

.lc-accordions__panel {
	display: flex;
	flex-direction: column;
}

/* Long-hand rather than the `border-inline-start` shorthand: the shorthand
   resets border-color to currentColor, and this rule comes after the canvas
   ones, so it would quietly undo .lc-rule and paint the hairline in full
   strength text colour. */
.lc-accordions--divided .lc-accordions__panel {
	border-inline-start-width: 1px;
	border-inline-start-style: solid;
	padding-inline-start: var(--lc-space-lg);
}

.lc-accordions--divided.lc-accordions--panel-left .lc-accordions__panel {
	border-inline-start-width: 0;
	border-inline-end-width: 1px;
	border-inline-end-style: solid;
	padding-inline-start: 0;
	padding-inline-end: var(--lc-space-lg);
}

.lc-accordions__item {
	display: block;
}

.lc-accordion {
	border-block-end-width: 1px;
	border-block-end-style: solid;
}

/* The child module's wrapper carries the list position; the hairlines are on
   the panel inside it, so the top one has to be addressed through it. */
.lc-accordions__item:first-child .lc-accordion {
	border-block-start-width: 1px;
	border-block-start-style: solid;
}

.lc-accordion__summary {
	display: flex;
	align-items: center;
	gap: var(--lc-space-sm);
	position: relative;
	padding: 1.15rem 2.5rem 1.15rem 0;
	cursor: pointer;
	/* Both are needed: the pseudo-element is WebKit's disclosure triangle and
	   `list-style` is everybody else's. */
	list-style: none;
}

.lc-accordion__summary::-webkit-details-marker {
	display: none;
}

.lc-accordion__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-accordion__title.lc-accordion__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.2;
	margin: 0;
}

/* The marker is two hairlines drawn in the current text colour, so it follows
   the canvas and there is no icon font, no SVG and nothing for a screen reader
   to read out — <summary> already announces its own state. Closed they cross as
   a plus; open, the upright one collapses and leaves a minus. */
.lc-accordion__summary::before,
.lc-accordion__summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	width: 0.85rem;
	height: 1px;
	background-color: currentColor;
	transition: transform 0.2s ease;
}

.lc-accordion__summary::before {
	transform: translateY(-50%);
}

.lc-accordion__summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.lc-accordion[open] .lc-accordion__summary::after {
	transform: translateY(-50%) rotate(90deg) scaleX(0);
}

.lc-accordions--icon-chevron .lc-accordion__summary::before {
	content: none;
}

.lc-accordions--icon-chevron .lc-accordion__summary::after {
	width: 0.5rem;
	height: 0.5rem;
	inset-inline-end: 0.2rem;
	background-color: transparent;
	border-inline-end: 1px solid currentColor;
	border-block-end: 1px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
}

.lc-accordions--icon-chevron .lc-accordion[open] .lc-accordion__summary::after {
	transform: translateY(-25%) rotate(225deg);
}

.lc-accordions--icon-none .lc-accordion__summary {
	padding-inline-end: 0;
}

.lc-accordions--icon-none .lc-accordion__summary::before,
.lc-accordions--icon-none .lc-accordion__summary::after {
	content: none;
}

.lc-accordion__panel {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	align-items: flex-start;
	padding-block-end: var(--lc-space-md);
}

/* The panel is a column of left-aligned pieces, so the media block has to be
   told to fill it: .lc-media is a fixed-ratio box with no intrinsic width, and
   left to itself in a flex column it collapses to nothing. The block itself —
   the poster, the play badge, the player that replaces them — is section 18's,
   shared with LC Resources; the shape comes from --lc-media-ratio, which the
   child module declares per accordion. */
.lc-accordion__media {
	align-self: stretch;
	width: 100%;
}

/* Button layout, per accordion. The row is the same markup either way — a
   `.lc-buttons` flex row, which already wraps when the panel is too narrow to
   hold the labels side by side. Stacking is turning that row into a column, so
   each button takes its own line whatever the room.

   Deliberately not the full-width treatment the cards, resources and family
   modules give their stacked buttons: those sit in a grid cell whose width is
   the point, where here the panel is left-aligned copy and a button stretched
   across half a section reads as a banner rather than a button. `flex-start`
   keeps each one as wide as its label, which is what .lc-button is everywhere
   else. Works for the anchor the front end prints and the span the builder does
   alike. */
.lc-accordion--buttons-stacked .lc-buttons {
	flex-direction: column;
	align-items: flex-start;
}

/* Opening and closing a <details> is a jump unless the browser can interpolate
   to `auto`. Where it can, the panel slides; where it cannot, the @supports
   block never applies and the panel simply appears, which is the pre-2024
   behaviour and perfectly usable. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	.lc-accordion {
		interpolate-size: allow-keywords;
	}

	.lc-accordion::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
	}

	.lc-accordion[open]::details-content {
		block-size: auto;
	}
}

/* Opening a panel makes the document taller, and on any browser whose scrollbar
   takes real width — Windows, Linux, a Mac set to show scroll bars always — a
   page that fitted the viewport with everything closed acquires one the moment
   it does not. The layout then loses the scrollbar's width: the two columns, the
   rule between them and every line of type in the section shift and resize
   sideways, and shift back when the panel closes again. Reserving the gutter up
   front means the width never changes, so the only thing that moves is the
   panel. Scoped with :has() so pages without a panel that grows are left alone,
   and stated twice rather than as one :has(a, b) because :has() is not
   forgiving — a selector it cannot parse takes the whole rule with it. The
   giving calculator's disclosure grows the page the same way, so it is here
   too. */
html:has(.lc-accordion) {
	scrollbar-gutter: stable;
}

html:has(.lc-giving-calc__disclosure) {
	scrollbar-gutter: stable;
}

@media (max-width: 900px) {
	.lc-accordions__inner {
		grid-template-columns: 1fr;
		gap: var(--lc-space-md);
	}

	/* Copy leads on small screens regardless of the desktop arrangement. */
	.lc-accordions--panel-left .lc-accordions__panel {
		order: 0;
	}

	/* A rule between columns that are no longer side by side is just a line
	   across the page. */
	.lc-accordions--divided .lc-accordions__panel,
	.lc-accordions--divided.lc-accordions--panel-left .lc-accordions__panel {
		border-inline-start-width: 0;
		border-inline-end-width: 0;
		padding-inline: 0;
	}
}

/* ---------------------------------------------------------------------------
   16. Cards — a row of columns, each a title, a blurb and a button
   The cards are equal height and the button is pushed to the foot of each, so
   the row of buttons lines up however long the blurbs above them run.
   ------------------------------------------------------------------------- */

.lc-cards {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-cards__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lc-cards__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	margin-bottom: var(--lc-space-lg);
}

.lc-cards--centre .lc-cards__head {
	align-items: center;
	text-align: center;
}

.lc-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-cards-columns, 3), minmax(0, 1fr));
	gap: var(--lc-space-md);
	/* Every cell takes the height of the tallest, which is what lets each card
	   push its button to the foot and still land on one line across the row. */
	align-items: stretch;
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   card — is the grid item. */
.lc-cards__cell {
	display: flex;
}

.lc-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	min-width: 0;
}

.lc-cards--centre .lc-card {
	align-items: center;
	text-align: center;
}

.lc-cards--left .lc-card {
	align-items: flex-start;
	text-align: left;
}

.lc-card__title.lc-card__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.125rem;
	line-height: 1.2;
	margin: 0;
}

/* `auto` is the whole mechanism: whatever space the blurb leaves goes above the
   button rather than below it. */
.lc-card__buttons {
	margin-top: auto;
	padding-top: var(--lc-space-sm);
	width: 100%;
}

.lc-cards--centre .lc-card__buttons {
	justify-content: center;
}

/* Full-width buttons grow inside .lc-buttons, which is a flex row — this works
   for the anchor the front end prints and the span the builder does alike.

   The 100% basis is what stacks a card carrying two or three of them: the row
   wraps, and a button that has to be the full width of the card can only be one
   per line. Three full-width buttons side by side in a third of the grid would
   be three unreadable slivers, and the stack is how the reference layout sets a
   card offering a link per campus. */
.lc-cards--buttons-full .lc-card__buttons > .lc-button {
	flex: 1 1 100%;
	padding-inline: 1rem;
	text-align: center;
}

/* Left as a wrapping row: `auto` means as wide as the label, so two short
   labels sit beside each other and a long one takes its own line. */
.lc-cards--buttons-auto .lc-card__buttons {
	width: auto;
}

/* The ministry's own accounts, under the buttons.

   `margin-top: auto` for the same reason the buttons have it — a card carrying
   accounts and no buttons still wants them at the foot, so the rows line up
   across the grid however unevenly the blurbs above them run. Where there are
   buttons they have already claimed the free space, and a second auto margin
   here would split it between the two and leave the buttons floating in the
   middle of the card; so the row directly after a button block gives it up. */
.lc-cards .lc-card__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: auto 0 0;
	padding: var(--lc-space-sm) 0 0;
	list-style: none;
	width: 100%;
}

.lc-cards .lc-card__buttons + .lc-card__social {
	margin-top: 0;
}

.lc-cards--centre .lc-card__social {
	justify-content: center;
}

.lc-cards .lc-card__social-item {
	margin: 0;
	list-style: none;
}

/* Inline SVG taking the canvas text colour, as in the menu — so the row is
   inside the palette on all four canvases, and on a tile, without a rule per
   pairing. */
.lc-card__social-link {
	display: block;
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

a.lc-card__social-link {
	color: inherit;
	text-decoration: none;
}

.lc-card__social-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

@media (hover: hover) {
	a.lc-card__social-link:hover {
		opacity: 1;
		transform: translateY(-2px);
	}
}

a.lc-card__social-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* The hairline frame. Written long-hand rather than as the `border` shorthand
   so the colour `.lc-rule` sets from the canvas survives. */
.lc-cards--ruled .lc-card {
	border-width: 1px;
	border-style: solid;
	padding: var(--lc-space-md) var(--lc-space-sm);
}

.lc-cards--tile .lc-card {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	padding: var(--lc-space-md) var(--lc-space-sm);
}

/* A tile is light whatever the canvas behind it, so its filled button keeps the
   black-on-cream pairing rather than the canvas's inverted one. */
.lc-cards--tile .lc-card .lc-button--solid {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

/* One column is a single card rather than a row, so it is held to the measure
   body copy is held to everywhere else: left at the full 1180px it would be a
   sentence and a page-wide button bar. It sits where the section's alignment
   puts it — centred under a centred heading, at the left edge under a left one. */
.lc-cards--one .lc-cards__grid {
	max-width: var(--lc-measure);
}

.lc-cards--one.lc-cards--centre .lc-cards__grid {
	margin-inline: auto;
}

/* Two steps down. Four columns of a sentence each are unreadable long before
   the viewport is narrow enough to want one column. */
@media (max-width: 980px) {
	.lc-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Nothing to step down from — a single card stays a single card. */
	.lc-cards--one .lc-cards__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.lc-cards__grid {
		grid-template-columns: 1fr;
	}

	.lc-cards {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   17. Giving — the section, its cards, and the processing-fee calculator
   The cards are the LC Cards grid with more in them: a telephone extension, an
   address to copy, two app stores. Equal height, buttons on one line across the
   row, same as everywhere else.
   ------------------------------------------------------------------------- */

.lc-giving {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-giving__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-lg);
}

.lc-giving__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	align-items: flex-start;
}

.lc-giving--centre .lc-giving__head {
	align-items: center;
	text-align: center;
}

/* Copy set to a comfortable line length, centred under a centred heading. */
.lc-giving__intro {
	max-width: var(--lc-measure);
}

.lc-giving--centre .lc-giving__intro {
	margin-inline: auto;
}

.lc-giving__actions {
	margin-top: var(--lc-space-xs);
}

.lc-giving--centre .lc-giving__actions {
	justify-content: center;
}

/* Lead size. On a giving page the way in is not one call to action among
   several — it is what the page is for, and everything else on it is an
   alternative to it. So it is offered a size of its own rather than a colour of
   its own: the family has one button shape, and the honest way to say "this
   one" is to make it bigger than everything around it, on whatever canvas and
   in whichever accent the site happens to use.

   The first button only, deliberately. "Give now" beside "Set up a standing
   order" at the same size is two equal choices, and they are not equal — the
   second is what somebody does having already decided. Sized apart, the pair
   says which one to press. Where only the second button is filled in it is the
   first one on the page, and it takes the size, which is the right answer as
   well: whatever is there alone is the way in.

   Set in `em` on the anchor, so the padding grows with the label and the button
   keeps its proportions at every step of the clamp. */
.lc-giving--lead .lc-giving__actions > .lc-button:first-child {
	font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
	padding: 1.1em 3em;
}

/* The one thing donors have to be told, set apart between the invitation and
   the cards. Hairlines above and below rather than a fill, so it reads as an
   aside and not as another card. `.lc-rule` travels with the class from the
   module metadata, which is what gives the border its per-canvas colour. */
.lc-giving__notice {
	border-block-width: 1px 1px;
	border-block-style: solid;
	padding-block: var(--lc-space-md);
	max-width: var(--lc-measure);
}

.lc-giving--centre .lc-giving__notice {
	margin-inline: auto;
	text-align: center;
}

.lc-giving__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-giving-columns, 3), minmax(0, 1fr));
	gap: var(--lc-space-md);
	/* Every cell takes the height of the tallest, which is what lets each card
	   push its button to the foot and still land on one line across the row. */
	align-items: stretch;
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   card — is the grid item. */
.lc-giving__cell {
	display: flex;
}

.lc-giving__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	min-width: 0;
}

.lc-giving--centre .lc-giving__card {
	align-items: center;
	text-align: center;
}

.lc-giving--left .lc-giving__card {
	align-items: flex-start;
	text-align: left;
}

.lc-giving__card-title.lc-giving__card-title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.125rem;
	line-height: 1.2;
	margin: 0;
}

/* Long-hand rather than the `border` shorthand, so the colour `.lc-rule` sets
   from the canvas survives. */
.lc-giving--ruled .lc-giving__card {
	border-width: 1px;
	border-style: solid;
	padding: var(--lc-space-md) var(--lc-space-sm);
}

.lc-giving--tile .lc-giving__card {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	padding: var(--lc-space-md) var(--lc-space-sm);
}

/* A tile is light whatever the canvas behind it, so its filled button keeps the
   black-on-cream pairing rather than the canvas's inverted one. */
.lc-giving--tile .lc-giving__card .lc-button--solid {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

/* --- What a card can hold besides a button -------------------------------- */

.lc-giving__contact {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	align-items: inherit;
	margin: var(--lc-space-xs) 0 0;
}

.lc-giving__extension {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
}

.lc-giving__extension-label {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
}

/* The extension is the thing somebody has to read off the screen while holding
   a telephone, so it is set at display size rather than as body copy. */
.lc-giving__extension-number {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: var(--lc-leading-display);
}

.lc-giving__phone,
.lc-giving__email {
	font-family: var(--lc-font-sans);
	font-size: 1rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	margin: 0;
}

.lc-giving__email-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: inherit;
	gap: var(--lc-space-xs);
	margin: 0;
}

/* Small, quiet, and printed hidden — lc-giving.js reveals it, so a visitor
   without the script is never offered a button that cannot copy anything. */
.lc-giving__copy {
	display: inline-flex;
	align-items: center;
	background-color: transparent;
	color: inherit;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.4em 0.9em;
	border-width: 1px;
	border-style: solid;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Author CSS beats the browser's default for [hidden], and both of these set a
   display of their own, so each has to say it again. */
.lc-giving__copy[hidden] {
	display: none;
}

.lc-giving__apps {
	margin-top: var(--lc-space-xs);
}

.lc-giving--centre .lc-giving__apps,
.lc-giving--centre .lc-giving__card-buttons {
	justify-content: center;
}

/* `auto` is the whole mechanism: whatever space the card leaves goes above the
   button rather than below it. */
.lc-giving__card-buttons {
	margin-top: auto;
	padding-top: var(--lc-space-sm);
	width: 100%;
}

.lc-giving--buttons-full .lc-giving__card-buttons > .lc-button {
	flex: 1;
	padding-inline: 1rem;
	text-align: center;
}

.lc-giving--buttons-auto .lc-giving__card-buttons {
	width: auto;
}

/* The charity number and the receipting line. Small, and never the width of
   the page. */
.lc-giving__footnote {
	font-family: var(--lc-font-sans);
	font-size: 0.8125rem;
	line-height: var(--lc-leading-body);
	max-width: var(--lc-measure);
	opacity: 0.75;
}

.lc-giving--centre .lc-giving__footnote {
	margin-inline: auto;
	text-align: center;
}

/* --- The calculator ------------------------------------------------------- */

.lc-giving-calc {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-giving-calc__inner {
	max-width: 760px;
	margin: 0 auto;
}

/* A real <details>, so the same hairline treatment as an accordion. */
.lc-giving-calc__disclosure {
	border-block-width: 1px 1px;
	border-block-style: solid;
}

.lc-giving-calc__summary {
	display: flex;
	align-items: center;
	gap: var(--lc-space-sm);
	position: relative;
	padding: 1.15rem 2.5rem 1.15rem 0;
	cursor: pointer;
	/* Both are needed: the pseudo-element is WebKit's disclosure triangle and
	   `list-style` is everybody else's. */
	list-style: none;
}

.lc-giving-calc__summary::-webkit-details-marker {
	display: none;
}

.lc-giving-calc__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-giving-calc__title.lc-giving-calc__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.2;
	margin: 0;
}

/* The same two-hairline marker the accordions use: no icon font, no SVG, and
   nothing for a screen reader to read out — <summary> announces its own state.
   Closed they cross as a plus; open, the upright one collapses to a minus. */
.lc-giving-calc__summary::before,
.lc-giving-calc__summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	width: 0.85rem;
	height: 1px;
	background-color: currentColor;
	transition: transform 0.2s ease;
}

.lc-giving-calc__summary::before {
	transform: translateY(-50%);
}

.lc-giving-calc__summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.lc-giving-calc__disclosure[open] .lc-giving-calc__summary::after {
	transform: translateY(-50%) rotate(90deg) scaleX(0);
}

.lc-giving-calc__panel {
	padding-block-end: var(--lc-space-md);
}

.lc-giving-calc__form {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	align-items: flex-start;
}

.lc-giving-calc__body {
	max-width: var(--lc-measure);
}

.lc-giving-calc__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lc-space-md);
	width: 100%;
	align-items: start;
}

.lc-giving-calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	min-width: 0;
}

.lc-giving-calc__label {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.9375rem;
	line-height: 1.3;
	color: inherit;
}

.lc-giving-calc__control {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.85rem 1rem;
	border-width: 1px;
	border-style: solid;
}

/* The focus ring belongs on the box, not on the borderless field inside it. */
.lc-giving-calc__control:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-giving-calc__currency {
	font-family: var(--lc-font-sans);
	font-size: 1.125rem;
	opacity: 0.7;
}

/* The field itself carries no frame of its own, and no colour: it inherits the
   canvas pairing, like every other piece of type in the brand. Divi's form
   styling is a single class at most, so this holds. */
.lc-giving-calc__input {
	flex: 1;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: inherit;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.125rem;
	line-height: 1.2;
}

.lc-giving-calc__input:focus {
	outline: none;
}

.lc-giving-calc__input::placeholder {
	color: inherit;
	opacity: 0.4;
}

/* A read-only answer is still worth reading at full contrast — it is the whole
   point of the module — so only the cursor says it cannot be typed in. */
.lc-giving-calc__input[readonly] {
	cursor: default;
}

/* The builder has no script running, so the fields are spans standing in for
   inputs. */
.lc-giving-calc__input--preview {
	opacity: 0.4;
}

.lc-giving-calc__presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-xs);
}

.lc-giving-calc__preset {
	background-color: transparent;
	color: inherit;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.875rem;
	line-height: 1;
	padding: 0.6em 1.1em;
	border-width: 1px;
	border-style: solid;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lc-giving-calc__fee {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1rem;
	color: inherit;
	margin: 0;
}

.lc-giving-calc__fee[hidden] {
	display: none;
}

.lc-giving-calc__note {
	font-family: var(--lc-font-sans);
	font-size: 0.8125rem;
	line-height: var(--lc-leading-body);
	color: inherit;
	max-width: var(--lc-measure);
	opacity: 0.75;
}

.lc-giving-calc__vb-note {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

/* Opening and closing a <details> is a jump unless the browser can interpolate
   to `auto`. Where it can, the panel slides; where it cannot, this never
   applies and the panel simply appears. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	.lc-giving-calc__disclosure {
		interpolate-size: allow-keywords;
	}

	.lc-giving-calc__disclosure::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
	}

	.lc-giving-calc__disclosure[open]::details-content {
		block-size: auto;
	}
}

/* Two steps down, the same as the cards: four columns of a sentence each stop
   being readable long before the viewport wants a single column. */
@media (max-width: 980px) {
	.lc-giving__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.lc-giving__grid {
		grid-template-columns: 1fr;
	}

	.lc-giving,
	.lc-giving-calc {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	/* 3em of padding either side of a long label is wider than a phone. Given
	   the row to itself the button is as wide as the screen allows and the
	   label wraps inside it, which is what a lead button should do here
	   anyway. */
	.lc-giving--lead .lc-giving__actions > .lc-button:first-child {
		flex: 1 1 100%;
		padding-inline: 1rem;
		text-align: center;
	}

	/* Side by side, each field would be too narrow for the amount in it. */
	.lc-giving-calc__fields {
		grid-template-columns: 1fr;
		gap: var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   18. Resources — a heading, a video, and what to take away from it
   The media block (.lc-media) is written as a block of its own rather than as
   part of this module: it is a poster in front of a video, which is a thing
   more than one module will want. The ratio is a custom property the module
   sets per instance, so the poster, the empty box and the player that replaces
   them are always the same shape — pressing play cannot shift the page.
   ------------------------------------------------------------------------- */

.lc-resources {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-resources__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lc-resources__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	margin-bottom: var(--lc-space-md);
}

.lc-resources--centre .lc-resources__head {
	align-items: center;
	text-align: center;
}

.lc-resources__media {
	margin-bottom: var(--lc-space-lg);
}

/* ---- The media block ---- */

.lc-media {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: var(--lc-media-ratio, 16 / 9);
	overflow: hidden;
	border-radius: var(--lc-media-radius, 12px);
	/* A mid grey rather than a wash of black: with no poster image the box is
	   all there is to see, and black on black is not a box. This reads as one
	   on the cream canvas and on the black one alike. */
	background-color: rgba(128, 128, 128, 0.2);
}

.lc-media__poster {
	position: absolute;
	inset: 0;
	display: block;
}

.lc-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lc-media__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* A hosted file is letterboxed rather than cropped: the frame is whatever shape
   the author chose, and cutting the top off a talking head to fill it is worse
   than a black band. */
video.lc-media__frame {
	object-fit: contain;
	background-color: #000;
}

/* ---- The play badge ----
   Shared by every video on the site: the media block prints `.lc-media__play`
   and the sermon card `.lc-sermon__play`, and they are the same badge, so they
   read the same custom properties and an author sets them once per module.

   Left alone it is cream on black — the two brand primaries — rather than an
   accent, because it sits over a photograph whose colours are not knowable and
   an accent could land on anything. `--lc-play-size` is the one dimension
   everything else is derived from, and it is declared here rather than read
   inline at each use so the phone-sized default lives in exactly one place. */
.lc-media__play,
.lc-sermon__play {
	--lc-play-diameter: var(--lc-play-size, 4.5rem);

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--lc-play-diameter);
	height: var(--lc-play-diameter);
	border-radius: 50%;
	background-color: var(--lc-cream);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

/* The triangle, drawn with borders rather than a glyph so it needs no font.
   The two ratios are the proportions it was drawn at inside a 4.5rem disc, so
   a badge scaled to any other size keeps the same mark. */
.lc-media__play::after,
.lc-sermon__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width:
		calc(var(--lc-play-diameter) * 0.16) 0
		calc(var(--lc-play-diameter) * 0.16)
		calc(var(--lc-play-diameter) * 0.256);
	border-color: transparent transparent transparent var(--lc-play-color, var(--lc-black));
}

/* An icon chosen in the picker replaces the badge rather than decorating it.
   The disc is the brand's answer to "what reads over a photograph whose colours
   are not knowable"; an author who has picked, say, the YouTube mark has
   answered that themselves, and the mark inside a cream circle is neither one
   thing nor the other. So the disc, its shadow and the border triangle all go,
   and the glyph is centred on its own — which is also why the badge stops
   carrying a size of its own here and takes the glyph's. */
/* The LC Videos row sets its badge once for every tile in it, so the class that
   undoes the disc is on the section: a child module cannot read a parent's
   settings inside the builder, and a preview that disagrees with the page is
   worse than no preview at all. Same rule, reached a different way. */
.lc-media__play--icon,
.lc-sermon__play--icon,
.lc-videos--icon-badge .lc-media__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

/* Sized and coloured here rather than left to `.et-pb-icon`: that class sets
   96px, which is not a size anybody asked for. */
.lc-media__play--icon::after,
.lc-sermon__play--icon::after,
.lc-videos--icon-badge .lc-media__play::after {
	content: var(--lc-play-glyph, "");
	position: static;
	transform: none;
	border: 0;
	font-family: var(--lc-play-font, ETmodules);
	font-weight: var(--lc-play-weight, 400);
	font-size: var(--lc-play-diameter);
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	speak: none;
	-webkit-font-smoothing: antialiased;

	/* Stated, not inherited. The badge is black on cream whatever the canvas is,
	   so on a black or deep canvas the section's own cream text colour would put
	   a cream glyph on a cream disc. */
	color: var(--lc-play-color, var(--lc-black));
}

a.lc-media__poster:hover .lc-media__play,
a.lc-media__poster:focus-visible .lc-media__play {
	transform: translate(-50%, -50%) scale(1.08);
}

a.lc-media__poster:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- The row of resources ---- */

.lc-resources__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-resources-columns, 3), minmax(0, 1fr));
	gap: var(--lc-space-md);
	/* Every cell takes the height of the tallest, which is what lets each
	   resource push its button to the foot and still land on one line across
	   the row. */
	align-items: stretch;
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   resource — is the grid item. */
.lc-resources__cell {
	display: flex;
}

/* Always left-aligned, whatever the heading above is doing: a cover beside a
   title is a pairing, and centring it leaves the two sitting at different
   optical centres. */
.lc-resource {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	min-width: 0;
	align-items: flex-start;
	text-align: left;
}

.lc-resource__row {
	display: flex;
	gap: var(--lc-space-sm);
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

.lc-resources--thumb-above .lc-resource__row {
	flex-direction: column;
}

/* The cover keeps its own proportions — a book jacket, a document thumbnail and
   a square graphic are three different shapes and cropping them to one would
   cut the titles off. The setting fixes the width; the height follows. */
.lc-resource__cover {
	flex: 0 0 var(--lc-resource-thumb, 72px);
	width: var(--lc-resource-thumb, 72px);
	max-width: 100%;
}

.lc-resource__image {
	width: 100%;
	height: auto;
	display: block;
}

.lc-resource__text {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	min-width: 0;
}

.lc-resource__title.lc-resource__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.125rem;
	line-height: 1.2;
	margin: 0;
}

/* `auto` is the whole mechanism: whatever space the description leaves goes
   above the button rather than below it. */
.lc-resource__buttons {
	margin-top: auto;
	padding-top: var(--lc-space-sm);
	width: 100%;
}

/* Full-width buttons grow inside .lc-buttons, which is a flex row — this works
   for the anchor the front end prints and the span the builder does alike. */
.lc-resources--buttons-full .lc-resource__buttons > .lc-button {
	flex: 1;
	padding-inline: 1rem;
	text-align: center;
}

.lc-resources--buttons-auto .lc-resource__buttons {
	width: auto;
}

/* The hairline frame. Written long-hand rather than as the `border` shorthand
   so the colour `.lc-rule` sets from the canvas survives. */
.lc-resources--ruled .lc-resource {
	border-width: 1px;
	border-style: solid;
	padding: var(--lc-space-md) var(--lc-space-sm);
}

.lc-resources--tile .lc-resource {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	padding: var(--lc-space-md) var(--lc-space-sm);
}

/* A tile is light whatever the canvas behind it, so its filled button keeps the
   black-on-cream pairing rather than the canvas's inverted one. */
.lc-resources--tile .lc-resource .lc-button--solid {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

/* One step, not two. A resource is a cover, a title, a sentence and a button —
   at half of a tablet's width three of them across have stopped being
   readable, and two of them are no better than one. */
@media (max-width: 860px) {
	.lc-resources__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.lc-resources {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	/* Only the default moves. A size the author typed is a size they meant, and
	   it is one value rather than three, so it holds at every width. */
	.lc-media__play,
	.lc-sermon__play {
		--lc-play-diameter: var(--lc-play-size, 3.25rem);
	}
}

/* ---------------------------------------------------------------------------
   19. Timeline — a history along a line, as a rail or down the page

   The rail is the reason this module exists. Divi's own timeline stacks every
   entry, which turns eighteen milestones into three screens of scrolling and
   never puts two of them side by side; the rail holds the whole history in one
   screen and lets the visitor move along it. It is a plain `overflow-x`
   container with scroll snapping, so the browser does the scrolling and a
   timeline of sixty costs no more to render, or to operate, than one of six.
   ------------------------------------------------------------------------- */

.lc-timeline {
	padding: var(--lc-space-lg) var(--lc-space-md);

	/* How many milestones fit across before the steps at the foot of this
	   section take over. The per-view figure is written on the module's own
	   order class by TimelineModule::css_vars(); this is the working value, so
	   a narrow screen can lower it without losing what the author asked for. */
	--lc-timeline-columns: var(--lc-timeline-per-view, 4);

	--lc-timeline-gap: var(--lc-space-md);
	--lc-timeline-marker-size: 0.875rem;

	/* A token rather than a literal, because the stack's marker has to centre
	   itself on the date's line box and the only way to say "half a line of
	   that type" in CSS is to be set in that type. */
	--lc-timeline-date-size: clamp(1.25rem, 1.8vw, 1.625rem);

	/* Half the marker, so a triangle drawn with this as its border width is
	   exactly as wide as the marker and lines up under it without arithmetic. */
	--lc-timeline-pointer: calc(var(--lc-timeline-marker-size) / 2);
}

.lc-timeline__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
}

.lc-timeline__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	align-items: flex-start;
	margin-bottom: var(--lc-space-md);
}

/* The line and the markers, per canvas. The line takes the same values as
   `.lc-rule` so a timeline's hairline matches every other hairline on the
   page; the marker is the strongest thing the pairing allows, since it is what
   the eye follows along the line. */
.lc-timeline.lc-canvas--cream {
	--lc-timeline-marker: var(--lc-accent-deep);
	--lc-timeline-line: rgba(0, 0, 0, 0.2);
}

.lc-timeline.lc-canvas--light {
	--lc-timeline-marker: var(--lc-black);
	--lc-timeline-line: rgba(0, 0, 0, 0.2);
}

.lc-timeline.lc-canvas--black {
	--lc-timeline-marker: var(--lc-accent-light);
	--lc-timeline-line: rgba(247, 246, 238, 0.3);
}

.lc-timeline.lc-canvas--deep {
	--lc-timeline-marker: var(--lc-cream);
	--lc-timeline-line: rgba(247, 246, 238, 0.3);
}

/* ---- The rail ---- */

.lc-timeline--rail .lc-timeline__track {
	display: flex;
	align-items: stretch;
	gap: var(--lc-timeline-gap);
	overflow-x: auto;

	/* Scrolling to the end of a rail should not then carry on and scroll the
	   page, or a swipe along the history navigates away from it. */
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;

	/* Room under the milestones for the scrollbar, which is the only thing
	   saying "there is more" until the script arrives. */
	padding-bottom: var(--lc-space-sm);
}

/* The rail is a scrollable region, so it is a tab stop — otherwise its later
   milestones cannot be reached without a pointer (WCAG 2.1.1). A tab stop has
   to show where it is. */
.lc-timeline--rail .lc-timeline__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* With the script running and a progress bar to replace it, the native
   scrollbar goes: two indicators of the same thing, one of them in the
   browser's colours rather than the brand's. Both conditions, so a rail whose
   progress bar the author turned off keeps the scrollbar it still needs. */
.lc-timeline--rail.lc-timeline--js.lc-timeline--progress .lc-timeline__track {
	scrollbar-width: none;
	padding-bottom: 0;
}

.lc-timeline--rail.lc-timeline--js.lc-timeline--progress .lc-timeline__track::-webkit-scrollbar {
	display: none;
}

.lc-timeline--rail .lc-timeline__item {
	/* The fallback first: a fixed width that any browser understands, then the
	   share of the track this instance asked for. A browser that cannot divide
	   by the column count keeps a readable rail rather than dropping the width
	   altogether and letting the milestones collapse. */
	flex: 0 0 auto;
	width: 16rem;
	width: calc(
		(100% - (var(--lc-timeline-columns) - 1) * var(--lc-timeline-gap))
			/ var(--lc-timeline-columns)
	);

	/* A floor, so six-across inside a narrow Divi column is refused rather than
	   rendered as six unreadable slivers. Below it the rail simply scrolls
	   further, which is what it is for. */
	min-width: 10rem;

	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

/* ---- The date, the marker and the line ---- */

.lc-timeline__date {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: var(--lc-timeline-date-size);
	line-height: var(--lc-leading-display);
	letter-spacing: 0;
	margin: 0;

	/* Two rules holding the line straight. Every date occupies exactly one line
	   box whether or not anything was typed into it, and none of them wraps, so
	   every marker across the rail sits at the same height and the segments
	   join up. A date long enough to need two lines would break the run. */
	min-height: 1em;
	white-space: nowrap;
}

.lc-timeline__marker {
	position: relative;
	height: var(--lc-timeline-marker-size);
	margin: var(--lc-space-sm) 0;
}

/* The line is drawn per milestone, across its own width and on into the gap
   after it, so a run of them reads as one unbroken rule however many there are
   — and it scrolls with the rail rather than sitting behind it. The last
   milestone stops at its own edge, so the rule cannot add width to the track
   and leave a stub hanging past the final date. */
.lc-timeline__marker::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: calc(-1 * var(--lc-timeline-gap));
	height: 2px;
	transform: translateY(-50%);
	background-color: var(--lc-timeline-line);
}

.lc-timeline__item:last-child .lc-timeline__marker::before {
	right: 0;
}

/* Flush left with the date above it and the copy below, rather than centred in
   the column: the brand sets everything flush left (p.15), and a centred
   marker would be the one thing in the module that is not. */
.lc-timeline__marker::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	top: 50%;
	left: 0;
	width: var(--lc-timeline-marker-size);
	height: var(--lc-timeline-marker-size);
	border-radius: 50%;
	transform: translateY(-50%);
	background-color: var(--lc-timeline-marker);
}

.lc-timeline--marker-ring .lc-timeline__marker::after {
	background-color: transparent;
	border: 2px solid var(--lc-timeline-marker);
}

.lc-timeline--marker-none .lc-timeline__marker::after {
	content: none;
}

/* A turning point. Bigger, and haloed in the line colour so it reads as a knot
   in the line rather than as a different kind of thing hung off it. */
.lc-timeline__item--highlight .lc-timeline__marker::after {
	width: calc(var(--lc-timeline-marker-size) * 1.5);
	height: calc(var(--lc-timeline-marker-size) * 1.5);
	box-shadow: 0 0 0 4px var(--lc-timeline-line);
}

.lc-timeline__item--highlight {
	--lc-timeline-date-size: clamp(1.5rem, 2.2vw, 2rem);
}

/* ---- The milestone itself ---- */

.lc-timeline__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
	min-width: 0;

	/* Every milestone in a row takes the height of the tallest, so the line
	   above them stays level and the cards below it line up. */
	flex: 1;
}

.lc-timeline--card-tile .lc-timeline__card {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	padding: var(--lc-space-sm);
	border-radius: 10px;
}

/* Light accent on the light-accent canvas is no card at all, so the tile falls
   back to cream — still a filled box, still black text on it. */
.lc-timeline.lc-canvas--light.lc-timeline--card-tile .lc-timeline__card {
	background-color: var(--lc-cream);
}

/* The pointer up to the marker, drawn with borders rather than a glyph so it
   needs no font. It is as tall as the space above it — see the rule below — so
   its tip meets the underside of the dot rather than floating in the gap. */
.lc-timeline--rail.lc-timeline--card-tile .lc-timeline__card::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	border-style: solid;
	border-width: 0 var(--lc-timeline-pointer) var(--lc-timeline-pointer);
	border-color: transparent transparent var(--lc-accent-light);
}

/* The gap the pointer has to cross, closed to exactly its height. Only where
   there is a pointer: an outlined or unboxed milestone wants the full breathing
   space under the line. */
.lc-timeline--rail.lc-timeline--card-tile .lc-timeline__marker {
	margin-bottom: var(--lc-timeline-pointer);
}

/* The corner the pointer stands on is squared off.

   The pointer has to be flush left, because the marker it points at is flush
   left — everything in the module is (p.15). But the tile's corner radius is
   10px and the pointer is only 14px wide, so a rounded corner curves away
   underneath most of the pointer's base and the two read as two separate
   shapes, the triangle floating slightly off the card. Squaring that one
   corner turns them back into one silhouette: the pointer becomes the corner.
   Only the corner the pointer is on, and only where there is a pointer. */
.lc-timeline--rail.lc-timeline--card-tile .lc-timeline__card {
	border-top-left-radius: 0;
}

.lc-timeline.lc-canvas--light.lc-timeline--card-tile .lc-timeline__card::before {
	border-bottom-color: var(--lc-cream);
}

/* Long-hand rather than the `border` shorthand, so the per-canvas colour holds. */
.lc-timeline--card-ruled .lc-timeline__card {
	border-width: 1px;
	border-style: solid;
	border-color: var(--lc-timeline-line);
	border-radius: 10px;
	padding: var(--lc-space-sm);
}

.lc-timeline__title.lc-timeline__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.0625rem;
	line-height: 1.2;
	margin: 0;
}

/* A rail column is nowhere near the 34em body measure, so the cap is dropped
   and the copy set a step smaller — a milestone is a sentence, not an article. */
.lc-timeline--rail .lc-timeline__card .lc-body {
	font-size: 0.9375rem;
	max-width: none;
}

.lc-timeline__media {
	margin-bottom: var(--lc-space-xs);
}

/* ---- Arrows and the progress bar ---- */

/* Under the rail rather than floating over its edges. Over the edges they cover
   the first and last milestone on exactly the screens where space is tightest,
   and they would have to be positioned against a line whose height depends on
   how long the dates are. The row is printed hidden and revealed by the script
   only once the track really does overflow. */
.lc-timeline__controls {
	display: flex;
	align-items: center;
	gap: var(--lc-space-md);
	margin-top: var(--lc-space-sm);
}

.lc-timeline__controls[hidden] {
	display: none;
}

.lc-timeline__progress {
	flex: 1;
	height: 2px;
	background-color: var(--lc-timeline-line);
	overflow: hidden;
}

/* Scaled rather than resized: a transform is the one property a browser can
   animate without laying the page out again, and this one is written on every
   scroll frame. */
.lc-timeline__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--lc-timeline-marker);
	transform-origin: left center;
	transform: scaleX(var(--lc-timeline-progress, 0));
	transition: transform 0.15s linear;
}

.lc-timeline__arrows {
	display: flex;
	gap: var(--lc-space-xs);
}

.lc-timeline__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	color: inherit;
	border: 1px solid var(--lc-timeline-line);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.lc-timeline__arrow[hidden] {
	display: none;
}

.lc-timeline__arrow:hover:not(:disabled) {
	background-color: var(--lc-timeline-line);
}

.lc-timeline__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Dimmed rather than withdrawn at either end of the history: an arrow that
   disappears on the first milestone and comes back on the second makes the
   other one jump sideways under the pointer. */
.lc-timeline__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.lc-timeline__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.lc-timeline__arrow--prev .lc-timeline__chevron {
	transform: rotate(-135deg);
	margin-left: 0.15rem;
}

.lc-timeline__arrow--next .lc-timeline__chevron {
	transform: rotate(45deg);
	margin-right: 0.15rem;
}

/* ---- The stack ----
   The same markup read the other way up: the line runs down the left, the
   marker sits on it beside the date, and the copy fills the column to the
   right. For a handful of milestones with a paragraph each, which is what the
   rail is bad at. */

.lc-timeline--stack .lc-timeline__track {
	display: flex;
	flex-direction: column;
}

.lc-timeline--stack .lc-timeline__item {
	display: grid;
	grid-template-columns: var(--lc-timeline-marker-size) minmax(0, 1fr);
	column-gap: var(--lc-space-md);
	padding-bottom: var(--lc-space-md);
}

.lc-timeline--stack .lc-timeline__date {
	grid-column: 2;
	grid-row: 1;
}

.lc-timeline--stack .lc-timeline__card {
	grid-column: 2;
	grid-row: 2;
	margin-top: var(--lc-space-xs);
	flex: 0 1 auto;
}

.lc-timeline--stack .lc-timeline__marker {
	grid-column: 1;
	grid-row: 1 / span 2;
	height: auto;
	margin: 0;

	/* Set in the date's own type, so `0.5em` below is exactly half its line box
	   and the marker lands on the middle of the date beside it — at whatever
	   size the date happens to be, a turning point's included. */
	font-size: var(--lc-timeline-date-size);
	line-height: var(--lc-leading-display);
}

/* The rail's horizontal rule, turned on its side and carried down through the
   space to the next milestone. */
.lc-timeline--stack .lc-timeline__marker::before {
	top: 0;
	bottom: calc(-1 * var(--lc-space-md));
	left: 50%;
	right: auto;
	width: 2px;
	height: auto;
	transform: translateX(-50%);
}

.lc-timeline--stack .lc-timeline__item:last-child .lc-timeline__marker::before {
	bottom: 0;
}

/* Level with the middle of the date's line box — see the font-size above. */
.lc-timeline--stack .lc-timeline__marker::after {
	top: 0.5em;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ---- Narrow screens ----
   Milestones in view steps down on its own, so an author who asked for six
   never gets six on a phone — and never has to set a figure per breakpoint to
   avoid it. `min()` rather than a flat number, so a rail set to two stays two
   here instead of being widened. */

@media (max-width: 1100px) {
	.lc-timeline {
		--lc-timeline-columns: min(var(--lc-timeline-per-view, 4), 3);
	}
}

@media (max-width: 860px) {
	.lc-timeline {
		--lc-timeline-columns: min(var(--lc-timeline-per-view, 4), 2);
	}
}

@media (max-width: 620px) {
	.lc-timeline {
		--lc-timeline-columns: 1;
		--lc-timeline-gap: var(--lc-space-sm);
	}

	.lc-timeline__controls {
		gap: var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   20. Collage — a wall of photographs, arranged by the order they are in
   Four arrangements out of one list of files. Nothing here knows what any
   photograph is of, so every rule has to hold for a portrait of one person and
   a wide shot of a full room alike: the tile decides the shape, the photograph
   is cropped to it (object-fit), and the part that survives the crop is the
   author's one setting for the lot.

   The rhythm — which tile is the big one, which panel stands tallest, which
   photograph tilts which way — comes from each photograph's position in the
   list, never from anything stored against the file. That is what makes the
   module worth having: a set of files re-arranges by being re-ordered, nothing
   has to be cropped or composed before it is uploaded, and the wall is the same
   on every load and in the builder. Tile sizes and panel heights are marked by
   the renderer, which needs them anyway; the tilts are counted out here.
   ------------------------------------------------------------------------- */

.lc-collage {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-collage__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lc-collage__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	margin-bottom: var(--lc-space-md);
}

.lc-collage--centre .lc-collage__head {
	align-items: center;
	text-align: center;
}

/* The grid. Mosaic and Pinboard are this; Heartbeat and Ribbon override
   `display` below and take the gap and the unit with them, which is why both
   live here rather than in each arrangement. */
.lc-collage__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-collage-columns, 4), minmax(0, 1fr));
	grid-auto-rows: var(--lc-collage-unit, 220px);

	/* Dense packing is what keeps a wall from having holes in it. A feature tile
	   two columns wide leaves cells beside it that the tiles after it are the
	   wrong size to reach in document order; dense lets the browser drop a small
	   one back into the gap. The visible order stops matching the DOM order
	   where that happens, which is the trade — and it is the right way round,
	   since the DOM order is the reading order and the caption travels with the
	   photograph either way. */
	grid-auto-flow: dense;
	gap: var(--lc-collage-gap, 12px);
	margin: 0;
}

.lc-collage__cell {
	position: relative;
	min-width: 0;
}

/* Scoped to the module, and the marker killed twice over, for the same reason
   as the Events badges and the Sermon topics: Divi's `.et-l--body ul` (and
   `.entry-content ul`, and three more) sets `list-style-type: disc` with a 1em
   indent and 23px of bottom padding, at a specificity a bare class does not
   beat. Unscoped, every arrangement drew a bullet beside every photograph.
   `display: block` is the belt to `list-style`'s braces: a grid or flex item is
   not blockified out of `list-item`, so the marker box has to go as well. */
.lc-collage .lc-collage__grid {
	padding: 0;
	list-style: none;
}

.lc-collage .lc-collage__cell {
	display: block;
	list-style: none;
}

.lc-collage .lc-collage__cell::marker {
	content: "";
}


.lc-collage__photo {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;

	/* Contains the duotone's blend, so it mixes with the photograph and not with
	   the canvas behind it. */
	isolation: isolate;
}

/* Captions under the photographs make the figure a column: the caption is a
   child of it, not a sibling, so this is the element that has to make room. The
   picture takes what is left after the line of text, which means a tile is
   still exactly one grid unit tall and the rows still line up across the wall.
   The alternative — letting the caption add its height to the tile — pulls
   every row it appears in out of line with the rest. */
.lc-collage--captions-under .lc-collage__photo {
	display: flex;
	flex-direction: column;
}

.lc-collage--captions-under .lc-collage__link {
	flex: 1;
	min-height: 0;
}

.lc-collage__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.lc-collage__image {
	display: block;
	width: 100%;
	height: 100%;

	/* The crop. Every photograph is a different shape and every tile is a fixed
	   one, so something has to give; cover fills the tile and loses the edges,
	   which is the right way round for a wall — a letterboxed photograph in a
	   grid of filled ones reads as a mistake. */
	object-fit: cover;
	object-position: var(--lc-collage-focus, center);
	transition: filter 0.35s ease, transform 0.45s ease;
}

/* ---- The photograph itself: black and white, duotone, or as shot ---- */

/* Photography is black and white throughout the brand (p.30). */
.lc-collage--mono .lc-collage__image {
	filter: grayscale(1);
}

/* Brand colour overlay (p.31–34): the photograph supplies luminosity, the tint
   supplies hue, which is a duotone rather than a wash. Same mechanism as the
   Statement band, so a duotone collage and a duotone statement match. */
.lc-collage--duotone .lc-collage__photo {
	background-color: var(--lc-media-tint, var(--lc-accent-deep));
}

.lc-collage--duotone .lc-collage__image {
	mix-blend-mode: luminosity;
}

/* Come to colour under the pointer. Both treatments are undone at once —
   whichever is in force, the answer to "show me this one properly" is the file
   as it was taken. `:focus-within` is what makes it reachable from the keyboard,
   and it only ever fires where the photographs are links. */
.lc-collage--reveal .lc-collage__photo:hover .lc-collage__image,
.lc-collage--reveal .lc-collage__photo:focus-within .lc-collage__image {
	filter: none;
	mix-blend-mode: normal;
}

/* ---- Frames ---- */

/* A printed photograph: a border of mount board and a shadow under it. The
   mount is cream on the dark canvases and white on the light ones, because a
   cream mount on a cream canvas is not a mount, it is a gap. */
/* The board is the figure itself, so its padding comes off the picture rather
   than out of the tile: a mounted wall is exactly as tall as an unmounted one
   and the rows still line up across it. */
.lc-collage--mat .lc-collage__photo {
	background-color: var(--lc-cream);
	padding: clamp(6px, 0.6vw, 12px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.lc-canvas--cream.lc-collage--mat .lc-collage__photo,
.lc-canvas--light.lc-collage--mat .lc-collage__photo {
	background-color: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.lc-collage--hairline .lc-collage__photo {
	border: 1px solid currentColor;
}

/* ---- Captions ---- */

.lc-collage__caption {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: inherit;
	text-align: left;
}

.lc-collage--captions-under .lc-collage__caption {
	padding-top: var(--lc-space-xs);
	/* Two lines, then it stops. A caption is a line about a photograph; a
	   paragraph in the media library would otherwise set the height of the tile
	   it sits under and pull its whole row about. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Across the foot of the photograph, on a gradient of the canvas colour so the
   words keep their contrast whatever the picture is doing behind them. */
.lc-collage--captions-overlay .lc-collage__caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 2.5rem 0.875rem 0.75rem;
	color: var(--lc-cream);
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* The overlay sits inside the mount rather than over it, so the board stays
   clean the way a caption written under a print would. */
.lc-collage--captions-overlay.lc-collage--mat .lc-collage__caption {
	inset: auto clamp(6px, 0.6vw, 12px) clamp(6px, 0.6vw, 12px);
}

/* ---- Mosaic and Pinboard: the broken grid ---- */

/*
 * Two sizes of tile break the grid: a feature two by two, and a panorama two
 * wide. Which cell gets which is decided by the renderer, not here — it works
 * along the photographs in blocks sized to tile the grid exactly (5 tiles over
 * 9 cells at three columns, 7 over 12 at four, 10 over 15 at five) and marks
 * each cell as it goes. That is why the arithmetic is not in this stylesheet:
 * the renderer has to know the size of a tile anyway, to tell the browser which
 * copy of the photograph to fetch for it, and one wrong `sizes` is a blurred
 * photograph on a fast connection.
 *
 * A wall whose photograph count is not a multiple of the block simply stops
 * part-way through it. That is intended, and the reason every block starts with
 * its feature: the first photograph is always the big one, however many follow.
 */
.lc-collage__cell--feature {
	grid-column: span 2;
	grid-row: span 2;
}

.lc-collage__cell--wide {
	grid-column: span 2;
}

/*
 * The photographs left over after the last complete block. They are not a
 * block: the renderer deals them into complete rows and divides each row's
 * width between them, so a wall ends on a straight edge whatever the count
 * — which is the whole reason the classes go up to five. A wall shorter than
 * one block is all leftovers, so a handful of photographs is a couple of tidy
 * rows rather than a feature tile and a hole beside it.
 */
.lc-collage__cell--span-2 {
	grid-column: span 2;
}

.lc-collage__cell--span-3 {
	grid-column: span 3;
}

.lc-collage__cell--span-4 {
	grid-column: span 4;
}

.lc-collage__cell--span-5 {
	grid-column: span 5;
}

/* The brand silhouette on the feature tile, and only there. The mask is the
   supplied vector referenced through --lc-media-mask, so replacing that one
   file re-cuts every heart on the site (see "The photo mask" in the README).
   The mount and the hairline are called off underneath it: a frame around a
   masked shape frames the box the shape is in, which is a rectangle with a
   heart-shaped hole in the middle of it. */
.lc-collage--heart.lc-collage--mosaic .lc-collage__cell:first-child .lc-collage__photo {
	-webkit-mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	mask-image: var(--lc-media-mask, url("../svg/lc-heart-mask.svg"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* Pinned to a wall rather than laid out in a grid. The tilts are a fixed cycle
   of eight, so a wall renders identically every time and matches the builder —
   random rotations would re-shuffle themselves on every load, and an author
   could never straighten one. */
.lc-collage--pinboard .lc-collage__photo {
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.35s ease;
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 1) .lc-collage__photo {
	transform: rotate(-2.2deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 2) .lc-collage__photo {
	transform: rotate(1.4deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 3) .lc-collage__photo {
	transform: rotate(-0.8deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 4) .lc-collage__photo {
	transform: rotate(2.6deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 5) .lc-collage__photo {
	transform: rotate(-1.6deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 6) .lc-collage__photo {
	transform: rotate(0.9deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 7) .lc-collage__photo {
	transform: rotate(-2.8deg);
}

.lc-collage--pinboard .lc-collage__cell:nth-child(8n + 8) .lc-collage__photo {
	transform: rotate(1.8deg);
}

/* Straighten under the pointer, and lift clear of the photographs either side.
   The one specific enough to beat all eight rules above it. */
.lc-collage--pinboard .lc-collage__cell .lc-collage__photo:hover,
.lc-collage--pinboard .lc-collage__cell .lc-collage__photo:focus-within {
	transform: rotate(0deg) scale(1.03);
	z-index: 3;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

/* ---- Heartbeat: panels standing on a line ---- */

/*
 * The brand's own motif, made of photographs. Each panel's height is a fraction
 * of the band, taken from the same fixed cycle LC_Heartbeat draws its `columns`
 * rhythm from, so the skyline across a collage and the bars behind a hero are
 * the same rhythm. The fraction arrives per cell as --lc-collage-lift, written
 * by the renderer; PHP and the builder read the one array, so they agree.
 *
 * A band that runs out of width wraps, and each line of it stands on its own
 * baseline — which is what keeps twenty photographs from being twenty slivers.
 */
.lc-collage--heartbeat .lc-collage__grid {
	/* Equal columns rather than a wrapping flex row, and the count of them comes
	   from the renderer. Flex was the obvious way to do it and gets one thing
	   badly wrong: the last line has fewer panels in it, and flex grows them to
	   fill the width — so a band of ten ends with nine panels and one photograph
	   the width of the page underneath, which looks like a mistake because it is
	   one. Columns cannot do that. */
	grid-template-columns: repeat(var(--lc-collage-perline, 8), minmax(0, 1fr));

	/* Each line is as tall as its tallest panel, and the panels stand on the
	   line rather than being stretched to it. That is the whole effect. */
	grid-auto-rows: auto;
	align-items: end;
}

.lc-collage--heartbeat .lc-collage__cell {
	height: calc(var(--lc-collage-unit, 220px) * 2 * var(--lc-collage-lift, 1));
}

/* ---- Ribbon: one band that scrolls sideways ---- */

/*
 * The browser's own scrolling, as the Timeline rail is: it swipes on a phone,
 * drags with a trackpad, takes the scrollbar and answers the arrow keys with no
 * script loaded at all.
 *
 * Nothing is cropped here. Every photograph keeps its own proportions — the
 * renderer passes the file's real width and height as --lc-collage-aspect and
 * the panel is that shape at the band's height — so a portrait is a narrow
 * panel beside a wide one, which is what makes a ribbon read as a contact sheet
 * rather than as a row of identical windows.
 */
.lc-collage--ribbon .lc-collage__grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* Room for a scrollbar that takes real width, so it cannot sit over the foot
	   of the photographs. */
	padding-bottom: var(--lc-space-xs);
}

.lc-collage--ribbon .lc-collage__cell {
	flex: 0 0 auto;
	height: calc(var(--lc-collage-unit, 220px) * 2);
	aspect-ratio: var(--lc-collage-aspect, 3 / 2);
	scroll-snap-align: start;
}

.lc-collage--ribbon .lc-collage__image {
	object-fit: cover;
}

/* The track is a scrollable region, so it is a tab stop and carries its own
   accessible name — see the note in the README. Where the photographs are links
   it is already reachable and the renderer leaves the attribute off. */
.lc-collage--ribbon .lc-collage__grid:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---- Nothing chosen yet ---- */

/* Only ever drawn in the builder. The front end prints the heading and stops,
   on the grounds that an empty frame on a live page is worse than a section
   that is one line shorter than intended. */
.lc-collage__cell--empty .lc-collage__photo {
	border: 1px dashed currentColor;
	opacity: 0.45;
}

.lc-collage__note {
	font-family: var(--lc-font-sans);
	font-size: 0.8125rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	opacity: 0.7;
	margin: var(--lc-space-sm) 0 0;
}

/* ---- The larger view ---- */

/*
 * Printed by lc-collage.js, styled here — a viewer built in a script and styled
 * in the script's own strings could not be re-themed by a site, and this one has
 * to sit inside the same two colours as everything else.
 *
 * It is a real <dialog>, so the browser supplies the modality, the Escape key
 * and the focus trap; the script only has to say which photograph and listen for
 * the arrows.
 */
.lc-collage-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgba(0, 0, 0, 0.92);
	color: var(--lc-cream);
	overflow: hidden;
}

.lc-collage-lightbox::backdrop {
	background-color: rgba(0, 0, 0, 0.92);
}

.lc-collage-lightbox__frame {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--lc-space-sm);
	margin: 0;
	padding: clamp(1rem, 4vw, 3.5rem);
}

.lc-collage-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	object-fit: contain;
	/* The photograph as it was taken. A treatment is how the wall is presented;
	   the file itself is what somebody asking to see it properly is asking for. */
	filter: none;
}

.lc-collage-lightbox__caption {
	max-width: var(--lc-measure);
	font-family: var(--lc-font-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
	color: var(--lc-cream);
}

.lc-collage-lightbox__count {
	font-family: var(--lc-font-sans);
	font-size: 0.75rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	opacity: 0.65;
}

.lc-collage-lightbox__button {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(247, 246, 238, 0.35);
	border-radius: 0;
	background-color: transparent;
	color: var(--lc-cream);
	font-family: var(--lc-font-sans);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lc-collage-lightbox__button:hover {
	background-color: var(--lc-cream);
	color: var(--lc-black);
}

.lc-collage-lightbox__button:focus-visible {
	outline: 2px solid var(--lc-cream);
	outline-offset: 3px;
}

.lc-collage-lightbox__button--close {
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
}

.lc-collage-lightbox__button--prev {
	top: 50%;
	left: clamp(0.5rem, 2vw, 1.5rem);
	transform: translateY(-50%);
}

.lc-collage-lightbox__button--next {
	top: 50%;
	right: clamp(0.5rem, 2vw, 1.5rem);
	transform: translateY(-50%);
}

/* One photograph, and the arrows have nothing to do. Hidden rather than left
   inert: a control that does nothing is a bug a visitor has to discover. */
.lc-collage-lightbox--single .lc-collage-lightbox__button--prev,
.lc-collage-lightbox--single .lc-collage-lightbox__button--next,
.lc-collage-lightbox--single .lc-collage-lightbox__count {
	display: none;
}

@media (max-width: 600px) {
	/* On a phone the arrows would sit over the photograph, so they come down to
	   the foot of it beside the count. */
	.lc-collage-lightbox__button--prev,
	.lc-collage-lightbox__button--next {
		top: auto;
		bottom: clamp(0.75rem, 3vw, 1.5rem);
		transform: none;
	}

	.lc-collage-lightbox__frame {
		padding-bottom: 5rem;
	}
}

/* ---- Narrower screens ---- */

/*
 * The column count steps down and never up, so a wall set to three columns
 * stays three on a tablet and one set to five is not five slivers. The feature
 * keeps its two-by-two at three columns; below that the block would be most of
 * the screen, so the wall evens out and the first photograph takes the full
 * width instead — which is the mobile version of "this is the important one".
 */
@media (max-width: 1100px) {
	.lc-collage--cols-4 .lc-collage__grid,
	.lc-collage--cols-5 .lc-collage__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The renderer's balanced lines are worked out against the full content
	   width, so on a narrower screen the browser decides instead: as many
	   panels as fit, none narrower than --lc-collage-panel, which follows the
	   author's scale. `auto-fill` rather than `auto-fit`, so the last line keeps
	   its columns and its panels keep their width. */
	.lc-collage--heartbeat .lc-collage__grid {
		grid-template-columns: repeat(auto-fill, minmax(var(--lc-collage-panel, 130px), 1fr));
	}

	/* The panoramas give up their second column: two thirds of a three-column
	   grid is a photograph that has taken over the wall. The features keep
	   theirs, and dense packing closes the cells this frees up. */
	.lc-collage__cell--wide {
		grid-column: auto;
	}

	/* A leftover row worked out for four or five columns cannot be spanned
	   across three. Held to the full width instead, which is what it was: the
	   row it was the whole of. */
	.lc-collage__cell--span-4,
	.lc-collage__cell--span-5 {
		grid-column: span 3;
	}
}

@media (max-width: 700px) {
	.lc-collage {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	/* Every column count by name. The three-column rule in the block above is
	   two classes deep and still matches at this width, so a bare
	   `.lc-collage__grid` here would lose to it and a phone would be given
	   three columns. */
	.lc-collage--cols-3 .lc-collage__grid,
	.lc-collage--cols-4 .lc-collage__grid,
	.lc-collage--cols-5 .lc-collage__grid,
	.lc-collage--heartbeat .lc-collage__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Every tile the same, except the first, which spans the pair — the mobile
	   reading of "this is the important one". A block's later features are
	   levelled with everything else: at two columns there is no room for a
	   second emphasis before the reader has scrolled past the first. */
	.lc-collage__cell--feature,
	.lc-collage__cell--wide,
	.lc-collage__cell--span-2 {
		grid-column: auto;
		grid-row: auto;
	}

	/* Anything wider than half the wall was a row of its own; at two columns it
	   still is. */
	.lc-collage__cell--span-3,
	.lc-collage__cell--span-4,
	.lc-collage__cell--span-5 {
		grid-column: span 2;
	}

	.lc-collage .lc-collage__cell:first-child {
		grid-column: 1 / -1;
		grid-row: span 2;
	}

	/* A panel narrower than about a third of a phone screen holds nothing worth
	   looking at, so the Heartbeat gives up its rhythm and becomes a pair of
	   columns. The Ribbon keeps scrolling: sideways is the one arrangement that
	   works better on a phone than on a desktop. */
	.lc-collage--heartbeat .lc-collage__cell {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.lc-collage--ribbon .lc-collage__cell {
		height: calc(var(--lc-collage-unit, 220px) * 1.3);
	}
}

/* ---------------------------------------------------------------------------
   21. Groups — the small-groups grid, and its filter
   Cards are read from Church Center (LC_Groups). The card is one link to the
   group's own page there, so nothing in here is separately interactive — the
   tags are labels, not controls.

   Structurally this is section 14 with a different prefix, and deliberately so:
   the two grids look alike because they are the same object. It is written out
   rather than shared because the events grid is a calendar and this is a
   directory, and the two will diverge — the tag row below is already the first
   place they have.
   ------------------------------------------------------------------------- */

.lc-groups {
	padding: var(--lc-space-lg) var(--lc-space-md);

	/* The filled state of a filter pill, on the same two rules as the events
	   grid and the sermon switcher: a pill swaps the canvas and its text colour
	   round rather than inventing a colour outside the four approved pairings. */
	--lc-pill-on-bg: var(--lc-black);
	--lc-pill-on-fg: var(--lc-cream);
}

.lc-groups.lc-canvas--black,
.lc-groups.lc-canvas--deep {
	--lc-pill-on-bg: var(--lc-cream);
	--lc-pill-on-fg: var(--lc-black);
}

.lc-groups__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

.lc-groups__inner > .lc-intro {
	margin: 0;
}

.lc-groups__inner > .lc-groups__grid,
.lc-groups__inner > .lc-groups__filters {
	margin-top: var(--lc-space-md);
}

/* ---- The grid ---- */

.lc-groups__grid {
	display: grid;
	gap: var(--lc-space-sm);
	grid-template-columns: repeat(var(--lc-groups-columns, 3), minmax(0, 1fr));
}

/* Two steps down rather than straight to one column, the same ladder the events
   and team grids use. */
@media (max-width: 1024px) {
	.lc-groups__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.lc-groups__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- The card ---- */

.lc-groups__card {
	display: flex;
	flex-direction: column;
	/* The hairline below is drawn inside the track, not added to it. */
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--lc-cream);
	color: var(--lc-black);
	text-decoration: none;
}

/* On a cream canvas a cream card would be invisible, so there the card takes
   the light accent — the same relationship the schedule and events cards use. */
.lc-groups.lc-canvas--cream .lc-groups__card {
	background-color: var(--lc-accent-light);
}

/* On the light-accent canvas the pairing has to invert: the page is already
   that accent, so a card carrying it would disappear outright. */
.lc-groups.lc-canvas--light .lc-groups__card {
	background-color: var(--lc-cream);
}

/* Edge definition where the card and the page are both light. Group header
   images come from whoever leads the group and many of them are pale, so on a
   cream canvas the picture runs straight into the page and the card loses its
   top edge. A hairline is how this brand separates things everywhere else. */
.lc-groups.lc-canvas--cream .lc-groups__card,
.lc-groups.lc-canvas--light .lc-groups__card {
	border: 1px solid rgba(0, 0, 0, 0.14);
}

a.lc-groups__card {
	transition: transform 0.18s ease;
}

a.lc-groups__card:hover,
a.lc-groups__card:focus-visible {
	transform: translateY(-2px);
}

a.lc-groups__card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* A group that is not taking people is still worth reading about, and it is
   still a link to its own page — it is simply not an invitation. Held back a
   little rather than dimmed to the point of failing contrast: the badge below
   says so in words, and this only stops it competing with the cards that are
   open. It lifts on hover and focus so the card never reads as disabled. */
.lc-groups__card--closed .lc-groups__media {
	opacity: 0.55;
}

a.lc-groups__card--closed:hover .lc-groups__media,
a.lc-groups__card--closed:focus-visible .lc-groups__media {
	opacity: 1;
}

/* ---- The image ---- */

.lc-groups__media {
	position: relative;
	aspect-ratio: var(--lc-groups-ratio, 16 / 9);
	overflow: hidden;
	background-color: var(--lc-accent-mid);
	transition: opacity 0.18s ease;
}

.lc-groups__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Where the leader uploaded nothing, or where Church Center offered one of its
   stock plates and LC_Groups dropped it. The initials keep the card the same
   height as the ones beside it. */
.lc-groups__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lc-groups__initials {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	color: var(--lc-black);
}

/* ---- Card body ---- */

.lc-groups__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;

	/* Pushes the badges to the bottom edge, so a row of cards with names of
	   different lengths still lines its badges up. */
	flex: 1 1 auto;
}

.lc-groups__title.lc-groups__title {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.0625rem;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}

.lc-groups__when {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0;
}

/* Generated rather than typed, so switching the schedule or the member count
   off cannot leave a stray divider behind. */
.lc-groups__sep {
	padding: 0 0.4em;
	opacity: 0.45;
}

.lc-groups__place {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	margin: 0;
	opacity: 0.7;
}

.lc-groups__summary {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0.15rem 0 0;
}

/* ---- Tags ---- */

/* Scoped to the module, and the marker killed twice over, because Divi styles
   lists in content areas — `.entry-content ul` sets a disc and a left padding,
   at a specificity a bare class does not beat. */
.lc-groups .lc-groups__tags,
.lc-groups .lc-groups__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
}

.lc-groups .lc-groups__tag,
.lc-groups .lc-groups__badge {
	display: block;
	list-style: none;
}

.lc-groups .lc-groups__tag::marker,
.lc-groups .lc-groups__badge::marker {
	content: "";
}

.lc-groups .lc-groups__tags {
	margin: 0.35rem 0 0;
}

/* Tags read as description, badges as status, so they are drawn as two
   different things: an outline for what a group is, a fill for whether you can
   join it. Both are labels — the whole card is the only link. */
.lc-groups__tag {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.4rem 0.55rem;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 999px;
}

/* ---- Badges ---- */

.lc-groups .lc-groups__badges {
	margin: auto 0 0;
	padding: 0.5rem 0 0;
}

.lc-groups__badge {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.45rem 0.6rem;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.07);
}

/* The dot is drawn by the stylesheet rather than typed into the markup, so the
   badge's text stays a plain translatable string and a screen reader is not
   made to announce a decorative glyph. Open and closed are told apart by the
   words first; the dot is a second, redundant cue rather than the only one,
   because the two states are not distinguishable by colour alone here — the
   brand carries no red or green. */
.lc-groups__badge--open::before,
.lc-groups__badge--closed::before {
	content: "\25CF";
	margin-right: 0.4em;
}

.lc-groups__badge--closed {
	opacity: 0.6;
}

.lc-groups__badge--closed::before {
	content: "\25CB";
}

/* ---- The filter ---- */

.lc-groups__filters {
	/* The radios are positioned out of the flow, so the wrapper has to contain
	   them. */
	position: relative;
}

/* Visually hidden but still focusable and still a radio group, which is what
   gives the filter arrow-key navigation and a screen-reader announcement
   without a line of JavaScript. display:none would take all three away. */
.lc-groups__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lc-groups__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--lc-space-md);
}

.lc-groups__pill {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	padding: 0.7rem 1.15rem;
	border: 1px solid;
	border-radius: 999px;
	cursor: pointer;
	color: inherit;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/*
 * The filter itself.
 *
 * Per-instance ids cannot appear in a shared stylesheet, which rules out
 * `:has(#id:checked)`. So the radios sit as siblings ahead of the pills and the
 * grid, and position does the matching: the nth radio, when checked, fills the
 * nth pill and hides every card that does not carry the nth value's class.
 *
 * Which value that is — a campus, or a tag from any of the church's
 * vocabularies — is settled in PHP before this ever runs, so these rules do not
 * have to know and there is one set of them rather than one per vocabulary. The
 * first radio is "all groups" and hides nothing, so the positions start at two,
 * and that is why there is a fixed ceiling on how many pills are offered:
 * LC_Groups::MAX_FILTERS, and one rule per position here.
 *
 * If this stylesheet fails to load, every card is visible and the pills are
 * plain text — the unfiltered list, which is the right thing to fall back to.
 */
/* Scoped to a module the script has not claimed. Where lc-groups.js is running
   it owns filtering as well as paging — a page is "the next six of whatever the
   filter left", and CSS cannot count — so these rules would fight it. */
.lc-groups:not(.lc-groups--js) .lc-groups__radio:nth-of-type(2):checked ~ .lc-groups__grid > .lc-groups__card:not(.lc-groups__card--c1),
.lc-groups:not(.lc-groups--js) .lc-groups__radio:nth-of-type(3):checked ~ .lc-groups__grid > .lc-groups__card:not(.lc-groups__card--c2),
.lc-groups:not(.lc-groups--js) .lc-groups__radio:nth-of-type(4):checked ~ .lc-groups__grid > .lc-groups__card:not(.lc-groups__card--c3),
.lc-groups:not(.lc-groups--js) .lc-groups__radio:nth-of-type(5):checked ~ .lc-groups__grid > .lc-groups__card:not(.lc-groups__card--c4),
.lc-groups:not(.lc-groups--js) .lc-groups__radio:nth-of-type(6):checked ~ .lc-groups__grid > .lc-groups__card:not(.lc-groups__card--c5),
.lc-groups:not(.lc-groups--js) .lc-groups__radio:nth-of-type(7):checked ~ .lc-groups__grid > .lc-groups__card:not(.lc-groups__card--c6) {
	display: none;
}

.lc-groups__radio:nth-of-type(1):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(1),
.lc-groups__radio:nth-of-type(2):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(2),
.lc-groups__radio:nth-of-type(3):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(3),
.lc-groups__radio:nth-of-type(4):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(4),
.lc-groups__radio:nth-of-type(5):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(5),
.lc-groups__radio:nth-of-type(6):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(6),
.lc-groups__radio:nth-of-type(7):checked ~ .lc-groups__pills .lc-groups__pill:nth-child(7) {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

/* The focus ring belongs on the label, because the radio it describes is the
   one thing on screen nobody can see. */
.lc-groups__radio:nth-of-type(1):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(1),
.lc-groups__radio:nth-of-type(2):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(2),
.lc-groups__radio:nth-of-type(3):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(3),
.lc-groups__radio:nth-of-type(4):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(4),
.lc-groups__radio:nth-of-type(5):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(5),
.lc-groups__radio:nth-of-type(6):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(6),
.lc-groups__radio:nth-of-type(7):focus-visible ~ .lc-groups__pills .lc-groups__pill:nth-child(7) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- Pagination ---- */

/*
 * The pager is drawn by PHP but hidden until lc-groups.js adds `lc-groups--js`
 * to the module. A pager that cannot page is worse than no pager, so with the
 * script blocked, missing or broken there is no pager and every group in the
 * total prints instead — a long page rather than a broken one.
 */
.lc-groups__pager {
	display: none;
}

/* The second selector is the Visual Builder's: the preview has no script to
   claim the module, but an author still has to see that the grid pages. */
.lc-groups--js .lc-groups__pager,
.lc-groups__pager--preview {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: var(--lc-space-md);
}

/*
 * `hidden` is how the script takes a card or a page button off screen, because
 * it removes the element from the accessibility tree as well. These rules are
 * required, not belt-and-braces: `.lc-groups__card` sets a display of its own,
 * and author CSS beats the browser's default styling for `[hidden]`.
 */
.lc-groups__card[hidden],
.lc-groups__page[hidden],
.lc-groups--js .lc-groups__pager[hidden] {
	display: none;
}

.lc-groups__page {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	min-width: 2.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid;
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* The page you are on, filled the same way a chosen pill is — the brand permits
   four text/canvas pairings and a control cannot invent a colour. */
.lc-groups__page[aria-current="page"] {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

.lc-groups__page:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- Footer and empty state ---- */

.lc-groups__actions {
	margin-top: var(--lc-space-md);
}

.lc-groups__empty {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 1rem;
	line-height: var(--lc-leading-body);
	margin: var(--lc-space-sm) 0 0;
}

/* Builder only: shown where the feed has nothing, so an author is never left
   looking at an empty area wondering whether the module is broken. */
.lc-groups__vb-note {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

@media (max-width: 720px) {
	.lc-groups {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   22. Connect — the page that is only links
   One column at every width, because the phone is what it is opened on, and no
   script at all: a stack of anchors, and whatever pictures were put in them.
   ------------------------------------------------------------------------- */

.lc-connect {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-connect__inner {
	width: 100%;
	/* Held to a phone's width by default rather than the 1180px the other
	   sections use: a column of full-width buttons across a desktop screen is a
	   row of very long targets and nothing to aim at. */
	max-width: var(--lc-connect-width, 420px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
}

.lc-connect__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

.lc-connect--centre .lc-connect__head {
	align-items: center;
	text-align: center;
}

.lc-connect--left .lc-connect__head {
	align-items: flex-start;
	text-align: left;
}

/* The heading has to be told, rather than left to inherit it. The brand type
   scale sets `text-align: left` on the heading itself (p.15, flush left), and a
   rule on the element beats alignment inherited from anything above it — so a
   headline long enough to wrap would centre its block and left-align its last
   line. Three classes, so it outranks the doubled `.lc-heading.lc-heading`. */
.lc-connect--centre .lc-connect__head .lc-heading {
	text-align: center;
}

.lc-connect--left .lc-connect__head .lc-heading {
	text-align: left;
}

/* Both are held to the body measure, which is wider than the column is on a
   phone and narrower on a desktop, so they need centring of their own. */
.lc-connect--centre .lc-connect__intro,
.lc-connect--centre .lc-connect__footnote {
	margin-inline: auto;
	text-align: center;
}

.lc-connect__logo {
	display: block;
	max-width: 100%;
}

/* Sized by width, since the supplied marks are square files with the artwork
   centred in them. Two classes, so this beats the fixed height `.lc-emblem`
   carries for the modules that set one inline in a band of copy. */
.lc-connect__logo .lc-connect__logo-image {
	display: block;
	width: var(--lc-connect-logo, 150px);
	max-width: 100%;
	height: auto;
}

/* The footnote is the smallest thing on the page and the least important: the
   address under a stack of links, not a line of copy. */
.lc-connect__footnote {
	font-size: 0.8125rem;
	opacity: 0.75;
}

.lc-connect__links {
	display: grid;
	/* One column, at every width. The whole point of the page. */
	grid-template-columns: 1fr;
	gap: var(--lc-connect-gap, 12px);
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   tile — is the grid row. */
.lc-connect__item {
	display: flex;
	min-width: 0;
}

/* The tile is the brand button, filling its row rather than shrinking to its
   label: everything about this page is a target for a thumb. The side padding
   comes down from the button's own 2.4em, which is generous for a shape that is
   already the full width of the column. */
.lc-connect__link {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-width: 0;
	padding: 1.15em 1.25em;
	text-align: center;
	transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.lc-connect--left .lc-connect__link {
	justify-content: flex-start;
	text-align: left;
}

/* Left to the page rather than set on the link itself. A child cannot read its
   parent's settings in the builder, so the emphasis is carried down the
   cascade instead and the preview cannot disagree with the page. */
.lc-connect--solid .lc-connect__link--inherit {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

.lc-connect--solid.lc-canvas--black .lc-connect__link--inherit,
.lc-connect--solid.lc-canvas--deep .lc-connect__link--inherit {
	background-color: var(--lc-cream);
	color: var(--lc-black);
}

.lc-connect__label {
	min-width: 0;
}

/* The second line. `width: 100%` inside the wrapping flex row is what drops it
   under the label rather than beside it. */
.lc-connect__note {
	width: 100%;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0;
	opacity: 0.75;
}

/* The small mark beside a label, and the logo that stands in for one. Both are
   sized by height, from the same custom property the module sets per tile, so a
   row of app icons lines up whatever shape the files are. */
.lc-connect__icon,
.lc-connect__mark {
	display: block;
	flex: none;
	width: auto;
	height: var(--lc-connect-icon, 32px);
	max-width: 100%;
}

/* A logo is the label, so the tile gives it a little more room above and below
   than a line of type would need. */
.lc-connect__link--mark {
	padding-block: 0.9em;
}

/* A picture filling the tile. The frame stays by default — it is what holds the
   stack together — but the padding goes, so the picture meets it. */
.lc-connect__link--banner {
	padding: 0;
	gap: 0;
	overflow: hidden;
}

/* Frame off. Only a tile with a picture in it can ask for this, so what is left
   is the picture on the canvas: a banner that carries its own edge, or a lockup
   with air around it rather than a box. Two classes, to beat the border
   `.lc-button` sets on every tile whatever order the sheets land in. */
.lc-connect__link.lc-connect__link--frameless {
	border: 0;
}

.lc-connect__banner {
	display: block;
	width: 100%;
	height: auto;
}

/* A note under a banner has no padding of its own to sit in. */
.lc-connect__link--banner .lc-connect__note {
	padding: 0.75em 1.25em;
}

/* The same acknowledgement the events and groups cards give — a step towards
   the reader rather than a repaint, which is the one treatment that reads the
   same on an outlined tile, a filled one and a picture. */
.lc-connect__link:hover,
.lc-connect__link:focus-visible {
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.lc-connect {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   23. Locations — a row of places, each a photograph with its name on it
   One shape, one crop and one treatment for the whole row, set on the section
   rather than on the tiles: a row of buildings photographed on different days
   at different distances only reads as one row if none of that is decided
   per tile. A location is a child module, so a fourth campus is one more of
   them at the end rather than a fourth column somebody has to style to match.
   ------------------------------------------------------------------------- */

.lc-locations {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-locations__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lc-locations__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	margin-bottom: var(--lc-space-lg);
}

.lc-locations--centre .lc-locations__head {
	align-items: center;
	text-align: center;
}

/* The heading has to be told, rather than left to inherit it: the brand type
   scale sets `text-align: left` on the heading itself (p.15, flush left), and a
   rule on the element beats alignment inherited from anything above it. Three
   classes, so it outranks the doubled `.lc-heading.lc-heading`. */
.lc-locations--centre .lc-locations__head .lc-heading {
	text-align: center;
}

/* Held to the body measure, which is narrower than the section, so it needs
   centring of its own. */
.lc-locations--centre .lc-locations__intro {
	margin-inline: auto;
}

.lc-locations__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-locations-columns, 3), minmax(0, 1fr));
	gap: var(--lc-locations-gap, var(--lc-space-md));
	/* Every cell takes the height of the tallest, so a name that wraps onto two
	   lines under the picture does not shorten the tile beside it. */
	align-items: stretch;
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   tile — is the grid item. */
.lc-locations__cell {
	display: flex;
	min-width: 0;
}

/* One column is a single tile, held to the body measure rather than stretched
   the width of the section. */
.lc-locations--one .lc-locations__grid {
	max-width: var(--lc-measure);
}

.lc-locations--one.lc-locations--centre .lc-locations__grid {
	margin-inline: auto;
}

.lc-location {
	flex: 1;
	min-width: 0;
	/* Both arrangements are this one grid. With the words on the photograph the
	   two rows are collapsed onto one another below; beneath it they stay as
	   they are, which is a picture with a caption under it. */
	display: grid;
	grid-template-rows: auto auto;
	color: inherit;
	text-decoration: none;
}

/* A tag selector as well as the class, so this matches the specificity of
   Divi's own `.et-l a` link colour and, coming later in the sheet, beats it —
   the tile's words are the canvas pairing, not a link colour. */
a.lc-location {
	color: inherit;
	text-decoration: none;
}

.lc-location__media {
	position: relative;
	overflow: hidden;
	/* Clipped by the crop, so it only ever shows for the moment before a
	   photograph loads — and for the whole life of a tile that has not been
	   given one. */
	background-color: var(--lc-accent-deep);
	aspect-ratio: var(--lc-locations-ratio, 2 / 3);
}

.lc-location__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--lc-location-focal, center);
	transition: transform 0.6s ease;
}

/* Photography is black and white throughout the brand (p.30), though a row of
   buildings is usually left in colour: it is the only picture of the place most
   visitors see before they drive to it. */
.lc-locations--mono .lc-location__image {
	filter: grayscale(1);
}

/* Brand colour overlay (p.31–34): luminosity from the photograph, hue from the
   tint, which is a duotone rather than a wash. */
.lc-locations--tinted .lc-location__media {
	background-color: var(--lc-media-tint);
}

.lc-locations--tinted .lc-location__image {
	mix-blend-mode: luminosity;
}

/* The scrim: the canvas colour laid back over the foot of the photograph, so
   the name keeps its contrast against a bright sky or a pale wall. It follows
   the canvas, as the statement band's does — darkening on black and deep
   accent, where the words are cream, and lightening on cream and light accent,
   where they are black. A gradient rather than a flat lay so the top of the
   picture is untouched: it is a photograph of a building, not a background. */
.lc-location__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		var(--lc-location-scrim-color, var(--lc-black)) 0%,
		transparent 62%
	);
	opacity: var(--lc-locations-scrim, 0.7);
}

.lc-canvas--cream .lc-location__scrim {
	--lc-location-scrim-color: var(--lc-cream);
}

.lc-canvas--light .lc-location__scrim {
	--lc-location-scrim-color: var(--lc-accent-light);
}

.lc-canvas--deep .lc-location__scrim {
	--lc-location-scrim-color: var(--lc-accent-deep);
}

/* Nothing to hold off the picture when the words are printed under it, and an
   empty tile has no photograph for a gradient to sit on. */
.lc-locations--under .lc-location__scrim,
.lc-location__media--empty .lc-location__scrim {
	display: none;
}

.lc-location__text {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
}

.lc-locations--centre .lc-location__text {
	align-items: center;
	text-align: center;
}

/* Words on the photograph: the two grid rows are collapsed onto one another and
   the text is pinned to the foot of the cell. Stacking them this way rather
   than positioning the caption absolutely keeps the tile's own height the
   picture's height, which is what makes a row of them line up. */
.lc-locations--over .lc-location__media,
.lc-locations--over .lc-location__text {
	grid-area: 1 / 1;
}

.lc-locations--over .lc-location__text {
	align-self: end;
	position: relative;
	z-index: 1;
	padding: var(--lc-space-md);
}

/* Words under the photograph: they sit on the section's own canvas, so they
   need holding off the picture rather than insetting into it. */
.lc-locations--under .lc-location__text {
	padding-top: var(--lc-space-sm);
}

/* Two classes, so it outranks the doubled heading rules in section 2. Sized
   between the subheading and the section heading: on a tall tile the name is
   the largest thing in the picture, and it is what somebody is scanning the
   row for. */
.lc-location__name.lc-location__name {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.1;
	margin: 0;
}

/* The descriptor treatment — Medium, caps, +50 tracking (p.15) — which is what
   an address under a name is. Written out here rather than borrowing
   `.lc-descriptor`, so that the section heading's own descriptor and a street
   on a tile can be sized apart without one following the other. The caps are
   the stylesheet's, not the author's: a row typed inconsistently still prints
   consistently. */
.lc-location__address {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.875rem;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
	margin: 0;
	opacity: 0.85;
}

/* A linked tile. The picture comes forward under the pointer rather than the
   tile lifting off the page: the tiles butt up against a gap of a few pixels,
   and a shadow in that gap reads as a mistake. */
@media (hover: hover) {
	.lc-location--link:hover .lc-location__image {
		transform: scale(1.04);
	}
}

.lc-location--link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Two steps down, as the cards do it. Four buildings side by side stop reading
   as places long before the viewport is narrow enough to want one. */
@media (max-width: 980px) {
	.lc-locations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Nothing to step down from — a single tile stays a single tile. */
	.lc-locations--one .lc-locations__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.lc-locations__grid {
		grid-template-columns: 1fr;
	}

	.lc-locations {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   24. Videos — a row of films, each a poster with its name on it
   The Locations row, for a thing Locations cannot do: three ministry streams,
   three films, one piece of design. The section decides the crop, the scrim,
   the alignment, the corners and the badge, so a fourth stream is a link, a
   poster and two lines of type rather than a fourth tile somebody has to style
   to match the other three.

   The picture half is the shared `.lc-media` block in section 18, which is what
   makes a tile click-to-play rather than an embed. That is also why the caption
   is a sibling of the figure rather than something inside it: `lc-video.js`
   replaces the whole of a figure's contents with the player, and the caption
   has to survive being authored, then get out of the way the moment a visitor
   presses play. `.lc-media--playing ~ .lc-video__text` is that — a following
   sibling, so it needs nothing newer than CSS2 and no parent selector.
   ------------------------------------------------------------------------- */

.lc-videos {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-videos__inner {
	max-width: 1180px;
	margin: 0 auto;
	/* As the Accordions and the Hero: a module root is a flex container in
	   Divi 5, and a flex item with `margin: 0 auto` sizes itself to its content
	   rather than stretching. */
	width: 100%;
}

.lc-videos__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	margin-bottom: var(--lc-space-lg);
}

.lc-videos--centre .lc-videos__head {
	align-items: center;
	text-align: center;
}

/* The heading has to be told, rather than left to inherit it: the brand type
   scale sets `text-align: left` on the heading itself (p.15, flush left), and a
   rule on the element beats alignment inherited from anything above it. */
.lc-videos--centre .lc-videos__head .lc-heading {
	text-align: center;
}

.lc-videos--centre .lc-videos__intro {
	margin-inline: auto;
}

.lc-videos__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-videos-columns, 3), minmax(0, 1fr));
	gap: var(--lc-videos-gap, var(--lc-space-md));
	/* Every cell takes the height of the tallest, so a name that wraps onto two
	   lines under one poster does not shorten the tile beside it. */
	align-items: stretch;
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   tile — is the grid item. */
.lc-videos__cell {
	display: flex;
	min-width: 0;
}

/* One column is a single tile, held to a readable width rather than stretched
   the whole width of the section: a 16:9 film across 1180px is a screen, not a
   tile in a row. */
.lc-videos--one .lc-videos__grid {
	max-width: 46rem;
}

.lc-videos--one.lc-videos--centre .lc-videos__grid {
	margin-inline: auto;
}

.lc-video {
	flex: 1;
	min-width: 0;
	/* Both arrangements are this one grid. With the words on the poster the two
	   rows are collapsed onto one another below; beneath it they stay as they
	   are, which is a video with a caption under it. */
	display: grid;
	grid-template-rows: auto auto;
	color: inherit;
}

/* The poster is cropped to the section's shape by `.lc-media`'s own
   `--lc-media-ratio`, which the section declares — so the only thing left to
   say here is which part of it survives that crop. */
.lc-video .lc-media__image {
	object-position: var(--lc-video-focal, center);
	transition: transform 0.6s ease;
}

/* A tile with no video and no poster yet: the same shape as its neighbours, in
   the accent rather than the media block's own grey, so a stream can go up the
   day it is announced and get its film the week somebody edits one. */
.lc-video .lc-media--empty {
	background-color: var(--lc-accent-deep);
}

/* Photography is black and white throughout the brand (p.30). It reaches the
   poster and stops there: a film that has been started plays in the colour it
   was shot in, because the filter is on the image and the player replaces it. */
.lc-videos--mono .lc-video .lc-media__image {
	filter: grayscale(1);
}

/* Brand colour overlay (p.31–34): luminosity from the poster, hue from the
   tint, which is a duotone rather than a wash. */
.lc-videos--tinted .lc-video .lc-media {
	background-color: var(--lc-media-tint);
}

.lc-videos--tinted .lc-video .lc-media__image {
	mix-blend-mode: luminosity;
}

.lc-video__text {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
}

.lc-videos--centre .lc-video__text {
	align-items: center;
	text-align: center;
}

/* ---- Words on the poster ---- */

/* The two grid rows are collapsed onto one another and the caption is pinned to
   the foot of the cell. Stacking them this way rather than positioning the
   caption absolutely keeps the tile's own height the poster's height, which is
   what makes a row of them line up.

   `pointer-events: none` is what keeps the whole tile one target: the name sits
   over the poster's link, and a visitor who presses the words has pressed the
   video, which is what they meant. */
.lc-videos--over .lc-video .lc-media,
.lc-videos--over .lc-video__text {
	grid-area: 1 / 1;
}

.lc-videos--over .lc-video__text {
	align-self: end;
	position: relative;
	z-index: 1;
	pointer-events: none;
	padding: var(--lc-space-lg) var(--lc-space-md) var(--lc-space-md);
}

/* The scrim: the canvas colour laid back over the foot of the poster so the
   name keeps its contrast against whatever frame the video was thumbnailed on.
   It follows the canvas, as the Locations tile's does — darkening on black and
   deep accent, where the words are cream, and lightening on cream and light
   accent, where they are black.

   Drawn on the caption rather than as an element of its own inside the picture,
   which is what gets it out of the way when the player arrives: it goes with
   the words, and nothing is left lying over a playing video. */
.lc-videos--over .lc-video__text::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(
		to top,
		var(--lc-video-scrim-color, var(--lc-black)) 0%,
		transparent 100%
	);
	opacity: var(--lc-videos-scrim, 0.7);
}

.lc-canvas--cream .lc-video__text::before {
	--lc-video-scrim-color: var(--lc-cream);
}

.lc-canvas--light .lc-video__text::before {
	--lc-video-scrim-color: var(--lc-accent-light);
}

.lc-canvas--deep .lc-video__text::before {
	--lc-video-scrim-color: var(--lc-accent-deep);
}

/* The caption is inside the tile's crop while it sits on the poster, so the
   tile has to carry the same corners the picture does or the gradient prints
   square across two rounded ones. */
.lc-videos--over .lc-video {
	border-radius: var(--lc-media-radius, 12px);
	overflow: hidden;
}

/* Gone the moment the player is in. A following sibling, so this needs no
   parent selector: `lc-video.js` puts the class on the figure, and the caption
   is the element after it. */
.lc-videos--over .lc-media--playing ~ .lc-video__text {
	display: none;
}

/* A video the site hosts is not a poster — it is the browser's own player, with
   its controls along the foot of the frame, which is exactly where the caption
   would be. So it prints beneath whatever the section is set to, and says so in
   the field description rather than quietly overlapping. */
.lc-videos--over .lc-media--file ~ .lc-video__text {
	grid-area: auto;
	position: static;
	pointer-events: auto;
	padding: var(--lc-space-sm) 0 0;
}

.lc-videos--over .lc-media--file ~ .lc-video__text::before {
	display: none;
}

/* ---- Words under the poster ---- */

/* They sit on the section's own canvas, so they need holding off the picture
   rather than insetting into it. */
.lc-videos--under .lc-video__text {
	padding-top: var(--lc-space-sm);
}

/* ---- The words themselves ---- */

/* Two classes, so it outranks the doubled heading rules in section 2. A step
   below the Locations name: a stream name sits over a 16:9 still rather than a
   tall portrait, so there is less picture under it to fill. */
.lc-video__name.lc-video__name {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.375rem, 2vw, 2rem);
	line-height: 1.1;
	margin: 0;
}

/* The descriptor treatment — Medium, caps, +50 tracking (p.15). The caps are
   the stylesheet's, not the author's: a row filled in by three different people
   still prints as one row. */
.lc-video__meta {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.875rem;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
	margin: 0;
	opacity: 0.85;
}

/* The poster comes forward under the pointer rather than the tile lifting off
   the page: the tiles butt up against a gap of a few pixels, and a shadow in
   that gap reads as a mistake. The badge has its own hover in section 18. */
@media (hover: hover) {
	.lc-video a.lc-media__poster:hover .lc-media__image {
		transform: scale(1.04);
	}
}

/* Two steps down, as the cards and the locations do it. */
@media (max-width: 980px) {
	.lc-videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Nothing to step down from — a single tile stays a single tile. */
	.lc-videos--one .lc-videos__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.lc-videos__grid {
		grid-template-columns: 1fr;
	}

	.lc-videos {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	/* The caption's own inset comes down with the section's. */
	.lc-videos--over .lc-video__text {
		padding: var(--lc-space-md) var(--lc-space-sm) var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   25. Menu — the whole navigation, as one panel
   Written for Divi's canvas: the panel an icon in the header opens. Nothing in
   here opens or closes anything, and there is no script at all — the canvas
   already owns the scroll lock, the focus trap and the close, and a second
   script fighting it for them is how a menu ends up unable to be closed on a
   phone.

   The shape is a grid of columns of links with a side panel beside them
   carrying the two things a church site is actually opened for — Church Center
   and giving — the search field under them, and the social row at the foot.
   Everything but the columns is furniture set on the section, because
   furniture authored per column drifts apart.
   ------------------------------------------------------------------------- */

.lc-menu {
	/* The hairlines and the search field's well, as a shade of whatever the
	   canvas sets the text to. Two properties rather than `.lc-rule`, because
	   the rules are drawn on the head, the foot and the columns rather than on
	   the section, and `border-color` is not inherited. */
	--lc-menu-rule: rgba(0, 0, 0, 0.2);
	--lc-menu-well: rgba(0, 0, 0, 0.05);
	/* The standing size for a link. Each column overrides it. */
	--lc-menu-size: 1.0625rem;
	--lc-menu-list-gap: 0.55rem;

	display: flex;
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-menu.lc-canvas--black,
.lc-menu.lc-canvas--deep {
	--lc-menu-rule: rgba(247, 246, 238, 0.3);
	--lc-menu-well: rgba(247, 246, 238, 0.08);
}

/* The canvas as a colour rather than a class, for the one thing in the panel
   that has to repaint it: the head, which is pinned to the top of a menu long
   enough to scroll and needs something opaque under it or the links pass
   through the wordmark. Four lines rather than `background-color: inherit`,
   which would only reach the head through an ancestor painting the same colour
   over everything the module's own background settings put there. */
.lc-menu.lc-canvas--cream {
	--lc-menu-canvas: var(--lc-cream);
}

.lc-menu.lc-canvas--black {
	--lc-menu-canvas: var(--lc-black);
}

.lc-menu.lc-canvas--light {
	--lc-menu-canvas: var(--lc-accent-light);
}

.lc-menu.lc-canvas--deep {
	--lc-menu-canvas: var(--lc-accent-deep);
}

.lc-menu__inner {
	flex: 1;
	min-width: 0;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-md);
}

/* A menu opened over the page has no line of copy in it to hold to a measure,
   so it is worth letting out of the 1180px the reading sections keep to — and
   in a canvas that fills the screen, 1180px centred with the rest empty reads
   as a panel that failed to load. */
.lc-menu--width-row .lc-menu__inner,
.lc-menu--width-bleed .lc-menu__inner {
	max-width: none;
}

/* The same escape LC Statement's band makes, and it needs the same clip on the
   document or the negative margins show as a horizontal scrollbar. */
.lc-menu--width-bleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

html:has(.lc-menu--width-bleed) {
	overflow-x: clip;
}

/* The panel scrolls; the page behind it does not
   ----------------------------------------------
   The canvas Divi opens is a section pinned to the viewport — `position: fixed`,
   top left, height driven by whatever is in it. That is fine while the menu is
   wider than it is tall. On a phone the columns stack, the panel grows past the
   bottom of the screen, and because a fixed element does not scroll with the
   document there is nothing left to reach the foot of it with: the campuses, the
   giving button and the search field are simply off the screen.

   So the panel is capped at the height of the screen and given a scroller of its
   own. `dvh` rather than `vh` because on a phone `vh` is measured against the
   screen with the address bar retracted, which puts the last inch of the menu
   under browser furniture that has not moved yet; `vh` stays as the line before
   it for anything that has not got `dvh`.

   Keyed on Divi's own class for a section set to fixed, so a menu dropped
   straight onto a page — where the document scrolls and this would be a
   scrollbox inside a scrollbox — is left alone. `overscroll-behavior` keeps a
   flick that reaches the end of the menu from carrying on into the page behind
   it, and `overflow-x` is stated rather than left to the browser, which would
   otherwise promote it to `auto` alongside the y and hang a horizontal scrollbar
   off a bled-out panel. */
.et_pb_section--fixed:has(.lc-menu) {
	max-height: 100vh;
	max-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The mark, and whatever names the panel
   ------------------------------------- */

.lc-menu__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lc-space-sm);
}

.lc-menu--framed .lc-menu__head {
	padding-bottom: var(--lc-space-sm);
	border-bottom: 1px solid var(--lc-menu-rule);
}

/* A head holding nothing but a close button the script never revealed is not a
   row, and the frame's hairline would print over nothing. The button is still
   in it — `:empty` will not do — so the test is whether anything in there is
   actually showing. */
.lc-menu--framed .lc-menu__head:not(:has(> :not([hidden]))) {
	padding-bottom: 0;
	border-bottom: 0;
}

/* The head rides along
   -------------------
   A menu long enough to need the scroller above takes its head with it, which
   takes the × with it: scrolled to the foot of a phone-height panel, the only
   way out is back up the whole menu. So in a canvas the head pins to the top of
   it — the mark, whatever names the panel, and the way out, all still there at
   the bottom of the longest menu.

   Only where there is a × to keep: a head pinned for the sake of a mark is a
   third of a phone screen spent on furniture. And only inside a fixed section,
   because a menu dropped straight onto a page scrolls with the document, and a
   head that stuck to the viewport through that would be a header the page never
   asked for.

   The hairline the frame draws is what the links pass under; an unframed head
   has the inner's gap under it instead, which scrolls away — so the panel reads
   better framed when it is long enough to scroll, and that is the default. */
.et_pb_section--fixed .lc-menu--closable .lc-menu__head {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--lc-menu-canvas);
}

/* `top: 0` is the top of the scroller's padding box, and the canvas is a Divi
   section with its own padding, so the head pins an inch down and the links
   would climb through the band above it. This fills that band with the same
   colour: a viewport's worth of it, above the head and travelling with it,
   clipped by the scroller because nothing scrolls up past its own beginning. */
.et_pb_section--fixed .lc-menu--closable .lc-menu__head::before {
	content: "";
	position: absolute;
	inset: auto 0 100%;
	height: 100vh;
	background-color: inherit;
}

/* The way out
   ----------
   Printed hidden and revealed by lc-menu.js once it has found a canvas around
   it — an × that cannot close anything is worse than no × — so the attribute
   is enforced here as well: a theme that sets `display` on buttons would
   otherwise show one before the script had decided. */
.lc-menu__close[hidden] {
	display: none;
}

/* The far end of the first row, whatever else is in it. The head wraps and the
   heading claims a whole line of its own, so the two are ordered rather than
   left to the source: the button belongs beside the mark, and the heading
   belongs under both. */
.lc-menu--closable .lc-menu__close {
	order: 1;
	margin-inline-start: auto;
}

.lc-menu--closable .lc-menu__head .lc-menu__heading {
	order: 2;
}

/* 44px square: the size a thumb needs, which is also the size that stops it
   reading as a stray glyph. The well and the hairline are the search field's,
   so the two controls the panel prints are the same object at two widths. */
.lc-menu__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	background-color: var(--lc-menu-well);
	border: 1px solid var(--lc-menu-rule);
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lc-menu__close:hover,
.lc-menu__close:focus-visible {
	border-color: currentColor;
}

/* The same ring the search box takes, for the same reason: it is drawn in the
   canvas's own text colour, so it is visible on all four. */
.lc-menu__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-menu__close-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.lc-menu__mark {
	display: block;
	flex: none;
	max-width: 100%;
}

/* Sized by width: the supplied marks are square files with the artwork centred
   in them. Two classes, so it beats the fixed height `.lc-emblem` carries for
   the modules that set one inline in a band of copy. */
.lc-menu__mark .lc-menu__mark-image {
	display: block;
	width: var(--lc-menu-mark, 56px);
	max-width: 100%;
	height: auto;
}

/* The mark recoloured to the canvas.
   ---------------------------------
   One supplied file on all four canvases, rather than the two colourways set
   separately on the settings screen. The `<img>` is kept, hidden, purely to
   hold the box at the file's own proportions — nothing here knows whether the
   emblem is square or wide, and guessing is how a mark ends up letterboxed —
   and the shape is painted over it in `currentColor`, so it is the canvas's own
   text colour on cream, black and both accents.

   The artwork is the supplied vector either way: masking uses its outline and
   paints it one of the two colours the brand ships it in. Nothing is redrawn,
   which is what page 12 forbids. */
.lc-menu__mark-shape {
	position: relative;
	display: block;
	width: var(--lc-menu-mark, 56px);
	max-width: 100%;
}

.lc-menu__mark-shape .lc-menu__mark-image {
	width: 100%;
	height: auto;
	/* Hidden rather than removed: it is still the thing holding the height. */
	visibility: hidden;
}

.lc-menu__mark-shape::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--lc-menu-mark-src) center / contain no-repeat;
	mask: var(--lc-menu-mark-src) center / contain no-repeat;
}

/* The descriptor treatment — Medium, caps, +50 tracking (p.15) — written out
   here rather than borrowing `.lc-descriptor`, so the line beside the mark and
   the headings over the columns can be sized apart without one following the
   other. */
.lc-menu__descriptor {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.8125rem;
	line-height: var(--lc-leading-display);
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
	margin: 0;
	opacity: 0.8;
}

/* Two classes, so it outranks the doubled heading rules in section 2. On its
   own row: a headline beside a mark and a descriptor is three things fighting
   for one line. */
.lc-menu__heading.lc-menu__heading {
	flex-basis: 100%;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: var(--lc-leading-display);
	letter-spacing: 0;
	margin: 0;
	text-wrap: balance;
}

/* The body: columns, and the side panel
   ------------------------------------ */

.lc-menu__body {
	display: grid;
	gap: var(--lc-menu-gap, 2rem);
	align-items: start;
}

.lc-menu--asided .lc-menu__body {
	grid-template-columns: minmax(0, 1fr) var(--lc-menu-aside, 320px);
}

.lc-menu--asided.lc-menu--aside-left .lc-menu__body {
	grid-template-columns: var(--lc-menu-aside, 320px) minmax(0, 1fr);
}

/* The side panel is printed after the columns whichever side it is drawn on,
   so the reading and tab order is the menu first and the furniture after it.
   `order` moves the boxes and leaves both alone — which is the whole reason to
   reach for it rather than reordering the markup. */
.lc-menu--aside-left .lc-menu__columns {
	order: 2;
}

.lc-menu--aside-left .lc-menu__aside {
	order: 1;
}

.lc-menu__columns {
	display: grid;
	grid-template-columns: repeat(var(--lc-menu-columns, 3), minmax(0, 1fr));
	gap: var(--lc-menu-gap, 2rem);
	align-items: start;
	min-width: 0;
}

.lc-menu__column {
	min-width: 0;
}

.lc-menu__column--span-2 {
	grid-column: span 2;
}

.lc-menu__column--span-3 {
	grid-column: span 3;
}

/* The hairline down the gap.
   -------------------------
   A rule between columns and not before the first one, without any rule being
   able to know which column starts a row — the count is a custom property, so
   `:nth-child()` cannot be told it, and a seventh column wrapping onto a second
   row moves the answer anyway.

   So every column draws one, pulled half a gap to its left, and the grid clips
   what falls outside it. Every row's first column starts at the same x, so the
   one rule that lands at a negative offset is clipped on every row at once.
   `clip` rather than `hidden`: it does not make the grid a scroll container. */
.lc-menu--divided .lc-menu__columns {
	overflow: clip;
}

.lc-menu--divided .lc-menu__column {
	border-left: 1px solid var(--lc-menu-rule);
	padding-left: calc(var(--lc-menu-gap, 2rem) / 2);
	margin-left: calc(var(--lc-menu-gap, 2rem) / -2);
}

.lc-menu--divided.lc-menu--asided .lc-menu__aside {
	border-left: 1px solid var(--lc-menu-rule);
	padding-left: calc(var(--lc-menu-gap, 2rem) / 2);
	margin-left: calc(var(--lc-menu-gap, 2rem) / -2);
}

.lc-menu--divided.lc-menu--aside-left .lc-menu__aside {
	border-left: 0;
	border-right: 1px solid var(--lc-menu-rule);
	padding-left: 0;
	padding-right: calc(var(--lc-menu-gap, 2rem) / 2);
	margin-left: 0;
	margin-right: calc(var(--lc-menu-gap, 2rem) / -2);
}

/* Column headings and the lists
   ---------------------------- */

/* The descriptor treatment again, and set back: in a panel that is nothing but
   links, the links are what somebody is scanning and the headings are how they
   find the right handful. Two classes, so it beats the `h1`–`h6` rules Divi
   prints from Theme Options. */
.lc-menu__column-title.lc-menu__column-title,
.lc-menu__aside-heading {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.8125rem;
	line-height: var(--lc-leading-display);
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
	margin: 0 0 var(--lc-space-sm);
	opacity: 0.65;
}

/* Two classes on every list in the panel, and on their items.
   ----------------------------------------------------------
   Divi's own stylesheet sets `list-style-type: disc` and `padding: 0 0 23px
   1em` on `.et-l--header ul, .et-l--body ul, .et-l--footer ul` — one class and
   one type, which beats a list carrying only its own. In a Theme Builder
   layout, which is the only place this module is used, that put a bullet
   before every link in the menu and 23px of dead space under every column. */
.lc-menu .lc-menu__list {
	display: flex;
	flex-direction: column;
	gap: var(--lc-menu-list-gap, 0.55rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-menu .lc-menu__item {
	margin: 0;
	min-width: 0;
	list-style: none;
}

.lc-menu__link {
	display: block;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

/* A tag selector as well as the class, so this matches the specificity of
   Divi's own `.et-l a` link colour and, coming later in the sheet, beats it:
   the panel's words are the canvas pairing, not a link colour. */
a.lc-menu__link {
	color: inherit;
	text-decoration: none;
}

.lc-menu__label {
	display: block;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: var(--lc-menu-size, 1.0625rem);
	line-height: 1.15;
	letter-spacing: 0;
	text-wrap: balance;
}

/* The small line under a label. */
.lc-menu__note {
	display: block;
	margin-top: 0.3em;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	letter-spacing: 0;
	opacity: 0.7;
}

/* An entry with no destination yet. Printed rather than dropped — a menu being
   drafted has entries whose pages do not exist — and plainly not a link, so
   nobody presses it twice wondering why nothing happened. */
.lc-menu__link--plain {
	opacity: 0.5;
	cursor: default;
}

/* The four sizes. The one thing worth deciding per column: a menu where
   everything is the same size is a list to be read, where a menu with one
   display column and three quiet ones is a menu to be used. */
.lc-menu__column--display {
	--lc-menu-size: clamp(2rem, 4.2vw, 3.25rem);
	--lc-menu-list-gap: 0.3rem;
}

.lc-menu__column--large {
	--lc-menu-size: clamp(1.375rem, 2.2vw, 1.875rem);
	--lc-menu-list-gap: 0.45rem;
}

.lc-menu__column--medium {
	--lc-menu-size: 1.0625rem;
	--lc-menu-list-gap: 0.55rem;
}

.lc-menu__column--small {
	--lc-menu-size: 0.9375rem;
	--lc-menu-list-gap: 0.45rem;
}

/* The stylesheet's capitals rather than the author's, so a column typed
   inconsistently still prints consistently — and the label a screen reader
   reads out is still the sentence that was typed. */
.lc-menu__column--caps .lc-menu__label {
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-descriptor);
}

/* +50 tracking is a spec for 13px type. At display size the same figure opens
   the words up until they stop being one shape, so it comes almost all the way
   off. */
.lc-menu__column--display.lc-menu__column--caps .lc-menu__label,
.lc-menu__column--large.lc-menu__column--caps .lc-menu__label {
	letter-spacing: 0.01em;
}

.lc-menu__column--underlined .lc-menu__label {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.18em;
}

.lc-menu__column-body {
	margin-top: var(--lc-space-sm);
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.7;
}

.lc-menu__column-body p {
	margin: 0 0 0.6em;
}

.lc-menu__column-body p:last-child {
	margin-bottom: 0;
}

/* A step towards the reader rather than a repaint. It is the one
   acknowledgement that reads the same at every one of the four sizes, on all
   four canvases, and on a column that is already underlined — where drawing a
   line under the words on hover would say nothing at all. */
@media (hover: hover) {
	a.lc-menu__link:hover {
		transform: translateX(0.15em);
	}
}

a.lc-menu__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* The side panel
   ------------- */

.lc-menu__aside {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	min-width: 0;
}

.lc-menu__actions {
	gap: 0.5rem;
}

/* Side by side and filling the width: these two are what the panel is opened
   for on a phone, and a button that shrinks to its label at the top of a full
   screen of type is not the first thing anyone sees. */
.lc-menu__action {
	flex: 1;
	min-width: 0;
	padding: 0.95em 1.1em;
	text-align: center;
}

/* The accent fill, drawn here rather than as a button variant so it stays
   inside the palette on every canvas. The light accent on a light-accent
   ground is not a button, so where the canvas is already light the fill steps
   up to the mid accent — still black type, per the swatch pages (p.19/22/25). */
.lc-menu__action--accent {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	border-color: var(--lc-accent-light);
}

.lc-canvas--light .lc-menu__action--accent {
	background-color: var(--lc-accent-mid);
	color: var(--lc-black);
	border-color: var(--lc-accent-mid);
}

/* The search field. A plain form with a real action: it submits on Return from
   the keyboard alone, before any script has run, and keeps working if one
   fails. */
.lc-menu__search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85em 1em;
	background-color: var(--lc-menu-well);
	border: 1px solid var(--lc-menu-rule);
}

/* The focus ring goes on the box rather than the field, because the box is
   what looks like the control. */
.lc-menu__search:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-menu__search-input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 1rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.lc-menu__search-input:focus {
	outline: none;
}

.lc-menu__search-input::placeholder {
	color: inherit;
	opacity: 0.55;
}

.lc-menu__search-input::-webkit-search-cancel-button,
.lc-menu__search-input::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* Inside the builder the field is a span carrying the placeholder as text —
   nothing in a builder canvas should be typeable or submittable — so it takes
   the placeholder's own dimming rather than looking like a filled-in field. */
span.lc-menu__search-input {
	opacity: 0.55;
}

.lc-menu__search-go {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.lc-menu__search-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* The foot
   -------- */

.lc-menu__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lc-space-sm);
}

.lc-menu--framed .lc-menu__foot {
	padding-top: var(--lc-space-sm);
	border-top: 1px solid var(--lc-menu-rule);
}

/* An empty foot still has its rule, which would print as a line across the
   bottom of the panel with nothing under it. */
.lc-menu__foot:empty {
	display: none;
}

.lc-menu__footnote {
	margin: 0;
	max-width: var(--lc-measure);
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.7;
}

/* The footnote is the panel's one rich-text field, so what is inside it is a
   paragraph — the same treatment the column bodies get, and for the same
   reason: the wrapper carries the type and the paragraphs inside it carry the
   spacing, with none left hanging under the last one. */
.lc-menu__footnote p {
	margin: 0 0 0.6em;
}

.lc-menu__footnote p:last-child {
	margin-bottom: 0;
}

/* Same again — six marks in a row, not six bulleted list items. */
.lc-menu .lc-menu__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-menu .lc-menu__social-item {
	margin: 0;
	list-style: none;
}

.lc-menu__social-link {
	display: block;
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

a.lc-menu__social-link {
	color: inherit;
	text-decoration: none;
}

/* Drawn rather than set in an icon font: the font lives in the Divi theme's
   own folder and is a second request for six glyphs, and a missing font shows
   as a blank box where a missing SVG shows as nothing. Inline, they take the
   canvas text colour, so the row is inside the palette on all four canvases
   without a rule per pairing. */
.lc-menu__social-icon {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

@media (hover: hover) {
	a.lc-menu__social-link:hover {
		opacity: 1;
		transform: translateY(-2px);
	}
}

a.lc-menu__social-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Read out, never drawn. `aria-label` would do the same job in one attribute,
   but it is dropped by most page translation tools — and a menu that says
   "Facebook" in English and "Facebook" in French is a menu nobody translated. */
.lc-menu__hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Stepping down
   -------------
   Two steps, as the cards and the locations take them. The side panel goes
   under the columns first, because it is the narrowest thing in the row and
   the first to stop being a column; the columns halve at the same width and
   stack at the second step. */
@media (max-width: 1080px) {
	.lc-menu--asided .lc-menu__body,
	.lc-menu--asided.lc-menu--aside-left .lc-menu__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-menu--aside-left .lc-menu__columns,
	.lc-menu--aside-left .lc-menu__aside {
		order: 0;
	}

	/* Under the columns rather than beside them, so the hairline that separated
	   the two turns through ninety degrees with them. */
	.lc-menu--divided.lc-menu--asided .lc-menu__aside,
	.lc-menu--divided.lc-menu--aside-left .lc-menu__aside {
		border-left: 0;
		border-right: 0;
		border-top: 1px solid var(--lc-menu-rule);
		margin: 0;
		padding: var(--lc-menu-gap, 2rem) 0 0;
	}

	.lc-menu__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Nothing to step down from — one column stays one column. */
	.lc-menu--one .lc-menu__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-menu__column--span-2,
	.lc-menu__column--span-3 {
		grid-column: span 2;
	}
}

@media (max-width: 720px) {
	.lc-menu {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	.lc-menu__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-menu__column--span-2,
	.lc-menu__column--span-3 {
		grid-column: span 1;
	}

	/* One under another, the rule between columns is a rule across the panel:
	   the vertical hairline and its half-gap pull come off, and what separates
	   them is a line above each one after the first. */
	.lc-menu--divided .lc-menu__columns {
		overflow: visible;
	}

	.lc-menu--divided .lc-menu__column {
		border-left: 0;
		margin-left: 0;
		padding-left: 0;
	}

	.lc-menu--divided .lc-menu__column + .lc-menu__column {
		border-top: 1px solid var(--lc-menu-rule);
		padding-top: var(--lc-menu-gap, 2rem);
	}

	/* Two full-width buttons stacked are two targets; two half-width ones on a
	   phone are two labels that have run out of room. */
	.lc-menu__actions {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------------
   26. Search results — the page behind the lens in the menu

   Two bands: what was asked, on black, with the field repeated under it; and
   what was found, on cream. Nothing here is a module and nothing here is
   configurable — a results page is furniture, and furniture that four sites
   style four different ways is four different sites.
   ------------------------------------------------------------------------- */

.lc-search {
	/* The hairline between results, and the colour of the quieter lines under
	   them, as a shade of the cream canvas's text rather than a grey of their
	   own. */
	--lc-search-rule: rgba(0, 0, 0, 0.14);
	--lc-search-quiet: rgba(0, 0, 0, 0.55);

	/* A chosen pill is filled by swapping the canvas and its text colour round,
	   the same two rules the events filter and the sermon switcher use. */
	--lc-pill-on-bg: var(--lc-black);
	--lc-pill-on-fg: var(--lc-cream);
}

/* ---- What was asked ---- */

.lc-search__head {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-search__head-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
}

/* The count, in the stream's own light accent — the one piece of colour on the
   band, and ~14:1 on black. */
.lc-search__summary {
	color: var(--lc-accent-light);
}

/* Smaller than a hero's display type: this is a heading over a list, not the
   opening line of a page, and the query inside it is somebody else's text and
   can be any length at all. */
.lc-search__title.lc-search__title {
	font-size: clamp(1.875rem, 4.4vw, 3.5rem);
	overflow-wrap: anywhere;
}

/* ---- The field ---- */

.lc-search__form {
	display: flex;
	align-items: center;
	gap: var(--lc-space-xs);
	width: 100%;
	max-width: 40rem;
	margin-top: var(--lc-space-xs);
	border-bottom: 1px solid rgba(247, 246, 238, 0.35);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* The rule is the focus mark. It has to be visible enough to be one, so it
   doubles in weight and takes the accent — the input's own outline is removed
   below, and a field with neither would be a field nobody can find by
   keyboard. */
.lc-search__form:focus-within {
	border-bottom-color: var(--lc-accent-light);
	box-shadow: 0 1px 0 0 var(--lc-accent-light);
}

.lc-search__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.4;
	color: inherit;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0.85rem 0;
	appearance: none;
	-webkit-appearance: none;
}

.lc-search__input:focus {
	outline: none;
}

.lc-search__input::placeholder {
	color: currentColor;
	opacity: 0.45;
}

/* Safari draws a grey cross inside a type="search" that has nothing to do with
   this palette, and clearing the field is what the keyboard is for. */
.lc-search__input::-webkit-search-cancel-button,
.lc-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.lc-search__go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.lc-search__go:hover {
	opacity: 0.7;
}

.lc-search__go:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-search__icon {
	display: block;
}

/* ---- What was found ---- */

.lc-search__body {
	padding: var(--lc-space-lg) var(--lc-space-md) var(--lc-space-xl);
}

.lc-search__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lc-search__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--lc-space-md);
}

.lc-search__pill {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.7rem 1.15rem;
	border: 1px solid;
	border-radius: 999px;
	color: inherit;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lc-search__pill:hover {
	background-color: rgba(0, 0, 0, 0.07);
}

.lc-search__pill:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* After the hover rule, so the chosen pill stays filled when the pointer is on
   it rather than washing to a colour between the two. */
.lc-search__pill--on,
.lc-search__pill--on:hover {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

/* The number is a second thought on the pill, not half its label: it is set in
   figures rather than caps, so it does not compete with the name beside it. */
.lc-search__pill-count {
	font-weight: var(--lc-weight-body);
	font-size: 0.6875rem;
	letter-spacing: 0;
	opacity: 0.65;
}

/* ---- The results ---- */

/*
 * A reading column, not the width of the band above it.
 *
 * The hairlines between results are as wide as the list, so a list held at
 * 1180px would draw a rule twice the length of the sentence under it and leave
 * half the page empty to the right of every result. Held here instead, the
 * rules end where the reading ends — and flush left, at the same margin the
 * band's own words start from.
 */
.lc-search__results {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 52rem;
}

.lc-search__result {
	border-top: 1px solid var(--lc-search-rule);
}

.lc-search__result:last-child {
	border-bottom: 1px solid var(--lc-search-rule);
}

/*
 * The whole row is the link, not the title inside it. A result is a thing to
 * press, and on a phone a target the width of the page is the difference
 * between pressing it and pressing the one below.
 *
 * The bar on the left is drawn as an inset shadow rather than a border, so it
 * appears without the row changing height and without moving the hairline
 * above it.
 */
.lc-search__link {
	display: flex;
	align-items: flex-start;
	gap: var(--lc-space-sm);
	padding: var(--lc-space-sm) 0;
	color: inherit;
	text-decoration: none;
	box-shadow: inset 0 0 0 0 var(--lc-accent-deep);
	transition: box-shadow 0.18s ease, padding-left 0.18s ease;
}

.lc-search__link:hover,
.lc-search__link:focus-visible {
	box-shadow: inset 3px 0 0 0 var(--lc-accent-deep);
	padding-left: var(--lc-space-sm);
}

.lc-search__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.lc-search__link:hover .lc-search__name {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.lc-search__thumb {
	flex: 0 0 auto;
	display: block;
	width: 132px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--lc-accent-light);
}

/* The reserved column on a result that has no picture: the gutter, and nothing
   in it. A tint here would read as a picture that failed to load. */
.lc-search__thumb--blank {
	background-color: transparent;
}

.lc-search__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.lc-search__link:hover .lc-search__image {
	transform: scale(1.04);
}

/* `min-width: 0` so a long unbroken word in a title cannot push the row wider
   than the page — a flex item's minimum is its content unless it is told
   otherwise. */
.lc-search__text {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.lc-search__kicker {
	opacity: 0.6;
}

.lc-search__name {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* No measure of its own: the list is already held to one, and a second cap
   inside it would only shorten the lines on results that have no picture. */
.lc-search__excerpt {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 1rem;
	line-height: var(--lc-leading-body);
}

/* Where the thing is, rather than what its address is. Set quietly, because it
   is only read when two results have the same name. */
.lc-search__trail {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--lc-search-quiet);
	overflow-wrap: anywhere;
}

/* The words that were searched for, wherever they turn up in a title or a
   passage. The light accent behind the canvas's own black is the only
   highlight in the palette that does not invent a colour. */
.lc-search mark {
	background-color: var(--lc-accent-light);
	color: inherit;
	padding: 0 0.12em;
	border-radius: 2px;
}

/* ---- Nothing found ---- */

.lc-search__nothing {
	max-width: var(--lc-measure);
}

.lc-search__empty {
	font-family: var(--lc-font-serif);
	font-style: italic;
	font-size: 1.125rem;
	line-height: var(--lc-leading-body);
	margin: 0;
}

.lc-search__advice {
	margin: var(--lc-space-sm) 0;
}

.lc-search__filters--suggestions {
	margin-bottom: 0;
}

/* A suggested word is the visitor's own, so it is printed as they typed it
   rather than shouted back at them in the caps a filter wears. */
.lc-search__filters--suggestions .lc-search__pill {
	text-transform: none;
	font-size: 0.8125rem;
	letter-spacing: 0;
}

/* ---- The pages ---- */

/* Centred under the list rather than under the band, so it sits with the
   results it pages and not out to the right of them. */
.lc-search__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	max-width: 52rem;
	margin-top: var(--lc-space-lg);
}

.lc-search__page {
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	text-decoration: none;
	min-width: 2.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid;
	border-radius: 999px;
	text-align: center;
	color: inherit;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lc-search__page--wide {
	padding-left: 1.15rem;
	padding-right: 1.15rem;
}

.lc-search__page:hover {
	background-color: rgba(0, 0, 0, 0.07);
}

.lc-search__page:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.lc-search__page--on,
.lc-search__page--on:hover {
	background-color: var(--lc-pill-on-bg);
	border-color: var(--lc-pill-on-bg);
	color: var(--lc-pill-on-fg);
}

.lc-search__gap {
	align-self: center;
	font-family: var(--lc-font-sans);
	font-size: 0.75rem;
	letter-spacing: var(--lc-tracking-descriptor);
	opacity: 0.5;
}

@media (max-width: 720px) {
	.lc-search__head {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	.lc-search__body {
		padding: var(--lc-space-md) var(--lc-space-sm) var(--lc-space-lg);
	}

	.lc-search__thumb {
		width: 92px;
	}

	/* The reserved gutter goes. On a phone it costs a quarter of the line, and
	   the rows are far enough apart vertically that two margins read as two
	   results rather than as a list that has come apart — which is the opposite
	   of the trade on a wide screen. */
	.lc-search__thumb--blank {
		display: none;
	}

	/* Held to three lines, so a page of results is something that can be
	   scanned on a phone. The passage was cut around the word that matched, so
	   the first line is the line worth reading. */
	.lc-search__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	/* The row is already the full width of a phone, so the bar has nowhere to
	   move the words to. */
	.lc-search__link:hover,
	.lc-search__link:focus-visible {
		padding-left: 0;
	}
}

/* ---------------------------------------------------------------------------
   27. Merch — a print run, both sides of it, and the two ways to buy
   A print run is not a shop. There is a fixed number of each thing, it sells in
   two places at once, and when it is gone it is gone — so the section is the
   Videos row's shape with the three things a row of films never needed: a tile
   that turns over, a size run with the gone sizes struck through, and a section
   that takes itself down on the day the pre-orders close.

   The turn is a stylesheet rule first and a script second. `:hover` on the
   figure does it for a pointer with nothing loaded at all; `lc-merch.js` adds
   `.is-turned` for the press, which is what a touchscreen and the keyboard
   have. Both set the same transform, so a tile turned by the button and then
   pointed at does not flip back and forth.
   ------------------------------------------------------------------------- */

.lc-merch {
	padding: var(--lc-space-lg) var(--lc-space-md);
}

.lc-merch__inner {
	max-width: 1180px;
	margin: 0 auto;
	/* As the Videos row and the Hero: a module root is a flex container in
	   Divi 5, and a flex item with `margin: 0 auto` sizes itself to its content
	   rather than stretching. */
	width: 100%;
}

.lc-merch__head {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	margin-bottom: var(--lc-space-lg);
}

.lc-merch--centre .lc-merch__head {
	align-items: center;
	text-align: center;
}

/* The heading has to be told, rather than left to inherit it: the brand type
   scale sets `text-align: left` on the heading itself (p.15, flush left). */
.lc-merch--centre .lc-merch__head .lc-heading {
	text-align: center;
}

.lc-merch--centre .lc-merch__intro {
	margin-inline: auto;
}

/* --- The deadline ------------------------------------------------------- */

.lc-merch__deadline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lc-space-xs);
	margin: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.875rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
}

.lc-merch--centre .lc-merch__deadline {
	justify-content: center;
}

.lc-merch__deadline-label {
	opacity: 0.7;
}

/* How long is left, printed by the script beside the date the server rendered.
   Boxed rather than coloured, because the accent falls below 3:1 against three
   of the four canvases and this is the one line in the section that is there to
   be noticed. */
.lc-merch__left {
	padding: 0.15em 0.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.8125rem;
}

/* --- The run ------------------------------------------------------------ */

.lc-merch__grid {
	display: grid;
	grid-template-columns: repeat(var(--lc-merch-columns, 3), minmax(0, 1fr));
	gap: var(--lc-merch-gap, var(--lc-space-md));
	/* Every cell takes the height of the tallest, so a name that wraps onto two
	   lines under one piece does not shorten the tile beside it. */
	align-items: stretch;
}

/* Divi wraps every child module in a div of its own, so that wrapper — not the
   tile — is the grid item. */
.lc-merch__cell {
	display: flex;
	min-width: 0;
}

.lc-merch__item {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-sm);
	width: 100%;
}

/* --- The two faces ------------------------------------------------------ */

.lc-merch__figure {
	position: relative;
	aspect-ratio: var(--lc-merch-ratio, 1 / 1);
	border-radius: var(--lc-merch-radius, 12px);
	overflow: hidden;
	/* The depth the turn is seen through. Generous rather than tight: a short
	   perspective on a tile this size reads as a card being wrenched round. */
	perspective: 1400px;
}

.lc-merch--mounted .lc-merch__figure {
	background-color: var(--lc-merch-mount, var(--lc-cream));
}

.lc-merch__figure--empty {
	background-color: var(--lc-accent-light);
}

.lc-merch__faces {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

.lc-merch__face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--lc-merch-focal, center);
	/* Without this the face pointing away from the reader shows through the one
	   facing them, and both halves of the turn are legible at once. */
	backface-visibility: hidden;
}

/* A supplier render is a garment cut out on white, and cropping it to fill the
   tile cuts the sleeves off. Mounted, the whole garment is shown inside the
   tile with the mount as its ground; unmounted — a real photograph, shot on a
   real background — the tile is filled, which is what a photograph wants. */
.lc-merch--mounted .lc-merch__face {
	object-fit: contain;
	padding: var(--lc-space-sm);
}

.lc-merch__face--back {
	transform: rotateY(180deg);
}

/* The turn itself, in two lines. Everything else in this block is the control
   that asks for it. */
@media (hover: hover) and (pointer: fine) {
	.lc-merch__figure--two-sided:hover .lc-merch__faces {
		transform: rotateY(180deg);
	}
}

.lc-merch__figure--two-sided.is-turned .lc-merch__faces,
.lc-merch__figure--two-sided:focus-within .lc-merch__faces {
	transform: rotateY(180deg);
}

/* A run printed on one side only: the control goes, and so does the turn, in
   case a back photograph is left behind on a piece that no longer has one. */
.lc-merch--no-turn .lc-merch__turn {
	display: none;
}

.lc-merch--no-turn .lc-merch__faces {
	transform: none;
}

.lc-merch__turn {
	position: absolute;
	right: var(--lc-space-xs);
	bottom: var(--lc-space-xs);
	z-index: 1;
	padding: 0.4em 0.9em;
	border: 1px solid var(--lc-black);
	border-radius: 999px;
	background-color: var(--lc-cream);
	color: var(--lc-black);
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lc-merch__turn:hover,
.lc-merch__turn:focus-visible {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

/* Black and white is the brand's setting for photography (p.30) and the wrong
   one for a garment, whose colour is the thing being sold — so it is a switch
   an author reaches for rather than the default the other picture modules use. */
.lc-merch--mono .lc-merch__face {
	filter: grayscale(1);
}

/* --- What it is, and what is left of it --------------------------------- */

.lc-merch__text {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
}

.lc-merch--centre .lc-merch__text {
	align-items: center;
	text-align: center;
}

.lc-merch__name.lc-merch__name {
	margin: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.125rem;
	line-height: 1.3;
}

/* The wrapper is a div because it holds a heading. The anchor inside it is
   inline-block so the hit area is the name rather than the whole width of the
   tile — a stretched link is a link a reader can follow by clicking on nothing. */
.lc-merch__link-wrap {
	display: block;
}

.lc-merch__link {
	display: inline-block;
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.lc-merch__price {
	margin: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1rem;
}

.lc-merch__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lc-space-xs);
	margin: 0;
}

.lc-merch__colour {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--lc-font-sans);
	font-size: 0.8125rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
}

/* Bordered as well as filled, because the chip is often the colour of the thing
   behind it — a black garment on a black canvas is otherwise a chip nobody can
   see, which is the one job it has. */
.lc-merch__swatch {
	width: 0.85em;
	height: 0.85em;
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: var(--lc-merch-swatch, transparent);
}

.lc-merch__badge {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.6875rem;
	letter-spacing: var(--lc-tracking-descriptor);
	text-transform: uppercase;
}

.lc-merch__meta {
	margin: 0;
	font-family: var(--lc-font-sans);
	font-size: 0.875rem;
	line-height: var(--lc-leading-body);
	opacity: 0.8;
}

.lc-merch__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.lc-merch--centre .lc-merch__sizes {
	justify-content: center;
}

.lc-merch__size {
	min-width: 2.4em;
	padding: 0.25em 0.5em;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 0.75rem;
	text-align: center;
	letter-spacing: var(--lc-tracking-descriptor);
}

/* A size that has gone is struck through rather than dropped: the line says the
   run was small and this is what is left of it, where quietly removing it says
   only that the size was never printed. The word "sold out" rides along in
   `.lc-sr-only`, because a screen reader cannot see a line through anything. */
.lc-merch__size--gone {
	text-decoration: line-through;
	opacity: 0.45;
}

/* --- The two ways to buy ------------------------------------------------ */

.lc-merch__ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--lc-merch-gap, var(--lc-space-md));
	margin-top: var(--lc-space-lg);
	padding-top: var(--lc-space-lg);
	border-top: 1px solid currentColor;
}

.lc-merch__way {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-xs);
}

.lc-merch--centre .lc-merch__way {
	align-items: center;
	text-align: center;
}

.lc-merch__way-title.lc-merch__way-title {
	margin: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	font-size: 1.25rem;
	line-height: 1.2;
}

.lc-merch__way-body {
	margin: 0;
	max-width: var(--lc-measure);
}

.lc-merch__way-action {
	margin: var(--lc-space-xs) 0 0;
}

/* Once the closing date has passed both panels are replaced by one line. The
   pieces above it stay: people still want to see what they missed, and a page
   that empties itself the morning after looks broken rather than finished. */
.lc-merch__ways--closed {
	display: block;
}

.lc-merch__closed {
	margin: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
}

/* --- Over the page ------------------------------------------------------ */

/* Set to show over the page there is nothing in the flow — a fixed bar and a
   closed dialog, neither of which takes any room — so the section's own padding
   would be a band of canvas colour across the page with nothing in it. */
.lc-merch--over {
	padding: 0;
}

.lc-merch__bar {
	position: fixed;
	right: var(--lc-space-sm);
	bottom: var(--lc-space-sm);
	left: var(--lc-space-sm);
	z-index: 9000;
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lc-space-sm);
	max-width: 46rem;
	margin-inline: auto;
	padding: var(--lc-space-sm) var(--lc-space-md);
	border-radius: 12px;
	background-color: var(--lc-black);
	color: var(--lc-cream);
	box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
}

/* Shown by the script rather than hidden by it. A bar printed visible and then
   put away on load is on screen for a frame, and the visitor sees an
   announcement appear and vanish — so it starts hidden and the script, which
   is also the only thing that can read whether it was dismissed, reveals it. */
.lc-merch__bar.lc-merch__bar--preview,
.is-ready .lc-merch__bar {
	display: flex;
}

.is-dismissed .lc-merch__bar {
	display: none;
}

/* And while the panel is open. A dialog on the top layer paints above every
   z-index on the page, so the bar would otherwise sit in front of the dimmed
   backdrop offering to open what is already open. */
.lc-merch__over:has(.lc-merch__panel[open]) .lc-merch__bar {
	display: none;
}

/* Inside the builder the bar is drawn where it sits in the layout rather than
   pinned over the canvas, which would follow the author around the page. */
.lc-merch__bar--preview {
	position: static;
	margin-bottom: var(--lc-space-md);
}

/* The bar is black whatever canvas the section is set to, so the button on it
   has to be given the black-canvas pairing by hand: left alone it takes the
   section's, which on cream is a black fill — a black button on a black bar. */
.lc-merch__bar .lc-button--solid {
	background-color: var(--lc-cream);
	color: var(--lc-black);
}

/* The way in is an anchor where the bar goes to a page and a button where it
   opens a panel. `.lc-button` already carries the shape; a browser's own button
   styling is what has to be called off, and the anchor needs the line under it
   taken away. */
.lc-merch__bar-open {
	border: 0;
	font: inherit;
	cursor: pointer;
}

.lc-merch__bar-link {
	text-decoration: none;
}

.lc-merch__bar-text {
	flex: 1 1 16rem;
	margin: 0;
	font-family: var(--lc-font-sans);
	font-weight: var(--lc-weight-head);
	line-height: var(--lc-leading-body);
}

.lc-merch__bar-close {
	padding: 0 0.2em;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.lc-merch__bar-close:hover,
.lc-merch__bar-close:focus-visible {
	opacity: 1;
}

/* The panel is a real `<dialog>`, so the browser supplies the modality, the
   backdrop, the Escape key, the focus trap and the scroll lock. Everything here
   is the look of it. */
.lc-merch__panel {
	width: min(68rem, calc(100vw - 2 * var(--lc-space-sm)));
	max-height: calc(100vh - 2 * var(--lc-space-sm));
	padding: 0;
	border: 0;
	border-radius: 12px;
	/* The canvas again, declared rather than inherited. `background-color` is not
	   an inherited property, and the dialog's own parent is the bar's wrapper,
	   which has no background of its own — so `inherit` here resolves to
	   transparent and the panel shows the page straight through it. The four
	   pairings below are the same ones `.lc-canvas--*` sets on a section. */
	background-color: var(--lc-cream);
	color: var(--lc-black);
	overflow: auto;
	/* A dialog on the top layer is positioned against the viewport, and the
	   section inside it has its own padding. */
	margin: auto;
	/* The panel scrolls inside itself rather than growing past the bottom of the
	   screen — the lesson the menu panel learned the hard way in 2.47.2. */
	overscroll-behavior: contain;
}

.lc-canvas--black .lc-merch__panel {
	background-color: var(--lc-black);
	color: var(--lc-cream);
}

.lc-canvas--light .lc-merch__panel {
	background-color: var(--lc-accent-light);
	color: var(--lc-black);
}

.lc-canvas--deep .lc-merch__panel {
	background-color: var(--lc-accent-deep);
	color: var(--lc-cream);
}

.lc-merch__panel::backdrop {
	background-color: rgb(0 0 0 / 60%);
}

/* Pinned to the panel rather than to the section inside it, so a run too long
   to fit still has its way out on screen at the bottom of it. */
.lc-merch__panel-close {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	margin-left: auto;
	padding: var(--lc-space-xs) var(--lc-space-sm);
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* The section inside the panel has already had its heading and its buttons; the
   top padding would put the first of them below the close button. */
.lc-merch__panel .lc-merch__inner {
	padding: 0 var(--lc-space-md) var(--lc-space-lg);
}

@media (max-width: 980px) {
	.lc-merch__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.lc-merch {
		padding: var(--lc-space-md) var(--lc-space-sm);
	}

	.lc-merch__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A bar across the foot of a phone is most of the screen. The wording takes
	   the first line and the two controls share the second. */
	.lc-merch__bar {
		right: var(--lc-space-xs);
		bottom: var(--lc-space-xs);
		left: var(--lc-space-xs);
		padding: var(--lc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
   28. Motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lc-accordion__summary::before,
	.lc-accordion__summary::after,
	.lc-button,
	a.lc-schedule__item,
	.lc-family__link,
	.lc-sermon__pill,
	.lc-sermon__play,
	.lc-media__play,
	a.lc-events__card,
	.lc-connect__link,
	.lc-events__pill,
	.lc-events__page,
	a.lc-groups__card,
	.lc-groups__media,
	.lc-groups__pill,
	.lc-groups__page,
	.lc-giving-calc__summary::before,
	.lc-giving-calc__summary::after,
	.lc-giving-calc__preset,
	.lc-giving__copy,
	.lc-timeline__arrow,
	.lc-timeline__progress-bar,
	.lc-collage__image,
	.lc-location__image,
	.lc-video .lc-media__image,
	.lc-collage__photo,
	.lc-collage-lightbox__button,
	.lc-menu__link,
	.lc-menu__social-link,
	.lc-card__social-link,
	.lc-search__form,
	.lc-search__go,
	.lc-search__pill,
	.lc-search__page,
	.lc-search__link,
	.lc-search__image,
	.lc-merch__turn {
		transition: none;
	}

	/* The tile still turns — the back of a garment is content, not decoration,
	   and a reader who has asked for less motion still wants to see it. What
	   goes is the rotation: the two faces cut from one to the other. */
	.lc-merch__faces {
		transition: none;
	}

	/* The pinboard's tilts stay — they are the arrangement, not an animation —
	   but straightening one under the pointer happens instantly, and it no
	   longer grows towards the reader. */
	.lc-collage--pinboard .lc-collage__cell .lc-collage__photo:hover,
	.lc-collage--pinboard .lc-collage__cell .lc-collage__photo:focus-within {
		transform: rotate(0deg);
	}

	/* This covers the scrolling the visitor starts themselves. The arrows do
	   not go through it at all — lc-timeline.js animates their scroll frame by
	   frame, which no stylesheet can call off — so the script reads this same
	   preference and jumps instead, and refuses to auto-scroll at all. */
	.lc-timeline--rail .lc-timeline__track,
	.lc-collage--ribbon .lc-collage__grid {
		scroll-behavior: auto;
	}

	@supports (interpolate-size: allow-keywords) and selector(::details-content) {
		.lc-giving-calc__disclosure::details-content {
			transition: none;
		}
	}

	/* Inside @supports above, so it needs the same guard to be overridden. */
	@supports (interpolate-size: allow-keywords) and selector(::details-content) {
		.lc-accordion::details-content {
			transition: none;
		}
	}
}