/* Shared, code-native identity: a folded canvas joining the M and C. */
@layer components {
  .site-header {
    background: #f8f7f3f5;
    border-bottom-color: #d8dcd1;
  }

  .site-header .header-inner {
    min-height: 80px;
    gap: clamp(32px, 4vw, 64px);
  }

  .brand {
    gap: 11px;
  }

  .brand .brand-mark {
    display: block;
    width: 35px;
    height: 34px;
    flex: 0 0 35px;
    color: var(--olive);
  }

  .brand > span:last-child {
    font-size: 28px;
    letter-spacing: -0.055em;
  }

  .site-header .site-nav {
    font-size: 12px;
    gap: 28px;
  }

  .site-header .nav-actions > .button {
    min-height: 42px;
    padding-inline: 20px;
    border-radius: 4px;
  }

  .site-header .nav-actions > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .site-header .product-dropdown {
    border-radius: 7px;
    box-shadow: 0 18px 45px #29312216;
  }

  .site-footer .brand .brand-mark {
    width: 32px;
    height: 31px;
    flex-basis: 32px;
  }
}

@layer responsive {
  @media (max-width: 1100px) and (min-width: 941px) {
    .site-header .header-inner {
      gap: 28px;
    }

    .site-header .site-nav {
      gap: 20px;
    }
  }

  @media (max-width: 940px) {
    .site-header .header-inner {
      min-height: 72px;
      gap: 0;
      padding-block: 13px;
    }

    .brand .brand-mark {
      width: 31px;
      height: 30px;
      flex-basis: 31px;
    }

    .brand > span:last-child {
      font-size: 26px;
    }

    .site-header .site-nav {
      gap: 0;
      padding-top: 14px;
    }

    .site-header .product-dropdown {
      border-radius: 0;
      box-shadow: none;
    }

    .site-header .mobile-toggle {
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }
  }

  @media (max-width: 380px) {
    .brand {
      gap: 8px;
    }

    .brand > span:last-child {
      font-size: 24px;
    }
  }
}