:root {
  --bg: #f3eee5;
  --ink: #34332f;
  --muted: #6b665f;
  --accent: #a44b35;
  --line: #d1c9bc;
  --paper: #e8e0d3;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
main { min-height: calc(100vh - 195px); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
::selection { background: #d8b8a7; color: #262520; }
.site { max-width: 1440px; margin: auto; padding: 0 6%; }
.skip { position: fixed; top: -100px; left: 12px; z-index: 10; padding: 10px 14px; background: var(--ink); color: white; }
.skip:focus { top: 12px; }

.header { min-height: 106px; display: flex; justify-content: space-between; align-items: center; gap: 40px; border-bottom: 1px solid var(--line); }
.wordmark { font: 28px/1 var(--serif); letter-spacing: -1.1px; white-space: nowrap; }
.wordmark span, .footer-name span, .page-heading h1 span, .not-found h1 span { color: var(--accent); }
nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); font-size: 14px; }
nav a { padding: 7px 0; }
nav a[aria-current='page'] { color: var(--accent); border-bottom: 1px solid var(--accent); }

.eyebrow { text-transform: uppercase; letter-spacing: 1.6px; font-size: 12px; line-height: 1.5; font-weight: 500; }
.accent { color: var(--accent); }
.text-link { display: inline-flex; align-items: center; gap: 24px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 14px; }
.text-link span { font-size: 18px; }

.poem-main { max-width: 920px; margin: 0 auto; padding-top: 46px; }
.poem-home { padding-top: 62px; }
.poem-heading { max-width: 760px; padding: 0 0 36px; border-bottom: 1px solid var(--line); }
.poem-heading h1 { margin: 18px 0 0; font: 400 clamp(3rem, 6.3vw, 5.7rem)/1.04 var(--serif); letter-spacing: -3px; text-wrap: balance; }
.poem-home .poem-heading { border-bottom-color: var(--ink); }
.poem-text { max-width: 660px; margin: 50px auto 70px; font: 22px/1.78 var(--serif); }
.poem-text p { margin: 0 0 36px; }
.poem-text p:nth-child(4), .poem-text p:last-of-type { color: var(--accent); font-style: italic; }
.poem-text .poem-signature { margin: 62px 0 0; text-align: right; color: var(--ink); font: italic 27px/1.2 var(--serif); }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.quiet-link { border-top: 1px solid var(--line); padding: 28px 0 70px; text-align: right; font-size: 13px; color: var(--muted); }
.quiet-link a { display: inline-flex; gap: 18px; }

.page-heading { padding: 70px 0 46px; border-bottom: 1px solid var(--ink); }
.page-heading h1 { margin: 18px 0 32px; font: 400 clamp(4.2rem, 9vw, 8rem)/.95 var(--serif); letter-spacing: -5px; }
.page-heading > div { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.page-heading p { max-width: 600px; margin: 0; color: var(--muted); font: 20px/1.55 var(--serif); }
.page-heading > div > .eyebrow { white-space: nowrap; }
.collection { padding-bottom: 80px; }
.entry-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 210px; gap: 24px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--line); }
.entry-row:hover h2 { color: var(--accent); }
.entry-number { padding-top: 4px; color: var(--muted); font: italic 20px var(--serif); }
.entry-row h2 { max-width: 700px; margin: 0 0 10px; font: 400 30px/1.2 var(--serif); letter-spacing: -.8px; transition: color .2s ease; }
.entry-row p { max-width: 650px; margin: 0; color: var(--muted); font-size: 15px; }
.entry-date { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; color: var(--muted); text-align: right; font-size: 13px; }
.entry-date span { display: flex; align-items: center; gap: 20px; }
.entry-date b { color: var(--ink); font-size: 20px; font-weight: 400; }

.about-page, .tech-page { max-width: 1040px; margin: 0 auto; }
.about-composition { padding: 54px 0 90px; }
.about-lead { max-width: 840px; margin: 0 0 64px; font: 400 clamp(2rem, 4vw, 3.3rem)/1.28 var(--serif); letter-spacing: -1.2px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-grid p { max-width: 430px; margin: 18px 0 0; color: var(--muted); font-size: 17px; }
.about-note { max-width: 600px; margin: 45px 0 0 auto; font: italic 21px/1.6 var(--serif); }
.tech-intro { max-width: 720px; padding: 56px 0 100px; }
.tech-intro p { margin: 0; font: 28px/1.55 var(--serif); color: var(--muted); }

.article-main { max-width: 840px; margin: 0 auto; padding-top: 32px; }
.back-link { font-size: 14px; color: var(--muted); }
.article-heading { padding: 58px 0 34px; border-bottom: 1px solid var(--line); }
.article-heading h1 { margin: 20px 0; font: 400 clamp(3rem, 6vw, 5rem)/1.08 var(--serif); letter-spacing: -2.8px; }
.article-deck { max-width: 680px; color: var(--muted); font: 24px/1.5 var(--serif); }
.prose { max-width: 680px; margin: 44px auto 60px; font: 22px/1.85 var(--serif); }
.prose p { margin: 0 0 28px; }
.prose p:first-child:first-letter { float: left; padding: 9px 10px 0 0; color: var(--accent); font-size: 70px; line-height: 1; }
.endmark { color: var(--accent); font-size: 12px; }
.article-end { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 30px 0 65px; border-top: 1px solid var(--line); }
.article-end .eyebrow { color: var(--muted); }
.not-found { min-height: 64vh; padding: 80px 0; }
.not-found h1 { margin: 20px 0; font: 400 clamp(4rem, 8vw, 7rem)/1 var(--serif); letter-spacing: -4px; }
.not-found p { margin-bottom: 34px; color: var(--muted); }

.footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0 34px; border-top: 1px solid var(--ink); color: var(--muted); font-size: 12px; }
.footer-name { color: var(--ink); font: 21px var(--serif); }
.footer > a:last-child { display: flex; gap: 15px; }

@media (max-width: 800px) {
  .site { padding: 0 6%; }
  .header { min-height: 90px; gap: 20px; }
  nav { gap: 20px; }
  .poem-main { padding-top: 40px; }
  .poem-heading h1 { letter-spacing: -2px; }
  .poem-text { font-size: 20px; }
  .page-heading { padding-top: 50px; }
  .page-heading h1 { letter-spacing: -3px; }
  .entry-row { grid-template-columns: 42px 1fr; }
  .entry-date { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .about-grid { gap: 40px; }
  .article-end { align-items: flex-start; flex-direction: column; }
  .footer { flex-wrap: wrap; }
}

@media (max-width: 580px) {
  .header { align-items: flex-start; flex-direction: column; justify-content: center; padding: 22px 0 18px; }
  .wordmark { font-size: 25px; }
  nav { width: 100%; justify-content: space-between; gap: 12px; font-size: 13px; }
  .eyebrow { font-size: 12px; letter-spacing: 1.35px; }
  .poem-home { padding-top: 46px; }
  .poem-heading { padding-bottom: 26px; }
  .poem-heading h1 { font-size: clamp(2.75rem, 13vw, 4rem); letter-spacing: -1.7px; }
  .poem-text { margin-top: 38px; font-size: 19px; line-height: 1.75; }
  .poem-text p { margin-bottom: 31px; }
  .poem-text .poem-signature { margin-top: 50px; font-size: 24px; }
  .page-heading h1 { margin-bottom: 25px; font-size: 4.2rem; }
  .page-heading > div { align-items: flex-start; flex-direction: column; gap: 20px; }
  .page-heading p { font-size: 18px; }
  .entry-row { grid-template-columns: 32px 1fr; gap: 14px; padding: 28px 0; }
  .entry-row h2 { font-size: 27px; }
  .entry-date { align-items: flex-start; flex-direction: column; gap: 8px; }
  .about-lead { font-size: 2.1rem; }
  .about-grid { grid-template-columns: 1fr; }
  .about-note { font-size: 19px; }
  .tech-intro p { font-size: 23px; }
  .article-heading h1 { letter-spacing: -2px; }
  .article-deck { font-size: 21px; }
  .prose { font-size: 20px; }
  .footer > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}