/*
Theme Name: Soul Cakes by Tanya
Theme URI: https://soulcakesbytanya.com/
Description: Restoration of the Soul Cakes by Tanya website as it stood in 2022 and early 2023, rebuilt as a block theme on Twenty Twenty-Five. Typography, palette and layout follow the archived Wix site; the licensed Futura and DIN Next faces are substituted with Jost.
Author: Restored from the Internet Archive
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soulcakes
*/

/* Block themes take their design from theme.json. Only the things theme.json
   cannot express live here. */

/* The Wix site set its display headings in italic Libre Baskerville with a light
   letterspacing; core has no italic heading style to inherit. */
.wp-block-post-title,
.wp-site-title {
	letter-spacing: 0.01em;
}

/* Section headings on the restored pages, matching the archived "Custom, Beautiful,
   Delicious!" and "Who is Soul Cakes?" treatment. */
.scbt-display {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

/* The archived gold is #B98D4B, which is 3.01:1 on white. That carries large display
   type (WCAG wants 3:1 there) but not a 20px section heading, so the smaller display
   headings take the brown instead, which is 7.6:1. The gold is kept where it is big
   enough to be legible, which is where the original used it most. */
h3.scbt-display,
h4.scbt-display,
h5.scbt-display,
h6.scbt-display {
	color: var(--wp--preset--color--brown);
}

/* Interior pages opened with a photographic banner carrying the page title and a
   "Scroll Down" cue. The cue is decorative, so it is hidden from screen readers
   in the markup; here it just sits quietly at the bottom of the banner. */
.scbt-scroll-cue {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Navigation: the original was a thin centred bar of small caps under the logo. */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--jost);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.8125rem;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	/* Brown, not the gold: at 13px the gold does not carry enough contrast. */
	color: var(--wp--preset--color--brown);
	text-decoration: underline;
}

/* Keyboard users must be able to see where they are. Core's default outline is
   easy to lose against photography, so it is strengthened here. */
:where(a, button, input, select, textarea, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Galleries: square, evenly cropped tiles, as the Wix Pro Gallery grid rendered. */
.scbt-gallery.wp-block-gallery img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* The category cards on the Galleries hub. The eleven cover photographs are all
   different shapes, so without a fixed ratio the labels sit at eleven heights. */
.scbt-cover-tile img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* The card label is a link, but it reads as a heading, so it carries no underline
   until it is hovered or focused. */
.scbt-cover-label a {
	text-decoration: none;
}

.scbt-cover-label a:hover,
.scbt-cover-label a:focus-visible {
	text-decoration: underline;
}

/* A single portrait photograph in a text column, held to a sensible reading width. */
.scbt-portrait img {
	/* min(), not a bare 520px: a bare value overrides core's max-width:100% and the
	   picture then refuses to shrink, which scrolls the page sideways on a phone. */
	max-width: min(520px, 100%);
	height: auto;
	margin-inline: auto;
}

/* Forms are plain HTML in a block; give the controls the theme's typography. */
.scbt-form {
	max-width: 42rem;
}

.scbt-form label {
	display: block;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.35rem;
}

.scbt-form .scbt-field {
	margin-bottom: 1.25rem;
}

/* Without this the 100% width plus padding and border runs a few pixels past the
   column and the page scrolls sideways. */
.scbt-form input,
.scbt-form select,
.scbt-form textarea,
.scbt-form button {
	box-sizing: border-box;
	max-width: 100%;
}

.scbt-form input[type="text"],
.scbt-form input[type="email"],
.scbt-form input[type="tel"],
.scbt-form input[type="date"],
.scbt-form input[type="number"],
.scbt-form select,
.scbt-form textarea {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1rem;
}

.scbt-form textarea {
	min-height: 9rem;
}

.scbt-form .scbt-checkbox {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.scbt-form .scbt-checkbox input {
	margin-top: 0.25rem;
}

/* The honeypot field: hidden from people, visible to the robots that fill it in. */
.scbt-form .scbt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.scbt-form button {
	font-family: var(--wp--preset--font-family--jost);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	padding: 0.85rem 2.2rem;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.scbt-form button:hover,
.scbt-form button:focus-visible {
	/* White on the gold is only 3:1, which is not enough for 13px button text. */
	background: var(--wp--preset--color--espresso);
}

.scbt-note {
	border-left: 3px solid var(--wp--preset--color--gold);
	padding: 0.85rem 1.1rem;
	background: var(--wp--preset--color--cream);
}

.scbt-note p:last-child {
	margin-bottom: 0;
}

/* Map embed: responsive without an iframe wrapper plugin. */
.scbt-map iframe {
	width: 100%;
	height: 22rem;
	border: 0;
	display: block;
}

@media (max-width: 781px) {
	.scbt-map iframe {
		height: 15rem;
	}
}

/* ==========================================================================
   Redesigned homepage, header and footer.
   Everything below is the 2026 redesign. The rules above still dress the
   restored interior pages, which are unchanged.

   One rule throughout: no section carries its own one-off values. Sizes,
   colours and rhythm all come from the tokens in this first block, so the
   whole page reads as one system.
   ========================================================================== */

:root {
	/* Layout */
	--scbt-wide: 1240px;
	--scbt-gutter: clamp(1rem, 4vw, 3rem);
	--scbt-section-y: clamp(3.25rem, 6.5vw, 5.75rem);
	--scbt-radius: 4px;
	--scbt-radius-lg: 10px;
	--scbt-pill: 999px;

	/* Colour, mapped onto the palette in theme.json */
	--scbt-ink: var(--wp--preset--color--ink);
	--scbt-cocoa: var(--wp--preset--color--cocoa);
	--scbt-blush: var(--wp--preset--color--blush);
	--scbt-blush-deep: #F3E1D6;
	--scbt-cream: var(--wp--preset--color--cream);
	--scbt-gold: var(--wp--preset--color--gold);
	--scbt-surface: var(--wp--preset--color--base);
	/* A warm grey. The palette's neutral #6A6A6A reads cold beside the creams,
	   and this is 5.3:1 on cream, so it carries body text. */
	--scbt-soft: #6B5C52;
	--scbt-line: rgba(51, 36, 28, 0.14);
	--scbt-line-light: rgba(255, 255, 255, 0.22);

	/* Type */
	--scbt-font-display: var(--wp--preset--font-family--libre-baskerville);
	--scbt-font-body: var(--wp--preset--font-family--jost);
	--scbt-font-script: var(--wp--preset--font-family--parisienne);
	--scbt-h1: clamp(2.05rem, 4.4vw, 2.95rem);
	--scbt-h2: clamp(1.7rem, 3.6vw, 2.5rem);
	--scbt-h3: clamp(1.15rem, 2vw, 1.35rem);
	--scbt-body: clamp(0.95rem, 1.1vw, 1.02rem);
	--scbt-eyebrow: 0.72rem;
	--scbt-track: 0.2em;

	/* Motion. Every transition in the redesign uses this one pair. */
	--scbt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--scbt-fast: 180ms;
	--scbt-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--scbt-fast: 1ms;
		--scbt-slow: 1ms;
	}
	.scbt-home *,
	.scbt-header *,
	.scbt-footer * {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------- primitives */

.scbt-in {
	max-width: var(--scbt-wide);
	margin-inline: auto;
	padding-inline: var(--scbt-gutter);
	width: 100%;
	box-sizing: border-box;
}

.scbt-sec {
	padding-block: var(--scbt-section-y);
}

.scbt-eyebrow {
	display: block;
	font-family: var(--scbt-font-body);
	font-size: var(--scbt-eyebrow);
	font-weight: 400;
	letter-spacing: var(--scbt-track);
	text-transform: uppercase;
	color: var(--scbt-soft);
	margin: 0 0 0.75rem;
}

/* The redesign sets headings upright. The restored interior pages keep the
   italic the Wix site used, so this is scoped and does not reach them. */
.scbt-home h1,
.scbt-home h2,
.scbt-home h3,
.scbt-footer h2,
.scbt-footer h3 {
	font-family: var(--scbt-font-display);
	font-style: normal;
	font-weight: 400;
	color: var(--scbt-ink);
	letter-spacing: -0.01em;
	margin: 0;
}

.scbt-home h2 {
	font-size: var(--scbt-h2);
	line-height: 1.16;
}

.scbt-home h3 {
	font-size: var(--scbt-h3);
	line-height: 1.3;
}

/* The "Why" band's label is a real h2, so the document outline has no gap between
   the h1 and the h3s inside it, but it reads as an eyebrow. */
.scbt-home h2.scbt-eyebrow {
	font-family: var(--scbt-font-body);
	font-size: var(--scbt-eyebrow);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--scbt-track);
	text-transform: uppercase;
	color: var(--scbt-soft);
}

.scbt-home p {
	font-size: var(--scbt-body);
	line-height: 1.75;
	color: var(--scbt-soft);
	margin: 0;
}

.scbt-lede {
	max-width: 34ch;
	margin-top: 1rem !important;
}

/* ------------------------------------------------------------------ buttons */

.scbt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--scbt-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--scbt-radius);
	/* 44px tall at the default font size, so it is a comfortable touch target. */
	padding: 0.78rem 1.6rem;
	cursor: pointer;
	transition: background-color var(--scbt-fast) var(--scbt-ease),
		color var(--scbt-fast) var(--scbt-ease),
		border-color var(--scbt-fast) var(--scbt-ease),
		transform var(--scbt-fast) var(--scbt-ease);
}

.scbt-btn--pill { border-radius: var(--scbt-pill); }

.scbt-btn--solid {
	background: var(--scbt-cocoa);
	color: #FFF;
	border-color: var(--scbt-cocoa);
}

.scbt-btn--solid:hover,
.scbt-btn--solid:focus-visible {
	background: #2C170E;
	border-color: #2C170E;
	color: #FFF;
}

.scbt-btn--ghost {
	background: transparent;
	color: var(--scbt-ink);
	border-color: rgba(51, 36, 28, 0.35);
}

.scbt-btn--ghost:hover,
.scbt-btn--ghost:focus-visible {
	background: var(--scbt-ink);
	border-color: var(--scbt-ink);
	color: #FFF;
}

/* On the hero and the closing band the ghost button sits on photography, so it
   needs a solid backing to stay readable. */
.scbt-btn--onphoto {
	background: rgba(255, 255, 255, 0.92);
	color: var(--scbt-ink);
	border-color: rgba(255, 255, 255, 0.92);
}

.scbt-btn--onphoto:hover,
.scbt-btn--onphoto:focus-visible {
	background: #FFF;
	border-color: #FFF;
	color: var(--scbt-ink);
}

.scbt-btn--light {
	background: #FFF;
	color: var(--scbt-ink);
	border-color: #FFF;
}

.scbt-btn--light:hover,
.scbt-btn--light:focus-visible {
	background: var(--scbt-blush);
	border-color: var(--scbt-blush);
	color: var(--scbt-ink);
}

.scbt-btn--outline-light {
	background: transparent;
	color: #FFF;
	border-color: rgba(255, 255, 255, 0.55);
}

.scbt-btn--outline-light:hover,
.scbt-btn--outline-light:focus-visible {
	background: #FFF;
	border-color: #FFF;
	color: var(--scbt-ink);
}

.scbt-btn:active { transform: translateY(1px); }

.scbt-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* A text link that ends in an arrow. The arrow nudges on hover. */
.scbt-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--scbt-font-body);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--scbt-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--scbt-line);
	padding-bottom: 2px;
}

.scbt-arrow svg {
	transition: transform var(--scbt-fast) var(--scbt-ease);
}

.scbt-arrow:hover,
.scbt-arrow:focus-visible {
	color: var(--scbt-cocoa);
	border-bottom-color: var(--scbt-cocoa);
}

.scbt-arrow:hover svg,
.scbt-arrow:focus-visible svg {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------- header */

/* The bakery closed in May 2023. The notice is the first thing in the document
   so nobody reads an "Order Online" button as a live shop. */
.scbt-topbar {
	background: var(--scbt-cocoa);
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--scbt-font-body);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 0.55rem var(--scbt-gutter);
}

.scbt-topbar p { margin: 0; }

.scbt-header {
	background: var(--scbt-cream);
	border-bottom: 1px solid var(--scbt-line);
}

.scbt-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 84px;
	padding-block: 0.6rem;
}

.scbt-header__logo {
	flex: 0 0 auto;
	margin: 0;
}

.scbt-header__logo img,
.scbt-header__logo .custom-logo {
	display: block;
	width: clamp(122px, 14vw, 158px);
	height: auto;
}

/* Navigation sits in the middle. It is allowed to shrink before the logo or the
   call to action do, because it has the most slack. */
.scbt-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.scbt-header .wp-block-navigation {
	font-family: var(--scbt-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: none;
}

.scbt-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--scbt-ink);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--scbt-fast) var(--scbt-ease),
		color var(--scbt-fast) var(--scbt-ease);
}

.scbt-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.scbt-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--scbt-cocoa);
	border-bottom-color: var(--scbt-gold);
	text-decoration: none;
}

.scbt-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

/* Search is a real WordPress search, collapsed until asked for. */
.scbt-search {
	position: relative;
	display: flex;
	align-items: center;
}

.scbt-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--scbt-pill);
	color: var(--scbt-ink);
	cursor: pointer;
	transition: background-color var(--scbt-fast) var(--scbt-ease);
}

.scbt-search__toggle:hover { background: rgba(51, 36, 28, 0.07); }

.scbt-search__panel {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 30;
	background: #FFF;
	border: 1px solid var(--scbt-line);
	border-radius: var(--scbt-radius);
	box-shadow: 0 12px 30px rgba(51, 36, 28, 0.13);
	padding: 0.5rem;
}

.scbt-search__panel[hidden] { display: none; }

.scbt-search__panel form {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

/* The parent theme defines this, but the header must not depend on that: an
   unlabelled icon button is the difference between usable and not. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.scbt-search__panel input[type="search"] {
	width: 220px;
	max-width: 46vw;
	border: 1px solid var(--scbt-line);
	border-radius: var(--scbt-radius);
	padding: 0.55rem 0.7rem;
	font-family: var(--scbt-font-body);
	font-size: 0.9rem;
	color: var(--scbt-ink);
	background: #FFF;
}

.scbt-header__cta { white-space: nowrap; }

/* Below the navigation breakpoint the core overlay takes over. The call to
   action stays visible, because it is the one thing the header is for. */
@media (max-width: 1099px) {
	.scbt-header__in { min-height: 72px; }
	.scbt-header .wp-block-navigation { font-size: 0.78rem; letter-spacing: 0.03em; }
}

@media (max-width: 860px) {
	.scbt-header__in {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0.5rem;
	}
	.scbt-header__logo { grid-column: 1; }
	.scbt-header__actions { grid-column: 3; gap: 0.35rem; }
	.scbt-header__nav { grid-column: 2; justify-content: flex-end; }
}

@media (max-width: 560px) {
	.scbt-header__cta { display: none; }
	.scbt-topbar { font-size: 0.7rem; line-height: 1.45; }
}

/* Core's mobile overlay, dressed to match. */
.scbt-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--scbt-cream);
	padding-top: 5rem;
}

.scbt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.1rem;
	letter-spacing: 0.04em;
}

/* The overlay's own close button and the open button need real targets. */
.scbt-header .wp-block-navigation__responsive-container-open,
.scbt-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	color: var(--scbt-ink);
}

/* Skip link: visible the moment it is focused. */
.scbt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--scbt-cocoa);
	color: #FFF;
	padding: 0.75rem 1.25rem;
	font-family: var(--scbt-font-body);
	font-size: 0.875rem;
	text-decoration: none;
}

.scbt-skip:focus {
	left: 0;
}

/* --------------------------------------------------------------------- hero */

.scbt-hero {
	position: relative;
	background: var(--scbt-cream);
	overflow: hidden;
}

.scbt-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.scbt-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Holds the cake in the right hand third, as the design has it. */
	object-position: 72% 50%;
	display: block;
}

/* The scrim is a gradient rather than a flat tint so the photograph stays visible
   where the design shows it and the headline still clears 4.5:1. */
.scbt-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(250, 246, 240, 0.97) 0%,
		rgba(250, 246, 240, 0.96) 30%,
		rgba(250, 246, 240, 0.90) 39%,
		rgba(250, 246, 240, 0.70) 49%,
		rgba(250, 246, 240, 0.42) 59%,
		rgba(250, 246, 240, 0.16) 70%,
		rgba(250, 246, 240, 0) 82%
	);
}

.scbt-hero__body {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 54vw, 620px);
	padding-block: var(--scbt-section-y);
}

.scbt-hero__copy {
	max-width: 34rem;
}

.scbt-hero h1 {
	font-size: var(--scbt-h1);
	line-height: 1.08;
	margin: 0;
}

/* "Soul Cakes" is set in the script from the wordmark, on its own line. */
.scbt-hero__script {
	display: block;
	font-family: var(--scbt-font-script);
	font-size: clamp(2.9rem, 7.4vw, 4.6rem);
	line-height: 1.12;
	color: var(--scbt-cocoa);
	/* The script's own sidebearing is large; this pulls it back into alignment. */
	margin-left: -0.06em;
	padding-bottom: 0.08em;
}

.scbt-hero p {
	max-width: 27rem;
}

@media (max-width: 900px) {
	/* Stacked: the photograph gets its own band and the copy sits on cream, which
	   keeps the headline off the busiest part of the picture. */
	.scbt-hero__media {
		position: static;
		height: clamp(230px, 44vw, 340px);
	}
	.scbt-hero__media img { object-position: 60% 50%; }
	.scbt-hero__scrim { display: none; }
	.scbt-hero__body {
		min-height: 0;
		background: var(--scbt-cream);
		padding-block: clamp(2rem, 7vw, 3rem);
	}
	.scbt-hero__copy { max-width: 36rem; }
}

/* ---------------------------------------------------------------- our story */

.scbt-story { background: var(--scbt-cream); }

.scbt-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3.25rem);
	align-items: center;
}

.scbt-story__photo {
	margin: 0;
	border-radius: var(--scbt-radius);
	overflow: hidden;
}

.scbt-story__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* The quote sits on a soft brushed shape. It is drawn with border-radius rather
   than an image, so it costs no request and scales cleanly. */
.scbt-story__quote {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 11.5rem;
	padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem);
	text-align: center;
}

.scbt-story__quote::before {
	content: "";
	position: absolute;
	inset: -6% -9%;
	background: var(--scbt-blush-deep);
	border-radius: 54% 46% 51% 49% / 53% 47% 53% 47%;
	transform: rotate(-2deg);
	z-index: 0;
}

.scbt-story__quote blockquote,
.scbt-story__quote figcaption {
	position: relative;
	z-index: 1;
	margin: 0;
}

.scbt-story__quote blockquote p {
	font-family: var(--scbt-font-display);
	font-style: italic;
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
	line-height: 1.75;
	color: var(--scbt-ink);
}

.scbt-story__quote figcaption {
	margin-top: 0.9rem;
	font-family: var(--scbt-font-body);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--scbt-soft);
}

.scbt-story__sprig {
	position: absolute;
	right: -0.25rem;
	bottom: -1.1rem;
	width: 74px;
	color: var(--scbt-gold);
	opacity: 0.75;
	z-index: 1;
}

@media (max-width: 1000px) {
	.scbt-story__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
	.scbt-story__quote { grid-column: 1 / -1; min-height: 0; }
}

@media (max-width: 680px) {
	.scbt-story__grid { grid-template-columns: 1fr; }
	.scbt-story__photo img { aspect-ratio: 3 / 2; }
}

/* ----------------------------------------------------------- featured cards */

.scbt-feature { background: var(--scbt-surface); }

.scbt-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.scbt-cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.85rem, 1.8vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.scbt-card { margin: 0; }

.scbt-card__media {
	display: block;
	border-radius: var(--scbt-radius);
	overflow: hidden;
	margin-bottom: 0.9rem;
}

.scbt-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--scbt-slow) var(--scbt-ease);
}

.scbt-card:hover .scbt-card__media img,
.scbt-card:focus-within .scbt-card__media img {
	transform: scale(1.05);
}

.scbt-card h3 { margin-bottom: 0.25rem; }

.scbt-card p {
	font-size: 0.85rem;
	line-height: 1.5;
	margin-bottom: 0.7rem;
}

@media (max-width: 1100px) {
	.scbt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
	.scbt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scbt-sec__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (max-width: 380px) {
	.scbt-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- the custom cake process */

.scbt-process { background: var(--scbt-blush); }

.scbt-process__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.7fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.scbt-steps {
	--scbt-step-gap: clamp(0.75rem, 2vw, 1.5rem);
	display: flex;
	align-items: flex-start;
	gap: var(--scbt-step-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.scbt-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

/* The connectors between the steps. They are decoration, so they are drawn in a
   pseudo element and never reach the accessibility tree, and they disappear the
   moment the steps stop being a single row. */
.scbt-step:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	top: 16px;
	right: calc(var(--scbt-step-gap) / -2);
	transform: translateX(50%);
	font-size: 1.05rem;
	line-height: 1;
	color: rgba(51, 36, 28, 0.38);
}

.scbt-step__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 0.85rem;
	border: 1px solid rgba(51, 36, 28, 0.22);
	border-radius: var(--scbt-pill);
	color: var(--scbt-cocoa);
	background: rgba(255, 255, 255, 0.45);
}

.scbt-step__n {
	display: block;
	font-family: var(--scbt-font-display);
	font-size: 1.05rem;
	color: var(--scbt-ink);
	margin-bottom: 0.3rem;
}

.scbt-step h3 {
	font-family: var(--scbt-font-body) !important;
	font-size: 0.92rem !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-bottom: 0.35rem;
}

.scbt-step p {
	font-size: 0.8rem;
	line-height: 1.55;
}

@media (max-width: 1000px) {
	.scbt-process__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.scbt-steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.5rem, 5vw, 2.25rem);
	}
	.scbt-step:not(:last-child)::after { content: none; }
}

@media (max-width: 380px) {
	.scbt-steps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- celebration */

.scbt-celebrate { background: var(--scbt-surface); }

.scbt-celebrate__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.85fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.scbt-occasions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The design staggers the row. The offset is dropped on small screens, where it
   would only make the grid look broken. */
.scbt-occasion:nth-child(even) { margin-top: clamp(1rem, 2.4vw, 2rem); }

.scbt-occasion a {
	display: block;
	text-decoration: none;
}

.scbt-occasion__media {
	display: block;
	border-radius: var(--scbt-radius);
	overflow: hidden;
	margin-bottom: 0.6rem;
}

.scbt-occasion__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform var(--scbt-slow) var(--scbt-ease);
}

.scbt-occasion a:hover .scbt-occasion__media img,
.scbt-occasion a:focus-visible .scbt-occasion__media img {
	transform: scale(1.05);
}

.scbt-occasion__label {
	font-family: var(--scbt-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--scbt-ink);
	border-bottom: 1px solid var(--scbt-line);
	padding-bottom: 2px;
}

.scbt-occasion a:hover .scbt-occasion__label,
.scbt-occasion a:focus-visible .scbt-occasion__label {
	border-bottom-color: var(--scbt-cocoa);
	color: var(--scbt-cocoa);
}

@media (max-width: 1000px) {
	.scbt-celebrate__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.scbt-occasions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scbt-occasion:nth-child(even) { margin-top: 0; }
}

/* ------------------------------------------------------------- testimonial */

.scbt-kind { background: var(--scbt-cream); }

.scbt-kind__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.85fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.scbt-quote {
	position: relative;
	margin: 0;
	padding-left: clamp(2.25rem, 4vw, 3.25rem);
	border-left: 1px solid var(--scbt-line);
}

.scbt-quote__mark {
	position: absolute;
	left: clamp(1rem, 2vw, 1.5rem);
	top: -0.35rem;
	font-family: var(--scbt-font-display);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--scbt-gold);
	opacity: 0.65;
}

.scbt-quote blockquote { margin: 0; }

.scbt-quote blockquote p {
	font-family: var(--scbt-font-display);
	font-style: italic;
	font-size: clamp(1.15rem, 2.3vw, 1.6rem);
	line-height: 1.6;
	color: var(--scbt-ink);
	max-width: 30ch;
}

.scbt-quote figcaption {
	margin-top: 1.1rem;
	font-family: var(--scbt-font-body);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--scbt-soft);
}

.scbt-quote figcaption strong {
	display: block;
	font-weight: 500;
	color: var(--scbt-ink);
	letter-spacing: 0.04em;
}

.scbt-kind__note {
	margin-top: 1.5rem !important;
	font-size: 0.78rem !important;
	color: var(--scbt-soft);
}

@media (max-width: 1000px) {
	.scbt-kind__grid { grid-template-columns: 1fr; }
	.scbt-quote { padding-left: clamp(1.5rem, 5vw, 2.25rem); }
}

/* ---------------------------------------------------------------- why block */

.scbt-why {
	background: var(--scbt-surface);
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	border-top: 1px solid var(--scbt-line);
}

.scbt-why__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.scbt-why__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-inline: clamp(0.75rem, 2vw, 1.75rem);
	border-left: 1px solid var(--scbt-line);
}

.scbt-why__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.scbt-why__item svg {
	flex: 0 0 auto;
	color: var(--scbt-cocoa);
}

.scbt-why__item h3 {
	font-family: var(--scbt-font-body) !important;
	font-size: 0.88rem !important;
	font-weight: 500;
	margin-bottom: 0.15rem;
}

.scbt-why__item p {
	font-size: 0.8rem;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.scbt-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 0;
	}
	.scbt-why__item:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 480px) {
	.scbt-why__list { grid-template-columns: 1fr; gap: 1.25rem; }
	.scbt-why__item { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------- closing band */

.scbt-cta {
	position: relative;
	overflow: hidden;
	background: var(--scbt-cocoa);
}

.scbt-cta__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.scbt-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% 50%;
	display: block;
}

/* Heavy enough that white body copy clears 4.5:1 over the lightest part of the
   photograph underneath. */
.scbt-cta__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(46, 25, 16, 0.94) 0%,
		rgba(46, 25, 16, 0.88) 45%,
		rgba(46, 25, 16, 0.68) 100%
	);
}

.scbt-cta__body {
	position: relative;
	padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
}

.scbt-cta h2 {
	color: #FFF !important;
	font-size: clamp(1.5rem, 3.2vw, 2.2rem);
	max-width: 22ch;
}

.scbt-cta p {
	color: rgba(255, 255, 255, 0.88);
	max-width: 46ch;
	margin-top: 0.75rem;
}

/* ------------------------------------------------------------------- footer */

.scbt-footer {
	background: var(--scbt-cocoa);
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--scbt-font-body);
	padding-block: clamp(2.75rem, 5vw, 4rem) 0;
}

.scbt-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr) minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 0.85fr);
	gap: clamp(1.75rem, 3vw, 2.75rem);
}

/* The wordmark is dark on transparent, so it is flipped to read on the cocoa. */
.scbt-footer__logo img {
	display: block;
	width: 150px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.scbt-footer address {
	font-style: normal;
	font-size: 0.83rem;
	line-height: 1.85;
	margin-top: 1.1rem;
	color: rgba(255, 255, 255, 0.72);
}

.scbt-footer h2,
.scbt-footer h3 {
	font-family: var(--scbt-font-body) !important;
	font-size: 0.73rem !important;
	font-weight: 400;
	letter-spacing: var(--scbt-track);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62) !important;
	margin: 0 0 1rem;
}

.scbt-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scbt-footer li { margin-bottom: 0.62rem; }

.scbt-footer a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.85rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--scbt-fast) var(--scbt-ease),
		border-color var(--scbt-fast) var(--scbt-ease);
}

.scbt-footer a:hover,
.scbt-footer a:focus-visible {
	color: #FFF;
	border-bottom-color: var(--scbt-gold);
}

/* Mailing list. The markup is the plugin's own shortcode, so only the skin
   changes here: the fields, the nonce and the honeypot are untouched. */
.scbt-footer .scbt-form { max-width: none; }

.scbt-footer .scbt-form form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.scbt-footer .scbt-form .scbt-field {
	flex: 1 1 9rem;
	margin-bottom: 0;
	min-width: 0;
}

.scbt-footer .scbt-form label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.scbt-footer .scbt-form input[type="email"] {
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--scbt-pill);
	color: #FFF;
	padding: 0.7rem 1.1rem;
	font-size: 0.85rem;
}

.scbt-footer .scbt-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.scbt-footer .scbt-form button {
	background: var(--scbt-gold);
	color: #241309;
	border-radius: var(--scbt-pill);
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	padding: 0.7rem 1.25rem;
	flex: 0 0 auto;
}

.scbt-footer .scbt-form button:hover,
.scbt-footer .scbt-form button:focus-visible {
	background: #D7A75E;
	color: #241309;
}

/* Social icons as outlined circles, as the design has them. */
.scbt-social {
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.scbt-social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--scbt-pill);
	color: rgba(255, 255, 255, 0.82);
}

.scbt-social a:hover,
.scbt-social a:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--scbt-gold);
	color: #FFF;
}

.scbt-footer__bar {
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--scbt-line-light);
	padding-block: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.58);
}

.scbt-footer__bar p { margin: 0; }

.scbt-footer__bar nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.scbt-footer__bar a { font-size: 0.78rem; }

@media (max-width: 1100px) {
	.scbt-footer__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
	}
	.scbt-footer__mail { grid-column: 1 / -1; }
	.scbt-footer .scbt-form form { max-width: 26rem; }
}

@media (max-width: 640px) {
	.scbt-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scbt-footer__brand { grid-column: 1 / -1; }
	.scbt-footer__bar { justify-content: flex-start; }
}

/* Focus is the one outline that must never be lost against the dark footer. */
.scbt-footer :where(a, button, input):focus-visible {
	outline: 3px solid var(--scbt-gold);
	outline-offset: 2px;
}

/* The homepage ends on the closing band, which is meant to butt against the footer.
   Every other page ends on body copy and needs the gap back. */
body:not(.home) .scbt-footer {
	margin-top: clamp(3rem, 6vw, 5rem);
}

/* The restored interior pages open with a full bleed banner. The redesigned header
   sits directly on top of it, so it must not carry the old separator's gap. */
body:not(.home) .wp-block-post-content > .wp-block-cover:first-child {
	margin-top: 0;
}

/* The "Why" band's one line of copy, held to a comfortable measure. */
.scbt-why > .scbt-in > p {
	max-width: 62ch;
	margin-top: 0.6rem;
}

/* Core gives every top level block a 24px top margin. The header, the hero and the
   closing band are meant to meet with no seam, so the two that matter are zeroed. */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* The parent theme does not set a global border box, so padding was being added on
   top of every min-height and fixed width in the redesign. The hero came out 184px
   taller than it was asked to be. Scoped to the redesigned components. */
.scbt-home,
.scbt-header,
.scbt-footer,
.scbt-topbar,
.scbt-home *,
.scbt-header *,
.scbt-footer *,
.scbt-topbar * {
	box-sizing: border-box;
}

/* With the padding now inside the box, the hero can state its real height. */
.scbt-hero__body {
	min-height: clamp(420px, 40vw, 560px);
}

/* The brushed shape bleeds past its own box. That is fine while the quote is a
   narrow third column, but once the story grid collapses the quote spans the page
   and the bleed becomes sideways scroll. */
@media (max-width: 1000px) {
	.scbt-story__quote::before {
		inset: -6% 0;
	}
}

/* Belt and braces for the same shape: clip rather than hidden, so no scroll
   container is created and nothing else in the section changes behaviour. */
.scbt-story {
	overflow-x: clip;
}

/* Navigation between the desktop bar and the overlay.
   The seven item bar is wide: at 1024 it wrapped onto a second line and the header
   grew a ragged extra row. Below 1200 the type and the gaps tighten; below 900 there
   is no honest way to fit it, so core's overlay takes over early. The two rules that
   switch it are the ones core itself uses at its own 600px breakpoint. */
@media (max-width: 1199px) {
	.scbt-header .wp-block-navigation {
		font-size: 0.74rem;
		letter-spacing: 0.02em;
	}
	.scbt-header .wp-block-navigation__container {
		gap: 0.85rem;
	}
}

@media (max-width: 1023px) {
	.scbt-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.scbt-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}