/* Header geometry (desktop), from the approved mock, in CSS px from the page top:
   logo circle 171px at top 26 (bottom 197); header text 54px tall centred at y 85;
   #Content (the white box) starts at 172, so the logo overhangs that line by 25px
   into the black left column. .Head padding-top + .HeadRow height = 26 + 146 = 172. */
body > #Frame > .Head {
    padding: 26px 3px 0px 3px;
    margin: 0px;
}
#Head .HeadRow { position: relative; height: 146px; overflow: visible; background-color: black; }

/* Logo: served from the theme (1x + 2x via srcset), pinned to the row's top-left. */
.SiteTitle { float: none; position: absolute; top: 0; left: 0; margin: 0; line-height: 0; }
.SiteTitle a { display: block; }
.SiteTitle a img { display: block; padding: 0px; max-width: none; width: 171px; height: 171px; }

/* Header text: centred over the content column (#Content is margin-left 230px / width 730px
   inside the 960px .Row, see style.css .ContentColumn); top 32 => centre at 26 + 32 + 27 = 85. */
#Head .HeaderText {
    position: absolute; top: 32px; left: 230px; width: 730px; height: 54px;
    display: flex; align-items: center; justify-content: center;
}
#Head .HeaderText img { display: block; }

@media only screen and (max-width: 767px) {
    body > #Frame > .Head { padding: 8px 3px 8px 3px; }
    #Head .HeadRow { height: auto; }
    .SiteTitle { position: static; }
    .SiteTitle a img { width: 80px; height: 80px; }
    #Head .HeaderText { position: static; width: auto; height: auto; }
    #Head .HeaderText img { max-width: 100%; height: auto; }
}

.PanelColumn {
    margin-top: 66px; /* clears the overhanging logo; username lands at y 238 as in the mock */
}