/* =====================================================================
   Home-page hero stylesheet — loaded only on "/".
   Tokens, @font-face, body baseline, and the global site-nav/site-footer
   live in custom.css (which loads on every public page).
   ===================================================================== */

.home-hero-root,
.home-hero-root * {
	box-sizing: border-box;
}

.home-hero-root {
	overflow-x: hidden;
	margin: 0;
}

/* ============================================================
   Hero — fills the rest of the viewport below .site-nav
   ============================================================ */
.home-hero-root .hero {
	min-height: calc(100vh - var(--nav-height));
	padding: 0 48px 40px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.home-hero-root .stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.home-hero-root .kinetic-word {
	font-family: 'Recursive', sans-serif;
	font-size: clamp(64px, 14.5vw, 230px);
	line-height: 0.9;
	letter-spacing: -0.045em;
	display: flex;
	color: var(--ink);
	user-select: none;
	cursor: default;
}
.home-hero-root .kinetic-word span {
	display: inline-block;
	font-variation-settings: "wght" 400, "slnt" 0, "CASL" 0;
	will-change: font-variation-settings, transform;
}

.home-hero-root .tagline {
	font-size: clamp(15px, 1.5vw, 18px);
	font-variation-settings: "wght" 420, "CASL" 0.15;
	color: var(--ink);
	text-align: center;
	max-width: 32ch;
	line-height: 1.45;
	letter-spacing: -0.005em;
	text-wrap: balance;
	margin: 0;
}
.home-hero-root .tagline em {
	font-style: normal;
	color: var(--accent);
	font-variation-settings: "wght" 520, "slnt" -6, "CASL" 0.4;
}

.home-hero-root .pillars {
	display: flex;
	gap: 56px;
	justify-content: center;
	margin-top: 12px;
	font-size: 13px;
	font-variation-settings: "wght" 500, "MONO" 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.home-hero-root .pillars a {
	color: inherit;
	text-decoration: none;
	position: relative;
	cursor: pointer;
	transition: font-variation-settings 0.35s ease, color 0.25s ease;
	will-change: font-variation-settings;
}
.home-hero-root .pillars a::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 50%;
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
	transform: translateY(-50%) scale(0);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-hero-root .pillars a:hover {
	color: var(--ink);
	font-variation-settings: "wght" 700, "MONO" 1, "CASL" 0.3;
}
.home-hero-root .pillars a:hover::before {
	transform: translateY(-50%) scale(1);
}

.home-hero-root .hero-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 12px;
	color: var(--muted);
	font-variation-settings: "wght" 450, "MONO" 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.home-hero-root .hero-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.home-hero-root .hero-footer a:hover { color: var(--ink); }

/* ============================================================
   Page sections (below the hero)
   ============================================================ */
.home-hero-root .section {
	padding: 96px 48px;
	border-top: 1px solid var(--line);
}
.home-hero-root .section-inner {
	max-width: 1080px;
	margin: 0 auto;
}
.home-hero-root .section-label {
	font-size: 12px;
	font-variation-settings: "wght" 500, "MONO" 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 28px;
}
.home-hero-root .section-heading {
	font-family: 'Recursive', sans-serif;
	font-size: clamp(32px, 5vw, 56px);
	font-variation-settings: "wght" 600, "slnt" 0, "CASL" 0.2;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--ink);
	margin: 0 0 56px;
	max-width: 18ch;
	font-weight: normal;
}
.home-hero-root .section-heading em {
	font-style: normal;
	color: var(--accent);
	font-variation-settings: "wght" 600, "slnt" -6, "CASL" 0.5;
}

/* ============================================================
   Modules grid
   ============================================================ */
.home-hero-root .modules-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.home-hero-root .module-card {
	background: var(--bg);
	padding: 32px 28px;
	cursor: default;
	transition: background 0.3s;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.home-hero-root .module-card:hover { background: #faf8f3; }
.home-hero-root .module-card .num {
	font-size: 11px;
	font-variation-settings: "wght" 500, "MONO" 1;
	letter-spacing: 0.1em;
	color: var(--muted);
	text-transform: uppercase;
}
.home-hero-root .module-card .name {
	font-family: 'Recursive', sans-serif;
	font-size: 24px;
	font-variation-settings: "wght" 600, "slnt" 0, "CASL" 0.15;
	letter-spacing: -0.015em;
	color: var(--ink);
	line-height: 1.1;
	transition: font-variation-settings 0.4s ease, color 0.25s ease;
}
.home-hero-root .module-card:hover .name {
	font-variation-settings: "wght" 700, "slnt" -4, "CASL" 0.4;
	color: var(--accent);
}
.home-hero-root .module-card .desc {
	font-size: 14px;
	font-variation-settings: "wght" 420, "CASL" 0.1;
	color: var(--muted);
	line-height: 1.5;
	margin-top: 4px;
}

/* ============================================================
   Selected work
   ============================================================ */
.home-hero-root .work-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--line);
}
.home-hero-root .work-item {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	gap: 40px;
	padding: 32px 0;
	border-bottom: 1px solid var(--line);
	align-items: center;
	cursor: default;
}
.home-hero-root .work-item .logo-slot {
	font-family: 'Recursive', sans-serif;
	font-size: 18px;
	font-variation-settings: "wght" 700, "slnt" 0, "CASL" 0.3;
	color: var(--ink);
	letter-spacing: -0.01em;
	transition: font-variation-settings 0.4s ease, color 0.25s ease;
}
.home-hero-root .work-item:hover .logo-slot {
	font-variation-settings: "wght" 800, "slnt" -4, "CASL" 0.5;
	color: var(--accent);
}
.home-hero-root .work-item .work-desc {
	font-size: 15px;
	font-variation-settings: "wght" 430, "CASL" 0.1;
	color: var(--ink);
	line-height: 1.5;
	max-width: 60ch;
}
.home-hero-root .work-item .work-meta {
	font-size: 11px;
	font-variation-settings: "wght" 500, "MONO" 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: right;
	white-space: nowrap;
}

/* ============================================================
   CTA
   ============================================================ */
.home-hero-root .cta {
	padding: 120px 48px;
	border-top: 1px solid var(--line);
	text-align: center;
}
.home-hero-root .cta-inner {
	max-width: 680px;
	margin: 0 auto;
}
.home-hero-root .cta-line {
	font-family: 'Recursive', sans-serif;
	font-size: clamp(28px, 4.5vw, 48px);
	font-variation-settings: "wght" 550, "slnt" 0, "CASL" 0.3;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0 0 40px;
	text-wrap: balance;
}
.home-hero-root .cta-line em {
	font-style: normal;
	color: var(--accent);
	font-variation-settings: "wght" 600, "slnt" -6, "CASL" 0.5;
}
.home-hero-root .cta-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	background: var(--ink);
	color: var(--bg);
	text-decoration: none;
	border-radius: 100px;
	font-size: 14px;
	font-variation-settings: "wght" 550, "MONO" 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background 0.25s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-hero-root .cta-button:hover {
	background: var(--accent);
	transform: translateY(-2px);
}
.home-hero-root .cta-button .arrow {
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-hero-root .cta-button:hover .arrow {
	transform: translateX(4px);
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 720px) {
	.home-hero-root .hero { padding: 0 24px 28px; }
	.home-hero-root .pillars { gap: 28px; font-size: 11px; }
	.home-hero-root .hero-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
	.home-hero-root .stage { gap: 22px; }

	.home-hero-root .section { padding: 64px 24px; }
	.home-hero-root .section-heading { margin-bottom: 36px; }
	.home-hero-root .modules-grid { grid-template-columns: 1fr; }

	.home-hero-root .work-item {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 24px 0;
	}
	.home-hero-root .work-item .work-meta { text-align: left; }

	.home-hero-root .cta { padding: 80px 24px; }
}

/* ============================================================
   Reduced motion — JS bails before the loop; this just turns off
   the per-letter transitions so they stay at neutral defaults.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.home-hero-root .kinetic-word span {
		transition: none;
	}
}