/* ============================================================
   article.css — صفحة قراءة المقال (تصميم موحّد)
   كتابات د. أحنف الجاجة
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:'Thmanyah Sans'; src:url('/assets/fonts/ThmanyahSansRegular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; src:url('/assets/fonts/ThmanyahSansMedium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; src:url('/assets/fonts/ThmanyahSansBold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('/assets/fonts/ThmanyahSerifDisplayRegular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('/assets/fonts/ThmanyahSerifDisplayBold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('/assets/fonts/ThmanyahSerifDisplayBlack.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Thmanyah Serif'; src:url('/assets/fonts/ThmanyahSerifTextRegular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Design tokens ---------- */
:root {
    --green-900: #0C241E;
    --green-primary: #12332B;
    --green-700: #1E4A3D;
    --green-600: #2E5A3A;
    --gold: #C99A3C;
    --gold-soft: #E3C583;
    --gold-tint: #F6EBD3;
    --ivory: #FAF8F3;
    --paper: #FFFFFF;
    --paper-warm: #FCF9F2;
    --text-dark: #12332B;
    --text-body: #24322D;
    --text-light: #5C6B65;
    --text-faint: #8A968F;
    --border: rgba(30, 43, 39, 0.12);
    --border-soft: rgba(30, 43, 39, 0.07);
    --shadow-sm: 0 1px 3px rgba(18,51,43,.06), 0 1px 2px rgba(18,51,43,.04);
    --shadow-md: 0 8px 30px rgba(18,51,43,.08);
    --shadow-lg: 0 20px 50px rgba(18,51,43,.12);
    --sans: 'Thmanyah Sans', system-ui, sans-serif;
    --serif: 'Thmanyah Serif', 'Thmanyah Sans', serif;
    --display: 'Thmanyah Display', 'Thmanyah Serif', serif;
    --content-max: 720px;
    --radius: 14px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:96px; }

body {
    font-family: var(--serif);
    background: var(--ivory);
    color: var(--text-body);
    line-height: 2;
    font-size: 1.12rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-tint); color: var(--green-900); }

a { color: var(--green-600); }

/* ---------- Reading progress ---------- */
.read-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 1200;
    background: transparent;
    pointer-events: none;
}
.read-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, var(--gold), var(--gold-soft));
    transition: width .1s linear;
}

/* ---------- Top navigation ---------- */
.navbar {
    background: var(--green-primary);
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar .logo { display: flex; align-items: center; }
.navbar .logo img { height: 42px; width: auto; }
.navbar .nav-links { display: flex; gap: 2.5rem; align-items: center; }
.navbar .nav-link {
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 500;
    color: rgba(250, 248, 243, .7);
    text-decoration: none;
    transition: color .2s;
    padding: .5rem 0;
}
.navbar .nav-link:hover { color: var(--ivory); }
.navbar .nav-link.active { color: var(--gold); font-weight: 600; }
.navbar .nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ivory);
    font-size: 1.5rem;
    cursor: pointer;
    padding: .5rem;
    line-height: 1;
}

/* Back link (below header) */
.subhead {
    border-bottom: 1px solid var(--border-soft);
    background: var(--paper-warm);
}
.subhead-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: .7rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
/* Unified subhead buttons: same shape, size, and font — differ only by intent */
.subhead .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--sans);
    font-size: .88rem;
    font-weight: 600;
    color: var(--green-600);
    background: none;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: .4rem .7rem;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s, background .2s, border-color .2s;
}
.subhead .btn:hover { color: var(--green-primary); background: var(--paper); border-color: var(--border-soft); }
.subhead .btn svg { width: 16px; height: 16px; }

/* ---------- Page layout ---------- */
.page {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.4rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 2.6rem;
    align-items: start;
}
.page.no-toc { grid-template-columns: minmax(0, 1fr); max-width: 800px; }

.article-main { min-width: 0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    font-family: var(--sans);
    font-size: .82rem;
    color: var(--text-light);
    padding: 1.4rem 0 .2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.breadcrumb a { color: var(--text-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb .current { color: var(--green-primary); font-weight: 500; }

/* ---------- Article header ---------- */
.article-header {
    padding: 1.8rem 0 1.9rem;
    margin-bottom: 2.2rem;
    border-bottom: 1px solid var(--border);
}
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--gold-tint);
    color: #8A6A1E;
    padding: .32rem .95rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--sans);
    margin-bottom: 1.15rem;
    letter-spacing: .3px;
}
.type-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
}
.article-header h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.85rem, 4.4vw, 2.75rem);
    color: var(--green-primary);
    margin-bottom: .7rem;
    line-height: 1.42;
    letter-spacing: -.2px;
    font-feature-settings: 'swsh' 1, 'ss01' 1;
}
.article-header .subtitle {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 1.6rem;
    max-width: 46ch;
}
.byline {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}
.byline .avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-600), var(--green-primary));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 1.1rem;
    flex: none;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), var(--shadow-sm);
}

/* Author photo covers the circle; initials show only if the image is missing */
.avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    z-index: 2;              /* sit above the initials */
    background: var(--green-primary);
}
.avatar .ava-initials { position: relative; z-index: 1; }
/* When a photo has loaded, hide the initials entirely (handles transparent PNGs too) */
.avatar.has-photo .ava-initials { display: none; }
.byline .byline-text { display: flex; flex-direction: column; line-height: 1.4; }
.byline .author-name {
    font-family: var(--sans);
    font-weight: 700;
    font-size: .96rem;
    color: var(--text-dark);
}
.byline .meta {
    font-family: var(--sans);
    font-size: .82rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.byline .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); display: inline-block; }
.byline .spacer { flex: 1 1 auto; }
.byline .header-share {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    color: var(--green-600);
    border: 1px solid var(--border);
    padding: .5rem .9rem;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.byline .header-share:hover { background: var(--green-primary); color: #fff; border-color: var(--green-primary); }
.byline .header-share svg { width: 16px; height: 16px; }

/* ---------- Table of contents (agenda) ---------- */
.toc {
    position: sticky;
    inset-block-start: 88px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    font-family: var(--sans);
    background: var(--paper);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.25rem 1.2rem 1.35rem;
    box-shadow: var(--shadow-sm);
}
.toc-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--text-faint);
    text-transform: none;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.toc-title svg { width: 16px; height: 16px; color: var(--gold); }
.toc ul { list-style: none; }
.toc li { margin: 0; }
.toc a {
    display: block;
    position: relative;
    color: var(--text-light);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.55;
    padding: .38rem .8rem;
    border-inline-start: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    transition: color .2s, background .2s, border-color .2s;
}
.toc a.lvl-3 { font-size: .82rem; padding-inline-start: 1.6rem; color: var(--text-faint); }
.toc a:hover { color: var(--green-primary); background: var(--paper-warm); }
.toc a.active {
    color: var(--green-primary);
    font-weight: 700;
    background: var(--gold-tint);
    border-inline-start-color: var(--gold);
}
.toc a.lvl-3.active { font-weight: 600; }

.toc-progress {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    font-size: .76rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.toc-progress .bar { flex: 1; height: 5px; background: var(--border-soft); border-radius: 100px; overflow: hidden; }
.toc-progress .bar > span { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 100px; transition: width .15s; }

/* Mobile TOC toggle */
.toc-mobile { display: none; }

/* ---------- Article body ---------- */
.article-content { font-size: 1.12rem; }
.article-content > p:first-of-type {
    font-size: 1.2rem;
    color: var(--text-dark);
    line-height: 1.95;
}
.article-content p { margin-bottom: 1.35rem; text-align: justify; text-justify: inter-word; }
.article-content h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.35rem, 3vw, 1.6rem);
    color: var(--green-primary);
    margin-top: 3rem;
    margin-bottom: 1.1rem;
    padding-top: 2.2rem;
    line-height: 1.5;
    scroll-margin-top: 92px;
    font-feature-settings: 'swsh' 1, 'ss01' 1;
}
.article-content h2::before {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to left, var(--gold), var(--gold-soft));
    margin-bottom: 1.4rem;
}
.article-content h3 {
    font-family: var(--sans);
    font-size: 1.16rem;
    color: var(--green-700);
    margin-top: 2.1rem;
    margin-bottom: .7rem;
    font-weight: 700;
    scroll-margin-top: 92px;
}
.article-content strong { color: var(--green-primary); font-weight: 700; }

/* Quotes */
.article-content blockquote {
    background: var(--paper-warm);
    border-inline-start: 4px solid var(--gold);
    padding: 1.15rem 1.5rem;
    margin: 1.8rem 0;
    border-radius: 0 12px 12px 0;
    color: var(--text-dark);
    font-style: italic;
    box-shadow: var(--shadow-sm);
}
.article-content blockquote p { margin: 0; }
.article-content blockquote p + p { margin-top: .7rem; }

/* Quranic verses (auto-tagged by JS) */
.article-content blockquote.quran {
    font-style: normal;
    text-align: center;
    border: 1px solid var(--gold-soft);
    border-inline-start: 1px solid var(--gold-soft);
    background: linear-gradient(180deg, var(--gold-tint), var(--paper-warm));
    padding: 1.5rem 1.4rem;
    border-radius: 14px;
    color: var(--green-900);
    font-family: var(--serif);
    position: relative;
}
.article-content blockquote.quran::before {
    content: '';
    display: block;
    width: 9px; height: 9px;
    margin: 0 auto .7rem;
    background: var(--gold);
    transform: rotate(45deg);
    border-radius: 2px;
    opacity: .85;
}
.article-content blockquote.quran p { font-size: 1.22rem; line-height: 2.1; }

/* Tables */
.article-content .table-wrap { overflow-x: auto; margin: 1.9rem 0; border-radius: 12px; box-shadow: var(--shadow-sm); }
.article-content table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: .92rem;
    background: var(--paper);
    overflow: hidden;
    min-width: 460px;
}
.article-content table th {
    background: var(--green-primary);
    color: #fff;
    padding: .85rem 1.05rem;
    text-align: right;
    font-weight: 600;
}
.article-content table td { padding: .8rem 1.05rem; border-bottom: 1px solid var(--border-soft); text-align: right; vertical-align: top; }
.article-content table tr:last-child td { border-bottom: none; }
.article-content table tbody tr:nth-child(even) { background: var(--paper-warm); }

/* Lists */
.article-content ul, .article-content ol { margin: 1.2rem 0; padding-inline-start: 1.4rem; }
.article-content li { margin-bottom: .6rem; padding-inline-start: .3rem; }
.article-content ul li::marker { color: var(--gold); }
.article-content ol li::marker { color: var(--gold); font-family: var(--sans); font-weight: 700; }

/* References */
.references { margin-top: 3.2rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.references h2 { border-top: none; padding-top: 0; margin-top: 0; }
.references ul { list-style: none; padding: 0; margin: 0; }
.references ul li {
    padding: .55rem 0 .55rem 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--gold);
    margin-bottom: .8rem;
    font-size: .95rem;
    font-family: var(--sans);
    color: var(--text-light);
    line-height: 1.7;
}

/* ---------- End-of-article blocks ---------- */
.article-end { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.6rem; }

.pdf-cta {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--green-primary), var(--green-700));
    color: #fff;
    padding: 1.6rem 1.8rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.pdf-cta .pdf-icon {
    width: 48px; height: 48px; flex: none;
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    display: grid; place-items: center;
}
.pdf-cta .pdf-icon svg { width: 24px; height: 24px; color: var(--gold-soft); }
.pdf-cta .pdf-text { flex: 1 1 200px; }
.pdf-cta .pdf-text strong { display: block; font-family: var(--display); font-size: 1.15rem; color: #fff; margin-bottom: .15rem; }
.pdf-cta .pdf-text span { font-family: var(--sans); font-size: .85rem; color: rgba(255,255,255,.72); }
.pdf-cta .download-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--gold); color: var(--green-900);
    padding: .75rem 1.5rem; border-radius: 10px;
    text-decoration: none; font-family: var(--sans);
    font-size: .92rem; font-weight: 700;
    border: none; cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s;
}
.pdf-cta .download-btn:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.pdf-cta .download-btn svg { width: 18px; height: 18px; }

/* Share block */
.share-block {
    background: var(--paper);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.share-block p { font-family: var(--sans); color: var(--text-dark); font-size: .95rem; font-weight: 600; margin-bottom: 1.1rem; }
.share-icons { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.share-icons a, .share-icons button {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; border: none; cursor: pointer;
    color: #fff; transition: transform .18s, box-shadow .2s, filter .2s;
}
.share-icons a:hover, .share-icons button:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.share-icons svg { width: 20px; height: 20px; }
.share-icons .whatsapp { background: #25D366; }
.share-icons .telegram { background: #29A9EB; }
.share-icons .x { background: #14171A; }
.share-icons .copy { background: var(--green-600); }

/* Author bio */
.author-bio {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--paper-warm);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
}
.author-bio .avatar {
    width: 60px; height: 60px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--green-600), var(--green-primary));
    color: #fff; display: grid; place-items: center;
    font-family: var(--display); font-size: 1.35rem;
    position: relative; overflow: hidden;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}
.author-bio .bio-text { line-height: 1.7; }
.author-bio .bio-text strong { display: block; font-family: var(--sans); font-weight: 700; color: var(--text-dark); font-size: 1rem; }
.author-bio .bio-text span { font-family: var(--serif); color: var(--text-light); font-size: .9rem; }

/* ---------- Footer (unified with the site's global footer) ---------- */
.site-footer {
    background: var(--green-primary);
    border-top: 1px solid rgba(250, 248, 243, .06);
    margin-top: 3.5rem;
    padding: 3rem 0 2rem;
    font-family: var(--sans);
}
.site-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}
.site-footer .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(250, 248, 243, .06);
    margin-bottom: 2rem;
}
.site-footer .footer-logo { display: inline-flex; align-items: center; }
.site-footer .footer-logo img { height: 36px; width: auto; opacity: .6; }
.site-footer .footer-cta {
    display: inline-block;
    font-family: var(--sans);
    font-size: .85rem;
    color: rgba(250, 248, 243, .5);
    text-decoration: none;
    border: 1px solid rgba(250, 248, 243, .15);
    border-radius: 100px;
    padding: .5rem 1.5rem;
    transition: color .25s, border-color .25s;
}
.site-footer .footer-cta:hover { color: var(--ivory); border-color: rgba(250, 248, 243, .4); }
.site-footer .footer-disclaimer {
    font-family: var(--sans);
    font-size: .8rem;
    color: rgba(250, 248, 243, .3);
    line-height: 1.8;
    max-width: 700px;
    margin-bottom: 1.5rem;
}
.site-footer .footer-copyright {
    font-family: var(--sans);
    font-size: .8rem;
    color: rgba(250, 248, 243, .3);
}
@media (max-width: 720px) {
    .site-footer .footer-inner { padding: 0 1.5rem; }
    .site-footer .footer-top { flex-direction: column; gap: 1rem; align-items: flex-start; }
}

/* ---------- Back to top ---------- */
.to-top {
    position: fixed;
    inset-block-end: 1.4rem;
    inset-inline-start: 1.4rem;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--green-primary);
    color: #fff;
    border: none;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .3s, transform .3s, background .2s;
    z-index: 900;
}
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--green-700); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    inset-block-end: 1.6rem;
    inset-inline: 0;
    margin: 0 auto;
    width: max-content;
    max-width: 90vw;
    background: var(--green-900);
    color: #fff;
    font-family: var(--sans);
    font-size: .88rem;
    padding: .7rem 1.3rem;
    border-radius: 100px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s, transform .3s;
    z-index: 1300;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
    .page { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 0; }
    .toc-desktop { display: none; }
    .toc-mobile { display: block; margin: 1.4rem 0 .4rem; }
    .toc-mobile details {
        background: var(--paper);
        border: 1px solid var(--border-soft);
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .toc-mobile summary {
        list-style: none;
        cursor: pointer;
        padding: .95rem 1.15rem;
        font-family: var(--sans);
        font-weight: 700;
        color: var(--green-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }
    .toc-mobile summary::-webkit-details-marker { display: none; }
    .toc-mobile summary .chev { transition: transform .25s; color: var(--gold); }
    .toc-mobile details[open] summary .chev { transform: rotate(180deg); }
    .toc-mobile summary .label { display: inline-flex; align-items: center; gap: .5rem; }
    .toc-mobile summary .label svg { width: 17px; height: 17px; color: var(--gold); }
    .toc-mobile .toc-body { padding: .3rem .7rem 1rem; border-top: 1px solid var(--border-soft); }
    .toc-mobile ul { list-style: none; }
    .toc-mobile a {
        display: block; color: var(--text-light); text-decoration: none;
        font-family: var(--sans); font-size: .9rem; padding: .5rem .8rem;
        border-radius: 8px;
    }
    .toc-mobile a.lvl-3 { padding-inline-start: 1.7rem; font-size: .85rem; }
    .toc-mobile a.active { color: var(--green-primary); font-weight: 700; background: var(--gold-tint); }
}

/* Mobile navbar (matches global header behavior) */
@media (max-width: 720px) {
    .navbar { padding: 0 1.5rem; height: 64px; }
    .navbar .nav-links { display: none; }
    .navbar .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 64px;
        right: 0;
        left: 0;
        background: var(--green-primary);
        padding: 1.5rem;
        gap: 1rem;
        border-top: 1px solid rgba(250,248,243,.06);
        z-index: 1000;
    }
    .navbar .nav-toggle { display: block; }
}

@media (max-width: 560px) {
    body { font-size: 1.04rem; }
    .article-content { font-size: 1.04rem; }
    .article-content > p:first-of-type { font-size: 1.1rem; }
    .page { padding: 0 1.05rem 3rem; }
    .subhead-inner { padding: .6rem 1.05rem; }
    .byline .header-share { margin-inline-start: 0; }
    .pdf-cta { padding: 1.3rem; }
    .site-footer .foot-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .read-progress > span, .to-top, .toc a, .share-icons a, .share-icons button { transition: none !important; }
}

/* ---------- Print ---------- */
@media print {
    .navbar, .subhead, .toc, .toc-mobile, .read-progress, .to-top, .toast,
    .article-end, .site-footer, .byline .header-share { display: none !important; }
    body { background: #fff; font-size: 12pt; }
    .page { display: block; max-width: 100%; }
    .article-content blockquote { box-shadow: none; }
}