/* Interactive article hero: themed stage behind the headline (canvas drawn by nv-hero.js, colors from --nvb1..3) */
.nvbh{position:relative;overflow:hidden;isolation:isolate;color:#e8eefc}
.nvbh::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 36%,var(--nvb1,#5a3422) 0%,var(--nvb2,#38210f) 52%,var(--nvb3,#26150c) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 210px),rgba(0,0,0,.92) calc(100% - 170px),rgba(0,0,0,.72) calc(100% - 125px),rgba(0,0,0,.45) calc(100% - 80px),rgba(0,0,0,.2) calc(100% - 40px),rgba(0,0,0,.06) calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 210px),rgba(0,0,0,.92) calc(100% - 170px),rgba(0,0,0,.72) calc(100% - 125px),rgba(0,0,0,.45) calc(100% - 80px),rgba(0,0,0,.2) calc(100% - 40px),rgba(0,0,0,.06) calc(100% - 14px),transparent 100%)}
.nvbh>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y;cursor:crosshair;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 70px),transparent)}
.nvbh .nvbh-vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 50% 48%,color-mix(in srgb,var(--nvb3,#26150c) 88%,transparent),color-mix(in srgb,var(--nvb3,#26150c) 52%,transparent) 56%,transparent 82%)}
.nvbh>header{position:relative;z-index:2;pointer-events:none;overflow:visible!important;padding-top:clamp(84px,11vw,128px)!important;padding-bottom:clamp(150px,18vw,230px)!important}
.nvbh>header a{pointer-events:auto}
.nvbh>header .nv-aurora{display:none}
.nvbh>header h1{color:#fff!important;text-shadow:0 2px 30px var(--nvb3,#26150c)}
.nvbh>header p,.nvbh>header span,.nvbh>header a,.nvbh>header div{color:rgba(232,238,252,.84)!important}
.nvbh>header nav a:hover{color:#5fe3f2!important}
.nvbh>header span[style*="999px"]{background:rgba(95,227,242,.14)!important;color:#9eeaf5!important;border:1px solid rgba(95,227,242,.3)}
.nvbh>header a[rel="author"]{color:#fff!important}
.nvbh-hint{position:absolute;left:clamp(16px,4vw,32px);top:18px;z-index:3;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(38,21,12,.35);border:1px solid rgba(160,200,255,.2);opacity:.45;transition:opacity .2s;pointer-events:auto;cursor:default}
.nvbh-hint:hover{opacity:1}
.nvbh-hint i{width:7px;height:7px;border-radius:50%;background:#5fe3f2;box-shadow:0 0 10px #5fe3f2;animation:nvbhp 2.4s ease-in-out infinite}
.nvbh-hint::after{content:attr(data-tip);position:absolute;left:34px;top:50%;transform:translateY(-50%);white-space:nowrap;font:600 12px/1 system-ui,-apple-system,Segoe UI,sans-serif;color:#cfe3ff;background:rgba(38,21,12,.8);border:1px solid rgba(160,200,255,.24);border-radius:999px;padding:7px 12px;opacity:0;pointer-events:none;transition:opacity .2s}
.nvbh-hint:hover::after{opacity:1}
@keyframes nvbhp{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.nvbh-hint i{animation:none}}

/* listing-card mode: same scene, small, always gently animated, no text */
.nvcard{position:relative;overflow:hidden;isolation:isolate}
.nvcard::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,var(--nvb1,#5a3422) 0%,var(--nvb2,#38210f) 55%,var(--nvb3,#26150c) 100%)!important;-webkit-mask-image:none!important;mask-image:none!important}
.nvcard>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;-webkit-mask-image:none;mask-image:none}
.nvcard.nvbh-live>img{visibility:hidden}
.nvcard>img{position:relative;z-index:0}

/* readability: a soft stage-colored panel behind the text block keeps every word legible over any scene, plus a gentle shadow on the copy */
.nvbh>header::before{content:"";position:absolute;top:calc(clamp(84px,11vw,128px) - 24px);left:-4%;right:-4%;bottom:calc(clamp(150px,18vw,230px) + 14px);z-index:-1;pointer-events:none;border-radius:44px;background:color-mix(in srgb,var(--nvb3,#26150c) 80%,transparent);-webkit-filter:blur(30px);filter:blur(30px)}
.nvbh>header p,.nvbh>header span,.nvbh>header a,.nvbh>header div,.nvbh>header nav{text-shadow:0 1px 14px color-mix(in srgb,var(--nvb3,#26150c) 90%,transparent)}
.nvbh>header h1{text-shadow:0 2px 26px var(--nvb3,#26150c),0 0 2px var(--nvb3,#26150c)}

/* pages whose original look was approved without the readability panel (data-panel="off") */
.nvbh[data-panel="off"]>header::before{display:none}
.nvbh[data-panel="off"]>header p,.nvbh[data-panel="off"]>header span,.nvbh[data-panel="off"]>header a,.nvbh[data-panel="off"]>header div,.nvbh[data-panel="off"]>header nav{text-shadow:none}
.nvbh[data-panel="off"]>header h1{text-shadow:0 2px 30px var(--nvb3,#26150c)}

/* side-panel scenes keep their art in the gutters: narrower center vignette so lane items are not dimmed */
.nvbh.nvbh-side .nvbh-vig{background:radial-gradient(ellipse 30% 42% at 50% 46%,color-mix(in srgb,var(--nvb3,#26150c) 80%,transparent),color-mix(in srgb,var(--nvb3,#26150c) 45%,transparent) 56%,transparent 82%)}

/* scenes whose art sits mid-height and would cross the copy on phones: soften the canvas there (opt-in class nvbh-dim) */
@media(max-width:640px){.nvbh.nvbh-dim>canvas{opacity:.5}}