.public-site-header {
  min-height: 5.25rem;
  padding: 0 3.25vw;
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3.5rem);
  color: var(--ink, #11110f);
  background: var(--paper, #f2efe7);
  border-bottom: 1px solid var(--ink, #11110f);
  font-family: var(--body, "Onest", "Segoe UI", sans-serif);
}

.public-site-header--overlay {
  position: absolute;
  right: 0;
  left: 0;
  background: transparent;
}

.public-site-brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: inherit;
  font-family: var(--display, "Unbounded", "Arial Narrow", sans-serif);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.public-site-brand:hover { color: inherit; }

.public-site-brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: block;
}

.public-site-menu {
  min-width: 0;
  justify-self: end;
}

.public-site-menu__toggle {
  min-height: 2.75rem;
  padding: 0 .85rem;
  display: none;
  align-items: center;
  gap: .65rem;
  color: var(--ink, #11110f);
  background: transparent;
  border: 1px solid var(--ink, #11110f);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.public-site-menu__toggle::-webkit-details-marker { display: none; }
.public-site-menu__toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.public-site-menu__toggle svg path { transform-origin: 10px 10px; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.public-site-menu[open] .public-site-menu__toggle svg path:first-child { transform: translateY(3px) rotate(45deg); }
.public-site-menu[open] .public-site-menu__toggle svg path:last-child { transform: translateY(-3px) rotate(-45deg); }

.public-site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.8rem, 2vw, 2rem);
  font-family: var(--body, "Onest", "Segoe UI", sans-serif);
  font-size: .82rem;
  font-weight: 600;
}

.public-site-nav > a {
  min-height: 2.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.public-site-nav > a:not(.public-site-access)::after {
  height: 2px;
  position: absolute;
  right: 0;
  bottom: .25rem;
  left: 0;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.public-site-nav > a:hover::after,
.public-site-nav > a:focus-visible::after,
.public-site-nav > a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.public-site-access,
.public-site-nav > .nav-action {
  min-height: 2.75rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white, #fffdf7) !important;
  background: var(--ink, #11110f);
  border: 1px solid var(--ink, #11110f);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.public-site-access:hover,
.public-site-access:focus-visible,
.public-site-nav > .nav-action:hover,
.public-site-nav > .nav-action:focus-visible {
  color: var(--ink, #11110f) !important;
  background: var(--yellow, #f2bd16);
}

.public-site-language {
  min-height: 2.75rem;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(2.7rem, auto));
  overflow: hidden;
  background: var(--paper, #f2efe7);
  border: 1px solid var(--ink, #11110f);
}

.public-site-language button {
  min-width: 2.7rem;
  min-height: 2.65rem;
  padding: 0 .7rem;
  color: var(--ink, #11110f);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ink, #11110f);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

.public-site-language button:last-child { border-right: 0; }
.public-site-language button[aria-pressed="true"] { background: var(--yellow, #f2bd16); }

.public-site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .75rem;
}

@media (min-width: 821px) {
  .public-site-menu:not([open]) > .public-site-nav { display: flex; }
}

@media (max-width: 1080px) {
  .public-site-header { gap: 1rem; }
  .public-site-nav { gap: .8rem; font-size: .76rem; }
  .public-site-language { grid-template-columns: repeat(2, 2.35rem); }
  .public-site-language button { min-width: 2.35rem; padding-inline: .45rem; }
}

@media (max-width: 820px) {
  .public-site-header {
    min-height: 4.5rem;
    padding: 0 1.25rem;
    position: sticky;
  }

  .public-site-header--overlay { position: absolute; }
  .public-site-menu { position: static; }
  .public-site-menu__toggle { display: inline-flex; }
  .public-site-menu:not([open]) > .public-site-nav { display: none; }

  .public-site-nav {
    max-height: calc(100svh - 4.5rem);
    padding: .75rem 1.25rem 1.25rem;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--paper, #f2efe7);
    border-bottom: 1px solid var(--ink, #11110f);
  }

  .public-site-nav > a {
    min-height: 3.4rem;
    padding: .35rem .75rem;
    display: flex !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #11110f) 24%, transparent);
    white-space: normal;
  }

  .public-site-nav > a:nth-of-type(odd) { border-right: 1px solid color-mix(in srgb, var(--ink, #11110f) 24%, transparent); }
  .public-site-nav > a:not(.public-site-access)::after { right: .75rem; bottom: .45rem; left: .75rem; }
  .public-site-language { margin-top: .75rem; justify-self: start; }
  .public-site-access,
  .public-site-nav > .nav-action { margin-top: .75rem; border-bottom: 1px solid var(--ink, #11110f) !important; }
}

@media (max-width: 460px) {
  .public-site-header { padding-inline: .75rem; }
  .public-site-brand { gap: .6rem; font-size: .78rem; }
  .public-site-brand__mark { width: 2.25rem; height: 2.25rem; }
  .public-site-nav { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .public-site-menu__toggle svg path,
  .public-site-nav > a::after { transition-duration: .001ms !important; }
}