/* Act 4, proof. Owned by the proof agent.
   Outcome figures on Loam, then the two live builds as evidence. */

.outcomes {
  margin-top: var(--space-96);
}

/* One owned figure carries the act. The aside under the label says only how
   it was counted; no borrowed industry averages share the column. The figure
   is top aligned with the label; the row opens on a full shell hairline and
   closes on another, so both edges run the same width. The aside sits in the
   label's column, directly under it, so the row never leaves a void. */
.outcome--lead {
  border-top: var(--hairline) solid var(--color-rule-dark);
  border-bottom: var(--hairline) solid var(--color-rule-dark);
  padding-block: var(--space-24);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-64);
  align-items: start;
}

.outcome__figure {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-73);
  line-height: var(--leading-73);
  color: var(--color-chaff);
  font-variant-numeric: tabular-nums;
}

.outcome__label {
  grid-column: 2;
  font-size: var(--text-17);
  line-height: var(--leading-17);
  color: var(--color-fallow);
  max-width: 44ch;
}

.outcome__aside {
  grid-column: 2;
  margin-top: var(--space-16);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  color: var(--color-fallow);
}

.outcome__aside > span { display: block; max-width: 44ch; }

/* The coda is the tail of the number, not a second peak: one register under
   the builds heading, in Fallow, no ornament. The figure stays the only
   display size moment in the act. */
.proof__coda {
  margin-top: var(--space-64);
  max-width: 736px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-29);
  line-height: var(--leading-29);
  color: var(--color-fallow);
}

/* ------------------------------------------------------------- live builds */

/* The builds open as a new movement: 96 of ground, a hairline, 96 more. */
.pieces {
  margin-top: var(--space-96);
  padding-top: var(--space-96);
  border-top: var(--hairline) solid var(--color-rule-dark);
}

.pieces__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-32);
  flex-wrap: wrap;
}

.pieces__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-35);
  line-height: var(--leading-35);
}

.pieces__text {
  font-size: var(--text-17);
  line-height: var(--leading-17);
  color: var(--color-fallow);
  max-width: 44ch;
}

.pieces__row {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-32);
  row-gap: var(--space-64);
}

/* The frame hairline is Fallow at rest so it reads against both a cream and
   an orange screenshot without hover; there is no hover swap, the picture
   scale is the only hover response. */
.piece__frame {
  display: block;
  background: var(--color-fallow);
  padding: var(--hairline);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-24)), calc(100% - var(--chamfer-24)) 100%, 0 100%);
}

/* The picture carries the same chamfer, stepped in two hairlines along the cut
   (one hairline measured perpendicular to a 45 degree edge), so the rule
   follows the diagonal instead of stopping at it. */
.piece__frame picture {
  display: block;
  overflow: hidden;
  background: var(--color-loam);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-24) + var(--hairline) * 2), calc(100% - var(--chamfer-24) + var(--hairline) * 2) 100%, 0 100%);
}

.piece__shot {
  display: block;
  width: 100%;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .piece__frame:hover .piece__shot { transform: scale(1.02); }
}

.piece__title {
  margin-top: var(--space-24);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-29);
  line-height: var(--leading-29);
}

.piece__note {
  margin-top: var(--space-8);
  color: var(--color-fallow);
  max-width: 52ch;
}

.piece__link {
  margin-top: var(--space-16);
  font-family: var(--font-utility);
  font-size: var(--text-14);
  line-height: var(--leading-14);
}

@media (max-width: 1023px) {
  .pieces__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .outcomes { margin-top: var(--space-48); }
  .outcome--lead {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-16);
  }
  .outcome__figure { font-size: var(--text-51); line-height: var(--leading-51); }
  .outcome__figure, .outcome__label, .outcome__aside { grid-column: auto; }
  .outcome__aside { margin-top: 0; }
  .pieces { margin-top: var(--space-64); padding-top: var(--space-64); }
  .proof__coda { margin-top: var(--space-48); font-size: var(--text-29); line-height: var(--leading-29); }
}

/* Under 360 the held title "Two builds are live." is 2px wider than the
   viewport; let it wrap there and nowhere else. */
@media (max-width: 359px) {
  .pieces__title .nb { white-space: normal; }
}

/* The showcase links stand alone on their own line, so the WCAG 2.5.8
   inline exception does not cover them: 8 of hit area above and below,
   pulled back with a matching negative margin so the layout does not move. */
@media (max-width: 767px) {
  .piece__link .textlink {
    display: inline-block;
    padding-block: var(--space-8);
    margin-block: calc(-1 * var(--space-8));
  }
}