:root {
  color-scheme: light;
  --paper: #fdfcf9;
  --ink: #1c1b18;
  --muted: #55514b;
  --line: #cec9bf;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, sans-serif;
  font: 16px/1.5 var(--sans);
  background: var(--paper);
  color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip { position: absolute; inset: 1rem auto auto 1rem; transform: translateY(-200%); background: var(--paper); padding: .5rem; }
.skip:focus { transform: none; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--ink); }
.bar img { display: block; object-fit: contain; width: clamp(76px, 16vw, 112px); }
.bar nav { display: flex; gap: clamp(.75rem, 3vw, 1.5rem); flex-wrap: wrap; }
.bar a { display: inline-flex; align-items: center; min-height: 44px; }
footer.bar { border-top: 1px solid var(--ink); border-bottom: 0; margin-top: 4rem; }
main { max-width: 71rem; padding: 0 clamp(1rem, 4vw, 2.5rem); margin: auto; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.03; margin: 0; }
h1 { font-size: clamp(2.45rem, 6vw, 5.4rem); letter-spacing: -.045em; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); }
.intro { margin: clamp(2.5rem, 7vw, 6rem) 0 2.5rem; }
.intro.compact { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.lede { max-width: 56ch; color: var(--muted); font-size: 1.06rem; }
.search { max-width: 43rem; margin-top: 1.5rem; }
.search label { display: block; margin-bottom: .45rem; font-size: .9rem; }
.search div { display: flex; gap: .5rem; }
.search input, .search button { font: inherit; border: 1px solid var(--ink); border-radius: 0; min-height: 46px; padding: .55rem .75rem; }
.search input { flex: 1; min-width: 0; background: transparent; color: var(--ink); }
.search button { background: var(--ink); color: var(--paper); cursor: pointer; }
.years, .entries { list-style: none; padding: 0; margin: .8rem 0 0; }
.years a { min-height: 54px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); text-decoration: none; gap: 1rem; }
.years li:last-child, .entries li:last-child { border-bottom: 1px solid var(--line); }
.years a span:first-child { font: 1.65rem var(--serif); font-variant-numeric: tabular-nums; }
.years a span:last-child, .meta { color: var(--muted); }
.years a:hover span:first-child, .entries a:hover { text-decoration: underline; }
.entries li { padding: .9rem 0; border-top: 1px solid var(--line); min-width: 0; }
.entries a { display: inline-block; font: 1.4rem/1.22 var(--serif); text-decoration: none; overflow-wrap: anywhere; }
.meta { margin: .38rem 0 0; font-size: .88rem; }
.entries.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }
.tools, .pagination { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tools a, .pagination a { display: inline-flex; align-items: center; min-height: 44px; }
.tools a[aria-current] { font-weight: 650; }
.pagination { justify-content: space-between; margin: 1rem 0; }
.reading { padding-top: clamp(1.5rem, 5vw, 4.5rem); }
.reading header { margin-inline: auto; max-width: 55rem; }
.reading nav { margin-bottom: 1.4rem; color: var(--muted); font-size: .88rem; }
.reading h1 { margin-top: .6rem; }
.article-text { max-width: 67ch; margin: clamp(1.75rem, 4vw, 3rem) auto 0; font-size: clamp(1.05rem, 2vw, 1.18rem); line-height: 1.65; overflow-wrap: anywhere; }
.article-text :is(h2, h3, h4) { margin: 1.5em 0 .5em; font-family: var(--serif); }
.article-text :first-child { margin-top: 0; }
.article-text .standfirst { font: clamp(1.22rem, 3vw, 1.55rem)/1.4 var(--serif); }
.article-text :is(img, figure) { max-width: 100%; height: auto; margin-inline: 0; }
.article-text :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }
.article-text blockquote { margin-inline: 0; padding-inline-start: 1rem; border-left: 1px solid var(--line); }
.related { margin: 3rem auto 0; max-width: 67ch; }
@media (max-width: 500px) {
  .entries.grid { grid-template-columns: 1fr; }
  .bar { font-size: .9rem; }
  .article-text { line-height: 1.58; }
}