* {
  box-sizing: border-box;
}

:root {
  --ink-soft: #f3f0e8;
  --headline-font: "contralto-big", "Cormorant Garamond", serif;
  --sans-font: "gravita-geo-variable", "Raleway", sans-serif;
  --sans-wght-email: 263.63637;
  --sans-wght-signature: 340;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color-scheme: only light;
  forced-color-adjust: none;
}

body {
  overflow: hidden;
  background: #9a9a90;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.artboard {
  position: absolute;
  inset: 0;
}

.artboard-picture {
  position: absolute;
  inset: 0;
  display: block;
}

.artboard-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.content-layer {
  position: absolute;
  inset: 0;
  color: var(--ink-soft);
  user-select: text;
}

.headline {
  position: absolute;
  top: 14.6%;
  left: 3.65%;
  margin: 0;
  max-width: 64%;
  font-family: var(--headline-font);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(5.94rem, 10.89vw, 13.2rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.headline span {
  display: block;
}

.logo-mark {
  position: absolute;
  top: 3.1%;
  right: 2.35%;
  width: clamp(3.12rem, 4.94vw, 5.07rem);
  height: auto;
  display: block;
}

.contact-row {
  position: absolute;
  left: 3.78%;
  right: 3.2%;
  bottom: 3.1%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
}

.email-link {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans-font);
  font-size: clamp(0.95rem, 1.45vw, 1.5rem);
  font-weight: 300;
  font-variation-settings: "wght" var(--sans-wght-email);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: text;
  user-select: all;
}

.email-link-desktop {
  display: block;
}

.email-link-mobile {
  display: none;
  text-decoration: none;
  text-underline-offset: 0.16em;
}

.email-link-mobile:hover,
.email-link-mobile:focus-visible {
  text-decoration: underline;
}

.email-link-mobile:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 6px;
  border-radius: 4px;
}

.signature {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans-font);
  font-size: clamp(2.1rem, 3.9vw, 4.6rem);
  font-weight: 150;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (min-width: 1181px) {
  .logo-mark {
    width: clamp(3.77rem, 5.98vw, 6.24rem);
  }

  .headline {
    font-size: clamp(6.71rem, 11.99vw, 13.31rem);
  }

  .email-link-desktop {
    font-weight: 400;
    font-variation-settings: "wght" 300;
  }

  .signature {
    font-weight: 150;
  }
}

@media (max-width: 1180px) {
  .email-link-desktop {
    display: none;
  }

  .email-link-mobile {
    display: inline;
    cursor: pointer;
    user-select: text;
  }

  .headline {
    top: 15%;
    left: 4%;
    max-width: 69%;
    font-size: clamp(4.84rem, 10.01vw, 9.02rem);
  }

  .signature {
    font-size: clamp(1.95rem, 3.4vw, 3.1rem);
  }

  .email-link {
    font-size: clamp(0.92rem, 1.6vw, 1.2rem);
  }

  .contact-row {
    left: 4%;
    right: 3.5%;
    bottom: 2.6%;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .artboard-base {
    object-position: 58% center;
  }

  .headline {
    top: 13.8%;
    left: 5%;
    max-width: 72%;
    font-size: clamp(4.4rem, 12.32vw, 7.26rem);
  }

  .logo-mark {
    top: 2.6%;
    right: 3.2%;
    width: clamp(3.315rem, 7.15vw, 5.2rem);
  }

  .email-link {
    font-size: clamp(1rem, 2.35vw, 1.3rem);
  }

  .signature {
    font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  }

  .contact-row {
    left: 5%;
    right: 3.1%;
    bottom: 2.1%;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .artboard-base {
    object-position: 60% center;
  }

  .headline {
    top: 14.5%;
    left: 6%;
    max-width: 74%;
    font-size: clamp(3.465rem, 15.95vw, 5.5rem);
    line-height: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .logo-mark {
    top: 2.4%;
    right: 4%;
    width: clamp(3.055rem, 13.65vw, 4.81rem);
  }

  .contact-row {
    left: 50%;
    right: auto;
    bottom: 3.8%;
    width: min(92%, 28rem);
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .email-link {
    padding: 0;
    font-size: clamp(0.98rem, 4.5vw, 1.12rem);
    text-align: center;
    border-radius: 0;
    background: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.32);
  }

  .signature {
    font-size: clamp(1.7rem, 7.3vw, 2.55rem);
    text-align: center;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .headline {
    top: 11.8%;
    left: 4%;
    max-width: 54%;
    font-size: clamp(3.3rem, 9.24vw, 5.28rem);
  }

  .logo-mark {
    right: 2.6%;
    width: clamp(2.665rem, 4.68vw, 3.9rem);
  }

  .email-link {
    font-size: clamp(0.88rem, 1.95vw, 1.05rem);
  }

  .signature {
    font-size: clamp(1.45rem, 3.7vw, 2.2rem);
  }

  .contact-row {
    left: 4%;
    right: 3.2%;
    bottom: 2.8%;
    transform: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: auto;
    gap: 1rem;
  }
}