/* ==========================================================================
   Advisory board, page-scoped styles.
   Everything here resolves to a styles.css token or a step on the 2/4/8
   spacing scale. styles.css is not modified; this sheet only adds the
   masthead grid and one page-scoped color step.
   ========================================================================== */

/* --- Page-scoped darkening, not an accessibility fix ----------------------
   Correcting an earlier note here: the global .eyebrow span value is fine.
   --ink-quiet on --paper computes to 5.27:1, over the 4.5:1 floor, so there
   is no site-wide contrast defect and nothing for the styles.css owner to
   act on. This rule stays because it is a deliberate choice to run the board
   eyebrows darker than the rest of the site, stepping to --ink-soft (9.6:1)
   for weight on this page only. Removing it would change rendered color.   */
.board-main .eyebrow span { color: var(--ink-soft); }

/* --- The grid ------------------------------------------------------------
   Ten cards, one row grammar. Five across at desktop divides ten evenly, so
   no orphan row. Three at tablet, two at phone.                            */
.board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 768px)  { .board-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .board-grid { grid-template-columns: repeat(5, 1fr); } }

/* --- The card ------------------------------------------------------------
   Follows the .acard--editorial precedent: a 1px rule-strong frame inset on
   the white card, holding a band plate. No hover lift and no link, because
   nothing on this page navigates. The card is a record, not a control.     */
.board-card {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.board-shot { padding: 12px 12px 0; }
.board-frame { border: 1px solid var(--rule-strong); padding: 6px; }
.board-plate {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--band);
  overflow: hidden;
}
/* Sources arrive square, portrait, and landscape. A square plate plus cover
   keeps every face at its true proportions; only the crop changes. The
   vertical bias keeps heads inside the frame on portrait sources.          */
.board-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
/* Landscape sources crop on the horizontal, so they take the centre. */
.board-card--landscape .board-plate img { object-position: 50% 40%; }

.board-body {
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.board-disc {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.board-name {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 1024px) { .board-name { font-size: 18px; line-height: 25px; } }

.board-foot {
  margin-top: auto;
  padding-top: 12px;
}
.board-org {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}
.board-country {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}