/* ==========================================================================
   Radio Shemroon — site theme
   One stylesheet. Replaces the old styles.css + artin.css pair.
   Visual language taken from the Radio Shemroon iOS app:
   navy chrome, gold accents, near-black page, orange for live/broadcast cues.
   ========================================================================== */

:root{
  --ink:#0a0c14;
  --bar:#141c3e;
  --card:#13151f;
  --card-2:#1a1d29;
  --line:#252a3a;
  --txt:#f1f2f7;
  --mut:#8a90a6;
  --dim:#616780;
  --gold:#d9a441;
  --gold-2:#f3d18a;
  --flame:#ff5a1f;
  --live:#e0322f;
  --r:14px;
  --barh:64px;
  --wrap:1180px;
}

*{box-sizing:border-box}
html,body{overscroll-behavior-y:none}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
body.sh-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.3}

/* Persian text — post titles and bodies come out of the DB in either script.
   dir="auto" on the element handles direction; this handles the typeface. */
:lang(fa),[dir=auto],.sh-fa{font-family:Vazirmatn,Inter,sans-serif}

.sh-wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px}
.sh-hidden{display:none !important}

/* ==========================================================================
   App bar
   ========================================================================== */
.sh-appbar{
  position:sticky;top:0;z-index:40;background:var(--bar);
  border-bottom:1px solid rgba(217,164,65,.22);
  padding-top:env(safe-area-inset-top);
}
.sh-appbar__in{
  max-width:var(--wrap);margin:0 auto;height:56px;
  display:flex;align-items:center;gap:10px;padding:0 10px;
}
.sh-icobtn{
  width:40px;height:40px;display:grid;place-items:center;border:0;background:none;
  color:#fff;cursor:pointer;border-radius:10px;flex:0 0 auto;padding:0;
}
.sh-icobtn:hover{background:rgba(255,255,255,.08)}
.sh-brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.sh-brand__mark{height:30px;width:30px;object-fit:contain}
.sh-brand__txt{
  font-family:Cinzel,serif;font-weight:700;letter-spacing:.10em;font-size:14.5px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;
}
.sh-nav{display:none;gap:20px;font-size:13.5px;font-weight:500;color:#c9cde0;margin-left:26px}
.sh-nav a:hover{color:var(--gold-2)}
.sh-onair{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10px;
  font-weight:700;letter-spacing:.12em;color:#ffb4b2;background:rgba(224,50,47,.15);
  border:1px solid rgba(224,50,47,.45);border-radius:999px;padding:5px 10px;cursor:pointer;
  font-family:inherit;
}
.sh-onair i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:sh-pulse 1.6s infinite}
@keyframes sh-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* slide-out menu (mobile) */
.sh-drawer{position:fixed;inset:0;z-index:80;display:none}
.sh-drawer.on{display:block}
.sh-drawer__bd{position:absolute;inset:0;background:rgba(4,6,12,.7)}
.sh-drawer__p{
  position:absolute;inset-block:0;left:0;width:min(300px,84vw);overflow:auto;
  background:linear-gradient(180deg,#101733,#0a0c14 40%);
  border-right:1px solid rgba(217,164,65,.3);padding:14px;
  animation:sh-slide .24s cubic-bezier(.22,.9,.3,1);
}
@keyframes sh-slide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.sh-drawer__p ul{list-style:none;margin:0;padding:0}
.sh-drawer__p li a{
  display:block;padding:13px 12px;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:500;color:#d7dbeb;
}
.sh-drawer__p li a:hover{color:var(--gold-2)}
.sh-drawer__p ul ul a{padding-left:28px;font-size:13.5px;color:#9aa0b6}

/* ==========================================================================
   Layout
   ========================================================================== */
.sh-layout{padding-top:14px}
.sh-rail{display:none}

/* ==========================================================================
   Lead / featured card
   ========================================================================== */
.sh-lead{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#000;
}
.sh-lead img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.72}
.sh-lead__b{
  position:absolute;inset-inline:0;bottom:0;padding:44px 14px 14px;
  background:linear-gradient(180deg,transparent,rgba(6,8,14,.94) 62%);
}
.sh-lead__c{font-family:Cinzel,serif;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--gold)}
.sh-lead__t{margin-top:7px;font-size:19px;font-weight:800;line-height:1.45}
.sh-lead__d{margin-top:7px;font-size:11.5px;color:#8d93a9}

/* ==========================================================================
   Section headings
   ========================================================================== */
.sh-sechead{display:flex;align-items:baseline;gap:10px;margin:28px 0 13px}
.sh-sechead h2{font-size:17px;letter-spacing:.02em}
.sh-sechead .en{
  font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:700;font-family:Cinzel,serif;
}
.sh-sechead .more{margin-left:auto;font-size:12px;color:var(--mut)}
.sh-sechead .more:hover{color:var(--gold-2)}

/* ==========================================================================
   Post cards
   ========================================================================== */
.sh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sh-pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.18s;display:flex;flex-direction:column;
}
.sh-pcard:hover{border-color:rgba(217,164,65,.45);transform:translateY(-2px)}
.sh-pcard__img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--card-2)}
.sh-pcard__b{padding:10px 11px 13px;display:flex;flex-direction:column;flex:1}
.sh-pcard__c{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--gold);font-family:Cinzel,serif}
.sh-pcard__t{
  margin-top:6px;font-size:13.5px;line-height:1.5;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sh-pcard__d{margin-top:auto;padding-top:8px;font-size:11px;color:var(--dim)}

/* an in-feed ad borrows the card shell so the grid row never breaks */
.sh-pcard--ad{padding:10px;justify-content:center;min-height:180px}
.sh-adlabel{
  display:block;font-size:9px;letter-spacing:.16em;font-weight:700;color:#4c5268;
  margin-bottom:6px;text-align:center;
}

/* episode list */
.sh-eplist{display:flex;flex-direction:column;gap:8px}
.sh-ep{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;
}
.sh-ep:hover{border-color:rgba(217,164,65,.4)}
.sh-ep__n{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(217,164,65,.12);color:var(--gold-2);flex:0 0 auto;
}
.sh-ep__n svg{width:15px;height:15px;fill:currentColor}
.sh-ep__t{
  flex:1;min-width:0;font-size:13.5px;line-height:1.5;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sh-ep__d{font-size:11px;color:var(--dim);flex:0 0 auto}

/* ==========================================================================
   Ads
   ========================================================================== */
.sh-ad{margin:26px 0;min-height:90px}
.sh-ad ins{display:block}

/* ==========================================================================
   Article (fullstory)
   ========================================================================== */
.sh-article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px 22px;
}
.sh-article__c{font-family:Cinzel,serif;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--gold)}
.sh-article__title{margin-top:9px;font-size:24px;line-height:1.4}
.sh-article__meta{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding-bottom:14px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--dim);
}
.sh-article__meta b{color:#a7adc2;font-weight:600}
.sh-article__pod{margin:16px 0}
.sh-article__body{margin-top:16px;font-size:15.5px;line-height:1.85;color:#dfe2ee}
.sh-article__body p{margin:0 0 1.1em}
.sh-article__body img{border-radius:10px;margin:14px auto;height:auto}
.sh-article__body a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.sh-article__body h2,.sh-article__body h3{margin:1.6em 0 .6em;font-size:19px}
.sh-article__body blockquote{
  margin:1.2em 0;padding:10px 16px;border-left:3px solid var(--gold);
  background:rgba(217,164,65,.06);border-radius:0 8px 8px 0;color:#c9cee0;
}
.sh-article__body iframe{max-width:100%;border-radius:10px}
.sh-article__body ul,.sh-article__body ol{padding-left:22px}
.sh-editdate{margin-top:18px;font-size:12px;color:var(--dim)}

/* share row */
.sh-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sh-share a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:#b6bbcd;
}
.sh-share a:hover{color:var(--gold-2);border-color:rgba(217,164,65,.4)}
.sh-share svg{width:14px;height:14px;fill:currentColor}

/* ==========================================================================
   Pagination
   ========================================================================== */
.sh-pager{margin:26px 0;display:flex;justify-content:center}
.sh-pager .basic,.sh-pager span,.sh-pager a{
  display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;
  margin:0 3px;border-radius:10px;background:var(--card);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:#b6bbcd;
}
.sh-pager a:hover{border-color:rgba(217,164,65,.45);color:var(--gold-2)}
.sh-pager span{background:rgba(217,164,65,.14);border-color:rgba(217,164,65,.5);color:var(--gold-2)}
.sh-pager .nav_ext{background:none;border:0}

/* ==========================================================================
   Alerts / info
   ========================================================================== */
.sh-alert{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:14px 16px;margin:16px 0;
}
.sh-alert b{color:var(--gold-2)}

/* ==========================================================================
   DLE plumbing — comments, forms, tables.
   These pages ship with DLE's own markup, so we style by its class names
   rather than rewriting every template.
   ========================================================================== */
.sh-box{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin:16px 0;
}
.sh-box h1,.sh-box h2{font-size:19px;margin-bottom:12px}

input[type=text],input[type=password],input[type=email],input[type=search],
input[type=number],input[type=url],textarea,select{
  width:100%;max-width:100%;background:#0e1019;color:var(--txt);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:14px;outline:0;
}
input:focus,textarea:focus,select:focus{border-color:rgba(217,164,65,.55)}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:12.5px;color:var(--mut);margin:12px 0 5px}

input[type=submit],button.sh-btn,.sh-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1408;
  border:0;border-radius:10px;padding:11px 20px;font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;
}
input[type=submit]:hover,.sh-btn:hover{filter:brightness(1.08)}
.sh-btn--ghost{
  background:none;border:1px solid var(--line);color:#b6bbcd;
}
.sh-btn--ghost:hover{border-color:rgba(217,164,65,.45);color:var(--gold-2)}

/* comments */
#dle-comments-list,.sh-comments{margin-top:8px}
.sh-comment{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;margin-bottom:10px;
}
.sh-comment__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sh-comment__av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--card-2)}
.sh-comment__who{font-size:13px;font-weight:700}
.sh-comment__when{font-size:11px;color:var(--dim)}
.sh-comment__body{font-size:14px;line-height:1.7;color:#dfe2ee}
.sh-comment__tools{margin-top:8px;display:flex;gap:12px;font-size:11.5px;color:var(--dim)}
.sh-comment__tools a:hover{color:var(--gold-2)}

/* DLE's own bits that appear inside plumbing pages */
.berrors,.wrong,.attention{
  background:rgba(224,50,47,.1);border:1px solid rgba(224,50,47,.4);
  border-radius:10px;padding:12px 14px;margin:12px 0;color:#ffb4b2;font-size:13.5px;
}
.checkbox,.radio{display:inline-flex;align-items:center;gap:7px;margin:6px 14px 6px 0}
.checkbox input,.radio input{width:auto}
table{width:100%;border-collapse:collapse}
table td,table th{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13.5px}
table th{color:var(--mut);font-weight:600;text-align:left}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ==========================================================================
   Footer
   ========================================================================== */
.sh-foot{
  margin-top:44px;border-top:1px solid var(--line);background:#0c0e17;
  padding:26px 0 calc(var(--barh) + 34px + env(safe-area-inset-bottom));
}
.sh-socials{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
.sh-soc{
  width:40px;height:40px;border-radius:11px;background:var(--card-2);
  border:1px solid var(--line);display:grid;place-items:center;color:#a6abc0;
}
.sh-soc:hover{color:var(--gold-2);border-color:rgba(217,164,65,.4)}
.sh-soc svg{width:18px;height:18px;fill:currentColor}
.sh-fmeta{text-align:center;font-size:11.5px;color:#5a6076;line-height:2}
.sh-fmeta a:hover{color:var(--gold-2)}
.sh-fbrand{font-family:Cinzel,serif;letter-spacing:.2em;color:var(--gold);font-size:12px}

/* ==========================================================================
   Live bar (always visible) + expanded player
   ========================================================================== */
.sh-livebar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;background:rgba(20,28,62,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(217,164,65,.32);
  padding-bottom:env(safe-area-inset-bottom);cursor:pointer;
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
}
.sh-livebar__in{
  max-width:var(--wrap);margin:0 auto;height:var(--barh);
  display:flex;align-items:center;gap:11px;padding:0 12px;
}
.sh-livebar__art{
  width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(217,164,65,.3);
}
.sh-livebar__m{flex:1;min-width:0}
.sh-livebar__t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-livebar__s{
  margin-top:2px;font-size:10.5px;color:#9aa0b6;display:flex;align-items:center;
  gap:5px;letter-spacing:.04em;
}
.sh-livebar__s i{width:5px;height:5px;border-radius:50%;background:var(--live);animation:sh-pulse 1.6s infinite}
.sh-livebar__up{color:#7d8397;flex:0 0 auto;display:grid;place-items:center}
.sh-livebar__up svg{width:18px;height:18px;fill:currentColor}

.sh-rnd{
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);
  background:none;color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0;
}
.sh-rnd svg{width:20px;height:20px;fill:currentColor}
.sh-rnd:hover{border-color:var(--gold);color:var(--gold-2)}

/* loading spinner state, shared by both play buttons */
.sh-loading .sh-ic-play,.sh-loading .sh-ic-pause{display:none}
.sh-loading .sh-ic-load{display:block;animation:sh-spin .9s linear infinite}
.sh-ic-load{display:none}
.sh-playing .sh-ic-play{display:none}
.sh-playing .sh-ic-pause{display:block}
.sh-ic-pause{display:none}
@keyframes sh-spin{to{transform:rotate(360deg)}}

.sh-sheet{position:fixed;inset:0;z-index:70;display:none}
.sh-sheet.on{display:block}
.sh-sheet__bd{position:absolute;inset:0;background:rgba(4,6,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sh-sheet__p{
  position:absolute;inset-inline:0;bottom:0;max-height:96vh;overflow:auto;
  background:linear-gradient(180deg,#101733,#0a0c14 34%);
  border-top:1px solid rgba(217,164,65,.4);border-radius:20px 20px 0 0;
  padding:8px 14px calc(24px + env(safe-area-inset-bottom));
  animation:sh-up .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes sh-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sh-sheet__grab{width:42px;height:4px;border-radius:4px;background:#39405c;margin:6px auto 4px}
.sh-sheet__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sh-sheet__top .sh-icobtn{color:#9aa0b6}
.sh-sheet__ttl{font-size:11px;font-weight:700;letter-spacing:.18em;color:#9aa0b6}

.sh-banner{
  border-radius:12px;overflow:hidden;border:1px solid rgba(217,164,65,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.6);background:#000;
}
.sh-chanhead{
  display:flex;align-items:center;justify-content:center;gap:9px;margin:18px 0 6px;
  font-size:11px;font-weight:700;letter-spacing:.16em;color:#cfd3e4;
}
.sh-chanhead svg{fill:var(--flame)}
.sh-chans{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);scrollbar-width:none;
}
.sh-chans::-webkit-scrollbar{display:none}
.sh-chan{
  flex:0 0 auto;scroll-snap-align:center;padding:13px 20px;font-size:15px;font-weight:500;
  color:#6e7488;white-space:nowrap;cursor:pointer;letter-spacing:.03em;
  border-bottom:2px solid transparent;transition:.18s;background:none;border-left:0;border-right:0;
  border-top:0;font-family:inherit;
}
.sh-chan:hover{color:#b9bfd4}
.sh-chan.on{color:var(--gold-2);font-weight:700;border-bottom-color:var(--gold)}
.sh-chan[disabled]{opacity:.38;cursor:not-allowed}

.sh-nplabel{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:15px 0 13px;
  font-size:11px;font-weight:700;letter-spacing:.18em;color:#9aa0b6;
}
.sh-nplabel svg{fill:var(--flame)}
.sh-track{display:flex;align-items:center;gap:14px;padding:0 2px}
.sh-track__art{
  width:74px;height:74px;border-radius:10px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);background:var(--card-2);
}
.sh-track__meta{flex:1;min-width:0}
.sh-track__t{
  font-size:16px;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sh-track__a{margin-top:5px;font-size:12px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase}

.sh-transport{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 2px 4px}
.sh-play{
  width:98px;height:98px;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.03);color:#fff;display:grid;place-items:center;
  cursor:pointer;transition:.2s;padding:0;
}
.sh-play:hover{border-color:var(--gold);color:var(--gold-2);box-shadow:0 0 0 10px rgba(217,164,65,.07)}
.sh-play svg{width:40px;height:40px;fill:currentColor}
.sh-volrow{display:flex;align-items:center;gap:12px;width:100%;padding:0 4px}
.sh-volrow .ic{fill:#7d8397;flex:0 0 auto}
.sh-vol{
  -webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#fff 0 55%,#343a4d 55%);outline:0;
}
.sh-vol::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;cursor:pointer;
}
.sh-vol::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:#fff;cursor:pointer}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width:900px){
  .sh-nav{display:flex}
  .sh-appbar .sh-icobtn.menu{display:none}
  .sh-layout{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start;padding-top:16px}
  .sh-rail{display:flex;position:sticky;top:76px;flex-direction:column;gap:16px}
  .sh-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .sh-lead img{aspect-ratio:21/9}
  .sh-lead__t{font-size:26px}
  .sh-lead__b{padding:70px 20px 20px}
  .sh-foot{padding-bottom:calc(var(--barh) + 30px)}
  .sh-article{padding:26px 30px 32px}
  .sh-article__title{font-size:31px}
  .sh-sheet__p{
    max-width:520px;margin:0 auto;border-radius:20px;bottom:auto;top:50%;
    transform:translateY(-50%);animation:none;max-height:88vh;
  }
  .sh-railcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
  .sh-railcard h3{
    margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.16em;
    color:var(--gold);font-family:Cinzel,serif;
  }
}

/* very small phones */
@media (max-width:359px){
  .sh-grid{grid-template-columns:1fr}
  .sh-brand__txt{display:none}
}

/* ==========================================================================
   Card internals — the card is a <div> so the category link is not nested
   inside the title link (invalid HTML, and it breaks middle-click).
   ========================================================================== */
.sh-pcard__link{display:block}
.sh-pcard__c,.sh-pcard__t,.sh-pcard__d{display:block}
.sh-pcard__t:hover{color:var(--gold-2)}
.sh-pcard__c a{color:inherit}
.sh-pcard__c a:hover{color:var(--gold-2)}
/* a post with no image falls back to the logo — contain it, don't crop it */
.sh-pcard__img--fallback{object-fit:contain;padding:22px;background:#0e1019}

/* first card on the homepage reads as the lead story */
.sh-grid--lead>.sh-pcard:first-child{grid-column:1/-1}
.sh-grid--lead>.sh-pcard:first-child .sh-pcard__img{aspect-ratio:16/9}
.sh-grid--lead>.sh-pcard:first-child .sh-pcard__t{
  font-size:18px;font-weight:800;line-height:1.45;-webkit-line-clamp:3;
}
.sh-grid--lead>.sh-pcard:first-child .sh-pcard__b{padding:13px 14px 16px}

/* breadcrumbs */
.sh-crumbs{font-size:12px;color:var(--dim);margin:2px 0 14px}
.sh-crumbs a{color:#9aa0b6}
.sh-crumbs a:hover{color:var(--gold-2)}

/* category menu (used by DLE's category widget) */
.sh-catmenu{list-style:none;margin:0;padding:0}
.sh-catmenu a{
  display:flex;justify-content:space-between;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--line);font-size:13.5px;color:#c9cde0;
}
.sh-catmenu a:hover{color:var(--gold-2)}
.sh-catmenu__n{color:var(--dim);font-size:11.5px}
.sh-catmenu ul{list-style:none;margin:0;padding:0 0 0 14px}

@media (min-width:900px){
  .sh-grid--lead>.sh-pcard:first-child{
    grid-column:1/-1;flex-direction:row;align-items:stretch;
  }
  .sh-grid--lead>.sh-pcard:first-child .sh-pcard__link{flex:0 0 58%}
  .sh-grid--lead>.sh-pcard:first-child .sh-pcard__img{height:100%;aspect-ratio:16/9}
  .sh-grid--lead>.sh-pcard:first-child .sh-pcard__b{justify-content:center;padding:24px 26px}
  .sh-grid--lead>.sh-pcard:first-child .sh-pcard__t{font-size:24px}
  .sh-grid--lead>.sh-pcard:first-child .sh-pcard__d{margin-top:14px}
}

/* ==========================================================================
   Headline weight — the old template rendered Persian headlines as PNGs made
   with Vazirmatn-Black at 60px. We load the same family as a webfont, so the
   heading can carry that same weight while staying real, indexable text.
   ========================================================================== */
.sh-article__title{font-weight:900;font-size:27px;line-height:1.5}
.sh-grid--lead>.sh-pcard:first-child .sh-pcard__t{font-weight:800}
@media (min-width:900px){
  .sh-article__title{font-size:38px;line-height:1.45}
}

/* ==========================================================================
   Cards carry the image and the headline, nothing else — no category chip,
   no date. Matches the old homepage, which the operator was happy with.
   ========================================================================== */
.sh-pcard__b{padding:11px 12px 14px}
.sh-pcard__t{margin-top:0;font-weight:700;font-size:14px;-webkit-line-clamp:2}
@media (min-width:900px){
  .sh-grid--lead>.sh-pcard:first-child .sh-pcard__t{font-size:24px}
}

/* ==========================================================================
   Generated Persian headlines (texttoimage.php). Light ink on transparent so
   they read on the dark ground. The PNG is oversampled and scaled down, which
   is what keeps it crisp on retina screens.
   ========================================================================== */
.sh-fatitle{max-width:100%;height:auto;display:block}
.sh-pcard__t--img{-webkit-line-clamp:none;display:block;overflow:visible;margin-top:2px}
.sh-article__title--img{margin-top:12px}
.sh-fatitle--big{max-height:none}