:root {
  --bg: #120d24;
  --radius: 10px;
  --tile: 350px;
  --pad: clamp(24px, 6vw, 64px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0) 0 0 / 28px 28px,
    var(--bg);
  overscroll-behavior: none;
}

/* Padding also clears the notch / home indicator when installed full screen. */
main {
  padding:
    calc(var(--pad) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
}

.catalog {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, min(100%, var(--tile)));
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
}

.tile a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.3), box-shadow 0.35s ease;
  -webkit-touch-callout: none;
  user-select: none;
}
.tile a:focus-visible { outline: 3px solid #4cc6f0; outline-offset: 4px; }
.tile a:active { transform: scale(0.97); }

@media (hover: hover) {
  .tile a:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -14px rgba(255, 95, 162, 0.45);
  }
}

.tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .tile a { transition: none; }
}