@layer mobilemenu{.mobile-nav{position:absolute;right:0;top:0;width:100vw;height:100vh;overflow:hidden;font-family:var(--ff-headings);z-index:20;pointer-events:none;&[data-navopen]{position:fixed}.language-icon{fill:var(--color-text-bg)}}.mobile-nav__cover{position:absolute;width:100vw;height:100vh;background-color:var(--color-mobile-menu-cover);backdrop-filter:blur(3px);opacity:0; [data-navopen] & { opacity: 1; pointer-events: auto; }}.mobile-nav__toggle{display:flex;align-items:center;position:absolute;top:var(--gutters);right:var(--gutters);padding:0 .3rem;border-color:var(--color-button-text-hover);z-index:22;pointer-events:auto;&:hover, &:focus-visible, &:active{svg{fill:var(--color-button-text-hover)}}}.mobile-nav__hamburger{fill:var(--color-button-text);width:1.6rem;margin-inline-start:.1rem;.button--outline &{fill:var(--color-button)}rect{transform-origin:center} [data-navopen] & { rect { y: 45px; &:nth-of-type(1) { transform: rotate(45deg); } &:nth-of-type(2) { opacity: 0; } &:nth-of-type(3) { transform: rotate(-45deg); } } }}.mobile-nav__sheet{visibility:hidden;background-color:var(--color-mobile-menu);width:90vw;height:100vh;padding:2.25rem;transform:translateX(100vw);z-index:21; [data-navopen] & { visibility: visible; pointer-events: auto; box-shadow: -10px 0 10px -10px var(--color-nearblack); transform: translateX(10vw); }}.mobile-nav__region{&:not(:empty){margin-block-end:.5rem}}.mobile-nav__navbar{display:flex;flex-direction:column;padding-inline-start:0;margin-block:0;li{list-style:none}a{display:inline-block;padding-block:.5rem}}.mobile-nav__cover,.mobile-nav__toggle,.mobile-nav__hamburger>rect,.mobile-nav__sheet{@media(prefers-reduced-motion:no-preference){transition: all 130ms ease-in; [data-navopen] &{transition:all 330ms ease-out}}}}