/*
 * LocaLilly — the look, assembled from the tokens in style.css.
 *
 * Every class here was read out of the parent's own base.css before it was
 * written. A class name that was assumed is how a whole flow breaks silently
 * and looks like a spacing fault for two days.
 *
 * THE PLATE IS THE ONE MATERIAL.
 *
 * Her logo is an enamelled street nameplate: a bright frame, a fine inner
 * keyline, a shine falling across the enamel, and letters standing off it.
 * A category is a plate. A young person's card is her own plate. One substance
 * carrying one meaning does more than any amount of decoration, so the plate
 * appears everywhere and no second surface is invented beside it.
 */

/* ── Type ─────────────────────────────────────────────────────────────── */

/*
 * The parent sets the face and the size and deliberately sets no colour.
 * Enamel white on the deep purple measures 12.09:1, letter against ground.
 */
/*
 * The parent sets text-transform: uppercase on .head. Her instruction is that
 * she does not want it all in caps, so the child says otherwise — the parent
 * serves all forty and is never edited from here.
 *
 * Baloo Bhai 2 is a warm face with real weight in it, so it holds a headline
 * at size without needing capitals to do the work.
 */
.head {
	color: var(--enamel);
	text-transform: none;
	letter-spacing: -.005em;
	line-height: 1.04;
	font-weight: 600;
}

/* The mint is the ILLY, so it marks the one word that carries the line. */
.head em,
.head .say {
	font-style: normal;
	color: var(--mint);
}

.body {
	color: var(--row-ink-soft);
}

.eyebrow {
	color: var(--mint);
}

a {
	color: var(--mint);
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}

a:hover {
	color: var(--mint-lit);
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* ── The plate ────────────────────────────────────────────────────────── */

.plate {
	position: relative;
	display: block;
	padding: clamp(18px, 4.4vw, 34px) clamp(20px, 5vw, 40px);
	background: var(--purple);
	border: clamp(5px, 1.4vw, 9px) solid var(--enamel);
	border-radius: clamp(10px, 2.4vw, 18px);
	box-shadow:
		/* the fine keyline that traces the enamel, just inside the frame */
		inset 0 0 0 1.5px var(--keyline),
		inset 0 0 0 4px rgba(63, 27, 102, .55),
		var(--surface-shadow);
	color: var(--enamel);
	text-decoration: none;
}

/*
 * The shine falls across the enamel and never behind type.
 *
 * Set the opacity inside the colour rather than on the element — two classes
 * on one element share their pseudo-elements, and an opacity set here once
 * silently dimmed a scrim three rounds of strengthening could not explain.
 */
.plate::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--satin);
	pointer-events: none;
	border-radius: inherit;
}

.plate > * {
	position: relative;
}

.plate .head {
	font-size: clamp(26px, 7vw, 46px);
	text-shadow: var(--lift);
}

/* A plate that is a link lifts on the way to being pressed. */
a.plate {
	transition: transform 220ms var(--float-ease), box-shadow 220ms var(--float-ease);
}

a.plate:hover,
a.plate:focus-visible {
	transform: translateY(-3px);
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 0 0 4px rgba(63, 27, 102, .55),
		var(--card-shadow-lift);
}

/* ── A neighbour's own hand ───────────────────────────────────────────── */

/*
 * The hand appears only where a real person wrote the words, so the face
 * itself carries the argument. A handwritten heading LocaLilly wrote would be
 * a lie in the one material that must never lie.
 */
.hand {
	font-family: var(--font-hand);
	font-size: clamp(21px, 5.4vw, 27px);
	line-height: 1.28;
	color: var(--enamel);
}

.hand-word {
	font-family: var(--font-hand);
	font-size: clamp(30px, 8vw, 44px);
	color: var(--mint);
	display: block;
}

/* ── Motion, offered rather than imposed ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	a.plate:hover,
	a.plate:focus-visible {
		transform: none;
	}
}

/* ── The front page ───────────────────────────────────────────────────── */

/*
 * Built at 379 first and widened from there. Her pane is roughly 379 across
 * and well over a thousand tall, so every height here is in rem — a height in
 * vh turns that pane into a near-empty column and reads as a broken site while
 * every wide check passes.
 */

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

/*
 * Centred, and smaller. Her instruction, 22 August 2026: mine's smaller, and
 * it's centered, and it looks better. She is right — a headline set left and
 * large fought the photograph behind it, where a centred one sits with it.
 */
.hero-stack {
	display: grid;
	gap: clamp(14px, 2.8vw, 24px);
	justify-items: center;
	text-align: center;
}

/*
 * SIZED OFF HER OWN SITE, NOT GUESSED.
 *
 * She is reading this on a computer while every check of mine was at 379, and
 * three passes went by size alone. Her stylesheets say:
 *
 *   headline     Prosto One   74px / 82px, weight 500
 *   the line     Baloo Bhai 2 26px, and 18px below 767
 *
 * So 74 is the ceiling and it is reached at her desktop width exactly. The
 * floor is generous rather than small — the fault she named was going to the
 * other extreme.
 */
.hero-plate .head {
	font-size: clamp(44px, 5.2vw, 74px);
	line-height: 1.11;
	font-weight: 500;
	max-width: 16ch;
}

.hero-plate .lede {
	font-family: var(--font-say);
	font-size: clamp(18px, 1.9vw, 26px);
	line-height: 1.5;
	font-weight: 400;
	/*
	 * One line, all the way across, on a computer. Her note: it balances the
	 * heading and sits nicely between it and the search bar.
	 *
	 * The measure is wide enough to hold the whole sentence at 26px, so it
	 * breaks only when the pane is genuinely too narrow to carry it.
	 */
	margin-inline: auto;
	max-width: min(100%, 86ch);
	text-wrap: balance;
	color: var(--enamel);
	text-shadow: 4px 6px 10px rgba(18, 2, 22, .62);
}

.hero-plate .arrival {
	margin-inline: auto;
	max-width: 40ch;
	font-size: clamp(15.5px, 1.25vw, 19px);
}

/* The arrival line. Absent until it has a true sentence to say. */
.arrival {
	margin: 0;
	font: 500 clamp(15.5px, 4vw, 18px)/1.45 var(--font-util);
	color: var(--mint);
	max-width: 30ch;
}

.arrival[hidden] {
	display: none;
}

.arrival .arrival-ask {
	color: var(--enamel);
}

.lede {
	margin-top: 0;
	color: var(--row-ink-soft);
}

/* ── The search, on its own plate ─────────────────────────────────────── */

/*
 * Finer. Her instruction: trim the bottom of the search bar up so it's a
 * little finer, and not as high.
 */
.seek-plate {
	width: min(100%, 60rem);
	margin-inline: auto;
	padding: clamp(9px, 1.5vw, 13px);
}

/*
 * margin: 0, and it is the empty band under the button.
 *
 * The parent's own .seek carries a 70px bottom margin, which sat inside the
 * plate as a stripe of purple below the search and read as a design decision
 * nobody had made. Measured in the browser rather than guessed at.
 */
.seek {
	display: grid;
	gap: 8px;
	margin: 0;
}

.seek-in {
	width: 100%;
	padding: 11px 15px;
	border: 0;
	border-radius: 8px;
	background: var(--seek-ground);
	background-image: var(--seek-sheen), var(--seek-ground);
	box-shadow: inset 0 0 0 1px var(--seek-rule);
	color: var(--seek-ink);
	font: 500 16px/1.2 var(--font-util);
}

.seek-in::placeholder {
	color: var(--seek-placeholder);
	opacity: 1;
}

.seek-go {
	padding: 13px 22px;
	margin-top: 3px;
	border: 0;
	border-radius: 8px;
	background: var(--seek-button);
	color: var(--seek-button-ink);
	font: 700 15px/1 var(--font-util);
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: var(--act-shadow);
}

/* ── The corner post ──────────────────────────────────────────────────── */

/*
 * Eight plates on a post, alternating, the way signs sit on a real corner.
 * The post is a line rather than an image, so it costs a request of nothing
 * and scales to any width.
 */

.posts {
	list-style: none;
	margin: clamp(22px, 4vw, 34px) 0 0;
	padding: 0;
	position: relative;
	display: grid;
	gap: clamp(12px, 2.6vw, 18px);
}

.posts::before {
	content: '';
	position: absolute;
	top: -0.5rem;
	bottom: -0.5rem;
	left: 50%;
	width: 6px;
	transform: translateX(-50%);
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(0,0,0,.32), var(--purple-lit) 42%, rgba(255,255,255,.42) 52%, var(--purple-mid));
	box-shadow: 0 10px 24px rgba(20, 5, 36, .4);
}

/*
 * The plates hang ON the post rather than floating beside it.
 *
 * The first build left ten pixels of air between each plate and the line, and
 * at 379 it read as two loose columns with a stripe down the middle rather
 * than as signs on a corner. Found by looking at the picture rather than by
 * reasoning about the rule.
 */
/*
 * NOT AS WIDE, A LITTLE HIGHER — AND THE MEASUREMENT BEHIND IT.
 *
 * Her instruction, 22 August 2026: can he resize those images and the buttons,
 * they're cutting off, you can't see the boy's head with the lawnmower.
 *
 * Measured before touching anything. The frame was 664 by 288 — an aspect of
 * 2.30 — and her photographs are 1.50 to 1.75. A frame wider than its picture
 * scales the picture to fill the width and cuts the difference off the top and
 * the bottom, and at 50% 50% it takes half from each. A third of the height
 * went, which on a standing figure is his head.
 *
 * So the frame now matches her photographs rather than fighting them.
 *
 * At her pane a plate takes most of the width, since 46% of 379 is a stamp
 * rather than a picture. The post still alternates, and legibility wins where
 * the two disagree.
 */
.post-plate {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	width: calc(78% + 3px);
}

.post-plate--right {
	margin-left: calc(22% - 3px);
	justify-content: flex-start;
}

@media (min-width: 46rem) {
	.post-plate {
		width: calc(46% + 3px);
	}

	.post-plate--right {
		margin-left: calc(54% - 3px);
	}
}

/* The stagger runs down the post rather than all at once. */
.js-float .posts .float {
	transition-delay: calc(var(--n, 0) * var(--float-stagger));
}

.post-face {
	padding: clamp(11px, 2.6vw, 16px) clamp(12px, 3vw, 20px);
	border-width: clamp(3px, .9vw, 5px);
	border-radius: clamp(7px, 1.8vw, 12px);
	width: 100%;
}

/*
 * The name sits on its own little nameplate rather than as white type on a
 * photograph. Her note: I really don't like the white heading on them, it's
 * boring.
 *
 * It is the same material as her logo, one size down — enamel ground, fine
 * keyline, mint rule beneath — so a category on a corner post looks like what
 * it is. One substance carrying one meaning, rather than eight colours.
 */
.post-name {
	display: inline-block;
	margin: 0 0 clamp(9px, 2vw, 14px) clamp(9px, 2vw, 14px);
	padding: clamp(6px, 1.5vw, 9px) clamp(11px, 2.6vw, 16px);
	background: var(--purple-deep);
	border-radius: 6px;
	box-shadow:
		inset 0 0 0 1px var(--keyline),
		inset 0 -3px 0 var(--mint),
		0 6px 16px rgba(20, 5, 36, .5);
	font: 600 clamp(14px, 3.6vw, 19px)/1.15 var(--font-say);
	letter-spacing: .01em;
	text-transform: none;
	color: var(--enamel);
}

/* ── The three steps ──────────────────────────────────────────────────── */

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(26px, 4.6vw, 44px);
}

.step {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.step-num {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 6px;
	background: var(--num-ground);
	color: var(--num-ink);
	font: 700 1.25rem/1 var(--font-util);
	box-shadow: var(--surface-shadow-soft);
}

.step-head {
	font-size: clamp(22px, 5.6vw, 32px);
	color: var(--enamel);
	line-height: 1.06;
}

.step .body {
	margin-top: 4px;
}

/* ── Shine, and why it exists ─────────────────────────────────────────── */

.sec--shine .head,
.sec--why .head {
	font-size: clamp(28px, 7.4vw, 56px);
}

.body--wide {
	max-width: 52ch;
}

/* ── Her mark ─────────────────────────────────────────────────────────── */

/*
 * The small plate, never the full sign.
 *
 * Her full nameplate carries the same words as the heading beneath it, and
 * two readings of one line is exactly what she would take away. So the mark is
 * the L alone, and the words are said once, in type, at size.
 */
.mark-plate {
	display: block;
	width: clamp(52px, 13vw, 76px);
	height: auto;
	filter: var(--mark-shadow);
}

/* ── The sampler ──────────────────────────────────────────────────────── */

/*
 * Her method, built as she describes it: the real page, the options as taps,
 * one variable moving, a plain label naming the choice, and a box she types
 * her own into.
 *
 * It appears on a build site and nowhere else, and it is deleted the moment
 * she rules. A control left standing after a decision is clutter wearing the
 * costume of flexibility.
 */
.try {
	width: 100%;
	padding: clamp(12px, 3vw, 18px);
	border-radius: 10px;
	background: rgba(20, 5, 36, .42);
	box-shadow: inset 0 0 0 1px rgba(246, 241, 248, .18);
	display: grid;
	gap: 8px;
}

.try[hidden] {
	display: none;
}

.try-name {
	margin: 0;
	font: 700 14.0px/1.4 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--count-note);
}

.try-taps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.try-tap {
	padding: 9px 12px;
	border: 0;
	border-radius: 7px;
	background: rgba(246, 241, 248, .12);
	box-shadow: inset 0 0 0 1px rgba(246, 241, 248, .3);
	color: var(--enamel);
	font: 600 14.0px/1 var(--font-util);
	cursor: pointer;
}

.try-tap[aria-pressed="true"] {
	background: var(--mint);
	color: var(--num-ink);
	box-shadow: var(--act-shadow);
}

.try-words {
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 7px;
	background: rgba(246, 241, 248, .12);
	box-shadow: inset 0 0 0 1px rgba(246, 241, 248, .3);
	color: var(--enamel);
	font: 500 14px/1.2 var(--font-util);
}

.try-words::placeholder {
	color: rgba(246, 241, 248, .6);
}

/* ── The mark, three ways ─────────────────────────────────────────────── */

/*
 * The mark, in the top corner and little.
 *
 * Her instruction, twice: a tiny thing, at the top corner. It was running the
 * full width of her pane and competing with the heading below it. A mark
 * identifies; the heading speaks.
 *
 * It floats over the hero rather than pushing it down, so the photograph
 * begins at the very top of the screen as it does on her own site.
 */


.topmark {
	display: block;
	width: clamp(96px, 12vw, 148px);
	line-height: 0;
	filter: var(--mark-shadow);
}

.topmark img {
	display: block;
	width: 100%;
	height: auto;
}

/* The hero begins at the top of the screen, with the mark over it. */
.hero-plate {
	padding-top: clamp(112px, 15vw, 168px);
}

.mark-sign[hidden],
.mark-plate[hidden] {
	display: none;
}

/* ── Her photographs, washed ──────────────────────────────────────────── */

/*
 * Read off her own homepage: a photograph behind, washed in her colour, with
 * the words standing on top. The wash is what keeps it hers rather than a
 * stock picture with type over it.
 *
 * wp_get_attachment_image writes explicit width and height attributes, and
 * without height:auto the browser honours them and distorts every photograph
 * on the site. One missing declaration cost Nan Made a whole site's worth.
 */
img {
	max-width: 100%;
	height: auto;
}

.behind {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* The hero, with her picture behind it. */
.hero-plate.has-picture {
	isolation: isolate;
}

/*
 * The wash — light enough to see the photograph, which is the whole reason it
 * is there. Her instruction, 22 August 2026: it's too dark, I want to see the
 * image.
 *
 * The first version sat at .82 rising to .90 and buried the picture. This one
 * carries its weight where the words are and lets go everywhere else: firm
 * across the top where the line and the heading sit, opening to .34 through
 * the middle so the photograph is plainly visible, and closing into the ground
 * at the foot so the section joins the next without a seam.
 *
 * The heading keeps its own lift, which is a multi-step shadow in her deep
 * purple, so white letters hold their edge over a pale photograph without the
 * wash having to do it.
 */
.hero-plate.has-picture::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		180deg,
		rgba(63, 27, 102, .78) 0%,
		rgba(63, 27, 102, .62) 26%,
		rgba(63, 27, 102, .34) 58%,
		rgba(63, 27, 102, .72) 88%,
		var(--purple-deep) 100%
	);
	pointer-events: none;
}

/* The two lines of plain type over the picture carry their own edge. */
.hero-plate.has-picture .arrival,
.hero-plate.has-picture .lede {
	text-shadow: 0 1px 3px rgba(20, 5, 36, .72), 0 0 14px rgba(20, 5, 36, .45);
}

.hero-plate.has-picture > .in {
	position: relative;
	z-index: 1;
}

/* A plate with a photograph inside it. */
.post-face.has-picture {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/*
	 * 3 by 2, which is her photographs' own shape, so almost nothing is
	 * cropped at any width. A fixed height cannot do this — it changes the
	 * frame's aspect every time the pane changes.
	 */
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: flex-end;
}

/*
 * And whatever little is cropped comes off the feet rather than the face.
 * Her ten are almost all standing figures, so the frame holds the upper half.
 */
.post-face.has-picture .behind {
	object-position: 50% 34%;
}

/*
 * NO WASH ON THE PLATES. THE HERO ALONE CARRIES ONE.
 *
 * Her ruling, 22 August 2026, and it breaks one of her own rules deliberately:
 * we can't just have a little bit, because it looks muddy and not clear.
 *
 * A half-strength wash on eight small pictures reads as a fault rather than a
 * treatment. So the photographs are shown as they are, and the one washed
 * image on the page is the hero — which makes it the hero rather than merely
 * the largest.
 *
 * The name holds its own ground now, so nothing needs darkening behind it.
 */

.post-face.has-picture .post-name {
	position: relative;
	z-index: 1;
}

/* And the picture beside Why LocaLilly Exists sits in a plate of its own. */
.why-picture {
	margin-top: clamp(20px, 4vw, 32px);
	padding: clamp(5px, 1.4vw, 9px);
	overflow: hidden;
}

.why-picture .inside {
	display: block;
	width: 100%;
	border-radius: clamp(5px, 1.4vw, 9px);
}

/* ── Nothing covers the dog ───────────────────────────────────────────── */

/*
 * Her instruction: the whole thing is the dog. So the hero holds the words in
 * its upper half, the photograph is left whole beneath them, and the search
 * waits in a band of its own underneath.
 *
 * The height is in rem rather than vh — her pane is narrow and very tall, and
 * a hero measured in screen heights becomes a near-empty column in it.
 */
/*
 * The words hold the top of the frame and she and the dog hold the rest.
 *
 * Capped in rem as well as in screen height: her pane is narrow and very tall,
 * and a hero measured in screen heights alone becomes a near-empty column in
 * it. min() takes whichever is smaller, so it fills a computer and behaves in
 * her pane.
 */
/*
 * PLACED WHERE SHE PUT IT, RATHER THAN WHERE IT FELL.
 *
 * Her instruction, 22 August 2026: the heading sits on her, around her belly,
 * right in the middle between the dog and her shoulders. And the line under it
 * has to be really visible, so it goes down on the grass.
 *
 * So the hero is a column that fills its own height: the heading is pushed to
 * her midriff and the line is pushed to the foot of the picture, where the
 * lawn is.
 */
.hero-plate.has-picture {
	min-height: min(100svh, 60rem);
	display: flex;
	flex-direction: column;
	padding-bottom: clamp(16px, 2.2vw, 30px);
}

/*
 * align-items: stretch, and it is the whole fault.
 *
 * The parent's .in sets align-items: center. Turned into a flex row that
 * centres its child vertically, so the stack sat 281px tall inside 702px of
 * space and every percentage row resolved against the wrong number. The rows
 * were correct the entire time; the box they measured was not.
 *
 * Found by measuring the real boxes in the browser rather than reasoning about
 * the rule.
 */
/*
 * A COLUMN, AND THIS BROKE THE MOMENT THE SEARCH MOVED IN.
 *
 * It was a flex row with one child, which was fine while the stack was alone.
 * The search arriving at the top of the hero made two children, and a row put
 * them side by side — the heading squeezed to one word a line and the search
 * cut off above the fold. Caught by looking at the picture rather than by
 * reading the change.
 */
.hero-plate.has-picture > .in {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/*
 * Explicit rows rather than pushing with auto margins.
 *
 * The first attempt used margin-top: auto and the line came to rest on the
 * dog's face — near the bottom but not at it. Rows say exactly where each
 * belongs and cannot drift:
 *
 *   row 1   the air above her
 *   row 2   the heading, landing on her belly
 *   row 3   the rest, with the line held at its foot — the grass
 */
.hero-plate.has-picture .hero-stack {
	flex: 1;
	display: grid;
	grid-template-rows: 46% auto 1fr;
	justify-items: center;
	gap: 0;
}

.hero-plate.has-picture .head {
	grid-row: 2;
	margin: 0;
}

.hero-plate.has-picture .lede {
	grid-row: 3;
	align-self: end;
	margin: 0;
}

/*
 * She and the dog walk up the centre of the frame, so the crop holds the
 * centre and the foot rather than drifting to the top.
 */
/*
 * She stands lower in the frame, so the words clear her face.
 *
 * Her instruction: move it down, it's sitting right over her face. The lever
 * is the photograph rather than the type, since the type is now the size she
 * asked for. Anchoring the picture to its foot and giving the hero more height
 * lets her walk down out from under the heading.
 */
.hero-plate.has-picture .behind {
	object-position: 50% 100%;
}

/* The wash lets go entirely across the lower half, where she and the dog are. */
.hero-plate.has-picture::after {
	/*
	 * One notch up, which she allowed, and it is spent where the words are —
	 * a little across her middle so the heading holds, and more at the foot so
	 * the line on the grass is properly readable. The picture keeps its light
	 * through the upper half, where she and the house are.
	 */
	background: linear-gradient(
		180deg,
		rgba(63, 27, 102, .60) 0%,
		rgba(63, 27, 102, .34) 26%,
		rgba(63, 27, 102, .30) 48%,
		rgba(63, 27, 102, .46) 68%,
		rgba(63, 27, 102, .70) 88%,
		rgba(63, 27, 102, .82) 100%
	);
}

/* The search, in its own band, close under the picture. */
.sec--seek {
	padding-top: clamp(14px, 2.6vw, 24px);
	padding-bottom: clamp(20px, 3.6vw, 34px);
}

/* ── The safety page ──────────────────────────────────────────────────── */

/*
 * Her page, and it reads as reassurance rather than as terms. Each answer on
 * its own plate, because the plate is the material and a set of them reads as
 * a street rather than as a policy document.
 */
.sec--safety-open .head {
	font-size: clamp(30px, 4.4vw, 56px);
	max-width: 20ch;
}

.sec--safety .in {
	display: grid;
	gap: clamp(14px, 2.4vw, 22px);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.sec--safety .in {
		grid-template-columns: 1fr 1fr;
	}
}

.safety {
	position: relative;
	padding: clamp(20px, 3.4vw, 34px);
	background: var(--purple);
	border: clamp(4px, 1vw, 7px) solid var(--enamel);
	border-radius: clamp(9px, 2vw, 15px);
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 0 0 4px rgba(63, 27, 102, .55),
		var(--surface-shadow-soft);
}

.safety::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--satin);
	pointer-events: none;
}

.safety > * {
	position: relative;
}

.safety-head {
	font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.14;
	color: var(--enamel);
	margin-bottom: clamp(10px, 1.6vw, 16px);
}

.safety .body {
	margin-top: 0;
	max-width: 46ch;
}

.safety .body + .body {
	margin-top: 12px;
}

/* ── The door to Layers Of Safety ─────────────────────────────────────── */

.sec--layers {
	padding-top: clamp(10px, 2vw, 20px);
}

.layers {
	display: grid;
	gap: clamp(8px, 1.4vw, 12px);
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	text-decoration: none;
}

.layers-name {
	font: 600 clamp(21px, 2.6vw, 30px)/1.14 var(--font-say);
	color: var(--mint);
}

.layers-line {
	margin: 0;
	max-width: none;
	color: var(--enamel);
}

/* ── Pressable, rather than a picture with a shadow ───────────────────── */

/*
 * Four things make a button pressable, and Replay Kids separated them so I
 * could take the mechanism and leave the look. Credit is entirely theirs.
 *
 *   a hard offset shadow with NO BLUR       the thickness — a slab with a side
 *   a soft one behind it                    the room it sits in
 *   an inset highlight along the top        the padding, and on enamel it is
 *                                           the glaze catching the light
 *   a faint inset dark along the bottom     where it meets its own edge
 *
 * A blurred shadow reads as float. A solid offset edge reads as a thing you
 * could put a thumb on. That is the whole trick and it is one line.
 *
 * AND THE PRESS TRAVELS EXACTLY THE THICKNESS IT LOSES. Seven down, seven of
 * edge removed, so the button meets the page. Travel a different distance than
 * the edge you take away and it slides instead — which reads as a hover rather
 * than a press.
 */
.press {
	--edge: #3F1B66;
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 2px 0 rgba(255, 255, 255, .9),
		inset 0 -1px 0 rgba(20, 5, 36, .10),
		0 7px 0 var(--edge),
		0 10px 22px rgba(20, 5, 36, .34);
	transition: transform .13s cubic-bezier(.3, .7, .4, 1),
		box-shadow .13s cubic-bezier(.3, .7, .4, 1);
	cursor: pointer;
}

/*
 * A keyboard press looks pressed rather than outlined. Replay Kids' change and
 * it is better than mine — an outline says selected, and this says pressed.
 */
.press:active,
.press:focus-visible {
	transform: translateY(7px);
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 2px 0 rgba(255, 255, 255, .9),
		0 0 0 var(--edge),
		0 2px 8px rgba(20, 5, 36, .3);
	outline: 3px solid var(--mint-lit);
	outline-offset: 3px;
}

.press:active {
	outline: 0;
}

/* The mint buttons press against their own darker edge. */
.seek-go.press,
button.press {
	--edge: #12836F;
}

a.post-face.press {
	display: flex;
	text-decoration: none;
}

/* ── The door ─────────────────────────────────────────────────────────── */

.sec--door .head {
	font-size: clamp(28px, 6.6vw, 48px);
	max-width: 20ch;
}

.doors {
	display: grid;
	gap: clamp(16px, 3vw, 26px);
	margin: clamp(24px, 4.4vw, 38px) 0 0;
}

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

.door {
	display: grid;
	gap: 9px;
	align-content: start;
}

.door-name {
	font: 600 clamp(19px, 4.6vw, 24px)/1.15 var(--font-say);
	color: var(--mint);
	margin: 0;
}

.door-note {
	font: 400 clamp(15.5px, 3.6vw,17.0px)/1.5 var(--font-util);
	color: var(--row-ink-soft);
	margin: 0 0 4px;
	max-width: 38ch;
}

.door-note strong {
	color: var(--enamel);
}

.door .seek-in {
	background: rgba(20, 5, 36, .3);
	background-image: none;
	box-shadow: inset 0 0 0 1px rgba(246, 241, 248, .34);
}

.door .seek-in::placeholder {
	color: rgba(246, 241, 248, .6);
}

.door .press {
	margin-top: 4px;
	padding: 14px 20px;
	border: 0;
	border-radius: 9px;
	background: linear-gradient(120deg, var(--mint-lit), var(--mint));
	color: var(--num-ink);
	font: 700 clamp(15.5px, 3.9vw, 17px)/1 var(--font-say);
}

.door-small {
	font: 400 clamp(15.5px, 3.2vw,17.0px)/1.5 var(--font-util);
	color: var(--note-ink);
	margin: 6px 0 0;
	max-width: 34ch;
}

/* The other seven, flat and even, since none of them is the one you wanted. */
.posts--flat {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: clamp(12px, 2.4vw, 18px) 0 0;
	padding: 0;
}

.posts--flat::before {
	display: none;
}

.posts--flat li {
	list-style: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: block;
}

.posts--flat .post-face {
	aspect-ratio: auto;
	min-height: 0;
	padding: 12px 15px;
	border-width: 3px;
	border-radius: 9px;
	align-items: center;
}

.posts--flat .post-name {
	margin: 0;
	box-shadow: none;
	background: none;
	padding: 0;
	font-size: clamp(15.5px, 3.5vw,17.0px);
}

/* ── Version three · the search at the top, the eight moving sideways ── */

/*
 * Her ruling, 23 August 2026. The search box is never the main element, the
 * photographs move across rather than down, and there is movement the moment
 * somebody lands.
 */



/* The hero gives the search its room at the top and keeps the rest for her. */
.hero-plate.has-picture {
	padding-top: clamp(16px, 3vw, 26px);
}

/*
 * MOVEMENT THE MOMENT SOMEBODY LANDS.
 *
 * Her ruling: when users land on the page, there has to be movement, so add
 * scroll to create movement over the hero image.
 *
 * The photograph drifts a little slower than the page, so scrolling one line
 * moves her and the dog against the words rather than with them. It is small on
 * purpose — a large parallax reads as a trick and a small one reads as depth.
 *
 * Held in a custom property and set by script, so a browser that never runs it
 * simply gets a still photograph rather than a broken one.
 */
.hero-plate.has-picture .behind {
	transform: translate3d(0, var(--drift, 0px), 0) scale(1.08);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.hero-plate.has-picture .behind {
		transform: none;
	}
}

/* ── The rail ─────────────────────────────────────────────────────────── */

.rail {
	list-style: none;
	margin: clamp(16px, 3vw, 24px) 0 0;
	padding: 0 clamp(16px, 5vw, 72px) clamp(10px, 2vw, 14px);
	margin-inline: calc(-1 * clamp(18px, 5vw, 72px));
	display: flex;
	gap: clamp(10px, 1.8vw, 16px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--mint) transparent;
	-webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar {
	height: 8px;
}

.rail::-webkit-scrollbar-thumb {
	background: var(--mint);
	border-radius: 4px;
}

.rail::-webkit-scrollbar-track {
	background: rgba(20, 5, 36, .34);
	border-radius: 4px;
}

/*
 * THE SIZE, WHICH SHE SAID DECIDES IT.
 *
 * A card is wide enough to be a photograph and narrow enough that the next one
 * shows past the edge — at 379 that is about 62% of the pane, so one and a half
 * are always visible and nobody thinks the list has ended.
 */
.rail-item {
	flex: 0 0 clamp(13rem, 62vw, 19rem);
	scroll-snap-align: start;
	margin: 0;
	padding: 0;
	width: auto;
	display: block;
}

.rail .post-face {
	aspect-ratio: 3 / 2;
	min-height: 0;
	width: 100%;
	border-width: clamp(4px, 1vw, 6px);
	border-radius: clamp(9px, 2vw, 14px);
}

.rail .post-name {
	margin: 0 0 clamp(9px, 2vw, 13px) clamp(9px, 2vw, 13px);
}

.rail-hint {
	font: 700 14.0px/1.4 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--count-note);
	margin: clamp(6px, 1.4vw, 10px) 0 0;
}

/* The stagger runs across the rail rather than down a post. */
.js-float .rail .float {
	transition-delay: calc(var(--n, 0) * 70ms);
}

/* The line that says what we deliberately never hold. */
.door-small--say {
	color: var(--mint);
	margin-top: 2px;
}

.door-small--say strong {
	color: var(--enamel);
	font-weight: 500;
}

/* ── The bar, on every page ───────────────────────────────────────────── */

/*
 * Her ruling, 23 August 2026: the nameplate at the side, the weather under it,
 * and a burger menu everywhere.
 *
 * Mark on the left, burger on the right, and the weather beside the mark where
 * there is room and beneath it where there is not — which is her own two
 * options, chosen by the width rather than by me.
 */
.bar {
	position: relative;
	z-index: 40;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: 'mark weather burger';
	align-items: center;
	gap: clamp(9px, 2vw, 18px);
	padding: clamp(10px, 2.2vw, 16px) clamp(14px, 4vw, 30px);
	background: var(--purple-deep);
}

@media (max-width: 34rem) {
	.bar {
		grid-template-columns: auto auto;
		grid-template-areas:
			'mark burger'
			'weather weather';
		row-gap: 10px;
	}
}

.bar-mark {
	grid-area: mark;
	display: block;
	width: clamp(92px, 20vw, 124px);
	line-height: 0;
	filter: var(--mark-shadow);
}

.bar-mark img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * THE WEATHER STANDS OUT, AND NEVER IN ITALICS.
 *
 * She asked for italics or something. **She cannot read italics — her own law
 * of 20 August — so it is the something**, and saying that plainly is better
 * than quietly doing it another way.
 *
 * It sits on a small enamel plate of its own, in her mint. The plate is the
 * material already doing that job everywhere else on this site, so the line
 * that changes every hour is the one wearing her logo's own clothes.
 */
.bar .arrival {
	grid-area: weather;
	margin: 0;
	justify-self: start;
	max-width: none;
	padding: clamp(7px, 1.5vw, 10px) clamp(11px, 2.2vw, 15px);
	border: 3px solid var(--enamel);
	border-radius: 9px;
	background: var(--purple);
	box-shadow:
		inset 0 0 0 1px var(--keyline),
		inset 0 -2px 0 var(--mint),
		0 8px 18px rgba(20, 5, 36, .34);
	font: 600 clamp(14.0px, 1.5vw, 15px)/1.35 var(--font-say);
	color: var(--mint);
	letter-spacing: .004em;
}

.bar .arrival::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--satin);
	pointer-events: none;
	border-radius: inherit;
}

.bar .arrival .arrival-ask {
	color: var(--enamel);
	font-weight: 500;
}

.bar .arrival[hidden] {
	display: none;
}

/* The burger. */
.bar-burger {
	grid-area: burger;
	justify-self: end;
	display: grid;
	gap: 4px;
	width: clamp(42px, 9vw, 50px);
	height: clamp(42px, 9vw, 50px);
	place-content: center;
	padding: 0;
	border: 3px solid var(--enamel);
	border-radius: 9px;
	background: var(--purple);
	--edge: #2C0F45;
}

.bar-burger span {
	display: block;
	width: clamp(17px, 4vw, 20px);
	height: 2px;
	border-radius: 1px;
	background: var(--enamel);
	transition: transform .18s cubic-bezier(.3, .7, .4, 1), opacity .12s;
}

.bar--open .bar-burger span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.bar--open .bar-burger span:nth-child(2) {
	opacity: 0;
}

.bar--open .bar-burger span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* The menu it opens. */
.bar-menu {
	grid-column: 1 / -1;
	margin-top: clamp(8px, 1.6vw, 12px);
}

.bar-menu[hidden] {
	display: none;
}

.bar-list {
	list-style: none;
	margin: 0;
	padding: clamp(9px, 2vw, 13px);
	display: grid;
	gap: 6px;
	background: var(--purple);
	border: 4px solid var(--enamel);
	border-radius: 11px;
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 0 0 4px rgba(63, 27, 102, .55),
		0 16px 34px rgba(20, 5, 36, .46);
}

.bar-list a {
	display: block;
	padding: 12px 14px;
	border-radius: 7px;
	text-decoration: none;
	color: var(--enamel);
	font: 600 clamp(15.5px, 3.8vw, 17px)/1 var(--font-say);
	background: rgba(20, 5, 36, .3);
	box-shadow: inset 0 0 0 1px rgba(246, 241, 248, .26);
}

.bar-list a:hover,
.bar-list a:focus-visible {
	background: var(--mint);
	color: var(--num-ink);
}

/* The hero starts under the bar rather than beneath a floating strip. */
.hero-plate.has-picture {
	padding-top: clamp(16px, 3vw, 26px);
}

/* ── Her corrections, 23 August ───────────────────────────────────────── */

/*
 * THE SEARCH: the panel she originally had, smaller and narrower.
 *
 * Her words: use the original search thing you had, but not as big and wide.
 * The thin strip I built was too small, and she was right both times — the
 * fault was the size rather than the shape.
 */
.sec--seek .seek-plate {
	width: min(100%, 30rem);
	padding: clamp(8px, 1.6vw, 12px);
}

.sec--seek .seek-in {
	padding: 10px 14px;
	font-size: clamp(15.5px, 3.6vw,17.0px);
}

.sec--seek .seek-go {
	padding: 12px 18px;
	font-size: clamp(15.5px, 3.6vw,17.0px);
}

/*
 * THE TIME AND WEATHER, OUT OF ITS BOX.
 *
 * Her words: I don't want the time and weather thing in a block, it's got to
 * look different from the search. **She is right — it was wearing the same
 * clothes as the thing beneath it**, so the eye read two controls rather than a
 * greeting and a control.
 *
 * And italics are welcome here. Her law is about a message on her phone rather
 * than about a screen, which she corrected today.
 */
.bar .arrival {
	grid-area: weather;
	justify-self: start;
	margin: 0;
	padding: 0;
	max-width: 46ch;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: 400 clamp(15.5px, 1.55vw, 15.5px)/1.45 var(--font-say);
	color: var(--enamel);
}

.bar .arrival::before {
	display: none;
}

.arrival-when {
	color: var(--mint);
	font-weight: 600;
}

.arrival-ask {
	font-style: italic;
	color: var(--enamel);
}

/*
 * A LITTLE MORE OVER THE PHOTOGRAPH. Her words: just a little bit darker
 * overlay on the hero, just a little bit. Four points across the middle, which
 * is the smallest step that reads.
 */
.hero-plate.has-picture::after {
	background: linear-gradient(
		180deg,
		rgba(63, 27, 102, .64) 0%,
		rgba(63, 27, 102, .40) 26%,
		rgba(63, 27, 102, .36) 48%,
		rgba(63, 27, 102, .52) 68%,
		rgba(63, 27, 102, .74) 88%,
		var(--purple-deep) 100%
	);
}

/*
 * THE RAIL TRAVELS ON ITS OWN, AND CHANGES COLOUR EACH TIME ROUND.
 *
 * Her idea, and it is the one place both of her logo's colours do a job:
 * purple on the first pass, mint on the second, so a person sees the same eight
 * wearing something different and knows they have been round.
 *
 * Once somebody takes hold of it, it is theirs — the movement stops and never
 * takes itself back.
 */
.rail {
	scroll-behavior: auto;
}

.rail .post-face.has-picture::after {
	transition: background 1.2s ease;
}

.rail--mint .post-face.has-picture::after {
	background: linear-gradient(
		180deg,
		rgba(18, 131, 111, .22) 0%,
		rgba(18, 131, 111, .34) 46%,
		rgba(16, 50, 44, .78) 100%
	);
}

.rail--mint .post-name {
	box-shadow:
		inset 0 0 0 1px var(--keyline),
		inset 0 -3px 0 var(--purple-lit),
		0 6px 16px rgba(20, 5, 36, .5);
}

.rail-hint {
	transition: opacity .3s;
}

.rail--theirs + .rail-hint {
	opacity: 0;
}

/* ── LocaZac · the first word ─────────────────────────────────────────── */

/*
 * Six moments, one on screen at a time. Her moments law says a page of fields
 * is a form and a form has no place here — so the others are not hidden with
 * display none, they simply have not arrived yet.
 */
.atelier {
	max-width: 34rem;
	margin: 0 auto;
	padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 28px) clamp(56px, 12vw, 88px);
}

.atelier-mark {
	margin: 0 0 4px;
	font: 400 clamp(28px, 8vw, 42px)/1 var(--font-head);
	color: var(--enamel);
	letter-spacing: -.01em;
}

.atelier-rate {
	margin: 0 0 clamp(24px, 6vw, 36px);
	font: 400 clamp(15.5px, 3.6vw, 16px)/1.5 var(--font-say);
	color: var(--mint);
}

.atelier-rate strong { color: var(--mint-lit); font-weight: 700; }

/*
 * ── ONE NAME DOING TWO JOBS, AND HER OWN WORDS PAID FOR IT ────────────
 *
 * These were called .step, and so are the three how-it-works cards on her
 * homepage. This rule sits later in the file, so **display:none won and her
 * three steps were invisible on her live site** from the moment the atelier
 * shipped — her own copy, gone, and a hidden section leaves no trace to notice.
 *
 * Found because Know Where hit the identical fault and told me: one prefix, one
 * name, two components. **Prefixing protects you from other people and does
 * nothing about yourself.**
 *
 * They are moments now, which is her word for them and the collision's cure in
 * the same change.
 */
.moment { display: none; }
.moment.is-here { display: block; animation: step-arrives .34s cubic-bezier(.2,.8,.3,1) both; }

@keyframes step-arrives {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

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

.moment-ask {
	margin: 0 0 6px;
	font: 400 clamp(24px, 6.6vw, 34px)/1.15 var(--font-head);
	color: var(--enamel);
}

.moment-why {
	margin: 0 0 clamp(18px, 4vw, 26px);
	font: 400 clamp(15.5px, 3.8vw, 16.5px)/1.5 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 78%, transparent);
}

.moment-plates {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(18px, 4vw, 24px);
}

.moment-plates .pick {
	flex: 0 1 auto;
	padding: 11px 16px;
	font: 600 clamp(15.5px, 3.4vw,17.0px)/1 var(--font-util);
	color: var(--enamel);
	background: var(--purple-mid);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.moment-plates .pick.is-chosen {
	background: var(--mint);
	color: var(--purple-deep);
	--edge: #12836F;
}

.moment-own { display: block; margin-bottom: 16px; }

.moment-own > span {
	display: block;
	margin-bottom: 6px;
	font: 600 14.0px/1 var(--font-util);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mint);
}

.moment-own input,
.moment-own textarea,
.letter {
	width: 100%;
	padding: 12px 14px;
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.5 var(--font-say);
	color: var(--purple-deep);
	background: var(--enamel);
	border: 0;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1.5px var(--keyline);
}

.moment-own input::placeholder,
.moment-own textarea::placeholder { color: color-mix(in srgb, var(--purple-deep) 42%, transparent); }

.moment-own input:focus-visible,
.moment-own textarea:focus-visible,
.letter:focus-visible {
	outline: 3px solid var(--mint);
	outline-offset: 2px;
}

.letter {
	margin: 14px 0 20px;
	font-family: var(--font-say);
	line-height: 1.6;
	white-space: pre-wrap;
	resize: vertical;
}

.go {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 26px;
	font: 700 clamp(15.5px, 3.7vw, 16px)/1 var(--font-util);
	color: var(--purple-deep);
	background: var(--mint);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	--edge: #12836F;
}

.go.send { width: 100%; text-align: center; }
.go[disabled] { opacity: .78; cursor: default; }

/* The picture, and what it weighs once it has been made small. */
.shot { margin-bottom: clamp(18px, 4vw, 24px); }

.shot-held { margin: 14px 0 0; }

.shot-held img {
	display: block;
	width: 100%;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(20, 5, 36, .4);
}

.shot-held figcaption {
	margin: 8px 0 10px;
	font: 400 14.0px/1.4 var(--font-say);
	font-style: italic;
	color: var(--mint);
}

.press.small { padding: 8px 14px; font-size: 13px; }

.atelier-where {
	margin: clamp(22px, 5vw, 30px) 0 0;
	font: 400 14.0px/1.5 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 70%, transparent);
}

/* ── A young person, met before a word is written ─────────────────────── */

/*
 * The nameplate is the same frame for everybody. That is the safety ruling and
 * it is the better design too — the confident young person and the shy one
 * arrive looking equal, which no photograph could ever manage.
 */
.them { max-width: 34rem; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 28px) clamp(56px, 12vw, 88px); }

.them-plate {
	padding: clamp(24px, 6vw, 34px) clamp(18px, 5vw, 28px);
	text-align: center;
	background: linear-gradient(180deg, var(--purple-mid), var(--purple-deep));
}

.them-name {
	margin: 0;
	font: 400 clamp(38px, 12vw, 58px)/1 var(--font-head);
	color: var(--enamel);
	letter-spacing: .14em;
	text-indent: .14em;
}

.them-where {
	margin: 10px 0 0;
	font: 600 clamp(14.0px, 3.2vw, 14px)/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mint);
}

.them-says {
	margin: clamp(22px, 5vw, 30px) 0;
	padding: 0 0 0 clamp(14px, 4vw, 20px);
	border-left: 3px solid var(--mint);
}

.them-says p {
	margin: 0;
	font: 400 clamp(16px, 4.3vw, 19px)/1.55 var(--font-say);
	color: var(--enamel);
}

.them-head {
	margin: clamp(26px, 6vw, 36px) 0 12px;
	font: 600 clamp(14.0px, 3.2vw,15.5px)/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.them-does {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.them-does li {
	padding: 10px 15px;
	font: 600 clamp(15.5px, 3.4vw,17.0px)/1 var(--font-util);
	color: var(--enamel);
	background: var(--purple-mid);
	border-radius: 999px;
}

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

.them-rates li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--enamel) 16%, transparent);
}

.them-rates li:last-child { border-bottom: 0; }

.rate-what { font: 400 clamp(15.5px, 3.8vw, 16px)/1.4 var(--font-say); color: var(--enamel); }
.rate-much { font: 400 clamp(19px, 5vw, 24px)/1 var(--font-head); color: var(--mint-lit); white-space: nowrap; }

/*
 * Four words carrying the autonomy law. He set these himself — so a neighbour
 * reads a person's own decision rather than a platform's valuation of a child.
 */
.them-note {
	margin: 10px 0 0;
	font: 400 14.0px/1.5 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 68%, transparent);
}

.them-free {
	margin: 0;
	font: 400 clamp(15.5px, 4vw, 16.5px)/1.55 var(--font-say);
	color: var(--enamel);
}

.them-go {
	display: block;
	margin: clamp(30px, 7vw, 42px) 0 0;
	padding: 17px 24px;
	font: 700 clamp(15.5px, 4vw, 17px)/1 var(--font-util);
	text-align: center;
	text-decoration: none;
	color: var(--purple-deep);
	background: var(--mint);
	border-radius: 999px;
	--edge: #12836F;
}

.them-after {
	margin: 12px 0 0;
	text-align: center;
	font: 400 14.0px/1.5 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 70%, transparent);
}

/*
 * A quote and a gift are answers, never missing prices. So they carry the same
 * weight on the line as a number does, in the reading face rather than the
 * display one — a whole answer, said quietly.
 */
.rate-much--quote,
.rate-much--gift {
	font: 400 clamp(15.5px, 3.8vw, 16px)/1.4 var(--font-say);
	font-style: italic;
	color: var(--mint);
}

/*
 * THE EXAMPLE RIBBON.
 *
 * Written for somebody who arrived from a search result and read no heading
 * above it. So it sits at the very top, it carries the mint rather than
 * whispering in grey, and it says what the screen IS rather than what it wants.
 */
.example-ribbon {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 clamp(18px, 4vw, 26px);
	padding: 11px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mint) 14%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 44%, transparent);
}

.example-word {
	font: 700 clamp(14.0px, 3vw,15.5px)/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint-lit);
}

.example-says {
	font: 400 clamp(15.5px, 3.6vw,17.0px)/1.45 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

/*
 * A role wears the same frame as a name, a little quieter. The frame staying
 * identical is the point — she is looking at how a real page will sit.
 */
.them-name--role {
	font-size: clamp(24px, 7vw, 34px);
	letter-spacing: .06em;
	text-indent: .06em;
}

/*
 * ── THE TOP OF THE CARDS, CUT OFF ON HER REAL PHONE ───────────────────
 *
 * She found it on her own device and it never showed at 379 on a Mac, which is
 * its own lesson: **a narrow window is not a phone.**
 *
 * The cause is a rule nobody writes on purpose. `overflow-x: auto` forces
 * `overflow-y` to compute as `auto` as well — a box cannot scroll on one axis
 * and overflow visibly on the other. So the rail clips vertically whether or
 * not anybody asked it to, and it had zero padding at the top.
 *
 * Above that top edge sat two lifts: the pressable shadow, which stands the
 * card 7px proud, and the float transition, which brings each card up into
 * place. Both were shaved off.
 *
 * So the rail carries room above and below, and pulls it back so the layout
 * sits exactly where it did.
 */
.rail {
	padding-top: 14px;
	padding-bottom: max(16px, clamp(10px, 2vw, 14px));
	margin-top: calc(clamp(16px, 3vw, 24px) - 14px);
	overscroll-behavior-x: contain;
}

/*
 * ── AND IT STOPS FIGHTING HER FINGER ──────────────────────────────────
 *
 * Her words: they jump when I touch them. A finger lands, the rail hands
 * itself over, and snapping switches back on in the same instant — so the
 * browser immediately yanks the nearest card square. That yank IS the jump,
 * and it is snapping doing exactly what it was asked to.
 *
 * Snapping now waits until her hand has finished, restored from script once
 * the scroll settles. While she is touching it, the rail is hers and moves
 * with her alone.
 */
.rail--theirs {
	scroll-snap-type: none;
}

.rail--settled {
	scroll-snap-type: x proximity;
}

/* ── Layers Of Safety · why, rather than what ─────────────────────────── */

.layers-page { max-width: 36rem; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 28px) clamp(56px, 12vw, 88px); }

.layers-eyebrow {
	margin: 0 0 8px;
	font: 600 clamp(14.0px, 3.2vw,15.5px)/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mint);
}

.layers-title {
	margin: 0 0 clamp(16px, 4vw, 22px);
	font: 400 clamp(32px, 9.5vw, 50px)/1.05 var(--font-head);
	color: var(--enamel);
}

.layers-open {
	margin: 0 0 14px;
	font: 400 clamp(16px, 4.3vw, 18.5px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 90%, transparent);
}

.layers-list {
	margin: clamp(26px, 6vw, 38px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(12px, 3vw, 18px);
}

.layer { position: relative; padding: clamp(18px, 4.5vw, 26px); }

/*
 * The number is a marker rather than a rank. It sits behind the name, quiet
 * and large, so a reader counts the care rather than ranking the layers.
 */
.layer-count {
	margin: 0 0 6px;
	font: 400 clamp(14.0px, 3.4vw, 14px)/1 var(--font-head);
	letter-spacing: .2em;
	color: color-mix(in srgb, var(--mint) 70%, transparent);
}

.layer-name {
	margin: 0 0 10px;
	font: 400 clamp(19px, 5.2vw, 24px)/1.2 var(--font-head);
	color: var(--enamel);
}

.layer-why {
	margin: 0 0 10px;
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

/* What it is for, which is the half she said was missing. */
.layer-so {
	margin: 0;
	padding-left: clamp(12px, 3vw, 16px);
	border-left: 2px solid var(--mint);
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.55 var(--font-say);
	font-style: italic;
	color: var(--mint-lit);
}

.layers-honest {
	margin: clamp(26px, 6vw, 38px) 0 0;
	padding: clamp(20px, 5vw, 30px);
	background: linear-gradient(180deg, var(--purple-mid), var(--purple-deep));
}

.layers-honest-head {
	margin: 0 0 12px;
	font: 400 clamp(20px, 5.4vw, 26px)/1.2 var(--font-head);
	color: var(--enamel);
}

.layers-honest p {
	margin: 0 0 12px;
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.6 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 90%, transparent);
}

.layers-honest-last { color: var(--mint) !important; margin-bottom: 0 !important; }

.layers-go {
	display: block;
	margin: clamp(28px, 6vw, 38px) 0 0;
	padding: 17px 24px;
	font: 700 clamp(15.5px, 4vw, 17px)/1 var(--font-util);
	text-align: center;
	text-decoration: none;
	color: var(--purple-deep);
	background: var(--mint);
	border-radius: 999px;
	--edge: #12836F;
}

/*
 * ── THE COLOUR SHE COULD NOT PLACE ────────────────────────────────────
 *
 * She saw it on her phone and said she had no idea where it came from. She was
 * right to disown it: **#2D4A76 is a slate blue that exists nowhere in her
 * palette.** It arrives from Elementor.
 *
 * The old vendor stack is still active on her live site, and Elementor writes a
 * kit stylesheet carrying this:
 *
 *     .elementor-kit-7 button { background-color: #2D4A76 }
 *
 * It puts `elementor-kit-7` on the body, so **every button on her site inherits
 * a colour chosen for a page builder she has left.** Her burger is a button.
 *
 * `.elementor-kit-7 button` is one class and one element. Anything of hers with
 * two classes wins outright, which is why these are written the way they are
 * rather than with !important — a fight won on specificity stays won, and a
 * fight won with !important has to be won again by whoever comes next.
 *
 * **This is a dressing rather than a cure.** The real fix is removing the five
 * plugins she no longer uses, which takes twenty-three stylesheets off every
 * page load with it. That is hers to approve rather than mine to take.
 */
.bar .bar-burger {
	background: var(--purple);
	--edge: #2C0F45;
}

.atelier .press,
.atelier-steps .pick,
.layers-page .press,
.them .press {
	background-color: transparent;
}

.atelier-steps .moment-plates .pick { background: var(--purple-mid); }
.atelier-steps .moment-plates .pick.is-chosen { background: var(--mint); --edge: #12836F; }
.atelier .go,
.layers-page .layers-go,
.them .them-go { background: var(--mint); --edge: #12836F; }

/* ── For a young person ───────────────────────────────────────────────── */

.young { max-width: 36rem; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 28px) clamp(56px, 12vw, 88px); }

.young-eyebrow {
	margin: 0 0 8px;
	font: 600 clamp(14.0px, 3.2vw,15.5px)/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mint);
}

.young-title {
	margin: 0 0 clamp(16px, 4vw, 22px);
	font: 400 clamp(34px, 10vw, 54px)/1.05 var(--font-head);
	color: var(--enamel);
}

.young-open {
	margin: 0 0 14px;
	font: 400 clamp(16px, 4.3vw, 18.5px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 90%, transparent);
}

.young-head {
	margin: clamp(30px, 7vw, 42px) 0 14px;
	font: 600 clamp(14.0px, 3.2vw,15.5px)/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.young-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.young-list li {
	padding: 10px 15px;
	font: 600 clamp(15.5px, 3.4vw,17.0px)/1 var(--font-util);
	color: var(--enamel);
	background: var(--purple-mid);
	border-radius: 999px;
}

.young-note,
.young-after {
	margin: 12px 0 0;
	font: 400 14.0px/1.55 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 72%, transparent);
}

.young-after { text-align: center; margin-top: 18px; }

.young-truths { display: grid; gap: clamp(11px, 2.6vw, 15px); }

.truth { padding: clamp(16px, 4vw, 22px); }

.truth-head {
	margin: 0 0 8px;
	font: 400 clamp(17.5px, 4.8vw, 21px)/1.25 var(--font-head);
	color: var(--enamel);
}

.truth-body {
	margin: 0;
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

.young-grown p {
	margin: 0;
	font: 400 clamp(15.5px, 4vw, 16.5px)/1.6 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 90%, transparent);
}

/*
 * The honest ending sits in her mint rather than hiding at the bottom in grey.
 * A young person reading what is open and what is coming deserves it said as
 * clearly as everything above it.
 */
.young-next {
	margin: clamp(30px, 7vw, 42px) 0 0;
	padding: clamp(20px, 5vw, 30px);
	background: linear-gradient(180deg, var(--purple-mid), var(--purple-deep));
}

.young-next-head {
	margin: 0 0 12px;
	font: 400 clamp(20px, 5.4vw, 26px)/1.2 var(--font-head);
	color: var(--mint);
}

.young-next p {
	margin: 0 0 12px;
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.6 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 92%, transparent);
}

.young-go {
	display: block;
	margin: 18px 0 0;
	padding: 17px 24px;
	font: 700 clamp(15.5px, 4vw, 17px)/1 var(--font-util);
	text-align: center;
	text-decoration: none;
	color: var(--purple-deep);
	background: var(--mint);
	border-radius: 999px;
	--edge: #12836F;
}

.young .young-go { background: var(--mint); }

/* ── A young person building their own page ───────────────────────────── */

.build { max-width: 34rem; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 28px) clamp(56px, 12vw, 88px); }

/*
 * The line that makes the whole road safe to walk away from. It says what is
 * already kept before it says what is left, since a person who has lost work
 * once reads every progress line as a threat.
 */
.build-held {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0 0 clamp(20px, 5vw, 28px);
	padding: 11px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mint) 14%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 44%, transparent);
	font: 400 clamp(14.0px, 3.6vw, 15px)/1.45 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

.build-tick {
	font: 700 14.0px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint-lit);
}

.build-ask {
	margin: 0 0 10px;
	font: 400 clamp(27px, 7.6vw, 40px)/1.1 var(--font-head);
	color: var(--enamel);
}

.build-why {
	margin: 0 0 clamp(20px, 5vw, 28px);
	font: 400 clamp(15px, 4vw, 17px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 84%, transparent);
}

.ask { display: block; margin-bottom: 16px; }

.ask > span {
	display: block;
	margin-bottom: 6px;
	font: 600 14.0px/1 var(--font-util);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mint);
}

.ask input,
.ask textarea,
.rate-much input {
	width: 100%;
	padding: 13px 15px;
	font: 400 clamp(15.5px, 4vw, 16.5px)/1.5 var(--font-say);
	color: var(--purple-deep);
	background: var(--enamel);
	border: 0;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1.5px var(--keyline);
}

.ask input:focus-visible,
.ask textarea:focus-visible,
.rate-much input:focus-visible {
	outline: 3px solid var(--mint);
	outline-offset: 2px;
}

.ask-small {
	margin: 0 0 18px;
	font: 400 14.0px/1.5 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 70%, transparent);
}

.ask-picks { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }

.pick-box { position: relative; }
.pick-box input { position: absolute; opacity: 0; pointer-events: none; }

.pick-box span {
	display: block;
	padding: 11px 16px;
	font: 600 clamp(15.5px, 3.4vw,17.0px)/1 var(--font-util);
	color: var(--enamel);
	background: var(--purple-mid);
	border-radius: 999px;
	cursor: pointer;
	transition: background .14s, color .14s;
}

.pick-box input:checked + span { background: var(--mint); color: var(--purple-deep); }
.pick-box input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }

.ask-rates { display: grid; gap: 12px; margin-bottom: 18px; }

.rate-row {
	margin: 0;
	padding: 15px 16px;
	border: 0;
	border-radius: 14px;
	background: color-mix(in srgb, var(--purple-mid) 60%, transparent);
	box-shadow: inset 0 0 0 1.5px var(--keyline);
}

.rate-row legend {
	padding: 0;
	font: 400 clamp(16px, 4.3vw, 18px)/1.2 var(--font-head);
	color: var(--enamel);
}

.rate-shape { display: grid; gap: 6px; margin: 10px 0 12px; }

.rate-shape label {
	display: flex;
	align-items: center;
	gap: 9px;
	font: 400 clamp(14px, 3.7vw, 15.5px)/1.4 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
	cursor: pointer;
}

.rate-much > span {
	display: block;
	margin-bottom: 5px;
	font: 600 14.0px/1 var(--font-util);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mint);
}

.build-go {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 17px 24px;
	font: 700 clamp(15.5px, 4vw, 17px)/1 var(--font-util);
	color: var(--purple-deep);
	background: var(--mint);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	--edge: #12836F;
}

.build .build-go { background: var(--mint); }

/* The road behind and ahead, and every step of it reachable. */
.build-road {
	margin: clamp(28px, 6vw, 38px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.build-road li a {
	display: block;
	padding: 11px 14px 11px 38px;
	position: relative;
	font: 400 clamp(15.5px, 3.7vw, 15.5px)/1.4 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 66%, transparent);
	text-decoration: none;
	border-radius: 10px;
}

.build-road li a::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -5px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--enamel) 40%, transparent);
}

.build-road li.is-kept a { color: var(--enamel); }
.build-road li.is-kept a::before { background: var(--mint); box-shadow: none; }
.build-road li.is-here a { background: color-mix(in srgb, var(--purple-mid) 70%, transparent); color: var(--enamel); }

/* What they have made, shown back to them. */
.build-look { padding: clamp(20px, 5vw, 28px); margin-bottom: 22px; }

.look-name { margin: 0; font: 400 clamp(30px, 8vw, 42px)/1 var(--font-head); color: var(--enamel); letter-spacing: .1em; }
.look-where { margin: 8px 0 0; font: 600 14.0px/1 var(--font-util); letter-spacing: .18em; text-transform: uppercase; color: var(--mint); }

.look-says { margin: 18px 0 0; padding-left: 14px; border-left: 3px solid var(--mint); }
.look-says p { margin: 0; font: 400 clamp(15.5px, 4vw, 17px)/1.55 var(--font-say); color: var(--enamel); }

.look-does { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.look-does li { padding: 9px 14px; font: 600 14.0px/1 var(--font-util); color: var(--enamel); background: var(--purple-mid); border-radius: 999px; }

.look-rates { margin: 18px 0 0; padding: 0; list-style: none; }
.look-rates li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--enamel) 16%, transparent); font: 400 15px/1.4 var(--font-say); color: var(--enamel); }
.look-rates li strong { color: var(--mint-lit); font-weight: 400; font-family: var(--font-head); }

.look-free { margin: 16px 0 0; font: 400 15px/1.5 var(--font-say); color: color-mix(in srgb, var(--enamel) 88%, transparent); }

.build-again { margin: 24px 0 8px; font: 600 14.0px/1 var(--font-util); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.build-again-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.build-again-list a { font: 400 15px/1.6 var(--font-say); color: var(--enamel); }

/*
 * ── ONE GREEN, THE WHOLE WAY DOWN ─────────────────────────────────────
 *
 * Her ruling: the lily in the helping-young-people-shine passage sits in a
 * different green from the wordmark and the lilies above it, and it should be
 * uniform all the way through.
 *
 * She was reading a real fault. The hero heading ran her line through the
 * function that paints a Lilly mint. **Every other line on the page called the
 * plain one, so their lilies were never painted at all** and simply took the
 * body ink around them. One line of difference, invisible in the code, obvious
 * to the person who drew the brand.
 *
 * The rule sat under .head, so a lily in a paragraph could never have been
 * mint even once it was wrapped. It lives on its own now, so the colour follows
 * the word rather than the container it happens to be standing in.
 */
.say,
.head em,
.head .say {
	font-style: normal;
	color: var(--mint);
}

/*
 * ── TYPE NOBODY CAN READ IS TYPE NOBODY HAS ───────────────────────────
 *
 * Eagle Eye measured 10.5px on the line under the rail and 11px on the mark.
 * On a phone held at arm's length that is decoration rather than writing, and
 * both of these say what a person can do next.
 *
 * Her own words on this once already: I can't read the line, and that's a huge
 * problem. It was true of a heading then and it is true of a hint now.
 */
.rail-hint {
	font-size: clamp(15.5px, 3.4vw,17.0px);
}

.bar-mark,
.bar-mark span,
.mark-word {
	font-size: clamp(15.5px, 3.4vw,17.0px);
}

/* Their own key, on their own screen, rather than in somebody else's letter. */
.build-key {
	display: grid;
	gap: 6px;
	margin: 22px 0 0;
	padding: 16px 18px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--mint) 12%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 40%, transparent);
}

.build-key-word {
	font: 700 14.0px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint-lit);
}

.build-key code {
	font: 400 clamp(15.5px, 4vw, 17px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--enamel);
	word-break: break-all;
}

.build-key-why {
	font: 400 14.0px/1.5 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 76%, transparent);
}

/* ── A neighbour's own place ──────────────────────────────────────────── */

.place { max-width: 34rem; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 28px) clamp(56px, 12vw, 88px); }

.place-eyebrow {
	margin: 0 0 8px;
	font: 600 clamp(14.0px, 3.2vw,15.5px)/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mint);
}

.place-head {
	margin: clamp(26px, 6vw, 34px) 0 14px;
	font: 400 clamp(20px, 5.4vw, 26px)/1.2 var(--font-head);
	color: var(--enamel);
}

.kept-list { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 11px; }

.kept { padding: clamp(15px, 4vw, 20px); position: relative; }

.kept-who {
	margin: 0 0 6px;
	font: 400 clamp(18px, 4.8vw, 22px)/1.2 var(--font-head);
	color: var(--enamel);
}

/* What they kept them for, which is the half a bookmark never has. */
.kept-why {
	margin: 0 0 4px;
	font: 400 clamp(15.5px, 3.9vw, 16px)/1.5 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

.kept-when {
	margin: 0;
	font: 400 14.0px/1.5 var(--font-say);
	font-style: italic;
	color: var(--mint);
}

.kept-go { margin-top: 12px; }

.place-keep { margin-top: clamp(20px, 5vw, 28px); }

.place-honest {
	margin: clamp(26px, 6vw, 34px) 0 0;
	padding: 15px 17px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mint) 12%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 38%, transparent);
	font: 400 clamp(15.5px, 3.6vw,17.0px)/1.5 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

/*
 * Their badge, and the line they wrote themselves under it.
 *
 * Her ruling: their name is Loca and then their own — LocaDan, LocaStella —
 * and one optional line beneath. The Loca stays enamel and their own name
 * takes the mint, so the badge reads as the brand handing itself over to a
 * person rather than a person borrowing a brand.
 */
.look-line,
.them-line {
	margin: 8px 0 0;
	font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.4 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 82%, transparent);
}

.look-line + .look-where,
.them-line + .them-where {
	margin-top: 10px;
}

/*
 * ── THE LAST TWO SIZES SHE COULD NOT READ ─────────────────────────────
 *
 * Measured at 375 after raising seventy of my own: a 12px mark in the footer,
 * which comes from the shared parent rather than from here, and the card names
 * sitting at the label floor when they are content rather than a label.
 *
 * **At her width every clamp takes its minimum**, so a floor is not a floor —
 * it is the size. Matri Pair passed a floor audit across fourteen pages while
 * she could not read the site, which is the whole argument for measuring the
 * computed value rather than reading the rule.
 *
 * The parent is overridden from here rather than changed, since it serves forty
 * businesses and this is one business's reading eye.
 */
/*
 * The parent calls it .foot rather than .site-foot, which my first guess got
 * wrong — and the measurement said so rather than my reading of it.
 */
.foot p,
.foot .mark-word,
.site-foot p {
	font-size: 15.5px;
}

.rail .post-name,
.posts .post-name {
	font-size: clamp(15.5px, 4vw, 17px);
}

/*
 * A sentence is not a label, whatever size the audit passed it at.
 *
 * The eyebrows and the layer numbers may sit at 14 — they are tracked capitals
 * a person recognises rather than reads. **These are sentences**, and she reads
 * every one of them: the note under a question, the line under the eight, the
 * line at the foot of a page. They go to the reading size.
 */
.ask-small,
.young-note,
.young-after,
.them-note,
.moment-why,
.rail-hint,
.kept-when,
.build-key-why,
.layers-honest p,
.place-honest {
	font-size: clamp(15.5px, 4vw, 17px);
}

/* ── The onward road ──────────────────────────────────────────────────── */

.sec--onward .in { padding-bottom: clamp(40px, 9vw, 64px); }

.onward {
	margin: clamp(20px, 5vw, 28px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(12px, 3vw, 18px);
}

.onward-one { padding: clamp(18px, 4.5vw, 26px); }

/*
 * The door they are standing in is marked, so a person can see where they are
 * before they read where they could go.
 */
.onward-one--here {
	box-shadow: inset 0 0 0 2px var(--mint), 0 8px 22px rgba(20, 5, 36, .34);
}

.onward-when {
	margin: 0 0 6px;
	font: 600 14px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.onward-name {
	margin: 0 0 10px;
	font: 400 clamp(21px, 5.6vw, 27px)/1.15 var(--font-head);
	color: var(--enamel);
}

.onward-says {
	margin: 0 0 16px;
	font: 400 clamp(15.5px, 4vw, 17px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 88%, transparent);
}

.onward-go {
	display: inline-block;
	padding: 14px 22px;
	font: 700 clamp(15.5px, 3.9vw, 16px)/1 var(--font-util);
	text-decoration: none;
	color: var(--purple-deep);
	background: var(--mint);
	border-radius: 999px;
	--edge: #12836F;
}

.sec--onward .onward-go { background: var(--mint); }

/* A door being built says so, rather than showing a button that waits. */
.onward-soon {
	margin: 0;
	font: 400 clamp(15.5px, 4vw, 16px)/1.5 var(--font-say);
	font-style: italic;
	color: var(--mint);
}

/*
 * Her age law, worn openly. Her words: just so people know — so it sits in her
 * mint rather than in the small grey type where terms usually hide.
 */
.young-law {
	margin: 18px 0 0;
	padding: 15px 17px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mint) 12%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 40%, transparent);
	font: 400 clamp(15.5px, 4vw, 16.5px)/1.55 var(--font-say);
	color: color-mix(in srgb, var(--enamel) 92%, transparent);
}