/* Shared article credits and related-reading interaction. */
.article-credits-wrap{margin-top:24px}
.article-credits-wrap > .travel-photo-credits.article-photo-credits{
  box-sizing:border-box;width:100%;max-width:none;margin:0;padding:18px 0;
}
.article-photo-credits summary{min-height:44px;padding:8px 0}
.article-photo-credits summary:focus-visible{outline:2px solid #426e55;outline-offset:4px}
.article-photo-credits .photo-credits-group{margin-top:20px}
.article-photo-credits .photo-credits-group h3{margin:0;color:#304d42;font:600 13px/1.8 "Noto Sans TC","Microsoft JhengHei",sans-serif}
.article-photo-credits .photo-credits-group p{margin:6px 0 10px;font:inherit;line-height:inherit}
.article-photo-credits .photo-credits-group ul{margin:0;padding-left:20px}
.article-photo-credits .photo-credits-group .travel-photo-credits{max-width:none;margin:0;padding:0;border:0}
.related[data-article-related] + .article-credits-wrap{width:min(1120px,calc(100% - 56px));margin:24px auto 0}

.related-interactive{--article-related-accent:var(--green,var(--forest,var(--sage,#276e60)))}
.related.has-related-thumbnails.related-interactive{--related-thumb-size:100px}
.related.has-related-thumbnails.related-interactive :is(.related-items,.related-list) > a.article-related-link{
  grid-template-columns:var(--related-thumb-size) minmax(0,1fr);
  min-height:126px;padding:20px 12px;border-radius:2px;
}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link{
  min-width:0;cursor:pointer;-webkit-tap-highlight-color:rgba(39,110,96,.25);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link strong{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link :is(strong,small,span){transition:color .15s ease}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:focus-visible{
  background:var(--article-related-accent);border-color:var(--article-related-accent);
  outline:3px solid var(--article-related-accent);outline-offset:4px;
}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:is(:focus-visible,:active),
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:is(:focus-visible,:active) :is(strong,small,span){color:#fff}
@media(hover:hover) and (pointer:fine){
  .related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:hover{background:var(--article-related-accent);border-color:var(--article-related-accent);color:#fff}
  .related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:hover :is(strong,small,span){color:#fff}
}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:active{
  background:#1e5449;background:color-mix(in srgb,var(--article-related-accent) 80%,#000);
  border-color:var(--article-related-accent);transition-duration:0s;
}
.related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link:active :is(strong,small,span){transition-duration:0s}
@media(max-width:1050px){.related.has-related-thumbnails.related-interactive{--related-thumb-size:86px}}
@media(max-width:680px){.related.has-related-thumbnails.related-interactive :is(.related-items,.related-list) > a.article-related-link{min-height:116px;padding:18px 12px}}
@media(max-width:680px){.related[data-article-related] + .article-credits-wrap{width:calc(100% - 38px)}}
@media(prefers-reduced-motion:reduce){
  .related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link,
  .related-interactive :is(.related-items,.related-list,.ay-related-links) > a.article-related-link :is(strong,small,span){transition:none}
}