:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #111;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible { outline: 3px solid #111; outline-offset: 4px; }

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  background: #111;
  color: #fff;
  z-index: 2;
}
.skip:focus { top: 1rem; }

.shell { width: min(100% - 3rem, 880px); margin-inline: auto; }
.topbar { border-bottom: 1px solid #d7d7d7; }
.topbar .shell { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 70px; }
.wordmark { font-size: 1.15rem; font-weight: 780; letter-spacing: -.055em; text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .88rem; }

main { padding-block: clamp(3rem, 7vw, 6rem) 5rem; }
.eyebrow { color: #555; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 760px; margin: .75rem 0 1.25rem; font-size: clamp(2.7rem, 7vw, 5.1rem); line-height: 1.02; letter-spacing: -.075em; }
.lead { max-width: 660px; color: #414141; font-size: clamp(1.07rem, 2.5vw, 1.32rem); line-height: 1.55; }
.rule { height: 5px; width: 84px; background: #111; margin: 2.5rem 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 4rem; }
.card { padding: 1.6rem; border: 1px solid #d7d7d7; }
.card h2, .prose h2 { margin: 0 0 .7rem; font-size: 1.13rem; letter-spacing: -.03em; }
.card p, .prose p, .prose li { color: #414141; line-height: 1.65; }
.prose { max-width: 720px; }
.prose h2 { margin-top: 2.5rem; }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }
.meta { color: #606060; font-size: .88rem; }
footer { border-top: 1px solid #d7d7d7; padding-block: 1.6rem; color: #565656; font-size: .84rem; }
footer .shell { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .topbar .shell { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1rem; }
}