/*
 * Structure. No taste.
 *
 * Every colour, face and shadow in this file is a token the child theme sets.
 * A literal colour here would leak one business's look into all eight, so the
 * rule is absolute: no hex, no rgb, no font name below this line.
 *
 * Sizes lead from the narrow end. Paige reviews at 379px, and building wide
 * then checking narrow cost most of a day.
 */

*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ground);
	font-family: var(--font-util);
	-webkit-font-smoothing: antialiased;
}

/* ---------- the section ---------- */

.sec {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 110px) clamp(18px, 5vw, 72px);
}

/* The light that lives in the entrance, carried through every section. */
.sec::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--bloom);
}

.sec > * { position: relative; }

/*
 * The first section after the entrance.
 *
 * Its light starts gradually rather than at full strength on the first pixel,
 * which is what leaves a faint seam across the join however well the grounds
 * are matched.
 */
.sec--arrival::before {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}

.in {
	max-width: var(--measure);
	margin-inline: auto;
	display: grid;
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.in.two { grid-template-columns: 1.04fr .96fr; }
}

/* ---------- type roles ---------- */

.eyebrow {
	font: 700 clamp(12px, 3.3vw, 15px)/1.3 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* Every heading is lifted, never flat. A short extrude plus a cast shadow. */
.lift { text-shadow: var(--lift); }

.head {
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .004em;
	line-height: .94;
	margin: 0;
	display: block;
	font-size: clamp(40px, 9.4vw, 104px);
}

.body {
	font: 500 clamp(16px, 4.2vw, 19px)/1.5 var(--font-util);
	margin: 22px 0 0;
	max-width: 44ch;
}

.body + .body { margin-top: 14px; }

/* ---------- surfaces ---------- */

/* Shine lives on surfaces, never behind type. A heading on satin is illegible. */
.panel {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 3.2vw, 52px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(40px, 7vw, 84px);
	min-height: clamp(230px, 26vw, 380px);
	box-shadow: var(--surface-shadow);
}

.panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--satin);
	pointer-events: none;
}

.panel > * { position: relative; }
.panel .head { font-size: clamp(30px, 7.4vw, 62px); }

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

/*
 * Both entrance screens sit inside one ground.
 *
 * Painted per screen, each one restarts its own light and the two cut against
 * each other in a hard line across the join. One ground behind both means the
 * light carries through and the second screen is fallen into, not landed on.
 */
.entrance {
	position: relative;
	background: var(--entrance);
}

.entrance .hero { background: none; }

/*
 * While the entrance performs, the page holds still. A stray scroll mid-
 * sequence fights the animation and looks broken; she gets the page back the
 * instant it finishes, or the instant she asks for it.
 */
.entrance-running,
.entrance-running body { overflow: hidden; }

/*
 * The words start below their place and rise into it, so the statement makes
 * an entrance rather than appearing. Hidden only once the script is present:
 * no script, no hiding, and the entrance simply sits there fully readable.
 */
.js-entrance [data-rise] { opacity: 0; }

/*
 * While the entrance is running the two screens occupy the same place, one
 * over the other. The first gives way where it stands and the second arrives
 * behind it — no scrolling, no travel, the room simply changes.
 *
 * Without the script they stay as two ordinary screens, one after the other.
 */
.js-entrance .entrance { height: 100svh; }

.js-entrance .entrance [data-entrance-screen] {
	position: absolute;
	inset: 0;
}

/* Settled: the words are theirs again, and the first screen has gone. */
.js-entrance .entrance.is-settled [data-rise] { opacity: 1; }

.js-entrance .entrance.is-settled [data-entrance-screen]:first-of-type {
	opacity: 0;
	pointer-events: none;
}

/* The last of it dissolves into whatever follows. */
.entrance::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--entrance-fade-height);
	background: var(--entrance-fade);
	pointer-events: none;
	z-index: 1;
}

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--entrance-gap);
	padding: clamp(26px, 6vw, 70px) clamp(16px, 4vw, 56px);
	text-align: center;
}

.hero--second { min-height: 86svh; }

.mark {
	width: min(66vw, 340px);
	aspect-ratio: var(--mark-ratio);
	background-image: var(--mark-image);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: var(--mark-shadow);
	margin-bottom: var(--mark-space);
}

.anchor {
	font: 700 clamp(11px, 2.9vw, 20px)/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--anchor-ink);
	margin: var(--anchor-space) 0 0;
	text-wrap: balance;
}

/* ---------- search and doorways ---------- */

.seek { max-width: 1020px; margin: 0 auto clamp(34px, 5vw, 70px); }

.seek-bar {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--satin), var(--seek-ground);
	box-shadow: var(--surface-shadow);
}

@media (min-width: 760px) {
	.seek-bar { grid-template-columns: 1.2fr 1fr auto; }
}

.seek-bar .f {
	padding: 18px 26px;
	border-bottom: 1px solid var(--seek-rule);
}

@media (min-width: 760px) {
	.seek-bar .f { border-bottom: 0; border-right: 1px solid var(--seek-rule); }
}

.seek-bar input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font: 500 16px var(--font-util);
	color: var(--seek-ink);
}

.seek-bar input::placeholder { color: var(--seek-placeholder); }

.seek-bar button {
	border: 0;
	cursor: pointer;
	padding: 18px 34px;
	color: var(--seek-button-ink);
	font: 700 12px var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	background: var(--satin), var(--seek-button);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin: 10px 0 0;
}

.chips a {
	font: 600 13px/1 var(--font-util);
	letter-spacing: .02em;
	text-decoration: none;
	color: var(--chip-ink);
	padding: 0 0 4px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--chip-rule);
	transition: border-color .2s ease, color .2s ease;
}

.chips a:hover { border-bottom-color: var(--chip-rule-hover); color: var(--chip-ink-hover); }

.doors {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: var(--measure);
	margin-inline: auto;
}

@media (min-width: 820px) {
	.doors { grid-template-columns: repeat(3, 1fr); }
}

.door {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 2.4vw, 30px);
	text-decoration: none;
	color: var(--door-ink);
	min-height: clamp(170px, 19vw, 240px);
	box-shadow: var(--surface-shadow);
}

.door::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--satin);
	pointer-events: none;
}

.door > * { position: relative; }
.door .head { font-size: clamp(30px, 8vw, 44px); margin-top: auto; }
.door p:last-child { font: 500 14px/1.45 var(--font-util); margin: 0; }

/* ---------- the stepped stack ---------- */

/* House language: three lines, each indented further than the last. */
.stack {
	margin: clamp(28px, 4.6vw, 54px) 0 0;
	display: grid;
	gap: clamp(12px, 2.4vw, 26px);
}

.stack p {
	margin: 0;
	font-family: var(--font-head);
	text-transform: uppercase;
	line-height: .96;
	font-size: clamp(26px, 6.6vw, 68px);
}

.stack p:nth-child(2) { margin-left: 9%; }
.stack p:nth-child(3) { margin-left: 18%; }

/* ---------- the numbered band ---------- */

.band {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 80px) clamp(18px, 5vw, 72px);
}

.band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--satin);
	pointer-events: none;
}

.band::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--bloom-soft);
}

.rows {
	position: relative;
	max-width: var(--measure);
	margin-inline: auto;
	display: grid;
	gap: clamp(9px, 1.1vw, 14px);
}

.row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(14px, 2vw, 26px);
	align-items: center;
	padding: clamp(15px, 1.8vw, 24px) clamp(16px, 2.2vw, 30px);
	background: var(--row-ground);
}

.num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 100px;
	flex: none;
	background: var(--num-ground);
	color: var(--num-ink);
	font: 700 12px var(--font-util);
}

.rh {
	font: 700 clamp(16px, 4.4vw, 28px)/1.15 var(--font-util);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--row-ink);
	margin: 0;
}

.rs {
	font: 500 clamp(13px, 3.5vw, 16px)/1.45 var(--font-util);
	color: var(--row-ink-soft);
	margin: 6px 0 0;
}

/* ---------- the journal ---------- */

.jrn {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: var(--measure);
	margin: clamp(26px, 3.4vw, 44px) auto 0;
}

@media (min-width: 820px) {
	.jrn { grid-template-columns: repeat(3, 1fr); }
}

.jrn .panel {
	text-decoration: none;
	min-height: clamp(180px, 19vw, 250px);
}

.jrn .panel .head { font-size: clamp(26px, 6.4vw, 40px); }

/* ---------- the foot ---------- */

.foot {
	padding: clamp(30px, 4vw, 54px) clamp(18px, 5vw, 72px);
	background: var(--foot-ground);
	text-align: center;
}

.foot p {
	margin: 0;
	font: 700 11px/1.6 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--foot-ink);
}

/* ---------- reaching it by keyboard ---------- */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 12px 20px;
	background: var(--skip-ground);
	color: var(--skip-ink);
	font: 700 13px var(--font-util);
	z-index: 100;
}

.skip:focus { left: 8px; top: 8px; }

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

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

/* ---------- the listing index ---------- */

/*
 * The card's foot is `.role-foot`, never `.foot`. The page footer already owns
 * that name, and one class meaning two things is a defect waiting to happen.
 */

.top {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 14px clamp(16px, 4vw, 44px) 12px;
	background: var(--top-ground);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--top-rule);
}

.top-in {
	max-width: var(--measure);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	flex-wrap: wrap;
}

.top .mark { width: 74px; flex: none; margin-bottom: 0; }
.top .seek-bar { flex: 1 1 320px; box-shadow: var(--surface-shadow-soft); }

@media (min-width: 720px) {
	.top .seek-bar { grid-template-columns: 1.25fr 1fr auto; }
}

.top .seek-bar .f { padding: 13px 20px; }
.top .seek-bar input { font-size: 15px; }
.top .seek-bar button { padding: 14px 26px; font-size: 11px; }

.top .chips { margin: 14px auto 0; max-width: var(--measure); }
.top .chips a[aria-current] { color: var(--chip-ink-hover); border-bottom: 2px solid var(--chip-current); }

.wrap {
	max-width: var(--measure);
	margin-inline: auto;
	padding: clamp(26px, 4vw, 54px) clamp(16px, 4vw, 44px);
}

.count {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 clamp(20px, 3vw, 34px);
}

/* A count, not a headline. It reports; it does not announce. */
.count h1 {
	font: 700 clamp(22px, 5vw, 38px)/1.1 var(--font-util);
	letter-spacing: -.01em;
	margin: 0;
	color: var(--count-ink);
}

.count h1 b { color: var(--count-figure); font-weight: 700; }
.count span { font: 600 13px var(--font-util); color: var(--count-note); }

.list { display: grid; gap: clamp(10px, 1.2vw, 16px); }

.role {
	position: relative;
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: var(--card-ink);
	padding: clamp(18px, 2.2vw, 28px);
	box-shadow: var(--card-shadow);
	transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}

.role::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--satin);
	pointer-events: none;
}

.role > * { position: relative; }
.role:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-lift); }

.role-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

/* The business gets a name, not a label. */
.org {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font: 700 clamp(14px, 3.6vw, 16px)/1.2 var(--font-util);
	letter-spacing: .01em;
	color: var(--org-ink);
}

.org i { width: 9px; height: 9px; flex: none; display: block; }
.live { font: 600 11px/1 var(--font-util); color: var(--live-ink); }

.rtitle {
	font-family: var(--font-head);
	letter-spacing: .008em;
	line-height: 1.04;
	margin: 12px 0 10px;
	font-size: clamp(24px, 4.6vw, 34px);
	color: var(--card-title-ink);
}

.why {
	font: 500 clamp(15px, 3.9vw, 17px)/1.55 var(--font-util);
	color: var(--card-body-ink);
	margin: 0 0 18px;
	max-width: 64ch;
}

.role-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding-top: 15px;
	border-top: 1px solid var(--card-rule);
}

/* Light pills, so the work pattern reads the same on every card colour. */
.pat {
	font: 700 11px/1 var(--font-util);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 13px;
	color: var(--pill-ink);
}

.meta { font: 600 14px/1 var(--font-util); color: var(--card-meta-ink); }
.pay { color: var(--card-pay-ink); }

/* ---------- the empty search ---------- */

/* MA. The space before, full of possibility rather than lack. */
.ma {
	padding: clamp(46px, 7vw, 96px) clamp(16px, 4vw, 44px);
	text-align: center;
	background: var(--ma-ground);
}

.ma-in { max-width: 760px; margin-inline: auto; }

.ma p.say {
	font: 500 clamp(15px, 4vw, 18px)/1.55 var(--font-util);
	color: var(--cream);
	margin: clamp(20px, 3vw, 32px) auto 0;
	max-width: 46ch;
}

.acts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: clamp(22px, 3vw, 34px);
}

.acts a {
	font: 700 11px/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--act-ink);
	padding: 15px 24px;
	background: var(--satin), var(--act-ground);
	box-shadow: var(--act-shadow);
}

.acts a.quiet { background: none; border: 1px solid var(--act-quiet-rule); box-shadow: none; }

.note {
	padding: clamp(30px, 4vw, 54px) clamp(16px, 4vw, 44px);
	text-align: center;
	background: var(--note-ground);
}

.note p {
	margin: 0;
	font: 600 11px/1.7 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--note-ink);
}

/* ---------- arriving ---------- */

/*
 * The working page arrives rather than appears.
 *
 * Only hidden once the script has run and added `js-float`, so a page whose
 * scripts fail shows everything rather than nothing.
 */

.js-float .float {
	opacity: 0;
	transform: translateY(var(--float-rise));
	transition: opacity var(--float-time) var(--float-ease),
		transform var(--float-time) var(--float-ease);
	will-change: opacity, transform;
}

.js-float .float.is-in {
	opacity: 1;
	transform: none;
}

/* A second beat for what sits beside it, so a row lands as a row. */
.js-float .float--after { transition-delay: var(--float-stagger); }
.js-float .float--later { transition-delay: calc(var(--float-stagger) * 2); }

@media (prefers-reduced-motion: reduce) {
	.js-float .float,
	.js-float .float.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}