/* ==========================================================================
   GEBI — Advisory Board page
   Loaded after css/styles.css (shared palette, header, sections, footer).

   There is no board artwork, so this page reuses the team page's typographic
   rhythm instead of an illustrated hero: cream heading block, then a grid of
   portrait cards. Card photos are placeholders (initials in a soft wash) until
   real portraits land in assets/.
   ========================================================================== */

.ab-page .site-header::before{display:none}

/* ---------- hero ---------- */
/* --t-head clears the fixed bar (≈59px: .2rem padding x2 + 52px bar + 1px border)
   The sky artwork (assets/advisory-clouds.webp) is the page's backdrop: top-anchored
   so the clouds stay behind the words, with a cream fade at the foot so it meets the
   board section below without a seam. */
.ab-hero{
  --t-head:3.8rem;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(22rem,34vw,30rem);
  background:var(--cream);
  padding:calc(var(--t-head) + clamp(2.5rem,6vw,4.5rem)) var(--pad) clamp(1.5rem,3vw,2.5rem);
}
.ab-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/advisory-clouds.webp) center top/cover no-repeat;
}
.ab-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(3rem,9vw,8rem);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,241,234,0),var(--cream));
}
.ab-hero-inner{max-width:var(--max-w);margin:0 auto}
.ab-hero h1{margin:0;font-size:clamp(2.4rem,6vw,4rem);line-height:1.04;letter-spacing:-.02em;max-width:22ch}
.ab-hero .ab-lede{
  margin:clamp(1rem,2vw,1.4rem) 0 0;max-width:56ch;
  font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;color:var(--ink-copy);
}
.ab-hero .ab-lede + .ab-lede{margin-top:.75rem}

/* ---------- board members ---------- */
.ab-board{padding-top:0}
.ab-board h2{max-width:26ch}
.ab-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.ab-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--cream-hi);border:1px solid var(--line);border-radius:26px;
  box-shadow:0 10px 30px rgba(24,48,70,.08);
  transition:transform .22s,box-shadow .22s;
}
.ab-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(24,48,70,.16)}
/* photo placeholder: a monogram in the same watercolour wash the site uses
   elsewhere. Swap the whole .ab-photo block for an <img> once a portrait exists. */
.ab-photo{
  display:grid;place-items:center;aspect-ratio:4/3;
  background:
    radial-gradient(120% 120% at 32% 26%,rgba(255,255,255,.65),rgba(255,255,255,0) 62%),
    linear-gradient(150deg,#dfe9e4,#cfdfe8);
  color:var(--ink-soft);
  font-family:var(--head);font-weight:600;font-size:1.55rem;letter-spacing:.14em;
}
.ab-photo svg{width:62%;height:auto;color:rgba(34,53,73,.28)}
/* real portrait: an <img class="ab-photo-img"> replaces the .ab-photo monogram block.
   Same 4:3 frame as the placeholder; crops from just above centre so faces sit high. */
.ab-photo-img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%;
  background:linear-gradient(150deg,#dfe9e4,#cfdfe8);
}
.ab-body{display:flex;flex-direction:column;flex:1;padding:1.15rem clamp(1rem,1.6vw,1.4rem) 1.35rem}
.ab-name{font-family:var(--head);font-weight:600;font-size:1.18rem;line-height:1.2;color:var(--ink)}
.ab-role{margin-top:.45rem;font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.ab-bio{margin-top:.6rem;font-size:.95rem;line-height:1.55;color:var(--ink-copy)}
/* profile links sit at the foot of the card so cards of different lengths line up */
.ab-links{margin:auto 0 0;padding-top:1rem;font-size:.95rem}
.ab-link{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid transparent}
.ab-link:hover{color:var(--ink);border-bottom-color:currentColor}
.ab-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ab-note{
  margin:clamp(1.5rem,3vw,2rem) 0 0;
  font-size:.92rem;color:var(--ink-soft);max-width:60ch;
}