/* The /news page: a single column of posts, on top of org.css */
.news-tools { align-items: center; }
.news-tools #search { width: min(100%, 22rem); padding: 7px 10px; }
.filters .n { opacity: .7; margin-left: 4px; }
.news { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; max-width: 52rem; }
.post { padding: 14px 18px 14px 16px; background: linear-gradient(180deg, #17111f, #100c16); border-left: 3px solid var(--hud-line); }
.post.new { border-left-color: var(--cyan); }
.post .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 6px;
  font: 500 .64rem/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post .kind { color: var(--cyan); }
.post time { margin-left: auto; }
.post .flag { color: #0b0710; background: var(--cyan); padding: 2px 6px; font-weight: 600; }
.post h3 { margin: 0; font: 400 1.05rem/1.35 var(--sc-font); letter-spacing: .02em; }
.post h3 a { color: var(--text); text-decoration: none; }
.post h3 a:hover { color: var(--cyan); text-decoration: underline; }
.post .ex { margin: 6px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.post .by { margin: 6px 0 0; font: 500 .7rem/1 var(--hud); letter-spacing: .1em; color: var(--thruster); }
.note.small a { color: var(--cyan); }
@media (max-width: 560px) { .post time { margin-left: 0; } }

/* Page background: the data screens picture, fixed on top of the page's nebula (body.nebula-page) and faded into it on the left, where the posts sit, and at the bottom */
.news-page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,9,16,.55) 0, rgba(11,9,16,.3) 100%), url(/org/brand/news-bg.webp) 60% 30% / cover no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent 15%, #000 60%), linear-gradient(0deg, transparent 5%, #000 50%);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 15%, #000 60%), linear-gradient(0deg, transparent 5%, #000 50%);
  mask-composite: intersect; }
.news-page .post { background: linear-gradient(180deg, rgba(23,17,31,.9), rgba(16,12,22,.92)); backdrop-filter: blur(6px); }
@media (max-width: 700px) {
  .news-page::after { background: linear-gradient(0deg, rgba(11,9,16,.8) 0, rgba(11,9,16,.65) 100%), url(/org/brand/news-bg-1000.webp) center top / 100% auto no-repeat;
    -webkit-mask: linear-gradient(180deg, #000 25%, transparent 65%); mask: linear-gradient(180deg, #000 25%, transparent 65%); }
}