/* Catppuccin Mocha palette (MIT), https://catppuccin.com, the same dark scheme
   as the project docs sites. */
:root {
  --base: #1e1e2e;
  --mantle: #181825;
  --surface0: #313244;
  --surface1: #45475a;
  --text: #cdd6f4;
  --subtext: #bac2de;
  --overlay: #9399b2;
  --heading: #e6e9f5;
  --blue: #89b4fa;
  --mauve: #cba6f7;
  --yellow: #f9e2af;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--heading); line-height: 1.25; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--surface1); }
h3 { font-size: 1.15rem; margin: 0; }

.hero, main, footer { max-width: 60rem; margin: 0 auto; padding: 0 16px; }

.hero { display: flex; gap: 1.25rem; align-items: center; padding-top: 3rem; }
.hero h1 { margin: 0; font-size: 2.4rem; }
.avatar { border-radius: 50%; border: 2px solid var(--surface1); flex: none; }
.tagline { margin: 0.25rem 0 0; color: var(--subtext); }

.links { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.links a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--surface1);
  border-radius: 999px;
  background: var(--mantle);
  font-size: 0.95rem;
}
.stats { color: var(--overlay); font-size: 0.95rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--mantle);
  border: 1px solid var(--surface1);
  border-radius: 8px;
}
.card p { flex: 1; margin: 0.5rem 0 0.75rem; color: var(--subtext); font-size: 0.95rem; overflow-wrap: anywhere; }

.meta, .row-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; }
.facts { color: var(--overlay); font-size: 0.9rem; display: inline-flex; gap: 0.75rem; }
.facts .lang { color: var(--mauve); }
.meta .links, .rows .links { display: inline-flex; gap: 0.75rem; margin: 0; font-size: 0.9rem; }
.meta .links a, .rows .links a { padding: 0; border: 0; background: none; }

.category-nav { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.count { color: var(--overlay); font-size: 0.85rem; }

.category { margin-top: 2rem; scroll-margin-top: 1rem; }
.rows { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.rows li { padding: 0.75rem 0; border-top: 1px solid var(--surface0); }
.rows .name { font-weight: 600; }
.rows p { margin: 0.25rem 0; color: var(--subtext); font-size: 0.95rem; overflow-wrap: anywhere; }

.posts { list-style: none; padding: 0; }
.posts li { padding: 0.35rem 0; }
.posts time { color: var(--overlay); font-variant-numeric: tabular-nums; margin-right: 0.5rem; }

footer { margin-top: 3rem; padding-bottom: 2rem; color: var(--overlay); font-size: 0.9rem; border-top: 1px solid var(--surface0); }

@media (max-width: 30rem) {
  .hero { padding-top: 2rem; }
  .hero h1 { font-size: 2rem; }
  .avatar { width: 72px; height: 72px; }
}