.ds-nav{
  --nav-w:   clamp(20.5rem, calc(6.6 * var(--ds-cell, 4.5rem)), 46rem);
  --nav-h:   clamp(3.5rem, calc(.86 * var(--ds-cell, 4.5rem)), 6rem);
  --nav-top: clamp(.75rem, calc(.22 * var(--ds-cell, 4.5rem)), 1.75rem);
}

.ds-nav__bar{
  position: fixed;
  top: var(--nav-top);
  left: 50%;
  z-index: 800;
  translate: -50% 0;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(var(--nav-w), calc(100vw - 2rem));
  height: var(--nav-h);
  padding-inline: calc(.3 * var(--nav-h));

  color: var(--ds-ink);
  background-color: rgb(240 240 240 / .12);
  box-shadow: 0 .5rem 1.6rem rgb(0 0 0 / .12), 0 .1rem .3rem rgb(0 0 0 / .06),
              inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(7px) brightness(1.06) saturate(1.2);
          backdrop-filter: blur(7px) brightness(1.06) saturate(1.2);
  transition: color .3s ease, background-color .3s ease;
  isolation: isolate;
}
.ds-nav.is-dark .ds-nav__bar,
.ds-nav.is-open .ds-nav__bar{ background-color: rgb(16 16 16 / .2); }
.ds-nav.is-red .ds-nav__bar{ background-color: rgb(16 16 16 / .08); }

.ds-nav__bar::before,
.ds-nav__bar::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ds-nav__bar::before{
  background: linear-gradient(180deg,
    rgb(255 255 255 / .18) 0%,
    rgb(255 255 255 / .04) 40%,
    rgb(255 255 255 / 0) 55%,
    rgb(0 0 0 / .03) 100%);
  transition: opacity .5s ease;
}

.ds-nav__bar::after{
  background: radial-gradient(14rem 6rem at var(--nav-mx, 50%) var(--nav-my, 0%),
    rgb(255 255 255 / .32), rgb(255 255 255 / 0) 70%);
  opacity: 0;
  transition: opacity .45s ease;
}
@media (hover: hover){
  .ds-nav__bar:hover::after{ opacity: 1; }
  .ds-nav__bar:hover::before{ opacity: .7; }
}

.ds-nav a,
.ds-nav button{ -webkit-tap-highlight-color: transparent; }

.ds-nav a:focus-visible,
.ds-nav button:focus-visible{
  outline: 2px solid var(--ds-ink);
  outline-offset: 3px;
}
.ds-nav__menu a:focus-visible{ outline-color: var(--ds-paper); }

.ds-nav__logo{
  justify-self: start;
  display: block;
  line-height: 0;
}
.ds-nav__logo img{
  display: block;
  width: auto;
  height: calc(.56 * var(--nav-h));
  filter: invert(.91) drop-shadow(0 0 .3rem rgb(255 255 255 / .75));
  transition: scale .3s var(--ds-ease-out), filter .3s ease;
}
.ds-nav__logo[data-ds-tone="dark"] img,
.ds-nav__logo[data-ds-tone="red"] img{
  filter: drop-shadow(0 0 .3rem rgb(0 0 0 / .7));
}
@media (hover: hover){
  .ds-nav__logo:hover img{ scale: 1.12; }
}

.ds-nav__cta{
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-family: var(--ds-font-alt);
  font-size: max(.9375rem, calc(.27 * var(--nav-h)));
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ds-ink);
  text-decoration: none;
  text-shadow: 0 0 .12em rgb(255 255 255 / .55), 0 0 .7em rgb(255 255 255 / .6);
  transition: color .3s ease, text-shadow .3s ease;
}

.ds-nav__cta[data-ds-tone="dark"],
.ds-nav__cta[data-ds-tone="red"],
.ds-nav.is-open .ds-nav__cta{
  color: var(--ds-paper);
  text-shadow: 0 1px .12em rgb(0 0 0 / .45), 0 0 .7em rgb(0 0 0 / .55);
}
.ds-nav.is-open .ds-nav__logo img{ filter: drop-shadow(0 0 .3rem rgb(0 0 0 / .5)); }
.ds-nav__bar [data-ds-tone="dark"]:focus-visible,
.ds-nav__bar [data-ds-tone="red"]:focus-visible,
.ds-nav.is-open .ds-nav__bar :focus-visible{ outline-color: var(--ds-paper); }
.ds-nav__br{
  display: inline-block;
  transition: translate .35s var(--ds-ease-out), color .2s ease;
}
@media (hover: hover){
  .ds-nav__cta:hover .ds-nav__br{ color: var(--ds-red); }
  .ds-nav__cta:hover .ds-nav__br:first-child{ translate: -.3em 0; }
  .ds-nav__cta:hover .ds-nav__br:last-child{ translate: .3em 0; }
}

.ds-nav__toggle{
  --t: calc(.44 * var(--nav-h));

  justify-self: end;
  position: relative;
  width: var(--t);
  height: var(--t);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--ds-red);
  box-shadow: 0 .15rem .5rem rgb(0 0 0 / .22);
  cursor: pointer;
  transition: background-color .2s ease;
}
.ds-nav__toggle[data-ds-tone="red"]{ background: var(--ds-ink); }
.ds-nav.is-open .ds-nav__toggle{ background: var(--ds-red); }
.ds-nav__toggle::before{
  content: "";
  position: absolute;
  inset: -.7rem;
}
.ds-nav__logo{ position: relative; }
.ds-nav__logo::before{
  content: "";
  position: absolute;
  inset: -.6rem -.8rem;
}

.ds-nav__toggle span{
  position: absolute;
  left: 17%;
  right: 17%;
  top: 50%;
  height: 1px;
  margin-top: -.5px;
  background: var(--ds-paper);
  transition: translate .3s var(--ds-ease-out), rotate .3s var(--ds-ease-out), opacity .2s ease;
}
.ds-nav__toggle span:nth-child(1){ translate: 0 calc(-.2 * var(--t)); }
.ds-nav__toggle span:nth-child(3){ translate: 0 calc( .2 * var(--t)); }

@media (hover: hover){
  .ds-nav__toggle:hover{ background: #c92f2f; }
  .ds-nav__toggle[data-ds-tone="red"]:hover{ background: #333; }
}

.ds-nav .ds-nav__toggle:focus-visible{
  outline: 0;
  background: #b02626;
}

.ds-nav.is-open .ds-nav__toggle span:nth-child(1){ translate: 0 0; rotate: 45deg; }
.ds-nav.is-open .ds-nav__toggle span:nth-child(2){ opacity: 0; }
.ds-nav.is-open .ds-nav__toggle span:nth-child(3){ translate: 0 0; rotate: -45deg; }

.ds-nav__menu{
  position: fixed;
  inset: 0;
  z-index: 790;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-top) + var(--nav-h) + 1.5rem) 1.5rem 10.5rem;

  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.ds-nav.is-open .ds-nav__menu{
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.ds-nav__veil{
  background-color: rgb(0 0 0 / .7);
  background-image: none;
}
.ds-nav__veil::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ds-pixel-tile);
  background-size: calc(12 * 34px) calc(12 * 34px);
  image-rendering: pixelated;
  opacity: .34;
}

.ds-nav__list{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.25rem, 1.2vh, .9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-nav__list a{
  display: inline-flex;
  align-items: flex-start;
  gap: .12em;

  font-family: var(--ds-font-alt);
  font-size: clamp(1.75rem, 1rem + 1.7vw, 2.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: rgb(240 240 240 / .92);
  text-decoration: none;
  text-shadow: 0 1px .5em rgb(0 0 0 / .35);
  transition: color .25s ease;
}

.ds-nav__out{
  width: .42em;
  height: .42em;
  margin-top: .2em;
  flex: none;
}

@media (hover: hover){
  .ds-nav__list a:hover{ color: var(--ds-red); }
}
.ds-nav__list a:focus-visible{ color: var(--ds-red); outline-offset: 6px; }

.ds-nav__list li,
.ds-nav__lang,
.ds-nav__social{
  opacity: 0;
  translate: 0 .9rem;
  transition: opacity .2s ease, translate .2s ease;
}
.ds-nav.is-open .ds-nav__list li,
.ds-nav.is-open .ds-nav__lang,
.ds-nav.is-open .ds-nav__social{
  opacity: 1;
  translate: 0 0;
  transition: opacity .45s ease, translate .55s var(--ds-ease-out);
}
.ds-nav.is-open .ds-nav__list li:nth-child(1){ transition-delay: .06s; }
.ds-nav.is-open .ds-nav__list li:nth-child(2){ transition-delay: .11s; }
.ds-nav.is-open .ds-nav__list li:nth-child(3){ transition-delay: .16s; }
.ds-nav.is-open .ds-nav__list li:nth-child(4){ transition-delay: .21s; }
.ds-nav.is-open .ds-nav__lang{ transition-delay: .26s; }
.ds-nav.is-open .ds-nav__social{ transition-delay: .31s; }

.ds-nav__social{
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 2.75rem);
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  translate: -50% .9rem;
}
.ds-nav.is-open .ds-nav__social{ translate: -50% 0; }

.ds-nav__social a{
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  color: rgb(240 240 240 / .92);
  transition: color .2s ease, translate .25s var(--ds-ease-out);
}
.ds-nav__social svg{ display: block; width: 100%; height: 100%; }
@media (hover: hover){
  .ds-nav__social a:hover{ color: var(--ds-red); translate: 0 -2px; }
}

.ds-nav__lang{
  position: absolute;
  left: 50%;
  bottom: calc(clamp(1.5rem, 5vh, 2.75rem) + 2.15rem + clamp(1.1rem, 3vh, 1.6rem));
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  translate: -50% .9rem;
}
.ds-nav.is-open .ds-nav__lang{ translate: -50% 0; }

.ds-flag{
  position: relative;
  display: block;
  width: 3rem;
  padding: .2rem;
  opacity: .5;
  filter: saturate(.55);
  transition: opacity .2s ease, filter .2s ease, translate .25s var(--ds-ease-out);
}
.ds-flag__img{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ds-flag[aria-current]{
  opacity: 1;
  filter: none;
}
.ds-flag[aria-current]::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.4rem;
  width: 1rem;
  height: 3px;
  translate: -50% 0;
  background: var(--ds-red);
}
.ds-flag:focus-visible{
  opacity: 1;
  filter: none;
  outline: 2px solid var(--ds-paper);
  outline-offset: 3px;
}

.ds-flag__col{
  animation: ds-flag-wave .9s steps(1, end) infinite;
  animation-delay: calc(var(--i) * -.06s);
  animation-play-state: paused;
}
@keyframes ds-flag-wave{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1px); }
}
@media (hover: hover){
  .ds-flag:hover{ opacity: 1; filter: none; translate: 0 -2px; }
  .ds-flag:hover .ds-flag__col{ animation-play-state: running; }
}
.ds-flag:focus-visible .ds-flag__col{ animation-play-state: running; }

@media (prefers-reduced-motion: reduce){
  .ds-nav *,
  .ds-nav *::before,
  .ds-nav *::after{ transition-duration: 0s !important; transition-delay: 0s !important; }
  .ds-flag__col{ animation: none; }
}