:root{--ink:#16242c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
body{background:#c9d6de;color:var(--ink);font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}

/* the poster is painted by CSS, so it shows on first paint (before the video element has decided anything) */
.hero{position:fixed;inset:0;background:#c9d6de url(../media/hero-desktop-poster.jpg) center/cover no-repeat}
@media (max-aspect-ratio:4/5){.hero{background-image:url(../media/hero-mobile-poster.jpg)}}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent;
  opacity:0;transition:opacity 1.6s ease}
.hero video.live{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:#e9eef0;transition:opacity 2.4s cubic-bezier(.3,.1,.2,1);pointer-events:none}
body.on .hero::after{opacity:0}

.brand{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + clamp(28px,5.4vh,52px));display:flex;justify-content:center;pointer-events:none}
.brand h1{line-height:0}
.mark{width:clamp(196px,21vw,318px);height:auto;fill:var(--ink);overflow:visible;opacity:0;transform:translateY(-6px);filter:blur(5px);
  transition:opacity 2.6s ease .9s,transform 3s cubic-bezier(.2,.7,.2,1) .9s,filter 2.6s ease .9s}
body.on .mark{opacity:1;transform:none;filter:none}

.foot{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(22px,4.2vh,40px));text-align:center;
  opacity:0;transition:opacity 2.4s ease 2s;color:#fbfaf6;
  text-shadow:0 0 1px rgba(8,34,42,.35),0 1px 14px rgba(8,34,42,.55),0 0 34px rgba(8,34,42,.35)}
.foot::before{content:"";position:absolute;left:50%;top:50%;width:min(640px,96vw);height:170%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,40,48,.34),rgba(10,40,48,.16) 55%,rgba(10,40,48,0));filter:blur(6px)}
body.on .foot{opacity:1}
.foot{padding:0 20px}
.foot .line{font-style:italic;font-size:clamp(13px,1.1vw,15.5px);letter-spacing:.05em;line-height:1.55;opacity:.96;text-wrap:balance}
.foot .line span{display:block}
.foot .mail{display:inline-block;margin-top:.7em;font-size:clamp(9.5px,.74vw,10.5px);letter-spacing:.2em;color:inherit;text-decoration:none;
  opacity:.82;padding:6px 4px;border-bottom:1px solid transparent;transition:opacity .6s,border-color .6s}
.foot .mail:hover,.foot .mail:focus-visible{opacity:1;border-color:currentColor;outline:none}

@media (prefers-reduced-motion:reduce){
  .hero video{display:none}
  .mark,.foot,.hero::after{transition:opacity .6s ease}
  .mark{filter:none;transform:none}
}