/**
 * Church Events.
 *
 * Every colour comes from a custom property the plugin prints on the
 * wrapper, so a church can change its brand without touching this file.
 * Scoped under .ce, and the properties themes most often hijack are
 * restated rather than assumed.
 *
 * The card is built from spans inside a single link, so nearly everything
 * here has to declare its own display.
 */

.ce {
	--ce-bg: #0d0d0d;
	--ce-surface: #151515;
	--ce-raised: #1f1f1f;
	--ce-rule: #272727;
	--ce-ghost: #1a1a1a;
	--ce-text: #ffffff;
	--ce-muted: #a6a6a6;
	--ce-primary: #5a9cff;
	--ce-accent: #37c85f;

	--ce-body: inherit;
	--ce-display: inherit;
	--ce-ease: cubic-bezier(.22, 1, .36, 1);

	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	display: block;
	clear: both;
	padding: 3.5rem 1.5rem 4rem;
	background: var(--ce-bg);
	font-family: var(--ce-body);
	color: var(--ce-text);
}

/* The display face is only named once the plugin has actually loaded it.
   Naming it unconditionally would fall back to Arial Black on a site that
   turned the webfont off, which is not what anyone chose. */
.ce--type {
	--ce-body: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ce-display: "Archivo Black", "Arial Black", Impact, sans-serif;
}

.ce *, .ce *::before, .ce *::after { box-sizing: inherit; }
.ce img { max-width: 100%; display: block; }

:where(.ce) button {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: normal;
	text-transform: none;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* ---- Hero ---- */

.ce-hero { max-width: 76rem; margin: 0 auto 4rem; text-align: center; }

.ce .ce-eyebrow {
	margin: 0 0 .85rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ce-accent);
}

.ce .ce-hero-title {
	margin: 0;
	padding: 0;
	font-family: var(--ce-display);
	font-size: clamp(2.25rem, 7.5vw, 5.25rem);
	font-weight: 900;
	letter-spacing: -.035em;
	line-height: .9;
	text-transform: uppercase;
	color: var(--ce-text);
}

.ce .ce-hero-intro {
	margin: 1.1rem auto 0;
	max-width: 38rem;
	font-size: clamp(.95rem, 1.6vw, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ce-muted);
}

/* ---- Section headings ----
   A very large faint word sits behind the real heading, rising above it.
   It is decoration, hidden from screen readers so it is never read out as
   a second stray heading. */

.ce-sec {
	position: relative;
	max-width: 76rem;
	margin: 0 auto 2.75rem;
	padding-top: 2.5rem;
	text-align: center;
}

.ce-sec + .ce-sec { margin-top: 4.5rem; }

.ce-sec-ghost {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	display: block;
	width: max-content;
	max-width: 100%;
	transform: translateX(-50%);
	font-family: var(--ce-display);
	font-size: clamp(3.5rem, 11.5vw, 9rem);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: .8;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ce-ghost);
	pointer-events: none;
	user-select: none;
}

.ce .ce-sec-title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	font-family: var(--ce-display);
	font-size: clamp(2rem, 6.5vw, 4.5rem);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: .95;
	text-transform: uppercase;
	color: var(--ce-text);
}

.ce .ce-sec-note {
	position: relative;
	z-index: 1;
	margin: 1.1rem auto 0;
	max-width: 38rem;
	font-size: clamp(.95rem, 1.6vw, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ce-muted);
}

/* ---- Featured ---- */

.ce-feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	max-width: 76rem;
	margin-inline: auto;
	border-radius: 18px;
	background: var(--ce-surface);
	overflow: hidden;
}

.ce-feature-img img {
	width: 100%;
	height: 100%;
	min-height: 20rem;
	object-fit: cover;
}

.ce-feature-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 2.5rem;
}

.ce .ce-tag {
	margin: 0 0 1rem;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--ce-raised);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	/* The brand colour, measured against this exact surface by the plugin
	   before it is printed, so it is readable whatever colour is chosen. */
	color: var(--ce-primary);
}

.ce .ce-feature-title {
	margin: 0 0 1.25rem;
	padding: 0;
	font-family: var(--ce-display);
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ce-text);
}

.ce-meta { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.35rem; }

.ce-meta-item {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ce-text);
}

.ce .ce-ico { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }

.ce .ce-feature-blurb {
	margin: 0 0 1.6rem;
	max-width: 34rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ce-muted);
}

/* ---- Calendar ---- */

.ce-calendar {
	max-width: 76rem;
	margin-inline: auto;
	border-radius: 16px;
	background: var(--ce-surface);
	overflow: hidden;
}

.ce-calendar iframe { display: block; width: 100%; height: 34rem; border: 0; }

/* ---- Filters ---- */

.ce-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	max-width: 76rem;
	margin: 0 auto 2.25rem;
}

.ce .ce-filter {
	padding: .55rem 1.15rem;
	border: 1px solid var(--ce-rule);
	border-radius: 999px;
	background: transparent;
	font-family: var(--ce-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ce-muted);
	cursor: pointer;
	transition: background-color .18s, color .18s, border-color .18s;
}

.ce .ce-filter:hover { border-color: var(--ce-text); color: var(--ce-text); }

.ce .ce-filter.is-on {
	background: var(--ce-text);
	border-color: var(--ce-text);
	color: var(--ce-bg);
}

.ce .ce-filter:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }

/* ---- Cards ---- */

.ce-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 76rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ce-card { display: block; }
.ce-card[hidden] { display: none; }

/* The whole card is the link. One target, announced once. */
.ce .ce-card-in {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: .5rem .5rem 0;
	border-radius: 16px;
	background: var(--ce-surface);
	color: var(--ce-text);
	text-decoration: none;
	transition: background-color .2s, transform .25s var(--ce-ease);
}

.ce .ce-card-in:hover { background: var(--ce-raised); transform: translateY(-3px); }

.ce .ce-card-in:focus-visible {
	outline: 3px solid var(--ce-accent);
	outline-offset: 3px;
}

.ce-card-top { display: block; }

.ce .ce-card-img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	object-fit: cover;
}

/* Date to the left of the title, month above day. It is the first thing
   anyone scanning a page of events looks for, so it gets its own column
   rather than sitting on the artwork where it fights the photograph. */
.ce-card-body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 1.35rem;
	padding: 1.5rem;
}

.ce-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	line-height: 1;
	color: var(--ce-text);
}

.ce-date-m {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ce-date-d {
	display: block;
	font-family: var(--ce-display);
	font-size: 2.5rem;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1;
}

.ce-card-main { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }

.ce .ce-card-title {
	display: block;
	margin: 0 0 .1rem;
	font-family: var(--ce-display);
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ce-text);
}

.ce .ce-card-line {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ce-text);
}

.ce .ce-card-blurb {
	display: block;
	margin: .3rem 0 0;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ce-muted);
}

/* An arrow rather than a worded button: the card is already the link, so a
   label here would only repeat the title that sits inches above it. */
.ce-go {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--ce-raised);
	color: var(--ce-text);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .22s, transform .22s var(--ce-ease), background-color .18s;
}

.ce .ce-card-in:hover .ce-go,
.ce .ce-card-in:focus-visible .ce-go { opacity: 1; transform: translateY(0); }
.ce .ce-card-in:hover .ce-go { background: var(--ce-text); color: var(--ce-bg); }
.ce-go svg { width: 1.35rem; height: 1.35rem; }

.ce-none {
	max-width: 76rem;
	margin: 1.5rem auto 0;
	padding: 1.25rem;
	border: 1px dashed var(--ce-rule);
	border-radius: 12px;
	text-align: center;
	color: var(--ce-muted);
}

.ce-none[hidden] { display: none; }

/* ---- Weekly ---- */

.ce-weekly {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 76rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ce-week {
	display: flex;
	flex-direction: column;
	padding: .5rem .5rem 0;
	border-radius: 16px;
	background: var(--ce-surface);
}

.ce-week-img img { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; object-fit: cover; }
.ce-week-body { padding: 1.5rem; }

.ce .ce-week-title {
	margin: 0;
	padding: 0;
	font-family: var(--ce-display);
	font-size: 1.375rem;
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ce-text);
}

.ce .ce-week-when {
	margin: .55rem 0 0;
	font-size: .875rem;
	font-weight: 700;
	color: var(--ce-accent);
}

.ce .ce-week-blurb {
	margin: .65rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--ce-muted);
}

.ce .ce-week-link {
	display: inline-block;
	margin-top: 1rem;
	padding-bottom: .2rem;
	border-bottom: 2px solid var(--ce-accent);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ce-text);
	text-decoration: none;
}

.ce .ce-week-link:hover { color: var(--ce-accent); }
.ce .ce-week-link:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }

/* ---- Buttons ---- */

.ce .ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .9rem 1.7rem;
	border: 2px solid var(--ce-text);
	border-radius: 999px;
	background: var(--ce-text);
	font-family: var(--ce-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ce-bg);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s, color .18s, transform .16s var(--ce-ease);
}

.ce .ce-btn:hover { background: transparent; color: var(--ce-text); transform: translateY(-1px); }
.ce .ce-btn:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }

/* ---- Closing band ---- */

.ce-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 76rem;
	margin: 4.5rem auto 0;
	padding: 2.5rem;
	border-radius: 18px;
	background: var(--ce-surface);
}

.ce .ce-cta-title {
	margin: 0;
	padding: 0;
	max-width: 36rem;
	font-family: var(--ce-display);
	font-size: clamp(1.35rem, 3vw, 2.1rem);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ce-text);
}

.ce-setup {
	max-width: 40rem;
	margin-inline: auto;
	padding: .9rem 1.1rem;
	border-left: 3px solid #0862db;
	background: #eef4fe;
	font-size: .9375rem;
	color: #111111;
}

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

@media (max-width: 64rem) {
	.ce-grid, .ce-weekly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ce-feature { grid-template-columns: minmax(0, 1fr); }
	.ce-feature-img img { min-height: 15rem; }
	.ce-feature-body { padding: 2rem; }
	.ce-calendar iframe { height: 30rem; }
}

@media (max-width: 44rem) {
	.ce { padding: 2.5rem 1.25rem 3rem; }
	.ce-grid, .ce-weekly { grid-template-columns: minmax(0, 1fr); }
	.ce-hero { margin-bottom: 3rem; }
	.ce-sec { margin-bottom: 2rem; padding-top: 1.75rem; }
	.ce-sec + .ce-sec { margin-top: 3rem; }
	.ce-cta { margin-top: 3rem; padding: 1.75rem; }
	.ce-calendar iframe { height: 26rem; }
	.ce .ce-btn { width: 100%; }
	.ce-card-body { gap: 0 1rem; padding: 1.25rem; }
	.ce .ce-card-title { font-size: 1.25rem; }
	.ce-date-d { font-size: 2rem; }

	/* The arrow is a hover affordance, and a phone has no hover. */
	.ce-go {
		position: static;
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 1.25rem;
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ce *, .ce *::before, .ce *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

/* ---- Service times ----
   A thin bar above the heading. Sits on the page rather than in a box, so
   it reads as a caption to the title rather than a menu. */

.ce-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	max-width: 76rem;
	margin: 0 auto 2.25rem;
}

.ce .ce-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border: 1px solid var(--ce-rule);
	border-radius: 999px;
	background: var(--ce-surface);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ce-muted);
	transition: color .25s var(--ce-ease), border-color .25s var(--ce-ease);
}

.ce a.ce-pill:hover { color: var(--ce-text); border-color: var(--ce-text); }
.ce a.ce-pill:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }
.ce .ce-pill .ce-ico { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* ---- Calendar tabs ---- */

.ce-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	max-width: 76rem;
	margin: 0 auto 1.25rem;
}

.ce .ce-tab {
	padding: .5rem 1.05rem;
	border: 1px solid var(--ce-rule);
	border-radius: 999px;
	background: transparent;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ce-muted);
	cursor: pointer;
	transition: color .25s var(--ce-ease), background .25s var(--ce-ease), border-color .25s var(--ce-ease);
}

.ce .ce-tab:hover { color: var(--ce-text); border-color: var(--ce-text); }

.ce .ce-tab.is-on {
	background: var(--ce-text);
	border-color: var(--ce-text);
	color: var(--ce-bg);
}

.ce .ce-tab:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }

/* ---- Rail ----
   Cards run off the side rather than wrapping, so a long list stays one
   row deep. The scrolling is the browser's own, which means a trackpad,
   a finger and the keyboard all work before any script has loaded. The
   arrows are an addition for a mouse, and hide themselves when there is
   nothing to scroll to. */

.ce-rail { position: relative; max-width: 76rem; margin: 0 auto; }

.ce-rail .ce-grid {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: .25rem .25rem 1rem;
	margin: -.25rem -.25rem 0;
	scrollbar-width: thin;
	scrollbar-color: var(--ce-rule) transparent;
}

.ce-rail .ce-grid::-webkit-scrollbar { height: 6px; }
.ce-rail .ce-grid::-webkit-scrollbar-track { background: transparent; }
.ce-rail .ce-grid::-webkit-scrollbar-thumb { background: var(--ce-rule); border-radius: 999px; }

.ce-rail .ce-card,
.ce-rail .ce-wide {
	flex: 0 0 clamp(16rem, 31%, 23rem);
	scroll-snap-align: start;
}

.ce-rail--wide .ce-wide { flex-basis: clamp(17rem, 32%, 24rem); }

/* Hidden by the filter. Kept out of the flex row entirely, or it would
   still take up a slot and leave a gap where a card used to be. */
.ce-wide[hidden] { display: none; }

.ce .ce-nav {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ce-rule);
	border-radius: 999px;
	background: var(--ce-surface);
	color: var(--ce-text);
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s var(--ce-ease), background .25s var(--ce-ease);
}

.ce .ce-nav svg { width: 1.25rem; height: 1.25rem; }
.ce .ce-nav--prev { left: -1.25rem; }
.ce .ce-nav--next { right: -1.25rem; }
.ce-rail:hover .ce-nav { opacity: .9; }
.ce .ce-nav:hover { background: var(--ce-text); color: var(--ce-bg); }
.ce .ce-nav:focus-visible { opacity: 1; outline: 3px solid var(--ce-accent); outline-offset: 3px; }
.ce .ce-nav[hidden] { display: none; }

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

.ce-wide {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ce-rule);
	border-radius: 1.25rem;
	background: var(--ce-surface);
	transition: background .25s var(--ce-ease), transform .25s var(--ce-ease);
}

.ce-wide:hover { background: var(--ce-raised); transform: translateY(-3px); }
.ce-wide-top { display: block; }

.ce .ce-wide-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.ce-wide-body {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	flex: 1 1 auto;
	padding: 1.5rem;
}

.ce .ce-wide-title {
	margin: .2rem 0 .35rem;
	padding: 0;
	font-family: var(--ce-display);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
	color: var(--ce-text);
}

.ce .ce-wide-line {
	margin: 0;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--ce-muted);
}

.ce .ce-wide-when { color: var(--ce-accent); font-weight: 600; }

.ce .ce-wide-blurb {
	margin: .7rem 0 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--ce-muted);
}

.ce .ce-wide-link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 1.15rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ce-text);
	border-bottom: 2px solid var(--ce-accent);
	transition: color .25s var(--ce-ease);
}

.ce .ce-wide-link:hover { color: var(--ce-accent); }
.ce .ce-wide-link:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }

/* ---- Moments ---- */

.ce-moments {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 2.5rem;
	align-items: center;
	max-width: 76rem;
	margin: 0 auto;
}

.ce-moments-media {
	position: relative;
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--ce-surface);
}

.ce-moments-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ce .ce-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #ffffff;
	text-decoration: none;
	background: rgba(0, 0, 0, .28);
	transition: background .25s var(--ce-ease);
}

.ce .ce-play svg {
	width: 4.5rem;
	height: 4.5rem;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45));
	transition: transform .25s var(--ce-ease);
}

.ce .ce-play:hover { background: rgba(0, 0, 0, .12); }
.ce .ce-play:hover svg { transform: scale(1.08); }
.ce .ce-play:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: -6px; }

.ce-quote { margin: 0; }

.ce .ce-quote-text {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.55;
	color: var(--ce-text);
}

.ce .ce-quote-text::before { content: "\201C"; }
.ce .ce-quote-text::after { content: "\201D"; }

.ce-quote-by { display: flex; flex-direction: column; gap: .2rem; margin: 1.5rem 0 0; }

.ce .ce-quote-name {
	font-size: .95rem;
	font-weight: 700;
	color: var(--ce-text);
}

.ce .ce-quote-role {
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ce-muted);
}

.ce .ce-quote-link {
	display: inline-block;
	margin-top: 1.5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ce-text);
	border-bottom: 2px solid var(--ce-accent);
	transition: color .25s var(--ce-ease);
}

.ce .ce-quote-link:hover { color: var(--ce-accent); }
.ce .ce-quote-link:focus-visible { outline: 3px solid var(--ce-accent); outline-offset: 3px; }

@media (max-width: 64rem) {
	.ce-moments { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.ce .ce-nav { display: none; }
}

@media (max-width: 44rem) {
	.ce-rail .ce-card,
	.ce-rail .ce-wide,
	.ce-rail--wide .ce-wide { flex-basis: 84%; }
	.ce-strip { margin-bottom: 1.75rem; }
	.ce .ce-pill { font-size: .72rem; padding: .45rem .85rem; }
	.ce .ce-play svg { width: 3.25rem; height: 3.25rem; }
}

/* ---- Phones: one card, centred ----
   On a narrow screen the row shows one card at a time rather than a card
   and a sliver of the next. The card is centred in the viewport, with an
   equal margin either side, and everything inside it is centred with it —
   a date block and a title pinned left look off-balance once the card is
   the width of the screen.

   The padding on the row is what lets the first and last card reach the
   middle. Without it they stop against the ends and never centre. */

@media (max-width: 44rem) {
	.ce-rail .ce-grid {
		padding-inline: 8%;
		scroll-padding-inline: 8%;
		scroll-snap-type: x mandatory;
	}

	.ce-rail .ce-card,
	.ce-rail .ce-wide,
	.ce-rail--wide .ce-wide {
		flex-basis: 84%;
		scroll-snap-align: center;
	}

	/* Date above the title rather than beside it, both centred. */
	.ce-card-body {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 1rem;
		text-align: center;
	}

	.ce-card-main {
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.ce .ce-card-line { justify-content: center; }
	.ce .ce-card-title { text-align: center; }

	.ce-wide-body { align-items: center; text-align: center; }
	.ce .ce-wide-link { align-self: center; }
	.ce .ce-tag { align-self: center; }

	/* The arrow was moved into the flow and pushed left further up the
	   stylesheet. Centre it with everything else. */
	.ce-go { justify-self: center; }
}