/* The coming-soon page (tools/soon-build.mjs). The party's look: black, white and silver; Inter Tight to read, Stellarist Display for capitals. */
@font-face { font-family: 'Inter Tight'; src: url('fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Stellarist Display'; src: url('fonts/stellarist-display.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --ink: #070709; --white: #FFFFFF; --silver: #B9BDC3; --grey: #8E949C; --line: rgba(255,255,255,.12); }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--white);
  font: 400 16px/1.6 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse 70% 55% at 50% 36%, rgba(255,255,255,.075), rgba(255,255,255,0) 70%), linear-gradient(160deg, #131417, var(--ink) 60%); }
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: clamp(48px, 10vh, 112px) 16px 40px; text-align: center; }
h1 { margin: 0 auto; width: min(300px, 72vw); }
.lockup { display: block; width: 100%; height: auto; }
.motto { margin: 22px 0 0; color: var(--silver); font-size: 17px; letter-spacing: .02em; }
.soon { margin: 44px 0 0; font: 400 clamp(26px, 6vw, 34px)/1.1 'Stellarist Display', 'Inter Tight', sans-serif; letter-spacing: .24em; padding-left: .24em; font-synthesis: none; }
.lead { margin: 20px auto 0; max-width: 34em; color: #D9DCE0; }
.note { margin: 10px 0 0; color: var(--grey); font-size: 14px; }
section { margin-top: 48px; }
h2 { margin: 0 0 14px; font: 400 12px/1.3 'Stellarist Display', 'Inter Tight', sans-serif; letter-spacing: .24em; color: var(--silver); font-synthesis: none; }
.accounts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.accounts a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03);
  color: inherit; text-decoration: none; text-align: left; transition: border-color .15s, background .15s; }
.accounts a:hover, .accounts a:focus-visible { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.06); }
.accounts a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.accounts span { font-size: 12.5px; color: var(--grey); }
.accounts b { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.mail { margin: 26px 0 0; color: var(--silver); font-size: 15px; }
.mail a { color: var(--white); text-underline-offset: 3px; }
footer { position: relative; z-index: 1; padding: 20px 16px 28px; text-align: center; color: var(--grey); font-size: 12.5px; }
@media (max-width: 420px) { .accounts { grid-template-columns: 1fr; } }
/* the twinkle: dim most of each cycle, then a short, soft brightening; each star on its own speed and start */
.sky .tw { opacity: .3; transform-box: fill-box; transform-origin: center; animation: twinkle 7s ease-in-out infinite; }
.sky .d1 { animation-duration: 5.5s; } .sky .d2 { animation-duration: 7s; } .sky .d3 { animation-duration: 8.5s; } .sky .d4 { animation-duration: 10.5s; }
.sky .a1 { animation-delay: -.6s; } .sky .a2 { animation-delay: -2.1s; } .sky .a3 { animation-delay: -3.5s; } .sky .a4 { animation-delay: -4.8s; } .sky .a5 { animation-delay: -6.4s; } .sky .a6 { animation-delay: -8.1s; }
@keyframes twinkle { 0%, 78%, 100% { opacity: .3; transform: scale(1); } 89% { opacity: 1; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .sky .tw { animation: none; opacity: .5; } }