/*
Theme Name: There's More
Theme URI: https://theresmore.example.org/
Template: frost
Author: Roman Catholic Diocese of Orange
Author URI: https://www.rcbo.org/
Description: Child theme of Frost for the There's More campaign of the Diocese of Orange. Layout, gradients, type and section structure are fixed by the theme; editors change headings, paragraphs and photographs only. Design tokens live in theme.json; every page ships as a locked, content-only block pattern. Requires Frost 1.0.9 or later as the parent theme.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.3.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theresmore
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, editor-style, block-styles, template-locking
*/

/* ==========================================================================
   There's More - theme stylesheet

   theme.json owns the tokens (color, gradient, type, spacing) and exposes the
   brand variable names through its `styles.css` block, so everything below
   reads against --color-*, --font-*, --radius-* exactly as the original
   static site did.

   Nothing here is reachable from the block editor's design controls. These are
   the "static layout elements" - sections, gradients, grids, bands, carousels.

   This is a Frost child theme. functions.php makes this stylesheet depend on
   Frost's so it always prints second, and section 0 below undoes the three
   rules in Frost's own style.css that would otherwise show through. Frost's
   theme.json is dealt with in ours - see the "Frost parent overrides" block at
   the end of styles.blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Frost parent stylesheet overrides

   Frost's style.css is short and mostly harmless, but three of its rules land
   on things this theme uses. Handled here rather than by raising specificity
   all over the file.
   -------------------------------------------------------------------------- */

/*
 * Frost sets b/strong/th to font-weight 500. The campaign copy uses real bold
 * inside the numbered steps and feature lists.
 */
b,
strong,
th {
	font-weight: 700;
}

/*
 * Frost draws a 1px box around the navigation overlay toggle. The design has a
 * bare hamburger.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	border: 0;
	padding: 0;
}

/*
 * Frost styles bare inputs against its base/contrast colours, which this theme
 * removes from the palette - so the search field would lose its background and
 * border entirely. The ZIP finder has its own rules further down; this covers
 * the search block on the search and 404 templates.
 */
.wp-block-search__input {
	background: var(--color-white);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 10px 18px;
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--color-ink);
}

.wp-block-search__input:focus {
	background: var(--color-white);
	outline: 2px solid var(--color-red);
	outline-offset: 1px;
	border-color: var(--color-red);
}

.wp-block-search__button {
	border-radius: var(--radius-pill);
}

::placeholder {
	color: var(--color-stone);
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	max-width: 100%;
}

* {
	min-width: 0;
}

img,
iframe,
svg,
video,
table {
	max-width: 100%;
}

p {
	text-wrap: pretty;
}

:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

::selection {
	background: var(--color-red);
	color: #fff;
}

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

/*
 * Inverse surfaces: headings and links take the light-on-dark treatment.
 *
 * theme.json gives every heading an explicit ink-deep colour, which beats a
 * colour merely inherited from a dark container - so a heading on an ink card
 * renders near-black on near-black. These rules use :is() rather than :where()
 * on purpose: :is() takes the specificity of its argument, putting them at
 * (0,1,1) and safely above the (0,1,0) that global styles emit for headings.
 */
.tm-on-dark,
.tm-on-dark :is(h1, h2, h3, h4, h5, h6),
.tm-card--ink :is(h1, h2, h3, h4, h5, h6),
.tm-card--accent :is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-white);
}

.tm-on-dark :where(p, li) {
	color: rgba(255, 255, 255, 0.86);
}

.tm-on-dark :where(a:not(.wp-block-button__link)) {
	color: var(--color-white);
}

.tm-muted {
	color: var(--color-stone);
}

.tm-accent {
	color: var(--color-red);
}

/* A prose measure that keeps long paragraphs readable. */
.tm-measure > p,
p.tm-measure {
	max-width: var(--measure-prose);
}

.tm-measure-narrow > p,
p.tm-measure-narrow {
	max-width: 44ch;
}

/*
 * ...and it ranges left, it does not centre.
 *
 * Core's constrained layout sets margin-left and margin-right to auto with
 * !important on every child, so anything given a max-width narrower than its
 * container gets centred as a side effect. The narrow measure here is for
 * readability, not for centring, so the auto margins have to be taken back -
 * and only !important beats !important.
 *
 * A paragraph the pattern deliberately centres carries has-text-align-center
 * and is left alone: the Stories line on the home page is meant to be centred.
 */
.tm-measure:not(.has-text-align-center),
.tm-measure-narrow:not(.has-text-align-center) {
	margin-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Site chrome - header
   -------------------------------------------------------------------------- */

.tm-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(245, 242, 236, 0.86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border-hairline);
	transition: background var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

/*
 * The interior header measures 1200px and the one over the home hero 1280px -
 * that difference is in the original, not an oversight.
 */
.tm-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.tm-header--hero .tm-header__inner {
	max-width: 1280px;
}

/*
 * The logo lockup.
 *
 * Rendered inline by the theresmore/logo block from the design system's
 * currentColor variant, so one file serves every tone and the mark takes the
 * colour of whatever it sits in. It is a brand asset rather than page content,
 * and being server-rendered it cannot be edited or replaced by accident.
 *
 * Black on the interior header, per the design; white over the hero; sand in
 * the footer.
 */
.tm-brand {
	flex: none;
	margin: 0;
	line-height: 0;
	color: var(--color-black-page);
}

.tm-brand a {
	display: block;
	border: 0;
	line-height: 0;
	color: inherit;
}

.tm-brand svg {
	display: block;
	width: auto;
	height: 30px;
}

.tm-header--hero .tm-brand {
	color: var(--color-white);
}

.tm-header--hero .tm-brand svg {
	height: 32px;
}

.tm-brand--footer {
	margin: 0 0 26px;
	color: var(--color-sand);
}

.tm-brand--footer svg {
	height: 96px;
}

/* Navigation ------------------------------------------------------------- */

.tm-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
	font-size: 13.5px;
	font-weight: 500;
}

.tm-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--color-ink);
	border: 0;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.tm-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--color-red);
	border-bottom-color: var(--color-red);
}

.tm-header
	.wp-block-navigation
	.wp-block-navigation-item.current-menu-item
	.wp-block-navigation-item__content {
	border-bottom-color: var(--color-red);
}

/* The mobile overlay is core's; dress it as the ink panel from the design. */
.tm-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--color-ink);
	color: var(--color-cream);
	padding: 24px var(--gutter) 40px;
}

/*
 * The header cannot keep its blur while the menu is open.
 *
 * backdrop-filter makes an element the containing block for position: fixed
 * descendants. Core's overlay is fixed with inset: 0, so with the blur in
 * place it resolved against the header and came out 375x76 instead of
 * 375x812 - a panel the height of the header bar, with the page painting
 * over the rest of it. The overlay's own z-index was never the problem; it
 * is already 100000.
 */
.tm-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * The desktop bar justifies the navigation right. In the overlay that becomes
 * a column with align-items: flex-end, which shrink-wraps the list to the
 * width of its longest label and pins it to the right edge. The panel wants
 * full-width rows ranged left, so the justification is reset here.
 */
.tm-header
	.wp-block-navigation__responsive-container.is-menu-open
	:is(
		.wp-block-navigation__responsive-container-content,
		.wp-block-navigation__container,
		.wp-block-navigation-item
	) {
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
}

.tm-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: var(--color-cream);
	font-size: 19px;
	min-height: 52px;
	width: 100%;
	border-bottom: 1px solid var(--border-inverse);
	padding-bottom: 0;
}

.tm-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
	color: var(--color-white);
	border-bottom-color: var(--color-white);
}

.tm-header .wp-block-navigation__responsive-container-open,
.tm-header .wp-block-navigation__responsive-container-close {
	color: currentColor;
}

/* The "Start here" pill in the header right slot. */
.tm-header__cta .wp-block-button__link {
	min-height: var(--control-h-sm);
	font-size: 13.5px;
	padding: 6px 20px;
}

.tm-header__cta {
	flex: none;
}

/* Header over the home hero: transparent until the page scrolls. */
.tm-header--hero {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
}

.tm-header--hero,
.tm-header--hero .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.92);
}

.tm-header--hero .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--color-white);
	border-bottom-color: var(--color-white);
}

.tm-header--hero.is-scrolled {
	background: var(--color-red);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: rgba(20, 20, 19, 0.14);
}

.tm-header--hero .tm-header__cta .wp-block-button__link {
	background: var(--color-white);
	color: var(--color-ink);
	min-height: var(--control-h);
	padding: 7px 22px;
}

.tm-header--hero .tm-header__cta .wp-block-button__link:hover {
	background: var(--color-cream);
	color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   3. Site chrome - footer
   -------------------------------------------------------------------------- */

.tm-footer {
	background: var(--color-ink);
	color: var(--color-cream);
}

.tm-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/*
 * The three footer columns.
 *
 * Two things core gets wrong here and both had to be taken back:
 *
 * 1. Its grid layout uses auto-fill, so a 1200px container makes five 240px
 *    tracks for three items and the whole footer bunches into the left 60%.
 *    auto-fit collapses the empty tracks and spreads the three.
 *
 * 2. The gap is set here rather than as a blockGap attribute because core
 *    rejects any blockGap value containing a bracket - see the preg_match in
 *    wp_render_layout_support_flag - which silently throws away clamp().
 */
.tm-footer__inner.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 48px clamp(40px, 5vw, 72px);
}

.tm-footer h2,
.tm-footer h3,
.tm-footer h4,
.tm-footer h5,
.tm-footer h6 {
	color: rgba(233, 224, 210, 0.55);
}

.tm-footer p {
	color: rgba(233, 224, 210, 0.72);
	font-size: 15px;
	line-height: 1.6;
	max-width: 30ch;
}

.tm-footer__links {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
}

.tm-footer__links li {
	margin: 0;
}

.tm-footer__links a {
	display: block;
	font-size: 15.5px;
	color: var(--color-cream);
	padding: 14px 0;
	border-bottom: 1px solid rgba(233, 224, 210, 0.26);
	transition: color var(--dur-fast) var(--ease-out);
}

.tm-footer__links a:hover {
	color: var(--color-white);
}

.tm-footer__legal {
	border-top: 1px solid rgba(233, 224, 210, 0.18);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.tm-footer__legal p {
	font-size: 13.5px;
	color: rgba(233, 224, 210, 0.55);
	max-width: 62ch;
	margin: 0;
}

/* --------------------------------------------------------------------------
   4. Sections and rhythm
   -------------------------------------------------------------------------- */

/*
 * Full-bleed sections butt directly against each other, the way they did on
 * the static site: the change of background colour IS the section boundary,
 * and a gap between two colour bands reads as a seam.
 *
 * Flow layout gives every child of a group a margin-block-start equal to the
 * block gap, so without this the root 24px gap shows between every pair of
 * sections.
 *
 * Keyed off the section classes rather than the container on purpose. The
 * patterns also carry blockGap: 0px on their root group, but that only reaches
 * a page at the moment the pattern is inserted - it is saved into post
 * content. These classes are on the sections themselves, so this rule fixes
 * pages that were published before the gap was.
 *
 * A section that genuinely wants space above it sets it inline from the
 * pattern (the explore and missing photo bands do), and an inline style wins.
 */
.tm-hero,
.tm-banner,
.tm-section,
.tm-split,
.tm-marquee,
.tm-photoband,
.tm-doors,
.tm-page > *,
.tm-page > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * The header, the page content and the footer are siblings inside
 * .wp-site-blocks, which is itself a flow container - so the middle one picks
 * up the 24px root block gap and opens a strip of page background between the
 * header and whatever the page starts with.
 *
 * Deliberately every direct child rather than main and the template parts by
 * name: which element lands here depends on the template, and on the interior
 * pages it is .entry-content rather than a <main> at all. None of the three
 * ever wants a gap, so the blanket rule is the honest one.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.tm-section {
	padding-top: clamp(48px, 6.8vw, 88px);
	padding-bottom: clamp(48px, 6.8vw, 88px);
}

/*
 * The section measure, reshaped to match the original.
 *
 * The original wrapped each section in a 1200px box that INCLUDED its gutter,
 * so the content column is 1120px wide and its left edge sits at
 * (viewport - 1200) / 2 + gutter. The banner does this already.
 *
 * Core's constrained layout arrives at something different: it pads the
 * section by the gutter and then centres a 1200px column inside what is left,
 * putting the content edge ~47px further out at a 1350px viewport. The result
 * was a banner heading, a paragraph and a card grid on three different left
 * edges.
 *
 * So the padding is recomputed to place the column exactly where the original
 * put it, and content-size is redefined to 100% for everything inside - which
 * makes core's own rule resolve to the full width of that column instead of
 * insetting a second time. Redefining the variable rather than overriding
 * max-width directly leaves .tm-measure's own narrower measure intact, since
 * core's declaration and this theme's are then no longer competing for the
 * same property at the same specificity.
 */
.tm-section.is-layout-constrained {
	padding-inline: max(
		var(--gutter),
		calc((100% - 1200px) / 2 + var(--gutter))
	);
	--wp--style--global--content-size: 100%;
}

/* A shallower section, for a band that leads directly into the next one. */
.tm-section--snug {
	padding-top: clamp(40px, 5.5vw, 72px);
	padding-bottom: clamp(40px, 5.5vw, 72px);
}

.tm-section--tight {
	padding-top: clamp(32px, 4.4vw, 56px);
	padding-bottom: clamp(32px, 4.4vw, 56px);
}

.tm-section--tall {
	padding-top: clamp(70px, 8.6vw, 128px);
	padding-bottom: clamp(70px, 8.6vw, 128px);
}

.tm-section--flush-top {
	padding-top: 0;
}

.tm-section--flush-bottom {
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Eyebrow
   -------------------------------------------------------------------------- */

.tm-eyebrow {
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
}

.tm-eyebrow--rule::before {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	background: currentColor;
	opacity: 0.62;
	margin-bottom: 14px;
}

.tm-eyebrow--ink {
	color: var(--color-ink);
}

.tm-eyebrow--muted {
	color: var(--color-stone);
}

.tm-eyebrow--accent {
	color: var(--color-red);
}

.tm-eyebrow--inverse {
	color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   6. Buttons - core/button dressed as the design-system pill
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--control-h);
	height: auto;
	white-space: normal;
	text-align: center;
	border: 1px solid transparent;
	transition: background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.wp-block-button .wp-block-button__link:active {
	transform: scale(0.985);
}

/* Sizes: 34 / 44 / 54, matching the three control heights. */
.wp-block-button.tm-size-sm .wp-block-button__link {
	min-height: var(--control-h-sm);
	font-size: 13.5px;
	padding: 6px 20px;
}

.wp-block-button.tm-size-lg .wp-block-button__link {
	min-height: var(--control-h-lg);
	font-size: 16px;
	padding: 9px 32px;
}

/* Trailing arrow - the only decorative glyph besides the middle dot. */
.wp-block-button.tm-arrow .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--dur-fast) var(--ease-out);
}

.wp-block-button.tm-arrow .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* Variants registered as block styles in functions.php. */
.wp-block-button.is-style-tm-secondary .wp-block-button__link {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--border-soft);
}

.wp-block-button.is-style-tm-secondary .wp-block-button__link:hover {
	background: rgba(33, 33, 32, 0.06);
	color: var(--color-ink-deep);
	border-color: var(--border-strong);
}

.wp-block-button.is-style-tm-ink .wp-block-button__link {
	background: var(--color-ink);
	color: var(--color-paper);
}

.wp-block-button.is-style-tm-ink .wp-block-button__link:hover {
	background: var(--color-ink-deep);
	color: var(--color-white);
}

.wp-block-button.is-style-tm-inverse .wp-block-button__link {
	background: var(--color-paper);
	color: var(--color-ink-deep);
}

.wp-block-button.is-style-tm-inverse .wp-block-button__link:hover {
	background: var(--color-cream);
	color: var(--color-ink-deep);
}

.wp-block-button.is-style-tm-outline-inverse .wp-block-button__link {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.wp-block-button.is-style-tm-outline-inverse .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	border-color: var(--color-white);
}

.wp-block-button.is-style-tm-ghost .wp-block-button__link {
	background: transparent;
	color: var(--color-ink);
	border-color: transparent;
}

.wp-block-button.is-style-tm-ghost .wp-block-button__link:hover {
	background: rgba(33, 33, 32, 0.06);
}

/* A quiet uppercase text link with a rule under it, used on the hero. */
.tm-quietlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: start;
	padding: 0 2px 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
}

.tm-quietlink a {
	color: var(--color-white);
}

/*
 * The two hero links carry real marks - a compass on "Explore what's missing"
 * and a share glyph on "Connect with someone". They are drawn as masks rather
 * than inline SVG so they take var(--color-red) from one place and survive
 * wp_kses, which strips <svg> from post content for anyone without the
 * unfiltered_html capability.
 *
 * The :has() rules key off the link target so pages published before this
 * fix pick the right mark up without being re-inserted; the modifier classes
 * are what the pattern writes from now on.
 */
.tm-quietlink::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
	background-color: var(--color-red);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.tm-quietlink--compass::before,
.tm-quietlink:has(a[href*="missing"])::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
}

.tm-quietlink--share::before,
.tm-quietlink:has(a[href*="connect"])::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
}

/* An inline "read on" cue, e.g. Ask your question. */
.tm-cue {
	font-size: 14.5px;
	font-weight: 600;
	margin: 22px 0 0;
}

.tm-cue::after {
	content: " \2192";
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.tm-card {
	background: var(--color-white);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: 24px;
}

.tm-card--lg {
	padding: clamp(26px, 3.2vw, 40px);
}

.tm-card--flush {
	padding: 0;
	overflow: hidden;
}

.tm-card--cream {
	background: var(--color-cream);
	border-color: rgba(33, 33, 32, 0.1);
}

.tm-card--lilac {
	background: var(--color-lilac);
	border-color: transparent;
}

.tm-card--sand {
	background: var(--color-sand-light, var(--color-cream));
	border-color: transparent;
}

.tm-card--ink {
	background: var(--color-ink);
	border-color: var(--border-inverse);
	color: var(--color-cream);
}

.tm-card--accent {
	background: var(--color-red);
	border-color: transparent;
	color: var(--color-white);
}

.tm-card--fill {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.tm-card > :last-child {
	margin-bottom: 0;
}

/* A linked card lifts a little on hover. */
.tm-card--link {
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.tm-card--link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Badge - uppercase pill, the only other place caps are allowed. */
.tm-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: rgba(33, 33, 32, 0.07);
	color: var(--color-ink);
	margin: 0;
}

.tm-badge--inverse {
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-white);
}

.tm-badge--accent {
	background: var(--surface-accent-quiet);
	color: var(--color-red-deep);
}

/* Tag - used on the events list. */
.tm-tag {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-soft);
	color: var(--color-ink);
	margin: 0;
	white-space: nowrap;
}

.tm-tag--selected {
	background: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}

/* Card meta line: "Marisol - 26 - Santa Ana". */
.tm-meta {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-stone);
	margin: 0;
}

.tm-card--ink .tm-meta,
.tm-on-dark .tm-meta {
	color: rgba(233, 224, 210, 0.68);
}

/* --------------------------------------------------------------------------
   8. Interior page banners
   -------------------------------------------------------------------------- */

.tm-banner {
	position: relative;
	overflow: hidden;
}

/*
 * The banner measure is set here, not by a constrained layout.
 *
 * Core's constrained layout puts margin-left/right: auto !important on every
 * child. Combined with the flex column below, those auto margins win over
 * align-items: stretch, so each child shrinks to fit its text and centres -
 * which is why the eyebrow and the heading sat in the middle of the banner
 * instead of ranging left. Flow layout plus an explicit measure here behaves
 * the way the original markup did.
 */
.tm-banner__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin-inline: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 300px;
	padding-top: clamp(66px, 9.2vw, 120px);
	padding-bottom: clamp(40px, 5.5vw, 72px);
}

.tm-banner__inner > * {
	max-width: 100%;
}

/* The oversized script word. Fixed per page, never editable - which is why it
   is a class rather than a text block. */
.tm-banner::after {
	position: absolute;
	right: -2%;
	bottom: -24%;
	z-index: 0;
	font-family: var(--font-script);
	font-size: clamp(140px, 19vw, 280px);
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.17);
	pointer-events: none;
}

.tm-banner--word-more::after {
	content: "more";
}

.tm-banner--word-known::after {
	content: "known";
}

.tm-banner--word-ask::after {
	content: "ask";
}

.tm-banner--word-start::after {
	content: "start";
}

.tm-banner--word-back::after {
	content: "back";
}

.tm-banner--word-gather::after {
	content: "gather";
}

.tm-banner--word-belong::after {
	content: "belong";
}

/* One gradient per page, straight out of theme.json. */
.tm-banner--hero {
	background: var(--wp--preset--gradient--hero);
}

.tm-banner--ember {
	background: var(--wp--preset--gradient--ember);
}

.tm-banner--dusk {
	background: var(--wp--preset--gradient--dusk);
}

.tm-banner--lilac {
	background: var(--wp--preset--gradient--lilac);
}

.tm-banner--meadow {
	background: var(--wp--preset--gradient--meadow);
}

.tm-banner--ink {
	background: var(--wp--preset--gradient--ink);
}

.tm-banner--dark-room {
	background: var(--wp--preset--gradient--dark-room);
}

.tm-banner--connect {
	background: var(--wp--preset--gradient--connect);
}

/* Ink-on-light banners (Community, Seeker) need a dark script word and a
   left scrim is unnecessary. */
.tm-banner--on-light .tm-banner__inner :where(h1, h2, .tm-eyebrow) {
	color: var(--color-ink-deep);
}

.tm-banner--on-light::after {
	color: rgba(33, 33, 32, 0.13);
}

/* A left scrim so white type holds over the lighter half of a gradient. */
.tm-banner--scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(20, 20, 19, 0.42) 0%,
		rgba(20, 20, 19, 0.16) 42%,
		rgba(20, 20, 19, 0) 72%
	);
	pointer-events: none;
}

/* The ink banner carries the rotated fabric texture at soft-light. */
.tm-banner--texture-ink::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url(assets/images/texture-ink-rotated.png) center / cover
		no-repeat;
	mix-blend-mode: soft-light;
	opacity: 0.3;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Home hero
   -------------------------------------------------------------------------- */

.tm-hero {
	position: relative;
	overflow: hidden;
	background: #1a0d08;
	min-height: clamp(620px, 62vw, 900px);
	display: flex;
	flex-direction: column;
}

/*
 * The hero tucks up under the transparent header.
 *
 * This needs the element selector to carry it. Two other rules set a top
 * margin of zero on the same element at the same specificity and both come
 * later in the cascade: the section reset above, and the scoped container gap
 * core emits for the pattern's blockGap of 0 - which is printed after this
 * stylesheet. section.tm-hero outranks them both.
 */
section.tm-hero {
	margin-top: calc(var(--header-h) * -1);
}

/* Two crossfading photo plates. Both are real core/image blocks so the
   photography stays swappable from the editor. */
.tm-hero__plate {
	position: absolute;
	left: 0;
	right: 0;
	top: -13.2%;
	height: 130%;
	margin: 0;
	opacity: 0;
	transition: opacity 1400ms var(--ease-out);
	pointer-events: none;
}

.tm-hero__plate.is-active {
	opacity: 1;
}

.tm-hero__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 42% 50%;
	border-radius: 0;
}

.tm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(11, 11, 10, 0.46) 0%,
		rgba(11, 11, 10, 0) 46%
	);
	pointer-events: none;
}

.tm-hero__head,
.tm-hero__foot {
	position: relative;
	z-index: 2;
	width: 100%;
}

.tm-hero__head {
	padding-top: clamp(354px, 33.4vw, 480px);
}

.tm-hero__head h1 {
	font-size: var(--wp--preset--font-size--display);
	color: var(--color-white);
	margin: 0;
	text-rendering: geometricPrecision;
}

.tm-hero__foot {
	margin-top: auto;
	padding-top: clamp(48px, 7vw, 90px);
	padding-bottom: clamp(44px, 5.4vw, 68px);
}

/* The rotating script word. The swash on this face paints well left of the
   text origin and by a different amount per word, so the script is measured
   once at runtime and each word is indented by its own left bearing. */
.tm-rotator {
	font-family: var(--font-script);
	font-size: var(--wp--preset--font-size--script);
	line-height: 1.12;
	color: var(--color-white);
	padding-bottom: 6px;
	min-height: 1.16em;
	margin: 0;
	padding-left: var(--tm-swash, 0.71em);
}

.tm-rotator__word {
	display: inline-block;
	animation: tm-word-a 620ms var(--ease-entrance) both;
}

.tm-rotator__word.is-alt {
	animation-name: tm-word-b;
}

@keyframes tm-word-a {
	from {
		opacity: 0;
		transform: translateY(0.18em);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes tm-word-b {
	from {
		opacity: 0;
		transform: translateY(0.18em);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-rotator__word {
		animation: none;
	}

	.tm-hero__plate {
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   10. Marquee band
   -------------------------------------------------------------------------- */

.tm-marquee {
	background: var(--color-lime);
	overflow: hidden;
	padding: 17px 0;
}

.tm-marquee__track {
	display: flex;
	width: max-content;
	animation: tm-marquee 28s linear infinite;
}

.tm-marquee__run {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-right: 34px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-ink);
	white-space: nowrap;
	margin: 0;
}

@keyframes tm-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-marquee__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   11. Stories carousel (home)
   -------------------------------------------------------------------------- */

.tm-carousel {
	overflow: hidden;
	padding: 8px 0;
}

.tm-carousel__rail {
	position: relative;
	left: 50%;
}

.tm-carousel__track {
	position: relative;
	margin-left: calc(clamp(280px, 58vw, 700px) / -2);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(280px, 58vw, 700px);
	gap: 24px;
	/* Offsets are percentages, never vw - vw units overflowed horizontally. */
	transition: transform 780ms var(--ease-out);
}

.tm-carousel__track.is-instant {
	transition: none;
}

/* Off-centre slides go grey and step back, so the eye lands on the middle one. */
.tm-carousel__slide {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-media);
	overflow: hidden;
	background: var(--color-ink-deep);
	filter: grayscale(1) brightness(0.62);
	opacity: 0.82;
	transform: scale(0.9);
	transition: filter 780ms var(--ease-out), opacity 780ms var(--ease-out),
		transform 780ms var(--ease-out);
}

.tm-carousel__slide.is-current {
	filter: none;
	opacity: 1;
	transform: scale(1);
}

.tm-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 0;
}

/* The carousel's own anchors. Two differ from the story cards. */
.tm-carousel__slide img[src*="story-2"] {
	object-position: 50% 62%;
}

.tm-carousel__slide img[src*="story-4"] {
	object-position: center 40%;
}

.tm-carousel__slide img[src*="story-5"] {
	object-position: 60% 26%;
}

.tm-carousel__slide img[src*="story-6"] {
	object-position: center 26%;
}

.tm-carousel__slide a {
	display: block;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tm-carousel__slide {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-carousel__track {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   12. Photo bands - a real image behind a scrim, with content on top
   -------------------------------------------------------------------------- */

.tm-photoband {
	position: relative;
	overflow: hidden;
	background: #1b1b1a;
}

.tm-photoband__img {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.tm-photoband__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	border-radius: 0;
}

.tm-photoband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(45, 45, 44, 0.92) 0%,
		rgba(45, 45, 44, 0.66) 55%,
		rgba(45, 45, 44, 0.48) 100%
	);
	pointer-events: none;
}

.tm-photoband > .tm-photoband__body,
.tm-photoband__body {
	position: relative;
	z-index: 2;
}

.tm-photoband--bottom::before {
	background: linear-gradient(
		to top,
		rgba(11, 11, 10, 0.82) 0%,
		rgba(11, 11, 10, 0.36) 46%,
		rgba(11, 11, 10, 0) 100%
	);
}

.tm-photoband--grey .tm-photoband__img img {
	filter: grayscale(1) brightness(0.74) contrast(1.08);
}

.tm-photoband--grey::before {
	background: none;
}

/* A paper panel floating on a photo band (the two "start here" doors). */
.tm-door {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(360px, 32vw, 460px);
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	background: var(--color-paper);
	border-radius: 20px;
	padding: clamp(48px, 5vw, 86px) clamp(28px, 4vw, 56px);
	text-align: center;
}

.tm-door h2,
.tm-door h3 {
	font-size: var(--wp--preset--font-size--panel);
	line-height: 1.14;
	margin: 0;
}

.tm-door p {
	font-size: 16.5px;
	line-height: 1.6;
	max-width: 34ch;
	margin: 20px auto 0;
}

.tm-doors {
	min-height: clamp(520px, 46vw, 830px);
	padding: clamp(52px, 6vw, 92px) clamp(20px, 4vw, 56px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tm-doors--red {
	background: var(--color-red);
}

/* --------------------------------------------------------------------------
   13. Tall linked tiles (home "take the first step")
   -------------------------------------------------------------------------- */

.tm-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 480px;
	border-radius: 18px;
	overflow: hidden;
	padding: 26px;
	color: var(--color-white);
}

.tm-tile--connect {
	background: var(--wp--preset--gradient--connect);
}

.tm-tile h2,
.tm-tile h3,
.tm-tile h4 {
	position: relative;
	z-index: 2;
	font-family: var(--font-sans);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--color-white);
	margin: 0;
	text-shadow: 0 1px 12px rgba(20, 20, 19, 0.32);
}

.tm-tile p,
.tm-tile .tm-cue {
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, 0.94);
	font-size: 15.5px;
	line-height: 1.56;
	max-width: 44ch;
	text-shadow: 0 1px 10px rgba(20, 20, 19, 0.34);
}

.tm-tile__foot {
	position: relative;
	z-index: 2;
	margin-top: auto;
}

.tm-tile__img {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.tm-tile__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 88%;
	border-radius: 0;
}

.tm-tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(11, 11, 10, 0.78) 0%,
		rgba(11, 11, 10, 0.18) 46%,
		rgba(11, 11, 10, 0.34) 100%
	);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Definition rows - question / answer, topic / prompt
   -------------------------------------------------------------------------- */

.tm-rows {
	border-top: 1px solid var(--border-hairline);
}

.tm-rows--inverse {
	border-top-color: rgba(255, 255, 255, 0.24);
}

.tm-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 16px;
}

.tm-rows--inverse .tm-row {
	border-bottom-color: rgba(255, 255, 255, 0.24);
}

.tm-row p {
	margin: 0;
}

.tm-row__label {
	color: var(--color-stone);
}

.tm-rows--inverse .tm-row__label {
	color: rgba(255, 255, 255, 0.62);
}

.tm-rows--inverse .tm-row__value {
	color: rgba(255, 255, 255, 0.94);
}

/* Topic rows on What's missing: display-face topic beside its paragraph. */
.tm-topic {
	padding-top: 40px;
	padding-bottom: 40px;
	border-top: 1px solid var(--border-hairline);
}

.tm-topic:first-child {
	border-top: 0;
}

.tm-topic__name {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 400;
	letter-spacing: -0.024em;
	line-height: 1.1;
	color: var(--text-strong);
	margin: 0;
}

.tm-topic__prompt {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--color-red);
	margin: 16px 0 0;
}

/* Numbered steps. */
.tm-steps {
	list-style: none;
	counter-reset: tm-step;
	margin: 0;
	padding: 0;
}

.tm-steps > li {
	counter-increment: tm-step;
	position: relative;
	display: block;
	padding: 22px 0 22px 56px;
	border-top: 1px solid var(--border-hairline);
	margin: 0;
}

.tm-steps > li:last-child {
	border-bottom: 1px solid var(--border-hairline);
}

.tm-steps > li::before {
	content: counter(tm-step);
	position: absolute;
	left: 0;
	top: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background: var(--surface-accent-quiet);
	color: var(--color-red);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
}

.tm-steps strong {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-strong);
	margin-bottom: 6px;
}

/* A plain feature list with a leading rule. */
.tm-features > li,
li.tm-feature {
	list-style: none;
	padding: 22px 0;
	border-top: 1px solid var(--border-hairline);
	margin: 0;
}

.tm-features {
	margin: 0;
	padding: 0;
}

.tm-features > li:last-child {
	border-bottom: 1px solid var(--border-hairline);
}

.tm-features strong {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-strong);
	margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   15. Stories page - clamp and Read more
   -------------------------------------------------------------------------- */

.tm-story {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tm-story__media {
	margin: 0;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.tm-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 0;
}

/*
 * Crop anchors, one per photograph, taken from the original.
 *
 * A single shared anchor does not work here - Daniel is framed low and gets
 * beheaded at 30%, Priya sits right of centre. Keyed on the file name so they
 * apply to pages that are already published. Replace a photograph and it
 * falls back to the default above, which is the point at which the new one
 * needs its own anchor.
 */
.tm-story__media img[src*="story-1"] {
	object-position: center 32%;
}

.tm-story__media img[src*="story-2"] {
	object-position: 50% 78%;
}

.tm-story__media img[src*="story-3"] {
	object-position: center 30%;
}

.tm-story__media img[src*="story-4"] {
	object-position: center 32%;
}

.tm-story__media img[src*="story-5"] {
	object-position: 60% 26%;
}

.tm-story__media img[src*="story-6"] {
	object-position: center 26%;
}

.tm-story__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px;
}

.tm-story__body > h2,
.tm-story__body > h3 {
	font-size: clamp(22px, 3vw, 26px);
	line-height: 1.16;
	margin: 12px 0 14px;
}

/*
 * Five-line clamp drawn by the browser, so it gets its own ellipsis rather
 * than a hand-placed one. Driven by a class, not a data attribute: the group
 * block re-serialises from its own attributes on save and would drop anything
 * hand-written onto the element.
 */
.tm-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tm-clamp.is-open {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.tm-clamp p {
	margin-bottom: 1em;
}

.tm-clamp p:last-child {
	margin-bottom: 0;
}

/* Marisol's card is deliberately not clamped. */
.tm-clamp--none {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.tm-readmore {
	align-self: flex-start;
	margin-top: auto;
	padding: 16px 0 0;
	background: none;
	border: 0;
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-red);
	cursor: pointer;
}

.tm-readmore:hover {
	color: var(--color-red-deep);
	text-decoration: underline;
}

/* Feature story: photo beside a longer read. */
.tm-feature-story__media {
	margin: 0;
	border-radius: var(--radius-media);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.tm-feature-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   16. Pull quote
   -------------------------------------------------------------------------- */

.tm-pullquote {
	text-align: center;
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	padding: 0;
}

.tm-pullquote blockquote,
blockquote.tm-pullquote {
	font-family: var(--font-display);
	font-size: clamp(30px, 4.6vw, 46px);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin: 0;
	border: 0;
	padding: 0;
}

.tm-pullquote cite,
.tm-pullquote__source {
	display: block;
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-stone);
	margin-top: 26px;
}

.tm-on-dark .tm-pullquote blockquote,
.tm-on-dark blockquote.tm-pullquote {
	color: var(--color-white);
}

.tm-on-dark .tm-pullquote cite,
.tm-on-dark .tm-pullquote__source {
	color: rgba(233, 224, 210, 0.66);
}

/* --------------------------------------------------------------------------
   16b. Icon marks

   The design system drew these with Lucide 0.544.0, fetched from unpkg at
   runtime. They are inlined here instead: no third-party request on every page
   view, no dependency on a CDN staying up, and the colour comes from the token
   rather than being baked into a fetched file.

   Masks rather than inline SVG for the same reason as the hero links - wp_kses
   strips <svg> from post content for anyone without unfiltered_html, so an
   author saving the page would silently erase them.
   -------------------------------------------------------------------------- */

/*
 * Three practices on Explore faith: mark in a 24px column, heading and copy
 * beside it. Grid rather than flex so the two content blocks stack in the
 * second column without needing a wrapper in the markup.
 */
.tm-feature--icon {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 18px;
}

.tm-feature--icon > * {
	grid-column: 2;
}

.tm-feature--icon::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / -1;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	background-color: var(--color-red);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Community cards: mark sits above the title. */
.tm-icon::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: 16px;
	background-color: var(--color-red);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/*
 * The medallion on the Explore faith closing card: a 72px tinted disc with the
 * mark centred in it. A mask would clip the disc as well as the mark, so here
 * the mark is a background image with the red baked in.
 */
.tm-card--medallion::before {
	content: "";
	display: block;
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--radius-pill);
	background-color: var(--surface-accent-quiet);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

.tm-feature--sunrise::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v8'/%3E%3Cpath d='m4.93 10.93 1.41 1.41'/%3E%3Cpath d='M2 18h2'/%3E%3Cpath d='M20 18h2'/%3E%3Cpath d='m19.07 10.93-1.41 1.41'/%3E%3Cpath d='M22 22H2'/%3E%3Cpath d='m8 6 4-4 4 4'/%3E%3Cpath d='M16 18a4 4 0 0 0-8 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v8'/%3E%3Cpath d='m4.93 10.93 1.41 1.41'/%3E%3Cpath d='M2 18h2'/%3E%3Cpath d='M20 18h2'/%3E%3Cpath d='m19.07 10.93-1.41 1.41'/%3E%3Cpath d='M22 22H2'/%3E%3Cpath d='m8 6 4-4 4 4'/%3E%3Cpath d='M16 18a4 4 0 0 0-8 0'/%3E%3C/svg%3E");
}

.tm-feature--book::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

.tm-feature--moon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E");
}

.tm-icon--utensils::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
}

.tm-icon--mountain::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3 4 8 5-5 5 15H2L8 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3 4 8 5-5 5 15H2L8 3z'/%3E%3C/svg%3E");
}

.tm-icon--church::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 9h4'/%3E%3Cpath d='M12 7v5'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='m18 9 3.52 2.147a1 1 0 0 1 .48.854V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6.999a1 1 0 0 1 .48-.854L6 9'/%3E%3Cpath d='M6 21V7a1 1 0 0 1 .376-.782l5-3.999a1 1 0 0 1 1.249.001l5 4A1 1 0 0 1 18 7v14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 9h4'/%3E%3Cpath d='M12 7v5'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='m18 9 3.52 2.147a1 1 0 0 1 .48.854V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6.999a1 1 0 0 1 .48-.854L6 9'/%3E%3Cpath d='M6 21V7a1 1 0 0 1 .376-.782l5-3.999a1 1 0 0 1 1.249.001l5 4A1 1 0 0 1 18 7v14'/%3E%3C/svg%3E");
}

.tm-icon--heart-handshake::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762'/%3E%3C/svg%3E");
}

.tm-card--medallion::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F23C0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 9h4'/%3E%3Cpath d='M12 7v5'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='m18 9 3.52 2.147a1 1 0 0 1 .48.854V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6.999a1 1 0 0 1 .48-.854L6 9'/%3E%3Cpath d='M6 21V7a1 1 0 0 1 .376-.782l5-3.999a1 1 0 0 1 1.249.001l5 4A1 1 0 0 1 18 7v14'/%3E%3C/svg%3E");
}
/* --------------------------------------------------------------------------
   17. Icon medallion
   -------------------------------------------------------------------------- */

.tm-medallion {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--radius-pill);
	background: var(--surface-accent-quiet);
	color: var(--color-red);
	font-family: var(--font-display);
	font-size: 26px;
	margin: 0;
}

.tm-medallion--sm {
	width: 48px;
	height: 48px;
	font-size: 20px;
}

/* --------------------------------------------------------------------------
   18. Community - ZIP search
   -------------------------------------------------------------------------- */

.tm-zip {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-top: 24px;
}

.tm-zip__field {
	flex: 1 1 220px;
	min-width: 0;
}

.tm-zip__field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-stone);
	margin-bottom: 8px;
}

.tm-zip__field input {
	width: 100%;
	height: var(--control-h-lg);
	padding: 0 18px;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	background: var(--color-white);
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--color-ink);
}

.tm-zip__field input:focus {
	outline: 2px solid var(--color-red);
	outline-offset: 1px;
	border-color: var(--color-red);
}

.tm-zip__submit,
.tm-zip__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-h-lg);
	padding: 9px 32px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.tm-zip__submit {
	background: var(--color-red);
	color: var(--color-white);
}

.tm-zip__submit:hover {
	background: var(--color-red-deep);
}

.tm-zip__clear {
	background: transparent;
	color: var(--color-ink);
}

.tm-zip__clear:hover {
	background: rgba(33, 33, 32, 0.06);
}

.tm-zip__error,
.tm-zip__count {
	font-size: 14.5px;
	margin: 16px 0 0;
}

.tm-zip__error {
	color: var(--color-red-deep);
	font-weight: 600;
}

.tm-zip__count {
	color: var(--color-stone);
}

.tm-results {
	margin-top: clamp(40px, 5vw, 64px);
}

.tm-results[hidden] {
	display: none !important;
}

.tm-results__group + .tm-results__group {
	margin-top: clamp(40px, 5vw, 64px);
}

.tm-results__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tm-results__head h3 {
	font-size: clamp(24px, 3vw, 32px);
	margin: 0;
}

.tm-results__head::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: var(--radius-pill);
	background: var(--color-red);
}

.tm-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
	margin-top: 26px;
}

.tm-listing {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--color-white);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: 22px;
}

.tm-listing__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.008em;
	color: var(--text-strong);
	margin: 0;
}

.tm-listing__where {
	font-size: 14px;
	color: var(--color-stone);
	margin: 0;
}

.tm-listing__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 2px;
}

.tm-listing__links a {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--color-red);
	border-bottom: 1px solid rgba(242, 60, 14, 0.34);
}

.tm-listing__links a:hover {
	border-bottom-color: var(--color-red-deep);
}

.tm-listing__cta {
	margin-top: auto;
	padding-top: 14px;
}

.tm-listing__cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-h);
	padding: 7px 22px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-soft);
	color: var(--color-ink);
	font-size: 14.5px;
	font-weight: 600;
}

.tm-listing__cta a:hover {
	background: rgba(33, 33, 32, 0.06);
	color: var(--color-ink-deep);
	border-color: var(--border-strong);
}

.tm-results__more {
	margin-top: 26px;
}

.tm-results__more button {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h);
	padding: 7px 24px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-soft);
	background: transparent;
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-ink);
	cursor: pointer;
}

.tm-results__more button:hover {
	background: rgba(33, 33, 32, 0.06);
}

/* --------------------------------------------------------------------------
   19. Events list
   -------------------------------------------------------------------------- */

.tm-events {
	border-top: 1px solid var(--border-hairline);
}

.tm-event {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px 26px;
	padding: 24px 0;
	border-bottom: 1px solid var(--border-hairline);
}

.tm-event__date {
	text-align: center;
}

.tm-event__day {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1;
	color: var(--text-strong);
	margin: 0;
}

.tm-event__weekday {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-stone);
	margin: 6px 0 0;
}

.tm-event__title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--text-strong);
	margin: 0;
}

.tm-event__detail {
	font-size: 14.5px;
	color: var(--color-stone);
	margin: 6px 0 0;
}

.tm-event__tag {
	justify-self: end;
}

.tm-events__month {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin: 0 0 8px;
	padding-top: 32px;
}

@media (max-width: 600px) {
	.tm-event {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.tm-event__tag {
		grid-column: 2;
		justify-self: start;
	}

	.tm-event__day {
		font-size: 28px;
	}
}

/* --------------------------------------------------------------------------
   20. Connect form frame
   -------------------------------------------------------------------------- */

.tm-formframe {
	border: 0;
	width: 100%;
	min-height: 900px;
	border-radius: var(--radius-card);
	background: transparent;
}

.tm-formframe-wrap {
	margin-top: 26px;
}

/* --------------------------------------------------------------------------
   21. Grid layout helpers
   Native core grid layout handles most of it; these are the exceptions.
   -------------------------------------------------------------------------- */

.tm-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/*
 * Core's grid layout uses auto-fill, which leaves an empty track when a row
 * holds fewer items than it has room for. The original site used auto-fit
 * throughout, so a two-card row spreads to fill the width instead of sitting
 * two-thirds across. These override the track list without touching anything
 * else core generates.
 */
.wp-block-group.is-layout-grid.tm-autofit-240 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-280 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-300 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-320 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-340 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-380 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-400 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.wp-block-group.is-layout-grid.tm-autofit-420 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* A two-up row where the second column carries the wider measure. */
.tm-lede {
	align-items: end;
}

.tm-lede--top {
	align-items: start;
}

/*
 * A fluid gap on a two-up lede. Set here rather than as a blockGap attribute:
 * core rejects any blockGap value containing a bracket, so a clamp() written
 * into the block markup is discarded without warning and the row silently
 * falls back to the 24px root gap.
 */
.wp-block-group.tm-gap-lede {
	gap: clamp(32px, 4.4vw, 64px);
}

.tm-equal > .wp-block-group,
.tm-equal > .tm-card {
	height: 100%;
}

.tm-imgpair figure,
.tm-imgpair .wp-block-image {
	margin: 0;
}

.tm-imgpair img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-media);
}

.tm-rounded img {
	border-radius: var(--radius-media);
}

/* --------------------------------------------------------------------------
   22. Blog, archive and search fallbacks
   -------------------------------------------------------------------------- */

.tm-entry__title a {
	color: var(--text-strong);
}

.tm-entry__title a:hover {
	color: var(--color-red);
}

.tm-entry__meta {
	font-size: 13.5px;
	color: var(--color-stone);
}

.wp-block-post-content > * {
	max-width: var(--measure-prose);
}

.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignwide,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-columns,
.wp-block-post-content > .wp-block-cover {
	max-width: none;
}

.wp-block-query-pagination {
	font-size: 14.5px;
	margin-top: 48px;
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */

@media print {
	.tm-header,
	.tm-footer,
	.tm-marquee,
	.tm-carousel {
		display: none !important;
	}

	.tm-banner::after {
		display: none;
	}
}