/* ==========================================================================
   العاصمة — the article (article.html)
   The prototype's own page styles, moved out of its <style> block as they
   are; the parts it drew for content no story here holds (the newsroom's
   editing log, reader comments, the day's ledger and photo pair written
   into the copy) are left out. Below them, what a story written in the
   editor brings that the prototype's hand-set copy never had to.
   ========================================================================== */

.progress { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--ribbon-h)); inset-inline: 0; height: 3px; z-index: 49; background: transparent; }
.progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: right; transform: scaleX(0); }

.a-head { padding-block: var(--s-7) var(--s-6); }
.a-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
.a-head__main { grid-column: 1 / span 9; display: grid; gap: var(--s-4); }
.a-head nav a { min-height: 44px; display: inline-flex; align-items: center; }
.times a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.a-head__side { grid-column: 10 / span 3; align-self: end; display: grid; gap: var(--s-4); }
.a-head .hl-1 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); }
.people { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.times { display: grid; gap: 2px; font-size: var(--t-meta); color: var(--ink-3); }
.times b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.hero { margin-bottom: var(--s-7); }
.hero .frame { max-height: 78vh; }

.a-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); padding-bottom: var(--s-8); }
.a-tools { grid-column: 1 / span 2; }
.a-tools__in { position: sticky; top: calc(var(--ribbon-h) + 32px); display: grid; gap: 4px; justify-items: start; }
.a-tools .icon-btn { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--rule); }
.a-tools .lbl { font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 6px; }
.a-col { grid-column: 3 / span 7; min-width: 0; }
.a-aside { grid-column: 10 / span 3; min-width: 0; display: grid; gap: var(--s-7); align-content: start; }

.gist { background: var(--sheet); padding: var(--s-5); margin-bottom: var(--s-6); }
.gist__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-3); }
.gist__head h2 { font-size: var(--t-4); font-weight: 800; }
.gist ul { display: grid; gap: 10px; }
.gist li { font-family: var(--devlo-font, var(--f-read)); font-size: 1.24rem; line-height: 1.9; padding-inline-start: 26px; position: relative; }
.gist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .95em; width: 14px; height: 2px; background: var(--ink); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }

.read h2 { font-family: var(--devlo-font, var(--f-head)); font-size: var(--t-2); font-weight: 700; margin-top: 1.6em; margin-bottom: .5em; line-height: 1.35; }
/* no ::first-letter drop cap: it severs Arabic joins. The lede is set larger instead. */
.read .drop { font-size: 1.12em; font-weight: 500; }
.read a { box-shadow: inset 0 -2px 0 var(--accent); }
.read a:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.sources { margin-top: var(--s-7); }
.sources h3 { font-size: var(--fs-h4); font-weight: 800; padding-bottom: 12px; margin-bottom: var(--s-3); position: relative; }
.sources h3::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ink); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
.sources ol { counter-reset: s; display: grid; }
.sources li { counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 10px; padding-block: 10px; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); align-items: baseline; }
.sources li::before { content: counter(s); font-weight: 800; color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.sources .kind { font-size: var(--t-meta); color: var(--ink-3); }

.related h3 { font-size: var(--fs-h4); font-weight: 800; padding-bottom: 12px; position: relative; }
.related h3::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ink); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
.related .story { padding-block: 14px; border-bottom: 1px solid var(--rule); }

.more-from { padding-block: var(--s-8); }
.more-from__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }

@media (max-width: 1100px) {
  .a-head__main, .a-head__side { grid-column: 1 / -1; }
  .a-tools { display: none; }
  .a-col { grid-column: 1 / span 8; }
  .a-aside { grid-column: 9 / span 4; }
  .more-from__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .a-col, .a-aside { grid-column: 1 / -1; }
  .hero .frame { margin-inline: calc(var(--gutter) * -1); max-width: none; }
  .hero .cap { padding-inline: 0; }
}
@media (max-width: 560px) {
  .more-from__grid { grid-template-columns: 1fr; }
  .a-head { padding-top: var(--s-5); }
}
.share-row { display: none; }
@media (max-width: 1100px) { .share-row { display: flex; gap: 4px; flex-wrap: wrap; } .share-row .icon-btn { box-shadow: inset 0 0 0 1px var(--rule); width: 44px; height: 44px; } }

/* ── What the editor writes that the prototype's copy never held ──
   Every rule sits at the lowest weight (:where), so the prototype's own
   blocks set inside the copy (.count-card, .pull) keep theirs. */

/* one rhythm between whatever follows what: a list after a paragraph, a paragraph after a picture */
:where(.read) > * + * { margin-top: 1.1em; }
:where(.read) h3 { font-family: var(--devlo-font, var(--f-head)); font-size: var(--t-3); font-weight: 700; margin-top: 1.4em; margin-bottom: .4em; line-height: 1.4; }
:where(.read) :is(ul, ol) { padding-inline-start: 1.4em; }
:where(.read) ul { list-style: disc; }
:where(.read) ol { list-style: decimal; }
:where(.read) li + li { margin-top: .45em; }
:where(.read) li::marker { color: var(--ink-3); }
:where(.read) img, :where(.read) video { max-width: 100%; height: auto; }
:where(.read) iframe { max-width: 100%; }
:where(.read) figure { margin-block: var(--s-6); }
:where(.read) figcaption { margin-top: 10px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); }
:where(.read) hr { border: 0; border-top: 1px solid var(--rule-strong); margin-block: var(--s-6); }

/* a quotation set in the editor reads as the prototype's «pull» */
:where(.read) > blockquote:not([class]) { position: relative; margin-block: var(--s-7); padding-inline-start: 1.15em; font-size: var(--fs-h2); }
:where(.read) > blockquote:not([class])::before { content: "«"; position: absolute; inset-inline-start: -.05em; top: -.32em; font: 700 2.4em/1 var(--devlo-font, var(--f-head)); color: var(--accent); }
:where(.read) > blockquote:not([class]) p { font-family: var(--devlo-font, var(--f-head)); font-weight: 600; font-size: 1em; line-height: 1.62; color: var(--ink); text-wrap: balance; }

/* a table a writer pastes scrolls inside the column instead of widening the page */
:where(.read) table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-small); }
:where(.read) :is(th, td) { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; }
:where(.read) th { font-weight: 700; border-bottom-color: var(--rule-strong); }

/* «من نحن ومنهجنا»: the same reading column, centred where no tools or aside stand beside it;
   the AI policy under its own heading, ruled as the article's «المصادر» */
.about-col { grid-column: 3 / span 8; }
.about-ai { margin-top: var(--s-7); }
.about-ai h2 { font-size: var(--fs-h3); font-weight: 800; padding-bottom: 12px; margin-bottom: var(--s-4); position: relative; }
.about-ai h2::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ink); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
@media (max-width: 1100px) { .about-col { grid-column: 1 / -1; } }