.mast .nav a[aria-current="page"] {
  border-bottom-color: currentColor;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.mast.is-solid .nav a[aria-current="page"] {
  color: var(--green-ink);
  border-bottom-color: var(--green);
}

.mast .btn--onDark[aria-current="page"] { background: #fff; color: var(--ink); border-color: #fff; }
.mast.is-solid .btn--onDark[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.navitem { position: relative; display: flex; align-items: center; }
.navitem > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
}
.navitem:hover > a::after, .navitem:focus-within > a::after { transform: translateY(0) rotate(45deg); opacity: 1; }

.subnav {
  position: absolute; top: 100%; left: -16px; z-index: 70;
  min-width: 272px; margin: 0; padding: .45rem 0; list-style: none;
  background: var(--card); border-radius: 4px;
  box-shadow: 0 20px 44px -20px rgba(10,20,15,.42), 0 1px 3px rgba(10,20,15,.10);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.navitem:hover .subnav,
.navitem:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }

.subnav a {
  display: block; padding: .62rem 1.15rem; white-space: nowrap;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .84rem; letter-spacing: .01em; color: var(--ink);
  border-bottom: 0; text-decoration: none;
}
.subnav a:hover, .subnav a:focus-visible { background: rgba(7,118,65,.07); color: var(--green-ink); }
.subnav a[aria-current="page"] { color: var(--green-ink); box-shadow: inset 3px 0 0 var(--green); }

@media (max-width: 1080px) { .navitem { display: none; } }

.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ground);
  overflow-y: auto; -webkit-overflow-scrolling: touch;

  transition: transform .24s cubic-bezier(.22,.61,.36,1);
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.drawer[hidden] { display: none; }
body.drawer-open { overflow: hidden; }

.drawer:not(.is-open) { transform: translateY(-10px); }
.drawer.is-open { transform: none; }

.drawer__in { transition: transform .28s cubic-bezier(.22,.61,.36,1) .04s; padding: 0 var(--gut); }
.drawer:not(.is-open) .drawer__in { transform: translateY(14px); }

.drawer__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gut) 14px;
  background: var(--ground);
  border-bottom: 1px solid var(--hair-strong);
  margin-bottom: clamp(18px, 3vw, 28px);
}

.drawer__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.drawer__brand img { width: 40px; height: 40px; flex: 0 0 auto; }

.drawer__brand .mast__logo--light { display: none !important; }
.drawer__brand .mast__logo--dark { display: block !important; }
.drawer__brand .mast__word {
  display: block; min-width: 0;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; color: var(--ink);
  line-height: 1.25;
}
.drawer__brand .mast__word span {
  display: block; font-variation-settings: "wdth" 100, "wght" 500;
  letter-spacing: .06em; font-size: .68rem; color: var(--secondary); margin-top: .15rem;
}

.drawer__x {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 52px; padding: 0 1.1rem;
  background: var(--ink); color: #fff;
  border: 0; border-radius: 4px;
  cursor: pointer;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.drawer__x:hover, .drawer__x:focus-visible { background: var(--green-ink); }
.drawer__x:active { background: var(--green-ink); }
.drawer__x-glyph { font-size: 1.5rem; line-height: 1; margin-top: -2px; }
.drawer__x-word { display: inline; }

.drawer__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.drawer__list li { border-bottom: 1px solid var(--hair); }
.drawer__list li:last-child { border-bottom: 0; }
.drawer__list a {
  display: flex; align-items: center; min-height: 56px;
  padding: .55rem 0; text-decoration: none; color: var(--ink);
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: 1.3rem; letter-spacing: -.005em;
  -webkit-tap-highlight-color: transparent;
}
.drawer__list li.is-sub a {
  padding-left: 1.1rem; min-height: 48px; font-size: .98rem; font-family: var(--body);
  font-variation-settings: normal; text-transform: none; font-weight: 600; color: var(--secondary);
}

.drawer__list li.is-here > a { color: var(--green-ink); }
.drawer__list li.is-here > a::before {
  content: ""; width: 3px; height: 1.1em; margin-right: .6rem;
  background: var(--green-ink); border-radius: 2px; flex: 0 0 auto;
}
.drawer__list a:active { color: var(--green-ink); }

.drawer__list--util {
  margin-top: 0; margin-bottom: 1.4rem;
  padding-top: 1.1rem; border-top: 1px solid var(--hair-strong);
}
.drawer__list--util li { border-bottom: 0; }
.drawer__list--util a {
  min-height: 44px;
  font-family: var(--body); font-variation-settings: normal; text-transform: none;
  font-weight: 500; font-size: 1rem; color: var(--secondary); padding: .35rem 0;
}
.drawer__cta { width: 100%; justify-content: center; min-height: 54px; }

@media (min-width: 1081px) { .drawer { display: none !important; } }

@media (max-width: 599px) {
  .mast .btn--onDark { display: none; }
}

@media (max-height: 560px) {
  .drawer__x-word { display: none; }
  .drawer__x { padding: 0 .95rem; }
  .drawer__list a { min-height: 48px; font-size: 1.15rem; }
}