/* Archive / Collection template — Work page. Rebuilt 2026-09-04 to follow
   mockup 03 exactly: shared hero pattern (breadcrumb / headline / desc /
   tag-stack, no facet graphic in the hero itself) + a sticky filter bar +
   a 3-column grid of square static facet images. Loaded alongside the
   shared bm-template.css, which this file does not duplicate. */

.bmit-hero-visual.is-tags-only{ justify-content:flex-end; }

/* ---------- Filter bar ---------- */
.bmit-archive-filters{
  display:flex; align-items:center; flex-wrap:wrap; gap:24px;
  padding:18px 0; margin-bottom:44px;
  border-top:1px solid rgba(26,26,26,0.18); border-bottom:1px solid rgba(26,26,26,0.18);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; font-weight:700;
}
.bmit-archive-filters a{ color:var(--carbon); opacity:0.5; padding-bottom:3px; border-bottom:2px solid transparent; transition:opacity .15s, border-color .15s, color .15s; }
.bmit-archive-filters a:hover{ opacity:1; }
.bmit-archive-filters a.active{ opacity:1; color:var(--red); border-bottom-color:var(--red); }
.bmit-archive-filters .bmit-archive-count{ margin-left:auto; opacity:0.55; }

/* ---------- 3-column work grid ---------- */
.bmit-archive-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px);
  padding-bottom:96px;
}
.bmit-archive-item{ display:block; color:var(--carbon); }
.bmit-archive-item .bmit-facet{ aspect-ratio:1/1; margin-bottom:16px; transition:opacity .2s ease; }
.bmit-archive-item:hover .bmit-facet{ opacity:0.82; }
.bmit-archive-item-index{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--red); font-weight:700; margin-bottom:8px; display:block; }
.bmit-archive-item-desc{ font-family:var(--font-head); font-size:15px; line-height:1.45; max-width:34ch; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.bmit-archive-item-arrow{ font-family:var(--font-mono); font-size:14px; flex:0 0 auto; transition:transform .15s ease, color .15s ease; }
.bmit-archive-item:hover .bmit-archive-item-arrow{ transform:translateX(4px); color:var(--red); }

@media (max-width:900px){
  .bmit-archive-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .bmit-archive-grid{ grid-template-columns:1fr; }
  .bmit-archive-filters .bmit-archive-count{ margin-left:0; flex-basis:100%; }
}