.official-news {
  width: min(1580px, calc(100% - 32px));
  margin: 16px auto;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(110deg, rgba(71, 7, 18, 0.42), transparent 58%),
    linear-gradient(180deg, rgba(236, 229, 214, 0.06), transparent),
    var(--panel);
}

.official-news summary {
  cursor: pointer;
  color: var(--bone);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.5;
}

.official-news summary span,
.official-news p,
.official-news time {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.official-news summary span { margin-left: 12px; }
.official-news p { line-height: 1.5; }
.official-news a { color: var(--bone); text-underline-offset: 3px; overflow-wrap: anywhere; }
.official-news ul { list-style: none; margin: 0 0 14px; padding: 0; }
.official-news li { display: flex; gap: 18px; padding: 9px 0; line-height: 1.4; }
.official-news li + li { border-top: 1px solid var(--line); }
.official-news time { flex: 0 0 105px; }
.official-news a:hover { color: var(--amber); }
.official-news a:focus-visible,
.official-news summary:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }

@media (max-width: 720px) {
  .official-news { width: calc(100% - 20px); padding: 12px 14px; }
  .official-news summary span { display: block; margin: 5px 0 0; }
  .official-news li { flex-direction: column; gap: 3px; }
  .official-news time { flex-basis: auto; }
}