.kryar-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--kryar-header-height);
  border-bottom: 1px solid transparent;
  background: var(--kryar-background);
  transition:
    border-color var(--kryar-transition-base),
    box-shadow var(--kryar-transition-base);
}

.kryar-header[data-scrolled='true'] {
  border-bottom-color: var(--kryar-border);
  box-shadow: var(--kryar-shadow-subtle);
}

.kryar-header__inner {
  display: flex;
  min-height: var(--kryar-header-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--kryar-space-6);
}

.kryar-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

.kryar-brand__image {
  width: auto;
  height: 4.5rem;
  object-fit: contain;
}

.kryar-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.kryar-menu--desktop {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 2.8vw, 3rem);
}

.kryar-menu--desktop a {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--kryar-primary);
  font-size: var(--kryar-step--1);
  font-weight: 650;
  text-decoration: none;
}

.kryar-menu--desktop a::after {
  position: absolute;
  right: 0;
  bottom: 0.18rem;
  left: 0;
  height: 2px;
  content: '';
  transform: scaleX(0);
  transform-origin: right;
  background: var(--kryar-accent);
  transition: transform var(--kryar-transition-base);
}

.kryar-menu--desktop a:hover::after,
.kryar-menu--desktop .current-menu-item > a::after,
.kryar-menu--desktop .current_page_item > a::after,
.kryar-menu--desktop a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.kryar-menu--desktop a[aria-current='page'] {
  color: var(--kryar-accent-hover);
}

.kryar-menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kryar-border);
  border-radius: var(--kryar-radius-sm);
  background: var(--kryar-background);
  color: var(--kryar-primary);
  cursor: pointer;
}

.kryar-mobile-shell[hidden] {
  display: none;
}

.kryar-mobile-shell {
  position: fixed;
  z-index: 1100;
  inset: 0;
}

.kryar-mobile-shell__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  background: var(--kryar-overlay);
  cursor: default;
  transition: opacity var(--kryar-transition-base);
}

.kryar-mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(88vw, 24rem);
  height: 100%;
  overflow-y: auto;
  transform: translateX(100%);
  background: var(--kryar-background);
  box-shadow: var(--kryar-shadow-subtle);
  transition: transform var(--kryar-transition-base);
}

.kryar-mobile-shell.is-open .kryar-mobile-shell__backdrop {
  opacity: 1;
}

.kryar-mobile-shell.is-open .kryar-mobile-panel {
  transform: translateX(0);
}

.kryar-mobile-panel__top {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--kryar-space-5);
  border-bottom: 1px solid var(--kryar-border);
}

.kryar-mobile-panel__label {
  color: var(--kryar-primary);
  font-size: var(--kryar-step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kryar-mobile-panel__close {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kryar-border);
  border-radius: var(--kryar-radius-sm);
  background: var(--kryar-background);
  color: var(--kryar-primary);
  cursor: pointer;
}

.kryar-menu--mobile a {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  padding-inline: var(--kryar-space-5);
  border-bottom: 1px solid var(--kryar-border);
  color: var(--kryar-primary);
  font-weight: 650;
  text-decoration: none;
}

.kryar-menu--mobile a:hover,
.kryar-menu--mobile .current-menu-item > a,
.kryar-menu--mobile .current_page_item > a,
.kryar-menu--mobile a[aria-current='page'] {
  box-shadow: inset 3px 0 var(--kryar-accent);
  background: var(--kryar-surface-muted);
  color: var(--kryar-accent-hover);
}