:root{color-scheme:dark;--night:#071020;--cream:#fff;--muted:#e0e7f1;--gold:#f6c34f;--gold-bright:#ffe17c;--gold-deep:#bd761d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip-link{position:absolute;z-index:20;top:-5rem;left:1rem;padding:.75rem 1rem;background:#fff;color:#111}
.skip-link:focus{top:1rem}
.backdrop{position:fixed;inset:-3%;z-index:0;background:linear-gradient(90deg,rgba(3,10,23,.75),rgba(4,12,29,.36) 50%,rgba(3,10,23,.72)),url("./assets/manger-king-sky.png") center/cover no-repeat;animation:sky-drift 24s ease-in-out infinite alternate;will-change:transform}
.backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,20,.18),rgba(3,8,20,.04) 38%,rgba(3,8,20,.86) 100%)}
@keyframes sky-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-.8%,.5%,0)}}
.page{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.masthead{width:min(1160px,calc(100% - 42px));margin:0 auto;padding:clamp(10px,1.7dvh,18px) 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-bottom:1px solid rgba(246,195,79,.34)}
.artist-link{text-decoration:none;font-family:"Barlow Condensed",Impact,sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:.095em;white-space:nowrap}
.artist-link span{color:var(--gold-bright)}
.masthead-note,.eyebrow,.presave-kicker{font-size:.69rem;font-weight:700;letter-spacing:.2em}
.masthead-note{color:rgba(255,255,255,.82);text-align:right}
main{width:min(1060px,calc(100% - 42px));margin:0 auto;padding:clamp(8px,1.5dvh,18px) 0;flex:1;display:flex;flex-direction:column;justify-content:center}
.intro{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2dvw,24px);min-height:0;margin-bottom:clamp(7px,1.3dvh,14px)}
.cover{width:clamp(68px,11dvh,118px);height:clamp(68px,11dvh,118px);flex:none;object-fit:cover;border:1px solid rgba(255,218,111,.85);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 40px rgba(246,180,49,.22)}
.intro-copy{min-width:0}
.eyebrow{color:var(--gold-bright);margin:0 0 7px}
.eyebrow span{color:rgba(255,255,255,.4);padding:0 .35em}
h1,h2{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;text-transform:uppercase}
h1{font-size:clamp(2.5rem,8dvh,5rem);line-height:.88;letter-spacing:.005em;margin:0;color:#fff;text-shadow:0 6px 22px rgba(0,0,0,.35)}
.intro-copy>p:last-child{color:var(--muted);font-size:clamp(.76rem,1.6dvh,.94rem);margin:8px 0 0}
.video-section{width:100%;margin:0 auto;text-align:center}
.video-frame{position:relative;overflow:hidden;width:min(100%,82dvh,980px);aspect-ratio:16/9;margin-inline:auto;border:2px solid rgba(255,215,106,.84);border-radius:14px;background:#080e19 url("./assets/the-manger-king-artwork.jpg") center/cover no-repeat;box-shadow:0 28px 65px rgba(0,0,0,.5),0 0 55px rgba(237,170,44,.2)}
.video-frame iframe{display:block;width:100%;height:100%;border:0;background:#080e19}
.video-poster{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;color:#fff;cursor:pointer;background-image:linear-gradient(180deg,rgba(3,9,24,.09),rgba(3,9,24,.2) 58%,rgba(3,9,24,.76)),url("https://i.ytimg.com/vi/NnxOYLEER8s/maxresdefault.jpg"),url("./assets/manger-king-sky.png");background-position:center,50% 50%,center;background-size:cover,106% auto,cover;background-repeat:no-repeat;isolation:isolate;animation:poster-camera 17s ease-in-out infinite alternate}
.video-poster:before{content:"";position:absolute;z-index:-1;inset:-5%;background:url("./assets/manger-king-sky.png") center/cover no-repeat;opacity:.24;mix-blend-mode:screen;animation:poster-nebula 13s ease-in-out infinite alternate;pointer-events:none}
.video-poster:after{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 39% 59% at 50% 49%,rgba(255,224,170,.22),transparent 78%),radial-gradient(ellipse at 50% 50%,transparent 13%,rgba(2,7,20,.15) 48%,rgba(2,7,20,.65) 100%);box-shadow:inset 0 0 100px rgba(0,0,0,.55);animation:spotlight-swell 8s ease-in-out infinite alternate;pointer-events:none}
.poster-stars{position:absolute;z-index:1;inset:-10%;background-image:radial-gradient(2px 2px at 11% 23%,#fff,transparent),radial-gradient(2px 2px at 72% 17%,#fff,transparent),radial-gradient(1px 1px at 87% 38%,#fff,transparent),radial-gradient(2px 2px at 30% 76%,#fff,transparent),radial-gradient(1px 1px at 56% 59%,#fff,transparent),radial-gradient(2px 2px at 91% 82%,#fff,transparent),radial-gradient(1px 1px at 18% 54%,#fff,transparent);opacity:.7;filter:drop-shadow(0 0 5px #c0dafa);animation:poster-stars 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes poster-nebula{from{transform:scale(1.01) translate3d(-1%,0,0);opacity:.2}to{transform:scale(1.08) translate3d(1%,1%,0);opacity:.32}}
@keyframes poster-stars{from{transform:translate3d(-1.5%,-1%,0);opacity:.38}to{transform:translate3d(1.5%,1%,0);opacity:.85}}
@keyframes poster-camera{from{background-size:cover,106% auto,cover;background-position:center,49% 50%,center}to{background-size:cover,115% auto,cover;background-position:center,53% 47%,center}}
@keyframes spotlight-swell{from{opacity:.65}to{opacity:1}}
.poster-play{position:relative;z-index:2;display:grid;place-items:center;width:clamp(96px,10vw,132px);height:clamp(65px,7vw,88px);border:2px solid rgba(255,255,255,.9);border-radius:19px;background:linear-gradient(145deg,#ff263d,#e60024);box-shadow:0 0 0 11px rgba(255,255,255,.13),0 20px 48px rgba(0,0,0,.68),0 0 58px rgba(255,30,61,.55);animation:play-glow 3.5s ease-in-out infinite;transition:transform .25s ease,box-shadow .25s ease}
.poster-play span{display:block;width:0;height:0;margin-left:8px;border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:27px solid #fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
@keyframes play-glow{50%{box-shadow:0 0 0 16px rgba(255,255,255,.09),0 23px 50px rgba(0,0,0,.72),0 0 76px rgba(255,30,61,.7)}}
.video-poster:hover .poster-play,.video-poster:focus-visible .poster-play{transform:scale(1.1);box-shadow:0 0 0 15px rgba(255,255,255,.16),0 23px 50px rgba(0,0,0,.7),0 0 78px rgba(255,30,61,.78)}
.video-poster:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.poster-caption{position:absolute;z-index:2;bottom:6%;font-size:clamp(.7rem,1.4vw,1rem);font-weight:800;letter-spacing:.18em;text-shadow:0 2px 10px #000}
.youtube-fallback{display:inline-block;margin:clamp(4px,.8dvh,9px) auto 0;color:rgba(255,255,255,.75);font-size:.7rem;text-underline-offset:4px}
.youtube-fallback:hover,.youtube-fallback:focus-visible{color:var(--gold-bright)}
.presave{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(7px,1.2dvh,14px) 8px 0;background:radial-gradient(ellipse 62% 110% at 50% 70%,rgba(246,178,45,.12),transparent 80%)}
.presave-kicker{color:var(--gold-bright);margin:0 0 2px}
h2{font-size:clamp(1.7rem,4.1dvh,2.65rem);line-height:1;letter-spacing:.015em;margin:0 0 9px}
h2 em{font-style:normal;color:var(--gold-bright)}
.presave-button{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;width:min(410px,100%);min-height:54px;padding:9px 18px;border:2px solid var(--gold-bright);border-radius:10px;background-image:radial-gradient(ellipse at 50% 45%,rgba(25,77,125,.16),rgba(2,9,24,.78) 83%),linear-gradient(105deg,rgba(2,10,27,.76),rgba(8,32,68,.48),rgba(2,10,27,.8)),url("./assets/manger-king-sky.png");background-size:cover,cover,115% auto;background-position:center,center,49% 50%;background-repeat:no-repeat;color:#fff;text-decoration:none;text-align:center;text-shadow:0 2px 9px rgba(0,0,0,.9);font-weight:800;font-size:1.05rem;letter-spacing:.02em;box-shadow:0 16px 30px rgba(0,0,0,.52),0 0 36px rgba(246,184,55,.34),inset 0 0 22px rgba(255,220,130,.12);animation:cta-universe 13s ease-in-out infinite alternate;transition:transform .2s ease,box-shadow .2s ease}
.presave-button:before{content:"";position:absolute;z-index:0;inset:-10%;background-image:radial-gradient(2px 2px at 8% 25%,#fff,transparent),radial-gradient(1px 1px at 22% 74%,#fff,transparent),radial-gradient(2px 2px at 39% 16%,#ffe5aa,transparent),radial-gradient(1px 1px at 58% 65%,#fff,transparent),radial-gradient(2px 2px at 75% 32%,#fff,transparent),radial-gradient(1px 1px at 92% 70%,#ffe5aa,transparent);opacity:.75;filter:drop-shadow(0 0 4px #c3e5ff);animation:cta-stars 7s ease-in-out infinite alternate;pointer-events:none}
.presave-button:after{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 42% 120% at 50% 50%,rgba(89,153,220,.24),transparent 77%);animation:cta-glow 6s ease-in-out infinite alternate;pointer-events:none}
.presave-button span{position:relative;z-index:1}
@keyframes cta-universe{from{background-size:cover,cover,115% auto;background-position:center,center,48% 50%}to{background-size:cover,cover,132% auto;background-position:center,center,54% 47%}}
@keyframes cta-stars{from{transform:translate3d(-1%,0,0);opacity:.4}to{transform:translate3d(1.5%,-4%,0);opacity:.9}}
@keyframes cta-glow{from{opacity:.45}to{opacity:1}}
.presave-button:hover,.presave-button:focus-visible{transform:translateY(-2px);box-shadow:0 19px 34px rgba(0,0,0,.45),0 0 42px rgba(246,184,55,.5)}
.presave-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.service-note{color:rgba(228,234,245,.7);font-size:.7rem;margin:5px 0 0}
.footer{padding:9px 0 11px;text-align:center;border-top:1px solid rgba(246,195,79,.23)}
.footer a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.54);font-size:.68rem;text-decoration:none;letter-spacing:.06em}
.footer a:hover{color:#fff}
.footer img{width:18px;height:18px;object-fit:contain}
@media(max-width:650px){.masthead{width:calc(100% - 30px);padding:10px 0}.artist-link{font-size:1.02rem}.masthead-note{font-size:.55rem;letter-spacing:.12em}main{width:calc(100% - 24px);padding:8px 0}.intro{gap:10px;margin-bottom:10px;justify-content:flex-start}.cover{width:clamp(58px,10dvh,78px);height:clamp(58px,10dvh,78px)}.eyebrow{font-size:.5rem;letter-spacing:.1em;margin-bottom:5px}h1{font-size:clamp(2rem,9vw,3rem)}.intro-copy>p:last-child{font-size:.71rem;line-height:1.25;margin:5px 0 0}.video-frame{width:100%;border-radius:9px}.presave{padding-top:8px}h2{margin-bottom:7px}.presave-button{min-height:48px}.service-note{font-size:.66rem}.footer{padding:7px 0 8px}}
@media(max-width:380px){.masthead-note{max-width:90px;line-height:1.2}.eyebrow{font-size:.47rem}h1{font-size:2rem}.presave-kicker{font-size:.58rem}h2{font-size:1.6rem}}
@media(min-width:651px) and (max-height:650px){.video-frame{width:min(100%,72dvh)}}
@media(max-height:520px){.masthead{padding:5px 0}.masthead-note{display:none}main{padding:3px 0}.intro{gap:8px;margin-bottom:4px}.cover{width:46px;height:46px}.eyebrow,.intro-copy>p:last-child,.presave-kicker,.service-note{display:none}h1{font-size:clamp(1.5rem,6vw,2rem)}.video-frame{width:min(100%,58dvh)}.youtube-fallback{margin:2px auto 0;font-size:.62rem}.presave{padding-top:4px}h2{font-size:1.35rem;margin-bottom:5px}.presave-button{min-height:43px;padding:7px 13px;font-size:.9rem}.footer{padding:4px 0 5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.backdrop,.presave-button,.presave-button:before,.presave-button:after,.video-poster,.video-poster:before,.video-poster:after,.poster-stars,.poster-play{animation:none}.presave-button,.poster-play{transition:none}}