/* Ten Million Flies — photographic single-post masthead experiment */
.tmf-single-hero-photo{
  position:relative;
  overflow:hidden;
  min-height:430px;
  padding:0;
  border-bottom:5px solid var(--ink);
  background-color:#25221d;
  background-image:
    linear-gradient(90deg,rgba(10,10,9,.88) 0%,rgba(10,10,9,.76) 38%,rgba(10,10,9,.40) 62%,rgba(10,10,9,.16) 100%),
    var(--tmf-single-bg);
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
}
.tmf-single-hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  right:auto;
  top:auto;
  background:
    linear-gradient(180deg,rgba(0,0,0,.10),transparent 24%,transparent 76%,rgba(0,0,0,.22)),
    radial-gradient(circle at 20% 22%,rgba(255,255,255,.08) 0 1px,transparent 1.5px);
  background-size:auto,24px 24px;
  filter:none;
  opacity:1;
  transform:none;
  pointer-events:none;
}
.tmf-single-hero-photo:not(.has-featured-image){
  background-image:
    linear-gradient(90deg,rgba(10,10,9,.94),rgba(10,10,9,.80)),
    radial-gradient(circle at 25% 30%,rgba(243,223,55,.16),transparent 40%);
}
.tmf-single-hero-photo .tmf-single-grid{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  min-height:430px;
  padding:54px 32px 48px;
  background:transparent;
}
.tmf-single-hero-photo .tmf-single-grid::before,
.tmf-single-hero-photo .tmf-single-grid::after{content:none}
.tmf-single-hero-photo .tmf-single-copy{
  width:min(760px,72%);
  padding:0;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.30);
}
.tmf-single-hero-photo .tmf-single-copy .tmf-kicker{
  background:var(--yellow);
  color:#111;
  padding:7px 10px 6px;
  box-shadow:5px 5px 0 rgba(255,83,61,.92);
  text-shadow:none;
}
.tmf-single-hero-photo .tmf-single-copy .tmf-kicker a{color:#111}
.tmf-single-hero-photo .tmf-single-copy h1{
  margin:22px 0 18px;
  max-width:12.5ch;
  color:#fff;
  font-size:clamp(48px,5.6vw,78px);
  line-height:.88;
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 4px 24px rgba(0,0,0,.52);
}
.tmf-single-hero-photo .tmf-single-copy .tmf-meta{
  color:#fff;
  font-size:12px;
  letter-spacing:.06em;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.tmf-single-hero-photo .tmf-single-copy .tmf-meta a{
  color:#fff;
  border-bottom:3px solid var(--red);
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.tmf-single-hero-photo .tmf-view-count{
  color:#fff;
  opacity:.76;
}
.tmf-single-hero-photo + .tmf-article-shell{
  grid-template-columns:minmax(0,740px) 255px;
  justify-content:space-between;
  gap:0;
  padding:30px 32px 38px;
}

.tmf-single-hero-photo + .tmf-article-shell .tmf-article-body iframe[src*="soundcloud.com"]{
  display:block;
  width:min(500px,calc(100% - 18px))!important;
  max-width:100%!important;
}

@media(max-width:960px){
  .tmf-single-hero-photo + .tmf-article-shell{
    grid-template-columns:minmax(0,1fr) 230px;
    justify-content:stretch;
    gap:28px;
    padding-left:26px;
    padding-right:26px;
  }
  .tmf-single-hero-photo{
    min-height:390px;
    background-position:60% center;
    background-image:
      linear-gradient(90deg,rgba(10,10,9,.88) 0%,rgba(10,10,9,.74) 46%,rgba(10,10,9,.35) 76%,rgba(10,10,9,.20) 100%),
      var(--tmf-single-bg);
  }
  .tmf-single-hero-photo .tmf-single-grid{
    min-height:390px;
    padding:44px 26px 40px;
  }
  .tmf-single-hero-photo .tmf-single-copy{width:min(690px,82%)}
  .tmf-single-hero-photo .tmf-single-copy h1{font-size:clamp(44px,7vw,64px);max-width:12ch}
}
@media(max-width:720px){
  .tmf-single-hero-photo + .tmf-article-shell{
    grid-template-columns:1fr;
    gap:30px;
    padding:22px 20px 38px;
  }
  .tmf-single-hero-photo{
    min-height:355px;
    background-position:66% center;
    background-image:
      linear-gradient(90deg,rgba(10,10,9,.86),rgba(10,10,9,.62)),
      var(--tmf-single-bg);
  }
  .tmf-single-hero-photo .tmf-single-grid{
    min-height:355px;
    padding:34px 20px 30px;
    align-items:flex-end;
  }
  .tmf-single-hero-photo .tmf-single-copy{width:100%}
  .tmf-single-hero-photo .tmf-single-copy h1{
    font-size:clamp(38px,11vw,54px);
    max-width:none;
    margin:18px 0 15px;
  }
}
@media(max-width:480px){
  .tmf-single-hero-photo + .tmf-article-shell{padding-left:18px;padding-right:18px}
  .tmf-single-hero-photo{
    min-height:330px;
    background-position:68% center;
  }
  .tmf-single-hero-photo .tmf-single-grid{min-height:330px;padding:30px 18px 26px}
  .tmf-single-hero-photo .tmf-single-copy .tmf-meta{font-size:10.5px}
}