/* ============================================================
   Radstem — shared site stylesheet
   Loaded on every page (before the page's own stylesheet, if it
   has one) so the nav bar, header and colour palette stay
   identical across the whole site. Page-specific CSS files only
   need to style what's unique to that page.

   Sections:
     1. Design tokens (colours + fonts) as CSS variables
     2. Base / reset
     3. Navigation bar
     4. Page header
     5. Shared layout wrapper + typography helpers
     6. Responsive tweaks
   ============================================================ */

/* ---------- 1. Design tokens -------------------------------- */
:root {
	--accent:      #2563eb;   /* primary blue: links, buttons, accents */
	--accent-dark: #1e40af;
	--ink:         #1f2933;   /* main body text */
	--ink-soft:    #52606d;   /* secondary / muted text */
	--line:        #e2e8f0;   /* hairline borders */
	--bg:          #f4f6fb;   /* page background */
	--surface:     #ffffff;   /* cards */
	--nav-bg:      #0f172a;   /* dark navigation bar */
	--radius:      14px;
	--shadow:      0 10px 30px rgba(15, 23, 42, 0.08);
	--font-sans:   "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
	--font-serif:  Georgia, "Times New Roman", serif;
	--content-max: 1100px;    /* default page content width */
}

/* ---------- 2. Base / reset --------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 3. Navigation bar -------------------------------- */
/* Sticky dark bar, shared verbatim across every page.           */
.topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: var(--nav-bg);
	padding: 0 clamp(16px, 4vw, 48px);
	position: sticky;
	top: 0;
	z-index: 10;
}
.topnav .brand {
	color: #fff;
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 1.1rem;
	padding: 16px 0;
}
.topnav .brand:hover { text-decoration: none; }

.topnav-links { display: flex; }
.topnav-links a {
	color: #cbd5e1;
	padding: 16px 18px;
	font-size: 0.95rem;
	transition: color .15s, background .15s;
}
.topnav-links a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}
/* the current page gets an accent underline */
.topnav-links a.active {
	color: #fff;
	box-shadow: inset 0 -3px 0 var(--accent);
}

/* ---------- 4. Page header ------------------------------------ */
.page-header {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: clamp(28px, 6vw, 60px) clamp(16px, 4vw, 48px) 8px;
}
.page-header h1 {
	margin: 0;
	font-size: clamp(1.9rem, 5vw, 3rem);
	letter-spacing: -0.5px;
}
.page-header .subtitle {
	margin: 10px 0 0;
	max-width: 640px;
	color: var(--ink-soft);
	font-size: clamp(1rem, 2.5vw, 1.2rem);
}
/* small "work in progress" style tag next to a heading */
.badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	font-size: 0.65em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	vertical-align: middle;
}

/* ---------- 5. Shared layout + typography ---------------------- */
main {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 24px clamp(16px, 4vw, 48px) 80px;
}

/* generic content card, used for simple pages (home, listings) */
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(18px, 3vw, 32px);
}

/* a grid of link cards, e.g. the simulations index */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}
.card-grid a.card {
	color: inherit;
	display: block;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card-grid a.card:hover {
	text-decoration: none;
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}
.card-grid h3 {
	margin: 0 0 6px;
	color: var(--accent-dark);
}
.card-grid p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

/* readable prose block, shared by explanatory text across pages
   (both the simulation write-ups and long-form Writing articles) */
.prose {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--font-serif);
	font-size: 1.12rem;
	line-height: 1.75;
	color: #2a3442;
}
.prose p { margin: 0 0 1.1em; }

/* section headings within an article */
.prose h2 {
	font-family: var(--font-sans);
	font-size: 1.4rem;
	color: var(--accent-dark);
	margin: 1.6em 0 0.6em;
}
.prose h3 {
	font-family: var(--font-sans);
	font-size: 1.12rem;
	color: var(--ink);
	margin: 1.4em 0 0.5em;
}
/* headings that are jump-to-section targets: offset so the sticky nav
   doesn't cover them when the page scrolls to an anchor */
.prose h2[id],
.prose h3[id] {
	scroll-margin-top: 76px;
}
/* the italic "deck" line under an article title, summarising it in one line */
.prose .deck {
	font-style: italic;
	color: var(--ink-soft);
	font-size: 1.05rem;
	margin-bottom: 1.6em;
}
/* author bio, set off at the end of an article */
.prose .author-bio {
	margin-top: 3em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
	font-style: italic;
	color: var(--ink-soft);
	font-size: 0.95rem;
}
/* small "back to X" link above an article's title */
.back-link {
	display: inline-block;
	margin: 0 0 8px;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* ---------- 6. Responsive tweaks -------------------------------- */
@media (max-width: 720px) {
	.topnav { padding: 0 16px; }
	.topnav .brand { padding: 12px 0; }
	.topnav-links a { padding: 12px 12px; }
}