:root{
  --article-max: 82ch;
}

.article-wrap{
  margin-top:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.article-head{
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 30%, rgba(255,77,109,.18), transparent 62%),
    radial-gradient(circle at 85% 20%, rgba(77,255,179,.14), transparent 58%),
    radial-gradient(circle at 50% 10%, rgba(124,92,255,.16), transparent 62%),
    rgba(255,255,255,.03);
}
.article-head .kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,247,251,.72);
}
.article-head h1{
  margin:10px 0 10px;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:900;
}
.article-head p{
  margin:0;
  max-width:var(--article-max);
  color:rgba(246,247,251,.78);
  font-size:14px;
}
.article-body{
  padding:18px;
}
.article-body p{
  margin:0 0 12px;
  max-width:var(--article-max);
  font-size:14px;
  color:rgba(246,247,251,.82);
}
.article-wrap > p{
  margin:0 0 12px;
  max-width:var(--article-max);
  font-size:14px;
  color:rgba(246,247,251,.82);
}
.article-body h2{
  margin:18px 0 10px;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:900;
}
.article-wrap > h2{
  margin:18px 0 10px;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:900;
}
.article-body ul{
  margin:0 0 12px;
  padding-left:20px;
  max-width:var(--article-max);
}
.article-wrap > ul{
  margin:0 0 12px;
  padding-left:20px;
  max-width:var(--article-max);
}
.article-body li{margin:6px 0;color:rgba(246,247,251,.82);font-size:14px}
.article-wrap > ul li{margin:6px 0;color:rgba(246,247,251,.82);font-size:14px}
.article-body blockquote{
  margin:14px 0;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(124,92,255,.08);
  max-width:var(--article-max);
}
.article-wrap > blockquote{
  margin:14px 0;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(124,92,255,.08);
  max-width:var(--article-max);
}
.article-body blockquote p{margin:0}

.article-footer{
  padding:14px 18px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 560px){
  .article-wrap{margin-top:12px;border-radius:16px}
  .article-head{padding:14px 14px 10px}
  .article-head .kicker{font-size:12px}
  .article-body{padding:14px}
  .article-footer{padding:12px 14px 14px}
}