/* ===== About page ===== */

/* Old alternating chapter-layout styles (.ab-chapter/.ab-media/.ab-head/.ab-text/…)
   were removed after About moved to the sticky-stack layout below — they were no
   longer referenced by any markup. */

/* ============================================================
   ABOUT — 3 THINGS : cinematic sticky-stack panels (About-only)
   Desktop (>1080px) pins each panel with a staggered top so the
   previous panel's tag stays visible as the next layer covers it.
   ≤1080px falls back to a normal vertical flow. JS (page-about.js)
   adds .has-abjs + .is-in for the reveal/zoom; without JS the
   content shows in its settled state.
   ============================================================ */
.ab-stack{position:relative;background:var(--mercury);color:#1a1a1f;
  --ab-top:76px;--ab-stagger:54px}
.ab-stack-label{margin:0;display:block;padding:clamp(3rem,7vw,6rem) var(--frame) 0;
  color:#71717a}

.ab-panel{position:relative;min-height:100svh;overflow:hidden;background:var(--mercury);
  border-top:1px solid rgba(20,20,26,.1)}
@media(min-width:1081px){
  .ab-panel{position:sticky;top:calc(var(--ab-top) + var(--i) * var(--ab-stagger))}
  /* THINGS 02 & 03 cast an upward shadow so the stacked layers read with depth.
     The 46px blur also bleeds 24px below the panel's bottom edge (onto the light
     ground around .vlinks) — clip everything below the panel, keep the shadow above. */
  .ab-panel ~ .ab-panel{box-shadow:0 -22px 46px rgba(0,0,0,.16);clip-path:inset(-120px 0 0 0)}
}

/* top tag ("● THINGS 0X") — stays visible in the staggered strip */
.ab-panel-tag{position:absolute;top:0;left:0;z-index:4;display:flex;align-items:center;gap:.7em;
  padding:20px var(--frame);font-size:.72rem;letter-spacing:.14em;color:#71717a}
.ab-panel-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:0 0 auto}

/* body: symmetric top/bottom padding; content vertically centered */
.ab-panel-body{position:relative;z-index:2;display:flex;align-items:center;min-height:100svh;
  width:100%;max-width:1920px;margin:0 auto;padding:clamp(4rem,8vh,6rem) var(--frame) clamp(8rem,22vh,15rem)}

/* the enlarged photo IS the background; text overlaps its left/right edges */
.ab-panel-photo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  width:min(52vw,780px);aspect-ratio:4/5;overflow:hidden}
.ab-panel-photo img{width:100%;height:100%;object-fit:cover;opacity:.4}
/* soft left/right gradient fading the photo toward the page base */
.ab-panel-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--mercury) 0%,rgba(232,230,224,0) 30%,rgba(232,230,224,0) 70%,var(--mercury) 100%)}

/* text layer over the photo: JP heading far-left, manuscript far-right */
.ab-panel-grid{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:clamp(1.5rem,3vw,3rem)}
.ab-panel-lead{position:relative;z-index:1;max-width:min(58%,682px)}
.ab-panel-jp{font-family:var(--font-ja);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.55;
  color:#14141a}
.ab-panel-copy{position:relative;z-index:1;max-width:min(40%,42ch)}
.ab-panel-copy p{font-size:clamp(14px,1.02vw,16px);line-height:1.95;color:#33333a}
.ab-panel-copy p + p{margin-top:1.1rem}
.ab-panel-cta{margin-top:clamp(1.8rem,4vh,2.8rem)}

/* ---- JS-enhanced cinematic reveal (progressive) ---- */
.has-abjs .ab-panel-photo img{transform:scale(1.1);transition:transform 1.7s var(--ease)}
.has-abjs .ab-panel.is-in .ab-panel-photo img{transform:scale(1)}
.has-abjs .ab-panel-lead,
.has-abjs .ab-panel-copy{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.has-abjs .ab-panel.is-in .ab-panel-lead{opacity:1;transform:none}
.has-abjs .ab-panel.is-in .ab-panel-copy{opacity:1;transform:none;transition-delay:.15s}

/* ---- small screens: normal vertical flow, photo becomes a normal block ---- */
@media(max-width:1080px){
  .ab-panel{min-height:auto;padding-bottom:clamp(3rem,8vw,5rem)}
  .ab-panel-body{min-height:auto;display:block;padding:72px var(--frame) clamp(3rem,8vw,4rem)}
  .ab-panel-grid{flex-direction:column;align-items:stretch;gap:1.6rem}
  .ab-panel-photo{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:520px;
    margin:0 auto;aspect-ratio:4/3;z-index:auto}
  .ab-panel-photo img{opacity:1}
  .ab-panel-photo::after{display:none}
  .ab-panel-lead,.ab-panel-copy{max-width:none}
  .ab-panel ~ .ab-panel{box-shadow:none}
  .has-abjs .ab-panel-lead,.has-abjs .ab-panel-copy{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .ab-panel-photo img,
  .has-abjs .ab-panel-lead,.has-abjs .ab-panel-copy{transform:none;transition:none;opacity:1}
}