/* ==========================================================================
   Maureen A. Miller — v2 theme
   Palette is drawn from the cover art: deep ocean navy, warm gold, warm paper.
   ========================================================================== */

:root {
  --ink:        #0f1e2b;  /* headings, near-black with a navy cast */
  --ink-soft:   #55606b;  /* body copy */
  --deep:       #12314a;  /* section fills */
  --deep-dark:  #0b1a27;  /* footer, hero scrim */
  --gold:       #c08a2e;  /* accent — from the ECHOES titling */
  --gold-light: #e0b45f;
  --paper:      #fbf9f6;  /* warm off-white, never #fff */
  --paper-alt:  #f3efe9;
  --rule:       rgba(15, 30, 43, .12);

  --nav-height: 64px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------- base ---------- */

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-face {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

a { color: var(--deep); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

/* An eyebrow label — small caps above a heading. Used instead of decorative
   icons to establish hierarchy. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
  display: block;
}

.rule-short {
  width: 56px;
  height: 2px;
  background: var(--gold);
  border: 0;
  opacity: 1;
  margin: 1.25rem 0;
}

.section { padding: 5rem 0; }
@media (min-width: 992px) { .section { padding: 6.5rem 0; } }
.section-paper { background: var(--paper); }
.section-alt   { background: var(--paper-alt); }
.section-deep  { background: var(--deep); color: rgba(255,255,255,.82); }
.section-deep h1, .section-deep h2, .section-deep h3 { color: #fff; }

/* Section heading with a hairline rule that fills the remaining width. */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.section-head h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.section-deep .section-head::after { background: rgba(255,255,255,.22); }

/* -------------------------------------------------------- buttons -------- */

.btn-gold {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 2px;
  padding: .8rem 1.9rem;
  transition: background .18s ease, border-color .18s ease;
}
.btn-gold:hover, .btn-gold:focus { background: #a8761f; border-color: #a8761f; color: #fff; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 2px;
  padding: .8rem 1.9rem;
  transition: background .18s ease, color .18s ease;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 2px;
  padding: .8rem 1.9rem;
}
.btn-ghost-light:hover { background: #fff; color: var(--deep); }

/* Retailer links: text, not logo soup. Reads as a considered row. */
.retailers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;
}
.retailers a {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .55rem 1rem;
  background: #fff;
  transition: border-color .18s ease, color .18s ease;
}
.retailers a:hover { border-color: var(--gold); color: var(--gold); }

/* ----------------------------------------------------------- hero -------- */

.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--deep-dark);
  overflow: hidden;
  padding: calc(var(--nav-height) + 3rem) 0 3rem;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
/* Directional scrim. The artwork is dark on the left and carries the face on
   the right, so weight the shading left and let the portrait stay visible. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7,17,26,.94) 0%, rgba(7,17,26,.82) 32%, rgba(7,17,26,.35) 58%, rgba(7,17,26,.12) 100%),
    linear-gradient(to bottom, rgba(7,17,26,.55) 0%, rgba(7,17,26,0) 35%);
}
.hero-inner { position: relative; z-index: 2; max-width: 33rem; }
.hero-name {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.02;
  margin: 0 0 1.25rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.hero-kicker {
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.25rem;
}
.hero-tagline {
  color: rgba(255,255,255,.9);
  font-size: 1.15rem;
  max-width: 31rem;
  margin-bottom: 2.25rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
@media (max-width: 991.98px) {
  .hero { min-height: 70vh; }
  /* Pull the frame toward the face so the subject survives the narrow crop. */
  .hero-media { object-position: 66% center; }
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(7,17,26,.62) 0%, rgba(7,17,26,.78) 55%, rgba(7,17,26,.92) 100%);
  }
}

/* --------------------------------------------------- featured book ------- */

.featured-cover {
  width: 100%;
  max-width: 340px;
  height: auto;
  box-shadow: 0 24px 60px rgba(15,30,43,.28);
}
.featured-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 .35rem;
}
.featured-sub {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.featured-blurb { font-size: 1.0625rem; }
.featured-blurb p:last-of-type { margin-bottom: 0; }

/* Pull quote — the hook line, set large. */
.hook {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 1.5rem;
  margin: 0 0 1.75rem;
}

/* --------------------------------------------------------- series -------- */

/* Rectangular covers, not circles — circles crop the artwork and the type. */
.series-item { display: block; text-decoration: none; height: 100%; }
.series-art {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--paper-alt);
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 30px rgba(15,30,43,.14);
}
.series-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.series-item:hover .series-art img { transform: scale(1.04); }
.series-name {
  font-size: 1.25rem;
  margin: 0 0 .5rem;
  transition: color .18s ease;
}
.series-item:hover .series-name { color: var(--gold); }
.series-blurb { font-size: .9375rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------ bio -------- */

.bio-portrait {
  width: 100%;
  max-width: 380px;
  height: auto;
  box-shadow: 0 20px 50px rgba(15,30,43,.22);
}

/* -------------------------------------------------------- newsletter ----- */

.newsletter-copy { max-width: 34rem; }

/* ------------------------------------------------------------ nav -------- */

.navbar-v2 {
  background: var(--deep-dark);
  padding: 0;
  min-height: var(--nav-height);
}
.navbar-v2 .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
.navbar-v2 .nav-link {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  padding: .5rem .9rem;
}
.navbar-v2 .nav-link:hover,
.navbar-v2 .nav-link.active { color: var(--gold-light); }
.navbar-v2 .dropdown-menu {
  background: var(--deep-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  padding: .5rem 0;
}
.navbar-v2 .dropdown-item {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding: .6rem 1.4rem;
}
.navbar-v2 .dropdown-item:hover,
.navbar-v2 .dropdown-item.active {
  background: transparent;
  color: var(--gold-light);
}

/* --------------------------------------------------------- footer -------- */

.footer-v2 { background: var(--deep-dark); color: rgba(255,255,255,.6); }
.footer-v2 h3 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-v2 a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-v2 a:hover { color: var(--gold-light); }
.footer-v2 ul { list-style: none; padding: 0; margin: 0; }
.footer-v2 ul li { margin-bottom: .55rem; font-size: .9375rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { display: inline-flex; opacity: .75; transition: opacity .18s ease; }
.footer-social a:hover { opacity: 1; }

/* ==========================================================================
   Interior pages
   These replace the per-page <style> blocks the old site carried.
   ========================================================================== */

/* Fixed navbar offset. A page uses either a .nav-spacer div or main's padding,
   never both, and the hero supplies its own. */
.nav-spacer { height: var(--nav-height); }

/* ------------------------------------------------------- page headers ---- */

.page-title,
.display-5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 4vw, 3rem);
}
.accent-bar {
  width: 56px;
  height: 2px;
  background: var(--gold);
  border-radius: 0;
}
.section-soft {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
}
.section-title {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
}

/* Bootstrap's blue, redirected to the house palette. */
.text-primary { color: var(--ink) !important; }
.text-dark { color: var(--ink) !important; }
.lead, .lead-lg { font-weight: 400; }
.lead-lg { font-size: 1.0625rem; line-height: 1.8; }
section p { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft); }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 2px !important;
  padding: .8rem 1.9rem;
}
.btn-primary:hover, .btn-primary:focus { background: #a8761f; border-color: #a8761f; }
.btn-outline-primary {
  border-color: var(--ink);
  color: var(--ink);
  border-radius: 2px;
  font-weight: 600;
}
.btn-outline-primary:hover { background: var(--ink); border-color: var(--ink); }

/* Soften the old pill/blob geometry site-wide. */
.rounded-4, .rounded-3 { border-radius: 3px !important; }

/* --------------------------------------------------- book detail pages --- */

/* Series banner artwork */
main > img[alt$="Banner"] {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.purchase-links a {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none;
  border: 1px solid var(--rule) !important;
  border-radius: 2px;
  padding: .55rem 1rem;
  background: #fff;
  transition: border-color .18s ease, color .18s ease;
}
.purchase-links a:hover {
  background: #fff !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

.quote-section { font-family: var(--font-display); color: var(--ink); background: var(--paper-alt); }
.quote-section em { color: var(--ink-soft); }
.text-shadow { text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.hero-beneath, .hero-beyond { height: 34vh; overflow: hidden; }
.hero-beneath img, .hero-beyond img { object-fit: contain; }

/* ------------------------------------------------------ catalog cards ---- */

.book-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: none;
  transition: border-color .18s ease, transform .18s ease;
}
.book-card:hover { border-color: var(--gold); transform: translateY(-2px); }
/* Transparent behind the cover — no beige plate showing around the artwork. */
.book-img-wrap { overflow: hidden; background: transparent; }
.book-img { width: 100%; height: auto; display: block; }
.book-card .book-title a:hover { color: var(--gold-text); }
.book-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.book-meta {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.book-card p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); }
.price-badge, .badge-free, .badge-coming, .badge-series {
  border-radius: 2px !important;
  font-weight: 600;
  letter-spacing: .06em;
  font-size: .6875rem !important;
  text-transform: uppercase;
  padding: .35rem .6rem;
}
.price-badge { background: var(--ink) !important; color: #fff !important; }
.badge-free { background: #1f7a4d !important; color: #fff !important; }
.badge-coming { background: var(--paper-alt) !important; color: var(--ink) !important; border: 1px solid var(--gold); }
.badge-series { background: var(--paper-alt) !important; color: var(--ink-soft) !important; }

section.category + section.category { margin-top: 3rem; }
section.category .section-title { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* ------------------------------------------------- free / audio cards ---- */

.book-cover, .book-cover-frame img {
  width: 100%;
  max-width: 190px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(15,30,43,.16);
}
.audio-card h3 { font-size: 1.05rem; }
.audio-card .lead { font-size: .9375rem; line-height: 1.65; }
.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .04em;
}
.btn-dark:hover { background: var(--deep); border-color: var(--deep); }
.badge.bg-warning {
  background: var(--gold) !important;
  color: #fff !important;
  border-radius: 2px !important;
  letter-spacing: .08em;
  font-weight: 600;
}

/* ------------------------------------------------------------- about ----- */

.headshot { width: 100%; max-width: 300px; height: auto; border-radius: 0; }
.about-figure, figure.rounded-circle { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.about-figure img, figure img.rounded-circle {
  border-radius: 2px !important;
  box-shadow: 0 18px 44px rgba(15,30,43,.2);
}
.prose h3 { font-size: 1.15rem; margin-top: 2rem; }
.newsletter-cta {
  background: var(--deep);
  border-radius: 3px !important;
  color: rgba(255,255,255,.85);
}
.newsletter-cta h3, .prose .newsletter-cta h3 { color: #fff !important; }
.newsletter-cta p { color: rgba(255,255,255,.75) !important; }

.subscriber-band { background: var(--deep); }
.subscriber-card { background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; }
.subscriber-eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-light);
}

/* ----------------------------------------------------------- contact ----- */

.contact-section { padding: 5rem 0; background: var(--paper); }
.contact-card {
  max-width: 620px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3rem 2rem;
}
.btn-email {
  background: var(--gold);
  color: #fff;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .8rem 1.9rem;
}
.btn-email:hover { background: #a8761f; color: #fff; }
.social-icons a { color: var(--ink); font-size: 1.5rem; transition: color .18s ease; }
.social-icons a:hover { color: var(--gold); }

/* --------------------------------------------------------------- 404 ----- */

.notfound-section { padding: 7rem 0; }
.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

/* Cap catalog cover height so cards stay uniform and scannable. */
.book-img-wrap { display: flex; justify-content: center; background: transparent; }
.book-img { max-height: 300px; width: auto; max-width: 100%; }

/* Card rows still align, but taller covers are fitted rather than cropped. */
.book-cover, .book-cover-frame img {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: bottom center;
  box-shadow: none;
  filter: drop-shadow(0 10px 22px rgba(15,30,43,.2));
}

/* Audiobook art is square, not 2:3 — don't crop it to portrait. */
.audio-card .book-cover { aspect-ratio: 1 / 1; max-width: 210px; }

/* Let long titles shrink so the price badge cannot push past the card edge. */
.book-card .book-title { min-width: 0; }
.book-card .badge { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
   Series pages
   ========================================================================== */

/* Banner as a proper hero rather than a 200px strip. */
.series-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  background: var(--deep-dark);
  overflow: hidden;
}
.series-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.series-hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,17,26,.92) 0%, rgba(7,17,26,.45) 45%, rgba(7,17,26,.1) 80%);
}
.series-hero .inner { position: relative; z-index: 2; padding: 3rem 0 2.5rem; }
.series-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
.series-hero .series-kicker {
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .85rem;
}

/* Art that already carries the series name — show it whole, no overlay. */
/* All series banners share one height, matching the 1600x206 house format. */
.series-plate { background: var(--deep-dark); }
.series-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 206;
  object-fit: cover;
  object-position: center;
}

/* Jump links to each book on the page. */
.series-nav {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
}
.series-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.series-nav a {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 2px;
  padding: .5rem .9rem;
  transition: border-color .18s ease, color .18s ease;
}
.series-nav a:hover { border-color: var(--gold); color: var(--gold); }

/* Book entries: alternating sides, generous rhythm, hairline separators. */
.book-entry { padding: 4.5rem 0; border-top: 1px solid var(--rule); background: var(--paper); }
.book-entry:nth-of-type(even) { background: var(--paper-alt); }
@media (min-width: 992px) {
  .book-entry:nth-of-type(even) .row { flex-direction: row-reverse; }
}
.book-entry .cover-col { text-align: center; }
.book-entry .cover-col img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 22px 55px rgba(15,30,43,.26);
}
.book-entry h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  margin: 0 0 1rem;
  text-transform: none;
}
.book-entry .lead-hook {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}
.book-entry p { font-size: 1.0625rem; line-height: 1.8; }

/* Series-page quote block */
.quote-section {
  background: var(--deep);
  color: #fff;
  padding: 3.5rem 0;
  border: 0;
}
.quote-section p, .quote-section em { color: rgba(255,255,255,.9); }

/* Title bar sits under the artwork, so overlaid type never fights the
   lettering already baked into the banner images. */
.series-titlebar {
  background: var(--deep-dark);
  color: #fff;
  padding: 2rem 0 2.25rem;
}
.series-titlebar h1 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0;
}
.series-titlebar .series-kicker {
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .7rem;
}
.series-titlebar .btn-ghost {
  border-color: rgba(255,255,255,.5);
  color: #fff;
  padding: .5rem 1.1rem;
  font-size: .75rem;
}
.series-titlebar .btn-ghost:hover { background: #fff; color: var(--deep-dark); }

/* Explicit alternation (nth-of-type would also count hero/quote sections). */
@media (min-width: 992px) {
  .book-entry .row { flex-direction: row; }
  .book-entry.flip .row { flex-direction: row-reverse; }
  .book-entry:nth-of-type(even) .row { flex-direction: inherit; }
}
.book-entry.flip { background: var(--paper-alt); }
.book-entry:not(.flip) { background: var(--paper); }

/* Quote band: own the background so a utility class cannot strand white
   text on a white fill. */
.quote-section { background: var(--deep) !important; }
.quote-section .text-warning { color: var(--gold-light) !important; }

/* --------------------------------------------------- dark-context text ---
   Bootstrap's colour utilities carry !important, so any of them used inside a
   dark band would otherwise render dark-on-dark. Re-point them per context. */
.section-deep .text-dark, .quote-section .text-dark,
.subscriber-band .text-dark, .newsletter-cta .text-dark,
.series-titlebar .text-dark, .footer-v2 .text-dark { color: #fff !important; }

.section-deep .text-secondary, .quote-section .text-secondary,
.subscriber-band .text-secondary, .newsletter-cta .text-secondary,
.series-titlebar .text-secondary, .footer-v2 .text-secondary,
.section-deep .text-muted, .subscriber-band .text-muted,
.newsletter-cta .text-muted { color: rgba(255,255,255,.78) !important; }

.subscriber-band .subscriber-eyebrow,
.section-deep .subscriber-eyebrow { color: var(--gold-light) !important; }

.quote-section .btn-outline-primary, .subscriber-band .btn-outline-primary,
.section-deep .btn-outline-primary, .newsletter-cta .btn-outline-primary {
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.quote-section .btn-outline-primary:hover, .subscriber-band .btn-outline-primary:hover,
.section-deep .btn-outline-primary:hover, .newsletter-cta .btn-outline-primary:hover {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
}

/* `section p` targets the element directly and so beat the inherited light
   colour on dark bands. Restore it. */
.section-deep p, .quote-section p, .subscriber-band p,
.newsletter-cta p, .series-titlebar p { color: rgba(255,255,255,.85); }

/* The display gold is for large type and rules. Small uppercase labels on
   paper need a darker tone to clear WCAG AA. */
:root { --gold-text: #8a6218; }
.eyebrow, .featured-sub, .book-meta { color: var(--gold-text); }
/* On dark grounds the light gold already has plenty of contrast. */
.section-deep .eyebrow, .series-titlebar .series-kicker,
.hero .hero-kicker, .subscriber-band .subscriber-eyebrow { color: var(--gold-light); }

/* Gold is a mid-tone: white on it only reaches ~3:1. Ink on gold clears AA
   comfortably and reads sharper. */
.btn-gold, .btn-primary, .btn-email, .badge.bg-warning, .btn-gold:hover,
.btn-primary:hover, .btn-email:hover { color: var(--ink) !important; }
.btn-gold:hover, .btn-primary:hover, .btn-email:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* Bootstrap's secondary grey is too light on warm paper. */
.text-secondary { color: var(--ink-soft) !important; }

/* ==========================================================================
   Series pages, take two — cover-grid led, branded buy buttons, more air
   ========================================================================== */

/* "In this series" — covers as the primary index, not a text chip row. */
.series-index { padding: 4.5rem 0 3.5rem; background: var(--paper); }
@media (min-width: 992px) { .series-index { padding: 5.5rem 0 4rem; } }
.series-index-head {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 2rem;
}
.series-grid { display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .series-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .series-grid { grid-template-columns: repeat(5, 1fr); gap: 2.5rem 2rem; } }
.series-grid a { display: block; text-decoration: none; }
/* Covers vary in ratio (2:3, 5:8, and the boxed set wider still). The slot is
   uniform so labels line up; the artwork is never cropped to fit it. */
.series-grid .cover {
  display: block;
  aspect-ratio: 2 / 3;
}
.series-grid img {
  /* Fill the slot explicitly and let object-fit letterbox the artwork.
     Relying on max-height inside a flex + aspect-ratio box sizes
     inconsistently in Safari, which produced uneven cover heights. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 2px;
  /* drop-shadow follows the artwork edge; box-shadow would trace the box. */
  filter: drop-shadow(0 14px 26px rgba(15,30,43,.26));
  transition: transform .35s ease, filter .35s ease;
}
.series-grid a:hover img {
  transform: translateY(-6px);
  filter: drop-shadow(0 22px 34px rgba(15,30,43,.34));
}
.series-grid .num {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 1rem 0 .25rem;
}
.series-grid .name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.series-grid a:hover .name { color: var(--gold-text); }

/* Branded retailer buttons. */
.retail-logos { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* Icon links must shed the .purchase-links text-button chrome (white fill,
   border, padding) — that box was what appeared around each logo. */
.retail-logos a {
  display: inline-flex;
  line-height: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.retail-logos img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  /* No box-shadow: on a transparent logo it draws a rectangle around the
     element and reads as a white tile behind the icon. */
  transition: transform .18s ease, opacity .18s ease;
}
.retail-logos a:hover img { transform: translateY(-3px); opacity: .85; }
/* The icons are white rounded-square badges (transparent only outside the
   corner radius), so the white plate is part of the artwork. multiply drops
   it into the page colour, leaving just the logos. */
.retail-logos img { mix-blend-mode: multiply; }
/* Text links that share the icon row (Universal Link, per-book Goodreads)
   keep pill chrome; only the logo links are stripped bare. */
.retail-logos a.universal, .retail-logos a.btn {
  background: #fff !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  padding: .55rem .9rem !important;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .55rem .9rem;
  background: #fff;
  line-height: 1.2;
}
.retail-logos a.universal:hover, .retail-logos a.btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold-text) !important;
  background: #fff !important;
}
.retail-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .85rem;
  display: block;
}

/* More air in the book entries. */
.book-entry { padding: 5.5rem 0; }
@media (min-width: 992px) { .book-entry { padding: 7rem 0; } }
.book-entry .row { --bs-gutter-x: 4rem; }

/* The wide gutter's negative row margin exceeded the container padding on
   small screens. Only widen it where there's room. */
.book-entry .row { --bs-gutter-x: 1.5rem; }
@media (min-width: 992px) { .book-entry .row { --bs-gutter-x: 4rem; } }

/* Ghost buttons sitting on the dark quote band. */
.quote-section .btn-ghost, .section-deep .btn-ghost, .subscriber-band .btn-ghost {
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.quote-section .btn-ghost:hover, .section-deep .btn-ghost:hover,
.subscriber-band .btn-ghost:hover { background: #fff; color: var(--deep); }

/* ---------------------------------------------- hero refinements --------
   Author's notes: larger kicker, name must never wrap, more vivid artwork. */
.hero .hero-kicker {
  font-size: clamp(.875rem, 1.5vw, 1.125rem);
  letter-spacing: .22em;
  margin-bottom: 1.5rem;
}
.hero-name {
  white-space: nowrap;
  font-size: clamp(1.9rem, 7vw, 4.75rem);
}
.hero-tagline { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
/* Artwork shown at its true colour — no filter. The scrim is pulled back to
   a narrow wedge behind the type only, so the image itself stays untouched. */
.hero-media { filter: none; }
.hero-scrim {
  background: linear-gradient(to right,
    rgba(7,17,26,.82) 0%,
    rgba(7,17,26,.62) 22%,
    rgba(7,17,26,.24) 40%,
    rgba(7,17,26,0) 55%);
}
@media (max-width: 991.98px) {
  /* Narrow screens put the type over the image, so the wedge runs vertically. */
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(7,17,26,.3) 0%,
      rgba(7,17,26,.55) 45%,
      rgba(7,17,26,.8) 100%);
  }
}

/* With the scrim pulled back, bright rays in the artwork pass behind the end
   of some lines. Local shadow keeps the type legible without dimming the
   image. */
.hero .hero-kicker { text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.75); }
.hero .hero-name   { text-shadow: 0 2px 6px rgba(0,0,0,.8), 0 4px 30px rgba(0,0,0,.65); }
.hero .hero-tagline{ text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.7); }

/* Victory Cove's banner is 2.63:1, the only one off the house format; bias the
   crop upward so the lettering survives. */
.series-plate img[src*="victory_cove"] { object-position: center 32%; }

/* Reserve the label line even when a card has no book number, so every title
   sits on the same baseline. min-height must match the rendered line box, not
   the font size, or an empty span comes up short. */
.series-grid .num { line-height: 1.75; min-height: 1.75em; }

/* The boxed-set render is the only cover with a baked-in white plate; every
   other cover is art to the edge. multiply drops that white into the page
   colour, and the render already carries its own shadow, so ours is removed
   (it would outline the white rectangle rather than the box). */
img[src*="boxed_set"] {
  mix-blend-mode: multiply;
  filter: none !important;
  box-shadow: none !important;
}

/* A short orienting note under a series title bar (e.g. how Zon relates to
   BEYOND). Sits between the banner and the cover grid. */
.series-note {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
  padding: 1.75rem 0;
}
.series-note p {
  margin: 0;
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold);
  padding-left: 1.25rem;
}
.series-note strong { color: var(--ink); }
.series-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.series-note a:hover { color: var(--gold-text); }