/* ================================================================
   Casa Lujuria — POSTER layer
   Big Anton display type + pattern-interrupt hook bands, in the warm
   gold/rouge/wine palette. Anton does the shouting; Cormorant italic
   stays as the elegant counterweight. Loaded last so it wins.
   ================================================================ */

/* self-hosted so it always renders and makes zero third-party calls */
@font-face {
  font-family: "Anton SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/css/fonts/anton-sc.woff2") format("woff2");
}
:root { --anton: "Anton SC", "Anton", Impact, "Haettenschweiler", sans-serif; }

/* ---- main display lines go BIG + Anton caps ---- */
.hero-h1 .line:not(.hero-serif),
.wrap h2,
.ls-sec-head h2,
.feat-h2,
.show-h2,
.cta-h2,
.ls-disp-line:not(.serif) {
  font-family: var(--anton) !important;
  text-transform: uppercase;
  font-weight: 400;               /* Anton is already heavy at 400 */
  letter-spacing: -0.03em;
  line-height: 0.86;
}

/* the Cormorant accent lines stay elegant + lowercase (the counterweight) */
.hero-serif, .serif, .shimmer-txt, .ls-manifesto .serif { text-transform: none !important; }

/* poster sizes */
.hero-h1 { font-size: clamp(52px, 10.5vw, 132px) !important; line-height: 0.88 !important; }
.hero-h1 .hero-serif { line-height: 0.94; padding-bottom: 0.1em; }
.wrap h2, .ls-sec-head h2, .feat-h2, .cta-h2 {
  font-size: clamp(44px, 7.4vw, 96px) !important;
  line-height: 0.86 !important;
  margin-top: 0;
}
.show-h2 { font-size: clamp(40px, 6.6vw, 88px) !important; line-height: 0.9 !important; }
.ls-disp-line { font-size: clamp(50px, 10vw, 120px) !important; line-height: 0.92 !important; }
.cta-h2 { font-size: clamp(48px, 8vw, 104px) !important; }

/* kicker labels: punchier than the old eyebrow, with a lead tick */
.eyebrow {
  font-weight: 900 !important;
  letter-spacing: 0.26em !important;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--rouge, #e5223f), var(--gold, #f2b233));
  display: inline-block;
}
.ls-sec-head .eyebrow, .feat-head .eyebrow { justify-content: center; }

/* giant poster numerals on the "how we test" steps */
.step-n {
  font-family: var(--anton) !important;
  font-size: clamp(58px, 8vw, 104px) !important;
  line-height: 0.8 !important;
  color: transparent !important;
  background: linear-gradient(160deg, var(--gold, #f2b233), var(--rouge, #e5223f));
  -webkit-background-clip: text; background-clip: text;
  opacity: 0.9;
}

/* the fan-section heading + hint feel more editorial */
.ls-fan-hint { font-weight: 700; }

/* ================================================================
   HOOK BANDS — the pattern interrupt (Casa Lujuria, warm palette)
   ================================================================ */
.lq-hook {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(52px, 8.5vw, 120px) clamp(20px, 6vw, 90px);
  margin: clamp(1.5rem, 4vw, 3rem) 0;
  background: linear-gradient(100deg, var(--rouge, #e5223f), #ff5f70 38%, var(--blush, #f6c96b) 66%, var(--gold, #f2b233));
  box-shadow: 0 30px 120px rgba(229,34,63, 0.32);
}
.lq-hook--alt {
  background: linear-gradient(100deg, var(--gold, #f2b233), #ffd677 38%, var(--blush, #f6c96b) 66%, var(--rouge, #e5223f));
}
.lq-hook::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 1px, transparent 1px 18px);
  mix-blend-mode: overlay;
}
/* giant ghosted watermark word bleeding off the edge */
.lq-hook::after {
  content: attr(data-word); position: absolute; right: -3vw; bottom: -0.16em;
  font-family: var(--anton); font-size: clamp(96px, 17vw, 280px); line-height: 1;
  color: rgba(0, 0, 0, 0.085); letter-spacing: -0.04em; text-transform: uppercase; pointer-events: none;
}
.lq-hook--alt::after { right: auto; left: -3vw; }
.lq-hook-text {
  position: relative; z-index: 1; max-width: 1100px; margin: 0 auto;
  font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(32px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.02em;
  color: #fff; text-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); text-wrap: balance;
}
.lq-hook-text small {
  display: block; margin-top: 16px; font-family: "Inter Tight", system-ui, sans-serif;
  text-transform: none; font-weight: 700; font-size: clamp(16px, 1.9vw, 23px);
  line-height: 1.4; letter-spacing: 0; color: rgba(255, 255, 255, 0.92); text-shadow: none;
}

@media (max-width: 768px) {
  .lq-hook { padding: 46px 20px; }
  .step-n { font-size: 72px !important; }
  .lq-hook-text { font-size: clamp(28px, 7.6vw, 46px); }
}
@media (max-width: 640px) {
  /* keep the big hero from running off the edge on phones */
  .hero-h1 { font-size: clamp(38px, 11vw, 62px) !important; line-height: 0.94 !important; }
  .hero-h1 .line { display: block; white-space: normal; overflow-wrap: anywhere; }
  .wrap h2, .ls-sec-head h2, .feat-h2, .show-h2, .cta-h2 { font-size: clamp(34px, 10vw, 60px) !important; }
  .ls-disp-line { font-size: clamp(38px, 12vw, 64px) !important; }
}