/* ============================================================
   Base — reset, base element styles, skeleton layout.
   Everything here is token-driven (see tokens.css). No component
   styles live here — components get their own files in a later plan.
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* --- WP screen-reader utility (used by skip-link, button labels, etc.) --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--paper);
	clip: auto !important;
	clip-path: none;
	color: var(--tannin-deep);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* --- Document --- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--space-16);
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* --- Headings — display face --- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--color-heading);
	line-height: var(--leading-tight);
	font-weight: var(--weight-semibold);
	text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

/* --- Body copy --- */
p, li { max-width: var(--measure); }
p + p { margin-top: var(--space-4); }

a {
	color: var(--color-link);
	text-decoration-color: var(--color-border);
	text-underline-offset: 0.15em;
	transition: color 0.15s var(--ease);
}
a:hover { color: var(--color-link-hover); }

/* --- Skeleton layout: header / main / footer --- */
.site-header {
	background: var(--tannin-deep);
	padding: var(--space-4) var(--space-6);
}
.site-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--paper);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.site-title:hover { color: var(--oxide); }

.site-main {
	flex: 1;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-12) var(--space-6);
}

.entry + .entry { margin-top: var(--space-16); }
.entry-content { margin-top: var(--space-4); }

.site-footer {
	background: var(--tannin-deep);
	color: var(--driftwood);
	padding: var(--space-8) var(--space-6);
	font-size: var(--text-sm);
}
.site-footer p { max-width: var(--measure); }

/* --- Accessibility --- */
:focus-visible {
	outline: 2px solid var(--oxide);
	outline-offset: 2px;
}
@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;
	}
}