/* ============================================================
   SUBTRACT — THE DISCIPLINE INTERFACE
   Broadsheet Design System
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('/fonts/BricolageGrotesque-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Outfit';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('/fonts/Outfit-Regular.woff2') format('woff2');
}

/* ── Tokens ──────────────────────────────────────────────── */

:root {
	/* Colors */
	--cream: #f5f0e8;
	--cream-dark: #ede5d4;
	--cream-deeper: #e0d5c0;
	--ink: #1a1208;
	--ink-mid: #2c1810;
	--ink-light: #5c4a3a;
	--ink-faint: #9c8878;
	--rust: #c4663b;
	--rust-dark: #a8502a;
	--rule: #c8b898;

	/* Typography */
	--font-display: 'Bricolage Grotesque', 'Georgia', serif;
	--font-body: 'Outfit', 'Georgia', serif;
	--font-mono: 'Courier New', 'Courier', monospace;

	/* Type scale */
	--text-xs: 0.6875rem; /* 11px */
	--text-sm: 0.8125rem; /* 13px */
	--text-base: 1rem; /* 16px */
	--text-md: 1.125rem; /* 18px */
	--text-lg: 1.375rem; /* 22px */
	--text-xl: 1.75rem; /* 28px */
	--text-2xl: 2.5rem; /* 40px */
	--text-3xl: 3.5rem; /* 56px */
	--text-4xl: 5rem; /* 80px */

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout */
	--max-width: 72rem;
	--content-width: 42rem;
	--content-wide: 54rem;
	--gutter: clamp(1.25rem, 5vw, 3rem);
}

/* ── Reset ───────────────────────────────────────────────── */

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

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--cream);
	color: var(--ink-mid);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	min-height: 100vh;
}

img {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
ul,
ol {
	list-style: none;
}

/* ── Masthead ────────────────────────────────────────────── */

.masthead {
	border-bottom: 2px solid var(--ink-mid);
	padding: var(--space-6) var(--gutter);
	background: var(--cream);
	position: sticky;
	top: 0;
	z-index: 100;
}

.masthead__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.masthead__brand {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-decoration: none;
}

.masthead__wordmark {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--ink-mid);
	letter-spacing: -0.02em;
	line-height: 1;
}

.masthead__tagline {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-top: var(--space-1);
}

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

.masthead__nav a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-light);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	transition: color 0.15s;
}

.masthead__nav a:hover {
	color: var(--rust);
}

.masthead__nav .nav-cta {
	background: var(--ink-mid);
	color: var(--cream);
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-xs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s;
}

.masthead__nav .nav-cta:hover {
	background: var(--rust);
	color: var(--cream);
}

/* ── Broadsheet Header (Index page) ─────────────────────── */

.broadsheet-header {
	border-bottom: 1px solid var(--rule);
	padding: var(--space-12) var(--gutter) var(--space-8);
	background: var(--cream);
}

.broadsheet-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
}

.broadsheet-header__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--rule);
}

.broadsheet-header__vol {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.25em;
}

.broadsheet-header__date {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.broadsheet-header__title {
	font-family: var(--font-display);
	font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
	font-weight: 700;
	color: var(--ink-mid);
	line-height: 0.92;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-4);
}

.broadsheet-header__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-md);
	color: var(--ink-light);
	font-style: italic;
	max-width: 40rem;
	line-height: 1.5;
	border-left: 2px solid var(--rust);
	padding-left: var(--space-4);
	margin-top: var(--space-5);
}

/* ── Index Layout ────────────────────────────────────────── */

.index-layout {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-12) var(--gutter);
	display: grid;
	grid-template-columns: 1fr 18rem;
	gap: var(--space-12);
	align-items: start;
}

@media (max-width: 900px) {
	.index-layout {
		grid-template-columns: 1fr;
	}

	.index-sidebar {
		border-top: 1px solid var(--rule);
		padding-top: var(--space-8);
	}
}

/* ── Section Header ──────────────────────────────────────── */

.section-header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--ink-mid);
}

.section-header__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.section-header__rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
}

/* ── Text Card (index listing) ───────────────────────────── */

.text-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.text-card {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	transition: background 0.1s;
}

.text-card:last-child {
	border-bottom: none;
}

.text-card:hover .text-card__title {
	color: var(--rust);
}

.text-card:hover .text-card__number {
	color: var(--rust);
}

.text-card__number {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--ink-faint);
	letter-spacing: 0.05em;
	padding-top: 0.2em;
	transition: color 0.15s;
}

.text-card__body {
}

.text-card__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink-mid);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-2);
	transition: color 0.15s;
}

.text-card__excerpt {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-light);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.text-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.text-card__category {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.text-card__category--foundational {
	color: var(--rust);
}

/* ── Sidebar ─────────────────────────────────────────────── */

.index-sidebar {
}

.sidebar-block {
	margin-bottom: var(--space-8);
}

.sidebar-block__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--rule);
}

.sidebar-block__body {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-light);
	line-height: 1.65;
}

.sidebar-block__body p + p {
	margin-top: var(--space-3);
}

.sidebar-stat {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-4);
}

.sidebar-stat__number {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--ink-mid);
	line-height: 1;
	letter-spacing: -0.03em;
}

.sidebar-stat__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-top: var(--space-1);
}

.sidebar-cta {
	display: block;
	background: var(--ink-mid);
	color: var(--cream);
	text-decoration: none;
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	transition: background 0.15s;
	margin-top: var(--space-4);
}

.sidebar-cta:hover {
	background: var(--rust);
}

/* ── Article Layout ──────────────────────────────────────── */

.article-wrapper {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr 16rem;
	gap: var(--space-16);
	align-items: start;
	padding-top: var(--space-12);
	padding-bottom: var(--space-20);
}

@media (max-width: 900px) {
	.article-wrapper {
		grid-template-columns: 1fr;
	}

	.article-aside {
		display: none;
	}
}

/* ── Article Header ──────────────────────────────────────── */

.article-header {
	border-bottom: 1px solid var(--rule);
	padding-bottom: var(--space-8);
	margin-bottom: var(--space-10);
}

.article-header__dateline {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	margin-bottom: var(--space-4);
}

.article-header__dateline span {
	color: var(--rust);
}

.article-header__title {
	font-family: var(--font-display);
	font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
	font-weight: 700;
	color: var(--ink-mid);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin-bottom: var(--space-5);
}

.article-header__rule {
	width: 3rem;
	height: 3px;
	background: var(--rust);
	margin-bottom: var(--space-5);
}

.article-header__meta {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.article-header__category {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--cream);
	background: var(--rust);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding: var(--space-1) var(--space-3);
}

.article-header__category--doctrine {
	background: var(--ink-light);
}

.article-header__read-time {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

/* ── Article Body ────────────────────────────────────────── */

.article-body {
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: 1.75;
	color: var(--ink-mid);
	max-width: var(--content-width);
}

/* Drop cap */
.article-body > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 4.5em;
	font-weight: 700;
	float: left;
	line-height: 0.78;
	margin-right: 0.08em;
	margin-top: 0.05em;
	color: var(--ink-mid);
}

.article-body p {
	margin-bottom: var(--space-5);
}

.article-body p:last-child {
	margin-bottom: 0;
}

.article-body h2 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink-mid);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid var(--rule);
}

.article-body h3 {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--ink-mid);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}

.article-body strong {
	font-weight: 700;
	color: var(--ink-mid);
}

.article-body em {
	font-style: italic;
	color: var(--ink-light);
}

.article-body blockquote {
	border-left: 3px solid var(--rust);
	margin: var(--space-8) 0;
	padding: var(--space-4) var(--space-6);
	background: var(--cream-dark);
}

.article-body blockquote p {
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--ink-mid);
	margin-bottom: 0;
	line-height: 1.55;
}

.article-body hr {
	border: none;
	border-top: 1px solid var(--rule);
	margin: var(--space-10) 0;
}

/* Numbered list used for non-negotiables */
.article-body ol {
	list-style: none;
	margin: var(--space-6) 0;
	counter-reset: list-counter;
}

.article-body ol li {
	counter-increment: list-counter;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--cream-deeper);
	font-size: var(--text-base);
	line-height: 1.6;
}

.article-body ol li::before {
	content: counter(list-counter, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--rust);
	padding-top: 0.3em;
	letter-spacing: 0.05em;
}

.article-body ul {
	list-style: none;
	margin: var(--space-4) 0;
}

.article-body ul li {
	padding-left: var(--space-5);
	position: relative;
	margin-bottom: var(--space-2);
	font-size: var(--text-base);
}

.article-body ul li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--rust);
	font-family: var(--font-body);
}

/* Pull quote — used for key principles */
.pull-quote {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--ink-mid);
	line-height: 1.25;
	letter-spacing: -0.02em;
	border-top: 3px solid var(--ink-mid);
	border-bottom: 1px solid var(--rule);
	padding: var(--space-6) 0;
	margin: var(--space-10) 0;
}

/* Article footer */
.article-footer {
	border-top: 2px solid var(--ink-mid);
	padding-top: var(--space-8);
	margin-top: var(--space-12);
	max-width: var(--content-width);
}

.article-footer__next {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-bottom: var(--space-2);
}

.article-footer__next-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink-mid);
	text-decoration: none;
	letter-spacing: -0.01em;
	transition: color 0.15s;
}

.article-footer__next-title:hover {
	color: var(--rust);
}

.article-footer__back {
	display: inline-block;
	margin-top: var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-light);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	transition: color 0.15s;
}

.article-footer__back:hover {
	color: var(--rust);
}

.article-footer__back::before {
	content: '← ';
}

/* ── Article Aside (sticky TOC) ──────────────────────────── */

.article-aside {
	position: sticky;
	top: calc(var(--space-16) + 60px);
}

.aside-block {
	margin-bottom: var(--space-8);
}

.aside-block__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--rule);
}

.aside-corpus {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.aside-corpus__item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--space-2);
	text-decoration: none;
	padding: var(--space-1) 0;
}

.aside-corpus__item--active .aside-corpus__title {
	color: var(--rust);
}

.aside-corpus__num {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--ink-faint);
	letter-spacing: 0.05em;
	padding-top: 0.1em;
}

.aside-corpus__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-light);
	line-height: 1.35;
	transition: color 0.15s;
}

.aside-corpus__item:hover .aside-corpus__title {
	color: var(--rust);
}

/* ── Reading progress bar ────────────────────────────────── */

.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: var(--rust);
	z-index: 200;
	transition: width 0.1s linear;
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
	border-top: 2px solid var(--ink-mid);
	background: var(--ink-mid);
	color: var(--cream);
	padding: var(--space-12) var(--gutter);
	margin-top: var(--space-20);
}

.site-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--space-8);
}

@media (max-width: 700px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

.site-footer__brand {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--cream);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-2);
}

.site-footer__tagline {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: rgba(245, 240, 232, 0.5);
	font-style: italic;
	line-height: 1.5;
}

.site-footer__heading {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: rgba(245, 240, 232, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	margin-bottom: var(--space-4);
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.site-footer__links a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: rgba(245, 240, 232, 0.7);
	text-decoration: none;
	transition: color 0.15s;
}

.site-footer__links a:hover {
	color: var(--cream);
}

.site-footer__bottom {
	border-top: 1px solid rgba(245, 240, 232, 0.1);
	padding-top: var(--space-6);
	margin-top: var(--space-8);
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-footer__copy {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: rgba(245, 240, 232, 0.35);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

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

.text-rust {
	color: var(--rust);
}
.text-faint {
	color: var(--ink-faint);
}

/* ── Horizontal rule ornament ────────────────────────────── */

.ornament {
	text-align: center;
	color: var(--ink-faint);
	font-size: var(--text-sm);
	letter-spacing: 0.5em;
	margin: var(--space-10) 0;
	user-select: none;
}

/* ── 404 ─────────────────────────────────────────────────── */

.not-found {
	max-width: var(--content-width);
	margin: var(--space-20) auto;
	padding: 0 var(--gutter);
	text-align: center;
}

.not-found__number {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: 700;
	color: var(--rule);
	line-height: 1;
	letter-spacing: -0.05em;
}

.not-found__message {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--ink-mid);
	margin: var(--space-4) 0;
}

.not-found__sub {
	font-family: var(--font-body);
	color: var(--ink-light);
	margin-bottom: var(--space-8);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
	.masthead__nav .nav-cta {
		display: none;
	}
	.masthead__tagline {
		display: none;
	}

	.article-body > p:first-of-type::first-letter {
		font-size: 3.5em;
	}

	.broadsheet-header__title {
		font-size: var(--text-2xl);
	}
}