/* =========================================================================
   base.css — Reset, Typography Baseline, Body
   =========================================================================
   Modern reset (Andy Bell-inspired, trimmed). All values reference tokens.
   No raw colors, sizes, or fonts in this file — only var() lookups.
   ========================================================================= */

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

* { margin: 0; }

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

body {
	min-height: 100vh;
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background-color: var(--color-surface);
	overflow-x: hidden;
}

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

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

a {
	color: var(--color-text-link);
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-text-link-hover); }
a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, pre {
	overflow-wrap: break-word;
}

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* Skip link — a11y */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-sm);
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius-sm);
	z-index: var(--z-toast);
	transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

/* =========================================================================
   Typography
   ========================================================================= */

/* All headings: display font, tight leading, snug tracking */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-snug);
	color: var(--color-text);
	text-wrap: balance;
}

h1, .h1 {
	font-size: var(--fs-4xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	font-weight: var(--fw-semibold);
}

h2, .h2 {
	font-size: var(--fs-3xl);
	line-height: var(--lh-snug);
}

h3, .h3 { font-size: var(--fs-2xl); }
h4, .h4 { font-size: var(--fs-xl); }
h5, .h5 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
h6, .h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

/* The "every kind of *getaway*" pattern — italicized emphasis inside
   display headings reads as warm, editorial, hand-set. Fraunces italic
   has serious character at large sizes.                                  */
h1 em, h2 em, h3 em,
.h1 em, .h2 em, .h3 em {
	font-style: italic;
	font-weight: inherit;
	color: var(--color-accent);
}

/* Hero display class — bigger than h1, used in front-page hero only */
.display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	font-weight: var(--fw-semibold);
	text-wrap: balance;
}

/* Eyebrow label — small uppercase tag above section headings */
.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

/* Lead paragraph — bigger body for hero subheads, intro paragraphs */
.lead {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
	max-width: 60ch;
	text-wrap: pretty;
}

/* Body paragraph spacing inside prose */
.prose p + p,
.prose p + ul,
.prose p + ol {
	margin-top: var(--space-sm);
}
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose ul, .prose ol { padding-left: var(--space-md); }
.prose li + li { margin-top: var(--space-3xs); }
.prose blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-md);
	font-style: italic;
	color: var(--color-text-muted);
	margin: var(--space-md) 0;
}

/* Selection */
::selection {
	background: var(--color-accent);
	color: var(--color-text-on-accent);
}

/* =========================================================================
   Utility — visually hidden (screen-reader only)
   ========================================================================= */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus ring helper — apply to custom interactive components */
.focus-ring:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}