/* ============================================================
   WHERE CIRS TAKES YOU — the alumni journey
   ------------------------------------------------------------
   Scoped to body.alumni. Seven chapters on one scroll: the
   campus, the departure, the field of destinations, the alumni,
   the pathways, the index, the return.

   THE PALETTE. The photographic opening retains its approved treatment.
   Editorial chapters below use white, ivory and gold, with dark body text.
   The final scoped block owns that treatment and the directory surface.

   THE TYPE. The display face (--font-display) against the
   quotation face (--font-quote), which does the work of a second
   voice; labels and attributions are Mona Sans, the site's
   interface face. Families are set once, in cirs.css.

   MOTION. Every "start hidden" state below is gated on
   html.js-motion, which cirs.js adds only when it is actually
   going to animate. No JavaScript, or prefers-reduced-motion,
   and every one of these elements is simply visible.
   ============================================================ */

body.alumni{
  --aj-ink:        var(--brand-deep);
  --aj-ink-2:      var(--brand-mid);
  --aj-ink-3:      var(--brand);
  --aj-ivory:      var(--paper-2);
  --aj-ivory-2:    var(--rule-soft);
  --aj-gold:       var(--gold);   /* on dark only  — 8.40:1 on --aj-ink   */
  --aj-gold-lit:   var(--gold-lit);
  --aj-gold-ink:   var(--label);   /* on pale only  — 9.14:1 on --aj-ivory */
  --aj-maroon:     var(--dark-deep);

  --aj-on-dark:      var(--paper-2);
  --aj-on-dark-soft: rgba(244,240,230,.76);
  --aj-on-dark-mute: rgba(244,240,230,.52);
  --aj-hair:         rgba(244,240,230,.18);
  --aj-hair-soft:    rgba(244,240,230,.10);

  --aj-display: var(--font-display);
  --aj-voice:   var(--font-quote);

  background:var(--aj-ink);
}

body.alumni main{ background:var(--aj-ink); }
html:has(body.alumni){ scroll-behavior:auto; }
body.alumni #curtain{ display:none; }
body.alumni .footer-wrap{ position:relative; bottom:auto; }
body.alumni section[id]{ scroll-margin-top:6rem; }

/* The shared under-construction note is built for a page made of paper, and
   this one is made of night. Darkening its ground without re-pitching its
   ink left the label at 1.71:1 — the same trap matharena.css documents, and
   the same four lines fix it. */
body.alumni .uc{ background:var(--aj-ink-2); border-top:1px solid var(--aj-hair-soft); }
body.alumni .uc__label{ color:var(--aj-gold); }
body.alumni .uc__text{ color:var(--aj-on-dark-soft); }
body.alumni .uc__text a{ color:var(--aj-gold-lit); border-bottom-color:var(--aj-hair); }
body.alumni .uc__text a:hover{ border-bottom-color:var(--aj-gold); }
body.alumni .uc__mark{ color:var(--aj-gold); border-color:var(--aj-hair); }

body.alumni ::selection{ background:var(--aj-gold); color:var(--aj-ink); }

body.alumni :focus-visible{
  outline:2px solid var(--aj-gold-lit);
  outline-offset:3px;
  border-radius:2px;
}

/* A shared small-caps label, since this page sets a great many of them. */
.aj-label{
  font-size:.7rem; letter-spacing:.20em; text-transform:uppercase;
  font-weight:600; color:var(--aj-gold);
}

/* ============================================================
   CHAPTER 1 — The opening
   ============================================================ */
.aj-open{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:0 clamp(64px,10vh,120px);
  overflow:clip;
  background:var(--aj-ink);
}
.aj-open__media{ position:absolute; inset:0; z-index:0; }
.aj-open__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Natural grading: the aerial is a green campus and stays one. The
     darkening below is a gradient, not a filter on the photograph. */
  transform:scale(1.06); transform-origin:50% 42%;
}
/* Readability without flattening the picture: dark at the feet where the
   lettering sits, clear across the top where the campus is. */
.aj-open__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(17,17,15,.94) 0%, rgba(17,17,15,.78) 26%,
                    rgba(17,17,15,.34) 52%, rgba(17,17,15,.18) 74%,
                    rgba(17,17,15,.42) 100%),
    radial-gradient(120% 70% at 50% 100%, rgba(17,17,15,.55), transparent 62%);
}
/* No max-width here. Capping this block is what wrapped "WHERE CIRS TAKES
   YOU" onto four lines on a wide screen and filled the window with it: the
   headline is sized from the viewport, so a fixed container can always be
   narrower than the line it has to hold. The lines are kept unbreakable
   below instead, and the size is chosen so they fit. */
.aj-open__inner{ position:relative; z-index:3; width:100%; }

/* The eyebrow gets a rule to sit on, so it reads as a standing label
   rather than as a stray line of small caps above the title. */
.aj-open__eyebrow{
  margin:0 0 clamp(20px,2.6vw,32px);
  display:flex; align-items:center; gap:16px;
}
.aj-open__eyebrow .sc{
  font-size:.7rem; letter-spacing:.30em; text-transform:uppercase;
  color:var(--aj-gold); font-weight:600; white-space:nowrap;
}
.aj-open__eyebrow::after{
  content:""; flex:0 1 clamp(40px,10vw,150px); height:1px;
  background:linear-gradient(to right, var(--aj-gold), transparent);
}

.aj-open__title{
  margin:0; color:var(--aj-on-dark);
  font-family:var(--aj-display); font-weight:400;
  /* Sized so both rows clear the widest gutter-to-gutter measure at every
     width, and so the campus behind them stays a photograph rather than a
     backdrop. */
  font-size:clamp(1.9rem, 6.4vw, 5.8rem);
  line-height:1.0; letter-spacing:-.025em;
  text-transform:uppercase;
  text-shadow:0 2px 26px rgba(5,5,4,.5);
}
/* Two rows, each on one line. nowrap is the guarantee: the size above is
   chosen to fit, and if a future edit makes a row longer it will overflow
   into the clip rather than silently reflow into a third row. */
.aj-open__line{ display:block; }
.aj-open__line > span{ display:block; white-space:nowrap; will-change:transform; }
/* They arrive from opposite sides of the window. .aj-open clips, so nothing
   here can put a horizontal scrollbar on the page. */
html.js-motion .aj-open__line:nth-child(1) > span{ transform:translateX(-104vw); }
html.js-motion .aj-open__line:nth-child(2) > span{ transform:translateX(104vw); }

.aj-open__sub{
  margin:clamp(22px,3.2vw,38px) 0 0;
  font-family:var(--aj-voice); font-style:italic;
  max-width:38ch;
  font-size:clamp(1.15rem,2.1vw,1.8rem);
  line-height:1.4; color:var(--aj-on-dark-soft); letter-spacing:.01em;
  text-shadow:0 1px 16px rgba(5,5,4,.7);
}
html.js-motion .aj-open__sub{ opacity:0; }
html.js-motion .aj-open__eyebrow{ opacity:0; }

/* ============================================================
   CHAPTER 2 — The departure portal
   ------------------------------------------------------------
   The campus recedes from full screen into one lit plate hanging
   in a dark field. No WebGL: the depth here is four layers, a
   scale and a blur, which is enough for the move and costs a
   fraction of a canvas on a mid-range phone.
   ============================================================ */
.aj-portal{
  position:relative; background:var(--aj-ink);
  min-height:100svh;
}
.aj-portal__stage{
  position:relative; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(18px,3vh,34px) var(--gut) clamp(28px,4vh,48px);
  overflow:clip;
}
/* The field the plate falls into: a slow radial, and a grain of distant
   marks that the script seeds so the dark is not empty. */
.aj-portal__depth{
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(var(--gold-rgb),.10), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, rgba(22,36,58,.55), transparent 70%);
  /* Visible by default so the dark is never flat without JavaScript; the
     rule below hands it to the timeline, which fades it up as the plate
     falls back into it. */
  opacity:1;
}
html.js-motion .aj-portal__depth{ opacity:0; }

.aj-portal__plate{
  position:relative; z-index:2; margin:0;
  width:min(100%, 900px, calc(150svh - 510px));
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
.aj-portal__plate img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover;
}
.aj-portal__cap{
  margin-top:12px; font-size:var(--fs-xs);
  color:var(--aj-on-dark-mute);
}
.aj-portal__cap .sc{
  color:var(--aj-gold); letter-spacing:.18em; text-transform:uppercase;
  margin-right:10px; font-weight:600;
}

.aj-portal__copy{
  position:relative; z-index:3;
  width:min(100%, 720px);
  margin-top:clamp(18px,3vh,30px);
  text-align:center;
}
.aj-portal__head{
  margin:0 0 18px; color:var(--aj-on-dark);
  font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.012em;
}
.aj-portal__head em{ color:var(--aj-gold-lit); font-style:italic; }
.aj-portal__lead{
  margin:0; color:var(--aj-on-dark-soft);
  font-size:var(--fs-lead); line-height:1.6;
  max-width:62ch; margin-inline:auto;
}

/* ============================================================
   CHAPTER 3 — The map
   ------------------------------------------------------------
   Nineteen real destinations on a real map, in Robinson, with a
   route out to each from Siruvani. Where a point sits is where
   the institution is; the four regions group because the world
   does. Chapter six gives the same nineteen as plain text for
   anyone who wants them without the map.
   ============================================================ */
.aj-const{
  position:relative; background:var(--aj-ink);
  padding-block:clamp(72px,12vh,140px);
}
.aj-const__head{ max-width:720px; }
.aj-const__head .h2{ color:var(--aj-on-dark); }
.aj-const__head .h2 em{ color:var(--aj-gold-lit); }
.aj-const__head .lead{ color:var(--aj-on-dark-soft); }

.ajc{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ---- the filter bar ---- */
.ajc__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  padding-bottom:clamp(20px,3vw,30px);
  border-bottom:1px solid var(--aj-hair-soft);
  margin-bottom:clamp(20px,3vw,34px);
}
.ajc__filters{ display:flex; flex-wrap:wrap; gap:4px clamp(18px,2.4vw,30px); }
/* No pills. A row of words with a rule that draws itself under the live one:
   a boxed button over a night sky reads as a dialog, not as a sky. */
.ajc__filter{
  appearance:none; cursor:pointer; position:relative;
  background:transparent; border:0; padding:7px 1px 9px;
  color:var(--aj-on-dark-mute); font:inherit; font-size:var(--fs-xs);
  letter-spacing:.16em; text-transform:uppercase;
  transition:color .3s var(--e);
}
.ajc__filter::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--aj-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e);
}
.ajc__filter:hover{ color:var(--aj-on-dark); }
.ajc__filter:hover::after{ transform:scaleX(1); }
.ajc__filter.is-on{ color:var(--aj-on-dark); }
.ajc__filter.is-on::after{ transform:scaleX(1); }
.ajc__fcount{
  margin-left:7px; font-variant-numeric:tabular-nums;
  color:var(--aj-gold); font-size:.92em;
}
.ajc__status{
  margin:0; margin-left:auto;
  font-size:var(--fs-xs); color:var(--aj-on-dark-mute);
  letter-spacing:.04em;
}

/* ---- the field ---- */
/* ---- the map ----
   A world in Robinson, drawn from tools/worldland.py, with CIRS where
   Coimbatore is and a route out to each of the nineteen. Coastline only:
   no borders, no graticule, no labels on the land. The ratio is the
   projection's own, written here from tools/robinson.py, which is what
   lets a position in percent of this box be a place on the map.

   It is the query container for the points, so a name's offset is given
   in cqw and keeps its clearance at every width the map is drawn at. It
   is inline-size rather than size, because below 900px the field stops
   being a map and takes its height from the list inside it. */
.ajc__field{
  position:relative; width:100%; aspect-ratio:200 / 97.9341;
  container-type:inline-size;
  overflow:hidden;
  background:
    radial-gradient(64% 84% at 50% 46%, rgba(31,31,27,.50), transparent 74%),
    radial-gradient(120% 120% at 50% 50%, #080806 30%, #040403 100%);
}
/* the vignette a lens gives, over everything */
.ajc__field::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(118% 112% at 50% 48%,
    transparent 48%, rgba(2,2,2,.50) 84%, rgba(2,2,2,.82) 100%);
}
.ajc__map{ position:absolute; inset:0; z-index:0; width:100%; height:100%; }
/* Land is a shade, not a shape: a fill barely above the water and a
   coast barely above the fill. Anything brighter and the continents
   start competing with the nineteen points, which are the subject. */
.ajc__land{
  fill:rgba(126,142,186,.085);
  stroke:rgba(156,176,220,.30); stroke-width:.22;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.ajc__lines{ position:absolute; inset:0; z-index:2; width:100%; height:100%; }
.ajc__line{
  fill:none; stroke:rgba(232,217,181,.20); stroke-width:.7;
  vector-effect:non-scaling-stroke;
  transition:stroke .4s var(--e), stroke-width .4s var(--e), opacity .4s var(--e);
}
/* The hairline from a point out to its own name. Fainter than a route,
   because it carries no distance — it only says which name is whose. */
.ajc__leader{ stroke:rgba(232,217,181,.16); stroke-width:.5; }
.ajc__line.is-dim{ opacity:.05; }
.ajc__line.is-lit{ stroke:var(--aj-gold-lit); stroke-width:1.5; opacity:1; }
.ajc__leader.is-lit{ stroke-width:.8; }
html.js-motion .ajc__line{ opacity:0; }
html.js-motion .ajc__map,
html.js-motion .ajc__origin{ opacity:0; }

/* The aircraft flying the routes: one per destination, out of Siruvani,
   turned to their heading. alumni-journey.js draws them and moves them;
   the sheet only says what colour they are. */
.ajc__flight{ fill:#EDE7D8; }

/* the origin — CIRS, where every route starts */
.ajc__origin{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%); margin:0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  white-space:nowrap; z-index:4; pointer-events:none;
}
.ajc__originDot{
  width:9px; height:9px; border-radius:50%;
  background:#FFFFFF;
  /* Bright, and tight. The first draft threw ninety pixels of haze over
     southern India, which is where four of the nineteen destinations and
     two of their names are: the origin was erasing its own neighbours. */
  box-shadow:
    0 0 0 3px rgba(244,240,230,.30),
    0 0 12px 4px rgba(232,217,181,.70),
    0 0 30px 10px rgba(var(--gold-rgb),.34),
    0 0 62px 22px rgba(143,110,47,.16);
}
.ajc__originName{
  /* In cqw like the destinations' names, so the origin does not swell
     against the map as the field narrows and crowd the four Indian
     destinations standing closest to it. */
  font-size:clamp(.58rem, .95cqw, .72rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:#F4F0E6; font-weight:600; text-align:center;
  display:flex; flex-direction:column; line-height:1.35;
  text-shadow:0 1px 8px rgba(4,4,3,.98), 0 0 18px rgba(4,4,3,.9);
}
.ajc__originName small{
  font-size:.82em; letter-spacing:.16em; font-weight:400;
  color:rgba(244,240,230,.62); text-transform:none;
}

/* the points */
.ajc__points{ list-style:none; margin:0; padding:0; }
.ajc__item{ margin:0; }
.ajc__pt{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  appearance:none; background:transparent; border:0; padding:10px;
  cursor:pointer; color:inherit; font:inherit; z-index:4;
  display:grid; place-items:center;
}
.ajc__dot{
  position:relative;
  width:7px; height:7px; border-radius:50%;
  background:#FAF9F3;
  box-shadow:0 0 7px 1px rgba(250,249,243,.55), 0 0 18px 4px rgba(232,217,181,.18);
  transition:background-color .3s var(--e), box-shadow .35s var(--e), transform .35s var(--e);
}
.ajc__pt:hover .ajc__dot,
.ajc__pt:focus-visible .ajc__dot,
.ajc__pt.is-active .ajc__dot{
  background:#F4F0E6; transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(var(--gold-rgb),.16), 0 0 14px 3px rgba(255,231,166,.75),
             0 0 38px 10px rgba(var(--gold-rgb),.35);
}
/* The flare a bright star throws, drawn only when one is asked about. It is
   gold and it is long, so it cannot be mistaken for the faint grey spikes
   the background stars carry — the whole point of it is that it says THIS
   one, and only while you are on it. Each arm needs its gradient running
   along its own axis; a 90deg gradient on a 1px-wide bar has nowhere to
   fade and comes out a flat line. */
.ajc__pt .ajc__dot::before,
.ajc__pt .ajc__dot::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .45s var(--e2), opacity .45s var(--e);
  opacity:0; pointer-events:none;
}
.ajc__pt .ajc__dot::before{
  width:58px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,217,181,.95) 50%, transparent);
}
.ajc__pt .ajc__dot::after{
  width:1px; height:58px;
  background:linear-gradient(180deg, transparent, rgba(232,217,181,.95) 50%, transparent);
}
.ajc__pt:hover .ajc__dot::before,
.ajc__pt:focus-visible .ajc__dot::before,
.ajc__pt.is-active .ajc__dot::before,
.ajc__pt:hover .ajc__dot::after,
.ajc__pt:focus-visible .ajc__dot::after,
.ajc__pt.is-active .ajc__dot::after{ transform:translate(-50%,-50%) scale(1); opacity:1; }
/* Every destination is named, all the time. Hiding the names until a point
   was hovered made a map with nothing to read on it, and left the whole
   chapter mute to anyone who was not pointing at something. The name is
   always up; the country comes in when the point is asked about, so each
   label is one short line at rest.

   Where the name sits is written into --lx/--ly in tools/alumni.py, in
   cqw — hundredths of the field's width — because five destinations are
   in Britain and two in Singapore, and a rule that put every name in the
   same place relative to its point would pile them on top of each other.
   data-side says which way the name runs from that offset: "r" starts
   there, "l" ends there, "c" is centred on it. Anything set far enough
   out is joined back to its point by a leader in the SVG. */
.ajc__label{
  position:absolute; left:50%; top:50%;
  transform:translate(calc(-50% + var(--lx,0px)), calc(-50% + var(--ly,0px)));
  display:flex; flex-direction:column; align-items:center; gap:1px;
  width:max-content; max-width:13ch; text-align:center;
  pointer-events:none;
  text-shadow:0 1px 6px rgba(5,5,4,.95), 0 0 14px rgba(5,5,4,.8);
  transition:opacity .28s var(--e);
}
.ajc__pt[data-side="r"] .ajc__label{
  transform:translate(var(--lx,0px), calc(-50% + var(--ly,0px)));
  align-items:flex-start; text-align:left;
}
.ajc__pt[data-side="l"] .ajc__label{
  transform:translate(calc(-100% + var(--lx,0px)), calc(-50% + var(--ly,0px)));
  align-items:flex-end; text-align:right;
}
.ajc__name{
  /* Scales with the field, so the nineteen labels keep the clearance they
     were positioned for at every desktop width rather than only the wide
     ones. The positions themselves are in tools/alumni.py. */
  font-size:clamp(.64rem, .98cqw, .78rem);
  line-height:1.2; letter-spacing:.012em; font-weight:600;
  color:rgba(244,240,230,.82);
  transition:color .28s var(--e);
}
/* Taken out of flow: collapsed with max-height it still reported its full
   width to the label above it, so "United Kingdom" was setting the width of
   a label that only reads "Durham" — and the map filled with collisions
   between things nobody could see. */
.ajc__country{
  position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; color:var(--aj-gold-lit);
  opacity:0; transition:opacity .28s var(--e);
}
.ajc__pt[data-side="r"] .ajc__country{ left:0; transform:none; }
.ajc__pt[data-side="l"] .ajc__country{ left:auto; right:0; transform:none; }
.ajc__pt:hover .ajc__name,
.ajc__pt:focus-visible .ajc__name,
.ajc__pt.is-active .ajc__name{ color:#FAF9F3; }
.ajc__pt:hover .ajc__country,
.ajc__pt:focus-visible .ajc__country,
.ajc__pt.is-active .ajc__country{ opacity:1; }
/* A point filtered out fades its name with it. */
.ajc__item.is-out .ajc__label{ opacity:0; }
.ajc__item.is-out{ opacity:.14; }
.ajc__item.is-out .ajc__pt{ pointer-events:none; }
.ajc__item{ transition:opacity .4s var(--e); }
html.js-motion .ajc__pt{ opacity:0; }

/* ---- the panel ---- */
/* ============================================================
   CHAPTER 4a — The voices
   ============================================================ */
.aj-voices{
  background:var(--aj-ink-2);
  padding-block:clamp(72px,12vh,140px);
}
.aj-voices__head .h2{ color:var(--aj-on-dark); }
.aj-voices__head .h2 em{ color:var(--aj-gold-lit); }
.aj-voices__head .lead{ color:var(--aj-on-dark-soft); }

/* Base quotation typography; the responsive card composition is below. */
.ajv{
  position:relative; margin:0;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(38px,6vh,74px) var(--gut);
  display:grid; align-items:start; text-align:left;
  column-gap:clamp(16px,2.4vw,34px); row-gap:clamp(18px,2.4vw,28px);
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "mark quote"
    ".    by";
  border-top:1px solid var(--aj-hair-soft);
}
.ajv:first-of-type{ border-top:0; }

.ajv__mark{
  grid-area:mark; margin:0;
  font-family:var(--aj-voice); font-weight:500;
  font-size:clamp(3.4rem,6.6vw,5.6rem); line-height:.74;
  color:var(--aj-gold); opacity:.42;
  /* optically aligned to the cap-height of the first line beside it */
  transform:translateY(.06em);
  user-select:none;
}

.ajv__quote{ grid-area:quote; margin:0; }
.ajv__quote p{
  margin:0; max-width:30ch;          /* on the quotation's own font */
  color:var(--aj-on-dark);
  font-family:var(--aj-voice); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.85rem);
  line-height:1.28; letter-spacing:-.004em;
  text-wrap:pretty;
}
.ajv__quote em{ color:var(--aj-gold-lit); font-style:italic; }

.ajv__by{
  grid-area:by; margin:0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
}
.ajv__name{
  position:relative; padding-left:38px;
  font-family:var(--font-ui);
  font-size:.74rem; letter-spacing:.20em; text-transform:uppercase;
  color:var(--aj-on-dark); font-weight:600;
}
/* the short rule an attribution is usually introduced by */
.ajv__name::before{
  content:""; position:absolute; left:0; top:.54em;
  width:26px; height:1px; background:var(--aj-gold);
}
.ajv__batch{
  font-size:var(--fs-xs); color:var(--aj-on-dark-mute);
  font-style:normal;
}
.ajv__batch em{ color:var(--aj-on-dark-mute); font-style:italic; }

/* ============================================================
   CHAPTER 4b — The named alumni
   ------------------------------------------------------------
   Alternating chapters. While there is no portrait the name does
   the work a portrait would: it is set at display size and the
   frame beside it says, in as many words, what is missing.
   ============================================================ */
/* The site's --ink-mute (#7C7080) is pitched against the site's paper
   (#FAF7F8). This page's ivory is warmer and a shade lighter, and the same
   grey lands at 4.23:1 there — under AA for the small text the index and the
   placeholder notes are full of. Redeclaring the token on the two pale
   chapters fixes every component inside them at once, including ones this
   sheet has never heard of, which a list of selectors could not promise.

       #6A5F6C on #F7F3EC   5.35:1 */
.aj-people,
.aj-index{ --ink-mute:#6A5F6C; }

.aj-people{
  background:var(--aj-ivory); color:var(--ink);
  padding-block:clamp(72px,12vh,140px);
}
.aj-people__foot{ margin-top:clamp(36px,5vw,64px); max-width:70ch; }
.aj-people__foot code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em; background:var(--aj-ivory-2); padding:1px 5px;
}

.ajp{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(40px,7vh,88px) var(--gut);
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;
  border-top:1px solid var(--rule);
}
.ajp[data-side="right"]{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.ajp[data-side="right"] .ajp__figure{ order:2; }

.ajp__figure{ position:relative; }
.ajp__frame{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:3/4; background:var(--aj-ivory-2);
}
.ajp__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ajp[data-person="hari-om-jani"] .ajp__img{ object-position:center 22%; }
.ajp[data-person="divyaj-dt"] .ajp__img{ object-position:62% center; }
.ajp[data-person="shashwat-santosh"] .ajp__img{ object-position:60% center; }
.ajp__sources{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:0; font-size:var(--fs-sm); }
.ajp__sources a{ color:var(--aj-gold-ink); text-decoration:underline; text-underline-offset:.2em; }

/* The plate. A portrait that has not arrived, drawn rather than faked. */
.ajp__plate{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:clamp(18px,3vw,30px); text-align:center;
  background:
    repeating-linear-gradient(-45deg, rgba(110,83,16,.045) 0 10px, transparent 10px 20px),
    var(--aj-ivory-2);
  border:1px dashed rgba(110,83,16,.38);
}
.ajp__initials{
  font-family:var(--aj-display); font-weight:400;
  font-size:clamp(3rem,7vw,5.6rem); line-height:1;
  color:rgba(110,83,16,.52); letter-spacing:.02em;
}
.ajp__plateLabel{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--aj-gold-ink); font-weight:600;
}
.ajp__plateNote{
  margin:0; max-width:30ch;
  font-size:var(--fs-xs); line-height:1.55; color:var(--ink-soft);
}
.ajp__index{
  position:absolute; top:-.42em; left:-.06em; margin:0; z-index:2;
  font-family:var(--aj-display);
  font-size:clamp(3.4rem,7vw,6rem); line-height:1;
  color:var(--aj-gold-ink); opacity:.22; font-variant-numeric:tabular-nums;
}
.ajp[data-side="right"] .ajp__index{ left:auto; right:-.06em; }

.ajp__name{
  margin:0 0 10px;
  font-size:clamp(2.1rem,5.4vw,4.2rem); line-height:1.0;
  letter-spacing:-.025em; color:var(--ink);
}
.ajp__role{
  margin:0 0 clamp(20px,3vw,30px);
  font-family:var(--aj-voice); font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.45rem); color:var(--ink-soft);
}
.ajp__bio{
  max-width:58ch; margin:0 0 clamp(22px,3vw,34px);
  font-size:clamp(1rem,1.18vw,1.12rem); line-height:1.7;
  color:var(--ink-soft);
}
.ajp__meta{
  margin:0 0 clamp(18px,2.6vw,26px);
  display:flex; flex-wrap:wrap; gap:10px 28px;
  padding-top:18px; border-top:1px solid var(--rule);
}
.ajp__metaItem{ display:flex; flex-direction:column; gap:3px; font-size:var(--fs-sm); }
.ajp__metaItem b{
  font-size:.64rem; letter-spacing:.20em; text-transform:uppercase;
  color:var(--aj-gold-ink); font-weight:600;
}
.ajp__await{ margin:0; max-width:56ch; font-size:var(--fs-xs);
  line-height:1.6; color:var(--ink-mute); }
.ajp__await em{ color:var(--ink-soft); }

/* ============================================================
   CHAPTER 5 — Paths from CIRS
   ------------------------------------------------------------
   Five pathways share one stable frame on wide screens. Native
   scrolling advances the frame; narrow screens show the full list.
   ============================================================ */
.aj-paths{
  position:relative; background:var(--aj-ink);
  padding-block:clamp(72px,12vh,140px) 0;
  overflow:clip;
}
.aj-paths__head{ max-width:760px; }
.aj-paths__head .h2{ color:var(--aj-on-dark); }
.aj-paths__head .h2 em{ color:var(--aj-gold-lit); }
.aj-paths__head .lead{ color:var(--aj-on-dark-soft); }

.ajw-track{ position:relative; margin-top:clamp(28px,4vw,48px); }
.ajw-rail{ display:block; }
/* Without scroll choreography, every pathway must stay in reading order. */
html:not(.js-motion) body.alumni .ajw-rail{ display:grid; gap:0; padding-inline:var(--gut); }
html:not(.js-motion) body.alumni .ajw{
  width:100%; max-width:740px; height:auto; margin-right:0;
  border-top:1px solid var(--aj-hair-soft);
}
html:not(.js-motion) body.alumni .ajw:first-child{ border-top:0; }
html:not(.js-motion) body.alumni .ajw::before,
html:not(.js-motion) body.alumni .ajw-nav{ display:none; }

.ajw{
  position:relative;
  width:100%;
  padding:clamp(30px,4vw,48px) 0;
  background:transparent; border:0;
  display:flex; flex-direction:column;
}
/* Accent marks the active pathway without changing the ground underneath it. */
.ajw-track.is-live .ajw.is-on .ajw__n,
.ajw-track.is-live .ajw.is-on .ajw__label{ color:var(--aj-accent); }
.ajw-track.is-live .ajw.is-on .ajw__label::before{
  content:""; display:block; width:26px; height:2px;
  background:var(--aj-accent); margin-bottom:12px;
}
/* Five pathways, five grounds from the one palette. The keys are the
   ones tools/alumni.py writes; the pathway's name is always in text,
   so no colour here carries meaning on its own. */
.ajw[data-scene="ink"]{    --aj-scene:var(--dark-ink);    --aj-accent:var(--gold-lit); }
.ajw[data-scene="navy"]{   --aj-scene:var(--dark);        --aj-accent:var(--gold-pale); }
.ajw[data-scene="gold"]{   --aj-scene:var(--dark-mid);    --aj-accent:var(--gold); }
.ajw[data-scene="slate"]{  --aj-scene:var(--dark-deep);   --aj-accent:var(--on-dark-soft); }
.ajw[data-scene="maroon"]{ --aj-scene:var(--maroon); --aj-accent:var(--gold-pale); }

.ajw__n{
  margin:0 0 clamp(20px,3vw,30px);
  font-family:var(--aj-display); font-size:2.4rem; line-height:1;
  color:var(--aj-on-dark-mute); font-variant-numeric:tabular-nums;
  transition:color .6s var(--e);
}
.ajw__n span{ font-size:.9rem; opacity:.55; letter-spacing:.08em; }
.ajw__label{
  margin:0 0 12px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aj-on-dark-mute); font-weight:600;
  transition:color .6s var(--e);
}
.ajw__head{
  margin:0 0 16px; color:var(--aj-on-dark);
  font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-.018em;
}
.ajw__head em{ color:var(--aj-accent); font-style:italic; }
.ajw__copy{
  margin:0 0 auto; color:var(--aj-on-dark-soft);
  font-size:var(--fs-body); line-height:1.65; max-width:46ch;
}
.ajw__evLabel{
  margin:clamp(26px,4vw,40px) 0 12px;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aj-on-dark-mute); font-weight:600;
  padding-top:16px; border-top:1px solid var(--aj-hair-soft);
}
.ajw__evList{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ajw__ev{ display:flex; flex-direction:column; gap:2px; }
.ajw__evName{ font-size:var(--fs-sm); color:var(--aj-on-dark); font-weight:600; }
a.ajw__evName{
  color:var(--aj-accent); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.ajw__evWhere{ font-size:var(--fs-xs); color:var(--aj-on-dark-mute); }

.ajw-nav{
  padding:18px var(--gut) 26px;
  display:flex; justify-content:center;
}
.ajw__dots{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.ajw__dot{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding:8px 2px; display:grid; place-items:center;
}
.ajw__dot span{
  display:block; min-width:30px; padding-bottom:4px;
  color:var(--aj-on-dark-mute); border-bottom:2px solid var(--aj-hair);
  font:600 .75rem/1 var(--aj-display); font-variant-numeric:tabular-nums;
  transition:color .25s var(--e), border-color .25s var(--e);
}
.ajw__dot.is-on span{ color:var(--aj-gold-lit); border-color:var(--aj-gold-lit); }
.ajw__dot:hover span{ color:var(--aj-on-dark); border-color:var(--aj-on-dark); }

/* The pinned frame keeps one complete pathway in view at a time. */
@media (min-width: 900px){
  .ajw-track{
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:80px;
  }
  .ajw-rail{
    position:relative;
    width:calc(100% - var(--gut) - var(--gut));
    max-width:860px;
    height:min(620px, calc(100svh - 200px));
    margin-inline:auto;
    background:var(--aj-ink-3);
    border:1px solid var(--aj-hair);
  }
  .ajw-track.is-live .ajw{
    position:absolute; inset:0;
    width:100%; height:100%; margin:0;
    padding:clamp(26px,3vw,42px) clamp(30px,4vw,56px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .42s ease, visibility .42s;
  }
  .ajw-track.is-live .ajw.is-on{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .ajw-track.is-live .ajw__n{ margin-bottom:18px; }
  .ajw-track.is-live .ajw__head{ margin-bottom:12px; }
  .ajw-track.is-live .ajw__evLabel{ margin-top:20px; }
  .ajw-track.is-live .ajw__evList{ gap:7px; }
  .ajw-track.is-live .ajw__ev{ gap:0; }
  html:not(.js-motion) body.alumni .ajw-rail{
    height:auto; max-width:860px; background:transparent; border:0;
  }
  html:not(.js-motion) body.alumni .ajw-track{
    min-height:auto; padding-top:0;
  }
}

/* ============================================================
   CHAPTER 6 — The index
   ============================================================ */
.aj-index{
  background:var(--aj-ivory); color:var(--ink);
  padding-block:clamp(72px,12vh,140px);
}

.ajd{ margin-top:clamp(12px,2vw,24px); }
.ajd__search{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 24px;
  padding-bottom:18px; border-bottom:1px solid var(--rule);
}
.ajd__label{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aj-gold-ink); font-weight:600;
  display:block; width:100%;
}
.ajd__input{
  flex:1 1 280px; min-width:0;
  appearance:none; background:transparent;
  border:0; border-bottom:1px solid var(--ink-mute);
  padding:10px 2px; font:inherit; font-size:var(--fs-lead); color:var(--ink);
  transition:border-color .3s var(--e);
}
.ajd__input:focus{ outline:none; border-bottom-color:var(--aj-gold-ink); }
.ajd__input:focus-visible{ outline:2px solid var(--aj-gold-ink); outline-offset:4px; }
.ajd__count{
  margin:0; font-size:var(--fs-xs); color:var(--ink-mute);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

.ajd__groups{
  margin-top:clamp(26px,4vw,44px);
  display:grid; gap:clamp(28px,4vw,52px);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  align-items:start;
}
.ajd__group[hidden]{ display:none; }
.ajd__region{
  margin:0 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--rule);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:var(--fs-sm);
}
.ajd__region .sc{
  font-size:.68rem; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
}
.ajd__n{
  font-size:var(--fs-xs); color:var(--aj-gold-ink);
  font-variant-numeric:tabular-nums; font-weight:600;
}
.ajd__rows{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ajd__row{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 0; border-bottom:1px solid var(--rule-soft);
}
.ajd__row[hidden]{ display:none; }
.ajd__name{ font-size:var(--fs-body); line-height:1.35; color:var(--ink); }
.ajd__country{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.ajd__empty{
  margin:clamp(20px,3vw,30px) 0 0; font-size:var(--fs-sm); color:var(--ink-soft);
}
.ajd__empty[hidden]{ display:none; }

.aj-index__fig{ margin:clamp(40px,6vw,72px) 0 0; }
.aj-index__fig img{ display:block; width:100%; height:auto; }
.aj-index__fig figcaption{
  margin-top:12px; font-size:var(--fs-xs); color:var(--ink-mute); max-width:72ch;
}

/* ============================================================
   CHAPTER 7 — The return
   ============================================================ */
.aj-return{
  position:relative; isolation:isolate;
  min-height:100svh; display:grid; align-items:center;
  padding-block:clamp(72px,12vh,140px);
  overflow:clip; background:var(--aj-ink);
}
.aj-return__media{ position:absolute; inset:0; z-index:0; }
.aj-return__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.aj-return__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(17,17,15,.96) 0%, rgba(17,17,15,.88) 42%,
                             rgba(17,17,15,.58) 72%, rgba(17,17,15,.48) 100%);
}
.aj-return__inner{ position:relative; z-index:3; }
.aj-return__head{
  margin:0 0 clamp(30px,4.5vw,50px); max-width:18ch;
  color:var(--aj-on-dark);
  font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.06; letter-spacing:-.02em;
}
.aj-return__head em{ color:var(--aj-gold-lit); font-style:italic; }

.aj-return__acts{ display:flex; flex-wrap:wrap; gap:14px; }
body.alumni .aj-return__acts .btn--primary{
  background:var(--aj-gold); border-color:var(--aj-gold); color:var(--aj-ink);
  font-weight:600;
}
body.alumni .aj-return__acts .btn--primary:hover{
  background:var(--aj-gold-lit); border-color:var(--aj-gold-lit); color:var(--aj-ink);
}
body.alumni .aj-return__acts .btn--ghost{
  border-color:var(--aj-hair); color:var(--aj-on-dark);
}
body.alumni .aj-return__acts .btn--ghost:hover{
  border-color:var(--aj-gold); color:var(--aj-gold-lit); background:transparent;
}

.aj-return__reach{
  margin-top:clamp(40px,6vw,68px); padding-top:clamp(24px,3.4vw,36px);
  border-top:1px solid var(--aj-hair-soft); max-width:760px;
}
.aj-return__reachNote{
  margin:0 0 20px; font-size:var(--fs-sm); color:var(--aj-on-dark-soft);
}
.aj-return__rows{
  margin:0; display:grid; gap:16px 32px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.aj-return__rows > div{ display:flex; flex-direction:column; gap:4px; }
.aj-return__rows dt{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aj-gold); font-weight:600;
}
.aj-return__rows dd{ margin:0; font-size:var(--fs-sm); color:var(--aj-on-dark); }
.aj-return__rows a{ color:var(--aj-on-dark); text-decoration:underline; text-underline-offset:3px; }
.aj-return__rows a:hover{ color:var(--aj-gold-lit); }
.aj-return__await{
  margin:clamp(22px,3vw,30px) 0 0; max-width:64ch;
  font-size:var(--fs-xs); color:var(--aj-on-dark-mute);
}
.aj-return__await em{ color:var(--aj-on-dark-soft); }

/* ============================================================
   The cursor label
   ------------------------------------------------------------
   Inside the alumni interactions only, and never a replacement
   for the system cursor. cirs.js already runs a difference-blend
   ring site-wide; this rides with it and adds the word.
   ============================================================ */
.aj-cursor{
  position:fixed; top:0; left:0; z-index:480;
  pointer-events:none; opacity:0;
  transform:translate(-50%,-50%);
  padding:6px 11px;
  background:var(--aj-gold); color:var(--aj-ink);
  font-size:.58rem; letter-spacing:.20em; text-transform:uppercase; font-weight:600;
  transition:opacity .25s var(--e);
  will-change:transform;
}
.aj-cursor.is-on{ opacity:1; }
@media (hover:none),(pointer:coarse){ .aj-cursor{ display:none; } }

/* ============================================================
   Tablet and phone
   ------------------------------------------------------------
   The map stops being a map and becomes a list: the same
   buttons, the same panel, laid out in normal flow. There is
   one DOM and no second markup path that can rot.
   ============================================================ */
@media (max-width: 899px){
  .aj-open{ padding-bottom:clamp(76px,14vh,120px); }
  .aj-open__title{ font-size:clamp(1.75rem,8.4vw,3.2rem); }

  .aj-portal__stage{ height:auto; min-height:auto; padding-block:clamp(56px,10vh,88px); }
  .aj-portal{ min-height:auto; }

  /* --- the map becomes a list --- */
  /* Nineteen names over a world 360 pixels wide is a puzzle, not a map,
     so below 900px the field stops being one: the coastline, the routes
     and the flights go, and the same nineteen buttons become rows. */
  .ajc__field{
    aspect-ratio:auto; min-height:0; border:0;
    background:none; padding-left:22px;
  }
  /* The route line concept survives as one rule down the left of the list. */
  .ajc__field::before{
    content:""; position:absolute; left:4px; top:8px; bottom:8px; width:1px;
    background:linear-gradient(to bottom, var(--aj-gold), var(--aj-hair-soft));
  }
  .ajc__map,
  .ajc__lines{ display:none; }
  .ajc__origin{
    position:static; transform:none; margin:0 0 6px -22px;
  }
  .ajc__points{ display:grid; }
  .ajc__pt{
    position:static; transform:none;
    width:100%; padding:14px 2px; justify-items:start;
    display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
    border-bottom:1px solid var(--aj-hair-soft); text-align:left;
  }
  .ajc__pt[data-side] .ajc__label,
  .ajc__label{
    position:static; transform:none; opacity:1;
    align-items:flex-start; gap:3px; text-align:left;
    max-width:none; text-shadow:none;
  }
  .ajc__pt[data-side] .ajc__country,
  .ajc__country{
    position:static; transform:none; opacity:1; white-space:normal;
    left:auto; right:auto;
  }
  .ajc__item.is-out{ display:none; }
  .ajc__status{ margin-left:0; width:100%; }

  /* --- alumni chapters stack --- */
  .ajp,
  .ajp[data-side="right"]{ grid-template-columns:1fr; }
  .ajp[data-side="right"] .ajp__figure{ order:0; }
  .ajp__frame{ aspect-ratio:3/4; }
  .ajp[data-person="shashwat-santosh"] .ajp__frame{ aspect-ratio:4/3; }
  .ajp__index{ top:-.30em; }

  /* --- the pathways stack, and never pin --- */
  .ajw-rail{ display:grid; gap:0; padding-inline:var(--gut); }
  .ajw{
    width:100%; margin-right:0;
    padding:clamp(30px,6vw,44px) 0;
    border-top:1px solid var(--aj-hair-soft);
  }
  .ajw:first-child{ border-top:0; }
  .ajw::before{ display:none; }
  .ajw-nav{ display:none; }

  /* --- a list keeps none of the map's own dark --- */
  .ajc__field::after{ display:none; }
  .ajc__origin{ pointer-events:auto; }

  .aj-return{ min-height:auto; }
  .aj-return__wash{
    background:linear-gradient(to top, rgba(17,17,15,.97) 30%, rgba(17,17,15,.72) 100%);
  }
}

@media (max-width: 700px){
  .ajv{
    grid-template-columns:1fr;
    grid-template-areas:"mark" "quote" "by";
    row-gap:clamp(6px,1.6vw,14px);
  }
  .ajv__mark{ font-size:clamp(2.8rem,11vw,3.6rem); transform:none; }
  .ajv__quote p{ max-width:none; font-size:clamp(1.35rem,5.6vw,1.9rem); }
  .ajv__by{ margin-top:clamp(14px,3vw,20px); }
}

@media (max-width: 560px){
  .aj-open__sub{ font-size:1.05rem; }
  .ajd__groups{ grid-template-columns:1fr; }
}

/* ============================================================
   Reduced motion
   ------------------------------------------------------------
   cirs.js never adds js-motion in this mode, so every "start
   hidden" rule above is already inert. What is left is the
   things CSS animates on its own.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .aj-open__media img{ transform:none; }
  .ajc__line,
  .ajc__land,
  .ajc__item,
  .ajc__dot,
  .ajc__label,
  .ajw__dot span,
  .aj-cursor{ transition:none !important; }
  .aj-cursor{ display:none; }
  .ajw__n, .ajw__label{ transition:none; }
}

/* Alumni's white-and-gold edition. Keep the photographic opening's own
   dark scrim; these roles apply only to the editorial chapters below it. */
body.alumni{ --aj-gold-ink:var(--ink); background:var(--white); }
body.alumni main{ background:var(--white); }
body.alumni :focus-visible{ outline:3px solid #76581f; outline-offset:4px; }
body.alumni :is(.aj-portal,.aj-const,.aj-voices,.aj-paths,.aj-return){
  --aj-gold:#b2944e; --aj-ink:var(--white); --aj-ink-2:var(--paper); --aj-ink-3:var(--white);
  --aj-on-dark:var(--ink); --aj-on-dark-soft:var(--ink-soft);
  --aj-on-dark-mute:var(--ink-soft); --aj-gold-lit:var(--ink);
  --aj-hair:rgba(118,88,31,.35); --aj-hair-soft:rgba(118,88,31,.2);
  color:var(--ink);
}
body.alumni .aj-label{ color:var(--ink-soft); }
body.alumni .aj-portal__depth{ background:none; }
body.alumni .aj-portal__cap{ background:var(--white); color:var(--ink); padding:14px; }
body.alumni .aj-portal__cap .sc{ color:var(--ink); }
body.alumni .aj-people, body.alumni .aj-index{ background:var(--white); }

/* The map uses geographic polygons, never rectangular hit areas. The routes
   and labels cannot intercept a country click. Country controls remain the
   comfortable option for small islands and small touch screens. */
body.alumni [data-directory-controls][hidden]{ display:none; }
body.alumni .ajc__mapMarkers{ position:absolute; inset:0; width:100%; height:100%; z-index:3; fill:#493719; stroke:var(--white); stroke-width:.8; pointer-events:none; display:none; }
body.alumni .ajc__mapMarkers circle{ vector-effect:non-scaling-stroke; }
body.alumni .ajd__locationSource{ grid-column:1 / -1; font-size:.75rem; text-decoration:underline; text-underline-offset:3px; }
body.alumni .ajc__field{ background:var(--paper); border:1px solid var(--rule); }
body.alumni .ajc__field::before, body.alumni .ajc__field::after{ display:none; }
body.alumni .ajc__map{ z-index:1; }
body.alumni .ajc__land{
  fill:#e8e1d1; stroke:#887654; stroke-width:.45;
  cursor:pointer; transition:fill .18s ease;
}
body.alumni .ajc__land.is-lit, body.alumni .ajc__land:focus{ fill:var(--aj-gold); stroke:#493719; stroke-width:1.5; }
/* SVG outlines are scaled in viewBox units by Chromium, producing a large
   rounded frame across neighbouring countries. The country's own boundary
   and gold fill provide the visible focus indicator instead. */
body.alumni .ajc__land:focus, body.alumni .ajc__land:focus-visible{ outline:none; }
body.alumni .ajc__land:focus-visible{ stroke:#493719; stroke-width:2.5; }
body.alumni .ajc__lines{ pointer-events:none; }
body.alumni .ajc__line{ stroke:#8d743f; opacity:.4; }
body.alumni .ajc__line.is-lit{ stroke:#493719; opacity:1; }
body.alumni .ajc__flight{ fill:#76581f; }
body.alumni .ajc__dot{ background:#493719; box-shadow:0 0 0 2px var(--white); }
body.alumni .ajc__pt .ajc__dot::before, body.alumni .ajc__pt .ajc__dot::after{ display:none; }
body.alumni .ajc__pt:hover .ajc__dot, body.alumni .ajc__pt:focus-visible .ajc__dot{ background:#76581f; box-shadow:0 0 0 3px var(--aj-gold); }
body.alumni .ajc__label{ background:none; padding:0; }
body.alumni :is(.ajc__name,.ajc__country,.ajc__originName,.ajc__originName small){ color:var(--ink); text-shadow:none; }
body.alumni .ajc__name{ text-shadow:0 1px 2px rgba(255,255,255,.9), 0 -1px 2px rgba(255,255,255,.9); }
body.alumni .ajc__originDot{ background:var(--aj-gold); box-shadow:0 0 0 3px #493719; }
body.alumni .ajc__originName{ background:none; padding:0; }
body.alumni .ajc__fcount{ color:var(--ink-soft); }
body.alumni .ajc__filter{ min-height:44px; color:var(--ink); letter-spacing:.08em; }
body.alumni .ajc__countryControls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:24px 0 12px; }
body.alumni .ajc__countryControls label{ width:100%; font-size:.85rem; }
body.alumni :is(.ajc__countryControls select,.ajc__countryControls button,.ajc__directory button){
  font:inherit; color:var(--ink); background:var(--white); border:1px solid #887654;
  padding:10px 14px; min-height:44px; max-width:100%; border-radius:2px;
}
body.alumni :is(.ajc__countryControls button,.ajc__directory button){ cursor:pointer; touch-action:manipulation; }
body.alumni .ajc__countryControls a, body.alumni .ajc__source a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
body.alumni .ajc__hint{ min-height:1.6em; font-size:.95rem; color:var(--ink); }
body.alumni .ajc__source{ max-width:90ch; margin:20px 0 0; font-size:.8rem; line-height:1.6; color:var(--ink-soft); }

/* Native modal supplies background inertness and a browser top layer. Scroll
   remains inside the directory while the shared Lenis engine is paused. */
body.alumni .ajc__directory{
  width:min(780px,calc(100% - 48px)); max-width:none;
  max-height:calc(100dvh - 64px); margin:auto; padding:28px;
  color:var(--ink); background:var(--white); border:1px solid var(--aj-gold);
  overflow:auto; overscroll-behavior:contain;
}
body.alumni .ajc__directory::backdrop{ background:rgba(29,26,21,.5); }
body.alumni .ajc__dialogHead{ display:grid; grid-template-columns:1fr auto; gap:16px; }
body.alumni .ajc__dialogHead .aj-label{ margin:0; align-self:center; }
body.alumni .ajc__dialogHead h3{ grid-column:1/-1; margin:0; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.15; }
body.alumni #ajc-panel-note{ grid-column:1/-1; margin:0; font-size:.88rem; line-height:1.6; color:var(--ink-soft); }
body.alumni .ajc__dialogTools{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
body.alumni .ajc__dialogTools label{ width:100%; }
body.alumni #ajc-search{ font:inherit; font-size:16px; min-width:0; flex:1 1 260px; min-height:44px; border:1px solid #887654; padding:10px; background:var(--white); color:var(--ink); }
body.alumni [data-panel-count]{ font-size:.85rem; color:var(--ink-soft); }
body.alumni .ajc__results{ list-style:none; padding:0; margin:0; }
body.alumni .ajc__results .ajd__row{ padding-block:14px; }
body.alumni .ajc__locationNote{ font-size:.8rem; color:var(--ink-soft); line-height:1.5; }
/* The alumni who registered an institution, under its row in the directory:
   a gold-ruled list, name over CIRS years and course, set quieter than the
   institution so the row still reads as one institution. */
body.alumni .ajc__alumniHead{
  margin:10px 0 0; padding-top:10px; border-top:1px solid var(--rule-soft);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--aj-gold-ink); font-weight:600;
}
body.alumni .ajc__alumni{
  list-style:none; margin:8px 0 0; padding:0 0 0 14px;
  border-left:1px solid var(--aj-gold);
  display:grid; gap:9px;
}
body.alumni .ajc__alumni li{ display:grid; gap:1px; margin:0; }
body.alumni .ajc__alumnusName{ font-size:.95rem; line-height:1.35; color:var(--ink); }
body.alumni .ajc__alumnusMeta{ font-size:.8rem; line-height:1.45; color:var(--ink-soft); }
body.alumni [data-panel-empty]{ padding:20px; background:var(--paper); line-height:1.6; }
body.alumni [data-panel-empty][hidden]{ display:none; }

/* All three voices are complete and visible together, with a quiet rule and
   ample reading space. The existing once-only reveal respects reduced motion. */
body.alumni .ajv-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
body.alumni .ajv{
  display:flex; flex-direction:column; gap:24px; align-items:flex-start;
  padding:32px 26px; margin:0; min-width:0; max-width:none;
  background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--aj-gold);
}
body.alumni .ajv__mark{ font-size:4rem; opacity:1; transform:none; }
body.alumni .ajv__quote p{ font-size:clamp(1.35rem,1.8vw,1.8rem); line-height:1.45; max-width:none; }
body.alumni .ajv__by{ margin-top:auto; padding-top:24px; }
body.alumni .ajv__name{ font-size:.7rem; letter-spacing:.12em; }

/* One state set by the existing pathway controller colours the entire
   section, including the pin spacer. Static scenes keep individual grounds. */
body.alumni .aj-paths{ background:#faf9f3; transition:background-color .5s ease; }
body.alumni .aj-paths[data-active-scene="ink"]{ background:#faf9f3; }
body.alumni .aj-paths[data-active-scene="navy"]{ background:#f1e6cc; }
body.alumni .aj-paths[data-active-scene="gold"]{ background:#e3d2a3; }
body.alumni .aj-paths[data-active-scene="slate"]{ background:#f5efdf; }
body.alumni .aj-paths[data-active-scene="maroon"]{ background:#ddd0b7; }
body.alumni .ajw[data-scene="ink"]{ --aj-scene:#faf9f3; --aj-accent:var(--ink); }
body.alumni .ajw[data-scene="navy"]{ --aj-scene:#f1e6cc; --aj-accent:var(--ink); }
body.alumni .ajw[data-scene="gold"]{ --aj-scene:#e3d2a3; --aj-accent:var(--ink); }
body.alumni .ajw[data-scene="slate"]{ --aj-scene:#f5efdf; --aj-accent:var(--ink); }
body.alumni .ajw[data-scene="maroon"]{ --aj-scene:#ddd0b7; --aj-accent:var(--ink); }
body.alumni .ajw-rail{ background:transparent; border:0; }
body.alumni .ajw-track.is-live .ajw{ background:rgba(255,255,255,.6); border-top:2px solid var(--aj-gold); }
body.alumni .ajw-track:not(.is-live){ min-height:0; padding-top:0; }
body.alumni .ajw-track:not(.is-live) .ajw-rail{ height:auto; width:100%; max-width:none; padding:0; }
body.alumni .ajw-track:not(.is-live) .ajw{ max-width:none; padding:48px max(var(--gut),calc((100% - 860px)/2)); background:var(--aj-scene); }
body.alumni .ajw-track:not(.is-live) .ajw-nav{ display:none; }
body.alumni .ajw__dot{ min-width:44px; min-height:44px; }
body.alumni .ajw__dot.is-on span{ color:var(--ink); border-color:#76581f; }
body.alumni .ajw__n span{ opacity:1; }

/* A white contact surface, a contour motif in the open right-hand margin,
   and the original valley photograph as a visible supporting plate. */
body.alumni .aj-return{ background:var(--white); min-height:auto; }
body.alumni .aj-return__media{ inset:auto 0 0 auto; width:38%; height:42%; z-index:0; }
body.alumni .aj-return__media img{ object-fit:cover; }
body.alumni .aj-return__wash{ display:none; }
body.alumni .aj-return::before{
  content:""; position:absolute; right:-200px; top:24px; width:460px; height:320px;
  border:1px solid rgba(118,88,31,.22); border-radius:48%; transform:rotate(-24deg);
  box-shadow:0 0 0 28px var(--white),0 0 0 29px rgba(118,88,31,.18),0 0 0 62px var(--white),0 0 0 63px rgba(118,88,31,.14);
  pointer-events:none;
}
body.alumni .aj-return__inner{ padding-right:calc(var(--gut) + 25%); }
body.alumni .aj-return__acts .btn--primary{ color:var(--ink); }
body.alumni .aj-return__acts .btn--primary:hover{ background:var(--paper-3); color:var(--ink); }
body.alumni .aj-return__rows dt{ color:var(--ink-soft); }
body.alumni .aj-return__rows a:hover{ color:var(--ink); }
@media (max-width:899px){
  body.alumni .ajc__field{ aspect-ratio:200 / 97.9341; padding:0; }
  body.alumni .ajc__map{ display:block; }
  body.alumni .ajc__mapMarkers{ display:block; }
  body.alumni .ajc__points, body.alumni .ajc__origin, body.alumni .ajc__lines{ display:none; }
  body.alumni .ajv-grid{ grid-template-columns:1fr; }
  body.alumni .ajv{ padding:28px; }
  body.alumni .aj-return__inner{ padding-right:var(--gut); }
  body.alumni .aj-return__media{ position:relative; inset:auto; width:100%; height:auto; order:2; margin-top:40px; }
  body.alumni .aj-return__media img{ height:auto; }
  body.alumni .aj-return::before{ display:none; }
}
@media (max-width:600px){
  body.alumni .ajc__directory{ width:100%; height:100dvh; max-height:100dvh; padding:20px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); border:0; }
  body.alumni .ajc__countryControls select{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  body.alumni .aj-paths, body.alumni .ajc__land{ transition:none; }
}
html:not(.alumni-interactive) body.alumni .ajc__hint{ display:none; }
/* Keep the retained valley photograph clear of the contact column as its
   existing scroll zoom plays inside the frame. */
body.alumni .aj-return__media{ overflow:hidden; }
body.alumni .aj-return__inner{ padding-right:calc(var(--gut) + 34%); }
body.alumni .aj-portal__plate{ box-shadow:none; }
body.alumni .aj-return__acts .btn{ box-shadow:none; }
body.alumni .ajc__pt:hover .ajc__name,
body.alumni .ajc__pt:focus-visible .ajc__name{ color:var(--ink); }
@media(max-width:899px){ body.alumni .aj-return__inner{ padding-right:var(--gut); } }
body.alumni .ajc__dialogBar{ position:sticky; top:-28px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-28px -28px 20px; padding:16px 28px; background:var(--white); border-bottom:1px solid var(--rule); }
body.alumni .ajc__dialogBar .aj-label{ margin:0; }
@media(max-width:600px){ body.alumni .ajc__dialogBar{ top:-20px; margin:-20px -20px 20px; padding:12px 20px; } }