:root {
  --bg: #0f0f11;
  --surface: #17171a;
  --text: #f2f2f4;
  --muted: #9a9aa4;
  --gap: 10px;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #fafaf9; --surface: #ffffff; --text: #1a1a1c; --muted: #6b6b76; }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.head { padding-bottom: 8px; }
.banner { width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--surface); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.titles { padding: 20px 16px 8px; text-align: center; }
h1 { margin: 0 0 2px; font-size: 1.6rem; font-weight: 650; letter-spacing: -0.01em; }
.event { margin: 0; font-size: 1.05rem; color: var(--text); opacity: 0.85; }
.meta { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.muted { color: var(--muted); }
main { padding: 8px 16px 40px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap);
}
@media (max-width: 420px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.tile {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 10px; background: var(--surface);
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.tile:hover img { transform: scale(1.04); }
.empty { text-align: center; padding: 56px 16px; color: var(--muted); }
footer { padding: 24px 16px 40px; text-align: center; font-size: 0.8rem; }