/* /news/ Feed view (MAR-408) — one column of posts, built by js/news-feed.js
   from the grid the page already rendered. html.nh-feedview is set before
   first paint (news-hub.js head script), so these rules decide which view
   paints first. Colours are tokens only; the hub's own --nh-card/--nh-page/
   --nh-track come from HUB_CSS. */

/* The switch: two icon buttons at the right end of the filter bar. */
.nh-viewswitch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; flex: 0 0 auto;
  background: var(--nh-track); border: 1px solid var(--border-light); margin-left: auto; }
.nh-viewbtn { display: inline-grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--text-cool); cursor: pointer; }
.nh-viewbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nh-viewbtn:hover { color: var(--white); }
.nh-viewbtn:focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 2px; }
html:not(.nh-feedview) .nh-viewbtn[data-nh-view="grid"],
html.nh-feedview .nh-viewbtn[data-nh-view="feed"] { background: var(--nh-card); color: var(--white); box-shadow: var(--shadow-sm); }

/* Which view paints. */
#nhFeed { display: none; }
html.nh-feedview #nhFeed { display: block; }
html.nh-feedview .nh-wrap > .nh-section,
html.nh-feedview .nh-wrap > .nh-archive-foot { display: none; }

.nf { padding-bottom: 3rem; }
.nf-cols { display: grid; grid-template-columns: minmax(0, 620px); justify-content: center; gap: 1.5rem; }
.nf-main { min-width: 0; }
.nf-list { display: flex; flex-direction: column; gap: 1rem; }
.nf-post { position: relative; background: var(--nh-card); border: 1px solid var(--border-light); border-radius: 12px;
  box-shadow: var(--shadow-sm); padding-bottom: 1rem; overflow: hidden; font-family: var(--font-sans); }

/* Post header: a kind tile, who/what, and when. */
.nf-head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem .65rem; }
.nf-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--eyebrow); background: var(--mint-soft); }
.nf-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nf-ico--watch svg { fill: currentColor; stroke: none; }
.nf-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nf-who b { font: 700 .86rem/1.3 var(--font-sans); color: var(--white); }
.nf-who > span { font-size: .76rem; line-height: 1.35; color: var(--text-cool); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-more { flex: none; font: 600 .78rem var(--font-sans); color: var(--blue); text-decoration: none; }
.nf-more::after { content: " →"; }
.nf-more:hover, .nf-more:focus-visible { text-decoration: underline; }
.nf-via { position: absolute; top: 1.1rem; right: 1rem; font: 600 .74rem var(--font-sans); color: var(--text-cool); text-decoration: none; }
.nf-via:hover { color: var(--blue); }

/* Story posts: headline, opening line, picture. */
.nf-title { margin: 0; padding: 0 1rem; font: 700 1.2rem/1.3 var(--font-display); color: var(--white); letter-spacing: -.005em; }
.nf-title a { color: inherit; text-decoration: none; }
.nf-title a:hover, .nf-title a:focus-visible { color: var(--blue); }
.nf-dek { margin: .45rem 0 0; padding: 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--text-light);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-media { display: block; position: relative; margin-top: .85rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nh-page); }
.nf-media:last-child { margin-bottom: -1rem; }
.nf-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-media > .nh-card-img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.nf-media > .nh-analysis-preview iframe { border: 0; }
.nf-related { display: flex; flex-direction: column; margin: .85rem 1rem 0; border-top: 1px solid var(--border-light); }
.nf-related a { display: flex; gap: .55rem; align-items: baseline; padding: .55rem 0 0; font-size: .84rem; line-height: 1.4;
  color: var(--white); text-decoration: none; }
.nf-related a span { flex: none; font-size: .72rem; font-weight: 600; color: var(--text-cool); }
.nf-related a:hover { color: var(--blue); }

/* Compact story posts (MAR-423): picture left, words right. Big stories keep
   the full post above. */
.nf-story--compact { padding-bottom: 0; }
.nf-compact { display: flex; align-items: flex-start; gap: .95rem; padding: .9rem 1rem; }
.nf-thumb { position: relative; display: block; flex: 0 0 200px; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--nh-page); }
.nf-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-thumb > .nh-card-img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
.nf-compact-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1 1 auto; }
.nf-kicker { margin: 0; font-size: .76rem; line-height: 1.35; color: var(--text-cool); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-kicker a { color: inherit; text-decoration: none; }
.nf-kicker a:hover { color: var(--blue); }
.nf-story--compact .nf-title { padding: 0; font-size: 1.05rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-story--compact .nf-dek { margin: 0; padding: 0; font-size: .86rem; line-height: 1.45; -webkit-line-clamp: 2; }
.nf-report .nf-thumb > img { object-position: left top; }

/* Alerts: one company or person, one line of news. */
.nf-abody { display: flex; align-items: center; gap: .85rem; padding: 0 1rem; color: inherit; text-decoration: none; }
.nf-atext { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.nf-amain { font: 700 1.05rem/1.3 var(--font-display); color: var(--white); }
.nf-abody:hover .nf-amain { color: var(--blue); }
.nf-amt { font-family: var(--font-mono); font-weight: 700; color: var(--teal); }
.nf-flag { margin-right: .35rem; }
.nf-adetail { font-size: .84rem; line-height: 1.4; color: var(--text-cool); }
.nf-atag { margin-top: .3rem; font-size: .88rem; line-height: 1.45; color: var(--text-light); }
.nf-logo { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  background: var(--logo-tile-bg); border: 1px solid var(--logo-tile-border); font: 700 1rem var(--font-sans); color: var(--text-cool); }
.nf-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--logo-tile-bg); }
.nf-logo--face { border-radius: 50%; }
.nf-logo--face img { object-fit: cover; }
.nf-tologo { flex: none; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: var(--logo-tile-bg); border: 1px solid var(--logo-tile-border); }
.nf-tologo img { width: 100%; height: 100%; object-fit: contain; }
.nf-founders { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .8rem; color: var(--text-cool); }
.nf-face { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-light); }
.nf-face + span { margin-left: .2rem; }
.nf-unlock { display: none; }
/* Visitors: a Just founded name stays blurred, as in the grid's river. */
.nh-gated .nf-founded .nf-lockable { filter: blur(5px); user-select: none; }
.nh-gated .nf-founded .nf-unlock { display: block; margin-top: .3rem; font: 600 .8rem var(--font-sans); color: var(--blue); }

/* List posts: being talked about, events. */
.nf-rows { display: flex; flex-direction: column; padding: 0 1rem; }
.nf-row { display: flex; flex-direction: column; gap: .15rem; padding: .6rem 0; border-top: 1px solid var(--border-light);
  color: inherit; text-decoration: none; }
.nf-row:first-child { border-top: 0; padding-top: .1rem; }
.nf-row-t { font-weight: 600; font-size: .92rem; line-height: 1.4; color: var(--white); }
.nf-row:hover .nf-row-t { color: var(--blue); }
.nf-row-m { font-size: .76rem; color: var(--text-cool); }
.nf-talk .nf-row { position: relative; }
.nf-talk .nf-row:has(.nf-play) { padding-left: 1.6rem; }
.nf-play { position: absolute; left: 0; top: .75rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: var(--text-on-inverse); }
.nf-row:first-child .nf-play { top: .25rem; }
.nf-play svg { width: .6rem; height: .6rem; fill: currentColor; }
.nf-event { flex-direction: row; align-items: center; gap: .8rem; }
.nf-date { flex: none; min-width: 4.6rem; font: 700 .72rem var(--font-mono); letter-spacing: .03em; color: var(--eyebrow); }
.nf-row-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* Carousels: analyses and videos, swiped sideways. */
.nf-carousel { padding-bottom: 1.1rem; }
.nf-rail { position: relative; }
.nf-track { display: flex; gap: .75rem; overflow-x: auto; padding: .1rem 1rem .2rem; scroll-snap-type: x mandatory;
  scroll-padding: 0 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nf-track::-webkit-scrollbar { display: none; }
.nf-track > * { scroll-snap-align: start; }
.nf-track > .nh-res-card { flex: 0 0 236px; min-width: 0; }
.nf-track > .nh-watch-card { flex: 0 0 200px; height: 340px; }
.nf-lock { flex: 0 0 236px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center;
  border: 1px dashed var(--border-mid); border-radius: 10px; padding: 1rem; }
.nf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--border-light); background: var(--nh-card); color: var(--white); box-shadow: var(--shadow-md); cursor: pointer; }
.nf-arrow[hidden] { display: none; }
.nf-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nf-arrow--prev { left: .4rem; }
.nf-arrow--next { right: .4rem; }
.nf-arrow:hover { color: var(--blue); }

/* The live sector chart, moved in from the grid's rail while the feed shows. */
.nf-live { padding: 0; }
.nf-live > .dr-pulse { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

.nf-end { margin: 1.6rem 0 0; text-align: center; font-size: .86rem; color: var(--text-cool); }
.nf-end a { color: var(--blue); font-weight: 600; text-decoration: none; }
.nf-end a:hover { text-decoration: underline; }
.nf-clear { margin-left: .3rem; border: 0; background: none; padding: 0; font: 600 .86rem var(--font-sans); color: var(--blue); cursor: pointer; }
.nf-clear:hover { text-decoration: underline; }

/* Side rails, wide screens only. Each column opens with compact top cards
   (MAR-411) that scroll away with the page; the knowledge graph for the post
   in view (MAR-409) then shows. Its track spans that post (placeRails in
   news-feed.js, MAR-449), so the cards start level with the post's top and
   stick under the site nav while it scrolls, scrolling on their own when
   they run longer than the screen. */
.nf-side { display: none; }
@media (min-width: 1240px) {
  /* The side columns take whatever the page has left beside the 620px feed. */
  .nf-cols { grid-template-columns: minmax(200px, 1fr) minmax(0, 620px) minmax(200px, 1fr); }
  .nf-side { display: block; min-width: 0; position: relative; }
  .nf-kgp { position: absolute; top: 0; left: 0; right: 0; transition: opacity .25s ease, visibility 0s; }
  .nf-kgp-in { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
  .nf-kgp-in::-webkit-scrollbar { display: none; }
  .nf-side.is-top > .nf-kgp { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s .15s; }
  /* The post the side columns describe: a blue frame, echoed by a bar on the
     column's own title line, so it is clear which story the context is for. */
  .nf-post { transition: border-color .2s ease, box-shadow .2s ease; }
  .nf-cols.nf-kg-on .nf-post.is-active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-md); }
  .nf-kgp .nf-rail-about { padding-left: .6rem; border-left: 3px solid var(--blue); color: var(--white); }
  html.nh-feedview .nh-recent-strip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nf-kgp, .nf-side.is-top > .nf-kgp { transition: none; } }
.nf-rail-sec { background: var(--nh-card); border: 1px solid var(--border-light); border-radius: 12px; padding: .85rem .9rem; margin-bottom: .8rem; }
.nf-prem { background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: 12px; padding: .85rem .9rem; margin-bottom: .8rem;
  display: flex; flex-direction: column; gap: .65rem; }
.nf-prem-h { margin: 0; font: 700 1rem/1.25 var(--font-display); color: var(--text-on-inverse); text-wrap: balance; }
.nf-prem-btn { display: block; padding: .5rem .8rem; border-radius: 8px; background: var(--blue); color: var(--text-on-inverse); text-align: center;
  font: 600 .86rem var(--font-sans); text-decoration: none; }
.nf-prem-btn:hover { background: var(--blue-hover); }
.nf-rail-h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font: 700 .7rem var(--font-sans); letter-spacing: .07em;
  text-transform: uppercase; color: var(--eyebrow); }
.nf-rail-more { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-cool); text-decoration: none; }
.nf-rail-more:hover { color: var(--blue); }
.nf-kg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.nf-rail-about { margin: 0 0 .7rem; font-size: .8rem; line-height: 1.4; color: var(--text-cool);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-rail-note { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-cool); }
.nf-ents { display: flex; flex-direction: column; gap: .15rem; }
.nf-ent { display: flex; align-items: center; gap: .6rem; padding: .35rem .3rem; margin: 0 -.3rem; border-radius: 8px; color: inherit; text-decoration: none; }
a.nf-ent:hover { background: var(--nh-page); }
a.nf-ent:hover .nf-ent-name { color: var(--blue); }
.nf-ent-logo { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  background: var(--logo-tile-bg); border: 1px solid var(--logo-tile-border); font: 700 .8rem var(--font-sans); color: var(--text-cool); }
.nf-ent-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--logo-tile-bg); }
.nf-ent-logo--face { border-radius: 50%; }
.nf-ent-logo--face img { object-fit: cover; }
.nf-ent-txt { display: flex; flex-direction: column; min-width: 0; }
.nf-ent-name { font-weight: 600; font-size: .86rem; line-height: 1.3; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-ent-sub { font-size: .74rem; line-height: 1.3; color: var(--text-cool); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-deeps { display: flex; flex-direction: column; gap: .8rem; }
.nf-deep { display: flex; flex-direction: column; gap: .4rem; color: inherit; text-decoration: none; }
.nf-deep-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--nh-page);
  border: 1px solid var(--border-light); }
.nf-deep-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Laid out at 3.4x the card and scaled down, as on the article page: a market
   map sizes its tree to the frame, so a card-width frame showed two giant tiles. */
.nf-deep-thumb iframe { width: 340%; height: 340%; border: 0; transform: scale(0.294); transform-origin: top left; pointer-events: none; }
.nf-deep-t { font-weight: 600; font-size: .84rem; line-height: 1.35; color: var(--white); }
.nf-deep:hover .nf-deep-t { color: var(--blue); }
.nf-rail-rows { display: flex; flex-direction: column; }
.nf-rail-row { display: flex; flex-direction: column; gap: .1rem; padding: .45rem 0; border-top: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.nf-rail-row:first-child { border-top: 0; padding-top: 0; }
.nf-rail-row-t { font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--white); }
.nf-rail-row:hover .nf-rail-row-t { color: var(--blue); }
.nf-rail-row-m { font-size: .72rem; color: var(--text-cool); }
.nf-rail-row-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nf-rail-row-body .nf-rail-row-t, .nf-rail-row-body .nf-rail-row-m { overflow: hidden; text-overflow: ellipsis; }
.nf-rail-row-body .nf-rail-row-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Top cards: next events and the latest founded, raised and hired. */
.nf-up, .nf-jh { flex-direction: row; align-items: center; gap: .6rem; }
.nf-up-date { flex: none; width: 3.4rem; font: 700 .66rem/1.25 var(--font-mono); letter-spacing: .02em; color: var(--eyebrow); }
.nf-ico--sm { width: 26px; height: 26px; border-radius: 7px; }
.nf-ico--sm svg { width: 14px; height: 14px; }
.nf-jh .nf-amt { font-size: .8rem; }
/* Just happened shows five rows of one height and moves up a row at a time
   (MAR-433). Each row carries its own top rule; the window starts 1px down so
   the top row's rule is cut off. */
.nf-jh-card { --nf-jh-row: 3.3rem; }
.nf-jh-box { height: calc(5 * var(--nf-jh-row) - 1px); overflow: hidden; }
.nf-jh-box > .nf-rail-rows { margin-top: -1px; }
.nf-jh-box .nf-rail-row, .nf-jh-box .nf-rail-row:first-child { height: var(--nf-jh-row); padding: 0; border-top: 1px solid var(--border-light); }
.nf-jh-box .nf-rail-row-t { -webkit-line-clamp: 1; }
.nf-jh-box .nf-rail-row-m { white-space: nowrap; }
.nf-jh-toggle { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--text-faint); cursor: pointer; }
.nf-jh-toggle:hover, .nf-jh-toggle:focus-visible { color: var(--blue); background: var(--nh-page); }
.nf-jh-toggle svg { width: 11px; height: 11px; }
.nf-jh-toggle .nf-jh-play, .nf-jh-toggle[aria-pressed="true"] .nf-jh-pause { display: none; }
.nf-jh-toggle[aria-pressed="true"] .nf-jh-play { display: block; }
.nf-dd .nf-rail-row-t { -webkit-line-clamp: 3; }
.nf-dd-ico { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.nh-gated .nf-jh--founded .nf-lockable { filter: blur(4px); user-select: none; }
.nh-gated .nf-jh--founded .nf-jh-place { display: none; }
.nh-gated .nf-jh--founded .nf-unlock { display: inline; font-weight: 600; color: var(--blue); }
.nf-skel { display: flex; flex-direction: column; gap: .5rem; }
.nf-skel i { display: block; height: .8rem; border-radius: 4px; background: var(--nh-track); }
.nf-skel i:nth-child(2) { width: 80%; }
.nf-skel i:nth-child(3) { width: 60%; }

/* Phones (the hub's two-row bar, max-width 700px): Filters and the switch
   share row one; the lens strip has row two. */
@media (max-width: 700px) {
  .nh-viewswitch { order: 2; }
}
@media (hover: none) { .nf-arrow { display: none; } }
@media (max-width: 640px) {
  .nf-thumb { flex-basis: 104px; aspect-ratio: 1; }
  .nf-story--compact .nf-title { font-size: .98rem; }
  .nf-story--compact .nf-dek { display: none; }
  .nf-list { gap: .7rem; }
  .nf-post { border-radius: 10px; }
  .nf-title { font-size: 1.1rem; }
  .nf-track > .nh-res-card, .nf-lock { flex-basis: 78%; }
  .nf-track > .nh-watch-card { flex-basis: 62%; }
}

/* New stories (MAR-449): a pill under the site nav that reloads the feed. */
.nf-fresh { position: fixed; top: 72px; left: 50%; z-index: 60; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--text-on-inverse);
  font: 600 .85rem/1.2 var(--font-sans); box-shadow: var(--shadow-md); cursor: pointer; animation: nf-fresh-in .25s ease-out; }
.nf-fresh[hidden] { display: none; }
.nf-fresh:hover { background: var(--blue-hover); }
.nf-fresh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes nf-fresh-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .nf-fresh { animation: none; } }