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

   Look: a calm interior magazine. Warm white page, white surfaces, clay
   accent, sage and deep green, thin hairlines, soft corners and an arch
   shape that recurs in the logo, the hero, the section titles and the Start
   Here step numbers. Built compact-first: one column at 360px, then wider.

   Contrast reference (WCAG AA, measured):
     ink         #2f2a26 on page #faf6f0 / white / linen #f3ece1 ... 13.2 / 14.2 / 12.1
     ink-soft    #4d453e on page / white / linen ................... 8.7 / 9.4 / 8.0
     ink-muted   #6a6058 on page / white / linen ................... 5.7 / 6.1 / 5.2
     accent      #9a4f2c on page / white / linen / clay tint ....... 5.5 / 6.0 / 5.1 / 4.9
     accent-deep #7b3d20 on page / clay tint #f6e7dc ............... 7.7 / 6.9
     white       #ffffff on accent #9a4f2c / accent-deep #7b3d20 ... 6.0 / 8.3
     sage-deep   #3f5a44 on sage tint #e9efe4 / page ............... 6.5 / 7.1
     ink         #2f2a26 on sage tint / clay tint .................. 12.1 / 11.7
     white       #ffffff on deep green #2f4a3f ..................... 9.7
     footer text #e6ede5 / #c9d6ca / #f3d9c4 on deep green ......... 8.1 / 6.4 / 7.2
     white       #ffffff on ink #2f2a26 ............................ 14.2
     line-strong #857564 on white / page (control borders, 3:1) .... 4.4 / 4.1
   ========================================================================== */

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

:root {
	/* Colour — raw palette */
	--sbd-clay: #c98a68;
	--sbd-clay-pale: #f0d9c8;
	--sbd-sage: #6f8468;
	--sbd-sage-deep: #3f5a44;
	--sbd-sage-soft: #e9efe4;
	--sbd-sage-line: #cfdbc9;
	--sbd-forest: #2f4a3f;
	--sbd-butter: #f3e2b3;

	/* Colour — roles */
	--sbd-paper: #faf6f0;
	--sbd-paper-deep: #f3ece1;
	--sbd-surface: #ffffff;
	--sbd-ink: #2f2a26;
	--sbd-ink-soft: #4d453e;
	--sbd-ink-muted: #6a6058;
	--sbd-line: #e4d9c9;
	--sbd-line-strong: #857564;
	--sbd-accent: #9a4f2c;
	--sbd-accent-hover: #7b3d20;
	--sbd-accent-soft: #f6e7dc;
	--sbd-on-accent: #ffffff;
	--sbd-second: #3f5a44;
	--sbd-second-soft: #e9efe4;
	--sbd-focus: #2f4a3f;

	/* Footer (deep green band) */
	--sbd-footer-bg: #2f4a3f;
	--sbd-footer-text: #e6ede5;
	--sbd-footer-muted: #c9d6ca;
	--sbd-footer-hover: #f3d9c4;
	--sbd-footer-line: rgba(255, 255, 255, 0.18);

	/* Typography — system stacks, nothing to download */
	--sbd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--sbd-font-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--sbd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--sbd-text-xs: 0.8125rem;
	--sbd-text-sm: 0.9375rem;
	--sbd-text-base: 1rem;
	--sbd-text-md: 1.0625rem;
	--sbd-text-lg: 1.25rem;
	--sbd-text-xl: 1.4375rem;
	--sbd-text-2xl: 1.75rem;
	--sbd-text-3xl: 2.125rem;
	--sbd-text-4xl: 2.75rem;

	--sbd-leading-tight: 1.18;
	--sbd-leading-snug: 1.35;
	--sbd-leading-normal: 1.65;
	--sbd-leading-relaxed: 1.75;

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

	/* Shape and shadow */
	--sbd-radius-sm: 6px;
	--sbd-radius: 12px;
	--sbd-radius-lg: 14px;
	--sbd-radius-pill: 999px;
	--sbd-arch: 999px 999px var(--sbd-radius-sm) var(--sbd-radius-sm);
	--sbd-shadow-sm: 0 1px 2px rgba(47, 42, 38, 0.05);
	--sbd-shadow: 0 8px 24px rgba(47, 42, 38, 0.08);
	--sbd-shadow-lg: 0 18px 40px rgba(47, 42, 38, 0.12);

	/* Layout */
	--sbd-container: 1160px;
	--sbd-container-narrow: 46rem;
	--sbd-measure: 39rem;
	--sbd-wide: 56rem;
	--sbd-gutter: var(--sbd-s4);
	--sbd-tap: 2.75rem;

	color-scheme: light;
}

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

	.sbd-card:hover,
	.sbd-card:hover .sbd-card__media img,
	.sbd-topic:hover {
		transform: none !important;
	}
}

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

hr {
	border: 0;
	border-top: 1px solid var(--sbd-line);
	margin: var(--sbd-s7) 0;
}

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

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

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

h2 {
	font-size: clamp(1.5625rem, 1.3rem + 1.2vw, var(--sbd-text-3xl));
}

h3 {
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, var(--sbd-text-xl));
}

h4 {
	font-size: var(--sbd-text-lg);
}

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

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

a {
	color: var(--sbd-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	color: var(--sbd-accent-hover);
}

strong,
b {
	font-weight: 700;
}

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

mark {
	background: var(--sbd-butter);
	color: var(--sbd-ink);
	padding: 0 0.15em;
}

code,
kbd,
samp {
	font-family: var(--sbd-font-mono);
	font-size: 0.9em;
	background: var(--sbd-paper-deep);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-sm);
	padding: 0.1em 0.35em;
}

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

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

blockquote {
	margin: var(--sbd-s6) 0;
	padding: var(--sbd-s1) 0 var(--sbd-s1) var(--sbd-s5);
	border-left: 2px solid var(--sbd-clay);
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-lg);
	font-style: italic;
	color: var(--sbd-ink-soft);
}

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

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

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

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

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

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

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

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

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

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

@media (min-width: 48em) {
	.sbd-site-main {
		padding-block: var(--sbd-s7) var(--sbd-s10);
	}
}

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

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

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

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

.sbd-section {
	margin-block: var(--sbd-s8);
}

@media (min-width: 48em) {
	.sbd-section {
		margin-block: var(--sbd-s9);
	}
}

.sbd-section:first-child {
	margin-top: var(--sbd-s7);
}

.sbd-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbd-s1) var(--sbd-s4);
	margin-bottom: var(--sbd-s5);
	padding-bottom: var(--sbd-s4);
	border-bottom: 1px solid var(--sbd-line);
}

.sbd-section__title {
	display: flex;
	align-items: baseline;
	gap: var(--sbd-s3);
	min-width: 0;
	margin: 0;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, var(--sbd-text-2xl));
}

/* A small arch before every section title — the site's recurring shape. */
.sbd-section__title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.95rem;
	border-radius: 999px 999px 2px 2px;
	background: var(--sbd-clay);
}

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

.sbd-section__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--sbd-tap);
	font-size: var(--sbd-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sbd-section__link:hover {
	text-decoration: underline;
}

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

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */

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

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

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

.sbd-branding__mark {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
}

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

.sbd-branding__title {
	font-family: var(--sbd-font-head);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.01em;
}

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

.sbd-branding__title a:hover {
	color: var(--sbd-accent);
}

.sbd-branding__tagline {
	margin: 0.25rem 0 0;
	font-size: var(--sbd-text-xs);
	color: var(--sbd-ink-muted);
	line-height: 1.3;
}

/* On phones the tagline would crowd the menu button. */
@media (max-width: 35.99em) {
	.sbd-branding__tagline {
		display: none;
	}

	.sbd-branding__title {
		font-size: 1.0625rem;
	}

	.sbd-menu-toggle {
		padding-inline: var(--sbd-s3);
	}
}

@media (min-width: 36em) {
	.sbd-branding__mark {
		width: 2.5rem;
		height: 2.5rem;
	}

	.sbd-branding__title {
		font-size: var(--sbd-text-xl);
	}
}

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

/* Mobile menu button */
.sbd-menu-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--sbd-s2);
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line-strong);
	border-radius: var(--sbd-radius-pill);
	color: var(--sbd-ink);
	cursor: pointer;
	font: inherit;
	font-size: var(--sbd-text-sm);
	font-weight: 600;
	min-height: var(--sbd-tap);
	padding: var(--sbd-s2) var(--sbd-s4);
}

.sbd-menu-toggle:hover {
	background: var(--sbd-paper-deep);
	border-color: var(--sbd-ink);
	color: var(--sbd-ink);
}

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

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

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

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

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

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

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

.sbd-nav__list li {
	position: relative;
}

.sbd-nav__list a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: var(--sbd-s2) var(--sbd-s1);
	border-bottom: 1px solid var(--sbd-line);
	color: var(--sbd-ink);
	font-size: var(--sbd-text-md);
	font-weight: 600;
	text-decoration: none;
}

.sbd-nav__list a:hover {
	color: var(--sbd-accent);
}

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

.sbd-nav .current-menu-item > a,
.sbd-nav .current-menu-ancestor > a,
.sbd-nav .current_page_item > a {
	color: var(--sbd-accent);
}

.sbd-header__search {
	margin-top: var(--sbd-s4);
}

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

/* Desktop header. Must match the breakpoint in assets/js/navigation.js and
   the <noscript> rule in header.php. */
@media (min-width: 62em) {
	.sbd-menu-toggle {
		display: none;
	}

	/* Two rows: brand and search on the first, the full menu on the second.
	   The eight default menu items need about 830px, so they sit on one line
	   from this breakpoint up (the row is 928px wide at 992px and 1096px at
	   1366px). A longer menu wraps instead of overflowing the page. */
	.sbd-site-header .sbd-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--sbd-s5);
	}

	.sbd-header__inner {
		flex: 1 1 0;
		min-height: 5rem;
	}

	/* The panel wrapper dissolves so that its two children (menu and search)
	   can be placed independently in the header's flex layout. */
	.sbd-header__panel,
	.sbd-header__panel.is-open {
		display: contents;
	}

	.sbd-header__search {
		order: 2;
		flex: 0 1 17rem;
		min-width: 11rem;
		margin-top: 0;
	}

	.sbd-nav {
		order: 3;
		flex: 1 0 100%;
		min-width: 0;
		border-top: 1px solid var(--sbd-line);
	}

	.sbd-nav__list {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0 var(--sbd-s1);
		margin-inline: calc(-1 * var(--sbd-s3));
	}

	.sbd-nav__list a {
		position: relative;
		min-height: var(--sbd-tap);
		border-bottom: 0;
		padding: var(--sbd-s3) var(--sbd-s3);
		font-size: var(--sbd-text-sm);
		font-weight: 500;
		white-space: nowrap;
	}

	/* Thin clay line under the hovered and the current item. */
	.sbd-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: var(--sbd-s3);
		right: var(--sbd-s3);
		bottom: 0;
		height: 2px;
		background: var(--sbd-accent);
		opacity: 0;
	}

	.sbd-nav__list a:hover {
		color: var(--sbd-accent-hover);
	}

	.sbd-nav__list > li > a:hover::after {
		opacity: 0.45;
	}

	.sbd-nav .current-menu-item > a,
	.sbd-nav .current-menu-ancestor > a,
	.sbd-nav .current_page_item > a {
		color: var(--sbd-ink);
		font-weight: 700;
	}

	.sbd-nav__list > .current-menu-item > a::after,
	.sbd-nav__list > .current-menu-ancestor > a::after,
	.sbd-nav__list > .current_page_item > a::after {
		opacity: 1;
	}

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

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

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

	.sbd-nav__list .sub-menu a:hover {
		background: var(--sbd-paper-deep);
		border-radius: var(--sbd-radius-sm);
	}
}

@media (min-width: 75em) {
	.sbd-nav__list a {
		font-size: var(--sbd-text-base);
		padding-inline: var(--sbd-s4);
	}

	.sbd-nav__list > li > a::after {
		left: var(--sbd-s4);
		right: var(--sbd-s4);
	}

	.sbd-nav__list {
		margin-inline: calc(-1 * var(--sbd-s4));
	}
}

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

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

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

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

.sbd-required {
	color: var(--sbd-accent);
}

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%;
	min-height: var(--sbd-tap);
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line-strong);
	border-radius: var(--sbd-radius-sm);
	color: var(--sbd-ink);
	font: inherit;
	font-size: var(--sbd-text-base);
	padding: var(--sbd-s3);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sbd-focus);
}

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

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

/* Search field: one pill holding the input and the button. */
.sbd-search-form {
	display: flex;
	gap: var(--sbd-s2);
}

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

.sbd-search-form input[type="search"] {
	min-height: var(--sbd-tap);
	padding-block: var(--sbd-s2);
	padding-inline: var(--sbd-s4);
	border-radius: var(--sbd-radius-pill);
}

.sbd-search-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--sbd-tap);
	min-height: var(--sbd-tap);
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line-strong);
	border-radius: var(--sbd-radius-pill);
	color: var(--sbd-ink);
	cursor: pointer;
	padding: 0 var(--sbd-s3);
}

.sbd-search-form__submit:hover {
	background: var(--sbd-paper-deep);
	border-color: var(--sbd-ink);
	color: var(--sbd-ink);
}

.sbd-search-form__submit .sbd-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.sbd-button,
.sbd-button--primary,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sbd-s2);
	background: var(--sbd-accent);
	border: 1px solid var(--sbd-accent);
	border-radius: var(--sbd-radius-pill);
	color: var(--sbd-on-accent);
	cursor: pointer;
	font-family: var(--sbd-font-body);
	font-size: var(--sbd-text-base);
	font-weight: 600;
	line-height: 1.3;
	min-height: 3rem;
	padding: var(--sbd-s3) var(--sbd-s5);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sbd-button:hover,
.sbd-button:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background: var(--sbd-accent-hover);
	border-color: var(--sbd-accent-hover);
	color: var(--sbd-on-accent);
}

.sbd-button--secondary {
	background: transparent;
	border-color: var(--sbd-line-strong);
	color: var(--sbd-ink);
}

.sbd-button--secondary:hover,
.sbd-button--secondary:focus {
	background: var(--sbd-surface);
	border-color: var(--sbd-ink);
	color: var(--sbd-ink);
}

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

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

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

.sbd-eyebrow {
	display: inline-block;
	font-size: var(--sbd-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sbd-accent);
	text-decoration: none;
	margin-bottom: var(--sbd-s2);
}

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

.sbd-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sbd-s1);
	min-height: var(--sbd-tap);
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-pill);
	color: var(--sbd-ink);
	font-size: var(--sbd-text-sm);
	font-weight: 500;
	padding: var(--sbd-s2) var(--sbd-s4);
	text-decoration: none;
}

a.sbd-chip:hover {
	background: var(--sbd-second-soft);
	border-color: var(--sbd-sage-line);
	color: var(--sbd-ink);
}

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

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

.sbd-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sbd-s2);
}

.sbd-meta a {
	color: inherit;
}

.sbd-meta svg {
	flex: 0 0 auto;
	color: var(--sbd-sage);
}

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

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

/* One column on phones (image on top), two from 576px, three or four from
   992px. minmax(0, 1fr) keeps long titles from widening a column. */
.sbd-grid {
	display: grid;
	gap: var(--sbd-s5);
	grid-template-columns: minmax(0, 1fr);
}

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

@media (min-width: 62em) {
	.sbd-grid {
		gap: var(--sbd-s6);
	}

	.sbd-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

.sbd-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-lg);
	box-shadow: var(--sbd-shadow-sm);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sbd-card:hover {
	box-shadow: var(--sbd-shadow);
	transform: translateY(-2px);
}

.sbd-card__media {
	display: block;
	background: var(--sbd-paper-deep);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sbd-card__media img,
.sbd-card-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sbd-card:hover .sbd-card__media img {
	transform: scale(1.03);
}

/* Posts without a featured image get a quiet two-tone panel with an arch. */
.sbd-card__media--placeholder,
.sbd-card-row__media--placeholder {
	background:
		radial-gradient(ellipse 34% 60% at 50% 100%, var(--sbd-clay-pale) 0 99%, transparent 100%),
		linear-gradient(180deg, var(--sbd-sage-soft), var(--sbd-paper-deep));
}

.sbd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--sbd-s2);
	min-width: 0;
	padding: var(--sbd-s5);
}

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

.sbd-grid--4 .sbd-card__body {
	padding: var(--sbd-s4) var(--sbd-s4) var(--sbd-s5);
}

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

@media (min-width: 62em) {
	.sbd-grid--4 .sbd-card__title {
		font-size: 1.125rem;
	}
}

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

.sbd-card__title a:hover,
.sbd-card-row__title a:hover,
.sbd-steps__title a:hover {
	color: var(--sbd-accent);
	text-decoration: underline;
}

.sbd-card__excerpt {
	color: var(--sbd-ink-soft);
	font-size: var(--sbd-text-sm);
	line-height: var(--sbd-leading-normal);
	margin: 0;
}

.sbd-card__footer {
	margin-top: auto;
	padding-top: var(--sbd-s3);
	border-top: 1px solid var(--sbd-line);
}

.sbd-card__footer .sbd-meta {
	font-size: var(--sbd-text-xs);
}

/* Horizontal card (lists and search results); stacked on phones. */
.sbd-card-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbd-s4);
	padding-bottom: var(--sbd-s5);
	border-bottom: 1px solid var(--sbd-line);
}

.sbd-card-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

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

.sbd-card-row__media {
	display: block;
	background: var(--sbd-paper-deep);
	border-radius: var(--sbd-radius);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

@media (min-width: 36em) {
	.sbd-card-row__media {
		aspect-ratio: 4 / 3;
	}
}

/* min-width: 0 keeps long titles from blowing out the grid column. */
.sbd-card-row__body {
	min-width: 0;
}

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

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

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

/* Numbered path (Start Here): each step number sits in an arch. */
.sbd-steps {
	list-style: none;
	counter-reset: sbd-step;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbd-s4);
	margin: 0;
	padding: 0;
}

@media (min-width: 48em) {
	.sbd-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sbd-s5);
	}
}

.sbd-steps > li {
	counter-increment: sbd-step;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--sbd-s4);
	align-items: start;
	min-width: 0;
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-lg);
	box-shadow: var(--sbd-shadow-sm);
	padding: var(--sbd-s5) var(--sbd-s4);
}

.sbd-steps > li::before {
	content: counter(sbd-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 3.375rem;
	padding-top: 0.35rem;
	background: var(--sbd-forest);
	border-radius: var(--sbd-arch);
	color: #ffffff;
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-xl);
	font-weight: 700;
	line-height: 1;
}

.sbd-steps > li > div {
	min-width: 0;
}

/* Four across on wide screens, with the arch above the text. */
@media (min-width: 75em) {
	.sbd-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sbd-steps > li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sbd-s4);
		padding: var(--sbd-s5);
	}
}

.sbd-steps__title {
	font-size: var(--sbd-text-lg);
	line-height: 1.28;
	margin: 0 0 var(--sbd-s2);
}

.sbd-steps p {
	color: var(--sbd-ink-soft);
	font-size: var(--sbd-text-sm);
	margin: 0;
}

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

.sbd-hero {
	background: linear-gradient(180deg, var(--sbd-surface) 0%, var(--sbd-paper-deep) 100%);
	border-bottom: 1px solid var(--sbd-line);
	padding-block: var(--sbd-s7) var(--sbd-s8);
	overflow: hidden;
}

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

.sbd-hero__copy {
	min-width: 0;
}

@media (min-width: 48em) {
	.sbd-hero {
		padding-block: var(--sbd-s8) 0;
	}

	.sbd-hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--sbd-s7);
		align-items: end;
	}

	.sbd-hero__copy {
		align-self: center;
		padding-bottom: var(--sbd-s8);
	}
}

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

	.sbd-hero__inner {
		gap: var(--sbd-s9);
	}
}

.sbd-hero__title {
	font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-bottom: var(--sbd-s4);
	max-width: 15ch;
}

.sbd-hero__text {
	color: var(--sbd-ink-soft);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, var(--sbd-text-lg));
	line-height: var(--sbd-leading-normal);
	max-width: 46ch;
	margin-bottom: var(--sbd-s5);
}

.sbd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbd-s3);
}

/* Full-width buttons on the narrowest phones: easy to hit with a thumb. */
@media (max-width: 29.99em) {
	.sbd-hero__actions .sbd-button {
		flex: 1 1 100%;
	}
}

/* Decorative inline SVG (no image request, no JS). The arch stands on the
   bottom edge of the hero band. Hidden on phones to keep the first screen for
   the title and the buttons. */
.sbd-hero__figure {
	display: none;
	width: 100%;
	max-width: 25rem;
	margin-inline: auto;
}

@media (min-width: 48em) {
	.sbd-hero__figure {
		display: block;
	}
}

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

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

.sbd-topics > li {
	min-width: 0;
}

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

.sbd-topic:hover {
	box-shadow: var(--sbd-shadow);
	transform: translateY(-2px);
}

.sbd-topic__name {
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-lg);
	font-weight: 600;
	line-height: 1.25;
	color: var(--sbd-ink);
}

.sbd-topic:hover .sbd-topic__name {
	color: var(--sbd-accent);
}

.sbd-topic__desc {
	color: var(--sbd-ink-soft);
	font-size: var(--sbd-text-sm);
	line-height: var(--sbd-leading-normal);
}

.sbd-topic__count {
	margin-top: auto;
	padding-top: var(--sbd-s2);
	color: var(--sbd-ink-muted);
	font-size: var(--sbd-text-xs);
}

/* Closing call to action: a soft clay panel. */
.sbd-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbd-s5);
	align-items: center;
	background: var(--sbd-accent-soft);
	border-radius: var(--sbd-radius-lg);
	color: var(--sbd-ink-soft);
	padding: var(--sbd-s6) var(--sbd-s5);
}

@media (min-width: 48em) {
	.sbd-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--sbd-s7);
		padding: var(--sbd-s8);
	}
}

.sbd-cta__title {
	color: var(--sbd-ink);
	margin-bottom: var(--sbd-s3);
}

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

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

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

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

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

.sbd-breadcrumbs li + li::before {
	content: "/";
	color: var(--sbd-line-strong);
}

.sbd-breadcrumbs a {
	color: var(--sbd-ink-soft);
	text-decoration: underline;
	text-decoration-color: var(--sbd-line);
}

.sbd-breadcrumbs a:hover {
	color: var(--sbd-accent);
	text-decoration-color: currentColor;
}

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

/* Without a sidebar the article is a centered reading column: the text keeps
   a 68–72 character measure and the featured image sits wider above it. */
.single.sbd-no-sidebar .sbd-breadcrumbs,
.single.sbd-no-sidebar .sbd-post-nav,
.single.sbd-no-sidebar .sbd-comments,
.single.sbd-no-sidebar .sbd-article > .sbd-article__figure {
	max-width: var(--sbd-wide);
	margin-inline: auto;
}

.single.sbd-no-sidebar .sbd-article > * {
	max-width: var(--sbd-measure);
	margin-inline: auto;
}

.single.sbd-no-sidebar .sbd-article > .sbd-article__figure {
	max-width: var(--sbd-wide);
}

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

.sbd-article__title {
	margin-bottom: var(--sbd-s4);
	letter-spacing: -0.02em;
}

.sbd-article__summary {
	color: var(--sbd-ink-soft);
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-lg);
	line-height: 1.55;
	max-width: var(--sbd-measure);
	margin-bottom: var(--sbd-s5);
}

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

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

.sbd-article__figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--sbd-paper-deep);
	border-radius: var(--sbd-radius-lg);
}

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

/* Body text: 17px on phones, 18px from 576px, generous line height. */
.sbd-content {
	font-size: var(--sbd-text-md);
	line-height: var(--sbd-leading-relaxed);
	min-width: 0;
}

@media (min-width: 36em) {
	.sbd-content {
		font-size: 1.125rem;
	}
}

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

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

.sbd-content p,
.sbd-content ul,
.sbd-content ol {
	margin-bottom: var(--sbd-s5);
}

.sbd-content h2 {
	margin-top: var(--sbd-s8);
	padding-top: var(--sbd-s5);
	border-top: 1px solid var(--sbd-line);
}

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

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

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

.sbd-content ul,
.sbd-content ol {
	margin-top: 0;
	padding-left: 1.4em;
}

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

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

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

/* Ordered lists are the steps of a guide: serif numbers and room to breathe. */
.sbd-content ol {
	padding-left: 1.6em;
}

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

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

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

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

.sbd-content img {
	border-radius: var(--sbd-radius);
	background-color: var(--sbd-paper-deep);
}

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

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

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

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

.sbd-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sbd-text-sm);
	line-height: 1.45;
}

/* Below this width the columns would be too cramped to read, so the table
   keeps its width and the wrapper scrolls sideways instead. */
.sbd-table-wrap table,
.wp-block-table table {
	min-width: 30rem;
	margin: 0;
}

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

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

.sbd-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
	background: var(--sbd-paper);
}

.sbd-content thead th,
.wp-block-table thead th {
	background: var(--sbd-paper-deep);
	border-bottom: 1px solid var(--sbd-line);
	color: var(--sbd-ink);
	font-size: var(--sbd-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

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

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

/* Callouts — used in article content and available in the block editor */
.sbd-callout {
	position: relative;
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius);
	padding: var(--sbd-s5);
	margin-block: var(--sbd-s6);
	font-size: var(--sbd-text-md);
	line-height: var(--sbd-leading-normal);
}

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

.sbd-content .sbd-callout p {
	margin-bottom: var(--sbd-s3);
}

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

.sbd-callout__title {
	display: flex;
	align-items: center;
	gap: var(--sbd-s2);
	font-size: var(--sbd-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sbd-ink-soft);
	margin-bottom: var(--sbd-s2);
}

/* Small shape before the title: an arch for tips, a triangle for safety. */
.sbd-callout__title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.8rem;
	border-radius: 999px 999px 2px 2px;
	background: currentColor;
}

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

.sbd-callout--tip .sbd-callout__title {
	color: var(--sbd-sage-deep);
}

.sbd-callout--warning {
	background: var(--sbd-accent-soft);
	border-color: #e9cdb9;
}

.sbd-callout--warning .sbd-callout__title {
	color: var(--sbd-accent-hover);
}

.sbd-callout--warning .sbd-callout__title::before {
	width: 0;
	height: 0;
	border-radius: 0;
	background: none;
	border-left: 0.42rem solid transparent;
	border-right: 0.42rem solid transparent;
	border-bottom: 0.72rem solid currentColor;
}

/* "At a glance" card (difficulty, time, best for, renter friendly, what you
   need) */
.sbd-tutorial-facts {
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-lg);
	box-shadow: var(--sbd-shadow-sm);
	padding: var(--sbd-s5);
	margin-bottom: var(--sbd-s6);
}

.sbd-tutorial-facts__title,
.sbd-toc__title {
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-lg);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--sbd-ink);
	margin: 0 0 var(--sbd-s4);
}

/* The values are short phrases, so the facts sit one per row on phones and two per row above that. */
.sbd-facts {
	display: grid;
	gap: var(--sbd-s4);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: 0;
}

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

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

.sbd-facts__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.625rem;
	padding-top: 0.2rem;
	background: var(--sbd-sage-soft);
	border-radius: var(--sbd-arch);
	color: var(--sbd-sage-deep);
}

.sbd-facts__icon .sbd-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.sbd-facts__label {
	display: block;
	font-family: var(--sbd-font-body);
	font-size: var(--sbd-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: var(--sbd-leading-snug);
	text-transform: uppercase;
	color: var(--sbd-ink-muted);
	margin: 0;
}

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

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

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

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

.sbd-materials__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sbd-s3);
	min-width: 0;
	margin: 0;
}

.sbd-materials__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.45rem;
	height: 0.45rem;
	margin-top: 0.5em;
	background: var(--sbd-sage);
	border-radius: 50%;
}

/* Table of contents */
.sbd-toc {
	background: var(--sbd-paper-deep);
	border-radius: var(--sbd-radius-lg);
	padding: var(--sbd-s5);
	margin-bottom: var(--sbd-s6);
}

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

.sbd-toc ol {
	counter-reset: sbd-toc;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--sbd-text-base);
	line-height: var(--sbd-leading-snug);
}

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

.sbd-toc li + li {
	margin-top: 0;
}

.sbd-toc a {
	display: inline-block;
	padding-block: 0.4rem;
	color: var(--sbd-ink);
	text-decoration: underline;
	text-decoration-color: var(--sbd-line-strong);
}

.sbd-toc > ol > li > a::before {
	content: counter(sbd-toc) ". ";
	color: var(--sbd-accent);
	font-family: var(--sbd-font-head);
	font-weight: 700;
}

.sbd-toc a:hover {
	color: var(--sbd-accent-hover);
	text-decoration-color: currentColor;
}

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

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

/* FAQ */
.sbd-faq {
	margin-top: var(--sbd-s8);
	padding-top: var(--sbd-s5);
	border-top: 1px solid var(--sbd-line);
}

.sbd-faq > h2 {
	margin-bottom: var(--sbd-s4);
}

.sbd-faq__item {
	padding: var(--sbd-s4) 0;
	border-bottom: 1px solid var(--sbd-line);
}

.sbd-faq__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sbd-faq__question {
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-lg);
	font-weight: 600;
	margin: 0 0 var(--sbd-s2);
}

.sbd-faq__answer {
	color: var(--sbd-ink-soft);
	max-width: var(--sbd-measure);
}

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

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

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

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

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

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

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

.sbd-post-nav__link {
	display: block;
	min-width: 0;
	height: 100%;
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-lg);
	padding: var(--sbd-s4) var(--sbd-s5);
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.sbd-post-nav__link:hover {
	box-shadow: var(--sbd-shadow);
}

.sbd-post-nav__direction {
	display: block;
	font-size: var(--sbd-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sbd-ink-muted);
	margin-bottom: var(--sbd-s2);
}

.sbd-post-nav__title {
	display: block;
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-md);
	font-weight: 600;
	color: var(--sbd-ink);
	line-height: var(--sbd-leading-snug);
}

.sbd-post-nav__link:hover .sbd-post-nav__title {
	color: var(--sbd-accent);
}

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

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

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

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

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

.sbd-widget {
	min-width: 0;
	background: var(--sbd-surface);
	border: 1px solid var(--sbd-line);
	border-radius: var(--sbd-radius-lg);
	padding: var(--sbd-s5);
	font-size: var(--sbd-text-base);
}

.sbd-widget__title,
.sbd-widget .widget-title {
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-lg);
	font-weight: 600;
	color: var(--sbd-ink);
	margin: 0 0 var(--sbd-s3);
}

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

.sbd-widget li + li {
	border-top: 1px solid var(--sbd-line);
}

.sbd-widget li a {
	display: inline-block;
	padding-block: var(--sbd-s3);
}

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

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

.sbd-widget .children,
.sbd-widget .sub-menu {
	padding-left: var(--sbd-s4);
}

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

.sbd-archive-header {
	margin-bottom: var(--sbd-s7);
	padding-bottom: var(--sbd-s5);
	border-bottom: 1px solid var(--sbd-line);
}

.sbd-archive-header__title {
	margin-bottom: var(--sbd-s3);
	letter-spacing: -0.02em;
}

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

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

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

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

.sbd-pagination {
	margin-top: var(--sbd-s8);
	padding-top: var(--sbd-s5);
	border-top: 1px solid var(--sbd-line);
}

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

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

.sbd-pagination li {
	margin: 0;
}

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

.sbd-pagination a.page-numbers:hover {
	background: var(--sbd-paper-deep);
	border-color: var(--sbd-ink);
	color: var(--sbd-ink);
}

.sbd-pagination span.page-numbers.current {
	background: var(--sbd-forest);
	border-color: var(--sbd-forest);
	color: #ffffff;
}

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

/* Search */
.sbd-search-intro {
	margin-bottom: var(--sbd-s6);
	padding-bottom: var(--sbd-s5);
	border-bottom: 1px solid var(--sbd-line);
}

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

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

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

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

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

.sbd-no-results__suggestions li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.45rem;
	height: 0.45rem;
	background: var(--sbd-sage);
	border-radius: 50%;
}

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

/* The number stands inside an arch, like a doorway onto an empty room. */
.sbd-error-404__code {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 11rem;
	height: 12rem;
	margin: 0 0 var(--sbd-s5);
	padding-bottom: var(--sbd-s5);
	background: var(--sbd-sage-soft);
	border-radius: 999px 999px var(--sbd-radius) var(--sbd-radius);
	color: var(--sbd-sage-deep);
	font-family: var(--sbd-font-head);
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
}

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

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

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

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

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

.sbd-page__header {
	margin-bottom: var(--sbd-s6);
	padding-bottom: var(--sbd-s5);
	border-bottom: 1px solid var(--sbd-line);
}

.sbd-page__header .sbd-page__title {
	margin-bottom: 0;
	letter-spacing: -0.02em;
}

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

.sbd-form-notice {
	border-radius: var(--sbd-radius);
	padding: var(--sbd-s4) var(--sbd-s5);
	margin-bottom: var(--sbd-s5);
	border: 1px solid;
}

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

.sbd-form-notice--success {
	background: #eef7ef;
	border-color: #9cc5a1;
	color: #1f5128;
}

.sbd-form-notice--error {
	background: #fdeeec;
	border-color: #e3a79e;
	color: #7d2418;
}

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

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

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

.sbd-form input[aria-invalid="true"],
.sbd-form textarea[aria-invalid="true"] {
	border-color: #b3372a;
	border-width: 2px;
}

.sbd-field__error {
	display: block;
	margin-top: var(--sbd-s2);
	color: #8c2b20;
	font-size: var(--sbd-text-sm);
	font-weight: 700;
}

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

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

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

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

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

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

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

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

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

.sbd-comments .reply {
	font-size: var(--sbd-text-sm);
	font-weight: 700;
}

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

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

/* --------------------------------------------------------------------------
   17. Ad slots (empty and disabled by default)
   -------------------------------------------------------------------------- */

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

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

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

/* --------------------------------------------------------------------------
   18. Footer — deep green band
   -------------------------------------------------------------------------- */

.sbd-site-footer {
	background: var(--sbd-footer-bg);
	color: var(--sbd-footer-text);
	margin-top: auto;
	padding-block: var(--sbd-s8) var(--sbd-s5);
}

.sbd-site-footer :focus-visible {
	outline-color: var(--sbd-footer-hover);
}

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

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

.sbd-footer__about p {
	color: var(--sbd-footer-text);
	font-size: var(--sbd-text-base);
	max-width: 42ch;
	margin-bottom: 0;
}

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

.sbd-footer__heading {
	font-family: var(--sbd-font-body);
	font-size: var(--sbd-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sbd-footer-muted);
	margin: 0 0 var(--sbd-s2);
}

.sbd-footer__about .sbd-footer__heading {
	font-family: var(--sbd-font-head);
	font-size: var(--sbd-text-xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #ffffff;
	margin-bottom: var(--sbd-s3);
}

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

/* Each link is a 44px tap target. */
.sbd-footer__menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--sbd-tap);
	color: #ffffff;
	text-decoration: none;
}

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

.sbd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbd-s3);
	padding-top: var(--sbd-s5);
	border-top: 1px solid var(--sbd-footer-line);
	color: var(--sbd-footer-muted);
	font-size: var(--sbd-text-sm);
}

.sbd-footer__bottom p {
	margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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