/* Work page: a varied mosaic like the Residential page gallery (Tim, 2026-10-21). Three columns on every filter;
   large (2×2), tall (1×2) and regular tiles, no wide ones. work-layout.js places the cards in full-width blocks so
   each batch ends on a clean line. Tiles crop to fill; captions appear on hover. */
.work-index .work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(205px, calc(20vw + 15px), 345px); gap: 18px; align-items: stretch; }
.work-index .work-grid .project-card { position: relative; padding: 0 !important; min-width: 0; display: block; overflow: hidden; }
.work-index .work-grid .project-card[hidden] { display: none; }
.work-index .work-grid .project-card .picture { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
.work-index .work-grid .project-card .picture img { width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: auto !important; object-fit: cover; }
.work-index .work-grid .project-card .picture::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgb(15 21 17 / .82)); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1; }
.work-index .work-grid .project-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: var(--paper); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 0; border: 0; }
.work-index .work-grid .project-caption h3 { font-size: clamp(17px, 1.5vw, 24px); font-weight: 400; letter-spacing: -.02em; color: var(--paper); }
.work-index .work-grid .project-caption p { font-size: 12px; color: rgb(241 240 233 / .85); margin-top: 5px; }
.work-index .work-grid .project-caption .project-who { color: rgb(241 240 233 / .95); margin-top: 3px; }
.work-index .work-grid .project-caption .project-date { color: rgb(241 240 233 / .75); font-size: 12px; }
.work-index .work-grid .project-card:is(:hover, :focus-visible) .picture::after { opacity: 1; }
.work-index .work-grid .project-card:is(:hover, :focus-visible) .project-caption { opacity: 1; transform: none; }
.work-index .work-grid .gallery-open { z-index: 3; }
@media (max-width: 900px) {
  .work-index .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; gap: 10px; }
  .work-index .work-grid .project-caption { opacity: 1; transform: none; left: 12px; right: 12px; bottom: 10px; }
  .work-index .work-grid .project-card .picture::after { opacity: 1; }
  .work-index .work-grid .project-caption .project-who { display: none; }
}

/* Live gallery (gallery.js): hold the grid while a filter's set loads from the platform. */
[data-gallery-grid].is-loading-feed { opacity: 0; }
[data-gallery-grid] { transition: opacity .25s ease; }

/* Every project, A to Z (patch-pages.py): a quiet multi-column list under the gallery. */
.work-az .section-heading p { max-width: 36ch; color: var(--muted, #6b6f68); margin: 0; }
.work-az-list { list-style: none; margin: 32px 0 0; padding: 0; columns: 4 220px; column-gap: 32px; }
.work-az-list li { break-inside: avoid; display: flex; flex-direction: column; padding: 9px 0; border-top: 1px solid rgba(37, 45, 39, .12); }
.work-az-list a { color: inherit; text-decoration: none; font-size: 15px; line-height: 1.3; }
.work-az-list a:hover, .work-az-list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.work-az-list span { font-size: 12px; color: var(--muted, #6b6f68); margin-top: 2px; }
/* folded A to Z list (2026-10-25) */
.work-az-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-az-fold > summary::-webkit-details-marker { display: none; }
.work-az-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.work-az-sum h2 { font-size: clamp(26px, 2.6vw, 40px); margin: 0; }
.work-az-sum > span { font-size: 14px; color: var(--muted); }
.work-az-toggle { flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: transform .3s ease; }
.work-az-toggle::before, .work-az-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: var(--ink); transform: translate(-50%, -50%); }
.work-az-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.work-az-fold[open] .work-az-toggle { transform: rotate(45deg); }
.work-az-fold > summary:hover .work-az-toggle { background: var(--ink); }
.work-az-fold > summary:hover .work-az-toggle::before, .work-az-fold > summary:hover .work-az-toggle::after { background: var(--paper); }