/* Articles. Extends guides.css: same brand, same strokes. A reading page is a single
   measure of text with figures that break out of it a little. Bengali runs in Hind
   Siliguri with generous leading; English inside a Bengali article stays Geist. */
/* width comes from .page/.measure in layout.css */
.art-head { margin: 24px 0 26px; }
.art-head .eyebrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tag { border: 2px solid var(--stroke); padding: 3px 9px; font: 700 11.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
article.bn .tag { font-family: var(--font-bn); text-transform: none; letter-spacing: 0; font-size: 13px; }
/* Blackbird has no Bengali: a Bengali headline takes the Bengali face at display weight */
article.bn h1 { font-family: var(--font-bn); font-weight: 700; letter-spacing: 0; line-height: 1.25; font-size: clamp(28px, 4.6vw, 42px); }
.art-meta { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 18px; }
.art-meta .ico { color: var(--red); }

figure.cover { margin: 0 0 30px; border: 2px solid var(--stroke); }
figure.cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- the reading measure --- */
.art-body { font-size: 18px; line-height: 1.8; }
article.bn .art-body { font-family: var(--font-bn); font-size: 19px; line-height: 1.95; }
article.bn .art-body em { font-family: var(--font-sans); font-style: italic; font-size: .92em; }
.art-body .lede { font-size: 20px; color: var(--ink); }
.art-body h2 { font-size: 24px; margin: 44px 0 14px; }
article.bn .art-body h2 { font-family: var(--font-bn); font-weight: 700; letter-spacing: 0; }
.art-body p { margin-bottom: 18px; }
.art-body b { color: var(--ink); }
.art-body ol, .art-body ul { margin: 0 0 20px 1.4em; }
.art-body li { margin-bottom: 12px; }
.art-body blockquote {
  border: 2px solid var(--stroke); background: var(--red-wash);
  padding: 18px 22px; margin: 28px 0; font-size: 1.05em; color: var(--ink);
}
.art-body table { border-collapse: collapse; width: 100%; margin: 20px 0 26px; font-size: .92em; }
.art-body th, .art-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.art-body th { background: var(--purple-wash); color: var(--ink); font-weight: 700; }
.art-body img { max-width: 100%; height: auto; display: block; border: 2px solid var(--stroke); }
.art-body figure { margin: 26px 0 30px; }
.art-body figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.art-body figcaption .src { display: block; font-size: 12px; color: #8a8a8a; }
figure.chart { border: 2px solid var(--stroke); padding: 18px 16px 12px; background: #fff; }
figure.chart svg text { font-family: var(--font-bn), var(--font-sans); }
.src-line { font-size: 14px; color: var(--muted); margin: 26px 0; }

/* --- share --- */
.share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.share-l { font: 700 12.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--stroke); background: #fff; color: var(--ink);
  padding: 8px 12px; min-height: 40px; font: 600 13.5px var(--font-sans); text-decoration: none; cursor: pointer;
}
.share a:hover, .share button:hover { background: var(--ink); color: #fff; }
.share .ico { width: 18px; height: 18px; }

/* --- index cards --- */
.art-cards { grid-template-columns: 1fr; }
.art-card { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 0; overflow: hidden; }
.art-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; display: block; }
.art-card div { padding: 18px 20px 18px 0; }
.art-card h2 { font-size: 20px; line-height: 1.35; }
.art-card h2.bn { font-family: var(--font-bn); font-weight: 700; letter-spacing: 0; }
@media (max-width: 640px) { .art-card { grid-template-columns: 1fr; } .art-card div { padding: 16px 18px 18px; } }