/* The person's page, /directory/<number> (lib/directory.mjs), linked after site.css and directory.css by those pages
   alone, so the directory's own page and every other page stay as they are. A, the card (Taylor, November 7, 2026: "A is
   good, the card."): on the site's five columns, with Contact as its action and a small face, never larger than the
   founding member card's (196 px), smaller on a phone: "We can't expect folks to have high quality headshots. Me
   included." */
.dirp .pways { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: var(--s); }
.dirp .pways .pmap { margin-top: 0; }
.dirp .pcontact { flex: none; }
/* the note Contact opens: on the page, under the action, the site's own fields */
.note { display: none; margin-top: var(--g); padding-top: var(--g); border-top: 1px solid var(--rule); }
.note.open, .note:target { display: block; }
.note h2 { font-size: 28px; line-height: 1.2; color: var(--blue); }
.note .f { margin-top: 24px; max-width: 760px; }
.note textarea { display: block; width: 100%; border: 0; border-bottom: 2px solid var(--blue); background: #fff; padding: 12px 14px; border-radius: 0;
  font: 400 17px/1.5 "Libre Franklin", sans-serif; resize: vertical; box-shadow: inset 0 1px 0 #B8C4D6, inset 1px 0 0 #B8C4D6, inset -1px 0 0 #B8C4D6; }
.note .f .bad textarea { border-color: #B3261E; }
.note .send { margin-top: 4px; }
.note .sent { font: 500 21px/1.45 "Libre Franklin", sans-serif; max-width: 34em; }
.note .sent:focus { outline: 0; }
.dirp .ini { display: grid; place-items: center; }

/* ---- A, the card: the founding member card grown to the page --------------------------------------------------------- */
.pcard { position: relative; background: var(--blue); color: #fff; padding-bottom: calc(var(--r) + 14px); }
.pcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--dome); }   /* the card's foot */
.pcard > header.site { padding-top: var(--head-top); }
.pcard .site .row a, .pcard .site .signin.top, .pcard .site .menu summary { color: #fff; }
.pcard .site .menu summary { box-shadow: inset 0 0 0 2px #fff; }
.pcard .site .menu summary:hover, .pcard .site .menu[open] summary { background: rgba(255, 255, 255, .12); }
.pcard :focus-visible { outline-color: var(--dome); }
.pc-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; align-items: start; padding-top: var(--r); }
/* beside the words, the face's top stands on the name's capitals (9.8 px under the head's own top at 56 px) */
.pc-in > .pc-face { margin-top: 12.6px; width: min(var(--fw), 151px); }
/* the name on one line, as the card sets it: the page's script brings it down a step at a time until it fits */
.pc-words h1.fit .nm { white-space: nowrap; }
.pc-words h1.fit.wraps .nm { white-space: normal; }
.pc-face { grid-column: 1; display: block; width: var(--fw); aspect-ratio: 1; margin-left: 5px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px #fff; background: #2E4E9F; }
.pc-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-face.ini { font: 700 64px/1 "Libre Franklin", sans-serif; color: #fff; }
.pc-words { grid-column: 2 / 6; min-width: 0; }
.pc-words h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 8px; color: #fff; font-size: 72px; line-height: 1.05; }
.pc-words h1 .nm { min-width: 0; text-wrap: balance; }
.pc-off { display: inline-block; font: 700 14px/1 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dome); white-space: nowrap; }
.pc-does { margin-top: 20px; font: 500 24px/1.45 "Libre Franklin", sans-serif; }
/* pronouns, where a member gave them (November 11, 2026): a line of their own straight under the name, small and plain, as
   a well-made profile sets them; what they do keeps its step under it */
.pc-pro { margin-top: 12px; font: 500 18px/1.3 "Libre Franklin", sans-serif; }
.pc-pro + .pc-does { margin-top: 14px; }
/* Open for Work or At Capacity (November 11, 2026): the badge on a line of its own under the name and any pronouns, a step
   larger than on the list as the page's type is; what they do keeps its step under it */
.pc-avail { margin-top: 14px; line-height: 0; }
.pc-avail .avail { vertical-align: 0; font-size: 15px; line-height: 18px; padding: 5px 10px 4px; }
.pc-avail + .pc-does { margin-top: 14px; }
.pc-no { margin-top: 18px; font: 700 15px/1.4 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dome); }
.pa-you { margin-bottom: 24px; font: 600 17px/1.4 "Libre Franklin", sans-serif; }
.pa-you .you { margin: 0 10px 0 0; }
.pa-you a { color: var(--blue); text-underline-offset: 4px; }
.person-a .dp { padding-top: var(--r); }
.pa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
.pa > * { grid-column: 2 / 6; min-width: 0; }
.pa > :first-child { margin-top: 0; }   /* notes off and no links: no row of buttons, and the next block takes its place */
.pa-act { display: flex; flex-wrap: wrap; gap: 12px; }
/* About (November 7, 2026): the page's one body text, under the buttons and before the facts, in the words column */
.pa-about { margin-top: var(--g); max-width: 36em; font: 400 19px/1.55 "Libre Franklin", sans-serif; }
.pa-about p + p { margin-top: 11.5px; }
/* the facts under About as About's paragraphs stand under each other: one of the page's 27 px lines from a baseline to the
   next capitals, so About and the facts read as one column of text under the buttons */
.pa-about + .pa-facts { margin-top: 12px; }
.pa-facts { list-style: none; margin-top: var(--g); font: 400 18px/1.5 "Libre Franklin", sans-serif; }
/* the skills under the facts (November 7, 2026): one line in the facts' type, the next of their lines after the gap the
   facts keep under About */
.pa-skills { margin-top: 12px; max-width: 36em; font: 400 18px/1.5 "Libre Franklin", sans-serif; }
.pa-skills .lbl { font-weight: 600; }
.pa-also { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; margin-top: var(--s); padding-top: 14px; border-top: 1px solid var(--line); }
.pa-also h2 { grid-column: 1; font-size: 24px; line-height: 1.2; color: var(--blue); }
.pa-also ul { grid-column: 2 / 6; margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
.pa-also .allc { grid-column: 2 / 6; }
@media (max-width: 1100px) {
  .pc-in { grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; }
  .pc-words { grid-column: 2; }
  .pc-in > .pc-face { width: min(var(--fw), 130px); }
  .pc-words h1 { font-size: 52px; }
  .pc-does { font-size: 21px; }
  .pc-in > .pc-face { margin-top: 9.1px; }
  .pa, .pa-also { grid-template-columns: minmax(0, 1fr); }
  .pa > *, .pa-also h2, .pa-also ul, .pa-also .allc { grid-column: 1; }
  .pa-also ul { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pc-in { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-top: var(--g); }
  .pc-in > .pc-face { margin-top: 0; }
  .pc-words { grid-column: 1; }
  .pc-in > .pc-face { width: min(var(--fw), 112px); }
  .pc-face.ini { font-size: 44px; }
  .pc-words h1 { font-size: 36px; }
  .pc-does { font-size: 18px; }
  .pc-pro { margin-top: 10px; font-size: 16px; }
  .pa-act .btn { flex: 1 1 100%; text-align: center; }
  .pa-also ul { grid-template-columns: minmax(0, 1fr); }
}

/* what they do and the county: one line with its dot; on a phone the county on a line of its own, no dot left hanging */
.dw { white-space: nowrap; }
@media (max-width: 760px) { .pc-does .sep { display: none; } .pc-does .dw { display: block; white-space: normal; } }