/* High-contrast accessibility theme. Loaded after studio.css. */

.contrast-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(243, 236, 223, 0.75);
  background: rgba(12, 11, 9, 0.62);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
}

.contrast-toggle__state { font-weight: 700; }
.contrast-toggle__on { display: none; }

.menu .contrast-toggle {
  align-self: flex-start;
  margin: 0 0 1.25rem;
}

html.contrast-more .contrast-toggle__off,
html:not(.contrast-off) .contrast-toggle__off {
  /* state visibility is finalized below */
}

html.contrast-more .contrast-toggle__off { display: none; }
html.contrast-more .contrast-toggle__on { display: inline; }
html.contrast-off .contrast-toggle__on { display: none; }
html.contrast-off .contrast-toggle__off { display: inline; }

@media (prefers-contrast: more) {
  html:not(.contrast-off) .contrast-toggle__off { display: none; }
  html:not(.contrast-off) .contrast-toggle__on { display: inline; }
}

@media (max-width: 520px) {
  .top { flex-wrap: wrap; row-gap: 0.35rem; }
  .top__tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.35rem; }
  .contrast-toggle {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.45rem;
  }
  section[id] { scroll-margin-top: 6.75rem; }
}

html.contrast-more {
  --bg: #ffffff;
  --bg-deep: #ffffff;
  --paper: #0a0a0a;
  --muted: #0a0a0a;
  --metal: #0a0a0a;
  --line: #0a0a0a;
  background: #ffffff;
  color: #0a0a0a;
  color-scheme: light;
}

html.contrast-more body {
  background: #ffffff;
  color: #0a0a0a;
}

html.contrast-more .muted,
html.contrast-more .kicker,
html.contrast-more .statement__sub,
html.contrast-more .screen__by,
html.contrast-more .screen__de,
html.contrast-more .team__role,
html.contrast-more .field label,
html.contrast-more .plate figcaption,
html.contrast-more .footer,
html.contrast-more .legal .prose p,
html.contrast-more .work p,
html.contrast-more .essay p,
html.contrast-more .essay .prose p,
html.contrast-more .team .prose p,
html.contrast-more .hero__note,
html.contrast-more .lede,
html.contrast-more .screen__copy p {
  color: #0a0a0a;
}

html.contrast-more strong {
  color: #0a0a0a !important;
}

html.contrast-more a {
  color: #0a0a0a;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #0a0a0a;
  text-underline-offset: 0.16em;
}

html.contrast-more .top,
html.contrast-more .top.is-solid {
  background: #ffffff;
  color: #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
}

html.contrast-more .menu {
  background: #ffffff;
  color: #0a0a0a;
}

html.contrast-more .hero__copy > * {
  width: fit-content;
  max-width: 100%;
  background: #ffffff;
  color: #0a0a0a;
  padding: 0.08em 0.28em;
  box-shadow: 0.28rem 0 0 #ffffff, -0.28rem 0 0 #ffffff;
}

html.contrast-more .more::after {
  height: 2px;
  background: #0a0a0a;
}

html.contrast-more .stage {
  border: 2px solid #0a0a0a;
}

html.contrast-more .gate {
  background: #ffffff;
  color: #0a0a0a;
}

html.contrast-more .gate p { color: #0a0a0a; }

html.contrast-more .field input,
html.contrast-more .field textarea {
  background: #ffffff;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  padding: 0.7rem 0.65rem 0.75rem;
}

html.contrast-more .field input:focus,
html.contrast-more .field textarea:focus,
html.contrast-more .field input:focus-visible,
html.contrast-more .field textarea:focus-visible {
  border-color: #0a0a0a;
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
}

html.contrast-more .btn,
html.contrast-more .contrast-toggle,
html.contrast-more .top__menu,
html.contrast-more .menu__close,
html.contrast-more .consent__actions .btn {
  background: #ffffff;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  min-height: 44px;
}

html.contrast-more .btn--solid,
html.contrast-more .consent__actions .btn--solid {
  background: #0a0a0a;
  color: #ffffff;
  border: 2px solid #0a0a0a;
}

html.contrast-more .btn:hover,
html.contrast-more .consent__actions .btn:hover,
html.contrast-more .top__menu:hover,
html.contrast-more .menu__close:hover,
html.contrast-more .btn--solid:hover,
html.contrast-more .consent__actions .btn--solid:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #0a0a0a;
}

html.contrast-more :focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px #0a0a0a;
}

html.contrast-more ::selection {
  background: #0a0a0a;
  color: #ffffff;
}

html.contrast-more .consent {
  background: #ffffff;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
}

html.contrast-more .consent .kicker,
html.contrast-more .consent__copy p,
html.contrast-more .consent a,
html.contrast-more .consent__error {
  color: #0a0a0a;
}

html.contrast-more .lang a,
html.contrast-more .lang a:hover,
html.contrast-more .lang a:focus-visible,
html.contrast-more .lang__sep {
  color: #0a0a0a;
}

html.contrast-more .lang a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.2rem;
}

html.contrast-more .lang a[aria-current="page"] {
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #0a0a0a;
}

html.contrast-more .alert {
  border-left: 4px solid #0a0a0a;
  color: #0a0a0a;
}

html.contrast-more .alert--err {
  border-left-color: #0a0a0a;
  font-weight: 700;
}

html.contrast-more .top__nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

html.contrast-more .skip {
  background: #0a0a0a;
  color: #ffffff;
}

@media (prefers-contrast: more) {
  html:not(.contrast-off) {
    --bg: #ffffff;
    --bg-deep: #ffffff;
    --paper: #0a0a0a;
    --muted: #0a0a0a;
    --metal: #0a0a0a;
    --line: #0a0a0a;
    background: #ffffff;
    color: #0a0a0a;
    color-scheme: light;
  }

  html:not(.contrast-off) body {
    background: #ffffff;
    color: #0a0a0a;
  }

  html:not(.contrast-off) .muted,
  html:not(.contrast-off) .kicker,
  html:not(.contrast-off) .statement__sub,
  html:not(.contrast-off) .screen__by,
  html:not(.contrast-off) .screen__de,
  html:not(.contrast-off) .team__role,
  html:not(.contrast-off) .field label,
  html:not(.contrast-off) .plate figcaption,
  html:not(.contrast-off) .footer,
  html:not(.contrast-off) .legal .prose p,
  html:not(.contrast-off) .work p,
  html:not(.contrast-off) .essay p,
  html:not(.contrast-off) .essay .prose p,
  html:not(.contrast-off) .team .prose p,
  html:not(.contrast-off) .hero__note,
  html:not(.contrast-off) .lede,
  html:not(.contrast-off) .screen__copy p {
    color: #0a0a0a;
  }

  html:not(.contrast-off) strong { color: #0a0a0a !important; }

  html:not(.contrast-off) a {
    color: #0a0a0a;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #0a0a0a;
    text-underline-offset: 0.16em;
  }

  html:not(.contrast-off) .top,
  html:not(.contrast-off) .top.is-solid {
    background: #ffffff;
    color: #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
  }

  html:not(.contrast-off) .menu {
    background: #ffffff;
    color: #0a0a0a;
  }

  html:not(.contrast-off) .hero__copy > * {
    width: fit-content;
    max-width: 100%;
    background: #ffffff;
    color: #0a0a0a;
    padding: 0.08em 0.28em;
    box-shadow: 0.28rem 0 0 #ffffff, -0.28rem 0 0 #ffffff;
  }

  html:not(.contrast-off) .more::after {
    height: 2px;
    background: #0a0a0a;
  }

  html:not(.contrast-off) .stage { border: 2px solid #0a0a0a; }

  html:not(.contrast-off) .gate {
    background: #ffffff;
    color: #0a0a0a;
  }

  html:not(.contrast-off) .gate p { color: #0a0a0a; }

  html:not(.contrast-off) .field input,
  html:not(.contrast-off) .field textarea {
    background: #ffffff;
    color: #0a0a0a;
    border: 2px solid #0a0a0a;
    padding: 0.7rem 0.65rem 0.75rem;
  }

  html:not(.contrast-off) .field input:focus,
  html:not(.contrast-off) .field textarea:focus,
  html:not(.contrast-off) .field input:focus-visible,
  html:not(.contrast-off) .field textarea:focus-visible {
    border-color: #0a0a0a;
    outline: 3px solid #0a0a0a;
    outline-offset: 3px;
  }

  html:not(.contrast-off) .btn,
  html:not(.contrast-off) .contrast-toggle,
  html:not(.contrast-off) .top__menu,
  html:not(.contrast-off) .menu__close,
  html:not(.contrast-off) .consent__actions .btn {
    background: #ffffff;
    color: #0a0a0a;
    border: 2px solid #0a0a0a;
    min-height: 44px;
  }

  html:not(.contrast-off) .btn--solid,
  html:not(.contrast-off) .consent__actions .btn--solid {
    background: #0a0a0a;
    color: #ffffff;
    border: 2px solid #0a0a0a;
  }

  html:not(.contrast-off) .btn:hover,
  html:not(.contrast-off) .consent__actions .btn:hover,
  html:not(.contrast-off) .top__menu:hover,
  html:not(.contrast-off) .menu__close:hover,
  html:not(.contrast-off) .btn--solid:hover,
  html:not(.contrast-off) .consent__actions .btn--solid:hover {
    background: #ffffff;
    color: #0a0a0a;
    border-color: #0a0a0a;
  }

  html:not(.contrast-off) :focus-visible {
    outline: 3px solid #0a0a0a;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px #0a0a0a;
  }

  html:not(.contrast-off) ::selection {
    background: #0a0a0a;
    color: #ffffff;
  }

  html:not(.contrast-off) .consent {
    background: #ffffff;
    color: #0a0a0a;
    border: 2px solid #0a0a0a;
  }

  html:not(.contrast-off) .consent .kicker,
  html:not(.contrast-off) .consent__copy p,
  html:not(.contrast-off) .consent a,
  html:not(.contrast-off) .consent__error {
    color: #0a0a0a;
  }

  html:not(.contrast-off) .lang a,
  html:not(.contrast-off) .lang a:hover,
  html:not(.contrast-off) .lang a:focus-visible,
  html:not(.contrast-off) .lang__sep {
    color: #0a0a0a;
  }

  html:not(.contrast-off) .lang a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 0.2rem;
  }

  html:not(.contrast-off) .lang a[aria-current="page"] {
    color: #0a0a0a;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #0a0a0a;
  }

  html:not(.contrast-off) .alert {
    border-left: 4px solid #0a0a0a;
    color: #0a0a0a;
  }

  html:not(.contrast-off) .alert--err {
    border-left-color: #0a0a0a;
    font-weight: 700;
  }

  html:not(.contrast-off) .top__nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  html:not(.contrast-off) .skip {
    background: #0a0a0a;
    color: #ffffff;
  }
}

/* Header mark follows the background: white logo on the dark site, black logo when the page is white. */
html.contrast-more .brand__logo--light { display: none; }
html.contrast-more .brand__logo--dark { display: block; }
html.contrast-more a.brand {
  text-decoration: none;
  color: inherit;
}

@media (prefers-contrast: more) {
  html:not(.contrast-off) .brand__logo--light { display: none; }
  html:not(.contrast-off) .brand__logo--dark { display: block; }
  html:not(.contrast-off) a.brand {
    text-decoration: none;
    color: inherit;
  }
}