/* hypergamy as a horror sequence. Black, a little blood red, slow dread. Nothing flashes: every flicker is a smooth dip, well under 3 a second. */
.hz { --vig: .62; --blood: #e0252f; background: #000 !important; }
.hz .hz-bg { left: 0; top: 0; width: 1920px; height: 1080px; background-size: cover; background-position: 50% 50%; filter: grayscale(.7) contrast(1.35) brightness(.38); opacity: .8; z-index: 0 !important; }
.hz .hz-red { left: 0; top: 0; width: 1920px; height: 1080px; background: radial-gradient(70% 60% at 50% 55%, rgba(179, 18, 27, .55), rgba(60, 0, 4, .25) 55%, transparent 80%); opacity: 0; mix-blend-mode: screen; z-index: 1 !important; pointer-events: none; }
.hz .hz-vig { left: 0; top: 0; width: 1920px; height: 1080px; background: radial-gradient(ellipse at 50% 50%, transparent calc(var(--vig) * 55%), rgba(0, 0, 0, .86) calc(var(--vig) * 100%)); z-index: 2 !important; pointer-events: none; }
.hz .hz-grain { left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: pixelated; opacity: .06; mix-blend-mode: screen; z-index: 7 !important; pointer-events: none; }
.hz .hz-stage { left: 0; top: 0; width: 1920px; height: 1080px; z-index: 4 !important; }
.hz .hz-stage > * { position: absolute; margin: 0; color: #f4f4f4; }
.hz .hz-svg { left: 0; top: 0; width: 1920px; height: 1080px; z-index: 3 !important; }
.hz svg .fig { fill: #e9e9e9; }
.hz svg .ln-m { stroke: #e0252f; stroke-width: 1.8; fill: none; opacity: .55; }
.hz svg .ln-w { stroke: #f4f4f4; stroke-width: 2.2; fill: none; opacity: .5; }

/* hz-00 */
.hz .hz-k { left: 110px; top: 250px; width: 1100px; font: italic 400 64px/1.2 var(--f-serif); color: #d8d8d8; }
.hz .hz-big { left: 80px; top: 420px; font: 400 400px/.84 var(--f-display); text-transform: uppercase; letter-spacing: .005em; color: #f2f2f2; white-space: nowrap; text-shadow: 0 0 60px rgba(179, 18, 27, .5); }
.hz .hz-big::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -22px; height: 14px; background: var(--blood); transform: scaleX(var(--ul, 0)); transform-origin: 0 50%; }

/* hz-01 */
.hz .hz-w { top: 170px; display: flex; align-items: baseline; gap: 26px; }
.hz .hz-w b { font: 400 230px/.84 var(--f-display); text-transform: uppercase; font-weight: 400; }
.hz .hz-w i { font: italic 400 46px/1 var(--f-serif); color: #bdbdbd; }
.hz .hz-w.a { left: 110px; } .hz .hz-w.b { left: 980px; }
.hz .hz-up { left: 110px; top: 470px; font: 400 230px/.9 var(--f-display); text-transform: uppercase; color: var(--blood); text-shadow: 0 0 50px rgba(179, 18, 27, .6); }
.hz .hz-p { left: 116px; top: 760px; width: 1060px; font: 400 40px/1.25 var(--f-body); color: #e6e6e6; }
.hz .hz-p2 { left: 116px; top: 930px; width: 1300px; font: italic 400 46px/1.2 var(--f-serif); color: #fff; }

/* hz-02 */
.hz .hz-lead { left: 100px; top: 70px; width: 1500px; font: 400 46px/1.2 var(--f-body); color: #f0f0f0; }
.hz .hz-lead b { font-weight: 700; color: #fff; }
.hz .hz-cap { left: 100px; width: 1720px; text-align: center; font: 400 54px/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .01em; }
.hz .hz-cap.c1 { top: 935px; font-size: 40px; color: #d0d0d0; }
.hz .hz-cap.c2 { top: 982px; font-size: 54px; color: #fff; text-shadow: 0 0 30px rgba(179, 18, 27, .7); }

/* hz-03 */
.hz .hz-80 { left: 80px; top: 70px; display: flex; align-items: baseline; font: 400 800px/.8 var(--f-display); color: var(--blood); text-shadow: 0 0 80px rgba(179, 18, 27, .6); white-space: nowrap; }
.hz .hz-80 i { font-style: normal; font-size: 380px; margin-left: 24px; color: #f2f2f2; text-shadow: none; }
.hz .hz-cap3 { left: 110px; top: 800px; width: 1500px; font: 400 58px/1.18 var(--f-body); color: #fff; }
.hz .hz-cap4 { left: 110px; top: 960px; width: 1500px; font: italic 400 42px/1.2 var(--f-serif); color: #c9c9c9; }

/* hz-04: dead quiet */
.hz.hz-dead { background: #000 !important; }
.hz .hz-now { left: 0; top: 440px; width: 1920px; text-align: center; font: 400 120px/1 var(--f-serif); color: #f2f2f2; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) { .hz .hz-grain { display: none; } }