* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  color: #e9ecff;
  font-family: 'Newsreader', serif;
  background-color: #0c1122;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 30%, #cfd6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 35% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 6%, #dfe3ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 92% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 14% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 64%, #cfd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 40%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #0b1020 0%, #18213c 62%, #3b3553 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; opacity: .75; }

.page {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 6vw 34vh;
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 500px);
  justify-content: space-between;
  gap: 48px;
}

.note { display: flex; flex-direction: column; gap: 16px; }
.note p { margin: 0; font-weight: 300; font-size: 22px; line-height: 1.5; text-wrap: pretty; }
.note .eyebrow { margin-bottom: 8px; font: 300 13px 'DM Mono', monospace; letter-spacing: 3px; color: #9aa6d8; }
.note .sign { margin-top: 4px; font-style: italic; font-size: 20px; color: #b9c1e6; }

.page-wide { grid-template-columns: minmax(0, 720px) minmax(0, 280px); }

.note h1 { margin: 0 0 8px; font-weight: 300; }
.note h2 { margin: 24px 0 0; font: 300 12px 'DM Mono', monospace; letter-spacing: 3px; text-transform: uppercase; color: #9aa6d8; }
.note.long p { font-size: 20px; }
.note p a { border-bottom: 1px solid #4a5480; }
.note p.updated { margin: -16px 0 8px; font: 300 11px 'DM Mono', monospace; letter-spacing: 3px; color: #7f89b5; }
.quiet[aria-current] { color: #e9ecff; }

.sky-map { position: relative; width: 100%; aspect-ratio: 500 / 460; }
.sky-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-map polyline { fill: none; stroke: #9aa6d8; stroke-width: .8; stroke-dasharray: 3 5; }
.caption { position: absolute; left: 4%; top: -4%; font: 300 11px 'DM Mono', monospace; letter-spacing: 3px; color: #7f89b5; }

.star, .dim { position: absolute; }
.star {
  display: flex; align-items: center; gap: 14px;
  transform: translate(-4px, -50%);
  font: 300 14px 'DM Mono', monospace; white-space: nowrap;
}
.star::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px 4px #9fb0ff;
}
.dim {
  width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%);
  background: #dfe4ff; box-shadow: 0 0 8px 2px #7f8fd6;
}

.quiet {
  position: fixed; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font: 300 12px 'DM Mono', monospace; letter-spacing: 1px; color: #8f99c4;
}
.quiet::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #c9d0f0; }
.quiet { right: max(48px, calc(50% - 600px + 6vw)); }
.now { top: 72px; }
.elsewhere { top: min(640px, calc(100vh - 48px)); }

.ridge {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30vh; z-index: 0;
  background: #06080f;
  clip-path: polygon(0% 62%, 9% 40%, 17% 52%, 27% 18%, 36% 44%, 44% 34%, 55% 62%, 66% 28%, 74% 40%, 83% 12%, 91% 36%, 100% 26%, 100% 100%, 0% 100%);
}

@media (max-width: 860px) {
  .page { grid-template-columns: minmax(0, 1fr); padding-top: 72px; }
  .note p { font-size: 20px; }
  .sky-map { max-width: 440px; margin-left: 4%; }
  .now { top: 24px; right: 24px; }
  .elsewhere { top: auto; bottom: 32px; right: 24px; }
}