:root {
  color-scheme: light;
  --ink: #17211d;
  --paper: #f5f6f2;
  --muted: #5f6b66;
  --line: #cbd1cc;
  --moss: #285b48;
  --brick: #9a493b;
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }

.site-header {
  align-items: center;
  background: rgba(245, 246, 242, 0.96);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 5vw;
}

.wordmark { font-size: 1.05rem; font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 1.5rem; font-family: Arial, sans-serif; font-size: 0.84rem; }
nav a { text-decoration: none; }
nav a[aria-current="page"] { color: var(--brick); }

.hero { min-height: calc(88vh - 64px); overflow: hidden; position: relative; }
.hero img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero::after { background: rgba(9, 18, 15, 0.38); content: ""; inset: 0; position: absolute; }
.hero-copy { bottom: clamp(3rem, 9vh, 7rem); color: #fff; left: 5vw; max-width: 42rem; position: absolute; z-index: 1; }
.hero-copy h1 { font-size: clamp(3.2rem, 7rem, 7rem); font-weight: 400; letter-spacing: 0; line-height: 0.92; margin: 0.15em 0; }
.hero-copy > p:last-child { font-size: 1.15rem; line-height: 1.55; max-width: 32rem; }
.kicker, .section-label, time { font-family: Arial, sans-serif; font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase; }

.band { border-bottom: 1px solid var(--line); padding: 5rem 5vw; }
.intro { display: grid; gap: 4rem; grid-template-columns: minmax(15rem, 0.8fr) minmax(18rem, 1.2fr); }
.intro h2, .observations h2, .note-list h2 { font-size: 1.65rem; font-weight: 400; margin: 0.4rem 0 1rem; }
.intro > p { font-size: 1.35rem; line-height: 1.65; margin: 0; }
.section-label { color: var(--moss); margin: 0; }
.observations { display: grid; gap: 3.5rem; grid-template-columns: repeat(3, 1fr); }
.observations article { border-top: 3px solid var(--brick); padding-top: 1.2rem; }
.observations p:last-child, .note-list p, .prose > p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

.page-shell { margin: 0 auto; max-width: 72rem; min-height: calc(100vh - 146px); padding: 7rem 5vw; }
.page-heading { border-bottom: 1px solid var(--line); margin-bottom: 3rem; padding-bottom: 2rem; }
.page-heading h1 { font-size: 4rem; font-weight: 400; letter-spacing: 0; margin: 0.15rem 0 0; }
.note-list article { display: grid; gap: 1.25rem; grid-template-columns: 8rem 16rem 1fr; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.note-list h2, .note-list p { margin: 0; }
.prose { max-width: 48rem; }
.prose > p { color: var(--ink); font-size: 1.25rem; }
.text-link { color: var(--moss); font-family: Arial, sans-serif; font-size: 0.9rem; }

footer { align-items: center; display: flex; font-family: Arial, sans-serif; font-size: 0.78rem; justify-content: space-between; min-height: 82px; padding: 0 5vw; }

@media (max-width: 760px) {
  .hero { min-height: calc(80vh - 64px); }
  .hero-copy h1 { font-size: 3.25rem; }
  .intro, .observations { grid-template-columns: 1fr; }
  .band { padding-bottom: 3.5rem; padding-top: 3.5rem; }
  .note-list article { gap: 0.6rem; grid-template-columns: 1fr; }
  .page-heading h1 { font-size: 3rem; }
}