/* Orion Cross — site styles */

:root {
  --bg: #05060a;
  --bg-alt: #0b0e1c;
  --card: #10131f;
  --card-border: #23273a;
  --gold: #cba135;
  --gold-light: #e8c874;
  --text: #eef0f4;
  --text-muted: #a9adba;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-light);
  margin: 0 0 0.5em;
}

a { color: var(--gold-light); }
a:hover { color: var(--gold); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 6, 10, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--card-border);
}

header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

header.site-header .logo-link img {
  height: 40px;
  width: auto;
}

nav.site-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

nav.site-nav a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

nav.site-nav a:hover { color: var(--gold-light); }

/* Hero / Book section */
.hero {
  padding: 64px 0 48px;
  background: radial-gradient(ellipse at top, var(--bg-alt) 0%, var(--bg) 65%);
}

.hero .container {
  display: flex;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-cover {
  flex: 0 0 300px;
  max-width: 300px;
}

.hero-cover img {
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--card-border);
}

.hero-copy {
  flex: 1 1 380px;
  min-width: 280px;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.hero-copy h1 {
  font-size: 2.6rem;
  line-height: 1.1;
  margin-bottom: 10px;
}

.hero-tagline {
  font-family: "Cinzel", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 22px;
}

.hero-copy p.lede {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 46ch;
  margin-bottom: 28px;
}

.button-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 3px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--gold);
  color: #05060a;
}

.btn-primary:hover {
  background: var(--gold-light);
  color: #05060a;
}

.btn-secondary {
  background: transparent;
  color: var(--gold-light);
}

.btn-secondary:hover {
  background: rgba(203, 161, 53, 0.1);
}

.btn-disabled {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--card-border);
  cursor: default;
  pointer-events: none;
}

.btn-disabled .btn-note {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  margin-top: 2px;
  opacity: 0.75;
}

/* Sections */
section {
  padding: 56px 0;
  border-top: 1px solid var(--card-border);
}

section .section-inner {
  max-width: 720px;
}

section.centered .section-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.blurb p {
  font-size: 1.08rem;
  color: var(--text);
}

.blurb .close-line {
  font-family: "Cinzel", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-size: 0.9rem;
  margin-top: 24px;
}

.blurb .pull-line {
  color: var(--gold);
  font-style: italic;
  font-size: 1.1rem;
  margin: 28px 0 18px;
}

/* Book facts table */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 28px;
}

.facts dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.facts dd {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

/* Email signup */
.signup-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 40px;
}

.signup-box p {
  color: var(--text-muted);
  margin-bottom: 22px;
}

form.signup-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

form.signup-form input[type="email"] {
  flex: 1 1 240px;
  padding: 13px 16px;
  border-radius: 3px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

form.signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
}

form.signup-form button {
  border: none;
  cursor: pointer;
  font-family: "Cinzel", Georgia, serif;
}

.hidden-field {
  position: absolute;
  left: -9999px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 14px;
}

/* About page */
.about-body p {
  font-size: 1.08rem;
}

.imprint-line {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--card-border);
  padding: 40px 0;
}

footer.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

footer.site-footer img {
  height: 44px;
  width: auto;
  opacity: 0.9;
}

.footer-right {
  text-align: right;
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0 0 8px;
  padding: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--gold-light);
}

footer .footer-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

@media (max-width: 640px) {
  footer.site-footer .container { justify-content: center; text-align: center; }
  .footer-right { text-align: center; }
  .footer-links { justify-content: center; }
}

/* Thank-you / coming-soon pages */
.simple-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
}

/* Welcome / universe home hero */
.welcome-hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 70px;
  background: radial-gradient(ellipse at top, var(--bg-alt) 0%, var(--bg) 60%);
  text-align: center;
}

.welcome-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px at 25% 60%, #ffffff 100%, transparent 100%),
    radial-gradient(2px 2px at 40% 15%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 35%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, #ffffff 100%, transparent 100%),
    radial-gradient(2px 2px at 95% 20%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 90%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px at 35% 40%, #ffffff 100%, transparent 100%);
  background-repeat: no-repeat;
}

.welcome-hero .container {
  position: relative;
  z-index: 1;
}

.welcome-top {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  text-align: left;
  margin-bottom: 68px;
}

.welcome-cover {
  flex: 0 0 380px;
  max-width: 380px;
  display: block;
  text-decoration: none;
}

.welcome-cover img {
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--card-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-cover:hover img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 26px 70px rgba(0,0,0,0.7), 0 0 0 1px var(--gold);
}

.welcome-copy {
  flex: 1 1 380px;
  min-width: 280px;
}

.welcome-hero h1 {
  font-size: 3.4rem;
  line-height: 1.1;
  margin: 0 0 22px;
}

.universe-intro {
  max-width: 50ch;
  margin: 0 0 32px;
  color: var(--text-muted);
  font-size: 1.25rem;
}

.cover-link img {
  width: 240px;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--card-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cover-link:hover img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 26px 70px rgba(0,0,0,0.7), 0 0 0 1px var(--gold);
}

.explore-btn {
  margin-top: 22px;
}

/* Quick links (Books / Music / Upcoming) */
.quicklinks {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 64px;
}

.quicklink-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 26px 34px;
  text-decoration: none;
  text-align: center;
  min-width: 160px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.quicklink-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.quicklink-card h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.quicklink-card p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.coming-soon-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 640px) {
  .hero { padding: 40px 0 32px; }
  .hero .container { gap: 32px; }
  .hero-cover { flex: 0 0 220px; max-width: 220px; margin: 0 auto; }
  .hero-copy h1 { font-size: 2rem; }
  .welcome-hero { padding: 56px 0 40px; }
  .welcome-hero h1 { font-size: 2.5rem; }
  .welcome-top { text-align: center; justify-content: center; gap: 32px; }
  .welcome-cover { flex: 0 0 240px; max-width: 240px; margin: 0 auto; }
  .universe-intro { margin: 0 auto 32px; }
  nav.site-nav ul { gap: 16px; }
  .signup-box { padding: 26px; }
}

/* MailerLite embedded form theming — best-effort override of MailerLite's
   default white-box template to match the site's dark navy/gold palette.
   MailerLite injects its own markup/inline styles via JS at runtime, so
   these rules target its documented class names broadly with !important.
   Verify after deploy and adjust selectors if anything still renders
   in MailerLite's default light styling. */
.ml-embedded,
.ml-embedded .ml-form-embedWrapper,
.ml-embedded .ml-form-embedBody,
.ml-embedded .ml-form-embedContent,
.ml-embedded .ml-form-successBody {
  background: transparent !important;
  color: var(--text) !important;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

.ml-embedded h1,
.ml-embedded h2,
.ml-embedded h3,
.ml-embedded h4 {
  color: var(--gold-light) !important;
  font-family: "Cinzel", Georgia, serif !important;
}

.ml-embedded p,
.ml-embedded label,
.ml-embedded .ml-form-successBody p {
  color: var(--text-muted) !important;
}

.ml-embedded input[type="text"],
.ml-embedded input[type="email"],
.ml-embedded input.form-control,
.ml-embedded select.form-control {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.ml-embedded input::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

.ml-embedded button,
.ml-embedded button.primary,
.ml-embedded .ml-form-embedSubmit button {
  background: var(--gold) !important;
  color: #05060a !important;
  border: 1px solid var(--gold) !important;
  border-radius: 3px !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.ml-embedded button:hover,
.ml-embedded button.primary:hover {
  background: var(--gold-light) !important;
  border-color: var(--gold-light) !important;
}

.ml-embedded a {
  color: var(--gold-light) !important;
}