/* =============================================================
   OvalTwo Child stylesheet (handle: ovaltwo-child-style)
   Loads after the parent (ovaltwo-style).

   Brand values go into the parent's custom properties; child tokens
   cover only what the parent doesn't. A palette changes tokens only.
   Design system: docs/child-design-system.md.

   Mobile first, min-width queries only:
   - 768px  service cards in three columns; footer menus in three columns;
            footer info on one row; 404 code beside the message
   - 992px  parent: navigation expands. Child: section spacing and card
            padding step up; split, testimonial, editorial, principle,
            contact panel, entry card and footer layouts go multi-column;
            hero minimum heights apply

   Contents
   1. Fonts, tokens and palettes
   2. Base and type
   3. Shared primitives
   4. Header and navigation
   5. Footer
   6. Layout renderers (6.8 contact panel, 6.9 Gravity Forms,
      6.10 journal feed)
   7. Views: listing and entry cards, article, 404
   ============================================================= */

/* -------------------------------------------------------------
   1. Fonts, tokens and palettes
   ------------------------------------------------------------- */

@font-face {
	font-family: "Gill Sans";
	src: url("../fonts/gill-sans.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plantin";
	src: url("../fonts/plantin.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plantin";
	src: url("../fonts/plantin-italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Palette-independent tokens, and the dark palette (the default). */
:root {
	/* Dark palette: raw values */
	--color-text: #d9dee7;
	--color-background: #0a0e14;
	--color-muted: #9ba0a8;
	--color-subtle: #8390a3;
	--color-accent: #82a59b;
	--color-on-accent: #0a0e14;
	--color-link-hover: #c9d8d3;
	--color-label: #82a59b;
	--color-danger: #d98c8c;
	--color-rule: rgba(255, 255, 255, 0.08);
	--color-surface: #101722;
	--surface-subtle: #101722;
	--surface-dark: #06080d;
	--surface-glow:
		radial-gradient(
			circle at center,
			rgba(130, 165, 155, 0.08),
			transparent 40%
		),
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.01),
			rgba(255, 255, 255, 0)
		);
	--page-background:
		radial-gradient(
			circle at top,
			rgba(75, 126, 142, 0.08),
			transparent 35%
		),
		linear-gradient(to bottom, #0a0e14, #09111d);
	--header-background: rgba(10, 14, 20, 0.84);
	--card-background: rgba(255, 255, 255, 0.02);
	--card-border-color: rgba(255, 255, 255, 0.06);
	--card-shadow: none;
	--submenu-background: #121a25;
	--submenu-border-color: rgba(255, 255, 255, 0.1);
	--submenu-shadow:
		0 12px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);

	/* Type */
	--font-body: "Gill Sans", "Gill Sans MT", sans-serif;
	--font-heading: var(--font-body);
	--font-serif: "Plantin", Georgia, serif;
	--step--1: 0.9375rem;
	--step-0: clamp(1.0625rem, 1rem + 0.3vw, 1.175rem);
	--step-1: 1.125rem;
	--step-2: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
	--step-3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
	--step-4: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	--step-5: clamp(2.25rem, 1.8rem + 1.9vw, 3rem);
	--step-display: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);
	--step-quote: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
	--step-lead: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
	--step-label: 0.8125rem;
	--leading-body: 1.65;
	--leading-heading: 0.95;

	/* Reading measures */
	--measure-heading-narrow: 13ch;
	--measure-heading: 16ch;
	--measure-heading-wide: 22ch;
	--measure-lead-narrow: 46ch;
	--measure-lead: 56ch;
	--measure-lead-wide: 68ch;
	--measure-prose-narrow: 56ch;
	--measure-prose: 70ch;

	/* Layout and rhythm */
	--container-width: 81rem;
	--gutter: clamp(1.25rem, 5vw, 4.5rem);
	--grid-gap: 1.5rem;
	--section-space-m: 5rem;
	--section-space-l: 6rem;
	--radius: 0.375rem;
	--radius-card: 1rem;
	--radius-pill: 999px;
	--card-radius: var(--radius-card);
	--card-padding: 1.75rem;

	/* Header (bar height is fixed at every width; parent contract) */
	--header-height: 3.75rem;

	/* Submenu (palette-independent; colours are per palette and derived on body) */
	--submenu-radius: 0.5rem;
	--submenu-gap: 0.875rem;
	--submenu-row-padding: 0.625rem 0.875rem;

	/* Focus */
	--focus-width: 2px;
	--focus-offset: 4px;
}

@media (min-width: 992px) {
	:root {
		--section-space-m: 6rem;
		--section-space-l: 8rem;
		--card-padding: 2.25rem;
	}
}

/* Oak palette: raw values only. */
.palette-oak {
	--color-text: #1e2522;
	--color-background: #e7dfd1;
	--color-muted: #4f544c;
	--color-subtle: #585b52;
	--color-accent: #43584f;
	--color-on-accent: #fff;
	--color-link-hover: #1e2522;
	--color-label: #655434;
	--color-danger: #9a3324;
	--color-rule: rgba(30, 37, 34, 0.1);
	--color-surface: #eee8de;
	--surface-subtle: #eee8de;
	--surface-dark: #d7d0c3;
	--surface-glow:
		radial-gradient(
			circle at center,
			rgba(94, 116, 104, 0.08),
			transparent 40%
		),
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.22),
			rgba(255, 255, 255, 0)
		);
	--page-background:
		radial-gradient(
			circle at top right,
			rgba(67, 88, 79, 0.06),
			transparent 32%
		),
		radial-gradient(
			circle at bottom left,
			rgba(157, 135, 99, 0.05),
			transparent 28%
		),
		linear-gradient(to bottom, #e7dfd1, #f3ede3);
	--header-background: rgba(231, 223, 209, 0.88);
	--card-background: rgba(255, 255, 255, 0.5);
	--card-border-color: rgba(30, 37, 34, 0.08);
	--card-shadow: 0 10px 30px rgba(30, 37, 34, 0.04);
	--submenu-background: #f8f4ec;
	--submenu-border-color: rgba(30, 37, 34, 0.12);
	--submenu-shadow:
		0 12px 32px rgba(30, 37, 34, 0.12), 0 1px 2px rgba(30, 37, 34, 0.08);
}

/* Redwood palette: raw values only. */
.palette-redwood {
	--color-text: #23211f;
	--color-background: #f3eee6;
	--color-muted: #55514b;
	--color-subtle: #5a554e;
	--color-accent: #6e463c;
	--color-on-accent: #fff;
	--color-link-hover: #23211f;
	--color-label: #765737;
	--color-danger: #9a3324;
	--color-rule: rgba(35, 33, 31, 0.1);
	--color-surface: #f8f4f0;
	--surface-subtle: #f8f4f0;
	--surface-dark: #e2ded6;
	--surface-glow:
		radial-gradient(
			circle at center,
			rgba(123, 84, 72, 0.08),
			transparent 40%
		),
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.32),
			rgba(255, 255, 255, 0)
		);
	--page-background:
		radial-gradient(
			circle at top right,
			rgba(123, 84, 72, 0.05),
			transparent 34%
		),
		radial-gradient(
			circle at bottom left,
			rgba(176, 138, 99, 0.05),
			transparent 28%
		),
		linear-gradient(to bottom, #f3eee6, #f8f4ee);
	--header-background: rgba(243, 238, 230, 0.88);
	--card-background: rgba(255, 255, 255, 0.7);
	--card-border-color: rgba(35, 33, 31, 0.06);
	--card-shadow: 0 10px 30px rgba(35, 33, 31, 0.04);
	--submenu-background: #fdfbf8;
	--submenu-border-color: rgba(35, 33, 31, 0.12);
	--submenu-shadow:
		0 12px 32px rgba(35, 33, 31, 0.12), 0 1px 2px rgba(35, 33, 31, 0.08);
}

/* Cedar palette: raw values only. */
.palette-cedar {
	--color-text: #1f2622;
	--color-background: #f1ebe2;
	--color-muted: #4f544e;
	--color-subtle: #575b54;
	--color-accent: #565b49;
	--color-on-accent: #fff;
	--color-link-hover: #1f2622;
	--color-label: #665744;
	--color-danger: #9a3324;
	--color-rule: rgba(31, 38, 34, 0.1);
	--color-surface: #f5f1ea;
	--surface-subtle: #f5f1ea;
	--surface-dark: #e0dbd3;
	--surface-glow:
		radial-gradient(
			circle at center,
			rgba(100, 121, 104, 0.08),
			transparent 40%
		),
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.22),
			rgba(255, 255, 255, 0)
		);
	--page-background:
		radial-gradient(
			circle at top right,
			rgba(122, 128, 104, 0.035),
			transparent 32%
		),
		radial-gradient(
			circle at bottom left,
			rgba(162, 143, 120, 0.035),
			transparent 28%
		),
		linear-gradient(to bottom, #e4ddd0, #f2ebe0);
	--header-background: rgba(228, 221, 208, 0.88);
	--card-background: rgba(255, 255, 255, 0.5);
	--card-border-color: rgba(31, 38, 34, 0.08);
	--card-shadow: 0 10px 30px rgba(31, 38, 34, 0.04);
	--submenu-background: #fbf8f3;
	--submenu-border-color: rgba(31, 38, 34, 0.12);
	--submenu-shadow:
		0 12px 32px rgba(31, 38, 34, 0.12), 0 1px 2px rgba(31, 38, 34, 0.08);
}

/* Derived tokens. Declared on body, where the palette class sits, so they
   resolve against the active palette (parent defaults resolve on :root). */
body {
	--color-focus: var(--color-accent);
	--nav-link-color: var(--color-subtle);
	--nav-link-hover-color: var(--color-accent);
	--nav-link-current-color: var(--color-accent);
	--nav-link-open-color: var(--color-accent);
	--button-background: var(--color-accent);
	--button-text: var(--color-on-accent);
	--button-hover-background: var(--color-text);
	--button-hover-text: var(--color-background);
	--submenu-link-color: var(--color-muted);
	--submenu-link-hover-color: var(--color-text);
	--submenu-link-hover-background: color-mix(
		in srgb,
		var(--color-accent) 14%,
		var(--submenu-background)
	);
	--submenu-link-current-color: var(--color-accent);
	--submenu-focus-color: var(--color-accent);
}

/* -------------------------------------------------------------
   2. Base and type
   ------------------------------------------------------------- */

body {
	background: var(--page-background);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
	margin-block-end: var(--space-m);
	color: var(--color-text);
	font-weight: 600;
	letter-spacing: -0.05em;
}

h3,
h4,
h5,
h6 {
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

p {
	color: var(--color-muted);
}

a:hover {
	color: var(--color-link-hover);
}

strong {
	color: var(--color-text);
}

/* -------------------------------------------------------------
   3. Shared primitives
   ------------------------------------------------------------- */

/* Page-builder templates and the section-based views (listings, 404,
   testimonial single): sections run edge to edge and carry their own
   spacing. The :has() rule covers the views; .page-template is kept for
   browsers without :has(). */
.page-template .site-main,
.site-main:has(> section:first-child) {
	padding-block: 0;
}

/* Section rhythm. :where() keeps it at element specificity, so each
   component sets its own size with a single class. */
:where(.site-main) > section {
	padding-block: var(--section-space-m);
}

[data-surface="subtle"] {
	background: var(--surface-subtle);
}

[data-surface="dark"] {
	background: var(--surface-dark);
}

[data-surface="glow"] {
	background: var(--surface-glow);
}

/* Section label (eyebrow): kickers, content labels, principle numbers,
   footer headings. */
.section-label {
	margin-block: 0 var(--space-m);
	color: var(--color-label);
	font-family: var(--font-body);
	font-size: var(--step-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Heading, optional lead, at the start of a section. */
.section-header {
	margin-block-end: var(--space-xl);
}

.section-header h2 {
	max-width: var(--measure-heading-narrow);
}

.section-header > :last-child {
	margin-block-end: 0;
}

.lead {
	max-width: var(--measure-lead);
	color: var(--color-muted);
	font-size: var(--step-lead);
	line-height: 1.6;
}

.lead p {
	margin-block-end: var(--space-s);
	color: inherit;
}

.lead > :last-child {
	margin-block-end: 0;
}

/* Rich text from the editor. */
.prose > :last-child {
	margin-block-end: 0;
}

.prose :is(h2, h3, h4) {
	margin-block: var(--space-l) var(--space-s);
}

.prose li {
	color: var(--color-muted);
}

/* Card: service cards. */
.card {
	display: flex;
	flex-direction: column;
	padding: var(--card-padding);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	background: var(--card-background);
	box-shadow: var(--card-shadow);
}

.card h3 {
	margin-block-end: var(--space-s);
}

/* Call to action: a text link with an arrow. */
.cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--color-accent);
	font-weight: 500;
	text-decoration: none;
}

.cta-link::after {
	content: "→" / "";
}

.cta-link:hover {
	text-decoration: none;
}

.card .cta-link {
	align-self: flex-start;
	margin-block-start: auto;
}

/* Editor-only notices (pending templates, unmigrated layouts, no ACF). */
.editor-notice {
	margin-block: var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border: 1px dashed var(--color-accent);
	border-radius: var(--radius);
	font-size: var(--step--1);
}

.editor-notice p {
	margin: 0;
	color: var(--color-text);
}

@media (prefers-reduced-motion: no-preference) {
	.cta-link::after {
		transition: transform 0.2s ease;
	}

	.cta-link:hover::after {
		transform: translateX(0.25rem);
	}
}

/* -------------------------------------------------------------
   4. Header and navigation
   Parent structure and behaviour; brand values through tokens.
   ------------------------------------------------------------- */

.site-header {
	--color-focus: var(--nav-link-hover-color);

	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.site-header.is-menu-open {
	--header-background: var(--color-background);
}

/* Brand: its margin box is exactly the bar height, so the focus ring
   stays inside the bar. */
.site-brand {
	display: flex;
	align-items: center;
	height: 2.75rem;
	margin-block: calc((var(--header-height) - 2.75rem) / 2);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1875em;
}

.site-brand img {
	margin-inline-end: 1rem;
}

.site-brand span {
	color: var(--color-accent);
}

.menu-toggle {
	color: var(--color-accent);
}

.menu a,
.menu-item-label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-underline-offset: 0.4em;
}

/* Notes stays current on posts, post archives and search (core's
   current_page_parent, limited to those views in inc/views.php). */
.menu .current_page_parent > a {
	color: var(--nav-link-current-color);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.submenu-toggle:hover {
	color: var(--nav-link-hover-color);
}

/* Submenu (dropdown). Base, for the collapsed menu and the no-JS
   fallback: links expand inline beneath their parent, marked by a small
   indent and a quiet rule. From 992px with JS: a compact floating panel
   (below). Labels are shown in mixed case with light tracking; the
   stored menu labels are not changed. */
.sub-menu {
	--color-focus: var(--submenu-focus-color);
	--focus-offset: -2px;

	margin-block: 0 var(--space-xs);
	margin-inline-start: var(--space-2xs);
	padding: 0 0 0 var(--space-s);
	border: 0;
	border-inline-start: 1px solid var(--color-rule);
	border-radius: 0;
	background: none;
}

.sub-menu a {
	padding: 0.75rem var(--space-xs);
	border-radius: var(--radius);
	font-size: var(--step--1);
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-transform: none;
	overflow-wrap: anywhere;
}

.sub-menu a:hover {
	text-decoration: none;
}

/* Current page: underline as well as colour, kept while hovered. */
.sub-menu .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Contact pill: Appearance → Menus → CSS Classes "menu-contact".
   Without the class, Contact is an ordinary menu link. */
.menu-contact {
	margin-block-start: var(--space-xs);
}

.menu .menu-contact > a {
	flex: none;
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-pill);
	background: var(--button-background);
	color: var(--button-text);
	text-decoration: none;
}

.menu .menu-contact > a:hover {
	background: var(--button-hover-background);
	color: var(--button-hover-text);
}

@media (min-width: 992px) {
	.submenu-toggle {
		min-width: 1.5rem;
	}

	.js .sub-menu {
		width: max-content;
		min-width: 11rem;
		max-width: 18rem;
		margin: var(--submenu-gap) 0 0;
		padding: var(--space-2xs);
		border: 1px solid var(--submenu-border-color);
		border-radius: var(--submenu-radius);
		background: var(--submenu-background);
		box-shadow: var(--submenu-shadow);
	}

	.js .sub-menu a {
		padding: var(--submenu-row-padding);
		border-radius: calc(var(--submenu-radius) - var(--space-2xs));
	}

	.menu-contact {
		margin-block-start: 0;
		margin-inline-start: var(--space-s);
	}
}

/* -------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------- */

.site-footer {
	padding-block: var(--section-space-m) 0;
	font-size: var(--step--1);
}

.footer-main {
	display: grid;
	gap: var(--space-xl);
}

.footer-brand p {
	max-width: 20rem;
	margin-block: var(--space-xs) 0;
}

.footer-menus {
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: 0;
}

.site-footer .section-label {
	margin-block-end: var(--space-s);
}

.footer-menu a {
	color: var(--color-muted);
	text-decoration: none;
}

.footer-menu a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.site-info {
	margin-block-start: var(--section-space-m);
	padding-block: var(--space-m);
	border-block-start: 1px solid var(--color-rule);
}

.site-info .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	text-align: center;
}

.site-info p {
	margin: 0;
	color: var(--color-subtle);
}

.site-info a {
	color: inherit;
	text-decoration: none;
}

.site-info a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.footer-menus {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-info .container {
		flex-direction: row;
		justify-content: space-between;
		text-align: start;
	}
}

@media (min-width: 992px) {
	.footer-main {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--grid-gap);
	}

	.footer-brand {
		grid-column: 1 / span 5;
	}

	.footer-menus {
		grid-column: 7 / -1;
	}
}

/* -------------------------------------------------------------
   6. Layout renderers
   ------------------------------------------------------------- */

/* 6.1 Hero (hero_opening) ------------------------------------- */

.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero[data-size="standard"],
.hero[data-size="large"] {
	padding-block: var(--section-space-l);
}

.hero h1 {
	max-width: var(--measure-heading);
	margin-block-end: var(--space-l);
	font-size: var(--step-display);
}

.hero[data-heading-width="narrow"] h1 {
	max-width: var(--measure-heading-narrow);
}

.hero[data-heading-width="full"] h1 {
	max-width: none;
}

.heading-accent {
	color: var(--color-accent);
}

.hero .lead {
	margin-block-end: var(--space-l);
}

.hero[data-lead-width="narrow"] .lead {
	max-width: var(--measure-lead-narrow);
}

.hero[data-lead-width="wide"] .lead {
	max-width: var(--measure-lead-wide);
}

.hero[data-lead-width="full"] .lead {
	max-width: none;
}

.hero[data-align="center"] {
	text-align: center;
}

.hero[data-align="center"] :is(h1, .lead) {
	margin-inline: auto;
}

@media (min-width: 992px) {
	.hero[data-size="standard"] {
		min-height: min(70vh, 44rem);
	}

	.hero[data-size="large"] {
		min-height: min(85vh, 52rem);
	}
}

/* 6.2 Content section (content_section) ---------------------- */

.content-section .container {
	display: grid;
	row-gap: var(--space-l);
}

.content-section .section-header {
	margin: 0;
}

.content-section .prose {
	max-width: var(--measure-prose);
}

.content-section[data-width="narrow"] .prose {
	max-width: var(--measure-prose-narrow);
}

.content-section[data-width="wide"] .prose {
	max-width: none;
}

.content-section figure {
	margin: 0;
}

.content-section[data-layout="centered"] .container {
	justify-items: center;
	text-align: center;
}

.content-section[data-layout="centered"] h2 {
	margin-inline: auto;
}

@media (min-width: 992px) {
	.content-section[data-layout="split"] .container {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--grid-gap);
	}

	.content-section[data-layout="split"] .section-header {
		grid-row: span 2;
	}

	.content-section[data-layout="split"] :is(.prose, figure) {
		grid-column: 2;
	}
}

/* 6.3 Services (services_grid) -------------------------------- */

.services-grid {
	display: grid;
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 6.4 Editorial break (editorial_break) ----------------------- */

.editorial-break {
	padding-block: var(--section-space-l);
}

.editorial-break .container {
	display: grid;
}

.editorial-break h2 {
	max-width: var(--measure-heading-narrow);
	margin: 0;
	font-size: var(--step-display);
	letter-spacing: -0.06em;
}

.editorial-break[data-align="center"] {
	text-align: center;
}

.editorial-break[data-align="center"] h2 {
	max-width: var(--measure-heading-wide);
	margin-inline: auto;
}

@media (min-width: 992px) {
	.editorial-break .container {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--grid-gap);
	}

	.editorial-break .container > * {
		grid-column: 1 / span 8;
	}

	.editorial-break[data-align="center"] .container > * {
		grid-column: 3 / span 8;
	}

	.editorial-break[data-align="right"] .container > * {
		grid-column: 5 / -1;
	}
}

/* 6.5 Testimonial (testimonial_feature) ----------------------- */

.testimonial {
	border-block: 1px solid var(--color-rule);
}

.testimonial[data-style="minimal"] {
	border-block: 0;
}

.testimonial .container {
	display: grid;
	gap: var(--space-l);
}

.testimonial h2 {
	max-width: var(--measure-heading-narrow);
	margin: 0;
}

.testimonial figure {
	margin: 0;
}

.testimonial blockquote {
	margin: 0 0 var(--space-l);
	padding: 0;
	border: 0;
}

.testimonial blockquote p {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: var(--step-quote);
	line-height: 1.35;
	letter-spacing: -0.03em;
}

.testimonial[data-style="minimal"] blockquote p {
	font-size: var(--step-lead);
}

.testimonial figcaption {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0;
	color: var(--color-subtle);
	font-size: var(--step--1);
}

.testimonial-name {
	color: var(--color-label);
	font-size: var(--step-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (min-width: 992px) {
	.testimonial[data-style="featured"] .container {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: end;
		column-gap: var(--grid-gap);
	}

	.testimonial[data-style="featured"] figure {
		grid-column: 2;
	}
}

/* 6.6 Principles (principles_list) ---------------------------- */

.principles {
	--principle-label-width: 4rem;
}

.principles[data-variant="journal"] {
	--principle-label-width: 10rem;
}

.principles-list {
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--color-rule);
	list-style: none;
}

.principles-list li {
	display: grid;
	gap: var(--space-xs);
	padding-block: var(--space-m);
	border-block-end: 1px solid var(--color-rule);
}

.principles-list :is(.section-label, h3, p) {
	margin: 0;
}

@media (min-width: 992px) {
	.principles-list li {
		grid-template-columns: var(--principle-label-width) minmax(
				0,
				1fr
			) minmax(0, 1.4fr);
		column-gap: var(--space-l);
		padding-block: var(--space-l);
	}

	.principles-list h3 {
		grid-column: 2;
	}

	.principles-list p {
		grid-column: 3;
	}
}

/* 6.7 Final call to action (final_cta) ------------------------ */

.final-cta {
	padding-block: var(--section-space-l);
	text-align: center;
}

.final-cta h2 {
	max-width: var(--measure-heading-wide);
	margin-inline: auto;
	margin-block-end: var(--space-l);
	font-size: var(--step-display);
	letter-spacing: -0.06em;
}

.final-cta .lead {
	max-width: var(--measure-lead-narrow);
	margin-inline: auto;
	margin-block-end: var(--space-l);
}

/* 6.8 Contact panel (contact_panel) --------------------------- */

.contact-panel .container {
	display: grid;
	row-gap: var(--space-l);
}

.contact-panel .section-header {
	margin: 0;
}

.contact-panel .prose {
	max-width: var(--measure-prose-narrow);
}

.contact-panel li::marker {
	color: var(--color-accent);
}

.contact-panel .editor-notice {
	margin: 0;
}

@media (min-width: 992px) {
	.contact-panel .container:has(> .contact-form, > .editor-notice) {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		grid-template-rows: auto 1fr;
		align-items: start;
		column-gap: var(--grid-gap);
	}

	.contact-panel :is(.contact-form, .editor-notice) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* 6.9 Gravity Forms in the contact panel ----------------------
   Colours the form's own style settings print on an ID selector come
   from ovaltwo_child_form_style_settings() (PHP). Everything else is set
   here: Orbital custom properties on the form wrapper, then direct rules
   only where a property cannot express the design. No !important. */

.contact-panel .gform-theme--framework {
	--gf-font-family-base: var(--font-body);
	--gf-ctrl-font-size: 1rem;
	--gf-ctrl-placeholder-color: var(--color-subtle);
	--gf-ctrl-shadow: none;
	--gf-ctrl-outline-color-focus: var(--color-focus);
	--gf-ctrl-outline-width-focus: var(--focus-width);
	--gf-ctrl-outline-offset: 2px;
	--gf-ctrl-btn-size: 3rem;
	--gf-ctrl-btn-font-size: 1rem;
	--gf-ctrl-btn-font-weight: 500;
	--gf-ctrl-btn-padding-x: var(--space-l);
	--gf-ctrl-btn-radius: var(--radius-pill);
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-bg-color-hover-primary: var(--button-hover-background);
	--gf-ctrl-btn-color-hover-primary: var(--button-hover-text);
	--gf-ctrl-btn-border-color-focus-primary: transparent;
	--gf-color-danger: var(--color-danger);
	--gf-ctrl-border-color-error: var(--color-danger);
	--gf-ctrl-desc-color-error: var(--color-danger);
	--gf-ctrl-label-color-req: var(--color-subtle);
	--gf-form-validation-color: var(--color-danger);
	--gf-form-validation-bg-color: color-mix(
		in srgb,
		var(--color-danger) 8%,
		transparent
	);
	--gf-form-validation-border-color: var(--color-danger);
	--gf-form-validation-border-color-focus: var(--color-danger);
	--gf-form-validation-outline-color-focus: var(--color-focus);
	--gf-form-validation-heading-icon-bg-color: transparent;
	--gf-form-validation-radius: var(--radius);
	--gf-form-validation-shadow: none;
	--gf-form-spinner-fg-color: var(--color-accent);
	--gf-form-spinner-bg-color: var(--color-rule);
}

/* Field labels and group legends: the shared section label. */
.contact-panel .gform-theme--framework .gfield_label {
	color: var(--color-label);
	font-size: var(--step-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.contact-panel .gform-theme--framework .gfield_required {
	color: var(--color-subtle);
	font-size: var(--step-label);
	font-weight: 400;
	letter-spacing: 0.04em;
}

.contact-panel .gform-theme--framework .gform-field-label--type-sub {
	color: var(--color-subtle);
	font-size: var(--step--1);
}

.contact-panel .gform-theme--framework .gfield_description {
	color: var(--color-muted);
	font-size: var(--step--1);
	overflow-wrap: anywhere;
}

/* Gravity Forms 2.10 attaches :where() to ::placeholder, which invalidates
   that rule, so its later `color: unset` leaves placeholders at full text
   colour. Restore a distinct placeholder colour (5.97:1 dark, 6.92:1 Oak). */
.contact-panel .gform-theme--framework ::placeholder {
	color: var(--color-subtle);
	opacity: 1;
}

/* After .gfield_description: Gravity Forms gives messages both classes. */
.contact-panel .gform-theme--framework .gfield_validation_message {
	color: var(--color-danger);
}

/* Checkbox and radio choices: rows at least 44px tall, the whole row clickable. */
.contact-panel .gform-theme--framework .gchoice {
	display: flex;
	align-items: center;
	padding-inline-start: var(--space-s);
	border: 1px solid var(--card-border-color);
	border-radius: var(--radius);
	background: var(--card-background);
}

/* Keep the box its full size beside labels that wrap. */
.contact-panel .gfield-choice-input {
	flex-shrink: 0;
}

.contact-panel .gform-theme--framework .gform-field-label--type-inline {
	flex: 1 1 auto;
	margin: 0;
	padding: var(--space-s);
	color: var(--color-text);
	font-size: 1rem;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.contact-panel .gform_confirmation_message {
	padding-inline-start: var(--space-m);
	border-inline-start: 2px solid var(--color-accent);
	color: var(--color-text);
	font-size: var(--step-lead);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* 6.10 Journal feed (journal_feed) ---------------------------- */

.journal-feed-more {
	margin-block: var(--space-l) 0;
}

/* -------------------------------------------------------------
   7. Views
   Notes, archives and search share the hero (compact) and the entry
   list; posts use the compact article header. Markup: inc/views.php,
   template-parts/entry-card.php, single-post.php, 404.php.
   ------------------------------------------------------------- */

/* 7.1 Search form (core HTML5 markup) -------------------------- */

.hero .search-form {
	margin-block-start: var(--space-l);
}

.search-field,
.search-submit {
	min-height: 2.75rem;
	border-radius: var(--radius-pill);
}

.search-field {
	padding-inline: var(--space-m);
	border-color: var(--color-subtle);
	color: var(--color-text);
}

.search-field::placeholder {
	color: var(--color-subtle);
	opacity: 1;
}

.search-submit {
	padding-inline: var(--space-m);
	font-weight: 500;
}

.search-submit:hover {
	border-color: var(--button-hover-background);
	background: var(--button-hover-background);
	color: var(--button-hover-text);
}

/* 7.2 Entry list and cards ------------------------------------ */

.entry-list {
	display: block;
	border-block-start: 1px solid var(--color-rule);
}

.entry-list .entry-card {
	display: grid;
	gap: var(--space-s);
	padding: var(--space-l) 0;
	border: 0;
	border-block-end: 1px solid var(--color-rule);
	border-radius: 0;
	background: none;
}

.entry-meta {
	align-items: baseline;
	gap: var(--space-2xs) var(--space-s);
	color: var(--color-subtle);
}

.entry-meta .section-label {
	margin: 0;
	text-decoration: none;
}

.entry-card .entry-title {
	max-width: var(--measure-heading-wide);
	margin: 0;
	font-size: var(--step-5);
	font-weight: 600;
	line-height: var(--leading-heading);
	letter-spacing: -0.05em;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.entry-summary {
	max-width: var(--measure-prose);
}

.entry-summary p {
	margin: 0;
}

.entry-card .cta-link {
	justify-self: start;
}

.posts-navigation {
	margin-block-start: var(--space-xl);
}

.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-m);
}

.posts-navigation a {
	font-weight: 500;
	text-decoration: none;
}

.posts-navigation a:hover {
	text-decoration: underline;
}

.listing .empty-state h2 {
	max-width: var(--measure-heading);
}

@media (min-width: 992px) {
	.entry-list .entry-card {
		grid-template-columns: 12rem minmax(0, 1fr) auto;
		grid-template-areas:
			"meta title cta"
			"meta summary cta";
		column-gap: var(--space-xl);
		padding-block: var(--space-xl);
	}

	.entry-card .entry-meta {
		grid-area: meta;
		flex-direction: column;
		align-content: start;
	}

	.entry-card .entry-title {
		grid-area: title;
	}

	.entry-card .entry-summary {
		grid-area: summary;
	}

	.entry-card .cta-link {
		grid-area: cta;
		align-self: start;
	}
}

/* 7.3 Article (single post, attachment) ----------------------- */

.article-header,
.article-footer {
	width: min(100% - 2 * var(--gutter), var(--content-width));
	margin-inline: auto;
}

.article-header {
	margin-block-end: var(--space-xl);
}

.article-header h1 {
	margin-block: var(--space-s) 0;
}

.article-header .lead {
	max-width: none;
	margin-block-start: var(--space-m);
}

.article-header .lead p {
	margin: 0;
}

.article-footer {
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-m);
	border-block-start: 1px solid var(--color-rule);
}

/* Core block output in post content. */
.entry-content li {
	color: var(--color-muted);
}

.entry-content blockquote {
	border-inline-start-color: var(--color-accent);
	font-family: var(--font-serif);
}

.entry-content blockquote p {
	color: var(--color-text);
}

.entry-content :is(cite, figcaption, .wp-element-caption) {
	color: var(--color-subtle);
	font-size: var(--step--1);
}

.entry-content :is(th, td) {
	border-color: var(--color-rule);
}

.entry-content :is(hr, .wp-block-separator) {
	border: 0;
	border-block-start: 1px solid var(--color-rule);
	opacity: 1;
}

.entry-content pre {
	color: var(--color-text);
}

/* 7.4 404 ----------------------------------------------------- */

.not-found .container {
	display: grid;
	gap: var(--space-l);
}

.not-found-number {
	margin: 0 0 var(--space-xs);
	color: var(--color-subtle);
	font-family: var(--font-heading);
	font-size: var(--step-display);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.05em;
}

.not-found .section-label {
	margin: 0;
}

.not-found h1 {
	max-width: var(--measure-heading-wide);
}

.not-found .lead {
	margin-block-end: var(--space-l);
}

.not-found-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-l);
	margin: 0;
}

@media (min-width: 768px) {
	.not-found .container {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
		column-gap: var(--space-2xl);
	}
}