/* ════════════════════════════════════════════════════════════════
   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-of-article CTA band (quiet, bordered — not a banner) ─ */ .cta-band { margin-top: 2.5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 1.2rem 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cta-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; flex: 1 1 260px; margin: 0; }
.cta-links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.cta-primary { font-size: 0.88rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 8px; padding: 0.5rem 1.05rem; text-decoration: none; white-space: nowrap; }
.cta-primary:hover { background: var(--accent-med); text-decoration: none; }
.cta-secondary { font-size: 0.85rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
.cta-secondary:hover { text-decoration: underline; }
/* ── 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; }
}

/* shared article typography the template relies on — live articles carry the
   same values inline (physical props), which load after this file and win,
   so adding these here changes nothing visually for them */
.article-excerpt { font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; border-inline-start: 3px solid var(--gold); padding-inline-start: 1rem; }
.article-body blockquote { border-inline-start: 4px solid var(--gold); padding: 0.8rem 1.2rem; margin: 1.5rem 0; background: rgba(200,150,12,0.06); border-radius: 0 6px 6px 0; color: var(--text-dark); font-size: 1.08rem; line-height: 1.8; font-style: italic; }
.article-body ul, .article-body ol { padding-inline-start: 1.5rem; margin-bottom: 1.4rem; }
.read-also-card + .read-also-card { margin-top: 0.7rem; }