/* ==========================================================================
   Container Gardening — main stylesheet
   Design system: tokens, typography, components, layouts, utilities.
   No external dependencies. No remote fonts. No image files. Mobile-first.

   Look: a bright patio on a sunny morning — warm cream page, white surfaces,
   potting-mix brown ink, deep green for headings, links and buttons,
   terracotta for the small details (category labels, step numbers), and
   sky blue and sun yellow as soft panel colours. The shapes come from the
   container garden: "leaf" corners (three generous, one tight), a small
   terracotta pot with a sprout, a leaf-and-flower divider and round pill
   buttons. The two decorative shapes are inline SVG data URIs, so nothing is
   requested from the network.

   Contrast reference (WCAG AA, calculated):
     ink         #2f2219 on cream #fff8ea / white ............ 14.6:1 / 15.4:1
     ink-soft    #54402f on cream / sky / sun-soft ........... 9.2:1 / 7.8:1 / 8.7:1
     ink-muted   #6a5444 on cream / sky / sun-soft ........... 6.7:1 / 5.7:1 / 6.3:1
     green-dark  #22543a on cream / sky / sun #f6c744 ........ 8.3:1 / 7.0:1 / 5.5:1
     green-deep  #2f6b45 on cream / white / sky / sun-soft ... 6.0:1 / 6.3:1 / 5.1:1 / 5.7:1
     white       #ffffff on green-deep / green-dark .......... 6.3:1 / 8.8:1
     terracotta-deep #9f4a2a on cream / white / sky / sun-soft 5.7:1 / 6.0:1 / 4.8:1 / 5.4:1
     white       #ffffff on terracotta-deep .................. 6.0:1
     footer: sky #cfeaf7 / sun #f6c744 on #1d4a32 ............ 8.1:1 / 6.3:1
   Leaf green #58a55c, terracotta #cf6f4a, coral #f0705a, sun #f6c744 and
   cobalt #2f6fb0 are used for shapes, borders and focus rings, never for
   body text on a light background.
   ========================================================================== */

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

:root {
	/* Colour */
	--cgd-cream: #fff8ea;
	--cgd-cream-deep: #f7ecd4;
	--cgd-surface: #ffffff;
	--cgd-ink: #2f2219;
	--cgd-ink-soft: #54402f;
	--cgd-ink-muted: #6a5444;
	--cgd-soil: #4b3527;
	--cgd-green: #58a55c;
	--cgd-green-deep: #2f6b45;
	--cgd-green-dark: #22543a;
	--cgd-green-darkest: #1d4a32;
	--cgd-green-light: #a9d6a4;
	--cgd-green-soft: #e9f5e6;
	--cgd-green-line: #b9dcb4;
	--cgd-sky: #cfeaf7;
	--cgd-sky-soft: #ebf6fc;
	--cgd-sky-line: #a8d3ea;
	--cgd-sun: #f6c744;
	--cgd-sun-soft: #fff2c6;
	--cgd-sun-line: #f0d37c;
	--cgd-terracotta: #cf6f4a;
	--cgd-terracotta-deep: #9f4a2a;
	--cgd-terracotta-line: #ecc2ae;
	--cgd-coral: #f0705a;
	--cgd-cobalt: #2f6fb0;
	--cgd-paving: #e6dac6;
	--cgd-line: #e6dac6;
	--cgd-line-strong: #8c7862;
	--cgd-focus: #2f6fb0;

	/* Shapes drawn once and reused as backgrounds */
	--cgd-petals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath fill='%2358a55c' d='M2 6C7 2 13 2 17 6C13 10 7 10 2 6ZM27 6C31 2 37 2 42 6C37 10 31 10 27 6Z'/%3E%3Ccircle cx='22' cy='6' r='4.5' fill='%23f6c744'/%3E%3Ccircle cx='22' cy='6' r='2' fill='%23cf6f4a'/%3E%3C/svg%3E");
	--cgd-potmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%232f6b45' d='M19 22v-8.5h2V22z'/%3E%3Cpath fill='%2358a55c' d='M20 15.5C14.5 16 10.5 13 9.5 7.5 15 6.5 19 9.5 20 15.5z'/%3E%3Cpath fill='%232f6b45' d='M20 12.5C20.5 7.5 24 4 29.5 3.500 30 9 26 12.5 20 12.5z'/%3E%3Cpath fill='%23b85c3a' d='M10.5 25h19l-2.4 11.6a1.8 1.8 0 0 1-1.8 1.4H14.7a1.8 1.8 0 0 1-1.8-1.4z'/%3E%3Crect x='7.5' y='20' width='25' height='6.5' rx='2' fill='%23cf6f4a'/%3E%3C/svg%3E");

	/* Typography — system stacks, nothing to download.
	   Headings: geometric sans. Body: a readable serif. Interface: system UI. */
	--cgd-font-head: Futura, "Century Gothic", "Avenir Next", Avenir, "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
	--cgd-font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
	--cgd-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--cgd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--cgd-text-xs: 0.8125rem;
	--cgd-text-sm: 0.875rem;
	--cgd-text-base: 1rem;
	--cgd-text-md: 1.125rem;
	--cgd-text-lg: 1.25rem;
	--cgd-text-xl: 1.4375rem;
	--cgd-text-2xl: 1.75rem;
	--cgd-text-3xl: 2.125rem;
	--cgd-text-4xl: 2.75rem;

	--cgd-leading-tight: 1.15;
	--cgd-leading-snug: 1.35;
	--cgd-leading-normal: 1.6;
	--cgd-leading-relaxed: 1.72;

	/* Spacing — 4px scale */
	--cgd-s1: 0.25rem;
	--cgd-s2: 0.5rem;
	--cgd-s3: 0.75rem;
	--cgd-s4: 1rem;
	--cgd-s5: 1.5rem;
	--cgd-s6: 2rem;
	--cgd-s7: 2.5rem;
	--cgd-s8: 3rem;
	--cgd-s9: 4rem;
	--cgd-s10: 5.5rem;

	/* Shape and shadow. A "leaf" has three generous corners and one tight. */
	--cgd-radius-sm: 0.5rem;
	--cgd-radius: 0.875rem;
	--cgd-pill: 999px;
	--cgd-leaf-sm: 1rem 1rem 1rem 0.25rem;
	--cgd-leaf: 1.5rem 1.5rem 1.5rem 0.375rem;
	--cgd-leaf-lg: 2.5rem 2.5rem 2.5rem 0.625rem;
	--cgd-shadow-sm: 0 1px 2px rgba(75, 53, 39, 0.06);
	--cgd-shadow: 0 10px 28px -12px rgba(75, 53, 39, 0.26);
	--cgd-shadow-lg: 0 22px 44px -18px rgba(75, 53, 39, 0.3);

	/* Layout */
	--cgd-container: 1180px;
	--cgd-container-wide: 1320px;
	--cgd-container-narrow: 780px;
	--cgd-reading: 46rem;
	--cgd-measure: 43rem;
	--cgd-gutter: var(--cgd-s4);

	color-scheme: light;
}

@media (min-width: 48em) {
	:root {
		--cgd-gutter: var(--cgd-s6);
	}
}

/* --------------------------------------------------------------------------
   2. Light reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.cgd-card:hover,
	.cgd-topic:hover,
	.cgd-steps > li:hover {
		transform: none !important;
	}
}

body {
	margin: 0;
	background-color: var(--cgd-cream);
	color: var(--cgd-ink);
	font-family: var(--cgd-font-body);
	font-size: var(--cgd-text-md);
	line-height: var(--cgd-leading-normal);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-wrap: break-word;
}

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

img {
	display: block;
}

figure {
	margin: 0;
}

/* Divider: a hairline with two leaves and a small flower at its centre. */
hr {
	height: 0.75rem;
	margin: var(--cgd-s7) 0;
	border: 0;
	background:
		var(--cgd-petals) center / 2.75rem 0.75rem no-repeat,
		linear-gradient(90deg, var(--cgd-line) calc(50% - 2.25rem), transparent calc(50% - 2.25rem), transparent calc(50% + 2.25rem), var(--cgd-line) calc(50% + 2.25rem)) center / 100% 1px no-repeat;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--cgd-font-head);
	color: var(--cgd-green-dark);
	line-height: var(--cgd-leading-tight);
	margin: 0 0 var(--cgd-s4);
	font-weight: 700;
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
}

h1 {
	font-size: clamp(2rem, 1.45rem + 2.4vw, var(--cgd-text-4xl));
}

h2 {
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, var(--cgd-text-3xl));
}

h3 {
	font-size: clamp(1.25rem, 1.12rem + 0.6vw, var(--cgd-text-xl));
	letter-spacing: -0.02em;
}

h4 {
	font-size: var(--cgd-text-lg);
	letter-spacing: -0.015em;
}

h5,
h6 {
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cgd-ink-soft);
}

p {
	margin: 0 0 var(--cgd-s4);
}

a {
	color: var(--cgd-green-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	color: var(--cgd-terracotta-deep);
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--cgd-text-sm);
}

mark {
	background: var(--cgd-sun-soft);
	color: var(--cgd-ink);
	border-radius: 0.2em;
	padding: 0 0.2em;
}

code,
kbd,
samp {
	font-family: var(--cgd-font-mono);
	font-size: 0.85em;
	background: var(--cgd-cream-deep);
	border-radius: 0.35em;
	padding: 0.12em 0.4em;
}

pre {
	font-family: var(--cgd-font-mono);
	font-size: var(--cgd-text-sm);
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-radius);
	padding: var(--cgd-s4);
	overflow-x: auto;
	line-height: 1.5;
}

pre code {
	background: none;
	padding: 0;
}

blockquote {
	margin: var(--cgd-s6) 0;
	padding: var(--cgd-s5) var(--cgd-s5) var(--cgd-s5) var(--cgd-s6);
	background: var(--cgd-sky-soft);
	border-radius: var(--cgd-leaf);
	font-size: var(--cgd-text-lg);
	font-style: italic;
	color: var(--cgd-ink-soft);
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	margin-top: var(--cgd-s2);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-style: normal;
	color: var(--cgd-ink-muted);
}

/* --------------------------------------------------------------------------
   4. Accessibility
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cgd-focus);
	outline-offset: 2px;
}

/* The main landmark only receives focus from the skip link. */
.cgd-site-main:focus {
	outline: 0;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--cgd-ink);
	border-radius: var(--cgd-pill);
	box-shadow: var(--cgd-shadow);
	clip-path: none;
	color: var(--cgd-surface);
	display: block;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
	font-weight: 600;
	height: auto;
	left: var(--cgd-s4);
	line-height: normal;
	outline-color: var(--cgd-sun);
	padding: var(--cgd-s3) var(--cgd-s5);
	text-decoration: none;
	top: var(--cgd-s4);
	width: auto;
	z-index: 100000;
}

.cgd-skip-link:focus {
	position: fixed;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.cgd-container {
	width: 100%;
	max-width: var(--cgd-container);
	margin-inline: auto;
	padding-inline: var(--cgd-gutter);
}

.cgd-container--narrow {
	max-width: var(--cgd-container-narrow);
}

.cgd-site-main {
	flex: 1 0 auto;
	padding-block: var(--cgd-s6) var(--cgd-s9);
}

/* Used on the homepage, where the hero sits flush against the header. */
.cgd-site-main--flush {
	padding-top: 0;
}

/* minmax(0, 1fr) lets the column shrink below the intrinsic width of wide
   children (tables, long words) so they scroll inside it instead of pushing
   the page sideways. */
.cgd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s7);
}

.cgd-layout > * {
	min-width: 0;
}

@media (min-width: 66em) {
	.cgd-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: var(--cgd-s8);
		align-items: start;
	}
}

.cgd-stack > * + * {
	margin-top: var(--cgd-s4);
}

.cgd-section {
	margin-block: var(--cgd-s9);
}

.cgd-section:first-child {
	margin-top: var(--cgd-s8);
}

.cgd-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cgd-s2) var(--cgd-s4);
	margin-bottom: var(--cgd-s5);
}

.cgd-section__title {
	margin: 0;
	font-size: var(--cgd-text-2xl);
}

/* A single small leaf in front of every section title. */
.cgd-section__title::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.45em;
	background: var(--cgd-green);
	border-radius: 0 75% 0 75%;
}

/* Always on its own line under the title and the "View all" link. */
.cgd-section__description {
	flex: 0 0 100%;
	order: 3;
	margin: 0;
	color: var(--cgd-ink-soft);
	font-size: var(--cgd-text-base);
}

.cgd-section__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.25rem 1rem;
	border: 1.5px solid var(--cgd-sky-line);
	border-radius: var(--cgd-pill);
	background: var(--cgd-surface);
	color: var(--cgd-green-deep);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cgd-section__link:hover,
.cgd-section__link:focus {
	background: var(--cgd-sky);
	border-color: var(--cgd-green);
	color: var(--cgd-ink);
}

.cgd-section__link::after {
	content: "\2192";
	margin-left: 0.4em;
}

/* --------------------------------------------------------------------------
   6. Header and navigation
   One line on large screens: mark and name, the menu, a compact search.
   Below 66em the menu and the search fold into a panel behind a button.
   -------------------------------------------------------------------------- */

.cgd-site-header {
	position: relative;
	z-index: 50;
	background: var(--cgd-cream);
	border-bottom: 1px solid var(--cgd-line);
}

.cgd-site-header .cgd-container {
	max-width: var(--cgd-container-wide);
}

.cgd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cgd-s4);
	min-height: 4.25rem;
	min-width: 0;
}

.cgd-branding {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.cgd-branding__mark {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
}

.cgd-branding__text {
	min-width: 0;
}

.cgd-branding__title {
	font-family: var(--cgd-font-head);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.cgd-branding__title a {
	color: var(--cgd-green-dark);
	text-decoration: none;
}

.cgd-branding__title a:hover {
	color: var(--cgd-green-deep);
}

.cgd-branding__tagline {
	margin: 0.2rem 0 0;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-xs);
	color: var(--cgd-ink-muted);
	line-height: 1.3;
}

/* The tagline shows beside the mark on tablets only: on the narrowest phones
   it would wrap under the menu button, and on large screens the header is a
   single line shared with the menu (the footer carries the tagline there). */
@media (max-width: 35.99em), (min-width: 66em) {
	.cgd-branding__tagline {
		display: none;
	}
}

/* Phones: a smaller mark and name, so the brand and the Menu button share
   one line down to 320px; if the name is ever longer it wraps, not clips. */
@media (max-width: 35.99em) {
	.cgd-branding {
		gap: 0.5rem;
	}

	.cgd-branding__mark {
		width: 2rem;
		height: 2rem;
	}

	.cgd-branding__title {
		font-size: clamp(1rem, 4.6vw, 1.3125rem);
		white-space: normal;
	}
}

.custom-logo-link img {
	max-height: 3rem;
	width: auto;
}

/* Menu button (small screens) */
.cgd-menu-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--cgd-surface);
	border: 1.5px solid var(--cgd-sky-line);
	border-radius: var(--cgd-pill);
	color: var(--cgd-ink);
	cursor: pointer;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
	min-height: 2.75rem;
	padding: var(--cgd-s2) var(--cgd-s4);
}

.cgd-menu-toggle:hover,
.cgd-menu-toggle:focus {
	background: var(--cgd-sky);
	border-color: var(--cgd-green);
	color: var(--cgd-ink);
}

.cgd-menu-toggle[aria-expanded="true"] {
	background: var(--cgd-green-deep);
	border-color: var(--cgd-green-deep);
	color: var(--cgd-surface);
}

.cgd-menu-toggle__bars {
	display: block;
	position: relative;
	width: 1.125rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.cgd-menu-toggle__bars::before,
.cgd-menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.cgd-menu-toggle__bars::before {
	top: -6px;
}

.cgd-menu-toggle__bars::after {
	top: 6px;
}

.cgd-header__panel {
	display: none;
	padding-bottom: var(--cgd-s5);
}

.cgd-header__panel.is-open {
	display: block;
}

.cgd-nav {
	font-family: var(--cgd-font-ui);
}

.cgd-nav__list,
.cgd-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Small screens: the menu is a soft white card of full-width rows. */
.cgd-nav__list {
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s2);
}

.cgd-nav__list li {
	position: relative;
}

.cgd-nav__list a {
	display: block;
	padding: 0.7rem var(--cgd-s4);
	border-radius: var(--cgd-pill);
	color: var(--cgd-ink);
	font-size: var(--cgd-text-base);
	font-weight: 600;
	text-decoration: none;
}

.cgd-nav__list a:hover,
.cgd-nav__list a:focus {
	background: var(--cgd-sky-soft);
	color: var(--cgd-ink);
}

.cgd-nav__list .sub-menu a {
	padding-left: var(--cgd-s6);
	font-weight: 500;
}

.cgd-nav .current-menu-item > a,
.cgd-nav .current-menu-ancestor > a,
.cgd-nav .current_page_item > a {
	background: var(--cgd-sky);
	color: var(--cgd-ink);
}

.cgd-header__search {
	margin-top: var(--cgd-s3);
}

/* Shown only to users who can edit menus, when no menu is assigned to the
   primary location. Visitors never see this block. */
.cgd-nav--empty {
	margin: 0;
	padding: var(--cgd-s3) 0;
	font-size: var(--cgd-text-sm);
}

@media (min-width: 66em) {
	.cgd-menu-toggle {
		display: none;
	}

	.cgd-site-header .cgd-container {
		display: flex;
		align-items: center;
		column-gap: var(--cgd-s5);
	}

	.cgd-header__inner {
		flex: 0 0 auto;
		min-height: 4.75rem;
	}

	/* The panel wrapper dissolves so that its two children (menu and search)
	   sit directly in the header's flex row. */
	.cgd-header__panel,
	.cgd-header__panel.is-open {
		display: contents;
	}

	.cgd-nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Eight items fit on one line; a longer menu wraps onto a second line
	   instead of overflowing the page. */
	.cgd-nav__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.125rem;
		background: none;
		border: 0;
		border-radius: 0;
		padding: var(--cgd-s2) 0;
	}

	.cgd-nav__list a {
		padding: 0.45rem 0.6rem;
		font-size: var(--cgd-text-xs);
		white-space: nowrap;
	}

	.cgd-nav__list a:hover,
	.cgd-nav__list a:focus {
		background: var(--cgd-sky);
	}

	/* Between 66em and 80em the line belongs to the menu: the search field
	   returns as soon as there is room for it. */
	.cgd-header__search {
		display: none;
		flex: 0 0 9.5rem;
		margin-top: 0;
	}

	/* Submenus (one level) */
	.cgd-nav__list .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 13rem;
		background: var(--cgd-surface);
		border: 1px solid var(--cgd-line);
		border-radius: var(--cgd-leaf-sm);
		box-shadow: var(--cgd-shadow-lg);
		padding: var(--cgd-s2);
		z-index: 60;
	}

	.cgd-nav__list li:hover > .sub-menu,
	.cgd-nav__list li:focus-within > .sub-menu {
		display: block;
	}

	.cgd-nav__list .sub-menu a {
		padding-left: var(--cgd-s3);
		white-space: normal;
	}
}

@media (min-width: 80em) {
	.cgd-nav__list a {
		padding-inline: 0.7rem;
		font-size: var(--cgd-text-sm);
	}

	.cgd-header__search {
		display: block;
		flex-basis: 11.5rem;
	}
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

label {
	display: block;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
	margin-bottom: var(--cgd-s2);
}

.cgd-field {
	margin-bottom: var(--cgd-s5);
}

.cgd-field__hint {
	display: block;
	margin-top: var(--cgd-s2);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-xs);
	font-weight: 400;
	color: var(--cgd-ink-muted);
}

.cgd-required {
	color: var(--cgd-terracotta-deep);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	background: var(--cgd-surface);
	border: 1.5px solid var(--cgd-line-strong);
	border-radius: var(--cgd-radius);
	color: var(--cgd-ink);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
	line-height: 1.4;
	padding: 0.7rem var(--cgd-s4);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--cgd-green-deep);
}

textarea {
	min-height: 11rem;
	resize: vertical;
	line-height: var(--cgd-leading-normal);
}

input::placeholder,
textarea::placeholder {
	color: var(--cgd-ink-muted);
	opacity: 1;
}

/* Search field: one pill holding the input and a round button. */
.cgd-search-form {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--cgd-surface);
	border: 1.5px solid var(--cgd-line-strong);
	border-radius: var(--cgd-pill);
	padding: 0.1875rem;
}

.cgd-search-form:focus-within {
	border-color: var(--cgd-green-deep);
}

.cgd-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
}

.cgd-search-form input[type="search"] {
	min-height: 2.375rem;
	background: transparent;
	border: 0;
	border-radius: var(--cgd-pill);
	padding: var(--cgd-s1) var(--cgd-s2) var(--cgd-s1) var(--cgd-s4);
	-webkit-appearance: none;
	appearance: none;
}

.cgd-search-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	min-width: 2.375rem;
	height: 2.375rem;
	min-height: 2.375rem;
	background: var(--cgd-green-deep);
	border: 0;
	border-radius: 50%;
	color: var(--cgd-surface);
	cursor: pointer;
	padding: 0;
}

.cgd-search-form__submit:hover,
.cgd-search-form__submit:focus {
	background: var(--cgd-green-dark);
	color: var(--cgd-surface);
}

.cgd-search-form__submit .cgd-icon {
	width: 1.0625rem;
	height: 1.0625rem;
}

.cgd-header__search input[type="search"] {
	font-size: var(--cgd-text-sm);
}

/* --------------------------------------------------------------------------
   8. Buttons — round pills
   -------------------------------------------------------------------------- */

.cgd-button,
.cgd-button--primary,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cgd-s2);
	background: var(--cgd-green-deep);
	border: 1.5px solid var(--cgd-green-deep);
	border-radius: var(--cgd-pill);
	color: var(--cgd-surface);
	cursor: pointer;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
	font-weight: 600;
	line-height: 1.3;
	min-height: 3.125rem;
	padding: 0.8rem 1.9rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cgd-button:hover,
.cgd-button:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background: var(--cgd-green-dark);
	border-color: var(--cgd-green-dark);
	color: var(--cgd-surface);
}

.cgd-button--secondary {
	background: var(--cgd-surface);
	border-color: var(--cgd-green-deep);
	color: var(--cgd-green-dark);
}

.cgd-button--secondary:hover,
.cgd-button--secondary:focus {
	background: var(--cgd-sun-soft);
	border-color: var(--cgd-green-dark);
	color: var(--cgd-green-dark);
}

.cgd-button--small {
	font-size: var(--cgd-text-sm);
	min-height: 0;
	padding: var(--cgd-s2) var(--cgd-s4);
}

.cgd-button[disabled],
button[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
   9. Labels, categories, metadata
   -------------------------------------------------------------------------- */

.cgd-eyebrow {
	display: inline-block;
	font-family: var(--cgd-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cgd-terracotta-deep);
	text-decoration: none;
	margin-bottom: var(--cgd-s2);
}

a.cgd-eyebrow:hover,
a.cgd-eyebrow:focus {
	color: var(--cgd-green-dark);
	text-decoration: underline;
}

.cgd-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--cgd-s1);
	background: var(--cgd-surface);
	border: 1.5px solid var(--cgd-terracotta-line);
	border-radius: var(--cgd-pill);
	color: var(--cgd-terracotta-deep);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
	padding: 0.4rem 1rem;
	text-decoration: none;
}

a.cgd-chip:hover,
a.cgd-chip:focus {
	background: var(--cgd-sun-soft);
	border-color: var(--cgd-terracotta);
	color: var(--cgd-ink);
}

.cgd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgd-s2) var(--cgd-s4);
	color: var(--cgd-ink-muted);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgd-meta > li {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgd-s2) var(--cgd-s4);
}

.cgd-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.cgd-meta a {
	color: inherit;
}

.cgd-meta svg {
	flex: 0 0 auto;
	color: var(--cgd-terracotta);
}

.cgd-icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.125em;
}

/* --------------------------------------------------------------------------
   10. Cards and grids
   -------------------------------------------------------------------------- */

.cgd-grid {
	display: grid;
	gap: var(--cgd-s5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 36em) {
	.cgd-grid--2,
	.cgd-grid--3,
	.cgd-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.cgd-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cgd-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--cgd-s4);
	}
}

/* A card is a white leaf: the picture is inset and repeats the leaf corners. */
.cgd-card {
	display: flex;
	flex-direction: column;
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: 0.625rem;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.cgd-card:hover {
	border-color: var(--cgd-green-line);
	box-shadow: var(--cgd-shadow);
	transform: translateY(-3px);
}

.cgd-card__media {
	display: block;
	background: var(--cgd-sky);
	border-radius: 1rem 1rem 1rem 0.25rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.cgd-card__media img,
.cgd-card-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Posts without a featured image get the pot mark standing on a strip of
   paving under a sky-blue tint. */
.cgd-card__media--placeholder,
.cgd-card-row__media--placeholder {
	background:
		var(--cgd-potmark) center 53% / auto 64% no-repeat,
		linear-gradient(180deg, var(--cgd-sky) 0, var(--cgd-sky-soft) 74%, var(--cgd-paving) 74%);
}

.cgd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--cgd-s2);
	padding: var(--cgd-s4) 0.625rem 0.625rem;
}

.cgd-card__body .cgd-eyebrow {
	margin-bottom: 0;
}

.cgd-card__title {
	font-size: var(--cgd-text-lg);
	line-height: 1.25;
	margin: 0;
}

.cgd-grid--4 .cgd-card__title {
	font-size: 1.125rem;
}

.cgd-card__title a,
.cgd-card-row__title a,
.cgd-steps__title a {
	color: var(--cgd-ink);
	text-decoration: none;
}

.cgd-card__title a:hover,
.cgd-card-row__title a:hover,
.cgd-steps__title a:hover,
.cgd-card__title a:focus,
.cgd-card-row__title a:focus,
.cgd-steps__title a:focus {
	color: var(--cgd-green-deep);
	text-decoration: underline;
}

.cgd-card__excerpt {
	color: var(--cgd-ink-soft);
	font-size: var(--cgd-text-base);
	line-height: 1.55;
	margin: 0;
}

.cgd-grid--4 .cgd-card__excerpt {
	font-size: 0.9375rem;
}

.cgd-card__footer {
	margin-top: auto;
	padding-top: var(--cgd-s3);
}

/* Horizontal card (lists and search results) */
.cgd-card-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s4);
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: 0.625rem;
}

@media (min-width: 36em) {
	.cgd-card-row {
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: var(--cgd-s5);
		align-items: center;
	}
}

.cgd-card-row__media {
	display: block;
	background: var(--cgd-sky);
	border-radius: 1rem 1rem 1rem 0.25rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* min-width: 0 keeps long titles from blowing out the grid column. */
.cgd-card-row__body {
	min-width: 0;
	padding: var(--cgd-s2) var(--cgd-s3) var(--cgd-s3);
}

@media (min-width: 36em) {
	.cgd-card-row__body {
		padding: var(--cgd-s3) var(--cgd-s4) var(--cgd-s3) 0;
	}
}

.cgd-card-row__title {
	font-size: var(--cgd-text-xl);
	margin: 0 0 var(--cgd-s2);
}

.cgd-card-row__excerpt {
	color: var(--cgd-ink-soft);
	font-size: var(--cgd-text-base);
	margin: 0 0 var(--cgd-s3);
}

.cgd-card-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s4);
}

/* Numbered path (Start Here): four leaves in a row, each led by its number. */
.cgd-steps {
	list-style: none;
	counter-reset: cgd-step;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s4);
	margin: 0;
	padding: 0;
}

@media (min-width: 40em) {
	.cgd-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 66em) {
	.cgd-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cgd-steps > li {
	counter-increment: cgd-step;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--cgd-s4);
	align-items: start;
	align-content: start;
	background: var(--cgd-sun-soft);
	border: 1px solid var(--cgd-sun-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cgd-steps > li:hover {
	background: #ffeaa6;
	transform: translateY(-2px);
}

@media (min-width: 66em) {
	.cgd-steps > li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cgd-s3);
	}
}

.cgd-steps > li::before {
	content: counter(cgd-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--cgd-terracotta-deep);
	border-radius: 50% 50% 50% 0.375rem;
	color: var(--cgd-surface);
	font-family: var(--cgd-font-head);
	font-size: var(--cgd-text-lg);
	font-weight: 700;
}

.cgd-steps__title {
	font-size: 1.1875rem;
	line-height: 1.25;
	margin: 0 0 var(--cgd-s2);
}

.cgd-steps p {
	color: var(--cgd-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

/* --------------------------------------------------------------------------
   11. Homepage — hero and sections
   -------------------------------------------------------------------------- */

/* Centred copy under a clear morning sky that fades into the cream page, with
   a row of planted pots standing on paving along the bottom edge. */
.cgd-hero {
	background: linear-gradient(180deg, var(--cgd-sky) 0%, var(--cgd-sky-soft) 62%, var(--cgd-cream) 100%);
	border-bottom: 1px solid var(--cgd-line);
	padding-block: var(--cgd-s8) 0;
	overflow: hidden;
}

.cgd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s6);
	justify-items: center;
}

.cgd-hero__copy {
	max-width: 46rem;
	text-align: center;
}

@media (min-width: 62em) {
	.cgd-hero {
		padding-top: var(--cgd-s9);
	}

	.cgd-hero__inner {
		gap: var(--cgd-s7);
	}
}

.cgd-hero__title {
	font-size: clamp(2.125rem, 1.35rem + 3.6vw, 3.75rem);
	letter-spacing: -0.035em;
	line-height: 1.06;
	margin: 0 auto var(--cgd-s5);
	max-width: 17ch;
}

.cgd-hero__text {
	color: var(--cgd-ink-soft);
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: var(--cgd-leading-normal);
	max-width: 36rem;
	margin: 0 auto var(--cgd-s6);
}

.cgd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cgd-s3);
}

/* Decorative inline SVG (no image request, no JS). */
.cgd-hero__figure {
	width: 100%;
	max-width: 45rem;
}

.cgd-hero__figure svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Category strip (optional "Browse by Category" section) */
.cgd-topics {
	display: grid;
	gap: var(--cgd-s4);
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgd-topic {
	display: flex;
	flex-direction: column;
	gap: var(--cgd-s2);
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	text-decoration: none;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.cgd-topic:hover {
	border-color: var(--cgd-green-line);
	box-shadow: var(--cgd-shadow);
	transform: translateY(-2px);
}

.cgd-topic__name {
	font-family: var(--cgd-font-head);
	font-size: var(--cgd-text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--cgd-green-dark);
}

.cgd-topic:hover .cgd-topic__name {
	color: var(--cgd-green-deep);
}

.cgd-topic__desc {
	color: var(--cgd-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.cgd-topic__count {
	margin-top: auto;
	padding-top: var(--cgd-s2);
	color: var(--cgd-ink-muted);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-xs);
	font-weight: 600;
}

/* Closing call to action: a large sun-yellow leaf with a sun rising out of
   its top right corner. Every text colour used inside passes AA on both the
   pale panel and the sun itself. */
.cgd-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s5);
	align-items: center;
	background:
		radial-gradient(circle at 100% 0, var(--cgd-sun) 0, var(--cgd-sun) 4rem, rgba(246, 199, 68, 0.4) 4rem, rgba(246, 199, 68, 0.4) 6rem, transparent 6rem),
		var(--cgd-sun-soft);
	border: 1px solid var(--cgd-sun-line);
	border-radius: var(--cgd-leaf-lg);
	color: var(--cgd-ink);
	padding: var(--cgd-s7) var(--cgd-s5);
}

@media (min-width: 48em) {
	.cgd-cta {
		background:
			radial-gradient(circle at 100% 0, var(--cgd-sun) 0, var(--cgd-sun) 6.5rem, rgba(246, 199, 68, 0.4) 6.5rem, rgba(246, 199, 68, 0.4) 9.5rem, transparent 9.5rem),
			var(--cgd-sun-soft);
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--cgd-s7);
		padding: var(--cgd-s8) var(--cgd-s9);
	}
}

.cgd-cta__title {
	margin-bottom: var(--cgd-s3);
}

.cgd-cta__text {
	color: var(--cgd-ink-soft);
	margin: 0;
	max-width: 54ch;
}

/* --------------------------------------------------------------------------
   12. Article
   -------------------------------------------------------------------------- */

.cgd-breadcrumbs {
	margin-bottom: var(--cgd-s5);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	color: var(--cgd-ink-muted);
}

.cgd-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgd-s1) var(--cgd-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgd-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--cgd-s2);
	min-width: 0;
}

/* The separator is a tiny leaf. */
.cgd-breadcrumbs li + li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.4rem;
	height: 0.4rem;
	background: var(--cgd-green-light);
	border-radius: 0 75% 0 75%;
}

.cgd-breadcrumbs a {
	color: var(--cgd-ink-soft);
	text-decoration: none;
}

.cgd-breadcrumbs a:hover,
.cgd-breadcrumbs a:focus {
	color: var(--cgd-terracotta-deep);
	text-decoration: underline;
}

.cgd-breadcrumbs [aria-current="page"] {
	color: var(--cgd-ink-muted);
}

/* Without a sidebar the article sits in a centred reading column; related
   guides below it keep the full width. */
.cgd-no-sidebar.single .cgd-breadcrumbs,
.cgd-no-sidebar.single .cgd-article,
.cgd-no-sidebar.single .cgd-post-nav,
.cgd-no-sidebar.single .cgd-comments {
	max-width: var(--cgd-reading);
	margin-inline: auto;
}

.cgd-article__header {
	margin-bottom: var(--cgd-s6);
}

.cgd-article__title {
	margin-bottom: var(--cgd-s4);
}

.cgd-article__summary {
	color: var(--cgd-ink-soft);
	font-size: var(--cgd-text-lg);
	line-height: var(--cgd-leading-normal);
	max-width: var(--cgd-measure);
	margin-bottom: var(--cgd-s5);
}

.cgd-article__meta {
	padding-top: var(--cgd-s4);
	border-top: 1px solid var(--cgd-line);
}

.cgd-article__figure {
	margin-bottom: var(--cgd-s6);
}

.cgd-article__figure img {
	border-radius: var(--cgd-leaf-lg);
	width: 100%;
}

/* Figures and captions */
.cgd-article__figure figcaption,
.cgd-content figcaption,
.wp-block-image figcaption,
.wp-caption-text {
	margin-top: var(--cgd-s3);
	color: var(--cgd-ink-muted);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	line-height: var(--cgd-leading-snug);
	text-align: center;
}

/* Body text */
.cgd-content {
	font-size: var(--cgd-text-md);
	line-height: var(--cgd-leading-relaxed);
	min-width: 0;
}

.cgd-content > * {
	max-width: var(--cgd-measure);
}

.cgd-content > .alignwide,
.cgd-content > .alignfull,
.cgd-content > .cgd-tutorial-facts,
.cgd-content > .cgd-toc,
.cgd-content > figure,
.cgd-content > .wp-block-image,
.cgd-content > .wp-block-gallery,
.cgd-content > .wp-block-table,
.cgd-content > .cgd-table-wrap,
.cgd-content > table,
.cgd-content > .cgd-callout,
.cgd-content > .cgd-contact,
.cgd-content > .cgd-ad-slot {
	max-width: 100%;
}

.cgd-content h2 {
	margin-top: var(--cgd-s8);
}

.cgd-content h3 {
	margin-top: var(--cgd-s6);
}

.cgd-content h4 {
	margin-top: var(--cgd-s5);
}

.cgd-content > h2:first-child,
.cgd-content > h3:first-child,
.cgd-content .cgd-toc__title,
.cgd-content .cgd-tutorial-facts__title {
	margin-top: 0;
}

.cgd-content ul,
.cgd-content ol {
	margin: 0 0 var(--cgd-s5);
	padding-left: 1.4em;
}

.cgd-content li + li {
	margin-top: var(--cgd-s2);
}

.cgd-content li > ul,
.cgd-content li > ol {
	margin-top: var(--cgd-s2);
	margin-bottom: 0;
}

.cgd-content ul:not([class]) > li::marker {
	color: var(--cgd-green);
}

/* Ordered lists are usually the steps of a guide: terracotta numerals in the
   heading face, with room to breathe. */
.cgd-content ol {
	padding-left: 1.7em;
}

.cgd-content ol > li {
	padding-left: 0.3em;
}

.cgd-content ol > li::marker {
	color: var(--cgd-terracotta-deep);
	font-family: var(--cgd-font-head);
	font-weight: 700;
}

.cgd-content > ol > li + li {
	margin-top: var(--cgd-s3);
}

.cgd-content figure,
.cgd-content .wp-block-image {
	margin-block: var(--cgd-s6);
}

.cgd-content img {
	border-radius: var(--cgd-leaf);
	background-color: var(--cgd-surface);
}

.cgd-content a {
	text-decoration: underline;
}

/* Tables — always scroll inside their own box, never the page.
   inc/toc.php wraps every table in .cgd-table-wrap; the bare-table rules
   below cover the block editor and any table that escapes the wrapper. */
.cgd-table-wrap,
.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--cgd-s6);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-radius);
	background: var(--cgd-surface);
}

/* A block-editor table figure already scrolls: its inner wrapper stays plain. */
.wp-block-table .cgd-table-wrap {
	overflow: visible;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.cgd-content > table {
	display: block;
	overflow-x: auto;
	margin-block: var(--cgd-s6);
}

.cgd-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--cgd-font-ui);
	font-size: 0.9375rem;
	line-height: var(--cgd-leading-snug);
}

.cgd-table-wrap table,
.wp-block-table table {
	min-width: 30rem;
	margin: 0;
}

.cgd-content th,
.cgd-content td,
.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--cgd-line);
	padding: var(--cgd-s3) var(--cgd-s4);
	text-align: left;
	vertical-align: top;
}

.cgd-content tbody tr:last-child > *,
.wp-block-table tbody tr:last-child > * {
	border-bottom: 0;
}

.cgd-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
	background: rgba(255, 248, 234, 0.8);
}

.cgd-content thead th,
.wp-block-table thead th {
	background: var(--cgd-sky);
	border-bottom: 0;
	color: var(--cgd-ink);
	font-size: var(--cgd-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cgd-content tbody th {
	font-weight: 700;
}

.cgd-content table caption {
	caption-side: bottom;
	padding: var(--cgd-s3) var(--cgd-s4);
	color: var(--cgd-ink-muted);
	font-size: var(--cgd-text-sm);
	text-align: left;
}

/* Callouts — used in article content and available in the block editor.
   No side stripes: a tinted leaf with a small shape in front of the title. */
.cgd-callout {
	position: relative;
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	margin-block: var(--cgd-s6);
}

.cgd-callout > :last-child {
	margin-bottom: 0;
}

.cgd-callout__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cgd-ink-soft);
	margin-bottom: var(--cgd-s2);
}

/* A leaf for tips, a round bead for "good to know" notes. */
.cgd-callout__title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0 75% 0 75%;
	background: currentColor;
}

.cgd-callout--tip {
	background: var(--cgd-green-soft);
	border-color: var(--cgd-green-line);
}

.cgd-callout--tip .cgd-callout__title {
	color: var(--cgd-green-deep);
}

.cgd-callout--warning {
	background: var(--cgd-sun-soft);
	border-color: var(--cgd-sun-line);
}

.cgd-callout--warning .cgd-callout__title {
	color: var(--cgd-terracotta-deep);
}

.cgd-callout--warning .cgd-callout__title::before {
	border-radius: 50%;
	background: var(--cgd-terracotta);
	box-shadow: 0 0 0 3px var(--cgd-sun-line);
}

/* "At a glance" card (difficulty, time needed, best time, suits, what you need) */
.cgd-tutorial-facts {
	background: var(--cgd-sky-soft);
	border: 1px solid var(--cgd-sky-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	margin-bottom: var(--cgd-s6);
}

.cgd-tutorial-facts__title,
.cgd-toc__title {
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cgd-green-deep);
	margin: 0 0 var(--cgd-s4);
}

.cgd-facts {
	display: grid;
	gap: var(--cgd-s4);
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	margin: 0;
}

.cgd-facts__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cgd-s3);
	min-width: 0;
}

.cgd-facts__item > span:last-child {
	min-width: 0;
}

.cgd-facts__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--cgd-surface);
	border-radius: 50% 50% 50% 0.3rem;
	color: var(--cgd-green-deep);
}

.cgd-facts__icon .cgd-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.cgd-facts__label {
	display: block;
	font-family: var(--cgd-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: var(--cgd-leading-snug);
	text-transform: uppercase;
	color: var(--cgd-ink-muted);
	margin: 0;
}

.cgd-facts__value {
	display: block;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
	font-weight: 600;
	line-height: var(--cgd-leading-snug);
	margin-top: 0.15rem;
}

.cgd-materials {
	margin-top: var(--cgd-s5);
	padding-top: var(--cgd-s4);
	border-top: 1px solid var(--cgd-sky-line);
}

.cgd-materials .cgd-facts__label {
	margin-bottom: var(--cgd-s3);
}

.cgd-materials__list {
	list-style: none;
	display: grid;
	gap: var(--cgd-s2) var(--cgd-s5);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
	line-height: 1.45;
}

.cgd-materials__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	min-width: 0;
}

.cgd-materials__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.48em;
	background: var(--cgd-green);
	border-radius: 0 75% 0 75%;
}

/* Table of contents */
.cgd-toc {
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	margin-bottom: var(--cgd-s6);
}

.cgd-toc__title {
	margin-bottom: var(--cgd-s3);
}

.cgd-toc ol {
	counter-reset: cgd-toc;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
	line-height: 1.45;
}

.cgd-toc > ol > li {
	counter-increment: cgd-toc;
	margin: 0;
}

.cgd-toc > ol > li + li {
	margin-top: var(--cgd-s2);
}

.cgd-toc > ol > li > a::before {
	content: counter(cgd-toc) ". ";
	color: var(--cgd-terracotta-deep);
	font-weight: 700;
}

.cgd-toc a {
	color: var(--cgd-ink);
	text-decoration: none;
}

.cgd-toc a:hover,
.cgd-toc a:focus {
	color: var(--cgd-terracotta-deep);
	text-decoration: underline;
}

.cgd-toc ol ol {
	margin: var(--cgd-s2) 0 0 var(--cgd-s5);
	font-size: var(--cgd-text-sm);
}

.cgd-toc ol ol li + li {
	margin-top: var(--cgd-s1);
}

.cgd-toc ol ol a {
	color: var(--cgd-ink-soft);
}

/* FAQ */
.cgd-faq {
	margin-top: var(--cgd-s8);
}

.cgd-faq > h2 {
	margin-bottom: var(--cgd-s5);
}

.cgd-faq__item {
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf-sm);
	margin-bottom: var(--cgd-s3);
	padding: var(--cgd-s4) var(--cgd-s5);
}

.cgd-faq__question {
	font-size: 1.1875rem;
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin: 0 0 var(--cgd-s2);
}

.cgd-faq__answer {
	color: var(--cgd-ink-soft);
	font-size: var(--cgd-text-base);
	line-height: 1.65;
}

.cgd-faq__answer > :last-child {
	margin-bottom: 0;
}

/* Article footer */
.cgd-article__footer {
	margin-top: var(--cgd-s8);
	padding-top: var(--cgd-s5);
	border-top: 1px solid var(--cgd-line);
}

.cgd-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgd-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgd-tags__label {
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 700;
	color: var(--cgd-ink-soft);
}

/* Previous / next */
.cgd-post-nav {
	margin-top: var(--cgd-s7);
}

.cgd-post-nav__links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s4);
}

@media (min-width: 48em) {
	.cgd-post-nav__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* When only "next" exists it moves to the right-hand column, where its
	   right-aligned text expects to sit. */
	.cgd-post-nav__link--next:only-child {
		grid-column: 2;
	}
}

.cgd-post-nav__link {
	display: block;
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s4) var(--cgd-s5);
	text-decoration: none;
	height: 100%;
}

.cgd-post-nav__link--next {
	border-radius: 1.5rem 1.5rem 0.375rem 1.5rem;
}

.cgd-post-nav__link:hover,
.cgd-post-nav__link:focus {
	border-color: var(--cgd-green);
	background: var(--cgd-sky-soft);
}

.cgd-post-nav__direction {
	display: block;
	font-family: var(--cgd-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cgd-ink-muted);
	margin-bottom: var(--cgd-s2);
}

.cgd-post-nav__title {
	display: block;
	font-family: var(--cgd-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--cgd-ink);
	line-height: 1.3;
}

.cgd-post-nav__link--prev {
	text-align: left;
}

.cgd-post-nav__link--next {
	text-align: right;
}

/* --------------------------------------------------------------------------
   13. Sidebar and widgets
   -------------------------------------------------------------------------- */

.cgd-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s5);
}

@media (min-width: 66em) {
	.cgd-sidebar--sticky {
		position: sticky;
		top: var(--cgd-s5);
	}
}

.cgd-widget {
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
}

.cgd-widget__title,
.cgd-widget .widget-title {
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cgd-green-deep);
	margin: 0 0 var(--cgd-s4);
}

.cgd-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgd-widget li + li {
	margin-top: var(--cgd-s3);
	padding-top: var(--cgd-s3);
	border-top: 1px solid var(--cgd-line);
}

.cgd-widget a {
	color: var(--cgd-ink);
	text-decoration: none;
}

.cgd-widget a:hover,
.cgd-widget a:focus {
	color: var(--cgd-green-deep);
	text-decoration: underline;
}

.cgd-widget .children,
.cgd-widget .sub-menu {
	margin-top: var(--cgd-s3);
	padding-left: var(--cgd-s4);
}

/* --------------------------------------------------------------------------
   14. Archives, pagination, search, 404
   -------------------------------------------------------------------------- */

/* Archive and page titles end in the leaf-and-flower mark. */
.cgd-archive-header {
	margin-bottom: var(--cgd-s7);
}

.cgd-archive-header__title {
	margin-bottom: var(--cgd-s4);
	padding-bottom: 1.6rem;
	background: var(--cgd-petals) left bottom / 2.75rem 0.75rem no-repeat;
}

.cgd-archive-header__description {
	color: var(--cgd-ink-soft);
	font-size: var(--cgd-text-lg);
	line-height: var(--cgd-leading-normal);
	max-width: var(--cgd-measure);
}

.cgd-archive-header__description > :last-child {
	margin-bottom: 0;
}

.cgd-archive-header__count {
	margin: var(--cgd-s3) 0 0;
	color: var(--cgd-ink-muted);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
}

.cgd-subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cgd-s2);
	list-style: none;
	margin: var(--cgd-s4) 0 0;
	padding: 0;
}

.cgd-pagination {
	margin-top: var(--cgd-s8);
	font-family: var(--cgd-font-ui);
}

.cgd-pagination .nav-links {
	display: flex;
	justify-content: center;
}

.cgd-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cgd-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgd-pagination li {
	margin: 0;
}

.cgd-pagination a.page-numbers,
.cgd-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: var(--cgd-s4);
	background: var(--cgd-surface);
	border: 1.5px solid var(--cgd-line);
	border-radius: var(--cgd-pill);
	color: var(--cgd-ink);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.cgd-pagination a.page-numbers:hover,
.cgd-pagination a.page-numbers:focus {
	background: var(--cgd-sky);
	border-color: var(--cgd-green);
	color: var(--cgd-ink);
}

.cgd-pagination span.page-numbers.current {
	background: var(--cgd-green-deep);
	border-color: var(--cgd-green-deep);
	color: var(--cgd-surface);
}

.cgd-pagination span.page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 1.5rem;
	padding-inline: 0;
}

/* Search */
.cgd-search-intro {
	margin-bottom: var(--cgd-s6);
}

.cgd-search-intro .cgd-archive-header__title {
	margin-bottom: var(--cgd-s3);
}

.cgd-search-intro .cgd-search-form {
	max-width: 32rem;
	margin-top: var(--cgd-s4);
}

.cgd-no-results {
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s6) var(--cgd-s5);
}

.cgd-no-results .cgd-search-form {
	max-width: 30rem;
	margin-top: var(--cgd-s5);
}

.cgd-no-results__suggestions {
	display: grid;
	gap: var(--cgd-s2);
	list-style: none;
	margin: var(--cgd-s4) 0 var(--cgd-s5);
	padding: 0;
}

.cgd-no-results__suggestions li {
	padding-left: 1.3em;
	position: relative;
}

.cgd-no-results__suggestions li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--cgd-green);
	border-radius: 0 75% 0 75%;
}

/* 404 */
.cgd-error-404 {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

/* The number sits on a sun with a pale halo (green-dark on sun: 5.5:1). */
.cgd-error-404__code {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11rem;
	height: 11rem;
	margin: 0 auto var(--cgd-s5);
	background: radial-gradient(circle, var(--cgd-sun) 0, var(--cgd-sun) 50%, rgba(246, 199, 68, 0.35) 50%, rgba(246, 199, 68, 0.35) 70%, transparent 70%);
	color: var(--cgd-green-dark);
	font-family: var(--cgd-font-head);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.cgd-error-404 .cgd-search-form {
	max-width: 26rem;
	margin: var(--cgd-s5) auto 0;
	text-align: left;
}

.cgd-error-404 .cgd-subcategories {
	justify-content: center;
	margin-top: var(--cgd-s4);
}

.cgd-error-404 .cgd-section {
	margin-top: var(--cgd-s8);
	text-align: left;
}

.cgd-error-404__headline {
	margin-top: var(--cgd-s7);
	font-size: var(--cgd-text-xl);
}

/* --------------------------------------------------------------------------
   15. Pages and contact form
   -------------------------------------------------------------------------- */

.cgd-page__header {
	margin-bottom: var(--cgd-s6);
}

.cgd-page__header .cgd-page__title {
	margin-bottom: 0;
	padding-bottom: 1.6rem;
	background: var(--cgd-petals) left bottom / 2.75rem 0.75rem no-repeat;
}

.cgd-page__updated {
	margin: var(--cgd-s3) 0 0;
	color: var(--cgd-ink-muted);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
}

.cgd-form-notice {
	border-radius: var(--cgd-leaf-sm);
	padding: var(--cgd-s4) var(--cgd-s5);
	margin-bottom: var(--cgd-s5);
	border: 1px solid;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-base);
}

.cgd-form-notice > :last-child {
	margin-bottom: 0;
}

.cgd-form-notice--success {
	background: var(--cgd-sky-soft);
	border-color: var(--cgd-sky-line);
	color: var(--cgd-ink);
}

.cgd-form-notice--error {
	background: var(--cgd-sun-soft);
	border-color: var(--cgd-terracotta);
	color: #7a2f1a;
}

.cgd-form-notice--error a {
	color: inherit;
}

.cgd-form-notice__list {
	margin: var(--cgd-s2) 0 0;
	padding-left: 1.2em;
}

.cgd-form {
	max-width: 38rem;
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
}

@media (min-width: 36em) {
	.cgd-form {
		padding: var(--cgd-s6);
	}
}

.cgd-form > :last-child {
	margin-bottom: 0;
}

.cgd-form input[aria-invalid="true"],
.cgd-form textarea[aria-invalid="true"] {
	border-color: var(--cgd-terracotta-deep);
	border-width: 2px;
}

.cgd-field__error {
	display: block;
	margin-top: var(--cgd-s2);
	color: #8a3a20;
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
}

.cgd-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cookie notice. The markup and a neutral inline style come from the Site
   Setup plugin; these rules (one step more specific) bring it into the
   palette. */
body .cgd-cookie-notice {
	background: var(--cgd-ink);
	color: var(--cgd-sky);
	font-family: var(--cgd-font-ui);
}

body .cgd-cookie-notice a {
	color: var(--cgd-sun);
}

body .cgd-cookie-notice__button {
	min-height: 0;
	background: var(--cgd-surface);
	border: 1.5px solid var(--cgd-surface);
	border-radius: var(--cgd-pill);
	color: var(--cgd-ink);
	font-weight: 600;
	padding: 0.5rem 1.4rem;
}

body .cgd-cookie-notice__button:hover,
body .cgd-cookie-notice__button:focus {
	background: var(--cgd-sky);
	border-color: var(--cgd-sky);
	color: var(--cgd-ink);
}

body .cgd-cookie-notice__button:focus-visible {
	outline: 3px solid var(--cgd-sun);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   16. Comments
   -------------------------------------------------------------------------- */

.cgd-comments {
	margin-top: var(--cgd-s9);
	padding-top: var(--cgd-s6);
	border-top: 1px solid var(--cgd-line);
}

.cgd-comments__title {
	font-size: var(--cgd-text-2xl);
}

.cgd-comments .comment-list {
	list-style: none;
	margin: 0 0 var(--cgd-s7);
	padding: 0;
}

.cgd-comments .comment-list ol.children {
	list-style: none;
	margin: var(--cgd-s4) 0 0 var(--cgd-s5);
	padding: 0;
}

.cgd-comments .comment-body {
	background: var(--cgd-surface);
	border: 1px solid var(--cgd-line);
	border-radius: var(--cgd-leaf);
	padding: var(--cgd-s5);
	margin-bottom: var(--cgd-s4);
}

.cgd-comments .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgd-s2) var(--cgd-s3);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	color: var(--cgd-ink-muted);
	margin-bottom: var(--cgd-s3);
}

.cgd-comments .comment-author img {
	display: inline-block;
	border-radius: 50%;
	margin-right: var(--cgd-s2);
	vertical-align: middle;
}

.cgd-comments .reply {
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-sm);
	font-weight: 600;
}

.comment-respond .comment-form-cookies-consent label,
.comment-respond .comment-notes {
	font-weight: 400;
	font-size: var(--cgd-text-sm);
	color: var(--cgd-ink-soft);
	display: inline;
}

.comment-form p {
	margin-bottom: var(--cgd-s4);
}

/* --------------------------------------------------------------------------
   17. Ad slots (empty and disabled by default; nothing renders without code)
   -------------------------------------------------------------------------- */

.cgd-ad-slot {
	margin-block: var(--cgd-s6);
	text-align: center;
	overflow: hidden;
}

.cgd-ad-slot__label {
	display: block;
	margin-bottom: var(--cgd-s2);
	color: var(--cgd-ink-muted);
	font-family: var(--cgd-font-ui);
	font-size: var(--cgd-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cgd-ad-slot--sidebar {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   18. Footer — deep leaf green, rounded at the top like a planter rim
   -------------------------------------------------------------------------- */

.cgd-site-footer {
	background: var(--cgd-green-darkest);
	border-radius: 2rem 2rem 0 0;
	color: #d5e8d4;
	margin-top: auto;
	padding-block: var(--cgd-s8) var(--cgd-s6);
	font-family: var(--cgd-font-ui);
}

@media (min-width: 48em) {
	.cgd-site-footer {
		border-radius: 3rem 3rem 0 0;
		padding-top: var(--cgd-s9);
	}
}

.cgd-site-footer :focus-visible {
	outline-color: var(--cgd-sun);
}

.cgd-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cgd-s6);
	margin-bottom: var(--cgd-s7);
}

@media (min-width: 48em) {
	.cgd-footer__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--cgd-s8);
	}
}

.cgd-footer__about p {
	color: #d5e8d4;
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 40ch;
	margin-bottom: 0;
}

.cgd-footer__about .cgd-footer__tagline {
	color: var(--cgd-sky);
	font-size: var(--cgd-text-base);
	margin-bottom: var(--cgd-s3);
}

.cgd-footer__nav {
	min-width: 0;
}

.cgd-footer__heading {
	font-family: var(--cgd-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cgd-sun);
	margin: 0 0 var(--cgd-s3);
}

.cgd-footer__about .cgd-footer__heading {
	font-family: var(--cgd-font-head);
	font-size: var(--cgd-text-2xl);
	letter-spacing: -0.03em;
	text-transform: none;
	color: var(--cgd-surface);
	margin-bottom: var(--cgd-s2);
}

.cgd-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--cgd-text-base);
}

.cgd-footer__menu li + li {
	margin-top: 0.125rem;
}

.cgd-footer__menu a {
	display: inline-block;
	padding-block: 0.3rem;
	color: var(--cgd-sky);
	text-decoration: none;
}

.cgd-footer__menu a:hover,
.cgd-footer__menu a:focus {
	color: var(--cgd-sun);
	text-decoration: underline;
}

.cgd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cgd-s3);
	padding-top: var(--cgd-s5);
	border-top: 1px solid rgba(207, 234, 247, 0.22);
	color: #d5e8d4;
	font-size: var(--cgd-text-sm);
}

.cgd-footer__bottom p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   19. Utilities and editor alignments
   -------------------------------------------------------------------------- */

.cgd-visually-balanced {
	max-width: var(--cgd-measure);
}

.cgd-text-center {
	text-align: center;
}

.cgd-mt-0 {
	margin-top: 0;
}

.cgd-mb-0 {
	margin-bottom: 0;
}

.alignleft {
	float: left;
	margin: 0 var(--cgd-s5) var(--cgd-s4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--cgd-s4) var(--cgd-s5);
}

@media (max-width: 35.99em) {
	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 var(--cgd-s4);
	}
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide,
.alignfull {
	margin-inline: auto;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.wp-block-embed.wp-embed-aspect-16-9 iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--cgd-leaf);
}

/* --------------------------------------------------------------------------
   20. Print — guides that read well on paper
   -------------------------------------------------------------------------- */

@media print {
	.cgd-site-header,
	.cgd-site-footer,
	.cgd-ad-slot,
	.cgd-post-nav,
	.cgd-comments,
	.cgd-sidebar,
	.cgd-related,
	.cgd-skip-link,
	.cgd-breadcrumbs,
	.cgd-cookie-notice {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	.cgd-content > * {
		max-width: none;
	}

	.cgd-table-wrap,
	.wp-block-table {
		overflow: visible;
	}

	.cgd-table-wrap table,
	.wp-block-table table {
		min-width: 0;
	}

	a {
		color: inherit;
		text-decoration: underline;
	}

	.cgd-content h2,
	.cgd-content h3 {
		break-after: avoid;
	}

	figure,
	.cgd-callout,
	.cgd-tutorial-facts,
	.cgd-facts__item {
		break-inside: avoid;
	}
}