/* Fit the opened navigation to its labels on both phone orientations. */
@media (max-width: 860px) {
  .navigation,
  .navigation.open {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: .3rem .45rem .4rem;
    gap: 0;
  }
  .navigation button {
    width: auto;
    min-height: 34px;
    padding: .32rem .5rem;
    white-space: nowrap;
    font-size: .55rem;
    line-height: 1.2;
  }
  .navigation .language { margin-top: .15rem; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .intro-bars .bar-b { right: 26%; }
  .intro-bars .bar-d { left: 26%; }
}

@media (max-width: 540px) and (orientation: portrait) {
  .intro-bars .bar-d { left: 19%; }

  /* Keep the name at the left edge and reveal cream before the turquoise
     right border, instead of moving the whole masthead to the right. */
  .masthead {
    margin-left: 0;
    margin-right: 12%;
  }
}