/* Approved presentation: 15% larger covers, Soft 12 corners, white frames. */
:root { --cover-radius: 12px; --cover-scale: 1.2075; }
/* Let a larger cover use the spare gutter while keeping adjacent lane masks separate. */
.col { overflow: visible; clip-path: inset(0 -1.1vw); }
@media (min-width: 821px), (orientation: landscape) {
  .cols { clip-path: inset(10.53vh 1.9vw 7.68vh); }
  .maskwrap { overflow: visible; }
  .col::before, .col::after { left: -1.1vw; right: -1.1vw; }
}
.tile .ph {
  border-color: #fff;
  background-color: #fff;
  /* Preserve the original portrait size, then fit the enlarged frame inside its lane. */
  height: min(62vh, 33.2vw, calc((31.933333vw + 8px) / var(--cover-scale) * 1.2985074627), calc((81.79vh - var(--caption-clearance, 18px)) / var(--cover-scale)));
  width: auto;
  max-width: none;
  transform: scale(var(--cover-scale));
}
.tile .ph.vid.wide {
  height: auto;
  width: min(92%, 93vh, calc((100% + 2.2vw + 8px) / var(--cover-scale)));
  max-width: none;
}
.tile .ph.vid.wide.gallery-wide {
  width: calc(min(92%, 93vh, (100% + 2.2vw + 8px) / var(--cover-scale)) - 22px);
  max-width: none;
}
@media (hover:hover) and (pointer:fine) {
  .tile:hover .ph { transform: translateY(-6px) scale(var(--cover-scale)); }
}
html.measure-gallery .tile .ph { transform: scale(var(--cover-scale)) !important; }
.tile .ph {
  clip-path: inset(5.285714px round var(--cover-radius));
  border-radius: calc(var(--cover-radius) + 5.285714px);
}
.tile .ph > div {
  border-radius: max(0px, calc(var(--cover-radius) - 5.714286px));
}
.panel { border-radius: var(--cover-radius); }
@media (max-width: 820px) and (orientation: portrait) {
  .col { overflow: hidden; clip-path: none; }
  /* Use the measured row, not iOS's larger 100vh behind the browser bars.
     The shared geometry pass measures the resulting visible frame as usual. */
  .tile {
    --phone-band: var(--gallery-band-height, calc(50svh - 61px));
    --phone-wide-width: min(64vw, calc((100vw - 20px) / var(--cover-scale)), calc(((var(--phone-band) - 20px) / var(--cover-scale) - 14px) * 1.7777778 + 14px));
  }
  .tile .ph {
    height: auto;
    width: min(100%, calc((var(--phone-band) - 20px) / var(--cover-scale) * .7701149425));
    clip-path: inset(3.190476px round var(--cover-radius));
    border-radius: calc(var(--cover-radius) + 3.190476px);
  }
  .tile .ph.vid.wide {
    width: var(--phone-wide-width);
    min-width: 0;
  }
  .tile .ph.vid.wide.gallery-wide {
    width: calc(var(--phone-wide-width) - 14px);
    min-width: 0;
  }
  .tile .ph > div {
    border-radius: max(0px, calc(var(--cover-radius) - 3.809524px));
  }
}