/* Shared by /about-us/ and the pages under it. Palette is the brand one
   (BRAND.md): amethyst page, deep blue panels, teal for lines and secondary
   text, lime for the single accent. Static pages: no script, no web fonts. */
:root {
  --kl-amethyst: #0D0630;
  --kl-deep: #18314F;
  --kl-dusk: #384E77;
  --kl-teal: #8BBEB2;
  --kl-lime: #E6F9AF;
  --text: #e9edf7;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--kl-amethyst); color: var(--text);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--kl-lime); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--kl-lime); outline-offset: 3px; border-radius: 3px; }

/* header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(16px, calc((100% - 880px) / 2));
  border-bottom: 1px solid rgba(139, 190, 178, .22);
}
.logo-img { height: 40px; width: auto; display: block; }
@media (max-width: 600px) { .logo-img { height: 32px; } }
.site-header nav { display: flex; gap: 20px; font-size: 14px; }
.site-header nav a { color: var(--kl-teal); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--kl-lime); }

main { max-width: 880px; margin: 0 auto; padding: 40px 16px 72px; }

/* profile hero */
.hero { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.portrait {
  width: 134px; height: 157px; border-radius: 14px; flex: none;
  border: 1px solid rgba(139, 190, 178, .45);
}
.eyebrow {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kl-teal);
}
h1 { margin: 0; font-size: clamp(32px, 6vw, 46px); line-height: 1.1; color: var(--kl-lime); font-weight: 600; }
.role { margin: 8px 0 0; color: var(--kl-teal); font-size: 17px; }
@media (max-width: 480px) { .hero { flex-direction: column; align-items: flex-start; } }

.intro p { margin: 0 0 14px; max-width: 68ch; }

/* sections */
h2 {
  margin: 44px 0 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kl-teal); font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid rgba(139, 190, 178, .22);
}
h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 20px 22px; border-left: 2px solid rgba(139, 190, 178, .35); }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--kl-lime);
}
.timeline li:last-child { padding-bottom: 4px; }
.org { margin: 2px 0 0; }
.dates { margin: 2px 0 0; font-size: 14px; color: var(--kl-teal); font-variant-numeric: tabular-nums; }

.group { margin: 26px 0 10px; font-size: 16px; color: var(--kl-lime); }
.cites { margin: 0; padding-left: 20px; }
.cites li { margin: 0 0 12px; padding-left: 4px; max-width: 78ch; overflow-wrap: anywhere; }
.cites li::marker { color: var(--kl-teal); }

/* contact details: a line on a profile, and the card on /contact-us/ */
.contact { margin: 10px 0 0; font-size: 15px; }
.contact-card {
  display: block; max-width: 520px; padding: 20px 22px; text-decoration: none;
  background: var(--kl-deep); border: 1px solid rgba(139, 190, 178, .25); border-radius: 14px;
  color: var(--text);
}
.contact-card:hover { border-color: var(--kl-teal); }
.contact-card small {
  display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kl-teal);
}
.contact-card strong {
  display: block; font-size: clamp(17px, 4.6vw, 22px); font-weight: 600;
  color: var(--kl-lime); overflow-wrap: anywhere;
}
.contact-card span { display: block; margin-top: 6px; color: var(--kl-teal); font-size: 15px; }

/* about-us index */
.lede { color: var(--kl-teal); margin: 8px 0 28px; max-width: 60ch; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.person {
  display: flex; gap: 18px; align-items: center; padding: 16px; text-decoration: none;
  background: var(--kl-deep); border: 1px solid rgba(139, 190, 178, .25); border-radius: 14px;
  color: var(--text);
}
.person:hover { border-color: var(--kl-teal); }
.person img { width: 84px; height: 98px; object-fit: cover; border-radius: 10px; flex: none; }
.person strong { display: block; font-size: 18px; color: var(--kl-lime); font-weight: 600; }
.person span { color: var(--kl-teal); font-size: 15px; }

/* footer */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding: 22px max(16px, calc((100% - 880px) / 2));
  border-top: 1px solid rgba(139, 190, 178, .22); font-size: 14px; color: var(--kl-teal);
}
.site-footer a { text-decoration: none; }