/* Sam Journal 1.0.5 — a visible full-card image with softly fading glass. */
.smj-root .smj-article.smj-article--lead {
  --smj-lead-clear:205px;
  isolation:isolate;
  background:#1d1d1f;
  border-color:rgba(29,29,31,.22);
}
.smj-root .smj-article.smj-article--lead .smj-article-image {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; flex:none; aspect-ratio:auto;
  background:#1d1d1f;
}
.smj-root .smj-article.smj-article--lead .smj-article-image img {
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.smj-root .smj-article.smj-article--lead .smj-article-copy {
  /* A flex item's z-index provides the paint order without making this the
     containing block of the existing full-card link. Keep it unpositioned. */
  position:static; z-index:1; margin-top:var(--smj-lead-clear);
  background:transparent;
}
.smj-root .smj-article.smj-article--lead .smj-article-copy::before {
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  /* One continuous fade, with no panel edge or opaque black at the bottom.
     The tint works independently of blur support. */
  background:linear-gradient(180deg,
    rgba(8,11,16,0) 0px,
    rgba(8,11,16,0) calc(var(--smj-lead-clear) - 100px),
    rgba(8,11,16,.12) var(--smj-lead-clear),
    rgba(8,11,16,.30) calc(var(--smj-lead-clear) + 85px),
    rgba(8,11,16,.42) 100%);
}
.smj-root .smj-article.smj-article--lead .smj-article-title {
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.72),0 3px 18px rgba(0,0,0,.35);
}
.smj-root .smj-article.smj-article--lead :is(.smj-article-intro,.smj-kicker,.smj-article-bottom) {
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8);
}
/* Fade the blur itself as well as the tint, so there is no horizontal seam.
   Keep it on a separate pseudo-element: filtering the copy would change the
   containing block of the full-card link. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and ((mask-image:linear-gradient(transparent,#000)) or (-webkit-mask-image:linear-gradient(transparent,#000))) {
  .smj-root .smj-article.smj-article--lead .smj-article-copy::after {
    content:""; position:absolute; inset:0; z-index:-2;
    pointer-events:none;
    -webkit-backdrop-filter:blur(6px) saturate(110%);
    backdrop-filter:blur(6px) saturate(110%);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0px,
      transparent calc(var(--smj-lead-clear) - 110px),
      rgba(0,0,0,.1) calc(var(--smj-lead-clear) - 60px),
      rgba(0,0,0,.45) calc(var(--smj-lead-clear) + 15px),
      #000 calc(var(--smj-lead-clear) + 110px));
    mask-image:linear-gradient(180deg,
      transparent 0px,
      transparent calc(var(--smj-lead-clear) - 110px),
      rgba(0,0,0,.1) calc(var(--smj-lead-clear) - 60px),
      rgba(0,0,0,.45) calc(var(--smj-lead-clear) + 15px),
      #000 calc(var(--smj-lead-clear) + 110px));
  }
}
@media (max-width:900px) {
  .smj-root .smj-article.smj-article--lead { --smj-lead-clear:180px; }
}
@media (max-width:600px) {
  .smj-root .smj-article.smj-article--lead { --smj-lead-clear:165px; }
}
@media (prefers-reduced-transparency:reduce) {
  .smj-root .smj-article.smj-article--lead .smj-article-copy::after {
    content:none;
  }
  .smj-root .smj-article.smj-article--lead .smj-article-copy::before {
    /* Only this explicit accessibility preference uses an opaque text area. */
    background:linear-gradient(180deg,transparent 0px,
      transparent calc(var(--smj-lead-clear) - 100px),
      #1d1d1f var(--smj-lead-clear));
  }
}