/* post.css — article reading view
   centered prose · left sticky TOC · right margin notes · code · math */

.post-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}

/* ---- article header ---- */
.post-head{padding:64px 0 0;max-width:760px;margin:0 auto;text-align:center;}
.post-head .cat{justify-content:center;margin-bottom:22px;}
.post-title{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,60px);
  line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance;}
.post-title.is-cn{font-family:var(--cn);font-weight:600;line-height:1.16;letter-spacing:0;}
.post-sub{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,23px);
  line-height:1.5;color:var(--ink-2);margin:22px auto 0;max-width:42ch;text-wrap:pretty;}
.post-sub.is-cn{font-family:var(--cn);font-style:normal;}
.post-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;align-items:center;
  margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;}
.post-meta .dotsep{width:3px;height:3px;border-radius:50%;background:var(--line-2);}
.post-cover{margin:48px auto 0;max-width:1060px;}
.post-cover .ph{aspect-ratio:21/9;border-radius:28px;min-height:300px;}

/* ---- grid: TOC | prose | margin ---- */
.post-grid{display:grid;grid-template-columns:208px minmax(0,704px) 1fr;
  column-gap:52px;margin-top:60px;align-items:start;}
.post-grid > .toc{grid-column:1;}
.post-grid > .prose{grid-column:2;}

/* ---- table of contents ---- */
.toc{position:sticky;top:96px;padding-top:0;z-index:1;}
/* frosted backdrop layer — the TOC list stays crisp on top, while the
   section-divider lines that scroll behind it are blurred through the glass.
   Its right edge is held back out of the numeral gutter so the section
   "art" numerals are never sat on by the glass. */
.toc::before{content:"";position:absolute;inset:-14px -10px -20px -34px;z-index:-1;
  -webkit-backdrop-filter:blur(7px) saturate(1.04);backdrop-filter:blur(7px) saturate(1.04);
  background:color-mix(in srgb,var(--paper) 50%,transparent);border-radius:18px;}
.toc h4{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;}
/* collapsible TOC: top-level (H2) always shown, sub-headings (H3) expand on demand */
.toc-list{list-style:none;margin:0;padding:0;}
.toc-part{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);opacity:.65;margin:16px 0 7px;}
.toc-grp{margin:0 0 2px;}
.toc-h2{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:baseline;position:relative;
  font-family:var(--serif);font-size:13px;line-height:1.32;color:var(--ink-3);
  padding:3px 16px 3px 0;cursor:pointer;transition:color .2s var(--ease);}
.toc-h2::before{content:attr(data-num);font-family:var(--mono);font-size:9.5px;color:var(--ink-3);}
.toc-h2:hover{color:var(--ink);}
.toc-grp.has-sub>.toc-h2::after{content:"";position:absolute;right:2px;top:11px;width:5px;height:5px;
  border-right:1.3px solid var(--ink-3);border-bottom:1.3px solid var(--ink-3);
  transform:rotate(45deg);opacity:.5;transition:transform .3s var(--ease);}
.toc-grp.has-sub.open>.toc-h2::after{transform:rotate(225deg);}
.toc-grp.on>.toc-h2,.toc-h2.on{color:var(--accent);}
.toc-grp.on>.toc-h2::before{color:var(--accent);}
.toc-sub{list-style:none;margin:0;padding:0 0 0 28px;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease),opacity .25s var(--ease),margin .3s var(--ease);}
.toc-grp.open>.toc-sub{max-height:520px;opacity:1;margin:3px 0 9px;}
.toc-h3{display:block;font-family:var(--serif);font-size:12.5px;line-height:1.3;color:var(--ink-3);
  padding:4px 0;transition:color .2s var(--ease);}
.toc-h3:hover{color:var(--ink);}
.toc-h3.on{color:var(--accent);}

/* ---- prose ---- */
.prose{font-family:var(--serif);font-size:19px;line-height:1.78;color:var(--ink);position:relative;
  max-width:68ch;}
/* continuous vertical rail, sitting in the TOC/content gutter */
.prose::before{content:"";position:absolute;left:-27px;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--line) 62%,transparent);pointer-events:none;}
.prose .cn{font-family:var(--cn);font-size:1.03em;}
.prose p{margin:0 0 26px;text-wrap:pretty;}
.prose .lead{font-size:21px;font-style:italic;color:var(--ink-2);line-height:1.6;}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.8vw,56px);line-height:1.02;
  letter-spacing:-.02em;margin:84px 0 28px;padding-top:48px;scroll-margin-top:100px;position:relative;}
.prose h2.is-cn{font-family:var(--cn);font-weight:600;font-size:clamp(32px,3.8vw,46px);
  line-height:1.14;letter-spacing:0;}
/* full-width section divider crossing the vertical rail */
.prose h2::before{content:"";position:absolute;top:0;left:-260px;right:-130px;height:1px;
  background:color-mix(in srgb,var(--line) 62%,transparent);pointer-events:none;}
/* section numeral — a fine OUTLINE "art" character in the 2nd quadrant of the
   crossing. Sits ABOVE the sticky TOC (z-index:3 > .toc's 1) so it always reads
   crisp instead of being swallowed by the frosted glass — including the very
   first section's numeral, which would otherwise be born under the TOC. */
.prose h2 .sec-no{position:absolute;left:-27px;top:0;
  transform:translate(calc(-100% + 18px),calc(-100% + 13px));
  font-family:var(--display);font-size:40px;font-weight:400;line-height:1;
  color:transparent;-webkit-text-stroke:.6px color-mix(in srgb,var(--ink-3) 85%,transparent);
  text-stroke:.6px color-mix(in srgb,var(--ink-3) 85%,transparent);
  opacity:.78;white-space:nowrap;z-index:3;pointer-events:none;}
.prose h2 .sec-no::after{content:"\B0";margin-left:1px;-webkit-text-stroke:0;
  color:var(--accent);opacity:.6;font-size:.5em;vertical-align:super;}
.prose h3{font-family:var(--serif);font-weight:600;font-size:23px;margin:40px 0 14px;
  scroll-margin-top:100px;letter-spacing:-.005em;line-height:1.28;}
.prose h3.is-cn{font-family:var(--cn);}
.prose a.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.prose a.link:hover{text-decoration-color:var(--accent);}
.prose strong{font-weight:600;}
.prose em{font-style:italic;}
.prose ul,.prose ol{margin:0 0 26px;padding-left:1.4em;}
.prose li{margin:0 0 9px;padding-left:.3em;}
.prose li::marker{color:var(--ink-3);}
.prose hr{border:none;border-top:1px solid var(--line);margin:46px 0;}

/* inline code */
.prose code{font-family:var(--code);font-size:.84em;background:var(--paper-2);
  border:1px solid var(--line);border-radius:5px;padding:.08em .4em;color:var(--ink);}

/* blockquote */
.prose blockquote{margin:34px 0;padding:4px 0 4px 26px;border-left:2px solid var(--accent);
  font-style:italic;color:var(--ink-2);font-size:20px;line-height:1.6;}
.prose blockquote p:last-child{margin:0;}
.prose blockquote .cite{display:block;font-style:normal;font-family:var(--mono);
  font-size:12.5px;color:var(--ink-3);margin-top:12px;}

/* figure / image — floating off the paper with a soft layered shadow */
.prose figure{margin:42px 0;}
.prose figure .ph{border-radius:18px;aspect-ratio:16/9;min-height:240px;}
.prose figcaption{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-3);
  text-align:center;margin-top:16px;line-height:1.5;text-wrap:pretty;}

/* margin note (right rail, Tufte-style) */
.mnote{float:right;clear:right;width:230px;margin:6px -282px 22px 0;
  font-family:var(--serif);font-size:14px;line-height:1.55;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:10px;}
.mnote .cn{font-family:var(--cn);}
.mnote b{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:5px;}

/* ---- code block ---- */
.code-block{position:relative;margin:32px 0;border:1px solid var(--line);border-radius:14px;
  background:var(--code-bg,var(--card));overflow:hidden;}
.code-head{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent);}
.code-head .fname{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);}
.code-head .lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-left:auto;}
.code-block pre{margin:0;padding:18px 16px;overflow-x:auto;
  font-family:var(--code);font-size:13.5px;line-height:1.7;tab-size:4;}
.code-block code{font-family:var(--code);background:none;border:none;padding:0;font-size:13.5px;color:var(--ink);}
.code-block .copy-btn{position:absolute;top:9px;right:12px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);background:var(--paper);border:1px solid var(--line);border-radius:7px;
  padding:5px 11px;cursor:pointer;transition:all .18s var(--ease);opacity:0;}
.code-block:hover .copy-btn{opacity:1;}
.code-block .copy-btn:hover{color:var(--ink);border-color:var(--line-2);}
.code-block .copy-btn.ok{color:var(--c-research);border-color:var(--c-research);opacity:1;}
/* the head already shows a copy slot; keep btn under head */
.code-block .copy-btn{top:8px;}

/* collapsible long code blocks */
.code-block.collapsible.collapsed pre{max-height:340px;overflow:hidden;}
.code-block .code-toggle{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:none;border-top:1px solid var(--line);background:var(--card);cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);
  padding:11px 0;transition:color .2s var(--ease),background .2s var(--ease);}
.code-block .code-toggle:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card));}
.code-block .code-toggle .ct-ico{font-size:12.5px;transition:transform .25s var(--ease);}
/* fade overlay sitting above the toggle while collapsed */
.code-block.collapsible.collapsed .code-toggle::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:66px;background:linear-gradient(transparent,var(--card));pointer-events:none;}

/* line numbers via counter */
.code-block code .ln{display:block;}
.code-block.numbered pre{padding-left:0;}
.code-block.numbered code{counter-reset:ln;display:block;}
.code-block.numbered .ln{counter-increment:ln;padding-left:54px;position:relative;}
.code-block.numbered .ln::before{content:counter(ln);position:absolute;left:0;width:38px;
  text-align:right;color:var(--ink-3);opacity:.55;font-size:12.5px;}

/* minimal syntax tokens (theme-aware) */
.tok-key{color:var(--c-code);}
.tok-str{color:var(--c-research);}
.tok-num{color:var(--c-ctf);}
.tok-com{color:var(--ink-3);font-style:italic;}
.tok-fn{color:var(--c-life);}
.tok-pre{color:var(--c-ctf);}

/* ---- math (KaTeX) ---- */
.prose .math-display{margin:30px 0;overflow-x:auto;overflow-y:hidden;text-align:center;
  padding:6px 0;color:var(--ink);}
.katex{font-size:1.04em;}

/* ---- footnote nav at bottom ---- */
.post-nav{max-width:704px;margin:72px auto 0;padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:12.5px;}
.post-nav a{color:var(--ink-3);transition:color .2s;max-width:46%;}
.post-nav a:hover{color:var(--accent);}
.post-nav .nlabel{display:block;color:var(--ink-3);opacity:.7;margin-bottom:6px;font-size:11.5px;letter-spacing:.08em;}
.post-nav .ntitle{font-family:var(--serif);font-size:16px;color:var(--ink-2);}
.post-nav .next{text-align:right;}

/* reading progress bar */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:60;
  transition:width .1s linear;}

/* ---- markdown-rendered extras ---- */
/* h1 = major section divider in long writeups */
.prose h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,38px);
  letter-spacing:-.01em;margin:64px 0 8px;padding-bottom:14px;border-bottom:1.5px solid var(--ink);
  scroll-margin-top:100px;}
.prose h1.is-cn,.prose h1:lang(zh){font-family:var(--cn);font-weight:600;}
.prose h4{font-family:var(--serif);font-weight:600;font-size:19px;margin:28px 0 10px;}
.prose h4.is-cn{font-family:var(--cn);}
.prose img{max-width:100%;height:auto;display:block;border-radius:12px;
  background:var(--card);
  box-shadow:0 1px 1px color-mix(in srgb,var(--ink) 6%,transparent),
             0 10px 24px -12px color-mix(in srgb,var(--ink) 30%,transparent),
             0 30px 56px -28px color-mix(in srgb,var(--ink) 26%,transparent);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.prose figure img{margin:0 auto;}
/* gentle lift on hover — reinforces the "floating" feel */
.prose figure:hover img,.prose p > img:hover{transform:translateY(-4px);
  box-shadow:0 2px 2px color-mix(in srgb,var(--ink) 7%,transparent),
             0 16px 30px -12px color-mix(in srgb,var(--ink) 34%,transparent),
             0 40px 70px -30px color-mix(in srgb,var(--ink) 30%,transparent);}
[data-theme="dark"] .prose img{
  box-shadow:0 1px 1px rgba(0,0,0,.4),
             0 14px 30px -12px rgba(0,0,0,.6),
             0 34px 60px -28px rgba(0,0,0,.5);}
.prose figure{margin:42px 0;}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px;}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left;}
.prose th{background:var(--paper-2);font-family:var(--mono);font-size:13px;font-weight:700;}
.prose del{opacity:.55;}

/* ---- footnotes (refs in text → Notes section at the end) ---- */
.fn-ref{font-family:var(--mono);font-size:.6em;line-height:0;scroll-margin-top:110px;}
.fn-ref a{color:var(--accent);padding:0 2px;}
.fn-ref a:hover{text-decoration:underline;text-underline-offset:2px;}
.footnotes{margin-top:68px;padding-top:24px;border-top:1px solid var(--line);}
.footnotes h4{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;}
.footnotes ol{margin:0;padding-left:1.4em;}
.footnotes li{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 10px;
  scroll-margin-top:110px;border-radius:6px;transition:background .6s var(--ease);}
.footnotes li:target{background:color-mix(in srgb,var(--accent) 9%,transparent);}
.footnotes code{font-size:.85em;}
.fn-back{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:5px;}
.fn-back:hover{color:var(--accent);}

/* ---- collapsible aside (optional digression) ---- */
details.aside{margin:32px 0;border:1px solid var(--line);border-radius:13px;
  background:color-mix(in srgb,var(--paper-2) 42%,transparent);overflow:hidden;}
details.aside summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  padding:14px 18px;transition:background .2s var(--ease);}
details.aside summary::-webkit-details-marker{display:none;}
details.aside summary:hover{background:color-mix(in srgb,var(--ink) 3.5%,transparent);}
.aside-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);flex:none;position:relative;top:-1px;}
.aside-title{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ink-2);
  line-height:1.4;flex:1;min-width:0;}
.aside-mark{margin-left:auto;font-family:var(--mono);font-size:15px;color:var(--ink-3);flex:none;
  transition:transform .3s var(--ease);transform-origin:center;align-self:center;}
details.aside[open] .aside-mark{transform:rotate(45deg);}
.aside-body{padding:2px 18px 8px;font-size:16.5px;line-height:1.72;color:var(--ink-2);
  border-top:1px dashed var(--line);}
.aside-body p{margin:14px 0;}
.aside-body .code-block{margin:16px 0;}
.aside-body img{margin:14px auto;}

/* ---- heading anchor links (visible on hover) ---- */
.h-anchor{font-family:var(--mono);font-weight:400;color:var(--ink-3);opacity:0;
  margin-left:14px;-webkit-text-stroke:0;letter-spacing:0;
  transition:opacity .2s var(--ease),color .2s var(--ease);}
.prose h2 .h-anchor{font-size:20px;vertical-align:6px;}
.prose h3 .h-anchor{font-size:14px;vertical-align:2px;margin-left:10px;}
.prose h2:hover .h-anchor,.prose h3:hover .h-anchor{opacity:.55;}
.prose .h-anchor:hover{opacity:1;color:var(--accent);}

/* ---- inline contents (narrow viewports only) ---- */
.toc-inline{display:none;}

/* highlight.js — ink-on-paper theme mapped to site palette */
.hljs{color:var(--ink);background:transparent;}
.hljs-comment,.hljs-quote{color:var(--ink-3);font-style:italic;}
.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:var(--c-code);}
.hljs-string,.hljs-title.class_,.hljs-doctag,.hljs-addition{color:var(--c-research);}
.hljs-number,.hljs-literal,.hljs-meta .hljs-number{color:var(--c-ctf);}
.hljs-title,.hljs-title.function_,.hljs-section,.hljs-attr,.hljs-attribute{color:var(--c-life);}
.hljs-type,.hljs-class .hljs-title,.hljs-params{color:var(--accent);}
.hljs-meta,.hljs-meta .hljs-keyword{color:var(--ink-3);}
.hljs-variable,.hljs-template-variable,.hljs-property{color:var(--ink);}
.hljs-symbol,.hljs-bullet,.hljs-link{color:var(--c-ctf);}
.hljs-deletion{color:var(--c-ctf);}
.hljs-emphasis{font-style:italic;}
.hljs-strong{font-weight:700;}

@media (max-width:1080px){
  .post-grid{grid-template-columns:minmax(0,1fr);}
  .toc{display:none;}
  .toc-inline{display:block;margin:36px 0 10px;border:1px solid var(--line);border-radius:13px;}
  .toc-inline summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3);padding:14px 18px;}
  .toc-inline summary::-webkit-details-marker{display:none;}
  .toc-inline summary::after{content:"+";margin-left:auto;font-size:15px;font-weight:400;
    transition:transform .3s var(--ease);}
  .toc-inline[open] summary::after{transform:rotate(45deg);}
  .toc-inline ol{list-style:none;margin:0;padding:2px 18px 14px;}
  .toc-inline a{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);
    font-size:15.5px;line-height:1.4;color:var(--ink-2);padding:6px 0;}
  .toc-inline a:hover{color:var(--accent);}
  .toc-inline .ti-num{font-family:var(--mono);font-size:10px;color:var(--ink-3);flex:none;min-width:18px;}
  .h-anchor{display:none;}
  .mnote{float:none;width:auto;margin:24px 0;border-left:2px solid var(--line);border-top:none;
    padding:2px 0 2px 16px;}
  .prose::before{display:none;}
  .prose h2{padding-top:30px;margin-top:56px;}
  .prose h2::before{left:0;right:0;}
  .prose h2 .sec-no{display:none;}
}