/* ============================================================
   رسالة النجف — najaf.css
   A scholarly Arabic-journal design system.
   Heritage petrol teal + gilt-manuscript brass on warm parchment.
   Signature: the eight-point shamsa star.
   ============================================================ */

:root {
    --ink:        #16211f;
    --ink-soft:   #3b4744;
    --petrol:     #0c5a63;
    --petrol-deep:#073e44;
    --brass:      #b08a3e;
    --brass-deep: #8c6a26;
    --parchment:  #f4efe4;
    --paper:      #fbfaf4;
    --line:       #e0d8c6;
    --line-soft:  #ece5d6;
    --shadow:     0 1px 2px rgba(7,62,68,.06), 0 8px 28px rgba(7,62,68,.07);
    --shadow-sm:  0 1px 2px rgba(7,62,68,.06);
    --radius:     10px;
    --radius-sm:  6px;
    --wrap:       1120px;
    --measure:    66ch;

    --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
    --font-ui:      "IBM Plex Sans Arabic", system-ui, sans-serif;
    --font-read:    "IBM Plex Sans Arabic", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--ink);
    background-color: var(--parchment);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(12,90,99,.035) 1px, transparent 0);
    background-size: 22px 22px;
    line-height: 1.6;
    font-size: 17px;
}

a { color: var(--petrol); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brass-deep); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0 0 .5em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 820px; }

/* skip + focus accessibility */
.skip { position: absolute; right: -999px; }
.skip:focus { right: 12px; top: 12px; background: var(--paper); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 100; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- the shamsa (signature star) ---------- */
.shamsa { display: inline-block; color: var(--brass); }
.shamsa svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
    background:
        linear-gradient(180deg, var(--petrol) 0%, var(--petrol-deep) 100%);
    color: #f3efe3;
    position: relative;
    border-bottom: 3px solid var(--brass);
}
.masthead::after {
    content: "";
    position: absolute; inset-inline: 0; bottom: 0; height: 3px;
    background:
        repeating-linear-gradient(90deg, var(--brass) 0 14px, transparent 14px 28px);
    opacity: .5;
}
.masthead__bar {
    display: flex; align-items: center; gap: 18px;
    padding-block: 18px;
}
.masthead__seal { width: 56px; height: 56px; flex: 0 0 auto; color: var(--brass); }
.masthead__title { display: flex; flex-direction: column; }
.masthead__title .name {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 700; color: #fff; letter-spacing: .5px;
    line-height: 1.05;
}
.masthead__title .tagline {
    font-size: 14px; color: #cfe6e6; margin-top: 4px; max-width: 60ch;
}
.masthead__search { margin-inline-start: auto; }
.masthead__search form { display: flex; }
.masthead__search input {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    color: #fff; padding: 9px 14px; border-radius: 999px;
    font-family: var(--font-ui); font-size: 14px; min-width: 200px;
}
.masthead__search input::placeholder { color: #bfe0e0; }

/* nav */
.nav {
    background: var(--petrol-deep);
    border-top: 1px solid rgba(255,255,255,.08);
}
.nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 2px;
}
.nav__list a {
    display: block; padding: 12px 18px;
    color: #d7ebeb; font-size: 15px; font-weight: 500;
    border-bottom: 3px solid transparent;
}
.nav__list a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__list a.is-active { color: #fff; border-bottom-color: var(--brass); }

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: 15px; font-weight: 500;
    padding: 10px 20px; border-radius: 999px; cursor: pointer;
    border: 1px solid transparent; transition: all .15s ease;
}
.btn--primary { background: var(--petrol); color: #fff; }
.btn--primary:hover { background: var(--petrol-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--petrol); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-deep); }
.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--brass-deep); color: #fff; }

.pill {
    display: inline-block; font-size: 13px; font-weight: 500;
    padding: 3px 12px; border-radius: 999px;
    background: var(--line-soft); color: var(--ink-soft);
}
.pill--brass { background: rgba(176,138,62,.14); color: var(--brass-deep); }

/* eyebrow */
.eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    color: var(--brass-deep); text-transform: none;
    display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .shamsa { width: 14px; height: 14px; }

/* section heading */
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sect-head h2 { font-size: clamp(22px, 3vw, 30px); margin: 0; }
.sect-head .more { font-size: 14px; font-weight: 500; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero { padding-block: 46px 30px; }
.hero__intro { max-width: 70ch; font-size: 18px; color: var(--ink-soft); margin-bottom: 26px; }
.stats { display: flex; flex-wrap: wrap; gap: 14px; }
.stat {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 22px; min-width: 130px;
    box-shadow: var(--shadow-sm);
}
.stat .num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--petrol); line-height: 1; }
.stat .lab { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

/* ============================================================
   ISSUE CARDS / GRID
   ============================================================ */
.issue-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.issue-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.issue-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.issue-card__spine {
    background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 100%);
    color: #fff; padding: 22px 18px 20px; position: relative; overflow: hidden;
}
.issue-card__spine .seal {
    position: absolute; inset-block-start: -14px; inset-inline-start: -14px;
    width: 84px; height: 84px; color: rgba(176,138,62,.35);
}
.issue-card__num {
    font-family: var(--font-display); font-size: 13px; color: var(--brass);
    font-weight: 700; letter-spacing: 1px;
}
.issue-card__title { font-family: var(--font-display); font-size: 26px; color: #fff; margin: 4px 0 0; }
.issue-card__meta { font-size: 13px; color: #c7e2e2; margin-top: 8px; min-height: 18px; }
.issue-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-top: 1px solid var(--line-soft);
    font-size: 13px; color: var(--ink-soft); margin-top: auto;
}

/* year divider */
.year-row { display: flex; align-items: center; gap: 16px; margin: 34px 0 18px; }
.year-row .y { font-family: var(--font-display); font-size: 24px; color: var(--brass-deep); font-weight: 700; }
.year-row .rule { flex: 1; height: 1px; background: var(--line); position: relative; }
.year-row .rule::before {
    content: ""; position: absolute; inset-block-start: -5px; inset-inline-end: 0;
    width: 10px; height: 10px; background: var(--brass); transform: rotate(45deg);
}

/* ============================================================
   ARTICLE LIST (issue TOC)
   ============================================================ */
.toc { list-style: none; margin: 0; padding: 0; }
.toc__item {
    display: flex; align-items: baseline; gap: 12px;
    padding: 15px 4px; border-bottom: 1px dashed var(--line);
}
.toc__item:hover { background: rgba(176,138,62,.05); }
.toc__no {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    color: var(--brass); min-width: 2ch; text-align: center; flex: 0 0 auto;
}
.toc__body { flex: 1; }
.toc__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink); }
.toc__item:hover .toc__title { color: var(--petrol); }
.toc__author { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.toc__read { font-size: 13px; color: var(--ink-soft); white-space: nowrap; flex: 0 0 auto; }

/* ============================================================
   ARTICLE READER
   ============================================================ */
.reader { padding-block: 34px 60px; }
.reader__crumbs { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.reader__crumbs a { color: var(--petrol); }
.reader__head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 2px solid var(--line); }
.reader__title { font-size: clamp(28px, 4.5vw, 42px); line-height: 1.2; }
.reader__byline { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 15px; color: var(--ink-soft); margin-top: 12px; }
.reader__byline .author { color: var(--brass-deep); font-weight: 700; }

.prose {
    font-family: var(--font-read);
    font-size: 21px; line-height: 2.05; color: #1f2a28;
    max-width: var(--measure); margin-inline: auto;
}
.prose p { margin: 0 0 1.1em; text-align: justify; }
.prose h1, .prose h2, .prose h3 { font-family: var(--font-display); color: var(--petrol-deep); margin-top: 1.4em; }
.prose img { border-radius: var(--radius-sm); margin: 1.2em auto; display: block; box-shadow: var(--shadow-sm); }
.prose a { color: var(--petrol); border-bottom: 1px solid rgba(12,90,99,.3); }
.prose table { max-width: 100%; }
.prose font[color] { color: inherit !important; }   /* neutralise legacy inline colors */
/* opening flourish on first paragraph */
.prose > p:first-of-type::first-letter {
    font-family: var(--font-display); font-size: 1.15em; color: var(--brass-deep); font-weight: 700;
}

/* pager */
.pager { display: flex; gap: 14px; margin-top: 44px; }
.pager a {
    flex: 1; display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.pager a:hover { border-color: var(--brass); }
.pager .dir { font-size: 13px; color: var(--brass-deep); font-weight: 700; }
.pager .ttl { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.pager .next { text-align: start; }
.pager .prev { text-align: end; }

/* reader layout w/ sidebar */
.reader-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.reader-aside {
    position: sticky; top: 18px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
    max-height: calc(100vh - 40px); overflow: auto;
}
.reader-aside h3 { font-size: 16px; color: var(--brass-deep); margin-bottom: 12px; }
.reader-aside ol { margin: 0; padding-inline-start: 18px; }
.reader-aside li { margin-bottom: 9px; font-size: 14px; line-height: 1.5; }
.reader-aside li.current a { color: var(--brass-deep); font-weight: 700; }

/* ============================================================
   SEARCH
   ============================================================ */
.search-hero { padding-block: 40px 24px; }
.search-box { display: flex; gap: 10px; max-width: 620px; }
.search-box input {
    flex: 1; padding: 13px 18px; border: 1px solid var(--line);
    border-radius: 999px; font-family: var(--font-ui); font-size: 16px; background: var(--paper);
}
.result {
    padding: 20px 4px; border-bottom: 1px solid var(--line);
}
.result h3 { font-size: 22px; margin: 0 0 4px; }
.result .meta { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.result .snip { color: var(--ink-soft); font-size: 15px; }
mark { background: rgba(176,138,62,.28); color: inherit; padding: 0 2px; border-radius: 3px; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 30px 0 0; justify-content: center; }
.pagination li span, .pagination li a {
    display: block; padding: 8px 14px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--paper); font-size: 14px; color: var(--petrol);
}
.pagination li.active span { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.pagination li.disabled span { color: #b7b09e; }

/* ============================================================
   STATIC PAGE
   ============================================================ */
.page-head { padding-block: 40px 10px; }
.page-body { padding-bottom: 60px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    margin-top: 60px; background: var(--petrol-deep); color: #cfe6e6;
    border-top: 3px solid var(--brass);
}
.footer__grid { display: flex; flex-wrap: wrap; gap: 40px; padding-block: 36px; }
.footer__col { min-width: 200px; }
.footer__col h4 { color: #fff; font-size: 17px; margin-bottom: 12px; }
.footer__col a { color: #cfe6e6; display: block; padding: 4px 0; font-size: 14px; }
.footer__col a:hover { color: var(--brass); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 16px; font-size: 13px; color: #a9cccc; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 15px; }
.alert--ok { background: rgba(12,90,99,.1); color: var(--petrol-deep); border: 1px solid rgba(12,90,99,.25); }
.alert--err { background: #fbeaea; color: #9a2b2b; border: 1px solid #e6c3c3; }

/* empty state */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty .shamsa { width: 48px; height: 48px; margin-bottom: 14px; opacity: .6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .reader-layout { grid-template-columns: 1fr; }
    .reader-aside { position: static; max-height: none; }
}
@media (max-width: 680px) {
    body { font-size: 16px; }
    .masthead__bar { flex-wrap: wrap; }
    .masthead__search { width: 100%; margin-top: 8px; }
    .masthead__search input { width: 100%; }
    .prose { font-size: 19px; line-height: 1.95; }
    .pager { flex-direction: column; }
    .stats { gap: 10px; }
    .stat { flex: 1 1 40%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================
   v30+ : reader controls, reading themes, footnotes, archive
   ============================================================ */

/* ---- reading toolbar ---- */
.reader-toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    padding:10px 14px;margin-bottom:24px;box-shadow:var(--shadow-sm);position:sticky;top:8px;z-index:30;
}
.rt-group{display:flex;align-items:center;gap:6px}
.rt-label{font-size:12px;color:var(--ink-soft);font-weight:600;margin-inline-end:2px}
.rt-btn{font:inherit;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;
    border:1px solid var(--line);background:var(--bg,#fff);color:var(--ink-soft)}
.rt-btn:hover{border-color:var(--brass)}
.rt-btn.is-on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.rt-cite{margin-inline-start:auto;font:inherit;font-size:13.5px;font-weight:700;padding:7px 15px;border-radius:9px;
    cursor:pointer;border:1px solid var(--petrol);background:rgba(12,90,99,.08);color:var(--petrol)}
.rt-cite:hover{background:var(--petrol);color:#fff}
@media (max-width:680px){.reader-toolbar{position:static}.rt-cite{margin-inline-start:0;width:100%;text-align:center}}

/* ---- reading size ---- */
.reader[data-rsize="sm"] .prose{font-size:16px;line-height:1.9}
.reader[data-rsize="md"] .prose{font-size:18px;line-height:2}
.reader[data-rsize="lg"] .prose{font-size:20px;line-height:2.05}
.reader[data-rsize="xl"] .prose{font-size:23px;line-height:2.1}

/* ---- reading font toggle ---- */
.reader[data-rfont="amiri"] .prose{font-family:"Amiri","Noto Naskh Arabic",serif}
.reader[data-rfont="plex"]  .prose{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}

/* ---- reading themes (scoped to the reader; rest of page unchanged) ---- */
.reader[data-rtheme="sepia"]{--paper:#f6efe0;--parchment:#efe6d2;--ink:#3a2f22;--ink-soft:#7a6a52;--line:#e2d6bd;background:#f3ead9;border-radius:var(--radius)}
.reader[data-rtheme="dark"]{--paper:#16201d;--parchment:#1b2622;--ink:#e7efeb;--ink-soft:#9fb3ac;--line:#2a3631;--petrol:#43b08f;--brass-deep:#c9a85a;background:#0f1714}
.reader[data-rtheme="dark"] .reader__title,.reader[data-rtheme="dark"] .prose h1,.reader[data-rtheme="dark"] .prose h2,.reader[data-rtheme="dark"] .prose h3{color:#eef4f1}
.reader[data-rtheme="dark"] .prose a{color:#5fc6a4;border-bottom-color:rgba(95,198,164,.35)}
.reader[data-rtheme]{padding-inline:18px;transition:background .2s}
.reader[data-rtheme="light"]{padding-inline:0}

/* ---- footnotes ---- */
.prose a.fn-ref{
    font-size:.62em;font-weight:700;vertical-align:super;line-height:0;
    color:var(--petrol);border:none;padding:0 2px;text-decoration:none;
    background:rgba(12,90,99,.10);border-radius:4px;cursor:pointer
}
.prose a.fn-ref:hover{background:var(--petrol);color:#fff}
.prose .footnotes{
    margin-top:2.4em;padding-top:1.2em;border-top:2px solid var(--line);
    font-size:.82em;line-height:1.85;color:var(--ink-soft)
}
.prose .footnotes::before{content:"الهوامش";display:block;font-family:var(--font-display);font-weight:700;
    font-size:1.15em;color:var(--brass-deep);margin-bottom:.7em}
.prose .fn-item{scroll-margin-top:90px;padding:4px 8px;border-radius:8px}
.prose a.fn-back{color:var(--petrol);font-weight:700;text-decoration:none;border:none;margin-inline-end:6px}
.prose a.fn-back:hover{text-decoration:underline}
.fn-flash{animation:fnFlash 1.6s ease}
@keyframes fnFlash{0%,30%{background:rgba(176,138,62,.32)}100%{background:transparent}}

/* ---- footnote popover ---- */
.fn-pop{
    position:absolute;z-index:60;max-width:320px;background:var(--ink);color:var(--paper);
    font-size:13.5px;line-height:1.7;padding:10px 13px;border-radius:10px;box-shadow:var(--shadow);
    pointer-events:none
}

/* ---- copy toast ---- */
.copy-toast{
    position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);z-index:120;
    background:var(--petrol-deep);color:#fff;font-size:14px;font-weight:600;
    padding:11px 18px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transition:.2s
}
.copy-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- archive: stats, tools, search, year nav ---- */
.arc-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:6px}
.arc-stat{display:flex;align-items:baseline;gap:7px}
.arc-stat .n{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--petrol);line-height:1}
.arc-stat .l{font-size:14px;color:var(--ink-soft)}
.arc-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 8px}
.arc-search{flex:1;min-width:220px;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
    border:1px solid var(--line);border-radius:11px;padding:11px 15px}
.arc-search:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(12,90,99,.14)}
.arc-years{display:flex;flex-wrap:wrap;gap:6px}
.arc-ychip{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
    background:var(--paper);color:var(--ink-soft)}
.arc-ychip:hover{border-color:var(--petrol);color:var(--petrol)}
.year-count{font-size:13px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.year-row{scroll-margin-top:80px}

/* ============================================================
   v5 : site-wide dark mode, theme toggle, responsive media
   ============================================================ */
html[data-theme="dark"]{
    --ink:#e8efec; --ink-soft:#a7b6b0; --petrol:#5bbfae; --petrol-deep:#8fd6c8;
    --brass:#d8b873; --brass-deep:#d8b873; --parchment:#16201d; --paper:#1b2622;
    --line:#2a3631; --line-soft:#222d29;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
html[data-theme="dark"]{ --brass:#d8b873; }
html[data-theme="dark"] body{ background:#101714; }
html[data-theme="dark"] .masthead{ background:linear-gradient(180deg,#0f1714,#0c1310); }
html[data-theme="dark"] .issue-card__title{ color:#fff; }
html[data-theme="dark"] .footer{ background:#0c1310; }
html[data-theme="dark"] img{ filter:brightness(.92); }

/* theme toggle button */
.theme-toggle{
    width:40px;height:40px;flex:0 0 auto;border-radius:11px;cursor:pointer;
    border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
    font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center
}
.theme-toggle:hover{background:rgba(255,255,255,.16)}
.theme-toggle .tt-light{display:none}
html[data-theme="dark"] .theme-toggle .tt-light{display:inline}
html[data-theme="dark"] .theme-toggle .tt-dark{display:none}

/* images sit nicely within article text */
.prose img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:1.3em auto;display:block;box-shadow:var(--shadow-sm)}
.prose img[align="right"],.prose img[style*="float"]{float:none}
.prose table{max-width:100%;display:block;overflow-x:auto}

/* ============================================================
   v5 : home index table, writers, books, hijri calendar
   ============================================================ */
.muted{color:var(--ink-soft)}

/* home — full issues index table */
.idx-tablewrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.idx-table{width:100%;border-collapse:collapse;background:var(--paper)}
.idx-table th,.idx-table td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
.idx-table th{background:var(--parchment);font-size:12px;color:var(--ink-soft);font-weight:700;letter-spacing:.03em}
.idx-table tbody tr:hover{background:var(--parchment)}
.idx-table tbody tr:last-child td{border-bottom:none}
.idx-num{font-weight:700;color:var(--petrol);font-variant-numeric:tabular-nums;white-space:nowrap}
.idx-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.idx-year{font-size:13px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.idx-count{font-variant-numeric:tabular-nums}
@media (max-width:640px){.idx-table .idx-year{display:none}}

/* writers */
.writer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.writer-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm);color:inherit;transition:.15s}
.writer-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brass)}
.writer-av{width:42px;height:42px;border-radius:50%;background:var(--petrol);color:#fff;display:flex;
    align-items:center;justify-content:center;font-weight:700;font-size:20px}
.writer-name{font-weight:700;font-size:15.5px;line-height:1.4}
.writer-count{font-size:13px;color:var(--ink-soft)}

/* books */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.book-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.book-cover{display:block;aspect-ratio:3/4;background:var(--parchment);overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-cover__ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--brass)}
.book-cover__ph .shamsa{width:54px;height:54px}
.book-body{padding:13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.book-title{font-size:16px;margin:0;line-height:1.4}
.book-author{font-size:13px;color:var(--ink-soft)}
.book-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.book-size{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.book-detail{display:grid;grid-template-columns:240px 1fr;gap:28px;margin-top:18px}
.book-detail__cover{aspect-ratio:3/4;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--parchment)}
.book-detail__cover img{width:100%;height:100%;object-fit:cover}
.book-detail__meta{display:flex;gap:18px;color:var(--ink-soft);font-size:14px;margin:16px 0 20px}
@media (max-width:620px){.book-detail{grid-template-columns:1fr}.book-detail__cover{max-width:220px}}

/* hijri calendar */
.hijri-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.month-card{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:start;cursor:pointer;
    padding:15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
    box-shadow:var(--shadow-sm);font:inherit;color:var(--ink);transition:.15s}
.month-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brass)}
.month-card.is-open{border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol) inset}
.month-card.is-sacred{background:linear-gradient(180deg,rgba(176,138,62,.08),var(--paper))}
.mc-num{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--petrol);font-variant-numeric:tabular-nums}
.mc-name{font-weight:700;font-size:17px}
.mc-hint{font-size:12.5px;color:var(--ink-soft)}
.mc-count{font-size:12px;color:var(--brass-deep);font-weight:600;margin-top:4px}
.month-panel{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm);scroll-margin-top:80px}
.month-panel__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.month-panel__head h2{font-size:20px}
.mp-close{width:34px;height:34px;border:1px solid var(--line);background:var(--parchment);border-radius:9px;cursor:pointer;font-size:18px;color:var(--ink)}
.month-panel #mpBody{padding:18px 20px}
.mp-events{list-style:none;margin:0;padding:0;counter-reset:mp}
.mp-event{padding:13px 0;border-bottom:1px solid var(--line)}
.mp-event:last-child{border-bottom:none}
.mp-event__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.mp-day{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--petrol);min-width:34px}
.mp-year{font-size:12.5px;color:var(--ink-soft)}
.mp-event__t{font-weight:700;font-size:16px}
.mp-event__n{margin:6px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.85}
.mp-event.is-sacred .mp-event__t{color:var(--brass-deep)}

/* ============================================================
   v6 — "Imam Ali Network" inspired theme: green on parchment,
   pill nav, media cards, social/accordion footer, font FAB.
   This block is last, so it intentionally overrides earlier rules.
   ============================================================ */
:root{
    --ink:#2c2a22; --ink-soft:#6f6657;
    --petrol:#2f9e62; --petrol-deep:#237d4d;
    --brass:#b8923f; --brass-deep:#8a6c28;
    --parchment:#f3ecdb; --paper:#ffffff;
    --line:#e7dfca; --line-soft:#efe9d8;
    --green-soft:rgba(47,158,98,.12);
}
html[data-theme="dark"]{
    --ink:#e9efe9; --ink-soft:#a6b1a4; --petrol:#54c489; --petrol-deep:#7ad6a6;
    --brass:#d6b86f; --brass-deep:#e3cd92; --parchment:#0f1512; --paper:#161d18;
    --line:#26302a; --line-soft:#1d2620; --green-soft:rgba(84,196,137,.16);
}
body{background:var(--parchment);color:var(--ink)}

/* ---------- top bar (white, green logo) ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.topbar__row{display:flex;align-items:center;gap:12px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.brand__seal{width:38px;height:38px;flex:0 0 auto;color:var(--petrol)}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,3.4vw,26px);color:var(--petrol);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__tools{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.topbar__search input{border:1px solid var(--line);background:var(--parchment);color:var(--ink);
    padding:9px 14px;border-radius:999px;font-family:var(--font-ui);font-size:14px;width:160px;max-width:38vw}
.topbar__search input::placeholder{color:var(--ink-soft)}
.topbar__search input:focus{outline:none;border-color:var(--petrol);background:var(--paper);box-shadow:0 0 0 3px var(--green-soft)}
.round-btn{width:40px;height:40px;flex:0 0 auto;border-radius:50%;cursor:pointer;border:1px solid var(--line);
    background:var(--parchment);color:var(--ink);font-size:17px;display:inline-flex;align-items:center;justify-content:center}
.round-btn:hover{border-color:var(--petrol);color:var(--petrol)}
.round-btn .tt-light{display:none}
html[data-theme="dark"] .round-btn .tt-light{display:inline}
html[data-theme="dark"] .round-btn .tt-dark{display:none}
.hamb{display:none;width:42px;height:42px;border:1px solid var(--line);background:var(--parchment);border-radius:11px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.hamb span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.hamb.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb.is-open span:nth-child(2){opacity:0}
.hamb.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- pill nav ---------- */
.pillnav{background:var(--parchment);border-bottom:1px solid var(--line)}
.pillnav__list{display:flex;flex-wrap:wrap;gap:8px;padding-block:12px}
.pillnav__list a{display:inline-flex;align-items:center;padding:8px 18px;border-radius:999px;font-size:14.5px;font-weight:600;
    color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);white-space:nowrap;transition:.15s}
.pillnav__list a:hover{border-color:var(--petrol);color:var(--petrol)}
.pillnav__list a.is-active{background:var(--petrol);border-color:var(--petrol);color:#fff;box-shadow:0 4px 12px var(--green-soft)}
@media (max-width:760px){
    .hamb{display:inline-flex}
    .pillnav{display:none}
    .pillnav.open{display:block}
    .pillnav__list{flex-direction:column;gap:4px}
    .pillnav__list a{width:100%}
}

/* ---------- media cards: green underline accent ---------- */
.issue-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.issue-card__spine{background:var(--paper);position:relative;padding:20px 18px 16px}
.issue-card__spine::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:3px;
    background:linear-gradient(90deg,var(--petrol),transparent)}
.issue-card__spine .seal{color:var(--petrol)}
.issue-card__num{color:var(--petrol);font-weight:700}
.issue-card__title{color:var(--ink)!important;font-family:var(--font-display)}
.issue-card__meta{color:var(--ink-soft)}
.issue-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.issue-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.book-cover,.book-card{border-radius:14px}
.book-card .book-body,.writer-card{position:relative}

/* green pills/buttons */
.pill--brass{background:var(--green-soft);color:var(--petrol-deep)}
.btn--brass{background:var(--petrol);color:#fff}
.btn--brass:hover{background:var(--petrol-deep);color:#fff}
.btn--primary{background:var(--petrol)}
.btn--primary:hover{background:var(--petrol-deep)}
.btn--ghost{color:var(--petrol);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--petrol);color:var(--petrol-deep)}
.eyebrow{color:var(--petrol-deep)}
.year-row .y{color:var(--petrol-deep)}
.stat .num,.arc-stat .n,.mc-num,.mp-day{color:var(--petrol)}
a{color:var(--petrol)}
.prose a{color:var(--petrol-deep);border-bottom-color:var(--green-soft)}
.prose a.fn-ref{color:var(--petrol);background:var(--green-soft)}
.prose a.fn-ref:hover{background:var(--petrol);color:#fff}
.prose .footnotes::before{color:var(--petrol-deep)}

/* ---------- site footer (social + accordions + brand) ---------- */
.sitefoot{background:var(--parchment);border-top:1px solid var(--line);padding-block:30px 26px;margin-top:50px;color:var(--ink)}
.sitefoot__social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sitefoot__social a{width:46px;height:46px;border-radius:50%;background:var(--petrol);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.sitefoot__social a:hover{background:var(--petrol-deep);transform:translateY(-2px)}
.sitefoot__social svg{width:22px;height:22px}
.sitefoot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.footsec{border-bottom:1px solid transparent}
.footsec summary{list-style:none;cursor:pointer;padding:14px 4px;font-weight:700;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:space-between}
.footsec summary::-webkit-details-marker{display:none}
.footsec summary::after{content:"⌄";color:var(--ink-soft);transition:.2s}
.footsec[open] summary::after{transform:rotate(180deg)}
.footsec__body{display:flex;flex-direction:column;gap:8px;padding:0 4px 14px}
.footsec__body a{color:var(--ink-soft);font-size:14.5px}
.footsec__body a:hover{color:var(--petrol)}
.sitefoot__brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--petrol)}
.sitefoot__brand .brand__seal{width:40px;height:40px;color:var(--petrol)}
.sitefoot__copy{text-align:center;color:var(--ink-soft);font-size:13.5px;margin-top:10px}
@media (max-width:680px){
    .sitefoot__cols{grid-template-columns:1fr}
    .footsec{border-bottom:1px solid var(--line)}
    .footsec[open] summary{color:var(--petrol)}
}

/* ---------- floating font size widget (reader) ---------- */
.font-fab{position:fixed;inset-inline-end:12px;top:42%;z-index:55;display:flex;flex-direction:column;align-items:center;
    background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px);
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.font-fab button{width:54px;height:48px;border:none;background:transparent;color:var(--ink);font-weight:700;font-size:17px;cursor:pointer;font-family:var(--font-ui)}
.font-fab button:hover{background:var(--green-soft);color:var(--petrol)}
.font-fab .pct{font-size:13px;color:var(--ink-soft);padding:6px 0;border-block:1px solid var(--line);width:100%;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:760px){.font-fab button{width:46px;height:42px}}
@media print{.font-fab{display:none}}

/* keep reader toolbar from clashing with the sticky top bar */
.reader-toolbar{position:static}

/* ============================================================
   v7 — comfortable mobile reading for the magazine
   ============================================================ */
/* reading progress bar */
.read-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;background:transparent;z-index:70;pointer-events:none}
.read-progress span{display:block;height:100%;width:0;background:var(--petrol);transition:width .1s linear}

/* issue contents — accordion on mobile, sticky sidebar on desktop */
.reader-aside.issue-toc{padding:0;max-height:none;overflow:visible;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-sm)}
.issue-toc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;font-weight:700;font-size:16px;color:var(--ink)}
.issue-toc>summary::-webkit-details-marker{display:none}
.issue-toc>summary::after{content:"⌄";margin-inline-start:auto;color:var(--ink-soft);font-size:18px;transition:.2s}
.issue-toc[open]>summary::after{transform:rotate(180deg)}
.itoc-count{background:var(--green-soft);color:var(--petrol-deep);font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px}
.issue-toc>summary>span:first-child{order:-1}
.issue-toc__body{padding:2px 16px 14px}
.issue-toc__body ol{margin:0;padding-inline-start:18px}
.issue-toc__body li{margin-bottom:9px;font-size:14.5px;line-height:1.6}
.issue-toc__body li.current a{color:var(--petrol-deep);font-weight:700}
@media (min-width:901px){
    .reader-aside.issue-toc{position:sticky;top:18px}
    .issue-toc>summary{pointer-events:none}
    .issue-toc>summary::after{display:none}
    .issue-toc .issue-toc__body{display:block}        /* always shown on desktop */
}
@media (max-width:900px){
    .reader-aside.issue-toc{order:-1;margin-bottom:20px}
}

/* comfortable reading on phones */
@media (max-width:680px){
    .reader{padding-block:12px 48px}
    .reader>.wrap{padding-inline:16px}
    .reader__crumbs{font-size:13px;margin-bottom:12px}
    .reader__title{font-size:clamp(23px,6.6vw,31px);line-height:1.3}
    .reader__head{margin-bottom:18px;padding-bottom:16px}
    .reader__byline{font-size:13.5px;gap:10px}
    .prose{font-size:19.5px;line-height:2.02}
    .prose p{margin:0 0 1.25em;text-align:start}       /* avoid justified gaps on narrow screens */
    .prose > p:first-of-type::first-letter{font-size:2.6em}
    .prose a.fn-ref{font-size:.72em;padding:1px 6px}
    .prose .fn-item{padding:8px;border-radius:8px}
    /* compact, swipeable reading toolbar */
    .reader-toolbar{flex-wrap:nowrap;overflow-x:auto;gap:12px;padding:10px 12px;-webkit-overflow-scrolling:touch}
    .reader-toolbar::-webkit-scrollbar{height:0}
    .rt-group{flex:0 0 auto}
    .rt-cite{flex:0 0 auto;width:auto;margin-inline-start:6px;text-align:center}
    /* pager stacks full-width */
    .pager{grid-template-columns:1fr}
    /* bottom-docked, easy-thumb font widget */
    .font-fab{flex-direction:row;left:50%;right:auto;transform:translateX(-50%);bottom:14px;top:auto;border-radius:999px}
    .font-fab button{width:56px;height:44px}
    .font-fab .pct{border-block:none;border-inline:1px solid var(--line);padding:0 12px;display:flex;align-items:center}
}

/* ============================================================
   VNext — homepage layout, magazine cards, reader TOC (right),
   and broad responsive polish
   ============================================================ */
.hero--compact{padding-block:34px 4px}

/* ---------- homepage two-column (sidebar on the right in RTL) ---------- */
.home-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px;align-items:start;padding-block:14px 60px}
.home-main{grid-column:2;min-width:0}
.home-side{grid-column:1;display:flex;flex-direction:column;gap:16px;position:sticky;top:14px}
@media (max-width:980px){
    .home-layout{grid-template-columns:1fr;gap:24px}
    .home-main,.home-side{grid-column:auto}
    .home-side{position:static}
}
.home-search{margin:0 0 16px}
.home-search input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
    border:1px solid var(--line);border-radius:11px;padding:11px 15px}
.home-search input:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px var(--green-soft)}

/* sidebar blocks */
.side-block{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 16px}
.side-block__h{font-size:15px;font-weight:700;color:var(--petrol-deep);margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.side-list li{display:flex;flex-direction:column;gap:2px;line-height:1.5}
.side-list li a{font-size:14.5px;color:var(--ink);font-weight:600}
.side-list li a:hover{color:var(--petrol)}
.side-meta{font-size:12px;color:var(--ink-soft)}
.side-list--num{counter-reset:s}
.side-list--num li{position:relative;padding-inline-start:26px}
.side-list--num li::before{counter-increment:s;content:counter(s);position:absolute;inset-inline-start:0;top:0;
    width:20px;height:20px;border-radius:6px;background:var(--green-soft);color:var(--petrol-deep);
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.side-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side-stats div{background:var(--parchment);border-radius:10px;padding:10px;text-align:center}
.side-stats b{display:block;font-family:var(--font-display);font-size:22px;color:var(--petrol);line-height:1}
.side-stats span{font-size:12px;color:var(--ink-soft)}
.side-tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--green-soft);color:var(--petrol-deep);font-weight:600}
.tag:hover{background:var(--petrol);color:#fff}

/* ---------- magazine cards (home + archive) ---------- */
.mag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.home-main .mag-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mag-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.15s}
.mag-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mag-card__cover{position:relative;display:block;aspect-ratio:3/4;background:linear-gradient(160deg,var(--parchment),var(--line-soft));overflow:hidden}
.mag-card__cover img{width:100%;height:100%;object-fit:cover}
.mag-card__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--petrol);opacity:.5}
.mag-card__ph .shamsa{width:64px;height:64px}
.mag-card__num{position:absolute;inset-block-end:0;inset-inline-start:0;background:var(--petrol);color:#fff;font-size:12.5px;font-weight:700;padding:5px 12px;border-start-end-radius:10px}
.mag-card__body{padding:13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.mag-card__title{font-size:15.5px;margin:0;line-height:1.45;font-family:var(--font-display)}
.mag-card__meta{font-size:13px;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:wrap}
.btn--block{width:100%;justify-content:center;margin-top:auto;padding:9px;font-size:14px}

/* ---------- reader: TOC sidebar on the RIGHT ---------- */
.reader-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:start}
.reader-aside{position:sticky;top:14px;align-self:start;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 28px);overflow:auto;background:none;border:none;padding:0}
.toc-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.toc-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:13px 15px;font-weight:700;font-size:15px;color:var(--ink)}
.toc-card>summary::-webkit-details-marker{display:none}
.toc-card>summary>span:first-child{flex:1}
.toc-card>summary::after{content:"⌄";color:var(--ink-soft);transition:.2s}
.toc-card[open]>summary::after{transform:rotate(180deg)}
.toc-nav{display:flex;flex-direction:column;padding:4px 6px 12px}
.toc-link{padding:6px 10px;border-radius:8px;font-size:14px;color:var(--ink-soft);border-inline-start:2px solid transparent;line-height:1.5}
.toc-link.lvl-3{padding-inline-start:22px;font-size:13.5px}
.toc-link:hover{background:var(--green-soft);color:var(--petrol)}
.toc-link.is-active{background:var(--green-soft);color:var(--petrol-deep);border-inline-start-color:var(--petrol);font-weight:700}
.issue-toc__body{padding:2px 14px 12px}
.issue-toc__body ol{margin:0;padding-inline-start:18px}
.issue-toc__body li{margin-bottom:8px;font-size:14px;line-height:1.55}
.issue-toc__body li a{color:var(--ink)}
.issue-toc__body li.current a{color:var(--petrol-deep);font-weight:700}
.itoc-count{background:var(--green-soft);color:var(--petrol-deep);font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px}
@media (min-width:901px){
    .toc-card>summary{pointer-events:none}
    .toc-card>summary::after{display:none}
    .toc-headings .toc-nav,.issue-toc .issue-toc__body{display:block}
}
@media (max-width:900px){
    .reader-layout{grid-template-columns:1fr;gap:0}
    .reader-aside{position:static;max-height:none;overflow:visible;order:-1;margin-bottom:18px}
}

/* ---------- broad responsive polish ---------- */
@media (max-width:640px){
    .wrap{padding-inline:16px}
    .sect-head{flex-wrap:wrap;gap:6px}
    .sect-head h2{font-size:22px}
    .side-stats{grid-template-columns:1fr 1fr}
    .mag-grid,.home-main .mag-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
    .mag-card__ph .shamsa{width:46px;height:46px}
    .arc-tools{flex-direction:column;align-items:stretch}
}

/* ============================================================
   VNext-2 — designed issue covers, richer hero, issue previews
   ============================================================ */
/* generated magazine cover (when no cover image) */
.gencover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;color:#f4efe2;padding:18px 14px;overflow:hidden}
.gencover__wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.10}
.gencover__wm .shamsa{width:150%;height:150%;color:#fff}
.gencover__brand{position:relative;font-size:13px;letter-spacing:.12em;opacity:.85;font-weight:600;margin-bottom:auto}
.gencover__rule{position:relative;width:34px;height:2px;background:rgba(255,255,255,.5);margin:8px 0 4px;border-radius:2px}
.gencover__num{position:relative;font-family:var(--font-display);font-size:62px;font-weight:700;line-height:1;color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.25)}
.gencover__ord{position:relative;font-size:15px;font-weight:600;margin-top:6px;line-height:1.4}
.gencover__year{position:relative;font-size:12.5px;opacity:.82;margin-top:auto}

/* homepage hero */
.home-hero{background:linear-gradient(180deg,var(--paper),var(--parchment));border-bottom:1px solid var(--line);padding-block:42px 34px}
.home-hero__title{font-family:var(--font-display);font-size:clamp(30px,5vw,48px);margin:.18em 0 .12em;color:var(--ink)}
.home-hero__intro{max-width:60ch;color:var(--ink-soft);font-size:16px;line-height:1.9;margin:0}
.home-hero__stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.home-hero__stats span{font-size:14px;color:var(--ink-soft)}
.home-hero__stats b{font-family:var(--font-display);font-size:20px;color:var(--petrol);margin-inline-end:4px}

/* slightly tighter, prettier mag cards */
.mag-card__cover{aspect-ratio:3/4}
.home-main .mag-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* issue page — article previews (TOC sits on the right via .reader-layout) */
.issue-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.art-preview{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-sm);padding:18px 18px;scroll-margin-top:80px;transition:.15s}
.art-preview:hover{box-shadow:var(--shadow);border-color:var(--brass)}
.art-preview__no{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--green-soft);
    color:var(--petrol-deep);font-family:var(--font-display);font-weight:700;font-size:18px;
    display:flex;align-items:center;justify-content:center}
.art-preview__body{min-width:0;flex:1}
.art-preview__title{font-size:19px;line-height:1.45;margin:0 0 6px;font-family:var(--font-display)}
.art-preview__title a{color:var(--ink)}
.art-preview__title a:hover{color:var(--petrol)}
.art-preview__meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.art-preview__meta .author{color:var(--brass-deep);font-weight:700}
.art-preview__excerpt{margin:0 0 12px;color:var(--ink-soft);line-height:1.85;font-size:14.5px}
@media (max-width:600px){
    .art-preview{flex-direction:column;gap:10px;padding:15px}
    .art-preview__no{width:32px;height:32px;font-size:16px}
}