:root{
  --content-max: 72ch;
  --line: 1.7;
  --accent: #1a73e8;
  --muted:  #6b7280;
  --text:   #111827;
  --rule:   #e5e7eb;
  --footnote-bg: #fffdf3;
  --target-bg: #fff7cc;
  --target-ring: #f59e0b33;

  /* Fonts: match the reference blog’s feel (serif body + modern sans UI) */
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --mono:  "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Base */
html, body { background: #fff; }
body {
  color: var(--text);
  font-size: 16px;
  line-height: var(--line);
  font-family: var(--sans);          /* body in editorial serif */
  text-align: justify;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin: 0 auto;
  padding: clamp(1.25rem, 2vw + 0.5rem, 3rem);
  max-width: var(--content-max);
  text-rendering: optimizeLegibility;

  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
  text-justify: inter-word;
  hanging-punctuation: first allow-end;
  orphans: 2;
  widows: 2;
  
  letter-spacing: -0.01em;
}

/* Headings in clean sans for contrast (like the reference) */
h1, h2, h3, h4, h5, h6, table.title-block table.date-block strong {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  letter-spacing: -0.01em;
  margin: 2em 0 0.75em 0;
}
h1 { font-size: 3.75rem; margin-top: 0; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.25rem; }
/* Title block fine-tuning */
table.title-block { width: 100%; margin: 0 0 1.5rem 0 !important; text-align: left;}
table.title-block td { padding: 0 !important; }
table.title-block i { color: var(--muted); }
table.title-block {font-size: 3.75rem; line-height: 1.1; }
table.date-block {font-size: 1rem; }

/* Math stack (kept) */
m|math, math {
  font-family: "STIX Two Math","TeX Gyre Pagella Math","Latin Modern Math","Cambria Math",serif;
}

/* Misc cleanups (kept) */
font, class { font: inherit !important; color: inherit !important; }
span[style*="margin-left"][style*="0em"] { display: none; }

/* --- Footnote popovers (JS-enhanced) ------------------------------------- */

/* Hide source footnote blocks only when JS is running (progressive enhancement). */
.footnotes-enhanced .footnote {  }

.fn-wrapper { position: relative; display: inline; }

/* The clickable/hoverable footnote reference */
.fn-ref {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
  color: inherit;
}
.fn-ref sup { line-height: 0; font-size: 0.8em; }
.fn-ref:focus-visible {
  outline: none;
  background: var(--target-bg);
  box-shadow: 0 0 0 3px var(--target-ring);
  border-radius: 3px;
}

/* The bubble itself */
.fn-bubble {
  position: absolute;
  z-index: 1000;
  padding: 0.75rem 0.875rem;
  background: var(--footnote-bg);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: left;
  max-width: 36rem;           /* capped width for readability */
  width: max-content;         /* shrink to fit */
  min-width: 20ch;
  word-wrap: break-word;
  hyphens: auto;
}
.fn-bubble a { color: var(--accent); }

/* Little caret arrow */
.fn-bubble::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--arrow-shift, 0px));
  width: 12px;
  height: 12px;
  background: var(--footnote-bg);
  border: 1px solid var(--rule);
  transform: translate(-50%, 0) rotate(45deg);
}

/* Position caret depending on placement */
.fn-bubble.is-below::after { top: -7px;    border-left: 0; border-top: 0; }
.fn-bubble.is-above::after { bottom: -7px; border-right: 0; border-bottom: 0; }

/* Print: show the original bottom notes, hide popovers */
@media print {
  .fn-bubble { display: none !important; }
  .footnote  { display: block !important; }
}

.rss-btn img {
  display: block;
  border-radius: 12px;       /* matches the button shape */
}
.rss-btn:hover img { filter: brightness(1.05); }