.articles-page{ padding:clamp(28px,5vw,40px) 0 clamp(56px,9vw,88px); }

.article-grid--photo{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.article-card--photo{
  display:block;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.article-card--photo:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:0 10px 24px rgba(27,29,33,.1); }
.article-card__photo{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.article-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-card--photo .bento__body,
.article-card--photo .article-card__body{ padding:clamp(14px,3.4vw,20px) clamp(16px,3.8vw,22px) clamp(16px,3.8vw,22px); }
.article-card--photo h3{ font-size:clamp(15px,3.8vw,16.5px); margin:0 0 .5em; }
.article-card--photo .article-card__date{ margin-bottom:.7em; font-size:clamp(10.5px,2.6vw,11.5px); }
.article-card--photo p{ font-size:clamp(13px,3.2vw,14px); margin:0 0 1em; }

.article-empty{ text-align:center; padding:40px 0; color:var(--ink-soft); }

.article-detail-header{ padding:clamp(40px,7vw,52px) 0 8px; }
.article-detail-header__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:1.2em;
}
.article-detail-header h1{ font-size:clamp(26px,6.4vw,40px); max-width:760px; text-wrap:balance; }
.article-detail-header__lead{ font-size:clamp(14.5px,3.6vw,16px); max-width:680px; margin-top:.8em; }

.article-cover{
  border-radius:var(--r);
  overflow:hidden;
  margin:28px 0 8px;
  aspect-ratio:16/7;
}
.article-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.article-detail-body{ padding:clamp(24px,5vw,36px) 0 0; }
.article-detail-body__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:48px;
  align-items:start;
}
.article-prose h2{ font-size:clamp(17px,4.2vw,20px); color:var(--ink); margin:1.8em 0 .6em; scroll-margin-top:96px; }
.article-prose h2:first-child{ margin-top:0; }
.article-prose p{ font-size:clamp(14px,3.6vw,15.5px); color:var(--ink-soft); margin:0 0 1.3em; }
.article-prose p:last-child{ margin-bottom:0; }
.article-prose .detail-list{ margin:0 0 1.5em; }

.article-sidebar .detail-list a{ color:var(--ink-soft); font-weight:500; }
.article-sidebar .detail-list a:hover{ color:var(--orange-2); }

.article-sidebar{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px;
  position:sticky;
  top:96px;
}
.article-sidebar h2{ font-size:15px; margin-bottom:1em; }
.article-sidebar .detail-list{ margin-bottom:1.6em; }
.article-sidebar .detail-list:last-of-type{ margin-bottom:0; }
.article-sidebar .btn{ width:100%; margin-top:6px; }

.article-detail-nav{
  padding:clamp(36px,7vw,56px) 0 clamp(56px,9vw,88px);
  border-top:1px solid var(--line);
  margin-top:clamp(36px,7vw,56px);
}

@media (max-width:900px){
  .article-grid--photo{ grid-template-columns:repeat(2,1fr); }
  .article-detail-body__grid{ grid-template-columns:1fr; }
  .article-sidebar{ position:static; }
}
@media (max-width:720px){
  .article-grid--photo{ grid-template-columns:1fr; gap:14px; }
  .article-cover{ aspect-ratio:4/3; }

  .article-card--photo .article-card__photo{
    aspect-ratio:16/10;
  }
}

@media (max-width:640px){
  .article-grid--photo{ grid-template-columns:1fr; gap:10px; }

  .article-card--photo{
    display:flex;
    align-items:stretch;
  }

  .article-card__photo{
    flex:0 0 104px;
    width:104px;
    aspect-ratio:1/1;
  }

  .article-card--photo .bento__body,
  .article-card--photo .article-card__body{
    flex:1;
    min-width:0;
    padding:10px 12px !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .article-card--photo .article-card__date{
    order:-1;
    font-size:9.5px;
    letter-spacing:.02em;
    margin-bottom:.3em;
  }

  .article-card--photo h3{
    font-size:13.5px;
    line-height:1.35;
    margin:0 0 .3em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .article-card--photo p{
    display:none;
  }

  .article-card--photo .article-card__link{
    font-size:11px;
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
}

.detail-nav__link{ font-size:clamp(13px,3.4vw,14.5px); max-width:280px; }
.detail-nav__eyebrow{ font-size:clamp(10px,2.6vw,11px); }