/* Post header art: six styles on black, each with an orange spotlight. Used by the blog cards, the article header and the social image.
   Set on the element: data-hs="1..6" and style="--gx:..%;--gy:..%;--ga:..deg" (blog-migration/header_art.py works these out from the slug).
   The title always sits top left, so every style keeps its light away from it. */
[data-hs]{position:relative;isolation:isolate;--gx:78%;--gy:34%;--ga:135deg;--o:236,104,44}
[data-hs]::before,[data-hs]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;transform:none;width:auto;height:auto;right:0;top:0;background:none;-webkit-mask-image:none;mask-image:none}

/* 1 Glow: a dot field lit by a soft spotlight */
[data-hs="1"]::before{background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:14px 14px;-webkit-mask-image:radial-gradient(60% 85% at var(--gx) var(--gy),#000,transparent 75%);mask-image:radial-gradient(60% 85% at var(--gx) var(--gy),#000,transparent 75%)}
[data-hs="1"]::after{background:radial-gradient(38% 62% at var(--gx) var(--gy),rgba(var(--o),.36),transparent 72%)}

/* 2 Rings: two thin orange circles around the light */
[data-hs="2"]::before{background:radial-gradient(circle at var(--gx) var(--gy),transparent 0 15%,rgba(var(--o),.42) 15.2% 15.6%,transparent 15.9%,transparent 24%,rgba(var(--o),.16) 24.2% 24.5%,transparent 24.8%)}
[data-hs="2"]::after{background:radial-gradient(26% 44% at var(--gx) var(--gy),rgba(var(--o),.3),transparent 70%)}

/* 3 Beam: a band of light crossing the card at its own angle */
[data-hs="3"]::before{background-image:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:16px 16px}
[data-hs="3"]::after{background:linear-gradient(var(--ga),transparent 38%,rgba(var(--o),.08) 46%,rgba(var(--o),.34) 58%,rgba(var(--o),.08) 70%,transparent 78%);-webkit-mask-image:radial-gradient(90% 120% at var(--gx) var(--gy),#000,transparent 80%);mask-image:radial-gradient(90% 120% at var(--gx) var(--gy),#000,transparent 80%)}

/* 4 Horizon: light rising from the bottom edge over fine lines */
[data-hs="4"]::before{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px);-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
[data-hs="4"]::after{background:radial-gradient(70% 58% at var(--gx) 100%,rgba(var(--o),.5),rgba(var(--o),.12) 45%,transparent 72%)}

/* 5 Grid: a square grid lit around the spotlight */
[data-hs="5"]::before{background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(55% 80% at var(--gx) var(--gy),#000,transparent 78%);mask-image:radial-gradient(55% 80% at var(--gx) var(--gy),#000,transparent 78%)}
[data-hs="5"]::after{background:radial-gradient(22% 38% at var(--gx) var(--gy),rgba(var(--o),.42),transparent 75%)}

/* 6 Bloom: a wide warm bloom over soft diagonal stripes */
[data-hs="6"]::before{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);-webkit-mask-image:radial-gradient(70% 90% at var(--gx) var(--gy),#000,transparent 80%);mask-image:radial-gradient(70% 90% at var(--gx) var(--gy),#000,transparent 80%)}
[data-hs="6"]::after{background:radial-gradient(55% 75% at var(--gx) var(--gy),rgba(var(--o),.4),rgba(var(--o),.1) 55%,transparent 78%)}

/* hover: the light brightens, it never moves */
a:hover [data-hs]::after,a:focus-visible [data-hs]::after{filter:brightness(1.3)}