/* ============================================================
 * Flo Geier — signature.css
 * Brand fingerprint: logo lockup, wood-line, paper-grain, kerfs,
 * footer engraved stamp. Owns --sig-* tokens.
 * ============================================================ */

:root {
	/* Signature tokens */
	--sig-line: oklch(from var(--moss-700) l c h / 0.55);
	--sig-line-strong: var(--moss-700);
	--sig-rust-line: var(--rust);
	--sig-kerf: oklch(from var(--moss-700) l c h / 0.18);

	/* Wood-line geometry */
	--sig-line-len: 56px;
	--sig-line-thick: 1px;
	--sig-notch-w: 8px;
	--sig-notch-h: 5px;
}

/* ============================================================
 *  PAPER-GRAIN TEXTURE — subtle, warm, on clay surfaces
 *  Inline SVG fractal noise. ~3KB. Tiled, fixed.
 * ============================================================ */
body {
	background-image:
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 220px 220px;
	background-attachment: fixed;
}

/* Suppress paper grain over media-heavy sections so it doesn't band on photos. */
.hero,
.material-strip,
.werkstatt-teaser,
.cta-strip,
.site-footer {
	background-image: none;
}

/* The dark sections get a much fainter sand-tone tile. */
.cta-strip,
.site-footer { position: relative; }
.cta-strip::after,
.site-footer::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 220px 220px;
	mix-blend-mode: overlay;
	opacity: 0.30;
	z-index: 0;
}
.cta-strip > *,
.site-footer > * { position: relative; z-index: 1; }

/* ============================================================
 *  LOGO — sizes & placement
 * ============================================================ */
.flogeier-logo {
	color: var(--moss-900);
	height: auto;
}
/* Header lockup */
.site-header__brand .flogeier-logo--lockup { width: 188px; }

/* Footer lockup — bigger, light against moss-900 */
.site-footer__brand .flogeier-logo--lockup,
.site-footer__brand .flogeier-logo {
	width: 220px;
	color: var(--clay-50);
	margin-bottom: 22px;
}
.site-footer__brand .flogeier-logo--lockup text { fill: var(--clay-50); }

@media (max-width: 720px) {
	.site-header__brand .flogeier-logo--lockup { width: 152px; }
}

/* ============================================================
 *  THE WOOD-LINE — signature gesture
 *  A 1px hairline + a chiseled notch at the start.
 *  Replaces the rust top-rule on numbered elements.
 * ============================================================ */
.section-head__num,
.editorial-row__num,
.leistung-block__num,
.page-hero__num {
	position: relative;
	border-top: none !important;
	padding-top: 18px;
	color: var(--moss-700);
	letter-spacing: 0.14em;
	font-feature-settings: 'tnum';
	display: inline-block;
}

/* The line itself */
.section-head__num::before,
.editorial-row__num::before,
.leistung-block__num::before,
.page-hero__num::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: var(--sig-line-len);
	height: var(--sig-line-thick);
	background: var(--sig-line-strong);
}

/* The notch — a small chisel-tab at the start of the line */
.section-head__num::after,
.editorial-row__num::after,
.leistung-block__num::after,
.page-hero__num::after {
	content: "";
	position: absolute;
	left: 0; top: 1px;
	width: var(--sig-notch-w);
	height: var(--sig-notch-h);
	background: var(--rust);
}

/* ============================================================
 *  KERF — short 2px vertical gap detail between section transitions
 * ============================================================ */
.quote::before,
.material-strip::before,
.projekte-teaser::before,
.werkstatt-teaser::before {
	content: "";
	position: absolute;
	left: var(--gut);
	top: 0;
	width: 2px; height: 32px;
	background: var(--sig-kerf);
	pointer-events: none;
	z-index: 2;
}
.material-strip::before,
.werkstatt-teaser::before {
	background: oklch(from var(--clay-50) l c h / 0.22);
}

/* ============================================================
 *  ACTIVE NAV — woodline underline with chiseled notch
 * ============================================================ */
.site-header__nav a.is-current,
.site-header__nav a[aria-current='page'] {
	color: var(--moss-900);
}
.site-header__nav a.is-current::after,
.site-header__nav a[aria-current='page']::after {
	right: 0 !important;
	background: var(--moss-900);
	height: 1px;
}
.site-header__nav a.is-current::before,
.site-header__nav a[aria-current='page']::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 6px; height: 4px;
	background: var(--rust);
}

/* ============================================================
 *  FOOTER — engraved stamp (faded FG monogram + Werkstatt line)
 * ============================================================ */
.site-footer__stamp {
	max-width: var(--max);
	margin: 0 auto;
	padding: 26px var(--gut) 6px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-footer__stamp .flogeier-logo--stamp {
	width: 32px; height: 32px;
	color: oklch(from var(--clay-50) l c h / 0.22);
	flex: none;
}
.site-footer__stamp-text {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: oklch(from var(--clay-50) l c h / 0.32);
	font-feature-settings: 'tnum';
}

/* CodLab badge — keep deliberately subordinate */
.codlab-glass-badge {
	opacity: 0.78;
}
.codlab-glass-badge:hover { opacity: 1; }

/* ============================================================
 *  HEADER — refine padding for the lockup height
 * ============================================================ */
.site-header__bar { padding-top: 14px; padding-bottom: 14px; }
.site-header__brand { line-height: 0; }

/* ============================================================
 *  ACCESSIBILITY
 * ============================================================ */
@media (prefers-contrast: more) {
	:root {
		--sig-line-strong: var(--moss-900);
	}
	body { background-image: none; }
	.cta-strip::after, .site-footer::after { display: none; }
}