/* robstrange.com — coming-soon page. License-clean: SELF-HOSTED Google Fonts (OFL, in
   assets/fonts/) + an original CSS/SVG night-mountain-lake scene (no third-party imagery).
   ZERO external origins — nothing is hotlinked. See CREDITS.md. */

/* Self-hosted fonts (Montserrat + Playfair Display, OFL variable woff2) — no external font CDN. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("assets/fonts/montserrat.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("assets/fonts/playfair.woff2") format("woff2"); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: #f4f7fb;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* sky (top) fading to the dark lake (bottom) */
  background: linear-gradient(180deg,
      #0b1e3b 0%, #113059 34%, #0c2244 52%, #071630 68%, #030b18 84%, #01050c 100%);
}

/* ---- starfield (upper sky) ---- */
.stars {
  position: absolute; inset: 0 0 45% 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #ffffffcc, transparent),
    radial-gradient(1.2px 1.2px at 28% 32%, #ffffffaa, transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, #ffffffcc, transparent),
    radial-gradient(1px 1px    at 58% 26%, #ffffff99, transparent),
    radial-gradient(1.5px 1.5px at 70% 16%, #ffffffbb, transparent),
    radial-gradient(1.2px 1.2px at 82% 30%, #ffffffaa, transparent),
    radial-gradient(1px 1px    at 92% 14%, #ffffff88, transparent),
    radial-gradient(1.3px 1.3px at 20% 8%,  #ffffffaa, transparent),
    radial-gradient(1px 1px    at 36% 22%, #ffffff77, transparent),
    radial-gradient(1.4px 1.4px at 64% 6%,  #ffffffbb, transparent),
    radial-gradient(1px 1px    at 76% 22%, #ffffff88, transparent),
    radial-gradient(1.2px 1.2px at 8%  30%, #ffffff99, transparent);
  opacity: .9;
}

/* ---- mountain scene + lake reflection ---- */
.scene {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56vh; min-height: 320px;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.ridge { width: 100%; height: 50%; line-height: 0; }
.ridge svg { width: 100%; height: 100%; display: block; }

/* the mirrored reflection over the (darker) water */
.reflection { transform: scaleY(-1); opacity: .30; filter: blur(1.5px); }
.reflection svg path { fill: url(#mg); }
.reflection {
  -webkit-mask-image: linear-gradient(to top, transparent 4%, rgba(0,0,0,.85) 70%);
          mask-image: linear-gradient(to top, transparent 4%, rgba(0,0,0,.85) 70%);
}
/* faint waterline shimmer where ridge meets reflection */
.scene::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: linear-gradient(90deg, transparent, #6f9bd11a 20%, #9dc0ea33 50%, #6f9bd11a 80%, transparent);
}

/* ---- wordmark (top) ---- */
.wordmark {
  position: absolute; top: 34px; left: 0; right: 0; z-index: 3;
  text-align: center;
  font-weight: 600; font-size: 15px;
  letter-spacing: .34em; text-indent: .34em;   /* balance the tracking */
  text-transform: uppercase;
  color: #ffffff;
}

/* ---- headline (center) ---- */
.stage {
  position: relative; z-index: 3;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
}
.headline {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(34px, 7vw, 62px);
  letter-spacing: .01em;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(3, 10, 22, .55);
}

@media (max-width: 560px) {
  .wordmark { top: 26px; font-size: 13px; }
  .scene { height: 48vh; }
}

@media (prefers-reduced-motion: no-preference) { /* reserved for any future subtle motion */ }

/* ---- OPTIONAL: use a real photo instead of the CSS scene ----
   1) drop a freely-licensed image (Unsplash/Pexels — commercial reuse OK) at assets/hero.jpg
   2) record its source + license in CREDITS.md
   3) add class="has-photo" to <body>
body.has-photo { background: #01050c; }
body.has-photo .stars, body.has-photo .scene { display: none; }
body.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: #01050c url("assets/hero.jpg") center/cover no-repeat;
}
body.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,10,22,.35), rgba(2,6,14,.55));
}
--------------------------------------------------------------- */