/* ==========================================================================
   Work — page layer shared by /work (work.php) and every project page (work/_entry.php).
   Section styles: assets/css/work/<id>.css (hub: hero featured index caps nda · project: cover glance arc story notes
   devices compare kit outcomes credits next related, with work/project.css for the lightbox and device frames).
   core.css tokens only; no colour literals, no gradients except mask fades, no !important. Blue never in a heading.
   Work pictures are shown as delivered — no colour grade (unlike .bdh-img) — because they are the owner's work.
   ========================================================================== */

.wrk{--wrk-r:var(--r-lg);--wrk-gap:clamp(12px,1.6vw,24px)}
.wrk :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* [hidden] always wins. Controls that only work with JavaScript (the strip's Pause, the film button, Copy, the type
   tester, the slider…) ship hidden and their script reveals them; a component's own display rule must never bring them
   back without JS or under reduced motion. The lightbox dialog lives outside <main>, so it gets the same guard. */
.wrk [hidden],.wrk-view-lb [hidden]{display:none}
.wrk .h2:not(.s22__h){max-width:22ch}

/* a picture: fills its box, no grade, a quiet placeholder tone while it loads */
.wrk-ph{position:relative;display:block;overflow:hidden;border-radius:var(--wrk-r);background:var(--paper-4);isolation:isolate}
.wrk-ph img,.wrk-ph picture{display:block;width:100%;height:100%}
.wrk-ph img{object-fit:cover}
.band--ink .wrk-ph{background:var(--ink-2)}

/* mono chips: a fact, a state, a label sitting on a picture */
.wrk-chip{display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:4px 10px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--txt);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.wrk-chip--line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--muted)}
.wrk-chip--blue{background:var(--blue-wash);color:var(--blue-d)}
.wrk-chip--on-ph{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
.band--ink .wrk-chip{background:var(--on-ink-card);color:var(--on-ink-2);box-shadow:inset 0 0 0 1px var(--on-ink-line)}
.band--ink .wrk-chip--on-ph{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
@media (max-width:600px){.wrk-chip{white-space:normal}}

/* redaction bar: width in characters (--w); decorative — its meaning is always written beside it */
.wrk-red{display:inline-block;vertical-align:-.12em;width:calc(var(--w,8) * .62em);max-width:100%;height:.95em;border-radius:3px;background:var(--ink)}
.band--ink .wrk-red{background:var(--on-ink-2)}

/* the index number in mono */
.wrk-no{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;color:var(--blue);font-variant-numeric:tabular-nums}
.band--ink .wrk-no{color:var(--on-ink-3)}

/* phones: every small button reaches 44px */
@media (max-width:680px){
  .wrk .btn--sm{height:44px}
  .wrk a.wrk-chip{min-height:44px;padding-inline:14px}      /* a chip that is a link (the cover's "Illustrative imagery") */
  .wrk-feat__did a{min-height:44px;align-items:center}       /* the featured spread's discipline links */
}

/* reduced motion: nothing in the work pages moves on its own */
@media (prefers-reduced-motion:reduce){
  .wrk *,.wrk *::before,.wrk *::after{transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1}
}