:root {
  scrollbar-gutter: stable;
}

body {
  margin: 10px auto;
  max-width: 900px;
}

header {
  .flex-switch {
    --flex-switch-threshold: 15ch;
  }

  a {
    color: rgb(213, 92, 38);
  }

  a.title-card {
    font-size: 3rem;
    font-weight: bold;
    text-decoration: none;
  }

}

.feed-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  margin: 1rem 0;
}

.homepage-feed {
  article {
    margin: 1.5rem 0;

    display: grid;
    grid-template-columns: 1fr;
  }

  .post-link { text-decoration: none; font-weight: bold; }
  .post-link:focus, .post-link:hover { text-decoration: 2px solid underline; }

  .feed-site-link, .feed-local-link, time { color: var(--muted-fg); }
  a { overflow-wrap: anywhere; }

}

.muted {
  color: var(--muted-fg);
}

@media (min-width: 650px) {
  .homepage-feed {
    article {
      grid-template-columns: auto auto 1fr;
      column-gap: var(--gap);
      .post-link { grid-column: 1/4; }
    }

  }
}