/* gag.html — comic-book treatment. Loud on purpose in the hero: halftone
   texture, outlined comic type. The product photo itself stays a plain,
   clean card (no torn-sticker frame) so the shirt reads clearly — the
   personality lives in the price tag and the hover wobble instead. */

.comic-hero{
  position: relative;
  background-color: var(--cream);
  background-image: radial-gradient(rgba(27,27,27,.16) 1.6px, transparent 1.8px);
  background-size: 11px 11px;
  padding: 88px 0 76px;
  overflow: hidden;
  border-bottom: 5px solid var(--black);
}
.comic-hero .wrap{ max-width: 820px; text-align: center; }
.comic-hero .eyebrow{
  display: inline-block;
  background: var(--black);
  color: var(--paper);
  padding: 6px 16px;
  margin-bottom: 22px;
  transform: rotate(-2deg);
}
.comic-title{
  font-size: clamp(2.2rem, 7.4vw, 4.3rem);
  line-height: 1.22;
  color: var(--paper);
  -webkit-text-stroke: 0;
  text-shadow:
    -3px -3px 0 var(--black), 3px -3px 0 var(--black),
    -3px 3px 0 var(--black), 3px 3px 0 var(--black),
    6px 6px 0 var(--accent);
  margin-bottom: 30px;
  padding-bottom: 6px;
}
.comic-hero p.sub{
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 auto;
  color: var(--ink);
  font-weight: 600;
}

.gag-product{
  background: var(--paper);
  padding: 96px 0 110px;
  position: relative;
}
.gag-layout{
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 70px;
  align-items: center;
}

.product-stage{
  position: relative;
  display: flex;
  justify-content: center;
}
/* Plain, clean product card — same clarity contract as the anime page's
   flip-card: a real garment photo, no illustrated-mockup stand-in, no
   texture or clip-path between the shopper and what they're buying. The
   comic personality stays in the wobble on hover and the price tag, not in
   distorting the photo itself. */
.product-frame{
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 12px 16px 0 rgba(27,27,27,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-frame img{ width: 100%; display: block; }
.product-frame:hover{ animation: wobble .65s ease-in-out; }
@keyframes wobble{
  0%,100%{ transform: rotate(0deg) scale(1); }
  25%{ transform: rotate(1.4deg) scale(1.015); }
  50%{ transform: rotate(-2deg) scale(1.03); }
  75%{ transform: rotate(1deg) scale(1.015); }
}
/* Simple rectangular tag — deliberately not a clip-path burst, because a
   burst shape is what clipped the price text last time. Content sizes the
   badge instead of the badge clipping the content, so it survives whatever
   aspect ratio the product photo ends up being. */
.price-tag{
  position: absolute;
  top: 18px;
  right: -12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  line-height: 1;
  padding: 11px 20px 9px;
  border-radius: 4px;
  transform: rotate(-5deg);
  box-shadow: 0 10px 22px rgba(179,18,45,.35);
  white-space: nowrap;
}
.price-tag .amt{ font-size: 1.3rem; }
.price-tag .only{ font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; margin-top: 3px; opacity: .85; }

.gag-info .eyebrow{ color: var(--accent); display: block; margin-bottom: 12px; }
.gag-info h2{
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  margin-bottom: 18px;
  color: var(--ink);
}
.gag-info p.blurb{
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 48ch;
  color: var(--muted-light);
  margin-bottom: 18px;
}
.gag-info .specs{
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.gag-info .specs span{ opacity: .65; }

.gag-callout{
  background: var(--black);
  color: var(--white);
  padding: 60px 0;
}
.gag-callout .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gag-callout h3{ font-size: clamp(1.4rem, 3.6vw, 2rem); max-width: 520px; }
.gag-callout span.tag{ color: var(--accent-bright); }

@media (max-width: 900px){
  .gag-layout{ grid-template-columns: 1fr; gap: 40px; }
  .product-frame{ max-width: 320px; }
}