/* kashida.css — the stretchable word and justified paragraphs */
.kw { display: inline-flex; align-items: baseline; direction: rtl; white-space: nowrap; unicode-bidi: isolate; }
.kw-a, .kw-b { display: inline-block; }
.kw-b { will-change: transform; margin-inline-start: calc(-1 * var(--kw-adv, 0px)); }
.kw-bar {
  display: inline-block; flex: none;
  width: 2px; margin-inline: -1px;
  height: var(--kw-th, 0.08em);
  position: relative; top: var(--kw-off, -0.12em);
  background: var(--kw-bar, currentColor);
  transform-origin: 100% 50%;          /* RTL: the bar grows toward the line's end (screen-left) */
  will-change: transform;
  transition: background-color .3s var(--ease);
}
/* justified Arabic paragraphs */
p.kj { text-wrap: wrap; }
p.kj.kj-on { text-align: justify; text-align-last: start; }
.kj-t { /* inserted tatweels: decorative, never read aloud, stripped from copied text */ }
#kj-toggle[aria-checked="false"] ~ * p.kj { text-align: start; }

/* hero name */
.name .kw { cursor: ew-resize; touch-action: pan-y; }
.name .name-word { display: inline-block; }
.name-marks .mark-end { transition: opacity .6s var(--ease); }

/* «الامتداد» — the pinned stage */
#stretch.is-pinned .events { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stretch-stage { display: none; }
#stretch.is-staged .stretch-stage { display: grid; align-content: center; gap: clamp(24px, 4vh, 48px); position: relative; }
#stretch.is-pinned .stretch-stage { height: 100svh; padding-block: calc(var(--topbar-h) + 4vh) 6vh; box-sizing: border-box; }
#stretch.is-staged:not(.is-pinned) .stretch-stage { margin-block-end: 40px; }
.stretch-host { position: static; }
.st-name { direction: rtl; text-align: right; font: 700 clamp(84px, 15vw, 280px)/1.2 var(--f-kufi); color: var(--signature); white-space: nowrap; }
.st-ticks { position: absolute; inset-inline: 0; height: 18px; pointer-events: none; }
.st-tick { position: absolute; left: calc(var(--start) - var(--w) * var(--span)); top: 0; width: 1.5px; height: 10px; background: var(--text-faint); transform: translateX(-50%); transition: height .3s var(--ease), background-color .3s var(--ease); }
.st-tick.is-past { background: var(--text-muted); }
.st-tick.is-active { background: var(--signature); height: 18px; width: 3px; }
.stretch-caption { display: grid; gap: 8px; max-width: 40em; min-height: 9.5em; }
.sc-date { font: 600 clamp(28px, 3.4vw, 52px)/1.2 var(--f-ar); color: var(--text); font-variant-numeric: tabular-nums; }
:root:lang(en) .sc-date { font-family: var(--f-lat); letter-spacing: -0.03em; }
.sc-text { font: 500 clamp(20px, 2.1vw, 30px)/1.55 var(--f-ar); text-wrap: balance; }
:root:lang(en) .sc-text { font-family: var(--f-lat); line-height: 1.3; letter-spacing: -0.01em; }
.sc-src { margin-block-start: 4px; }
.stretch-slider:focus-visible { outline: none; }
.stretch-slider:focus-visible + .events, #stretch:has(.stretch-slider:focus-visible) .st-tick.is-active { outline: 2px solid var(--link); outline-offset: 4px; }