/* Simple, responsive CSS for the starter site */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #666666;
  --accent: #B10202;
  --container: 1100px;
  --radius: 8px;
  --shadow: 0 6px 20px rgba(16,24,40,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

/* layout */
.container{max-width:var(--container);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.site-header{border-bottom:10px solid #B10202}
.site-title a{color:inherit;text-decoration:none}
.nav{list-style:none;padding:0;margin:0;display:flex;gap:0.75rem}
.nav a{text-decoration:none;color:var(--muted);padding:0.5rem 0.25rem}
.nav a:hover{color:var(--text)}

.hero{display:flex;gap:2rem;align-items:center;padding:2rem 0}
.hero-text h2{margin:0 0 0.5rem 0;font-size:2rem}
.hero-text p{margin:0 0 1rem 0}
.hero-image img{width:150px;height:150px;object-fit:cover;border-radius:50%;border:4px solid #B10202}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:white;padding:0.5rem 0.9rem;border-radius:6px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* grids */
.grid{display:grid;gap:1rem}
.projects-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* cards */
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card img{display:block;width:100%;height:140px;object-fit:cover}
.card-body{padding:0.85rem}
.card-body h4{margin:0 0 0.4rem 0}
.card-body p{margin:0;color:var(--muted);font-size:0.95rem}

/* posts */
.post-list{padding-left:0;list-style:none}
.post-list li{margin-bottom:0.6rem}
.post{padding:1rem 0}

/* contact */
.contact{margin-top:2rem;padding:1rem;background:#f9fafb;border-radius:8px}

/* footer */
.site-footer{border-top:1px solid #e6e6e6;padding:1rem 0;margin-top:2rem;text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:800px){
  .hero{flex-direction:column;text-align:center}
  .hero-image img{width:120px;height:120px}
}

/* code block */
pre{background:#0f172a;color:#e6eef8;padding:1rem;border-radius:6px;overflow:auto}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace}

/* small helper */
.meta{color:var(--muted);font-size:0.95rem}

/* About section: slightly larger, more readable text */
.about-section p{
  font-size:1.05rem; /* about ~16.8px if base is 16px */
  line-height:1.7;   /* breathing room for readability */
  color:var(--text);
  max-width:900px;
  margin:0 auto 1.25rem auto;
}

@media (max-width:700px){
  .about-section p{font-size:1rem;line-height:1.6}
}