/* Bryant McGill brand blue, sampled from the primary logo artwork. */
:root,
body,
body.theme-light {
  --bryant-blue: #0258ea;
  --bryant-blue-hover: #0148c8;
  --bryant-blue-soft: rgba(2, 88, 234, 0.12);
  --accent-h: 217;
  --accent-s: 98%;
  --accent-l: 46%;
  --interactive-accent: var(--bryant-blue);
  --interactive-accent-hover: var(--bryant-blue-hover);
  --interactive-accent-rgb: 2, 88, 234;
  --text-accent: var(--bryant-blue);
  --text-accent-hover: var(--bryant-blue-hover);
  --link-color: var(--bryant-blue);
  --link-color-hover: var(--bryant-blue-hover);
  --link-external-color: var(--bryant-blue);
  --link-external-color-hover: var(--bryant-blue-hover);
  --link-unresolved-color: #315f9f;
  --checkbox-color: var(--bryant-blue);
  --checkbox-color-hover: var(--bryant-blue-hover);
  --tag-color: var(--bryant-blue-hover);
  --tag-background: var(--bryant-blue-soft);
  --tag-background-hover: rgba(2, 88, 234, 0.2);
}

body.theme-dark {
  --bryant-blue-link: #6bb2ff;
  --bryant-blue-link-hover: #9acaff;
  --bryant-blue-soft: rgba(69, 151, 255, 0.18);
  --interactive-accent: #0258ea;
  --interactive-accent-hover: #146cff;
  --interactive-accent-rgb: 2, 88, 234;
  --text-accent: var(--bryant-blue-link);
  --text-accent-hover: var(--bryant-blue-link-hover);
  --link-color: var(--bryant-blue-link);
  --link-color-hover: var(--bryant-blue-link-hover);
  --link-external-color: var(--bryant-blue-link);
  --link-external-color-hover: var(--bryant-blue-link-hover);
  --link-unresolved-color: #83baff;
  --checkbox-color: #146cff;
  --checkbox-color-hover: #3482ff;
  --tag-color: #9acaff;
  --tag-background: var(--bryant-blue-soft);
  --tag-background-hover: rgba(69, 151, 255, 0.28);
}

::selection {
  background: rgba(2, 88, 234, 0.24);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--interactive-accent);
}

/* ============================================================
   Bryant McGill typography and ambient Publish ornaments
   ============================================================ */
:root,
body,
body.theme-light {
  --bmg-font-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bmg-font-label: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bmg-px-1: #0a35c8;
  --bmg-px-2: #0258ea;
  --bmg-px-3: #2f9dff;
  --bmg-px-4: #7ecbff;
  --bmg-glow: rgba(20, 90, 220, 0.42);
  --bmg-mark-face-a: #082a96;
  --bmg-mark-face-b: #0258ea;
  --bmg-mark-face-c: #62ceff;
  --bmg-mark-rim: rgba(126, 203, 255, 0.72);
  --bmg-watermark-opacity: 0.249;
  --bmg-watermark-active-opacity: 0.249;
  --bmg-field-opacity: 0.42;
}

body.theme-dark {
  --bmg-px-1: #1544ff;
  --bmg-px-2: #2b7fff;
  --bmg-px-3: #49b8ff;
  --bmg-px-4: #8ad9ff;
  --bmg-glow: rgba(60, 140, 255, 0.55);
  --bmg-mark-face-a: #061a65;
  --bmg-mark-face-b: #083fb7;
  --bmg-mark-face-c: #187dff;
  --bmg-mark-rim: rgba(73, 184, 255, 0.55);
  --bmg-watermark-opacity: 0.122;
  --bmg-watermark-active-opacity: 0.122;
  --bmg-field-opacity: 0.6;
}

body {
  background: var(--background-primary);
}

.published-container,
.markdown-preview-view,
.markdown-rendered {
  background: transparent;
}

.published-container {
  position: relative;
  z-index: 1;
  font-family: var(--bmg-font-text);
}

.markdown-preview-view,
.markdown-rendered {
  font-family: var(--bmg-font-text);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0;
}

.markdown-preview-view h1,
.markdown-rendered h1,
.markdown-preview-view h2,
.markdown-rendered h2,
.markdown-preview-view h3,
.markdown-rendered h3 {
  font-family: var(--bmg-font-text);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: pretty;
}

.markdown-preview-view h1,
.markdown-rendered h1 {
  margin-bottom: 0.45em;
  font-size: 2.55em;
  color: transparent;
  background: linear-gradient(
    112deg,
    var(--text-normal) 0%,
    var(--text-normal) 38%,
    #327eea 76%,
    #68c7ff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.markdown-preview-view h2,
.markdown-rendered h2 {
  font-size: 1.7em;
}

.markdown-preview-view h3,
.markdown-rendered h3 {
  font-size: 1.25em;
  letter-spacing: -0.01em;
}

.site-body-left-column-site-name,
.published-section-header,
.graph-title,
.site-footer {
  font-family: var(--bmg-font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-body-left-column-site-name {
  font-size: 13px;
  letter-spacing: 0.18em;
}

.published-section .tree-item-self,
.outline-view-outer {
  font-family: var(--bmg-font-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.markdown-preview-view p,
.markdown-rendered p {
  text-wrap: pretty;
}

.markdown-preview-view strong,
.markdown-rendered strong {
  font-weight: 600;
}

.markdown-preview-view blockquote,
.markdown-rendered blockquote {
  font-style: italic;
  letter-spacing: -0.005em;
}

#bmg-watermark {
  position: fixed;
  top: 120px;
  left: -16px;
  z-index: 2;
  width: 320px;
  height: 460px;
  opacity: var(--bmg-watermark-opacity);
  pointer-events: none;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

#bmg-watermark.bmg-is-active {
  opacity: var(--bmg-watermark-active-opacity);
}

body.theme-dark #bmg-watermark {
  filter: brightness(1.22) saturate(1.08);
}

#bmg-watermark svg {
  display: block;
  overflow: visible;
}

#bmg-watermark [data-bmg-glyph] {
  filter: brightness(1.48) saturate(1.04);
}

#bmg-watermark.bmg-is-active [data-bmg-glyph] {
  filter: brightness(1.48) saturate(1.04);
}

#bmg-watermark .bmg-mark-texture {
  display: block;
  transition:
    opacity 0.5s ease,
    filter 0.5s ease;
}

#bmg-watermark .bmg-mark-texture--dark {
  opacity: 0;
  filter: brightness(1.05) saturate(1);
}

#bmg-watermark .bmg-mark-texture--light {
  opacity: 0.96;
  filter: brightness(1.08) saturate(1.04);
}

#bmg-watermark.bmg-is-active .bmg-mark-texture--dark {
  opacity: 0;
  filter: brightness(1.05) saturate(1);
}

#bmg-watermark.bmg-is-active .bmg-mark-texture--light {
  opacity: 0.96;
  filter: brightness(1.08) saturate(1.04);
}

#bmg-field {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(1040px, 80vw);
  height: min(760px, 88vh);
  overflow: hidden;
  opacity: var(--bmg-field-opacity);
  pointer-events: none;
}

#bmg-field .bmg-stage,
#bmg-field .bmg-slab {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

#bmg-field .bmg-stage {
  perspective: 900px;
  perspective-origin: 88% 80%;
}

#bmg-field .bmg-slab,
#bmg-field .bmg-tile {
  will-change: transform;
}

#bmg-field .bmg-tile {
  position: absolute;
  border-radius: 9%;
  background: linear-gradient(135deg, var(--t-a), var(--t-b));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 18px var(--bmg-glow);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  #bmg-watermark {
    display: none;
  }

  #bmg-field {
    width: 55vw;
    height: 40vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bmg-watermark {
    transition: none;
  }

  #bmg-field .bmg-slab,
  #bmg-field .bmg-tile {
    will-change: auto;
  }
}