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

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

/*
 * The parent sets the face and the size and deliberately sets no colour.
 * Enamel white on the deep purple measures 12.09:1, letter against ground.
 */
.head {
	color: var(--enamel);
}

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

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

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

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

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

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

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

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

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

.plate > * {
	position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

.hero-stack {
	display: grid;
	gap: clamp(18px, 3.4vw, 30px);
	justify-items: start;
	text-align: left;
}

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

.arrival[hidden] {
	display: none;
}

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

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

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

.seek-plate {
	width: 100%;
	padding: clamp(14px, 3.4vw, 20px);
}

.seek {
	display: grid;
	gap: 10px;
}

.seek-in {
	width: 100%;
	padding: 14px 16px;
	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: 15px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--seek-button);
	color: var(--seek-button-ink);
	font: 700 15px/1 var(--font-util);
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: var(--act-shadow);
}

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

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

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

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

/*
 * The plates hang ON the post rather than floating beside it.
 *
 * The first build left ten pixels of air between each plate and the line, and
 * at 379 it read as two loose columns with a stripe down the middle rather
 * than as signs on a corner. Found by looking at the picture rather than by
 * reasoning about the rule.
 */
.post-plate {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	width: calc(50% + 3px);
}

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

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

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

.post-name {
	display: block;
	font: 700 clamp(13px, 3.5vw, 17px)/1.15 var(--font-util);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--enamel);
	text-shadow: 0 1px 0 rgba(28, 8, 48, .5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.try[hidden] {
	display: none;
}

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

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

.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 12px/1 var(--font-util);
	cursor: pointer;
}

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

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

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

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

.mark-sign {
	display: block;
	width: min(100%, 30rem);
	height: auto;
	filter: var(--mark-shadow);
}

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