/* =========================================================
   about.css: styles used ONLY on /about
   title, story (text + captioned photo) and the autoplaying montage video
   ========================================================= */
.ab{--spring:cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;background:linear-gradient(var(--sky) 0,#F3F7FF 420px,#fff 100%);padding:clamp(36px,5vw,64px) 20px clamp(80px,10vw,130px)}
.ab .cloud{left:0;animation:cdrift var(--t) linear var(--dl) infinite backwards}   /* clouds always glide in from off-screen */

/* ---------- Title ---------- */
.hd{position:relative;z-index:2;max-width:1240px;margin:0 auto;text-align:center}
.hd h1{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:0 .2em;font:700 clamp(3.6rem,16vw,5.8rem)/.95 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.025em}
.m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .06em .2em;margin:-.06em -.06em -.2em}
.m>span{display:block;animation:rise .95s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.2s + var(--i)*.14s)}
.abc{width:.9em;height:auto;margin-bottom:.08em;rotate:6deg;overflow:visible;filter:drop-shadow(0 8px 10px rgba(42,27,69,.16));animation:pop .7s var(--spring) .9s backwards,bob 4s ease-in-out 1.6s infinite}

/* ---------- Story: text + captioned photo ---------- */
.story{position:relative;z-index:2;max-width:1160px;margin:clamp(48px,7vw,96px) auto 0;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.txt p{font-size:1.1rem;line-height:1.75;color:var(--muted)}
.txt p+p{margin-top:1.2em}
.txt .big{font:600 clamp(1.45rem,2.6vw,2.1rem)/1.3 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;color:var(--ink)}

.pol{position:relative;max-width:560px;margin:0 auto;padding:12px 12px 0;background:#fff;border-radius:34px;rotate:var(--r,-2deg);
  box-shadow:0 26px 44px -24px rgba(42,27,69,.5);transition:rotate .55s var(--spring),translate .55s var(--spring)}
.pol:hover{rotate:0deg;translate:0 -8px}
.pol::before{content:"";position:absolute;z-index:2;top:-13px;left:50%;width:100px;height:28px;translate:-50% 0;rotate:-4deg;border-radius:6px;background:var(--pinkt)}
.pol .ph{position:relative;aspect-ratio:4/3;border-radius:24px}
.pol .ph:hover{rotate:0deg;scale:1}
.pol .ph .in{position:absolute;inset:0;width:auto;height:auto}
.pol figcaption{padding:18px 10px 22px;font-size:1rem;line-height:1.55;color:var(--muted)}
.pol figcaption::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--pink);vertical-align:1px}

/* ---------- Montage video ---------- */
.vid{position:relative;z-index:2;max-width:1000px;margin:clamp(80px,10vw,140px) auto 0;rotate:-1deg}
.vid .fr{position:relative;padding:8px;background:#fff;border-radius:44px;box-shadow:0 30px 50px -26px rgba(42,27,69,.55)}
.screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:37px;background:#D6E4FF;display:grid;place-items:center;color:rgba(42,27,69,.32)}
.screen>svg{width:12%;max-width:72px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.js .screen video{opacity:0;transition:opacity .9s}
.js .vid.on video{opacity:1}
.vl{position:absolute;z-index:2;left:clamp(16px,3vw,32px);bottom:-22px;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:#fff;rotate:-2deg;font:700 .95rem/1 var(--sans);box-shadow:0 12px 24px -12px rgba(42,27,69,.5)}
.vl::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink)}
.vid .sp3{position:absolute;z-index:3;width:44px;pointer-events:none}

@keyframes rise{from{transform:translateY(115%)}}
@keyframes pop{from{scale:0;opacity:0}}
@keyframes bob{50%{translate:0 -8px}}
@keyframes cdrift{from{transform:translateX(-110%)}to{transform:translateX(100vw)}}

@media (min-width:901px){
  .hd h1{font-size:clamp(6rem,11vw,9.4rem)}
  .story{grid-template-columns:1.05fr .95fr;gap:clamp(48px,6vw,88px)}
  .pol{margin:0 0 0 auto}
}