/* ===== Variables ===== */
:root {
  --bg: #ffffff;
  --surface: #f6f6f6;
  --surface-hover: #f4f4f4;
  --border: #d8d8d8;
  --border-photo: rgba(216, 216, 216, 0.7);
  --border-radius: 1rem;
  --container-width: 32rem;
  --container-wide-width: 48rem;
  --text: #2a2a2a;
  --muted: #666666;
  --accent: #5249ff;
  --accent-hover: #8881ff;
  --selection-bg: #7c80fa;
  --code-bg: #f3f5f7;
  --copy-button-hover-bg: #e5e8ed;
  --code-border: transparent;
  --code-text: #292929;
  --code-radius-inline: 0.25rem;
  --code-radius-block: var(--border-radius);
  --about-photo-size: 227px;
  --about-photo-radius: 12.5%;
  --about-photo-border-width: 4px;

  --font-sans: "IBM Plex Sans", Arial, sans-serif; --font-prose-size: 1.025em; --font-prose-weight: 400; --font-strong-weight: 600;
  /* --font-sans: "Inter", Arial, sans-serif; --font-prose-size: 1.0em; --font-prose-weight: 300; --font-strong-weight: 600; */
  
  --font-serif: "PT Serif", Georgia, "Times New Roman", serif; --font-post-title-size: 3.0rem;
  /* --font-serif: "STIX Two Text", Georgia, "Times New Roman", serif; --font-post-title-size: 3.0rem; */

  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-prose-headings: var(--font-serif);
  --font-post-lead: var(--font-sans); --font-post-lead-style: normal; --font-post-lead-size: 1.3em; --font-post-lead-weight: 400;
  --font-prose-h2-size: 2em;
  --font-prose-h3-size: 1.375em;

  --space-prose-paragraph: 0.75em;
  --space-prose-pre-list: 0.25em;
  --space-prose-display-math: 0.75em;
  --space-prose-display-math-tight: 0.5em;
  --space-prose-display-math-pre-offset: calc(
    var(--space-prose-display-math-tight) - var(--space-prose-paragraph)
  );
  --space-post-header-bottom: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --surface: #1a1a1a;
    --surface-hover: #1a1a1a;
    --border: #333333;
    --border-photo: rgba(51, 51, 51, 0.8);
    --text: #d1d1d1;
    --muted: #8a8a8a;
    --accent: #7c80fa;
    --accent-hover: #676bd4;
    --code-bg: #2b2b2b;
    --copy-button-hover-bg: #3b3b3b;
    --code-border: transparent;
    --code-text: #f0f0f0;
  }
}

@media (max-width: 40rem) {
  :root {
    --font-prose-size: 1.0em;
    --font-post-title-size: 2.25rem;
    --font-prose-h2-size: 1.75em;
    --font-prose-h3-size: 1.25em;
    --font-post-lead-size: 1.0em;
  }
}

/* ===== End Variables ===== */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
}

::selection {
  background: var(--selection-bg);
  color: #ffffff;
}

::-moz-selection {
  background: var(--selection-bg);
  color: #ffffff;
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.site-header {
  padding-top: 4rem;
}

.header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0;
}

.brand-block {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

.site-title {
  color: var(--text);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
}

.bio-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}

.bio-prefix {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  font-size: 1.125rem;
}

.site-bio {
  margin: 0;
  min-width: 0;
  padding-right: 2.0rem;
}

.site-bio p {
  margin: 0 0 0.75rem;
}

.site-bio p:last-child {
  margin-bottom: 0;
}

.top-nav {
  position: static;
  flex: 0 0 auto;
}

.top-nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
}

.top-nav a,
.panel-head a,
.post-list a,
.paper-list a,
.footer a {
  color: var(--text);
  text-decoration: none;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-bottom: 0.25em;
  margin-top: 1.0em;
  font-weight: 700;
  font-family: var(--font-prose-headings);
}

.prose p {
  font-weight: var(--font-prose-weight);
  font-size: var(--font-prose-size);
}

.prose strong {
  font-weight: var(--font-strong-weight) !important;
}

.prose h2 {
  font-size: var(--font-prose-h2-size);
}

.prose h3 {
  font-size: var(--font-prose-h3-size);
}

.prose h4 {
  font-size: 1.1em;
}

.prose a:not(.paper-card):not(.idea-card) {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.top-nav a:hover,
.panel-head a:hover,
.post-list a:hover,
.footer a:hover {
  text-decoration: underline;
}

.prose a:not(.paper-card):not(.idea-card):hover {
  color: var(--accent-hover);
}

.citation-link {
  color: var(--accent);
  text-decoration: none;
  /* font-size: 0.9em; */
}

.citation-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.citation-missing {
  color: #b00020;
  /* font-size: 0.9em; */
}

.prose sup:has(> .footnote-ref) {
  line-height: 0;
}

.paper-list:not(.full) a:hover {
  text-decoration: underline;
}

.container {
  width: min(var(--container-width), 100%);
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.container-wide {
  width: min(var(--container-wide-width), 100%);
  margin: 0 auto;
  padding: 0 1rem 1.5rem;
  box-sizing: border-box;
}

.container-full {
  width: min(var(--container-wide-width), 100%);
  margin: 0 auto;
  padding: 0 1rem 2rem;
  box-sizing: border-box;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 0.5rem;
}

.panel {
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.panel-head h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.post-list,
.paper-list,
.idea-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-list li,
.paper-list:not(.full) li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.post-list li:first-child,
.paper-list:not(.full) li:first-child {
  padding-top: 0;
}

.post-list li:last-child,
.paper-list:not(.full) li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.post-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.paper-list.full li, .idea-list.full li {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0;
  margin-bottom: 0.75rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.idea-list.full li.muted {
  padding: 0;
  border: 0;
  background: transparent;
  margin-bottom: 0;
}

.paper-card, .idea-card {
  display: block;
  box-sizing: border-box;
  color: var(--text);
  text-decoration: none;
  padding: 1rem;
  background: var(--bg);
}

.paper-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.paper-year {
  color: var(--muted);
  white-space: nowrap;
}

.paper-card:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.idea-card:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.paper-list.full h3, .idea-list.full h3 {
  margin: 0 0 0.2rem 0;
  font-size: 1.25rem;
  min-width: 0;
  font-family: var(--font-sans);
}

.idea-list.full h3 {
  font-family: var(--font-prose-headings);
}

.home-grid .paper-list.full h3, .home-grid .idea-list.full h3 {
  font-size: 1.125rem;
}

.paper-list.full .paper-card p {
  margin: 0;
}

.idea-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.idea-date {
  white-space: nowrap;
}

.idea-summary {
  margin: 0;
  /* font-size: 1rem; */
  white-space: normal;
  overflow-wrap: anywhere;
}

.idea-meta {
  margin: 0 0 0.5rem;
  font-style: italic;
  /* text-align: right; */
}

.author-self {
  font-weight: 700;
}

.prose p {
  margin: 0 0 var(--space-prose-paragraph);
}

.prose p,
.prose li,
.prose blockquote {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}

.prose code {
  font-family: var(--font-mono);
}

.prose :not(pre) > code {
  background: var(--code-bg);
  color: var(--code-text);
  border: 0;
  border-radius: var(--code-radius-inline);
  padding: 0.2em 0.4em;
  font-size: 85%;
  line-height: 1.45;
}

.code-copy-wrap {
  position: relative;
}

.prose pre {
  margin: 0.75rem 0;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  background: var(--code-bg);
  border: 0;
  border-radius: var(--code-radius-block);
  overflow-x: auto;
}

.prose pre code {
  background: transparent;
  color: var(--code-text);
  border: 0;
  padding: 0;
  font-size: 85%;
  line-height: 1.45;
}

.prose img {
  max-width: 100%;
  height: auto;
}

.about-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--about-photo-radius);
}

.about-photo-wrap {
  position: relative;
  width: var(--about-photo-size);
  max-width: 100%;
  margin: 0;
  border-radius: var(--about-photo-radius);
  overflow: hidden;
}

.about-photo-overlay {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: var(--about-photo-border-width) solid var(--border-photo);
  border-radius: inherit;
  pointer-events: none;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--about-photo-size);
  gap: 1.5rem;
  align-items: start;
}

.about-aside {
  display: flex;
  justify-content: flex-end;
}

.prose ul,
.prose ol {
  margin-top: 0;
  padding-left: 1.25rem;
}

.prose .paper-list.full,
.prose .idea-list.full {
  padding-left: 0;
}

.prose p:has(+ ul),
.prose p:has(+ ol) {
  margin-bottom: var(--space-prose-pre-list);
}

.prose .katex-display {
  position: relative;
  margin: var(--space-prose-display-math) 0;
}

.prose span:has(> .katex-display),
.prose span.katex-display {
  display: block;
  margin: var(--space-prose-display-math) 0;
}

.prose p + .katex-display {
  margin-top: var(--space-prose-display-math-pre-offset);
}

.prose p + span:has(> .katex-display),
.prose p + span.katex-display {
  margin-top: var(--space-prose-display-math-pre-offset);
}

.prose .katex-display + p {
  margin-top: var(--space-prose-display-math-tight);
}

.prose span:has(> .katex-display) + p,
.prose span.katex-display + p {
  margin-top: var(--space-prose-display-math-tight);
}

.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--code-bg) 80%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.copy-button:hover {
  color: var(--text);
  background: var(--copy-button-hover-bg);
}

.copy-button.copied {
  background: var(--accent);
  color: #ffffff;
  transition: none;
}

.copy-button.fading {
  transition: background 0.4s ease-out, color 0.6s ease-out;
}

.copy-button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.copy-button-math {
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  opacity: 0;
  pointer-events: none;
}

.prose .katex-display:hover > .copy-button-math,
.prose .katex-display > .copy-button-math:focus-visible,
.prose .katex-display > .copy-button-math.copied,
.prose .katex-display > .copy-button-math.fading {
  opacity: 1;
  pointer-events: auto;
}

h1.post-title {
  margin: 2.5rem 0 0.5rem;
  font-size: var(--font-post-title-size);
  line-height: 1.15;
}

.post-header {
  margin-bottom: var(--space-post-header-bottom);
}

.post-header + p {
  font-family: var(--font-post-lead);
  font-size: var(--font-post-lead-size);
  font-weight: var(--font-post-lead-weight);
  font-style: var(--font-post-lead-style);
}

.post-citation {
  margin: 1.25rem 0 0.75rem;
}

.post-citation .citation-title {
  font-style: italic;
}

.bibliography {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.bibliography h2 {
  font-size: 1.5em;
  margin-bottom: 0.25em;
  margin-top: 1.0em;
}

.bibliography-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875em;
}

.bibliography-list li {
  margin: 0 0 0.5rem;
}

.footnotes {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}

.footnotes::before {
  content: "Footnotes";
  display: block;
  font-family: var(--font-prose-headings);
  font-size: 1.5em;
  margin-bottom: 0.25em;
  margin-top: 1.0em;
  font-weight: 700;
}

.footnotes hr {
  display: none;
}

.footnotes ol {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875em;
}

.footnotes li:not(:last-child) {
  margin: 0 0 0.5rem;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.9rem;
}

.italic {
  font-style: italic;
}

.empty-state {
  margin: 0;
}

.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
}

.footer ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
}

@media (max-width: 50rem) {
  .site-header {
    padding-top: 1.5rem;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .site-title {
    font-size: 1.25rem;
  }

  .post-title {
    margin-top: 0.75rem;
    font-size: 2rem;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-aside {
    justify-content: flex-start;
  }

  .paper-title-row,
  .idea-title-row {
    gap: 0.5rem;
  }

  .post-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

@media (max-width: 40rem) {
  .header-inner {
    flex-direction: column;
    gap: 1rem;
  }

  h1.post-title {
    margin-top: 2rem;
  }

  .top-nav {
    position: static;
    margin-top: 0;
    order: -1;
    align-self: flex-end;
  }

  .top-nav ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer ul {
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
  }
}