/* The Silk Road Journal: long-read articles and the journal index (22 Oct 2026).
   Loaded after styles.css on journal pages only. Logical properties, so Arabic mirrors itself.
   Readability: 18-19px body, 1.7 line height, ~68 characters per line, no italics for emphasis. */

.j-article { --measure: 68ch; background: var(--cream); color: var(--text); padding-block-end: 48px; }
.j-head, .j-body { max-inline-size: var(--measure); margin-inline: auto; padding-inline: 16px; }
.j-head { padding-block: 48px 8px; }
.j-kicker { font: 600 0.78rem/1.4 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a35; margin: 0 0 14px; }
.j-kicker a { color: inherit; }
.j-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.3rem, 1.6rem + 3.2vw, 3.8rem); line-height: 1.07; color: var(--ink); text-wrap: balance; margin: 0 0 16px; }
.j-dek { font: 500 1.4rem/1.4 "Cormorant Garamond", Georgia, serif; color: #4a505a; margin: 0 0 18px; }
.j-byline { font-size: 0.88rem; color: #5f6670; border-block-start: 1px solid var(--sand-light); padding-block-start: 12px; margin: 0; }
.j-byline a { color: inherit; }
.j-note { font-size: 0.9rem; background: #fff; border: 1px solid #eadfcb; border-radius: 8px; padding: 10px 14px; margin: 18px 0 0; color: #4a505a; }

.j-body { font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem); line-height: 1.7; }
.j-body p { margin-block: 0 1.1em; text-wrap: pretty; }
.j-body h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.35rem); line-height: 1.15; color: var(--ink); margin-block: 2.2em 0.6em; scroll-margin-block-start: 96px; text-wrap: balance; }
.j-body h3 { font: 600 1.15rem/1.35 Inter, sans-serif; color: var(--ink); margin-block: 1.6em 0.5em; }
.j-body ul, .j-body ol { padding-inline-start: 1.3em; margin-block: 0 1.2em; }
.j-body li { margin-block-end: 0.4em; }
.j-body a { color: #6f5328; text-underline-offset: 3px; }
.j-answer { font-weight: 600; background: #fff; border-inline-start: 4px solid var(--sand); padding: 12px 16px; border-radius: 4px; }
.j-meter { font: 600 0.95rem/1.4 Inter, sans-serif; color: var(--ink); background: var(--sand-light); display: inline-block; padding: 6px 12px; border-radius: 4px; font-variant-numeric: tabular-nums; }

/* Jump chips + table of contents */
.j-jump { margin: 24px 0; }
.j-jump p { font-size: 0.9rem; margin: 0 0 8px; color: #4a505a; }
.j-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.j-jump a { display: inline-block; padding: 8px 14px; min-block-size: 40px; border: 1px solid #cdb68a; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.j-toc { margin: 0 0 28px; border: 1px solid var(--sand-light); border-radius: 10px; background: #fff; padding: 12px 16px; }
.j-toc summary { font: 600 0.8rem Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; padding-block: 6px; }
.j-toc ol { list-style: none; padding: 0; margin: 10px 0 0; }
.j-toc a { display: block; padding-block: 7px; color: var(--text); text-decoration: none; font-size: 0.95rem; padding-inline-start: 10px; }
.j-toc a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 var(--sand); }
[dir="rtl"] .j-toc a[aria-current] { box-shadow: inset -3px 0 var(--sand); }

/* Progress bar (added by js/article.js) */
.j-progress { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: 70; background: var(--sand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .j-progress { transform-origin: 100% 50%; }

/* Pull quote, jargon decoder, figures, charts */
.j-pull { margin: 2em 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--sand); font: 600 clamp(1.45rem, 1.2rem + 1vw, 1.9rem)/1.3 "Cormorant Garamond", serif; color: var(--ink); }
.j-decoder { background: var(--ink); color: #f3ead9; border-radius: 10px; padding: 16px 20px; margin-block: 1.8em; font-size: 0.98rem; }
.j-decoder h3 { color: var(--sand); font: 600 0.78rem Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
.j-decoder dl { margin: 0; }
.j-decoder dt { font: 600 1.15rem "Cormorant Garamond", serif; color: #fff; }
.j-decoder dd { margin: 0 0 10px; }
.j-figure { margin-block: 2rem; }
.j-figure img { inline-size: 100%; block-size: auto; border-radius: 6px; display: block; }
.j-figure figcaption { font-size: 0.85rem; color: #5f6670; margin-block-start: 8px; }
.j-credit { display: block; font-size: 0.75rem; color: #6b7078; }
.j-credit a { color: inherit; }
.j-hero { max-inline-size: 1120px; margin: 24px auto 32px; padding-inline: 16px; }
.j-chart { margin-block: 2rem; background: #fff; border: 1px solid #eadfcb; border-radius: 8px; padding: 16px; }
.j-chart h3 { margin-block-start: 0; }
.j-chart table { inline-size: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.j-chart th, .j-chart td { text-align: start; padding: 8px 6px; border-block-end: 1px solid #eee3cf; vertical-align: top; }
.j-chart td.num, .j-chart th.num { text-align: end; white-space: nowrap; }
.j-bar { display: block; block-size: 10px; background: var(--sand); border-radius: 2px; margin-block-start: 4px; }
.j-chart__note { font-size: 0.8rem; color: #5f6670; margin: 10px 0 0; }
.j-table-wrap { overflow-x: auto; }

/* CTAs and newsletter (email first, phone second, WhatsApp backup) */
.j-cta { margin-block: 2.4em; border-radius: 12px; padding: 22px 22px; }
.j-cta h2, .j-cta h3 { margin-block-start: 0; }
.j-cta--mid { background: #fff; border: 1px solid var(--sand-light); border-inline-start: 4px solid var(--sand); }
.j-cta--end { background: var(--ink); color: #f3ead9; padding: 32px 24px; }
.j-cta--end h2 { color: #fff; }
.j-cta--end a:not(.btn) { color: #fff; }
.j-cta__row { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 16px 8px; }
.j-cta .btn { border-radius: 4px; min-block-size: 48px; justify-content: center; }
.j-cta__small { font-size: 0.88rem; opacity: 0.9; margin: 8px 0 0; }
.j-letter { background: var(--sand-light); border-radius: 12px; padding: 22px; margin-block: 2.4em; }
.j-letter h3 { font: 600 1.5rem "Cormorant Garamond", serif; margin: 0 0 6px; color: var(--ink); }
.j-letter .letter-form { justify-content: flex-start; max-inline-size: none; margin: 12px 0 0; }
.j-letter__status { margin: 8px 0 0; font-weight: 600; }
.j-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; margin-block: 24px; }
.j-share a, .j-share button { padding: 8px 12px; min-block-size: 40px; border: 1px solid #cdb68a; border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; }
.j-faq h3 { margin-block-start: 1.2em; }
.j-sources { font-size: 0.85rem; color: #4a505a; overflow-wrap: anywhere; }
.j-ps { font-weight: 600; }

/* Journal index */
.jx-mast { text-align: center; padding: 56px 16px 24px; border-block-end: 1px solid var(--sand-light); }
.jx-mast h1 { font: 600 clamp(2.6rem, 2rem + 3vw, 3.6rem)/1 "Cormorant Garamond", serif; color: var(--ink); margin: 0 0 10px; }
.jx-mast p { margin: 0 auto; max-inline-size: 40rem; color: #4a505a; }
.jx-lead { display: grid; gap: 24px; max-inline-size: 1120px; margin: 40px auto; padding-inline: 16px; text-decoration: none; color: inherit; }
.jx-lead img { inline-size: 100%; block-size: auto; border-radius: 8px; display: block; }
.jx-lead h2 { font: 600 clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem)/1.1 "Cormorant Garamond", serif; color: var(--ink); margin: 8px 0 12px; }
.jx-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); max-inline-size: 1120px; margin: 24px auto 48px; padding-inline: 16px; list-style: none; }
.j-card { background: #fff; border: 1px solid #eadfcb; border-radius: 8px; overflow: hidden; }
.j-card a { display: block; text-decoration: none; color: var(--text); padding: 18px; block-size: 100%; }
.j-card h3 { font: 600 1.35rem/1.2 "Cormorant Garamond", serif; color: var(--ink); margin: 6px 0 8px; }
.j-card p { margin: 0; font-size: 0.92rem; color: #4a505a; }

/* Journal index: lead story + photo cards (22 Oct 2026) */
.jx-lead__fig { margin: 0; min-inline-size: 0; }
.jx-lead__fig .j-credit { margin-block-start: 6px; }
.jx-lead__text { min-inline-size: 0; }
.jx-lead h2 a { color: inherit; text-decoration: none; }
.jx-lead h2 a:hover, .jx-lead h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.jx-lead__dek { font: 500 1.3rem/1.4 "Cormorant Garamond", Georgia, serif; color: #4a505a; margin: 0 0 14px; }
.jx-section-h { max-inline-size: 1120px; margin: 40px auto 0; padding-inline: 16px; font: 600 0.8rem/1.4 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a35; }
.jx-section-h::after { content: ""; display: block; block-size: 1px; background: var(--sand-light); margin-block-start: 10px; }
.j-card { display: flex; flex-direction: column; min-inline-size: 0; }
.j-card > a { flex: 1; overflow-wrap: break-word; }
.j-card .j-kicker { display: block; margin: 0; font-size: 0.72rem; }
.j-card .post-date { display: block; margin-block-start: 10px; font-size: 0.8rem; color: #6b7078; }
.j-card a:hover h3, .j-card a:focus-visible h3 { text-decoration: underline; text-underline-offset: 3px; }
.j-card--photo > a { padding: 0; }
.j-card img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.j-card__body { display: block; padding: 16px 18px 6px; }
.j-card .j-card__credit { margin: 0; padding: 0 18px 14px; font-size: 0.72rem; color: #6b7078; }
.j-card__credit a { color: inherit; }

@media (min-width: 860px) { .jx-lead { grid-template-columns: 3fr 2fr; align-items: center; } }
@media (min-width: 1100px) {
  .j-layout { display: grid; grid-template-columns: 240px minmax(0, var(--measure)) 240px; justify-content: center; gap: 40px; }
  .j-layout > .j-toc-col { position: sticky; inset-block-start: 88px; align-self: start; max-block-size: calc(100svh - 120px); overflow: auto; }
  .j-layout .j-body { padding-inline: 0; margin: 0; }
  .j-toc-col .j-toc { border: 0; background: none; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .j-progress, .j-toc, .j-jump, .j-share, .j-letter, .j-cta .btn, .site-header, footer { display: none !important; } }

/* Author box (Sami Adham) */
.j-author { background: #fff; border: 1px solid #eadfcb; border-inline-start: 4px solid var(--ink); border-radius: 8px; padding: 16px 18px; margin-block: 2em; font-size: 0.98rem; }
.j-author p { margin: 0 0 6px; }