/* ---------------------------------------------------------------------------
 * Kristoffer Canimo 2026 — reset and element defaults.
 * ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	/* Nothing may force a sideways scroll. `clip` rather than `hidden` so
	   position: sticky keeps working. */
	overflow-x: clip;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	/* Clash Grotesk is a variable face covering 200-700, so every weight the
	   page asks for is real and font-synthesis-weight has nothing to fake.
	   Clash at 450: its own 400 read thin and 500 read heavy, and 450 is a
	   real point on the variable axis rather than a synthesised weight. This
	   is the chrome size; prose sets its own below. */
	font-weight: 450;
	letter-spacing: 0;
	font-size: clamp(.9375rem, .91rem + .14vw, 1rem);
	line-height: 1.62;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* --- prose ------------------------------------------------------------
 * The only place Univers is used: paragraphs of prose.
 * -------------------------------------------------------------------- */
.kc-content p,
.kc-content li,
.kc-prose,
.kc-prose p,
.kc-storyhead__standfirst,
.kc-article p {
	font-family: var(--font-text);
	font-weight: 400;
	font-size: clamp(1rem, .97rem + .14vw, 1.0625rem);
	line-height: 1.64;
}

/* Story paragraphs, set after theperformancelab.ca's article prose: small and
   fluid (0.9375vw — 12px at 1280, 13.5px at 1440, capped at 18px), 13.5px
   on a phone as theirs is, 1.4 line height and a paragraph gap of .89em.
   The measure is 27em: 8-10 words a line in Univers. */
.kc-article p {
	font-size: clamp(.75rem, .9375vw, 1.125rem);
	line-height: 1.4;
	max-width: 27em;
}
@media (max-width: 767px) {
	.kc-article p { font-size: .84375rem; }
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	/* Regular, not Bold. Clash has enough character in its letterforms that a
	   heading does not need weight to read as one — size and space do it. The
	   negative tracking goes with the bold: at 400 the letterfit is already
	   right, and pulling it tighter only muddies the counters. */
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.005em;
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
	color: inherit;
	text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
	text-underline-offset: .2em;
	text-decoration-thickness: from-font;
	transition: text-decoration-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

img, svg, video { display: block; max-width: 100%; height: auto; }

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--sp-7) 0;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }

button { font: inherit; color: inherit; }

/* No outline anywhere — not the browser's blue ring and not one of our own.
   Clicking or tapping leaves nothing behind at all.

   Keyboard focus still has to be visible or the site cannot be navigated
   without a mouse, so it is drawn as a soft monochrome halo instead of a ring:
   quiet enough to disappear into the design, present enough to follow. */
/* Everything, not a list of the usual suspects. A <dialog> is focusable and
   takes focus when whatever had it goes away — a nav button reaching the end
   of a run and disabling itself, say — and the browser then rings the whole
   dialog in blue. It was never in the list. */
:where(*):focus { outline: none; }

/* The halo is only for the things a keyboard actually travels between. A
   container that catches focus by default has nothing to say with one. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 2px;
}

::selection { background: color-mix(in oklab, var(--ink) 18%, transparent); }

/* --- shared editorial primitives -------------------------------------- */

/* An uppercase tracked label is chrome, not prose: it stays on the grotesque.
   A serif set in caps at .16em tracking loses everything that makes it a
   serif and keeps only the awkwardness. */
.kc-eyebrow {
	font-family: var(--font-display);
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 var(--sp-4);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kc-skip {
	position: absolute;
	top: -100%;
	left: var(--gutter);
	z-index: 100;
	padding: var(--sp-3) var(--sp-4);
	background: var(--bg-raised);
	color: var(--ink);
	box-shadow: var(--shadow-lift);
	text-decoration: none;
}
.kc-skip:focus-visible { top: var(--sp-4); }