/*
Theme Name: WesSciJo — Dark Laboratory
Theme URI: https://wesleyan.edu/
Author: Olayinka Vaughan
Description: Concept 1 for The Wesleyan Science Journal. Near-black ground, Wesleyan red used as a surgical accent, hairline rules, monospaced metadata. Restrained and precise.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: wessci-dark
*/

/* Hallmark · macrostructure: Marquee Hero · genre: atmospheric
 * theme: custom (vibe: "clinical, precise, late-night lab")
 * paper oklch(13% 0.004 160) dark · accent oklch(58% 0.21 28) warm-red · display grotesk-sans
 * nav: N9 edge-aligned · footer: Ft4 columned-with-brand · enrichment: none (typography only)
 * palette source: measured from wesleyan.edu (#D72121 primary, #151B17 dark ground, #CB9A3B gold)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* ---------- tokens ---------- */
:root {
	--color-paper:    oklch(13% 0.004 160);
	--color-paper-2:  oklch(16.5% 0.005 160);
	--color-paper-3:  oklch(21% 0.006 160);
	--color-ink:      oklch(97% 0.002 160);
	--color-ink-2:    oklch(73% 0.006 160);
	--color-ink-3:    oklch(56% 0.006 160);
	--color-accent:   oklch(58% 0.21 28);
	--color-accent-2: oklch(66% 0.20 28);
	--color-gold:     oklch(74% 0.10 78);
	--color-rule:     oklch(26% 0.006 160);
	--color-rule-2:   oklch(34% 0.008 160);
	--color-focus:    oklch(80% 0.15 28);

	--font-display: "Libre Franklin", system-ui, sans-serif;
	--font-body:    "Libre Franklin", system-ui, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, monospace;

	--text-display: clamp(2.5rem, 6.2vw, 5rem);
	--text-3xl:     clamp(1.75rem, 3.2vw, 2.5rem);
	--text-2xl:     clamp(1.35rem, 2.2vw, 1.75rem);
	--text-lg:      1.125rem;
	--text-base:    1rem;
	--text-sm:      0.875rem;
	--text-xs:      0.75rem;

	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--space-32: 8rem;

	--rule-hair: 1px;
	--radius-sm: 2px;
	--measure: 62ch;
	--shell: 1400px;

	--dur-fast: 140ms;
	--dur-mid:  260ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html, body {
	overflow-x: clip;
	margin: 0;
	padding: 0;
}

body {
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
	font-style: normal;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0;
	overflow-wrap: anywhere;
	min-width: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.u-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: var(--space-2);
	background: var(--color-accent);
	color: var(--color-ink);
	padding: var(--space-3) var(--space-4);
	z-index: 100;
}
.skip-link:focus { left: var(--space-4); }

/* ---------- masthead · N9 edge-aligned ---------- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in oklab, var(--color-paper) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: var(--rule-hair) solid var(--color-rule);
}

.masthead__inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: var(--space-4) var(--space-6);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.wordmark {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	flex-shrink: 0;
}

.wordmark__mark {
	width: 10px;
	height: 10px;
	background: var(--color-accent);
	display: block;
	flex-shrink: 0;
}

.wordmark__text {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-ink);
	white-space: nowrap;
}

.nav { margin-inline-start: auto; }

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.nav__item { position: relative; }

.nav__link {
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	text-decoration: none;
	white-space: nowrap;
	padding-block: var(--space-3);
	display: inline-block;
	transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); }

/* motion primitive 1 · panel reveal */
.panel {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	min-width: 220px;
	background: var(--color-paper-2);
	border: var(--rule-hair) solid var(--color-rule-2);
	padding: var(--space-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition:
		opacity var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		visibility var(--dur-fast);
}

.nav__item--has-panel:hover .panel,
.nav__item--has-panel:focus-within .panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.panel__link {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out);
}
.panel__link:hover { color: var(--color-accent-2); }

.search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: var(--rule-hair) solid var(--color-rule-2);
	padding: var(--space-2) var(--space-3);
	flex-shrink: 0;
}
.search__icon { width: 14px; height: 14px; color: var(--color-ink-3); flex-shrink: 0; }
.search__input {
	background: none;
	border: 0;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	width: 8ch;
	padding: 0;
	transition: width var(--dur-mid) var(--ease-out);
}
.search__input::placeholder { color: var(--color-ink-3); }
.search__input:focus { outline: none; width: 14ch; }
.search:focus-within { border-color: var(--color-accent); }

/* ---------- shell ---------- */
.site-main {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--space-6);
}

/* ---------- issue line ---------- */
.issueline {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-8);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex-wrap: wrap;
}
.issueline__label { color: var(--color-accent); }
.issueline__rule {
	flex: 1;
	height: var(--rule-hair);
	background: var(--color-rule);
	min-width: var(--space-8);
}
.issueline__meta { color: var(--color-ink-3); }
.issueline__link { color: var(--color-ink-2); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.issueline__link:hover { color: var(--color-accent-2); border-color: var(--color-accent); }

/* ---------- lead ---------- */
.lead {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--space-16);
	align-items: center;
	padding-bottom: var(--space-24);
	border-bottom: var(--rule-hair) solid var(--color-rule);
}

.lead__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 800;
	margin-block: var(--space-6) var(--space-6);
}
.lead__title a { text-decoration: none; }
.lead__title a:hover { color: var(--color-accent-2); }

.lead__excerpt {
	color: var(--color-ink-2);
	font-size: var(--text-lg);
	max-width: var(--measure);
	margin-bottom: var(--space-6);
}

.lead__figure { margin: 0; }
.lead__figure img { width: 100%; border: var(--rule-hair) solid var(--color-rule); }

.tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: var(--rule-hair) solid currentColor;
	padding-bottom: 2px;
}

.meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.meta__dot { width: 3px; height: 3px; background: var(--color-ink-3); flex-shrink: 0; }

.btn {
	display: inline-block;
	margin-top: var(--space-6);
	background: var(--color-accent);
	color: var(--color-ink);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	padding: var(--space-3) var(--space-6);
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-accent-2); }

.btn--ghost {
	background: none;
	border: var(--rule-hair) solid var(--color-rule-2);
	color: var(--color-ink);
}
.btn--ghost:hover { background: none; border-color: var(--color-accent); color: var(--color-accent-2); }

/* ---------- divisions ---------- */
.division { padding-block: var(--space-24); border-bottom: var(--rule-hair) solid var(--color-rule); }

.division__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
	margin-bottom: var(--space-12);
}

.division__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
}

.division__types {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.division__types a {
	color: var(--color-ink-3);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.division__types a:hover { color: var(--color-accent-2); }

.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-8);
}

/* motion primitive 2 · card lift */
.card { display: flex; flex-direction: column; gap: var(--space-3); }

.card__media {
	display: block;
	overflow: hidden;
	border: var(--rule-hair) solid var(--color-rule);
	margin-bottom: var(--space-2);
}
.card__media img {
	width: 100%;
	transition: transform var(--dur-mid) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.03); }

.card__type {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.card__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
}
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--color-accent-2); }

.card__excerpt { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- single article ---------- */
.article { padding-block: var(--space-16); border-bottom: var(--rule-hair) solid var(--color-rule); }

.article__head { max-width: var(--measure); margin-bottom: var(--space-8); }

.article__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 800;
	margin-block: var(--space-4) var(--space-4);
}

.article__figure { margin: 0 0 var(--space-12); }
.article__figure img { width: 100%; border: var(--rule-hair) solid var(--color-rule); }

.prose {
	max-width: var(--measure);
	font-size: var(--text-lg);
	line-height: 1.75;
	color: var(--color-ink-2);
}
.prose > * + * { margin-top: var(--space-6); }
.prose p { margin: 0; }
.prose h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: var(--color-ink);
	margin-top: var(--space-12) !important;
}
.prose h3 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-ink);
	margin-top: var(--space-8) !important;
}
.prose a { color: var(--color-accent-2); text-underline-offset: 2px; }
.prose a:hover { color: var(--color-accent); }
.prose blockquote {
	border-left: var(--rule-hair) solid var(--color-accent);
	padding-left: var(--space-6);
	color: var(--color-ink);
}
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose img { width: 100%; border: var(--rule-hair) solid var(--color-rule); }

/* ---------- submit ---------- */
.submit {
	padding-block: var(--space-24);
	max-width: var(--measure);
}
.submit__title { font-family: var(--font-display); font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.submit__copy { color: var(--color-ink-2); margin-bottom: var(--space-2); }

/* ---------- colophon · Ft4 ---------- */
.colophon {
	border-top: var(--rule-hair) solid var(--color-rule);
	background: var(--color-paper-2);
	margin-top: var(--space-16);
}

.colophon__inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: var(--space-24) var(--space-6) var(--space-16);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: var(--space-16);
}

.colophon__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	margin-block: var(--space-4) var(--space-2);
}
.colophon__tag { color: var(--color-ink-3); font-size: var(--text-sm); max-width: 34ch; }

.colophon__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-8);
}

.colophon__heading {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-4);
}

.colophon__col li { margin-bottom: var(--space-2); }
.colophon__col a {
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.colophon__col a:hover { color: var(--color-accent-2); }

.colophon__legal {
	max-width: var(--shell);
	margin: 0 auto;
	padding: var(--space-8) var(--space-6) var(--space-16);
	border-top: var(--rule-hair) solid var(--color-rule);
	color: var(--color-ink-3);
	font-size: var(--text-xs);
}
.colophon__legal p { max-width: 80ch; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
	.masthead__inner { flex-wrap: wrap; gap: var(--space-4); }
	.nav { margin-inline-start: 0; order: 3; width: 100%; }
	.nav__list { gap: var(--space-4); flex-wrap: wrap; }
	.search { margin-inline-start: auto; }
	.lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.lead__figure { order: -1; }
	.colophon__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
}

@media (max-width: 860px) {
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.site-main, .masthead__inner, .colophon__inner, .colophon__legal { padding-inline: var(--space-4); }
	.cards { grid-template-columns: minmax(0, 1fr); }
	.colophon__nav { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.division, .lead { padding-bottom: var(--space-16); }
	.division { padding-block: var(--space-16); }
	.panel {
		position: static;
		translate: none;
		transform: none;
		opacity: 1;
		visibility: visible;
		border: 0;
		background: none;
		padding: 0 0 0 var(--space-4);
		min-width: 0;
	}
	.nav__item--has-panel { width: 100%; }
	.panel__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
	.panel__link { padding: var(--space-2) 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.card:hover .card__media img { transform: none; }
}