/* ---------------------------------------------------------------------------
   boutique.css: the Boutique, the home page.

   The video hero, this month's drop with its tilting picture, the lookbook
   that drags sideways, the statement, the recent drops and how a live drop
   works. The page's own rules, in the order it had them.
   --------------------------------------------------------------------------- */

.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
/* ===== FULL-BLEED VIDEO HERO ===== */
.hero{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:clamp(520px,86vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--blue)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero .fill{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 90% at 25% 20%,rgba(184,153,104,.35),transparent 60%),linear-gradient(160deg,#0d2f9e,#061c66)}
.hero .scrim{position:absolute;inset:0;z-index:2;background:rgba(6,15,46,.5)}
.hero .eyebrow{font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#aebbe8;margin-bottom:1.4rem}
.hero h1{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(3.4rem,12vw,9rem);line-height:.82;letter-spacing:.01em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .thin{display:block;font-family:var(--util);font-weight:400;text-transform:none;font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:0;color:rgba(255,255,255,.85);margin-top:1.2rem;max-width:44ch;text-shadow:none}
.hero .go{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;font-weight:600;font-size:.95rem;color:var(--blue);background:#fff;padding:.9rem 1.7rem;border-radius:999px;pointer-events:auto;transition:.2s}
.hero .go:hover{background:#eef1fb;transform:translateY(-2px)}
.hero .tag{position:absolute;top:1rem;left:1rem;z-index:3;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.3);padding:.35rem .6rem;border-radius:999px}
/* section header, editorial */
.sec{padding:clamp(2.5rem,6vw,5rem) 0}
/* ===== FEATURE: split editorial signature ===== */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(3rem,8vw,7rem) 0 clamp(2rem,5vw,4rem)}
.feature .copy .kick{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:1.4rem}
.feature .copy .kick::before{content:"";width:34px;height:2px;background:var(--blue)}
.feature .copy h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.84;color:var(--ink);letter-spacing:-.01em}
.feature .copy h2 .out{-webkit-text-stroke:2px var(--blue);color:transparent;display:block}
.feature .copy p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:1.6rem 0 2rem;max-width:42ch}
.feature .copy .cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--util);font-weight:600;font-size:.95rem;color:#fff;background:var(--blue);padding:.95rem 1.8rem;border-radius:999px;pointer-events:auto;transition:.2s}
.feature .copy .cta:hover{background:var(--blue-deep);transform:translateY(-2px)}
.feature .copy .cta svg{width:16px;height:16px;fill:currentColor;transition:transform .2s}
.feature .copy .cta:hover svg{transform:translateX(3px)}
/* magnetic tilt visual */
.feature .visual{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--blue);box-shadow:0 50px 90px -40px rgba(8,38,139,.7);transform-style:preserve-3d;transition:transform .3s ease-out}
.feature .visual .fill{position:absolute;inset:0;background:linear-gradient(150deg,#12409e,#061c66)}
.feature .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.feature .visual img:not([src]),.feature .visual img[src=""]{display:none}
.feature .visual .lbl{position:absolute;inset:0;display:grid;place-items:center;color:#aebbe8;font-family:var(--collegiate);font-weight:800;font-size:3rem;z-index:1}
.feature .visual .float-tag{position:absolute;z-index:3;font-family:var(--util);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;background:#fff;color:var(--blue);padding:.4rem .8rem;border-radius:999px;box-shadow:0 10px 24px -10px rgba(8,38,139,.5);transform:translateZ(50px)}
.feature .visual .float-tag.t1{top:1.1rem;left:1.1rem}
.feature .visual .float-tag.t2{bottom:1.1rem;right:1.1rem;background:var(--blue);color:#fff}
/* ===== HORIZONTAL-SCROLL LOOKBOOK ===== */
.lookbook-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:clamp(3rem,7vw,5rem) 0 1.6rem}
.lookbook-head h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,7vw,5rem);line-height:.88;color:var(--ink)}
.lookbook-head .sub{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);max-width:24ch;text-align:right}
.lookbook{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding:0 0 2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.lookbook.dragging{cursor:grabbing;scroll-snap-type:none}
.lookbook::-webkit-scrollbar{display:none}
.look{flex:0 0 auto;width:clamp(240px,32vw,380px);scroll-snap-align:center}
.look .frame{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--blue)}
.look .frame .fill{position:absolute;inset:0;background:linear-gradient(155deg,#0d2f9e,#061c66)}
.look .frame .lbl{position:absolute;inset:0;display:grid;place-items:center;color:#aebbe8;font-family:var(--collegiate);font-weight:700;font-size:2rem;z-index:1}
.look .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.look .frame img:not([src]),.look .frame img[src=""]{display:none}
.look:hover .frame img{transform:scale(1.05)}
.look .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;gap:1rem}
.look .meta h3{font-family:var(--collegiate);font-weight:700;text-transform:uppercase;font-size:1.35rem;color:var(--ink);line-height:1}
.look .meta .tagword{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* ===== STATEMENT / MANIFESTO ===== */
.statement{width:100%;position:relative;background:var(--ink);color:#fff;padding:clamp(4rem,12vw,9rem) 28px;overflow:hidden}
.statement .big{max-width:1100px;margin:0 auto;font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5.4rem);line-height:.98;letter-spacing:.01em;overflow-wrap:break-word}
.statement .big em{font-style:normal;color:#5b73c4}
.statement .sub{max-width:560px;margin:2rem auto 0;color:rgba(255,255,255,.7);font-size:1rem;line-height:1.6}
.statement .bgword{position:absolute;bottom:-4%;right:-2%;font-family:var(--collegiate);font-weight:900;font-size:clamp(8rem,26vw,26rem);line-height:.7;color:rgba(255,255,255,.05);pointer-events:none;user-select:none;z-index:0;max-width:100%;overflow:hidden}
.statement .big,.statement .sub{position:relative;z-index:1}
/* ===== DROPS: asymmetric bento ===== */
.drops-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:clamp(3rem,7vw,5rem) 0 1.8rem}
.drops-head h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,7vw,5rem);line-height:.88;color:var(--ink)}
.drops-head .live-dot{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.drops-head .live-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.drops{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px}
.drop{position:relative;border-radius:14px;overflow:hidden;background:var(--blue);cursor:pointer;transition:transform .4s cubic-bezier(.2,.7,.2,1);aspect-ratio:3/4}
.drop.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.drop:hover{transform:translateY(-6px)}
.drop .fill{position:absolute;inset:0;background:linear-gradient(155deg,#0d2f9e,#061c66)}
.drop .lbl{position:absolute;inset:0;display:grid;place-items:center;color:#aebbe8;font-family:var(--collegiate);font-weight:800;font-size:1.6rem;z-index:0}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.drop img:not([src]),.drop img[src=""]{display:none}
.drop:hover img{transform:scale(1.06)}
.drop .meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1rem;background:linear-gradient(to top,rgba(6,15,46,.94),transparent)}
.drop .meta .no{font-family:var(--util);font-size:.62rem;letter-spacing:.16em;color:#aebbe8}
.drop .meta h3{font-family:var(--collegiate);font-weight:700;text-transform:uppercase;font-size:1.15rem;line-height:1;margin-top:.2rem;color:#fff}
.drop.big .meta h3{font-size:1.7rem}
.drop .claim{position:absolute;top:.7rem;right:.7rem;z-index:3;font-family:var(--util);font-weight:600;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--blue);padding:.28rem .6rem;border-radius:999px}
/* shop live band */
.live{background:var(--blue);color:var(--white);border-radius:24px;text-align:center;padding:clamp(3rem,7vw,5rem) 1.5rem;margin:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4rem);position:relative;overflow:hidden}
.live .bgword{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--collegiate);font-weight:900;font-size:clamp(8rem,22vw,20rem);line-height:.7;color:rgba(255,255,255,.05);pointer-events:none;z-index:0}
.live>*{position:relative;z-index:1}
.live .eyebrow{font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#aebbe8;margin-bottom:1rem}
.live h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:.92}
.live p{color:rgba(255,255,255,.78);margin:.9rem auto 0;max-width:44ch}
.live .steps{display:flex;flex-direction:column;gap:.9rem;max-width:520px;margin:1.8rem auto 0;text-align:left}
.live .step{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:1rem 1.2rem}
.live .step .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue);font-family:var(--collegiate);font-weight:800;font-size:1.2rem;display:grid;place-items:center}
.live .step p{margin:0;color:#fff;font-size:.98rem;line-height:1.4}
.live .btns{display:flex;gap:.7rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.live .btns a{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;padding:.85rem 1.5rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;pointer-events:auto;transition:.2s}
.live .btns a:hover{background:#fff;color:var(--blue);border-color:#fff}
.live .btns svg{width:20px;height:20px;fill:currentColor}
@media(max-width:820px){
  .feature{grid-template-columns:1fr;gap:2rem}
  .feature .visual{max-width:440px;margin:0 auto;width:100%}
  .drops{grid-template-columns:repeat(2,1fr)}
  .drop.big{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}
}
@media(max-width:860px){
  .drops{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .drops{grid-template-columns:repeat(2,1fr)}
  .feature .copy h2{font-size:clamp(2.4rem,13vw,3.4rem)}
  .drops-head h2,.lookbook-head h2{font-size:clamp(2.2rem,11vw,3rem)}
  .lookbook-head .sub{text-align:left}
}
/* overflow safety: never let big type push the page wide */
.feature .copy h2,.drops-head h2,.lookbook-head h2,.statement .big,.live h2,.hero h1{overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){
  .feature .visual{transform:none!important}
}