/* ============================================================
   The Balochistan Post — article (single post)
   Modeled on the Al Jazeera article: bold upright Naskh headline,
   right-aligned RTL flow, action bar, large captioned photo,
   author + date byline, clean generous body.
   Depends on tokens.css + app.css.
   ============================================================ */

:root { --read: 740px; --hair: var(--ink-150); }

/* Reading-progress bar (thin) */
.reading-bar { position: fixed; top: 0; inset-inline: 0; height: 2px; background: transparent; z-index: 300; pointer-events: none; }
.reading-bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .08s linear; }

.article { padding: 26px 0 20px; }
/* Full-width lede: breadcrumb + headline + action bar span the whole content
   width (not the narrow reading column) so the top reads as one commanding block
   instead of short elements floating in the right column over empty space. */
/* The lede sits on the SAME grid as the shell below it, and its contents in
   the same column as the article. It used to span the full shell width while
   the body sat in the reading column, so the headline started at the page
   gutter and the photograph under it started 368px further in -- two
   different left edges stacked on top of each other. The second track is
   empty here; it exists only so the first one lands in the same place. */
.article-lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 308px;
  gap: 60px;
  max-width: calc(var(--read) + 308px + 60px);
  margin: 0 auto;
}
.article-lede > * { grid-column: 1; max-width: var(--read); min-width: 0; }
/* Shell: reading column + sticky side rail (aside sits at inline-end = left in RTL).
   Below 1100px the shell collapses and the aside flows after the article. */
.article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: 60px; align-items: start; max-width: calc(var(--read) + 308px + 60px); margin: 0 auto; }
.article-main { max-width: var(--read); margin: 0; min-width: 0; }

/* ── Side rail — widget cards (post-ur handoff), sticky ── */
.art-aside { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 24px; }

/* Dossier chip — kept from the house build (surfaces only for dossier posts) */
.as-dossier { display: flex; flex-direction: column; gap: 7px; background: var(--ink-950); color: var(--white); border-radius: 8px; padding: 18px 20px; text-decoration: none; position: relative; overflow: hidden; }
.as-dossier .kk { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--red-lift); }
.as-dossier strong { font-family: var(--font-urdu); font-weight: 700; font-size: 17px; line-height: 1.6; }
.as-dossier .go { font-family: var(--font-urdu); font-weight: 600; font-size: 13px; color: var(--ink-300); display: inline-flex; align-items: center; gap: 7px; transition: color .15s; }
.as-dossier:hover .go { color: var(--white); }
.as-dossier .arr { color: var(--red-lift); transition: transform .18s; }
.as-dossier:hover .arr { transform: translateX(-4px); }

/* Widget card — white surface, red-underline heading */
.widget { background: var(--paper-card); border: 1px solid var(--ink-150); border-radius: 14px; padding: 18px 18px 20px; }
.widget .whead { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--red); }
.widget .whead h3 { font-family: var(--font-urdu); font-weight: 800; font-size: 16px; margin: 0; color: var(--ink-900); display: inline-flex; align-items: center; gap: 8px; }
.widget .whead .ico { color: var(--red); font-size: 14px; }
.widget .whead .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: livepulse 1.4s ease-in-out infinite; }

/* Pinned — lead feature + list */
.w-pinned .pin-feature { display: block; text-decoration: none; color: inherit; }
.w-pinned .pin-feature .img { display: block; aspect-ratio: 16/9; border-radius: 10px; margin-bottom: 10px; }
.w-pinned .pin-feature h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 15px; line-height: 1.6; margin: 0; color: var(--ink-900); }
.w-pinned .pin-feature:hover h4 { color: var(--red); }
.w-pinned .news-list { margin-top: 14px; border-top: 1px solid var(--ink-150); padding-top: 4px; }

/* News list (latest + pinned list) */
.news-list a { display: block; padding: 11px 0; border-bottom: 1px solid var(--ink-150); text-decoration: none; color: inherit; }
.news-list a:last-child { border-bottom: 0; padding-bottom: 0; }
.news-list h5 { font-family: var(--font-urdu); font-weight: 600; font-size: 14px; line-height: 1.7; margin: 0; color: var(--ink-800); }
.news-list a:hover h5 { color: var(--red); }
.news-list .t { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: .04em; }
.news-list .t.ur { font-family: var(--font-urdu); font-size: 11px; letter-spacing: 0; }
.news-list.pinned a { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; }
.news-list.pinned .pico { color: var(--red); font-size: 11px; line-height: 1.9; }

/* Latest — headline + thumbnail (brings the homepage-rail treatment to the rail) */
.news-list a { transition: transform .16s ease; }
.news-list a:hover { transform: translateX(-3px); }          /* RTL: nudges toward the text */
.news-list.with-thumb a { display: grid; grid-template-columns: 1fr 62px; gap: 12px; align-items: start; }
.news-list.with-thumb .nl-tx { min-width: 0; }
.news-list.with-thumb h5 { font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nl-thumb { width: 62px; height: 46px; border-radius: 6px; overflow: hidden; background: var(--paper-sunken) center / cover no-repeat; flex: none; }

/* WhatsApp channel widget — its base .newsletter-card styling lives in home.css
   (homepage-only), so give it the rail card frame + green CTA here. */
.art-aside .tbp-widget--whatsapp { background: var(--paper-card); border: 1px solid var(--ink-150); border-radius: 14px; padding: 18px 18px 20px; text-align: start; }
.art-aside .tbp-widget--whatsapp .ttl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #1da851; margin-bottom: 8px; }
.art-aside .tbp-widget--whatsapp h3 { font-family: var(--font-urdu); font-weight: 800; font-size: 16px; color: var(--ink-900); margin: 0 0 8px; }
.art-aside .tbp-widget--whatsapp p { font-family: var(--font-urdu); font-size: 12.5px; line-height: 1.7; color: var(--ink-500); margin: 0 0 14px; }
/* WhatsApp's darker brand green so white text clears WCAG (bright #25D366 fails). */
.art-aside .tbp-widget--whatsapp .wa-join { display: inline-flex; align-items: center; gap: 8px; background: #0a7d5a; color: #fff; font-family: var(--font-urdu); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 999px; text-decoration: none; transition: background .15s; }
.art-aside .tbp-widget--whatsapp .wa-join:hover { background: #086348; }

/* Follow — social buttons */
.w-social .soc-sub { font-family: var(--font-urdu); font-size: 12.5px; line-height: 1.6; color: var(--ink-500); margin: 0 0 14px; }
.w-social .soc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-social .soc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--ink-150); background: var(--paper); color: var(--ink-700); font-family: var(--font-urdu); font-weight: 600; font-size: 12.5px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.w-social .soc-btn svg { width: 16px; height: 16px; flex: none; }
.w-social .soc-btn span { line-height: 1; }
.w-social .soc-telegram:hover  { background: #2AABEE; border-color: #2AABEE; color: #fff; }
.w-social .soc-youtube:hover   { background: #FF0000; border-color: #FF0000; color: #fff; }
.w-social .soc-x:hover         { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.w-social .soc-facebook:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.w-social .soc-instagram:hover { background: #d62976; border-color: #d62976; color: #fff; }
.w-social .soc-tiktok:hover      { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.w-social .soc-linkedin:hover    { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.w-social .soc-threads:hover     { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.w-social .soc-mastodon:hover    { background: #6364FF; border-color: #6364FF; color: #fff; }
.w-social .soc-bluesky:hover     { background: #0085FF; border-color: #0085FF; color: #fff; }
.w-social .soc-nostr:hover       { background: #8E30EB; border-color: #8E30EB; color: #fff; }
.w-social .soc-substack:hover    { background: #FF6719; border-color: #FF6719; color: #fff; }
.w-social .soc-google-news:hover { background: #4285F4; border-color: #4285F4; color: #fff; }
.w-social .soc-apple-news:hover  { background: #FB1D4A; border-color: #FB1D4A; color: #fff; }
.w-social .soc-flipboard:hover   { background: #E12828; border-color: #E12828; color: #fff; }
.w-social .soc-feedly:hover      { background: #2BB24C; border-color: #2BB24C; color: #fff; }
html.dark .w-social .soc-btn { background: var(--paper-sunken); border-color: var(--tbp-line); color: var(--tbp-text-2); }

/* Popular tags */
.w-tags .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.w-tags .tags a { font-family: var(--font-urdu); font-size: 13px; color: var(--ink-700); background: var(--paper-sunken); border: 1px solid var(--ink-150); padding: 6px 14px; border-radius: 999px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.w-tags .tags a:hover { background: var(--red); color: var(--white); border-color: var(--red); }

/* Newsletter */
.w-news { text-align: center; }
.w-news h3 { font-family: var(--font-urdu); font-weight: 800; font-size: 17px; color: var(--ink-900); margin: 0 0 8px; }
.w-news p { font-family: var(--font-urdu); font-size: 12.5px; line-height: 1.7; color: var(--ink-500); margin: 0 0 14px; }
.w-news input { width: 100%; padding: 10px 14px; box-sizing: border-box; border: 1px solid var(--ink-200); border-radius: 999px; background: var(--paper); font-family: var(--font-urdu); font-size: 13px; color: var(--ink-800); margin-bottom: 8px; }
.w-news button { width: 100%; padding: 10px 14px; border: 0; border-radius: var(--btn-radius, 999px); background: var(--red); color: var(--white); font-family: var(--font-urdu); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.w-news button:hover { background: var(--red-strong); }

@media (max-width: 1100px) {
  .article-shell { grid-template-columns: 1fr; gap: 40px; max-width: var(--read); }
  /* Collapse the lede's grid with the shell's, or it keeps reserving a 308px
     track for a rail that is no longer beside it. */
  .article-lede { grid-template-columns: 1fr; gap: 0; max-width: var(--read); }
  .art-aside { position: static; }
  .as-dossier { order: -1; }
}

/* Breadcrumb — quiet, right-aligned; the category is the final crumb, styled as
   the red brand chip (merged from the old separate kicker to kill the duplicate). */
.crumb { font-family: var(--font-urdu); font-size: 14px; color: var(--ink-500); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb a { color: var(--red); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: var(--ink-300); }
/* Category chip (post-terms) sitting as the last breadcrumb item */
.crumb .cat { display: inline-flex; align-items: center; }
.crumb .cat a { background: var(--red); color: #fff; font-weight: 700; font-size: 12px; line-height: 1.6; padding: 3px 11px; border-radius: 3px; text-decoration: none; transition: background .15s; }
.crumb .cat a:hover { background: var(--red-strong); color: #fff; text-decoration: none; }

/* Header — right-aligned, bold upright headline (Al Jazeera style) */
.art-head { text-align: start; }
/* Kicker — category as a filled red tag chip (post-ur handoff) */
.art-kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.art-kicker .cat a { display: inline-block; background: var(--red); color: #fff; font-family: var(--font-urdu); font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 3px; text-decoration: none; transition: background .15s; }
.art-kicker .cat a:hover { background: var(--red-strong); }
.art-title { font-family: var(--tbp-ff-head, var(--font-urdu)); font-weight: 700; font-size: calc(clamp(28px, 4.2vw, 42px) * var(--tbp-fsx-head, 1)); line-height: calc(1.55 * var(--tbp-lhx-head, 1)); color: var(--ink-900); margin: 0 0 18px; letter-spacing: -0.01em; }
html.dark .art-title { color: var(--tbp-text); }
.art-standfirst { font-family: var(--font-urdu); font-weight: 400; font-size: 20px; line-height: 1.95; color: var(--ink-600); margin: 0 0 22px; }

/* Source / Via credit — foot of the article body, quiet by design */
.art-source { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 26px 0 4px; padding-top: 14px; border-top: 1px solid var(--hair); font-family: var(--font-urdu); font-size: 14px; color: var(--ink-500); }
.art-source .cr { display: inline-flex; align-items: baseline; gap: 7px; }
.art-source .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.art-source a { color: var(--ink-700); text-decoration: none; border-bottom: 1px solid var(--hair); transition: color .15s, border-color .15s; }
.art-source a:hover { color: var(--red); border-color: var(--red); }
html.dark .art-source { color: var(--tbp-text-2); }
html.dark .art-source a { color: var(--tbp-text); }

/* Action bar — listen / share / save, hairline rules */
.art-actions { display: flex; align-items: center; justify-content: flex-end; gap: 26px; padding: 6px 0; margin-bottom: 22px; }
/* ── The meta row ──────────────────────────────────────────────────────────
   Credit, share and dateline were three stacked blocks, each claiming a full
   line across the reading column and leaving most of it empty -- three rows
   to carry about one row of information. They are cells of one grid now.

   auto | 1fr | auto: the credit takes what it needs at the start, the
   dateline takes what it needs at the end, and the share button sits in the
   middle track. The empty middle is what absorbs a long credit or a wide
   dateline, so neither has to wrap before the other gives way. */
.art-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 20px;
  margin: 10px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
/* Share stays on the LEFT, where it has been since it moved under the
   photograph -- track 3 is the left end in RTL. The dateline takes the
   flexible middle track, so it is the one that gives way when the row is
   tight, rather than the credit or the button. */
/* grid-row: 1 on all three is load-bearing, not decoration. The DOM order is
   credit, share, dateline, but the columns are 1, 3, 2 -- and auto-placement
   only moves forwards, so on reaching the dateline it had already passed
   column 2 and dropped it to a second row. The row was 68px tall with the
   dateline sitting under the other two. Naming the row removes the ordering
   from the question entirely. */
.art-meta .art-credit { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-urdu); font-size: 12.5px; color: var(--ink-500); min-width: 0; }
.art-meta .byline { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; min-width: 0; }
.art-meta .art-actions { grid-column: 3; grid-row: 1; justify-content: flex-end; padding: 0; margin: 0; }
/* THE SHARE BUTTON IS THE ONE ACTION IN THIS ROW, and it read as the
   quietest thing in it -- 14px of muted ink beside a red category chip and a
   photograph. It is a filled brand pill now: the credit and the dateline are
   information, this is the only thing a reader can DO here, so it is the only
   thing that looks clickable. */
.art-meta .art-actions .act {
  background: var(--red); color: #fff; border-radius: 999px;
  padding: 9px 18px; gap: 9px; font-weight: 700; font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: background .16s ease, transform .1s ease, box-shadow .16s ease;
}
.art-meta .art-actions .act svg { width: 17px; height: 17px; }
.art-meta .art-actions .act:hover { background: var(--red-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.24); }
.art-meta .art-actions .act:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.art-meta .art-actions .act:focus-visible { outline: 2px solid var(--red-lift, #ff5a5f); outline-offset: 3px; }
html.dark .art-meta .art-actions .act { color: #fff; }
html.dark .art-meta .art-credit { color: var(--tbp-text-3); }

/* Below the reading width there is not room for three cells on one line, so
   the row becomes two: credit across the top, share and dateline beneath it.
   Stacking all three again would just restore what this replaced. */
@media (max-width: 680px) {
  .art-meta { grid-template-columns: 1fr auto; row-gap: 10px; }
  .art-meta .art-credit { grid-column: 1 / -1; grid-row: 1; }
  .art-meta .byline { grid-column: 1; grid-row: 2; justify-self: start; }
  .art-meta .art-actions { grid-column: 2; grid-row: 2; justify-content: flex-end; }
}
.art-actions .act { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 2px; cursor: pointer; font-family: var(--font-urdu); font-weight: 600; font-size: 14px; color: var(--ink-700); transition: color .15s; }
.art-actions .act:hover { color: var(--red); }
.art-actions .act svg { width: 18px; height: 18px; flex: none; }
.art-actions .act .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.art-actions .act-right { display: flex; align-items: center; gap: 20px; }
html.dark .art-actions .act { color: var(--tbp-text-2); }

/* Featured image — large, with caption + credit */
/* The featured image is a plain figure again — no overlay, no sticky layer.
   It is shaped to --tbp-ar-lead so a lead photograph is cropped here exactly
   the way it is on the homepage, rather than at whatever ratio the file
   happens to be. object-fit keeps the subject centred inside that crop
   instead of squashing it. */
.art-fig img { display: block; width: 100%; height: auto; aspect-ratio: var(--tbp-ar-lead, 7 / 4); object-fit: cover; border-radius: 8px; }
/* The share row sits directly under the photograph now, so the space between
   them is one small gap rather than the figure's full section margin. */
.art-fig { margin: 0 0 10px; }
.art-fig img { width: 100%; height: auto; aspect-ratio: 7/4; object-fit: cover; display: block; border-radius: 8px; }
.art-fig figcaption { font-family: var(--tbp-ff-cap, var(--font-urdu)); font-size: calc(14px * var(--tbp-fsx-cap, 1)); line-height: 1.7; color: var(--ink-500); margin-top: 10px; text-align: start; padding-inline-start: 14px; border-inline-start: 3px solid var(--red); }

/* Byline — name, date + last-updated below (right-aligned; no avatar) */
.byline { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.byline .who { display: flex; flex-direction: column; gap: 3px; }
.byline .who .name { font-family: var(--font-urdu); font-weight: 700; font-size: 16px; color: var(--ink-900); text-decoration: none; transition: color .15s; }
.byline .who a.name:hover { color: var(--red); }
.byline .who .line { font-family: var(--font-urdu); font-size: 12.5px; color: var(--ink-400); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.byline .who .line .sep { color: var(--ink-300); }
html.dark .byline .who .name { color: var(--tbp-text); }

/* Body — right-aligned, generous, colored links (Al Jazeera reading feel) */
.art-body { font-family: var(--tbp-ff-body, var(--font-urdu)); }
.art-body > p { font-size: calc(19px * var(--tbp-fsx-body, 1)); line-height: calc(2.15 * var(--tbp-lhx-body, 1)); color: var(--ink-800); margin: 0 0 24px; }
html.dark .art-body > p { color: var(--tbp-text-2); }
.art-body > p:first-of-type { font-size: calc(22px * var(--tbp-fsx-body, 1)); line-height: calc(2.05 * var(--tbp-lhx-body, 1)); color: var(--ink-900); }
.art-body h2 { font-family: var(--font-urdu); font-weight: 700; font-size: 27px; line-height: 1.55; color: var(--ink-900); margin: 42px 0 16px; padding-top: 6px; }
.art-body h2::before { content: ""; display: block; width: 44px; height: 3px; background: var(--red); margin-bottom: 14px; border-radius: 2px; }
.art-body h3 { font-family: var(--font-urdu); font-weight: 700; font-size: 22px; line-height: 1.6; color: var(--ink-900); margin: 32px 0 12px; }
.art-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art-body ul, .art-body ol { margin: 0 0 24px; padding: 0; list-style: none; }
.art-body ul li { font-size: 18px; line-height: 2; color: var(--ink-800); padding-inline-start: 24px; position: relative; margin-bottom: 11px; }
.art-body ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.art-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 14px 0; }
.art-body figure { margin: 30px 0; }
.art-body figure img { margin: 0; }
.art-body figcaption { font-family: var(--font-urdu); font-size: 14px; line-height: 1.7; color: var(--ink-500); margin-top: 10px; }
.art-body blockquote { margin: 40px 0; padding: 2px 26px; border-inline-start: 3px solid var(--red); }
.art-body blockquote p { font-family: var(--font-urdu); font-weight: 600; font-size: 26px; line-height: 1.85; color: var(--ink-900); }
/* Neutralize legacy inline maroon (#800000) → calm ink. */
.art-body [style*="#800000"], .art-body [style*="800000"], .art-body [style*="#8b0000"], .art-body [style*="#8B0000"] { color: var(--ink-800) !important; }

/* Key-facts box (post-ur handoff) — author drops a .keyfacts aside in the body */
.art-body .keyfacts { background: var(--paper-sunken); border: 1px solid var(--ink-150); border-inline-start: 4px solid var(--red); border-radius: 8px; padding: 22px 24px; margin: 30px 0; }
.art-body .keyfacts h3 { font-family: var(--font-urdu); font-weight: 700; font-size: 15px; color: var(--red); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.art-body .keyfacts ul { margin: 0; padding: 0; list-style: none; }
.art-body .keyfacts li { font-family: var(--font-urdu); font-size: 15px; line-height: 1.85; color: var(--ink-700); padding-inline-start: 22px; position: relative; margin-bottom: 8px; }
.art-body .keyfacts li::before { content: "—"; position: absolute; inset-inline-start: 0; top: 0; width: auto; height: auto; background: none; color: var(--red); }
.art-body .keyfacts li:last-child { margin-bottom: 0; }

/* Pull-quote — centered, quiet rules (house style: upright Naskh, not Nastaliq) */
.art-body .pullquote { margin: 34px 0; padding: 0; border-block: 2px solid var(--ink-150); text-align: center; }
.art-body .pullquote blockquote { margin: 22px 0 12px; border: 0; padding: 0; font-family: var(--font-urdu); font-weight: 600; font-size: 26px; line-height: 1.85; color: var(--ink-900); }
.art-body .pullquote cite { font-family: var(--font-urdu); font-style: normal; font-weight: 600; font-size: 13px; color: var(--red); }

/* Inline figure */
.art-body .inline-fig { margin: 30px 0; }
.art-body .inline-fig .img { aspect-ratio: 3/2; border-radius: 8px; overflow: hidden; background: var(--paper-sunken); }
.art-body .inline-fig figcaption { font-family: var(--font-urdu); font-size: 13px; line-height: 1.7; color: var(--ink-500); margin-top: 10px; border: 0; padding: 0; }

/* Author bio — hairline, restrained */
/* ── Op-ed columnists ──────────────────────────────────────────────────────
   Replaces .author-bio, which described a WordPress account: avatar, name,
   biography, post count. A columnist is a term, so there is nothing to
   describe -- the panel is the name and the way to the rest of their work.
   Deliberately no bio: a line about where a writer lives or what they cover is
   what makes a person findable. */
.oped-authors { margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--hair); }
.oped-authors .oa-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 10px; }
.oped-authors .oa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.oped-authors .oa-item { display: inline-flex; align-items: baseline; gap: 8px; }
.oped-authors .oa-name { font-family: var(--font-urdu); font-weight: 700; font-size: 16px; color: var(--ink-900); text-decoration: none; transition: color .15s; }
.oped-authors .oa-name:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.oped-authors .oa-all { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); text-decoration: none; padding: 1px 7px; border: 1px solid var(--hair); border-radius: 999px; transition: border-color .15s, color .15s; }
.oped-authors .oa-all:hover { color: var(--red); border-color: var(--red); }
html.dark .oped-authors .oa-name { color: var(--tbp-text); }
html.dark .oped-authors .oa-all { color: var(--tbp-text-2); }

/* Related — quiet hairline section, clean cards */
.related-band { max-width: calc(var(--read) + 308px + 60px); margin: 48px auto 0; padding: 0 0 56px; }
@media (max-width: 1100px) { .related-band { max-width: var(--read); } }
.related-band .secbar { display: flex; align-items: center; margin: 0 0 22px; padding-top: 28px; border-top: 1px solid var(--hair); }
.related-band .secbar h2 { font-family: var(--font-urdu); font-weight: 700; font-size: 20px; margin: 0; color: var(--ink-900); }
.related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.related .rc { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.related .rc .img { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; }
.related .rc:hover h4 { color: var(--red); }
.related .rc .body { padding: 11px 0 0; }
.related .rc .kk { font-family: var(--font-urdu); font-weight: 700; font-size: 12px; color: var(--red); margin-bottom: 6px; }
.related .rc h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 17px; line-height: 1.65; margin: 0 0 7px; color: var(--ink-900); transition: color .15s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related .rc .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); letter-spacing: 0.04em; }

/* Responsive */
@media (max-width: 760px) {
  .article { padding: 22px 0 16px; }
  .art-title { font-size: clamp(25px, 7vw, 32px); }
  .art-body > p { font-size: 18px; line-height: 2.05; }
  .related { grid-template-columns: 1fr; gap: 18px; }
  .related .rc { flex-direction: row; gap: 14px; align-items: start; }
  .related .rc .img { width: 120px; flex: none; }
  .related .rc .body { padding: 0; }
}

/* ── Article share tray (the "شیئر" button opens this) ─────────────── */
/* The tray SLIDES out from under the button rather than blinking in: it
   travels 14px with a slight scale, on an ease-out curve that decelerates into
   place, and clips its own height so the edge appears to unfold instead of the
   whole panel fading through the text beneath it. `visibility` is stepped at
   the end of the out-transition so the panel is not focusable mid-fade. */
.tbp-share-tray { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
  background: var(--paper-card, #fff); border: 1px solid var(--hairline, #dedcd5); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 12px; width: min(320px, 82vw);
  transform-origin: top var(--tbp-tray-origin, left);
  opacity: 0; visibility: hidden; transform: translateY(-14px) scale(.97);
  transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s; }
.tbp-share-tray.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .2s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), visibility 0s; }
/* The rows arrive just behind the panel, so the tray reads as one movement
   with a little depth rather than a block that pops. */
.tbp-share-tray .tbp-sh { opacity: 0; transform: translateY(-5px);
  transition: opacity .2s ease .04s, transform .2s cubic-bezier(.16,1,.3,1) .04s, background .12s, border-color .12s; }
.tbp-share-tray.open .tbp-sh { opacity: 1; transform: translateY(0); }
/* A reader who has asked for less motion gets the panel, not the journey. */
@media (prefers-reduced-motion: reduce) {
  .tbp-share-tray, .tbp-share-tray.open,
  .tbp-share-tray .tbp-sh, .tbp-share-tray.open .tbp-sh {
    transition-duration: .01ms; transform: none; }
}
/* Keyboard focus has to be visible: the tray is now arrow-key driven, and the
   rows carry tabindex="-1", so the ring is the only thing marking the row a
   reader is on. */
.tbp-share-tray .tbp-sh:focus-visible { outline: 2px solid var(--red, #b0070f); outline-offset: 2px; }
.tbp-share-lbl { margin: 0 0 10px; font-family: var(--font-urdu, sans-serif); font-weight: 700; font-size: 14px; color: var(--ink-700, #262626); }
.tbp-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The rows behind "more". A second grid inside the same panel, so expanding
   grows the tray rather than replacing what is already on screen. */
.tbp-share-grid--more { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline, #dedcd5); }
.tbp-share-grid--more[hidden] { display: none; }
/* "more" is a divider between the two halves of the tray, not a destination
   like the rows around it. Left in the grid it sat in one column with a hole
   beside it, reading as a share target whose partner had gone missing. It
   spans the full width and is quieter than the buttons it separates. */
.tbp-share-grid .tbp-sh.nat { grid-column: 1 / -1; justify-content: center; background: transparent; border-style: dashed; color: var(--ink-500, #585858); font-weight: 600; }
.tbp-share-grid .tbp-sh.nat:hover { background: var(--paper-sunken, #f4f2ec); color: var(--ink, #0a0a0a); }
.tbp-sh.nat .i { transition: transform .18s ease; }
.tbp-sh.nat.is-open .i { transform: rotate(180deg); }
html.dark .tbp-share-grid .tbp-sh.nat { color: var(--tbp-text-3); }
html.dark .tbp-share-grid .tbp-sh.nat:hover { background: #232326; color: #e8e8e8; }
html.dark .tbp-share-grid--more { border-top-color: #2c2c30; }
.tbp-sh { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--btn-radius, 9px);
  border: 1px solid var(--hairline, #dedcd5); background: var(--paper, #fafaf7); color: var(--ink, #0a0a0a);
  font-family: var(--font-urdu, sans-serif); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, transform .08s; }
/* Scoped to the open tray so these outrank the entrance transform above --
   .tbp-share-tray.open .tbp-sh would otherwise pin every row to translateY(0)
   and the hover lift would never move. */
.tbp-share-tray.open .tbp-sh:hover { background: var(--paper-sunken, #f4f2ec); transform: translateY(-1px); }
.tbp-share-tray.open .tbp-sh:active { transform: translateY(0); }
.tbp-sh .i { display: inline-flex; width: 20px; height: 20px; flex: none; }
.tbp-sh .i svg { width: 20px; height: 20px; }
.tbp-sh.wa .i { color: #25D366; } .tbp-sh.x .i { color: #111; } .tbp-sh.fb .i { color: #1877F2; }
.tbp-sh.tg .i { color: #229ED9; } .tbp-sh.cp .i, .tbp-sh.nat .i { color: var(--ink-500, #585858); }
.tbp-sh.img .i { color: var(--brand, #b0070f); }
.tbp-sh.ok { border-color: var(--green, #18794e); color: var(--green, #18794e); }
.tbp-sh.busy { opacity: .6; pointer-events: none; }
html.dark .tbp-share-tray { background: #1a1a1c; border-color: #2c2c30; }
html.dark .tbp-sh { background: #232326; border-color: #33333a; color: #e8e8e8; }
html.dark .tbp-sh.x .i { color: #fff; }

/* Quote-share chip — follows a reader's selection inside .art-body.
   position:absolute (not fixed) so it stays anchored to the passage while the
   page scrolls; the script hides it on scroll rather than repositioning. */
.tbp-quote-chip { position: absolute; z-index: 60; display: none; align-items: center; gap: 7px;
  padding: 8px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand-700, #b0070f); color: #fff;
  font-family: var(--font-urdu, sans-serif); font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.tbp-quote-chip.on { display: inline-flex; }
.tbp-quote-chip:hover { filter: brightness(1.08); }
.tbp-quote-chip.busy { opacity: .6; pointer-events: none; }
.tbp-quote-chip svg { flex: 0 0 auto; }
@media print { .tbp-quote-chip { display: none !important; } }