/* ==========================================================================
   ST. FRANCIS DE SALES PRE-UNIVERSITY COLLEGE
   about.css — About Us page
   --------------------------------------------------------------------------
   Loads AFTER sfs.css and deliberately defines no new colours, fonts or
   type scale: every value comes from the homepage tokens (--sfs-blue,
   --sfs-amber, --sfs-display, --sfs-band, the patterns …) so the two pages
   stay one design system. Classes use the `sfs-ab-` prefix so nothing
   here can leak into, or be overridden by, homepage components.
   ========================================================================== */

:root {
  /* height of the sticky homepage header, so the section nav can dock
     directly beneath it */
  --sfs-ab-nav-h: 89px;
  --sfs-ab-subnav-h: 56px;
}
@media (max-width: 1140px) {
  :root { --sfs-ab-nav-h: 77px; }
}

/* anchors land below both sticky bars, not underneath them */
html { scroll-padding-top: calc(var(--sfs-ab-nav-h) + var(--sfs-ab-subnav-h) + 28px); }

/* current page in the primary menu */
.sfs-menu__link[aria-current="page"] { color: var(--sfs-blue); }
.sfs-menu__link[aria-current="page"]::after { transform: scaleX(1); }

/* shared section heading block */
.sfs-ab-head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 64px); }
.sfs-ab-head .sfs-lead { margin-top: 22px; }
.sfs-ab-head--split {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px 48px; flex-wrap: wrap;
}
.sfs-ab-head--split .sfs-lead { margin-top: 0; max-width: 46ch; }

/* ==========================================================================
   01. HERO
   ========================================================================== */
.sfs-ab-hero {
  position: relative; overflow: hidden;
  background: var(--sfs-navy);
  color: var(--sfs-white);
  min-height: clamp(520px, 72vh, 680px);
  display: flex; align-items: flex-end;
}
.sfs-ab-hero__media { position: absolute; inset: 0; }
.sfs-ab-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
}
/* navy wash, strongest where the copy sits, so text never depends on the
   photograph's own tones for contrast */
.sfs-ab-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 20, 47, .95) 0%, rgba(7, 29, 67, .86) 38%, rgba(7, 29, 67, .42) 72%, rgba(7, 29, 67, .2) 100%),
    linear-gradient(0deg, rgba(4, 20, 47, .7) 0%, rgba(4, 20, 47, 0) 45%);
}
.sfs-ab-hero__pattern {
  position: absolute; inset: 0;
  background-image: var(--pat-grid-dark);
  pointer-events: none;
}
.sfs-ab-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 40px;
}

.sfs-ab-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 30px;
  font-size: 0.865rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.sfs-ab-crumbs a { transition: color .25s var(--sfs-ease); }
.sfs-ab-crumbs a:hover { color: var(--sfs-gold); }
.sfs-ab-crumbs [aria-current] { color: var(--sfs-white); }
.sfs-ab-crumbs__sep { width: 16px; height: 1px; background: rgba(255, 255, 255, .35); }

.sfs-ab-hero h1 { max-width: 15ch; }
.sfs-ab-hero h1 em { font-style: normal; color: var(--sfs-gold); }
.sfs-ab-hero .sfs-lead { margin-top: 26px; max-width: 58ch; }
.sfs-ab-hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }

.sfs-ab-hero__tile {
  width: 290px;
  background: rgba(4, 20, 47, .78);
  background-image: var(--pat-dots-dark);
  border-left: 4px solid var(--sfs-amber);
  padding: 24px 26px;
}
.sfs-ab-hero__tile dt {
  font-size: 0.805rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sfs-gold);
}
.sfs-ab-hero__tile dd {
  margin: 8px 0 0;
  font-family: var(--sfs-display); font-size: 1.22rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.22;
}
.sfs-ab-hero__tile dd + dt { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }

@media (max-width: 900px) {
  .sfs-ab-hero__inner { grid-template-columns: 1fr; }
  .sfs-ab-hero__tile { width: 100%; max-width: 420px; }
  /* copy spans the full width here, so the side-lit desktop wash would put
     the ends of lines over the bright part of the photo — darken evenly */
  .sfs-ab-hero__media::after {
    background: linear-gradient(180deg, rgba(7, 29, 67, .82) 0%, rgba(4, 20, 47, .92) 100%);
  }
}

/* ==========================================================================
   02. SECTION NAVIGATION — docks under the site header
   ========================================================================== */
.sfs-ab-subnav {
  position: sticky; top: var(--sfs-ab-nav-h); z-index: 80;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--sfs-line);
  box-shadow: 0 12px 30px -26px rgba(7, 29, 67, .5);
}
.sfs-ab-subnav__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: var(--sfs-ab-subnav-h);
}
.sfs-ab-subnav__label {
  flex: none;
  font-size: 0.805rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sfs-ink-50);
  padding-right: 28px; border-right: 1px solid var(--sfs-line);
}
.sfs-ab-subnav__list {
  display: flex; align-items: stretch; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sfs-ab-subnav__list::-webkit-scrollbar { display: none; }
.sfs-ab-subnav__link {
  position: relative; flex: none; scroll-snap-align: start;
  display: flex; align-items: center;
  min-height: var(--sfs-ab-subnav-h);
  padding: 0 16px;
  font-size: 0.905rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sfs-ink-70); white-space: nowrap;
  transition: color .25s var(--sfs-ease);
}
.sfs-ab-subnav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px;
  background: var(--sfs-amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--sfs-ease-out);
}
.sfs-ab-subnav__link:hover { color: var(--sfs-blue); }
.sfs-ab-subnav__link[aria-current="true"] { color: var(--sfs-blue); }
.sfs-ab-subnav__link[aria-current="true"]::after { transform: scaleX(1); }

@media (max-width: 760px) {
  .sfs-ab-subnav__label { display: none; }
  .sfs-ab-subnav__inner { padding-inline: 0; }
  .sfs-ab-subnav__list { padding-inline: var(--sfs-bleed); scroll-padding-inline: var(--sfs-bleed); }
  .sfs-ab-subnav__link { padding: 0 12px; font-size: 0.845rem; }
  .sfs-ab-subnav__link::after { left: 12px; right: 12px; }
}

/* ==========================================================================
   03. ABOUT THE INSTITUTION
   ========================================================================== */
.sfs-ab-about { background: var(--sfs-white); }
.sfs-ab-about__grid { row-gap: 56px; align-items: start; }

.sfs-ab-about__aside { grid-column: 1 / span 5; }
@media (min-width: 1081px) {
  .sfs-ab-about__aside {
    position: sticky;
    top: calc(var(--sfs-ab-nav-h) + var(--sfs-ab-subnav-h) + 40px);
  }
}
.sfs-ab-about__aside h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }

/* the archival photograph is only 399px wide — kept at or below that so
   it stays sharp, framed rather than stretched */
.sfs-ab-about__figure { margin-top: 36px; max-width: 400px; }
.sfs-ab-about__figure .sfs-figure { aspect-ratio: 399 / 213; border-radius: 18px; }
.sfs-ab-about__figure figcaption {
  margin-top: 12px; font-size: .925rem; color: var(--sfs-ink-50);
}

.sfs-ab-motto {
  margin-top: 32px; max-width: 400px;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; border-radius: 18px;
  background: var(--sfs-paper);
}
.sfs-ab-motto__mark {
  flex: none; font-family: var(--sfs-display);
  font-size: 2.6rem; font-weight: 800; line-height: .62; color: var(--sfs-amber);
}
.sfs-ab-motto b {
  display: block; font-family: var(--sfs-display);
  font-size: 1.12rem; font-style: italic; font-weight: 700; letter-spacing: -.015em;
  color: var(--sfs-blue);
}
.sfs-ab-motto span {
  display: block; margin-top: 6px;
  font-size: .825rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sfs-ink-50);
}

.sfs-ab-about__body { grid-column: 7 / span 6; }
.sfs-ab-story + .sfs-ab-story {
  margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--sfs-line);
}
.sfs-ab-story__label {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px;
  font-family: var(--sfs-display); font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 700; letter-spacing: -.028em; line-height: 1.1; color: var(--sfs-ink);
}
.sfs-ab-story__label span {
  font-size: 0.945rem; font-weight: 800; letter-spacing: .08em; color: var(--sfs-amber-ink);
}
.sfs-ab-story p { color: var(--sfs-ink-70); line-height: 1.75; }
.sfs-ab-story p + p { margin-top: 18px; }
.sfs-ab-story .sfs-ab-story__lead {
  font-size: var(--sfs-t-lead); line-height: 1.62; color: var(--sfs-ink);
}

.sfs-ab-pullquote {
  margin: 34px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--sfs-amber);
}
.sfs-ab-pullquote p {
  font-family: var(--sfs-display);
  font-size: clamp(1.3rem, 2vw, 1.62rem); font-weight: 600;
  line-height: 1.32; letter-spacing: -.02em; color: var(--sfs-blue) !important;
}

.sfs-ab-facts {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--sfs-line); border-radius: 18px; overflow: hidden;
}
.sfs-ab-facts > div { padding: 24px 26px; }
.sfs-ab-facts > div:nth-child(odd) { border-right: 1px solid var(--sfs-line); }
.sfs-ab-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--sfs-line); }
.sfs-ab-facts dt {
  font-size: 0.805rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sfs-ink-50);
}
.sfs-ab-facts dd {
  margin-top: 10px; font-family: var(--sfs-display);
  font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em;
  color: var(--sfs-blue);
}

@media (max-width: 1080px) {
  .sfs-ab-about__aside, .sfs-ab-about__body { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sfs-ab-facts { grid-template-columns: 1fr; }
  .sfs-ab-facts > div { border-right: 0 !important; border-bottom: 1px solid var(--sfs-line); }
  .sfs-ab-facts > div:last-child { border-bottom: 0; }
}

/* ==========================================================================
   04. VISION, MISSION & CORE VALUES
   ========================================================================== */
.sfs-ab-vision {
  position: relative; overflow: hidden;
  background: var(--sfs-blue);
  background-image: var(--pat-arc), var(--pat-dots-dark);
  background-position: 108% -40%, 0 0;
  background-repeat: no-repeat, repeat;
  color: var(--sfs-white);
}

.sfs-ab-vision__statement {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px 72px; align-items: end;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.sfs-ab-vision__statement h2 {
  font-size: clamp(2.6rem, 5.4vw, 5rem); max-width: 13ch;
}
.sfs-ab-vision__statement h2 span { color: var(--sfs-gold); }
.sfs-ab-vision__statement .sfs-lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

.sfs-ab-vision__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px 72px;
  padding-block: clamp(48px, 6vw, 80px);
}
.sfs-ab-vision__text p { color: rgba(255, 255, 255, .8); line-height: 1.75; }
.sfs-ab-vision__text p + p { margin-top: 18px; }

.sfs-ab-realms { margin-top: 30px; }
/* a full sentence, so set in sentence case — uppercase is kept for short labels */
.sfs-ab-realms__label {
  font-size: 1rem; font-weight: 600; line-height: 1.6;
  color: var(--sfs-white);
}
.sfs-ab-realms ul { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sfs-ab-realms li {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: .925rem; font-weight: 600; color: rgba(255, 255, 255, .88);
}

.sfs-ab-mission {
  align-self: start;
  background: var(--sfs-navy);
  background-image: var(--pat-grid-dark);
  border-top: 4px solid var(--sfs-amber);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 40px);
}
.sfs-ab-mission h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -.028em; margin-bottom: 18px;
}
.sfs-ab-mission p { color: rgba(255, 255, 255, .82); line-height: 1.72; }
.sfs-ab-mission p + p { margin-top: 16px; }

.sfs-ab-values__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 48px; flex-wrap: wrap; margin-bottom: 36px;
}
.sfs-ab-values__head h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -.03em; }
.sfs-ab-values__head p { color: rgba(255, 255, 255, .74); max-width: 42ch; }

.sfs-ab-values {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.sfs-ab-value {
  position: relative;
  padding: 30px 28px 32px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .4s var(--sfs-ease);
}
.sfs-ab-value:hover { background: rgba(255, 255, 255, .05); }
.sfs-ab-value__no {
  display: block;
  font-family: var(--sfs-display); font-size: 2.6rem; font-weight: 800; line-height: .9;
  letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .5);
  transition: color .4s var(--sfs-ease), -webkit-text-stroke-color .4s var(--sfs-ease);
}
.sfs-ab-value:hover .sfs-ab-value__no { color: var(--sfs-amber); -webkit-text-stroke-color: var(--sfs-amber); }
.sfs-ab-value small {
  display: block; margin-top: 22px;
  font-size: .825rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sfs-gold);
}
.sfs-ab-value b {
  display: block; margin-top: 6px;
  font-family: var(--sfs-display); font-size: 1.28rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
}

@media (max-width: 980px) {
  .sfs-ab-vision__statement, .sfs-ab-vision__grid { grid-template-columns: 1fr; }
  .sfs-ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sfs-ab-values { grid-template-columns: 1fr; }
}

/* ==========================================================================
   05. ADMINISTRATION
   ========================================================================== */
.sfs-ab-admin { background: var(--sfs-paper); }

/* heading + intro copy sit beside the Principal spotlight card, rather than
   stacked full-width above it, so the two read as one composition */
.sfs-ab-admin__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.sfs-ab-admin__top .sfs-ab-head { margin-bottom: 0; max-width: 38ch; }
.sfs-ab-admin__intro { margin-top: 18px; }

.sfs-ab-lead-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: rgba(13, 48, 108, .05);
  border: 1px solid var(--sfs-line);
  border-radius: 20px; overflow: hidden;
}
.sfs-ab-lead-card__media { min-height: 260px; border-radius: 0; }
.sfs-ab-lead-card__media img { object-position: 53% 26%; }
/* portrait headshot (rather than the wide campus photo) needs its own crop */
.sfs-ab-lead-card__media--framed img { object-position: 50% 20%; }
.sfs-ab-lead-card__body {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
}
.sfs-ab-role {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.845rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sfs-amber-ink);
}
.sfs-ab-role::before { content: ""; width: 26px; height: 2px; background: var(--sfs-amber); }
.sfs-ab-lead-card h3 {
  margin-top: 14px;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem); letter-spacing: -.028em; line-height: 1.16;
}
.sfs-ab-lead-card__org { margin-top: 10px; color: var(--sfs-ink-70); font-size: .92rem; }
.sfs-ab-lead-card .sfs-link { margin-top: 24px; align-self: flex-start; color: var(--sfs-amber-ink); }

.sfs-ab-people {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.sfs-ab-person {
  display: block;
  background: var(--sfs-white);
  border: 1px solid var(--sfs-line); border-radius: 16px;
  overflow: hidden;
  transition: transform .45s var(--sfs-ease-out), box-shadow .45s var(--sfs-ease), border-color .3s;
}
.sfs-ab-person:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 50px -34px rgba(7, 29, 67, .4);
}
/* photo runs full-bleed across the top of the card, cropped to a landscape
   frame — the source portraits are taller than this, so object-position is
   nudged up towards the face rather than centring the whole bust */
.sfs-ab-person__photo {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--sfs-line-soft);
}
.sfs-ab-person__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
}
.sfs-ab-person__photo--framed img { object-position: 50% 28%; }
/* the Principal's photo is the wide campus/event shot reused from the
   spotlight card, not a headshot — recentre it for this smaller frame */
.sfs-ab-person__photo--wide img { object-position: 53% 26%; }
.sfs-ab-person__body { padding: 18px 20px 22px; }
.sfs-ab-person .sfs-ab-role { font-size: 0.785rem; letter-spacing: .14em; }
.sfs-ab-person .sfs-ab-role::before { width: 18px; }
.sfs-ab-person h3 {
  margin-top: 10px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
}

@media (max-width: 1080px) {
  .sfs-ab-admin__top { grid-template-columns: 1fr; }
  .sfs-ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sfs-ab-lead-card { grid-template-columns: 1fr; }
  .sfs-ab-lead-card__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .sfs-ab-people { grid-template-columns: 1fr; }
}

/* ==========================================================================
   06. FACULTY & STAFF — tabs + compact cards
   ========================================================================== */
.sfs-ab-faculty { background: var(--sfs-white); }

/* wraps on wider screens (all seven groups visible at once); becomes a
   single swipeable row only on phones, where wrapping would stack 4+ lines */
.sfs-ab-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .sfs-ab-tabs {
    flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--sfs-bleed) * -1);
    padding-inline: var(--sfs-bleed);
    scroll-padding-inline: var(--sfs-bleed);
  }
  .sfs-ab-tabs::-webkit-scrollbar { display: none; }
}
.sfs-ab-tab {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--sfs-line); border-radius: 999px;
  background: var(--sfs-white); color: var(--sfs-ink-70);
  font-size: 0.905rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--sfs-ease), color .3s var(--sfs-ease), border-color .3s var(--sfs-ease);
}
.sfs-ab-tab:hover { border-color: var(--sfs-blue-300); color: var(--sfs-blue); }
.sfs-ab-tab__count {
  min-width: 26px; padding: 3px 8px; border-radius: 999px;
  background: var(--sfs-paper); color: var(--sfs-ink-70);
  font-size: .825rem; letter-spacing: 0; text-align: center;
}
.sfs-ab-tab[aria-selected="true"] {
  background: var(--sfs-blue); border-color: var(--sfs-blue); color: var(--sfs-white);
}
.sfs-ab-tab[aria-selected="true"] .sfs-ab-tab__count { background: var(--sfs-amber); color: var(--sfs-navy); }

.sfs-ab-panel__title {
  font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 20px;
}
/* without JS every panel shows, each with its own heading; once the
   tabs take over, only the selected panel is displayed */
.sfs-ab-panel + .sfs-ab-panel { margin-top: 48px; }
.sfs-ab-faculty.is-tabbed .sfs-ab-panel + .sfs-ab-panel { margin-top: 0; }
.sfs-ab-faculty:not(.is-tabbed) .sfs-ab-tabs { display: none; }
.sfs-ab-faculty.is-tabbed .sfs-ab-panel__title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sfs-ab-panel:focus-visible { outline-offset: 8px; }

.sfs-ab-staff {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
/* Fixed at exactly 5 columns on desktop — auto-fill would otherwise pack a
   6th column into the shell's fluid max-width (min(96vw, 1680px)) on wider
   screens. Tablet is pinned to 2 as well, since auto-fill's 260px minimum
   would otherwise fit 3 across at some tablet widths. */
@media (min-width: 421px) and (max-width: 1080px) {
  .sfs-ab-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1081px) {
  .sfs-ab-staff { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* card: full-bleed photo on top (rounded top corners only), plain white
   body below — the same "person card" pattern used in Administration */
.sfs-ab-staff__card {
  display: block;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--sfs-line); background: var(--sfs-white);
  transition: transform .4s var(--sfs-ease-out), box-shadow .4s var(--sfs-ease), border-color .3s;
}
.sfs-ab-staff__card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 18px 40px -30px rgba(7, 29, 67, .5);
}
/* faculty photos are published portrait (100×130) — cropped to a landscape
   frame and nudged toward the top so the face stays the focal point */
.sfs-ab-staff__photo {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--sfs-line-soft);
}
.sfs-ab-staff__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.sfs-ab-staff__body { padding: 16px 18px 20px; }
.sfs-ab-staff__role {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.805rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sfs-amber-ink);
}
.sfs-ab-staff__role::before { content: ""; width: 18px; height: 2px; background: var(--sfs-amber); flex: none; }
.sfs-ab-staff__name {
  margin-top: 10px;
  font-family: var(--sfs-display); font-size: 1rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.3; color: var(--sfs-ink);
}
.sfs-ab-badge {
  display: inline-block; margin-top: 8px;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(244, 165, 28, .16);
  font-size: 0.765rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sfs-amber-ink);
}
.sfs-ab-badge + .sfs-ab-badge { margin-left: 4px; }

@media (max-width: 420px) {
  .sfs-ab-staff { grid-template-columns: 1fr; }
}

/* ==========================================================================
   07. SISTER INSTITUTIONS
   ========================================================================== */
.sfs-ab-sister { background: var(--sfs-paper-warm); }

.sfs-ab-sister__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.sfs-ab-inst {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  background: var(--sfs-white);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--sfs-line);
  transition: transform .45s var(--sfs-ease-out), box-shadow .45s var(--sfs-ease), border-color .3s;
}
.sfs-ab-inst:hover {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 26px 56px -38px rgba(7, 29, 67, .5);
}
/* institution photos are published at 300×200 — 240px wide keeps them sharp */
.sfs-ab-inst__media { aspect-ratio: 3 / 2; height: 100%; border-radius: 0; }
.sfs-ab-inst__body {
  padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.sfs-ab-inst__no {
  font-family: var(--sfs-display); font-size: .925rem; font-weight: 800;
  letter-spacing: .1em; color: var(--sfs-amber-ink);
}
.sfs-ab-inst h3 {
  margin-top: 8px;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.2;
  transition: color .3s var(--sfs-ease);
}
.sfs-ab-inst:hover h3 { color: var(--sfs-blue); }
.sfs-ab-inst__site {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.885rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sfs-blue);
  overflow-wrap: anywhere;
}
.sfs-ab-inst__site svg { flex: none; transition: transform .35s var(--sfs-ease-out); }
.sfs-ab-inst:hover .sfs-ab-inst__site svg { transform: translate(3px, -3px); }

@media (max-width: 1080px) {
  .sfs-ab-sister__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sfs-ab-inst { grid-template-columns: 1fr; }
  .sfs-ab-inst__media { height: auto; }
}

/* ==========================================================================
   08. INSTITUTIONAL CONNECTION
   ========================================================================== */
.sfs-ab-connect { background: var(--sfs-white); }
.sfs-ab-connect .sfs-ab-head { margin-inline: auto; text-align: center; }
.sfs-ab-connect .sfs-eyebrow { justify-content: center; }

.sfs-ab-tree { display: grid; justify-items: center; }
.sfs-ab-node {
  position: relative; text-align: center;
  padding: 20px 28px; border-radius: 18px;
  border: 1px solid var(--sfs-line); background: var(--sfs-white);
  max-width: 520px;
}
.sfs-ab-node small {
  display: block;
  font-size: 0.785rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sfs-ink-50);
}
.sfs-ab-node b {
  display: block; margin-top: 6px;
  font-family: var(--sfs-display); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.018em; line-height: 1.25; color: var(--sfs-ink);
}
.sfs-ab-node--college {
  background: var(--sfs-blue); background-image: var(--pat-dots-dark);
  border-color: var(--sfs-blue); color: var(--sfs-white);
  padding: 26px 36px;
}
.sfs-ab-node--college small { color: var(--sfs-gold); }
.sfs-ab-node--college b { color: var(--sfs-white); font-size: 1.35rem; }

/* vertical connector between tiers */
.sfs-ab-tree__stem {
  width: 2px; height: 44px;
  background: repeating-linear-gradient(180deg, var(--sfs-amber) 0 6px, transparent 6px 11px);
}

.sfs-ab-tree__branch { position: relative; width: 100%; padding-top: 28px; }
/* the horizontal line must start and end exactly at the first and last
   leaf centres: half a column in from each side, where a column is the
   track width minus the five 14px gaps, divided by six */
.sfs-ab-tree__branch::before {
  content: ""; position: absolute; top: 0;
  left: calc((100% - 70px) / 12); right: calc((100% - 70px) / 12);
  height: 2px; background: var(--sfs-line);
}
.sfs-ab-tree__leaves {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
.sfs-ab-tree__leaves li { position: relative; }
.sfs-ab-tree__leaves li::before {
  content: ""; position: absolute; left: 50%; top: -28px;
  width: 2px; height: 28px; background: var(--sfs-line);
}
.sfs-ab-tree__leaves a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; min-height: 84px;
  padding: 16px 12px; border-radius: 14px;
  background: var(--sfs-paper);
  font-family: var(--sfs-display); font-size: .95rem; font-weight: 700;
  letter-spacing: -.012em; line-height: 1.25; color: var(--sfs-ink);
  transition: background-color .3s var(--sfs-ease), color .3s var(--sfs-ease), transform .4s var(--sfs-ease-out);
}
.sfs-ab-tree__leaves a:hover { background: var(--sfs-blue); color: var(--sfs-white); transform: translateY(-3px); }
.sfs-ab-tree__caption {
  margin-top: 18px; text-align: center;
  font-size: .825rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sfs-ink-50);
}

@media (max-width: 980px) {
  .sfs-ab-tree__leaves { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .sfs-ab-tree__branch { padding-top: 0; }
  .sfs-ab-tree__branch::before, .sfs-ab-tree__leaves li::before { display: none; }
}
@media (max-width: 560px) {
  .sfs-ab-tree__leaves { grid-template-columns: 1fr 1fr; }
  .sfs-ab-node, .sfs-ab-node--college { padding: 18px 20px; }
}