/* ==========================================================
   About page — Lilac Pop
   Uses the variant tokens (--v-*) so it follows the palette.
   ========================================================== */

/* ---- hero: mission + camera photo ---- */
.about-hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,5rem);border-bottom:var(--rule);position:relative;overflow:hidden}
.about-hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.about-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);max-width:15ch;margin:.5rem 0 1.2rem;line-height:1.02}
.about-hero h1 em{color:var(--v-accent)}
.about-hero .lede{max-width:46ch}
.about-hero .photo-tilt{justify-self:end;width:min(100%,600px);transform:rotate(2deg)}
.about-hero .photo-tilt img{aspect-ratio:3/2;object-fit:cover}
.about-hero .photo-tilt .sticker{position:absolute;left:-.8rem;bottom:1.4rem;--tilt:-4deg}
.about-hero .fstar{position:absolute;width:var(--s,18px);height:var(--s,18px);color:var(--v-cta);opacity:.85;animation:float var(--d,7s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.about-hero .fstar.peri{color:var(--v-badge-3)}
.about-hero .fstar svg{width:100%;height:100%;display:block;fill:currentColor}

/* ---- founder: three studio portraits, then the story ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2.2vw,1.6rem);margin:2.25rem 0 3.5rem}
.trio figure{margin:0;position:relative;transform:rotate(var(--t,-2deg));transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.trio figure:hover{transform:rotate(0) translateY(-4px)}
.trio img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:22px;border:3px solid var(--v-accent-2);box-shadow:8px 8px 0 var(--v-accent-2)}
.trio figcaption{position:absolute;left:.9rem;bottom:.9rem}

.story{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.story-side{position:sticky;top:96px}
.story-side h2{margin-bottom:.4rem}
.story-side .role{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--v-accent);margin:0 0 1.2rem}
.story-body p{font-size:1.05rem;max-width:58ch}
.story-body p.big{font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.18;color:var(--v-ink);max-width:22ch;margin:0 0 1.3rem}
.story-body p.big em{color:var(--v-accent)}
.story-body strong{color:var(--v-accent);font-weight:600}
.story-body .fav{margin-top:2rem;padding:1.3rem 1.5rem;border-radius:18px;background:#fff;border:2px solid var(--v-on-light);box-shadow:5px 5px 0 var(--v-cta)}
.story-body .fav small{display:block;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--v-accent);margin-bottom:.35rem}
.story-body .fav p{margin:0;font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--v-ink)}

.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);margin-top:3.5rem}
.milestone{margin:0;position:relative}
.milestone img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:2px solid var(--v-on-light);box-shadow:5px 5px 0 var(--v-accent-2);display:block}
.milestone .sticker{position:absolute;top:-.85rem;left:.9rem}
.milestone figcaption{margin-top:.9rem;font-size:.9rem;color:var(--v-ink-soft);line-height:1.45}
.milestone figcaption b{display:block;color:var(--v-ink);font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-bottom:.15rem}

/* ---- a little more about me ---- */
.travel .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.travel .big{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.12;max-width:18ch;margin:.4rem 0 1.2rem;color:var(--v-ink)}
.travel .big em{color:var(--v-accent)}
.travel .stamps{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

/* ---- the receipts ---- */
.receipts .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.25rem);margin-top:2.5rem}
.stat{background:#fff;border:2px solid var(--v-on-light);border-radius:20px;padding:1.4rem 1.3rem 1.3rem;box-shadow:5px 5px 0 var(--v-accent-2);transform:rotate(var(--t,0));transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.stat:hover{transform:rotate(0) translateY(-3px)}
.stat b{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.02em;color:var(--v-accent);line-height:1}
.stat span{display:block;margin-top:.5rem;font-size:.9rem;color:var(--v-ink-soft);line-height:1.4}
.stat:nth-child(2){background:var(--v-lavender)}
.stat:nth-child(4){background:var(--v-solar);box-shadow:5px 5px 0 var(--v-cta)}
.receipts .more{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.25rem)}
.receipts .more li{padding:1rem 1.15rem;border-radius:14px;background:var(--v-bg2);border:1px solid var(--v-line);font-size:.95rem;color:var(--v-ink-soft);line-height:1.45}
.receipts .more li strong{color:var(--v-ink)}

/* ---- how it should feel ---- */
.feel .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.feel h2 em{color:var(--v-accent)}
.feel .beats{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.55rem}
.feel .beats li{display:flex;gap:.7rem;align-items:baseline;font-size:1.05rem;color:var(--v-ink-soft)}
.feel .beats li::before{content:"★";color:var(--v-cta);font-size:.85rem;flex:none}
.feel .punch{font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.25;color:var(--v-ink);margin:1.4rem 0 0;max-width:26ch}
.collage{position:relative;aspect-ratio:1/1.02;min-height:320px}
.collage img{position:absolute;object-fit:cover;display:block;border-radius:18px;border:3px solid #fff;box-shadow:0 22px 44px rgba(44,26,78,.18)}
.collage .c1{left:0;top:4%;width:56%;aspect-ratio:3/4;transform:rotate(-4deg);z-index:2}
.collage .c2{right:0;top:0;width:46%;aspect-ratio:3/4;transform:rotate(3deg)}
.collage .c3{right:6%;bottom:0;width:54%;aspect-ratio:4/3;transform:rotate(-2deg);z-index:3}
.collage .sticker{position:absolute;left:4%;bottom:10%;z-index:4;--tilt:-4deg}

/* ---- what you get ---- */
.get .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.get h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.2rem 0 .8rem}
.proofs{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1.4rem 0 1.6rem}
.proofs span{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);padding:.85rem 1.1rem;border-radius:14px;background:#fff;border:2px solid var(--v-on-light);box-shadow:4px 4px 0 var(--v-cta);color:var(--v-ink);transform:rotate(var(--t,0))}

/* ---- closing: "Let your social media shine." with the homepage shine ---- */
.shine-close .statement{margin-inline:auto;max-width:24ch}
.shine-close .statement em{font-style:italic}
.shine-word{
  display:inline-block;position:relative;padding-right:.08em;
  background:linear-gradient(100deg,var(--v-shine) 0%,var(--v-shine) 38%,var(--v-shine-hi) 50%,var(--v-shine) 62%,var(--v-shine) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(var(--v-shine-rgb),.4));
  animation:shine-text 3.6s ease-in-out infinite;
}
@keyframes shine-text{0%,12%{background-position:100% 0}62%,100%{background-position:0 0}}
.shine-word::before,.shine-word::after{
  content:"";position:absolute;background:var(--v-shine);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:shine-spark 3.6s ease-in-out infinite;
}
.shine-word::before{width:.22em;height:.22em;top:-.02em;right:-.12em}
.shine-word::after{width:.14em;height:.14em;top:.5em;right:-.32em;animation-delay:-1.4s}
@keyframes shine-spark{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}40%{opacity:1;transform:scale(1) rotate(45deg)}55%{opacity:.9;transform:scale(.85) rotate(70deg)}}
.shine-close .cta-copy{margin:1rem auto 0;max-width:46ch}
@media (prefers-reduced-motion:reduce){
  .shine-word,.shine-word::before,.shine-word::after,.about-hero .fstar{animation:none}
  .shine-word::before,.shine-word::after{opacity:.9;transform:none}
}

/* ---- responsive ---- */
@media (max-width:900px){
  .about-hero .wrap,.story,.travel .wrap,.feel .wrap,.get .wrap{grid-template-columns:1fr}
  .about-hero .photo-tilt{justify-self:start;width:min(100%,520px)}
  .story-side{position:static}
  .receipts .stats{grid-template-columns:repeat(2,1fr)}
  .receipts .more{grid-template-columns:1fr}
  .collage{max-width:520px}
}
@media (max-width:560px){
  .trio{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .trio img{border-radius:14px;box-shadow:4px 4px 0 var(--v-accent-2)}
  .trio figcaption{display:none}
  .milestones{grid-template-columns:1fr}
  .milestone img{aspect-ratio:4/3}
  .proofs{grid-template-columns:1fr}
}