/* Articles: list and reading pages. Uses the site font and colours from style.css. */
body.art-page { --bg: #fbf8ef; }
body.art-page header { background: linear-gradient(180deg, rgba(251, 248, 239, 0.92) 25%, rgba(251, 248, 239, 0)); }
.art { padding: 0 var(--pad) clamp(48px, 9vh, 96px); max-width: calc(44rem + 2 * var(--pad)); margin: 0 auto; }
.art-head { padding: clamp(28px, 7vh, 72px) 0 8px; }
.art .eyebrow { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.art h1 { font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.1; letter-spacing: -0.01em; color: var(--text); }
.art-meta { display: block; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.art-meta a { border-bottom: 1px solid var(--line); }
.art-meta a:hover { color: var(--text); }
.art-sum { display: block; margin-top: 14px; font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--muted); }
.art-sum a { border-bottom: 1px solid rgba(0, 0, 0, 0.25); }

/* list */
.art-list { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.art-list li { border-bottom: 1px solid var(--line); }
.art-list a { display: block; padding: 28px 0; }
.art-list .art-meta { margin-bottom: 8px; }
.art-list .art-title { display: block; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; color: var(--text); transition: opacity 0.2s; }
.art-list .art-sum { margin-top: 8px; font-size: 17px; }
.art-list a:hover .art-title { opacity: 0.7; }
.art-list a.has-thumb { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 28px; align-items: start; }
.art-list a.has-thumb > span { grid-column: 1; }
.art-list li[dir="rtl"] .art-meta, .art-list li[dir="rtl"] .art-title, .art-list li[dir="rtl"] .art-sum { text-align: right; }
.art-thumb { grid-column: 2; grid-row: 1 / span 3; width: 168px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #eeebe2; }
@media (max-width: 600px) {
  .art-list a.has-thumb { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 16px; }
  .art-thumb { width: 96px; }
}
.art-empty { padding: 28px 0; color: var(--muted); font-size: 18px; }

/* reading */
.prose { margin-top: 36px; font-size: clamp(18px, 1.9vw, 20px); line-height: 1.7; color: var(--body); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-weight: 700; font-size: 1.3em; line-height: 1.3; color: var(--text); }
.prose h3 { margin-top: 1.7em; font-weight: 700; font-size: 1.08em; color: var(--text); }
.prose a { color: var(--text); border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.prose a:hover { border-color: var(--text); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { padding-inline-start: 1em; border-inline-start: 2px solid var(--text); color: var(--muted); font-style: italic; }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.6em auto; border-radius: 6px; }
.prose figure img { margin-bottom: 0.5em; }
.prose figcaption { font-size: 15px; color: var(--muted); text-align: center; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85em; background: #f4f3f0; padding: 0.1em 0.35em; border-radius: 4px; }
.prose pre { overflow-x: auto; padding: 16px 18px; background: #1c1b19; color: #e9e6df; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9em; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.prose th { color: var(--text); }

/* cover image */
.art-cover { margin-top: 32px; }
.art-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 10px; background: #eeebe2; }

/* TrueVoice box at the end of every article */
.art-cta { margin-top: 56px; padding: clamp(24px, 4vw, 36px); background: #ebeae6; border-radius: 16px; }
.art-cta-title { font-size: clamp(22px, 2.6vw, 27px); line-height: 1.25; color: var(--text); }
.art-cta-text { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.art-cta-btn { display: inline-block; margin-top: 18px; padding: 10px 20px; border-radius: 999px; background: var(--text); color: #fff; font-size: 16px; transition: opacity 0.2s; }
.art-cta-btn:hover { opacity: 0.85; }

/* language tag on /blogs rows and the language filter */
.art-lang { display: inline-flex; align-items: center; gap: 6px; vertical-align: -2px; }
.art-lang img { display: inline-block; width: 16px; height: 12px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.art-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.art-filter a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px; font-size: 15px; color: var(--muted); transition: color 0.2s, border-color 0.2s; }
.art-filter a:hover { color: var(--text); border-color: rgba(0, 0, 0, 0.3); }
.art-filter a[aria-current="page"] { color: #fff; background: var(--text); border-color: var(--text); }
.art-filter img { display: block; width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }