@view-transition{navigation:none}
/* A portable fade and sliding control for iPhone Safari and touch browsers. */
html.portable-navigation body>main,html.portable-navigation body>header,html.portable-navigation body>footer,html.portable-navigation body>.topline,html.portable-navigation body>.ribbon{transition:opacity 210ms ease,transform 210ms ease}
/* Never fade out the whole page: Safari keeps the current content until navigation is ready. */
html.portable-navigation.page-leaving body>main,html.portable-navigation.page-leaving body>header,html.portable-navigation.page-leaving body>footer,html.portable-navigation.page-leaving body>.topline,html.portable-navigation.page-leaving body>.ribbon{opacity:1;transform:none}
html.portable-navigation.page-arriving body>main{animation:mobile-content-settle 160ms ease-out both}
@keyframes mobile-content-settle{from{opacity:.99}to{opacity:1}}
html.portable-navigation .brand-switcher-links::before,html.portable-navigation .language-switch::before{transition:transform 180ms cubic-bezier(.22,.61,.36,1)}
html.portable-navigation .brand-switcher-links[data-switch-target=first]::before,html.portable-navigation .language-switch[data-switch-target=first]::before{transform:translateX(0)}
html.portable-navigation .brand-switcher-links[data-switch-target=last]::before{transform:translateX(calc(100% + 4px))}
html.portable-navigation .language-switch[data-switch-target=last]::before{transform:translateX(calc(100% + 2px))}
@media(max-width:800px){html.portable-navigation .language-switch[data-switch-target=last]::before{transform:translateX(100%)}}
@media(hover:none) and (pointer:coarse){@view-transition{navigation:none}}
@supports(-webkit-touch-callout:none){@view-transition{navigation:none}}
@media(prefers-reduced-motion:reduce){html.portable-navigation body>main,html.portable-navigation body>header,html.portable-navigation body>footer,html.portable-navigation body>.topline,html.portable-navigation body>.ribbon{transition:none;transform:none;opacity:1}html.portable-navigation .brand-switcher-links::before,html.portable-navigation .language-switch::before{transition:none}}

html.restoring-language-position,html.restoring-language-position *{scroll-behavior:auto!important;overflow-anchor:none}
@media(prefers-reduced-motion:reduce){html.portable-navigation.page-arriving body>main{animation:none}}

/* Keep both labels legible while the cream selection moves. */
html.portable-navigation :is(.brand-switcher-links,.language-switch)[data-switch-target=first] a:first-child,
html.portable-navigation :is(.brand-switcher-links,.language-switch)[data-switch-target=last] a:last-child{color:#153f2b}
html.portable-navigation :is(.brand-switcher-links,.language-switch)[data-switch-target=first] a:last-child,
html.portable-navigation :is(.brand-switcher-links,.language-switch)[data-switch-target=last] a:first-child{color:#fffaf0}
html.portable-navigation .welcome-header .language-switch[data-switch-target=first] a:first-child,
html.portable-navigation .welcome-header .language-switch[data-switch-target=last] a:last-child{color:#fffaf0}
html.portable-navigation .welcome-header .language-switch[data-switch-target=first] a:last-child,
html.portable-navigation .welcome-header .language-switch[data-switch-target=last] a:first-child{color:#153f2b}