/* Single post — extras beyond interior.css.
   The masthead runs deeper and the featured image overlaps it (hero-media),
   so the byline never sits on top of the photo. */

.hero-media{background:var(--canvas);padding:0}
.hero-media .shell{margin-top:-64px;position:relative;z-index:2}
.hero-media img{width:100%;display:block;border-radius:10px;border:1px solid var(--rule);
  box-shadow:0 24px 60px rgba(8,12,36,.22)}
.hero-media figcaption{font-size:16px;color:var(--annotation);margin-top:14px;
  padding-left:16px;border-left:3px solid var(--action)}
/* Deeper masthead ONLY when a featured image overlaps it (scoped to the
   modifier the template adds), so posts without a thumbnail keep normal spacing. */
.masthead--hero{padding-bottom:152px}
@media(max-width:700px){
  .hero-media .shell{margin-top:-32px}
  .masthead--hero{padding-bottom:104px}
}