:root {
  color-scheme: light dark;
  --sky: #C8D4DC;
  --snow: #F6F3EC;
  --ridge: #3B5043;
  --ridge-back: #4B6253;
  --ink: #1F2B25;
  --meta: #666C60;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky: #1A2129;
    --snow: #101215;
    --ridge: #24302A;
    --ridge-back: #1A221E;
    --ink: #DCE2E8;
    --meta: #8E958E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(var(--snow) 45%, var(--sky));
  padding: 64px 24px 200px;
}

.identity {
  position: relative;
  z-index: 1;
  text-align: center;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(48px, 9vw, 88px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.045em;
}

p {
  margin: 0;
  color: var(--meta);
  font-size: clamp(17px, 3vw, 23px);
  line-height: 1.5;
  text-wrap: balance;
}

.landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(130px, 26vh, 300px);
}

.back { fill: var(--ridge-back); }
.front { fill: var(--ridge); }