/* The founders page (/xx/founders/), alternative A, approved on 28 October 2026 (review/redesign/pages/).
   After the IFPSM leadership page (ifpsm.org/ifpsm-leadership): the people grouped by role, the role printed under each name,
   one card per person on a uniform portrait frame. Here the convenor has the wide first card, the four founding members follow two by two,
   and each card carries the full bio and the LinkedIn link. The closing band is web/pages/closing.css.
   Header, footer, phone survey bar and reveal safety: web/site.css and web/site.js. Colours only from tokens.css. */

.cap-nav a[aria-current="page"] { color: var(--cap-ink); text-decoration: underline; text-decoration-color: var(--cap-turquoise); text-decoration-thickness: 2px; text-underline-offset: 10px; }
.menu-panel .cap-nav a[aria-current="page"] { text-underline-offset: 8px; }

/* Portrait frame: one value sets every portrait, so larger files can replace the current ones and raise it */
.fp { --portrait: 120px; }

/* Page head: label and title on the left, the group lede on the right (the split of the home membership block) */
.fp-head { padding: var(--cap-space-8) 0 var(--cap-space-7); }
.fp-head-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cap-space-5) var(--cap-space-8); align-items: end; }
.fp-kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.fp-kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-turquoise); }
.fp-head h1 { font: var(--cap-text-display); color: var(--cap-ink); margin-top: 20px; text-wrap: balance; }
.fp-lede { font: var(--cap-text-body); color: var(--cap-ink); max-width: 34em; padding-bottom: 4px; text-wrap: pretty; }

/* The people */
.fp-people { padding-bottom: var(--cap-space-8); }
.fp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cap-space-5); }
.fp-item { display: flex; }
.fp-item--lead { grid-column: 1 / -1; }
.fp-card { flex: 1; display: flex; flex-direction: column; background: var(--cap-light); padding: var(--cap-space-6) var(--cap-space-6) var(--cap-space-5); border-top: 2px solid var(--cap-ink-20); }
.fp-photo { width: var(--portrait); height: var(--portrait); flex: none; background: var(--cap-ink-10); overflow: hidden; }
.fp-photo img { width: 100%; height: 100%; object-fit: cover; }
.fp-id { margin-top: var(--cap-space-5); }
.fp-role { display: flex; align-items: center; gap: 8px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-turquoise-deep); }
.fp-role::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--cap-turquoise); }
.fp-name { font: var(--cap-text-h3); color: var(--cap-ink); margin-top: var(--cap-space-2); }
.fp-tag { font: var(--cap-text-small); font-weight: 600; color: var(--cap-slate); margin-top: var(--cap-space-1); }
.fp-body { flex: 1; display: flex; flex-direction: column; margin-top: var(--cap-space-5); padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink-20); }
.fp-bio { font: var(--cap-text-body); color: var(--cap-ink); max-width: 38em; text-wrap: pretty; }
.fp-link { margin-top: auto; padding-top: var(--cap-space-4); }
.fp-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/20px var(--cap-font-sans); }
.fp-link svg { flex: none; }

/* 1024 px and up: the four member cards in two columns, two by two. In each card the portrait sits beside the name and the
   bio runs under both, so the rules under the names line up across each pair */
@media (min-width: 1024px) {
  .fp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-card:not(.fp-card--lead) { display: grid; grid-template-columns: var(--portrait) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 var(--cap-space-6); align-items: start; }
  .fp-card:not(.fp-card--lead) .fp-id { margin-top: 0; padding-top: 2px; align-self: center; }
  .fp-card:not(.fp-card--lead) .fp-body { grid-column: 1 / -1; align-self: stretch; }
}

/* The convenor: the wide first card, with the one cut of this section; portrait, name and bio side by side */
.fp-card--lead { --cap-cut: 20px; clip-path: polygon(0 0, calc(100% - var(--cap-cut)) 0, 100% var(--cap-cut), 100% 100%, 0 100%);
  display: grid; grid-template-columns: var(--portrait) minmax(0, 4fr) minmax(0, 7fr); gap: 0 var(--cap-space-6); align-items: start; border-top-color: var(--cap-turquoise); padding-bottom: var(--cap-space-5); }
.fp-card--lead .fp-id { margin-top: 0; padding-top: 2px; }
.fp-card--lead .fp-body { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--cap-ink-20); padding-left: var(--cap-space-6); align-self: stretch; }
.fp-card--lead .fp-link { padding-top: var(--cap-space-3); }

/* Entry motion: once. The head rises on load, then the convenor's card, then the four cards in turn; each portrait opens upwards
   inside its frame. All done by 1.4 s. Hidden only once the script is running (html.js), and only without reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-b="1"] [data-block]:not(.is-in) .fp-a,
  .js-reveal [data-b="1"] [data-block]:not(.is-in) .fp-card { opacity: 0; }
  [data-b="1"] [data-block].is-in .fp-a { animation: rise 520ms var(--ease-out) both; }
  [data-b="1"] [data-block].is-in .fp-kicker { animation-delay: 0ms; }
  [data-b="1"] [data-block].is-in h1.fp-a { animation-delay: 60ms; }
  [data-b="1"] [data-block].is-in .fp-lede { animation-delay: 140ms; }
  [data-b="1"] .fp-people.is-in .fp-card { animation: rise 560ms var(--ease-out) both; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(1) .fp-card { animation-delay: 220ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(2) .fp-card { animation-delay: 380ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(3) .fp-card { animation-delay: 450ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(4) .fp-card { animation-delay: 520ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(5) .fp-card { animation-delay: 590ms; }
  [data-b="1"] .fp-people.is-in .fp-photo img { animation: portrait-in 700ms var(--ease-out) both; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(1) .fp-photo img { animation-delay: 300ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(2) .fp-photo img { animation-delay: 460ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(3) .fp-photo img { animation-delay: 530ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(4) .fp-photo img { animation-delay: 600ms; }
  [data-b="1"] .fp-people.is-in .fp-item:nth-child(5) .fp-photo img { animation-delay: 670ms; }
  @media (hover: hover) and (pointer: fine) {
    .fp-link svg { transition: transform 160ms var(--ease-out); }
    .fp-link a:hover svg { transform: translate(2px, -2px); }
  }
}
@keyframes portrait-in { from { clip-path: inset(100% 0 0 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }

.f-col li a[aria-current="page"] { text-decoration-thickness: 3px; }

/* 1024 to 1199 px: the same layout, narrower */
@media (max-width: 1199px) {
  .fp-head-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cap-space-5) var(--cap-space-6); }
  .fp-card { padding: var(--cap-space-5) var(--cap-space-5) var(--cap-space-4); }
  .fp-card--lead { grid-template-columns: var(--portrait) minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--cap-space-5); }
  .fp-card--lead .fp-body { padding-left: var(--cap-space-5); }
}

/* Under 1024 px: one card per row, portrait beside the name, the bio under both */
@media (max-width: 1023px) {
  .fp-head-grid { grid-template-columns: 1fr; align-items: start; }
  .fp-lede { max-width: 36em; }
  .fp-list { grid-template-columns: 1fr; gap: var(--cap-space-4); }
  .fp-card, .fp-card--lead { display: grid; grid-template-columns: var(--portrait) minmax(0, 1fr); gap: 0 var(--cap-space-5); align-items: start; }
  .fp-card .fp-id { margin-top: 0; padding-top: 2px; align-self: center; }
  .fp-card .fp-body, .fp-card--lead .fp-body { grid-column: 1 / -1; margin-top: var(--cap-space-5); padding: var(--cap-space-4) 0 0; border-left: 0; border-top: 1px solid var(--cap-ink-20); }
}

/* Phone */
@media (max-width: 767px) {
  .fp { --portrait: 88px; }
  .fp-head { padding: var(--cap-space-6) 0 var(--cap-space-6); }
  .fp-head h1 { margin-top: var(--cap-space-3); }
  .fp-head-grid { gap: var(--cap-space-4); }
  .fp-people { padding-bottom: var(--cap-space-7); }
  .fp-list { gap: var(--cap-space-3); }
  .fp-card, .fp-card--lead { padding: var(--cap-space-5) var(--cap-space-4) var(--cap-space-3); gap: 0 var(--cap-space-4); }
  .fp-card--lead { --cap-cut: 16px; }
  .fp-name { margin-top: var(--cap-space-1); }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cap-button:active, a:hover svg, a:focus-visible svg { transform: none !important; }
}