/* Harshith Creations - article and information pages (Nov 2026). Used together with style.css */
.article { max-width: 760px; margin: 0 auto; }
.article .crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.article .crumbs a { color: var(--brand-dark); text-decoration: none; }
.article .crumbs a:hover { text-decoration: underline; }
.article h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.3; margin-bottom: 10px; }
.article .meta { color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; }
.article .lead { font-size: 1.12rem; color: var(--muted); margin-top: 8px; }
.article h2 { font-size: 1.3rem; line-height: 1.35; margin: 30px 0 6px; }
.article h3 { font-size: 1.08rem; margin: 20px 0 4px; }
.article p { margin-top: 12px; font-size: 1.02rem; }
.article ul, .article ol { margin: 12px 0 0 24px; }
.article li { margin-top: 6px; font-size: 1.02rem; }
.article a { color: var(--brand-dark); }
.article .callout { background: #fff1c2; border-radius: 14px; padding: 14px 18px; margin-top: 22px; }
.article .callout p { margin-top: 0; font-size: 0.97rem; }
.article table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.95rem; background: var(--card); }
.article th, .article td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article th { background: #ffe3dc; }
.article .more { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.article .about-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }
.article .about-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top; border: 4px solid #fff; box-shadow: var(--shadow); }
.article-card h3 a { color: #1a5fd0; text-decoration: underline; text-underline-offset: 3px; }
.article-card h3 a:hover { color: #0f3f99; }
.article-card .meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; }
html[lang="ta"] .article h1, html[lang="ta"] .article h2 { line-height: 1.45; }
html[lang="ta"] .article p, html[lang="ta"] .article li { line-height: 1.85; }
@media (max-width: 720px) {
  .article th, .article td { padding: 8px; font-size: 0.88rem; }
}