/* ==========================================================================
   ABOUT — "fade" layout
   Title + pull quote across the top, copy on the left, the three vinyl
   marks spread out on the right. The moss halftone fades in and out of
   the black so there's no hard edge (kept on phones too).
   (The other four About options live in /assets/css/v4/about-options.css
   in the design archive.)
   ========================================================================== */

.about { align-items: start; }

.about__copy {
  grid-column: 1 / 6;
  grid-row: 3;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  z-index: 1;
}
.about__copy .about__text { margin: 0; max-width: 32rem; font-size: 1.05rem; }

.about__records {
  grid-column: 6 / -1;
  grid-row: 3;
  align-self: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  z-index: 1;
  container-type: inline-size;
}

/* the records: smaller, spread across one loose staggered row */
.about .marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5cqw;
  margin: 0;
  padding-bottom: calc(8cqw + 1.4rem);
  justify-content: stretch;
}
.about .marks li { width: auto; margin: 0; translate: none; text-align: center; }
.about .marks li + li { margin-left: 0; }
.about .marks li:nth-child(1) { rotate: -4deg; }
.about .marks li:nth-child(2) { translate: 0 24%; rotate: 3deg; }
.about .marks li:nth-child(3) { translate: 0 6%; rotate: -2deg; }
.about .marks p { margin-top: 0.7rem; }
.about .marks__hint { margin-top: 1rem; }

/* the fade */
.about--fade { background: var(--ink); border-block: 0; isolation: isolate; }
.about--fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--halftone);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 70%, transparent 100%);
}

/* ---- Tablet: copy above, records below at full width ------------------ */
@media (max-width: 60em) {
  .about__copy { grid-column: 1 / -1; grid-row: 4; }
  .about__records { grid-column: 1 / -1; grid-row: 5; max-width: 40rem; justify-self: center; width: 100%; }
}

/* ---- Phones ------------------------------------------------------------ */
@media (max-width: 36em) {
  .about--fade::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  }
  .about .kicker { border-color: rgba(222, 228, 140, 0.45); color: var(--lime); }
  .about .marks { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding-bottom: 0; }
  .about .marks li { translate: none !important; margin: 0 !important; padding: 0; }
  .about .marks p { margin-top: 0.6rem; }
  .about .rpm { font-size: 0.6rem; min-width: 0; }
}