/* Uses your global tokens from styles.css */

.gallery-simple { display: grid; gap: var(--gap); padding: 18px 0 28px; }
.g-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.g-head h1 { margin:0; }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.project-menu { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.project-menu .chip { text-decoration:none; }

.project-section { margin-top: var(--gap); }
.proj-header { display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.proj-header h2 { margin:0; }

.grid {
  --size: 220px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr));
  gap: 12px;
}
@media (max-width:600px){ .grid{ --size: 150px } }

.tile {
  display:block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 4 / 3;
}
.tile img { width:100%; height:100%; object-fit:cover; display:block; }

.project-section[hidden] { display:none; }