:root {
  --do-shell-bg: #000;
  --do-shell-fg: #fff;
  --do-shell-muted: rgba(255, 255, 255, .58);
  --do-shell-line: rgba(255, 255, 255, .22);
  --do-shell-accent: #e11a91;
  --do-z-backdrop: 500;
  --do-z-dialog: 600;
  --do-global-menu-width: clamp(104px, 7.45vw, 118px);
  scrollbar-color: rgba(225, 26, 145, .72) #050505;
  scrollbar-width: thin;
}

* {
  scrollbar-color: rgba(225, 26, 145, .72) #050505;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #050505; }
*::-webkit-scrollbar-thumb { background: rgba(225, 26, 145, .72); border: 2px solid #050505; }
*::-webkit-scrollbar-thumb:hover { background: #e11a91; }

do-site-header,
do-site-footer,
do-section-index,
do-grant-contact-dialog,
do-global-menu { display: contents; }

.do-global-menu__panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  width: var(--do-global-menu-width);
  box-sizing: border-box;
  padding-bottom: 62px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  background: rgba(0, 0, 0, .975);
  box-shadow: 22px 0 70px rgba(0, 0, 0, .34);
  transform: translate3d(-100%, 0, 0);
  visibility: hidden;
  transition: transform .52s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .52s;
  will-change: transform;
}

.do-global-menu.is-open .do-global-menu__panel {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition-delay: 0s;
}

html.do-global-menu-open :where(.hud__brand-link, .bandi-shell__logo, .detail-logo, .systems-header__logo) {
  opacity: 0;
  pointer-events: none;
}

.do-global-menu__brand {
  display: grid;
  place-items: center;
  flex: 0 0 clamp(82px, 11vh, 108px);
  padding: 0 .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  text-decoration: none;
}

.do-global-menu__brand img {
  display: block;
  width: min(84px, calc(var(--do-global-menu-width) - 24px));
  height: auto;
}

.do-global-menu__panel nav {
  min-height: 0;
  flex: 1 1 auto;
}

.do-global-menu__list {
  display: grid;
  grid-template-rows: repeat(7, minmax(52px, 1fr));
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.do-global-menu__list li { min-height: 0; }

.do-global-menu__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .42rem;
  width: 100%;
  height: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: .62rem .7rem .62rem clamp(1rem, 1.55vw, 1.45rem);
  border-left: 4px solid transparent;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.do-global-menu__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .045);
}

.do-global-menu__link.is-current {
  border-left-color: var(--do-shell-accent);
  color: var(--do-shell-accent);
  background: linear-gradient(90deg, rgba(225, 26, 145, .13), rgba(225, 26, 145, 0) 82%);
}

.do-global-menu__number {
  font: 500 clamp(.98rem, 1.28vw, 1.2rem)/1 "JetBrains Mono", monospace;
  letter-spacing: -.04em;
}

.do-global-menu__label {
  font: 500 clamp(.58rem, .73vw, .7rem)/1.25 "JetBrains Mono", monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.do-global-menu__toggle {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 112;
  display: grid;
  place-items: center;
  width: var(--do-global-menu-width);
  min-height: 62px;
  padding: .75rem .5rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-right: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: rgba(255, 255, 255, .78);
  background: #000;
  font: 500 .63rem/1 "JetBrains Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.do-global-menu__toggle:hover,
.do-global-menu.is-open .do-global-menu__toggle {
  color: #fff;
  background: #090909;
}

.do-global-menu.is-open .do-global-menu__toggle { color: var(--do-shell-accent); }

.do-global-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 109;
  display: none;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .64);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.do-related-links {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 3.2vw, 3.5rem);
  border-top: 1px solid var(--do-shell-line);
  color: var(--do-shell-fg);
  background: var(--do-shell-bg);
}

.do-related-links__intro { display: grid; gap: .8rem; }
.do-related-links__eyebrow {
  color: var(--do-shell-accent);
  font: 500 .67rem/1.3 "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.do-related-links h2 {
  max-width: 9ch;
  margin: 0;
  font: 800 clamp(2.35rem, 5.4vw, 5.6rem)/.88 "Inter Tight", sans-serif;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.do-related-links nav { display: grid; }
.do-related-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 76px;
  padding: 1rem 0;
  border-top: 1px solid var(--do-shell-line);
  color: var(--do-shell-fg);
  text-decoration: none;
  transition: color .22s ease, padding-left .22s ease;
}
.do-related-links a:last-child { border-bottom: 1px solid var(--do-shell-line); }
.do-related-links a:hover { padding-left: .55rem; color: var(--do-shell-accent); }
.do-related-links a span:first-child {
  font: 700 clamp(1.1rem, 2vw, 1.65rem)/1.05 "Inter Tight", sans-serif;
  letter-spacing: -.025em;
}
.do-related-links a small {
  display: block;
  margin-top: .35rem;
  color: var(--do-shell-muted);
  font: 400 .62rem/1.35 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.do-related-links a i { font: 300 1.7rem/1 "Inter Tight", sans-serif; font-style: normal; }

do-page-transition#route-curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  background: #000;
  pointer-events: none;
  will-change: transform;
}

do-page-transition#route-curtain > img {
  width: min(240px, 46vw);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(220, 30, 140, .34));
}

do-page-transition#route-curtain > span {
  color: rgba(255, 255, 255, .64);
  font: 400 .75rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
}

.do-site-footer {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;
  padding: 2rem clamp(1.25rem, 3.2vw, 3.5rem);
  border-top: 1px solid var(--do-shell-line);
  color: var(--do-shell-muted);
  background: var(--do-shell-bg);
  font: 400 .68rem/1.6 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.do-site-footer > span:first-child { display: grid; gap: .25rem; color: var(--do-shell-fg); }
.do-site-footer small { color: var(--do-shell-muted); font: inherit; }
.do-site-footer__links,
.footer__links { display: flex; flex-wrap: wrap; gap: .7rem 1.35rem; }
.do-site-footer a,
.do-site-footer__links a,
.footer__links a { color: inherit; text-decoration: none; }
.do-site-footer a:hover,
.do-site-footer__links a:hover,
.footer__links a:hover { color: var(--do-shell-accent); }

.detail-footer .do-site-footer__links { display: inline-flex; margin-top: .5rem; }
.bandi-footer .do-site-footer__links { display: inline-flex; margin-top: .35rem; }
.bandi-footer .do-site-footer__links a { color: inherit; }

.do-placeholder-header { position: relative; z-index: 5; }

html.do-dialog-open { overflow: hidden; }

.do-grant-dialog {
  width: min(760px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(820px, calc(100dvh - 2rem));
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: var(--do-shell-fg);
  background: #050505;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .74), 0 0 70px rgba(225, 26, 145, .12);
  isolation: isolate;
  z-index: var(--do-z-dialog);
}

.do-grant-dialog::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(10px);
  z-index: var(--do-z-backdrop);
}

.do-grant-dialog__form {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

.do-grant-dialog__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--do-shell-line);
  color: var(--do-shell-fg);
  background: #050505;
  font: 300 1.8rem/1 "Inter Tight", sans-serif;
  cursor: pointer;
}

.do-grant-dialog__close:hover { color: var(--do-shell-accent); border-color: var(--do-shell-accent); }
.do-grant-dialog__heading { display: grid; gap: .55rem; padding-right: 3.5rem; }
.do-grant-dialog__eyebrow {
  color: var(--do-shell-accent);
  font: 500 .67rem/1.3 "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.do-grant-dialog__heading h2 {
  max-width: 12ch;
  margin: 0;
  font: 800 clamp(2.25rem, 6vw, 4.6rem)/.86 "Inter Tight", sans-serif;
  letter-spacing: -.055em;
}

.do-grant-dialog__heading p {
  max-width: 62ch;
  margin: .35rem 0 0;
  color: rgba(255, 255, 255, .7);
  font: 400 1rem/1.45 "Inter Tight", sans-serif;
}

.do-grant-dialog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.do-grant-dialog__grid .do-grant-dialog__field:last-child { grid-column: 1 / -1; }
.do-grant-dialog__field { display: grid; gap: .45rem; }
.do-grant-dialog__field > span {
  color: rgba(255, 255, 255, .7);
  font: 500 .65rem/1.3 "JetBrains Mono", monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.do-grant-dialog :where(input[type="text"], input[type="email"], textarea) {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: .8rem .9rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: var(--do-shell-fg);
  background: #090909;
  font: 400 1rem/1.35 "Inter Tight", sans-serif;
}

.do-grant-dialog textarea { min-height: 126px; resize: none; }
.do-grant-dialog :where(input, textarea)::placeholder { color: rgba(255, 255, 255, .35); }
.do-grant-dialog :where(input, textarea):focus { border-color: var(--do-shell-accent); }
.do-grant-dialog :where(input, textarea)[aria-invalid="true"] { border-color: #ff6a8c; }
.do-grant-dialog__error { color: #ff89a3; font: 400 .72rem/1.35 "JetBrains Mono", monospace; }
.do-grant-dialog__error[hidden] { display: none; }

.do-grant-dialog__consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  color: rgba(255, 255, 255, .62);
  font: 400 .73rem/1.5 "JetBrains Mono", monospace;
}

.do-grant-dialog__consent input { width: 18px; height: 18px; margin: .05rem 0 0; accent-color: var(--do-shell-accent); }
.do-grant-dialog__consent a { color: var(--do-shell-fg); }
.do-grant-dialog__consent .do-grant-dialog__error { grid-column: 2; }
.do-grant-dialog__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.do-grant-dialog__status {
  min-height: 1.2em;
  margin: 0;
  color: var(--do-shell-muted);
  font: 400 .72rem/1.45 "JetBrains Mono", monospace;
}
.do-grant-dialog__status.is-success { color: #70e0ad; }
.do-grant-dialog__status.is-error { color: #ff89a3; }

.do-grant-dialog__actions { display: flex; justify-content: flex-end; gap: .75rem; }
.do-grant-dialog__actions button {
  min-height: 52px;
  padding: .85rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  color: var(--do-shell-fg);
  background: transparent;
  font: 500 .68rem/1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.do-grant-dialog__actions button:hover { border-color: var(--do-shell-accent); }
.do-grant-dialog__actions button:disabled { cursor: wait; opacity: .66; }
.do-grant-dialog__actions .do-grant-dialog__submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  min-width: 230px;
  border-color: var(--do-shell-accent);
  background: var(--do-shell-accent);
}
.do-grant-dialog__actions .do-grant-dialog__submit:hover { color: #000; background: #fff; border-color: #fff; }
.do-grant-dialog__submit i { font-style: normal; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--do-shell-accent);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  :root { --do-global-menu-width: min(112px, 32vw); }
  html.do-global-menu-open { overflow: hidden; }
  .do-global-menu__backdrop { display: block; }
  .do-global-menu.is-open .do-global-menu__backdrop { opacity: 1; pointer-events: auto; }
  .do-global-menu__panel { box-shadow: 28px 0 80px rgba(0, 0, 0, .62); }
  .do-global-menu__brand { flex-basis: 82px; }
  .do-global-menu__link { padding-left: 1rem; }
  .do-related-links { grid-template-columns: 1fr; gap: 2rem; padding-block: 3.25rem; }
  .do-related-links h2 { max-width: 11ch; }
  .do-related-links a { min-height: 68px; }
  do-page-transition#route-curtain > img { width: min(190px, 52vw); }
  do-page-transition#route-curtain > span { max-width: 82vw; font-size: .625rem; letter-spacing: .2em; }
  .do-site-footer { align-items: flex-start; flex-direction: column; gap: 1rem; padding-block: 1.5rem; }
  .do-grant-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .do-grant-dialog__form { gap: 1rem; padding: 1.35rem 1rem 1rem; }
  .do-grant-dialog__heading { padding-right: 2.8rem; }
  .do-grant-dialog__heading h2 { font-size: clamp(2.15rem, 12vw, 3.25rem); }
  .do-grant-dialog__grid { grid-template-columns: 1fr; }
  .do-grant-dialog__grid .do-grant-dialog__field:last-child { grid-column: auto; }
  .do-grant-dialog__actions { flex-direction: column-reverse; }
  .do-grant-dialog__actions button,
  .do-grant-dialog__actions .do-grant-dialog__submit { width: 100%; min-width: 0; }
}

@media (hover: hover) and (pointer: fine) {
  body:has(#cursor) .do-global-menu :where(a, button) { cursor: none; }
}

@media (prefers-reduced-motion: reduce) {
  .do-global-menu__panel,
  .do-global-menu__link,
  .do-global-menu__toggle,
  .do-global-menu__backdrop { transition: none; }
  .do-related-links a { transition: none; }
  do-page-transition#route-curtain { will-change: auto; }
  .do-grant-dialog, .do-grant-dialog::backdrop { animation: none; transition: none; }
}

@media (forced-colors: active) {
  :root, * { scrollbar-color: auto; }
  *::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
  .do-global-menu__panel,
  .do-global-menu__toggle { border-color: ButtonText; }
  .do-global-menu__link.is-current { border-left-color: Highlight; color: Highlight; }
}

@media (max-height: 650px) {
  .do-global-menu__brand { flex-basis: 68px; }
  .do-global-menu__panel { padding-bottom: 52px; }
  .do-global-menu__toggle { min-height: 52px; }
  .do-global-menu__link { gap: .24rem; padding-block: .35rem; }
  .do-global-menu__number { font-size: .88rem; }
  .do-global-menu__label { font-size: .52rem; }
}

/* Keep the viewport HUD clear of the left global menu and of page footers. */
.hud__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  margin-bottom: .35rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

body:not(.bandi-page):not(.grant-detail):not(.bandi-detail-page):not(.systems-page) .do-site-footer {
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

body:not(.bandi-page):not(.grant-detail):not(.bandi-detail-page):not(.systems-page) .footer {
  left: max(5rem, calc(var(--do-global-menu-width) + 1.5rem));
  right: clamp(13rem, 22vw, 20rem);
  bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
  .hud__status { gap: .3rem; margin-bottom: .25rem; padding-bottom: .4rem; }
  body:not(.bandi-page):not(.grant-detail):not(.bandi-detail-page):not(.systems-page) .footer {
    left: auto;
    right: auto;
    bottom: auto;
  }
}