/* Visual button: the light button (.button.button--light) with an image under it. The whole thing is one link; the image scales up a little when you roll over it.
   The image is swappable: change the src of the <img> (or use a .media placeholder). Best: supply the picture already cut to the box, 228 x 323 (456 x 646 for sharp screens), and leave the crop settings out: it then simply fills the box. Otherwise the picture can be cropped and zoomed inside its box with
   --img-w / --img-h (size) and --img-x / --img-y (offset of its top-left), all as percentages of the box. Defaults fill the box.
   <a class="visual-button" href="#section-id">
     <span class="button button--light visual-button__label">Core navigation <svg class="button__arrow" width="6" height="10" aria-hidden="true"><use href="#arrow-small"/></svg></span>
     <span class="visual-button__media"><span class="visual-button__zoom"><img src="…" alt="" style="--img-w:196%; --img-h:300%; --img-x:-64%; --img-y:-123%"></span></span>
   </a>
   aria-current="true" marks the visual button for the section you are in (dark button). */
.visual-button { display: block; text-decoration: none; color: inherit; min-width: 0; }
.visual-button .button { min-width: 0; }   /* the bar fills the visual button's width */
.visual-button__media { display: block; position: relative; height: var(--visual-media-h); overflow: hidden; transition: height .45s cubic-bezier(.2, .7, .2, 1); }
.visual-button__zoom { position: absolute; inset: 0; display: block; overflow: hidden; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }   /* the part that scales on roll-over */
/* overflow: hidden here (not only on the media box) keeps the scaled layer the size of the card. Without it Safari drops the part of an oversized, cropped
   picture (like the wide Portfolio one) that sticks out of the card while it is scaled on roll-over, so the image vanishes. */
.visual-button__zoom { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.visual-button__zoom > img { position: absolute; max-width: none; object-fit: cover; width: var(--img-w, 100%); height: var(--img-h, 100%); left: var(--img-x, 0); top: var(--img-y, 0); }
.visual-button__zoom > .media { display: block; min-height: 0; height: 100%; }
.visual-button:hover .visual-button__zoom, .visual-button:focus-visible .visual-button__zoom { transform: translateZ(0) scale(1.06); }   /* subtle */
.visual-button:focus-visible { outline: 2px solid var(--color-text-on-image); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .visual-button__zoom { transition: none; } .visual-button:hover .visual-button__zoom { transform: translateZ(0); } }