/*
 * Esmeralda's own personality.
 *
 * LOIS is a neon sign — purple ground, condensed caps, a coral script with a
 * hard shadow, and it walks in and changes the room. Beautiful, and entirely
 * its own.
 *
 * Esmeralda is a magazine. Cream rather than purple, enormous photography
 * carrying the pink and the orange and the red, and the purple used as ink
 * rather than as ground. Calm, sophisticated, and unmistakably not LOIS.
 *
 * Her palette law kept honestly rather than mechanically: the ground stays
 * small and steady, and every other colour arrives inside a photograph.
 */

/*
 * HER GROUND, RULED 22 AUGUST. PURPLE.
 *
 * Her words: cream, just so you know, everybody — cream is like beige.
 *
 * That is a warning about a family of colours rather than one swatch, so no
 * off-white ground goes near Esmeralda again.
 *
 * The ground she has is her own logo purple, read off the pixels of her logo
 * files rather than guessed. When her orchid photograph arrives, the colour
 * changes here and nowhere else.
 *
 * Every colour on it clears her contrast law against body copy — white at
 * 12.95, lilac at 8.89, and the palest of the five accents at 5.64. Measured
 * rather than assumed, since three of her pale grounds have failed this week.
 */
:root {
	--ground:       #4B0082;
	--paper:        #4B0082;
	--paper-deep:   #3A0066;
	--ink:          #FFFFFF;
	--ink-soft:     rgba(255, 255, 255, .82);
	--rule:         rgba(222, 208, 242, .3);
	--plate-ground: #2A0050;
	--plate-ink:    #FFFFFF;
}

body { background: var(--paper); }

/* ── The masthead ────────────────────────────────────────────────────────── */

.mast {
	background: var(--paper);
	/*
	 * 8vh of padding is generous on a laptop and a third of the screen on her
	 * phone, where the viewport is tall and narrow. Sized off the width, which
	 * is the dimension that is actually small.
	 */
	padding: clamp(1.3rem, 5vw, 5rem) clamp(20px, 6vw, 4rem) clamp(.9rem, 3.4vw, 2.6rem);
	text-align: center;
}

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

.mast__word img {
	display: block;
	width: min(58%, 420px);
	height: auto;
	margin: 0 auto;
}

.mast__rule {
	width: min(88%, 1100px);
	height: 1px;
	background: var(--rule);
	margin: clamp(1.6rem, 5vh, 2.4rem) auto 0;
}

.mast__over {
	font-family: var(--font-head);
	font-size: clamp(0.78rem, 2.86vw, 0.884rem);
	letter-spacing: .4em;
	text-indent: .4em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: clamp(1.4rem, 4vh, 2rem) 0 0;
}

/* ── The cover ───────────────────────────────────────────────────────────── */

.cover { background: var(--paper); }

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

.cover__pic img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 38%;
}

@media (min-width: 820px) { .cover__pic img { aspect-ratio: 16 / 9; object-position: 50% 34%; } }

.cover__say {
	padding: clamp(2.6rem, 8vh, 4.5rem) clamp(20px, 6vw, 4rem) clamp(3rem, 9vh, 5.5rem);
	text-align: center;
}

.cover__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(1.7rem, 8vw, 4rem);
	line-height: 1.14;
	color: var(--ink);
	max-width: 16ch;
	margin: 0 auto;
}

.cover__warm {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.288rem, 5.15vw, 1.7rem);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 30ch;
	margin: 1.1em auto 0;
}

/* ── The spread ──────────────────────────────────────────────────────────── */

.spread {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	background: var(--paper);
	padding: 6px 0;
}

@media (min-width: 760px) { .spread { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; } }

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

/* ── The claim, on paper ─────────────────────────────────────────────────── */

.claimed {
	background: var(--paper);
	text-align: center;
	padding: clamp(4rem, 13vh, 8rem) clamp(20px, 6vw, 4rem);
}

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

.claimed__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: clamp(1.8rem, 9vw, 3.4rem);
	line-height: 1.25;
	color: var(--ink);
	margin: .7em 0 0;
}

.claimed__body {
	font-family: var(--font-util);
	font-size: clamp(1.176rem, 4.44vw, 1.21rem);
	line-height: 1.95;
	color: var(--ink-soft);
	max-width: 44ch;
	margin: 1.6em auto 0;
}

/* ── The two doors, as plates ────────────────────────────────────────────── */

.plates {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 0 8px 8px;
	background: var(--paper);
}

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

.plate2 {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(360px, 56svh, 520px);
	padding: clamp(2rem, 6vw, 3rem);
	overflow: hidden;
	color: var(--plate-ink);
	background: var(--plate-ground);
}

.plate2 img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 36%;
	transition: transform 6s cubic-bezier(.22,.61,.36,1);
}

.plate2:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) { .plate2 img, .plate2:hover img { transition: none; transform: none; } }

/* Her words sit on their own ground, never over the picture. */
.plate2__say {
	position: relative;
	background: var(--plate-ground);
	margin: 0 -8px -8px;
	padding: clamp(1.6rem, 5vw, 2.2rem) clamp(1.4rem, 5vw, 2rem);
	text-align: center;
}

.plate2__over {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.88vw, 0.858rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--lilac);
}

.plate2--pro .plate2__head {
	display: block;
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: clamp(1.288rem, 5.38vw, 1.6rem);
	line-height: 1.4;
	margin-top: .8em;
}

.plate2--her .plate2__head {
	display: block;
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.6rem, 6.6vw, 2.2rem);
	line-height: 1.2;
	margin-top: .5em;
}

.plate2__go {
	display: inline-block;
	margin-top: 1.2em;
	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);
	border-bottom: 1px solid rgba(222, 208, 242, .5);
	padding-bottom: 6px;
	transition: color .16s ease, border-color .16s ease;
}

.plate2:hover .plate2__go { color: #FFFFFF; border-color: #FFFFFF; }

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

.sign {
	background: var(--plate-ground);
	color: var(--plate-ink);
	text-align: center;
	padding: clamp(3.5rem, 11vh, 6rem) clamp(20px, 6vw, 4rem);
}

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

/* The chrome, on paper */

.site-header { display: block; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-footer { background: var(--paper); border-top: 1px solid var(--rule); }
.footer__mark { color: var(--ink); }
.home .footer__tag, .home .footer__copy { color: var(--ink-soft); }
.footer__links a { color: var(--ink); }


/* ── The choice, while it is open ────────────────────────────────────────
 *
 * The real page at its real address, and one tap moves the ground. Nothing
 * else on it moves. It goes the moment she has chosen.
 * ───────────────────────────────────────────────────────────────────────── */

.pick-ground {
	position: fixed;
	left: 50%;
	bottom: clamp(14px, 3vw, 26px);
	transform: translateX(-50%);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px;
	background: rgba(42, 0, 80, .92);
	box-shadow: 0 14px 34px -14px rgba(20, 0, 40, .6);
}

.pick-ground b {
	font-family: var(--font-head);
	font-size: 0.76rem;
	font-weight: 400;
	letter-spacing: .28em;
	text-indent: .28em;
	text-transform: uppercase;
	color: rgba(222, 208, 242, .8);
	padding: 0 10px 0 12px;
	white-space: nowrap;
}

.pick-ground button {
	font-family: var(--font-head);
	font-size: 0.806rem;
	letter-spacing: .24em;
	text-indent: .24em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: transparent;
	border: 1px solid rgba(222, 208, 242, .4);
	padding: 11px 16px;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pick-ground button:hover { border-color: #FFFFFF; }

.pick-ground button[aria-pressed="true"] {
	background: #FFFFFF;
	color: #2A0050;
	border-color: #FFFFFF;
}

@media (max-width: 420px) {
	.pick-ground b { display: none; }
	.pick-ground button { padding: 12px 14px; }
}

/* The chrome takes the ground with it, so her name never sits on its own colour. */

.site-header {
	display: block;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

.site-header__mark { color: var(--ink); }
.site-nav a { color: var(--ink); opacity: .78; }
.site-nav a:hover,
.site-nav .current_page_item a { opacity: 1; }

.site-footer { background: var(--paper); border-top: 1px solid var(--rule); }
.footer__mark { color: var(--ink); }
.footer__tag,
.footer__copy { color: var(--ink-soft); }
.footer__links a { color: var(--ink); }

/* ── A second colour, while she is choosing one ──────────────────────────
 *
 * One property, five options, and it lands in the same handful of real
 * places every time — the small caps above a statement, the hairline, the
 * warm italic line, and the word under each door. Enough to break the purple
 * up, restrained enough that the photographs still carry the colour.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * HER ORCHID, READ OFF HER OWN PHOTOGRAPH.
 *
 * Sampled from the flower on her windowsill rather than named — 2,253 purple
 * pixels across three blooms. Her hue is 296 at the petal and 308 in the
 * veining, and it held steady across every reading.
 *
 * The photograph is backlit, so the camera exposed for the window and put the
 * flower in shadow. The hue is hers and the lightness was the camera's, so the
 * exposure is lifted and the hue is untouched.
 *
 *   the petal in light   #D8B4DA   7.07 on her ground
 *   the veining          #C28EBB   4.86
 *   her throat           #B551B8   2.98 — large type and marks only
 */
:root,
:root[data-accent="orchid"] {
	--accent:      #D8B4DA;
	--accent-deep: #C28EBB;
	--accent-hot:  #B551B8;
}
:root[data-accent="pink"]   { --accent: #F4B0C8; --accent-deep: #E890B0; --accent-hot: #E06D96; }
:root[data-accent="blue"]   { --accent: #9FC3E8; --accent-deep: #7FA9D6; --accent-hot: #5E8DC4; }
:root[data-accent="blush"]  { --accent: #F1CFC2; --accent-deep: #E0B0A0; --accent-hot: #CE8E7B; }
:root[data-accent="apricot"]{ --accent: #F3BE8C; --accent-deep: #E5A264; --accent-hot: #D4863F; }

.mast__over,
.claimed__over { color: var(--accent); }

.mast__rule { background: var(--accent); opacity: .5; }

.cover__warm { color: var(--accent); }

.plate2__over,
.plate2__go { color: var(--accent); }
.plate2__go { border-bottom-color: var(--accent); }

.plate2--her .plate2__head { color: var(--accent); }

.sign__line { color: var(--accent); }

/* The second row of taps, beneath the ground. */

.pick-accent {
	position: fixed;
	left: 50%;
	bottom: clamp(14px, 3vw, 26px);
	transform: translateX(-50%);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px;
	background: rgba(42, 0, 80, .92);
	box-shadow: 0 14px 34px -14px rgba(20, 0, 40, .6);
}

.pick-accent b {
	font-family: var(--font-head);
	font-size: 0.76rem;
	font-weight: 400;
	letter-spacing: .28em;
	text-indent: .28em;
	text-transform: uppercase;
	color: rgba(222, 208, 242, .8);
	padding: 0 8px 0 12px;
	white-space: nowrap;
}

.pick-accent button {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: var(--swatch);
	cursor: pointer;
	font-size: 0;
	transition: transform .16s ease, border-color .16s ease;
}

.pick-accent button:hover { transform: translateY(-2px); }
.pick-accent button[aria-pressed="true"] { border-color: #FFFFFF; border-width: 2px; }

@media (max-width: 460px) {
	.pick-accent b { display: none; }
	.pick-accent button { width: 30px; height: 30px; }
}

/* ── The second colour, woven through the whole site ─────────────────────
 *
 * Her note: weave pale purple and orchid through this as well, to break it
 * up. The accent was only touching Home. It now lifts the small caps, the
 * warm italic and the quiet marks on every page.
 * ───────────────────────────────────────────────────────────────────────── */

.lead__over,
.hold__eyebrow,
.give__eyebrow,
.price__over,
.ask__over,
.step__n,
.seek__over,
.doorway__over,
.room__over,
.mine__over,
.says__over,
.days__over,
.her__over,
.none__over,
.find__label,
.made__over,
.moment__where,
.band__eyebrow,
.truth__eyebrow { color: var(--accent); }

.lead__under,
.hold__body em,
.seek--her .seek__head,
.doorway__ask,
.her__name,
.mine__head,
.room__head,
.none__head,
.said__gave,
.made__line--warm,
.days__list li { color: var(--accent); }

.step__n,
.card__ask,
.moment__ask { color: var(--accent); }

.seek__go,
.doorway__go,
.card__go,
.made__over,
.none__go,
.give__go,
.plate2__go { border-color: var(--accent); }

.mast__rule,
.made__card { border-color: var(--accent); }

/* Her throat, where the type is large enough to carry it. */
.her__name,
.doorway__ask,
.none__head,
.mine__head,
.room__head { color: var(--accent); }

.seek--her .seek__head,
.plate2--her .plate2__head { color: var(--accent); }

/* A pale purple ground beneath the plates, so a purple band never meets
   another purple band with nothing between them. */
.four,
.strip,
.plate { background: var(--paper); }

/* ── THE TWO DOORWAYS ────────────────────────────────────────────────────
 *
 * Smaller, contained, and lit by a shimmer rather than a blur.
 *
 * The blurred glow was the amateur part — soft light bleeding out of an edge
 * reads as a effect rather than as craft. So the light stays inside: a narrow
 * band of orchid travelling slowly across the face, the way light moves over
 * satin, with a hairline holding the whole thing in.
 * ───────────────────────────────────────────────────────────────────────── */

.bloom {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 6vw, 64px);
	grid-auto-rows: 1fr;
	width: min(100%, 46rem);
	margin-inline: auto;
	padding: clamp(1.2rem, 3vh, 2rem) clamp(18px, 5vw, 30px) clamp(2.4rem, 7vh, 4rem);
	background: var(--paper);
}

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

.petal {
	position: relative;
	display: grid;
	place-content: center;
	overflow: hidden;
	color: #FFFFFF;

	/*
	 * The two stand the same height, whatever each one carries inside it.
	 *
	 * They were near 180px in her pane and pushing the whole of the page below
	 * the fold. Her ruling: they look beautiful and they just have to be
	 * smaller — so this is a number rather than a redesign.
	 */
	min-height: clamp(64px, 17vw, 132px);

	/*
	 * The two are opposites rather than a pair.
	 *
	 * The professional door is the deeper of the two, cool and disciplined.
	 * Hers is lit, and it sits on exactly the purple inside her own logo file,
	 * so her mark dissolves into it rather than sitting on a rectangle.
	 */
	background: var(--door-face);

	/*
	 * Three dimensions, quietly.
	 *
	 * A lit top edge and a shaded bottom one give the face a curve, and the
	 * shadow sits close underneath rather than spreading — which is the
	 * difference between a card lying on a table and a glow.
	 */
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .34),
		inset 0 -1px 0 rgba(20, 0, 40, .55),
		inset 0 0 0 1px var(--door-edge),
		0 1px 1px rgba(20, 0, 40, .30),
		0 4px 8px -3px rgba(20, 0, 40, .42),
		0 10px 20px -12px rgba(20, 0, 40, .5);

	transform: translateZ(0);
	transition: box-shadow .38s ease, background .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}

/*
 * The shimmer. One narrow band, sharp-edged rather than blurred, crossing on
 * a long slow cycle and starting part-way through so it is already in motion
 * when she arrives.
 */
.petal::before {
	content: "";
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: -60%;
	width: 42%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		color-mix(in srgb, var(--door-edge) 22%, transparent) 34%,
		rgba(255, 255, 255, .30) 50%,
		color-mix(in srgb, var(--door-edge) 22%, transparent) 66%,
		transparent 100%
	);
	transform: skewX(-14deg);
	pointer-events: none;
	animation: esm-shimmer 16s cubic-bezier(.5, 0, .3, 1) -5s infinite;
}

@keyframes esm-shimmer {
	0%        { left: -60%; }
	62%, 100% { left: 118%; }
}

/* A second, fainter pass behind it, so the light has depth rather than being one stripe. */
.petal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--door-edge) 18%, transparent) 0%, transparent 60%);
	pointer-events: none;
}

.petal--pro {
	/* Her throat, the deep one out of her own orchid, gathered the same way. */
	--door-edge: #C99BF0;
	/* Purple. The property side is purple everywhere, without exception. */
	--door-face: linear-gradient(150deg, #8A3BD6 0%, #6320B4 34%, #400C86 72%, #26054F 100%);
	--door-lit:  linear-gradient(150deg, #9B4EE8 0%, #7229CB 34%, #4C1099 72%, #310868 100%);
}

.petal--her {
	/*
	 * Baby pink, hers, and actually present rather than a hairline.
	 * The pink blooms up from the lower corner the way her orchid's colour
	 * gathers at the throat, so the door reads pink at a glance.
	 */
	--door-edge: #F4B0C8;
	--door-face: linear-gradient(150deg, #F4B0C8 0%, #C86FA8 34%, #8A2E96 72%, #5A0F92 100%);
	--door-lit:  linear-gradient(150deg, #F9C4D6 0%, #D782B7 34%, #9C3AA8 72%, #6A15A6 100%);
}

.petal:hover,
.petal:focus-visible {
	background: var(--door-lit);
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .48),
		inset 0 -1px 0 rgba(20, 0, 40, .55),
		inset 0 0 0 1px var(--door-edge),
		0 2px 2px rgba(20, 0, 40, .3),
		0 8px 16px -4px rgba(20, 0, 40, .44),
		0 18px 34px -14px rgba(20, 0, 40, .55);
}

@media (prefers-reduced-motion: reduce) {
	.petal { transition: none; }
	.petal::before { animation: none; opacity: 0; }
}

.petal__in {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/*
	 * THE FLOOR THAT ACTUALLY DECIDED THE DOOR'S HEIGHT.
	 *
	 * .petal carried a min-height and I shrank it three times. This one sat
	 * inside it, untouched, at 104px, and it is what a browser was answering
	 * with. min-height on a parent is a floor a child can raise and never one
	 * it can lower.
	 *
	 * Both floors live here now, next to each other, so nobody can shrink one
	 * and believe the door came down.
	 */
	min-height: clamp(46px, 6vw, 108px);
	padding: clamp(.75rem, 2.4vw, 1.4rem) clamp(.9rem, 2.6vw, 1.3rem);
}

.petal__over,
.petal__under { color: var(--door-edge); }

/* Her own mark, on the ground it was drawn for. */
.petal__logo {
	display: block;
	width: min(44%, 172px);
	height: auto;
	margin: 0 auto;
}

.petal--pro .petal__say {
	display: block;
	margin-top: clamp(.8rem, 2.4vh, 1.1rem);
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-size: clamp(1.08rem, 2.76vw, 1.176rem);
	line-height: 1.55;
}

.petal--her .petal__say {
	display: block;
	margin-top: clamp(.45rem, 1.4vh, .7rem);
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.128rem, 2.88vw, 1.21rem);
	line-height: 1.4;
	color: rgba(255, 255, 255, .86);
}

.petal__under {
	display: block;
	margin-top: clamp(.7rem, 2vh, 1rem);
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.74vw, 0.76rem);
	letter-spacing: .38em;
	text-indent: .38em;
	text-transform: uppercase;
	color: var(--door-edge);
}

.petal__go {
	display: inline-block;
	margin-top: clamp(.9rem, 2.4vh, 1.2rem);
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.74vw, 0.76rem);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	padding-bottom: 7px;
	border-bottom: 1px solid var(--accent);
	transition: color .2s ease, letter-spacing .3s ease;
}

.petal:hover .petal__go { color: #FFFFFF; letter-spacing: .44em; text-indent: .44em; }

@media (prefers-reduced-motion: reduce) {
	.petal__go { transition: none; }
	.petal:hover .petal__go { letter-spacing: .36em; text-indent: .36em; }
}

/* Her name, and the photograph under the doors */

.mast { padding-bottom: clamp(1.6rem, 4vh, 2.4rem); }

.cover { background: var(--paper); }

.cover img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 38%;
}

@media (min-width: 820px) { .cover img { aspect-ratio: 16 / 9; object-position: 50% 34%; } }

/* The swatches sit at the foot rather than over her photograph. */
.pick-accent { bottom: 12px; }

/* ── The four lift too ───────────────────────────────────────────────────
 *
 * The same three dimensions as the doors, so a photograph sits on the page
 * rather than being cut into it. A lit top edge, a shaded bottom one, and
 * the shadow close underneath.
 * ───────────────────────────────────────────────────────────────────────── */

.four,
.spread,
.strip {
	gap: clamp(12px, 2.2vw, 22px);
	padding: clamp(12px, 2.2vw, 22px);
}

.four img,
.spread img,
.strip img,
.cover img,
.plate img {
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .30),
		0 1px 1px rgba(20, 0, 40, .30),
		0 4px 8px -3px rgba(20, 0, 40, .42),
		0 10px 20px -12px rgba(20, 0, 40, .5);
	transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease;
}

.four img:hover,
.spread img:hover,
.strip img:hover {
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .4),
		0 2px 2px rgba(20, 0, 40, .3),
		0 8px 16px -4px rgba(20, 0, 40, .44),
		0 20px 38px -14px rgba(20, 0, 40, .58);
}

@media (prefers-reduced-motion: reduce) {
	.four img, .spread img, .strip img, .cover img, .plate img { transition: none; }
	.four img:hover, .spread img:hover, .strip img:hover { transform: none; }
}

/* The big one at the top gets a little more room to sit in. */
.cover { padding: 0 clamp(12px, 2.2vw, 22px) clamp(12px, 2.2vw, 22px); }

/* ── The two halves of Esmeralda, each in its own colour ─────────────────── */

.half {
	background: var(--paper);
	text-align: center;
	padding: clamp(3rem, 9vh, 5rem) clamp(18px, 5vw, 3rem);
	border-top: 1px solid color-mix(in srgb, var(--half-colour) 40%, transparent);
}

.half--pro { --half-colour: #B551B8; }
.half--her { --half-colour: #F4B0C8; }

.half__over {
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.81vw, 0.806rem);
	letter-spacing: .4em;
	text-indent: .4em;
	text-transform: uppercase;
	color: var(--half-colour);
	margin: 0;
}

.half--pro .half__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: clamp(1.4rem, 5.4vw, 2.4rem);
	line-height: 1.3;
	color: #FFFFFF;
	margin: .8em auto 0;
	max-width: 20ch;
}

.half--her .half__head {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.6rem, 6.2vw, 2.6rem);
	line-height: 1.3;
	color: #FFFFFF;
	margin: .6em auto 0;
	max-width: 22ch;
}

.half__body {
	font-family: var(--font-util);
	font-size: clamp(1.128rem, 4.2vw, 1.142rem);
	line-height: 1.9;
	color: rgba(255, 255, 255, .82);
	max-width: 44ch;
	margin: 1.4em auto 0;
}

.half__pics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 2.2vw, 22px);
	max-width: 46rem;
	margin: clamp(2rem, 6vh, 3rem) auto 0;
}

.half__pics img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .30),
		0 0 0 1px color-mix(in srgb, var(--half-colour) 34%, transparent),
		0 4px 8px -3px rgba(20, 0, 40, .42),
		0 12px 24px -12px rgba(20, 0, 40, .5);
	transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease;
}

.half__pics img:hover {
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .4),
		0 0 0 1px var(--half-colour),
		0 8px 16px -4px rgba(20, 0, 40, .44),
		0 22px 40px -14px rgba(20, 0, 40, .58);
}

@media (prefers-reduced-motion: reduce) {
	.half__pics img { transition: none; }
	.half__pics img:hover { transform: none; }
}

.half__go {
	display: inline-block;
	margin-top: clamp(2rem, 6vh, 2.8rem);
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.81vw, 0.78rem);
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--half-colour);
	border-bottom: 1px solid var(--half-colour);
	padding-bottom: 8px;
	transition: color .2s ease, letter-spacing .3s ease;
}

.half__go:hover { color: #FFFFFF; letter-spacing: .42em; text-indent: .42em; }

/* ── The case ────────────────────────────────────────────────────────────
 *
 * Something to buy into, said in three. Joy carries the argument, so there
 * is no statistic anywhere in it.
 * ───────────────────────────────────────────────────────────────────────── */

.case {
	background: var(--paper);
	text-align: center;
	padding: clamp(3.5rem, 10vh, 6rem) clamp(18px, 5vw, 3rem);
}

.case__over {
	font-family: var(--font-head);
	font-size: clamp(0.76rem, 2.81vw, 0.806rem);
	letter-spacing: .4em;
	text-indent: .4em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}

.case__head {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: clamp(1.5rem, 6vw, 2.8rem);
	line-height: 1.24;
	color: #FFFFFF;
	margin: .7em auto 0;
	max-width: 22ch;
}

.case__three {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.8rem, 5vw, 3rem);
	max-width: 58rem;
	margin: clamp(2.4rem, 7vh, 3.6rem) auto 0;
}

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

.case__n {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.3rem, 4.4vw, 1.6rem);
	line-height: 1.3;
	color: var(--accent);
	margin: 0;
}

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

/* ── The two sides, unmistakably ─────────────────────────────────────────
 *
 * Purple is the property side. Pink is the Esmeraldas. Everywhere, without
 * exception, so a woman knows which room she is standing in.
 * ───────────────────────────────────────────────────────────────────────── */

.half--pro {
	background: linear-gradient(168deg, #3A0A72 0%, #1E0440 100%);
	border-top: 2px solid #8A3BD6;
}

.half--her {
	background: linear-gradient(168deg, #7A2A9E 0%, #4E0B88 100%);
	border-top: 2px solid #F4B0C8;
}

.half--her .half__over,
.half--her .half__go { color: #F4B0C8; }
.half--pro .half__over,
.half--pro .half__go { color: #C99BF0; }

/* ─────────────────────────────────────────────────────────────────────────
 * MADAME MONET HOLDS A ROOF
 * Contact, and Media And Partnerships, sit beneath her. Wide screens open on
 * hover and on keyboard focus. Her narrow pane simply shows them, indented,
 * because a menu that needs a hover is a menu she cannot reach.
 * ───────────────────────────────────────────────────────────────────────── */

.site-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 641px) {

	.site-nav > li { position: relative; }

	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 40;
		min-width: 13.5rem;
		display: grid;
		gap: .1rem;
		padding: .7rem .2rem .8rem;
		margin-top: .55rem;
		background: var(--plate-ground);
		border: 1px solid var(--rule);
		border-radius: 3px;
		box-shadow: 0 14px 34px -18px rgba(20, 0, 40, .8);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .26s ease, transform .26s ease, visibility .26s;
	}

	.site-nav > li:hover > .sub-menu,
	.site-nav > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.site-nav .sub-menu a {
		display: block;
		padding: .42rem 1.1rem;
		opacity: .82;
	}

	.site-nav .sub-menu a:hover { opacity: 1; }

	.site-nav__roof > a::after {
		content: "\00b7";
		margin-left: .42em;
		color: var(--accent);
	}
}

@media (max-width: 640px) {

	.site-nav .sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem 1.1rem;
		width: 100%;
		padding: .35rem 0 0 1rem;
		border-left: 1px solid var(--rule);
		margin-left: .1rem;
	}

	.site-nav .sub-menu a { opacity: .68; }
}

@media (prefers-reduced-motion: reduce) {
	.site-nav .sub-menu { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * WHICH ROOM SHE IS STANDING IN
 *
 * Her ruling, 22 August 2026: every Esmeraldas page wears the pink, every
 * property page wears the purple. She knows which side she is on from the
 * colour, before she reads a word.
 *
 * The tokens carry it, so a band, a rule, a heading and a link all move
 * together and nothing has to be repainted by hand.
 * ───────────────────────────────────────────────────────────────────────── */

body.side-her {
	--accent:      #F4B0C8;
	--accent-deep: #E38FB4;
	--accent-hot:  #F9C4D6;
	--side-band:   linear-gradient(168deg, #C25A96 0%, #8A2E96 52%, #5A0F92 100%);
	--side-edge:   #F4B0C8;
}

body.side-pro {
	--accent:      #C99BF0;
	--accent-deep: #A971E2;
	--accent-hot:  #8A3BD6;
	--side-band:   linear-gradient(168deg, #3A0A72 0%, #1E0440 100%);
	--side-edge:   #8A3BD6;
}

/* The page's own opening band takes its side's colour and its side's edge. */
body.side-her .lead,
body.side-pro .lead {
	background: var(--side-band);
	border-top: 2px solid var(--side-edge);
}

/* And so does every band that follows it down the page. */
body.side-her .price,
body.side-her .ask,
body.side-pro .price,
body.side-pro .ask {
	background: var(--side-band);
}

body.side-her .lead__over,
body.side-pro .lead__over,
body.side-her .price__over,
body.side-pro .price__over,
body.side-her .ask__over,
body.side-pro .ask__over { color: var(--accent); }

/* Rules, numbers and the small caps that mark a section. */
body.side-her .steps,
body.side-pro .steps { border-top: 1px solid var(--side-edge); }

body.side-her .step__n,
body.side-pro .step__n { color: var(--accent); }

/* Her side says pink out loud — the eyebrow, the rule beneath her heading,
   and every link she is invited to follow. */
body.side-her .lead__over { color: #F9C4D6; }

body.side-her .lead__head::after {
	content: "";
	display: block;
	width: 3.4rem;
	height: 2px;
	margin: .8em auto 0;
	background: var(--side-edge);
	border-radius: 2px;
}

body.side-her .seek__go,
body.side-her .doorway__go,
body.side-her a.more { color: #F9C4D6; border-bottom-color: #F4B0C8; }

/* Her narrow pane: the menu holds itself to three lines rather than five. */
@media (max-width: 640px) {
	.site-nav { gap: .34rem 1rem; }
	.site-nav a { font-size: .88rem; }
	.site-nav .sub-menu { padding-top: .28rem; gap: .34rem .9rem; }
}

/* Every band on her side, all the way down, and every band on theirs. */
body.side-her .two,
body.side-her .doorway,
body.side-her .free,
body.side-her .seek,
body.side-pro .two,
body.side-pro .doorway,
body.side-pro .free,
body.side-pro .seek { border-top: 1px solid var(--side-edge); }

body.side-her .two__over,
body.side-her .doorway__over,
body.side-her .free__head,
body.side-her .seek__over,
body.side-pro .two__over,
body.side-pro .doorway__over,
body.side-pro .free__head,
body.side-pro .seek__over { color: var(--accent); }

body.side-her .doorway__go,
body.side-her .two a,
body.side-pro .doorway__go,
body.side-pro .two a { color: var(--accent); }

body.side-her .doorway__card:hover,
body.side-her .doorway__card:focus-visible,
body.side-pro .doorway__card:hover,
body.side-pro .doorway__card:focus-visible { border-color: var(--side-edge); }

/* One band in every three carries the side's colour, so the page breathes
   instead of running as one long field of purple. */
body.side-her .free,
body.side-pro .free { background: var(--side-band); }

/* ─────────────────────────────────────────────────────────────────────────
 * THE GROUND REACHES EVERY EDGE
 *
 * Found on her live site the night it went up: white bars down both sides and
 * white above and below. The cause is not the theme — it is WordPress's own
 * block styles and a third-party plugin's stylesheet, both of which land on a
 * live site that a build site never had.
 *
 * A theme cannot control which plugins are installed. It can refuse to let
 * any of them decide what colour the page is.
 * ───────────────────────────────────────────────────────────────────────── */

html {
	background: var(--ground);
	/* A short page on a tall screen shows the ground beneath the footer. */
	min-height: 100%;
}

body {
	background: var(--ground);
	margin: 0;
	/* Nothing may reach past the sides. A single wide child made the whole
	   page scroll sideways once already. */
	overflow-x: hidden;
}

/*
 * WordPress's layout variables constrain a block to a content width and put
 * the page's background either side of it. Esmeralda lays out its own pages,
 * so the constraint has nothing to hold and only shows as bars.
 */
body,
#main,
.site-header,
.site-footer {
	max-width: none;
	width: auto;
}

#main {
	display: block;
	background: var(--ground);
}

/* Every band Esmeralda paints reaches the full width of the window. */
#main > section,
#main > figure,
#main > article,
#main > nav,
#main > form,
#main > div {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/*
 * A plugin that ships a whole design system — SureCart is on her live site and
 * is ruled out by name — sets its own page colours through variables. Named
 * here so its cart and its buttons cannot repaint her ground while somebody
 * removes it.
 */
:root {
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
	--sc-color-brand-primary: var(--accent, #F4B0C8);
	--sc-panel-background-color: var(--plate-ground, #2A0050);
	--sc-input-help-text-color: var(--ink-soft, rgba(255, 255, 255, .82));
}

.wp-site-blocks,
.is-layout-constrained,
.is-layout-flow {
	max-width: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * THE GROUND IS THE GROUND, NOT A BORDER
 *
 * Found on her live homepage: body carried 24px of padding all round, so
 * every band on the page sat at x=25 with 329 of her 379 to work in, and the
 * ground showed down both sides as a frame. She read it as narrow, and as
 * gated.
 *
 * A page whose sections paint their own ground has nothing to gain from a
 * margin around the whole of it, and on a phone it costs the edges.
 * ───────────────────────────────────────────────────────────────────────── */

body {
	padding: 0;
	background: var(--ground);
}

/* ─────────────────────────────────────────────────────────────────────────
 * THE PURPLE HAS A BODY
 *
 * Her words: I didn't notice it was all purple. A ground with no body reads
 * as dead, and everything above her first photograph was one flat colour.
 *
 * Lit at the top, true through the middle, a shade deeper at the foot — so a
 * band has a floor rather than an edge, and the eye can tell one from the
 * next. The same fix Aunt Tea's flat orange took.
 *
 * Her orchid is untouched by any of this. Where something needs to move so
 * the orchid holds, the thing behind it moves.
 * ───────────────────────────────────────────────────────────────────────── */

.site-header {
	background: linear-gradient(180deg, #5A0F9E 0%, #4B0082 100%);
	border-bottom: 1px solid rgba(222, 208, 242, .16);
}

/*
 * Her mark on the left, MENU on the right, on one line. Her ruling, said twice
 * in one breath.
 *
 * It lives here rather than in quiet.css because editorial.css loads last and
 * wins — three rules I wrote in quiet.css lost this cascade silently tonight
 * and read as correct in the file every time.
 */
@media (max-width: 860px) {

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

	.site-header__mark { display: block; order: 1; }
	.site-open { display: flex; order: 2; margin-left: auto; }
	.esm-folds .site-nav { order: 3; }
}

.bloom {
	background: linear-gradient(180deg, #500093 0%, #4B0082 54%, #3E006C 100%);
}

.cover {
	background: linear-gradient(180deg, #3E006C 0%, #4B0082 100%);
}

.case {
	background: linear-gradient(180deg, #4B0082 0%, #55008F 48%, #3E006C 100%);
}

.four {
	background: linear-gradient(180deg, #3E006C 0%, #45007A 100%);
}

.give {
	background: linear-gradient(180deg, #3E006C 0%, #4B0082 60%, #37005F 100%);
}

.sign {
	background: linear-gradient(180deg, #37005F 0%, #2C004C 100%);
}