/*
 * Home — the purple screen with the white writing.
 *
 * Her brief: simplicity, restraint, the font doing the work, and the room
 * between the words. Esmeralda is the calm one.
 *
 * So there is one thought per screen, a hairline holding the page in from the
 * edge, and a great deal of air. Nothing is decorated. Everything is placed.
 */

.quiet,
.doors,
.closing {
	background: var(--logo-purple);
	color: var(--white);
}

.scene { background: var(--logo-purple); }

/* ── One thought, one screen ─────────────────────────────────────────────── */

.scene {
	position: relative;
	/*
	 * Never a whole viewport of height.
	 *
	 * Her pane is roughly 379 by 1,400, so 100svh becomes a fourteen-hundred
	 * pixel band with a few words adrift in it. Held to a proportion with a
	 * ceiling, so the window she opens it in stops mattering.
	 */
	min-height: clamp(460px, 74svh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(30px, 6vh, 64px) clamp(22px, 7vw, 90px);
}

.scene__in {
	width: 100%;
	max-width: 44rem;
	text-align: center;
}

.over {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(0.832rem, 2.99vw, 0.888rem);
	letter-spacing: .42em;
	text-indent: .42em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0 0 clamp(2.4rem, 8vh, 4.6rem);
}

.name {
	/* Her own logo, from her ecosystem branding folder. */
	display: block;
	width: min(88%, 640px);
	height: auto;
	margin: 0 auto;
}

.claim {
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(1.5rem, 7vw, 3.6rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.32;
	margin: 0;
}

.under {
	font-family: var(--font-warm);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.176rem, 4.7vw, 1.5rem);
	line-height: 1.5;
	color: var(--lilac);
	max-width: 26ch;
	margin: clamp(2.2rem, 7vh, 3.6rem) auto 0;
}

/* ── The two doors ───────────────────────────────────────────────────────── */

.doors {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 880px) {
	.doors { grid-template-columns: 1fr 1fr; }
}

.door {
	position: relative;
	background: var(--door-ground);
	transition: background .18s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 0;
	padding: clamp(2.8rem, 7vh, 4rem) clamp(24px, 7vw, 4rem);
	color: var(--white);
	border-bottom: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 880px) {
	.door + .door { border-left: 1px solid rgba(222, 208, 242, .22); }
}

.door__over {
	font-family: var(--font-head);
	font-size: clamp(0.806rem, 2.86vw, 0.84rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
}

/*
 * The two voices, and the whole difference between them.
 *
 * The professional side is disciplined caps with the letters held apart. Hers
 * is the warm italic. Same ground, same colour, and nobody could mistake one
 * for the other.
 */
.door--pro { --door-ground: #3A0066; --door-lit: #571098; }
.door--her { --door-ground: #59119B; --door-lit: #7222C4; }

.door:hover,
.door:focus-visible { background: var(--door-lit); }

.door--pro .door__say {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: clamp(1.4rem, 5.6vw, 1.9rem);
	line-height: 1.5;
	margin-top: clamp(1.8rem, 5vh, 2.6rem);
}

.door--her .door__say {
	font-family: var(--font-warm);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.7rem, 7vw, 2.8rem);
	line-height: 1.28;
	margin-top: clamp(1.6rem, 4.6vh, 2.4rem);
}

.door__logo {
	display: block;
	width: min(78%, 290px);
	height: auto;
	margin: clamp(1.4rem, 4vh, 2rem) auto 0;
}

.door__go {
	font-family: var(--font-head);
	font-size: clamp(0.806rem, 2.86vw, 0.884rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	margin-top: clamp(2.2rem, 6vh, 3.2rem);
	padding: 10px 18px;
	border-bottom: 1px solid rgba(222, 208, 242, .4);
	transition: border-color .16s ease, color .16s ease, letter-spacing .16s ease, background .16s ease;
}

.door:hover .door__go,
.door:focus-visible .door__go {
	color: var(--purple-deep);
	background: var(--white);
	border-color: var(--white);
	letter-spacing: .38em;
	text-indent: .38em;
}

@media (prefers-reduced-motion: reduce) {
	.door__go { transition: none; }
	.door:hover .door__go { letter-spacing: .34em; text-indent: .34em; }
}

/* ── The last word ───────────────────────────────────────────────────────── */

.closing {
	text-align: center;
	padding: clamp(4.5rem, 14vh, 9rem) clamp(24px, 7vw, 4rem);
}

.closing__line {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .18em;
	text-indent: .18em;
	font-size: clamp(1.128rem, 4.56vw, 1.4rem);
	line-height: 1.9;
	color: var(--lilac);
	margin: 0;
}

/* The chrome stays out of the way of a quiet page. */


.home .site-footer {
	background: var(--logo-purple);
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.home .footer__mark { color: var(--white); }
.home .footer__tag,
.home .footer__copy { color: rgba(255, 255, 255, .6); }
.home .footer__links a { color: var(--lilac); }

/*
 * Once the entrance has finished, the words stay.
 *
 * The parent hides them with a class on the root that never comes off, so
 * without this the whole page reads as an empty purple rectangle the moment
 * the sequence ends. Found on the build site rather than reported.
 */
.quiet.is-settled [data-rise],
.no-js .quiet [data-rise] { opacity: 1 !important; }

/* Wide letterspacing pushes a line past its own box, so the page is held in. */
.scene,
.quiet,
.doors,
.closing { overflow-x: hidden; }

body { overflow-x: hidden; }

/* ── The strip ───────────────────────────────────────────────────────────
 *
 * Four across on a computer. Three when there is less room, and two on a
 * phone, because four slivers on a narrow screen reduce every face to
 * nothing. Square, so no head is ever cropped by a shallow band.
 * ───────────────────────────────────────────────────────────────────────── */

.four {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
	background: var(--logo-purple);
	padding: 3px 0;
}

@media (min-width: 620px) { .four { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .four { grid-template-columns: repeat(4, 1fr); } }

.four img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 40%;
}

/* ── Why she is the one ──────────────────────────────────────────────────── */

.hold,
.give {
	background: var(--logo-purple);
	color: var(--white);
	text-align: center;
	padding: clamp(4rem, 12vh, 7rem) clamp(24px, 7vw, 4rem);
}

.hold__eyebrow,
.give__eyebrow {
	font-family: var(--font-head);
	font-size: clamp(0.806rem, 2.86vw, 0.84rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.hold__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .12em;
	text-indent: .12em;
	font-size: clamp(2rem, 9vw, 3.6rem);
	line-height: 1.1;
	margin: .5em 0 0;
}

.hold__body,
.give__body {
	font-family: var(--font-util);
	font-size: clamp(1.152rem, 4.32vw, 1.176rem);
	line-height: 1.85;
	color: rgba(255, 255, 255, .82);
	max-width: 46ch;
	margin: 1.6em auto 0;
}

.give__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .3em;
	text-indent: .3em;
	font-size: clamp(1.8rem, 8vw, 3rem);
	margin: .5em 0 0;
}

.give__go {
	display: inline-block;
	margin-top: clamp(2rem, 6vh, 3rem);
	font-family: var(--font-head);
	font-size: clamp(0.806rem, 2.86vw, 0.884rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	border: 1px solid rgba(222, 208, 242, .4);
	padding: 12px 20px;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.give__go:hover,
.give__go:focus-visible {
	background: var(--white);
	color: var(--logo-purple);
	border-color: var(--white);
}

.give { border-top: 1px solid rgba(222, 208, 242, .22); }

/* ── The professional side ───────────────────────────────────────────────── */

.lead,
.steps,
.price,
.ask {
	background: var(--logo-purple);
	color: var(--white);
}

.lead {
	text-align: center;
	padding: clamp(3.4rem, 10vh, 5.5rem) clamp(24px, 7vw, 4rem) clamp(2.8rem, 8vh, 4rem);
}

.lead__over,
.price__over,
.ask__over {
	font-family: var(--font-head);
	font-size: clamp(0.806rem, 2.86vw, 0.864rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.lead__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: clamp(1.7rem, 7.4vw, 3.6rem);
	line-height: 1.34;
	margin: .7em 0 0;
}

.lead__under {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.176rem, 4.7vw, 1.5rem);
	line-height: 1.5;
	color: var(--lilac);
	max-width: 28ch;
	margin: 1.4em auto 0;
}

/* The three steps */

.steps {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
	padding: clamp(2.8rem, 8vh, 4.5rem) clamp(24px, 6vw, 3rem);
	text-align: center;
	border-bottom: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 900px) { .row + .step { border-left: 1px solid rgba(222, 208, 242, .22); } }

.step__n {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.4rem, 5vw, 1.8rem);
	color: var(--lilac);
	margin: 0;
}

.step__head {
	font-family: var(--font-head);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .13em;
	font-size: clamp(1.08rem, 4.08vw, 1.12rem);
	line-height: 1.5;
	margin: 1.2em 0 0;
}

.step__body {
	font-family: var(--font-util);
	font-size: clamp(1.08rem, 4.08vw, 1.152rem);
	line-height: 1.8;
	color: rgba(255, 255, 255, .78);
	margin: 1em 0 0;
}

/* The price */

.price {
	text-align: center;
	padding: clamp(4rem, 12vh, 7rem) clamp(24px, 7vw, 4rem);
}

.price__figure {
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(3.4rem, 16vw, 7rem);
	line-height: 1;
	margin: .35em 0 0;
}

.price__note {
	font-family: var(--font-head);
	font-size: clamp(0.858rem, 3.12vw, 0.888rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 1.2em 0 0;
}

.price__packs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	max-width: 34rem;
	margin: clamp(2.6rem, 8vh, 3.6rem) auto 0;
}

@media (min-width: 700px) { .price__packs { grid-template-columns: repeat(2, 1fr); } }

.price__packs span {
	font-family: var(--font-util);
	font-size: clamp(1.032rem, 3.84vw, 1.128rem);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .84);
	border: 1px solid rgba(222, 208, 242, .26);
	padding: 14px 10px;
}

.price__packs b { font-weight: 600; }

.price__small {
	font-family: var(--font-util);
	font-size: clamp(0.936rem, 3.6vw, 1.008rem);
	color: rgba(255, 255, 255, .6);
	margin: 2em auto 0;
}

/* The founding offer */

.ask {
	text-align: center;
	padding: clamp(4rem, 12vh, 7rem) clamp(24px, 7vw, 4rem);
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.ask__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: clamp(1.4rem, 6vw, 2.4rem);
	line-height: 1.5;
	margin: .6em 0 0;
}

.ask__go {
	display: inline-block;
	margin-top: clamp(2.2rem, 6vh, 3rem);
	font-family: var(--font-head);
	font-size: clamp(0.806rem, 2.86vw, 0.884rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--logo-purple);
	background: var(--white);
	padding: 15px 26px;
	transition: background .16s ease, color .16s ease;
}

.ask__go:hover,
.ask__go:focus-visible { background: var(--lilac); }


/* ── Arrival ─────────────────────────────────────────────────────────────
 *
 * The script sets opacity and transform inline, so no cascade anywhere can
 * leave a block invisible. This file supplies the movement alone.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * The arrival's transition, and it deliberately does not name .four__rail.
 * The rail carries the travelling animation; a transition on transform there
 * fights the keyframes and the pictures stand still while reporting motion.
 */
.esm-rise .rise,
.esm-rise .four.rise img {
	transition: opacity 1.05s cubic-bezier(.16,.72,.28,1), transform 1.15s cubic-bezier(.16,.72,.28,1);
}

.esm-rise .four__rail { transition: none; }

@media (prefers-reduced-motion: reduce) {
	.esm-rise .rise,
	.esm-rise .four.rise img { transition: none; }
}

/* ── Her two searches ────────────────────────────────────────────────────── */

.two {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--logo-purple);
	border-top: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 880px) { .two { grid-template-columns: 1fr 1fr; } }

.seek {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* The panel is sized by what is in it. A fixed height left 235 pixels of
	   nothing under three lines of type. */
	min-height: 0;
	padding: clamp(2.6rem, 6vh, 3.4rem) clamp(24px, 5vw, 2.6rem);
	color: var(--white);
	border-bottom: 1px solid rgba(222, 208, 242, .22);
	background: var(--seek-ground);
	transition: background .16s ease;
}

@media (min-width: 880px) { .seek + .seek { border-left: 1px solid rgba(222, 208, 242, .22); } }

.seek--home { --seek-ground: #3A0066; --seek-lit: #571098; }
.seek--her  { --seek-ground: #59119B; --seek-lit: #7222C4; }

.seek:hover, .seek:focus-visible { background: var(--seek-lit); }

.seek__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
}

.seek--home .seek__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: clamp(1.3rem, 5.4vw, 2rem);
	margin-top: 1em;
}

.seek--her .seek__head {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.7rem, 7vw, 2.5rem);
	margin-top: .7em;
}

.seek__say {
	font-family: var(--font-util);
	font-size: clamp(1.08rem, 4.08vw, 1.152rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .8);
	max-width: 30ch;
	margin-top: 1.2em;
}

.seek__go {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	border-bottom: 1px solid rgba(222, 208, 242, .45);
	padding: 10px 16px;
	margin-top: clamp(1.8rem, 5vh, 2.4rem);
	transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.seek:hover .seek__go { color: var(--logo-purple); background: var(--white); border-color: var(--white); }

/* ── The question in the doorway ─────────────────────────────────────────── */

.doorway {
	background: var(--logo-purple);
	text-align: center;
	padding: clamp(3rem, 8vh, 4.5rem) clamp(24px, 7vw, 4rem);
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.doorway__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.doorway__card {
	display: block;
	max-width: 42rem;
	margin: clamp(2rem, 6vh, 3rem) auto 0;
	padding: clamp(2.4rem, 8vw, 3.6rem) clamp(1.6rem, 6vw, 3rem);
	border: 1px solid rgba(222, 208, 242, .3);
	color: var(--white);
	transition: border-color .16s ease, background .16s ease;
}

.doorway__card:hover,
.doorway__card:focus-visible { border-color: rgba(222, 208, 242, .7); background: rgba(255, 255, 255, .04); }

.doorway__ask {
	display: block;
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.5rem, 6.4vw, 2.4rem);
	line-height: 1.3;
}

.doorway__go {
	display: inline-block;
	margin-top: clamp(1.6rem, 5vh, 2.2rem);
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
}

.doorway__note {
	font-family: var(--font-util);
	font-size: clamp(1.008rem, 3.84vw, 1.08rem);
	line-height: 1.8;
	color: rgba(255, 255, 255, .68);
	max-width: 44ch;
	margin: clamp(2rem, 6vh, 2.8rem) auto 0;
}

/* ── Always free ─────────────────────────────────────────────────────────── */

.free {
	background: var(--logo-purple);
	color: var(--white);
	text-align: center;
	padding: clamp(3.5rem, 10vh, 5.5rem) clamp(24px, 7vw, 4rem);
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.free__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .24em;
	text-indent: .24em;
	font-size: clamp(1.232rem, 5.15vw, 1.7rem);
	margin: 0;
}

.free__body {
	font-family: var(--font-util);
	font-size: clamp(1.08rem, 4.08vw, 1.176rem);
	line-height: 1.85;
	color: rgba(255, 255, 255, .78);
	max-width: 46ch;
	margin: 1.4em auto 0;
}

/* ── A search ────────────────────────────────────────────────────────────── */

.find {
	background: var(--logo-purple);
	border-top: 1px solid rgba(222, 208, 242, .22);
	padding: clamp(2rem, 6vh, 3rem) clamp(24px, 7vw, 4rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 46rem;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 700px) { .find { grid-template-columns: 1fr auto; align-items: end; } }

.find__label {
	grid-column: 1 / -1;
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
}

.find__where {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.232rem, 5.15vw, 1.5rem);
	color: var(--white);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(222, 208, 242, .45);
	padding: 12px 2px;
	width: 100%;
}

.find__where::placeholder { color: rgba(255, 255, 255, .45); }
.find__where:focus { outline: 0; border-bottom-color: var(--white); }

.find__go {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--logo-purple);
	background: var(--white);
	border: 0;
	padding: 15px 26px;
	cursor: pointer;
	transition: background .16s ease;
}

.find__go:hover { background: var(--lilac); }

/* An empty search, written with warmth. */

.none {
	background: var(--logo-purple);
	color: var(--white);
	text-align: center;
	padding: clamp(4rem, 12vh, 7rem) clamp(24px, 7vw, 4rem);
}

.none__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0 0 1.4em;
}

.none__head {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.6rem, 7vw, 2.8rem);
	line-height: 1.3;
	margin: 0;
}

.none__body {
	font-family: var(--font-util);
	font-size: clamp(1.104rem, 4.2vw, 1.12rem);
	line-height: 1.85;
	color: rgba(255, 255, 255, .78);
	max-width: 42ch;
	margin: 1.5em auto 0;
}

.none__go {
	display: inline-block;
	margin-top: clamp(2rem, 6vh, 2.8rem);
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	border: 1px solid rgba(222, 208, 242, .4);
	padding: 14px 22px;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.none__go:hover,
.none__go:focus-visible { background: var(--white); color: var(--logo-purple); border-color: var(--white); }

/* ── A profile, shown ────────────────────────────────────────────────────── */

.drawing {
	background: #2A0050;
	color: var(--lilac);
	text-align: center;
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.88vw, 0.858rem);
	letter-spacing: .26em;
	text-indent: .26em;
	text-transform: uppercase;
	margin: 0;
	padding: 14px 18px;
}

.her,
.says,
.days,
.mine,
.room { background: var(--logo-purple); color: var(--white); }

.her {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 0;
}

@media (min-width: 860px) { .her { grid-template-columns: 1fr 1fr; } }

.her__pic { margin: 0; line-height: 0; }

.her__pic img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 34%;
}

.her__say {
	padding: clamp(3rem, 9vh, 5rem) clamp(24px, 6vw, 3.5rem);
	text-align: center;
}

@media (min-width: 860px) { .her__say { text-align: left; } }

.her__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.her__name {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(2.6rem, 12vw, 4.6rem);
	line-height: 1;
	margin: .3em 0 0;
}

.her__where {
	font-family: var(--font-head);
	font-size: clamp(0.84rem, 3.36vw, 0.984rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 1em 0 0;
}

.her__line {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.232rem, 4.93vw, 1.5rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
	max-width: 26ch;
	margin: 1.5em auto 0;
}

@media (min-width: 860px) { .her__line { margin-left: 0; } }

/* Her answers, given back */

.says {
	padding: clamp(3.5rem, 10vh, 6rem) clamp(24px, 6vw, 4rem);
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.says__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	text-align: center;
	margin: 0 0 clamp(2.4rem, 7vh, 3.4rem);
}

.says__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	max-width: 62rem;
	margin-inline: auto;
	background: rgba(222, 208, 242, .22);
	border: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 780px) { .says__grid { grid-template-columns: 1fr 1fr; } }

.said {
	background: var(--logo-purple);
	padding: clamp(1.8rem, 5vw, 2.6rem);
}

.said__ask {
	font-family: var(--font-head);
	font-size: clamp(0.858rem, 3.25vw, 0.864rem);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.said__gave {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.288rem, 4.93vw, 1.4rem);
	line-height: 1.55;
	margin: 1em 0 0;
}

/* Her days */

.days {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid rgba(222, 208, 242, .22);
}

@media (min-width: 900px) { .days { grid-template-columns: repeat(3, 1fr); } }

.days__col {
	padding: clamp(2.6rem, 8vh, 4rem) clamp(24px, 5vw, 2.6rem);
	border-bottom: 1px solid rgba(222, 208, 242, .22);
	text-align: center;
}

@media (min-width: 900px) { .days__col + .days__col { border-left: 1px solid rgba(222, 208, 242, .22); } }

.days__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .32em;
	text-indent: .32em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0 0 1.4em;
}

.days__body {
	font-family: var(--font-util);
	font-size: clamp(1.104rem, 4.08vw, 1.176rem);
	line-height: 1.85;
	color: rgba(255, 255, 255, .82);
	margin: 0;
}

.days__list { list-style: none; margin: 0; padding: 0; }

.days__list li {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.176rem, 4.48vw, 1.344rem);
	line-height: 2.1;
	color: rgba(255, 255, 255, .92);
}

/* What she shows */

.mine {
	padding: clamp(3.5rem, 10vh, 6rem) clamp(24px, 6vw, 4rem);
	text-align: center;
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.mine__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.mine__head {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.5rem, 6.4vw, 2.4rem);
	margin: .5em 0 0;
}

.mine__rows {
	max-width: 34rem;
	margin: clamp(2.2rem, 7vh, 3rem) auto 0;
	text-align: left;
}

.mine__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--font-util);
	font-size: clamp(1.08rem, 4.08vw, 1.176rem);
	padding: 15px 0;
	border-bottom: 1px solid rgba(222, 208, 242, .2);
	margin: 0;
}

.mine__row b { font-weight: 400; color: rgba(255, 255, 255, .92); }

.mine__row span {
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.88vw, 0.832rem);
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 7px 12px;
	white-space: nowrap;
}

.mine__row .on { background: var(--white); color: var(--logo-purple); }
.mine__row .off { border: 1px solid rgba(222, 208, 242, .45); color: var(--lilac); }

.mine__note {
	font-family: var(--font-util);
	font-size: clamp(1.008rem, 3.84vw, 1.08rem);
	line-height: 1.8;
	color: rgba(255, 255, 255, .68);
	max-width: 44ch;
	margin: 2em auto 0;
}

/* Her own room */

.room {
	padding: clamp(3.5rem, 10vh, 6rem) clamp(24px, 6vw, 4rem) clamp(4rem, 12vh, 7rem);
	text-align: center;
	border-top: 1px solid rgba(222, 208, 242, .22);
}

.room__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.room__head {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.5rem, 6.4vw, 2.4rem);
	margin: .5em 0 0;
}

.room__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	max-width: 62rem;
	margin: clamp(2.4rem, 7vh, 3.4rem) auto 0;
}

@media (min-width: 860px) { .room__grid { grid-template-columns: repeat(3, 1fr); } }

.card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: clamp(190px, 26vw, 240px);
	padding: clamp(1.8rem, 5vw, 2.4rem);
	color: var(--white);
	border: 1px solid rgba(222, 208, 242, .3);
	transition: border-color .16s ease, background .16s ease;
}

.card:hover, .card:focus-visible { border-color: rgba(222, 208, 242, .75); background: rgba(255, 255, 255, .05); }

.card__n {
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(2rem, 8vw, 2.8rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.card__say {
	font-family: var(--font-util);
	font-size: clamp(1.056rem, 3.96vw, 1.128rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .8);
	margin-top: .9em;
	max-width: 22ch;
}

.card__ask {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.232rem, 4.93vw, 1.35rem);
	line-height: 1.45;
	max-width: 22ch;
}

.card__go {
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.88vw, 0.832rem);
	letter-spacing: .32em;
	text-indent: .32em;
	text-transform: uppercase;
	color: var(--lilac);
	margin-top: 1.6em;
	border-bottom: 1px solid rgba(222, 208, 242, .45);
	padding-bottom: 6px;
}

.room__note {
	font-family: var(--font-util);
	font-size: clamp(1.008rem, 3.84vw, 1.08rem);
	line-height: 1.8;
	color: rgba(255, 255, 255, .66);
	max-width: 46ch;
	margin: clamp(2.2rem, 6vh, 3rem) auto 0;
}


/* ── The parent's full-height entrance, capped here rather than there ─────
 *
 * The shared parent sets an outright height of 100svh on .js-entrance
 * .entrance, written onto the html element by script at runtime. An outright
 * height ignores a min-height cap, so both height and max-height are set.
 * The parent belongs to all forty and stays hers to rule on.
 * ───────────────────────────────────────────────────────────────────────── */

.js-entrance .quiet.entrance,
.js-entrance .entrance {
	height: clamp(460px, 74svh, 720px);
	max-height: 720px;
}

.js-entrance .entrance .hero,
.js-entrance .entrance .scene {
	min-height: clamp(460px, 74svh, 720px);
	max-height: 720px;
}

/* ── Every other page ────────────────────────────────────────────────────── */

.lead--warm .lead__head {
	font-family: var(--font-warm);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(2.2rem, 10vw, 4rem);
	line-height: 1.15;
}

.prose {
	background: var(--logo-purple);
	color: var(--white);
	padding: clamp(3rem, 9vh, 5.5rem) clamp(24px, 7vw, 4rem);
}

.prose > * { max-width: 42rem; margin-inline: auto; }

.prose p {
	font-family: var(--font-util);
	font-size: clamp(1.152rem, 4.32vw, 1.176rem);
	line-height: 1.95;
	color: rgba(255, 255, 255, .84);
	margin: 0 0 1.5em;
}

.prose h2 {
	font-family: var(--font-head);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: clamp(1.08rem, 4.32vw, 1.176rem);
	line-height: 1.6;
	color: var(--lilac);
	margin: 2.6em auto 1em;
}

.prose h2:first-child { margin-top: 0; }

.prose strong { font-weight: 600; color: #FFFFFF; }

.prose a { color: var(--lilac); text-decoration: underline; text-underline-offset: .2em; }

.prose em {
	font-family: var(--font-warm);
	font-size: 1.08em;
	color: rgba(255, 255, 255, .7);
}


/* ── On paper ────────────────────────────────────────────────────────────
 *
 * The magazine language is the whole site now, so every purple band is a
 * plate laid on the paper rather than the page itself. They keep their own
 * ground and their own white type.
 * ───────────────────────────────────────────────────────────────────────── */

.lead,
.hold,
.steps,
.price,
.ask,
.give,
.doors,
.two,
.doorway,
.free,
.find,
.none,
.prose,
.moments,
.her,
.says,
.days,
.mine,
.room {
	background: var(--logo-purple);
	color: var(--white);
}

.four,
.strip,
.plate { background: var(--paper); }

.four,
.strip { gap: 8px; padding: 8px; }

.plate { padding: 8px 8px 0; }

/* ─────────────────────────────────────────────────────────────────────────
 * HOMES THAT CAME BACK
 *
 * The card is .home-card rather than .home, and the rename is the whole point.
 *
 * WordPress puts the class `home` on the BODY of every front page. So a card
 * class called .home was styling her entire homepage — 24px of padding all
 * round, a one-pixel border, a rounded corner and a faint white wash over her
 * purple. That is the frame she read as narrow and as gated, and the reason
 * the ground showed down both sides.
 *
 * Nothing in any stylesheet said `body`. It took disabling one sheet at a time
 * and watching the number to find it.
 * A home is a card she can read the whole of before she decides. Her words
 * carry it — the suburb, what she is offering, and what she would like paid.
 * ───────────────────────────────────────────────────────────────────────── */

.found {
	background: var(--logo-purple);
	padding: clamp(2.4rem, 7vw, 4rem) clamp(20px, 6vw, 3.4rem) clamp(3rem, 8vw, 4.6rem);
	border-top: 1px solid var(--rule);
}

.found__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--accent, var(--lilac));
	text-align: center;
	margin: 0 0 clamp(1.8rem, 5vw, 2.8rem);
}

.found__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 3.4vw, 26px);
	max-width: 62rem;
	margin: 0 auto;
}

@media (min-width: 720px) { .found__list { grid-template-columns: 1fr 1fr; } }

.home-card {
	display: block;
	padding: clamp(1.5rem, 4.6vw, 2.1rem);
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: rgba(255, 255, 255, .035);
	color: var(--ink);
	text-decoration: none;
	transition: border-color .35s ease, background .35s ease, transform .35s ease;
}

.home-card:hover,
.home-card:focus-visible {
	border-color: var(--accent, var(--lilac));
	background: rgba(255, 255, 255, .07);
	transform: translateY(-2px);
}

.home-card__where {
	font-family: var(--font-head);
	font-size: clamp(0.72rem, 2.6vw, 0.79rem);
	letter-spacing: .28em;
	text-indent: .28em;
	text-transform: uppercase;
	color: var(--accent, var(--lilac));
	margin: 0;
}

.home-card__head {
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(1.24rem, 4.4vw, 1.5rem);
	letter-spacing: .04em;
	line-height: 1.3;
	margin: .55em 0 0;
}

.home-card__say {
	font-size: clamp(1.03rem, 3.8vw, 1.1rem);
	line-height: 1.68;
	color: var(--ink-soft, rgba(255, 255, 255, .84));
	margin: .8em 0 0;
}

.home-card__week {
	font-family: var(--font-head);
	font-size: clamp(1.06rem, 3.9vw, 1.16rem);
	letter-spacing: .05em;
	margin: .9em 0 0;
}

.home-card__go {
	display: inline-block;
	margin-top: 1.1em;
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.8vw, 0.84rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: var(--accent, var(--lilac));
	border-bottom: 1px solid currentColor;
	padding-bottom: .35em;
}

@media (prefers-reduced-motion: reduce) {
	.home-card { transition: none; }
	.home-card:hover, .home-card:focus-visible { transform: none; }
}

/* What she is told when she comes back to the page, and the field nobody sees. */

.moments__word {
	margin: 0;
	padding: clamp(1.1rem, 3.6vw, 1.5rem) clamp(20px, 6vw, 3rem);
	background: rgba(255, 255, 255, .07);
	border-bottom: 1px solid var(--rule);
	font-size: clamp(1.03rem, 3.8vw, 1.12rem);
	line-height: 1.62;
	text-align: center;
	color: var(--ink);
}

.moments__aside {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
 * ONE HOME, IN HER WORDS
 * Bands of her own writing, generously set, with the label small and her
 * sentence large — the opposite way round from an advertisement.
 * ───────────────────────────────────────────────────────────────────────── */

.told {
	padding: clamp(2.6rem, 8vw, 4.4rem) clamp(22px, 7vw, 4rem);
	border-top: 1px solid var(--rule);
	max-width: 46rem;
	margin: 0 auto;
}

.told--warm { background: rgba(255, 255, 255, .045); }

.told--hers {
	border-top: 0;
	padding-top: clamp(1.6rem, 5vw, 2.4rem);
}

.told__over {
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.8vw, 0.84rem);
	letter-spacing: .32em;
	text-indent: .32em;
	text-transform: uppercase;
	color: var(--accent, var(--lilac));
	margin: 0 0 clamp(1rem, 3vw, 1.5rem);
}

.told__say {
	font-size: clamp(1.16rem, 4.4vw, 1.42rem);
	line-height: 1.66;
	margin: 0;
	color: var(--ink);
}

.told__part {
	font-size: clamp(1.04rem, 3.9vw, 1.14rem);
	line-height: 1.7;
	margin: 0 0 1.5em;
	color: var(--ink);
}

.told__part:last-child { margin-bottom: 0; }

.told__was {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(0.74rem, 2.7vw, 0.8rem);
	letter-spacing: .26em;
	text-indent: .26em;
	text-transform: uppercase;
	color: var(--accent-deep, var(--lilac));
	margin-bottom: .5em;
}

.told__promise {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(1rem, 3.7vw, 1.08rem);
	line-height: 1.7;
	text-align: center;
	color: var(--ink-soft, rgba(255, 255, 255, .8));
	margin: 0;
}

.back {
	padding: clamp(2.4rem, 7vw, 3.6rem) clamp(22px, 7vw, 4rem) clamp(3.4rem, 9vw, 5rem);
	text-align: center;
	border-top: 1px solid var(--rule);
}

.back__go {
	font-family: var(--font-head);
	font-size: clamp(0.8rem, 2.9vw, 0.88rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: var(--accent, var(--lilac));
	border-bottom: 1px solid currentColor;
	padding-bottom: .4em;
	text-decoration: none;
}

/* The seventh move, which is not a question. It reads as an act, so it is set
   like one — larger than the answers above it, and given room of its own. */
.made__hand {
	font-family: var(--font-body);
	font-size: clamp(1.2rem, 4.4vw, 1.42rem);
	font-style: italic;
	line-height: 1.62;
	margin: 1.4em 0 0;
	padding-top: 1.3em;
	border-top: 1px solid var(--rule);
	color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────
 * THE ATELIER
 *
 * Her instruction, 22 August: it is time to create your perfect home, then
 * the deep curious questions, and the whole of it joyful.
 *
 * A photograph stands behind every question, held well back so her own words
 * keep every bit of their contrast. The warmth is the safety — a bare screen
 * with a question on it and no way out is an interview room.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * The moment's own display belongs in moments.css, which owns showing and
 * hiding them. A `display` declared here would win by load order and put every
 * question on the screen at once.
 */
.moment { position: relative; overflow: hidden; }

.moment__pic {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .62;
	z-index: 0;
	pointer-events: none;
	transform: scale(1.04);
	animation: esm-breathe 26s ease-in-out infinite alternate;
}

/* The scrim, which is what keeps her words at full strength over a photograph. */
.moment__pic::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 42%, rgba(58, 0, 102, .48) 0%, rgba(45, 0, 84, .78) 58%, rgba(38, 0, 74, .93) 100%);
}

@keyframes esm-breathe {
	from { transform: scale(1.04); }
	to   { transform: scale(1.11); }
}

.moment__in { position: relative; z-index: 1; }

/* ── The invitation ─────────────────────────────────────────────────────── */

.open__over {
	font-family: var(--font-head);
	font-size: clamp(0.8rem, 2.9vw, 0.9rem);
	letter-spacing: .38em;
	text-indent: .38em;
	text-transform: uppercase;
	color: #F9C4D6;
	margin: 0 0 clamp(1.2rem, 4vw, 1.8rem);
}

.open__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: clamp(1.9rem, 8.2vw, 3.6rem);
	line-height: 1.28;
	margin: 0;
}

.open__say {
	font-size: clamp(1.1rem, 4.1vw, 1.24rem);
	line-height: 1.7;
	max-width: 30rem;
	margin: clamp(1.3rem, 4.4vw, 2rem) auto 0;
	color: var(--ink);
}

.open__go {
	appearance: none;
	display: inline-block;
	margin: clamp(1.8rem, 5.5vw, 2.6rem) 0 0;
	padding: .95em 3.1em;
	font-family: var(--font-head);
	font-size: clamp(0.86rem, 3.1vw, 0.95rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(150deg, #F4B0C8 0%, #C86FA8 34%, #8A2E96 72%, #5A0F92 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .34),
		inset 0 0 0 1px #F4B0C8,
		0 8px 18px -10px rgba(20, 0, 40, .6);
	transition: transform .3s ease, box-shadow .3s ease;
}

.open__go:hover,
.open__go:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .4),
		inset 0 0 0 1px #F9C4D6,
		0 12px 26px -12px rgba(20, 0, 40, .7);
}

.open__note {
	font-size: clamp(0.94rem, 3.5vw, 1rem);
	line-height: 1.66;
	color: var(--ink-soft, rgba(255, 255, 255, .8));
	margin: clamp(1.1rem, 3.6vw, 1.5rem) 0 0;
}

/* ── A door out of every question, quiet and unlabelled as a warning ────── */

.moment__out {
	position: absolute;
	z-index: 2;
	top: clamp(14px, 3.4vw, 22px);
	right: clamp(14px, 3.4vw, 22px);
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.8vw, 0.82rem);
	letter-spacing: .26em;
	text-indent: .26em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	padding: .55em .9em;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 2px;
	transition: color .3s ease, border-color .3s ease;
}

.moment__out:hover,
.moment__out:focus-visible { color: #FFFFFF; border-color: #F4B0C8; }

/* ── Her words, as a map ────────────────────────────────────────────────── */

.map {
	position: relative;
	max-width: 44rem;
	margin: clamp(1.8rem, 5vw, 2.6rem) auto 0;
	padding-left: clamp(16px, 4.4vw, 26px);
	text-align: left;
}

/* The spine every branch grows off. */
.map::before {
	content: "";
	position: absolute;
	left: clamp(6px, 1.6vw, 10px);
	top: clamp(2.4rem, 7vw, 3.2rem);
	bottom: 1.4rem;
	width: 2px;
	background: linear-gradient(to bottom, #F4B0C8 0%, rgba(244, 176, 200, .28) 100%);
	border-radius: 2px;
}

.map__heart {
	position: relative;
	display: inline-block;
	margin: 0 0 clamp(1.4rem, 4vw, 2rem) -0.4rem;
	padding: .6em 1.5em;
	font-family: var(--font-head);
	font-size: clamp(1rem, 3.6vw, 1.14rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: #FFFFFF;
	border-radius: 999px;
	background: linear-gradient(150deg, #F4B0C8 0%, #C86FA8 46%, #8A2E96 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 8px 18px -12px rgba(20, 0, 40, .7);
}

.map__branch {
	position: relative;
	margin: 0 0 clamp(1.3rem, 4vw, 1.9rem);
	padding: 0 0 0 clamp(18px, 4.6vw, 28px);
}

/* The twig reaching from the spine to her words. */
.map__branch::before {
	content: "";
	position: absolute;
	left: 0;
	top: .82em;
	width: clamp(12px, 3.4vw, 20px);
	height: 2px;
	background: rgba(244, 176, 200, .62);
	border-radius: 2px;
}

.map__branch::after {
	content: "";
	position: absolute;
	left: clamp(11px, 3.2vw, 19px);
	top: calc(.82em - 3px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #F4B0C8;
}

.map__was {
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.8vw, 0.84rem);
	letter-spacing: .28em;
	text-indent: .28em;
	text-transform: uppercase;
	color: #F9C4D6;
	margin: 0 0 .45em;
}

.map__said {
	font-size: clamp(1.1rem, 4.1vw, 1.26rem);
	line-height: 1.62;
	color: var(--ink);
	margin: 0;
}

/* A branch she left empty simply is not a branch. */
.map__branch:has( .map__said:empty ) { display: none; }

@media (min-width: 820px) {
	.map { padding-left: clamp(30px, 4vw, 44px); }
	.map__branch { max-width: 34rem; }
	.map__branch:nth-child(even) { margin-left: clamp(40px, 7vw, 90px); }
}

@media (prefers-reduced-motion: reduce) {
	.moment__pic { animation: none; transform: none; }
	.open__go { transition: none; }
	.open__go:hover, .open__go:focus-visible { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * A LETTER, TO ONE PERSON
 *
 * Old-fashioned etiquette. A card with real margins, the writing set like
 * writing rather than like a web page, and her signature at the foot of it.
 * ───────────────────────────────────────────────────────────────────────── */

.letter {
	background: linear-gradient(168deg, #3A0A72 0%, #23054A 100%);
	padding: clamp(2.6rem, 8vw, 5.5rem) clamp(18px, 5vw, 3rem) clamp(3.4rem, 9vw, 6rem);
}

.letter__card {
	position: relative;
	max-width: 40rem;
	margin: 0 auto;
	padding: clamp(2.4rem, 8vw, 4.4rem) clamp(22px, 7vw, 4rem);
	background: linear-gradient(168deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .045) 100%);
	border: 1px solid rgba(244, 176, 200, .42);
	border-radius: 3px;
	box-shadow: 0 26px 60px -34px rgba(12, 0, 28, .9);
}

/* The plate line an engraved card carries inside its edge. */
.letter__card::before {
	content: "";
	position: absolute;
	inset: clamp(8px, 2vw, 13px);
	border: 1px solid rgba(244, 176, 200, .22);
	border-radius: 2px;
	pointer-events: none;
}

.letter__mark {
	display: block;
	width: clamp(140px, 34vw, 190px);
	height: auto;
	margin: 0 auto clamp(2rem, 6vw, 3rem);
}

.letter__open {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(1.26rem, 4.8vw, 1.56rem);
	line-height: 1.5;
	color: #F9C4D6;
	margin: 0 0 clamp(1.3rem, 4vw, 1.8rem);
}

.letter__say p {
	font-size: clamp(1.1rem, 4.1vw, 1.2rem);
	line-height: 1.82;
	color: var(--ink);
	margin: 0 0 1.15em;
}

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

.letter__given {
	font-family: var(--font-head);
	font-size: clamp(1.06rem, 3.9vw, 1.2rem);
	letter-spacing: .06em;
	line-height: 1.6;
	text-align: center;
	color: var(--ink);
	margin: clamp(1.8rem, 5.5vw, 2.6rem) 0;
	padding: clamp(1.1rem, 3.6vw, 1.5rem) clamp(1rem, 3vw, 1.6rem);
	border-top: 1px solid rgba(244, 176, 200, .34);
	border-bottom: 1px solid rgba(244, 176, 200, .34);
}

.letter__close {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(1.14rem, 4.3vw, 1.3rem);
	line-height: 1.5;
	color: var(--ink);
	margin: clamp(1.8rem, 5.5vw, 2.4rem) 0 0;
}

.letter__from {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(1.5rem, 6.2vw, 2.1rem);
	line-height: 1.3;
	color: #F9C4D6;
	margin: .35em 0 0;
}

.letter__for {
	max-width: 40rem;
	margin: clamp(1.4rem, 4.4vw, 2rem) auto 0;
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.86rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, .68);
}

.letter__acts {
	display: grid;
	gap: 12px;
	max-width: 26rem;
	margin: clamp(2.4rem, 7vw, 3.4rem) auto 0;
}

.letter__go {
	display: block;
	text-align: center;
	padding: 17px 26px;
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	border-radius: 3px;
	border: 1px solid #F4B0C8;
	background: linear-gradient(150deg, #F4B0C8 0%, #C86FA8 34%, #8A2E96 72%, #5A0F92 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 18px -12px rgba(20, 0, 40, .6);
	transition: transform .3s ease;
}

.letter__go--quiet {
	background: transparent;
	border-color: rgba(222, 208, 242, .45);
	box-shadow: none;
}

.letter__go:hover,
.letter__go:focus-visible { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.letter__go { transition: none; }
	.letter__go:hover, .letter__go:focus-visible { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * THREE DOORS
 * Reaching Esmeralda is three ways in rather than one form. Each one wears
 * its own side's colour, so a property manager and a woman looking for a home
 * each recognise theirs before reading a word.
 * ───────────────────────────────────────────────────────────────────────── */

.ways {
	display: grid;
	gap: clamp(16px, 3.4vw, 26px);
	max-width: 62rem;
	margin: 0 auto;
	padding: clamp(2.4rem, 7vw, 4rem) clamp(20px, 6vw, 3.4rem) clamp(3rem, 8vw, 4.6rem);
}

@media (min-width: 880px) { .ways { grid-template-columns: 1fr 1fr; } .way--say { grid-column: 1 / -1; } }

.way {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--rule);
	border-radius: 3px;
	color: var(--ink);
	text-decoration: none;
	background: rgba(255, 255, 255, .04);
	transition: border-color .35s ease, transform .35s ease;
}

a.way:hover,
a.way:focus-visible { transform: translateY(-3px); }

.way--pro { border-top: 2px solid #8A3BD6; }
.way--her { border-top: 2px solid #F4B0C8; }
.way--say { border-top: 2px solid var(--rule); }

a.way--pro:hover, a.way--pro:focus-visible { border-color: #8A3BD6; }
a.way--her:hover, a.way--her:focus-visible { border-color: #F4B0C8; }

.way__pic {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .34;
	z-index: 0;
}

.way__pic::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(168deg, rgba(45, 0, 84, .82) 0%, rgba(35, 0, 68, .94) 100%);
}

.way__in {
	position: relative;
	z-index: 1;
	display: block;
	padding: clamp(1.7rem, 5vw, 2.4rem);
}

.way__over {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.8vw, 0.84rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	margin-bottom: .7em;
}

.way--pro .way__over { color: #C99BF0; }
.way--her .way__over { color: #F9C4D6; }
.way--say .way__over { color: var(--lilac); }

.way__head {
	display: block;
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(1.42rem, 5.2vw, 1.8rem);
	letter-spacing: .04em;
	line-height: 1.28;
}

.way__say {
	display: block;
	font-size: clamp(1.04rem, 3.9vw, 1.12rem);
	line-height: 1.7;
	color: var(--ink-soft, rgba(255, 255, 255, .84));
	margin-top: .8em;
}

.way__go {
	display: inline-block;
	margin-top: 1.2em;
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.86rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: .35em;
}

.way--pro .way__go { color: #C99BF0; }
.way--her .way__go { color: #F9C4D6; }

/* Her letterbox, when it is hung. */

.note { margin-top: 1.4em; }

.note__label {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.86rem);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 1.3em 0 .5em;
}

.note__say,
.note__back {
	width: 100%;
	font-family: var(--font-body);
	font-size: clamp(1.06rem, 3.9vw, 1.14rem);
	line-height: 1.7;
	color: var(--ink);
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: .85em 1em;
}

.note__say:focus,
.note__back:focus { outline: 2px solid #F4B0C8; outline-offset: 2px; }

.note__go {
	appearance: none;
	margin-top: 1.4em;
	padding: 16px 34px;
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.858rem);
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
	border: 1px solid #F4B0C8;
	border-radius: 3px;
	background: linear-gradient(150deg, #F4B0C8 0%, #C86FA8 34%, #8A2E96 72%, #5A0F92 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 18px -12px rgba(20, 0, 40, .6);
}

.note__aside {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.way { transition: none; }
	a.way:hover, a.way:focus-visible { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * THE WHOLE OF IT
 * Every part on one page, grouped, each card in its own side's colour.
 * ───────────────────────────────────────────────────────────────────────── */

.all {
	max-width: 60rem;
	margin: 0 auto;
	padding: clamp(2.4rem, 7vw, 4rem) clamp(20px, 6vw, 3.4rem) clamp(3.4rem, 9vw, 5rem);
}

.all__over {
	font-family: var(--font-head);
	font-size: clamp(0.82rem, 3vw, 0.92rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: clamp(2.4rem, 7vw, 3.4rem) 0 clamp(1.1rem, 3.4vw, 1.6rem);
	padding-bottom: .7em;
	border-bottom: 1px solid var(--rule);
}

.all__over:first-child { margin-top: 0; }
.all__over--her { color: #F9C4D6; border-bottom-color: rgba(244, 176, 200, .45); }
.all__over--pro { color: #C99BF0; border-bottom-color: rgba(138, 59, 214, .5); }

.all__list {
	display: grid;
	gap: clamp(12px, 2.6vw, 18px);
}

@media (min-width: 760px) { .all__list { grid-template-columns: 1fr 1fr; } }

.all__one {
	display: block;
	padding: clamp(1.2rem, 3.6vw, 1.6rem);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--rule);
	border-radius: 3px;
	background: rgba(255, 255, 255, .04);
	color: var(--ink);
	text-decoration: none;
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

a.all__one:hover,
a.all__one:focus-visible {
	background: rgba(255, 255, 255, .08);
	transform: translateY(-2px);
}

.all__one--her { border-left-color: #F4B0C8; }
.all__one--pro { border-left-color: #8A3BD6; }
.all__one--wait { border-left-color: var(--lilac); background: rgba(255, 255, 255, .02); }

.all__head {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(1.14rem, 4.2vw, 1.3rem);
	font-weight: 200;
	letter-spacing: .04em;
	line-height: 1.3;
}

.all__say {
	display: block;
	font-size: clamp(1rem, 3.7vw, 1.08rem);
	line-height: 1.66;
	color: var(--ink-soft, rgba(255, 255, 255, .82));
	margin-top: .55em;
}

@media (prefers-reduced-motion: reduce) {
	.all__one { transition: none; }
	a.all__one:hover, a.all__one:focus-visible { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * MORNINGTON AND ITS SURROUNDS
 * Her ruling said back to her in her own terms — the suburb she named, and
 * the ones around it — rather than a radius in kilometres.
 * ───────────────────────────────────────────────────────────────────────── */

.around {
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(1.8rem, 5.5vw, 2.6rem) clamp(20px, 6vw, 3rem);
	text-align: center;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.around__head {
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(1.24rem, 4.6vw, 1.5rem);
	letter-spacing: .04em;
	line-height: 1.34;
	color: var(--ink);
	margin: 0;
}

.around__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em .6em;
	margin: clamp(1rem, 3.4vw, 1.4rem) 0 0;
}

.around__one {
	font-family: var(--font-head);
	font-size: clamp(0.84rem, 3.1vw, 0.92rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
	padding: .5em 1em;
	border: 1px solid rgba(244, 176, 200, .42);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
}

.around__say {
	font-size: clamp(1rem, 3.7vw, 1.08rem);
	line-height: 1.66;
	color: var(--ink-soft, rgba(255, 255, 255, .82));
	margin: clamp(.9rem, 3vw, 1.2rem) 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * WHO CAN SEE HER
 * Three states, starting at the safest, each one saying what happens rather
 * than naming a level of privacy. Her ruling: invisible to start, hers to
 * change.
 * ───────────────────────────────────────────────────────────────────────── */

.seen {
	border: 0;
	margin: clamp(2rem, 6vw, 2.8rem) 0 0;
	padding: clamp(1.4rem, 4.4vw, 2rem) 0 0;
	border-top: 1px solid var(--rule);
	text-align: left;
}

.seen__over {
	font-family: var(--font-head);
	font-size: clamp(0.82rem, 3vw, 0.9rem);
	letter-spacing: .32em;
	text-indent: .32em;
	text-transform: uppercase;
	color: #F9C4D6;
	padding: 0;
	margin: 0 0 .5em;
}

.seen__note {
	font-size: clamp(1rem, 3.7vw, 1.06rem);
	line-height: 1.66;
	color: var(--ink-soft, rgba(255, 255, 255, .82));
	margin: 0 0 clamp(1.1rem, 3.4vw, 1.5rem);
}

.seen__one {
	display: flex;
	gap: .9em;
	align-items: flex-start;
	padding: clamp(1rem, 3.2vw, 1.3rem);
	margin-bottom: 10px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: rgba(255, 255, 255, .035);
	cursor: pointer;
	transition: border-color .3s ease, background .3s ease;
}

.seen__one:hover { background: rgba(255, 255, 255, .07); }

.seen__one:has( input:checked ) {
	border-color: #F4B0C8;
	background: rgba(244, 176, 200, .12);
}

.seen__one:has( input:focus-visible ) {
	outline: 2px solid #F9C4D6;
	outline-offset: 2px;
}

.seen__one input {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin-top: .25em;
	accent-color: #F4B0C8;
}

.seen__head {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(1.06rem, 3.9vw, 1.16rem);
	letter-spacing: .03em;
	line-height: 1.34;
	color: var(--ink);
}

.seen__say {
	display: block;
	font-size: clamp(1rem, 3.7vw, 1.06rem);
	line-height: 1.66;
	color: var(--ink-soft, rgba(255, 255, 255, .82));
	margin-top: .4em;
}

@media (prefers-reduced-motion: reduce) {
	.seen__one { transition: none; }
}

/* Her letter as a draft she reads before it goes — the same card the finished
   letter arrives on, so what she approves is what the other woman sees. */
.letter__card--draft {
	max-width: none;
	margin: clamp(1.4rem, 4.4vw, 2rem) 0 0;
	text-align: left;
}

.letter__card--draft .letter__say p:empty { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
 * HER MARK, AND A WAY AROUND THAT FOLDS
 *
 * Seven items across the top of a 379px screen took five lines and the whole
 * of what she could see before scrolling. Her mark stays; the way around
 * folds behind one press.
 * ───────────────────────────────────────────────────────────────────────── */

.site-header__mark img {
	display: block;
	width: clamp(118px, 30vw, 168px);
	height: auto;
}

/*
 * THE BURGER, IN HER ORCHID.
 *
 * Her instruction: make the button elegant, an orchid-pink ground with a sheen.
 *
 * #F4B0C8 exactly, and it stays exactly that. The orchid is a real orchid,
 * given to her by her closest friend, and Esmeralda came out of it — see
 * notes/the-orchid.md. The sheen sits on the colour rather than altering it,
 * and the rim comes from her purples, because a rim that is nearly orchid
 * would muddy the orchid.
 *
 * Nan Made's recipe, three parts, and all three have to be present or it reads
 * flat: a lit vertical gradient, a solid unblurred edge beneath it, and a rim
 * in a different colour from the fill.
 *
 * And it wears the same treatment as her two doors on Home, so the way in to
 * the site is made of the same thing as the two ways in on the page.
 */
.site-open {
	display: none;
	appearance: none;
	align-items: center;
	padding: .68em 1.5em;
	border: 0;
	border-radius: 999px;
	cursor: pointer;

	/* Her orchid, lit from above. Part one. */
	background: linear-gradient(178deg, #FBD3E2 0%, #F4B0C8 46%, #E695B4 100%);

	color: #3A0066;
	font-family: var(--font-head);
	font-size: clamp(0.82rem, 3.1vw, 0.9rem);
	letter-spacing: .24em;
	text-indent: .24em;
	text-transform: uppercase;

	box-shadow:
		/* Part two — a solid unblurred edge beneath it, never a blur. */
		0 2px 0 0 #C0739A,
		/* Part three — a rim, taken from her purples so the orchid stays itself. */
		0 0 0 1.5px #6E1BA8,
		inset 0 1px 0 rgba(255, 255, 255, .68),
		0 8px 18px -12px rgba(20, 0, 40, .55);

	transition: transform .28s ease, box-shadow .28s ease;
}

.site-open:hover,
.site-open:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		0 3px 0 0 #C0739A,
		0 0 0 1.5px #8A3BD6,
		inset 0 1px 0 rgba(255, 255, 255, .78),
		0 12px 22px -12px rgba(20, 0, 40, .6);
}

.site-open:active {
	transform: translateY(1px);
	box-shadow:
		0 1px 0 0 #C0739A,
		0 0 0 1.5px #6E1BA8,
		inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Open reads Close. One word doing two jobs rather than a word beside a symbol. */
.site-open[aria-expanded="true"] [data-word] { visibility: hidden; }

.site-open[aria-expanded="true"] [data-word]::after {
	content: "Close";
	visibility: visible;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

.site-open [data-word] { position: relative; display: block; }

@media (max-width: 860px) {

	.site-header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex-wrap: wrap;
	}

	/* Her mark at the left, the way in at the right. */
	.site-header__mark { order: 1; }
	.site-open { display: flex; order: 2; margin-left: auto; }
	.esm-folds .site-nav { order: 3; }

	/*
	 * Her mark stands at the top beside MENU, on every page including the
	 * front one. Her ruling, said twice in one breath.
	 */
	.site-header__mark { display: block; }

	/* Folded by default, and only where the script is running — a reader
	   without JavaScript keeps the whole way around rather than losing it. */
	.esm-folds .site-nav {
		display: none;
		width: 100%;
		order: 3;
		flex-direction: column;
		align-items: flex-start;
		gap: .1rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--rule);
	}

	.esm-folds .site-nav.is-open { display: flex; }

	.site-nav > li { width: 100%; }

	.site-nav a {
		display: block;
		padding: .72em 0;
		font-size: 1.06rem;
		letter-spacing: .04em;
	}

	.site-nav .sub-menu {
		padding: 0 0 .4rem 1rem;
		margin: 0;
		border-left: 1px solid var(--rule);
	}

	.site-nav .sub-menu a { font-size: .98rem; opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
	.site-open__lines span { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * HER FOUR, AS A CAROUSEL IN HER PANE
 *
 * Her ruling, 23 August: on mobile, where there's the section of four, put
 * that in a carousel.
 *
 * Two-by-two at 379px gives four postage stamps and none of them can be seen.
 * One at a time, swiped, each one large enough to be a room rather than a
 * thumbnail. Built on scroll-snap so it needs no script and works the moment
 * a finger touches it.
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 619px) {

	/*
	 * overflow-x on its own forces overflow-y to compute as auto, which shaves
	 * anything standing proud of the row. Both are named, and nothing here
	 * stands proud.
	 */
	.four {
		display: block;
		grid-template-columns: none;
		gap: 0;
		padding: 3px 0 16px;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.four img {
		flex: 0 0 74vw;
		width: 74vw;
		border-radius: 3px;
		aspect-ratio: 4 / 5;
	}
}

/* Wide screens keep the four as four. Her ruling was mobile first, and a
   travelling rail on a desktop where all four already fit adds motion to
   something that was never crowded. */
@media (min-width: 620px) {
	.four__rail {
		display: contents;
		animation: none;
	}

	/*
	 * The second set exists only so the travelling rail can repeat without a
	 * jump. Standing still, it is simply her four photographs printed twice.
	 */
	.four__rail img[aria-hidden="true"] { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * THE TWO DOORS, SIZED FOR HER PANE
 * They were reaching 143px tall and the full width, which is a slab rather
 * than a door. Smaller, and still level with one another.
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 619px) {

	/*
	 * The masthead and the two doors together were 567px of her first screen
	 * before a photograph appeared. Her ruling, three times: too big.
	 */
	.bloom {
		gap: 12px;
		padding: 18px 30px 34px;
	}


	/*
	 * The two floors that decide a door's height live in editorial.css beside
	 * each other — .petal and .petal__in. Overriding them from here lost the
	 * cascade twice and read as correct in the stylesheet both times.
	 */
	.petal__say {
		font-size: clamp(0.8rem, 3.1vw, 0.9rem);
		letter-spacing: .14em;
		line-height: 1.42;
	}



	.petal__under {
		font-size: clamp(0.62rem, 2.4vw, 0.7rem);
		letter-spacing: .2em;
		margin-top: .35em;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * HER FOUR, MOVING
 *
 * Her ruling: a moving carousel on mobile, and on the main site if mobile
 * cannot have it.
 *
 * THE MOTION LIVES HERE AND NOWHERE ELSE. Nothing in this block describes
 * position or layout, so a later rewrite of the layout cannot delete it —
 * which is the fault that removed the same keyframes twice in one hour on
 * another site tonight.
 *
 * It yields to a finger: the moment she touches the rail the travel stops,
 * and it starts again when she lets go. A control that corrects a person
 * mid-gesture is arguing with her.
 * ───────────────────────────────────────────────────────────────────────── */

@keyframes esm-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.four__rail {
	display: flex;
	gap: 10px;
	width: max-content;
	animation: esm-drift 46s linear infinite;
	will-change: transform;
}

.four:hover .four__rail,
.four:focus-within .four__rail,
.four.is-held .four__rail {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.four__rail { animation: none; }
}

/*
 * Wide screens keep the four as four.
 *
 * THIS RULE MUST STAY BELOW THE MOTION BLOCK. It was written above it once,
 * lost the cascade to `.four__rail { display: flex }`, and at 768 the rail
 * stayed a flex row of eight pictures at their natural width — 10,038 pixels
 * across. Nothing scrolled, because the body clips it, so it measured as
 * passing while showing half of one photograph.
 *
 * Her ruling was a carousel on mobile. On a laptop all four already fit, and
 * motion added to something that was never crowded is motion for its own sake.
 */
@media (min-width: 620px) {
	.four__rail {
		display: contents;
		animation: none;
	}

	/*
	 * The second set exists only so the travelling rail can repeat without a
	 * jump. Standing still, it is simply her four photographs printed twice.
	 */
	.four__rail img[aria-hidden="true"] { display: none; }
}