/* Project pages (work/_entry.php) — shared pieces: the kicker label, tag and list idioms, chips on pictures, picture
   credits, pictures that open full screen, and the full-screen viewer itself (built by assets/js/work/lightbox.js).
   Section styles: assets/css/work/<id>.css. core.css tokens only. */

.wrk--case .h2:not(.s22__h){max-width:24ch}
.wrk-kicker{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.band--ink .wrk-kicker{color:var(--on-ink-3)}

/* chips that sit on a picture (glass: a paper chip with a hairline) */
.wrk-chip--glass{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
a.wrk-chip{text-decoration:none}
a.wrk-chip:hover{box-shadow:var(--sh-1),inset 0 0 0 1px var(--ink)}

/* tags: services as links into the catalogue */
.wrk-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wrk-tags a,.wrk-tags span{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-3);font-size:var(--t-xs);font-weight:500;line-height:1.35;color:var(--ink);text-decoration:none;
  transition:box-shadow var(--d1) var(--e-io),background var(--d1) var(--e-io)}
.wrk-tags a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.band--alt .wrk-tags a,.band--alt .wrk-tags span{background:var(--paper)}
@media (max-width:680px){.wrk-tags a{min-height:44px}}      /* service links are 44px tap targets on phones */

/* numbered list of what was handed over */
.wrk-made{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wrk-made li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);line-height:1.5;color:var(--ink)}
.wrk-made__n{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.08em;color:var(--blue);padding-top:.2em}

/* a picture credit line */
.wrk-credit{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.04em;color:var(--faint)}
.wrk-credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.wrk-credit a:hover{color:var(--ink)}
.band--ink .wrk-credit{color:var(--on-ink-3)}
.band--ink .wrk-credit a{text-decoration-color:var(--on-ink-line)}
.band--ink .wrk-credit a:hover{color:var(--on-ink)}

/* a picture that opens full screen */
.wrk-lb{position:relative;display:block;width:100%;height:100%;cursor:zoom-in;color:inherit}
.wrk-lb picture,.wrk-lb img{display:block;width:100%;height:100%}
.wrk-lb img{object-fit:cover;transition:transform 1.2s var(--e)}
.wrk-lb:hover img{transform:scale(1.025)}
.wrk-lb__zoom{position:absolute;right:14px;top:14px;z-index:2;width:38px;height:38px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-1);
  opacity:0;transform:scale(.85);transition:opacity var(--d2) var(--e),transform var(--d2) var(--e)}
.wrk-lb__zoom::before,.wrk-lb__zoom::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}
.wrk-lb__zoom::before{width:12px;height:1.6px}
.wrk-lb__zoom::after{width:1.6px;height:12px}
.wrk-lb:hover .wrk-lb__zoom,.wrk-lb:focus-visible .wrk-lb__zoom{opacity:1;transform:none}
.wrk-lb:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- the full-screen viewer (a <dialog>: focus stays inside, Esc closes) ---------- */
.wrk-view-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--on-ink-2);overflow:hidden}
.wrk-view-lb::backdrop{background:var(--ink)}
.wrk-view-lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.wrk-lbx__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,2.4vw,28px)}
.wrk-lbx__count{font-family:var(--f);font-size:var(--t-xs);letter-spacing:.1em;color:var(--on-ink-3);font-variant-numeric:tabular-nums}
.wrk-lbx__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:48px;height:48px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--on-ink-card);box-shadow:inset 0 0 0 1px var(--on-ink-line);color:var(--on-ink);font-size:var(--t-sm);font-weight:500;cursor:pointer;
  transition:background var(--d1) var(--e-io)}
.wrk-lbx__btn:hover{background:var(--ink-2)}
.wrk-lbx__btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrk-lbx__btn[disabled]{opacity:.35;cursor:default}
.wrk-lbx__x{position:relative;width:14px;height:14px}
.wrk-lbx__x::before,.wrk-lbx__x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.6px;background:currentColor}
.wrk-lbx__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.wrk-lbx__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.wrk-lbx__stage{position:relative;min-height:0;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;padding:0 clamp(64px,7vw,104px);touch-action:pan-y pinch-zoom;user-select:none}
.wrk-lbx__fig{margin:0;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;width:100%;height:100%;min-height:0}   /* fixed tracks: a tall picture never outgrows the stage */
.wrk-lbx__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm);box-shadow:0 30px 80px -30px var(--ink)}
.wrk-lbx__img.is-in{animation:wrk-lb-in .42s var(--e)}
.wrk-lbx__img.is-left{animation:wrk-lb-left .42s var(--e)}
.wrk-lbx__img.is-right{animation:wrk-lb-right .42s var(--e)}
@keyframes wrk-lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes wrk-lb-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes wrk-lb-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.wrk-lbx__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.wrk-lbx__nav--prev{left:clamp(10px,1.6vw,24px)}
.wrk-lbx__nav--next{right:clamp(10px,1.6vw,24px)}
.wrk-lbx__chev{width:10px;height:10px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor}
.wrk-lbx__nav--prev .wrk-lbx__chev{transform:translateX(2px) rotate(45deg)}
.wrk-lbx__nav--next .wrk-lbx__chev{transform:translateX(-2px) rotate(-135deg)}
.wrk-lbx__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 18px;min-height:64px;padding:14px clamp(16px,4vw,48px) 20px;text-align:center}
.wrk-lbx__t{max-width:70ch;font-size:var(--t-sm);line-height:1.55;color:var(--on-ink)}
.wrk-lbx__c{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--on-ink-3)}
.wrk-lbx__strip{display:flex;justify-content:center;gap:6px;padding:0 16px 16px}
.wrk-lbx__dot{width:6px;height:6px;border-radius:50%;background:var(--on-ink-line);transition:background var(--d1) var(--e-io),transform var(--d1) var(--e-io)}
.wrk-lbx__dot.is-on{background:var(--on-ink);transform:scale(1.3)}
html.wrk-lb-open{overflow:hidden}
@media (max-width:640px){
  .wrk-lbx__stage{padding:0 6px}
  .wrk-lbx__nav{min-width:44px;width:44px;height:44px;padding:0;background:var(--ink-2)}
  .wrk-lbx__nav--prev{left:10px}
  .wrk-lbx__nav--next{right:10px}
  .wrk-lbx__strip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wrk-lbx__img.is-in,.wrk-lbx__img.is-left,.wrk-lbx__img.is-right{animation:none}
  .wrk-lb img,.wrk-lb:hover img{transition:none;transform:none}
}

/* touch screens (phones and tablets): 44px tap targets (integrator, responsive pass) */
@media (pointer:coarse){
  .wrk-tags a,.wrk-chip{min-height:44px}
  .wrk-fig--full .wrk-fig__cap .wrk-credit a{padding-block:4px 26px}     /* inline: the hit area grows downward, away from the picture; the caption never moves */
}