.site-header { position: sticky; z-index: 100; top: 0; width: 100%; border-bottom: var(--border); background: rgb(245 241 232 / 94%); backdrop-filter: blur(12px); }
.site-header__inner { position: relative; display: flex; min-height: 5.5rem; align-items: center; gap: var(--space-4); width: min(100% - 4rem, 75rem); margin: 0 auto; }
.site-header__brand { display: inline-flex; min-width: 0; align-items: center; gap: .7rem; color: var(--color-ink); text-decoration: none; }
.site-header__logo { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; object-fit: contain; }
.site-header__brand-copy { display: grid; min-width: 0; line-height: 1.1; }
.site-header__brand-name { font-size: .83rem; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.site-header__brand-detail { margin-top: .2rem; color: var(--color-moss-green); font-size: .57rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.site-header__eyebrow { margin: 0 auto 0 0; color: var(--color-cornflower-blue); font-size: .65rem; font-weight: 700; letter-spacing: .1em; line-height: 1.2; white-space: nowrap; }
.site-header__navigation { min-width: 0; }
.site-header__list { display: flex; align-items: center; gap: .85rem; 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: inline-flex; align-items: baseline; gap: .25rem; color: var(--color-ink); font-size: .68rem; font-weight: 600; letter-spacing: .04em; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.site-header__list a span { color: var(--color-cornflower-blue); font-size: .59rem; }
.site-header__list a:hover { color: var(--color-rosewood); }
.site-header__mobile-extra { display: none; }
.site-header__program { display: grid; width: 4.6rem; height: 4.6rem; flex: 0 0 4.6rem; place-content: center; border-radius: 50%; background: var(--color-tangerine); color: var(--color-ink); font-size: .59rem; font-weight: 700; letter-spacing: .05em; line-height: 1.15; text-align: center; text-decoration: none; }
.site-header__program:hover { color: var(--color-ink); transform: translateY(-2px); }
.site-header__toggle { display: none; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; align-content: center; gap: .28rem; padding: .65rem; border: var(--border); background: var(--color-paper-white); }
.site-header__toggle span { display: block; width: 100%; height: 2px; background: var(--color-ink); transition: transform var(--transition-fast), opacity var(--transition-fast); }
.site-header__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1120px) { .site-header__inner { width: min(100% - 3rem, 75rem); } .site-header__eyebrow { display: none; } .site-header__list { gap: .6rem; } .site-header__list a { font-size: .63rem; } }
@media (max-width: 900px) { .site-header__inner { min-height: 4.75rem; } .site-header__toggle { display: grid; margin-left: auto; } .site-header__navigation { position: absolute; top: calc(100% + .5rem); right: 0; display: none; width: min(22rem, calc(100vw - 3rem)); max-height: calc(100vh - 6rem); overflow-y: auto; border: var(--border); background: var(--color-paper-white); box-shadow: var(--shadow-ticket); } .site-header__navigation.is-open { display: block; } .site-header__list { display: grid; gap: 0; padding: .5rem 0; } .site-header__list a { min-height: 2.85rem; align-items: center; gap: .55rem; padding: .65rem 1rem; font-size: .78rem; } .site-header__list a:hover { background: var(--color-mist-blue); } .site-header__mobile-extra { display: grid; gap: 0; padding: .5rem 1rem 1rem; border-top: var(--rule-perforated); } .site-header__mobile-extra a { padding: .55rem 0; color: var(--color-cornflower-blue); font-size: .78rem; font-weight: 600; } .site-header__program { width: 3.7rem; height: 3.7rem; flex-basis: 3.7rem; font-size: .52rem; } }
@media (max-width: 560px) { .site-header__inner { width: min(100% - 2.5rem, 75rem); gap: .65rem; } .site-header__logo { width: 2.1rem; height: 2.1rem; flex-basis: 2.1rem; } .site-header__brand-name { font-size: .74rem; } .site-header__brand-detail { display: none; } .site-header__program { display: none; } .site-header__navigation { right: 0; width: min(22rem, calc(100vw - 2.5rem)); } }
@media (prefers-reduced-motion: reduce) { .site-header__program, .site-header__toggle span { transition: none; } }