/* In the news (2026-10-22): real, sourced incidents where the cloud, a trusted app or a blinded security tool was the
   problem. Each card shows the headline and two plain lines; opening it shows what happened, why it matters and the sources. */
.nw-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.nw-filters button { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; color: rgba(237,237,232,.7);
  background: none; border: 1px solid rgba(237,237,232,.2); transition: border-color .2s, color .2s, background .2s; }
.nw-filters button:hover { color: #edede8; border-color: rgba(237,237,232,.5); }
.nw-filters button.on { background: #edede8; color: #070708; border-color: #edede8; }
.nw-list { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.nw { border-radius: 18px; border: 1px solid rgba(237,237,232,.11); background: linear-gradient(180deg, rgba(237,237,232,.045), rgba(237,237,232,.012));
  transition: border-color .25s; }
.nw:hover, .nw[open] { border-color: rgba(237,237,232,.26); }
.nw > summary { list-style: none; cursor: pointer; padding: 24px 28px 24px; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; }
.nw > summary::-webkit-details-marker { display: none; }
.nw .meta { grid-column: 1; display: flex; gap: 12px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: rgba(237,237,232,.45); }
.nw .meta em { font-style: normal; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(237,237,232,.22); color: rgba(237,237,232,.75); letter-spacing: .02em; font-family: var(--text); }
.nw .meta em.cloud { border-color: rgba(232,40,63,.5); color: #ff8a97; }
.nw h2 { grid-column: 1; margin: 6px 0 0; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; color: #edede8; }
.nw .brief { grid-column: 1; margin: 6px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(237,237,232,.66); }
.nw .more { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(237,237,232,.22); color: rgba(237,237,232,.8); font-size: 18px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.nw[open] .more { transform: rotate(45deg); }
.nw .body { padding: 0 28px 26px; max-width: 760px; }
.nw .body p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: rgba(237,237,232,.78); }
.nw .body .why { padding: 14px 16px; border-radius: 12px; background: rgba(237,237,232,.04); border-left: 2px solid #e8283f; color: rgba(237,237,232,.88); }
.nw .body .why b { font-weight: 500; }
.nw .src { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.nw .src a { color: rgba(237,237,232,.6); text-decoration: underline; text-underline-offset: 3px; }
.nw .src a:hover { color: #edede8; }
.nw-note { margin-top: 40px; max-width: 40em; font-size: 13.5px; line-height: 1.6; color: rgba(237,237,232,.42); }
@media (max-width: 760px) { .nw > summary { padding: 20px; } .nw .body { padding: 0 20px 22px; } }