/* Crop the same transparent master into independently sized symbol and text.
   Relative to the previous lockup, symbol is 60% and wordmark is 80%. */
.header_set .main_logo {
  --logo-base: clamp(160px, 15vw, 220px);
  display: block;
  width: auto;
  flex-shrink: 0;
}

.header_set .main_logo .tuklogic-header-logo,
.footer_set .main_logo .tuklogic-header-logo {
  display: flex;
  align-items: center;
  gap: calc(var(--logo-base) * 0.03);
  direction: ltr;
}

.tuklogic-symbol,
.tuklogic-wordmark {
  display: block;
  flex-shrink: 0;
  background-image: url('/icons/tuklogic-horizontal.png');
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.tuklogic-symbol {
  width: calc(var(--logo-base) * 525 / 2172 * 0.6);
  height: calc(var(--logo-base) * 525 / 2172 * 0.6);
  background-size: calc(var(--logo-base) * 0.6) auto;
  background-position: calc(var(--logo-base) * -158 / 2172 * 0.6) calc(var(--logo-base) * -100 / 2172 * 0.6);
}

.tuklogic-wordmark {
  width: calc(var(--logo-base) * 1296 / 2172 * 0.8);
  height: calc(var(--logo-base) * 205 / 2172 * 0.8);
  background-size: calc(var(--logo-base) * 0.8) auto;
  background-position: calc(var(--logo-base) * -720 / 2172 * 0.8) calc(var(--logo-base) * -252 / 2172 * 0.8);
}

@media (max-width: 480px) {
  .header_set .main_logo {
    --logo-base: 142px;
  }
}

/* The Present page's section links are fixed below the header. The captured
   styles positioned them across the header's bottom rule at desktop widths. */
@media (min-width: 1201px) {
  body .art-items.present-tabs,
  body .art-items.present-tabs.art-items-topbar {
    top: calc(4.95vw + 12px) !important;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  body .art-items.present-tabs,
  body .art-items.present-tabs.art-items-topbar {
    top: calc(7.75vw + 10px) !important;
    left: 0;
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    pointer-events: auto;
  }
}

@media (max-width: 600px) {
  body .art-items.present-tabs,
  body .art-items.present-tabs.art-items-topbar {
    top: 4.5rem !important;
  }
}

/* Footer uses the same lockup as the header. */
.footer_set .main_logo {
  --logo-base: 250px;
  display: block;
  width: auto !important;
}

/* Page-transition splash shows the TUKLOGIC lockup. */
#splash div svg {
  width: 200px;
  height: auto;
  aspect-ratio: 1852 / 516;
}