/* ==========================================================================
   Articles ("Kashi editorial"): a magazine layer for /blog/ on top of app.css + kashi.css.
   - Covers are generated (blog/covers.py): subject colour + white girih line pattern + a glazed khatam star.
   - Long-form Persian: 17–18px Vazirmatn at line-height 2, ~40em measure, octagram markers, English examples set
     in Atkinson as inline LTR islands (core/markdown.py marks them lang="en").
   RTL-first logical properties; transform/opacity motion only, and only at data-motion >= 1.
   ========================================================================== */

:root {
  /* the khatam (eight-point star) as a clip-path: list bullets, heading marks, kickers */
  --octa: polygon(50% 0, 35.3% 14.7%, 14.7% 14.7%, 14.7% 35.3%, 0 50%, 14.7% 64.7%, 14.7% 85.3%, 35.3% 85.3%, 50% 100%,
    64.7% 85.3%, 85.3% 85.3%, 85.3% 64.7%, 100% 50%, 85.3% 35.3%, 85.3% 14.7%, 64.7% 14.7%);
  --bl-en: "Atkinson Next", "Vazirmatn NL", system-ui, sans-serif;
  --bl-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* girih variants for covers (white lines, used over the dark glaze) */
  --bl-p0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.15' stroke-width='1.2'%3E%3Cpath d='M24 9L19.6 13.4L13.4 13.4L13.4 19.6L9 24L13.4 28.4L13.4 34.6L19.6 34.6L24 39L28.4 34.6L34.6 34.6L34.6 28.4L39 24L34.6 19.6L34.6 13.4L28.4 13.4Z'/%3E%3Cpath d='M24 0V9M24 39V48M0 24H9M39 24H48M13.4 13.4L5 5M34.6 13.4L43 5M13.4 34.6L5 43M34.6 34.6L43 43M0 5H5V0M48 5H43V0M0 43H5V48M48 43H43V48'/%3E%3C/g%3E%3C/svg%3E");
  --bl-p1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.15' stroke-width='1.1'%3E%3Crect x='10' y='10' width='20' height='20'/%3E%3Crect x='10' y='10' width='20' height='20' transform='rotate(45 20 20)'/%3E%3Cpath d='M0 0L10 10M40 0L30 10M0 40L10 30M40 40L30 30'/%3E%3C/g%3E%3C/svg%3E");
  --bl-p2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle r='20'/%3E%3Ccircle cx='40' r='20'/%3E%3Ccircle cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3C/g%3E%3C/svg%3E");
  --bl-p3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.15' stroke-width='1.1'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z'/%3E%3Cpath d='M20 9L27.8 12.2L31 20L27.8 27.8L20 31L12.2 27.8L9 20L12.2 12.2Z'/%3E%3C/g%3E%3C/svg%3E");
  --bl-ok-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --bl-no-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* subject colours (--h fills covers; --hk is the readable text tint of the same hue) */
[class*="bl-f-"] { --h: var(--sk-function); --hk: var(--h); }
.bl-f-listening { --h: var(--sk-listening); } .bl-f-reading { --h: var(--sk-reading); }
.bl-f-writing { --h: var(--sk-writing); } .bl-f-speaking { --h: var(--sk-speaking); }
.bl-f-vocabulary { --h: var(--sk-vocabulary); } .bl-f-grammar { --h: var(--sk-grammar); }
.bl-f-pronunciation { --h: var(--sk-pronunciation); } .bl-f-exam { --h: #8e2756; } .bl-f-method { --h: var(--sk-function); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [class*="bl-f-"] { --hk: color-mix(in srgb, var(--h) 40%, #fff); }
}
:root[data-theme="dark"] [class*="bl-f-"] { --hk: color-mix(in srgb, var(--h) 40%, #fff); }

/* ---- cover art ------------------------------------------------------------------------------------------------ */
.bl-cover {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; color: #fff;
  background-color: #14122b;
  background-image: var(--bl-pat, var(--bl-p0)),
    radial-gradient(110% 90% at 100% 0%, rgb(255 255 255 / 0.18), transparent 55%),
    linear-gradient(140deg, #14122b 0%, color-mix(in srgb, var(--h) 70%, #14122b) 45%, var(--h) 100%);
  background-size: var(--ps, 48px) var(--ps, 48px), auto, auto;
}
.bl-p1 { --bl-pat: var(--bl-p1); } .bl-p2 { --bl-pat: var(--bl-p2); } .bl-p3 { --bl-pat: var(--bl-p3); }
.bl-cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); border-radius: inherit; pointer-events: none; }
.bl-star {
  --tf: var(--tile-sun); --tl: var(--tile-sun-ledge); --ti: var(--on-sun);
  position: absolute; inset-inline-end: var(--sx, 22%); inset-block-start: var(--sy, 50%); block-size: var(--ss, 110%);
  aspect-ratio: 140 / 148; transform: translate(-50%, -50%); display: grid; place-items: center;
}
.bl-t-done .bl-star { --tf: #22b8ad; --tl: #05655e; --ti: #0f0e22; }
.bl-t-pearl .bl-star { --tf: #f4f1fb; --tl: #b6b2d1; --ti: color-mix(in srgb, var(--h) 80%, #14122b); }
.bl-star svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.bl-star .k-ledge { fill: var(--tl); stroke: var(--tl); stroke-width: 7; stroke-linejoin: round; }
.bl-star .k-face { fill: var(--tf); stroke: var(--tf); stroke-width: 7; stroke-linejoin: round; transition: transform 240ms var(--ease-std); }
.bl-star .k-glaze { fill: none; stroke: rgb(255 255 255 / 0.4); stroke-width: 2; stroke-linejoin: round; transition: transform 240ms var(--ease-std); }
.bl-star .bl-halo { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.2; transform-box: view-box; transform-origin: 50px 50px;
  transform: rotate(var(--st, 0deg)) scale(1.3); transition: transform 700ms var(--ease-out); }
.bl-star .ic { position: relative; inline-size: 22%; block-size: auto; aspect-ratio: 1; color: var(--ti); margin-block-end: 7%;
  transition: transform 240ms var(--ease-std); }
.bl-cap { position: absolute; inset-inline-start: 14px; inset-block-end: 10px; direction: ltr; font: 700 0.75rem/1 var(--bl-en);
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.82); }
/* the star lifts and its outline turns a step when the card is pointed at (motion tier >= 1) */
html:not([data-motion="0"]) .bl-card:hover .bl-star .k-face,
html:not([data-motion="0"]) .bl-card:hover .bl-star .k-glaze,
html:not([data-motion="0"]) .bl-card:hover .bl-star .ic { transform: translateY(-4px); }
html:not([data-motion="0"]) .bl-card:hover .bl-star .bl-halo { transform: rotate(calc(var(--st, 0deg) + 45deg)) scale(1.3); }

/* ---- shared bits ---------------------------------------------------------------------------------------------- */
.bl-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--hk, var(--teal)); font-weight: 700; font-size: var(--fs-xs); line-height: 1.6; }
.bl-kick::before { content: ""; inline-size: 10px; block-size: 10px; background: currentColor; clip-path: var(--octa); flex: none; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.7; }
.bl-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.bl-meta .ic { inline-size: 15px; block-size: 15px; flex: none; }
.bl-dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.bl-sec-title { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); margin-block: 8px 14px; }
.bl-sec-title::after { content: ""; flex: 1; block-size: 1px; background: var(--hair); }
.bl-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ---- card ----------------------------------------------------------------------------------------------------- */
.bl-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-lg); overflow: hidden; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms; }
.bl-card-body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
.bl-card h3 { font-size: var(--fs-md); line-height: 1.6; font-weight: 700; }
.bl-link { color: inherit; text-decoration: none; }
.bl-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bl-link:focus-visible { outline: none; }
.bl-card:has(.bl-link:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 3px; }
.bl-card:hover { border-color: color-mix(in srgb, var(--hk) 45%, var(--hair)); box-shadow: var(--shadow); }
html:not([data-motion="0"]) .bl-card:hover { transform: translateY(-3px); }
.bl-card:hover h3 .bl-link, .bl-card:hover h2 .bl-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.bl-sum { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bl-card .bl-meta { margin-block-start: 4px; }
/* phones: list cards become a compact row (square tile + title), so 30+ articles stay scannable */
@media (max-width: 639px) {
  .bl-grid .bl-card { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; align-items: stretch; border-radius: 18px; }
  .bl-grid .bl-cover { aspect-ratio: auto; min-block-size: 96px; block-size: 100%; }
  .bl-grid .bl-star { inset-inline-end: 50%; inset-block-start: 50%; block-size: min(116px, 118%); }
  .bl-grid .bl-star .bl-halo, .bl-grid .bl-cap, .bl-grid .bl-sum { display: none; }
  .bl-grid .bl-card-body { padding: 12px 14px; gap: 4px; }
  .bl-grid .bl-card h3 { font-size: var(--fs-base); }
  .bl-grid .bl-kick { font-size: var(--fs-xs); }
  .bl-grid .bl-meta { font-size: var(--fs-xs); margin-block-start: 2px; }
  .bl-grid { gap: 12px; }
}

/* ---- index: masthead ------------------------------------------------------------------------------------------ */
.bl-mast { background: var(--lattice),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--saffron) 20%, transparent), transparent 62%),
    radial-gradient(60% 110% at 0% 100%, color-mix(in srgb, var(--teal-deco) 16%, transparent), transparent 60%);
  border-block-end: 1px solid var(--hair); padding-block: 4px 18px; }
.bl-mast-grid { display: grid; gap: 18px; padding-block: 14px 18px; }
@media (min-width: 900px) { .bl-mast-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: end; gap: 40px; padding-block: 26px 24px; } }
.bl-eyebrow span { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--card) 85%, transparent);
  border: 1px solid var(--hair); color: var(--teal); font-weight: 600; font-size: var(--fs-xs); }
.bl-eyebrow span::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--saffron); clip-path: var(--octa); }
.bl-mast h1 { font-size: clamp(1.625rem, 1.8vw + 1.05rem, 2.375rem); line-height: var(--lh-display); margin-block: 12px 8px; overflow-wrap: anywhere; }
.bl-h1-pre { color: var(--ink-2); font-weight: 700; font-size: 0.6em; vertical-align: 0.2em; }
.bl-mast .bl-dek { color: var(--ink-2); font-size: clamp(var(--fs-base), 0.2vw + 0.9rem, 1.0625rem); max-inline-size: 38em; text-wrap: pretty; }
.bl-search { display: flex; align-items: center; gap: 6px; min-block-size: 48px; padding: 4px; padding-inline-start: 14px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); box-shadow: 0 8px 24px -16px rgb(20 18 43 / 0.35); }
.bl-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 25%, transparent); }
.bl-search > .ic { inline-size: 20px; block-size: 20px; color: var(--ink-2); flex: none; }
.bl-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-base); padding: 6px 4px; outline: none; min-block-size: 0; }
.bl-search input::-webkit-search-cancel-button { margin-inline-start: 6px; }
.bl-search .btn { min-block-size: 40px; flex: none; }
.bl-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); mask-image: linear-gradient(to left, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent); }
.bl-chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .bl-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; mask-image: none; } }
.bl-chips a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--ctl-sm); padding-inline: 12px 10px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--hair)); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  white-space: nowrap; transition: background-color 120ms, border-color 120ms, color 120ms; }
.bl-chips a small { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-2); min-inline-size: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper-2); text-align: center; }
.bl-chips a:hover { border-color: var(--indigo); }
.bl-chips a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bl-chips a[aria-current] small { background: rgb(255 255 255 / 0.16); color: inherit; }
:root[data-theme="dark"] .bl-chips a[aria-current] small { background: rgb(0 0 0 / 0.12); }

/* ---- index: lead, features, popular ---------------------------------------------------------------------------- */
.bl-index-body { padding-block: 28px 64px; display: grid; gap: 28px; }
.bl-lead { grid-template-rows: auto; border-radius: var(--r-xl); }
.bl-lead .bl-cover { aspect-ratio: 16 / 9; }
.bl-lead-body { display: grid; gap: 10px; align-content: center; padding: 18px 18px 20px; }
.bl-lead h2 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem); line-height: 1.45; text-wrap: balance; }
.bl-lead .bl-sum { font-size: var(--fs-base); -webkit-line-clamp: 4; line-clamp: 4; max-inline-size: 36em; }
.bl-new { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--tile-sun); color: var(--on-sun); font-size: var(--fs-xs); }
.bl-more { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-weight: 700; margin-block-start: 4px; }
.bl-more .ic { inline-size: 18px; block-size: 18px; transition: transform 200ms var(--ease-out); }
html:not([data-motion="0"]) .bl-lead:hover .bl-more .ic { transform: translateX(-4px); }
@media (min-width: 860px) {
  .bl-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: none; }
  .bl-lead .bl-cover { aspect-ratio: auto; min-block-size: 300px; block-size: 100%; }
  .bl-lead .bl-star { block-size: min(calc(var(--ss) * 0.62), 320px); }
  .bl-lead-body { padding: 28px 32px; gap: 12px; }
}
.bl-row2 { display: grid; gap: 20px; }
@media (min-width: 640px) { .bl-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bl-row2.has-popular { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 640px) and (max-width: 999px) { .bl-row2.has-popular .bl-popular { grid-column: 1 / -1; } }
.bl-popular { padding: 16px 18px; border-radius: var(--r-lg); background: var(--lattice), color-mix(in srgb, var(--saffron) 10%, var(--card)); border: 1px solid var(--hair); }
.bl-popular h2 { font-size: var(--fs-md); margin-block-end: 6px; }
.bl-popular ol { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.bl-popular li { counter-increment: pop; display: grid; grid-template-columns: 2.1em minmax(0, 1fr); column-gap: 8px; padding-block: 10px; border-block-start: 1px solid var(--hair); }
.bl-popular li:first-child { border-block-start: 0; }
.bl-popular li::before { content: counter(pop, persian); grid-row: span 2; font: 800 var(--fs-xl)/1.1 var(--f-display); color: color-mix(in srgb, var(--indigo) 70%, transparent); }
.bl-popular a { color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.6; }
.bl-popular a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.bl-popular .bl-meta { font-size: var(--fs-xs); }
.bl-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 48px 16px; }
.bl-empty .khatam { margin-block-end: 8px; }

/* pagination */
.bl-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-block-start: 8px; }
.bl-pages ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bl-pages a, .bl-pages span[aria-current] { display: inline-grid; place-items: center; min-inline-size: 44px; block-size: 44px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.bl-pages a { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.bl-pages a:hover { border-color: var(--indigo); }
.bl-pages span[aria-current] { background: var(--ink); color: var(--paper); }
.bl-pages .bl-pg-step { display: inline-flex; gap: 6px; padding-inline: 14px; }
.bl-pages .ic { inline-size: 18px; block-size: 18px; }
@media (max-width: 479px) {
  .bl-pages { gap: 6px; }
  .bl-pages .bl-pg-step { padding-inline: 0; inline-size: 44px; justify-content: center; }
  .bl-pages .bl-pg-step span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- article: hero -------------------------------------------------------------------------------------------- */
.bl-hero { background: var(--lattice), linear-gradient(to bottom, color-mix(in srgb, var(--h) 11%, var(--paper)), var(--paper) 92%); padding-block: 4px 28px; }
.bl-hero-grid { display: grid; gap: 18px; margin-block-start: 10px; }
.bl-hero-text { display: grid; gap: 12px; align-content: center; min-inline-size: 0; }
.bl-hero h1 { font-size: clamp(1.375rem, 1.1vw + 1rem, 1.875rem); line-height: 1.45; text-wrap: balance; overflow-wrap: anywhere; }
.bl-hero .bl-dek { font-size: clamp(var(--fs-base), 0.25vw + 0.92rem, 1.125rem); line-height: 1.9; color: var(--ink-2); max-inline-size: 36em; text-wrap: pretty; }
.bl-review { padding: 0 8px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-fg); font-size: var(--fs-xs); }
.bl-byline { display: flex; align-items: center; gap: 12px; margin-block-start: 6px; }
.bl-byline .khatam.sm { inline-size: 46px; }
.bl-by { display: grid; gap: 0; font-size: var(--fs-sm); min-inline-size: 0; }
.bl-by a { color: var(--ink); font-weight: 700; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.3em; }
.bl-cover-hero { order: -1; aspect-ratio: 21 / 9; max-block-size: 200px; inline-size: 100%; border-radius: var(--r-xl); }
@media (min-width: 960px) {
  .bl-hero { padding-block: 4px 44px; }
  .bl-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 48px; margin-block-start: 18px; }
  .bl-cover-hero { order: 0; aspect-ratio: 5 / 4; max-block-size: none; border-radius: var(--r-xl); }
  .bl-cover-hero .bl-star { block-size: calc(var(--ss) * 0.72); }
}

/* ---- article: layout, table of contents ----------------------------------------------------------------------- */
.bl-layout { display: grid; gap: 22px; padding-block: 8px 48px; }
@media (max-width: 1099px) { .bl-layout { max-inline-size: 44rem; } }  /* one column: keep the ~40em measure */
.bl-main { min-inline-size: 0; }
.bl-side { min-inline-size: 0; }
.bl-side-cta { display: none; }
@media (min-width: 1100px) {
  .bl-layout { grid-template-columns: 272px minmax(0, 42rem); justify-content: center; gap: 64px; padding-block-start: 20px; }
  .bl-side { position: sticky; inset-block-start: 88px; align-self: start; display: grid; gap: 14px; max-block-size: calc(100dvh - 104px); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin; padding-block-end: 8px; }
  .bl-side-cta { display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border-radius: var(--r-lg); font-size: var(--fs-sm); background: var(--lattice), color-mix(in srgb, var(--saffron) 12%, var(--card));
    border: 1px solid var(--hair); }
  .bl-side-cta .btn { margin-block-start: 6px; }
}
.bl-toc { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); }
.bl-toc summary { display: flex; align-items: center; gap: 10px; min-block-size: 46px; padding-inline: 14px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; list-style: none; border-radius: var(--r-lg); }
.bl-toc summary::-webkit-details-marker { display: none; }
.bl-toc summary small { color: var(--ink-2); font-weight: 500; font-size: var(--fs-xs); }
.bl-toc summary .ic { inline-size: 20px; block-size: 20px; margin-inline-start: auto; transition: transform 200ms var(--ease-std); }
.bl-toc[open] summary .ic { transform: rotate(180deg); }
.bl-toc nav { border-block-start: 1px solid var(--hair); padding: 8px 8px 12px; }
.bl-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.bl-toc nav > ol > li { counter-increment: toc; }
.bl-toc a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 4px; align-content: center; min-block-size: 40px; padding: 6px 8px; border-radius: 10px; color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-sm); line-height: 1.7; transition: background-color 120ms, color 120ms; }
.bl-toc nav > ol > li > a::before { content: counter(toc, persian); color: var(--hk); font-weight: 800; }
.bl-toc ol ol a { grid-template-columns: 1fr; padding-inline-start: calc(1.6em + 12px); font-size: var(--fs-xs); }
.bl-toc a:hover { background: var(--paper-2); color: var(--ink); }
.bl-toc a.is-active { background: color-mix(in srgb, var(--h) 11%, var(--card)); color: var(--ink); font-weight: 700;
  border-inline-start: 3px solid var(--hk); border-start-start-radius: 0; border-end-start-radius: 0; padding-inline-start: 5px; }

/* ---- article: prose ------------------------------------------------------------------------------------------- */
.bl-prose { font-size: clamp(var(--fs-md), 0.2vw + 0.96rem, 1.0625rem); line-height: 2; color: var(--ink); overflow-wrap: break-word; }
.bl-prose > * + * { margin-block-start: 1em; }
.bl-prose p, .bl-prose li { text-wrap: pretty; }
.bl-prose h2, .bl-prose h3 { scroll-margin-block-start: 96px; }
.bl-prose h2 { display: flex; align-items: baseline; gap: 10px; font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.4375rem); line-height: 1.55; margin-block: 2em 0.2em; }
.bl-prose h2::before { content: ""; flex: none; inline-size: 0.6em; block-size: 0.6em; background: var(--hk); clip-path: var(--octa); transform: translateY(-0.04em); }
.bl-prose > h2:first-child { margin-block-start: 0.4em; }
.bl-prose h3 { font-size: var(--fs-lg); line-height: 1.6; margin-block: 1.6em 0; font-weight: 700; }
.bl-prose h2 + *, .bl-prose h3 + * { margin-block-start: 0.55em; }
.bl-prose a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 0.32em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.bl-prose a:hover { text-decoration-color: currentColor; }
.bl-prose strong { font-weight: 750; }
.bl-prose em:not([lang]) { font-style: normal; font-weight: 600; }
.bl-prose ul, .bl-prose ol { margin-inline: 0; padding-inline-start: 1.5em; }
.bl-prose ul { list-style: none; }
.bl-prose ul > li { position: relative; }
.bl-prose ul > li::before { content: ""; position: absolute; inset-inline-start: -1.15em; inset-block-start: 0.8em; inline-size: 0.48em; block-size: 0.48em; background: var(--hk); clip-path: var(--octa); }
.bl-prose ol { list-style: persian; }
.bl-prose ol > li::marker { color: var(--hk); font-weight: 800; }
.bl-prose li + li { margin-block-start: 0.35em; }
.bl-prose li > ul, .bl-prose li > ol { margin-block-start: 0.35em; }
/* English inside Persian: Atkinson, a touch smaller (Latin looks larger than Persian at the same size), an ink-wash mark
   instead of italics (no italic file to download, and Persian readers parse italics poorly) */
.bl-prose [lang="en"] { font-family: var(--bl-en); font-size: 0.95em; line-height: inherit; }
.bl-prose .en-nowrap { white-space: nowrap; }
.bl-prose em[lang="en"] { font-style: normal; padding-inline: 0.12em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(to top, color-mix(in srgb, var(--h) 16%, transparent) 0.5em, transparent 0.5em); }
.bl-prose em[lang="en"] strong { font-weight: 800; }
.bl-prose code { font-family: var(--bl-mono); font-size: 0.82em; padding: 0.12em 0.45em; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--hair); unicode-bidi: isolate; white-space: nowrap; }
.bl-prose pre { direction: ltr; text-align: left; overflow-x: auto; padding: 14px 16px; border-radius: 14px; background: #14122b; color: #f4f1fb; font: 0.88rem/1.7 var(--bl-mono); }
.bl-prose pre code { background: none; border: 0; padding: 0; white-space: pre; color: inherit; }
.bl-prose blockquote { position: relative; margin-inline: 0; padding-block: 0.4em; padding-inline: 1.2em 0; border-inline-start: 3px solid var(--hk); color: var(--ink-2); font-size: 1.06em; }
.bl-prose blockquote > * + * { margin-block-start: 0.6em; }
.bl-prose table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95em; }
.bl-prose th, .bl-prose td { padding: 8px 12px; border-block-end: 1px solid var(--hair); text-align: start; vertical-align: top; }
.bl-prose th { font-weight: 800; background: var(--paper-2); }
.bl-prose hr { border: 0; block-size: 12px; background: var(--hk); clip-path: var(--octa); inline-size: 12px; margin-block: 2em; margin-inline: auto; opacity: 0.6; }

/* callouts (core/markdown.py: a paragraph that opens with **مثال:**, **چرا:**, **تکنیک:** …) */
.bl-prose .md-callout { --cb: color-mix(in srgb, var(--h) 7%, var(--card)); --cl: var(--hk);
  padding: 0.85em 1.1em; border-radius: 16px; background: var(--cb); border: 1px solid color-mix(in srgb, var(--cl) 22%, var(--hair)); border-inline-start: 4px solid var(--cl);
  border-start-start-radius: 6px; border-end-start-radius: 6px; }
.bl-prose .md-callout > strong:first-child { color: var(--cl); }
.bl-prose .md-why { --cb: var(--paper-2); --cl: var(--ink-2); }
.bl-prose .md-tip, .bl-prose .md-practice, .bl-prose .md-warn { --cb: var(--warning-bg); --cl: var(--warning-fg); }
.bl-prose .md-fix { --cb: var(--success-bg); --cl: var(--ok); }
/* «غلط:» / «درست:» examples: icon + word + tint (never colour alone) */
.bl-prose ul:has(> .md-bad, > .md-good) { padding-inline-start: 0; display: grid; gap: 6px; }
.bl-prose li.md-bad, .bl-prose li.md-good, .bl-prose p.md-bad, .bl-prose p.md-good {
  position: relative; padding: 0.45em 0.9em; padding-inline-start: 2.35em; border-radius: 12px; margin: 0; }
.bl-prose .md-bad { background: var(--danger-bg); }
.bl-prose .md-good { background: var(--success-bg); }
.bl-prose ul > li.md-bad::before, .bl-prose ul > li.md-good::before, .bl-prose p.md-bad::before, .bl-prose p.md-good::before {
  content: ""; position: absolute; inset-inline-start: 0.8em; inset-block-start: 0.72em; inline-size: 1em; block-size: 1em; clip-path: none;
  -webkit-mask: var(--bl-ok-mask) center / contain no-repeat; mask: var(--bl-ok-mask) center / contain no-repeat; background: var(--ok); }
.bl-prose .md-bad::before { -webkit-mask-image: var(--bl-no-mask) !important; mask-image: var(--bl-no-mask) !important; background: var(--bad) !important; }
.bl-prose .md-bad em[lang="en"] { background: none; text-decoration: underline wavy color-mix(in srgb, var(--bad) 70%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.38em; }
.bl-prose .md-good em[lang="en"] { background: none; }

/* ---- article: tags, references, share, CTA, prev/next ---------------------------------------------------------- */
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 40px 0 0; padding: 0; }
.bl-tags a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 10px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--hair));
  color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; background: var(--card); }
.bl-tags a:hover { border-color: var(--indigo); }
.bl-tags .ic { inline-size: 15px; block-size: 15px; color: var(--hk); }
.bl-refs { margin-block-start: 28px; padding-block-start: 18px; border-block-start: 1px solid var(--hair); }
.bl-refs h2 { font-size: var(--fs-md); margin-block-end: 6px; }
.bl-refs ol { list-style: none; margin: 0; padding: 0; counter-reset: ref; display: grid; gap: 2px; }
.bl-refs li { counter-increment: ref; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: start; }
.bl-refs li::before { content: "[" counter(ref, persian) "]"; color: var(--hk); font-weight: 800; font-size: 0.9rem; line-height: 2.3; }
.bl-refs a { display: grid; gap: 0; padding-block: 6px; min-block-size: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.bl-ref-t { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink); }
.bl-refs a:hover .bl-ref-t { text-decoration: underline; text-underline-offset: 0.3em; }
.bl-ref-h { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font: 0.8rem/1.6 var(--bl-en); }
.bl-ref-h .ic { inline-size: 13px; block-size: 13px; }
.bl-share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-block-start: 24px; padding: 12px 16px;
  border-radius: var(--r-lg); border: 1px dashed var(--line); }
.bl-share-row p { color: var(--ink-2); font-size: var(--fs-sm); }
.bl-share-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bl-share-btns .btn { gap: 8px; }
.bl-share-btns .ic { inline-size: 18px; block-size: 18px; }
.bl-copied { font-size: 0.875rem; color: var(--ok); font-weight: 700; }
html:not(.js) .bl-share-row { display: none; }
.bl-cta { margin-block-start: 24px; display: grid; gap: 12px; justify-items: start; padding: 20px 18px; border-radius: var(--r-xl); color: #f4f1fb;
  background: var(--lattice-light), radial-gradient(120% 100% at 100% 0%, #2b2f8f 0%, transparent 62%), linear-gradient(135deg, #14122b, #07756d); }
.bl-cta .khatam.lg { inline-size: 84px; }
.bl-cta h2 { font-size: clamp(var(--fs-lg), 0.5vw + 1rem, 1.375rem); color: #fff; line-height: 1.5; }
.bl-cta p { color: #d9d6ee; margin-block-start: 6px; max-inline-size: 34em; }
.bl-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-block-start: 16px; }
.bl-cta-alt { color: #fff; font-weight: 700; text-underline-offset: 0.35em; min-block-size: 44px; display: inline-flex; align-items: center; }
.bl-cta :focus-visible { outline-color: #fff; }
@media (min-width: 640px) { .bl-cta { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 24px 28px; } .bl-cta .khatam.lg { inline-size: 96px; } }
.bl-pn { display: grid; gap: 12px; margin-block-start: 28px; }
@media (min-width: 640px) { .bl-pn { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-pn-older:only-child { grid-column: 2; } }
.bl-pn a { display: grid; gap: 2px; align-content: start; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--hair); background: var(--card); color: var(--ink); text-decoration: none;
  transition: border-color 160ms, transform 160ms var(--ease-out); }
.bl-pn a:hover { border-color: var(--indigo); }
html:not([data-motion="0"]) .bl-pn a:hover { transform: translateY(-2px); }
.bl-pn strong { line-height: 1.6; font-size: var(--fs-base); }
.bl-pn-older { text-align: end; }
.bl-pn-older .bl-meta { justify-content: flex-end; }
.bl-related { padding-block: 40px 56px; background: var(--lattice), var(--paper-2); border-block-start: 1px solid var(--hair); }

/* ---- reading progress + back to top --------------------------------------------------------------------------- */
.bl-progress { position: fixed; inset-inline: 0; inset-block-start: 0; block-size: 3px; z-index: 60; pointer-events: none; }
.bl-progress i { display: block; block-size: 100%; background: linear-gradient(to left, var(--teal-deco), var(--hk, var(--indigo)) 70%, var(--saffron));
  transform-origin: right center; transform: scaleX(var(--p, 0)); }
html:not(.js) .bl-progress { display: none; }
.bl-top { position: fixed; inset-inline-end: 16px; inset-block-end: calc(16px + var(--safe-b)); z-index: 45; inline-size: 48px; block-size: 48px;
  border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 180ms var(--ease-std), transform 180ms var(--ease-std), visibility 0s 180ms; }
.bl-top .ic { inline-size: 22px; block-size: 22px; }
.bl-top.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.has-tabbar .bl-top { inset-block-end: calc(84px + var(--safe-b)); }
@media (min-width: 900px) { .has-tabbar .bl-top { inset-block-end: 24px; } .bl-top { inset-inline-end: 24px; inset-block-end: 24px; } }

/* ---- motion tiers, high contrast, print ----------------------------------------------------------------------- */
html[data-motion="0"] .bl-card, html[data-motion="0"] .bl-star *, html[data-motion="0"] .bl-top, html[data-motion="0"] .bl-toc summary .ic,
html[data-motion="0"] .bl-pn a, html[data-motion="0"] .bl-more .ic { transition-duration: 0.01ms !important; }
@media (forced-colors: active) {
  .bl-mast, .bl-hero, .bl-related, .bl-popular, .bl-side-cta { background: none; }
  .bl-prose h2::before, .bl-prose ul > li::before, .bl-kick::before { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  .bl-progress, .bl-top, .bl-side, .bl-share-row, .bl-cta, .bl-pn, .bl-related, .bl-cover, .bl-chips, .bl-search { display: none !important; }
  .bl-layout { display: block; }
  .bl-prose { font-size: 11pt; }
  .bl-refs a::after { content: " " attr(href); font-size: 9pt; direction: ltr; unicode-bidi: isolate; }
}

/* ---- Apple-grade refinements (docs/DESIGN-APPLE.md): borderless grouped cards, filled chips, a quiet search field ---- */
.bl-card, .bl-toc, .bl-popular { border-color: transparent; box-shadow: var(--e1); }
@media (hover: hover) { .bl-card:hover { box-shadow: var(--e2); transform: none; } }
.bl-card:active { transform: scale(0.985); }
.bl-search { border: 0; background: color-mix(in srgb, var(--ink) 6%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 35%, transparent); }
.bl-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--indigo), 0 0 0 4px color-mix(in srgb, var(--indigo) 20%, transparent); }
.bl-chips a { border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 500; }
@media (hover: hover) { .bl-chips a:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); } }
.bl-chips a[aria-current] { background: var(--indigo); color: var(--on-indigo); font-weight: 650; }
.bl-chips a small { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.bl-tags a { border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.bl-mast { border-block-end: 0; }