/* --- micro type --- */
.mono {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9em;
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--fs-mono);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	white-space: nowrap;
}
.eyebrow .rule { display: inline-block; width: 34px; height: 1px; background: currentColor; opacity: 0.55; }

.hint {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* --- headings --- */
.hx {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 800;
	font-stretch: 87%;
	line-height: 0.96;
	letter-spacing: -0.015em;
	text-transform: lowercase;
	text-wrap: balance;
}

.sub {
	max-width: 46ch;
	margin: 0;
	font-size: var(--fs-sub);
	font-weight: 400;
}

/* --- exhale / inhale ---------------------------------------------------
   Simultaneous, opposing breath. Each class carries its own rest AND active
   values so both can live in one headline:
     <h2 class="hx breathes">the columns <span class="exhale">answer</span>
     the <span class="inhale">signal</span></h2>
   Guardrail: font-stretch animation reflows text every frame — keep spans to
   1–2 words in headings/nav/footer, never in body copy or beside CTAs. */
.exhale { font-stretch: 125%; font-weight: 900; }
.inhale { font-stretch: 87%;  font-weight: 800; }

/* Line control: breaks are chosen by hand, not by the wrap engine.
   arborn_breathe() turns "\n" in its pre/post strings into .line blocks;
   within its own line the breathing word pushes neighbours organically —
   that movement is the point — but it can never re-wrap the paragraph. */
.hx .line { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.exhale, .inhale {
		transition:
			font-stretch var(--breath-dur) var(--ease-breath),
			font-weight var(--breath-dur) var(--ease-breath);
	}
	/* Breathing is HOVER-DRIVEN and HEADLINE-SCOPED (3 Sep): the trigger is
	   the .breathes heading itself, not its section — section-wide hover made
	   adjacent headlines appear to fire together across tall paddings. */
	.exhale:hover, .breathes:hover .exhale, .breathes:focus-visible .exhale,
	.is-breathing .exhale { font-stretch: 87%; font-weight: 800; }
	.inhale:hover, .breathes:hover .inhale, .breathes:focus-visible .inhale,
	.is-breathing .inhale { font-stretch: 125%; font-weight: 900; }
}

/* --- CTAs --- */
.cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	border: 1px solid currentColor;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: lowercase;
	transition: background 0.25s ease, color 0.25s ease;
}
.cta--primary { background: var(--briquette-deep); border-color: var(--briquette-deep); color: var(--silver); }
.cta--primary:hover, .cta--primary:focus-visible { background: transparent; color: inherit; }
.cta--ghost:hover, .cta--ghost:focus-visible { background: var(--ink); color: var(--silver); }
.cta:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* --- a11y --- */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--ink);
	color: var(--bone);
}
.skip-link:focus { left: 16px; top: 16px; }

.screen-reader-text {
	clip-path: inset(50%);
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}