:root {
  color-scheme: light;
  color: #24201c;
  background: #f7f3eb;
  font: 18px/1.65 Georgia, serif;
}

body { margin: 0; }
header, main { box-sizing: border-box; padding-inline: 1.4rem; margin-inline: auto; }
header {
  max-width: 70rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid #cfc4b7;
  font: 600 .85rem/1.6 system-ui, sans-serif;
}
nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
main { max-width: 48rem; padding-block: clamp(2rem, 7vw, 5.5rem); }
h1 { font-size: clamp(2rem, 7vw, 4.6rem); line-height: 1.06; font-weight: 400; margin: 0 0 1.4rem; }
h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 400; }
a { color: #5a301e; text-underline-offset: .2em; }
a:hover { color: #8a3924; }
:focus-visible { outline: 2px solid #8a3924; outline-offset: 4px; }
.intro { font-size: clamp(1.1rem, 2vw, 1.45rem); max-width: 36rem; margin-bottom: 2.5rem; }
.label, .byline { font: .85rem/1.5 system-ui, sans-serif; color: #624b3c; }
.label { display: block; margin-bottom: .45rem; }
.byline { margin-bottom: 2rem; }
article p:not([class]) { max-width: 66ch; }
.index { padding: 0; list-style: none; }
.index li, details { border-top: 1px solid #cfc4b7; padding: .85rem 0; }
.index a, summary { font-size: 1.25rem; }
summary { cursor: pointer; }
details p { max-width: 60ch; }
details ul { padding-left: 1.4rem; }
aside { border-top: 1px solid #cfc4b7; padding-top: 1.25rem; margin-top: 2.5rem; }