/*
 * The LOIS look, assembled from the tokens in style.css.
 *
 * Only what the parent cannot know: the mark, the two faces that belong to the
 * entrance, and the colour choices on particular sections.
 */

/*
 * The mark is set from PHP, never here.
 *
 * A url() inside a custom property resolves against the page rather than the
 * stylesheet, so a relative path here quietly looks in the wrong folder and the
 * logo simply fails to appear. functions.php sets it to an absolute URL.
 */

/* ---------- the entrance ---------- */

/* Six Caps. The entrance only, and only very large — it collapses below 50px. */
.six {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: .055em;
	/*
	 * Room between the lines. At .9 the line-height was shorter than the type
	 * was tall, so a statement wrapping to two lines closed up on itself.
	 */
	line-height: 1.0;
	margin: 0;
	color: #fff;
	font-size: clamp(58px, 18vw, 118px);
	/* Even lines, never a single word stranded on its own. */
	text-wrap: balance;
	text-shadow: 0 1px 0 #D8B8E8, 0 2px 0 #C29CDA, 0 3px 0 #AC80CC, 0 4px 0 #9668BE,
		0 10px 20px rgba(18,3,34,.5);
}

/*
 * Mr Dafoe. One big heading per screen and no more — it stops being a moment
 * the second it repeats. Red face, a whisper of white directly underneath,
 * pink behind that. A full four-sided outline reads as a baseball shirt.
 */
.hand {
	font-family: var(--font-hand);
	display: inline-block;
	/*
	 * The statement stands clear of the line above it. Tight against it the
	 * two read as one block of text rather than a setup and its answer — and
	 * on a phone, where both wrap to two lines, they collide.
	 */
	margin: .42em 0 0;
	font-size: clamp(48px, 14.5vw, 112px);
	text-wrap: balance;
	line-height: 1.18;
	transform: scaleY(1.2);
	transform-origin: top center;
	color: var(--red);
	text-shadow: 0 2px 0 #fff, 3px 5px 0 var(--fuchsia), 0 12px 24px rgba(18,3,34,.45);
	/*
	 * Room for the mask to work in.
	 *
	 * A script face overhangs its own box at both ends, and its shadow sits
	 * outside it entirely. A mask clips to the box, so the first and last
	 * strokes were being cut and only filled in once the edge had passed.
	 * The padding gives the mask somewhere to start and finish that is not
	 * on top of a letter.
	 */
	padding: 0.06em 0.16em 0.22em;
}

/* ---------- section grounds ---------- */

.on-purple { background: var(--purple); }
.on-purple-deep { background: var(--purple-deep); }
.on-purple-lit { background-color: var(--purple-lit); }
.on-fuchsia { background: var(--fuchsia); }
.on-red { background: var(--red); }

/* ---------- ink ---------- */

.ink-cream { color: var(--cream); }
.ink-white { color: #fff; }
.ink-pink { color: #FFD1E9; }
.ink-purple-deep { color: var(--purple-deep); }
.ink-fuchsia-lit { color: var(--fuchsia-lit); }
.ink-red-lit { color: var(--red-lit); }

/* On fuchsia the heading takes its own lift — a white edge rather than a dark one. */
.head--on-fuchsia {
	color: var(--purple);
	text-shadow: 0 2px 0 rgba(255,255,255,.5), 0 12px 24px rgba(120,0,60,.28);
}

/* The Atelier runs straight into its numbered band, so it closes tighter. */
.sec--to-band { padding-bottom: clamp(26px, 3vw, 50px); }

/* ---------- the roles index ---------- */

/* The whole card carries the colour, never a stripe on its edge. */
.card--purple { background: var(--purple); }
.card--fuchsia { background: var(--fuchsia-deep); }
.card--red { background: var(--red-deep); }

.card--purple .org i { background: var(--fuchsia-lit); }
.card--fuchsia .org i { background: #FFD1E9; }
.card--red .org i { background: #FF9ECF; }

/* Work pattern reads as colour first. Light pills, legible on every card. */
.pat--full { background: #FFFFFF; }
.pat--three { background: #FFD1E9; }
.pat--remote { background: #C9A0E8; }
.pat--hybrid { background: #FFB3DC; }
.pat--board { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.66); }

/* The empty search carries the same two faces as the entrance. */
.ma .six { font-size: clamp(40px, 11vw, 104px); }
.ma .hand { font-size: clamp(34px, 9.5vw, 84px); }

/* ---------- the line above the search ---------- */

/*
 * It moved off the entrance and onto the working page. A woman arriving needs
 * to know what this is at the moment she is about to use it, not as a footnote
 * under a headline she has already read.
 */
.anchor--page {
	margin: 0 auto clamp(22px, 3.4vw, 40px);
	text-align: center;
	max-width: 1020px;
}

/*
 * Both statements are the same size, always. They are a matched pair — one
 * answering the other — and tapering the second breaks that. The longer line
 * reading as slightly larger is a fact of the words, not a fault to correct.
 */

/* ---------- the entrance on a phone ---------- */

/*
 * Sizes lead from the narrow end. On a phone both statements wrap to two
 * lines, so the space between the groups has to come down or the screen
 * pulls apart and the first one runs over.
 */
@media (max-width: 640px) {
	:root {
		--entrance-gap: 6px;
		--mark-space: 26px;
		--anchor-space: 30px;
	}

	.mark { width: min(56vw, 250px); }
	.six  { font-size: clamp(46px, 15.5vw, 74px); }
	.hand {
		font-size: clamp(40px, 13vw, 62px);
		margin-top: .3em;
		/* The second line comes up. At 1.18, stretched 1.2 taller again, a
		   two-line statement dropped far below where it should sit. */
		line-height: 1.0;
	}
}

/* The doorway labels take pure white, not cream — they are small, and every
   bit of contrast counts at that size. */
.door .eyebrow { color: #fff; }

/* ─────────────────────────────────────────────────────────────
   ONE ROLE — the page every search leads to.

   The Atelier's answers, arranged. Words sit on their own ground,
   never over a photograph, and each move takes its own colour so
   nothing repeats down the page.
   ───────────────────────────────────────────────────────────── */

/*
 * The page rides the homepage's own language — .sec for the bloom, .band for
 * the numbered moves, .head and .lift for every heading, .stack for the close.
 * Only what is genuinely new to this page is written here.
 */

.role-page .head { font-size: clamp(34px, 9.4vw, 76px); }

/* On fuchsia and red the heading's dark lift turns muddy, so it takes a white edge. */
.role-hero.on-fuchsia .head,
.role-hero.on-red .head {
	text-shadow: 0 2px 0 rgba(255,255,255,.42), 0 5px 0 rgba(120,0,60,.3), 0 16px 30px rgba(90,0,44,.4);
}
.role-hero.on-fuchsia .eyebrow { color: var(--purple-deep); }
.role-hero.on-red .eyebrow { color: #FFD1E9; }

.role-hero .facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 18px 0 0;
	align-items: center;
}

/* The sentence under a heading, wherever it appears. */
.role-say {
	margin: 20px 0 0;
	max-width: 34ch;
	font-size: clamp(16px, 4.4vw, 19px);
	line-height: 1.5;
	font-weight: 600;
}

/* The Heartbeat, and Why You. A statement rather than body copy. */
.beat-line {
	margin: 14px 0 0;
	max-width: 22ch;
	font-family: var(--font-head);
	text-transform: uppercase;
	/*
	 * Room between the lines. At 1.02 the lift below one line landed on top of
	 * the next, and the statement read as though it had been printed twice.
	 */
	line-height: 1.1;
	font-size: clamp(26px, 7.2vw, 54px);
	color: #fff;
	text-shadow: 0 2px 0 rgba(255,255,255,.36), 0 14px 26px rgba(90,0,44,.34);
}

/* Long statements step down rather than shout for five lines. */
/*
 * Smaller type carries the same six pixels of lift, so the shadow reaches
 * proportionally further and lands on the line beneath. The leading opens as
 * the type steps down to keep the shadow inside its own line.
 */
.beat-line--long { font-size: clamp(22px, 5.6vw, 40px); max-width: 26ch; line-height: 1.2; }
.beat-line--small { font-size: clamp(19px, 4.6vw, 32px); max-width: 30ch; line-height: 1.26; }

.on-purple-lit .beat-line {
	text-shadow: 0 2px 0 rgba(30,4,52,.5), 0 4px 0 rgba(30,4,52,.26), 0 14px 26px rgba(18,3,34,.5);
}

.paybig { margin: 14px 0 0; font-size: clamp(34px, 10vw, 72px); line-height: 1.08; }

/* The moves carry a whole answer, so the sub line reads as prose. */
.role-page .rs {
	max-width: 40ch;
	text-transform: none;
	line-height: 1.5;
}

/*
 * The question sets it up plainly and one word answers in her hand. The whole
 * line in script asked her to read a signature; one word makes it a moment.
 */
.tango-go { margin: clamp(26px, 5vw, 44px) 0 0; }

.tango-lead {
	display: block;
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: clamp(22px, 6vw, 40px);
	color: var(--cream);
	text-shadow: var(--lift);
}

.tango-go .hand {
	display: block;
	margin: -.06em 0 0 .18em;
	font-size: clamp(56px, 17vw, 116px);
}

.role-tango .apply, .studio .apply, .atelier .apply {
	display: inline-block;
	margin: clamp(20px, 4vw, 34px) 0 0;
	padding: 18px 30px;
	background: var(--act-ground);
	box-shadow: var(--act-shadow);
	color: var(--act-ink);
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(17px, 4.6vw, 22px);
	text-decoration: none;
	transition: transform .3s var(--float-ease), background .3s ease;
}
.role-tango .apply:hover,
.role-tango .apply:focus-visible { background: var(--red); transform: translateY(-2px); }

.role-back { padding: 0 0 54px; }
.role-back .in { max-width: var(--measure); margin-inline: auto; padding-inline: 20px; }
.role-back a {
	color: var(--fuchsia-lit);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

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

/* ─────────────────────────────────────────────────────────────
   HER PICTURES

   Bright, at full strength, and nothing ever laid across a face.
   No wash, no tint, no type on top.
   ───────────────────────────────────────────────────────────── */

.pic { margin: 0; }
.pic img { display: block; width: 100%; height: auto; }

.pic--wide img {
	width: 100%;
	max-height: clamp(220px, 42svh, 460px);
	object-fit: cover;
	object-position: center 28%;
}

/* Beside the heartbeat, never behind it. */
.pic--beat {
	margin: clamp(22px, 5vw, 36px) 0 0;
	max-width: 520px;
	box-shadow: 0 18px 40px rgba(120, 0, 46, .34);
}

/* ─────────────────────────────────────────────────────────────
   HER OWN ATELIER — one screen at a time.

   She answers, and LOIS offers language back. The offer is drawn
   as an offer, never as a result.
   ───────────────────────────────────────────────────────────── */

.ask-why {
	margin: clamp(14px, 3vw, 20px) 0 0;
	max-width: 36ch;
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.5;
	font-weight: 500;
	color: rgba(255, 240, 230, .92);
}

/* Skipping is offered as plainly as answering. */
.skip {
	color: rgba(255, 240, 230, .82);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 240, 230, .4);
	padding-bottom: 2px;
}
.skip:hover, .skip:focus-visible { color: #fff; border-color: #fff; }

.offer-say {
	margin: clamp(14px, 3vw, 20px) 0 0;
	max-width: 36ch;
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.5;
	font-weight: 600;
	color: rgba(58, 0, 28, .92);
}

.offers {
	display: grid;
	gap: clamp(12px, 2.4vw, 18px);
	max-width: var(--measure);
	margin: clamp(22px, 4.6vw, 34px) auto 0;
	padding-inline: 20px;
}
@media (min-width: 900px) { .offers { grid-template-columns: repeat(3, 1fr); } }

.offer {
	padding: clamp(18px, 4vw, 26px);
	background: var(--cream);
	box-shadow: var(--card-shadow);
}

.offer-n {
	margin: 0;
	font-family: var(--font-head);
	font-size: 13px;
	letter-spacing: .18em;
	color: var(--fuchsia-deep);
}

.offer-text {
	margin: 10px 0 0;
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.5;
	font-weight: 600;
	color: var(--purple-deep);
}

.offer-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(16px, 3vw, 22px) 0 0; }

.mini {
	display: inline-block;
	border: 0;
	cursor: pointer;
	padding: 11px 18px;
	background: var(--fuchsia);
	color: #fff;
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 14px;
	text-decoration: none;
	transition: background .3s ease;
}
.mini:hover, .mini:focus-visible { background: var(--red); }

.mini--quiet {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(59, 15, 99, .38);
	color: var(--purple-deep);
}
.mini--quiet:hover, .mini--quiet:focus-visible { background: rgba(59, 15, 99, .1); }

/* Sending all three back is offered as plainly as keeping one. */
.offer-none { margin: clamp(20px, 4vw, 30px) 0 0; }
.offer-none a {
	color: rgba(58, 0, 28, .9);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

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

/* ─────────────────────────────────────────────────────────────
   THE STUDIO — her room, and it has a shape.

   Five elements, no two alike. Equal squares are a grid rather
   than a dashboard: they tell her nothing about what matters,
   and she has to read all of them to find out. Size is how a
   room says what to look at first.
   ───────────────────────────────────────────────────────────── */

.studio .in { max-width: var(--measure); margin-inline: auto; padding-inline: 20px; }

/* ---------- one · the greeting, with her signal inside it ---------- */

.studio-hello {
	padding: clamp(24px, 5vw, 46px) 0 clamp(22px, 4.4vw, 38px);
	background:
		radial-gradient(66% 54% at 14% 6%, rgba(138,68,200,.72) 0%, rgba(138,68,200,0) 64%),
		radial-gradient(58% 48% at 92% 96%, rgba(255,30,140,.42) 0%, rgba(255,30,140,0) 66%),
		var(--purple-deep);
}

.studio-name {
	display: block;
	margin: clamp(2px, 1vw, 8px) 0 0;
	font-size: clamp(52px, 15.5vw, 100px);
}

/* Her signal is a control, so it looks like one and sits where she reaches. */
.sig {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2.4vw, 16px);
	flex-wrap: wrap;
	margin: clamp(20px, 4vw, 30px) 0 0;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 240, 230, .26);
}

.sig-dot {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	background: var(--fuchsia);
	box-shadow: 0 0 0 4px rgba(255, 30, 140, .28);
}

.sig-text { margin: 0; flex: 1 1 12ch; line-height: 1.35; }
.sig-text b {
	display: block;
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: clamp(16px, 4.2vw, 20px);
	color: #fff;
}
.sig-text span { display: block; margin-top: 3px; font-size: 14px; color: rgba(255,240,230,.82); }

.sig-off {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	padding: 11px 18px;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 240, 230, .5);
	color: var(--cream);
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 14px;
}
.sig-off:hover, .sig-off:focus-visible { background: rgba(255,255,255,.14); }

/* ---------- two · the tall feature, loudest on the page ---------- */

.feat {
	position: relative;
	padding: clamp(34px, 7vw, 66px) 0 clamp(36px, 7vw, 70px);
	overflow: hidden;
}
.feat::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bloom-soft);
	pointer-events: none;
}
.feat > * { position: relative; }

.feat-lab {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(12px, 3vw, 14px);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--purple-deep);
}

.feat-head {
	display: block;
	margin: clamp(8px, 1.8vw, 14px) 0 0;
	max-width: 15ch;
	font-family: var(--font-head);
	text-transform: uppercase;
	line-height: 1.02;
	font-size: clamp(34px, 10vw, 76px);
	color: #fff;
	text-shadow: 0 2px 0 rgba(255,255,255,.4), 0 6px 0 rgba(150,0,58,.26), 0 18px 34px rgba(120,0,46,.4);
}

.feat-say {
	margin: clamp(14px, 3vw, 22px) 0 0;
	max-width: 34ch;
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.5;
	font-weight: 600;
	color: rgba(58, 0, 28, .92);
}

/* The question itself, rather than a description of the question. */
.feat-q {
	margin: clamp(22px, 4.6vw, 34px) 0 0;
	max-width: 34ch;
	padding: clamp(18px, 4vw, 26px);
	background: var(--cream);
	box-shadow: 0 16px 34px rgba(120, 0, 46, .3);
}
.feat-q-lab {
	margin: 0;
	font-family: var(--font-head);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fuchsia-deep);
}
.feat-q-text {
	margin: 10px 0 0;
	font-size: clamp(19px, 5.2vw, 26px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--purple-deep);
}

.feat-acts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: clamp(20px, 4vw, 30px) 0 0; }

.mini--big { padding: 16px 26px; font-size: clamp(15px, 4vw, 18px); }
.feat .mini--quiet {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(58, 0, 28, .42);
	color: rgba(58, 0, 28, .92);
}
.feat .mini--quiet:hover, .feat .mini--quiet:focus-visible { background: rgba(58, 0, 28, .1); }

/* ---------- three · wide and short, read across ---------- */

.strip { padding: clamp(24px, 4.6vw, 40px) 0; }

.strip-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.strip-lab {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(13px, 3.2vw, 16px);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cream);
}
.strip-go {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.6);
	padding-bottom: 2px;
}

.strip-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 3.4vw, 28px);
	margin: clamp(18px, 3.6vw, 28px) 0 0;
}
@media (min-width: 760px) { .strip-facts { grid-template-columns: repeat(4, 1fr); } }

.strip-facts dt {
	font-family: var(--font-head);
	font-size: clamp(34px, 9vw, 56px);
	line-height: .9;
	color: #fff;
	text-shadow: 0 2px 0 rgba(255,255,255,.34), 0 10px 20px rgba(90,0,20,.4);
}
.strip-facts dd {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: rgba(255, 240, 230, .94);
}

/* ---------- four · the real cards, pushed sideways ---------- */

.reel-wrap { background: var(--purple-deep); padding: clamp(26px, 5vw, 44px) 0 clamp(28px, 5vw, 48px); }

.reel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.reel-lab {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(13px, 3.2vw, 16px);
	letter-spacing: .18em;
	text-transform: uppercase;
}
.reel-go {
	color: var(--fuchsia-lit);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/*
 * A row she pushes. Five cards stacked would be the roles page again, and
 * this is a glance rather than a search.
 */
.reel {
	display: flex;
	gap: 12px;
	margin: clamp(18px, 3.6vw, 28px) 0 0;
	padding: 4px 20px 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.reel > .role {
	flex: 0 0 min(86vw, 340px);
	scroll-snap-align: start;
}

/* ---------- five · a line of text, in no container at all ---------- */

.studio-foot { background: var(--purple-deep); padding: 0 0 clamp(40px, 7vw, 64px); }
.studio-foot p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,240,230,.9); }
.studio-foot a { color: var(--fuchsia-lit); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.studio-quiet { margin-top: 8px !important; font-size: 13px !important; color: rgba(255,240,230,.6) !important; }

/*
 * The loudest act on a fuchsia ground cannot itself be fuchsia.
 *
 * The default .mini is fuchsia, which vanished completely inside the feature
 * panel and left the main invitation looking like a line of plain text.
 */
.feat .mini {
	background: var(--purple-deep);
	color: var(--cream);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 12px 26px rgba(90,0,44,.34);
}
.feat .mini:hover, .feat .mini:focus-visible { background: #2A0A48; }

.feat .mini--quiet { box-shadow: inset 0 0 0 1px rgba(58, 0, 28, .42); }

/* ==========================================================================
   THE PLAIN PAGES — privacy and terms.

   Her joy law reaches here. A woman reading a privacy page is asking one
   plain question, and a wall of grey clauses answers it with suspicion. So
   these are built like the rest of LOIS: a purple ground with a bloom, one
   lifted heading, and generous room between the parts.

   Sized from 379px upward, since that is the pane she reads in.
   ========================================================================== */

.plain-page {
	background: var(--purple);
	background-image: var(--bloom-soft);
	color: var(--cream);
	padding: 2.5rem 1.25rem 4rem;
}

.plain-page__entrance {
	max-width: var(--measure);
	margin: 0 auto 2.75rem;
}

.plain-page__eyebrow {
	font-family: var(--font-head);
	letter-spacing: 0.32em;
	font-size: 0.75rem;
	margin: 0 0 0.75rem;
	color: var(--fuchsia-lit);
}

/* One lifted heading, and one only. Colour alone gives no depth. */
.plain-page__title {
	font-family: var(--font-head);
	font-size: clamp(2rem, 9vw, 3.25rem);
	line-height: 1.02;
	margin: 0 0 1.25rem;
	color: var(--cream);
	text-shadow:
		0.03em 0.03em 0 var(--purple-deep),
		0.06em 0.06em 0 var(--purple-deep),
		0.14em 0.16em 0.02em rgba(0, 0, 0, 0.28);
}

.plain-page__opening {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
	color: var(--cream);
}

.plain-page__part {
	max-width: var(--measure);
	margin: 0 auto 2.25rem;
}

.plain-page__part h2 {
	font-family: var(--font-head);
	font-size: 1.375rem;
	line-height: 1.15;
	margin: 0 0 0.6rem;
	color: var(--fuchsia-lit);
}

.plain-page__part p {
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 0.9rem;
}

/* A placeholder must look like a placeholder. Anything that reads as
   finished copy will be mistaken for hers within a week. */
.plain-page__placeholder {
	border-left: 4px solid var(--red);
	background: rgba(0, 0, 0, 0.18);
	padding: 0.85rem 1rem;
	font-size: 0.9375rem;
}

.plain-page__placeholder strong {
	color: var(--red-lit);
}

.plain-page__provenance {
	max-width: var(--measure);
	margin: 3rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 240, 230, 0.28);
	font-size: 0.875rem;
	opacity: 0.85;
}

@media (min-width: 44rem) {
	.plain-page {
		padding: 4rem 2rem 6rem;
	}

	.plain-page__part {
		margin-bottom: 2.75rem;
	}
}

/* The two plain pages, reachable from the foot of every screen. */
.foot__plain {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.foot__plain a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* ==========================================================================
   HEIGHTS THAT STOP GROWING.

   `.hero` carries min-height: 100svh in the parent, and it is live on the
   homepage, the roles page and every role page. Her pane reads roughly 379
   wide by 1,400 tall, so 100svh is a 1,400 pixel section with a few words
   floating in it — the long narrow strip she has been reporting all day.

   **Capped rather than replaced.** A fixed rem height alone would shrink the
   entrance on a laptop, where filling the window is the whole intention.
   min() keeps both: the section fills a sane window and stops growing past
   the point where it becomes a corridor. The form is the Madame Monet
   session's.

   **Overridden from the child rather than corrected in the parent.** The
   parent serves all forty and a change there goes to Paige first. This holds
   LOIS correct tonight and takes nothing away from her ruling.

   Left for her: `.js-entrance .entrance` in the parent is 100svh and no LOIS
   template uses it. Dead today, and a pattern the next session will copy —
   which is a fault with a delay on it rather than an absence of one.
   ========================================================================== */

/*
   The entrance is the real one, and grepping the templates missed it. The
   class that switches it on — js-entrance — is written onto <html> by script
   at runtime, so it appears in no template and a search of the markup says
   the rule is dead. It is not: it sets an outright height, which a min-height
   cap cannot touch, and .hero simply grows around it.

   Read the rendered page rather than the source. A measurement at 379 by 1400
   found three sections at exactly 1.0 of the viewport carrying 42, 45 and 89
   characters.
*/
.js-entrance .entrance {
	height: min(100svh, 46rem);
}

.hero {
	min-height: min(100svh, 46rem);
}

.hero--second {
	min-height: min(86svh, 38rem);
}

/* The wider plain pages — employers, agencies, the journal. */
.plain-page--wide .plain-page__part p {
	font-size: 1.0625rem;
}

.plain-page__go {
	max-width: var(--measure);
	margin: 2.5rem auto 0;
}

.plain-page__go a {
	display: inline-block;
	background: var(--fuchsia);
	color: #fff;
	font-family: var(--font-head);
	font-size: 1rem;
	letter-spacing: 0.04em;
	padding: 0.9rem 1.4rem;
	text-decoration: none;
	box-shadow: var(--card-shadow);
}

.plain-page__go a:hover,
.plain-page__go a:focus {
	background: var(--red);
}

/* ---------------------------------------------------------------------------
 * The bar
 *
 * Her ruling, 22 August, after seeing it standing: absent from both welcome
 * screens, arriving after the second one, and locking there.
 *
 * It sits below the entrance in the markup and sticks to the top, so it rises
 * with the site, reaches the top as the site arrives, and stays. Nothing
 * decides the moment — a sticky element already knows.
 *
 * Opaque, on Matri Pair's finding: a sticky bar costs nothing on a phone while
 * it is a flat colour, and a translucent one is where the phone bills you.
 * ------------------------------------------------------------------------ */

.bar {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--purple-deep);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/*
 * And it locks, which she asked to feel. The shadow arrives a beat after the
 * bar does rather than with it — the movement settles, then the weight lands.
 * Matri Pair's one-movement-two-layers shape, with the second layer late.
 */
.entrance.is-settled ~ .bar {
	animation: lois-bar-lands .9s cubic-bezier(.62, .02, .28, 1) both;
}

@keyframes lois-bar-lands {
	from {
		transform: translate3d(0, 46px, 0);
		opacity: .35;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}

	70% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
	}
}

.bar__mark {
	flex: 0 0 auto;
	font-family: var(--font-head);
	font-size: 20px;
	letter-spacing: .03em;
	line-height: 1;
	color: var(--cream);
	text-decoration: none;
	text-shadow: 1px 1px 0 var(--purple);
}

.bar__nav { margin-left: auto; }

.bar__list {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bar__list a {
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--cream);
	text-decoration: none;
	opacity: .88;
}

.bar__list a:hover,
.bar__list a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.entrance.is-settled ~ .bar { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Her reply
 *
 * A moment rather than a form. One real question, then the two lines an
 * employer needs to reach her. Square, on her ground, and readable at 379.
 * ------------------------------------------------------------------------ */

.reply-moment {
	margin-top: 26px;
	max-width: 640px;
}

.reply-line {
	display: block;
	margin: 0 0 18px;
}

.reply-line > span {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fuchsia);
	margin: 0 0 8px;
}

.reply-line textarea,
.reply-line input {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--cream);
	background: rgba(0, 0, 0, .26);
	border: 1px solid rgba(255, 255, 255, .28);
	padding: 13px 14px;
	border-radius: 0;
}

.reply-line textarea:focus,
.reply-line input:focus {
	outline: 2px solid var(--fuchsia);
	outline-offset: 2px;
	background: rgba(0, 0, 0, .4);
}

.reply .apply {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* ---------------------------------------------------------------------------
 * The Atelier, as an employer meets it
 *
 * One question a screen, no buttons, and the question ahead already faint on
 * the way in. Her ruling: make it so enjoyable that people love filling it out.
 * ------------------------------------------------------------------------ */

.atelier { background: var(--purple-deep); }

.atelier-move {
	min-height: min(100svh, 46rem);
	display: flex;
	align-items: center;
	padding: clamp(30px, 8vw, 80px) clamp(18px, 5vw, 60px);
	opacity: .22;
	transform: translate3d(0, 22px, 0);
	transition: opacity .7s ease, transform .7s cubic-bezier(.62, .02, .28, 1);
}

.atelier-move.is-here {
	opacity: 1;
	transform: none;
}

.atelier-move .in {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.atelier-count {
	font-family: var(--font-head);
	font-size: clamp(46px, 15vw, 96px);
	line-height: .8;
	margin: 0 0 14px;
	color: var(--fuchsia);
	opacity: .55;
}

.atelier-ask {
	font-family: var(--font-head);
	font-size: clamp(26px, 7.4vw, 46px);
	line-height: 1.06;
	margin: 0 0 22px;
	text-shadow: 2px 2px 0 var(--purple), 5px 7px 12px rgba(0, 0, 0, .42);
}

.atelier-big {
	font-family: var(--font-head);
	font-size: clamp(34px, 10vw, 68px);
	line-height: .98;
	margin: 0 0 18px;
	text-shadow: 2px 2px 0 var(--purple), 6px 8px 14px rgba(0, 0, 0, .45);
}

.atelier-say {
	font-size: 16.5px;
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 54ch;
}

.atelier-write {
	width: 100%;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.55;
	color: var(--cream);
	background: rgba(0, 0, 0, .26);
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, .3);
	border-radius: 0;
	padding: 16px;
	resize: vertical;
}

.atelier-write:focus {
	outline: 0;
	border-bottom-color: var(--fuchsia);
	background: rgba(0, 0, 0, .38);
}

.atelier-kept {
	min-height: 20px;
	margin: 9px 0 0;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fuchsia);
	opacity: 0;
	transition: opacity .4s ease;
}

.atelier-kept.is-said { opacity: .95; }

.atelier-on {
	margin: 26px 0 0;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 240, 230, .6);
}

.made-line {
	border-left: 3px solid var(--fuchsia);
	padding: 2px 0 2px 16px;
	margin: 0 0 22px;
}

.made-ask {
	margin: 0 0 6px;
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fuchsia);
	font-weight: 700;
}

.made-said {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
	.atelier-move {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Her seven, on the Studio panel. She reads what waits for her rather than
   being told a number, and the panel that claimed she had answered two is
   gone. Sized from 379 out. */
.feat-seven {
	list-style: none;
	margin: 26px 0 30px;
	padding: 0;
	counter-reset: none;
	display: grid;
	gap: 14px;
}

.feat-seven .feat-q {
	background: rgba(0, 0, 0, .18);
	border-left: 3px solid var(--cream);
	padding: 15px 16px 16px;
}

.feat-seven .feat-q-lab {
	margin: 0 0 6px;
	font-size: 11.5px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--cream);
	opacity: .82;
}

.feat-seven .feat-q-text {
	margin: 0;
	font-family: 'Anton', Impact, sans-serif;
	font-size: clamp(19px, 4.9vw, 24px);
	line-height: 1.2;
	color: var(--cream);
}

.feat-soon {
	margin: 14px 0 0;
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--cream);
	opacity: .78;
}

@media (min-width: 760px) {
	.feat-seven { grid-template-columns: 1fr 1fr; }
}

/* The bar is sticky, so anything scrolled to lands underneath it. */
.feat, .sec, .ma, .atelier-move { scroll-margin-top: 84px; }

/* The quiet act. A filled shape belongs to the one thing she came to do, so
   the second choice is outlined — it was carrying the same fill as the first
   and beating it, on every page that offers two. */
.apply--quiet,
.role-tango .apply--quiet,
.studio .apply--quiet,
.atelier .apply--quiet {
	background: none;
	background-color: transparent;
	color: var(--cream);
	box-shadow: inset 0 0 0 2px rgba(255, 240, 230, .55);
}

.apply--quiet:hover,
.apply--quiet:focus-visible,
.role-tango .apply--quiet:hover,
.studio .apply--quiet:hover,
.atelier .apply--quiet:hover,
.atelier .apply--quiet:focus-visible {
	background: none;
	background-color: rgba(255, 240, 230, .1);
	box-shadow: inset 0 0 0 2px var(--cream);
	color: var(--cream);
}

/* And the sitting: the two acts sit together rather than a screen apart. */
.her-atelier .acts { margin-top: 22px; }
.atelier-past {
	margin: 10px 0 0;
	font-size: 12.5px;
	letter-spacing: .03em;
	color: var(--cream);
	opacity: .66;
}

/* WIDE. She is on a large screen for the first time, and the standing law to
   check at 379 had been read as only 379 mattering.

   A line of prose running the full 1340 is about 150 characters and nobody
   reads that twice. Sixty-five to seventy-five is where an eye stays. */
.studio-hello .say,
.her-atelier .say,
.sec .say {
	max-width: 34em;
}

.studio-hello .acts {
	justify-content: flex-start;
	margin-top: 26px;
}

/* The container is a grid with a 57.6px row gap, which is right between an
   eyebrow, a heading and a group of acts — and far too much between two
   sentences of the same thought. They close up; the rest keeps its air. */
.studio-hello .in {
	row-gap: 22px;
}

.studio-hello .head {
	margin-block: 14px 10px;
}

.studio-hello .acts {
	margin-top: 26px;
}

@media (min-width: 1100px) {
	.studio-hello {
		padding-block: clamp(48px, 7vh, 92px);
	}

	/* The heading has room to be enormous without swallowing the screen. */
	.studio-hello .head {
		max-width: 18ch;
	}
}

/* THE MENU AT 379.

   Five doors will never sit on one line at her width, and flex wrapped them
   into ragged two-line stacks — Your / Studio and The / Journal broken across
   lines. It read as broken because it was.

   It runs on one line and scrolls, which is a thing a thumb already knows how
   to do. Nothing is hidden behind a control she has to find first. */
/* A flex item refuses to shrink below its content unless it is told it may,
   so the list pushed the whole page sideways instead of scrolling inside
   itself. That is a worse fault than the wrap it replaced. */
.bar nav,
.bar__nav {
	min-width: 0;
	overflow: hidden;
}

.bar__list {
	min-width: 0;
	max-width: 100%;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.bar__list::-webkit-scrollbar {
	display: none;
}

.bar__list li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.bar__list a {
	white-space: nowrap;
}

/* A hint that there is more, rather than a cliff. */
@media (max-width: 620px) {
	.bar__list {
		gap: 17px;
		padding-right: 18px;
		mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	}
}

/* HER ROOM. Not the end of a form. */
.her-place__words {
	display: grid;
	gap: 16px;
	margin: 28px 0 30px;
}

.her-word {
	background: rgba(0, 0, 0, .2);
	border-left: 3px solid var(--fuchsia);
	padding: 17px 18px 15px;
}

.her-word__ask {
	margin: 0 0 8px;
	font-size: 11.5px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--fuchsia);
}

.her-word__said {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--cream);
	max-width: 34em;
}

.her-word__who {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.her-who {
	background: transparent;
	border: 1px solid rgba(255, 240, 230, .34);
	color: var(--cream);
	font: inherit;
	font-size: 12px;
	letter-spacing: .06em;
	padding: 6px 12px;
	border-radius: 0;
	cursor: pointer;
}

.her-who:hover {
	border-color: var(--cream);
}

/* The one she has chosen is the only filled shape in the row. */
.her-who.is-chosen {
	background: var(--fuchsia);
	border-color: var(--fuchsia);
	color: #fff;
	font-weight: 600;
}

/* The acts sit where every other line on the page sits. */
.her-place .acts {
	justify-content: flex-start;
	margin-top: 4px;
}

@media (min-width: 900px) {
	.her-place__words { grid-template-columns: 1fr 1fr; }
}

/* THE LIFT LANDS ON THE HEADER RATHER THAN IN A VOID.

   Her ruling, 25 August: what she loves is that the entrance lifts the world
   up underneath it and locks the header in place — the handing over rather
   than the type.

   165px of empty purple sat between the script and the bar, so the lift landed
   in nothing and the header locked a moment later. The entrance keeps its full
   height; its content sits lower inside it, so the script and the header meet. */
/* THE ENTRANCE IS LEFT EXACTLY AS SHE FOUND IT.
   
   I pushed its content to the bottom to close the space above the header. It
   closed, and the same emptiness reappeared above THE ONE WHO WALKS IN — the
   void moved rather than went, and it moved on top of the line she called
   perfect.
   
   The space below the script is the entrance breathing before it hands over,
   and 165px of it at her width is not a fault. Reverted, deliberately, and
   written down so nobody closes it again from a measurement. */

/* And the panel beneath begins where the header ends. */
.seek {
	margin-top: clamp(20px, 4svh, 38px);
}

/* THE DOOR. Three things, and it reads as a moment rather than a form. */
.door-form { margin: 26px 0 0; max-width: 30em; }
.door-f { margin: 0 0 20px; }
.door-f label {
	display: block; margin: 0 0 7px;
	font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--fuchsia); font-weight: 700;
}
.door-f input {
	display: block; width: 100%;
	background: rgba(0, 0, 0, .24);
	border: 1px solid rgba(255, 240, 230, .34);
	border-radius: 0; padding: 13px 14px;
	font-family: inherit; font-size: 16px; color: var(--cream);
}
.door-f input:focus {
	outline: 0; border-color: var(--fuchsia);
	box-shadow: 0 0 0 2px rgba(255, 30, 140, .3);
}
.door-why {
	display: block; margin-top: 7px;
	font-size: 12.5px; color: rgba(255, 240, 230, .7);
}
.door-quiet { position: absolute; left: -9999px; }
.the-door .acts { justify-content: flex-start; margin-top: 4px; }

/* Leaving. Two acts, and the quieter one is for a borrowed device. */
.her-place__leaving-lab {
	margin: 34px 0 10px; font-size: 11.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--fuchsia); font-weight: 700;
}
.lam-leaving { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.lam-leaving button {
	font: inherit; font-size: 13px; letter-spacing: .05em; cursor: pointer;
	border-radius: 0; padding: 10px 16px;
	background: transparent; color: var(--cream);
	border: 1px solid rgba(255, 240, 230, .4);
}
.lam-leaving__one { background: var(--fuchsia) !important; border-color: var(--fuchsia) !important; color: #fff !important; }
.lam-leaving button:hover { border-color: var(--cream); }
.lam-leaving__why { display: block; width: 100%; margin-top: 8px; font-size: 12.5px; color: rgba(255,240,230,.7); }

/* The door's own act. A <button class="apply"> was taking the browser's grey
   default while the quieter link beside it carried the fill — so the filled
   shape sat on Already One Of Us rather than on Come In. */
button.apply,
.the-door button.apply {
	font: inherit;
	font-size: 14px;
	letter-spacing: .11em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	padding: 15px 26px;
	color: #fff;
	background: linear-gradient(120deg, var(--fuchsia) 0%, var(--red) 100%);
}

button.apply:hover,
button.apply:focus-visible {
	background: var(--fuchsia);
}

/* Her own photograph, in her own room. */
.her-picture { margin: 26px 0 30px; }
.her-picture__lab {
	margin: 0 0 12px; font-size: 11.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--fuchsia); font-weight: 700;
}
.her-picture__said { margin: 0 0 12px; font-size: 14px; color: var(--cream); }
.her-picture__is {
	display: block; max-width: min(360px, 100%); height: auto;
	margin: 0 0 16px; border: 3px solid var(--cream);
	box-shadow: 8px 10px 0 rgba(18, 3, 34, .38);
}
.her-picture__choose {
	display: block; margin: 0 0 14px;
	font-size: 12.5px; letter-spacing: .04em; color: rgba(255, 240, 230, .82);
}
.her-picture__choose input { display: block; margin-top: 8px; color: var(--cream); font: inherit; font-size: 13px; }
.her-picture .acts { justify-content: flex-start; margin: 0; }

/* HER PHOTOGRAPHS, BETWEEN THE TWO SIDES.

   They break the run of coloured doors on the entrance, and they are her
   palette walking — a fuchsia coat and a red one. Square blocks like
   everything else, and never rounded. */
.between {
	display: grid;
	gap: 3px;
	margin: 3px 0;
	background: var(--purple-deep);
}

.between__is {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 62svh;
	object-fit: cover;
	object-position: center 22%;
}

@media (min-width: 700px) {
	.between { grid-template-columns: 1fr 1fr; }
	.between__is { max-height: 74svh; }
}

/* Her face, or her thumb. Offered rather than asked for. */
.her-face__say { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--cream); max-width: 34em; }
.her-face__said { margin: 10px 0 0; font-size: 13px; color: var(--fuchsia); min-height: 1.2em; }
.her-face__back { margin: 18px 0 0; }

/* ---------------------------------------------------------------------------
   THE QUIET ACT IS A WORD, NOT A SECOND PILL.

   Her ruling, 3 September 2026, walking her own door: *it's still a form, even
   if it's just one screen at a time, if you've got red continue buttons.* And
   one sentence earlier she had already described the answer, about a link she
   liked: *it's gentle, it's not in your face. It's just in red, and it's got
   the red underline.*

   Two filled pills side by side is the tell. Come Back In and I Am New Here
   were both wearing the fuchsia, so the door read as a form however carefully
   the words were written.

   WHY THE EARLIER FIX NEVER WORKED, WHICH IS THE PART WORTH KEEPING.

   `.apply--quiet` already said `background: none` and had done for weeks. The
   parent theme paints `.acts a`, and `.acts a` outweighs a single class on
   specificity — so it won everywhere, on every page offering two acts, and no
   amount of editing the child rule could move it. Her law: where a fix changes
   nothing, look for the rule that wins rather than the rule you edited.

   Reaching into `.acts` from here rather than changing the parent, since the
   parent belongs to all forty-seven and this is Lois's taste.
   --------------------------------------------------------------------------- */
.acts a.apply--quiet,
.acts button.apply--quiet,
.her-face__back button.apply--quiet,
.the-door .acts a.apply--quiet,
.the-door .acts button.apply--quiet {
	background: none;
	background-color: transparent;
	box-shadow: none;
	border: 0;
	border-bottom: 2px solid var(--red);
	border-radius: 0;
	padding: 15px 2px;
	color: var(--cream);
	text-decoration: none;
}

.acts a.apply--quiet:hover,
.acts a.apply--quiet:focus-visible,
.acts button.apply--quiet:hover,
.acts button.apply--quiet:focus-visible,
.her-face__back button.apply--quiet:hover,
.her-face__back button.apply--quiet:focus-visible,
.the-door .acts a.apply--quiet:hover,
.the-door .acts button.apply--quiet:hover {
	background: none;
	background-color: transparent;
	box-shadow: none;
	border-bottom-color: var(--fuchsia);
	color: var(--cream);
}

/* An answer shown rather than invited. It reads as the words it is, on the
   ground the question sits on, and it is never mistaken for a box to type in. */
.say-it--shown {
	display: block;
	margin: 18px 0 10px;
	padding: 20px 22px;
	background: rgba(255, 240, 230, .07);
	box-shadow: inset 3px 0 0 var(--fuchsia);
	color: var(--cream);
	font-size: clamp(17px, 2.4vw, 21px);
	line-height: 1.5;
}

.shown-why {
	color: rgba(255, 240, 230, .62);
	font-size: 13px;
	line-height: 1.5;
	max-width: 46ch;
}