:root {
  --dune-sand: #DCCEC5;
  --sea-glass: #B9D6C8;
  --driftwood-walnut: #5B4433;
  --conch-peach: #E9B88E;
  --conch-peach-deep: #E2AB7E;
  --shell-white: #EEEBE5;
  --deep-timber: #382618;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: Jost, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--driftwood-walnut);
  text-align: center;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--sea-glass) 0%, rgba(185, 214, 200, 0) 55%),
    linear-gradient(170deg, var(--shell-white) 35%, var(--dune-sand) 80%, #E6C9B0 100%);
  background-attachment: fixed;
}

/* Very faint paper grain */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 160px;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--deep-timber);
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: 1.05;
}

.subtitle {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--deep-timber);
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 20px 0 28px;
}

p {
  max-width: 34em;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.8;
  letter-spacing: 1.6px;
  margin-bottom: 16px;
  text-wrap: balance;
}

.icons {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.icons a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--conch-peach);
  transition: background-color 0.2s;
}

.icons a:hover { background: var(--conch-peach-deep); }
.icons svg { width: 26px; height: 26px; fill: var(--deep-timber); }

a { color: var(--driftwood-walnut); text-underline-offset: 3px; }
a:hover { color: var(--deep-timber); }
a:focus-visible { outline: 2px solid var(--deep-timber); outline-offset: 3px; }

.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  z-index: 0;
}

@media (max-width: 480px) {
  main { padding-bottom: 120px; }
}

@media (forced-colors: active) {
  .icons a { border: 2px solid CanvasText; }
  .icons svg { fill: CanvasText; }
}