/* The work grid and its cards, shared by the homepage (../index.html) and the Work page (work/index.html): moved out of
   the homepage on 3 Nov (Calvin: "the grid should be ported to the work page"). grid.js lays it out. */
/* Work grid (Calvin 9 Oct): Little Plains' card masonry, in a narrower column than theirs.
   Their four ~340 px columns run edge to edge. Second pass, "increase padding on the edge quite a bit ... still
   ~3 columns": three ~267 px columns in 840 px, so a 1440 px window keeps ~300 px of black each side.
   Cards come in three fixed shapes (tall 4:5, square, wide 3:2) and media crops to the card.
   Calvin, 2 Nov: "let's stretch the scroll wider, 4 column max": four ~295 px columns in 1240 px. */
:root { --grid-max: 1240px; --grid-gap: 20px; --card-r: 14px; }
.work { padding: 0 16px clamp(96px, 14vh, 160px); scroll-margin-top: 80px; }   /* the menu's Work lands the grid just under the capsule */
@media (min-width: 600px) { .work { padding-inline: max(16px, 6vw); } }   /* tablets get edge room too; phones keep 16px */
.work__grid { max-width: var(--grid-max); margin: 0 auto; columns: 4 220px; column-gap: var(--grid-gap); }   /* no-JS fallback */
.work__grid > .card { break-inside: avoid; margin-bottom: var(--grid-gap); }
/* masonry with spans (Calvin, 1 Nov: "more important landscape work should take up more width"): the script places each
   card absolutely in the lowest column(s) it fits; a priority landscape card (data-span="2") runs two columns wide */
.work__grid.is-masonry { columns: auto; display: block; position: relative; }
.work__grid.is-masonry > .card { position: absolute; margin: 0; }

.card {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--card-r); background: var(--card-bg, #161616); color: var(--card-ink, var(--ink));
  text-decoration: none; container-type: inline-size;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.card--tall { aspect-ratio: 4 / 5; }
.card--square { aspect-ratio: 1; }
.card--wide { aspect-ratio: 3 / 2; }
.card > img, .card > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
/* standard slots (Calvin, 3 Nov: "standarize card sizes"): every piece fills its card, cropped to it, with no ground
   behind it (Calvin, 3 Nov: "brand backgrounds was an awful idea. also we should try as much as possible not to use
   backgrounds") */
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); }
  .card:hover > img, .card:hover > video { transform: scale(1.025); }
}
.card:focus-visible { outline: 2px solid var(--hl); outline-offset: 3px; }
.card__cap {   /* CLIENT — caption, on hover only (Little Plains shows the art alone) */
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); box-sizing: border-box;
  padding: 6px 8px; border-radius: 6px; background: rgba(10, 10, 10, .78); color: var(--paper);
  font: 400 11px/1.25 var(--font-mono); letter-spacing: .02em;
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.card:hover .card__cap, .card:focus-visible .card__cap { opacity: 1; transform: none; }
/* no date on the hover caption (Calvin, 3 Nov: "kill date -- don't think this is relevant. just client and short description") */
/* film cards (Calvin, 1 Nov: "homepage film cards -- add play buttongs"): the poster waits with the case study's play
   button and running time; it plays in the card with sound and controls, and the rest of the card links to the film */
.card__link { position: absolute; inset: 0; z-index: 1; }
.card__play { position: absolute; left: 50%; top: 72%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
              padding: 11px 16px 11px 14px; border: 0; border-radius: 999px; background: var(--paper); color: var(--asphalt);
              font: 400 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
              box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.card--film:hover .card__play, .card__play:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
.film__icon { width: 9px; height: 11px; flex: none; }
.film__time { margin-left: 1px; opacity: .55; }
.card--film.is-playing .card__link, .card--film.is-playing .card__play, .card--film.is-playing .card__cap { display: none; }
.card--film.is-playing, .card--film.is-playing > video { transform: none; }

/* text cards: quotes and numbers, sized off the card's own width */
.card__in > *, .stat__n, .stat__l { display: block; }
.card__in { position: absolute; inset: 0; box-sizing: border-box; padding: 7cqi; display: flex; flex-direction: column; justify-content: space-between; }
.quote__q { margin: 0; font: 400 max(14px, 6.3cqi)/1.32 var(--font-body); letter-spacing: -.01em; text-wrap: pretty; }
.quote__by { margin: 0; font: 400 max(10px, 3.2cqi)/1.5 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
/* testimonial cards, template A "Their ground" (Calvin, 1 Nov; the AD's board in testimonial/): the client's logo_bg and
   logo file carry the card, Trash sets the words. Written by work.quote_html; the case study's copy is in case-study.css.
   The logo is sized by area (width = k x sqrt(aspect)); --iw/--ix/--iy show only a raster's artwork, as sent. */
.tq__in { position: absolute; inset: 0; box-sizing: border-box; padding: 8cqi; display: flex; flex-direction: column; }
.tq__q { display: block; margin: 0; font: 400 max(14px, 6.3cqi)/1.32 var(--font-body); letter-spacing: -.01em; text-wrap: pretty; }
.card.tq.is-long .tq__q { font-size: max(14px, 5.4cqi); line-height: 1.36; }
.tq__hang { margin-left: -.475em; }   /* hanging open quote: Plex's “ is .475em wide */
.tq__by { display: block; margin: auto 0 0; padding-top: 6cqi; font: 400 max(10px, 3.2cqi)/1.5 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.tq__name, .tq__role { display: block; }
.tq__role { opacity: .62; }
.tq--ground { --card-bg: var(--tq-bg); --card-ink: var(--tq-ink, var(--asphalt)); --logo-k: 12cqi; }
.tq__logo { position: relative; display: block; flex: none; width: calc(var(--logo-k) * sqrt(var(--ar, 4))); aspect-ratio: var(--ar, 4);
            overflow: clip; overflow-clip-margin: 2px; }
.tq__logo img { position: absolute; display: block; max-width: none; height: auto;
                width: calc(var(--iw, 1) * 100%); left: calc(var(--ix, 0) * 100%); top: calc(var(--iy, 0) * 100%); }
.tq--ground .tq__q { margin-top: 9cqi; }
.stat__client { margin: 0; font: 400 max(10px, 3.2cqi)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.stat__n { margin: 0; font: 400 30cqi/.85 var(--font-display); }
.stat__l { margin: 0; font: 400 max(12px, 5cqi)/1.3 var(--font-body); max-width: 19ch; }