/* second story — home.css (rev. 4): editorial storefront */
.hero{position:relative;min-height:calc(100svh - 34px);display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-8% 0;background:url(https://images.unsplash.com/photo-1759630752910-c4f9f628cf88?auto=format&fit=crop&w=2400&q=80) center 30%/cover;z-index:-2;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 40%,rgba(0,0,0,.6))}
.hero__top{display:flex;justify-content:space-between;padding-top:110px}
.hero__mid{display:flex;justify-content:flex-end;align-items:center;padding-block:var(--s4)}
.hero .display{text-align:right;max-width:11ch}
.hero .display span{display:block;overflow:hidden}.hero .display i{display:block;font-style:normal;transform:translateY(105%);animation:rise 1.1s var(--ease) .15s forwards}
.hero .display span:nth-child(2) i{animation-delay:.28s}
@keyframes rise{to{transform:none}}
.hero__foot{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding-bottom:1.4rem;opacity:0;animation:fade 1s var(--ease) .9s forwards}
.hero__foot p{max-width:30ch}
@keyframes fade{to{opacity:1}}
.hero__word{font:700 clamp(6rem,19.5vw,26rem)/.78 var(--f-display);text-transform:var(--case);text-align:center;white-space:nowrap;margin-bottom:-.12em;height:.72em;overflow:hidden;letter-spacing:0}
.hero__word span{display:block;transform:translateY(100%);animation:rise 1.3s var(--ease) .1s forwards}

.ticker{border-block:1px solid var(--ink);padding-block:.75rem;font:500 .68rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.ticker .marquee__t span::after{content:"";display:inline-block;width:5px;height:5px;margin-left:3rem;background:var(--acc);border-radius:50%;vertical-align:middle}

.arrivals{display:grid;grid-template-columns:minmax(150px,.22fr) 1fr;gap:var(--s4);align-items:start}
.arrivals__side{position:sticky;top:110px;display:grid;gap:.9rem}
.arrivals__side h2{margin-bottom:1rem}
.pgrid--3{grid-template-columns:repeat(3,1fr)}

.band{position:relative;min-height:88vh;display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);overflow:hidden;isolation:isolate;padding:var(--s4) var(--pad)}
.band__bg{position:absolute;inset:-14% 0;background:url(https://images.unsplash.com/photo-1637228393246-c38a4b3d2011?auto=format&fit=crop&w=2400&q=80) center/cover;z-index:-2;will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:-1}
.band .label{margin:0;color:var(--paper)}
.band__bot{display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap}
.band h2{font-size:clamp(3rem,9vw,8rem);line-height:.82;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.band h2 small{font:500 .68rem var(--f-mono);letter-spacing:.1em}
.band p{max-width:34ch;font:500 .68rem/1.6 var(--f-mono);letter-spacing:.05em;text-transform:uppercase}

.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;height:min(70vh,640px)}
.pan{position:relative;display:flex;justify-content:space-between;align-items:flex-end;padding:1rem;background:linear-gradient(160deg,rgba(0,0,0,.04),rgba(0,0,0,.12)),var(--paper);border:1px solid var(--line);overflow:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
.pan h3{font-size:clamp(2.4rem,5vw,4.6rem);line-height:.9;writing-mode:vertical-rl;transform:rotate(180deg)}
.pan span{font:500 .68rem var(--f-mono);letter-spacing:.08em}
.pan:hover{background:var(--ink);color:var(--paper)}.pan:hover span{color:var(--acc)}
.conds{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:var(--s3);font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.conds a:hover{color:var(--acc)}

.std{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s5)}
.std__list{display:grid;gap:0}
.std__list div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding-block:1.3rem;border-top:1px solid rgba(255,250,247,.22)}
.std__list div:last-child{border-bottom:1px solid rgba(255,250,247,.22)}
.std__list p{opacity:.72;max-width:44ch;font-size:.92rem}

.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.story{display:flex;flex-direction:column;gap:.8rem}
.story__img{aspect-ratio:4/5;background:#000000;display:flex;align-items:flex-end;padding:1.3rem}
.story__img q{font:700 clamp(1.7rem,2.6vw,2.5rem)/.95 var(--f-display);text-transform:var(--case);quotes:none;color:var(--paper);transition:color .3s}
.story:hover q{color:var(--acc)}
.story__meta{display:flex;justify-content:space-between;gap:1rem}

@media (max-width:980px){
  .hero__top span:last-child{display:none}.arrivals,.std{grid-template-columns:1fr}.arrivals__side{position:static}
  .pgrid--3{grid-template-columns:repeat(2,1fr)}
  .strip{display:flex;overflow-x:auto;height:55vh;scroll-snap-type:x mandatory}.pan{flex:0 0 62%;scroll-snap-align:start}
  .stories{grid-template-columns:1fr}.std__list div{grid-template-columns:1fr}
}
.story__meta span:last-child{font:700 .8rem var(--f-body);letter-spacing:0;text-transform:none}
