/* ==============================================================
   RADHESHYAM — "ABOUT" PAGE HERO SECTION STYLES
   --------------------------------------------------------------
   Every class starts with "rshq9d-" on purpose — a unique prefix
   made up just for this section, so it cannot clash with any
   other CSS already on your site (including the old broken hero
   styles, if any leftover ones remain).
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@400;500;600&display=swap');

.rshq9d-hero {
  --rshq9d-cream: #F3E9D8;
  --rshq9d-cream-soft: rgba(243, 233, 216, 0.72);
  --rshq9d-gold: #C9A24E;
  --rshq9d-dark: #0E0A06;

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--rshq9d-dark);
  padding: 120px 24px 100px;
  text-align: center;
  isolation: isolate;
}

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

/* ---- Background photo + darkening layers ---- */
.rshq9d-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rshq9d-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(85%);
}

.rshq9d-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14,10,6,0.75) 0%, rgba(14,10,6,0.55) 45%, rgba(14,10,6,0.92) 100%);
}

.rshq9d-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(14,10,6,0.65) 100%);
}

/* ---- Scroll hint at the top ---- */
.rshq9d-scrollhint {
  position: relative;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rshq9d-gold);
  margin: 0 0 clamp(40px, 8vw, 90px);
  opacity: 0;
  animation: rshq9d-fade-down 1s ease forwards 0.2s;
}

/* ---- Main content block ---- */
.rshq9d-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.rshq9d-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rshq9d-gold);
  margin: 0 0 22px;
  opacity: 0;
  animation: rshq9d-fade-up 0.9s ease forwards 0.4s;
}

.rshq9d-eyebrow span {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--rshq9d-gold);
  opacity: 0.7;
}

.rshq9d-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height: 1.16;
  color: var(--rshq9d-cream);
  margin: 0 0 28px;
  opacity: 0;
  animation: rshq9d-fade-up 0.9s ease forwards 0.55s;
}

.rshq9d-quote-hi {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  color: var(--rshq9d-gold);
  margin: 0 0 26px;
  opacity: 0;
  animation: rshq9d-fade-up 0.9s ease forwards 0.7s;
}

.rshq9d-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--rshq9d-cream-soft);
  max-width: 58ch;
  margin: 0 auto 44px;
  opacity: 0;
  animation: rshq9d-fade-up 0.9s ease forwards 0.85s;
}

.rshq9d-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rshq9d-dark);
  background: linear-gradient(120deg, var(--rshq9d-gold), #E4C578);
  padding: 16px 32px;
  border-radius: 3px;
  box-shadow: 0 16px 30px -14px rgba(201, 162, 78, 0.55);
  opacity: 0;
  animation: rshq9d-fade-up 0.9s ease forwards 1s;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rshq9d-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.rshq9d-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -14px rgba(201, 162, 78, 0.65);
}

.rshq9d-cta:hover svg {
  transform: translateY(3px);
}

.rshq9d-cta:focus-visible {
  outline: 2px solid var(--rshq9d-gold);
  outline-offset: 3px;
}

/* ---- Wavy bottom divider, blends into the About content section ---- */
.rshq9d-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 9vw, 110px);
  z-index: 3;
}

.rshq9d-wave path {
  fill: #F8F2E7; /* must match the background colour of the section right below (about-section.css --rsauX7-bg) */
}

/* ---- Entrance animations ---- */
@keyframes rshq9d-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rshq9d-fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rshq9d-scrollhint,
  .rshq9d-eyebrow,
  .rshq9d-heading,
  .rshq9d-quote-hi,
  .rshq9d-desc,
  .rshq9d-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .rshq9d-hero {
    min-height: 100svh;
    padding: 100px 20px 80px;
  }
  .rshq9d-scrollhint {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    margin-bottom: 48px;
  }
  .rshq9d-desc { font-size: 0.94rem; }
}


/*First End Rishabh*/

/* ==============================================================
   RADHESHYAM — "ABOUT" CONTENT SECTION STYLES
   --------------------------------------------------------------
   Every single class in this file starts with "rsauX7-" on
   purpose. That prefix was made up specifically for this
   section so it will NOT clash with any class already used
   elsewhere on your website (Home, Books, Genres, etc).

   You can paste this file's content into a new file called
   about-section.css, or paste it at the very BOTTOM of your
   site's main CSS file — either works.
   ============================================================== */

/* ---- Fonts (add these two lines in your <head> instead if you
   already load fonts elsewhere — see FONTS.txt for the tags) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=Jost:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

/* ---------------------------------------------------------------
   0. Design tokens (colours, spacing) — scoped to this section
      only, so nothing else on the page is affected.
   --------------------------------------------------------------- */
.rsauX7-about {
  --rsauX7-bg: #F8F2E7;
  --rsauX7-bg-soft: #F0E6D2;
  --rsauX7-paper: #F1E8D5;
  --rsauX7-ink: #34241A;
  --rsauX7-ink-soft: #6E5A46;
  --rsauX7-brass: #A9803D;
  --rsauX7-brass-light: #C9A24E;
  --rsauX7-maroon: #7C2A2A;
  --rsauX7-line: rgba(52, 36, 26, 0.16);
  --rsauX7-shadow: rgba(52, 36, 26, 0.18);

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201, 162, 78, 0.10), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(124, 42, 42, 0.06), transparent 50%),
    var(--rsauX7-bg);
  color: var(--rsauX7-ink);
  padding: clamp(64px, 9vw, 132px) clamp(20px, 5vw, 64px);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

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

.rsauX7-about em {
  font-style: italic;
  color: var(--rsauX7-brass);
}

/* faint paper-grain texture, done in pure CSS (no extra image needed) */
.rsauX7-about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(52,36,26,0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(52,36,26,0.015) 0 1px, transparent 1px 3px);
}

.rsauX7-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---------------------------------------------------------------
   1. LEFT: author portrait
   --------------------------------------------------------------- */
.rsauX7-portrait {
  position: sticky;
  top: 120px; /* keep this taller than your site's nav bar height, so the portrait doesn't hide underneath it */
  align-self: start;
  max-width: 420px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.rsauX7-portrait.rsauX7-in-view {
  opacity: 1;
  transform: translateY(0);
}

.rsauX7-portrait-top {
  position: relative;
}

.rsauX7-portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--rsauX7-paper);
  padding: 14px;
  border: 1px solid var(--rsauX7-line);
  border-radius: 3px;
  box-shadow: 0 24px 48px -18px var(--rsauX7-shadow), 0 2px 10px rgba(52,36,26,0.10);
}

.rsauX7-portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 1px;
  filter: sepia(6%) saturate(102%);
}

/* small gold corner flourishes on the frame */
.rsauX7-portrait-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--rsauX7-brass);
  opacity: 0.85;
}

.rsauX7-portrait-corner--tl {
  top: -6px;
  left: -6px;
  border-right: none;
  border-bottom: none;
}

.rsauX7-portrait-corner--br {
  bottom: -6px;
  right: -6px;
  border-left: none;
  border-top: none;
}

/* nameplate tag overlapping the bottom-left of the frame */
.rsauX7-portrait-tag {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 88%;
  margin: -26px 0 0 24px;
  background: var(--rsauX7-ink);
  padding: 12px 22px;
  border-radius: 2px;
  box-shadow: 0 12px 24px -12px var(--rsauX7-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rsauX7-portrait-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--rsauX7-brass-light);
}

.rsauX7-portrait-role {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--rsauX7-paper);
  opacity: 0.85;
}

.rsauX7-caption {
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: var(--rsauX7-ink-soft);
  margin: 18px 0 0 24px;
}

.rsauX7-inkblot {
  position: absolute;
  width: 130px;
  height: 130px;
  right: -40px;
  bottom: -50px;
  color: var(--rsauX7-brass);
  opacity: 0.12;
  z-index: 0;
}

.rsauX7-inkblot svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------
   2. RIGHT: written content
   --------------------------------------------------------------- */
.rsauX7-content {
  padding-top: 4px;
}

.rsauX7-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rsauX7-brass);
  margin: 0 0 20px;
}

.rsauX7-eyebrow span {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rsauX7-brass);
  opacity: 0.6;
}

.rsauX7-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.14;
  margin: 0 0 24px;
  color: var(--rsauX7-ink);
}

.rsauX7-intro {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--rsauX7-ink-soft);
  max-width: 56ch;
  margin: 0 0 36px;
}

/* ---- Signature element: torn journal-page pull quote ---- */
.rsauX7-quotecard {
  position: relative;
  background: var(--rsauX7-paper);
  border: 1px solid var(--rsauX7-line);
  border-left: 3px solid var(--rsauX7-brass);
  padding: 34px clamp(24px, 4vw, 44px) 30px;
  margin: 0 0 40px;
  max-width: 640px;
  box-shadow: 0 16px 30px -18px var(--rsauX7-shadow);
  clip-path: polygon(
    0% 2%, 4% 0%, 12% 1.5%, 20% 0%, 30% 1.2%, 40% 0%, 52% 1.5%,
    64% 0%, 76% 1.2%, 88% 0%, 100% 1.6%, 100% 100%, 0% 100%
  );
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rsauX7-quotecard.rsauX7-in-view {
  opacity: 1;
  transform: translateY(0);
}

.rsauX7-seal {
  position: absolute;
  top: -22px;
  right: 28px;
  width: 52px;
  height: 52px;
  color: var(--rsauX7-maroon);
  background: var(--rsauX7-bg);
  border-radius: 50%;
  padding: 4px;
}

.rsauX7-seal svg { width: 100%; height: 100%; }

.rsauX7-quote-hi {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--rsauX7-ink);
}

.rsauX7-quote-en {
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--rsauX7-ink-soft);
  margin: 0;
}

/* ---- Stats row ---- */
.rsauX7-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  padding: 24px 0 36px;
  border-top: 1px solid var(--rsauX7-line);
  border-bottom: 1px solid var(--rsauX7-line);
  margin: 0 0 44px;
}

.rsauX7-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 120px;
}

.rsauX7-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--rsauX7-brass);
  line-height: 1;
}

.rsauX7-stat-plus {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--rsauX7-brass);
}

.rsauX7-stat-label {
  flex-basis: 100%;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rsauX7-ink-soft);
}

/* ---- Chronological journey ---- */
.rsauX7-timeline {
  position: relative;
  display: grid;
  gap: 30px;
  margin: 0 0 48px;
  padding-left: 26px;
  border-left: 1px solid var(--rsauX7-line);
}

.rsauX7-chapter {
  position: relative;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rsauX7-chapter.rsauX7-in-view {
  opacity: 1;
  transform: translateX(0);
}

.rsauX7-chapter::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rsauX7-brass-light);
  box-shadow: 0 0 0 4px var(--rsauX7-bg);
}

/* the clickable header row */
.rsauX7-chapter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.rsauX7-chapter-toggle:focus-visible {
  outline: 2px solid var(--rsauX7-maroon);
  outline-offset: 4px;
}

.rsauX7-chapter-heading {
  display: block;
}

.rsauX7-chapter-no {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rsauX7-brass);
  margin-bottom: 6px;
}

.rsauX7-chapter-title {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--rsauX7-ink);
}

/* +/- icon that rotates into an "x" when open */
.rsauX7-chapter-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--rsauX7-brass);
  transition: transform 0.35s ease;
}

.rsauX7-chapter-toggle[aria-expanded="true"] .rsauX7-chapter-icon {
  transform: rotate(135deg);
}

/* collapsible body — animates via grid-template-rows, no JS height math needed */
.rsauX7-chapter-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.rsauX7-chapter--open .rsauX7-chapter-body {
  grid-template-rows: 1fr;
}

.rsauX7-chapter-inner {
  overflow: hidden;
}

.rsauX7-chapter-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--rsauX7-ink-soft);
  max-width: 56ch;
  margin: 10px 0 4px;
}

/* ---- CTA button ---- */
.rsauX7-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rsauX7-bg);
  background: linear-gradient(120deg, var(--rsauX7-brass), var(--rsauX7-brass-light));
  padding: 16px 30px;
  border-radius: 3px;
  box-shadow: 0 14px 26px -12px rgba(169, 128, 61, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rsauX7-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.rsauX7-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(169, 128, 61, 0.65);
}

.rsauX7-cta:hover svg {
  transform: translateX(4px);
}

.rsauX7-cta:focus-visible,
.rsauX7-about a:focus-visible {
  outline: 2px solid var(--rsauX7-maroon);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   3. Responsive breakpoints
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .rsauX7-container {
    grid-template-columns: 1fr;
  }
  .rsauX7-portrait {
    position: static;
    max-width: 340px;
    margin: 0 auto 64px;
  }
  .rsauX7-intro,
  .rsauX7-chapter-text {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .rsauX7-about {
    padding: 56px 18px;
  }
  .rsauX7-caption { font-size: 1.2rem; }
  .rsauX7-stats { gap: 24px; }
  .rsauX7-quotecard { padding: 30px 20px 26px; }
  .rsauX7-timeline { padding-left: 20px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rsauX7-collage,
  .rsauX7-quotecard,
  .rsauX7-chapter,
  .rsauX7-photo,
  .rsauX7-cta,
  .rsauX7-cta svg {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Second End Rishabh */

/* ==============================================================
   ZQF82P — "FROM THE WRITER'S DESK" SIDEBAR PANEL
   --------------------------------------------------------------
   Fills the empty space that used to sit below the sticky author
   photo while the reader scrolls through the chapters on the
   right. Lives inside .rsauX7-portrait, so it shares its sticky
   behaviour and scoped colour tokens automatically.
   Unique "zqf82p-" prefix — will not clash with anything else.
   ============================================================== */

.zqf82p-desk {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rsauX7-line);
}

.zqf82p-kicker {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rsauX7-brass);
  margin: 0 0 18px;
}

.zqf82p-snaps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}

.zqf82p-snap {
  margin: 0;
}

.zqf82p-snap img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--rsauX7-line);
  filter: sepia(6%) saturate(102%);
  transition: transform 0.4s ease;
}

.zqf82p-snap:hover img {
  transform: scale(1.04);
}

.zqf82p-snap figcaption {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--rsauX7-ink-soft);
  margin-top: 6px;
}

.zqf82p-note {
  font-family: 'Caveat', cursive;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--rsauX7-ink-soft);
  margin: 0 0 26px;
}

.zqf82p-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.zqf82p-social-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rsauX7-ink-soft);
}

.zqf82p-social-links {
  display: flex;
  gap: 10px;
}

.zqf82p-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rsauX7-line);
  color: var(--rsauX7-brass);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.zqf82p-social-link svg {
  width: 16px;
  height: 16px;
}

.zqf82p-social-link:hover {
  background: var(--rsauX7-brass);
  border-color: var(--rsauX7-brass);
  color: var(--rsauX7-bg);
  transform: translateY(-2px);
}

.zqf82p-social-link:focus-visible {
  outline: 2px solid var(--rsauX7-maroon);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .zqf82p-desk {
    margin-top: 32px;
    padding-top: 26px;
  }
}

@media (max-width: 420px) {
  .zqf82p-snaps {
    gap: 8px;
  }
  .zqf82p-snap figcaption {
    display: none; /* keep the strip tidy on very small phones */
  }
}

/* ==============================================================
   TLK29R — READER TESTIMONIALS SECTION
   --------------------------------------------------------------
   Sits directly below the About section. Standalone tokens so it
   does not depend on .rsauX7-about being a parent.
   Unique "tlk29r-" prefix — will not clash with anything else.
   ============================================================== */

.tlk29r-testimonials {
  --tlk29r-bg: #F3EAD9;
  --tlk29r-paper: #FBF6EC;
  --tlk29r-ink: #34241A;
  --tlk29r-ink-soft: #6E5A46;
  --tlk29r-brass: #A9803D;
  --tlk29r-brass-light: #C9A24E;
  --tlk29r-line: rgba(52, 36, 26, 0.14);
  --tlk29r-shadow: rgba(52, 36, 26, 0.16);

  position: relative;
  background: var(--tlk29r-bg);
  color: var(--tlk29r-ink);
  padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 64px);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

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

.tlk29r-testimonials em {
  font-style: italic;
  color: var(--tlk29r-brass);
}

.tlk29r-container {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

.tlk29r-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tlk29r-brass);
  margin: 0 0 18px;
}

.tlk29r-eyebrow span {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--tlk29r-brass);
  opacity: 0.6;
}

.tlk29r-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  margin: 0 0 clamp(36px, 6vw, 64px);
}

.tlk29r-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: left;
}

.tlk29r-card {
  display: flex;
  flex-direction: column;
  background: var(--tlk29r-paper);
  border: 1px solid var(--tlk29r-line);
  border-radius: 6px;
  padding: 28px 24px;
  box-shadow: 0 18px 34px -22px var(--tlk29r-shadow);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.tlk29r-card.tlk29r-in-view {
  opacity: 1;
  transform: translateY(0);
}

.tlk29r-stars {
  color: var(--tlk29r-brass-light);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.tlk29r-quote {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--tlk29r-ink-soft);
  margin: 0 0 22px;
  flex-grow: 1;
}

.tlk29r-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--tlk29r-line);
}

.tlk29r-person img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--tlk29r-line);
}

.tlk29r-person-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tlk29r-name {
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tlk29r-ink);
}

.tlk29r-city {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: var(--tlk29r-ink-soft);
}

@media (max-width: 1080px) {
  .tlk29r-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .tlk29r-testimonials { padding: 48px 18px; }
  .tlk29r-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tlk29r-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==============================================================
   MVH63X — "JOIN READER'S CIRCLE" POPUP FORM + THANK-YOU POPUP
   --------------------------------------------------------------
   Hidden by default (.mvh63x-overlay has no "is open" class).
   JS toggles the "mvh63x-open" class on the overlay to show it,
   and swaps which inner modal is visible.
   Unique "mvh63x-" prefix — will not clash with anything else.
   ============================================================== */

.mvh63x-overlay {
  --mvh63x-bg: #FBF6EC;
  --mvh63x-ink: #34241A;
  --mvh63x-ink-soft: #6E5A46;
  --mvh63x-brass: #A9803D;
  --mvh63x-brass-light: #C9A24E;
  --mvh63x-maroon: #7C2A2A;
  --mvh63x-line: rgba(52, 36, 26, 0.16);
  --mvh63x-error: #A5342C;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 10, 6, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

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

.mvh63x-overlay.mvh63x-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.mvh63x-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--mvh63x-bg);
  border-radius: 8px;
  padding: clamp(32px, 5vw, 48px) clamp(24px, 5vw, 40px) 36px;
  box-shadow: 0 40px 80px -20px rgba(14, 10, 6, 0.5);
  text-align: center;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.mvh63x-overlay.mvh63x-open .mvh63x-modal:not([hidden]) {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.mvh63x-modal[hidden] {
  display: none;
}

.mvh63x-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--mvh63x-ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}

.mvh63x-close:hover {
  background: rgba(52, 36, 26, 0.08);
  color: var(--mvh63x-ink);
}

.mvh63x-close:focus-visible {
  outline: 2px solid var(--mvh63x-maroon);
  outline-offset: 2px;
}

.mvh63x-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mvh63x-brass);
  margin: 0 0 10px;
}

.mvh63x-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  color: var(--mvh63x-ink);
  margin: 0 0 12px;
  line-height: 1.3;
}

.mvh63x-sub {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--mvh63x-ink-soft);
  max-width: 36ch;
  margin: 0 auto 28px;
}

/* ---- form ---- */
.mvh63x-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mvh63x-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mvh63x-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mvh63x-field label {
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mvh63x-ink-soft);
}

.mvh63x-field input {
  width: 100%;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.96rem;
  color: var(--mvh63x-ink);
  background: #fff;
  border: 1px solid var(--mvh63x-line);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mvh63x-field input::placeholder {
  color: rgba(110, 90, 70, 0.55);
}

.mvh63x-field input:focus {
  outline: none;
  border-color: var(--mvh63x-brass);
  box-shadow: 0 0 0 3px rgba(169, 128, 61, 0.15);
}

.mvh63x-field.mvh63x-invalid input {
  border-color: var(--mvh63x-error);
}

.mvh63x-error {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: var(--mvh63x-error);
  min-height: 14px;
}

.mvh63x-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mvh63x-bg);
  background: linear-gradient(120deg, var(--mvh63x-brass), var(--mvh63x-brass-light));
  border: none;
  padding: 15px 24px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 14px 26px -12px rgba(169, 128, 61, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mvh63x-submit svg {
  width: 16px;
  height: 16px;
}

.mvh63x-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(169, 128, 61, 0.65);
}

.mvh63x-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.mvh63x-submit:focus-visible {
  outline: 2px solid var(--mvh63x-maroon);
  outline-offset: 3px;
}

.mvh63x-privacy {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--mvh63x-ink-soft);
  text-align: center;
  margin: 4px 0 0;
}

/* ---- thank-you popup ---- */
.mvh63x-modal--thanks {
  padding-top: 44px;
}

.mvh63x-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 8px;
}

.mvh63x-check {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--mvh63x-brass), var(--mvh63x-brass-light));
  color: var(--mvh63x-bg);
  box-shadow: 0 14px 26px -10px rgba(169, 128, 61, 0.6);
}

.mvh63x-check svg {
  width: 28px;
  height: 28px;
}

.mvh63x-modal--thanks .mvh63x-title,
.mvh63x-modal--thanks .mvh63x-sub {
  position: relative;
  z-index: 1;
}

.mvh63x-modal--thanks .mvh63x-submit {
  position: relative;
  z-index: 1;
}

/* ---- responsive ---- */
@media (max-width: 520px) {
  .mvh63x-row {
    grid-template-columns: 1fr;
  }
  .mvh63x-modal {
    padding: 30px 20px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mvh63x-overlay,
  .mvh63x-modal {
    transition: none !important;
  }
}

/* Third End Rishabh */