/**
 * Ghada Ataa — Article page: a long-form Arabic reading column.
 * Centred ~66ch column, 18px / 2 line height, pull quotes only for the article's own <blockquote>s,
 * a 3px progress line under the top edge that fills from the right (RTL). Reuses blog-page.css
 * (category chips, "same topic" list) and store.css (crumbs, empty state).
 */
.ga-ar .ga-container {
  padding-inline: min(var(--ga-page-margin), var(--ga-space-400));
  max-inline-size: calc(var(--ga-layout-max-width-wide) + 2 * var(--ga-space-400));
}
.ga-ar > [hidden], .ga-ar-article[hidden] { display: none; }
.ga-ar a:not(.ga-btn):not(.ga-bl-cat) { color: inherit; }

/* reading progress: fixed, thin, never covers the navbar's controls */
.ga-ar-progress { position: fixed; z-index: 1000; inset-inline: 0; inset-block-start: 0; block-size: 3px; pointer-events: none; }
.ga-ar-progress[hidden] { display: none; }
.ga-ar-progress i { display: block; block-size: 100%; background: var(--ga-gradient-brand-energy); transform: scaleX(0); transform-origin: right center; }
@media (prefers-reduced-motion: no-preference) { .ga-ar-progress i { transition: transform 80ms linear; } }

/* ═════════ Header ═════════ */
.ga-ar-head { padding-block: var(--ga-space-400) var(--ga-space-500); }
.ga-ar-head .ga-st-crumbs ol { margin-block-end: var(--ga-space-400); }
.ga-ar-head .ga-st-crumbs li[aria-current] { max-inline-size: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-ar-head__inner { max-inline-size: 880px; margin-inline: auto; display: grid; justify-items: center; gap: var(--ga-space-200); text-align: center; }
.ga-ar-head__cat { margin: 0; }
.ga-ar-title { margin: 0; font: var(--ga-type-display-hero); line-height: 1.3; text-wrap: balance; }
.ga-ar-lead { margin: 0; max-inline-size: 56ch; font: var(--ga-type-heading-h4); font-weight: 500; line-height: 1.8; color: var(--ga-text-muted); }
.ga-ar-meta { display: grid; justify-items: center; gap: var(--ga-space-200); margin-block-start: var(--ga-space-100); }
.ga-ar-meta__info { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ga-space-100); margin: 0; font: var(--ga-type-body-small); font-weight: 600; color: var(--ga-text-muted); }

/* share controls (16px, the site's button shape; icons only where the label is clear) */
.ga-ar-share { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ga-space-100); }
.ga-ar-sbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-inline-size: 44px; block-size: 44px; padding-inline: 12px;
  border: 1.5px solid var(--ga-border-default); border-radius: var(--ga-radius-button);
  background: var(--ga-color-functional-white); color: var(--ga-text-primary);
  font: var(--ga-type-body-small); font-weight: 700; font-family: var(--ga-font-family); text-decoration: none; cursor: pointer;
}
.ga-ar-sbtn svg { inline-size: 18px; block-size: 18px; flex: none; }
.ga-ar-sbtn:hover { border-color: var(--ga-color-text-deep-ink); }
.ga-ar-sbtn:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }
.ga-ar-sbtn.is-done { background: var(--ga-color-accent-fresh-lime); border-color: var(--ga-color-accent-fresh-lime); }

/* ═════════ Featured image ═════════ */
.ga-ar-hero { margin-block-end: var(--ga-space-600); }
.ga-ar-figure { margin: 0; max-inline-size: 1040px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--ga-color-text-deep-ink-06); }
.ga-ar-figure img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ga-ar-plate { display: grid; place-items: center; gap: var(--ga-space-100); max-inline-size: 1040px; margin-inline: auto; padding: var(--ga-space-600); border-radius: 24px; background: var(--ga-color-accent-fresh-lime); text-align: center; }
.ga-ar-plate span { font-size: 120px; line-height: .7; font-weight: 700; color: var(--ga-color-accent-pop-pink); }
.ga-ar-plate b { font: var(--ga-type-heading-h2); }

/* ═════════ Body ═════════ */
.ga-ar-body { max-inline-size: 66ch; margin-inline: auto; font: var(--ga-type-body-large); line-height: 2; }
.ga-ar-body > * + * { margin-block-start: var(--ga-space-300); }
.ga-ar-body p { margin-block-end: 0; }
.ga-ar-body > p:first-child { margin-block-start: 0; }
.ga-ar-body .ga-ar-first { font: var(--ga-type-heading-h4); font-weight: 500; line-height: 1.9; }
.ga-ar-body h2 { margin-block: var(--ga-space-600) 0; font: var(--ga-type-heading-h2); }
.ga-ar-body h3 { margin-block: var(--ga-space-500) 0; font: var(--ga-type-heading-h3); }
.ga-ar-body h4 { margin-block: var(--ga-space-400) 0; font: var(--ga-type-heading-h4); }
.ga-ar-body ul, .ga-ar-body ol { padding-inline-start: var(--ga-space-400); }
.ga-ar-body li + li { margin-block-start: var(--ga-space-100); }
.ga-ar-body a { color: var(--ga-color-brand-vivid-purple); font-weight: 600; text-decoration: underline 1.5px; text-underline-offset: 5px; border-radius: 4px; }
.ga-ar-body a:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }
.ga-ar-body strong, .ga-ar-body b { font-weight: 700; }
/* the article's own quotes: a restrained pull quote with an RTL accent on the reading edge */
.ga-ar-body blockquote {
  position: relative; margin-inline: 0; margin-block: var(--ga-space-500);
  padding: var(--ga-space-300) var(--ga-space-400);
  border-inline-start: 5px solid var(--ga-color-accent-pop-pink);
  border-radius: 0 16px 16px 0;
  background: color-mix(in srgb, var(--ga-color-functional-white) 60%, var(--ga-color-surface-warm-paper));
  font: var(--ga-type-heading-h4); line-height: 1.8;
}
.ga-ar-body blockquote::before { content: "”"; position: absolute; inset-block-start: -.2em; inset-inline-end: var(--ga-space-300); font-size: 96px; line-height: 1; font-weight: 700; color: color-mix(in srgb, var(--ga-color-accent-pop-pink) 35%, transparent); pointer-events: none; }
.ga-ar-body blockquote p { margin: 0; }
.ga-ar-body figure { margin-inline: 0; }
.ga-ar-body img { max-inline-size: 100%; block-size: auto; border-radius: 16px; }
.ga-ar-body figcaption { margin-block-start: var(--ga-space-100); font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ar-nobody { color: var(--ga-text-muted); }

/* ═════════ End of article ═════════ */
.ga-ar-end { max-inline-size: 66ch; margin-inline: auto; padding-block: var(--ga-space-600) var(--ga-section-space); }
.ga-ar-end__mark { margin: 0 0 var(--ga-space-400); text-align: center; letter-spacing: .6em; color: var(--ga-color-brand-electric-orange); }
.ga-ar-end__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ga-space-200); padding-block: var(--ga-space-300); border-block: 1px solid var(--ga-border-default); }
.ga-ar-end__cat { margin: 0; font: var(--ga-type-body-small); font-weight: 600; color: var(--ga-text-muted); }
.ga-ar-end .ga-ar-share { justify-content: flex-start; }
.ga-ar-end__src { margin: var(--ga-space-200) 0 0; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ar-end__src a { color: var(--ga-color-brand-vivid-purple); font-weight: 700; }
.ga-ar-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ga-space-200); margin-block-start: var(--ga-space-400); }
.ga-ar-pn__link { display: flex; align-items: center; gap: var(--ga-space-200); padding: var(--ga-space-200); border-radius: 16px; background: var(--ga-color-functional-white); box-shadow: inset 0 0 0 1px var(--ga-border-default); text-decoration: none; }
.ga-ar-pn__link--older { justify-content: flex-end; text-align: end; }
.ga-ar-pn__link:hover { box-shadow: inset 0 0 0 1.5px var(--ga-color-text-deep-ink); }
.ga-ar-pn__link:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }
.ga-ar-pn__link svg { inline-size: 20px; block-size: 20px; flex: none; }
.ga-ar-pn__link span { display: grid; }
.ga-ar-pn__link small { font-size: 12px; font-weight: 700; color: var(--ga-color-brand-vivid-purple); }
.ga-ar-pn__link b { font: var(--ga-type-label-default); font-weight: 700; }

/* ═════════ Keep reading ═════════ */
.ga-ar-related { padding-block: var(--ga-space-600) var(--ga-space-500); border-block-start: 4px double var(--ga-color-text-deep-ink); }
.ga-ar-h2 { margin: 0 0 var(--ga-space-400); font: var(--ga-type-heading-h1); }
.ga-ar-related__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--ga-space-400); align-items: start; }
.ga-ar-rel__link { display: grid; gap: var(--ga-space-200); text-decoration: none; border-radius: 16px; }
.ga-ar-rel__link:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 4px; }
.ga-ar-rel__img { display: block; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; background: var(--ga-color-text-deep-ink-06); }
.ga-ar-rel__img img, .ga-ar-rel__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ga-ar-rel__text { display: grid; gap: 6px; }
.ga-ar-rel__title { font: var(--ga-type-heading-h3); }
.ga-ar-rel--lead .ga-ar-rel__title { font: var(--ga-type-heading-h2); }
.ga-ar-rel__link:hover .ga-ar-rel__title { text-decoration: underline 2px var(--ga-color-accent-fresh-lime); text-underline-offset: 6px; }
.ga-ar-rel__ex { font: var(--ga-type-body-default); color: var(--ga-text-muted); }
.ga-ar-rel__side { display: grid; gap: var(--ga-space-300); }
.ga-ar-rel__side .ga-ar-rel__link { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
.ga-ar-rel__thumb { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--ga-color-text-deep-ink-06); }
.ga-ar-rel__thumb.is-noimg, .ga-ar-rel__img.is-noimg { font-size: 64px; }

.ga-ar-more { padding-block: 0 var(--ga-space-500); }
.ga-ar-back { padding-block: 0 var(--ga-section-space); }
.ga-ar-back__link { display: inline-flex; align-items: center; gap: var(--ga-space-100); min-block-size: 44px; font: var(--ga-type-label-default); font-weight: 700; text-decoration: underline 1.5px; text-underline-offset: 6px; text-decoration-color: var(--ga-border-control); border-radius: 4px; }
.ga-ar-back__link svg { inline-size: 20px; block-size: 20px; }
.ga-ar-back__link:hover { color: var(--ga-color-brand-vivid-purple); }
.ga-ar-back__link:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }
.ga-ar .ga-bk-missing { padding-block: var(--ga-space-500) var(--ga-section-space); }

/* ═════════ Responsive ═════════ */
@media (max-width: 1023px) {
  .ga-ar-related__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ga-ar-head { padding-block: var(--ga-space-200) var(--ga-space-400); }
  .ga-ar-head .ga-st-crumbs ol { margin-block-end: var(--ga-space-300); }
  .ga-ar-head .ga-st-crumbs li[aria-current] { max-inline-size: 16ch; }
  .ga-ar-head__inner { justify-items: start; text-align: start; }
  .ga-ar-meta { justify-items: start; }
  .ga-ar-meta__info, .ga-ar-share { justify-content: flex-start; }
  .ga-ar-title { font: var(--ga-type-heading-h1); }
  .ga-ar-lead { font: var(--ga-type-body-large); }
  .ga-ar-sbtn__label { display: none; }                   /* the copy button keeps its aria-label */
  .ga-ar-hero { margin-block-end: var(--ga-space-400); }
  .ga-ar-figure { aspect-ratio: 4 / 3; border-radius: 16px; }
  .ga-ar-body { font: var(--ga-type-body-large); line-height: 1.95; }
  .ga-ar-body .ga-ar-first { font: var(--ga-type-body-large); font-weight: 600; line-height: 1.95; }
  .ga-ar-body blockquote { padding: var(--ga-space-200) var(--ga-space-300); font: var(--ga-type-body-large); font-weight: 600; line-height: 1.9; }
  .ga-ar-body blockquote::before { font-size: 64px; }
  .ga-ar-pn { grid-template-columns: minmax(0, 1fr); }
  .ga-ar-pn__link--older { justify-content: space-between; text-align: start; }
  .ga-ar-h2 { font: var(--ga-type-heading-h2); }
  .ga-ar-rel--lead .ga-ar-rel__title { font: var(--ga-type-heading-h3); }
  .ga-ar-rel__side .ga-ar-rel__link { grid-template-columns: 88px minmax(0, 1fr); }
  .ga-ar-rel__title { font: var(--ga-type-heading-h4); }
}

/* save (on this device, js/activity.js) */
.ga-save-btn.is-saved { background: var(--ga-color-brand-vivid-purple, #5429D8); border-color: var(--ga-color-brand-vivid-purple, #5429D8); color: #fff; }
.ga-save-btn.is-saved svg path { fill: currentColor; }