/* Latest Issue Spotlight: all frontend selectors are scoped to the banner. */
.lis-spotlight {
  display: grid;
  grid-template-columns: var(--lis-image-width, 43%) minmax(0, 1fr);
  width: 100%;
  min-height: var(--lis-height, 300px);
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
  font-family: var(--lis-font-family, inherit);
}
.lis-spotlight, .lis-spotlight * { box-sizing: border-box; }
.lis-spotlight__art {
  min-height: var(--lis-height, 300px);
  background-color: #d5d5d5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.lis-spotlight__copy {
  position: relative;
  margin-left: -115px;
  min-width: 0;
  padding: 16px 24px 16px 98px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 115px 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.lis-spotlight .lis-spotlight__title {
  margin: 0 0 10px;
  padding: 0;
  width: 100%;
  border: 0;
  font-family: inherit;
  font-size: clamp(27px, 3.15vw, 60px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 900;
  color: #000;
  text-transform: uppercase;
}
.lis-spotlight__rule {
  width: calc(100% - 25px);
  border-top: 2px solid #c9c9c9;
  margin: 0 0 15px 25px;
}
.lis-spotlight .lis-spotlight__description {
  width: calc(100% - 25px);
  margin: 0 0 16px 25px;
  padding: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(14px, 1.13vw, 21px);
  line-height: 1.22;
  text-align: left;
  color: #777;
  overflow-wrap: anywhere;
  display: flow-root;
}
/* The float supplies a continuous, sloping inset on every wrapped line.
   JavaScript sizes its height to the ACTUAL number of text lines. Once the
   maximum safe indent is reached, the inset remains steady (no sudden reset).
   This works at arbitrary desktop widths and with changing theme fonts. */
.lis-spotlight__stair { display: none; }
@media (min-width: 768px) {
  .lis-spotlight .lis-spotlight__description > .lis-spotlight__stair {
    display: block;
    float: left;
    width: 104px;
    height: 3.5em; /* Matches the previous initial slope until JS measures it. */
    shape-outside: polygon(0 0, 100% 9em, 100% 100%, 0 100%);
    shape-margin: 0;
    pointer-events: none;
  }
}
.lis-spotlight .lis-spotlight__button {
  display: inline-block;
  flex: none;
  margin: 0 0 0 68px;
  padding: 7px 34px 9px;
  border: 0;
  border-radius: 0;
  background: var(--lis-accent, #68a51e);
  color: #fff;
  font-family: inherit;
  font-size: clamp(22px, 2.1vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: none;
  clip-path: polygon(0 0, 91% 0, 100% 100%, 10% 100%);
  transition: filter .15s ease;
}
.lis-spotlight .lis-spotlight__button:is(:hover, :focus-visible) {
  color: #fff;
  background: var(--lis-accent, #68a51e);
  text-decoration: none;
  filter: brightness(.88);
}
.lis-spotlight .lis-spotlight__button:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
@media (max-width: 900px) {
  .lis-spotlight__copy { padding-left: 96px; padding-right: 17px; }
  .lis-spotlight .lis-spotlight__title { font-size: clamp(24px, 3.8vw, 42px); }
}
@media (max-width: 767px) {
  .lis-spotlight { display: block; }
  .lis-spotlight__art { min-height: 220px; aspect-ratio: 16 / 9; }
  .lis-spotlight__copy {
    margin-left: 0;
    clip-path: none;
    padding: 20px 18px 26px;
    align-items: center;
  }
  .lis-spotlight .lis-spotlight__title { text-align: center; font-size: clamp(25px, 6.2vw, 40px); }
  .lis-spotlight__rule { width: 100%; margin-left: 0; }
  .lis-spotlight .lis-spotlight__description { font-size: 16px; width: 100%; margin-left: 0; text-align: center; }
  .lis-spotlight .lis-spotlight__button { font-size: 28px; margin-left: 0; }
}