/* The header publishes its measured height for sticky product media. */
:root{--header-height:88px;--header-target-height:88px}
body[data-header-compact="true"]{--header-target-height:64px}
body > .site-header{position:sticky;top:0;height:var(--header-target-height);transition:height 340ms cubic-bezier(.22,1,.36,1)}
.site-header .wordmark img{max-height:calc(var(--header-target-height) - 22px);transition:max-height 340ms cubic-bezier(.22,1,.36,1)}
/* Navigation settles the destination before its content entrance starts. */
body[data-header-settling="true"] > .site-header,
body[data-header-settling="true"] .site-header .wordmark img{transition:none!important}
/* Keep the real navigation visible through fixed-body modal scroll locks. */
.header-scroll-placeholder{display:block;flex-shrink:0;pointer-events:none;visibility:hidden}
body .site-header[data-header-held="true"]{position:fixed!important;top:var(--held-header-top)!important;left:var(--held-header-left)!important;right:auto!important;width:var(--held-header-width)!important;height:var(--held-header-height)!important;margin:0!important;transition:none!important}
body .site-header[data-header-held="true"] .wordmark img{max-height:calc(var(--held-header-height) - 22px);transition:none!important}

/* Chunky underlines stay below the label and preserve the existing focus ring. */
body :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a){position:relative}
body :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a)::after{content:"";position:absolute;left:0;right:0;bottom:3px;width:100%;height:3px;border-radius:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 280ms cubic-bezier(.22,1,.36,1);pointer-events:none}
body .main-nav a::after{bottom:6px;background:var(--accent)}
body .footer-links a::after,body .breadcrumbs a::after{bottom:-5px}
body .main-nav a[aria-current="page"]::after{transform:scaleX(1)}
body :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a):focus-visible::after{transform:scaleX(1)}
body[data-link-effect="crossfade"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a),
body[data-link-effect="minimal"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a){transition:color 260ms ease}
body[data-link-effect="crossfade"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a)::after,
body[data-link-effect="minimal"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a)::after{content:none}
body:is([data-link-effect="crossfade"],[data-link-effect="minimal"]) .main-nav a[aria-current="page"]{color:var(--accent)}
body[data-link-effect="minimal"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a){transition:none}

/* Isolated negative stacking keeps the revealed background under anonymous text. */
body .button{--button-rest-bg:var(--surface);--button-rest-ink:var(--fg);isolation:isolate}
body .button--accent{--button-rest-bg:var(--accent);--button-rest-ink:var(--on-accent)}
body[data-button-effect="reveal"] .button{background:var(--button-rest-bg);color:var(--button-rest-ink);transition:color 220ms ease}
body[data-button-effect="reveal"] .button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);clip-path:inset(0 100% 0 0);transition:clip-path 360ms cubic-bezier(.22,1,.36,1);pointer-events:none}
body[data-button-effect="reveal"] .button:is(:hover,:focus-visible){background:var(--button-rest-bg);color:var(--bg);transform:none}
body[data-button-effect="reveal"] .button:is(:hover,:focus-visible)::before{clip-path:inset(0)}
body[data-button-effect="reveal"] .button svg,
body[data-button-effect="crossfade"] .button svg,
body[data-button-effect="invert"] .button svg{transform:none;transition:none}
body[data-button-effect="crossfade"] .button{transition:background-color 340ms ease,color 340ms ease;transform:none}
body[data-button-effect="invert"] .button{transition:background-color 180ms ease,color 180ms ease;transform:none}
body[data-button-effect="none"] .button:is(:hover,:focus-visible){background:var(--button-rest-bg);color:var(--button-rest-ink);transform:none}
body[data-button-effect="none"] .button,body[data-button-effect="none"] .button svg{transition:none;transform:none}

@media(hover:hover) and (pointer:fine){
  body:not([data-link-effect="crossfade"]):not([data-link-effect="minimal"]) :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a):hover::after{transform:scaleX(1)}
  body[data-link-effect="crossfade"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a):hover{color:var(--accent)}
}
@media(hover:none){
  body[data-button-effect="reveal"] .button:active::before{clip-path:inset(0)}
  body[data-button-effect="reveal"] .button:active{color:var(--bg)}
}
@media(max-width:760px){
  :root{--header-height:75px;--header-target-height:75px}
  body[data-header-compact="true"]{--header-target-height:62px}
}
[data-motion="reduced"] .site-header,[data-motion="reduced"] .site-header .wordmark img,
[data-motion="reduced"] .button,[data-motion="reduced"] .button::before,
[data-motion="reduced"] :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a)::after{transition:none!important}
[data-motion="reduced"] .button,[data-motion="reduced"] .button svg{transform:none!important}
@media(prefers-reduced-motion:reduce){
  body > .site-header,.site-header .wordmark img,.button,.button::before,
  body :is(.main-nav a,.text-link,.footer-links a,.breadcrumbs a)::after{transition:none!important}
  .button,.button svg{transform:none!important}
}
@media(forced-colors:active){
  body[data-button-effect="reveal"] .button::before{display:none}
  body[data-button-effect="reveal"] .button:is(:hover,:focus-visible){color:ButtonText;background:ButtonFace}
}