/* about.css — 09 / About
 *
 * Shares the rail / sidecol / guides geometry defined in achievements.css.
 * The track is 300vh: About docks at the top and then holds pinned for ~200vh,
 * and that hold is the timeline the copy reveal runs on.
 */

.about-track { height: 300vh; position: relative; }

.about {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-about);
  color: var(--near-black);
}


/* --- portrait -------------------------------------------------------------
   Not a photo in a box: grayscale + multiply blend + masked edges so it
   dissolves into the panel. The two masks are composited with intersect —
   top fade and side fades applied together. */

.about__portrait {
  position: absolute;
  left: 11%; width: 48%;
  top: 14%; bottom: 0;
  overflow: hidden;
  background: var(--bg-about);
  will-change: transform, opacity;
}
.about__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 6%;
  filter: grayscale(1) contrast(1.12) brightness(1.22);
  mix-blend-mode: multiply;

  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 15%),
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 15%),
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}


/* --- left rail ------------------------------------------------------------ */

.about__railtop { display: flex; flex-direction: column; }
.about__eyebrow {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(11px, .8vw, 13px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red);
}
.about__cells { display: flex; flex-direction: column; margin-top: 3.4vh; }

.cell { padding: 1.6vh 0; border-top: 1px solid var(--hair-2); }
.cell--base { border-bottom: 1px solid var(--hair-2); }

/* Flight destination for 16+ — revealed only once the clone has landed on it. */
.cell__n16 {
  visibility: hidden;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3vw, 46px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--dim-num);
}
.cell__cap {
  visibility: hidden;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, .66vw, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-top: .8vh;
  line-height: 1.5;
}

.cell__label {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .7vw, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.cell__city {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: -.02em; line-height: 1.3;
  margin-top: .5vh;
}
.cell__city b { display: block; color: var(--muted); font-size: .8em; font-weight: 400; }

/* The narrow twin of a caption that is shorter words rather than a shorter
   line; its wide partner carries .wide-only. See aboutCapsMob in inc/copy.php. */
.narrow-only { display: none; }

.about__fig {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
}


/* --- right column --------------------------------------------------------- */

/* Flight destinations for 46 / 50% / 83% / 3x. */
.about__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  align-items: flex-end;
  margin-top: 1.6vh;
  padding-bottom: 1.6vh;
  border-bottom: 1px solid var(--hair-2);
}
.about__strip > div { min-width: 0; }
.strip__n {
  visibility: hidden;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink-head);
}
.strip__cap {
  visibility: hidden;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, .62vw, 10px);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
  margin-top: .8vh;
  line-height: 1.5;
}

.about__h2 { margin: auto 0 0; padding-top: 3vh; }

/* Two phases overlaid in one slot: phase 1 reveals, retreats, and phase 2 rises
   into the space it vacated. */
.copystack { margin: 2.8vh 0 auto; position: relative; }
.phase { display: flex; flex-direction: column; gap: 2.6vh; }
.phase--2 { position: absolute; inset: 0; pointer-events: none; }

.copystack p {
  margin: 0;
  font-family: var(--body); font-weight: 400;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink-body);
}
.copystack h3 {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink-head);
}

.about__sign {
  margin-top: auto;
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 1.8vh;
  border-top: 1px solid var(--hair-2);
}
.about__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 1.5vw, 23px);
  letter-spacing: -.02em;
}
.about__role {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.about__cta {
  margin-left: auto;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
}


/* =========================================================================
   Reduced motion — the handoff's own instruction: all lines at rest with no
   transition, and the numbers sitting directly in their slots, no flight.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .line { transform: none !important; transition: none !important; }
  .cell__n16, .cell__cap, .strip__n, .strip__cap { visibility: visible !important; }
  .flight { display: none !important; }
  /* Both phases would otherwise sit on top of each other in the same slot. */
  .phase--2 { position: static; margin-top: 2.6vh; }
}