/* =========================================================
   Typography — geometric sans, lowercase brand voice.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	font-feature-settings: "ss01", "ss02", "cv11";
	transition: background .3s var(--ease), color .3s var(--ease);
}

img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0;
	color: var(--ink);
	text-wrap: balance;
}

h1 {
	font-size: clamp(3.5rem, 11vw, 11rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: .9;
}
h2 {
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	letter-spacing: -0.02em;
	line-height: .95;
}
h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -0.025em; }
h4 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.015em; }

p { margin: 0 0 1em; text-wrap: pretty; }

.lowercase { text-transform: lowercase; }

.kicker {
	font-family: var(--font-mono);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--muted);
	display: inline-flex; align-items: center; gap: .5em;
}
.kicker::before {
	content: "○"; color: var(--muted-2); font-size: .8em;
}

.lede {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: var(--ink);
	line-height: 1.55;
	max-width: 54ch;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.muted { color: var(--muted); }

/* Italic accent — only for rare emphasis in display text */
.italic {
	font-family: var(--font-accent-serif);
	font-style: italic;
	font-weight: 300;
	color: var(--accent-deep);
	letter-spacing: -0.02em;
}

/* Section labels — small circle + lowercase */
.section-label {
	font-family: var(--font-mono);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: lowercase;
	color: var(--muted);
	display: inline-flex; align-items: center; gap: .6em;
	margin-bottom: 2rem;
}
.section-label::before {
	content: "";
	width: 8px; height: 8px;
	border: 1px solid var(--muted);
	border-radius: 50%;
	display: inline-block;
}
.section-label.on { color: var(--ink); }
.section-label.on::before { background: var(--ink); border-color: var(--ink); }

/* Language-conditional visibility — any element marked [data-lang-only="en"] or
   [data-lang-only="cy"] only renders when the page's html[lang] matches. Used
   by the Hafn hero word-order flip and by portfolio Welsh translations. */
html:not([lang^="cy"]) [data-lang-only="cy"] { display: none; }
html[lang^="cy"]       [data-lang-only="en"] { display: none; }