:root { --maxw: 980px; --pad: 1rem; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; line-height:1.6; }
header { background:#111; color:#fff; padding: 1rem 2rem; }
header h1 { margin:0; font-size: 1.8rem; }
main { max-width: 980px; margin: 0 auto; padding: 1.5rem 1rem; }
.nav { list-style:none; display:flex; gap:.75rem; padding:0; margin:.75rem 0 0 0; flex-wrap: wrap;}
.nav a { display:block; padding:.5rem .75rem; text-decoration:none; border:1px solid #444; border-radius:999px; color:#fff; }
.nav a:hover, .nav a:focus { background:#fff; color:#000; }
.hero { background:#f5f5f5; border:1px solid #ddd; padding:1rem; border-radius:.75rem; }
.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { border:1px solid #ddd; border-radius:.75rem; padding:1rem; background:#fff; }
.card img { width:100%; height:auto; border-radius:.5rem; }
figure { margin:0; }
figcaption { font-size:.9rem; color:#555; margin-top:.5rem; }
footer { border-top:1px solid #eee; margin-top:2rem; padding:1rem 1rem; text-align:center; }
.small { font-size:.9rem; color:#666; }
label { display:block; margin:.5rem 0 .2rem; }
input[type="text"], input[type="email"], textarea, select { width:100%; padding:.6rem; border:1px solid #bbb; border-radius:.5rem; }
button, input[type="submit"], input[type="reset"] { padding:.6rem 1rem; border-radius:.5rem; border:1px solid #222; cursor:pointer; background:#111; color:#fff; }
button:hover, input[type="submit"]:hover, input[type="reset"]:hover { opacity:.9; }
.notice { background:#fff8d8; border:1px solid #2000ad; padding:.75rem; border-radius:.5rem; }
.gallery { columns: 3 260px; column-gap: 1rem; }
.gallery figure { break-inside: avoid; margin-bottom: 1rem; }
@media (prefers-color-scheme: dark) {
  body { background:#0b0b0b; color:#e5e5e5; }
  .hero { background:#161616; border-color:#2a2a2a; }
  .card { background:#121212; border-color:#2a2a2a; }
  input, textarea, select { background:#0b0b0b; color:#e5e5e5; border-color:#333; }
  .nav a { border-color:#666; }
  footer { border-color:#2a2a2a; }
}