/* Step 4 visual corrections: preserve the normal tile spacing and use the new Leader woodcuts. */
#learnFaction .faction-lesson-grid {
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: stretch;
}

#learnFaction .faction-lesson-grid > .intro-card {
  height: 100%;
}

/* The woodcuts are finished presentation assets. Give them enough on-screen
   size for the engraved midtones to survive normal browser resampling; do not
   apply blending, filtering, contrast, brightness, or opacity effects on
   desktop. */
#factionLesson .faction-leader-lesson {
  min-height: 360px;
  padding-right: clamp(23rem, 38vw, 28rem);
  background: var(--start-panel);
  isolation: isolate;
}

/* The old sketch pseudo-element in styles.css is intentionally disabled. */
#factionLesson .faction-leader-lesson::after {
  content: none;
}

#factionLesson .faction-leader-lesson > .leader-lesson-art {
  position: absolute;
  z-index: 0;
  right: .5rem;
  top: .5rem;
  bottom: 0;
  width: clamp(360px, 35%, 420px);
  height: calc(100% - .5rem);
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  opacity: 1;
  pointer-events: none;
  filter: none;
  mix-blend-mode: normal;
}

@media (max-width: 900px) {
  #factionLesson .faction-leader-lesson {
    min-height: 340px;
    padding-right: 19rem;
  }

  #factionLesson .faction-leader-lesson > .leader-lesson-art {
    right: .5rem;
    width: 290px;
  }
}

/* On narrow screens the art remains a subdued watermark so it does not
   compete with the Leader-specific first-game guidance. */
@media (max-width: 620px) {
  #factionLesson .faction-leader-lesson {
    min-height: 0;
    padding-right: 1.35rem;
  }

  #factionLesson .faction-leader-lesson > .leader-lesson-art {
    right: -2rem;
    top: auto;
    bottom: -1rem;
    width: 260px;
    height: auto;
    max-height: calc(100% + 1rem);
    opacity: .11;
  }
}