/* Berkeley Mono Font Face */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/berkeley-mono/BerkeleyMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/berkeley-mono/BerkeleyMono-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/berkeley-mono/BerkeleyMono-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/berkeley-mono/BerkeleyMono-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/berkeley-mono/BerkeleyMono-Oblique.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/berkeley-mono/BerkeleyMono-Bold-Oblique.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Mermaid diagram styles */
.mermaid {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  background: transparent;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Force Berkeley Mono for all Mermaid text elements */
.mermaid .label,
.mermaid .labelText,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .cluster-label,
.mermaid .titleText,
.mermaid .flowchartTitle,
.mermaid .sectionTitle,
.mermaid .taskText,
.mermaid .taskTextOutsideLeft,
.mermaid .taskTextOutsideRight,
.mermaid .taskText0,
.mermaid .taskText1,
.mermaid .taskText2,
.mermaid .taskText3,
.mermaid .messageText,
.mermaid .noteText,
.mermaid .actorText,
.mermaid .loopText,
.mermaid .excText,
.mermaid .altText,
.mermaid .stateText,
.mermaid .transitionText,
.mermaid .labelText,
.mermaid .text,
.mermaid tspan {
  font-family: 'Berkeley Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
}

/* Additional Mermaid font overrides */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  font-family: 'Berkeley Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
}

.mermaid .edgePath .path,
.mermaid .edgeLabel rect,
.mermaid .cluster rect {
  font-family: 'Berkeley Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
}

/* Shared palette and type. Keep monospace for the site's signature and detail. */
:root {
  --ink: #23272b;
  --muted: #626a73;
  --link: #2167a0;
  --line: #e4e7ea;
  --surface: #f6f7f8;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Berkeley Mono', 'SF Mono', Consolas, monospace;
  --reading-width: 740px;
  --site-width: 1040px;
}
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 17px/1.75 var(--sans);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); font-weight: inherit; text-underline-offset: .2em; }
a:hover { color: #134a78; text-decoration: underline; }
a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 5px;
  border-radius: 2px;
}
::selection { background: #dceaf5; color: #172b3e; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
p { margin: 0 0 1.4em; }
hr { height: 1px; margin: 48px 0; background: var(--line); }
.main { width: 100%; margin: 0 auto; }
.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  transform: translateY(-160%);
  padding: 10px 16px;
  background: #fff;
  z-index: 200;
}
.skip-link:focus { transform: translateY(0); }

/* Navigation and footer share the homepage's outer edges. */
nav.navigation {
  box-sizing: border-box;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 28px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}
nav.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  color: var(--muted);
  font: 400 13px/1.4 var(--mono);
  border-radius: 0;
}
nav.navigation .site-name { color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.navigation__links { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
nav.navigation a:hover, nav.navigation a[aria-current] { color: var(--ink); }
nav.navigation a[aria-current]:not(.site-name) { text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 8px; }
nav.navigation a.button { background: transparent; color: var(--link); margin: 0; }
#footer {
  box-sizing: border-box;
  max-width: var(--site-width);
  margin: 88px auto 0;
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  text-align: left;
}
#footer .copyright { margin: 0; font: 12px/1.5 var(--mono); }
#social { display: flex; gap: 18px; }
#social a { margin: 0; display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); }
#social a:hover { color: var(--link); }
.powerby { font-size: 12px; }

/* Landing page: a quiet identity column alongside the introduction and writing. */
.home-hero, .home-lower {
  box-sizing: border-box;
  max-width: var(--site-width);
  margin: 0 auto;
}
.home-hero { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 64px; padding-top: 64px; }
.profile { margin: 48px auto; text-align: center; }
.home-hero .profile { margin: 0; text-align: left; }
.profile .avatar { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.home-hero .avatar { margin: 0; }
.profile h1 { margin: 24px 0 8px; color: var(--ink); font: 500 27px/1.3 var(--mono); letter-spacing: -.045em; }
.profile__bio { color: var(--muted); margin: 0; font: 400 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.profile__social { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.home-hero .profile__social { justify-content: flex-start; }
.profile__social .badge { font: 400 12px/1.5 var(--mono); color: var(--muted); padding: 5px 0; }
.home-hero__bio { min-width: 0; font-size: 16px; line-height: 1.8; color: #454c53; }
.home-hero__bio p:last-child { margin-bottom: 0; }
.home-intro a, .content a:not(.anchor), #section > p a { text-decoration: underline; text-decoration-color: #b7cfe2; }
.home-intro a:hover, .content a:hover { text-decoration-color: currentColor; }
.home-lower #section { max-width: none; margin: 60px 0 0 296px; padding: 0; width: auto; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; font: 500 13px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.section-heading > a { font-size: 13px; }
#list-page.home-latest { width: auto; max-width: none; padding: 0; margin: 0; }
#list-page.home-latest .item { margin: 0; padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.post-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font: 400 12px/1.6 var(--mono); margin-bottom: 10px; }
#list-page.home-latest .title { display: block; width: auto; margin: 0; font: 600 23px/1.4 var(--sans); letter-spacing: -.025em; }
#list-page.home-latest .title a { color: var(--ink); display: inline; }
#list-page.home-latest .title a:hover { color: var(--link); }
#list-page.home-latest .summary { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 12px 0 0; }
#list-page .pagination { display: flex; gap: 24px; justify-content: space-between; height: auto; margin: 24px 0 0; font-size: 14px; }
#list-page .pagination .next { margin-left: auto; float: none; }

/* Articles and standalone pages use a consistent, comfortable reading measure. */
#single, #section, #archive {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: var(--reading-width);
  padding: 0;
  margin: 60px auto 0;
}
#single .article-header { padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.article-back { display: inline-block; color: var(--muted); font: 400 12px/1.6 var(--mono); padding: 5px 0; }
#single .title, .page-header h1, #section > .title {
  margin: 24px 0 20px;
  text-align: left;
  font: 600 clamp(30px, 3.2vw, 42px)/1.2 var(--sans);
  letter-spacing: -.04em;
  text-wrap: pretty;
}
#single .tip { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; margin: 0; text-align: left; color: var(--muted); font-size: 13px; line-height: 1.7; }
#single .tip .split { margin: 0; }
#single .content, #section .content { line-height: 1.85; margin-top: 32px; }
#single .content { font-size: 16px; line-height: 1.7; }
#section .content { font-size: 18px; }
.content > :first-child { margin-top: 0; }
.content h1 { font-size: 36px; letter-spacing: -.035em; }
.content h2 { font-size: 28px; letter-spacing: -.025em; margin: 2em 0 .7em; }
.content h3 { font-size: 22px; letter-spacing: -.015em; margin: 1.8em 0 .6em; }
.content h4 { font-size: 19px; margin: 1.6em 0 .6em; }
.content :is(h2, h3, h4) { scroll-margin-top: 28px; position: relative; }
.content ul, .content ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.content li { margin: .45em 0; padding-left: .15em; }
.content li > :is(ul, ol) { margin-bottom: .6em; }
.content li::marker { color: var(--muted); }
.content strong { font-weight: 600; }
.content blockquote, #section > blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid #91b1ca;
  color: #525d67;
}
blockquote > :last-child { margin-bottom: 0; }
.content img, #section img { max-width: 100%; height: auto; }
.markdown-image { text-align: center; margin: 32px 0; }
.content figure { margin: 32px 0; }
.content figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 12px; }
.content iframe, #section iframe { max-width: 100%; }
iframe[src*="youtube.com"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.anchor { display: inline-block; margin-left: .4em; color: var(--muted); font: 400 .7em/1 var(--mono); opacity: 0; visibility: visible; text-decoration: none; }
:is(h1, h2, h3, h4):hover .anchor, .anchor:focus-visible { opacity: 1; }

/* Technical content stays readable without widening the page. */
pre, code { font-family: var(--mono); }
p code, li code, td code, th code {
  font-size: .82em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .12em .3em;
  overflow-wrap: anywhere;
}
pre, .highlight pre {
  box-sizing: border-box;
  max-width: 100%;
  padding: 22px;
  margin: 28px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7;
  tab-size: 4;
  overflow-wrap: normal;
}
.highlight { max-width: 100%; margin: 28px 0; overflow-x: auto; }
.highlight pre { margin: 0; }
pre code, .highlight code { font-family: var(--mono); font-size: inherit; line-height: inherit; padding: 0; border: 0; border-radius: 0; background: transparent; overflow-wrap: normal; }
.content table, #section table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.content :is(th, td), #section :is(th, td) { padding: 12px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.content th, #section th { font-size: 13px; font-weight: 600; background: var(--surface); color: var(--ink); white-space: normal; }
.content tr:nth-child(odd) > td, #section tr:nth-child(odd) > td { background: #fafbfc; }
.content mjx-container[display="true"], .content .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: .3em 0; }
.content .footnotes { margin-top: 48px; color: var(--muted); font-size: 14px; }
.article-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
#single .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
#single .tags a, #tags .tag a { margin: 0; padding: 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 12px; }
#single .tags a:hover, #tags .tag a:hover { color: var(--link); border-color: #b7cfe2; }

/* Contents: a quiet margin index on wide screens, native disclosure elsewhere. */
.toc { background: none; padding: 0; margin: 0; }
.toc-sidebar { display: none; }
.toc-collapsed { background: #fafbfc; border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px; margin: 0 0 32px; font-size: 14px; }
.toc details summary { margin: 0; cursor: pointer; font-weight: 500; }
.toc details[open] summary { cursor: pointer; }
.toc ul { padding-left: 20px; }
.toc li { margin: 8px 0; }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--link); }
.toc-label { font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 18px; }
@media (min-width: 1360px) {
  .toc-collapsed { display: none; }
  .toc-sidebar { display: block; position: fixed; top: 170px; left: max(24px, calc(50% - 654px)); width: 210px; max-height: calc(100vh - 210px); overflow-y: auto; font-size: 12px; line-height: 1.6; }
  .toc #TableOfContents { margin: 0; }
  .toc-sidebar ul { margin: 0; padding: 0; list-style: none; }
  .toc-sidebar li { margin: 0; }
  .toc-sidebar a { display: block; padding: 7px 0 7px 14px; border-left: 1px solid var(--line); }
  .toc-sidebar a.active { color: var(--link); border-left: 2px solid var(--link); padding-left: 13px; }
  .toc-sidebar li:empty { display: none; }
}

/* Archive and citation pages. */
.page-header { margin-bottom: 40px; }
#archive .group { margin: 40px 0; }
#archive .group .key { font: 500 16px/1.5 var(--mono); margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#archive .group .value { display: flex; align-items: baseline; gap: 24px; font-size: 16px; line-height: 1.55; margin: 0 0 20px; }
#archive .group .value .date { flex: 0 0 72px; color: var(--muted); font: 400 12px/1.6 var(--mono); }
#archive .group .value .title { display: block; flex: 1; min-width: 0; }
#archive .group .value .title a { color: var(--ink); }
#archive .group .value .title a:hover { color: var(--link); }
#archive .group .value .tags { display: none; }
#list-page.citations-list { max-width: none; padding: 0; margin: 32px 0 0; }
#list-page.citations-list .item { padding: 28px 0; margin: 0; border-top: 1px solid var(--line); }
#list-page.citations-list .title { font: 600 20px/1.45 var(--sans); width: auto; margin: 0 0 8px; }
#list-page.citations-list .title a { color: var(--ink); }
#list-page.citations-list .item > div:first-of-type { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
#list-page.citations-list .item > div:first-of-type > a, #list-page.citations-list .date { color: var(--muted); font: 400 12px/1.6 var(--mono); }
#list-page.citations-list .date { float: none; width: auto; top: 0; }
#list-page.citations-list .summary { color: var(--muted); border-left: 2px solid var(--line); padding-left: 18px; margin: 16px 0 20px; font-size: 15px; line-height: 1.75; }
#tags { margin-top: 60px; }
#tags .tag { display: inline-block; margin: 8px 4px; }
#page-404 { padding: 0 24px; }
.spotify { margin-top: 16px; }
.spotify a.button { display: inline-flex; align-items: center; padding: 8px 14px; background: #147a38; color: #fff; font-size: 12px; font-weight: 600; border-radius: 4px; }
.spotify a.button:hover { background: #10642d; text-decoration: none; }
.d3-slider { position: relative; font-family: var(--mono); font-size: 1.1em; border: 1px solid #f13737; z-index: 2; }
.cib-link { font-size: 10px; }
.twitter-tweet { margin-left: auto; margin-right: auto; }

@media (max-width: 1120px) {
  nav.navigation, #footer, .home-hero, .home-lower { width: calc(100% - 64px); }
  .home-hero { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .home-lower #section { margin-left: 240px; }
}
@media (max-width: 800px) {
  nav.navigation { align-items: flex-start; gap: 12px; padding-top: 18px; }
  .navigation__links { gap: 6px 20px; justify-content: flex-end; }
  .home-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .home-hero .profile { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .home-hero .profile > a, .home-hero .profile > img { grid-column: 1; grid-row: 1 / 4; }
  .home-hero .avatar { width: 88px; height: 88px; }
  .home-hero .profile h1 { margin: 0 0 5px; }
  .home-hero .profile__bio { grid-column: 2; }
  .home-hero .profile__social { grid-column: 2; margin: 8px 0 0; }
  .home-lower #section { margin: 44px 0 0; }
}
@media (max-width: 540px) {
  nav.navigation, #footer, .home-hero, .home-lower { width: calc(100% - 40px); }
  nav.navigation { flex-direction: column; gap: 8px; padding-bottom: 14px; }
  .navigation__links { width: 100%; gap: 4px 18px; justify-content: flex-start; }
  nav.navigation a { font-size: 12px; }
  nav.navigation a.button { display: inline-flex; }
  .home-hero { padding-top: 32px; }
  .home-hero .profile { column-gap: 20px; }
  .profile h1 { font-size: 24px; }
  .home-hero__bio { font-size: 16px; }
  #list-page.home-latest .title { font-size: 21px; }
  #single, #section, #archive { width: calc(100% - 40px); margin-top: 32px; }
  #single .title { font-size: 30px; margin-top: 20px; letter-spacing: -.035em; }
  #single .content, #section .content { line-height: 1.8; }
  #single .content { font-size: 16px; line-height: 1.7; }
  #section .content { font-size: 17px; }
  #single .tip { font-size: 12px; gap: 4px 8px; }
  .content h2 { font-size: 25px; }
  .content h3 { font-size: 21px; }
  pre, .highlight pre { padding: 16px; font-size: 13px; }
  #archive .group .value { gap: 16px; font-size: 15px; }
  #archive .group .value .date { flex-basis: 64px; min-width: 0; font-size: 11px; }
  #footer { margin-top: 56px; padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  nav.navigation, .toc, #footer, .article-back, .skip-link { display: none; }
  #single, #section { width: 100%; max-width: none; margin: 0; }
  #single .content { font-size: 11pt; line-height: 1.6; }
  pre { white-space: pre-wrap; }
  a { color: inherit; }
}