/* Дополнение к лендингу «Лидеры Эпохи 2026» на award.persono.ru:
   живой блок «13 / Архив» и хроника всех премий проекта.
   styles.css лендинга не трогаем — он снят с persono.ru как есть. */

/* ---------- список церемоний внутри блока архива ---------- */
.archive-list{display:flex;flex-direction:column;gap:1px;margin-top:26px;max-width:460px}
.archive-item{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 18px;
  padding:15px 0;border-top:1px solid rgba(255,255,255,.16);color:#fff;
  transition:padding-left .35s var(--ease),background .35s var(--ease);
}
.archive-item:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
a.archive-item:hover{background:rgba(255,255,255,.05);padding-left:12px}
.archive-item b{font:400 17px/1.25 var(--serif)}
a.archive-item:hover b{color:var(--champagne)}
.archive-item span{grid-column:1;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.archive-item em{grid-row:1;grid-column:2;font-style:normal;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--champagne);white-space:nowrap}
.archive-item--quiet{opacity:.55}
.archive-item--quiet em{color:rgba(255,255,255,.5)}
#archive-summary{margin-top:10px}

/* ---------- хроника премий ---------- */
.chronicle{background:var(--paper)}
.chronicle h2{max-width:12ch}
.chronicle-lead{max-width:56ch;margin-top:28px;color:#5b3f40;font-size:16px;line-height:1.7}
.chronicle-grid{
  display:grid;gap:clamp(26px,3vw,46px);margin-top:clamp(44px,5vw,72px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(230px,25vw,330px),1fr));
}
.chronicle-card{display:flex;flex-direction:column;color:var(--ink)}
.chronicle-card figure{margin:0;overflow:hidden;background:var(--wine);aspect-ratio:4/3}
.chronicle-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .75s var(--ease)}
a.chronicle-card:hover img{transform:scale(1.05)}
.chronicle-card h3{
  margin:18px 0 0;font:400 clamp(18px,1.7vw,22px)/1.2 var(--serif);letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
a.chronicle-card:hover h3{color:var(--ruby)}
.chronicle-card p{margin:9px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1.5}
.chronicle-note{margin-top:auto;padding-top:16px;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
a.chronicle-card .chronicle-note{color:var(--ruby)}
.chronicle-note b{color:#fff;background:var(--ruby);padding:5px 10px;font-weight:400;
  display:inline-block}
.chronicle-card--quiet{opacity:.6}
.chronicle-card--quiet figure{filter:saturate(.35)}
.chronicle-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;
  margin-top:clamp(40px,4.5vw,66px)}

@media (max-width:900px){
  .archive-list{max-width:none}
  .chronicle-card h3{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .chronicle-card img,.archive-item{transition:none}
}

/* Пятая вкладка года не помещается в узкий экран: колонка сетки по умолчанию
   не сжимается ниже содержимого, из-за чего появлялся горизонтальный скролл.
   Строка вкладок и так умеет прокручиваться сама. */
.archive-copy,.archive-years{min-width:0}