/* GTV header menu as physical keys: graphite keycaps with a bright top edge and a dark side wall, a sheen that follows the pointer,
   a press that travels 4px, and the key of the page you are on stays latched down, lit gold, with a green LED.
   Pure CSS 3D lighting: no canvas, no layout change, nothing for search engines to miss. Desktop header and the phone menu.
   Everything is scoped to html.gtv-keys and is off in the site's high-contrast mode. */
@media (min-width: 922px) {
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 { gap: 10px !important; }

  /* every key: a graphite keycap with a bright top edge, a dark side wall, and a sheen that follows the pointer */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2),
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    --edge: #05060a; --edge2: rgba(0, 0, 0, .40); --f1: #3a4050; --f2: #161920; --txt: #f7f3e8; --sheen: rgba(255, 255, 255, .22); --line: rgba(255, 255, 255, .13); --mx: 50%; --my: -30%;
    position: relative !important; border-radius: 12px !important; border: 1px solid var(--line) !important;
    background:
      radial-gradient(96px 48px at var(--mx) var(--my), var(--sheen), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, var(--f1), var(--f2)) !important;
    color: var(--txt) !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .7) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -3px 5px rgba(0, 0, 0, .45),
      0 4px 0 var(--edge), 0 5px 0 var(--edge2), 0 11px 15px -2px rgba(10, 12, 22, .42) !important;
    transform: translateY(0) !important;
    transition: transform .11s cubic-bezier(.2, .8, .3, 1), box-shadow .11s cubic-bezier(.2, .8, .3, 1), color .15s, filter .2s !important;
    -webkit-tap-highlight-color: transparent; user-select: none;
  }

  /* hover: the key lifts, lights up and its text turns gold */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2):hover {
    --f1: #4a5163; --f2: #1c1f28; --txt: #ffd679; --sheen: rgba(255, 224, 150, .32);
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 5px rgba(0, 0, 0, .45),
      0 5px 0 var(--edge), 0 6px 0 var(--edge2), 0 15px 20px -3px rgba(10, 12, 22, .48) !important;
  }
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link:hover > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .12),
      0 5px 0 var(--edge), 0 6px 0 var(--edge2), 0 15px 20px -3px rgba(10, 12, 22, .40) !important;
  }

  /* pressed by the pointer or a finger, or just clicked and on its way to the page */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2):active, html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2).is-pressing,
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link:active > .ast-custom-button:not(#gtvk1):not(#gtvk2), html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link.is-pressing > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    transform: translateY(4px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 3px 7px rgba(0, 0, 0, .55),
      0 0 0 var(--edge), 0 1px 0 var(--edge2), 0 2px 4px -1px rgba(10, 12, 22, .4) !important;
  }

  /* the page you are on: the key stays latched down, its face lit gold, with a green LED */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item.current-menu-item > a.menu-link:not(#gtvk1):not(#gtvk2),
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item.current-menu-ancestor > a.menu-link:not(#gtvk1):not(#gtvk2),
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item.current_page_item > a.menu-link:not(#gtvk1):not(#gtvk2) {
    --txt: #2b1d03; --edge: #8a6410; --sheen: rgba(255, 252, 230, .75); --line: rgba(120, 80, 0, .65);
    transform: translateY(4px) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important;
    background:
      radial-gradient(96px 48px at var(--mx) var(--my), var(--sheen), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, #efbb3c, #ffe08c 66%) !important;
    box-shadow:
      inset 0 3px 8px rgba(120, 76, 0, .50), inset 0 1px 0 rgba(120, 80, 0, .35),
      0 0 0 var(--edge), 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px -1px rgba(150, 100, 10, .45), 0 0 22px rgba(255, 184, 38, .50) !important;
  }
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item.current-menu-item > a.menu-link:not(#gtvk1):not(#gtvk2)::after,
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item.current-menu-ancestor > a.menu-link:not(#gtvk1):not(#gtvk2)::after,
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item.current_page_item > a.menu-link:not(#gtvk1):not(#gtvk2)::after {
    content: "" !important; position: absolute !important; top: 5px; inset-inline-end: 7px; width: 6px; height: 6px; border-radius: 50%;
    background: #35ff95; box-shadow: 0 0 6px 2px rgba(40, 255, 140, .85), 0 0 0 1px rgba(0, 90, 40, .55);
  }

  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2):focus-visible, html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link:focus-visible > .ast-custom-button:not(#gtvk1):not(#gtvk2) { outline: 3px solid #ffbf2f !important; outline-offset: 3px !important; }

  /* the contact key stands apart: gold */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    --edge: #8a6410; --edge2: rgba(90, 60, 0, .35); --f1: #ffd873; --f2: #e9a91d; --txt: #2b1d03; --sheen: rgba(255, 255, 255, .55); --line: rgba(255, 240, 190, .8);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important;
    border: 1px solid var(--line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 5px rgba(120, 80, 0, .16),
      0 4px 0 var(--edge), 0 5px 0 var(--edge2), 0 11px 15px -2px rgba(10, 12, 22, .36) !important;
  }
  @media (prefers-reduced-motion: reduce) { html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2), html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) { transition: none !important; } }
  html.gtv-keys[data-gtv-motion="off"]:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header #ast-hf-menu-1 > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2), html.gtv-keys[data-gtv-motion="off"]:not(.gtv-a11y-contrast) body #page #masthead #ast-desktop-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) { transition: none !important; }
}
@media (max-width: 921px) {
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile { gap: 12px !important; }

  /* every key: a graphite keycap with a bright top edge, a dark side wall, and a sheen that follows the pointer */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2),
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    --edge: #05060a; --edge2: rgba(0, 0, 0, .40); --f1: #3a4050; --f2: #161920; --txt: #f7f3e8; --sheen: rgba(255, 255, 255, .22); --line: rgba(255, 255, 255, .13); --mx: 50%; --my: -30%;
    position: relative !important; border-radius: 12px !important; border: 1px solid var(--line) !important;
    background:
      radial-gradient(96px 48px at var(--mx) var(--my), var(--sheen), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, var(--f1), var(--f2)) !important;
    color: var(--txt) !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .7) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -3px 5px rgba(0, 0, 0, .45),
      0 4px 0 var(--edge), 0 5px 0 var(--edge2), 0 11px 15px -2px rgba(10, 12, 22, .42) !important;
    transform: translateY(0) !important;
    transition: transform .11s cubic-bezier(.2, .8, .3, 1), box-shadow .11s cubic-bezier(.2, .8, .3, 1), color .15s, filter .2s !important;
    -webkit-tap-highlight-color: transparent; user-select: none;
  }

  /* hover: the key lifts, lights up and its text turns gold */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2):hover {
    --f1: #4a5163; --f2: #1c1f28; --txt: #ffd679; --sheen: rgba(255, 224, 150, .32);
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 5px rgba(0, 0, 0, .45),
      0 5px 0 var(--edge), 0 6px 0 var(--edge2), 0 15px 20px -3px rgba(10, 12, 22, .48) !important;
  }
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link:hover > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .12),
      0 5px 0 var(--edge), 0 6px 0 var(--edge2), 0 15px 20px -3px rgba(10, 12, 22, .40) !important;
  }

  /* pressed by the pointer or a finger, or just clicked and on its way to the page */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2):active, html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2).is-pressing,
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link:active > .ast-custom-button:not(#gtvk1):not(#gtvk2), html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link.is-pressing > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    transform: translateY(4px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 3px 7px rgba(0, 0, 0, .55),
      0 0 0 var(--edge), 0 1px 0 var(--edge2), 0 2px 4px -1px rgba(10, 12, 22, .4) !important;
  }

  /* the page you are on: the key stays latched down, its face lit gold, with a green LED */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item.current-menu-item > a.menu-link:not(#gtvk1):not(#gtvk2),
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item.current-menu-ancestor > a.menu-link:not(#gtvk1):not(#gtvk2),
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item.current_page_item > a.menu-link:not(#gtvk1):not(#gtvk2) {
    --txt: #2b1d03; --edge: #8a6410; --sheen: rgba(255, 252, 230, .75); --line: rgba(120, 80, 0, .65);
    transform: translateY(4px) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important;
    background:
      radial-gradient(96px 48px at var(--mx) var(--my), var(--sheen), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, #efbb3c, #ffe08c 66%) !important;
    box-shadow:
      inset 0 3px 8px rgba(120, 76, 0, .50), inset 0 1px 0 rgba(120, 80, 0, .35),
      0 0 0 var(--edge), 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px -1px rgba(150, 100, 10, .45), 0 0 22px rgba(255, 184, 38, .50) !important;
  }
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item.current-menu-item > a.menu-link:not(#gtvk1):not(#gtvk2)::after,
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item.current-menu-ancestor > a.menu-link:not(#gtvk1):not(#gtvk2)::after,
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item.current_page_item > a.menu-link:not(#gtvk1):not(#gtvk2)::after {
    content: "" !important; position: absolute !important; top: 50%; inset-inline-end: 16px; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%;
    background: #35ff95; box-shadow: 0 0 6px 2px rgba(40, 255, 140, .85), 0 0 0 1px rgba(0, 90, 40, .55);
  }

  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2):focus-visible, html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link:focus-visible > .ast-custom-button:not(#gtvk1):not(#gtvk2) { outline: 3px solid #ffbf2f !important; outline-offset: 3px !important; }

  /* the contact key stands apart: gold */
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) {
    --edge: #8a6410; --edge2: rgba(90, 60, 0, .35); --f1: #ffd873; --f2: #e9a91d; --txt: #2b1d03; --sheen: rgba(255, 255, 255, .55); --line: rgba(255, 240, 190, .8);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important;
    border: 1px solid var(--line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 5px rgba(120, 80, 0, .16),
      0 4px 0 var(--edge), 0 5px 0 var(--edge2), 0 11px 15px -2px rgba(10, 12, 22, .36) !important;
  }
  @media (prefers-reduced-motion: reduce) { html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2), html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) { transition: none !important; } }
  html.gtv-keys[data-gtv-motion="off"]:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile > li.menu-item > a.menu-link:not(#gtvk1):not(#gtvk2), html.gtv-keys[data-gtv-motion="off"]:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header .ast-custom-button-link > .ast-custom-button:not(#gtvk1):not(#gtvk2) { transition: none !important; }
  html.gtv-keys:not(.gtv-a11y-contrast) body #page #masthead #ast-mobile-header #ast-hf-menu-1-mobile { padding-bottom: 10px !important; }
}
