/*
Theme Name: Langrock Princeton
Theme URI: https://langrockprinceton.com
Author: Built for Michael Laznik
Description: Content-first institutional/archive theme for LangrockPrinceton.com. Phase 1 build: Homepage, The Story (topic posts), The Ivy Code, The Archive, The Stacks, About, Contact, The Commons (coming soon), Site Policies. Demo content is clearly marked and must be replaced before public launch.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: langrock
*/

/* =========================================================
   1. BRAND TOKENS
   Source: Langrock Typography and Color System (approved)
   ========================================================= */
:root {
	/* Primary palette - a two-tone navy system: House Navy is the
	   visible "blue" used for chrome (headers, buttons, backgrounds),
	   House Ink is a deeper, near-black tone reserved for body/heading
	   text and formal details, so headings stay legible ink-on-page
	   while backgrounds/buttons read as genuinely navy, not black. */
	--color-house-navy: #18324B;
	--color-house-ink: #111C2B;
	--color-archive-ivory: #F3EFE5;
	--color-clear-white: #FCFBF8;
	--color-graphite: #292B2E;
	--color-soft-stone: #D8D3C9;

	/* Accents */
	--color-langrock-orange: #E56022;
	--color-ivy-green: #667B45;
	--color-crest-red: #942A32;

	/* Semantic aliases */
	--color-bg: var(--color-clear-white);
	--color-bg-alt: var(--color-archive-ivory);
	--color-text: var(--color-graphite);
	--color-text-inverse: var(--color-archive-ivory);
	--color-heading: var(--color-house-ink);
	--color-border: var(--color-soft-stone);
	--color-accent: var(--color-langrock-orange);
	--color-demo-flag: var(--color-crest-red);

	/* Typography */
	--font-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--font-sans: "Source Sans 3", -apple-system, Segoe UI, Roboto, sans-serif;

	/* Spacing scale (8px base, per approved layout system) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;
	--space-9: 128px;

	/* Containers */
	--container-standard: 1320px;
	--container-editorial: 760px;
	--container-narrow: 600px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--color-heading);
	line-height: 1.2;
	margin: 0 0 var(--space-3);
}
h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 var(--space-3); }
em, .newsreader-italic { font-family: var(--font-serif); font-style: italic; }

.container {
	max-width: var(--container-standard);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}
.container--editorial { max-width: var(--container-editorial); }
.container--narrow { max-width: var(--container-narrow); }

@media (max-width: 767px) {
	.container { padding-left: 20px; padding-right: 20px; }
}

/* =========================================================
   3. DEMO CONTENT FLAG
   Any content pulled from demo posts is visually flagged so it
   can never be mistaken for real, published Langrock history.
   ========================================================= */
.demo-flag {
	display: inline-block;
	background: var(--color-demo-flag);
	color: var(--color-clear-white);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: var(--space-2);
}

/* =========================================================
   4. HEADER / NAV
   ========================================================= */
.site-header {
	background: var(--color-clear-white);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}
.site-header__wordmark {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	color: var(--color-house-navy);
	text-decoration: none;
	white-space: nowrap;
}
.primary-nav { display: flex; align-items: center; gap: var(--space-5); }
.primary-nav ul {
	list-style: none;
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}
.primary-nav a {
	text-decoration: none;
	color: var(--color-graphite);
	padding: var(--space-2) 0;
	border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav a:focus { border-bottom-color: var(--color-langrock-orange); }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; }
.btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: var(--space-2) var(--space-4);
	border-radius: 2px;
	border: 1px solid var(--color-house-navy);
	color: var(--color-house-navy);
	background: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--color-house-navy); color: var(--color-clear-white); }
.btn--solid { background: var(--color-house-navy); color: var(--color-clear-white) !important; }
.btn--solid:hover { background: var(--color-graphite); color: var(--color-clear-white) !important; }

@media (max-width: 1099px) {
	.primary-nav ul { display: none; }
	.nav-toggle { display: block; }
	.site-header.is-open .primary-nav ul {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-clear-white);
		padding: var(--space-4);
		border-bottom: 1px solid var(--color-border);
		gap: var(--space-3);
	}
}

/* =========================================================
   5. FOOTER
   ========================================================= */
.site-footer {
	background: var(--color-house-navy);
	color: var(--color-archive-ivory);
	padding: var(--space-7) 0 var(--space-5);
	margin-top: var(--space-8);
}
.site-footer a { color: var(--color-archive-ivory); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.footer-grid h4 {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-soft-stone);
	margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--space-2); font-size: 0.9rem; }
.footer-bottom {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(243,239,229,0.15);
	font-size: 0.8rem;
	color: var(--color-soft-stone);
	display: flex;
	justify-content: space-between;
}
@media (max-width: 767px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-bottom { flex-direction: column; gap: var(--space-2); }
}

/* =========================================================
   6. HERO
   ========================================================= */
.hero { position: relative; }
.hero__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__body {
	background: var(--color-house-navy);
	color: var(--color-archive-ivory);
	padding: var(--space-7) 0;
	text-align: center;
}
.hero__eyebrow {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-soft-stone);
	margin-bottom: var(--space-3);
}
.hero__title { color: var(--color-clear-white); max-width: 900px; margin-left: auto; margin-right: auto; }
.hero__subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--color-soft-stone); max-width: 700px; margin: 0 auto var(--space-4); }

/* =========================================================
   7. SECTIONS / GRID
   ========================================================= */
.section { padding: var(--space-8) 0; }
.section--alt { background: var(--color-archive-ivory); }
.section__heading { text-align: center; margin-bottom: var(--space-6); }
.section__heading p { font-family: var(--font-sans); color: var(--color-graphite); opacity: 0.75; }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1099px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .card-grid { grid-template-columns: 1fr; } }

/* =========================================================
   8. CARDS (Archive / Library preview components)
   ========================================================= */
.card {
	display: flex;
	flex-direction: column;
	background: var(--color-clear-white);
	border: 1px solid var(--color-border);
}
.card__media { aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-soft-stone); }
.card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.card__eyebrow {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ivy-green);
	margin-bottom: var(--space-2);
}
.card__title { font-size: 1.2rem; margin-bottom: var(--space-2); }
.card__meta { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-graphite); opacity: 0.65; margin-bottom: var(--space-2); }
.card__excerpt { font-size: 0.95rem; flex: 1; }
.card__link {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--color-house-navy);
	text-decoration: none;
	margin-top: var(--space-3);
}
.card__link:hover { color: var(--color-langrock-orange); }

/* =========================================================
   8b. CATEGORY NAV + RESOURCE LIST
   Used by Library and Ivy Code: a horizontal jump-nav across
   categories, and a compact list layout for entries within each
   category section (as opposed to the boxy card-grid).
   ========================================================= */
.category-nav {
	background: var(--color-archive-ivory);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.category-nav ul {
	list-style: none;
	display: flex;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3) 0;
	overflow-x: auto;
}
.category-nav a {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-graphite);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-clear-white);
}
.category-nav a:hover,
.category-nav a:focus {
	border-color: var(--color-langrock-orange);
	color: var(--color-langrock-orange);
}
.category-nav a.is-active {
	background: var(--color-house-navy);
	border-color: var(--color-house-navy);
	color: var(--color-clear-white);
}
.category-section { scroll-margin-top: var(--space-4); }
.category-section__heading {
	display: inline-block;
	border-bottom: 2px solid var(--color-langrock-orange);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-5);
}
.resource-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.resource-item {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	background: var(--color-clear-white);
	align-items: flex-start;
}
.resource-item__media {
	width: 88px;
	height: 88px;
	object-fit: cover;
	background: var(--color-soft-stone);
	flex-shrink: 0;
}
.resource-item__body { flex: 1; }
.resource-item__title { font-size: 1.05rem; margin-bottom: var(--space-1); }
.resource-item__title a { text-decoration: none; }
.resource-item__title a:hover { color: var(--color-langrock-orange); }
.resource-item__meta {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	opacity: 0.65;
	margin-bottom: var(--space-2);
}
.resource-item__excerpt { font-size: 0.92rem; margin-bottom: 0; }
@media (max-width: 767px) {
	.resource-item { flex-direction: column; }
}

/* =========================================================
   9. STORY PAGE (long editorial page)
   ========================================================= */
.story-section { padding: var(--space-7) 0; border-bottom: 1px solid var(--color-border); }
.story-section:last-child { border-bottom: none; }
.story-section__label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-langrock-orange);
	margin-bottom: var(--space-2);
}
.story-section .container--editorial p { font-size: 1.05rem; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.timeline li { position: relative; padding: 0 0 var(--space-5) var(--space-5); }
.timeline li::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-langrock-orange);
}
.timeline__year { font-family: var(--font-sans); font-weight: 700; color: var(--color-house-navy); }

/* =========================================================
   10. ARCHIVE / LIBRARY SINGLE ENTRY
   ========================================================= */
.entry-header { padding: var(--space-6) 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
.entry-meta-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.entry-meta-table th, .entry-meta-table td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}
.entry-meta-table th { width: 220px; font-family: var(--font-sans); font-weight: 600; color: var(--color-graphite); opacity: 0.7; }
.curator-note {
	background: var(--color-archive-ivory);
	padding: var(--space-5);
	font-family: var(--font-serif);
	font-style: italic;
	border-left: 3px solid var(--color-langrock-orange);
}

/* =========================================================
   11. FORMS (Contact / Contribute / Join the Community)
   ========================================================= */
.form-field { margin-bottom: var(--space-4); }
.form-field label {
	display: block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: var(--space-2);
}
.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 1rem;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	background: var(--color-clear-white);
	border-radius: 2px;
}
.form-field textarea { min-height: 140px; resize: vertical; }

/* =========================================================
   12. UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap;
}