/* ============================================================================
   SUMMER AMBROSE — sambroseromance.com
   Design system + homepage. RhythmWorks AI Website Factory.
   Static HTML/CSS/vanilla JS. No framework, no build step.
   ========================================================================== */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────────
   Semantic roles only. Never use a raw hex below this block.               */
:root {
  /* Brand — taken from Summer's logo + author branding image */
  --coral:            #FF914D;   /* signature. logo background            */
  --coral-deep:       #E8762F;   /* hover / pressed                       */
  --coral-soft:       #FFE2CE;   /* tints, washes                         */
  --heart:            #E63946;   /* the logo's red heart-line. sparing.   */
  --peach:            #F5C0AD;
  --cream:            #FFF8F2;
  --ink:              #111111;
  --cocoa:            #1C1411;   /* warm near-black from the photo's wood */
  --cocoa-raised:     #261C17;
  --taupe:            #8D766A;

  /* Surfaces */
  --bg-base:          var(--cream);
  --bg-raised:        #FFFFFF;
  --bg-card:          #FFFFFF;
  --bg-dark:          var(--cocoa);
  --bg-dark-raised:   var(--cocoa-raised);

  /* Text — contrast-checked against their own backgrounds */
  --text-primary:     #1A1210;              /* on cream  — 15.8:1          */
  --text-muted:       #6A574C;              /* on cream  —  5.9:1  AA body */
  --text-dim:         #8D766A;              /* decorative / large only     */
  --text-on-dark:     #FBF3EC;              /* on cocoa  — 15.1:1          */
  --text-on-dark-mut: #CBB6A8;              /* on cocoa  —  7.9:1          */

  /* Lines + depth */
  --border:           #EBD9CC;
  --border-strong:    var(--peach);
  --border-dark:      #3A2C24;
  --glow:             rgba(255, 145, 77, .28);

  --shadow-sm:  0 1px 2px rgba(28,20,17,.05), 0 2px 6px rgba(28,20,17,.05);
  --shadow:     0 2px 4px rgba(28,20,17,.06), 0 10px 26px rgba(28,20,17,.09);
  --shadow-lg:  0 4px 10px rgba(28,20,17,.08), 0 24px 56px rgba(28,20,17,.16);

  /* Type */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script:  'Parisienne', 'Snell Roundhand', cursive;

  /* Rhythm */
  --nav-height: 76px;
  --wrap:       1200px;
  --wrap-tight: 920px;
  --radius:     14px;
  --radius-lg:  22px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. RESET + BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* belt + braces: no sideways scroll */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap--tight { max-width: var(--wrap-tight); }

/* Accessibility: a real, visible focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; border-radius: 0 0 10px 10px; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 3. SECTION RHYTHM ────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.section--cream  { background: var(--bg-base); }
.section--white  { background: var(--bg-raised); }
.section--dark   { background: var(--bg-dark);  color: var(--text-on-dark); }
.section--ink    { background: var(--ink);      color: var(--text-on-dark); }
.section--peach  { background: linear-gradient(180deg, var(--cream) 0%, var(--coral-soft) 58%, var(--cream) 100%); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--ink  h1, .section--ink  h2, .section--ink  h3 { color: var(--text-on-dark); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .745rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 14px;
}
.section--cream .eyebrow, .section--white .eyebrow, .section--peach .eyebrow { color: var(--coral-deep); }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: .01em; }
.lead {
  font-size: clamp(1.03rem, 1.5vw, 1.18rem);
  color: var(--text-muted); max-width: 60ch;
}
.section--dark .lead, .section--ink .lead { color: var(--text-on-dark-mut); }
.section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.rule {
  width: 62px; height: 2px; border: 0; margin: 0 0 20px;
  background: linear-gradient(90deg, var(--coral), var(--heart));
}
.section-head--center .rule { margin-inline: auto; }

/* ── 4. BUTTONS — layered fill, inset highlight, lift on hover ────────── */
.btn {
  --btn-bg: var(--coral);
  --btn-fg: #1A1210;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 30px;
  font-size: .9rem; font-weight: 650; letter-spacing: .085em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  color: var(--btn-fg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
  background-color: var(--btn-bg);
  border: 1px solid rgba(26,18,16,.14);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  background-color: var(--coral-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px var(--glow);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-on-dark);
  background-image: none;
  border: 1.5px solid rgba(251,243,236,.42);
  box-shadow: none;
}
.btn--ghost:hover {
  background-color: rgba(251,243,236,.1);
  border-color: var(--coral);
  color: #FFFFFF;
  box-shadow: none;
}
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  background-image: none;
  border: 1.5px solid var(--border-strong);
  box-shadow: none;
}
.btn--outline:hover { background-color: var(--coral-soft); border-color: var(--coral); box-shadow: none; }
.btn--sm { padding: 11px 22px; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── 5. HEADER / NAVIGATION ───────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(28,20,17,.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(251,243,236,.1);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { background: rgba(17,17,17,.96); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.nav {
  height: var(--nav-height);
  display: flex; align-items: center; gap: 20px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.nav__mark { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.nav__name {
  display: flex; flex-direction: column; line-height: 1.04;
  font-family: var(--font-display); color: var(--text-on-dark);
}
.nav__name b { font-size: 1.07rem; font-weight: 600; letter-spacing: .01em; }
.nav__name span {
  font-family: var(--font-body); font-size: .56rem; font-weight: 600;
  letter-spacing: .23em; text-transform: uppercase; color: var(--peach); margin-top: 3px;
}
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  position: relative;
  font-size: .83rem; font-weight: 550; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-on-dark); text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: var(--coral); transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav__links a:hover { color: var(--coral); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--coral); }

.nav__social { display: flex; align-items: center; gap: 13px; }
.nav__social a { color: var(--text-on-dark-mut); display: inline-flex; transition: color .2s var(--ease), transform .2s var(--ease); }
.nav__social a:hover { color: var(--coral); transform: translateY(-2px); }
.nav__social svg { width: 18px; height: 18px; }
.nav__cta { margin-left: 4px; }

/* Hamburger — RhythmWorks AI mobile nav standard */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid rgba(251,243,236,.26); border-radius: 11px;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 19px; height: 2px; background: var(--text-on-dark); border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; top: var(--nav-height); left: 0; right: 0;
  max-height: calc(100vh - var(--nav-height)); overflow-y: auto;
  background: var(--ink);
  border-top: 1px solid rgba(251,243,236,.12);
  padding: 10px 22px 34px;
  transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index: 89;
}
.nav-mobile.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.nav-mobile a {
  display: block; padding: 15px 2px;
  border-bottom: 1px solid rgba(251,243,236,.09);
  color: var(--text-on-dark); text-decoration: none;
  font-size: .95rem; font-weight: 550; letter-spacing: .07em; text-transform: uppercase;
}
.nav-mobile a:last-of-type { border-bottom: 0; }
.nav-mobile .btn { width: 100%; margin-top: 18px; }
.nav-mobile__social { display: flex; gap: 20px; justify-content: center; margin-top: 24px; }
.nav-mobile__social a { border: 0; padding: 6px; color: var(--peach); }
.nav-mobile__social svg { width: 22px; height: 22px; }
body.mobile-menu-open { overflow: hidden; }

@media (max-width: 1040px) {
  .nav__links, .nav__social, .nav__cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ── 6. HERO ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--cocoa);
  color: var(--text-on-dark);
  padding: clamp(44px, 6vw, 86px) 0 clamp(56px, 7vw, 100px);
}
.hero::before {                       /* warm candlelight bloom */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(255,145,77,.22), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(230,57,70,.12), transparent 60%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--peach);
  border: 1px solid rgba(245,192,173,.32); border-radius: 999px;
  padding: 7px 15px; margin-bottom: 22px;
}
.hero__kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.hero h1 { color: #FFFFFF; margin-bottom: .34em; }
.hero h1 em {
  font-style: normal; color: var(--coral);
  display: block;
}
.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
  color: var(--text-on-dark-mut); max-width: 46ch; margin-bottom: 30px;
}
.hero .btn-row { margin-bottom: 30px; }
.hero__tag {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(251,243,236,.14);
  font-family: var(--font-display); font-size: .97rem; letter-spacing: .04em;
  color: var(--peach);
}
.hero__tag span::after { content: "\00a0\00b7"; color: rgba(245,192,173,.45); margin-left: 12px; }
.hero__tag span:last-child::after { content: ""; }

/* The author portrait — framed, not pasted. Coral offset rule behind it. */
.hero__figure { position: relative; margin: 0; }
.hero__figure::after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1.5px solid rgba(255,145,77,.5); border-radius: var(--radius-lg);
  pointer-events: none;
}
.hero__figure img {
  position: relative; z-index: 1;
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { order: -1; max-width: 460px; margin-inline: auto; }
  .hero__figure::after { inset: 12px -12px -12px 12px; }
}

/* ── 7. BRAND STATEMENT BAR ───────────────────────────────────────────── */
.statement {
  background: var(--coral);
  color: #1A1210;
  padding: 24px 0;
  border-top: 1px solid rgba(26,18,16,.1);
  border-bottom: 1px solid rgba(26,18,16,.1);
}
.statement__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 30px; text-align: center;
}
.statement b {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem); letter-spacing: .03em;
}
.statement i { font-style: normal; color: rgba(26,18,16,.42); }

/* ── 8. FEATURED RELEASE ──────────────────────────────────────────────── */
.featured__grid {
  display: grid; grid-template-columns: minmax(0, 320px) 1fr;
  gap: clamp(28px, 5vw, 62px); align-items: center;
}
@media (max-width: 820px) { .featured__grid { grid-template-columns: 1fr; } }

/* Book cover — real image when provided, designed placeholder when not.
   NEVER a fabricated cover: the placeholder says so plainly. */
.cover {
  position: relative; aspect-ratio: 2 / 3; width: 100%;
  border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(155deg, var(--cocoa-raised), var(--ink) 62%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 26px 20px;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover__ph-title {
  font-family: var(--font-display); font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.22; color: var(--cream); margin: 0 0 14px;
}
.cover__ph-rule { width: 38px; height: 1.5px; background: var(--coral); margin: 0 0 14px; }
.cover__ph-note {
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--peach); margin: 0;
}
.cover__ph-mark {
  position: absolute; left: 0; right: 0; bottom: 16px;
  font-family: var(--font-script); font-size: 1.15rem; color: rgba(245,192,173,.55);
}
.featured .cover { max-width: 320px; }

.tropes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.trope-pill {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: var(--coral-soft); color: #8A4A1C; border: 1px solid #F6C9A9;
}
.section--dark .trope-pill, .section--ink .trope-pill {
  background: rgba(255,145,77,.14); color: var(--peach); border-color: rgba(255,145,77,.34);
}
.badge {
  display: inline-block;
  font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: var(--heart); color: #FFFFFF; margin-bottom: 16px;
}
.badge--soon { background: var(--cocoa); color: var(--peach); }

/* A clearly-marked gap in the data, never invented copy */
.pending {
  font-size: .86rem; font-style: italic; color: var(--text-muted);
  border-left: 2px solid var(--border-strong); padding: 2px 0 2px 14px; margin: 0 0 20px;
}
.section--dark .pending, .section--ink .pending {
  color: var(--text-on-dark-mut); border-left-color: rgba(255,145,77,.45);
}

/* ── 9. BOOK GRID ─────────────────────────────────────────────────────── */
.book-grid {
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* phones: browsable pairs */
}
@media (min-width: 820px) {
  /* Three across keeps the covers large and the rows even for a 6-book shelf. */
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.book-card {
  display: flex; flex-direction: column;
  background: transparent; border: 0; padding: 0;
  text-align: left; text-decoration: none; color: inherit;
}
.book-card .cover { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.book-card:hover .cover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,.42); }
.book-card__title {
  font-family: var(--font-display); font-size: 1.14rem; line-height: 1.26;
  margin: 16px 0 5px; color: var(--text-on-dark);
  flex-grow: 1;                       /* pushes meta to a shared baseline */
}
.section--cream .book-card__title, .section--white .book-card__title { color: var(--text-primary); }
.book-card__meta {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-on-dark-mut); margin: 0;
}
.section--cream .book-card__meta, .section--white .book-card__meta { color: var(--text-muted); }
.book-card__meta .dot { color: var(--coral); }

/* ── 10. TROPE DISCOVERY ──────────────────────────────────────────────── */
.trope-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
}
.trope-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.trope-card:hover {
  transform: translateY(-4px);
  border-color: var(--coral);
  box-shadow: var(--shadow);
}
.trope-card__num {
  font-family: var(--font-display); font-size: .95rem; color: var(--coral-deep);
  display: block; margin-bottom: 10px;
}
.trope-card h3 { font-size: 1.16rem; margin: 0 0 7px; }
.trope-card p { font-size: .9rem; color: var(--text-muted); margin: 0; }
.trope-card__go {
  display: inline-block; margin-top: 14px;
  font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-deep);
}

/* ── 11. SERIES ───────────────────────────────────────────────────────── */
.series-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.series-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-dark-raised);
  border: 1px solid var(--border-dark); border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.series-card:hover { transform: translateY(-4px); border-color: rgba(255,145,77,.55); box-shadow: 0 18px 42px rgba(0,0,0,.4); }
.series-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--heart));
}
.series-card h3 { font-size: 1.3rem; margin: 0 0 10px; }
.series-card__count {
  margin-top: auto; padding-top: 14px;
  font-size: .7rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--peach);
}

/* ── 12. NEWSLETTER / VIP ─────────────────────────────────────────────── */
.vip-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4.6vw, 56px);
  box-shadow: var(--shadow-lg);
  max-width: 720px; margin-inline: auto; text-align: center;
}
.vip-card h2 { margin-bottom: .3em; }
.vip-card h2 .script { color: var(--heart); font-size: 1.22em; }
.vip-benefits {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  list-style: none; padding: 0; margin: 20px 0 30px;
}
.vip-benefits li {
  font-size: .76rem; font-weight: 600; letter-spacing: .07em;
  color: var(--text-muted);
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.field label {
  display: block; font-size: .73rem; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit;
  color: var(--text-primary); background: var(--cream);
  border: 1.5px solid var(--border); border-radius: 10px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder { color: #A8938A; }
.field input:focus { outline: none; border-color: var(--coral); background: #FFFFFF; box-shadow: 0 0 0 4px var(--glow); }
.field input[aria-invalid="true"] { border-color: var(--heart); }
.field .err { display: block; min-height: 18px; margin-top: 5px; font-size: .78rem; color: #C42233; }
.vip-card .btn { width: 100%; margin-top: 18px; }
.form-note { font-size: .78rem; color: var(--text-dim); margin: 16px 0 0; }
.form-status {
  margin-top: 18px; padding: 14px 18px; border-radius: 10px;
  font-size: .9rem; font-weight: 550; text-align: left;
}
.form-status[hidden] { display: none; }
.form-status--ok   { background: #EAF6EE; color: #1E5B34; border: 1px solid #BFE3CC; }
.form-status--info { background: var(--coral-soft); color: #8A4A1C; border: 1px solid #F6C9A9; }
.form-status--err  { background: #FDECEE; color: #93101D; border: 1px solid #F6C2C8; }

/* ── 13. ABOUT PREVIEW ────────────────────────────────────────────────── */
.about__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) 1fr;
  gap: clamp(28px, 5vw, 62px); align-items: center;
}
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } }
.about__figure { position: relative; margin: 0; }
.about__figure img { border-radius: var(--radius-lg); box-shadow: 0 24px 56px rgba(0,0,0,.45); }
.about__quote {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  line-height: 1.42; color: var(--text-on-dark); margin: 0 0 22px;
}
.about__quote::before { content: "\201C"; color: var(--coral); }
.about__quote::after  { content: "\201D"; color: var(--coral); }

/* ── 14. SOCIAL ───────────────────────────────────────────────────────── */
.social-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.social-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.social-card:hover { transform: translateY(-4px); border-color: var(--coral); box-shadow: var(--shadow); }
.social-card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--cocoa); color: var(--peach);
}
.social-card__icon svg { width: 21px; height: 21px; }
.social-card h3 { font-size: 1.1rem; margin: 0; }
.social-card p { font-size: .87rem; color: var(--text-muted); margin: 0; }
.social-card__handle { font-size: .78rem; font-weight: 650; color: var(--coral-deep); letter-spacing: .04em; }

/* ── 15. FOOTER ───────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--text-on-dark); padding: clamp(52px, 7vw, 82px) 0 30px; }
.footer__grid {
  display: grid; gap: 38px;
  grid-template-columns: 1.3fr 1fr 1fr 1.25fr;
  padding-bottom: 40px; border-bottom: 1px solid rgba(251,243,236,.12);
}
@media (max-width: 920px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .nav__mark { width: 54px; height: 54px; margin-bottom: 14px; }
.footer__brand b { font-family: var(--font-display); font-size: 1.3rem; display: block; margin-bottom: 4px; }
.footer__brand span { font-size: .78rem; color: var(--text-on-dark-mut); display: block; }
.footer h4 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--peach); margin: 0 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--text-on-dark-mut); text-decoration: none; font-size: .9rem; transition: color .2s var(--ease); }
.footer a:hover { color: var(--coral); }
.footer__social { display: flex; gap: 14px; margin-top: 16px; }
.footer__social a { color: var(--text-on-dark-mut); }
.footer__social svg { width: 19px; height: 19px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  padding-top: 26px; font-size: .8rem; color: var(--text-on-dark-mut);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ── 16. SCROLL REVEALS ───────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .btn:hover, .trope-card:hover, .social-card:hover,
  .series-card:hover, .book-card:hover .cover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. INTERIOR PAGES
   Added for the Books / Series / Coming Soon / VIP / About / Shop / Contact
   pages. Purely additive - reuses the locked tokens, type scale, buttons and
   card language from above. No homepage rule is modified.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page head band — the hero's language, without the portrait ────────── */
.page-head {
  position: relative; overflow: hidden;
  background: var(--cocoa); color: var(--text-on-dark);
  padding: clamp(46px, 7vw, 92px) 0 clamp(40px, 6vw, 74px);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 80% at 82% 14%, rgba(255,145,77,.2), transparent 58%),
    radial-gradient(80% 70% at 4% 96%, rgba(230,57,70,.1), transparent 60%);
}
.page-head > .wrap { position: relative; }
.page-head h1 { color: #FFFFFF; max-width: 18ch; }
.page-head .lead { color: var(--text-on-dark-mut); }
.page-head .rule { margin-bottom: 18px; }

/* ── Filter bar (Books) ───────────────────────────────────────────────── */
.filter-bar {
  display: grid; gap: 20px 34px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 24px 26px; margin-bottom: 22px;
  background: var(--bg-dark-raised);
  border: 1px solid var(--border-dark); border-radius: var(--radius);
}
.filter-label {
  display: block; margin-bottom: 11px;
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--peach);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: inherit;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: var(--text-on-dark-mut);
  background: transparent;
  border: 1px solid rgba(251,243,236,.22);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { border-color: var(--coral); color: var(--text-on-dark); }
.chip[aria-pressed="true"] {
  background: var(--coral); border-color: var(--coral); color: #1A1210;
}
.filter-count {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-dark-mut); margin: 0 0 26px;
}
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--coral); font: inherit; text-decoration: underline;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.crumbs { margin-bottom: 26px; }
.crumbs a {
  font-size: .76rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--peach); text-decoration: none;
}
.crumbs a:hover { color: var(--coral); }

/* ── Book detail ──────────────────────────────────────────────────────── */
.detail__grid {
  display: grid; grid-template-columns: minmax(0, 330px) 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
@media (max-width: 860px) { .detail__grid { grid-template-columns: 1fr; } }
.detail__grid .cover { max-width: 330px; }
.detail h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: .22em; }
.detail__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; padding: 18px 0 0;
  border-top: 1px solid rgba(251,243,236,.14);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-on-dark-mut);
}
.detail__meta b { color: var(--peach); font-weight: 650; }

/* ── Series (full page) ───────────────────────────────────────────────── */
.series-block { margin-bottom: clamp(44px, 6vw, 72px); }
.series-block:last-child { margin-bottom: 0; }
.series-block__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  padding-bottom: 16px; margin-bottom: 26px;
  border-bottom: 1px solid var(--border-dark);
}
.series-block__head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }

/* ── Shop rows ────────────────────────────────────────────────────────── */
.shop-row {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 22px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--border-dark);
}
.shop-row:last-child { border-bottom: 0; }
.shop-row .cover { width: 92px; padding: 12px 8px; border-radius: 6px; }
.shop-row .cover__ph-title { font-size: .72rem; margin-bottom: 7px; }
.shop-row .cover__ph-rule { width: 20px; margin-bottom: 7px; }
.shop-row .cover__ph-note { font-size: .44rem; letter-spacing: .12em; }
.shop-row .cover__ph-mark { display: none; }
.shop-row__title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 4px; color: var(--text-on-dark); }
.shop-row__meta { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-mut); margin: 0; }
.shop-row__buy { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
@media (max-width: 680px) {
  .shop-row { grid-template-columns: 72px 1fr; }
  .shop-row .cover { width: 72px; }
  .shop-row__buy { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Contact page ─────────────────────────────────────────────────────── */
.contact__grid {
  display: grid; grid-template-columns: 1.35fr .9fr;
  gap: clamp(28px, 4.6vw, 58px); align-items: start;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
.field + .field { margin-top: 18px; }
.form-row + .field { margin-top: 18px; }
/* ...but inside a .form-row the fields are grid columns, not stacked siblings.
   Without this they sit on different baselines (regression caught in QA). */
.form-row .field + .field { margin-top: 0; }
.field select,
.field textarea {
  width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit;
  color: var(--text-primary); background: var(--cream);
  border: 1.5px solid var(--border); border-radius: 10px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field select:focus, .field textarea:focus {
  outline: none; border-color: var(--coral); background: #FFFFFF; box-shadow: 0 0 0 4px var(--glow);
}
.field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--heart); }
.contact__grid .social-card { padding: 18px 20px; gap: 4px; }
.contact__grid .social-card h3 { font-size: 1rem; }

/* ── Legal / long-form prose ──────────────────────────────────────────── */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; color: var(--text-muted); }
.prose li { margin-bottom: .5em; }
.notice-draft {
  background: var(--coral-soft); border: 1px solid #F6C9A9; color: #8A4A1C;
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 30px;
  font-size: .9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   18. CATALOGUE COMPONENTS
   Real covers, status flags, richer book cards, book detail, the box-set
   collection list, and the reader-magnet feature. Additive only - reuses the
   locked tokens, type scale and buttons. No earlier rule is modified.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Covers ───────────────────────────────────────────────────────────── */
.cover picture { display: contents; }
/* Landscape box-set render on white: letterbox it on a light tile rather than
   crop the spines off. */
.cover--contain {
  background: linear-gradient(160deg, #FFFFFF, #F4ECE5);
  padding: 10px;
}
.cover--contain img { object-fit: contain; }

/* Flag pinned to a cover in a grid */
.book-card { position: relative; }
.card-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.card-flag--free { background: var(--heart);  color: #FFFFFF; }
.card-flag--set  { background: var(--coral);  color: #1A1210; }

.badge--free { background: var(--heart); color: #FFFFFF; }
.badge--set  { background: var(--coral); color: #1A1210; }

/* ── Rich book card (Books page) ──────────────────────────────────────── */
.book-card--rich { display: flex; flex-direction: column; }
.book-card--rich .book-card__link { display: block; text-decoration: none; }
.book-card--rich .cover { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.book-card--rich:hover .cover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,.42); }
.book-card__text { display: flex; flex-direction: column; flex-grow: 1; }
.book-card__title a { text-decoration: none; color: inherit; }
.book-card__title a:hover { color: var(--coral); }
.book-card__hook {
  font-size: .89rem; line-height: 1.6; margin: 10px 0 0;
  color: var(--text-on-dark-mut);
}
.section--cream .book-card__hook, .section--white .book-card__hook { color: var(--text-muted); }
.book-card__cta {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: auto; padding-top: 16px;
}
.book-card__cta .btn { padding: 11px 18px; font-size: .72rem; }

/* ── Book detail ──────────────────────────────────────────────────────── */
.detail__sub { color: var(--peach); margin-bottom: 18px; }
.detail__hook {
  font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.5; color: var(--text-on-dark);
  border-left: 2px solid var(--coral); padding-left: 18px; margin: 0 0 24px;
}
.detail__blurb p { color: var(--text-on-dark-mut); }
.detail__note { font-size: .82rem; color: var(--text-dim); margin-top: 14px; }

/* ── Box-set: the included titles ─────────────────────────────────────── */
.included { margin-top: clamp(44px, 6vw, 72px); }
.included__head {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 1px solid var(--border-dark);
}
.included__list { list-style: none; margin: 0; padding: 0; counter-reset: inc; }
.included__item {
  display: grid; grid-template-columns: 104px 1fr; gap: 22px;
  padding: 22px 0; border-bottom: 1px solid var(--border-dark);
}
.included__item:last-child { border-bottom: 0; }
.included__cover { display: block; width: 104px; }
.included__num {
  display: block; margin-bottom: 6px;
  font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--coral);
}
.included__item h3 { font-size: 1.15rem; margin: 0 0 4px; }
.included__item h3 a { text-decoration: none; color: var(--text-on-dark); }
.included__item h3 a:hover { color: var(--coral); }
.included__sub { font-size: .8rem; letter-spacing: .04em; color: var(--peach); margin: 0 0 8px; }
.included__item p { font-size: .9rem; color: var(--text-on-dark-mut); margin: 0; }
@media (max-width: 560px) {
  .included__item { grid-template-columns: 76px 1fr; gap: 16px; }
  .included__cover { width: 76px; }
}

/* ── Reader magnet — a reader gift, not an advert ─────────────────────── */
.magnet {
  display: grid; grid-template-columns: 190px 1fr;
  gap: clamp(22px, 4vw, 46px); align-items: center;
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--cocoa-raised), var(--cocoa) 62%);
  border: 1px solid rgba(255,145,77,.3);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.6vw, 44px);
  box-shadow: var(--shadow-lg);
}
.magnet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 88% 8%, rgba(255,145,77,.2), transparent 60%);
}
.magnet > * { position: relative; }
.magnet__cover { width: 190px; }
.magnet__cover .cover { box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.magnet__kicker {
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--peach); margin: 0 0 12px;
}
.magnet__head {
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.16;
  color: #FFFFFF; margin: 0 0 14px;
}
.magnet__head em { font-style: normal; color: var(--coral); }
.magnet__copy { color: var(--text-on-dark-mut); margin: 0 0 10px; }
.magnet__copy b { color: var(--text-on-dark); font-weight: 600; }
.magnet__hook {
  font-size: .92rem; line-height: 1.6; color: var(--text-on-dark-mut);
  border-left: 2px solid rgba(255,145,77,.5); padding-left: 16px; margin: 0 0 22px;
}
@media (max-width: 720px) {
  .magnet { grid-template-columns: 1fr; text-align: center; }
  .magnet__cover { width: 160px; margin-inline: auto; }
  .magnet__hook { text-align: left; }
  .magnet .btn-row { justify-content: center; }
}
/* On the cream/peach sections the panel still reads as a dark gift box - that
   is intentional contrast, not an inconsistency. */

/* ── QA fixes ─────────────────────────────────────────────────────────── */

/* .btn--outline defaults to near-black text, which is invisible on the dark
   sections. Give it the light foreground there. (Caught in QA: the READ MORE
   button on books.html rendered as an empty pill.) */
.section--ink .btn--outline,
.section--dark .btn--outline,
.magnet .btn--outline {
  --btn-fg: var(--text-on-dark);
  border-color: rgba(251,243,236,.42);
}
.section--ink .btn--outline:hover,
.section--dark .btn--outline:hover,
.magnet .btn--outline:hover {
  background-color: rgba(251,243,236,.1);
  border-color: var(--coral);
  color: #FFFFFF;
}

/* In the rich card the title must not stretch - .book-card__cta already
   bottom-aligns the buttons. Without this the subtitle drifts off the
   shared baseline when a title wraps differently. */
.book-card--rich .book-card__title { flex-grow: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   19. COMING SOON + ARC
   Additive. Reuses the locked tokens, cards and buttons.
   ════════════════════════════════════════════════════════════════════════ */

.badge--season { background: rgba(255,145,77,.16); color: var(--peach); border: 1px solid rgba(255,145,77,.4); }
.badge--arc    { background: var(--heart); color: #FFFFFF; }
.card-flag--soon { background: var(--cocoa); color: var(--peach); border: 1px solid rgba(245,192,173,.4); }

/* Several badges can sit together above a title */
.detail .badge, .soon-card__badges .badge { margin-right: 8px; }
.soon-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.soon-card__badges .badge { margin: 0; }

/* ── Grouped sections ─────────────────────────────────────────────────── */
.soon-group { margin-bottom: clamp(46px, 6vw, 78px); }
.soon-group:last-child { margin-bottom: 0; }
.soon-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border-dark);
}
.soon-group__head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.soon-group__desc { margin-bottom: 28px; }

/* ── Coming-soon card: horizontal, cover left ─────────────────────────── */
.soon-list { display: grid; gap: 22px; }
.soon-card {
  display: grid; grid-template-columns: 168px 1fr; gap: clamp(20px, 3vw, 36px);
  align-items: center;
  background: var(--bg-dark-raised);
  border: 1px solid var(--border-dark); border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 30px);
  transition: border-color .26s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease);
}
.soon-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,145,77,.5);
  box-shadow: 0 18px 42px rgba(0,0,0,.4);
}
.soon-card__cover { position: relative; display: block; width: 168px; }
.soon-card h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0 0 6px; }
.soon-card h3 a { text-decoration: none; color: var(--text-on-dark); }
.soon-card h3 a:hover { color: var(--coral); }
.soon-card__sub {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peach); margin: 0 0 12px;
}
.soon-card__hook {
  font-size: .94rem; line-height: 1.62; color: var(--text-on-dark-mut); margin: 0 0 20px;
}
@media (max-width: 680px) {
  .soon-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .soon-card__cover { width: 190px; }
  .soon-card__badges { justify-content: center; }
  .soon-card__hook { text-align: left; }
  .soon-card .btn-row { justify-content: center; }
}

.cta-note {
  margin: 12px 0 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   20. ASK SUMMER
   A private romance-reader lounge. Same black / cream / coral language,
   warmer and more playful. Additive only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Spoiler gate ─────────────────────────────────────────────────────── */
body.gate-open { overflow: hidden; }
.gate {
  position: relative; min-height: calc(100vh - var(--nav-height));
  display: grid; place-items: center;
  background: var(--cocoa); color: var(--text-on-dark);
  padding: clamp(32px, 6vw, 72px) 0; overflow: hidden;
}
.gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255,145,77,.26), transparent 62%),
    radial-gradient(60% 50% at 12% 100%, rgba(230,57,70,.16), transparent 62%);
}
.gate > .wrap { position: relative; }
.gate__card {
  background: linear-gradient(160deg, rgba(38,28,23,.96), rgba(28,20,17,.98));
  border: 1px solid rgba(255,145,77,.34);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4.4vw, 52px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  text-align: center; max-width: 640px; margin-inline: auto;
}
.gate__eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--peach); margin: 0 0 14px;
}
.gate__head {
  font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.1; color: #FFFFFF; margin: 0 0 20px;
}
.gate__head:focus { outline: none; }
.gate__body { color: var(--text-on-dark-mut); margin: 0 0 18px; }
.gate__list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 9px;
}
.gate__list li {
  font-size: .82rem; color: var(--peach);
  background: rgba(255,145,77,.1); border: 1px solid rgba(255,145,77,.26);
  border-radius: 999px; padding: 6px 13px;
}
.gate__actions { justify-content: center; margin-bottom: 20px; }
.gate__whisper { font-size: .84rem; font-style: italic; color: var(--text-dim); margin: 0; }

/* ── Tools ────────────────────────────────────────────────────────────── */
.ask-preview {
  background: rgba(255,145,77,.12); border: 1px solid rgba(255,145,77,.4);
  color: var(--peach); border-radius: var(--radius);
  padding: 14px 20px; margin-bottom: 26px; font-size: .88rem;
}
.ask-tools { margin-bottom: 18px; }
.ask-search {
  width: 100%; max-width: 460px; margin-bottom: 18px;
  padding: 14px 18px; font-size: 1rem; font-family: inherit;
  color: var(--text-on-dark); background: var(--bg-dark-raised);
  border: 1.5px solid var(--border-dark); border-radius: 999px;
}
.ask-search::placeholder { color: var(--text-dim); }
.ask-search:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--glow); }
.ask-chips { gap: 8px; }
.ask-reset { margin-top: 36px; text-align: center; font-size: .84rem; }

/* ── A question ───────────────────────────────────────────────────────── */
.qa-stream { display: grid; gap: 22px; }
.qa {
  background: var(--bg-dark-raised);
  border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  scroll-margin-top: calc(var(--nav-height) + 20px);
  transition: border-color .3s var(--ease);
}
.qa--linked { border-color: var(--coral); box-shadow: 0 0 0 4px var(--glow); }
.qa__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.qa-source {
  font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.qa-source--editorial { background: rgba(255,145,77,.16); color: var(--peach); border: 1px solid rgba(255,145,77,.4); }
.qa-source--reader    { background: var(--coral); color: #1A1210; }
.qa-source--ai        { background: rgba(251,243,236,.1); color: var(--text-on-dark-mut); border: 1px solid rgba(251,243,236,.3); }
.qa-who { font-size: .78rem; color: var(--text-dim); font-style: italic; }
.qa-book-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-dark-mut); text-decoration: none; border-bottom: 1px solid transparent;
}
.qa-book-tag:hover { color: var(--coral); border-bottom-color: var(--coral); }
.qa-star { margin-left: auto; font-size: .95rem; }
.qa__q {
  font-family: var(--font-display); font-size: clamp(1.18rem, 2.4vw, 1.6rem);
  line-height: 1.32; color: #FFFFFF; margin: 0 0 20px;
}
.qa__a { border-left: 2px solid var(--coral); padding-left: clamp(16px, 2.2vw, 24px); }
.qa__a-label {
  font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 10px;
}
.qa-answer-body p { color: var(--text-on-dark-mut); margin: 0 0 .85em; }
.qa-answer-body p:last-child { margin-bottom: 0; }
.qa-pending { font-size: .92rem; font-style: italic; color: var(--text-dim); margin: 0; }
.qa-pending a { color: var(--coral); }
.qa__tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 20px 0 0; padding: 0; }

/* ── Per-entry spoiler ────────────────────────────────────────────────── */
.qa-spoiler__shield {
  background: repeating-linear-gradient(135deg, rgba(230,57,70,.08) 0 10px, transparent 10px 20px);
  border: 1px dashed rgba(230,57,70,.5); border-radius: var(--radius);
  padding: 20px; text-align: center;
}
.qa-spoiler__label {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--heart); margin: 0 0 6px;
}
.qa-spoiler__note { font-size: .86rem; color: var(--text-on-dark-mut); margin: 0 0 14px; }

/* ── Related book ─────────────────────────────────────────────────────── */
.qa-book {
  display: grid; grid-template-columns: 74px 1fr; gap: 18px; align-items: center;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-dark);
}
.qa-book__cover { display: block; width: 74px; }
.qa-book__kicker {
  font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--peach); margin: 0 0 5px;
}
.qa-book__text h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 12px; }
.qa-book__text h4 a { color: var(--text-on-dark); text-decoration: none; }
.qa-book__text h4 a:hover { color: var(--coral); }

/* ── Share actions ────────────────────────────────────────────────────── */
.qa__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.qa-act {
  font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  padding: 9px 15px; min-height: 40px; border-radius: 999px; cursor: pointer;
  color: var(--text-on-dark-mut); background: transparent;
  border: 1px solid rgba(251,243,236,.22);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.qa-act:hover { color: var(--text-on-dark); border-color: var(--coral); background: rgba(255,145,77,.1); }

/* ── Form extras ──────────────────────────────────────────────────────── */
.field__hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.check {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 16px; font-size: .9rem; color: var(--text-muted); cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--coral); flex: none; }

/* ── Homepage teaser ──────────────────────────────────────────────────── */
.ask-teaser {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(26px, 4vw, 54px); align-items: center;
}
@media (max-width: 880px) { .ask-teaser { grid-template-columns: 1fr; } }
.ask-teaser__cards { display: grid; gap: 12px; }
.ask-mini {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--coral); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.ask-mini:hover { transform: translateX(4px); box-shadow: var(--shadow); border-color: var(--coral); }
.ask-mini__book {
  display: block; font-size: .62rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--coral-deep); margin-bottom: 7px;
}
.ask-mini__q { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.34; margin: 0 0 8px; }
.ask-mini__go { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 680px) {
  .qa-book { grid-template-columns: 1fr; justify-items: start; }
  .qa__actions .qa-act { flex: 1 1 auto; text-align: center; }
}

/* ── Nav fit ──────────────────────────────────────────────────────────────
   Adding "Ask Summer" made eight links + socials + CTA overflow the header
   and wrap onto a second line. Tighten the spacing and switch to the
   hamburger a little earlier so the bar always stays one line. The design
   itself is unchanged. */
.nav__brand { flex: none; }
.nav__name b { white-space: nowrap; }
.nav__links { gap: 19px; }
.nav__links a { white-space: nowrap; letter-spacing: .055em; }
@media (max-width: 1320px) {
  .nav__links { gap: 15px; }
  .nav__links a { font-size: .78rem; letter-spacing: .04em; }
  .nav__social { gap: 10px; }
}
@media (max-width: 1180px) {
  /* Socials move into the mobile menu before the links start to crowd. */
  .nav__social { display: none; }
}
@media (max-width: 1100px) {
  .nav__links, .nav__social, .nav__cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ── Header CTA ───────────────────────────────────────────────────────────
   "Start Reading" is a flex item with no nowrap, so once the nav filled up
   the label wrapped inside the pill and the button grew to 66px tall.
   Lock it to one line and stop it shrinking. */
.nav__cta {
  flex: none;
  white-space: nowrap;
}

/* Honeypot: off-screen for sighted users, invisible to assistive tech, but a
   bot filling every field trips it. Never display:none - some bots skip those. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.prose__updated {
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 28px;
}

/* ── Box set / collection: wide artwork treatment ─────────────────────────
   The Oops I'm Pregnant render is a landscape 3-D box shot. In the portrait
   cover slot it letterboxed with dead space above and below. Collections get
   a full-width banner instead, and the copy stacks beneath it. */
.detail__banner {
  /* Match the copy column so the render reads as a product shot, not a
     billboard. Full-bleed at 3:2 was overwhelming. */
  max-width: 620px;
  margin: 0 0 clamp(26px, 4vw, 44px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF, #F4ECE5);
  box-shadow: var(--shadow-lg);
}
.detail__banner .cover {
  /* The render is 2560x1707 = exactly 3:2. Matching the frame to it means no
     side bars and no dead space. */
  aspect-ratio: 3 / 2;
  width: 100%;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.detail__banner .cover img { object-fit: contain; }
@media (max-width: 700px) {
  .detail__banner .cover { aspect-ratio: 3 / 2; }
}

.detail__stack { max-width: 780px; }
.detail__stack .tropes { margin-bottom: 20px; }

/* In the grid, a collection reads better on a light tile than a dark one. */
.book-card .cover--contain,
.shop-row .cover--contain { background: linear-gradient(160deg, #FFFFFF, #F4ECE5); }

.soon-card__date {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 12px;
}

/* ── hidden must actually hide ────────────────────────────────────────────
   .gate sets display:grid, which has the same specificity as the browser's
   [hidden]{display:none} and comes later, so it won. The spoiler gate stayed
   on screen after "Let me in" and readers thought the button was broken.
   This makes the attribute authoritative for every element. */
[hidden] { display: none !important; }

/* The sticky header would otherwise sit over the top of the conversation
   when we scroll a reader into it after the spoiler gate. */
#conversation { scroll-margin-top: calc(var(--nav-height) + 14px); }