/*
 * Redesign POC (soft editorial): shared pieces. The layout ideas are 2819church.org's; the look follows the
 * Sacred Roots brand identity (House of Gül, 2020): headings in light serif capitals with the second line in
 * lowercase italic, text in a light Helvetica-style sans (Inter stands in) with key words in serif italic,
 * captions and links in parentheses, the brand's crimson for words and its ultramarine for the marks. Paper
 * with a faint grain; photos warm and nearly monochrome until hovered.
 */
:root {
	--sr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--sr-gutter: 3vw;
	--sr-rule: 1px solid var(--wp--preset--color--accent-1);
}

body {
	background-image: var(--sr-grain);
}

/*
 * Display headings, after the brand's "Sometimes Times" (Cormorant stands in): light capitals; an <em> line
 * is lowercase italic in crimson, like the brand's "sometimes times italic".
 */
.sr-display {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
}

.sr-display em {
	color: var(--wp--preset--color--accent-1);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* The wordmark's interlocking OO in ROOTS: the first O runs into the second. */
.sr-oo {
	letter-spacing: -0.36em;
}

/* Running text with key words in serif italic, like the brand guide's objective page. */
.sr-statement {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 300;
	letter-spacing: -0.01em;
}

.sr-statement em {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.12em;
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent-1);
}

/* Captions in parentheses, lowercase, beside the photo: "(community building)". */
.sr-photo .wp-element-caption {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-align: right;
	color: var(--wp--preset--color--ink);
}

.sr-photo:has(.wp-element-caption) {
	display: flex;
	flex-direction: column-reverse;
	overflow: visible;
}

.sr-photo:has(.wp-element-caption) img {
	flex: 1;
	min-height: 0;
}


/* Small spaced capitals for labels and kickers. */
.sr-kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

/* "(LINK)": the brand guide's parenthesised captions, used as links (2819 does the same), crimson brackets. */
.sr-brackets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2.2rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sr-brackets.has-text-align-center {
	justify-content: center;
}

.sr-brackets a {
	display: inline-flex;
	align-items: baseline;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.sr-brackets a::before,
.sr-brackets a::after {
	color: var(--wp--preset--color--accent-1);
	font-weight: 400;
}

.sr-brackets a::before {
	content: "(";
	margin-right: 0.12em;
}

.sr-brackets a::after {
	content: ")";
	margin-left: 0.12em;
}

.sr-brackets a:hover,
.sr-brackets a:focus-visible {
	color: var(--wp--preset--color--accent-1);
}

/* Photos: warm, nearly monochrome; color returns on hover. */
.sr-photo {
	margin: 0;
	overflow: hidden;
}

.sr-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.7) sepia(0.35) contrast(1.02);
	transition: filter 0.6s ease, transform 0.9s ease;
}

.sr-photo:hover img {
	filter: none;
	transform: scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
	.sr-photo img {
		transition: none;
	}
}

/* Sections on paper share the page's gutters. */
.sr-ed {
	padding-inline: var(--sr-gutter) !important;
}

@media (max-width: 781px) {
	:root {
		--sr-gutter: 20px;
	}

	/* Long bracketed links wrap on phones instead of running off the screen (inline, so ")" follows the words). */
	.sr-brackets a {
		display: inline;
		white-space: normal;
	}
}

/* ---------- Shared page pieces (used by every page's own CSS) ---------- */

/* Page opening: "(kicker)" then a display title; an optional intro in light sans. */
.sr-page-head {
	padding: 4.5vw var(--sr-gutter) 3.5vw !important;
}

.sr-page-head > * {
	margin-block: 0;
}

.sr-page-head .sr-kicker {
	margin-bottom: 1.4rem;
	color: var(--wp--preset--color--ink);
}

.sr-page-head .sr-display {
	font-size: clamp(3rem, 8vw, 8.5rem);
}

.sr-page-head__intro {
	max-width: 34em;
	margin-top: 2rem !important;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 300;
	line-height: 1.45;
}

/* Section headings inside a page: smaller display. */
.sr-section-title.sr-display {
	margin: 0 0 2rem;
	font-size: clamp(2.4rem, 4.6vw, 4.8rem);
}

/* Color bands, using the brand guide's readable pairings (contrast checked). */
.sr-band {
	padding: 6vw var(--sr-gutter) !important;
}

.sr-band--crimson {
	background-color: var(--wp--preset--color--accent-1);
	background-image: var(--sr-grain);
	color: var(--wp--preset--color--base);
}

.sr-band--crimson :is(.sr-display em, .sr-kicker),
.sr-band--crimson .sr-brackets a::before,
.sr-band--crimson .sr-brackets a::after {
	color: var(--wp--preset--color--peach);
}

.sr-band--crimson a,
.sr-band--crimson .sr-brackets a {
	color: var(--wp--preset--color--base);
}

.sr-band--peach {
	background-color: color-mix(in srgb, var(--wp--preset--color--peach) 55%, var(--wp--preset--color--paper));
	color: var(--wp--preset--color--ink);
}

.sr-band--slate {
	background-color: var(--wp--preset--color--slate);
	background-image: var(--sr-grain);
	color: var(--wp--preset--color--ink);
}

.sr-band--slate :is(.sr-display em, .sr-kicker) {
	color: var(--wp--preset--color--ink);
}

.sr-band--ink {
	background-color: var(--wp--preset--color--ink);
	background-image: var(--sr-grain);
	color: var(--wp--preset--color--paper);
}

.sr-band--ink :is(.sr-display em, .sr-kicker) {
	color: var(--wp--preset--color--peach);
}

.sr-band--ink a {
	color: var(--wp--preset--color--paper);
}

/* A thin crimson rule down the left of a block of text. */
.sr-rule {
	padding-left: 1.4rem;
	border-left: var(--sr-rule);
}

/* Hairline between sections on paper. */
.sr-hairline {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}