/* front-6-journey: the finale, four instruments under the one light, in the site's order
   (gate, roll, mangler, carve; Bjorn, 2026-10-09: gate and roll hang in the top row, mangler and
   carve stand below). Owner: P4
   (finale). Loaded after journey.css, so a rule here may refine one there; the
   doors under the word and the footer stay in journey.css (P2).

   mangler hangs in the finale with its label pinned beside it (09-ways,
   core.ui.pin('mangler', ...)), so its column label shows as gate's and carve's
   do; the skeleton's rule that hid it until then is gone. Without 3D (no WebGL,
   no JavaScript) the column lists all four. */

/* Tall screens: two instruments side by side in each row leave each label about half the
   screen, so a label's second line wraps there ("volume and frequency" over "sequencer · €29")
   and keeps clear of its neighbour's (gate's rides over gate; the others sit under theirs). */
@media (max-aspect-ratio: 17/20) {
  #ways .way.pinned { white-space: normal; padding: 10px 8px 10px 6px; column-gap: 9px; }
  #ways .way.pinned .way-meta { max-width: 18ch; text-wrap: balance; }
}

/* Short tall screens (a phone with both browser bars showing, 390 x 664; 375 x 667): the
   column is smaller there while the labels keep their size, so the labels sit a little
   tighter (2026-10-09, integration). */
@media (max-aspect-ratio: 17/20) and (max-height: 700px) {
  #ways .way.pinned { padding-bottom: 6px; row-gap: 1px; }
  #ways .way.pinned .way-name { font-size: 23px; }
}