.site-header {
  display: flex;
  align-items: center;
  padding: 20px;
  /* Fixed so the header is the same height whether the logo (32px tall)
     renders or not (hidden on the top page) — otherwise the page body
     shifts down by the difference when navigating between pages. */
  min-height: 72px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-weight: 900;
  color: inherit;
  text-decoration: none;
}

.site-logo img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.site-nav a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-text-sub);
}

.site-nav a:hover {
  text-decoration-color: var(--color-text-main);
}

/* Current page: solid underline instead of the dotted affordance used
   for links you'd click — same color vocabulary, different meaning.
   A solid line reads as touching a descender (the "y" in "Diary") at
   the same 0.2em offset the dotted style uses, so this needs more
   clearance and a hairline weight to stay quiet. */
.site-nav a[aria-current="page"] {
  text-decoration-style: solid;
  text-decoration-color: var(--color-text-main);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.site-nav #toggle-theme {
  font-size: x-large;
  line-height: 1;
  cursor: pointer;
}

/* Below this width, the logo text ("kobaken.co", a single unbreakable
   word) doesn't leave room for the nav on the same line. Drop it and
   keep just the icon — logo stays top-left, nav stays right-aligned. */
@media (max-width: 480px) {
  .site-logo span {
    display: none;
  }
}