/* ============================================================
   Page-specific styles — Velvet Quill Publishing
   ============================================================ */

/* ────────────────────────────────────────────
   Homepage Phase 1 — cover hero
   ──────────────────────────────────────────── */

.vq-hero-cover {
  min-height: calc(100svh - 80px); /* fill below header */
  display: flex;
  align-items: center;
  padding-block: var(--section-pad);
}

.vq-hero-cover__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.vq-hero-cover__wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--size-wordmark);
  font-weight: 500;
  line-height: var(--lh-wordmark);
  color: var(--claret);
}

.vq-hero-cover__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-tagline);
  line-height: var(--lh-tagline);
  color: var(--ink);
  max-width: 480px;
}

/* Entrance animation */
.vq-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.vq-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vq-reveal[data-delay="1"] { transition-delay: 0.1s; }
.vq-reveal[data-delay="2"] { transition-delay: 0.25s; }
.vq-reveal[data-delay="3"] { transition-delay: 0.4s; }
.vq-reveal[data-delay="4"] { transition-delay: 0.55s; }

/* prefers-reduced-motion: skip animation, show immediately */
@media (prefers-reduced-motion: reduce) {
  .vq-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ────────────────────────────────────────────
   Homepage Phase 2 — featured book (dormant)
   ──────────────────────────────────────────── */

.vq-hero-book {
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  padding-block: var(--section-pad);
}

.vq-hero-book__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.vq-hero-book__reader-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-tagline);
  line-height: var(--lh-tagline);
  color: var(--ink);
}

.vq-featured-books {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.vq-featured-book {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}

.vq-featured-book__cover {
  flex-shrink: 0;
  width: clamp(140px, 20vw, 200px);
}

.vq-featured-book__cover img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 24px rgba(43,39,34,0.18);
}

.vq-featured-book__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-1);
}

.vq-status-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--claret);
}

.vq-featured-book__title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.vq-featured-book__title:hover {
  color: var(--claret);
}

@media (max-width: 639px) {
  .vq-featured-book {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .vq-featured-book__cover {
    width: clamp(120px, 40vw, 160px);
  }
}

/* ────────────────────────────────────────────
   About & Submissions — single-column
   ──────────────────────────────────────────── */

.vq-page {
  padding-block: var(--section-pad);
}

.vq-page__header {
  margin-bottom: var(--sp-8);
}

.vq-page__header .vq-rule {
  margin-top: var(--sp-3);
}

.vq-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.vq-page__body p + p {
  margin-top: 0; /* gap on the flex container handles spacing */
}

.vq-page__section h2 {
  margin-bottom: var(--sp-3);
}

.vq-page__section p {
  max-width: var(--width-reading);
}

.vq-page__section p + p {
  margin-top: var(--sp-2);
}

.vq-section-divider {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: var(--rule-h) solid var(--line);
}

/* ────────────────────────────────────────────
   Blog listing page
   ──────────────────────────────────────────── */

.vq-blog-header {
  padding-block: var(--section-pad) var(--sp-8);
}

.vq-blog-filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.vq-filter-btn {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: var(--rule-h) solid var(--line);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.vq-filter-btn:hover,
.vq-filter-btn.is-active {
  color: var(--claret);
  border-color: var(--claret);
}

.vq-post-list {
  list-style: none;
  border-top: var(--rule-h) solid var(--line);
}

.vq-post-item {
  padding-block: var(--sp-6);
  border-bottom: var(--rule-h) solid var(--line);
}

.vq-post-item__top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.vq-post-item__title {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: var(--sp-2);
  transition: color 0.2s;
}

.vq-post-item__title:hover {
  color: var(--claret);
}

.vq-post-item__excerpt {
  color: var(--ink);
  max-width: var(--width-reading);
}

/* ────────────────────────────────────────────
   Blog single post
   ──────────────────────────────────────────── */

.vq-single-post {
  padding-block: var(--section-pad);
}

.vq-single-post__header {
  margin-bottom: var(--sp-8);
  max-width: var(--width-reading);
}

.vq-single-post__title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.vq-single-post__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.vq-single-post__content {
  max-width: var(--width-reading);
  font-size: 19px; /* ensure legibility for long reads */
  line-height: 1.75;
}

.vq-single-post__content h2 {
  font-size: var(--size-h2);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.vq-single-post__content h3 {
  font-size: var(--size-h3);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.vq-single-post__content p {
  margin-bottom: var(--sp-3);
}

.vq-single-post__content a {
  color: var(--claret);
}

.vq-post-rule {
  display: block;
  width: var(--rule-w);
  height: var(--rule-h);
  background-color: var(--claret);
  border: none;
  margin-block: var(--sp-6);
}

/* ────────────────────────────────────────────
   Contact page
   ──────────────────────────────────────────── */

.vq-contact {
  padding-block: var(--section-pad);
}

.vq-contact__intro {
  margin-bottom: var(--sp-8);
  max-width: var(--width-reading);
}

.vq-contact__intro p {
  color: var(--ink);
}

.vq-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.vq-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.vq-form__group label {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--claret);
}

.vq-form__group input,
.vq-form__group textarea {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  border: var(--rule-h) solid var(--line);
  padding: var(--sp-2) var(--sp-2);
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}

.vq-form__group input:focus,
.vq-form__group textarea:focus {
  border-color: var(--claret);
}

.vq-form__group textarea {
  min-height: 160px;
  resize: vertical;
}

.vq-form__submit {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ground);
  background-color: var(--claret);
  border: none;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: opacity 0.2s;
  align-self: flex-start;
}

.vq-form__submit:hover {
  opacity: 0.85;
}

.vq-form__confirm {
  display: none;
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--ink);
  margin-top: var(--sp-4);
}

.vq-form__confirm.is-visible {
  display: block;
}

/* ────────────────────────────────────────────
   Individual book page (Tier 2 — dormant)
   ──────────────────────────────────────────── */

.vq-book-page {
  position: relative;
}

.vq-book-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px) brightness(0.45);
  transform: scale(1.05); /* prevent blur edges */
}

/* Mobile: fixed backgrounds can misbehave — fall back */
@media (max-width: 639px) {
  .vq-book-bg {
    position: absolute;
    min-height: 100%;
  }
}

.vq-book-panel {
  position: relative;
  padding-block: var(--section-pad);
}

.vq-book-panel__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.vq-book-panel__cover img {
  width: clamp(200px, 25vw, 320px);
  height: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.vq-book-panel__info {
  color: #FAF8F3; /* always light against dimmed background */
}

.vq-book-panel__info .vq-label {
  color: #e8b4bf; /* lighter claret variant for dark bg */
}

.vq-book-panel__title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  color: #FAF8F3;
  margin-block: var(--sp-2) var(--sp-3);
}

.vq-book-panel__blurb {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: rgba(250,248,243,0.9);
  max-width: 520px;
  margin-bottom: var(--sp-4);
}

.vq-retailer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-top: var(--sp-4);
}

.vq-retailer-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ground);
  background: rgba(250,248,243,0.15);
  border: 1px solid rgba(250,248,243,0.4);
  padding: var(--sp-1) var(--sp-3);
  text-decoration: none;
  transition: background 0.2s;
}

.vq-retailer-btn:hover {
  background: rgba(250,248,243,0.25);
  color: var(--ground);
  opacity: 1;
}

@media (max-width: 639px) {
  .vq-book-panel__inner {
    grid-template-columns: 1fr;
  }

  .vq-book-panel__cover img {
    width: clamp(140px, 50vw, 200px);
  }
}

/* ────────────────────────────────────────────
   Tier 2 dormant page scaffolds
   ──────────────────────────────────────────── */

.vq-coming-soon {
  padding-block: var(--section-pad);
  text-align: center;
}

.vq-coming-soon p {
  color: var(--muted);
  margin-top: var(--sp-3);
}