/* =============================================================================
   ODUEX — /work/ page stylesheet. Layout only.
   The components on this page (cards, tags, grids, image frames, buttons) are
   all core.css; nothing here restyles them. This file arranges the proof page
   and gates the filter UI on JavaScript actually being there, because a
   filter that cannot filter is worse than no filter.
   ============================================================================= */

/* Tag legend under the hero. Semantic list, visual key. */
.page-work .work-key{
  margin: var(--space-10) 0 0;
  max-width: var(--measure);
}
.page-work .work-key li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.page-work .work-key li + li{ margin-top: var(--space-5); }
.page-work .work-key p{
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  max-width: var(--measure-narrow);
}

/* The filter. Markup ships with every card visible, so the page is never
   proof-empty; the state lives in work.js alone. Gated on .js-ready, the flag
   core.js sets about itself — not the .js flag from boot.js — so if core.js
   ever fails to load, dead buttons never paint. */
.page-work .work-filter{ display: none; }
.js-ready .page-work .work-filter{
  display: flex;
  margin-top: var(--space-10);
}
.page-work .work-filter .btn-ghost[aria-pressed="true"]{
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--control-line);
}

/* Featured build: copy and screenshot side by side, used for the one client
   project and for the custom CRM that leads the systems band. .grid-2 collapses
   itself below 760px; centring keeps the frame level with the copy beside it. */
.page-work .work-featured{ align-items: center; }

/* Where a featured block leads a band, the grid of pattern cards below it needs
   more air than the grid's own gap, or the two read as one run-on block. */
.page-work .work-featured + .grid-2{ margin-top: var(--space-12); }

/* The H1 steps down on a narrow phone, because a masked line that wraps reveals
   as one block. --fs-hero bottoms out at its 2.90rem floor while the column
   keeps shrinking, so the longest line overruns below 380px. Same step, and
   the same reason, as the homepage and teardown heroes. */
@media (max-width: 400px){
  .page-work h1.display-hero{ font-size: var(--fs-4xl); }
}