/* =========================================================
   Be-Loved Journey Series — site styles
   ========================================================= */

:root {
  --bg: #000000;
  --text: #ffffff;
  --teal: #63cdd4;        /* active menu item, Our Story heading */
  --teal-dark: #5facb0;   /* button hover border */
  --purple: #684795;      /* section headings, Soul Love, dividers, link hover */
  --link: #63cdd4;        /* text links (Go Deeper lists) */
  --body-font: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  --head-font: 'Jura', 'Arial', Helvetica, sans-serif;
  --text-width: 900px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--purple); }

h1, h2, h3 {
  font-family: var(--body-font);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: 44px; }
h2 { font-size: 26px; }

p { margin: 0 0 1em; }
sup { font-size: 70%; vertical-align: .3em; line-height: 0; }

main { display: block; }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 10; }

.header-inner {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 5.5%;
}

.logo { display: block; width: 90%; }
.logo img { width: 100%; }

.menu-toggle { display: none; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.site-nav a {
  display: block;
  padding: 10px 11px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  text-transform: lowercase;
}
.site-nav a:hover { opacity: .7; color: var(--text); }
.site-nav a.active { color: var(--teal); }
.site-nav a.active:hover { color: var(--teal); }

@media (max-width: 980px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    padding: 12px 0;
  }
  .logo { width: 80%; max-width: 420px; }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
  }
  .menu-toggle svg { width: 40px; height: 40px; }
  .site-nav {
    display: none;
    grid-column: 1 / -1;
    border-top: 3px solid var(--teal-dark);
    margin-top: 12px;
  }
  .site-nav.open { display: block; }
  .site-nav ul { display: block; padding: 8px 0; }
  .site-nav li + li { border-top: 1px solid rgba(255,255,255,.08); }
  .site-nav a { padding: 12px 5%; }
}

@media (max-width: 767px) {
  .logo { width: 100%; }
}

/* ---------- Shared rows ---------- */

.row { width: 90%; max-width: 1080px; margin: 0 auto; }

.row-carousel {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
}

/* ---------- Home ---------- */

.home { padding-top: 40px; }
.home .tagline { margin: 0 0 1em; }
.home .slogan { text-align: right; margin: 1.5em 0 0; }

/* ---------- 3D cover carousel ---------- */

.carousel {
  position: relative;
  padding: 30px 0;
  user-select: none;
  -webkit-user-select: none;
}

.carousel-viewport {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  touch-action: pan-y;
  cursor: grab;
}
.carousel-viewport.dragging { cursor: grabbing; }

.carousel-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.25,.8,.25,1), opacity .5s;
  will-change: transform;
}
.carousel-slide.no-anim { transition: none; }
.carousel-viewport.dragging .carousel-slide { transition: none; }

.carousel-slide a { position: relative; display: block; }
.carousel-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 8;     /* every cover the same book shape, even if a file is sized differently */
  object-fit: cover;
  pointer-events: none;
}

.carousel-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s;
}

/* Before the script runs: a simple row of covers */
.carousel:not(.ready) .carousel-track { display: flex; gap: 5px; }
.carousel:not(.ready) .carousel-slide { position: relative; flex: 0 0 calc((100% - 20px) / 5); }

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  padding: 10px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s;
}
.carousel-arrow:hover { opacity: 1; }
.carousel-arrow svg { width: 40px; height: 40px; }
.carousel-arrow.prev { left: 0; }
.carousel-arrow.next { right: 0; }

/* ---------- Book page ---------- */

.page-book main {
  background: #000 url('/assets/images/BG-Mandala5.jpg') center top / cover no-repeat;
}

.book { padding-bottom: 6px; }

.book-main {
  width: 90%;
  max-width: var(--text-width);
  margin: 0 auto;
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5.5%;
  align-items: start;
}

.book-title {
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 44px;
  text-align: left;
  padding-top: 30px;
  margin: 0 0 .4em;
}

.book-series {
  font-style: italic;
  font-size: 18px;
  margin: -15px 0 1.2em;
}

.book-blurb p { margin-bottom: 1em; }
.book-blurb .thought { padding-left: 2em; font-style: italic; }   /* a character's inner thoughts, indented */

.button {
  display: inline-block;
  position: relative;
  margin-top: 20px;
  padding: .3em 1em;
  border: 2px solid #fff;
  border-radius: 3px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  transition: all .3s;
}
.button::after {
  content: '→';
  position: absolute;
  right: .7em;
  opacity: 0;
  transition: all .3s;
}
.button:hover {
  color: #fff;
  border-color: var(--teal-dark);
  background: rgba(255,255,255,.2);
  padding-right: 2em;
}
.button:hover::after { opacity: 1; }

.book-nav {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.book-nav a { color: var(--link); }
.book-nav a:hover { color: var(--purple); }

@media (max-width: 980px) {
  .book-main { grid-template-columns: 1fr; }
  .book-image { max-width: 480px; }
  .book-title { padding-top: 10px; }
}
@media (max-width: 767px) {
  .book-title { font-size: 34px; }
  .book-nav { width: 90%; }
}

/* ---------- Category pages ---------- */

.category {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 0 40px;
  min-height: 143px;
}
.category h1 { margin-bottom: 30px; color: var(--teal); }

.book-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 3.8%;
}
.book-grid a { display: block; color: var(--text); }
.book-grid img { transition: opacity .3s; }
.book-grid a:hover img { opacity: .8; }
.book-grid h2 {
  font-family: var(--body-font);
  font-size: 18px;
  text-align: center;
  margin: 10px 0 0;
  color: var(--text);
}

@media (max-width: 980px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .book-grid { grid-template-columns: repeat(2, 1fr); } .category { width: 90%; } }

/* ---------- Text pages (Our Story, Go Deeper, Our Secrets, In Gratitude) ---------- */

.text-page {
  width: 90%;
  max-width: var(--text-width);
  margin: 0 auto;
  padding: 20px 0 40px;
  font-size: 21px;
  line-height: 1.6;
}
.text-page h1 { font-size: 44px; margin-bottom: .6em; color: var(--teal); }
.text-page h2 { color: var(--purple); font-size: 26px; }

.soul-love { color: var(--purple); }

.divider {
  border: 0;
  border-top: 1px solid var(--purple);
  margin: 30px 0 33px;
}

.deeper-cols {
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: 5.5%;
  padding-top: 9px;
}
.cat-list { list-style: none; margin: 0 0 1em; padding: 0; }
.cat-list a:hover { color: var(--purple); }

@media (max-width: 980px) {
  .deeper-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .text-page { font-size: 18px; }
  h1, .text-page h1 { font-size: 34px; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 30px 0 60px;
  text-align: center;
}

.social {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  transition: opacity .2s;
}
.social a:hover { opacity: .8; color: #fff; }
.social svg { width: 20px; height: 20px; }
.social img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.social-instagram { background: #ea2c59; }
.social-amazon { background: #ff9900; }
.social-goodreads { background: #ece9d5; }
.social a.social-goodreads, .social a.social-goodreads:hover { color: #7f4810; }

.legal {
  width: 40%;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}
.legal p { margin: 0; }

@media (max-width: 980px) { .legal { width: 75%; } }
@media (max-width: 767px) { .legal { width: 83%; } }