:root{--brand-dock-width:220px;--header-gutter:var(--gutter)}
.site-header .header-bar{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--header-gutter);font-size:14px}
.header-actions{display:flex;align-items:center;gap:28px}
.header-actions>.first-visit{display:flex;align-items:center;min-height:44px;white-space:nowrap;transition:color 180ms}
.header-actions>.first-visit:hover{color:var(--gold-light)}
.site-header button:focus-visible{outline-color:var(--gold-light);outline-offset:2px}
.follow-control{position:relative}
.follow-toggle{height:44px;min-width:44px;padding:0;display:flex;align-items:center;background:transparent}
/* taste-skill-ignore: Match the owner's existing compact Live Niagara pill exactly; its button has a 44px touch target. */ .follow-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;background:#fff;color:var(--black);font:600 9px/1.2 var(--sans);white-space:nowrap;transition:background 180ms}
.follow-toggle:hover .follow-pill{background:var(--cream)}
.follow-pill svg{width:10px;height:10px;stroke-width:1.7;transition:transform 180ms}
.follow-toggle[aria-expanded="true"] .follow-pill svg{transform:rotate(180deg)}
/* taste-skill-ignore: Shadow identifies the small floating social dropdown above page content. */ .follow-panel{position:absolute;top:calc(50% + 19px);left:0;width:156px;padding:6px;border-radius:11px;background:#fff;color:var(--black);box-shadow:0 8px 28px #1716121f}
.follow-panel[hidden],.header-menu[hidden]{display:none}
.social-list{list-style:none;padding:0;margin:0}
/* taste-skill-ignore: User requested the original compact social menu size; these are informational entries until profile URLs are supplied. */ .social-pending-item{min-height:28px;display:flex;align-items:center;gap:9px;padding:6px 8px;font-size:10px;font-weight:500;line-height:1.4;color:#59564e}
.social-pending-item img{width:14px;height:14px;object-fit:contain}
/* taste-skill-ignore: Match the supplied Follow us component's small footer. */ .social-pending{font-size:8px;line-height:1.4;padding:6px 8px 3px;margin:2px 0 0;color:#686255}
.menu-toggle{display:grid;place-items:center;width:44px;height:44px;padding:10px;background:transparent;color:var(--cream)}
.menu-toggle:hover{color:var(--gold-light)}
.menu-toggle svg{width:24px;height:24px;stroke-width:1.5}
.menu-toggle path{transform-origin:12px 12px;transition:transform 220ms var(--ease)}
.menu-toggle[aria-expanded="true"] .menu-line-top{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-line-bottom{transform:translateY(-4px) rotate(-45deg)}
/* taste-skill-ignore: Functional floating navigation panel, with a subtle shadow separating it from the foreground dog. */ .site-header .header-menu{position:absolute;top:calc(100% - 4px);right:var(--header-gutter);width:320px;max-width:calc(100vw - 2 * var(--header-gutter));max-height:calc(100dvh - var(--header-height) - 24px);overflow:auto;overscroll-behavior:contain;padding:16px 24px;background:var(--cream);color:var(--black);box-shadow:0 12px 32px #17161226}
.header-menu ul{list-style:none;margin:0;padding:0}
.header-menu a{display:flex;align-items:center;min-height:44px;font-size:15px;line-height:1.4;transition:color 180ms}
.header-menu a:hover,.header-menu a:focus-visible{color:#795b2c}
.header-menu a:focus-visible{outline-color:#795b2c;outline-offset:1px}
.header-menu .menu-service{padding-left:18px;color:#655d4e;font-size:14px}
.header-menu .menu-divider{margin-top:16px}
.header-popover-open .site-header{z-index:70}
.header-popover-open .brand-plate{z-index:75}
.header-popover-open .skip-link{z-index:80}
.brand-plate{width:var(--brand-dock-width)}
@media(max-width:760px){:root{--brand-dock-width:180px;--header-gutter:20px}.header-actions{gap:8px}.site-header .header-bar{font-size:13px}}
@media(max-width:480px){:root{--brand-dock-width:160px;--header-gutter:16px}.header-actions{gap:4px}}
@media(max-width:380px){:root{--brand-dock-width:140px;--header-gutter:12px}.site-header .header-bar{font-size:12px}.menu-toggle{padding:11px}.menu-toggle svg{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.follow-pill,.follow-pill svg,.menu-toggle path,.header-menu a{transition:none}}
