/* ==========================================================================
   SCHOLARS' STORIES
   Widget: GivingStoryOfImpact -> Detail.Custom.cshtml
   Loaded after main.min.css / responsive.css, so this file only adds; it never
   redefines the shared primitives (.wrapper, .title-container, .btn, .heading2,
   .tabs-container). Every rule is scoped under .scholar-stories so the legacy
   .alumni* class names reused from the old Gift Impact page cannot leak.
   Palette mirrors main.scss: maroon #62001f, bright maroon #7c0027, ink #161616.
   ========================================================================== */

.scholar-stories {
  --sch-maroon: #62001f;
  --sch-bright: #7c0027;
  --sch-ink: #161616;
  --sch-grey: #484848;
  --sch-line: #f5f5f5;
  --sch-surface: #fafafa;
  --sch-radius: 20px;
  --sch-radius-sm: 12px;
  --sch-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sch-progress: 0;
  position: relative;
}

/* Shared inner rail. Narrower than the global .wrapper (max 1920px) because
   cards and video read badly at that width. */
.scholar-stories .scholar-shell {
  width: 87.5%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.scholar-stories .scholar-stories__intro {
  padding-bottom: 0;
}

.scholar-stories .scholar-stories__intro .sub-head {
  color: var(--sch-bright);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.scholar-stories .scholar-stories__intro .title span {
  color: var(--sch-bright);
}

.scholar-stories .scholar-stories__intro .desc {
  color: var(--sch-grey);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* .tabs-container clips its children; the cinema glow and the lifted cards need
   to bleed past that box. */
.scholar-stories .scholar-stories__tabs {
  overflow: visible;
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* With no heading block rendered the tabs are the first thing in the section, so
   they need the full gap themselves or they collide with whatever sits above. */
.scholar-stories > .scholar-stories__tabs:first-child {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.scholar-stories .tabs-navigation {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  /* The nav scrolls sideways on narrow screens; the bar itself is visual noise. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scholar-stories .tabs-navigation::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.scholar-stories .tabs-navigation .tab-button {
  border-radius: 100vw;
  padding: 11px 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.scholar-stories .tabs-navigation .tab-button.active {
  box-shadow: 0 10px 24px -12px rgba(98, 0, 31, 0.75);
}

/* The cinema and the grid each carry their own block padding — the wrapper adding
   30px of its own just doubles the gap, and leaves a dead strip under a panel
   that has no grid at all. main.min.css sets that padding through a four-class
   selector, so the override has to match its depth to win. */
.scholar-stories .tabs-container .tab-content .tab-panel .tab-content-wrapper {
  padding: 0;
}

/* ==========================================================================
   CONDITION A — the cinema (video stories, Swiper)
   ========================================================================== */

.scholar-stories .scholar-cinema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  /* Solid colour under the gradient, and contain:paint so the compositor treats
     this as one self-contained tile. Without both, the animated aurora child
     keeps the section on a separate layer whose clip is re-rasterised while
     scrolling — which is what draws the white hairline along the bottom edge. */
  background-color: #100508;
  background-image:
    radial-gradient(120% 90% at 50% -10%, #8c012c 0%, #4a0117 38%, #1a070d 72%, #100508 100%);
  contain: paint;
  color: #fff;

  /* Everything above and below the video frame: section padding, the caption
     panel, the controls row. The frame is then sized from what viewport height
     is left over, so video + caption + controls fit a laptop screen without
     scrolling. Keep this in step with any padding change below. */
  --sch-chrome: 470px;
  --sch-viewport-h: 100vh;
  /* Mobile stacks full-bleed; the width cap only kicks in from tablet up. */
  --sch-film-w: 100%;
}

@supports (height: 100svh) {
  .scholar-stories .scholar-cinema {
    /* svh ignores the mobile URL bar, so the frame does not resize mid-scroll. */
    --sch-viewport-h: 100svh;
  }
}

/* A video-only panel ends on the cinema, so it owns the section's closing gap. */
.scholar-stories .tab-content-wrapper.is-video-only > .scholar-cinema {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Slow-drifting light so the stage is never flat. Purely decorative. */
.scholar-stories .scholar-cinema__aurora {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 80%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40% 55% at 22% 40%, rgba(214, 76, 122, 0.35) 0%, rgba(214, 76, 122, 0) 70%),
    radial-gradient(35% 50% at 78% 25%, rgba(124, 0, 39, 0.55) 0%, rgba(124, 0, 39, 0) 70%);
  filter: blur(10px);
  animation: scholarAurora 18s ease-in-out infinite alternate;
  /* Declared up front so the layer is created once and kept, instead of being
     promoted and dropped around each scroll — the promotion churn is what leaves
     seams at the section edge. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes scholarAurora {
  from {
    transform: translate3d(-3%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(3%, 4%, 0) scale(1.12);
  }
}

/* Fine grain keeps the large gradient from banding on cheap panels. */
.scholar-stories .scholar-cinema__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
}

.scholar-stories .scholar-cinema__swiper {
  overflow: visible;
  padding-bottom: 0.5rem;
}

/* Slides size themselves (Swiper runs slidesPerView:"auto"), so the neighbour
   peeking in is the next film's actual edge rather than empty slide padding.
   flex-start stops an expanded caption stretching every other slide to match. */
.scholar-stories .scholar-cinema__swiper .swiper-wrapper {
  align-items: flex-start;
}

/* Neighbour slides peek in dimmed and shrunk, so the eye stays on the one in
   focus. Inactive slides also stop taking clicks — a half-visible play button
   that swallows a tap is the classic centred-slider bug. */
.scholar-stories .scholar-cinema__swiper .swiper-slide {
  width: var(--sch-film-w);
  height: auto;
  opacity: 0.28;
  transform: scale(0.9);
  transition: opacity 0.65s var(--sch-ease), transform 0.65s var(--sch-ease);
  pointer-events: none;
}

.scholar-stories .scholar-cinema__swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* No Swiper yet (still loading, Sitefinity design mode, CDN blocked): fall back
   to a scroll-snap rail rather than a stack of full-width videos. The scrollbar
   itself is suppressed — it would sit across the slider and, in the moments
   before init, flash a bar under the video. */
.scholar-stories .scholar-cinema__swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scholar-stories .scholar-cinema__swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.scholar-stories .scholar-cinema__swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  scroll-snap-align: center;
}

.scholar-stories .scholar-film {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  margin: 0 auto;
}

.scholar-stories .scholar-film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sch-radius);
  overflow: hidden;
  /* The poster scales on hover inside this rounded clip. backface-visibility
     pins the clip to the same layer as the child, so the corners stop shedding
     light pixels mid-transition. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #0b0406;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.5s var(--sch-ease), transform 0.5s var(--sch-ease);
}

/* Hairline that only lights up on the focused slide.
   Deliberately a plain border, not a masked gradient ring: mask-composite forces
   its own compositing layer, and once the slide is being transformed (swipe,
   the neighbour scale) the 1px masked edge rounds off inconsistently per frame
   and flashes white round the video. A border is rasterised with the element. */
.scholar-stories .scholar-film__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--sch-ease);
}

.scholar-stories .swiper-slide-active .scholar-film__frame::after {
  opacity: 1;
}

.scholar-stories .scholar-film__frame iframe,
.scholar-stories .scholar-film__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  animation: scholarFrameIn 0.5s var(--sch-ease) both;
}

@keyframes scholarFrameIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Poster facade ------------------------------------------------------- */

.scholar-stories .scholar-film__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  z-index: 2;
}

/* display:flex above outranks the UA's [hidden] rule, so the facade has to be
   told explicitly to get out of the way once the player is in. */
.scholar-stories .scholar-film__facade[hidden] {
  display: none;
}

.scholar-stories .scholar-film__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--sch-ease), filter 0.6s var(--sch-ease);
  filter: saturate(0.9);
}

.scholar-stories .scholar-film__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(26, 7, 13, 0.15) 0%, rgba(16, 5, 8, 0.72) 100%),
    linear-gradient(180deg, rgba(98, 0, 31, 0.25) 0%, rgba(16, 5, 8, 0.55) 100%);
  transition: opacity 0.5s var(--sch-ease);
}

.scholar-stories .scholar-film__play {
  position: relative;
  z-index: 1;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* No backdrop-filter: this sits inside a rounded overflow:hidden frame that is
     itself transformed on hover and during swipes. Chrome re-samples the backdrop
     every frame and leaks light pixels at the clip edge — the flicker round the
     video. A flat translucent fill over the scrim reads the same. */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  transition: transform 0.45s var(--sch-ease), background-color 0.45s var(--sch-ease),
    border-color 0.45s var(--sch-ease), color 0.45s var(--sch-ease);
}

.scholar-stories .scholar-film__play::before {
  /* Breathing halo — the one bit of motion that says "this is playable". */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: scholarPulse 2.8s var(--sch-ease) infinite;
}

.scholar-stories .scholar-film__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 20px solid currentColor;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

@keyframes scholarPulse {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  70% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.scholar-stories .scholar-film__cue {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  transform: translateY(4px);
  transition: transform 0.45s var(--sch-ease), opacity 0.45s var(--sch-ease);
}

.scholar-stories .scholar-film__facade:hover .scholar-film__poster,
.scholar-stories .scholar-film__facade:focus-visible .scholar-film__poster {
  transform: scale(1.07);
  filter: saturate(1.05);
}

.scholar-stories .scholar-film__facade:hover .scholar-film__play,
.scholar-stories .scholar-film__facade:focus-visible .scholar-film__play {
  transform: scale(1.08);
  background: #fff;
  border-color: #fff;
  color: var(--sch-maroon);
}

.scholar-stories .scholar-film__facade:hover .scholar-film__cue,
.scholar-stories .scholar-film__facade:focus-visible .scholar-film__cue {
  transform: translateY(0);
  opacity: 1;
}

.scholar-stories .scholar-film__facade:active .scholar-film__play {
  transform: scale(0.97);
}

/* --- Slide caption ------------------------------------------------------- */

/* padding-bottom reserves the toggle row whether or not this caption needs one,
   so the single card with a "Read more" is not taller than its neighbours. */
.scholar-stories .scholar-film__meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.75rem 2.75rem;
  border-radius: var(--sch-radius-sm);
  text-align: left;
  /* Same reason as the play button — the whole slide translates on every swipe. */
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.scholar-stories .scholar-film__who {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.scholar-stories .scholar-film__avatar {
  flex: 0 0 auto;
  width: 56px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.07);
}

.scholar-stories .scholar-film__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.scholar-stories .scholar-film__monogram {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

/* Name and role are clamped so a long scholarship title cannot push one card's
   caption panel taller than the rest. --sch-id-lines drops to 1 from tablet up,
   where there is width enough for either to sit on a single line. */
.scholar-stories .scholar-film__name,
.scholar-stories .scholar-film__role {
  --sch-id-lines: 2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: var(--sch-id-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reserve exactly what the clamp allows, so a two-line name does not make its
   card taller than a one-line one. */
.scholar-stories .scholar-film__name {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  min-height: calc(var(--sch-id-lines) * 1.3em);
}

.scholar-stories .scholar-film__role {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.75;
  min-height: calc(var(--sch-id-lines) * 1.5em);
}

/* Captions are the one field with no length limit in the designer. Clamping to a
   fixed line count AND reserving that height means a one-line caption and a
   twenty-line one produce identically sized cards — the slider never lurches as
   you move between them. --sch-desc-lines is retuned per breakpoint below. */
.scholar-stories .scholar-film__meta .swipe-desc {
  --sch-desc-lines: 3;
  --sch-desc-leading: 1.75;
  margin: 0;
  font-size: 0.95rem;
  line-height: var(--sch-desc-leading);
  color: rgba(255, 255, 255, 0.82);
  min-height: calc(var(--sch-desc-lines) * var(--sch-desc-leading) * 1em);
}

.scholar-stories .scholar-film__meta .swipe-desc.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: var(--sch-desc-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scholar-stories .scholar-film__more {
  position: absolute;
  left: 1.75rem;
  bottom: 1rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.scholar-stories .scholar-film__more:hover {
  opacity: 1;
  border-color: currentColor;
}

/* --- Controls ------------------------------------------------------------ */

.scholar-stories .scholar-cinema__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.scholar-stories .scholar-arrow {
  flex: 0 0 auto;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.35s var(--sch-ease), background-color 0.35s var(--sch-ease),
    color 0.35s var(--sch-ease), border-color 0.35s var(--sch-ease), opacity 0.35s var(--sch-ease);
}

.scholar-stories .scholar-arrow svg {
  width: 20px;
  height: 20px;
}

.scholar-stories .scholar-arrow:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sch-maroon);
  transform: scale(1.08);
}

.scholar-stories .scholar-arrow--prev:hover {
  transform: scale(1.08) translateX(-2px);
}

.scholar-stories .scholar-arrow--next:hover {
  transform: scale(1.08) translateX(2px);
}

.scholar-stories .scholar-arrow:disabled,
.scholar-stories .scholar-arrow.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.scholar-stories .scholar-cinema__track {
  position: relative;
  flex: 0 1 220px;
  height: 3px;
  border-radius: 100vw;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}

.scholar-stories .scholar-cinema__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.7));
  transform: scaleX(var(--sch-progress));
  transform-origin: left center;
  transition: transform 0.5s var(--sch-ease);
}

.scholar-stories .scholar-cinema__count {
  margin: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}

.scholar-stories .scholar-cinema__count .is-current {
  color: #fff;
  font-weight: 700;
}

.scholar-stories .scholar-cinema__count .is-sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}

/* A single video needs no navigation. */
.scholar-stories .scholar-cinema.is-single .scholar-cinema__controls {
  display: none;
}

/* --- Desktop & laptop: height-aware frame, arrows flanking the video ------ */

@media only screen and (min-width: 769px) {
  .scholar-stories .scholar-film__name,
  .scholar-stories .scholar-film__role {
    --sch-id-lines: 1;
  }
}

@media only screen and (min-width: 1025px) {
  .scholar-stories .scholar-cinema {
    /* No percentage in here: the arrow offset below multiplies this value, and a
       % would resolve against the arrow's own box instead of the film's. */
    --sch-film-w: min(1000px, max(520px, calc((var(--sch-viewport-h) - var(--sch-chrome)) * 16 / 9)));
  }

  .scholar-stories .scholar-cinema__controls {
    /* Arrows leave the row and flank the frame; the rail and the counter stay. */
    gap: 1.5rem;
  }

  .scholar-stories .scholar-arrow {
    position: absolute;
    /* Half the frame height — frame is 16:9 off the film width, and the shell
       starts at the top of the frame, so this lands dead centre on the video. */
    top: calc(var(--sch-film-w) * 9 / 32);
    transform: translateY(-50%);
    z-index: 3;
  }

  /* Sit just outside the film rather than at the shell edge, which on a wide
     monitor would strand the arrows a couple of hundred pixels from the video.
     max() keeps them on screen if the film ever fills the shell. */
  .scholar-stories .scholar-arrow--prev {
    left: max(0px, calc(50% - var(--sch-film-w) / 2 - 4.25rem));
  }

  .scholar-stories .scholar-arrow--next {
    right: max(0px, calc(50% - var(--sch-film-w) / 2 - 4.25rem));
  }

  /* The hover nudges have to keep the centring translate or the button jumps. */
  .scholar-stories .scholar-arrow:hover {
    transform: translateY(-50%) scale(1.08);
  }

  .scholar-stories .scholar-arrow--prev:hover {
    transform: translateY(-50%) scale(1.08) translateX(-2px);
  }

  .scholar-stories .scholar-arrow--next:hover {
    transform: translateY(-50%) scale(1.08) translateX(2px);
  }
}

/* Laptop panels (1366x768 and friends) leave roughly 620px of usable height.
   Trim the chrome and drop the caption to two lines so the video, its caption
   and the controls all land above the fold instead of the controls hiding. */
@media only screen and (min-width: 1025px) and (max-height: 900px) {
  .scholar-stories .scholar-cinema {
    --sch-chrome: 330px;
    padding: clamp(2rem, 4vh, 3rem) 0 clamp(1.75rem, 3.5vh, 2.5rem);
  }

  .scholar-stories .tab-content-wrapper.is-video-only > .scholar-cinema {
    padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
  }

  .scholar-stories .scholar-film {
    gap: 0.875rem;
  }

  .scholar-stories .scholar-film__meta {
    gap: 0.75rem;
    padding: 1rem 1.25rem 2.25rem;
  }

  .scholar-stories .scholar-film__more {
    left: 1.25rem;
    bottom: 0.75rem;
  }

  .scholar-stories .scholar-film__meta .swipe-desc {
    --sch-desc-lines: 2;
    --sch-desc-leading: 1.6;
    font-size: 0.9rem;
  }

  .scholar-stories .scholar-film__avatar {
    width: 46px;
  }

  .scholar-stories .scholar-cinema__controls {
    margin-top: 1.25rem;
  }

  .scholar-stories .scholar-arrow {
    width: 46px;
  }
}

/* ==========================================================================
   CONDITION B — written stories (alumni grid)
   ========================================================================== */

.scholar-stories .scholar-alumni {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, #fff 0%, var(--sch-surface) 40%, var(--sch-surface) 100%);
}

.scholar-stories .alumniStoriesListing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scholar-stories .alumniStoryItem {
  display: flex;
}

.scholar-stories .alumniStoryItem.is-hidden {
  display: none;
}

/* Cards revealed by "Load more" animate in themselves — ScrollReveal has already
   cleaned up by then and would not touch them. */
.scholar-stories .alumniStoryItem.is-revealed {
  animation: scholarCardIn 0.55s var(--sch-ease) both;
}

@keyframes scholarCardIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.scholar-stories .alumniStoryBox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--sch-radius);
  background: #fff;
  border: 1px solid var(--sch-line);
  box-shadow: 0 18px 40px -30px rgba(22, 22, 22, 0.45);
  transition: transform 0.45s var(--sch-ease), box-shadow 0.45s var(--sch-ease),
    border-color 0.45s var(--sch-ease);
}

.scholar-stories .alumniStoryItem:hover .alumniStoryBox,
.scholar-stories .alumniStoryItem:focus-within .alumniStoryBox {
  transform: translateY(-8px);
  border-color: rgba(124, 0, 39, 0.18);
  box-shadow: 0 34px 60px -34px rgba(98, 0, 31, 0.6);
}

/* --- Card header --------------------------------------------------------- */

.scholar-stories .alumniStory-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(125deg, var(--sch-maroon) 0%, var(--sch-bright) 55%, #96063a 100%);
}

.scholar-stories .alumniStory-header__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.05);
  transition: transform 0.9s var(--sch-ease);
}

.scholar-stories .alumniStoryItem:hover .alumniStory-header__bg {
  transform: scale(1.14);
}

.scholar-stories .alumniStory-header__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(125deg, rgba(98, 0, 31, 0.94) 0%, rgba(124, 0, 39, 0.86) 55%, rgba(150, 6, 58, 0.78) 100%);
}

/* Oversized quote mark, clipped by the header — the signature flourish. */
.scholar-stories .alumniStory-header::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -18px;
  width: 132px;
  height: 95px;
  opacity: 0.16;
  background-color: #fff;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299 214"><path d="M0 128H64L21.333 213.333H85.333L128 128V0H0V128Z"/><path d="M170.667 0V128H234.667L192 213.333H256L298.667 128V0H170.667Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299 214"><path d="M0 128H64L21.333 213.333H85.333L128 128V0H0V128Z"/><path d="M170.667 0V128H234.667L192 213.333H256L298.667 128V0H170.667Z"/></svg>') no-repeat center / contain;
  transition: transform 0.6s var(--sch-ease), opacity 0.6s var(--sch-ease);
  pointer-events: none;
}

.scholar-stories .alumniStoryItem:hover .alumniStory-header::after {
  transform: translate3d(-6px, 4px, 0) rotate(-4deg);
  opacity: 0.26;
}

.scholar-stories .alumniThumbContainer {
  flex: 0 0 auto;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 4px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  transition: transform 0.45s var(--sch-ease), box-shadow 0.45s var(--sch-ease);
}

.scholar-stories .alumniStoryItem:hover .alumniThumbContainer {
  transform: scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.75);
}

.scholar-stories .alumniThumbContainer figure {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sch-surface);
}

.scholar-stories .alumniThumbContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.scholar-stories .alumniThumbInitials {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sch-maroon);
}

.scholar-stories .alumniStory-header-content {
  min-width: 0;
}

.scholar-stories .alumniName {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.scholar-stories .alumniStory-role,
.scholar-stories .alumniStory-role p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Card body ----------------------------------------------------------- */

.scholar-stories .alumniStory-description-box {
  flex: 1 1 auto;
  display: flex;
}

.scholar-stories .alumniStory-description-box-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.75rem 1.5rem;
  color: var(--sch-grey);
}

.scholar-stories .alumniStatement {
  position: relative;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sch-ink);
}

/* Rendered as a single plain-text run by the view (PlainText()); -webkit-line-clamp
   only clamps inline content, so any block markup here would defeat it. */
.scholar-stories .alumniStatement.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scholar-stories .alumniStory-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sch-bright);
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.3s ease, gap 0.3s var(--sch-ease);
}

/* Arrow rather than an underline: this opens a dialog, it does not expand. */
.scholar-stories .alumniStory-toggle::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') no-repeat center / contain;
}

.scholar-stories .alumniStory-toggle:hover {
  color: var(--sch-ink);
  gap: 0.85rem;
}

/* ==========================================================================
   Story dialog — opened from a card's "Read full story"
   Lives on <body>, outside .scholar-stories, so it is scoped by its own class.
   ========================================================================== */

.scholar-modal {
  --sch-modal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sch-modal-from-x: 0px;
  --sch-modal-from-y: 40px;
  position: fixed;
  inset: 0;
  /* Must clear the Giving nav. main.min.css puts z-index 999999 on <header> and
     1000000 on #header (the stacked LKY bar), and this dialog is appended to
     <body> - a sibling of that header, not a child. It currently paints on top
     only because #smooth-wrapper happens to isolate the header into its own
     stacking context; the moment that wrapper is removed the sticky nav would
     cover an open dialog. Sit above both outright rather than rely on it. */
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.scholar-modal[hidden] {
  display: none;
}

.scholar-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(14, 4, 7, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity 0.35s var(--sch-modal-ease);
}

.scholar-modal.is-open .scholar-modal__backdrop {
  opacity: 1;
}

.scholar-modal__dialog {
  position: relative;
  width: min(100%, 720px);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 60px 120px -40px rgba(20, 2, 9, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12);
  /* Starts offset toward the card that opened it, so the dialog reads as having
     come from that card rather than appearing from nowhere. */
  opacity: 0;
  transform: translate3d(var(--sch-modal-from-x), var(--sch-modal-from-y), 0) scale(0.92);
  transition: opacity 0.3s var(--sch-modal-ease), transform 0.3s var(--sch-modal-ease);
}

.scholar-modal.is-open .scholar-modal__dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  /* Overshoot only on the way in — closing snaps back cleanly. */
  transition: opacity 0.4s var(--sch-modal-ease),
    transform 0.62s cubic-bezier(0.16, 1.02, 0.28, 1.06);
}

.scholar-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.3s var(--sch-modal-ease), background-color 0.3s ease,
    color 0.3s ease;
}

.scholar-modal__close svg {
  width: 18px;
  height: 18px;
}

.scholar-modal__close:hover {
  background: #fff;
  color: var(--sch-maroon, #62001f);
  transform: rotate(90deg);
}

/* --- Dialog header ------------------------------------------------------- */

.scholar-modal__header {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 4rem 2rem 2rem;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(125deg, #62001f 0%, #7c0027 55%, #96063a 100%);
}

.scholar-modal__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

.scholar-modal__bg[hidden] {
  display: none;
}

.scholar-modal__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(125deg, rgba(98, 0, 31, 0.93) 0%, rgba(124, 0, 39, 0.86) 55%, rgba(150, 6, 58, 0.8) 100%);
}

/* Oversized quote mark that sweeps in behind the name. */
.scholar-modal__header::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -22px;
  width: 150px;
  height: 108px;
  opacity: 0;
  background-color: #fff;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299 214"><path d="M0 128H64L21.333 213.333H85.333L128 128V0H0V128Z"/><path d="M170.667 0V128H234.667L192 213.333H256L298.667 128V0H170.667Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299 214"><path d="M0 128H64L21.333 213.333H85.333L128 128V0H0V128Z"/><path d="M170.667 0V128H234.667L192 213.333H256L298.667 128V0H170.667Z"/></svg>') no-repeat center / contain;
  pointer-events: none;
}

.scholar-modal.is-open .scholar-modal__header::after {
  animation: scholarGlyphIn 0.9s var(--sch-modal-ease) 0.18s both;
}

@keyframes scholarGlyphIn {
  from {
    opacity: 0;
    transform: translate3d(26px, -14px, 0) rotate(10deg) scale(0.8);
  }
  to {
    opacity: 0.2;
    transform: none;
  }
}

.scholar-modal__avatar {
  flex: 0 0 auto;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8);
}

.scholar-modal__avatar figure {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  color: var(--sch-maroon, #62001f);
  font-weight: 700;
  font-size: 1.35rem;
}

.scholar-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.scholar-modal__name {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.scholar-modal__role,
.scholar-modal__role p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Dialog body --------------------------------------------------------- */

.scholar-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2rem;
  /* Fades the text under the bottom edge so a long story reads as scrollable. */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 2rem), transparent 100%);
}

.scholar-modal__body::-webkit-scrollbar {
  width: 6px;
}

.scholar-modal__body::-webkit-scrollbar-thumb {
  border-radius: 100vw;
  background: rgba(98, 0, 31, 0.25);
}

.scholar-modal__quote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #262626;
}

/* Staggered reveal: avatar, then name, role and the quote itself. */
.scholar-modal.is-open .scholar-modal__avatar,
.scholar-modal.is-open .scholar-modal__name,
.scholar-modal.is-open .scholar-modal__role,
.scholar-modal.is-open .scholar-modal__quote {
  animation: scholarModalIn 0.55s var(--sch-modal-ease) both;
}

.scholar-modal.is-open .scholar-modal__avatar {
  animation-delay: 0.14s;
}

.scholar-modal.is-open .scholar-modal__name {
  animation-delay: 0.2s;
}

.scholar-modal.is-open .scholar-modal__role {
  animation-delay: 0.26s;
}

.scholar-modal.is-open .scholar-modal__quote {
  animation-delay: 0.32s;
}

@keyframes scholarModalIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Page behind the dialog must not scroll under it. */
html.scholar-modal-lock,
html.scholar-modal-lock body {
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .scholar-modal {
    padding: 0;
    align-items: flex-end;
  }

  .scholar-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    --sch-modal-from-x: 0px;
    --sch-modal-from-y: 60px;
  }

  .scholar-modal__header {
    padding: 1.5rem 3.5rem 1.5rem 1.5rem;
    gap: 1rem;
  }

  .scholar-modal__avatar {
    width: 60px;
  }

  .scholar-modal__body {
    padding: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scholar-modal__dialog,
  .scholar-modal.is-open .scholar-modal__dialog {
    transition-duration: 0.01ms;
    transform: none;
  }

  .scholar-modal.is-open .scholar-modal__header::after,
  .scholar-modal.is-open .scholar-modal__avatar,
  .scholar-modal.is-open .scholar-modal__name,
  .scholar-modal.is-open .scholar-modal__role,
  .scholar-modal.is-open .scholar-modal__quote {
    animation: none;
    opacity: 1;
  }

  .scholar-modal.is-open .scholar-modal__header::after {
    opacity: 0.2;
  }
}

/* --- Load more ----------------------------------------------------------- */

.scholar-stories .scholar-alumni__more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.scholar-stories .scholar-load-more {
  border-radius: 100vw;
  padding: 13px 32px;
}

.scholar-stories .scholar-load-more__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 100vw;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(98, 0, 31, 0.12);
  color: inherit;
  transition: background-color 0.3s ease;
}

.scholar-stories .scholar-load-more:hover .scholar-load-more__count {
  background: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   Responsive — aligned with responsive.css breakpoints (1024 / 768)
   ========================================================================== */

@media only screen and (max-width: 1024px) {
  .scholar-stories .scholar-shell {
    width: 90%;
  }

  .scholar-stories .alumniStoriesListing {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .scholar-stories .scholar-cinema__track {
    flex-basis: 160px;
  }
}

@media only screen and (max-width: 768px) {
  .scholar-stories .scholar-shell {
    width: 88%;
  }

  .scholar-stories .scholar-film {
    gap: 1rem;
  }

  .scholar-stories .scholar-film__frame {
    border-radius: 14px;
  }

  .scholar-stories .scholar-film__meta {
    padding: 1.25rem 1.25rem 2.5rem;
  }

  .scholar-stories .scholar-film__more {
    left: 1.25rem;
  }

  .scholar-stories .scholar-film__cue {
    display: none;
  }

  /* Only a sliver of the neighbours shows at this width, so dim them far less —
     the desktop 0.28 reads as a rendering glitch mid-swipe. :not() keeps this off
     the active slide, which shares the base rule's specificity and would
     otherwise lose to it purely on source order. */
  .scholar-stories .scholar-cinema__swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.6;
    transform: scale(0.96);
  }

  .scholar-stories .scholar-cinema__controls {
    gap: 0.75rem;
  }

  .scholar-stories .scholar-arrow {
    width: 44px;
  }

  .scholar-stories .scholar-cinema__track {
    flex-basis: 90px;
  }

  .scholar-stories .alumniStoriesListing {
    grid-template-columns: 1fr;
  }

  .scholar-stories .alumniStory-header,
  .scholar-stories .alumniStory-description-box-inner {
    padding: 1.5rem 1.25rem;
  }

  .scholar-stories .alumniThumbContainer {
    width: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scholar-stories .scholar-cinema__aurora,
  .scholar-stories .scholar-film__play::before,
  .scholar-stories .alumniStoryItem.is-revealed {
    animation: none;
  }

  .scholar-stories *,
  .scholar-stories *::before,
  .scholar-stories *::after {
    transition-duration: 0.01ms !important;
  }
}