/* ═══════════════════════════════════════════════════════════════════════════
   Components used by about.html and join.html. Load after styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── faculty / feature person ── */
.mentor{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  border:1px solid var(--line);padding:30px 28px;background:var(--void2)}
@media(max-width:640px){.mentor{grid-template-columns:1fr}}
.mentor .ini{width:76px;height:76px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);font-family:var(--poster);font-size:27px;color:var(--scan)}
.mentor h3{font-size:23px;margin-bottom:6px}
.mentor .div{font-family:var(--data);font-size:10px;letter-spacing:.18em;color:var(--dim);
  margin-bottom:14px}
.mentor p{font-size:16px;line-height:1.7;color:var(--dim);max-width:62ch}
.mentor a{color:var(--scan);text-decoration:none;border-bottom:1px solid transparent}
.mentor a:hover{border-color:var(--scan)}

/* ── divisions ── */
.divisions{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.division{background:var(--void);padding:30px 28px;display:grid;
  grid-template-columns:auto 1fr 1.1fr;gap:26px;align-items:start;
  transition:background calc(var(--gait)*.7)}
.division:hover{background:var(--void2)}
@media(max-width:860px){.division{grid-template-columns:1fr;gap:14px}}
.division .no{font-family:var(--poster);font-size:30px;color:var(--dimmer);line-height:1;
  min-width:56px}
.division h3{font-size:20px;margin-bottom:9px}
.division p{font-size:15px;line-height:1.65;color:var(--dim)}
.division ul{list-style:none;display:grid;gap:7px;align-content:start}
.division li{font-family:var(--data);font-size:11.5px;letter-spacing:.1em;color:var(--dim);
  padding-left:16px;position:relative}
.division li::before{content:", ";position:absolute;left:0;color:var(--scan);opacity:.55}

/* ── process: numbered stages, stepped in on the gait ── */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.process{grid-template-columns:1fr}}
.stage{border-top:2px solid var(--line2);padding-top:22px;position:relative;
  opacity:0;transform:translateY(16px)}
.stage.in{animation:step calc(var(--gait)*1.3) cubic-bezier(.2,.9,.25,1) forwards}
.stage:nth-child(2).in{animation-delay:calc(var(--gait)*.5)}
.stage:nth-child(3).in{animation-delay:var(--gait)}
.stage .no{font-family:var(--data);font-size:9.5px;letter-spacing:.24em;color:var(--scan);
  margin-bottom:14px}
.stage h3{font-size:19px;margin-bottom:10px}
.stage p{font-size:15px;line-height:1.65;color:var(--dim)}
.stage::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--scan);
  transition:width calc(var(--gait)*1.2) cubic-bezier(.7,0,.2,1)}
.stage:hover::after{width:100%}

/* ── pull quote / principle ── */
.principle{border-left:3px solid var(--ember);padding:6px 0 6px 24px;margin:0 0 40px}
.principle p{font-size:clamp(20px,2.4vw,27px);line-height:1.42;color:var(--bone);
  font-family:var(--poster);font-weight:400;letter-spacing:-.012em}
.principle .who{font-family:var(--data);font-size:9.5px;letter-spacing:.22em;color:var(--dim);
  margin-top:14px}
@media(prefers-reduced-motion:reduce){.stage{opacity:1;transform:none}}