/* ==========================================================================
   FILE     public_html/assets/about.css   jjmccaffrey.com   JJ10
   UPLOAD   by the live branch, into domains/jjmccaffrey.com/public_html/assets/
   DATE     2026-11-02
   The about page's layout, on top of site.css (its colours, the device's
   own fonts, light or dark to match the device). The two sites side by
   side on a computer, one above the other on a phone.
   JJ10: first version.
   ========================================================================== */

body.about { place-items: start center; padding: 12vh 16px 48px; height: auto; min-height: 100%; }
body.about main { max-width: 52rem; }
body.about .lede { font-size: 1.15rem; margin-bottom: 2rem; }

.sites { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
.sites li { border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 12px; padding: 20px 22px; }
.sites h2 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.sites h2 a { text-decoration: none; }
.sites h2 a:hover, .sites h2 a:focus-visible { text-decoration: underline; }
.sites .addr { margin: 2px 0 10px; font-size: .9rem; }
.sites p { color: var(--ink); }
.sites .addr { color: var(--muted); }
body.about .co { font-size: .85rem; }

@media (max-width: 640px) {
  body.about { padding-top: 8vh; }
  .sites { grid-template-columns: minmax(0, 1fr); }
}