/* A dense image wall with a dedicated, quiet title pocket. */
@media (min-width: 861px) {
  .stage {
    height: 100svh;
    min-height: 420px;
    padding: 76px 14px 14px;
  }
  .field {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    isolation: isolate;
  }
  .field .tile {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    aspect-ratio: 1.55;
    border-radius: 2px;
    background: #171410;
    transition: opacity 180ms ease;
  }
  .field.layout-ready .tile {
    position: absolute;
    aspect-ratio: auto;
  }
  .field .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .field.hot .tile { opacity: .025; }
  .field.hot .tile:focus-visible { opacity: .025; }
  .field .tile:focus-visible { outline-offset: -4px; }
  .field .burst { z-index: 3; }
  .field .burst img {
    right: auto;
    bottom: auto;
    aspect-ratio: auto;
    object-fit: cover;
    box-shadow: none;
    transform: scale(.99);
    transition: opacity 180ms ease, transform 240ms ease;
    transition-delay: 0s;
  }
  .field .burst img[data-fit="contain"] { object-fit: contain; }
  .field .burst.on img { opacity: 1; transform: none; }
  .field .burst img[hidden] { display: none; }
  .field .burst[data-loading] img { opacity: 0; transition: none; }
  .field .mid {
    width: var(--wall-title-width, 27%);
    padding: 8px 12px;
    z-index: 6;
  }
  .field:not(.layout-ready) .mid { display: none; }
  .field .mid .line { font-size: clamp(20px, 2vw, 32px); }
  .field .mid .pname {
    font-size: clamp(22px, 2.1vw, 36px);
    line-height: 1;
    text-shadow: none;
    padding: 0 10px;
    overflow-wrap: break-word;
  }
  .field .mid .pcat {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.5;
  }
  .field.hot .mid .pcat { opacity: 1; }
  .field .mid .cur { display: none; }
  .field:has(.tile:focus-visible) .mid { outline: 1px solid var(--beam); outline-offset: 6px; }
}

@media (min-width: 861px) and (max-height: 540px) {
  .stage { padding-top: 66px; min-height: 360px; }
  .field .mid .pname { font-size: 22px; }
  .field .mid .pcat { margin-top: 6px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .field .tile, .field .burst img, .field .mid .line,
  .field .mid .pname, .field .mid .pcat { transition: none; }
  .field .burst img { transform: none; }
}