/* =============================================================
   PAASHMA — "Editorial Immersive" homepage theme (grunge)
   Faithful direction: cream + near-black + RED, brutalist type.
   Self-contained (own reset + palette). Loaded only on index.html.
   ============================================================= */
:root{
  --paper:#efece3; --paper-2:#e7e3d8; --ink:#141312; --ink-60:rgba(20,19,18,.6); --ink-30:rgba(20,19,18,.3);
  --red:#e5231b; --line:rgba(20,19,18,.16);
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.red{color:var(--red)}

/* ---------- HEADER ---------- */
.eb-header{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px var(--pad);mix-blend-mode:difference;color:#fff}
.eb-header a,.eb-header button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.eb-header__l{display:flex;gap:22px}
.eb-header__r{display:flex;gap:22px;justify-content:flex-end}
.eb-wordmark-sm{font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:.34em;text-transform:uppercase;text-align:center;padding-left:.34em}
.eb-header a:hover,.eb-header button:hover{opacity:.6}

/* ---------- HERO (split) ---------- */
.eb-hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--paper)}
.eb-hero__media{position:absolute;inset:0}
.eb-hero__half{position:absolute;inset:0;background-size:cover;background-position:center}
.eb-hero__half--r{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%);filter:grayscale(1) contrast(1.05)}
.eb-hero__half--l{clip-path:polygon(0 0,52% 0,48% 100%,0 100%)}
.eb-hero__seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--red);transform:translateX(-50%) skewX(-2deg);z-index:3;opacity:.9}
.eb-hero__word{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:2;text-align:center;
  font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(3.2rem,17vw,15rem);line-height:.82;color:var(--ink);mix-blend-mode:multiply}
.eb-hero__tag{position:absolute;right:var(--pad);top:64%;z-index:4;text-align:right;
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2.6rem);line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.eb-hero__drop{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:4;
  font-family:var(--display);font-size:clamp(2rem,7vw,5rem);text-transform:uppercase;color:var(--red);line-height:.9;text-align:center}
.eb-hero__drop small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink);margin-top:8px}

/* ---------- SECTION LABEL ---------- */
.eb-section{padding:clamp(48px,8vw,120px) var(--pad)}
.eb-seclabel{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:36px}
.eb-seclabel__id{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.eb-seclabel__id .red{margin-right:8px}
.eb-seclabel__bar{flex:1;height:1px;background:var(--line);margin:0 20px;position:relative;max-width:340px}
.eb-seclabel__bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:38%;background:var(--ink)}
.eb-seclabel a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink)}

/* ---------- CATEGORIES (vertical labels) ---------- */
.eb-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.eb-cat{position:relative;aspect-ratio:2/3.2;background:var(--paper-2);overflow:hidden;display:block}
.eb-cat img,.eb-cat .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s var(--ease);filter:grayscale(.2)}
.eb-cat:hover img{transform:scale(1.05);filter:grayscale(0)}
.eb-cat__label{position:absolute;left:10px;bottom:16px;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.4rem);text-transform:uppercase;color:#fff;mix-blend-mode:difference;letter-spacing:.02em}
.eb-cat__n{position:absolute;right:12px;top:12px;z-index:2;font-family:var(--mono);font-size:12px;color:#fff;mix-blend-mode:difference}

/* ---------- ARRIVALS (product row) ---------- */
.eb-arrivals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.eb-prod{position:relative;display:block}
.eb-prod__media{aspect-ratio:3/4;background:var(--paper-2);overflow:hidden;position:relative}
.eb-prod__media img,.eb-prod__media .ph{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.eb-prod:hover .eb-prod__media img{transform:scale(1.04)}
.eb-prod__tag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;z-index:2}
.eb-prod__row{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;gap:10px}
.eb-prod__name{font-family:var(--sans);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
.eb-prod__price{font-family:var(--mono);font-size:12px;color:var(--red)}

/* red sticker */
.eb-sticker{position:absolute;z-index:5;width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;text-transform:uppercase;
  transform:rotate(-12deg);text-align:center;line-height:.9}

/* ---------- DUO (two-up editorial) ---------- */
.eb-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eb-duo__cell{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.eb-duo__cell img,.eb-duo__cell .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eb-duo__label{position:absolute;left:24px;bottom:24px;z-index:2;font-family:var(--display);font-size:clamp(2.4rem,5vw,5rem);
  text-transform:uppercase;color:#fff;mix-blend-mode:difference;line-height:.85}
.eb-duo__label span{display:block;font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.1em;margin-top:6px}

/* ---------- VIDEO BAND (flowers) ---------- */
.eb-band{position:relative;height:70vh;min-height:420px;overflow:hidden;background:var(--ink)}
.eb-band video,.eb-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05)}
.eb-band__scrim{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.eb-band__txt{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:var(--pad)}
.eb-band__txt h2{font-family:var(--display);font-size:clamp(2.4rem,7vw,6rem);text-transform:uppercase;line-height:.9}
.eb-band__txt p{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:14px;opacity:.85}

/* ---------- FOOTER + MARQUEE ---------- */
/* Sticky reveal: the page content sits in an opaque layer ABOVE the footer,
   which is pinned to the bottom — so as you scroll, the content lifts and the
   footer flows up into view from underneath. */
.eb-page{position:relative;z-index:1;background:var(--paper)}
.eb-torn{height:60px;background:var(--paper);position:relative;margin-top:-2px}
/* Footer is normal flow by default (compact). The sticky "flow-up reveal"
   is scoped to the landing only, where a .eb-page layer sits above it. */
.eb-footer{position:relative;z-index:0;background:var(--ink);color:var(--paper);padding:clamp(28px,3.5vw,48px) var(--pad) 0;overflow:hidden;
  clip-path:polygon(0 12px,4% 1px,8% 13px,12% 3px,16% 12px,20% 2px,24% 13px,28% 4px,32% 11px,36% 1px,40% 13px,44% 3px,48% 12px,52% 2px,56% 13px,60% 4px,64% 11px,68% 1px,72% 13px,76% 3px,80% 12px,84% 2px,88% 13px,92% 4px,96% 11px,100% 1px,100% 100%,0 100%)}
.eb-page ~ .eb-footer{position:sticky;bottom:0}
.eb-footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
.eb-footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px}
.eb-footer a{display:block;font-size:14px;padding:4px 0;color:rgba(255,255,255,.85)}
.eb-footer a:hover{color:var(--red)}
.eb-marquee{overflow:hidden;white-space:nowrap;padding:10px 0}
.eb-marquee__track{display:inline-block;font-family:var(--sans);font-weight:800;font-size:clamp(2rem,6vw,4.2rem);letter-spacing:.02em;
  text-transform:uppercase;line-height:1;animation:eb-scroll 22s linear infinite;color:var(--paper)}
.eb-marquee__track span{padding:0 .3em}
.eb-marquee__track span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--paper)}
/* footer mobile: 2 columns + smaller marquee so it stops eating the screen */
@media(max-width:640px){
  .eb-footer{padding:22px var(--pad) 0}
  .eb-footer__cols{grid-template-columns:repeat(2,1fr);gap:20px 14px;padding-bottom:20px}
  .eb-footer h4{margin-bottom:8px}
  .eb-footer a{font-size:13px;padding:3px 0}
  .eb-marquee{padding:6px 0}
  .eb-marquee__track{font-size:clamp(1.5rem,9vw,2.4rem)}
  .eb-footer__bottom{flex-direction:column;gap:4px;align-items:flex-start;padding:14px 0 20px;font-size:10px}
}
@keyframes eb-scroll{to{transform:translateX(-50%)}}
.eb-footer__bottom{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:20px 0 28px}

/* ---------- PINNED HORIZONTAL CATEGORIES ---------- */
.eb-hpin{height:100vh;overflow:hidden;position:relative;background:var(--paper)}
.eb-htrack{display:flex;height:100%;align-items:center;gap:16px;padding:0 var(--pad);will-change:transform}
.eb-htrack .eb-cat{flex:0 0 auto;width:min(32vw,440px);height:74vh;aspect-ratio:auto}
.eb-hmeta{position:absolute;top:78px;left:var(--pad);right:var(--pad);z-index:6;display:flex;align-items:center;justify-content:space-between}
.eb-hmeta .eb-seclabel__id{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.eb-hmeta a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink)}
.eb-progress{flex:1;height:2px;background:var(--line);margin:0 24px;position:relative;max-width:460px}
.eb-progress__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ink)}

/* ---------- GRAFFITI STATEMENT ---------- */
.eb-statement{position:relative;padding:clamp(64px,11vw,150px) var(--pad);text-align:center;overflow:hidden;background:var(--paper)}
.eb-statement__img{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(38vw,440px);aspect-ratio:3/4;z-index:1;background:var(--paper-2)}
.eb-statement__img .ph,.eb-statement__img img{width:100%;height:100%;object-fit:cover}
.eb-statement__big{position:relative;z-index:2;font-family:var(--display);font-size:clamp(3rem,14vw,12rem);line-height:.82;text-transform:uppercase;letter-spacing:-.01em;mix-blend-mode:multiply}
.eb-statement__big .spray{color:var(--red)}
.eb-statement__meta{position:relative;z-index:3;display:flex;justify-content:space-between;margin-top:48px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
@media(max-width:860px){
  .eb-hpin{height:auto;overflow:visible}
  .eb-htrack{flex-wrap:wrap;height:auto;padding-top:90px;padding-bottom:40px}
  .eb-htrack .eb-cat{width:calc(50% - 8px);height:auto;aspect-ratio:2/3.2}
  .eb-hmeta{position:static;padding:0 var(--pad)}
  .eb-statement__img{width:70vw}
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- MOBILE ---------- */
@media(max-width:860px){
  .eb-header{grid-template-columns:auto 1fr auto}
  .eb-header__l a:not(:first-child){display:none}
  .eb-cats{grid-template-columns:repeat(2,1fr)}
  .eb-arrivals{grid-template-columns:repeat(2,1fr)}
  .eb-duo{grid-template-columns:1fr}
  .eb-hero__tag{top:auto;bottom:20%;font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
