@layer olga-home-navigation {
  .olga-home-navigation {
    --olga-home-canvas: var(--wp--preset--color--canvas);
    --olga-home-ink: var(--wp--preset--color--contrast);
    --olga-home-accent: var(--wp--preset--color--link);
    --olga-home-line: color-mix(in oklch, var(--olga-home-ink) 18%, var(--olga-home-canvas));
    color: var(--olga-home-ink);
    background: var(--olga-home-canvas);
    font: 400 1rem/1.5 var(--wp--preset--font-family--body);
    max-inline-size: var(--wp--style--global--wide-size);
    border-block-end: 1px solid var(--olga-home-line);
    margin-inline: auto;
    padding-block: 1rem 2.5rem;
    container: olga-home-navigation / inline-size;

    @media (width <= 45rem) {
      padding-block-start: 3rem;
    }

    & :is(h2, p, ul) {
      margin: 0;
      padding: 0;
    }

    & :is(h2, span) {
      overflow-wrap: break-word;
    }

    & > header {
      text-align: center;
      margin-block-end: .9rem;
    }

    & h2 {
      font: 400 clamp(1.4rem, 1.1rem + 1.4cqi, 2.2rem)/1.22 var(--wp--preset--font-family--display);
      text-wrap: balance;
      margin-block-start: .6rem;
    }

    & .olga-home-navigation__eyebrow {
      font: 400 .75rem/1.4 var(--wp--preset--font-family--ui);
      color: var(--wp--preset--color--muted);
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    & ul {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      list-style: none;
      display: grid;
    }

    & li {
      display: grid;
    }

    & a {
      text-align: center;
      color: inherit;
      background: var(--olga-home-canvas);
      isolation: isolate;
      flex-direction: column;
      align-items: center;
      padding: 1rem .25rem;
      text-decoration: none;
      display: flex;
    }

    & .olga-home-navigation__art {
      aspect-ratio: 1;
      mix-blend-mode: multiply;
      background-image: url("../illustrations/home-navigation-pencil.webp");
      background-repeat: no-repeat;
      background-size: 200% 200%;
      inline-size: min(100%, 11rem);
      display: block;
    }

    & .olga-home-navigation__globe {
      background-position: 0 0;
    }

    & .olga-home-navigation__key {
      background-position: 100% 0;
    }

    & .olga-home-navigation__book {
      background-position: 0 100%;
    }

    & .olga-home-navigation__gift {
      background-position: 100% 100%;
    }

    & .olga-home-navigation__copy {
      flex-direction: column;
      flex: 1;
      align-items: center;
      inline-size: 100%;
      min-inline-size: 0;
      display: flex;
    }

    & .olga-home-navigation__name {
      font: 400 clamp(1.25rem, .95rem + 1.4cqi, 2rem)/1.3 var(--wp--preset--font-family--display);
      padding-block-end: .15rem;
      position: relative;
    }

    & .olga-home-navigation__name:after {
      content: "";
      background: var(--olga-home-accent);
      transform-origin: 0;
      block-size: 1px;
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      transform: scaleX(0);
    }

    & .olga-home-navigation__description {
      color: var(--wp--preset--color--muted);
      text-wrap: pretty;
      margin-block-start: .4rem;
      font-size: 1rem;
      line-height: 1.4;
    }

    & .olga-home-navigation__invitation {
      color: var(--olga-home-accent);
      font: 400 .85rem/1.4 var(--wp--preset--font-family--ui);
      margin-block-start: auto;
      padding-block-start: .9rem;
    }

    & .olga-home-navigation__invitation span {
      padding-inline-start: .2rem;
      display: inline-block;
    }

    & a:focus-visible {
      outline: 2px solid var(--olga-home-accent);
      outline-offset: 4px;
    }

    & a:focus-visible .olga-home-navigation__name {
      color: var(--olga-home-accent);
    }

    & a:focus-visible .olga-home-navigation__name:after {
      transform: scaleX(1);
    }

    @container olga-home-navigation (width <= 38rem) {
      & ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem .6rem;
      }

      & a {
        padding-block: .5rem;
      }

      & .olga-home-navigation__art {
        inline-size: min(100%, 9rem);
      }

      & .olga-home-navigation__name {
        font-size: clamp(1.15rem, 1rem + 1cqi, 1.55rem);
      }
    }

    @container olga-home-navigation (width <= 18rem) {
      & ul {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      & a:hover .olga-home-navigation__name {
        color: var(--olga-home-accent);
      }

      & a:hover .olga-home-navigation__name:after {
        transform: scaleX(1);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      & :is(.olga-home-navigation__art, .olga-home-navigation__invitation span) {
        transition: transform .24s ease-out;
      }

      & a:focus-visible .olga-home-navigation__invitation span {
        transform: translateX(4px);
      }

      @media (hover: hover) and (pointer: fine) {
        & a:hover .olga-home-navigation__art {
          transform: translateY(-4px) rotate(-2deg);
        }

        & a:hover .olga-home-navigation__invitation span {
          transform: translateX(4px);
        }
      }
    }

    @media (forced-colors: active) {
      & a {
        border: 1px solid linktext;
      }

      & .olga-home-navigation__name {
        text-decoration: underline;
      }
    }

    @media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) and (view-timeline-name: --olga-home-choice) and (animation-range: entry 0% cover 40%) {
        & li {
          view-timeline: --olga-home-choice block;
        }

        & .olga-home-navigation__art {
          animation: 1s linear both olga-home-settle;
          animation-timeline: --olga-home-choice;
          animation-range: entry cover 40%;
        }

        & .olga-home-navigation__name:after {
          animation: 1s linear both olga-home-pencil-line;
          animation-timeline: --olga-home-choice;
          animation-range: entry 20% cover 48%;
        }

        & a:focus-visible .olga-home-navigation__name:after {
          opacity: 1;
          animation: none;
          transform: scaleX(1);
        }
      }
    }
  }

  @keyframes olga-home-settle {
    from {
      opacity: .82;
      transform: translateY(10px) rotate(-1.5deg);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes olga-home-pencil-line {
    0% {
      opacity: 0;
      transform: scaleX(0);
    }

    45%, 70% {
      opacity: 1;
      transform: scaleX(1);
    }

    100% {
      opacity: 0;
      transform: scaleX(1);
    }
  }
}

.olga-home-navigation, .olga-home-navigation :where(header, h2, p, ul, li, a, span), .olga-home-navigation a:is(:hover, :focus-visible) {
  all: revert-layer;
}