/* "Up next" fan-out at the bottom of the gallery hub pages
   (chats, reports, feedback, testimonials) and below the /survey,
   /research/experimental-data, and /research content. Each page hand-picks
   three destinations suited to who is plausibly reading it — see the .np
   markup in the legacy/*.html files and the src pages. Idiom follows the
   homepage deck: mono eyebrow, quiet cards, purple accent. Colors come from
   the site's theme tokens, so the band follows the toggle without a second
   .light-mode block restating every rule.

   Sizing is rem so the band rides each page's fluid root (the dense tier on
   the legacy hubs, site.css's root on templated pages). The band spans its
   parent container — the hubs' .container or the templated .page-container —
   so its edges line up with the content above it. /research is the one page
   that places it outside any container (after the full-bleed evidence deck):
   there the markup adds .np-standalone, which restates the deck's own
   content column (.dw-inner in deck-wireframe.css, 1230px). */

.np {
  /* The card takes the wireframe's own hand: a ruled edge and a hard offset
     cast, on paper, the way the deck's fork cards and the walkthroughs'
     plates do. The three values are the walkthroughs' (walkthrough.css),
     borrowed here rather than imported, so a page can carry this band
     without loading a walkthrough sheet — the same arrangement
     deck-wireframe.css makes with the same numbers. */
  --np-ink: #55555f;
  --np-paper: #fffefb;
  --np-cast: rgba(60, 50, 40, 0.16);

  margin: 4.5rem 0 2.5rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--rule);
  font-family: Roboto, -apple-system, sans-serif;
}
html.dark-mode .np {
  --np-ink: #a8a8b4;
  --np-paper: #15151e;
  --np-cast: rgba(226, 226, 255, 0.09);
}
.np-standalone {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* The band's heading, set as its eyebrow. It is an <h2> because it is one:
   on a page whose only other sub-headings are these cards' <h3>s, a <p> here
   left the document going h1 straight to h3. */
.np-eyebrow {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--link-color);
  margin: 0 0 0.5rem;
}
.np-note {
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1.375rem;
}
.np-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.np-card {
  display: flex;
  flex-direction: column;
  background: var(--np-paper);
  border: 1.5px solid var(--np-ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--np-cast);
  padding: 1.25rem 1.3rem 1.15rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Lifting a card deepens its cast rather than recolouring its edge: the
   card is a sheet on the page, so it moves off the page to meet the
   pointer. */
.np-card:hover,
.np-card:focus-visible {
  box-shadow: 5px 5px 0 var(--np-cast);
  transform: translate(-1px, -1px);
}
.np-card h3 {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 0.45rem;
}
.np-card p {
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1rem;
}
.np-go {
  margin-top: auto;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link-color);
}

@media (max-width: 760px) {
  .np-grid { grid-template-columns: 1fr; }
  .np { margin-top: 3.5rem; }
}

/* ---- the drawn edge ----
   js/next-paths.js replaces each card's border with generated strokes
   (js/hand-ink.js) and sets html.np-ink, which is what takes the CSS border
   off — so a page without the script, or a reader without JavaScript, keeps
   the ruled edge above and nothing here applies. The rules restate the ink
   block in walkthrough-rig.css against this band's own tokens; the two are
   deliberately separate, so a page carrying the band does not have to load a
   walkthrough sheet to get a drawn card. */
html.np-ink .np-card.hi-box {
  position: relative;
  border-color: transparent;
  /* The generated outline has square corners, and a rounded fill under it
     shows through where the strokes cross. */
  border-radius: 0;
}
.np .hi-ink {
  position: absolute;
  left: -7px;
  top: -7px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  z-index: 1;
}
.np .hi-ink path {
  stroke: var(--np-ink);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* The second pass over an edge is lighter, as a real second pass is. */
.np .hi-ink path.hi-p2 { stroke-width: 0.85; stroke-opacity: 0.5; }

/* pathLength="1" normalises every stroke, so one dash length covers any edge
   and a long line takes no longer to draw than a short one. */
@keyframes np-draw { to { stroke-dashoffset: 0; } }
html.np-ink .np .hi-ink path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.np-ink .np .hi-on > .hi-ink path {
  animation: np-draw 0.32s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
  /* The card's place in the row, then the edge's place in the card. */
  animation-delay: calc(var(--b, 0) * 0.055s + var(--i, 0) * 0.035s);
}
@media (prefers-reduced-motion: reduce) {
  html.np-ink .np .hi-ink path { stroke-dashoffset: 0; animation: none; }
}