/* about-page.css : about.html only (issue #850, lane 2026-10-08-about-case-files).
   The About page reuses the Work page's case-file pattern (assets/work-page.css).
   Two things it needs that the Work page does not:
     1. Image alternation. The receipt strip sits between file 01 and file 02, so
        work-page.css's :nth-child(even) rule lands on the wrong files. Pinned by
        index here instead: 01 image left, 02 image right, 03 image left.
     2. The wide receipt strip itself, which on Work only ever appears inside a
        case file. */

/* 1. Alternation. .work-files children: 1 = file 01, 2 = strip, 3 = file 02,
   4 = file 03. */
.work-files > .work-file:nth-child(3) .work-file-art { order: 2; }
.work-files > .work-file:nth-child(3) .work-file-body { order: 1; }
.work-files > .work-file:nth-child(4) .work-file-art { order: 1; }
.work-files > .work-file:nth-child(4) .work-file-body { order: 2; }

/* 2. The strip: same garnet rule and border-bottom rhythm as a case file, one
   wide four-column receipt under the heading, no card boxes. */
.about-strip {
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--line);
}
.about-strip h2 {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.1;
}
.about-strip .work-receipt {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  transform: rotate(-0.25deg);
}
.about-strip .work-receipt-col p { font-size: .92rem; }
.about-strip .work-receipt-col strong { display: block; }

@media (max-width: 1000px) {
  .about-strip .work-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .work-files > .work-file:nth-child(3) .work-file-art,
  .work-files > .work-file:nth-child(4) .work-file-art { order: 1; }
  .work-files > .work-file:nth-child(3) .work-file-body,
  .work-files > .work-file:nth-child(4) .work-file-body { order: 2; }
  .about-strip .work-receipt { grid-template-columns: minmax(0, 1fr); transform: none; }
}

/* 3. Height. The brief's target is a page under 4,000px at 1440; the cannon
   hero, the testimonials and the CTA are fixed by the brief, so the trim has to
   come from the case files: shorter padding and a 16/9 crop instead of the
   Work page's 3/2. */
.work-files .work-file { padding: clamp(2rem, 3.4vw, 2.8rem) 0; }
.work-files .work-file-art img { aspect-ratio: 16 / 9; object-fit: cover; max-height: 340px; }
.work-files .work-art-mask { aspect-ratio: 16 / 9; }
.work-files .work-file-body h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.work-files .work-file-body .lede { font-size: 1.02rem; }