/* ==========================================================================
   Mila Dreams by Honey Butter: components
   Class-only BEM. Blocks in page order: site, site-header, site-nav,
   menu-toggle, site-main, hero, content, landing, about, round-photo, gallery,
   offerings, offering, duo, connection, connection-quote, travel-dates,
   contact-form, thank-you, site-footer, mobile.

   Page content is WordPress blocks; the BEM class names are set in each
   block's "Additional CSS class(es)" field. Element selectors (p, a, img,
   table cells) only appear inside a block class, for the markup the block
   editor generates.

   Breakpoints (rem here = browser default 16px):
   48rem = 768px, 62rem = 992px, 47.9375rem = 767px.
   ========================================================================== */


/* site (body)
   ========================================================================== */

.site {
	font-size: var(--text-base);
	line-height: var(--leading-body);
	background: var(--color-burgundy) var(--paper-texture) repeat 0 0 / var(--paper-size);
	font-family: var(--font-body);
	transition: background-color 0.8s ease;
}

/* While the contact form is sent off (js/form-portal.js) everything but the form
   fades away, footer included; behind it all, the page turns the content's pink. */
.site--sending {
	background-color: var(--color-clay);
}

.site__container {
	/* Header geometry, shared by the header and the content that tucks under it. */
	--header-height: 17.5rem;
	/* From img/header-mask.svg (viewBox 4265.82 x 851): the curve's highest point,
	   at the centre, sits 371.61 units above the sides. The mask spans the full width,
	   so that rise is always 371.61 / 4265.82 = 8.7113% of the header's width.
	   (Used in padding, where % is measured against the width.) */
	--curve-rise: 8.7113%;
	/* how far the hero photo slides up under the curve's peak */
	--hero-tuck: 1.875rem;
	margin: 0 auto;
	position: relative;
}

.site--landing .site__container {
	width: 100%;
	min-height: 100%;
	position: absolute;
	max-width: 100%;
}

/* ScrollSmoother pins .smooth-wrapper to the viewport. The offsets match the
   WordPress admin bar, which WordPress draws in px, so these stay in px. */
.admin-bar .smooth-wrapper[style] {
	top: 32px !important;
	height: calc(100% - 32px) !important;
}

@media screen and (max-width: 782px) {
	.admin-bar .smooth-wrapper[style] {
		top: 46px !important;
		height: calc(100% - 46px) !important;
	}
}


/* header curve intro
   On load the header's curve starts stretched to twice its width (flatter, its ends
   off screen) and eases back to its real width. --curve-scale widens the curve SVG
   only (it stretches: preserveAspectRatio="none" in header-mask.svg); its height stays.
   ========================================================================== */

@property --curve-scale {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.site-header {
		animation: curve-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@keyframes curve-in {
	from { --curve-scale: 2; }
}

/* After a page transition the curve waits under the curtain until it lifts. */
.page-arriving .site-header {
	animation-play-state: paused;
}


/* page-transition
   A curtain in the header's colour, cut to the header curve, drops over the page
   when a link is followed, her logo gliding to the centre; on the next page its
   stars and the sunburst medallion fade in while the page loads, then it lifts.
   Driven by js/page-transition.js: .is-active while it's in use; .page-arriving (on
   <html>, from mila_js_flag in functions.php) holds it over a page that's just loaded.
   Everything that moves is moved with transform/opacity only (its own layer, not
   repainted), so it stays smooth: the curtain slides, the curve strip stretches,
   each ring of the medallion turns as a whole.
   ========================================================================== */

.page-transition {
	container-type: inline-size; /* cqw for the curve, as in the header */
	position: fixed;
	inset: 0;
	z-index: 100000; /* over the admin bar and the phone menu */
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
}

.page-arriving .page-transition,
.page-transition.is-active {
	visibility: visible;
	pointer-events: auto; /* nothing underneath can be clicked mid-transition */
}

/* Out of sight above the screen until it drops. It is taller than the screen by
   the curve's rise (8.7113cqw), so even the curve's highest point, in the middle,
   is below the bottom edge when it covers. */
.page-transition__curtain {
	--paper-shade: color-mix(in oklab, var(--color-header-bg), black 15%);
	--curve-h: 19.9493cqw; /* header-mask.svg at full width */
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% + 8.7113cqw + 0.125rem);
	transform: translateY(-100%);
	will-change: transform;
}

.page-arriving .page-transition__curtain {
	transform: none;
}

/* The body of the curtain, down to the curve's highest point (the middle), so on
   its own it covers the whole screen: nothing shows through on a page that's just
   loaded, even before the curve strip's mask image is ready. It sits over the top
   of the curve strip; its glow fades to the plain shade before its bottom edge, so
   it meets the strip, which is the plain shade, without a line. */
.page-transition__fill {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% - 8.7113cqw);
	overflow: hidden;
	background:
		var(--paper-texture) repeat 0 0 / var(--paper-size),
		radial-gradient(ellipse 70% 55% at 50% 42%, var(--color-header-bg) 20%, var(--paper-shade) 100%);
	background-blend-mode: multiply;
}

/* The curve along the bottom edge. js/page-transition.js stretches it (scaleX) as
   the curtain drops, as the header's curve does on load. */
.page-transition__edge {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--curve-h);
	background:
		var(--paper-texture) repeat 0 0 / var(--paper-size),
		var(--paper-shade);
	background-blend-mode: multiply;
	-webkit-mask: url(../img/header-mask.svg) no-repeat 0 0 / 100% 100%;
	mask: url(../img/header-mask.svg) no-repeat 0 0 / 100% 100%;
	will-change: transform;
}

/* The curtain's stars and glows. They fade in on the page that's arriving
   (js/page-transition.js), so they start hidden there. */
.page-transition__sky,
.page-transition__twinkles {
	position: absolute;
	inset: 0;
}

.page-arriving .page-transition__sky,
.page-arriving .page-transition__emblem,
.page-arriving .page-transition__icon {
	opacity: 0;
}

/* Stars and glows only move while the curtain is in use. */
html:not(.page-arriving) .page-transition:not(.is-active) * {
	animation-play-state: paused;
}

/* The sun's box, in the middle of the screen. --u: screen px per unit of the sun
   artwork (img/loader-sun.svg; the sun is 544 units across). */
.page-transition__center {
	--sun-size: min(42vh, 30vw);
	--u: calc(var(--sun-size) / 544);
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--sun-size);
	aspect-ratio: 1;
	translate: -50% -50%;
	display: grid;
	place-items: center;
}

@media (max-aspect-ratio: 1/1) {
	.page-transition__center {
		--sun-size: min(70vw, 34vh);
	}
}

.page-transition__emblem {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	will-change: transform, opacity;
}

/* Each piece is its own <svg>, so it turns as a whole. */
.page-transition__sun {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--color-star);
}

/* The flower, the eye, the crystal and the feather around the sun: centred --x,
   --y units from the sun's centre, --w units wide. Where they sit in the artwork
   on landscape screens; on portrait ones, two above the sun and two below. */
.page-transition__icon {
	position: absolute;
	left: calc(50% + var(--x) * var(--u));
	top: calc(50% + var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: auto;
	translate: -50% -50%;
	overflow: visible;
	fill: var(--color-star);
	will-change: transform, opacity;
}

.page-transition__icon--flower  { --x: -488; --y: -232; --w: 211; }
.page-transition__icon--eye     { --x: 467;  --y: -266; --w: 259; }
.page-transition__icon--crystal { --x: -544; --y: 119;  --w: 147; }
.page-transition__icon--feather { --x: 469;  --y: 179;  --w: 168; }

@media (max-aspect-ratio: 1/1) {
	.page-transition__icon--flower  { --x: -150; --y: -430; }
	.page-transition__icon--eye     { --x: 165;  --y: -430; }
	.page-transition__icon--crystal { --x: -150; --y: 440; }
	.page-transition__icon--feather { --x: 150;  --y: 440; }
}

/* The sun and the crystal turn; the feather sways, the flower a touch; the eye
   stays still. */
@media (prefers-reduced-motion: no-preference) {
	.page-arriving .page-transition__sun,
	.page-transition.is-active .page-transition__sun {
		animation: art-spin 45s linear infinite;
		will-change: rotate;
	}

	.page-arriving .page-transition__icon--crystal,
	.page-transition.is-active .page-transition__icon--crystal {
		animation: art-spin 14s linear infinite;
	}

	.page-arriving .page-transition__icon--feather,
	.page-transition.is-active .page-transition__icon--feather {
		--sway: 9deg;
		animation: transition-sway 3.2s ease-in-out infinite alternate;
	}

	.page-arriving .page-transition__icon--flower,
	.page-transition.is-active .page-transition__icon--flower {
		--sway: 4deg;
		animation: transition-sway 5s ease-in-out infinite alternate;
	}
}

@keyframes transition-sway {
	from { rotate: calc(-1 * var(--sway)); }
	to   { rotate: var(--sway); }
}

/* her logo, inside the sun's circle */
.page-transition__logo {
	position: relative;
	width: 40%;
	aspect-ratio: 4.379 / 3.109;
	color: var(--color-header-ink);
	will-change: transform;
}

.page-transition__logo svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.rates-table {
	--stars-h: calc(100% * 900 / 6500); /* rates-stars.svg's height for the table's width */
	position: relative;
	overflow: visible; /* the table block scrolls sideways by default, which would cut the stars off */
	width: 100%;
	/* room for the stars below (a % margin is of the width, like the stars); less above,
	   so the copy before the table sits a little way into the stars' thin outer edge */
	margin: calc(var(--stars-h) * 0.35) 0 calc(var(--stars-h) * 0.85);
	/* border-block: 1px solid currentColor; */
}

/* the copy just before the rates table (The Mystical Journey): a centred heading
   over a shorter measure */
.wp-block-group:has(+ .wp-block-group .rates-table) > :is(h1, h2, h3, h4) {
	text-align: center;
}

.wp-block-group:has(+ .wp-block-group .rates-table) > p {
	max-width: 60rem;
}

/* stars from the cards' artwork spilling out all round, thinning as they go: above
   and below (reaching past the ends, so the corners fade too), and down each side.
   Both drawn to the cards' scale: the table is 6500 units wide, the sides reach 520. */
.rates-table::before,
.rates-table::after {
	content: "";
	position: absolute;
	left: -8%;
	width: 116%;
	aspect-ratio: 7540 / 900;
	background: url(../img/rates-stars.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}

.rates-table table::before,
.rates-table table::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -8%;
	width: 8%;
	background: url(../img/rates-stars-side.svg) repeat-y 0 0 / 100% auto;
	translate: 10% 0; /* tucked into the cards a little, like the stars above and below */
	pointer-events: none;
}

.rates-table table::after {
	left: auto;
	right: -8%;
	translate: -10% 0;
	scale: -1 1;
	background-position: 0 45%; /* so the two sides don't line up */
}

.rates-table::before {
	bottom: 100%;
	translate: 0 10%; /* tucked into the cards a little, so the two scatters meet */
}

.rates-table::after {
	top: 100%;
	translate: 0 -10%;
	scale: -1 -1; /* upside down, and the other way round so it isn't a mirror of the top */
}

.rates-table tbody {
	display: flex;
	gap: 0;
	flex-direction: center;
	width: 100%;
}

.rates-table tr {
	flex: 1 1 25%;
	display: flex;
	padding-block: 8rem 8rem;
	flex-direction: column;
}

/* the arch at the top, and the same arch upside down at the bottom, closing the
   frame; each cut at halfway so one's long sides don't run past the other's curve */
.rates-table tr {
	position: relative;
}

.rates-table tr::before,
.rates-table tr::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(../img/rates-border.svg) no-repeat 50% 0 / 95% auto;
	clip-path: inset(0 0 calc(50% - 1px) 0);
	pointer-events: none;
}

.rates-table tr::after {
	scale: 1 -1;
}

.rates-table tr th,
.rates-table tr td {
	line-height: 1.1;
	border: 0 !important;
	padding: 1rem 0 0 !important;
	font-size: 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* TRYING OUT: a photo inside each card's frame, under its artwork, filling the
   inner pill-shaped line (rates-border.svg, 1068.8 wide, at 95% of the card's width:
   the line's inside edge is 5.8% of the card's width in from each side, and 15.8%
   down from the top and up from the bottom). */
.rates-table tr {
	container-type: inline-size;
	isolation: isolate; /* the photo and the artwork layer up inside the card, over the background charms */
	--rate-i: 0; /* which card: its slice of the photo */
	--photo-size: 500cqw auto;
	--photo-x: calc(-1 * (var(--rate-i) * 100cqw + 5.8cqw));
	--photo-y: center;
}

.rates-table tr:nth-child(2) { --rate-i: 1; }
.rates-table tr:nth-child(3) { --rate-i: 2; }
.rates-table tr:nth-child(4) { --rate-i: 3; }
.rates-table tr:nth-child(5) { --rate-i: 4; }

.rates-table tr th::before {
	content: "";
	position: absolute;
	inset: 15.8cqw 5.8cqw;
	z-index: -2; /* under the artwork */
	border-radius: 100cqw;
	background:
		linear-gradient(rgb(36 14 24 / 0.35), rgb(36 14 24 / 0.35)),
		/* one photo across all five cards: as wide as the table (five cards, each 100cqw),
		   each card showing its own slice, so together they line up as one picture
		   (background-attachment: fixed can't do it here: the smooth scrolling moves the
		   page with a transform, and "fixed" then acts like a normal background) */
		url(../../../uploads/2015/04/spring-2015-04.jpg) var(--photo-x) var(--photo-y) / var(--photo-size) no-repeat,
		var(--color-clay);
	/* multiplied with the page's pink here rather than with mix-blend-mode, which
	   can't see the page while the card fades in and would snap in at the end */
	background-blend-mode: normal, multiply;
	pointer-events: none;
}

.rates-table tr th::after,
.rates-table tr td::after {
	content: "";
	width: 1px;
	height: 1.5rem;
	display: inline-block;
	background: var(--color-header-ink);
}

.rates-table tr td:nth-child(3){
	order: -1;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(1.25rem, 15cqw, 2.75rem); /* with the card's width (the row is a container) */
}


/* the "Book Me" link in each card: an outlined button in the frame's pink */
.rates-table tr td a {
	display: inline-block;
	padding: 0.55em 1.4em 0.45em;
	border: 1px solid var(--color-text);
	border-radius: 999px; /* a pill */
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: clamp(0.9rem, 7.5cqw, 1.25rem);
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* no divider under the button: it's the last thing in the card */
.rates-table tr td:last-child::after {
	display: none;
}

.rates-table tr td a:hover,
.rates-table tr td a:focus-visible {
	background: color-mix(in oklab, var(--color-text) 18%, transparent);
	text-decoration: none;
}

/* site-header
   ========================================================================== */

.site-header {
	/* --header-height and --curve-rise are set on .site__container. */
	/* Nav type size; the link spacing, the logo gap and the logo scale with it,
	   so the nav stays on one line down to the mobile breakpoint. */
	--nav-size: clamp(1.4875rem, 3.06vw, 2.55rem);
	--logo-gap: calc(var(--nav-size) * 6.6); /* space between the two halves of the nav */
	width: 100%;
	height: var(--header-height);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 998;
}

/* Shadow layer. drop-shadow traces whatever its child paints (the masked curve),
   which box-shadow can't do on a masked element. The mask and filter live here,
   not on .site-header, so they don't clip or re-anchor the fixed mobile menu.
   drop-shadow has no spread value, so offsets/blur approximate the old box-shadow. */
.site-header__backdrop {
	container-type: inline-size; /* lets the mask below use cqw (= 1% of the header width) */
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	filter: var(--shadow-curve);
}

/* Shape layer: the paper background cut to the curve */
.site-header__backdrop::before {
	content: "";
	position: absolute;
	inset: 0;

	--paper-shade-amount: 15%;
	--paper-shade: color-mix(in oklab, var(--color-header-bg), black var(--paper-shade-amount));
	--paper-glow-y: calc((100% - 8.7113cqw) / 2);
	background:
		var(--paper-texture) repeat 0 0 / var(--paper-size),
		radial-gradient(ellipse 60% 140% at 50% var(--paper-glow-y), var(--color-header-bg) 20%, var(--paper-shade) 100%);
	background-blend-mode: multiply;
}

/* A few faint stars in the header's top corners (placed by js/starfield.js), over
   the paper and under the nav; cut to the curve by the mask below. */
.site-header__stars {
	position: absolute;
	inset: 0;
}

/* The header curve, shared by the paper backdrop and the header stars so the stars
   are cut off exactly where the paper ends. Two layers: the curve SVG at the bottom
   (full width, so it is 19.9493% of the width tall), plus a solid block that fills
   whatever is left above it when the header is taller than the SVG (narrower
   screens). Needs a query container as wide as the header for cqw. */
.site-header__backdrop::before,
.site-header__stars {
	--mask-svg: url(../img/header-mask.svg);
	--mask-fill: linear-gradient(#000 0 0);
	--mask-fill-height: max(0rem, calc(100% - 19.9493cqw + 0.125rem));
	-webkit-mask:
		var(--mask-svg) no-repeat center bottom / calc(100% * var(--curve-scale)) 19.9493cqw,
		var(--mask-fill) no-repeat center top / 100% var(--mask-fill-height);
	mask:
		var(--mask-svg) no-repeat center bottom / calc(100% * var(--curve-scale)) 19.9493cqw,
		var(--mask-fill) no-repeat center top / 100% var(--mask-fill-height);
}

.site--landing .site-header {
	display: none;
}

/* The logo and nav are centred in the band between the top of the page and the
   curve's highest point. padding-bottom in % is measured against the header's
   width, so it removes exactly the curve's rise at every screen size. */
.site-header__inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	padding-bottom: var(--curve-rise);
	display: grid;
	place-items: center;
}



/* logo and nav share the one grid cell, both centred */
.site-header__logo,
.site-nav {
	grid-area: 1 / 1;
}

.site-header__logo {
	position: relative;
	z-index: 1; /* above the nav's box so the logo link stays clickable */
	aspect-ratio: 4.379 / 3.109;
	height: calc(var(--nav-size) * 2.5); /* 5.1rem at full size */
}

.site-header__logo svg {
	display: block;
	fill: var(--color-header-ink);
}

.site-header__logo a {
	display: block;
}

.intro {
	text-wrap: balance;
}

.intro strong {
	font-family: var(--font-display);
	font-size: 1.2em;
	text-transform: uppercase;
}


/* site-nav
   ========================================================================== */

/* Three columns: left links | logo gap | right links. The outer columns are always
   equal, so the gap sits exactly at the centre, under the logo. */
.site-nav {
	position: relative;
	justify-self: stretch;
	display: grid;
	grid-template-columns: 1fr var(--logo-gap) 1fr;
	align-items: center;
}

.site-nav__list--left {
	grid-column: 1;
	justify-self: end;
}

.site-nav__list--right {
	grid-column: 3;
	justify-self: start;
}

.site-nav__list {
	text-align: center;
	margin: 0;
}

.site-nav__list {
	white-space: nowrap;
}

.site-nav__item {
	margin: 0 calc(var(--nav-size) * 0.3125); /* 0.796875rem at full size */
	letter-spacing: var(--tracking);
	display: inline;
	font-size: var(--nav-size);
	font-family: var(--font-display);
	text-transform: uppercase;
}

/* no underline on hover */
.site-nav__link,
.site-nav__link:hover,
.site-nav__link:focus {
	color: var(--color-header-ink);
	text-decoration: none;
}


/* the page you're on: a little star under its link, slowly turning */
.site-nav__item--current {
	position: relative;
}

.site-nav__item--current::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 0.6em;
	aspect-ratio: 1;
	translate: -50% 0;
	background-color: var(--color-header-ink);
	mask: url(../img/eight-point-star.svg) no-repeat center / contain;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.site-nav__item--current::after {
		animation: art-spin 24s linear infinite;
	}
}


/* menu-toggle (shown on mobile)
   ========================================================================== */

.menu-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: inherit;
	color: inherit;
	text-align: inherit;
}

.menu-toggle {
	display: none;
}

.menu-toggle__bar {
	display: block;
}


/* site-main
   ========================================================================== */

.site-main {
	/* The hero starts just above the curve's peak, so its top edge is always hidden
	   under the header at every screen width. */
	   position: relative;
	padding: calc(var(--header-height) - var(--curve-rise) - var(--hero-tuck)) 0 var(--space-lg);
	color: var(--color-text);
	font-family: var(--font-body);
	background: var(--color-clay) var(--paper-texture) repeat 0 0 / var(--paper-size);
	background-blend-mode: multiply;
}



.site-main {
	padding-bottom: 6rem;
	overflow-x: clip; /* decorative ornaments never cause sideways scrolling */
}

/* the "book-me" ring closes the page itself, sitting on the footer */
.site-main:has(.book-me) {
	padding-bottom: 0;
}

/* The landing hero sits at the top of the page, with the clay paper (from
   .site-main above) below its curve, behind the badges. */
.site--landing .site-main {
	padding-top: 0;
	padding-bottom: 0;
}

/* default spacing for paragraphs written in the editor */
:where(.site-main) p {
	margin-bottom: var(--space-lg);
}


/* starfield (content area background, every page but home)
   Three depth layers built by js/starfield.js; each drifts at its own speed as the
   page scrolls. Each layer's stars are a repeating SVG tile used as a mask, so they
   take --color-star from the palette. The tiles are different sizes so their repeats
   don't line up. A few separate stars twinkle on top.
   ========================================================================== */

.site-main {
	isolation: isolate; /* lets the star field sit behind the content but above the background */
}

.starfield {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.starfield__layer {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.starfield__stars {
	position: absolute;
	inset: 0;
	background-color: var(--color-star);
	mask-repeat: repeat;
	mask-position: 0 0;
}

.starfield__stars--far {
	mask-image: url(../img/starfield-far.svg);
	mask-size: 600px 600px;
}

.starfield__stars--mid {
	mask-image: url(../img/starfield-mid.svg);
	mask-size: 900px 900px;
}

.starfield__stars--near {
	mask-image: url(../img/starfield-near.svg);
	mask-size: 1300px 1300px;
}

/* Charms: the loading screen's sun, eye, crystal, flower and feather, the old
   medallion and the designer's background elements (img/charms.svg), faint down
   the edges of the star field (js/starfield.js places them). Each sits still at its
   own slight tilt. */
.charm {
	position: absolute;
	height: auto;
	overflow: visible;
	fill: var(--color-star);
	opacity: var(--charm-opacity, 0.15);
	rotate: var(--charm-tilt, 0deg);
	pointer-events: none;
}

/* paused while off screen (js/starfield.js) */
.is-offscreen,
.is-offscreen * {
	animation-play-state: paused !important;
}

/* Soft cream glows, like faint patches of cosmos behind the stars: a blurred-edge
   circle drawn as a radial gradient (cheaper than a blur filter). Size, strength and
   timing per spot: --spot-size, --spot-opacity, --spot-delay. Used by the star field
   (js/starfield.js) and the home page (front-page.php). */
.glow-spot {
	position: absolute;
	width: var(--spot-size, 30rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--color-glow), transparent);
	opacity: var(--spot-opacity, 0.1);
	pointer-events: none;
}

/* on the home page and the page transition; the star field's hold still */
@media (prefers-reduced-motion: no-preference) {
	.landing__glows .glow-spot,
	.page-transition .glow-spot {
		animation: glow-breathe 18s ease-in-out var(--spot-delay, 0s) infinite;
	}
}

@keyframes glow-breathe {
	0%, 100% { opacity: var(--spot-opacity, 0.1); scale: 1; }
	50%      { opacity: calc(var(--spot-opacity, 0.1) * 1.6); scale: 1.08; }
}

.star {
	position: absolute;
	width: var(--star-size);
	aspect-ratio: 1;
	background-color: var(--color-star);
	opacity: var(--star-opacity);
	mask: url(../img/circle-star.svg) no-repeat center / contain;
}

.star--sparkle {
	aspect-ratio: 307 / 516; /* four-point-star.svg */
	mask-image: url(../img/four-point-star.svg);
}

/* Twinkling is off: .star--twinkle stars (the header, the content's sky, the page
   transition) hold still. To bring it back:
   @media (prefers-reduced-motion: no-preference) {
   	.star--twinkle { animation: star-twinkle var(--twinkle-time, 4s) ease-in-out var(--twinkle-delay, 0s) infinite; }
   } */

/* Mouse trail (js/starfield.js): a few stars over everything. The soft shadow, which lifts
   them off bright photos, is on each star: on the whole layer it would repaint the
   whole screen with every frame. */
.cursor-stars {
	position: fixed;
	inset: 0;
	z-index: 100001;
	overflow: hidden;
	pointer-events: none;
}

.cursor-stars .star {
	left: 0;
	top: 0;
	translate: -50% -50%;
	opacity: 0;
	filter: drop-shadow(0 0 0.1875rem var(--color-burgundy));
	will-change: transform, opacity;
}

/* now and then, one of these instead of a star: fine line art, so they're bigger */
.cursor-stars__eye {
	--star-size: 3.5rem;
	aspect-ratio: 253 / 129;
	mask-image: url(../img/trail-eye.svg);
}

.cursor-stars__moon {
	--star-size: 1.625rem;
	aspect-ratio: 72 / 51;
	mask-image: url(../img/trail-moon.svg);
}

/* A shooting star (js/starfield.js moves it): img/shooting-star.svg as a mask, its
   head at the top, filled with the star colour fading out down the tail. */
.shooting-star {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transform-origin: 50% 0; /* the head */
	background: linear-gradient(var(--color-star) 3%, color-mix(in oklab, var(--color-star) 40%, transparent) 35%, transparent 95%);
	-webkit-mask: url(../img/shooting-star.svg) no-repeat center / 100% 100%;
	mask: url(../img/shooting-star.svg) no-repeat center / 100% 100%;
	pointer-events: none;
	will-change: transform, opacity;
}

@keyframes star-twinkle {
	0%, 100% { opacity: var(--star-opacity); transform: scale(1); }
	50%      { opacity: calc(var(--star-opacity) * 3); transform: scale(1.35); }
}


/* hero (featured image)
   ========================================================================== */

.hero {
	/* how much js/animations.js zooms the photo for its parallax (desktop only) */
	--hero-zoom: 1;
	container-type: inline-size; /* lets the shadow below use cqw (= 1% of the hero width) */
	width: 100%;
	position: relative;
	overflow: hidden; /* clips the parallax movement of the photo */
	/* Two layers: the curve SVG at the bottom, plus a solid block over everything
	   above the curve's highest point, for a hero taller than the SVG (the landing
	   page on tall, narrow screens). The curve rises 8.7113% of the width; vw is
	   never smaller than the hero's width, so the block always stops above it. */
	mask:
		url(../img/hero-mask.svg) no-repeat bottom center / 100% auto,
		linear-gradient(#000 0 0) no-repeat top center / 100% calc(100% - 8.7113vw);
}

@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
	.hero {
		--hero-zoom: 1.12;
	}
}

/* Shrink-wraps the photo, so the shadow below covers the photo and not the
   page showing beside it on wide screens. */
.hero__frame {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

/* Inner shadow: the page below the curve casts a shadow up onto the photo.
   This layer is filled in below the curve (the area .hero's mask hides) and
   drop-shadow throws its shadow upward into the visible photo. The curve is
   sized to the hero's width (100cqw), exactly as the mask is, and a solid band
   underneath keeps the shadow even where the curve meets the bottom edge.
   left/right widen the layer to the photo's zoomed width; clip-path then trims
   the shadow to that width. */
.hero__frame::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: -6.25rem;
	left: calc(50% - 50% * var(--hero-zoom));
	right: calc(50% - 50% * var(--hero-zoom));
	pointer-events: none;
	background:
		url(../img/hero-shadow-caster.svg) no-repeat center bottom 6.25rem / 100cqw auto,
		linear-gradient(#000 0 0) no-repeat center bottom / 100% 6.25rem;
	filter: var(--shadow-curve-up);
	clip-path: inset(0);
}

.site--landing .hero__frame::after {
	display: none;
}

.hero__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}


/* content
   ========================================================================== */

.content__body {
	display: flow-root; /* contains the content's margins */
	padding-top: var(--space-xl); /* breathing room below the hero's curve */
}



.content__title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* the title keeps its width; the ornaments take what's left */
	align-items: center;
	column-gap: 0.45em;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: var(--text-5xl);
	padding: var(--space-md) 0;
	text-align: center;
}

/* a star, a dot, a smaller star and smaller dots either side, shrinking outwards */
.content__title::before,
.content__title::after {
	content: "";
	width: 100%;
	max-width: 2.1em; /* title-ornament.svg is 140 x 40 */
	height: 0.6em;
	margin-top: -0.12em; /* level with the capitals, not the line box */
	background-color: currentColor;
	opacity: 0.8;
	mask: url(../img/title-ornament.svg) no-repeat center / contain;
	/* drawn outwards from the title as --title-ornament goes 0 to 1 (js/animations.js) */
	clip-path: inset(0 calc((1 - var(--title-ornament, 1)) * 100%) 0 0);
}

.content__title::before {
	scale: -1 1;
	justify-self: end;
	translate: calc((1 - var(--title-ornament, 1)) * 0.5em) 0;
}

.content__title::after {
	justify-self: start;
	translate: calc((1 - var(--title-ornament, 1)) * -0.5em) 0;
}

.content__note {
	text-align: center;
}



.landing {
	--hex-w: min(76cqw, 114cqh);                 /* hexagon width */
	--hex-h: calc(var(--hex-w) * 1.1547);        /* a regular hexagon: width x 2/sqrt(3) */
	--hex-x: 50cqw;                               /* hexagon centre */
	--hex-y: 50cqh;
	container-type: size;
	position: relative;
	overflow: hidden;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	color: var(--color-landing-art);
	/* a brighter glow at the centre, behind everything, easing out to the background colour and darkening at the edges */
	background: var(--color-burgundy);
}

/* soft cream glows behind the artwork (.glow-spot above), placed around the hexagon */
.landing__glows {
	position: absolute;
	inset: 0;
}

.landing__glows .glow-spot:nth-child(1) { left: 12cqw; top: 22cqh; --spot-size: 42cqmax; --spot-opacity: 0.14; --spot-delay: -3s; }
.landing__glows .glow-spot:nth-child(2) { left: 88cqw; top: 14cqh; --spot-size: 34cqmax; --spot-opacity: 0.12; --spot-delay: -9s; }
.landing__glows .glow-spot:nth-child(3) { left: 84cqw; top: 82cqh; --spot-size: 46cqmax; --spot-opacity: 0.13; --spot-delay: -14s; }
.landing__glows .glow-spot:nth-child(4) { left: 18cqw; top: 86cqh; --spot-size: 30cqmax; --spot-opacity: 0.11; --spot-delay: -6s; }
.landing__glows .glow-spot:nth-child(5) { left: 52cqw; top: 50cqh; --spot-size: 60cqmax; --spot-opacity: 0.08; --spot-delay: -11s; }

/* artwork: square, centred, at least as big as the window; at full size it lines
   up with the hexagon as in the design (art width = hexagon width x 1.49) */
.landing__art-svg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(calc(var(--hex-w) * 1.49), 100cqw, 100cqh);
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	translate: -50% -50%;
}

.landing__art-svg use {
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	/* dashed rings and sunbursts turn slowly; --spin and --spin-dir are set per piece */
	.art-ring--spin,
	.art-burst {
		animation: art-spin var(--spin, 160s) linear infinite var(--spin-dir, normal);
	}

	/* a few stars and dots twinkle, each on its own timing (--tw, --tw-delay) */
	.art-twinkle {
		animation: art-twinkle var(--tw, 4s) ease-in-out var(--tw-delay, 0s) infinite;
	}
}

@keyframes art-spin {
	to { rotate: 360deg; }
}

@keyframes art-twinkle {
	0%, 100% { opacity: 0.45; scale: 0.75; }
	50%      { opacity: 1;    scale: 1.2; }
}

/* hexagon */
.landing__hex {
	position: absolute;
	left: var(--hex-x);
	top: var(--hex-y);
	width: var(--hex-w);
	height: var(--hex-h);
	translate: -50% -50%;
}

.landing__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	background: var(--color-burgundy-dark);
}

.landing__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 30% 50%; /* keep her (left of centre) in frame; the logo sits right */
}

.landing__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--color-clay);
	stroke-width: 4;
	pointer-events: none;
}

.landing__frame-line {
	vector-effect: non-scaling-stroke;
}

.landing__frame-line--inner {
	stroke-width: 2;
}

/* logo and Continue: over the right of the photo, as in the design */
.landing__intro {
	position: absolute;
	left: calc(var(--hex-x) + var(--hex-w) * 0.25);
	top: calc(var(--hex-y) - var(--hex-h) * 0.03);
	width: calc(var(--hex-w) * 0.37);
	translate: -50% -50%;
	text-align: center;
}

.landing__logo {
	margin: 0;
}

/* the theme's vector logo, added above Continue by functions.php */
.landing__logo svg {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--color-burgundy-dark);
}

/* Each letter starts hidden and is filled in by js/animations.js. The CSS
   animation is a failsafe that shows it after 10s if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
	.has-js .landing__logo path {
		clip-path: inset(0 100% 0 0);
		animation: logo-failsafe 0s 10s forwards;
	}

	/* also revealed by js/animations.js, with the same failsafe */
	.has-js .landing__photo,
	.has-js .landing__frame,
	.has-js .landing__glows,
	.has-js .landing__enter,
	.has-js .landing__badges,
	.has-js .landing .art-in {
		opacity: 0;
		animation: landing-failsafe 0s 10s forwards;
	}
}

@keyframes logo-failsafe {
	to { clip-path: none; }
}

@keyframes landing-failsafe {
	to { opacity: 1; }
}

.landing__enter {
	margin: calc(var(--hex-w) * 0.035) 0 0;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: max(1.5rem, calc(var(--hex-w) * 0.033));
	line-height: 1cap;
}

.landing__enter a,
.landing__enter a:hover,
.landing__enter a:focus {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
	min-width: 65%;
	padding: 0.5em .75em .35em;
	border-radius: 999px;
	color: var(--color-cream);
	background: var(--color-burgundy-dark);
	letter-spacing: var(--tracking);
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.landing__enter a:hover,
.landing__enter a:focus {
	background: var(--color-burgundy);
}

.landing__enter a::after {
	content: "";
	flex: none;
	aspect-ratio: 7.63 / 1.63;
	width: 1.25em; /* the arrow's proportions */
	background: var(--color-text);
	mask: url(../img/enter-arrow.svg) center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
	.landing__enter a::after {
		transition: translate 0.4s ease-out;
	}

	.landing__enter a:is(:hover, :focus-visible)::after {
		translate: 0.25em 0;
	}
}

/* partner logos, bottom right (Site Settings > Home Page) */
.landing__badges {
	position: absolute;
	right: var(--space-md);
	bottom: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-sm);
}

.landing__badge {
	margin: 0;
}

/* Each logo fits a 64 x 48px box, so tall seals and wide wordmarks carry
   about the same weight. A fixed height (not auto) so SVGs without their own
   width and height still get a size. */
.landing__badge img {
	display: block;
	width: auto;
	height: 3rem;
	max-width: 4rem;
	object-fit: contain;
}

/* portrait screens: hexagon at the top, logo and Continue below it */
@container (max-aspect-ratio: 4 / 5) {
	.landing__hex,
	.landing__intro,
	.landing__badges {
		--hex-w: min(90cqw, 50cqh);
		--hex-h: calc(var(--hex-w) * 1.1547);
		--hex-y: calc(5cqh + var(--hex-h) / 2);
	}

	.landing__intro {
		left: 50cqw;
		top: calc(var(--hex-y) + var(--hex-h) / 2 + 4cqh);
		width: min(64cqw, 22rem, 26cqh);
		translate: -50% 0;
	}

	.landing__enter {
		display: flex;
		justify-content: center; /* stays centred if it's wider than the logo */
		margin-top: 3cqh;
		font-size: 1.75rem;
	}

	.landing__enter a,
	.landing__enter a:hover,
	.landing__enter a:focus {
		flex: none;
		gap: 0.5em;
		padding-inline: 1em;
	}

	.landing__enter a::after {
		width: 1.75em;
		height: 0.375em;
	}

	.landing__badges {
		left: var(--space-md);
		justify-content: center;
	}

	.landing__badge img {
		height: 2.25rem;
		max-width: 3rem;
	}
}


/* containers (Group block > Styles: Standard width, Wide width, Full width)
   Standard is up to 64rem (--container-standard-max) and fits two columns. Wide is
   up to 85rem (--container-max) and fits three: its middle column is exactly as
   wide as a Standard column, so centred text lines up with the text in Standard,
   and the two outer columns share what's left. Both less the gutters on smaller screens.
   ========================================================================== */

.is-style-container-standard,
.is-style-container-wide {
	--container-standard: min(100% - 2 * var(--gutter), var(--container-standard-max));
	--container-column: calc((var(--container-standard) - var(--container-gap)) / 2);
	display: flow-root;
	margin-inline: auto;
}

.is-style-container-standard {
	width: var(--container-standard);
}

.is-style-container-wide {
	width: min(100% - 2 * var(--gutter), var(--container-max));
}

/* Wide's middle column matches a Standard column (side by side only, 782px+;
   not with "wide-center", which sets its own proportions) */
@media (min-width: 48.875rem) {
	.is-style-container-wide > .wp-block-columns:not(.wide-center) > .wp-block-column {
		flex: 1 1 0;
	}

	.is-style-container-wide > .wp-block-columns:not(.wide-center) > .wp-block-column:nth-child(2) {
		flex: 0 0 var(--container-column);
	}
}

/* Full width: the whole window. Images in the first and last columns run off the
   window's edges: the photo meets the edge and the frame's outer side is cut off
   (.site-main clips it). */
.is-style-container-full {
	display: flow-root;
	width: 100%;
}

.is-style-container-standard > .wp-block-columns,
.is-style-container-wide > .wp-block-columns {
	gap: var(--container-gap);
}

.is-style-container-full > .wp-block-columns {
	gap: var(--container-gap-full);
}

/* A Group added in the editor gets WordPress's "constrained" layout, which caps
   everything inside at the 800px content width; the container sets the width instead. */
.wp-block-group.is-style-container-standard > *,
.wp-block-group.is-style-container-wide > *,
.wp-block-group.is-style-container-full > * {
	max-width: none;
}

/* columns side by side (782px+, where WordPress stops stacking them) */
@media (min-width: 48.875rem) {
	.is-style-container-full .wp-block-column:first-child .wp-block-image,
	.is-style-container-full .wp-block-column:last-child .wp-block-image {
		margin-inline: 0;
	}

	.is-style-container-full .wp-block-column:first-child .wp-block-image img,
	.is-style-container-full .wp-block-column:last-child .wp-block-image img {
		width: calc(100% + var(--photo-frame-edge));
		max-width: none;
	}

	.is-style-container-full .wp-block-column:first-child .wp-block-image img {
		margin-left: calc(-1 * var(--photo-frame-edge));
	}

	.is-style-container-full .wp-block-column:last-child .wp-block-image img {
		margin-right: calc(-1 * var(--photo-frame-edge));
	}
}

/* "wide-center" (on a Columns block, Advanced > Additional CSS class): the middle
   column gets more room and the two outer columns less. --center-share is how much
   wider the middle column is than each outer one. Only side by side (782px+). */
@media (min-width: 48.875rem) {
	.wp-block-columns.wide-center > .wp-block-column {
		flex: 1 1 0;
	}

	.wp-block-columns.wide-center > .wp-block-column:nth-child(2) {
		flex-grow: var(--center-share, 1.6);
	}
}

/* "section" (Block > Advanced > Additional CSS class): space above and below a container */
.section {
	padding-block: 6vh;
}

/* phones and small tablets: the columns stack (below 782px, as WordPress does); Full width gets side margins */
@media (max-width: 48.8125rem) {
	.is-style-container-full {
		padding-inline: var(--gutter);
	}
}


/* about (Yours Truly copy column)
   ========================================================================== */

.about {
	padding: 0 var(--gutter);
}

@media (min-width: 62rem) {
	.about {
		display: flow-root;
		width: var(--column-text);
		margin-inline: auto;
	}
}

/* Copy starts hidden and is revealed line by line (intro text: word by word; the
   stats one by one; the rest of the content's copy simply fades) by js/animations.js, where the last selector
   must match fadeCopy. The CSS animation is a failsafe that shows it after 4s if
   the script never runs. */
@media (prefers-reduced-motion: no-preference) {
	.has-js .about__title,
	.has-js .about > p,
	.has-js .intro,
	.has-js .stats > li,
	.has-js .stats__title,
	.has-js .content__body tr:not(.gform-datepicker-calendar tr), /* the form's calendar is built on opening, after the reveal */
	.has-js .content__title,
	.has-js .content__body :is(p, li, h2, h3, h4, blockquote):not(.intro, .intro *, .about *, blockquote *, .gallery__item *, .offering *, .duo *, .connection-quote *, .stats *, .stats__title, .form-sent *) {
		visibility: hidden;
		animation: reveal-failsafe 0s 4s forwards;
	}
}

@keyframes reveal-failsafe {
	to { visibility: visible; }
}

.reveal-line,
.reveal-word {
	will-change: transform, opacity, filter;
}


/* round-photo (Yours Truly)
   The ornaments are the figure's ::before/::after. js/animations.js slides
   them by animating the --ornament-* custom properties.
   ========================================================================== */

.round-photo {
	--ornament-left-x: 0px;
	--ornament-right-x: 0px;
	--ornament-opacity: 1;
	position: relative;
	width: 100%;
	margin: 0 0 var(--space-lg);
}

.round-photo::before,
.round-photo::after {
	content: "";
	width: 23.5625rem;
	height: 13rem;
	position: absolute;
	top: 11.25rem;
	opacity: var(--ornament-opacity);
	background: transparent url(../img/image-ornaments.png) no-repeat 0 -26.125rem;
}

.round-photo::before {
	left: -6.25rem;
	transform: translateX(var(--ornament-left-x));
}

.round-photo::after {
	right: -6.25rem;
	transform: translateX(var(--ornament-right-x));
	background-position: 100% -26.125rem;
}

.round-photo img {
	display: block;
	opacity: 0;
	transform: scale(0.2);
	margin: 0 auto;
	width: 31.25rem;
	max-width: 100%;
	height: 31.25rem;
	border-radius: 50%;
	border: var(--photo-border);
	position: relative;
	z-index: 999;
}


/* gallery (Visuals)
   ========================================================================== */

/* Room between the photos, side by side and row to row, for the frames round
   each one (and the photo growing on hover). */
.gallery {
	--gallery-gap: clamp(4.5rem, 10.5vw, 9.5rem);
	position: relative;
}

/* lines joining the photos (js/utilities.js), under them */
.gallery__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.gallery__line {
	stroke: var(--color-text);
	stroke-width: 1;
	stroke-opacity: 0.7;
}

/* room under the page title, so the first row's frames clear it */
.content__title:has(+ .gallery) {
	margin-bottom: 5rem;
}

.gallery__row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gallery-gap);
	width: 100%;
	margin-bottom: var(--gallery-gap);
}

.gallery__row--first {
	margin-top: var(--space-xl);
}

.gallery__item {
	position: relative;
	isolation: isolate; /* keeps its star field (below) just behind it */
	flex: 0 0 auto;
	border-radius: 50%;
	margin: 0;
	transition: all 0.3s ease 0s;
}

/* js/animations.js reveals each photo through this, its frame already in place */
.gallery__item a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
}

.gallery__item:hover {
	transform: scale(1.1);
	box-shadow: var(--shadow-soft);
}

/* sizes grow with the screen: 230, 290 and 345px at 1440px wide */
.gallery__item--sm { width: clamp(10rem, 16vw, 15rem); height: clamp(10rem, 16vw, 15rem); }
.gallery__item--md { width: clamp(12rem, 20vw, 19rem); height: clamp(12rem, 20vw, 19rem); }
.gallery__item--lg { width: clamp(14rem, 24vw, 22.5rem); height: clamp(14rem, 24vw, 22.5rem); }

.gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* The frame round each photo (img/gallery-frame-parts.svg; js/utilities.js adds it), in
   the pink of the site's other line art. The photo fills the outer ring, the artwork's
   349-unit circle, so the 409-unit artwork is 117.27% of the photo, and each layer sits
   with that circle's centre on the photo's (it's 50.76% down the artwork).
   At rest: the star field behind the photo, scaled in, and the outer rings over the photo.
   On hover, all together: the stars turn and scale out until they touch the ring; the
   two eyes, above and below the photo, open up, each from a circle growing from its
   centre, their discs the page's own colour; and the branches grow out from the eyes,
   revealed by a widening circle. The inner ring of dots fades in, turning the other way from the stars. */
.gallery__art {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 117.27%;
	max-width: none; /* wider than the photo */
	height: auto;
	aspect-ratio: 409.26 / 417.14;
	translate: -50% -50.76%;
	overflow: visible;
	color: var(--color-text);
	fill: currentColor;
	pointer-events: none;
}

.gallery__art--stars {
	z-index: -1;
	scale: 0.93;
	rotate: var(--border-turn, 0deg);
	transform-origin: 50% 50.76%;
}

.gallery__art--inner {
	opacity: 0;
	transform-origin: 50% 50.76%;
}

.gallery__item:is(:hover, :focus-within) .gallery__art--inner {
	opacity: 1;
}

.gallery__item:is(:hover, :focus-within) .gallery__art--stars {
	scale: 1;
}

/* their own layers only while they turn */
.gallery__item:is(:hover, :focus-within) :is(.gallery__art--stars, .gallery__art--inner) {
	will-change: transform;
}

/* not painted until they're wanted */
.gallery__art--inner,
.gallery__art--extras,
.gallery__art--branches-top,
.gallery__art--branches-bottom {
	visibility: hidden;
}

.gallery__item:is(:hover, :focus-within) :is(.gallery__art--inner, .gallery__art--extras, .gallery__art--branches-top, .gallery__art--branches-bottom) {
	visibility: visible;
}

/* a little further out than in the artwork */
.gallery__piece--eye-top {
	translate: 0 -5px;
}

.gallery__piece--eye-bottom {
	translate: 0 5px;
}

.gallery__art--extras .gallery__piece {
	transform-box: fill-box;
	transform-origin: center;
	clip-path: circle(0% at 50% 50%) fill-box;
}

/* 75%: past each piece's corners */
.gallery__item:is(:hover, :focus-within) .gallery__art--extras .gallery__piece {
	clip-path: circle(75% at 50% 50%) fill-box;
}

/* The circles are centred between the branches and start just short of them, so the
   branches grow out from the eyes. */
.gallery__art--branches-top {
	--branch-reach: 33%;
	clip-path: circle(9% at 50% 10.35%);
}

.gallery__art--branches-bottom {
	--branch-reach: 33%;
	clip-path: circle(9% at 50% 90.41%);
}

.gallery__item:is(:hover, :focus-within) .gallery__art--branches-top {
	clip-path: circle(var(--branch-reach) at 50% 10.35%);
}

.gallery__item:is(:hover, :focus-within) .gallery__art--branches-bottom {
	clip-path: circle(var(--branch-reach) at 50% 90.41%);
}

/* the small photos: the eyes and the branches a little bigger than the
   frame's scale, so they hold up. The eyes move out further to stay clear of the
   ring, and the branches' circles reach further. */
.gallery__item--sm .gallery__art--extras .gallery__piece,
.gallery__item--sm .gallery__piece--top-branches,
.gallery__item--sm .gallery__piece--bottom-branches {
	transform-box: fill-box;
	transform-origin: center;
	scale: 1.25;
}

.gallery__item--sm .gallery__piece--eye-top {
	translate: 0 -9px;
}

.gallery__item--sm .gallery__piece--eye-bottom {
	translate: 0 9px;
}

.gallery__item--sm :is(.gallery__art--branches-top, .gallery__art--branches-bottom) {
	--branch-reach: 42%;
}

@media (prefers-reduced-motion: no-preference) {
	.gallery__art--stars {
		animation: border-spin 60s linear infinite paused;
		transition: scale 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.gallery__item:is(:hover, :focus-within) .gallery__art--stars {
		transition-duration: 1s;
	}

	.gallery__art--inner {
		animation: art-spin 50s linear infinite reverse paused;
		transition: opacity 0.3s ease-out, visibility 0s 0.3s;
	}

	.gallery__item:is(:hover, :focus-within) .gallery__art--inner {
		transition: opacity 0.6s ease-out, visibility 0s;
	}

	.gallery__item:is(:hover, :focus-within) :is(.gallery__art--stars, .gallery__art--inner) {
		animation-play-state: running;
	}

	/* out, all together and quickly, staying visible until they've gone */
	.gallery__art--extras {
		transition: visibility 0s 0.35s;
	}

	.gallery__art--extras .gallery__piece {
		transition: clip-path 0.3s ease-out;
	}

	.gallery__art--branches-top,
	.gallery__art--branches-bottom {
		transition: clip-path 0.3s ease-out, visibility 0s 0.35s;
	}

	/* in, all together */
	.gallery__item:is(:hover, :focus-within) .gallery__art--extras {
		transition-delay: 0s;
	}

	.gallery__item:is(:hover, :focus-within) .gallery__art--extras .gallery__piece {
		transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.gallery__item:is(:hover, :focus-within) :is(.gallery__art--branches-top, .gallery__art--branches-bottom) {
		transition: clip-path 1.2s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s;
	}
}

/* turns from its own starting angle */
@keyframes border-spin {
	from { rotate: var(--border-turn, 0deg); }
	to   { rotate: calc(var(--border-turn, 0deg) + 360deg); }
}

/* play button over the video thumbnails: a rounded triangle (img/play-arrow.svg) in
   the warm cream of the glows, a touch right of centre so it looks centred */
.gallery__item--video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.25rem;
	aspect-ratio: 50 / 66;
	translate: -40% -50%;
	pointer-events: none;
	background-color: var(--color-header-ink);
	-webkit-mask: url(../img/play-arrow.svg) no-repeat center / contain;
	mask: url(../img/play-arrow.svg) no-repeat center / contain;
	transition: opacity 0.9s ease-out;
}

.gallery__item--video.is-waiting::after {
	opacity: 0;
}

/* stats (Yours Truly): the group holding the "stats" list (each item
   "<strong>Label</strong> value") and its "stats__title" heading, framed by the
   designer's artwork (img/stats-frame.svg): two hands raised at the bottom, a ring of
   stars, the sun at the top and an eye between the hands. functions.php adds the
   pieces (.stats-frame__art); js/animations.js raises the hands, reveals the stars
   upwards from them and brings in the sun, the title and the stats. The artwork is a
   500-unit square, --frame-w wide; each piece sits at its place in it (units / 5 = %).
   The title and the stats sit inside the ring, in two columns, the odd one out
   centred under them. It's the middle column of a full-width group, so images can
   go either side. On phones the square stays wider than the screen, cut off at the
   sides, so the ring still has room for them. */
/* the full-width group's middle column, given more room than the images either side */
.stats-columns {
	--center-share: 2.6;
}

.stats-frame {
	/* a little wider than its column: the ring's thin outer edge reaches into the gaps */
	--frame-w: clamp(30rem, 125cqw, 60rem);
	--frame-u: calc(var(--frame-w) / 500); /* one unit of the artwork */
	container-type: inline-size; /* cqw above: the group's width */
	position: relative;
	display: grid;
	/* the title and the stats, centred in the square by the rows either side (and
	   nudged by the stats' bottom margin) */
	grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
	color: var(--color-heading);
}

.stats-frame > * {
	grid-column: 1;
}

@media (max-width: 48.8125rem) {
	.stats-frame {
		--frame-w: clamp(33rem, 125cqw, 60rem);
		overflow-x: clip; /* the square, wider than the screen */
	}

	/* the text is at its smallest here, so tighter spacing keeps it inside the ring */
	.stats-frame .stats__title {
		margin-bottom: calc(var(--frame-u) * 10) !important;
	}

	.stats-frame .stats {
		row-gap: calc(var(--frame-u) * 12);
	}
}

.stats-frame__art {
	grid-row: 1 / -1;
	align-self: center;
	position: relative;
	width: var(--frame-w);
	max-width: none !important; /* the group's layout caps its children's widths */
	aspect-ratio: 1;
	margin: 0 calc(50% - var(--frame-w) / 2) !important;
	color: var(--color-text); /* the pink of the site's other line art */
	pointer-events: none;
}

.stats-frame__art svg {
	position: absolute;
	max-width: none;
	overflow: visible;
	fill: currentColor;
}

.stats-frame__field {
	inset: 0;
	width: 100%;
	height: 100%;
}

.stats-frame__sun {
	left: 44.2%;
	top: 4.4%;
	width: 11.8%;
	height: 11.8%;
}

.stats-frame__hand--left {
	left: 14%;
	top: 70%;
	width: 48%;
	height: 30%;
}

.stats-frame__hand--right {
	left: 59%;
	top: 70%;
	width: 27%;
	height: 30%;
}

.stats-frame__eye {
	left: 42.4%;
	top: 82%;
	width: 15.2%;
	height: 12%;
}

/* while js/animations.js reveals the stars: shown up to --reveal (0 to 1) of the way
   up from the bottom, fading off above that */
.stats-frame.is-masked .stats-frame__field {
	-webkit-mask-image: linear-gradient(to top, #000 calc(var(--reveal, 1) * 130% - 30%), transparent calc(var(--reveal, 1) * 130%));
	mask-image: linear-gradient(to top, #000 calc(var(--reveal, 1) * 130% - 30%), transparent calc(var(--reveal, 1) * 130%));
}

.stats-frame__hand {
	transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.stats-frame__sun {
		animation: art-spin 40s linear infinite;
	}
}

.stats__title {
	grid-row: 2;
	margin: 0 0 calc(var(--frame-u) * 18) !important;
	text-align: center;
	font-family: var(--font-display);
	font-size: max(2.25rem, var(--frame-u) * 38);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
}

.stats {
	grid-row: 3;
	justify-self: center;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--frame-u) * 20) calc(var(--frame-u) * 14);
	width: calc(var(--frame-u) * 225); /* inside the ring */
	max-width: none !important;
	/* centred between the sun (its bottom at 79 units) and the moon over the eye (its
	   top at 414), 3.5 units above the square's centre (in a margin rather than the
	   group's own rows: the group's width, in cqw, only reaches what's inside it) */
	margin: 0 0 calc(var(--frame-u) * 7) !important;
	padding: 0;
	list-style: none;
}

.stats > li {
	margin: 0;
	text-align: center;
	text-wrap: balance;
	font-size: max(1.05rem, var(--frame-u) * 16.5); /* the value */
	line-height: var(--leading-tight);
}

/* an odd one out, centred under the rest */
.stats > li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* the label, over the value */
.stats strong {
	display: block;
	margin-bottom: 0.2em;
	font-family: var(--font-display);
	font-size: max(0.95rem, var(--frame-u) * 13);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	opacity: 0.85;
}

.gallery__stats {
	margin-top: var(--space-xl);
	text-align: center;
}




/* duo (Offerings: Duos)
   ========================================================================== */

.duo {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

.duo__image {
	flex: 0 0 7.8125rem;
	width: 7.8125rem;
	height: 7.8125rem;
	margin: 0;
	border-radius: 50%;
	border: 0.3125rem solid var(--color-clay-dark);
	overflow: hidden;
}

.duo__image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 50%;
}

.duo__name {
	font-size: var(--text-lg);
	margin: 0;
}

.duo__name a,
.duo__name a:hover,
.duo__name a:focus {
	color: var(--color-cream);
}


/* connection, thank-you (centred text columns)
   ========================================================================== */

.connection,
.thank-you {
	padding: 0 var(--gutter);
}

@media (min-width: 48rem) {
	.connection,
	.thank-you {
		display: flow-root;
		width: var(--column-text);
		margin-inline: auto;
	}
}

.connection__p411 {
	padding: var(--space-lg) 0;
	text-align: center;
}

.connection__p411 a,
.connection__p411 a:hover,
.connection__p411 a:focus {
	color: var(--color-cream);
	font-size: var(--text-lg);
}

.thank-you__message {
	font-size: var(--text-lg);
	text-align: center;
	margin: var(--space-xl) 0 var(--space-lg);
}


/* connection-quote (moved over the hero photo from 992px by js/utilities.js)
   ========================================================================== */

.connection-quote {
	padding: var(--space-xs) var(--space-md);
	margin: 0 0 var(--space-md);
	text-align: center;
}

.connection-quote p {
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
	line-height: var(--leading-snug);
	text-wrap: balance;
}

/* the author: display font, all caps */
.connection-quote cite {
	display: block;
	margin-top: var(--space-sm);
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.375rem);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	line-height: var(--leading-table);
	opacity: 0.8;
}

.connection-quote cite::before {
	content: "\2014\00A0";
}

/* desktop: in the open sky to the right of her (she reaches about 60% across) */
.hero .connection-quote {
	position: absolute;
	top: clamp(8rem, 13vw, 12.5rem); /* higher on narrower screens, above her knee */
	left: 62%;
	right: 4%;
	margin: 0;
	color: var(--color-burgundy);
	border-left: 0;
}

.hero .connection-quote p {
	font-size: clamp(1.75rem, 0.4rem + 2.2vw, 3.25rem);
	line-height: 1.2;
}

.hero .connection-quote cite {
	font-size: clamp(1.1rem, 0.6rem + 0.75vw, 1.5rem);
}


/* travel-dates (Connection)
   ========================================================================== */

.travel-dates {
	margin-bottom: var(--space-xl);
}

title {
	text-align: center;
}





table thead td::before {
	margin-right: 0.4em;
}



/* Tables (the Table block too): no frame and no column lines, just a faint dotted
   line under the header row and under each row of the body. .wp-block-table is
   in the selectors to win over WordPress's own table borders. */
table {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-x: auto;
	font-size: 1rem;
}

table th,
table td,
.wp-block-table th,
.wp-block-table td {
	padding: 0.5rem 0;
	line-height: var(--leading-table);
	vertical-align: top;
	border: 0;
}

table :is(thead, tbody) :is(th, td),
.wp-block-table :is(thead, tbody) :is(th, td) {
	border-bottom: var(--rule-table);
}

.wp-block-table thead,
.wp-block-table tfoot {
	border: 0;
}

table thead td {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}


/* how white a form field is over its sheen; registered so it can fade (contact-form below) */
@property --field-white {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}


/* contact-form (Connection; wraps the Gravity Forms block)
   Gravity Forms' own class names are styled inside .contact-form .contact-form__body;
   the two block classes are needed to outrank Gravity Forms' own stylesheet.
   ========================================================================== */

.contact-form__title {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.contact-form__body {
	padding: var(--space-md) 0;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 1.125rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gsection {
	border: 0;
	margin: 2.5rem 0 0;
	padding: 0;
	text-align: center;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gsection:first-child {
	margin-top: var(--space-xs);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gsection .gsection_title {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: 0 0 var(--space-xs);
	padding: 0;
	border: 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	line-height: 1.6em;
	color: var(--color-cream);
}

/* section headers: a thin pink line out to each side, centred on the text */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gsection .gsection_title::before,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gsection .gsection_title::after {
	content: "";
	flex: 1;
	height: 0.0625rem;
	background-color: var(--color-cream);
	opacity: 0.6;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_label,
.contact-form .contact-form__body .gform_wrapper.gravity-theme legend.gfield_label {
	display: block;
	margin: 0;
	padding: 0 0 0.1875rem;
	color: var(--color-cream);
	font-size: var(--text-md);
	font-weight: bold;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_required {
	color: var(--color-error);
	font-style: normal;
	font-size: var(--text-md);
	padding-left: 0.25rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_required .gfield_required_text {
	display: none;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_required::after {
	content: "*";
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="text"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="email"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="url"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="number"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield select:not(.select),
.contact-form .contact-form__body .gform_wrapper.gravity-theme textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 1rem 1.125rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* plain and easy to read as you type */
	font-size: 1rem;
	font-weight: 300;
	color: var(--color-ink);
	/* A faint iridescent sheen over the pale fill: warm cream, blush and a breath of
	   lavender, at an angle and blend js/utilities.js picks at random for each field.
	   Over it, a white layer (--field-white, 0 to 1) that fades in on focus. */
	background-color: var(--color-cream);
	background-image:
		linear-gradient(rgb(255 255 255 / var(--field-white)) 0 0),
		linear-gradient(var(--sheen-angle, 135deg),
			color-mix(in oklab, var(--color-cream) 85%, white) 0%,
			color-mix(in oklab, var(--color-cream) 86%, var(--color-glow)) var(--sheen-at, 50%),
			color-mix(in oklab, var(--color-cream) 91%, #c9b6ec) 100%);
	transition: --field-white 0.5s ease, box-shadow 0.5s ease;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* one height for every single-line field, so they line up in a row (the time's
   hour, minute and AM/PM) */
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="text"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="email"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="url"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme input[type="number"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield select:not(.select) {
	height: 3.75rem;
	min-height: 0;
	padding-block: 0;
	line-height: 3.75rem;
}

/* date picker calendar: readable dates in the site's colours */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-calendar {
	font-family: var(--font-form);
	font-size: 0.9375rem;
	color: var(--color-burgundy);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-calendar td,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-calendar th {
	font-size: 0.9375rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-calendar select {
	font-size: 0.9375rem;
	padding: 0.25rem 0.5rem;
	border: 0.0625rem solid var(--color-brick);
	background-color: var(--color-white);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme input:focus,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield select:not(.select):focus,
.contact-form .contact-form__body .gform_wrapper.gravity-theme textarea:focus {
	outline: 0;
	box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.075) inset, 0 0 0.5rem var(--color-focus-glow);
	--field-white: 1;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme ::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .ginput_container_date {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .ginput_container_date input {
	flex: 1;
	width: 0; /* takes what the calendar button leaves */
}

/* the calendar button: a dark block on the end of the field, as tall as it is */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin: 0;
	background-color: var(--color-burgundy-dark);
	transition: background-color 0.5s ease;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-toggle:hover,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-toggle:focus-visible {
	background-color: color-mix(in oklab, var(--color-burgundy-dark), var(--color-clay) 25%);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform-datepicker-toggle-icon::before {
	color: var(--color-text);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme legend {
	border: 0;
	width: auto;
	margin-bottom: 0;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .ginput_container_time,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_time_ampm {
	flex: 0 0 5.625rem;
	width: 5.625rem;
	max-width: 5.625rem;
	min-width: 0;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .ginput_container_time input,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_time_ampm select {
	width: 100%;
	min-width: 0;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .hour_minute_colon {
	color: var(--color-cream);
	font-size: 1.375rem;
	line-height: 3.75rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .ginput_complex label,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_description {
	color: var(--color-cream);
	font-size: var(--text-sm);
	padding-top: 0.1875rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_footer {
	display: flex;
	justify-content: center;
	margin: 3rem 0 0;
	padding: 0;
}

/* where the submit button's hover sweep is, across it; registered so it can move */
@property --submit-sweep {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -30%;
}

/* Submit: three-quarters of the form's width, in the footer's burgundy with the
   header's light lettering and a fine dusty-pink border. A faint band of pink light
   drifts back and forth across it, to draw the eye; on hover the burgundy warms a
   little and a brighter band sweeps across it once. */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_button {
	width: 75%;
	margin: 0;
	padding: 1rem var(--space-md);
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	line-height: 1.2;
	color: var(--color-header-ink);
	background-color: var(--color-burgundy-dark);
	background-image:
		/* the hover sweep, waiting out of sight at the left */
		linear-gradient(110deg,
			transparent calc(var(--submit-sweep) - 18%),
			color-mix(in oklab, var(--color-cream) 22%, transparent) var(--submit-sweep),
			transparent calc(var(--submit-sweep) + 18%)),
		/* the drifting shimmer */
		linear-gradient(110deg,
			transparent 35%,
			color-mix(in oklab, var(--color-cream) 14%, transparent) 50%,
			transparent 65%);
	background-size: 100% 100%, 300% 100%;
	background-position: 0 0, 0% 50%;
	border: 3px solid color-mix(in oklab, var(--color-burgundy) 80%, var(--color-burgundy-dark));
	border-radius: 9999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.5s ease; /* the sweep snaps back out of sight */
}

@media (prefers-reduced-motion: no-preference) {
	.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
	.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_button {
		animation: submit-shimmer 7s ease-in-out infinite alternate;
	}
}

@keyframes submit-shimmer {
	to { background-position: 0 0, 100% 50%; }
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_button:hover,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_button:focus-visible {
	--submit-sweep: 130%;
	background-color: color-mix(in oklab, var(--color-burgundy-dark), var(--color-clay) 10%);
	transition: background-color 0.5s ease, --submit-sweep 0.9s ease-out;
}

/* Errors, in the site's pink rather than red. The summary at the top: a faint plum
   box with a fine pink border, a big display-font heading and the list in two columns. */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors {
	margin-bottom: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: color-mix(in oklab, var(--color-burgundy-dark) 35%, transparent);
	border: 0.0625rem solid color-mix(in oklab, var(--color-cream) 55%, transparent);
	border-radius: 0.25rem;
	box-shadow: none;
}

/* it takes focus when the errors appear: a pink ring, not Gravity Forms' red */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors:focus,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors > ol a:focus {
	outline: 0.0625rem solid var(--color-cream);
	outline-offset: 0.1875rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0 0 var(--space-md);
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	line-height: 1.2;
	color: var(--color-cream);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors .gform-icon {
	position: static;
	flex: none;
	color: var(--color-cream);
	border-color: var(--color-cream);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors ol {
	columns: 2;
	column-gap: var(--space-xl);
	margin: 0;
	padding: 0 0 0 1.25rem;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors ol li {
	break-inside: avoid;
	margin: 0 0 0.375rem;
	font-size: var(--text-md);
	color: var(--color-cream);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors ol li::marker {
	color: var(--color-cream);
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors .gform_validation_error_link {
	color: var(--color-cream);
	text-decoration: none;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors .gform_validation_error_link:hover {
	text-decoration: underline;
}

/* Each field's own message: a dark tab sitting flush on top of the field. */
.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_validation_message,
.contact-form .contact-form__body .gform_wrapper.gravity-theme .validation_message {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 1.125rem;
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--color-cream);
	background: var(--color-burgundy-dark);
	border: 0;
	border-radius: 0;
}

.contact-form .contact-form__body .gform_wrapper.gravity-theme .gfield_error .gfield_label {
	color: var(--color-cream);
}

@media (max-width: 47.9375rem) {
	.contact-form .contact-form__body .gform_wrapper.gravity-theme .gform_validation_errors ol {
		columns: 1;
	}
}


/* form-portal (the contact form's send-off, js/form-portal.js)
   A portal that opens in the middle of the screen as the form's pieces swirl into
   it: img/portal-parts.svg, one layer per moving part (the decoration, four branches,
   four rings, the sun), stacked and all centred on the sun. Sized so the outer ring
   is min(80vw, 62vh) across (--portal-u: screen px per artwork unit); the stars
   above and below run off the screen. In the lightest pink. It sits in the content
   area over the part on screen (the script sets its top), under the form's pieces,
   which the script raises to z-index 2.
   ========================================================================== */

.form-portal {
	--portal-u: calc(min(80vw, 62vh) / 2356);
	position: absolute;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	color: var(--color-heading);
}

/* The artwork is tall: on its side on landscape screens, so it stretches across
   them; upright on portrait ones (phones). */
.form-portal__turn {
	position: absolute;
	inset: 0;
}

@media (min-aspect-ratio: 1/1) {
	.form-portal__turn {
		rotate: 90deg;
	}
}

.form-portal__art {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(2905.86 * var(--portal-u));
	height: calc(6259.55 * var(--portal-u));
	translate: -50% -50%;
	opacity: 0;
	will-change: transform, opacity;
}

.form-portal__part {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: currentColor;
	will-change: transform;
}

/* each branch unfolds from its stem, the end nearest the sun */
.form-portal__part--branch-tl { transform-origin: 36.1% 31.2%; }
.form-portal__part--branch-tr { transform-origin: 63.9% 31.2%; }
.form-portal__part--branch-br { transform-origin: 63.9% 68.8%; }
.form-portal__part--branch-bl { transform-origin: 36.1% 68.8%; }

/* the puff of light as it closes */
.form-portal__poof {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(70vmin, 34rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(circle,
		color-mix(in oklab, var(--color-heading) 85%, transparent) 0%,
		color-mix(in oklab, var(--color-glow) 35%, transparent) 30%,
		transparent 70%);
	opacity: 0;
	will-change: transform, opacity;
}

/* the thank-you message that takes the form's place */
.form-sent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	min-height: 60vh;
	justify-content: center;
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	outline: 0;
}

.form-sent__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem);
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--color-heading);
}

.form-sent__text {
	white-space: pre-line; /* line breaks typed in Site Settings */
	margin: 0;
	max-width: 32rem;
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
	color: var(--color-text);
}

/* like the form's submit button */
.form-sent__button,
.form-sent__button:hover,
.form-sent__button:focus {
	margin-top: var(--space-md);
	padding: 0.875rem 2.5rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	text-decoration: none;
	color: var(--color-header-ink);
	background-color: var(--color-burgundy);
	border: 0.0625rem solid color-mix(in oklab, var(--color-cream) 50%, var(--color-burgundy));
	border-radius: 0.25rem;
	transition: background-color 0.5s ease;
}

.form-sent__button:hover,
.form-sent__button:focus-visible {
	background-color: color-mix(in oklab, var(--color-burgundy), var(--color-cream) 10%);
}


/* TESTING ONLY, remove before launch (with js/form-test-fill.js): the admins'
   "Fill test data" button */
.form-test-fill {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99989;
	padding: 0.5rem 0.875rem;
	font: 600 0.8125rem/1 system-ui, sans-serif;
	color: #fff;
	background: #1d6fd6;
	border: 0;
	border-radius: 0.375rem;
	box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.25);
	cursor: pointer;
}


/* page-end
   The end of every page but home (footer.php): links to the previous and next pages
   either side of "Book me" (below).
   On phones the two links share a row above her.
   ========================================================================== */

.page-end {
	--ring-size: min(36rem, 100cqw); /* .book-me's, here for the constellations too */
	container-type: inline-size; /* cqw in .book-me */
	position: relative;
	isolation: isolate; /* the constellations sit behind everything in it */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
}

/* constellations (includes/constellations.php): faint, behind, either side of her;
   js/animations.js lights the stars and draws the lines as they come into view */
.page-end__sky {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.constellations {
	width: calc((100% - var(--ring-size)) / 2);
	height: 100%;
	max-width: 30rem;
	color: var(--color-text);
	opacity: 0.45;
	overflow: visible;
}

.constellation__star {
	fill: currentColor;
}

.constellation__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-opacity: 0.55;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1; /* pathLength="1": drawn by animating stroke-dashoffset 1 to 0 */
}

/* phones: no room beside her */
@media (max-width: 47.9375rem) {
	.page-end__sky {
		display: none;
	}
}

.page-end > .book-me {
	grid-column: 2;
	grid-row: 1;
}

.page-nav {
	grid-row: 1;
	justify-self: center;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 var(--gutter) clamp(2.5rem, 7vw, 6rem);
	color: var(--color-cream);
	text-align: center;
	text-decoration: none;
}

.page-nav,
.page-nav:hover,
.page-nav:focus,
.page-nav:focus-visible {
	text-decoration: none; /* never underlined */
}

.page-nav--prev {
	grid-column: 1;
}

.page-nav--next {
	grid-column: 3;
}

.page-nav__dir {
	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.75;
}

.page-nav--prev .page-nav__dir::before {
	content: "\2190\00a0\00a0"; /* ← */
}

.page-nav--next .page-nav__dir::after {
	content: "\00a0\00a0\2192"; /* → */
}

.page-nav__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-nav:hover .page-nav__dir,
.page-nav:focus-visible .page-nav__dir {
	opacity: 1;
}

.page-nav--prev:hover .page-nav__title,
.page-nav--prev:focus-visible .page-nav__title {
	translate: -0.35rem 0;
}

.page-nav--next:hover .page-nav__title,
.page-nav--next:focus-visible .page-nav__title {
	translate: 0.35rem 0;
}

@media (max-width: 47.9375rem) {
	.page-end {
		grid-template-columns: 1fr 1fr;
		padding-top: var(--space-xl);
	}

	.page-nav {
		margin-bottom: var(--space-lg);
	}

	.page-nav--next {
		grid-column: 2;
	}

	.page-end > .book-me {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* book-banner
   "Ready to book?" in the bottom right corner, every page but home, Connection and
   Thank You (footer.php). Under the lightbox and the phone menu. js/animations.js
   adds .is-showing. */
.book-banner {
	box-sizing: border-box;
	display: grid;
	gap: 0.5rem;
	width: 16.5rem; /* room for "Weekend Rendezvous" */
	max-width: calc(100vw - 4rem);
	padding: 0.875rem;
	color: var(--color-text);
	background: var(--color-burgundy);
	border: 1px solid var(--color-text);
	border-radius: 0.75rem;
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
}

.book-banner.is-showing {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
	.book-banner {
		translate: 0 1.5rem;
		transition: opacity 0.7s ease-out, translate 0.7s ease-out, visibility 0.7s;
	}

	.book-banner.is-showing {
		translate: 0 0;
	}
}

.book-banner__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	line-height: 1.1;
	color: var(--color-heading);
}

.book-banner__row {
	display: flex;
	gap: 0.5rem;
}

.book-banner__select {
	flex: 1;
	width: 0; /* takes what Go leaves */
	height: 2.25rem;
	padding-inline: 0.5rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* as in the form */
	font-size: 0.875rem;
	font-weight: 300;
	color: var(--color-ink);
	background-color: var(--color-cream);
	border: 0;
	border-radius: 0;
}

/* 1rem on phones, or iPhones zoom in on it when tapped */
@media (max-width: 767px) {
	.book-banner {
		width: 17.5rem;
	}

	.book-banner__select {
		font-size: 1rem;
	}
}

.book-banner__go {
	display: flex;
	align-items: center;
	padding-inline: 0.875rem;
	font-family: var(--font-display);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	color: var(--color-header-ink);
	background-color: var(--color-burgundy-dark);
	border-radius: 9999px;
	transition: background-color 0.5s ease;
}

.book-banner__go:hover,
.book-banner__go:focus-visible {
	color: var(--color-header-ink);
	background-color: color-mix(in oklab, var(--color-burgundy-dark), var(--color-clay) 25%);
}

/* book-me
   Her pose in a ring of "Ready to book?"s, a star between each, turning slowly; just above
   the footer on every page but home (footer.php). On Connection she's alone, no ring
   and no link, in the same spot. The ring is an SVG (300 x 300,
   text on a circle of radius 105), turned as a whole so it isn't redrawn.
   She sits on the footer: her legs are 25.5% of the ring's size above the ring's
   bottom (the pose fills the middle 60%; her legs are 91% of the way down the image),
   so the ring is pulled down that far. The ring is cut off there, as if behind the
   footer, while she hangs over the footer's top edge, her hand holding on to it:
   the footer isn't positioned, so the content area (and her) paints over it.
   ========================================================================== */

.book-me {
	--ring-size: min(36rem, 100cqw); /* cqw: .page-end's width, so the ring fits on phones */
	display: flex;
	justify-content: center;
	padding: var(--space-xl) 1rem 0;
}

/* Sunrise: a soft half-circle of cream glow rising from the footer behind her, 75%
   of the page wide (of .page-end, which it's placed in) and about as tall as she is. Several stops so it fades evenly. */
.book-me::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	bottom: 0;
	height: calc(var(--ring-size) * 0.62);
	pointer-events: none;
	background: radial-gradient(ellipse 50% 100% at 50% 100%,
		color-mix(in oklab, var(--color-glow) 50%, transparent) 0%,
		color-mix(in oklab, var(--color-glow) 36%, transparent) 25%,
		color-mix(in oklab, var(--color-glow) 20%, transparent) 50%,
		color-mix(in oklab, var(--color-glow) 8%, transparent) 75%,
		transparent 100%);
}

.book-me__link {
	position: relative;
	display: block;
	width: var(--ring-size);
	aspect-ratio: 1;
	margin-bottom: calc(var(--ring-size) * -0.255);
	color: var(--color-cream);
	text-decoration: none;
}

/* The ring's frame ends at the footer's top edge and cuts it off there. It doesn't
   turn; the ring inside it does. */
.book-me__ring-clip {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 74.5%;
	overflow: hidden;
}

.book-me__ring {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.book-me__ring {
		animation: art-spin 40s linear infinite;
		will-change: rotate;
	}
}

.book-me__text {
	font-family: var(--font-display);
	font-size: 1.625rem; /* in the SVG's units: 26 of its 300 */
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* the pose fills the inside of the ring */
.book-me__pose {
	position: absolute;
	inset: 20%;
	translate: 0 10px; /* sitting down on the footer, not just above it */
	background: transparent url(../img/mila-footer-pose.png) no-repeat center bottom / contain;
	transform-origin: center bottom; /* grows up from the footer on hover */
	transition: scale 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

a.book-me__link:hover .book-me__pose,
a.book-me__link:focus-visible .book-me__pose {
	scale: 1.05;
}


/* site-footer
   ========================================================================== */

/* Not positioned, so the "book-me" pose above can hang over its top edge. */
.site-footer {
	padding: 3.5rem 0 2rem; /* room at the top for her hand (book-me) */
	text-align: center;
	color: var(--color-cream);
	font-size: var(--text-sm);
	background: var(--color-burgundy) var(--paper-texture) repeat 0 0 / var(--paper-size);
	background-blend-mode: multiply;
}

.site--landing .site-footer {
	display: none;
}

/* copyright | logo | credit: the outer columns are equal, so the logo is centred */
.site-footer__meta {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "copyright logo credit";
	align-items: center;
	gap: var(--space-md);
	margin: 0 auto;
	max-width: var(--column-wide);
}

.site-footer__copyright {
	grid-area: copyright;
	justify-self: start;
	text-align: left;
}

.site-footer__credit {
	grid-area: credit;
	justify-self: end;
	text-align: right;
}

.site-footer__logo {
	grid-area: logo;
	display: block;
	height: 6.5rem;
	aspect-ratio: 4.379 / 3.109;
}

.site-footer__logo svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--color-cream);
}

.site-footer__link,
.site-footer__link:hover,
.site-footer__link:focus {
	text-decoration: underline;
	color: var(--color-cream);
}

.site-footer__instagram {
	font-size: var(--text-4xl);
	text-align: center;
	margin-bottom: var(--space-sm);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking);
}

.site-footer__instagram-link,
.site-footer__instagram-link:focus {
	color: var(--color-cream);
	text-decoration: none;
}

.site-footer__instagram-link:hover {
	color: var(--color-cream);
	text-decoration: underline;
}

.site-footer__instagram-icon {
	margin-left: 0.3125rem;
	display: inline-block;
	vertical-align: middle;
	width: 3.0625rem;
	height: 3.0625rem;
	background: transparent url(../img/instagram-logo.png) no-repeat 0 0;
}


/* mobile
   ========================================================================== */

@media only screen and (max-width: 47.9375rem) {

	.landing__logo svg {
		fill: var(--color-heading);
	}

	/* the band above the curve stays 7.5rem; 8.7113vw is the curve's rise */
	.site__container {
		--header-height: calc(7.5rem + 8.7113vw);
	}

	/* full-size links in the open menu; over everything but the page transition */
	.site-header {
		--nav-size: var(--text-2xl);
		z-index: 99990;
	}

	/* above the menu, so she stays on while it's open */
	.site-header__logo {
		height: 5.25rem;
		z-index: 100000;
	}

	/* the page stays put behind the open menu, and the X with it */
	.menu-open {
		overflow: hidden;
	}

	/* The menu waits above the screen and slides down over all of it, the links
	   centred (safe: a short screen scrolls from the top rather than cutting them off). */
	.site-nav {
		display: flex;
		flex-direction: column;
		justify-content: safe center;
		align-items: stretch;
		position: fixed;
		top: 0;
		left: 0;
		background: var(--color-clay) var(--menu-texture) repeat 0 0;
		z-index: 99999;
		width: 100%;
		height: 100dvh;
		padding-block: 7.5rem; /* on a short screen the links scroll out from under the logo */
		overflow-y: auto;
		visibility: hidden;
		translate: 0 -100%;
	}

	.site-nav--open {
		visibility: visible;
		translate: 0 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		.site-nav {
			transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.9s;
		}

		.site-nav--open {
			transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
		}
	}

	/* the two lists stack full width in the open menu */
	.site-nav__list--left,
	.site-nav__list--right {
		justify-self: stretch;
	}

	.site-nav__item,
	.site-nav__item--logo-gap {
		display: block;
		text-align: center;
		margin: 0;
		padding: 0;
		border-bottom: var(--rule-dotted);
	}

	.site-nav__list--left .site-nav__item:first-child {
		border-top: var(--rule-dotted);
	}

	/* in the space under the link, above the divider */
	.site-nav__item--current::after {
		top: auto;
		bottom: 0.25em;
	}

	/* The links blur and fade in one after another as the menu reaches the bottom of
	   the screen (--nav-i: js/utilities.js), and are quickly gone when it closes. */
	@media (prefers-reduced-motion: no-preference) {
		.site-nav__item {
			opacity: 0;
			filter: blur(0.75rem);
			transition: opacity 0.25s, filter 0.25s;
		}

		.site-nav--open .site-nav__item {
			opacity: 1;
			filter: none;
			transition: opacity 0.8s ease-out, filter 0.8s ease-out;
			transition-delay: calc(0.4s + var(--nav-i, 0) * 0.14s);
		}
	}

	.site-nav__link,
	.site-nav__link:hover,
	.site-nav__link:focus {
		display: block;
		padding: var(--space-lg) 0;
		color: var(--color-cream);
	}

	/* level with the logo, and above the menu so it stays put when that opens */
	.menu-toggle {
		grid-area: 1 / 1;
		justify-self: end;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.3rem;
		width: 1.5625rem;
		height: 1.875rem;
		margin-right: calc(var(--space-lg) + .5rem);
		position: relative;
		z-index: 100000;
		color: var(--color-header-ink);
		cursor: pointer;
	}

	.menu-toggle__bar {
		flex: 0 0 auto;
		width: 100%;
		height: 0.1555rem;
		background-color: var(--color-header-ink);
	}

	/* open, it's an X: the outer bars meet at the middle one (one bar and one gap away) and turn */
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
		translate: 0 0.4555rem;
		rotate: 45deg;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
		translate: 0 -0.4555rem;
		rotate: -45deg;
	}

	@media (prefers-reduced-motion: no-preference) {
		.menu-toggle__bar {
			transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
		}
	}

	/* Rates: two cards a row, the fifth centred on its own. Each card is sized by its
	   shape and everything in it by its width, so the frame stays in proportion and the
	   cards stay the same height. */
	.rates-table tbody {
		flex-wrap: wrap;
		justify-content: center;
	}

	.rates-table tr {
		flex: 0 0 50%;
		aspect-ratio: 1 / 2.13;
		padding-block: 0;
		justify-content: center;
		/* The whole photo across each row: as tall as the card's pill (213cqw less 15.8cqw
		   twice), so 258cqw wide at 1200 x 843; 29cqw of that left of the two cards.
		   Down all three rows it would be too big to make out. */
		--rate-col: 0;
		--photo-size: auto 181.4cqw;
		--photo-x: calc(-1 * (var(--rate-col) * 100cqw + 5.8cqw + 29cqw));
	}

	.rates-table tr:nth-child(even) { --rate-col: 1; }
	.rates-table tr:nth-child(5) { --rate-col: 0.5; }

	.rates-table tr th,
	.rates-table tr td {
		padding-top: 6cqw !important;
		gap: 6cqw;
		font-size: 13cqw;
	}

	.rates-table tr th::after,
	.rates-table tr td::after {
		height: 12cqw;
	}

	.gallery__row {
		flex-wrap: wrap;
	}

	.offering__scroll-alert {
		display: block;
		margin: 0;
		font-family: var(--font-ui);
		letter-spacing: var(--tracking);
		font-size: var(--text-xs);
		text-align: center;
		text-transform: uppercase;
	}

	.offering__table {
		position: relative;
		box-shadow: var(--shadow-inset);
		overflow-y: hidden;
	}

	.offering__table {
		margin-bottom: var(--space-sm);
		padding: 2.5rem var(--space-xs);
		border: 0.0625rem solid var(--color-sand);
	}

	.offering__table th,
	.offering__table td {
		padding: 0.5rem var(--space-md);
	}

	.offering__table th,
	.offering__table td,
	table th,
	table td {
		white-space: nowrap;
	}

	.round-photo {
		width: 23.75rem;
		max-width: 100%;
		margin-inline: auto;
	}

	.round-photo img {
		opacity: 1;
		width: 23.75rem;
		height: 23.75rem;
	}

	.site-footer__instagram {
		margin-bottom: var(--space-xl);
	}

	.site-footer__credit {
		display: block;
	}

	/* phones: the logo on top, copyright and credit side by side under it */
	.site-footer__meta {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"logo logo"
			"copyright credit";
	}

	.site-footer__logo {
		justify-self: center;
	}
}


/* font sizes (Gutenberg: Block > Advanced > Additional CSS class(es), e.g. "text-lg")
   One class per size token in base.css (the same sizes as the editor's Typography >
   Size picker). Last in the file so they win over a component's own size.
   ========================================================================== */

.text-xs   { font-size: var(--text-xs); }    /* 12 */
.text-sm   { font-size: var(--text-sm); }    /* 14 */
.text-md   { font-size: var(--text-md); }    /* 16 */
.text-copy { font-size: var(--text-copy); }  /* 17 */
.text-input { font-size: var(--text-input); } /* 18 */
.text-base { font-size: var(--text-base); }  /* 18 to 20 */
.text-lg   { font-size: var(--text-lg); }    /* 20 to 24 */
.text-h2   { font-size: var(--text-h2); }    /* 24 to 30 */
.text-xl   { font-size: var(--text-xl); }    /* 26 to 32 */
.text-2xl  { font-size: var(--text-2xl); }   /* 34 to 48 */
.text-3xl  { font-size: var(--text-3xl); }   /* 36 to 52 */
.text-4xl  { font-size: var(--text-4xl); }   /* 38 to 54 */
.text-5xl  { font-size: var(--text-5xl); }   /* 46 to 72 */


/* line heights (Block > Advanced > Additional CSS class(es), e.g. "leading-relaxed")
   One class per line-height token in base.css. Combine with a size: "text-lg leading-snug".
   ========================================================================== */

.leading-tight   { line-height: var(--leading-tight); }   /* 1.1: big display lines */
.leading-snug    { line-height: var(--leading-snug); }    /* 1.3: large intro text */
.leading-normal  { line-height: var(--leading-normal); }  /* 1.5: body copy */
.leading-relaxed { line-height: var(--leading-relaxed); } /* 1.75 */
.leading-loose   { line-height: var(--leading-loose); }   /* 2 */


/* photo frame: img/frame-1.svg around every image block in the content, except the
   round photos (Visuals gallery, Offerings). A border-image, so the corners keep their
   shape at any size and only the straight lines stretch. The SVG is 3000 units wide;
   its corner pieces fit in the outer 80 units, and its innermost line ends about 45 units in,
   so the photo starts just inside it (46 / 80 of the frame's depth) and the rest of the corner
   ornament overlaps it.
   ========================================================================== */

.content__body .wp-block-image:not(.gallery__item, .offerings__photo,.mystical-journey-icon) img {
	box-sizing: border-box;
	border-style: solid;
	border-width: var(--photo-frame-edge);
	border-image: var(--photo-frame) 80 / var(--photo-frame-size) stretch;
}

.mystical-journey-icon {
	position: relative;
}

.mystical-journey-icon::after {
	content: "";
	aspect-ratio: 1 / 1;
	position: absolute;
	width: 33%;
	background: transparent url(/wp-content/uploads/2026/11/md-avatar-2.jpg) no-repeat 0 0;
	border-radius: 9999px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	background-size: cover;
	border:4px solid var(--color-burgundy);
	opacity: var(--avatar-opacity, 1); /* js/animations.js fades her in */
}