/* ==========================================================================
   STUDIO — grid
   A quiet, art-directed archive: the work stands alone. Lives inside the
   normal site shell (header/nav, .closing/footer) and scrolls like every
   other page — no custom scroll handling, no animation loop. Reuses the
   site's tokens, .section-head pattern and .container entirely.

   Deliberately a real grid, not column-count masonry: the work is ordered
   newest-first, and a masonry column fill reads top-to-bottom within one
   column before returning to the top of the next — breaking that order.
   A grid reads left-to-right, row by row, so newest-to-oldest holds.
   ========================================================================== */

.studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--sp-9);
}
@media (min-width: 641px) {
  .studio-grid { grid-template-columns: repeat(2, 1fr); }
  /* the safari homepage screen is a full long page, much taller than a
     single grid row — span two rows so the column beside it holds two
     shorter images instead of one, leaving a wall of empty space below it */
  .studio-grid__item--tall { grid-row: span 2; }
}

.studio-grid__item { margin: 0; }

.studio-grid__link,
.studio-grid__static {
  display: block;
  color: inherit;
  text-decoration: none;
}
.studio-grid__link { cursor: pointer; }
.studio-grid__static { cursor: default; }

/* The visual carries the weight: no panel, no colour field, no border, no
   caption — just the image, rounded, with one very soft shadow lifting it
   off the page. Intrinsic width/height on the <img> reserve its aspect
   ratio so the grid never shifts as images load, and nothing is ever
   cropped: width:100%/height:auto always renders the full visual. */
.studio-grid__media {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 14px 32px -24px rgba(0, 0, 0, 0.22);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.studio-grid__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Only the three linked projects lift on hover/focus — a restrained nudge,
   not a card-hover cliché. Static items never respond to the pointer. */
@media (hover: hover) and (pointer: fine) {
  .studio-grid__link:hover .studio-grid__media,
  .studio-grid__link:focus-visible .studio-grid__media {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.28);
  }
}
.studio-grid__link:focus-visible {
  outline: 3px solid var(--c-mint);
  outline-offset: 4px;
  border-radius: var(--r-xl);
}

@media (prefers-reduced-motion: reduce) {
  .studio-grid__media { transition: none; }
  .studio-grid__link:hover .studio-grid__media,
  .studio-grid__link:focus-visible .studio-grid__media {
    transform: none;
  }
}