/* Classic PC magazine direction: white newsprint, one committed blue, red department labels, heavy sans heads over serif text. */
:root {
  --paper: #ffffff;
  --paper-raised: #f2f5fa;
  --ink: #10131a;
  --ink-soft: #343b4a;
  --ink-faint: #4a5263;
  --accent: #0b3ea8;
  --accent-soft: #0a2f80;
  --signal: #c8102e;
  --line: #c9d1df;
  --code-bg: #eef1f7;
  --head: "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
  --label: "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
}
html[lang="ar"], html[lang="he"] { --head: "Noto Sans Arabic", "Arial Hebrew", "Arial", sans-serif; }
body { background: var(--paper); color: var(--ink); line-height: 1.6; }
a { color: var(--accent); }
a:hover { color: var(--signal); }

/* Masthead: full-width blue band */
header.site { background: var(--accent); color: #fff; margin: 0 calc(50% - 50vw) 0; padding: 1.4rem calc(50vw - 50% + 1.25rem) 1rem; border-bottom: 5px solid var(--signal); }
.wordmark { font-family: var(--head); font-style: normal; font-weight: 900; font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: 0; line-height: 1; text-transform: uppercase; }
.wordmark a, .wordmark a:hover { color: #fff; }
.tagline { color: #dbe6ff; font-family: var(--label); font-size: .95rem; margin-top: .4rem; }
nav.site { font-family: var(--label); font-size: .85rem; letter-spacing: .06em; }
nav.site a { color: #fff; font-weight: 700; }
nav.site a:hover { color: #ffd3da; }
.langswitch { font-family: var(--label); }
.langswitch a { color: #cfdcff; }
.langswitch a:hover, .langswitch a[aria-current], .langswitch .active { color: #fff; }
.mobilebar { background: var(--accent); }
.mobilebrand { font-family: var(--head); text-transform: uppercase; color: #fff; text-decoration: none; }

/* Department tabs */
.topicbar { margin-top: 0; background: var(--paper-raised); border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topicbar-track { padding: .5rem 0; }
.topicbar a { border-radius: 2px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--label); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 3px solid var(--signal); min-height: 2.4rem; }
.topicbar a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.topicbar .topic-all { background: var(--accent); color: #fff; border-color: var(--accent); }
[dir="rtl"] .topicbar a, [dir="rtl"] nav.site { letter-spacing: 0; }

/* Story list */
.category-strip h1, .page h1, .eyebrow { font-family: var(--head); text-transform: uppercase; }
.post-list li { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.post-list h2 { font-family: var(--head); font-weight: 900; font-size: 1.5rem; line-height: 1.15; letter-spacing: 0; text-wrap: balance; }
.post-list h2 a { color: var(--ink); }
.post-list h2 a:hover { color: var(--accent); }
.post-excerpt { color: var(--ink-soft); font-family: var(--serif); text-wrap: pretty; }
.post-date { font-family: var(--label); color: var(--signal); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; }
.category-links a { font-family: var(--label); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); text-decoration: none; }
.category-links a + a::before { content: "/"; color: var(--ink-faint); margin-inline: .45rem; }
.card-image img { border-radius: 2px; border: 1px solid var(--line); }
.tags span { font-family: var(--label); border-radius: 2px; background: var(--paper-raised); color: var(--ink-soft); }

/* Category index */
.category-card { border: 1px solid var(--line); border-bottom: 4px solid var(--accent); border-radius: 2px; background: var(--paper-raised); color: var(--ink); }
.category-card strong { font-family: var(--head); text-transform: uppercase; }
.category-card:hover { background: #fff; border-bottom-color: var(--signal); }

/* Article page */
.article-masthead h1, article h1 { font-family: var(--head); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
article h2, .article-copy h2 { font-family: var(--head); font-weight: 900; font-size: 1.35rem; line-height: 1.2; }
.standfirst, .lede { font-family: var(--serif); font-style: normal; color: var(--ink-soft); }
.tldr { background: var(--paper-raised); border: 1px solid var(--line); border-top: 4px solid var(--signal); border-radius: 2px; }
.tldr h2 { font-family: var(--label); color: var(--signal); letter-spacing: .06em; }
.hero img, .article-hero img { border-radius: 2px; }
.system-diagram, .fact-analysis { border-radius: 2px; }
pre { border-radius: 2px; }
footer.site { border-top: 5px solid var(--accent); font-family: var(--label); }
@media (max-width: 620px) { header.site { padding-block: 1rem .8rem; } .post-list h2 { font-size: 1.3rem; } }

/* Pass 2: flatten pills and rounded cards */
.category-links { display: flex; flex-wrap: wrap; gap: 0; margin: .2rem 0 .1rem; }
.category-links a, .category-links a:hover { border: 0; border-radius: 0; background: none; padding: 0; min-height: 0; box-shadow: none; }
.category-links a:hover { color: var(--signal); }
.category-strip { border-radius: 2px; background: var(--paper-raised); border: 1px solid var(--line); }
.category-strip h1 { font-size: .85rem; color: var(--ink); }
.category-strip a { border-radius: 2px; border: 1px solid var(--line); border-bottom: 3px solid var(--signal); background: #fff; color: var(--ink); text-transform: uppercase; font-family: var(--label); font-size: .75rem; letter-spacing: .05em; }
.category-strip a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-vps-promotion, .glm-coding-promotion, .card-image, .card-image img, .hero img, .mobilemenu summary, .extension-card, .review-panel { border-radius: 2px !important; }
.ai-vps-promotion a.ai-vps-promotion-cta, .article-action, .glm-coding-promotion a { border-radius: 2px; }
.mobilemenu summary { background: #fff; }
main :where(section, figure, div, pre, a, span, img, details, summary, table, li):not(.author-mark) { border-radius: 2px; }
main :where(.article-masthead, .article-toc, .tldr, figure, .system-diagram, .extension-card, .review-panel, .deep-dive) { box-shadow: none; }
main .article-masthead { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--accent); }

/* Pass 3: specificity fixes and RTL joining */
body main .article-masthead, body main .article-toc, body main .tldr, body main figure, body main .system-diagram, body main .deep-dive { border-radius: 2px; box-shadow: none; }
body main .article-masthead { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--accent); }
body main .article-masthead::before, body main .article-masthead::after { display: none; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .wordmark, [dir="rtl"] .category-card strong { letter-spacing: 0 !important; font-weight: 700; }
[dir="rtl"] .post-list h2, [dir="rtl"] article h1, [dir="rtl"] .article-masthead h1 { font-weight: 700; }
.inline-art { margin: 1.6em 0; }
.inline-art img, .hero img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.inline-art figcaption { font: 12px/1.4 var(--sans, sans-serif); color: #5b6573; margin-top: 6px; }
.card-image img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.post-list li:not(:has(.card-image)) { display: block; }
.post-list li:not(:has(.card-image)) .card-copy { max-width: 56rem; }
.pullquote { margin: 2rem 0; padding: .9rem 0 .9rem 1.2rem; border-inline-start: 6px solid #c4161c; }
.pullquote p { margin: 0; font: 800 1.55rem/1.25 "Roboto Condensed", "Arial Narrow", Arial, sans-serif; color: #0b3d91; text-transform: none; }
.chart { margin: 1.8rem 0; padding: 1rem; border: 1px solid var(--line); background: #fff; }
.chart svg { width: 100%; height: auto; display: block; direction: ltr; }
.chart-legend { display: flex; gap: 1.2rem; font: 700 .85rem Arial, sans-serif; margin-top: .4rem; }
.chart-legend i { display: inline-block; width: .9rem; height: .9rem; margin-inline-end: .4rem; vertical-align: -2px; }
.chart figcaption { font: .85rem/1.4 Arial, sans-serif; color: #5b6573; margin-top: .6rem; }
/* Arabic shaping must never inherit tracking from Latin labels. */
html[lang="ar"] { --head: "Jack Arabic", "Noto Sans Arabic", sans-serif; --label: "Jack Arabic", "Noto Sans Arabic", sans-serif; --serif: "Jack Arabic", "Noto Sans Arabic", sans-serif; }
html[lang="ar"] body * { letter-spacing: 0 !important; word-spacing: normal !important; }
html[lang="ar"] .article-masthead h1 { font-family: "Jack Arabic", "Noto Sans Arabic", sans-serif !important; }