@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/jost.woff2) format('woff2')}

:root{
  --abyss:#02040f;
  --midnight:#06103a;
  --cobalt:#2a52a6;
  --ion:#8db6ff;
  --starlight:#edf1fb;
  --haze:#8f9dc4;
  --pad:clamp(20px,3.4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{height:100%;background:var(--abyss);color-scheme:dark;-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100%;
  font-family:'Jost','Century Gothic','Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  color:var(--starlight);
  background:radial-gradient(120% 90% at 50% 40%,var(--midnight) 0%,var(--abyss) 68%) fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection{background:var(--cobalt);color:#fff}

.scene{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1100ms ease}
.has-gl .scene{opacity:1}

.stage{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  gap:clamp(18px,3vh,36px);
  padding:var(--pad);
  padding-bottom:max(var(--pad),env(safe-area-inset-bottom));
}

.lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,4.2vh,48px);
  min-height:0;
}

.mark{
  position:relative;
  height:min(42vh,92vw);
  height:min(42svh,92vw);
  aspect-ratio:240/335;
}
.mark-flat{display:block;width:100%;height:100%}
.has-gl .mark-flat{visibility:hidden}

.word{
  margin:0;
  display:flex;
  gap:.56em;
  font-size:clamp(25px,3.1vw,44px);
  font-weight:500;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.credits{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:24px;
  color:var(--haze);
  font-size:clamp(14px,1.02vw,16px);
}

.credits p{margin:0}
.what{color:var(--starlight);font-size:clamp(16px,1.25vw,19px);max-width:24ch;line-height:1.3;text-wrap:balance}
.legal{margin-top:.5em}
.product{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.2em}

.product a{
  color:var(--starlight);
  font-size:clamp(18px,1.5vw,23px);
  font-weight:500;
  letter-spacing:.01em;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.32em;
  text-decoration-color:rgba(141,182,255,.5);
  transition:color 200ms ease,text-decoration-color 200ms ease;
}
.product a:hover{color:#fff;text-decoration-color:var(--ion)}
.product a:focus-visible{outline:2px solid var(--ion);outline-offset:5px;border-radius:3px}

.js .ch{
  opacity:0;
  transform:translateY(.42em);
  filter:blur(9px);
  transition:opacity 900ms var(--ease),transform 1100ms var(--ease),filter 900ms var(--ease);
  transition-delay:calc(var(--i) * 75ms + 140ms);
}
.js .credits > *{opacity:0;transition:opacity 1200ms ease 1000ms}
.is-merged .ch{opacity:1;transform:none;filter:none}
.is-merged .credits > *{opacity:1}

@media (max-width:760px){
  .credits{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .what{max-width:none}
  .product{align-items:center;text-align:center}
  .mark{height:min(38vh,104vw);height:min(38svh,104vw)}
}

@media (max-height:520px){
  .mark{height:min(46vh,60vw);height:min(46svh,60vw)}
  .lockup{gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .scene,.js .ch,.js .credits > *{transition:none}
}