@font-face {
  font-family: Archivo;
  src: url(/fonts/archivo-wordmark.woff2) format('woff2');
  font-weight: 500;
  font-stretch: 125%;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url(/fonts/archivo-text.woff2) format('woff2');
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; }
html { background: #000; -webkit-text-size-adjust: 100%; }
body {
  background: #000;
  color: #fff;
  font: 400 15px/1.6 Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
::selection { background: #fff; color: #000; }

main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: clip;
}

.mark {
  display: block;
  width: clamp(76px, 15vmin, 128px);
  height: auto;
  overflow: visible;
}

.word {
  margin-top: clamp(28px, 5.5vmin, 48px);
  font-size: clamp(27px, 4.6vmin, 42px);
  font-weight: 500;
  font-stretch: 125%;
  line-height: 1;
  white-space: nowrap;
}
.line { display: block; letter-spacing: .05em; margin-right: -.05em; }
.line > span { display: inline-block; }
.sub {
  margin-top: 1.05em;
  font-size: max(10px, .29em);
  letter-spacing: .46em;
  margin-right: -.46em;
}

.desc {
  margin-top: clamp(28px, 5.5vmin, 48px);
  max-width: 21.5em;
  color: #a8a8a8;
  text-wrap: balance;
}

/* Tall tap target without changing the visual rhythm. */
.email {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  padding: 10px 2px;
  color: #fff;
  text-decoration: none;
}
.email::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.email:hover::after { transform: scaleX(1); }
.email:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
/* On touch the underline is always on, since there is no hover to reveal it as a link. */
@media (hover: none) { .email::after { transform: scaleX(1); } }

/* Intro. Everything hidden here only applies when the head script added .intro. */
.intro .mark { visibility: hidden; }
.intro.play .mark { visibility: visible; }
.intro .line > span, .intro .desc, .intro .email { opacity: 0; }

.intro.play .line > span {
  animation: resolve 1150ms cubic-bezier(.16, 1, .3, 1) 780ms both;
  will-change: transform, filter, opacity;
}
.intro.play .sub > span { animation-duration: 950ms; animation-delay: 1120ms; }
.intro.play .desc { animation: arrive 800ms cubic-bezier(.22, 1, .36, 1) 1680ms both; }
.intro.play .email { animation: arrive 800ms cubic-bezier(.22, 1, .36, 1) 1860ms both; }

@keyframes resolve {
  from { opacity: 0; filter: blur(.34em); transform: translateX(calc(var(--d) * .95em)); }
  45% { opacity: 1; }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes arrive {
  from { opacity: 0; transform: translateY(.45em); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .email::after { transition: none; }
}