.article-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}

.article-grid.is-refreshing::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: 28px;
  background: rgba(247, 248, 250, .34);
  content: "";
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.article-grid.is-refreshing .article-card { opacity: .74; }

.article-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  isolation: isolate;
  border: 0;
  border-radius: 28px;
  background: #eef0f3;
  box-shadow: 0 22px 62px rgba(22, 32, 48, .11);
  color: #111216;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 82px rgba(22, 32, 48, .16);
}

.article-card:focus-within {
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .13), 0 30px 76px rgba(22, 32, 48, .14);
}

.article-card-link {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.article-card-link:focus-visible { outline: 0; }

.article-card-media {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 7.2;
  border-radius: 28px 28px 0 0;
  background: #e7e9ed;
}

.article-card-media::after {
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .1));
  content: "";
  pointer-events: none;
}

.article-card-coverless-art {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
  background:
    radial-gradient(circle at 75% 22%, rgba(255, 255, 255, .78), transparent 25%),
    linear-gradient(135deg, #dbeafe, #edf2f8 55%, #ccefee);
}

.article-card-coverless-art::before {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  top: 18%;
  right: 10%;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 42% 58% 63% 37% / 39% 41% 59% 61%;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 20px 56px rgba(36, 88, 145, .12);
  content: "";
  transform: rotate(18deg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.article-card-coverless-art span {
  position: relative;
  z-index: 2;
  color: rgba(20, 31, 48, .66);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .12em;
}

.article-card-coverless-art i {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(23, 105, 224, .48);
}

.article-card-coverless-art.is-ai { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.74), transparent 25%), linear-gradient(135deg, #e5ddff, #eef1f8 56%, #cfe8ff); }
.article-card-coverless-art.is-music { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.64), transparent 25%), linear-gradient(135deg, #d8e4ff, #f1e8f6 56%, #ffd9e5); }
.article-card-coverless-art.is-design { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.76), transparent 25%), linear-gradient(135deg, #ffdaca, #f6eef0 56%, #dce4ff); }
.article-card-coverless-art.is-study { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.78), transparent 25%), linear-gradient(135deg, #d7f3e5, #f0f3ec 56%, #e3edc4); }
.article-card-coverless-art.is-life { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.76), transparent 25%), linear-gradient(135deg, #ffe6bd, #f7efdf 56%, #d8ecdf); }
.article-card-coverless-art.is-collaboration { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.72), transparent 25%), linear-gradient(135deg, #cdeef2, #e8edf5 56%, #d8d9ff); }
.article-card-coverless-art.is-other { background: radial-gradient(circle at 75% 22%, rgba(255,255,255,.78), transparent 25%), linear-gradient(135deg, #dfe4eb, #f1f2f4 56%, #d8e6ee); }

.article-card-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

.article-card:hover .article-card-cover { transform: scale(1.025); }

.article-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 188px;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 21px;
  border-radius: 0 0 28px 28px;
  background: rgba(245, 246, 248, .7);
}

.article-card-body::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247, 248, 250, .56), rgba(240, 241, 244, .78) 72%),
    rgba(244, 245, 247, .62);
  content: "";
  pointer-events: none;
}

.article-card-reflection {
  position: absolute;
  z-index: -2;
  inset: -65% -12% -25%;
  overflow: hidden;
  pointer-events: none;
}

.article-card-reflection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  filter: blur(42px) saturate(145%);
  transform: scale(1.18) scaleY(-1);
}

.article-card-reflection-gradient {
  inset: -40% -12% -20%;
  opacity: .76;
  background: linear-gradient(135deg, #dbeafe, #f1f3f7 55%, #ccefee);
  filter: blur(34px) saturate(120%);
  transform: scale(1.14);
}

.article-card-reflection-gradient.is-ai { background: linear-gradient(135deg, #e5ddff, #eef1f8 56%, #cfe8ff); }
.article-card-reflection-gradient.is-music { background: linear-gradient(135deg, #d8e4ff, #f1e8f6 56%, #ffd9e5); }
.article-card-reflection-gradient.is-design { background: linear-gradient(135deg, #ffdaca, #f6eef0 56%, #dce4ff); }
.article-card-reflection-gradient.is-study { background: linear-gradient(135deg, #d7f3e5, #f0f3ec 56%, #e3edc4); }
.article-card-reflection-gradient.is-life { background: linear-gradient(135deg, #ffe6bd, #f7efdf 56%, #d8ecdf); }
.article-card-reflection-gradient.is-collaboration { background: linear-gradient(135deg, #cdeef2, #e8edf5 56%, #d8d9ff); }
.article-card-reflection-gradient.is-other { background: linear-gradient(135deg, #dfe4eb, #f1f2f4 56%, #d8e6ee); }

.article-card-author {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.article-card-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  overflow: hidden;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
  color: #1769e0;
  font-weight: 760;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.article-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-card-author-copy { min-width: 0; line-height: 1.25; }
.article-card-author-line { display: flex; min-width: 0; align-items: center; gap: 7px; }
.article-card-author-line strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.article-card-author-copy small { display: block; overflow: hidden; margin-top: 2px; color: rgba(46, 49, 56, .62); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.article-official-badge,
.article-card-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

.article-official-badge {
  min-height: 19px;
  padding: 0 7px;
  background: rgba(255, 255, 255, .48);
  color: #1769e0;
  font-size: 9px;
  font-weight: 760;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.article-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.article-card-tag {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .34);
  color: rgba(43, 46, 53, .65);
  font-size: 9px;
  font-weight: 710;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.article-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: clamp(21px, 1.75vw, 28px);
  line-height: 1.16;
  letter-spacing: -.045em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  color: rgba(55, 58, 65, .62);
  font-size: 10px;
}

.article-card-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.article-card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.article-card-stats [data-icon] { width: 13px; height: 13px; }
.article-card-attachment-count { margin-left: 2px; }
.article-card.is-featured::before {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  width: 9px;
  height: 9px;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: #1769e0;
  box-shadow: 0 4px 18px rgba(23, 105, 224, .4);
  content: "";
  pointer-events: none;
}

.article-card.is-featured-primary { grid-row: auto; }
.article-card.is-featured-primary .article-card-media { aspect-ratio: 16 / 7.2; }
.article-card.is-featured-primary .article-card-body { min-height: 188px; }
.article-card.is-featured-primary h3 { font-size: clamp(21px, 1.75vw, 28px); }

.article-card-skeleton { min-height: 360px; pointer-events: none; }
.article-card-skeleton-cover { width: 100%; aspect-ratio: 16 / 7.2; background: #e6e8ec; }
.article-card-skeleton-copy { display: grid; align-content: center; gap: 13px; padding: 22px; }
.article-card-skeleton-copy span { height: 18px; border-radius: 999px; background: rgba(215, 218, 224, .82); }
.article-card-skeleton-copy span:first-child { width: 34%; }
.article-card-skeleton-copy span:nth-child(2) { width: 88%; height: 34px; }
.article-card-skeleton-copy span:last-child { width: 62%; }

:root[data-theme="dark"] .article-card {
  background: #16191e;
  color: #f5f5f7;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

:root[data-theme="dark"] .article-card:hover { box-shadow: 0 34px 88px rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .article-card-body { background: rgba(20, 23, 28, .68); }
:root[data-theme="dark"] .article-card-body::after { background: linear-gradient(180deg, rgba(25, 28, 34, .7), rgba(17, 19, 24, .9) 76%); }
:root[data-theme="dark"] .article-card-reflection img { opacity: .5; filter: blur(48px) saturate(155%) brightness(.7); }
:root[data-theme="dark"] .article-card-author-copy small,
:root[data-theme="dark"] .article-card-footer { color: rgba(235, 238, 244, .64); }
:root[data-theme="dark"] .article-card-avatar,
:root[data-theme="dark"] .article-card-tag,
:root[data-theme="dark"] .article-official-badge { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .article-card-tag { color: rgba(235, 238, 244, .7); }
:root[data-theme="dark"] .article-official-badge { color: #83b8ff; }
:root[data-theme="dark"] .article-card-skeleton-cover,
:root[data-theme="dark"] .article-card-skeleton-copy span { background: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .article-grid.is-refreshing::after { background: rgba(9, 13, 18, .34); }
:root[data-theme="dark"] .article-card-coverless-art { filter: brightness(.66) saturate(.92); }
:root[data-theme="dark"] .article-card-coverless-art span { color: rgba(255, 255, 255, .78); }
:root[data-theme="dark"] .article-card-reflection-gradient { opacity: .35; filter: blur(42px) saturate(120%) brightness(.7); }

@media (max-width: 1180px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .article-grid { grid-template-columns: 1fr; gap: 18px; }
  .article-card { min-height: 0; border-radius: 28px; }
  .article-card-media,
  .article-card.is-featured-primary .article-card-media { aspect-ratio: 16 / 9; }
  .article-card-body,
  .article-card.is-featured-primary .article-card-body { min-height: 235px; padding: 24px; border-radius: 0 0 28px 28px; }
  .article-card h3,
  .article-card.is-featured-primary h3 { font-size: clamp(25px, 8vw, 35px); }
  .article-card-author { margin-bottom: 15px; }
  .article-card-avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .article-card-author-line strong { font-size: 13px; }
  .article-card-author-copy small { font-size: 11px; }
  .article-card-tag { min-height: 24px; padding-inline: 9px; font-size: 10px; }
  .article-card-footer { align-items: flex-end; font-size: 11px; }
  .article-card-stats { gap: 9px; }
  .article-card-skeleton-cover { aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
  .article-card-media { aspect-ratio: 16 / 10; }
  .article-card-body { padding: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-card, .article-card-cover { transition: none; }
  .article-card:hover { transform: none; }
  .article-card:hover .article-card-cover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .article-card-body { background: #f0f1f3; }
  .article-card-reflection { display: none; }
  :root[data-theme="dark"] .article-card-body { background: #171a20; }
  .article-grid.is-refreshing::after { background: rgba(247, 248, 250, .72); backdrop-filter: none; }
  :root[data-theme="dark"] .article-grid.is-refreshing::after { background: rgba(9, 13, 18, .72); }
}