/* About page: the people as an organisation chart, and the partners led by
   their logos (the partner tiles on Home share the logo box). */

/* ---------------- people: organisation chart ---------------- */
/* An indented list with its lines down the left on phones and on paper (and
   in .v, when the tree is too wide for the page or for the names in its
   boxes); on screens from 761px a tree from the top down.
   The lines are borders of pseudo-elements: --oc-x is where the main line
   runs, --oc-in and --oc-stub the indent of a list and the elbow into each
   box, --oc-y how far down a box the elbow meets it. */
.oc { --oc-line: #7d8bb5; --oc-g: 26px; --oc-x: 23px; --oc-in: 23px; --oc-stub: 16px; --oc-adv: 16px; --oc-w: 240px;
  display: flex; flex-direction: column; align-items: stretch; }
.oc ul { list-style: none; margin: 0; padding: 0; }
.oc-lv { position: relative; }
.oc-lv ~ .oc-lv { margin-top: var(--oc-g); }
.oc-lv ~ .oc-lv::before { content: ""; position: absolute; left: var(--oc-x); top: calc(-1 * var(--oc-g)); height: var(--oc-g); margin-left: -1px; border-left: 2px solid var(--oc-line); }

/* boxes: white, a navy rule along the top, the name in bold, the role beneath */
.oc-body, .oc-p, .oc-u { background: var(--paper); border: 1px solid #e0dacb; border-radius: 10px; box-shadow: inset 0 3px 0 var(--navy), 0 1px 2px rgba(20, 26, 46, .05); }
.oc-body { padding: 16px 20px 14px; }
.oc-body h3, .oc-h { font-size: 19px; color: var(--navy); }
.oc-body p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.oc-cttee, .oc-advs { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: inset 0 4px 0 var(--navy); }
.oc-h { margin-bottom: 12px; }
.oc-chair { margin-bottom: 10px; }
.oc-members, .oc-advl { display: grid; gap: 10px; }
/* an adviser's box never grows past the panel for a long name: the name wraps */
.oc-advl { grid-template-columns: minmax(0, 1fr); }
/* The members sit in even, centred rows of equal boxes, at every width and
   for any number (about.js, fitMembers): it sets two tracks per box in the
   longest row (--tracks) and their width (--half), and starts a shorter row
   in by half a box for each box it lacks. Boxes stay between --box-min and
   --box-max wide; until it runs, one box to a row. The span is on the end
   line, so a row's first box keeps it when about.js sets where it starts. */
.oc-members { --box-min: 186; --box-max: 9999; grid-template-columns: repeat(var(--tracks, 2), minmax(0, var(--half, 1fr))); justify-content: center; }
.oc-members > li { display: flex; grid-column-end: span 2; }
.oc-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #d6ccb4; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.oc-p { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 14px 12px; color: var(--ink); text-align: left; font: inherit; }
button.oc-p { cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
button.oc-p:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--navy), var(--shadow); }
/* a fixed track, so the photo's 100% is the circle: an auto one would grow
   to the photo's own height and show only its top (the same for the logo box) */
.oc-ph { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: linear-gradient(135deg, var(--navy), var(--olive2)); color: #fff; font: 800 16px/1 var(--fd); }
.oc-ph img { width: 100%; height: 100%; object-fit: cover; }
.oc-t { display: grid; min-width: 0; padding-top: 1px; }
.oc-t b { font: 700 16.5px/1.25 var(--fd); color: var(--navy); }
/* a word too long for its box even with the titles untied (about.js, fitNames) */
.oc-t.brk { overflow-wrap: anywhere; }
.oc-t small { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.oc-flag { margin-bottom: 1px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--olive2); }
/* spacing breaks up Bangla letters */
:lang(bn) .oc-flag { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.oc-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--navy2); }
/* people further down hang in narrower lists: a smaller face leaves the name room */
.oc-col .oc-ph { width: 38px; height: 38px; font-size: 14.5px; }
/* the Chair and the Executive Director lead their parts: a little larger, a gold rule */
.oc-lead { padding: 15px 18px 14px; box-shadow: inset 0 4px 0 var(--gold), 0 1px 2px rgba(20, 26, 46, .05); }
button.oc-lead:hover { box-shadow: inset 0 4px 0 var(--gold), var(--shadow); }
.oc-lead .oc-ph { width: 54px; height: 54px; font-size: 19px; }
.oc-lead .oc-t b { font-size: 18.5px; }
/* teams and offices: no face, an olive rule */
.oc-u { display: grid; gap: 2px; width: 100%; padding: 11px 14px; box-shadow: inset 0 3px 0 var(--olive), 0 1px 2px rgba(20, 26, 46, .05); }
.oc-u b { font: 700 15.5px/1.25 var(--fd); color: var(--navy); }
.oc-u small { color: var(--muted); font-size: 13.5px; line-height: 1.4; }

/* the lists: a line down the left, an elbow into each box */
.oc :is(.oc-tree, .oc-row, .oc-col) { padding-left: var(--oc-in); }
:is(.oc-tree, .oc-row, .oc-col) > li { --oc-y: 34px; position: relative; padding: 12px 0 0 var(--oc-stub); }
:is(.oc-tree, .oc-row, .oc-col) > li.u { --oc-y: 22px; }
:is(.oc-tree, .oc-row, .oc-col) > li.lead { --oc-y: 42px; }
:is(.oc-tree, .oc-row, .oc-col) > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin-left: -1px; border-left: 2px solid var(--oc-line); }
:is(.oc-tree, .oc-row, .oc-col) > li:last-child::before { bottom: auto; height: calc(12px + var(--oc-y)); }
:is(.oc-tree, .oc-row, .oc-col) > li::after { content: ""; position: absolute; left: 0; top: calc(12px + var(--oc-y)); width: var(--oc-stub); margin-top: -1px; border-top: 2px solid var(--oc-line); }
:is(.oc-row, .oc-col) > li.adv::after { border-top-style: dashed; }
.oc .oc-tree.solo { padding-left: 0; }
.oc-tree.solo > li { padding: 0; }
.oc-tree.solo > li::before, .oc-tree.solo > li::after { display: none; }
/* advisers: beside the main line, joined to it by a dashed line */
.oc-side { padding-left: calc(var(--oc-x) + var(--oc-adv)); }
.oc-side::after { content: ""; position: absolute; left: var(--oc-x); top: 0; bottom: calc(-1 * var(--oc-g)); margin-left: -1px; border-left: 2px solid var(--oc-line); }
.oc-side:last-child::after { bottom: auto; height: 30px; }
.oc-advs { position: relative; }
.oc-advs::before { content: ""; position: absolute; right: 100%; top: 28px; width: var(--oc-adv); margin-right: 1px; border-top: 2px dashed var(--oc-line); }

/* the tree: the top two rows spread sideways, each box hanging from a bar.
   Screens only: printing matches widths against the paper, and the tree
   fitted to the screen would be cut at the page's edges, so paper gets the
   list, which always fits. */
@media screen and (min-width: 761px) {
  .oc.v { max-width: 760px; margin-inline: auto; }
  .oc:not(.v) { --oc-x: 50%; --oc-in: 18px; --oc-stub: 14px; --oc-adv: 40px; align-items: center; }
  .oc:not(.v) .oc-body { width: min(100%, 580px); text-align: center; }
  .oc:not(.v) .oc-cttee { width: min(100%, 1080px); padding: 20px 22px 18px; }
  .oc:not(.v) .oc-cttee > .oc-h, .oc:not(.v) .oc-note { text-align: center; }
  .oc:not(.v) .oc-chair { display: flex; justify-content: center; margin-bottom: 14px; }
  .oc:not(.v) .oc-chair .oc-p { width: min(100%, 340px); }
  .oc:not(.v) .oc-members { --box-max: 250; gap: 12px; }
  .oc:not(.v) .oc-side { align-self: stretch; }
  .oc:not(.v) .oc-advs { width: min(100%, 290px); }
  .oc:not(.v) .oc-tree, .oc:not(.v) .oc-row { display: flex; justify-content: center; padding-left: 0; }
  /* the Executive Director alone at the top needs no room for lines either
     side, so the row below may use the page's full width */
  .oc:not(.v) .oc-tree.solo > li { padding-inline: 0; }
  .oc:not(.v) .oc-row { position: relative; padding-top: var(--oc-g); }
  .oc:not(.v) .oc-row::before { content: ""; position: absolute; left: 50%; top: 0; height: var(--oc-g); margin-left: -1px; border-left: 2px solid var(--oc-line); }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li { display: flex; flex-direction: column; align-items: center; padding: var(--oc-g) 9px 0; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li::before, .oc:not(.v) :is(.oc-tree, .oc-row) > li::after { top: 0; bottom: auto; width: 50%; height: var(--oc-g); margin: 0; border: 0 solid var(--oc-line); border-top-width: 2px; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li::before { left: 0; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li::after { left: 50%; margin-left: -1px; border-left-width: 2px; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li:first-child::before, .oc:not(.v) :is(.oc-tree, .oc-row) > li:last-child::after { border-top-width: 0; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li:only-child { padding-top: 0; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li:only-child::before, .oc:not(.v) :is(.oc-tree, .oc-row) > li:only-child::after { display: none; }
  .oc:not(.v) .oc-row > li.adv::after { border-top-style: solid; border-left-style: dashed; }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li > :is(.oc-p, .oc-u, .oc-col) { width: var(--oc-w); }
  .oc:not(.v) :is(.oc-tree, .oc-row) > li > .oc-lead { width: 300px; }
  /* one alone gets a wider box (its list keeps room); five or six side by
     side get narrower ones, six of them (6 x 198 = 1188px) just inside the
     1200px page; more, a row too wide for a narrower page, or a name too
     long for its box, make about.js draw the whole chart as a list */
  .oc:not(.v) .oc-row:not(:has(> li:nth-child(2))) { --oc-w: 280px; }
  .oc:not(.v) .oc-row:has(> li:nth-child(5)) { --oc-w: 204px; --oc-in: 10px; --oc-stub: 10px; }
  .oc:not(.v) .oc-row:has(> li:nth-child(6)) { --oc-w: 180px; }
}
/* On paper the committee's rows cannot follow about.js: it measured them
   for the screen, and printing lays the page out again at the paper's width
   without a resize. There the boxes fill rows of their own, each row
   centred and every box the same width. */
@media print {
  .oc-members { display: flex; flex-wrap: wrap; justify-content: center; }
  .oc-members > li { flex: 0 1 230px; }
}

/* ---------------- partners: logos and wordmarks ---------------- */
/* The logo as the partner made it, never recoloured, shrunk whole into the
   box (its one track is fixed, so a tall or square logo cannot run out of
   it); until one is added, the partner's short name set as a wordmark in
   the same neutral box. */
.plogo { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: 92px; padding: 12px 14px; border: 1px solid #ebe5d6; border-radius: 12px; background: #f5f3ee; overflow: hidden; }
.plogo.img { background: #fff; }
.plogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pm { --s: 32; font: 800 calc(var(--s) * var(--pm-k, 1) * 1px)/1.12 var(--fd); color: var(--navy); text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.pm.s2 { --s: 26; }
.pm.s3 { --s: 20; }
.pm.s4 { --s: 17; }
/* a narrow box sets the mark smaller still, so no word has to break */
@supports (width: 1cqi) {
  .plogo { container-type: inline-size; }
  .pm { font-size: min(calc(var(--s) * var(--pm-k, 1) * 1px), calc(var(--s) * .65cqi)); }
}
.pm.caps { letter-spacing: .07em; }
.pm.up { letter-spacing: .05em; text-transform: uppercase; }
/* the cards and tiles keep their reveal (.rv) and lift on hover with `translate` */
.pc, .pt { background: var(--paper); border: 1px solid var(--line); text-decoration: none; transition: opacity .9s var(--ease), transform .9s var(--ease), translate .3s var(--ease), box-shadow .3s; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
:is(a.pc, a.pt):hover { translate: 0 -3px; box-shadow: var(--shadow); }
/* About: a card per partner, grouped by kind */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); justify-content: center; gap: 16px; }
.pc { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 18px; border-radius: 16px; color: var(--ink); }
.pc .plogo { margin-bottom: 8px; }
.pc b { padding: 0 6px; font: 700 18px/1.25 var(--fd); color: var(--navy); }
.pc b .ic { color: var(--muted); vertical-align: -1px; }
.pc p { margin: 0; padding: 0 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
/* Home: every partner as a tile, rows centred */
.pt-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pt { --pm-k: .78; flex: 0 0 170px; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; border-radius: 14px; color: var(--navy); text-align: center; }
.pt .plogo { height: 74px; padding: 8px 10px; border-radius: 9px; }
.pt-n { padding: 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
@media (max-width: 640px) {
  /* phones: the logo beside the name, the text across the card below */
  .pc-grid { grid-template-columns: 1fr; gap: 12px; }
  .pc { --pm-k: .58; display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px 12px; padding: 10px 12px 14px 10px; }
  .pc .plogo { height: 64px; margin: 0; padding: 6px 8px; border-radius: 10px; }
  .pc b { padding: 0; font-size: 17px; }
  .pc p { grid-column: 1 / -1; padding: 0 2px; }
  .pt-grid { gap: 10px; }
  .pt { --pm-k: .68; flex-basis: calc(50% - 5px); }
  .pt .plogo { height: 62px; }
  .pt-n { font-size: 13px; }
}
/* from 360px three tiles a row, so every partner fits in fewer screens */
@media (min-width: 360px) and (max-width: 640px) {
  .pt { --pm-k: .64; flex-basis: calc((100% - 21px) / 3); padding: 6px 6px 10px; }
  .pt .plogo { height: 52px; padding: 6px; }
  .pt-n { font-size: 12px; }
}