@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Outfit:wght@300;400;500&display=swap');

:root {
  --bg-deep: #0a0a0f;
  --bg-card: #12121a;
  --bg-card-hover: #1a1a26;
  --bg-surface: #16161f;
  --text-primary: #e8e4df;
  --text-secondary: #9a958e;
  --text-muted: #5a5650;
  --accent: #c4956a;
  --accent-dim: #8a6848;
  --accent-glow: rgba(196,149,106,0.15);
  --border: rgba(196,149,106,0.12);
  --border-strong: rgba(196,149,106,0.25);
  --font-display: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-ui: 'Outfit', sans-serif;
  --max-w: 1100px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg-deep); color:var(--text-primary);
  font-family:var(--font-body); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a { color:var(--accent); text-decoration:none; transition:color .2s; }
a:hover { color:var(--text-primary); }
::selection { background:var(--accent); color:var(--bg-deep); }
img { max-width:100%; display:block; }
button { border:none; background:none; cursor:pointer; font:inherit; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:var(--accent-dim); border-radius:3px; }

body::after {
  content:''; position:fixed; top:0;left:0;right:0;bottom:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999;
}

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.fade-up { animation:fadeUp .6s ease-out both; }
.fade-in { animation:fadeIn .8s ease-out both; }
.delay-1{animation-delay:.1s} .delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s} .delay-4{animation-delay:.4s}

/* Nav */
.site-nav {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  border-bottom:1px solid transparent; transition:all .3s ease; padding:0 24px;
}
.site-nav.scrolled {
  background:rgba(10,10,15,.95); backdrop-filter:blur(12px);
  border-bottom-color:var(--border);
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.nav-logo {
  font-family:var(--font-display); font-size:16px; letter-spacing:3px;
  text-transform:uppercase; color:var(--accent); font-weight:500;
}
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-link {
  font-family:var(--font-ui); font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-secondary);
  padding:8px 0; font-weight:400;
  border-bottom:1px solid transparent; transition:all .2s;
}
.nav-link:hover { color:var(--accent); }
.nav-link.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  position:absolute; top:100%; left:-12px;
  background:rgba(18,18,26,.98); border:1px solid var(--border);
  padding:8px 0; min-width:240px;
  opacity:0; pointer-events:none;
  transform:translateY(-4px); transition:all .2s ease;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity:1; pointer-events:auto; transform:translateY(4px);
}
.nav-dropdown-item {
  display:block; padding:8px 20px;
  font-family:var(--font-ui); font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-secondary); transition:color .15s;
}
.nav-dropdown-item:hover { color:var(--accent); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-hamburger span { width:22px; height:1.5px; background:var(--text-secondary); }
.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0; bottom:0;
  background:rgba(10,10,15,.98); z-index:999;
  flex-direction:column; align-items:center; padding-top:48px; gap:24px;
}
.mobile-menu.open { display:flex; }
@media(max-width:768px) {
  .nav-links { display:none!important; }
  .nav-hamburger { display:flex!important; }
}

/* Layout */
.page-wrap { max-width:var(--max-w); margin:0 auto; padding:120px 24px 80px; }
.section-divider {
  display:flex; align-items:center; justify-content:center;
  gap:16px; padding:48px 0;
}
.section-divider::before,.section-divider::after {
  content:''; width:60px; height:1px; background:var(--border-strong);
}

/* Buttons */
.btn-cta {
  font-family:var(--font-ui); font-size:11px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent);
  background:transparent; border:1px solid var(--accent-dim);
  padding:14px 32px; cursor:pointer; transition:all .3s;
  font-weight:400; display:inline-block; text-align:center;
}
.btn-cta:hover { background:var(--accent); color:var(--bg-deep); }
.btn-cta.ghost { border-color:var(--border); }

/* Typography */
.heading-page {
  font-family:var(--font-display); font-size:clamp(24px,4vw,36px);
  font-weight:400; letter-spacing:2px; color:var(--text-primary);
}
.heading-section {
  font-family:var(--font-display); font-size:clamp(20px,3vw,28px);
  font-weight:400; letter-spacing:3px; text-transform:uppercase; color:var(--text-primary);
}
.label-sm {
  font-family:var(--font-ui); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent-dim);
}
.text-body {
  font-family:var(--font-body); font-size:18px; color:var(--text-secondary);
  font-weight:300; line-height:1.7;
}
.text-italic {
  font-family:var(--font-body); font-style:italic; font-weight:300; color:var(--text-secondary);
}

/* Book cards */
.book-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; }
.book-card { display:flex; flex-direction:column; }
.book-card-cover {
  overflow:hidden; margin-bottom:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.3); transition:all .4s ease;
}
.book-card:hover .book-card-cover {
  box-shadow:0 20px 60px rgba(0,0,0,.5); transform:translateY(-4px);
}
.book-card-cover img { width:100%; aspect-ratio:2/3; object-fit:cover; transition:transform .6s ease; }
.book-card:hover .book-card-cover img { transform:scale(1.03); }

/* Progress bar */
.progress-wrap { margin-top:12px; }
.progress-header {
  display:flex; justify-content:space-between; margin-bottom:6px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:1px; text-transform:uppercase;
}
.progress-label { color:var(--text-muted); }
.progress-pct { color:var(--accent-dim); }
.progress-track { height:2px; background:var(--border); border-radius:1px; overflow:hidden; }
.progress-fill { height:100%; border-radius:1px; transition:width .8s ease; }
.progress-fill.complete { background:var(--accent); }
.progress-fill.in-progress { background:var(--accent-dim); }

/* Hero */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:120px 24px 80px; position:relative;
}
.hero::before {
  content:''; position:absolute; top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(196,149,106,.04) 0%,transparent 70%);
  pointer-events:none;
}
.hero-genre {
  font-family:var(--font-display); font-size:clamp(11px,1.2vw,13px);
  letter-spacing:6px; text-transform:uppercase; color:var(--accent-dim); margin-bottom:24px;
}
.hero h1 {
  font-family:var(--font-display); font-size:clamp(36px,6vw,72px);
  font-weight:400; color:var(--text-primary); line-height:1.1;
  margin-bottom:16px; letter-spacing:2px;
}
.hero-line { width:60px; height:1px; background:var(--accent); margin:24px auto; }
.hero-tagline {
  font-family:var(--font-body); font-size:clamp(18px,2vw,22px);
  color:var(--text-secondary); max-width:540px; font-weight:300;
  font-style:italic; line-height:1.7;
}
.hero-buttons { margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* Series cards */
.series-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:48px; }
.series-card {
  padding:32px; border:1px solid var(--border);
  background:var(--bg-card); transition:all .3s; display:block;
}
.series-card:hover { border-color:var(--border-strong); background:var(--bg-card-hover); }
.series-card h3 {
  font-family:var(--font-display); font-size:20px; font-weight:500;
  color:var(--text-primary); margin-bottom:12px; line-height:1.3;
}

/* Excerpt */
.excerpt-section {
  background:var(--bg-surface); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); padding:80px 24px;
}
.excerpt-inner { max-width:680px; margin:0 auto; text-align:center; }
.excerpt-inner blockquote {
  font-family:var(--font-body); font-size:20px; font-style:italic;
  color:var(--text-secondary); line-height:1.8; font-weight:300;
}
.excerpt-inner blockquote p { margin-bottom:20px; }
.excerpt-inner blockquote p:last-child { margin-bottom:0; }

/* Books overview */
.series-row { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:64px; }
.series-row.reverse { direction:rtl; }
.series-row.reverse > * { direction:ltr; }
.series-covers { display:grid; gap:12px; }
.series-covers img { width:100%; aspect-ratio:2/3; object-fit:cover; box-shadow:0 8px 32px rgba(0,0,0,.4); }

/* About */
.about-grid { display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:start; }
.about-photo { width:100%; aspect-ratio:3/4; object-fit:cover; box-shadow:0 12px 48px rgba(0,0,0,.4); }

/* Where to Buy */
.buy-book {
  display:grid; grid-template-columns:140px 1fr;
  gap:32px; margin-bottom:40px; padding:24px;
  background:var(--bg-card); border:1px solid var(--border);
}
.buy-book-cover { width:100%; aspect-ratio:2/3; object-fit:cover; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.buy-formats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.buy-format-label {
  font-family:var(--font-ui); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent-dim); margin-bottom:8px;
}
.buy-link {
  display:block; font-family:var(--font-ui); font-size:13px;
  color:var(--text-secondary); margin-bottom:4px; transition:color .2s;
}
.buy-link:hover { color:var(--accent); }
.buy-link-disabled {
  display:block; font-family:var(--font-ui); font-size:13px;
  color:var(--text-muted); margin-bottom:4px;
}
.buy-direct {
  display:inline-block; margin-top:16px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--accent-dim); padding-bottom:2px;
}

/* Subscribe placeholder */
.subscribe-placeholder {
  background:var(--bg-card); border:1px solid var(--border);
  padding:48px 32px; text-align:center;
}

/* Newsletter CTA */
.newsletter-cta { max-width:var(--max-w); margin:0 auto; padding:80px 24px; text-align:center; }

/* Footer */
.site-footer {
  border-top:1px solid var(--border); padding:40px 24px;
  text-align:center; font-family:var(--font-ui); font-size:12px;
  color:var(--text-muted); letter-spacing:1px;
}

/* Editor styles */
.editor-wrap { background:var(--bg-card); border:1px solid var(--border); padding:32px; }
.editor-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.editor-label {
  font-family:var(--font-ui); font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--accent-dim); display:block; margin-top:12px; margin-bottom:4px;
}
.editor-input {
  width:100%; padding:10px 12px; background:var(--bg-deep);
  border:1px solid var(--border); color:var(--text-primary);
  font-family:var(--font-ui); font-size:13px; outline:none; margin-bottom:8px;
}
.editor-input:focus { border-color:var(--accent-dim); }

/* Responsive */
@media(max-width:768px) {
  .series-row { grid-template-columns:1fr; }
  .series-row.reverse { direction:ltr; }
  .about-grid { grid-template-columns:1fr; }
  .about-grid .about-photo { max-width:300px; margin:0 auto; }
  .buy-book { grid-template-columns:100px 1fr; gap:20px; padding:16px; }
  .buy-formats { grid-template-columns:1fr; }
  .book-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}

/* Item 4: Book grid min 3 columns on desktop */
@media(min-width:769px) {
  .book-grid { grid-template-columns:repeat(3,1fr); }
}

/* Item 2: Buy CTA on book cards */
.book-card-buy {
  display:inline-block; margin-top:12px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--accent-dim);
  transition:color .2s;
}
.book-card-buy:hover { color:var(--accent); }

/* Item 5: Social icons */
.hero-social {
  display:flex; gap:20px; margin-top:28px; justify-content:center; align-items:center;
}
.hero-social a {
  color:var(--text-muted); transition:color .2s;
}
.hero-social a:hover { color:var(--accent); }

.footer-social {
  display:flex; gap:20px; justify-content:center; align-items:center; margin-bottom:4px;
}
.footer-social a {
  color:var(--text-muted); transition:color .2s;
}
.footer-social a:hover { color:var(--accent); }