/* ============================================================
   Loss and Found — blog design system
   Structure inspired by thinkingmachines.ai/blog (slim header,
   list index, sticky left TOC, serif article), accents from the
   IBM Plex survey aesthetic. Self-contained: only lossfound
   layouts load this file.
   ============================================================ */

:root {
  --lf-paper:     #FCFCFA;
  --lf-ink:       #171B1E;
  --lf-ink-soft:  #4A5257;
  --lf-ink-faint: #8A9196;
  --lf-rule:      #DDDDD4;
  --lf-rule-soft: #EBEBE3;
  --lf-accent:    #2563eb;
  --lf-accent-deep: #1d4ed8;
  --lf-slate:     #3C6E8F;
  --lf-green:     #0E5A46;
  --lf-green-soft:#E7F0EC;
  --lf-amber:     #A8720A;
  --lf-amber-soft:#FBF3E2;
  --lf-slate-soft:#E9F0F4;
  --lf-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --lf-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lf-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lf-header-h: 54px;
}

html { scroll-behavior: smooth; }

body.lf-body {
  margin: 0;
  background: var(--lf-paper);
  color: var(--lf-ink);
  font-family: var(--lf-serif);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- slim header ---------------------------------------------------- */
.lf-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--lf-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.4rem;
  background: color-mix(in srgb, var(--lf-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lf-rule-soft);
  font-family: var(--lf-sans);
  font-size: 0.88rem;
}
.lf-header a { color: var(--lf-ink); text-decoration: none; }
.lf-header a:hover { color: var(--lf-accent); }
.lf-brand { font-weight: 600; letter-spacing: -0.01em; }
.lf-header nav { display: flex; gap: 1.4rem; }
.lf-header nav a { color: var(--lf-ink-soft); font-weight: 500; }

/* ---- index (blog home) ---------------------------------------------- */
.lf-index {
  max-width: 49rem;
  margin: 0;
  padding: 3.2rem 1.4rem 4rem calc(11rem + 2.6rem + 1.6rem);
}
@media (max-width: 1080px) {
  .lf-index { margin: 0 auto; padding: 3.2rem 1.4rem 4rem; }
}
.lf-index-kicker {
  font-family: var(--lf-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lf-accent);
  margin-bottom: 0.7rem;
}
.lf-index-title {
  font-family: var(--lf-serif);
  font-size: 2.6rem; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 0.6rem;
}
.lf-index-sub {
  font-size: 1.05rem; color: var(--lf-ink-soft);
  font-style: italic;
  margin: 0 0 2.6rem;
}
.lf-postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lf-rule); }
.lf-postlist li { margin: 0; padding: 0; border-bottom: 1px solid var(--lf-rule-soft); }
.lf-postitem {
  display: grid;
  grid-template-columns: 8.2rem 1fr;
  gap: 1.4rem;
  padding: 1.35rem 0.6rem;
  text-decoration: none !important;
  color: inherit;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.lf-postitem:hover { background: rgba(128,128,128,0.07); }
.lf-postitem time {
  font-family: var(--lf-mono);
  font-size: 0.78rem;
  color: var(--lf-ink-faint);
  padding-top: 0.3rem;
  white-space: nowrap;
}
.lf-postitem .lf-pi-title {
  display: block;
  font-family: var(--lf-serif);
  font-size: 1.22rem; font-weight: 600;
  line-height: 1.35;
  color: var(--lf-ink);
  margin: 0 0 0.25rem;
}
.lf-postitem:hover .lf-pi-title { color: var(--lf-accent); }
.lf-postitem .lf-pi-sub {
  display: block;
  font-size: 0.95rem; color: var(--lf-ink-soft);
  line-height: 1.55; margin: 0 0 0.3rem;
}
.lf-postitem .lf-pi-meta {
  display: block;
  font-family: var(--lf-mono);
  font-size: 0.72rem; color: var(--lf-ink-faint);
}

/* ---- post shell: sticky toc + article -------------------------------- */
.lf-shell {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 49rem);
  gap: 2.6rem;
  justify-content: start;
  padding: 2.8rem 1.4rem 4.5rem 1.6rem;
}
.lf-toc {
  font-family: var(--lf-sans);
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.14;
  transition: opacity 0.45s ease;
}
.lf-toc:hover, .lf-toc.lf-toc-awake { opacity: 1; }
.lf-toc-inner {
  position: sticky; top: calc(var(--lf-header-h) + 1.6rem);
  max-height: calc(100vh - var(--lf-header-h) - 3rem);
  overflow-y: auto;
  padding-right: 0.6rem;
  scrollbar-width: thin;
}
.lf-toc-title {
  font-family: var(--lf-mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--lf-ink-faint);
  margin-bottom: 0.7rem;
}
.lf-toc ul { list-style: none; margin: 0; padding: 0; }
.lf-toc ul ul { padding-left: 0.85rem; }
.lf-toc li { margin: 0; }
.lf-toc a {
  display: block;
  padding: 0.18rem 0.45rem;
  color: var(--lf-ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
}
.lf-toc a:hover { color: var(--lf-ink); background: rgba(128,128,128,0.07); }
.lf-toc a.active {
  color: var(--lf-accent);
  border-left-color: var(--lf-accent);
  background: rgba(37, 99, 235, 0.06);
  font-weight: 500;
}

/* ---- post header ------------------------------------------------------ */
.lf-post-head { margin: 0 0 2.4rem; }
.lf-kicker {
  font-family: var(--lf-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lf-accent);
  margin-bottom: 0.75rem;
}
.lf-title {
  font-family: var(--lf-serif);
  font-size: 2.35rem; font-weight: 600;
  line-height: 1.14; letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--lf-ink);
}
.lf-byline {
  font-family: var(--lf-mono);
  font-size: 0.76rem;
  color: var(--lf-ink-faint);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--lf-rule);
}
.lf-byline b { color: var(--lf-ink-soft); font-weight: 500; }

/* ---- article typography ---------------------------------------------- */
.lf-article { min-width: 0; }
/* The academicpages theme caps every .page__content child at max-width:50rem.
   .lf-article is a page__content, so that cap would pin the body text well
   left of our (wider) reading column and leave dead space. Lift it so the
   text fills the column the grid gives it. */
.lf-article.page__content > p,
.lf-article.page__content > ul,
.lf-article.page__content > ol,
.lf-article.page__content > h1,
.lf-article.page__content > h2,
.lf-article.page__content > h3,
.lf-article.page__content > h4,
.lf-article.page__content > blockquote,
.lf-article.page__content > pre,
.lf-article.page__content > table { max-width: none; }
.lf-article p, .lf-article > ul li, .lf-article > ol li {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.lf-article .note li, .lf-article .lf-def li, .lf-article .lf-algo li,
.lf-article .lf-cap, .lf-article .lf-byline { text-align: left; hyphens: manual; }
.lf-article > p, .lf-article li { font-size: 1.0em; }
.lf-article h1, .lf-article h2, .lf-article h3, .lf-article h4 {
  font-family: var(--lf-serif);
  color: var(--lf-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  scroll-margin-top: calc(var(--lf-header-h) + 1.2rem);
}
.lf-article h1 { font-size: 1.75rem; margin: 3rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--lf-rule); }
.lf-article h2 { font-size: 1.45rem; margin: 2.6rem 0 0.9rem; }
.lf-article h3 { font-size: 1.12rem; margin: 2rem 0 0.7rem; font-family: var(--lf-sans); font-weight: 600; }
.lf-article a { color: var(--lf-accent); text-decoration: none; }
.lf-article a:hover { color: var(--lf-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.lf-article strong { font-weight: 600; }
.lf-article hr { border: 0; border-top: 1px solid var(--lf-rule-soft); margin: 2.4rem 0; }
.lf-article blockquote {
  margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--lf-rule);
  color: var(--lf-ink-soft); font-style: italic;
}
.lf-article img { max-width: 100%; height: auto; }

/* code */
.lf-article code {
  font-family: var(--lf-mono);
  color: var(--lf-ink);
  font-size: 0.84em;
  background: #F1F1EA;
  border: 1px solid var(--lf-rule-soft);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.lf-article pre {
  background: #F6F6F0;
  border: 1px solid var(--lf-rule-soft);
  border-radius: 8px;
  padding: 1em 1.2em;
  overflow-x: auto;
  line-height: 1.6;
  margin: 1.5rem 0;
}
.lf-article pre code { background: transparent; border: 0; padding: 0; font-size: 0.8rem; }
.lf-article .highlight { background: transparent; }
.lf-article .highlight pre { background: #F6F6F0; }

/* syntax highlighting: scoped light theme (overrides Monokai from main.css) */
.lf-article div.highlighter-rouge, .lf-article figure.highlight {
  background: transparent; border: 0; box-shadow: none; margin: 1.5rem 0;
}
.lf-article div.highlighter-rouge::before, .lf-article figure.highlight::before { content: none; }
.lf-article .highlight, .lf-article .highlight pre {
  background: #F6F6F0; color: var(--lf-ink);
}
.lf-article .highlight pre { border: 1px solid var(--lf-rule-soft); border-radius: 8px; }
.lf-article .highlight span { color: var(--lf-ink); background: transparent; text-shadow: none; font-style: normal; font-weight: 400; }
.lf-article .highlight .c, .lf-article .highlight .c1, .lf-article .highlight .cm,
.lf-article .highlight .cs, .lf-article .highlight .cp { color: #8A9196; font-style: italic; }
.lf-article .highlight .k, .lf-article .highlight .kn, .lf-article .highlight .kd,
.lf-article .highlight .kc, .lf-article .highlight .kr, .lf-article .highlight .kt,
.lf-article .highlight .ow { color: #3C6E8F; font-weight: 600; }
.lf-article .highlight .s, .lf-article .highlight .s1, .lf-article .highlight .s2,
.lf-article .highlight .sd, .lf-article .highlight .sb, .lf-article .highlight .se,
.lf-article .highlight .si, .lf-article .highlight .sa { color: #0E5A46; }
.lf-article .highlight .mi, .lf-article .highlight .mf, .lf-article .highlight .mh,
.lf-article .highlight .mo, .lf-article .highlight .il { color: #A8720A; }
.lf-article .highlight .nf, .lf-article .highlight .fm, .lf-article .highlight .nc { color: #2563eb; }
.lf-article .highlight .nb, .lf-article .highlight .bp, .lf-article .highlight .nd { color: #3C6E8F; }
.lf-article .highlight .o { color: #4A5257; }
.lf-article .highlight .gp { color: #8A9196; }

/* tables */
.lf-article thead, .lf-article thead th, .lf-article tbody, .lf-article tr { background: transparent; }
.lf-article table {
  background: transparent;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--lf-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 1.6rem 0;
  display: block; overflow-x: auto;
}
.lf-article th {
  font-family: var(--lf-mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lf-ink-soft);
  text-align: left;
  background: transparent;
  border-bottom: 2px solid var(--lf-ink);
  padding: 0.5em 0.8em;
}
.lf-article td { border-bottom: 1px solid var(--lf-rule-soft); padding: 0.55em 0.8em; vertical-align: top; }
.lf-article tr:hover td { background: rgba(128,128,128,0.045); }

/* note boxes (survey-style, labeled) */
.lf-note, .lf-article .note, .lf-article .warning, .lf-article .intuition {
  font-family: var(--lf-sans);
  font-size: 0.92rem; line-height: 1.6;
  padding: 0.1em 0 0.1em 1.4em;
  margin: 1.6rem 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--lf-rule);
}

/* definition / algorithm boxes for encyclopedia entries */
.lf-def, .lf-algo {
  font-family: var(--lf-sans);
  font-size: 0.92rem; line-height: 1.62;
  border: 1px solid var(--lf-rule);
  padding: 1.1em 1.3em;
  margin: 1.7rem 0;
  background: #fff;
}
.lf-def .lf-lbl, .lf-algo .lf-lbl, .lf-fig .lf-lbl {
  display: inline-block;
  font-family: var(--lf-mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 0.4em;
}
.lf-def .lf-lbl  { color: var(--lf-ink-soft); }
.lf-algo .lf-lbl { color: var(--lf-ink-soft); }
.lf-algo ol { margin: 0.4em 0 0.2em 1.2em; padding: 0; }
.lf-algo ol li { margin: 0.3em 0; }

/* figures / block diagrams */
.lf-fig {
  margin: 2rem 0;
  text-align: center;
}
.lf-fig svg { max-width: 100%; height: auto; }
.lf-fig .lf-cap {
  font-family: var(--lf-sans);
  font-size: 0.82rem;
  color: var(--lf-ink-soft);
  max-width: 38rem;
  margin: 0.7rem auto 0;
  line-height: 1.5;
  text-align: center;
}
.lf-fig .lf-lbl { color: var(--lf-ink-soft); }

/* equation blocks reused from posts get a quieter skin */
.lf-article .eq-block {
  background: none;
  border-left: 2px solid var(--lf-ink);
  border-radius: 0;
}

/* ---- margin notes (right side, Tufte-style) ------------------------- */
.lf-article { counter-reset: sidenote; }
.lf-sn { counter-increment: sidenote; }
.lf-sn-ref::after {
  content: counter(sidenote);
  font-family: var(--lf-mono);
  font-size: 0.62em;
  font-weight: 600;
  color: var(--lf-accent);
  vertical-align: super;
  line-height: 0;
  padding-left: 0.08em;
}
.lf-sn-body {
  float: right;
  clear: right;
  margin-right: -20.4rem;
  width: 17rem;
  margin-top: 0.15rem;
  margin-bottom: 0.9rem;
  font-family: var(--lf-sans);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--lf-ink-soft);
}
.lf-sn-body::before {
  content: counter(sidenote);
  font-family: var(--lf-mono);
  font-size: 0.72em;
  font-weight: 600;
  color: var(--lf-accent);
  vertical-align: super;
  padding-right: 0.35em;
}
@media (max-width: 1460px) {
  .lf-sn-body {
    float: none; clear: none;
    display: block;
    width: auto; margin: 0.7rem 0;
    padding: 0.55rem 0.85rem;
    background: #F6F6F0;
    border-left: 3px solid var(--lf-rule);
    border-radius: 0 6px 6px 0;
  }
}
@media (max-width: 1460px) {
  html[data-rt="dark"] .lf-sn-body { background: #1C1F23; }
  html[data-rt="sepia"] .lf-sn-body { background: #EFE3C6; }
}

/* ---- citations: in-text links + margin reference cards --------------- */
a.lf-cite { color: var(--lf-accent); text-decoration: none; font-size: 0.92em; }
a.lf-cite:hover { text-decoration: underline; }
.lf-refnote {
  float: right;
  clear: right;
  margin-right: -20.4rem;
  width: 17rem;
  margin-top: 0.15rem;
  margin-bottom: 0.8rem;
  font-family: var(--lf-sans);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--lf-ink-faint);
}
.lf-refnote b { color: var(--lf-accent); font-family: var(--lf-mono); font-weight: 600; font-size: 0.9em; }
.lf-refnote a { color: var(--lf-ink-soft); text-decoration: none; }
.lf-refnote a:hover { color: var(--lf-accent); }
ol.refs li { scroll-margin-top: 80px; }
ol.refs li:target { background: var(--lf-slate-soft); border-radius: 6px; }
/* The reference rail's cards sit at a fixed x (left-anchored shell), ending at
   ~1387px, so they fit any viewport >= ~1388px. Hide only below 1400px (a 13px
   safety margin), not below 1461px, so the column also shows on 1400-1460px
   laptops (e.g. 1440) instead of collapsing to bare citation links there. */
@media (max-width: 1399px) {
  .lf-refnote { display: none; }
}
/* On wide screens, the margin rail is pinned flush to the viewport's right
   edge and the reading column grows to meet the *midpoint* of the gap that
   opens up between the article and the rail. --lf-extra is that half-gap; it
   is added to the article width and subtracted from the rail's translate, so
   the two cancel and the cards stay exactly flush-right at every width while
   only the article's right edge advances. Capped so 4K screens don't get
   runaway line lengths. */
@media (min-width: 1461px) {
  .lf-shell {
    /* --lf-col drives BOTH the reading column and the note-rail translate,
       so the rail is always exactly flush-right and can never overflow.
       Target = the midpoint of the old article→rail gap (50vw + 9.15rem);
       clamped so it (a) never gets so wide the 15rem note rail won't fit
       (100vw - 34.1rem) and (b) caps at 60rem for readable line length. */
    --lf-col: clamp(49rem, min(50vw + 10.15rem, 100vw - 35.8rem), 62rem);
    grid-template-columns: 9.5rem minmax(0, var(--lf-col));
  }
  .lf-index { max-width: 56rem; }
  .lf-sn-body, .lf-refnote {
    /* Flush-right pin (100vw - 34.1rem - col), but the text→rail gutter is
       capped at ~11rem so ultra-wide screens hold the notes near the text
       instead of flinging them to the far edge. */
    transform: translateX(max(0px, min(8.6rem, calc(100vw - 35.8rem - var(--lf-col)))));
  }
}

/* hide posts' inline TOC nav (replaced by sticky left TOC) */
.lf-article nav.toc { display: none; }

/* footer */
.lf-footer {
  font-family: var(--lf-mono);
  font-size: 0.72rem;
  color: var(--lf-ink-faint);
  text-align: center;
  padding: 2.2rem 1rem 2.6rem;
  border-top: 1px solid var(--lf-rule-soft);
}
.lf-footer a { color: var(--lf-ink-faint); }
.lf-footer a:hover { color: var(--lf-accent); }

/* ---- responsive ------------------------------------------------------- */
.lf-shell.lf-noToc { grid-template-columns: minmax(0, 46rem); }

@media (max-width: 1080px) {
  .lf-shell { grid-template-columns: minmax(0, 46rem); }
  .lf-toc { display: none; }
}
@media (max-width: 600px) {
  body.lf-body { font-size: 16px; }
  .lf-title { font-size: 1.8rem; }
  .lf-index-title { font-size: 2rem; }
  .lf-postitem { grid-template-columns: 1fr; gap: 0.15rem; }
  .lf-postitem time { padding-top: 0; }
}

/* print: hide chrome */
@media print { .lf-header, .lf-toc, .lf-footer { display: none; } }

/* ============================================================
   Site pages restyled in the same language (homepage, pubs)
   Content markup unchanged; this only re-skins fonts/colors.
   ============================================================ */
.lf-page { max-width: 66rem; margin: 0 auto; padding: 2.4rem 1.4rem 4rem; }

body.lf-body .about { gap: 2.4rem; margin: 1.2rem 0 2.4rem; }
body.lf-body .about__name {
  font-family: var(--lf-serif);
  font-weight: 600; letter-spacing: -0.018em;
  color: var(--lf-ink);
}
body.lf-body .about__role { font-family: var(--lf-sans); font-weight: 500; color: var(--lf-ink); }
body.lf-body .about__role .about__sep { color: var(--lf-accent); }
body.lf-body .about__desc { font-family: var(--lf-serif); font-style: italic; color: var(--lf-ink-soft); }
body.lf-body .about__photo { border-color: #fff; box-shadow: 0 14px 30px rgba(23,27,30,0.14); }
body.lf-body .about__links a {
  background: #fff; border-color: var(--lf-rule);
  color: var(--lf-ink-soft) !important;
}
body.lf-body .about__links a:hover {
  background: var(--lf-accent); border-color: var(--lf-accent); color: #fff !important;
}

body.lf-body .lf-page h2 {
  font-family: var(--lf-serif);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--lf-ink);
  border-bottom: 1px solid var(--lf-rule);
  padding-bottom: 0.35rem;
  margin-top: 2.6rem;
}

body.lf-body .timeline__row { border-left-color: var(--lf-rule); }
body.lf-body .timeline__row::before { background: var(--lf-paper); border-color: var(--lf-accent); }
body.lf-body .timeline__when { font-family: var(--lf-mono); font-size: 0.74rem; color: var(--lf-ink-faint); }
body.lf-body .timeline__what { font-family: var(--lf-serif); color: var(--lf-ink); }
body.lf-body .timeline__what strong { font-weight: 600; }
body.lf-body .timeline__note { font-family: var(--lf-sans); color: var(--lf-ink-faint); }
body.lf-body .timeline__logo, body.lf-body .timeline__badge { border-color: var(--lf-rule-soft); background: #fff; }

body.lf-body .pub { border-top-color: var(--lf-rule-soft); }
body.lf-body .pub:last-child { border-bottom-color: var(--lf-rule-soft); }
body.lf-body .pub__title { font-family: var(--lf-serif); font-weight: 600; color: var(--lf-ink) !important; }
body.lf-body .pub__title:hover { color: var(--lf-accent) !important; }
body.lf-body .pub__authors { font-family: var(--lf-sans); font-size: 0.9rem; }
body.lf-body .pub__venue { font-family: var(--lf-mono); font-size: 0.76rem; }
body.lf-body .pub__tldr { font-family: var(--lf-sans); }
body.lf-body .pub__thumb { border-color: var(--lf-rule-soft); }


/* ---- de-slop overrides ----------------------------------------------
   Older posts carry inline pastel callout styles (tinted rounded cards,
   colored pill labels, numbered circle badges). Neutralize them site-wide:
   asides are a hairline left rule + run-in small-caps label, nothing else. */
.lf-article .note, .lf-article .intuition, .lf-article .warning,
.lf-article .wild, .lf-article .idea, .lf-article .builds, .lf-article .takeaway {
  background: none !important;
  border: 0 !important;
  border-left: 1px solid var(--lf-rule) !important;
  border-radius: 0 !important;
  padding: 0.1em 0 0.1em 1.4em !important;
  color: inherit !important; /* legacy cards hardcode ink; asides follow the reading theme */
}
.lf-article .note strong, .lf-article .intuition strong, .lf-article .warning strong,
.lf-article .wild strong, .lf-article .idea strong, .lf-article .builds strong {
  color: inherit !important;
}
.lf-article .intuition .lbl, .lf-article .wild .lbl, .lf-article .note .lbl,
.lf-article .warning .lbl, .lf-article .takeaway .lbl {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--lf-ink-soft) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  margin-right: 0.7em;
}
.lf-article .eq-block {
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--lf-ink) !important;
  border-radius: 0 !important;
  padding-left: 1.4em !important;
}
.lf-article .steps .step {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.lf-article .steps .step::before {
  background: none !important;
  color: var(--lf-ink) !important;
  font-weight: 700;
}
.lf-article .anim, .lf-article .diagram {
  background: #fff !important;
  border-radius: 0 !important;
}

/* ---------- Reading themes (paper is the :root default above) ---------- */

.lf-themes { display: inline-flex; gap: 8px; margin-left: 16px; vertical-align: middle; }
.lf-themes button {
  width: 14px; height: 14px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--lf-ink-faint); background: #FCFCFA; appearance: none;
}
.lf-themes button[data-set-rt="sepia"] { background: #F4EAD5; }
.lf-themes button[data-set-rt="dark"]  { background: #191B1E; }
.lf-themes button[aria-pressed="true"] { outline: 2px solid var(--lf-accent); outline-offset: 1px; }
.lf-themes button:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 1px; }

/* Sepia: warm paper, same ink logic */
html[data-rt="sepia"] {
  /* theme-layer vars from _custom.scss must follow the reading theme too,
     or main.css-styled elements (timeline strong, tables) keep paper ink */
  --ink:         #3B3024;
  --ink-soft:    #5C5040;
  --line:        #D9C8A4;
  --bg:          #F4EAD5;
  --bg-soft:     #EDE0C2;
  --accent:      #7A4E14;
  --accent-deep: #5F3C0E;
  --lf-paper:     #F4EAD5;
  --lf-ink:       #3B3024;
  --lf-ink-soft:  #5C5040;
  --lf-ink-faint: #8A7B63;
  --lf-rule:      #D9C8A4;
  --lf-rule-soft: #E6D8B8;
  --lf-accent:    #7A4E14;
  --lf-accent-deep: #5F3C0E;
  --lf-slate:     #4E6478;
  --lf-green:     #3F6252;
  --lf-green-soft:#E8DFC6;
  --lf-amber:     #8A5A1E;
  --lf-amber-soft:#EFE2C2;
  --lf-slate-soft:#E9DFC6;
}
html[data-rt="sepia"] .eq-block .eq-label { color: #8A7B63; }
html[data-rt="sepia"] ol.refs li { color: #5C5040; }
html[data-rt="sepia"] ol.refs li::before { color: #8A7B63; }
html[data-rt="sepia"] .compendium-card { background: #F0E5CA; border-color: #D9C8A4; }
html[data-rt="sepia"] .compendium-card .compendium-tag { color: #8A7B63; border-color: #D9C8A4; }
html[data-rt="sepia"] .spec-table td:first-child { color: #8A7B63; }
html[data-rt="sepia"] .lf-article .highlight pre,
html[data-rt="sepia"] .lf-article pre { background: #EFE3C6; }

/* Dark: soft night mode, not pure black */
html[data-rt="dark"] {
  --ink:         #D8D5CE;
  --ink-soft:    #A8A49A;
  --line:        #34373C;
  --bg:          #17191C;
  --bg-soft:     #1C1F23;
  --accent:      #8FB0E8;
  --accent-deep: #A9C4F0;
  --lf-paper:     #17191C;
  --lf-ink:       #D8D5CE;
  --lf-ink-soft:  #A8A49A;
  --lf-ink-faint: #7C786F;
  --lf-rule:      #34373C;
  --lf-rule-soft: #26292E;
  --lf-accent:    #8FB0E8;
  --lf-accent-deep: #A9C4F0;
  --lf-slate:     #7FA6C4;
  --lf-green:     #63A98F;
  --lf-green-soft:#20302B;
  --lf-amber:     #C99B4A;
  --lf-amber-soft:#332B1C;
  --lf-slate-soft:#232A31;
}
html[data-rt="dark"] .eq-block .eq-label { color: #7C786F; }
html[data-rt="dark"] ol.refs li { color: #A8A49A; }
html[data-rt="dark"] ol.refs li::before { color: #7C786F; }
html[data-rt="dark"] .compendium-card { background: #1C1F23; border-color: #2E3237; }
html[data-rt="dark"] .compendium-card .compendium-name { color: #D8D5CE; }
html[data-rt="dark"] .compendium-card .compendium-tag { color: #7C786F; border-color: #3A3E44; }
html[data-rt="dark"] .spec-table td:first-child { color: #7C786F; }
html[data-rt="dark"] .lf-def,
html[data-rt="dark"] .lf-algo { background: #1C1F23; border-color: #2E3237; }
html[data-rt="dark"] .lf-def .lf-lbl,
html[data-rt="dark"] .lf-algo .lf-lbl,
html[data-rt="dark"] .lf-fig .lf-lbl { background: #22252A; color: #A8A49A; }
html[data-rt="dark"] .lf-article .highlight { background: #131518; }
html[data-rt="dark"] .bibtex pre { background: #131518; border-color: #2E3237; }
html[data-rt="dark"] .bibtex .copy-btn { background: #1C1F23; color: #A8A49A; border-color: #3A3E44; }

/* Dark: code blocks get a night palette */
html[data-rt="dark"] .lf-article .highlight pre,
html[data-rt="dark"] .lf-article pre { background: #131518; }
html[data-rt="dark"] .lf-article code { background: #22252A; }
html[data-rt="dark"] .lf-article pre code { background: transparent; }
html[data-rt="dark"] .highlight .c, html[data-rt="dark"] .highlight .c1, html[data-rt="dark"] .highlight .cm { color: #6E7681; }
html[data-rt="dark"] .highlight .k, html[data-rt="dark"] .highlight .kn, html[data-rt="dark"] .highlight .kd { color: #B08CD6; }
html[data-rt="dark"] .highlight .s, html[data-rt="dark"] .highlight .s1, html[data-rt="dark"] .highlight .s2, html[data-rt="dark"] .highlight .sd { color: #9CB87F; }
html[data-rt="dark"] .highlight .mi, html[data-rt="dark"] .highlight .mf { color: #D8A45C; }
html[data-rt="dark"] .highlight .n, html[data-rt="dark"] .highlight .nn, html[data-rt="dark"] .highlight .p, html[data-rt="dark"] .highlight .o { color: #C4C1B9; }
html[data-rt="dark"] .highlight .nf, html[data-rt="dark"] .highlight .nc { color: #8FB0E8; }
html[data-rt="dark"] .highlight .bp, html[data-rt="dark"] .highlight .nb { color: #7FA6C4; }

/* Dark: diagrams keep their printed colors on a paper plate, like images in a reader */
html[data-rt="dark"] .lf-fig svg { background: #F3F2EC; border: 1px solid #2E3237; border-radius: 6px; padding: 10px 6px; }

/* Dark: posts with inline component styles (attention's diff cards etc.) are
   printed artifacts too — same paper-plate treatment, with the printed ink
   re-scoped locally so flipped theme vars don't bleed light text onto them */
html[data-rt="dark"] .att-fig,
html[data-rt="dark"] .diff-card,
html[data-rt="dark"] .diff-notes,
html[data-rt="dark"] .abstraction-card {
  background: #F3F2EC;
  border: 1px solid #2E3237;
  border-radius: 6px;
  color: #1a1d24;
  --lf-ink: #1a1d24;
  --lf-ink-soft: #565d6b;
  --lf-ink-faint: #6b7280;
  --ink: #1a1d24;
  --ink-soft: #565d6b;
}
html[data-rt="dark"] .att-fig pre,
html[data-rt="dark"] .diff-card pre,
html[data-rt="dark"] .diff-notes pre,
html[data-rt="dark"] .abstraction-card pre { background: #FFFFFF; }
html[data-rt="dark"] .att-fig code,
html[data-rt="dark"] .diff-card code,
html[data-rt="dark"] .diff-notes code,
html[data-rt="dark"] .abstraction-card code { background: #ECEEE9; color: inherit; }
html[data-rt="dark"] .att-fig .highlight span,
html[data-rt="dark"] .diff-card .highlight span,
html[data-rt="dark"] .diff-notes .highlight span,
html[data-rt="dark"] .abstraction-card .highlight span { color: #1a1d24; }

/* Dark: images stay legible without glare */
html[data-rt="dark"] .lf-article img { filter: brightness(0.88); }

html[data-rt] body.lf-body,
.lf-themes button { transition: background 0.25s ease, color 0.25s ease; }

/* Rail cards: explicit destination link */
.lf-refnote-url {
  display: inline-block; margin-top: 3px;
  font-family: var(--lf-mono); font-size: 0.68rem;
  color: var(--lf-accent) !important; word-break: break-all;
}
.lf-refnote-url:hover { text-decoration: underline; }


/* ---- focus mode: text-only fullscreen reading ------------------------- */
.lf-focus-btn {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  font-family: var(--lf-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lf-ink-soft); background: var(--lf-bg);
  border: 1px solid var(--lf-rule); padding: 0.4em 0.75em; cursor: pointer;
  opacity: 0.3; transition: opacity 0.3s ease;
}
.lf-focus-btn:hover, html.lf-focus .lf-focus-btn { opacity: 1; }
@media (max-width: 600px) { .lf-focus-btn { display: none; } }

html.lf-focus { --lf-header-h: 0px; }
html.lf-focus .lf-header,
html.lf-focus .lf-toc,
html.lf-focus .lf-footer,
html.lf-focus .lf-refnote { display: none; }
html.lf-focus .lf-shell {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
  padding-top: 3rem;
}
/* margin notes fold inline (same treatment as narrow screens) */
html.lf-focus .lf-sn-body {
  float: none; clear: none; display: block;
  width: auto; margin: 0.7rem 0;
  padding: 0.55rem 0.85rem;
  background: rgba(128,128,128,0.07);
  border-left: 3px solid var(--lf-rule);
  border-radius: 0;
  transform: none;
}

/* Cloudflare Access sign-out link in the blog nav */
.lf-header nav .lf-signout { opacity: 0.6; }
.lf-header nav .lf-signout:hover { opacity: 1; }