<section>
  <p>Not fixed (layout shifts on interest)</p>
  <nav>
    <a href="#">Foo</a>
    <a href="#">Bar</a>
    <a href="#">Baz</a>
  </nav>
</section>

<section>
  <p>Fixed (no shift on interest)</p>
  <nav class="fixed">
    <a href="#">Foo</a>
    <a href="#">Bar</a>
    <a href="#">Baz</a>
  </nav>
</section>

.fixed > a:is(:hover, :focus-visible) {
  font-variation-settings: "GRAD" 800;
}

:not(nav.fixed) > a:is(:hover, :focus-visible) {
  font-weight: 800;
}







@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }
  
  html {
    block-size: 100%;
    color-scheme: dark light;
    scrollbar-color: color-mix(in srgb, CanvasText, #0000 50%) #0000;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 10vh;
  }
  
  nav {
    display: flex;
    gap: 2ch;

    > a {
      outline-offset: 5px;
    }
  }
  
  section {
    display: grid;
    gap: 1ex;
  }
}