/* The gallery (gallery.html, gallery.js): the title and its count, three filters, then every scene as a tile.
   With no size chosen, each tile keeps its scene's own shape, in rows of one height that fill the page. A chosen size
   cuts every tile to it, so many to a row that they sit on the page's 12 columns. */
/* The page's parts keep to its width; the filters' ground runs to the window's edges, like the navigation's. */
.gallery { padding-top: 40px; }
.gallery > * { margin-inline: var(--gutter); }
.gallery-title { font-size: clamp(64px, 8.5vw, 128px); font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; }
.gallery-count {
  position: relative; top: 0.32em; margin-left: 0.06em; vertical-align: top;
  font-size: 0.2em; font-weight: 400; letter-spacing: 0; color: var(--mute);
}

/* The filters: one track of options each, in a row under the title. On a wide screen they stay under the navigation;
   the edge marks where they start, so gallery.js can tell when they're riding over the tiles. */
.filters-edge { display: block; }
.gallery > .filters { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 36px 0 0; padding: 10px var(--gutter); }
.group { min-width: 0; margin: 0; padding: 0; border: 0; }
.seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--panel); }
.seg label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; min-width: 44px; padding: 0 13px; border-radius: 999px;
  color: var(--mute); font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease, box-shadow var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}
.seg label:active { transform: scale(0.96); }
.seg label::before { content: ""; position: absolute; inset: -2px 0; }  /* the track's full 44 px to a finger */
.seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg label:has(:checked) {
  background: var(--bg); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 2px rgba(23, 23, 23, 0.08), 0 2px 8px -2px rgba(23, 23, 23, 0.08);
}
.seg label:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg label.soon:not(:has(:checked)) { color: var(--faint); }
@media (hover: hover) and (pointer: fine) { .seg label:not(:has(:checked)):hover { color: var(--ink); } }
/* A size's shape, drawn at its ratio, the long side this long */
.glyph {
  flex: none; width: calc(var(--s, 15px) * min(1, var(--w) / var(--h))); aspect-ratio: var(--w) / var(--h);
  border: 1.5px solid currentColor; border-radius: 2.5px;
}
@media (min-width: 1240px) {
  .filters {
    position: sticky; top: 64px; z-index: 9;
    background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    transition: box-shadow 0.2s ease;
  }
  .filters.stuck { box-shadow: 0 1px 0 var(--line); }
}

/* The tiles */
.tiles { --wide: 3; --row-gap: 32px; margin-top: 22px; margin-bottom: 0; padding: 0; list-style: none; }
/* No size: rows of one height, each tile as wide as its shape needs (gallery.js sets the widths). */
.tiles[data-size=""] { display: flex; flex-wrap: wrap; gap: var(--row-gap) var(--gap); }
.tiles[data-size=""] > li { flex: none; min-width: 0; }
.tiles[data-size=""] .tile-media { aspect-ratio: var(--ar); }
.tiles:not([data-size=""]) { display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: var(--row-gap) var(--gap); }
.tiles:not([data-size=""]) .tile-media { aspect-ratio: var(--shape); }
.tiles[data-size="16:9"] { --per: 3; }
.tiles[data-size="1:1"], .tiles[data-size="4:5"], .tiles[data-size="3:4"] { --per: 4; }
.tiles[data-size="9:16"] { --per: 6; }

.tile { display: block; scroll-margin-top: 150px; }
.tile-media {
  position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 14px; background: var(--panel);
  transition: transform var(--t-press) var(--ease-out);
}
.tile-media::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.06); }
.tile-media img, .tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-media video { opacity: 0; transition: opacity 0.2s ease; }
.tile-media.playing video { opacity: 1; }
.tile-name { display: block; margin-top: 10px; font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile:active .tile-media { transform: scale(0.985); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-media { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

/* Nothing fits: the reason, large, and the way back */
.none {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 28px;
  min-height: clamp(320px, 48vh, 480px); margin-top: 22px; padding: 40px; border-radius: 22px; background: var(--panel);
}
.none p { max-width: 16ch; font-size: clamp(34px, 4.4vw, 60px); font-weight: 300; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }

@media (max-width: 1100px) {
  .tiles { --wide: 2; }
  .tiles[data-size="16:9"] { --per: 2; }
  .tiles[data-size="1:1"], .tiles[data-size="4:5"], .tiles[data-size="3:4"] { --per: 3; }
  .tiles[data-size="9:16"] { --per: 4; }
}
/* A phone: each filter a row of its own that scrolls sideways to the screen's edges; one wide tile to a row. */
@media (max-width: 640px) {
  .gallery { padding-top: 24px; }
  .gallery > * { margin-inline: 16px; }
  .gallery > .filters { flex-direction: column; gap: 4px; margin: 24px 0 0; padding: 0; }
  .group { width: 100%; overflow-x: auto; padding: 3px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .group::-webkit-scrollbar { display: none; }
  .tiles { --wide: 1; --gap: 12px; --row-gap: 24px; margin-top: 16px; }
  .tiles[data-size="16:9"] { --per: 1; }
  .tiles[data-size="1:1"], .tiles[data-size="4:5"], .tiles[data-size="3:4"], .tiles[data-size="9:16"] { --per: 2; }
  .tile-media { border-radius: 12px; }
  .tile-name { margin-top: 8px; }
  .none { min-height: 320px; margin-top: 16px; padding: 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .seg label, .tile-media, .tile-media video, .filters { transition: none; }
}