/* Meikero — base: tokens, reset, typography, layout primitives */

/*
 * Meikero brand system
 * Type: Geist (UI, headings) + Geist Mono (labels, code, data).
 * Colour: ink on paper. Monochrome by default; colour is reserved for state
 * (green = allowed/success, amber = attention, red = denied/error). No gradients on type.
 * Shape: 4px radius for controls, 8px for surfaces, hairline 1px borders.
 */
:root {
	--ink: #0b0b0c;
	--ink-2: #36363a;
	--ink-3: #6e6e73;
	--line: #e6e6e3;
	--line-strong: #cbcbc6;
	--paper: #ffffff;
	--paper-2: #f6f6f4;
	--paper-3: #ecece8;
	--night: #0b0b0c;
	--night-2: #141416;
	--night-line: rgba(255,255,255,.09);
	--success: #15803d;
	--success-bg: #ecfdf3;
	--warning: #b45309;
	--warning-bg: #fffbeb;
	--danger: #b91c1c;
	--danger-bg: #fef2f2;

	--font-sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Inter Tight", "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--measure: 68ch;
	--container: 1280px;
	--container-wide: 1280px;
	--content: 760px;
	--content-wide: 980px;
	--gutter: clamp(20px, 4vw, 48px);
	--radius: 4px;
	--radius-lg: 8px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;
	--space-7: 96px;
	--space-8: 128px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--space-3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-2); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

code, kbd, pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}
code, kbd {
	padding: 0.1em 0.4em;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 4px;
	white-space: nowrap;
}
pre {
	margin: 0 0 var(--space-3);
	padding: var(--space-3) var(--space-4);
	overflow: auto;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
	line-height: 1.55;
}
pre code { padding: 0; background: none; border: 0; white-space: pre; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }

ul, ol { padding-left: 1.3em; margin: 0 0 var(--space-3); }
li + li { margin-top: var(--space-1); }

table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink-2); }

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

.skip-link {
	position: absolute; left: 8px; top: -60px;
	padding: 10px 14px; background: var(--ink); color: var(--paper);
	border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { top: 8px; }

/* Layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* One outer width everywhere; prose and narrow content keep the same left edge
   and only limit their inner measure, so every page lines up with the header. */
.container--prose, .container--narrow, .container--wide { max-width: var(--container); }
.container--prose > * { max-width: var(--content); }
.container--narrow > * { max-width: var(--content-wide); }

.section { padding: var(--space-7) 0; }
.section--tight { padding: var(--space-6) 0; }
.section--page { padding: var(--space-6) 0 var(--space-7); }
.section--muted { background: var(--paper-2); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--border-top { border-top: 1px solid var(--line); }

.section__head { max-width: 640px; margin-bottom: var(--space-5); }
.section__head p { color: var(--ink-3); font-size: 1.05rem; }

.eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.lead { font-size: 1.2rem; color: var(--ink-2); max-width: var(--measure); }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* Prose (editor content) */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose .wp-block-table table { font-size: 0.95rem; }

.page-header { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.page-header__lead { font-size: 1.15rem; color: var(--ink-3); max-width: var(--measure); }
.page-title { margin-bottom: var(--space-2); }

.post-list__item { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.post-list__title { font-size: 1.3rem; margin-bottom: var(--space-1); }
.post-list__title a { text-decoration: none; }
.post-list__meta { color: var(--ink-3); font-size: 0.9rem; }
.link-list { list-style: none; padding: 0; }
.link-list li + li { margin-top: var(--space-2); }

.nav-links, .navigation.pagination { margin-top: var(--space-5); }
.nav-links .page-numbers { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; margin-right: 6px; }
.nav-links .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }