/* Shared variables/global/components are enqueued by functions.php (the static
   site's @imports of them are dropped here to avoid loading them twice). */

/* ==========================================================================
   About hero (2026 redesign, About.dc.html): breadcrumb, Sora heading with
   the orange-underlined last word, intro, two pill buttons, and the frosted
   "Chapter at a glance" card over soft brand blurs. Side by side above
   1180px; stacked below; phones follow the mobile prototype.
   ========================================================================== */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 96px;
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.about-hero-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

/* The top padding is the prototype's pill above the heading (38px + 26px gap),
   which is not shown: the heading, buttons and card keep the prototype's
   positions. Phones have no pill in the prototype, so none there. */
.about-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-top: 64px;
}

.about-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: wrap;
}

.about-hero-lead {
  max-width: 560px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-xl);
  line-height: 1.6;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.about-hero-actions .pill-button--primary {
  padding: 0 28px;
}

.about-hero :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Chapter at a glance */
.about-glance {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.about-blur {
  position: absolute;
  border-radius: var(--radius-round);
  filter: blur(70px);
  pointer-events: none;
}

.about-blur.is-violet {
  right: 260px;
  top: -40px;
  width: 260px;
  height: 260px;
  background: var(--violet);
  opacity: .5;
}

.about-blur.is-orange {
  right: -20px;
  top: 60px;
  width: 220px;
  height: 220px;
  background: var(--join);
  opacity: .4;
}

.about-blur.is-cyan {
  right: 150px;
  bottom: -50px;
  width: 240px;
  height: 240px;
  background: var(--highlight);
  opacity: .4;
}

.about-glance-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-menu);
}

.about-glance-label {
  margin: 0;
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* "Our place in PMI": a dot map of the world centred on Lebanon's longitude
   (template-parts/about-pmi-map.php): the world's land in faint purple dots (PMI, global), the Middle East & North
   Africa in cyan over a soft glow (PMI MENA, regional), a pulsing purple pin on Lebanon (the Chapter, "You are
   here"), each level labelled on the map; then the same three levels in words as a key, a marker in each level's
   colour. Tablets: the map beside the key; phones: the map above it. */
.about-map {
  position: relative;
  margin: 0 -8px;
}

.about-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--highlight); /* the glow */
}

.about-map-world,
.about-map-mena {
  fill: none;
  stroke-width: 3.1;
  stroke-linecap: round;
}

.about-map-world {
  stroke: var(--purple);
  stroke-opacity: .26;
}

.about-map-mena {
  stroke: var(--highlight);
}

.about-map-pin {
  fill: var(--purple);
  stroke: #fff;
  stroke-width: 2.5;
}

.about-map-pulse {
  fill: var(--purple);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: about-map-pulse 2.6s ease-out infinite;
}

@keyframes about-map-pulse {
  0% { opacity: .45; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}

/* The labels on the map: small frosted chips over their level. */
.about-map-tag {
  position: absolute;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-card);
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* Places on the map (about-pmi-map.php's projection): the global label over the North Atlantic, the regional one
   off West Africa, "You are here" beside the pin (Lebanon: 50% across, 31.8% down). */
.about-map-tag.is-global {
  left: 2%;
  top: 2%;
}

.about-map-tag.is-mena {
  left: 21%;
  top: 47%;
  color: var(--cyan-ink-strong);
}

.about-map-tag.is-here {
  left: calc(50% + 12px);
  top: 31.8%;
  background: var(--purple);
  color: #fff;
  transform: translateY(-50%);
}

/* The key. */
.about-net {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-net-level {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
}

.about-net-level + .about-net-level:not(.is-here) {
  border-top: 1px solid rgba(79, 23, 168, .1);
}

.about-net-marker {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: var(--radius-round);
  background: rgba(79, 23, 168, .28);
}

.about-net-level:nth-child(2) .about-net-marker {
  background: var(--highlight);
}

.about-net-level.is-here .about-net-marker {
  background: var(--purple);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(79, 23, 168, .25);
}

.about-net-level.is-here {
  margin: 6px -14px 0;
  padding: 14px;
  border: 1px solid var(--purple-tint-ui);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .78);
}

/* Title, then its level ("Global", "Regional", "Local · You are here") on the same line; the text below. */
.about-net-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}

.about-net h3 {
  order: 1;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.4;
}

.about-net-kicker {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.about-net-here {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: #fff;
  letter-spacing: .04em;
  text-transform: none;
}

.about-net p {
  order: 3;
  flex-basis: 100%;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}

/* Stacked: text, then the card. */
@media (max-width: 1180px) {
  .about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .about-hero-text {
    max-width: 720px;
  }
}

/* Tablets and small laptops: the card spans the width under the text, the map above the key's three levels side by
   side. */
@media (min-width: 768px) and (max-width: 1180px) {
  .about-glance-card {
    max-width: none;
  }

  .about-map {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .about-net {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
  }

  .about-net-level,
  .about-net-level.is-here {
    margin: 0;
    padding: 14px;
  }

  .about-net-level + .about-net-level:not(.is-here) {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-map-pulse {
    animation: none;
  }
}

/* Phones (mobile prototype). */
@media (max-width: 767px) {
  .about-hero {
    padding: 24px 0 36px;
  }

  .about-hero-inner {
    gap: 18px;
  }

  .about-hero-grid {
    gap: 36px;
  }

  .about-hero-text {
    gap: 18px;
    padding-top: 0;
  }

  .about-hero h1 {
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .about-hero-lead {
    font-size: var(--text-ui-md);
  }

  .about-hero-actions {
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
  }

  /* Every page's hero button size on phones (site-wide uniformity review, 2026-10-29). */
  .about-hero-actions .pill-button {
    height: var(--ds-button-md);
  }

  .about-blur {
    filter: blur(55px);
  }

  .about-blur.is-violet {
    left: -20px;
    right: auto;
    top: 0;
    width: 200px;
    height: 200px;
  }

  .about-blur.is-orange {
    right: -30px;
    top: 60px;
    width: 180px;
    height: 180px;
  }

  .about-blur.is-cyan {
    left: 100px;
    right: auto;
    bottom: 0;
    width: 200px;
    height: 200px;
  }

  .about-glance-card {
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-xl);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }

  /* 12px, not the phones' usual 11px eyebrows (UI/UX review: 12px minimum on this page). */
  .about-glance-label {
    font-size: var(--text-ui-2xs);
  }

  .about-net-level.is-here {
    margin: 6px -12px 0;
    padding: 14px 12px;
  }

  /* The map is small here: only "You are here" on it; the key's markers name the other levels. */
  .about-map-tag.is-global,
  .about-map-tag.is-mena {
    display: none;
  }
}

/* ==========================================================================
   Who we are · Mission · Vision (2026 redesign, About.dc.html): three cards
   (UI/UX review: the bare columns felt light), each an icon in its colour, a
   coloured label, a Sora heading and a paragraph. Stacked on tablets (icon
   on the left) and phones. The section's foot is short: the cards close it,
   and a long gap separated them from the Board (UI/UX review).
   ========================================================================== */
.about-intro {
  padding: 96px 0 24px;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.about-intro-grid {
  width: min(var(--max-wide), calc(100% - 42px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.about-intro-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-md);
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
}

.about-intro-icon {
  display: grid;
  place-items: center;
  width: var(--ds-icon-md);
  height: var(--ds-icon-md);
  margin-bottom: 6px;
  border-radius: var(--ds-radius-sm);
}

.about-intro-icon svg {
  width: 24px;
  height: 24px;
}

.about-intro-item.is-purple .about-intro-icon { background: var(--purple-tint-ui); color: var(--purple); }
.about-intro-item.is-orange .about-intro-icon { background: var(--orange-wash); color: var(--orange-ink); }
.about-intro-item.is-teal .about-intro-icon { background: var(--cyan-wash); color: var(--cyan-ink-strong); }

.about-intro-label {
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-intro-label.is-purple { color: var(--purple); }
.about-intro-label.is-orange { color: var(--orange-ink); }
.about-intro-label.is-teal { color: var(--cyan-ink-strong); }

/* A card title: the site's card heading size (news cards), as the design system's 42px section title is for one
   heading across the page, not three side by side. */
.about-intro h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-story-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.about-intro p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

/* "Who we are": the Chapter's registration, a small line under the text. */
.about-intro .about-intro-note {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-ui-xs);
  line-height: 1.5;
}

/* Tablets: one card a row, the icon on the left of the text. */
@media (max-width: 1000px) {
  .about-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .about-intro-item {
    display: grid;
    grid-template-columns: var(--ds-icon-md) minmax(0, 1fr);
    gap: 12px 24px;
    padding: 28px;
  }

  .about-intro-icon {
    grid-row: 1 / span 5;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .about-intro {
    padding: 40px 0 8px;
  }

  .about-intro-grid {
    gap: 12px;
  }

  .about-intro-item {
    display: flex;
    gap: 10px;
    padding: 22px;
  }

  .about-intro-icon {
    width: var(--ds-icon-sm);
    height: var(--ds-icon-sm);
    margin-bottom: 4px;
  }

  .about-intro-icon svg {
    width: 22px;
    height: 22px;
  }

  /* 12px, not the phones' usual 11px eyebrows (UI/UX review: 12px minimum on this page). */
  .about-intro-label {
    font-size: var(--text-ui-2xs);
  }

  .about-intro p {
    font-size: var(--text-ui);
    line-height: 1.65;
  }

  .about-intro .about-intro-note {
    font-size: var(--text-ui-xs);
  }
}

/* ==========================================================================
   What we do (UI/UX review: the page went straight from the vision to the
   Board): an infographic rather than cards (the intro's cards sit just
   above). A ring in four numbered segments around "PMI Lebanon Chapter",
   and the four areas around it (open text, no boxes), each with its
   segment's number and colour; the title is the link, stretched over the
   item. Desktop: the ring in the middle, two areas on each side. Tablets: the
   ring above, two areas a row. Phones: the ring above, one area a row.
   ========================================================================== */
.about-intro + .about-work {
  margin-top: 40px;
}

.about-work {
  padding: 72px 0;
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.about-work-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* The heading centred over the (symmetrical) infographic. */
.about-work .about-board-head {
  align-self: center;
  align-items: center;
  text-align: center;
}

.about-work .about-board-head h2,
.about-work .about-board-head p {
  text-wrap: balance;
}

.about-work-map {
  position: relative;
}

/* The ring. */
.about-work-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.about-work-hub svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.about-work-arc {
  fill: none;
  stroke-width: 22;
}

.about-work-arc.is-purple { stroke: var(--purple); }
.about-work-arc.is-cyan { stroke: var(--highlight); }
.about-work-arc.is-orange { stroke: var(--join); }
.about-work-arc.is-night { stroke: var(--ds-night); }

.about-work-badge circle {
  fill: #fff;
  stroke-width: 3;
}

.about-work-badge text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.about-work-badge.is-purple circle { stroke: var(--purple); }
.about-work-badge.is-cyan circle { stroke: var(--highlight); }
.about-work-badge.is-orange circle { stroke: var(--join); }
.about-work-badge.is-night circle { stroke: var(--ds-night); }
.about-work-badge.is-purple text { fill: var(--purple); }
.about-work-badge.is-cyan text { fill: var(--cyan-ink-strong); }
.about-work-badge.is-orange text { fill: var(--orange-ink); }
.about-work-badge.is-night text { fill: var(--ds-night); }

.about-work-hub-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 70px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.about-work-hub-text small {
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The four areas: the ring's column in the middle, kept empty. */
.about-work-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
  align-items: center;
  gap: 64px 48px;
  min-height: 340px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-work-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  max-width: 400px;
}

.about-work-item:nth-child(odd) {
  grid-column: 1;
  justify-self: end;
}

.about-work-item:nth-child(even) {
  grid-column: 3;
}

/* Titles in a row line up: every area keeps to the top of its row. */
.about-work-item:nth-child(-n + 2) {
  grid-row: 1;
  align-self: start;
}

.about-work-item:nth-child(n + 3) {
  grid-row: 2;
  align-self: start;
}

/* A fixed column, so every title starts at the same place whatever the digits' widths. */
.about-work-num {
  grid-row: 1 / span 2;
  min-width: 2.4ch;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-ui-tile-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.about-work-item.is-purple .about-work-num { color: var(--purple); }
.about-work-item.is-cyan .about-work-num { color: var(--cyan-ink-strong); }
.about-work-item.is-orange .about-work-num { color: var(--orange-ink); }
.about-work-item.is-night .about-work-num { color: var(--ds-night); }

.about-work-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* The title is the item's one link, stretched over the whole item. */
.about-work-item h3 a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-strong);
  text-decoration: none;
  transition: color .15s ease;
}

.about-work-item h3 a::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: var(--ds-radius-sm);
}

.about-work-item p {
  grid-column: 2;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.about-work-arrow {
  display: inline-flex;
  color: var(--purple);
  transition: transform .15s ease;
}

.about-work-arrow svg {
  width: 18px;
  height: 18px;
}

.about-work-item:hover h3 a,
.about-work-item h3 a:focus-visible {
  color: var(--purple);
}

.about-work-item:hover .about-work-arrow {
  transform: translateX(4px);
}

.about-work-item h3 a:focus-visible {
  outline: none;
}

.about-work-item:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 10px;
  border-radius: var(--ds-radius-sm);
}

/* Tablets and small laptops: the ring above, two areas a row. */
@media (max-width: 1180px) {
  .about-work-hub {
    position: relative;
    left: auto;
    top: auto;
    width: 260px;
    margin: 0 auto 48px;
    transform: none;
  }

  .about-work-hub-text {
    padding: 0 60px;
    font-size: var(--text-ui-lg);
  }

  .about-work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
    min-height: 0;
  }

  .about-work-item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .about-intro + .about-work {
    margin-top: 32px;
  }

  .about-work {
    padding: 40px 0;
  }

  .about-work-inner {
    gap: 24px;
  }

  .about-work-hub {
    width: 220px;
    margin-bottom: 32px;
  }

  .about-work-hub-text {
    padding: 0 52px;
    font-size: var(--text-ui-md);
  }

  .about-work-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .about-work-num {
    font-size: var(--text-ui-tile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-work-arrow {
    transition: none;
  }

  .about-work-item:hover .about-work-arrow {
    transform: none;
  }
}

/* ==========================================================================
   Board of Directors (2026 redesign, About.dc.html): portrait cards, five
   per row (the last row centred), name and title over a dark fade, a
   "President" badge, and LinkedIn / email buttons. Three per row on
   tablets; on phones a list (round photo, name, title, buttons), as in the
   mobile prototype. The whole card opens the profile on the Board page.
   ========================================================================== */
/* The top is shorter than the foot: the intro's cards sit just above (UI/UX review: a long empty gap). */
.about-board {
  padding: 72px 0 96px;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  scroll-margin-top: calc(var(--nav-height) + 8px);
}

.about-board-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.about-board-head {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-board-label {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-board-head h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.about-board-head p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.about-board-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-card {
  position: relative;
  width: calc((100% - 80px) / 5);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--purple-wash-hover);
  box-shadow: var(--shadow-card);
}

.bd-link {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
}

.bd-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .3s ease;
}

.bd-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
}

.bd-card:hover .bd-photo {
  transform: scale(1.03);
}

/* Dark fade under the name: keeps the white text readable on any photo. */
.bd-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 11, 69, 0) 50%, rgba(26, 11, 69, .9) 100%);
}

/* Room for a two-line name and a one-line role (or one and two), so names start at the same height across a row
   whether or not they wrap (UI/UX review); the text keeps to the top of that room. */
.bd-text {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  min-height: calc(var(--text-ui-md) * 1.15 * 2 + 4px + var(--text-ui-xs) * 1.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.bd-name {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.15;
}

/* 13px (UI/UX review: 12px was small on the photo). */
.bd-role {
  color: var(--on-night);
  font-size: var(--text-ui-xs);
  font-weight: 600;
  line-height: 1.35;
}

/* LinkedIn above email, stacked at the card's bottom right; the name and role keep clear of them. */
.bd-card:has(.bd-actions) .bd-text {
  right: 62px; /* 12px inset + 38px button + 12px gap */
}

.bd-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Frosted glass over the dark fade: light, so the name stays the focus; solid white on hover. */
.bd-actions a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bd-actions a:hover {
  border-color: #fff;
  background: #fff;
  color: var(--purple);
}

.bd-actions svg {
  width: 15px;
  height: 15px;
}

.bd-link:focus-visible {
  outline: none;
}

.bd-card:has(.bd-link:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.bd-actions a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .bd-card {
    width: calc((100% - 40px) / 3);
  }
}

/* Phones: a list, as in the mobile prototype. */
@media (max-width: 767px) {
  .about-board {
    padding: 32px 0 40px;
  }

  .about-board-inner {
    gap: 16px;
  }

  .about-board-head {
    gap: 16px;
  }

  /* 12px, not the phones' usual 11px eyebrows (UI/UX review: 12px minimum on this page; also the closing panel's). */
  .about-board-label {
    font-size: var(--text-ui-2xs);
  }

  .about-board-head p {
    font-size: var(--text-ui);
  }

  .about-board-grid {
    display: block;
    border-top: 1px solid var(--line-soft);
  }

  .bd-card {
    width: auto;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    overflow: visible;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .bd-link {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-strong);
  }

  .bd-photo {
    position: static;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-round);
    background: var(--purple-wash-hover);
  }

  .bd-initials {
    font-size: var(--text-ui-md);
  }

  .bd-card:hover .bd-photo {
    transform: none;
  }

  .bd-shade {
    display: none;
  }

  .bd-text {
    position: static;
    min-height: 0;
    gap: 2px;
  }

  .bd-name {
    color: var(--ink-strong);
  }

  .bd-role {
    color: var(--muted-strong);
    font-size: var(--text-ui-xs);
  }

  .bd-actions {
    position: static;
    flex-direction: row;
    flex-shrink: 0;
  }

  .bd-actions a {
    width: 44px;
    height: var(--ds-button-sm);
    border-color: transparent;
    background: var(--purple-wash);
    color: var(--purple);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .bd-actions svg {
    width: 16px;
    height: 16px;
  }

  .bd-card:has(.bd-link:focus-visible) {
    outline-offset: 0;
  }
}

/* ==========================================================================
   Closing panel (UI/UX review): after the Board, the soft violet panel of the
   Community and Learning pages, with Volunteer / Contact the Chapter.
   ========================================================================== */
.about-close {
  padding: 0 0 96px;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.about-close-inner {
  width: min(var(--max-wide), calc(100% - 42px));
}

.about-close-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 64px;
  border-radius: var(--radius-card);
  background: var(--purple-wash-hover);
}

.about-close-panel .about-blur {
  filter: blur(80px);
}

.about-close-panel .about-blur.is-violet {
  left: -40px;
  right: auto;
  top: -60px;
  width: 320px;
  height: 320px;
  opacity: .45;
}

.about-close-panel .about-blur.is-orange {
  right: 120px;
  top: auto;
  bottom: -120px;
  width: 320px;
  height: 320px;
  opacity: .35;
}

.about-close-panel .about-blur.is-cyan {
  right: -60px;
  top: -40px;
  bottom: auto;
}

.about-close-text {
  position: relative;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-close-text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-cta);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.about-close-text p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.about-close-actions {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

.about-close-actions .pill-button {
  justify-content: center;
}

.about-close :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .about-close-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 48px;
  }

  .about-close-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .about-close {
    padding: 0 0 40px;
  }

  .about-close-panel {
    padding: 28px 22px;
    border-radius: var(--radius-xl);
  }

  .about-close-actions {
    flex-direction: column;
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-photo {
    transition: none;
  }

  .bd-card:hover .bd-photo {
    transform: none;
  }
}