html {
	font-size: 16px;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	line-height: var(--leading-normal);
	color: var(--color-text-primary);
	background:
		radial-gradient(120% 85% at 0% 0%, color-mix(in srgb, var(--color-primary-100) 55%, transparent), transparent 56%),
		linear-gradient(180deg, var(--color-bg-body) 0%, var(--color-neutral-0) 100%);
	transition: background-color var(--transition-base), color var(--transition-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
}

h1 {
	font-size: clamp(var(--text-4xl), 4.8vw, var(--text-6xl));
}

h2 {
	font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
}

h3 {
	font-size: clamp(var(--text-2xl), 2.2vw, var(--text-4xl));
}

h4 {
	font-size: var(--text-xl);
}

h5 {
	font-size: var(--text-lg);
}

h6 {
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

p {
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}

p + p,
.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
}

.entry-content ul,
.entry-content ol {
	margin-left: var(--space-6);
	line-height: var(--leading-relaxed);
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: var(--space-2);
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: var(--transition-colors);
}

a:hover {
	color: var(--color-link-hover);
}

a:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: 0.95em;
}

code {
	padding: 0.15em 0.35em;
	background: var(--color-surface-sunken);
	border-radius: var(--radius-sm);
}

pre {
	background: var(--color-surface-sunken);
	color: var(--color-text-primary);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	overflow-x: auto;
	line-height: var(--leading-normal);
}

pre code {
	padding: 0;
	background: transparent;
}

blockquote {
	border-left: 4px solid var(--color-accent);
	background: color-mix(in srgb, var(--color-accent-light) 35%, var(--color-surface-raised));
	padding: var(--space-4) var(--space-6);
	font-style: italic;
	color: var(--color-text-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin-block: var(--space-12);
}

table {
	width: 100%;
	border: 1px solid var(--color-border);
	font-size: var(--text-sm);
}

th,
td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

th {
	background: var(--color-surface-sunken);
	font-weight: var(--font-semibold);
}

fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

legend {
	padding-inline: var(--space-2);
	font-weight: var(--font-medium);
}

::selection {
	background: var(--color-accent-light);
	color: var(--color-secondary-900);
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	padding: var(--space-2) var(--space-4);
	background: var(--color-btn-primary-bg);
	color: var(--color-btn-primary-text);
	border-radius: var(--radius-base);
	z-index: var(--z-tooltip);
	font-weight: var(--font-semibold);
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-4);
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

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

.sr-only-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.alignleft {
	float: left;
	margin-right: var(--space-6);
	margin-bottom: var(--space-4);
}

.alignright {
	float: right;
	margin-left: var(--space-6);
	margin-bottom: var(--space-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-bottom: var(--space-4);
}

.alignwide {
	max-width: var(--container-wide);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--space-6);
}

.wp-caption-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
}

.wp-block-gallery figcaption {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
