@layer nav-base, demo, nav-responsive, nav-motion;

@layer nav-base {
  [data-nav-menu],
  [data-nav-menu] *,
  [data-nav-menu] *::before,
  [data-nav-menu] *::after {
    box-sizing: border-box;
  }

  [data-nav-menu] {
    --nav-menu-sheet-background: Canvas;
    --nav-menu-sheet-foreground: CanvasText;
    --nav-menu-divider: color-mix(in srgb, currentColor 18%, transparent);
    --nav-menu-sheet-gap: 1rem;
    --nav-menu-duration: 260ms;
    --nav-menu-z-index: 1000;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    position: relative;
  }

  [data-nav-menu] .site-brand {
    color: inherit;
    flex: 0 1 auto;
    font-weight: 700;
    text-decoration: none;
  }

  [data-nav-menu] .nav-menu__toggle {
    display: none;
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    color: inherit;
    background: transparent;
    cursor: pointer;
  }

  [data-nav-menu] .nav-menu__toggle:focus-visible,
  [data-nav-menu] a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }

  [data-nav-menu] .nav-menu__icon,
  [data-nav-menu] .nav-menu__icon::before,
  [data-nav-menu] .nav-menu__icon::after {
    position: absolute;
    width: 18px;
    height: 2px;
    background: currentColor;
    content: "";
  }

  [data-nav-menu] .nav-menu__icon {
    left: 14px;
    top: 22px;
    transform-origin: center;
  }

  [data-nav-menu] .nav-menu__icon::before,
  [data-nav-menu] .nav-menu__icon::after {
    transition: transform 200ms ease-out, opacity 200ms ease;
  }

  [data-nav-menu] .nav-menu__icon::before {
    top: -6px;
    left: 0;
  }

  [data-nav-menu] .nav-menu__icon::after {
    top: 6px;
    left: 0;
  }

  [data-nav-menu] .nav-menu__toggle[aria-expanded="true"] .nav-menu__icon {
    background: transparent;
    transform: rotate(90deg);
  }

  [data-nav-menu] .nav-menu__toggle[aria-expanded="true"]:hover .nav-menu__icon,
  [data-nav-menu] .nav-menu__toggle[aria-expanded="true"]:focus-visible .nav-menu__icon {
    animation: nav-menu-close-hover-rotation 200ms ease-out forwards;
  }

  @keyframes nav-menu-close-hover-rotation {
    from {
      transform: rotate(90deg);
    }

    to {
      transform: rotate(180deg);
    }
  }

  [data-nav-menu] .nav-menu__toggle[aria-expanded="true"] .nav-menu__icon::before {
    transform: translateY(6px) rotate(45deg);
  }

  [data-nav-menu] .nav-menu__toggle[aria-expanded="true"] .nav-menu__icon::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  [data-nav-menu] .site-nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  [data-nav-menu] .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-nav-menu] .site-nav a {
    color: inherit;
    text-decoration: none;
  }

  /* Opt-in links for the enhanced mobile sheet only (for example, "News"). */
  [data-nav-menu] .nav-menu__mobile-only {
    display: none;
  }

  html.nav-menu-scroll-locked {
    overflow: hidden;
    scrollbar-gutter: stable;
    background-color: var(--nav-menu-scrollbar-gutter-background);
  }
}

@layer nav-responsive {
  @media (max-width: 1280px) {
    [data-nav-menu] .site-nav {
      flex-basis: 100%;
      order: 3;
    }

    [data-nav-menu] .site-nav ul {
      justify-content: flex-start;
    }

    [data-nav-menu].nav-menu--enhanced {
      justify-content: space-between;
    }

    [data-nav-menu].nav-menu--enhanced .nav-menu__toggle {
      display: block;
      flex: 0 0 48px;
    }

    [data-nav-menu].nav-menu--enhanced .site-nav {
      --nav-menu-sheet-top: calc(var(--nav-menu-header-bottom, 0px) + var(--nav-menu-sheet-gap));

      position: fixed;
      z-index: var(--nav-menu-z-index);
      inset: var(--nav-menu-sheet-top) 0 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 0.5rem 1.5rem max(2.5rem, env(safe-area-inset-bottom));
      color: var(--nav-menu-sheet-foreground);
      background: var(--nav-menu-sheet-background);
      opacity: 0;
      visibility: hidden;
      clip-path: inset(0 0 100% 0);
      transition:
        opacity var(--nav-menu-duration) ease,
        clip-path var(--nav-menu-duration) ease,
        visibility 0s linear var(--nav-menu-duration);
    }

    [data-nav-menu].nav-menu--enhanced .site-nav.is-open {
      opacity: 1;
      visibility: visible;
      clip-path: inset(0);
      transition:
        opacity var(--nav-menu-duration) ease,
        clip-path var(--nav-menu-duration) ease,
        visibility 0s;
    }

    [data-nav-menu].nav-menu--enhanced .site-nav ul {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      border-top: 1px solid var(--nav-menu-divider);
      translate: 0 -1rem;
      transition: translate var(--nav-menu-duration) ease;
    }

    [data-nav-menu].nav-menu--enhanced .site-nav.is-open ul {
      translate: 0 0;
    }

    [data-nav-menu].nav-menu--enhanced .site-nav li {
      border-bottom: 1px solid var(--nav-menu-divider);
    }

    [data-nav-menu].nav-menu--enhanced .site-nav a {
      display: block;
      padding: 1.125rem 0.75rem;
      color: inherit;
    }

    [data-nav-menu].nav-menu--enhanced .site-nav a:hover,
    [data-nav-menu].nav-menu--enhanced .site-nav a:focus-visible {
      background: color-mix(in srgb, currentColor 8%, transparent);
    }

    [data-nav-menu].nav-menu--enhanced .site-nav .nav-menu__mobile-only {
      display: block;
    }

    [data-nav-menu].nav-menu--enhanced .site-nav li.nav-menu__mobile-only {
      display: list-item;
    }

        /* Opt-in items for desktop (and the no-JS baseline) only. */
  [data-nav-menu].nav-menu--enhanced .site-nav :is(li, div, a).nav-menu__desktop-only {
    display: none;
  }

  }

}

@layer nav-motion {
  @media (prefers-reduced-motion: reduce) {
    [data-nav-menu] .nav-menu__icon,
    [data-nav-menu] .nav-menu__icon::before,
    [data-nav-menu] .nav-menu__icon::after,
    [data-nav-menu] .site-nav,
    [data-nav-menu].nav-menu--enhanced .site-nav,
    [data-nav-menu].nav-menu--enhanced .site-nav.is-open,
    [data-nav-menu] .site-nav ul,
    [data-nav-menu].nav-menu--enhanced .site-nav ul,
    [data-nav-menu].nav-menu--enhanced .site-nav.is-open ul {
      transition: none;
    }

    [data-nav-menu] .nav-menu__toggle[aria-expanded="true"]:hover .nav-menu__icon,
    [data-nav-menu] .nav-menu__toggle[aria-expanded="true"]:focus-visible .nav-menu__icon {
      animation: none;
    }
  }
}

/* @layer demo {
  :root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #20232a;
    background: #f5f4f0;
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: #f5f4f0;
  }

  .skip-link {
    position: absolute;
    z-index: 2000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    background: #20232a;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .site-header {
    --nav-menu-sheet-background: #f5f4f0;
    --nav-menu-sheet-foreground: #20232a;
    --nav-menu-divider: rgb(32 35 42 / 18%);
    --nav-menu-scrollbar-gutter-background: #fff;
    --nav-menu-sheet-gap: 1rem;
    --nav-menu-duration: 260ms;

    padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
    color: #20232a;
    background: #fff;
    box-shadow: 0 2px 12px rgb(32 35 42 / 8%);
  }

  .site-brand {
    font-size: 1.125rem;
    letter-spacing: -0.02em;
  }

  .site-nav a {
    font-size: 0.9375rem;
  }

  .site-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .page-content {
    width: min(100% - 2.5rem, 56rem);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 0;
    line-height: 1.7;
  }

  .page-content h1,
  .page-content h2 {
    line-height: 1.15;
    letter-spacing: -0.035em;
  }

  .page-content h1 {
    max-width: 12ch;
    margin-block: 0.4rem 1rem;
    font-size: clamp(2.5rem, 8vw, 5rem);
  }

  .page-content h2 {
    margin-top: 3rem;
    font-size: 1.75rem;
  }

  .page-content p {
    max-width: 68ch;
  }

  .eyebrow {
    color: #59636f;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}
*/