/* Giant Entity: /work (look-v3 section 12, Part C). A statement head; three groups, never
   interleaved, each its pillar's plates: Brand and websites at 16:10 in a 7 and 5 then 12 rhythm;
   Workflow and automation as the before and after with the stepped rose edge as its handle, then
   the four flow drawings; 3D and games on the carbon stage. Plates open once from a stepped mask
   (three 160 ms steps); there is no hover zoom anywhere. */

.doc--statement .doc__intro { padding-bottom: var(--sp-l); }
@media (min-width: 1100px) {
  .doc--statement .doc__intro { grid-column: 1 / span 8; }
}
.work-jump { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 1.25em; }
.work-jump__label { color: var(--fg-muted); }
.work-jump .link-list { display: flex; flex-wrap: wrap; gap: 0.2em 1.25em; list-style: none; padding: 0; margin: 0; }
.work-jump a { display: inline-flex; align-items: center; min-height: 1.5rem; }

/* ---------- Groups ---------- */

.work-group { padding-block: var(--sp-l) var(--sp-xl); scroll-margin-top: var(--sp-s); }
/* the rule between groups runs the grid's width, not the window's */
.work-group + .work-group:not(.field-carbon) {
  background: linear-gradient(var(--line), var(--line)) top center / min(calc(100% - 2 * var(--margin)), calc(var(--wrap-max) - 2 * var(--margin))) 1px no-repeat;
}
.work-group__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-s);
  align-items: end;
  margin-bottom: var(--sp-l);
}
.work-group__head > * { grid-column: 1 / -1; min-width: 0; }
.work-group__name { font-size: var(--fs-heading); max-width: 14ch; text-wrap: balance; }
.work-group__intro { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; }
.work-group__intro p { max-width: 44ch; }
.work-group__art { height: clamp(4rem, 3rem + 3vw, 9rem); display: flex; justify-content: flex-end; }
.work-group__art .dw { height: 100%; width: auto; max-width: 100%; margin: 0; }
@media (min-width: 1100px) {
  .work-group__name { grid-column: 1 / span 6; grid-row: 1; }
  .work-group__intro { grid-column: 1 / span 6; grid-row: 2; }
  .work-group__art { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; }
}
@media (max-width: 1099px) {
  .work-group__art { order: -1; justify-content: flex-start; height: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
}

/* the 3D and games group stands on the carbon stage, edge to edge */
.work-group.field-carbon { background: var(--carbon); }
.field-carbon .plate__frame { background: var(--carbon-surface); }

/* ---------- The grid of plates ---------- */

.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-l) var(--gutter); align-items: start; }
.work-grid > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.work-flow, .work-plate--split { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .work-plate--7 { grid-column: span 7; }
  .work-plate--5 { grid-column: span 5; }
  .work-plate--12 { grid-column: 1 / -1; }
}
.work-plate { display: grid; gap: var(--sp-xs); align-content: start; }
.work-plate .plate__frame { aspect-ratio: 16 / 10; }
.work-plate__frames { display: grid; gap: var(--gutter); }
@media (min-width: 720px) {
  .work-plate--pair .work-plate__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a lone plate across all twelve columns stays a picture, not a wall */
@media (min-width: 1100px) {
  .work-plate--12:not(.work-plate--pair):not(.compare) .plate__frame { aspect-ratio: 21 / 10; }
}

/* ---------- Captions: the heading, then what; who and role; for whom; status ---------- */

.work-caption { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.25em; max-width: 72ch; }
.work-caption__title { margin-bottom: 0.2em; font-size: var(--fs-body); font-weight: 500; line-height: 1.35; color: var(--fg); }
.work-caption .plate__what { font-weight: 400; }
.work-caption__service { margin-top: 0.35em; color: var(--fg-muted); }
.work-caption__service a { color: var(--fg); }
.field-carbon .work-caption { color: var(--carbon-muted); }
.field-carbon .work-caption .plate__what,
.field-carbon .work-caption__title { color: var(--porcelain); }
@media (min-width: 1100px) {
  /* beside a plate across the page the caption runs in two columns */
  .work-plate--12 > .work-caption { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; column-gap: var(--gutter); }
  .work-plate--12 > .work-caption > * { grid-column: 2; }
  .work-plate--12 > .work-caption > .work-caption__title { grid-column: 1; grid-row: 1 / span 6; }
}

/* ---------- Compare plates: the stepped edge in the group's material ---------- */

.work-plate.compare .compare__stage { aspect-ratio: 16 / 10; }
.compare__edge { --edge-w: 1.5rem; }
.compare__step { width: 100%; height: 100%; overflow: visible; }
.compare__step path { stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill var(--dur-hover) var(--ease-out); }
.compare--ultra .compare__step path { fill: var(--ultra); stroke: var(--ultra-dark); }
.compare--ultra .compare__edge:hover .compare__step path { fill: var(--ultra-deep); }
.compare--rose .compare__step path { fill: var(--rose); stroke: var(--rose-dark); }
.compare--rose .compare__edge:hover .compare__step path { fill: var(--rose-deep); }
.compare__edge { cursor: ew-resize; }
.compare__note { margin-top: 0.35em; color: var(--fg-muted); }
html:not(.js) .compare__note { display: none; }
/* the before and after: the plate across nine columns, its caption beside it, as the flows below */
@media (min-width: 1100px) {
  /* align-items: start, so the caption keeps its own line spacing rather than stretching to the plate */
  .work-plate--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .work-plate--split > .compare__stage { grid-column: 1 / span 9; }
  .work-plate--split > .work-caption { grid-column: 10 / -1; }
}

/* ---------- The flows: drawings of the real structure, in the workflow material ---------- */

.work-flow { display: grid; gap: var(--sp-s); margin: 0; }
.work-flow__map { color: var(--fg); background: var(--paper); padding: var(--sp-s); border-radius: var(--radius); }
.work-flow__map svg { display: block; width: 100%; height: auto; }
.work-flow__map .flow-edge,
.work-flow__map .flow-node > :is(rect, polygon, line) { vector-effect: non-scaling-stroke; }
.work-flow__map .flow-paper { fill: var(--paper); }
/* steps that run themselves are solid madder with paper type (5.39; carbon on it is only 3.06);
   a person's steps stay outlined */
.work-flow__map .flow-node--auto > :is(rect, polygon) { fill: var(--rose); stroke: var(--rose-dark); }
.work-flow__map .flow-node--auto > line { stroke: var(--rose-dark); }
.work-flow__map .flow-node--auto g[fill] { fill: var(--paper); }
.work-flow__map .flow-legend rect:not(.flow-paper) { fill: var(--rose); stroke: var(--rose-dark); }
.work-flow__map:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (max-width: 719px) {
  /* the map keeps a readable size and scrolls inside its frame; the page itself never scrolls sideways */
  .work-flow__map { overflow-x: auto; overscroll-behavior-x: contain; }
  .work-flow__map svg { width: 56rem; max-width: none; }
}
@media (min-width: 1100px) {
  .work-flow { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .work-flow__map { grid-column: 1 / span 9; }
  .work-flow > .work-caption { grid-column: 10 / -1; }
}

/* The stepped mask that opens each plate lives in site.css (.enter--mask), for every page. */

@media (forced-colors: active) {
  .compare__step path { fill: CanvasText; stroke: Canvas; }
  .work-flow__map { background: Canvas; }
  .work-flow__map .flow-paper { fill: Canvas; }
  .work-flow__map .flow-node--auto > :is(rect, polygon),
  .work-flow__map .flow-legend rect:not(.flow-paper) { fill: CanvasText; stroke: CanvasText; }
  .work-flow__map .flow-node--auto g[fill] { fill: Canvas; }
}