/* planetmayfield - landing page CSS.
 *
 * Previously lived as an inline <style> block in public/index.html;
 * extracted here so strict CSP (style-src 'self' without 'unsafe-inline')
 * is achievable. Self-hosted DM Serif Display + JetBrains Mono replace
 * the prior Google Fonts CDN <link>s — keeps CSP at default-src 'self'.
 */

/* ── Self-hosted fonts ────────────────────────────────────────────── */
/* DM Serif Display ships as separate woff2 per face (not variable).
 * The landing uses regular + italic at weight 400 — both shipped here.
 * JetBrains Mono ships as a variable font covering weights 100..800
 * (the landing references "JetBrains Mono" via the preconnect for
 * future use; current page uses only DM Serif). */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

/* ── Body + page base ─────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0F172A;
}
body {
  font-family: 'DM Serif Display', Georgia, serif;
  color: #F1F5F9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Full-bleed twilight backdrop ─────────────────────────────────── */
/* The gradient IS the photograph: gold (dusk light) -> slate (horizon) ->
 * twilight (cooling sky) -> night (top of sky). Vertical, so the gold sits
 * at the bottom like remaining horizon light. Reverses the typical sky
 * direction deliberately — the masthead sits in the cool dark band where
 * the eye rests, and the warm light glows up from the lower edge. */
.sky {
  min-height: 100svh;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 40% at 88% 14%, rgba(229,210,155,0.18), transparent 70%),
    linear-gradient(180deg,
      #0F172A 0%,
      #1E293B 22%,
      #334155 48%,
      #6B7C95 72%,
      #C7A752 100%);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Faint star — single pinprick of light in the upper night band,
 * positioned near the moon mark. Photographic detail, not decoration. */
.sky::before {
  content: "";
  position: absolute;
  top: 22%;
  right: 18%;
  width: 2px;
  height: 2px;
  background: #F1F5F9;
  border-radius: 50%;
  opacity: 0.55;
  box-shadow: 0 0 6px rgba(241,245,249,0.6);
}

/* ── Brand mark row ───────────────────────────────────────────────── */
.mark-row {
  color: #E5D29B;
  line-height: 0;
}
.mark-row svg {
  width: clamp(3rem, 6vw, 5rem);
  height: clamp(3rem, 6vw, 5rem);
}

/* ── Masthead (DM Serif Display, stacked two lines) ───────────────── */
.masthead {
  margin-top: auto;
  max-width: 64rem;
}
.masthead h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 12vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0;
  color: #F1F5F9;
}
.masthead .line2 {
  display: block;
  margin-left: clamp(0rem, 4vw, 2rem);
}
.masthead .tagline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: #CBD5E1;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  max-width: 32rem;
}

/* ── Status row ───────────────────────────────────────────────────── */
/* Paired statement at the bottom of the page, full-bleed within the
 * section padding. Left states the privacy model; right answers how
 * to get in. Both in DM Serif italic, dark twilight so they read
 * cleanly against the warm gold band beneath. */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: clamp(1.5rem, 3.5vw, 2.5rem) 0 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.4;
  color: #1E293B;
  opacity: 0.85;
}