/* ================================================================
   Casa Lujuria — CONTENT-PAGE poster layer (reviews/listicles/…)
   Same DNA as the homepage, deliberately dialed DOWN for long-form
   reading: Anton on the title + section headers, but sized so a
   1,500-word review never becomes a wall of caps bricks.
   Loaded after poster.css/revamp.css, so it wins on content pages.
   ================================================================ */

/* page title — impactful, not hero-sized */
.page .narrow h1 {
  font-family: var(--anton) !important; text-transform: uppercase; font-weight: 400;
  font-size: clamp(34px, 5.2vw, 64px) !important; line-height: 0.95 !important;
  letter-spacing: -0.02em; margin-bottom: 0.5rem;
}

/* section headers — Anton but RESTRAINED, with a colored kicker bar */
.page .narrow h2 {
  font-family: var(--anton) !important; text-transform: uppercase; font-weight: 400;
  font-size: clamp(23px, 3.2vw, 36px) !important; line-height: 1.02 !important;
  letter-spacing: -0.01em; margin-top: 2.6rem; position: relative;
}
.page .narrow h2::before {
  content: ""; display: block; width: 42px; height: 4px; border-radius: 99px; margin-bottom: 0.75rem;
  background: linear-gradient(90deg, var(--rouge, #e5223f), var(--gold, #f2b233));
}
/* sub-subheads stay readable sans */
.page .narrow h3 {
  font-family: "Inter Tight", system-ui, sans-serif !important; text-transform: none;
  font-weight: 800; font-size: 1.14rem; letter-spacing: -0.01em;
}
/* keep the FAQ h3 questions readable too */
.page .narrow .faq h3 { font-size: 1.06rem; }

/* opening lede a touch larger, capped line length for scannability */
.page .narrow p { max-width: 68ch; }
.page .narrow > .reveal .lede, .page .narrow .hero-lede { font-size: 1.12rem; }

/* verdict score becomes a poster numeral */
.ls-verdict .big-score {
  font-family: var(--anton) !important; font-size: clamp(46px, 7.5vw, 84px) !important; line-height: 0.8;
  color: transparent !important; background: linear-gradient(160deg, var(--gold, #f2b233), var(--rouge, #e5223f));
  -webkit-background-clip: text; background-clip: text;
}
.ls-verdict .big-score small { -webkit-text-fill-color: rgba(246,239,226,.5); }

/* pros/cons: brighter, scannable */
.ls-proscons .pros p, .ls-proscons .cons p { font-size: 0.76rem; letter-spacing: 0.1em; }
.ls-proscons li { font-size: 0.96rem; }

/* contained hook-band interrupt inside a review (colorful breather) */
.page .narrow .lq-hook { border-radius: 22px; margin: 2.2rem 0; padding: clamp(30px,5vw,52px) clamp(22px,4vw,44px); }
.page .narrow .lq-hook-text { font-size: clamp(26px, 4.2vw, 46px); }
.page .narrow .lq-hook::after { font-size: clamp(80px, 22vw, 190px); }

/* ---- carded body sections: turn the text wall into colored blocks ---- */
.page .narrow .rev-sec {
  position: relative; margin: 1.5rem 0; padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3vw, 34px);
  border-radius: 18px; border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--ac, #e5223f);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  /* soft colored glow bleeding from the accent edge — no color-mix, degrades cleanly */
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 30px 0 55px -34px var(--ac, #e5223f);
}
.page .narrow .rev-sec > h2 { margin-top: 0 !important; color: var(--ac, #e5223f) !important; }
.page .narrow .rev-sec > h2::before { background: var(--ac, #e5223f) !important; width: 52px; }
.page .narrow .rev-sec p:last-child { margin-bottom: 0; }

/* ---- FAQ: light carded Q&A with rotating accents (no more dry tail) ---- */
.page .narrow .faq > div {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08); border-left: 4px solid var(--rouge, #e5223f);
  border-radius: 14px; padding: 16px 20px; margin: 0.7rem 0;
}
.page .narrow .faq > div:nth-of-type(3n)   { border-left-color: var(--gold, #f2b233); }
.page .narrow .faq > div:nth-of-type(3n+1) { border-left-color: #2f6bff; }
.page .narrow .faq > div h3 { margin: 0 0 0.35rem; }
.page .narrow .faq > div p { margin: 0; }

@media (max-width: 640px) {
  .page .narrow h1 { font-size: clamp(30px, 8.4vw, 46px) !important; }
  .page .narrow h2 { font-size: clamp(22px, 6.2vw, 30px) !important; }
  .page .narrow .lq-hook-text { font-size: clamp(22px, 6vw, 32px); }
  .page .narrow .rev-sec { padding: 18px 20px; }
  .page .narrow .faq > div { padding: 14px 16px; }
}