/* ==========================================================================
   boxlegs — Bauhaus theme (default site look)
   Drop at: docs/css/bauhaus.css — load in mkdocs.yml AFTER themes.css,
   with extra.css removed from extra_css (its legacy rules are superseded here).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Stop';
  src: url('../fonts/Stop.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bh-red: #C6432E;
  --bh-blue: #1F4E8C;
  --bh-yellow: #D99A2B;
  --bh-ink: #1A1A1A;
  /* Warm dark brown-black rather than neutral black, so the panel reads as part
     of the cream page instead of punching a cold hole in it. */
  --bh-code-bg: #201A14;
  --bh-code-text: #EDEDE6;
  /* Site accents lightened for contrast on the dark panel — --bh-blue in
     particular is unreadable at its page value against near-black. */
  --bh-code-red: #E2705A;
  --bh-code-yellow: #E0A93F;
  --bh-code-blue: #7FA6D9;
  --bh-code-muted: rgba(237,237,230,.42);
}
:root { --navbar-height: 104px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.65;
  padding-top: var(--navbar-height);
}

.site-description { display: none; }

/* Background grain/wash ---------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* bootstrap.min.css ships a stray `a:hover, a:focus { background: black }` rule
   that otherwise paints every link hover as a solid black box. */
a:hover, a:focus { background: transparent; }

/* No dotted outline on mouse click; keep one for keyboard tab navigation. */
a, button, a:focus, button:focus, a:active, button:active { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bh-red); outline-offset: 2px; }

/* Motion ----------------------------------------------------------------------- */
a, button, .bh-pill, .bh-row-title, .bh-toc summary::before, [role="main"] img {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease,
    transform .15s ease, opacity .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  a, button, .bh-pill, .bh-row-title, .bh-toc summary::before, [role="main"] img { transition: none; }
}

/* Navbar --------------------------------------------------------------- */
div.navbar, .navbar-default { background-color: var(--bg); border-bottom: none; box-shadow: none; min-height: 0; }
.navbar-default .navbar-header, .navbar-default .navbar-collapse { padding-top: 24px; padding-bottom: 16px; }
.navbar-default .navbar-brand {
  display: flex; align-items: center; gap: 14px; height: auto; padding: 0;
  font-family: 'Stop', 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  text-decoration: none !important; font-size: 40px; letter-spacing: -0.02em; color: var(--bh-ink) !important;
}
.bh-mark { display: inline-flex; position: relative; top: 5px; width: 32px; height: 32px; }
.bh-mark span { position: absolute; }
.bh-mark .m-circle { width: 14px; height: 14px; border-radius: 50%; background: var(--bh-blue); left: 0; top: 0; }
.bh-mark .m-square { width: 14px; height: 14px; background: var(--bh-red); right: 0; top: 0; }
.bh-mark .m-tri { width: 0; height: 0; left: 7px; bottom: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid var(--bh-yellow); }
.navbar-default .navbar-nav:not(.navbar-right) { display: none; }
.navbar-default .navbar-nav > li > a { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.navbar .btn { font-family: 'JetBrains Mono', monospace; }

/* Headings ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { scroll-margin-top: calc(var(--navbar-height) + 20px); }
h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: none;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--bh-ink); margin: 20px 0 10px;
}
h2, h3 {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  color: var(--bh-ink); background: none; border: none;
  margin: 40px 0 18px; font-size: 24px; box-sizing: border-box;
}
h3 { font-size: 19px; }
h3::before, h3::after { content: none; }
h4 { color: var(--bh-ink); font-family: 'Space Grotesk', sans-serif; }
h4::after { background: var(--bh-yellow); }
h5 { font-family: 'Source Serif 4', serif; font-size: 13px; color: rgba(26,26,26,.6); border-color: rgba(26,26,26,.2); }

hr { border: 0; border-top: 1px solid rgba(26,26,26,.2); margin: 40px 0; }

p, li { color: var(--bh-ink); }
/* bootstrap.min.css forces `li { list-style-type: square }` globally, which also
   clobbers <ol> numbering — restore it for ordered lists. */
[role="main"] ol > li { list-style-type: decimal; }
strong, b { color: var(--bh-ink) !important; font-weight: 700; text-transform: none; }
/* bootstrap.min.css also strips italics/underline off em/i/u/etc. globally. */
em, i { font-style: italic; }
em::before, em::after { content: none; }
/* bootstrap.min.css decorates several other tags with content: '[', '<', '_', etc.
   on screen (not print-scoped) — kill all of them up front rather than one at a time. */
small::before, ins::before, ins::after, del::before, del::after,
s::before, s::after, u::before, u::after { content: none; }
u, ins { text-decoration: underline; }
del, s { text-decoration: line-through; background: transparent; color: inherit; }
body a { color: var(--bh-red); text-decoration: underline; text-decoration-color: rgba(198,67,46,.35); }
body a:hover, body a:focus { color: var(--bh-blue); }

code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.83em; color: var(--bh-red);
  background: rgba(26,26,26,.06); padding: 1px 5px; border-radius: 4px;
}
pre { background: var(--bh-code-bg); border-radius: 10px; border: none; padding: 22px 24px; font-size: 18px; }
pre code { font-family: 'JetBrains Mono', monospace; font-size: 0.78em; color: var(--bh-code-text); background: transparent; padding: 0; }

/* Collapsible in-page table of contents ---------------------------------------- */
.bh-toc { margin: 4px 0 32px; }
.bh-toc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(26,26,26,.5); padding: 8px 0; width: fit-content;
}
.bh-toc summary::-webkit-details-marker { display: none; }
.bh-toc summary::before { content: '▸'; display: inline-block; font-size: 10px; }
.bh-toc[open] summary::before { transform: rotate(90deg); }
.bh-toc summary:hover { color: var(--bh-ink); }
.bh-toc ul { list-style: none; padding-left: 0; margin: 8px 0 0; }
.bh-toc ul ul { padding-left: 18px; margin-top: 6px; }
.bh-toc li { list-style: none; margin-bottom: 8px; }
.bh-toc a {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: rgba(26,26,26,.6);
  text-decoration: none;
}
.bh-toc a:hover { color: var(--bh-red); }

/* Images --------------------------------------------------------------------- */
[role="main"] img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
[role="main"] figure { margin: 28px 0; }
[role="main"] figure img { margin: 0; }
[role="main"] figcaption {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(26,26,26,.5);
  text-align: center; margin-top: 10px;
}

/* Tables ----------------------------------------------------------------------- */
[role="main"] table {
  width: 100%; border-collapse: collapse; margin: 28px 0;
  font-family: 'Source Serif 4', serif; font-size: 16px;
}
[role="main"] th, [role="main"] td { padding: 10px 16px; border-bottom: 1px solid rgba(26,26,26,.12); text-align: left; }
[role="main"] th {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(26,26,26,.55); font-weight: 500; border-bottom-color: var(--bh-ink);
}

/* Hover hints: dotted-underline terms with a rich-content speech-bubble tooltip. */
.bh-hint {
  position: relative; cursor: help; text-decoration: none;
  border-bottom: 2px dotted var(--bh-red) !important;
}
.bh-hint-bubble {
  position: absolute; bottom: 100%; left: 50%; z-index: 20; width: max-content; max-width: 260px;
  transform: translate(-50%, -6px); margin-bottom: 6px;
  background: var(--bg); color: var(--bh-ink); padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(26,26,26,.15); box-shadow: 0 4px 14px rgba(0,0,0,.1);
  font-family: 'Source Serif 4', serif; font-size: 14px; line-height: 1.5; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.bh-hint-bubble::before {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: rgba(26,26,26,.15);
}
.bh-hint-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-1px);
  border: 6px solid transparent; border-top-color: var(--bg);
}
.bh-hint:hover .bh-hint-bubble, .bh-hint:focus .bh-hint-bubble {
  opacity: 1; transform: translate(-50%, -10px);
}

/* Post header: category badge + byline --------------------------------------- */
.bh-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; color: var(--bh-ink);
  margin: 24px 0 6px;
}
/* Marker geometry keys off data-shape, colour off the inline --cat-color, so
   no rule here needs to know a category id (see bh_categories.py). */
.bh-badge::before { content: ''; width: 10px; height: 10px; flex-shrink: 0; background: var(--cat-color); }
.bh-badge[data-shape="circle"]::before { border-radius: 50%; }
.bh-badge[data-shape="triangle"]::before {
  width: 0; height: 0; background: transparent;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid var(--cat-color);
}

.bh-byline {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(26,26,26,.55);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px;
}
.bh-tick { width: 40px; height: 3px; margin-bottom: 24px; background: var(--cat-color, var(--bh-ink)); }

/* Code block chrome ------------------------------------------------------------ */
.bh-code {
  border-radius: 8px; overflow: hidden; margin: 20px 0; background: var(--bh-code-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.bh-code-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bh-code-bg); border-bottom: 1px solid rgba(237,237,230,.12);
  padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
}
.bh-code-lang { color: rgba(237,237,230,.5); text-transform: lowercase; letter-spacing: .04em; }
.bh-code-copy {
  background: none; border: none; color: rgba(237,237,230,.5); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 0;
}
.bh-code-copy:hover { color: var(--bh-code-text); }
.bh-code pre { margin: 0; border-radius: 0; background: transparent; padding: 12px 14px; }
/* highlight.js themes ship their own padding and panel background, which nested
   a second inset box inside our panel. Strip both so .bh-code owns the chrome. */
/* The theme also sets a cold grey base text colour (#abb2bf); override it too,
   or unhighlighted tokens stay off-palette. */
.bh-code pre code.hljs { padding: 0; background: transparent; color: var(--bh-code-text); }

/* Syntax palette. The CDN highlight.js theme is an Atom palette (purples, cyans,
   greens) that clashes with the Bauhaus accents, so retint the common tokens.
   base.html injects that stylesheet after this file, so the .bh-code prefix is
   what wins the cascade — not source order. */
.bh-code .hljs-keyword, .bh-code .hljs-selector-tag, .bh-code .hljs-literal,
.bh-code .hljs-section, .bh-code .hljs-doctag, .bh-code .hljs-name,
.bh-code .hljs-deletion, .bh-code .hljs-strong { color: var(--bh-code-red); }

.bh-code .hljs-string, .bh-code .hljs-attr, .bh-code .hljs-symbol,
.bh-code .hljs-bullet, .bh-code .hljs-addition, .bh-code .hljs-quote,
.bh-code .hljs-selector-attr, .bh-code .hljs-selector-pseudo,
.bh-code .hljs-regexp { color: var(--bh-code-yellow); }

.bh-code .hljs-number, .bh-code .hljs-type, .bh-code .hljs-built_in,
.bh-code .hljs-params, .bh-code .hljs-variable, .bh-code .hljs-template-variable,
.bh-code .hljs-selector-class, .bh-code .hljs-selector-id,
.bh-code .hljs-class .hljs-title { color: var(--bh-code-blue); }

.bh-code .hljs-title, .bh-code .hljs-function .hljs-title,
.bh-code .hljs-attribute { color: var(--bh-code-text); }

.bh-code .hljs-comment { color: var(--bh-code-muted); font-style: italic; }
.bh-code .hljs-meta, .bh-code .hljs-punctuation { color: var(--bh-code-muted); }
.bh-code .hljs-emphasis { font-style: italic; }

/* Homepage hero ------------------------------------------------------------- */
.bh-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 8px; flex-wrap: wrap; }
.bh-hero-text { flex: 1; min-width: 280px; max-width: 640px; }
.bh-hero-text h1 { margin-top: 0; }
.bh-hero-shapes { position: relative; width: 190px; height: 170px; flex-shrink: 0; }
.bh-shape {
  position: absolute; opacity: .88; cursor: grab; touch-action: none; user-select: none;
  transition: width .25s ease, height .25s ease;
}
.bh-shape.dragging { cursor: grabbing; }
.bh-shape.returning {
  transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1),
    width .25s ease, height .25s ease;
}
.bh-shape.a { width: 110px; height: 110px; border-radius: 50%; background: var(--bh-blue); top: 0; left: 0; }
.bh-shape.b { width: 82px; height: 82px; border-radius: 6px; background: var(--bh-red); right: 20px; top: 30px; }
.bh-shape.c { width: 70px; height: 70px; background: var(--bh-yellow); left: 55px; top: 70px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

@keyframes bh-float-a { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(6px,-8px) rotate(4deg); } }
@keyframes bh-float-b { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-6px,7px) rotate(-6deg); } }
@keyframes bh-float-c { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(5px,6px) rotate(5deg); } }
.bh-shape.a { animation: bh-float-a 7s ease-in-out infinite; }
.bh-shape.b { animation: bh-float-b 9.5s ease-in-out infinite; }
.bh-shape.c { animation: bh-float-c 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bh-shape.a, .bh-shape.b, .bh-shape.c { animation: none; }
}

/* Homepage filter pills -------------------------------------------------------- */
.bh-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 8px; }
.bh-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(26,26,26,.18);
  background: transparent; color: var(--bh-ink); cursor: pointer;
}
.bh-pill:hover { border-color: var(--bh-ink); }
/* Active pill and its icon take the category colour from the inline --cat-color,
   so adding a category needs no CSS change. The "All" pill has none and falls
   back to ink. A triangle icon is a border-only shape: giving it a background
   would bleed through its transparent side borders as a solid square. */
.bh-pill.active {
  background: var(--cat-color, var(--bh-ink)); border-color: var(--cat-color, var(--bh-ink));
  color: var(--bg);
}
.bh-pill-icon { border-bottom-color: var(--cat-color); }
.bh-pill.active .bh-pill-icon { border-bottom-color: var(--bg); }
.bh-pill-icon:not([data-shape="triangle"]) { background: var(--cat-color); }
.bh-pill.active .bh-pill-icon:not([data-shape="triangle"]) { background: var(--bg); }

/* Homepage timeline ---------------------------------------------------------- */
.bh-timeline { margin-top: 20px; }
.bh-year-label {
  display: flex; align-items: center; gap: 16px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px;
  color: var(--bh-ink); letter-spacing: .04em; margin: 32px 0 6px;
}
.bh-year-label::after { content: ''; flex: 1; height: 1px; background: rgba(26,26,26,.15); }
.bh-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 0;
  border-bottom: 1px solid rgba(26,26,26,.1); text-decoration: none !important; color: inherit !important;
}
.bh-row:has(+ .bh-year-label), .bh-row:last-child { border-bottom: none; }
.bh-row:hover .bh-row-title { color: var(--bh-red) !important; }
.bh-row-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bh-row-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--bh-ink); }
.bh-row-excerpt { font-family: 'Source Serif 4', serif; font-size: 14px; color: rgba(26,26,26,.65); line-height: 1.5; }
.bh-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(26,26,26,.45); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Footer ---------------------------------------------------------------------- */
.bh-footer {
  padding: 24px 0 40px; border-top: 1px solid rgba(26,26,26,.1); margin-top: 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(26,26,26,.5);
}
.bh-footer-gh {
  display: inline-block; margin-top: 12px; color: rgba(26,26,26,.5) !important;
  font-size: 18px; text-decoration: none !important;
}
.bh-footer-gh:hover { color: var(--bh-ink) !important; }