/* 10 Nov blog heroes and covers: one treatment for every post hero and its card on /writing/.
   Black ground, the post's image faint and toned behind (file already toned teal-grey in v4/bh/), white stacked headline, gold rule. */
header.wtop.bh{position:relative;overflow:hidden;background:#000;isolation:isolate;padding:clamp(128px,13vw,176px) 0 clamp(30px,3.4vw,46px);min-height:clamp(440px,46vw,640px);display:flex;flex-direction:column;justify-content:flex-end}
header.wtop.bh>.wrap{width:100%}
header.wtop.bh .wbg{position:absolute;inset:0;z-index:-1;margin:0;pointer-events:none;background:#000}
header.wtop.bh .wbg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;opacity:.45;filter:none;transform:none}
header.wtop.bh .wbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 38%,rgba(0,0,0,.58) 68%,rgba(0,0,0,.92) 100%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 70%)}
header.wtop.bh h1.bht{color:#fff;max-width:17ch;font-size:clamp(34px,5.2vw,74px);line-height:1.02;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:manual}
header.wtop.bh h1.bht::after{content:"";display:block;width:64px;height:4px;margin-top:clamp(16px,1.6vw,24px);background:#FFC629;border-radius:2px}
header.wtop.bh .lbl a{color:#FFC629}
header.wtop.bh .wmeta{color:rgba(255,255,255,.86)}
header.wtop.bh .wsrc{color:rgba(255,255,255,.7)}
header.wtop.bh .wsrc a{color:#fff}
header.wtop.bh .wthemes a{border-color:rgba(127,200,192,.7);color:#d6efec}
@media (max-width:699px){header.wtop.bh{min-height:470px;padding-top:118px}header.wtop.bh h1.bht{font-size:clamp(30px,8.6vw,40px);max-width:none}}
/* cards on /writing/: the same image and the same treatment, headline on the cover */
.wcard .ci.bhc{position:relative;background:#000;isolation:isolate}
.wcard .ci.bhc img{position:absolute;inset:0;opacity:.5;object-position:50% 40%}
.wcard:hover .ci.bhc img{opacity:.6}
.wcard .ci.bhc::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.86) 100%),linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 75%)}
.wcard .ci.bhc .bhh{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff;font:800 22px/1.06 Archivo,Arial,sans-serif;font-stretch:82%;letter-spacing:-.01em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.wcard .ci.bhc .bhh::before{content:"";display:block;width:34px;height:3px;margin-bottom:10px;background:#FFC629;border-radius:2px}
@media (min-width:1020px){.wcard .ci.bhc .bhh{font-size:23px}}
.wcard[data-bh] h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wcard[data-bh] p{margin-top:2px}
header.wtop.bh h1.bht.lg{font-size:clamp(28px,3.6vw,52px);max-width:22ch;line-height:1.06}
@media (max-width:699px){header.wtop.bh h1.bht.lg{font-size:clamp(26px,7vw,32px)}}