/* ============================================================
   SECTIONS — header, hero, homepage sections, footer
   ============================================================ */

/* ================= HEADER ================= */

/* Logged-in users: compensate for the WordPress admin bar so the
   fixed header never slides underneath it. */
body.admin-bar { --adminbar-h: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --adminbar-h: 46px; }
}

.site-header {
	position: fixed;
	inset-block-start: var(--adminbar-h, 0);
	inset-inline: 0;
	z-index: var(--z-nav);
	transition: background var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out),
	            backdrop-filter var(--dur-base);
}
.header-inner {
	inline-size: min(100% - 2 * var(--gutter), var(--container-wide));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	block-size: var(--header-h);
	transition: block-size var(--dur-base) var(--ease-out);
}

.site-logo {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--text-on-dark);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	z-index: calc(var(--z-overlay) + 1);
	position: relative;
	transition: color var(--dur-base) var(--ease-out);
}
.site-logo .logo-mark { inline-size: 2.4rem; block-size: auto; }

/* The lotus mark — real logo, gentle breath (slow, relaxing, never distracting). */
.lotus { display: block; }
.lotus--breath {
	animation: lotusBreath 7s ease-in-out infinite;
	transform-origin: 50% 60%;
	will-change: transform, opacity;
}
@keyframes lotusBreath {
	0%, 100% { transform: scale(1); opacity: 0.92; }
	50%      { transform: scale(1.045); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.lotus--breath { animation: none; }
}

/* Transparent over hero (default on dark heroes); scrolled = solid */
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--color-parchment) 88%, transparent);
	backdrop-filter: blur(14px);
	box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled .header-inner { block-size: var(--header-h-scrolled); }
.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .nav-list a,
.site-header.is-scrolled .nav-toggle,
.site-header.is-scrolled .header-cart,
.site-header.is-scrolled .header-account { color: var(--text); }
.site-header.is-scrolled .c-btn--nav {
	background: var(--gradient-clay);
	color: var(--color-parchment);
	border-color: transparent;
}
/* Pages without a dark hero: solid header from the start */
body:not(.has-dark-hero) .site-header {
	background: color-mix(in srgb, var(--color-parchment) 88%, transparent);
	backdrop-filter: blur(14px);
	box-shadow: var(--shadow-sm);
}
body:not(.has-dark-hero) .site-header .site-logo,
body:not(.has-dark-hero) .site-header .nav-list a,
body:not(.has-dark-hero) .site-header .nav-toggle,
body:not(.has-dark-hero) .site-header .header-cart,
body:not(.has-dark-hero) .site-header .header-account { color: var(--text); }

.nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list a {
	position: relative;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-on-dark);
	padding-block: var(--space-2xs);
	transition: color var(--dur-fast);
}
.nav-list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	block-size: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 4'%3E%3Cpath d='M1 2.5 Q 15 0.5 30 2.2 T 59 2' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: scaleX(0);
	transform-origin: inline-end;
	transition: transform var(--dur-base) var(--ease-out);
}
.nav-list a:hover::after,
.nav-list .current-menu-item > a::after { transform: scaleX(1); transform-origin: inline-start; }

.c-btn--nav {
	padding: 0.65rem 1.3rem;
	font-size: var(--text-xs);
	border: 1px solid rgba(246, 241, 231, 0.5);
	color: var(--text-on-dark);
}

/* The basket is a persistent utility, not a second CTA: quiet enough for the
   header, clear enough to resume a booking without returning to the timetable. */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
}
.header-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	position: relative;
	padding: 0.35rem 0.65rem 0.35rem 0.38rem;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 999px;
	color: var(--text-on-dark);
	font-size: var(--text-xs);
	font-weight: 700;
	transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.header-cart:hover {
	border-color: currentColor;
	background: color-mix(in srgb, var(--color-parchment) 16%, transparent);
	transform: translateY(-1px);
}
.header-cart__seal {
	display: grid;
	place-items: center;
	inline-size: 1.8rem;
	block-size: 1.8rem;
	border-radius: 48% 52% 50% 46% / 52% 46% 54% 48%;
	background: color-mix(in srgb, currentColor 12%, transparent);
}
.header-cart__seal .icon { inline-size: 1rem; block-size: 1rem; }
.header-cart__count {
	display: grid;
	place-items: center;
	min-inline-size: 1.35rem;
	block-size: 1.35rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--color-clay);
	color: var(--color-parchment);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	line-height: 1;
}
.header-cart__count[hidden] { display: none; }

.header-account {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: 0 0 auto;
	position: relative;
	z-index: calc(var(--z-overlay) + 1);
	padding: 0.35rem 0.7rem 0.35rem 0.35rem;
	border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
	border-radius: 999px;
	color: var(--text-on-dark);
	font-size: var(--text-xs);
	font-weight: 700;
	transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.header-account:hover {
	border-color: currentColor;
	background: color-mix(in srgb, var(--color-parchment) 16%, transparent);
	transform: translateY(-1px);
}
.header-account__seal {
	display: grid;
	place-items: center;
	inline-size: 1.8rem;
	block-size: 1.8rem;
	border-radius: 52% 48% 46% 54% / 46% 54% 48% 52%;
	background: color-mix(in srgb, currentColor 12%, transparent);
}
.header-account__seal .icon { inline-size: 1rem; block-size: 1rem; }
.header-account__credits {
	display: grid;
	place-items: center;
	min-inline-size: 1.35rem;
	block-size: 1.35rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--color-clay);
	color: var(--color-parchment);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	line-height: 1;
}

.nav-toggle {
	display: none;
	color: var(--text-on-dark);
	padding: var(--space-2xs);
	z-index: calc(var(--z-overlay) + 1);
	position: relative;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] { color: var(--text); }
/* Close control lives INSIDE the mobile overlay only — never a stray X
   in the desktop nav row (the mobile block below re-enables it). */
.nav-close { display: none; }

@media (max-width: 860px) {
	.nav-toggle { display: grid; place-items: center; }
	.site-nav {
		position: fixed;
		inset: 0;
		inset-block-start: var(--adminbar-h, 0px);
		background: var(--bg);
		display: grid;
		place-content: start center;
		justify-items: center;
		gap: clamp(var(--space-lg), 6vh, var(--space-xl));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
		z-index: var(--z-overlay);
		padding-block-start: calc(var(--header-h) + var(--space-lg));
		padding-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--space-lg));
		padding-inline: var(--gutter);
	}
	/* The overlay must always sit ABOVE the header (z 100) and everything
	   inside it — including the hamburger, which is why the overlay carries
	   its own close button below. */
	.site-nav { z-index: calc(var(--z-overlay) + 2); overscroll-behavior: contain; }
	.site-nav.is-open { opacity: 1; visibility: visible; }
	/* Close control INSIDE the overlay: while open, the overlay covers the
	   header, so the header hamburger is unreachable — the X lives here. */
	.nav-close {
		position: absolute;
		inset-block-start: calc(var(--adminbar-h, 0px) + var(--space-sm));
		inset-inline-end: var(--gutter);
		inline-size: 44px;
		block-size: 44px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
		border-radius: 999px;
		background: transparent;
		color: var(--text);
		-webkit-tap-highlight-color: transparent;
	}
	.nav-close .icon { inline-size: 1.15rem; block-size: 1.15rem; }
	.nav-close:active { transform: scale(0.92); }
	/* iOS containing-block fix: ANY backdrop-filter/transform on the fixed
	   header makes it the containing block for this fixed overlay, clipping
	   the menu to the header box (129px strip on Home). While the menu is
	   open the header is fully covered — drop its blur so the overlay pins
	   to the viewport. Double .site-header beats the later home/state rules. */
	html.menu-lock .site-header.site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transition: none;
	}
	/* iOS-safe scroll lock (bare overflow:hidden misbehaves on iOS): freeze
	   the body at its current offset; JS sets --menu-lock-top and restores. */
	html.menu-lock,
	html.menu-lock body { overflow: hidden; }
	html.menu-lock body {
		position: fixed;
		inline-size: 100%;
		inset-block-start: var(--menu-lock-top, 0px);
	}
	.nav-list { flex-direction: column; gap: var(--space-lg); text-align: center; }
	.nav-list a { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text); }
	.site-nav .c-btn--nav { border-color: var(--text); color: var(--text); font-size: var(--text-sm); font-family: var(--font-body); }
	.header-inner { gap: var(--space-xs); }
	.header-actions { margin-inline-start: auto; gap: 0.35rem; }
	.header-account { margin-inline-start: 0; color: var(--text-on-dark); }
	.header-account__label { display: none; }
	.header-account { padding-inline-end: 0.35rem; }
	.header-account__credits { position: absolute; inset-block-start: -0.2rem; inset-inline-end: -0.2rem; }
	.header-cart__label { display: none; }
	.header-cart { padding-inline-end: 0.38rem; }
	.header-cart__count { position: absolute; inset-block-start: -0.2rem; inset-inline-end: -0.2rem; }
}

/* Laptops / tablets in landscape (861–1180px): the full nav plus labelled
   utilities overflowed — "Book a / session" and the logo wrapped onto two
   lines. Tighter gaps, one-line labels, icon-only utilities (both links
   carry aria-labels, exactly as on phones). */
@media (min-width: 861px) and (max-width: 1180px) {
	.header-inner { gap: var(--space-md); }
	.nav-list { gap: clamp(0.9rem, 1.7vw, 1.6rem); }
	.nav-list a { white-space: nowrap; }
	.site-logo { white-space: nowrap; font-size: var(--text-base); }
	.header-actions { gap: 0.35rem; }
	.header-cart__label,
	.header-account__label { display: none; }
	.header-cart { padding-inline-end: 0.38rem; }
	.header-account { padding-inline-end: 0.35rem; }
	.header-cart__count,
	.header-account__credits { position: absolute; inset-block-start: -0.2rem; inset-inline-end: -0.2rem; }
}
/* Phones: a slimmer wordmark keeps the header on one line from ~360px up. */
@media (max-width: 480px) {
	.site-logo { font-size: clamp(0.86rem, 3.9vw, 1.05rem); line-height: 1.15; }
	.site-logo .logo-mark { inline-size: 2rem; }
}

/* Pages WITHOUT a dark hero (shop, cart, account…) sit below the fixed header */
body:not(.has-dark-hero) #main-content { padding-block-start: calc(var(--header-h) + var(--adminbar-h, 0px)); }

/* The HOME hero runs UNDER the fixed header: the film fills the whole top
   edge behind a translucent menu (no dead cream band); the header turns
   solid (parchment + blur) once the page scrolls. Scoped to .home-page. */
body.home-page #main-content { padding-block-start: 0; }
body.home-page .site-header:not(.is-scrolled) {
	background: color-mix(in srgb, var(--color-parchment) 55%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: none;
}
/* Menu open on HOME: the unscrolled hero header's blur would become the
   fixed overlay's containing block and clip the panel to the header strip —
   kill the blur while the menu is open (higher specificity, wins the tie). */
html.menu-lock body.home-page .site-header:not(.is-scrolled) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: none;
}

/* ================= HERO (home) — light editorial collage ================= */

.hero {
	position: relative;
	min-block-size: max(36rem, 94svh);
	display: grid;
	align-items: center;
	background:
		radial-gradient(70% 55% at 88% 8%, rgba(193, 154, 63, 0.10), transparent 70%),
		radial-gradient(55% 50% at 4% 92%, rgba(154, 166, 138, 0.14), transparent 70%),
		var(--color-paper, var(--bg));
	color: var(--text);
	overflow: clip;
	isolation: isolate;
}

/* Studio film behind a warm parchment veil.
   Paint strategy: the AVIF/WebP still renders first (it is the LCP), then the
   looping film (or, on bigger screens, its animated AVIF) fades in over it once
   it actually plays — reduced-motion and data-saver visitors simply never see it. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.hero-media__img,
.hero-media__video,
.hero-media__anim {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.hero-media__video,
.hero-media__anim {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms var(--ease-out);
}
.hero-media.is-film-playing .hero-media__video,
.hero-media__anim.is-loaded { opacity: 1; }
.hero-media__anim[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
	/* Slow Ken-Burns drift — transform only, so the still costs no video CPU. */
	.hero-media__img {
		transform-origin: 62% 40%;
		animation: heroDrift 52s ease-in-out infinite alternate;
	}
}
.hero-media::after {
 content: "";
 position: absolute;
 inset: 0;
 /* Readable text at left; the studio retains its colour at right. */
 background: linear-gradient(90deg, rgba(246,241,231,.96) 0%, rgba(246,241,231,.92) 38%, rgba(246,241,231,.55) 62%, rgba(246,241,231,.2) 100%);
}
.hero-film-toggle {
 position: absolute; inset-inline-end: var(--gutter); inset-block-end: 1rem;
 z-index: 3; min-block-size: 44px; padding: .55rem 1rem;
 border: 1px solid var(--text-soft); border-radius: 2rem;
 color: var(--text); background: var(--color-paper, #f6f1e7);
 font: 600 .875rem var(--font-body); cursor: pointer;
}
.hero-film-toggle[hidden] { display: none; }
.hero-film-toggle:focus-visible { outline: 3px solid var(--color-clay); outline-offset: 3px; }
@media (max-width: 880px), (orientation: portrait), (max-height: 540px) {
 /* Phones (either way up), portrait tablets and short screens: landscape footage is
    never enlarged into a tall, heavily cropped background. The whole frame plays as a
    band under the collage, capped so it fits on screen below the scrolled header, and
    the play/pause control sits beneath the film instead of covering it. */
 .hero-media { position: relative; aspect-ratio: 1058 / 594; inline-size: 100%; max-inline-size: calc((100svh - var(--header-h-scrolled)) * 1058 / 594); justify-self: center; align-self: end; }
 .hero-media__img { position: absolute; inset: 0; animation: none; transform: none; }
 .hero-media__video,
 .hero-media__anim { object-fit: contain; background: #241e17; }
 .hero-media::after { display: none; }
 .hero-film-toggle { position: static; justify-self: end; margin: var(--space-xs) var(--gutter) var(--space-sm); margin-inline-end: max(var(--gutter), (100% - (100svh - var(--header-h-scrolled)) * 1058 / 594) / 2); }
}
@keyframes heroDrift {
	from { transform: scale(1.02) translate(0.6%, 0.4%); }
	to   { transform: scale(1.1) translate(-0.9%, -0.6%); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-media__img { animation: none; }
}

.hero-inner {
	inline-size: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	padding-block: var(--space-xl);
	/* Content column clears the translucent menu floating over the film
	   (the hero itself tucks under the header on .home-page). */
	padding-block-start: calc(var(--header-h) + var(--space-md));
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	position: relative;
	z-index: 1;
}

.hero-content { position: relative; z-index: 2; }
.hero-title {
	font-size: var(--text-hero);
	font-weight: 440;
	font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--color-moss);
}
.hero-title em {
	font-style: italic;
	font-weight: 400;
	font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
	color: var(--color-clay);
}
/* Handwritten annotation with a little arrow */
.hero-note {
	font-family: var(--font-hand);
	font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
	color: var(--color-clay);
	transform: rotate(-2.5deg);
	margin-block-end: var(--space-lg); /* breathing room above the title (owner: "too cluttered") */
}
.hero-subtitle {
	font-size: var(--text-lg);
	color: var(--text-soft);
	margin-block-start: var(--space-sm);
	max-inline-size: 33rem;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-block-start: var(--space-lg);
}
/* Award chip — SME Business Elite Awards 2026 (sits above the CTAs so it stays in view) */
.hero-award {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-block-start: var(--space-md);
	padding: 0.35rem 0.9rem 0.35rem 0.55rem;
	border: 1px solid rgba(163, 74, 30, 0.28);
	border-radius: var(--radius-card-c, 1rem);
	background: rgba(255, 253, 246, 0.72);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px rgba(61, 46, 34, 0.07);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-soft);
}
.hero-award .art--laurel {
	inline-size: 1.6rem;
	block-size: 1.6rem;
	color: var(--color-clay);
}
.hero-award strong { color: var(--color-clay); font-weight: 600; }
.hero-award__year { color: var(--text-mute); }
.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	margin-block-start: var(--space-md);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	/* text-soft, not mute: the meta sits directly on the veil over the video,
	 * and mute dipped to 3.7:1 on dark frames (WCAG AA needs 4.5 for xs text). */
	color: var(--text-soft);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero__meta .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-clay); }

/* The collage — layered polaroids + botanicals */
.hero-collage {
	position: relative;
	min-block-size: clamp(24rem, 40vw, 34rem);
}
.hero-collage .polaroid { position: absolute; }
.hero-collage .polaroid--a {
	inline-size: 62%;
	inset-block-start: 0;
	inset-inline-start: 4%;
	transform: rotate(-3.5deg);
	z-index: 1;
}
.hero-collage .polaroid--b {
	inline-size: 54%;
	inset-block-end: 2%;
	inset-inline-end: 0;
	transform: rotate(2.8deg);
	z-index: 2;
}
/* B overlaps A's right edge — keep A's handwritten caption on the clear side */
.hero-collage .polaroid--a figcaption {
	text-align: left;
	padding-inline-start: 9%;
}
.hero-collage .art { position: absolute; z-index: 3; pointer-events: none; }
.hero-collage .art--sun { inline-size: clamp(4rem, 8vw, 6.5rem); inset-block-start: -4%; inset-inline-end: 6%; color: var(--color-mustard); animation: artFloat 11s ease-in-out infinite alternate; }
.hero-collage .art--sprig { inline-size: clamp(3.5rem, 7vw, 5.5rem); inset-block-end: -6%; inset-inline-start: -2%; color: var(--color-olive); animation: artSway 9s ease-in-out infinite alternate; }
.hero-collage .art--star { inline-size: clamp(1.8rem, 3.5vw, 2.8rem); inset-block-start: 38%; inset-inline-start: -4%; color: var(--color-gold-light); animation: artTwinkle 5s ease-in-out infinite; }
.hero-collage .hero-note--collage {
	position: absolute;
	inset-block-end: 8%;
	inset-inline-start: 44%;
	z-index: 3;
	transform: rotate(-4deg);
}

@media (max-width: 560px) {
	/* Thumb-sized, equal-width actions instead of two ragged pills. */
	.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
	.hero-actions .c-btn { inline-size: 100%; }
	.hero__meta { gap: var(--space-xs) var(--space-md); }
}
@media (max-width: 880px) {
	.hero-inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
	.hero-collage { min-block-size: clamp(20rem, 64vw, 26rem); max-inline-size: 26rem; margin-inline: auto; inline-size: 100%; }
	/* Decorative note has no clean spot in the compressed mobile collage — desktop only */
	.hero-collage .hero-note--collage { display: none; }
}

/* Polaroid frame (reused by the photo band) */
.polaroid {
	position: relative;
	background: #FFFDF6;
	padding: 4.5% 4.5% 14%;
	box-shadow: 0 10px 28px rgba(61, 46, 34, 0.16), 0 2px 6px rgba(61, 46, 34, 0.10);
	transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 18px 44px rgba(61, 46, 34, 0.2); z-index: 5; }
.polaroid img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	filter: none;
}
.polaroid figcaption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 1.5%;
	text-align: center;
	font-family: var(--font-hand);
	font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
	color: var(--color-moss);
}
/* Washi tape on top */
.art-tape {
	position: absolute;
	inline-size: 34%;
	block-size: 1.6rem;
	inset-block-start: -0.8rem;
	inset-inline-start: 33%;
	background: rgba(232, 180, 154, 0.55);
	border-inline: 1px dashed rgba(255, 255, 255, 0.6);
	box-shadow: 0 2px 4px rgba(61, 46, 34, 0.08);
	transform: rotate(-1.5deg);
	backdrop-filter: blur(1px);
}
.art-tape--alt { background: rgba(154, 166, 138, 0.5); transform: rotate(2deg); }

/* Floating art keyframes */
@keyframes artFloat {
	from { transform: translate3d(0, 0, 0) rotate(-4deg); }
	to   { transform: translate3d(6%, -10%, 0) rotate(6deg); }
}
@keyframes artSway {
	from { transform: rotate(-5deg); }
	to   { transform: rotate(6deg) translateY(-4%); }
}
@keyframes artTwinkle {
	0%, 100% { opacity: 0.5; transform: scale(0.9) rotate(0deg); }
	50%      { opacity: 1; transform: scale(1.08) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-collage .art, .polaroid { animation: none; transition: none; }
}

/* ================= SECTION DIVIDERS & DECOR ================= */

.c-divider {
	position: relative;
	block-size: clamp(3.5rem, 9vw, 7.5rem);
	margin-block: -1px;
	display: grid;
	place-items: center;
}
.c-divider__wave {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}
.c-divider__motif {
	position: relative;
	inline-size: clamp(1.75rem, 4vw, 2.75rem);
	block-size: auto;
	animation: motifBreath 6s ease-in-out infinite;
}
@keyframes motifBreath {
	0%, 100% { transform: scale(1); opacity: 0.75; }
	50%      { transform: scale(1.12); opacity: 1; }
}

/* Floating section decorations — slow, organic, GPU-only */
.c-decor {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	color: var(--color-clay);
	opacity: 0.14;
	inline-size: clamp(6rem, 14vw, 11rem);
	block-size: auto;
	animation: decorFloat 16s ease-in-out infinite alternate;
}
.c-decor--lotus { animation: decorFloatSpin 26s linear infinite; }
.c-decor--leaf  { animation: decorSway 14s ease-in-out infinite alternate; }

@keyframes decorFloat {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to   { transform: translate3d(6%, -8%, 0) rotate(6deg); }
}
@keyframes decorFloatSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes decorSway {
	from { transform: rotate(-4deg) translateY(0); }
	to   { transform: rotate(5deg) translateY(-6%); }
}

/* Section placement helpers (sections keep position: relative via .section) */
.c-decor--tr { inset-block-start: 6%; inset-inline-end: 4%; }
.c-decor--bl { inset-block-end: 8%; inset-inline-start: 3%; }
.c-decor--tl { inset-block-start: 10%; inset-inline-start: 6%; }
.c-decor--br { inset-block-end: 6%; inset-inline-end: 6%; }
.section--dark .c-decor { color: var(--color-parchment); opacity: 0.10; }
.section--sunken .c-decor { color: var(--color-copper); opacity: 0.16; }

@media (prefers-reduced-motion: reduce) {
	.c-decor, .c-divider__motif { animation: none; }
}

/* ================= HOME SECTIONS ================= */

/* Benefits */
.benefits-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Four cards (the default) never split 3 + 1: 2 × 2 on tablets, 4 across wide. */
@media (min-width: 560px) and (max-width: 1099px) {
	.benefits-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.benefits-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Phones: icon beside the title, tighter padding — a quarter of the height. */
@media (max-width: 559px) {
	.benefits-grid { gap: var(--space-sm); }
	.benefits-grid .c-card {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--space-sm);
		align-items: center;
		padding: var(--space-md);
	}
	.benefits-grid .c-card__icon { margin: 0; inline-size: 2.6rem; block-size: 2.6rem; }
	.benefits-grid .c-card__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
	.benefits-grid .c-card__title { margin: 0; font-size: var(--text-lg); }
	.benefits-grid .c-card__text { grid-column: 1 / -1; margin-block-start: var(--space-xs); }
}

/* Photo band — scattered polaroid collage */
.photo-band {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	margin-block-start: var(--space-2xl);
	padding-block-end: var(--space-lg);
}
@media (max-width: 720px) { .photo-band { grid-template-columns: 1fr; max-inline-size: 24rem; margin-inline: auto; } }
.photo-band__item { margin: 0; }
.photo-band__item--wide { transform: rotate(-2.2deg); }
.photo-band__item:not(.photo-band__item--wide) { transform: rotate(2.4deg); }
.photo-band__item:hover { transform: rotate(0deg) scale(1.02); }

/* Photo moments — hand-arranged scrapbook wall.
   Masonry columns: portrait and landscape polaroids pack without the empty
   holes a row grid leaves under short cards. */
.moments {
	columns: 3;
	column-gap: clamp(1.75rem, 4.5vw, 3.25rem);
	margin-block-start: var(--space-xl);
	padding-block-end: var(--space-lg);
}
/* Inline-block cards are unbreakable line boxes; the top margin keeps each
   card's washi tape inside its column (a column top clips overflow). */
.moments__card {
	display: inline-block;
	inline-size: 100%;
	vertical-align: top;
	margin: 1rem 0 clamp(1rem, 3vw, 2.25rem);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
/* Hand-placed tilts use the individual `rotate` property, so the reveal
   animation's `transform: none` can no longer straighten them. */
.moments__card:nth-child(6n + 1) { rotate: -2.6deg; }
.moments__card:nth-child(6n + 2) { rotate: 1.8deg; }
.moments__card:nth-child(6n + 3) { rotate: -1.4deg; }
.moments__card:nth-child(6n + 4) { rotate: 2.4deg; }
.moments__card:nth-child(6n + 5) { rotate: -2deg; }
.moments__card:nth-child(6n + 6) { rotate: 1.3deg; }
.moments__card:hover { rotate: 0deg; scale: 1.03; z-index: 5; }
/* Washi tape cycles peach → sage → gold. */
.art-tape--gold { background: rgba(201, 167, 125, 0.55); transform: rotate(-2.5deg); }
/* Botanicals tucked between the cards. */
.moments__sprig {
	position: absolute;
	inline-size: clamp(3.5rem, 7vw, 5.5rem);
	inset-block-start: 4%;
	inset-inline-end: 3%;
	color: var(--color-olive);
	animation: artSway 9s ease-in-out infinite alternate;
}
.moments__star {
	position: absolute;
	inline-size: clamp(1.8rem, 3.5vw, 2.8rem);
	inset-block-start: 42%;
	inset-inline-start: 2.5%;
	color: var(--color-gold-light);
	animation: artTwinkle 5s ease-in-out infinite;
}
/* Sign-off under the wall: the lotus mark (or the admin's own small icon),
   tucked bottom-right like a stamp. */
.moments__mark {
	inline-size: clamp(2.6rem, 2.2rem + 1.2vw, 3.4rem);
	margin-block-start: var(--space-md);
	margin-inline-start: auto;
	color: var(--color-clay);
	opacity: 0.85;
	rotate: -6deg;
}
.moments__mark img { inline-size: 100%; block-size: auto; }
@media (max-width: 880px) {
	.moments { columns: 2; column-gap: clamp(1rem, 4vw, 2rem); }
	.moments__card { margin-block-end: clamp(0.5rem, 2.5vw, 1.25rem); }
	.moments__card:nth-child(6n + 2),
	.moments__card:nth-child(6n + 5) { rotate: 1.6deg; }
	.moments__card:nth-child(6n + 3),
	.moments__card:nth-child(6n + 6) { rotate: -1.2deg; }
	.moments__star { display: none; }
	/* Bottom-anchored captions overflow the narrow strip up over the photo on small cards — let them flow below the image instead */
	.moments__card figcaption { position: static; margin-block-start: 1.5%; }
}
@media (prefers-reduced-motion: reduce) {
	.moments__sprig, .moments__star { animation: none; }
}

/* ============================================================
   STUDIO GALLERY — "the way home": scrapbook arrival story.
   Four tilted polaroids along a hand-drawn marching path toward
   a twinkling star (home); staggered settle-in reveals; the
   address lives on a stamped tag. (template-gallery era, v1.10.4)
   ============================================================ */
.studio-gallery-section {
	position: relative;
	overflow: hidden;
	overflow: clip; /* clip, not a scroll container — keeps the intro sticky */
	background:
		radial-gradient(70% 75% at 96% 12%, color-mix(in srgb, var(--color-clay) 10%, transparent), transparent 72%),
		linear-gradient(180deg, var(--color-parchment), var(--color-paper));
}
.studio-gallery__layout {
	display: grid;
	grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.studio-gallery__intro { max-inline-size: 26rem; }
/* Wide screens: the copy rides alongside the tall collage instead of
   floating mid-way down an empty column. */
@media (min-width: 881px) {
	.studio-gallery__layout { align-items: start; }
	.studio-gallery__intro {
		position: sticky;
		inset-block-start: calc(var(--header-h-scrolled) + var(--adminbar-h, 0px) + var(--space-xl));
		padding-block-start: var(--space-lg);
	}
}
.studio-gallery__copy { margin-block: var(--space-md) var(--space-lg); color: var(--text-soft); }

/* --- The address, stamped on a tag --- */
.studio-gallery__place {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .72rem;
	max-inline-size: 18rem;
	margin-block-end: var(--space-lg);
	padding: 1rem 1.1rem;
	border: 1.5px dashed color-mix(in srgb, var(--color-clay) 45%, transparent);
	border-radius: var(--radius-card-b);
	background: color-mix(in srgb, var(--color-cream) 88%, transparent);
	box-shadow: var(--shadow-xs);
	transform: rotate(-1.5deg);
}
.studio-gallery__place .art-tape { inset-block-start: -.55rem; }
.studio-gallery__place strong { display: block; color: var(--color-moss); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.studio-gallery__place address { margin-block-start: .12rem; color: var(--text-soft); font-size: var(--text-sm); font-style: normal; }
.studio-gallery__pin { flex: 0 0 auto; inline-size: 1.3rem; block-size: 1.3rem; margin-block-start: .15rem; color: var(--color-clay); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.studio-gallery__directions { gap: .5rem; }
.studio-gallery__directions span { font-size: 1.05em; transition: transform var(--dur-fast) var(--ease-out); }
.studio-gallery__directions:hover span { transform: translate(2px, -2px); }
/* Stamp-in when the intro reveals — like pressing the tag onto the page. */
.js .studio-gallery__place.reveal.is-revealed { animation: studioStamp .55s var(--ease-spring) both; }
@keyframes studioStamp {
	0% { opacity: 0; transform: rotate(-6deg) scale(1.16); }
	55% { opacity: 1; transform: rotate(-1deg) scale(.97); }
	100% { opacity: 1; transform: rotate(-1.5deg) scale(1); }
}

/* --- The collage + the little path home --- */
.studio-gallery {
	position: relative;
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(1.1rem, 2.2vw, 1.9rem);
	align-items: start;
}
.studio-way__path {
	position: absolute;
	inset: -3% -2%;
	inline-size: 104%;
	block-size: 106%;
	z-index: 0;
	pointer-events: none;
	color: color-mix(in srgb, var(--color-clay) 74%, transparent);
	overflow: visible;
}
.studio-way__path path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 2 10;
	/* Footsteps: the dashes march slowly along the path, forever. */
	animation: studioPathMarch 26s linear infinite;
}
@keyframes studioPathMarch {
	to { stroke-dashoffset: -960; } /* 80 × the 12px dash period — seamless */
}
.studio-way__sprig {
	position: absolute;
	inset-block-start: -6%;
	inset-inline-start: -4.5%;
	z-index: 0;
	inline-size: clamp(3.2rem, 6vw, 5rem);
	color: var(--color-olive);
	animation: artSway 10s ease-in-out infinite alternate;
}
.studio-way__star {
	position: absolute;
	inset-block-end: .2%;
	inset-inline-start: 3.5%;
	z-index: 0;
	inline-size: clamp(1.9rem, 3.2vw, 2.7rem);
	color: var(--color-gold-light);
	animation: artTwinkle 6s ease-in-out infinite;
}
.studio-way__note {
	position: absolute;
	inset-block-start: -1.9rem;
	inset-inline-end: .6rem;
	z-index: 2;
	margin: 0;
	font-family: var(--font-hand);
	font-size: clamp(1.02rem, .92rem + .4vw, 1.28rem);
	color: var(--color-clay);
	transform: rotate(2.5deg);
}

/* Polaroid cards: resting tilts, staggered settle-in, hover straighten. */
.studio-gallery__card {
	position: relative;
	z-index: 1;
	margin: 0;
	--tilt: 0deg;
	--sink: 0rem;
	transform: rotate(var(--tilt)) translateY(var(--sink));
}
.studio-gallery__card--a { grid-column: 1; grid-row: 1; --tilt: -2.2deg; }
.studio-gallery__card--b { grid-column: 2; grid-row: 1; --tilt: 1.8deg; --sink: 2.4rem; }
.studio-gallery__card--c { grid-column: 1; grid-row: 2; --tilt: 1.1deg; }
.studio-gallery__card--d { grid-column: 2; grid-row: 2; --tilt: -1.5deg; --sink: -.4rem; }
.studio-gallery__image { inline-size: 100%; block-size: auto; display: block; }
.js .studio-gallery__card.reveal {
	transform: translateY(30px) rotate(calc(var(--tilt) + 2.5deg)) scale(.97);
	transform-origin: 50% 100%;
	transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-spring);
}
.js .studio-gallery__card.reveal.is-revealed {
	transform: rotate(var(--tilt)) translateY(var(--sink));
}
.studio-gallery__card:hover {
	z-index: 3;
	transform: rotate(0deg) translateY(calc(var(--sink) - .25rem)) scale(1.02);
}

@media (max-width: 880px) {
	.studio-gallery__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
	.studio-gallery__intro { max-inline-size: 38rem; }
	.studio-way__note { display: none; }
	/* The sprig pokes up into the directions button when the intro stacks. */
	.studio-way__sprig { display: none; }
	.studio-gallery__card--b { --sink: 1.4rem; }
}
@media (max-width: 560px) {
	/* Two polaroids per row (was one 450px photo per screen); captions flow
	   under the photo — a bottom-anchored caption would climb over it. */
	.studio-gallery { grid-template-columns: 1fr 1fr; gap: clamp(1.1rem, 4vw, 1.5rem) clamp(0.75rem, 3vw, 1rem); }
	.studio-gallery__card--a, .studio-gallery__card--b,
	.studio-gallery__card--c, .studio-gallery__card--d { grid-column: auto; grid-row: auto; --tilt: -1.6deg; }
	.studio-gallery__card--b, .studio-gallery__card--d { --tilt: 1.5deg; --sink: 1rem; }
	.studio-gallery__card--c { --tilt: -1deg; }
	.studio-gallery__card.polaroid { padding: 5% 5% 3.5%; }
	.studio-gallery__card figcaption {
		position: static;
		margin-block-start: 0.4rem;
		font-size: clamp(0.92rem, 3.6vw, 1.05rem);
		line-height: 1.2;
	}
	.studio-gallery__card .art-tape { block-size: 1.1rem; inset-block-start: -0.55rem; }
	.studio-way__path, .studio-way__star { display: none; }
	.studio-gallery__place { max-inline-size: none; }
}
@media (prefers-reduced-motion: reduce) {
	.studio-way__path path,
	.studio-way__sprig,
	.studio-way__star { animation: none; }
	.js .studio-gallery__place.reveal.is-revealed { animation: none; }
	.js .studio-gallery__card.reveal,
	.js .studio-gallery__card.reveal.is-revealed { transition: none; transform: rotate(var(--tilt)) translateY(var(--sink)); }
	.studio-gallery__directions span { transition: none; }
}

/* Soft tinted washes behind key light sections */
.section--wash-clay {
	background:
		radial-gradient(60% 45% at 85% 12%, rgba(163, 74, 30, 0.05), transparent 70%),
		radial-gradient(50% 40% at 10% 90%, rgba(168, 132, 50, 0.05), transparent 70%);
}
.section--wash-sage {
	background:
		radial-gradient(55% 45% at 12% 15%, rgba(156, 107, 79, 0.06), transparent 70%),
		radial-gradient(45% 40% at 88% 85%, rgba(163, 74, 30, 0.04), transparent 70%);
}

/* Class styles grid */
.styles-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.c-style-card {
	position: relative;
	min-block-size: 19rem;
	border-radius: var(--radius-lg);
	overflow: clip;
	display: flex;
	align-items: flex-end;
	padding: var(--space-lg);
	color: var(--text-on-dark);
	background: var(--bg-dark);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.c-style-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
@media (max-width: 640px) {
	.c-style-card { min-block-size: 13.5rem; padding: var(--space-md); }
}
.c-style-card__bg {
	position: absolute;
	inset: 0;
	transition: transform var(--dur-slow) var(--ease-out);
}
.c-style-card:hover .c-style-card__bg { transform: scale(1.05); }
.c-style-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(32, 36, 31, 0.82) 8%, rgba(32, 36, 31, 0.12) 60%, transparent);
}
.c-style-card__content { position: relative; z-index: 1; }
.c-style-card__content h3 { font-size: var(--text-xl); }
.c-style-card__content p { color: var(--text-on-dark-mute); font-size: var(--text-sm); margin-block-start: var(--space-2xs); }
.c-style-card__price { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-amber); margin-block-start: var(--space-sm); display: block; }

/* Timetable shell */
.timetable-shell {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: clamp(1rem, 3vw, 2.5rem);
	box-shadow: var(--shadow-md);
}

/* Teachers — two rows of two on phones and tablets, one row on wide
   screens (never three plus a lonely fourth). An odd last card spans the
   row. Each card is a size container: wide cards sit photo-beside-text. */
.teachers-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.teachers-grid > .c-teacher-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 75rem) {
	.teachers-grid { grid-template-columns: repeat(var(--teacher-cols, 4), minmax(0, 1fr)); }
	.teachers-grid > .c-teacher-card:last-child:nth-child(odd) { grid-column: auto; }
}

.teachers-grid .c-teacher-card { container-type: inline-size; }
.teachers-grid .c-teacher-card__body { min-inline-size: 0; }
.teachers-grid .c-teacher-card__role { display: block; line-height: 1.5; }

@container (min-width: 18rem) {
	.teachers-grid .c-teacher-card__inner {
		display: grid;
		grid-template-columns: min(44%, 15rem) minmax(0, 1fr);
		gap: var(--space-md);
		align-items: center;
	}
	.teachers-grid .c-teacher-card__avatar { margin-block-end: 0; }
}

/* Phones: compact cards so all four teachers fit in about one screen. */
@media (max-width: 39.99rem) {
	.teachers-grid { gap: var(--space-xs); }
	.teachers-grid .c-teacher-card { padding: var(--space-xs); border-radius: 1.25rem 2rem 1.25rem 1.5rem; }
	.teachers-grid .c-teacher-card:nth-child(2n) { border-radius: 2rem 1.25rem 1.5rem 1.25rem; }
	.teachers-grid .c-teacher-card__avatar { margin-block-end: var(--space-xs); }
	.teachers-grid .c-teacher-card__role { font-size: 0.625rem; letter-spacing: 0.06em; }
	.teachers-grid .c-teacher-card__name { font-size: var(--text-lg); margin-block: 0.15rem 0.25rem; }
	/* The role already names the principal teacher; full bios live on /teachers/. */
	.teachers-grid .c-teacher-card .c-badge,
	.teachers-grid .c-teacher-card__creds { display: none; }
}

/* Passes */
.passes-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	align-items: stretch;
}
.passes-grid--single {
	grid-template-columns: 1fr;
}

/* Testimonials — 3-column grid on wide screens; below 900px a swipeable,
   snap-aligned row (the next card peeks in) instead of a tall stack. */
.testimonials-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
@media (max-width: 899px) {
	.testimonials-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(84%, 23rem);
		gap: var(--space-md);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		margin-inline: calc(-1 * var(--gutter));
		padding: 1.75rem var(--gutter) var(--space-md);
		scrollbar-width: none;
	}
	.testimonials-grid::-webkit-scrollbar { display: none; }
	.testimonials-grid > .c-testimonial { scroll-snap-align: start; }
	.testimonials-grid .c-testimonial { padding: var(--space-lg) var(--space-md) var(--space-md); }
	.testimonials-grid .c-testimonial:hover { transform: none; }
	.testimonials-grid:focus-visible { outline: 2px solid var(--color-clay); outline-offset: -2px; border-radius: var(--radius-md); }
}

/* Retreat band */
.retreat-band {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: clip;
	background: var(--gradient-hero);
	color: var(--text-on-dark);
	padding: clamp(2rem, 6vw, 5rem);
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: 1.2fr 0.8fr;
	align-items: center;
}
.retreat-band::before { content: ""; position: absolute; inset: 0; background: var(--gradient-mesh); }
.retreat-band > * { position: relative; }
.retreat-band__date {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-amber);
}
@media (max-width: 768px) { .retreat-band { grid-template-columns: 1fr; } }

/* Instagram strip */
.insta-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: var(--space-2xs);
}
.insta-strip__cell {
	aspect-ratio: 1;
	border-radius: var(--radius-md);
	background: var(--color-sage-tint);
	display: grid;
	place-items: center;
	color: var(--color-moss-soft);
	overflow: clip;
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.insta-strip__cell:hover { transform: scale(0.97); opacity: 0.85; }
.insta-strip__cell svg { inline-size: 30%; block-size: 30%; opacity: 0.5; }

/* Newsletter band */
.newsletter-band { text-align: center; }
.newsletter-band .c-newsletter { margin-inline: auto; margin-block-start: var(--space-xl); }
.newsletter-band .section-intro { margin-inline: auto; }

/* ================= FOOTER ================= */

.site-footer {
	background: var(--bg-darkest);
	color: var(--text-on-dark);
	padding-block: var(--space-3xl) var(--space-lg);
	position: relative;
	overflow: clip;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0; inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(184, 145, 46, 0.5), transparent);
}
.footer-grid {
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .site-logo { font-size: var(--text-xl); }
.footer-tagline { color: var(--text-on-dark-mute); margin-block-start: var(--space-sm); font-size: var(--text-sm); }
.footer-heading {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-amber);
	margin-block-end: var(--space-md);
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.footer-links a { color: var(--text-on-dark-mute); font-size: var(--text-sm); transition: color var(--dur-fast), padding-inline-start var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color: var(--text-on-dark); padding-inline-start: 0.35em; }
.footer-contact address { font-style: normal; color: var(--text-on-dark-mute); font-size: var(--text-sm); line-height: 1.8; }
.footer-contact a { color: var(--text-on-dark); border-block-end: 1px solid rgba(242,238,227,0.3); }
.footer-contact a:hover { border-color: var(--color-brass); }
.social-links { display: flex; gap: var(--space-xs); margin-block-start: var(--space-md); }
.social-links a {
	inline-size: 2.5rem; block-size: 2.5rem;
	display: grid; place-items: center;
	border: 1px solid rgba(246, 241, 231, 0.2);
	border-radius: var(--radius-full);
	color: var(--text-on-dark-mute);
	transition: all var(--dur-base) var(--ease-out);
}
.social-links a:hover { background: var(--color-clay); border-color: var(--color-clay); color: var(--color-parchment); transform: translateY(-3px); }

.footer-bottom {
	margin-block-start: var(--space-3xl);
	padding-block-start: var(--space-lg);
	border-block-start: 1px solid rgba(246, 241, 231, 0.1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-lg);
	font-size: var(--text-xs);
	color: var(--text-on-dark-mute);
}
.footer-legal,
.footer-legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
}
.footer-legal ul { list-style: none; margin: 0; padding: 0; }
.footer-legal a {
	color: var(--text-on-dark-mute);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-legal a:hover { color: var(--color-amber); border-block-end-color: var(--color-amber); }
@media (max-width: 640px) {
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}
.footer-wordmark {
	font-family: var(--font-display);
	font-size: clamp(3rem, 12vw, 10rem);
	line-height: 1;
	text-align: center;
	color: rgba(246, 241, 231, 0.05);
	margin-block-start: var(--space-2xl);
	user-select: none;
	white-space: nowrap;
}

/* Award seal — the SME News hexagon, restamped in the studio's palette. */
.footer-award {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-3xl);
}
.footer-award__link {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	color: inherit;
	text-decoration: none;
}
.footer-award__seal {
	position: relative;
	flex: 0 0 auto;
	inline-size: clamp(7.5rem, 12vw, 9.25rem);
	aspect-ratio: 128 / 132;
	transform: rotate(-2.2deg);
	transition: transform var(--dur-base) var(--ease-spring);
	display: grid;
	place-items: center;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
.footer-award__link:hover .footer-award__seal,
.footer-award__link:focus-visible .footer-award__seal { transform: rotate(0deg) translateY(-4px); }
.footer-award__tape { z-index: 2; }
.footer-award__hex { position: absolute; inset: 0 0 8% 0; inline-size: 100%; block-size: auto; }
.footer-award__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 74%;
	max-inline-size: 7rem;
	transform: translateY(-4%);
}
.footer-award__mark {
	display: grid;
	justify-items: center;
	line-height: 1;
}
.footer-award__sme {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	letter-spacing: 0.02em;
	color: var(--color-ink);
}
.footer-award__sme em { font-style: normal; color: var(--color-amber); }
.footer-award__news {
	font-family: var(--font-hand);
	font-size: clamp(0.62rem, 0.9vw, 0.74rem);
	color: var(--color-clay);
	letter-spacing: 0.26em;
	margin-inline-start: 0.26em; /* optically recentre the tracked text */
}
.footer-award__rule {
	inline-size: 1px;
	align-self: stretch;
	background: color-mix(in srgb, var(--color-amber) 55%, transparent);
	margin-inline: clamp(0.35rem, 0.7vw, 0.55rem);
}
.footer-award__award {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(0.5rem, 0.72vw, 0.6rem);
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink);
}
.footer-award__year {
	position: absolute;
	z-index: 2;
	inset-block-end: -0.65rem;
	inset-inline-start: 50%;
	transform: translateX(-50%) rotate(1.6deg);
	padding: 0.3em 0.9em;
	background: var(--color-clay);
	color: var(--color-parchment);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.footer-award__text { display: grid; gap: 0.2rem; max-inline-size: 24rem; }
.footer-award__hand {
	font-family: var(--font-hand);
	font-size: 1.35rem;
	color: var(--color-gold-light);
	transform: rotate(-2deg);
	transform-origin: left center;
}
.footer-award__title {
	color: var(--text-on-dark);
	font-size: var(--text-md);
	transition: color var(--dur-fast) var(--ease-out);
}
.footer-award__link:hover .footer-award__title { color: var(--color-amber); }
.footer-award__sub {
	display: block;
	color: var(--text-on-dark-mute);
	font-size: var(--text-sm);
}
.footer-award__sub .icon {
	display: inline; /* base.css blocks svg by default */
	color: var(--color-amber);
	vertical-align: -0.25em;
	margin-inline-start: 0.35em;
	transition: transform var(--dur-base) var(--ease-spring);
}
.footer-award__nowrap { white-space: nowrap; }
.footer-award__link:hover .footer-award__sub .icon { transform: translateX(4px); }
@media (max-width: 640px) {
	.footer-award__link { flex-direction: column; gap: var(--space-lg); text-align: center; }
	.footer-award__text { justify-items: center; }
	.footer-award__hand { transform-origin: center; }
}

/* ================= BLOG ================= */

/* Archive masthead — deliberately lighter than the page-wide dark heroes. */
.blog-masthead {
	position: relative;
	/* #main-content already clears the fixed header on this light page. */
	padding-block-start: var(--space-xl);
	background:
		radial-gradient(circle at 82% 18%, rgba(192, 107, 69, 0.16), transparent 23rem),
		linear-gradient(145deg, var(--color-paper), var(--color-vellum));
	overflow: clip;
}
.blog-masthead__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.65fr);
	align-items: end;
	gap: var(--space-2xl);
	padding-block-end: var(--space-xl);
}
.blog-masthead h1 {
	max-inline-size: 15ch;
	margin-block-start: var(--space-xs);
	font-size: var(--text-5xl);
	line-height: 1.02;
	text-wrap: balance;
}
.blog-masthead__note,
.blog-lead__kicker,
.post-single__hand {
	font-family: var(--font-hand);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	line-height: 1;
	color: var(--color-clay);
	transform: rotate(-2deg);
}
.blog-masthead__intro {
	max-inline-size: 30rem;
	padding-inline-start: var(--space-md);
	border-inline-start: 1px solid var(--color-brass);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--text-soft);
}
.blog-masthead .c-divider,
.post-single__cover .c-divider { margin-block-end: calc(-1 * clamp(3.5rem, 9vw, 7.5rem)); z-index: 2; }

.blog-archive { position: relative; background: var(--color-linen); }
.blog-journal { display: grid; gap: var(--space-2xl); }
.blog-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.8fr);
	min-block-size: 33rem;
	background: var(--color-vellum);
	border: 1px solid color-mix(in srgb, var(--color-copper) 34%, var(--border));
	border-radius: var(--radius-card-a);
	overflow: clip;
	box-shadow: var(--shadow-md);
}
.blog-lead__media {
	display: block;
	min-block-size: 30rem;
	overflow: clip;
	background: var(--color-sage-tint);
}
.blog-lead__media img,
.blog-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: sepia(0.1) saturate(0.94);
	transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.blog-lead:hover .blog-lead__media img,
.blog-card:hover .blog-card__media img { transform: scale(1.035); filter: sepia(0.02) saturate(1.02); }
.blog-lead__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: clamp(2rem, 5vw, 4.5rem);
}
.blog-lead__body h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); text-wrap: balance; }
.blog-lead__body h2 a:hover,
.blog-card__title a:hover { color: var(--accent); }
.blog-lead__body > p:not(.blog-lead__kicker) { color: var(--text-soft); font-size: var(--text-lg); }

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
}
.blog-grid:empty { display: none; }
.blog-card {
	min-inline-size: 0;
	background: var(--color-vellum);
	border: 1px solid var(--border);
	border-radius: var(--radius-card-b);
	overflow: clip;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.blog-card:nth-child(3n + 2) { border-radius: var(--radius-card-c); transform: translateY(var(--space-md)); }
.blog-card:nth-child(3n) { border-radius: var(--radius-card-a); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card:nth-child(3n + 2):hover { transform: translateY(calc(var(--space-md) - 5px)); }
.blog-card__media {
	display: block;
	aspect-ratio: 5 / 4;
	overflow: clip;
	background: var(--color-sage-tint);
}
.blog-card:nth-child(even) .blog-card__media { aspect-ratio: 4 / 3.45; }
.blog-card__media-fallback {
	display: grid;
	place-items: center;
	block-size: 100%;
	min-block-size: 15rem;
	color: var(--color-walnut);
}
.blog-card__media-fallback svg { inline-size: min(42%, 10rem); opacity: 0.48; }
.blog-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-lg);
	flex: 1;
}
.blog-card__meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-mute);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}
.blog-card__title { font-size: var(--text-xl); line-height: var(--leading-tight); text-wrap: balance; }
.blog-card__excerpt { color: var(--text-soft); font-size: var(--text-base); flex: 1; }
.blog-card .c-link,
.blog-lead .c-link { margin-block-start: var(--space-xs); }
.blog-pagination { margin-block-start: var(--space-3xl); }
.blog-pagination ul { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; padding: 0; }
.blog-pagination a,
.blog-pagination span {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.75rem;
	block-size: 2.75rem;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-full);
	border: 1px solid var(--border);
	background: var(--color-vellum);
	font-size: var(--text-sm);
}
.blog-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.blog-pagination .current { background: var(--bg-dark); color: var(--text-on-dark); border-color: var(--bg-dark); }
.blog-empty { text-align: center; padding: var(--space-3xl) 0; color: var(--text-mute); font: italic var(--text-xl) / 1.4 var(--font-display); }

/* ---------- Single post — field-note cover ---------- */
.post-single__cover {
	position: relative;
	/* #main-content already clears the fixed header on this light page. */
	padding-block-start: var(--space-lg);
	background:
		radial-gradient(circle at 14% 22%, rgba(217, 164, 65, 0.1), transparent 24rem),
		var(--color-linen);
	overflow: clip;
}
.post-single__cover-grid {
	display: grid;
	grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(2rem, 6vw, 6rem);
	padding-block: var(--space-xl) var(--space-2xl);
}
.post-single__cover-copy { position: relative; z-index: 1; }
.post-single__crumbs { margin-block-end: var(--space-xl); }
.post-single__hand { margin-block-end: var(--space-md); }
.post-single__title {
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	max-width: 18ch;
	text-wrap: balance;
}
.post-single__meta {
	margin-block-start: var(--space-lg);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-mute);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.post-single__dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--color-brass); }
.post-single__cover-media {
	position: relative;
	margin: 0;
	padding: var(--space-sm) var(--space-sm) var(--space-lg);
	background: var(--color-paper);
	border: 1px solid rgba(92, 83, 71, 0.16);
	border-radius: var(--radius-card-c);
	box-shadow: var(--shadow-xl);
	transform: rotate(1.15deg);
}
.post-single__cover-media::before {
	content: "";
	position: absolute;
	inset-block-start: -0.65rem;
	inset-inline-start: 42%;
	inline-size: 7rem;
	block-size: 1.7rem;
	background: rgba(217, 164, 65, 0.38);
	transform: rotate(-3deg);
	z-index: 2;
}
.post-single__cover-media img {
	display: block;
	inline-size: 100%;
	block-size: clamp(22rem, 48vw, 37rem);
	object-fit: cover;
	border-radius: 1.4rem 2.6rem 1.25rem 1.8rem;
	filter: sepia(0.08) saturate(0.97);
}
.post-single__cover-media figcaption {
	padding-block-start: var(--space-sm);
	font-family: var(--font-hand);
	font-size: var(--text-lg);
	text-align: center;
	color: var(--text-mute);
}
.post-single__cover-fallback { display: grid; place-items: center; min-block-size: 28rem; border-radius: var(--radius-lg); background: var(--color-sage-tint); color: var(--color-walnut); }
.post-single__cover-fallback svg { inline-size: 42%; opacity: 0.5; }

/* Reading column */
.post-single__body {
	padding-block: calc(var(--space-3xl) + 1rem) var(--space-3xl);
}
.post-single__content {
	inline-size: min(100% - 2 * var(--gutter), 48rem);
	margin-inline: auto;
	font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
	line-height: 1.8;
	color: var(--color-ink-soft);
}
.post-single__content > * + * { margin-block-start: 1.35em; }

/* Wix's public article wrapper arrives with layout/border declarations that
   belong to its old editor chrome, not to the authored story. Flatten only
   those imported wrappers; semantic blockquotes and tables keep their rules. */
.post-single__content > div,
.post-single__content > section,
.post-single__content [class~="moHCnT"],
.post-single__content [class~="fTEXDR"],
.post-single__content [class~="_0uBUn"] {
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.post-single__content [style*="border:"] { border: 0 !important; }

/* First paragraph reads as a lead */
.post-single__content > p:first-of-type {
	font-size: var(--text-lg);
	color: var(--text);
	line-height: var(--leading-snug);
}
.post-single__content > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 3.2em;
	line-height: 0.85;
	float: left;
	padding-inline-end: 0.12em;
	padding-block-start: 0.06em;
	color: var(--color-clay);
}

.post-single__content h2 {
	font-size: var(--text-2xl);
	margin-block-start: 1.8em;
	color: var(--text);
}
.post-single__content h3 {
	font-size: var(--text-xl);
	margin-block-start: 1.6em;
	color: var(--text);
}
.post-single__content a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.post-single__content ul, .post-single__content ol { padding-inline-start: var(--space-lg); }
.post-single__content li + li { margin-block-start: 0.4em; }

.post-single__content blockquote {
	margin: var(--space-xl) 0;
	padding: 0 0 0 var(--space-lg);
	border-inline-start: 3px solid var(--color-brass);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: var(--leading-snug);
	color: var(--text);
	max-width: 100%;
}

/* Images — rebuilt by inc/blog-content.php into .post-figure variants, so
   each keeps its authored width (portrait photos frame smaller; wide ones
   run the column). No blanket cropping: height stays true to the source. */
.post-single__content figure.post-figure {
	inline-size: 100%;
	max-inline-size: 100%;
	margin: var(--space-2xl) auto;
	padding: var(--space-2xs);
	background: var(--color-vellum);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-card-a);
	transform: rotate(-0.45deg);
}
.post-single__content figure.post-figure--tilt-b {
	border-radius: var(--radius-card-c);
	transform: rotate(0.5deg);
}
.post-single__content figure.post-figure--full,
.post-single__content figure.post-figure--full.post-figure--tilt-a,
.post-single__content figure.post-figure--full.post-figure--tilt-b {
	transform: none;
	border-radius: var(--radius-card-b);
}
.post-single__content figure.post-figure--sm,
.post-single__content figure.post-figure--md,
.post-single__content figure.post-figure--wide {
	inline-size: fit-content;
}
.post-single__content figure.post-figure--sm { transform: none; box-shadow: var(--shadow-sm); }
.post-single__content .post-figure__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	filter: sepia(0.06) saturate(0.97);
	border-radius: calc(var(--radius-card-b) - 0.35rem);
}
/* Plain (non-imported) images inline in paragraphs keep a sensible default. */
.post-single__content p > img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-card-b);
}
.post-single__content figcaption {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-mute);
	text-align: center;
	margin-block-start: var(--space-sm);
	letter-spacing: 0.04em;
}
.post-single__content [style*="width"]:not(figure.post-figure),
.post-single__content [style*="float"] { max-width: 100% !important; float: none !important; }
@media (max-width: 560px) {
	/* Only the column-width variants run edge-to-edge; smaller framed
	   photos keep their margins so the rhythm survives on phones. */
	.post-single__content figure.post-figure--full,
	.post-single__content figure.post-figure--wide {
		inline-size: calc(100% + 2 * var(--gutter));
		max-inline-size: none;
		margin-inline: calc(-1 * var(--gutter));
		border-radius: 0;
		border-inline: 0;
		transform: none;
	}
}

/* Signoff */
.post-single__signoff {
	text-align: center;
	margin-block: var(--space-2xl);
	color: var(--text-mute);
}
.post-single__lotus { inline-size: 3.5rem; margin-inline: auto; color: var(--color-clay); opacity: 0.8; }
.post-single__signoff p {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-lg);
	margin-block-start: var(--space-sm);
}

/* Pager */
.post-single__pager {
	inline-size: min(100% - 2 * var(--gutter), 48rem);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: var(--space-md);
}
.post-single__pager-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-md);
	background: var(--color-vellum);
	border: 1px solid var(--border);
	border-radius: var(--radius-card-c);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.post-single__pager-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-single__pager-card--next { text-align: end; align-items: flex-end; }
.post-single__pager-card--empty { background: transparent; border-color: transparent; }
.post-single__pager-card img {
	inline-size: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	border-radius: var(--radius-sm);
	filter: sepia(0.12) saturate(0.95);
}
.post-single__pager-dir {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--accent);
}
.post-single__pager-title { font-family: var(--font-display); font-size: var(--text-base); line-height: var(--leading-snug); }
.post-single__pager-all {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--accent);
	white-space: nowrap;
}

@media (max-width: 960px) {
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-card:nth-child(3n + 2) { transform: none; }
	.blog-card:nth-child(3n + 2):hover { transform: translateY(-5px); }
}
@media (max-width: 860px) {
	.blog-masthead__inner,
	.blog-lead,
	.post-single__cover-grid { grid-template-columns: 1fr; }
	.blog-masthead__inner { align-items: start; gap: var(--space-lg); }
	.blog-masthead__intro { max-inline-size: 38rem; }
	.blog-lead { min-block-size: 0; }
	.blog-lead__media { min-block-size: 0; aspect-ratio: 16 / 10; }
	.blog-lead__body { padding: var(--space-xl); }
	.post-single__cover-grid { gap: var(--space-xl); padding-block-end: var(--space-3xl); }
	.post-single__crumbs { margin-block-end: var(--space-lg); }
	.post-single__cover-media { inline-size: min(100%, 42rem); justify-self: center; transform: rotate(0.6deg); }
	.post-single__cover-media img { block-size: clamp(20rem, 76vw, 34rem); }
}
@media (max-width: 620px) {
	.blog-masthead { padding-block-start: var(--space-lg); }
	.blog-masthead h1 { font-size: var(--text-4xl); }
	.blog-grid { grid-template-columns: 1fr; }
	.blog-card__media { aspect-ratio: 16 / 10; }
	.blog-lead__body { padding: var(--space-lg); }
	.post-single__cover-grid { padding-block-start: var(--space-lg); }
	.post-single__title { font-size: var(--text-3xl); }
	.post-single__cover-media { margin-inline: calc(-0.45 * var(--gutter)); inline-size: calc(100% + 0.9 * var(--gutter)); }
	.post-single__cover-media img { block-size: clamp(19rem, 104vw, 30rem); }
	.post-single__body { padding-block-start: var(--space-3xl); }
	.post-single__content figure,
	.post-single__content img { inline-size: calc(100% + 2 * var(--gutter)); max-inline-size: none; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
	.post-single__pager { grid-template-columns: 1fr; }
	.post-single__pager-all { justify-self: center; order: -1; }
}

/* ================= NORFOLK FIELD JOURNAL — v3 =================
   Cooler mineral surfaces, compact covers and one tidal sharing gesture. */

.blog-masthead {
	padding-block-start: clamp(1rem, 2.4vw, 1.75rem);
	background:
		radial-gradient(circle at 84% 4%, rgba(216, 185, 162, 0.5), transparent 24rem),
		linear-gradient(155deg, var(--color-paper), var(--color-sage-glow));
}
.blog-masthead__inner {
	grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	padding-block-end: clamp(1.75rem, 4vw, 3rem);
}
.blog-masthead h1 {
	max-inline-size: 17ch;
	margin-block-start: 0.65rem;
	font-size: clamp(2.6rem, 5.8vw, 5rem);
	line-height: 0.98;
}
.blog-masthead__note,
.blog-lead__kicker,
.post-single__hand {
	font-family: var(--font-display);
	font-size: clamp(0.9rem, 0.82rem + 0.25vw, 1.05rem);
	font-style: italic;
	font-weight: 470;
	line-height: 1.2;
	letter-spacing: 0.015em;
	color: var(--color-clay);
	transform: none;
}
.blog-masthead__intro {
	padding: 0.75rem 0 0.75rem 1.25rem;
	border-inline-start: 2px solid var(--color-sage);
	font-size: clamp(1rem, 1.4vw, 1.16rem);
}
.blog-masthead .c-divider,
.post-single__cover .c-divider { display: none; }

.blog-archive {
	padding-block: clamp(2rem, 5vw, 4.5rem);
	background: var(--color-parchment);
}
.blog-journal { gap: clamp(2rem, 5vw, 4rem); }
.blog-lead {
	grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
	min-block-size: 26rem;
	border-color: color-mix(in srgb, var(--color-sage) 50%, var(--border));
	border-radius: 1.35rem 3rem 1.35rem 1.35rem;
	background: var(--color-cream);
	box-shadow: 0 16px 45px rgba(59, 39, 29, 0.1);
}
.blog-lead__media { min-block-size: 26rem; background: var(--color-sage-tint); }
.blog-lead__body { padding: clamp(1.75rem, 4vw, 3.25rem); }
.blog-lead__body h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.blog-lead__media img,
.blog-card__media img { filter: saturate(0.9) contrast(0.98); }
.blog-lead:hover .blog-lead__media img,
.blog-card:hover .blog-card__media img { filter: saturate(1) contrast(1); }

.blog-grid { gap: clamp(1.25rem, 3vw, 2.25rem); }
.blog-card,
.blog-card:nth-child(3n + 2),
.blog-card:nth-child(3n) {
	border-radius: 1.1rem 2rem 1.1rem 1.1rem;
	background: var(--color-cream);
	transform: none;
}
.blog-card:nth-child(3n + 2) { border-radius: 2rem 1.1rem 1.1rem 1.1rem; }
.blog-card:hover,
.blog-card:nth-child(3n + 2):hover { transform: translateY(-4px); }
.blog-card__body { padding: clamp(1.2rem, 2.2vw, 1.65rem); }

.post-single__cover {
	padding-block-start: clamp(0.75rem, 2vw, 1.25rem);
	background:
		radial-gradient(circle at 8% 18%, rgba(216, 185, 162, 0.42), transparent 22rem),
		linear-gradient(145deg, var(--color-linen), var(--color-paper));
}
.post-single__cover-grid {
	grid-template-columns: minmax(21rem, 1.08fr) minmax(22rem, 0.92fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding-block: clamp(1rem, 2.5vw, 2rem) clamp(1.75rem, 4vw, 3rem);
}
.post-single__crumbs { margin-block-end: clamp(1rem, 2vw, 1.5rem); }
.post-single__hand { margin-block-end: 0.75rem; }
.post-single__title {
	max-inline-size: 16ch;
	font-size: clamp(2.5rem, 5vw, 4.65rem);
	line-height: 1.01;
}
.post-single__meta {
	margin-block-start: clamp(1rem, 2vw, 1.5rem);
	font-size: 0.73rem;
}
.post-single__cover-media {
	padding: 0.65rem 0.65rem 1.25rem;
	border-color: color-mix(in srgb, var(--color-sage) 32%, var(--border));
	border-radius: 1.2rem 2.6rem 1.2rem 1.6rem;
	background: var(--color-cream);
	box-shadow: 0 22px 58px rgba(59, 39, 29, 0.16);
	transform: rotate(0.55deg);
}
.post-single__cover-media::before {
	inline-size: 6rem;
	block-size: 1.25rem;
	background: rgba(216, 185, 162, 0.78);
}
.post-single__cover-media img {
	block-size: clamp(16rem, 25vw, 21rem);
	border-radius: 0.85rem 2rem 0.85rem 1.25rem;
	filter: saturate(0.92) contrast(0.99);
}
.post-single__cover-media figcaption {
	padding-block-start: 0.7rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-style: italic;
}
.post-single__cover-fallback { min-block-size: 20rem; }
.post-single__body { padding-block: clamp(3rem, 7vw, 5.5rem); }
.post-single__content { inline-size: min(100% - 2 * var(--gutter), 54rem); }

/* Wix exports carried their own blank spacer rows and social footer. The
   journal supplies an accessible native share ribbon below, so the legacy
   fragments are suppressed without altering the imported article data. */
.post-single__content [type="empty-line"],
.post-single__content [type="last"]:empty,
.post-single__content [type="paragraph"]:empty,
.post-single__content button[aria-label^="Share via"],
.post-single__content button[aria-label="Print Post"],
.post-single__content div:has(> button[aria-label^="Share via"]),
.post-single__content div:has(> button[aria-label="Print Post"]),
.post-single__content [style*="--width:40px"],
.post-single__content footer:has(button[aria-label^="Share via"]),
.post-single__content footer:has(button[aria-label="Print Post"]) { display: none !important; }
.post-single__content ._8C1-J:has(> .fujJq > br[role="presentation"]:only-child),
body.single-post main button.qXlEOR,
body.single-post main .dw8bme,
body.single-post main .bEeZ1_ { display: none !important; }

/* Tidal sharing ribbon — the article's one expressive gesture. */
.post-share {
	position: relative;
	inline-size: min(100% - 2 * var(--gutter), 58rem);
	margin: clamp(3.5rem, 8vw, 6rem) auto var(--space-2xl);
	padding: clamp(1.4rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(5.5rem, 0.24fr) minmax(0, 1fr);
	align-items: center;
	gap: 1rem clamp(1.25rem, 4vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--color-sage) 58%, transparent);
	border-radius: 1.25rem 3.5rem 1.25rem 1.25rem;
	background:
		radial-gradient(circle at 10% 18%, rgba(216, 185, 162, 0.16), transparent 14rem),
		var(--color-moss);
	color: var(--text-on-dark);
	box-shadow: 0 24px 60px rgba(30, 42, 39, 0.16);
	overflow: hidden;
	scroll-margin-block-start: calc(var(--header-h-scrolled, 4rem) + 1rem);
}
.post-share::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.85rem;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(216, 185, 162, 0.42) 22%, rgba(216, 185, 162, 0.12) 72%, transparent);
	pointer-events: none;
}
.post-share__ripple { color: var(--color-sage-tint); opacity: 0.88; }
.post-share__ripple svg { inline-size: 100%; }
.post-share__ripple circle,
.post-share__ripple path { stroke: currentColor; stroke-width: 1.35; }
.post-share__ripple circle:nth-child(2) { opacity: 0.55; }
.post-share__ripple circle:nth-child(3) { opacity: 0.28; }
.post-share__ripple path { stroke: var(--color-clay-warm); }
.post-share__copy { position: relative; z-index: 1; }
.post-share__eyebrow {
	margin: 0 0 0.45rem;
	font: 700 0.65rem/1.2 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-sage-tint);
}
.post-share__copy h2 {
	max-inline-size: 24ch;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	color: var(--text-on-dark);
}
.post-share__copy > p:last-child { margin-block-start: 0.5rem; color: var(--text-on-dark-mute); }
.post-share__actions {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	padding-block-start: 0.4rem;
}
.post-share__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-block-size: 2.75rem;
	padding: 0.62rem 0.9rem;
	border: 1px solid rgba(216, 185, 162, 0.38);
	border-radius: var(--radius-full);
	background: rgba(246, 247, 241, 0.06);
	color: var(--text-on-dark);
	font: 650 0.82rem/1 var(--font-body);
	transition: translate var(--dur-fast) var(--ease-out), background-color var(--dur-fast), border-color var(--dur-fast);
}
.post-share__button .icon { inline-size: 1.08rem; block-size: 1.08rem; }
.post-share__button:hover,
.post-share__button:focus-visible {
	translate: 0 -2px;
	border-color: var(--color-sage-tint);
	background: rgba(246, 247, 241, 0.13);
	color: #fff;
}
.post-share__button--primary {
	border-color: var(--color-clay);
	background: var(--color-clay);
	box-shadow: 0 8px 24px rgba(30, 42, 39, 0.24);
}
.post-share__button.is-copied { border-color: var(--color-sage-tint); background: var(--color-success); }
.post-share__status {
	grid-column: 1 / -1;
	min-block-size: 1rem;
	margin: 0;
	font-size: 0.75rem;
	color: var(--color-sage-tint);
}

@media (max-width: 860px) {
	/* Re-stack after the two-column override above, which otherwise wins at every width. */
	.blog-masthead__inner { grid-template-columns: 1fr; align-items: start; gap: var(--space-lg); }
	.post-single__cover-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
	.post-single__cover-copy { max-inline-size: 42rem; }
	.post-single__cover-grid { padding-block-end: var(--space-xl); }
	.post-single__cover-media img { block-size: clamp(18rem, 62vw, 30rem); }
}
@media (max-width: 620px) {
	.blog-masthead h1 { font-size: clamp(2.45rem, 12vw, 4rem); }
	.blog-masthead__intro { padding-inline-start: 1rem; }
	.blog-lead { border-radius: 1rem 2rem 1rem 1rem; }
	.post-single__cover-grid { padding-block-start: 0.8rem; }
	.post-single__title { font-size: clamp(2.35rem, 12vw, 3.75rem); }
	.post-single__cover-media img { block-size: clamp(17rem, 88vw, 25rem); }
	.post-single__body { padding-block-start: 2.75rem; }
	.post-share {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		border-radius: 1rem 2.5rem 1rem 1rem;
	}
	.post-share__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-share__button { inline-size: 100%; }
}
@media (max-width: 420px) {
	.post-share { grid-template-columns: 1fr; }
	.post-share__ripple { inline-size: 4.5rem; }
	.post-share__actions { grid-template-columns: 1fr; }
}

/* ================= PAGE SECTIONS (interior) ================= */

.about-block { max-inline-size: var(--container-narrow); margin-inline: auto; }
.about-block--fill { max-inline-size: none; }
.about-block + .about-block { margin-block-start: var(--space-3xl); }
.about-block h2 { margin-block-end: var(--space-md); }
.about-block p + p { margin-block-start: var(--space-md); }

/* Teachers detail */
.teacher-detail-grid { display: grid; gap: var(--space-2xl); }
.c-teacher-feature {
	display: grid;
	grid-template-columns: minmax(16rem, 0.9fr) 1.4fr;
	gap: var(--space-2xl);
	align-items: start;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
}
@media (max-width: 768px) { .c-teacher-feature { grid-template-columns: 1fr; } }
.c-teacher-feature__avatar {
	aspect-ratio: 4 / 4.6;
	border-radius: var(--radius-lg);
	background: var(--color-sage-tint);
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
}
.c-teacher-feature__avatar svg { inline-size: 55%; block-size: 55%; color: var(--color-moss-soft); opacity: 0.55; }
.c-teacher-feature__avatar.has-photo { display: block; }
.c-teacher-feature__avatar.has-photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: none;
}
.c-teacher-feature__avatar.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: none;
	pointer-events: none;
}
/* People cards ("Show each whole photo"): the frame takes the photo's own shape. */
.c-teacher-feature__avatar--whole.has-photo { aspect-ratio: auto; }
.c-teacher-feature__avatar--whole.has-photo img { block-size: auto; }
.c-teacher-feature__creds {
	display: grid;
	gap: var(--space-2xs);
	margin-block-start: var(--space-md);
	padding-block-start: var(--space-md);
	border-block-start: 1px solid var(--border);
	font-size: var(--text-sm);
	color: var(--text-soft);
}
.c-teacher-feature__creds li { display: flex; gap: var(--space-2xs); align-items: baseline; }
.c-teacher-feature__creds .icon { color: var(--color-success); inline-size: 1em; block-size: 1em; transform: translateY(0.12em); }

/* CTA band */
.cta-band {
	text-align: center;
	background: var(--gradient-hero);
	color: var(--text-on-dark);
	border-radius: var(--radius-xl);
	padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter);
	position: relative;
	overflow: clip;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--gradient-mesh); }
.cta-band > * { position: relative; }
.cta-band .eyebrow { color: var(--color-amber); }
.cta-band .section-title { color: var(--text-on-dark); }
.cta-band .section-intro { margin-inline: auto; color: var(--text-on-dark-mute); }
.cta-band .hero-actions { justify-content: center; }

/* Contact */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-2xl);
	align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { display: grid; gap: var(--space-md); }
.contact-row { display: flex; gap: var(--space-md); align-items: flex-start; }
.contact-row .c-card__icon { margin: 0; flex-shrink: 0; }
.contact-row h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin-block-end: 0.2em; }
.contact-row p { font-size: var(--text-sm); color: var(--text-soft); }
.contact-row a { color: var(--accent); font-weight: 500; }

/* Calendar plugin overrides to sit in the design system */
.yoga-calendar { font-family: var(--font-body); }

/* ---------- Site spacing rhythm (Customizer → Section spacing) ----------
 * Every section gap is a multiple of --section-y, so scaling it here keeps
 * the whole site proportional. Balanced = tokens.css (no body class). */
body.ss-rhythm-compact { --section-y: clamp(3rem, 2.25rem + 3.75vw, 6rem); }
body.ss-rhythm-airy { --section-y: clamp(5rem, 3.75rem + 6.25vw, 10rem); }

/* Stacking: two touching sections on the same background share ONE gap
 * (the upper section's bottom space) instead of adding 2 × --section-y.
 * Specificity stays 0,1,0 (everything else in :where) so any explicit admin
 * spacing below wins. A divider between sections breaks adjacency, and
 * bands with their own backgrounds keep their full space. Switch off with
 * body.ss-stack-full. */
:where(body:not(.ss-stack-full)) :where(.section:not(.section--dark, .section--sunken, .section--raised, .section--wash-clay, .section--wash-sage, .studio-gallery-section, .gx, .blog-archive, .lb-has-bg, [class*="ss-bg-"])) + .section:where(:not(.section--dark, .section--sunken, .section--raised, .section--wash-clay, .section--wash-sage, .studio-gallery-section, .gx, .blog-archive, .lb-has-bg, [class*="ss-bg-"])),
:where(body:not(.ss-stack-full)) :where(.section--dark:not(.ss-bg-sunken, .ss-bg-raised), .ss-bg-dark) + .section:where(.section--dark:not(.ss-bg-sunken, .ss-bg-raised), .ss-bg-dark),
:where(body:not(.ss-stack-full)) :where(.section--sunken:not(.ss-bg-dark, .ss-bg-raised), .ss-bg-sunken) + .section:where(.section--sunken:not(.ss-bg-dark, .ss-bg-raised), .ss-bg-sunken),
:where(body:not(.ss-stack-full)) :where(.section--raised:not(.ss-bg-dark, .ss-bg-sunken), .ss-bg-raised) + .section:where(.section--raised:not(.ss-bg-dark, .ss-bg-sunken), .ss-bg-raised),
:where(body:not(.ss-stack-full)) :where(.section--wash-clay:not([class*="ss-bg-"])) + .section:where(.section--wash-clay:not([class*="ss-bg-"])),
:where(body:not(.ss-stack-full)) :where(.section--wash-sage:not([class*="ss-bg-"])) + .section:where(.section--wash-sage:not([class*="ss-bg-"])) {
	padding-block-start: 0;
}

/* ---------- Section design presets (admin-controlled, preset-only) ----------
 * Prefixed ss-bg-*/ss-sp-* so they can never collide with the parts' own
 * designed looks; they layer only when an admin picks a non-default value. */
.section.ss-bg-sunken { background: var(--bg-sunken); }
.section.ss-bg-raised { background: var(--bg-raised); }
.section.ss-bg-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section.ss-bg-dark .eyebrow { color: var(--color-brass); }
.section.ss-sp-flush { padding-block-start: 0; }
.section.ss-sp-snug { padding-block: calc( var(--section-y) * 0.55 ); }
.section.ss-sp-roomy { padding-block: calc( var(--section-y) * 1.5 ); }
/* head_cl lands on the <header class="section-head"> itself. */
.section-head.ss-head-center { margin-inline: auto; text-align: center; }
.section-head.ss-head-center .section-title,
.section-head.ss-head-center .section-intro { margin-inline: auto; text-align: center; }

/* ---------- Spacing fine-tune (Design → Spacing box) ----------
 * Value classes set a multiplier; a [class*=] rule applies it, so a side is
 * only touched when the admin chose something for it. Desktop applies to
 * every screen; tablet (≤1024px) and mobile (≤640px) override when set.
 * Scale: none 0 · xs .25 · s .5 · m .75 · l 1 · xl 1.5 × --section-y. */
.ss-pt-none { --ss-pt: 0; } .ss-pt-xs { --ss-pt: .25; } .ss-pt-s { --ss-pt: .5; } .ss-pt-m { --ss-pt: .75; } .ss-pt-l { --ss-pt: 1; } .ss-pt-xl { --ss-pt: 1.5; }
.ss-pb-none { --ss-pb: 0; } .ss-pb-xs { --ss-pb: .25; } .ss-pb-s { --ss-pb: .5; } .ss-pb-m { --ss-pb: .75; } .ss-pb-l { --ss-pb: 1; } .ss-pb-xl { --ss-pb: 1.5; }
.ss-mt-none { --ss-mt: 0; } .ss-mt-xs { --ss-mt: .25; } .ss-mt-s { --ss-mt: .5; } .ss-mt-m { --ss-mt: .75; } .ss-mt-l { --ss-mt: 1; } .ss-mt-xl { --ss-mt: 1.5; }
.ss-mb-none { --ss-mb: 0; } .ss-mb-xs { --ss-mb: .25; } .ss-mb-s { --ss-mb: .5; } .ss-mb-m { --ss-mb: .75; } .ss-mb-l { --ss-mb: 1; } .ss-mb-xl { --ss-mb: 1.5; }
.ss-t-pt-none { --ss-t-pt: 0; } .ss-t-pt-xs { --ss-t-pt: .25; } .ss-t-pt-s { --ss-t-pt: .5; } .ss-t-pt-m { --ss-t-pt: .75; } .ss-t-pt-l { --ss-t-pt: 1; } .ss-t-pt-xl { --ss-t-pt: 1.5; }
.ss-t-pb-none { --ss-t-pb: 0; } .ss-t-pb-xs { --ss-t-pb: .25; } .ss-t-pb-s { --ss-t-pb: .5; } .ss-t-pb-m { --ss-t-pb: .75; } .ss-t-pb-l { --ss-t-pb: 1; } .ss-t-pb-xl { --ss-t-pb: 1.5; }
.ss-t-mt-none { --ss-t-mt: 0; } .ss-t-mt-xs { --ss-t-mt: .25; } .ss-t-mt-s { --ss-t-mt: .5; } .ss-t-mt-m { --ss-t-mt: .75; } .ss-t-mt-l { --ss-t-mt: 1; } .ss-t-mt-xl { --ss-t-mt: 1.5; }
.ss-t-mb-none { --ss-t-mb: 0; } .ss-t-mb-xs { --ss-t-mb: .25; } .ss-t-mb-s { --ss-t-mb: .5; } .ss-t-mb-m { --ss-t-mb: .75; } .ss-t-mb-l { --ss-t-mb: 1; } .ss-t-mb-xl { --ss-t-mb: 1.5; }
.ss-m-pt-none { --ss-m-pt: 0; } .ss-m-pt-xs { --ss-m-pt: .25; } .ss-m-pt-s { --ss-m-pt: .5; } .ss-m-pt-m { --ss-m-pt: .75; } .ss-m-pt-l { --ss-m-pt: 1; } .ss-m-pt-xl { --ss-m-pt: 1.5; }
.ss-m-pb-none { --ss-m-pb: 0; } .ss-m-pb-xs { --ss-m-pb: .25; } .ss-m-pb-s { --ss-m-pb: .5; } .ss-m-pb-m { --ss-m-pb: .75; } .ss-m-pb-l { --ss-m-pb: 1; } .ss-m-pb-xl { --ss-m-pb: 1.5; }
.ss-m-mt-none { --ss-m-mt: 0; } .ss-m-mt-xs { --ss-m-mt: .25; } .ss-m-mt-s { --ss-m-mt: .5; } .ss-m-mt-m { --ss-m-mt: .75; } .ss-m-mt-l { --ss-m-mt: 1; } .ss-m-mt-xl { --ss-m-mt: 1.5; }
.ss-m-mb-none { --ss-m-mb: 0; } .ss-m-mb-xs { --ss-m-mb: .25; } .ss-m-mb-s { --ss-m-mb: .5; } .ss-m-mb-m { --ss-m-mb: .75; } .ss-m-mb-l { --ss-m-mb: 1; } .ss-m-mb-xl { --ss-m-mb: 1.5; }

.section[class*="ss-pt-"] { padding-block-start: calc( var(--section-y) * var(--ss-pt) ); }
.section[class*="ss-pb-"] { padding-block-end: calc( var(--section-y) * var(--ss-pb) ); }
.section[class*="ss-mt-"] { margin-block-start: calc( var(--section-y) * var(--ss-mt) ); }
.section[class*="ss-mb-"] { margin-block-end: calc( var(--section-y) * var(--ss-mb) ); }
@media (max-width: 1024px) {
	.section[class*="ss-t-pt-"] { padding-block-start: calc( var(--section-y) * var(--ss-t-pt) ); }
	.section[class*="ss-t-pb-"] { padding-block-end: calc( var(--section-y) * var(--ss-t-pb) ); }
	.section[class*="ss-t-mt-"] { margin-block-start: calc( var(--section-y) * var(--ss-t-mt) ); }
	.section[class*="ss-t-mb-"] { margin-block-end: calc( var(--section-y) * var(--ss-t-mb) ); }
}
@media (max-width: 640px) {
	.section[class*="ss-m-pt-"] { padding-block-start: calc( var(--section-y) * var(--ss-m-pt) ); }
	.section[class*="ss-m-pb-"] { padding-block-end: calc( var(--section-y) * var(--ss-m-pb) ); }
	.section[class*="ss-m-mt-"] { margin-block-start: calc( var(--section-y) * var(--ss-m-mt) ); }
	.section[class*="ss-m-mb-"] { margin-block-end: calc( var(--section-y) * var(--ss-m-mb) ); }
}

/* ============================================================
   CUSTOM LAYOUT — admin-built rows → columns → items
   (inc/layout-builder.php, sections/layout.php). Every choice is a
   class; only admin colours arrive as custom properties.
   ============================================================ */

/* Fluid spacing scale shared by rows, columns and items (≈8/16/32/48/72px). */
.lb-section {
	--lb-xs: 0.5rem;
	--lb-s: 1rem;
	--lb-m: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
	--lb-l: clamp(2rem, 1.4rem + 1.8vw, 3rem);
	--lb-xl: clamp(3rem, 2rem + 3vw, 4.5rem);
	isolation: isolate;
}
.lb-section > .container { position: relative; z-index: 1; }
.lb-section .c-decor { z-index: 0; }

/* Text tone follows the background (automatic or admin-chosen). */
.lb-tone-dark { color: var(--text-on-dark); }
.lb-tone-light { color: var(--text); }
.lb-col.lb-tone-light .eyebrow { color: var(--accent); }
.lb-col.lb-tone-light .section-intro,
.lb-col.lb-tone-light .lead { color: var(--text-soft); }
.lb-col.lb-tone-light .c-stat__label { color: var(--text-mute); }
/* Eyebrow rule line is an SVG that can't inherit colour; on dark layout
 * backgrounds draw it as a mask so it follows the text. Photos get a
 * lighter gold so the small label stays readable. */
.lb-tone-dark .eyebrow::before {
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 2'%3E%3Cpath d='M0 1.2 Q 7 0.2 14 1 T 28 1' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 2'%3E%3Cpath d='M0 1.2 Q 7 0.2 14 1 T 28 1' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lb-col.lb-tone-light .eyebrow::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 2'%3E%3Cpath d='M0 1.2 Q 7 0.2 14 1 T 28 1' fill='none' stroke='currentColor' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	-webkit-mask: none;
	mask: none;
}
.lb-bg--image.lb-tone-dark .eyebrow { color: var(--color-gold-light); }
.lb-tone-light { --lb-field-bg: var(--color-cream); --lb-field-line: var(--border); --lb-field-ink: var(--text); --lb-field-mute: var(--text-mute); }
.lb-tone-dark { --lb-field-bg: rgba(246, 241, 231, 0.08); --lb-field-line: rgba(246, 241, 231, 0.22); --lb-field-ink: var(--text-on-dark); --lb-field-mute: var(--text-on-dark-mute); }

/* Section backgrounds — theme styles, flat theme colours, admin colours. */
.lb-bg--wash-clay { background: radial-gradient(60% 45% at 85% 12%, rgba(163, 74, 30, 0.08), transparent 70%), radial-gradient(50% 40% at 10% 90%, rgba(168, 132, 50, 0.07), transparent 70%), var(--color-paper); }
.lb-bg--wash-warm { background: radial-gradient(55% 45% at 12% 15%, rgba(156, 107, 79, 0.1), transparent 70%), radial-gradient(45% 40% at 88% 85%, rgba(163, 74, 30, 0.06), transparent 70%), var(--color-paper); }
.lb-bg--fade { background: linear-gradient(180deg, var(--color-parchment), var(--color-linen)); }
.lb-bg--dots { background: radial-gradient(rgba(74, 56, 42, 0.12) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--color-linen); }
.lb-bg--dusk { background: linear-gradient(135deg, var(--color-walnut), var(--color-plum)); }
.lb-bg--ember { background: linear-gradient(135deg, var(--color-clay), var(--color-moss)); }
.lb-bg--night { background: radial-gradient(70% 60% at 80% 10%, rgba(182, 141, 88, 0.22), transparent 70%), var(--color-chocolate); }
.lb-bg--paper, .lb-col--paper { background: var(--color-paper); }
.lb-bg--cream, .lb-col--cream { background: var(--color-cream); }
.lb-bg--linen, .lb-col--linen { background: var(--color-linen); }
.lb-bg--vellum, .lb-col--vellum { background: var(--color-vellum); }
.lb-bg--blush, .lb-col--blush { background: var(--color-clay-tint); }
.lb-bg--mist, .lb-col--mist { background: var(--color-sage-tint); }
.lb-bg--lavender, .lb-col--lavender { background: var(--color-lavender); }
.lb-bg--peach, .lb-col--peach { background: var(--color-peach); }
.lb-bg--clay, .lb-col--clay { background: var(--color-clay); }
.lb-bg--plum, .lb-col--plum { background: var(--color-plum); }
.lb-bg--walnut, .lb-col--walnut { background: var(--color-walnut); }
.lb-bg--cocoa, .lb-col--cocoa { background: var(--color-moss); }
.lb-bg--chocolate, .lb-col--chocolate { background: var(--color-chocolate); }
.lb-bg--color { background: var(--lb-bg); }
.lb-bg--gradient { background: linear-gradient(180deg, var(--lb-bg), var(--lb-bg2)); }
.lb-bg--gradient.lb-angle-90 { background: linear-gradient(90deg, var(--lb-bg), var(--lb-bg2)); }
.lb-bg--gradient.lb-angle-135 { background: linear-gradient(135deg, var(--lb-bg), var(--lb-bg2)); }
.lb-bg--gradient.lb-angle-radial { background: radial-gradient(120% 90% at 50% 0%, var(--lb-bg), var(--lb-bg2) 75%); }
.lb-bg--image { background: var(--color-chocolate); }
.lb-bg--image::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--lb-overlay); pointer-events: none; }
.lb-section__img { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lb-focus-top .lb-section__img { object-position: top; }
.lb-focus-bottom .lb-section__img { object-position: bottom; }
.lb-focus-left .lb-section__img { object-position: left; }
.lb-focus-right .lb-section__img { object-position: right; }

/* Rows: a grid per row, column split from the layout class. */
.lb-row {
	display: grid;
	grid-template-columns: var(--lb-cols, minmax(0, 1fr));
	gap: var(--lb-gap, var(--lb-l));
	align-items: start;
}
:where(.lb-row + .lb-row) { margin-block-start: var(--lb-l); }
.lb-row--1-1 { --lb-cols: repeat(2, minmax(0, 1fr)); }
.lb-row--1-2 { --lb-cols: minmax(0, 1fr) minmax(0, 2fr); }
.lb-row--2-1 { --lb-cols: minmax(0, 2fr) minmax(0, 1fr); }
.lb-row--1-3 { --lb-cols: minmax(0, 1fr) minmax(0, 3fr); }
.lb-row--3-1 { --lb-cols: minmax(0, 3fr) minmax(0, 1fr); }
.lb-row--1-1-1 { --lb-cols: repeat(3, minmax(0, 1fr)); }
.lb-row--1-2-1 { --lb-cols: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.lb-row--1-1-1-1 { --lb-cols: repeat(4, minmax(0, 1fr)); }
.lb-gap-none { --lb-gap: 0; }
.lb-gap-xs { --lb-gap: var(--lb-xs); }
.lb-gap-s { --lb-gap: var(--lb-s); }
.lb-gap-m { --lb-gap: var(--lb-m); }
.lb-gap-l { --lb-gap: var(--lb-l); }
.lb-gap-xl { --lb-gap: var(--lb-xl); }
.lb-valign-center { align-items: center; }
.lb-valign-bottom { align-items: end; }
.lb-valign-stretch { align-items: stretch; }
@media (max-width: 1024px) {
	.lb-cols-3:not(.lb-stack-never),
	.lb-cols-4:not(.lb-stack-never) { --lb-cols: repeat(2, minmax(0, 1fr)); }
	.lb-cols-3:not(.lb-stack-never) > .lb-col:last-child { grid-column: 1 / -1; }
	.lb-row.lb-stack-tablet { --lb-cols: minmax(0, 1fr); }
	.lb-stack-tablet.lb-reverse > .lb-col:nth-child(1) { order: 4; }
	.lb-stack-tablet.lb-reverse > .lb-col:nth-child(2) { order: 3; }
	.lb-stack-tablet.lb-reverse > .lb-col:nth-child(3) { order: 2; }
}
@media (max-width: 640px) {
	.lb-row:not(.lb-stack-never) { --lb-cols: minmax(0, 1fr); }
	.lb-row:not(.lb-stack-never) > .lb-col:last-child { grid-column: auto; }
	.lb-reverse:not(.lb-stack-never) > .lb-col:nth-child(1) { order: 4; }
	.lb-reverse:not(.lb-stack-never) > .lb-col:nth-child(2) { order: 3; }
	.lb-reverse:not(.lb-stack-never) > .lb-col:nth-child(3) { order: 2; }
}

/* Columns: flex stack of items + optional card styling. */
.lb-col { display: flex; flex-direction: column; min-inline-size: 0; }
.lb-cv-center { justify-content: center; }
.lb-cv-bottom { justify-content: flex-end; }
:where(.lb-col--filled) { padding: var(--lb-m); }
.lb-col--custom { background: var(--lb-col-bg); }
.lb-pad-none { padding: 0; }
.lb-pad-xs { padding: var(--lb-xs); }
.lb-pad-s { padding: var(--lb-s); }
.lb-pad-m { padding: var(--lb-m); }
.lb-pad-l { padding: var(--lb-l); }
.lb-pad-xl { padding: var(--lb-xl); }
.lb-radius-soft { border-radius: var(--radius-md); }
.lb-radius-round { border-radius: var(--radius-xl); }
.lb-radius-card-a { border-radius: var(--radius-card-a); }
.lb-radius-card-b { border-radius: var(--radius-card-b); }
.lb-radius-card-c { border-radius: var(--radius-card-c); }
.lb-shadow-soft { box-shadow: var(--shadow-md); }
.lb-shadow-lift { box-shadow: var(--shadow-lg); }
.lb-border-line { border: 1px solid var(--lb-field-line, var(--border)); }
.lb-border-dashed { border: 1.5px dashed var(--lb-field-line, var(--border)); }

/* Alignment: inherited custom properties, so the nearest choice wins. */
.lb-align-left { text-align: left; --lb-justify: flex-start; --lb-mis: 0; --lb-mie: auto; }
.lb-align-center { text-align: center; --lb-justify: center; --lb-mis: auto; --lb-mie: auto; }
.lb-align-right { text-align: right; --lb-justify: flex-end; --lb-mis: auto; --lb-mie: 0; }

/* Items: default rhythm, admin space above/below, show on. */
:where(.lb-col > .lb-item + .lb-item) { margin-block-start: var(--space-md); }
:where(.lb-col > .lb-item[class*="lb-mb-"] + .lb-item:not([class*="lb-mt-"])) { margin-block-start: 0; }
.lb-mt-none { margin-block-start: 0; }
.lb-mt-xs { margin-block-start: var(--lb-xs); }
.lb-mt-s { margin-block-start: var(--lb-s); }
.lb-mt-m { margin-block-start: var(--lb-m); }
.lb-mt-l { margin-block-start: var(--lb-l); }
.lb-mt-xl { margin-block-start: var(--lb-xl); }
.lb-mb-none { margin-block-end: 0; }
.lb-mb-xs { margin-block-end: var(--lb-xs); }
.lb-mb-s { margin-block-end: var(--lb-s); }
.lb-mb-m { margin-block-end: var(--lb-m); }
.lb-mb-l { margin-block-end: var(--lb-l); }
.lb-mb-xl { margin-block-end: var(--lb-xl); }
@media (max-width: 640px) { .lb-show-desktop { display: none; } }
@media (min-width: 641px) { .lb-show-mobile { display: none; } }
.lb-item p { margin-inline: var(--lb-mis, 0) var(--lb-mie, auto); }

/* Heading */
.lb-item--heading .eyebrow { margin-block-end: var(--space-sm); }
.lb-h--xl { font-size: var(--text-4xl); }
.lb-h--l { font-size: var(--text-3xl); }
.lb-h--m { font-size: var(--text-2xl); }
.lb-h--s { font-size: var(--text-xl); }
.lb-item--heading h4 { font-family: var(--font-display); font-weight: 480; }

/* Text */
.lb-text > * + * { margin-block-start: var(--space-sm); }
.lb-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.lb-text ul, .lb-text ol { padding-inline-start: 1.3em; }
.lb-text ul { list-style: disc; }
.lb-text ol { list-style: decimal; }
.lb-text blockquote { padding-inline-start: var(--space-sm); border-inline-start: 2px solid var(--accent); font-style: italic; }
.lb-text--lead { font-size: var(--text-lg); line-height: var(--leading-snug); }
.lb-text--small { font-size: var(--text-sm); color: color-mix(in srgb, currentColor 78%, transparent); }

/* Image */
.lb-figure { position: relative; margin-inline: var(--lb-mis, 0) var(--lb-mie, auto); }
.lb-w-l { max-inline-size: 80%; }
.lb-w-m { max-inline-size: 60%; }
.lb-w-s { max-inline-size: 40%; }
.lb-img { inline-size: 100%; block-size: auto; }
.lb-ratio-1-1 .lb-img { aspect-ratio: 1; object-fit: cover; }
.lb-ratio-4-3 .lb-img { aspect-ratio: 4 / 3; object-fit: cover; }
.lb-ratio-3-4 .lb-img { aspect-ratio: 3 / 4; object-fit: cover; }
.lb-ratio-16-9 .lb-img { aspect-ratio: 16 / 9; object-fit: cover; }
.lb-figure--rounded .lb-img { border-radius: var(--radius-lg); }
.lb-figure--card .lb-img { border-radius: var(--radius-card-a); }
.lb-figure--circle .lb-img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.lb-figure--polaroid,
.lb-figure--washi {
	padding: 4.5% 4.5% 0;
	background: #FFFDF6;
	box-shadow: 0 10px 28px rgba(61, 46, 34, 0.16), 0 2px 6px rgba(61, 46, 34, 0.1);
	rotate: -1.2deg;
}
.lb-col:nth-child(even) .lb-figure--polaroid,
.lb-col:nth-child(even) .lb-figure--washi { rotate: 1.4deg; }
.lb-figure--polaroid:not(:has(figcaption)),
.lb-figure--washi:not(:has(figcaption)) { padding-block-end: 9%; }
.lb-figure figcaption { margin-block-start: var(--space-xs); font-size: var(--text-sm); color: color-mix(in srgb, currentColor 72%, transparent); }
.lb-figure .lb-figure__hand {
	position: static;
	margin: 0;
	padding-block: 0.45em 0.7em;
	font-family: var(--font-hand);
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
	text-align: center;
	color: var(--color-moss);
}
.lb-figure__link { display: block; }

/* Buttons */
.lb-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: var(--lb-justify, flex-start); }

/* List */
.lb-list { display: grid; gap: var(--space-xs); inline-size: fit-content; max-inline-size: 100%; margin-inline: var(--lb-mis, 0) var(--lb-mie, auto); padding: 0; list-style: none; text-align: left; }
.lb-list--dots { list-style: disc; padding-inline-start: 1.2em; }
.lb-list--numbers { list-style: decimal; padding-inline-start: 1.4em; }
.lb-list--ticks li { display: flex; align-items: baseline; gap: 0.6em; }
.lb-list__tick { flex: none; inline-size: 1em; block-size: 1em; color: var(--accent); translate: 0 0.12em; }
.lb-tone-dark .lb-list__tick { color: var(--color-amber); }

/* Video (library video plays inline; external links are a play card) */
.lb-video video { inline-size: 100%; border-radius: var(--radius-md); background: #000; }
.lb-video figcaption { margin-block-start: var(--space-xs); font-size: var(--text-sm); }
.lb-video--link {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-walnut), var(--color-chocolate));
	color: var(--text-on-dark);
}
.lb-video--link img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--dur-base) var(--ease-out); }
.lb-video--link:hover img { opacity: 1; }
.lb-video__play { position: relative; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-clay); }
.lb-video__play::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0; block-size: 0; border-block: 0.6rem solid transparent; border-inline-start: 1rem solid #fff; translate: 0.15rem 0; }
.lb-video__label { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 0.6rem 0.9rem; background: linear-gradient(transparent, rgba(43, 29, 22, 0.75)); font-size: var(--text-sm); text-align: left; }

/* Icon card */
.lb-feature__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: var(--space-sm);
	border-radius: var(--radius-organic);
	background: var(--color-clay-tint);
	color: var(--accent);
}
.lb-feature__icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.lb-tone-dark .lb-feature__icon { background: rgba(246, 241, 231, 0.1); color: var(--color-amber); }
.lb-feature__title { font-size: var(--text-xl); margin-block-end: var(--space-2xs); }
.lb-feature p { color: color-mix(in srgb, currentColor 80%, transparent); }
.lb-feature--side { display: flex; gap: var(--space-md); align-items: flex-start; text-align: left; }
.lb-feature--side .lb-feature__icon { flex: none; margin: 0; }

/* Quote */
.lb-quote__mark { inline-size: 2rem; block-size: 2rem; color: var(--accent); margin-inline: var(--lb-mis, 0) var(--lb-mie, auto); margin-block-end: var(--space-xs); }
.lb-tone-dark .lb-quote__mark { color: var(--color-amber); }
.lb-quote blockquote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); line-height: 1.3; max-inline-size: 36ch; }
.lb-quote figcaption { margin-block-start: var(--space-sm); font-size: var(--text-sm); }
.lb-quote figcaption span { display: block; color: color-mix(in srgb, currentColor 70%, transparent); }

/* Newsletter + embeds */
.lb-item .c-newsletter { background: var(--lb-field-bg); border-color: var(--lb-field-line); margin-inline: var(--lb-mis, 0) var(--lb-mie, auto); }
.lb-item .c-newsletter input { color: var(--lb-field-ink); }
.lb-item .c-newsletter input::placeholder { color: var(--lb-field-mute); }
.lb-item .storm-newsletter .tide-form__msg { color: inherit; }
.lb-embed > :first-child, .lb-pattern > :first-child { margin-block-start: 0; }

/* Spacer + divider */
.lb-spacer--xs { block-size: var(--lb-xs); }
.lb-spacer--s { block-size: var(--lb-s); }
.lb-spacer--m { block-size: var(--lb-m); }
.lb-spacer--l { block-size: var(--lb-l); }
.lb-spacer--xl { block-size: var(--lb-xl); }
.lb-divider { border: 0; border-block-start: 1px solid currentColor; opacity: 0.22; margin-inline: var(--lb-mis, 0) var(--lb-mie, auto); }
.lb-divider--dashed { border-block-start-style: dashed; opacity: 0.35; }
.lb-divider--short { inline-size: 6rem; }
.lb-divider--bloom, .lb-divider--swirl { opacity: 1; border: 0; color: var(--accent); display: flex; justify-content: var(--lb-justify, center); }
.lb-divider--bloom .art { inline-size: 3rem; block-size: 3rem; }
.lb-divider--swirl .art { inline-size: 10rem; block-size: auto; aspect-ratio: 212 / 56; }
.lb-tone-dark .lb-divider--bloom, .lb-tone-dark .lb-divider--swirl { color: var(--color-amber); }