.site-head button.menu, .fa-head button.fa-menu, .p-head button.p-menu { background: none; border: 0; color: inherit; font-family: inherit; font-size: 12px; letter-spacing: .18em; min-height: 44px; padding: 8px 0 8px 16px; cursor: pointer; }
html.site-menu-open { overflow: hidden; }
.site-menu-dialog { width: calc(100% - 32px); max-width: 480px; max-height: calc(100dvh - 100px); margin: 76px auto 24px; padding: 20px 24px 24px; color: #f0efe9; background: #0d1517; border: 1px solid rgba(114,200,227,.5); box-shadow: 0 24px 80px #0008; overscroll-behavior: contain; }
.site-menu-dialog::backdrop { background: rgba(0,8,11,.8); backdrop-filter: blur(8px); }
.site-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; color: #72c8e3; }
.site-menu-top .caps { font-size: 10px; letter-spacing: .15em; }
.site-menu-close { width: 44px; height: 44px; color: #f0efe9; border: 1px solid #72c8e366; background: none; font-size: 28px; cursor: pointer; flex-shrink: 0; }
.site-menu-dialog nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; border-top: 1px solid #72c8e333; font-size: clamp(18px, 5.5vw, 25px); font-weight: 700; letter-spacing: -.03em; }
.site-menu-dialog nav a span { color: #72c8e3; font-size: 18px; }
.site-menu-dialog a:focus-visible, .site-menu-dialog button:focus-visible, .site-head button.menu:focus-visible { outline: 2px solid #72c8e3; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .site-menu-dialog[open] { animation: site-menu-in .35s cubic-bezier(.16,1,.3,1); }
  @keyframes site-menu-in { from { opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 12%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
}

/* Mobile navigation: a field-scan assembles the interface, then retracts in reverse. */
@media (max-width: 820px) {
  .site-menu-dialog {
    width: calc(100% - 20px);
    max-width: none;
    height: calc(100dvh - 20px);
    max-height: none;
    margin: 10px;
    padding: 22px 20px 28px;
    overflow: hidden auto;
    background:
      radial-gradient(circle at 78% 32%, transparent 0 17%, rgba(114,200,227,.13) 17.2% 17.45%, transparent 17.7% 27%, rgba(114,200,227,.08) 27.2% 27.45%, transparent 27.7%),
      linear-gradient(145deg, rgba(114,200,227,.12), transparent 38%),
      #081113;
    border-color: rgba(114,200,227,.62);
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 28px 100px rgba(0,0,0,.72);
  }
  .site-menu-dialog::before {
    content: '';
    position: fixed;
    z-index: 0;
    inset: 10px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 47%, rgba(114,200,227,.5) 49.5%, rgba(230,249,255,.86) 50%, rgba(114,200,227,.25) 50.5%, transparent 53%);
    opacity: 0;
  }
  .site-menu-dialog::after {
    content: 'RE:CAST / NAVIGATION SYSTEM';
    position: fixed;
    z-index: 0;
    right: 19px;
    bottom: 31px;
    color: rgba(114,200,227,.55);
    font-size: 8px;
    letter-spacing: .2em;
    writing-mode: vertical-rl;
    pointer-events: none;
  }
  .site-menu-top, .site-menu-dialog nav { position: relative; z-index: 2; }
  .site-menu-top { min-height: 58px; padding-bottom: 24px; }
  .site-menu-top::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 46px;
    height: 2px;
    background: #72c8e3;
    box-shadow: 54px 0 rgba(114,200,227,.22), 64px 0 rgba(114,200,227,.12);
  }
  .site-menu-close {
    position: relative;
    border-color: rgba(114,200,227,.62);
    color: transparent;
  }
  .site-menu-close::before, .site-menu-close::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 21px;
    width: 20px;
    height: 1px;
    background: #f0efe9;
  }
  .site-menu-close::before { transform: rotate(45deg); }
  .site-menu-close::after { transform: rotate(-45deg); }
  .site-menu-dialog nav { display: grid; align-content: center; min-height: calc(100% - 92px); }
  .site-menu-dialog nav a {
    position: relative;
    padding: clamp(19px, 5.2vh, 34px) 4px;
    font-size: clamp(24px, 8vw, 38px);
    letter-spacing: -.045em;
  }
  .site-menu-dialog nav a::before {
    content: '0' counter(menu-item);
    counter-increment: menu-item;
    margin-right: 14px;
    color: rgba(114,200,227,.72);
    font-size: 9px;
    letter-spacing: .14em;
  }
  .site-menu-dialog nav { counter-reset: menu-item; }
  .site-menu-dialog nav a span { margin-left: auto; }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .site-menu-dialog[open] {
    animation: menu-field-open .72s cubic-bezier(.16,1,.3,1) both;
  }
  .site-menu-dialog[open]::backdrop {
    animation: menu-backdrop-in .55s ease both;
  }
  .site-menu-dialog[open]::before {
    animation: menu-scan 1s .08s cubic-bezier(.2,.75,.25,1) both;
  }
  .site-menu-dialog[open] .site-menu-top {
    animation: menu-meta-in .55s .28s cubic-bezier(.16,1,.3,1) both;
  }
  .site-menu-dialog[open] nav a {
    animation: menu-link-in .68s cubic-bezier(.16,1,.3,1) both;
  }
  .site-menu-dialog[open] nav a:nth-child(1) { animation-delay: .25s; }
  .site-menu-dialog[open] nav a:nth-child(2) { animation-delay: .32s; }
  .site-menu-dialog[open] nav a:nth-child(3) { animation-delay: .39s; }
  .site-menu-dialog[open] nav a:nth-child(4) { animation-delay: .46s; }
  .site-menu-dialog[open] nav a:nth-child(5) { animation-delay: .53s; }
  .site-menu-dialog[open] .site-menu-close { animation: menu-close-lock .6s .42s cubic-bezier(.16,1,.3,1) both; }

  .site-menu-dialog[open].is-closing {
    animation: menu-field-close .56s cubic-bezier(.7,0,.84,0) both;
  }
  .site-menu-dialog[open].is-closing::backdrop { animation: menu-backdrop-out .56s ease both; }
  .site-menu-dialog[open].is-closing::before { animation: menu-scan-out .48s ease-in both; }
  .site-menu-dialog[open].is-closing .site-menu-top { animation: menu-meta-out .3s ease-in both; }
  .site-menu-dialog[open].is-closing nav a { animation: menu-link-out .3s ease-in both; }
  .site-menu-dialog[open].is-closing nav a:nth-child(1) { animation-delay: .2s; }
  .site-menu-dialog[open].is-closing nav a:nth-child(2) { animation-delay: .16s; }
  .site-menu-dialog[open].is-closing nav a:nth-child(3) { animation-delay: .12s; }
  .site-menu-dialog[open].is-closing nav a:nth-child(4) { animation-delay: .08s; }
  .site-menu-dialog[open].is-closing nav a:nth-child(5) { animation-delay: 0s; }

  @keyframes menu-field-open {
    0% { opacity: 0; transform: scale(.985) skewY(-1deg); clip-path: polygon(0 0, 18% 0, 0 18%); }
    38% { opacity: 1; }
    100% { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  }
  @keyframes menu-field-close {
    0% { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    100% { opacity: 0; transform: scale(.985) skewY(1deg); clip-path: polygon(100% 82%, 100% 100%, 82% 100%); }
  }
  @keyframes menu-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes menu-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes menu-scan { 0% { opacity: 0; transform: translateY(-65%); } 25% { opacity: .8; } 100% { opacity: 0; transform: translateY(65%); } }
  @keyframes menu-scan-out { 0% { opacity: 0; transform: translateY(55%); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateY(-55%); } }
  @keyframes menu-meta-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes menu-meta-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes menu-link-in { from { opacity: 0; transform: translateX(34px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
  @keyframes menu-link-out { to { opacity: 0; transform: translateX(-22px); clip-path: inset(0 100% 0 0); } }
  @keyframes menu-close-lock { from { opacity: 0; transform: rotate(-90deg) scale(.65); } to { opacity: 1; transform: none; } }
}