
/* ============================================================
   Lift: the near-black was swallowing everything. Same identity,
   considerably more light, contrast and colour.
   ============================================================ */
:root {
  --bg:     #191419;   /* was #0a0506 - almost black */
  --bg2:    #211b21;
  --card:   #272129;
  --card2:  #302932;
  --fg:     #fbf8f6;
  --muted:  #c9bdbb;   /* was #a99c98 */
  --line:   rgba(250,245,240,.13);
  --line2:  rgba(250,245,240,.26);
  --line-quiet: rgba(250,245,240,.13);
}
body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(239,68,68,.13), transparent 62%),
    radial-gradient(900px 560px at 8% 6%, rgba(245,158,11,.075), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* header sits on the light, not against it */
.rv-header { background: rgba(25,20,25,.82); backdrop-filter: blur(14px); }
.rv-nav a { color: #cec3c1; }

/* hero: give it an actual light source */
.rv-hero { position: relative; }
.rv-hero::before {   /* no photograph - the light source is the composition */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(900px 500px at 50% 26%, rgba(255,228,198,.16), transparent 68%),
    radial-gradient(700px 420px at 82% 88%, rgba(240,69,63,.10), transparent 66%),
    radial-gradient(620px 380px at 14% 78%, rgba(251,191,36,.07), transparent 64%);
  animation: none; opacity: 1;
}
.rv-hero::after {    /* theme vignette was near-black at 85% and crushed the type */
  background:
    radial-gradient(circle at 50% 30%, rgba(240,69,63,.15), transparent 58%),
    radial-gradient(circle at 50% 14%, transparent, rgba(25,20,25,.5) 84%);
  z-index: 2;
}
.rv-hero > *:not(.rv-hero__bg) { position: relative; z-index: 4; }
.rv-hero__bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; opacity: .22; }
.rv-hero__lead { color: #d6cbc9; }
.rv-hero .rv-pill { border-color: var(--line2); color: #d8cdca; }

/* surfaces need to read as surfaces */
.rv-card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border-color: var(--line);
}
.rv-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border-color: rgba(250,245,240,.3);
}
.rv-card__tag { color: #bdb2b0; }
.rv-card__by { color: #a99e9c; }

/* category cards carry their colour instead of hinting at it */
.rv-cat {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 72%),
    rgba(255,255,255,.035);
  border-color: color-mix(in srgb, var(--c) 26%, transparent);
}
.rv-cat:hover {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 74%),
    rgba(255,255,255,.06);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
.rv-cat__rule { width: 34px; height: 3px; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.rv-cat p { color: #c3b8b6; }

/* stats and guarantees read clearly now */
.rv-stat .n { color: #fff; }
.rv-stat .l { color: #b8adab; }
.rv-feat {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: 4px;
}
.rv-feat p { color: #c3b8b6; }
.rv-sub, .rv-eyebrow { color: #b6abaa; }

/* buttons brighter */
.rv-cta.primary, .rv-cta.buy { background: #f0453f; }
.rv-cta.primary:hover, .rv-cta.buy:hover { background: #ff5a52; }
.rv-add { border-color: var(--line2); color: #ded4d1; }
.rv-add:hover { border-color: rgba(250,245,240,.45); background: rgba(255,255,255,.05); }

/* covers get a touch more luminance against the lighter page */
.rv-cover { filter: saturate(1.06) brightness(1.06); }

.rv-footer { background: rgba(0,0,0,.22); }

/* ============================================================
   Publisher, not funnel. Restraint over decoration.
   ============================================================ */
:root { --line-quiet: rgba(244,236,221,.10); }

/* header: quieter, no shouting */
.rv-header { background: rgba(8,6,7,.9); border-bottom: 1px solid var(--line-quiet); }
.rv-header__bar { height: 68px; }
.rv-nav a { font-size: 13px; letter-spacing: .02em; color: var(--muted); font-weight: 500; }
.rv-nav a:hover, .rv-nav a[aria-current] { color: #fff; }
.rv-brand__logo { width: 38px; height: 38px; border-radius: 6px; }
.rv-brand__txt b { font-size: 20px; letter-spacing: .06em;
  background: none; -webkit-text-fill-color: #f4ecdd; color: #f4ecdd; }
.rv-brand__txt small { letter-spacing: .3em; font-size: 9px; color: var(--muted); }

/* hero: let the type carry it */
.rv-hero { padding: 132px 0 96px; }
.rv-hero__bg { opacity: .18; }
.rv-hero .rv-pill { background: none; border: 1px solid var(--line-quiet); color: var(--muted);
  font-size: 10px; letter-spacing: .26em; }
.rv-hero .rv-pill .dot { display: none; }
.rv-hero__lead { max-width: 620px; font-size: 16.5px; line-height: 1.65; color: #b9aeb0; }
.rv-grad-text { background: none; -webkit-text-fill-color: #f4ecdd; color: #f4ecdd; }

/* buttons: one accent, no gradient glow */
.rv-cta.primary, .rv-cta.buy {
  background: var(--red); color: #fff; border-radius: 3px; box-shadow: none;
  font-size: 12.5px; letter-spacing: .1em; font-weight: 700; padding: 13px 20px;
}
.rv-cta.primary:hover, .rv-cta.buy:hover { background: #c40d26; }
.rv-hero .rv-ctas, .rv-final .rv-ctas { justify-content: center; }
.rv-hero .rv-cta, .rv-final .rv-cta { box-shadow: none !important; filter: none !important; }
.rv-cta.ghost, .rv-add {
  background: none; border: 1px solid var(--line-quiet); color: #cfc6c2;
  border-radius: 3px; font-size: 12.5px; letter-spacing: .1em; font-weight: 600;
}
.rv-cta.ghost:hover, .rv-add:hover { border-color: rgba(244,236,221,.34); color: #fff; }

/* stats: hairline row, no icons */
.rv-stat .n { font-size: clamp(30px, 3.4vw, 44px); }
.rv-stat .n img, .rv-stat .n .ic { display: none; }
.rv-stat .l { letter-spacing: .22em; font-size: 10px; color: var(--muted); }

/* section headings: smaller, calmer */
.rv-section { padding: 74px 0; }
.rv-section-head h2 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: .01em; }
.rv-eyebrow { color: var(--muted); letter-spacing: .28em; font-size: 10px; font-weight: 600; }
.rv-sub { color: var(--muted); font-size: 14px; }

/* category cards: a rule, a name, a count */
.rv-cat[data-cat="fitness"] { --c:#f87171; }
.rv-cat[data-cat="wealth"]  { --c:#fbbf24; }
.rv-cat[data-cat="ai"]      { --c:#22d3ee; }
.rv-cat[data-cat="mindset"] { --c:#a78bfa; }
.rv-cat[data-cat="health"]  { --c:#2dd4bf; }
.rv-cat {
  position: relative; display: block; padding: 26px 24px 22px;
  background: rgba(255,255,255,.014); border: 1px solid var(--line-quiet);
  border-radius: 4px; min-height: 0; overflow: visible;
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.rv-cat:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: rgba(255,255,255,.03); transform: translateY(-2px); }
.rv-cat__rule { display: block; width: 26px; height: 2px; background: var(--c); margin-bottom: 16px; }
.rv-cat h3 { font-size: 21px; color: #fff; margin-bottom: 8px; }
.rv-cat p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }
.rv-cat__count { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 78%, white); }
.rv-cat__bg, .rv-cat__ic { display: none !important; }

/* product cards: quieter frame, price does the talking */
.rv-card { background: rgba(255,255,255,.015); border: 1px solid var(--line-quiet); border-radius: 4px; }
.rv-card:hover { border-color: rgba(244,236,221,.2); }
.rv-card h3 { font-size: 19px; line-height: 1.12; letter-spacing: .005em; }
.rv-card__cat { color: var(--muted); font-weight: 600; font-size: 10px; letter-spacing: .2em; }
.rv-card__tag { font-size: 13.5px; line-height: 1.55; }
.rv-card__by { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.rv-price { font-size: 24px; color: #f4ecdd; }
.rv-card__btns { gap: 8px; }

/* product page */
.rv-product h1 { font-size: clamp(34px, 4.6vw, 58px); }
.rv-product__tagline { font-size: 17px; color: #c9bfbb; font-style: normal; font-family: inherit; }
.rv-product__meta { font-size: 12.5px; letter-spacing: .04em; }
.rv-product__price .rv-price { font-size: 34px; }

/* footer */
.rv-footer { border-top: 1px solid var(--line-quiet); }
.rv-footer h4 { font-size: 11px; letter-spacing: .24em; color: var(--muted); }
.rv-footer nav a, .rv-footer__about p { font-size: 13px; }

/* ---------- titles that are not out yet ---------- */
.rv-cover__soon {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 21%;
  padding: 7px 0; text-align: center;
  background: rgba(10,8,10,.72); backdrop-filter: blur(2px);
  border-block: 1px solid rgba(250,245,240,.22);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: #fff; font-weight: 700;
}
.rv-cover:has(.rv-cover__soon) { filter: saturate(.55) brightness(.82); }
.rv-soon-price { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rv-cta.soon {
  display: block; width: 100%; text-align: center; cursor: default;
  background: none; border: 1px dashed rgba(250,245,240,.24); color: var(--muted);
  border-radius: 3px; font-size: 12px; letter-spacing: .16em; font-weight: 700;
  padding: 13px 20px; text-transform: uppercase;
}
/* ============================================================
   Designed book covers - typography and motion, no artwork.
   One palette per category so the catalogue reads as a series.
   ============================================================ */
.rv-cover[data-cat="fitness"] { --c1:#f87171; --c2:#7f1d1d; }
.rv-cover[data-cat="wealth"]  { --c1:#fbbf24; --c2:#78350f; }
.rv-cover[data-cat="ai"]      { --c1:#22d3ee; --c2:#164e63; }
.rv-cover[data-cat="mindset"] { --c1:#a78bfa; --c2:#4c1d95; }
.rv-cover[data-cat="health"]  { --c1:#2dd4bf; --c2:#134e4a; }

.rv-cover {
  aspect-ratio: 3 / 4;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 60%),
    linear-gradient(158deg, var(--c2) 0%, #0d0a10 62%, #07060a 100%);
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.rv-cover::before {           /* hairline frame, like a printed border */
  content: ""; position: absolute; inset: 12px 12px 12px 8.5%;
  border: 1px solid color-mix(in srgb, var(--c1) 28%, transparent);
  pointer-events: none; z-index: 2;
}
.rv-cover__spine {            /* the bound edge */
  position: absolute; inset: 0 auto 0 0; width: 7.5%; z-index: 3;
  background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.28) 62%, transparent 100%);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--c1) 34%, transparent);
}
.rv-cover__grain {            /* paper tooth */
  position: absolute; inset: 0; z-index: 1; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.rv-cover__inner {
  position: absolute; inset: 0; z-index: 4;
  padding: 10% 9% 8% 15%;
  display: flex; flex-direction: column;
  color: #fff; text-decoration: none;
}
.rv-cover__brand {
  font-size: clamp(7px, .82vw, 10px); letter-spacing: .34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c1) 82%, white); font-weight: 700;
  padding-right: 42%;   /* keeps clear of the bestseller flag */
}
.rv-cover__rule {
  margin: 7% 0 auto; height: 1px; width: 34%;
  background: linear-gradient(90deg, var(--c1), transparent);
}
.rv-cover__title {
  font-family: var(--font-display), "Bebas Neue", Impact, sans-serif;
  font-size: clamp(19px, 3.1vw, 40px); line-height: .93; letter-spacing: .012em;
  text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.5);
}
.rv-cover__sub {
  margin-top: 5%; font-size: clamp(8px, .95vw, 12px); line-height: 1.4;
  color: rgba(255,255,255,.72); font-weight: 500; text-wrap: pretty;
}
.rv-cover__foot {
  margin-top: auto; padding-top: 8%;
  display: flex; flex-direction: column; gap: 3px;
  font-size: clamp(7px, .8vw, 10px); letter-spacing: .2em; text-transform: uppercase;
}
.rv-cover__author { color: rgba(255,255,255,.9); font-weight: 700; }
.rv-cover__cat { color: color-mix(in srgb, var(--c1) 75%, white); }

/* ---- motion: a slow idle sheen, and a faster sweep on hover ---- */
.rv-cover__shine {
  position: absolute; inset: -40% -60%; z-index: 5; pointer-events: none;
  background: linear-gradient(72deg, transparent 42%,
    rgba(255,255,255,.13) 49%, rgba(255,255,255,.26) 51%, rgba(255,255,255,.13) 53%, transparent 60%);
  transform: translateX(-60%);
  animation: rvSheen 9s ease-in-out infinite;
}
@keyframes rvSheen {
  0%, 68% { transform: translateX(-60%); }
  86%, 100% { transform: translateX(60%); }
}
.rv-card:hover .rv-cover,
.rv-cover:hover {
  transform: perspective(900px) rotateY(-5deg) rotateX(2deg) translateY(-6px) scale(1.015);
  box-shadow: -18px 26px 46px rgba(0,0,0,.55);
}
.rv-card:hover .rv-cover__shine,
.rv-cover:hover .rv-cover__shine { animation: rvSheenFast 1.1s ease-out; }
@keyframes rvSheenFast {
  from { transform: translateX(-60%); }
  to { transform: translateX(60%); }
}

/* ---- product page: a larger, standing cover ---- */
.rv-product__cover { background: none !important; padding: 0; border: 0 !important; }
.rv-cover--big { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 18px;
  box-shadow: -14px 20px 40px rgba(0,0,0,.5); }
.rv-cover--big .rv-cover__title { font-size: clamp(30px, 4.4vw, 58px); }
.rv-cover--big .rv-cover__sub { font-size: clamp(11px, 1.2vw, 15px); }

/* the bestseller flag sat on top of the cover's brand line - move it to the
   right edge, and keep the rank medallion clear of the spine */
.rv-card > .rv-badge:not(.rank) { left: auto; right: 10px; }
.rv-card > .rv-badge.rank { left: auto; right: -12px; top: -12px; }

/* the empty toast box peeked above the bottom edge of every page - its
   off-screen transform is a % of its own height, which is tiny when empty */
.rv-toast:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rv-cover__shine { animation: none; opacity: .35; }
  .rv-cover { transition: none; }
  .rv-card:hover .rv-cover, .rv-cover:hover { transform: none; }
}
