/* =====================================================================
   BLOG POST (EN + AR) — design F "Orbit"
   purple poster header (category chip, H1 with one accent word, dek,
   byline) · featured image printing out of the poster · sticky "On this
   page" + share + help beside a 72ch reading column (18 px body, styled
   tables / code / lists / quotes / images / FAQ) · mid-article package
   ticket (kit .tk) · prev/next · author card · illustrative showcase ·
   related cards on a purple band · final orange poster.
   Bootstrap-safe class names (bp- prefix). Logical properties throughout;
   Arabic overrides under :root:lang(ar). Every element in the body is
   static HTML; JS only adds the progress bar, scroll-spy, copy buttons.
   ===================================================================== */

/* ---------- HERO (purple poster) ---------- */
.bp-hero .ph__in { padding-block-end: clamp(40px, 6vw, 84px); }
.bp-hero--cover .ph__in { padding-block-end: calc(var(--bp-pull) + clamp(28px, 4vw, 56px)); }
.bp-hero__copy { max-width: 1080px; width: 100%; gap: clamp(14px, 1.8vw, 22px); }
.bp-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; position: relative; z-index: 3; }
.bp-cat { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--b2); color: var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: rotate(calc(-2deg * var(--dir))); }
.bp-cat i { font-size: 11px; }
:root:lang(ar) .bp-cat { letter-spacing: 0; text-transform: none; font-size: 13.5px; font-weight: 700; }
.bp-hero__eyebrow { color: var(--b2-lite); }
.bp-hero__title { font-size: clamp(34px, 5.6vw, 84px); line-height: .94; max-width: 1000px; text-wrap: balance; }
.bp-hero__title em { color: var(--b2-on-deep); font-size: 1.06em; }
:root:lang(ar) .bp-hero__title { font-size: clamp(30px, 4.5vw, 64px); line-height: 1.28; font-weight: 800; }
:root:lang(ar) .bp-hero__title em { font-size: 1em; line-height: 1.1; }
.bp-hero__lead { max-width: 42em; color: var(--on-deep-2); font-weight: 400; font-size: clamp(16.5px, 1.3vw, 20px); }
:root:lang(ar) .bp-hero__lead { line-height: 1.85; }
.bp-hero__lead[lang="en"], .bp-hero__title[lang="en"] { font-family: "Inter", "Inter Fallback", system-ui, sans-serif; letter-spacing: 0; }

/* byline */
.bp-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.bp-by__avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font: 400 19px/1 var(--f-num); letter-spacing: .02em; flex: none; direction: ltr; }
.bp-by__who { display: grid; gap: 1px; }
.bp-by__name { font-weight: 700; font-size: 15.5px; color: var(--cream); }
.bp-by__role { font-size: 13px; color: var(--on-deep-2); }
.bp-by__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--on-deep-2); }
.bp-by__meta li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bp-by__meta i { color: var(--b2-lite); font-size: 13px; }
.bp-by__meta time { color: var(--cream); font-weight: 600; }
@media (min-width: 640px) { .bp-by__meta { padding-inline-start: 18px; border-inline-start: 1px solid var(--line-deep); } }

/* ---------- COVER (prints out of the poster bottom) ---------- */
:root { --bp-pull: clamp(56px, 9vw, 150px); }
.bp-cover__wrap { position: relative; z-index: 3; }
.bp-cover { position: relative; max-width: 1080px; margin: calc(-1 * var(--bp-pull)) auto 0; border-radius: var(--r-lg); overflow: hidden; background: var(--cream-2); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .65), 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent); }
.bp-cover picture { display: contents; }
.bp-cover img { width: 100%; height: auto; display: block; }

/* ---------- READ LAYOUT ---------- */
.bp-read { padding-block: clamp(32px, 4.5vw, 64px) clamp(16px, 2vw, 28px); }
.bp-hero--cover + .bp-cover__wrap + .bp-read { padding-block-start: clamp(28px, 4vw, 56px); }
.bp-layout { max-width: 1080px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bp-main { min-width: 0; }
@media (min-width: 1024px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr) 280px; column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .bp-side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 18px); max-height: calc(100vh - var(--nav-h) - 36px); overflow: auto; scrollbar-width: thin; padding-bottom: 8px; display: grid; gap: 18px; align-content: start; }
  .bp-main { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1023px) {
  .bp-side__extra { display: none; }
}

/* ---------- TABLE OF CONTENTS (<details>: open without JS; JS folds it on phones) ---------- */
.bp-toc { background: var(--paper); border-radius: 20px; box-shadow: 0 0 0 1px var(--line); overflow: clip; }
.bp-toc__sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 18px; cursor: pointer; font-weight: 700; font-size: 14.5px; }
.bp-toc__sum::-webkit-details-marker { display: none; }
.bp-toc__t { display: inline-flex; align-items: center; gap: 10px; }
.bp-toc__t i { color: var(--b2-ink); }
.bp-toc__chev { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; transition: transform .4s var(--ease); }
.bp-toc[open] .bp-toc__chev { transform: rotate(180deg); }
.bp-toc__nav { padding: 0 10px 12px; }
.bp-toc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.bp-toc__i a { position: relative; display: block; padding: 9px 12px 9px 16px; min-height: 40px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: color .25s, background-color .25s; }
.bp-toc__i a::before { content: ""; position: absolute; inset-inline-start: 4px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: transparent; transition: background-color .25s; }
.bp-toc__i--h3 a { padding-inline-start: 30px; font-size: 13px; }
.bp-toc__i--h3 a::before { inset-inline-start: 18px; }
.bp-toc__i a:hover { color: var(--ink); background: color-mix(in oklab, var(--cream-2) 60%, transparent); }
.bp-toc__i a.is-on { color: var(--b1-ink); font-weight: 650; }
.bp-toc__i a.is-on::before { background: var(--b2); }
:root:lang(ar) .bp-toc__i a { font-size: 14.5px; line-height: 1.6; }
@media (min-width: 1024px) { .bp-toc__nav { max-height: 56vh; overflow: auto; scrollbar-width: thin; } }

/* ---------- SHARE ---------- */
.bp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-share__label { font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-inline-end: 4px; }
:root:lang(ar) .bp-share__label { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.bp-share__btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line); text-decoration: none; font-size: 17px; transition: background-color .3s, color .3s, transform .4s var(--ease), box-shadow .3s; }
.bp-share__btn:hover { background: var(--b1-solid); color: var(--cream); box-shadow: none; transform: translateY(-3px); }
.bp-share__btn--copy i { font-size: 21px; }
.bp-share__done { position: absolute; inset-inline-start: 50%; bottom: calc(100% + 8px); translate: -50% 4px; padding: 5px 9px; border-radius: 8px; background: var(--ink); color: var(--cream); font: 650 11.5px/1 var(--f-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, translate .3s var(--ease); }
[dir="rtl"] .bp-share__done { translate: 50% 4px; }
.bp-share__btn.is-copied { background: var(--b2); color: var(--ink); }
.bp-share__btn.is-copied .bp-share__done { opacity: 1; translate: -50% 0; }
[dir="rtl"] .bp-share__btn.is-copied .bp-share__done { translate: 50% 0; }

/* ---------- HELP ticket (after prev/next) ---------- */
.bp-help { position: relative; display: grid; gap: 8px; justify-items: start; padding: 20px 22px 22px; border-radius: 20px; background: var(--deep); color: var(--cream); overflow: clip; }
.bp-help::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 100% 0%, color-mix(in oklab, var(--b1) 55%, var(--deep)) 0, transparent 70%); pointer-events: none; }
.bp-help > * { position: relative; }
.bp-help__t { font: 400 clamp(22px, 1.8vw, 26px)/1.05 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
:root:lang(ar) .bp-help__t { font-weight: 800; line-height: 1.4; font-size: 20px; }
.bp-help__p { font-size: 14px; line-height: 1.5; color: var(--on-deep-2); }
.bp-help .button { margin-top: 6px; }
.bp-help--foot { margin-top: 28px; }

/* ---------- PROSE (the article body) ---------- */
.bp-prose { max-width: 72ch; font-size: clamp(17px, 1.2vw, 18px); line-height: 1.72; color: color-mix(in oklab, var(--ink) 90%, var(--cream)); overflow-wrap: break-word; }
.bp-prose[lang="en"] { font-family: "Inter", "Inter Fallback", system-ui, sans-serif; line-height: 1.72; }
:root:lang(ar) .bp-prose { line-height: 1.95; font-size: clamp(17px, 1.2vw, 18.5px); }
.bp-prose > * + * { margin-top: 1.1em; }
.bp-prose > :first-child { margin-top: 0; }
.bp-prose p { margin: 0; }
.bp-prose > p + p { margin-top: 1.1em; }
.bp-prose strong { color: var(--ink); font-weight: 700; }
.bp-prose em { font-style: italic; }
.bp-prose a { color: var(--b1-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; text-decoration-color: color-mix(in oklab, var(--b1) 45%, transparent); transition: text-decoration-color .25s, color .25s; }
.bp-prose a:hover { color: var(--b1-accent); text-decoration-color: var(--b2); }
.bp-prose mark { background: color-mix(in oklab, var(--b2) 30%, transparent); color: inherit; padding: .05em .2em; border-radius: 4px; }
.bp-prose small { font-size: .85em; }
/* buttons inside the article (package ticket, stub CTA) keep the button look, not the prose link underline */
.bp-prose a.button, .bp-prose a.button:hover { text-decoration: none; }
/* headings: display h2 with an orange index bar, strong h3 */
.bp-prose h2 { font: 400 clamp(28px, 3.1vw, 42px)/.98 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--ink); margin-top: 2.1em; margin-bottom: .55em; scroll-margin-top: calc(var(--nav-h) + 28px); text-wrap: pretty; }
.bp-prose h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--b2); margin-bottom: 16px; }
.bp-prose h3 { font: 700 clamp(20px, 1.75vw, 24px)/1.3 var(--f-body); letter-spacing: -.012em; color: var(--ink); margin-top: 1.7em; margin-bottom: .45em; scroll-margin-top: calc(var(--nav-h) + 28px); }
.bp-prose h4, .bp-prose h5, .bp-prose h6 { font: 700 clamp(17px, 1.4vw, 19px)/1.35 var(--f-body); color: var(--ink); margin-top: 1.5em; margin-bottom: .35em; }
.bp-prose h2 + h3, .bp-prose h3 + h4 { margin-top: .9em; }
:root:lang(ar) .bp-prose h2 { font-weight: 800; line-height: 1.32; font-size: clamp(25px, 2.6vw, 34px); }
:root:lang(ar) .bp-prose h3 { letter-spacing: 0; line-height: 1.6; font-size: clamp(19px, 1.6vw, 22px); }
:root:lang(ar) .bp-prose h4, :root:lang(ar) .bp-prose h5 { line-height: 1.6; }
/* lists */
.bp-prose ul, .bp-prose ol { margin: 0; padding-inline-start: 1.5em; display: grid; gap: .5em; }
.bp-prose ul { list-style: disc; }
.bp-prose ol { list-style: decimal; }
.bp-prose li { padding-inline-start: .15em; }
.bp-prose li::marker { color: var(--b2-ink); font-weight: 700; }
.bp-prose li > ul, .bp-prose li > ol { margin-top: .5em; }
.bp-prose li > p { margin: 0; }
/* separators: a hairline with an orange star */
.bp-prose hr { position: relative; margin: 2.4em auto; width: 100%; height: 1px; border: 0; background: var(--line); opacity: 1; overflow: visible; }
.bp-prose hr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; translate: -50% -50%; background: var(--b2); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: 0 0 0 10px var(--cream); }
/* quotes */
.bp-prose blockquote { margin: 1.8em 0; padding: 6px 0 6px; padding-inline-start: 22px; border-inline-start: 3px solid var(--b2); font: 400 clamp(19px, 1.6vw, 23px)/1.45 var(--f-serif); font-style: var(--accent-style); color: var(--ink); }
.bp-prose blockquote p { font: inherit; color: inherit; }
.bp-prose blockquote p + p { margin-top: .7em; }
.bp-prose blockquote strong { font-weight: 700; }
:root:lang(ar) .bp-prose blockquote { font-family: var(--f-body); font-weight: 500; font-size: clamp(17.5px, 1.3vw, 20px); line-height: 1.9; }
/* code */
.bp-prose code { font: .88em/1.5 var(--f-mono); color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); padding: .12em .42em; border-radius: 6px; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.bp-prose pre { position: relative; margin: 1.7em 0; padding: 20px 22px; border-radius: 18px; background: var(--ink); color: var(--cream); overflow-x: auto; font: 14.5px/1.65 var(--f-mono); direction: ltr; text-align: start; tab-size: 2; overscroll-behavior-x: contain; }
/* code blocks wrap (no sideways scrolling on phones); indentation is kept by pre-wrap */
.bp-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.bp-prose pre code { background: none; padding: 0; font: inherit; color: inherit; overflow-wrap: anywhere; white-space: pre-wrap; }
.bp-pre { position: relative; margin: 1.7em 0; }
.bp-pre > pre { margin: 0; padding-top: 54px; }
.bp-copy { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: color-mix(in oklab, var(--cream) 14%, transparent); color: var(--cream); font: 650 12px/1 var(--f-body); letter-spacing: .04em; transition: background-color .25s, color .25s; }
.bp-copy:hover { background: var(--b2); color: var(--ink); }
.bp-copy.is-copied { background: var(--b2); color: var(--ink); }
:root:lang(ar) .bp-copy { font-family: var(--f-ar); letter-spacing: 0; font-size: 13px; }
/* tables scroll inside a focusable region (the wrapper is added server-side) */
.bp-table { margin: 1.7em 0; overflow-x: auto; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bp-table:focus-visible { outline: 3px solid var(--b1-accent); outline-offset: 3px; }
.bp-prose table { width: 100%; min-width: 0; border-collapse: collapse; border-spacing: 0; font-size: 15.5px; line-height: 1.5; caption-side: top; margin: 0; }
.bp-prose caption { text-align: start; padding: 16px 18px 4px; font-weight: 700; color: var(--ink); }
.bp-prose th, .bp-prose td { padding: 12px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); border-top: 0; border-inline: 0; }
.bp-prose thead th { font: 700 12.5px/1.35 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--cream-2); white-space: nowrap; }
:root:lang(ar) .bp-prose thead th { letter-spacing: 0; text-transform: none; font-size: 14px; white-space: normal; }
.bp-prose tbody th { font-weight: 650; color: var(--ink); }
.bp-prose td { color: color-mix(in oklab, var(--ink) 88%, var(--cream)); }
.bp-prose td:first-child { color: var(--ink); font-weight: 600; }
.bp-prose tbody tr:nth-child(even) > * { background: color-mix(in oklab, var(--cream) 45%, var(--paper)); }
.bp-prose tr:last-child > * { border-bottom: 0; }
.bp-prose td p, .bp-prose th p { margin: 0; }
.bp-prose td ul, .bp-prose td ol { gap: .25em; padding-inline-start: 1.2em; }
.wsr-table-merged-header > :first-child { white-space: normal; }
/* a 2-column table fits the phone column; 3+ columns keep a readable width and scroll inside .bp-table */
.bp-table:has(tr > :nth-child(3)) > table { min-width: 520px; }
.bp-table:has(tr > :nth-child(4)) > table { min-width: 640px; }
.bp-table:has(tr > :nth-child(6)) > table { min-width: 780px; }
@media (max-width: 639px) {
  .bp-prose thead th { white-space: normal; }
  .bp-table:has(tr > :nth-child(3)) th:first-child, .bp-table:has(tr > :nth-child(3)) td:first-child { min-width: 9.5em; }
}
/* images, figures, embeds */
.bp-prose img { max-width: 100%; height: auto; display: block; border-radius: 18px; background: var(--cream-2); }
.bp-prose p:has(> img:only-child) { margin-top: 1.8em; margin-bottom: 1.8em; }
.bp-prose p > img:only-child { margin-inline: auto; }
.bp-prose figure { margin: 1.8em 0; }
.bp-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.bp-prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 18px; background: var(--ink); }
/* the FAQ section (wrapper added server-side): question rows with an orange "?" badge, answers indented under them */
.bp-faq { margin-top: 1.2em; border-top: 2px solid var(--ink); }
.bp-faq > h3, .bp-faq > h4 { position: relative; margin: 0; padding: 18px 0 8px; padding-inline-start: 46px; border-top: 1px solid var(--line); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
.bp-faq > h3:first-child, .bp-faq > h4:first-child { border-top: 0; }
.bp-faq > h3::before, .bp-faq > h4::before, .bp-faq > p > strong:only-child::before { content: "?" / ""; position: absolute; inset-inline-start: 0; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font: 400 19px/1 var(--f-num); }
.bp-faq > p > strong:only-child::before { top: -2px; }
.bp-faq > h3 + h3, .bp-faq > h4 + h4 { border-top: 0; }
.bp-faq > p, .bp-faq > ul, .bp-faq > ol, .bp-faq > div { margin: 0; padding: 0 0 18px; padding-inline-start: 46px; }
.bp-faq > p + p, .bp-faq > ul + p, .bp-faq > p + ul { padding-top: 0; margin-top: -8px; }
.bp-faq > p > strong:only-child { position: relative; display: block; margin-top: 14px; padding-top: 18px; padding-bottom: 6px; margin-inline-start: -46px; padding-inline-start: 46px; border-top: 1px solid var(--line); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.4; }
.bp-faq > p:first-child > strong:only-child { border-top: 0; margin-top: 0; }
:root:lang(ar) .bp-faq > h3, :root:lang(ar) .bp-faq > h4 { line-height: 1.6; }
:root:lang(ar) .bp-faq > h3::before, :root:lang(ar) .bp-faq > h4::before, :root:lang(ar) .bp-faq > p > strong:only-child::before { content: "؟" / ""; font-family: var(--f-display); font-weight: 800; font-size: 17px; }
/* stub (no body yet) */
.bp-stub { color: var(--ink-2); }

/* ---------- MID-ARTICLE TICKET (kit .tk on the reading surface) ---------- */
.bp-tk { margin: 2.6em 0 !important; max-width: none; --tk-hole: var(--cream); }
.bp-tk__eyebrow { font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--b2-lite); }
:root:lang(ar) .bp-tk__eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.bp-tk .tk__name { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--cream); margin: 0; }
:root:lang(ar) .bp-tk .tk__name { font-weight: 800; line-height: 1.35; font-size: clamp(22px, 2vw, 28px); }
.bp-tk .tk__for, .bp-tk .tk__list li, .bp-tk .tk__label, .bp-tk .tk__approx { margin: 0; }
.bp-tk .tk__list { padding: 0; list-style: none; color: var(--cream); }
.bp-tk .tk__list li { display: flex; gap: 10px; padding: 0; }
.bp-tk .tk__list i { color: var(--b2); flex: none; margin-top: .15em; }
.bp-tk .tk__cta { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .bp-tk .tk__cta { grid-template-columns: 1fr; } }
.bp-tk .button--solid { background: var(--b2); color: var(--ink); }
.bp-tk .button--solid:hover { background: var(--hot-lite); }
.bp-tk .button--line { color: var(--cream); }
.bp-tk .button--line:hover { background: var(--cream); color: var(--deep); }
.bp-tk .button span { white-space: normal; }

/* ---------- FOOT ROW · PREV/NEXT ---------- */
.bp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); }
.bp-foot__all { font-size: 15px; }
.bp-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
@media (max-width: 639px) { .bp-pn { grid-template-columns: 1fr; } .bp-pn__a--empty { display: none; } }
.bp-pn__a { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: 18px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .3s; }
.bp-pn__a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px color-mix(in oklab, var(--ink) 55%, transparent); }
.bp-pn__a--empty { background: none; box-shadow: none; }
.bp-pn__a--next { text-align: end; justify-items: end; }
.bp-pn__k { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--b1-ink); }
:root:lang(ar) .bp-pn__k { letter-spacing: 0; text-transform: none; font-size: 13px; }
.bp-pn__t { font-size: 16px; font-weight: 650; line-height: 1.35; }
:root:lang(ar) .bp-pn__t { line-height: 1.6; }
.bp-pn__a:hover .bp-pn__t { color: var(--b1-accent); }

/* ---------- AUTHOR CARD ---------- */
.bp-author { padding-block: clamp(20px, 3vw, 40px) 0; }
.bp-author__card { max-width: 1080px; margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: start; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.bp-author__avatar { width: clamp(60px, 6vw, 84px); height: clamp(60px, 6vw, 84px); border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--cream); font: 400 clamp(22px, 2.4vw, 32px)/1 var(--f-num); direction: ltr; }
.bp-author__body { display: grid; gap: 6px; }
.bp-author__h { font: 700 12px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--b1-ink); margin: 0; }
:root:lang(ar) .bp-author__h { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.bp-author__name { font: 400 clamp(24px, 2.2vw, 32px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--ink); }
:root:lang(ar) .bp-author__name { font-weight: 800; line-height: 1.35; }
.bp-author__role { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.bp-author__bio { margin-top: 4px; font-size: 16px; line-height: 1.6; color: color-mix(in oklab, var(--ink) 88%, var(--cream)); max-width: 70ch; }
:root:lang(ar) .bp-author__bio { line-height: 1.85; }
.bp-author__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 2px; font-size: 14.5px; }
.bp-author__links .link-arrow { min-height: 40px; }
@media (max-width: 479px) { .bp-author__card { grid-template-columns: 1fr; } }

/* ---------- ILLUSTRATIVE SHOWCASE ---------- */
.bp-show { padding-block: clamp(28px, 3.5vw, 48px) 0; }
.bp-show .wrap { max-width: calc(1080px + 2 * var(--g)); }
.bp-show__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.bp-show__tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--b1-solid); color: var(--cream); font: 800 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bp-show__note { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.bp-show__grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-show__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp-show__item { margin: 0; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease); }
.bp-show__item:hover { transform: translateY(-3px); }
.bp-show__item img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) { .bp-show__grid, .bp-show__grid--3 { grid-template-columns: 1fr; } }

/* ---------- RELATED (purple band) ---------- */
.bp-rel { margin-top: clamp(40px, 5vw, 72px); padding-block: clamp(48px, 6vw, 88px); }
.bp-rel__head { margin-bottom: clamp(22px, 3vw, 36px); }
.bp-rel__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .bp-rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* desktop: one row; --n (3 or 4, set by the view from the number of related posts) so 3 cards fill the row */
@media (min-width: 1100px) { .bp-rel__grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.bp-rel__card { position: relative; }
.bp-rel__a { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--paper); color: var(--ink); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 0 0 1px color-mix(in oklab, var(--cream) 14%, transparent); transition: transform .5s var(--ease), box-shadow .4s; }
.bp-rel__a:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7); }
.bp-rel__a:focus-visible { outline: 3px solid var(--b2); outline-offset: 3px; }
.bp-rel__art { position: relative; display: grid; align-content: end; gap: 2px; aspect-ratio: 16 / 9; padding: 14px 16px; overflow: hidden; background: linear-gradient(140deg, var(--b1-solid), var(--deep) 70%); color: var(--cream); }
.bp-rel__art--img { padding: 0; background: var(--deep-2); }
/* one column on phones: a cover-less card gets a short typographic band, not a tall empty block */
@media (max-width: 639px) { .bp-rel__art:not(.bp-rel__art--img) { aspect-ratio: 3 / 1; } .bp-rel__n { font-size: 64px; } }
.bp-rel__art picture { display: contents; }
.bp-rel__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bp-rel__a:hover .bp-rel__art img { transform: scale(1.06); }
.bp-rel__n { position: absolute; inset-inline-end: 10px; top: 2px; font: 400 clamp(78px, 7vw, 110px)/1 var(--f-num); color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--cream) 55%, transparent); direction: ltr; transition: color .4s; }
.bp-rel__a:hover .bp-rel__n { color: var(--b2); }
.bp-rel__word { position: relative; font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--b2-lite); }
:root:lang(ar) .bp-rel__word { letter-spacing: 0; text-transform: none; font-size: 13px; }
/* the category already shows as the card's kicker: the art panel keeps only the numeral */
.bp-rel__a:has(.bp-rel__kicker) .bp-rel__word { display: none; }
.bp-rel__body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; }
.bp-rel__kicker { font: 800 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--b1-ink); }
:root:lang(ar) .bp-rel__kicker { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.bp-rel__t { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); margin: 0; }
:root:lang(ar) .bp-rel__t { letter-spacing: 0; line-height: 1.6; font-size: 17px; }
.bp-rel__x { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
:root:lang(ar) .bp-rel__x { line-height: 1.8; }
.bp-rel__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--b1-accent); }
.bp-rel__more i { transition: transform .35s var(--ease); }
.bp-rel__a:hover .bp-rel__more i { transform: translateX(calc(4px * var(--dir))); }

/* ---------- FINAL poster ---------- */
.bp-cta .final__title .l { white-space: normal; font-size: clamp(44px, 9.2vw, 150px); line-height: .9; }
.bp-cta .final__title em { font-size: 1.02em; color: var(--deep); }
:root:lang(ar) .bp-cta .final__title .l { font-size: clamp(38px, 7.4vw, 112px); line-height: 1.25; }

/* ---------- READING PROGRESS (JS) ---------- */
.bp-progress { position: fixed; top: 0; inset-inline-start: 0; width: 100%; height: 3px; z-index: 70; background: var(--b2); transform-origin: calc(50% - 50% * var(--dir)) 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ---------- RTL / Arabic isolation of Latin runs, code and prices ---------- */
/* Latin-run spans (translate="no") stay bidi-transparent (no isolation): a phrase such as "(iOS + Android)" or
   "(Shopify / WooCommerce)" is split into several spans, and isolating each one reversed the words and broke the
   brackets in RTL. Without isolation the text renders exactly as the current template renders the same DB HTML.
   (overrides the kit's `:root:lang(ar) span[translate="no"] { unicode-bidi: plaintext }` for this page's content) */
:root:lang(ar) :is(.bp-prose, .bp-hero, .bp-rel, .bp-pn, .bp-toc, .bp-author, .bp-tk) span[translate="no"] { unicode-bidi: normal; }
:root:lang(ar) .bp-prose [translate="no"] { font-family: var(--f-ar); }
:root:lang(ar) .bp-prose pre [translate="no"], :root:lang(ar) .bp-prose code [translate="no"] { font-family: inherit; }
:root:lang(ar) .bp-by__meta time, :root:lang(ar) .bp-prose [data-price] { unicode-bidi: isolate; }

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  .bp-share__btn, .bp-pn__a, .bp-rel__a, .bp-show__item, .bp-cat, .bp-rel__art img { transition: none; }
}
@media print {
  .bp-side, .bp-help, .bp-cta, .bp-rel, .bp-show, .bp-foot, .bp-pn, .bp-progress, .bp-tk, .bp-copy { display: none !important; }
  .bp-prose { max-width: none; }
}