/*
 * Get MEP Plans theme — main.css
 * Locked palette: drawing-sheet v1 warm-paper.
 * Locked typography: Fraunces (display) + Geist (body) + JetBrains Mono (technical).
 *
 * This file is the foundation. Other CSS files build on these tokens.
 */

:root {
	/* Color tokens (locked Phase 0) */
	--paper:        #f3ecd8;
	--paper-2:      #e8dfc4;
	--paper-bright: #f8f2e0;
	--ink:          #0e1a24;
	--ink-2:        #11202c;
	--ink-soft:     #243441;
	--ink-mute:     #6b7480;
	--rule:         rgba(17, 32, 44, 0.16);
	--rule-2:       rgba(17, 32, 44, 0.28);
	--rule-strong:  rgba(17, 32, 44, 0.85);
	--accent:       #8a1a1a;
	--accent-2:     #6f1414;
	--accent-soft:  rgba(138, 26, 26, 0.08);
	--accent-blue:  #1f4f7a;
	--grid:         rgba(17, 32, 44, 0.06);

	/* Type stack (locked Phase 0) */
	--f-display: "Fraunces", "Times New Roman", serif;
	--f-body:    "Geist", "Helvetica Neue", system-ui, sans-serif;
	--f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

	/* Spacing scale */
	--sp-30: 8px;
	--sp-40: 16px;
	--sp-50: 24px;
	--sp-60: 40px;
	--sp-70: 64px;
	--sp-80: 96px;

	/* Layout */
	--container-max: 1480px;
	--container-pad: 56px;
	--container-pad-mobile: 24px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	position: relative;
}

/* Faint grid texture — drawing-sheet metaphor without literal grid */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(17, 32, 44, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17, 32, 44, 0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
	z-index: 0;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at 18% 28%, rgba(17, 32, 44, 0.05), transparent 50%),
		radial-gradient(circle at 82% 76%, rgba(17, 32, 44, 0.06), transparent 55%);
	pointer-events: none;
	z-index: 0;
}

/* Container — site-wide layout wrapper */
.container,
.mep-container {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* Typography baseline */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-display);
	color: var(--ink);
	margin: 0;
	font-variation-settings: "opsz" 144, "SOFT" 25;
	line-height: 1.05;
}

h1 {
	font-weight: 380;
	font-size: clamp(44px, 6vw, 88px);
	letter-spacing: -0.025em;
	line-height: 0.97;
}

h2 {
	font-weight: 380;
	font-size: clamp(28px, 3.4vw, 52px);
	letter-spacing: -0.018em;
}

h3 {
	font-weight: 400;
	font-size: 28px;
	letter-spacing: -0.012em;
	line-height: 1.15;
}

h4 {
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
}

p {
	margin: 0 0 1em 0;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

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

em {
	font-style: italic;
	color: var(--accent);
	font-weight: 300;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}

strong {
	font-weight: 600;
	color: var(--ink);
}

/* Sheet code — used throughout for the drawing-document language */
.sheet-code {
	font-family: var(--f-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	display: inline-block;
}

.sheet-code--ink {
	color: var(--ink);
}

.sheet-code--mute {
	color: var(--ink-mute);
}

/* Eyebrow — small monospace label above sections */
.eyebrow {
	font-family: var(--f-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--ink);
}

/* Section dividers */
.section-rule {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 0;
}

/* Utility */
.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;
}

/* Responsive */
@media (max-width: 980px) {
	.container,
	.mep-container {
		padding: 0 var(--container-pad-mobile);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}