.nav {
  color-scheme: light dark;
  --n-fg: light-dark(#1d232a, #fcfcfc);
  --n-muted: light-dark(#5b6670, #98a2ac);
  --n-line: light-dark(#d8dfe5, #333b44);
  --n-accent: light-dark(#2a63d4, #82b1ff);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  max-width: 56rem;
  margin: 0 auto 2.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--n-line);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .82rem;
  line-height: 1.7;
}
.nav-links { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.nav a { padding: 0; margin: 0; background: none; color: var(--n-fg); font-weight: 600; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--n-accent); background: none; }
.nav-brand { font-weight: 800; letter-spacing: -.02em; }
.online { color: var(--n-muted); font-size: .75rem; }
#online { font-weight: 700; color: var(--n-fg); }

.blog-main { min-width: 0; }

.post-item {
  background: var(--frame);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  margin: 0 0 1rem;
  transition: border-color .2s;
}
.post-item:hover { border-color: var(--accent); }
.post-item-title { margin: 0 0 .15em; font-size: 1.15rem; line-height: 1.3; text-wrap: balance; }
.post-item .post-meta { margin: 0 0 .7em; }
.post-excerpt { margin: 0 0 .7em; overflow-wrap: anywhere; }
.read-more { font-size: .82rem; }

.post {
  background: var(--frame);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.1rem, 4vw, 2rem);
  margin: 1.2rem 0;
}
.post h1 {
  margin: 0 0 .35em;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.post-meta { margin: 0; }
.post hr {
  margin: 1rem 0 1.4rem;
  border: 0;
  border-top: 1px solid var(--line);
}
.post-content { line-height: 1.75; overflow-wrap: anywhere; }
.post-content > :last-child { margin-bottom: 0; }
.post-content img,
.post-content video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
  border-radius: 6px;
}

.back { margin-top: 1.5rem; }

@media (max-width: 30em) {
  .post-item { padding: .95rem 1rem; }
}