/* ── GALLERY ───────────────────────────────────────────── */
#gallery { background: var(--0); border-top: 1px solid var(--10) }
.gal-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 100px; gap: 1px; background: var(--10) }
.gc { overflow: hidden; position: relative; background: var(--5) }
.gc img { filter: grayscale(100%) contrast(1.1) brightness(.72); transition: transform .5s, filter .4s }
.gc:hover img { transform: scale(1.06); filter: grayscale(40%) brightness(.85) }
.gc-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent 55%); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: 12px }
.gc:hover .gc-ov { opacity: 1 }
.gc-ov span { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6) }
.gc1 { grid-column: span 6; grid-row: span 4 }
.gc2 { grid-column: span 3; grid-row: span 2 }
.gc3 { grid-column: span 3; grid-row: span 2 }
.gc4 { grid-column: span 6; grid-row: span 3 }
.gc5 { grid-column: span 3; grid-row: span 2 }
.gc6 { grid-column: span 3; grid-row: span 2 }
.gc7 { grid-column: span 6; grid-row: span 3 }