:root { --maxw: 840px; --fg: #111; --muted:#666; --bg:#fff; --link:#0b72ff; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.wrap, .container { max-width: var(--maxw); margin: 0 auto; padding: 1rem; }
.site-header, .site-footer { border-top: 4px solid #000; }
.nav, .foot-nav { list-style:none; display:flex; gap:1rem; padding:0; margin:0; flex-wrap:wrap; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 2rem; line-height:1.2; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.4rem; margin-top: 1.6rem; }
h3 { font-size: 1.15rem; margin-top: 1rem; }
.byline { display:flex; gap:0.75rem; align-items:center; margin: 0.5rem 0 1rem; color: var(--muted); }
.author-avatar { border-radius: 999px; }
.hero img { width:100%; height:auto; display:block; border-radius: 6px; }
.breadcrumbs { background:#f7f7f7; border-bottom:1px solid #eee; }
.breadcrumbs ol { max-width: var(--maxw); margin:0 auto; padding:0.5rem 1rem; display:flex; gap:0.5rem; list-style:none; flex-wrap:wrap; }
.breadcrumbs a { color: #333; }
.article-body p { margin: 0.8rem 0; }
.article-body img { max-width:100%; height:auto; }
.related ul { list-style: none; padding:0; }
.related li { margin: 0.25rem 0; }
.post-grid { list-style:none; display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1rem; padding:0; }
.post-card { border: 1px solid #eee; border-radius:8px; overflow:hidden; background:#fff; }
.post-card img { width:100%; height:auto; display:block; }
.excerpt { color: var(--muted); }
/* --- Header/Menu layout --- */
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
}

.site-header .logo{
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:1.125rem;
  line-height:1;
}

.site-header nav{ margin-left:auto; }

.nav{
  display:flex;
  gap:1.25rem;         /* space between menu items */
  flex-wrap:nowrap;    /* keep in one row on desktop */
  padding:0;
  margin:0;
}

.nav a{
  display:inline-block;
  padding:.25rem 0;
  font-weight:500;
}

@media (max-width: 720px){
  .site-header .wrap{ flex-wrap:wrap; }
  .nav{ flex-wrap:wrap; gap:.75rem; }
}

/* Optional: make the breadcrumb look tighter */
.breadcrumbs { padding:.25rem 0; }