.np-head .ct-tags { justify-content: center; }

/* The synth fits its patch to whatever frame it gets, so the frame takes the
   page's width and is capped so that, under the nav and the title, it ends
   inside the first screen. */
.np-stage {
  max-width: 1400px; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.np-frame {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; max-height: calc(100svh - 19.5rem); min-height: 24rem;
  border: 0; border-radius: 6px; background: #050505;
  box-shadow: 0 1px 2px rgba(42, 36, 27, .16), 0 10px 26px rgba(42, 36, 27, .13);
}

/* How the instrument works as a whole, between the synth and its modules: the
   kinds of signal across the full width, the lists side by side under them.
   The signal colours are the synth's own tokens, neon on black there, so here
   they are redefined dark enough to read on paper. */
.np-overview {
  max-width: var(--maxw); margin: clamp(2.6rem, 6vw, 4rem) auto 0;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: 1.4fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem);
  --c: #176b71;
  --mg: #a8317e;
  --o: #a04312;
}
.np-part { margin-top: clamp(2rem, 4vw, 2.6rem); }
.np-part-wide { grid-column: 1 / -1; margin-top: 0; }

.np-signals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem);
  margin: 0; padding: 0; list-style: none;
}
.np-signals li { border-top: 2px solid var(--signal); padding-top: .8rem; }
.np-signal-type { display: block; font-weight: 700; font-size: .95rem; color: var(--signal); }
.np-signals p { margin: .35rem 0 0; font-size: .92rem; color: var(--ink-mid); }
.np-note { margin: 1.2rem 0 0; font-size: .85rem; color: var(--ink-mid); }

.np-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.np-list li { position: relative; padding-left: 1.1rem; font-size: .92rem; color: var(--ink-mid); }
.np-list li::before {
  content: ''; position: absolute; left: 0; top: .8em;
  width: 5px; height: 1px; background: var(--accent);
}

/* The modules follow the way the collections follow the switcher on the
   Cardamom Tools page. */
.np-modules { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* Module pictures take one height, as the Rack panels do. On a phone that
   height would make a wide one, the mixer, overflow the column, so there the
   picture scales down whole instead. */
@media (max-width: 760px) {
  .np-overview, .np-signals { grid-template-columns: 1fr; }
  .np-panel { height: auto; max-height: 320px; }
}