/* Desktop adjustments for the supplied Edge review screenshots. */
@media (min-width: 768px) {
  /* The lettering is artwork with transparent side padding. Move its visible
     strokes clear of the portrait while reducing the artwork by 5%. */
  .hero-title {
    left: 56%;
    width: 43.7%;
  }

  /* Keep the chapter menu scrollable in Edge without the internal bar. */
  .menu-dialog {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .menu-dialog::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

@media (min-width: 1500px) {
  .hero-title {
    left: 55%;
    width: 38%;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .hero-title {
    left: 53%;
    width: 42%;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .management-story {
    display: flex;
    flex-direction: column;
    gap: clamp(250px, 40vh, 370px);
    padding-bottom: 0;
  }

  /* A shared lower boundary gives all three sticky cards time to overlap.
     The negative margin cancels the flex gap before this spacer. */
  .management-story::after {
    content: "";
    display: block;
    flex: none;
    height: clamp(300px, 43vh, 390px);
    margin-top: calc(-1 * clamp(250px, 40vh, 370px));
  }

  .management-card,
  .management-card:nth-child(2),
  .management-card:nth-child(3) {
    top: clamp(82px, 13vh, 128px);
    flex: none;
    margin: 0;
  }

  .management-card:nth-child(2) { transform: translateY(72px); }
  .management-card:nth-child(3) { transform: translateY(144px); }

  .management-card-inner {
    justify-content: flex-start;
    padding: 27px clamp(34px, 5vw, 62px) 40px;
  }

  .management-content > .management-photo { margin-top: 230px; }
}