:root {
  --paper: #ece9e2;
  --cream: #f4f1ea;
  --white: #fbfaf7;
  --ink: #171715;
  --muted: #686660;
  --line: rgba(23, 23, 21, .19);
  --gold: #8d7440;
  --display: "EB Garamond", Georgia, serif;
  --body: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
a { color: inherit; }

.essay-header {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 5.5rem; padding: 1rem 3.5vw; border-bottom: 1px solid var(--line);
  background: rgba(236, 233, 226, .94); backdrop-filter: blur(14px);
}
.essay-header a, .essay-header span { font-size: .52rem; font-weight: 600; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.essay-header a:last-child { justify-self: end; }
.essay-header span { color: var(--gold); }

.eyebrow { margin: 0; color: var(--gold); font-size: .55rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.essay-hero { min-height: calc(100svh - 5.5rem); padding: clamp(6rem, 11vh, 10rem) 7vw 4rem; overflow: hidden; }
.essay-hero h1 { max-width: 13ch; margin: 1rem 0 0; font: 400 clamp(4rem, 9vw, 10rem)/.86 var(--display); letter-spacing: -.04em; }
.essay-hero h1 em { color: var(--gold); font-weight: 400; }
.dek { max-width: 48rem; margin: 3rem 0 0; color: var(--muted); font: italic 400 clamp(1.25rem, 2.15vw, 2rem)/1.35 var(--display); }
.release-meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.release-meta span { font-size: .53rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
blockquote { margin: clamp(5rem, 11vh, 9rem) 0 0 auto; width: min(38rem, 65%); color: var(--muted); font: italic 400 clamp(1.5rem, 2.5vw, 2.55rem)/1.25 var(--display); }

.public-gift { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr); gap: 7vw; padding: clamp(6rem, 11vh, 10rem) 7vw; border-top: 1px solid var(--line); background: var(--cream); }
.public-gift h2 { max-width: 14ch; margin: 0; font: 400 clamp(3rem, 5.5vw, 6.2rem)/.93 var(--display); letter-spacing: -.035em; }
.public-gift div > p { max-width: 41rem; margin: 2.5rem 0 0; color: var(--muted); font: 400 1.15rem/1.75 var(--display); }

.reading { background: var(--cream); }
.reading-title, .chapter, .source-notes { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(0, 1.65fr); gap: 8vw; padding: clamp(6rem, 11vh, 10rem) 7vw; border-top: 1px solid var(--line); }
.reading-title h2, .chapter > header h2, .source-notes header h2 { margin: .9rem 0 0; font: 400 clamp(2.8rem, 5vw, 5.8rem)/.94 var(--display); letter-spacing: -.035em; }
.prose { max-width: 48rem; font: 400 clamp(1.18rem, 1.45vw, 1.38rem)/1.78 var(--display); }
.prose p { margin: 0 0 1.55em; }
.prose .salutation { font-style: italic; }
.prose em { font-style: italic; }
.prose sup { font: 600 .55em var(--body); }
.prose sup a { color: var(--gold); text-decoration: none; }
.prose h3 { margin: 4.2rem 0 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font: 500 .72rem/1.5 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.prose .signoff { margin-top: 4rem; font-style: italic; }
.prose .signoff strong { font-weight: 500; }

.chapter > header { position: sticky; top: 8.5rem; align-self: start; }
.chapter > header > span { display: block; color: var(--gold); font: 600 .56rem var(--body); letter-spacing: .16em; text-transform: uppercase; }
.chapter > header h2 { max-width: 10ch; }
.chapter > header small { display: block; max-width: 22rem; margin-top: 1.5rem; color: var(--muted); font: italic 400 1.15rem/1.35 var(--display); letter-spacing: 0; text-transform: none; }
.conclusion { background: var(--paper); }
.conclusion > header h2 { max-width: 12ch; }

.source-notes { background: var(--ink); color: var(--white); }
.source-notes header h2 { max-width: 10ch; }
.source-notes ol { margin: 0; padding-left: 1.25rem; color: rgba(255,255,255,.72); font: 400 1rem/1.65 var(--display); }
.source-notes li { margin: 0 0 1.5rem; padding-left: .7rem; }
.source-notes li::marker { color: var(--gold); font-family: var(--body); font-size: .65rem; }
.source-notes a { color: #c6aa6d; }
.framework-note { grid-column: 2; margin-top: 1.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.64); }
.framework-note h3 { margin: 0 0 1rem; color: var(--white); font: 600 .55rem var(--body); letter-spacing: .15em; text-transform: uppercase; }
.framework-note p { max-width: 47rem; font: 400 1rem/1.7 var(--display); }

.essay-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; padding: 2rem 3.5vw; background: var(--cream); }
.essay-footer span, .essay-footer a { font-size: .5rem; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.essay-footer span:nth-child(2) { text-align: center; }
.essay-footer > a { justify-self: end; }

@media (max-width: 760px) {
  .essay-header { grid-template-columns: 1fr auto; min-height: 4.6rem; padding-inline: 1.25rem; }
  .essay-header span { display: none; }
  .essay-hero { min-height: auto; padding: 7rem 1.25rem 5rem; }
  .essay-hero h1 { font-size: clamp(3.65rem, 17vw, 6.3rem); }
  blockquote { width: 100%; margin-top: 5rem; }
  .public-gift { grid-template-columns: 1fr; gap: 2rem; padding: 6rem 1.25rem; }
  .reading-title, .chapter, .source-notes { grid-template-columns: 1fr; gap: 2.5rem; padding: 6rem 1.25rem; }
  .chapter > header { position: static; }
  .framework-note { grid-column: 1; }
  .essay-footer { grid-template-columns: 1fr auto; }
  .essay-footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}