/**
 * MARKET, DRESSED — and it dresses itself in whatever world it is standing in.
 *
 * Every colour and every letterform here comes from the world's own tokens.
 * Nothing is imposed: a world that has declared its ink gets its ink, and a
 * world that has declared nothing gets a plain, light, correct floor rather
 * than somebody else's palette.
 *
 * Her standing ruling, 9 September 2026: this is not built on Find Me and it
 * never will be. It is the standard, and every world inherits it.
 */

.mf,
.mb,
.ms,
.pc {
	--_paper: var( --m-paper, #FCFBF9 );
	--_card:  var( --m-card,  #FFFFFF );
	--_ink:   var( --m-ink,   #221C26 );
	--_soft:  var( --m-soft,  #6B6472 );
	--_line:  var( --m-line,  #E8E3E6 );
	--_hot:   var( --m-hot,   #C2185B );
	--_deep:  var( --m-deep,  #4A1234 );
	--_glass: var( --m-glass, #F5F0F3 );
	--_read:  var( --m-read,  Georgia, 'Times New Roman', serif );
	--_say:   var( --m-say,   Georgia, 'Times New Roman', serif );

	color: var( --_ink );
	font-family: var( --_read );
	font-size: 17px;
	line-height: 1.6;
}

/* ─────────────────────────────────────────────  THE FRONT  ───────────── */

.mf {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp( 22px, 5vw, 64px ) clamp( 18px, 4vw, 40px ) 90px;
}

/* The measure lives on the line itself, never on its parent — `ch` is read
   against the element's OWN font size, so a measure set on a wrapper at body
   size crushes a display heading to one word a line. */
.mf__top { margin-bottom: clamp( 30px, 5vw, 56px ); }

.mf__shout {
	font-family: var( --_say );
	font-weight: 600;
	font-size: clamp( 34px, 6.4vw, 66px );
	line-height: 1.03;
	letter-spacing: -0.017em;
	color: var( --_deep );
	margin: 0 0 20px;
	max-width: 15ch;
	text-wrap: balance;
}

.mf__say {
	max-width: 46ch;
	font-size: clamp( 17px, 2vw, 21px );
	line-height: 1.52;
	color: var( --_soft );
	margin: 0;
}

/* The wander. A line somebody finishes, never a search bar. */

.mf__wander {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 14px;
	padding: 0 0 24px;
	border-bottom: 1px solid var( --_line );
	margin-bottom: 34px;
}

.mf__wander-say {
	font-family: var( --_say );
	font-size: clamp( 19px, 2.4vw, 26px );
	color: var( --_deep );
	white-space: nowrap;
}

.mf__wander-in {
	flex: 1 1 240px;
	min-width: 0;
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var( --_hot );
	border-radius: 0;
	padding: 4px 2px 7px;
	font-family: var( --_say );
	font-size: clamp( 19px, 2.4vw, 26px );
	color: var( --_deep );
}

.mf__wander-in::placeholder { color: var( --_soft ); opacity: 0.62; }
.mf__wander-in:focus { outline: 0; border-bottom-color: var( --_deep ); }
.mf__wander-in:focus-visible { outline: 3px solid var( --_hot ); outline-offset: 4px; }

/* Quiet and underlined, never a filled pill — her own ruling about what a
   step should look like. */
.mf__wander-go,
.mf__wander-all,
.mf__go {
	appearance: none;
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	font-family: var( --_read );
	font-size: 16px;
	color: var( --_hot );
	text-decoration: none;
	border-bottom: 2px solid var( --_hot );
}

.mf__wander-all { color: var( --_soft ); border-bottom-color: var( --_line ); }
.mf__wander-go:hover,
.mf__wander-all:hover,
.mf__go:hover { color: var( --_deep ); border-bottom-color: var( --_deep ); }

.mf__count {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --_soft );
	margin: 0 0 22px;
}

/* The wall. */

.mf__wall {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
	gap: clamp( 26px, 3.4vw, 46px ) clamp( 20px, 2.6vw, 34px );
	align-items: start;
}

/* Not a card. Space does the separating, so the artwork carries the page
   rather than a row of identical boxes with identical shadows. */
.mf__piece { min-width: 0; }

.mf__pic {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 3px;
	background: var( --_glass );
	margin-bottom: 14px;
}

.mf__pic svg,
.mf__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mf__piece:hover .mf__pic svg,
.mf__piece:hover .mf__pic img { transform: scale( 1.028 ); }

.mf__pic svg,
.mf__pic img { transition: transform 620ms cubic-bezier( .2, .7, .2, 1 ); }

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

.mf__name {
	font-family: var( --_say );
	font-weight: 500;
	font-size: 21px;
	line-height: 1.22;
	margin: 0 0 5px;
	text-wrap: balance;
}

.mf__name a { color: var( --_deep ); text-decoration: none; }
.mf__name a:hover { color: var( --_hot ); }

.mf__by {
	font-size: 14px;
	color: var( --_soft );
	margin: 0 0 9px;
}

.mf__by b { color: var( --_ink ); font-weight: 600; }

.mf__words {
	font-size: 15.5px;
	line-height: 1.5;
	color: var( --_soft );
	margin: 0 0 11px;
}

.mf__cost {
	font-family: var( --_say );
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	color: var( --_deep );
	margin: 0;
}

.mf__none {
	padding: 44px 0 20px;
	max-width: 44ch;
}

.mf__none-say {
	font-family: var( --_say );
	font-size: clamp( 20px, 2.6vw, 27px );
	line-height: 1.35;
	color: var( --_deep );
	margin: 0 0 18px;
}

.mf__whole {
	margin-top: clamp( 50px, 7vw, 92px );
	padding-top: 26px;
	border-top: 1px solid var( --_line );
	max-width: 52ch;
}

.mf__whole p {
	font-family: var( --_say );
	font-size: clamp( 17px, 2vw, 21px );
	line-height: 1.5;
	color: var( --_deep );
	margin: 0;
}

/* ─────────────────────────────────────────  THE BACK END  ────────────── */

/* A real working screen, not a page with a form on it. On a wide screen the
   rooms stand as a rail so she can see the whole business at once; on a phone
   they become one quiet scrolling row. */

.mb {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp( 20px, 3.6vw, 44px ) clamp( 16px, 4vw, 40px ) 100px;
}

@media ( min-width: 900px ) {
	.mb {
		display: grid;
		grid-template-columns: 232px minmax( 0, 1fr );
		gap: 0 clamp( 34px, 4vw, 64px );
		align-items: start;
	}
}

.mb__rooms {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0 0 4px;
	overflow-x: auto;
	scrollbar-width: thin;
	border-bottom: 1px solid var( --_line );
}

.mb__rooms li { flex: 0 0 auto; }

.mb__rooms a {
	display: block;
	padding: 10px 15px 13px;
	white-space: nowrap;
	font-size: 15px;
	color: var( --_soft );
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -5px;
}

.mb__rooms a:hover { color: var( --_deep ); }

.mb__rooms .is-here a,
.mb__rooms a[aria-current] {
	color: var( --_deep );
	border-bottom-color: var( --_hot );
	font-weight: 600;
}

@media ( min-width: 900px ) {
	.mb__rooms {
		display: block;
		position: sticky;
		top: 22px;
		margin: 0;
		padding: 0;
		border-bottom: 0;
		border-right: 1px solid var( --_line );
		overflow: visible;
	}

	.mb__rooms a {
		padding: 11px 20px 11px 0;
		margin: 0 -1px 0 0;
		font-size: 16px;
		border-bottom: 0;
		border-right: 3px solid transparent;
		text-align: right;
	}

	.mb__rooms .is-here a,
	.mb__rooms a[aria-current] { border-right-color: var( --_hot ); }
}

.mb h2,
.mb__k {
	font-family: var( --_say );
	font-weight: 500;
	color: var( --_deep );
	letter-spacing: -0.014em;
}

.mb h2 {
	font-size: clamp( 30px, 4.4vw, 46px );
	line-height: 1.06;
	margin: 0 0 26px;
	text-wrap: balance;
}

.mb__k {
	font-size: 13px;
	font-family: var( --_read );
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --_soft );
	margin: 40px 0 14px;
}

/* The figures. Never a chart and never a score — her law. Big, warm, and
   plainly countable rather than dressed as analytics. */

.mb__plain {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 2px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	background: var( --_line );
	border-radius: 8px;
	overflow: hidden;
}

.mb__plain li {
	background: var( --_glass );
	padding: 24px 26px 26px;
	font-size: 15px;
	line-height: 1.35;
	color: var( --_soft );
}

.mb__plain b {
	display: block;
	font-family: var( --_say );
	font-size: clamp( 38px, 5.4vw, 56px );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 0.94;
	color: var( --_deep );
	margin-bottom: 8px;
}

.mb__now {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	padding: 17px 20px;
	border-left: 4px solid var( --_hot );
	border-radius: 0 6px 6px 0;
	background: var( --_card );
	box-shadow: 0 1px 0 var( --_line );
	font-size: 17px;
	color: var( --_deep );
	margin: 0 0 26px;
}

.mb__now a { color: var( --_hot ); font-weight: 600; }

.mb__q { font-size: 15px; line-height: 1.55; color: var( --_soft ); margin: 0 0 16px; max-width: 58ch; }

.mb__todo { display: grid; gap: 8px; margin: 24px 0; max-width: 520px; }

.mb__todo a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	background: var( --_card );
	border: 1px solid var( --_line );
	border-radius: 7px;
	font-size: 16px;
	color: var( --_deep );
	text-decoration: none;
}

.mb__todo a::after { content: "→"; color: var( --_hot ); }
.mb__todo a:hover { border-color: var( --_hot ); }

.mb__card {
	padding: 22px 24px 24px;
	background: var( --_card );
	border: 1px solid var( --_line );
	border-radius: 8px;
	margin-bottom: 14px;
	max-width: 640px;
}

.mb__card b {
	font-family: var( --_say );
	font-size: 23px;
	font-weight: 500;
	color: var( --_deep );
	display: block;
	line-height: 1.2;
}

.mb__card span {
	display: inline-block;
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var( --_soft );
}

.mb__said {
	font-family: var( --_say );
	font-size: 19px;
	line-height: 1.48;
	color: var( --_ink );
	margin: 16px 0;
	padding-left: 16px;
	border-left: 2px solid var( --_hot );
}

.mb__list { list-style: none; margin: 0; padding: 0; max-width: 640px; }

.mb__one {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var( --_line );
}

.mb__one b { font-weight: 500; color: var( --_ink ); font-size: 17px; }

.mb__amount {
	font-family: var( --_say );
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	color: var( --_deep );
	white-space: nowrap;
}

.mb__go,
.mb button[type="submit"] {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid var( --_hot );
	padding: 5px 0;
	cursor: pointer;
	font-family: var( --_read );
	font-size: 16.5px;
	color: var( --_hot );
	text-decoration: none;
	display: inline-block;
}

.mb__go:hover,
.mb button[type="submit"]:hover { color: var( --_deep ); border-bottom-color: var( --_deep ); }

.mb label {
	display: block;
	font-size: 15px;
	color: var( --_soft );
	margin: 22px 0 7px;
}

.mb input[type="text"],
.mb input[type="date"],
.mb input[type="number"],
.mb select,
.mb textarea {
	width: 100%;
	max-width: 560px;
	box-sizing: border-box;
	appearance: none;
	background: var( --_card );
	border: 1px solid var( --_line );
	border-radius: 6px;
	padding: 13px 15px;
	font-family: var( --_read );
	font-size: 17px;
	color: var( --_ink );
}

.mb textarea { min-height: 150px; line-height: 1.55; }

.mb input:focus,
.mb select:focus,
.mb textarea:focus { outline: 0; border-color: var( --_hot ); }

.mb input:focus-visible,
.mb select:focus-visible,
.mb textarea:focus-visible { outline: 3px solid var( --_hot ); outline-offset: 2px; }

/* ─────────────────────────────────────  WHAT TO ASK FOR IT  ──────────── */

.wta { max-width: 640px; }

.wta__shout {
	font-family: var( --_say );
	font-weight: 500;
	font-size: clamp( 28px, 4.2vw, 42px );
	line-height: 1.08;
	letter-spacing: -0.014em;
	color: var( --_deep );
	margin: 0 0 16px;
	text-wrap: balance;
}

.wta__say { font-size: 17px; line-height: 1.55; color: var( --_soft ); margin: 0 0 34px; }

.wta__ask { margin-bottom: 22px; }

.wta__ask label {
	display: block;
	font-family: var( --_say );
	font-size: 20px;
	color: var( --_deep );
	margin: 0 0 9px;
}

/* Matched to the back end's own input rule so this one wins on order rather
   than by luck — an equal-weight rule earlier in the file was quietly turning
   every question here back into a boxed form field. */
.wta__ask input[type="text"] {
	width: 100%;
	max-width: 340px;
	box-sizing: border-box;
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var( --_line );
	border-radius: 0;
	padding: 5px 2px 9px;
	font-family: var( --_say );
	font-size: 26px;
	color: var( --_deep );
}

.wta__ask input[type="text"]::placeholder { color: var( --_soft ); opacity: 0.5; font-size: 20px; }
.wta__ask input[type="text"]:focus { outline: 0; border-bottom-color: var( --_hot ); }
.wta__ask input[type="text"]:focus-visible { outline: 3px solid var( --_hot ); outline-offset: 4px; }

/* The one question nobody has ever asked her. It is allowed to be bigger. */
.wta__ask--big { padding: 24px 0 6px; border-top: 1px solid var( --_line ); border-bottom: 1px solid var( --_line ); margin: 30px 0; }
.wta__ask--big label { font-size: clamp( 22px, 3.2vw, 28px ); }
.wta__ask--big input[type="text"] { font-size: clamp( 30px, 4.6vw, 40px ); border-bottom-color: var( --_hot ); }
.wta__ask--big .wta__q { margin-top: 12px; }

.wta__q { font-size: 14.5px; line-height: 1.5; color: var( --_soft ); margin: 0; }

.wta__go {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid var( --_hot );
	padding: 5px 0;
	margin-top: 8px;
	cursor: pointer;
	font-family: var( --_read );
	font-size: 16.5px;
	color: var( --_hot );
}

.wta__go:hover { color: var( --_deep ); border-bottom-color: var( --_deep ); }

.wta__answer {
	margin-top: 42px;
	padding: 30px 32px 32px;
	background: var( --_glass );
	border-radius: 10px;
}

.wta__lands,
.wta__ask-it {
	font-family: var( --_say );
	line-height: 1.16;
	color: var( --_deep );
	margin: 0 0 10px;
	text-wrap: balance;
}

.wta__lands { font-size: clamp( 21px, 3vw, 27px ); color: var( --_soft ); }
.wta__lands b { color: var( --_deep ); font-weight: 600; }

.wta__ask-it { font-size: clamp( 30px, 5vw, 46px ); margin-bottom: 24px; }
.wta__ask-it b { font-weight: 600; color: var( --_hot ); }

.wta__how { list-style: none; margin: 0 0 22px; padding: 0; }

.wta__how li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px solid var( --_line );
	font-size: 15.5px;
	color: var( --_soft );
}

.wta__how b {
	font-family: var( --_say );
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	color: var( --_ink );
	white-space: nowrap;
}

.wta__onto { margin-top: 8px; }
.wta__onto label { display: block; font-size: 15px; color: var( --_soft ); margin: 0 0 8px; }

.wta__onto select {
	width: 100%;
	max-width: 340px;
	box-sizing: border-box;
	appearance: none;
	background: var( --_card );
	border: 1px solid var( --_line );
	border-radius: 6px;
	padding: 12px 14px;
	font-family: var( --_read );
	font-size: 16.5px;
	color: var( --_ink );
	margin-bottom: 14px;
}

/* ────────────────────────────────────────  THE SHOPFRONT  ────────────── */

.ms { max-width: 900px; margin: 0 auto; padding: clamp( 20px, 4vw, 52px ) clamp( 16px, 4vw, 34px ) 80px; }

.ms__plate { border-radius: 4px; overflow: hidden; margin-bottom: 26px; }
.ms__plate svg, .ms__plate img { display: block; width: 100%; height: auto; }

/* ───────────────────────────────────────────  THE PLATES  ────────────── */

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

/* Already gone. Present, honest, and never offered. */
.mf__piece--gone .mf__pic { opacity: 0.55; }
.mf__piece--gone .mf__name a { color: var( --_soft ); }

.mf__gone {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --_soft );
	margin: 0;
}

/* ─────────────────────────────────────────  ONE PIECE  ────────────────── */

/* Where a single thing actually lives. The other half of the wall: the wall
   was written and styled, this was written and never dressed, so a buyer who
   pressed a piece met bare text and no way to take it home. It is one thing
   held up, never a product-detail slab of specifications — the maker's own
   words sit where a description would be, and the way home is a quiet word,
   never a filled pill, the same as everywhere else here. */

.pc {
	max-width: 980px;
	margin: 0 auto;
	padding: clamp( 24px, 5vw, 66px ) clamp( 18px, 4vw, 40px ) 96px;
	display: grid;
	grid-template-columns: minmax( 0, 380px ) 1fr;
	column-gap: clamp( 30px, 4.5vw, 60px );
	align-items: start;
}

.pc__pic {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
	background: var( --_glass );
}

.pc__pic svg,
.pc__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The words stand as one column beside the plate, centred against it so a
   short story does not leave a tall dead band under it, and their own margins
   set a tight rhythm — so one piece reads as deliberate, not a few lines
   floating against a picture. */
.pc__words {
	align-self: center;
	min-width: 0;
}

.pc__name {
	font-family: var( --_say );
	font-weight: 600;
	font-size: clamp( 30px, 4.4vw, 46px );
	line-height: 1.05;
	letter-spacing: -0.018em;
	color: var( --_deep );
	margin: 0 0 16px;
	text-wrap: balance;
}

/* The maker's own words, where a specification would be. */
.pc__said {
	font-family: var( --_read );
	font-size: clamp( 16px, 1.9vw, 19px );
	line-height: 1.6;
	color: var( --_ink );
	max-width: 40ch;
	margin: 0 0 20px;
}

.pc__said p { margin: 0 0 0.85em; }
.pc__said p:last-child { margin-bottom: 0; }

.pc__by {
	font-family: var( --_say );
	font-size: clamp( 17px, 2vw, 20px );
	line-height: 1.3;
	color: var( --_soft );
	margin: 0 0 18px;
}

.pc__by a { color: var( --_deep ); text-decoration: none; border-bottom: 1px solid var( --_line ); }
.pc__by a:hover { color: var( --_hot ); border-bottom-color: var( --_hot ); }

.pc__asks {
	font-family: var( --_say );
	font-size: clamp( 25px, 3.2vw, 34px );
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var( --_deep );
	margin: 0 0 22px;
}

/* The way home. Her law: a quiet, strong word, never a filled button. */
.pc__go {
	display: inline-block;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid var( --_hot );
	padding: 3px 1px 8px;
	cursor: pointer;
	font-family: var( --_say );
	font-size: clamp( 19px, 2.2vw, 24px );
	color: var( --_hot );
	text-decoration: none;
}

.pc__go:hover { color: var( --_deep ); border-bottom-color: var( --_deep ); }
.pc__go:focus-visible { outline: 3px solid var( --_hot ); outline-offset: 4px; }

/* Away, or write to the maker — soft, and never a dead end. */
.pc__away,
.pc__soon {
	font-family: var( --_say );
	font-size: clamp( 16px, 1.9vw, 19px );
	line-height: 1.45;
	color: var( --_soft );
	max-width: 38ch;
	margin: 0;
}

@media ( max-width: 720px ) {
	.pc { grid-template-columns: 1fr; }
	.pc__words { align-self: start; padding-top: 22px; }
}