/* sweatshirts.html: the crewneck collection. Added 2026-10-08.
   The hero borrows from the garment itself: a ribbed hem band along the
   bottom edge with a stitched seam above it, and three of the crewnecks fanned
   out like cards on a table. Charcoal and gold, the brand's warm dark side,
   so it sits apart from the near-black tee pages. The grid, cards, spec strip
   and closing band are shared (shop.css / base.css). */

.sw-hero{
  position: relative;
  background: var(--charcoal-2);
  color: var(--white);
  padding: 80px 0 0;
  overflow: hidden;
}
.sw-hero::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(48% 70% at 78% 38%, rgba(179,18,45,.24), transparent 66%),
    radial-gradient(40% 60% at 0% 100%, rgba(217,165,49,.11), transparent 62%);
  pointer-events: none;
}
.sw-hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: 96px;          /* clear of the rib band */
}
.sw-copy .eyebrow{ display: block; color: var(--gold); margin-bottom: 18px; }
.sw-copy h1{
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  margin-bottom: 24px;
}
.sw-copy h1 em{ font-style: normal; color: var(--accent-bright); }
.sw-copy .lede{
  font-size: clamp(.98rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  color: var(--muted-dark);
  max-width: 50ch;
  margin-bottom: 24px;
}
.sw-copy .hero-meta{ color: var(--white); }
.sw-copy .hero-meta strong{ color: var(--gold-bright); }

/* Three crewnecks fanned like cards. Sizes are fractions of the stack so the
   fan scales with its column and never pokes past it. */
.sw-stack{
  position: relative;
  aspect-ratio: 16 / 10;
}
.sw-card{
  position: absolute;
  top: 50%; left: 50%;
  width: 44%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  background: #fff;
  border: 7px solid #fff;
  border-radius: 4px;
  box-shadow: 0 24px 48px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.2);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.sw-card-1{ transform: translate(-108%, -46%) rotate(-8deg); }
.sw-card-3{ transform: translate(8%, -46%) rotate(8deg); }
.sw-card-2{ transform: translate(-50%, -53%) rotate(1deg); z-index: 2; }
.sw-stack:hover .sw-card-1{ transform: translate(-114%, -48%) rotate(-11deg); }
.sw-stack:hover .sw-card-3{ transform: translate(14%, -48%) rotate(11deg); }

/* Ribbed hem: knit ribs plus a gold stitch line above them. */
.sw-rib{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  background:
    repeating-linear-gradient(90deg, rgba(245,243,238,.07) 0 3px, rgba(0,0,0,.22) 3px 7px),
    #161513;
  border-top: 1px solid rgba(0,0,0,.4);
}
.sw-rib::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -13px;
  border-top: 2px dashed rgba(217,165,49,.5);
}

@media (max-width: 960px){
  .sw-hero{ padding-top: 60px; }
  .sw-hero-inner{ grid-template-columns: 1fr; gap: 26px; padding-bottom: 86px; }
  .sw-stack{ max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 620px){
  .sw-hero{ padding-top: 48px; }
  .sw-hero-inner{ padding-bottom: 76px; }
  .sw-card{ border-width: 4px; }
  .sw-rib{ height: 34px; }
}