.footer,
.header,
body {
  max-width:100%;
}

html,
body {
  overflow-x:clip;
}

[id] {
  scroll-margin-top:116px;
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:1000;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border-radius:4px;
  background:#fff;
  color:#00051d;
  font:500 14px/1.2 "Fira Sans",Arial,sans-serif;
  text-decoration:none;
}

.skip-link:focus {
  width:auto;
  height:auto;
  padding:12px 16px;
  overflow:visible;
  clip-path:none;
  outline:3px solid #17dae5;
  outline-offset:2px;
}

.menu {
  width:46px;
  height:46px;
  padding:0;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(143,211,244,.45);
  border-radius:50%;
  color:#8fd3f4;
  font-family:Arial,sans-serif;
  font-size:0;
  line-height:1;
  cursor:pointer;
}

.menu::before {
  content:"☰";
  font-size:25px;
}

.header.menu-open .menu::before {
  content:"×";
  font-size:31px;
  font-weight:300;
}

.menu:hover,
.menu:focus-visible {
  border-color:#17dae5;
  color:#17dae5;
  outline:none;
}

@media (max-width:900px) {
  [id] {
    scroll-margin-top:94px;
  }

  .header {
    position:sticky;
    overflow:visible;
  }

  .header .menu {
    display:flex;
    position:relative;
    z-index:2;
  }

  .header .nav {
    box-sizing:border-box;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px clamp(24px,7vw,48px) 20px;
    border-top:1px solid rgba(143,211,244,.18);
    border-bottom:1px solid rgba(143,211,244,.28);
    background-color:#00051d !important;
    background-image:url("ornament-bg.jpg") !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    box-shadow:0 18px 30px rgba(0,5,29,.32);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }

  .header.menu-open .nav {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .header .nav a {
    width:100%;
    padding:14px 0;
    border-bottom:1px solid rgba(143,211,244,.16);
    color:#fff;
  }

  .header .nav a:last-of-type {
    border-bottom:0;
  }

  .header .nav a:hover,
  .header .nav a:focus-visible,
  .header .nav a[aria-current="page"] {
    border-color:#8fd3f4;
    color:#8fd3f4;
  }

  .header .nav-symbol {
    display:none;
  }

}

@media (prefers-reduced-motion:reduce) {
  .header .nav {
    transition:none;
  }
}