/* QDE 2026 base — Brand System v3.0
 * Reset + typographic foundation. Roboto, paper background, structural register.
 * All scoped under .qde-2026 so it ports cleanly into Squarespace.
 */

html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background: var(--paper, #FFFFFF);
	color: var(--qde-ink, #000000);
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--qde-red); color: var(--paper); }

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

button {
	font: inherit;
}

/* QDE namespace base */

.qde-2026 {
	font-family: var(--qde-font-body);
	font-weight: var(--qde-weight-regular);
	font-size: var(--qde-text-base);
	line-height: var(--qde-leading-normal);
	color: var(--qde-ink);
	background: var(--paper);
}

.qde-2026 h1,
.qde-2026 h2,
.qde-2026 h3,
.qde-2026 h4 {
	font-family: var(--qde-font-headline);
	font-weight: var(--qde-weight-bold);
	margin: 0;
}

.qde-2026 h1 {
	font-size: var(--qde-text-2xl);
	line-height: var(--qde-leading-snug);
	letter-spacing: var(--qde-tracking-snug);
	font-weight: var(--qde-weight-black);
}

.qde-2026 h2 {
	font-size: var(--qde-text-xl);
	line-height: var(--qde-leading-snug);
	letter-spacing: var(--qde-tracking-snug);
}

.qde-2026 h3 {
	font-size: var(--qde-text-lg);
	line-height: var(--qde-leading-snug);
	font-weight: var(--qde-weight-medium);
}

.qde-2026 p {
	margin: 0 0 var(--qde-space-3);
	max-width: 64ch;
	text-wrap: pretty;
}

.qde-2026 p:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────────
 * V3.0 PRIMITIVES — usable as-is on any page
 * ───────────────────────────────────────────────── */

.qde-2026 .h-display {
	font-family: var(--qde-font-headline);
	font-weight: var(--qde-weight-black);
	font-size: var(--qde-text-3xl);
	line-height: var(--qde-leading-tight);
	letter-spacing: var(--qde-tracking-tight);
	margin: 0;
	color: var(--qde-ink);
}
.qde-2026 .h-display .red { color: var(--qde-red); }

.qde-2026 .h-display--xl  { font-size: var(--qde-text-4xl); }     /* D1, hero / chapter cover */
.qde-2026 .h-display--lg  { font-size: var(--qde-text-3xl); }     /* D2, default display */
.qde-2026 .h-display--md  { font-size: var(--qde-text-2xl); font-weight: var(--qde-weight-bold); }   /* H1 */

.qde-2026 .h-eyebrow {
	font-family: var(--qde-font-headline);
	font-weight: var(--qde-weight-medium);
	font-size: 11px;
	letter-spacing: var(--qde-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--qde-ink);
	opacity: 0.6;
	margin: 0 0 var(--qde-space-2);
	display: block;
}

.qde-2026 .body {
	font-size: var(--qde-text-base);
	line-height: var(--qde-leading-normal);
	max-width: 44ch;
	font-weight: var(--qde-weight-regular);
	color: var(--qde-ink);
}

.qde-2026 .body--muted { color: var(--muted); }
.qde-2026 .body--lede  {
	font-size: var(--qde-text-md);
	line-height: 1.45;
	max-width: 56ch;
}

.qde-2026 .tag-mono {
	font-family: var(--qde-font-headline);
	font-weight: var(--qde-weight-medium);
	font-size: 11px;
	letter-spacing: var(--qde-tracking-mono);
	text-transform: uppercase;
	color: var(--qde-ink);
	opacity: 0.65;
}

/* 12-col grid, gap 16px (v3.0 spec) */
.qde-2026 .grid12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
}

@media (max-width: 1023px) {
	.qde-2026 .grid12 {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media (max-width: 639px) {
	.qde-2026 .grid12 {
		grid-template-columns: 1fr;
	}
}

/* Section variant: black */
.qde-2026 .section--dark {
	background: var(--qde-ink);
	color: var(--paper);
	--rule: rgba(255, 255, 255, 0.18);
	--muted: rgba(255, 255, 255, 0.6);
}
.qde-2026 .section--dark .h-display { color: var(--paper); }

/* Section variant: red */
.qde-2026 .section--red {
	background: var(--qde-red);
	color: var(--paper);
	--rule: rgba(255, 255, 255, 0.28);
}
.qde-2026 .section--red .h-display { color: var(--paper); }
.qde-2026 .section--red .h-display .red { color: var(--paper); }

/* Section variant: bone */
.qde-2026 .section--bone { background: var(--bone); }

/* Legacy eyebrow alias — keep for migrating content. New code uses .h-eyebrow. */
.qde-2026 .qde-eyebrow {
	font-size: 11px;
	font-weight: var(--qde-weight-medium);
	letter-spacing: var(--qde-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--qde-ink);
	opacity: 0.6;
	margin: 0 0 var(--qde-space-2);
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}