.page-head{padding:140px 0 40px}
.page-head h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.02em;
  margin:.4rem 0 14px}
.page-head p{color:var(--muted);max-width:60ch}

.gallery{padding:32px 0 120px}
.gallery__grid{display:grid;gap:28px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.gallery__tile{display:block;text-decoration:none;color:inherit;
  border-radius:14px;overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(14,30,51,.05);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             box-shadow .3s ease,
             border-color .3s ease}
.gallery__tile:hover{transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(14,30,51,.14);
  border-color:rgba(27,59,107,.35)}
.gallery__tile:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

.gallery__shot{position:relative;aspect-ratio:16/10;
  background:linear-gradient(135deg,#0E1E33,#1B3B6B);overflow:hidden}
.gallery__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery__tile:hover .gallery__shot img{transform:scale(1.03)}
.gallery__shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 70%,rgba(14,30,51,.18));
  pointer-events:none}

.gallery__meta{padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:6px}
.gallery__name{font-family:var(--display);font-weight:700;
  font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.gallery__desc{color:var(--muted);font-size:.94rem;line-height:1.45}
.gallery__link{margin-top:6px;font-size:.82rem;font-weight:600;
  color:var(--accent);letter-spacing:.01em}

@media(max-width:680px){
  .page-head{padding:112px 0 28px}
  .gallery{padding:20px 0 80px}
  .gallery__grid{gap:20px}
}