/* ============================================================
   base.css — tokens, reset, prose base.
   Havercrossley: newsprint cream, Playfair Display, broadsheet sharp.
   ============================================================ */

:root {
	/* Paper */
	--c-paper:     #F5F0E6;
	--c-paper-alt: #ECE6D8;

	/* Ink */
	--c-ink:       #0F0E0D;
	--c-ink-muted: #5F5850;
	--c-stone:     #9E958B;

	/* Accent */
	--c-accent:      #0F5132;
	--c-accent-deep: #093820;
	--c-warn-amber:  #8F5A00;

	/* Functional */
	--c-error:   #8B2D1F;
	--c-success: #265C3F;

	/* Typography */
	--f-display: 'Playfair Display', Georgia, serif;
	--f-body:    'IBM Plex Sans Condensed', system-ui, -apple-system, Segoe UI, sans-serif;
	--f-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

	--f-masthead:   clamp(3rem, 6vw, 5rem);
	--f-display-xl: clamp(2.8rem, 5vw, 4.2rem);
	--f-display-l:  clamp(2.2rem, 3.5vw, 3rem);
	--f-display-m:  clamp(1.6rem, 2.5vw, 2rem);
	--f-display-s:  1.375rem;
	--f-body-l:     1.0625rem;
	--f-body:       1rem;
	--f-body-s:     0.875rem;
	--f-caption:    0.8125rem;
	--f-label:      0.75rem;
	--f-mono:       0.8125rem;

	/* Radius (sharp) */
	--r-none: 0;
	--r-sm:   2px;
	--r-md:   4px;

	/* Spacing */
	--space-section:   96px;
	--space-section-m: 56px;
	--space-block:     48px;
	--space-item:      28px;
	--container:       1180px;
	--prose:           680px;
	--gutter:          40px;
	--gutter-m:        20px;
}

/* Reset (minimal, editorial) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-paper);
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: var(--f-body);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	max-width: 100vw;
	overflow-x: clip;
}
h1, .hc-h1, h2, .hc-h2, h3, .hc-h3 { overflow-wrap: anywhere; hyphens: auto; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .3em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Prose container base */
.hc-prose {
	font-family: var(--f-body);
	font-size: var(--f-body);
	line-height: 1.65;
	max-width: var(--prose);
}
.hc-prose--l { font-size: var(--f-body-l); }

/* Headings */
h1, .hc-h1 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--f-display-l);
	line-height: 1.12;
	margin: 0 0 .4em;
	letter-spacing: -0.005em;
	color: var(--c-ink);
}
h2, .hc-h2 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--f-display-m);
	line-height: 1.2;
	margin: 0 0 .5em;
	color: var(--c-ink);
}
h3, .hc-h3 {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--f-display-s);
	line-height: 1.3;
	margin: 0 0 .5em;
	color: var(--c-ink);
}
h4, .hc-h4 {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 1.0625rem;
	margin: 0 0 .5em;
	color: var(--c-ink);
}

strong { font-weight: 600; }
em { font-style: italic; }

/* Tabular numerals for data */
.hc-tabular, .hc-mono { font-feature-settings: 'tnum' 1, 'lnum' 1; }
.hc-mono {
	font-family: var(--f-mono);
	font-size: var(--f-mono);
	line-height: 1.45;
	letter-spacing: 0;
}

/* Link defaults — within prose only */
.hc-prose a,
.hc-link {
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-stone);
	transition: color .15s ease, border-color .15s ease;
}
.hc-prose a:hover,
.hc-link:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* Selection */
::selection { background: var(--c-accent); color: var(--c-paper); }

/* Focus ring — high-contrast, ink on cream */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Horizontal rules */
hr { border: 0; border-top: 1px solid var(--c-stone); margin: var(--space-block) 0; }
.hc-rule--thick { border-top-width: 3px; border-top-color: var(--c-ink); }
.hc-rule--medium { border-top-width: 2px; border-top-color: var(--c-ink); }
.hc-rule--hair { border-top-width: 1px; border-top-color: var(--c-stone); }

/* Block quotes */
blockquote {
	border-left: 2px solid var(--c-accent);
	padding: .2em 0 .2em 1em;
	margin: 1.2em 0;
	font-family: var(--f-display);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--c-ink);
}

/* Tables default */
table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
th, td { padding: .7em 0; text-align: left; vertical-align: top; }
thead th {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: var(--f-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-ink-muted);
	border-bottom: 1px solid var(--c-ink);
}
tbody tr + tr td { border-top: 1px solid var(--c-stone); }

/* Code (rare in prose) */
code, pre {
	font-family: var(--f-mono);
	font-size: .85em;
	background: var(--c-paper-alt);
	border-radius: var(--r-sm);
}
code { padding: .1em .35em; }
pre  { padding: 1em; overflow: auto; line-height: 1.5; }