:root {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  color: #25302c;
  background: #ebe8de;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 8%, rgba(196, 132, 82, .18), transparent 28rem),
    #ebe8de;
}

main {
  width: min(92vw, 70rem);
  margin: 0 auto;
  padding: clamp(4rem, 11vw, 9rem) 0;
}

.eyebrow {
  font: 600 .72rem/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .24em;
  color: #8f5f3f;
}

h1 {
  max-width: 18ch;
  margin: 1.2rem 0;
  font-size: clamp(3rem, 8vw, 6.8rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
}

.lede {
  max-width: 34rem;
  margin: 2rem 0 6rem;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.6;
  color: #58635e;
}

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  border-top: 1px solid #b9b7ae;
}

article {
  padding: 2rem 2rem 2rem 0;
  border-bottom: 1px solid #b9b7ae;
}

time {
  font: 500 .75rem/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  color: #8f5f3f;
}

h2 { margin: .7rem 0; font-weight: 500; }
article p { max-width: 30rem; line-height: 1.55; color: #58635e; }

@media (prefers-color-scheme: dark) {
  :root { color: #e5e1d7; background: #17201d; }
  body { background: radial-gradient(circle at 85% 8%, rgba(160, 93, 53, .2), transparent 28rem), #17201d; }
  .lede, article p { color: #aeb7b2; }
  section, article { border-color: #3b4641; }
}