/* mosaic: the first screen as a living wall of pictures, the way sequoiacap.com/arc opens (Tommi, 2026-10-03: "come
   first load... le immagini più iconiche che ci sono"). Square tiles on the night, the claim big in an empty stretch of
   the grid and the line under it small; the tiles come in one by one in a scattered order, then one at a time a tile
   crossfades to a picture not on screen (mosaic.js). Only opacity moves (landing-kit rule 3). Every tile has its size
   before its picture arrives, so nothing shifts.
   The grid: 3 columns by 5 rows on a phone, 4 by 4 on a tablet, 6 by 3 from 900px. A tile is as big as the width
   allows and as the height allows (the first screen keeps room for the film peeking from the bottom, hero.css's
   --peek). Needs ../base/base.css; inside the hero it sits in .in-screen. */
.mosaic-box{container-type:inline-size;width:100%}
.mosaic{
  --cols:3;--rows:5;--gap:8px;--pad:calc(var(--barra-h) + 24px + clamp(28px,4vh,48px));
  --tile:min(calc((100cqw - 2 * var(--gutter) - (var(--cols) - 1) * var(--gap)) / var(--cols)),
             calc((100svh - var(--peek,0px) - var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows)));
  display:grid;grid-template-columns:repeat(var(--cols),var(--tile));grid-auto-rows:var(--tile);gap:var(--gap);
  grid-auto-flow:row dense;justify-content:center
}
/* the claim sits on the bottom of its stretch, as "Arc" does; the line under it on the top of the next */
.mosaic .mz-claim{grid-column:1/-1;grid-row:2;align-self:end;margin:0;max-width:none;text-align:left;text-wrap:wrap;
  font-size:calc(var(--tile) * .44);line-height:.98;letter-spacing:-.045em;transform-origin:0 100%}
.mosaic .mz-sub{grid-column:1/-1;grid-row:3;align-self:start;margin:0;padding-top:calc(var(--gap) + 2px);max-width:34em;
  font-size:calc(14.5 * var(--px));line-height:1.45;color:var(--ink-2);text-align:left;text-wrap:pretty}
/* a tile: the frame is there from the start, its pictures stacked in it; the one with .on is seen */
.mz-tile{position:relative;overflow:hidden;border-radius:calc(4 * var(--px));contain:strict}
.mz-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--e-ui)}
.mz-tile img.on{opacity:1}
.mz-tile img.swap{transition-duration:1.1s}
/* a tablet: 4 by 4, the claim and its line beside a column of tiles */
@media (min-width:600px){
  .mosaic{--cols:4;--rows:4;--gap:12px}
  .mosaic .mz-claim{grid-column:2/span 3}
  .mosaic .mz-sub{grid-column:2/span 3;font-size:calc(15.5 * var(--px))}
  .mz-tile:nth-of-type(n+11){display:none}
}
@media (max-width:599px){.mz-tile:nth-of-type(n+10){display:none}}
/* from 900px: 6 by 3, the claim over three cells of the first row, its line under it over two */
@media (min-width:900px){
  .mosaic{--cols:6;--rows:3;--gap:calc(16 * var(--px))}
  .mosaic .mz-claim{grid-column:3/span 3;grid-row:1}
  .mosaic .mz-sub{grid-column:3/span 2;grid-row:2;font-size:calc(16 * var(--px))}
  .mz-tile:nth-of-type(n+11){display:block}
}
@media (prefers-reduced-motion:reduce){.mz-tile img{transition:none}}