/* ==========================================================================
   Logo. Beeldmerk en woordmerk als masker, zodat ze de inktkleur van de
   richting aannemen. De kleur komt uit --lg-ink, met currentColor als val.

   Verhoudingen uit de aangeleverde bestanden: beeldmerk 740 x 663 (de finale
   versie, logo-sakino-final-version.svg, bijgesneden op de tekening),
   woordmerk 1177 x 204.
   ========================================================================== */

.lg {
  --lg-size: 34px;
  --lg-wordmark: url("/brand/wordmark-alpha.png");
  --lg-word-ratio: 5.77;
  --lg-word-cap: 0.42;

  display: inline-flex;
  align-items: center;
  gap: calc(var(--lg-size) * 0.36);
  color: var(--lg-ink, currentColor);
  line-height: 1;
}

.lg--verticaal {
  flex-direction: column;
  gap: calc(var(--lg-size) * 0.34);
}

.lg__mark {
  display: block;
  width: calc(var(--lg-size) * 1.116); /* 740 / 663 */
  height: var(--lg-size);
  background: currentColor;
  -webkit-mask: url("/brand/mark.svg") no-repeat center / contain;
  mask: url("/brand/mark.svg") no-repeat center / contain;
  flex: none;
}

.lg__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--lg-size) * 0.22);
}

.lg--verticaal .lg__text {
  align-items: center;
}

.lg__word {
  display: block;
  height: calc(var(--lg-size) * var(--lg-word-cap));
  width: calc(var(--lg-size) * var(--lg-word-cap) * var(--lg-word-ratio));
  background: currentColor;
  -webkit-mask: var(--lg-wordmark) no-repeat center / contain;
  mask: var(--lg-wordmark) no-repeat center / contain;
}