/* What's new page (eliteleveld3/whats-new/index.html, written from eliteleveld3/whats-new/notes.json by build_site.py):
   one iron panel per release over the Act IV painting, opened by its patch-note card, then New / Changed / Fixed
   under seal-coloured headings. */
.wn-page {
  position: relative; isolation: isolate; overflow: hidden; min-height: 62vh;
  background:
    linear-gradient(180deg, rgba(10, 3, 2, 0.45), rgba(10, 3, 2, 0.75) 30%, rgba(10, 3, 2, 0.94) 55%, var(--bg) 80%),
    url('../img/theme/client/loading-act4-hell-hellfire.webp') center top / 100% auto no-repeat, var(--bg);
}
.wn { position: relative; z-index: 2; padding: 56px 20px 100px; max-width: 900px; }
.wn-head { text-align: center; }
.wn-head h1 { font: clamp(42px, 6vw, 64px)/1.1 var(--title); letter-spacing: 0.05em; margin: 0 0 12px; display: inline-block; }

.wn-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 8px; }
.wn-jump a {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; min-width: 0; max-width: 100%;
  background: var(--el-panel-bg); box-shadow: var(--el-frame); color: #dccab2; font-size: 14px; line-height: 1.3;
}
.wn-jump a:hover { color: var(--gold-hi); }
.wn-jump time { font: 12px/1 var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a5a; }

/* The patch-note card (the same card as the launcher's news and the Discord post; docs/guides/site.md, What's new):
   the release's picture filled to the card, a dark-red fade at the bottom, the gold date pill, the serif title,
   a two-line summary and "See more" down to the full notes. */
@font-face { font-family: 'Crimson Pro'; src: url('../fonts/crimson-pro-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-regular.ttf') format('truetype'); font-display: swap; }
.wn-old-anchor { display: block; height: 0; scroll-margin-top: 90px; }
.wn-rel {
  margin: 34px 0 0; background: var(--el-panel-bg); overflow: hidden;
  box-shadow: var(--el-frame), 0 18px 50px rgba(0, 0, 0, 0.6); scroll-margin-top: 90px;
}
.wn-rel.latest { box-shadow: var(--el-frame), 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 60, 10, 0.14); }
.wn-card {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  width: 100%; max-width: 100%; aspect-ratio: 5 / 2; min-height: 250px; background: #120808;
}
.wn-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.wn-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 8, 8, 0) 20%, rgba(18, 8, 8, 0.88) 100%); }
.wn-card-text { width: 100%; min-width: 0; padding: 22px 28px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; }
.wn-card-text > :not(.wn-more) { grid-column: 1 / -1; }
.wn-pill { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.wn-pill time {
  font: 11px/1 'DM Mono', ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1A1010; background: #D4AF37; padding: 5px 9px 4px; border-radius: 3px;
}
.wn-badge {
  font: 11px/1 var(--title); letter-spacing: 0.14em; color: var(--gold-hi); padding: 5px 8px 4px;
  background: radial-gradient(circle at 50% 40%, #7a1a0a, #2a0705 80%); box-shadow: 0 0 0 1px #8a5a24, 0 0 10px rgba(255, 70, 10, 0.45);
}
.wn-pill .wn-badge { order: 2; }
.wn-rel h2 {
  font: 600 clamp(24px, 3vw, 30px)/1.15 'Crimson Pro', 'Palatino Linotype', Palatino, Georgia, serif;
  color: #F4EAD8; margin: 0 0 6px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.wn-sum { grid-column: 1 / 2 !important; margin: 0; color: #D9CBBB; font-size: 16px; line-height: 1.45; max-width: 68ch; }
.wn-more { grid-column: 2; align-self: end; font-size: 13px; color: #D4AF37; white-space: nowrap; text-decoration: none; }
.wn-more:hover, .wn-more:focus-visible { color: #F0CF6A; }
.wn-notes { padding: 6px 28px 22px; scroll-margin-top: 90px; }

.wn-sec h3 { margin: 18px 0 8px; font: 15px/1 var(--title); letter-spacing: 0.18em; text-transform: uppercase; }
.wn-sec h3 span { display: inline-block; padding: 6px 10px 5px; box-shadow: inset 0 0 0 1px currentColor; }
.wn-new h3 { color: #ffcf6a; }
.wn-changed h3 { color: #ff9a5a; }
.wn-fixed h3 { color: #b8d48a; }
.wn-sec ul, .wn-soon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wn-sec li, .wn-soon li { position: relative; padding-left: 20px; color: #d6c3aa; font-size: 16px; }
.wn-sec li::before, .wn-soon li::before { content: ''; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; transform: rotate(45deg); background: #a5452a; box-shadow: 0 0 6px rgba(255, 80, 20, 0.6); }
.wn-sec li b, .wn-soon li b { color: var(--gold-hi); font-weight: normal; font-family: var(--title); letter-spacing: 0.03em; margin-right: 4px; }

.wn-soon { margin: 34px 0 0; padding: 18px 28px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px #3a2418; }
.wn-soon h2 { font: 18px/1.2 var(--title); letter-spacing: 0.1em; color: #ffb27a; margin: 0 0 10px; }
.wn-back { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 40px 0 0; }

@media (max-width: 760px) {
  .wn { padding: 40px 16px 80px; }
  .wn-jump { flex-direction: column; align-items: stretch; }
  .wn-card { min-height: 230px; }
  .wn-card-text { padding: 18px 16px 14px; grid-template-columns: minmax(0, 1fr); }
  .wn-sum { grid-column: 1 / -1 !important; }
  .wn-more { grid-column: 1 / -1; justify-self: end; margin-top: 6px; }
  .wn-notes { padding: 4px 16px 18px; }
  .wn-soon { padding: 16px; }
  .wn-sec li, .wn-soon li { font-size: 15px; }
}