/* b: Kampanje. A wall of the groups behind the logo with their own chest logos running
   underneath, each in its own dark tile; the garments as product cards you swipe or pick by
   name (shop.css), each opening its own page; the custom pieces; the groups edge to edge. */
.hero-b{position:relative;display:grid;place-items:center;min-height:min(100svh,1000px);padding:72px 0 clamp(120px,17vh,170px);overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease}
.hero-bg.in{opacity:.55}
.hero-b::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(9,9,11,.5),rgba(9,9,11,.92) 100%),linear-gradient(180deg,rgba(9,9,11,.3),rgba(9,9,11,.2) 50%,var(--bg) 88%)}
.hero-in{position:relative;z-index:1;width:100%;padding:0 16px}

/* the groups' chest logos, running; each opens that group's photos */
.logos{--lh:33px;position:absolute;z-index:1;left:0;right:0;bottom:clamp(22px,5vh,48px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logos-track{display:flex;width:max-content;animation:ticker 80s linear infinite;will-change:transform}
.logos ul{display:flex;align-items:center;gap:10px;margin:0;padding:6px 5px;list-style:none}
.lg{display:flex;align-items:center;justify-content:center;height:calc(var(--lh) * 1.5 + 18px);padding:0 16px;border-radius:14px;background:#18181c;box-shadow:inset 0 0 0 1px #26262d;line-height:0;transition:background .25s ease,box-shadow .25s ease}
.lg img{width:auto;max-width:none;height:calc(var(--lh) * var(--f));opacity:0;transition:opacity .4s ease,transform .25s ease}
.lg img.in{opacity:1}
@media(min-width:720px){.logos{--lh:38px}.logos ul{gap:14px;padding:8px 7px}.lg{padding:0 22px;border-radius:16px}}
@media(min-width:1280px){.logos{--lh:42px}}
@media(hover:hover){.logos:hover .logos-track{animation-play-state:paused}.lg:hover{background:#202026;box-shadow:inset 0 0 0 1px #33333c}.lg:hover img{transform:scale(1.05)}}

/* the garments: a card each (shop.css), swiped, or picked by name up top */
.shop{padding:clamp(56px,7vw,76px) 0 clamp(64px,9vw,112px)}
.car-head{display:flex;align-items:center;gap:16px;max-width:var(--wrap);margin:0 auto 16px;padding:0 16px}
.car-tabs{position:relative;flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:-4px -16px;padding:4px 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
.car-tabs::-webkit-scrollbar{display:none}
.car-tab{flex:none;padding:10px 14px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--varsity);font-size:13px;line-height:1;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--soft);transition:background .2s,color .2s,box-shadow .2s}
.car-tab:hover{color:#fff;box-shadow:inset 0 0 0 1px #3c3c46}
.car-tab[aria-current="true"]{background:#fff;color:#09090b;box-shadow:none}
.car-arrows{display:none;flex:none;gap:8px}
.car-arr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .15s,opacity .15s}
.car-arr svg{width:20px;height:20px}
.car-arr:hover{background:#202027}
.car-arr:disabled{opacity:.3;cursor:default}
.car-track{position:relative;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 16px;scroll-padding:0 16px}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline-offset:-2px}
.credit{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 8px;border-radius:999px;background:rgba(9,9,11,.78);font-family:var(--varsity);font-size:11px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:600px){.credit{left:14px;bottom:14px;padding:6px 11px;font-size:13px}}
@media(min-width:720px){
  .car-head{padding:0 32px}
  .car-tabs{margin:-4px 0;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .car-arrows{display:flex}
  .car-track{gap:16px;padding:0 32px;scroll-padding:0 32px}
}
/* the first card lines up with the page, the row runs on past the right edge */
@media(min-width:1300px){
  .car-track{padding:0 max(32px,calc(50% - 588px));scroll-padding:0 max(32px,calc(50% - 588px))}
}

/* the groups, edge to edge */
.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
@media(min-width:720px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){.wall{grid-template-columns:repeat(7,minmax(0,1fr))}}
.wcard{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--card)}
.wcard img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){
  .wcard .glabel{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
  .wcard:hover .glabel,.wcard:focus-visible .glabel{opacity:1;transform:none}
  .wcard:hover img{transform:scale(1.05)}
}

/* custom: one-off pieces made for a single group */
.custom{padding:clamp(24px,5vw,64px) 16px clamp(64px,9vw,120px)}
.custom-h{display:flex;justify-content:center;margin:0 0 clamp(22px,3.4vw,40px);line-height:0;color:#fff}
.custom-h .vname{--nh:clamp(52px,11vw,132px)}
.cust-grid{display:grid;gap:12px;max-width:var(--wrap);margin:0 auto;padding:0;list-style:none}
.cust{position:relative;display:block;width:100%;border-radius:var(--r);overflow:hidden;background:var(--card)}
.cust img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s ease}
@media(hover:hover){.cust:hover img{transform:scale(1.02)}}
@media(min-width:720px){
  .custom{padding-left:32px;padding-right:32px}
  .cust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .cust-grid.one{grid-template-columns:minmax(0,1fr)}
  .one .cust img{aspect-ratio:auto;height:min(74svh,760px);object-position:50% 45%}
}

@media(prefers-reduced-motion:reduce){
  .logos{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logos-track{animation:none}
  .logos ul[aria-hidden]{display:none}
}