@font-face {
  font-family: Inter;
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --content-width: 720px;
}

body {
  padding: var(--space-l);
}

body > header {
  margin-bottom: calc(var(--space-l) * 2);
}

#brand {
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
}

body > footer {
  margin-top: calc(var(--space-l) * 2);
  padding-top: var(--space-l);
  border-top: var(--border);
}

/* Post list */
#posts {
  list-style: none;
  padding: 0;
}

#posts > li + li {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: var(--border);
}

#posts h2 {
  margin: 0 0 var(--space-xs);
}

#posts h2 a {
  color: var(--foreground);
  text-decoration: none;
}

#posts h2 a:hover {
  text-decoration: underline;
}

#posts p {
  margin: var(--space-s) 0 0;
}

/* A post */
#post > header {
  margin-bottom: var(--space-l);
}

#post > header h1 {
  margin-bottom: var(--space-s);
}

#post img {
  max-width: 100%;
  height: auto;
}

#post :where(p, li) a {
  text-decoration: underline;
}

/* BerlinX draws an <article> as a card; a post reads as the page itself. */
#post {
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
}