/* Vinnie only: text, supporting content, then a larger section break. */
#main .ncs--vinnie {
  --v-text-gap: 24px;
  --v-content-gap: 48px;
  --v-section-gap: 128px;
}
#main .ncs--vinnie > section {
  margin-block: var(--v-section-gap) 0;
  padding-block: 0;
}
/* Empty chapter anchors must not add a second section break. */
#main .ncs--vinnie > .ncs__divider { margin: 0; padding: 0; height: 0; }
#main .ncs--vinnie > .ncs__divider + section { margin-top: var(--v-section-gap); }
#main .ncs--vinnie :is(.ncs__h2, .ncs__next-title, .ncs__st-title, .ncs__closing-text h3) {
  margin-block: 0 var(--v-text-gap);
}
#main .ncs--vinnie :is(.ncs__lead, .ncs__bleed-lead, .ncs__closing-text > p) {
  margin-block: 0;
}
#main .ncs--vinnie :is(.ncs__video, .ncs__jtbd-flow, ol.ncs__journey, .ncs__wireframe, .ncs__gsearch, .ncs__kw-photos, .ncs__ministats, .ncs__statchart, .teamviz, .ncs__next-grid) {
  margin-block: var(--v-content-gap) 0;
}
/* Related visuals authored as sibling sections still belong to their intro. */
#main .ncs--vinnie > :is(.ncs__marquee, .ncs__itr, .ncs__final, .ncs__scrolly),
#main .ncs--vinnie > .ncs__marquee + section {
  margin-top: var(--v-content-gap);
}
#main .ncs--vinnie .ncs__row--solution { gap: var(--v-section-gap); }
#main .ncs--vinnie .ncs__col--pair { gap: var(--v-section-gap); }
#main .ncs--vinnie .ncs__closing { gap: var(--v-content-gap); }
#main .ncs--vinnie .ncs__next { padding-bottom: var(--v-section-gap); }
#main .ncs--vinnie .ncs__st-body { margin-block: 0; }
#main .ncs--vinnie .ncs__st-how { margin-block: var(--v-text-gap) 0; }
@media (max-width: 760px) {
  #main .ncs--vinnie {
    --v-text-gap: 16px;
    --v-content-gap: 32px;
    --v-section-gap: 88px;
  }
}

/* A light reflection over each card retains its underlying project color. */
#main .ncs--vinnie :is(.ncs__vbubble, .ncs__vstat-line, .ncs__jstep, .ncs__jtbd-node, .ncs__itr-card, .ncs__kw-photo, .ncs__next-item .wk-card__hit) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 42%, rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.10), 0 12px 28px -20px rgba(58,36,32,.26);
}
#main .ncs.ncs--vinnie .ncs__vstat-line b { color: #A84532; }
[data-theme=dark] #main .ncs.ncs--vinnie :is(.ncs__vstat-line b, .ncs__vbubble blockquote em) { color: #e8aa98; }
[data-theme=dark] #main .ncs--vinnie .ncs__vbubble { background-color: var(--nblue-soft); color: var(--nink); }
[data-theme=dark] #main .ncs--vinnie .ncs__vbubble::after { background: var(--nblue-soft); }
[data-theme=dark] #main .ncs.ncs--vinnie .ncs__vbubble figcaption { color: var(--nbody); }
[data-theme=dark] #main .ncs--vinnie :is(.ncs__vbubble, .ncs__vstat-line, .ncs__jstep, .ncs__jtbd-node, .ncs__itr-card, .ncs__kw-photo, .ncs__next-item .wk-card__hit) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.12), transparent 45%, rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 12px 28px -20px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: no-preference) {
  #main .ncs--vinnie.ncs-armed .ncs-reveal { transition-duration: .55s; }
  #main .ncs--vinnie.ncs-armed .ncs-reveal[data-rev]:not(.in) { transform: translateY(24px); }
  #main .ncs--vinnie.ncs-armed .stagger > * { transition-duration: .5s; }
}