/* about.css - the About page only.

   Linked from App.razor with every other page file (docs/REDESIGN-PLAN.md
   1.6), so every selector here is scoped to markup only the About page
   renders. Budget 800 bytes brotli, asserted by a test.

   Two blocks used to live here and both are gone, because the things they
   worked around are gone. .counselor-card drew the logo mark in place of a
   portrait, above a comment saying no photograph of Ann Marie existed. One
   did, it is in wwwroot/img/people, and the page leads with it through the
   shared .person block in 04-public.css and the tall violet arch in
   05-theme.css. .office-gallery was three photographs at equal width; the
   gallery is six now, the same .photo-grid as the home page, and 05's
   .editorial-grid lays it out from 860px.

   What is left is the reading column meeting the theme:

   .about-person     the space around the portrait block, wider than the
                     .prose rhythm gives it.
   .prose > .eyebrow the section gap moves from the h2 up to the eyebrow
                     above it, so the pair reads as one heading. The
                     eyebrow's own bottom margin (01) is the gap between.
   .prose .chips     the credential chips sit inside .prose, whose ul rule
                     would indent them and space them like a list.
   .deflist dt .icon the 20px glyph before each credential term, teal like
                     every other inline icon on the site. */

.about-person {
    margin-top: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--rule);
}

.prose > .eyebrow {
    margin-top: var(--space-7);
}

.prose > .eyebrow + h2 {
    margin-top: 0;
}

.prose .chips {
    padding-left: 0;
    max-width: none;
}

.prose .chips li + li {
    margin-top: 0;
}

.deflist dt .icon {
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
    color: var(--teal);
}