/*
Theme Name: Samantha Lovelock
Theme URI: https://samanthalovelock.com
Author URI: https://samanthalovelock.com.com
Description: Custom theme for author Samantha Lovelock — New Adult romance with a darker emotional edge.
Version: 1.2.10
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samantha-lovelock
Tags: custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready, e-commerce
*/

/* =========================================================
   Samantha Lovelock — Site
   Brand: pink / black / grey  ·  NA dark romance, slow burn
   ========================================================= */

/* ---------- Licensed custom font: Blackstone (signatures) ---------- */
@font-face {
  font-family: "Blackstone";
  src: url("assets/fonts/Blackstone.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #0B0B0D;
  --ink-2:      #161619;
  --smoke:      #25252A;
  --ash:        #6B6B74;
  --fog:        #D9D9DE;
  --paper:      #F6F5F3;
  --cream:      #FBFAF7;

  /* Brand palette */
  --pink:       #F895C7;   /* brand rose */
  --pink-deep:  #B85787;   /* deeper rose for emphasis / hover */
  --pink-soft:  #D7C0C7;   /* brand dusty mauve */
  --pink-wash:  #F8ECF2;   /* brand pale pink */
  --pink-glow:  rgba(248,149,199,.55);

  --serif:     "Fraunces", "Times New Roman", serif;
  --italic:    "Instrument Serif", "Fraunces", serif;
  --sans:      "Inter", -apple-system, "Segoe UI", sans-serif;
  --script:    "Caveat", "Homemade Apple", cursive;
  /* Licensed Blackstone font embedded via @font-face; Sacramento is the fallback. */
  --signature: "Blackstone", "Sacramento", "Dancing Script", cursive;

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 28px;

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

/* Subtle grain overlay for dark sections */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pink-deep);
}

.display {
  font-family: var(--serif);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  letter-spacing: -0.025em;
  line-height: 0.92;
  margin: 0;
}

.italic-accent {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  color: var(--pink-deep);
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: clamp(48px, 6.5vw, 96px) 0; position: relative; }

.rule {
  height: 1px;
  background: var(--fog);
  border: 0;
  margin: 0;
}

/* ---------- Top Bar ---------- */
.topbar {
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 51;
  overflow: hidden;
}
.topbar .marquee {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  justify-content: center;
  animation: none;
}
.topbar span::after {
  content: "✦";
  margin-left: 40px;
  color: var(--pink);
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Navigation ---------- */
header.nav {
  position: sticky;
  top: 40;
  z-index: 50;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 10px 28px -22px rgba(0,0,0,.35);
}
/* Default (legacy single-row) inner — used only as fallback if .nav-stack is absent. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
}
/* Stacked nav: paper logo row on top, contrasting ink bar below. */
.nav-logo-row {
  background: var(--paper);
  padding: 18px 0 12px;
  text-align: center;
}
.nav-logo-row .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Make sure the logo anchor + image sit dead-center regardless of which flavor
   of logo markup WP gives us (custom-logo-link vs our .logo fallback). */
.nav-logo-row .logo,
.nav-logo-row .custom-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.nav-logo-row .logo img,
.nav-logo-row .custom-logo-link img,
.nav-logo-row .custom-logo {
  display: block;
  margin: 0 auto;
}
.nav-actions-row {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.nav-actions-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 100%;
}
.logo .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--pink);
  border-radius: 50%;
}
/* Pin logo size on ALL pages (including WooCommerce, which injects `img { height: auto !important }`).
   Covers both the bundled fallback (.logo-img) and any custom logo uploaded via Customizer (.custom-logo).
   Larger on the stacked header because the logo is the visual anchor now. */
.nav-inner .logo img,
.nav-inner .logo .logo-img,
.nav-inner .logo .custom-logo {
  height: 72px !important;
  width: auto !important;
  max-width: 100%;
  display: block;
}
.nav.nav-stack .logo img,
.nav.nav-stack .logo .logo-img,
.nav.nav-stack .logo .custom-logo {
  height: clamp(80px, 9vw, 132px) !important;
}
@media (max-width: 560px) {
  .nav-inner .logo img,
  .nav-inner .logo .logo-img,
  .nav-inner .logo .custom-logo { height: 52px !important; }
  .nav.nav-stack .logo img,
  .nav.nav-stack .logo .logo-img,
  .nav.nav-stack .logo .custom-logo { height: 72px !important; }
  .nav-logo-row { padding: 12px 0 8px; }
  .nav-actions-row { padding: 10px 0; }
  .nav-actions-inner { gap: 18px; }
}
footer .logo-img {
  height: 96px;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (max-width: 820px) {
  footer .logo-img { height: 72px; }
}
  /* SLuppercaseWhite.png used in footer — no filter needed */
}

/* Portrait / photo support — overrides gradient fallback when image is present */
.portrait.has-photo {
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  position: relative;
}
.portrait.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.portrait.has-photo .cap { z-index: 1; color: #fff; }
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--paper);
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--pink); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--pink);
}
/* Kill default list markers when the primary menu is output by wp_nav_menu —
   %3$s strips the <ul>, but each item is still wrapped in an <li>. Without
   this reset, browsers render a disc before every menu label (• Home • Books …). */
.nav-links ul,
.nav-links-list,
.nav-links li,
.nav-links .menu-item {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li,
.nav-links .menu-item {
  display: inline-flex;
  align-items: center;
}
.nav-cta {
  padding: 10px 18px;
  background: var(--pink);
  color: var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  flex: 0 0 auto;
  white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--paper); color: var(--ink); }

.menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
}
.menu-btn:hover { background: rgba(255,255,255,.08); }

@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s;
}
.btn-primary {
  background: var(--pink);
  color: var(--ink);
  box-shadow: 0 10px 30px -12px var(--pink-glow);
}
.btn-primary:hover { background: var(--pink-deep); color: var(--paper); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-light {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--paper);
}
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--pink); color: var(--ink); }

.btn .arr {
  transition: transform .25s var(--ease);
}
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 620px at 85% 115%, rgba(184, 87, 135, .6) 0%, rgba(184, 87, 135, 0) 72%),
    radial-gradient(ellipse 700px 420px at 0% 0%, rgba(248, 149, 199, .10) 0%, transparent 65%),
    linear-gradient(160deg, var(--ink) 0%, #1a0f14 55%, #2a1820 100%);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(24px, 3vw, 44px) 0 clamp(28px, 3.5vw, 52px);
}
.hero .grain-layer { position: absolute; inset: 0; }
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  justify-items: start;
  /* Hero height. The clamp() reads: min size, preferred (scales with viewport),
     max cap. Lower these three numbers to shrink the hero. Raise them to grow it.
     Was: clamp(300px, 34vw, 440px). Mobile (<860px) has its own clamp below. */
  min-height: clamp(260px, 28vw, 380px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
}
.hero-text h1 { max-width: 720px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(36px, 4.2vw, 62px);
  /* Bumped from 0.98 to 1.06 so italic ascenders on .line-2 (Fraunces italic)
     have room to clear the descenders/baseline of line 1. Tweak between 1.02
     and 1.12 to taste — lower = tighter/more designed, higher = airier. */
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero h1 .line-2 {
  display: block;
  color: var(--pink);
  font-style: italic;
  font-weight: 400;
  font-family: var(--italic);
  font-size: 0.85em;
  letter-spacing: -0.01em;
}
/* Moody image panel on the right side of the hero */
.hero-image {
  position: relative;
  width: 100%;
  min-height: clamp(260px, 34vw, 440px);
  background-image: var(--sl-hero-right);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  overflow: hidden;
  filter: saturate(.85) contrast(1.05);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.75),
    0 20px 40px -20px rgba(184,87,135,.25);
}
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.18) 38%, transparent 62%),
    linear-gradient(180deg, transparent 60%, rgba(11,11,13,.6) 100%),
    radial-gradient(80% 60% at 100% 100%, rgba(184,87,135,.18), transparent 60%);
  pointer-events: none;
}

/* ---------- Hero meta strip (blurb + CTAs, sits below the hero on home) ---------- */
.hero-meta-strip {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-meta-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.hero-meta-inner .hero-lede {
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--fog);
  max-width: 56ch;
  margin: 0;
}
.hero-meta-inner .hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .hero-meta-inner { grid-template-columns: 1fr; }
  .hero-meta-inner .hero-ctas { justify-content: flex-start; }
}

.hero-book {
  position: relative;
  aspect-ratio: 5 / 8;
  max-width: 300px;
  margin-left: auto;
  background: linear-gradient(140deg, #1a1014 0%, #3d252f 42%, var(--pink-deep) 100%);
  border-radius: 8px;
  box-shadow:
    0 40px 80px -20px rgba(184,87,135,.35),
    0 20px 40px -10px rgba(0,0,0,.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  transform: rotate(-2deg);
  transition: transform .5s var(--ease);
}
.hero-book:hover { transform: rotate(0deg) translateY(-6px); }
.hero-book::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(80% 40% at 100% 100%, rgba(0,0,0,.35), transparent 70%);
  pointer-events: none;
}
.hero-book .bk-tag {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  position: relative;
}
.hero-book .bk-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 0.92;
  color: #fff;
  position: relative;
}
.hero-book .bk-author {
  font-family: var(--italic);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,.9);
  position: relative;
}

.hero-stamp {
  position: absolute;
  top: 24px;
  right: -30px;
  transform: rotate(12deg);
  background: var(--pink);
  color: var(--ink);
  padding: 8px 40px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

@media (max-width: 860px) {
  /* Mobile hero height — same shape as the desktop clamp above, but tuned for
     phones. Was: clamp(340px, 70vw, 520px). */
  .hero-grid { min-height: clamp(280px, 56vw, 420px); }
  .hero-book { margin: 0 auto; max-width: 280px; }
  .hero-text { gap: 12px; max-width: 100%; }
  .hero.has-bg::before { background-position: 70% center; }
  .hero.has-bg::after {
    background:
      linear-gradient(180deg,
        rgba(11,11,13,.55) 0%,
        rgba(11,11,13,.35) 40%,
        rgba(11,11,13,.55) 100%);
  }
}

/* ---------- Vibe strip ---------- */
.vibe-strip {
  background: var(--pink);
  color: var(--ink);
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.vibe-strip .marquee {
  display: flex;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 22px);
  white-space: nowrap;
  font-weight: 400;
}
.vibe-strip .marquee span:not(:last-child)::after {
  content: "✦";
  margin-left: 48px;
  font-style: normal;
}

/* ---------- Start Here ---------- */
.start-here {
  background: var(--cream);
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 8px 0 0;
  max-width: 14ch;
}
.section-head h2 em {
  font-family: var(--italic);
  color: var(--pink-deep);
  font-weight: 400;
}
.section-head p { max-width: 46ch; color: var(--ash); font-size: 17px; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--cream);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.book-card:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.1);
}
.cover {
  position: relative;
  aspect-ratio: 5 / 8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 30px -15px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 18px;
  color: #fff;
}
.cover-1 { background: linear-gradient(160deg, #0b0b0d 0%, #3a2029 50%, #b85787 100%); }
.cover-2 { background: linear-gradient(160deg, #0f0c15 0%, #2e1f2a 45%, #8a5f77 100%); }
.cover-3 { background: linear-gradient(160deg, #1a0a0f 0%, #3d1f2e 50%, #c7789e 100%); }
.cover-4 { background: linear-gradient(160deg, #0a0a0f 0%, #3a2a32 50%, #f895c7 120%); }
.cover-5 { background: linear-gradient(160deg, #1a1a1e 0%, #2a2a34 50%, #b85787 100%); }
.cover-6 { background: linear-gradient(160deg, #0b0b0d 0%, #2e1f28 40%, #f895c7 110%); }
.cover-7 { background: linear-gradient(160deg, #2e1a22 0%, #5a3d48 55%, #f8ecf2 130%); }
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 15% 0%, rgba(255,255,255,.2), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(0,0,0,.35), transparent 70%);
  pointer-events: none;
}
.cover .tag {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .85;
  position: relative;
}
.cover .t {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 0.95;
  position: relative;
}
.cover .a {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14px;
  opacity: .9;
  position: relative;
}

.book-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.book-title { font-family: var(--serif); font-weight: 900; font-size: 20px; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.book-number { font-family: var(--italic); font-style: italic; color: var(--ash); font-size: 14px; }
.book-blurb { font-size: 14px; color: var(--ash); margin: 0; }

.stamp {
  display: inline-block;
  background: var(--pink);
  color: var(--ink);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  align-self: flex-start;
}
.stamp.coming { background: var(--ink); color: var(--pink); }
.stamp.preorder { background: var(--pink-soft); color: var(--ink); }

/* ---------- Series callouts ---------- */
.series-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 1024px) { .series-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .series-row { grid-template-columns: 1fr; } }
.series-card {
  position: relative;
  overflow: hidden;
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  color: var(--paper);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .4s var(--ease);
}
.series-card:hover { transform: translateY(-6px); }
.series-card.one { background: linear-gradient(135deg, #0b0b0d 0%, #2c1a22 50%, #b85787 100%); }
.series-card.two { background: linear-gradient(135deg, #1a1a1e 0%, #3a2a32 50%, #f895c7 110%); }
.series-card .eyebrow { color: var(--pink-soft); }
.series-card h3 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.95;
  margin: 12px 0 8px;
  letter-spacing: -.02em;
}
.series-card h3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-soft); }
.series-card .count {
  font-family: var(--italic);
  font-style: italic;
  font-size: 18px;
  color: var(--pink-soft);
}
.series-card .arrow-link {
  align-self: flex-start;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .06em;
  font-weight: 600;
  margin-top: 24px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.series-card:hover .arrow-link { background: var(--pink); color: var(--ink); border-color: var(--pink); }

/* ---------- Pull quote ---------- */
.pull-quote {
  background: var(--cream);
  text-align: center;
}
.pull-quote blockquote {
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--ink);
}
.pull-quote blockquote em {
  background: linear-gradient(180deg, transparent 60%, var(--pink-soft) 60%);
  padding: 0 4px;
  font-style: italic;
}
.pull-quote cite {
  display: block;
  margin-top: 32px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Reviews carousel (one at a time, manual arrows + dots) */
.reviews-carousel {
  position: relative;
  margin: 24px auto 0;
  max-width: 900px;
}
.reviews-carousel .review-slide {
  display: none;
  animation: reviewFade .45s ease;
}
.reviews-carousel .review-slide.is-active { display: block; }
@keyframes reviewFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reviews-carousel blockquote { margin: 0 auto; }
.reviews-carousel .review-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
.reviews-carousel .review-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reviews-carousel .review-arrow:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
}
.reviews-carousel .review-dots {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.reviews-carousel .review-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--fog);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.reviews-carousel .review-dot.is-active {
  background: var(--pink-deep);
  transform: scale(1.2);
}
@media (max-width: 600px) {
  .reviews-carousel .review-controls { gap: 16px; margin-top: 28px; }
  .reviews-carousel .review-arrow { width: 40px; height: 40px; }
}

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.newsletter .grain-layer { position: absolute; inset: 0; }
.newsletter-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 860px) {
  .newsletter-inner { grid-template-columns: 1fr; }
}
.newsletter h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  margin: 8px 0 20px;
  letter-spacing: -0.03em;
}
.newsletter h2 em { font-family: var(--italic); font-style: italic; color: var(--pink); font-weight: 400; }
.newsletter p { color: var(--fog); max-width: 46ch; font-size: 17px; }
.newsletter .perks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
  color: var(--fog);
}
.newsletter .perks li::before {
  content: "✦";
  color: var(--pink);
  margin-right: 10px;
  font-size: 12px;
}

.signup {
  background: var(--ink-2);
  border: 1px solid var(--smoke);
  padding: 32px;
  border-radius: var(--radius);
}
.signup label {
  display: block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink-soft);
  margin-bottom: 8px;
  font-weight: 600;
}
.signup input,
.signup select {
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--smoke);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  margin-bottom: 14px;
  transition: border-color .2s var(--ease);
}
.signup input:focus,
.signup select:focus { outline: 0; border-color: var(--pink); }
.signup .small { font-size: 12px; color: var(--ash); margin-top: 12px; }

/* Kit (formerly ConvertKit) shortcode support — makes its form readable
   on the dark .signup wrapper. Works with default Kit form HTML. */
.signup .formkit-form,
.signup .seva-form {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.signup .formkit-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.signup .formkit-field {
  flex: 1 1 220px;
  margin: 0;
}
.signup .formkit-input {
  width: 100%;
  padding: 16px 18px;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--fog) !important;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 15px;
}
.signup .formkit-input::placeholder { color: var(--ash) !important; }
.signup .formkit-input:focus { outline: 0; border-color: var(--pink) !important; }
.signup .formkit-submit,
.signup button[type="submit"] {
  background: var(--pink) !important;
  color: var(--ink) !important;
  border: 0 !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s var(--ease);
  flex: 0 0 auto;
}
.signup .formkit-submit:hover,
.signup button[type="submit"]:hover { background: var(--pink-deep) !important; }
.signup .formkit-submit > span { color: var(--ink) !important; }
.signup .formkit-guarantee,
.signup .formkit-disclaimer,
.signup .formkit-subheader,
.signup .formkit-header {
  color: var(--fog) !important;
  font-size: 13px;
}
.signup .formkit-powered-by-convertkit-container,
.signup .formkit-powered-by-convertkit,
.signup .formkit-powered-by {
  color: var(--fog) !important;
  opacity: .6;
  margin-top: 12px;
}
.signup .formkit-alert {
  color: var(--paper) !important;
  font-size: 14px;
}

/* Paper / light-grey newsletter variant — used on the Books & Contact pages
   (matches the "Series" band on home so we don't drop back to pink-wash).
   `.light` kept as an alias for any legacy markup. */
.newsletter.paper,
.newsletter.light {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--fog);
  border-bottom: 1px solid var(--fog);
}
.newsletter.paper .grain-layer,
.newsletter.light .grain-layer { opacity: .04; }
.newsletter.paper p,
.newsletter.light p { color: var(--smoke); }
.newsletter.paper h2 em,
.newsletter.light h2 em { color: var(--pink-deep); }
.newsletter.paper .perks,
.newsletter.light .perks { color: var(--smoke); }
.newsletter.paper .perks li::before,
.newsletter.light .perks li::before { color: var(--pink-deep); }
.newsletter.paper .eyebrow,
.newsletter.light .eyebrow { color: var(--pink-deep); }

/* Light signup card — applies when either:
    - parent is .newsletter.paper / .newsletter.light (Books, Contact)
    - the .signup itself has a .signup-light helper class (Home only) */
.newsletter.paper .signup,
.newsletter.light .signup,
.signup.signup-light {
  background: #fff;
  border: 1px solid var(--fog);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.08);
  color: var(--ink);
}
.newsletter.paper .signup label,
.newsletter.light .signup label,
.signup.signup-light label { color: var(--pink-deep); }
.newsletter.paper .signup input,
.newsletter.paper .signup select,
.newsletter.light .signup input,
.newsletter.light .signup select,
.signup.signup-light input,
.signup.signup-light select {
  background: var(--paper);
  border: 1px solid var(--fog);
  color: var(--ink);
}
.newsletter.paper .signup input:focus,
.newsletter.paper .signup select:focus,
.newsletter.light .signup input:focus,
.newsletter.light .signup select:focus,
.signup.signup-light input:focus,
.signup.signup-light select:focus { border-color: var(--pink-deep); }
.newsletter.paper .signup input::placeholder,
.newsletter.light .signup input::placeholder,
.signup.signup-light input::placeholder { color: var(--ash); }
.newsletter.paper .signup .small,
.newsletter.light .signup .small,
.signup.signup-light .small { color: var(--ash); }

/* Kit form text — legibility on the light card */
.newsletter.paper .signup .formkit-guarantee,
.newsletter.paper .signup .formkit-disclaimer,
.newsletter.paper .signup .formkit-subheader,
.newsletter.paper .signup .formkit-header,
.newsletter.paper .signup .formkit-powered-by-convertkit-container,
.newsletter.paper .signup .formkit-powered-by-convertkit,
.newsletter.paper .signup .formkit-powered-by,
.newsletter.light .signup .formkit-guarantee,
.newsletter.light .signup .formkit-disclaimer,
.newsletter.light .signup .formkit-subheader,
.newsletter.light .signup .formkit-header,
.newsletter.light .signup .formkit-powered-by-convertkit-container,
.newsletter.light .signup .formkit-powered-by-convertkit,
.newsletter.light .signup .formkit-powered-by,
.signup.signup-light .formkit-guarantee,
.signup.signup-light .formkit-disclaimer,
.signup.signup-light .formkit-subheader,
.signup.signup-light .formkit-header,
.signup.signup-light .formkit-powered-by-convertkit-container,
.signup.signup-light .formkit-powered-by-convertkit,
.signup.signup-light .formkit-powered-by { color: var(--ash) !important; }
.newsletter.paper .signup .formkit-alert,
.newsletter.light .signup .formkit-alert,
.signup.signup-light .formkit-alert { color: var(--ink) !important; }

/* ---------- About teaser ---------- */
.about-teaser-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 820px) { .about-teaser-inner { grid-template-columns: 1fr; } }
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 340px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(145deg, #2c1a22, #b85787 130%);
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,.25), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(0,0,0,.5), transparent 70%);
}
.portrait .cap {
  position: relative;
  font-family: var(--script);
  font-size: 34px;
  line-height: 1;
  color: var(--pink-soft);
}
.about-text h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.03em; line-height: 0.98; margin: 0 0 24px; }
.about-text h2 em { font-family: var(--italic); font-weight: 400; color: var(--pink-deep); }
.about-text p { font-size: 17px; color: var(--smoke); max-width: 54ch; }
.about-text .signature { font-family: var(--signature); color: var(--pink-deep); font-size: 52px; line-height: 1; margin-top: 16px; display: inline-block; }

/* ---------- Press / Logos ---------- */
.press {
  border-top: 1px solid var(--fog);
  border-bottom: 1px solid var(--fog);
  padding: 28px 0;
  background: var(--cream);
}
.press-inner {
  display: flex;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--ash);
}
.press-inner strong { font-family: var(--serif); font-style: normal; color: var(--ink); font-weight: 900; letter-spacing: -.01em; margin-right: 8px; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--fog);
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
}
footer .grain-layer { position: absolute; inset: 0; }
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 64px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
footer .logo { color: var(--paper); font-size: 32px; margin-bottom: 16px; display: inline-flex; }
footer .logo .dot { background: var(--pink); }
footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink-soft);
  margin: 0 0 18px;
}
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
footer ul a:hover { color: var(--pink); }
footer .tag-line { font-family: var(--italic); font-style: italic; font-size: 18px; max-width: 30ch; color: var(--fog); }
.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--smoke);
  font-size: 12px;
  color: var(--ash);
  letter-spacing: .06em;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Page header (non-home) ---------- */
.page-head {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
.page-head .grain-layer { position: absolute; inset: 0; }
.page-head-inner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
@media (max-width: 700px) { .page-head-inner { grid-template-columns: 1fr; } }
.page-head h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(44px, 7vw, 104px);
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 16px 0 0;
}
.page-head h1 em { font-family: var(--italic); font-weight: 400; color: var(--pink); }
.page-head p { max-width: 42ch; color: var(--fog); font-size: 17px; margin-top: 16px; }
.page-crumbs { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--pink-soft); }
.page-crumbs a { color: var(--pink-soft); }

/* ---------- Books page ---------- */
.series-block {
  padding-top: clamp(40px, 6vw, 80px);
}
.series-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--fog);
}
.series-header h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.025em;
  margin: 0;
}
.series-header h2 em { font-family: var(--italic); color: var(--pink-deep); font-weight: 400; }
.series-header .series-meta { color: var(--ash); font-size: 14px; letter-spacing: .06em; }

.book-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--fog);
  align-items: center;
}
.book-row:last-child { border-bottom: 0; }
@media (max-width: 700px) { .book-row { grid-template-columns: 1fr; } }
.book-row .cover { aspect-ratio: 5 / 8; }
.book-row h3 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
}
.book-row .blurb { color: var(--smoke); font-size: 13px; max-width: 58ch; }
.buy-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.buy {
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.buy:hover { background: var(--ink); color: var(--paper); }
.buy.signed { background: var(--pink); border-color: var(--pink); }
.buy.signed:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }

.tropes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.trope {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14px;
  color: var(--pink-deep);
  border: 1px solid var(--pink-soft);
  background: var(--pink-wash);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- About page ---------- */
.about-hero {
  display: grid;
  grid-template-columns: 0.75fr 1.5fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
@media (max-width: 820px) { .about-hero { grid-template-columns: 1fr; } }
.about-hero .portrait { aspect-ratio: 4 / 5; max-width: 320px; }
.about-hero h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.025em; line-height: 1; margin: 0 0 24px; }
.about-hero h2 em { font-family: var(--italic); font-weight: 400; color: var(--pink-deep); }
.about-hero p { font-size: 17px; color: var(--smoke); max-width: 60ch; }
.about-hero p + p { margin-top: 16px; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: 1px solid var(--fog);
  border-bottom: 1px solid var(--fog);
}
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat .num { font-family: var(--serif); font-weight: 900; font-size: clamp(42px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; color: var(--pink-deep); }
.stat .lbl { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); margin-top: 8px; }

.obsessions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
}
@media (max-width: 820px) { .obsessions { grid-template-columns: 1fr; } }
.obsessions h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(32px, 4vw, 52px); margin: 0 0 24px; letter-spacing: -.02em; }
.obsessions ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; font-size: 17px; }
.obsessions li { padding-bottom: 16px; border-bottom: 1px solid var(--fog); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.obsessions li em { font-family: var(--italic); color: var(--pink-deep); font-size: 15px; }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 40px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--fog);
}
.contact-card h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; margin: 0 0 16px; }
.contact-card h3 em { font-family: var(--italic); color: var(--pink-deep); font-weight: 400; }
.contact-card p { color: var(--smoke); margin: 0 0 24px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; font-weight: 600; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--fog);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  transition: border-color .2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { outline: 0; border-color: var(--pink); }
.form-field textarea { min-height: 130px; resize: vertical; }

.events-list { display: grid; gap: 0; }
.event {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--fog);
  align-items: center;
}
@media (max-width: 700px) {
  .event { grid-template-columns: 1fr; gap: 4px; padding: 20px 0; }
}
.event .date { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: -.02em; }
.event .date small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); margin-top: 4px; }
.event h4 { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: -.01em; margin: 0 0 4px; }
.event p { margin: 0; color: var(--ash); font-size: 14px; }
.event .rsvp { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--pink-deep); }

.socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 700px) { .socials { grid-template-columns: 1fr 1fr; } }
.social {
  padding: 18px 16px;
  border: 1px solid var(--fog);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s;
}
.social:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.social strong { display: block; font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: -.01em; margin-bottom: 6px; text-transform: none; }

/* ---------- Shop page ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}
.product {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--fog);
  background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.15); }
.product .thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  text-align: center;
  padding: 20px;
  line-height: 1;
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 20% 10%, rgba(255,255,255,.2), transparent 70%);
}
.thumb.p1 { background: linear-gradient(140deg, #0b0b0d, #b85787); }
.thumb.p2 { background: linear-gradient(140deg, #25252A, #f895c7); }
.thumb.p3 { background: linear-gradient(140deg, #1a0a1a, #8a4868); }
.thumb.p4 { background: linear-gradient(140deg, #0b0b0d, #2a1a35, #f895c7); }
.thumb.p5 { background: linear-gradient(140deg, #161619, #3a2a32, #d7c0c7); }
.thumb.p6 { background: linear-gradient(140deg, #0b0b0d, #f895c7); }
.product h3 { font-family: var(--serif); font-weight: 900; font-size: 20px; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.product .price { font-family: var(--italic); color: var(--pink-deep); font-size: 18px; font-weight: 400; font-style: italic; }
.product .desc { font-size: 14px; color: var(--ash); margin: 0; }
.product .add {
  margin-top: auto;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  text-align: center;
  transition: background .2s var(--ease);
}
.product .add:hover { background: var(--pink); color: var(--ink); }

.shop-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter {
  padding: 10px 18px;
  border: 1px solid var(--fog);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter.active, .filter:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================
   Real asset support — book cover photos, hero background image
   ========================================================== */

/* Book cover: swap gradient placeholder for real photo */
.cover .cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cover.has-photo > .tag,
.cover.has-photo > .t,
.cover.has-photo > .a {
  display: none;
}
.cover .stamp,
.cover .stamp.preorder,
.cover .stamp.coming {
  z-index: 2;
}
.cover.has-photo::after {
  /* keep subtle vignette on top of real photo, just lighter */
  opacity: .25;
}

/* Hero featured cover: real book photo */
.hero-book.has-photo {
  padding: 0;
  overflow: hidden;
  /* Fallback in case the <img> fails to load: show cover via CSS */
  background-image: var(--hero-book-bg, linear-gradient(140deg, #1a1014 0%, #3d252f 42%, #B85787 100%));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 420px;
}
.hero-book.has-photo .cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}
.hero-book.has-photo > .bk-tag,
.hero-book.has-photo > .bk-title,
.hero-book.has-photo > .bk-author {
  display: none;
}
.hero-book.has-photo .hero-stamp {
  z-index: 2;
}

/* Hero: optional atmospheric background image (faded, desaturated).
   Base values below are the theme defaults. The home-hero Customizer sliders
   (Hero overlay darkness + Hero image punch) override .hero.has-bg::before's
   filter and .hero.has-bg::after's opacity via an inline <style id="sl-hero-vars">
   block printed in wp_head — see sl_hero_customize_css() in functions.php. */
.hero.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  /* mix-blend-mode: normal !important — must beat .grain::before's
     `mix-blend-mode: overlay`, which would otherwise darken the photo against
     the .hero base gradient. The .hero element carries the `grain` class for
     its grain-layer div, which inadvertently attaches grain styles to its
     own ::before pseudo-element too. */
  mix-blend-mode: normal !important;
  filter: contrast(1.08) saturate(1.05);
}
/* Overlay so headline stays readable over any photo — heavy left, airy right */
.hero.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.78) 28%, rgba(11,11,13,.45) 55%, rgba(11,11,13,.2) 80%, rgba(11,11,13,.3) 100%),
    linear-gradient(180deg, rgba(11,11,13,.25) 0%, transparent 35%, transparent 65%, rgba(11,11,13,.55) 100%);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.hero.has-bg .grain-layer { z-index: 1; }
.hero.has-bg .hero-grid   { position: relative; z-index: 2; }

/* Shop product: use real image instead of gradient thumb */
.product .thumb.has-photo {
  background: var(--smoke);
  padding: 0;
  overflow: hidden;
  position: relative;
  color: transparent;
}
.product .thumb.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Placeholder note ---------- */
.placeholder-ribbon {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 80;
  background: var(--pink);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* ==========================================================
   WordPress / WooCommerce integration
   ========================================================== */

/* WP admin bar offset */
.admin-bar header.nav { top: 72px; }
@media (max-width: 782px) {
  .admin-bar header.nav { top: 86px; }
}

/* WP alignment helpers (for editor content) */
.alignleft   { float: left;  margin: 6px 20px 10px 0; }
.alignright  { float: right; margin: 6px 0 10px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { color: var(--ash); font-size: 13px; margin-top: 6px; }

/* Screen reader only */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}

/* WooCommerce — shop archive — reuse brand grid */
.woocommerce-page section { padding: clamp(40px, 6vw, 80px) 0; }
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product { margin: 0; padding: 0; width: auto; float: none; }
.woocommerce ul.products li.product .product-inner,
.woocommerce ul.products li.product {
  background: var(--cream);
  padding: 20px;
  border-radius: var(--radius);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.woocommerce ul.products li.product:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.1);
}
.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 20px 30px -15px rgba(0,0,0,.3);
  margin-bottom: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  line-height: 1.1;
  color: var(--ink) !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.woocommerce ul.products li.product .price {
  font-family: var(--italic);
  font-weight: 400;
  color: var(--pink-deep) !important;
  font-size: 22px;
  margin-bottom: 12px;
  display: block;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce .woocommerce-message .button,
.woocommerce .actions .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 20px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px !important;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--pink) !important;
  color: var(--ink) !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page #respond input#submit.alt {
  background: var(--pink) !important;
  color: var(--ink) !important;
}
.woocommerce a.button.alt:hover {
  background: var(--pink-deep) !important;
  color: var(--paper) !important;
}

/* Shop page header/filters */
.woocommerce-products-header {
  text-align: center;
  margin-bottom: 40px;
}
.woocommerce-products-header__title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 88px);
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { color: var(--ash); }
.woocommerce .woocommerce-ordering select {
  padding: 10px 14px;
  border: 1px solid var(--fog);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--paper);
}

/* Single product page */
.single-product div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 820px) {
  .single-product div.product { grid-template-columns: 1fr; }
}
.single-product div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
}
.single-product div.product .product_title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 16px;
}
.single-product div.product .price {
  font-family: var(--italic);
  color: var(--pink-deep) !important;
  font-size: 28px;
  margin-bottom: 24px;
}
.single-product .woocommerce-product-details__short-description {
  font-size: 17px;
  color: var(--smoke);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Cart + Checkout — keep clean on brand */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce { color: var(--ink); }
.woocommerce table.shop_table {
  border: 1px solid var(--fog);
  border-radius: var(--radius);
  font-family: var(--sans);
}
.woocommerce table.shop_table th {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--fog);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--pink-deep);
  background: var(--pink-wash);
  font-family: var(--sans);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--pink-deep);
}

/* Hide the mockup-only placeholder ribbon on the live site */
.wp-live .placeholder-ribbon { display: none; }

/* ---------------------------------------------------------
 * Per-page hero background image
 * ---------------------------------------------------------
 * Any page with a Featured Image set gets that image blended
 * behind its page-head (title area). Text stays readable via
 * a dark multiply overlay; tint preserves the brand mood. */
.page-head.has-bg { background: var(--ink); }
/* Base values are the theme defaults. The Per-Page Hero Tuning Customizer
   sliders override .page-head.has-bg .page-head-bg's filter and
   .page-head.has-bg::after's opacity via an inline <style id="sl-hero-vars">
   block printed in wp_head — see sl_hero_customize_css() in functions.php. */
.page-head.has-bg .page-head-bg {
  position: absolute;
  inset: 0;
  background-image: var(--sl-page-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(.85) contrast(1.05);
  opacity: .65;
  z-index: 0;
}
.page-head.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.75) 100%),
    radial-gradient(80% 60% at 100% 100%, rgba(184,87,135,.22), transparent 60%);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.page-head.has-bg .grain-layer,
.page-head.has-bg .page-head-inner { position: relative; z-index: 2; }

/* ---------------------------------------------------------
 * Social icons (footer)
 * ---------------------------------------------------------
 * Rendered by sl_social_icons() — only shows platforms that
 * have a URL set under Appearance → Customize → Social Links. */
.social-icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: 0 0 32px;
  margin-top: -32px; /* pull into the space left by footer-grid margin-bottom */
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--paper);
  opacity: .85;
  transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.social-icon:hover,
.social-icon:focus-visible {
  opacity: 1;
  color: var(--pink);
  transform: translateY(-2px);
}
.social-icon svg { display: block; }
@media (max-width: 560px) {
  .social-icons { gap: 18px; padding: 22px 0 6px; }
  .social-icon { width: 36px; height: 36px; }
  .social-icon svg { width: 18px; height: 18px; }
}

/* ---- Contact Form 7 — complete styling ---- */

/* Reset CF7 default response box */
.wpcf7-response-output { display: none; }
.wpcf7-response-output:not(:empty) {
  display: block !important;
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--pink-soft) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--pink-wash) !important;
  color: var(--pink-deep) !important;
  font-size: 13px !important;
  font-family: var(--sans) !important;
}

/* Per-field error tip */
.wpcf7-not-valid-tip {
  display: block !important;
  font-size: 12px !important;
  color: var(--pink-deep) !important;
  margin-top: 4px !important;
  font-family: var(--sans) !important;
}

/* Form layout */
.contact-card .wpcf7 { width: 100%; }
.contact-card .wpcf7-form p { margin: 0 0 18px; }

/* Labels */
.contact-card .wpcf7-form label {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 6px;
  font-weight: 600;
  font-family: var(--sans);
}

/* All inputs and textarea */
.contact-card .wpcf7-form input:not([type="submit"]),
.contact-card .wpcf7-form textarea,
.contact-card .wpcf7-form select {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--fog) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--cream) !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color .2s var(--ease);
}
.contact-card .wpcf7-form textarea {
  min-height: 130px !important;
  resize: vertical !important;
}
.contact-card .wpcf7-form input:focus,
.contact-card .wpcf7-form textarea:focus {
  outline: 0 !important;
  border-color: var(--pink) !important;
}
.contact-card .wpcf7-form input::placeholder,
.contact-card .wpcf7-form textarea::placeholder {
  color: var(--ash) !important;
}

/* Invalid field */
.contact-card .wpcf7-form input.wpcf7-not-valid,
.contact-card .wpcf7-form textarea.wpcf7-not-valid {
  border-color: var(--pink-deep) !important;
}

/* Submit button */
.contact-card .wpcf7-form input[type="submit"] {
  width: 100% !important;
  padding: 14px 28px !important;
  background: var(--pink) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  transition: background .25s var(--ease), transform .25s var(--ease);
  margin-top: 8px !important;
  box-shadow: none !important;
}
.contact-card .wpcf7-form input[type="submit"]:hover {
  background: var(--pink-deep) !important;
  color: var(--paper) !important;
  transform: translateY(-2px);
}

/* ---- End CF7 styles ---- */

/* ---- Mobile fixes ---- */

/* Fix 2: Hamburger menu open state */
@media (max-width: 820px) {
  header.nav.nav-open .nav-actions-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 8px 0 16px;
  }
  header.nav.nav-open .nav-links {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  header.nav.nav-open .nav-links a {
    padding: 13px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  header.nav.nav-open .nav-cta {
    display: inline-flex !important;
    margin-top: 12px;
  }
}

/* Fix 5: Shop grid — two columns on mobile */
@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
}

/* Fix 7: Social boxes on contact page */
.social { overflow: hidden; word-break: break-word; }
@media (max-width: 480px) {
  .socials { grid-template-columns: 1fr 1fr; }
  .social { padding: 14px 10px; }
  .social strong { font-size: 18px; }
}

/* ---- End mobile fixes ---- */