:root{
  --bg:#ffffff; --text:#222; --accent:#2a9d8f; --muted:#666;
  --maxw:900px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:1.2rem auto;padding:0 1rem}
.site-header{padding:1.2rem 0;text-align:center}
.site-header h1{margin:.2rem 0;font-size:1.6rem}
.subtitle{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{display:block;padding:1rem;border:1px solid #eee;border-radius:8px;text-decoration:none;color:inherit;background:#fff;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.card .thumb{height:100px;margin-bottom:.6rem;display:flex;align-items:center;justify-content:center;background:#fafafa;border-radius:6px}
.card h2{margin:.2rem 0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.story{display:grid;grid-template-columns:1fr;gap:1rem}
.illustration{margin:0 0 1rem 0}
.back{display:inline-block;margin:0.6rem 0;color:var(--accent);text-decoration:none}
.site-footer{text-align:center;padding:1rem 0;color:var(--muted);font-size:.85rem}
.article p{margin-bottom:.8rem}
.note{color:var(--muted);font-size:.9rem}
.meta{color:var(--muted);margin-top:0.2rem;font-size:0.95rem}
@media (min-width:700px){ .story{grid-template-columns:1fr 1fr} .illustration{max-width:100%} }