/* Dot globe showpiece, in the Decimals kit (~/Dev/parts/kits.json "decimals"): sand-cream paper washed with blush,
   one warm brown-black ink, a tight book serif for the headline, plain Arial for the rest, 999px pills. */
:root {
  --paper: #ede8e1; --blush: #f4c9be; --ground: #f6f1ea; --ink: #4d4638; --ink-80: rgba(77, 70, 56, .8);
  --white: #fffdf8; --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ground); color: var(--ink); overflow: hidden;
  font: 400 16px/1.5 Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.hero {
  position: relative; height: 100vh; min-height: 560px; overflow: hidden; text-align: center;
  /* one flat blush-sand: Decimals' paper with its blush wash mixed in (a soft gradient bands badly once the tile
     is encoded, so the wash is folded into the ground colour) */
  background: var(--ground);
}
.copy { position: relative; z-index: 2; padding: clamp(56px, 7.5vh, 96px) 16px 0; pointer-events: none; }
.copy a { pointer-events: auto; }
h1 {
  font: 500 clamp(40px, 6.1vw, 68px)/1.04 Newsreader, Georgia, serif; font-optical-sizing: auto;
  letter-spacing: -.035em; color: var(--ink);
}
.sub { margin: 18px auto 0; max-width: 50ch; font-size: clamp(16px, 1.7vw, 18px); color: var(--ink-80); }
.ctas { display: flex; justify-content: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(77, 70, 56, .16);
}
.pill--ink { background: var(--ink); color: var(--white); box-shadow: none; }

/* the planet: a big whole globe rising from the bottom of the screen */
.planet {
  position: absolute; z-index: 1; left: 50%; transform: translateX(-50%);
  width: min(100vw, 104vh, 1060px); aspect-ratio: 1;
  top: clamp(340px, 34vh, 430px);
}
@media (max-width: 600px) {
  .planet { width: 128vw; top: auto; bottom: -22vw; }
}