:root {
  --bg: #fbfaf7;
  --text: #1b1f23;
  --rule: #c9c3b3;
  --link: #1a5a85;
  --focus: #8a4500;
  --g: 1rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s5: 4rem;
  --measure: 42rem;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191d;
    --text: #e8e6e1;
    --rule: #3a4149;
    --link: #8fc3e8;
    --focus: #ffb060;
  }
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-wrap: anywhere;
  font: 1.125rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bar,
.foot {
  padding-inline: max(var(--g), calc((100% - var(--measure)) / 2));
}

.bar {
  padding-block: var(--s2);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.logo {
  display: inline-block;
  color: var(--text);
  font: 700 1.125rem/1.15 var(--serif);
  text-decoration: none;
}

.logo span { display: block; }

main {
  flex: 1;
  width: min(var(--measure), 100% - 2 * var(--g));
  margin: 0 auto;
  padding: var(--s5) 0;
}

.block + .block { margin-top: var(--s5); }

h1 {
  margin: 0;
  text-wrap: balance;
  font: 600 clamp(2rem, 1.3rem + 3.2vw, 3.5rem)/1.15 var(--serif);
}

.block p {
  max-width: 34rem;
  margin: var(--s3) 0 0;
  font-size: 1.25rem;
}

.foot {
  padding-block: var(--s3);
}

.foot p {
  margin: 0;
  font-size: .875rem;
}

.foot .icon {
  margin-right: .4rem;
  font-size: 1rem;
}

.foot a {
  color: inherit;
}

a {
  color: var(--link);
  text-underline-offset: .2em;
}

.logo:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (min-width: 40rem) {
  :root { --g: 1.5rem; }
}

@media (min-height: 38rem) {
  html { scroll-padding-top: 6rem; }

  .bar {
    position: sticky;
    top: 0;
  }
}