[hideprofile]
[html]<div class="lore-timeline">
  <div class="timeline-main-title">ХРОНОЛОГИЯ</div>
  <!-- ГОД 1 -->
  <div class="timeline-year">
    <div class="year-title">1998</div>
    <div class="months">
      <div class="month"><strong>Август. Первые случаи заражения. </strong>В новостях передают о единичных случаях обращения в больницы на юге США с жалобами на странную сыпь в виде чешуи</div>
      <div class="month"><strong>Сентябрь. Первые случаи смертей. </strong>Первые случаи самовозгорания пациентов замечены в Луизиане</div>
      <div class="month"><strong>Декабрь.</strong> Количество погибших от неизвестной "драконьей болезни" превысило 5 тысяч человек, количество заражённых — не менее 100 тысяч по всему миру. Больше всего погибших в Луизиане. <em> <strong><br> <br>ВОЗ присваивает болезни статус пандемии</strong></em></div>
    </div>
  </div>

  <!-- ГОД 2 -->
  <div class="timeline-year">
    <div class="year-title">1999</div>
    <div class="months">
      <div class="month"><strong>Январь. Изоляция.</strong> Полностью закрывается воздушное пространство США, ограничены передвижения между штатами.</div>
      <div class="month"><strong>Март. Временные госпитали. </strong> Для тех, кто обнаружил у себя следы болезни, созданы временные госпитали, где пациентов стараются уберечь от самовозгорания.</div>
      <div class="month"><strong>Апрель.</strong> Количество погибших по всему миру <strong><em>более 10 млн человек</em></strong> и растёт с каждым днём. Люди сгорают заживо прямо на работе, дома и на улице.</div>
      <div class="month"><strong>Май. Статус катастрофы.</strong> Официальное название болезни — <strong><em>"драконья чешуя".</em></strong> Ей присвоен статус катастрофы. Введены военные положения. Пожарная служба проходит переквалификацию.</div>
      <div class="month"><strong>Июнь. Вторая волна изоляции. </strong> Передвижение между штатами полностью прекращено.</div>
      <div class="month"><strong>Июль. Анархия. </strong>Сенат Флориды распущен. Теперь управление переходит в руки военных.</div>
      <div class="month"><strong>Август. Полная анархия. </strong>Объявлена охота на тех, у кого заметят драконью чешую. Существуют отдельные группы выживших и избежавших казни. Отдельными людьми предприняты первые попытки контролировать вирус, но это, скорее, слухи.</div>
    </div>
  </div>

  <!-- ГОД 3 -->
  <div class="timeline-year">
    <div class="year-title">2000-2024</div>
    <div class="months">
      <div class="month"><strong>Вирус мутировал и стал ещё более непредсказуем.</strong> У носителей драконьей чешуи рождаются здоровые дети, некоторые из них не заражаются и в дальнейшем, однако далеко не все.<br><br>
В 2010 году начинаются первые <em>исчезновения детей от 2000 года рождения</em>, но никто не пытается установить связь между ними.</div>
    </div>
  </div>

  <!-- ГОД 4 -->
  <div class="timeline-year">
    <div class="year-title">2025-2026 (начало)</div>
    <div class="months">
      <div class="month">На телевидении появляются <strong><em>"голоса"</em></strong> — те, кто якобы научит людей "мириться" и жить с чешуёй. <strong><br><br>Инквизиция пытается выявить источник трансляций, но пока безуспешно.</strong></div>
    </div>
  </div>

</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap');

/* Главная плашка "ХРОНОЛОГИЯ" */
.timeline-main-title {
  width: max-content;
  margin: 0 auto 30px; /* по центру с отступом снизу */
  padding: 12px 40px;
  background: #8f927f; /* чуть темнее основного блока */
  color: #2f3029;
  font-size: 24px;
  font-weight: bold;
  border-radius: 20px;
  text-align: center;
}

.lore-timeline {
  width: 900px;
  margin: 0 auto;
  font-family: 'Philosopher', serif;
  font-size: 16px;
  color: #3e3f36;
}

/* ===== Год ===== */
.timeline-year {
  background: #aaad9c;
  border-radius: 16px;
  margin-bottom: 30px;
  padding: 36px 20px 20px;
  position: relative;
  overflow: visible;
}

/* Заголовок года */
.year-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #8f927f;
  padding: 8px 28px;
  border-radius: 20px;
  color: #2f3029;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/* ===== Месяцы ===== */
.months {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.month {
  background: #7b7e6b;
  border-radius: 12px;
  padding: 10px 16px;
  color: #2f3029;
  flex: 1 1 calc(50% - 12px); /* две колонки месяцев */
  box-sizing: border-box;
}

</style>[/html]