.head {
	color: var(--enamel);
	text-transform: none;
	letter-spacing: -.005em;
	line-height: 1.04;
	font-weight: 600;
}

.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;
}

.plate {
	position: relative;
	display: block;
	padding: clamp(18px, 4.4vw, 34px) clamp(16px, 3.6vw, 28px);
	background: var(--purple);
	border: clamp(5px, 1.4vw, 9px) solid var(--enamel);
	border-radius: clamp(10px, 2.4vw, 18px);
	box-shadow:
		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;
}

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

.plate > * {
	position: relative;
}

.plate .head {
	font-size: clamp(20px, 5vw, 32px);
	text-shadow: var(--lift);
}

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);
}

.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(23px, 5.8vw, 31px);
	color: var(--mint);
	display: block;
}

@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;
	}
}

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

.hero-stack {
	display: grid;
	gap: clamp(14px, 2.8vw, 24px);
	justify-items: center;
	text-align: center;
}

.hero-plate .head {
	font-size: clamp(34px, 3.7vw, 52px);
	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;
	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);
}

.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);
}

.seek-plate {
	width: min(100%, 60rem);
	margin-inline: auto;
	padding: clamp(9px, 1.5vw, 13px);
}

.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);
}

.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(200, 16, 60, .26) 52%, var(--purple-mid));
	box-shadow: 0 10px 24px rgba(20, 5, 36, .4);
}

.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);
	}
}

.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%;
}

.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);
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(20px, 3.3vw, 31px);
}

.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;
}

.sec--shine .head,
.sec--why .head {
	font-size: clamp(22px, 5.3vw, 39px);
}

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

.mark-plate {
	display: block;
	width: clamp(41px, 9.4vw, 53px);
	height: auto;
	filter: var(--mark-shadow);
}

.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);
}

.topmark {
	display: block;
	width: clamp(75px, 8.6vw, 104px);
	line-height: 0;
	filter: var(--mark-shadow);
}

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

.hero-plate {
	padding-top: clamp(87px, 10.8vw, 118px);
}

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

img {
	max-width: 100%;
	height: auto;
}

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

.hero-plate.has-picture {
	isolation: isolate;
}

.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;
}

.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;
}

.post-face.has-picture {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: flex-end;
}

.post-face.has-picture .behind {
	object-position: 50% 34%;
}

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

.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);
}

.hero-plate.has-picture {
	min-height: min(100svh, 60rem);
	display: flex;
	flex-direction: column;
	padding-bottom: clamp(16px, 2.2vw, 30px);
}

.hero-plate.has-picture > .in {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.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;
}

.hero-plate.has-picture .behind {
	object-position: 50% 100%;
}

.hero-plate.has-picture::after {
	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%
	);
}

.sec--seek {
	padding-top: clamp(14px, 2.6vw, 24px);
	padding-bottom: clamp(20px, 3.6vw, 34px);
}

.sec--safety-open .head {
	font-size: clamp(23px, 3.2vw, 39px);
	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;
}

.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);
}

.press {
	--edge: #FF2E7E;
	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;
}

.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;
}

.seek-go.press,
button.press {
	--edge: #FF2E7E;
}

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

.sec--door .head {
	font-size: clamp(22px, 4.8vw, 34px);
	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: var(--purple);
	color: #FFF3F7;
	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;
}

.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);
}

.hero-plate.has-picture {
	padding-top: clamp(16px, 3vw, 26px);
}

.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;
	}
}

.rail {
	list-style: none;
	margin: clamp(16px, 3vw, 24px) 0 0;
	padding: 0 clamp(12px, 3.6vw, 50px) clamp(10px, 2vw, 14px);
	margin-inline: calc(-1 * clamp(14px, 3.6vw, 50px));
	display: flex;
	gap: clamp(10px, 1.8vw, 16px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/*
	 * The snap is told where the gutter is, in the same breath as the padding
	 * above it. Proximity snapping is gentler than mandatory and did not eat
	 * the gutter when this was measured, but the two must agree or a future
	 * change to mandatory silently clips the first card against the edge.
	 */
	scroll-padding-inline-start: clamp(12px, 3.6vw, 50px);
	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;
}

.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;
}

.js-float .rail .float {
	transition-delay: calc(var(--n, 0) * 70ms);
}

.door-small--say {
	color: var(--mint);
	margin-top: 2px;
}

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

.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(72px, 14.4vw, 87px);
	line-height: 0;
	filter: var(--mark-shadow);
}

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

.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;
}

.bar-burger {
	grid-area: burger;
	justify-self: end;
	display: grid;
	gap: 4px;
	width: clamp(33px, 6.5vw, 35px);
	height: clamp(33px, 6.5vw, 35px);
	place-content: center;
	padding: 0;
	border: 3px solid var(--enamel);
	border-radius: 9px;
	background: var(--purple);
	--edge: #FF2E7E;
}

.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);
}

.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);
}

.hero-plate.has-picture {
	padding-top: clamp(16px, 3vw, 26px);
}

.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);
}

.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);
}

.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%
	);
}

.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;
}

.atelier {
	max-width: 34rem;
	margin: 0 auto;
	padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px);
}

.atelier-mark {
	margin: 0 0 4px;
	font: 400 clamp(22px, 5.8vw, 29px)/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; }

.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: #FF2E7E;
}

.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: #FF2E7E;
}

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

.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);
}

.them { max-width: 34rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.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(30px, 8.6vw, 41px)/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; }

.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(23px, 5vw, 29px) 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: #FF2E7E;
}

.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);
}

.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);
}

.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);
}

.them-name--role {
	font-size: clamp(24px, 7vw, 34px);
	letter-spacing: .06em;
	text-indent: .06em;
}

.rail {
	padding-top: 14px;
	padding-bottom: max(16px, clamp(10px, 2vw, 14px));
	margin-top: calc(clamp(16px, 3vw, 24px) - 14px);
	overscroll-behavior-x: contain;
}

.rail--theirs {
	scroll-snap-type: none;
}

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

.layers-page { max-width: 36rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.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(25px, 6.8vw, 35px)/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); }

.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);
}

.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: #FF2E7E;
}

.bar .bar-burger {
	background: var(--purple);
	--edge: #FF2E7E;
}

.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: #FF2E7E; }
.atelier .go,
.layers-page .layers-go,
.them .them-go { background: var(--mint); --edge: #FF2E7E; }

.young { max-width: 36rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.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(27px, 7.2vw, 38px)/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(23px, 5vw, 29px) 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);
}

.young-next {
	margin: clamp(23px, 5vw, 29px) 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: #FF2E7E;
}

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

.build { max-width: 34rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.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(21px, 5.5vw, 28px)/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: #FF2E7E;
}

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

.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); }

.build-look { padding: clamp(20px, 5vw, 28px); margin-bottom: 22px; }

.look-name { margin: 0; font: 400 clamp(23px, 5.8vw, 29px)/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); }

.say,
.head em,
.head .say {
	font-style: normal;
	color: var(--mint);
}

.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);
}

.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);
}

.place { max-width: 34rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.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);
}

.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);
}

.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;
}

.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);
}

.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);
}

.sec--onward .in { padding-bottom: clamp(31px, 6.5vw, 45px); }

.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); }

.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: #FF2E7E;
}

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

.onward-soon {
	margin: 0;
	font: 400 clamp(15.5px, 4vw, 16px)/1.5 var(--font-say);
	font-style: italic;
	color: var(--mint);
}

.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);
}

.asit { margin: 0 0 clamp(22px, 5vw, 30px); }

.asit-word {
	margin: 0 0 8px;
	font: 700 14px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.asit-card { padding: clamp(16px, 4vw, 22px); }

.asit-name {
	margin: 0;
	font: 400 clamp(24px, 6.6vw, 32px)/1 var(--font-head);
	color: var(--enamel);
	letter-spacing: .06em;
}

.asit-line {
	margin: 6px 0 0;
	font: 400 clamp(15.5px, 4vw, 16.5px)/1.4 var(--font-say);
	font-style: italic;
	color: color-mix(in srgb, var(--enamel) 82%, transparent);
}

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

.asit-says {
	margin: 14px 0 0;
	padding-left: 12px;
	border-left: 3px solid var(--mint);
	font: 400 clamp(15.5px, 4vw, 16.5px)/1.5 var(--font-say);
	color: var(--enamel);
}

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

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

.asit-free { margin: 12px 0 0; font: 400 15.5px/1.5 var(--font-say); color: color-mix(in srgb, var(--enamel) 86%, transparent); }

.asit [data-asit]:empty,
.asit [data-asit].is-empty { display: none; }
.asit-does:empty, .asit-rates:empty, .asit-shots:empty { display: none; }

.shots-held { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.shots-held img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.shots-held .press.small { width: 100%; margin-top: 6px; }
.asit-shots li { flex: 0 0 68px; }
.asit-shots img { display: block; width: 68px; height: 51px; object-fit: cover; border-radius: 7px; }

.grown { max-width: 36rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.grown-eyebrow {
	margin: 0 0 8px;
	font: 600 14px/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mint);
}

.grown-title {
	margin: 0 0 clamp(16px, 4vw, 22px);
	font: 400 clamp(23px, 6.2vw, 32px)/1.08 var(--font-head);
	color: var(--enamel);
}

.grown-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);
}

.grown-head {
	margin: clamp(23px, 5vw, 29px) 0 14px;
	font: 600 14px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

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

.grown-one { padding: clamp(16px, 4vw, 22px); }

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

.grown-one p {
	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);
}

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

.grown-why {
	padding-left: clamp(12px, 3vw, 16px);
	border-left: 2px solid var(--mint);
	font-style: italic;
	color: var(--mint-lit) !important;
}

.grown-law {
	margin: clamp(23px, 5vw, 29px) 0 0;
	padding: clamp(20px, 5vw, 28px);
	background: linear-gradient(180deg, var(--purple-mid), var(--purple-deep));
}

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

.grown-law 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);
}

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

.grown-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: #FF2E7E;
}

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

.grown-after { margin: 12px 0 0; text-align: center; font: 400 15.5px/1.5 var(--font-say); font-style: italic; color: color-mix(in srgb, var(--enamel) 74%, transparent); }

.signoff { margin: 22px 0 0; padding: clamp(16px, 4vw, 22px); }

.signoff-word {
	margin: 0 0 12px;
	font: 700 14px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.signoff-name { margin: 0; font: 400 clamp(19px, 5vw, 23px)/1.2 var(--font-say); color: var(--enamel); }
.signoff-mark { margin: 4px 0 0; font: 400 clamp(23px, 6.2vw, 29px)/1 var(--font-head); color: var(--enamel); letter-spacing: .04em; }
.signoff-why { margin: 12px 0 0; font: 400 15.5px/1.5 var(--font-say); font-style: italic; color: color-mix(in srgb, var(--enamel) 76%, transparent); }

.dollar { max-width: 34rem; margin: 0 auto; padding: clamp(16px, 3.6vw, 28px) clamp(16px, 4vw, 28px) clamp(44px, 8.6vw, 62px); }

.dollar-eyebrow { margin: 0 0 8px; font: 600 14px/1 var(--font-util); letter-spacing: .18em; text-transform: uppercase; color: var(--mint); }
.dollar-title { margin: 0 0 clamp(16px, 4vw, 22px); font: 400 clamp(22px, 5.8vw, 29px)/1.1 var(--font-head); color: var(--enamel); }
.dollar-says { margin: 0 0 clamp(20px, 5vw, 26px); font: 400 clamp(16px, 4.3vw, 18px)/1.55 var(--font-say); color: color-mix(in srgb, var(--enamel) 92%, transparent); }

.dollar-what { margin: 0 0 clamp(24px, 6vw, 32px); padding: 0; list-style: none; display: grid; gap: 11px; }
.dollar-what li { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--purple-mid) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--keyline); font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.5 var(--font-say); color: var(--enamel); }
.dollar-what strong { color: var(--mint-lit); font-weight: 600; }

.dollar-go { display: block; width: 100%; padding: 18px 24px; font: 700 clamp(16px, 4.2vw, 18px)/1 var(--font-util); text-align: center; text-decoration: none; color: var(--purple-deep); background: var(--mint); border: 0; border-radius: 999px; cursor: pointer; --edge: #FF2E7E; }
.dollar .dollar-go { background: var(--mint); }
.dollar-go-form { margin: 0; }

.dollar-after, .dollar-soon, .dollar-quiet { margin: 14px 0 0; font: 400 clamp(15.5px, 3.9vw, 16px)/1.55 var(--font-say); color: color-mix(in srgb, var(--enamel) 78%, transparent); }
.dollar-soon { font-style: italic; color: var(--mint); margin-bottom: 18px; }
.dollar-quiet { margin-top: clamp(26px, 6vw, 34px); padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--enamel) 16%, transparent); }

.place-dollar { margin: clamp(26px, 6vw, 34px) 0 0; padding: clamp(18px, 4.5vw, 24px); background: linear-gradient(180deg, var(--purple-mid), var(--purple-deep)); }
.place-dollar-word { margin: 0 0 10px; font: 700 14px/1 var(--font-util); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.place-dollar p { margin: 0 0 16px; font: 400 clamp(15.5px, 3.9vw, 16.5px)/1.55 var(--font-say); color: color-mix(in srgb, var(--enamel) 90%, transparent); }
.place-dollar-go { display: block; text-align: center; padding: 15px 22px; font: 700 clamp(15.5px, 4vw, 16.5px)/1 var(--font-util); text-decoration: none; color: var(--purple-deep); background: var(--mint); border-radius: 999px; --edge: #FF2E7E; }
.place .place-dollar-go { background: var(--mint); }

.dollar-says { font-size: clamp(18.5px, 5vw, 21px); line-height: 1.5; }
.dollar-after, .dollar-quiet, .dollar-soon { font-size: clamp(17px, 4.4vw, 18px); }
.dollar-eyebrow { font-size: clamp(15px, 3.9vw, 16px); }

.press,
.dollar-go,
.build-go,
.young-go,
.layers-go,
.them-go,
.onward-go,
.grown-go,
.place-dollar-go {
	position: relative;
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 2px 0 rgba(255, 255, 255, .55),
		0 8px 0 var(--edge, #FF2E7E),
		0 12px 20px rgba(20, 5, 36, .38);
	transition:
		transform .1s cubic-bezier(.3, .7, .4, 1),
		box-shadow .1s cubic-bezier(.3, .7, .4, 1);
}

.press:active,
.dollar-go:active,
.build-go:active,
.young-go:active,
.layers-go:active,
.them-go:active,
.onward-go:active,
.grown-go:active,
.place-dollar-go:active {
	transform: translateY(8px);
	box-shadow:
		inset 0 0 0 1.5px var(--keyline),
		inset 0 2px 6px rgba(20, 5, 36, .28),
		0 0 0 var(--edge, #FF2E7E),
		0 1px 3px rgba(20, 5, 36, .3);
}

.press, .dollar-go, .build-go, .young-go, .layers-go, .them-go, .onward-go, .grown-go, .place-dollar-go {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.press, .dollar-go, .build-go, .young-go, .layers-go, .them-go, .onward-go, .grown-go, .place-dollar-go { transition: none; }
}

.hero-plate.has-picture {
	background-color: var(--ll-deep, #FF2E7E);
}

.them,
.them-name, .them-line, .them-where,
.them-says, .them-says-who,
.them-head, .them-free,
.them-asks li, .them-asks li span, .them-asks li strong,
.them-asks-who,
.them-reach, .them-reach-why,
.firstword-why {
	color: var(--enamel, #f6f1e7);
}

.them-does li { background: var(--blush); color: var(--enamel, #f6f1e7); }
.them-asks li { border-bottom-color: rgba(200, 16, 60, .18); }
.them-reach, .firstword { background: var(--blush); border-color: rgba(200, 16, 60, .18); }
.firstword-form textarea { color: var(--ll-deep); }

.them {
	padding: 1.6rem 1.05rem 5rem;
	display: grid;
	gap: clamp(1.6rem, 5vw, 2.4rem);
}

.them-eyebrow {
	margin: 0 0 0.55rem;
	font: 700 clamp(13px, 3.4vw, 15px)/1.2 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.them-name { margin: 0; letter-spacing: -.01em; }
.them-line { margin: 0.35rem 0 0; font-style: italic; }
.them-where { margin: 0.5rem 0 0; letter-spacing: .1em; text-transform: uppercase; font-size: .84rem; }

.them-says {
	margin: 0;
	padding: 0.2rem 0 0.2rem 1.05rem;
	border-left: 3px solid var(--mint);
	font-size: clamp(1.02rem, 4.2vw, 1.12rem);
	line-height: 1.6;
}

.them-says-who { margin: 0.6rem 0 0; font-size: .92rem; opacity: .8; }

.them-does { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.them-does li { padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 1rem; }

.them-asks li { padding: 0.75rem 0; font-size: 1.05rem; }
.them-asks li strong { color: var(--mint); font-size: 1.12rem; }
.them-asks-who { margin: 0.7rem 0 0; font-size: .92rem; opacity: .8; }

.them-free { margin: 0; font-size: 1.05rem; line-height: 1.55; }

.them-reach { padding: 1.4rem 1.15rem 1.5rem; border-radius: 16px; }
.them-reach-why { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.55; }
.them-go { display: inline-block; text-decoration: none; }

.firstword { padding: 1.4rem 1.15rem 1.5rem; border-radius: 16px; }

.them-reach {
	background: linear-gradient(150deg, var(--blush), var(--blush));
	border: 1px solid rgba(200, 16, 60, .18);
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.them-says { background: var(--blush); border-radius: 0 14px 14px 0; padding: 1rem 1.1rem 1rem 1.05rem; }
.them-asks { padding: 0.2rem 0 0; }
.them-asks li { border-bottom: 1px solid var(--blush); }
.them-asks li:last-child { border-bottom: 0; }
.them-pay { margin: 0; }
.them-go { width: 100%; text-align: center; font-size: clamp(1rem, 4.2vw, 1.08rem); }

.mine { margin: 2.2rem 0 0; }

.mine-counts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.75rem;
}

.mine-counts li {
	padding: 1.1rem 1rem;
	border-radius: 16px;
	background: linear-gradient(150deg, var(--blush), var(--blush));
	border: 1px solid rgba(200, 16, 60, .18);
	text-align: center;
}

.mine-counts strong {
	display: block;
	font: 700 clamp(1.5rem, 7vw, 2rem)/1.05 var(--font-plate, inherit);
	color: var(--mint);
	letter-spacing: -.01em;
}

.mine-counts span {
	display: block;
	margin-top: 0.3rem;
	font-size: .9rem;
	color: var(--enamel);
	opacity: .85;
}

.mine-talk { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.mine-talk-one {
	padding: 1rem 1.05rem;
	border-radius: 14px;
	background: var(--blush);
	border-left: 3px solid var(--mint);
}

.mine-talk-words { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--enamel); text-wrap: pretty; }
.mine-talk-when { margin: 0.45rem 0 0; font-size: .85rem; color: var(--enamel); opacity: .7; }
.mine-waiting { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--enamel); opacity: .9; text-wrap: pretty; }
.mine-go { display: inline-block; text-decoration: none; }

.opening, .askback, .firstword {
	background: var(--blush);
	border: 1px solid rgba(200, 16, 60, .18);
	color: var(--enamel);
}
.opening-word, .opening-why,
.askback-ask, .askback-why, .askback-label, .askback-also,
.firstword-why { color: var(--enamel); }
.opening-word { font-weight: 500; }
.opening-go, .askback-go { color: var(--purple-deep); }
.askback-field, .askback-said { color: var(--purple-deep); }
.build-again, .build-again-list a, .build-key-why, .build-key-word, .build-held { color: var(--enamel); }

.opening { margin: 1.6rem 0 0; }

.mine, .mine * { color: var(--enamel); }
.mine-counts strong { color: var(--mint); }
.build-again-list li, .build-again-list a,
.build-again-list li.is-kept, .build-again-list li.is-here { color: var(--enamel); }
.build-again-list a { text-decoration-color: rgba(255,255,255,.4); }

.found, .found *, .found-head, .found-after,
.found-name, .found-line, .found-where, .found-does { color: var(--enamel); }
.found-name .say { color: var(--mint); }
.found-go { background: var(--blush); border-color: rgba(200, 16, 60, .18); }
.door-name, .door-note, .door-small { color: var(--enamel); }

.found-list { gap: 1rem; }

.found-go {
	display: block;
	text-align: center;
	padding: clamp(20px, 6vw, 34px) clamp(18px, 5vw, 34px);
	text-decoration: none;
}

.found-name {
	display: block;
	font: 400 clamp(2rem, 11vw, 3rem)/1 var(--font-plate, inherit);
	letter-spacing: -.01em;
	color: var(--enamel);
}

.found-name .say { color: var(--mint); }

.found-line {
	display: block;
	margin-top: 0.5rem;
	font-style: italic;
	font-size: clamp(1rem, 4.4vw, 1.12rem);
	color: var(--enamel);
	opacity: .92;
}

.found-where {
	display: block;
	margin-top: 0.7rem;
	font: 700 clamp(12px, 3.2vw, 14px)/1.2 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mint);
}

.found-does {
	display: block;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(200, 16, 60, .18);
	font-size: .98rem;
	color: var(--enamel);
	opacity: .9;
}

.firstword .askback-go,
.firstword button[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 0.9rem;
	padding: 0.95rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: var(--purple);
	color: #FFF3F7;
	font: 700 clamp(1rem, 4.2vw, 1.08rem)/1.1 var(--font-util);
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: var(--act-shadow);
}

.firstword .askback-said,
.firstword textarea {
	width: 100%;
	min-height: 8.5rem;
	padding: 0.9rem 0.95rem;
	border: 1px solid rgba(200, 16, 60, .18);
	border-radius: 14px;
	background: #fff;
	color: var(--purple-deep);
	font: inherit;
	font-size: 1.04rem;
	line-height: 1.55;
	resize: vertical;
}

.firstword .askback-label { display: block; margin-bottom: 0.4rem; color: var(--enamel); font-size: .95rem; }

.mine-talk-words, .mine-talk-when,
.firstword-said, .firstword-said * {
	color: var(--enamel);
	opacity: 1;
}
.mine-talk-when { opacity: .75; }

.uv-word {
	display: block;
	margin: 0 0 1.2rem;
	padding: 1rem 1.1rem;
	border: 0;
	border-left: 4px solid var(--mint);
	border-radius: 0 14px 14px 0;
	background: rgba(56, 232, 203, .14);
	color: var(--enamel);
	font-size: clamp(1.02rem, 4.2vw, 1.1rem);
	line-height: 1.55;
	font-weight: 500;
	text-wrap: pretty;
}

.firstword-letter {
	margin: 0 0 1rem;
	padding: 1.15rem 1.25rem;
	border: 0;
	border-left: 4px solid var(--mint);
	border-radius: 0 16px 16px 0;
	background: var(--blush);
	color: var(--enamel);
	font-size: clamp(1.04rem, 4.4vw, 1.14rem);
	line-height: 1.6;
	white-space: normal;
	text-wrap: pretty;
}

.firstword-edit {
	margin: 0 0 1.4rem;
	font-size: .95rem;
}

.firstword-edit a {
	color: var(--mint);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.firstword-dollar {
	margin: .85rem 0 0;
	color: var(--enamel);
	opacity: .9;
	font-size: .95rem;
	line-height: 1.55;
}

.firstword .askback-label {
	display: block;
	margin: 1rem 0 .4rem;
	color: var(--mint);
	font: 700 .9rem/1.2 var(--font-util);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.firstword .seek-in {
	width: 100%;
	padding: .9rem 1rem;
	border: 1px solid var(--keyline, rgba(200, 16, 60, .18));
	border-radius: 14px;
	background: #fff;
	color: var(--purple-deep);
	font-size: 1.04rem;
}

.bar-mine {
	display: inline-block;
	padding: .45rem .85rem;
	border-radius: 999px;
	background: rgba(56, 232, 203, .16);
	border: 1px solid rgba(56, 232, 203, .4);
	color: var(--mint);
	font: 700 .88rem/1.1 var(--font-util);
	text-decoration: none;
	white-space: nowrap;
}

.mine-talk-became {
	margin: .35rem 0 0;
	color: var(--mint);
	opacity: .85;
	font: 500 .85rem/1.4 var(--font-util);
	letter-spacing: .02em;
}

.place-name {
	margin: 0 0 1.6rem;
	padding: 1.1rem 1.2rem;
	border-radius: 18px;
	background: var(--blush);
	border: 1px solid rgba(56, 232, 203, .28);
}

.place-name .askback-label {
	margin-top: 0;
}

.firstword-ahead {
	margin: .2rem 0 1.2rem;
	padding: .85rem 1rem;
	border-radius: 14px;
	background: rgba(56, 232, 203, .12);
	color: var(--enamel);
	font-size: clamp(.95rem, 3.9vw, 1rem);
	line-height: 1.55;
}

.comeback {
	margin: 0 0 2.2rem;
	padding: 1.25rem 1.3rem;
	border-radius: 20px;
	background: rgba(56, 232, 203, .12);
	border: 1px solid rgba(56, 232, 203, .34);
}

.comeback .askback-label {
	margin-top: .8rem;
}

.found-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.4rem;
}

.found-one {
	margin: 0;
}

.found-go {
	position: relative;
	display: block;
	aspect-ratio: 3093 / 1509;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../img/nameplate-blank.png") center / 100% 100% no-repeat;
	text-decoration: none;
	overflow: hidden;
}

.found-plate {
	position: absolute;
	inset: 12% 9% 12% 9%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25em;
	text-align: center;
}

.found-name {
	display: block;
	color: #fff;
	font: 700 clamp(1.5rem, 9.4vw, 3.2rem)/1 var(--font-head, var(--font-util));
	letter-spacing: .01em;
	text-shadow: 0 2px 12px rgba(30, 0, 44, .45);
	white-space: nowrap;
}

.found-name .say {
	color: var(--mint-lit, var(--mint));
}

.found-where {
	display: block;
	color: rgba(255, 255, 255, .92);
	font: 600 clamp(.72rem, 3.5vw, 1.05rem)/1.1 var(--font-util);
	letter-spacing: .22em;
	text-transform: uppercase;
}

.found-does {
	display: block;
	max-width: 100%;
	color: rgba(255, 255, 255, .82);
	font: 500 clamp(.66rem, 3vw, .92rem)/1.35 var(--font-util);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mine-talk-who {
	margin: 0 0 .3rem;
	color: var(--mint);
	font: 700 .82rem/1.2 var(--font-util);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mine-talk-again {
	margin: .5rem 0 0;
	font-size: .92rem;
}

.mine-talk-again a {
	color: var(--mint);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.room-name {
	margin: .2rem 0 1.6rem;
	color: var(--enamel);
	font: 700 clamp(1.9rem, 8.6vw, 3rem)/1.05 var(--font-head, var(--font-util));
	letter-spacing: -.01em;
	text-wrap: balance;
}

.room-card {
	margin: 0 0 1.5rem;
	padding: 1.35rem 1.3rem 1.45rem;
	border-radius: 22px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.room-card--ask {
	background: rgba(56, 232, 203, .12);
	border-color: rgba(56, 232, 203, .34);
}

.room-card--quiet {
	background: transparent;
	border-style: dashed;
}

.room-head {
	margin: 0 0 1rem;
	color: var(--mint);
	font: 700 clamp(1.05rem, 4.6vw, 1.3rem)/1.2 var(--font-head, var(--font-util));
	letter-spacing: .01em;
}

.room-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.room-row {
	margin: 0;
	padding: 1rem 1.05rem;
	border-radius: 16px;
	background: var(--blush);
	border-left: 3px solid var(--mint);
}

.room-row-who {
	margin: 0 0 .35rem;
	color: var(--mint);
	font: 700 .82rem/1.2 var(--font-util);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.room-row-words {
	margin: 0;
	color: var(--enamel);
	font-size: clamp(1rem, 4.1vw, 1.06rem);
	line-height: 1.55;
	text-wrap: pretty;
}

.room-row-go {
	display: inline-block;
	margin-top: .6rem;
	color: var(--mint);
	font: 600 .93rem/1.2 var(--font-util);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.room-empty {
	margin: 0;
	color: var(--enamel);
	opacity: .88;
	font-size: clamp(.97rem, 4vw, 1.02rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.room-card .seek-in {
	width: 100%;
	margin-bottom: .8rem;
}

@media (min-width: 900px) {
	.place {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1.5rem;
		align-items: start;
	}

	.place > .place-eyebrow,
	.place > .room-name {
		grid-column: 1 / -1;
	}
}

.room-go,
.place button[type="submit"],
.comeback button[type="submit"] {
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin-top: 1rem;
	padding: 1rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--mint-lit, var(--mint)), var(--mint));
	color: var(--purple-deep);
	font: 700 clamp(1.05rem, 4.4vw, 1.15rem)/1.15 var(--font-util);
	letter-spacing: .01em;
	text-align: center;
	cursor: pointer;
	box-shadow: var(--act-shadow, 0 10px 24px rgba(0, 0, 0, .28));
}

.room-go:hover,
.place button[type="submit"]:hover {
	filter: brightness(1.06);
}

.place .seek-in,
.place input[type="text"],
.place input[type="email"],
.place input[type="password"],
.comeback .seek-in {
	width: 100%;
	min-height: 3.25rem;
	padding: .95rem 1.1rem;
	border: 1px solid rgba(200, 16, 60, .18);
	border-radius: 14px;
	background: #fff;
	color: var(--purple-deep);
	font-size: clamp(1.02rem, 4.2vw, 1.08rem);
}

.hers {
	margin: 0 0 1.6rem;
}

.hers-plate {
	display: block;
	max-width: 34rem;
	margin: 0 auto;
}

.hers-under {
	margin: .9rem 0 0;
	color: var(--enamel);
	opacity: .82;
	text-align: center;
	font: 500 .95rem/1.5 var(--font-util);
}

a.room-go {
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin-top: 1rem;
	padding: 1rem 1.3rem;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--mint-lit, var(--mint)), var(--mint));
	color: var(--purple-deep);
	font: 700 clamp(1.05rem, 4.4vw, 1.15rem)/1.15 var(--font-util);
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	box-shadow: var(--act-shadow, 0 10px 24px rgba(0, 0, 0, .28));
}

.room-card--quiet a.room-go {
	background: transparent;
	border: 1px solid var(--mint);
	color: var(--mint);
	box-shadow: none;
}

.place {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: 1fr;
	align-items: start;
}

.place > .place-eyebrow,
.place > .room-name,
.place > .room-card,
.place > form,
.place > section {
	margin: 0;
	min-width: 0;
}

@media (min-width: 760px) {
	.place {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.place > .place-eyebrow,
	.place > .room-name,
	.place > .room-card--find,
	.place > .room-card--pinned {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1180px) {
	.place {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.6rem;
	}
}

.room-find {
	display: grid;
	gap: .7rem;
}

@media (min-width: 620px) {
	.room-find {
		grid-template-columns: 2fr 1fr auto;
		align-items: center;
	}

	.room-find .room-go {
		margin-top: 0;
		width: auto;
		padding-inline: 1.8rem;
		white-space: nowrap;
	}
}

.pinned {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pinned-one {
	margin: 0;
}

.pinned-go {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	height: 100%;
	padding: 1rem 1.1rem;
	border-radius: 18px;
	background: rgba(56, 232, 203, .14);
	border: 1px solid rgba(56, 232, 203, .38);
	text-decoration: none;
}

.pinned-go--flat {
	background: var(--blush);
	border-color: var(--blush);
}

.pinned-name {
	color: #fff;
	font: 700 clamp(1.1rem, 4.6vw, 1.3rem)/1.1 var(--font-head, var(--font-util));
}

.pinned-name .say {
	color: var(--mint-lit, var(--mint));
}

.pinned-why {
	color: var(--enamel);
	opacity: .9;
	font-size: .95rem;
	line-height: 1.45;
}

.pinned-ask {
	margin-top: auto;
	padding-top: .5rem;
	color: var(--mint);
	font: 700 .85rem/1.2 var(--font-util);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.parents {
	margin: 2.6rem 0 0;
	padding: 1.6rem 1.4rem 1.8rem;
	border-radius: 24px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.parents-eyebrow {
	margin: 0 0 .35rem;
	color: var(--mint);
	font: 700 .82rem/1.2 var(--font-util);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.parents-head {
	margin: 0 0 1.3rem;
	color: var(--enamel);
	font: 700 clamp(1.5rem, 6.4vw, 2.1rem)/1.15 var(--font-head, var(--font-util));
}

.parents-rows {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.parents-one {
	padding: 1.05rem 1.1rem;
	border-radius: 16px;
	background: var(--blush);
	border-left: 3px solid var(--mint);
}

.parents-q {
	margin: 0 0 .4rem;
	color: var(--mint);
	font: 700 1rem/1.25 var(--font-head, var(--font-util));
}

.parents-one p {
	margin: 0;
	color: var(--enamel);
	font-size: clamp(.97rem, 4vw, 1.02rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.parents-after {
	margin: 1.3rem 0 0;
	color: var(--enamel);
	opacity: .88;
	font-size: .98rem;
	line-height: 1.55;
}

.bar-road a {
	color: var(--mint);
	font-weight: 700;
}

.bar-list .bar-road + li:not(.bar-road) {
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid var(--blush);
}

.works {
	margin: 2.8rem 0 0;
}

.works-why {
	margin: 0 0 1.5rem;
	color: var(--enamel);
	opacity: .9;
	font-size: clamp(1rem, 4.1vw, 1.08rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.works-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.works-one {
	margin: 0;
	padding: 1.2rem 1.2rem 1.3rem;
	border-radius: 20px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.works-art {
	display: block;
	margin-bottom: .8rem;
}

.work-art {
	display: block;
	width: 100%;
	max-width: 8.5rem;
	height: auto;
}

.work-art .ln {
	stroke: rgba(255, 255, 255, .82);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.work-art .ln--soft {
	stroke: rgba(200, 16, 60, .26);
	stroke-width: 2.4;
}

.work-art .fl {
	fill: var(--mint);
	opacity: .92;
}

.work-art .fl--soft {
	fill: var(--mint);
	opacity: .45;
}

.works-name {
	margin: 0 0 .4rem;
	color: #fff;
	font: 700 clamp(1.12rem, 4.8vw, 1.28rem)/1.2 var(--font-head, var(--font-util));
}

.works-line {
	margin: 0;
	color: var(--enamel);
	opacity: .9;
	font-size: clamp(.96rem, 3.9vw, 1.01rem);
	line-height: 1.55;
	text-wrap: pretty;
}

.works-after {
	margin: 1.4rem 0 0;
	padding: 1rem 1.15rem;
	border-radius: 16px;
	background: rgba(56, 232, 203, .12);
	border: 1px solid rgba(56, 232, 203, .32);
	color: var(--enamel);
	font-size: clamp(.98rem, 4vw, 1.04rem);
	line-height: 1.6;
}

.cost {
	margin: 2.8rem 0 0;
}

.cost-rows {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.cost-one {
	padding: 1.4rem 1.2rem;
	border-radius: 20px;
	background: var(--blush);
	border: 1px solid var(--blush);
	text-align: center;
}

.cost-one--big {
	background: rgba(56, 232, 203, .14);
	border-color: rgba(56, 232, 203, .4);
}

.cost-figure {
	margin: 0;
	color: var(--mint-lit, var(--mint));
	font: 700 clamp(2.4rem, 11vw, 3.4rem)/1 var(--font-head, var(--font-util));
	letter-spacing: -.02em;
}

.cost-what {
	margin: .4rem 0 .6rem;
	color: #fff;
	font: 600 clamp(.95rem, 4vw, 1.02rem)/1.3 var(--font-util);
}

.cost-why {
	margin: 0;
	color: var(--enamel);
	opacity: .85;
	font-size: .94rem;
	line-height: 1.5;
}

.cost-first {
	margin: 1.3rem 0 0;
	color: var(--mint);
	font: 600 clamp(1rem, 4.2vw, 1.08rem)/1.55 var(--font-util);
	text-align: center;
}

.builder {
	margin: 2.8rem 0 0;
}

.builder-road {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
	display: grid;
	gap: .8rem;
}

.builder-step {
	position: relative;
	counter-increment: step;
	padding: 1rem 1.2rem 1rem 3.6rem;
	border-radius: 16px;
	background: var(--blush);
	border-left: 3px solid var(--mint);
}

.builder-step::before {
	content: counter(step);
	position: absolute;
	left: 1.1rem;
	top: 1rem;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--mint);
	color: var(--purple-deep);
	font: 700 .95rem/1.7rem var(--font-util);
	text-align: center;
}

.builder-ask {
	display: block;
	color: #fff;
	font: 700 clamp(1.02rem, 4.3vw, 1.1rem)/1.3 var(--font-head, var(--font-util));
}

.builder-why {
	display: block;
	margin-top: .3rem;
	color: var(--enamel);
	opacity: .82;
	font-size: .95rem;
	line-height: 1.5;
}

.ages {
	margin: 2.8rem 0 0;
}

.ages-rows {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ages-one {
	padding: 1.3rem 1.2rem;
	border-radius: 20px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.ages-num {
	margin: 0 0 .6rem;
	color: var(--mint-lit, var(--mint));
	font: 700 clamp(2.2rem, 10vw, 3rem)/1 var(--font-head, var(--font-util));
}

.ages-line {
	margin: 0 0 .7rem;
	color: var(--enamel);
	font-size: clamp(.96rem, 3.9vw, 1.01rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.ages-line:last-child {
	margin-bottom: 0;
}

.ages-tax {
	margin: 1.3rem 0 0;
	padding: 1.1rem 1.2rem;
	border-radius: 16px;
	background: rgba(56, 232, 203, .1);
	color: var(--enamel);
	font-size: clamp(.97rem, 4vw, 1.02rem);
	line-height: 1.6;
}

.asks {
	margin: 2.8rem 0 0;
}

.asks-list {
	margin: 0;
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.asks-one {
	padding: 1.1rem 1.2rem;
	border-radius: 18px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.asks-one dt {
	margin: 0 0 .4rem;
	color: var(--mint);
	font: 700 clamp(1rem, 4.2vw, 1.06rem)/1.3 var(--font-head, var(--font-util));
}

.asks-one dd {
	margin: 0;
	color: var(--enamel);
	opacity: .92;
	font-size: clamp(.95rem, 3.9vw, 1rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.face {
	margin: 0 0 1.5rem;
	padding: 1.3rem 1.3rem 1.4rem;
	border-radius: 22px;
	background: rgba(56, 232, 203, .13);
	border: 1px solid rgba(56, 232, 203, .36);
}

.face-head {
	margin: 0 0 .5rem;
	color: var(--mint);
	font: 700 clamp(1.08rem, 4.6vw, 1.3rem)/1.2 var(--font-head, var(--font-util));
}

.face-why {
	margin: 0 0 .3rem;
	color: var(--enamel);
	opacity: .92;
	font-size: clamp(.97rem, 4vw, 1.02rem);
	line-height: 1.6;
}

.face-said {
	margin: .6rem 0 0;
	color: var(--mint);
	font: 600 .95rem/1.5 var(--font-util);
	min-height: 1.4em;
}

.face-away {
	display: block;
	width: 100%;
	margin-top: .7rem;
	padding: .7rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--enamel);
	opacity: .8;
	font: 500 .95rem/1.2 var(--font-util);
	cursor: pointer;
}

.face-open {
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin-top: .7rem;
	padding: 1rem 1.3rem;
	border: 1px solid var(--mint);
	border-radius: 999px;
	background: transparent;
	color: var(--mint);
	font: 700 clamp(1rem, 4.2vw, 1.08rem)/1.15 var(--font-util);
	cursor: pointer;
}

.arrival,
.arrival *,
.signoff-why,
.mine-waiting,
.room-empty,
.works-line,
.asks-one dd,
.ages-line,
.parents-one p,
.build-why,
.young-note,
.truth-body,
em, i, cite, address {
	font-style: normal;
}

.build-close,
.build-close.press,
button.build-close,
.mine-go,
a.mine-go {
	min-height: 3.25rem;
	border: 1px solid var(--mint);
	border-radius: 999px;
	background: transparent;
	color: var(--mint);
	font: 700 clamp(1rem, 4.2vw, 1.08rem)/1.15 var(--font-util);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.place input::placeholder,
.room-card input::placeholder,
.comeback input::placeholder,
.firstword input::placeholder,
.firstword textarea::placeholder,
.seek-in::placeholder {
	color: rgba(43, 8, 63, .62);
	opacity: 1;
}

.room-card label,
.place label:not(.vh),
.comeback label:not(.vh) {
	display: block;
	margin: 1rem 0 .4rem;
	color: var(--mint);
	font: 700 .82rem/1.2 var(--font-util);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bar-mine,
a.bar-mine {
	background: rgba(56, 232, 203, .16);
	background-image: none;
	border: 1px solid rgba(56, 232, 203, .45);
	box-shadow: none;
}

.opening-go--close,
button.opening-go--close,
.opening-go--close.press {
	min-height: 3.25rem;
	padding: 1rem 1.3rem;
	border: 1px solid var(--mint);
	border-radius: 999px;
	background: transparent;
	color: var(--mint);
	font: 700 clamp(1rem, 4.2vw, 1.08rem)/1.15 var(--font-util);
	cursor: pointer;
}

button:not([style*="background"]),
.press:not(a) {
	-webkit-text-fill-color: currentColor;
}

button[class*="--close"],
button[class*="--quiet"],
button[class*="away"] {
	color: var(--mint);
}

.whois {
	margin-top: .7rem;
}

.whois-open {
	cursor: pointer;
	color: var(--mint);
	font: 700 .82rem/1.3 var(--font-util);
	letter-spacing: .08em;
	text-transform: uppercase;
	list-style: none;
}

.whois-open::-webkit-details-marker { display: none; }

.whois-open::after {
	content: " \203A";
}

.whois-said {
	margin-top: .6rem;
	padding: .9rem 1rem;
	border-radius: 14px;
	background: var(--blush);
	color: var(--enamel);
	font-size: .98rem;
	line-height: 1.6;
}

.whois-where {
	margin: 0 0 .5rem;
	color: var(--mint);
	font: 700 .8rem/1.2 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.whois-said p { margin: 0 0 .6rem; }
.whois-said p:last-child { margin-bottom: 0; }

.atelier-after {
	margin: .9rem 0 0;
	color: var(--enamel);
	opacity: .85;
	font-size: .95rem;
	line-height: 1.55;
}

/* ---- The white tags band, her own reference ---- */
.sec--tags {
	background: #FFF3F7;
	padding: clamp(22px, 4.3vw, 39px) 0;
}
.sec--tags .in {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 clamp(14px, 3.6vw, 28px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(18px, 3.4vw, 28px);
	text-align: center;
}
.tags-lede {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(22px, 4.6vw, 34px);
	color: #111111;
	line-height: 1.15;
	max-width: 18ch;
}
.tags-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(10px, 2vw, 16px);
}
.tag-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85em 1.6em;
	border-radius: 999px;
	font-family: var(--font-util);
	font-weight: 600;
	letter-spacing: .01em;
	font-size: clamp(14px, 2vw, 17px);
	color: #E90255;
	background: linear-gradient(160deg, #FFE3ED 0%, #FFB8D2 55%, #FF9EC4 100%);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,.85),
		inset 0 -6px 10px rgba(163, 26, 78, .18),
		0 10px 20px rgba(163, 26, 78, .16);
	overflow: hidden;
}
.tag-pill::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 40%);
	pointer-events: none;
}
.tag-pill--b {
	background: linear-gradient(160deg, #FFEDF3 0%, #FFC9DB 55%, #FFA9C7 100%);
}
.tag-pill--c {
	padding: 1em 2.1em;
	font-size: clamp(16px, 2.4vw, 20px);
	background: linear-gradient(160deg, #FFD8E6 0%, #FF9EC4 55%, #E90255 100%);
	color: #fff;
}

/* ---- Speech-bubble shaped tags, her reference, tail included ---- */
.tag-pill {
	border-radius: 22px;
	margin-bottom: 14px;
}
.tag-pill::after {
	content: "";
	position: absolute;
	left: 22px;
	bottom: -9px;
	width: 22px;
	height: 22px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	border-radius: 0 0 0 6px;
}
.tags-row {
	align-items: flex-start;
}

/* ---- Avatars connected down to job cards, her reference ---- */
.sec--connect { background: #FFF3F7; padding: 0 0 clamp(22px, 4.3vw, 36px); }
.sec--connect .in { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(14px, 3.6vw, 28px); }
.connect-avatars { position: relative; display: flex; justify-content: space-between; max-width: 620px; margin: 0 auto clamp(18px,3vw,26px); padding: 0 20px; }
.connect-line { position: absolute; left: 40px; right: 40px; top: 22px; height: 2px; background: linear-gradient(90deg, #E90255, #FF9EC4); }
.connect-dot { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(163,26,78,.25); z-index: 1; }
.connect-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.connect-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px,1.6vw,16px); }
.connect-card { display: flex; flex-direction: column; gap: .6em; padding: 1.1em 1.2em; border-radius: 12px; text-decoration: none; font-family: var(--font-util); box-shadow: 0 10px 22px rgba(163,26,78,.16); }
.cc-role { font-weight: 800; font-size: clamp(13px,1.8vw,16px); text-transform: uppercase; letter-spacing: .01em; }
.cc-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; opacity: .85; }
.connect-card--pink { background: #FF2D7A; color: #fff; }
.connect-card--white { background: #fff; color: #E90255; border: 1px solid #FFD6E4; }
.connect-card--steel { background: linear-gradient(160deg,#E7E9EC,#B9BEC4); color: #E90255; }
.connect-card--red { background: linear-gradient(160deg,#E90255,#E90255); color: #fff; }
@media (max-width: 640px) {
	.connect-cards { grid-template-columns: repeat(2, 1fr); }
	.connect-avatars { display: none; }
}

/*
 * ── TWO SIDES, AND THEY DO NOT LOOK ALIKE ─────────────────────────────────
 *
 * Her ruling of 1 September. A neighbour asking for a hand and a small business
 * covering Saturday are two people having two different weeks, so the doors
 * carry different weight rather than being a pair of matching cards.
 */
.sides {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.sides { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
}

.side {
	margin: 0;
	padding: 1.6rem 1.5rem 1.7rem;
	border-radius: 22px;
	background: var(--blush);
	border: 1px solid var(--blush);
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.side--business {
	background: var(--blush);
	border-color: rgba(200, 16, 60, .18);
}

.side-who {
	margin: 0;
	font: 700 .78rem/1.2 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .82;
}

.side-head {
	margin: 0;
	font: 700 clamp(1.4rem, 5.6vw, 1.95rem)/1.12 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.side-says {
	margin: 0 0 .4rem;
	font-size: clamp(1rem, 4.1vw, 1.06rem);
	line-height: 1.6;
	opacity: .92;
	text-wrap: pretty;
}

.side-go {
	margin-top: auto;
	align-self: flex-start;
	padding: .95rem 1.6rem;
	border-radius: 999px;
	font: 700 clamp(1rem, 4.1vw, 1.06rem)/1.15 var(--font-util);
	text-decoration: none;
}

/* The work itself, in two weights: trained, and turning up. */
.work {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.work-one { margin: 0; }

.work-go {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	height: 100%;
	padding: 1.05rem 1.15rem 1.15rem;
	border-radius: 18px;
	background: var(--blush);
	border: 1px solid var(--blush);
	text-decoration: none;
}

.work-one--trained .work-go { border-color: rgba(255, 255, 255, .3); }

.work-name { font: 700 clamp(1.05rem, 4.4vw, 1.16rem)/1.25 var(--font-head, var(--font-util)); }
.work-says { font-size: .95rem; line-height: 1.5; opacity: .84; text-wrap: pretty; }

.work-other { margin: 1.4rem 0 0; }
.work-other a { text-decoration: underline; text-underline-offset: 3px; }

/* ── WORK PUT UP ────────────────────────────────────────────────────────────
 *
 * A plate for a piece of work, and a brighter one for work that cannot wait.
 * **The lit one is not red and never says urgent in an alarmed voice** — a café
 * short-handed at nine at night is not an emergency, it is a Tuesday, and the
 * young person reading it is being offered a shift rather than warned.
 */
.work-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .85rem;
}

.work {
	padding: 1.05rem 1.1rem 1.15rem;
	border-radius: 18px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.work--now {
	background: var(--blush);
	border-color: rgba(200, 16, 60, .3);
}

.work-now {
	margin: 0 0 .5rem;
	color: var(--mint-lit);
	font: 700 .74rem/1 var(--font-util);
	letter-spacing: .17em;
	text-transform: uppercase;
}

.work-what {
	margin: 0 0 .35rem;
	color: var(--enamel);
	font: 700 clamp(1rem, 4.4vw, 1.16rem)/1.3 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.work-where {
	margin: 0 0 .5rem;
	color: var(--enamel);
	opacity: .82;
	font-size: .92rem;
}

.work-pays {
	margin: 0;
	color: var(--mint);
	font: 700 1rem/1.3 var(--font-util);
	font-variant-numeric: tabular-nums;
}

/* ── THE WHOLE BRIEF, AND WHAT THE LAW SAYS ─────────────────────────────────
 *
 * A shift posted at nine at night for four tomorrow is the one time nobody can
 * ask a question first, so every line a business gave is drawn and every line
 * it did not is simply absent. An empty heading reads as an answer nobody
 * bothered with.
 */
.work-brief {
	margin: .9rem 0 0;
	padding: .9rem 0 0;
	border-top: 1px solid var(--blush);
	display: grid;
	gap: .7rem;
}

.work-brief dt {
	margin: 0 0 .18rem;
	color: var(--mint);
	font: 700 .74rem/1.2 var(--font-util);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.work-brief dd {
	margin: 0;
	color: var(--enamel);
	font-size: .95rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.work-ring {
	margin: .95rem 0 .2rem;
}

.work-ring a {
	display: inline-block;
	padding: .7rem 1.15rem;
	border-radius: 999px;
	background: var(--mint);
	color: #111111;
	font: 700 1rem/1 var(--font-util);
	text-decoration: none;
}

.work-ring-when {
	display: block;
	margin-top: .45rem;
	color: var(--enamel);
	opacity: .8;
	font-size: .88rem;
}

.work-ring-why {
	margin: 0;
	color: var(--enamel);
	opacity: .72;
	font-size: .85rem;
}

.law {
	margin: 2.2rem 0 0;
}

.law-head {
	margin: 0 0 1rem;
	color: var(--mint);
	font: 700 clamp(1.1rem, 4.8vw, 1.4rem)/1.25 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.law-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.law-one {
	padding: 1.1rem 1.15rem 1.2rem;
	border-radius: 18px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.law-one-head {
	margin: 0 0 .45rem;
	color: var(--enamel);
	font: 700 clamp(1rem, 4.3vw, 1.1rem)/1.3 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.law-one-says {
	margin: 0 0 .6rem;
	color: var(--enamel);
	opacity: .9;
	font-size: .95rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.law-one-from a {
	color: var(--mint-lit);
	font-size: .85rem;
}

.law-plain {
	margin: 1rem 0 0;
	color: var(--enamel);
	opacity: .76;
	font-size: .88rem;
	line-height: 1.55;
}

/* ── WHEN YOU ARE PAID ──────────────────────────────────────────────────────
 *
 * On every listing, never a thing anybody has to ask for. A business that has
 * not said is drawn as not having said — silence is never left to be read as
 * generous.
 */
.work-paid {
	margin: .9rem 0 0;
	padding: .75rem .9rem .8rem;
	border-radius: 14px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.work-paid-what {
	display: block;
	margin-bottom: .3rem;
	color: var(--mint);
	font: 700 .72rem/1.2 var(--font-util);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.work-paid-says {
	display: block;
	color: var(--enamel);
	font: 700 1rem/1.35 var(--font-util);
}

.work-paid-plain {
	display: block;
	margin-top: .22rem;
	color: var(--enamel);
	opacity: .8;
	font-size: .88rem;
	line-height: 1.5;
}

/* ── WHY WE ASK ─────────────────────────────────────────────────────────────
 *
 * Somebody being asked for a tax file number by a website has one question and
 * it is not what is your privacy policy. It is am I going to get paid, and is
 * this safe. So the page reads in that order, and it is set to be read rather
 * than skimmed — one column, generous line height, nothing competing.
 */
.sec--why .in {
	max-width: 44rem;
}

.why-eyebrow {
	margin: 0 0 .5rem;
	color: var(--mint);
	font: 700 .78rem/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.why-head {
	margin: 0 0 1rem;
	color: var(--enamel);
	font: 700 clamp(1.65rem, 7vw, 2.5rem)/1.15 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.why-lede {
	margin: 0 0 2.4rem;
	color: var(--enamel);
	opacity: .92;
	font-size: clamp(1.02rem, 4.4vw, 1.15rem);
	line-height: 1.62;
	text-wrap: pretty;
}

.why-part {
	margin: 0 0 2.4rem;
}

.why-part--lit {
	padding: 1.3rem 1.25rem 1.4rem;
	border-radius: 20px;
	background: var(--blush);
	border: 1px solid rgba(255, 158, 196, .4);
}

.why-part-head {
	margin: 0 0 1rem;
	color: var(--mint);
	font: 700 clamp(1.14rem, 5vw, 1.45rem)/1.25 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.why-part p {
	margin: 0 0 .9rem;
	color: var(--enamel);
	opacity: .92;
	font-size: 1rem;
	line-height: 1.66;
	text-wrap: pretty;
}

.why-gets,
.why-safe {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.why-gets li,
.why-safe li {
	color: var(--enamel);
	opacity: .92;
	font-size: 1rem;
	line-height: 1.62;
	padding-left: 1.1rem;
	border-left: 2px solid rgba(255, 158, 196, .5);
	text-wrap: pretty;
}

.why-gets strong {
	display: block;
	margin-bottom: .22rem;
	color: var(--enamel);
	opacity: 1;
}

.why-each {
	margin: 0;
	display: grid;
	gap: 1.15rem;
}

.why-each dt {
	margin: 0 0 .3rem;
	color: var(--mint-lit);
	font: 700 1.02rem/1.3 var(--font-util);
}

.why-each dd {
	margin: 0;
	color: var(--enamel);
	opacity: .9;
	font-size: .98rem;
	line-height: 1.62;
	text-wrap: pretty;
}

.why-from {
	display: block;
	margin-top: .4rem;
}

.why-from a {
	color: var(--mint);
	font-size: .86rem;
}

.why-plain {
	margin-top: 1rem;
	opacity: .78 !important;
	font-size: .92rem !important;
}

/* ── PUTTING WORK UP ────────────────────────────────────────────────────────
 *
 * A café owner at nine at night is telling somebody about tomorrow, rather than
 * filling in a record. So it is set to be worked down in one pass on a phone,
 * with the kept ones first because the second time should be one press.
 */
.putting { margin: 2.4rem 0 0; }

.putting-head {
	margin: 0 0 .5rem;
	color: var(--mint);
	font: 700 clamp(1.14rem, 5vw, 1.45rem)/1.25 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.putting-said {
	margin: 0 0 1.2rem;
	color: var(--enamel);
	opacity: .88;
	font-size: .98rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.putting-landed,
.putting-sorry {
	margin: 0 0 1.4rem;
	padding: .85rem 1rem;
	border-radius: 14px;
	font-size: .98rem;
	line-height: 1.55;
}

.putting-landed {
	background: var(--blush);
	border: 1px solid rgba(255, 158, 196, .5);
	color: var(--enamel);
}

.putting-sorry {
	background: var(--blush);
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--enamel);
}

.putting-ask {
	display: block;
	margin: 1.1rem 0 .35rem;
	color: var(--enamel);
	font: 700 .95rem/1.35 var(--font-util);
}

.putting-note {
	margin: .4rem 0 0;
	color: var(--enamel);
	opacity: .74;
	font-size: .86rem;
	line-height: 1.5;
}

.putting-note--offer {
	margin-top: 1.2rem;
	padding: .8rem .95rem;
	border-radius: 14px;
	background: rgba(255, 158, 196, .1);
	border: 1px solid rgba(200, 16, 60, .3);
	opacity: .95;
}

.putting-how {
	margin: 1.4rem 0 0;
	padding: 1rem 1.05rem 1.1rem;
	border: 1px solid var(--blush);
	border-radius: 16px;
}

.putting-how legend { padding: 0 .4rem; }

.putting-how label,
.putting-now,
.putting-keep,
.kept-now {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	margin: .5rem 0 0;
	color: var(--enamel);
	font-size: .95rem;
	line-height: 1.5;
}

.putting-now {
	margin: 1.4rem 0 0;
	padding: .9rem 1rem;
	border-radius: 16px;
	background: var(--blush);
	border: 1px solid rgba(200, 16, 60, .3);
}

.putting-go { margin-top: 1.6rem; width: 100%; }

.putting-kept { margin-bottom: 2.2rem; }

.kept-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.kept-one {
	padding: 1rem 1.05rem 1.1rem;
	border-radius: 16px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.kept-name {
	display: block;
	margin-bottom: .6rem;
	color: var(--enamel);
	font: 700 1.02rem/1.3 var(--font-util);
}

.kept-one .seek-in { margin-bottom: .5rem; }
.kept-one .press { width: 100%; margin-top: .5rem; }

/* ══ AT EVERY WIDTH, RATHER THAN NARROW-FIRST ══════════════════════════════
 *
 * ── HER RULING, 2 SEPTEMBER 2026 ──────────────────────────────────────────
 *
 * The 379px rule is struck. It was being read as *design it to be a long narrow
 * strip*, and this world was exactly that: **every page capped around 550px, so
 * at 1440 it was a thin column in the middle of an enormous dark field.**
 *
 * She views on a narrow phone pane sometimes and a normal screen other times.
 * Both have to look like somebody meant them.
 *
 * ── WHAT CHANGES AND WHAT DOES NOT ────────────────────────────────────────
 *
 * **Reading stays measured.** Prose at 1400px wide is unreadable, so a column of
 * writing keeps its comfortable measure and gains room around it rather than
 * width. That is not narrow-first; it is how reading works.
 *
 * **Everything that is a list of things becomes a grid.** Cards, listings,
 * clauses, kept shifts — they were stacked because there was no room, and at
 * width there is room.
 *
 * **And the posting moment breathes.** Twelve fields down a phone is one honest
 * pass; twelve fields down the middle of a desktop is a form pretending to be a
 * receipt.
 */

/* The page itself is allowed to be as wide as the screen it is on. */
.business,
.them,
.layers-page,
.young,
.build,
.place,
.grown {
	max-width: min(72rem, 100%);
	margin-inline: auto;
	padding-inline: clamp(12px, 2.9vw, 28px);
}

/* Writing keeps its measure and gains room around it. */
.sec--why .in,
.business-lede,
.business-open p,
.putting-said,
.why-lede {
	max-width: 42rem;
}

@media (min-width: 60rem) {

	/* ── THE OPENING ─────────────────────────────────────────────────────── */
	.business-open {
		padding-block: clamp(2.5rem, 5vw, 4.5rem);
	}

	.business-head {
		font-size: clamp(2.4rem, 4.2vw, 3.6rem);
		max-width: 20ch;
	}

	/* ── ANYTHING THAT IS A LIST OF THINGS ───────────────────────────────── */
	.business-cards,
	.work-list,
	.law-list,
	.kept-list,
	.why-gets,
	.why-safe {
		grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
		gap: 1.2rem;
		align-items: start;
	}

	.why-each {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.4rem;
		row-gap: 1.6rem;
	}

	/* ── AND THE POSTING MOMENT BREATHES ─────────────────────────────────── */
	.putting-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.6rem;
		align-items: start;
	}

	.putting-form > .putting-head,
	.putting-form > .putting-said,
	.putting-form > .putting-how,
	.putting-form > .putting-now,
	.putting-form > .putting-keep,
	.putting-form > .putting-go,
	.putting-form > .putting-note--offer,
	.putting-form > textarea,
	.putting-form > label[for="w-entails"],
	.putting-form > label[for="w-needs"] {
		grid-column: 1 / -1;
	}

	.putting-go {
		width: auto;
		justify-self: start;
		padding-inline: 2.4rem;
	}

	.putting-how {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: .5rem 1.4rem;
	}

	.putting-how legend { grid-column: 1 / -1; }
	.putting-how .putting-note { grid-column: 1 / -1; }
}

@media (min-width: 78rem) {
	.business-cards,
	.work-list,
	.law-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── THE BUSINESS PAGE'S OWN THREE ──────────────────────────────────────── */
.business-eyebrow {
	margin: 0 0 .5rem;
	color: var(--mint);
	font: 700 .78rem/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.business-head {
	margin: 0 0 1rem;
	color: var(--enamel);
	font: 700 clamp(1.8rem, 7.4vw, 2.6rem)/1.12 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.business-lede {
	margin: 0;
	color: var(--enamel);
	opacity: .92;
	font-size: clamp(1.02rem, 4.4vw, 1.18rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.business-three { margin: 2.2rem 0 0; }

.business-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.business-cards li {
	padding: 1.2rem 1.25rem 1.3rem;
	border-radius: 20px;
	background: var(--blush);
	border: 1px solid var(--blush);
}

.business-cards h2 {
	margin: 0 0 .45rem;
	color: var(--mint);
	font: 700 1.06rem/1.3 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.business-cards p {
	margin: 0;
	color: var(--enamel);
	opacity: .9;
	font-size: .96rem;
	line-height: 1.58;
	text-wrap: pretty;
}

.business-know { margin: 2.6rem 0 0; }

.business-more { margin: 1.4rem 0 0; }
.business-more a { color: var(--mint); }

/* ══ WHAT SITS ON THE DARK, AND WHAT SITS ON THE RED ═══════════════════════
 *
 * ── THE HALF OF A PALETTE CHANGE NOBODY SEES COMING ───────────────────────
 *
 * Moving the ground from near-black to white made `--enamel` a dark ink, which
 * is right for a hundred and twenty-one rules and **wrong for every one that
 * was already sitting on something dark.** Her weather plate went red text on a
 * red ground; the bar went dark ink on near-black.
 *
 * Her own law is the fix and the warning: the rule that governs is the LAST one
 * that wins. So the surfaces that stayed dark get their ink named here, once,
 * at the end, rather than hunted through two thousand lines.
 *
 * **A palette is never one token.** It is a ground, an ink, and every place the
 * two were already agreed.
 */

/* The bar stays dark on purpose — somewhere to arrive. */
.bar { background: var(--purple-deep); }
.bar a,
.bar .bar-road a,
.bar-roads a { color: #FFF3F7; }

/* ── HER WEATHER LINE HAS NO PLATE, AND I GAVE IT ONE ─────────────────────
 *
 * There are FOUR `.bar .arrival` declarations in this stylesheet. The third one
 * strips the plate deliberately — no background, no border, no shadow — so it
 * is a sentence on the dark bar and nothing else.
 *
 * I added a red ground and a border back without reading the ones already
 * there, and made a red rectangle with the last word falling out of the side
 * of it. **Her law, and this world has now paid for it a fifth time: the rule
 * that governs is the last one that wins, never the last one edited.** Look for
 * a second declaration before looking anywhere else.
 */
.bar .arrival {
	background: none;
	border: 0;
	box-shadow: none;
	color: #FFF3F7;
}

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

.bar .arrival .arrival-ask { color: #FFD9E6; }

/* Anything the theme paints red or deep pink carries white writing. */
.press,
.seek-go,
.work-ring a,
.putting-go {
	background: var(--purple);
	color: #FFF3F7;
}

.press:hover,
.putting-go:hover,
.work-ring a:hover { background: var(--mint-deep); }

/* And the foot stays dark, so the page lands somewhere rather than stopping. */
.foot,
.site-foot,
footer.foot {
	background: var(--purple-deep);
	color: #FFF3F7;
}

.foot a,
.site-foot a { color: var(--mint-lit); }

/* ── AND THE CARDS ARE REAL SURFACES NOW ───────────────────────────────────
 *
 * They were translucent white over black, which on a white ground is nothing
 * at all. Blush with a red hairline, so a card reads as a card.
 */
.business-cards li,
.law-one,
.work,
.kept-one,
.room-card,
.putting-how,
.why-part--lit {
	background: var(--blush);
	border-color: rgba(200, 16, 60, .18);
	box-shadow: 0 1px 2px rgba(200, 16, 60, .06);
}

.work--now {
	background: #FFE1EC;
	border-color: rgba(200, 16, 60, .38);
}

.work-now,
.resting-eyebrow { color: var(--purple); }

.work-paid {
	background: #FFFFFF;
	border-color: rgba(200, 16, 60, .16);
}

/* ── HER WEATHER PLATE WAS NEVER HOLDING ITS OWN OVERLAY ────────────────────
 *
 * `.bar .arrival::before` is `position: absolute; inset: 0`, and the plate
 * itself was never positioned — so the overlay anchored to the BAR instead and
 * painted a rectangle that had nothing to do with the words. On a dark ground
 * nobody saw it. On a white one it is a red block with the sentence falling out
 * of the side of it.
 *
 * **A fault that only shows when the colour changes was always there.**
 */
.bar .arrival {
	max-width: min(46ch, 100%);
	white-space: normal;
}

/* ── ANYTHING SOMEBODY TYPES INTO ───────────────────────────────────────────
 *
 * White, with a red keyline so the field can be found, and dark writing so it
 * can be read back. The placeholder is quiet rather than invisible.
 */
.seek-in,
input[type="text"].seek-in,
input[type="email"].seek-in,
input[type="tel"].seek-in,
textarea.seek-in {
	background: #FFFFFF;
	background-image: none;
	border: 1px solid rgba(200, 16, 60, .3);
	color: var(--enamel);
	box-shadow: none;
}

.seek-in::placeholder { color: #9A7686; opacity: 1; }

.seek-in:focus-visible {
	outline: 3px solid var(--purple);
	outline-offset: 1px;
	border-color: var(--purple);
}

/* The two doors are cards on the page rather than blocks of colour. */
.door {
	background: var(--blush);
	border: 1px solid rgba(200, 16, 60, .2);
	color: var(--enamel);
}

.door-small,
.body,
.lede,
.found-after {
	color: var(--row-ink-soft);
}

/* Her heading over a white ground. */
.head,
.found-head,
.why-head,
.business-head { color: var(--enamel); text-shadow: none; }

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

.seek-go,
.seek-go:link,
.seek-go:visited {
	background: var(--purple);
	color: #FFF3F7;
	border: 0;
}

.seek-go:hover { background: var(--mint-deep); }

/* The button's own shadow was built for a dark ground and reads as soot on white. */
.press, .seek-go, .putting-go, .work-ring a {
	box-shadow: 0 2px 6px rgba(200, 16, 60, .28);
	-webkit-text-fill-color: #FFF3F7;
}

/* ── WHERE PICTURES GO ──────────────────────────────────────────────────── */
.slot { margin: 0 0 3rem; }

.slot-where {
	margin: 0 0 .35rem;
	color: var(--purple);
	font: 700 .76rem/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.slot-head {
	margin: 0 0 1rem;
	color: var(--enamel);
	font: 700 clamp(1.2rem, 4.6vw, 1.6rem)/1.22 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.slot-shot { margin: 0 0 1rem; position: relative; }

.slot-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

.slot-shot--wide img { aspect-ratio: 16 / 7; }
.slot-shot--tall img { aspect-ratio: 4 / 5; max-width: 26rem; }
.slot-shot--pair img { aspect-ratio: 1 / 1; }

.slot-shot figcaption {
	position: absolute;
	left: .75rem;
	bottom: .75rem;
	padding: .3rem .65rem;
	border-radius: 999px;
	background: rgba(23, 8, 16, .82);
	color: #FFD9E6;
	font: 700 .72rem/1 var(--font-util);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.slot-pair { display: grid; gap: 1rem; }

.slot-brief { margin: 0; display: grid; gap: .55rem; }

.slot-brief dt {
	color: var(--purple);
	font: 700 .82rem/1.3 var(--font-util);
}

.slot-brief dd {
	margin: 0 0 .3rem;
	color: var(--enamel);
	opacity: .9;
	font-size: .96rem;
	line-height: 1.58;
	text-wrap: pretty;
}

@media (min-width: 60rem) {
	.slot-pair { grid-template-columns: 1fr 1fr; }
	.slot-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
	.slot-shot--tall img { max-width: 30rem; }
}

/* ── HER OWN SAY ────────────────────────────────────────────────────────── */
.say { display: grid; gap: 1.4rem; margin: 0 0 1.6rem; }

.say-landed {
	margin: 0;
	padding: .85rem 1rem;
	border-radius: 14px;
	background: #FFE1EC;
	border: 1px solid rgba(200, 16, 60, .34);
	color: var(--enamel);
	font-size: .97rem;
}

.say-one {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	margin: 0 0 .9rem;
	padding: .85rem .95rem;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .18);
	cursor: pointer;
}

.say-one strong { display: block; color: var(--enamel); font-size: 1rem; }

.say-plain,
.say-asks {
	display: block;
	margin-top: .2rem;
	color: var(--row-ink-soft);
	font-size: .9rem;
	line-height: 1.5;
}

.say-asks { color: var(--purple); }

.say-ask {
	display: block;
	margin: 1rem 0 .3rem;
	color: var(--enamel);
	font: 700 .93rem/1.35 var(--font-util);
}

.say-why,
.say-held {
	margin: .3rem 0 0;
	color: var(--row-ink-soft);
	font-size: .85rem;
	line-height: 1.5;
}

.say-held { color: var(--purple); font-weight: 700; }

.say-been { margin: 1.3rem 0 .4rem; color: var(--purple); font: 700 .8rem/1 var(--font-util); letter-spacing: .14em; text-transform: uppercase; }
.say-been-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; color: var(--row-ink-soft); font-size: .88rem; }

.say-terms { margin: 0 0 1.2rem; padding-left: 1.1rem; display: grid; gap: .9rem; }
.say-terms h3 { margin: 0 0 .2rem; color: var(--enamel); font: 700 .98rem/1.3 var(--font-util); }
.say-terms p { margin: 0; color: var(--row-ink-soft); font-size: .92rem; line-height: 1.55; text-wrap: pretty; }

@media (min-width: 60rem) {
	.say-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* ══ THE FRONT PAGE, WITH A RHYTHM TO IT ═══════════════════════════════════
 *
 * ── HER WORDS: I WANT TO SEE IT LOOKING AMAZING ───────────────────────────
 *
 * After her night market the page went flat white and stayed there — three
 * sections, one ground, nothing to scroll toward. **A page with one ground is a
 * document.** What makes a world is arriving somewhere different every time you
 * think you have finished.
 *
 * So it alternates, and each ground does a job:
 *
 *   the night market   arriving, and the only true dark
 *   white              the two sides, read carefully, one decision
 *   blush              the money, softened, because a price should not shout
 *   red                the last word, and it is the only red band on the site
 *
 * Her law underneath it: a world is somewhere, never something to read.
 */

.sec--sides,
.sec--money,
.sec--last { padding-block: clamp(3rem, 8vw, 6rem); }

.sec--sides { background: #FFFFFF; }

.sec--money {
	background: linear-gradient(180deg, var(--blush-lit) 0%, var(--blush) 100%);
	border-block: 1px solid rgba(200, 16, 60, .14);
}

/* ── THE TWO SIDES, AS TWO REAL DECISIONS ──────────────────────────────── */
.sec--sides .in { max-width: 68rem; }

.sides {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.4rem;
}

.side {
	position: relative;
	padding: clamp(1.4rem, 3vw, 2.1rem);
	border-radius: 26px;
	background: var(--blush-lit);
	border: 1px solid rgba(200, 16, 60, .2);
	overflow: hidden;
}

.side::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: linear-gradient(90deg, var(--purple), var(--mint-lit));
}

.side-who {
	margin: .4rem 0 .5rem;
	color: var(--purple);
	font: 700 .78rem/1 var(--font-util);
	letter-spacing: .17em;
	text-transform: uppercase;
}

.side-head {
	margin: 0 0 .7rem;
	color: var(--enamel);
	font: 700 clamp(1.3rem, 3.4vw, 1.85rem)/1.2 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.side-says {
	margin: 0 0 1rem;
	color: var(--row-ink-soft);
	font-size: 1rem;
	line-height: 1.62;
	text-wrap: pretty;
}

.side-cost {
	margin: 0 0 1.2rem;
	padding: .7rem .85rem;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .16);
	color: var(--enamel);
	font-size: .92rem;
	line-height: 1.55;
}

/* ── THE MONEY, SOFTENED ───────────────────────────────────────────────── */
.money-eyebrow {
	color: var(--purple);
	letter-spacing: .18em;
	text-transform: uppercase;
	font: 700 .8rem/1 var(--font-util);
	margin: 0 0 .6rem;
}

.money-head {
	margin: 0 0 .6rem;
	color: var(--enamel);
	font: 700 clamp(1.5rem, 4.6vw, 2.3rem)/1.16 var(--font-head, var(--font-util));
	text-wrap: balance;
	max-width: 22ch;
}

.money-cut {
	margin: 0 0 1.6rem;
	color: var(--purple);
	font: 700 clamp(1rem, 2.6vw, 1.16rem)/1.45 var(--font-util);
}

.money-rows { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .8rem; }

.money-rows li {
	display: grid;
	gap: .15rem;
	padding: .95rem 1.1rem;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .14);
}

.money-rows strong { color: var(--purple); font: 700 .82rem/1 var(--font-util); letter-spacing: .12em; text-transform: uppercase; }
.money-rows span { color: var(--enamel); font-size: .97rem; line-height: 1.55; }

.money-rows .is-lit {
	background: #FFE1EC;
	border-color: rgba(200, 16, 60, .34);
}

.money-plain { margin: .5rem 0 0; color: var(--row-ink-soft); font-size: .93rem; line-height: 1.58; }

/* ── AND THE LAST WORD, WHICH IS THE ONLY RED BAND HERE ────────────────── */
.sec--last {
	background: var(--purple);
	color: #FFF3F7;
	text-align: center;
}

.sec--last .in { max-width: 46rem; }

.last-head {
	margin: 0 0 .8rem;
	color: #FFF3F7;
	font: 700 clamp(1.6rem, 5.4vw, 2.6rem)/1.14 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.last-says {
	margin: 0 0 1.6rem;
	color: #FFE1EC;
	font-size: clamp(1rem, 3vw, 1.14rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.last-go {
	display: inline-block;
	padding: 1rem 2.4rem;
	border-radius: 999px;
	background: #FFF3F7;
	color: var(--purple);
	font: 700 1.05rem/1 var(--font-util);
	text-decoration: none;
	box-shadow: 0 3px 0 rgba(122, 11, 44, .5);
}

.last-go:hover { background: #FFFFFF; }

@media (min-width: 54rem) {
	.sides { grid-template-columns: 1fr 1fr; }
	.money-rows { grid-template-columns: 1fr 1fr; }
	.sec--money .in { max-width: 62rem; }
}

/* ══ THE SEARCH, AND THE NINE SHELVES ══════════════════════════════════════ */

.sec--seek {
	background: var(--purple-deep);
	padding-block: clamp(2rem, 5vw, 3.2rem);
}

.sec--seek .in { max-width: 62rem; }

.seek-first {
	margin: 0 0 .9rem;
	color: #FFF3F7;
	font: 700 clamp(1.15rem, 3.6vw, 1.5rem)/1.25 var(--font-head, var(--font-util));
}

.seek {
	display: grid;
	gap: .6rem;
}

.seek-under {
	margin: .9rem 0 0;
	color: #FFC7DE;
	font-size: .93rem;
}

.seek-under a { color: #FFF3F7; }

/* ── THE SHELVES ───────────────────────────────────────────────────────── */
.sec--shelves {
	background: #FFFFFF;
	padding-block: clamp(3rem, 8vw, 5.5rem);
}

.sec--shelves .in { max-width: 72rem; }

.shelves-head {
	margin: .3rem 0 1.8rem;
	color: var(--enamel);
	font: 700 clamp(1.5rem, 4.8vw, 2.4rem)/1.15 var(--font-head, var(--font-util));
	text-wrap: balance;
	max-width: 20ch;
}

.shelves {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
}

.shelf-face {
	position: relative;
	display: block;
	height: 100%;
	padding: 1.15rem 3.4rem 1.25rem 1.2rem;
	border-radius: 20px;
	background: var(--blush-lit);
	border: 1px solid rgba(200, 16, 60, .2);
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.shelf-face::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	border-radius: 20px 0 0 20px;
	background: linear-gradient(180deg, var(--purple), var(--mint-lit));
}

.shelf-face:hover {
	background: #FFE1EC;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(200, 16, 60, .16);
}

.shelf-name {
	display: block;
	margin-bottom: .3rem;
	color: var(--enamel);
	font: 700 clamp(1.02rem, 2.6vw, 1.14rem)/1.28 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.shelf-says {
	display: block;
	color: var(--row-ink-soft);
	font-size: .93rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.shelf-count {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	min-width: 2.1rem;
	padding: .28rem .5rem;
	border-radius: 999px;
	background: var(--purple);
	color: #FFF3F7;
	font: 700 .84rem/1 var(--font-util);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

@media (min-width: 44rem) {
	.seek { grid-template-columns: 2fr 1fr auto; align-items: center; }
	.shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 66rem) {
	.shelves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══ I CAN DO THAT ═════════════════════════════════════════════════════════ */
.cando {
	margin: 1rem 0 0;
	padding: 1rem 1.05rem 1.1rem;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .2);
}

.cando-ask {
	display: block;
	margin: 0 0 .35rem;
	color: var(--enamel);
	font: 700 .9rem/1.35 var(--font-util);
}

.cando .press { width: 100%; margin-top: .6rem; }

.cando-under,
.cando-not,
.cando-landed {
	margin: .55rem 0 0;
	font-size: .87rem;
	line-height: 1.5;
	color: var(--row-ink-soft);
}

.cando-landed {
	margin: 0;
	padding: .7rem .85rem;
	border-radius: 12px;
	background: #FFE1EC;
	border: 1px solid rgba(200, 16, 60, .3);
	color: var(--enamel);
	font-weight: 700;
}

.cando-not { margin: 0 0 .5rem; color: var(--enamel); }
.cando-road { color: var(--purple); font-weight: 700; }

/* ══ WHO HAS ANSWERED YOU ══════════════════════════════════════════════════ */
.answers { margin: 2.4rem 0 0; }

.answers-head {
	margin: 0 0 1rem;
	color: var(--purple);
	font: 700 clamp(1.14rem, 4.6vw, 1.5rem)/1.25 var(--font-head, var(--font-util));
}

.answers-empty {
	margin: 0;
	padding: 1.1rem 1.15rem;
	border-radius: 18px;
	background: var(--blush);
	border: 1px solid rgba(200, 16, 60, .18);
	color: var(--enamel);
	line-height: 1.6;
	text-wrap: pretty;
}

.answers-for { margin: 0 0 1.8rem; }

.answers-what {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .8rem;
	color: var(--enamel);
	font: 700 1.06rem/1.3 var(--font-head, var(--font-util));
}

.answers-many {
	min-width: 1.9rem;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: var(--purple);
	color: #FFF3F7;
	font: 700 .82rem/1.2 var(--font-util);
	text-align: center;
}

.answers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.answer {
	padding: 1.05rem 1.1rem 1.15rem;
	border-radius: 18px;
	background: var(--blush-lit);
	border: 1px solid rgba(200, 16, 60, .2);
}

.answer-name { margin: 0 0 .3rem; color: var(--enamel); font: 700 1.08rem/1.25 var(--font-head, var(--font-util)); }
.answer-said { margin: 0 0 .55rem; color: var(--enamel); font-size: .97rem; line-height: 1.55; text-wrap: pretty; }

.answer-record {
	margin: 0 0 .5rem;
	color: var(--purple);
	font: 700 .87rem/1.4 var(--font-util);
}

.answer-word {
	margin: 0 0 .55rem;
	padding-left: .85rem;
	border-left: 3px solid rgba(200, 16, 60, .35);
	color: var(--row-ink-soft);
	font-size: .93rem;
	line-height: 1.55;
	font-style: normal;
	text-wrap: pretty;
}

.answer-ready { margin: 0 0 .6rem; color: var(--row-ink-soft); font-size: .86rem; }
.answer-go { color: var(--purple); font-weight: 700; font-size: .92rem; }

@media (min-width: 60rem) {
	.answers-list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
}

/* ══ WHAT THIS ACTUALLY IS ═════════════════════════════════════════════════
 *
 * ── HER BRIEF: SEXY, BOLD, AND REALLY, REALLY CLEAR ───────────────────────
 *
 * The biggest words on the site, because it is the one thing everybody must
 * read. **Bold is not shouting** — it is one enormous number per claim, so the
 * eye lands before the reading starts.
 *
 * And the dark band under her photograph is gone. Her ruling: pink, red, white,
 * and a little purposeful black. The black is her night market and nothing
 * else on this page.
 */

.sec--what {
	background: linear-gradient(165deg, #FFFFFF 0%, var(--blush) 60%, #FFD9E6 100%);
	padding-block: clamp(2.6rem, 7vw, 5rem);
	border-bottom: 1px solid rgba(200, 16, 60, .16);
}

.sec--what .in { max-width: 70rem; }

.what-eyebrow {
	margin: 0 0 .5rem;
	color: var(--purple);
	font: 700 .84rem/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.what-head {
	margin: 0 0 2rem;
	color: var(--enamel);
	font: 700 clamp(1.9rem, 7.2vw, 3.4rem)/1.08 var(--font-head, var(--font-util));
	letter-spacing: -.015em;
	text-wrap: balance;
	max-width: 17ch;
}

.what-three {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.what-one {
	padding: 1.3rem 1.35rem 1.4rem;
	border-radius: 22px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .2);
	box-shadow: 0 2px 10px rgba(200, 16, 60, .07);
}

.what-one--proper {
	background: var(--purple);
	border-color: var(--purple);
}

.what-big {
	display: block;
	margin-bottom: .5rem;
	color: var(--purple);
	font: 700 clamp(1.9rem, 6vw, 2.7rem)/1 var(--font-head, var(--font-util));
	letter-spacing: -.02em;
}

.what-one--proper .what-big { color: #FFF3F7; }

.what-says {
	display: block;
	color: var(--row-ink-soft);
	font-size: 1rem;
	line-height: 1.58;
	text-wrap: pretty;
}

.what-says strong { color: var(--enamel); }

.what-one--proper .what-says { color: #FFD9E6; }
.what-one--proper .what-says strong { color: #FFF3F7; }

.what-under {
	margin: 0;
	color: var(--enamel);
	font: 700 clamp(1.05rem, 3.4vw, 1.35rem)/1.4 var(--font-head, var(--font-util));
	text-wrap: balance;
}

/* ── THE SEARCH IS NO LONGER A BLACK BAND ─────────────────────────────── */
.sec--seek {
	background: #FFFFFF;
	border-bottom: 1px solid rgba(200, 16, 60, .14);
}

.sec--seek .seek-first { color: var(--enamel); }
.sec--seek .seek-under { color: var(--row-ink-soft); }
.sec--seek .seek-under a { color: var(--purple); font-weight: 700; }

/* ══ HOW IT GOES ═══════════════════════════════════════════════════════════ */
.sec--how {
	background: var(--blush-lit);
	padding-block: clamp(3rem, 8vw, 5.5rem);
	border-block: 1px solid rgba(200, 16, 60, .14);
}

.sec--how .in { max-width: 70rem; }

.how-head {
	margin: .3rem 0 1.8rem;
	color: var(--enamel);
	font: 700 clamp(1.5rem, 5vw, 2.4rem)/1.14 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.how-steps {
	list-style: none;
	margin: 0 0 1.8rem;
	padding: 0;
	counter-reset: none;
	display: grid;
	gap: 1.1rem;
}

.how-step {
	position: relative;
	padding: 1.3rem 1.35rem 1.4rem;
	border-radius: 22px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .2);
}

.how-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .7rem;
	border-radius: 999px;
	background: var(--purple);
	color: #FFF3F7;
	font: 700 1.15rem/1 var(--font-util);
}

.how-step-head {
	margin: 0 0 .4rem;
	color: var(--enamel);
	font: 700 clamp(1.08rem, 3vw, 1.25rem)/1.25 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.how-step-says {
	margin: 0;
	color: var(--row-ink-soft);
	font-size: .97rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.how-go { margin: 0; display: grid; gap: .7rem; justify-items: start; }
.how-cost { color: var(--row-ink-soft); font-size: .92rem; }

@media (min-width: 52rem) {
	.what-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
	.how-go { grid-auto-flow: column; align-items: center; justify-items: start; gap: 1.2rem; }
}

/* ── AND THE OTHER TWO PEOPLE WHO LAND HERE ─────────────────────────────── */
.what-else {
	margin: 2.4rem 0 0;
	display: grid;
	gap: 1.2rem;
}

.what-lane {
	padding: 1.5rem 1.4rem 1.6rem;
	border-radius: 24px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .2);
}

.what-lane--shop {
	background: var(--blush);
	border-color: rgba(200, 16, 60, .3);
}

.what-lane-who {
	margin: 0 0 .4rem;
	color: var(--purple);
	font: 700 .78rem/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.what-lane-head {
	margin: 0 0 .7rem;
	color: var(--enamel);
	font: 700 clamp(1.25rem, 4vw, 1.65rem)/1.18 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.what-lane-says {
	margin: 0 0 1rem;
	color: var(--row-ink-soft);
	font-size: .98rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.what-lane-facts {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.what-lane-facts li {
	padding-left: .95rem;
	border-left: 3px solid rgba(200, 16, 60, .35);
	color: var(--row-ink-soft);
	font-size: .95rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.what-lane-facts strong { color: var(--enamel); }

.what-lane-go {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 999px;
	background: var(--purple);
	color: #FFF3F7;
	font: 700 .98rem/1 var(--font-util);
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(200, 16, 60, .28);
}

.what-lane-go:hover { background: var(--mint-deep); }

@media (min-width: 52rem) {
	.what-else { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ══ THE THREE LANES, EACH ON ITS OWN PAGE ═════════════════════════════════
 *
 * Her ruling: this is for eighteen to twenty-five-year-olds, as well as the
 * community and businesses, so create clear paths and design pages appropriate
 * for them. **Two of the three roads were still LocaLilly's** — a person of
 * twenty-two read a page about somebody's child, and a neighbour looking for a
 * lawn met two sign-up forms about being fifteen.
 */
.lane {
	max-width: min(64rem, 100%);
	margin-inline: auto;
	padding-inline: clamp(12px, 2.9vw, 28px);
	padding-bottom: clamp(2rem, 6vw, 4rem);
}

.lane-open { padding-block: clamp(2.4rem, 6vw, 4.4rem); }

.lane-eyebrow {
	margin: 0 0 .5rem;
	color: var(--purple);
	font: 700 .82rem/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.lane-head {
	margin: 0 0 1rem;
	color: var(--enamel);
	font: 700 clamp(1.8rem, 6.6vw, 3rem)/1.1 var(--font-head, var(--font-util));
	letter-spacing: -.014em;
	text-wrap: balance;
	max-width: 19ch;
}

.lane-lede {
	margin: 0 0 1.6rem;
	max-width: 42rem;
	color: var(--row-ink-soft);
	font-size: clamp(1.02rem, 3.6vw, 1.16rem);
	line-height: 1.62;
	text-wrap: pretty;
}

.lane-go { display: inline-block; }

.lane-part { margin: 0 0 2.4rem; }

.lane-part--lit {
	padding: 1.4rem 1.35rem 1.5rem;
	border-radius: 24px;
	background: var(--blush);
	border: 1px solid rgba(200, 16, 60, .24);
}

.lane-part-head {
	margin: 0 0 1rem;
	color: var(--purple);
	font: 700 clamp(1.2rem, 4.4vw, 1.6rem)/1.2 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.lane-part p {
	margin: 0 0 .9rem;
	max-width: 42rem;
	color: var(--row-ink-soft);
	font-size: 1rem;
	line-height: 1.64;
	text-wrap: pretty;
}

.lane-part p strong { color: var(--enamel); }

.lane-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.lane-facts li {
	padding: 1rem 1.1rem 1.05rem;
	border-radius: 18px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .2);
	color: var(--row-ink-soft);
	font-size: .98rem;
	line-height: 1.58;
	text-wrap: pretty;
}

.lane-facts strong { color: var(--enamel); }

.lane-more { color: var(--purple); font-weight: 700; }

.lane-last {
	margin: 2.6rem 0 0;
	padding: clamp(1.8rem, 5vw, 3rem) clamp(1.3rem, 4vw, 2.4rem);
	border-radius: 28px;
	background: var(--purple);
	text-align: center;
}

.lane-last-head {
	margin: 0 0 1.2rem;
	color: #FFF3F7;
	font: 700 clamp(1.4rem, 5vw, 2.2rem)/1.15 var(--font-head, var(--font-util));
	text-wrap: balance;
}

.lane-last-go {
	display: inline-block;
	padding: 1rem 2.4rem;
	border-radius: 999px;
	background: #FFF3F7;
	color: var(--purple);
	font: 700 1.05rem/1 var(--font-util);
	text-decoration: none;
}

.lane-last-cost { margin: 1rem 0 0; color: #FFD9E6; font-size: .93rem; }

@media (min-width: 54rem) {
	.lane-facts { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* The ask, beside the claim rather than nineteen thousand pixels below it. */
.what-do { margin: 1.4rem 0 0; }
.what-do .press { display: inline-block; padding: 1rem 2.4rem; font-size: 1.05rem; }

/* ══ WHAT THIS WORLD HAD LEFT THE PARENT TO DECIDE ═════════════════════════
 *
 * ── THE MECHANISM, WHICH IS THE OPPOSITE OF WHAT IT LOOKS LIKE ────────────
 *
 * The child stylesheet loads last, so **the child always wins the properties it
 * declares.** The hazard is the ones it never declared: a child using a parent's
 * class name and setting only a colour silently inherits everything else — the
 * typeface, the size, the line height, the margins — with no error anywhere and
 * nothing to notice.
 *
 * Measured on UNiiVERSE rather than assumed:
 *
 *   .body      the WHOLE type — family, size, weight, line height — and margin
 *   .head      family, size, margin
 *   .eyebrow   margin
 *   .door      padding
 *
 * **So the size and the typeface of her body copy and her biggest headings were
 * being decided by a stylesheet that belongs to the family rather than to this
 * world.** Nothing looked wrong, and nothing was hers.
 *
 * These are claimed at the values they already render, so nothing moves today
 * and nothing can move underneath her tomorrow. Broke it on Love Always'
 * footer; found here by asking what had NOT been declared rather than what was
 * overriding what.
 */
.head {
	font-family: var(--font-head);
	font-size: clamp(31px, 6.8vw, 73px);
	line-height: .94;
	letter-spacing: .004em;
	margin: 0;
}

.body {
	font-family: var(--font-util);
	font-size: clamp(16px, 4.2vw, 19px);
	font-weight: 500;
	line-height: 1.5;
	margin: 22px 0 0;
	max-width: 44ch;
}

.eyebrow {
	font-family: var(--font-util);
	font-size: clamp(14px, 3.7vw, 17px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .13em;
	margin: 0 0 16px;
}

.door {
	padding: clamp(20px, 2.4vw, 30px);
	color: var(--door-ink);
}

/* ══ WHAT HAPPENS NEXT ═════════════════════════════════════════════════════ */
.next {
	margin: 1rem 0 0;
	padding: 1rem 1.05rem 1.1rem;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid rgba(200, 16, 60, .22);
}

.next-ask {
	margin: 0 0 .5rem;
	color: var(--purple);
	font: 700 .78rem/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.next-said { margin: 0 0 .7rem; color: var(--enamel); font: 700 1rem/1.4 var(--font-util); }
.next-why { margin: 0 0 .7rem; color: var(--row-ink-soft); font-size: .9rem; line-height: 1.55; }

.next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.next .press { width: 100%; }
.next textarea { margin-bottom: .6rem; }

.next-word {
	margin: 0;
	padding-left: .9rem;
	border-left: 3px solid rgba(200, 16, 60, .35);
	color: var(--row-ink-soft);
	font-size: .95rem;
	line-height: 1.55;
	font-style: normal;
}

@media (min-width: 60rem) {
	.next-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* ══ HER RECORD, ON HER OWN PAGE ═══════════════════════════════════════════ */
.record { margin: 1.8rem 0 0; }

.record-jobs { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .5rem; }

.record-jobs li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem .85rem;
	border-radius: 12px;
	background: var(--blush);
	border: 1px solid rgba(200, 16, 60, .16);
}

.record-what { color: var(--enamel); font-size: .96rem; }
.record-when { color: var(--row-ink-soft); font-size: .86rem; white-space: nowrap; }

.record-words { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.record-words li {
	padding-left: .95rem;
	border-left: 3px solid rgba(200, 16, 60, .35);
	color: var(--row-ink-soft);
	font-size: .97rem;
	line-height: 1.58;
	text-wrap: pretty;
}

.record--first { padding: 1rem 1.1rem; border-radius: 16px; background: var(--blush); border: 1px solid rgba(200, 16, 60, .2); }
.record-first { margin: 0; color: var(--enamel); font-size: .97rem; line-height: 1.55; text-wrap: pretty; }

@media (min-width: 54rem) {
	.record-words { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * HER OWN WORK — what she has to turn up to, above anything she has to fill in.
 *
 * A letter told her Saturday was hers and her own room had no idea. This is
 * that record, read back. **The shift she has to be at is the loudest thing on
 * her page**, and the door and the person to ask for sit on it, so she is never
 * hunting a listing at eight in the morning.
 * ───────────────────────────────────────────────────────────────────────── */

.mine-list,
.mine-waiting {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .85rem;
}

.mine-one {
	padding: 1rem 1.05rem 1.1rem;
	border-radius: 16px;
	background: var(--cream);
	border: 1px solid var(--keyline);
}

.mine-when {
	margin: 0 0 .3rem;
	color: var(--purple);
	font: 700 .78rem/1.2 var(--font-util);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mine-what {
	margin: 0 0 .25rem;
	color: var(--enamel);
	font: 600 clamp(1.08rem, 4.7vw, 1.24rem)/1.25 var(--font-head, var(--font-util));
}

.mine-where {
	margin: 0;
	color: var(--mint-deep);
	font: 400 .92rem/1.45 var(--font-util);
}

.mine-brief {
	margin: .85rem 0 0;
	padding: .8rem 0 0;
	border-top: 1px solid var(--keyline);
	display: grid;
	gap: .15rem;
}

/*
 * ── STACKED AT HER WIDTH, SIDE BY SIDE WHEN THERE IS ROOM ───────────────────
 *
 * WHERE TO TURN UP beside its answer leaves a value column four words wide, and
 * a side door on Rose Street breaks across four lines. **At 379 the label goes
 * above the line it names** and every answer gets the whole card.
 */
.mine-brief dd + dt { margin-top: .65rem; }

@media (min-width: 30rem) {
	.mine-brief {
		grid-template-columns: minmax(5.4rem, auto) 1fr;
		gap: .4rem .8rem;
	}

	.mine-brief dd + dt { margin-top: 0; }
}

.mine-brief dt {
	margin: 0;
	color: var(--mint);
	font: 600 .76rem/1.45 var(--font-util);
	letter-spacing: .07em;
	text-transform: uppercase;
}

.mine-brief dd {
	margin: 0;
	color: var(--enamel);
	font: 400 .9rem/1.5 var(--font-util);
}

.mine-waiting li {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .6rem;
	align-items: baseline;
	padding: .55rem .2rem;
	border-bottom: 1px solid var(--keyline);
}

.mine-waiting li:last-child { border-bottom: 0; }

.mine-what-small {
	color: var(--enamel);
	font: 500 .95rem/1.4 var(--font-util);
}

.mine-where-small,
.mine-word {
	color: var(--mint-deep);
	font: 400 .84rem/1.4 var(--font-util);
}

.mine-word {
	font-family: var(--font-hand, var(--font-util));
	font-size: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE ONWARD FROM AN EMPTY SEARCH
 *
 * With the world this new, every search lands on that screen. It carried a
 * heading and one line and **no way to do anything at all**.
 * ───────────────────────────────────────────────────────────────────────── */

.join-onward {
	margin: 1.1rem 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * A PRESS IS SOMETHING A THUMB CAN HIT
 *
 * `.press` sets no padding of its own — three scopes add it, and anything
 * outside them is only as tall as its own line. **Put Your Name Up under Three
 * Things, And You Are Working measured 38 pixels**, on a world for people who
 * are on a phone every time.
 *
 * The floor is the durable half. It lifts only what is under it and leaves
 * every padded press exactly as it was, so the next unscoped one cannot be
 * small either.
 * ───────────────────────────────────────────────────────────────────────── */

.press {
	min-height: 2.75rem;

	/*
	 * ── AND ROOM ROUND THE WORDS, WHICH IT NEVER HAD ────────────────────
	 *
	 * `.press` set no padding, so every one outside a scope that added some
	 * sat with its words flush against the edges of its own box. Measured at
	 * 379: **Put Your Name Up on the young person's page, Find Somebody
	 * Close on the community page, and Sign In on both** — which is the only
	 * way in for a business.
	 *
	 * Each looked broken rather than tight, and each is the main thing that
	 * page is asking somebody to do.
	 *
	 * The burger keeps nought, below, because it sets its own width and
	 * height and holds three lines rather than words.
	 */
	padding: .7rem 1.4rem;

	/*
	 * ── A BUTTON DOES NOT WEAR A LINK'S UNDERLINE ───────────────────────
	 *
	 * `.press` never reset it, so an `<a class="press">` kept the browser's
	 * default and **Put Your Name Up sat underlined inside a filled red
	 * button** — reading as neither a link nor a button.
	 *
	 * Every other button class on this world already sets none, so this is
	 * the odd one rather than the choice. Her ruling on a quiet underlined
	 * word was about a link that is meant to be gentle, and that stays
	 * exactly as it is.
	 */
	text-decoration: none;
}

.how-go .press {
	display: inline-flex;
	align-items: center;
	padding: .8rem 1.6rem;
}

/*
 * Put Work Up measured 41 pixels — the road a household takes to put the
 * garden that got away in front of somebody. **Three pixels under, which is
 * exactly the kind that never gets noticed** because it looks like a button
 * and simply misses more often than it should.
 */
.what-lane-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
}

.bar-burger.press,
.bar-burger {
	padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ONE PICTURE AT THE TOP OF EACH ROAD
 *
 * Her ruling: the same feel with fewer pictures, and let people get there and
 * research. Three deliberate places rather than a set, and each draws only
 * where she has chosen one.
 * ───────────────────────────────────────────────────────────────────────── */

.road-pic {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.25rem;
	border-radius: 18px;
}

@media (min-width: 48rem) {
	.road-pic { border-radius: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * THE SHINE
 *
 * ── HER RULING, 6 SEPTEMBER 2026 ──────────────────────────────────────────
 *
 * **This is stationary. It is not sexy and it needs to be. Do not give me a
 * 2015 website, give me a 2045 website. Soft pink, and then a reddish pink,
 * and then white, and a little bit of black when necessary — but make it
 * shiny.**
 *
 * ── WHAT WAS ACTUALLY WRONG, WHICH IS NOT THE COLOURS ─────────────────────
 *
 * The palette was already hers: #FFEDF3 and #FFD9E6 for the soft pink, #C8103C
 * and #FF2D6F for the reddish, white for the ground, and her night market for
 * the black. **Every colour on the page was one she had chosen, and the page
 * was still flat**, which is the whole lesson: a 2015 website and a 2045 one
 * can be painted out of the same five tins.
 *
 * What a screen from 2015 does is put ink on paper. Flat fills, a hairline
 * border, one soft shadow under a card, and nothing on it that behaves as
 * though light exists in the room.
 *
 * So the shine here is light, rather than more colour:
 *
 *   BLOOM     slow aurora behind the big bands, so the ground is never one
 *             dead value. It moves at the speed of weather, not of a banner
 *   GLASS     surfaces that let the bloom through, with a lit top edge — the
 *             specular line every real object has and no flat card does
 *   NEON      her reddish pink poured through the display type as a gradient,
 *             with the faintest bloom around it, because that is what her own
 *             night market does to every sign in it
 *   SWEEP     a band of light that crosses anything she presses, once, on
 *             hover — the thing that makes an object feel like a surface
 *
 * ── AND EVERY BIT OF IT COMES OFF FOR REDUCED MOTION ──────────────────────
 *
 * Somebody asking for less movement is telling us movement hurts them. The
 * light stays, the drift stops, and no word of the page changes.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Her four, named for what they are rather than where they came from. */
	--shine-soft: #FFD9E6;
	--shine-softer: #FFEDF3;
	--shine-hot: #FF2D6F;
	--shine-deep: #E90255;
	--shine-night: #E90255;

	--shine-glass: rgba(255, 255, 255, .62);
	--shine-glass-edge: rgba(255, 255, 255, .92);
	--shine-glass-rule: rgba(200, 16, 60, .16);
	--shine-cast: 0 24px 60px -28px rgba(200, 16, 60, .42), 0 2px 8px rgba(200, 16, 60, .06);
	--shine-cast-lift: 0 36px 80px -30px rgba(200, 16, 60, .52), 0 3px 10px rgba(200, 16, 60, .1);
	--shine-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── BLOOM ─────────────────────────────────────────────────────────────────
 *
 * Three soft lights behind a band, drifting slowly enough that nobody watching
 * for it can quite catch it moving. It sits under everything and takes no
 * clicks.
 */
.shine-bloom { position: relative; isolation: isolate; overflow: hidden; }

.shine-bloom::before {
	content: '';
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38% 44% at 14% 18%, rgba(255, 45, 111, .22) 0%, rgba(255, 45, 111, 0) 68%),
		radial-gradient(44% 40% at 86% 12%, rgba(255, 217, 230, .85) 0%, rgba(255, 217, 230, 0) 66%),
		radial-gradient(50% 46% at 62% 92%, rgba(255, 127, 178, .30) 0%, rgba(255, 127, 178, 0) 70%);
	animation: shine-drift 34s var(--shine-ease) infinite alternate;
}

@keyframes shine-drift {
	0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
	50%  { transform: translate3d(3%, 2%, 0) scale(1.06); }
	100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}

/* ── NEON TYPE ─────────────────────────────────────────────────────────────
 *
 * Her reddish pink poured through the letters rather than painted flat behind
 * them. The colour underneath is set first and is a real colour, so a browser
 * that will not clip a background to text still shows a heading rather than
 * nothing at all — the failure of this trick is normally an invisible headline.
 */
.shine-neon {
	color: var(--shine-deep);
	background-image: linear-gradient(96deg, #E90255 0%, var(--shine-deep) 34%, var(--shine-hot) 72%, #FF7FB2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55));
}

/* On the night, the same word is an actual sign. */
.shine-lit {
	color: #FFF1F6;
	text-shadow:
		0 0 1px rgba(255, 255, 255, .9),
		0 0 14px rgba(255, 45, 111, .65),
		0 0 42px rgba(255, 45, 111, .38);
}

/* ── GLASS ────────────────────────────────────────────────────────────────
 *
 * A surface with a lit top edge and light coming through it. The inset white
 * line at the top is the whole trick: it is the highlight every physical thing
 * has along its upper edge, and a flat card is exactly a card without one.
 */
.shine-glass {
	position: relative;
	background: linear-gradient(168deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .58) 100%);
	border: 1px solid var(--shine-glass-rule);
	box-shadow:
		inset 0 1px 0 var(--shine-glass-edge),
		inset 0 -1px 0 rgba(200, 16, 60, .06),
		var(--shine-cast);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
}

/* ── SWEEP ────────────────────────────────────────────────────────────────
 *
 * One band of light crossing the face of anything she presses. It runs once,
 * on hover and on keyboard focus both, so it is never a thing only a mouse can
 * see.
 */
.shine-sweep { position: relative; overflow: hidden; isolation: isolate; }

.shine-sweep::after {
	content: '';
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -40%;
	width: 34%;
	z-index: 1;
	pointer-events: none;
	transform: translateX(-260%) rotate(18deg);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
}

.shine-sweep:hover::after,
.shine-sweep:focus-visible::after {
	transition: transform 900ms var(--shine-ease);
	transform: translateX(560%) rotate(18deg);
}

@media (prefers-reduced-motion: reduce) {
	.shine-bloom::before { animation: none; }
	.shine-sweep::after { display: none; }
}


/* ══ THE BAND THAT SAYS WHAT THIS IS ══════════════════════════════════════ */

.sec--what {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(168deg, #FFFFFF 0%, var(--shine-softer) 52%, var(--shine-soft) 100%);
}

.sec--what::before {
	content: '';
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38% 44% at 12% 14%, rgba(255, 45, 111, .18) 0%, rgba(255, 45, 111, 0) 68%),
		radial-gradient(46% 42% at 88% 8%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 64%),
		radial-gradient(52% 48% at 66% 96%, rgba(255, 127, 178, .26) 0%, rgba(255, 127, 178, 0) 70%);
	animation: shine-drift 38s var(--shine-ease) infinite alternate;
}

.sec--what .what-head {
	max-width: 20ch;
	color: var(--shine-deep);
	background-image: linear-gradient(96deg, #E90255 0%, var(--shine-deep) 30%, var(--shine-hot) 74%, #FF7FB2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
	margin-bottom: 1rem;
}

.what-lede {
	margin: 0 0 2.2rem;
	max-width: 46ch;
	color: var(--enamel);
	font: 400 clamp(1.06rem, 3.6vw, 1.28rem)/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

/* The three, as glass rather than as paper. */
.what-one {
	position: relative;
	padding: 1.5rem 1.45rem 1.6rem;
	border-radius: 26px;
	background: linear-gradient(168deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.62) 100%);
	border: 1px solid var(--shine-glass-rule);
	box-shadow:
		inset 0 1px 0 var(--shine-glass-edge),
		var(--shine-cast);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	transition: transform 320ms var(--shine-ease), box-shadow 320ms var(--shine-ease);
}

.what-one:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--shine-glass-edge), var(--shine-cast-lift); }

.what-big {
	color: var(--shine-deep);
	background-image: linear-gradient(100deg, var(--shine-deep) 0%, var(--shine-hot) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}

/*
 * The dollar is the load-bearing piece of this business — her own words — so
 * it is the one card lit rather than lined.
 */
.what-one--real {
	background: linear-gradient(158deg, #FF2D6F 0%, var(--shine-deep) 58%, #E90255 100%);
	border-color: transparent;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		0 26px 60px -26px rgba(200, 16, 60, .68);
}

.what-one--real .what-big {
	color: #FFF3F7;
	background: none;
	-webkit-text-fill-color: #FFF3F7;
	text-shadow: 0 0 22px rgba(255, 255, 255, .45);
}

.what-one--real .what-says { color: #FFE0EC; }
.what-one--real .what-says strong { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
	.sec--what::before { animation: none; }
	.what-one { transition: none; }
	.what-one:hover { transform: none; }
}


/* ══ THE THREE STEPS ══════════════════════════════════════════════════════ */

.sec--how { position: relative; isolation: isolate; overflow: hidden; }

.sec--how::before {
	content: '';
	position: absolute;
	inset: -28%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(40% 46% at 82% 14%, rgba(255, 45, 111, .13) 0%, rgba(255, 45, 111, 0) 70%),
		radial-gradient(46% 42% at 10% 90%, rgba(255, 127, 178, .20) 0%, rgba(255, 127, 178, 0) 68%);
}

.how-step {
	border-radius: 26px;
	background: linear-gradient(168deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.66) 100%);
	border: 1px solid var(--shine-glass-rule);
	box-shadow: inset 0 1px 0 var(--shine-glass-edge), var(--shine-cast);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
}

.how-no {
	background: linear-gradient(150deg, var(--shine-hot) 0%, var(--shine-deep) 100%);
	box-shadow: 0 10px 24px -10px rgba(200, 16, 60, .8), inset 0 1px 0 rgba(255,255,255,.45);
	font-variant-numeric: tabular-nums;
}


/* ══ THE BAND FOR THE EIGHTEEN TO TWENTY-FIVES ════════════════════════════ */

/*
 * ── HER RULING: ONLY A LITTLE OF THEM ON THIS PAGE ────────────────────────
 *
 * So it is the one band on the homepage set on her night, which does two
 * things at once — it says *this part is not addressed to you* to a homeowner
 * scrolling past, and it is impossible to miss for the one person it is for.
 */
.sec--young {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 8vw, 5.5rem);
	background: linear-gradient(162deg, #C80047 0%, var(--shine-night) 46%, #C80047 100%);
	border-block: 1px solid rgba(255, 45, 111, .3);
}

.sec--young::before {
	content: '';
	position: absolute;
	inset: -35%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(36% 42% at 16% 12%, rgba(255, 45, 111, .55) 0%, rgba(255, 45, 111, 0) 66%),
		radial-gradient(40% 38% at 84% 88%, rgba(255, 127, 178, .34) 0%, rgba(255, 127, 178, 0) 68%);
	animation: shine-drift 30s var(--shine-ease) infinite alternate;
}

.invite-in { max-width: 46rem; }

.invite-eyebrow {
	margin: 0 0 .7rem;
	color: #FF9EC4;
	font: 700 .82rem/1 var(--font-util, system-ui, sans-serif);
	letter-spacing: .22em;
	text-transform: uppercase;
}

.invite-head {
	margin: 0 0 1rem;
	max-width: 18ch;
	color: #FFF1F6;
	font: 700 clamp(1.9rem, 7vw, 3.2rem)/1.06 var(--font-head, var(--font-util));
	letter-spacing: -.02em;
	text-wrap: balance;
	text-shadow:
		0 0 1px rgba(255, 255, 255, .8),
		0 0 18px rgba(255, 45, 111, .55),
		0 0 52px rgba(255, 45, 111, .32);
}

.invite-says {
	margin: 0 0 1.8rem;
	max-width: 44ch;
	color: #FFD9E6;
	font: 400 clamp(1rem, 3.6vw, 1.12rem)/1.62 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.invite-go,
.invite-go.press {
	position: relative;
	display: inline-block;
	overflow: hidden;
	isolation: isolate;
	padding: 1.05rem 2.1rem;
	border-radius: 999px;
	background: linear-gradient(120deg, #FF5C8F 0%, var(--shine-hot) 42%, var(--shine-deep) 100%);
	color: #FFFFFF;
	font: 700 clamp(1rem, 4vw, 1.08rem)/1.15 var(--font-util, system-ui, sans-serif);
	text-decoration: none;
	border: 0;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 18px 44px -16px rgba(255, 45, 111, .8);
	transition: transform 300ms var(--shine-ease), box-shadow 300ms var(--shine-ease);
}

.invite-go::after {
	content: '';
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -40%;
	width: 34%;
	z-index: 1;
	pointer-events: none;
	transform: translateX(-260%) rotate(18deg);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
}

.invite-go:hover,
.invite-go:focus-visible {
	transform: translateY(-3px);
	color: #FFFFFF;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		0 26px 56px -18px rgba(255, 45, 111, .95);
}

.invite-go:hover::after,
.invite-go:focus-visible::after {
	transition: transform 900ms var(--shine-ease);
	transform: translateX(560%) rotate(18deg);
}

.invite-quiet {
	margin: 1rem 0 0;
	color: rgba(255, 217, 230, .8);
	font: 500 .93rem/1.5 var(--font-util, system-ui, sans-serif);
}

@media (prefers-reduced-motion: reduce) {
	.sec--young::before { animation: none; }
	.invite-go { transition: none; }
	.invite-go:hover, .invite-go:focus-visible { transform: none; }
	.invite-go::after { display: none; }
}


/* ══ THE LAST WORD ════════════════════════════════════════════════════════ */

.last-wide {
	margin: 1.2rem 0 1.8rem;
	max-width: 52ch;
	color: #FFD9E6;
	font: 400 clamp(1rem, 3.4vw, 1.08rem)/1.68 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}


/* ══════════════════════════════════════════════════════════════════════════
 * THE YOUNG PERSON'S OWN PAGE
 *
 * Her ruling: **a whole other page separately that you take them to, that
 * helps them see how amazing this is.**
 * ══════════════════════════════════════════════════════════════════════════ */

.lane--young { --lane-hot: var(--shine-hot); }

.young-open {
	position: relative;
	isolation: isolate;
}

.lane--young .lane-eyebrow {
	color: var(--shine-deep);
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
}

.lane--young .young-head {
	max-width: 15ch;
	color: var(--shine-deep);
	background-image: linear-gradient(96deg, #E90255 0%, var(--shine-deep) 28%, var(--shine-hot) 72%, #FF7FB2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
	text-shadow: none;
	font: 700 clamp(2.1rem, 8.6vw, 3.9rem)/1.04 var(--font-head, var(--font-util));
	letter-spacing: -.022em;
}

.young-lede {
	max-width: 44ch;
	color: var(--enamel);
	font: 400 clamp(1.06rem, 3.8vw, 1.26rem)/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.young-cost-quiet {
	margin: .9rem 0 0;
	color: var(--row-ink-soft);
	font: 500 .93rem/1.5 var(--font-util, system-ui, sans-serif);
}

/* ── THE THREE, ON HER NIGHT ─────────────────────────────────────────────── */

.young-three-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 2.6rem 0 0;
	padding: clamp(2rem, 6vw, 3.4rem) clamp(1.2rem, 5vw, 2.6rem);
	border-radius: 30px;
	background: linear-gradient(162deg, #C80047 0%, var(--shine-night) 48%, #C80047 100%);
	box-shadow: 0 40px 90px -40px rgba(23, 8, 16, .9);
}

.young-three-band::before {
	content: '';
	position: absolute;
	inset: -35%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(34% 40% at 12% 14%, rgba(255, 45, 111, .5) 0%, rgba(255, 45, 111, 0) 66%),
		radial-gradient(38% 36% at 88% 86%, rgba(255, 127, 178, .3) 0%, rgba(255, 127, 178, 0) 68%);
	animation: shine-drift 32s var(--shine-ease) infinite alternate;
}

.young-three {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.young-one {
	padding: 1.4rem 1.4rem 1.5rem;
	border-radius: 24px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 158, 196, .3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.young-big {
	display: block;
	margin-bottom: .55rem;
	color: #FFF1F6;
	font: 700 clamp(1.9rem, 6vw, 2.6rem)/1 var(--font-head, var(--font-util));
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 0 1px rgba(255, 255, 255, .8),
		0 0 16px rgba(255, 45, 111, .6),
		0 0 44px rgba(255, 45, 111, .34);
}

.young-says {
	display: block;
	color: #FFD9E6;
	font-size: 1rem;
	line-height: 1.58;
	text-wrap: pretty;
}

.young-one .young-says { margin: 0; max-width: none; }
.young-says strong { color: #FFFFFF; }

/* ── THE WEEK ────────────────────────────────────────────────────────────── */

.young-week {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 2.6rem 0 0;
	padding-block: clamp(2.4rem, 7vw, 4.2rem);
	background: linear-gradient(168deg, #FFFFFF 0%, var(--shine-softer) 55%, var(--shine-soft) 100%);
	border-radius: 30px;
}

.young-week::before {
	content: '';
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(36% 42% at 86% 12%, rgba(255, 45, 111, .18) 0%, rgba(255, 45, 111, 0) 68%),
		radial-gradient(44% 40% at 8% 92%, rgba(255, 127, 178, .24) 0%, rgba(255, 127, 178, 0) 68%);
	animation: shine-drift 36s var(--shine-ease) infinite alternate;
}

.young-week .in { padding-inline: clamp(1.2rem, 5vw, 2.6rem); }

.young-week-eyebrow {
	margin: 0 0 .5rem;
	color: var(--shine-deep);
	font: 700 .82rem/1 var(--font-util, system-ui, sans-serif);
	letter-spacing: .22em;
	text-transform: uppercase;
}

.young-week-head {
	margin: 0 0 1.6rem;
	max-width: 18ch;
	color: var(--enamel);
	font: 700 clamp(1.6rem, 6vw, 2.5rem)/1.08 var(--font-head, var(--font-util));
	letter-spacing: -.018em;
	text-wrap: balance;
}

.week-days {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: grid;
	gap: .75rem;
	counter-reset: none;
}

.week-day {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: 'when pay' 'what pay';
	align-items: center;
	gap: .15rem 1rem;
	padding: 1.05rem 1.2rem 1.1rem;
	border-radius: 22px;
	background: linear-gradient(168deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.66) 100%);
	border: 1px solid var(--shine-glass-rule);
	box-shadow: inset 0 1px 0 var(--shine-glass-edge), var(--shine-cast);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	transition: transform 320ms var(--shine-ease), box-shadow 320ms var(--shine-ease);
}

.week-day:hover {
	transform: translateY(-3px);
	box-shadow: inset 0 1px 0 var(--shine-glass-edge), var(--shine-cast-lift);
}

.week-when {
	grid-area: when;
	color: var(--shine-deep);
	font: 700 .82rem/1.3 var(--font-util, system-ui, sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.week-what {
	grid-area: what;
	color: var(--enamel);
	font: 500 clamp(.98rem, 3.6vw, 1.08rem)/1.4 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.week-pay {
	grid-area: pay;
	align-self: center;
	color: var(--shine-deep);
	background-image: linear-gradient(120deg, var(--shine-deep) 0%, var(--shine-hot) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font: 700 clamp(1.5rem, 5.4vw, 2.05rem)/1 var(--font-head, var(--font-util));
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.week-pay i {
	font-style: normal;
	font-size: .48em;
	font-weight: 600;
	letter-spacing: 0;
}

.young-week-true {
	margin: 0;
	max-width: 48ch;
	color: var(--row-ink-soft);
	font: 400 .97rem/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.young-week-true strong { color: var(--enamel); }

/* ── THE RECORD, AND THE WIDER THING ─────────────────────────────────────── */

.young-record { position: relative; }

.young-wider {
	margin: 2.4rem 0 0;
	padding: clamp(1.8rem, 6vw, 3rem) clamp(1.3rem, 5vw, 2.6rem);
	border-radius: 30px;
	background: linear-gradient(158deg, #FF5C8F 0%, var(--shine-deep) 60%, #E90255 100%);
	box-shadow: 0 34px 76px -34px rgba(200, 16, 60, .75), inset 0 1px 0 rgba(255,255,255,.4);
}

.young-wider-says {
	margin: 0 0 1rem;
	max-width: 50ch;
	color: #FFF1F6;
	font: 400 clamp(1.04rem, 3.8vw, 1.22rem)/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.young-wider-says:last-child { margin-bottom: 0; }

.young-last-hers {
	margin: 1.1rem 0 0;
	color: #FFF1F6;
	font: 600 clamp(1.04rem, 4vw, 1.2rem)/1.4 var(--font-head, var(--font-util));
	text-shadow: 0 0 22px rgba(255, 45, 111, .5);
}

@media (min-width: 52rem) {
	.young-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.week-day {
		grid-template-columns: 11rem 1fr auto;
		grid-template-areas: 'when what pay';
		gap: 1.4rem;
		padding-block: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.young-three-band::before,
	.young-week::before { animation: none; }
	.week-day { transition: none; }
	.week-day:hover { transform: none; }
}


/* ══ AND THE DOOR ON HER ENTRANCE ═════════════════════════════════════════
 *
 * It was a near-black pill, which was right when the whole entrance was a
 * night. On her rose ground it is the one flat object left on the screen, and
 * **it is the thing she most wants pressed**, so it gets the same light as
 * everything else: a lit top edge, her reddish pink poured across it, and one
 * band of light crossing the face on hover.
 */
.way-go--first {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(120deg, #FFFFFF 0%, #FFEDF3 46%, #FFD9E6 100%);
	color: #E90255;
	border: 0;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .95),
		0 20px 46px -18px rgba(23, 8, 16, .6);
	transition: transform 300ms var(--shine-ease), box-shadow 300ms var(--shine-ease);
}

.way-go--first::after {
	content: '';
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -40%;
	width: 34%;
	z-index: 1;
	pointer-events: none;
	transform: translateX(-260%) rotate(18deg);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
}

.way-go--first:hover,
.way-go--first:focus-visible {
	color: #E90255;
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 30px 60px -20px rgba(23, 8, 16, .7);
}

.way-go--first:hover::after,
.way-go--first:focus-visible::after {
	transition: transform 900ms var(--shine-ease);
	transform: translateX(560%) rotate(18deg);
}

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


/* ══════════════════════════════════════════════════════════════════════════
 * HER RULING, 7 SEPTEMBER 2026 — THE TOP OF THE PAGE
 *
 * **I do not know if I want black at the top there. You have got the wrong
 * colours pulling through here. You actually had something to work off. And
 * whatever writing you have up the top, make sure it is positioned so it is
 * not running into the burger menu — it is looking too wide.**
 *
 * THREE FAULTS, AND SHE NAMED ALL THREE.
 *
 * THE BLACK. The bar was #C80047, which is very nearly black, sitting above a
 * photograph that is already the night. **Two blacks stacked, and the first one
 * belongs to nothing** — the market is a place, the bar is furniture. Her brief
 * was soft pink, a reddish pink, white, and a little black when necessary, and
 * the necessary black is her photograph.
 *
 * THE COLOURS SHE ALREADY HAD. Her hero is a neon night market: hot pink signs,
 * her red bubble, white light. **The page under it was painting in a flat rose
 * slab that appears nowhere in the picture.** So the ground comes off her own
 * image now — white with the blush in it, and the neon carried down as type and
 * light rather than as a wash.
 *
 * THE LINE RUNNING INTO THE BURGER. On a narrow screen the arrival line took
 * the whole width on its own row and the burger sat over it. It has its own
 * room now, and a measure, so it never reaches the corner the burger is in.
 * ══════════════════════════════════════════════════════════════════════════ */

.bar {
	background: linear-gradient(178deg, #FFFFFF 0%, var(--shine-softer) 100%);
	border-bottom: 1px solid rgba(200, 16, 60, .14);
	padding-right: clamp(14px, 4vw, 30px);
}

/* Her writing on it, in her ink rather than in white on white. */
.bar .arrival {
	color: var(--enamel);
	max-width: 34ch;
	padding-right: clamp(8px, 3vw, 16px);
	font: 400 clamp(14.5px, 3.7vw, 15.5px)/1.45 var(--font-say, system-ui, sans-serif);
	text-wrap: pretty;
}

.bar .arrival .arrival-ask { color: var(--shine-deep); font-weight: 700; }

.bar a,
.bar .bar-road a,
.bar-roads a { color: var(--shine-deep); }

/*
 * The burger is the one red object up here, so it reads as the thing to press
 * rather than as a box drawn round some lines.
 */
.bar-burger,
.bar .bar-burger,
.bar-burger.press {
	background: linear-gradient(150deg, var(--shine-hot) 0%, var(--shine-deep) 100%);
	border: 0;
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		0 10px 24px -12px rgba(200, 16, 60, .8);
}

.bar-burger span { background: #FFFFFF; }

/*
 * ── AND THE ARRIVAL LINE KEEPS OUT OF THE CORNER ──────────────────────────
 *
 * On the front page there is no mark on the bar — her mark is in the
 * photograph — so the burger sits alone on the top row and the line has the
 * row under it to itself, with a measure so it stops well short of the edge.
 */
.bar--home {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'weather burger';
	align-items: start;
	row-gap: 10px;
}

@media (max-width: 40rem) {
	.bar--home {
		grid-template-areas:
			'. burger'
			'weather weather';
	}

	.bar--home .arrival { max-width: 30ch; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * AND THE SECTION UNDER HER PHOTOGRAPH, WHICH SHE CALLED UTTER SHIT
 *
 * **You have got one bit that is great — Imagine coming home on Thursday and
 * the list is finished. Build the whole page off that, to the community or the
 * business owner.**
 *
 * It was a flat rose slab with a claim on it. It is her own line now, on the
 * white the rest of her brief asks for, with the neon doing what neon does —
 * carrying the eye rather than covering the page.
 * ══════════════════════════════════════════════════════════════════════════ */

.way { background: #FFFFFF; }

.way-in {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.2rem, 7vw, 3.4rem) clamp(1.25rem, 5vw, 2.4rem) clamp(2.6rem, 8vw, 3.8rem);
	background: linear-gradient(172deg, #FFFFFF 0%, var(--shine-softer) 58%, var(--shine-soft) 100%);
	color: var(--enamel);
}

.way-in::before {
	content: '';
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(34% 40% at 10% 6%, rgba(255, 45, 111, .20) 0%, rgba(255, 45, 111, 0) 66%),
		radial-gradient(40% 36% at 92% 4%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(48% 44% at 70% 98%, rgba(255, 127, 178, .26) 0%, rgba(255, 127, 178, 0) 70%);
	animation: shine-drift 36s var(--shine-ease) infinite alternate;
}

/*
 * Her own heading, small and lit, because the moment under it is the thing a
 * person is meant to read first now. It names the business; it is no longer
 * asked to carry the argument on its own.
 */
.way-head {
	margin: 0 0 .9rem;
	color: var(--shine-deep);
	font: 700 clamp(1.05rem, 4vw, 1.25rem)/1.25 var(--font-util, system-ui, sans-serif);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-shadow: none;
}

/* THE MOMENT. The biggest thing on the page, in her neon. */
.way-imagine {
	margin: 0 0 1.1rem;
	max-width: 16ch;
	color: var(--shine-deep);
	background-image: linear-gradient(96deg, #E90255 0%, var(--shine-deep) 28%, var(--shine-hot) 72%, #FF7FB2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
	font: 700 clamp(2.1rem, 9vw, 3.9rem)/1.03 var(--font-head, var(--font-util));
	letter-spacing: -.024em;
	text-wrap: balance;
}

.way-under {
	margin: 0 0 1.2rem;
	max-width: 42ch;
	color: var(--enamel);
	font: 400 clamp(1.06rem, 3.8vw, 1.24rem)/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.way-who-they-are {
	margin: 0 0 1.8rem;
	max-width: 40ch;
	color: var(--row-ink-soft);
	font: 500 clamp(.98rem, 3.5vw, 1.05rem)/1.55 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

/* Her cards, on white, lifted rather than floated on a wash. */
.cards-under {
	color: var(--row-ink-soft);
	font: 500 .93rem/1.5 var(--font-util, system-ui, sans-serif);
}

.card--pink  { background: linear-gradient(168deg, #FFE6EF 0%, var(--shine-soft) 100%); color: #E90255; }
.card--cream { background: linear-gradient(168deg, #FFFFFF 0%, var(--shine-softer) 100%); color: #E90255; }
.card--red   { background: linear-gradient(158deg, var(--shine-hot) 0%, var(--shine-deep) 100%); color: #FFF1F6; }
.card--dark  { background: linear-gradient(158deg, #C80047 0%, var(--shine-night) 100%); color: #FFD9E6; border: 0; }

.card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		0 18px 42px -20px rgba(200, 16, 60, .5);
}

.card--red .card-pay,
.card--dark .card-pay { color: #FFFFFF; }

.way-go--quiet { color: var(--shine-deep); }

.way-future {
	color: var(--enamel);
	font-weight: 600;
}

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

/* The doors sit on white now, so the pressed one is her red rather than pearl. */
.way-go--first {
	background: linear-gradient(120deg, #FF5C8F 0%, var(--shine-hot) 42%, var(--shine-deep) 100%);
	color: #FFFFFF;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 20px 46px -18px rgba(255, 45, 111, .8);
}

.way-go--first:hover,
.way-go--first:focus-visible {
	color: #FFFFFF;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		0 30px 60px -20px rgba(255, 45, 111, .95);
}

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


/* ══════════════════════════════════════════════════════════════════════════
 * MAKE IT BEAUTIFUL. PINKS AND REDS.
 *
 * Hers, 7 September 2026, and the correction is the useful half: **not good
 * enough. Make it beautiful, use pinks and reds.**
 *
 * She had already given the brief — soft pink, a reddish pink, white, a little
 * black when necessary — and I read *white* as the ground and the pinks as
 * decoration on it. **Backwards.** White is the relief in her brief, not the
 * material. The pinks and the reds are what the page is MADE of.
 *
 * ── AND BEAUTIFUL IS NOT MORE PINK. IT IS LIGHT. ──────────────────────────
 *
 * Her own photograph is the reference and it is doing one thing: **a dark room
 * with hot light in it.** Every sign in that market glows, the lanterns bloom,
 * the pavement carries the colour back up. Nothing in it is flat and nothing in
 * it is one value.
 *
 * So the page steps out of the market into the light coming off it. The ground
 * is pink that DEEPENS as it falls, so it reads as lit from above rather than
 * painted. Red blooms sit behind the words the way the lanterns sit behind the
 * stalls. White stops being the ground and becomes what it is in the
 * photograph — the brightest thing, spent on the few surfaces that earn it.
 *
 * The bands alternate light and deep so the page breathes rather than running
 * as one long wash, and the single black is her night market band, kept for the
 * one place it means something.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	--rose-lit: #FFF4F8;   /* the highest light, barely pink */
	--rose: #FFE2EC;       /* soft pink, the resting surface */
	--rose-deep: #FFC0D6;  /* soft pink with weight in it */
	--rose-hot: #FF5C8F;   /* where the pink turns */
	--red: #E90255;        /* her reddish pink */
	--red-deep: #E90255;   /* the ink that reads at any size */
	--plum: #C80047;       /* writing on pink */
	--glow-red: rgba(228, 18, 63, .34);
	--glow-pink: rgba(255, 92, 143, .40);
}

/* ── THE BAR IS PINK, NOT WHITE, AND CERTAINLY NOT BLACK ─────────────────── */
.bar {
	background: linear-gradient(180deg, var(--rose-lit) 0%, var(--rose) 100%);
	border-bottom: 1px solid rgba(228, 18, 63, .18);
}

.bar .arrival { color: var(--plum); }
.bar .arrival .arrival-ask { color: var(--red); }

.bar-burger,
.bar .bar-burger,
.bar-burger.press {
	background: linear-gradient(148deg, var(--rose-hot) 0%, var(--red) 55%, var(--red-deep) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 12px 28px -10px var(--glow-red);
}

/* ══ THE ENTRANCE — PINK THAT DEEPENS, WITH RED LIGHT IN IT ═══════════════ */

.way { background: var(--rose-lit); }

.way-in {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.4rem, 8vw, 4rem) clamp(1.25rem, 5vw, 2.6rem) clamp(2.8rem, 9vw, 4.2rem);
	background:
		linear-gradient(176deg,
			var(--rose-lit) 0%,
			var(--rose) 26%,
			var(--rose-deep) 68%,
			#FFA8C6 100%);
	color: var(--plum);
}

/*
 * The lanterns. Three of them, unequal, drifting at the speed of weather — the
 * same light her photograph has, carried below the frame so the picture does
 * not simply stop at its own edge.
 */
.way-in::before {
	content: '';
	position: absolute;
	inset: -35%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(30% 34% at 12% 4%, var(--glow-red) 0%, rgba(228,18,63,0) 68%),
		radial-gradient(38% 34% at 90% 10%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 64%),
		radial-gradient(44% 40% at 74% 96%, var(--glow-pink) 0%, rgba(255,92,143,0) 70%),
		radial-gradient(26% 30% at 30% 62%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
	animation: shine-drift 40s var(--shine-ease) infinite alternate;
}

/* Her heading, small and red, naming the business over the moment. */
.way-head {
	margin: 0 0 .2rem;
	color: var(--red-deep);
	font: 700 clamp(.95rem, 3.6vw, 1.1rem)/1.3 var(--font-util, system-ui, sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-shadow: none;
}

/* A thread of neon under it, the way every sign in her market is underlined. */
.way-head::after {
	content: '';
	display: block;
	width: 3.2rem;
	height: 3px;
	margin: .7rem 0 1.1rem;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--red) 0%, var(--rose-hot) 100%);
	box-shadow: 0 0 12px var(--glow-red);
}

/* THE MOMENT — the biggest thing on her site, in deep red, lit from the left. */
.way-imagine {
	margin: 0 0 1.2rem;
	max-width: 15ch;
	color: var(--red-deep);
	background-image: linear-gradient(102deg, #E90255 0%, var(--red-deep) 22%, var(--red) 58%, var(--rose-hot) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 1px rgba(255, 255, 255, .7));
	font: 700 clamp(2.2rem, 9.4vw, 4.1rem)/1.02 var(--font-head, var(--font-util));
	letter-spacing: -.026em;
	text-wrap: balance;
}

.way-under {
	margin: 0 0 1.1rem;
	max-width: 40ch;
	color: var(--plum);
	font: 400 clamp(1.06rem, 3.9vw, 1.26rem)/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

.way-who-they-are {
	margin: 0 0 1.9rem;
	max-width: 38ch;
	color: rgba(61, 10, 27, .74);
	font: 500 clamp(.97rem, 3.5vw, 1.04rem)/1.55 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
}

/*
 * ── HER CARDS ARE THE STALLS ──────────────────────────────────────────────
 *
 * White is spent here, on the two that carry a rate in black type, and the
 * other two are her red and her night. Four surfaces, one row of light along
 * the top of each, and a pink shadow rather than a grey one — a shadow the
 * colour of the ground is what stops a card looking stuck on.
 */
.card {
	border: 0;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .85),
		0 20px 44px -22px rgba(164, 13, 49, .55);
	transition: transform 320ms var(--shine-ease), box-shadow 320ms var(--shine-ease);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 30px 60px -24px rgba(164, 13, 49, .7);
}

.card--pink  { background: linear-gradient(166deg, #FFFFFF 0%, var(--rose) 100%); color: var(--red-deep); }
.card--cream { background: linear-gradient(166deg, #FFFFFF 0%, var(--rose-lit) 100%); color: var(--red-deep); }
.card--red   { background: linear-gradient(154deg, var(--rose-hot) 0%, var(--red) 52%, var(--red-deep) 100%); color: #FFF1F6; }
.card--dark  { background: linear-gradient(154deg, #C80047 0%, #C80047 100%); color: var(--rose-deep); }

.card--red .card-pay,
.card--dark .card-pay { color: #FFFFFF; text-shadow: 0 0 20px rgba(255,255,255,.35); }
.card--red .card-meta,
.card--dark .card-meta { color: inherit; }

.cards-under {
	color: rgba(61, 10, 27, .74);
	font: 500 .94rem/1.5 var(--font-util, system-ui, sans-serif);
}

/* The door is her red, and it glows the way her signs do. */
.way-go--first {
	background: linear-gradient(122deg, var(--rose-hot) 0%, var(--red) 46%, var(--red-deep) 100%);
	color: #FFFFFF;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		0 22px 50px -16px rgba(228, 18, 63, .85);
}

.way-go--first:hover,
.way-go--first:focus-visible {
	color: #FFFFFF;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		0 32px 66px -18px rgba(228, 18, 63, 1);
}

.way-go--quiet { color: var(--red-deep); font-weight: 600; }

/* ══ AND HERE IS HOW IT WORKS — WHITE RELIEF, RED WORK ════════════════════ */

.sec--what {
	background: linear-gradient(172deg, #FFFFFF 0%, var(--rose-lit) 62%, var(--rose) 100%);
	border-bottom: 1px solid rgba(228, 18, 63, .16);
}

.sec--what::before {
	background:
		radial-gradient(32% 38% at 8% 10%, var(--glow-red) 0%, rgba(228,18,63,0) 70%),
		radial-gradient(40% 36% at 92% 6%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(46% 42% at 68% 98%, var(--glow-pink) 0%, rgba(255,92,143,0) 72%);
}

.what-eyebrow { color: var(--red); }

.what-one {
	background: linear-gradient(166deg, #FFFFFF 0%, var(--rose-lit) 100%);
	border: 1px solid rgba(228, 18, 63, .16);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .95),
		0 22px 50px -26px rgba(164, 13, 49, .5);
}

.what-big {
	background-image: linear-gradient(104deg, var(--red-deep) 0%, var(--red) 55%, var(--rose-hot) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--red-deep);
}

.what-says { color: rgba(61, 10, 27, .78); }
.what-says strong { color: var(--plum); }

.what-one--real {
	background: linear-gradient(152deg, var(--rose-hot) 0%, var(--red) 54%, var(--red-deep) 100%);
	border-color: transparent;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 28px 62px -24px rgba(228, 18, 63, .85);
}

.what-one--real .what-big { -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; background: none; }
.what-one--real .what-says { color: #FFE2EC; }
.what-one--real .what-says strong { color: #FFFFFF; }

/* The two lanes, pink and red, side by side rather than two of the same. */
.what-lane {
	background: linear-gradient(166deg, #FFFFFF 0%, var(--rose) 100%);
	border: 1px solid rgba(228, 18, 63, .16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 54px -28px rgba(164, 13, 49, .5);
}

.what-lane--shop {
	background: linear-gradient(158deg, #E90255 0%, #C80047 100%);
	border-color: transparent;
	box-shadow: 0 30px 66px -30px rgba(23, 8, 16, .9);
}

.what-lane--shop .what-lane-who { color: var(--rose-hot); }
.what-lane--shop .what-lane-head { color: #FFF1F6; }
.what-lane--shop .what-lane-says,
.what-lane--shop .what-lane-facts li { color: var(--rose-deep); }
.what-lane--shop .what-lane-facts strong { color: #FFFFFF; }
.what-lane--shop .what-lane-facts li { border-bottom-color: rgba(255, 192, 214, .22); }

.what-lane-who { color: var(--red); }
.what-lane-head { color: var(--plum); }

.what-lane-go {
	background: linear-gradient(122deg, var(--rose-hot) 0%, var(--red) 50%, var(--red-deep) 100%);
	color: #FFFFFF;
	border: 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 36px -14px rgba(228,18,63,.8);
}

.what-lane--shop .what-lane-go {
	background: linear-gradient(122deg, #FFFFFF 0%, var(--rose) 100%);
	color: var(--red-deep);
}

/* ══ THE THREE STEPS — DEEP PINK, SO THE PAGE BREATHES ════════════════════ */

.sec--how {
	background: linear-gradient(176deg, var(--rose) 0%, var(--rose-deep) 100%);
	border-block: 1px solid rgba(228, 18, 63, .2);
}

.sec--how::before {
	background:
		radial-gradient(34% 40% at 86% 10%, var(--glow-red) 0%, rgba(228,18,63,0) 70%),
		radial-gradient(40% 38% at 8% 92%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 68%);
}

.sec--how .eyebrow { color: var(--red-deep); }
.how-head { color: var(--plum); }

.how-step {
	background: linear-gradient(166deg, #FFFFFF 0%, var(--rose-lit) 100%);
	border: 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 22px 50px -26px rgba(164, 13, 49, .55);
}

.how-no {
	background: linear-gradient(148deg, var(--rose-hot) 0%, var(--red) 55%, var(--red-deep) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 26px -10px rgba(228,18,63,.9);
}

.how-step-head { color: var(--plum); }
.how-step-says { color: rgba(61, 10, 27, .78); }
.how-cost { color: rgba(61, 10, 27, .78); }

/* ══ AND THE ONE BLACK, WHICH IS HER NIGHT MARKET ═════════════════════════ */

.sec--young {
	background: linear-gradient(160deg, #E90255 0%, #C80047 46%, #C80047 100%);
	border-block: 1px solid rgba(255, 92, 143, .36);
}

.invite-head {
	color: #FFFFFF;
	text-shadow:
		0 0 1px rgba(255, 255, 255, .9),
		0 0 20px var(--glow-pink),
		0 0 58px rgba(255, 92, 143, .35);
}

.invite-eyebrow { color: var(--rose-hot); }
.invite-says { color: var(--rose-deep); }
.invite-quiet { color: rgba(255, 192, 214, .8); }

@media (prefers-reduced-motion: reduce) {
	.way-in::before { animation: none; }
	.card { transition: none; }
	.card:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * PINK AT THE TOP, AND THE BLACK PUT WHERE IT MEANS SOMETHING
 *
 * Hers, 7 September 2026: **with intentional black parts. The top is boring —
 * have a pink at the top.**
 *
 * Two corrections in one sentence and they pull against each other, which is
 * the point. She did not ask for black to go; she asked for it to be PLACED.
 * A near-black bar sitting above a near-black photograph was black by accident.
 * A black object on a hot pink bar is black on purpose.
 *
 * So the top is her pink — properly hot, not the pale wash I gave it, which was
 * timid rather than light. Her writing rides on it in white. And the burger,
 * the one thing up there anybody presses, is her night: black, deliberate,
 * unmissable against the pink, with her neon in the three bars of it.
 *
 * The other intentional blacks are already placed and stay: her night market
 * photograph, the band for the eighteen to twenty-fives, the business lane, and
 * one card in four. Four blacks on the page, each of them chosen.
 * ══════════════════════════════════════════════════════════════════════════ */

.bar {
	background: linear-gradient(104deg, #FF8FBE 0%, var(--rose-hot) 38%, #FF2D6F 72%, var(--red) 100%);
	border-bottom: 0;
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, .35),
		0 10px 30px -18px rgba(228, 18, 63, .8);
}

.bar .arrival {
	color: #FFFFFF;
	text-shadow: 0 1px 12px rgba(120, 9, 31, .5);
}

.bar .arrival .arrival-ask {
	color: #FFFFFF;
	font-weight: 700;
	text-shadow: 0 0 16px rgba(255, 255, 255, .55);
}

.bar a,
.bar .bar-road a,
.bar-roads a { color: #FFFFFF; }

/* The intentional black, and it is the thing she presses. */
.bar-burger,
.bar .bar-burger,
.bar-burger.press {
	background: linear-gradient(150deg, #C80047 0%, #C80047 100%);
	border: 0;
	border-radius: 15px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 12px 30px -10px rgba(21, 6, 9, .85);
}

.bar-burger span {
	background: var(--rose-hot);
	box-shadow: 0 0 10px rgba(255, 92, 143, .9);
}

/* And the menu behind it belongs to the same black rather than to the pink. */
.bar-menu {
	background: linear-gradient(160deg, #C80047 0%, #C80047 100%);
	border: 0;
}

.bar-menu a { color: #FFE2EC; }
.bar-menu .bar-road a { color: #FFFFFF; font-weight: 700; }


/*
 * ── AND THE WRITING ON THE PINK HAD TO EARN ITS CONTRAST ──────────────────
 *
 * The bar opened at #FF8FBE, which is a lovely pink and too light to carry
 * white type at fifteen pixels. I had propped it up with a dark glow behind the
 * letters, and a dark glow behind thin white type does not rescue it — it makes
 * it read grey.
 *
 * The ground carries the contrast instead: the gradient starts at her hot pink
 * rather than at a pale one, and the shadow shrinks to a hairline whose only
 * job is to keep the letters off the lighter end.
 */
.bar {
	background: linear-gradient(104deg, #FF3D77 0%, #FF2166 46%, var(--red) 100%);
}

.bar .arrival {
	color: #FFFFFF;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(120, 9, 31, .38);
}

.bar .arrival .arrival-ask {
	color: #FFFFFF;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(120, 9, 31, .38);
}


/*
 * ── AND THE HALF OF THE LINE I NEVER STYLED ───────────────────────────────
 *
 * Two attempts at making the arrival line white and it stayed grey for the
 * first two lines. **I was styling the wrong selector, twice.**
 *
 * `arrival.js` writes the line as two spans — `.arrival-when` for the time and
 * the weather, `.arrival-ask` for the suggestion. I had set `.bar .arrival` and
 * `.bar .arrival .arrival-ask` and never once touched `.arrival-when`, which
 * carries a deep pink of its own from line 1048 and beats anything inherited.
 *
 * Her law, and this world has now paid for it a sixth time: **the rule that
 * governs is the last one that wins, never the last one edited** — and I kept
 * re-editing a rule that was never in the fight.
 *
 * THE ITALIC GOES WITH IT. `.arrival-ask` was set in italics. The header's own
 * comment says she cannot read them and that is why the line was given a plate
 * instead — and then the second half of it was italicised anyway. The emphasis
 * is carried in weight, which she can actually read.
 */
.bar .arrival .arrival-when {
	color: #FFFFFF;
	font-weight: 500;
}

.bar .arrival .arrival-ask {
	color: #FFFFFF;
	font-weight: 700;
	font-style: normal;
}


/* ══ AND EACH DOOR SAYS WHO IT IS FOR ═════════════════════════════════════
 *
 * Both sign-up forms on the search page were drawn with no heading over
 * either, so a person met two near-identical forms and had to work out from
 * the field names which one was theirs. The first one asked for a family name,
 * a house number and a street — the young person's — on a page a neighbour
 * reaches by searching for somebody to mow a lawn.
 */
.door-who {
	margin: 1.6rem 0 .6rem;
	color: var(--red);
	font: 700 .82rem/1.3 var(--font-util, system-ui, sans-serif);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.doors .door-who:first-of-type { margin-top: 0; }

/*
 * ── AND THE EMPTY SEARCH IS A MOMENT, NOT A BLANK ────────────────────────
 *
 * The heading is longer than the one it replaces — a suburb and a full stop
 * against a whole sentence — so it is given room to breathe rather than
 * inheriting a size built for one word.
 */
.sec--door .head { text-wrap: balance; max-width: 18ch; }


/* ══════════════════════════════════════════════════════════════════════════
 * HER OWN DESIGN, 8 SEPTEMBER 2026 — THE COLOUR AT THE TOP
 *
 * She sent a full homepage of her own and then two corrections in her own
 * words: **we keep our hero**, and **have that colour at the top**.
 *
 * So her night market photograph stays exactly where it is, and the deep
 * magenta she drew — the ground her speech bubbles float on — becomes the top
 * of this world. The bar, the ground the photograph sits inside, and the block
 * beneath it are all one colour now rather than a black strip, a photograph and
 * a pale wash stacked on each other.
 *
 * The dots are hers too. Her hero ground carries a fine grid of them, which is
 * what stops a large flat field of one colour reading as a slab — it is the
 * same reason her plates carry a sheen.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	--her-magenta: #E90255;
	--her-magenta-lit: #E8125C;
	--her-magenta-deep: #E90255;
	--her-dots: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
}

/* ── THE BAR IS THE TOP OF HER PICTURE, NOT A STRIP ABOVE IT ─────────────── */
.bar {
	background:
		var(--her-dots) 0 0 / 14px 14px,
		linear-gradient(104deg, var(--her-magenta-lit) 0%, var(--her-magenta) 52%, var(--her-magenta-deep) 100%);
	border-bottom: 0;
	box-shadow: none;
}

.bar .arrival,
.bar .arrival .arrival-when,
.bar .arrival .arrival-ask {
	color: #FFFFFF;
	text-shadow: 0 1px 2px rgba(90, 0, 28, .45);
}

.bar-burger,
.bar .bar-burger,
.bar-burger.press {
	background: #C80047;
	border: 0;
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 12px 28px -10px rgba(60, 0, 20, .8);
}

.bar-burger span { background: #FFFFFF; box-shadow: none; }

/* ── AND HER PHOTOGRAPH SITS INSIDE THAT COLOUR ─────────────────────────── */
.way {
	background:
		var(--her-dots) 0 0 / 14px 14px,
		radial-gradient(70% 60% at 78% 6%, var(--her-magenta-lit) 0%, rgba(232,18,92,0) 62%),
		linear-gradient(168deg, var(--her-magenta) 0%, var(--her-magenta-deep) 100%);
}

.way-hero { padding: 0; }

.way-in {
	background:
		var(--her-dots) 0 0 / 14px 14px,
		radial-gradient(64% 54% at 82% 0%, var(--her-magenta-lit) 0%, rgba(232,18,92,0) 60%),
		linear-gradient(172deg, var(--her-magenta) 0%, var(--her-magenta-deep) 100%);
	color: #FFFFFF;
}

.way-in::before { content: none; }

/* Her display type, white on the magenta, the way she drew it. */
.way-head {
	color: rgba(255, 255, 255, .82);
	font: 700 clamp(.95rem, 3.6vw, 1.05rem)/1.3 var(--font-util, system-ui, sans-serif);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-shadow: none;
	margin-bottom: .2rem;
}

.way-head::after {
	background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.35) 100%);
	box-shadow: none;
	width: 2.6rem;
	height: 2px;
}

.way-imagine {
	color: #FFFFFF;
	background: none;
	-webkit-text-fill-color: #FFFFFF;
	filter: none;
	font: 400 clamp(2.3rem, 10vw, 4.4rem)/.98 var(--font-head, Georgia, serif);
	font-style: normal;
	letter-spacing: -.02em;
	text-shadow: 0 6px 40px rgba(70, 0, 26, .45);
	max-width: 13ch;
}

.way-under {
	color: rgba(255, 255, 255, .95);
	font-weight: 400;
}

.way-who-they-are { color: rgba(255, 255, 255, .78); }

.cards-under { color: rgba(255, 255, 255, .8); }

.way-future { color: #FFFFFF; }
.way-who { color: rgba(255, 255, 255, .78); }

/* Her two pills: one black, one outlined. */
.way-go--first {
	background: #C80047;
	color: #FFFFFF;
	box-shadow: 0 18px 40px -16px rgba(40, 0, 14, .9);
}

.way-go--first:hover,
.way-go--first:focus-visible {
	color: #FFFFFF;
	box-shadow: 0 26px 54px -18px rgba(40, 0, 14, 1);
}

.way-go--quiet {
	padding: 1.05rem 1.9rem;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, .85);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
}

.way-go--quiet:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }

/* Her cards read as the little enamel signs she drew. */
.card--pink  { background: linear-gradient(168deg, #FF2E72 0%, #E8125C 100%); color: #FFFFFF; }
.card--cream { background: linear-gradient(168deg, #FFFFFF 0%, #FFF0F5 100%); color: #E90255; }
.card--red   { background: linear-gradient(168deg, #E90255 0%, #E90255 100%); color: #FFE2EC; }
.card--dark  { background: linear-gradient(168deg, #C80047 0%, #C80047 100%); color: #FFD9E6; }

.card {
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		0 16px 34px -18px rgba(40, 0, 14, .9);
}

.card--pink .card-pay,
.card--red .card-pay,
.card--dark .card-pay { color: #FFFFFF; }


/* ── HER THIN STRIP FOR THE EIGHTEEN TO TWENTY-FIVES ─────────────────────
 *
 * Her words: **I love the examples, the thin strip for the eighteen to
 * twenty-five year olds.** She drew it as one hot pink line across the whole
 * page — her sentence, the price, and one black pill — and that is all it is.
 *
 * A whole section on her night was me giving them a room. She wants a line.
 */
/*
 * ── BIGGER, 9 OCTOBER 2026 ────────────────────────────────────────────────
 *
 * Hers: *the red pip that we've got, make yourself easy to find — make that a
 * little bit bigger.* A little bit: the band deepens by about half and every
 * line in it steps up with it, so it grows as one thing rather than becoming
 * a tall strip with the same small words floating in it.
 */
.strip {
	background:
		var(--her-dots) 0 0 / 14px 14px,
		linear-gradient(96deg, #FF2E72 0%, #F0135F 48%, #E90255 100%);
	padding-block: clamp(2.6rem, 8.4vw, 4rem);
	border-block: 0;
}

/*
 * ── WHAT THE TWELVE DOLLARS ACTUALLY BUYS — HERS, 10 OCTOBER 2026 ─────────
 *
 * "A little bit thicker, a bit more information on it." The band deepened
 * again and this line went on it, so the strip says what somebody gets
 * rather than only what it costs. It takes the whole width under the price
 * so the three loud things — her sentence, the number, the press — keep
 * their own line.
 */
.strip-what {
	flex: 1 0 100%;
	margin: 0;
	color: rgba(255, 255, 255, .96);
	font: 400 clamp(1.02rem, 4.2vw, 1.28rem)/1.45 var(--font-say, system-ui, sans-serif);
	text-wrap: balance;
}

.strip-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .7rem clamp(1rem, 3vw, 2.2rem);
	text-align: center;
}

.strip-say {
	margin: 0;
	color: #FFFFFF;
	font: 400 clamp(1.6rem, 7vw, 2.7rem)/1.08 var(--font-head, Georgia, serif);
	font-style: normal;
	letter-spacing: -.015em;
}

.strip-cost {
	margin: 0;
	color: #FFFFFF;
	font: 700 clamp(1.65rem, 6.4vw, 2.45rem)/1 var(--font-head, var(--font-util));
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.strip-cost b { font-size: 1.35em; font-weight: 700; }
.strip-cost span { font-size: .62em; font-weight: 600; letter-spacing: .04em; }

.strip-free {
	margin: 0;
	color: rgba(255, 255, 255, .92);
	font: 600 clamp(1.05rem, 4.4vw, 1.2rem)/1.2 var(--font-util, system-ui, sans-serif);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.strip-go {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: 1.05rem 1.9rem;
	border-radius: 999px;
	background: #C80047;
	color: #FFFFFF;
	font: 700 clamp(1.05rem, 4.2vw, 1.15rem)/1 var(--font-util, system-ui, sans-serif);
	text-decoration: none;
	box-shadow: 0 14px 32px -14px rgba(40, 0, 14, .9);
	transition: transform 260ms var(--shine-ease, ease);
}

.strip-go:hover,
.strip-go:focus-visible { color: #FFFFFF; transform: translateY(-2px); }

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

@media (min-width: 46rem) {
	.strip-in { flex-wrap: nowrap; justify-content: space-between; text-align: left; }
	.strip-say { flex: 1 1 auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * HER ENAMEL SIGNS — "I LOVE THE EXAMPLES"
 *
 * On her own drawing the four jobs are not cards. They are **signs** — a metal
 * rim, a solid plate of colour, the role in heavy caps across the middle, and a
 * darker bar along the foot carrying the suburb on the left and the rate on the
 * right. SOCIAL MEDIA ASSISTANT in hot pink. MATHS TUTOR in white. EVENT CREW
 * in chrome. BARISTA in her deep red.
 *
 * The rounded pill I had was a card. **A sign is a thing hung up in a place**,
 * which is the whole business — somebody two streets away has put this out.
 *
 * Rebuilt with the same markup, laid out as a grid so nothing in the templates
 * had to move: the role across the top, then a foot with the suburb and the
 * rate at either end of it.
 * ══════════════════════════════════════════════════════════════════════════ */

.cards { gap: .7rem; }

.card {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'role role'
		'meta pay';
	align-content: space-between;
	gap: .9rem .6rem;
	padding: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, .55),
		inset 0 0 0 5px rgba(0, 0, 0, .12),
		0 14px 30px -14px rgba(40, 0, 14, .85);
}

.card-role {
	grid-area: role;
	padding: 1rem .85rem .2rem;
	font: 800 clamp(.86rem, 3.7vw, 1rem)/1.12 var(--font-util, system-ui, sans-serif);
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
	align-self: start;
}

.card-meta,
.card-pay {
	align-self: end;
	margin: 0;
	padding: .5rem .85rem .55rem;
	font: 700 clamp(.68rem, 2.9vw, .76rem)/1 var(--font-util, system-ui, sans-serif);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 1;
}

.card-meta {
	grid-area: meta;
	display: block;
	background: rgba(0, 0, 0, .22);
}

.card-meta b {
	display: block;
	margin-top: .28rem;
	font-size: .95em;
	letter-spacing: .06em;
	opacity: .82;
	white-space: normal;
}

.card-pay {
	grid-area: pay;
	background: rgba(0, 0, 0, .22);
	font-size: clamp(.78rem, 3.2vw, .88rem);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

/* Her four plates, in her four colours. */
.card--pink  { background: linear-gradient(178deg, #FF3E7C 0%, #ED1160 100%); color: #FFFFFF; }
.card--cream { background: linear-gradient(178deg, #FFFFFF 0%, #FFEFF5 100%); color: #E90255; }
.card--red   { background: linear-gradient(178deg, #E90255 0%, #E90255 100%); color: #FFFFFF; }
.card--dark  { background: linear-gradient(178deg, #E9E4E8 0%, #B9B0BA 100%); color: #111111; }

.card--cream .card-meta,
.card--cream .card-pay { background: rgba(200, 16, 60, .1); }

.card--dark .card-meta,
.card--dark .card-pay { background: rgba(42, 9, 18, .14); }


/* ══════════════════════════════════════════════════════════════════════════
 * AND HER WORDMARK AT THE FOOT, THE SIZE SHE DREW IT
 *
 * On her homepage the last thing before the footer is UNiiVERSE across the
 * whole width — black, with the two lowercase i's in her pink, which is the
 * only part of her own mark that glows.
 *
 * It is set as real type rather than a picture, so it is readable by a search
 * engine, a screen reader and anybody translating the page — and so it scales
 * to any screen without going soft.
 * ══════════════════════════════════════════════════════════════════════════ */

.sec--last {
	background: linear-gradient(176deg, var(--rose-lit, #FFF4F8) 0%, #FFFFFF 100%);
	position: relative;
	overflow: hidden;
}

/*
 * Her name now stands under the pink strip rather than at the foot of the
 * page, so it needs its own room — the closing section used to give it one.
 */
.her-name {
	padding: clamp(1.4rem, 5vw, 2.4rem) clamp(14px, 4vw, 28px) clamp(1.6rem, 5.4vw, 2.8rem);
	background: #FFFFFF;
	overflow: hidden;
}

.her-name .mark-huge { margin: 0; }

.mark-huge {
	display: block;
	margin: clamp(1.6rem, 5vw, 2.6rem) 0 0;
	color: #111111;
	font: 700 clamp(3.1rem, 17.5vw, 9rem)/.86 var(--font-util, system-ui, sans-serif);
	letter-spacing: -.045em;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
}

.mark-huge i {
	font-style: normal;
	color: #FF2166;
}


/* The foot of the sign is one bar, not two blocks with a gap between them. */
.card { gap: .9rem 0; }
.card-meta { padding-right: .4rem; }
.card-pay { padding-left: .4rem; }


/* ── AND THE INK ON THAT BAND HAD TO TURN WITH THE GROUND ────────────────
 *
 * The last band was written for her night — pink type on near-black. Putting
 * her wordmark on it made it light, and every word on it went pale-pink on
 * near-white, which is her own law arriving: **the ground changed and the ink
 * did not.** A palette is never one token.
 */
.sec--last .last-head {
	color: #111111;
	font: 700 clamp(1.7rem, 7vw, 2.8rem)/1.06 var(--font-head, var(--font-util));
	letter-spacing: -.02em;
}

.sec--last .last-says,
.sec--last .last-wide { color: #E90255; }

.sec--last .last-go {
	background: linear-gradient(120deg, #FF3E7C 0%, #ED1160 55%, #E90255 100%);
	color: #FFFFFF;
	box-shadow: 0 18px 40px -16px rgba(237, 17, 96, .8);
}

.sec--last .last-go:hover,
.sec--last .last-go:focus-visible { color: #FFFFFF; }


/* ══ HER FOOTER, THE PINK STRIP SHE DREW ═════════════════════════════════ */

.foot--uv {
	background:
		var(--her-dots) 0 0 / 14px 14px,
		linear-gradient(96deg, #FF2E72 0%, #F0135F 48%, #E90255 100%);
	padding-block: clamp(1.6rem, 5vw, 2.4rem);
	color: #FFFFFF;
}

.foot-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .8rem clamp(1rem, 3vw, 1.8rem);
	text-align: center;
}

.foot-mark { margin: 0; line-height: 0; }
.foot-mark img { width: clamp(27px, 6.5vw, 31px); height: auto; }

.foot-name {
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font: 600 clamp(.8rem, 3vw, .94rem)/1.35 var(--font-util, system-ui, sans-serif);
	letter-spacing: .06em;
	/* Never nowrap: with the umbrella on it the line is wider than a phone,
	   and on 15 September 2026 it was clipped at both ends on a 375px screen. */
	white-space: normal;
	text-align: center;
	padding: 0 .5rem;
}

.foot-roads {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem clamp(.9rem, 3vw, 1.6rem);
}

.foot-roads a,
.foot-write a {
	color: #FFFFFF;
	font: 700 clamp(.8rem, 3.2vw, .88rem)/1 var(--font-util, system-ui, sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 255, 255, .4);
	padding-bottom: 2px;
}

.foot-roads a:hover,
.foot-roads a:focus-visible,
.foot-write a:hover,
.foot-write a:focus-visible { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.foot-write { margin: 0; }

@media (min-width: 46rem) {
	.foot-in { justify-content: space-between; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HER GLOSSY BUBBLES, 8 SEPTEMBER 2026 — THE LAST PIECE OF HER OWN DRAWING
 *
 * Five chrome speech bubbles and a neon smiley, floating in the magenta
 * around her photograph, exactly where she drew them.
 *
 * THE CHROME IS FOUR THINGS AT ONCE, and taking any one out kills it: a bright
 * band across the top half, a hard edge where that band stops, a warmer bounce
 * underneath as though the magenta is reflecting up into the metal, and a
 * white rim around the whole thing. A single silver gradient reads as grey
 * plastic — the hard line at 50% is what makes the eye call it metal.
 *
 * Same rim language as her enamel job signs further down, so the page reads as
 * one hand rather than two.
 * ══════════════════════════════════════════════════════════════════════════ */

.pops {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.pop {
	position: absolute;
	margin: 0;
	/* The tail hangs below the pill, so the pill itself is the padded part. */
	filter: drop-shadow(0 10px 18px rgba(60, 0, 22, .55));
}

.pop > span {
	display: block;
	position: relative;
	/* Sized in em from here down, so the bubble grows with its own word. */
	padding: .55em 1.05em .6em;
	border-radius: 999px;
	font: 800 clamp(.7rem, 1.4vw, 1.15rem)/1 var(--font-util, system-ui, sans-serif);
	letter-spacing: .1em;
	white-space: nowrap;
	color: #E90255;
	background:
		linear-gradient(180deg,
			#FFFFFF 0%,
			#F2F4F7 42%,
			#C9CED6 50%,
			#EDE3E7 62%,
			#FFF3F7 100%);
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 255, 255, .95),
		inset 0 0 0 3px rgba(120, 20, 55, .18),
		inset 0 2px 1px rgba(255, 255, 255, .9);
}

/* The tail, cut from the same metal so the light runs through it. */
.pop > span::after {
	content: '';
	position: absolute;
	left: 1.3em;
	bottom: -.44em;
	width: .78em;
	height: .78em;
	background: linear-gradient(180deg, #EDE3E7 0%, #FFF3F7 100%);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9);
	clip-path: polygon(0 0, 100% 0, 18% 100%);
}

/* Her smiley: the one that is lit rather than polished. */
.pop--face > span {
	padding: .5em .62em .42em;
	background: linear-gradient(180deg, #FF5C93 0%, #FF2166 46%, #E90255 54%, #FF3D79 100%);
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 255, 255, .8),
		inset 0 0 0 3px rgba(120, 0, 40, .25),
		0 0 26px rgba(255, 45, 115, .75);
}

.pop--face > span::after {
	background: linear-gradient(180deg, #E90255 0%, #FF3D79 100%);
}

.pop--face svg { display: block; fill: #FFFFFF; stroke: #FFFFFF; }

/*
 * WHERE THEY SIT — around the edge, never across the middle, because her own
 * mark is standing in the centre of that photograph.
 */
.pop--paid  { top: 9%;  left: 5%; }
.pop--when  { top: 8%;  right: 5%; }
.pop--local { bottom: 27%; left: 3%; }
.pop--make  { bottom: 17%; right: 6%; }
.pop--flex  { bottom: 6%;  left: 21%; }
.pop--face  { top: 4%;  right: 27%; }

/*
 * A SLOW BOB, DIFFERENT FOR EACH, so it reads as things floating rather than
 * a row of elements sharing one animation.
 */
@keyframes pop-float {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -9px, 0); }
}

@media (prefers-reduced-motion: no-preference) {
	.pop {
		animation: pop-float 3.4s ease-in-out infinite alternate;
		will-change: transform;
	}
	.pop--b { animation-duration: 4.1s; animation-delay: -.7s; }
	.pop--c { animation-duration: 3.8s; animation-delay: -1.4s; }
	.pop--d { animation-duration: 4.6s; animation-delay: -.3s; }
	.pop--e { animation-duration: 3.2s; animation-delay: -1.9s; }
	.pop--face { animation-duration: 5s; animation-delay: -2.2s; }
}

/*
 * ON A PHONE, THREE COME OFF RATHER THAN ALL SIX SHRINKING.
 *
 * Her photograph is a 5/4 frame on a narrow screen and her mark fills the
 * middle of it. Six bubbles round that leaves no air, and a bubble small
 * enough to fit is not a bubble any more. PAID, LOCAL and THIS WEEK are the
 * three a person actually arrives asking about, so those are the three that
 * stay, and her smiley stays with them.
 */
@media (max-width: 620px) {
	.pop--flex,
	.pop--make { display: none; }

	.pop--paid  { top: 7%; left: 4%; }
	.pop--when  { top: 13%; right: 3%; }
	.pop--face  { top: 3%; right: 30%; }

	/*
	 * ── HER CATCH, 8 SEPTEMBER 2026 ───────────────────────────────────────
	 *
	 * **You just need to move local on the phone. It is sitting on the ask
	 * connect, get it done.** She was right — on a narrow screen the
	 * photograph crops to 5/4 and her own neon line rises to meet the bottom
	 * of the frame, so LOCAL landed straight on top of it. Two pieces of her
	 * type fighting over the same square inch.
	 *
	 * Lifted to the open left of the picture, clear of her neon and clear of
	 * her mark in the middle.
	 */
	.pop--local { top: 44%; left: 4%; bottom: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * FURTHER AFIELD — hers, 13 September 2026: fruit picking, farm work, a
 * season away between semesters. A wide-sky band in her own blush and enamel,
 * two sides side by side on a desk, the six kinds as pills beneath.
 * ══════════════════════════════════════════════════════════════════════════ */
.sec--afield {
	position: relative;
	isolation: isolate;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--blush-lit, #FFF3F7) 55%, var(--blush, #FFE4EC) 100%);
	border-block: 1px solid rgba(200, 16, 60, .14);
}
.sec--afield::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 45% at 85% 0%, rgba(255, 46, 114, .16), transparent 70%);
	pointer-events: none;
}
.sec--afield .in { max-width: 70rem; }
.eyebrow--afield { color: var(--purple); }
.afield-head {
	margin: .3rem 0 .8rem;
	color: var(--enamel);
	font: 700 clamp(1.9rem, 6vw, 3.1rem)/1.05 var(--font-head, var(--font-util));
	letter-spacing: -.025em;
	text-wrap: balance;
}
/* the line about the cherries and the four hours to a traffic light is the best
   sentence in this section — it was set at the size of a footnote */
.afield-lede {
	margin: 0 0 2.2rem;
	max-width: 40rem;
	color: var(--row-ink-soft);
	font-size: clamp(1.08rem, 3.6vw, 1.3rem);
	line-height: 1.65;
	text-wrap: pretty;
}
/* ── ONE LANGUAGE DOWN THE WHOLE PAGE — 29 September 2026 ─────────────────
 * Everything above this section is a lacquered card: white falling to pink, no
 * hairline, a deep soft shadow in her red. These two panels were flat white
 * boxes with a thin outline, so the page changed its mind about what it was
 * halfway down and the season read as the small print. Same clothes now. */
.afield-two { display: grid; gap: 1.4rem; }
.afield-side {
	padding: 1.8rem 1.6rem 1.9rem;
	border-radius: 30px;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFF6FA 100%);
	border: 0;
	box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(233, 2, 85, .10) inset,
		0 22px 48px rgba(233, 2, 85, .18), 0 2px 6px rgba(17, 17, 17, .05);
	transition: transform .25s ease, box-shadow .25s ease;
}
.afield-side:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(233, 2, 85, .24), 0 2px 6px rgba(17, 17, 17, .05); }
.afield-side--farm { background: linear-gradient(180deg, #FFF3F7 0%, #FFE4EC 100%); border: 0; }
.afield-who {
	margin: 0 0 .8rem;
	color: var(--purple);
	font: 700 .78rem/1.3 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
}
.afield-facts { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1rem; }
.afield-facts li {
	padding-left: 1.1rem;
	border-left: 3px solid rgba(233, 2, 85, .45);
	color: var(--row-ink-soft);
	font-size: 1.02rem;
	line-height: 1.62;
	text-wrap: pretty;
}
.afield-facts strong { color: var(--enamel); }
.afield-kinds {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}
.afield-kinds a {
	display: inline-block;
	padding: .5rem .95rem;
	border-radius: 999px;
	border: 1px solid rgba(200, 16, 60, .3);
	background: #FFFFFF;
	color: var(--enamel);
	font: 600 .85rem/1 var(--font-util);
	text-decoration: none;
}
.afield-kinds a:hover, .afield-kinds a:focus-visible { background: var(--purple); color: #FFF3F7; border-color: var(--purple); }
@media (min-width: 46rem) {
	.afield-two { grid-template-columns: 1fr 1fr; }
}
/* the strip now sits between the two lanes and the search — give it air on both sides */
.sec--what + .strip { margin-top: 0; }
.strip + .sec--seek { padding-top: clamp(2rem, 6vw, 3.5rem); }
.lane-part--afield strong { color: var(--enamel); }

/* the one ABN, under the name — her list, 13 September 2026 */
.foot-abn { margin: .2rem 0 1rem; color: rgba(255, 243, 247, .6); font: 500 .78rem/1.4 var(--font-util); letter-spacing: .08em; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   THEIR DESK — hers, 15 September 2026: *same for UNiiVERSE.* The LocaLilly
   desk in this world's clothes: white plates on blush, ink text, her red as
   the one hot accent, the sign lacquered lightly.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --candy-pink: #FF3FA4; --candy-sun: #FFB300; --candy-lilac: #B58BFF; }
.desk { margin: 4px 0 26px; text-align: center; }
.desk-eyebrow { margin: 0 0 8px; font: 600 11.5px/1 var(--font-util); letter-spacing: .26em; text-transform: uppercase; color: var(--mint); }
.desk-sign { margin: 0; font: 500 clamp(28px, 7.9vw, 39px)/1 var(--font-head); color: var(--enamel); letter-spacing: .01em; text-shadow: 0 1px 0 #fff, 0 3px 0 rgba(200, 16, 60, .18), 0 10px 20px rgba(200,16,60,0.07); }
.desk-sign .say { color: var(--mint); font-style: italic; }
.desk-where { margin: 14px 0 0; font: 500 14.5px/1.3 var(--font-util); letter-spacing: .02em; color: color-mix(in srgb, var(--enamel) 70%, transparent); }
.desk-says { margin: 12px auto 0; max-width: 36ch; font: 400 clamp(15.5px, 4vw, 17px)/1.55 var(--font-say); color: color-mix(in srgb, var(--enamel) 82%, transparent); }
.desk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.desk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px; font: 600 12.5px/1 var(--font-util); color: var(--enamel); background: #fff; border: 1px solid var(--keyline); box-shadow: 0 2px 8px rgba(200,16,60,0.03); }
.desk-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(200, 16, 60, .5); }
.desk-chip--free::before { background: var(--candy-sun); box-shadow: 0 0 8px rgba(255, 179, 0, .6); }
.desk-chip--paying::before { background: var(--candy-lilac); box-shadow: 0 0 8px rgba(181, 139, 255, .7); }
.desk-chip--wait::before, .desk-chip--busy::before { background: var(--candy-pink); box-shadow: 0 0 8px rgba(255, 63, 164, .6); }
.desk-presses { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 22px 0 0; }
@media (min-width: 520px) { .desk-presses { grid-template-columns: repeat(3, 1fr); } }
.desk-press { display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 16px; border-radius: 18px; cursor: pointer; text-decoration: none; color: var(--enamel); background: #fff; border: 1px solid var(--keyline); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(200,16,60,0.14), 0 1px 0 rgba(200,16,60,0.02); transition: transform .13s cubic-bezier(.3, .7, .4, 1), box-shadow .15s; }
.desk-press:active { transform: translateY(2px); }
.desk-press .desk-mark { flex: none; width: 26px; height: 26px; }
.desk-press-words { display: flex; flex-direction: column; gap: 2px; }
.desk-press-name { font: 700 clamp(15px, 4vw, 16.5px)/1.1 var(--font-util); }
.desk-press-line { font: 400 12.5px/1.3 var(--font-say); opacity: .74; }
.desk-press--mint { color: #fff; background: var(--purple); border-color: transparent; box-shadow: 0 6px 0 var(--mint-deep), 0 10px 22px rgba(200, 16, 60, .3); }
.desk-press--mint:active { box-shadow: 0 2px 0 var(--mint-deep); transform: translateY(4px); }
.desk-press--mint .desk-mark { color: #fff; }
.desk-press--pink .desk-mark { color: var(--candy-pink); }
.desk-press--sun .desk-mark { color: var(--candy-sun); }
.desk-shared { min-height: 1.4em; margin: 10px 0 0; font: 400 15px/1.4 var(--font-say); color: var(--mint); }
.candy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 24px; }
@media (min-width: 640px) { .candy { grid-template-columns: repeat(3, 1fr); } }
.candy-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 118px; padding: 18px 15px 15px; border-radius: 16px; text-decoration: none; overflow: hidden; color: var(--enamel); background: #fff; border: 1px solid var(--keyline); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px rgba(200,16,60,0.14), 0 1px 0 rgba(200,16,60,0.02); transition: transform .13s cubic-bezier(.3, .7, .4, 1), box-shadow .15s; }
.candy-tile::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--rule, var(--mint)); }
.candy-tile:hover { box-shadow: inset 0 1px 0 #fff, 0 14px 28px -10px rgba(200,16,60,0.16); }
.candy-tile:active { transform: translateY(2px); }
.candy-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .candy-tile:last-child:nth-child(odd) { grid-column: auto; } }
.candy-tile--pink { --rule: var(--candy-pink); } .candy-tile--mint { --rule: var(--mint); } .candy-tile--sun { --rule: var(--candy-sun); } .candy-tile--lilac { --rule: var(--candy-lilac); } .candy-tile--enamel { --rule: var(--purple-mid); } .candy-tile--purple { --rule: var(--purple-lit); }
.candy-name { font: 700 clamp(14.5px, 4vw, 16px)/1.2 var(--font-util); color: var(--enamel); }
.candy-line { font: 400 13.5px/1.4 var(--font-say); color: color-mix(in srgb, var(--enamel) 66%, transparent); }
.switch-form { margin: 0 0 12px; }
.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--keyline); box-shadow: inset 0 2px 6px rgba(200,16,60,0.02); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-knob { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; background: #E9D6DE; box-shadow: inset 0 2px 5px rgba(200,16,60,0.07); transition: background .18s; }
.switch-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(200,16,60,0.12); transition: transform .18s cubic-bezier(.3, .7, .4, 1); }
.switch input:checked + .switch-knob { background: linear-gradient(180deg, var(--purple-lit), var(--purple)); }
.switch input:checked + .switch-knob::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-knob { outline: 2px solid var(--purple-lit); outline-offset: 2px; }
.switch-words { display: flex; flex-direction: column; gap: 2px; }
.switch-name { font: 700 15.5px/1.15 var(--font-util); color: var(--enamel); }
.switch-line { font: 400 13.5px/1.35 var(--font-say); color: color-mix(in srgb, var(--enamel) 66%, transparent); }
.switch-more { margin: 12px 4px 4px; } .switch-more[hidden] { display: none; }
.reach-form { margin: 0; } .reach-choices { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .reach-choices { grid-template-columns: repeat(2, 1fr); } }
.reach-choice { display: block; width: 100%; padding: 14px 16px; border-radius: 12px; text-align: left; cursor: pointer; font: 500 15px/1.3 var(--font-util); color: var(--enamel); background: #fff; border: 1.5px solid var(--keyline); }
.reach-choice.is-on { color: #fff; background: var(--mint); border-color: var(--mint); font-weight: 700; }
.them-reach { margin: 6px 0 0; font: 400 14.5px/1.4 var(--font-say); color: color-mix(in srgb, var(--enamel) 72%, transparent); }
.week { display: grid; grid-template-columns: 5.2em repeat(7, 1fr); gap: 5px; margin: 14px 0 16px; }
.week-day { font: 600 12px/1 var(--font-util); color: color-mix(in srgb, var(--enamel) 60%, transparent); text-align: center; padding: 0 0 4px; }
.week-part { font: 600 12px/1.15 var(--font-util); color: color-mix(in srgb, var(--enamel) 74%, transparent); display: flex; align-items: center; }
.week-cell { position: relative; aspect-ratio: 1 / 1.05; border-radius: 9px; background: #fff; border: 1px solid var(--keyline); box-shadow: inset 0 2px 5px rgba(200,16,60,0.02); }
.week--mine .week-cell { cursor: pointer; }
.week-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.week-cell.is-on, .week--mine .week-cell:has(input:checked) { background: linear-gradient(180deg, var(--purple-lit), var(--purple)); border-color: transparent; box-shadow: 0 4px 10px -3px rgba(200, 16, 60, .6); }
.week--mine .week-cell:has(input:focus-visible) { outline: 2px solid var(--purple-lit); outline-offset: 2px; }
.week-words { margin: 14px 0 6px; font: 400 15px/1.5 var(--font-say); color: color-mix(in srgb, var(--enamel) 82%, transparent); border-left: 3px solid var(--mint); padding-left: 12px; }
.them .week { max-width: 460px; margin: 10px auto 0; }
.found-week { display: block; margin: 6px 0 0; font: 400 13px/1.4 var(--font-say); color: color-mix(in srgb, var(--enamel) 66%, transparent); }
.badges { margin: 0 0 24px; padding: 18px 16px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--keyline); box-shadow: 0 10px 24px -10px rgba(200,16,60,0.12); }
.badges-head { margin: 0; font: 700 clamp(1rem, 4.2vw, 1.15rem)/1.2 var(--font-util); color: var(--enamel); }
.badges-says { margin: 6px 0 14px; font: 400 14.5px/1.5 var(--font-say); color: color-mix(in srgb, var(--enamel) 66%, transparent); }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.badge { padding: 8px 12px; border-radius: 999px; font: 600 12.5px/1 var(--font-util); }
.badge.is-on { color: #fff; background: var(--mint); }
.badge.is-off { color: color-mix(in srgb, var(--enamel) 45%, transparent); background: transparent; border: 1px solid var(--keyline); }
.badge.is-mark { color: var(--enamel); background: #FFE39A; }
.badges-after { margin: 12px 0 0; font: 400 13.5px/1.45 var(--font-say); color: color-mix(in srgb, var(--enamel) 55%, transparent); }
.shed { margin: 0 0 24px; padding: clamp(20px, 5vw, 28px); border-radius: 22px; background: linear-gradient(180deg, #fff, var(--blush)); border: 1px solid var(--keyline); box-shadow: inset 0 1px 0 #fff, 0 18px 36px -14px rgba(200,16,60,0.14), 0 2px 0 rgba(200,16,60,0.02); }
.shed-head { margin: 0; font: 500 clamp(24px, 6.4vw, 30px)/1 var(--font-head); color: var(--enamel); }
.shed-says { margin: 12px 0 16px; font: 400 15.5px/1.5 var(--font-say); color: color-mix(in srgb, var(--enamel) 78%, transparent); }
.shed-list { margin: 0; padding: 6px 0 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .shed-list { grid-template-columns: repeat(3, 1fr); } }
.book { display: flex; min-height: 120px; border-radius: 6px 12px 12px 6px; text-decoration: none; overflow: hidden; background: linear-gradient(135deg, var(--book, var(--purple)), color-mix(in srgb, var(--book, var(--purple)) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 18px -6px rgba(200,16,60,0.20), 0 3px 0 rgba(200,16,60,0.08); transition: transform .15s cubic-bezier(.3, .7, .4, 1); }
.book:hover { transform: translateY(-3px); }
.book-spine { flex: none; width: 12px; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .18) 40%, rgba(0, 0, 0, .25)); }
.book-cover { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 12px 11px; }
.book-title { font: 700 clamp(13.5px, 3.6vw, 15px)/1.2 var(--font-util); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.book-take { font: 600 12px/1 var(--font-util); letter-spacing: .02em; color: rgba(255, 255, 255, .92); }
.book--welcome { --book: #E90255; } .book--builder { --book: #FF2E7E; } .book--practice { --book: #FF5C8F; } .book--pricing { --book: #E90255; } .book--door { --book: #2E6FD8; } .book--paid { --book: #FF2E7E; }
.book--soon { filter: saturate(.55); opacity: .82; }
.support { margin: 0 0 30px; }
.support-head { margin: 0 0 12px; font: 700 clamp(1rem, 4.2vw, 1.15rem)/1.2 var(--font-util); color: var(--enamel); }
.support-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 640px) { .support-list { grid-template-columns: repeat(2, 1fr); } }
.support-one { padding: 16px 16px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--keyline); box-shadow: 0 8px 18px -10px rgba(200,16,60,0.12); }
.support-name { margin: 0; font: 700 15px/1.25 var(--font-util); color: var(--enamel); }
.support-line { margin: 8px 0 12px; font: 400 14.5px/1.5 var(--font-say); color: color-mix(in srgb, var(--enamel) 74%, transparent); }
.support-go { font: 700 14px/1 var(--font-util); color: var(--mint); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.room-card[id], #today, #pay { scroll-margin-top: 90px; }

/* ── A neighbour's desk, and a business's — 15 September 2026 ──────────── */
.desk--place .desk-sign .say, .desk--business .desk-sign .say { font-style: normal; }
.desk--business .desk-eyebrow { color: var(--candy-sun, var(--mint)); }
.desk--business .desk-sign .say { color: var(--purple); }
.room-row--resting { opacity: .62; }
.room-row--resting .room-row-words { font-style: italic; }
.room-card--kind .switch-more .askback-label { display: block; margin: 0 0 6px; }
.room-card--kind .switch-more .seek-in { margin: 0 0 10px; }
.money-presses .ll-on { margin-top: 6px; }
/* The room-card label rule (uppercase, block, mint) was winning over the switch — it is a label too. */
.room-card label.switch, .place label.switch:not(.vh), .comeback label.switch:not(.vh) { display: flex; margin: 0; padding: 12px; color: var(--enamel); font: inherit; letter-spacing: 0; text-transform: none; text-align: left; }
.room-card .switch-words, .place .switch-words { display: flex; }
.room-card .switch-name, .place .switch-name { font: 700 15.5px/1.15 var(--font-util); text-transform: none; letter-spacing: 0; color: var(--enamel); }
.room-card .switch-line, .place .switch-line { font: 400 13.5px/1.35 var(--font-say); text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--enamel) 66%, transparent); }
.room-card .switch-knob, .place .switch-knob { flex: none; }
.moment-count { margin: 0 0 8px; font: 600 11px/1 var(--font-util); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--enamel) 46%, transparent); }
.moment-ask--second { margin-top: 26px; font-size: clamp(22px, 6vw, 28px); }
.letter[readonly] { background: #fff; color: var(--enamel); }
.quiet-word { background: none; border: 0; padding: 0; font: inherit; color: var(--purple); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#shift-form { margin-top: 14px; }
.kept-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.kept-one form { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--keyline); }
.kept-name { font: 700 15px/1.2 var(--font-util); color: var(--enamel); }


/*
 * ── HER BRIEF, TAKEN LITERALLY — 22 SEPTEMBER 2026 ──────────────────────────
 *
 * Her mockup (AI PARTNERS/generated-image-6.png, 26 August): hot magenta, never
 * a red red; white under most of the page; black ink; the headings a heavy
 * condensed sans in capitals, compact; the said lines an italic Didone in
 * capitals; the four shifts with a face on each; black pill buttons. Her words
 * today: "that was never the font", "never dark burgundy", "the headings are
 * stupidly too big", "sleek and modern". This layer is last, so it wins.
 */
h1, h2, h3, h4, .card-role, .lane-title, .shelf-title {
	font-family: var(--font-head) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: .96;
}
h1 { font-size: clamp(28px, 4.2vw, 44px) !important; }
h2 { font-size: clamp(22px, 3vw, 32px) !important; }
h3 { font-size: clamp(17px, 2vw, 21px) !important; }
.way-imagine, .strip-say, .say, .said {
	font-family: var(--font-say) !important;
	font-weight: 900 !important;
	font-style: italic !important;
	text-transform: uppercase;
	letter-spacing: -.005em;
	line-height: .92;
	font-size: clamp(30px, 6.2vw, 58px) !important;
}
.strip-say { font-size: clamp(28px, 4.4vw, 46px) !important; }
.card { position: relative; overflow: visible; }
.card-face {
	display: block;
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 0 10px;
	box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(233, 2, 85, .35);
}
.card-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-role { font-size: clamp(18px, 2.2vw, 24px) !important; letter-spacing: .01em; }
/* The eyebrow over the hero is a small tracked line, never a heading. */
.way-head {
	font-family: var(--font-util) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.4;
}
/* Her mockup's presses: black pills, white words. */
.way-go--first, .strip-go, .seek-go, .press, .last-go, .what-lane--shop .what-lane-go {
	background: #111111 !important;
	color: #FFFFFF !important;
	border-color: #111111 !important;
	border-radius: 999px !important;
	box-shadow: 0 10px 24px rgba(17,17,17,.18) !important;
}
.way-go--first:hover, .strip-go:hover, .seek-go:hover, .press:hover { background: #000 !important; }

/* ── THE LAST PRESS WAS LEFT BEHIND — 29 September 2026 ───────────────────
 * Her 22 September presses — the glossy bubble — took over `.way-go--first`
 * and `.what-lane-go` from what-goes-up.css, which loads after this file. The
 * list above still held `.last-go`, and that stylesheet never named it, so the
 * final invitation on the page stayed a black pill from the old mockup while
 * every other press on the same page had become pink. Measured on the live
 * world: background-color rgb(17,17,17), background-image none, beating the
 * theme's own `.sec--last .last-go` gradient by coming later.
 *
 * This is not a ruling overturned; it is a change of hers finishing its walk.
 * `.strip-go` stays black on purpose — on the hot pink money band the black is
 * doing real work, and bits of black is hers.
 *
 * AND NO GRADIENT ON IT — HERS, 4 OCTOBER 2026: "gradient buttons like that.
 * That is so 2010." A button is one solid colour from this world's own palette.
 * It was a four-stop pink gradient when I mended it on 29 September; it is her
 * #E90255 now, and the hover is her deeper #C80047. Never put a ramp back. */
.sec--last .last-go {
	background: #E90255 !important;
	color: #FFFFFF !important;
	border-color: transparent !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 14px 30px rgba(233, 2, 85, .38) !important;
	transition: transform .18s ease, box-shadow .25s ease;
}
.sec--last .last-go:hover, .sec--last .last-go:focus-visible {
	background: #C80047 !important;
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 20px 40px rgba(233, 2, 85, .45) !important;
}


/*
 * ── CLEAN, MODERN, AND THE LINE THAT MATTERS FIRST — HERS, 22 SEPTEMBER 2026 ──
 * "Don't use old-fashioned fonts." Outfit for every heading and said line,
 * Manrope under them, nothing italic, nothing in capitals by default.
 * "Local work that fits around you is the most important thing — it works for
 * both people." So it is the heading of the world, at a size I chose.
 */
h1, h2, h3, h4, .card-role, .lane-title, .shelf-title, .way-imagine, .strip-say, .say, .said, .brief-h {
	font-family: var(--font-head) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	text-transform: none;
	letter-spacing: -.02em;
	line-height: 1.04;
}
h1, .way-head { font-size: clamp(30px, 4.6vw, 54px) !important; letter-spacing: -.025em; line-height: 1; }
h2 { font-size: clamp(22px, 2.6vw, 32px) !important; }
h3 { font-size: clamp(17px, 1.9vw, 21px) !important; }
.way-head {
	font-family: var(--font-head) !important;
	font-weight: 700 !important;
	text-transform: none;
	letter-spacing: -.025em;
	margin: 0 0 14px;
}
.way-imagine { font-size: clamp(20px, 2.4vw, 28px) !important; font-weight: 500 !important; line-height: 1.25; letter-spacing: -.01em; max-width: 30ch; }
/*
 * ── THE ONE THAT ACTUALLY WINS ────────────────────────────────────────────
 *
 * There are TWO `.strip-say` font-size rules carrying !important in this one
 * stylesheet, at 8217 and here. Neither is in a media query, so the later one
 * wins outright and the earlier is dead weight. Raising the first and
 * measuring gave 20px — unchanged — which reads exactly like a cache that has
 * not cleared. It was this line all along.
 *
 * Her 9 October ruling (make the red pip a little bit bigger) is set HERE,
 * and the pair are left in step so the next person to raise one is not
 * caught the same way.
 */
.strip-say { font-size: clamp(28px, 4.4vw, 46px) !important; }
.card-role { font-size: clamp(16px, 1.6vw, 20px) !important; text-transform: none; letter-spacing: -.01em; }
.arrival, .arrival .arrival-when, .arrival .arrival-ask { font-family: var(--font-util) !important; font-size: 14px !important; font-weight: 600 !important; }

/* ── A FACE ON THE PAGE — hers, 22 September 2026 ────────────────────────── */
.headshot { display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; background:radial-gradient(120% 90% at 20% 0%, #FF8CBB 0%, #FF2E7E 45%, #C80047 100%); box-shadow:0 0 0 3px #fff, 0 10px 24px rgba(233,2,85,.28); flex:none; }
.headshot img { width:100%; height:100%; object-fit:cover; display:block; }
.headshot b { color:#fff; font:700 .5em/1 'Outfit',sans-serif; }
.headshot--sign { width:96px; height:96px; font-size:96px; margin:0 auto .9rem; display:grid; }
.headshot--page { width:120px; height:120px; font-size:120px; }
.headshot--card { width:44px; height:44px; font-size:44px; box-shadow:0 0 0 2px #fff, 0 6px 14px rgba(233,2,85,.3); }
.them-plate .headshot--page { margin:0 auto 1rem; display:grid; }
.found-plate .headshot--card { margin:0 auto .4rem; display:grid; }
.headshot-room { display:flex; gap:1.2rem; align-items:center; }
.headshot-words { flex:1; min-width:0; }
.headshot-form { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.headshot-off { margin-top:1rem; }
@media (max-width:520px){ .headshot-room { flex-direction:column; text-align:center; } .headshot-form { justify-content:center; } }
.room-row--faced { display:grid; grid-template-columns:44px 1fr; gap:.4rem .9rem; align-items:start; }
.room-row--faced .headshot--card { grid-row:1 / span 3; }

/* ── THE LAST WORD IS THE PAGE'S PAYOFF — 30 September 2026 ──────────────
 * Her law: every page shows how it pulls back into the whole. This section is
 * that moment on UNiiVERSE, and both paragraphs sat at the weight of a
 * caption — so the sentence the whole world is for, "a young person round here
 * grows up knowing what they are worth because the people on their own street
 * told them", arrived the size of small print, centred, after a page of
 * headlines twice its size.
 *
 * Rank only. Not one word changes, and the ink stays her pink — that was her
 * own correction when this ground turned light, and it is not mine to revisit. */
.sec--last .in { max-width: 44rem; }
.sec--last .last-says {
	margin: .2rem 0 1.9rem;
	font-size: clamp(1.18rem, 4.4vw, 1.5rem);
	line-height: 1.48;
	text-wrap: balance;
}
.sec--last .last-wide {
	margin: 0 auto 2.2rem;
	max-width: 38rem;
	font-size: clamp(1.02rem, 3.4vw, 1.18rem);
	line-height: 1.68;
	text-wrap: pretty;
}

/* ── THE ROOM WHERE SOMEBODY REACHES THEIR OWN MONEY — 8 October 2026 ─────
 * `/your-payments/` is the shared road's screen (a rewrite rule, not a page —
 * it answers on every world). Her header and footer were around it and the
 * room itself was undressed: a raw grey browser button and a default square
 * input, black type, on the one screen where a person changes their card,
 * reads what they pay, or stops. Her law, and it is not a small one: the back
 * end is a room too, dressed in that world's colours.
 *
 * The press is ONE SOLID COLOUR — hers, 4 October 2026, and this is exactly
 * the screen where a ramp would have crept back in.
 * The heading takes this world's own deep rather than black — hers, 4 and
 * 6 October: black text is not the rule, but it is not something she likes.
 * The field's inline width and padding come from the shared road, so the few
 * things that have to beat them say so. */
main.lam-your-payments {
	max-width: 34rem;
	min-height: 58svh;
	margin: 0 auto;
	padding: clamp(1.8rem, 6vw, 3.4rem) 1.1rem clamp(3rem, 8vw, 4.5rem);
}
main.lam-your-payments h1 {
	font: 700 clamp(1.9rem, 7vw, 2.8rem)/1.06 'Outfit', sans-serif;
	letter-spacing: -.025em;
	color: #C80047;
	margin: 0 0 .7rem;
	text-wrap: balance;
}
main.lam-your-payments p {
	font: 400 clamp(1rem, 3.4vw, 1.1rem)/1.6 'Manrope', sans-serif;
	color: #5a4f56;
	margin: 0 0 1.6rem;
	text-wrap: pretty;
}
main.lam-your-payments label {
	font: 500 .95rem/1.5 'Manrope', sans-serif;
	color: #5a4f56;
}
main.lam-your-payments input[type="email"],
main.lam-your-payments input[type="text"] {
	width: 100% !important;
	max-width: 26rem;
	padding: .95rem 1.05rem !important;
	border: 1px solid rgba(233, 2, 85, .3);
	border-radius: 16px;
	background: #fff;
	font: 400 1.05rem/1.3 'Manrope', sans-serif;
	color: #2b1d24;
	box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(233, 2, 85, .08);
	transition: border-color .2s ease, box-shadow .2s ease;
}
main.lam-your-payments input[type="email"]:focus-visible,
main.lam-your-payments input[type="text"]:focus-visible {
	outline: 0;
	border-color: #E90255;
	box-shadow: 0 0 0 3px rgba(233, 2, 85, .18), 0 6px 18px rgba(233, 2, 85, .12);
}
main.lam-your-payments button,
main.lam-your-payments .card__open {
	display: inline-block;
	margin-top: .3rem;
	padding: .95rem 1.7rem;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: #E90255;
	color: #fff;
	font: 700 1.02rem/1 'Outfit', sans-serif;
	box-shadow: 0 10px 24px rgba(233, 2, 85, .3);
	transition: transform .18s ease, background .18s ease;
}
main.lam-your-payments button:hover,
main.lam-your-payments .card__open:hover { background: #C80047; transform: translateY(-2px); }

/* ══ PEOPLE WHO CAN. WORK THAT COUNTS. ═════════════════════════════════════
 *
 * Hers, 10 October 2026: "and then some photos of young people doing the
 * work." The band between the shifts and her red strip, washed in her pink
 * the way her own board washes it, with her line laid across the whole thing.
 *
 * Two across on a phone and four on a desk, matching the shifts above so the
 * two bands read as one idea rather than two.
 */
.doing {
	position: relative;
	margin: clamp(2rem, 7vw, 3.2rem) 0 0;
	isolation: isolate;
}

.doing-them {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 60rem) { .doing-them { grid-template-columns: repeat(4, 1fr); } }

.doing-them > li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--shine-deep, #E90255);
}

.doing-them img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/*
	 * Her pink over the photograph rather than inside it. Saturate first so
	 * the multiply has something to bite on, then a wash that keeps faces
	 * readable — a flat tint at full strength turns everybody into a
	 * silhouette, which is the opposite of showing who does the work.
	 */
	filter: grayscale(1) contrast(1.06) brightness(1.04);
	mix-blend-mode: luminosity;
	opacity: .92;
}

/*
 * ── HER LINE NEEDS GROUND UNDER IT ───────────────────────────────────────
 *
 * Set straight over the photographs it was unreadable — white italic across
 * four busy frames, and on a phone it straddled the seam between two rows
 * with a face behind every letter. A text-shadow alone does not save type
 * that sits on a dozen different values at once.
 *
 * So the band carries a wash of her own deep pink, heaviest where the words
 * are and gone at the edges, and the words sit on that. The photographs are
 * still read; the sentence is now read first, which is the right order.
 */
.doing::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(217, 0, 78, 0) 0%, rgba(201, 0, 71, .18) 34%, rgba(176, 0, 62, .82) 72%, rgba(160, 0, 56, .92) 100%);
	pointer-events: none;
}

/* Her line, across the whole band. */
.doing-say {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: clamp(1rem, 5vw, 2.4rem);
	margin: 0;
	padding-inline: clamp(14px, 4vw, 28px);
	text-align: center;
	color: #FFFFFF;
	font: 400 clamp(1.45rem, 7vw, 3.1rem)/1.05 var(--font-head, Georgia, serif);
	font-style: italic;
	letter-spacing: -.022em;
	text-shadow: 0 2px 18px rgba(110, 0, 36, .55);
	pointer-events: none;
}

.doing-say span { display: block; }

@media (min-width: 42rem) {
	.doing-say span { display: inline; }
}