* {
  box-sizing: border-box;
}

html {
  color: var(--brg-color-text-primary);
  font-family: var(--brg-font-family);
  scroll-behavior: smooth;
}

body.brg-site {
  background: var(--brg-color-bg-primary);
  color: var(--brg-color-text-primary);
  font: var(--brg-font-body-m);
  margin: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

body.brg-site :where(button, input, select, textarea) {
  font: inherit;
}

body.brg-site :where(img, svg, video) {
  display: block;
  height: auto;
  max-width: 100%;
}

body.brg-site #generate-slideout-menu,
body.brg-site .slideout-overlay {
  display: none !important;
}

body.brg-site :where(a) {
  color: var(--brg-color-link-default);
  text-underline-offset: 0.18em;
}

body.brg-site :where(a, button, input, select, textarea):focus-visible {
  outline: var(--brg-focus-width) solid var(--brg-color-focus-ring);
  outline-offset: 3px;
}

body.brg-site :where(button, [role="button"]) {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body.brg-site :where(button, [role="button"])::selection {
  background: transparent !important;
  color: inherit !important;
  text-shadow: none;
}

body.brg-site :where(button, [role="button"])::-moz-selection {
  background: transparent !important;
  color: inherit !important;
  text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  body.brg-site :where(a:hover) {
    color: var(--brg-color-link-hover);
  }
}

.brg-container {
  margin-inline: auto;
  max-width: calc(var(--brg-layout-content-max) + (2 * var(--brg-layout-gutter-desktop)));
  padding-inline: var(--brg-layout-gutter-desktop);
  width: 100%;
}

.brg-reading-column {
  margin-inline: auto;
  max-width: var(--brg-layout-article-max);
}

.brg-prose {
  font: var(--brg-font-article);
}

.brg-prose > * + * {
  margin-block-start: var(--brg-spacing-xl);
}

.brg-prose :where(h2, h3, h4) {
  color: var(--brg-color-text-primary);
  margin-block-end: 0;
  scroll-margin-top: var(--brg-spacing-6xl);
}

.brg-prose h2 { font: var(--brg-font-h2); letter-spacing: -0.02em; margin-block-start: var(--brg-spacing-5xl); }
.brg-prose h3 { font: var(--brg-font-h3); letter-spacing: -0.02em; margin-block-start: var(--brg-spacing-4xl); }
.brg-prose h4 { font: var(--brg-font-h4); letter-spacing: -0.02em; margin-block-start: var(--brg-spacing-3xl); }

/*
 * Article reading rhythm
 *
 * Keep this scoped to the single-post reading column. Page content and the
 * reusable editorial blocks retain their own spacing rules.
 */
.brg-article .brg-prose > p {
  margin-block: 0 var(--brg-spacing-lg);
}

.brg-article .brg-prose > h2,
.brg-article .brg-prose > h3,
.brg-article .brg-prose > h4 {
  scroll-margin-top: 96px;
}

.brg-article .brg-prose > h2 {
  margin-block: 56px var(--brg-spacing-md);
}

.brg-article .brg-prose > h3 {
  margin-block: 36px var(--brg-spacing-sm);
}

.brg-article .brg-prose > :first-child:is(h2, h3, h4) {
  margin-block-start: 0;
}

.brg-article .brg-prose > :is(ul, ol, table, .wp-block-table) {
  margin-block: 28px;
}

/* Old editor spacers immediately before an H2 no longer add a second gap. */
.brg-article .brg-prose > .wp-block-spacer:has(+ h2) {
  display: none;
}

.brg-skip-link,
.brg-skip-link:link,
.brg-skip-link:visited {
  background: var(--brg-color-text-primary);
  color: var(--brg-color-text-inverse);
  left: var(--brg-spacing-lg);
  padding: var(--brg-spacing-sm) var(--brg-spacing-md);
  position: fixed;
  top: var(--brg-spacing-lg);
  transform: translateY(-200%);
  z-index: 10000;
}

.brg-skip-link:focus {
  color: var(--brg-color-text-inverse);
  transform: translateY(0);
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

@media (max-width: 1024px) {
  .brg-container {
    max-width: none;
    padding-inline: var(--brg-layout-gutter-tablet);
  }
}

@media (max-width: 640px) {
  .brg-container {
    padding-inline: var(--brg-layout-gutter-mobile);
  }

  .brg-prose {
    font-size: 17px;
    line-height: 30px;
  }

  .brg-article .brg-prose > :is(h2, h3, h4) {
    scroll-margin-top: 84px;
  }

  .brg-article .brg-prose > h2 {
    margin-block-start: 40px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}