/* =========================
   article.css — Article page only
========================= */

/* Wider page shell for header/cover, readable body column */
.articleWrap{
  max-width: 1280px; /* wider than --container */
  margin: 0 auto;
  padding: 2rem 18px 3rem;
}

.article{
  max-width: 100%;
}

/* Header */
.article__title{
  margin: 0;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.article__dek{
  margin: 12px 0 0;
  color: var(--text);
  font-weight: 400;
  opacity: 0.82;
  max-width: 70ch;
}

.article__meta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  flex-wrap: wrap;
}

.article__author{
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--muted);
}

/* Cover */
.article__cover{
  margin-top: 18px;
}

.article__cover img,
.article__cover picture img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  object-fit: cover;
}

/* Body column */
.article__content{
  max-width: 82ch;
  margin-top: 20px;
}

/* Markdown typography */
.article__content :global(p){
  margin: 0 0 1rem;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  font-weight: 400;
}

.article__content :global(h2){
  margin: 1.8rem 0 0.75rem;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.article__content :global(h3){
  margin: 1.4rem 0 0.6rem;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.article__content :global(ul),
.article__content :global(ol){
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}

.article__content :global(li){
  margin: 0.35rem 0;
  line-height: 1.7;
}

/* Links inside article body */
.article__content :global(a){
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Images inside article body */
.article__content :global(img){
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin: 1.2rem 0;
}

/* Blockquotes */
.article__content :global(blockquote){
  margin: 1.2rem 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  color: var(--text);
  opacity: 0.92;
}

@media (max-width: 720px){
  .articleWrap{
    padding-top: 1.25rem;
  }
  .article__content :global(p){
    font-size: 15.5px;
  }
}