/* ==========================================================================
   About page
   Opening: her eye fills the screen; scrolling pushes straight into the pupil,
   which becomes the black page (js/eye.js). The rest follows the case-study
   layout (css/case.css): chapters, a key insight, quotes. Blurred textures and
   a drifting field of connected dots sit behind some of the copy.
   ========================================================================== */

.about-page { background: #050506; }

#eye,
.ab-net {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ab-net { opacity: 0; }
.no-gl #eye { display: none; }
.ab-fallback::before {
  background-image: url("../assets/about/eye-1600.jpg");
  background-position: 74% 46%;
}

.js body.is-loading .ab-open__look,
.js body.is-loading .ab-cue { visibility: hidden; }

.ab-main { position: relative; z-index: 1; }

/* ---------- Opening ---------- */

.ab-open {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* Keeps the headline readable over the lit strands of hair */
.ab-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0.28) 34%, rgba(5, 5, 6, 0) 56%);
  pointer-events: none;
  opacity: var(--scrim, 1);
}

.ab-open__look {
  position: absolute;
  top: 50%;
  left: 11.5vw;
  transform: translateY(-50%);
  transform-origin: 30% 50%;
  will-change: transform, opacity, filter;
}
.ab-open__look .eyebrow { color: rgba(255, 255, 255, 0.78); }
.ab-open__title {
  max-width: 10em;
  margin: clamp(12px, 1.4vw, 22px) 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 92px);
  line-height: 1.1;
  letter-spacing: var(--track-head);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.ab-open__sub {
  max-width: 22em;
  margin: clamp(14px, 1.4vw, 24px) 0 0;
  font-family: var(--display);
  font-size: clamp(18px, calc(1.3vw + 1px), 25px);
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  letter-spacing: var(--track-lead);
}

/* Scroll cue: the same glass ring as the other pages */
.ab-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 56px);
  transform: translateX(-50%);
}

/* Inside the eye: who I am, at a glance */
.ab-land {
  position: absolute;
  top: 50%;
  left: 11.5vw;
  width: min(1000px, 78vw);
  transform: translateY(-50%);
  opacity: 0;
}
.ab-land { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.ab-land__title {
  margin: 0 0 0 -0.04em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 124px);
  line-height: 1;
  letter-spacing: var(--track-display);
}
.ab-land__lede {
  max-width: 27em;
  margin: clamp(18px, 2.2vw, 36px) 0 0;
}

/* ---------- Chapters (case-study layout on black) ---------- */

.about-page .cs-chapter { position: relative; }
.about-page .cs-chapter__body > .cs-takeaway { max-width: 22em; }
.ab-career__lede { margin: clamp(18px, 2vw, 32px) 0 0; max-width: 24em; }
/* The long timeline scrolls past a heading that stays put */
.ab-career .cs-chapter__head { position: sticky; top: 18vh; align-self: start; }
.ab-volunteer { margin: clamp(28px, 3vw, 48px) 0; }
.ab-moment__close,
.ab-beyond__close { margin-top: clamp(8px, 1vw, 16px); }

/* Blurred textures behind some of the copy */
.ab-backdropped { position: relative; isolation: isolate; }
.ab-backdrop {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  background: center / cover no-repeat;
  filter: blur(18px) saturate(1.1); /* was 10px: softer behind the copy so it reads more easily */
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 50%, #000 30%, transparent 100%);
  pointer-events: none;
  will-change: transform;
}
.ab-backdrop--network { background-image: url("../assets/about/tex-network.jpg"); opacity: 0.6; }
.ab-backdrop--particles { background-image: url("../assets/about/tex-particles.jpg"); opacity: 0.5; }
.ab-backdrop--silk { background-image: url("../assets/about/tex-silk.jpg"); opacity: 0.75; filter: blur(12px); }

/* ---------- The whiteboard map ---------- */

.ab-map { margin: clamp(56px, 9vh, 110px) 0 0; }
/* The whiteboard photo sits where the drawn map was. On desktop it shows as a wide 16:9 frame,
   trimmed only from the bottom (the tabletop), so the whole board and its title stay in; phones get the whole photo */
@media (min-width: 761px) {
  .ab-map .cs-media__frame img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; }
}
.ab-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ab-map__svg .e { stroke: rgba(200, 220, 255, 0.34); stroke-width: 1; }
.ab-map__svg .e--path { stroke: url(#ab-map-grad); stroke-width: 2.5; }
.ab-map__svg .n { fill: rgba(220, 230, 255, 0.8); }
.ab-map__svg .n--path { fill: #fff; }
.ab-map__svg .halo { fill: rgba(96, 212, 255, 0.18); }
.ab-map figcaption {
  margin-top: 18px;
  font-size: 15px;
  line-height: var(--lead-small);
  letter-spacing: var(--track-body);
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Career timeline: dots light up along the line ---------- */

.ab-timeline {
  --draw: 0;
  position: relative;
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
}
.ab-timeline::before,
.ab-timeline::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 6px;
  width: 1px;
}
.ab-timeline::before { background: rgba(255, 255, 255, 0.14); }
.ab-timeline::after {
  background: linear-gradient(180deg, #7fdcff 0%, #b9a8ff 55%, #ffc48a 100%);
  transform: scaleY(var(--draw));
  transform-origin: top;
}
.ab-timeline li {
  position: relative;
  padding-bottom: clamp(32px, 3.6vw, 56px);
}
.ab-timeline li:last-child { padding-bottom: 0; }
.ab-timeline li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -40px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #050506;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.ab-timeline li.is-on::before {
  background: #bfeeff;
  box-shadow: 0 0 0 4px rgba(127, 220, 255, 0.16), 0 0 20px rgba(127, 220, 255, 0.6);
}
.ab-timeline__year {
  margin: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: rgba(255, 255, 255, 0.66);
}
.ab-timeline h3 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 32px);
  line-height: 1.26;
  letter-spacing: var(--track-card);
}
.ab-timeline__role {
  margin: 6px 0 12px;
  font-family: var(--display);
  font-size: clamp(16px, calc(1vw + 1px), 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: var(--track-ui);
}
.ab-timeline .case__body { margin: 0; max-width: 32em; }
.ab-credentials { margin-top: clamp(48px, 6vh, 80px); }

/* ---------- In their words ---------- */

.ab-words__head { padding: clamp(96px, 18vh, 200px) 8.2vw 0 11.5vw; }
.ab-words__head .eyebrow { color: rgba(255, 255, 255, 0.72); }
.ab-words__head h2 {
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.3vw, 64px);
  line-height: 1.18;
  letter-spacing: var(--track-head);
}
.ab-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 60em;
  margin: clamp(22px, 2.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
/* Themes are information, not buttons: flat tags (same look as .tag in styles.css) */
.ab-themes li {
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: var(--track-ui);
  color: rgba(255, 255, 255, 0.9);
}
.ab-words .cs-quotes { padding-top: clamp(48px, 7vh, 88px); }
.ab-monogram {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2a3350, #3b2c3f);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ---------- Without the dive (reduced motion / no GSAP): plain page ---------- */

.ab-static .ab-open { height: auto; overflow: visible; }
.ab-static .ab-open__look { position: relative; top: auto; left: auto; transform: none; padding: 38vh 0 0 11.5vw; }
.ab-static .ab-cue { display: none; }
.ab-static .ab-land {
  position: relative;
  top: auto;
  left: auto;
  margin: 40vh 0 0 11.5vw;
  transform: none;
  opacity: 1;
  visibility: visible;
}
.ab-static .ab-timeline { --draw: 1; }
.ab-static .ab-timeline li::before { background: #bfeeff; }

.about-page .foot { background: transparent; }

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  .ab-open::before {
    background: linear-gradient(0deg, rgba(5, 5, 6, 0.72) 0%, rgba(5, 5, 6, 0.2) 40%, rgba(5, 5, 6, 0) 58%);
  }
  .ab-open__look {
    top: auto;
    bottom: 124px;
    left: 20px;
    right: 20px;
    transform: none;
    transform-origin: 50% 100%;
  }
  .ab-open__title { font-size: 40px; }
  .ab-open__sub { font-size: 18px; }
  .ab-cue { bottom: 40px; }
  .ab-land { left: 20px; right: 20px; width: auto; }
  .ab-land__title { font-size: 15vw; }
  .ab-land__lede { font-size: 17px; line-height: 1.7; }
  .ab-land .cs-facts { gap: 12px 16px; }
  .ab-words__head { padding: 96px 20px 0; }
  .ab-career .cs-chapter__head { position: static; }
  .ab-timeline { padding-left: 32px; }
  .ab-timeline li::before { left: -32px; }
  .ab-backdrop { inset: -6% -20%; }
  .ab-static .ab-open__look { padding: 60vh 20px 0; }
  .ab-static .ab-land { margin: 30vh 20px 0; }
}