:root {
  --paper: #f6f1e8;
  --ink: #171717;
  --muted: #5f5a52;
  --line: #d9cfc0;
  --accent: #b12222;
  --accent-dark: #721313;
  --panel: #fffaf1;
  --cool: #e7edf0;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.58;
}

.site-header {
  border-top: 6px solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffaf1 0%, #f6f1e8 100%);
}

.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px 24px 32px;
  text-align: center;
}

.kicker, .section-label {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.05; margin: 0; }
h1 {
  font-size: clamp(4rem, 13vw, 9rem);
  letter-spacing: -0.08em;
  font-weight: 900;
  text-transform: uppercase;
}

.subtitle {
  max-width: 780px;
  margin: 18px auto 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.nav {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 0.86rem;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 14px 18px;
  border-left: 1px solid var(--line);
}
.nav a:last-child { border-right: 1px solid var(--line); }
.nav a:hover { background: var(--accent); color: #fff; }

main { max-width: var(--max); margin: 0 auto; padding: 34px 24px 70px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.9fr;
  gap: 22px;
  margin-bottom: 54px;
}

.lead-card, .fact-card, .essay, .note-card, .slop-section {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(35, 22, 10, 0.06);
}

.lead-card { padding: clamp(24px, 4vw, 46px); }
.fact-card { padding: 28px; align-self: stretch; }
.lead-card h2 {
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  letter-spacing: -0.055em;
  max-width: 780px;
}
.fact-card h3, .note-card h3 { font-size: 1.45rem; margin-bottom: 12px; }
.lead-card p, .fact-card p, .note-card p, .slop-section p { font-family: Arial, Helvetica, sans-serif; }
.small-note { color: var(--muted); font-size: 0.95rem; }

.essay-section { margin: 58px 0; }
.essay-section.alternate { border-top: 4px solid var(--ink); padding-top: 46px; }
.section-intro { margin: 0 0 20px; max-width: 820px; }
.section-intro h2 {
  font-size: clamp(2rem, 5vw, 4.4rem);
  letter-spacing: -0.055em;
}
.section-intro p:not(.section-label) {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.06rem;
}

.essay {
  padding: clamp(24px, 5vw, 64px);
  column-width: 430px;
  column-gap: 54px;
}
.essay h3 {
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  letter-spacing: -0.055em;
  margin-bottom: 26px;
  column-span: all;
}
.essay p { margin: 0 0 1.05em; break-inside: avoid; }
.article-style p:first-of-type::first-letter,
.academic-style p:first-of-type::first-letter {
  float: left;
  font-size: 4.2rem;
  line-height: 0.85;
  padding-right: 8px;
  color: var(--accent);
  font-weight: 900;
}
.academic-style { background: #fbfbf8; }
.academic-style p { font-size: 1.02rem; }

.notes-section { margin: 62px 0; }
.note-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.note-card { padding: 22px; }
.note-card p { color: var(--muted); }

.slop-section {
  margin: 62px 0 0;
  padding: clamp(26px, 5vw, 60px);
  background: linear-gradient(135deg, var(--cool), var(--panel));
}
.narrow { max-width: 850px; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px;
  text-align: center;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  background: #efe8dd;
}

@media (max-width: 860px) {
  .hero-grid, .note-grid { grid-template-columns: 1fr; }
  .essay { column-width: auto; }
  .nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .nav a { white-space: nowrap; }
}