/*
 * News archive (news-archive.html and FA/news-archive.html)
 * The newest story leads in a dark band under the header; the rest run down a
 * year-by-year timeline. Same file for English and Persian; [dir="rtl"] mirrors it.
 */
/* style.css gives #news-archive padding and a top margin from the old layout */
#news-archive.na { padding: 0; margin: 0; }

.na {
  --na-ink: #000;
  --na-paper: #fff;
  --na-steel: #e7eaee;
  --na-graphite: #5d6672;
  --na-text: #1e2329;
  --na-signal: #e3e208;
  --na-gutter: 168px;
  color: var(--na-text);
  background: var(--na-paper);
}
[dir="rtl"] .na,
.na[lang="fa"] { font-family: 'Vazirmatn', 'Vazir', Tahoma, sans-serif; }

.na a { color: inherit; text-decoration: none; }
.na a:focus-visible { outline: 3px solid var(--na-signal); outline-offset: 3px; }
.na img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- dark band: title + newest story ---------- */
.na-hero {
  background: var(--na-ink);
  color: #fff;
  padding: 116px 0 56px;
}
.na-hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.na .na-title {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -.01em;
}
[dir="rtl"] .na .na-title { font-family: inherit; letter-spacing: 0; }
.na-lede {
  flex: 1 1 320px;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  max-width: 52ch;
}
.na-count {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

.na-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
}
.na-feature-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1d21;
}
.na-feature time {
  display: block;
  font-size: 14px;
  color: var(--na-signal);
  margin-bottom: 14px;
}
.na .na-feature h2 {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
}
[dir="rtl"] .na .na-feature h2 { font-family: inherit; line-height: 1.6; }
.na-feature h2 a:hover { text-decoration: underline; text-decoration-color: var(--na-signal); text-underline-offset: 6px; }
.na-feature .na-excerpt { color: rgba(255, 255, 255, .75); font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.na-more {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--na-signal);
  color: var(--na-signal) !important;
  font-size: 15px;
  font-weight: 600;
}
.na-more:hover { background: var(--na-signal); color: var(--na-ink) !important; }

/* ---------- the timeline ---------- */
.na-body { padding: 64px 0 80px; }
.na-hero + .na-body .na-list:empty { display: none; }

.na-year {
  display: grid;
  grid-template-columns: var(--na-gutter) minmax(0, 1fr);
  border-top: 1px solid var(--na-steel);
}
.na-year:first-child { border-top: 0; }
.na .na-year-label {
  position: sticky;
  top: 92px;
  align-self: start;
  margin: 0;
  padding: 26px 0 0;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--na-graphite);
  letter-spacing: -.02em;
  text-align: start;
}
.na .na-year-label::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin-top: 12px;
  background: var(--na-signal);
}
[dir="rtl"] .na .na-year-label { font-family: inherit; letter-spacing: 0; }

.na-items { list-style: none; margin: 0; padding: 0; }
.na-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 208px;
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--na-steel);
}
.na-item:last-child { border-bottom: 0; }

.na-date { display: flex; flex-direction: column; color: var(--na-graphite); }
.na-day { font-size: 34px; line-height: 1; font-weight: 700; color: var(--na-text); }
.na-mon { font-size: 14px; margin-top: 6px; }

.na .na-item h3 {
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  margin: 2px 0 10px;
  color: var(--na-text);
}
[dir="rtl"] .na .na-item h3 { font-family: inherit; line-height: 1.7; }
.na-item h3 a:hover { text-decoration: underline; text-decoration-color: var(--na-signal); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.na-item .na-excerpt {
  margin: 0;
  color: var(--na-graphite);
  font-size: 15px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.na-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--na-steel); }

/* ---------- pages ---------- */
.na-pages { margin-top: 48px; }
.na-pages ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.na-pages a, .na-pages span {
  display: inline-block;
  min-width: 44px;
  padding: 10px 14px;
  text-align: center;
  font-size: 15px;
  border: 1px solid var(--na-steel);
  color: var(--na-text);
}
.na-pages a:hover { border-color: var(--na-text); }
.na-pages [aria-current="page"] { background: var(--na-signal); border-color: var(--na-signal); font-weight: 700; }
.na-pages .na-gap { border-color: transparent; }

/* ---------- empty / error ---------- */
.na-note { padding: 48px 0; font-size: 17px; color: var(--na-graphite); text-align: center; }
.na-hero .na-note { color: rgba(255, 255, 255, .72); }

/* ---------- smaller screens ---------- */
@media (max-width: 991px) {
  .na { --na-gutter: 112px; }
  .na-feature { grid-template-columns: 1fr; gap: 24px; }
  .na .na-year-label { font-size: 44px; }
  .na-item { grid-template-columns: 64px minmax(0, 1fr) 150px; gap: 20px; }
}
@media (max-width: 640px) {
  .na-hero { padding: 100px 0 40px; }
  .na .na-title { font-size: 40px; }
  .na .na-feature h2 { font-size: 24px; }
  .na-body { padding: 40px 0 56px; }
  .na-year { grid-template-columns: 1fr; }
  .na .na-year-label {
    position: static;
    font-size: 40px;
    padding-top: 24px;
  }
  .na-item { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .na-thumb { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; margin-bottom: 4px; }
  .na-item-text { grid-column: 2; }
  .na-date { grid-column: 1; grid-row: 1 / span 2; }
  .na-day { font-size: 26px; }
}
@media (prefers-reduced-motion: no-preference) {
  .na-more { transition: background .2s, color .2s; }
}