/* «Наши выпускники» (alumni.html). Reputational page, not a register.
   Header, nav, hero geometry, eyebrow, intro and filter look are REUSED from
   css/members.css (body carries both .members-page and .alumni-page) so the
   two people pages stay identical by construction.

   Design concept — «Зал выпускников» / institutional honour hall. The page has
   to read as expensive on the data we actually have (name + qualification +
   year), because photos, job titles and bios are empty for everyone today.
   So the CREDENTIAL is the hero object, not the portrait: engraved matte
   plates, gold on purple, large tabular year numerals.

   Matte flat surfaces only — no glass, no glow, no gradients, no gloss on the
   seals (see «ПОВЕРХНОСТИ И ЭФФЕКТЫ» in CLAUDE.md). Depth comes from hard
   offset shadows that read as the physical edge of a plate, plus real
   perspective via Atropos (initialised with highlight:false — that option is
   the shine overlay and is forbidden here). */

.alumni-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.alumni-main { display: block; padding: 72px 0 96px; background: #ffffff; }
.alumni-h2 { margin: 14px 0 12px; color: #361163; font-size: clamp(30px, 3vw, 40px); line-height: 1.18; letter-spacing: -.03em; text-align: left; }
.alumni-lead { max-width: 760px; margin: 0; color: #505050; font-size: 17px; line-height: 1.55; }

/* ── Engraved emblem (4 arrows of the CILT master icon) ────
   Self-drawing on scroll: every path carries pathLength="1", so one
   dasharray value works for circles and chevrons alike. */
.ac-emblem { display: block; width: 100%; height: 100%; }
.ac-emblem [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn .ac-emblem [pathLength] { animation: ac-draw .9s ease forwards; }
.is-drawn .ac-emblem [data-d="1"] { animation-delay: .10s; }
.is-drawn .ac-emblem [data-d="2"] { animation-delay: .18s; }
.is-drawn .ac-emblem [data-d="3"] { animation-delay: .26s; }
.is-drawn .ac-emblem [data-d="4"] { animation-delay: .34s; }
.is-drawn .ac-emblem [data-d="5"] { animation-delay: .42s; }
@keyframes ac-draw { to { stroke-dashoffset: 0; } }

/* ── Vertical rhythm ───────────────────────────────────────
   courses-style.css:139 gives EVERY bare <section> `padding: 100px 0` and a
   1px grey bottom border. Nothing here reset it, so each block of this page
   carried 100px of dead space top and bottom (188px between the hero and the
   first word) plus stray grey rules across the page. Reset it once and set a
   deliberate rhythm instead. */
.alumni-page .alumni-main section { padding: 0; border-bottom: 0; }

/* ── Intro: text + «три ступени» illustration ──────────────
   The illustration is what stops the page opening with an empty right half. */
.ac-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 56px; align-items: center;
}
.ac-intro-text .alumni-lead { margin-top: 4px; }
.ac-levels { margin: 26px 0 0; padding: 0; list-style: none; max-width: 760px; }
.ac-levels li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; border-top: 1px solid #ebebeb;
  color: #505050; font-size: 14px; line-height: 1.45;
}
.ac-levels li:last-child { border-bottom: 1px solid #ebebeb; }
.ac-levels b { flex: 0 0 62px; color: #8a6844; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Flat matte illustration in the house style of .supplement-illustration
   (courses-style.css:3826): CSS boxes for the plates, one small inline SVG
   seal, no gradients and no glow. Three plates rise left to right, so the
   composition reads as a ladder of qualifications rather than a price list. */
.ac-stairs-wrap { width: 100%; }
.ac-stairs-wrap .atropos-inner { overflow: visible; }
.ac-stairs { position: relative; height: 268px; width: 340px; margin-left: auto; }
.ac-step {
  position: absolute; bottom: 0; width: 100px; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 14px 13px;
  border-radius: 9px;
}
.ac-step--l3 { left: 0; height: 132px; background: #f1eef5; border: 1px solid #ded6e8; }
.ac-step--l5 { left: 120px; height: 186px; background: #e6dff0; border: 1px solid #cfc2e0; }
.ac-step--l6 {
  left: 240px; height: 246px; background: #361163; border: 1px solid #361163;
  box-shadow: 0 14px 30px rgba(54,17,99,.26);
}
/* Engraved hairline inside the flagship plate — the same device that makes a
   printed diploma read as a document rather than a coloured box. */
.ac-step--l6::before {
  content: ''; position: absolute; inset: 7px; border: 1px solid #6E5A44; border-radius: 5px; pointer-events: none;
}
.ac-step-seal { width: 30px; height: 30px; margin: 0 0 12px auto; color: #C0A582; }
.ac-step-line { height: 7px; border-radius: 3px; background: #cdc2da; margin-bottom: 9px; }
.ac-step--l6 .ac-step-line { background: #55307F; }
.ac-step-line--title { width: 72%; height: 9px; background: #b3a5c4; }
.ac-step--l6 .ac-step-line--title { background: #C0A582; }
.ac-step-line--short { width: 46%; }
.ac-step-tag {
  margin-top: auto; color: #8a6844; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.ac-step--l6 .ac-step-tag { color: #C0A582; }

/* ── Stories ───────────────────────────────────────────── */
.alumni-stories { margin-top: 88px; scroll-margin-top: 108px; }
.alumni-list { scroll-margin-top: 108px; }
.alumni-stories[hidden] { display: none; }
.alumni-stories-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; margin-top: 36px;
}
.alumni-stories-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* One story runs as a full-width banner: portrait on the left, quote set
   large on the right. A single card stranded in a three-column grid reads as
   a gap; the same person across the full width reads as a feature. */
.alumni-stories-grid.is-one { grid-template-columns: 1fr; }
.alumni-stories-grid.is-one .alumni-story {
  grid-row: auto; grid-template-rows: auto auto auto minmax(0, 1fr);
  /* Proportional, not a fixed 430px: at ~768px a fixed portrait column left
     the text only ~270px and the quote wrapped into a tall ribbon. */
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
}
/* The portrait is taken out of flow, otherwise its natural height drives the
   whole banner and leaves a void beside the text. Height now comes from the
   text column, with a floor so a short quote still reads as a feature. */
.alumni-stories-grid.is-one .alumni-story-media { position: relative; grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 360px; }
.alumni-stories-grid.is-one .alumni-story-media img { position: absolute; inset: 0; }
.alumni-stories-grid.is-one .alumni-story-qual { grid-column: 2; grid-row: 1; padding: 40px 40px 0; }
.alumni-stories-grid.is-one .alumni-story h3 { grid-column: 2; grid-row: 2; padding: 0 40px; font-size: 28px; }
.alumni-stories-grid.is-one .alumni-story-role { grid-column: 2; grid-row: 3; padding: 0 40px; font-size: 15px; }
.alumni-stories-grid.is-one .alumni-story-quote {
  grid-column: 2; grid-row: 4; align-self: start; margin: 22px 40px 40px;
  font-size: 18px; line-height: 1.6; -webkit-line-clamp: 8;
}
/* Rows via subgrid: a two-line name or longer role in one card never pushes
   the neighbouring card's quote down (measured, not eyeballed). */
.alumni-story {
  position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
  border: 1px solid #e5e0ea; border-radius: 8px; overflow: hidden; background: #ffffff;
  box-shadow: 0 4px 16px rgba(54,17,99,.055);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.alumni-story:hover { transform: translateY(-6px); border-color: #C0A582; box-shadow: 0 16px 32px rgba(54,17,99,.14); }
.alumni-story:focus-within { border-color: #C0A582; }
.alumni-story-media { aspect-ratio: 4 / 5; overflow: hidden; background: #ebebeb; }
.alumni-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .45s ease; }
.alumni-story:hover .alumni-story-media img { transform: scale(1.04); }
.alumni-story-qual { padding: 24px 24px 0; color: #8a6844; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.alumni-story h3 { margin: 10px 0 0; padding: 0 24px; color: #361163; font-size: 20px; line-height: 1.3; text-align: left; }
.alumni-story-open { all: unset; cursor: pointer; }
.alumni-story-open::after { content: ''; position: absolute; inset: 0; }
.alumni-story-open:focus-visible { outline: none; }
.alumni-story:has(.alumni-story-open:focus-visible) { outline: 3px solid #C0A582; outline-offset: 3px; }
.alumni-story-role { margin: 8px 0 0; padding: 0 24px; color: #505050; font-size: 14px; line-height: 1.45; }
.alumni-story-role strong { display: block; color: #505050; font-weight: 700; }
.alumni-story-quote {
  margin: 20px 24px 26px; padding: 2px 0 2px 16px; border-left: 2px solid #C0A582;
  color: #505050; font-size: 15px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Alumni hall (card grid band) ─────────────────────────
   Light grey strip that frames the tools + card grid, separate from the
   white intro above and the white stories/CTA below — white cards on grey
   read as their own showcase instead of blending into the intro's text
   column (owner, 2026-09-28: cards on white "got lost" and looked cheap). */
.alumni-hall { background: #ebebeb; margin-top: 56px; padding: 56px 0 64px; }

/* ── List tools ────────────────────────────────────────── */
.alumni-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0; }
.alumni-tools[hidden] { display: none; }
.alumni-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.alumni-filters[hidden] { display: none; }
.alumni-filters .members-filter { min-height: 44px; }
/* Pushed to the far end of the tools row — it used to float beside the intro
   paragraph, landing on the second line and looking unplaced. */
.alumni-count { margin-left: auto; color: #8c8098; font-size: 13px; white-space: nowrap; }

/* ── Card grid ─────────────────────────────────────────── */
/* Narrower than the old 3-up rhythm (owner: cards read as "cheap" at ~395px
   wide with only 176px of content) — 4-up on desktop, stepping down as the
   viewport shrinks (see Responsive). */
.ac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-top: 8px; }
.ac-grid[hidden], .alumni-more-wrap[hidden] { display: none; }

.ac-card {
  position: relative; overflow: hidden;
  border: 1px solid #e5e0ea; border-radius: 8px; background: #ffffff;
  box-shadow: 0 4px 16px rgba(54,17,99,.055);
  transition: opacity .45s ease, transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s cubic-bezier(.2,.7,.3,1), border-color .26s ease;
}
/* Engraved hairline just inside the edge, same device as the flagship plate
   in the intro illustration (.ac-step--l6::before): reads as a printed
   document, not a decoration. Matte only -- no glow, no gradient. */
.ac-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid transparent; border-radius: 5px; pointer-events: none; transition: border-color .26s ease; }
/* Staggered fade-up, armed by JS only (.is-reveal) so the cards stay visible
   when scripting or IntersectionObserver is unavailable.
   :not(:hover):not(:focus-within) on both rules is deliberate, not decorative:
   without it this selector's 3-4 classes outrank the 2-class `:hover` rule a
   few lines down on raw specificity, so the reveal's `transform: none` (or
   the pre-reveal offset, for a card that hasn't scrolled in yet) always won
   and the lift never actually rendered for any card a visitor could reach.
   Excluding the hover/focus states here means there is nothing left to win
   against -- the base `.ac-card`/`:hover` rules take over cleanly instead. */
.ac-grid.is-reveal .ac-card:not(:hover):not(:focus-within) { opacity: 0; transform: translateY(12px); }
.ac-grid.is-reveal .ac-card.is-in:not(:hover):not(:focus-within) { opacity: 1; transform: none; }
/* Every card responds the same way, whether or not it opens a dialog -- a
   credential plate that only some cards react to used to read as half the
   wall being switched off. Only the cursor and the story label still depend
   on openable (see .ac-card--static below). :focus-within mirrors :hover so
   keyboard and touch get the same feedback. */
.ac-card:hover, .ac-card:focus-within { transform: translateY(-6px); border-color: #C0A582; box-shadow: 0 18px 34px rgba(54,17,99,.15); }
.ac-card:hover::before, .ac-card:focus-within::before { border-color: rgba(192,165,130,.45); }
.ac-card:has(.ac-card-btn:focus-visible) { outline: 3px solid #C0A582; outline-offset: 3px; }
/* Two columns over a full-width foot: the portrait fills the left column from
   the top padding down to the foot's hairline (owner, 2026-09-29: rectangle
   instead of the disc, name to the right of the photo). Row 1 is 1fr so the
   portrait stretches with the card and every card in a row ends its photo on
   the same line as its neighbours. */
.ac-card-btn {
  position: relative; z-index: 1; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 16px;
  width: 100%; height: 100%; min-height: 190px; padding: 20px 20px 18px; box-sizing: border-box;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ac-card-btn:focus-visible { outline: none; }
.ac-card-media {
  grid-column: 1; grid-row: 1; align-self: stretch; min-height: 112px; margin-bottom: 16px;
  position: relative; overflow: hidden; border-radius: 4px; box-sizing: border-box;
}
.ac-card-photo { background: #ebebeb; }
.ac-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .4s ease; }
.ac-card:hover .ac-card-photo img, .ac-card:focus-within .ac-card-photo img { transform: scale(1.05); }
/* No photo yet: the same rectangle in brand purple with gold initials and an
   engraved hairline inside (the card's own ::before device), so a card
   without a portrait still reads as finished, not as an empty slot. */
.ac-card-mono {
  display: grid; place-items: center; background: #361163; color: #C0A582;
  font-size: 24px; font-weight: 700; letter-spacing: .02em;
  outline: 1px solid rgba(192,165,130,.45); outline-offset: -6px;
  transition: outline-color .26s ease;
}
.ac-card:hover .ac-card-mono, .ac-card:focus-within .ac-card-mono { outline-color: #C0A582; }
.ac-card-body { grid-column: 2; grid-row: 1; display: block; min-width: 0; padding-bottom: 16px; }
/* One medal per qualification, replacing the old identical four-arrow
   watermark (owner: "icons look like a joystick"). Rotate/colour run on
   their own 320ms timing, deliberately not the card's 260ms -- two moves
   sharing one duration read as a single blur instead of two considered ones. */
/* Floated, not absolutely placed: only the name's first line gives way to
   the medal, the rest of the narrow text column keeps its full width. The
   negative bottom margin keeps the float shorter than one text line — at its
   full 22px it overhung line two, and a long word that didn't fit beside it
   was pushed below the float, opening a gap inside the name. */
.ac-card-icon { float: right; width: 22px; height: 22px; margin: 0 0 -8px 8px; color: #361163; opacity: .34; transition: color .3s ease, opacity .3s ease, transform .32s cubic-bezier(.34,1.4,.4,1); }
.ac-card:hover .ac-card-icon, .ac-card:focus-within .ac-card-icon { color: #C0A582; opacity: 1; transform: rotate(-8deg) scale(1.1); }
.ac-card-name { display: block; margin-top: 0; color: #361163; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ac-card-alt { display: block; margin-top: 4px; color: #505050; font-size: 13px; line-height: 1.4; }
/* Without a story, nothing opens on click -- only the cursor and label differ. */
.ac-card--static .ac-card-btn { cursor: default; }
.ac-card-story { display: inline-block; margin-top: 12px; color: #8a6844; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ac-card-story::after { content: ' →'; }
.ac-card:hover .ac-card-story, .ac-card:focus-within .ac-card-story { color: #361163; }
.ac-card-role { display: block; margin-top: 9px; color: #505050; font-size: 13px; font-weight: 600; line-height: 1.45; }
.ac-card-org { display: block; margin-top: 2px; color: #505050; font-size: 13px; line-height: 1.45; }
/* Row 2 of an equal-height card, so a name that wraps onto two lines never
   misaligns the row's year line or photo edge. */
.ac-card-foot {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  width: 100%; padding-top: 16px; border-top: 1px solid #ebebeb;
}
.ac-card-qual { display: block; color: #8a6844; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; }
.ac-card-year { flex: 0 0 auto; color: #C0A582; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.alumni-more-wrap { margin-top: 36px; }
.alumni-more {
  min-height: 46px; padding: 12px 26px; border: 1px solid #361163; border-radius: 4px; background: #ffffff;
  color: #361163; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.alumni-more:hover { background: #361163; color: #ffffff; }
.alumni-more:focus-visible { outline: 3px solid #C0A582; outline-offset: 3px; }

/* White, not the old #ebebeb: the surrounding hall band is grey now, so a
   grey-on-grey empty state would have gone invisible. */
.alumni-empty { max-width: 680px; margin-top: 32px; padding: 32px; border-left: 3px solid #C0A582; background: #ffffff; color: #505050; font-size: 15px; line-height: 1.5; }
.alumni-empty strong { display: block; margin-bottom: 6px; color: #361163; font-size: 18px; }
.alumni-empty button {
  margin-top: 16px; padding: 0; border: 0; background: none; color: #361163; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ── CTA ───────────────────────────────────────────────── */
/* `.alumni-page .alumni-main section { padding: 0; }` near the top of this
   file (2 classes + a type selector, specificity 0,2,1) outranks a plain
   `.alumni-cta { padding: 56px }` (0,1,0) and silently won, so the box had
   NO internal padding at all — text sat flush against its own edges (owner,
   2026-09-28, caught on a screenshot: "выглядит как обрезанный кусок какой-то
   карточки"). Matching the reset's own ancestor chain, with `.alumni-cta` in
   place of the bare `section` type, gives this the specificity it needs
   (0,3,0) to actually win. */
/* Two columns: text (with the button at its foot) and the 3D object. No
   `overflow: hidden` any more — it existed only to clip the old watermark
   logo, and it would now cut off the object's lift, tilt and drop shadow. */
.alumni-page .alumni-main .alumni-cta {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px;
  margin-top: 96px; padding: 56px; border-radius: 8px; background: #361163;
}
.alumni-cta-text { position: relative; max-width: 640px; }
.alumni-cta h2 { margin: 13px 0 12px; color: #ffffff; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; text-align: left; }
.alumni-cta p { margin: 0; color: #ffffff; font-size: 17px; line-height: 1.5; }
/* Three-step path to the qualification — replaces a "Следующий выпуск"
   promise the block never actually kept (no real intake date exists to
   show).
   First cut of this was a plain numbered list with a thin left border between
   columns — the owner called it out on a screenshot as reading like settings
   text, not a designed section ("никакой премиальности"). This version reuses
   the purple-fill/gold-ring seal already used for the card-grid avatars
   (.ac-card-photo/.ac-card-mono) as the step badge, joined by a hairline
   track — a proper stepper, and the same bespoke motif appearing twice makes
   the page read as one system instead of two unrelated components. */
.alumni-cta-steps { display: flex; flex-wrap: nowrap; gap: 28px; margin: 36px 0 0; padding: 0; list-style: none; }
.alumni-cta-steps li { display: flex; flex: 1 1 0; flex-direction: column; gap: 14px; min-width: 0; }
.alumni-cta-step-top { display: flex; align-items: center; }
/* Purple disc, gold ring, gold numeral — identical treatment to the card
   avatars, just smaller, so the two read as the same brand device. */
.alumni-cta-step-badge {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; background: #361163; border: 2px solid #C0A582;
  color: #C0A582; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Runs from this badge toward the next one; the last step has none in the
   markup, so the line never dangles past the final node. */
.alumni-cta-step-track { flex: 1 1 auto; height: 1px; margin-left: 12px; background: rgba(192,165,130,.35); }
.alumni-cta-step-label { color: #ffffff; font-size: 14px; line-height: 1.45; }
/* Sits at the foot of the text column (owner, 2026-09-28: button to the
   bottom-left), so it lines up on the same left edge as the eyebrow, the
   heading and the stepper instead of floating in the middle of the right
   half. margin-top is what puts it at the bottom — no extra layout needed. */
.alumni-cta-button {
  position: relative; display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto;
  margin-top: 36px;
  padding: 15px 24px; border-radius: 6px; background: #C0A582; color: #361163;
  font-size: 15px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: background .2s ease, color .2s ease;
}
.alumni-cta-button svg { width: 18px; height: 18px; transition: transform .2s ease; }
.alumni-cta-button:hover { background: #A58B64; color: #ffffff; }
.alumni-cta-button:hover svg { transform: translateX(3px); }
.alumni-cta-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ── CTA object: diploma plate + raised seal ──────────────
   The block's visual anchor. Depth here is physical, not painted: three
   planes at different data-atropos-offset values (edge 0 / face 3 / seal 9),
   a solid extruded side, and one dense offset shadow. No gradient, no shine,
   no glow — the brand guide forbids all three, and the effect doesn't need
   them: it's the seal visibly pulling away from the paper as the pointer
   moves that reads as volume.
   The resting rotation matters as much as the tilt: on touch there is no
   hover at all, and under prefers-reduced-motion Atropos never initialises,
   so the static three-quarter view IS the object for those users. */
.ac-diploma-wrap { width: 400px; }
/* The seal deliberately overhangs the plate, so the Atropos box must not clip
   it — same fix as .ac-stairs-wrap above. */
.ac-diploma-wrap .atropos-inner { overflow: visible; }
.ac-diploma {
  position: relative; width: 356px; height: 252px; margin: 0 auto;
  transform: perspective(1100px) rotateY(-14deg) rotateX(6deg);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
/* Solid extruded side, offset down-right behind the paper — this is what
   gives the object an honest thickness rather than a skewed flat image. */
.ac-diploma-edge {
  position: absolute; inset: 0; border-radius: 10px; background: #240a44;
  transform: translate(13px, 15px);
}
/* Warm matte paper on the dark purple field: reads as an actual document and
   gives the block the light anchor it was missing. */
.ac-diploma-face {
  position: absolute; inset: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 15px;
  padding: 36px 36px 40px; border-radius: 10px; background: #f4f1ea;
  box-shadow: 0 26px 46px rgba(10,2,24,.34);
  transition: box-shadow .4s cubic-bezier(.2,.7,.3,1);
}
/* Engraved gold hairline — the same device as the flagship plate in the
   intro illustration (.ac-step--l6::before) and the alumni cards. */
.ac-diploma-face::before {
  content: ''; position: absolute; inset: 11px; border: 1px solid #C0A582; border-radius: 5px; pointer-events: none;
}
.ac-diploma-line { height: 7px; border-radius: 3px; background: #ded6c7; }
.ac-diploma-line--title { width: 58%; height: 10px; background: #C0A582; }
.ac-diploma-line--short { width: 42%; }
/* Purple disc, gold ring, logo printed on it — the same seal as the card
   avatars and the step badges, at the scale of an award medal. Overhangs the
   plate's corner on purpose: an object breaking its own frame reads as
   physically present. */
/* Outer span only positions and carries data-atropos-offset — its transform
   belongs to Atropos (the parallax). The visible disc is the inner element,
   so the hover lift below has a transform of its own to animate and the two
   compose instead of cancelling each other out. */
.ac-diploma-seal { position: absolute; right: -30px; bottom: -32px; width: 120px; height: 120px; }
.ac-diploma-seal-disc {
  display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box;
  border-radius: 50%; background: #361163; border: 3px solid #C0A582;
  box-shadow: 0 16px 28px rgba(10,2,24,.42);
  transition: transform .52s cubic-bezier(.34,1.3,.4,1), box-shadow .52s ease;
}
.ac-diploma-seal img { width: 62%; height: auto; display: block; }
/* Hover lifts the whole object, and the seal lifts further on its own, slower
   timing — two moves sharing one duration read as a single blur instead of
   depth (same reasoning as the card icons). */
.alumni-cta:hover .ac-diploma { transform: perspective(1100px) rotateY(-14deg) rotateX(6deg) translateY(-9px); }
.alumni-cta:hover .ac-diploma-face { box-shadow: 0 34px 58px rgba(10,2,24,.42); }
.alumni-cta:hover .ac-diploma-seal-disc { transform: translateY(-10px) scale(1.05); box-shadow: 0 24px 36px rgba(10,2,24,.46); }

.alumni-self-link { margin: 22px 0 0; color: #505050; font-size: 14px; }
.alumni-self-link a { color: #361163; font-weight: 700; text-underline-offset: 3px; }

/* ── Profile dialog ───────────────────────────────────── */
.alumni-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(19,5,38,.72);
}
.alumni-modal-overlay[hidden] { display: none; }
.alumni-modal {
  position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 40px; border-radius: 8px; background: #ffffff; box-shadow: 0 24px 60px rgba(19,5,38,.35);
  font-family: 'Inter', Arial, sans-serif; text-align: left;
}
.alumni-modal:focus { outline: none; }
.alumni-modal-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: #505050; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.alumni-modal-close svg { width: 20px; height: 20px; }
.alumni-modal-close:hover { background: #ebebeb; color: #361163; }
.alumni-modal-close:focus-visible { outline: 3px solid #C0A582; outline-offset: 2px; }
.alumni-modal-head { display: flex; align-items: center; gap: 22px; padding-right: 36px; }
.alumni-modal-photo { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #361163; border: 2px solid #C0A582; display: grid; place-items: center; }
.alumni-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.alumni-modal-photo span { color: #C0A582; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.alumni-modal h3 { margin: 0; color: #361163; font-size: 24px; line-height: 1.3; text-align: left; }
.alumni-modal-alt { margin: 4px 0 0; color: #505050; font-size: 13px; }
.alumni-modal-role { margin: 8px 0 0; color: #505050; font-size: 15px; line-height: 1.45; }
.alumni-modal-qual { margin-top: 28px; padding: 20px 22px; border-left: 3px solid #C0A582; background: #ebebeb; }
.alumni-modal-qual strong { display: block; color: #361163; font-size: 15px; line-height: 1.4; }
.alumni-modal-qual span { display: block; margin-top: 4px; color: #8a6844; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.alumni-modal-bio { margin: 24px 0 0; color: #505050; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.alumni-modal-label { margin: 28px 0 10px; color: #8c8098; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.alumni-modules { margin: 0; padding: 0; list-style: none; }
.alumni-modules li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ebebeb; color: #505050; font-size: 14px; line-height: 1.4; }
.alumni-modules li:last-child { border-bottom: 0; }
.alumni-modules svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: #C0A582; }
.alumni-modules code { color: #361163; font-family: inherit; font-weight: 700; }
.alumni-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.alumni-modal-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px; box-sizing: border-box;
  border-radius: 4px; background: #361163; color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  transition: background .2s ease;
}
.alumni-modal-link:hover { background: #251043; }
.alumni-modal-link:focus-visible { outline: 3px solid #C0A582; outline-offset: 3px; }
.alumni-modal-self { color: #505050; font-size: 13px; }
.alumni-modal-self a { color: #361163; font-weight: 700; text-underline-offset: 3px; }

/* ── Responsive ────────────────────────────────────────── */
/* Card grid steps down one column at a time (4 → 3 → 2 → 1) instead of
   jumping straight from 4 to 2, so a card never has to stretch wide enough
   to look like a different component. */
@media (max-width: 1279px) {
  .ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ac-intro { grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: 40px; }
  .ac-stairs { width: 296px; height: 244px; }
  .ac-step { width: 88px; }
  .ac-step--l5 { left: 104px; }
  .ac-step--l6 { left: 208px; height: 226px; }
}
@media (max-width: 1023px) {
  .alumni-main { padding: 60px 0 76px; }
  .alumni-list { scroll-margin-top: 74px; }
  .alumni-stories { margin-top: 76px; }
  .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stays 3-up (never 2-up: three stories in two columns leave an orphan). */
  .alumni-stories-grid { gap: 40px 20px; }
  .alumni-story-qual { padding: 20px 18px 0; }
  .alumni-story h3, .alumni-story-role { padding: 0 18px; }
  .alumni-story h3 { font-size: 18px; }
  .alumni-story-quote { margin: 18px 18px 22px; }
  /* Still two columns here, just tighter: stacking this early left the object
     alone at the bottom-left with a wide empty field of purple to its right,
     and the block stopped reading as one composition. */
  .alumni-page .alumni-main .alumni-cta { gap: 36px; padding: 44px 36px; margin-top: 80px; }
  .ac-diploma-wrap { width: 264px; }
  .ac-diploma { width: 232px; height: 164px; }
  .ac-diploma-face { gap: 11px; padding: 26px 26px 30px; }
  .ac-diploma-seal { width: 88px; height: 88px; right: -20px; bottom: -22px; }
  /* The horizontal track only makes sense chaining badges left to right; on a
     single column it's dropped and each step becomes a simple badge+label
     row instead (no left border either — a bare row already reads as one
     item without extra dividers). */
  .alumni-cta-steps { flex-direction: column; gap: 18px; }
  .alumni-cta-steps li { flex: none; flex-direction: row; align-items: center; gap: 14px; }
  .alumni-cta-step-track { display: none; }
}
@media (max-width: 860px) {
  /* Illustration drops under the text. The container keeps an EXPLICIT width:
     every plate inside is position:absolute, so without it the box collapses
     to 0x0 — the same trap documented on .supplement-illustration. */
  .ac-intro { grid-template-columns: 1fr; gap: 34px; }
  /* 296px, not 340: below 1100px the plates already use the compact geometry,
     so a 340px box left 44px of dead space to the right of the L6 plate. */
  .ac-stairs { margin: 0; width: 296px; max-width: 100%; height: 244px; }
}
@media (max-width: 767px) {
  /* Only now does the block stack: text → steps → button → object, so the
     call to action is never pushed below a decorative element. */
  .alumni-page .alumni-main .alumni-cta { grid-template-columns: 1fr; justify-items: start; gap: 38px; }
  .ac-diploma-wrap { max-width: 100%; }
  .alumni-stories-grid { grid-template-columns: 1fr; gap: 24px; }
  /* The one-story banner stacks: portrait on top, text under it. */
  .alumni-stories-grid.is-one .alumni-story { grid-template-columns: 1fr; grid-template-rows: auto; }
  .alumni-stories-grid.is-one .alumni-story-media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 5; }
  .alumni-stories-grid.is-one .alumni-story-media img { position: static; }
  .alumni-stories-grid.is-one .alumni-story-qual { grid-column: 1; grid-row: 2; padding: 20px 18px 0; }
  .alumni-stories-grid.is-one .alumni-story h3 { grid-column: 1; grid-row: 3; padding: 0 18px; font-size: 20px; }
  .alumni-stories-grid.is-one .alumni-story-role { grid-column: 1; grid-row: 4; padding: 0 18px; font-size: 14px; }
  .alumni-stories-grid.is-one .alumni-story-quote { grid-column: 1; grid-row: 5; margin: 18px 18px 22px; font-size: 15px; line-height: 1.55; }
}
@media (max-width: 640px) {
  .alumni-stories { margin-bottom: 72px; }
  .alumni-modal { padding: 28px 22px; }
  .alumni-modal-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .alumni-modal-photo { flex-basis: 80px; width: 80px; height: 80px; }
}
@media (max-width: 560px) {
  .ac-grid { grid-template-columns: 1fr; gap: 18px; }
  .ac-card-btn { min-height: 0; }
}
@media (max-width: 520px) {
  .alumni-page .alumni-main .alumni-cta { padding: 36px 24px; }
  .alumni-cta-button { width: 100%; justify-content: space-between; box-sizing: border-box; }
  /* Smaller, and with the overhanging seal pulled in — at this width an
     object hanging past its own box is what starts a horizontal scrollbar. */
  .ac-diploma-wrap { width: 236px; }
  .ac-diploma { width: 212px; height: 152px; }
  .ac-diploma-face { gap: 10px; padding: 22px 22px 26px; }
  .ac-diploma-line { height: 6px; }
  .ac-diploma-line--title { height: 8px; }
  .ac-diploma-seal { width: 76px; height: 76px; right: -14px; bottom: -16px; }
  .ac-diploma-seal-disc { border-width: 2px; }
}

/* ── Reduced motion ────────────────────────────────────── */
/* The wall becomes a static wrapped set, the emblems appear already drawn,
   and Atropos tilt is switched off in JS (see js/alumni-page.js). */
@media (prefers-reduced-motion: reduce) {
  .ac-emblem [pathLength] { stroke-dashoffset: 0; }
  .is-drawn .ac-emblem [pathLength] { animation: none; }
  .alumni-page *, .alumni-page *::before, .alumni-page *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}