@charset "UTF-8";
/**
 * Catcha 2026 — hero, page header, section furniture
 *
 * 07 Hero / 08 Page header / 09 Section furniture (labels, headings)
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 07  HERO  (light, typographic — no background image)
 * ================================================================== */
.hero {
	position: relative;
	padding-block: clamp(72px, 7.5vw, 116px) clamp(56px, 6vw, 92px);
	background: var(--ground);
	border-bottom: 1px solid var(--line-soft);
	overflow: hidden;
}
.hero__bg { display: none; }

.hero__inner { position: relative; }
.hero__grid { display: grid; gap: clamp(36px, 4vw, 56px); align-items: center; }
@media (min-width: 940px) {
	.hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.hero__body { max-width: min(100%, 720px); }

/* Ticker — a caps line sitting on a rule, its entries divided by hairlines.
   Previously a bordered tag with a pulsing dot: a status-badge convention
   borrowed from dashboards, out of place above a masthead. */
.hero__ticker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 0 0 clamp(22px, 2.4vw, 30px);
	padding-top: 12px;
	border-top: 2px solid var(--ink);
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1.6;
}
.hero__ticker span { padding-inline: 14px; border-left: 1px solid var(--line); }
.hero__ticker span:first-child { padding-left: 0; border-left: 0; }

.hero__title { margin: 0; color: var(--ink); }
.hero__lede { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 30em; color: var(--ink-2); }
.hero__actions { margin: clamp(24px, 2.6vw, 34px) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* Single column: the call to action closes the hero rather than splitting
   the copy from the globe. The body dissolves into the grid so its button
   can be ordered after the globe without a second copy in the markup. */
@media (max-width: 939px) {
	.hero__grid { gap: 0; }
	.hero__body { display: contents; }
	.hero__globe { order: 1; margin-top: clamp(28px, 6vw, 44px); }
	.hero__actions { order: 2; }
}

/* ── Globe ───────────────────────────────────────────────────────────
 * A geodesic wireframe sphere drawn on canvas. Idles slowly; brightens
 * and accelerates on hover. See assets/globe.js.
 * ------------------------------------------------------------------ */
.hero__globe {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
	aspect-ratio: 1;
	touch-action: pan-y;
}
.hero__globe canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: grab;
}
.hero__globe canvas:active { cursor: grabbing; }
@media (max-width: 939px) {
	.hero__globe { max-width: 380px; }
}
@media (max-width: 560px) {
	.hero__globe { max-width: 300px; }
}

/* =====================================================================
 * 08  PAGE HEADER
 * ================================================================== */
/* A flat tinted plane closed by a rule. The soft red radial bloom that used
   to sit in the top corner is the sort of ambient gradient that dates a page
   instantly; a plane change and a hairline do the same job soberly. */
.page-head {
	position: relative;
	background: var(--tint-head);
	padding-block: clamp(72px, 7.5vw, 116px) clamp(40px, 4vw, 60px);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.page-head__grid { position: relative; display: grid; gap: clamp(18px, 2.4vw, 36px); }
@media (min-width: 900px) {
	.page-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.page-head__lede { color: var(--ink-3); font-size: var(--fs-lede); line-height: 1.55; max-width: 32em; }

/* =====================================================================
 * 09  SECTION FURNITURE
 * ================================================================== */
.section-head { margin-bottom: clamp(30px, 3.4vw, 56px); }
.section-head--split { display: grid; gap: 20px; }
@media (min-width: 900px) {
	.section-head--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.statement {
	font-family: var(--serif);
	font-size: clamp(23px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.018em;
	color: var(--ink);
	max-width: 22em;
	text-wrap: balance;
}