/* Overrides on top of Pico CSS. Pico handles typography, layout,
   dark/light mode, links and lists; this only covers the bits Pico
   doesn't: the logo header, the summary box, and the index cards. */

main.container {
  max-width: 720px;
}

/* Header: round logo + name/tagline */
header.site {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.5rem;
}
header.site .logo-link {
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 0;
}
header.site .logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
header.site .title { display: flex; flex-direction: column; }
header.site .name { font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
header.site .tag { color: var(--pico-muted-color); font-size: 0.9rem; }

.updated { color: var(--pico-muted-color); margin-top: -0.5rem; }
.muted { color: var(--pico-muted-color); }

/* Summary callout */
.summary {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.summary strong { display: block; margin-bottom: 0.4rem; }
.summary ul { margin-bottom: 0; }

/* Index link cards */
.cards { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
a.card {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}
a.card:hover { border-color: var(--pico-primary); }
a.card .t { font-weight: 600; }
a.card .d { color: var(--pico-muted-color); font-size: 0.92rem; }

/* In-page nav links */
.nav { display: flex; gap: 1.25rem; margin-top: 2rem; }

/* Footer disclaimer */
footer {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: 3rem;
  padding-top: 1.25rem;
}