/* index.css v2 — logo wall (placeholder cells), index head (pill filters with 1-bit icons + discipline dots, view control),
   grid with registration dots at the intersections, tiles with a small name bottom-left */

/* ---- logo wall: 1px-gap grid, cells swap one at a time ---- */
.logowall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.logowall .cell { position: relative; background: var(--ground); aspect-ratio: 2.4 / 1; display: grid; place-items: center; overflow: hidden; padding: 12%; }
.logowall .cell .lg { display: grid; place-items: center; width: 100%; height: 100%; will-change: filter, opacity; }
.logowall .cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .86; }
.logowall .cell img.dark { filter: grayscale(1) invert(1) contrast(1.05); }
.logowall .cell .wm-text { font-family: var(--font-sans); font-weight: 500; font-size: clamp(10px, .95vw, 13px); letter-spacing: var(--track-caps); color: var(--ink); text-transform: uppercase; }
.logowall .cell .nm { position: absolute; left: 8px; bottom: 6px; font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); opacity: 0; transform: translateY(2px); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .logowall .cell:hover .nm { opacity: 1; transform: none; } }
.logowall-note { margin-top: 12px; }
@media (max-width: 720px) { .logowall { grid-template-columns: repeat(3, 1fr); } .logowall .cell:nth-child(n+7) { display: none; } }

/* ---- index head ---- */
.index { padding: 0 var(--margin); }
.index-head { display: grid; grid-template-columns: minmax(150px, 21%) 1fr; column-gap: var(--gutter); align-items: start; padding-bottom: 8px; }
.index-count { color: var(--ink-2); margin-left: .2em; }
.index-controls { display: grid; grid-template-columns: 1fr auto; column-gap: var(--gutter); align-items: start; }
@media (max-width: 720px) { .index-head, .index-controls { grid-template-columns: 1fr; row-gap: 14px; } }

/* ---- filters: three labelled rows of pills ---- */
.filters { display: grid; row-gap: 8px; }
.frow { display: grid; grid-template-columns: 82px 1fr; column-gap: 12px; align-items: center; }
.frow-l { font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.frow-c { display: flex; flex-wrap: wrap; gap: 6px 6px; }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--ground); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1; white-space: nowrap;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), transform 90ms var(--ease-out);
}
.pill .icon { width: 12px; height: 12px; opacity: .85; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 0 1px var(--ground); flex: 0 0 auto; }
.pill .n { font-size: var(--fs-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 2px; }
@media (hover:hover) and (pointer:fine) { .pill:hover { border-color: var(--ink); background: var(--ground-2); } }
.pill:active { transform: scale(.97); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pill[aria-pressed="true"] .n { color: var(--ground); opacity: .7; }
.pill[aria-pressed="true"] .icon { opacity: 1; }
.pill[aria-pressed="true"] .dot { box-shadow: 0 0 0 1px var(--ink); }
@media (max-width: 720px) {
  .frow { grid-template-columns: 1fr; row-gap: 6px; }
  .frow-c { flex-wrap: wrap; }
}

/* ---- view control ---- */
.viewctl { display: flex; align-items: center; gap: 6px; }
.viewctl-l { margin-right: 6px; }
.viewctl .btn { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) { .viewctl { display: none; } .tile-meta .no { display: none; } }

/* ---- grid: registration dots at the intersections ---- */
html.no-dots .tile::before, html.no-dots .tile::after { display: none !important; }
.grid { --rowgap: clamp(24px, 3.4vw, 48px); position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--rowgap) var(--gutter); padding-top: clamp(24px, 3.5vh, 44px); }
.tile { position: relative; display: block; outline-offset: 6px; }
.tile.is-out { display: none; }
/* registration dots: every tile marks the intersection at its top-left and top-right (neighbours share a point) */
.tile::before, .tile::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--ink); top: calc(var(--rowgap) / -2 - 2px); pointer-events: none; }
.tile::before { left: calc(var(--gutter) / -2 - 2px); }
.tile::after { right: calc(var(--gutter) / -2 - 2px); }
/* layout randomness (js/grid.js): blank cells keep the rhythm, 2x2 tiles span two columns and two rows */
.tile.is-blank { pointer-events: none; aspect-ratio: var(--tile-ar, 40 / 27); }
.tile.is-2x { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.tile.is-2x .tile-img { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.tile.is-2x .tile-meta { flex: 0 0 auto; }
@media (max-width: 720px) { .tile.is-2x { grid-column: span 2; grid-row: auto; display: block; } .tile.is-2x .tile-img { aspect-ratio: var(--tile-ar, 40 / 27); } } /* on two columns a double is a full-width row, not a tall block */
/* the plates are transparent compositions (work-images): --tile-bg is the ground they sit on (panel: Layout, Tile ground) */
.tile-img { position: relative; overflow: hidden; background-color: var(--tile-bg, color-mix(in srgb, var(--ink) 8%, var(--ground))); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; border: 1px solid var(--tile-rule, color-mix(in srgb, var(--ink) 7%, transparent)); aspect-ratio: var(--tile-ar, 40 / 27); }
.grid[data-cols="6"] .tile-img { aspect-ratio: 1 / 1; }
.tile-img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: 0; transition: opacity 300ms var(--ease-out-soft), filter 200ms var(--ease-out); }
.tile-img img.is-loaded { opacity: 1; }
.tile-img.is-alpha img { image-rendering: auto; }
.tile-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 7px; font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.2; color: var(--ink); }
.tile-meta .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-meta .no { flex: 0 0 auto; font-size: var(--fs-micro); letter-spacing: var(--track-caps); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.grid[data-cols="6"] .tile-meta { font-size: var(--fs-micro); }
@media (hover:hover) and (pointer:fine) {
  .grid:has(.tile:hover) .tile:not(:hover) .tile-img img { opacity: .5; }
  .grid:has(.tile:hover) .tile:not(:hover) .tile-meta .t { color: var(--ink-3); }
  .tile:hover .tile-img { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
}
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-img, .tile.is-focused .tile-img { outline: 1px solid var(--red); outline-offset: 5px; }
.grid-empty { padding: 32px 0; display: flex; align-items: center; gap: 16px; }

/* cloth: particle-mode overrides */
/* while cloth.js draws an image as dust (plane taken, not yet whole) its frame shows nothing but the grains:
   no hairline, no tone — both return on hand-back when the DOM image is whole again (class set by js/cloth.js) */
/* the frame leaves instantly when the grains take over and fades back in after they have settled (the ground and the
   hairline are not part of the particle pass, so they arrive as a soft after-image rather than a pop) */
/* the ground fades back over half a second once the grains have settled, the hairline stays quick so hover feedback
   does not lag (it is a 7% rule, at that weight the return reads as nothing at all) */
.tile-img, .plate-img { transition: background-color 560ms var(--ease-out-soft) 90ms, border-color 140ms var(--ease-out); }
.tile-img.is-dust, .plate-img.is-dust { border-color: transparent; background-color: transparent; background-image: none; transition: none; }
@media (hover: hover) { .tile:hover .tile-img.is-dust { border-color: transparent; } }