:root {
  color-scheme: light;
  --ink: #28231e;
  --muted: #716a5f;
  --paper: #f8f3ea;
  --line: rgba(40, 35, 30, 0.18);
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--paper);
}

.coming-soon,
.hero {
  min-height: 100vh;
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(24px, 5vw, 72px);
}

.hero__image,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__image {
  background-image: url("/assets/hero.png");
  background-position: center right;
  background-size: cover;
}

.hero__shade {
  background:
    linear-gradient(90deg, rgba(248, 243, 234, 0.96) 0%, rgba(248, 243, 234, 0.76) 38%, rgba(248, 243, 234, 0.08) 74%),
    linear-gradient(0deg, rgba(248, 243, 234, 0.34), rgba(248, 243, 234, 0));
}

.hero__content {
  position: relative;
  width: min(100%, 760px);
  padding-block: 24px;
}

.eyebrow {
  margin: 0 0 26px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  max-width: 8.5em;
  margin: 0;
  font-size: clamp(4rem, 10vw, 8.8rem);
  font-weight: 400;
  line-height: 0.86;
}

.soon {
  width: fit-content;
  margin: clamp(28px, 5vw, 48px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
}

.intro {
  max-width: 34rem;
  margin: 18px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 760px) {
  .hero {
    align-items: end;
    min-height: 100svh;
    padding: 28px 22px 42px;
  }

  .hero__image {
    background-position: 63% center;
  }

  .hero__shade {
    background:
      linear-gradient(0deg, rgba(248, 243, 234, 0.98) 0%, rgba(248, 243, 234, 0.86) 48%, rgba(248, 243, 234, 0.24) 100%),
      linear-gradient(90deg, rgba(248, 243, 234, 0.5), rgba(248, 243, 234, 0));
  }

  h1 {
    font-size: clamp(3.3rem, 18vw, 5.8rem);
  }
}