/*
 * ── THE ENTRANCE ──────────────────────────────────────────────────────────
 *
 * Built at 379 first, because that is where she reads and where these people
 * live.
 *
 * ── HER RULING: RED AND PINK THROUGHOUT, WITH BITS OF BLACK ───────────────
 *
 * My first version drowned her neon market in near-black because I was
 * protecting the type. **The type can look after itself.** Black is the shadow
 * between the lanterns here, never the ground — the ground is her red, and the
 * pink is the light coming off it.
 *
 * The wash over her photograph is RED rather than dark, so the picture stays
 * lit and the words sit inside the same world rather than on a slab over it.
 */
.way { background: #D9103F; }

/*
 * ── HER PICTURE, WHOLE AND UNTOUCHED ──────────────────────────────────────
 *
 * Edge to edge at its own proportions, nothing over it. The one she chose
 * carries her own mark and her own line inside it, so the page says neither
 * again until far lower down.
 */
.way-hero { position: relative; margin: 0; }

/*
 * ── HER MARK, BIG ENOUGH TO BE HER NAME ───────────────────────────────────
 *
 * Her ruling: **make it bigger.** At full width her scene puts the bubble and
 * the wordmark at about a fifth of the screen, which reads as a detail.
 *
 * A narrow screen comes IN to the middle, where the mark is, and the market
 * becomes the setting around it. **The frame is taller than the photograph so
 * the whole mark fits inside it** — bubble, wordmark and her line — rather than
 * the wordmark being sliced by the edge, which is what a plain scale did.
 *
 * The whole scene returns the moment there is width to hold it.
 */
/*
 * ── HER LINE WAS BEING CUT IN HALF, AND THE CROP WAS DOING IT ─────────────
 *
 * Her ruling, 6 September 2026: **ASK. CONNECT. GET IT DONE. is great, but on
 * the mobile it is cut off.**
 *
 * It was, and this rule was the whole reason. Her photograph is 1600 by 914.
 * A `4 / 5` frame is taller than it is wide, so `cover` fills the height and
 * **throws away the sides** — at 379 it kept about 46 per cent of the width,
 * and her neon sign is 47 per cent of it. It lost a word off each end, every
 * time, on the only screen she reads on.
 *
 * The frame is now WIDER than it is tall on a phone, so the crop that happens
 * is a sliver of stall at each edge rather than her own sentence. Measured
 * rather than guessed: at 379 the visible band runs from 14 to 86 per cent of
 * the picture, and the sign, the bubble and the wordmark all sit inside it
 * whole.
 *
 * It still comes IN on a narrow screen, which was her earlier ruling — **make
 * it bigger** — just never at the cost of the words baked into it.
 */
.way-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 50%;
}

@media (min-width: 620px) {
	.way-hero img { aspect-ratio: 16 / 9; object-position: 50% 50%; }
}

@media (min-width: 1100px) {
	.way-hero img { aspect-ratio: auto; }
}

/*
 * ── AND PINK UNDERNEATH ───────────────────────────────────────────────────
 *
 * Her ruling: **pink underneath, and it is way too dark.** The near-black held
 * the words and killed everything around them. A rose ground carries her neon
 * down off the photograph instead of stopping it dead at the edge.
 */
.way-in {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 2.4rem 1.25rem 2.8rem;
	background:
		radial-gradient(120% 90% at 8% 0%, #FF5C8F 0%, rgba(255,92,143,0) 62%),
		linear-gradient(170deg, #E8447A 0%, #C42B60 46%, #E8103E 100%);
	color: #FFF1F6;
}

/*
 * Who this is for, said beside the invitation rather than in front of it. At
 * the top it read as a door policy — **the first thing anybody met was a rule
 * about who they had to be.**
 */
.way-who {
	margin: .5rem 0 0;
	color: #FFD9E6;
	font: 500 clamp(.95rem, 4vw, 1.02rem)/1.5 var(--font-util, system-ui, sans-serif);
	opacity: 0;
	animation: way-rise .85s cubic-bezier(.2,.7,.2,1) 1.5s forwards;
}

.way-head {
	margin: 0 0 .75rem;
	color: #fff;
	font: 700 clamp(2rem, 9.4vw, 3.4rem)/1.05 var(--font-head, system-ui);
	letter-spacing: -.02em;
	text-wrap: balance;
	opacity: 0;
	animation: way-rise .85s cubic-bezier(.2,.7,.2,1) .15s forwards;
}

.way-under {
	margin: 0 0 1.5rem;
	max-width: 34rem;
	color: #FFE0EC;
	font: 400 clamp(1rem, 4.2vw, 1.08rem)/1.6 var(--font-util, system-ui, sans-serif);
	text-wrap: pretty;
	opacity: 0;
	animation: way-rise .85s cubic-bezier(.2,.7,.2,1) .4s forwards;
}

/*
 * ── HER CARDS, AND THEY DO THE ARGUING ────────────────────────────────────
 *
 * Real roles, real suburbs, real rates. **A rate on a card settles whether this
 * is worth an afternoon** faster than any sentence about worth, which is why
 * they lead and why taking them off was the worst of my edits.
 *
 * ── ALL FOUR ON THE SCREEN, RATHER THAN TWO AND A HALF ────────────────────
 *
 * They scrolled sideways and the second card was cut through its own price,
 * which is the one part of a card that has to be whole. **A rate sliced in half
 * is worse than a rate not shown** — and two of the four were off the edge
 * entirely, so half her argument was invisible.
 *
 * Two by two at 379. Every role, every suburb and every rate readable without
 * a swipe, and a straight row the moment there is width for it.
 */
.cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
	opacity: 0;
	animation: way-rise .85s cubic-bezier(.2,.7,.2,1) .85s forwards;
}

.cards li { margin: 0; }

.card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .7rem;
	height: 100%;
	padding: .8rem .85rem .75rem;
	border-radius: 15px;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(70, 4, 16, .35);
}

.card--pink  { background: #FFD9E6; color: #E8103E; }
.card--cream { background: #FFF7FA; color: #E8103E; }
.card--red   { background: #D9103F; color: #FFD9E6; box-shadow: 0 10px 26px rgba(42,11,20,.4); }
.card--dark  { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); }

.card-role {
	font: 700 clamp(.86rem, 3.7vw, .98rem)/1.25 var(--font-util, system-ui, sans-serif);
	letter-spacing: -.01em;
	text-wrap: balance;
}

.card-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
	font: 500 clamp(.74rem, 3.2vw, .82rem)/1.3 var(--font-util, system-ui, sans-serif);
	opacity: .8;
}

/* The rate never wraps and never shrinks past reading. It is the argument. */
.card-meta b {
	font-weight: 700;
	font-size: clamp(.86rem, 3.6vw, .95rem);
	white-space: nowrap;
	opacity: 1;
}

.way-doors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.4rem;
	opacity: 0;
	animation: way-rise .85s cubic-bezier(.2,.7,.2,1) 1.1s forwards;
}

.way-go--first {
	padding: 1.05rem 2rem;
	border-radius: 999px;
	background: #D9103F;
	color: #FFD9E6;
	font: 700 clamp(1.02rem, 4.3vw, 1.1rem)/1.15 var(--font-util, system-ui, sans-serif);
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(80, 6, 28, .35);
}

.way-go--quiet {
	color: #FFF1F6;
	font: 500 clamp(.98rem, 4.1vw, 1.04rem)/1.2 var(--font-util, system-ui, sans-serif);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * ── HER LINE, IN REAL TYPE ────────────────────────────────────────────────
 *
 * It was worn small as a mark. **It is the name of what this place does** and
 * it was only painted into a photograph, which counts for nothing anywhere it
 * matters. Set properly it is read by a person, a search engine and a screen
 * reader alike — and it can carry the neon her picture already gave it.
 */
.way-mark {
	margin: 1.8rem 0 0;
	color: #FFE0EC;
	font: 700 clamp(.9rem, 4.1vw, 1.1rem)/1.35 var(--font-util, system-ui, sans-serif);
	letter-spacing: .24em;
	text-transform: uppercase;
	opacity: 0;
	animation: way-rise .85s cubic-bezier(.2,.7,.2,1) 1.35s forwards;
}

@keyframes way-rise { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.way-head, .way-under, .cards, .way-doors, .way-mark {
		opacity: 1; transform: none; animation: none;
	}
}

@media (min-width: 900px) {
	.way-in { padding: 3.2rem clamp(2rem, 6vw, 5rem) 3.6rem; }
	.cards { grid-template-columns: repeat(4, 1fr); gap: .8rem; }
}

/*
 * ── ARRIVING FROM LOCALILLY ───────────────────────────────────────────────
 *
 * The one screen where somebody is holding three years of their own work in
 * their hands. **It is warm before it is administrative**, so what she earned
 * is read first and the money is the last card rather than the first.
 */
.arrive {
	max-width: 40rem;
	margin: 0 auto;
	padding: 2.6rem 1.25rem 4rem;
	color: #FFE9F1;
}

.arrive-eyebrow {
	margin: 0 0 .5rem;
	color: #FF9EC4;
	font: 700 .78rem/1.2 var(--font-util, system-ui, sans-serif);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.arrive-head {
	margin: 0 0 .8rem;
	color: #fff;
	font: 700 clamp(2rem, 9vw, 3rem)/1.06 var(--font-head, var(--font-util, system-ui));
	letter-spacing: -.03em;
	text-wrap: balance;
}

.arrive-lede {
	margin: 0 0 1.8rem;
	font-size: clamp(1.02rem, 4.2vw, 1.1rem);
	line-height: 1.62;
	text-wrap: pretty;
}

.arrive-card {
	margin: 0 0 1.1rem;
	padding: 1.25rem 1.2rem 1.35rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 158, 196, .28);
}

/* What she earned, lit, because it is the reason any of this matters. */
.arrive-card--lit {
	background: linear-gradient(140deg, rgba(255,62,118,.22), rgba(255,158,196,.12));
	border-color: rgba(255, 158, 196, .55);
}

.arrive-card--money { border-color: rgba(255, 255, 255, .35); }

.arrive-sub {
	margin: 0 0 .7rem;
	color: #FFC7DE;
	font: 700 clamp(1.05rem, 4.4vw, 1.2rem)/1.2 var(--font-head, var(--font-util, system-ui));
}

.arrive-goodwill {
	margin: 0 0 .5rem;
	color: #fff;
	font: 700 clamp(1.15rem, 5vw, 1.5rem)/1.3 var(--font-head, var(--font-util, system-ui));
	text-wrap: balance;
}

.arrive-note { margin: .5rem 0 0; font-size: .96rem; line-height: 1.55; opacity: .86; }
.arrive-note--last { margin-top: 1.2rem; text-align: center; }

.arrive-card .ask { display: block; margin: 0 0 .9rem; }
.arrive-card .ask span { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; opacity: .85; }

.arrive-card input[type=text],
.arrive-card input[type=number],
.arrive-card textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid rgba(255, 158, 196, .4);
	border-radius: 12px;
	background: #fff;
	color: #1F1418;
	font: 400 1.02rem/1.5 var(--font-util, system-ui, sans-serif);
}

.arrive-list, .arrive-rates { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.arrive-rates li { display: grid; grid-template-columns: 1fr 6rem; gap: .5rem; }
.arrive-list label { display: flex; gap: .55rem; align-items: baseline; font-size: 1rem; }

.ask--tick { display: flex; gap: .6rem; align-items: baseline; margin-top: .8rem; font-size: .98rem; }
.ask--tick a { color: #FFC7DE; }

.arrive-doors { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: 1.6rem; }

.arrive-go {
	display: inline-block;
	padding: 1.05rem 2rem;
	border: 0;
	border-radius: 999px;
	background: #FFF3F7;
	color: #E8103E;
	font: 700 clamp(1.02rem, 4.3vw, 1.1rem)/1.15 var(--font-util, system-ui, sans-serif);
	text-decoration: none;
	cursor: pointer;
}

.arrive-not { color: #FFD8E6; text-decoration: underline; text-underline-offset: 4px; font-size: 1rem; }

/*
 * ── WHAT IT COSTS, SAID ON THE PAGE ───────────────────────────────────────
 *
 * Twelve dollars a month from a young person and nothing from anybody else is
 * the whole business, so it is a section rather than a footnote — and the two
 * boundaries sit inside it rather than on a policy page nobody opens.
 */
.sec--money { padding: 3rem 1.25rem; background: #D9103F; color: #FFE9F1; }
.sec--money .in { max-width: 46rem; margin: 0 auto; }

.money-eyebrow {
	margin: 0 0 .5rem;
	color: #FF9EC4;
	font: 700 .78rem/1.2 var(--font-util, system-ui, sans-serif);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.money-head {
	margin: 0 0 .5rem;
	color: #fff;
	font: 700 clamp(1.5rem, 6.4vw, 2.2rem)/1.15 var(--font-head, system-ui);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.money-cut {
	margin: 0 0 1.6rem;
	color: #FF9EC4;
	font: 600 clamp(1.05rem, 4.5vw, 1.2rem)/1.4 var(--font-util, system-ui, sans-serif);
}

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

.money-rows li {
	display: grid;
	grid-template-columns: 1fr;
	gap: .2rem;
	padding: .9rem 1rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 158, 196, .22);
}

.money-rows li.is-lit {
	background: rgba(255, 62, 118, .16);
	border-color: rgba(255, 158, 196, .55);
}

.money-rows strong { color: #FFC7DE; font: 700 .82rem/1.3 var(--font-util, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.money-rows span { font-size: .99rem; line-height: 1.55; opacity: .92; }

.money-plain { margin: .5rem 0 0; font-size: .97rem; line-height: 1.6; opacity: .84; }

@media (min-width: 620px) {
	.money-rows li { grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
}

/* What each side pays, on its own door. */
.side-cost { margin: .2rem 0 .3rem; font-size: .95rem; line-height: 1.5; opacity: .82; }

/* ══ THE CARDS AS A MOMENT RATHER THAN FOUR LABELS ═════════════════════════
 *
 * Her ruling: I don't just want those buttons, they should be like people or
 * something, there's something there, that's a moment.
 *
 * **The rate is the biggest thing on the card**, because the rate is what makes
 * a person stop. Then what it is, then where and when. A card should read the
 * way somebody would say it out loud.
 */
.cards {
	gap: .7rem;
	margin-top: 1.4rem;
}

.card {
	display: grid;
	align-content: start;
	gap: .18rem;
	padding: .95rem 1rem 1rem;
	border-radius: 18px;
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease;
}

.card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(42, 11, 20, .3); }

.card-pay {
	font: 700 clamp(1.15rem, 5vw, 1.5rem)/1 var(--font-head, var(--font-util));
	letter-spacing: -.01em;
}

.card-role {
	font: 700 clamp(.9rem, 3.6vw, 1rem)/1.3 var(--font-util);
	text-wrap: balance;
}

.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .25rem;
	font: 500 clamp(.78rem, 3.1vw, .86rem)/1.3 var(--font-util);
	opacity: .82;
}

.card-meta b { font-weight: 700; opacity: 1; }

.card-now {
	justify-self: start;
	margin-bottom: .25rem;
	padding: .16rem .5rem;
	border-radius: 999px;
	background: #FFF3F7;
	color: #E8103E;
	font: 700 .68rem/1.5 var(--font-util);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.card--now { outline: 2px solid #FFF3F7; outline-offset: -2px; }

.cards-under {
	margin: .85rem 0 0;
	color: #FFD9E6;
	font: 500 clamp(.84rem, 3.2vw, .92rem)/1.45 var(--font-util);
	text-wrap: pretty;
}

@media (min-width: 46rem) {
	.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══ HER FIVE WORDS ════════════════════════════════════════════════════════
 *
 * PAID · FLEXIBLE · LOCAL · CREATIVE · THIS WEEK, off the board she sent,
 * standing under her own heading rather than over her photograph.
 *
 * What was here before this was a whole hero of mine — a second headline
 * ("Something's Waiting For You"), its own pink ground and its own pair of
 * doors. She struck all three: **you do not say that, the heading was Local
 * Work That Fits Around You.** Her heading is the heading, her doors are
 * already below, and the glass is the only part of mine that stays.
 *
 * Built from --shine-glass-edge and --shine-cast, which this world already
 * uses, rather than a glass invented for one section. They are words, not
 * controls: no href, no hover that pretends.
 */
.waiting-pops {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.55rem, 2.4vw, .95rem);
	margin: clamp(1rem, 4vw, 1.5rem) 0 clamp(.2rem, 1.5vw, .5rem);
	padding: 0;
	list-style: none;
}

/*
 * ── THE CLASS IS waiting-pop, NOT pop ─────────────────────────────────────
 *
 * `.pop` already exists in uniiverse.css, left from the pops that came off
 * her night market on 29 September, and it is `position: absolute`. That
 * sheet loads last, so every one of these went absolute, the list collapsed
 * and the words piled on top of each other. My grep anchored `.pop` to the
 * start of a line and found nothing, which is the exact shape of a false
 * absence; the browser found it in one question. Renamed rather than
 * out-specified, because winning a fight with a stale rule leaves the fight
 * there for the next person.
 */
.waiting-pop {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: clamp(.58rem, 2.4vw, .9rem) clamp(1rem, 4.2vw, 1.6rem);
	border-radius: 999px;
	background:
		linear-gradient(168deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .28) 100%);
	border: 1.5px solid rgba(255, 108, 160, .55);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .82),
		inset 0 -8px 18px rgba(217, 0, 78, .10),
		0 16px 34px -20px rgba(200, 16, 60, .42);
	-webkit-backdrop-filter: blur(7px) saturate(150%);
	backdrop-filter: blur(7px) saturate(150%);
	color: var(--shine-deep, #E90255);
	font: 600 clamp(.95rem, 4vw, 1.35rem)/1 var(--font-say, system-ui, sans-serif);
	letter-spacing: .005em;
}

/* The tail. One triangle under the left shoulder, the same glass. */
.waiting-pop::after {
	content: "";
	position: absolute;
	left: clamp(1rem, 3.8vw, 1.6rem);
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: inherit;
	border-right: 1.5px solid rgba(255, 108, 160, .55);
	border-bottom: 1.5px solid rgba(255, 108, 160, .55);
	border-bottom-right-radius: 3px;
	transform: rotate(45deg) skew(-6deg, -6deg);
	-webkit-backdrop-filter: inherit;
	backdrop-filter: inherit;
}

/*
 * Not all one size, because her board is not. CREATIVE is the big one in her
 * drawing and it stays the big one. A row of five identical pills would read
 * as a component rather than as her hand.
 */
.waiting-pop--creative { font-size: clamp(1.12rem, 5.2vw, 1.7rem); padding-inline: clamp(1.25rem, 5vw, 1.9rem); }
.waiting-pop--paid     { font-size: clamp(1.02rem, 4.4vw, 1.45rem); }
.waiting-pop--flexible { font-size: clamp(.98rem, 4.1vw, 1.3rem); }
.waiting-pop--local    { opacity: .95; }
.waiting-pop--week     { opacity: .95; }

/* A hair of tilt each, so they sit like objects rather than like a list. */
.waiting-pop--paid     { transform: rotate(-1.4deg); }
.waiting-pop--flexible { transform: rotate(1.1deg); }
.waiting-pop--local    { transform: rotate(-.8deg); }
.waiting-pop--creative { transform: rotate(.6deg); }
.waiting-pop--week     { transform: rotate(-1.1deg); }

/* ── THE RIGHT PERSON MIGHT BE TWO STREETS AWAY ────────────────────────────
 *
 * Hers, 10 October 2026, over the four example shifts that had been built on
 * 22 September and never put on a page. Set in her own display face at the
 * size of a statement, because it is the argument this whole world makes.
 */
.two-streets {
	margin: clamp(1.8rem, 6vw, 2.8rem) 0 clamp(.9rem, 3vw, 1.2rem);
	max-width: 18ch;
	color: var(--shine-deep, #E90255);
	font: 400 clamp(1.7rem, 7.6vw, 2.9rem)/1.06 var(--font-head, Georgia, serif);
	letter-spacing: -.022em;
	text-wrap: balance;
}

/*
 * ── THE LINE UNDER THE SHIFTS WAS WRITTEN FOR A DARK GROUND ───────────────
 *
 * .cards-under is white at 80 per cent, which was right when these cards sat
 * over the night market. They stand on her pale pink page now, so it was
 * white on near-white and effectively gone. Measured rather than squinted
 * at: rgba(255,255,255,.8) on an unpainted ground.
 */
.way-in .cards-under {
	color: var(--shine-deep, #E90255);
	opacity: .85;
	font: 400 clamp(.98rem, 4vw, 1.1rem)/1.5 var(--font-say, system-ui, sans-serif);
	max-width: 42ch;
}

/* ══ THE SHIFTS ════════════════════════════════════════════════════════════
 *
 * Hers, three times, and the third was: **oh my God, these are atrocious.**
 *
 * She was right every time and the fault was the same one getting worse: I
 * kept scaling her signs UP to fill a phone. Measured off her own board, at
 * 1586 across, each sign is about 235 wide by 105 tall — **a ratio of 2.2 to
 * 1, wide and short** — with the job at about 15px and the foot band about a
 * quarter of the height. What I shipped was 347 wide by over 200 tall with
 * the job at 24px, filling the plate edge to edge. Same idea, three times the
 * weight: a sign-maker's catalogue rather than her board.
 *
 * So the proportion is held rather than the width: one sign per row on a
 * phone at 2.2 to 1, which at 347 across is about 155 tall, with the job
 * small enough to sit inside it with air around it.
 *
 * Her avatars sit ABOVE the signs on her board, on a line, not pinned inside
 * a corner — so they do here too, overlapping the top edge.
 *
 * (Why the first one was a composite nobody drew: four generations of `.card`
 * are stacked in uniiverse.css. These carry their own names.)
 */
.shifts {
	display: grid;
	/*
	 * TWO ACROSS ON A PHONE, four on a desk. Her board puts four signs
	 * across its width, and that density is half of what makes it read as a
	 * market of jobs rather than as four banners. One sign per row at full
	 * phone width lost it — each plate became a slab with the job marooned
	 * in the top-left and nothing else on it.
	 */
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.4rem, 5vw, 1.7rem) clamp(.6rem, 2.6vw, .9rem);
	margin: clamp(1.4rem, 5vw, 1.8rem) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 76rem) { .shifts { grid-template-columns: repeat(4, 1fr); } }

.shifts > li { margin: 0; padding: 0; list-style: none; }

.sign {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1.58 / 1;
	min-height: 0;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 10px 24px -14px rgba(150, 0, 54, .42);
	transition: transform 220ms var(--shine-ease, ease), box-shadow 220ms var(--shine-ease, ease);
}

@media (min-width: 30rem) { .sign { aspect-ratio: 1.9 / 1; } }
@media (min-width: 76rem) { .sign { aspect-ratio: 2.1 / 1; } }

.sign:hover,
.sign:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -14px rgba(150, 0, 54, .5);
}

/* ── one material each, the way her board does it ─────────────────────── */

.sign--pink  { background: #FF2E72; color: #FFFFFF; --band: rgba(0, 0, 0, .16); --rule: rgba(255,255,255,.26); }
.sign--cream { background: #FFFFFF; color: #D9004E; --band: rgba(217, 0, 78, .06); --rule: rgba(217,0,78,.14); box-shadow: inset 0 0 0 1px rgba(217,0,78,.13), 0 10px 24px -14px rgba(150,0,54,.3); }
.sign--steel { background: linear-gradient(168deg, #F3F3F6 0%, #DADBE1 54%, #EEEEF2 100%); color: #26262E; --band: rgba(20, 20, 30, .08); --rule: rgba(20,20,30,.14); }
.sign--deep  { background: #C80047; color: #FFFFFF; --band: rgba(0, 0, 0, .18); --rule: rgba(255,255,255,.24); }

/* ── the job: small, and with air around it ───────────────────────────── */

.sign-role {
	display: flex;
	align-items: center;
	flex: 1;
	padding: clamp(.6rem, 2.6vw, .85rem) clamp(.7rem, 3vw, 1.05rem);
	max-width: 14ch;
	font: 700 clamp(.76rem, 3.2vw, .95rem)/1.22 var(--font-util, system-ui, sans-serif);
	letter-spacing: .03em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* ── the foot: a thin band, the place left, the money right ───────────── */

.sign-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .7rem;
	padding: clamp(.36rem, 1.6vw, .5rem) clamp(.7rem, 3vw, 1.05rem);
	background: var(--band);
	border-top: 1px solid var(--rule);
	border-radius: 0 0 10px 10px;
}

.sign-where {
	font: 600 clamp(.56rem, 2.3vw, .66rem)/1.3 var(--font-util, system-ui, sans-serif);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sign-pay {
	white-space: nowrap;
	font: 700 clamp(.72rem, 3vw, .86rem)/1 var(--font-util, system-ui, sans-serif);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* ── the face, above the plate, the way her board hangs them ──────────── */

.sign-face {
	position: absolute;
	top: 0;
	right: clamp(.6rem, 2.6vw, .9rem);
	transform: translateY(-42%);
	width: clamp(1.9rem, 7.4vw, 2.3rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 2.5px #FFF3F7, 0 4px 10px -4px rgba(60, 0, 22, .45);
}

.sign-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sign-now {
	position: absolute;
	top: 0;
	left: clamp(.95rem, 3.8vw, 1.15rem);
	transform: translateY(-50%);
	padding: .24rem .6rem;
	border-radius: 999px;
	background: #16000A;
	color: #FFFFFF;
	font: 700 .62rem/1 var(--font-util, system-ui, sans-serif);
	letter-spacing: .07em;
	text-transform: uppercase;
}

.shifts-under {
	margin: clamp(1rem, 3.6vw, 1.3rem) 0 0;
	max-width: 44ch;
	color: var(--shine-deep, #E90255);
	opacity: .82;
	font: 400 clamp(.95rem, 3.8vw, 1.05rem)/1.5 var(--font-say, system-ui, sans-serif);
}

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