/* mag.css — the house article style for /mag.
   Ported 2026-09-01 from the DLE template's clai.css (templates/raino/css/), which is where the
   penews skill's class names have always been styled. iranian.fi never loaded that file, so every
   article the operator formatted with penews — stat grids, pullquotes, timelines, source notices —
   has been rendering as flat stacked text on the public site since the magazine went live.

   Two deliberate departures from clai.css:

   1. It is a light "paper" sheet (#f7f4ee) with a red accent; /mag is a dark editorial column
      (#2e2d2b, text #f2f0ec, links #ffcc00). Everything is re-derived for that ground, and the
      accent is the site's gold, not the DLE template's red — the red belongs to the CMS skin.
   2. clai.css has the فال page's CSS pasted below the article CSS, and its .section-title
      (12px, uppercase, grey) overrides the article one. Only the article half is ported.

   Everything is scoped under .magbody so it cannot leak into the rest of the site. Old posts carry
   a full <div class="hero"> that duplicates the header mag_post.php draws; the parts that repeat
   are hidden here rather than rewritten in the database. */

.magbody {
  --mg-gold:   #e7c873;
  --mg-line:   rgba(255,255,255,.18);
  --mg-panel:  rgba(255,255,255,.055);
  --mg-panel2: rgba(255,255,255,.085);
  --mg-dim:    rgba(255,255,255,.62);
  --mg-dimmer: rgba(255,255,255,.45);
}

/* ── the hero the article carries and the page already drew ────────────────── */
.magbody .hero > .hero-eyebrow,
.magbody .hero > h1.headline,
.magbody .hero > .byline-row { display: none; }

.magbody .deck {
  font-size: 1.08rem;
  line-height: 1.95;
  color: #fff;
  border-bottom: 1px solid var(--mg-line);
  padding-bottom: 20px;
  margin-bottom: 26px;
}

/* ── media ─────────────────────────────────────────────────────────────────── */
.magbody .hero-image-wrap { margin: 0 0 22px; }
.magbody .hero-image-wrap figure { margin: 0; }
.magbody .hero-image-wrap img { margin: 0 0 8px; border-radius: 4px; }
.magbody .hero-image-wrap iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 4px; display: block; }

.magbody .image-caption,
.magbody figcaption.image-caption {
  font-size: .78rem;
  line-height: 1.7;
  color: var(--mg-dimmer);
  border-inline-start: 2px solid var(--mg-line);
  padding-inline-start: 8px;
  margin: 8px 0 0;
}

.magbody .hero-image-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: linear-gradient(135deg, #3a3937 0%, #232220 45%, #3a3937 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: 54px;
}

/* ── body ──────────────────────────────────────────────────────────────────── */
.magbody .article-body { margin: 0; padding: 0; }

/* NO DROP CAP IN PERSIAN (2026-09-12).

   This was ::first-letter at 3.6em, floated, line-height .82. Two things were
   wrong with it, and the second is the one that cannot be tuned away:

   1. The floated glyph sat on the lines beside it, because .82 leading over
      three and a half ems leaves the following lines nowhere to go.
   2. Arabic script JOINS. Pulling the first letter out of the word detaches it
      from the rest: the reader saw «ز» standing alone and «یان‌های» running on
      without it. A drop cap is a Latin device and it breaks a Persian word every
      single time — there is no first letter to lift.

   The opening gets its emphasis the way Persian typography actually does it:
   a rule above it, and weight on the first line. Both leave the words whole. */
/* The opening WORD, not the opening letter — the operator's call. The wrapper
   comes from mag_lead_word() in mag_lib.php, because CSS has no ::first-word,
   and the word arrives whole: nothing is lifted out of it, so «زیان‌های» keeps
   its نیم‌فاصله and its joins. */
.magbody .lead-word {
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1;
  color: var(--mg-gold);
}

.magbody h2,
.magbody h2.section-title {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  margin: 40px 0 14px;
  padding-bottom: 10px;
  position: relative;
}
.magbody h2.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; inset-inline-end: 0;
  width: 48px; height: 2px;
  background: var(--mg-gold);
}
.magbody h3,
.magbody h3.sub-title { font-size: 1.08rem; font-weight: 700; color: #fff; margin: 28px 0 10px; }

.magbody ul, .magbody ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.magbody li { margin-bottom: .4em; }

/* ── stat cards ────────────────────────────────────────────────────────────── */
.magbody .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 28px 0;
}
.magbody .stat-card {
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-top: 3px solid var(--mg-gold);
  border-radius: 3px;
  padding: 15px 13px;
  text-align: center;
  line-height: 1.5;
}
/* the skill documents .num/.lbl; the posts in the database use <strong>/<span>. Both work. */
.magbody .stat-card .num,
.magbody .stat-card strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--mg-gold);
  margin-bottom: 5px;
}
.magbody .stat-card .lbl,
.magbody .stat-card span { display: block; font-size: .76rem; font-weight: 600; line-height: 1.6; color: var(--mg-dim); }

/* ── pullquote ─────────────────────────────────────────────────────────────── */
.magbody blockquote.pullquote,
.magbody .pullquote {
  position: relative;
  background: var(--mg-panel);
  border: 0;
  border-inline-start: 4px solid var(--mg-gold);
  border-radius: 3px;
  margin: 32px 0;
  padding: 22px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.85;
  color: #fff;
}
.magbody .pullquote::before {
  content: '❝';
  position: absolute;
  top: -10px; inset-inline-end: 18px;
  font-size: 44px;
  line-height: 1;
  color: var(--mg-gold);
  opacity: .35;
}
.magbody .pullquote cite {
  display: block;
  margin-top: 10px;
  font-size: .8rem;
  font-weight: 400;
  font-style: normal;
  color: var(--mg-dimmer);
}

/* ── timeline ──────────────────────────────────────────────────────────────── */
.magbody .timeline { position: relative; margin: 32px 0; padding-inline-start: 30px; }
.magbody .timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 9px; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--mg-gold), var(--mg-line));
}
.magbody .tl-item { position: relative; margin-bottom: 22px; }
.magbody .tl-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -26px; top: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mg-gold);
  box-shadow: 0 0 0 3px #2e2d2b, 0 0 0 5px var(--mg-gold);
}
.magbody .tl-item.death::before { background: #fff; box-shadow: 0 0 0 3px #2e2d2b, 0 0 0 5px rgba(255,255,255,.5); }
.magbody .tl-date { font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: var(--mg-gold); margin-bottom: 3px; }
.magbody .tl-text { font-size: .93rem; line-height: 1.85; color: var(--mg-dim); }

/* ── info box ──────────────────────────────────────────────────────────────── */
.magbody .info-box {
  background: var(--mg-panel2);
  border: 1px solid var(--mg-line);
  border-radius: 4px;
  padding: 20px 22px;
  margin: 30px 0;
}
.magbody .info-box h3 { font-size: .96rem; font-weight: 800; color: #fff; margin: 0 0 10px; }
.magbody .info-box ul { list-style: none; padding: 0; margin: 0; }
.magbody .info-box ul li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: .9rem; line-height: 1.9; color: var(--mg-dim);
  padding: 6px 0;
  border-bottom: 1px dotted var(--mg-line);
  margin: 0;
}
.magbody .info-box ul li:last-child { border-bottom: 0; }
.magbody .info-box ul li::before { content: '▸'; color: var(--mg-gold); flex-shrink: 0; }

/* ── source / notice banner ────────────────────────────────────────────────── */
.magbody .who-notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(231,200,115,.10);
  border: 1px solid rgba(231,200,115,.34);
  border-inline-start: 4px solid var(--mg-gold);
  border-radius: 3px;
  padding: 15px 18px;
  margin: 30px 0;
  font-size: .9rem;
  line-height: 1.9;
  color: #f2f0ec;
}
.magbody .who-notice .icon { font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.magbody .who-notice a { color: var(--mg-gold); font-weight: 700; }

/* ── tags ──────────────────────────────────────────────────────────────────── */
.magbody .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 42px 0 0; }
.magbody .tag {
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 2px;
  padding: 5px 12px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mg-dim);
  text-decoration: none;
}
.magbody .tag:hover { border-color: var(--mg-gold); color: #fff; }
.magbody .tag:first-child { background: var(--mg-gold); border-color: var(--mg-gold); color: #221d10; }

/* ── odds and ends the template can emit ───────────────────────────────────── */
.magbody .category-tag {
  display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  color: var(--mg-gold);
  border-top: 2px solid var(--mg-gold);
  border-bottom: 2px solid var(--mg-gold);
  padding: 3px 12px;
}
.magbody .breaking-bar {
  display: flex; align-items: center; gap: 14px;
  background: var(--mg-gold); color: #221d10;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  padding: 9px 18px; border-radius: 3px; margin: 0 0 22px;
}
.magbody .breaking-bar .label { background: #221d10; color: var(--mg-gold); padding: 2px 9px; border-radius: 2px; font-size: .68rem; white-space: nowrap; }

@media (max-width: 600px) {
  .magbody .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .magbody h2, .magbody h2.section-title { font-size: 1.18rem; }
  .magbody .pullquote { font-size: 1rem; padding: 18px 18px; }
}

/* ── /tags — the tag index and one tag's posts, same dark column as an article ── */
.tagpage .magmeta a { color: #ffcc00; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tagcloud .tag {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  padding: 6px 13px;
  font-size: .84rem; font-weight: 600;
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.tagcloud .tag:hover { border-color: #e7c873; color: #fff; }
.tagcloud .tag span { font-size: .72rem; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }

.taglist { margin-top: 26px; }
.tagcard {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  text-decoration: none; color: inherit;
}
.tagcard:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.tagim { flex: 0 0 132px; aspect-ratio: 4 / 3; background: #3a3937; overflow: hidden; }
.tagim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tagtx { min-width: 0; flex: 1; }
.tagkick { font-size: .7rem; font-weight: 400; letter-spacing: .14em; color: #fff; }
.tagtt { margin-top: 8px; font-size: 1.12rem; font-weight: 400; line-height: 1.6; color: #fff; }
.tagcard:hover .tagtt { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tagdt { margin-top: 8px; font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.65); }

@media (max-width: 560px) {
  .tagim { flex-basis: 96px; }
  .tagtt { font-size: 1rem; }
}