:root {
  --espresso: #111011;
  --moka: #c79c6c;
  --ivory: #f1eee9;
  --font-display: "Didot", "Bodoni 72", "Bodoni MT", "Iowan Old Style",
    "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--espresso);
}

body {
  margin: 0;
  background: var(--espresso);
  color: var(--ivory);
  font-family: var(--font-display);
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

.coming-soon {
  isolation: isolate;
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 42%, #171516 0, #121112 46%, #0d0c0d 100%);
}

.ambient-texture {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 0.45px, transparent 0.6px),
    radial-gradient(circle at 70% 60%, #fff 0 0.35px, transparent 0.55px);
  background-size: 4px 4px, 6px 6px;
  mix-blend-mode: soft-light;
}

.center-stack {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 32px;
  text-align: center;
}

.wordmark {
  display: block;
  width: clamp(184px, 13.8vw, 236px);
  line-height: 0;
}

.wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

h1 {
  margin: clamp(40px, 5.5vh, 56px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 1.92vw, 30px);
  font-weight: 400;
  color: var(--moka);
  letter-spacing: 0.025em;
  line-height: 1;
  -webkit-text-fill-color: currentColor;
}

.contact-email {
  margin-top: clamp(26px, 3.4vh, 34px);
  color: var(--ivory);
  font-family: "Helvetica Neue", "Neue Haas Grotesk", Arial, sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.3;
  text-decoration: none;
  transition: color 180ms ease;
}

.contact-email:hover,
.contact-email:focus-visible {
  color: var(--moka);
}

.contact-email:focus-visible {
  outline: 1px solid var(--moka);
  outline-offset: 6px;
}

.brand-mark {
  display: block;
  width: clamp(28px, 2.4vw, 38px);
  height: auto;
  margin-top: clamp(38px, 5vh, 52px);
}

.pattern-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 140px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 140px),
    transparent 100%
  );
  -webkit-mask-position: top;
  mask-position: top;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% calc(100% + 140px);
  mask-size: 100% calc(100% + 140px);
  animation: pattern-reveal 7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pattern-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.58) saturate(0.78) contrast(1.08);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 7%,
    rgba(0, 0, 0, 0.7) 20%,
    #000 34%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 7%,
    rgba(0, 0, 0, 0.7) 20%,
    #000 34%
  );
  transform: scale(1.008);
  animation: pattern-breathe 22s ease-in-out infinite alternate;
}

.pattern-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 8, 0.08), rgba(8, 7, 8, 0.22));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

@keyframes pattern-breathe {
  from {
    transform: scale(1.008);
  }
  to {
    transform: scale(1.03);
  }
}

@keyframes pattern-reveal {
  from {
    opacity: 0.25;
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
  }
  to {
    opacity: 1;
    -webkit-mask-size: 100% calc(100% + 140px);
    mask-size: 100% calc(100% + 140px);
  }
}

@media (max-width: 1050px) {
  .pattern-panel {
    width: 40%;
  }
}

@media (max-width: 720px) {
  .coming-soon {
    min-height: 660px;
  }

  .center-stack {
    padding: 28px 22px;
  }

  .wordmark {
    width: min(176px, 46vw);
  }

  h1 {
    margin-top: 38px;
    font-size: clamp(23.5px, 6.7vw, 26.7px);
    letter-spacing: 0.025em;
  }

  .contact-email {
    margin-top: 24px;
    font-size: clamp(14px, 4vw, 16px);
  }

  .brand-mark {
    margin-top: 36px;
  }

  .pattern-panel {
    z-index: 0;
    width: 70%;
    opacity: 0.5;
  }

  .pattern-panel::after {
    background: linear-gradient(
      180deg,
      rgba(17, 16, 17, 0.2),
      rgba(17, 16, 17, 0.72)
    );
  }
}

@media (max-height: 760px) and (min-width: 721px) {
  .wordmark {
    width: clamp(160px, 12vw, 205px);
  }

  h1 {
    margin-top: 34px;
  }

  .contact-email {
    margin-top: 22px;
  }

  .brand-mark {
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-panel {
    animation: none;
  }

  .pattern-panel img {
    animation: none;
  }
}