/* ============================================================
 * Flo Geier — typography.css
 * Loaded AFTER main.css. Owns: type scale, weight ladder,
 * OpenType features, color discipline (rust diet),
 * vertical rhythm tuning.
 *
 * UNIFIED WEIGHT LADDER (Fraunces variable, optical-size 9–144):
 *   --w-display : 440  (oversized hero / cta headline)
 *   --w-headline: 540  (h2 / h3 section / project titles)
 *   --w-meta    : 500  (eyebrow / kicker / tabular numbers)
 *   --w-body    : 400  (body, italic em accents)
 *
 *   Fraunces italic uses opsz 28–72 (we set per-instance).
 *
 * COLOR DISCIPLINE — RUST DIET:
 *   rust is reserved for exactly TWO roles:
 *     1. Primary CTA (background + hover-into on header CTA)
 *     2. The single italic <em> in the .quote section
 *        + the :hover color of .link-arrow (acts as an action signal)
 *   Everywhere else: --moss-700 / --ink-soft / --moss-200 hairlines.
 * ============================================================ */

:root {
	--w-display:  440;
	--w-headline: 540;
	--w-meta:     500;
	--w-body:     400;

	/* Hairline rules use moss not rust */
	--rule:        1px solid var(--moss-200);
	--rule-strong: 1px solid oklch(from var(--moss-700) l c h / 0.55);
}

/* ------------------------------------------------------------
 * BODY — kerning, ligatures, contextual alts (Inter ss01),
 * Fraunces variable axes for inheritance.
 * ------------------------------------------------------------ */
body {
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'cv11' 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Body proportional/oldstyle figures — Inter feels editorial */
body, p, li, label, input, textarea, select, button {
	font-variant-numeric: oldstyle-nums proportional-nums;
}

/* ------------------------------------------------------------
 * UNIFIED HEADING LADDER — overrides main.css for h1–h6
 * Fraunces with proper opsz axis and discretionary ligatures.
 * ------------------------------------------------------------ */
:where(h1, h2, h3, h4, h5) {
	font-family: var(--font-display);
	font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'salt' 1, 'ss01' 1;
	font-variation-settings: 'opsz' 48, 'SOFT' 50;
	color: var(--moss-900);
}

h1, .page-hero__title, .hero__title {
	font-weight: var(--w-display);
	font-variation-settings: 'opsz' 96, 'SOFT' 30;
	letter-spacing: -0.028em;
	line-height: 1.02;
}

h2, .section-head__title, .material-strip__caption h2,
.werkstatt-teaser__text h2, .cta-strip h2 {
	font-weight: var(--w-headline);
	font-variation-settings: 'opsz' 72, 'SOFT' 50;
	letter-spacing: -0.022em;
	line-height: 1.06;
}

h3, .editorial-row__text h3, .projekt-card h3,
.leistung-block__text h2, .projekt-detail__title {
	font-weight: var(--w-headline);
	font-variation-settings: 'opsz' 48, 'SOFT' 70;
	letter-spacing: -0.016em;
	line-height: 1.1;
}

/* h6 / kicker labels — Inter, never Fraunces */
h6, .kicker, .material-strip__kicker, .hero__eyebrow,
.werkstatt-teaser__text .kicker {
	font-family: var(--font-body);
	font-weight: var(--w-meta);
	font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--moss-700);
}

/* Body paragraphs — pretty wrap + ss01 alt */
:where(p) {
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
	text-wrap: pretty;
}

/* Editorial body — slightly tighter measure */
.editorial-row__text p,
.leistung-block__text p,
.about-portrait__text p,
.werkstatt-teaser__text p,
.projekt-detail__body p {
	line-height: 1.55;
	max-width: 65ch;
}

/* ------------------------------------------------------------
 * NUMBERS — tabular, lining, moss not rust.
 * ------------------------------------------------------------ */
.section-head__num,
.editorial-row__num,
.leistung-block__num,
.page-hero__num {
	color: var(--moss-700);
	font-weight: var(--w-meta);
	font-feature-settings: 'kern' 1, 'lnum' 1, 'tnum' 1;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.04em;
}

/* Hairline above the section number — moss, not rust */
.section-head__num,
.page-hero__num {
	border-top-color: var(--moss-200);
}

.timeline__year,
.projekt-detail__fact-v,
.leistung-block__fact-value {
	font-feature-settings: 'kern' 1, 'lnum' 1, 'tnum' 1;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--moss-900);
	font-weight: var(--w-headline);
}

/* ------------------------------------------------------------
 * HERO TITLE — display variant, Fraunces opsz 96–144.
 * Better legibility on photo without a heavy black overlay.
 * ------------------------------------------------------------ */
.hero__title {
	font-size: clamp(2.6rem, 6.4vw, 5.4rem);
	font-weight: var(--w-display);
	letter-spacing: -0.03em;
	line-height: 1.0;
	color: var(--clay-50);
	/* halo of moss-900 separation, not a panel */
	text-shadow:
		0 1px 2px oklch(from var(--moss-900) l c h / 0.18),
		0 12px 40px oklch(from var(--moss-900) l c h / 0.30);
}

.hero__title--display {
	font-size: clamp(2.9rem, 7.2vw, 6.4rem);
	font-variation-settings: 'opsz' 144, 'SOFT' 30;
	letter-spacing: -0.04em;
	line-height: 0.98;
}

/* Hero italic accent — luminous clay, NOT rust.
   Rust lives only in the quote em. */
.hero__title em {
	font-style: italic;
	font-weight: var(--w-display);
	font-variation-settings: 'opsz' 72, 'SOFT' 80;
	color: oklch(from var(--clay-50) l c h / 0.92);
	letter-spacing: -0.035em;
}

.hero__eyebrow {
	font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1;
	color: oklch(from var(--clay-50) l c h / 0.78);
}

.hero__lede {
	max-width: 52ch;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ------------------------------------------------------------
 * HERO CAPTION — replace rust border-left with kicker label.
 * ------------------------------------------------------------ */
.hero__caption {
	border-left: 0;
	padding: 22px 26px 24px;
}
.hero__caption-kicker {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: var(--w-meta);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--moss-700);
	margin: 0 0 10px;
}
.hero__caption-meta {
	font-family: var(--font-display);
	font-size: 0.96rem;
	font-weight: var(--w-meta);
	letter-spacing: 0;
	text-transform: none;
	color: var(--moss-900);
	margin: 0 0 6px;
	font-feature-settings: 'kern' 1, 'lnum' 1, 'tnum' 1;
}
.hero__caption-text {
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------
 * QUOTE — substantial without dead air.
 * Rust em is the SINGULAR rust accent in editorial text.
 * ------------------------------------------------------------ */
.quote {
	padding: clamp(72px, 11vh, 130px) var(--gut);
}
.quote p {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 4vw, 3.4rem);
	font-weight: var(--w-display);
	font-variation-settings: 'opsz' 96, 'SOFT' 50;
	line-height: 1.16;
	letter-spacing: -0.025em;
	max-width: 32ch;
	color: var(--moss-900);
	text-wrap: balance;
}
.quote p em {
	font-style: italic;
	font-weight: var(--w-display);
	font-variation-settings: 'opsz' 48, 'SOFT' 100;
	color: var(--rust);
	letter-spacing: -0.022em;
}
.quote__attr {
	margin-top: 36px !important;
	font-family: var(--font-body) !important;
	font-size: 0.82rem !important;
	font-weight: var(--w-meta) !important;
	color: var(--ink-soft) !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------
 * SECTION-HEAD RHYTHM — vary, don't repeat.
 * ------------------------------------------------------------ */
.section-head--lg {
	padding-top: clamp(110px, 16vh, 200px);
	padding-bottom: clamp(48px, 8vh, 96px);
}
.section-head--lg .section-head__title {
	font-size: clamp(2.4rem, 5.4vw, 4.4rem);
	letter-spacing: -0.034em;
}

.section-head--tight {
	padding-top: clamp(56px, 8vh, 96px);
	padding-bottom: clamp(32px, 5vh, 56px);
}

.section-head__title {
	font-weight: var(--w-headline);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.page-hero__title {
	font-weight: var(--w-display);
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* ------------------------------------------------------------
 * MATERIAL STRIP / WERKSTATT / CTA — uniform weight.
 * ------------------------------------------------------------ */
.material-strip__caption h2,
.werkstatt-teaser__text h2 {
	font-weight: var(--w-headline);
	letter-spacing: -0.028em;
	text-wrap: balance;
}
.cta-strip h2 {
	font-weight: var(--w-display);
	font-variation-settings: 'opsz' 144, 'SOFT' 40;
	letter-spacing: -0.034em;
	text-wrap: balance;
}

/* ------------------------------------------------------------
 * EDITORIAL ROW & PROJEKT CARD titles — unified.
 * ------------------------------------------------------------ */
.editorial-row__text h3,
.projekt-card h3,
.projekt-detail__title,
.leistung-block__text h2 {
	font-weight: var(--w-headline);
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.projekt-card__meta,
.projekt-detail__loc {
	font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: var(--w-meta);
}

/* ------------------------------------------------------------
 * LIST BULLETS — moss, not rust.
 * ------------------------------------------------------------ */
.leistung-block__list li::before {
	background: var(--moss-700);
}
.leistung-block__list li {
	font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
}

/* ------------------------------------------------------------
 * LINKS — moss border replaces rust border on inline links;
 * link-arrow keeps rust ONLY on hover (action signal = role 2).
 * ------------------------------------------------------------ */
.text-link,
.kontakt__sidebar address a,
.legal-content a {
	color: var(--moss-900);
	border-bottom: 1px solid oklch(from var(--moss-700) l c h / 0.45);
	padding-bottom: 1px;
	transition: border-color 0.2s var(--ease-out-q), color 0.2s var(--ease-out-q);
}
.text-link:hover,
.kontakt__sidebar address a:hover,
.legal-content a:hover {
	color: var(--moss-900);
	border-bottom-color: var(--moss-900);
}

.link-arrow {
	border-bottom-color: oklch(from var(--moss-700) l c h / 0.55);
}

/* ------------------------------------------------------------
 * HEADER NAV — underline animates in moss, not rust.
 * ------------------------------------------------------------ */
.site-header__nav a::after {
	background: var(--moss-700);
}

/* ------------------------------------------------------------
 * SECTION NUMBER HAIRLINES — neutralize motion.css + signature.css
 * rust pseudos. Both files load AFTER typography.css, so !important
 * wins. The animated bar AND the chisel notch above every "01"/"02"
 * must be moss, not rust.
 * ------------------------------------------------------------ */
.section-head__num::before,
.page-hero__num::before,
.editorial-row__num::before,
.leistung-block__num::before {
	background: var(--moss-700) !important;
}

/* signature.css adds a 2nd "chisel notch" pseudo — also rust. Neutralize. */
.section-head__num::after,
.page-hero__num::after,
.editorial-row__num::after,
.leistung-block__num::after {
	background: var(--moss-700) !important;
}

/* Project title underline-on-hover — also moss. */
.projekt-card h3::after {
	background: var(--moss-700) !important;
}

/* Scroll-progress / sticky-header hairline — anti-pattern in DESIGN.md;
   mute the scroll-progress bar that motion.css renders on .site-header. */
.scroll-progress,
[data-scroll-progress],
.site-header::before {
	background: var(--moss-700) !important;
}

/* Site-header bottom rust hairline (signature.css "kerf" / scroll line) */
.site-header::after { background: var(--moss-700) !important; }

/* Kerf hairlines (signature.css) — moss, not rust */
.quote::before,
.material-strip::before,
.projekte-teaser::before,
.werkstatt-teaser::before {
	background: var(--moss-700) !important;
}

/* Hero veil shouldn't gain a rust accent from any later file */
.hero__veil::before, .hero__veil::after { background: transparent !important; }

/* Active nav link "current page" rust dot → moss */
.site-header__nav a.is-current::before,
.site-header__nav a[aria-current='page']::before {
	background: var(--moss-700) !important;
}

/* Skip link focus border — keep moss outline (no rust) */
.skip-link:focus { outline-color: var(--moss-700); }

/* ------------------------------------------------------------
 * KONTAKT focus — soft moss ring instead of rust border swap.
 * ------------------------------------------------------------ */
.kontakt__field input:focus,
.kontakt__field textarea:focus,
.kontakt__field select:focus {
	border-color: var(--moss-700);
	box-shadow: 0 0 0 3px oklch(from var(--moss-700) l c h / 0.18);
}

/* ------------------------------------------------------------
 * TIMELINE / TEAM — body weight discipline.
 * ------------------------------------------------------------ */
.timeline__entry h3,
.team__name {
	font-weight: var(--w-headline);
	font-variation-settings: 'opsz' 36, 'SOFT' 70;
	letter-spacing: -0.012em;
}
.team__role {
	font-weight: var(--w-meta);
	font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ------------------------------------------------------------
 * MOBILE — preserve readability.
 * ------------------------------------------------------------ */
@media (max-width: 720px) {
	.hero__title {
		font-size: clamp(2.2rem, 9vw, 3.4rem);
		letter-spacing: -0.025em;
	}
	.hero__title--display {
		font-size: clamp(2.4rem, 10vw, 3.8rem);
		letter-spacing: -0.03em;
	}
	.quote p {
		font-size: clamp(1.5rem, 6vw, 2.1rem);
		max-width: 22ch;
	}
	.section-head--lg {
		padding-top: clamp(80px, 12vh, 130px);
	}
}