/* Editorial pages only. Explicit grid areas prevent promotions replacing the sidebar. */
.artwrap.article-layout {
  width: calc(100% - 56px);
  max-width: 1440px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  grid-template-areas: "article related" "community community";
  gap: 28px 24px;
  align-items: stretch;
}
.article-layout > .paper { grid-area: article; min-width: 0; margin: 0; }
.article-layout > .article-related { grid-area: related; min-width: 0; margin: 0; }
.article-layout > .article-community {
  grid-area: community;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.article-layout .article-related .artside-in {
  position: sticky;
  top: 88px;
  padding: 22px 18px 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: visible;
  max-height: none;
}
.article-related .ar-eyebrow {
  margin: 0 0 8px;
  color: var(--moss);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: .12em;
}
.article-related h2 {
  display: block;
  margin: 0 0 16px;
  font: 550 18px/1.4 var(--font-display);
  letter-spacing: -.03em;
  color: var(--sand);
}
.article-related h2 > .seci, .article-related h2::before { display: none; }
.article-related .ar-list { list-style: none; margin: 0; padding: 0; }
.article-related .ar-list > li { margin: 0; padding: 0; }
.article-related .ar-list > li + li { border-top: 1px solid var(--line); }
.article-related .ar-link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  color: var(--sand);
  text-decoration: none;
}
.article-related .ar-link img, .article-related .ar-placeholder {
  display: block;
  width: 64px;
  height: 64px;
  margin-top: 2px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--cave);
}
.article-related .ar-placeholder { display: grid; place-items: center; color: var(--moss); }
.article-related .ar-text { min-width: 0; }
.article-related .ar-label {
  display: block;
  margin: 0 0 5px;
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.4;
}
.article-related .ar-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.article-related .ar-link:hover strong { color: var(--moss); }
.article-related .ar-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--moss);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.article-related .ar-all:hover { border-color: var(--moss); }
.article-related a:focus-visible { outline: 3px solid var(--moss); outline-offset: 4px; }
.article-layout ~ .artmore { width: calc(100% - 56px); max-width: 1440px; }
/* A tall panel must scroll with the document, not trap its last link. */
@media (max-height: 900px) {
  .article-layout .article-related .artside-in { position: static; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .artwrap.article-layout { grid-template-columns: minmax(0, 1fr) 292px; gap: 24px 20px; }
  .article-layout .article-related .artside-in { padding: 20px 16px 16px; }
  .article-related .ar-link { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .article-related .ar-link img, .article-related .ar-placeholder { width: 56px; height: 56px; }
}
@media (max-width: 1000px) {
  .artwrap.article-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "article" "community" "related";
    gap: 26px;
  }
  .article-layout .article-related .artside-in { position: static; padding: 24px; }
  .article-related .ar-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .article-related .ar-list > li + li { border-top: 0; }
  .article-related .ar-link { border-top: 1px solid var(--line); height: 100%; }
}
@media (max-width: 600px) {
  .artwrap.article-layout, .article-layout ~ .artmore { width: calc(100% - 28px); }
  .artwrap.article-layout { margin-top: 20px; gap: 22px; }
  .article-layout .article-related .artside-in { padding: 22px 20px 18px; }
  .article-related .ar-list { grid-template-columns: minmax(0, 1fr); }
  .article-related h2 { font-size: 18px; }
  .article-related .ar-link { padding: 14px 0; }
}
@media (max-width: 360px) {
  .artwrap.article-layout, .article-layout ~ .artmore { width: calc(100% - 20px); }
  .article-layout .article-related .artside-in { padding: 20px 16px 16px; }
}