/* ════════════════════════════════════════════════════════════════
   blog.css — the styling every article shares.

   Each article used to carry its own copy of this inline, so the same
   ~8.5 KB shipped eight times over and any change had to be made eight
   times to stay consistent. What stays inline in an article is only what
   is genuinely particular to it (comparison tables, verdict lists, the
   evidence badge), which is why the per-article <style> block is still
   there and still smaller.

   Order note: this file loads before the article's own <style>, so an
   article can override anything here. No selector in an article's block
   currently matches one here, so nothing depends on that.
   ════════════════════════════════════════════════════════════════ */

:root { --bg: #EDE7DA; --bg-card: #FAF8F4; --accent: #7A5230; --accent-med: #A67B5B; --text-dark: #1A1410; --text-body: #3C2E24; --text-muted: #7D6A58; --text-faint: #8A7660; --gold: #C8960C; --border: rgba(122,82,48,0.13); --grid: rgba(122,82,48,0.055); }
* { margin:0; padding:0; box-sizing:border-box; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
html { font-size:16px; scroll-behavior:smooth; }
body { background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; color: var(--text-body); font-family: -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", "Arial Unicode MS", sans-serif; }
/* ── header ─────────────────────────────────────── */ .site-header { background: rgba(237,231,218,0.97); border-bottom: 2px solid var(--accent); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.site-header .logo { font-size: 1.1rem; font-weight: 800; color: var(--text-dark); text-decoration: none; }
.site-header .back { font-size: 0.85rem; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; }
.site-header .back:hover { text-decoration: underline; }
.site-header .site-nav { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
.site-header .site-nav a { color: var(--accent); text-decoration: none; }
.site-header .site-nav a:hover { text-decoration: underline; }
.site-header .site-nav a.active { color: var(--text-dark); font-weight: 700; }
.site-header .site-nav a.lang { border: 1px solid var(--accent-med); border-radius: 12px; padding: 0.35rem 0.7rem; font-size: 0.78rem; }
/* ── article layout ──────────────────────────────── */ article { max-width: 700px; margin: 0 auto; padding: 3.5rem 1.5rem 6rem; }
/* ── article header ──────────────────────────────── */ .article-meta { font-size: 0.8rem; color: var(--text-faint); display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.article-title { font-size: 2.2rem; font-weight: 800; color: var(--text-dark); line-height: 1.35; margin-bottom: 0.4rem; }
.article-subtitle { font-size: 1.1rem; color: var(--accent-med); font-weight: 500; margin-bottom: 1.2rem; }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.5rem; }
.tag { font-size: 0.73rem; background: rgba(122,82,48,0.08); color: var(--accent); border: 1px solid rgba(122,82,48,0.18); border-radius: 20px; padding: 0.18rem 0.7rem; }
/* ── separator ────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
/* ── article body typography ──────────────────────── */ .article-body { line-height: 1.9; font-size: 1.05rem; }
.article-body p { margin-bottom: 1.4rem; }
.article-body h2 { font-size: 1.4rem; font-weight: 700; color: var(--text-dark); margin: 2.5rem 0 0.9rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border); }
.article-body h3 { font-size: 1.15rem; font-weight: 700; color: var(--accent); margin: 1.8rem 0 0.6rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body strong { color: var(--text-dark); font-weight: 700; }
.article-body em { color: var(--accent-med); font-style: italic; }
.article-body a { color: var(--accent); }
.article-body a:hover { text-decoration: underline; }
/* ── note box ─────────────────────────────────────── */ .note-box { background: rgba(122,82,48,0.06); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.93rem; color: var(--text-muted); }
.note-box strong { color: var(--accent); }
.references-list li { margin-bottom: 0.75rem; }
/* ── part divider ─────────────────────────────────── */ .part-divider { text-align: center; margin: 3.5rem 0; position: relative; scroll-margin-top: 80px; }
.part-divider::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--border); }
.part-divider span { position: relative; background: var(--bg); padding: 0 1.2rem; font-size: 0.78rem; color: var(--text-faint); letter-spacing: 2px; text-transform: uppercase; }
/* ── read also ────────────────────────────────────── */ .read-also { margin-top: 3rem; }
.read-also-label { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.8rem; }
.read-also-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease, background .18s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.read-also-card:hover { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.read-also-title { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-dark); }
.read-also-sub { display: block; font-size: 0.9rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.6; }
/* ── end nav ──────────────────────────────────────── */ /* ── share ── */ .share { margin-top: 2.5rem; display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; }
.share-label { font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.share-links { display:flex; gap:0.5rem; flex-wrap:wrap; }
.share-btn { font-size:0.82rem; color:var(--accent); background:rgba(122,82,48,0.07); border:1px solid rgba(122,82,48,0.18); border-radius:8px; padding:0.4rem 0.85rem; text-decoration:none; cursor:pointer; font-family:inherit; }
.share-btn:hover { background:rgba(122,82,48,0.14); }
.article-end { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.article-end a { font-size: 0.9rem; color: var(--accent); text-decoration: none; }
.article-end a:hover { text-decoration: underline; }
.back-btn { background: var(--accent); color: #fff !important; padding: 0.5rem 1.2rem; border-radius: 6px; font-weight: 600; }
/* ── footer ───────────────────────────────────────── */ footer { text-align: center; direction: ltr; padding: 2rem 1rem; font-size: 0.78rem; color: var(--text-faint); border-top: 1px solid var(--border); max-width: 700px; margin: 0 auto; }
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
/* ── research disclosure (expand full paper) ──────── */ .research-disclosure { margin: 3rem 0 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.research-disclosure > summary { cursor: pointer; list-style: none; padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: 0.85rem; transition: background 0.16s; }
.research-disclosure > summary::-webkit-details-marker { display: none; }
.research-disclosure > summary:hover { background: rgba(122,82,48,0.05); }
.summary-ic { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.summary-text { flex: 1; }
.summary-title { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.summary-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.15rem; }
.summary-chev { font-size: 0.9rem; color: var(--accent-med); transition: transform 0.22s ease; flex-shrink: 0; }
.research-disclosure[open] > summary .summary-chev { transform: rotate(180deg); }
.research-disclosure[open] > summary { border-bottom: 1px solid var(--border); background: rgba(122,82,48,0.04); }
.disclosure-body { padding: 0.5rem 1.4rem 1.6rem; }
.disclosure-body > h2:first-child { margin-top: 1.5rem; }
/* secondary jump links inside the open paper */ .paper-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0.5rem; }
.paper-jump a { font-size: 0.82rem; font-weight: 600; color: var(--accent); text-decoration: none; background: rgba(122,82,48,0.07); border: 1px solid rgba(122,82,48,0.18); border-radius: 8px; padding: 0.4rem 0.8rem; }
.paper-jump a:hover { background: rgba(122,82,48,0.14); }
/* offset anchor targets so they clear the sticky header */ .anchor { scroll-margin-top: 80px; }
@media(max-width:520px) { .article-title { font-size: 1.65rem; }
article { padding: 2.5rem 1rem 5rem; }
.disclosure-body { padding: 0.5rem 0.9rem 1.4rem; }
}