:root {
  --bg: #27211f;
  --text: #f3eee6;
  --muted: #cfc8be;
  --link: #8fd6b4;
  --rule: #f3eee6;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a.ext::after { content: "\00B0"; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--text); color: var(--bg); padding: 8px 12px;
}
.skip:focus { left: 16px; top: 16px; }

h1, h2, h3, .brand {
  font-family: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

header.site { padding: 40px 48px 0; }
.brand { font-size: 34px; color: var(--text); text-transform: none; }
.brand:hover { text-decoration: none; }

main { max-width: 860px; padding: 40px 48px 24px 92px; }

.lede { font-size: 22px; max-width: 700px; }
.lede p { margin: 0 0 14px; }

.row { display: grid; grid-template-columns: 290px 1fr; gap: 28px; margin-top: 56px; }
.row h2 { font-size: 24px; margin: 0; }
.row h2::after { content: ""; display: block; width: 36px; border-bottom: 1px solid var(--rule); margin-top: 26px; }
.item h3 { font-size: 24px; margin: 0 0 18px; }
.item p { margin: 0 0 10px; }
.item + .item { margin-top: 44px; }

hr { border: 0; border-top: 1px solid var(--rule); width: 36px; margin: 48px 0 24px; }

article.page h1 { font-size: 34px; margin: 0 0 28px; }
article.page h2 { font-size: 24px; margin: 36px 0 12px; }
article.page p { margin: 0 0 14px; max-width: 720px; }
article.page ul { padding-left: 22px; max-width: 720px; }
article.page li { margin-bottom: 4px; }
.rating { margin-bottom: 26px; }
.rating p { margin: 0 0 6px; }

footer.site { padding: 0 48px 48px 92px; }
footer.site p { margin: 0; }

@media (max-width: 720px) {
  header.site { padding: 28px 16px 0; }
  main { padding: 28px 16px 16px; }
  footer.site { padding: 0 16px 36px; }
  .lede { font-size: 19px; }
  .row { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .brand { font-size: 28px; }
}