/* ============================================================
   Creativ Razor / Base: reset, type scale, grounds
   Mobile-first: base styles target 375px, complexity is added at
   48rem and 64rem, never removed.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--cr-ink);
	/* Keeps sticky-nav offset correct when jumping to an anchor. */
	scroll-padding-top: calc(var(--cr-nav-h) + 1rem);
}

body {
	font-family: var(--cr-font);
	font-weight: 400;
	font-size: var(--cr-fs-body);
	/* Light type on dark reads lighter, so it gets extra leading. */
	line-height: 1.65;
	color: var(--cr-fg);
	background: var(--cr-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Growla sets `body{font-family:Poppins}` inline at equal specificity and
   later in the head, so it needs beating explicitly. */
html body, html body p, html body a, html body li, html body span,
html body div, html body h1, html body h2, html body h3, html body button,
html body input, html body textarea { font-family: var(--cr-font); }

img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--cr-amber); color: var(--cr-ink); }

/* Every interactive element gets a visible ring. */
:focus-visible { outline: 2px solid var(--cr-amber); outline-offset: 3px; border-radius: 1px; }

/* ---- Layout primitives ------------------------------------------- */
.cr-container { width: 100%; max-width: var(--cr-maxw); margin-inline: auto; padding-inline: var(--cr-gut); }
.cr-section { padding-block: var(--cr-section); background: var(--cr-bg); color: var(--cr-fg); position: relative; }

/* Grounds. Pairs with .cr-on-* from tokens.css so the whole subtree
   inherits the right --cr-fg / --cr-accent contract. */
.cr-section--ink   { background: var(--cr-ink); }
.cr-section--panel { background: var(--cr-ink-2); }
.cr-section--bone  { background: var(--cr-bone); }

/* ---- Type -------------------------------------------------------- */
.cr-display, .cr-h2 {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-wrap: balance;
}
.cr-display { font-size: var(--cr-fs-display); }
.cr-h2 { font-size: var(--cr-fs-h2); }

.cr-h3 {
	font-weight: 700;
	font-size: var(--cr-fs-h3);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.15;
	text-wrap: balance;
}

.cr-label {
	font-weight: 700;
	font-size: var(--cr-fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cr-accent-quiet);
	display: block;
}

.cr-lead {
	font-size: var(--cr-fs-lead);
	line-height: 1.55;
	max-width: var(--cr-measure);
	color: var(--cr-fg-mute);
	text-wrap: pretty;
}
.cr-muted { color: var(--cr-fg-mute); }

/* ---- The brand device: one italic, one idea ----------------------
   "One italicised word per headline. The italic carries the meaning,
   never decoration." + "Always keep the italic."
   A real Montserrat italic. Amber on ink; on bone the ground contract
   drops it to ink, because amber on bone is 1.56:1.
   ------------------------------------------------------------------ */
.cr-em {
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--cr-accent);
	text-transform: none;
}

/* ---- Ruled eyebrow: label plus a hairline to the edge ------------- */
.cr-eyebrow {
	display: grid;
	grid-template-columns: minmax(0, max-content) 1fr;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.75rem);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.cr-eyebrow::after {
	content: '';
	height: 1px;
	background: var(--cr-hair);
	transform-origin: left;
}

/* ---- Utilities ---------------------------------------------------- */
.cr-skip {
	position: absolute; left: -999px; top: 0; z-index: 999;
	background: var(--cr-amber); color: var(--cr-ink);
	padding: 0.75rem 1.25rem; font-weight: 700; font-size: 0.8rem;
}
.cr-skip:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}