:root {
  --sand-light: #e8dfcf;
  --sand: #d4c6ae;
  --driftwood: #8a745e;
  --wood-dark: #3d3a34;
  --river: #667b78;
  --river-deep: #3f5756;
  --foam: #f3efe7;
  --ink: #292d2b;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 20%, rgb(243 239 231 / 38%), transparent 30%),
    linear-gradient(145deg, var(--sand-light) 0%, var(--sand) 52%, #a9a694 100%);
  font-family: Georgia, "Times New Roman", serif;
  display: grid;
  grid-template-rows: 1fr auto;
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.22;
  background-image: repeating-linear-gradient(
    7deg,
    transparent 0,
    transparent 8px,
    rgb(61 58 52 / 8%) 9px,
    transparent 10px
  );
}

.page-shell {
  width: min(92%, 72rem);
  margin: auto;
  padding: clamp(3rem, 9vw, 8rem) 0;
}

.hero {
  position: relative;
  max-width: 53rem;
  padding: clamp(2.25rem, 6vw, 5.75rem);
  overflow: hidden;
  border: 1px solid rgb(61 58 52 / 16%);
  border-radius: 0.25rem 2.75rem 0.25rem 1.25rem;
  background: rgb(243 239 231 / 56%);
  box-shadow:
    0 1.5rem 4rem rgb(63 87 86 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 55%);
  backdrop-filter: blur(4px);
}

.eyebrow {
  margin: 0 0 1.4rem;
  color: var(--river-deep);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--wood-dark);
  font-size: clamp(4.5rem, 13vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.83;
}

.tagline {
  margin: 1.7rem 0 0;
  color: var(--driftwood);
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  font-style: italic;
  letter-spacing: 0.01em;
}

.rule {
  width: min(15rem, 45%);
  height: 1px;
  margin: 2.75rem 0 1.75rem;
  background: linear-gradient(90deg, var(--river), transparent);
}

.introduction {
  max-width: 35rem;
  margin: 0;
  color: #4d504b;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.75;
}

.current-lines {
  position: absolute;
  top: -3rem;
  right: -7rem;
  width: 26rem;
  height: 18rem;
  opacity: 0.24;
  transform: rotate(-8deg);
}

.current-lines span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 6rem;
  border: 1px solid var(--river);
  border-color: var(--river) transparent transparent transparent;
  border-radius: 50%;
}

.current-lines span:nth-child(2) {
  top: 2.4rem;
  right: 1.5rem;
}

.current-lines span:nth-child(3) {
  top: 4.8rem;
  right: -0.75rem;
}

footer {
  padding: 1rem 4vw 1.25rem;
  color: rgb(243 239 231 / 76%);
  background: var(--river-deep);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

footer p {
  margin: 0;
}

@media (max-width: 36rem) {
  .hero {
    border-radius: 0.2rem 1.6rem 0.2rem 0.75rem;
  }

  .introduction {
    max-width: 28rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: arrive 700ms ease-out both;
  }

  @keyframes arrive {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}