/* styles.css */
:root{
--bg:#f7f8fb;
--card:#ffffff;
--muted:#6b7280;
--accent:#2563eb;
--radius:12px;
}


*{box-sizing:border-box}
body{
margin:0;
font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
background:var(--bg);
color:#111827;
-webkit-font-smoothing:antialiased;
}


.site-header{
background:linear-gradient(90deg, rgba(37,99,235,0.1), rgba(99,102,241,0.06));
padding:48px 16px;
text-align:center;
}
.site-header h1{margin:0 0 8px;font-size:clamp(20px,4vw,36px)}
.site-header .lead{color:var(--muted);margin:0;font-size:1rem}


.container{
max-width:980px;
margin:32px auto;
padding:0 16px 48px;
}


.text-block{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06);margin-bottom:20px}
.text-block h2{margin-top:0}


.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0}
.gallery figure{background:var(--card);padding:0;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,0.04);margin:0}
.gallery img{display:block;width:100%;height:200px;object-fit:cover}
.gallery figcaption{padding:10px 12px;color:var(--muted);font-size:0.95rem}


.cards{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.card{flex:1 1 220px;background:var(--card);padding:14px;border-radius:8px;box-shadow:0 4px 12px rgba(15,23,42,0.04)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}


.site-footer{text-align:center;padding:18px 16px;color:var(--muted);font-size:0.9rem}


@media (max-width:480px){
.gallery img{height:140px}
.site-header{padding:28px 12px}
}