:root {
  --red: #262626;
  --ink: #262626;
  --blue: #dfdacf;
  --pale: #ffffff;
  --white: #ffffff;
  --line: rgba(38, 38, 38, .22);
  --muted: rgba(38, 38, 38, .76);
}

.wordmark { display: inline-flex; align-items: center; gap: 14px; }
.wordmark .brand-name { color: var(--ink); }
/* Frame the original artboard without redrawing or altering the supplied logo. */
.brand-symbol {
  display: inline-block;
  flex: none;
  width: 24px;
  aspect-ratio: 420 / 896;
  background: url('assets/byond-body-logo.png') no-repeat;
  background-size: 552.142857% auto;
  background-position: 51.343% 51.587%;
  mix-blend-mode: multiply;
}
.chapter-mark.brand-symbol { width: 28px; }
.mobile-menu-trigger { display: none; }
.button-red:hover,
.button-dark:hover:not(:disabled) { background: var(--ink); box-shadow: inset 0 0 0 2px var(--blue); }
.button:disabled { background: var(--blue); border-color: var(--line); color: var(--ink); opacity: .7; }
.size-options label > span,
.quantity,
.detail-link { border-color: var(--line); }
.story-title,
.future-values { border-color: rgba(223, 218, 207, .35); }
.story-title .eyebrow,
.future-values,
.story-body .story-footnote { color: var(--blue); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
.size-options input:focus-visible + span { outline-color: var(--ink); }
.story-section a:focus-visible,
.closing-band a:focus-visible { outline-color: var(--white); }
dialog::backdrop { background: rgba(38, 38, 38, .55); }