.site-header { position: sticky; z-index: 80; top: 0; border-bottom: 1px solid var(--color-line); background: rgba(255,253,248,.97); }
.site-header__inner { position: relative; display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-3); }
.site-header__brand { display: inline-flex; min-width: 0; align-items: center; gap: .625rem; color: var(--color-ink); font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: -.04em; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-header__logo { width: 2rem; height: 2rem; flex: 0 0 2rem; object-fit: contain; }
.site-header__brand-name { overflow: hidden; text-overflow: ellipsis; }
.site-header__toggle { display: inline-grid; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; place-content: center; gap: .28rem; border: 2px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-warm-white); padding: 0; }
.site-header__toggle span { display: block; width: 1.25rem; height: 2px; background: var(--color-ink); transition: transform var(--transition-fast),opacity var(--transition-fast); }
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(.44rem) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.44rem) rotate(-45deg); }
.site-header__nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; max-height: calc(100vh - 4.5rem); overflow-y: auto; border-bottom: 2px solid var(--color-ink); background: var(--color-warm-white); padding: var(--space-4) var(--gutter) var(--space-5); }
.site-header__nav--open { display: grid; gap: var(--space-5); }
.site-header__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-header__list li,.site-header__list li + li { margin: 0; padding: 0; }
.site-header__list a { display: flex; min-height: 2.75rem; align-items: center; border-bottom: 1px solid var(--color-line); color: var(--color-ink); font-size: var(--text-lg); font-weight: var(--weight-semibold); text-decoration: none; }
.site-header__list a:hover { color: var(--color-cobalt); }
.site-header__booking { width: 100%; }
@media (min-width: 64rem) { .site-header__inner { min-height: 5rem; gap: var(--space-5); } .site-header__logo { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; } .site-header__brand { font-size: 1.5rem; } .site-header__toggle { display: none; } .site-header__nav { position: static; display: flex; min-width: 0; max-height: none; align-items: center; gap: var(--space-4); overflow: visible; border: 0; background: transparent; padding: 0; } .site-header__list { display: flex; min-width: 0; align-items: center; gap: clamp(.75rem,1.6vw,1.5rem); } .site-header__list li { display: flex; align-items: center; } .site-header__list a { min-height: 2.75rem; align-items: center; border: 0; font-size: var(--text-sm); white-space: nowrap; } .site-header__list a[aria-current="page"] { border-bottom: 2px solid var(--color-cobalt); } .site-header__booking { width: auto; flex: 0 0 auto; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .site-header__toggle span { transition: none; } }