:root {
  color-scheme: dark;
  --background: #070b0a;
  --ink: #c6cec4;
  --quiet: #748078;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: var(--background);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; }
body { min-height: 100svh; overflow-x: hidden; }
::selection { background: #8da38d; color: #070b0a; }

#swarm, .atmosphere { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.atmosphere {
  background: radial-gradient(ellipse at 50% 49%, transparent 24%, #070b0a30 65%, #070b0a8c 100%);
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.22' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.masthead { position: fixed; z-index: 2; left: 45px; right: 45px; display: flex; align-items: center; justify-content: space-between; }
.masthead { top: 37px; }
.wordmark { display: flex; align-items: center; gap: 15px; color: #abb5a7; }
.wordmark span { font: 17px/1 Georgia, "Times New Roman", serif; letter-spacing: .28em; }
.sigil { color: #9ba58e; }
.coordinate { color: #647168; font-size: 10px; letter-spacing: .2em; }

main { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: 130px 28px; }
h1 { margin: 0; text-align: center; font-size: 13px; font-weight: 400; line-height: 2.05; letter-spacing: .015em; }
h1 > span { display: block; }
.period { color: #82977e; }

@media (max-width: 600px) {
  .masthead { left: 25px; right: 25px; }
  .masthead { top: 27px; }
  .wordmark { gap: 11px; }
  .wordmark span { font-size: 15px; }
  h1 { font-size: 12px; line-height: 2.1; max-width: 310px; }
  h1 > span { display: inline; }
  h1 > span::after { content: " "; }
}
@media (max-height: 440px) {
  .masthead { top: 20px; }
  main { padding-block: 90px; }
}