/* ===========================================================
   Genoivieve — Design A
   Palette: deep plum/ink + warm gold, parchment for body copy.
   Layout patterns borrowed from paulcude.com:
   - circular headshot logo beside author name in the header
   - horizontal snap-scrolling book carousel near the top
   - large photo + bio with read more/less toggle
   - card-grid books page with buy-button dropdown
   =========================================================== */

:root {
  --ink: #1b1530;
  --ink-soft: #2a2149;
  --ink-softer: #362a5c;
  --parchment: #f7f3ea;
  --parchment-dim: #ece5d4;
  --gold: #c9a24b;
  --gold-light: #e4c983;
  --text-dark: #241c3a;
  --text-body: #382e55;
  --text-light: #f7f3ea;
  --muted: #8b81a8;
  --shadow: 0 12px 30px rgba(27, 21, 48, 0.18);
  --radius: 14px;
  --max-width: 1180px;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--parchment);
  line-height: 1.6;
}

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

a {
  color: inherit;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0 0 0.4em;
  font-weight: 600;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--text-light);
  box-shadow: var(--shadow);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text-light);
}

.brand-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--ink-softer);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold-light);
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.brand-text .author-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-text .series-tag {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}

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

.main-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--text-light);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  border-color: var(--gold);
  color: var(--gold-light);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 60%, var(--ink-softer) 100%);
  color: var(--text-light);
  padding: 64px 0 56px;
  text-align: center;
}

.hero .series-name {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--gold-light);
  margin-bottom: 0.1em;
  letter-spacing: 0.02em;
}

.hero .author-byline {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.04em;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.hero p.tagline {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--parchment-dim);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: var(--font-body);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--gold-light);
}

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

.btn-ghost:hover {
  background: rgba(201, 162, 75, 0.12);
}

/* ---------- Carousel ---------- */

.carousel-section {
  padding: 48px 0 8px;
  background: var(--parchment);
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-heading h2 {
  font-size: 1.8rem;
}

.section-heading .see-all {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  white-space: nowrap;
}

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 8px 4px 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar {
  height: 8px;
}

.carousel-track::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
}

.carousel-card {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--text-dark);
}

.cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background: linear-gradient(155deg, var(--ink-softer), var(--ink));
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  padding: 12px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(201, 162, 75, 0.35);
}

/* Once a real image/video fills a .cover-placeholder slot, strip the
   placeholder-only styling (gradient, padding, caption centring) but keep
   the shared frame (aspect-ratio, border-radius, box-shadow, border) from
   the base class. Scoped to media elements so the 7 still-empty carousel/
   grid slots keep their placeholder look. */
video.cover-placeholder,
img.cover-placeholder {
  padding: 0;
  background: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* The featured-book cover is a video whose native ratio (1138 x 1818, ~0.626)
   is taller/narrower than the shared 2:3 placeholder frame. Forcing it into
   2:3 with height:100% made the box far narrower than the video, so
   object-fit: cover was clipping the left/right edges (text near the frame
   edges got cut). Give this one element an aspect-ratio matching the source
   exactly and let height follow from width, so cover has nothing to crop.
   Scoped to the featured video only — the 7 carousel/grid book-cover slots
   keep the 2:3 portrait frame from .cover-placeholder. */
video.featured-video {
  aspect-ratio: 1138 / 1818;
  height: auto;
}

/* Book 1's real cover art (1226 x 2048, ~0.599) is narrower/taller than the
   shared 2:3 placeholder frame. Forcing it into 2:3 with height:100% +
   object-fit: cover was cropping the top/bottom of the artwork (the title and
   author name sit right at those edges). Give this one image its true aspect
   ratio and let height follow from width, same fix as the featured video
   above. Scoped by filename so the still-empty 2:3 slots keep the portrait
   placeholder frame. Note: in the carousel this makes card 1 a touch taller
   than the still-placeholder cards until their real covers land. */
img.cover-placeholder[src$="Genoivieve-one-book-cover.png"] {
  aspect-ratio: 1226 / 2048;
  height: auto;
}

/* Book 2's cover video (982 x 1486, ~0.661) is very close to the shared 2:3
   frame (~0.667), but the carousel/grid cards are flex/grid items that stretch
   to the tallest sibling's height, so under the shared height:100% rule the
   video was stretched vertically (to ~322px in a 160px-wide carousel card) and
   object-fit: cover cropped ~12% off the top and bottom of the art. Same fix
   as the two rules above: give it its true aspect ratio and let height follow
   from width so cover has nothing to crop. Filename-scoped via :has() because
   the src lives on the child <source>, not the <video> element. Layout impact
   is negligible here — 982/1486 renders at almost exactly the 2:3 slot size. */
video.cover-placeholder:has(source[src$="Ulmaetor-6.mp4"]) {
  aspect-ratio: 982 / 1486;
  height: auto;
}

/* Book 3's cover video (Numencrön, 1138 x 1818, ~0.626) is the same native
   ratio as the featured video — noticeably narrower/taller than the shared
   2:3 frame. Under the shared height:100% rule the flex/grid card stretch
   forced it wider than its art and object-fit: cover clipped the top/bottom
   (title + author name sit at those edges). Give it its true aspect ratio and
   let height follow from width. Same fix + :has() rationale as the rules above. */
video.cover-placeholder:has(source[src$="Numencron-Cover-1.mp4"]) {
  aspect-ratio: 1138 / 1818;
  height: auto;
}

/* Book 4's cover video (Roxanne, 1138 x 1818, ~0.626) is the identical native
   ratio to Numencrön and the featured video — narrower/taller than the shared
   2:3 frame, so the flex/grid card stretch + object-fit: cover would clip the
   title/author name at the top/bottom edges. Same fix + :has() rationale as
   the rules above: true aspect ratio, height follows from width. */
video.cover-placeholder:has(source[src$="Roxanne-Cover-2.mp4"]) {
  aspect-ratio: 1138 / 1818;
  height: auto;
}

/* Book 6's cover video (Roxanne II, 1138 x 1818, ~0.626) is the identical
   native ratio to Numencrön, Roxanne, and the featured video — narrower/taller
   than the shared 2:3 frame, so the flex/grid card stretch + object-fit: cover
   would clip the title/author name at the top/bottom edges. Same fix + :has()
   rationale as the rules above: true aspect ratio, height follows from width. */
video.cover-placeholder:has(source[src$="Roxanne-II-cover.mp4"]) {
  aspect-ratio: 1138 / 1818;
  height: auto;
}

/* Books 7 & 8 preview covers are 1080 x 1920 (9:16, ~0.5625) — well outside
   the 2:3 frame. Left to the shared rule, object-fit: cover crops heavily.
   True aspect ratio + height:auto so nothing is clipped. These two cards run
   taller than the others until real 2:3 covers replace them. */
video.cover-placeholder:has(source[src$="Numencron-II-book-7.mp4"]),
video.cover-placeholder:has(source[src$="Genoivieve-III-b-Doves-book-8.mp4"]) {
  aspect-ratio: 1080 / 1920;
  height: auto;
}

.carousel-card .book-title {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.carousel-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.carousel-controls button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--parchment);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}

.carousel-controls button:hover {
  background: var(--ink);
  color: var(--text-light);
}

/* ---------- Bio ---------- */

.bio-section {
  padding: 64px 0;
  background: var(--parchment-dim);
}

.bio-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

.author-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--ink-soft), var(--ink));
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  padding: 0;
  box-shadow: var(--shadow);
  object-fit: cover;
}

.bio-text h2 {
  font-size: 2rem;
}

.bio-copy {
  position: relative;
  max-height: 8.4em;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* .bio-copy.expanded's height is set inline by JS (copy.scrollHeight) so it
   always matches the real rendered content height and can never clip. No
   fixed max-height here — a hard-coded value would only be a stale fallback
   that reintroduces the truncation bug. */

.bio-copy::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.4em;
  background: linear-gradient(to bottom, rgba(236, 229, 212, 0), var(--parchment-dim));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bio-copy.expanded::after {
  opacity: 0;
}

.bio-copy p {
  margin: 0 0 1em;
}

.read-toggle {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 2px;
}

/* ---------- Featured book ---------- */

.featured-section {
  padding: 64px 0;
  background: var(--parchment);
}

.featured-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  color: var(--text-light);
}

.featured-grid .cover-placeholder {
  width: 100%;
}

.featured-copy .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--gold-light);
  margin-bottom: 10px;
}

.featured-copy h3 {
  color: var(--text-light);
  font-size: 2.1rem;
  margin-bottom: 12px;
}

.featured-copy p {
  color: var(--parchment-dim);
  margin-bottom: 22px;
}

/* ---------- Signup ---------- */

.signup-section {
  background: var(--ink-soft);
  color: var(--text-light);
  padding: 44px 0;
  text-align: center;
}

.signup-section h2 {
  color: var(--text-light);
  font-size: 1.6rem;
}

.signup-section p {
  color: var(--muted);
  margin-bottom: 20px;
}

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

.signup-form input[type="email"] {
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--ink-softer);
  min-width: 280px;
  font-size: 0.95rem;
  font-family: var(--font-body);
}

.signup-note {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- Contact ---------- */

.contact-section {
  padding: 56px 0;
  text-align: center;
}

.contact-section .contact-email {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  text-decoration: none;
}

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

.site-footer {
  background: var(--ink);
  color: var(--muted);
  padding: 36px 0;
  text-align: center;
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.85rem;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ---------- Books grid page ---------- */

.page-header {
  padding: 48px 0 8px;
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
}

.page-header p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
}

.books-grid-section {
  padding: 40px 0 64px;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 28px;
}

.book-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.book-card .cover-placeholder {
  margin-bottom: 14px;
}

.book-card h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.book-card .blurb {
  font-size: 0.9rem;
  color: var(--text-body);
  flex-grow: 1;
  margin-bottom: 16px;
}

/* Preview-only cards (Books 7 & 8): cover + title + this tag, no blurb or buy
   dropdown yet. Reuses the small-caps label look of .featured-copy .eyebrow,
   but in the darker --gold (not --gold-light) for legible contrast on the
   white card, and weight 600 to hold up at this size. */
.book-card .coming-soon-tag {
  margin: 2px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold);
}

/* Buy button + dropdown placeholder */

.buy-dropdown {
  position: relative;
}

.buy-btn {
  width: 100%;
  background: var(--ink);
  color: var(--text-light);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
}

.buy-btn:hover {
  background: var(--ink-soft);
}

.buy-btn .chevron {
  transition: transform 0.2s ease;
  font-size: 0.7rem;
}

.buy-dropdown.open .buy-btn .chevron {
  transform: rotate(180deg);
}

.buy-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: 1px solid var(--parchment-dim);
  display: none;
  z-index: 10;
}

.buy-dropdown.open .buy-menu {
  display: block;
}

.buy-menu li a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-dark);
  font-size: 0.88rem;
}

.buy-menu li a:hover {
  background: var(--parchment-dim);
}

/* ---------- "Read more" blurb + modal ---------- */

.blurb-more {
  display: inline;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 1px;
  white-space: nowrap;
}

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 21, 48, 0.62);
}

.modal-box {
  position: relative;
  background: var(--parchment);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px;
}

.modal-box h3 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  padding-right: 28px;
}

.modal-body p {
  margin: 0 0 1em;
  font-size: 0.95rem;
  color: var(--text-body);
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--ink);
    flex-direction: column;
    padding: 16px 28px 24px;
    transform: translateY(-140%);
    transition: transform 0.25s ease;
  }

  .main-nav.open {
    transform: translateY(0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 16px;
  }

  .nav-toggle {
    display: inline-block;
  }

  .bio-grid,
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .author-photo-placeholder {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* ===========================================================
   TEMPORARY — placeholder-content flag
   Anything with .needs-content is real copy that must be
   replaced before launch. Deliberately loud and off-palette
   so it can never be mistaken for finished content. Remove
   this block (and the class from the markup) once every
   instance has been filled in with real text.
   =========================================================== */
.needs-content {
  background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 10px,
    #111111 10px,
    #111111 20px
  );
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05em 0.4em;
  border: 2px solid #111111;
  border-radius: 3px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}