/* ===== articles: home teaser, blog page, article page ===== */
.pg-in{opacity:0;transform:translateY(3rem);transition:opacity .9s var(--ease5),transform .9s var(--ease5)}
.pg-in.in{opacity:1;transform:none}

.section--articles{padding:min(8rem,10vw) 0 min(9rem,11vw)}
.art-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.4rem;margin-bottom:4.6rem}
.art-head .heading{margin:0;text-align:right}
.art-all{display:inline-flex;align-items:center;gap:1.4rem;padding:1.5rem 2.8rem;border-radius:99px;font-weight:600;border:1px solid var(--line);color:var(--fg);background:var(--panel-2);
  transition:background .4s,color .4s,transform .5s var(--ease5),border-color .4s}
.art-all svg{width:2.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease5)}
.art-all:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);transform:translateY(-.3rem)}
.art-all:hover svg{transform:translateX(-.6rem)}

/* home "آخرین مقالات": the original featured + two layout (kept separate from .art-grid below, which is
   now the compact "بخوانید" footer widget on the article page — they used to share a class and fighting
   overrides made the home cards inconsistent sizes) */
.home-art-grid{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media (min-width:64em){.home-art-grid{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}
  .home-art-grid .acard--feat{grid-row:span 2}}

/* "بخوانید" (related reading at the end of an article): a minimal, compact version of the card —
   small cover, no big ghost glyph, tighter body — not the full-size blog card. */
.art-grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:50em){.art-grid{grid-template-columns:repeat(3,1fr)}}
.art-grid .acard-cover{aspect-ratio:16/10;padding:1.4rem}
.art-grid .acard-glyph{font-size:6rem;bottom:-1.6rem;left:1.4rem}
.art-grid .acard-type{padding:.4rem 1.2rem;font-size:1.15rem}
.art-grid .acard-body{padding:1.8rem 2rem 2.2rem;gap:.8rem}
.art-grid .acard-body h3{font-size:1.7rem;line-height:1.6}
.art-grid .acard-meta{font-size:1.25rem}
.art-grid .acard-more{font-size:1.3rem}
.bl-grid{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media (min-width:50em){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:80em){.bl-grid{grid-template-columns:repeat(3,1fr)}.bl-grid .acard--feat{grid-column:span 2}}
.bl-grid [hidden]{display:none}

.acard{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:3rem;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  transition:transform .7s var(--ease5),box-shadow .5s,opacity .9s var(--ease5)}
.acard:hover{transform:translateY(-.8rem);box-shadow:0 3rem 6rem -2.8rem color-mix(in srgb,var(--c) 75%,transparent)}
.acard-cover{position:relative;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:flex-start;justify-content:flex-start;padding:2rem;
  background:radial-gradient(120% 130% at 85% 0%,color-mix(in srgb,var(--c) 85%,#fff) 0%,var(--c) 45%,#2a0c0a 120%)}
.acard--feat .acard-cover{aspect-ratio:auto;flex:1;min-height:26rem}
.acard-cover::before{content:"";position:absolute;inset:0;opacity:.35;background:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.5px) 0 0/2.4rem 2.4rem;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 65%);mask-image:linear-gradient(200deg,#000,transparent 65%)}
.acard-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease5)}
.acard:hover .acard-img{transform:scale(1.06)}
.acard-cover:has(.acard-img)::before{opacity:.55;mix-blend-mode:overlay}
.acard-cover:has(.acard-img)::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(200deg,color-mix(in srgb,var(--c) 55%,transparent) 0%,rgba(20,8,6,.25) 70%)}
.acard-type{position:relative;z-index:1;padding:.6rem 1.6rem;border-radius:99px;font-size:1.3rem;color:#fff;background:rgba(20,8,6,.4);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.acard-glyph{position:absolute;left:2rem;bottom:-3.4rem;font-style:normal;font-weight:700;font-size:15rem;line-height:1;color:rgba(255,255,255,.16);transition:transform .9s var(--ease5)}
.acard:hover .acard-glyph{transform:translateY(-1.2rem) rotate(-6deg)}
.acard-body{display:flex;flex-direction:column;gap:1.2rem;padding:2.6rem 2.8rem 2.8rem}
.acard-meta{display:flex;align-items:center;gap:1rem;font-size:var(--fs-14);color:var(--fg-soft)}
.acard-meta i{width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.6}
.acard-body h3{font-size:2.3rem;font-weight:700;line-height:1.7;text-wrap:balance}
.acard--feat .acard-body h3{font-size:clamp(2.6rem,2.6vw,3.6rem)}
.acard-body p{color:var(--fg-soft);line-height:2;font-size:var(--fs-16);max-width:60ch}
.acard-more{margin-top:.6rem;display:inline-flex;align-items:center;gap:.9rem;font-weight:600;color:var(--c-primary-400)}
.acard-more svg{width:1.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease5)}
.acard:hover .acard-more svg{transform:translateX(-.7rem)}

/* blog toolbar */
.bl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;margin-bottom:3.4rem}
.bl-bar .pfilter{margin:0}
.bl-search{position:relative;display:block;width:min(34rem,100%)}
.bl-search input{width:100%;height:5rem;padding:0 4.8rem 0 1.6rem;border-radius:99px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);font:inherit;font-size:var(--fs-14);transition:border-color .3s,box-shadow .3s}
.bl-search input:focus{outline:none;border-color:var(--c-primary-400);box-shadow:0 0 0 .5rem color-mix(in srgb,var(--c-primary-400) 16%,transparent)}
.bl-search svg{position:absolute;right:1.6rem;top:50%;width:2.2rem;margin-top:-1.1rem;fill:none;stroke:var(--fg-soft);stroke-width:2;stroke-linecap:round}
.bl-empty{padding:5rem 0;text-align:center;color:var(--fg-soft)}

/* article page */
.ar-hero .pg-title{margin-top:.4rem}
.ar-title{font-size:clamp(3.6rem,5vw,7rem);max-width:90rem}
.ar-meta{margin-top:2.6rem;display:flex;align-items:center;flex-wrap:wrap;gap:1.2rem;font-size:var(--fs-16);color:rgba(255,255,255,.8)}
.ar-meta i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;opacity:.6}
.ar-wrap{display:grid;grid-template-columns:1fr;gap:4rem;max-width:118rem;margin:0 auto}
@media (min-width:64em){.ar-wrap{grid-template-columns:minmax(0,1fr) 32rem;gap:7rem;align-items:start}}
.ar-body{max-width:74rem}
.ar-cover{margin:0 0 3.2rem;border-radius:2.4rem;overflow:hidden;aspect-ratio:16/8;box-shadow:0 2.4rem 5rem -3rem rgba(0,0,0,.4)}
.ar-cover img{display:block;width:100%;height:100%;object-fit:cover}
.ar-lead{font-size:clamp(2rem,1.7vw,2.6rem);line-height:2.05;font-weight:500;color:var(--fg);padding-right:2rem;border-right:4px solid var(--c-primary-400);margin-bottom:3.6rem}
.ar-body h2{font-size:clamp(2.6rem,2.4vw,3.4rem);font-weight:700;margin:4rem 0 1.4rem;line-height:1.5}
.ar-body p{font-size:var(--fs-18);line-height:2.25;color:var(--fg-soft)}
.ar-end{margin-top:5rem}
.ar-back{display:inline-flex;align-items:center;gap:1rem;font-weight:600;color:var(--fg)}
.ar-back svg{width:2.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.ar-side{position:sticky;top:10rem;display:grid;gap:1.6rem}
.ar-toc,.ar-cta{padding:2.8rem;border-radius:2.8rem;border:1px solid var(--line);background:var(--panel-2)}
.ar-toc b,.ar-cta b{display:block;font-size:1.9rem;margin-bottom:1.4rem}
.ar-toc span{display:block;padding:.9rem 0;color:var(--fg-soft);font-size:var(--fs-16);border-top:1px dashed var(--line)}
.ar-cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:linear-gradient(150deg,#ffb347,#e4572e 55%,#8f2a15);color:#fff;border-color:transparent;
  box-shadow:0 2.4rem 4.6rem -2.4rem rgba(228,87,46,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.ar-cta::before{content:"";position:absolute;z-index:0;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent 70%);pointer-events:none}
.ar-cta>*:not(.wm-rain){position:relative;z-index:1}
.ar-cta b{font-size:2.1rem}
.ar-cta p{margin-bottom:2.2rem;opacity:.92;line-height:1.9}
.ar-cta .btn{--btc:#fff;--h-bg:#2a0c0a;--h-c:#fff;color:#2a0c0a;margin:0 auto;box-shadow:0 1rem 2.2rem -1rem rgba(0,0,0,.4)}

/* compact sizing */
.section--articles{padding:min(6rem,8vw) 0 min(7rem,9vw)}
.section--articles .container{max-width:112rem}
.art-head{margin-bottom:3rem}
.section--articles .title{font-size:clamp(2.8rem,2.8vw,4rem)}
.section--articles .subtitle{font-size:var(--fs-16)}
.art-grid{gap:1.6rem}
.acard{border-radius:2.4rem}
.acard-cover{aspect-ratio:16/8;padding:1.6rem}
.acard--feat .acard-cover{min-height:16rem}
.acard-glyph{font-size:10rem;bottom:-2.4rem}
.acard-body{gap:.9rem;padding:2rem 2.2rem 2.2rem}
.acard-body h3{font-size:1.9rem;line-height:1.7}
.acard--feat .acard-body h3{font-size:2.4rem}
.acard-body p{font-size:1.5rem;line-height:1.9}
.acard-meta{font-size:1.3rem}
.art-all{padding:1.1rem 2.2rem;font-size:1.5rem}
.art-tagline{margin:.4rem 0 1rem;font-family:var(--ff-en);font-size:1.4rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary-400)}
.acard-more{align-self:flex-start;margin-right:auto;margin-left:0}
.acard-body{align-items:stretch}