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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@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;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	margin: 0 0 var(--sp-4);
	color: var(--color-primary-strong);
	text-wrap: balance;
}

/* Display sizes (h1/h2) sit tight — they're rarely more than two lines.
   Heading sizes (h3-h6) get more room since card/section titles wrap more often. */
h1, h2 { line-height: var(--lh-display); letter-spacing: -0.01em; }
h3, h4, h5, h6 { line-height: var(--lh-heading); }

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4, h5, h6 { font-size: var(--fs-xl); }

@media (min-width: 768px) {
	h1 { font-size: var(--fs-5xl); }
	h2 { font-size: var(--fs-3xl-lg); }
}

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

a { color: inherit; text-decoration-color: var(--color-border); }

ul, ol { padding-left: 1.25em; }

.dm-script {
	font-family: var(--font-script);
	font-weight: 600;
	color: var(--color-secondary);
	font-style: normal;
}

.dm-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

@media (min-width: 768px) {
	.dm-container { padding-inline: var(--sp-6); }
}

.dm-section { padding-block: var(--sp-8); }

@media (min-width: 768px) {
	.dm-section { padding-block: var(--sp-9); }
}

.dm-section--alt { background: var(--color-bg-alt); }
.dm-section--dark {
	position: relative;
	overflow: hidden;
	background: var(--color-primary-strong);
	color: var(--dm-white);
}
.dm-section--dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 0%, rgba(241, 170, 18, 0.24), transparent 60%);
	pointer-events: none;
}
.dm-section--dark > * { position: relative; }
.dm-section--dark h1, .dm-section--dark h2, .dm-section--dark h3 { color: var(--dm-white); }
.dm-section--dark .dm-lede { color: rgba(255, 255, 255, 0.82); }

.dm-eyebrow {
	display: inline-block;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-secondary);
	margin-bottom: var(--sp-3);
}

.dm-lede {
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 62ch;
}

.dm-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.dm-skip-link {
	position: absolute;
	left: var(--sp-4);
	top: -50px;
	background: var(--color-primary-strong);
	color: var(--dm-white);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-sm);
	z-index: 1000;
	transition: top var(--transition-fast);
}
.dm-skip-link:focus { top: var(--sp-4); }

:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
}

.dm-todo {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-warning);
	background: var(--dm-gold-100);
	border: 1px dashed var(--color-secondary);
	border-radius: var(--radius-sm);
	padding: 0.15em 0.5em;
}

.dm-grid {
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 640px) {
	.dm-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.dm-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.dm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.dm-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
	.dm-grid--4 { grid-template-columns: repeat(4, 1fr); }
}