/* RESET */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}

/* CASLON */
@font-face{
  font-family:"F37Caslon";
  src:url("/assets/fonts/F37Caslon-Regular.woff2") format("woff2"),
      url("/assets/fonts/F37Caslon-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* TOKENS */
:root{
  --sans-text:"neue-haas-grotesk-text",sans-serif;
  --sans-display:"neue-haas-grotesk-display",sans-serif;
  --serif:"F37Caslon",serif;
}

/* BASE */
html,body{height:100%}
body{
  background:#000;
  color:#fff;
  overflow:hidden;
  font-family:var(--sans-text);
}

body.is-mobile{overflow:auto}
body.is-mobile .hero{position:sticky;top:0}

/* HERO */
.hero{position:relative;width:100vw;height:100vh}

.bg{position:absolute;inset:0;opacity:0;transition:opacity 500ms ease}
.bg.active{opacity:1}
.bg.is-image{background-size:cover;background-position:center}
.bg.is-video{width:100%;height:100%;object-fit:cover}

/* SCRIM */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,0.8);opacity:0;transition:opacity 250ms ease}
body.is-open .scrim{opacity:1}
body.is-mobile .scrim{opacity:var(--scrimOpacity,0)}

/* UI */
.ui{position:absolute;inset:0;padding:18px;z-index:3;pointer-events:none}

.ui-lead{
  pointer-events:auto;
  font-family:var(--serif);
  font-size:36px;
  line-height:38px;
  letter-spacing:-1.08px;
}

.ui-bottom{
  position:absolute;
  left:18px;right:18px;bottom:14px;
  display:flex;justify-content:space-between;
  font-family:var(--sans-display);
  font-weight:500;font-size:11px;
}

.info{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity 250ms ease;
}
body.is-open .info{opacity:1;pointer-events:auto}
body.is-mobile .info{opacity:var(--infoOpacity,0)}

.info-grid{
  position:absolute;top:160px;left:18px;right:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  font-family:var(--sans-text);
  font-size:13px;
}

.scroll-space{height:0}

@media(max-width:768px){
  .ui-lead{font-size:26px;line-height:28px;letter-spacing:-0.78px}
}
