.updates-intro { max-width: 900px; margin: 0 0 28px; font-size: 1rem; line-height: 1.55; }
.updates-list { --update-inset: 24px; max-width: 900px; margin: 0; padding: 0; border: 2px solid #777; background: #333; list-style: none; }
.update-row { position: relative; display: grid; grid-template-columns: 84px 128px minmax(0, 1fr); grid-template-areas: 'date icon text'; align-items: start; gap: 0 18px; padding: 18px var(--update-inset); }
.update-row + .update-row::before { content: ''; position: absolute; top: 0; left: var(--update-inset); right: var(--update-inset); height: 1px; background: rgba(255,255,255,.12); }
.update-row time { grid-area: date; padding-top: 2px; color: #f4f1ea; font-weight: 800; line-height: 1.35; }
.update-row time span { display: block; color: #c7d2cb; font-size: .85rem; font-weight: 400; }
.update-icon { grid-area: icon; width: 128px; height: 96px; }
.update-text { grid-area: text; min-width: 0; color: #c7d2cb; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.update-text p { margin: 0 0 6px; }
.update-text p:last-child { margin-bottom: 0; }
.update-text a { color: #f0cd99; text-underline-offset: 3px; }
.update-text a:hover { color: #fff; }
.update-text a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.updates-pagination { max-width: 900px; display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; }
.updates-tile-label { position: absolute; top: 0; right: 0; padding: 3px 7px 4px; background: #e3b341; color: #101419; font-size: .72rem; font-weight: 800; line-height: 1.2; }
@media (max-width: 640px) {
  .updates-list { --update-inset: 16px; }
  .update-row { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: 'icon date' 'text text'; gap: 12px 16px; padding-block: 16px; }
  .update-row time { align-self: center; padding: 0; }
}