.site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 84px;
        border-bottom: 1px solid rgba(206, 63, 43, 0.48);
      }

      .header-nav {
        display: flex;
        gap: 20px;
        font: 650 0.72rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
      }

      .header-nav a {
        text-underline-offset: 0.24em;
      }

      .wordmark {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        font: 700 1.05rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
        letter-spacing: -0.04em;
        text-decoration: none;
      }

      .wordmark img {
        width: 38px;
        height: 38px;
        object-fit: contain;
      }


/* Shared by the home page, guide index and every guide article. */
.site-header { gap: 20px; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
.site-header-frame { width: min(calc(100% - 40px), 1180px); margin: 0 auto; }
.site-header .wordmark { flex-shrink: 0; }
.site-header .wordmark img { border-radius: 0; }
.site-header .header-nav { flex-wrap: wrap; }
.site-header .header-nav a { padding: 8px 0; }
@media (max-width: 760px) {
  .site-header { min-height: 68px; }
  .site-header-frame { width: calc(100% - 28px); }
}
@media (max-width: 560px) {
  .site-header { flex-wrap: wrap; gap: 6px 20px; padding: 14px 0; }
  .site-header .header-nav { gap: 20px; }
}