/* Prodigy base: reset, page ground, type scale, the .wrap gutters, focus, skip link, print.
   Colors come only from engine/css/tokens.css and the skin. */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--bg);
	scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The strip under a phone's notch stays the page ground while the sticky header rides below it. */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: env(safe-area-inset-top, 0px);
	z-index: 30;
	background: var(--bg);
	pointer-events: none;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
/* The hidden attribute always hides, even on an element a component lays out as flex or grid. */
[hidden] { display: none !important; }
ul[class], ol[class] { padding: 0; list-style: none; }

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

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--link-hover); }

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}
main:focus { outline: none; }

/* Type scale */
h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: var(--w-head);
	line-height: var(--lh-head);
	color: var(--heading);
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
strong, b { font-weight: var(--w-body-strong); }
small { font-size: var(--fs-small); }
em { font-style: italic; }
.lede { font-size: var(--fs-lede); color: var(--fg-2); max-width: 60ch; }

/* Content width with the phone's safe areas: never less than 16 px a side. */
.wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { position: relative; isolation: isolate; overflow-x: clip; }
.band > .wrap { padding-block: var(--band-pad); }

/* Skip link and screen-reader text */
.skip {
	position: absolute;
	left: max(16px, env(safe-area-inset-left, 0px));
	top: -200px;
	z-index: 40;
	padding: 12px 18px;
	border-radius: var(--radius-lg);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); color: var(--accent-ink); }
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media print {
	body::before,
	.site-header,
	.menu,
	.theme-toggle,
	canvas,
	.skip { display: none !important; }
	html, body { background: none; color: var(--print-ink); }
	h1, h2, h3, h4 { color: var(--print-ink); }
	.band > .wrap { padding-block: 24px; }
	a { color: var(--print-ink); }
	.band--dusk, .band--dusk *, .band--deep, .band--deep * { color: var(--print-ink) !important; background: none !important; }
	img { break-inside: avoid; }
}