* { box-sizing: border-box; }
:root {
  --bg: #0d1110;
  --panel: #151b18;
  --text: #faf8f1;
  --muted: #c8c8be;
  --gold: #e3bd58;
  --teal: #57d7c2;
  --cream: #f2ead8;
  --line: rgba(255,255,255,.13);
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 6vw;
  background: rgba(13,17,16,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand { font-weight: 800; letter-spacing: .16em; font-size: .9rem; }
nav { display: flex; gap: 24px; font-family: Arial, sans-serif; font-size: .85rem; }
nav a:hover { color: var(--teal); }

.hero {
  position: relative; overflow: hidden;
  min-height: 88vh;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 5vw;
  align-items: center; padding: 90px 7vw;
  background:
    radial-gradient(circle at 80% 22%, rgba(87,215,194,.13), transparent 28%),
    radial-gradient(circle at 25% 70%, rgba(227,189,88,.11), transparent 30%),
    linear-gradient(135deg, #0d1110 0%, #111a17 55%, #0d1110 100%);
}
.hero-glow {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  right: 5%; top: 8%; pointer-events: none;
  box-shadow: 0 0 160px 60px rgba(87,215,194,.07);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  color: var(--teal);
  font: 700 .78rem/1.2 Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
h1 { font-size: clamp(3rem, 7vw, 6.7rem); line-height: .96; margin: 18px 0 18px; }
h1 span { color: var(--gold); }
.hero-tagline {
  color: var(--cream); font-size: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 700px; margin: 0 0 14px;
}
.lead { max-width: 700px; color: var(--muted); font-size: 1.08rem; }
.hero-buttons, .social-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button {
  display: inline-block; padding: 14px 20px; border-radius: 999px;
  font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-3px); }
.primary { background: var(--gold); color: #16150f; box-shadow: 0 8px 28px rgba(227,189,88,.18); }
.secondary { border: 1px solid rgba(255,255,255,.28); color: var(--text); background: rgba(255,255,255,.03); }

.hero-books { display: flex; justify-content: center; align-items: center; gap: 18px; position: relative; z-index: 2; }
.hero-books img {
  width: min(42%, 300px); box-shadow: 0 28px 70px rgba(0,0,0,.6);
  border-radius: 4px;
}
.hero-books img:first-child { transform: rotate(-4deg); }
.hero-books img:last-child { transform: rotate(4deg) translateY(28px); }

.quote-band {
  padding: 75px 8vw; text-align: center;
  background: linear-gradient(90deg, #cba84e, #ead18a, #cba84e);
  color: #17150f;
}
.quote-band p {
  max-width: 900px; margin: auto; font-size: clamp(1.45rem, 3vw, 2.4rem);
  line-height: 1.25; font-style: italic;
}

.intro, .author, .updates { padding: 110px 12vw; }
.intro { max-width: 1120px; }
.intro p, .author p, .updates p, .purpose p { color: var(--muted); font-size: 1.08rem; max-width: 830px; }
h2 { font-size: clamp(2.1rem, 4vw, 3.9rem); line-height: 1.06; margin: 12px 0 24px; }

.books { padding: 110px 7vw; background: #101513; }
.section-heading { margin-bottom: 55px; }
.section-heading > p:last-child { color: var(--muted); }
.book-card {
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 6vw;
  padding: 60px 0; border-top: 1px solid var(--line); align-items: center;
}
.cover-wrap img { width: 100%; max-width: 380px; display: block; margin: auto; box-shadow: 0 25px 55px rgba(0,0,0,.5); }
.book-number { color: var(--gold); font: 700 .78rem Arial, sans-serif; letter-spacing: .2em; }
h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.1; margin: 8px 0; }
.subtitle { color: var(--teal); margin-top: 0; }
.book-info > p:not(.book-number):not(.subtitle) { color: var(--muted); max-width: 700px; }
.prices { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0; }
.prices span { border: 1px solid var(--line); padding: 10px 13px; font: .85rem Arial, sans-serif; color: var(--muted); }
.prices strong { color: var(--text); margin-left: 6px; }
.small-note { color: #aaa99f; font: .8rem/1.5 Arial, sans-serif; max-width: 520px; }
.coming-soon { display: inline-block; margin: 22px 0; padding: 10px 14px; border: 1px solid var(--gold); color: var(--gold); font: 700 .75rem Arial, sans-serif; letter-spacing: .1em; border-radius: 999px; }

.purpose {
  padding: 115px 12vw;
  background:
    radial-gradient(circle at 80% 40%, rgba(87,215,194,.12), transparent 35%),
    linear-gradient(135deg, #18211e, #111614);
}
.purpose > div { max-width: 950px; }
.purpose h2 { color: var(--cream); }

.author { background: #f1eadb; color: #24231e; }
.author .eyebrow { color: #167b6d; }
.author h2 { color: #24231e; }
.author p { color: #5e5a50; }

.updates { text-align: center; background: #0b0f0e; }
.updates-inner { max-width: 850px; margin: auto; }
.updates p { margin-left: auto; margin-right: auto; }
.social-buttons { justify-content: center; }

footer {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px 7vw; border-top: 1px solid var(--line);
  color: #8d918a; font: .75rem Arial, sans-serif;
}
@media (max-width: 800px) {
  .site-header { padding: 15px 5vw; }
  nav { gap: 12px; }
  nav a:nth-child(3), nav a:nth-child(4) { display: none; }
  .hero { grid-template-columns: 1fr; padding: 65px 7vw; min-height: auto; }
  .hero-books { margin-top: 35px; }
  .book-card { grid-template-columns: 1fr; gap: 35px; }
  .intro, .author, .updates, .purpose { padding: 80px 7vw; }
  .books { padding: 80px 7vw; }
}


.contact {
  padding: 100px 12vw;
  text-align: center;
  background: linear-gradient(135deg, #171d1a, #0d1110);
  border-top: 1px solid var(--line);
}
.contact-inner { max-width: 850px; margin: auto; }
.contact p { color: var(--muted); font-size: 1.08rem; }
.contact-email { margin: 24px 0 30px; }
.contact-email a {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.contact-email a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .contact { padding: 80px 7vw; }
  nav a[href="#contact"] { display: none; }
}


.hero-image-section {
  background: #050807;
  border-bottom: 1px solid var(--line);
}
.homepage-hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  margin: 0 auto;
}
.hero-image-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 7vw 30px;
  background: #090d0c;
}
@media (max-width: 800px) {
  .hero-image-actions { padding: 18px 7vw 25px; }
}