/* Blog post header on phones: the cover sits behind the title (A3 + soft shade), instead of as a separate image.
   The cover is a real <img> (added by _src/publish.py), so Google still sees it. Desktop and tablets keep the cover image under the title. */
.a-hero-cover,.a-hero-shade{display:none}
@media (max-width:809px){
  .a-hero .bg{display:none}
  .a-hero{background:linear-gradient(180deg,#5b5b9a 0%,#3d4775 100%)}
  .a-hero-cover{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:.35;filter:blur(2px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 100%)}
  .a-hero-shade{display:block;position:absolute;inset:0;background:radial-gradient(120% 55% at 20% 52%,rgba(36,43,76,.55) 0%,rgba(36,43,76,0) 70%)}
  .a-hero .inner{z-index:2}
  .a-hero h1{font-size:29px;line-height:1.16;text-shadow:0 2px 18px rgba(25,30,60,.45)}
  .a-hero .meta{flex-wrap:nowrap}
  .a-hero .meta>span{background:rgba(30,36,66,.35)}
  .a-hero .meta>span:first-child{display:none}
  .a-banner{display:none}
}