:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #182823;
  background: #eef2f0;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 36%) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 36%) 1px, transparent 1px),
    linear-gradient(135deg, #edf3f0 0%, #d8e4df 100%);
  background-size: 4rem 4rem, 4rem 4rem, auto;
}

.page-shell {
  min-height: calc(100vh - 4rem);
  display: grid;
  align-items: center;
  padding: clamp(2rem, 8vw, 7rem) clamp(1.5rem, 9vw, 8rem);
}

.hero {
  width: min(100%, 64rem);
  position: relative;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  border-left: 0.4rem solid #3d7665;
}

.eyebrow {
  margin: 0 0 1.5rem;
  color: #40665a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.82;
}

h1 span {
  display: block;
}

h1 span:last-child {
  margin-left: clamp(1.5rem, 8vw, 7rem);
  color: #315f52;
  font-style: italic;
}

.message {
  max-width: 36rem;
  margin: 3rem 0 0 clamp(1.5rem, 8vw, 7rem);
  color: #385048;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.7;
}

.note {
  margin: 2rem 0 0 clamp(1.5rem, 8vw, 7rem);
  color: #547368;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

footer {
  height: 4rem;
  display: grid;
  place-items: center;
  color: #587068;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 36rem) {
  .page-shell {
    align-items: start;
  }

  .hero {
    padding-top: 2rem;
  }

  .message,
  .note {
    margin-left: 0;
  }
}