@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

html, body, #fg, #bg {
  width:100%;
  height:100%;
  color:#fff;
  font-size:35px;
  font-family:'Montserrat', sans-serif;
  overflow:hidden;
}

div {
  position:absolute;
  top:0;
}

sub {
  font-size:12px;
  display:block;
}

p {
  box-sizing:border-box;
  padding:12px;
  max-width:10vw;
  overflow-wrap:break-word;
  word-break:break-word;
  font-size:20px;
  line-height:1.25;
}

/* Each closed column is window.innerWidth/10 wide (see controller.js) —
   fine on desktop, but at phone widths that's under 40px, not enough room
   for even one word of "Detailing bay" at any reasonable font-size without
   wrapping one character per line. Turning the label vertical at that point
   is the standard fix for a narrow collapsed panel: it reads as one clean
   line of text running the height of the column instead of a illegible
   letter-stack, and needs no change to the column-width math itself. */
@media (max-width: 640px) {
  p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    max-width: none;
    max-height: 90vh;
    padding: 10px 6px;
    font-size: 15px;
    white-space: nowrap;
  }
}