/* Magazine (apps/blog): list, article, how-to steps. Builds on site.css tokens. */
.mag-hero{background:linear-gradient(rgba(26,28,31,.04) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(26,28,31,.04) 1px,transparent 1px) 0 0/22px 22px,var(--paper);border-bottom:1px solid var(--line2);padding-bottom:18px}
.mag-hero__t{font-size:clamp(26px,5.5vw,38px);margin:14px 0 6px}
.mag-hero__t span{color:var(--accent)}
.mag-hero__p{color:var(--ink2);max-width:620px;margin-bottom:14px}
.mag-chips{margin:0}
.mag-chips .chip{text-decoration:none;color:var(--ink2)}.mag-chips .chip:hover{color:var(--accent)}
.mag-chips .chip.is-on,.mag-chips .chip.is-on:hover{color:#fff}

/* article cards */
.mgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.mcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.mcard__media{display:block;aspect-ratio:16/9;background:var(--accent-s);overflow:hidden}
.mcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mcard:hover .mcard__media>img{transform:scale(1.03)}
.mcover-ph{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(rgba(43,92,130,.09) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(43,92,130,.09) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(135deg,#EEF3F7,var(--accent-s))}
.mcover-ph img{width:56px;height:56px;opacity:.8}
.mcard__body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.mcard__t{font-size:17px;line-height:1.6;margin:6px 0}
.mcard__ex{color:var(--muted);font-size:14px;line-height:1.9;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mtags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.mtag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--accent-s);color:var(--accent-d);font-size:12px;font-weight:700}
a.mtag:hover{background:var(--accent);color:#fff}
.mtag--howto{background:var(--green-s);color:var(--green)}
.mmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:auto 0 0;font-size:12.5px;color:var(--muted)}
.mmeta span{display:inline-flex;align-items:center;gap:5px}
.mmeta>*+*::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--faint);margin-inline-end:10px;display:inline-block}
.mmeta>span::before{margin-inline-end:5px}
.mag-empty{text-align:center;padding:36px 18px}

/* article page */
.mpost__col{max-width:792px}
.mpost__head{background:var(--paper);border-bottom:1px solid var(--line2);padding-bottom:22px;margin-bottom:22px}
.mpost__head .mtags{margin-top:16px}
.mpost__t{font-size:clamp(24px,5vw,36px);line-height:1.5;margin:10px 0 8px}
.mpost__lead{font-size:17px;color:var(--ink2);line-height:1.95;margin-bottom:14px}
.mpost__meta{font-size:13.5px}
.mpost__cover{margin:0 0 22px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:var(--accent-s)}
.mpost__cover img{width:100%}
.mpost__upd{font-size:13px;margin-top:20px}

.mprose{font-size:16.5px;line-height:2.1;color:var(--ink2)}
.mprose h2{font-size:21px;color:var(--ink);margin:1.6em 0 .5em}
.mprose h3{font-size:18px;color:var(--ink);margin:1.4em 0 .4em}
.mprose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.mprose ul,.mprose ol{padding-inline-start:1.4em;margin:0 0 1.2em}
.mprose li{margin-bottom:.35em}
.mprose li::marker{color:var(--accent)}
.mprose blockquote{margin:1.4em 0;padding:12px 18px;border-inline-start:4px solid var(--accent);background:var(--accent-s);border-radius:0 12px 12px 0;color:var(--ink)}
.mprose blockquote p:last-child{margin:0}
.mprose code,.mprose kbd{font-family:var(--mono);font-size:.88em;background:var(--line2);padding:1px 6px;border-radius:6px;direction:ltr;unicode-bidi:isolate}
.mprose pre{direction:ltr;text-align:left;background:#1A1C1F;color:#E7E4DE;padding:14px 16px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.7}
.mprose pre code{background:none;padding:0;color:inherit}
.mprose img{border-radius:12px;margin:1em auto}
.mprose figure{margin:1.4em 0}.mprose figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:6px}
.mprose table{font-size:14.5px;background:#fff;margin-bottom:1.2em}
.mprose th{background:var(--paper);color:var(--ink)}
.mprose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* how-to steps */
.howto{margin-top:26px}
.howto__t{font-size:21px;display:flex;align-items:baseline;gap:10px}
.howto__t small{font-size:13px;font-weight:600;color:var(--muted)}
.howto__list{list-style:none;counter-reset:hs;padding:0;margin:14px 0 0;display:grid;gap:12px}
.howto__step{counter-increment:hs;position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;padding-inline-start:60px;scroll-margin-top:150px}
.howto__step::before{content:counter(hs,persian);position:absolute;inset-inline-start:16px;top:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;font-size:15px;line-height:1}
.howto__step h3{font-size:16.5px;margin:4px 0 6px;line-height:1.6}
.howto__text{color:var(--ink2);font-size:15px;line-height:2}
.howto__text p{margin:0 0 .7em}.howto__text p:last-child{margin:0}

@media (max-width:639px){.mprose table{display:block;overflow-x:auto}}
@media (min-width:640px){
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .mcard--lead{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}
  .mcard--lead .mcard__media{aspect-ratio:auto;min-height:100%}
  .mcard--lead .mcard__body{padding:24px 26px;justify-content:center}
  .mcard--lead .mcard__t{font-size:22px}
  .mcard--lead .mcard__ex{-webkit-line-clamp:4;font-size:15px}
  .mcard--lead .mcard__body .mmeta{margin-top:4px}
}
@media (min-width:960px){
  .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mag-hero{padding-bottom:22px}
  .mpost__head{padding-bottom:28px;margin-bottom:28px}
  .howto__step{padding:20px 24px;padding-inline-start:74px}
  .howto__step::before{inset-inline-start:22px;top:20px}
}
@media (prefers-reduced-motion:reduce){.mcard__media img{transition:none}}