* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Georgia, 'Times New Roman', serif; background: #fafafa; color: #2b2b2b; line-height: 1.6; }
header { background: #1a1a1a; color: #fff; padding: 2rem 1rem; text-align: center; }
header h1 { font-weight: normal; letter-spacing: 3px; font-size: 1.8rem; }
header p { color: #999; font-style: italic; margin-top: .3rem; }
nav { background: #2b2b2b; text-align: center; padding: .7rem 0; }
nav a { color: #ccc; text-decoration: none; margin: 0 1.2rem; font-size: .95rem; text-transform: uppercase; letter-spacing: 1px; }
nav a:hover { color: #fff; }
main { max-width: 1000px; margin: 2rem auto; padding: 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.grid img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 3px; }
.grid img:hover { opacity: .85; }
h2 { margin: 1.5rem 0 .8rem; font-weight: normal; border-bottom: 1px solid #ddd; padding-bottom: .4rem; }
footer { text-align: center; padding: 2rem 1rem; color: #888; font-size: .85rem; border-top: 1px solid #e5e5e5; margin-top: 3rem; }
.hero { width: 100%; border-radius: 4px; margin: 1rem 0; }