/* Shared site header — identical structure to the home page:
   tagline left, mark centred, menu right. Blog pages swap the mark
   for the reversed "News, views and chat" masthead. */
:root { --hh: clamp(130px, 17vh, 185px); }
header.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-content: stretch; gap: 20px; height: var(--hh); box-sizing: border-box; padding: 0 clamp(20px, 5vw, 76px); background: #ffffff; color: #14140f; box-shadow: none; transition: box-shadow .3s ease; }
header.site-header[data-scrolled] { box-shadow: 0 1px 14px rgba(20,20,15,0.09); }
header.site-header .tag { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: #14140f; }
header.site-header .mark { justify-self: center; display: block; text-decoration: none; }
header.site-header .mark img { height: clamp(44px, 7vh, 84px); width: auto; display: block; }
header.site-header .masthead { justify-self: center; display: flex; flex-direction: column; align-items: center; background: #2c2e35; color: #ffffff; text-decoration: none; padding: 0 clamp(10px, 1vw, 16px) 0.9vh; }
header.site-header .masthead .w { display: block; height: clamp(26px, 4.3vh, 46px); width: auto; margin: clamp(6px, 0.9vh, 10px) 0 clamp(4px, 0.6vh, 7px); }
header.site-header .masthead .s { font-family: 'EB Garamond', Garamond, Georgia, serif; font-weight: 400; text-transform: uppercase; font-size: clamp(12px, 2vh, 22px); line-height: 1; letter-spacing: 0.02em; }
header.site-header [data-menu-btn] { justify-self: end; }
@media (max-width: 900px) {
  :root { --hh: 80px; }
  header.site-header { gap: 12px; padding: 0 18px; box-shadow: 0 1px 14px rgba(20,20,15,0.09); }
  header.site-header .tag { font-size: 8.5px; letter-spacing: 0.07em; }
  header.site-header .mark img { height: min(48px, 12vw); }
  header.site-header .masthead { padding: 2px 8px 5px; }
  header.site-header .masthead .w { height: min(22px, 5.4vw); margin: 4px 0 3px; }
  header.site-header .masthead .s { font-size: min(11px, 2.7vw); }
}
@media (max-width: 520px) { header.site-header { padding: 0 16px; } header.site-header .tag { font-size: 8px; letter-spacing: 0.05em; } }
@media (max-width: 380px) { header.site-header .tag { font-size: 7.5px; letter-spacing: 0.03em; } }
@media (max-width: 340px) { header.site-header .mark img { height: min(48px, 10vw); } }