:root {
  --bg: #000;
  --fg: #fff;
  --font: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --logo-width: min(38vw, 280px);
  --tagline-width: min(42vw, 300px);
  --content-width: min(100%, 960px);
  --form-width: min(100%, 34.5rem);
  --gap-logo: clamp(0.65rem, 1.7vh, 1.15rem);
  --gap-tagline: calc(clamp(0.7rem, 2vh, 1.4rem) + 5px);
  --form-font-size: calc(1.35rem - 2pt);
  --control-height: 3.4rem;
  --control-radius: 14px;
  --control-border: 3px;
  --form-gap: 12px;
  --accent: #cc0118;
  --bone-clearance: clamp(3.25rem, 8vh, 4.75rem);
  --mark-height: min(343px, calc((100vw - 2.5rem) * 872 / 1323));
  --photo-radius: 2px;
  color-scheme: dark;
}

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

html {
  background: var(--bg);
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.4;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bones sit on top of the page and ignore clicks. */

.bones {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.bones-top {
  top: 0;
  padding-top: calc(0.2rem + env(safe-area-inset-top));
  height: calc(0.2rem + env(safe-area-inset-top) + var(--bone-band, 3rem));
}

.bones-bottom {
  bottom: 0;
  padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
  height: calc(0.2rem + env(safe-area-inset-bottom) + var(--bone-band, 3rem));
}

.bone-row {
  display: flex;
  align-items: center;
  flex: none;
}

.cursor-bone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: clamp(34px, 4.8vw, 92px);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transform: translate3d(-100vw, -100vh, 0) translate(calc(-50% - 18px), calc(-100% - 10px)) rotate(-8deg);
}

.bone {
  display: block;
  height: auto;
  max-width: none;
  flex: none;
  transform-origin: center center;
  animation-name: bone-pose;
  animation-duration: 8s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-delay: var(--delay, 0s);
}

/*
  Each keyframe segment is four seconds (half of the 8s cycle).
  steps(1, end) holds that segment's starting pose for the whole
  segment, then jumps. There is no in-between position.
*/
@keyframes bone-pose {
  0% {
    transform: translate3d(0, var(--pose-y1), 0) rotate(var(--pose-r1)) scaleX(var(--flip));
    animation-timing-function: steps(1, end);
  }

  50% {
    transform: translate3d(0, var(--pose-y2), 0) rotate(var(--pose-r2)) scaleX(var(--flip));
    animation-timing-function: steps(1, end);
  }

  100% {
    transform: translate3d(0, var(--pose-y1), 0) rotate(var(--pose-r1)) scaleX(var(--flip));
  }
}

.hero {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  padding:
    calc(var(--bone-clearance) + env(safe-area-inset-top))
    calc(1.25rem + env(safe-area-inset-right))
    calc(var(--bone-clearance) + 1rem + env(safe-area-inset-bottom))
    calc(1.25rem + env(safe-area-inset-left));
}

.stack {
  width: var(--content-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mark {
  display: block;
  width: auto;
  height: var(--mark-height);
  max-width: none;
  margin: 0 0 clamp(0.75rem, 2vh, 1.15rem);
  border-radius: var(--photo-radius);
}

.logo,
.tagline {
  margin: 0;
}

.logo {
  margin-bottom: var(--gap-logo);
}

.tagline {
  margin-bottom: var(--gap-tagline);
}

.logo img {
  display: block;
  width: var(--logo-width);
  height: auto;
}

.tagline img {
  display: block;
  width: var(--tagline-width);
  height: auto;
}

.signup {
  position: relative;
  width: var(--form-width);
  margin: 0;
}

.fields {
  display: flex;
  align-items: center;
  gap: var(--form-gap);
  width: 100%;
}

.email-wrap,
.submit {
  position: relative;
  min-width: 0;
  height: var(--control-height);
}

.email-wrap {
  flex: 1.28 1 0;
}

.email-field {
  min-width: 0;
}

.field-art {
  position: absolute;
  pointer-events: none;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-mode: alpha;
}

.enter-bg,
.submit-bg {
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.enter-bg {
  -webkit-mask-image: url("../svg/enter-bg.svg");
  mask-image: url("../svg/enter-bg.svg");
}

.enter-txt,
.submit-label {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask-size: contain;
  mask-size: contain;
}

.enter-txt {
  width: 52%;
  height: 32%;
  -webkit-mask-image: url("../svg/enter-txt.svg");
  mask-image: url("../svg/enter-txt.svg");
}

.email-wrap:focus-within .enter-txt,
.email-wrap:not(:has(.email-field:placeholder-shown)) .enter-txt {
  display: none;
}

.email-field {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 14%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  caret-color: var(--fg);
  font-family: var(--font);
  font-size: var(--form-font-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.email-field::placeholder {
  color: transparent;
}

.email-wrap:hover .enter-bg,
.email-wrap:focus-within .enter-bg,
.email-wrap:active .enter-bg {
  background-color: var(--accent);
}

.email-field:hover,
.email-field:focus,
.email-field:focus-visible,
.email-field:active {
  background: transparent;
  outline: none;
}

.submit {
  flex: 1 1 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-family: var(--font);
  font-size: var(--form-font-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
}

.submit-bg {
  background-color: var(--accent);
  -webkit-mask-image: url("../svg/submit-bg.svg");
  mask-image: url("../svg/submit-bg.svg");
}

.submit-label {
  width: 72%;
  height: 52%;
  -webkit-mask-image: url("../svg/submit-txt.svg");
  mask-image: url("../svg/submit-txt.svg");
}

.submit-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.submit:hover .submit-bg,
.submit:active .submit-bg {
  background-color: #fff;
}

.submit:hover .submit-label,
.submit:active .submit-label {
  background-color: var(--accent);
}

.submit[data-sending] .submit-label {
  visibility: hidden;
}

.submit[data-sending] .submit-status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: #fff;
  white-space: nowrap;
}

.submit[data-sending]:hover .submit-status,
.submit[data-sending]:active .submit-status {
  color: var(--accent);
}

.email-field:focus,
.submit:focus {
  outline: none;
}

.submit:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

.submit:focus-visible {
  box-shadow: 0 0 0 2px var(--bg);
}

.submit:disabled {
  cursor: progress;
  opacity: 0.55;
}

.email-field:-webkit-autofill,
.email-field:-webkit-autofill:hover,
.email-field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out;
}

.form-message {
  margin: 0.95rem 0 0;
  min-height: 1.25em;
  padding: 0.4rem 0.75rem;
  background: transparent;
  color: #fff;
  text-align: center;
  font-size: var(--form-font-size);
  letter-spacing: 0;
}

.form-message:empty {
  display: none;
}

.form-message:focus {
  outline: none;
}

.form-message:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

.signup[data-state="success"] .fields {
  display: none;
}

.signup[data-state="success"] .form-message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-height);
  margin: 0;
  background: transparent;
  font-size: var(--form-font-size);
  letter-spacing: 0;
}

.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-height: 560px) {
  :root {
    --logo-width: min(34vw, 220px);
    --tagline-width: min(38vw, 240px);
    --gap-logo: 0.35rem;
    --gap-tagline: calc(0.35rem + 5px);
    --control-height: 2.75rem;
    --bone-clearance: 4.25rem;
  }
}

@media (max-width: 720px) {
  .cursor-bone {
    width: clamp(34px, 11vw, 92px);
  }
}

@media (max-width: 700px) {
  :root {
    --logo-width: min(51vw, 195px);
    --tagline-width: min(70.2vw, 270px);
    --mark-height: min(313px, calc((100vw - 2.5rem) * 872 / 1323 - 30px));
    --form-font-size: calc(1.35rem - 4pt);
    --form-gap: 0.4rem;
    --control-radius: 16px;
    --photo-radius: 2px;
  }

  .fields {
    flex-direction: column;
  }

  .email-wrap,
  .submit {
    flex: none;
    width: 100%;
  }

  .submit-bg {
    width: min(100%, calc(var(--control-height) * 371 / 66));
    height: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .cursor-bone {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bone {
    animation: none;
    transform: translate3d(0, var(--pose-y1), 0) rotate(var(--pose-r1)) scaleX(var(--flip));
  }
}