/* Report 002 authentic-photo refinement.
 * Real people remain the original photograph pixels. Stafford uses a denser contour
 * traced from a non-generative foreground mask. Calvin Johnson and Penei Sewell use
 * their complete authentic photographs with soft editorial edge fades rather than
 * pretending a rough polygon is a clean cutout.
 */

:root {
  --stafford-cutout-v2: polygon(65.14% 3.51%,59.35% 3.51%,52.04% 7.55%,51.36% 6.91%,53.91% 15.53%,52.72% 16.91%,46.43% 17.23%,44.90% 18.09%,43.20% 22.66%,41.50% 24.04%,30.10% 27.13%,17.69% 34.26%,9.18% 35.96%,3.91% 40.11%,4.08% 41.70%,5.61% 43.09%,9.35% 44.15%,13.78% 44.15%,17.86% 41.70%,19.39% 37.66%,27.55% 33.72%,31.97% 33.19%,38.78% 30.00%,47.11% 28.72%,51.19% 29.15%,51.87% 32.34%,48.81% 31.70%,48.64% 32.98%,50.00% 33.94%,49.49% 34.57%,54.25% 35.74%,52.55% 36.28%,52.72% 44.47%,49.83% 47.87%,40.99% 55.00%,34.86% 63.30%,33.50% 66.60%,30.95% 68.83%,29.59% 80.53%,27.04% 83.51%,20.41% 86.17%,16.33% 90.32%,18.03% 92.02%,20.75% 92.23%,25.17% 91.38%,28.40% 88.72%,36.56% 84.47%,36.56% 80.74%,37.76% 80.00%,37.24% 78.94%,38.61% 76.49%,44.22% 71.49%,43.88% 71.06%,42.18% 71.49%,42.86% 70.21%,48.47% 69.04%,51.53% 69.79%,49.83% 73.83%,44.22% 78.30%,39.80% 85.96%,36.73% 87.87%,36.39% 89.15%,32.14% 93.40%,32.31% 94.04%,40.48% 93.83%,44.73% 88.51%,50.34% 85.00%,56.29% 80.00%,60.71% 72.23%,70.24% 66.06%,78.74% 57.87%,82.14% 52.77%,83.84% 52.45%,83.50% 44.26%,85.20% 36.17%,86.90% 34.57%,88.61% 34.36%,88.78% 30.64%,87.07% 27.23%,90.31% 24.26%,88.44% 22.87%,87.07% 18.94%,84.01% 17.23%,79.08% 16.28%,72.28% 16.17%,71.26% 13.62%,73.13% 11.17%,73.64% 7.23%,72.45% 9.57%,70.92% 6.17%);
}

/* The center figure is the one true silhouette in the Detroit hero. */
.lions-story-page .lions-stafford > img,
.lions-story-page .lions-stafford-photo img {
  clip-path: var(--stafford-cutout-v2) !important;
  -webkit-clip-path: var(--stafford-cutout-v2) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.55)) saturate(.96) contrast(1.04) brightness(1.01) !important;
}

/* Calvin and Sewell work better as authentic editorial photography than fake-clean polygons.
   Fade the real surroundings into the page so there is no hard photo-card edge. */
.lions-story-page .lions-calvin,
.lions-story-page .lions-sewell {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.lions-story-page .lions-calvin > img {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  object-fit: cover !important;
  object-position: 50% 52% !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 16%, rgba(0,0,0,.42) 31%, rgba(0,0,0,.88) 45%, #000 58%, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 16%, rgba(0,0,0,.42) 31%, rgba(0,0,0,.88) 45%, #000 58%, #000 100%) !important;
  filter: saturate(.72) contrast(1.08) brightness(.76) !important;
  opacity:.80 !important;
}
.lions-story-page .lions-sewell > img {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.40) 29%, rgba(0,0,0,.88) 44%, #000 57%, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.40) 29%, rgba(0,0,0,.88) 44%, #000 57%, #000 100%) !important;
  filter: saturate(.76) contrast(1.08) brightness(.80) !important;
  opacity:.82 !important;
}

/* Hero-only composition polish: make the side photos atmospheric layers rather than panels. */
.lions-story-page .lions-hero-collage .lions-calvin {
  left:-1% !important;
  bottom:-5% !important;
  width:37% !important;
  z-index:2 !important;
}
.lions-story-page .lions-hero-collage .lions-sewell {
  right:-1% !important;
  bottom:-5% !important;
  width:38% !important;
  z-index:2 !important;
}
.lions-story-page .lions-hero-collage .lions-stafford {
  left:28% !important;
  bottom:-1% !important;
  width:45% !important;
  z-index:5 !important;
}
.lions-story-page .lions-hero-collage .lions-calvin > img,
.lions-story-page .lions-hero-collage .lions-sewell > img {
  inset:-5% !important;
  width:110% !important;
  height:110% !important;
}
/* These selectors deliberately match/exceed the base hero rule specificity so the
   authentic editorial masks actually win the cascade. */
.lions-story-page .lions-hero-collage .lions-calvin > img {
  clip-path:none !important;
  -webkit-clip-path:none !important;
  object-fit:cover !important;
  object-position:50% 52% !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 16%,rgba(0,0,0,.42) 31%,rgba(0,0,0,.88) 45%,#000 58%,#000 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 16%,rgba(0,0,0,.42) 31%,rgba(0,0,0,.88) 45%,#000 58%,#000 100%) !important;
  filter:saturate(.72) contrast(1.08) brightness(.76) !important;
  opacity:.80 !important;
}
.lions-story-page .lions-hero-collage .lions-sewell > img {
  clip-path:none !important;
  -webkit-clip-path:none !important;
  object-fit:cover !important;
  object-position:50% 42% !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 14%,rgba(0,0,0,.40) 29%,rgba(0,0,0,.88) 44%,#000 57%,#000 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 14%,rgba(0,0,0,.40) 29%,rgba(0,0,0,.88) 44%,#000 57%,#000 100%) !important;
  filter:saturate(.76) contrast(1.08) brightness(.80) !important;
  opacity:.82 !important;
}
.lions-story-page .lions-hero-collage .lions-calvin figcaption,
.lions-story-page .lions-hero-collage .lions-sewell figcaption {
  opacity:.78;
}

/* Chapter 02: use the complete Calvin photograph as a soft-edged historical anchor. */
.lions-story-page .lions-calvin-photo {
  overflow: visible !important;
  background: radial-gradient(circle at 52% 50%, rgba(41,169,232,.13), transparent 58%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.lions-story-page .lions-calvin-photo::after { display:none !important; }
.lions-story-page .lions-calvin-photo img {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  -webkit-mask-image: radial-gradient(ellipse 48% 70% at 51% 52%, #000 0 50%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.38) 74%, transparent 88%) !important;
  mask-image: radial-gradient(ellipse 48% 70% at 51% 52%, #000 0 50%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.38) 74%, transparent 88%) !important;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.35)) saturate(.84) contrast(1.06) brightness(.88) !important;
}

/* Chapter 07: Sewell's teammates belong to the real moment, so fade the whole real scene
   instead of clipping chunks of other Lions into a supposed silhouette. */
.lions-story-page .holmes-visuals {
  overflow: visible !important;
  background: radial-gradient(circle at 50% 45%, rgba(41,169,232,.2), transparent 58%) !important;
}
.lions-story-page .holmes-visuals::after { display:none !important; }
.lions-story-page .holmes-visuals img {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  object-fit: cover !important;
  object-position: 50% 43% !important;
  -webkit-mask-image: radial-gradient(ellipse 56% 72% at 50% 48%, #000 0 52%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.36) 76%, transparent 90%) !important;
  mask-image: radial-gradient(ellipse 56% 72% at 50% 48%, #000 0 52%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.36) 76%, transparent 90%) !important;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.35)) saturate(.86) contrast(1.07) brightness(.9) !important;
}

/* The Goff trade image is intentionally left as an authentic full-bleed crop. */

@media (max-width:900px) {
  .lions-story-page .lions-hero-collage .lions-calvin { left:-7% !important; width:42% !important; }
  .lions-story-page .lions-hero-collage .lions-stafford { left:27% !important; width:47% !important; }
  .lions-story-page .lions-hero-collage .lions-sewell { right:-6% !important; width:42% !important; }
}

@media (max-width:720px) {
  .lions-story-page .lions-calvin > img,
  .lions-story-page .lions-sewell > img { opacity:.72 !important; }
  .lions-story-page .lions-calvin-photo img,
  .lions-story-page .holmes-visuals img { object-position:50% 44% !important; }
}