/* ==========================================================================
   Cairn — typography. Three faces, each with one job.
   Prata sets statements. Schibsted Grotesk carries prose. DM Mono is the
   drawing: levels, coordinates, references, captions.
   ========================================================================== */

.stmt,
.sec-stmt,
.pcard__title,
.gcard__title,
.jcard__title,
.jlead__title,
.ahead__title,
.phero__title,
.focus__title,
.sentry__title,
.stage__title,
.person__name,
.tl-title,
.belief__title,
.prin__title,
.mpanel__name,
.quote__text,
.pull p,
.feat-strip__title,
.cband__stmt,
.enquiry__done-title,
.cform__title,
.pdraw__title,
.rule__title,
.step__title,
.foot-cta span:first-child,
.index-link__label,
.pnav__title,
.studio-card__city {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.06;
	text-wrap: balance;
}

.stmt { font-size: var(--step-4); }

.sec-stmt {
	font-size: var(--step-3);
	max-width: 18ch;
}

.label {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-soft);
}

.mono {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.5;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.caption {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	margin-block-start: 0.75rem;
	padding-inline-start: 1.15rem;
	position: relative;
}

.caption::before {
	content: "";
	position: absolute;
	inset-block-start: 0.55em;
	inset-inline-start: 0;
	width: 0.7rem;
	height: var(--hair);
	background: var(--rule-strong);
}

.dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-inline: 0.6em;
	vertical-align: 0.25em;
	background: currentColor;
	opacity: 0.5;
}

.sec-meta {
	display: flex;
	align-items: baseline;
	gap: 1.15rem;
	margin-block-end: clamp(1.25rem, 2.4vw, 2.25rem);
}

.sec-ref {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.14em;
	color: var(--accent-ink);
	padding-inline-end: 1.15rem;
	position: relative;
}

.sec-ref::after {
	content: "";
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-end: 0;
	width: 0.7rem;
	height: var(--hair);
	background: var(--rule-strong);
}

.sec-body {
	max-width: 46ch;
	color: var(--ink-soft);
	font-size: var(--step-1);
	line-height: 1.55;
}

.sec-body p + p { margin-block-start: 1em; }

.req {
	color: var(--accent-ink);
	margin-inline-start: 0.25em;
}

/* --- Links -------------------------------------------------------------- */

.link-u {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 var(--hair);
	background-position: 0 100%;
	transition: background-size var(--dur-fast) var(--ease);
	padding-block-end: 0.12em;
	box-decoration-break: clone;
}

.link-u:hover,
.link-u:focus-visible { background-size: 100% var(--hair); }

/* A link that is the whole paragraph is a target, not a word in a sentence,
   so it needs a tappable box rather than a line-height. */
p > .link-u:only-child {
	display: inline-block;
	padding-block: 0.5rem;
}

.arrow {
	display: inline-block;
	transition: transform var(--dur-fast) var(--ease);
}

a:hover .arrow,
button:hover .arrow { transform: translateX(0.3em); }

/* --- Prose -------------------------------------------------------------- */

.prose p,
.abody p,
.sentry__text p,
.stage__main p,
.belief__body,
.person__text,
.tl-body p,
.rule__title + p,
.step__title + p {
	color: var(--ink-soft);
}

.abody {
	font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.28rem);
	line-height: 1.68;
}

.abody p + p { margin-block-start: 1.25em; }

/* Direct child only: a blockquote's paragraph is also a `:first-of-type`
   among its own siblings, and would otherwise take a drop cap too. */
.abody > p:first-of-type::first-letter {
	font-family: var(--font-display);
	float: inline-start;
	font-size: 3.4em;
	line-height: 0.82;
	padding-inline-end: 0.12em;
	padding-block-start: 0.06em;
	color: var(--ink);
}

.pull {
	margin-block: 2.25em;
	padding-block: 1.5rem;
	border-block: var(--hair) solid var(--rule);
}

.pull p {
	font-size: var(--step-2);
	line-height: 1.18;
	color: var(--ink);
	max-width: 22ch;
}