/* about.css. Owner: package P6. Who you are working with, and the halftone
   portrait (#12). */

.about {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.about-text h2 { margin-bottom: clamp(20px, 2.5vw, 28px); }
.about-text p { max-width: var(--measure); }
.about-text p + p { margin-top: 1.1em; }
.about-photo { margin: 0; border: 2px solid var(--ink); position: relative; }
/* Photography prints black and white. */
.about-photo img { width: 100%; height: auto; filter: grayscale(1); }

/* The halftone portrait (#12): a canvas drawn over the photo by about.js,
   resolving from coarse dots into the real image. Decorative, aria-hidden. */
.ht-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
:root[data-motion="full"][data-halftone] .about-photo img { opacity: 0; }
:root[data-motion="full"] .about-photo img { transition: opacity 450ms ease; }
:root[data-motion="full"] .ht-canvas { transition: opacity 450ms ease; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
}