/* MNight.com — the Reel design. Shared pieces: sky, header, countdown bar, horizons, type,
   buttons, tags, ticket stubs, quote splash, video and news rows, footer. Page files add the rest
   (css/home.css, css/film.css, css/pages.css).
   Film colors arrive as --c (color), --g (glow) and --w (faint wash) on the element. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #08090b; color: #e9ebee; font-family: 'Jost', 'Futura', 'Avenir Next', Arial, sans-serif; font-size: 16px; line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #cfe0ff; outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #e9ebee; color: #0d0f13; padding: 8px 14px; }
.skip:focus { left: 8px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.dim { color: #9aa0a8; }
.sel { user-select: all; }
.cap { font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #9aa0a8; }

/* gradient headings, with a slow light sheen */
h1, h2, .gt, .q { background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%), linear-gradient(180deg, #f6f9fd 20%, #9dbbe0 100%); background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 11s ease-in-out infinite; text-shadow: none !important; }
@keyframes sheen { 0%, 78% { background-position: 150% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.h1 { margin: 0; font-weight: 300; font-size: clamp(34px, 5vw, 64px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.02; text-wrap: balance; }
.h2 { margin: 0; font-weight: 300; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.05; text-wrap: balance; }
.h3 { margin: 0; font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.sec { padding-top: 90px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 24px; margin-bottom: 26px; }
.sec-head > div { display: flex; flex-direction: column; gap: 10px; }
.more { position: relative; color: #cfe0ff; transition: letter-spacing .35s ease, text-shadow .35s; }
.more:hover { letter-spacing: .42em; text-shadow: 0 0 12px rgba(170,205,250,.7); }
.prose { font-size: 17px; line-height: 1.75; color: #c9ced6; max-width: 68ch; }
.prose p { margin: 0 0 1em; }

/* sky: stars twinkle, a rare shooting star */
.sky { position: relative; overflow: hidden; background: radial-gradient(90% 150% at 50% -20%, #1d3252 0%, #0f1a2c 42%, #08090b 82%); }
.stars, .stars2 { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 80%); }
.stars { opacity: .5; background-image: radial-gradient(1.2px 1.2px at 17px 23px, rgba(255,255,255,.85) 50%, transparent 55%), radial-gradient(1px 1px at 83px 61px, rgba(220,232,255,.6) 50%, transparent 55%), radial-gradient(1px 1px at 141px 12px, rgba(255,255,255,.5) 50%, transparent 55%), radial-gradient(1.4px 1.4px at 59px 109px, rgba(235,242,255,.7) 50%, transparent 55%); background-size: 173px 131px, 211px 157px, 263px 199px, 331px 227px; }
.stars2 { background-image: radial-gradient(1.6px 1.6px at 40px 30px, #fff 50%, transparent 60%), radial-gradient(1.3px 1.3px at 120px 80px, #dbe8ff 50%, transparent 60%); background-size: 389px 167px, 457px 211px; animation: twinkle 4.5s ease-in-out infinite alternate; }
@keyframes twinkle { 0% { opacity: .15; } 60% { opacity: .9; } 100% { opacity: .35; } }
.shoot { position: absolute; top: 22px; left: 12%; width: 130px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); opacity: 0; transform: rotate(14deg); animation: shoot 13s linear infinite 4s; pointer-events: none; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0,0) rotate(14deg); } 1.5% { opacity: 1; } 7% { opacity: 0; transform: translate(640px,160px) rotate(14deg); } 100% { opacity: 0; transform: translate(640px,160px) rotate(14deg); } }

/* header + logo "moonrise" on hover */
.hd { position: relative; z-index: 5; max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; padding: 22px 24px 12px; }
.lock { position: relative; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.lockt { display: flex; flex-direction: column; gap: 7px; }
.orbw { position: relative; flex: 0 0 auto; width: 54px; height: 54px; }
.orb { width: 54px; height: 54px; display: block; filter: drop-shadow(0 0 10px rgba(150,190,245,.5)) drop-shadow(0 0 30px rgba(80,130,215,.3)); transition: filter .6s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
.lock:hover .orb { filter: drop-shadow(0 0 14px rgba(170,205,250,.85)) drop-shadow(0 0 46px rgba(100,150,235,.55)); transform: rotate(-8deg) scale(1.06); }
.glint { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; pointer-events: none; }
.glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-18deg); }
.lock:hover .glint::before { animation: glint .9s ease-out .1s; }
@keyframes glint { from { left: -60%; } to { left: 130%; } }
.spk { position: absolute; width: 9px; height: 9px; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, rgba(207,224,255,.7) 32%, transparent 70%); }
.spk::before, .spk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 14px; margin: -7px 0 0 0; background: linear-gradient(transparent, #fff, transparent); }
.spk::after { transform: rotate(90deg); }
.lock:hover .spk { animation: spark 1s ease-out forwards; animation-delay: var(--d); }
@keyframes spark { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.15) rotate(20deg); } 100% { opacity: 0; transform: scale(.5) rotate(40deg); } }
.m { display: flex; align-items: baseline; font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: .34em; text-transform: uppercase; color: #eef2f7; }
.m .l { display: inline-block; }
.lock:hover .m .l { animation: lit 1.5s ease forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes lit { 0% { text-shadow: none; } 45% { color: #fff; text-shadow: 0 0 16px rgba(170,205,250,.95), 0 0 2px #fff; } 100% { color: #fff; text-shadow: 0 0 9px rgba(170,205,250,.55); } }
.m .dt { display: inline-block; width: 12px; height: 12px; margin: 0 .32em 0 .05em; transform: translateY(calc(6px - .35em)); border-radius: 50%; background: #1e2d45; box-shadow: inset -4px 0 0 0 #e9f0f9, 0 0 8px rgba(170,205,250,.5); transition: box-shadow 1.4s ease .25s; }
.lock:hover .m .dt { box-shadow: inset -12px 0 0 0 #f4f8fd, 0 0 14px rgba(190,215,250,.95), 0 0 30px rgba(130,175,240,.5); }
.sub { font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: .62em; text-transform: uppercase; color: #8fa6c4; transition: letter-spacing .6s ease, color .6s; }
.lock:hover .sub { letter-spacing: .7em; color: #b9cde6; }
.nav { display: flex; gap: 28px; font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #c3c8cf; }
.nav a { position: relative; padding: 6px 0; transition: color .25s, text-shadow .25s; }
.nav a::after { content: ""; position: absolute; left: 50%; right: calc(50% + .14em); bottom: -2px; height: 1px; background: #cfe0ff; box-shadow: 0 0 8px #9dbbe0; transition: left .35s ease, right .35s ease; }
.nav a:hover, .nav a.on { color: #fff; text-shadow: 0 0 12px rgba(170,205,250,.7); }
.nav a:hover::after, .nav a.on::after { left: 0; right: .28em; }
.burger { display: none; position: relative; width: 40px; height: 40px; margin-right: -8px; border: 0; background: transparent; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 10px; width: 20px; height: 2px; background: #c3c8cf; transition: transform .3s, opacity .3s; }
.burger span { top: 19px; }
.burger span::before, .burger span::after { content: ""; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* countdown bar: the moon breathes; hover sweeps light along the bar */
.bar { position: relative; overflow: hidden; max-width: 1192px; margin: 6px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 11px 16px; border-top: 1px solid rgba(127,168,216,.28); border-bottom: 1px solid rgba(127,168,216,.28); transition: border-color .4s; }
.bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(127,168,216,.18), transparent); pointer-events: none; }
.bar:hover { border-color: rgba(127,168,216,.6); }
.bar:hover::after { animation: sweep 1.2s ease-out; }
@keyframes sweep { from { left: -30%; } to { left: 110%; } }
.cdm { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 2px rgba(170,205,250,.3)); } 50% { filter: drop-shadow(0 0 10px rgba(170,205,250,.85)); } }
.bar .b1 { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #eef0f3; }
.bar .b2 { font-size: 14px; color: #c3c8cf; }
.bar .b2 strong { font-weight: 600; color: #cfe0ff; }
.bar .b3 { font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #cfe0ff; transition: transform .35s; }
.bar:hover .b3 { transform: translateX(5px); }

/* horizons: a silhouette on a glow in the film's color */
.hz { position: relative; height: 96px; overflow: hidden; }
.hz > i { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
.hz-head { margin-top: 14px; }
.glowb { animation: glowb 8s ease-in-out infinite; }
@keyframes glowb { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* moons */
.moon { display: inline-block; flex: 0 0 auto; border-radius: 50%; }

/* buttons, tags, chips, tabs */
.btn { position: relative; display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding: 15px 24px; background: #e9ebee; color: #0d0f13; border: 0; transition: box-shadow .35s, transform .35s cubic-bezier(.34,1.56,.64,1), letter-spacing .35s; }
.btn:hover { box-shadow: 0 0 0 1px #fff, 0 0 26px rgba(255,255,255,.35); letter-spacing: .28em; }
.btn2 { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding: 14px 22px; color: #e9ebee; background: transparent; border: 1px solid rgba(233,235,238,.4); transition: border-color .3s, box-shadow .3s, color .3s; }
.btn2:hover { border-color: var(--c, #cfe0ff); box-shadow: 0 0 20px var(--g, rgba(170,205,250,.35)); color: #fff; }
.tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; color: var(--c, #cfe0ff); box-shadow: inset 0 0 0 1px var(--c, #cfe0ff); transition: background .3s, color .3s; }
a:hover .tag, .tag.on { background: var(--c, #cfe0ff); color: #0b0d10; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; color: #c3c8cf; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); background: linear-gradient(90deg, var(--c, #cfe0ff) 0 0) no-repeat left / 0% 100%; transition: background-size .45s cubic-bezier(.22,1,.36,1), color .3s, box-shadow .3s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.chip:hover, .chip.on { background-size: 100% 100%; color: #0b0d10; box-shadow: 0 0 18px var(--g, rgba(170,205,250,.4)); transform: translateY(-2px); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px 28px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.tabs a { position: relative; padding: 14px 0; color: #9aa0a8; transition: color .25s; }
.tabs a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--c, #cfe0ff); box-shadow: 0 0 10px var(--g, rgba(170,205,250,.5)); transition: right .4s cubic-bezier(.22,1,.36,1); }
.tabs a:hover, .tabs a.on { color: #fff; }
.tabs a:hover::after, .tabs a.on::after { right: 0; }

/* ken burns layer, grain, play buttons */
.kb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s cubic-bezier(.22,1,.36,1), filter .5s; }
.grain { position: absolute; inset: -50px; pointer-events: none; background: url(../images/reel/grain.png); opacity: .35; animation: grain .6s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-17px,11px); } 66% { transform: translate(13px,-19px); } 100% { transform: translate(0,0); } }
@keyframes kb { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-2%,-1%); } }
.play { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(8,9,11,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s; }
.play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.7); opacity: 0; }
a:hover > .play, a:hover .vc .play { transform: scale(1.12); background: rgba(8,9,11,.35); }
a:hover > .play::after, a:hover .vc .play::after { animation: ripple 1.4s ease-out infinite; }
@keyframes ripple { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* quote splash over a blurred, tinted still */
.splash { position: relative; overflow: hidden; padding: 110px 24px 40px; text-align: center; }
.splash .sbg { position: absolute; inset: -40px; background-position: 50% 45%; background-size: cover; background-repeat: no-repeat; filter: blur(7px) saturate(1.25) brightness(.5); animation: kb 38s ease-in-out infinite alternate; }
.splash .stint { position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 45%, var(--g, rgba(127,168,216,.22)), rgba(8,9,11,.82) 85%), linear-gradient(180deg, #08090b 0%, rgba(8,9,11,0) 25%, rgba(8,9,11,0) 70%, rgba(8,9,11,.4) 100%); }
.splash figure { position: relative; margin: 0 auto 60px; max-width: 1000px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.splash .hz { margin: 0 -24px -40px; height: 110px; }
.q { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; line-height: 1.12; font-size: clamp(30px, 4.4vw, 60px); animation-delay: 2s; }
.q.long { font-size: clamp(24px, 3vw, 40px); line-height: 1.2; }
.splash figcaption { font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #c3c8cf; }
.splash figcaption a { color: var(--c, #cfe0ff); transition: text-shadow .3s; }
.splash figcaption a:hover { text-shadow: 0 0 12px var(--c, #cfe0ff); }
.q .q-dir { font-size: .6em; opacity: .7; }
.q .q-who { font-style: normal; font-family: 'Jost', Arial, sans-serif; font-weight: 500; font-size: .45em; letter-spacing: .2em; text-transform: uppercase; }

/* ticket stubs */
.stubw { display: block; transition: filter .4s; }
.stubw:hover { filter: drop-shadow(0 8px 18px var(--g)); }
.stub { position: relative; display: grid; grid-template-columns: 86px minmax(0,1fr) 40px; align-items: center; gap: 0 14px; padding: 0 14px 0 0; background: linear-gradient(160deg, #1b1f27, #13161c); border-left: 3px solid var(--c); -webkit-mask: radial-gradient(circle at 86px 0, transparent 8px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle at 86px 100%, transparent 8px, #000 9px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 86px 0, transparent 8px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle at 86px 100%, transparent 8px, #000 9px) bottom / 100% 51% no-repeat; transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s; }
.stub:hover { transform: rotate(-1.4deg) translateY(-3px); background: linear-gradient(160deg, #222833, #161a21); }
.stub .dt2 { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 0; border-right: 2px dashed rgba(207,224,255,.16); transition: border-color .4s; }
.stub:hover .dt2 { border-right-color: var(--c); }
.stub .mo { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--c); }
.stub .dy { font-size: 30px; font-weight: 300; line-height: 1; color: #f6f8fb; transition: text-shadow .4s; }
.stub:hover .dy { text-shadow: 0 0 14px var(--c), 0 0 2px #fff; }
.stub .st { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; min-width: 0; }
.stub .st b { font-size: 16px; font-weight: 600; color: #eef0f3; }
.stub .st span { font-size: 12px; color: #9aa0a8; }
.stub img { width: 40px; height: 60px; object-fit: cover; border-radius: 2px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.stub:hover img { transform: rotate(4deg) scale(1.08); }
.stub.is-round .dy::after { content: "★"; font-size: 12px; vertical-align: top; margin-left: 2px; color: var(--c); }

/* video rows */
.vc { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #121318; }
.vc .sh { position: absolute; inset: 0; }
.vrow { display: grid; grid-template-columns: 172px minmax(0,1fr); gap: 16px; align-items: center; padding: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--w, rgba(170,205,250,.05)), rgba(255,255,255,.015)); box-shadow: inset 2px 0 0 var(--c); transition: box-shadow .4s, background .4s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.vrow .vc { height: 97px; }
.vrow:hover { box-shadow: inset 2px 0 0 var(--c), 0 0 0 1px var(--c), 0 0 28px var(--g); transform: translateX(4px); }
.vrow:hover .kb { transform: scale(1.1); }
.vrow .play { width: 34px; height: 34px; right: 8px; bottom: 8px; }
.vt { font-size: 16px; font-weight: 500; line-height: 1.3; color: #eef0f3; transition: color .3s; }
.vrow:hover .vt { color: #fff; }
.vm { font-size: 12px; letter-spacing: .1em; color: #9aa0a8; }

/* news rows */
.nw { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.thumb { position: relative; display: block; height: 72px; border-radius: 3px; overflow: hidden; background: #121318; box-shadow: 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .4s; }
.nt { font-size: 16px; font-weight: 500; line-height: 1.3; color: #eef0f3; transition: color .3s; }
.nt .ar { display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; color: var(--c); }
.nw:hover .kb { transform: scale(1.12); }
.nw:hover .thumb { box-shadow: 0 0 0 1px var(--c), 0 0 22px var(--g); }
.nw:hover .nt { color: #fff; }
.nw:hover .nt .ar { opacity: 1; transform: none; }
.nmeta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8d96a3; }
.ndek { font-size: 14px; line-height: 1.5; color: #aeb4bd; }

/* empty states */
.empty { padding: 28px; border: 1px dashed rgba(207,224,255,.2); border-radius: 4px; color: #9aa0a8; font-size: 15px; }

/* footer: fireflies over the treeline */
.foot-hz { position: relative; margin-top: 96px; }
.ff { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 6px 2px rgba(255,236,170,.7); opacity: 0; animation: fly var(--t) ease-in-out infinite; animation-delay: var(--d); }
@keyframes fly { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: 1; } 50% { opacity: .3; transform: translate(14px,-12px); } 75% { opacity: 1; transform: translate(-6px,-22px); } 100% { opacity: 0; transform: translate(8px,-30px); } }
.credits { background: #08090b; }
.credits-in { max-width: 1240px; margin: 0 auto; padding: 56px 24px 70px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.credits-name { font-size: 22px; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-top: 18px; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.foot-nav a { padding: 6px 0; color: #c3c8cf; transition: color .25s, text-shadow .25s; }
.foot-nav a:hover { color: #fff; text-shadow: 0 0 12px rgba(170,205,250,.7); }
.foot-note { margin: 18px 0 0; font-size: 13px; line-height: 1.7; color: #9aa0a8; }
.foot-note a { color: #cfe0ff; }

@media (max-width: 760px) {
  .hd { padding: 14px 16px 8px; flex-wrap: wrap; }
  .burger { display: block; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding: 6px 0 10px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
  .nav a::after { display: none; }
  .orbw, .orb { width: 34px; height: 34px; }
  .lock { gap: 10px; }
  .m { font-size: 18px; letter-spacing: .26em; }
  .m .dt { width: 7px; height: 7px; transform: translateY(calc(3.5px - .35em)); background: linear-gradient(90deg, #1e2d45 50%, #e9f0f9 50%); box-shadow: 0 0 6px rgba(170,205,250,.5); }
  .lock:hover .m .dt { box-shadow: 0 0 10px rgba(190,215,250,.95); }
  .sub { font-size: 8px; letter-spacing: .42em; }
  .bar .long { display: none; }
  .hz-head { height: 64px !important; }
  .wrap { padding: 0 16px; }
  .sec { padding-top: 64px; }
  .splash { padding: 80px 16px 30px; }
  .splash .hz { margin: 0 -16px -30px; }
  .vrow { grid-template-columns: 112px minmax(0,1fr); }
  .vrow .vc { height: 63px; }
  .nw { grid-template-columns: 96px minmax(0,1fr); }
  .thumb { height: 58px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }
/* MNight.com — the News, YouTube, Bio, Quiz and 404 pages, on top of css/reel.css.
   Film colors arrive as --c (color), --g (glow) and --w (faint wash); some blocks add
   --b (border) and --s (soft wash). Prefixes: nl- news, yv- YouTube, bi- bio, qz- quiz, nf- 404. */

/* ------------------------------------------------------------------ shared pieces */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-beam { position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 180deg at 50% -10%, transparent 160deg, rgba(207,224,255,.10) 180deg, transparent 200deg); transform-origin: 50% -10%; animation: pgsway 12s ease-in-out infinite alternate; }
@keyframes pgsway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.pg-head { padding-top: 38px; padding-bottom: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 24px; }
.pg-head > div { display: flex; flex-direction: column; gap: 10px; }
.pg-h1 { margin: 0; font-weight: 300; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.pg-plain { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
/* a film's horizon rises into a thumbnail on hover */
.fhz { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; transform: translateY(102%); transition: transform .6s cubic-bezier(.22,1,.36,1); background: linear-gradient(180deg, transparent 0%, var(--g) 100%); pointer-events: none; }
.fhz i { position: absolute; inset: 0; background-position: center bottom; background-size: auto 100%; background-repeat: no-repeat; }
.kbx { position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.kbx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-orbbg { position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 40%, #1f3657 0%, #0d1625 55%, #07090d 100%); }
.pg-orbt { position: absolute; left: 50%; top: 44%; width: 54px; height: 54px; margin: -27px 0 0 -27px; filter: drop-shadow(0 0 12px rgba(150,190,245,.6)) drop-shadow(0 0 34px rgba(80,130,215,.4)); transition: transform .9s cubic-bezier(.34,1.56,.64,1), filter .6s; }
/* Remain's lighthouse, placed from the horizon drawing (wide screens only) */
.lh { position: absolute; left: 73.125%; top: calc(110px - 6.4375vw); width: 0; height: 0; pointer-events: none; }
.lh b { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 10px 3px rgba(255,236,190,.8); animation: lamp 6s ease-in-out infinite; }
.lh i { position: absolute; right: 0; top: -14px; width: 420px; height: 28px; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255,240,205,.55), rgba(255,240,205,0)); clip-path: polygon(0 0, 100% 44%, 100% 56%, 0 100%); animation: beamL 6s ease-in-out infinite; }
.lh u { position: absolute; left: 0; top: -14px; width: 360px; height: 28px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,240,205,.5), rgba(255,240,205,0)); clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%); animation: beamR 6s ease-in-out infinite; }
@keyframes beamL { 0%, 45%, 100% { opacity: 0; transform: scaleX(.3); } 20% { opacity: .85; transform: scaleX(1) rotate(2deg); } }
@keyframes beamR { 0%, 50%, 95%, 100% { opacity: 0; transform: scaleX(.3); } 72% { opacity: .8; transform: scaleX(1) rotate(-2deg); } }
@keyframes lamp { 0%, 100% { opacity: .65; } 20%, 72% { opacity: 1; } }
/* sea mist and a waxing crescent */
.mist { position: absolute; left: -20%; right: -20%; height: 160px; pointer-events: none; background: radial-gradient(40% 60% at 30% 50%, rgba(200,220,245,.12), transparent 70%), radial-gradient(35% 50% at 75% 40%, rgba(200,220,245,.09), transparent 70%); filter: blur(6px); animation: mist 26s ease-in-out infinite alternate; }
.mist.m2 { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.cres { display: block; width: 26px; height: 26px; border-radius: 50%; background: #1b2a42; box-shadow: inset -8px 0 0 0 #e9f0f9, 0 0 18px rgba(170,205,250,.55); transition: box-shadow 1.6s ease; animation: float 7s ease-in-out infinite; }
/* film sprockets with a light chasing along them */
.sprk { position: relative; height: 14px; overflow: hidden; background: #18191c url(../images/reel/sprocket.svg) repeat-x 0 0; }
.sprk::after { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 20%; background: linear-gradient(90deg, transparent, rgba(207,224,255,.26), transparent); opacity: .35; animation: chase 6s linear infinite; }
@keyframes chase { from { left: -20%; } to { left: 110%; } }
/* pages */
.pgn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.pgn a, .pgn span { min-width: 40px; padding: 10px 14px; text-align: center; border: 1px solid rgba(207,224,255,.18); color: #c3c8cf; transition: border-color .3s, color .3s, box-shadow .35s; }
.pgn a:hover { border-color: #cfe0ff; color: #fff; box-shadow: 0 0 18px rgba(170,205,250,.3); }
.pgn .on { border-color: #cfe0ff; color: #0b0d10; background: #cfe0ff; }
.pgn .off { opacity: .35; }
.pg-stub-orb { width: 36px !important; height: 36px !important; object-fit: contain !important; filter: drop-shadow(0 0 8px rgba(150,190,245,.5)); }

/* ------------------------------------------------------------------ News */
/* the horizon under the header cycles through the films in the news */
.nl-cycling .hz-head { background: none !important; }
.nl-cycling .hz-head > i { display: none; }
.nl-cl { position: absolute; inset: 0; opacity: 0; animation: nlc4 24s ease-in-out infinite; animation-delay: var(--d); }
.nl-cl:first-of-type { opacity: 1; }
.nl-cl i { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; animation: nlr4 24s cubic-bezier(.22,1,.36,1) infinite; animation-delay: var(--d); }
.nl-n3 .nl-cl, .nl-n3 .nl-cl i { animation-duration: 18s; animation-name: nlc3; }
.nl-n3 .nl-cl i { animation-name: nlr3; }
.nl-n2 .nl-cl, .nl-n2 .nl-cl i { animation-duration: 12s; animation-name: nlc2; }
.nl-n2 .nl-cl i { animation-name: nlr2; }
@keyframes nlc4 { 0%, 22% { opacity: 1; } 25%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nlr4 { 0%, 25% { transform: none; } 26%, 97% { transform: translateY(12px); } 100% { transform: none; } }
@keyframes nlc3 { 0%, 29% { opacity: 1; } 33.3%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nlr3 { 0%, 33.3% { transform: none; } 34%, 96% { transform: translateY(12px); } 100% { transform: none; } }
@keyframes nlc2 { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nlr2 { 0%, 50% { transform: none; } 51%, 94% { transform: translateY(12px); } 100% { transform: none; } }
.nl-clab { position: absolute; right: 24px; top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #eef3fa; text-shadow: 0 0 14px var(--c); }
/* topic chips (reel.css .chip) with a count */
.nl-n { margin-left: 6px; letter-spacing: .05em; opacity: .6; }
/* lead story: the poster tilts, the beam sways, its horizon brightens and the lighthouse turns faster */
.nl-lead { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 34px 48px; align-items: center; padding: 34px 34px 122px; border: 1px solid var(--b); background: radial-gradient(70% 90% at 0% 0%, var(--s) 0%, rgba(8,9,11,0) 60%), linear-gradient(120deg, #0e1a2c 0%, #0a1220 55%, #08090b 100%); transition: border-color .6s, box-shadow .6s; }
.nl-lead:hover { border-color: var(--g); box-shadow: 0 0 0 1px var(--s), 0 0 60px var(--s); }
.nl-lead > * { position: relative; }
.nl-lead > .pg-beam { position: absolute; background: conic-gradient(from 180deg at 30% -10%, transparent 160deg, rgba(207,224,255,.10) 180deg, transparent 200deg); transform-origin: 30% -10%; animation-duration: 11s; }
.nl-lead > .grain { position: absolute; opacity: .3; }
.nl-lhz { position: absolute !important; left: 0; right: 0; bottom: 0; height: 96px; overflow: hidden; pointer-events: none; }
.nl-lhz b { position: absolute; inset: 0; opacity: .78; transition: opacity .8s ease; }
.nl-lhz > i { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; transform: translateY(8px); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.nl-lead:hover .nl-lhz b { opacity: 1; }
.nl-lead:hover .nl-lhz > i { transform: none; }
.nl-lhz .lh { top: calc(96px - min(1192px, 100vw - 48px) * .064375); }
.nl-lead:hover .lh i, .nl-lead:hover .lh u { animation-duration: 3s; }
.nl-pp { position: relative; display: block; flex: 0 0 300px; max-width: 100%; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: #121318; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -30px var(--g); transition: transform .7s cubic-bezier(.34,1.56,.64,1), box-shadow .5s; }
.nl-pp img.fill { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.nl-pp .tint { position: absolute; inset: 0; background: var(--c); mix-blend-mode: soft-light; opacity: .5; }
.nl-pp .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,0) 55%, rgba(8,12,20,.78) 100%); }
.nl-pp .pl { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #eef3fa; }
.nl-pp::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-14deg); }
.nl-pp .pg-orbt { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.nl-lead:hover .nl-pp { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) scale(1.03); box-shadow: 0 0 0 1px rgba(170,205,250,.4), 0 40px 90px -30px var(--g), 0 0 60px var(--s); }
.nl-lead:hover .nl-pp img.fill { transform: scale(1.05); }
.nl-lead:hover .nl-pp::after { animation: glint 1.2s ease-out .2s; }
.nl-lb { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.nl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nl-lt { margin: 0; font-weight: 400; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.1; letter-spacing: .005em; text-wrap: balance; transition: filter .8s ease; }
.nl-lead:hover .nl-lt { filter: drop-shadow(0 0 24px var(--g)); }
.nl-dek { margin: 0; font-size: 18px; line-height: 1.6; color: #c3c8cf; max-width: 620px; text-wrap: pretty; }
.nl-lmeta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; letter-spacing: .08em; color: #9aa0a8; }
.nl-lmeta strong { color: #e9ebee; font-weight: 500; }
.nl-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* quote splash: sea mist drifts, the crescent waxes on hover */
.nl-splash { margin-top: 72px; }
.nl-splash .cres { margin: 0 auto; }
.nl-splash:hover .cres { box-shadow: inset -26px 0 0 0 #f2f6fb, 0 0 30px rgba(190,215,250,.9), 0 0 60px rgba(130,175,240,.45); }
.nl-splash figure { margin-bottom: 64px; }
.nl-splash:hover .lh i, .nl-splash:hover .lh u { animation-duration: 3s; }
/* story rows: film-colored ring, Ken Burns, the film's horizon rises into the thumbnail */
.nl-cols { padding-top: 56px; display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.nl-list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.nl-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nl-row { position: relative; display: flex; flex-wrap: wrap; gap: 16px 26px; padding: 24px 14px; margin: 0 -14px; border-radius: 4px; transition: background .5s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.nl-row::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: rgba(255,255,255,.08); }
.nl-row:hover { background: linear-gradient(90deg, var(--w) 0%, rgba(255,255,255,0) 75%); transform: translateX(4px); }
.nl-th { position: relative; flex: 0 0 232px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #121318; box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .45s; }
.nl-th .tint { position: absolute; inset: 0; }
.nl-th .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,0) 50%, rgba(8,9,11,.6) 100%); }
.nl-th .yt { position: absolute; left: 0; right: 0; top: 68%; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .3em; color: #cfe0ff; }
.nl-row:hover .nl-th { box-shadow: 0 0 0 2px var(--c), 0 0 28px var(--g); }
.nl-row:hover .kbx { transform: scale(1.1); }
.nl-row:hover .fhz { transform: none; }
.nl-row:hover .pg-orbt { transform: rotate(-10deg) scale(1.1); filter: drop-shadow(0 0 16px rgba(170,205,250,.9)) drop-shadow(0 0 44px rgba(100,150,235,.6)); }
.nl-rb { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.nl-date { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8d96a3; }
.nl-rh { font-size: 22px; font-weight: 500; line-height: 1.25; color: #eef0f3; transition: color .3s, text-shadow .3s; text-wrap: balance; }
.nl-rh .ar { display: inline-block; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1); color: var(--c); }
.nl-row:hover .nl-rh { color: #fff; text-shadow: 0 0 16px var(--g); }
.nl-row:hover .nl-rh .ar { opacity: 1; transform: none; }
.nl-row:hover .tag { background: var(--c); color: #0b0d10; }
.nl-rdek { font-size: 15px; line-height: 1.6; color: #b9bfc7; text-wrap: pretty; }
.nl-src { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #6f7a88; }
.nl-none { margin: 0; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 15px; color: #9aa0a8; }
@media (max-width: 1179px) { .nl-splash .lh { display: none; } }
@media (max-width: 1100px) { .nl-lead .lh { display: none; } }

/* ------------------------------------------------------------------ YouTube */
.pg-videos .foot-hz { margin-top: 70px; }
.yv-intro { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 15% 0%, rgba(40,70,120,.35) 0%, rgba(8,9,11,0) 70%), #08090b; }
.yv-intro .grain { opacity: .3; }
.yv-in { position: relative; padding-top: 44px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.yv-cl { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; }
.yv-who { display: flex; align-items: center; gap: 20px; }
.yv-who > span:last-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.yv-orb { position: relative; flex: 0 0 auto; width: 84px; height: 84px; }
.yv-orb img { width: 84px; height: 84px; display: block; filter: drop-shadow(0 0 14px rgba(150,190,245,.55)) drop-shadow(0 0 40px rgba(80,130,215,.35)); transition: filter .6s, transform .9s cubic-bezier(.34,1.56,.64,1); }
.yv-orb .glint { inset: 5px; }
.yv-cl:hover .yv-orb img { filter: drop-shadow(0 0 18px rgba(170,205,250,.9)) drop-shadow(0 0 56px rgba(100,150,235,.6)); transform: rotate(-8deg) scale(1.05); }
.yv-cl:hover .glint::before { animation: glint .9s ease-out .1s; }
.yv-cl:hover .spk { animation: spark 1s ease-out forwards; animation-delay: var(--d); }
.yv-txt { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: #c3c8cf; text-wrap: pretty; }
.yv-qf { flex: 1 1 420px; margin: 0; display: flex; flex-direction: column; gap: 16px; padding-left: 28px; border-left: 1px solid rgba(207,224,255,.2); transition: border-color .6s; }
.yv-qf:hover { border-left-color: rgba(207,224,255,.6); }
.yv-sq { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; text-wrap: balance; background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%), linear-gradient(180deg, #f6f9fd 20%, #9dbbe0 100%); background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 11s ease-in-out infinite 2s; }
.yv-attr { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #9aa0a8; }
/* featured player: light chases the sprockets */
.yv-feat { padding-top: 24px; scroll-margin-top: 16px; }
.yv-fwrap { display: flex; flex-wrap: wrap; gap: 30px 44px; align-items: center; }
.yv-fp { flex: 1 1 560px; min-width: 0; background: #18191c; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); transition: box-shadow .6s; }
.yv-fp:hover { box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 50px var(--g); }
.yv-fp:hover .sprk::after { opacity: 1; animation-duration: 2s; }
.yv-fp .pin { padding: 14px 18px; }
.yv-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: radial-gradient(70% 90% at 72% 30%, #2f4566 0%, #141c29 55%, #090b0f 100%); }
.yv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yv-fi { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.yv-ft { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; line-height: 1.2; color: #f3f6fa; text-wrap: balance; }
.yv-fm { font-size: 14px; letter-spacing: .08em; color: #9aa0a8; }
.yv-fb { margin: 0; font-size: 16px; line-height: 1.65; color: #c3c8cf; }
/* video cards: a ring in the film's color, Ken Burns, the film's horizon rises */
.yv-all { padding-top: 72px; scroll-margin-top: 16px; }
/* Shorts: tall cards in their own row; a Short in the player gets a tall frame */
.yv-sgrid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 26px 18px; }
.yv-short .yv-va { aspect-ratio: 9 / 16; }
.yv-short .yv-vt { font-size: 15px; }
.yv-short .yv-vm { font-size: 12px; }
.yv-fp.short { flex: 0 1 340px; }
.yv-fp.short .yv-player { aspect-ratio: 9 / 16; }
.yv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 30px 22px; }
.yv-vc { display: flex; flex-direction: column; gap: 12px; }
.yv-va { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: radial-gradient(70% 90% at 50% 30%, #1f3657 0%, #0d1625 60%, #07090d 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 30px -18px rgba(0,0,0,.9); transition: box-shadow .45s, transform .55s cubic-bezier(.34,1.56,.64,1); }
.yv-va .tint { position: absolute; inset: 0; }
.yv-va .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,0) 45%, rgba(8,9,11,.75) 100%); }
.yv-va .fhz { height: 34%; }
.yv-va .play { right: 12px; bottom: 12px; width: 38px; height: 38px; }
.yv-tri { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #f3f6fa; border-width: 7px 0 7px 11px; margin-left: 3px; }
.yv-now { position: absolute; left: 12px; top: 12px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--c); color: #0b0d10; box-shadow: 0 0 16px var(--g); }
.yv-vt { font-size: 17px; font-weight: 500; line-height: 1.35; color: #eef0f3; transition: color .3s, text-shadow .3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yv-vm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: #9aa0a8; }
.yv-vf { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.yv-vf .moon { transition: transform .4s, filter .4s; }
.yv-vc:hover .yv-va { box-shadow: 0 0 0 2px var(--c), 0 0 30px var(--g), 0 18px 30px -16px rgba(0,0,0,.9); transform: translateY(-5px); }
.yv-vc:hover .kbx { transform: scale(1.1); }
.yv-vc:hover .fhz { transform: none; }
.yv-vc:hover .play { transform: scale(1.12); background: rgba(8,9,11,.2); }
.yv-vc:hover .play::after { animation: ripple 1.4s ease-out infinite; }
.yv-vc:hover .yv-vt { color: #fff; text-shadow: 0 0 14px var(--g); }
.yv-vc:hover .yv-vf .moon { transform: scale(1.35); filter: drop-shadow(0 0 6px var(--c)); }
/* browse by film: chips lift in their color and show a sliver of horizon; the stage below follows */
.yv-browse { position: relative; padding-top: 64px; }
.yv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.yv-chip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #c3c8cf; transition: border-color .35s, color .35s, box-shadow .4s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.yv-chip > * { position: relative; z-index: 1; }
.yv-chip .pi { display: block; width: 22px; height: 33px; border-radius: 2px; background-size: cover; background-position: center; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.yv-chip .pi.orb { background-size: 20px 20px; background-repeat: no-repeat; }
.yv-chip .chz { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(180deg, transparent 0%, var(--g) 100%); transform: translateY(102%); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.yv-chip .chz i { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
.yv-chip .cn { font-size: 11px; letter-spacing: .1em; padding: 2px 7px; border-radius: 999px; background: var(--w); color: var(--c); }
.yv-chip:hover, .yv-chip:focus-visible, .yv-chip.on { border-color: var(--c); color: #fff; box-shadow: 0 0 22px var(--g); }
.yv-chip:hover, .yv-chip:focus-visible { transform: translateY(-3px); }
.yv-chip:hover .pi, .yv-chip:focus-visible .pi { transform: rotate(-5deg) scale(1.12); }
.yv-chip:hover .chz, .yv-chip:focus-visible .chz, .yv-chip.on .chz { transform: none; }
.yv-stage { position: relative; height: 150px; overflow: hidden; margin-top: 26px; }
.yv-sl { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.yv-sl.on { opacity: 1; }
.yv-sl i { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; transition: transform 1.2s cubic-bezier(.22,1,.36,1); transform: translateY(16px); }
.yv-sl.on i { transform: none; }
.yv-sl .lab { position: absolute; left: 0; right: 0; top: 20px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #f3f6fa; text-shadow: 0 0 14px var(--c); }
.yv-sl .lh { top: calc(150px - 6.4375vw); }
/* Remain splash: slow Ken Burns, sea mist, the lighthouse turns */
.yv-rsp { position: relative; overflow: hidden; margin-top: 40px; min-height: 380px; display: flex; align-items: center; }
.yv-rsp .rbg { position: absolute; inset: -40px; background-size: cover; background-position: 50% 30%; filter: blur(14px) saturate(1.1) brightness(.6); animation: kb 38s ease-in-out infinite alternate; }
.yv-rsp .rtint { position: absolute; inset: 0; background: var(--g); mix-blend-mode: color; }
.yv-rsp .rshade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.7) 50%, rgba(8,9,11,.35) 100%); }
.yv-rsp > .hz { position: absolute; left: 0; right: 0; bottom: 0; }
.yv-rsp:hover .lh i, .yv-rsp:hover .lh u { animation-duration: 3s; }
.yv-rin { position: relative; width: 100%; padding-top: 56px; padding-bottom: 150px; display: flex; flex-wrap: wrap; gap: 30px 56px; align-items: center; }
.yv-rin figure { flex: 1 1 520px; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.yv-rin .yv-sq { font-size: clamp(26px, 3.2vw, 42px); }
.yv-rside { flex: 0 1 280px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.yv-rside .when { font-size: 16px; line-height: 1.5; color: #c3c8cf; }
.yv-rmoon { animation: breathe 5s ease-in-out infinite; }
@media (max-width: 1179px) { .yv-stage .lh, .yv-rsp .lh { display: none; } }

/* ------------------------------------------------------------------ Bio */
/* Philadelphia skyline: City Hall's clock glows, windows come on as you hover */
.bi-win { position: absolute; width: 2px; height: 3px; background: #ffe6b0; box-shadow: 0 0 4px rgba(255,220,150,.8); opacity: 0; transition: opacity .5s ease; transition-delay: var(--d); }
.bi-win.amb { animation: winf var(--t) steps(1) infinite; animation-delay: var(--d); }
@keyframes winf { 0%, 100% { opacity: 0; } 30% { opacity: .85; } 62% { opacity: .85; } 64% { opacity: 0; } }
.hz-head:hover .bi-win { opacity: .95; }
.hz-head:hover .bi-win.amb { animation: none; opacity: .95; }
.bi-clock { position: absolute; left: 36.25%; top: calc(110px - 5.5vw); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 6px 2px rgba(255,226,170,.55), 0 0 18px 6px rgba(255,205,130,.18); animation: clockb 6s ease-in-out infinite; transition: box-shadow .9s ease, transform .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes clockb { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.hz-head:hover .bi-clock { animation: none; opacity: 1; transform: scale(1.35); box-shadow: 0 0 8px 3px rgba(255,232,180,.95), 0 0 34px 12px rgba(255,205,130,.42), 0 0 80px 26px rgba(255,190,110,.16); }
.bi-note { position: absolute; right: 24px; bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(207,224,255,0); transition: color .6s; }
.hz-head:hover .bi-note { color: rgba(207,224,255,.6); }
@media (max-width: 1179px) { .bi-win, .bi-clock, .bi-note { display: none; } }
/* hero: projector beam with drifting dust, a floating ghost moon, the photo frame tilts */
.bi-hero { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 85% 10%, rgba(40,70,120,.32) 0%, rgba(8,9,11,0) 70%), #08090b; }
.bi-hero > .grain { opacity: .25; }
.bi-mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(225,236,255,.8); box-shadow: 0 0 6px rgba(200,220,255,.6); opacity: 0; animation: mote var(--t) linear infinite; animation-delay: var(--d); pointer-events: none; }
@keyframes mote { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: .8; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--x), -220px); } }
.bi-gmoon { position: absolute; right: 6%; top: 40px; width: 220px; height: 220px; border-radius: 50%; background: #0e1726; box-shadow: inset -70px 0 0 0 rgba(233,240,249,.10), 0 0 80px rgba(170,205,250,.08); animation: float 9s ease-in-out infinite; transition: box-shadow 2.4s ease; }
.bi-hero:hover .bi-gmoon { box-shadow: inset -150px 0 0 0 rgba(233,240,249,.16), 0 0 110px rgba(170,205,250,.18); }
.bi-hin { position: relative; padding-top: 48px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: center; }
.bi-frame { position: relative; flex: 0 1 300px; min-width: 220px; margin: 0; background: #18191c; box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); transition: transform .7s cubic-bezier(.34,1.56,.64,1), box-shadow .5s; }
.bi-frame:hover { transform: perspective(800px) rotateY(-7deg) rotateX(2deg) translateY(-4px); box-shadow: 0 0 0 1px rgba(207,224,255,.4), 0 40px 70px -24px rgba(0,0,0,.95), 0 0 50px rgba(150,190,245,.22); }
.bi-frame:hover .sprk::after { opacity: 1; animation-duration: 1.8s; }
.bi-fin { padding: 12px 14px; }
.bi-slot { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 3px; background: radial-gradient(circle at 50% 35%, #2a313c 0%, #12151a 80%); display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-size: 13px; line-height: 1.5; color: #9aa0a8; }
.bi-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bi-slot::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-14deg); }
.bi-frame:hover .bi-slot::after { animation: glint 1.3s ease-out .1s; }
.bi-credit { display: block; padding: 0 14px 10px; font-size: 11px; line-height: 1.5; color: #8d96a3; }
.bi-credit a { color: inherit; }
.bi-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bi-hin.nophoto .bi-text { max-width: 860px; }
.bi-h1 { margin: 0; font-weight: 300; font-size: clamp(36px, 5.4vw, 72px); letter-spacing: .1em; text-transform: uppercase; line-height: 1; filter: drop-shadow(0 0 26px rgba(170,205,250,.22)); transition: filter .8s; }
.bi-hero:hover .bi-h1 { filter: drop-shadow(0 0 34px rgba(170,205,250,.45)); }
.bi-born { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9aa0a8; line-height: 1.7; }
.bi-p { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.7; color: #c3c8cf; text-wrap: pretty; }
.bi-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* by the numbers: stubs tilt, the perforation lights and marches */
.bi-nums { padding-top: 8px; }
.bi-ngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.bi-sw { display: block; transition: filter .45s; }
.bi-sw:hover { filter: drop-shadow(0 10px 22px var(--g)); }
.bi-stub { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 20px; background: linear-gradient(160deg, rgba(207,224,255,.09), rgba(207,224,255,.03)); box-shadow: inset 0 2px 0 var(--c); -webkit-mask: radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat; transition: transform .55s cubic-bezier(.34,1.56,.64,1), background .4s; }
.bi-sw:nth-child(odd):hover .bi-stub { transform: rotate(-1.4deg) translateY(-4px); }
.bi-sw:nth-child(even):hover .bi-stub { transform: rotate(1.2deg) translateY(-4px); }
.bi-sw:hover .bi-stub { background: linear-gradient(160deg, rgba(207,224,255,.13), rgba(207,224,255,.05)); }
.bi-bv { font-weight: 300; font-size: 54px; letter-spacing: .06em; line-height: 1; color: #f3f6fa; transition: text-shadow .45s; }
.bi-bv.sm { font-size: 38px; }
.bi-sw:hover .bi-bv { text-shadow: 0 0 18px var(--c), 0 0 2px #fff; }
.bi-bk { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--c); }
.bi-perf { height: 2px; margin-top: 4px; background: repeating-linear-gradient(90deg, rgba(207,224,255,.25) 0 7px, transparent 7px 13px); }
.bi-sw:hover .bi-perf { background-image: repeating-linear-gradient(90deg, var(--c) 0 7px, transparent 7px 13px); animation: march .7s linear infinite; }
@keyframes march { to { background-position: 13px 0; } }
.bi-bd { font-size: 13px; line-height: 1.45; color: #9aa0a8; padding-top: 6px; }
/* quote splash over a film still */
.bi-splash { position: relative; overflow: hidden; margin-top: 80px; display: flex; flex-direction: column; }
.bi-splash .sbg { position: absolute; inset: -40px; background-size: cover; background-position: 50% 40%; filter: blur(7px) saturate(1.25) brightness(.62); animation: kb 38s ease-in-out infinite alternate; transition: filter 1s; }
.bi-splash:hover .sbg { filter: blur(4px) saturate(1.35) brightness(.7); }
.bi-splash .wash { position: absolute; inset: 0; background: var(--g); mix-blend-mode: soft-light; }
.bi-splash .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.62) 55%, rgba(8,9,11,.3) 100%); }
.bi-splash::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,236,180,.12), transparent); transform: skewX(-16deg); pointer-events: none; }
.bi-splash:hover::after { animation: glint 1.6s ease-out; }
.bi-splash figure { position: relative; width: 100%; margin: 0 auto; padding-top: 84px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 18px; }
.bi-splash .q { max-width: 900px; font-size: clamp(32px, 5vw, 64px); text-wrap: balance; }
.bi-splash figcaption { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #c3c8cf; }
.bi-splash figcaption .via { letter-spacing: .12em; text-transform: none; color: #8d96a3; }
.bi-splash > .hz { margin-top: -10px; height: 110px; transition: filter .8s; }
.bi-splash:hover > .hz { filter: brightness(1.25) saturate(1.2); }
/* A life in moons: each moon waxes toward full in the color of that year's film */
.bi-tl { position: relative; display: grid; grid-template-columns: 150px 40px minmax(0,1fr) auto; column-gap: 22px; align-items: center; min-height: 112px; border-bottom: 1px solid rgba(255,255,255,.05); }
.bi-tl::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--w), rgba(0,0,0,0) 70%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.bi-tl:hover::before { opacity: 1; }
.bi-tl.last { background: linear-gradient(90deg, rgba(120,170,240,.12), rgba(120,170,240,0) 70%); }
.bi-tls { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.06); }
.bi-yr { position: relative; text-align: right; font-size: 24px; font-weight: 300; letter-spacing: .08em; line-height: 1.15; color: #f3f6fa; transition: color .4s, text-shadow .4s; }
.bi-tl:hover .bi-yr { color: #fff; text-shadow: 0 0 16px var(--c); }
.bi-rail { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.bi-ln { position: absolute; left: 50%; top: 0; bottom: -1px; width: 1px; margin-left: -.5px; background: rgba(207,224,255,.22); transition: background .4s, box-shadow .4s; }
.bi-tl.first .bi-ln { top: 50%; }
.bi-tl.last .bi-ln { bottom: 50%; }
.bi-tl:hover .bi-ln { background: var(--c); box-shadow: 0 0 8px var(--c); }
.bi-tm { position: relative; transition: filter 1.3s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.34,1.56,.64,1); }
.bi-tl:hover .bi-tm { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 20px var(--g)); transform: scale(1.2); }
.bi-tc { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; min-width: 0; }
.bi-tt { position: relative; font-size: 18px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; color: #e9ebee; transition: color .3s; }
.bi-tt a { transition: text-shadow .3s; }
.bi-tl:hover .bi-tt { color: #fff; }
.bi-tl:hover .bi-tt a { text-shadow: 0 0 14px var(--c); }
.bi-td { position: relative; font-size: 15px; line-height: 1.6; color: #a9b0b9; max-width: 640px; text-wrap: pretty; }
.bi-tp { padding-right: 6px; }
.bi-tp img { display: block; width: 52px; height: 78px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 20px -10px rgba(0,0,0,.9); transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; }
.bi-tl.last .bi-tp img { outline: 1px solid rgba(207,224,255,.6); outline-offset: 3px; }
.bi-tl:hover .bi-tp img { transform: rotate(4deg) scale(1.1); box-shadow: 0 0 0 2px var(--c), 0 0 22px var(--g); }
/* the films: the poster row */
.bi-pw { display: grid; gap: 6px; }
.bi-pw a { position: relative; display: block; border-radius: 2px; overflow: hidden; background: #121318; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 2px 0 0 var(--c); transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; }
.bi-pw .pimg { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 1.2s ease, filter .4s; }
.bi-pw .pfb { display: flex; align-items: center; justify-content: center; padding: 4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #e9ebee; }
.bi-pw .fhz { height: 36%; }
.bi-pw a.cur { box-shadow: 0 0 0 1px rgba(207,224,255,.7), 0 0 18px rgba(170,205,250,.35); }
.bi-pw a:hover, .bi-pw a:focus-visible { transform: translateY(-7px) scale(1.06); box-shadow: 0 0 0 2px var(--c), 0 16px 30px -10px var(--g), 0 0 24px var(--g); z-index: 2; }
.bi-pw a:hover .pimg { transform: scale(1.06); filter: brightness(1.08) saturate(1.12); }
.bi-pw a:hover .fhz, .bi-pw a:focus-visible .fhz { transform: none; }
.bi-hint { margin-top: 12px; font-size: 12px; color: #8d96a3; }

/* ------------------------------------------------------------------ Quiz */
.qz { position: relative; overflow: hidden; --c: #e0484e; --g: rgba(224,72,78,.55); --g2: rgba(224,72,78,.22); --w: rgba(224,72,78,.14); --cl: #f3a3a6; }
.qz-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: blur(10px) saturate(1.2); transform: scale(1.12); opacity: 0; transition: opacity 1.2s ease; }
.qz-bg.on { opacity: 1; animation: qzkb 30s ease-in-out infinite alternate; }
@keyframes qzkb { from { transform: scale(1.12) translate(0,0); } to { transform: scale(1.24) translate(-2%,-1%); } }
.qz-tint { position: absolute; inset: 0; mix-blend-mode: color; transition: background-color 1.2s ease; }
.qz-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #08090b 0%, rgba(8,9,11,.55) 14%, rgba(8,9,11,.62) 60%, #08090b 100%), radial-gradient(90% 70% at 50% 40%, rgba(8,9,11,0) 0%, rgba(8,9,11,.6) 100%); }
.qz-in { position: relative; padding-top: 48px; padding-bottom: 30px; display: flex; flex-direction: column; gap: 30px; }
.qz-top { display: flex; flex-direction: column; gap: 12px; }
.qz-h1 { filter: drop-shadow(0 0 26px rgba(170,205,250,.22)); }
.qz-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.qz-card { position: relative; flex: 1 1 540px; max-width: 780px; min-width: 0; padding: 30px 34px 34px; display: flex; flex-direction: column; gap: 22px; background: rgba(8,9,11,.62); border: 1px solid rgba(207,224,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 2px 0 var(--c); transition: box-shadow .9s ease, border-color .9s ease; }
.qz-card:hover { border-color: rgba(207,224,255,.26); box-shadow: inset 0 2px 0 var(--c), 0 0 46px var(--g2); }
.qz-status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.qz-prog { display: flex; flex-direction: column; gap: 10px; flex: 1 1 200px; }
.qz-prog .cap { color: var(--cl); }
.qz-dots { display: flex; gap: 8px; align-items: center; }
.qz-score { font-size: 13px; letter-spacing: .14em; color: #9aa0a8; }
.qz-score strong { font-weight: 600; color: #eef0f3; }
/* the big moon fills with each answer and pulses in the film's color */
.qz-bm.pa { animation: qzpa 1.4s ease-out; }
.qz-bm.pb { animation: qzpb 1.4s ease-out; }
@keyframes qzpa { 0% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } 30% { filter: drop-shadow(0 0 18px var(--c)) drop-shadow(0 0 40px var(--c)); transform: scale(1.12); } 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } }
@keyframes qzpb { 0% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } 30% { filter: drop-shadow(0 0 18px var(--c)) drop-shadow(0 0 40px var(--c)); transform: scale(1.12); } 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } }
.qz-dot { display: block; width: 14px; height: 14px; border-radius: 50%; transition: box-shadow .5s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.qz-dot.now { animation: qznow 2.4s ease-in-out infinite; }
@keyframes qznow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.qz-body { display: flex; flex-direction: column; gap: 18px; }
.qz-q { margin: 0; font-size: clamp(21px, 2.4vw, 27px); font-weight: 400; line-height: 1.35; color: #f3f6fa; text-wrap: pretty; background: none !important; -webkit-text-fill-color: #f3f6fa !important; animation: none !important; }
.qz-q:focus { outline: none; }
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
/* answers lift with a ring in the film's color */
.qz-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 18px; border-radius: 4px; font-size: 17px; line-height: 1.35; color: #eef0f3; background: rgba(8,9,11,.55); border: 1px solid rgba(207,224,255,.28); transition: background .3s, border-color .3s, opacity .4s, box-shadow .4s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.qz-opt.live:hover, .qz-opt.live:focus-visible { transform: translateY(-3px); border-color: var(--c); background: rgba(8,9,11,.7); box-shadow: 0 0 0 1px var(--c), 0 12px 26px -12px var(--g), 0 0 26px var(--g2); }
.qz-opt[aria-disabled="true"] { cursor: default; }
.qz-lt { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; border: 1px solid rgba(207,224,255,.4); color: #cfe0ff; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.qz-opt.live:hover .qz-lt, .qz-opt.live:focus-visible .qz-lt { background: var(--c); border-color: var(--c); color: #0b0d10; box-shadow: 0 0 12px var(--c); }
.qz-ot { flex: 1 1 auto; }
.qz-otag { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.qz-opt.ok { border-color: var(--c); background: var(--w); color: #fff; box-shadow: 0 0 0 1px var(--c), 0 0 22px var(--g2); animation: qzok 1.3s ease-out; }
.qz-opt.ok .qz-lt { background: var(--c); border-color: var(--c); color: #0b0d10; box-shadow: 0 0 14px var(--c); }
.qz-opt.ok .qz-otag { color: var(--cl); }
@keyframes qzok { 0% { box-shadow: 0 0 0 0 var(--c), 0 0 0 var(--c); } 25% { box-shadow: 0 0 0 3px var(--c), 0 0 46px var(--c); } 100% { box-shadow: 0 0 0 1px var(--c), 0 0 22px var(--g2); } }
.qz-opt.bad { border-style: dashed; border-color: rgba(255,255,255,.4); color: #aab1ba; animation: qzshake .5s cubic-bezier(.36,.07,.19,.97); }
.qz-opt.bad .qz-lt { border-color: rgba(255,255,255,.4); color: #aab1ba; }
.qz-opt.bad .qz-ot { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.qz-opt.bad .qz-otag { color: #aab1ba; }
@keyframes qzshake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
.qz-opt.dim { opacity: .45; }
/* feedback flashes in the film's color */
.qz-fb { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-left: 2px solid var(--c); background: var(--w); animation: qzfb 1.2s cubic-bezier(.22,1,.36,1); }
@keyframes qzfb { 0% { opacity: 0; transform: translateY(8px); box-shadow: 0 0 0 1px var(--c), 0 0 50px var(--c); } 35% { opacity: 1; box-shadow: 0 0 0 1px var(--c), 0 0 40px var(--g); } 100% { transform: none; box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; } }
.qz-verdict { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.qz-x { font-size: 15px; line-height: 1.6; color: #d6dbe2; text-wrap: pretty; }
.qz-next { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.qz-btn { position: relative; border: 0; background: #e9ebee; color: #0d0f13; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding: 15px 24px; transition: box-shadow .35s, letter-spacing .35s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.qz-btn:hover, .qz-btn:focus-visible { box-shadow: 0 0 0 1px #fff, 0 0 26px var(--g); letter-spacing: .28em; transform: translateY(-2px); }
.qz-btn2 { display: inline-block; border: 1px solid rgba(207,224,255,.3); background: none; color: #c3c8cf; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: 14px 22px; transition: border-color .3s, color .3s, box-shadow .35s; }
.qz-btn2:hover { border-color: var(--c); color: #fff; box-shadow: 0 0 22px var(--g2); }
.qz-end { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0 6px; text-align: center; }
.qz-end .cap { color: var(--cl); }
.qz-final { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: #f3f6fa; }
.qz-end .q { font-size: clamp(24px, 3vw, 34px); }
.qz-endmoon { animation: qzend 4s ease-in-out infinite; }
@keyframes qzend { 0%, 100% { filter: drop-shadow(0 0 6px var(--g2)); } 50% { filter: drop-shadow(0 0 26px var(--g)); } }
.qz-endb { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
/* more quizzes, each in its film's color */
.qz-more { flex: 1 1 280px; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.qz-mq { position: relative; display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 4px; background: rgba(8,9,11,.45); border: 1px solid rgba(255,255,255,.06); box-shadow: inset 2px 0 0 var(--c); transition: box-shadow .4s, transform .45s cubic-bezier(.34,1.56,.64,1), background .4s; }
.qz-mq:hover { transform: translateX(5px); background: rgba(8,9,11,.65); box-shadow: inset 2px 0 0 var(--c), 0 0 0 1px var(--c), 0 0 26px var(--g); }
.qz-mq .pi { flex: 0 0 40px; width: 40px; height: 60px; border-radius: 2px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.qz-mq:hover .pi { transform: rotate(-5deg) scale(1.1); }
.qz-mq .pi-night { display: flex; align-items: center; justify-content: center; background-color: #0c121c; background-image: radial-gradient(circle at 50% 32%, #22324a 0%, #0c121c 75%); }
.qz-mt { font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #eef0f3; transition: text-shadow .3s; }
.qz-mq:hover .qz-mt { text-shadow: 0 0 12px var(--c); }
.qz-my { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; color: #9aa0a8; }
.qz-my .moon { transition: transform .4s, filter .4s; }
.qz-mq:hover .qz-my .moon { transform: scale(1.35); filter: drop-shadow(0 0 5px var(--c)); }
.qz-soon { font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #9aa0a8; border: 1px solid rgba(207,224,255,.2); padding: 3px 6px 3px 8px; white-space: nowrap; transition: color .3s, border-color .3s, background .3s; }
.qz-mq:hover .qz-soon { color: #0b0d10; background: var(--c); border-color: var(--c); }
/* each question's film horizon rises along the bottom */
.qz-stage { position: relative; height: 130px; margin-top: -6px; }
.qz-h { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.qz-h.on { opacity: 1; }
.qz-h i { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; transform: translateY(18px); transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.qz-h.on i { transform: none; }
a.qz-mq, .qzi-feat, .qzi-card { color: inherit; text-decoration: none; }
.qz-back { color: #c3c8cf; text-decoration: none; border-bottom: 1px solid rgba(207,224,255,.3); transition: color .3s, border-color .3s; }
.qz-back::before { content: "\2190\00a0"; }
.qz-back:hover, .qz-back:focus-visible { color: #fff; border-color: var(--c); }
.qz-all { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #c3c8cf; text-decoration: none; border-bottom: 1px solid rgba(207,224,255,.3); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.qz-all:hover, .qz-all:focus-visible { color: #fff; border-color: #fff; }

/* Quiz list (quiz.php with no ?q=): the Night quiz up top, then one card per film. Each card wears its film's color, still and horizon. */
.qzi .qz-in { padding-bottom: 64px; gap: 26px; }
.qzi-lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: #c3c8cf; }
.qzi-feat { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 30px 32px 84px; border-radius: 4px; background: radial-gradient(70% 120% at 8% 0%, rgba(157,187,224,.16), rgba(8,9,11,0) 60%), rgba(8,9,11,.62); border: 1px solid rgba(207,224,255,.16); box-shadow: inset 0 2px 0 var(--c); transition: box-shadow .45s, transform .45s cubic-bezier(.34,1.56,.64,1), border-color .45s; }
.qzi-feat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(8,9,11,0), var(--g)); opacity: .55; pointer-events: none; }
.qzi-feat:hover, .qzi-feat:focus-visible { transform: translateY(-3px); border-color: rgba(207,224,255,.3); box-shadow: inset 0 2px 0 var(--c), 0 0 0 1px var(--c), 0 0 50px var(--g); }
.qzi-fmoon { position: relative; z-index: 1; flex: 0 0 auto; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.qzi-feat:hover .qzi-fmoon { transform: scale(1.08) rotate(-6deg); }
.qzi-ftx { position: relative; z-index: 1; flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qzi-ft { font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; line-height: 1.05; color: #f3f6fa; }
.qzi-go { position: relative; z-index: 1; flex: 0 0 auto; }
.qzi-hz { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 56px; background-repeat: no-repeat; background-position: center bottom; background-size: cover; pointer-events: none; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.qzi-feat:hover .qzi-hz, .qzi-card:hover .qzi-hz { transform: translateY(-4px); }
.qzi-b { font-size: 14px; line-height: 1.5; color: #b8bec6; text-wrap: pretty; }
.qzi-n { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa0a8; }
.qzi-best { display: none; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cl, #cfe0ff); }
.qzi-best.on { display: flex; }
.qzi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.qzi-card { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: flex-start; min-height: 196px; padding: 18px 18px 66px; border-radius: 4px; background: #0b0d10; border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 2px 0 var(--c); transition: box-shadow .45s, transform .45s cubic-bezier(.34,1.56,.64,1), border-color .45s; }
.qzi-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, rgba(8,9,11,0), var(--g)); opacity: .5; pointer-events: none; transition: opacity .45s; }
.qzi-card:hover, .qzi-card:focus-visible { transform: translateY(-4px); border-color: var(--c); box-shadow: inset 0 2px 0 var(--c), 0 0 0 1px var(--c), 0 16px 40px -18px var(--g), 0 0 40px var(--w); }
.qzi-card:hover::after { opacity: .85; }
.qzi-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; filter: saturate(1.1); transform: scale(1.02); transition: opacity .6s, transform 1.2s cubic-bezier(.22,1,.36,1); }
.qzi-card:hover .qzi-bg { opacity: .45; transform: scale(1.08); }
.qzi-sh { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,.45) 0%, rgba(8,9,11,.82) 55%, rgba(8,9,11,.92) 100%); }
.qzi-card .pi { position: relative; z-index: 1; flex: 0 0 64px; width: 64px; height: 96px; border-radius: 2px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px -10px rgba(0,0,0,.8); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.qzi-card:hover .pi { transform: rotate(-4deg) scale(1.06); }
.qzi-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qzi-tx .cap { color: var(--cl); }
.qzi-t { font-size: 18px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: #f3f6fa; transition: text-shadow .3s; }
.qzi-card:hover .qzi-t { text-shadow: 0 0 14px var(--c); }
@media (max-width: 560px) {
  .qzi-feat { padding: 24px 20px 76px; }
  .qzi-go { width: 100%; text-align: center; }
  .qzi-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .qzi-feat, .qzi-card, .qzi-bg, .qzi-hz, .qzi-card .pi, .qzi-fmoon { transition: none; }
}
.qz-lab { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #f3f6fa; text-shadow: 0 0 14px var(--hc); }
.pg-quiz .foot-hz { margin-top: 56px; }

/* ------------------------------------------------------------------ 404 */
.pg-404 .foot-hz { margin-top: 56px; }
.nf { position: relative; overflow: hidden; min-height: 660px; display: flex; flex-direction: column; }
.nf-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(8px) saturate(1.1); transform: scale(1.15); animation: nfkb 40s ease-in-out infinite alternate; }
@keyframes nfkb { from { transform: scale(1.15) translate(0,0); } to { transform: scale(1.26) translate(-2%,-1%); } }
.nf-tint { position: absolute; inset: 0; background: rgba(196,22,28,.6); mix-blend-mode: color; animation: nfred 7s ease-in-out infinite; }
@keyframes nfred { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.nf-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #08090b 0%, rgba(8,9,11,.35) 18%, rgba(8,9,11,.35) 70%, rgba(8,9,11,.9) 100%), radial-gradient(70% 65% at 50% 42%, rgba(8,9,11,.25) 0%, rgba(8,9,11,.85) 85%); }
/* a failing projector bulb: irregular dips, faster when you hover */
.nf-bulb { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; animation: nfbulb 9s steps(1) infinite; }
@keyframes nfbulb { 0%, 100% { opacity: 0; } 11% { opacity: .32; } 11.6% { opacity: 0; } 12.4% { opacity: .5; } 13% { opacity: .08; } 13.6% { opacity: 0; } 47% { opacity: 0; } 47.5% { opacity: .22; } 48% { opacity: 0; } 71% { opacity: 0; } 71.4% { opacity: .6; } 72.2% { opacity: .12; } 72.8% { opacity: .4; } 73.5% { opacity: 0; } }
.nf:hover .nf-bulb { animation-duration: 3.2s; }
.nf-frost { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s ease; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(200,225,255,.18) 80%, rgba(230,242,255,.38) 100%); box-shadow: inset 0 0 120px rgba(210,232,255,.22); }
.nf:hover .nf-frost { opacity: 1; }
.nf-in { position: relative; flex: 1 1 auto; width: 100%; max-width: 860px; margin: 0 auto; padding: 72px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
/* the new moon: hover it and a ghostly crescent slowly shows */
.nf-nmw { position: relative; width: 110px; height: 110px; flex: 0 0 auto; }
.nf-nm { display: block; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #121a26 0%, #080b11 70%); box-shadow: inset 0 0 0 0 rgba(233,240,249,0), inset 0 0 0 1px rgba(232,240,252,.38), 0 0 0 1px rgba(232,240,252,.06), 0 0 46px rgba(224,72,78,.28), 0 0 120px rgba(150,190,240,.12); transition: box-shadow 2.8s cubic-bezier(.22,1,.36,1); animation: nfhalo 6s ease-in-out infinite; }
@keyframes nfhalo { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 16px rgba(224,72,78,.35)); } }
.nf-nmw:hover .nf-nm { box-shadow: inset -22px 0 0 0 rgba(233,240,249,.30), inset 0 0 0 1px rgba(232,240,252,.5), 0 0 0 1px rgba(232,240,252,.1), 0 0 60px rgba(224,72,78,.4), 0 0 140px rgba(170,205,250,.3); }
.nf-nmw::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,240,255,.18), rgba(230,240,255,0)); opacity: 0; transform: scale(.8); transition: opacity 2.2s ease .4s, transform 2.6s cubic-bezier(.22,1,.36,1) .4s; pointer-events: none; }
.nf-nmw:hover::after { opacity: 1; transform: scale(1.15); }
.nf-h1 { margin: 0; font-size: clamp(36px, 6vw, 72px); line-height: 1.08; text-wrap: balance; filter: drop-shadow(0 0 24px rgba(224,72,78,.25)); transition: filter .8s; animation-delay: 1.5s; }
.nf:hover .nf-h1 { filter: drop-shadow(0 0 34px rgba(224,72,78,.5)); }
.nf-sub { font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: #9aa0a8; }
.nf-p { margin: 6px 0 0; max-width: 560px; font-size: 16px; line-height: 1.65; color: #d6dbe2; text-wrap: pretty; }
.nf-srch { display: flex; width: 100%; max-width: 520px; margin-top: 6px; border: 1px solid rgba(207,224,255,.3); background: rgba(8,9,11,.6); transition: border-color .3s, box-shadow .4s; }
.nf-srch:hover { border-color: rgba(207,224,255,.55); }
.nf-srch:focus-within { border-color: #cfe0ff; box-shadow: 0 0 0 1px rgba(207,224,255,.35), 0 0 30px rgba(170,205,250,.25); }
.nf-srch input { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: #eef0f3; font-family: inherit; font-size: 16px; padding: 14px 16px; outline: none; }
.nf-srch input::placeholder { color: #8d96a3; }
.nf-srch .btn { padding: 14px 22px; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.nf-chip { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #c3c8cf; padding: 9px 14px; border: 1px solid rgba(207,224,255,.24); background: rgba(8,9,11,.45); transition: border-color .3s, color .3s, box-shadow .4s, transform .45s cubic-bezier(.34,1.56,.64,1), background .3s; }
.nf-chip:hover { transform: translateY(-3px); border-color: var(--c, #cfe0ff); color: #fff; background: rgba(8,9,11,.7); box-shadow: 0 0 0 1px var(--c, #cfe0ff), 0 0 24px var(--g, rgba(170,205,250,.35)); }
.nf-chip.film { color: #eef3fa; border-color: var(--g); box-shadow: 0 0 14px var(--w); }
/* search results */
.nf-res { width: 100%; max-width: 720px; margin-top: 10px; text-align: left; display: flex; flex-direction: column; gap: 22px; }
.nf-res h2 { margin: 0 0 6px; font-weight: 300; font-size: 22px; letter-spacing: .16em; text-transform: uppercase; }
.nf-rg { display: flex; flex-direction: column; }
.nf-ri { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(8,9,11,.5); transition: background .4s, box-shadow .4s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.nf-ri:hover { background: rgba(8,9,11,.75); box-shadow: inset 2px 0 0 var(--c), 0 0 22px var(--g); transform: translateX(4px); }
.nf-ri .pi { flex: 0 0 auto; width: 32px; height: 48px; border-radius: 2px; background-size: cover; background-position: center; }
.nf-ri .pi.wide { width: 64px; height: 36px; }
.nf-ri .rt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nf-ri .rt b { font-size: 16px; font-weight: 500; color: #eef0f3; }
.nf-ri .rt span { font-size: 12px; letter-spacing: .1em; color: #9aa0a8; }
.nf-none { margin: 0; padding: 18px; border: 1px dashed rgba(207,224,255,.25); color: #c3c8cf; font-size: 15px; text-align: center; }
/* rowhouse horizon: lamps flicker; hover and three come fully on while one sputters out */
.nf-rows { position: relative; }
.nf-lamp { position: absolute; top: calc(110px - 3.0625vw); width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ffe9c4; box-shadow: 0 0 8px 3px rgba(255,214,150,.55), 0 0 26px 8px rgba(255,190,120,.22); opacity: .6; animation: nfflick var(--t) steps(1) infinite; }
@keyframes nfflick { 0%, 100% { opacity: .6; } 8% { opacity: .25; } 10% { opacity: .7; } 52% { opacity: .55; } 54% { opacity: .2; } 55% { opacity: .65; } }
.nf:hover .nf-lamp { opacity: 1; animation: none; box-shadow: 0 0 10px 4px rgba(255,220,160,.8), 0 0 40px 14px rgba(255,190,120,.35); transition: opacity .4s, box-shadow .6s; }
.nf:hover .nf-lamp.die { animation: nfdie 2.6s steps(1) forwards; }
@keyframes nfdie { 0% { opacity: 1; } 12% { opacity: .2; } 16% { opacity: .9; } 30% { opacity: .1; } 34% { opacity: .75; } 52% { opacity: .05; } 56% { opacity: .45; } 70% { opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 1179px) { .nf-lamp { display: none; } }

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  .pg-head { padding-top: 28px; }
  .nl-clab { right: 16px; top: 8px; font-size: 10px; letter-spacing: .24em; }
  .nl-lead { padding: 20px 20px 84px; gap: 24px; }
  .nl-lhz { height: 64px; }
  .nl-pp { flex-basis: 100%; aspect-ratio: 3 / 2; }
  .nl-pp img.fill { object-position: 50% 20%; }
  .nl-lt { font-size: 30px; }
  .nl-dek { font-size: 16px; }
  .nl-splash figure { margin-bottom: 40px; }
  .nl-row { margin: 0; padding: 22px 0; }
  .nl-row::before { left: 0; right: 0; }
  .nl-row:hover { transform: none; }
  .nl-th { flex-basis: 100%; }
  .nl-rh { font-size: 20px; }
  .yv-in { padding-top: 32px; padding-bottom: 40px; }
  .yv-orb, .yv-orb img { width: 64px; height: 64px; }
  .yv-qf { padding-left: 18px; }
  .yv-fp .pin { padding: 10px; }
  .yv-stage { height: 96px; }
  .yv-rsp > .hz { height: 72px !important; }
  .yv-rin { padding-bottom: 100px; }
  .bi-hin { padding-top: 32px; padding-bottom: 48px; }
  .bi-frame { flex-basis: 100%; max-width: 220px; min-width: 0; margin: 0 auto; }
  .bi-ngrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .bi-stub { padding: 18px 18px 16px; }
  .bi-bv { font-size: 40px; }
  .bi-bv.sm { font-size: 28px; }
  .bi-bk { font-size: 11px; letter-spacing: .18em; }
  .bi-gmoon { width: 140px; height: 140px; right: -30px; }
  .bi-p { font-size: 17px; }
  .bi-tl { grid-template-columns: 70px 24px minmax(0,1fr); column-gap: 12px; }
  .bi-tp { display: none; }
  .bi-yr { font-size: 18px; }
  .bi-tt { font-size: 16px; }
  .bi-td { font-size: 14px; }
  .bi-splash > .hz { height: 70px; }
  .bi-pw { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
  .qz-card { padding: 22px 18px; }
  .qz-opt { font-size: 16px; padding: 13px 14px; }
  .qz-stage { height: 84px; }
  .nf { min-height: 0; }
  .nf-in { padding: 48px 16px 32px; }
  .nf-nmw, .nf-nm { width: 88px; height: 88px; }
  .nf-srch .btn { padding: 14px 14px; letter-spacing: .14em; }
  .nf-rows .hz { height: 80px !important; }
}

/* ---------- Contact ---------- */
.ct { max-width: 860px; padding-bottom: 20px; }
.ct-notice { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; margin: 6px 0 34px; border: 1px solid rgba(207,224,255,.35); border-left: 3px solid #cfe0ff; border-radius: 4px; background: linear-gradient(120deg, rgba(40,70,120,.28), rgba(15,26,44,.5)); box-shadow: 0 0 40px rgba(120,160,230,.12); }
.ct-notice p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #c9d2de; }
.ct-nt { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; color: #fff; }
.ct-moon { flex: 0 0 34px; height: 34px; border-radius: 50%; margin-top: 2px; background: #0f1a2c; box-shadow: inset -12px 0 0 0 #e9f0f9, 0 0 16px rgba(170,205,250,.45); }
.ct-form { display: flex; flex-direction: column; gap: 22px; }
.ct-row { display: flex; flex-wrap: wrap; gap: 22px; }
.ct-row .ct-f { flex: 1 1 260px; }
.ct-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-f > span { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #9dbbe0; }
.ct-f > span i { font-style: normal; font-weight: 400; letter-spacing: .08em; text-transform: none; color: #8d96a3; }
.ct-f input, .ct-f textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #eef0f3; background: #12151b; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; padding: 13px 14px; transition: border-color .3s, box-shadow .3s; }
.ct-f textarea { resize: vertical; min-height: 170px; line-height: 1.55; }
.ct-f input:focus, .ct-f textarea:focus { outline: none; border-color: #9dbbe0; box-shadow: 0 0 0 3px rgba(157,187,224,.18), 0 0 24px rgba(157,187,224,.15); }
.ct-f [aria-invalid="true"] { border-color: #e07a6a; }
.ct-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: #dfe4ea; cursor: pointer; }
.ct-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #9dbbe0; }
.ct-err { font-size: 14px; color: #f0a093; }
.ct-formerr { margin: 0; padding: 12px 14px; border: 1px solid rgba(240,160,147,.4); border-radius: 3px; }
.ct-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-done { padding: 26px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: #12151b; }
.ct-done strong { font-size: 20px; font-weight: 500; color: #fff; }
.ct-done p { margin: 10px 0 20px; color: #c9d2de; line-height: 1.6; }
.pg-contact .foot-hz { margin-top: 64px; }