/* 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; }

.magbody .article-body > p:first-of-type::first-letter {
  font-size: 3.6em;
  font-weight: 700;
  float: right;
  line-height: .82;
  margin-inline-start: 10px;
  margin-top: 8px;
  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 .article-body > p:first-of-type::first-letter { font-size: 3em; }
  .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; }
}