:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #1f2b24;
  background: #f6f5ed;
  --muted: #435a4c;
  --accent: #155741;
  --line: #b6c4b6;
}
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: .3em; }
.bar, main { width: min(44rem, calc(100% - 3rem)); margin-inline: auto; }
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
main { padding-block: clamp(2rem, 7vw, 5rem); }
.eyebrow { color: var(--accent); letter-spacing: .11em; text-transform: uppercase; font-size: .78rem; font-weight: 650; }
h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2.8rem, 8vw, 5.7rem); line-height: 1.02; margin: .2em 0 .35em; }
.intro { color: var(--muted); font-size: clamp(1.06rem, 2.5vw, 1.27rem); max-width: 56ch; }
p { line-height: 1.7; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; margin: 2.2rem 0; list-style: none; border-block: 1px solid var(--line); }
.flow li { padding: .8rem .7rem .8rem 0; font-weight: 640; }
.flow span { color: var(--accent); display: block; font-size: .76rem; letter-spacing: .09em; margin-bottom: .4rem; }
section { border-top: 1px solid var(--line); padding: 1.2rem 0; }
h2 { font-family: Georgia, serif; font-weight: 400; font-size: 1.8rem; margin: 0; }
section p { margin-bottom: 0; }
code { overflow-wrap: anywhere; font-size: .92em; }
footer.bar { border-bottom: 0; border-top: 1px solid var(--line); }
@media (max-width: 28rem) { .flow { grid-template-columns: 1fr; } .flow li + li { border-top: 1px solid var(--line); } }