/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Worldstar';
  src: url('/fonts/Worldstar.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Time-of-day palette ──────────────────────────────────────────────────
   Body class is set by app.js: 'dawn' | 'day' | 'dusk' | 'night' (see
   daypart.js for the classifier). Colors match client/style.css so the two
   properties share one visual language, even though no code is shared. */
body {
  --c-text:   #ede4d3;
  --c-muted:  rgba(237,228,211,0.6);
  --c-accent: #c8a03c;
  --c-bg:     #0d0c0a;
  transition: color 3s ease;
}
body.dawn {
  --c-text:   #f5dcc0;
  --c-muted:  rgba(245,220,192,0.62);
  --c-accent: #dc8c64;
}
body.dusk {
  --c-text:   #dfc4a0;
  --c-muted:  rgba(223,196,160,0.60);
  --c-accent: #b46450;
}
body.night {
  --c-text:   #c8b898;
  --c-muted:  rgba(200,184,152,0.70);
  --c-accent: #a08250;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html, body {
  width: 100%;
  min-height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  text-transform: lowercase;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
#page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

#brand a {
  font-family: 'Worldstar', 'Libre Baskerville', Georgia, serif;
  font-size: 2.4rem;
  letter-spacing: 0.03em;
  color: var(--c-text);
  text-decoration: none;
  transition: color 0.3s;
}
#brand a:hover { color: var(--c-accent); }

#tagline {
  font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--c-text);
  opacity: 0.85;
}

#bio {
  max-width: 32rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--c-muted);
}

#epigraph {
  max-width: 26rem;
  font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-muted);
}

#spotify-embed {
  width: 100%;
  max-width: 26rem;
}
#spotify-embed iframe { display: block; width: 100%; border-radius: 12px; }

#social-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
#social-links a {
  display: inline-flex;
  color: var(--c-muted);
  transition: color 0.3s;
}
#social-links a:hover { color: var(--c-accent); }
#social-links svg { width: 1.35rem; height: 1.35rem; display: block; }

#lugar-link {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid;
  border-color: var(--c-muted);
  padding-bottom: 0.15rem;
  transition: color 0.3s, border-color 0.3s;
}
#lugar-link:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #brand a { font-size: 1.9rem; }
  #tagline { font-size: 1rem; }
  #bio, #epigraph { font-size: 0.8rem; }
}