/* ==========================================================================
   Who we are, experts, offices, partner and procurement
   --------------------------------------------------------------------------
   Document pages. Type, rules and tables — no photography beyond the two
   leadership portraits, because the only other people-and-place images in the
   library are stock landmarks captioned as offices.
   ========================================================================== */

.fame-twocol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: var(--s-8);
}

.fame-twocol--wide { grid-template-columns: 1.35fr 1fr; }

.fame-twocol h2 {
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--t-h3);
  letter-spacing: var(--tr-head);
}

/* A stated gap, or a note about the record. Never styled as body copy — the
   reader has to be able to tell the difference between what FAME claims and
   what this build is saying about the state of the claim. */
.fame-note {
  max-width: 88ch;
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.fame-note + .fame-note { margin-top: var(--s-3); padding-top: 0; border-top: 0; }

/* --------------------------------------------------------------------------
   Corporate registrations

   Two jurisdictions, two legal names, two numbers. Set as a definition list
   rather than a paragraph because a bid evaluator reads this to copy a name
   into a registry search, and a name buried mid-sentence is harder to lift
   cleanly than one on its own line.
   -------------------------------------------------------------------------- */
.fame-reglist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0 0;
  padding: 0;
}

.fame-reglist__item {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.fame-reglist dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.fame-reglist dd {
  margin: var(--s-3) 0 0;
}

.fame-reglist dd > * {
  display: block;
}

.fame-reglist dd b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.fame-reglist dd span {
  margin-top: var(--s-2);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* The number is the thing being copied, so it gets the data face and enough
   contrast to read as a value rather than as more prose. */
.fame-reglist dd .fame-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   People
   -------------------------------------------------------------------------- */

.fame-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-person {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.fame-person__photo {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: center top;
}

.fame-person__photo--large {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: var(--s-4);
}

.fame-person__name {
  margin: 0 0 var(--s-1);
  font-size: var(--t-h4);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-head);
}

.fame-person__name a { color: inherit; text-decoration: none; }
.fame-person__name a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; }

.fame-person__role {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.fame-person__quals {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent-text);
}

/* No photograph supplied. A monogram on the brand gradient, sized and cropped
   exactly like a portrait so the grid does not develop a hole where one person
   is missing an image. */
.fame-person__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand);
  color: var(--paper);
  font-size: 26px;
  font-weight: var(--w-bold);
  letter-spacing: .02em;
}

/* Once the script has run the whole card is a hit target and the heading is
   the control. Before it runs the card is static and the summary is visible,
   so none of this applies — which is the point.

   Keyed to .fame-person--interactive, which the script sets per card, not to
   the list. Six of the nine governance records have no biography, so they get
   no dialog; keying the hover lift and the pointer cursor to the list would
   have promised those six an interaction that never arrives. */
.fame-person--interactive {
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fame-person--interactive:hover {
  border-color: var(--indigo-300);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.fame-person--interactive:focus-within {
  border-color: var(--accent);
  box-shadow: var(--sh-md);
}

.fame-person__trigger {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* The card carries the visible focus ring, so the button inside it does not
   draw a second one on top of the first. */
.fame-person--interactive:focus-within .fame-person__trigger { outline: none; }

.fame-person__bio {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}

/* A read-more cue, added only when the summary has actually been collapsed
   into the dialog. Printed with content so it cannot appear in the no-JS
   rendering, where the summary is already on the page. */
.fame-person--interactive .fame-person__body::after {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  content: "Read full role →";
}

/* --------------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------------
   Native <dialog>. The focus trap, the inert backdrop, Escape-to-close and the
   top layer all come with the element; a div pretending to be a dialog has to
   reimplement four things and usually gets the trap wrong.
   -------------------------------------------------------------------------- */

.fame-modal {
  width: min(720px, calc(100vw - 2 * var(--s-5)));
  max-height: min(88vh, 760px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.fame-modal::backdrop {
  background: rgba(14, 16, 48, .62);

  /* Kept modest. A heavy blur on a full-viewport backdrop is expensive on a
     phone and this dialog can be opened repeatedly. */
  backdrop-filter: blur(3px);
}

.fame-modal__inner {
  display: grid;
  grid-template-columns: 232px 1fr;
  max-height: inherit;
}

.fame-modal__media {
  position: relative;
  background: var(--mist);
}

/*
 * Two layouts, two different jobs for the photograph.
 *
 * Beside the biography the column is a panel, and a panel with a short frame in
 * it and tinted ground below reads as something that failed to load rather than
 * as a design. So here the photograph fills the column edge to edge, which is
 * FAME's own call on how the dialog should look at this width.
 *
 * Filling a 232px column means cropping, because the frames on file run from
 * 0.68 to 1.53 and no single column suits all of them. The column is taller
 * than it is wide, so for all but the tallest frames the crop comes off the
 * sides, evenly, and takes background rather than face — the landscape
 * photograph loses 54% of its width and still reads as a portrait. Where a
 * frame is taller than the column instead, object-position holds the top so
 * what goes is the bottom. The phone layout below shows every frame whole —
 * there the picture is the first thing on the screen rather than one column of
 * two, and cutting it was what FAME reported from the live site.
 */
.fame-modal__media img,
.fame-modal__media .fame-person__monogram {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  font-size: 54px;
}

.fame-modal__body {
  padding: var(--s-7) var(--s-6) var(--s-6);
  overflow-y: auto;
}

.fame-modal__name {
  margin: 0 0 var(--s-1);
  font-size: var(--t-h3);
  letter-spacing: var(--tr-head);
}

.fame-modal__role {
  margin: 0;
  font-size: var(--t-body);
  color: var(--muted);
}

.fame-modal__quals {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent-text);
}

.fame-modal__bio {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: var(--lh-long);
  color: var(--ink);
}

.fame-modal__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;

  /* 44px, because this is the control a thumb reaches for first. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.fame-modal__close:hover { border-color: var(--accent); color: var(--accent-text); }

.fame-modal__inner { position: relative; }

@media (max-width: 620px) {
  /*
   * On a phone the whole panel scrolls, photograph and all.
   *
   * Stacked, the two rows are sized by their content, so .fame-modal__body
   * never received a height to be bounded by and its overflow-y: auto was a
   * scrollbar on a box that was already as tall as its text. The biography ran
   * past the bottom of the dialog, which clips, and the last lines could not be
   * reached by any gesture — worse after the portrait fix, because a taller
   * photograph pushed more of the text out.
   *
   * Moving the scroll up to the panel is also the better reading of it: on a
   * phone the picture scrolling away as the biography begins is what the
   * gesture is expected to do, where a photograph pinned above a 30vh window of
   * text is not.
   */
  .fame-modal__inner {
    grid-template-columns: 1fr;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* The close button anchors to the dialog instead, so it stays put rather
       than scrolling away with the photograph. */
    position: static;
  }

  .fame-modal__body { overflow-y: visible; }

  /*
   * The photograph sits at its own ratio, and nothing is cropped.
   *
   * This box used to be forced to 16:10 with object-fit: cover. The source is a
   * 1:1 crop, so the box showed 62% of it — and that crop had already taken a
   * fifth off the original. Between them they threw away half of every
   * portrait and cut each person off at the chest, which is what FAME saw on
   * the live site.
   *
   * height: auto with the intrinsic width and height on the tag means the
   * element is exactly the shape of the image. The portraits on file run from
   * 0.68 to 1.53, so a single fixed ratio could only ever suit one of them.
   */
  .fame-modal__media img {
    min-height: 0;
    aspect-ratio: auto;
    width: 100%;
    height: auto;

    /*
     * A ceiling for the tallest frame, so the name and role stay on screen
     * without scrolling. When it bites, contain letterboxes against the mist
     * ground rather than cropping — the whole point here is that nothing is
     * cut, and a visible margin is the honest way to run out of room.
     */
    max-height: 58vh;
    object-fit: contain;
  }

  /* The monogram is a drawn block, not a photograph — it has no frame to
     preserve and needs a shape of its own. */
  .fame-modal__media .fame-person__monogram {
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .fame-modal__body { padding: var(--s-5) var(--s-5) var(--s-6); }
}

/* --------------------------------------------------------------------------
   Institution list — the advisory panel
   -------------------------------------------------------------------------- */

.fame-instlist {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--s-7);
  border-top: 1px solid var(--line);
}

.fame-instlist li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   International Advisory Panel — roster
   --------------------------------------------------------------------------
   Not staff cards. The panel is external review, and giving its members the
   same treatment as FAME's own directors would blur the one distinction the
   page exists to draw. So: no portraits, a numbered index, and the country
   carried on every entry as the substantive claim.
   -------------------------------------------------------------------------- */

/* Separate cards, not cells in a hairline grid.
   The grid version put sixteen entries behind one flat rule and read as a
   spreadsheet; individual cards with their own ground and a coloured index give
   each member a presence, which is the point of naming them at all. */
.fame-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-panelist {
  position: relative;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* A brand rule down the leading edge, so the card has colour on it before any
   text is read. Drawn as a pseudo-element rather than a border so the card's
   own border stays a single hairline all the way round. */
.fame-panelist::before {
  position: absolute;
  top: var(--s-5);
  bottom: var(--s-5);
  left: -1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  content: "";
}

.fame-panelist:hover {
  border-color: var(--brand-300);
  box-shadow: 0 14px 30px -22px rgba(11, 61, 76, .55);
  transform: translateY(-2px);
}

.fame-section--ink .fame-panelist,
.fame-pagehero .fame-panelist {
  background: var(--ink-2);
  border-color: var(--border-hair);
}

/* The index in a filled chip rather than as loose type: it is the only element
   on the card that repeats sixteen times, so it does the counting visually. */
.fame-panelist__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  margin-bottom: var(--s-3);
  padding-inline: 6px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

.fame-section--ink .fame-panelist__index {
  background: rgba(0, 169, 206, .18);
  color: var(--brand-300);
}

/* Full ink, not the muted ramp. These are the sixteen names the section exists
   to publish and they were being set two steps quieter than the heading above
   them. */
.fame-panelist__name {
  margin: 0 0 var(--s-2);
  font-size: 16.5px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-head);
  line-height: 1.25;
  color: var(--ink);
}

.fame-section--ink .fame-panelist__name { color: var(--on-dark); }

.fame-panelist__title {
  margin: 0 0 4px;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--muted);
}

/* The institution is the checkable fact on the entry — the thing a reader
   looks up — so it carries the brand colour and full weight. */
.fame-panelist__inst {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--brand-700);
}

.fame-section--ink .fame-panelist__inst { color: var(--brand-300); }

/* A filled chip, not an outline. The country is the claim the section makes —
   review from outside the country the work is done in — and a hairline pill in
   muted grey was the quietest thing on the card. */
.fame-panelist__country {
  display: inline-block;
  margin: var(--s-4) 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.fame-section--ink .fame-panelist__country {
  background: rgba(255, 255, 255, .1);
  color: var(--on-dark);
}

.fame-panelgroup + .fame-panelgroup { margin-top: var(--s-7); }

.fame-panelgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
}

.fame-panelgroup__country {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-head);
}

.fame-panelgroup__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Count bar — a figure per country, in the page hero
   -------------------------------------------------------------------------- */

.fame-countbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin: var(--s-6) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--border-hair);
  list-style: none;
}

.fame-countbar__value {
  display: block;
  font-size: 30px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-head);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fame-countbar__label {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Jump strip — in-page navigation for a long roster page
   -------------------------------------------------------------------------- */

.fame-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.fame-jumps__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* touch target, not a decorative minimum */
  padding: 0 var(--s-4);
  border: 1px solid var(--border-hair);
  border-radius: 999px;
  font-size: var(--t-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, background-color .16s ease;
}

.fame-jumps__link:hover,
.fame-jumps__link:focus-visible {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
   Section furniture used by the roster pages
   -------------------------------------------------------------------------- */

.fame-sechead__blurb {
  max-width: 68ch;
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--muted);
}

.fame-section--tight { padding-block: var(--s-6); }
.fame-section__more  { margin: var(--s-6) 0 0; }

/* --------------------------------------------------------------------------
   Office and procurement tables
   -------------------------------------------------------------------------- */

.fame-offices td,
.fame-pack td { vertical-align: top; }

.fame-pack .fame-db__title { text-decoration: none; }
.fame-pack .fame-db__title:hover { text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 1040px) {
  .fame-twocol,
  .fame-twocol--wide { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 768px) {
  .fame-instlist { columns: 1; }
  .fame-people { grid-template-columns: 1fr; }

  /* One panellist per row. The 258px minimum would otherwise put two cramped
     columns on a 390px screen and break the institution names mid-word. */
  .fame-panel { grid-template-columns: 1fr; }

  .fame-countbar { gap: var(--s-5); }
  .fame-countbar__value { font-size: 25px; }

  .fame-panelgroup__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
  }

  /* Same reflow the assignment table uses: each row becomes a stacked record
     rather than a squashed four-column grid. */
  .fame-offices thead,
  .fame-pack thead { display: none; }

  .fame-offices tr,
  .fame-pack tr {
    display: block;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
  }

  .fame-offices td,
  .fame-pack td {
    display: block;
    width: auto !important;
    padding: 3px 0;
    border: 0;
  }

  .fame-offices td::before,
  .fame-pack td::before {
    display: block;
    margin-bottom: 2px;
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ==========================================================================
   Contact
   --------------------------------------------------------------------------
   Addresses on the left, one form on the right. The addresses are the half a
   procurement officer came for and are never behind a fold or a control.
   ========================================================================== */

.fame-contact {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-8);
}

.fame-contact__aside { display: grid; gap: var(--s-4); }

.fame-contactcard {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);

  /* A brand rule down the leading edge, the same device the advisory panel
     cards use, so the two read as the same family of object. */
  border-left: 3px solid var(--brand-500);
}

/* The Canadian entity is a second place of business, not a lesser one — a
   different colour rather than a quieter treatment. */
.fame-contactcard--alt { border-left-color: var(--brand-700); }

.fame-contactcard__address {
  margin: var(--s-3) 0 0;
  font-style: normal;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink);
}

.fame-contactcard__address strong {
  display: block;
  margin-bottom: 3px;
  font-weight: var(--w-bold);
}

.fame-contactcard__rows {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
}

.fame-contactcard__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 5px 0;
}

.fame-contactcard__rows dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.fame-contactcard__rows dd {
  margin: 0;
  font-size: var(--t-sm);
  text-align: right;
  color: var(--ink);
}

.fame-contact__links {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

/* --------------------------------------------------------------------------
   The contact grid, below the two-column width

   This was missing, and the consequence was not cosmetic: `340px minmax(0,1fr)`
   never collapses on its own, so at 390px the aside took its fixed 340 and the
   form column was computed at 2px — the whole enquiry form was rendered off the
   right edge of the screen and the page scrolled sideways to reach it. On a
   phone the form did not exist.

   Source order is kept rather than reordered with `order`. The address and the
   landline are what a good share of these readers came for, they are two short
   cards, and the form follows immediately after them. Reordering would put the
   tab sequence and the reading sequence out of step to save one flick.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .fame-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}