/* The work cards' hover (ported 3 Nov from hover/, round 1's H2 · Frame; Calvin: "hover -- frame", three more frame
   versions coming from hover-r2/). The root is the homepage's <main class="hv hv--h2">. A card's colour is its type's
   line, --tc (tokens.css: brand green, web blue, video red, testimonials hi-vis lime; Calvin, 4 Nov). The card's ground fills with its line
   and the picture steps in 4 px, so the card wears a frame of its colour; the caption becomes a flat strip of the same
   colour across the foot with black type, and the type's chip sits on the frame's top edge. Frame, strip and chip
   arrive together on one 220 ms beat. A testimonial takes a frame round its client's ground, no strip. A film's Play
   button stays above the card and clickable. The chip is mono caps, not the board's Anton (Calvin, 3 Nov: "I really
   don't like anton"). Touch: the card crossing the middle of the screen wears the frame. */
.hv { --beat: .22s; --ease: cubic-bezier(.2, .8, .2, 1); }
.hv .card__type { display: none; }
.hv .card__play { z-index: 3; }
/* the old hover (a 3 px lift, the picture zoomed 2.5%) is off: the frame replaces it */
@media (hover: hover) { .hv .card:hover { transform: none; } .hv .card:hover > img, .hv .card:hover > video { transform: none; } }

.hv--h2 .card:not(.tq) { background: var(--card-bg, #161616); transition: background-color var(--beat) var(--ease); }
.hv--h2 .card > img, .hv--h2 .card > video { transition: inset var(--beat) var(--ease), width var(--beat) var(--ease), height var(--beat) var(--ease), border-radius var(--beat) var(--ease); border-radius: 0; }
.hv--h2 .card__type { display: block; position: absolute; left: 4px; top: 4px; z-index: 4; height: 16px; padding: 0 5px; background: var(--tc); color: var(--tc-ink);
                      font: 400 10.5px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity var(--beat) var(--ease); pointer-events: none; }
.hv--h2 .card__cap { left: 4px; right: 4px; bottom: 4px; max-width: none; border-radius: 0 0 10px 10px; padding: 8px 10px; background: var(--tc); color: var(--tc-ink); transform: none;
                     transition: opacity var(--beat) var(--ease); }
.hv--h2 .card__cap .cap__mk { display: none; }
.hv--h2 .card:not(.tq).is-hot, .hv--h2 .card:not(.tq):hover { background: var(--tc); }   /* a testimonial keeps its client's ground */
.hv--h2 .card.is-hot > img, .hv--h2 .card.is-hot > video, .hv--h2 .card:hover > img, .hv--h2 .card:hover > video { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 10px; }
.hv--h2 .card.tq.is-hot, .hv--h2 .card.tq:hover { box-shadow: inset 0 0 0 4px var(--tc); }
.hv--h2 .card.is-hot .card__type, .hv--h2 .card:hover .card__type, .hv--h2 .card.is-hot .card__cap { opacity: 1; }
html.is-touch .hv--h2 .card:not(.is-hot) .card__cap { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .hv, .hv * { transition-duration: 0s !important; } }