/* Site overrides on top of the Aerlume theme. The theme breaks words anywhere
   (word-break: break-all), which suits CJK text but splits English words
   mid-word, so wrap at word boundaries and only break very long tokens.
   The html-prefixed selectors outrank the theme's `.post-content p` rules. */
html body,
html .index-middle *,
html .article-content,
html .toc-article * {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Fonts: Quicksand for text, Fragment Mono for code (loaded from Google Fonts
   in head.ejs). The theme's `*` rule reads --aerlume-local-font, so setting
   it switches every element; KaTeX's own, more specific rules keep math fonts. */
:root {
  --aerlume-local-font: "Quicksand";
}
.index-about i,
.index-about-mobile i {
  font-family: "Quicksand", Helvetica, Arial, sans-serif !important;
}
code,
kbd,
samp,
pre,
pre *,
.highlight,
.highlight *,
.hljs,
.hljs *,
.code-modal .code-modal-body pre,
.lb-overlay .lb-counter {
  font-family: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* The theme's `*` font rule also hits every span inside KaTeX output, which
   pulls math glyphs out of KaTeX's fonts. Inherit instead; :where() keeps the
   specificity at zero so KaTeX's own class rules (math italic, sizes) still win. */
:where(.katex *) {
  font-family: inherit;
}

/* Contents sidebar on the right of posts (layout.ejs .index-right). It sticks
   below the top of the viewport while the post scrolls. Below 1180px the
   right column is hidden and the collapsible in-post TOC is shown instead. */
.index-container .index-right {
  flex: 0 0 220px;
  min-width: 0;
  align-self: stretch;
}
html .index-right .toc-article,
html .index-right .toc-article.toc-fixed {
  display: block;
  opacity: 1;
  transform: none;
  position: sticky;
  top: 24px;
  width: auto;
  margin-top: 104px;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
}
@media screen and (max-width: 1180px) {
  .index-container .index-right {
    display: none;
  }
}

/* TOC entries and the author name: wrap at word boundaries, use Quicksand. */
html body .toc-article li a,
html body .toc-article li a span {
  word-break: normal;
  overflow-wrap: break-word;
}
.nav .avatar-name .name i {
  font-family: "Quicksand", Helvetica, Arial, sans-serif !important;
  font-style: normal;
  font-weight: 650;
}

/* Collapsible in-post TOC (shown below 1180px): keep the accent bar next to
   the CONTENTS label and push only the Show button to the right. */
.toc-mobile .toc-heading::before {
  margin-right: 0 !important;
}
.toc-mobile .toc-heading > span {
  margin-right: auto;
}

/* Inline SVG nav icons (WRITING, CODE) sized like the icon font. */
.nav .contents .nav-svg-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
}

/* Typography. The theme adds letter-spacing: 1px to post text and headings
   and asks for weight 300, which spreads Quicksand's tight letterforms apart
   and makes it look unlike Quicksand elsewhere. Use the font's own spacing,
   a real loaded weight, and the grayscale smoothing most sites use on macOS. */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html .post-content,
html .post-content p,
html .post-content li,
html .post-content h1,
html .post-content h2,
html .post-content h3,
html .post-content h4,
html .post-content blockquote,
html .post-content td,
html .post-content th,
html .post-preview-container,
html .about-content {
  letter-spacing: normal;
}
html .post-content p:not(.fig-source):not(.fig-hint),
html .post-content li {
  font-weight: 450;
  font-size: 17px;
  line-height: 1.7;
}

/* Chart source and hint lines stay small inside post text. */
html .post-content .fig .fig-source,
html .post-content .fig figcaption {
  font-size: 0.8125rem;
  line-height: 1.6;
}
html .post-content .fig .fig-hint {
  font-size: 0.75rem;
  line-height: 1.5;
}
html .post-content code,
html .post-content pre,
html .post-content pre * {
  letter-spacing: normal;
}

/* TOC (source/js/toc.js): headings land a little below the top edge, and the
   active entry is marked in the accent color. */
.post-content h2,
.post-content h3,
.post-content h4 {
  scroll-margin-top: 24px;
}
.toc-article a.is-active {
  color: #4990E2 !important;
  font-weight: 650;
}

/* Some theme rules (lists, nested blocks) are more specific than the
   word-break override above, so force word-boundary wrapping for all text. */
.index-middle *,
.toc-article * {
  word-break: normal !important;
  overflow-wrap: break-word;
}

/* Nested TOC entries stay collapsed except under the section being read
   (toc.js toggles .is-open on the branch holding the active entry). */
.toc-article li > .toc-child {
  display: none;
}
.toc-article li.is-open > .toc-child {
  display: block;
}

/* Quicksand is loaded as a variable font (300..700) and every weight on the
   site sits 50 above its usual step (the theme and site rules were shifted).
   Text with no explicit weight starts at 450; bold stays at 700, the font's
   maximum. */
html body {
  font-weight: 450;
}
html body strong,
html body b {
  font-weight: 700;
}

/* TOC: the current subsection (accent) and its section (dark) are both bold. */
html .toc-article a.is-active,
html .toc-article li.active > a {
  font-weight: 700;
}
html .toc-article a.is-trail {
  color: #2f3339 !important;
  font-weight: 700;
}

/* The theme's mobile subtitle is width: 100vw inside a padded container, so
   it pokes out and the whole page scrolls sideways on phones. */
html .index-about-mobile {
  width: 100%;
  box-sizing: border-box;
}
/* Guard: nothing should make the page itself scroll horizontally. clip (not
   hidden) keeps position: sticky working for the contents sidebar. */
html,
body {
  overflow-x: clip;
}

/* Post meta and tag pills (post.ejs, index.ejs): the theme's meta line was
   faint gray with slash-separated tags; make it readable and clickable. */
html .post-container .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  margin: 0.9rem 0 1.4rem;
  color: #334155;
  font-size: 0.95rem;
  font-weight: 550;
}
html .post-container .post-meta .post-meta-sep {
  color: #94a3b8;
}
html .post-container .post-meta .post-read {
  color: #475569;
}
html .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
html .post-container .post-meta .post-tags {
  flex-basis: 100%;
  justify-content: center;
  margin-top: 0.35rem;
}
html .post-tags li {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
html .post-tags li::before,
html .post-tags li::marker {
  content: none;
}
html a.tag-pill {
  display: inline-block;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: #e8f1f9;
  border: 1px solid #cfe0ef;
  color: #0b4f7c !important;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
html a.tag-pill::before {
  content: "#";
  margin-right: 1px;
  opacity: 0.55;
}
html a.tag-pill:hover,
html a.tag-pill:focus-visible {
  background: #006cac;
  border-color: #006cac;
  color: #fff !important;
  outline: none;
}
/* the home page list: pills under each title, date in a darker gray */
html .post-preview .post-tags {
  margin-top: 0.45rem;
}
html .post-preview a.tag-pill {
  font-size: 0.75rem;
  padding: 0.1rem 0.6rem;
}
html .post-preview .post-time {
  color: #475569 !important;
  font-weight: 550;
}

/* Nav: the theme's #999 labels were too faint. Dark slate text, mid-slate
   icons, accent for the current page, and a clear hover state. */
html .nav .contents ul li a span,
html .nav .contents ul li button span {
  color: #334155;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html .nav .contents ul li a i,
html .nav .contents ul li button i,
html .nav .contents .nav-svg-icon {
  color: #475569;
}
html .nav .contents ul li a:hover span,
html .nav .contents ul li button:hover span,
html .nav .contents ul li a:focus-visible span,
html .nav .contents ul li button:focus-visible span,
html .nav .contents ul li a:hover i,
html .nav .contents ul li button:hover i {
  color: #0b4f7c;
}
html .nav .contents ul li a:hover,
html .nav .contents ul li button:hover {
  background-color: #eef3f8;
}
html .nav .contents ul li.active a span,
html .nav .contents ul li.active a i {
  color: #006cac;
  font-weight: 700;
}
html .nav .nav-toggle-btn {
  color: #334155;
}

/* Contrast pass (WCAG AA, measured on every page): links move from the theme's
   #4990E2 (3.3:1) to the site accent #006cac (5.6:1); faint grays darken. */
html .post-content a,
html .about-content a,
html .post-content a:visited {
  color: #006cac;
}
html .post-content a:hover {
  color: #0b4f7c;
}
html .toc-article a,
html .toc-article .toc-text {
  color: #5b6472;
}
html .toc-article a.is-active,
html .toc-article a.is-active .toc-text,
html .toc-article li.active > a,
html .toc-article li.active > a .toc-text {
  color: #006cac !important;
}
html .toc-article a.is-trail .toc-text {
  color: #2f3339;
}
html .footer-copyright,
html .footer-copyright a,
html .archive li span,
html .post-preview .post-time {
  color: #5b6472 !important;
}
html .tag-page-header .tag-page-description {
  color: #5b6472;
}
html .tag-page-header .tag-page-eyebrow {
  color: #006cac;
}