/* ============================================================
   AWGroup LP — EDITORIAL (broken grid · tilt · overlap · motion)
   layered after blocks.css to intentionally break alignment
   ============================================================ */

/* ---- tilt utilities (static rest angle; JS adds scroll motion) ---- */
.tl2{transform:rotate(-2deg);} .tl4{transform:rotate(-4deg);} .tl7{transform:rotate(-7deg);}
.tr2{transform:rotate(2deg);}  .tr4{transform:rotate(4deg);}  .tr7{transform:rotate(7deg);}
.par{will-change:transform;}

/* ---- diagonal sticker / stamp ---- */
.sticker{position:absolute;z-index:6;display:grid;place-items:center;text-align:center;
  font-family:var(--f-disp);font-weight:900;line-height:1.18;color:#fff;
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FF8FC0,#FF4F94 70%,#D81E72);
  box-shadow:0 12px 26px -10px rgba(216,30,114,.7),inset 0 0 0 2px rgba(255,255,255,.7),
    inset 0 0 0 6px rgba(255,255,255,.25);font-size:14px;}
.sticker.aqua{background:radial-gradient(circle at 38% 32%,#8FD9F4,#5FC2EC 70%,#2E9BCB);
  box-shadow:0 12px 26px -10px rgba(46,155,203,.7),inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 0 6px rgba(255,255,255,.25);}
.sticker small{font-size:9px;font-weight:700;letter-spacing:.04em;opacity:.92;}
.sticker.ribbon-cut{border-radius:8px;width:auto;height:auto;padding:9px 15px;font-size:13px;}

/* ---- vertical Japanese accent text ---- */
.vjp{writing-mode:vertical-rl;font-family:var(--f-mincho);font-weight:700;
  letter-spacing:.22em;line-height:1.5;}
.vjp.lg{font-size:clamp(20px,5.5vw,26px);}
.vserif{writing-mode:vertical-rl;font-family:var(--f-serif);font-style:italic;
  letter-spacing:.32em;text-transform:uppercase;}

/* ---- slanted heading accent ---- */
.slash{display:inline-block;transform:rotate(-4deg);transform-origin:left center;}
.slash-r{display:inline-block;transform:rotate(3deg);}

/* ---- big translucent watermark number/word behind content ---- */
.watermark{position:absolute;z-index:0;font-family:var(--f-fashion);font-weight:700;
  color:rgba(216,30,114,.07);line-height:.8;pointer-events:none;user-select:none;white-space:nowrap;}
.scale .watermark{color:rgba(255,255,255,.07);}

/* ============================================================
   HERO — add diagonal sticker + vertical catch
   ============================================================ */
.hero__vcatch{position:absolute;left:14px;top:16%;z-index:4;color:#fff;
  text-shadow:0 2px 12px rgba(50,6,36,.7);}
.hero__vcatch .vjp{font-size:15px;color:#fff;}
.hero .sticker{top:13%;right:18px;}

/* ============================================================
   MANIFESTO — overlapping tilted polaroid + vertical label
   ============================================================ */
.manifesto{overflow:hidden;}
.manifesto__photo{position:relative;width:62%;max-width:230px;margin:6px auto 30px;
  background:#fff;padding:10px 10px 30px;border-radius:5px;box-shadow:var(--shadow-pop);}
.manifesto__photo image-slot{width:100%;height:230px;border-radius:3px;overflow:hidden;display:block;}
.manifesto__photo .hand{position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-family:var(--f-script);font-size:22px;color:var(--lav-deep);}
.manifesto__vlabel{position:absolute;right:10px;top:40px;z-index:3;color:var(--ink-faint);}

/* ============================================================
   GALLERY — break the row: alternate tilt + offset
   ============================================================ */
.gcard:nth-child(odd){transform:rotate(-2.5deg);}
.gcard:nth-child(even){transform:rotate(2.5deg);margin-top:18px;}
.gcard:nth-child(3n){margin-top:-6px;}

/* ============================================================
   ABOUT — overlapping duo collage (two tilted photos)
   ============================================================ */
.about__duo{position:relative;height:340px;margin:30px 0 36px;}
.about__duo .ph{position:absolute;border-radius:10px;overflow:hidden;background:#fff;
  border:5px solid #fff;box-shadow:var(--shadow-pop);}
.about__duo .ph image-slot{width:100%;height:100%;display:block;}
.about__duo .ph.a{width:62%;height:74%;left:0;top:0;transform:rotate(-4deg);z-index:2;}
.about__duo .ph.b{width:54%;height:64%;right:0;bottom:0;transform:rotate(5deg);z-index:3;}
.about__duo .tag{position:absolute;z-index:5;top:8px;left:8px;font-family:var(--f-disp);
  font-weight:700;font-size:11px;color:var(--rose-deep);background:rgba(255,255,255,.94);
  padding:6px 11px;border-radius:999px;}
.about__duo .vserif{position:absolute;right:-4px;top:30%;z-index:4;font-size:11px;color:var(--ink-faint);}

/* ============================================================
   NUMBERS — watermark + tilted covers w/ motion
   ============================================================ */
.scale .covers .cover{box-shadow:0 24px 44px -18px rgba(0,0,0,.65);}
.scale .bignum{position:relative;}

/* ============================================================
   INCOME — overlapping polaroid by the average, tilted cards
   ============================================================ */
.income{overflow:hidden;}
.avg{position:relative;}
.income .avg__poke{position:absolute;right:2%;top:-6px;width:30%;max-width:120px;z-index:3;
  background:#fff;padding:7px 7px 20px;border-radius:4px;box-shadow:var(--shadow-pop);
  transform:rotate(7deg);}
.income .avg__poke image-slot{width:100%;height:96px;border-radius:2px;overflow:hidden;display:block;}
.income .avg__poke b{position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-family:var(--f-script);font-size:14px;color:var(--rose-deep);}
.paycard:nth-child(odd){transform:rotate(-1.4deg);}
.paycard:nth-child(even){transform:rotate(1.4deg);}

/* ============================================================
   BECOME — staggered tilts + vertical heading accent
   ============================================================ */
.bcard:nth-child(3n+1){transform:rotate(-3deg);}
.bcard:nth-child(3n+2){transform:rotate(2deg);margin-top:14px;}
.bcard:nth-child(3n){transform:rotate(3.5deg);}
.become__vside{position:absolute;left:10px;top:120px;z-index:3;color:var(--ink-faint);}

/* ============================================================
   FLOW — add a tilted photo chip to each step
   ============================================================ */
.step__pic{position:relative;flex:none;width:74px;height:92px;border-radius:8px;overflow:hidden;
  background:#fff;border:4px solid #fff;box-shadow:var(--shadow-soft);align-self:flex-start;margin-top:2px;}
.step__pic image-slot{width:100%;height:100%;display:block;}
.step:nth-child(odd) .step__pic{transform:rotate(-5deg);}
.step:nth-child(even) .step__pic{transform:rotate(5deg);}
.flow .step{align-items:flex-start;}

/* ============================================================
   FINALE — vertical accent line
   ============================================================ */
.finale__vside{position:absolute;right:14px;top:18%;z-index:4;color:rgba(255,255,255,.8);}
.finale__vside .vserif{font-size:11px;}

/* reduce tilt intensity on very small screens to avoid clipping */
@media (max-width:360px){
  .gcard:nth-child(odd),.gcard:nth-child(even){transform:none;margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  .par{transform:none !important;}
}