/* Text emphasis is finite and restrained; readable text remains real HTML. */
html body .page-head > p {
  color: #d1e7de !important; font-weight: 400; padding-left: 12px;
  border-left: 2px solid #90cfb880; text-shadow: 0 1px 2px #001c1940;
}
.page-head .page-notes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
html body .page-head .page-notes li { display: inline-flex; align-items: baseline; gap: 7px; color: #c8e4df; font-size: .8rem; line-height: 1.6; background: none; border: 0; padding: 0; box-shadow: none; text-shadow: 0 1px 4px #001b18; }
.page-notes li::before { content: '◆'; font-size: .5rem; color: #83dfce; align-self: center; text-shadow: 0 0 9px #65d5b899; }
.page-notes strong { color: #ffe2a3; font-weight: 700; text-shadow: 0 0 10px #cf9d3145; }
/* A definite media box prevents the grid item's intrinsic height from clipping. */
html body .boss-gif { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 540px; min-height: 220px; background: radial-gradient(ellipse at 50% 70%, #4be1bb1f, #052622aa 65%); }
html body .boss-gif img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-height: none; padding: 12px; object-fit: contain !important; object-position: center; }
/* Illustration stays separate from copy so a narrow card remains legible. */
.sidebar .ml-promo { padding: 0; background: #062b27; background-image: none; }
.ml-promo-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; }
.ml-promo-copy { position: absolute; inset: auto 0 0; padding: 14px; background: linear-gradient(180deg, #062b2700, #062b27e6 30%, #05241df5); }
.ml-promo-copy b { color: #ffebbc; text-shadow: 0 0 12px #d6ae4344; }
.ml-promo-copy p { color: #daeee4; text-shadow: 0 1px 3px #00140c; }
@media (max-width: 600px) {
  .page-head .page-notes { gap: 7px 14px; }
  html body .page-head .page-notes li { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { html body .page-head > p { animation: none; } }