/* =====================================================
 * SAB page layout: the title band and page sections
 *
 * Pages are built from core blocks carrying these classes (Group blocks with
 * "sab-hero" or "sab-section", plus a colour modifier). Those pages use
 * Astra's full-width layout, so each band spans the window and its content
 * sits on one row (--sab-row-width). Spacing, widths and heading sizes are
 * tokens in style.css :root; nothing here is set per page.
 * ===================================================== */

/* --- Title band: Masthead-Homepage.jpg on navy, white centred title. The
 * shop's masthead (templates in woocommerce/) shares it. --- */

/* ".entry-content >" matches Astra's default block padding rule
 * (.entry-content > .wp-block-group), which this replaces. */
.sab-hero,
.entry-content > .sab-hero,
.sab-shop-masthead {
	background: var(--sab-navy) url("/wp-content/uploads/2026/02/Masthead-Homepage.jpg") no-repeat center center;
	padding: var(--sab-hero-space) 0;
	text-align: center;
	color: #fff;
}

.sab-hero > * {
	width: var(--sab-row-width);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* !important on the font: the Customizer's h1–h3 rule sets "feedstore" 100 with
   !important; this is the face the MaxiBlocks titles used. */
.sab-hero h1,
.sab-shop-masthead h1,
.sab-shop-masthead .page-title {
	font-family: "Feed Store", Georgia, serif !important;
	font-weight: normal !important;
	font-size: var(--sab-h1);
	line-height: var(--sab-h1-line);
	color: #fff !important;
	text-align: center; /* set here too: the block editor's Cover block aligns its text left */
	margin: 0 auto;
}

/* The lede under the title: Roboto Condensed, as on the MaxiBlocks pages. */
.sab-hero p,
.sab-shop-lede,
.sab-shop-masthead .term-description {
	font-family: "Roboto Condensed", Roboto, sans-serif;
	font-size: var(--sab-text);
	line-height: var(--sab-text-line);
	color: #fff;
	text-align: center;
	margin: 0.75rem auto 0;
}

/* A lede between two short rules (SAB's title-band motif). */
.sab-hero .sab-hero__lede,
.sab-shop-masthead .sab-hero__lede {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.sab-hero .sab-hero__lede::before,
.sab-hero .sab-hero__lede::after,
.sab-shop-masthead .sab-hero__lede::before,
.sab-shop-masthead .sab-hero__lede::after {
	content: "";
	flex: 0 0 30px;
	height: 2px;
	background: var(--sab-rule);
}

/* --- Sections: a band of the page; its blocks sit on the content row. --- */

.sab-section,
.entry-content > .sab-section {
	padding: var(--sab-section-space) 0;
}

.sab-section > * {
	width: var(--sab-row-width);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Running text: the reading width, centred. */
.sab-section--narrow > * {
	width: min(var(--sab-text-width), var(--sab-row-width));
}

.sab-section > :first-child {
	margin-top: 0;
}

.sab-section > :last-child,
.sab-section .wp-block-column > :last-child {
	margin-bottom: 0;
}

.sab-section--cream {
	background: var(--sab-cream);
}

.sab-section--slate {
	background: var(--sab-slate);
}

.sab-section--navy {
	background: var(--sab-navy);
}

.sab-section--black {
	background: var(--sab-black);
}

/* --- Type: the MaxiBlocks pages' "light" style card (tokens in style.css).
 * Only page blocks (core headings, and paragraphs and lists placed in a
 * section, column or group), so shortcode output such as event cards and
 * forms keeps its own styles. Top and bottom margins only: the row's auto
 * side margins stay. --- */

.sab-section .wp-block-heading {
	color: var(--sab-dark);
	margin-top: 0;
	margin-bottom: 20px;
}

/* Every heading block in Feed Store, as the MaxiBlocks text headings were. */
.sab-section .wp-block-heading {
	font-family: "Feed Store", Georgia, serif !important;
	font-weight: normal !important;
}

.sab-section h2.wp-block-heading,
.sab-section h1.wp-block-heading {
	font-size: var(--sab-h2);
	line-height: var(--sab-h2-line);
}

.sab-section h3.wp-block-heading {
	font-size: var(--sab-h3);
	line-height: var(--sab-h3-line);
}

.sab-section :is(h4, h5, h6).wp-block-heading {
	font-size: var(--sab-h5);
	line-height: var(--sab-h5-line);
}

/* Paragraphs and lists placed in the section or in its columns and groups.
   Kept low in specificity (:where), so the modifiers below win. */
.sab-section > p,
.sab-section :where(.wp-block-column, .wp-block-group) > p,
.sab-section .wp-block-list li {
	font-size: var(--sab-text);
	line-height: var(--sab-text-line);
	color: var(--sab-muted);
}

.sab-section > p,
.sab-section :where(.wp-block-column, .wp-block-group) > p {
	margin-top: 0;
	margin-bottom: 20px;
}

/* Lists: on the row (Astra's list margin would push them to the page edge),
   indented as before. */
.sab-section .wp-block-list {
	margin-top: 0;
	margin-bottom: 20px;
	padding-left: 2.5em;
}

.sab-section > .wp-block-list {
	margin-left: auto;
	margin-right: auto;
}

/* Empty paragraphs WordPress wraps around shortcodes (forms, lists) take no space. */
.sab-section p:empty {
	display: none;
}

/* Text in the dark colour: on a paragraph, or on a column, group or section
   for all its text. */
.sab-section p.sab-text-dark,
.sab-section .sab-text-dark > p,
.sab-section .sab-text-dark li,
.sab-section.sab-text-dark > p,
.sab-section.sab-text-dark :where(.wp-block-column, .wp-block-group) > p {
	color: var(--sab-dark);
}

/* Team bios ("sab-team" on the section): the bio size of the book pages'
   "About the …" (--sab-bio); the note under a bio keeps its own. */
.sab-section.sab-team .wp-block-column > p:not(.sab-note) {
	font-size: var(--sab-bio);
	line-height: 1.6;
}

/* A person's role under their name (a small heading in slate). */
.sab-section .wp-block-heading.sab-role {
	color: var(--sab-slate);
}

/* A larger opening line. */
.sab-section p.sab-callout {
	margin-bottom: 40px;
	font-size: var(--sab-callout);
	line-height: var(--sab-callout-line);
}

.sab-section > p.sab-callout:last-child {
	margin-bottom: 0;
}

/* Bold words in running text take the heading colour. */
.sab-section :is(p, li) strong {
	color: var(--sab-dark);
}

/* A panel set off from the page (a form beside text): light blue, or cream
   with rounded corners (as Tour's and Start's were). */
.sab-section .sab-panel {
	padding: 25px;
	background: var(--sab-panel);
}

.sab-section .sab-panel--cream {
	border-radius: 10px;
	background: var(--sab-cream);
}

/* Panel extras: a cream line along the top edge; an icon above the heading. */
.sab-section .sab-panel--accent {
	border-top: 4px solid var(--sab-cream);
}

.sab-section .sab-panel .sab-panel__icon {
	margin: 0 0 12px;
}

.sab-section .sab-panel .sab-panel__icon img {
	width: 72px;
	height: auto;
}

/* Icon beside the label, as one line above the heading (a grid on the
   panel; everything after them runs full width). */
.sab-section .sab-panel--icon-side {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 14px;
	align-content: start;
}

.sab-section .sab-panel--icon-side > * {
	grid-column: 1 / -1;
}

.sab-section .sab-panel--icon-side > .sab-panel__icon {
	grid-column: 1;
	margin: 0 0 16px;
}

.sab-section .sab-panel--icon-side > .sab-panel__icon img {
	width: 56px;
}

.sab-section .sab-panel--icon-side > .sab-kicker {
	grid-column: 2;
	align-self: center;
	margin: 0 0 16px;
}

/* A small label above a heading. */
.sab-section p.sab-kicker {
	margin-bottom: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sab-slate);
}



/* Dark bands: white text (after the type rules, which set the grey). */
:is(.sab-section--slate, .sab-section--navy, .sab-section--black) {
	color: #fff;
}

:is(.sab-section--slate, .sab-section--navy, .sab-section--black) :is(h1, h2, h3, h4, h5, h6, p, li, a:not(.wp-block-button__link)) {
	color: #fff;
}

.sab-section .wp-block-columns {
	margin-bottom: 0;
}

.sab-section .wp-block-image img {
	height: auto;
}

/* --- Buttons: one style. Navy pill; outline style is the outlined pill
 * (as the homepage's "Learn more"); on dark bands, cream. --- */

.sab-hero .wp-block-button .wp-block-button__link,
.sab-section .wp-block-button .wp-block-button__link {
	display: inline-block;
	padding: var(--sab-button-padding);
	border: 1px solid var(--sab-navy);
	border-radius: var(--sab-button-radius);
	background: var(--sab-navy);
	color: #fff;
	font-size: var(--sab-button-size);
	font-weight: var(--sab-button-weight);
	letter-spacing: var(--sab-button-tracking);
	line-height: var(--sab-button-line);
	text-decoration: none;
	box-shadow: none;                                   /* Astra adds a faint one; no button has a shadow */
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Outline: the same size as the filled pill (Astra's outline style has a
   2px border and its own padding, on a five-class selector). */
.sab-section .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	padding: var(--sab-button-padding);
	border-width: 1px;
	border-color: var(--sab-navy);
	background: transparent;
	color: var(--sab-navy);
	font-size: var(--sab-button-size);
	line-height: var(--sab-button-line);
}

.sab-hero .wp-block-button .wp-block-button__link:is(:hover, :focus-visible),
.sab-section .wp-block-button .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--sab-cream);
	border-color: var(--sab-cream);
	color: var(--sab-dark);
}

:is(.sab-hero, .sab-section--slate, .sab-section--navy, .sab-section--black) .wp-block-button .wp-block-button__link {
	background: var(--sab-cream);
	border-color: var(--sab-cream);
	color: var(--sab-dark);
}

:is(.sab-hero, .sab-section--slate, .sab-section--navy, .sab-section--black) .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

:is(.sab-hero, .sab-section--slate, .sab-section--navy, .sab-section--black) .wp-block-button .wp-block-button__link:is(:hover, :focus-visible) {
	background: #fff;
	border-color: #fff;
	color: var(--sab-dark);
}

/* --- Columns: two-column splits by class (core Columns block plus
 * "sab-split" for one third / two thirds, "sab-split--wide" for two thirds /
 * one third, "sab-split--quarter" for one quarter / three quarters; equal
 * columns need no class), so no widths are typed into pages.
 * The same flex-basis WordPress writes for a column width; columns stack at
 * core's 781px. --- */

@media (min-width: 782px) {
	.sab-section .wp-block-columns:is(.sab-split, .sab-split--wide, .sab-split--quarter) > .wp-block-column {
		flex-grow: 0;
	}

	/* One quarter / three quarters (a logo beside text). */
	.sab-section .wp-block-columns.sab-split--quarter > .wp-block-column:first-child {
		flex-basis: 25%;
	}

	.sab-section .wp-block-columns.sab-split--quarter > .wp-block-column:last-child {
		flex-basis: 75%;
	}

	.sab-section .wp-block-columns.sab-split > .wp-block-column:first-child,
	.sab-section .wp-block-columns.sab-split--wide > .wp-block-column:last-child {
		flex-basis: 33.33%;
	}

	.sab-section .wp-block-columns.sab-split > .wp-block-column:last-child,
	.sab-section .wp-block-columns.sab-split--wide > .wp-block-column:first-child {
		flex-basis: 66.66%;
	}
}

/* A logo in a split ("sab-logo" on its Image block): capped and centred once
   the columns stack, so it doesn't fill a phone's width. "figure" outranks
   the boxed and padded sections' image margins (project pages). */
@media (max-width: 781px) {
	.sab-section figure.wp-block-image.sab-logo {
		max-width: 180px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Space after a row of columns when more follows (text after the logo row,
   the next team member), and below a heading above columns. */
.sab-section > .wp-block-columns:not(:last-child) {
	margin-bottom: calc(var(--sab-gap) * 1.5);
}

.sab-section > h2 + .wp-block-columns {
	margin-top: var(--sab-gap);
}

/* --- A short note set off from the text (light blue box, dark text). --- */

.sab-section p.sab-note {
	padding: 30px;
	background: var(--sab-panel);
	color: var(--sab-dark);
}

.sab-section p.sab-note a {
	text-decoration: underline;
}

/* A form straight in a section (Contact): 24px more above it, the space it
   had before the MaxiBlocks cleanup removed the empty paragraph round its
   shortcode (Kevin, 2026-10-25). Forms in panels keep the panel's spacing. */
.sab-section > .fluentform:first-child {
	margin-top: 24px;
}

/* Forms in a panel: compact (smaller labels, slimmer fields, tighter rows),
   starting right under the text above (the intro's 20px; Fluent Forms adds
   24px of its own), with clear space above the button. */
.sab-section .sab-panel .fluentform {
	margin-top: 0;
}

.sab-section .sab-panel .fluentform .ff-el-group:has(> .ff-btn-submit) {
	margin-top: 22px;
}

.sab-section .sab-panel .fluentform .ff-el-group {
	margin-bottom: 10px;
}

.sab-section .sab-panel .fluentform .ff-el-input--label {
	margin-bottom: 3px;
}

.sab-section .sab-panel .fluentform .ff-el-input--label label {
	font-size: 13px;
	line-height: 1.4;
}

.sab-section .sab-panel .fluentform .ff-el-form-control {
	padding: 5px 10px;
	font-size: 15px;
	line-height: 1.4;
	min-height: 0;
}

.sab-section .sab-panel .fluentform :is(input, select).ff-el-form-control {
	height: 34px;
}

.sab-section .sab-panel .fluentform .ff-t-container {
	gap: 12px;
}

.sab-section .sab-panel .fluentform .ff-t-container .ff-t-cell {
	padding: 0;
}

/* Contact and Start a project (as on MMP): a guide column (kicker, heading,
   a list with thin rules, link notes) beside the form in a cream panel
   (sab-split--5-7). The form here is roomier than in other panels: small
   capital labels, taller rounded fields. */
.sab-section .sab-contact-list {
	list-style: none;
	margin: 0 0 0;
	padding: 0;
	border-top: 1px solid var(--sab-border-light);
}

.sab-section .sab-contact-list li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 26px;
	border-bottom: 1px solid var(--sab-border-light);
	color: var(--sab-muted);
	line-height: 1.6;
}

.sab-section .sab-contact-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55em;
	width: 12px;
	height: 2px;
	background: var(--sab-slate);
}

.sab-section p.sab-contact-note {
	margin: 24px 0 0;
	color: var(--sab-muted);
}

.sab-section p.sab-contact-note a {
	color: var(--sab-slate);
	font-weight: 700;
	text-underline-offset: 3px;
}

.sab-section .sab-panel.sab-contact-panel {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	--fluentform-input-select-height: var(--sab-field-height);
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-group {
	margin-bottom: 22px;
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-input--label {
	margin-bottom: 8px;
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-input--label label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sab-muted);
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-form-control {
	height: var(--sab-field-height);
	padding: 0 16px;
	font-size: 0.95rem;
	color: var(--sab-dark);
	background-color: #fff;
	border: 1px solid var(--sab-border);
	border-radius: var(--sab-field-radius);
	box-shadow: none;
}

.sab-section .sab-panel.sab-contact-panel .fluentform textarea.ff-el-form-control {
	height: auto;
	min-height: 160px;
	padding: 14px 16px;
	line-height: 1.6;
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-form-control:focus {
	outline: 2px solid var(--sab-dark);
	outline-offset: 1px;
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-help-message {
	margin-top: 6px;
	font-size: 0.85rem;
	font-style: normal;
	color: var(--sab-muted);
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-form-check-label {
	color: var(--sab-dark);
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-form-check-input {
	accent-color: var(--sab-dark);
}

.sab-section .sab-panel.sab-contact-panel .fluentform .ff-el-group:has(> .ff-btn-submit) {
	margin-top: 6px;
}

/* After sending: the form is replaced by this message. */
.sab-section .sab-panel.sab-contact-panel .ff-message-success {
	margin: 0;
	padding: 18px 22px;
	background: #fff;
	border: 0;
	border-left: 3px solid var(--sab-dark);
	border-radius: 0;
	box-shadow: none;
	color: var(--sab-dark);
}

/* Choices as tiles (inc/forms.php): Contact's "What can we help with?" as a
   2 x 2 grid of cards, the first a link to /start/. The radio itself is
   hidden inside its tile but still takes focus and keys; the tile is its
   positioning box, or the radio sits at the top of the page and clicking a
   tile scrolls up to it. */
.fluentform .sab-tiles .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.fluentform .sab-tiles .ff-el-form-check {
	margin: 0;
}

.fluentform .sab-tiles .ff-el-form-check-label {
	position: relative;
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 16px 18px;
	font-size: 0.875rem; /* Fluent's size for choices; the link tile would take the page's */
	background: #fff;
	border: 1px solid var(--sab-border);
	border-radius: var(--sab-tile-radius);
	cursor: pointer;
}

.fluentform .sab-tiles .ff-el-form-check-input {
	position: absolute;
	top: 50%;
	left: 18px;
	margin: 0;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fluentform .sab-tile-link .ff-el-form-check-label {
	background: var(--sab-frame);
	text-decoration: none;
}

.fluentform .sab-tiles .ff-el-form-check-label:hover {
	border-color: var(--sab-dark);
}

.fluentform .sab-tiles .ff-el-form-check-label:has(input:checked) {
	border-color: var(--sab-dark);
	box-shadow: inset 0 0 0 1px var(--sab-dark);
}

.fluentform .sab-tiles .ff-el-form-check-label:has(input:focus-visible),
.fluentform .sab-tile-link .ff-el-form-check-label:focus-visible {
	outline: 2px solid var(--sab-dark);
	outline-offset: 2px;
}

.sab-tile__name {
	display: block;
	font-weight: 700;
	color: var(--sab-dark);
	line-height: 1.3;
}

.sab-tile__line {
	display: block;
	margin-top: 4px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--sab-muted);
}

@media (max-width: 544px) {
	.fluentform .sab-tiles .ff-el-input--content {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Pieces first used on Our process (MaxiBlocks values kept). --- */

/* Bold words on dark bands stay the band's text colour. */
:is(.sab-section--slate, .sab-section--navy, .sab-section--black) :is(p, li) strong {
	color: inherit;
}

/* Bold italic words in Lato (the page's bold italic). */
.sab-section :is(strong > em, em > strong) {
	font-family: Lato, Roboto, sans-serif;
}

/* A label above a heading, larger than the kicker: bold slate. */
.sab-section p.sab-label {
	margin-bottom: 6px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--sab-slate);
}

/* Large centred closing lines. */
.sab-section p.sab-statement {
	font-size: 32px;
	line-height: 1.3;
}

/* A heading kept narrow beside wider text. */
.sab-section .wp-block-heading.sab-heading--narrow {
	max-width: 410px;
}

/* Cream heading on a dark band; cream links in a column. */
.sab-section .wp-block-heading.sab-text-cream {
	color: var(--sab-cream);
}

.sab-section .sab-links-cream a {
	color: var(--sab-cream);
}

/* Cream band with the archive collage behind, faint. */
.sab-section--collage {
	position: relative;
}

.sab-section--collage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("/wp-content/uploads/2026/05/collage-graphic.png") no-repeat center center;
	opacity: 0.08;
	pointer-events: none;
}

.sab-section--collage > * {
	position: relative;
}

/* A round photo running off the left edge of the band, text in the right
   half of the row; on phones the photo sits above the text. */
.sab-photo-bleed {
	overflow: hidden;
}

.sab-section .wp-block-image.sab-photo-bleed__photo {
	margin-top: 0;
	margin-bottom: 0;
}

.sab-photo-bleed__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

@media (min-width: 768px) {
	.sab-photo-bleed {
		display: flex;
		align-items: center;
		min-height: calc(44vw + 2 * var(--sab-section-space));
	}

	.sab-section .wp-block-image.sab-photo-bleed__photo {
		position: absolute;
		top: 50%;
		left: -4.5%;
		width: 44%;
		transform: translateY(-50%);
	}

	/* The text starts 51.5% along the row (a percentage padding would be
	   of the band's width, so it is worked out from the row's). */
	.sab-photo-bleed__text {
		padding-left: calc(var(--sab-row-width) * 0.515);
	}
}

@media (min-width: 768px) and (max-width: 1366px) {
	.sab-photo-bleed__text {
		padding-left: calc(var(--sab-row-width) * 0.48);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sab-photo-bleed {
		min-height: calc(60vw + 2 * var(--sab-section-space));
	}

	.sab-section .wp-block-image.sab-photo-bleed__photo {
		left: -15%;
		width: 60%;
	}
}

@media (max-width: 767px) {
	.sab-section .wp-block-image.sab-photo-bleed__photo {
		margin: 0 auto 50px;
	}
}

/* Points with an icon: two across, icon beside the title and text (above
   them on tablets; one across on small phones). */
.sab-section .sab-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 3%;
	margin-top: 30px;
}

/* No block-gap margins inside the grids (they would offset grid items). */
.sab-section .sab-features > *,
.sab-section .sab-feature > * {
	margin-top: 0;
}

.sab-section .sab-feature {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 30px;
	align-content: start;
}

.sab-section .sab-feature > * {
	grid-column: 2;
}

.sab-section .wp-block-image.sab-feature__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}

.sab-section .sab-feature__icon img {
	display: block;
	width: 64px;
	height: auto;
}

.sab-section .sab-feature > p.sab-feature__title {
	margin-bottom: 8px;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 700;
}

.sab-section .sab-feature > p.sab-feature__text {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.sab-section .sab-feature {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.sab-section .sab-feature > *,
	.sab-section .wp-block-image.sab-feature__icon {
		grid-column: 1;
		grid-row: auto;
	}

	.sab-section .sab-feature > p.sab-feature__title {
		margin-bottom: 3px;
	}

	.sab-section .wp-block-heading.sab-heading--narrow {
		max-width: 540px;
	}
}

@media (max-width: 767px) {
	.sab-section .sab-features {
		row-gap: 25px;
	}

	.sab-section .wp-block-heading.sab-heading--narrow {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.sab-section .sab-features {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}
}

/* Columns that stack on tablets already (core stacks at 781px). */
@media (max-width: 1024px) {
	.sab-section .wp-block-columns.sab-stack-tablet {
		flex-wrap: wrap !important;
	}

	.sab-section .wp-block-columns.sab-stack-tablet > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Five twelfths / seven twelfths (text beside a large photo); halves on tablets. */
@media (min-width: 782px) {
	.sab-section .wp-block-columns.sab-split--5-7 > .wp-block-column {
		flex-grow: 0;
	}

	.sab-section .wp-block-columns.sab-split--5-7 > .wp-block-column:first-child {
		flex-basis: 41.5%;
	}

	.sab-section .wp-block-columns.sab-split--5-7 > .wp-block-column:last-child {
		flex-basis: 58.5%;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.sab-section .wp-block-columns.sab-split--5-7 > .wp-block-column {
		flex-basis: 50% !important;
	}
}

/* A cream circle behind the top right of a column (a photo on a dark band). */
.sab-section:has(.sab-circle-accent) {
	overflow: hidden;
}

.sab-section .sab-circle-accent {
	position: relative;
}

.sab-section .sab-circle-accent::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -172px;
	width: 432px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sab-cream);
}

.sab-section .sab-circle-accent > * {
	position: relative;
}

@media (max-width: 1366px) {
	.sab-section .sab-circle-accent::before {
		right: -150px;
		width: 350px;
	}
}

@media (max-width: 1024px) {
	.sab-section .sab-circle-accent::before {
		top: -100px;
		width: 250px;
	}
}

@media (max-width: 767px) {
	.sab-section .sab-circle-accent::before {
		top: auto;
		right: -80px;
		bottom: -100px;
		width: 200px;
	}
}

/* --- Pieces first used on How it works (MaxiBlocks values kept). --- */

/* Small labels: "Track 1" (24px), "Regional Partners" (14px); condensed face. */
.sab-section p.sab-tag {
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 26px;
}

.sab-section p.sab-small {
	font-size: 14px;
	line-height: 26px;
}

.sab-section .sab-condensed {
	font-family: "Roboto Condensed", Roboto, sans-serif;
}

.sab-section p.sab-text-cream {
	color: var(--sab-cream);
}

/* Big sans headings (Roboto bold, not Feed Store): xl on a band's title,
   lg above a short section. */
.sab-section .wp-block-heading:is(.sab-heading--xl, .sab-heading--lg) {
	font-family: Roboto, sans-serif !important;
	font-weight: 700 !important;
}

/* Kept on the row's left edge (the row centres its blocks). */
.sab-section .wp-block-heading.sab-heading--xl {
	max-width: 950px;
	margin-left: calc((100% - var(--sab-row-width)) / 2);
	margin-right: auto;
	margin-bottom: 50px;
	font-size: 64px;
	line-height: 1.3;
}

.sab-section .wp-block-heading.sab-heading--lg {
	margin-bottom: 14px;
	font-size: 50px;
	line-height: 1.2;
}

/* A bold line under a heading, and a bold pitch beside text. */
.sab-section p.sab-lead {
	margin-bottom: 18px;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--sab-dark);
}

.sab-section p.sab-pitch {
	max-width: 375px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--sab-dark);
}

/* Black, tighter text (30px between paragraphs). */
.sab-section .sab-text-black > p {
	color: #000;
}

.sab-section .sab-text-compact > p {
	line-height: 1.3;
}

.sab-section .sab-text-compact > p:not(:last-child) {
	margin-bottom: 30px;
}

/* Two photos edge to edge (a third / two thirds, the same height),
   straddling the end of a band: the band's colour behind their top half,
   white behind the rest. The band ends with them. */
.sab-section:has(> .sab-photo-strip:last-child) {
	padding-bottom: 0;
}

.sab-section > .sab-photo-strip {
	display: grid;
	grid-template-columns: minmax(0, 32.85fr) minmax(0, 64.85fr);
	column-gap: 2.3%;
	width: 100%;
	background: linear-gradient(transparent 50%, #fff 50%);
}

.sab-photo-strip .wp-block-image {
	margin: 0;
}

.sab-section .sab-photo-strip img {
	display: block;
	width: 100%;
	height: 18.37vw;                                     /* the first photo's own shape (1080 × 604) at 32.85% */
	object-fit: cover;
}

/* A narrow text column (Track 2): paragraphs 410px, heading 499px. */
.sab-section .sab-col-narrow > * {
	max-width: 410px;
}

.sab-section .sab-col-narrow > .wp-block-heading {
	max-width: 499px;
}

.sab-section .sab-col-narrow > p:not(.sab-tag, .sab-small) {
	margin-bottom: 42px;
}

.sab-section .sab-col-narrow > p.sab-logos-label {
	margin: 30px 0 12px;
}

/* A row of partner logos, three across. */
.sab-section .sab-logos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	column-gap: 4%;
	row-gap: 20px;
	max-width: 500px;
}

.sab-section .sab-logos > * {
	margin: 0;
}

.sab-section .sab-logos img {
	display: block;
	width: 100%;
	height: auto;
}

/* Three photos: a tall one beside two stacked, with leaf-shaped corners. */
.sab-section .sab-photo-cluster {
	display: grid;
	grid-template-columns: 331fr 231fr;
	align-items: center;
	column-gap: 20px;
}

.sab-section .sab-photo-cluster > *,
.sab-section .sab-photo-cluster__side > * {
	margin: 0;
}

.sab-section .sab-photo-cluster__side {
	display: grid;
	row-gap: 24px;
}

.sab-section .sab-photo-cluster img {
	display: block;
	width: 100%;
	height: auto;
}

.sab-section .sab-photo-cluster > .wp-block-image img {
	border-radius: 70px 0;
}

.sab-section .sab-photo-cluster__side > :first-child img {
	border-radius: 50px 0;
}

.sab-section .sab-photo-cluster__side > :last-child img {
	border-radius: 0 50px;
}

/* 64 / 36 (text beside a video). */
@media (min-width: 782px) {
	.sab-section .wp-block-columns.sab-split--media {
		column-gap: 2.5%;
	}

	.sab-section .wp-block-columns.sab-split--media > .wp-block-column {
		flex-grow: 0;
	}

	.sab-section .wp-block-columns.sab-split--media > .wp-block-column:first-child {
		flex-basis: 62.75%;
	}

	.sab-section .wp-block-columns.sab-split--media > .wp-block-column:last-child {
		flex-basis: 34.75%;
	}
}

/* 55 / 35 with a wide gap (Join us); 50 / 40 on tablets. */
@media (min-width: 782px) {
	.sab-section .wp-block-columns.sab-split--join {
		column-gap: 5%;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column {
		flex-grow: 0;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column:first-child {
		flex-basis: 52.5%;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column:last-child {
		flex-basis: 32.5%;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.sab-section .wp-block-columns.sab-split--join {
		column-gap: 2.5%;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column:first-child {
		flex-basis: 48.75%;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column:last-child {
		flex-basis: 38.75%;
	}
}

/* Join us stays two columns (60 / 40) down to small phones. */
@media (min-width: 481px) and (max-width: 781px) {
	.sab-section .wp-block-columns.sab-split--join {
		flex-wrap: nowrap !important;
		column-gap: 2.5%;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column:first-child {
		flex-basis: 58.75% !important;
	}

	.sab-section .wp-block-columns.sab-split--join > .wp-block-column:last-child {
		flex-basis: 38.75% !important;
	}
}

@media (max-width: 1366px) {
	.sab-section .wp-block-heading.sab-heading--xl {
		max-width: 850px;
		font-size: 56px;
	}

	.sab-section .wp-block-heading.sab-heading--lg {
		font-size: 40px;
	}
}

@media (max-width: 1024px) {
	.sab-section .wp-block-heading.sab-heading--xl {
		max-width: 650px;
		margin-bottom: 30px;
		font-size: 48px;
	}

	.sab-section .wp-block-heading.sab-heading--lg {
		font-size: 36px;
	}

	.sab-section p.sab-lead {
		font-size: 18px;
	}

	.sab-section .sab-col-narrow > p:not(.sab-tag, .sab-small) {
		margin-bottom: 30px;
	}

	.sab-section .sab-col-narrow > p.sab-logos-label {
		margin-top: 50px;
	}
}

/* Phones: the strip's photos stacked at their own shape; Track 2's text
   centred. */
@media (max-width: 767px) {
	.sab-section .wp-block-heading.sab-heading--xl {
		font-size: 36px;
	}

	.sab-section .wp-block-heading.sab-heading--lg {
		margin-bottom: 7px;
		font-size: 34px;
	}

	.sab-section p.sab-pitch {
		max-width: none;
		font-size: 18px;
	}

	.sab-section > .sab-photo-strip {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.sab-section .sab-photo-strip img {
		height: auto;
	}

	.sab-section .sab-col-narrow > :not(.sab-tag) {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.sab-section .sab-col-narrow > :is(.sab-small, .sab-logos) {
		max-width: 500px;
	}

	.sab-section .sab-col-narrow > p.sab-logos-label {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 480px) {
	.sab-section .wp-block-heading.sab-heading--xl {
		font-size: 32px;
	}

	.sab-section .wp-block-heading.sab-heading--lg {
		font-size: 32px;
	}

	.sab-section .sab-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sab-section .sab-logos > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 48%;
	}

	.sab-section .sab-photo-cluster {
		column-gap: 10px;
	}

	.sab-section .sab-photo-cluster__side {
		row-gap: 10px;
	}
}

/* --- Pieces first used on the project pages (MaxiBlocks values kept; the
   project pages themselves were retired 2026-10-27). --- */

/* Title band on a photo (a Cover block): the photo instead of the navy
   band, black title and lede, white rules beside the lede. */
.entry-content > .wp-block-cover.sab-hero--photo {
	margin: 0;
}

.wp-block-cover.sab-hero--photo {
	min-height: 0;
	padding: var(--sab-hero-space) 0;
	background: none;
}

.sab-hero--photo > :is(.wp-block-cover__image-background, .wp-block-cover__background) {
	width: 100%;
	max-width: none;
}

.sab-hero--photo .wp-block-cover__inner-container {
	width: var(--sab-row-width);
	max-width: 100%;
}

.sab-hero.sab-hero--photo h1 {
	color: #000 !important;
}

.wp-block-cover.sab-hero.sab-hero--photo p.sab-hero__lede {
	--sab-hero-lede: #000;
	font-weight: 500;
	color: var(--sab-hero-lede);
}

/* Block editor only: Astra colours Cover block text slate there, with a
   stronger rule than the ones above; each lede's colour comes through the
   --sab-hero-lede its own rule sets. */
.editor-styles-wrapper .wp-block-cover.sab-hero .wp-block-cover__inner-container p.sab-hero__lede.block-editor-rich-text__editable {
	color: var(--sab-hero-lede);
}

.sab-hero--photo .sab-hero__lede::before,
.sab-hero--photo .sab-hero__lede::after {
	background: #fff;
}

/* A light blue band holding a white box (Astra's boxed width): the cover
   beside the text, then panels. */
.entry-content > .sab-section--boxed {
	padding: 0;
	background: var(--sab-panel);
}

.sab-section--boxed > .sab-box {
	width: min(var(--sab-box-width), var(--sab-row-width));
	margin-top: 0;
	margin-bottom: 0;
	background: #fff;
}

.sab-section--boxed > .wp-block-columns.sab-box {
	gap: 24px;
}

.sab-section--boxed .wp-block-image {
	margin: 0;
}

.sab-section--boxed .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.sab-section .sab-box__text {
	padding-top: 30px;
}

.sab-section--boxed > .wp-block-group.sab-box {
	padding-top: calc(var(--sab-gap) * 2);
}

/* A box with Astra's inner padding (30px at the sides, as its separate
   container had): blocks one under another, a gap between. */
.sab-section--boxed > .wp-block-group.sab-box.sab-box--inset {
	width: min(calc(var(--sab-box-width) + 60px), calc(100% - 40px));
	padding: var(--sab-gap) 30px calc(var(--sab-gap) * 2);
}

/* (Two box classes and the columns: outranks "columns in a box have no margin".) */
.sab-section .sab-box.sab-box--inset > .wp-block-columns + .wp-block-columns {
	margin-top: calc(var(--sab-gap) * 2);
}

/* Buttons and images inside body text keep space below them. */
.sab-section .sab-text-body > :is(.wp-block-buttons, .wp-block-image):not(:last-child) {
	margin-bottom: 1.6em;
}

/* Panels inside the box: light blue, or white; a tight panel (a small
   video beside a heading). A stacked box spaces its blocks evenly. */
.sab-section .sab-box > .wp-block-columns {
	gap: 24px;
	margin: 0;
}

.sab-section .sab-box > :is(.sab-box__panel, .sab-box__plain) {
	padding: var(--sab-section-space) var(--sab-gap);
}

.sab-section .sab-box > .wp-block-columns.sab-box__panel {
	background: var(--sab-panel);
}

.sab-section .sab-box > .wp-block-columns.sab-box__panel--tight {
	padding: var(--sab-gap);
}

.sab-section--boxed > .wp-block-group.sab-box--stack {
	padding-bottom: calc(var(--sab-gap) * 2);
}

/* ".sab-box.sab-box--stack": outranks the box's "columns have no margin". */
.sab-section .sab-box.sab-box--stack > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sab-section .sab-box.sab-box--stack > * + * {
	margin-top: calc(var(--sab-gap) * 2);
}

.sab-section .sab-box.sab-box--stack > .wp-block-heading {
	margin-bottom: 20px;
}

.sab-section .sab-box.sab-box--stack > .wp-block-heading + * {
	margin-top: 0;
}

/* Text and headings outside the panel keep off the box's left edge, in
   line with the panel's content (videos and images run to the edge). */
.sab-section .sab-box--stack > .wp-block-heading,
.sab-section .sab-box--stack > .wp-block-columns:not(.sab-box__panel) > .wp-block-column:has(> p) {
	padding-left: var(--sab-gap);
}

.sab-section .sab-box--stack .wp-block-embed {
	margin: 0;
}

/* Small text styles: a medium-weight note, near-black, slate. */
.sab-section p.sab-release-note {
	margin-bottom: 40px;
	font-weight: 500;
}

.sab-section p.sab-text-ink,
.sab-section .sab-text-ink > p {
	color: var(--sab-ink);
}

/* Masthead colours of a book's own (Abigail). */
.sab-hero.sab-hero--photo h1.sab-text-gold {
	color: var(--sab-gold) !important;
}

.wp-block-cover.sab-hero.sab-hero--photo p.sab-hero__lede.sab-text-plum {
	--sab-hero-lede: var(--sab-plum);
	color: var(--sab-hero-lede);
}

/* A label set after a hand-drawn arrow ("Available Now"), a large Feed
   Store subhead, and a call to action whose button sits beside the text
   on tablets. */
.sab-section p.sab-flag {
	position: relative;
	margin: 0;
	padding-left: 102px;
	font-family: "Feed Store", Georgia, serif;
	font-size: 24px;
	line-height: 32px;
	color: var(--sab-slate);
}

.sab-section p.sab-flag::before {
	content: "";
	position: absolute;
	top: -28px;
	left: 0;
	width: 90px;
	aspect-ratio: 1;
	background: url("../images/squiggle-arrow.svg") no-repeat center / contain;
}

.sab-section p.sab-subhead {
	max-width: 550px;
	margin-bottom: 43px;
	font-family: "Feed Store", Georgia, serif;
	font-size: 24px;
	line-height: 30px;
	color: var(--sab-dark);
}

.sab-section .sab-cta-body > .wp-block-heading {
	margin-bottom: 32px;
}

@media (max-width: 1366px) {
	.sab-section p.sab-subhead {
		margin-bottom: 25px;
	}

	.sab-section .sab-cta-body > .wp-block-heading {
		margin-bottom: 20px;
	}
}

@media (max-width: 1024px) {
	.sab-section p.sab-flag {
		padding-left: 60px;
	}

	.sab-section p.sab-flag::before {
		top: -12px;
		width: 55px;
	}

	.sab-section p.sab-subhead {
		margin-bottom: 0;
		font-size: 18px;
		line-height: 26px;
	}
}

@media (min-width: 481px) and (max-width: 1024px) {
	.sab-section .sab-cta-body {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
		column-gap: 2.5%;
		align-items: end;
	}

	.sab-section .sab-cta-body > :not(.wp-block-buttons) {
		grid-column: 1;
	}

	.sab-section .sab-cta-body > .wp-block-buttons {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-content: flex-end;
	}
}

@media (max-width: 480px) {
	.sab-section p.sab-subhead {
		margin-bottom: 25px;
	}
}

.sab-section p.sab-text-slate {
	color: var(--sab-slate);
}

/* Lora titles: a bold slate heading over an italic near-black line. */
.sab-section .wp-block-heading.sab-heading--lora {
	margin-bottom: 20px;
	font-family: Lora, Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 32px;
	line-height: 1.3;
	color: var(--sab-slate);
}

.sab-section p.sab-lora-line {
	margin-bottom: 20px;
	font-family: Lora, Georgia, serif;
	font-size: 24px;
	line-height: 1.3;
	font-style: italic;
	color: var(--sab-ink);
}

/* Astra's body text (17/28 slate grey), where a page kept it. */
.sab-section .sab-text-body > p:not(.sab-condensed, .sab-lora-line) {
	margin-bottom: 1.6em;
	font-size: 17px;
	line-height: 28px;
	color: var(--ast-global-color-3);
}

.sab-section .sab-text-body .wp-block-list li {
	font-size: 17px;
	line-height: 28px;
	color: var(--ast-global-color-3);
}

/* Small print in that text (bios): Astra's small size, 21px lines. */
.sab-section .sab-text-body > p.has-small-font-size {
	line-height: 21px;
}

/* Three photos in a row on a dark band; a thin grey frame draws in around
   each on hover. */
.sab-section .sab-photo-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 2.5%;
}

.sab-section .sab-photo-row > .wp-block-image {
	position: relative;
	margin: 0;
}

.sab-section .sab-photo-row img {
	display: block;
	width: 100%;
	height: auto;
}

.sab-section .sab-photo-row > .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--sab-meta), var(--sab-meta)) top left / 0 1px no-repeat,
		linear-gradient(var(--sab-meta), var(--sab-meta)) bottom right / 0 1px no-repeat,
		linear-gradient(var(--sab-meta), var(--sab-meta)) top left / 1px 0 no-repeat,
		linear-gradient(var(--sab-meta), var(--sab-meta)) bottom right / 1px 0 no-repeat;
	transition: background-size 0.3s ease;
	pointer-events: none;
}

.sab-section .sab-photo-row > .wp-block-image:hover::after {
	background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
}

/* Big statement and number figures on a band. */
.sab-section .wp-block-heading.sab-heading--stat {
	max-width: 800px;
	margin-left: calc((100% - var(--sab-row-width)) / 2);
	margin-right: auto;
	margin-bottom: 50px;
	font-family: Roboto, sans-serif !important;
	font-weight: 700 !important;
	font-size: 80px;
	line-height: 1.2;
}

.sab-section .sab-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 2.5%;
}

.sab-section .sab-stats > *,
.sab-section .sab-stat > * {
	margin: 0;
}

.sab-section p.sab-stat__number {
	font-size: 130px;
	line-height: 1;
	font-weight: 700;
}

.sab-section--slate p.sab-stat__label {
	padding-top: 5px;
	color: var(--sab-cream);                            /* 5.8:1 on slate (grey was 2.4:1) */
}

/* Smaller section heading; a short cream rule above it; grey text on a
   dark band (italic words white); a 470px measure. */
.sab-section .wp-block-heading.sab-heading--small {
	font-size: var(--sab-h3);
	line-height: var(--sab-h3-line);
}

.sab-section .wp-block-separator.sab-rule-cream {
	width: 120px;
	margin: 0 0 40px;
	border: 0;
	border-top: 2px solid var(--sab-cream);
	opacity: 1;
}

:is(.sab-section--slate, .sab-section--navy, .sab-section--black) .sab-text-grey > p {
	color: var(--sab-meta);
}

.sab-section .sab-text-grey em {
	color: #fff;
}

.sab-section p.sab-measure {
	max-width: 470px;
}

.sab-section .sab-circle-accent--slate::before {
	background: var(--sab-slate);
}

.sab-section .sab-circle-accent .wp-block-image {
	margin: 0;
}

/* A short cream strip: a logo or icon and small text, buttons to the right. */
.entry-content > .sab-section--strip {
	padding: calc(var(--sab-gap) * 1.5) 0;
}

.sab-section .wp-block-columns.sab-cta-strip {
	gap: 2.5%;
}

.sab-section .sab-cta-strip__text {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 26px;
	align-items: center;
}

.sab-section .sab-cta-strip__text > * {
	margin: 0;
}

/* No shadow behind a logo or icon (Astra shadows every figure in a post). */
.sab-section :is(.sab-cta-strip__icon, .sab-feature__icon) {
	box-shadow: none;
}

.sab-section .sab-cta-strip__icon img {
	display: block;
	width: auto;
	height: 64px;
}

.sab-section .sab-cta-strip__text > p {
	font-size: 12px;
	line-height: 16px;
	color: var(--sab-dark);
}

.sab-section .sab-cta-strip .wp-block-buttons {
	justify-content: flex-end;
}

.sab-section .sab-cta-strip .wp-block-button__link {
	white-space: nowrap;
}

@media (min-width: 782px) {
	.sab-section .wp-block-columns.sab-cta-strip > .wp-block-column {
		flex-grow: 0;
	}

	.sab-section .wp-block-columns.sab-cta-strip > .wp-block-column:first-child {
		flex-basis: 55%;
	}

	.sab-section .wp-block-columns.sab-cta-strip > .wp-block-column:last-child {
		flex-basis: 42.5%;
	}
}

@media (max-width: 1366px) {
	.sab-section .wp-block-heading.sab-heading--stat {
		max-width: 700px;
		font-size: 70px;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.sab-section .wp-block-columns.sab-cta-strip > .wp-block-column:first-child {
		flex-basis: 52.75%;
	}

	.sab-section .wp-block-columns.sab-cta-strip > .wp-block-column:last-child {
		flex-basis: 44.75%;
	}
}

@media (max-width: 1024px) {
	.sab-section .wp-block-heading.sab-heading--stat {
		margin-bottom: 30px;
		font-size: 60px;
	}

	.sab-section p.sab-stat__number {
		font-size: 110px;
	}
}

/* Phones: the box's text gets side room; panels slimmer at the sides;
   photos one per row; figures two per row; the strip centred. */
@media (max-width: 767px) {
	.sab-section .sab-box__text {
		padding: 30px 20px;
	}

	.sab-section .sab-box > .sab-box__panel,
	.sab-section .sab-box > .sab-box__plain {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sab-section .sab-box > .sab-box__panel--tight {
		padding: 20px;
	}

	.sab-section .sab-box--stack > .wp-block-heading,
	.sab-section .sab-box--stack > .wp-block-columns:not(.sab-box__panel) > .wp-block-column:has(> p) {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sab-section--boxed > .wp-block-group.sab-box.sab-box--inset {
		padding: 20px 20px var(--sab-gap);
	}

	.sab-section .sab-photo-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.sab-section .wp-block-heading.sab-heading--stat {
		font-size: 50px;
	}

	.sab-section .sab-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sab-section p.sab-stat__number {
		font-size: 90px;
	}

	.sab-section--slate p.sab-stat__label {
		padding-top: 2px;
	}

	.sab-section p.sab-measure {
		max-width: none;
	}

	.sab-section .sab-cta-strip__text {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
		justify-items: center;
	}

	.sab-section .sab-cta-strip .wp-block-buttons {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.sab-section .wp-block-heading.sab-heading--stat {
		font-size: 40px;
	}

	.sab-section p.sab-stat__number {
		font-size: 72px;
	}
}

/* --- Pieces first used on the Sheila Kay Adams project page. --- */

/* A dark photo masthead: the band's own white title and cream lede. */
.sab-hero.sab-hero--photo.sab-hero--photo-dark h1 {
	color: #fff !important;
}

.wp-block-cover.sab-hero.sab-hero--photo.sab-hero--photo-dark p.sab-hero__lede {
	--sab-hero-lede: var(--sab-rule);
	font-weight: 400;
	color: var(--sab-hero-lede);
}

.sab-hero--photo-dark .sab-hero__lede::before,
.sab-hero--photo-dark .sab-hero__lede::after {
	background: var(--sab-rule);
}

/* A white box with 30px inside: blocks one under another (headings close
   to what follows, card rows close together). Two box classes outrank
   "columns in a box have no margin". */
.sab-section--boxed > .wp-block-group.sab-box.sab-box--padded {
	padding: calc(var(--sab-gap) * 2) 30px;
}

.sab-section .sab-box.sab-box--padded > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sab-section .sab-box.sab-box--padded > * + * {
	margin-top: var(--sab-gap);
}

.sab-section .sab-box.sab-box--padded > .wp-block-heading {
	margin-bottom: 20px;
}

.sab-section .sab-box.sab-box--padded > .wp-block-heading + *,
.sab-section .sab-box.sab-box--padded > .sab-cards + .sab-cards {
	margin-top: 0;
}

.sab-section .sab-box.sab-box--padded > .sab-cards + .sab-cards {
	margin-top: 24px;
}

.sab-section .sab-box--padded .wp-block-image {
	margin: 0;
}

/* Lists in a box: slate bullets. */
.sab-section .sab-box .wp-block-list li::marker {
	color: var(--sab-slate);
}

/* A cream box around a short introduction (near-black text). */
.sab-section .sab-note-box {
	padding: 30px 30px 15px;
	background: var(--sab-cream);
}

.sab-section .sab-note-box > p {
	color: var(--sab-ink);
}

/* Slightly larger body text. */
.sab-section p.sab-text-large {
	font-size: 18px;
	line-height: 26px;
}

/* Cards side by side: a thin border and rounded corners; small text,
   grey list. */
.sab-section .wp-block-columns.sab-cards {
	gap: 24px;
}

.sab-section .sab-card {
	padding: calc(var(--sab-gap) * 0.5);
	border: 1px solid var(--ast-global-color-3);
	border-radius: 10px;
}

.sab-section .sab-card > p {
	font-size: 14px;
	line-height: 20px;
	color: var(--sab-ink);
}

.sab-section .sab-card .wp-block-list li {
	font-size: 14px;
	line-height: 26px;
}

.sab-section .sab-card > .wp-block-buttons {
	margin-top: 20px;
}

/* The dots separator: even space around it. */
.sab-section .sab-box .wp-block-separator.is-style-dots {
	margin-top: var(--sab-gap);
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.sab-section--boxed > .wp-block-group.sab-box.sab-box--padded {
		padding: var(--sab-gap) 20px;
	}

	.sab-section .sab-note-box {
		padding: 20px 20px 5px;
	}
}

/* --- The homepage hero: the title band at its larger size, the masthead
 * photo dimmed over navy, and MaxiBlocks' wave (three slate curves) along
 * the bottom edge. --- */

.sab-hero.sab-hero--home {
	position: relative;
	overflow: hidden;
	padding: var(--sab-section-space) 0 calc(var(--sab-section-space) + 120px);
	background: var(--sab-navy);
}

.sab-hero.sab-hero--home::before,
.sab-hero.sab-hero--home::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}

.sab-hero.sab-hero--home::before {
	top: 0;
	bottom: 0;
	background: url("/wp-content/uploads/2026/02/Masthead-Homepage.jpg") no-repeat center / cover;
	opacity: 0.62;
}

/* The whole wave along the bottom, behind the lower text. */
.sab-hero.sab-hero--home::after {
	bottom: 0;
	height: 300px;
	background: url("../images/hero-wave.svg") no-repeat center / 100% 100%;
}

.sab-hero.sab-hero--home > * {
	position: relative;
	z-index: 1;
}

.sab-hero.sab-hero--home h1 {
	max-width: 1100px;
	font-size: 55px;
	line-height: 65px;
}

.sab-hero.sab-hero--home .sab-hero__lede {
	margin-top: 25px;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
}

.sab-hero.sab-hero--home p.sab-hero__text {
	max-width: 650px;
	margin-top: 20px;
	font-family: Roboto, sans-serif;
	font-size: 32px;
	line-height: 40px;
}

.sab-hero--home .sab-hero__text :is(strong > em, em > strong) {
	font-family: Lora, Georgia, serif;
}

@media (max-width: 1366px) {
	.sab-hero.sab-hero--home h1 {
		font-size: 40px;
		line-height: 50px;
	}
}

@media (max-width: 1024px) {
	.sab-hero.sab-hero--home h1 {
		max-width: 800px;
		font-size: 36px;
		line-height: 46px;
	}

	.sab-hero.sab-hero--home .sab-hero__lede {
		margin-top: 10px;
		font-size: 18px;
	}

	.sab-hero.sab-hero--home p.sab-hero__text {
		margin-top: 10px;
		font-size: 24px;
		line-height: 34px;
	}
}

@media (max-width: 767px) {
	.sab-hero.sab-hero--home {
		padding-bottom: calc(var(--sab-section-space) + 80px);
	}

	.sab-hero.sab-hero--home::after {
		height: 200px;
	}
}

@media (max-width: 480px) {
	.sab-hero.sab-hero--home h1 {
		font-size: 30px;
		line-height: 40px;
	}
}

/* Homepage sections: the featured book and the book cards sit under their
   heading with the section's own spacing. */
.sab-section .sab-featured-book {
	margin-top: var(--sab-gap);
	padding: 0;
}

.sab-section .sab-book-cards {
	margin-top: var(--sab-gap);
}