/* Recent work — before/after pairs.
 *
 * Each image is a single file with the two states side by side, so the
 * split never drifts out of line on a narrow screen the way two separate
 * pictures do. The BEFORE and AFTER labels are typography, not baked into
 * the photograph: they come from the site, in the site's own font, and
 * they follow the skin.
 */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

.work{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;transition:.25s var(--ease)}
.work:hover{transform:translateY(-3px);border-color:var(--hairline-strong);box-shadow:var(--shadow-card)}

.work .ba{position:relative;display:block;line-height:0}
.work .ba img{width:100%;height:auto;display:block}

.work .ba b{position:absolute;top:14px;font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  background:var(--bg);color:var(--text);box-shadow:var(--shadow-card)}
.work .ba .is-before{left:14px}
.work .ba .is-after{right:14px;background:var(--copper);color:var(--send-ink)}

.work figcaption{padding:18px 22px 22px;font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.work figcaption em{font-style:normal;color:var(--text);font-weight:600}

/* Two side-by-side photos squeezed into half a phone screen stop being
 * readable, so one per row below this width. */
@media(max-width:820px){
  .works{grid-template-columns:1fr;gap:20px}
}
@media(max-width:640px){
  .work .ba b{font-size:9px;padding:6px 10px;top:10px}
  .work .ba .is-before{left:10px}
  .work .ba .is-after{right:10px}
  .work figcaption{padding:15px 17px 19px;font-size:14px}
}