@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --black:#030404; --white:#e8e8e5; --muted:#929493; --line:rgba(255,255,255,.12);
  --serif:'Cormorant Garamond',serif; --sans:'Montserrat',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);font-weight:300}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
.site-header{height:70px;position:fixed;z-index:20;inset:0 0 auto;background:#000;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}



.main-nav{display:flex;align-items:center;justify-content:center;gap:42px;font-size:10px;letter-spacing:3px}.main-nav a{opacity:.85;transition:.25s}.main-nav a:hover{opacity:1}



.hero{height:100vh;min-height:680px;position:relative;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.86)),url('images/hero.jpg') center/cover;}
.hero-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero h1{font-family:Arial, Helvetica, sans-serif;font-size:clamp(50px,8vw,105px);font-weight:400;letter-spacing:.35em;margin:60px 0 0 .35em;text-align:center}
.scroll-cue{position:absolute;bottom:52px;text-align:center;font-size:7px;letter-spacing:4px;color:#bdbdbb}
.scroll-cue i{height:30px;width:1px;background:#aaa;display:block;margin:9px auto 0}

.section{border-bottom:1px solid var(--line)}
.release{min-height:660px;padding:95px 7%;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.70)),url('images/visual-main.jpg') center/cover}
.release-copy{text-align:center}
.release-copy .platforms{justify-content:center}
.release-copy .outline-btn{margin-left:auto;margin-right:auto}
.cover-art{margin-left:auto;margin-right:auto}
.eyebrow{font-size:9px;letter-spacing:4px;color:#aaa;margin:0 0 24px;font-weight:500}
h2{font-family:var(--serif);font-weight:400;letter-spacing:.14em;font-size:44px;line-height:1.05;margin:0 0 24px}
.description{font-size:14px;line-height:1.9;color:#aaa}
.platforms{display:grid;grid-template-columns:repeat(3,max-content);gap:22px 36px;margin:40px 0 34px;font-size:15px;color:#c8c8c5}
.platforms a{transition:.25s}.platforms a:hover{color:white;transform:translateY(-2px)}
.outline-btn{display:inline-flex;align-items:center;gap:28px;border:1px solid #555;padding:13px 25px;font-size:8px;letter-spacing:3px;transition:.3s}
.outline-btn:hover{background:#e8e8e5;color:#050505;border-color:#e8e8e5}
.cover-art{width:min(100%,450px);aspect-ratio:1;margin-left:auto;background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 35%),
url('images/darkdreamer.jpg') center/cover;position:relative;filter:grayscale(1)}
.cover-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.68))}
.cover-inner{position:absolute;z-index:1;inset:30px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;letter-spacing:6px;font-size:8px}
.cover-inner strong{font-family:var(--serif);font-size:115px;font-weight:400;letter-spacing:0;opacity:.75}
.cover-inner small{font-size:7px;letter-spacing:4px} 
.visuals{min-height:720px;padding:75px 6%;display:grid;grid-template-columns:30% 70%;gap:35px;background:linear-gradient(rgba(0,0,0,.84),rgba(0,0,0,.88)),url('images/visual-1.jpg') center/cover}
.visual-copy{display:flex;flex-direction:column;padding:40px 0 20px 8px}
.visual-copy h2{font-size:41px}.text-link,.watch-link{background:none;border:0;padding:0;text-align:left;font-size:8px;letter-spacing:3px;text-decoration:underline;text-underline-offset:8px;cursor:pointer;width:max-content}
.counter{margin-top:auto;font-size:8px;letter-spacing:2px;color:#aaa;display:flex;gap:18px;align-items:center}
.counter button{border:0;background:none;cursor:pointer;font-size:16px;color:#bbb}
.visual-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;min-height:600px}
.visual-card{background-position:center;background-size:cover;filter:grayscale(1);transition:.6s}
.visual-card:hover{filter:grayscale(.4)}
.visual-main{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.45)),url('images/Horizon.jpg')}
.visual-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}
.visual-small:nth-child(1){background-image:url('images/visual-2.jpg')}
.visual-small:nth-child(2){background-image:url('images/visual-4.jpg')}
.visual-small:nth-child(3){background-image:url('images/visual-5.jpg')}

.video-section{height:600px;position:relative;display:flex;align-items:center;padding:0 7%;overflow:hidden}
.video-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.48),rgba(0,0,0,.82)),url('images/vidbg.jpg') center/cover;filter:grayscale(1)}
.video-copy{position:relative;z-index:1}.video-copy h2{font-size:38px;margin-bottom:6px}.video-copy>p:not(.eyebrow){font-size:14px;color:#bbb}
.play-button{width:58px;height:58px;border-radius:50%;border:1px solid #aaa;background:rgba(0,0,0,.25);display:block;margin:28px auto;cursor:pointer;font-size:16px;padding-left:5px;transition:.3s}.play-button:hover{background:white;color:black}
.watch-link{display:block;color:#ddd;text-decoration:none;font-size:20px;letter-spacing:3px}

.closing{height:430px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.closing-bg{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.90)),url('images/closing-bg.jpg') center/cover;filter:grayscale(1)}
.closing-content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:45px}
.closing-buttons{display:flex;gap:20px}

footer{height:125px;padding:38px 6%;display:flex;justify-content:center;align-items:center;font-size:10px;letter-spacing:3px;color:#8f908e;background-color: #000;text-align:center}
footer span{font-size:9px;letter-spacing:2px;line-height:3}


@media(max-width:800px){
  .site-header{height:60px}
  .mobile-menu.open{max-height:260px}.mobile-menu a{padding:19px 24px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:3px}
  .hero{min-height:620px}.hero h1{font-size:44px;letter-spacing:.2em}.release{grid-template-columns:1fr;padding:75px 8%;gap:35px}.release-copy{text-align:center}.release-copy .platforms{justify-content:center}.cover-art{margin:auto}
  .platforms{grid-template-columns:repeat(2,1fr);gap:20px;font-size:10px}.visuals{grid-template-columns:1fr;padding:65px 7%}.visual-copy{padding:0}.visual-grid{min-height:470px;grid-template-columns:1.35fr 1fr}.video-section{height:520px;padding:0 8%}
  footer{padding:30px 7%;height:auto}.socials{gap:14px}
}
@media(max-width:480px){
  .hero h1{font-size:31px}.cover-inner strong{font-size:80px}.visual-grid{grid-template-columns:1fr}.visual-main{min-height:380px}.visual-stack{min-height:330px}.video-copy h2{font-size:28px}.closing{height:350px}
}


.release-copy h2,
.visual-copy h2,
.release-copy .description,
.visual-copy .description {
  white-space: nowrap;
  max-width: 100%;
}
.release-copy h2,
.visual-copy h2 {
  font-size: clamp(30px, 4vw, 44px);
}
.release-copy .description,
.visual-copy .description {
  font-size: clamp(10px, 1.25vw, 14px);
}
@media (max-width:800px){
  .site-header{height:60px}
  .main-nav{gap:18px;font-size:9px;letter-spacing:2px}
  .hero h1{font-size:44px}
  .release-copy h2,.visual-copy h2{font-size:clamp(25px,7vw,38px);letter-spacing:.09em}
  .release-copy .description,.visual-copy .description{font-size:clamp(9px,2.5vw,12px);letter-spacing:0}
  .video-copy h2{font-size:34px}
  .video-copy>p:not(.eyebrow){font-size:13px}
  .watch-link{font-size:20px}
  footer{font-size:10px}
  footer span{font-size:8px}
  .socials{font-size:18px}
}
@media (max-width:480px){
  .main-nav{gap:11px;font-size:8px;letter-spacing:1.5px}
  .hero h1{font-size:31px}
  .release-copy h2,.visual-copy h2{font-size:clamp(22px,7vw,32px)}
  .release-copy .description,.visual-copy .description{font-size:clamp(8px,2.2vw,10px)}
  .video-copy h2{font-size:30px}
  .video-copy>p:not(.eyebrow){font-size:13px}
  .watch-link{font-size:20px}
  footer{padding:30px 7%;font-size:9px}
  footer span{font-size:8px}
  .socials{gap:12px;font-size:18px}
}

@media(max-width:800px){
  .platforms{font-size:13px;gap:18px 24px}
  .socials{font-size:21px;gap:18px}
  footer span{font-size:9px}
}
@media(max-width:480px){
  .platforms{font-size:12px;gap:17px 18px}
  .socials{font-size:21px;gap:16px}
  footer span{font-size:9px}
}

.closing-socials{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:48px}
.closing-socials a{width:26px;height:26px;display:grid;place-items:center;color:#d6d6d2;opacity:.82;transition:.25s}
.closing-socials a:hover{opacity:1;transform:translateY(-2px)}
.closing-socials svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.closing-socials svg path{fill:none}
.closing-socials svg .dot{fill:currentColor;stroke:none}
.closing-socials a:nth-child(2) svg path{fill:currentColor;stroke:none}
.copyright{width:100%;text-align:center}
@media(max-width:800px){
  .closing-socials{gap:24px;margin-top:40px}
  .closing-socials a,.closing-socials svg{width:24px;height:24px}
}
@media(max-width:480px){
  .closing-socials{gap:22px;margin-top:36px}
  .closing-socials a,.closing-socials svg{width:23px;height:23px}
}