/* Lender (case page). "The work": two galleries (the redrawn prototype panels; Lender's own site, unfiltered), each with a
   full-width lead figure over two; every figure opens full size in a lightbox. Greys plus the acid only. */
.vgrid .vw{grid-column:1/-1}
.vh{margin:46px 0 0;font:600 19px/26px var(--mono);letter-spacing:-.04em;color:var(--fg)}
.vh + .vgrid{margin-top:18px}
.vnote{margin-top:14px}
.vf .lbx{display:block;position:relative;cursor:zoom-in;outline:none}
.vf .lbx::after{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .15s steps(3,end)}
.vf .lbx:hover::after,.vf .lbx:focus-visible::after{border-color:#C6FF3D}
.vsite .vf{background:#FFFFFF}
.vsite .vf figcaption{background:var(--bg)}
/* the lightbox */
.lbx-d{max-width:min(96vw,1600px);max-height:96vh;padding:0;margin:auto;background:var(--bg);border:1px solid #2A2A2A;color:var(--fg)}
.lbx-d::backdrop{background:rgba(5,5,5,.9)}
.lbx-d img{display:block;max-width:100%;max-height:calc(96vh - 110px);width:auto;height:auto;margin:0 auto}
.lbx-x{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:transparent;border:0;border-bottom:1px solid #2A2A2A;width:100%;justify-content:flex-end;font:400 13px/1 var(--mono);color:var(--fg);cursor:pointer}
.lbx-x:hover,.lbx-x:focus-visible{color:#C6FF3D}
.lbx-c{margin:0;padding:10px 16px 12px;border-top:1px solid #2A2A2A}
html.lbx-on{overflow:hidden}
#did .rows{margin-top:18px}
#did .rows + .lede{margin-top:18px}
#challenge .lede + .lede,#changed .lede + .lede{margin-top:12px}
/* phones: the closing line of 02 stays after its three rows (site.css orders every .lede before the window) */
#did .col>.lede-end{order:7}
#did .col>.rows{order:6}
/* phones: one figure per row (site.css), captions a size up */
@media (max-width:860px){.vf figcaption{font-size:14px}.vh{margin-top:36px}}
/* the next section's pull line (round Q3): body copy, 16 px, over the next case and the button */