/* About page: scroll-scrubbed beliefs + bio + timeline */

/* Beliefs: a tall track with a sticky stage. about.js sets --t (0..1) per beat */
.ab-beliefs{position:relative;height:calc(var(--beats,10) * 90vh);margin:0 calc(var(--gut) * -1)}
.ab-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.ab-beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,24px);padding:0 var(--gut);opacity:0;visibility:hidden}
.ab-beat.is-on{visibility:visible}
.ab-beat img{width:min(78vw,620px);height:auto;max-height:52vh;object-fit:contain;transform:translateY(calc((1 - var(--in,0)) * 24px)) scale(calc(.94 + var(--in,0) * .06))}
.ab-line{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.2vw,68px);line-height:1;text-align:center;max-width:22ch;text-wrap:balance;color:var(--ink);margin:0}
.ab-line .ch{opacity:.12;transition:opacity .12s linear}
.ab-line .ch.on{opacity:1}
.ab-line em{font-style:normal;white-space:nowrap;background:var(--chartreuse);padding:0 .08em}

/* Final beat: her name and figure */
.ab-end .ab-end__mark{width:min(80vw,640px);height:auto;mix-blend-mode:normal;transform:none;-webkit-mask-image:none;mask-image:none}
.ab-end .ab-end__fig{-webkit-mask-image:none;mask-image:none}
.ab-end .ab-end__fig{width:clamp(90px,12vw,150px);height:auto;max-height:none;mix-blend-mode:normal;margin-top:-4px}
.ab-end p{font-family:var(--mono, "Space Mono", monospace);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0}

.ab-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:var(--hint,1)}
.ab-hint::after{content:"";display:block;width:1px;height:28px;background:var(--ink);margin:10px auto 0;animation:ab-drip 1.6s ease-in-out infinite}
@keyframes ab-drip{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* Bio */
.ab-bio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(24px,4vw,48px)}
.ab-bio__photo{width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.ab-bio__text p{font-size:clamp(17px,1.4vw,20px);line-height:1.6;margin:0 0 1em}
.ab-bio__text p:first-child{font-size:clamp(20px,1.8vw,24px);line-height:1.45}

/* Timeline */
.ab-tl{list-style:none;margin:clamp(24px,4vw,48px) auto 0;padding:0;max-width:820px}
.ab-tl li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:22px 0;border-top:2px solid var(--ink)}
.ab-tl li:last-child{border-bottom:2px solid var(--ink)}
.ab-tl__yr{font-family:var(--display);font-size:clamp(40px,4vw,56px);line-height:.85;color:var(--coral)}
.ab-tl p{margin:0;font-size:18px;line-height:1.55}
.ab-tl p + p{margin-top:.4em}
.ab-tl img{display:block;width:auto;max-width:100%;max-height:420px;height:auto;margin-top:14px;filter:grayscale(1) contrast(1.05)}

.ab-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:clamp(32px,4vw,56px) 0}

@media (max-width:760px){
  .ab-bio{grid-template-columns:1fr}
  .ab-tl li{grid-template-columns:1fr;gap:6px}
  .ab-beliefs{height:calc(var(--beats,10) * 80vh)}
}

/* No motion: show every belief stacked, no scrubbing */
@media (prefers-reduced-motion:reduce){
  .ab-beliefs{height:auto}
  .ab-stage{position:static;height:auto;display:block}
  .ab-beat{position:static;opacity:1;visibility:visible;padding:40px var(--gut)}
  .ab-beat img{transform:none}
  .ab-line .ch{opacity:1}
  .ab-hint{display:none}
}

/* Photo strip under the bio */
.ab-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin:clamp(40px,5vw,72px) 0 0}
.ab-strip figure{margin:0}
.ab-strip img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;height:auto;filter:grayscale(1) contrast(1.05)}
.ab-strip figcaption{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
@media (max-width:760px){.ab-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ab-strip figure:first-child img{object-position:12% center}