/* ==========================================================================
   Aproxian ESPA Alumni — frontend.css  (v3)
   Design tokens measured from espa.bg (Salient 15.0.2 + WPBakery, Gilroy).

   Covers every frontend template:
     frontend.php · profile-single.php · story-single.php · account.php
     partials: alumni-map, stories-hub, video-stories-hub, events-hub,
     news-hub, gallery-hub, milestone-timeline, milestone-editor,
     register-form, account-stories, internship-*, story-card,
     video-profile-card, photo-field, filter-field, list-select

   BAND RHYTHM — read this before adding a photo anywhere
   Photographic backgrounds are expensive attention. Exactly TWO sections on
   the main page carry one: the hero and the join CTA. They are the first and
   last things on the page, so they never sit next to each other. Everything
   between them alternates white and warm fills.

   .espa-band--photo exists for a future settings-driven mid-page band. If you
   use it, it must have at least two non-photo bands on either side. Three
   photo bands in a row reads as clutter, which is exactly what v2 got wrong.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.espa-alumni {
  --espa-text:          #484f56;
  --espa-text-soft:     #515151;
  --espa-text-muted:    #888888;

  --espa-accent:        #ed008c;
  --espa-accent-deep:   #bd197a;
  --espa-accent-far:    #5694ff;

  /* warm system — raw overlay colours, applied with opacity */
  --espa-sand:          #f5ecdb;   /* @ .95 over white -> #f6eddd */
  --espa-blush:         #fff0ed;   /* accent veil, .3 – .5 */
  --espa-veil:          .95;

  /* composited equivalents for flat surfaces */
  --espa-warm:          #f6eddd;
  --espa-warm-soft:     #fffaf5;
  --espa-warm-deep:     #faeee4;
  --espa-warm-clay:     #ece1d8;

  --espa-surface:       #ffffff;

  --espa-line:          #eeeeee;
  --espa-line-warm:     #e8dcc9;
  --espa-line-soft:     #f3d3e6;

  --espa-ok:            #28a05a;
  --espa-ok-bg:         #eef8f1;
  --espa-warn:          #a35a1c;
  --espa-warn-bg:       #fdf3ea;
  --espa-err:           #c0392b;
  --espa-err-bg:        #fdeeec;

  --espa-radius:        5px;
  --espa-shadow:        rgba(0, 0, 0, .08) 0 6px 28px;
  --espa-shadow-lift:   rgba(0, 0, 0, .14) 0 10px 34px;
  --espa-shadow-btn:    rgba(237, 0, 140, .26) 0 4px 14px -2px;

  /* motion — both curves measured from the live site */
  --espa-ease:          cubic-bezier(.25, 1, .5, 1);
  --espa-ease-alt:      cubic-bezier(.2, 1, .2, 1);
  --espa-dur:           1.2s;

  --espa-container:     1550px;
  --espa-narrow:        900px;
  --espa-gutter:        40px;
  --espa-band-y:        90px;
  --espa-header-offset: 0px;

  --espa-font: gilroy, "Open Sans", "Segoe UI", Arial, sans-serif;

  font-family: var(--espa-font);
  font-size: 19px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--espa-text);
}

.espa-alumni *,
.espa-alumni *::before,
.espa-alumni *::after { box-sizing: border-box; }

body.espa-alumni-page { background: var(--espa-surface); }


/* ==========================================================================
   2. PRIMITIVES
   ========================================================================== */

.espa-alumni .espa-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--espa-container);
  margin-inline: auto;
  padding-inline: var(--espa-gutter);
}
.espa-alumni .espa-narrow { max-width: var(--espa-narrow); }

.espa-alumni h1, .espa-alumni h2,
.espa-alumni h3, .espa-alumni h4 {
  letter-spacing: normal;
  color: var(--espa-text);
  font-weight: 600;
}
.espa-alumni p { margin: 0 0 16px; }
.espa-alumni p:last-child { margin-bottom: 0; }
.espa-alumni a { color: var(--espa-accent-deep); }

.espa-alumni .espa-kicker {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--espa-accent);
}
.espa-alumni .espa-kicker a { color: inherit; text-decoration: none; }
.espa-alumni .espa-kicker a:hover { text-decoration: underline; }

.espa-alumni .espa-optional,
.espa-alumni .espa-field__hint {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--espa-text-muted);
}


/* ==========================================================================
   3. BAND SYSTEM + RHYTHM
   ========================================================================== */

.espa-alumni .espa-band {
  position: relative;
  isolation: isolate;
  padding-block: var(--espa-band-y);
  background: var(--espa-surface);
}
.espa-alumni .espa-band h2 { margin: 0 0 16px; font-size: 40px; line-height: 54px; }
.espa-alumni .espa-band__lead {
  margin: 0 0 40px;
  max-width: 62ch;
  color: var(--espa-text-soft);
}

/* fills */
.espa-alumni .espa-band--warm { background: var(--espa-warm); }
.espa-alumni .espa-band--soft { background: var(--espa-warm-soft); }
.espa-alumni .espa-band--deep { background: var(--espa-warm-deep); }

/* blush wash — the site's own gradient, warmth without a solid pink band */
.espa-alumni .espa-band--wash {
  background: linear-gradient(90deg, var(--espa-blush) 0%, rgba(255, 255, 255, .001) 100%);
}

/* --- main page rhythm. Photos only at the two ends. --- */
.espa-alumni .espa-about         { background: var(--espa-surface); }
.espa-alumni .espa-mapband       { background: var(--espa-warm); }
.espa-alumni .espa-stories       { background: var(--espa-surface); }
.espa-alumni .espa-video-stories { background: var(--espa-warm-soft); }
.espa-alumni .espa-events        { background: var(--espa-surface); }
.espa-alumni .espa-news          { background: var(--espa-warm-deep); }
.espa-alumni .espa-gallery       { background: var(--espa-surface); }
.espa-alumni .espa-search        { background: var(--espa-warm); }
.espa-alumni .espa-directory     {
  background: linear-gradient(90deg, var(--espa-blush) 0%, rgba(255, 255, 255, .001) 100%);
}

/* sub-page rhythm */
.espa-alumni .espa-profile-hero  { background: var(--espa-warm); }
.espa-alumni .espa-profile-body  { background: var(--espa-surface); }
.espa-alumni .espa-milestones    { background: var(--espa-warm-soft); }
.espa-alumni .espa-story-hero    { background: var(--espa-warm); }
.espa-alumni .espa-story-body    { background: var(--espa-surface); }
.espa-alumni .espa-account       { background: var(--espa-warm-soft); }

/* opt-in photo band — see the header note before using it */
.espa-alumni .espa-band--photo {
  background-color: var(--espa-warm-clay);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.espa-alumni .espa-band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--espa-sand);
  opacity: var(--espa-veil);
}
.espa-alumni .espa-band--veil-blush::before { background: var(--espa-blush); }
.espa-alumni .espa-band--veil-light::before { opacity: .5; }
.espa-alumni .espa-band--veil-sheer::before { opacity: .3; }

/* dark photo band — the join CTA */
.espa-alumni .espa-band--dark,
.espa-alumni .espa-join {
  background-color: #3b3230;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.espa-alumni .espa-join::before,
.espa-alumni .espa-band--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 55%, rgba(0,0,0,.34) 100%);
}
.espa-alumni .espa-join h2,
.espa-alumni .espa-join h3,
.espa-alumni .espa-join .espa-kicker,
.espa-alumni .espa-band--dark h2,
.espa-alumni .espa-band--dark .espa-kicker { color: #fff; }
.espa-alumni .espa-join > .espa-wrap > p { color: rgba(255, 255, 255, .9); max-width: 64ch; }
.espa-alumni .espa-join h2 { max-width: 22ch; }
.espa-alumni .espa-join__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }

/* section intros */
.espa-alumni .espa-stories__intro,
.espa-alumni .espa-video-stories__intro,
.espa-alumni .espa-events__intro,
.espa-alumni .espa-news__intro,
.espa-alumni .espa-gallery__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espa-gutter);
  align-items: end;
  margin-bottom: 34px;
}
.espa-alumni .espa-stories__lead,
.espa-alumni .espa-video-stories__lead,
.espa-alumni .espa-events__lead,
.espa-alumni .espa-news__lead,
.espa-alumni .espa-gallery__lead,
.espa-alumni .espa-mapband__lead {
  margin: 0;
  max-width: 62ch;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-stories__cta,
.espa-alumni .espa-news__cta { justify-self: end; }

.espa-alumni .espa-stories__prompts,
.espa-alumni .espa-events__prompts,
.espa-alumni .espa-gallery__prompts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 0;
  padding: 0;
}
.espa-alumni .espa-stories__prompts li,
.espa-alumni .espa-events__prompts li,
.espa-alumni .espa-gallery__prompts li {
  padding: 4px 14px;
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--espa-line-warm);
  color: var(--espa-text-soft);
  font-size: 15px;
  line-height: 24px;
}


/* ==========================================================================
   4. ENTRANCE ANIMATIONS
   Rebuilt from espa.bg: 1.2s, cubic-bezier(.25,1,.5,1), ~100ms stagger.
   Elements only hide themselves when motion is allowed, so a JS failure or a
   reduced-motion preference can never leave the page blank.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .espa-alumni [data-espa-anim] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--espa-dur) var(--espa-ease),
                transform var(--espa-dur) var(--espa-ease);
    transition-delay: var(--espa-delay, 0ms);
    will-change: opacity, transform;
  }
  .espa-alumni [data-espa-anim="grow"] { transform: scale(.94); }
  .espa-alumni [data-espa-anim="fade"] { transform: none; }
  .espa-alumni [data-espa-anim].is-in { opacity: 1; transform: none; }

  /* line-reveal-by-space */
  .espa-alumni .espa-split { display: inline; }
  .espa-alumni .espa-split__w { display: inline-block; overflow: hidden; vertical-align: bottom; }
  .espa-alumni .espa-split__i {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform var(--espa-dur) var(--espa-ease),
                opacity var(--espa-dur) var(--espa-ease);
    transition-delay: var(--espa-delay, 0ms);
  }
  .espa-alumni .espa-split.is-in .espa-split__i { transform: none; opacity: 1; }

  /* zoom-out-reveal on the two photo bands */
  .espa-alumni .espa-hero__media--image,
  .espa-alumni .espa-band--photo,
  .espa-alumni .espa-join {
    background-size: 116%;
    transition: background-size 1.8s var(--espa-ease-alt);
  }
  .espa-alumni .espa-hero__media--image.is-in,
  .espa-alumni .espa-band--photo.is-in,
  .espa-alumni .espa-join.is-in { background-size: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .espa-alumni *,
  .espa-alumni *::before,
  .espa-alumni *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .espa-alumni .espa-pin__ping { opacity: .2; transform: scale(1.15); }
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.espa-alumni .espa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 33px;          /* filled buttons have no border; this keeps
                                  them the same box size as outlined ones */
  border: 0;
  border-radius: var(--espa-radius);
  font: 500 19px/28px var(--espa-font);
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Salient's m-extra-color-gradient-1. Tight, downward-only shadow —
   a wide blur bleeds out past the left and right edges of a gradient. */
.espa-alumni .espa-btn--primary {
  background: linear-gradient(to right, var(--espa-accent) 0%, var(--espa-accent-far) 100%);
  color: #fff;
  box-shadow: none;
}
.espa-alumni .espa-btn--primary:hover {
  filter: brightness(1.07);
  color: #fff;
  box-shadow: none;
}
.espa-alumni .espa-btn--solid {
  background: var(--espa-accent);
  color: #fff;
  box-shadow: none;
}
.espa-alumni .espa-btn--solid:hover { background: var(--espa-accent-deep); color: #fff; }
.espa-alumni .espa-btn--ghost {
  padding: 14px 32px;
  background: transparent;
  border: 1px solid var(--espa-accent);
  color: var(--espa-accent);
}
.espa-alumni .espa-btn--ghost:hover { background: var(--espa-accent); color: #fff; }

.espa-alumni .espa-hero:has(.espa-hero__media) .espa-btn--ghost,
.espa-alumni .espa-btn--on-dark,
.espa-alumni .espa-join .espa-btn--ghost {
  padding: 14px 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .72);
  color: #fff;
}
.espa-alumni .espa-hero:has(.espa-hero__media) .espa-btn--ghost:hover,
.espa-alumni .espa-btn--on-dark:hover,
.espa-alumni .espa-join .espa-btn--ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  color: #fff;
}
/* the form panel is a white card, so buttons inside it revert */
.espa-alumni .espa-form-panel .espa-btn--ghost {
  border: 1px solid var(--espa-accent);
  color: var(--espa-accent);
}
.espa-alumni .espa-form-panel .espa-btn--ghost:hover { background: var(--espa-accent); color: #fff; }

.espa-alumni .espa-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 0, 140, .32); }


/* ==========================================================================
   6. CHIPS + BADGES + ALERTS
   ========================================================================== */

.espa-alumni .espa-chip {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--espa-line-warm);
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .82);
  color: var(--espa-accent-deep);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.espa-alumni .espa-chip:hover { border-color: var(--espa-accent); background: #fff; }
.espa-alumni .espa-chip.is-active {
  background: var(--espa-accent);
  border-color: var(--espa-accent);
  color: #fff;
  font-weight: 600;
}
.espa-alumni .espa-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 0, 140, .28); }

/* count badge inside a filter chip */
.espa-alumni .espa-chip__count {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(237, 0, 140, .12);
  color: var(--espa-accent-deep);
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  text-align: center;
}
.espa-alumni .espa-chip.is-active .espa-chip__count {
  background: rgba(255, 255, 255, .28);
  color: #fff;
}
/* an album with no photos: visible, but not a dead link */
.espa-alumni .espa-chip--empty {
  opacity: .5;
  cursor: default;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-chip--empty:hover { border-color: var(--espa-line-warm); background: rgba(255, 255, 255, .82); }
.espa-alumni .espa-chip--empty .espa-chip__count { background: rgba(0, 0, 0, .06); color: var(--espa-text-soft); }

.espa-alumni .espa-stories__filters,
.espa-alumni .espa-events__filters,
.espa-alumni .espa-news__filters,
.espa-alumni .espa-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.espa-alumni .espa-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--espa-radius);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  white-space: nowrap;
}
.espa-alumni .espa-badge--mentor     { background: var(--espa-blush); color: var(--espa-accent-deep); }
.espa-alumni .espa-badge--internship { background: #eaf1ff; color: #2f5fbf; }

.espa-alumni .espa-badge-toggle,
.espa-alumni .espa-mentor-opt,
.espa-alumni .espa-internship-opt { display: inline-flex; align-items: center; cursor: pointer; }
.espa-alumni .espa-badge-toggle input,
.espa-alumni .espa-mentor-opt input,
.espa-alumni .espa-internship-opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.espa-alumni .espa-badge-toggle .espa-badge,
.espa-alumni .espa-mentor-opt .espa-badge,
.espa-alumni .espa-internship-opt .espa-badge {
  border: 1px solid transparent;
  padding: 7px 16px;
  font-size: 16px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.espa-alumni .espa-badge-toggle input:checked + .espa-badge,
.espa-alumni .espa-mentor-opt input:checked + .espa-badge,
.espa-alumni .espa-internship-opt input:checked + .espa-badge {
  background: var(--espa-accent);
  border-color: var(--espa-accent);
  color: #fff;
}
.espa-alumni .espa-internship-opt input:checked + .espa-badge--internship {
  background: #2f5fbf;
  border-color: #2f5fbf;
}
.espa-alumni .espa-badge-toggle input:focus-visible + .espa-badge,
.espa-alumni .espa-mentor-opt input:focus-visible + .espa-badge,
.espa-alumni .espa-internship-opt input:focus-visible + .espa-badge {
  box-shadow: 0 0 0 3px rgba(237, 0, 140, .28);
}
.espa-alumni .espa-search__badge-filters { display: flex; flex-wrap: wrap; gap: 10px; }

/* alerts */
.espa-alumni .espa-alert {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--espa-radius);
  font-size: 17px;
  line-height: 26px;
}
.espa-alumni .espa-alert p:last-child { margin: 0; }
.espa-alumni .espa-alert--ok {
  background: var(--espa-ok-bg);
  border-color: rgba(40, 160, 90, .3);
  border-left-color: var(--espa-ok);
  color: #1f6b3e;
}
.espa-alumni .espa-alert--warn {
  background: var(--espa-warn-bg);
  border-color: rgba(163, 90, 28, .25);
  border-left-color: var(--espa-warn);
  color: var(--espa-warn);
}
.espa-alumni .espa-alert--error {
  background: var(--espa-err-bg);
  border-color: rgba(192, 57, 43, .25);
  border-left-color: var(--espa-err);
  color: #8e2b20;
}



/* --- back link -----------------------------------------------------------
   Was a .espa-kicker with an arrow glued on: 15px, uppercase, no underline,
   no hover state — indistinguishable from a section label. Now a real control
   with a hit area, an underline, and an arrow that slides on hover.
   -------------------------------------------------------------------------- */
.espa-alumni .espa-back { margin: 0 0 26px; }
.espa-alumni .espa-back__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--espa-line-warm);
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .7);
  color: var(--espa-accent-deep);
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.espa-alumni .espa-back__link:hover {
  background: #fff;
  border-color: var(--espa-accent);
  color: var(--espa-accent);
}
.espa-alumni .espa-back__arrow {
  display: inline-block;
  font-size: 19px;
  line-height: 1;
  transition: transform .22s var(--espa-ease);
}
.espa-alumni .espa-back__link:hover .espa-back__arrow { transform: translateX(-4px); }
.espa-alumni .espa-back__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 0, 140, .28);
}
@media (prefers-reduced-motion: reduce) {
  .espa-alumni .espa-back__link:hover .espa-back__arrow { transform: none; }
}

/* ==========================================================================
   7. HERO
   Real media elements now: --video, --image, and a veil layer.
   ========================================================================== */

.espa-alumni .espa-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 480px;
  overflow: hidden;
  background: linear-gradient(90deg, #f5ecdb 0%, #fff0ed 100%);
}
.espa-alumni .espa-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.espa-alumni .espa-hero__media--video { object-fit: cover; }
.espa-alumni .espa-hero__media--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.espa-alumni .espa-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.24) 100%);
}
/* white type only when there is actually media behind it */
.espa-alumni .espa-hero:has(.espa-hero__media) .espa-hero__title,
.espa-alumni .espa-hero:has(.espa-hero__media) .espa-hero__subtitle,
.espa-alumni .espa-hero:has(.espa-hero__media) .espa-hero__tagline,
.espa-alumni .espa-hero:has(.espa-hero__media) .espa-kicker { color: #fff; }

.espa-alumni .espa-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 84px;
  max-width: 900px;
}
.espa-alumni .espa-hero__title { margin: 0 0 18px; font-size: 55px; line-height: 55px; font-weight: 600; }
.espa-alumni .espa-hero__subtitle {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-hero__tagline { margin: 0 0 34px; color: var(--espa-text-soft); }
.espa-alumni .espa-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }


/* ==========================================================================
   8. SUB-NAV
   ========================================================================== */

.espa-alumni .espa-subnav {
  position: sticky;
  top: var(--espa-header-offset);
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--espa-line);
}
/*
 * Above the mobile breakpoint the row WRAPS. A horizontal scroller on a
 * pointer device is close to useless — you can see there is more but have no
 * obvious way to reach it — and there is vertical room here for a second line.
 */
.espa-alumni .espa-subnav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;   /* wrapped rows read better centred */
  gap: 4px 6px;
  max-width: var(--espa-container);
  margin-inline: auto;
  padding: 10px var(--espa-gutter);
  scroll-padding-inline: var(--espa-gutter);
}

/* Items must never shrink, or they compress into unreadable slivers instead
   of scrolling. */
.espa-alumni .espa-subnav a { flex: 0 0 auto; }

/*
 * Push the first CTA to the right edge.
 * The previous selector was `.espa-subnav__cta:first-of-type`, which can only
 * match the literal first <a> in the nav — that is "Начало", never a CTA — so
 * it silently did nothing. This matches the first CTA that follows a normal
 * link instead. Only above the breakpoint: inside a horizontally scrolling
 * flex row an auto margin eats the free space and can leave the last items
 * unreachable.
 */
/* Only push the CTA to the far right when the whole row genuinely fits on one
   line. Below that it simply sits at the end of the wrapped row. */
@media (min-width: 1400px) {
  /* one line at this width: links left, CTA pushed to the far right */
  .espa-alumni .espa-subnav__inner { justify-content: flex-start; }
  .espa-alumni .espa-subnav a:not(.espa-subnav__cta) + .espa-subnav__cta { margin-left: auto; }
}

/* Step the type down before letting it wrap. */
@media (max-width: 1399px) {
  .espa-alumni .espa-subnav a { font-size: 17px; line-height: 26px; padding: 7px 13px; }
}
@media (max-width: 1180px) {
  .espa-alumni .espa-subnav a { font-size: 16px; line-height: 24px; padding: 6px 11px; }
}

/* Fade the right edge so it is visible that the row scrolls.
   The fade is masked onto the scroller itself — putting `position: relative`
   on .espa-subnav to hang a pseudo-element off it overrides `position: sticky`
   and the nav stops sticking on mobile. */
/*
 * Phones only. Three or four wrapped rows would eat most of a 390px viewport,
 * so here it stays a single scrolling row — but with a visible magenta
 * scrollbar rather than a fade, so the affordance is real and draggable.
 */
@media (max-width: 768px) {
  .espa-alumni .espa-subnav__inner {
    flex-wrap: nowrap;
    /* centring an overflowing flex row makes the left end unreachable */
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* don't trigger the browser back-swipe */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--espa-accent) rgba(237, 0, 140, .12);
  }
  .espa-alumni .espa-subnav__inner::-webkit-scrollbar { height: 5px; }
  .espa-alumni .espa-subnav__inner::-webkit-scrollbar-track {
    background: rgba(237, 0, 140, .12);
    border-radius: 3px;
  }
  .espa-alumni .espa-subnav__inner::-webkit-scrollbar-thumb {
    background: var(--espa-accent);
    border-radius: 3px;
  }
  .espa-alumni .espa-subnav__inner::-webkit-scrollbar-thumb:hover {
    background: var(--espa-accent-deep);
  }
}
.espa-alumni .espa-subnav a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--espa-radius);
  font-size: 19px;
  line-height: 28px;
  color: var(--espa-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.espa-alumni .espa-subnav a:hover { background: var(--espa-blush); color: var(--espa-accent-deep); }
.espa-alumni .espa-subnav a.is-active { color: var(--espa-accent); font-weight: 600; }
/* `.espa-subnav a:hover` sets a pale blush background; without a matching
   hover here the CTA lost its magenta fill and the white label went unreadable. */
.espa-alumni .espa-subnav a.espa-subnav__cta {
  background: var(--espa-accent);
  color: #fff;
  font-weight: 500;
}
.espa-alumni .espa-subnav a.espa-subnav__cta:hover,
.espa-alumni .espa-subnav a.espa-subnav__cta:focus-visible {
  background: var(--espa-accent-deep);
  color: #fff;
}
.espa-alumni .espa-subnav a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 0, 140, .28); }


/* ==========================================================================
   9. ABOUT
   ========================================================================== */

.espa-alumni .espa-about__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--espa-gutter);
  align-items: start;
}
.espa-alumni .espa-about__grid h2 { margin: 0; }
.espa-alumni .espa-about__copy p { color: var(--espa-text-soft); }
/* the "what you'll find here" cards were merged into this band */
.espa-alumni .espa-about .espa-cards { margin-top: 56px; }


/* ==========================================================================
   10. MAP
   ========================================================================== */

.espa-alumni .espa-mapgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--espa-gutter);
  align-items: start;
  margin-top: var(--espa-gutter);
}
.espa-alumni .espa-mappanel {
  position: relative;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
  padding: 12px;
}
.espa-alumni .espa-map-canvas {
  height: 620px;
  width: 100%;
  border-radius: var(--espa-radius);
  overflow: hidden;
  background: var(--espa-warm-clay);
  z-index: 1;
  font-family: var(--espa-font);
}
/* Basemap (OpenFreeMap vector or optional CARTO raster) — warm to match espa.bg. */
.espa-alumni .espa-map-canvas .leaflet-tile-pane,
.espa-alumni .espa-map-canvas .maplibregl-canvas {
  filter: grayscale(.5) sepia(.28) saturate(.92) brightness(1.03);
}

.espa-alumni .espa-pin { position: relative; display: block; width: 100%; height: 100%; }
.espa-alumni .espa-pin__core {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--espa-accent);
  color: #fff;
  font: 600 13px/1 var(--espa-font);
  box-shadow: 0 2px 10px rgba(237, 0, 140, .45);
  transition: background-color .18s ease, transform .18s ease;
}
.espa-alumni .espa-pin__ping {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  background: var(--espa-accent);
  opacity: 0;
  animation: espa-ping 2.8s cubic-bezier(.22, .61, .36, 1) infinite;
}
.espa-alumni .espa-pin__ping--2 { animation-delay: 1.4s; }
@keyframes espa-ping {
  0%   { opacity: .4; transform: scale(.42); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}
.espa-alumni .espa-marker:hover .espa-pin__core,
.espa-alumni .espa-marker--active .espa-pin__core {
  background: var(--espa-accent-deep);
  transform: scale(1.12);
}
.espa-alumni .leaflet-marker-icon:focus-visible {
  outline: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(237, 0, 140, .45);
}

.espa-alumni .leaflet-container { font-family: var(--espa-font); }
.espa-alumni .leaflet-popup-content-wrapper {
  padding: 0;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow-lift);
}
.espa-alumni .leaflet-popup-content { margin: 0; width: 310px !important; }
.espa-alumni .leaflet-popup-tip { border: 1px solid var(--espa-line); }
.espa-alumni .leaflet-popup-close-button {
  color: #9aa0a6 !important;
  font-size: 20px !important;
  padding: 8px 10px 0 0 !important;
}
.espa-alumni .leaflet-popup-close-button:hover { color: var(--espa-accent) !important; }
.espa-alumni .leaflet-bar { border: 0; box-shadow: none; }
.espa-alumni .leaflet-control-zoom a {
  width: 36px; height: 36px; line-height: 34px;
  border: 1px solid var(--espa-line) !important;
  border-radius: var(--espa-radius) !important;
  color: var(--espa-text) !important;
  font-size: 20px;
  box-shadow: rgba(0, 0, 0, .08) 0 4px 14px;
}
.espa-alumni .leaflet-control-zoom a:hover {
  background: var(--espa-blush) !important;
  color: var(--espa-accent-deep) !important;
}
.espa-alumni .leaflet-control-zoom-in { margin-bottom: 6px; }
.espa-alumni .leaflet-control-zoom a.leaflet-disabled { opacity: .45; }
.espa-alumni .leaflet-control-attribution {
  background: rgba(255, 255, 255, .86) !important;
  border-radius: var(--espa-radius) 0 0 0;
  font-size: 11px;
  color: #6f767d;
}
.espa-alumni .leaflet-control-attribution a { color: var(--espa-accent-deep); }

.espa-alumni .espa-pop { padding: 22px 22px 18px; }
.espa-alumni .espa-pop__title { margin: 0; font-size: 25px; line-height: 30px; font-weight: 600; }
.espa-alumni .espa-pop__count {
  margin: 2px 0 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-pop__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.espa-alumni .espa-mini { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.espa-alumni .espa-mini__avatar {
  position: relative;   /* .espa-avatar is absolute; without this it escapes the circle */
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--espa-blush);
  color: var(--espa-accent-deep);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}
.espa-alumni .espa-mini__avatar > img,
.espa-alumni .espa-mini__avatar > span {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.espa-alumni .espa-mini__avatar > span {
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}
.espa-alumni .espa-mini__body { display: grid; min-width: 0; }
.espa-alumni .espa-mini__name { display: block; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--espa-text); }
.espa-alumni .espa-mini__meta { display: block; font-size: 14px; line-height: 20px; color: var(--espa-text-soft); }
.espa-alumni .espa-mini__prof { display: block; font-size: 14px; line-height: 20px; color: var(--espa-accent-deep); }
.espa-alumni .espa-pop__all {
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--espa-accent-deep);
  text-decoration: none;
}
.espa-alumni .espa-pop__all:hover { text-decoration: underline; }

.espa-alumni .espa-map__hint {
  position: absolute;
  inset: 12px;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: var(--espa-radius);
  background: rgba(72, 79, 86, .42);
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  text-align: center;
  pointer-events: none;
}
.espa-alumni .espa-map__hint[hidden] { display: none; }

.espa-alumni .espa-legend {
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
  padding: 26px 24px;
}
.espa-alumni .espa-legend h3 { margin: 0 0 4px; font-size: 25px; line-height: 30px; }
.espa-alumni .espa-legend__note { margin: 0 0 16px; font-size: 15px; line-height: 22px; color: var(--espa-text-soft); }
.espa-alumni .espa-legend ul { list-style: none; margin: 0; padding: 0; max-height: 470px; overflow-y: auto; }
.espa-alumni .espa-legend li + li { border-top: 1px solid var(--espa-line); }
.espa-alumni .espa-legend__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px;
  border: 0;
  border-radius: var(--espa-radius);
  background: none;
  cursor: pointer;
  font: 400 17px/26px var(--espa-font);
  color: var(--espa-text);
  text-align: left;
}
.espa-alumni .espa-legend__row:hover,
.espa-alumni .espa-legend__row.is-active { background: var(--espa-blush); color: var(--espa-accent-deep); }
.espa-alumni .espa-legend__row.is-active { font-weight: 600; }
.espa-alumni .espa-legend__row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 0, 140, .28); }
.espa-alumni .espa-legend__count {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 2px 8px;
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
  color: var(--espa-accent-deep);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.espa-alumni .espa-legend__row.is-active .espa-legend__count { background: var(--espa-accent); color: #fff; }
.espa-alumni .espa-legend__reset {
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--espa-accent);
  border-radius: var(--espa-radius);
  background: transparent;
  color: var(--espa-accent);
  font: 500 17px/24px var(--espa-font);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.espa-alumni .espa-legend__reset:hover { background: var(--espa-accent); color: #fff; }


/* ==========================================================================
   11. CARD FAMILY — story, video, news, person
   ========================================================================== */

.espa-alumni .espa-stories__block + .espa-stories__block { margin-top: 44px; }
.espa-alumni .espa-stories__block > h3 { margin: 0 0 22px; font-size: 25px; line-height: 30px; }

.espa-alumni .espa-stories__grid,
.espa-alumni .espa-video-stories__grid,
.espa-alumni .espa-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--espa-gutter);
}
.espa-alumni .espa-stories__featured--single .espa-stories__grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.espa-alumni .espa-story-card,
.espa-alumni .espa-video-story-card,
.espa-alumni .espa-news-card {
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
  overflow: hidden;
  transition: transform .3s var(--espa-ease), box-shadow .3s var(--espa-ease);
}
.espa-alumni .espa-story-card:hover,
.espa-alumni .espa-video-story-card:hover,
.espa-alumni .espa-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--espa-shadow-lift);
}
.espa-alumni .espa-story-card__link,
.espa-alumni .espa-video-story-card__link,
.espa-alumni .espa-news-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.espa-alumni .espa-story-card__link:focus-visible,
.espa-alumni .espa-video-story-card__link:focus-visible,
.espa-alumni .espa-news-card__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(237, 0, 140, .35);
}

.espa-alumni .espa-story-card__media,
.espa-alumni .espa-video-story-card__media,
.espa-alumni .espa-news-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--espa-blush);
  overflow: hidden;
}
.espa-alumni .espa-story-card__media img,
.espa-alumni .espa-video-story-card__media img,
.espa-alumni .espa-news-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--espa-ease-alt);
}
.espa-alumni .espa-story-card:hover .espa-story-card__media img,
.espa-alumni .espa-video-story-card:hover .espa-video-story-card__media img,
.espa-alumni .espa-news-card:hover .espa-news-card__media img { transform: scale(1.05); }

/* initials placeholder when there is no image */
.espa-alumni .espa-story-card__badge {
  position: absolute;
  left: 14px; top: 14px;
  padding: 4px 12px;
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .94);
  color: var(--espa-accent-deep);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}

.espa-alumni .espa-story-card__body,
.espa-alumni .espa-video-story-card__body,
.espa-alumni .espa-news-card__body { padding: 24px 24px 26px; }

.espa-alumni .espa-story-card__topic {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--espa-accent);
}
.espa-alumni .espa-story-card__body h3,
.espa-alumni .espa-video-story-card__body h3,
.espa-alumni .espa-news-card__body h3 { margin: 0 0 6px; font-size: 25px; line-height: 30px; }
.espa-alumni .espa-story-card__author,
.espa-alumni .espa-video-story-card__meta,
.espa-alumni .espa-news-card__meta {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-news-card__meta { font-weight: 400; color: var(--espa-text-soft); }
.espa-alumni .espa-story-card__excerpt,
.espa-alumni .espa-video-story-card__excerpt,
.espa-alumni .espa-news-card__excerpt {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  color: var(--espa-text-soft);
}

.espa-alumni .espa-video-story-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--espa-accent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
  transition: background-color .18s ease, transform .25s var(--espa-ease);
}
.espa-alumni .espa-video-story-card__play::before {
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
.espa-alumni .espa-video-story-card:hover .espa-video-story-card__play {
  background: var(--espa-accent-deep);
  transform: translate(-50%, -50%) scale(1.08);
}


/* ==========================================================================
   12. EVENTS
   ========================================================================== */

.espa-alumni .espa-events__calendar { display: grid; gap: 44px; }
.espa-alumni .espa-events-month__title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--espa-line-warm);
  font-size: 25px;
  line-height: 30px;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-events-month__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.espa-alumni .espa-event {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 160px;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
  transition: transform .3s var(--espa-ease), box-shadow .3s var(--espa-ease);
}
.espa-alumni .espa-event:hover { transform: translateY(-3px); box-shadow: var(--espa-shadow-lift); }
.espa-alumni .espa-event:has(> .espa-event__body:last-child) { grid-template-columns: 86px minmax(0, 1fr); }
.espa-alumni .espa-event__date {
  display: grid;
  place-items: center;
  padding: 12px 8px;
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
}
.espa-alumni .espa-event__day { font-size: 34px; line-height: 38px; font-weight: 600; color: var(--espa-accent); }
.espa-alumni .espa-event__meta { margin: 0 0 4px; font-size: 15px; line-height: 24px; color: var(--espa-text-soft); }
.espa-alumni .espa-event__title { margin: 0; font-size: 25px; line-height: 32px; font-weight: 600; }
.espa-alumni .espa-event__title a { color: var(--espa-text); text-decoration: none; }
.espa-alumni .espa-event__title a:hover { color: var(--espa-accent-deep); }
.espa-alumni .espa-event__excerpt { margin: 6px 0 0; font-size: 17px; line-height: 26px; color: var(--espa-text-soft); }
.espa-alumni .espa-event__thumb { border-radius: var(--espa-radius); overflow: hidden; aspect-ratio: 3 / 2; }
.espa-alumni .espa-event__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================
   13. GALLERY
   ========================================================================== */

.espa-alumni .espa-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.espa-alumni .espa-gallery-item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  box-shadow: var(--espa-shadow);
  transition: transform .3s var(--espa-ease), box-shadow .3s var(--espa-ease);
}
.espa-alumni .espa-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--espa-shadow-lift); }
.espa-alumni .espa-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--espa-ease-alt);
}
.espa-alumni .espa-gallery-item:hover img { transform: scale(1.06); }
/* a photo can sit in more than one album, so this is a row of labels */
.espa-alumni .espa-gallery-item__albums {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;
}
.espa-alumni .espa-gallery-item__album {
  padding: 3px 11px;
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .94);
  color: var(--espa-accent-deep);
  font-size: 13px;
  line-height: 21px;
  font-weight: 600;
}
.espa-alumni .espa-gallery-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 0, 140, .35); }

.espa-alumni .espa-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(28, 24, 26, .88);
}
.espa-alumni .espa-gallery-lightbox[hidden] {
  display: none !important;
  pointer-events: none;
}
.espa-alumni .espa-gallery-lightbox__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--espa-radius);
  background: transparent;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}
.espa-alumni .espa-gallery-lightbox__close:hover { background: var(--espa-accent); border-color: var(--espa-accent); }
.espa-alumni .espa-gallery-lightbox__figure { margin: 0; max-width: 1100px; text-align: center; }
.espa-alumni .espa-gallery-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--espa-radius);
  display: block;
  margin-inline: auto;
}
.espa-alumni .espa-gallery-lightbox__caption {
  margin-top: 16px;
  color: rgba(255, 255, 255, .84);
  font-size: 17px;
  line-height: 26px;
}


/* ==========================================================================
   14. EMPTY STATES
   Empty is the normal state at launch. It has to look deliberate.
   ========================================================================== */

.espa-alumni .espa-news__empty,
.espa-alumni .espa-gallery__empty,
.espa-alumni .espa-events__empty,
.espa-alumni .espa-stories__empty,
.espa-alumni .espa-video-stories__empty {
  margin: 0;
  padding: 40px 32px;
  border: 1px dashed var(--espa-line-warm);
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .6);
  color: var(--espa-text-soft);
  font-size: 17px;
  line-height: 26px;
  text-align: center;
}


/* ==========================================================================
   15. FORM CONTROLS
   The host site has no contact form, so this defines the form language.
   ========================================================================== */

.espa-alumni .espa-field { margin: 0; display: grid; gap: 6px; }
.espa-alumni .espa-field label,
.espa-alumni .espa-field__label,
.espa-alumni .espa-file-label,
.espa-alumni .espa-ed__field label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--espa-text);
}
.espa-alumni .espa-field--check label { font-weight: 400; display: flex; align-items: center; gap: 10px; }
.espa-alumni .espa-field--check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--espa-accent); }

.espa-alumni input[type="text"],
.espa-alumni input[type="email"],
.espa-alumni input[type="tel"],
.espa-alumni input[type="url"],
.espa-alumni input[type="date"],
.espa-alumni input[type="number"],
.espa-alumni input[type="password"],
.espa-alumni input[type="search"],
.espa-alumni select,
.espa-alumni textarea {
  width: 100%;
  min-height: 56px;
  padding: 13px 18px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-surface);
  font: 400 19px/28px var(--espa-font);
  color: var(--espa-text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.espa-alumni textarea { min-height: 150px; resize: vertical; }
.espa-alumni select {
  appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23484f56'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px 22px;
}
.espa-alumni input:focus,
.espa-alumni select:focus,
.espa-alumni textarea:focus {
  outline: none;
  border-color: var(--espa-accent);
  box-shadow: 0 0 0 3px rgba(237, 0, 140, .12);
}
.espa-alumni ::placeholder { color: var(--espa-text-muted); opacity: 1; }
.espa-alumni input:user-invalid,
.espa-alumni select:user-invalid,
.espa-alumni textarea:user-invalid { border-color: var(--espa-err); }

.espa-alumni .espa-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.espa-alumni .espa-field--full { grid-column: 1 / -1; }
.espa-alumni .espa-form__note {
  margin: 26px 0 0;
  padding: 16px 20px;
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
  font-size: 16px;
  line-height: 24px;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}

/* server-side validation failed — flag the fields the browser can't see are wrong */
.espa-alumni .espa-form--invalid [required]:invalid,
.espa-alumni .espa-form--invalid [aria-invalid="true"] {
  border-color: var(--espa-err);
  background: var(--espa-err-bg);
}

/* file field */
.espa-alumni .espa-file { position: relative; }
.espa-alumni .espa-file__input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.espa-alumni .espa-file__drop {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px dashed var(--espa-line-soft);
  border-radius: var(--espa-radius);
  background: var(--espa-surface);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.espa-alumni .espa-file__input:hover + .espa-file__drop,
.espa-alumni .espa-file__input:focus-visible + .espa-file__drop {
  border-color: var(--espa-accent);
  background: var(--espa-blush);
}
.espa-alumni .espa-file__btn {
  flex: 0 0 auto;
  padding: 8px 20px;
  border-radius: var(--espa-radius);
  background: var(--espa-accent);
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.espa-alumni .espa-file__name {
  font-size: 16px;
  line-height: 24px;
  color: var(--espa-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.espa-alumni .espa-file__name.is-error { color: var(--espa-err); font-weight: 600; }
.espa-alumni .espa-file-hint {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 22px;
  color: var(--espa-text-muted);
}
.espa-alumni .espa-photo-preview {
  display: block;
  margin-top: 14px;
  width: 132px; height: 132px;
  object-fit: cover;
  border-radius: var(--espa-radius);
  border: 1px solid var(--espa-line);
}
.espa-alumni .espa-photo-preview[hidden] { display: none; }

/* honeypot — must never be visible */
.espa-alumni .espa-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* internship sub-panel */
.espa-alumni .espa-internship-panel { grid-column: 1 / -1; }
.espa-alumni .espa-internship-fields {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #dbe6fb;
  border-left: 4px solid #2f5fbf;
  border-radius: var(--espa-radius);
  background: #f6f9ff;
}
.espa-alumni .espa-internship-fields[hidden] { display: none; }


/* ==========================================================================
   16. SEARCH PANEL
   ========================================================================== */

.espa-alumni .espa-search__mentor-lead { margin: 0 0 6px; max-width: 68ch; color: var(--espa-text-soft); }
.espa-alumni .espa-search__panel {
  margin-top: 30px;
  padding: 40px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-search__legend {
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--espa-line);
  font-size: 16px;
  line-height: 24px;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-search__legend strong { color: var(--espa-accent-deep); font-weight: 600; }
.espa-alumni .espa-search__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;
  align-items: end;
}
.espa-alumni .espa-search__field--name { grid-column: span 2; }
.espa-alumni .espa-search__field--badges,
.espa-alumni .espa-search__actions { grid-column: 1 / -1; }
.espa-alumni .espa-search__actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.espa-alumni .espa-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--espa-line);
}
.espa-alumni .espa-search__chips .espa-chip {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--espa-blush);
  border-color: transparent;
}


/* ==========================================================================
   17. DIRECTORY
   ========================================================================== */

.espa-alumni .espa-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espa-gutter);
  margin: var(--espa-gutter) 0 70px;
}
.espa-alumni .espa-person {
  position: relative;
  display: block;
  padding: 0 0 26px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--espa-ease), box-shadow .3s var(--espa-ease);
}
.espa-alumni .espa-person:hover { transform: translateY(-4px); box-shadow: var(--espa-shadow-lift); }
.espa-alumni .espa-person:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(237, 0, 140, .35); }
.espa-alumni .espa-person__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--espa-blush);
  overflow: hidden;
  margin-bottom: 22px;
}
.espa-alumni .espa-person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--espa-ease-alt);
}
.espa-alumni .espa-person:hover .espa-person__photo img { transform: scale(1.05); }
.espa-alumni .espa-person h3 { margin: 0 26px 6px; font-size: 25px; line-height: 30px; }
.espa-alumni .espa-person p { margin: 0 26px; font-size: 17px; line-height: 26px; color: var(--espa-text-soft); }
.espa-alumni .espa-person .espa-card__lead { margin-bottom: 4px; }
.espa-alumni .espa-person__badges {
  position: absolute;
  left: 12px; top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.espa-alumni .espa-person__badge {
  padding: 3px 11px;
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .94);
  color: var(--espa-accent-deep);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.espa-alumni .espa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--espa-gutter);
  margin-top: var(--espa-gutter);
}
.espa-alumni .espa-card {
  padding: 34px 32px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-card h3 { margin: 0 0 8px; font-size: 25px; line-height: 30px; }
.espa-alumni .espa-card__lead {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-card p:last-child { margin: 0; color: var(--espa-text-soft); }
.espa-alumni .espa-directory .espa-kicker + h2 { margin-bottom: 0; }


/* ==========================================================================
   18. JOIN FORM PANEL
   A white card, because inputs directly on a photograph are unreadable
   however heavy the overlay.
   ========================================================================== */

.espa-alumni .espa-form-panel {
  margin-top: 40px;
  max-width: 1100px;
  padding: 44px;
  background: var(--espa-surface);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow-lift);
  color: var(--espa-text);
}
.espa-alumni .espa-form-panel .espa-kicker { color: var(--espa-accent); }
.espa-alumni .espa-form-panel__title { margin: 0 0 28px; font-size: 30px; line-height: 38px; color: var(--espa-text); }


/* ==========================================================================
   19. PROFILE PAGE  (profile-single.php)
   ========================================================================== */

.espa-alumni .espa-profile-hero__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--espa-gutter);
  align-items: center;
}
.espa-alumni .espa-profile-hero__grid--has-video {
  grid-template-columns: 240px minmax(0, 1fr) 340px;
}
.espa-alumni .espa-profile-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--espa-radius);
  overflow: hidden;
  background: var(--espa-blush);
  border: 1px solid var(--espa-line);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.espa-alumni .espa-profile-name { margin: 0 0 8px; font-size: 55px; line-height: 58px; font-weight: 600; }
.espa-alumni .espa-profile-lead {
  margin: 0 0 6px;
  font-size: 25px;
  line-height: 34px;
  font-weight: 600;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-profile-place { margin: 0 0 22px; font-size: 19px; line-height: 28px; color: var(--espa-text-soft); }
.espa-alumni .espa-profile-hero__info > p:last-child { margin-bottom: 0; }

.espa-alumni .espa-profile-video {
  padding: 26px 24px;
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--espa-line-warm);
}
.espa-alumni .espa-profile-video__title { margin: 0 0 8px; font-size: 25px; line-height: 32px; }
.espa-alumni .espa-profile-video__lead { margin: 0 0 16px; font-size: 17px; line-height: 26px; color: var(--espa-text-soft); }

/* wp_oembed_get() returns a fixed-width iframe (960px here). Force every
   embed back inside its column and hold a 16:9 box. */
.espa-alumni .espa-profile-video iframe,
.espa-alumni .espa-profile-video embed,
.espa-alumni .espa-profile-video object,
.espa-alumni .espa-profile-video video,
.espa-alumni .espa-story-video iframe,
.espa-alumni .espa-story-video embed,
.espa-alumni .espa-story-video object,
.espa-alumni .espa-story-video video,
.espa-alumni .espa-story-content iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--espa-radius);
  background: #000;
}
.espa-alumni .espa-profile-video .wp-video,
.espa-alumni .espa-profile-video .wp-video-shortcode,
.espa-alumni .espa-story-video .wp-video { width: 100% !important; max-width: 100%; }

.espa-alumni .espa-story-video { margin: 26px 0; }
.espa-alumni .espa-story-video--embed { border-radius: var(--espa-radius); overflow: hidden; }

.espa-alumni .espa-profile-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 60px;
  align-items: start;
}
.espa-alumni .espa-profile-story { font-size: 19px; line-height: 30px; color: var(--espa-text-soft); }
.espa-alumni .espa-profile-story p { margin: 0 0 18px; }
/* Story cards on a profile sit in a narrower column than on the hub, so they
   run at a smaller size — a single full-width card with a 3:2 image dwarfs
   everything else on the page. */
.espa-alumni .espa-profile-stories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}
.espa-alumni .espa-profile-stories .espa-story-card__media { aspect-ratio: 16 / 10; }
.espa-alumni .espa-profile-stories .espa-story-card__body { padding: 18px 18px 20px; }
.espa-alumni .espa-profile-stories .espa-story-card__body h3 { font-size: 19px; line-height: 26px; }
.espa-alumni .espa-profile-stories .espa-story-card__topic { font-size: 13px; line-height: 20px; }
.espa-alumni .espa-profile-stories .espa-story-card__author { margin-bottom: 6px; font-size: 15px; line-height: 22px; }
.espa-alumni .espa-profile-stories .espa-story-card__excerpt {
  font-size: 15px;
  line-height: 23px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.espa-alumni .espa-profile-stories .espa-avatar { font-size: 28px; }

.espa-alumni .espa-socials { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.espa-alumni .espa-socials a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-surface);
  color: var(--espa-accent-deep);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}
.espa-alumni .espa-socials a:hover { border-color: var(--espa-accent); }

.espa-alumni .espa-profile-facts {
  padding: 30px 28px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-warm-soft);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-profile-facts dl { margin: 0; display: grid; gap: 0; }
.espa-alumni .espa-profile-facts dl > div {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--espa-line-warm);
}
.espa-alumni .espa-profile-facts dl > div:last-child { border-bottom: 0; }
.espa-alumni .espa-profile-facts dt {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--espa-text-muted);
}
.espa-alumni .espa-profile-facts dd { margin: 0; font-size: 19px; line-height: 28px; color: var(--espa-text); }

.espa-alumni .espa-profile-contacts { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--espa-line-warm); }
.espa-alumni .espa-profile-contacts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.espa-alumni .espa-profile-contacts__list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.espa-alumni .espa-profile-contacts__label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--espa-text-muted);
}

/* internship offer block */
.espa-alumni .espa-profile-internship { margin-top: 40px; }
.espa-alumni .espa-internship-offer {
  padding: 30px 28px;
  border: 1px solid #dbe6fb;
  border-left: 4px solid #2f5fbf;
  border-radius: var(--espa-radius);
  background: #f6f9ff;
}
.espa-alumni .espa-internship-offer__type {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: #2f5fbf;
}
.espa-alumni .espa-internship-offer__title { margin: 0 0 6px; font-size: 25px; line-height: 32px; }
.espa-alumni .espa-internship-offer__meta { margin: 0 0 14px; font-size: 16px; line-height: 24px; color: var(--espa-text-soft); }
.espa-alumni .espa-internship-offer__description { font-size: 17px; line-height: 26px; color: var(--espa-text-soft); }


/* ==========================================================================
   20. MILESTONE TIMELINE  (milestone-timeline.php)
   ========================================================================== */

.espa-alumni .espa-tl-sprite { display: none; }

.espa-alumni .espa-tl { position: relative; margin: 0; padding: 0 0 0 76px; list-style: none; }
.espa-alumni .espa-tl::before {
  content: "";
  position: absolute;
  left: 27px; top: 14px; bottom: 34px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--espa-accent) 0%, var(--espa-accent-far) 100%);
  opacity: .45;
}
/* a rail to nowhere reads as a bug */
.espa-alumni .espa-tl--single::before { display: none; }

.espa-alumni .espa-tl__item { position: relative; padding-bottom: 42px; }
.espa-alumni .espa-tl__item:last-child { padding-bottom: 0; }
.espa-alumni .espa-tl__node {
  position: absolute;
  left: -76px; top: 2px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--espa-accent);
  color: var(--espa-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-tl__node svg { width: 24px; height: 24px; fill: currentColor; }
.espa-alumni .espa-tl__item--espa .espa-tl__node {
  background: var(--espa-accent);
  border-color: var(--espa-accent);
  color: #fff;
}
.espa-alumni .espa-tl__item--now .espa-tl__node {
  box-shadow: 0 0 0 6px rgba(237, 0, 140, .14), var(--espa-shadow);
}
.espa-alumni .espa-tl__year {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 12px;
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
  color: var(--espa-accent-deep);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
}
.espa-alumni .espa-tl__now {
  display: inline-block;
  margin: 0 0 6px 8px;
  padding: 2px 12px;
  border-radius: var(--espa-radius);
  background: var(--espa-accent);
  color: #fff;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
}
.espa-alumni .espa-tl__title { margin: 0; font-size: 25px; line-height: 32px; font-weight: 600; }
.espa-alumni .espa-tl__sub {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-tl__loc { margin: 2px 0 0; font-size: 16px; line-height: 24px; color: var(--espa-text-muted); }
.espa-alumni .espa-tl__desc {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 26px;
  color: var(--espa-text-soft);
  max-width: 58ch;
}
.espa-alumni .espa-tl__hint {
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px dashed var(--espa-line-soft);
  border-radius: var(--espa-radius);
  background: rgba(255, 255, 255, .7);
  color: var(--espa-text-soft);
  font-size: 16px;
  line-height: 24px;
}
.espa-alumni .espa-tl__prompt { margin-top: 34px; font-size: 17px; line-height: 26px; }
.espa-alumni .espa-tl__prompt--quiet { color: var(--espa-text-muted); font-size: 16px; }


/* ==========================================================================
   21. MILESTONE EDITOR  (milestone-editor.php)
   ========================================================================== */

.espa-alumni .espa-ed {
  padding: 32px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-ed > h3 { margin: 0 0 4px; font-size: 25px; line-height: 30px; }
.espa-alumni .espa-ed__note { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--espa-text-soft); }
.espa-alumni .espa-ed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.espa-alumni .espa-ed__item {
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-surface);
  overflow: hidden;
}
.espa-alumni .espa-ed__item--locked { background: var(--espa-blush); border-color: var(--espa-line-soft); }
.espa-alumni .espa-ed__item--warn   { border-color: #f0c9a8; }

/* The row has four children: handle, year, summary, actions.
   A five-column template shifted every child one column left — the year got
   the 40px handle slot and the title got the 68px year slot, which is why
   titles wrapped one word per line. */
.espa-alumni .espa-ed__row {
  display: grid;
  grid-template-columns: 40px 68px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
}
.espa-alumni .espa-ed__handle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--espa-radius);
  background: none;
  color: #b6bcc2;
  cursor: grab;
}
.espa-alumni .espa-ed__handle:hover { background: var(--espa-warm-soft); color: var(--espa-text); }
.espa-alumni .espa-ed__handle[disabled] { cursor: not-allowed; color: #d9a9c7; }
.espa-alumni .espa-ed__handle svg { width: 20px; height: 20px; fill: currentColor; }

.espa-alumni .espa-ed__year {
  padding: 6px 4px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
  color: var(--espa-accent-deep);
  font: 600 15px/22px var(--espa-font);
  text-align: center;
}
.espa-alumni .espa-ed__item--locked .espa-ed__year { background: #fff; }

.espa-alumni .espa-ed__summary { min-width: 0; display: block; }
.espa-alumni .espa-ed__title { font-size: 17px; line-height: 24px; font-weight: 600; }
.espa-alumni .espa-ed__sub { font-size: 15px; line-height: 22px; color: var(--espa-text-soft); }
.espa-alumni .espa-ed__sub[hidden] { display: none; }
.espa-alumni .espa-ed__flag[hidden] { display: none; }
.espa-alumni .espa-ed__type {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: var(--espa-radius);
  background: var(--espa-warm-soft);
  border: 1px solid var(--espa-line-warm);
  color: var(--espa-text-soft);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}
.espa-alumni .espa-ed__lock { font-size: 13px; font-weight: 600; color: var(--espa-accent-deep); }

.espa-alumni .espa-ed__actions { display: flex; gap: 6px; }
.espa-alumni .espa-ed__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: #fff;
  color: var(--espa-text-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.espa-alumni .espa-ed__icon:hover { border-color: var(--espa-accent); color: var(--espa-accent); }
.espa-alumni .espa-ed__icon[disabled] { opacity: .35; cursor: not-allowed; }
.espa-alumni .espa-ed__icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 0, 140, .28); }

.espa-alumni .espa-ed__flag {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: var(--espa-radius);
  background: var(--espa-warn-bg);
  color: var(--espa-warn);
  font-size: 15px;
  line-height: 22px;
}

.espa-alumni .espa-ed__panel {
  padding: 22px 18px 24px;
  border-top: 1px solid var(--espa-line);
  background: var(--espa-warm-soft);
}
.espa-alumni .espa-ed__panel[hidden] { display: none; }
.espa-alumni .espa-ed__panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.espa-alumni .espa-ed__field { margin: 0; display: grid; gap: 6px; }
.espa-alumni .espa-ed__field--full { grid-column: 1 / -1; }
.espa-alumni .espa-ed__panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.espa-alumni .espa-ed__add {
  margin-top: 20px;
  padding: 14px 28px;
  border: 1px solid var(--espa-accent);
  border-radius: var(--espa-radius);
  background: transparent;
  color: var(--espa-accent);
  font: 500 19px/28px var(--espa-font);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.espa-alumni .espa-ed__add:hover { background: var(--espa-accent); color: #fff; }


/* ==========================================================================
   22. STORY PAGE  (story-single.php)
   ========================================================================== */

.espa-alumni .espa-story-hero h1 { margin: 0 0 14px; font-size: 55px; line-height: 60px; font-weight: 600; max-width: 24ch; }
.espa-alumni .espa-story-hero__topic {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--espa-accent-deep);
}
.espa-alumni .espa-story-hero__meta { margin: 0; font-size: 17px; line-height: 26px; color: var(--espa-text-soft); }

.espa-alumni .espa-story-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
}
.espa-alumni .espa-story-content { font-size: 19px; line-height: 32px; color: var(--espa-text-soft); }
.espa-alumni .espa-story-content > * + * { margin-top: 22px; }
.espa-alumni .espa-story-content h2 { font-size: 30px; line-height: 40px; margin: 34px 0 0; }
.espa-alumni .espa-story-content h3 { font-size: 25px; line-height: 32px; margin: 28px 0 0; }
.espa-alumni .espa-story-content img { max-width: 100%; height: auto; border-radius: var(--espa-radius); }
.espa-alumni .espa-story-content blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--espa-accent);
  font-size: 21px;
  line-height: 32px;
  color: var(--espa-text);
}

.espa-alumni .espa-story-author { position: sticky; top: calc(var(--espa-header-offset) + 90px); }
.espa-alumni .espa-story-author__card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-surface);
  box-shadow: var(--espa-shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .3s var(--espa-ease);
}
.espa-alumni .espa-story-author__card:hover { border-color: var(--espa-accent); transform: translateY(-2px); }
.espa-alumni .espa-story-author__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 68px; height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--espa-blush);
  color: var(--espa-accent-deep);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
}
.espa-alumni .espa-story-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.espa-alumni .espa-story-author__body { display: grid; gap: 2px; min-width: 0; }
.espa-alumni .espa-story-author__body strong { font-size: 19px; line-height: 26px; }
.espa-alumni .espa-story-author__body span { font-size: 16px; line-height: 24px; color: var(--espa-text-soft); }


/* ==========================================================================
   23. ACCOUNT  (account.php, account-stories.php)
   ========================================================================== */

.espa-alumni .espa-account__panel {
  max-width: 620px;
  margin-inline: auto;
  padding: 40px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-account__panel + .espa-account__panel { margin-top: 30px; }
.espa-alumni .espa-account__panel--wide,
.espa-alumni .espa-account__panel--stories { max-width: 1100px; }
.espa-alumni .espa-account__panel h1 { margin: 0 0 8px; font-size: 40px; line-height: 48px; }
.espa-alumni .espa-account__panel h2 { margin: 0 0 8px; font-size: 30px; line-height: 38px; }
.espa-alumni .espa-account__panel h3 { margin: 34px 0 16px; font-size: 25px; line-height: 32px; }
.espa-alumni .espa-account__sub { margin: 0 0 26px; font-size: 17px; line-height: 26px; color: var(--espa-text-soft); }
.espa-alumni .espa-account__panel--stories .espa-form__grid { grid-template-columns: 1fr; }

.espa-alumni .espa-account__panel--thanks { max-width: 760px; text-align: left; }
.espa-alumni .espa-thanks__status { margin-bottom: 30px; }
.espa-alumni .espa-thanks-steps {
  margin: 22px 0 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 10px;
  font-size: 17px;
  line-height: 26px;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-thanks-steps li::marker { color: var(--espa-accent); font-weight: 600; }
.espa-alumni .espa-thanks__form { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--espa-line); }

.espa-alumni .espa-my-stories { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.espa-alumni .espa-my-stories__item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  background: var(--espa-warm-soft);
}
.espa-alumni .espa-my-stories__item strong { font-size: 17px; line-height: 26px; }
.espa-alumni .espa-my-stories__topic {
  margin-left: 10px;
  font-size: 15px;
  line-height: 22px;
  color: var(--espa-text-soft);
}
.espa-alumni .espa-my-stories__status {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 11px;
  border-radius: var(--espa-radius);
  background: var(--espa-blush);
  color: var(--espa-accent-deep);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}


/* ==========================================================================
   24. RESPONSIVE
   1000px is Salient's own header breakpoint.
   ========================================================================== */

@media (max-width: 1280px) {
  .espa-alumni .espa-mapgrid { grid-template-columns: minmax(0, 1fr) 280px; }
  .espa-alumni .espa-map-canvas { height: 540px; }
  .espa-alumni .espa-profile-hero__grid--has-video { grid-template-columns: 220px minmax(0, 1fr); }
  .espa-alumni .espa-profile-hero__grid--has-video .espa-profile-video { grid-column: 1 / -1; }
  .espa-alumni .espa-profile-body__grid,
  .espa-alumni .espa-story-body__grid { gap: 40px; }
}

@media (max-width: 1000px) {
  .espa-alumni { --espa-gutter: 24px; --espa-band-y: 56px; }

  .espa-alumni .espa-hero { min-height: 0; }
  .espa-alumni .espa-hero__inner { padding-block: 56px; }
  .espa-alumni .espa-hero__title { font-size: 38px; line-height: 44px; }
  .espa-alumni .espa-hero__subtitle { font-size: 24px; line-height: 32px; }
  .espa-alumni .espa-hero__actions .espa-btn { width: 100%; }

  .espa-alumni .espa-band h2 { font-size: 30px; line-height: 40px; }
  .espa-alumni .espa-about__grid { grid-template-columns: 1fr; }

  .espa-alumni .espa-stories__intro,
  .espa-alumni .espa-video-stories__intro,
  .espa-alumni .espa-events__intro,
  .espa-alumni .espa-news__intro,
  .espa-alumni .espa-gallery__intro { grid-template-columns: 1fr; align-items: start; }
  .espa-alumni .espa-stories__cta,
  .espa-alumni .espa-news__cta { justify-self: start; }

  .espa-alumni .espa-mapgrid { grid-template-columns: 1fr; }
  .espa-alumni .espa-map-canvas { height: 400px; }
  .espa-alumni .espa-legend ul { max-height: none; }

  .espa-alumni .espa-event,
  .espa-alumni .espa-event:has(> .espa-event__body:last-child) {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }
  .espa-alumni .espa-event__day { font-size: 26px; line-height: 30px; }
  .espa-alumni .espa-event__thumb { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  .espa-alumni .espa-search__panel { padding: 24px; }
  .espa-alumni .espa-search__form { grid-template-columns: 1fr; }
  .espa-alumni .espa-search__field--name { grid-column: auto; }
  .espa-alumni .espa-search__actions .espa-btn { width: 100%; }
  .espa-alumni .espa-search__chips .espa-chip { max-width: 100%; }

  .espa-alumni .espa-form-panel,
  .espa-alumni .espa-account__panel,
  .espa-alumni .espa-ed { padding: 24px; }
  .espa-alumni .espa-form__grid,
  .espa-alumni .espa-ed__panel-grid { grid-template-columns: 1fr; }
  .espa-alumni .espa-form__actions .espa-btn { width: 100%; }

  /* profile + story */
  .espa-alumni .espa-profile-hero__grid,
  .espa-alumni .espa-profile-hero__grid--has-video { grid-template-columns: 1fr; }
  .espa-alumni .espa-profile-photo { max-width: 220px; }
  .espa-alumni .espa-profile-name { font-size: 34px; line-height: 40px; }
  .espa-alumni .espa-profile-lead { font-size: 21px; line-height: 30px; }
  .espa-alumni .espa-profile-body__grid,
  .espa-alumni .espa-story-body__grid { grid-template-columns: 1fr; gap: 40px; }
  .espa-alumni .espa-story-hero h1 { font-size: 34px; line-height: 42px; }
  .espa-alumni .espa-story-author { position: static; }
  .espa-alumni .espa-back { margin-bottom: 18px; }
  .espa-alumni .espa-profile-stories { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

  /* timeline */
  .espa-alumni .espa-tl { padding-left: 58px; }
  .espa-alumni .espa-tl::before { left: 20px; }
  .espa-alumni .espa-tl__node { left: -58px; width: 42px; height: 42px; }
  .espa-alumni .espa-tl__node svg { width: 18px; height: 18px; }
  .espa-alumni .espa-tl__title { font-size: 21px; line-height: 28px; }

  /* milestone editor */
  .espa-alumni .espa-ed__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 12px; padding: 14px; }
  .espa-alumni .espa-ed__year { grid-column: 2; justify-self: start; padding-inline: 12px; }
  .espa-alumni .espa-ed__summary { grid-column: 1 / -1; }
  .espa-alumni .espa-ed__actions { grid-column: 1 / -1; }

  .espa-alumni .espa-gallery-lightbox { padding: 20px; }
  .espa-alumni .espa-gallery-lightbox__close { top: 12px; right: 14px; }

  .espa-alumni .espa-band--photo,
  .espa-alumni .espa-join { background-size: cover !important; }
}

@media (max-width: 560px) {
  .espa-alumni .espa-people,
  .espa-alumni .espa-stories__grid,
  .espa-alumni .espa-video-stories__grid,
  .espa-alumni .espa-news__grid,
  .espa-alumni .espa-cards { grid-template-columns: 1fr; }
  .espa-alumni .espa-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .espa-alumni .espa-profile-stories { grid-template-columns: 1fr; }
  .espa-alumni .espa-file__drop { flex-direction: column; align-items: flex-start; gap: 10px; }
  .espa-alumni .espa-file__name { max-width: 100%; }
  .espa-alumni .espa-my-stories__item { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   25. BADGES ROW + EDIT PROFILE
   ========================================================================== */

/* Shown wherever an alumnus appears: person cards, story cards, video cards,
   map popups, profile hero, edit preview. */
.espa-alumni .espa-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.espa-alumni .espa-person .espa-badges { margin: 12px 26px 0; }
.espa-alumni .espa-story-card .espa-badges,
.espa-alumni .espa-video-story-card .espa-badges { margin-top: 8px; margin-bottom: 10px; }
.espa-alumni .espa-mini .espa-badges { margin-top: 6px; }
.espa-alumni .espa-mini .espa-badge { font-size: 12px; line-height: 19px; padding: 2px 9px; }

/* --- edit profile: mirrors the public profile hero -------------------------
   The edit screen used to be a bare form, which read as a different product
   from the page it produces. Same photo block, name, lead and badges here.
   -------------------------------------------------------------------------- */
.espa-alumni .espa-edit-hero {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 34px;
  background: var(--espa-surface);
  border: 1px solid var(--espa-line);
  border-radius: var(--espa-radius);
  box-shadow: var(--espa-shadow);
}
.espa-alumni .espa-edit-hero__photo { margin: 0; }
.espa-alumni .espa-edit-hero__info .espa-profile-name { font-size: 40px; line-height: 46px; margin-bottom: 6px; }
.espa-alumni .espa-edit-hero__info .espa-profile-lead { font-size: 21px; line-height: 30px; }
.espa-alumni .espa-edit-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.espa-alumni .espa-edit-hero__actions .espa-btn { padding: 10px 22px; font-size: 17px; }
.espa-alumni .espa-edit-hero__note {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--espa-text-soft);
}

/* status pill — replaces the kicker that read as a section label */
.espa-alumni .espa-status {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 14px;
  border-radius: var(--espa-radius);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}
.espa-alumni .espa-status--live    { background: var(--espa-ok-bg); color: #1f6b3e; }
.espa-alumni .espa-status--pending { background: var(--espa-warn-bg); color: var(--espa-warn); }

/* the form panel below the preview */
.espa-alumni .espa-edit > h2 { margin: 0 0 26px; font-size: 30px; line-height: 38px; }

@media (max-width: 1000px) {
  .espa-alumni .espa-edit-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
    text-align: left;
  }
  .espa-alumni .espa-edit-hero__photo { max-width: 160px; }
  .espa-alumni .espa-edit-hero__info .espa-profile-name { font-size: 30px; line-height: 38px; }
  .espa-alumni .espa-edit-hero__actions .espa-btn { width: 100%; }
}

/* ==========================================================================
   FALLBACK AVATAR
   Photos are optional, so a profile without one shows its initials on a
   gradient. The variant is hashed from the name in PHP (see
   Profiles::avatar_variant), so the same person keeps the same colours
   everywhere and a grid of photoless alumni looks varied rather than uniform.

   Every pair is built from colours already on espa.bg. Purple and blue are
   nudged darker than the site's #ae81f9 / #5694ff, because at their original
   lightness white initials measure 2.87:1 and 2.97:1 — under the 3:1 minimum
   for large text. The values below pass.
   ========================================================================== */

.espa-alumni .espa-avatar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* scales with the tile: readable at a 44px map popup and a 280px hero */
  font-size: clamp(15px, 34cqw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  text-transform: uppercase;
  user-select: none;
}

/* container query so the initials track the avatar, not the viewport */
.espa-alumni .espa-person__photo,
.espa-alumni .espa-profile-photo,
.espa-alumni .espa-story-card__media,
.espa-alumni .espa-video-story-card__media,
.espa-alumni .espa-story-author__avatar,
.espa-alumni .espa-mini__avatar { container-type: inline-size; }

@supports not (container-type: inline-size) {
  .espa-alumni .espa-avatar { font-size: 2.2em; }
  .espa-alumni .espa-mini__avatar .espa-avatar { font-size: 15px; }
}

.espa-alumni .espa-avatar--0 { background: linear-gradient(135deg, #ed008c 0%, #3b83ff 100%); }
.espa-alumni .espa-avatar--1 { background: linear-gradient(135deg, #bd197a 0%, #ed008c 100%); }
.espa-alumni .espa-avatar--2 { background: linear-gradient(135deg, #ff5433 0%, #ed008c 100%); }
.espa-alumni .espa-avatar--3 { background: linear-gradient(135deg, #ed008c 0%, #9b64f8 100%); }
.espa-alumni .espa-avatar--4 { background: linear-gradient(135deg, #ea6b7c 0%, #ff5433 100%); }
.espa-alumni .espa-avatar--5 { background: linear-gradient(135deg, #9b64f8 0%, #3b83ff 100%); }

.espa-alumni .espa-mini__avatar .espa-avatar,
.espa-alumni .espa-story-author__avatar .espa-avatar { border-radius: 50%; }