/* maxbrunke.com: white reading field framed by a brick header and footer, camel band under the header */
:root {
  --page: #ffffff;
  --ink: #2a2522;
  --muted: #6e645d;
  --brick: #8c3a2b;
  --brick-ink: #fbf6f2;
  --camel: #c39a6b;
  --yellow: #e2b13c;
  --rule: #e9e1d9;
  --link: #8c3a2b;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1d1a18; --ink: #ece4dc; --muted: #b3a79c; --brick: #9b4636; --brick-ink: #fbf3ec;
    --camel: #b48d61; --yellow: #e8bc4f; --rule: #3a332e; --link: #d2a877; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  display: flex;
  flex-direction: column;
}
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

header.site { background: var(--brick); color: var(--brick-ink); padding-inline: 16px; }
.bar {
  max-width: 44rem;
  margin: 0 auto;
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}
.name { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.01em; color: var(--brick-ink); text-decoration: none; }
nav { display: flex; gap: 22px; }
nav a {
  color: var(--brick-ink);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
nav a[aria-current="page"] { border-bottom-color: var(--yellow); }
nav a:hover { border-bottom-color: var(--camel); }
.cornice { height: 6px; background: var(--camel); }

main { flex: 1 0 auto; padding-inline: 16px; }
.col { max-width: 38rem; margin: 0 auto; padding-block: 56px 72px; }
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 6px;
  text-wrap: balance;
}
.place { color: var(--muted); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 36px; }
.col p { margin: 0 0 1.1em; }
.email { display: inline-block; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); font-weight: 500; }

.intro { margin-bottom: 40px !important; }
.group { margin: 0 0 34px; }
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--camel);
}
ul.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.list li { display: flex; flex-wrap: wrap; gap: 0 8px; }
ul.list cite { font-style: italic; }
.by { color: var(--muted); }

footer.site { background: var(--brick); color: var(--brick-ink); padding-inline: 16px; }
.foot {
  max-width: 44rem;
  margin: 0 auto;
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
}
.li {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(251, 246, 242, 0.5);
  border-radius: 4px;
  color: var(--brick-ink);
}
.li svg { width: 15px; height: 15px; fill: currentColor; }