/* LCYG Friday Gathering: colors and the night-sky background shared by the hub and admin pages. */
:root {
  --sky: #0a1424;
  --sky-hi: #16304f;
  --sky-lo: #0d1b30;
  --ink: #eef3f8;
  --ink-2: #9fb0c4;
  --ink-3: #8fa1b6;
  --accent: #b6e1f3;
  --field: #0b1830;
  --line: #24395a;
  --rule: #1c2d48;
  --warn: #ffc9a8;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sky);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink-2); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Night sky */
.sky {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 60% 55% at 88% 2%, var(--sky-hi) 0%, rgba(22, 48, 79, 0) 62%),
    radial-gradient(ellipse 80% 60% at 8% 100%, var(--sky-lo) 0%, rgba(13, 27, 48, 0) 60%),
    var(--sky);
}
.sky > .layer { position: absolute; z-index: 0; pointer-events: none; }
.sky > :not(.layer) { position: relative; z-index: 1; }
.sky .violet {
  left: -18rem; bottom: -24rem; width: 72rem; height: 48rem;
  background: radial-gradient(closest-side, rgba(84, 66, 170, 0.3), rgba(84, 66, 170, 0.1) 55%, rgba(84, 66, 170, 0));
}
.sky .teal {
  right: 4%; top: 30%; width: 54rem; height: 38rem;
  background: radial-gradient(closest-side, rgba(30, 112, 156, 0.24), rgba(30, 112, 156, 0.07) 55%, rgba(30, 112, 156, 0));
}
.sky .stars { inset: 0; }
.sky .stars i { position: absolute; border-radius: 50%; background: #dcecff; }
.sky .grain {
  inset: 0;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.sky .moon-glow {
  right: -12rem; top: -14rem; width: 40rem; height: 40rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 225, 243, 0.16) 0%, rgba(182, 225, 243, 0.06) 45%, rgba(182, 225, 243, 0) 70%);
}
.sky .moon { right: -6rem; top: -8rem; width: 28rem; height: 28rem; opacity: 0.18; }
@keyframes tw { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.3; } }

.wordmark {
  margin: 0;
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
a.wordmark:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sky .stars i { animation: none !important; }
}