/* ================================================================
   Casa Lujuria -- CONTENT-PAGE POSTER TYPE
   Replaces the "dialed down" scale in review.css.

   The old file shrank display headings so a long review would not
   become "a wall of caps bricks." That was the wrong fix. Shrinking
   an uppercase heading does not stop it being a brick, it just makes
   it a small brick that reads as bolder body text. What stops a
   brick is scale plus tight leading plus a short line count, so the
   heading becomes a shape instead of a rectangle.

   Reference: the Casa Lujuria build runs the same font, Anton SC, at
   h1 184px / h2 108px on a 1280 viewport against 19px prose. This
   site was running h1 64px / h2 36px against 17px prose. Same font,
   one third the scale.

   Loaded AFTER review.css, guide.css, light.css and layout.css.
   ================================================================ */

/* ---------- prose first, so scale contrast is honest ---------- */
.page .narrow p,
.page .narrow li {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.72;
}
.page .narrow p { max-width: 74ch; }

/* ---- LEADING NOTE, do not tighten past this ----------------------
   Anton SC has a cap height of 0.87em and no descenders on caps. A
   line-height under ~0.93 therefore makes the capitals of line 2 sit
   ON TOP of the capitals of line 1: measured ink gap was -1.4px on
   desktop and -3px on phone, which is why a two-line headline read as
   one blended mass. Reference values of 0.82 only look right on
   headings that never wrap. Multi-line caps need lh >= 0.95.
   ------------------------------------------------------------------ */

/* ---------- H1: the poster ---------- */
.page .narrow h1 {
  font-family: var(--anton) !important;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 132px) !important;
  line-height: 0.97 !important;
  letter-spacing: -0.055em !important;
  margin: 0 0 1.1rem !important;
  text-wrap: balance;
  max-width: 20ch;
}

/* ---------- H2: section headers that actually announce ---------- */
.page .narrow h2 {
  font-family: var(--anton) !important;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(40px, 6.6vw, 92px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  margin-top: 3.4rem !important;
  margin-bottom: 1.1rem !important;
  text-wrap: balance;
  max-width: 22ch;
  position: relative;
}
/* the kicker bar grows with the type instead of staying a 42px stub */
.page .narrow h2::before {
  content: "";
  display: block;
  width: 84px;
  height: 7px;
  border-radius: 99px;
  margin-bottom: 1.1rem;
  background: linear-gradient(90deg, var(--rouge, #e5223f), var(--gold, #f2b233));
}

/* ---------- H3: stays sans on purpose, this is the counterweight ---------- */
.page .narrow h3 {
  font-family: "Inter Tight", system-ui, sans-serif !important;
  text-transform: none;
  font-weight: 800;
  font-size: clamp(19px, 1.55vw, 23px) !important;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 2rem;
}
.page .narrow .faq h3 { font-size: clamp(17px, 1.3vw, 19px) !important; margin-top: 1.4rem; }

/* the lede rides just under the poster, so it needs its own weight */
.page .narrow > .reveal .lede,
.page .narrow .hero-lede {
  font-size: clamp(20px, 1.9vw, 26px) !important;
  line-height: 1.45;
  font-weight: 600;
  max-width: 62ch;
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .page .narrow h1 { font-size: clamp(52px, 11vw, 104px) !important; }
  .page .narrow h2 { font-size: clamp(38px, 8vw, 72px) !important; margin-top: 3rem !important; }
}

/* ---------- phone: the scale has to hold here, not collapse ---------- */
@media (max-width: 640px) {
  .page .narrow h1 {
    font-size: clamp(52px, 16vw, 76px) !important;
    line-height: 0.97 !important;
    letter-spacing: -0.06em !important;
    max-width: none;
  }
  .page .narrow h2 {
    font-size: clamp(34px, 11.8vw, 58px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.05em !important;
    margin-top: 2.8rem !important;
    max-width: none;
  }
  .page .narrow h2::before { width: 66px; height: 6px; margin-bottom: 0.9rem; }
  .page .narrow p, .page .narrow li { font-size: 18px; line-height: 1.7; }
  .page .narrow > .reveal .lede, .page .narrow .hero-lede { font-size: 21px !important; }
}

@media (max-width: 400px) {
  .page .narrow h1 { font-size: clamp(48px, 16.5vw, 68px) !important; }
  .page .narrow h2 { font-size: clamp(32px, 12.2vw, 52px) !important; }
}