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

   Look: a practical, productive kitchen garden — cream background, white
   surfaces, soil-brown ink, deep leaf green as the working colour, pale
   green panels, cedar wood as the warm accent and a touch of tomato red for
   small highlights only. Garden forms carry the identity: "leaf" corners
   (three generous, one tight), a seedling medallion, a row of three cedar
   boards as divider and title underline, a plank stripe along the top of the
   footer and plump pill buttons. The two decorative shapes are inline SVG
   data URIs, so nothing is requested from the network.

   Contrast reference (WCAG AA, calculated):
     ink         #3b2a1e on cream #fbf9f1 / white ... 13.0:1 / 13.7:1
     ink-soft    #57432f on cream / pale green ...... 8.9:1 / 7.5:1
     ink-muted   #6a5642 on cream / pale green ...... 6.6:1 / 5.6:1
     green-deep  #2f5a34 on cream / white / sage .... 7.6:1 / 8.0:1 / 6.4:1
     white       #ffffff on green-deep #2f5a34 ...... 8.0:1
     cedar-deep  #85532a on cream / white ........... 6.1:1 / 6.4:1
     tomato-deep #a12a17 on tomato tint #fcefeb ..... 6.5:1
     sage        #dfead3 on ink #3b2a1e ............. 11.0:1
     straw       #f0cf9f on ink ..................... 9.2:1
   Fresh green #5c9a4a, cedar #b47c48 and tomato #c9361f are used for shapes
   and accents only, never for body text.
   ========================================================================== */

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

:root {
	/* Colour */
	--rbg-sand: #fbf9f1;
	--rbg-sand-deep: #f5f0e2;
	--rbg-surface: #ffffff;
	--rbg-ink: #3b2a1e;
	--rbg-ink-soft: #57432f;
	--rbg-ink-muted: #6a5642;
	--rbg-green: #5c9a4a;
	--rbg-green-deep: #2f5a34;
	--rbg-green-dark: #234527;
	--rbg-green-light: #a9cf95;
	--rbg-sage: #dfead3;
	--rbg-sage-soft: #eff4e6;
	--rbg-sage-line: #c5d8b4;
	--rbg-straw: #f0cf9f;
	--rbg-tomato-soft: #fcefeb;
	--rbg-tomato-line: #f1c9bf;
	--rbg-cedar: #b47c48;
	--rbg-cedar-deep: #85532a;
	--rbg-tomato: #c9361f;
	--rbg-tomato-deep: #a12a17;
	--rbg-line: #e6dcc6;
	--rbg-line-strong: #8c7f6a;
	--rbg-focus: #85532a;

	/* Shapes drawn once and reused as backgrounds: three cedar boards, and a
	   pale medallion holding a two-leaf seedling. */
	--rbg-planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Crect x='0' y='3' width='13' height='6' rx='1.5' fill='%23b47c48'/%3E%3Crect x='15.5' y='3' width='13' height='6' rx='1.5' fill='%23cf9f6e'/%3E%3Crect x='31' y='3' width='13' height='6' rx='1.5' fill='%23b47c48'/%3E%3C/svg%3E");
	--rbg-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-110 -110 220 220'%3E%3Ccircle r='104' fill='%23dfead3'/%3E%3Ccircle r='82' fill='none' stroke='%23eef4e4' stroke-width='3' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3Cg fill='%23eef4e4'%3E%3Cpath d='M-3 62C-5 30-4 10 0-8C4 10 5 30 3 62Z'/%3E%3Cpath d='M0 0C-12-34-38-52-74-48C-70-14-42 6 0 0Z'/%3E%3Cpath d='M0-12C10-44 34-62 68-60C66-28 40-6 0-12Z'/%3E%3C/g%3E%3C/svg%3E");

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

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

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

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

	/* Shape and shadow. A "leaf" has three generous corners and one tight. */
	--rbg-radius-sm: 0.5rem;
	--rbg-radius: 0.875rem;
	--rbg-pill: 999px;
	--rbg-leaf-sm: 1rem 1rem 1rem 0.25rem;
	--rbg-leaf: 1.5rem 1.5rem 1.5rem 0.375rem;
	--rbg-leaf-lg: 2.5rem 2.5rem 2.5rem 0.625rem;
	--rbg-shadow-sm: 0 1px 2px rgba(59, 42, 30,0.05);
	--rbg-shadow: 0 10px 28px -12px rgba(59, 42, 30,0.22);
	--rbg-shadow-lg: 0 22px 44px -18px rgba(59, 42, 30,0.28);

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

	color-scheme: light;
}

@media (min-width: 48em) {
	:root {
		--rbg-gutter: var(--rbg-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;
	}

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

body {
	margin: 0;
	background-color: var(--rbg-sand);
	color: var(--rbg-ink);
	font-family: var(--rbg-font-body);
	font-size: var(--rbg-text-md);
	line-height: var(--rbg-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;
}

/* Plank divider: a hairline with three small cedar boards at its centre. */
hr {
	height: 0.75rem;
	margin: var(--rbg-s7) 0;
	border: 0;
	background:
		var(--rbg-planks) center / 2.75rem 0.75rem no-repeat,
		linear-gradient(90deg, var(--rbg-line) calc(50% - 2.25rem), transparent calc(50% - 2.25rem), transparent calc(50% + 2.25rem), var(--rbg-line) calc(50% + 2.25rem)) center / 100% 1px no-repeat;
}

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

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

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

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

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

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

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

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

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

a:hover,
a:focus {
	color: var(--rbg-cedar-deep);
}

strong,
b {
	font-weight: 700;
}

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

mark {
	background: var(--rbg-sage);
	color: var(--rbg-ink);
	border-radius: 0.2em;
	padding: 0 0.2em;
}

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

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

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

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

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

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

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

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

/* The main landmark only receives focus from the skip link. */
.rbg-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(--rbg-ink);
	border-radius: var(--rbg-pill);
	box-shadow: var(--rbg-shadow);
	clip-path: none;
	color: var(--rbg-surface);
	display: block;
	font-family: var(--rbg-font-ui);
	font-size: var(--rbg-text-base);
	font-weight: 600;
	height: auto;
	left: var(--rbg-s4);
	line-height: normal;
	outline-color: var(--rbg-straw);
	padding: var(--rbg-s3) var(--rbg-s5);
	text-decoration: none;
	top: var(--rbg-s4);
	width: auto;
	z-index: 100000;
}

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

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

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

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

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

/* Used on the homepage, where the hero sits flush against the header. */
.rbg-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. */
.rbg-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rbg-s7);
}

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

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

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

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

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

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

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

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

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

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

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

.rbg-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.
   -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

/* The three-word site name has to fit beside the menu button on small phones. */
@media (max-width: 420px) {
	.rbg-branding {
		gap: 0.45rem;
	}

	.rbg-branding__mark {
		width: 1.9rem;
		height: 1.9rem;
	}

	.rbg-branding__title {
		font-size: 1rem;
	}
}

.rbg-branding__title a {
	color: var(--rbg-ink);
	text-decoration: none;
}

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

.rbg-branding__tagline {
	margin: 0.2rem 0 0;
	font-family: var(--rbg-font-ui);
	font-size: var(--rbg-text-xs);
	color: var(--rbg-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) {
	.rbg-branding__tagline {
		display: none;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.rbg-nav__list li {
	position: relative;
}

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

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

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

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

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

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

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

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

	.rbg-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. */
	.rbg-header__panel,
	.rbg-header__panel.is-open {
		display: contents;
	}

	.rbg-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. */
	.rbg-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(--rbg-s2) 0;
	}

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

	.rbg-nav__list a:hover,
	.rbg-nav__list a:focus {
		background: var(--rbg-sage);
	}

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

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

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

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

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

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

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

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

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

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

.rbg-required {
	color: var(--rbg-tomato-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(--rbg-surface);
	border: 1.5px solid var(--rbg-line-strong);
	border-radius: var(--rbg-radius);
	color: var(--rbg-ink);
	font-family: var(--rbg-font-ui);
	font-size: var(--rbg-text-base);
	line-height: 1.4;
	padding: 0.7rem var(--rbg-s4);
}

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

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

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

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

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

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

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

.rbg-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(--rbg-green-deep);
	border: 0;
	border-radius: 50%;
	color: var(--rbg-surface);
	cursor: pointer;
	padding: 0;
}

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

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

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

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

.rbg-button,
.rbg-button--primary,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rbg-s2);
	background: var(--rbg-green-deep);
	border: 1.5px solid var(--rbg-green-deep);
	border-radius: var(--rbg-pill);
	color: var(--rbg-surface);
	cursor: pointer;
	font-family: var(--rbg-font-ui);
	font-size: var(--rbg-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;
}

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

.rbg-button--secondary {
	background: var(--rbg-surface);
	border-color: var(--rbg-sage-line);
	color: var(--rbg-ink);
}

.rbg-button--secondary:hover,
.rbg-button--secondary:focus {
	background: var(--rbg-sage);
	border-color: var(--rbg-green);
	color: var(--rbg-ink);
}

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

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

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

/* Category label: a small green pill. */
.rbg-eyebrow {
	display: inline-block;
	align-self: flex-start;
	max-width: 100%;
	background: var(--rbg-sage);
	border-radius: var(--rbg-pill);
	font-family: var(--rbg-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--rbg-green-deep);
	text-decoration: none;
	padding: 0.25rem 0.7rem;
	margin-bottom: var(--rbg-s2);
}

a.rbg-eyebrow:hover,
a.rbg-eyebrow:focus {
	background: var(--rbg-green-deep);
	color: var(--rbg-surface);
	text-decoration: none;
}

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

a.rbg-chip:hover,
a.rbg-chip:focus {
	background: var(--rbg-sage);
	border-color: var(--rbg-green);
	color: var(--rbg-ink);
}

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

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

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

.rbg-meta a {
	color: inherit;
}

.rbg-meta svg {
	flex: 0 0 auto;
	color: var(--rbg-green);
}

.rbg-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
   -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

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

/* Posts without a featured image get a quiet seedling medallion on pale green. */
.rbg-card__media--placeholder,
.rbg-card-row__media--placeholder {
	background: var(--rbg-sprout) center / auto 150% no-repeat, var(--rbg-sage-soft);
}

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

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

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

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

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

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

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

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

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

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

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

.rbg-card-row__media {
	display: block;
	background: var(--rbg-sage-soft);
	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. */
.rbg-card-row__body {
	min-width: 0;
	padding: var(--rbg-s2) var(--rbg-s3) var(--rbg-s3);
}

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

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

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

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

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

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

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

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

.rbg-steps > li:hover {
	background: var(--rbg-sage);
	transform: translateY(-2px);
}

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

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

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

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

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

/* Centred copy over a pale green wash, two faint seedling medallions in the
   corners and a planted raised bed along the bottom edge. */
.rbg-hero {
	background:
		var(--rbg-sprout) right -5rem top -6rem / 17rem no-repeat,
		var(--rbg-sprout) left -6rem bottom -4rem / 15rem no-repeat,
		linear-gradient(180deg, var(--rbg-sage-soft) 0%, var(--rbg-sage-soft) 55%, var(--rbg-sand) 100%);
	padding-block: var(--rbg-s8) 0;
	overflow: hidden;
}

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

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

@media (min-width: 62em) {
	.rbg-hero {
		background:
			var(--rbg-sprout) right -7rem top -8rem / 30rem no-repeat,
			var(--rbg-sprout) left -9rem bottom -7rem / 26rem no-repeat,
			linear-gradient(180deg, var(--rbg-sage-soft) 0%, var(--rbg-sage-soft) 55%, var(--rbg-sand) 100%);
		padding-top: var(--rbg-s10);
	}

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

.rbg-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(--rbg-s5);
	max-width: 17ch;
}

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

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

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

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

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

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

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

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

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

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

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

/* Closing call to action: a large pale green leaf with a seedling medallion
   in its corner. */
.rbg-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rbg-s5);
	align-items: center;
	background: var(--rbg-sprout) right -4rem bottom -5rem / 16rem no-repeat, var(--rbg-sage);
	border-radius: var(--rbg-leaf-lg);
	color: var(--rbg-ink);
	padding: var(--rbg-s7) var(--rbg-s5);
}

/* The medallion shares the panel's green, so only its lighter seedling and
   dotted ring show: a quiet watermark, which is the intent. */
@media (min-width: 48em) {
	.rbg-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--rbg-s7);
		padding: var(--rbg-s8) var(--rbg-s9);
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rbg-content > h2:first-child,
.rbg-content > h3:first-child {
	margin-top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rbg-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
	background: rgba(245, 240, 226, 0.55);
}

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

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

.rbg-content table caption {
	caption-side: bottom;
	padding: var(--rbg-s3) var(--rbg-s4);
	color: var(--rbg-ink-muted);
	font-size: var(--rbg-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. */
.rbg-callout {
	position: relative;
	background: var(--rbg-surface);
	border: 1px solid var(--rbg-line);
	border-radius: var(--rbg-leaf);
	padding: var(--rbg-s5);
	margin-block: var(--rbg-s6);
}

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

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

/* A green leaf for tips, a round tomato-red bead for warnings. */
.rbg-callout__title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0 75% 0 75%;
	background: currentColor;
}

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

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

.rbg-callout--tip .rbg-callout__title::before {
	background: var(--rbg-green);
}

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

.rbg-callout--warning .rbg-callout__title {
	color: var(--rbg-tomato-deep);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 48em) {
	.rbg-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. */
	.rbg-post-nav__link--next:only-child {
		grid-column: 2;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Archive and page titles are underlined by three cedar boards. */
.rbg-archive-header {
	margin-bottom: var(--rbg-s7);
}

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

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

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

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

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

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

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

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

.rbg-pagination li {
	margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The number sits on the seedling medallion. */
.rbg-error-404__code {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11rem;
	height: 11rem;
	margin: 0 auto var(--rbg-s5);
	background: var(--rbg-sprout) center / contain no-repeat;
	color: var(--rbg-green-deep);
	font-family: var(--rbg-font-head);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

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

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

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

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

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

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

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

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

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

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

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

.rbg-form-notice--error {
	background: var(--rbg-tomato-soft);
	border-color: var(--rbg-tomato-line);
	color: #7a2f1a;
}

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

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

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

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

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

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

.rbg-field__error {
	display: block;
	margin-top: var(--rbg-s2);
	color: var(--rbg-tomato-deep);
	font-family: var(--rbg-font-ui);
	font-size: var(--rbg-text-sm);
	font-weight: 600;
}

.rbg-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 .rbg-cookie-notice {
	background: var(--rbg-ink);
	color: var(--rbg-sage);
	font-family: var(--rbg-font-ui);
}

body .rbg-cookie-notice a {
	color: var(--rbg-straw);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   18. Footer — soil brown, rounded at the top, edged with a cedar plank stripe
   -------------------------------------------------------------------------- */

.rbg-site-footer {
	background:
		repeating-linear-gradient(90deg, var(--rbg-cedar) 0, var(--rbg-cedar) 5.5rem, var(--rbg-cedar-deep) 5.5rem, var(--rbg-cedar-deep) calc(5.5rem + 2px)) top / 100% 0.5rem no-repeat,
		var(--rbg-ink);
	border-radius: 2rem 2rem 0 0;
	color: #d9ccb8;
	margin-top: auto;
	padding-block: var(--rbg-s8) var(--rbg-s6);
	font-family: var(--rbg-font-ui);
}

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

.rbg-site-footer :focus-visible {
	outline-color: var(--rbg-straw);
}

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

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

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

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

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

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

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

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

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

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

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

.rbg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rbg-s3);
	padding-top: var(--rbg-s5);
	border-top: 1px solid rgba(245, 240, 226, 0.18);
	color: #d9ccb8;
	font-size: var(--rbg-text-sm);
}

.rbg-footer__bottom p {
	margin: 0;
}

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

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

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

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

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

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

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

@media (max-width: 35.99em) {
	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 var(--rbg-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(--rbg-leaf);
}

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

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

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

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

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

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

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

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

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