/* iBD Rating public CSS — extracted from html_template (homepage + search + details) */

:root {
  --black: #080808;
  --black2: #111;
  --white: #fff;
  --paper: #f8f7f4;
  --line: #deddd8;
  --muted: #6c6b67;
  --gold: #d9a52a;
  --gold2: #f0c65a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --max: 1420px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--white);
  color: #111;
  font-family: var(--sans)
}

a {
  text-decoration: none;
  color: inherit
}

button,
input {
  font: inherit
}

img {
  display: block;
  max-width: 100%
}

.container {
  width: min(var(--max), calc(100% - 64px));
  margin: auto
}

/* HEADER */
.header {
  height: 72px;
  background: var(--black);
  color: #fff;
  border-bottom: 1px solid #292929;
  position: sticky;
  top: 0;
  z-index: 100
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 35px;
  position: relative
}

.logo {
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -1.5px;
  white-space: nowrap
}

.logo i {
  font-style: normal;
  color: #fff;
  position: relative
}

.logo i:before {
  content: "★";
  color: var(--gold);
  font-size: 10px;
  position: absolute;
  left: 7px;
  top: -12px
}

.logo .gold {
  color: var(--gold)
}

.navlinks {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px
}

.navlinks a:hover {
  color: var(--gold2)
}

.navright {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto
}

.search-icon {
  font-size: 23px;
  margin-right: 10px
}

.btn {
  border: 1px solid #555;
  background: transparent;
  color: #fff;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase
}

.btn.light {
  background: transparent;
  color: #fff;
  border-color: #fff
}

.btn.light:hover {
  background: #fff;
  color: #111
}

.btn.gold {
  background: var(--gold);
  color: #111;
  border-color: var(--gold)
}

.menu {
  display: none;
  color: #fff;
  font-size: 25px;
  cursor: pointer
}

/* HERO */
.hero {
  height: 575px;
  background: #0a0a0a;
  color: #fff;
  position: relative;
  overflow: hidden
}

/* ── Slider background (when admin has added slides) ──────── */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .9s ease
}

.hero-slide.active {
  opacity: 1
}

/* Dark overlay ensures text is always readable over any photo */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, .75) 0%,
      rgba(0, 0, 0, .30) 35%,
      rgba(0, 0, 0, .30) 65%,
      rgba(0, 0, 0, .75) 100%)
}

/* Active dot for slider */
.dots span.active {
  background: #fff
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .08), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .12), rgba(0, 0, 0, .9));
  z-index: 3;
  pointer-events: none
}

.globe {
  position: absolute;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, .10) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 50px, rgba(255, 255, 255, .08) 51px 52px),
    radial-gradient(circle at 38% 35%, #3d3d3a, #151515 55%, #070707 78%);
  box-shadow: inset -80px -30px 120px #000, 0 0 100px rgba(255, 255, 255, .05);
  filter: contrast(1.15)
}

.globe:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 25%, transparent 0 25%, rgba(0, 0, 0, .25) 55%, #000 100%)
}

.hero-content {
  height: 100%;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center
}

.hero-copy {
  margin-top: 10px
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: #c8c5bc;
  margin-bottom: 14px
}

.hero h1 {
  font-family: var(--serif);
  font-size: 49px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0 0 12px
}

.hero-sub {
  font-size: 14px;
  color: #e4e2dd;
  margin-bottom: 25px
}

.big-search {
  height: 58px;
  width: min(570px, 90vw);
  display: flex;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.big-search input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 18px;
  font-size: 13px
}

.big-search button {
  width: 58px;
  border: 0;
  background: var(--gold);
  color: #111;
  font-size: 20px;
  cursor: pointer
}

.tags {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 10px
}

.tags span {
  border: 1px solid #65635d;
  border-radius: 20px;
  padding: 6px 12px;
  color: #eee;
  background: rgba(0, 0, 0, .25)
}

.hero-card {
  position: absolute;
  z-index: 7;
  width: 180px;
  padding: 13px;
  background: rgba(12, 12, 12, .86);
  border: 1px solid #555;
  border-radius: 6px;
  text-align: left;
  box-shadow: 0 12px 30px #000
}

.hero-card img {
  width: 42px;
  height: 58px;
  object-fit: cover;
  float: left;
  margin-right: 10px
}

.hero-card strong {
  font-size: 11px;
  display: block;
  padding-top: 2px
}

.hero-card small {
  color: #aaa;
  font-size: 9px
}

.stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: 13px
}

.hc1 {
  left: 5%;
  top: 105px
}

.hc2 {
  right: 5%;
  top: 105px
}

.hc3 {
  left: 7%;
  bottom: 90px
}

.hc4 {
  right: 6%;
  bottom: 90px
}

.dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 8
}

.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #777
}

.dots span:first-child {
  background: #fff
}

/* TRUST STRIP */
.trust {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #faf9f6)
}

.trustgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr)
}

.trustitem {
  padding: 32px 26px;
  display: flex;
  gap: 15px;
  align-items: center;
  border-right: 1px solid var(--line);
  transition: background .25s ease
}

.trustitem:last-child {
  border: 0
}

.trustitem:hover {
  background: rgba(217, 165, 42, .06)
}

.ticon {
  font-size: 26px;
  line-height: 1;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05)
}

.trusttext strong {
  font-family: var(--serif);
  font-size: 15px;
  display: block;
  margin-bottom: 5px;
  letter-spacing: .2px
}

.trusttext p {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0
}

/* SECTIONS */
.section {
  padding: 62px 0
}

.sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px
}

.sectionhead h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  letter-spacing: .3px;
  position: relative;
  padding-bottom: 12px
}

.sectionhead h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold2))
}

.sectionhead p {
  font-size: 12px;
  color: #888;
  margin: 6px 0 0
}

.view {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  color: #111;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 9px 16px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease
}

.view:hover {
  background: #0b0b0b;
  color: #fff;
  border-color: #0b0b0b
}

/* BOOKS */
.bookrow {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 22px
}

.book {
  min-width: 0;
  display: flex;
  flex-direction: column
}

.book-cover-link {
  display: block
}

.cover {
  position: relative;
  height: 270px;
  background: linear-gradient(160deg, #fbfaf7, #efeee9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease
}

.book-cover-link:hover .cover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .18)
}

.cover img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22)
}

.rating-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(10, 10, 10, .9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  backdrop-filter: blur(2px)
}

.rating-badge .rb-star {
  color: var(--gold2);
  font-size: 11px;
  line-height: 1
}

.book-meta {
  padding: 0 2px
}

.book-title {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.3;
  margin: 13px 0 4px;
  font-weight: 600;
  letter-spacing: .1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.book-title a {
  color: #141414
}

.book-title a:hover {
  color: var(--gold)
}

.book-author {
  font-size: 11px;
  color: #8a8a86;
  font-style: italic;
  margin-bottom: 8px
}

.bookrating {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px
}

.bookrating .stars {
  font-size: 14px;
  letter-spacing: 1px
}

.bookrating .rating-count {
  font-size: 12px;
  font-weight: 800;
  color: #333
}

/* CAROUSEL */
.carousel {
  position: relative
}

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5*22px)/6);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 18px;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.carousel-track::-webkit-scrollbar {
  display: none
}

.carousel-slide {
  scroll-snap-align: start;
  min-width: 0
}

.carousel-arrow {
  position: absolute;
  top: 120px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  transition: transform .2s ease, background .2s ease, opacity .2s ease
}

.carousel-arrow:hover {
  background: var(--gold);
  color: #111;
  transform: scale(1.08)
}

.carousel-arrow.prev {
  left: -14px
}

.carousel-arrow.next {
  right: -14px
}

.carousel-arrow[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none
}

/* GENRES */
.genre-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px
}

.genre {
  height: 140px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease
}

.genre:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .25)
}

.genre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.42) grayscale(.25);
  transition: transform .5s ease, filter .3s ease
}

.genre:hover img {
  transform: scale(1.08);
  filter: brightness(.5) grayscale(0)
}

.genre:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88))
}

.genretext {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 13px
}

.genretext strong {
  display: block;
  font-family: var(--serif);
  font-size: 16px
}

.genretext span {
  font-size: 10px;
  color: var(--gold2);
  font-weight: 700;
  letter-spacing: .3px
}

/* REVIEWS */
.reviews {
  background: #f8f7f4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.reviewgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.review {
  position: relative;
  background: #fff;
  border: 1px solid #e8e6df;
  border-radius: 14px;
  padding: 26px 24px 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease
}

.review::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 20px;
  font-family: var(--serif);
  font-size: 74px;
  line-height: 1;
  color: rgba(217, 165, 42, .18)
}

.review:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
  border-color: rgba(217, 165, 42, .5)
}

.reviewer {
  display: flex;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2a2a, #000);
  color: var(--gold2);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--serif);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
}

.reviewer strong {
  font-size: 14px
}

.reviewer small {
  display: block;
  color: #999;
  font-size: 11px;
  margin-top: 2px
}

.review .bookrating {
  margin: 16px 0 4px;
  gap: 8px
}

.review .bookrating .stars {
  font-size: 17px;
  letter-spacing: 1px
}

.review .bookrating b {
  font-size: 15px;
  font-weight: 800;
  color: #111;
  background: rgba(217, 165, 42, .16);
  padding: 2px 9px;
  border-radius: 20px
}

.review h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0 2px;
  line-height: 1.3
}

.review .by {
  font-size: 12px;
  color: #8a8a86;
  font-style: italic
}

.review p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.65;
  color: #4a4a48;
  margin: 12px 0 16px;
  flex: 1
}

.reviewbottom {
  font-size: 12px;
  color: #888;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #efeee9;
  padding-top: 14px;
  margin-top: auto
}

/* CTA */
.cta {
  padding: 40px 0 60px
}

.ctabox {
  min-height: 190px;
  background: linear-gradient(120deg, #0b0b0b 0%, #161616 55%, #201a0b 100%);
  color: #fff;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 36px 58px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .22)
}

.ctabox:before {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -110px;
  width: 330px;
  height: 330px;
  border: 1px solid #3c3c3c;
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, .03), 0 0 0 31px rgba(217, 165, 42, .18)
}

.ctaicon {
  width: 76px;
  height: 76px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--gold2);
  margin-right: 26px;
  box-shadow: 0 0 30px rgba(217, 165, 42, .25);
  flex: 0 0 76px
}

.ctabox h2 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: .3px
}

.ctabox p {
  font-size: 13px;
  color: #bdbdbd;
  margin: 0;
  line-height: 1.5
}

.ctabtns {
  margin-left: auto;
  display: flex;
  gap: 10px;
  z-index: 2
}

/* ===== NEW HOME SECTIONS (editorial black/white/gold) ===== */

/* Rank badge on Top Rated covers */
.rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0b;
  color: var(--gold2);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--gold)
}

/* Review grids: explicit column counts */
.reviewgrid.three {
  grid-template-columns: repeat(3, 1fr)
}

.reviewgrid.four {
  grid-template-columns: repeat(4, 1fr)
}

.reviewer-id strong {
  display: flex;
  align-items: center;
  gap: 5px
}

.review .review-headline {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  font-style: normal;
  margin: 10px 0 2px
}

.review-readmore {
  font-weight: 700;
  color: #111;
  letter-spacing: .3px
}

.review-readmore:hover {
  color: var(--gold)
}

.cflag {
  font-size: 14px;
  line-height: 1;
  font-style: normal
}

/* MOST REVIEWED — editorial ranked list */
.ranklist {
  border-top: 1px solid var(--line)
}

.rankrow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--line);
  color: #111;
  transition: background .2s ease
}

.rankrow:hover {
  background: #faf9f6
}

.ranknum {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #c9c7c0;
  width: 34px;
  flex: 0 0 34px;
  text-align: center
}

.rankrow:hover .ranknum {
  color: var(--gold)
}

.rankcover {
  flex: 0 0 44px;
  width: 44px;
  height: 62px;
  background: #f1f0ed;
  border: 1px solid var(--line);
  overflow: hidden
}

.rankcover img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rankmeta {
  flex: 1;
  min-width: 0
}

.rankmeta strong {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.rankmeta small {
  font-size: 12px;
  color: var(--muted);
  font-style: italic
}

.rankstats {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto
}

.rankreviews {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap
}

.rankrating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  color: #111
}

.rankrating .rr-star {
  color: var(--gold)
}

/* TOP REVIEWERS — premium community cards */
.reviewer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.reviewer-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px
}

.reviewer-card-top {
  display: flex;
  align-items: center;
  gap: 14px
}

.reviewer-card-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: #0b0b0b;
  color: var(--gold2);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700
}

.reviewer-card-id {
  min-width: 0
}

.reviewer-card-id strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.reviewer-card-country {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.reviewer-card-stats {
  display: flex;
  gap: 14px;
  margin: 18px 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.reviewer-card-stats div {
  flex: 1;
  text-align: center
}

.reviewer-card-stats b {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #111
}

.reviewer-card-stats span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted)
}

.reviewer-card-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #111;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px
}

.reviewer-card-link:hover {
  color: var(--gold)
}

/* EXPLORE BOOKS — genre + language editorial lists */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px
}

.explore-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #0b0b0b;
  padding-bottom: 10px;
  margin-bottom: 16px
}

.explore-head h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0
}

.explore-all {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: #111
}

.explore-all:hover {
  color: var(--gold)
}

.chip-list {
  display: flex;
  flex-direction: column
}

.chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  color: #111;
  transition: padding-left .2s ease, color .2s ease
}

.chip:hover {
  padding-left: 10px;
  color: var(--gold)
}

.chip-name {
  font-size: 14px;
  font-weight: 600
}

.chip-name em {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
  margin-left: 7px;
  font-size: 12px
}

.chip-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.chip:hover .chip-count {
  color: #111
}

.chip-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 12px 4px
}

/* PEOPLE (authors + publishers) */
.people-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: #111;
  transition: border-color .2s ease, transform .25s ease
}

.person-card:not(.static):hover {
  border-color: var(--gold);
  transform: translateY(-4px)
}

.person-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #0b0b0b;
  color: var(--gold2);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 13px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700
}

.person-avatar.square {
  border-radius: 6px;
  background: #f4f3ef;
  color: #111;
  border: 1px solid var(--line)
}

.person-avatar.square.no-img {
  background: #f4f3ef
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.person-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 5px
}

.person-name .verified {
  color: #fff;
  background: var(--gold);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 9px;
  display: inline-grid;
  place-items: center
}

.person-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px
}

.person-count {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .4px
}

/* POWERED BY iBD RATING */
.poweredby {
  background: #0b0b0b;
  color: #fff;
  padding: 44px 0;
  text-align: center
}

.poweredby-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

.poweredby-brand {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -1px
}

.poweredby-brand i {
  font-style: normal;
  position: relative
}

.poweredby-brand i:before {
  content: "\2605";
  color: var(--gold);
  font-size: 9px;
  position: absolute;
  left: 7px;
  top: -11px
}

.poweredby-brand .gold {
  color: var(--gold)
}

.poweredby p {
  font-size: 12px;
  color: #9a9a97;
  margin: 0;
  max-width: 460px
}

.poweredby-links {
  display: flex;
  gap: 24px;
  margin-top: 6px
}

.poweredby-links a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #cfcdc7
}

.poweredby-links a:hover {
  color: var(--gold)
}

/* MOBILE DRAWER (opened from bottom-nav Menu) */
/* Collapsed by default AND whenever the [hidden] attribute is present,
   so the menu never shows until JS opens it. */
.mobile-drawer {
  display: none;
  flex-direction: column;
  background: #0b0b0b;
  border-top: 1px solid #222
}

.mobile-drawer[hidden] {
  display: none !important
}

.mobile-drawer.is-open {
  display: flex
}

.mobile-drawer a {
  padding: 15px 32px;
  color: #eee;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid #1c1c1c
}

.mobile-drawer a:hover {
  background: #151515;
  color: var(--gold2)
}

/* MOBILE BOTTOM NAV (mobile only) — light editorial bar */
.mobilenav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: #ffffff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
  padding-bottom: env(safe-area-inset-bottom)
}

.mobilenav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 7px;
  color: #6c6b67;
  min-height: 54px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit
}

.mobilenav-item .mn-icon {
  font-size: 19px;
  line-height: 1
}

.mobilenav-item .mn-label {
  font-size: 10px;
  letter-spacing: .3px
}

.mobilenav-item.active {
  color: #111
}

.mobilenav-item.active .mn-icon {
  color: var(--gold)
}

.mobilenav-item[aria-expanded="true"] {
  color: #111
}

.mobilenav-item[aria-expanded="true"] .mn-icon {
  color: var(--gold)
}

/* ===== ALL BOOKS / CATALOGUE PAGE ===== */
.catalogue {
  background: #fff;
  padding: 34px 0 60px
}

.catalogue-head {
  margin-bottom: 22px
}

.catalogue-title h1 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  letter-spacing: .3px;
  position: relative;
  padding-bottom: 12px
}

.catalogue-title h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold2))
}

.catalogue-title p {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0
}

/* Toolbar: search + sort */
.catalogue-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.catalogue-search {
  display: flex;
  flex: 1;
  min-width: 220px;
  max-width: 560px;
  height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden
}

.catalogue-search input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 16px;
  font-size: 13px
}

.catalogue-search button {
  width: 50px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #0b0b0b;
  color: #fff;
  font-size: 18px;
  cursor: pointer
}

.catalogue-search button:hover {
  background: var(--gold);
  color: #0b0b0b
}

.catalogue-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted)
}

.catalogue-sort select {
  height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 12px;
  font-size: 13px;
  color: #111;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0
}

/* Filters */
.catalogue-filters {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 14px 0 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px
}

.filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-right: 4px
}

.filter-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 15px;
  border: 1px solid var(--line);
  color: #111;
  transition: background .2s ease, color .2s ease, border-color .2s ease
}

.filter-chip:hover {
  border-color: #0b0b0b
}

.filter-chip.is-on {
  background: #0b0b0b;
  color: #fff;
  border-color: #0b0b0b
}

.filter-clear {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto
}

.filter-clear:hover {
  color: var(--gold)
}

/* Catalogue grid — 6 per row on large desktop */
.book-catalogue {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px 24px
}

/* Detailed card variant: uniform alignment across a row */
.book--detailed {
  height: 100%
}

.book--detailed .book-meta {
  display: flex;
  flex-direction: column;
  flex: 1
}

.book--detailed .book-title {
  min-height: 2.6em
}

.book-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px
}

.book-country .cflag {
  font-size: 14px
}

.book-reviews {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: .2px
}

/* FOOTER */
.footer {
  background: #0a0a0a;
  color: #fff;
  padding-top: 44px
}

.footergrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 35px;
  padding-bottom: 38px
}

.footer .logo {
  font-size: 23px
}

.footer p {
  color: #aaa;
  font-size: 10px;
  line-height: 1.7;
  max-width: 300px
}

.social {
  display: flex;
  gap: 7px;
  margin-top: 16px
}

.social span {
  width: 27px;
  height: 27px;
  border: 1px solid #444;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px
}

.footer h4 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 14px
}

.footer a {
  display: block;
  color: #aaa;
  font-size: 10px;
  margin: 9px 0
}

.footer a:hover {
  color: #fff
}

.bottom {
  border-top: 1px solid #292929;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 9px
}

/* RESPONSIVE */
@media(max-width:1100px) {
  .navlinks {
    gap: 15px
  }

  .nav {
    gap: 18px
  }

  .bookrow {
    grid-template-columns: repeat(4, 1fr)
  }

  .carousel-track {
    grid-auto-columns: calc((100% - 3*22px)/4)
  }

  .genre-row {
    grid-template-columns: repeat(4, 1fr)
  }

  .trustgrid {
    grid-template-columns: repeat(3, 1fr)
  }

  .trustitem:nth-child(3) {
    border-right: 0
  }

  .trustitem:nth-child(n+4) {
    border-top: 1px solid var(--line)
  }

  .reviewgrid.four {
    grid-template-columns: repeat(2, 1fr)
  }

  .people-grid {
    grid-template-columns: repeat(4, 1fr)
  }

  .book-catalogue {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* Regular desktop: 5 per row */
@media(max-width:1400px) and (min-width:1101px) {
  .book-catalogue {
    grid-template-columns: repeat(5, 1fr)
  }
}

@media(max-width:800px) {
  .container {
    width: calc(100% - 30px)
  }

  .header {
    height: 64px
  }

  .nav {
    gap: 10px
  }

  .navlinks,
  .navright .search-icon {
    display: none
  }

  .navright {
    margin-left: auto
  }

  .menu {
    display: block
  }

  .navright .btn {
    padding: 8px 11px
  }

  .logo {
    font-size: 21px
  }

  .hero {
    height: 520px
  }

  .globe {
    width: 510px;
    height: 510px;
    top: 48%
  }

  .hero h1 {
    font-size: 37px
  }

  .hero-card {
    width: 145px;
    padding: 9px
  }

  .hero-card img {
    width: 34px;
    height: 47px
  }

  .hc1 {
    left: 2%;
    top: 75px
  }

  .hc2 {
    right: 2%;
    top: 75px
  }

  .hc3 {
    left: 2%;
    bottom: 62px
  }

  .hc4 {
    right: 2%;
    bottom: 62px
  }

  .trustgrid {
    grid-template-columns: 1fr 1fr
  }

  .trustitem {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
  }

  .trustitem:nth-child(2n) {
    border-right: 0
  }

  .bookrow {
    grid-template-columns: repeat(3, 1fr)
  }

  .carousel-track {
    grid-auto-columns: calc((100% - 2*22px)/3)
  }

  .carousel-arrow {
    top: 140px
  }

  .cover {
    height: 260px
  }

  .reviewgrid {
    grid-template-columns: 1fr 1fr
  }

  .genre-row {
    grid-template-columns: repeat(4, 1fr)
  }

  .footergrid {
    grid-template-columns: 1fr 1fr
  }

  .footerbrand {
    grid-column: 1/-1
  }

  .ctabox {
    height: auto;
    min-height: 180px;
    padding: 25px
  }

  .ctabtns {
    margin-left: 20px
  }

  /* New sections at tablet */
  .reviewgrid.three,
  .reviewgrid.four {
    grid-template-columns: repeat(2, 1fr)
  }

  .reviewer-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .explore-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .people-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .book-catalogue {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 18px
  }

  .rankstats {
    gap: 14px
  }

  /* Mobile chrome: bottom nav on, desktop footer off.
     The drawer stays JS-controlled via [hidden]; do NOT force display here. */
  .mobilenav {
    display: flex
  }

  .footer {
    display: none
  }

  body {
    padding-bottom: 60px
  }
}

@media(max-width:520px) {
  .header .btn.light {
    display: none
  }

  .logo {
    font-size: 19px
  }

  .menu {
    font-size: 22px
  }

  .hero {
    height: 555px
  }

  .globe {
    width: 430px;
    height: 430px;
    top: 43%
  }

  .hero h1 {
    font-size: 32px;
    letter-spacing: 0
  }

  .hero-sub {
    font-size: 12px;
    max-width: 310px;
    margin-left: auto;
    margin-right: auto
  }

  .hero-card {
    width: 116px;
    font-size: 9px
  }

  .hero-card img {
    float: none;
    width: 35px;
    height: 48px;
    margin: 0 0 5px
  }

  .hc1 {
    left: 4px;
    top: 45px
  }

  .hc2 {
    right: 4px;
    top: 45px
  }

  .hc3 {
    left: 4px;
    bottom: 42px
  }

  .hc4 {
    right: 4px;
    bottom: 42px
  }

  .big-search {
    height: 52px
  }

  .big-search input {
    font-size: 11px
  }

  .tags {
    font-size: 8px
  }

  .tags span {
    padding: 5px 8px
  }

  .trustgrid {
    grid-template-columns: 1fr
  }

  .trustitem {
    border-right: 0 !important
  }

  .section {
    padding: 40px 0
  }

  .sectionhead h2 {
    font-size: 22px
  }

  .sectionhead p {
    font-size: 10px
  }

  .view {
    font-size: 8px
  }

  .bookrow {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px
  }

  .carousel-track {
    grid-auto-columns: calc((100% - 1*16px)/2);
    gap: 16px
  }

  .carousel-arrow {
    display: none
  }

  .cover {
    height: 250px
  }

  .genre-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .genre {
    height: 135px
  }

  .reviewgrid {
    grid-template-columns: 1fr
  }

  .ctabox {
    display: block
  }

  .ctaicon {
    margin-bottom: 14px
  }

  .ctabtns {
    margin: 18px 0 0
  }

  .ctabtns .btn {
    flex: 1
  }

  .footergrid {
    grid-template-columns: 1fr 1fr;
    gap: 25px
  }

  .footerbrand {
    grid-column: 1/-1
  }

  .bottom {
    display: block
  }

  .bottom span {
    display: block;
    margin-top: 5px
  }

  /* New sections at phone width */
  .reviewgrid.three,
  .reviewgrid.four {
    grid-template-columns: 1fr
  }

  .reviewer-grid {
    grid-template-columns: 1fr
  }

  .people-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
  }

  .book-catalogue {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px
  }

  .catalogue-title h1 {
    font-size: 24px
  }

  .catalogue-toolbar {
    gap: 10px
  }

  .catalogue-sort {
    width: 100%
  }

  .catalogue-sort select {
    flex: 1
  }

  .rankrow {
    gap: 12px;
    padding: 13px 2px
  }

  .ranknum {
    font-size: 18px;
    width: 24px;
    flex-basis: 24px
  }

  .rankcover {
    flex-basis: 38px;
    width: 38px;
    height: 54px
  }

  .rankmeta strong {
    font-size: 14px;
    white-space: normal
  }

  .rankstats {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px
  }

  .rankreviews {
    font-size: 11px
  }

  .person-avatar {
    width: 62px;
    height: 62px;
    font-size: 24px
  }

  .poweredby-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 20px
  }

  .sectionhead {
    flex-wrap: wrap;
    gap: 10px
  }
}

/* ===== Large / ultra-wide desktop ===== */
@media(min-width:1600px) {
  .people-grid {
    gap: 26px
  }

  .reviewer-card {
    padding: 26px
  }

  .book-catalogue {
    gap: 34px 28px
  }
}

/* ===== Search page ===== */
:root {
  --black: #070707;
  --black2: #101010;
  --white: #fff;
  --paper: #fafafa;
  --line: #e4e4e4;
  --muted: #777;
  --gold: #e8a900;
  --link: #315c91;
  --max: 1420px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: var(--sans);
  font-size: 14px
}

img {
  display: block;
  max-width: 100%
}

a {
  text-decoration: none;
  color: inherit
}

button,
input,
select {
  font: inherit
}

.container {
  width: min(var(--max), calc(100% - 72px));
  margin: auto
}

/* HEADER */
.header {
  height: 70px;
  background: #070707;
  color: #fff;
  border-bottom: 1px solid #252525
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 35px
}

.logo {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -1.5px;
  white-space: nowrap
}

.logo .gold {
  color: var(--gold)
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto
}

.navlinks a {
  font-size: 10px;
  text-transform: uppercase;
  color: #eee
}

.navlinks a:hover {
  color: var(--gold)
}

.header-search {
  font-size: 22px;
  margin-left: 5px
}

.login {
  border: 1px solid #8c8c8c;
  border-radius: 4px;
  padding: 9px 18px;
  font-size: 10px
}

.signup {
  background: #fff;
  color: #111;
  border-radius: 4px;
  padding: 10px 17px;
  font-size: 10px;
  font-weight: 800
}

/* HERO */
.search-hero {
  height: 340px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, .57), rgba(0, 0, 0, .78)),
    url("https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&w=1800&q=85") center/cover;
}

.search-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 95%, rgba(255, 255, 255, .08), transparent 35%),
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 35%, transparent 65%, rgba(0, 0, 0, .55));
  pointer-events: none;
}

.hero-inner {
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}

.hero-inner h1 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  margin: 0 0 9px;
  letter-spacing: .2px
}

.hero-inner p {
  font-size: 12px;
  color: #eee;
  margin: 0 0 20px
}

.hero-search {
  width: min(650px, 90vw);
  height: 51px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  overflow: hidden
}

.hero-search input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 17px;
  font-size: 12px;
  color: #222
}

.hero-search button {
  width: 54px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 21px;
  border-left: 1px solid #eee;
  cursor: pointer
}

.popular {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 9px
}

.popular b {
  font-weight: 400;
  color: #ddd
}

.popular a {
  background: #1c1c1c;
  border: 1px solid #363636;
  border-radius: 15px;
  padding: 6px 12px;
  color: #eee
}

/* BREADCRUMB */
.breadcrumb {
  height: 49px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  color: #777;
  font-size: 10px
}

.breadcrumb span {
  margin: 0 9px;
  color: #bbb
}

/* SEARCH AREA */
.results {
  padding: 25px 0 55px
}

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  align-items: start
}

.layout.no-filters {
  grid-template-columns: minmax(0, 1fr)
}

/* FILTER */
.filters {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  background: #fff;
  position: sticky;
  top: 88px
}

.filter-close {
  display: none;
  background: none;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  color: #777;
  margin-left: auto
}

.filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 300
}

.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px
}

.filter-head strong {
  font-size: 12px;
  letter-spacing: .5px
}

.clear {
  font-size: 10px;
  color: var(--link);
  margin-left: auto
}

.filter-section {
  border-top: 1px solid #eee;
  padding: 16px 0
}

.filter-section:first-of-type {
  border-top: 0;
  padding-top: 0
}

.filter-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 12px
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 10px 0;
  color: #333;
  cursor: pointer
}

.check:hover {
  color: #111
}

.check small {
  color: var(--muted)
}

.check input {
  margin: 0;
  width: 12px;
  height: 12px;
  accent-color: #111
}

.more {
  font-size: 9px;
  color: #555;
  margin-top: 8px;
  text-align: right
}

.stars-filter {
  color: var(--gold);
  letter-spacing: 1px
}

.year-range {
  margin: 17px 0 10px;
  position: relative;
  height: 4px;
  background: #ddd;
  border-radius: 5px
}

.year-range:before,
.year-range:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%)
}

.year-range:before {
  left: 0
}

.year-range:after {
  right: 0
}

.year-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px
}

.year-inputs select {
  width: 100%;
  height: 27px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  font-size: 8px;
  padding: 0 5px
}

.apply {
  width: 100%;
  height: 40px;
  background: #080808;
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-top: 14px;
  cursor: pointer
}

.apply:hover {
  background: var(--gold);
  color: #0b0b0b
}

/* RESULTS COLUMN */
.result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid #0b0b0b;
  padding-bottom: 14px;
  margin-bottom: 6px
}

.result-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 5px
}

.result-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 0
}

.result-sortwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  white-space: nowrap
}

.sort {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  padding: 0 12px;
  color: #111;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0
}

/* Mobile filter/sort bar (hidden on desktop) */
.result-mobilebar {
  display: none;
  gap: 10px;
  margin-bottom: 14px
}

.mbar-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #111
}

.mbar-sort {
  position: relative
}

.mbar-sort select {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer
}

.mbar-badge {
  background: var(--gold);
  color: #0b0b0b;
  font-size: 10px;
  font-weight: 800;
  border-radius: 20px;
  padding: 1px 7px
}

/* Active filter chips */
.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0
}

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: #111
}

.active-chip span {
  color: var(--muted);
  font-size: 11px
}

.active-chip:hover {
  border-color: #0b0b0b
}

.active-chip.clear-all {
  background: #0b0b0b;
  color: #fff;
  border-color: #0b0b0b
}

/* ===== Rich result card ===== */
.rcard {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 150px;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  align-items: start
}

.rcard-cover img {
  width: 96px;
  height: 140px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
  transition: transform .25s ease, box-shadow .25s ease
}

.rcard-cover:hover img {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18)
}

.rcard-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 3px
}

.rcard-title a:hover {
  color: var(--gold)
}

.rcard-subtitle {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 7px
}

.rcard-by {
  font-size: 13px;
  color: #444;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.rcard-by a {
  color: var(--link)
}

.rcard-by a:hover {
  text-decoration: underline
}

.rcard-by .cflag {
  font-size: 15px
}

.rcard-lang {
  color: var(--muted);
  font-size: 12px
}

.rcard-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 9px
}

.rcard-tag {
  font-size: 11px;
  border: 1px solid var(--line);
  padding: 3px 10px;
  color: #444
}

.rcard-tag:hover {
  border-color: var(--gold);
  color: var(--gold)
}

.rcard-desc {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  color: #555;
  margin: 0
}

.rcard-side {
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 18px
}

.rcard-rating .stars {
  color: var(--gold);
  font-size: 17px;
  letter-spacing: 1px;
  white-space: nowrap
}

.rcard-score {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px
}

.rcard-score span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400
}

.rcard-counts {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 8px 0 12px
}

.rcard-counts b {
  color: #111;
  font-weight: 700
}

.rcard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.rcard-view {
  border: 1px solid #0b0b0b;
  background: #0b0b0b;
  color: #fff;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px
}

.rcard-view:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0b0b
}

.rcard-bookmark {
  border: 1px solid var(--line);
  background: #fff;
  width: 38px;
  height: 34px;
  font-size: 15px;
  cursor: pointer;
  display: inline-grid;
  place-items: center
}

.rcard-bookmark:hover {
  border-color: var(--gold)
}

.rcard-actions form {
  margin: 0
}

/* No results */
.no-results {
  text-align: center;
  padding: 60px 20px
}

.no-results-icon {
  font-size: 40px;
  opacity: .5;
  margin-bottom: 12px
}

.no-results h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px
}

.no-results p {
  font-size: 13px;
  color: var(--muted);
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.6
}

.no-results-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap
}

.result-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 105px;
  gap: 16px;
  padding: 16px 5px;
  border-bottom: 1px solid #e5e5e5;
  align-items: center
}

.result-cover {
  width: 82px;
  height: 117px;
  object-fit: cover;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
}

.result-info h3 {
  font-size: 13px;
  margin: 0 0 4px
}

.result-info h3 a:hover {
  text-decoration: underline
}

.subtitle {
  font-family: var(--serif);
  font-size: 9px;
  color: #555;
  margin-bottom: 7px
}

.by {
  font-size: 9px;
  margin-bottom: 7px
}

.by a {
  color: #315c91;
  text-decoration: underline
}

.tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 7px
}

.tag {
  font-size: 7px;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 4px 7px;
  color: #555
}

.desc {
  font-family: var(--serif);
  font-size: 9px;
  line-height: 1.45;
  color: #555;
  margin: 0 0 6px
}

.meta {
  font-size: 8px;
  color: #777
}

.result-rate {
  text-align: right
}

.result-stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 1px;
  white-space: nowrap
}

.result-score {
  font-size: 16px;
  font-weight: 800;
  margin-top: 4px
}

.result-score span {
  font-size: 10px;
  color: #777;
  font-weight: 400
}

.ratings-count {
  font-size: 8px;
  color: #888;
  margin-top: 5px
}

.result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 13px
}

.view-details {
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 4px;
  padding: 7px 11px;
  font-size: 8px
}

.bookmark {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  width: 29px;
  font-size: 12px
}

/* PAGINATION */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 17px
}

.pagination a {
  width: 27px;
  height: 27px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px
}

.pagination a.active {
  background: #080808;
  color: #fff;
  border-color: #080808
}

.pagination .next {
  width: auto;
  border-radius: 15px;
  padding: 0 12px
}

/* RIGHT SIDEBAR */
.sidebar {
  display: grid;
  gap: 13px
}

.side-box {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 16px;
  background: #fff
}

.side-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px
}

.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  padding: 7px 0
}

.category .name {
  display: flex;
  align-items: center;
  gap: 8px
}

.category .icon {
  font-size: 14px
}

.category .count {
  color: #777
}

.author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0
}

.author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover
}

.author strong {
  font-size: 8px;
  display: block
}

.author small {
  font-size: 7px;
  color: #777
}

.author-books {
  margin-left: auto;
  font-size: 7px;
  color: #777
}

.side-link {
  font-size: 8px;
  color: var(--link);
  margin-top: 9px
}

.trend {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 9px;
  padding: 6px 0;
  color: #444
}

.trend span {
  color: #999
}

.request {
  background: #080808;
  color: #fff;
  border-radius: 6px;
  padding: 17px;
  min-height: 145px;
  position: relative;
  overflow: hidden
}

.request:after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  right: -45px;
  bottom: -65px;
  border: 1px solid #555;
  box-shadow: 0 0 0 15px #171717
}

.request h3 {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 9px;
  max-width: 135px
}

.request p {
  font-size: 8px;
  line-height: 1.5;
  color: #bbb;
  max-width: 145px
}

.request button {
  border: 0;
  background: #fff;
  color: #111;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 8px;
  font-weight: 700
}

/* FOOTER */
.footer {
  background: #080808;
  color: #fff;
  padding-top: 42px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 35px;
  padding-bottom: 31px
}

.footer .logo {
  font-size: 22px
}

.footer p {
  font-size: 9px;
  line-height: 1.6;
  color: #aaa;
  max-width: 270px
}

.footer h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 12px;
  margin: 0 0 12px
}

.footer a {
  display: block;
  color: #aaa;
  font-size: 9px;
  margin: 8px 0
}

.footer a:hover {
  color: #fff
}

.socials {
  display: flex;
  gap: 7px;
  margin-top: 13px
}

.socials span {
  width: 27px;
  height: 27px;
  border: 1px solid #3d3d3d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px
}

.footer-bottom {
  border-top: 1px solid #292929;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 8px
}

/* TABLET */
@media(max-width:1100px) {
  .container {
    width: calc(100% - 42px)
  }

  .navlinks {
    gap: 15px
  }

  .layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px
  }

  .sidebar {
    grid-column: 1/-1;
    grid-template-columns: repeat(3, 1fr)
  }

  .request {
    min-height: 120px
  }
}

/* MOBILE */
@media(max-width:780px) {
  .container {
    width: calc(100% - 28px)
  }

  .header {
    height: 62px
  }

  .navlinks,
  .header-search,
  .login,
  .signup {
    display: none
  }

  .nav {
    gap: 10px
  }

  .mobile-menu {
    display: block;
    margin-left: auto;
    font-size: 22px
  }

  .search-hero {
    height: 300px
  }

  .hero-inner h1 {
    font-size: 32px
  }

  .hero-inner p {
    font-size: 10px
  }

  .hero-search {
    height: 48px
  }

  .layout {
    grid-template-columns: 1fr
  }

  /* Filter sidebar becomes a slide-in drawer, hidden by default */
  .filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(340px, 88vw);
    z-index: 310;
    border-radius: 0;
    border: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .2);
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform .28s ease
  }

  .filters.is-open {
    transform: translateX(0)
  }

  .filter-close {
    display: block
  }

  .filter-backdrop.is-open {
    display: block
  }

  .result-mobilebar {
    display: flex
  }

  .result-head {
    display: none
  }

  .sidebar {
    grid-template-columns: 1fr
  }

  .rcard {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 2px
  }

  .rcard-cover img {
    width: 82px;
    height: 120px
  }

  /* Rating block moves under the text, full row */
  .rcard-side {
    grid-column: 1 / -1;
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap
  }

  .rcard-counts {
    margin: 0
  }

  .rcard-actions {
    margin-left: auto
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-brand {
    grid-column: 1/-1
  }
}

/* SMALL MOBILE */
@media(max-width:480px) {
  .search-hero {
    height: 320px
  }

  .hero-inner h1 {
    font-size: 29px
  }

  .hero-inner p {
    max-width: 280px;
    line-height: 1.5
  }

  .popular {
    font-size: 8px
  }

  .popular a {
    padding: 5px 8px
  }

  .result-head {
    align-items: flex-start;
    gap: 10px;
    flex-direction: column
  }

  .sort {
    width: 100%
  }

  .result-card {
    grid-template-columns: 76px 1fr;
    padding: 14px 0
  }

  .result-cover {
    width: 70px;
    height: 100px
  }

  .result-rate {
    grid-column: 1/-1;
    border-top: 1px solid #eee;
    padding-top: 10px
  }

  .result-stars {
    font-size: 17px
  }

  .result-actions {
    margin-top: 8px
  }

  .sidebar {
    gap: 10px
  }

  .pagination a {
    width: 25px;
    height: 25px
  }

  /* Small-phone result card tweaks */
  .rcard-title {
    font-size: 16px
  }

  .rcard-desc {
    display: none
  }

  .rcard-side {
    gap: 12px
  }

  .rcard-score {
    font-size: 20px
  }

  .no-results-actions .btn {
    flex: 1
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-bottom {
    display: block
  }

  .footer-bottom span {
    display: block;
    margin-top: 5px
  }
}

/* ===== Details page ===== */
:root {
  --black: #080808;
  --navy: #0b111b;
  --white: #fff;
  --paper: #fafafa;
  --line: #e5e5e5;
  --muted: #747474;
  --gold: #e5a900;
  --link: #315c91;
  --green: #2a9a69;
  --max: 1440px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: var(--sans);
  font-size: 14px
}

img {
  display: block;
  max-width: 100%
}

a {
  text-decoration: none;
  color: inherit
}

button,
input,
select {
  font: inherit
}

.container {
  width: min(var(--max), calc(100% - 70px));
  margin: auto
}

/* HEADER */
.header {
  height: 68px;
  background: var(--black);
  color: #fff;
  border-bottom: 1px solid #292929
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 34px
}

.logo {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -1.5px;
  white-space: nowrap
}

.logo .gold {
  color: var(--gold)
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto
}

.navlinks a {
  font-size: 11px;
  color: #eee
}

.navlinks a:hover {
  color: var(--gold)
}

.nav-search {
  height: 36px;
  width: 230px;
  background: #16202d;
  border: 1px solid #303a47;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #cbd1d8;
  gap: 7px
}

.nav-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  width: 100%;
  font-size: 10px
}

.nav-search input::placeholder {
  color: #aeb5bf
}

.login {
  font-size: 11px;
  white-space: nowrap
}

.signup {
  background: var(--gold);
  color: #111;
  padding: 10px 17px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap
}

.mobile-menu {
  display: none;
  font-size: 22px
}

/* BREADCRUMB */
.breadcrumb {
  height: 48px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  color: #777;
  font-size: 10px
}

.breadcrumb span {
  margin: 0 8px;
  color: #bbb
}

/* MAIN TOP */
.page {
  padding: 24px 0 48px;
  background: #fff
}

.hero-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 305px;
  gap: 34px;
  align-items: start
}

/* COVER */
.cover-wrap {
  padding-top: 2px
}

.cover {
  width: 205px;
  height: 307px;
  margin: auto;
  object-fit: cover;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .14);
  border: 1px solid #ddd
}

.cover-actions {
  margin-top: 12px;
  display: grid;
  gap: 7px
}

.action {
  height: 37px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #222
}

.action.primary {
  background: #0c0c0c;
  color: #fff;
  border-color: #0c0c0c
}

.action.green {
  color: #25885e;
  border-color: #8ccab0
}

/* BOOK INTRO */
.book-intro .book-title {
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 4px 0 8px
}

.subtitle {
  font-size: 15px;
  color: #4d4d4d;
  margin-bottom: 15px
}

.by {
  font-size: 12px;
  margin-bottom: 8px
}

.by a {
  color: #315c91;
  text-decoration: underline
}

.country {
  font-size: 10px;
  color: #666;
  margin-left: 7px
}

.rating-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0
}

.score {
  font-size: 28px;
  font-weight: 800
}

.out {
  font-size: 12px;
  color: #777;
  margin-left: -8px
}

.stars {
  color: var(--gold);
  letter-spacing: 1px
}

.big-stars {
  font-size: 24px
}

.rating-count {
  font-size: 11px;
  color: #555;
  margin-bottom: 22px
}

.info {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 11px;
  font-size: 11px
}

.info .label {
  font-weight: 700;
  color: #555
}

.info a {
  color: #315c91;
  text-decoration: underline
}

/* PANELS */
.panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 18px
}

.panel-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 15px
}

.distribution .row {
  display: grid;
  grid-template-columns: 22px 1fr 35px;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  font-size: 10px
}

.bar {
  height: 9px;
  background: #eef0f1;
  border-radius: 10px;
  overflow: hidden
}

.bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 10px
}

.distribution .star {
  color: var(--gold)
}

.help {
  font-size: 9px;
  color: #315c91;
  margin-top: 13px
}

.buy {
  margin-top: 11px
}

.buy:first-of-type {
  margin-top: 0
}

.buy-item {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #eee;
  padding: 10px 0
}

.buy-item:first-child {
  border-top: 0
}

.buy-name {
  font-size: 13px;
  font-weight: 800
}

.buy-name.flip {
  color: #1985cc
}

.buy-name.google {
  font-weight: 500
}

.buy-name.audible {
  font-size: 13px
}

.buy-btn {
  border: 1px solid #9ccbb5;
  color: #27855e;
  background: #fff;
  border-radius: 4px;
  padding: 6px 5px;
  font-size: 9px;
  text-align: center
}

.share {
  display: flex;
  gap: 10px
}

.share a {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700
}

/* ABOUT + REVIEWS */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 305px;
  gap: 34px;
  margin-top: 24px
}

.about {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 20px
}

.about p {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.65;
  color: #414141;
  margin: 0 0 14px
}

.quote {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  text-align: center;
  color: #444;
  padding: 8px 25px 2px
}

.quote-mark {
  font-size: 40px;
  color: #ccc;
  line-height: .5;
  vertical-align: -8px;
  margin-right: 4px
}

.quote small {
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal
}

.showmore {
  text-align: center;
  color: #315c91;
  font-size: 9px;
  margin-top: 12px
}

.lower {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px
}

.author,
.reviews {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff
}

.author {
  padding: 18px;
  text-align: center
}

.author img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 8px
}

.author h3 {
  font-family: var(--serif);
  font-size: 14px;
  margin: 4px 0
}

.author p {
  font-size: 10px;
  line-height: 1.55;
  color: #777;
  text-align: left
}

.author-btn {
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
  font-size: 9px
}

.reviews {
  padding: 18px
}

.review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px
}

.review-head strong {
  font-size: 11px
}

.review-head a {
  font-size: 9px;
  color: #315c91
}

.review {
  padding: 15px 0;
  border-bottom: 1px solid #eee
}

.review:last-child {
  border-bottom: 0
}

.review-top {
  display: flex;
  align-items: center;
  gap: 9px
}

.avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #a96820;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10px
}

.avatar.blue {
  background: #397a82
}

.avatar.orange {
  background: #ae6b16
}

.user strong {
  display: block;
  font-size: 10px
}

.user small {
  display: block;
  color: #999;
  font-size: 8px;
  margin-top: 2px
}

.review-rating {
  margin-left: auto;
  font-size: 9px;
  white-space: nowrap
}

.review-rating .stars {
  font-size: 12px
}

.review-text {
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.55;
  color: #555;
  margin: 9px 0 7px
}

.review-tools {
  display: flex;
  gap: 22px;
  color: #777;
  font-size: 9px
}

.review-tools a {
  color: #315c91
}

.review-more {
  text-align: center;
  padding-top: 13px;
  font-size: 10px;
  color: #315c91
}

/* ===== REVIEW SYSTEM (production, editorial B/W/Gold) ===== */
.reviewsys {
  padding: 22px
}

.reviewsys-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid #0b0b0b;
  padding-bottom: 16px;
  margin-bottom: 18px
}

.reviewsys-summary h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px
}

.reviewsys-summary h2 span {
  color: var(--muted);
  font-weight: 400;
  font-size: 16px
}

.reviewsys-score {
  display: flex;
  align-items: center;
  gap: 9px
}

.reviewsys-score .stars {
  font-size: 20px;
  letter-spacing: 1px
}

.reviewsys-score b {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1
}

.reviewsys-score .rs-out {
  color: var(--muted);
  font-size: 13px
}

.reviewsys-count {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px
}

.reviewsys-write {
  white-space: nowrap;
  align-self: center
}

/* Flash */
.flash {
  padding: 11px 15px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 14px
}

.flash-ok {
  border: 1px solid #bfe2bf;
  background: #f2fbf2;
  color: #2c6e2c
}

.flash-err {
  border: 1px solid #e4bcbc;
  background: #fbf2f2;
  color: #8c2c2c
}

/* Composer */
.composer {
  border: 1px solid var(--line);
  background: #fff;
  padding: 20px;
  margin-bottom: 22px
}

.composer-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap
}

.composer-actions small {
  color: var(--muted);
  font-size: 11px
}

.composer-guest {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 24px;
  text-align: center;
  margin-bottom: 22px
}

.composer-guest strong {
  font-family: var(--serif);
  font-size: 18px;
  display: block
}

.composer-guest p {
  font-size: 13px;
  color: var(--muted);
  margin: 7px 0 16px
}

.composer-guest-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap
}

.composer-own {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 13px
}

.composer-own b {
  color: var(--gold)
}

.composer-own .own-pending {
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
  margin-left: 4px
}

.composer-own a {
  color: #111;
  font-weight: 700;
  border-bottom: 1px solid var(--gold)
}

/* Rating picker (1-10) */
.rating-picker {
  margin-bottom: 14px
}

.rating-picker-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #333;
  margin-bottom: 9px
}

.rating-scale {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.rating-dot input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

.rating-dot span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  user-select: none
}

.rating-dot:hover span {
  border-color: var(--gold)
}

.rating-dot input:checked+span {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0b0b
}

.rating-dot input:focus-visible+span {
  outline: 2px solid var(--gold);
  outline-offset: 2px
}

.rating-dot.is-filled span {
  background: rgba(229, 169, 0, .16);
  border-color: var(--gold)
}

.rating-picker-value {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold)
}

/* Shared inputs */
.rv-input {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  font-size: 13px;
  margin-bottom: 10px
}

.rv-textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  font-family: var(--sans)
}

.rv-input:focus,
.rv-textarea:focus {
  outline: 0;
  border-color: var(--gold)
}

/* Controls: sort + filter */
.reviewsys-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px
}

.reviewsys-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted)
}

.reviewsys-sort select {
  border: 1px solid var(--line);
  background: #fff;
  padding: 9px 12px;
  font-size: 13px;
  color: #111;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0
}

.reviewsys-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  min-width: 0
}

.filter-scroll {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.filter-scroll::-webkit-scrollbar {
  display: none
}

.reviewsys .filter-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: #111;
  background: #fff;
  cursor: pointer;
  white-space: nowrap
}

.reviewsys .filter-chip:hover {
  border-color: #0b0b0b
}

.reviewsys .filter-chip.is-on {
  background: #0b0b0b;
  color: #fff;
  border-color: #0b0b0b
}

/* Review list + cards */
.rv-list {
  display: flex;
  flex-direction: column
}

.rv {
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}

.rv:last-child {
  border-bottom: 0
}

.rv-head {
  display: flex;
  align-items: flex-start;
  gap: 12px
}

.rv-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #0b0b0b;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700
}

.rv-id {
  flex: 1;
  min-width: 0
}

.rv-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px
}

.rv-name .cflag {
  font-size: 15px
}

.rv-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.rv-verified {
  color: #2a9a69;
  font-weight: 700
}

.rv-menu {
  position: relative
}

.rv-menu-btn {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  letter-spacing: 1px
}

.rv-menu-btn:hover {
  color: #111
}

.rv-menu-list,
.rv-translate-list {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  padding: 6px 0
}

.rv-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 15px;
  font-size: 12px;
  color: #111;
  cursor: pointer
}

.rv-menu-link:hover {
  background: var(--paper);
  color: var(--gold)
}

.rv-menu-link.danger {
  color: #b5372f
}

.rv-menu-list form {
  margin: 0
}

.rv-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 6px
}

.rv-rating .stars {
  font-size: 16px;
  letter-spacing: 1px
}

.rv-rating b {
  font-size: 13px;
  font-weight: 800;
  background: rgba(229, 169, 0, .16);
  color: #111;
  padding: 2px 9px;
  border-radius: 20px
}

.rv-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin: 4px 0 6px
}

.rv-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.65;
  color: #3d3d3d
}

.rv-translated {
  border-left: 3px solid var(--gold);
  padding: 8px 14px;
  background: var(--paper);
  font-size: 13px
}

.rv-translated-tag {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 5px
}

.rv-translated-orig {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--gold);
  font-weight: 700
}

.rv-edit,
.rv-report {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--paper)
}

.rv-edit-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap
}

.rv-report-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 9px
}

.rv-report-reasons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px
}

.rv-report-reasons label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer
}

.rv-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap
}

.rv-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer
}

.rv-tool b {
  color: #111;
  font-weight: 700
}

.rv-tool:hover {
  color: var(--gold)
}

.rv-tool:hover b {
  color: var(--gold)
}

.rv-tools form {
  margin: 0
}

.rv-translate {
  position: relative
}

.rv-translate-list {
  min-width: 150px;
  max-height: 260px;
  overflow: auto
}

.rv-translate-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 15px;
  font-size: 12px;
  color: #111;
  cursor: pointer
}

.rv-translate-item:hover {
  background: var(--paper);
  color: var(--gold)
}

.rv-translate-list form {
  margin: 0
}

.reviewsys-more {
  padding-top: 18px
}

/* RIGHT SECONDARY */
.side-stack {
  display: grid;
  gap: 12px
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  font-size: 9px
}

.detail-grid b {
  display: block;
  font-size: 10px;
  margin-top: 3px
}

.status label {
  display: block;
  font-size: 10px;
  margin: 10px 0
}

.status input {
  margin-right: 7px
}

.status-btn {
  width: 100%;
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 10px;
  font-size: 10px;
  margin-top: 5px
}

.languages .lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  padding: 8px 0;
  border-top: 1px solid #eee
}

.languages .lang:first-of-type {
  border-top: 0
}

.lang button {
  margin-left: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px
}

/* TRANSLATIONS + RECOMMENDATIONS */
.bottom-cards {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  gap: 14px;
  margin-top: 14px
}

.translations,
.recommendations {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 18px
}

.translation-row {
  display: flex;
  gap: 13px;
  justify-content: center
}

.translation-row .mini {
  text-align: center;
  width: 92px
}

.mini img {
  height: 125px;
  width: 78px;
  object-fit: cover;
  margin: auto;
  box-shadow: 0 4px 9px rgba(0, 0, 0, .12)
}

.mini strong {
  display: block;
  font-size: 9px;
  margin-top: 7px
}

.mini small {
  font-size: 8px;
  color: #777
}

.mini .stars {
  font-size: 9px
}

.rec-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px
}

.rec .mini {
  width: auto
}

.rec .mini img {
  height: 145px;
  width: 100%;
  object-fit: contain
}

.bottom-link {
  text-align: center;
  color: #315c91;
  font-size: 9px;
  margin-top: 13px
}

/* FOOTER */
.footer {
  background: #080808;
  color: #fff;
  margin-top: 0;
  padding-top: 39px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 35px;
  padding-bottom: 32px
}

.footer .logo {
  color: #fff
}

.footer p {
  color: #aaa;
  font-size: 9px;
  line-height: 1.6;
  max-width: 260px
}

.footer h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 12px;
  margin: 0 0 12px
}

.footer a {
  display: block;
  color: #aaa;
  font-size: 9px;
  margin: 8px 0
}

.footer a:hover {
  color: #fff
}

.socials {
  display: flex;
  gap: 7px;
  margin-top: 13px
}

.socials span {
  width: 27px;
  height: 27px;
  border: 1px solid #3c3c3c;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px
}

.footer-bottom {
  border-top: 1px solid #292929;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 8px
}

/* TABLET */
@media(max-width:1100px) {
  .container {
    width: calc(100% - 38px)
  }

  .navlinks {
    gap: 15px
  }

  .nav-search {
    width: 180px
  }

  .hero-grid {
    grid-template-columns: 190px minmax(0, 1fr)
  }

  .hero-grid>.side-stack {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, 1fr)
  }

  .main-grid {
    grid-template-columns: 1fr
  }

  .main-grid>.side-stack {
    grid-column: auto
  }

  .bottom-cards {
    grid-template-columns: 1fr 1fr
  }

  .bottom-cards>.author-placeholder {
    display: none
  }

  .rec-row {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* MOBILE */
@media(max-width:780px) {
  .container {
    width: calc(100% - 28px)
  }

  .header {
    height: 62px
  }

  .nav {
    gap: 10px
  }

  .navlinks,
  .nav-search,
  .login,
  .signup {
    display: none
  }

  .mobile-menu {
    display: block;
    margin-left: auto
  }

  .breadcrumb {
    font-size: 9px
  }

  .page {
    padding-top: 17px
  }

  .hero-grid {
    grid-template-columns: 1fr
  }

  .cover-wrap {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    align-items: center
  }

  .cover {
    width: 140px;
    height: 210px;
    margin: 0
  }

  .cover-actions {
    margin-top: 0
  }

  .book-title {
    font-size: 28px
  }

  .subtitle {
    font-size: 13px
  }

  .hero-grid>.side-stack {
    grid-template-columns: 1fr
  }

  .main-grid {
    margin-top: 18px;
    grid-template-columns: 1fr
  }

  .lower {
    grid-template-columns: 1fr
  }

  .bottom-cards {
    grid-template-columns: 1fr
  }

  /* Review system on tablet/mobile */
  .reviewsys {
    padding: 16px
  }

  .reviewsys-head {
    flex-direction: column;
    gap: 12px
  }

  .reviewsys-write {
    width: 100%;
    text-align: center
  }

  .reviewsys-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px
  }

  .reviewsys-sort select {
    flex: 1
  }

  .rv-menu-list,
  .rv-translate-list {
    right: auto;
    left: 0
  }

  .translation-row {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px
  }

  .rec-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-brand {
    grid-column: 1/-1
  }
}

@media(max-width:480px) {
  .cover-wrap {
    grid-template-columns: 115px 1fr
  }

  .cover {
    width: 115px;
    height: 174px
  }

  .book-title {
    font-size: 25px
  }

  .subtitle {
    font-size: 12px
  }

  .info {
    grid-template-columns: 105px 1fr;
    font-size: 10px
  }

  .big-stars {
    font-size: 19px
  }

  .score {
    font-size: 24px
  }

  .about {
    padding: 15px
  }

  .reviews,
  .author,
  .translations,
  .recommendations {
    padding: 15px
  }

  .review-rating {
    font-size: 8px
  }

  .review-rating .stars {
    font-size: 10px
  }

  .rec-row {
    grid-template-columns: repeat(2, 1fr)
  }

  /* Review system on small phones */
  .reviewsys {
    padding: 14px
  }

  .rating-dot span {
    width: 32px;
    height: 32px;
    font-size: 12px
  }

  .rating-scale {
    gap: 6px
  }

  .rv-head {
    gap: 10px
  }

  .rv-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 16px
  }

  .rv-body {
    font-size: 13px
  }

  .rv-tools {
    gap: 16px
  }

  .composer,
  .composer-guest {
    padding: 16px
  }

  .rv-report-reasons {
    gap: 10px 14px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-bottom {
    display: block
  }

  .footer-bottom span {
    display: block;
    margin-top: 5px
  }
}

/* ================================================================
   REDESIGNED HOMEPAGE SECTIONS — Trending · Latest · World · Most Reviewed
   ================================================================ */

/* Section label pill */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

.sec-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

/* ── TRENDING REVIEWS ─────────────────────────────────────── */
.sec-trending {
  background: #0b0b0b;
  border-top: none;
  border-bottom: none;
  padding: 72px 0;
}

.sec-trending .sectionhead h2,
.sec-trending .sectionhead p {
  color: #fff;
}

.sec-trending .sectionhead h2::after {
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}

.sec-trending .sectionhead p {
  color: #888;
}

.sec-trending .sec-label {
  color: #666;
}

.sec-trending .view {
  color: #fff;
  border-color: #333;
}

.sec-trending .view:hover {
  background: var(--gold);
  color: #0b0b0b;
  border-color: var(--gold);
}

.trending-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* Big feature card */
.trending-feature {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

.trending-feature-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(1px) brightness(.5);
  transform: scale(1.05);
  transition: transform .5s ease;
}

.trending-feature:hover .trending-feature-bg {
  transform: scale(1.08);
}

.trending-feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .15) 100%);
}

.trending-feature-body {
  position: relative;
  z-index: 2;
  padding: 28px 28px 30px;
  color: #fff;
}

.tf-reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.tf-reviewer img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .25);
  display: inline;
}

.tf-reviewer strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.tf-reviewer span {
  font-size: 11px;
  color: #aaa;
}

.tf-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: var(--gold);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.tf-score {
  font-size: 20px;
  font-weight: 900;
  color: #0b0b0b;
  line-height: 1;
}

.tf-of {
  font-size: 11px;
  font-weight: 700;
  color: #0b0b0b;
}

.tf-headline {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  margin-bottom: 12px;
}

.tf-book {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 8px;
}

.tf-helpful {
  font-size: 11px;
  color: #888;
}

/* Trending side list */
.trending-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #141414;
}

.trending-item {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #1e1e1e;
  color: #fff;
  text-decoration: none;
  transition: background .2s ease;
}

.trending-item:last-child {
  border-bottom: 0;
}

.trending-item:hover {
  background: #1a1a1a;
}

.ti-cover {
  width: 44px;
  height: 62px;
  flex-shrink: 0;
  background: #222;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ti-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ti-cover-blank {
  font-size: 20px;
}

.ti-body {
  flex: 1;
  min-width: 0;
}

.ti-book {
  font-size: 13px;
  font-weight: 700;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.ti-headline {
  font-size: 12px;
  color: #999;
  font-family: var(--serif);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.ti-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ti-score {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold2);
}

.ti-reviewer {
  font-size: 11px;
  color: #777;
}

.ti-helpful {
  font-size: 11px;
  color: #555;
}


/* ── LATEST REVIEWS ───────────────────────────────────────── */
.sec-latest {
  background: #fff;
  padding: 72px 0;
}

.latest-row {
  display: grid;
  grid-template-columns: 56px 1fr 2fr 180px 80px;
  gap: 20px;
  align-items: center;
  padding: 20px 18px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid #f0efe9;
  text-decoration: none;
  color: #111;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.latest-row:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(217, 165, 42, .1);
  transform: translateX(4px);
}

.lr-cover {
  width: 56px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #f0efe9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid #e8e6df;
}

.lr-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lr-cover-blank {
  font-size: 22px;
}

.lr-book-title {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--serif);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lr-book-author {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.lr-headline {
  font-size: 13px;
  font-family: var(--serif);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lr-body {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lr-reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lr-reviewer img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #f0efe9;
  display: inline;
}

.lr-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-time {
  font-size: 11px;
  color: var(--muted);
}

.lr-score {
  text-align: center;
  flex-shrink: 0;
}

.lr-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: #0b0b0b;
}

.lr-denom {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}

.lr-stars {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1px;
}


/* ── REVIEWS FROM AROUND THE WORLD ───────────────────────── */
.sec-world {
  background: linear-gradient(160deg, #f8f7f4 0%, #faf9f6 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.world-card {
  background: #fff;
  border: 1px solid #e8e6df;
  border-radius: 14px;
  padding: 22px 20px 18px;
  text-decoration: none;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}

.world-card::before {
  content: '🌍';
  position: absolute;
  top: -6px;
  right: 14px;
  font-size: 60px;
  opacity: .05;
  pointer-events: none;
}

.world-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .1);
  border-color: var(--gold);
}

.wc-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  border-bottom: 1px solid #f0efe9;
  padding-bottom: 10px;
}

.wc-country .cflag {
  font-size: 16px;
}

.wc-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.wc-score {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  color: #0b0b0b;
}

.wc-score-label {
  font-size: 11px;
  color: var(--muted);
}

.wc-headline {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wc-body {
  font-size: 12px;
  color: #666;
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wc-book {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0efe9;
  font-size: 12px;
  color: #555;
  font-family: var(--serif);
  font-style: italic;
}

.wc-book img {
  width: 28px;
  height: 40px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid #e8e6df;
  flex-shrink: 0;
  display: inline;
}

.wc-reviewer {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.wc-reviewer img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline;
}

.wc-time {
  font-weight: 400;
  font-size: 10px;
}


/* ── MOST REVIEWED BOOKS ──────────────────────────────────── */
.sec-mostreviewed {
  background: #fff;
  padding: 72px 0;
}

.mr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.mr-card {
  display: grid;
  grid-template-columns: 44px 56px 1fr;
  gap: 0 14px;
  align-items: center;
  padding: 16px 18px;
  text-decoration: none;
  color: #111;
  position: relative;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background .2s ease;
  overflow: hidden;
}

.mr-card:nth-child(2n) {
  border-right: 0;
}

.mr-card:nth-last-child(-n+2) {
  border-bottom: 0;
}

.mr-card:hover {
  background: #faf9f6;
}

/* rank */
.mr-rank {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 900;
  color: #d9d7cf;
  line-height: 1;
  text-align: center;
  transition: color .2s ease;
}

.mr-rank-top {
  color: var(--gold2);
}

.mr-card:hover .mr-rank {
  color: var(--gold);
}

/* cover */
.mr-cover {
  width: 46px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0efe9;
  border: 1px solid #e8e6df;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mr-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mr-cover-blank {
  font-size: 18px;
}

/* meta */
.mr-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}

.mr-author {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mr-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}

.mr-reviews {
  color: var(--muted);
}

.mr-rating {
  font-weight: 800;
  color: #0b0b0b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.mr-rating i {
  color: var(--gold);
  font-size: 10px;
}

.mr-reviews i {
  color: #aaa;
  font-size: 10px;
}

/* bottom progress bar */
.mr-bar-wrap {
  grid-column: 1/-1;
  height: 2px;
  background: #f0efe9;
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}

.mr-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 2px;
  transition: width .4s ease;
}

.mr-card:hover .mr-bar {
  background: linear-gradient(90deg, #111, #444);
}


/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1100px) {
  .trending-layout {
    grid-template-columns: 1fr;
  }

  .trending-feature {
    min-height: 340px;
  }

  .trending-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .trending-item {
    border-right: 1px solid #1e1e1e;
  }

  .trending-item:nth-child(2n) {
    border-right: 0;
  }

  .world-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .latest-row {
    grid-template-columns: 56px 1fr 1fr 160px 70px;
    gap: 14px;
  }

  .mr-grid {
    grid-template-columns: 1fr;
  }

  .mr-card:nth-child(2n) {
    border-right: none;
  }

  .mr-card {
    border-right: 0 !important;
  }

  .mr-card:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .mr-card:last-child {
    border-bottom: 0;
  }
}

@media(max-width:800px) {
  .trending-side {
    grid-template-columns: 1fr;
  }

  .trending-item {
    border-right: 0 !important;
  }

  .latest-row {
    grid-template-columns: 50px 1fr 60px;
    gap: 12px;
  }

  .lr-review,
  .lr-reviewer {
    display: none;
  }

  .world-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media(max-width:520px) {
  .trending-layout {
    border-radius: 10px;
  }

  .trending-side {
    display: none;
  }

  /* show only feature on mobile */

  .latest-row {
    grid-template-columns: 46px 1fr 54px;
    padding: 14px 12px;
  }

  .lr-num {
    font-size: 22px;
  }

  .world-grid {
    grid-template-columns: 1fr;
  }

  .wc-score {
    font-size: 30px;
  }

  .mr-grid {
    border-radius: 8px;
  }

  .mr-card {
    grid-template-columns: 34px 44px 1fr;
    padding: 13px 14px;
  }

  .mr-rank {
    font-size: 18px;
  }

  .mr-cover {
    width: 36px;
    height: 52px;
  }

  .mr-title {
    font-size: 13px;
  }
}

/* ================================================================
   MOST REVIEWED — Premium Leaderboard with Podium
   ================================================================ */

.sec-mr-premium {
  background: linear-gradient(180deg, #0a0a0a 0%, #111108 60%, #0e0e07 100%);
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}

/* Decorative background texture */
.sec-mr-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(217, 165, 42, .12) 0%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0, transparent 120px, rgba(255, 255, 255, .018) 120px, rgba(255, 255, 255, .018) 121px),
    repeating-linear-gradient(0deg, transparent 0, transparent 80px, rgba(255, 255, 255, .018) 80px, rgba(255, 255, 255, .018) 81px);
  pointer-events: none;
}

/* ── Header ──────────────────────────────────────────────── */
.mrp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
}

.mrp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #d9a52a;
  margin-bottom: 10px;
}

.mrp-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9a52a;
  box-shadow: 0 0 0 0 rgba(217, 165, 42, .6);
  animation: mrpPulse 2s infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes mrpPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 165, 42, .6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(217, 165, 42, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(217, 165, 42, 0);
  }
}

.mrp-title {
  font-family: Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.3px;
  line-height: 1.1;
}

.mrp-sub {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.mrp-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #d9a52a;
  border: 1px solid #2a2a1a;
  padding: 10px 20px;
  border-radius: 40px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
  text-decoration: none;
  background: rgba(217, 165, 42, .06);
}

.mrp-all:hover {
  background: #d9a52a;
  color: #0a0a0a;
  border-color: #d9a52a;
}

/* ── Podium (top 3) ──────────────────────────────────────── */
.mrp-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}

.mrp-pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
  flex: 1;
  max-width: 300px;
  position: relative;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.mrp-pod:hover {
  transform: translateY(-10px);
}

/* rank 1 is slightly larger */
.mrp-pod--1 {
  max-width: 340px;
}

.mrp-pod--2 {
  max-width: 280px;
}

.mrp-pod--3 {
  max-width: 260px;
}

/* medal badge */
.mrp-medal {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #0a0a0a;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

/* book cover */
.mrp-pod-cover {
  position: relative;
  width: 110px;
  height: 158px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  margin-bottom: 0;
  background: #1a1a1a;
  flex-shrink: 0;
}

.mrp-pod--1 .mrp-pod-cover {
  width: 130px;
  height: 188px;
}

.mrp-pod--2 .mrp-pod-cover {
  width: 105px;
  height: 152px;
}

.mrp-pod--3 .mrp-pod-cover {
  width: 96px;
  height: 138px;
}

.mrp-pod-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mrp-pod-nocover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: #1a1a1a;
}

/* glass shine overlay */
.mrp-pod-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, transparent 50%);
  pointer-events: none;
}

/* info block sitting above the pedestal */
.mrp-pod-info {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 16px 16px 12px;
  width: 100%;
  backdrop-filter: blur(10px);
  margin-top: 14px;
  text-align: center;
}

.mrp-pod-title {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mrp-pod--1 .mrp-pod-title {
  font-size: 16px;
}

.mrp-pod-author {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrp-pod-count-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 5px;
}

.mrp-pod-num {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.mrp-pod--1 .mrp-pod-num {
  font-size: 34px;
}

.mrp-pod-clabel {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mrp-pod-rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
}

.mrp-pod-star {
  font-size: 14px;
}

.mrp-pod-rval {
  font-size: 14px;
  font-weight: 800;
  color: #ddd;
}

.mrp-pod-rmax {
  font-size: 11px;
  color: #555;
}

/* mini progress bar */
.mrp-pod-bar {
  height: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 3px;
  overflow: hidden;
}

.mrp-pod-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}

/* pedestal (step) */
.mrp-pedestal {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  border-radius: 0 0 4px 4px;
}

.mrp-ped-num {
  font-family: Georgia, serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  opacity: .7;
}

.mrp-pod--1 .mrp-ped-num {
  font-size: 52px;
  opacity: .9;
}

/* ── Table (ranks 4+) ────────────────────────────────────── */
.mrp-table {
  margin-top: 2px;
  border: 1px solid #1e1e1e;
  border-top: 2px solid #222;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.mrp-table-head {
  display: grid;
  grid-template-columns: 48px 52px 1fr 110px 90px 160px;
  gap: 0;
  padding: 10px 20px;
  background: #161616;
  border-bottom: 1px solid #222;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #444;
}

.mrp-row {
  display: grid;
  grid-template-columns: 48px 52px 1fr 110px 90px 160px;
  gap: 0;
  padding: 14px 20px;
  align-items: center;
  text-decoration: none;
  color: #ccc;
  border-bottom: 1px solid #161616;
  transition: background .2s;
}

.mrp-row:last-child {
  border-bottom: 0;
}

.mrp-row:hover {
  background: #151510;
  color: #fff;
}

.mrp-row:hover .mrp-row-fill {
  filter: brightness(1.3);
}

.mrp-row-num {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  text-align: center;
}

.mrp-row:hover .mrp-row-num {
  color: #d9a52a;
}

.mrp-row-cover {
  width: 36px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  flex-shrink: 0;
}

.mrp-row-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mrp-row-nocover {
  font-size: 16px;
}

.mrp-row-info {
  min-width: 0;
  padding-right: 16px;
}

.mrp-row-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  font-family: Georgia, serif;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.mrp-row:hover .mrp-row-info strong {
  color: #fff;
}

.mrp-row-info em {
  font-style: italic;
  font-size: 11px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.mrp-row-rev {
  text-align: center;
}

.mrp-row-rev b {
  display: block;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 800;
  color: #aaa;
  line-height: 1;
}

.mrp-row-rev small {
  font-size: 10px;
  color: #444;
}

.mrp-row:hover .mrp-row-rev b {
  color: #fff;
}

.mrp-row-rat {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #888;
}

.mrp-row-rat .mrp-star {
  color: #d9a52a;
  margin-right: 2px;
}

.mrp-row-rat em {
  font-style: normal;
  font-size: 10px;
  color: #444;
}

.mrp-row:hover .mrp-row-rat {
  color: #ddd;
}

.mrp-row-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mrp-row-fill {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, #d9a52a, #f0c65a);
  border-radius: 4px;
  display: block;
  opacity: .5;
  transition: opacity .2s;
}

.mrp-row:hover .mrp-row-fill {
  opacity: 1;
}

.mrp-row-pct {
  font-size: 10px;
  color: #444;
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}

.mrp-row:hover .mrp-row-pct {
  color: #d9a52a;
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1100px) {

  .mrp-table-head,
  .mrp-row {
    grid-template-columns: 44px 46px 1fr 90px 80px 120px;
    padding: 12px 14px;
  }

  .mrp-pod--1 .mrp-pod-cover {
    width: 115px;
    height: 166px;
  }
}

@media(max-width:800px) {
  .mrp-title {
    font-size: 28px;
  }

  .mrp-podium {
    gap: 8px;
  }

  .mrp-pod--1 .mrp-pod-cover {
    width: 100px;
    height: 144px;
  }

  .mrp-pod--2 .mrp-pod-cover {
    width: 88px;
    height: 126px;
  }

  .mrp-pod--3 .mrp-pod-cover {
    width: 80px;
    height: 116px;
  }

  .mrp-pod-info {
    padding: 12px 12px 10px;
  }

  .mrp-pod-num {
    font-size: 22px;
  }

  .mrp-pod--1 .mrp-pod-num {
    font-size: 26px;
  }

  .mrp-table-head {
    display: none;
  }

  .mrp-row {
    grid-template-columns: 36px 40px 1fr 80px;
    padding: 12px 14px;
  }

  .mrp-row-rev small,
  .mrp-row-bar,
  .mrp-row-rat {
    display: none;
  }

  .mrp-row-rev b {
    font-size: 14px;
  }

  .mrp-row-info strong {
    font-size: 13px;
  }
}

@media(max-width:520px) {
  .sec-mr-premium {
    padding: 56px 0 60px;
  }

  .mrp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .mrp-title {
    font-size: 24px;
  }

  .mrp-podium {
    gap: 6px;
  }

  .mrp-pod--1 .mrp-pod-cover {
    width: 84px;
    height: 120px;
  }

  .mrp-pod--2 .mrp-pod-cover {
    width: 72px;
    height: 104px;
  }

  .mrp-pod--3 .mrp-pod-cover {
    width: 64px;
    height: 92px;
  }

  .mrp-pod-info {
    padding: 10px 10px 8px;
  }

  .mrp-pod-title {
    font-size: 12px;
  }

  .mrp-pod--1 .mrp-pod-title {
    font-size: 13px;
  }

  .mrp-pod-author {
    display: none;
  }

  .mrp-pod-num {
    font-size: 20px;
  }

  .mrp-pod--1 .mrp-pod-num {
    font-size: 24px;
  }

  .mrp-medal {
    font-size: 9px;
    padding: 3px 10px;
  }

  .mrp-row {
    grid-template-columns: 30px 36px 1fr 68px;
    padding: 10px 12px;
    gap: 0 10px;
  }

  .mrp-row-num {
    font-size: 15px;
  }

  .mrp-row-info strong {
    font-size: 12px;
  }
}

/* ============================================================
   HP2 — Homepage v2 sections (Trending Pulse, Reader Feed,
   World Map, Ranking Wall, Reviewer Showcase, Explore, Stats)
   Uses the existing brand tokens only.
   ============================================================ */
:root {
  --hp2-line: #26251f;
  --hp2-dim: #a7a49a;
  --hp2-dim2: #8f8d84;
}

img.cflag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  outline: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: -2px;
}

.hp2-dark img.cflag {
  outline-color: rgba(255, 255, 255, 0.25);
}

.hp2-section {
  padding: 76px 0;
}

.hp2-section+.hp2-section {
  padding-top: 40px;
}

.hp2-dark {
  background: var(--black);
  color: var(--white);
}

.hp2-dark a {
  color: inherit;
}

.hp2-shead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
}

.hp2-shead h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.hp2-sub {
  color: var(--muted);
  font-size: 14.5px;
  margin: 8px 0 0;
  max-width: 60ch;
}

.hp2-dark .hp2-sub {
  color: var(--hp2-dim);
}

.hp2-viewall {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  white-space: nowrap;
}

.hp2-dark .hp2-viewall {
  color: var(--gold2);
}

.hp2-viewall:hover {
  color: var(--gold);
}

.hp2-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ann, #8a6d1f);
  margin: 0 0 8px;
}

/* ── stats strip ── */
.hp2-stats {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}

.hp2-stats .hp2-altline {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 17px;
}

.hp2-stats .hp2-altline span {
  color: var(--gold);
}

.hp2-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hp2-stat {
  text-align: center;
  padding: 6px 10px;
}

.hp2-stat b {
  display: block;
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
}

.hp2-stat span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── shared cover placeholder ── */
.hp2-coverph {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #1d1d1b, #000);
  color: #efece2;
  border-radius: 3px;
  box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.18);
  position: relative;
}

.hp2-coverph::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.hp2-coverph span {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.3;
  padding: 0 0 10px 16%;
}

.hp2-coverph-light {
  background: linear-gradient(160deg, #ece7d8, #dcd4bd);
  color: #232018;
}

/* ── 01 trending pulse ── */
.hp2-pulse {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.hp2-pulse-cover {
  display: block;
  transition: transform 0.35s ease;
}

.hp2-pulse-cover:hover {
  transform: scale(1.02);
}

.hp2-pulse-cover img,
.hp2-pulse-cover .hp2-coverph {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.hp2-rate {
  font-family: var(--serif);
}

.hp2-rate b {
  font-size: 26px;
  color: var(--gold2);
  font-weight: normal;
}

.hp2-rate span {
  color: var(--hp2-dim2);
  font-size: 14px;
}

.hp2-rate-sm b {
  font-size: 16px;
}

.hp2-rate-sm span {
  font-size: 12px;
}

.hp2-pulse-body blockquote {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
  color: var(--white);
}

.hp2-pulse-src {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--hp2-dim2);
}

.hp2-pulse-src a {
  color: var(--gold2);
  text-decoration: none;
}

.hp2-pulse-src a:hover {
  text-decoration: underline;
}

.hp2-pulse-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp2-pulse-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--hp2-dim);
}

.hp2-pulse-meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hp2-line);
  font-size: 12.5px;
  color: var(--hp2-dim);
}

.hp2-pulse-meta b {
  color: var(--gold2);
  font-weight: normal;
  font-family: var(--serif);
  font-size: 15px;
}

/* ── 02 latest feed ── */
.hp2-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hp2-fcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--hp2-line);
  background: #0e0e0c;
  border-radius: 8px;
  padding: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .hp2-fcard:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
  }

  .hp2-fcard:hover .hp2-fcover img {
    transform: scale(1.06);
  }
}

.hp2-fcard-top {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.hp2-fcover {
  display: block;
  flex: none;
  width: 52px;
}

.hp2-fcover img,
.hp2-fcover .hp2-coverph {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

.hp2-fcover .hp2-coverph-sm span {
  font-size: 8.5px;
  padding-left: 14%;
  padding-bottom: 8px;
}

.hp2-fcard h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 6px;
}

.hp2-fcard h3 a {
  text-decoration: none;
  color: var(--white);
}

.hp2-fcard h3 a:hover {
  color: var(--gold2);
}

.hp2-fquote {
  font-size: 13px;
  line-height: 1.55;
  color: var(--hp2-dim);
  margin: 0;
}

.hp2-fread {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold2);
}

.hp2-fread:hover {
  color: var(--white);
}

.hp2-fwho {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #232219;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--hp2-dim);
  flex-wrap: wrap;
}

.hp2-fwho em {
  color: var(--hp2-dim2);
  font-style: normal;
  margin-left: auto;
  font-size: 11px;
}

/* ── 03 world map ── */
.hp2-world-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 34px;
  align-items: center;
}

.hp2-mapbox {
  position: relative;
  border: 1px solid var(--hp2-line);
  border-radius: 10px;
  background: radial-gradient(120% 120% at 50% 0%, #111 60%, #0a0a09);
  padding: 12px;
}

.hp2-map {
  width: 100%;
  display: block;
}

.hp2-mapland path {
  fill: #1c1c19;
}

.hp2-mapgrid path {
  stroke: #24231e;
  stroke-width: 0.6;
  fill: none;
}

.hp2-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  text-decoration: none;
  padding: 4px;
}

.hp2-pin-dot {
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(217, 165, 42, 0.18);
}

.hp2-pin.is-active .hp2-pin-dot,
.hp2-pin:hover .hp2-pin-dot,
.hp2-pin:focus-visible .hp2-pin-dot {
  background: var(--gold2);
  box-shadow: 0 0 0 6px rgba(217, 165, 42, 0.28);
}

.hp2-pin-rate {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold2);
}

.hp2-pin-name {
  display: block;
  font-size: 10px;
  color: var(--hp2-dim);
  white-space: nowrap;
}

.hp2-pin-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border: 1px solid var(--hp2-line);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--hp2-dim);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 4;
}

.hp2-pin-tip b {
  color: var(--gold2);
  font-weight: normal;
}

.hp2-pin:hover .hp2-pin-tip,
.hp2-pin:focus-visible .hp2-pin-tip {
  opacity: 1;
}

.hp2-wquote {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.42;
  color: var(--white);
  margin: 0;
}

.hp2-wattr {
  color: var(--hp2-dim);
  font-size: 13px;
  margin: 14px 0 0;
}

.hp2-wlink {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold2);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

.hp2-wlink:hover {
  color: var(--white);
}

.hp2-worldstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.hp2-wstat {
  border: 1px solid var(--hp2-line);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.hp2-wstat b {
  display: block;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 19px;
  color: var(--gold2);
}

.hp2-wstat span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp2-dim2);
}

/* ── 04 ranking wall ── */
.hp2-ranking {
  background: var(--paper);
}

.hp2-ranking .hp2-shead h2 {
  color: var(--black);
}

.hp2-ranking .hp2-viewall {
  color: var(--black);
}

.hp2-ranks {
  border-bottom: 1px solid var(--line);
}

.hp2-rankrow {
  display: grid;
  grid-template-columns: 60px 88px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.hp2-ranknum {
  font-family: var(--serif);
  font-size: 32px;
  color: #c9c5b8;
}

.hp2-rankrow.is-hero .hp2-ranknum {
  font-size: 52px;
  color: var(--gold);
}

.hp2-rankcover {
  display: block;
}

.hp2-rankcover img,
.hp2-rankcover .hp2-coverph {
  display: block;
  width: 100%;
  max-width: 88px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.hp2-rankrow.is-hero .hp2-rankcover img,
.hp2-rankrow.is-hero .hp2-rankcover .hp2-coverph {
  max-width: 110px;
}

.hp2-rankinfo h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 19px;
  margin: 0;
}

.hp2-rankrow.is-hero .hp2-rankinfo h3 {
  font-size: 25px;
}

.hp2-rankinfo h3 a {
  color: var(--black);
  text-decoration: none;
}

.hp2-rankinfo h3 a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.hp2-rankby {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

.hp2-rankstats {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 12.5px;
  color: var(--muted);
}

.hp2-ranking .hp2-rate b {
  color: var(--black);
}

.hp2-cty::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 6px;
  vertical-align: 1px;
}

.hp2-trend {
  color: #4f7f42;
  font-size: 11.5px;
}

/* ── 05 reviewers ── */
.hp2-hof {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 14px;
}

.hp2-hofrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.hp2-revcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--hp2-line);
  background: #0e0e0c;
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .hp2-revcard:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
  }
}

.hp2-revcard.is-first {
  border-color: var(--gold);
}

.hp2-revrank {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--hp2-dim2);
}

.hp2-revcard.is-first .hp2-revrank {
  font-size: 18px;
  color: var(--gold2);
}

.hp2-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(150deg, #2b2a24, #141412);
  color: var(--gold2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 19px;
  overflow: hidden;
  flex: none;
}

.hp2-revcard.is-first .hp2-avatar {
  width: 64px;
  height: 64px;
  font-size: 23px;
}

.hp2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp2-revname {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--white);
  margin-top: 10px;
}

.hp2-revcard-sm .hp2-revname {
  font-size: 13.5px;
}

.hp2-revcard-sm .hp2-avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.hp2-revcard-sm {
  padding: 14px;
}

.hp2-revcty {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--hp2-dim);
}

.hp2-revstats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--hp2-dim);
  margin-top: 10px;
}

.hp2-gold {
  color: var(--gold2);
}

.hp2-levelbadge {
  align-self: flex-start;
  margin-top: 10px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold2);
  border: 1px solid #3d3a2c;
  border-radius: 3px;
  padding: 2px 6px;
}

/* ── 06 explore ── */
.hp2-explore-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
}

.hp2-excol {
  border: 1px solid var(--hp2-line);
  border-radius: 10px;
  background: #0e0e0c;
  padding: 20px;
}

.hp2-excol h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 17px;
  margin: 0 0 14px;
  color: var(--white);
}

.hp2-excol h3 span {
  color: var(--gold2);
}

.hp2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hp2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #d8d6cf;
  border: 1px solid #2e2d27;
  border-radius: 99px;
  padding: 6px 13px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hp2-chip:hover {
  border-color: var(--gold);
  color: var(--white);
}

.hp2-chipcnt {
  color: var(--hp2-dim2);
  font-size: 10.5px;
}

.hp2-nativename {
  color: var(--hp2-dim2);
  font-size: 11px;
  font-style: normal;
}

.hp2-chipempty {
  font-size: 12.5px;
  color: var(--hp2-dim2);
}

/* ── responsive ── */
@media (max-width: 1023px) {
  .hp2-pulse {
    grid-template-columns: 190px 1fr;
    gap: 26px;
  }

  .hp2-world-grid {
    grid-template-columns: 1fr;
  }

  .hp2-feed {
    grid-template-columns: 1fr 1fr;
  }

  .hp2-hof {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .hp2-explore-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hp2-explore .hp2-excol:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .hp2-section {
    padding: 52px 0;
  }

  .hp2-shead {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }

  .hp2-pulse {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hp2-pulse-cover,
  .hp2-pulse-cover img,
  .hp2-pulse-cover .hp2-coverph {
    max-width: 160px;
  }

  .hp2-feed {
    grid-template-columns: 1fr;
  }

  .hp2-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hp2-rankrow {
    grid-template-columns: 34px 60px 1fr;
    gap: 12px;
  }

  .hp2-rankrow.is-hero .hp2-rankcover img,
  .hp2-rankrow.is-hero .hp2-rankcover .hp2-coverph {
    max-width: 72px;
  }

  .hp2-rankstats {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 12px;
  }

  .hp2-hof {
    grid-template-columns: 1fr;
  }

  .hp2-hofrow {
    grid-template-columns: 1fr;
  }

  .hp2-explore-grid {
    grid-template-columns: 1fr;
  }

  .hp2-explore .hp2-excol:last-child {
    grid-column: auto;
  }

  .hp2-worldstats {
    grid-template-columns: 1fr;
  }

  .hp2-pin-name {
    display: none;
  }
}

@media (max-width: 767px) {
  .hp2-pin-tip {
    display: none;
  }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .hp2-fcard,
  .hp2-revcard,
  .hp2-pulse-cover,
  .hp2-fcover img {
    transition: none;
  }

  .hp2-fcard:hover,
  .hp2-revcard:hover {
    transform: none;
  }

  .hp2-pulse-cover:hover {
    transform: none;
  }
}

/* ============================================================
   HP2 polish — visual consistency fixes
   ============================================================ */

/* Star rows must never wrap onto a second line (site-wide). */
.stars {
  white-space: nowrap;
}

/* World map: lift landmass off the background so the map reads. */
.hp2-mapland path {
  fill: #2b2a23;
  stroke: #3b392f;
  stroke-width: 0.8;
}

.hp2-mapgrid path {
  stroke: #1d1c18;
}

/* Ranking: consistent rank numeral colouring; hero keeps full gold. */
.hp2-ranknum {
  color: #98917d;
}

.hp2-rankrow.is-hero .hp2-ranknum {
  color: var(--gold);
}

/* Latest feed: anchor Read Review + who-line to the card bottom so
   cards of different text lengths end on the same baseline. */
.hp2-fquote {
  flex: 1 1 auto;
}

.hp2-fread {
  margin-top: auto;
}

/* Trending: tighten the dead gap between country rows and stats. */
.hp2-pulse-list {
  margin-top: 14px;
}

.hp2-pulse-meta {
  margin-top: 18px;
}

/* Hero: "Popular searches:" is a label, not a chip — strip its chip styling. */
.hero .tags>span:first-child {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  color: var(--muted) !important;
  font-size: 12px;
}

/* ============================================================
   HP2 fix round 2
   ============================================================ */

/* Pulse: center the cover against the text column (kills dead bottom space). */
.hp2-pulse {
  align-items: center;
}

/* Reviewer small-tile row: fill width whatever the tile count. */
.hp2-hofrow {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ============================================================
   BK2 — Book Details page v2 (premium editorial)
   ============================================================ */
.bk2-grid {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-areas:
    "cover intro side-top"
    "about about side-bottom"
    "reviews reviews side-bottom";
  gap: 0 40px;
  align-items: start;
}

.bk2-covercol {
  grid-area: cover;
}

.bk2-intro {
  grid-area: intro;
}

.bk2-side-top {
  grid-area: side-top;
}

.bk2-aboutcol {
  grid-area: about;
}

.bk2-reviewcol {
  grid-area: reviews;
  min-width: 0;
}

.bk2-side-bottom {
  grid-area: side-bottom;
}

/* cover */
.bk2-coverwrap {
  position: relative;
}

.bk2-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  outline: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .bk2-coverwrap:hover .bk2-cover {
    transform: translateY(-4px);
  }
}

.bk2-cover-ph {
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #1d1d1b, #000);
  color: #efece2;
}

.bk2-cover-ph span {
  font-family: var(--serif);
  font-size: 15px;
  padding: 0 0 12px 14%;
  line-height: 1.3;
}

.bk2-covactions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.bk2-covbtn {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12.5px;
  text-align: center;
  color: var(--black);
  background: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bk2-covbtn:hover {
  border-color: var(--gold);
}

.bk2-covbtn-pri {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.bk2-covbtn-pri:hover {
  background: #26251f;
}

/* intro */
.bk2-title {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

.bk2-subtitle {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 16px;
  margin-top: 8px;
}

.bk2-by {
  margin-top: 14px;
  font-size: 14px;
  color: #3c3b38;
}

.bk2-by a {
  color: var(--black);
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
}

.bk2-by a:hover {
  color: var(--gold);
}

.bk2-byflag {
  margin-left: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.bk2-bigrating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.bk2-score {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.bk2-out {
  color: var(--muted);
  font-size: 15px;
}

.bk2-bigstars .stars {
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--gold);
}

.bk2-rcount {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  line-height: 1.55;
}

/* metadata */
.bk2-meta {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.bk2-metarow {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eeece6;
  font-size: 13.5px;
  align-items: baseline;
}

.bk2-metarow:last-child {
  border-bottom: none;
}

.bk2-mk {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk2-genrechip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 11.5px;
  color: var(--black);
  margin: 0 4px 4px 0;
  text-decoration: none;
}

.bk2-genrechip:hover {
  border-color: var(--gold);
}

/* sidebar */
.bk2-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bk2-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.bk2-paneltitle {
  font-family: var(--sans);
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.bk2-distrow {
  display: grid;
  grid-template-columns: 32px 1fr 42px;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: #3c3b38;
  margin-bottom: 6px;
}

.bk2-distbar {
  height: 6px;
  background: #eeece6;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}

.bk2-distbar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
  border-radius: 99px;
}

.bk2-distpct {
  text-align: right;
  color: var(--muted);
}

.bk2-buyrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 7px 0;
  border-bottom: 1px solid #eeece6;
}

.bk2-buyrow:last-child {
  border-bottom: none;
}

.bk2-buyvisit {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--black);
  border-radius: 5px;
  padding: 4px 11px;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

.bk2-buyvisit:hover {
  background: var(--black);
  color: var(--white);
}

.bk2-buynone {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 4px 0;
}

.bk2-statusform {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bk2-statusrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #3c3b38;
  padding: 7px 0;
  border-bottom: 1px solid #eeece6;
  cursor: pointer;
}

.bk2-statusrow:last-of-type {
  border-bottom: none;
}

.bk2-statusrow input {
  accent-color: var(--gold);
}

.bk2-statusbtn {
  margin-top: 10px;
}

.bk2-statusguest {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.bk2-statusguest a {
  color: var(--black);
  border-bottom: 1px solid var(--gold);
}

.bk2-detailgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  font-size: 11.5px;
  color: var(--muted);
}

.bk2-detailgrid b {
  display: block;
  color: var(--black);
  font-weight: normal;
  font-size: 12.5px;
  margin-top: 2px;
}

/* about editorial */
.bk2-aboutbody {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.78;
  color: #2c2b28;
  max-width: 78ch;
}

.bk2-aboutbody.is-clamped {
  max-height: 190px;
  overflow: hidden;
  position: relative;
}

.bk2-aboutbody.is-clamped::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white));
}

.bk2-readmore {
  background: none;
  border: none;
  padding: 0;
  margin-top: 10px;
  font-size: 13px;
  color: var(--black);
  border-bottom: 1px solid var(--gold);
  cursor: pointer;
}

.bk2-aboutbody:not(.is-clamped) {
  max-height: none;
}

.bk2-aboutbody:not(.is-clamped)::after {
  display: none;
}

/* reviews */
.bk2-reviews .flash {
  margin-bottom: 14px;
}

.bk2-revhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.bk2-revhead h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(26px, 3.2vw, 38px);
  margin: 0;
  letter-spacing: -0.02em;
}

.bk2-revscore {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.bk2-revscorenum {
  font-family: var(--serif);
  font-size: 30px;
}

.bk2-revscoreout {
  color: var(--muted);
  font-size: 14px;
}

.bk2-revscorestars .stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
}

.bk2-revscorecnt {
  font-size: 12.5px;
  color: var(--muted);
}

.bk2-writebtn {
  background: var(--gold);
  color: var(--black);
  border: none;
  border-radius: 6px;
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.bk2-writebtn:hover {
  background: var(--gold2);
}

.bk2-controls {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin: 18px 0 6px;
}

.bk2-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk2-ctl select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12.5px;
  background: var(--white);
  color: var(--black);
}

.bk2-filterchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bk2-fchip {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 13px;
  font-size: 12px;
  color: #3c3b38;
  background: var(--white);
  cursor: pointer;
}

.bk2-fchip:hover {
  border-color: var(--gold);
}

.bk2-fchip.is-on {
  background: var(--black);
  color: var(--gold2);
  border-color: var(--black);
}

.bk2-filtertoggle {
  display: none;
}

/* review cards */
.bk2-rvlist {
  display: flex;
  flex-direction: column;
}

.bk2-rv {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}

.bk2-rvlist .bk2-rv:first-child {
  border-top: none;
}

.bk2-rv-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bk2-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(150deg, #2b2a24, #141412);
  color: var(--gold2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 17px;
  flex: none;
  overflow: hidden;
}

.bk2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-avatar-fallback {
  display: block;
}

.bk2-rvid {
  min-width: 0;
}

.bk2-rvname {
  font-size: 14px;
  font-weight: bold;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bk2-rvsub {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}

.bk2-verified {
  color: #4f7f42;
  font-size: 10.5px;
}

.bk2-rvrate {
  margin-left: auto;
  text-align: right;
}

.bk2-rvstars .stars {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1.5px;
}

.bk2-rvscore b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: normal;
}

.bk2-rvscore {
  color: var(--muted);
  font-size: 12px;
}

.bk2-rvtitle {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 17px;
  margin: 14px 0 6px;
  color: var(--black);
}

.bk2-rvbody {
  font-size: 14px;
  line-height: 1.65;
  color: #3c3b38;
  max-width: 78ch;
}

.bk2-rvbody.is-clamped {
  max-height: 132px;
  overflow: hidden;
  position: relative;
}

.bk2-rvbody.is-clamped::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white));
}

.bk2-rvbody:not(.is-clamped)::after {
  display: none;
}

.bk2-rvmore {
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--black);
  border-bottom: 1px solid var(--gold);
  cursor: pointer;
}

.bk2-rvtools {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
}

.bk2-rvtools form {
  display: contents;
}

.bk2-tool {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.bk2-tool b {
  color: var(--black);
  font-weight: normal;
}

.bk2-tool:hover {
  color: var(--black);
}

.bk2-menubtn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 1px;
  margin-left: auto;
}

/* composer + guest CTA */
.bk2-composer {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin: 16px 0;
}

.bk2-composertitle {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 19px;
  margin: 0 0 14px;
}

.bk2-composeractions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.bk2-composeractions small {
  color: var(--muted);
}

.bk2-ownnote {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bk2-guestcta {
  background: var(--black);
  color: var(--white);
  border-radius: 10px;
  padding: 22px 24px;
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bk2-guestcta b {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 19px;
}

.bk2-guestcta p {
  color: var(--hp2-dim, #a7a49a);
  font-size: 13px;
  margin: 4px 0 0;
}

.bk2-guestbtns {
  display: flex;
  gap: 10px;
}

.bk2-gbtn {
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.bk2-gbtn-l {
  background: transparent;
  color: var(--gold2);
  border: 1px solid #3d3a2c;
}

.bk2-gbtn-l:hover {
  border-color: var(--gold2);
}

.bk2-gbtn-g {
  background: var(--gold);
  color: var(--black);
}

.bk2-gbtn-g:hover {
  background: var(--gold2);
}

.bk2-pagination {
  margin-top: 18px;
}

/* related */
.bk2-related {
  margin-top: 64px;
}

.bk2-relhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 16px;
}

.bk2-relhead h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(22px, 2.8vw, 30px);
  margin: 0;
  letter-spacing: -0.02em;
}

.bk2-relgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.bk2-relcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  text-decoration: none;
  color: var(--black);
  display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .bk2-relcard:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
  }
}

.bk2-relcover {
  display: block;
  margin-bottom: 9px;
}

.bk2-relcover img,
.bk2-relcover .hp2-coverph {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.bk2-relcard b {
  display: block;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.bk2-relby {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 5px;
}

.bk2-relrt {
  display: block;
  color: var(--gold);
  font-size: 11.5px;
}

/* ── responsive ── */
@media (max-width: 1180px) {
  .bk2-grid {
    grid-template-columns: 220px 1fr 280px;
    gap: 0 28px;
  }
}

@media (max-width: 1023px) {
  .bk2-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cover"
      "intro"
      "side-top"
      "about"
      "reviews"
      "side-bottom";
  }

  .bk2-covercol {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: start;
  }

  .bk2-covercol .bk2-covactions {
    margin-top: 0;
  }

  .bk2-reviewcol {
    min-width: 0;
  }

  .bk2-related {
    margin-top: 44px;
  }
}

@media (max-width: 767px) {
  .bk2-covercol {
    grid-template-columns: 1fr;
  }

  .bk2-coverwrap {
    max-width: 200px;
  }

  .bk2-meta {
    margin-top: 16px;
  }

  .bk2-metarow {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px 0;
  }

  .bk2-filterchips {
    display: none;
  }

  .bk2-filterchips.is-open {
    display: flex;
  }

  .bk2-filtertoggle {
    display: inline-flex;
  }

  .bk2-relgrid {
    grid-template-columns: 1fr 1fr;
  }

  .bk2-sectionpad {
    padding: 0;
  }
}

/* BK2 polish 2 */
@media (min-width: 1024px) {
  .bk2-about {
    padding-top: 26px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUTHORS — PREMIUM REDESIGN
   Prefixes: authors-* (listing page)  ap-* (author profile/show page)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. AUTHORS HERO ───────────────────────────────────────────────────── */
.authors-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 72px 0 60px;
  text-align: center;
}

.authors-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(217, 165, 42, .13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 0%, rgba(217, 165, 42, .07) 0%, transparent 60%);
  pointer-events: none;
}

.authors-hero__inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.authors-hero__eyebrow {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.authors-hero__title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--white);
}

.authors-hero__sub {
  font-size: 13.5px;
  color: #ccc;
  line-height: 1.65;
  margin: 0 0 32px;
}

.authors-hero__search {
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.authors-hero__search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 20px;
  font-size: 14px;
  color: #111;
  background: transparent;
}

.authors-hero__search button {
  background: var(--gold);
  border: none;
  padding: 0 20px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #111;
  transition: background .2s;
}

.authors-hero__search button:hover {
  background: var(--gold2);
}

/* ── 2. STATS BAR ─────────────────────────────────────────────────────── */
.authors-stats {
  background: #111;
  border-bottom: 1px solid #222;
  padding: 0;
}

.authors-stats__grid {
  display: flex;
  justify-content: center;
  gap: 0;
}

.authors-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 40px;
  border-right: 1px solid #2a2a2a;
  gap: 2px;
}

.authors-stats__item:last-child {
  border-right: none;
}

.authors-stats__item strong {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}

.authors-stats__item span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
}

/* ── 3. MAIN WRAPPER ─────────────────────────────────────────────────── */
.authors-main {
  padding: 36px 0 64px;
}

/* ── 4. SECTION HEADINGS ─────────────────────────────────────────────── */
.authors-section-head {
  margin-bottom: 24px;
}

.authors-section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: normal;
  margin: 0 0 4px;
  color: var(--black);
}

.authors-section-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ── 5. FEATURED AUTHORS ────────────────────────────────────────────── */
.authors-featured {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.authors-featured__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.authors-featured__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
  gap: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .authors-featured__card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .09);
  }
}

.authors-featured__photo {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--black);
  flex-shrink: 0;
}

.authors-featured__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.authors-featured__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold);
}

.authors-verified-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--gold);
  color: #111;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid #fff;
}

.authors-featured__name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: normal;
  margin: 0 0 6px;
  color: var(--black);
}

.authors-featured__country {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.authors-featured__meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.authors-featured__rating {
  color: var(--gold);
  font-weight: 600;
}

.authors-featured__reviews {
  font-size: 10.5px;
  color: #aaa;
  margin-bottom: 10px;
}

.authors-featured__arrow {
  margin-top: auto;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: .04em;
}

/* ── 6. TOOLBAR ─────────────────────────────────────────────────────── */
.authors-toolbar {
  margin-bottom: 20px;
}

.authors-toolbar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.authors-toolbar__search {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
  min-width: 180px;
  max-width: 340px;
  height: 36px;
}

.authors-toolbar__search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 13px;
  height: 100%;
  background: #fff;
  color: #111;
}

.authors-toolbar__search button {
  background: none;
  border: none;
  padding: 0 12px;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
}

.authors-toolbar__search button:hover {
  color: var(--gold);
}

.authors-toolbar__form {
  display: flex;
}

.authors-toolbar__select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  padding: 0 10px;
  color: #333;
  cursor: pointer;
  outline: none;
}

.authors-toolbar__select:focus {
  border-color: var(--gold);
}

.authors-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.authors-toolbar__count {
  font-size: 12px;
  color: var(--muted);
}

.authors-toolbar__clear {
  font-size: 11.5px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 2px 10px;
  transition: background .18s, color .18s;
}

.authors-toolbar__clear:hover {
  background: var(--gold);
  color: #111;
}

/* ── 7. ALPHABET NAV ────────────────────────────────────────────────── */
.authors-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 28px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.authors-alpha__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 3px;
  border: 1px solid transparent;
  color: #333;
  transition: background .15s, border-color .15s, color .15s;
}

.authors-alpha__btn:hover:not(.is-inactive) {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

.authors-alpha__btn.is-active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

.authors-alpha__btn.is-inactive {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

.authors-letter-heading {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: normal;
  color: var(--muted);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* ── 8. AUTHOR CARDS GRID ───────────────────────────────────────────── */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}

.author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .author-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
  }
}

.author-card__photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--black);
  flex-shrink: 0;
}

.author-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-card__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold);
  letter-spacing: -.02em;
}

.author-card__verified {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 18px;
  height: 18px;
  background: var(--gold);
  color: #111;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid #fff;
}

.author-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.author-card__name {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: normal;
  margin: 0;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.author-card__country {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.author-card__country--empty {
  color: #ccc;
}

.author-card__stats {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.author-card__books {
  color: var(--muted);
}

/* ── 9. COUNTRY DISCOVERY ───────────────────────────────────────────── */
.authors-countries {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 0;
}

.authors-countries__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.authors-country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  text-align: center;
  transition: border-color .18s, background .18s;
}

.authors-country-card:hover {
  border-color: var(--gold);
  background: #fff;
}

.authors-country-card__flag {
  font-size: 26px;
  line-height: 1;
  display: block;
}

.authors-country-card__name {
  font-size: 12px;
  font-weight: 600;
  color: #222;
  display: block;
}

.authors-country-card__count {
  font-size: 10.5px;
  color: var(--muted);
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTHOR PROFILE (show page)  —  ap-* prefix
   ═══════════════════════════════════════════════════════════════════════════ */

.ap-main {
  padding: 28px 0 72px;
}

/* ── 10. PROFILE HEADER ─────────────────────────────────────────────── */
.ap-header {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  gap: 0 36px;
  align-items: start;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.ap-header__photo-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--black);
  flex-shrink: 0;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .18);
}

.ap-header__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap-header__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 64px;
  color: var(--gold);
  letter-spacing: -.03em;
}

.ap-verified {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: var(--gold);
  color: #111;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 3px solid #fff;
}

.ap-header__identity {
  min-width: 0;
  padding-top: 8px;
}

.ap-header__name {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: normal;
  margin: 0 0 10px;
  line-height: 1.15;
  color: var(--black);
}

.ap-header__country {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.ap-header__rating {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.ap-header__score {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}

.ap-header__scale {
  font-size: 14px;
  color: var(--muted);
}

.ap-header__review-count {
  font-size: 12px;
  color: var(--muted);
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.ap-header__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}

.ap-pill {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 11px;
  color: #444;
  background: var(--paper);
}

.ap-pill--gold {
  border-color: var(--gold);
  color: #7a5a00;
  background: #fffbee;
}

.ap-header__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ap-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}

.ap-btn--primary {
  background: var(--black);
  color: var(--gold);
  border: 1px solid var(--black);
}

.ap-btn--primary:hover {
  background: #222;
}

.ap-btn--ghost {
  background: transparent;
  color: #333;
  border: 1px solid var(--line);
}

.ap-btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.ap-social {
  display: flex;
  gap: 8px;
}

.ap-social__link {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  transition: border-color .18s, color .18s;
}

.ap-social__link:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── 11. AT A GLANCE ────────────────────────────────────────────────── */
.ap-glance {
  background: var(--black);
  color: var(--white);
  border-radius: 8px;
  padding: 24px 22px;
  align-self: start;
}

.ap-glance__title {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 16px;
  font-weight: normal;
  font-family: var(--sans);
}

.ap-glance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #222;
}

.ap-glance__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ap-glance__item strong {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

.ap-glance__gold {
  color: var(--gold) !important;
}

.ap-glance__item span {
  font-size: 10px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ap-glance__sub {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 10px;
  font-weight: normal;
}

.ap-glance__top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #222;
}

.ap-top-book {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: inherit;
  transition: color .15s;
}

.ap-top-book:hover {
  color: var(--gold);
}

.ap-top-book__rank {
  font-size: 10px;
  color: #555;
  min-width: 20px;
}

.ap-top-book__title {
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ddd;
}

.ap-top-book:hover .ap-top-book__title {
  color: var(--gold);
}

.ap-top-book__score {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}

.ap-glance__dist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-dist__row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ap-dist__label {
  font-size: 10.5px;
  color: #777;
  min-width: 14px;
  text-align: right;
}

.ap-dist__bar-wrap {
  flex: 1;
  height: 5px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
}

.ap-dist__bar {
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width .4s ease;
  min-width: 1px;
}

.ap-dist__pct {
  font-size: 10px;
  color: #555;
  min-width: 26px;
  text-align: right;
}

/* ── 12. SECTION TITLE (show page shared) ───────────────────────────── */
.ap-section-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: normal;
  margin: 0 0 6px;
  color: var(--black);
}

/* ── 13. BIOGRAPHY ──────────────────────────────────────────────────── */
.ap-bio {
  padding: 0 0 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
  max-width: 820px;
}

.ap-bio__text,
.ap-bio__full {
  font-size: 14px;
  line-height: 1.75;
  color: #333;
  margin: 0 0 14px;
}

.ap-bio__empty {
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.ap-bio__toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--gold);
  cursor: pointer;
  letter-spacing: .02em;
}

.ap-bio__toggle:hover {
  text-decoration: underline;
}

/* ── 14. BOOKS SECTION ──────────────────────────────────────────────── */
.ap-books {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.ap-books__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ap-books__count {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.ap-books__sort {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.ap-sort-btn {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 11.5px;
  color: #555;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}

.ap-sort-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.ap-sort-btn.is-active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

.ap-books__grid {
  grid-template-columns: repeat(6, 1fr) !important;
}

/* ── 15. READER REVIEWS ─────────────────────────────────────────────── */
.ap-reviews {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.ap-reviews__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ap-reviews__meta {
  font-size: 12px;
  color: var(--muted);
}

.ap-reviews__meta strong {
  color: var(--gold);
}

.ap-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ap-review-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s;
}

.ap-review-card:hover {
  border-color: var(--gold);
}

.ap-review-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ap-review-card__score {
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}

.ap-review-card__book {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.ap-review-card__book:hover {
  color: var(--gold);
}

.ap-review-card__body {
  font-size: 13px;
  line-height: 1.65;
  color: #333;
  font-style: italic;
  margin: 0;
  flex: 1;
}

.ap-review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ap-review-card__user {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ap-review-card__date {
  font-size: 10.5px;
  color: #bbb;
}

/* ── 16. RELATED AUTHORS ────────────────────────────────────────────── */
.ap-related {}

.ap-related__grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ap-related__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  flex: 1;
  min-width: 160px;
  max-width: 220px;
  transition: border-color .18s, transform .18s;
}

@media (prefers-reduced-motion: no-preference) {
  .ap-related__card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
  }
}

.ap-related__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--black);
  flex-shrink: 0;
}

.ap-related__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-related__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold);
}

.ap-related__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ap-related__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-related__country {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ap-related__books {
  font-size: 10.5px;
  color: #aaa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — AUTHORS & PROFILE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Large tablet (≤1280px) ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  .authors-featured__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .authors-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .authors-countries__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .ap-header {
    grid-template-columns: 180px 1fr 280px;
    gap: 0 28px;
  }

  .ap-header__photo-wrap {
    width: 160px;
    height: 160px;
  }

  .ap-books__grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ── Tablet (≤1023px) ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .authors-hero__title {
    font-size: 38px;
  }

  .authors-featured__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .authors-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .authors-countries__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .authors-stats__item {
    padding: 16px 24px;
  }

  .ap-header {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto;
  }

  .ap-header .ap-glance {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
  }

  .ap-glance__title {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .ap-glance__grid {
    grid-column: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .ap-glance__top {
    grid-column: 2;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .ap-glance__dist {
    grid-column: 1 / -1;
    border-top: 1px solid #222;
    padding-top: 16px;
    margin-top: 0;
  }

  .ap-books__grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .ap-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Small tablet (≤767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .authors-hero {
    padding: 48px 0 40px;
  }

  .authors-hero__title {
    font-size: 30px;
  }

  .authors-hero__sub {
    font-size: 12.5px;
  }

  .authors-hero__search {
    max-width: 100%;
  }

  .authors-stats__grid {
    flex-wrap: wrap;
  }

  .authors-stats__item {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid #2a2a2a;
  }

  .authors-stats__item:nth-child(odd) {
    border-right: 1px solid #2a2a2a;
  }

  .authors-stats__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .authors-featured__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .authors-toolbar__row {
    gap: 8px;
  }

  .authors-toolbar__search {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .authors-alpha {
    gap: 2px;
    padding: 10px 0;
  }

  .authors-alpha__btn {
    min-width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .authors-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .authors-countries__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .ap-header {
    grid-template-columns: 120px 1fr;
    gap: 0 18px;
  }

  .ap-header__photo-wrap {
    width: 110px;
    height: 110px;
  }

  .ap-header__initials {
    font-size: 42px;
  }

  .ap-header__name {
    font-size: 24px;
  }

  .ap-header__score {
    font-size: 22px;
  }

  .ap-header__actions {
    gap: 8px;
  }

  .ap-btn {
    padding: 8px 16px;
    font-size: 12px;
  }

  .ap-books__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ap-reviews__grid {
    grid-template-columns: 1fr;
  }

  .ap-related__grid {
    gap: 10px;
  }

  .ap-related__card {
    min-width: 140px;
    max-width: none;
    flex: 1 1 140px;
  }
}

/* ── Mobile (≤480px) ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .authors-hero__title {
    font-size: 26px;
  }

  .authors-featured__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .authors-featured__photo {
    width: 70px;
    height: 70px;
  }

  .authors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .authors-countries__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .authors-alpha__btn {
    min-width: 24px;
    height: 24px;
    font-size: 10px;
    padding: 0 4px;
  }

  .ap-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ap-header__photo-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
  }

  .ap-header__country,
  .ap-header__rating {
    justify-content: center;
  }

  .ap-header__pill-row,
  .ap-header__actions,
  .ap-social {
    justify-content: center;
  }

  .ap-header .ap-glance {
    grid-template-columns: 1fr;
  }

  .ap-glance__top {
    grid-column: 1;
  }

  .ap-books__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ap-books__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ap-reviews__grid {
    grid-template-columns: 1fr;
  }

  .ap-related__grid {
    flex-direction: column;
  }

  .ap-related__card {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION FIX — .pager / .pg  (pagination partial uses these classes)
   The previous CSS only defined .pagination/.pagination a — wrong selectors.
   ═══════════════════════════════════════════════════════════════════════════ */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 24px;
  padding-bottom: 8px;
}

.pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  background: #fff;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  text-decoration: none;
}

.pg:hover:not(.disabled):not(.active) {
  border-color: var(--gold);
  color: var(--gold);
  background: #fff;
}

.pg.active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
  font-weight: 700;
  pointer-events: none;
}

.pg.disabled {
  color: #ccc;
  border-color: #eee;
  background: #fafafa;
  pointer-events: none;
  cursor: default;
}

/* Prev / Next get a bit more width */
.pg:first-child,
.pg:last-child {
  min-width: 44px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS PAGE — PREMIUM REDESIGN  (rv2-* prefix)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO ─────────────────────────────────────────────────────────── */
.rv2-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 68px 0 56px;
  text-align: center;
}

.rv2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 50% 100%, rgba(217, 165, 42, .14) 0%, transparent 70%),
    radial-gradient(ellipse 35% 35% at 80% 10%, rgba(217, 165, 42, .07) 0%, transparent 60%);
  pointer-events: none;
}

.rv2-hero__inner {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
}

.rv2-hero__eyebrow {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}

.rv2-hero__title {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--white);
}

.rv2-hero__sub {
  font-size: 13.5px;
  color: #ccc;
  line-height: 1.65;
  margin: 0 0 28px;
}

.rv2-hero__search {
  display: flex;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.rv2-hero__search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 20px;
  font-size: 14px;
  color: #111;
  background: transparent;
}

.rv2-hero__search button {
  background: var(--gold);
  border: none;
  padding: 0 20px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #111;
  transition: background .2s;
}

.rv2-hero__search button:hover {
  background: var(--gold2);
}

/* ── 2. STATS BAR ───────────────────────────────────────────────────── */
.rv2-stats {
  background: #111;
  border-bottom: 1px solid #222;
}

.rv2-stats__grid {
  display: flex;
  justify-content: center;
}

.rv2-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 40px;
  border-right: 1px solid #2a2a2a;
  gap: 2px;
}

.rv2-stats__item:last-child {
  border-right: none;
}

.rv2-stats__item strong {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}

.rv2-stats__item span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
}

/* ── 3. MAIN WRAPPER ────────────────────────────────────────────────── */
.rv2-main {
  padding: 32px 0 64px;
}

.rv2-section-head {
  margin-bottom: 18px;
}

.rv2-section-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: normal;
  margin: 0 0 4px;
  color: var(--black);
}

.rv2-section-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ── 4. TRENDING ────────────────────────────────────────────────────── */
.rv2-trending {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.rv2-trending__badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #c0392b;
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.rv2-trending__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rv2-trending__card {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  color: inherit;
}

.rv2-trending__card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}

.rv2-trending__book {
  flex-shrink: 0;
  width: 54px;
}

.rv2-trending__book img {
  width: 54px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.rv2-trending__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.rv2-trending__score {
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
}

.rv2-trending__book-title {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: normal;
  margin: 0;
  color: var(--black);
  line-height: 1.3;
}

.rv2-trending__headline {
  font-size: 12px;
  color: #555;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

.rv2-trending__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.rv2-trending__reviewer {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rv2-trending__counts {
  font-size: 11px;
  color: #aaa;
}

/* ── 5. TWO-COLUMN LAYOUT ───────────────────────────────────────────── */
.rv2-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}

/* ── 6. SIDEBAR ─────────────────────────────────────────────────────── */
.rv2-sidebar {
  position: sticky;
  top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.rv2-sidebar__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.rv2-sidebar__head strong {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #333;
}

.rv2-sidebar__clear {
  font-size: 11px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 2px 8px;
  transition: background .15s, color .15s;
}

.rv2-sidebar__clear:hover {
  background: var(--gold);
  color: #111;
}

.rv2-filter-section {
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.rv2-filter-section:last-of-type {
  border-bottom: none;
}

.rv2-filter-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.rv2-filter-title--section {
  padding: 12px 14px 8px;
  margin: 0;
  border-top: 1px solid var(--line);
  display: block;
}

.rv2-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rv2-filter-list--scroll {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.rv2-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
}

.rv2-check:hover {
  background: var(--paper);
  color: #111;
}

.rv2-check.is-active {
  background: #fffbee;
  color: #7a5a00;
  font-weight: 600;
}

.rv2-check input[type="radio"],
.rv2-check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gold);
}

.rv2-check__count {
  margin-left: auto;
  font-size: 10.5px;
  color: #bbb;
}

.rv2-check__rating {
  font-size: 11.5px;
  color: var(--gold);
}

.rv2-check--toggle {
  border: 1px solid var(--line);
  border-radius: 4px;
}

.rv2-check--toggle.is-active {
  border-color: var(--gold);
  background: #fffbee;
}

/* ── Top Reviewers in Sidebar ────────────────────────────────────────── */
.rv2-top-reviewers {
  border-top: 1px solid var(--line);
  padding-bottom: 8px;
}

.rv2-reviewer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  transition: background .12s;
  color: inherit;
}

.rv2-reviewer-row:hover {
  background: var(--paper);
}

.rv2-reviewer-row__rank {
  font-size: 10px;
  color: var(--muted);
  min-width: 18px;
  font-weight: 700;
}

.rv2-reviewer-row__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rv2-reviewer-row__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.rv2-reviewer-row__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rv2-reviewer-row__meta {
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 7. TOOLBAR ─────────────────────────────────────────────────────── */
.rv2-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.rv2-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rv2-toolbar__count {
  font-size: 13px;
  color: #333;
}

.rv2-toolbar__count strong {
  font-family: var(--serif);
  font-size: 16px;
}

.rv2-toolbar__filtered {
  color: var(--muted);
  font-size: 11px;
}

.rv2-toolbar__clear {
  font-size: 11px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 2px 9px;
  transition: background .15s, color .15s;
}

.rv2-toolbar__clear:hover {
  background: var(--gold);
  color: #111;
}

.rv2-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rv2-filter-toggle {
  display: none;
  /* shown on mobile only */
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}

.rv2-filter-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  top: 4px;
  right: 4px;
}

.rv2-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rv2-sort__btn {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 11.5px;
  color: #555;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}

.rv2-sort__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.rv2-sort__btn.is-active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

/* ── 8. REVIEW CARDS GRID ───────────────────────────────────────────── */
.rv2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 8px;
}

.rv2-empty {
  grid-column: 1 / -1;
}

/* ── 9. PREMIUM REVIEW CARD ─────────────────────────────────────────── */
.rv2-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

@media (prefers-reduced-motion: no-preference) {
  .rv2-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
  }
}

/* Book link row — cover + title + author + rating */
.rv2-card__book-link {
  display: flex;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #f5f5f5;
  color: inherit;
  text-decoration: none;
}

.rv2-card__book-link:hover .rv2-card__book-title {
  color: var(--gold);
}

.rv2-card__cover {
  flex-shrink: 0;
  width: 52px;
}

.rv2-card__cover img {
  width: 52px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.rv2-card__book-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

.rv2-card__book-title {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: normal;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
  transition: color .15s;
}

.rv2-card__book-author {
  font-size: 11.5px;
  color: var(--muted);
}

.rv2-card__rating {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 2px;
}

.rv2-card__stars {
  font-size: 13px;
  color: var(--gold);
}

.rv2-card__score {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.rv2-card__scale {
  font-size: 10px;
  color: var(--muted);
}

/* Reviewer row */
.rv2-card__reviewer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid #f5f5f5;
}

.rv2-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.rv2-card__avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 14px;
  align-items: center;
  justify-content: center;
}

.rv2-card__reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rv2-card__reviewer-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rv2-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: var(--gold);
  color: #111;
  border-radius: 50%;
  font-size: 8px;
  font-weight: bold;
  flex-shrink: 0;
}

.rv2-card__reviewer-meta {
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Review body */
.rv2-card__body {
  padding: 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rv2-card__headline {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--black);
  font-style: italic;
  line-height: 1.4;
  display: block;
  transition: color .15s;
}

.rv2-card__headline:hover {
  color: var(--gold);
}

.rv2-card__excerpt {
  font-size: 12.5px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Card footer */
.rv2-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-top: 1px solid #f5f5f5;
  background: var(--paper);
  gap: 8px;
  flex-wrap: wrap;
}

.rv2-card__counts {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: #aaa;
}

.rv2-card__helpful:hover,
.rv2-card__comments:hover {
  color: var(--gold);
}

.rv2-card__readmore {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .02em;
  transition: color .15s;
  white-space: nowrap;
}

.rv2-card__readmore:hover {
  color: var(--black);
}

/* ── 10. PAGINATION wrapper for reviews page ────────────────────────── */
.rv2-pagination {
  margin-top: 28px;
  /* .pager inside is already horizontal — just ensure no extra layout breaks */
}

.rv2-pagination .pager {
  margin-top: 0;
}

/* ── 11. COUNTRY DISCOVERY ──────────────────────────────────────────── */
.rv2-countries {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.rv2-countries__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rv2-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  font-size: 12px;
  color: #333;
  background: #fff;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}

.rv2-country-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.rv2-country-chip.is-active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

.rv2-country-chip__count {
  font-size: 10.5px;
  color: #aaa;
  margin-left: 2px;
}

.rv2-country-chip.is-active .rv2-country-chip__count {
  color: #888;
}

/* ── 12. WRITE A REVIEW CTA ─────────────────────────────────────────── */
.rv2-cta {
  margin-top: 56px;
  background: var(--black);
  border-radius: 8px;
  overflow: hidden;
}

.rv2-cta__inner {
  padding: 40px 32px;
  text-align: center;
}

.rv2-cta__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: normal;
  color: var(--white);
  margin: 0 0 10px;
}

.rv2-cta__sub {
  font-size: 13px;
  color: #aaa;
  margin: 0 0 22px;
  line-height: 1.6;
}

.rv2-cta__btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--gold);
  color: #111;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  transition: background .18s;
}

.rv2-cta__btn:hover {
  background: var(--gold2);
}

/* ── 13. MOBILE OVERLAY ──────────────────────────────────────────────── */
.rv2-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 149;
}

.rv2-overlay.is-visible {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — REVIEWS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Large (≤1280px) ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .rv2-trending__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rv2-layout {
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 0 20px;
  }

  .rv2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet (≤1023px) ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .rv2-hero__title {
    font-size: 36px;
  }

  .rv2-trending__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rv2-trending__card:last-child {
    display: none;
  }

  /* Sidebar becomes fixed drawer */
  .rv2-layout {
    grid-template-columns: 1fr;
  }

  .rv2-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 150;
    overflow-y: auto;
    transform: translateX(-110%);
    transition: transform .28s ease;
    border-radius: 0;
    border: none;
    box-shadow: 4px 0 20px rgba(0, 0, 0, .18);
  }

  .rv2-sidebar.is-open {
    transform: translateX(0);
  }

  .rv2-filter-toggle {
    display: inline-flex;
  }

  .rv2-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rv2-stats__item {
    padding: 16px 24px;
  }
}

/* ── Small tablet (≤767px) ────────────────────────────────────────── */
@media (max-width: 767px) {
  .rv2-hero {
    padding: 44px 0 36px;
  }

  .rv2-hero__title {
    font-size: 28px;
  }

  .rv2-hero__sub {
    font-size: 12.5px;
  }

  .rv2-hero__search {
    max-width: 100%;
  }

  .rv2-stats__grid {
    flex-wrap: wrap;
  }

  .rv2-stats__item {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid #2a2a2a;
    padding: 14px 16px;
  }

  .rv2-stats__item:nth-child(odd) {
    border-right: 1px solid #2a2a2a;
  }

  .rv2-stats__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .rv2-trending {
    display: none;
  }

  /* collapse on small screens */
  .rv2-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .rv2-toolbar__right {
    width: 100%;
    justify-content: space-between;
  }

  .rv2-sort {
    gap: 3px;
  }

  .rv2-sort__btn {
    font-size: 11px;
    padding: 4px 9px;
  }

  .rv2-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── Mobile (≤480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .rv2-hero__title {
    font-size: 24px;
  }

  .rv2-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rv2-card__book-link {
    padding: 12px 12px 8px;
  }

  .rv2-card__reviewer {
    padding: 8px 12px;
  }

  .rv2-card__body {
    padding: 8px 12px;
  }

  .rv2-card__footer {
    padding: 8px 12px;
  }

  .rv2-countries__chips {
    gap: 6px;
  }

  .rv2-country-chip {
    padding: 6px 11px;
    font-size: 11.5px;
  }

  .pager {
    gap: 3px;
  }

  .pg {
    min-width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HP2 LIGHT THEME — Premium editorial light redesign for 5 homepage sections
   Replaces hp2-dark with hp2-light. Brand: Black + Warm White/Ivory + Gold.
   Token overrides work by specificity — no existing dark rules are removed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Light theme tokens ─────────────────────────────────────────────────── */
:root {
  --hp2-ivory: #f8f7f3;
  --hp2-paper2: #f3f1ec;
  --hp2-line-lt: #e8e6e0;
  --hp2-line-lt2: #d4d1c8;
  --hp2-muted-lt: #7a786f;
  --hp2-dim-lt: #5c5a54;
  --hp2-gold-lt: #c49518;
  /* slightly deeper gold on white — better contrast */
}

/* ── Base light wrapper ─────────────────────────────────────────────────── */
.hp2-light {
  background: var(--hp2-ivory);
  color: var(--black);
}

.hp2-light.hp2-white {
  background: #ffffff;
}

.hp2-light.hp2-ivory {
  background: var(--hp2-ivory);
}

/* Section border separators */
.hp2-light+.hp2-light {
  border-top: 1px solid var(--hp2-line-lt);
}

/* Shared text resets for light context */
.hp2-light a {
  color: inherit;
}

.hp2-light .hp2-sub {
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-shead h2 {
  color: var(--black);
}

.hp2-light .hp2-viewall {
  color: var(--black);
  border-bottom-color: var(--gold);
}

.hp2-light .hp2-viewall:hover {
  color: var(--hp2-gold-lt);
}

.hp2-light img.cflag {
  outline-color: rgba(0, 0, 0, .1);
}

/* ── 01 TRENDING REVIEWS — Featured editorial pulse ──────────────────────── */
/* Book cover: light shadow instead of dark */
.hp2-light .hp2-pulse-cover img,
.hp2-light .hp2-pulse-cover .hp2-coverph {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .14);
  border-radius: 4px;
}

/* Blockquote: dark editorial type on light bg */
.hp2-light .hp2-pulse-body blockquote {
  color: var(--black);
  font-size: clamp(18px, 2.2vw, 26px);
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin-left: 0;
}

/* Rating number */
.hp2-light .hp2-rate b {
  color: var(--hp2-gold-lt);
}

.hp2-light .hp2-rate span {
  color: var(--hp2-muted-lt);
}

/* Source line */
.hp2-light .hp2-pulse-src {
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-pulse-src a {
  color: var(--hp2-gold-lt);
}

.hp2-light .hp2-pulse-src a:hover {
  color: var(--black);
}

/* Recent reviewers list */
.hp2-light .hp2-pulse-list li {
  color: var(--hp2-dim-lt);
}

/* Meta strip */
.hp2-light .hp2-pulse-meta {
  border-top-color: var(--hp2-line-lt);
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-pulse-meta b {
  color: var(--black);
  font-size: 16px;
}

/* ── 02 LATEST REVIEWS — Clean editorial reader feed ─────────────────────── */

/* Card */
.hp2-light .hp2-fcard {
  background: #ffffff;
  border-color: var(--hp2-line-lt);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

@media (prefers-reduced-motion: no-preference) {
  .hp2-light .hp2-fcard:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .09);
    transform: translateY(-4px);
  }

  .hp2-light .hp2-fcard:hover .hp2-fcover img {
    transform: scale(1.06);
  }
}

/* Book title in card */
.hp2-light .hp2-fcard h3 a {
  color: var(--black);
}

.hp2-light .hp2-fcard h3 a:hover {
  color: var(--hp2-gold-lt);
}

/* Quote text */
.hp2-light .hp2-fquote {
  color: #444;
}

/* Read link */
.hp2-light .hp2-fread {
  color: var(--hp2-gold-lt);
  letter-spacing: .06em;
}

.hp2-light .hp2-fread:hover {
  color: var(--black);
}

/* Who row */
.hp2-light .hp2-fwho {
  border-top-color: var(--hp2-line-lt);
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-fwho em {
  color: #a09e97;
}

/* ── 03 REVIEWS FROM AROUND THE WORLD — Global light editorial ───────────── */

/* Map box */
.hp2-light .hp2-mapbox {
  background: #ffffff;
  border-color: var(--hp2-line-lt);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

/* SVG map: land = warm ivory, grid = subtle lines */
.hp2-light .hp2-mapland path {
  fill: #e8e4d8;
}

.hp2-light .hp2-mapgrid path {
  stroke: #d4d0c2;
  stroke-width: 0.5;
}

/* Pin dot */
.hp2-light .hp2-pin-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(217, 165, 42, .2);
}

.hp2-light .hp2-pin.is-active .hp2-pin-dot,
.hp2-light .hp2-pin:hover .hp2-pin-dot {
  background: var(--hp2-gold-lt);
  box-shadow: 0 0 0 6px rgba(196, 149, 24, .25);
}

/* Pin labels */
.hp2-light .hp2-pin-rate {
  color: var(--hp2-gold-lt);
}

.hp2-light .hp2-pin-name {
  color: var(--hp2-muted-lt);
}

/* Pin tooltip */
.hp2-light .hp2-pin-tip {
  background: #fff;
  border-color: var(--hp2-line-lt);
  color: #555;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.hp2-light .hp2-pin-tip b {
  color: var(--hp2-gold-lt);
}

/* Side panel quote + meta */
.hp2-light .hp2-wquote {
  color: var(--black);
  font-size: clamp(16px, 1.8vw, 22px);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin-left: 0;
}

.hp2-light .hp2-wattr {
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-wlink {
  color: var(--hp2-gold-lt);
  border-bottom-color: var(--gold);
}

.hp2-light .hp2-wlink:hover {
  color: var(--black);
}

/* World stats boxes */
.hp2-light .hp2-wstat {
  background: #fff;
  border-color: var(--hp2-line-lt);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}

.hp2-light .hp2-wstat b {
  color: var(--black);
  font-size: 20px;
}

.hp2-light .hp2-wstat span {
  color: var(--hp2-muted-lt);
}

/* ── 04 TOP REVIEWERS — Premium reputation showcase ──────────────────────── */

/* Reviewer card */
.hp2-light .hp2-revcard {
  background: #ffffff;
  border-color: var(--hp2-line-lt);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

@media (prefers-reduced-motion: no-preference) {
  .hp2-light .hp2-revcard:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    transform: translateY(-3px);
  }
}

.hp2-light .hp2-revcard.is-first {
  border-color: var(--gold);
  box-shadow: 0 4px 18px rgba(217, 165, 42, .14);
}

/* Rank number */
.hp2-light .hp2-revrank {
  color: #b8b4a8;
}

.hp2-light .hp2-revcard.is-first .hp2-revrank {
  color: var(--hp2-gold-lt);
}

/* Avatar */
.hp2-light .hp2-avatar {
  background: var(--hp2-paper2);
  color: var(--hp2-gold-lt);
}

.hp2-light .hp2-revcard.is-first .hp2-avatar {
  background: #fff8e6;
  border: 2px solid var(--gold);
}

/* Name */
.hp2-light .hp2-revname {
  color: var(--black);
}

/* Country */
.hp2-light .hp2-revcty {
  color: var(--hp2-muted-lt);
}

/* Stats */
.hp2-light .hp2-revstats {
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-gold {
  color: var(--hp2-gold-lt);
}

/* Level badge */
.hp2-light .hp2-levelbadge {
  color: var(--hp2-gold-lt);
  border-color: #e8d99a;
  background: #fffbee;
}

/* ── 05 EXPLORE BOOKS — Elegant discovery navigation ─────────────────────── */

/* Column cards */
.hp2-light .hp2-excol {
  background: #ffffff;
  border-color: var(--hp2-line-lt);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  transition: box-shadow .2s, border-color .2s;
}

.hp2-light .hp2-excol:hover {
  border-color: var(--hp2-line-lt2);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
}

/* Column headings */
.hp2-light .hp2-excol h3 {
  color: var(--black);
}

.hp2-light .hp2-excol h3 span {
  color: var(--hp2-gold-lt);
}

/* Chips */
.hp2-light .hp2-chip {
  color: #333;
  border-color: var(--hp2-line-lt);
  background: var(--hp2-ivory);
}

.hp2-light .hp2-chip:hover {
  border-color: var(--gold);
  color: var(--black);
  background: #fff;
}

.hp2-light .hp2-chipcnt {
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-nativename {
  color: var(--hp2-muted-lt);
}

.hp2-light .hp2-chipempty {
  color: var(--hp2-muted-lt);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section-level background + border refinements (alternating ivory / white)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Trending (Ivory) — subtle top border from whatever comes before */
.hp2-trending.hp2-light {
  border-top: 1px solid var(--hp2-line-lt);
}

/* Latest (White) — very subtle inset shadow to lift off ivory */
.hp2-latest.hp2-light {
  border-top: 1px solid var(--hp2-line-lt);
  border-bottom: 1px solid var(--hp2-line-lt);
}

/* World (Ivory) */
.hp2-world.hp2-light {
  border-top: 1px solid var(--hp2-line-lt);
}

/* Reviewers (White) */
.hp2-reviewers.hp2-light {
  border-top: 1px solid var(--hp2-line-lt);
  border-bottom: 1px solid var(--hp2-line-lt);
}

/* Explore (Ivory) */
.hp2-explore.hp2-light {
  border-top: 1px solid var(--hp2-line-lt);
}

/* ── Responsive adjustments for light theme ──────────────────────────────── */
@media (max-width: 767px) {
  .hp2-light .hp2-fcard {
    box-shadow: none;
  }

  .hp2-light .hp2-revcard {
    box-shadow: none;
  }

  .hp2-light .hp2-excol {
    box-shadow: none;
  }

  .hp2-light .hp2-wstat {
    box-shadow: none;
  }
}

/* ── Reduce-motion: no transforms in light cards either ──────────────────── */
@media (prefers-reduced-motion: reduce) {

  .hp2-light .hp2-fcard:hover,
  .hp2-light .hp2-revcard:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWER PROFILE PAGE  —  rvp-* prefix
   Brand: Black + Warm Ivory + Gold. Light editorial, not a dashboard.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Page wrapper ─────────────────────────────────────────────────────── */
.rvp-main {
  padding: 28px 0 72px;
  background: var(--white);
}

/* ── Shared section title ────────────────────────────────────────────────── */
.rvp-section-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: normal;
  margin: 0 0 20px;
  color: var(--black);
}

/* ── 2. PROFILE HEADER ───────────────────────────────────────────────────── */
.rvp-header {
  display: grid;
  grid-template-columns: 168px 1fr 280px;
  gap: 0 36px;
  align-items: start;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

/* Avatar */
.rvp-header__avatar-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}

.rvp-header__avatar {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .13);
}

.rvp-header__initials {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 52px;
  align-items: center;
  justify-content: center;
  letter-spacing: -.02em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .13);
}

/* Level ring around avatar */
.rvp-header__level-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  pointer-events: none;
}

/* Identity */
.rvp-header__identity {
  padding-top: 6px;
  min-width: 0;
}

.rvp-header__name {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: normal;
  margin: 0 0 8px;
  line-height: 1.15;
  color: var(--black);
}

.rvp-header__country {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.rvp-header__country--none {
  color: #bbb;
  font-style: italic;
}

.rvp-header__bio {
  font-size: 13.5px;
  line-height: 1.7;
  color: #444;
  margin: 0 0 14px;
  max-width: 56ch;
}

.rvp-header__bio--empty {
  color: var(--muted);
  font-style: italic;
}

.rvp-header__website {
  font-size: 12px;
  color: var(--gold);
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

.rvp-header__website:hover {
  text-decoration: underline;
}

/* Badges */
.rvp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.rvp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: #444;
  white-space: nowrap;
}

.rvp-badge--verified {
  border-color: #4caf50;
  color: #2e7d32;
  background: #f1faf2;
}

.rvp-badge--trusted {
  border-color: var(--gold);
  color: #7a5a00;
  background: #fffbee;
}

.rvp-badge--top {
  border-color: #e0a800;
  color: #7a5a00;
  background: #fffbee;
}

.rvp-badge--global {
  border-color: #64b5f6;
  color: #1565c0;
  background: #e3f2fd;
}

.rvp-badge--affiliate {
  border-color: #9c27b0;
  color: #6a0080;
  background: #fce4ec;
}

.rvp-badge--reward {
  border-color: #e91e63;
  color: #880e4f;
  background: #fce4ec;
}

/* Level label */
.rvp-level {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.rvp-level__icon {
  font-size: 14px;
}

.rvp-level__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── 3. STATS PANEL ──────────────────────────────────────────────────────── */
.rvp-stats {
  background: var(--black);
  color: var(--white);
  border-radius: 8px;
  padding: 22px 20px;
  align-self: start;
}

.rvp-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #222;
}

.rvp-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rvp-stats__item strong {
  font-family: var(--serif);
  font-size: 22px;
  color: #fff;
  line-height: 1;
}

.rvp-stats__gold {
  color: var(--gold) !important;
}

.rvp-stats__item span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #777;
}

/* Reputation block */
.rvp-reputation {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #222;
}

.rvp-reputation__label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 6px;
}

.rvp-reputation__score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rvp-reputation__num {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}

.rvp-reputation__denom {
  font-size: 13px;
  color: #666;
}

.rvp-reputation__level {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Member since */
.rvp-stats__since {
  font-size: 11px;
  color: #555;
}

/* ── 4. TOP BOOKS REVIEWED ───────────────────────────────────────────────── */
.rvp-topbooks {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.rvp-topbooks__grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rvp-topbook {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 90px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s;
}

.rvp-topbook:hover {
  transform: translateY(-3px);
}

.rvp-topbook__cover {
  width: 90px;
}

.rvp-topbook__cover img {
  width: 90px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

.rvp-topbook__info {
  text-align: center;
  width: 100%;
}

.rvp-topbook__title {
  display: block;
  font-size: 11px;
  color: #333;
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rvp-topbook__rating {
  display: block;
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
}

/* ── 5. GENRE INTERESTS ─────────────────────────────────────────────────── */
.rvp-interests {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.rvp-interests__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rvp-interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  font-size: 12.5px;
  color: #333;
  background: var(--paper);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}

.rvp-interest-chip:hover {
  border-color: var(--gold);
  background: #fff;
  color: var(--black);
}

.rvp-interest-chip__count {
  font-size: 10.5px;
  color: var(--muted);
  background: #eee;
  border-radius: 10px;
  padding: 1px 6px;
}

/* ── 6. REVIEWS SECTION ─────────────────────────────────────────────────── */
.rvp-reviews {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.rvp-reviews__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rvp-reviews__sub {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

.rvp-clear-link {
  color: var(--gold);
  font-size: 11.5px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px 8px;
  transition: background .15s, color .15s;
}

.rvp-clear-link:hover {
  background: var(--gold);
  color: #111;
}

/* ── 7. TOOLBAR ─────────────────────────────────────────────────────────── */
.rvp-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.rvp-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rvp-filter-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 12px;
  color: #555;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}

.rvp-filter-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.rvp-filter-chip.is-active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

.rvp-toolbar__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rvp-sort-btn {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 11.5px;
  color: #555;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}

.rvp-sort-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.rvp-sort-btn.is-active {
  background: var(--black);
  color: var(--gold);
  border-color: var(--black);
}

/* ── 8. REVIEW CARDS GRID ───────────────────────────────────────────────── */
.rvp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 8px;
}

/* ── 9. PREMIUM REVIEW CARD ─────────────────────────────────────────────── */
.rvp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

@media (prefers-reduced-motion: no-preference) {
  .rvp-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
  }
}

/* Book row */
.rvp-card__book {
  display: flex;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none;
  color: inherit;
}

.rvp-card__book:hover .rvp-card__book-title {
  color: var(--gold);
}

.rvp-card__cover {
  flex-shrink: 0;
  width: 52px;
}

.rvp-card__cover img {
  width: 52px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.rvp-card__book-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

.rvp-card__book-title {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: normal;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
  transition: color .15s;
}

.rvp-card__book-author {
  font-size: 11.5px;
  color: var(--muted);
}

/* Rating row */
.rvp-card__rating {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 8px 14px;
  border-bottom: 1px solid #f5f5f5;
}

.rvp-card__stars {
  font-size: 14px;
  color: var(--gold);
}

.rvp-card__score {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.rvp-card__scale {
  font-size: 11px;
  color: var(--muted);
}

/* Body */
.rvp-card__body {
  padding: 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rvp-card__headline {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--black);
  font-style: italic;
  line-height: 1.4;
  display: block;
  text-decoration: none;
  transition: color .15s;
}

.rvp-card__headline:hover {
  color: var(--gold);
}

.rvp-card__excerpt {
  font-size: 12.5px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Footer */
.rvp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-top: 1px solid #f5f5f5;
  background: var(--paper);
  gap: 8px;
  flex-wrap: wrap;
}

.rvp-card__counts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rvp-card__helpful,
.rvp-card__comments {
  font-size: 12px;
  color: #aaa;
}

/* Helpful vote button */
.rvp-helpful-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.rvp-helpful-btn {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  color: #aaa;
  transition: color .15s;
}

.rvp-helpful-btn:hover {
  color: var(--gold);
}

.rvp-helpful-btn.is-voted {
  color: var(--gold);
  font-weight: 600;
}

.rvp-card__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rvp-card__date {
  font-size: 11px;
  color: #bbb;
  white-space: nowrap;
}

.rvp-card__readmore {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}

.rvp-card__readmore:hover {
  color: var(--black);
}

/* ── 10. PAGINATION ─────────────────────────────────────────────────────── */
.rvp-pagination {
  margin-top: 24px;
}

.rvp-pagination .pager {
  margin-top: 0;
}

/* ── 11. RELATED REVIEWERS ──────────────────────────────────────────────── */
.rvp-related {
  padding-top: 8px;
}

.rvp-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.rvp-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

@media (prefers-reduced-motion: no-preference) {
  .rvp-related-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
  }
}

.rvp-related-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--black);
}

.rvp-related-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rvp-related-card__initials {
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold);
  align-items: center;
  justify-content: center;
}

.rvp-related-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rvp-related-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rvp-related-card__country {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rvp-related-card__stats {
  font-size: 11px;
  color: #aaa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Reviewer Profile
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Large tablet (≤1200px) ────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .rvp-header {
    grid-template-columns: 148px 1fr 260px;
    gap: 0 24px;
  }

  .rvp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rvp-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tablet (≤1023px) ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .rvp-header {
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto auto;
    gap: 0 20px;
  }

  .rvp-header .rvp-stats {
    grid-column: 1 / -1;
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  .rvp-stats__grid {
    grid-column: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .rvp-reputation {
    grid-column: 2;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .rvp-stats__since {
    grid-column: 1 / -1;
    border-top: 1px solid #222;
    padding-top: 12px;
  }

  .rvp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rvp-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rvp-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Small tablet (≤767px) ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rvp-header {
    grid-template-columns: 100px 1fr;
    gap: 0 16px;
  }

  .rvp-header__avatar,
  .rvp-header__initials {
    width: 96px;
    height: 96px;
  }

  .rvp-header__name {
    font-size: 22px;
  }

  .rvp-header__bio {
    font-size: 12.5px;
  }

  .rvp-topbooks__grid {
    gap: 10px;
  }

  .rvp-topbook {
    width: 76px;
  }

  .rvp-topbook__cover img {
    width: 76px;
  }

  .rvp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rvp-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rvp-filter-chip,
  .rvp-sort-btn {
    font-size: 11px;
    padding: 4px 9px;
  }
}

/* ── Mobile (≤480px) ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .rvp-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rvp-header__avatar-wrap {
    margin: 0 auto 16px;
  }

  .rvp-header__country {
    justify-content: center;
  }

  .rvp-badges {
    justify-content: center;
  }

  .rvp-level {
    justify-content: center;
  }

  .rvp-header .rvp-stats {
    grid-template-columns: 1fr;
  }

  .rvp-reputation {
    grid-column: 1;
    border-top: 1px solid #222;
    padding-top: 14px;
    margin-top: 0;
  }

  .rvp-grid {
    grid-template-columns: 1fr;
  }

  .rvp-topbooks__grid {
    gap: 8px;
  }

  .rvp-topbook {
    width: 68px;
  }

  .rvp-topbook__cover img {
    width: 68px;
  }

  .rvp-related__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rvp-toolbar__sort {
    gap: 3px;
  }

  .rvp-sort-btn {
    font-size: 10.5px;
    padding: 4px 8px;
  }
}

/* ============================================================
   iBD Rating — Final responsive polish (appended 2026-09)
   Star-rating wrap · Hero floating cards · Footer accordion
   ============================================================ */

/* Reusable 10-star rating: allow clean two-row wrap on narrow screens */
.stars {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.stars-half {
  white-space: nowrap;
}
.bookrating {
  flex-wrap: wrap;
  row-gap: 2px;
}
.bookrating .rating-count {
  white-space: nowrap;
}

/* Footer social icons (managed from Admin → Website Settings → Social Media) */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.social-link {
  width: 32px;
  height: 32px;
  border: 1px solid #444;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social-link:hover {
  color: #fff;
  border-color: var(--gold);
  background: rgba(217, 165, 42, .08);
}

/* Footer grid: brand + 5 link columns */
.footergrid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap: 30px;
}

/* Accordion columns (native <details>, no JS required) */
.fcol {
  min-width: 0;
}
.fcol summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 14px;
}
.fcol summary::-webkit-details-marker {
  display: none;
}
.fcol-chev {
  display: none;
}
.fcol-body a {
  display: block;
  color: #aaa;
  font-size: 10px;
  margin: 9px 0;
}
.fcol-body a:hover {
  color: #fff;
}

@media (max-width: 1100px) {
  .footergrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footerbrand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  /* Footer becomes visible on mobile (previously hidden) and stacks */
  .footer {
    display: block;
  }
  .footergrid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 26px;
  }
  .footerbrand {
    grid-column: auto;
    padding: 6px 0 18px;
    border-bottom: 1px solid #292929;
  }
  .fcol {
    border-bottom: 1px solid #292929;
  }
  .fcol summary {
    pointer-events: auto;
    cursor: pointer;
    padding: 13px 0;
    margin: 0;
    font-size: 13px;
  }
  .fcol-chev {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #777;
  }
  .fcol-chev::before {
    content: "+";
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1;
  }
  .fcol[open] .fcol-chev::before {
    content: "-";
  }
  .fcol-body {
    padding: 0 0 14px;
  }
  .fcol-body a {
    margin: 7px 0;
    font-size: 11px;
  }

  /* Clean, content-first hero on mobile: floating cards hidden */
  .hero-card {
    display: none;
  }
}

@media (max-width: 520px) {
  .hero {
    height: auto;
    min-height: 440px;
  }
  .hero-content {
    min-height: 440px;
  }
  .section {
    padding: 38px 0;
  }
  .trustitem {
    padding: 20px 16px;
  }
  .ctabox {
    padding: 24px 20px;
  }
  .ctabtns {
    margin: 18px 0 0;
  }
  .ctabtns .btn {
    flex: 1;
    text-align: center;
  }
}


/* ============================================================
   iBD Rating — Accessibility & performance polish (appended)
   Skip link · focus states · reduced motion
   ============================================================ */

/* Skip-to-content link (revealed on keyboard focus) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 300;
  background: var(--gold);
  color: #111;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.skip-link:focus {
  left: 8px;
}

/* Visible focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   iBD Rating — Larger footer social icons (appended)
   ============================================================ */
.social {
  gap: 12px;
}
.social-link {
  width: 46px;
  height: 46px;
  border: 1px solid #4a4a4a;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: #e8e6e0;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.social-link svg {
  width: 22px;
  height: 22px;
}
.social-link:hover {
  color: #111;
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}


/* ============================================================
   iBD Rating — Social icons: solid white + brand hover (appended)
   ============================================================ */
.social-link {
  color: #fff;
  border-color: #555;
}
.social-link svg {
  width: 24px;
  height: 24px;
}
.social-link:hover {
  color: #fff;
  transform: translateY(-2px);
}
.social-facebook:hover { background: #1877f2; border-color: #1877f2; }
.social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; }
.social-twitter:hover { background: #fff; color: #000; border-color: #fff; }
.social-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.social-youtube:hover { background: #ff0000; border-color: #ff0000; }


/* ============================================================
   iBD Rating — Social icons clearly enclosed in visible circles
   ============================================================ */
.social-link {
  width: 46px;
  height: 46px;
  border: 1px solid #3d3d3d;
  border-radius: 50%;
  background: #1e1e1e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.social-link svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}


/* ============================================================
   iBD Rating — Social icons: compact premium (final)
   ============================================================ */
.social {
  gap: 10px;
}
.social-link {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: transparent;
  color: #e9e7e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.social-link:hover,
.social-facebook:hover,
.social-instagram:hover,
.social-twitter:hover,
.social-linkedin:hover,
.social-youtube:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(217, 165, 42, .08);
}
@media (max-width: 800px) {
  .social-link {
    width: 36px;
    height: 36px;
  }
  .social-link svg {
    width: 15px;
    height: 15px;
  }
}


/* ============================================================
   iBD Rating — Social icon centering guarantee (appended)
   ============================================================ */
.social-link {
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-link svg {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .social-link svg {
    width: 15px;
    height: 15px;
  }
}


/* ============================================================
   iBD Rating — Social icon centering (bulletproof, final)
   ============================================================ */
.social-link {
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}
.social-link svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
}
@media (max-width: 800px) {
  .social-link {
    width: 36px !important;
    height: 36px !important;
  }
  .social-link svg {
    width: 15px !important;
    height: 15px !important;
  }
}


/* ============================================================
   iBD Rating — Homepage premium/editorial refinement (appended)
   ============================================================ */

/* 1. Consistent section spacing (desktop 80px, mobile 48px) */
.hp2-section {
  padding: 80px 0;
}
.hp2-section + .hp2-section {
  padding-top: 80px;
}

/* 2. Consistent mobile side padding (20px each side) */
@media (max-width: 800px) {
  .container {
    width: calc(100% - 40px);
  }
  .hp2-section {
    padding: 48px 0;
  }
  .hp2-section + .hp2-section {
    padding-top: 48px;
  }
}

/* 3. Softer, lighter cards — premium, not "dashboard" */
.hp2-light .hp2-fcard,
.hp2-light .hp2-revcard,
.hp2-light .hp2-excol,
.hp2-light .hp2-wstat {
  border-radius: 6px;
  box-shadow: none;
}

/* 4. Cap heading size (editorial, not half the screen) */
.hp2-shead h2 {
  font-size: clamp(26px, 3vw, 36px);
}

/* 5. Latest Reviews — row layout with thin separators */
.hp2-feed-rows {
  grid-template-columns: 1fr;
  gap: 0;
}
.hp2-frow {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--hp2-line-lt, #e8e6e0);
}
.hp2-feed-rows .hp2-frow:first-child {
  border-top: 0;
  padding-top: 0;
}
.hp2-frow .hp2-fcover {
  width: 56px;
}
.hp2-frow-main {
  min-width: 0;
}
.hp2-frow-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.hp2-frow-top h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 17px;
  line-height: 1.3;
  margin: 0;
}
.hp2-frow-top h3 a {
  color: var(--black);
  text-decoration: none;
}
.hp2-frow-top h3 a:hover {
  color: var(--gold);
}
.hp2-frow .hp2-fquote {
  margin: 6px 0 0;
}
.hp2-frow .hp2-fwho {
  border-top: 0;
  padding-top: 6px;
  margin-top: 6px;
}

@media (max-width: 800px) {
  .hp2-frow {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .hp2-frow .hp2-fcover {
    width: 44px;
  }
  .hp2-frow-top {
    flex-direction: column;
    gap: 4px;
  }
}


/* ============================================================
   iBD Rating — Explore discovery panels + Reviewers leaderboard (appended)
   ============================================================ */

/* ── Explore: clean list panels (not dashboard chips) ── */
.hp2-explore-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hp2-light .hp2-excol {
  background: transparent;
  border: 1px solid var(--hp2-line-lt, #e8e6e0);
  border-radius: 6px;
  padding: 22px;
  box-shadow: none;
}
.hp2-light .hp2-excol h3 {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hp2-muted-lt, #7a786f);
  margin: 0 0 10px;
}
.hp2-exlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp2-exlist li {
  border-top: 1px solid var(--hp2-line-lt, #e8e6e0);
}
.hp2-exlist li:first-child {
  border-top: 0;
}
.hp2-exlist a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  color: var(--black);
  text-decoration: none;
  font-size: 14px;
}
.hp2-exlist a:hover span {
  color: var(--hp2-gold-lt, #c49518);
}
.hp2-exlist a .cflag {
  margin-right: 4px;
}
.hp2-exlist b {
  font-family: var(--serif);
  font-weight: normal;
  color: var(--hp2-muted-lt, #7a786f);
  font-size: 13px;
  white-space: nowrap;
}
.hp2-exlist .hp2-nativename {
  color: var(--hp2-muted-lt, #7a786f);
  font-style: normal;
  font-size: 12px;
}
.hp2-exmore {
  display: inline-block;
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hp2-gold-lt, #c49518);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.hp2-exmore:hover {
  color: var(--black);
}

/* ── Top Reviewers: cleaner leaderboard ── */
.hp2-light .hp2-revcard {
  background: #fff;
  border: 1px solid var(--hp2-line-lt, #e8e6e0);
  border-radius: 6px;
  box-shadow: none;
}
.hp2-light .hp2-revcard.is-first {
  border-color: var(--gold);
  border-left: 2px solid var(--gold);
}
.hp2-revrank {
  font-size: 20px;
  color: var(--hp2-gold-lt, #c49518);
}
.hp2-revcard.is-first .hp2-revrank {
  font-size: 26px;
}
.hp2-light .hp2-revname {
  color: var(--black);
}

@media (max-width: 800px) {
  .hp2-explore-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ============================================================
   iBD Rating — Trending + Most Reviewed editorial mobile (appended)
   ============================================================ */

/* ── Trending Reviews: editorial magazine layout ── */
@media (max-width: 800px) {
  .hp2-pulse {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .hp2-pulse-cover {
    width: 170px;
    margin: 0 auto;
  }
  .hp2-pulse-list li {
    justify-content: center;
  }
  .hp2-pulse-meta {
    justify-content: center;
  }
}

/* ── Most Reviewed: ranking rows (stack on mobile) ── */
@media (max-width: 800px) {
  .hp2-rankrow {
    grid-template-columns: 34px 52px 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .hp2-ranknum {
    font-size: 22px;
  }
  .hp2-rankrow.is-hero .hp2-ranknum {
    font-size: 30px;
  }
  .hp2-rankcover img,
  .hp2-rankcover .hp2-coverph {
    max-width: 52px;
  }
  .hp2-rankrow.is-hero .hp2-rankcover img,
  .hp2-rankrow.is-hero .hp2-rankcover .hp2-coverph {
    max-width: 60px;
  }
  .hp2-rankstats {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 2px;
  }
  .hp2-rankinfo h3 {
    font-size: 16px;
  }
  .hp2-rankrow.is-hero .hp2-rankinfo h3 {
    font-size: 19px;
  }
}

/* ── Featured Authors / Publishers: tighter editorial grid ── */
.hp2-section .people-grid {
  gap: 22px;
}
.person-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 20px;
  box-shadow: none;
}
@media (max-width: 520px) {
  .people-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .person-card {
    padding: 14px;
  }
}


/* ============================================================
   iBD Rating — Footer hidden on mobile + scroll-to-top button
   ============================================================ */

/* Hide footer on mobile (bottom nav remains) */
@media (max-width: 800px) {
  .footer {
    display: none !important;
  }
}

/* Scroll-to-top button (desktop + mobile) */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #3a3a3a;
  background: var(--black);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .25s ease, transform .25s ease;
}
.scroll-top:hover {
  background: var(--gold);
  color: #111;
  border-color: var(--gold);
}
.scroll-top svg {
  width: 20px;
  height: 20px;
}
.scroll-top[hidden] {
  display: none;
}

/* Mobile: sit above the bottom navigation */
@media (max-width: 800px) {
  .scroll-top {
    right: 16px;
    bottom: 74px;
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   iBD Rating — CMS pages & contact premium redesign (appended)
   ============================================================ */

/* ── CMS page: editorial reading layout ── */
.cms-page {
  padding: 8px 0 88px;
}
.cms-container {
  max-width: 860px;
}
.cms-head {
  margin: 22px 0 0;
}
.cms-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--black);
}
.cms-lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  margin: 14px 0 0;
  max-width: 62ch;
}
.cms-rule {
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  margin: 22px 0 0;
}
.cms-updated {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 0;
}

.cms-body {
  font-size: 16px;
  line-height: 1.78;
  color: #2a2a28;
  margin-top: 8px;
}
.cms-body h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  margin: 42px 0 14px;
  color: var(--black);
}
.cms-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  margin: 28px 0 10px;
  color: var(--black);
}
.cms-body p {
  margin: 0 0 16px;
}
.cms-body ul,
.cms-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.cms-body li {
  margin: 6px 0;
}
.cms-body a {
  color: var(--gold);
  text-decoration: underline;
}
.cms-body blockquote {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 26px 0;
}
.cms-body img {
  border-radius: 6px;
  margin: 16px 0;
  height: auto;
}
.cms-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.cms-body th,
.cms-body td {
  border: 1px solid var(--line);
  padding: 9px 13px;
  text-align: left;
}
.cms-body th {
  background: #f6f4ee;
  font-family: var(--serif);
}

@media (max-width: 800px) {
  .cms-body {
    font-size: 15px;
  }
  .cms-body h2 {
    font-size: 22px;
    margin-top: 32px;
  }
  .cms-head h1 {
    font-size: 30px;
  }
}

/* ── Contact page: professional two-column ── */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 52px;
  max-width: 1120px;
  padding: 28px 0 88px;
}
.contact-aside h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.12;
  margin: 0 0 14px;
  color: var(--black);
}
.contact-aside .cms-lead {
  margin-bottom: 26px;
}
.contact-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff;
}
.contact-panel h4 {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.contact-panel p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 6px;
}
.contact-panel strong {
  font-size: 14px;
  color: var(--gold);
  font-weight: 600;
}
.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
}
.contact-form .field {
  margin-bottom: 16px;
}
.contact-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--black);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--black);
  background: #fbfaf7;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
  background: #fff;
}
.contact-submit {
  background: var(--black);
  color: #fff;
  border: 0;
  padding: 13px 30px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.contact-submit:hover {
  background: var(--gold);
  color: #111;
}
.contact-lfs {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.contact-lfs h3 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--black);
}
.contact-lfs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.contact-lfs-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  background: #fff;
}
.contact-lfs-item h4 {
  font-family: var(--serif);
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--black);
}
.contact-lfs-item p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 800px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 0 64px;
  }
  .contact-lfs-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   iBD Rating — FAQ page (accordion + search + categories)
   ============================================================ */

.faq-search {
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 16px;
  font-size: 14px;
  background: #fff;
  margin: 22px 0 14px;
}
.faq-search:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.faq-cat {
  font-size: 12px;
  letter-spacing: .04em;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.faq-cat:hover {
  color: var(--black);
  border-color: var(--gold);
}
.faq-cat.is-active {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--black);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--gold);
}
.faq-chev {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.faq-chev::before,
.faq-chev::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--black);
  transform: translate(-50%, -50%);
}
.faq-chev::before {
  width: 10px;
  height: 1.5px;
}
.faq-chev::after {
  width: 1.5px;
  height: 10px;
  transition: opacity .2s ease;
}
.faq-item[open] .faq-chev {
  border-color: var(--gold);
  background: var(--gold);
}
.faq-item[open] .faq-chev::after {
  opacity: 0;
}
.faq-item[open] .faq-chev::before {
  background: #111;
}
.faq-answer {
  padding: 0 2px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #3a3a37;
  max-width: 70ch;
}
.faq-empty {
  padding: 22px 0;
  color: var(--muted);
  font-size: 14px;
}


/* ============================================================
   iBD Rating — CMS page sticky TOC (appended)
   ============================================================ */

.cms-container {
  max-width: 1120px;
}
.cms-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.cms-main {
  min-width: 0;
}

.cms-toc {
  position: sticky;
  top: 92px;
}
.cms-toc-toggle {
  display: none;
}
.cms-toc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}
.cms-toc-nav a {
  display: block;
  padding: 6px 0 6px 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.cms-toc-nav a:hover {
  color: var(--black);
  border-left-color: var(--gold);
}
.cms-toc-nav li.is-sub a {
  font-size: 12px;
  padding-left: 30px;
  color: #8a8880;
}

.cms-toc-chev::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform .2s ease;
}

@media (max-width: 900px) {
  .cms-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cms-toc {
    position: static;
    margin-bottom: 22px;
  }
  .cms-toc-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--black);
  }
  .cms-toc-nav {
    display: none;
  }
  .cms-toc-nav.is-open {
    display: block;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    background: #fff;
  }
  .cms-toc-nav.is-open ul {
    border-left: 0;
  }
}

/* CMS featured image */
.cms-featured {
  margin: 22px 0 8px;
}
.cms-featured img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
}
/* ============================================================
   iBD Rating — Language selector (appended)
   ============================================================ */
.lang-switch {
  position: relative;
}
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ccc;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 0;
}
.lang-switch summary::-webkit-details-marker {
  display: none;
}
.lang-switch .lang-globe {
  font-size: 15px;
  line-height: 1;
}
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  min-width: 190px;
  max-height: 340px;
  overflow-y: auto;
  z-index: 300;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.lang-menu a {
  display: block;
  padding: 8px 16px;
  color: #ccc;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.lang-menu a:hover {
  color: var(--gold);
  background: rgba(217, 165, 42, .08);
}
.mdrawer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #2a2a2a;
}
.mdrawer-langs a {
  font-size: 12px;
  color: #ccc;
  border: 1px solid #333;
  border-radius: 99px;
  padding: 4px 10px;
  text-decoration: none;
}


/* ── Issue #2 Fix: 10-star rating mobile overflow ─────────────────────────
   On narrow screens, ensure both halves of the 10-star rating always show.
   Prevent any overflow clipping that could hide the second 5 stars.         */
.stars {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible !important;
  vertical-align: middle;
}
.stars-half {
  display: inline;
  white-space: nowrap;
}
/* Bookrating container: allow the stars + score to wrap to next line on
   very narrow screens (320px) but never clip the stars row itself.         */
.bookrating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  overflow: visible;
}
.bookrating .stars {
  flex-shrink: 0;
}
@media (max-width: 360px) {
  .bookrating .stars { font-size: 11px; letter-spacing: 0.5px; }
}


/* ── Issue #7 & #8 Fix: Publisher CTA + Social mobile visibility ────────── */
/* Ensure Publisher CTA button is always visible and tappable on mobile      */
.btn.gold {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  /* Publisher CTA: stack columns vertically on small screens */
  .section [style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    text-align: center !important;
  }
  .section [style*="flex-direction:column;gap:12px"] {
    min-width: 100% !important;
  }
}

/* Ensure footer social section is always visible on mobile */
.footerbrand .social {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 480px) {
  .footerbrand .social {
    justify-content: flex-start;
    gap: 8px;
  }
  .social-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
  }
}