/*
 * 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;
	line-height: .9;
	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.
 */