/* Archive page: the old WordPress.com blog moved into one page (archive.html). All classes ar-*.
   Posts reuse the homepage FAQ accordion (.qa / .ans / .pm, toggled by site.js); testimonials reuse .qlist. */
.ar-hero .spec-row.ar-spec{grid-template-columns:repeat(4,1fr);margin:48px 0 0;max-width:980px}
.ar-hero .lead{max-width:44em}

/* posts: sticky year index + list */
.ar-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:72px;margin-top:64px;align-items:start}
.ar-side{position:sticky;top:120px;display:flex;flex-direction:column;border-top:2px solid var(--g8)}
.ar-side a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:16px;color:var(--g9);transition:color .25s,padding .35s var(--ease)}
.ar-side a span{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink-3)}
.ar-side a:hover{color:var(--gold-d);padding-inline-start:6px}
.ar-year{scroll-margin-top:110px}
.ar-year+.ar-year{margin-top:64px}
.ar-yh{font-size:15px;font-weight:700;color:var(--gold-d);margin:0 0 8px}
.ar-item{scroll-margin-top:100px}
.ar .qa button{padding:20px 0;font-size:21px}
.ar .qa button:hover .ar-t b{color:var(--g7)}
.ar-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-t b{font-weight:600;line-height:1.55;transition:color .25s}
.ar-t small{font-family:var(--sans);font-weight:400;font-size:13.5px;color:var(--ink-3)}

/* the post text as it was written (Word-pasted HTML, styling removed) */
.ar-body{max-width:46em;padding:2px 0 34px;font-size:17px;line-height:2;color:var(--ink)}
.ar .ans .ar-body p,.ar .ans .ar-cmts p{padding:0;max-width:none;font-size:inherit;color:inherit}
.ar-body p,.ar-body div{margin:0 0 1em}
.ar-body h3{font-size:22px;line-height:1.5;color:var(--g9);margin:1.4em 0 .6em}
.ar-body h4{font-size:19px;line-height:1.5;color:var(--g9);margin:1.2em 0 .5em}
.ar-body ul,.ar-body ol{margin:0 0 1em;padding-inline-start:1.4em}
.ar-body li{margin-bottom:.35em}
.ar-body blockquote{margin:0 0 1em;padding:4px 18px;border-inline-start:3px solid var(--gold-l);color:var(--ink-2)}
.ar-body img{margin:14px 0;border-radius:8px}
.ar-body a,.ar-q a,.ar-cb a{color:var(--g7);border-bottom:1px solid rgba(35,80,44,.3);overflow-wrap:anywhere;transition:color .2s,border-color .2s}
.ar-body a:hover,.ar-q a:hover,.ar-cb a:hover{color:var(--gold-d);border-color:currentColor}
.ar-body a:has(img){border:0}
.ar-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1em;font-size:15px}
.ar-body td,.ar-body th{border:1px solid var(--line);padding:6px 10px;vertical-align:top}
.ar-body hr{border:0;border-top:1px solid var(--line);margin:1.5em 0}
.ar-vid{display:block;aspect-ratio:16/9;max-width:640px;margin:14px 0;border-radius:12px;overflow:hidden;background:var(--g9)}
.ar-vid iframe{width:100%;height:100%;border:0;display:block}

/* readers' comments under each post */
.ar-cmts{max-width:46em;margin:0 0 36px;padding:22px 28px 10px;background:var(--paper);border-radius:var(--r)}
.ar-cmts h4{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--g9);margin:0 0 6px}
.ar-cmts h4 span{font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1;padding:5px 9px;border-radius:99px;background:var(--g9);color:var(--cream)}
.ar-cl,.ar-cl ol{list-style:none;margin:0;padding:0}
.ar-cl li{padding:14px 0;border-top:1px solid var(--line)}
.ar-cl>li:first-child{border-top:0}
.ar-cl ol{margin-top:12px;padding-inline-start:20px;border-inline-start:2px solid var(--line)}
.ar-cl ol li{padding:10px 0}
.ar-cl ol li:first-child{border-top:0}
.ar-cm{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 4px!important;font-size:15px}
.ar-cm b{font-family:var(--display);font-weight:600;color:var(--g9)}
.ar-cm em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.ar-cm time{font-size:12.5px;color:var(--ink-3)}
.ar-cb{font-size:15.5px;line-height:1.9;color:var(--ink-2)}
.ar-cb p{margin:0 0 .6em}

/* testimonials (the old «ماذا قالوا» page): same accordion as the posts, in two columns */
.ar-said{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:48px;border-top:2px solid var(--g8)}
.ar-said .qa:first-child,.ar-said .qa:nth-child(2){border-top:0}
.ar-said .qa:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}
.ar-q{font-size:16.5px;line-height:1.95;color:var(--ink-2)}
.ar-q p{margin:0 0 .7em}

/* files, grouped by the post they were published in */
.ar-fgs{margin-top:48px;border-top:2px solid var(--g8)}
.ar-fg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;padding:28px 0;border-bottom:1px solid var(--line)}
.ar-fg h3{font-size:21px;line-height:1.5;color:var(--g9)}
.ar-fg h3 a{display:block;width:max-content;margin-top:8px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--g7);border-bottom:1px solid rgba(35,80,44,.3);transition:color .2s}
.ar-fg h3 a:hover{color:var(--gold-d)}
.ar-files{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ar-files a{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;padding:14px 18px;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .3s,transform .35s var(--ease)}
.ar-files a::before{content:"";position:absolute;inset:0;background:var(--sage);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);z-index:0}
.ar-files a:hover{border-color:var(--g7);transform:translateY(-2px)}
.ar-files a:hover::before{transform:scaleX(1)}
.ar-files b,.ar-files span{position:relative;z-index:1}
.ar-files b{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.55;color:var(--g9)}
.ar-files span{font-size:13px;color:var(--ink-3)}
.ar-files li:only-child{grid-column:1/-1}

@media (max-width:980px){
  .ar-hero .spec-row.ar-spec{grid-template-columns:repeat(2,1fr)}
  .ar-grid{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .ar-side{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;border:0}
  .ar-side a{padding:5px 12px;border:1px solid var(--line);border-radius:99px;font-size:14.5px;gap:8px}
  .ar-side a:hover{padding-inline-start:12px}
  .ar-fg{grid-template-columns:1fr;gap:16px}
  .ar-said{grid-template-columns:1fr}
  .ar-said .qa:nth-child(2){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .ar .qa button{font-size:18px;padding:16px 0;gap:14px}
  .ar-body{font-size:16px}
  .ar-cmts{padding:18px 16px 6px;margin-inline:-4px}
  .ar-files{grid-template-columns:1fr}
}