/* 11 Nov blog heroes in colour (John 05:18) and the writing top six (John 05:22). build.py block "11 Nov morning riff, part 2". */
header.wtop.bh .wbg img{opacity:var(--bho,.75);filter:none}
header.wtop.bh .wbg::after{background:
 radial-gradient(ellipse 85% 95% at 62% 38%,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%),
 linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.14) 30%,rgba(0,0,0,.38) 55%,rgba(0,0,0,.8) 78%,rgba(0,0,0,.94) 100%),
 linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 72%)}
header.wtop.bh h1.bht{text-shadow:0 2px 24px rgba(0,0,0,.45)}
header.wtop.bh.bh0{background:#000}
@media (max-width:699px){header.wtop.bh .wbg::after{background:
 radial-gradient(ellipse 100% 90% at 55% 30%,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%),
 linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.18) 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.95) 100%)}}
.wcard .ci.bhc img{opacity:var(--bho,.75)}
.wcard:hover .ci.bhc img{opacity:calc(var(--bho,.75) + .1)}
.wcard .ci.bhc::after{background:radial-gradient(ellipse at 55% 35%,rgba(0,0,0,0) 45%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.12) 34%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.92) 100%)}
.wcard .ci.bhc .bhh{text-shadow:0 1px 14px rgba(0,0,0,.5)}
/* the top six: big, full colour, headline over the picture */
.top6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0 0}
.t6{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#000;color:#fff;text-decoration:none;isolation:isolate}
.t6i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transition:transform .7s ease}
.t6:hover .t6i img,.t6:focus-visible .t6i img{transform:scale(1.04)}
.t6::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 100%),linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.88) 100%)}
.t6t{position:absolute;left:clamp(16px,1.6vw,24px);right:clamp(16px,1.6vw,24px);bottom:clamp(14px,1.5vw,22px);z-index:2}
.t6t b{display:block;font:800 clamp(21px,2vw,30px)/1.04 Archivo,Arial,sans-serif;font-stretch:82%;letter-spacing:-.01em;color:#fff;text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.t6t b::before{content:"";display:block;width:40px;height:3px;margin-bottom:12px;background:#FFC629;border-radius:2px}
.t6t small{display:block;margin-top:10px;font:600 12px/1.3 Archivo,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.t6t small b{display:inline;font:inherit;color:#FFC629;text-shadow:none}
.t6t small b::before{display:none}
@media (max-width:980px){.top6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.top6{grid-template-columns:1fr;gap:12px}.t6{aspect-ratio:16/11}.t6t b{font-size:clamp(23px,6.6vw,28px)}}
@media (prefers-reduced-motion:reduce){.t6i img{transition:none}}