/* ヘッダー：パソコンの専用寸法と配置。ファーストビューの上に独立して置く。スマホの変更は../responsive.css。 */
:where([data-section="header"][data-ui="brume"]).site-header {
  padding-block: var(--space-header-y);
  background: var(--color-background);
}

:where([data-section="header"][data-ui="brume"]) .site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-card-gap);
  width: calc(100% - var(--space-header-inline) * 2);
  margin-inline: auto;
}

:where([data-section="header"][data-ui="brume"]) .site-header__brand {
  display: grid;
  color: inherit;
  text-decoration: none;
}

:where([data-section="header"][data-ui="brume"]) .site-header__name {
  font-family: var(--font-latin);
  font-size: var(--font-size-brand);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
  letter-spacing: var(--track-brand);
}

:where([data-section="header"][data-ui="brume"]) .site-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-card-gap);
}

:where([data-section="header"][data-ui="brume"]) .site-nav__link {
  font-family: var(--font-latin);
  font-weight: var(--weight-title);
  font-size: var(--font-size-button);
  letter-spacing: var(--track-heading);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--motion-duration) var(--motion-easing);
}

:where([data-section="header"][data-ui="brume"]) .site-nav .button {
  min-width: 0;
}

:where([data-section="header"][data-ui="brume"]) .site-header__toggle {
  display: none;
  width: var(--size-header-toggle);
  height: var(--size-header-toggle);
  padding: var(--space-small);
  border: var(--size-line) solid var(--color-primary);
  background: var(--color-transparent);
  color: inherit;
}

:where([data-section="header"][data-ui="brume"]) .site-header__bar {
  display: block;
  height: var(--size-line);
  width: var(--size-header-toggle-bar);
  margin-block: var(--space-tiny);
  background: currentColor;
}

:where([data-section="header"][data-ui="brume"]) .site-nav__link:is(:hover, :focus-visible) {
  color: var(--color-primary-hover);
}

/* 開いたドロワーの閉じるアイコン。既存の状態classを利用する。 */
:where([data-section="header"][data-ui="brume"]) .site-header__toggle.is-open .site-header__bar:nth-child(1) {
  transform: translateY(calc(var(--space-tiny) + var(--size-line))) rotate(45deg);
}

:where([data-section="header"][data-ui="brume"]) .site-header__toggle.is-open .site-header__bar:nth-child(2) {
  opacity: 0;
}

:where([data-section="header"][data-ui="brume"]) .site-header__toggle.is-open .site-header__bar:nth-child(3) {
  transform: translateY(calc((var(--space-tiny) + var(--size-line)) * -1)) rotate(-45deg);
}