/* =====================================================
   DNM landing (site root) — night-sky page.
   Base: showcase-2026-08/index.html <style>, moved out of the page because the CSP
   (style-src 'self') refuses inline <style> and style="" attributes.
   Additions: local font stacks per language, lang switch on data-lang-block + [hidden],
   CTA button, waitlist form (from landing/landing.css, re-coloured for the dark ground),
   Grounding / Blank Spots / About sections.
   ===================================================== */

:root { color-scheme: dark; }

/* Fonts are same-origin (fonts/fonts.css). Newsreader / Hanken Grotesk have no Cyrillic
   (fonts/SOURCES.md): Russian goes on Lora / Inter. Both languages are declared explicitly —
   an EN block inside <html lang="ru"> must not inherit the Russian stack, and the other way round. */
:root, :lang(en) {
  --font-serif: 'Newsreader', 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:lang(ru) {
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: var(--font-sans);
  background: #0d0f14;
  color: #e8ecf7;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: #9fb7e8; text-underline-offset: 3px; }
a:hover { color: #c5d4f5; }
:focus-visible { outline: 2px solid #7ba3f2; outline-offset: 3px; }

/* -- Wrapper: carries the dark ground & star-field --- */
.dnm-page {
  background: linear-gradient(180deg, #151a24 0%, #0d0f14 35%);
  min-height: 100vh;
  position: relative;
}

/* -- Hero ------------------------------------------- */
.hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 72px 24px 28px; text-align: center;
  position: relative;
}

.logo-mark {
  width: 72px; height: 72px; margin-bottom: 24px;
  opacity: 0.85;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: #e8ecf7;
  text-wrap: balance;
}

.hero .subtitle {
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7394;
}

/* -- Visualization section -------------------------- */
.viz-section {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 40px;
}

.viz-container {
  width: 100%;
  max-width: 700px;
}

.viz-container svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG labels: CSS, not font-family attributes, so the Cyrillic stack applies via :lang */
.viz-container .lum-label { font-family: var(--font-sans); font-size: 11px; font-weight: 500; }
.viz-container .lum-centre { font-family: var(--font-serif); font-style: italic; font-size: 11px; }

.viz-caption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: #6b7394;
}

/* -- Domain legend ---------------------------------- */
.legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 26px;
  max-width: 660px;
  margin: 32px auto 0;
  padding: 0 24px;
}

.legend-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px;
  color: #aab3d0;
  white-space: nowrap;
}

.legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* -- Prose section ---------------------------------- */
.prose-section {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 24px 8px;
}

.prose-section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  color: #e8ecf7;
  line-height: 1.2;
  text-wrap: balance;
}

.prose-section p {
  font-family: var(--font-serif);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.72;
  color: #c0c8de;
  margin-bottom: 18px;
}

.prose-section p:last-child { margin-bottom: 0; }

/* -- The one button --------------------------------- */
.cta-row {
  max-width: 600px;
  margin: 0 auto;
  padding: 36px 24px 8px;
  text-align: center;
}

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 28px;
  border: 1px solid #8b93b8; border-radius: 999px;
  background: #e8ecf7; color: #0d0f14;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cta:hover { background: #ffffff; color: #0d0f14; }
.cta[aria-expanded="true"] { background: transparent; color: #e8ecf7; }

/* Secondary way into the waitlist, shown only when the button leads to the instrument. */
.cta-note { margin: 14px 0 0; font-size: 14px; color: #8b93b8; }
.cta-note a { color: #c0c8de; text-underline-offset: 3px; cursor: pointer; }
.cta-note a:hover { color: #ffffff; }

/* Telegram channel card under the button. The avatar is a local copy — img-src is 'self' only. */
.channel {
  display: inline-flex; align-items: center; gap: 12px;
  max-width: 100%; margin: 18px 0 0; padding: 7px 18px 7px 7px;
  border: 1px solid #2a3355; border-radius: 999px;
  color: #c0c8de; text-decoration: none; text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.channel:hover { border-color: #8b93b8; background: #151a24; }
.channel img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.channel-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.channel-name { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: #e8ecf7; }
.channel-meta { font-family: var(--font-sans); font-size: 13px; color: #8b93b8; }

/* -- Waitlist form (landing/landing.css, dark) ------ */
.notify {
  max-width: 552px;
  margin: 22px auto 0;
  padding: 22px 22px 8px;
  background: #151a24;
  border: 1px solid #2a3355;
  border-radius: 12px;
  color: #c0c8de;
}
@media (max-width: 600px) { .notify { margin-left: 16px; margin-right: 16px; } }
.notify > p { margin: 0 0 8px; font-size: 15px; }
.waitlist label { display: block; font-size: 14px; color: #aab3d0; margin: 6px 0 6px; }
.waitlist .row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist input[type="email"] {
  flex: 1 1 240px; min-height: 48px; border: 1px solid #3a4468; border-radius: 10px;
  padding: 10px 12px; font: inherit; color: #e8ecf7; background: #0d0f14;
}
.waitlist button {
  appearance: none; cursor: pointer; min-height: 48px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid #e8ecf7; background: #e8ecf7; color: #0d0f14; font: inherit; font-weight: 500;
}
.waitlist button[disabled] { opacity: 0.5; cursor: default; }
.fine { font-size: 13.5px; color: #8a92b0; margin: 12px 0 8px; }
.status { font-size: 15px; min-height: 1.5em; color: #e8ecf7; margin: 4px 0 12px; }
.status.done { font-family: var(--font-serif); font-size: 18px; }

/* -- Grounding / Blank Spots ------------------------ */
.info-section {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px 34px;
  color: #aab3d0;
  font-size: 15px;
  line-height: 1.65;
}
.info-section h2, .about h2 {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #6b7394;
  margin-bottom: 12px;
}
.info-section p { margin-bottom: 12px; }
.info-section strong { color: #e8ecf7; font-weight: 600; }
.doi { padding-left: 20px; }
.doi li { margin-bottom: 6px; }

/* -- Divider ---------------------------------------- */
.divider {
  width: 44px;
  height: 1px;
  background: #2a3355;
  margin: 44px auto;
  opacity: 0.7;
}

/* -- Reading key ------------------------------------ */
.reading-key {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.reading-key h3 {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #6b7394;
  margin-bottom: 14px;
}

.key-items {
  display: flex; flex-wrap: wrap;
  gap: 10px 22px;
}

.key-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: #aab3d0;
}

.key-item svg { flex-shrink: 0; }

/* -- Footer ----------------------------------------- */
.footer {
  text-align: center;
  margin-top: 10px;
  padding: 44px 24px 56px;
  border-top: 1px solid rgba(42, 51, 85, 0.35);
}

.footer .tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 2.5vw, 20px);
  color: #6b7394;
}

.footer .about {
  max-width: 600px;
  margin: 28px auto 0;
  font-size: 14px;
  color: #8a92b0;
}

.footer .credit {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a4468;
  margin-top: 22px;
}

/* -- Language toggle -------------------------------- */
.lang-toggle {
  position: absolute; top: 24px; right: 24px;
  display: flex; gap: 0;
  border: 1px solid #2a3355;
  border-radius: 4px;
  overflow: hidden;
  z-index: 10;
}
.lang-toggle button {
  background: transparent;
  border: none;
  color: #6b7394;
  font-family: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 44px; min-height: 32px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lang-toggle button[aria-pressed="true"] {
  background: #2a3355;
  color: #e8ecf7;
}
.lang-toggle button:hover:not([aria-pressed="true"]) { color: #aab3d0; }

/* -- Responsive ------------------------------------- */
@media (max-width: 600px) {
  .hero { padding: 64px 20px 20px; }
  .lang-toggle { top: 16px; right: 16px; }
  .logo-mark { width: 52px; height: 52px; margin-bottom: 18px; }
  .viz-section { padding: 8px 4px 28px; }
  .legend { gap: 8px 14px; }
  .legend-item { font-size: 11px; }
  .prose-section { padding: 8px 20px 8px; }
  .info-section { padding: 0 20px 28px; }
  .reading-key { padding: 0 20px 32px; }
  .key-items { gap: 8px 16px; }
  .footer { padding: 32px 20px 44px; }
}