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

/* container: 80% width on desktop, 100% on mobile */
.container{width:80%;max-width:1200px;margin:0 auto;padding:1rem}
@media (max-width:800px){ .container{width:100%;padding:1rem} }

header{border-bottom:1px solid #eaeaea}

/* page links (exclude header/navbar links) */
:not(header) a{color:var(--blue-slate)}
:not(header) a:visited{color:var(--charcoal-blue)}
:not(header) a:hover{text-decoration:underline}

/* Hero and cards */
.hero{padding:3rem 0;display:grid;gap:1rem}
.lead{font-size:1.125rem;color:#333}
.card{background:#fff;border:1px solid #eee;padding:1.25rem;border-radius:10px}
footer{padding:1rem 0;color:#666;font-size:.9rem;border-top:1px solid #f0f0f0}

/* Grid and profile */
.grid{display:grid;grid-template-columns:1fr 260px;gap:1rem;align-items:start}
@media (max-width:800px){.grid{grid-template-columns:1fr}}
.meta{color:#666;font-size:.95rem}

/* Skills */
.skills{display:flex;flex-wrap:wrap;gap:.5rem}
.skill{background:#f3f8ff;color:#053e7a;padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

/* Blog list */
.post-list{display:grid;gap:1rem}
.post{padding:1rem;border:1px solid #eee;border-radius:8px}

/* Code / pre */
pre{background:#f7f7f8;padding:8px;border-radius:6px;overflow:auto}