/* News grid lab — /news/archive/'s working surface for the front page's
 * news section.
 *
 * Two parts:
 *  - CARDS: extracted VERBATIM from HUB_CSS in functions/lib/news-hub.js
 *    (the body token chain and the .nh-card story-card block) so cards
 *    render exactly as on /news/. Keep this block diffable against the
 *    source; the hub's html[data-theme="dark"] token override is not
 *    copied (the site is light-only, a new dark block is unreachable CSS).
 *  - LAYOUT (.nh-lab-*): the experiment — currently Andrii's seven-zone
 *    sketch (2026-08-11): two stacked heroes left, cards 3-4 top-right,
 *    5-6 bottom-left, and the firehose list down the right rail. This is
 *    the part to iterate on.
 */
body { --nh-page: var(--navy-light); --nh-card: var(--navy); --nh-track: var(--navy-lighter);
  --nh-accent: var(--eyebrow, var(--blue, #3E64E0)); /* theme-guardrail-allow: hub accent fallback chain, verbatim from HUB_CSS */
  background: var(--nh-page); color: var(--white); font-family: var(--font-sans, 'DM Sans', sans-serif); margin: 0; }
.nh-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.nh-eyebrow { color: var(--text-faint); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

/* ── Layout: the seven-zone sketch ──────────────────────────────────────────
   Left column (2fr): hero 1, hero 2, then the 5|6 pair. Right rail (1fr):
   cards 3, 4, then the firehose. The rail's flex-basis for the firehose is 0,
   so the rail never sets the row height — the grid row is as tall as the left
   column, and the firehose stretches to fill what remains of the rail and
   scrolls internally. Exactly the sketch: zone 7 runs from beside hero 2 down
   past the 5|6 pair. */
/* Zone heights: 3-6 share one card height; heroes 1-2 are exactly two of
   them plus the gap, so hero 1's bottom edge lines up with card 4's. */
.nh-lab-layout { --nh-zcard-h: 200px; --nh-hero-h: calc(2 * var(--nh-zcard-h) + 1rem);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.nh-lab-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nh-lab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nh-lab-tallpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nh-lab-rail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* Every zone card is full-bleed — the image covers the whole card, a
   bottom-up scrim keeps the text legible on any photo, and the copy sits on
   top in light type (soft shadow, no outline). Fixed colors throughout this
   block: the text paints over imagery, not over the page surface, so it
   must not follow the theme. Cards without an image keep their placeholder
   background and the same treatment. */
:is(.nh-lab-layout, .nh-stories--lab) .nh-story { position: relative; height: var(--nh-zcard-h); overflow: hidden; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-card-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0) 92%); } /* theme-guardrail-allow: scrim over imagery, theme-independent */
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-card-body { position: absolute; inset: 0; z-index: 1;
  padding: .75rem .95rem .85rem; gap: .35rem; justify-content: flex-end; }
/* Chips stack in the card's top-right corner — industry on top, geo under
   it, both right-aligned. Timestamps don't render on cards. No shared-markup
   changes — the body covers the card and the meta column pins to its top. */
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-meta { position: absolute; top: .75rem; right: .95rem; left: auto;
  flex-direction: column; align-items: flex-end; gap: .4rem; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-time { display: none; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-chip, :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-loc {
  background: rgba(0, 0, 0, 0.55); /* theme-guardrail-allow: chip fill over imagery, theme-independent */
  border: 1px solid rgba(255, 255, 255, 0.28); /* theme-guardrail-allow: chip edge over imagery, theme-independent */
  border-radius: 999px; padding: .26rem .6rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-title { color: #FFFFFF; font-size: 1.43rem; line-height: 1.22; /* theme-guardrail-allow: type over imagery, theme-independent */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); } /* theme-guardrail-allow: shadow over imagery, theme-independent */
:is(.nh-lab-layout, .nh-stories--lab) .nh-story:hover .nh-title { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } /* theme-guardrail-allow: stays white over the photo; hover reads as underline */
:is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-meta > * { color: rgba(255, 255, 255, 0.88); /* theme-guardrail-allow: meta over imagery, theme-independent */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /* theme-guardrail-allow: shadow over imagery, theme-independent */

/* Per-zone sizes, AFTER the shared block so they win the cascade (the tall
   cards once rendered at standard height for losing exactly this fight).
   Hero: full-bleed at double height, display type. Tall pair: hero height,
   rail width, headline type between the hero's and the standard cards'. */
:is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card { height: var(--nh-hero-h); min-height: 0; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card .nh-card-body { padding: 1.1rem 1.4rem 1.25rem; gap: .5rem; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card .nh-meta { top: 1.1rem; right: 1.4rem; }
:is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card .nh-title { font-size: clamp(2.25rem, 3.9vw, 3.1rem); line-height: 1.1; letter-spacing: -0.015em; }
.nh-lab-layout .nh-lab-tallpair > .nh-story, .nh-stories--lab .nh-story.nh-slot-tall { height: var(--nh-hero-h); }
:is(.nh-lab-layout .nh-lab-tallpair > .nh-story, .nh-stories--lab .nh-story.nh-slot-tall) .nh-title { font-size: 1.95rem; line-height: 1.15; }

/* Zone 7 — the firehose. A card-surfaced column that fills the rail's
   leftover height and scrolls; every row is one headline. */
.nh-lab-fire { flex: 1 1 0; min-height: 16rem; display: flex; flex-direction: column;
  border: 1px solid var(--border-light); border-radius: 16px;
  background: var(--nh-card, var(--navy)); box-shadow: var(--shadow-sm); overflow: hidden; }
.nh-fire-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0;
  overscroll-behavior: contain; }
.nh-fire-row { border-top: 1px solid var(--border-light); }
.nh-fire-row:first-child { border-top: 0; }
.nh-fire-row a { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .65rem 1rem .6rem; text-decoration: none; color: inherit; }
.nh-fire-title { min-width: 0; }
.nh-fire-row a:hover { background: rgba(127, 127, 127, 0.07); } /* theme-guardrail-allow: neutral hover tint, both themes */
.nh-fire-title { font-size: 1.05rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.nh-fire-row a:hover .nh-fire-title { color: var(--blue); }
.nh-fire-time { font-family: var(--font-mono, ui-monospace, monospace); font-size: .72rem; color: var(--text-faint);
  white-space: nowrap; }

/* Tablet: one column — main stack, then the rail; the firehose gets a fixed
   window instead of rail-filling (there is no rail height to fill). */
@media (max-width: 1020px) {
  .nh-lab-layout { grid-template-columns: 1fr; }
  .nh-lab-fire { flex: 0 0 auto; max-height: 30rem; }
}
/* Phones: the double height is a desktop relationship — full-width cards
   shrink toward the standard height so they don't hog the scroll. */
@media (max-width: 860px) {
  :is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card { height: calc(1.5 * var(--nh-zcard-h)); }
}
@media (max-width: 560px) {
  .nh-lab-pair, .nh-lab-tallpair { grid-template-columns: 1fr; }
  .nh-lab-layout .nh-lab-tallpair > .nh-story, .nh-stories--lab .nh-story.nh-slot-tall { height: calc(1.4 * var(--nh-zcard-h)); }
}

.nh-card { background: var(--nh-card, var(--navy)); border: 1px solid var(--border-light); border-radius: 16px;
  box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: var(--white); display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease; }
.nh-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* X-promoted story cards are <div>s (the via-X credit is a real link, and
   nested <a>s get split by the parser) — the title link stretches over
   the card and the credit sits above the overlay. */
.nh-story { position: relative; cursor: pointer; }
.nh-story .nh-story-link { color: inherit; text-decoration: none; }
.nh-story .nh-story-link::after { content: ""; position: absolute; inset: 0; }
.nh-x-story .nh-x-via { position: relative; z-index: 1; }
.nh-card-img { width: 100%; aspect-ratio: 3 / 1.55; object-fit: cover; background: var(--navy-lighter); display: block; }
/* The lead story reads like a front page: words first, image beside them.
   Order in the markup stays image-first, so the stacked mobile layout is
   untouched — desktop just flips direction. */
.nh-hero-card { flex-direction: row-reverse; align-items: stretch; }
.nh-hero-card .nh-card-img { width: 46%; aspect-ratio: auto; min-height: var(--nh-hero-h); }
.nh-hero-card .nh-card-body { flex: 1; padding: 1.7rem 1.8rem; justify-content: center; gap: .7rem; }
@media (max-width: 860px) {
  .nh-hero-card { flex-direction: column; }
  .nh-hero-card .nh-card-img { width: 100%; aspect-ratio: 3 / 1.6; min-height: 0; }
  .nh-hero-card .nh-card-body { padding: 1.1rem 1.15rem 1.2rem; }
}
.nh-card-body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.nh-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
/* Category labels are quiet type, not coloured pills. At ~30 cards a page
   the old bordered blue/teal chips were the loudest thing on screen and
   said the least — the headline already tells you it is a raise. */
.nh-chip { font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); }
.nh-chip--fundraise, .nh-chip--acquisition, .nh-chip--launch, .nh-chip--news { color: var(--text-faint); }
.nh-time { font-family: var(--font-mono, ui-monospace, monospace); font-size: .68rem; color: var(--text-faint); }
.nh-src { font-size: .68rem; color: var(--text-faint); }
/* The attribution link out to the original post. It had NO style of its
   own — the only rule naming .nh-x-via gave it a stacking context — so it
   fell all the way through to the browser's defaults: 16px, link-blue, (theme-guardrail-allow: prose)
   underlined, next to siblings set at .68rem. Blue is right here (it is
   the one thing in the row you can click), it just has to be the page's
   blue at the row's size. */
.nh-x-via { font-size: .68rem; font-weight: 700; color: var(--nh-accent); text-decoration: none;
  white-space: nowrap; }
.nh-x-via:hover { text-decoration: underline; }
.nh-loc { display: inline-flex; align-items: center; gap: .22rem; font-size: .7rem; font-weight: 600;
  color: var(--text-lighter); white-space: nowrap; }
.nh-loc svg { flex-shrink: 0; opacity: .8; }
.nh-hero-card .nh-title { font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.14; letter-spacing: -0.015em; }
.nh-title { font-family: var(--font-display, 'Source Sans 3', sans-serif); font-weight: 700; font-size: 1.05rem;
  line-height: 1.28; letter-spacing: -0.01em; margin: 3px; transition: color .14s ease; }
.nh-card:hover .nh-title { color: var(--blue); }
/* The hub's lead card fills its empty half with the story's opening line
   (.nh-dek in HUB_CSS). renderStoryCard ships the paragraph on every card, so
   this grid gets it too — and here there is nowhere to put it: the zones are
   fixed-height overlay cards and the lead already carries a 3.1rem headline.
   Hidden, not removed: the markup has one renderer, and this file is where the
   lab disagrees with it. */
.nh-dek { display: none; }

/* ── Hub arrangement (MAR-23): the sketch's slots 1,2,3,6,7 on /news/ ───────
   The lab graduates: the front page's story block is the main column of the
   seven-zone sketch — hero, tall pair, standard pair — as a FLAT grid, not
   the lab's nested containers, because the hub's filter script re-appends
   matching cards into one container and reads position from DOM order (the
   picker assigns .nh-slot-tall to visible cards 2 and 3). Slots 4, 5 and the
   firehose stay on /news/archive; the hub has its own rail. */
.nh-stories--lab { --nh-zcard-h: 200px; --nh-hero-h: calc(2 * var(--nh-zcard-h) + 1rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nh-stories--lab .nh-story { height: var(--nh-zcard-h); }
.nh-stories--lab .nh-story.nh-hero-card { grid-column: 1 / -1; height: var(--nh-hero-h); }
.nh-stories--lab .nh-nomatch, .nh-stories--lab .nh-fill-note { grid-column: 1 / -1; }
/* The fold's "Also" rows and the hero's "More" list have nowhere to sit on a
   fixed-height overlay card (same reasoning as .nh-dek above) — the fold
   still dedupes companies; only the rider rows don't render here. */
.nh-stories--lab .nh-also, .nh-stories--lab .nh-more { display: none; }
/* Tablet and down: one column, matching the lab's collapse. */
@media (max-width: 1020px) {
  .nh-stories--lab { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nh-stories--lab .nh-story.nh-hero-card { height: calc(1.5 * var(--nh-zcard-h)); }
}

/* The archive tile (MAR-25): the grid's last cell is a door, not a story —
   card chrome without an image, label at the top, no scrim treatment (it is
   not under :is(...) .nh-story on purpose, so the filter script skips it). */
.nh-stories--lab .nh-archive-tile { height: var(--nh-zcard-h); display: flex; align-items: flex-start;
  gap: .4rem; padding: 1rem 1.2rem; text-decoration: none; color: var(--white);
  font-family: var(--font-display, 'Source Sans 3', sans-serif); font-weight: 700;
  font-size: 1.43rem; line-height: 1.22; letter-spacing: -0.01em; }
.nh-stories--lab .nh-archive-tile:hover { color: var(--blue); }
.nh-archive-arrow { transition: transform .16s ease; }
.nh-stories--lab .nh-archive-tile:hover .nh-archive-arrow { transform: translateX(3px); }