#Header {
	display:                       flex;
	flex:                          0 0 auto;
	height:                        var(--Header-Height);
	justify-content:               center;
	position:                      relative;
	z-index:                       10;
}

.HeaderInner {
	align-items:                   center;
	display:                       flex;
	flex:                          0 1 var(--Content-MaxWidth);
	gap:                           16px;
	justify-content:               space-between;
	padding-inline:                var(--Viewport-InlinePadding) 10px;
}

.HeaderLogoArea {
	margin-top:                    -9px;
}

.HeaderLogoArea a {
	border-radius:                 12px;
	display:                       block;
	height:                        100%;
	/* Padding gives the focus glow room; the negative margin keeps layout unchanged. */
	margin:                        -4px;
	padding:                       4px;
}

.HeaderLogoLink:focus-visible {
	box-shadow:                    var(--InteractiveFocusVisible-BoxShadow);
	outline:                       none;
}

.HeaderLogoArea img {
	display:                       block;
	height:                        100%;
	max-width:                     100%;
}