/* SECTION 05 - scroll-linked "what makes me stand out" sequence */
@font-face{
  font-family:'Crafty Girls';
  src:url('fonts/CraftyGirls-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('fonts/CabinetGrotesk-Regular.woff2') format('woff2'),
      url('fonts/CabinetGrotesk-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('fonts/CabinetGrotesk-Medium.woff2') format('woff2'),
      url('fonts/CabinetGrotesk-Medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('fonts/CabinetGrotesk-Bold.woff2') format('woff2'),
      url('fonts/CabinetGrotesk-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
.standout{
  --so-ink:#24211C;
  display:block;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  color:var(--so-ink);
  isolation:isolate;
  background:radial-gradient(circle at 12% 15%,rgba(200,137,43,0.16),transparent 32%),#E9E5DD;
}
.so-stage{position:relative;padding:56px 20px 48px;}
.so-num{
  position:absolute;left:-10px;top:7%;z-index:0;
  font-family:'Big Shoulders Display',sans-serif;
  font-size:var(--section-number-size);
  font-weight:800;line-height:0.8;
  color:rgba(24,26,29,0.035);
  pointer-events:none;
}
.so-title{
  position:relative;z-index:1;margin:0 0 24px;text-align:center;
  font-family:'Cabinet Grotesk',sans-serif;font-weight:700;text-transform:none;text-shadow:none;
  line-height:0.9;letter-spacing:-0.01em;white-space:nowrap;max-width:none;
}
.so-line{display:block;}
.so-line--1{color:#fff;font-size:clamp(26px,8.6vw,92px);}
.so-line--2{color:#000;font-size:clamp(34px,11vw,120px);}
.so-group{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:960px;margin:0 auto;}
.so-frame{position:relative;grid-column:1/-1;aspect-ratio:16/9;overflow:hidden;background:#24211C;border-radius:0;}
.so-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.72);}
.so-over{display:none;}
.so-photos{display:contents;}
.so-photo{margin:0;aspect-ratio:1/1.1;overflow:hidden;}
.so-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
.so-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  padding:12px 20px;border:0;border-radius:999px;cursor:pointer;
  background:var(--accent);color:#1b1914;
  font:900 13px/1 'Cabinet Grotesk',sans-serif;letter-spacing:0.1em;text-transform:uppercase;
}
.so-play[hidden]{display:none;}
.standout-copy{position:relative;z-index:3;width:min(94%,1400px);margin:36px auto 0;}
.standout .standout-copy p{margin:0 0 8px;max-width:none;text-align:left;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:clamp(18px,3vw,42px);line-height:1.25;color:#000;}
.standout-copy strong{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-synthesis:none;text-transform:none;color:var(--accent);}

/* ---------- animated mode (JS adds .so-anim) ---------- */
.standout.so-anim{height:calc(var(--so-vh,100dvh) * 6);min-height:0;display:block;}
.so-anim .so-stage{
  position:sticky;top:0;height:var(--so-vh,100dvh);width:100%;padding:0;overflow:hidden;
  container-type:size;
  --fw:0.62;--fh:0.34;
}
.so-anim .so-num{top:7%;}
.so-anim .so-title{
  position:absolute;left:0;right:0;top:50%;margin:0;z-index:1;
  translate:0 -50%;will-change:transform;
}
.so-anim .so-line--1{display:none;}
.so-anim .so-line--2{font-size:min(14.2cqw,26cqh);}
.so-anim .so-group{
  position:absolute;inset:0;display:block;max-width:none;margin:0;z-index:2;will-change:transform;
}
.so-anim .so-frame{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;z-index:2;}
.so-anim .so-over{
  display:block;position:absolute;left:50%;bottom:6cqh;z-index:3;margin:0;transform:translateX(-50%);text-align:center;
  font-family:'Cabinet Grotesk',sans-serif;font-weight:700;text-transform:none;
  line-height:0.92;letter-spacing:-0.01em;color:#fff;white-space:nowrap;
  font-size:min(14cqw,90cqh);text-shadow:none;pointer-events:none;
}
.so-anim .so-photos{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform,opacity;}
.so-anim .so-photo{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1/1.1;
  box-shadow:0 14px 30px -10px rgba(36,33,28,0.4);
}
.so-p1{--x:4%;--y:5%;--w:30%;}
.so-p2{--x:70%;--y:5%;--w:28%;}
.so-p3{--x:5%;--y:70%;--w:28%;}
.so-p4{--x:66%;--y:72%;--w:30%;}
.so-p5{--x:38%;--y:3%;--w:22%;}
.so-p6{--x:35%;--y:78%;--w:27%;}
/* Additional photos sit below the viewport and enter as the collage scrolls up. */
.so-p7{--x:7%;--y:108%;--w:35%;}
.so-p8{--x:59%;--y:113%;--w:35%;}
.so-p9{--x:13%;--y:140%;--w:29%;}
.so-p10{--x:52%;--y:163%;--w:40%;aspect-ratio:3/2;}
.so-p8,.so-anim .so-p8{aspect-ratio:1170/2070;}
.so-anim .so-p8{width:min(var(--w),25.43cqh);}
.so-p8 img{object-fit:contain;object-position:center;}
.so-anim .so-p10{aspect-ratio:3/2;width:min(var(--w),32cqh);}
.so-anim .standout-copy{
  position:absolute;left:50%;top:50%;width:min(90cqw,1400px);margin:0;z-index:3;
  translate:-50% -50%;opacity:0;pointer-events:none;will-change:transform,opacity;
}
.so-anim .standout-copy p{text-align:center;margin:0 0 min(1cqh,8px);font-size:clamp(16px,min(5.4cqw,3.1cqh),36px);}
.so-anim .standout-copy p:last-child{margin-bottom:0;}
.so-anim .standout-copy.so-on{pointer-events:auto;}

@media (min-aspect-ratio:5/4){
  .so-anim .so-stage{--fw:0.5;--fh:0.5;}
  .so-anim .so-line--2{font-size:min(14.2cqw,30cqh);}
  .so-p1{--x:4%;--y:9%;--w:15%;}
  .so-p2{--x:83%;--y:9%;--w:14.5%;}
  .so-p3{--x:7%;--y:58%;--w:13%;}
  .so-p4{--x:80%;--y:56%;--w:16%;}
  .so-p5{--x:41%;--y:2%;--w:10%;}
  .so-p6{--x:48%;--y:77%;--w:13%;}
  .so-p7{--x:8%;--y:108%;--w:17%;}
  .so-p8{--x:33%;--y:127%;--w:18%;}
  .so-anim .so-p8{width:min(var(--w),33.9cqh);}
  .so-p9{--x:56%;--y:107%;--w:17%;}
  .so-p10{--x:78%;--y:129%;--w:18%;}
  .so-anim .so-p10{width:var(--w);}
  .so-anim .standout-copy{width:min(82cqw,1400px);}
  .so-anim .standout-copy p{font-size:clamp(14px,min(3.2cqw,4.6cqh),52px);}
}
@media (min-aspect-ratio:5/4) and (max-height:520px){
  .so-p5{--w:7%;}
  .so-p6{--w:9%;}
  .so-p1,.so-p3,.so-p4{--w:11%;}
  .so-p2{--w:12.5%;}
}

@media (prefers-reduced-motion:reduce){
  .so-play{display:none;}
}
.scroller.so-nosnap{scroll-snap-type:none;}