/* Looks the public site adds to the hub's People pages (static/hub/css/people.css, person.css, lawyer.css: synced). Hand-written; the sync never touches it. */

/* The server-built page (a crawler's and a no-script reader's) goes away when the hub's script runs; flag.js sets data-audience on <html> then. The hub's own
   app and headings, which need the script, stay hidden until it does. */
html[data-audience="public"] .ssr-only { display: none; }
html:not([data-audience="public"]) .hub-people .hub-app,
html:not([data-audience="public"]) .hub-person .hub-head,
html:not([data-audience="public"]) .hub-lawyer .hub-head { display: none; }

/* the hub's headings (the profile's name, the People page's title) are level-1 headings by role: they look as the hub's h1 does */
.hub-person .hub-head, .hub-lawyer .hub-head { padding: 0 0 10px; margin: 0 0 14px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.hub-person .hub-head .h1, .hub-lawyer .hub-head .h1, .hub-people .hero .h1 { font-family: var(--font-display); font-weight: bold; font-size: 26px; line-height: 1.15; margin: 0; letter-spacing: .2px; }
.hub-people .hero .h1 { margin: 0 0 6px; }
.hub-person .hub-head .sub, .hub-lawyer .hub-head .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
@media (max-width: 640px) { .hub-person .hub-head .h1, .hub-lawyer .hub-head .h1, .hub-people .hero .h1 { font-size: 22px; } }

/* the page text under the hub's own sections */
.hub-people .hub-credit, .hub-person .hub-credit, .hub-lawyer .hub-credit { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--faint); font-size: 11.5px; }


/* the lists a tab draws stay one line each on a phone */
.hub-people .p-meta { overflow-wrap: anywhere; }