/*
Theme Name: Savora Kitchen
Theme URI: https://savoraskitchen.com
Author: Savora Kitchen B.V.
Author URI: https://savoraskitchen.com
Description: A warm, chef-led landing theme for Savora's Kitchen — handcrafted spice blends, finishing sauces and 20-minute gourmet meal kits. Editorial hero, accordion range, kit sheet, craft standards, founder's letter, and a newsletter footer. WooCommerce-aware but not dependent.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savora
Tags: food, e-commerce, editorial, landing-page, custom-colors, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   §1  Tokens
   ========================================================================== */

:root {
	/* Ground & ink */
	--sv-cream: #faf6ee;
	--sv-parchment: #f1e7d6;
	--sv-paper: #fffdf9;
	--sv-ink: #1b1410;
	--sv-ink-2: #2a201a;
	--sv-ink-3: #3a2e26;

	/* Accents */
	--sv-ember: #c8541f;
	--sv-ember-deep: #a8420f;
	--sv-ember-soft: #f3d9c8;
	--sv-olive: #5f6b3f;
	--sv-stone: #8b8071;

	/* Derived */
	--sv-line: rgba(27, 20, 16, .13);
	--sv-line-dark: rgba(250, 246, 238, .16);
	--sv-body: #453a32;
	--sv-body-dark: rgba(250, 246, 238, .74);

	/* Geometry */
	--sv-shell: 1200px;
	--sv-gut: clamp(1.15rem, 4vw, 2.5rem);
	--sv-r: 20px;
	--sv-r-lg: 30px;
	--sv-r-sm: 12px;

	/* Type */
	--sv-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--sv-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--sv-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Motion */
	--sv-ease: cubic-bezier(.22, .61, .36, 1);

	/* Elevation — warm, never grey */
	--sv-shadow-sm: 0 1px 2px rgba(27, 20, 16, .05), 0 6px 18px -8px rgba(27, 20, 16, .14);
	--sv-shadow: 0 2px 4px rgba(27, 20, 16, .05), 0 18px 40px -18px rgba(27, 20, 16, .26);
	--sv-shadow-lg: 0 4px 8px rgba(27, 20, 16, .06), 0 42px 80px -32px rgba(27, 20, 16, .38);
}

/* ==========================================================================
   §2  Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--sv-cream);
	color: var(--sv-body);
	font-family: var(--sv-sans);
	font-size: 1.0625rem;
	line-height: 1.68;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
svg,
video { max-width: 100%; }

img { height: auto; border-style: none; }

/* House grade. Photography from mixed libraries drifts in white balance and
   saturation; one rule graded the whole set rather than editing every file.
   Adjust here, not per image. */
.sv-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.04) contrast(1.03) brightness(1.01);
}

a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--sv-display);
	font-weight: 600;
	font-variation-settings: "SOFT" 0, "WONK" 0;
	color: var(--sv-ink);
	letter-spacing: -.02em;
	line-height: 1.06;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

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

.sv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .8rem 1.2rem;
	background: var(--sv-ink);
	color: var(--sv-cream);
	font: 500 .85rem/1 var(--sv-sans);
	border-radius: 0 0 var(--sv-r-sm) 0;
}
.sv-skip:focus { left: 0; }

.sv-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   §3  Layout primitives
   ========================================================================== */

.sv-shell {
	width: 100%;
	max-width: var(--sv-shell);
	margin-inline: auto;
	padding-inline: var(--sv-gut);
}

.sv-shell--narrow { max-width: 820px; }

.sv-section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.sv-section--cream { background: var(--sv-cream); }
.sv-section--parchment { background: var(--sv-parchment); }
.sv-section--paper { background: #fff; }

/* Section heading block, centred — the recurring rhythm of the page. */
.sv-head {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}
.sv-head--left { margin-inline: 0; text-align: left; max-width: 34rem; }
.sv-head h2 {
	font-size: clamp(1.85rem, 3.6vw, 2.9rem);
	margin-block: .9rem .85rem;
}
.sv-head p {
	font-size: clamp(1rem, 1.4vw, 1.115rem);
	color: var(--sv-body);
	max-width: 38rem;
	margin-inline: auto;
}
.sv-head--left p { margin-inline: 0; }

.sv-label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 500 .705rem/1 var(--sv-mono);
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--sv-ember);
}
.sv-label::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.sv-label--chip {
	padding: .5rem .85rem .5rem .7rem;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	background: var(--sv-paper);
	color: var(--sv-ink);
}
.sv-label--chip::before { background: var(--sv-ember); }
.sv-label--onDark { color: var(--sv-ember-soft); }

/* ==========================================================================
   §4  Buttons
   ========================================================================== */

.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .95rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--sv-ember);
	color: #fff;
	font: 500 .95rem/1 var(--sv-sans);
	letter-spacing: -.005em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .28s var(--sv-ease), background-color .28s var(--sv-ease), box-shadow .28s var(--sv-ease);
	box-shadow: 0 10px 26px -12px rgba(200, 84, 31, .7);
}
.sv-btn:hover {
	background: var(--sv-ember-deep);
	transform: translateY(-2px);
}
.sv-btn svg { flex: none; }

.sv-btn--ghost {
	background: transparent;
	color: var(--sv-ink);
	border-color: var(--sv-line);
	box-shadow: none;
}
.sv-btn--ghost:hover { background: rgba(27, 20, 16, .05); border-color: rgba(27, 20, 16, .3); }

.sv-btn--onDark {
	background: rgba(250, 246, 238, .09);
	color: var(--sv-cream);
	border-color: var(--sv-line-dark);
	box-shadow: none;
	backdrop-filter: blur(6px);
}
.sv-btn--onDark:hover { background: rgba(250, 246, 238, .16); }

.sv-btn--ink { background: var(--sv-ink); box-shadow: 0 10px 26px -14px rgba(27, 20, 16, .8); }
.sv-btn--ink:hover { background: #0f0b08; }

.sv-btn--sm { padding: .7rem 1.15rem; font-size: .875rem; }

/* Text link with a sliding underline. */
.sv-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font: 500 .95rem/1.2 var(--sv-sans);
	color: var(--sv-ember);
	text-decoration: none;
	border-bottom: 1px solid rgba(200, 84, 31, .35);
	padding-bottom: 2px;
	transition: border-color .25s var(--sv-ease), gap .25s var(--sv-ease);
}
.sv-link:hover { border-color: var(--sv-ember); gap: .7rem; }

/* ==========================================================================
   §5  Reveal on scroll
   ========================================================================== */

/* Armed only once JS confirms it can disarm it — with JS off, or before the
   observer boots, everything stays visible and readable. */
.sv-js [data-sv-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--sv-ease), transform .7s var(--sv-ease);
}
.sv-js [data-sv-reveal].is-in { opacity: 1; transform: none; }
.sv-js [data-sv-reveal][data-sv-delay="1"] { transition-delay: .07s; }
.sv-js [data-sv-reveal][data-sv-delay="2"] { transition-delay: .14s; }
.sv-js [data-sv-reveal][data-sv-delay="3"] { transition-delay: .21s; }
.sv-js [data-sv-reveal][data-sv-delay="4"] { transition-delay: .28s; }
.sv-js [data-sv-reveal][data-sv-delay="5"] { transition-delay: .35s; }

/* ==========================================================================
   §6  Header
   ========================================================================== */

.sv-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	padding-block: .85rem;
	transition: background-color .35s var(--sv-ease), box-shadow .35s var(--sv-ease), padding .35s var(--sv-ease);
}
.sv-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

/* Over the dark hero the bar is transparent; anywhere else it is paper. */
.sv-header { background: var(--sv-cream); box-shadow: 0 1px 0 var(--sv-line); }
.sv-has-hero .sv-header { background: transparent; box-shadow: none; }
.sv-has-hero .sv-header .sv-brand,
.sv-has-hero .sv-header .sv-nav a,
.sv-has-hero .sv-header .sv-header__signin { color: var(--sv-cream); }
.sv-has-hero .sv-header .sv-brand { --sv-lockup-sub: rgba(250, 246, 238, .62); }
.sv-has-hero .sv-header .sv-nav a::after { background: var(--sv-ember-soft); }
.sv-has-hero .sv-header .sv-burger span { background: var(--sv-cream); }

.sv-has-hero .sv-header.is-stuck {
	background: rgba(250, 246, 238, .93);
	backdrop-filter: saturate(1.4) blur(14px);
	box-shadow: 0 1px 0 var(--sv-line), 0 16px 40px -30px rgba(27, 20, 16, .7);
	padding-block: .55rem;
}
.sv-has-hero .sv-header.is-stuck .sv-brand,
.sv-has-hero .sv-header.is-stuck .sv-nav a,
.sv-has-hero .sv-header.is-stuck .sv-header__signin { color: var(--sv-ink); }
.sv-has-hero .sv-header.is-stuck .sv-brand { --sv-lockup-sub: var(--sv-stone); }
.sv-has-hero .sv-header.is-stuck .sv-burger span { background: var(--sv-ink); }

/* The brand lockup. One knob — --sv-lockup-size, the wordmark's size — and
   every other measure derives from it in em, so the header and the footer are
   the same lockup at two scales. The sub-line is a flex row of letters with
   space-between, which justifies "KITCHEN" to the exact width of the wordmark
   above it: the same optical fit assets/brand/logo.svg is built to. */
.sv-lockup {
	display: inline-flex;
	align-items: center;
	gap: .32em;
	font-size: var(--sv-lockup-size, 1.3rem);
	line-height: 1;
	white-space: nowrap;
}
.sv-lockup__mark {
	flex: none;
	/* 0.736 is the mark's ink aspect ratio; see MARK_RATIO in build-brand.py. */
	height: 1.42em;
	width: calc(1.42em * .736);
	color: var(--sv-lockup-mark, var(--sv-ember));
}
.sv-lockup__type { display: grid; gap: .2em; }
.sv-lockup__name {
	font-family: var(--sv-display);
	font-weight: 600;
	font-size: 1em;
	line-height: .82;
	letter-spacing: -.012em;
}
.sv-lockup__sub {
	display: flex;
	justify-content: space-between;
	/* The mono line is set at a third of the wordmark and justified to its
	   width; below ~7px the tracked capitals stop resolving. */
	font: 500 max(7px, .32em)/1 var(--sv-mono);
	color: var(--sv-lockup-sub, var(--sv-stone));
}

.sv-brand {
	display: inline-flex;
	align-items: center;
	color: var(--sv-ink);
	text-decoration: none;
}
.sv-brand img { max-height: 40px; width: auto; }

.sv-nav { margin-inline: auto; }
.sv-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 2vw, 1.9rem);
	list-style: none;
}
.sv-nav a {
	position: relative;
	display: inline-block;
	padding-block: .4rem;
	font: 500 .93rem/1 var(--sv-sans);
	color: var(--sv-ink);
	text-decoration: none;
}
.sv-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--sv-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--sv-ease);
}
.sv-nav a:hover::after,
.sv-nav .current-menu-item > a::after { transform: scaleX(1); }

.sv-header__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.sv-header__signin {
	font: 500 .9rem/1 var(--sv-sans);
	color: var(--sv-ink);
	text-decoration: none;
}
.sv-header__signin:hover { color: var(--sv-ember); }
.sv-cart__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding-inline: .3rem;
	border-radius: 999px;
	background: var(--sv-ember);
	color: #fff;
	font: 500 .68rem/1 var(--sv-mono);
}

.sv-burger {
	display: none;
	width: 40px; height: 40px;
	padding: 0;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
}
.sv-burger span {
	display: block;
	width: 15px; height: 1.5px;
	margin: 3px auto;
	background: var(--sv-ink);
	transition: transform .3s var(--sv-ease), opacity .3s var(--sv-ease);
}
.sv-burger[aria-expanded="true"] span:first-child { transform: translateY(2.25px) rotate(45deg); }
.sv-burger[aria-expanded="true"] span:last-child { transform: translateY(-2.25px) rotate(-45deg); }

/* ==========================================================================
   §7  Hero
   ========================================================================== */

.sv-hero {
	position: relative;
	isolation: isolate;
	padding-top: clamp(7.5rem, 14vw, 10.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	background: var(--sv-ink);
	color: var(--sv-cream);
	overflow: hidden;
}
/* Warm hearth glow instead of the usual flat dark panel. */
.sv-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto;
	height: 90%;
	background:
		radial-gradient(58% 70% at 50% 0%, rgba(200, 84, 31, .34), transparent 68%),
		radial-gradient(40% 55% at 85% 12%, rgba(95, 107, 63, .22), transparent 70%);
	z-index: -1;
	pointer-events: none;
}
.sv-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 46%;
	background: linear-gradient(to bottom, transparent, rgba(250, 246, 238, .06));
	z-index: -1;
}

.sv-hero__inner { text-align: center; }

.sv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .42rem .95rem .42rem .55rem;
	border: 1px solid var(--sv-line-dark);
	border-radius: 999px;
	background: rgba(250, 246, 238, .07);
	color: var(--sv-cream);
	font: 500 .78rem/1 var(--sv-sans);
	text-decoration: none;
	backdrop-filter: blur(6px);
	transition: background-color .3s var(--sv-ease);
}
.sv-hero__eyebrow:hover { background: rgba(250, 246, 238, .14); }
.sv-hero__eyebrow b {
	padding: .28rem .5rem;
	border-radius: 999px;
	background: var(--sv-ember);
	font: 500 .66rem/1 var(--sv-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sv-hero h1 {
	margin: 1.5rem auto .1rem;
	max-width: 21ch;
	font-size: clamp(2.55rem, 6.1vw, 4.55rem);
	font-weight: 600;
	line-height: .99;
	letter-spacing: -.032em;
	color: var(--sv-cream);
}
.sv-hero h1 em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--sv-ember-soft);
	font-variation-settings: "SOFT" 30, "WONK" 1;
}

.sv-hero__lede {
	margin: 1.35rem auto 0;
	max-width: 43ch;
	font-size: clamp(1.02rem, 1.5vw, 1.155rem);
	color: var(--sv-body-dark);
}

.sv-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 2rem;
}

.sv-hero__proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .55rem 1.6rem;
	margin-top: 2.1rem;
	list-style: none;
	font: 400 .78rem/1.4 var(--sv-mono);
	letter-spacing: .04em;
	color: rgba(250, 246, 238, .55);
}
.sv-hero__proof li { display: flex; align-items: center; gap: .5rem; }
.sv-hero__proof svg { color: var(--sv-ember); flex: none; }

/* --- The triptych ------------------------------------------------------- */

.sv-hero__media {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.7rem, 1.6vw, 1.1rem);
	align-items: end;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(-9rem, -7vw, -5rem);
}
.sv-plate {
	position: relative;
	margin: 0;
	border-radius: var(--sv-r-lg);
	overflow: hidden;
	background: var(--sv-ink-2);
	box-shadow: var(--sv-shadow-lg);
	aspect-ratio: 4 / 5;
}
.sv-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(250, 246, 238, .16);
	pointer-events: none;
}
/* The centre plate sits proud, as in the reference layout. */
.sv-plate--b { aspect-ratio: 4 / 5.5; transform: translateY(-1.6rem); z-index: 2; }
.sv-plate--a { aspect-ratio: 4 / 4.6; }
.sv-plate--c { aspect-ratio: 4 / 4.6; }

/* Floating product card over the centre plate. */
.sv-flavour {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	width: min(19rem, calc(100% - 1.6rem));
	transform: translateX(-50%);
	padding: .9rem 1rem;
	border-radius: 16px;
	background: rgba(255, 253, 249, .93);
	backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: var(--sv-shadow);
	text-align: left;
	color: var(--sv-ink);
}
.sv-flavour__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}
.sv-flavour strong {
	font-family: var(--sv-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -.01em;
}
.sv-flavour__price { font: 500 .82rem/1 var(--sv-mono); color: var(--sv-ember); }
.sv-flavour p {
	margin: .25rem 0 .6rem;
	font-size: .795rem;
	line-height: 1.45;
	color: var(--sv-stone);
}
.sv-heat {
	display: flex;
	align-items: center;
	gap: .4rem;
	font: 400 .66rem/1 var(--sv-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sv-stone);
}
.sv-heat i {
	width: 22px; height: 4px;
	border-radius: 2px;
	background: rgba(27, 20, 16, .13);
}
.sv-heat i.is-on { background: var(--sv-ember); }

/* ==========================================================================
   §8  Problem strip
   ========================================================================== */

.sv-problem {
	padding-top: clamp(9rem, 15vw, 13rem);
	padding-bottom: clamp(4rem, 8vw, 6.5rem);
	background: var(--sv-parchment);
}
.sv-problem__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(.8rem, 1.5vw, 1.1rem);
	margin-top: clamp(2.5rem, 4vw, 3.4rem);
}
.sv-pain {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.35rem 1.3rem 1.5rem;
	border: 1px solid rgba(27, 20, 16, .09);
	border-radius: var(--sv-r);
	background: var(--sv-paper);
	box-shadow: var(--sv-shadow-sm);
}
.sv-pain__icon {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	background: var(--sv-ember-soft);
	color: var(--sv-ember-deep);
}
.sv-pain h3 {
	font-family: var(--sv-sans);
	font-size: .965rem;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.35;
}
.sv-pain p { font-size: .875rem; line-height: 1.6; color: var(--sv-stone); }

/* ==========================================================================
   §9  Range — accordion + product panel
   ========================================================================== */

.sv-range__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	margin-top: clamp(2.5rem, 4vw, 3.6rem);
}

.sv-acc { border-top: 1px solid var(--sv-line); }
.sv-acc details {
	border-bottom: 1px solid var(--sv-line);
}
.sv-acc summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem .25rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--sv-display);
	font-size: clamp(1.06rem, 1.5vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--sv-ink);
	transition: color .25s var(--sv-ease);
}
.sv-acc summary::-webkit-details-marker { display: none; }
.sv-acc summary:hover { color: var(--sv-ember); }
.sv-acc summary::after {
	content: "";
	flex: none;
	width: 26px; height: 26px;
	margin-left: auto;
	border: 1px solid var(--sv-line);
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center/10px 1.4px no-repeat,
		linear-gradient(currentColor, currentColor) center/1.4px 10px no-repeat;
	transition: transform .3s var(--sv-ease), background-size .3s var(--sv-ease);
}
.sv-acc details[open] summary { color: var(--sv-ember); }
.sv-acc details[open] summary::after {
	transform: rotate(90deg);
	background:
		linear-gradient(currentColor, currentColor) center/10px 1.4px no-repeat,
		linear-gradient(currentColor, currentColor) center/1.4px 0 no-repeat;
}
.sv-acc__num {
	font: 400 .7rem/1 var(--sv-mono);
	letter-spacing: .08em;
	color: var(--sv-stone);
	padding-top: .2rem;
}
.sv-acc__body {
	padding: 0 2.6rem 1.4rem 2.9rem;
	font-size: .935rem;
	line-height: 1.68;
	color: var(--sv-body);
}
.sv-acc__body p { margin-bottom: .75rem; }
.sv-acc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .5rem;
	list-style: none;
	margin-top: .3rem;
}
.sv-acc__meta li {
	padding: .3rem .6rem;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	font: 400 .705rem/1.3 var(--sv-mono);
	letter-spacing: .04em;
	color: var(--sv-stone);
	background: var(--sv-cream);
}

/* Right-hand panel: photograph, price tag, spec chips.

   The photo box is 8:5 to match the crop the build ships. It used to be 4:5,
   which made CSS cover-crop a landscape file and threw away both the sides and
   half the effective resolution. Sticky keeps the shorter panel beside the
   six-row accordion instead of leaving a hole. */
.sv-panel {
	padding: clamp(1rem, 2vw, 1.4rem);
	border-radius: var(--sv-r-lg);
	background: var(--sv-parchment);
	box-shadow: var(--sv-shadow-sm);
	position: sticky;
	top: 6rem;
}
.sv-panel__photo {
	position: relative;
	margin: 0;
	border-radius: var(--sv-r);
	overflow: hidden;
	aspect-ratio: 8 / 5;
	background: var(--sv-ink-2);
}
.sv-panel__tag {
	position: absolute;
	top: 1.9rem; right: 1.9rem;
	display: grid;
	place-items: center;
	width: 84px; height: 84px;
	border-radius: 50%;
	background: var(--sv-ember);
	color: #fff;
	text-align: center;
	font: 500 .74rem/1.25 var(--sv-mono);
	letter-spacing: .02em;
	box-shadow: var(--sv-shadow);
	rotate: -6deg;
}
.sv-panel__tag b { display: block; font: 600 1.02rem/1 var(--sv-sans); }
.sv-panel__strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	margin-top: .9rem;
}
.sv-panel__stat {
	padding: .8rem .75rem;
	border-radius: var(--sv-r-sm);
	background: var(--sv-paper);
	text-align: center;
}
.sv-panel__stat b {
	display: block;
	font-family: var(--sv-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sv-ink);
	letter-spacing: -.02em;
}
.sv-panel__stat span {
	font: 400 .655rem/1.3 var(--sv-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sv-stone);
}

/* ==========================================================================
   §10  Kit sheet
   ========================================================================== */

.sv-sheet {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	border-radius: var(--sv-r-lg);
	background: var(--sv-paper);
	box-shadow: var(--sv-shadow-lg);
	overflow: hidden;
	border: 1px solid rgba(27, 20, 16, .07);
}
.sv-sheet__bar {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .85rem 1.1rem;
	background: var(--sv-ink);
	color: var(--sv-cream);
}
.sv-sheet__bar svg { color: var(--sv-ember); flex: none; }
.sv-sheet__tabs {
	display: flex;
	gap: .35rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.sv-sheet__tabs::-webkit-scrollbar { display: none; }
.sv-sheet__tabs li {
	padding: .4rem .8rem;
	border-radius: 999px;
	font: 500 .78rem/1 var(--sv-sans);
	color: rgba(250, 246, 238, .6);
	white-space: nowrap;
}
.sv-sheet__tabs li[aria-current="true"] {
	background: rgba(250, 246, 238, .12);
	color: var(--sv-cream);
}
.sv-sheet__badge {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .7rem;
	border-radius: 999px;
	background: rgba(95, 107, 63, .28);
	color: #dbe3c4;
	font: 400 .69rem/1 var(--sv-mono);
	letter-spacing: .07em;
	white-space: nowrap;
}

.sv-sheet__body {
	display: grid;
	grid-template-columns: 15.5rem minmax(0, 1fr);
	gap: 0;
}
.sv-sheet__rail {
	padding: 1.5rem 1.3rem;
	border-right: 1px solid var(--sv-line);
	background: var(--sv-cream);
}
.sv-sheet__rail > h3 {
	font: 500 .68rem/1 var(--sv-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sv-stone);
	margin-bottom: 1rem;
}
.sv-steps { list-style: none; }
.sv-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 1.55rem 1fr;
	gap: .7rem;
	padding-bottom: 1.05rem;
}
.sv-steps li:last-child { padding-bottom: 0; }
.sv-steps li::before {
	content: "";
	position: absolute;
	left: .74rem; top: 1.6rem; bottom: .1rem;
	width: 1px;
	background: var(--sv-line);
}
.sv-steps li:last-child::before { display: none; }
.sv-steps b {
	display: grid;
	place-items: center;
	width: 1.55rem; height: 1.55rem;
	border-radius: 50%;
	background: var(--sv-ink);
	color: var(--sv-cream);
	font: 500 .7rem/1 var(--sv-mono);
}
.sv-steps li.is-savora b { background: var(--sv-ember); }
.sv-steps span { font-size: .855rem; line-height: 1.45; color: var(--sv-ink); }
.sv-steps em {
	display: block;
	font: 400 .69rem/1.4 var(--sv-mono);
	font-style: normal;
	letter-spacing: .05em;
	color: var(--sv-stone);
}

.sv-sheet__main {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.2rem, 2.5vw, 2rem);
	padding: 1.5rem;
	align-items: start;
}
.sv-sheet__photo {
	margin: 0;
	border-radius: var(--sv-r);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--sv-parchment);
}
.sv-sheet__aside > h3 {
	font-family: var(--sv-display);
	font-size: 1.1rem;
	margin-bottom: .8rem;
}
.sv-checks { list-style: none; }
.sv-checks li {
	display: grid;
	grid-template-columns: 1.15rem 1fr;
	gap: .6rem;
	padding: .42rem 0;
	font-size: .875rem;
	line-height: 1.5;
	border-bottom: 1px dashed var(--sv-line);
}
.sv-checks li:last-child { border-bottom: 0; }
.sv-checks svg { color: var(--sv-olive); margin-top: .22rem; }
.sv-checks span { color: var(--sv-ink); }
.sv-checks i {
	font-style: normal;
	color: var(--sv-stone);
	font: 400 .72rem/1 var(--sv-mono);
	margin-left: .3rem;
}
.sv-ladder { margin-top: 1.1rem; }
.sv-ladder h4 {
	font: 500 .68rem/1 var(--sv-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sv-stone);
	font-family: var(--sv-mono);
	margin-bottom: .6rem;
}
.sv-ladder__row {
	display: grid;
	grid-template-columns: 5.4rem 1fr 2.2rem;
	align-items: center;
	gap: .6rem;
	font-size: .8rem;
	padding: .2rem 0;
}
.sv-ladder__bar {
	height: 6px;
	border-radius: 3px;
	background: rgba(27, 20, 16, .09);
	overflow: hidden;
}
.sv-ladder__bar i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--sv-olive), var(--sv-ember));
}
.sv-ladder__row span:last-child {
	font: 400 .7rem/1 var(--sv-mono);
	color: var(--sv-stone);
	text-align: right;
}

/* ==========================================================================
   §11  Craft rows
   ========================================================================== */

.sv-rows { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.sv-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding-block: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--sv-line);
}
.sv-row:first-child { border-top: 0; padding-top: 0; }
.sv-row__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	margin-bottom: 1.1rem;
	border: 1px solid var(--sv-line);
	border-radius: 12px;
	background: var(--sv-cream);
	color: var(--sv-ember);
}
.sv-row h3 {
	font-size: clamp(1.2rem, 1.9vw, 1.45rem);
	margin-bottom: .6rem;
}
.sv-row__text > p {
	font-size: .975rem;
	max-width: 34rem;
	color: var(--sv-body);
}
.sv-row__list {
	list-style: none;
	margin-top: 1rem;
	display: grid;
	gap: .45rem;
}
.sv-row__list li {
	display: grid;
	grid-template-columns: 1.05rem 1fr;
	gap: .6rem;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--sv-ink);
}
.sv-row__list svg { color: var(--sv-olive); margin-top: .22rem; flex: none; }
.sv-row__media {
	position: relative;
	margin: 0;
	border-radius: var(--sv-r);
	overflow: hidden;
	aspect-ratio: 8 / 5;
	background: var(--sv-parchment);
	box-shadow: var(--sv-shadow-sm);
}
.sv-row__seal {
	position: absolute;
	left: 1rem; bottom: 1rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .8rem .45rem .55rem;
	border-radius: 999px;
	background: rgba(255, 253, 249, .94);
	backdrop-filter: blur(8px);
	font: 500 .72rem/1 var(--sv-sans);
	color: var(--sv-ink);
	box-shadow: var(--sv-shadow-sm);
}
.sv-row__seal svg { color: var(--sv-olive); }

/* ==========================================================================
   §12  Founder's letter
   ========================================================================== */

/* Parchment ground, so the paper card actually reads as a separate sheet —
   paper on cream is a 2% difference and the card disappeared. */
.sv-letter { position: relative; overflow: hidden; background: var(--sv-parchment); }
.sv-letter__doc {
	position: relative;
	max-width: 46rem;
	margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
	padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1.5rem, 4vw, 3.6rem);
	border: 1px solid rgba(27, 20, 16, .07);
	border-radius: 6px;
	background: var(--sv-paper);
	box-shadow: var(--sv-shadow-lg);
	font-family: var(--sv-display);
	font-size: clamp(1rem, 1.35vw, 1.09rem);
	line-height: 1.72;
	color: #3d322a;
}
/* Stacked-paper edges. */
.sv-letter__doc::before,
.sv-letter__doc::after {
	content: "";
	position: absolute;
	inset: auto 1.5% -7px;
	height: 7px;
	border-radius: 0 0 6px 6px;
	background: rgba(255, 253, 249, .8);
	box-shadow: 0 8px 20px -12px rgba(27, 20, 16, .5);
	z-index: -1;
}
.sv-letter__doc::after { inset: auto 3% -13px; opacity: .6; }
.sv-letter__doc p { margin-bottom: 1.15em; }
.sv-letter__doc p:first-of-type::first-letter {
	float: left;
	margin: .06em .1em 0 0;
	font-size: 3.3em;
	line-height: .78;
	font-weight: 600;
	color: var(--sv-ember);
}
.sv-letter__sign {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sv-line);
}
.sv-letter__sign figure {
	margin: 0;
	width: 54px; height: 54px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	background: var(--sv-parchment);
}
.sv-letter__sign b {
	display: block;
	font-family: var(--sv-display);
	font-size: 1.02rem;
	color: var(--sv-ink);
}
.sv-letter__sign span {
	font: 400 .72rem/1.4 var(--sv-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sv-stone);
	font-family: var(--sv-mono);
}
.sv-letter__scribble { margin-left: auto; color: var(--sv-ember); opacity: .85; }

/* Floating fact chips, echoing the reference's scattered cards. */
.sv-letter__chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .85rem;
	border-radius: 999px;
	background: var(--sv-paper);
	box-shadow: var(--sv-shadow);
	font: 500 .78rem/1 var(--sv-sans);
	color: var(--sv-ink);
	white-space: nowrap;
}
.sv-letter__chip svg { color: var(--sv-ember); }
.sv-letter__chip--1 { top: 18%; left: 2%; rotate: -4deg; }
.sv-letter__chip--2 { top: 46%; right: 1.5%; rotate: 3deg; }
.sv-letter__chip--3 { bottom: 14%; left: 4%; rotate: 2.5deg; }

/* ==========================================================================
   §13  CTA band
   ========================================================================== */

.sv-cta { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(4rem, 8vw, 6.5rem); }
.sv-cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.8rem, 4vw, 3.4rem);
	border-radius: var(--sv-r-lg);
	background: var(--sv-ink);
	color: var(--sv-cream);
	overflow: hidden;
	isolation: isolate;
}
.sv-cta__inner::before {
	content: "";
	position: absolute;
	/* A negative-z pseudo paints over the parent's background, so this alpha is
	   doing double duty as a tint. Anything past ~.25 turns the ink to mud. */
	inset: -55% 45% 5% -15%;
	background: radial-gradient(55% 62% at 26% 42%, rgba(200, 84, 31, .24), transparent 72%);
	z-index: -1;
}
.sv-cta h2 {
	color: var(--sv-cream);
	font-size: clamp(1.75rem, 3.4vw, 2.65rem);
	margin-bottom: .8rem;
}
.sv-cta h2 em { font-style: italic; color: var(--sv-ember-soft); font-weight: 400; }
.sv-cta p { color: var(--sv-body-dark); max-width: 34rem; }
.sv-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.6rem;
}
.sv-cta__media {
	margin: 0;
	border-radius: var(--sv-r);
	overflow: hidden;
	aspect-ratio: 8 / 5;
	box-shadow: var(--sv-shadow-lg);
}
.sv-cta__fine {
	margin-top: 1.1rem;
	font: 400 .74rem/1.5 var(--sv-mono);
	letter-spacing: .04em;
	color: rgba(250, 246, 238, .5);
}

/* ==========================================================================
   §14  Footer
   ========================================================================== */

.sv-footer {
	padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
	background: var(--sv-ink);
	color: var(--sv-body-dark);
	font-size: .9rem;
}
.sv-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.6rem, 4vw, 3rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--sv-line-dark);
}
.sv-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.sv-footer__mark {
	display: inline-flex;
	align-self: start;
	color: var(--sv-cream);
	text-decoration: none;
	--sv-lockup-size: 1.45rem;
	--sv-lockup-sub: rgba(250, 246, 238, .58);
}
.sv-footer__brand p { max-width: 30ch; font-size: .875rem; }

.sv-footer__col h3 {
	margin-bottom: .9rem;
	font: 500 .68rem/1 var(--sv-mono);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--sv-cream);
	font-family: var(--sv-mono);
}
.sv-footer__col ul { list-style: none; display: grid; gap: .55rem; }
.sv-footer__col a {
	color: var(--sv-body-dark);
	text-decoration: none;
	font-size: .885rem;
	transition: color .25s var(--sv-ease);
}
.sv-footer__col a:hover { color: var(--sv-ember-soft); }

/* Newsletter */
.sv-signup { margin-top: .3rem; }
.sv-signup h3 {
	font-family: var(--sv-display);
	font-size: 1.05rem;
	color: var(--sv-cream);
	margin-bottom: .4rem;
}
.sv-signup p { font-size: .84rem; margin-bottom: .85rem; }
.sv-signup__form { display: flex; gap: .45rem; flex-wrap: wrap; }
.sv-signup input[type="email"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .78rem 1rem;
	border: 1px solid var(--sv-line-dark);
	border-radius: 999px;
	background: rgba(250, 246, 238, .07);
	color: var(--sv-cream);
	font: 400 .9rem/1 var(--sv-sans);
}
.sv-signup input[type="email"]::placeholder { color: rgba(250, 246, 238, .45); }
.sv-signup__fine { margin-top: .7rem; font: 400 .7rem/1.5 var(--sv-mono); color: rgba(250, 246, 238, .42); }
.sv-signup__note {
	margin-top: .7rem;
	padding: .6rem .8rem;
	border-radius: var(--sv-r-sm);
	background: rgba(95, 107, 63, .3);
	color: #e2e8d0;
	font-size: .82rem;
}
.sv-signup__note--error { background: rgba(200, 84, 31, .28); color: #f6ded1; }
.sv-hp { position: absolute; left: -9999px; }

.sv-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	padding-block: 1.4rem;
	border-bottom: 1px solid var(--sv-line-dark);
}
.sv-badge {
	display: flex;
	align-items: center;
	gap: .55rem;
	font: 400 .78rem/1.4 var(--sv-mono);
	letter-spacing: .03em;
	color: rgba(250, 246, 238, .6);
}
.sv-badge svg { color: var(--sv-olive); flex: none; }

.sv-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.5rem;
	padding-top: 1.4rem;
	font: 400 .78rem/1.5 var(--sv-mono);
	letter-spacing: .02em;
	color: rgba(250, 246, 238, .5);
}
.sv-footer__bar ul { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; }
.sv-footer__bar a { text-decoration: none; }
.sv-footer__bar a:hover { color: var(--sv-ember-soft); }
.sv-footer__cookies {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ==========================================================================
   §15  Cookie consent
   ========================================================================== */

.sv-consent {
	position: fixed;
	z-index: 90;
	left: var(--sv-gut);
	bottom: var(--sv-gut);
	width: min(26rem, calc(100vw - var(--sv-gut) * 2));
	padding: 1.25rem 1.3rem;
	border-radius: var(--sv-r);
	background: var(--sv-paper);
	box-shadow: var(--sv-shadow-lg);
	transform: translateY(140%);
	transition: transform .5s var(--sv-ease);
}
.sv-consent.is-open { transform: none; }
.sv-consent h2 {
	font-size: 1.05rem;
	margin-bottom: .45rem;
}
.sv-consent p { font-size: .845rem; line-height: 1.55; color: var(--sv-stone); }
.sv-consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ==========================================================================
   §16  Interior pages, archives, comments
   ========================================================================== */

.sv-page { padding-block: clamp(6.5rem, 12vw, 9rem) clamp(3.5rem, 7vw, 6rem); }
.sv-page__head { max-width: 46rem; }
.sv-page__head h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	margin-block: .8rem .9rem;
}
.sv-page__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.2rem;
	font: 400 .74rem/1.4 var(--sv-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sv-stone);
}
.sv-page__hero {
	margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
	border-radius: var(--sv-r-lg);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--sv-parchment);
}

.sv-prose {
	max-width: 44rem;
	margin-top: clamp(1.8rem, 3vw, 2.6rem);
	font-size: 1.045rem;
}
.sv-prose > * + * { margin-top: 1.15em; }
.sv-prose h2 {
	margin-top: 2.2em;
	font-size: clamp(1.35rem, 2.3vw, 1.75rem);
}
.sv-prose h3 {
	margin-top: 1.8em;
	font-size: 1.16rem;
	font-family: var(--sv-sans);
	font-weight: 600;
}
.sv-prose a { color: var(--sv-ember); text-underline-offset: 3px; }
.sv-prose ul,
.sv-prose ol { padding-left: 1.25rem; display: grid; gap: .4rem; }
.sv-prose li { padding-left: .2rem; }
.sv-prose blockquote {
	margin: 1.8em 0;
	padding: 1.2rem 1.4rem;
	border-left: 3px solid var(--sv-ember);
	border-radius: 0 var(--sv-r-sm) var(--sv-r-sm) 0;
	background: var(--sv-parchment);
	font-family: var(--sv-display);
	font-size: 1.08rem;
}
.sv-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}
.sv-prose th,
.sv-prose td {
	padding: .65rem .7rem;
	border-bottom: 1px solid var(--sv-line);
	text-align: left;
	vertical-align: top;
}
.sv-prose th { font: 500 .72rem/1.3 var(--sv-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--sv-stone); }
.sv-prose figure { margin: 1.8em 0; }
.sv-prose img { border-radius: var(--sv-r-sm); }
.sv-prose hr { border: 0; border-top: 1px solid var(--sv-line); margin-block: 2.2em; }
.sv-prose code {
	padding: .1em .35em;
	border-radius: 4px;
	background: var(--sv-parchment);
	font-family: var(--sv-mono);
	font-size: .9em;
}

/* Hooks used by the imported launch content (inc/demo-content.php). Editors
   can apply the same classes from the block sidebar's Additional CSS class. */
.sv-prose .sv-lede {
	font-family: var(--sv-display);
	font-size: clamp(1.1rem, 1.7vw, 1.32rem);
	line-height: 1.55;
	color: var(--sv-ink);
}
.sv-prose .sv-note {
	margin-top: 2.4em;
	padding: .95rem 1.1rem;
	border: 1px dashed rgba(27, 20, 16, .22);
	border-radius: var(--sv-r-sm);
	background: var(--sv-parchment);
	font-size: .85rem;
	line-height: 1.6;
	color: var(--sv-stone);
}
.sv-prose .sv-table { overflow-x: auto; }
.sv-prose .sv-table table { min-width: 34rem; }
.sv-prose .sv-table tbody tr:nth-child(even) { background: rgba(241, 231, 214, .5); }
.sv-prose .sv-quote {
	border-left: 3px solid var(--sv-olive);
	background: var(--sv-paper);
}
.sv-prose .sv-quote cite {
	display: block;
	margin-top: .6rem;
	font: 400 .74rem/1.4 var(--sv-mono);
	font-style: normal;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sv-stone);
}

.sv-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	list-style: none;
}
.sv-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(27, 20, 16, .08);
	border-radius: var(--sv-r);
	background: var(--sv-paper);
	box-shadow: var(--sv-shadow-sm);
	transition: transform .35s var(--sv-ease), box-shadow .35s var(--sv-ease);
}
.sv-post-card:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow); }
.sv-post-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--sv-parchment);
	overflow: hidden;
}
.sv-post-card__body { padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.sv-post-card h2,
.sv-post-card h3 { font-size: 1.14rem; line-height: 1.28; }
.sv-post-card h2 a,
.sv-post-card h3 a { text-decoration: none; }
.sv-post-card h2 a:hover,
.sv-post-card h3 a:hover { color: var(--sv-ember); }
.sv-post-card p { font-size: .89rem; color: var(--sv-stone); }
.sv-post-card__more { margin-top: auto; }

.sv-pagination {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}
.sv-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.4rem; height: 2.4rem;
	padding-inline: .6rem;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	text-decoration: none;
	font: 500 .85rem/1 var(--sv-sans);
}
.sv-pagination .page-numbers.current { background: var(--sv-ink); color: var(--sv-cream); border-color: var(--sv-ink); }

.sv-search { display: flex; gap: .5rem; max-width: 26rem; }
.sv-search input[type="search"] {
	flex: 1;
	padding: .8rem 1.1rem;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	background: var(--sv-paper);
	font: 400 .92rem/1 var(--sv-sans);
	color: var(--sv-ink);
}

.sv-comments { max-width: 44rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.sv-comments h2 { font-size: 1.35rem; margin-bottom: 1.2rem; }
.sv-comments .comment-list { list-style: none; display: grid; gap: 1.2rem; }
.sv-comments .comment-list ul { list-style: none; padding-left: 1.5rem; margin-top: 1.2rem; display: grid; gap: 1.2rem; }
.sv-comments article {
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-sm);
	background: var(--sv-paper);
}
.sv-comments .comment-meta { font: 400 .74rem/1.4 var(--sv-mono); color: var(--sv-stone); margin-bottom: .5rem; }
.sv-comments input:not([type="submit"]),
.sv-comments textarea {
	width: 100%;
	padding: .75rem .95rem;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-sm);
	background: var(--sv-paper);
	font: 400 .95rem/1.5 var(--sv-sans);
	color: var(--sv-ink);
}
.sv-comments .submit {
	margin-top: .8rem;
	padding: .85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--sv-ember);
	color: #fff;
	font: 500 .92rem/1 var(--sv-sans);
	cursor: pointer;
}

.sv-404 { text-align: center; max-width: 34rem; margin-inline: auto; }
.sv-404 h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 1rem; }
.sv-404 .sv-search { margin: 1.8rem auto 0; }

/* Editor / block alignment inside prose. */
.sv-prose .alignwide { width: min(100%, 54rem); margin-inline: auto; }
.sv-prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
.sv-prose .wp-block-image img { width: 100%; }

/* ==========================================================================
   §17  Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.sv-sheet__body { grid-template-columns: 1fr; }
	.sv-sheet__rail { border-right: 0; border-bottom: 1px solid var(--sv-line); }
	.sv-problem__grid { grid-template-columns: repeat(2, 1fr); }
	.sv-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sv-range__grid,
	.sv-row,
	.sv-cta__inner { grid-template-columns: 1fr; }
	.sv-row__media { order: -1; }
	.sv-panel__tag { width: 72px; height: 72px; font-size: .68rem; }
	.sv-letter__chip { display: none; }
	.sv-sheet__main { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
	/* Header collapses into a sheet menu. */
	.sv-burger { display: block; }
	.sv-nav {
		position: fixed;
		inset: 0 0 auto;
		margin: 0;
		padding: 5.2rem var(--sv-gut) 2rem;
		background: var(--sv-cream);
		box-shadow: var(--sv-shadow-lg);
		transform: translateY(-102%);
		transition: transform .45s var(--sv-ease);
		visibility: hidden;
		/* The sheet is a later sibling than the brand, so without an explicit
		   order it paints over the lockup and the basket. */
		z-index: 1;
	}
	.sv-brand,
	.sv-header__actions { position: relative; z-index: 2; }
	.sv-header.is-open .sv-nav { transform: none; visibility: visible; }
	.sv-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.sv-nav li { border-bottom: 1px solid var(--sv-line); }
	.sv-nav a,
	.sv-has-hero .sv-header .sv-nav a {
		display: block;
		padding: .95rem 0;
		font-size: 1.05rem;
		color: var(--sv-ink);
	}
	.sv-header__signin { display: none; }

	/* With the cream sheet open, cream-on-transparent header text over the
	   hero disappears. Treat "open" like "stuck". */
	.sv-has-hero .sv-header.is-open .sv-brand,
	.sv-has-hero .sv-header.is-open .sv-header__signin { color: var(--sv-ink); }
	.sv-has-hero .sv-header.is-open .sv-brand { --sv-lockup-sub: var(--sv-stone); }
	.sv-has-hero .sv-header.is-open .sv-burger span { background: var(--sv-ink); }

	/* One plate, not a row of slivers: at this width two 4:5 crops read as
	   thumbnails and the floating card has nowhere to sit. */
	.sv-hero__media {
		grid-template-columns: minmax(0, 1fr);
		max-width: 26rem;
		margin-bottom: clamp(-6rem, -8vw, -4rem);
	}
	.sv-plate--a,
	.sv-plate--c { display: none; }
	.sv-plate--b { aspect-ratio: 4 / 4.4; transform: none; }
	.sv-flavour { width: calc(100% - 1.6rem); }
	.sv-acc__body { padding-inline: 0 0; }
}

@media (max-width: 600px) {
	.sv-problem__grid { grid-template-columns: 1fr; }
	.sv-footer__top { grid-template-columns: 1fr; }
	.sv-hero__proof { gap: .45rem 1rem; font-size: .72rem; }
	.sv-ladder__row { grid-template-columns: 4.6rem 1fr 2rem; }
	.sv-sheet__bar { flex-wrap: wrap; }
	.sv-sheet__badge { margin-left: 0; }
	.sv-letter__doc p:first-of-type::first-letter { font-size: 2.8em; }
	.sv-footer__cookies { margin-left: 0; }
}

/* ==========================================================================
   §18  Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.sv-js [data-sv-reveal] { opacity: 1; transform: none; }
}

@media print {
	.sv-header,
	.sv-consent,
	.sv-footer__cookies,
	.sv-hero__cta { display: none; }
	body { background: #fff; color: #000; }
	.sv-hero { background: #fff; color: #000; }
	.sv-hero h1 { color: #000; }
}