body { font-family: system-ui, sans-serif; max-width: 860px; margin: 2rem auto; padding: 0 1rem; color: #222; background: #fffaf4; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 1rem; background: #e8762c; border-radius: 8px; }
nav a { color: #fff; font-weight: 600; text-decoration: none; }
nav a:hover { text-decoration: underline; }
h1 { color: #a5481a; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
figure { margin: 0; padding: .5rem; background: #fff; border: 1px solid #eadccd; border-radius: 8px; }
figure img { width: 100%; height: auto; display: block; }
figcaption { font-size: .85rem; margin-top: .4rem; color: #555; }
.note { padding: .75rem 1rem; background: #fff3cd; border-left: 4px solid #e0a800; }