/* Earlier: the archive of work from 2017–2021. A sibling of the detail page:
   it loads after ../piece.css (which imports css/tokens.css) and keeps the
   same rail, controls, 12-column grid and guides. Only the main area changes:
   it runs from column 4 through column 12 (nine columns) and holds an image
   grid instead of prose. The intro keeps the detail page's five columns.

   Variant A (index.html): .archive, every tile three columns, one frame shape.
   Variant B (variant-b.html): .archive--editorial, rows of 3, 6 or 9 columns.

   Swapping in real work: replace a placeholder with
     <img class="shot" src="media/…" alt="…" width="…" height="…" loading="lazy">
   The frame centres it and fits it whole, whatever its aspect ratio. */

main { grid-column: 4 / 13; }
main > .intro { grid-column: 1 / 6; } /* keeps its five columns; piece.css sets 4 for prose */
.intro .lede { margin-top: var(--space-2); color: var(--color-text-secondary); }

/* Image outlines (better-ui): pure black or white at 10%, never a tinted
   neutral, so no fringe shows on the image edge. tokens.css has no role for
   this yet; scoped here until it gets one (flagged, not invented). */
.archive { --image-outline: var(--color-border-image); }

/* The grid: a subgrid of the page's columns, so tiles land on the same
   columns the overlay draws. Rows sit 48px apart; a caption sits 8px under
   its image, so each caption reads with its own picture. */
.archive {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.tile-item { grid-column: span 3; display: flex; min-width: 0; }
.tile { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; margin: 0; }

/* The stage: the detail page's placeholder surface (a 3% ink tint and a
   hairline). Images sit on it flat, without device bezels; that is the
   archive's difference from the detail page. One frame shape for every tile
   in A, so phone screens and wide shots share a rhythm. */
.stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: color-mix(in oklch, var(--color-text-primary) 3%, var(--color-bg-page));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-media);
  overflow: hidden;
}
/* The frame is the stage minus its padding. The image is contained, so the
   inset around it is uneven and the two radii are separate surfaces
   (better-ui: concentric radii apply only to an even inset). */
.frame {
  position: absolute;
  inset: var(--space-4);
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot { display: block; border-radius: var(--radius-image); }
.frame .composition-link { height: 100%; display: flex; align-items: center; justify-content: center; }
.frame .composition-link img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
img.shot { max-width: 100%; max-height: 100%; width: auto; height: auto; outline: 1px solid var(--image-outline); outline-offset: -1px; }

/* Placeholders hold the real aspect ratio (--ar) and fit the frame the same
   way an image would. Label in secondary, which keeps AA on the tint. */
.shot.placeholder {
  --ar: 16 / 10;
  aspect-ratio: var(--ar);
  width: min(100cqw, 100cqh * var(--ar));
  display: grid;
  place-items: center;
  padding: var(--space-1);
  background: color-mix(in oklch, var(--color-text-primary) 7%, var(--color-bg-page));
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  text-align: center;
}
.shot.phone { --ar: 9 / 19.5; }
.shot.wide { --ar: 16 / 10; }

/* Captions: project in ink, company and year in the quiet step, both meta.
   Overrides the detail page's centred figure caption. */
.tile figcaption {
  margin: var(--space-1) 0 0;
  max-width: none;
  text-align: start;
  text-wrap: pretty;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}
.tile .name { display: block; color: var(--color-text-primary); }
.tile .meta { display: block; color: var(--color-text-tertiary); }

/* B: editorial rows. Each row is a subgrid whose tiles add up to nine
   columns. Tiles in a row stretch to the tallest, so a phone beside a wide
   shot takes the wide shot's height. */
.archive--editorial .row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.archive--editorial .stage { flex: 1 0 auto; }
.archive--editorial .span-3 { grid-column: span 3; }
.archive--editorial .span-6 { grid-column: span 6; }
.archive--editorial .span-9 { grid-column: span 9; }
.archive--editorial .span-3 .stage { aspect-ratio: 3 / 4; }
.archive--editorial .span-6 .stage { aspect-ratio: 3 / 2; }
.archive--editorial .span-9 .stage { aspect-ratio: 2 / 1; }
.archive--editorial .span-6 .frame,
.archive--editorial .span-9 .frame { inset: var(--space-6); }

@media (max-width: 1100px) {
  .frame { inset: var(--space-3); }
  .archive--editorial .span-6 .frame,
  .archive--editorial .span-9 .frame { inset: var(--space-4); }
}

/* Phones: four columns. A tiles take two each. B's wide tiles take the full
   width; a phone tile that ends up alone on its line is centred, the way the
   detail page centres an odd phone screen. */
@media (max-width: 760px) {
  main { grid-column: 1 / -1; }
  .archive { margin-top: var(--space-6); row-gap: var(--space-4); }
  .tile-item { grid-column: span 2; }
  .frame { inset: var(--space-2); }
  .archive--editorial { row-gap: var(--space-6); }
  .archive--editorial .row { row-gap: var(--space-4); }
  .archive--editorial .span-3 { grid-column: span 2; }
  .archive--editorial .span-6,
  .archive--editorial .span-9 { grid-column: 1 / -1; }
  .archive--editorial .span-6 .stage,
  .archive--editorial .span-9 .stage { aspect-ratio: 4 / 3; }
  .archive--editorial .span-6 .frame,
  .archive--editorial .span-9 .frame { inset: var(--space-3); }
  .archive--editorial .row > .span-3:nth-child(3),
  .archive--editorial .row:has(> .span-6) > .span-3 { grid-column: 2 / 4; }
}

.mobile-layouts { display: none; }
@media (max-width: 760px) { .mobile-layouts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); font-size: var(--text-meta); line-height: var(--leading-meta); } }