/* page-about.css — page-scoped styles for /about/ (moved out of index.html 2026-09-06) */
    /* Page-scoped: small styled subheading under the bio heading. */
    .role-subhead {
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--color-muted);
      margin-top: calc(-1 * var(--space-3));
    }
    /* Jeannie's headshot, set under the heading rather than floated into the
       bio. Floating it squeezed the first paragraph into a narrow ragged column
       that ran hard against the frame — busy, and the opposite of the restraint
       the rest of the site keeps. As a block it gets air on both sides and the
       bio reads at full measure underneath.
       Brass hairline and a soft lift, no hard border. */
    .bio-portrait {
      margin: var(--space-4) 0 var(--space-5);
      width: min(100%, 16rem);
    }
    .bio-portrait img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius, 8px);
      box-shadow: 0 10px 30px rgba(31, 26, 20, 0.14);
      outline: 1px solid rgba(201, 162, 94, 0.35);
      outline-offset: -1px;
    }
    /* Social links under Contact — same treatment as the home page. */
    .about-social {
      display: flex;
      gap: var(--space-5);
      align-items: center;
      margin-top: var(--space-3);
    }
    .about-social a {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: #8a6a42;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .about-social a:hover { text-decoration: underline; }

    /* Holden and Maisel (2026-09-07): three frames in a row under the bio,
       same brass hairline and lift as the portrait. Stack on narrow screens. */
    .bio-dogs {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
      margin: var(--space-4) 0 var(--space-6);
      align-items: end;
    }
    @media (min-width: 40rem) { .bio-dogs { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
    /* Three frames of two aspect ratios: crop each to the same 3:4 so the row
       lines up; the sofa frame keeps its left side, where Holden is. */
    .bio-dogs img { aspect-ratio: 3 / 4; object-fit: cover; }
    .bio-dogs figure:nth-child(3) img { object-position: 0% 50%; }
    .bio-dogs figure { margin: 0; }
    .bio-dogs img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius, 8px);
      box-shadow: 0 10px 30px rgba(31, 26, 20, 0.14);
      outline: 1px solid rgba(201, 162, 94, 0.35);
      outline-offset: -1px;
    }
    .bio-dogs figcaption {
      margin-top: var(--space-2);
      font-size: var(--text-sm);
      color: var(--color-muted);
    }