/* Minimal site stylesheet for navigation and homepage layout */
:root{
  --max-width: 1100px;
  --accent:#1b1b1b;
  --muted:#666;
}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--accent);
  line-height:1.5;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1.25rem}

/* Navigation */
.primary-nav{background:#fff;border-bottom:1px solid #eee}
.primary-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0.6rem 1rem}
.primary-nav .brand{font-weight:600;text-decoration:none;color:var(--accent);font-size:1rem}
.primary-nav .nav-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.primary-nav .nav-links a{color:var(--accent);text-decoration:none;padding:0.25rem 0.5rem;border-radius:3px}
.primary-nav .nav-links a:hover, .primary-nav .nav-links a:focus{background:#f5f5f5}

/* Responsive: stack on small screens */
@media (max-width:700px){
  .primary-nav .nav-inner{flex-direction:column;align-items:stretch}
  .primary-nav .nav-links{flex-direction:column;gap:0.25rem;margin-top:0.5rem}
}

/* Main content */
.site-main{padding:1rem 0}

/* Hero */
.hero{display:flex;align-items:center;gap:1rem;padding:1rem 0}
.hero .intro{flex:1}
.hero h1{margin:.2rem 0;font-size:1.6rem}
.hero p{color:var(--muted);margin:0}

/* Post grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.card{background:#fff;border:1px solid #eee;border-radius:4px;overflow:hidden}
.card img{width:100%;height:140px;object-fit:cover;display:block}
.card h3{font-size:1rem;margin:0;padding:.5rem}
.card a{color:inherit;text-decoration:none}

/* Simple lists */
.list-compact{padding-left:0;list-style:none}
.list-compact li{padding:.25rem 0}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:1rem 0;margin-top:2rem;color:var(--muted);font-size:.9rem}

/* Utility */
.small{font-size:.9rem;color:var(--muted)}

/* Keep post images inside the viewport while preserving their aspect ratio. */
.site-main img{
  max-width:100%;
  height:auto;
}