/* About: crew, how we work, gear, made work for. Four chapters (layout.css,
   "Section rhythm"); what sits under each statement is laid out here. */

/* 01, on a Paper band: the two of us side by side, split by a navy hairline
   (r6 had two paper cards; before r6 two navy cards). */
.crew {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crew-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.crew-card:first-child { padding-top: 0; }
.crew-card + .crew-card { border-top: var(--border-hairline) solid var(--line-panel); }
@container col (min-width: 680px) {
  .crew { grid-template-columns: 1fr 1fr; }
  .crew-card { padding: 0 clamp(var(--space-6), 4vw, 8rem) 0 0; }
  .crew-card + .crew-card { border-top: 0; border-left: var(--border-hairline) solid var(--line-panel); padding: 0 0 0 clamp(var(--space-6), 4vw, 8rem); }
}
.crew-card__name { margin-top: var(--space-1); }
/* From a 900 px column the names step up to heading-1, a size under the
   chapter's statement, and each still holds one line. */
@container col (min-width: 900px) {
  .crew-card__name { font-size: var(--type-heading-1-size); letter-spacing: var(--type-heading-1-tracking); line-height: var(--type-heading-1-leading); }
}
.crew-card__role { color: var(--color-accent-text); }
.crew-card__bio { color: var(--color-text); max-width: 52ch; }

/* 02: the words on the left, how a job runs on the right. */
.steps {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: var(--border-hairline) solid var(--color-line);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: var(--border-hairline) solid var(--color-line);
  text-wrap: pretty;
}
.steps li::before {
  content: counter(step);
  /* Numerals (r8): Barlow Semi Condensed 800, tabular. */
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--type-heading-2-size);
  line-height: 1;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.steps b { display: block; margin-bottom: var(--space-1); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-leading); text-wrap: balance; }
.steps__after { margin-top: var(--space-5); }
/* Wide: the four steps as a 2 by 2 grid. */
@container col (min-width: 1500px) {
  .steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-grid-gap); }
  .steps li { padding-right: var(--space-4); }
}

/* 03, on a Paper band: the kit as a spec sheet. Rows of label and value on
   phones, two by two from 680, one row of four from 1150. */
.gear {
  margin: 0;
  border-top: var(--border-hairline) solid var(--color-line);
}
.gear__row {
  display: grid;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: var(--border-hairline) solid var(--color-line);
}
@container col (min-width: 560px) { .gear__row { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
@container col (min-width: 680px) {
  .gear { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-grid-gap); }
  .gear__row { grid-template-columns: minmax(0, 1fr); align-content: start; padding-right: var(--space-4); }
}
@container col (min-width: 1150px) {
  .gear { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gear__row dt { color: var(--color-text-muted); }
/* Reading text at heading-4 size: Barlow 400 (it was 500, a weight the r8
   request doesn't load, so it already drew as 400). */
.gear__row dd { margin: 0; font-size: var(--type-heading-4-size); line-height: 1.35; font-weight: var(--font-weight-regular); text-wrap: balance; }
.gear__note { margin-top: var(--space-5); max-width: 64ch; }

/* 04: the line, where we're based and the button, then four posters. */
/* The statement role (r8) at heading-1 size: Barlow 600 in sentence case,
   a long line that reads as a sentence, not a sign. */
.made-for__line {
  max-width: calc(26 * var(--ch-statement));
  font-family: var(--type-statement-family);
  font-size: var(--type-heading-1-size);
  font-weight: var(--type-statement-weight);
  text-transform: var(--type-statement-case);
  letter-spacing: var(--type-statement-tracking);
  line-height: var(--type-statement-leading);
  text-wrap: balance;
}
.made-for__end { display: grid; gap: var(--space-5); justify-items: start; margin-top: var(--space-7); }
/* Under a 1150 px column the four posters come straight after the line and
   the chapter (and the page) ends on where we're based and Get a quote, not
   on the posters under the button (r7 fix round 2). Only the boxes move: the
   source order (line, button, posters) and so the reading and Tab order stay
   as they were. */
@container col (width < 1150px) {
  .made-for__body { display: flex; flex-direction: column; }
  .made-for__top { display: contents; }
  .made-for__end { order: 1; }
}
/* Wide: the line on the left, where we're based and the button on the right. */
@container col (min-width: 1150px) {
  .made-for__top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); column-gap: var(--space-8); align-items: end; }
  .made-for__end { margin-top: 0; justify-items: end; text-align: right; }
}
/* The posters: the spots behind the first four names, in the line's order.
   Each in a navy hairline frame on Paper while it loads, like Work's cards. */
.made-for__posters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid-gap);
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}
@container col (min-width: 680px) { .made-for__posters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.made-for__poster {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  background: var(--color-bg-media);
}
.made-for__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 58% 46%;
  transition: transform 700ms var(--motion-ease-out);
}
/* Each poster plays its film, like a Work card (r7 fix): the whole poster is
   the link, with Work's Play tag in the corner (work.css). Pointed at or
   focused, the tag turns into the orange button and the poster pushes in a
   little; the focus ring sits just inside the edge, as on Work. */
.made-for__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-media);
}
.made-for__play:focus-visible { --focus-offset: -3px; outline-width: 3px; box-shadow: inset 0 0 0 6px var(--gist-cream); }
/* Two small posters a row (phones): a smaller tag, so it doesn't cover half
   the frame. The whole poster stays the target. */
@container col (max-width: 679px) {
  .made-for__play { padding: var(--space-2); }
  .made-for__play .work-card__play-chip { height: 32px; gap: 0.5em; padding: 0 var(--space-3) 0 var(--space-2); }
  .made-for__play .work-card__play-chip svg { width: 14px; height: 14px; }
}
.made-for__play:focus-visible .work-card__play-chip { background: var(--color-action); color: var(--color-on-action); }
.made-for__poster:focus-within img { transform: scale(var(--motion-scale-media-hover)); }
@media (hover: hover) {
  .made-for__poster:hover .work-card__play-chip { background: var(--color-action); color: var(--color-on-action); }
  .made-for__poster:hover img { transform: scale(var(--motion-scale-media-hover)); }
}
@media (prefers-reduced-motion: reduce) { .made-for__poster img { transform: none !important; } }
.made-for__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--gist-navy-rgb) / 0.14);
  pointer-events: none;
}