:root {
  --sky-top: #1C3438;
  --sky-low: #4E6E6E;
  --mist: #C9D3CC;
  --ink: #F4F2EC;
  --l1: #3E5A58;
  --l2: #2C4644;
  --l3: #1E3332;
  --sea: #152628;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sky-top);
  color: var(--ink);
  font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 72%, rgba(201, 211, 204, .55), transparent 60%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 62%, var(--mist) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 58%; }
.l1 { fill: var(--l1); opacity: .55; }
.l2 { fill: var(--l2); opacity: .8; }
.l3 { fill: var(--l3); }
.sea { fill: var(--sea); }
.stack { fill: var(--l3); }
.copy {
  position: relative;
  text-align: center;
  padding: 18vh 16px 0;
  max-width: 640px;
  animation: rise 1.4s ease-out both;
}
.eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .75;
}
h1 {
  margin: 0;
  font: 400 clamp(46px, 11vw, 92px)/1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  letter-spacing: -.01em;
}
.lead { margin: 22px auto 0; font-size: clamp(18px, 4.6vw, 22px); max-width: 30ch; opacity: .92; }
.langs { margin: 14px 0 0; font-size: 14px; letter-spacing: .06em; opacity: .7; }
a { color: inherit; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .copy { animation: none; } }