/* =====================================================================
   BLACK HISTORY PRINT — styles.css
   ---------------------------------------------------------------------
   All site styling lives in this one file. Sections are labeled so a
   non-developer can find what they want to change.

   QUICK COLOR / TYPE EDIT GUIDE
   - Change brand colors:    :root { ... }   (just below)
   - Change body font size:  body { font-size: ... }
   - Change max content width: .container { max-width: ... }
   ===================================================================== */


/* =====================================================================
   1. DESIGN TOKENS — brand palette & spacing
   ===================================================================== */
:root {
  /* Brand palette */
  --bg:           #1a1510;   /* dark warm black — main background */
  --bg-deep:      #120e0a;   /* slightly deeper, used in pockets */
  --gold:         #c89f56;   /* antique gold accent */
  --gold-deep:    #8a6a28;   /* deeper gold, for shadow / divider */
  --gold-soft:    #d8b878;   /* a softer gold for subtle highlights */
  --cream:        #efe7d6;   /* primary text */
  --cream-dim:    #cfc3ac;   /* secondary, lower-contrast text */
  --cream-faint:  #8e8472;   /* very quiet text (footnotes, meta) */

  /* Type */
  --serif: "EB Garamond", "Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;

  /* Spacing rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}


/* =====================================================================
   2. BASE / RESET — minimal, intentional
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.125rem;            /* generous body type */
  line-height: 1.65;
  color: var(--cream);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--gold);
  text-decoration: none;
  transition: color .25s var(--ease);
}
a:hover, a:focus { color: var(--gold-soft); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--gold-deep);
  color: var(--cream);
}


/* =====================================================================
   3. LAYOUT HELPERS
   ===================================================================== */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container.narrow {
  max-width: 720px;
}


/* =====================================================================
   4. HEADER + NAV
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 14, 10, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200, 159, 86, 0.18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
}
.brand-name:hover { color: var(--gold-soft); }

.site-nav {
  display: flex;
  gap: 2rem;
}
.site-nav a {
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.site-nav a:hover { color: var(--gold); }

@media (max-width: 560px) {
  .brand-name { font-size: 0.85rem; letter-spacing: 0.25em; }
  .site-nav { gap: 1.1rem; }
  .site-nav a { font-size: 0.78rem; letter-spacing: 0.14em; }
}


/* =====================================================================
   5. HERO — full-width, candlelit, image optional
   ===================================================================== */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;

  /* Layered background:
     1. Subtle vignette so text always reads.
     2. Warm gold radial glow.
     3. The hero image (if present — falls back gracefully if missing).
     4. Solid base color underneath. */
  background:
    linear-gradient(to bottom,
      rgba(18,14,10,0.55) 0%,
      rgba(26,21,16,0.78) 60%,
      rgba(26,21,16,0.98) 100%),
    radial-gradient(ellipse at 50% 28%,
      rgba(200,159,86,0.28),
      transparent 65%),
    url('hero.png') center / cover no-repeat,
    var(--bg);
}

/* A separate overlay layer — adds a vertical fade so the hero meets
   the rest of the page softly. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(18,14,10,0.9),
      transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: var(--space-6) 1.5rem;
  text-align: center;
  max-width: 880px;
}

.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.6rem;
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--cream);
  margin: 0 0 1.8rem;
}
.hero-headline em {
  font-style: italic;
  color: var(--gold-soft);
  font-weight: 400;
}

.hero-tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: var(--cream-dim);
  max-width: 620px;
  margin: 0 auto 2.4rem;
}

.hero-cta {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0.95rem 2.2rem;
  border: 1px solid var(--gold);
  background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease), letter-spacing .3s var(--ease);
}
.hero-cta:hover, .hero-cta:focus {
  background: var(--gold);
  color: var(--bg);
  letter-spacing: 0.34em;
}


/* =====================================================================
   6. SECTION DIVIDER — line • diamond • line
   ===================================================================== */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: var(--space-5) auto;
  max-width: 340px;
  padding: 0 1.5rem;
}
.ornament .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--gold-deep) 30%, var(--gold-deep) 70%, transparent);
}
.ornament .diamond {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep);
}


/* =====================================================================
   7. SECTION HEADINGS — shared "Eyebrow + Heading + Intro" pattern
   ===================================================================== */
.section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
  text-align: center;
}
.section-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 1.5rem;
  text-align: center;
}
.section-intro {
  font-size: 1.1rem;
  color: var(--cream-dim);
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-4);
  line-height: 1.7;
}


/* =====================================================================
   8. MISSION SECTION
   ===================================================================== */
.mission {
  padding: var(--space-5) 0 var(--space-5);
}
.mission-body p {
  font-size: 1.18rem;
  line-height: 1.85;
  color: var(--cream);
  margin: 0 0 1.4rem;
}
.mission-body p:first-of-type::first-letter {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 0.9;
  float: left;
  padding: 0.4rem 0.7rem 0 0;
  color: var(--gold);
  font-family: var(--serif);
}


/* =====================================================================
   9. THE COLLECTION — responsive grid of product cards
   ===================================================================== */
.collection {
  padding: var(--space-5) 0 var(--space-6);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: var(--space-3);
}

@media (min-width: 880px) {
  .collection-grid {
    /* Slightly tighter rhythm on desktop, but cards still flow if you
       add more. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem 2.5rem;
  }
}

/* ----- Individual book card ----- */
.book-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.015), rgba(0,0,0,0.18));
  border: 1px solid rgba(200, 159, 86, 0.16);
  padding: 1.6rem 1.6rem 1.8rem;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.book-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 159, 86, 0.45);
  box-shadow:
    0 18px 40px -22px rgba(0,0,0,0.7),
    0 0 0 1px rgba(200,159,86,0.06) inset;
}

.book-cover {
  /* Cover image aspect ratio.
     Currently 2:1 (wide / landscape) to match the brand's cover art.
     - If your covers are tall (twice as tall as wide), use:  1 / 2
     - If they're traditional book proportions, use:           2 / 3
     Change the two numbers below and the whole site updates. */
  aspect-ratio: 2 / 1;
  width: 100%;
  margin-bottom: 1.5rem;
  background: var(--bg-deep);
  border: 1px solid rgba(200, 159, 86, 0.18);
  overflow: hidden;
  position: relative;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center,
      rgba(200,159,86,0.12), transparent 65%),
    var(--bg-deep);
}
.cover-placeholder-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3rem;
  color: var(--gold-deep);
  letter-spacing: 0.05em;
}

.book-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.book-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--cream);
  margin: 0 0 0.7rem;
}

.book-description {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cream-dim);
  margin: 0 0 1.2rem;
}

.book-price {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 1.2rem;
  letter-spacing: 0.02em;
}

.book-meta {
  font-size: 0.85rem;
  color: var(--cream-faint);
  margin: 1rem 0 0;
  letter-spacing: 0.02em;
}

/* Coming-soon variants are quieter — no hover-lift, softer color */
.book-card--coming {
  opacity: 0.92;
}
.book-card--coming:hover {
  transform: none;
  border-color: rgba(200, 159, 86, 0.22);
  box-shadow: none;
}
.coming-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(200, 159, 86, 0.45);
  padding: 0.32rem 0.7rem;
  margin-bottom: 0.9rem;
  align-self: flex-start;
}


/* =====================================================================
  10. BUY BUTTON — used by the fallback link AND inherited by Payhip's
       embed when its data-theme attribute matches. The Payhip popup
       button will style itself; this is the styling for Method B
       (and for the placeholder before you paste in Payhip code).
   ===================================================================== */
.buy-button,
.buy-slot a {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background .3s var(--ease),
              color .3s var(--ease),
              letter-spacing .3s var(--ease);
  text-align: center;
}
.buy-button:hover,
.buy-button:focus,
.buy-slot a:hover,
.buy-slot a:focus {
  background: var(--gold-soft);
  color: var(--bg);
  letter-spacing: 0.3em;
}
.buy-slot {
  margin-top: auto;
  padding-top: 0.5rem;
}


/* =====================================================================
  11. CLOSING SECTION
   ===================================================================== */
.closing {
  padding: var(--space-5) 0 var(--space-6);
  text-align: center;
}
.closing-line {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.45;
  color: var(--cream);
  margin: 0 auto;
  max-width: 620px;
}
.closing-line em {
  font-style: italic;
  color: var(--gold-soft);
}


/* =====================================================================
  12. FOOTER
   ===================================================================== */
.site-footer {
  border-top: 1px solid rgba(200, 159, 86, 0.18);
  padding: var(--space-4) 0 var(--space-4);
  background: var(--bg-deep);
}
.footer-inner {
  text-align: center;
}
.footer-brand {
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 0.6rem;
}
.footer-line {
  font-style: italic;
  color: var(--cream-dim);
  margin: 0 0 1.2rem;
  font-size: 1rem;
}
.footer-fineprint {
  font-size: 0.82rem;
  color: var(--cream-faint);
  letter-spacing: 0.04em;
  margin: 0;
}


/* =====================================================================
  13. SCROLL-IN ANIMATIONS — subtle, dignified.
       Activated by JavaScript adding .is-visible. If JS is off or the
       user prefers reduced motion, content is shown immediately.
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .hero-cta, .buy-button {
    transition: none;
  }
}


/* =====================================================================
  14. READERS' REVIEWS — card buttons + modal popups
       Each product card carries small "Read reviews" and "Leave a
       review" buttons. Both open a shared <dialog> modal scoped to
       the book that was clicked.
   ===================================================================== */

/* ----- Secondary action buttons inside each product card -----
   Stacked vertically with real breathing room. Clearly tappable
   buttons, smaller and quieter than Buy Now so they sit underneath
   without competing. Ghost style at rest, soft warm fill on hover,
   slight press on click. */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.6rem 0 1.4rem;
}
.review-action {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid rgba(200, 159, 86, 0.35);
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  text-align: center;
  transition: color .2s var(--ease),
              background .2s var(--ease),
              border-color .2s var(--ease),
              transform .1s var(--ease);
}
.review-action:hover,
.review-action:focus-visible {
  color: var(--cream);
  background: rgba(200, 159, 86, 0.12);
  border-color: var(--gold);
  outline: none;
}
.review-action:active {
  transform: translateY(1px);
}
.review-action .ra-icon {
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
}
.review-action .ra-label { white-space: nowrap; }

/* The middot separator is no longer used; hide if older HTML still
   carries it so the layout stays clean. */
.card-actions-sep { display: none; }

/* ----- Shared modal styles for <dialog> elements ----- */
.modal {
  border: 1px solid rgba(200, 159, 86, 0.4);
  background: var(--bg);
  color: var(--cream);
  padding: 0;
  max-width: 640px;
  width: calc(100% - 2rem);
  max-height: 90vh;
  border-radius: 0;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(8, 6, 4, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-inner {
  padding: 2.4rem 1.8rem 1.8rem;
  overflow-y: auto;
  max-height: 90vh;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: transparent;
  border: 0;
  color: var(--cream-dim);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  z-index: 2;
  font-family: var(--serif);
}
.modal-close:hover,
.modal-close:focus-visible {
  color: var(--gold);
  outline: none;
}
.modal-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
  text-align: center;
}
.modal-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--cream);
  font-weight: 500;
  margin: 0 0 1.4rem;
  text-align: center;
  line-height: 1.35;
}
.modal-title .modal-title-lead {
  display: block;
  font-style: normal;
  color: var(--cream-dim);
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}
.modal-title em {
  font-style: italic;
  color: var(--gold-soft);
  display: block;
  font-size: 1.4rem;
}

/* When the read-reviews modal is empty */
.reviews-empty-wrap {
  text-align: center;
  padding: 1rem 0 0.5rem;
}
.reviews-empty-wrap .reviews-empty {
  margin: 0 0 1.2rem;
}
.reviews-empty-wrap .review-submit {
  margin: 0 auto;
}

/* ----- Summary: average rating + count, shown at the top ----- */
.reviews-summary {
  margin: 0 auto var(--space-4);
  text-align: center;
}
.rating-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rating-summary .rating-stars {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.rating-summary .rating-average {
  font-size: 1.6rem;
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rating-summary .rating-count {
  font-size: 1rem;
  color: var(--cream-dim);
  font-style: italic;
}
.star-on  { color: var(--gold); }
.star-off { color: rgba(200, 159, 86, 0.22); }

/* ----- Review cards ----- */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0 auto var(--space-4);
}
.review-card {
  border-left: 2px solid var(--gold-deep);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.18));
  padding: 1.2rem 1.4rem;
}
.review-stars {
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.review-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cream);
  margin: 0 0 0.8rem;
  white-space: pre-wrap;
}
.review-meta {
  font-size: 0.88rem;
  color: var(--cream-faint);
  margin: 0;
  letter-spacing: 0.02em;
}
.review-name { color: var(--cream-dim); }
.review-divider { margin: 0 0.45rem; color: var(--gold-deep); }
.review-date  { font-style: italic; }

.reviews-empty {
  text-align: center;
  color: var(--cream-dim);
  font-style: italic;
  margin: 0 auto var(--space-4);
}

/* ----- The submission form (lives inside the form modal) ----- */
.review-form-intro {
  text-align: center;
  color: var(--cream-dim);
  margin: 0 auto 1.8rem;
  max-width: 460px;
  font-style: italic;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 560px;
  margin: 0 auto;
}
.form-row { display: flex; flex-direction: column; }
.form-label {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.form-hint {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--cream-faint);
  font-style: italic;
  margin-left: 0.4rem;
}
.req {
  color: var(--gold-soft);
  margin-left: 0.2rem;
}

.review-form input[type="text"],
.review-form textarea {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
  background: var(--bg-deep);
  border: 1px solid rgba(200, 159, 86, 0.25);
  padding: 0.75rem 0.95rem;
  border-radius: 0;
  transition: border-color .25s var(--ease);
}
.review-form input[type="text"]::placeholder,
.review-form textarea::placeholder {
  color: var(--cream-faint);
  font-style: italic;
}
.review-form input[type="text"]:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.review-form textarea { resize: vertical; min-height: 140px; }

/* ----- Star rating input -----
   Native radio buttons styled as stars. We put them in reverse DOM
   order and use flex row-reverse so we can light up earlier stars on
   hover/check via the ~ sibling selector. The hidden radios remain
   focusable and arrow-key-navigable, so keyboard users get full
   functionality. Mobile users just tap. */
.rating-input { border: 0; padding: 0; margin: 0; }
.rating-input legend {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
}
.stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.stars label {
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(200, 159, 86, 0.22);
  cursor: pointer;
  padding: 0 0.18rem;
  transition: color .2s var(--ease), transform .15s var(--ease);
  user-select: none;
}
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label {
  color: var(--gold);
}
.stars label:active { transform: scale(1.08); }
.stars input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Honeypot: present in the DOM but completely off-screen so bots fill
   it while humans never see it. */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status messages after a submit attempt. */
.review-status {
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  text-align: center;
  font-style: italic;
  margin: 0;
}
.status-success {
  color: var(--gold-soft);
  border-color: rgba(200, 159, 86, 0.35);
  background: rgba(200, 159, 86, 0.06);
}
.status-error {
  color: #e7b6a3;
  border-color: rgba(231, 182, 163, 0.3);
  background: rgba(231, 182, 163, 0.05);
}
.status-pending { color: var(--cream-dim); }

.review-submit {
  align-self: center;
  margin-top: 0.4rem;
  min-width: 200px;
}
.review-submit:disabled { opacity: 0.6; cursor: wait; }


/* =====================================================================
  15. MOBILE TUNING — most visitors are on phones.
       The grid auto-stacks above; this section refines spacing.
   ===================================================================== */
@media (max-width: 640px) {
  body { font-size: 1.05rem; }

  .container { padding: 0 1.2rem; }

  .hero { min-height: 78vh; }
  .hero-inner { padding: var(--space-5) 1.2rem; }
  .hero-eyebrow { letter-spacing: 0.32em; }
  .hero-cta { padding: 0.85rem 1.7rem; letter-spacing: 0.24em; }

  .mission, .collection, .closing { padding-left: 0; padding-right: 0; }

  .book-card { padding: 1.3rem 1.3rem 1.5rem; }
  .book-title { font-size: 1.25rem; }

  .ornament { margin: var(--space-4) auto; }

  /* The action buttons are already stacked; just tighten spacing
     a touch on phones. */
  .card-actions { gap: 0.55rem; margin: 1.4rem 0 1.2rem; }
  .review-action { letter-spacing: 0.18em; }

  /* Modals on phones */
  .modal { width: calc(100% - 1.2rem); max-height: 92vh; }
  .modal-inner { padding: 2.2rem 1.2rem 1.4rem; max-height: 92vh; }
  .modal-title { font-size: 1.2rem; }
  .modal-title em { font-size: 1.25rem; }

  /* Stars + cards on phones */
  .stars label { font-size: 2.1rem; }
  .review-card { padding: 1rem 1.1rem; }
}