/* ==========================================================================
   Roxy Lush — site styles
   Palette from Brand Kit V4. Bright, commercial, high contrast.
   No web fonts: system stack loads instantly, including in Kindle's browser.
   ========================================================================== */

:root {
  --raspberry:  #E10073;
  --coral:      #FF5A5F;
  --blush:      #FFB3C7;
  --cream:      #FFF1E8;
  --plum:       #2A1133;
  --pine:       #176B5B;
  --gold:       #FFC857;
  --cocoa:      #3A231E;

  --ink:        #2A1133;
  --ink-soft:   #6B5566;
  --paper:      #FFFFFF;
  --ground:     #FFF1E8;
  --line:       #F0D9CC;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 1040px;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(42, 17, 51, .07);
  --shadow-lift: 0 10px 30px rgba(42, 17, 51, .13);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--raspberry); }

h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 800; letter-spacing: -.02em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px 72px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--plum); color: #fff; padding: 12px 18px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* --- Header ------------------------------------------------------------- */

.site-head {
  background: var(--plum);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}

.brand { text-decoration: none; display: block; }
.brand-name {
  display: block;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.brand-tag {
  display: block;
  color: var(--blush);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The gate shell: brand only, nothing clickable. */
.site-head.is-bare { justify-content: center; text-align: center; padding: 20px; }
.site-head.is-bare .brand { cursor: default; }
.site-foot.is-bare { padding: 28px 20px; }

.site-nav { display: flex; gap: 20px; }
.site-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a.active {
  border-bottom-color: var(--coral);
  color: var(--blush);
}

/* --- Page heads --------------------------------------------------------- */

.hub-head, .home-head, .page-head {
  text-align: center;
  padding: 48px 0 32px;
  max-width: 720px;
  margin: 0 auto;
}
.page-head.narrow { max-width: 560px; }

.hub-kicker, .magnet-kicker, .welcome-kicker {
  display: inline-block;
  background: var(--gold);
  color: var(--cocoa);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.hub-title, .home-title, .page-title { font-size: 2.3rem; }
.home-title { font-size: 2.8rem; }

.hub-tagline, .home-tagline, .page-sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 14px 0 0;
}
.home-tagline {
  color: var(--raspberry);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
}
.home-bio { margin: 18px 0 0; color: var(--ink-soft); }

.section-head {
  font-size: 1.4rem;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--blush);
}

/* --- Magnet panel ------------------------------------------------------- */

.hub-magnet { max-width: 720px; margin: 0 auto; }

.magnet {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 28px;
  box-shadow: var(--shadow);
}
.magnet-cover {
  width: 140px;
  flex: none;
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
}
.magnet-title { font-size: 1.5rem; margin: 0 0 10px; }
.magnet-hook { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* --- Signup ------------------------------------------------------------- */

.signup-block {
  max-width: 720px;
  margin: 0 auto 56px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  border-top: 5px solid var(--raspberry);
}
.hub-magnet + .signup-block { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }

.signup-head { font-size: 1.65rem; margin-bottom: 12px; }
.signup-blurb { margin: 0 0 22px; color: var(--ink-soft); }

.signup-form { display: flex; flex-direction: column; gap: 12px; }

.signup-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.signup-input:focus {
  outline: none;
  border-color: var(--raspberry);
  box-shadow: 0 0 0 4px rgba(225, 0, 115, .13);
}

.signup-button {
  width: 100%;
  padding: 17px 20px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background: var(--raspberry);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.signup-button:hover { background: #c40064; }
.signup-button:active { transform: translateY(1px); }

.signup-trust {
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
  text-align: center;
}

.setup-warning {
  background: #FFF6E0;
  border-left: 4px solid var(--gold);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: .88rem;
  color: var(--cocoa);
  border-radius: 0 6px 6px 0;
}

/* --- The gate: "Get the Next Book" -------------------------------------
   The whole page is this one block. Nothing competes with the form.        */

.gate {
  max-width: 540px;
  margin: 40px auto 0;
  background: var(--plum);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  text-align: center;
  box-shadow: var(--shadow-lift);
}

.gate-kicker {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin: 0 0 16px;
}

.gate-head {
  font-size: 2rem;
  color: #fff;
  margin: 0 0 24px;
  text-wrap: balance;
}

.gate-finished {
  margin: -10px 0 22px;
  font-size: .92rem;
  color: rgba(255, 255, 255, .6);
}
.gate-finished em { color: var(--blush); font-style: normal; font-weight: 700; }

.gate-cross {
  display: inline-block;
  background: rgba(255, 200, 87, .15);
  border: 1px solid rgba(255, 200, 87, .4);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 100px;
  margin: 0 0 18px;
}

.gate-art { margin: 0 0 20px; }
.gate-cover {
  width: 190px;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.gate-cover.cover-pending { height: 304px; aspect-ratio: auto; }

.gate-promise, .gate-second {
  text-align: left;
  color: rgba(255, 255, 255, .88);
  font-size: .98rem;
  margin: 0 0 14px;
}
.gate-promise strong { color: var(--gold); }
.gate-second { color: rgba(255, 255, 255, .68); font-size: .92rem; margin-bottom: 26px; }

.gate-form { display: flex; flex-direction: column; gap: 14px; }

.gate-form .field {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.gate-form label {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
}
.gate-form .signup-input { border-color: transparent; }
.gate-form .signup-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 200, 87, .25);
}

.gate .signup-button {
  background: var(--gold);
  color: var(--cocoa);
  font-size: 1.15rem;
  margin-top: 6px;
}
.gate .signup-button:hover { background: #FFB92E; }

.gate-trust {
  margin: 16px 0 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
}

/* --- Current Books listing ---------------------------------------------- */

.all-series { margin-bottom: 48px; }

.listing { margin: 0 0 30px; }
.listing-head { font-size: 1.15rem; margin: 0 0 12px; }
.listing-head a { color: var(--ink); text-decoration: none; }
.listing-head a:hover { color: var(--raspberry); }

.listing-rows { list-style: none; margin: 0; padding: 0; }

.listing-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--paper);
  border-radius: 9px;
  margin-bottom: 6px;
}
.listing-row.is-boxset { background: #FFF6E8; }

.row-num {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.row-title { font-weight: 700; font-size: .96rem; }
.row-action .buy-row { margin: 0; flex-wrap: nowrap; }
.row-action .buy { padding: 7px 11px; font-size: .78rem; min-width: 0; }
.row-action .buy-missing { font-size: .74rem; white-space: nowrap; }

.row-coming {
  font-weight: 800;
  font-size: .85rem;
  color: var(--pine);
  white-space: nowrap;
}

/* --- Free books promo --------------------------------------------------- */

.promo {
  background: linear-gradient(135deg, var(--raspberry), #FF3D8F);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 48px;
}
.promo-head { font-size: 1.6rem; color: #fff; margin-bottom: 10px; }
.promo-blurb { margin: 0 0 20px; color: rgba(255, 255, 255, .9); }
.promo-link {
  display: inline-block;
  background: var(--gold);
  color: var(--cocoa);
  font-weight: 800;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 10px;
}
.promo-link:hover { background: #fff; }

/* --- Welcome (post-confirmation) state ---------------------------------- */

.welcome-band {
  max-width: 720px;
  margin: 0 auto 56px;
  background: linear-gradient(135deg, var(--pine), #0F5647);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
}
.welcome-band .welcome-kicker { background: var(--gold); color: var(--cocoa); }
.welcome-head { font-size: 1.9rem; margin-bottom: 12px; }
.welcome-body { margin: 0; color: rgba(255, 255, 255, .9); }

/* --- Books -------------------------------------------------------------- */

.hub-books, .catalog-series, .home-latest, .free-what, .thanks-help {
  margin: 0 0 56px;
}
.hub-desc { color: var(--ink-soft); margin: 0 0 28px; max-width: 68ch; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}

.book {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.book.is-coming { background: #FFF9F4; }

.book-cover { background: var(--line); }
.cover-img { width: 100%; aspect-ratio: 5 / 8; object-fit: cover; }

.cover-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #F7E4DA, #F7E4DA 10px, #F0D9CC 10px, #F0D9CC 20px);
  color: #A98B7C;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

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

.book-num {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--raspberry);
  display: block;
  margin-bottom: 6px;
}
.book-title { font-size: 1.1rem; margin-bottom: 8px; }
.book-sub {
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.45;
}
.book-hook { font-size: .9rem; margin: 0 0 12px; }

.buy-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.buy {
  flex: 1 1 auto;
  min-width: 54px;
  text-align: center;
  padding: 10px 8px;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  text-decoration: none;
  border-radius: 8px;
}
.buy:hover { background: var(--raspberry); }

.buy-missing, .coming, .coming-note { margin-top: auto; }
.buy-missing {
  font-size: .8rem;
  color: #B08;
  background: #FFF0F6;
  padding: 8px 10px;
  border-radius: 6px;
}

.coming {
  margin: auto 0 6px;
  font-weight: 800;
  color: var(--pine);
  font-size: .95rem;
}
.coming-note { margin: 0; font-size: .8rem; color: var(--ink-soft); }

/* Link-level affiliate disclosure — must sit beside the buy links, not
   only in the footer. */
.affiliate-note {
  font-size: .82rem;
  color: var(--ink-soft);
  background: #FFF8F0;
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 24px 0 0;
}

.foot-affiliate {
  color: rgba(255, 255, 255, .62);
  font-size: .82rem;
  margin: 20px auto 0;
  max-width: 46ch;
}

.region-note {
  font-size: .88rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 28px 0 0;
  font-style: italic;
}

.catalog-head { font-size: 1.5rem; }
.catalog-head a { color: var(--ink); text-decoration: none; }
.catalog-head a:hover { color: var(--raspberry); }
.catalog-meta {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--raspberry);
  margin: 6px 0 20px;
}

/* --- Other series cards ------------------------------------------------- */

.series-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.series-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--gold);
}
.series-card:hover { box-shadow: var(--shadow-lift); border-left-color: var(--raspberry); }

.series-thumb { width: 84px; flex: none; border-radius: 5px; box-shadow: var(--shadow); }
.series-card-title { font-size: 1.05rem; margin-bottom: 6px; }
.series-card-tag { font-size: .85rem; color: var(--ink-soft); margin: 0 0 8px; }
.series-card-meta {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 10px;
}
.series-card-cta { font-weight: 800; color: var(--raspberry); font-size: .9rem; }

/* --- Lists -------------------------------------------------------------- */

.free-list { margin: 0; padding-left: 22px; }
.free-list li { margin-bottom: 12px; }

.thanks-icon { font-size: 3rem; margin: 0 0 10px; color: var(--raspberry); }

/* Honeypot: hidden from people, visible to bots. Not display:none, because
   some bots skip those. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.lost { max-width: 620px; margin: 0 auto 56px; }
.lost-cards { display: flex; flex-direction: column; gap: 10px; }
.lost-card {
  display: block;
  background: var(--paper);
  border-left: 5px solid var(--raspberry);
  border-radius: 10px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.lost-card:hover { border-left-color: var(--gold); color: var(--raspberry); }

/* --- Legal pages -------------------------------------------------------- */

.legal {
  max-width: 68ch;
  margin: 0 auto 56px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}
.legal h2 {
  font-size: 1.15rem;
  margin: 32px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--blush);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }

.foot-legal a { color: rgba(255, 255, 255, .75); }
.foot-legal a:hover { color: var(--coral); }

@media (max-width: 640px) {
  .legal { padding: 26px 20px; }
}

/* --- Footer ------------------------------------------------------------- */

.site-foot {
  background: var(--plum);
  color: #fff;
  text-align: center;
  padding: 44px 20px;
}
.foot-brand { font-size: 1.3rem; font-weight: 800; margin: 0; }
.foot-tag {
  color: var(--blush);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 6px 0 20px;
}
.foot-nav { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.foot-nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; }
.foot-nav a:hover { color: var(--coral); }
.foot-legal { color: rgba(255, 255, 255, .5); font-size: .8rem; margin: 22px 0 0; }

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
  .hub-title, .page-title { font-size: 1.8rem; }
  .home-title { font-size: 2.1rem; }
  .signup-head { font-size: 1.4rem; }
  .hub-head, .home-head, .page-head { padding: 30px 0 24px; }

  .magnet { flex-direction: column; text-align: center; gap: 18px; padding: 24px 20px; }
  .magnet-cover { width: 160px; }

  .signup-block { padding: 26px 20px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .book-body { padding: 14px; }
  .book-title { font-size: .98rem; }
  .book-sub { display: none; }
  .site-head { justify-content: center; text-align: center; }

  .gate { margin-top: 20px; padding: 28px 20px 26px; border-radius: 0; }
  .gate-head { font-size: 1.6rem; }
  .gate-cover { width: 150px; }
  .gate-form .field { grid-template-columns: 1fr; gap: 5px; }

  .listing-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
  }
  .row-action .buy-row { flex-wrap: wrap; }
  .row-action .buy { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}