/* À propos (about.html): a plain title, then three sections of equal weight, the picture alternating sides as before the redesign:
   the author (photo | text), the site (text | logo), the method (picture | text) */
.about-title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 2.6rem; color: var(--text-heading); }
.about { padding-bottom: 3rem; }
.about > section:first-child .section-title { margin-top: 2.75rem; }  /* air under the page title */
.about-text p { margin: 0 0 1rem; font-size: 16.5px; line-height: 1.75; color: var(--text-body); }
.about-text p:last-child { margin-bottom: 0; }
.about-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.about-site .about-split { grid-template-columns: minmax(0, 1fr) 240px; }  /* the picture on the right here */
/* The three pictures in the same 240px square with the cards' corners: the photo fills it; the logo and the drawing
   in white on the brand blue, as the logo in the header. The PNGs are navy on an opaque white: inverted and made grey
   they become white on black, and "screen" drops the black onto the blue. Widths are set so the drawn part
   (logo 864px, drawing 968px of the 1080px files) fills the square */
.about-pic { display: grid; place-items: center; width: 240px; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--brand); }
.about-site .about-pic { justify-self: end; }
.about-pic img { filter: invert(1) grayscale(1) brightness(1.6); mix-blend-mode: screen; }
.about-pic.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; }
.about-pic.is-logo img { width: 104%; max-width: none; }
.about-pic.is-icon img { width: 72%; max-width: none; transform: translateX(3%); }  /* nudged right: the page drawn on the left makes it look off */
.about-name { margin: 0 0 .35rem; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; }
.about-name a { color: var(--text-heading); } .about-name a:hover { color: var(--brand); text-decoration: none; }
.about-links { display: flex; gap: .15rem; margin: 0 0 1rem -.45rem; }
.about-links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; color: var(--text-meta); }
.about-links a:hover { background: var(--surface-muted); color: var(--brand); }
.about-profile-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: 14.5px; font-weight: 600; color: var(--brand); }
@media (max-width: 767px) {
  .about-split, .about-site .about-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-title { font-size: 2rem; }
  .about-pic, .about-site .about-pic { width: 180px; justify-self: center; }
  .about-site .about-pic { order: -1; }
  .about-text p { font-size: 16px; }
}