/* ТЕМА */
:root { color-scheme:dark; --bg:#111413; --side:#151916; --surface:#1c231c; --text:#eeeee6; --body:#bdc4b9; --muted:#8f998d; --line:#303831; --accent:#c6e6a1; --mono:ui-monospace,SFMono-Regular,Consolas,monospace; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow:hidden; }
a { color:inherit; text-underline-offset:5px; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.blog-shell { height:100vh; height:100dvh; display:grid; grid-template-rows:88px minmax(0,1fr); }
.blog-header { display:flex; align-items:center; gap:22px; padding-inline:clamp(24px,5vw,80px); border-bottom:1px solid var(--line); }
.brand { font-size:1.8rem; font-weight:850; line-height:1; letter-spacing:-.09em; text-decoration:none; }
.brand>span,.post h1>span,.index-heading h2>span { color:var(--accent); }
.blog-name { font:11px var(--mono); text-decoration:none; }
.blog-name>span { color:var(--muted); }
.blog-header>nav { display:flex; gap:26px; margin-left:auto; font-size:.78rem; }
.blog-header>nav a { text-decoration:none; }

/* Колонки заполняют оставшуюся высоту окна. Страница сама не прокручивается. */
.blog-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; min-height:0; max-width:1680px; width:100%; margin-inline:auto; }
.reading-pane { min-width:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-color:var(--line) var(--bg); scroll-behavior:auto; }
.reading-pane:focus { outline:none; }
.reading-pane:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }
.reading-inner { width:min(710px,calc(100% - 96px)); margin-inline:auto; padding-block:42px 24px; }
.notebook-caption { font:9px/1.7 var(--mono); color:var(--muted); letter-spacing:.08em; margin:0 0 52px; }
.post:focus { outline:none; }
.post+.post { margin-top:80px; border-top:1px solid var(--line); padding-top:50px; }
.js .post { margin-top:0; border-top:0; padding-top:0; }
.post-kicker { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font:9px/1.7 var(--mono); color:var(--accent); letter-spacing:.04em; }
.post-kicker time { color:var(--muted); margin-left:auto; }
.post h1 { font-size:clamp(2.6rem,4.8vw,4.6rem); line-height:1.08; font-weight:550; letter-spacing:-.06em; margin:26px 0 22px; }
.post-deck { font-size:1.02rem; color:var(--muted); line-height:1.65; max-width:570px; margin:0; }
.sample-label { color:var(--muted); font:9px/1.7 var(--mono); margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }

/* Текст статьи: serif, удобная ширина и ритм абзацев. */
.prose { color:var(--body); font:1.075rem/1.85 Georgia,"Times New Roman",serif; margin-top:42px; overflow-wrap:anywhere; }
.prose p { margin:0 0 1.35em; }
.prose h2 { color:var(--text); font:550 1.45rem/1.35 system-ui,-apple-system,sans-serif; letter-spacing:-.03em; margin:2.1em 0 .8em; }
.prose h3 { color:var(--text); font:550 1.1rem/1.4 system-ui,sans-serif; margin:1.8em 0 .7em; }
.prose a { color:var(--accent); }
.prose ul,.prose ol { padding-left:24px; }
.prose li { margin-bottom:10px; }
.prose strong { color:var(--text); }
.prose code { font-family:var(--mono); font-size:.77em; }
.prose :not(pre)>code { color:var(--accent); background:var(--surface); padding:2px 5px; border-radius:3px; }
pre { overflow-x:auto; max-width:100%; padding:24px; margin:28px 0; line-height:1.65; background:var(--side); border:1px solid var(--line); border-radius:4px; color:var(--text); }
blockquote { border-left:2px solid var(--accent); padding:6px 0 6px 22px; margin:30px 0; color:var(--text); }
blockquote p:last-child { margin:0; }
.table-wrap { overflow-x:auto; margin-block:30px; }
table { border-collapse:collapse; width:100%; font:12px/1.7 system-ui,sans-serif; text-align:left; }
th,td { padding:13px 15px; border-bottom:1px solid var(--line); }
th { color:var(--text); font-weight:550; }
figure { margin:30px 0; }
figure img { display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:4px; }
figcaption { margin-top:12px; color:var(--muted); font:11px/1.7 system-ui,sans-serif; }
.sources { border-top:1px solid var(--line); margin-top:40px; padding-top:20px; }
.sources h2 { margin:0 0 12px; font-size:1rem; }
.sources a { font:12px/1.7 system-ui,sans-serif; }
.post-pagination { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); font-size:12px; }
.post-pagination a { text-decoration:none; }
.post-pagination [data-next] { margin-left:auto; text-align:right; }
.reader-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-block:40px 8px; margin-top:14px; font:9px/1.7 var(--mono); color:var(--muted); }
.reader-footer a { text-decoration:none; }

/* ПРАВЫЙ СПИСОК: неподвижен относительно прокрутки статьи. */
.post-index { min-height:0; display:flex; flex-direction:column; padding:44px 24px 26px; border-left:1px solid var(--line); background:var(--side); }
.index-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-inline:12px; margin-bottom:30px; }
.index-eyebrow { font:9px var(--mono); color:var(--muted); letter-spacing:.08em; }
.index-heading h2 { font-size:1.65rem; font-weight:500; letter-spacing:-.05em; margin:9px 0 0; line-height:1.2; }
.post-count { font:11px var(--mono); color:var(--muted); }
.post-index>nav { overflow-y:auto; min-height:0; scrollbar-color:var(--line) var(--side); }
.index-list { margin:0; padding:0; list-style:none; }
.index-list li+li { margin-top:5px; }
.index-list a { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:16px; padding:15px 12px; border:1px solid transparent; border-radius:5px; text-decoration:none; color:var(--body); transition:background-color .15s,color .15s,border-color .15s; }
.index-title { font-size:.8rem; line-height:1.65; }
.index-list time { white-space:nowrap; color:var(--muted); font:9px/1.8 var(--mono); opacity:.92; }
.index-list a:hover { background:#20271f; color:var(--text); border-color:var(--line); }
.index-list a[aria-current="true"] { background:#242d20; color:var(--accent); border-color:#39482f; }
.index-bottom { margin-top:auto; padding:40px 12px 0; }
.index-bottom p { color:var(--muted); font-size:.78rem; line-height:1.8; margin:0 0 24px; }
.reading-progress { height:2px; background:var(--line); margin-bottom:18px; }
.reading-progress>span { display:block; width:0; height:100%; background:var(--accent); }
.index-footnote { font:8px/1.7 var(--mono); color:var(--muted); letter-spacing:.07em; }

/* Телефон: список всегда сверху, а текст прокручивается ниже. */
@media(min-width:1680px) { .blog-layout { border-inline:1px solid var(--line); } }
@media(max-width:1050px) { .blog-layout { grid-template-columns:minmax(0,1fr) 300px; } .reading-inner { width:calc(100% - 60px); } .post-index { padding-inline:16px; } .index-list a { gap:10px; } .index-title { font-size:.75rem; } .post h1 { font-size:3rem; } }
@media(max-width:760px) { .blog-shell { grid-template-rows:72px minmax(0,1fr); } .blog-header { padding-inline:20px; gap:16px; } .blog-name>span { display:none; } .blog-header>nav { gap:15px; font-size:11px; } .blog-header>nav a:last-child { display:none; } .blog-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); } .post-index { grid-row:1; padding:14px 16px; border-left:0; border-bottom:1px solid var(--line); } .index-heading { margin:0 0 10px; padding:0 4px; align-items:baseline; } .index-eyebrow,.index-heading h2>span,.index-bottom { display:none; } .index-heading h2 { font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; margin:0; } .post-count { font-size:9px; } .post-index>nav { overflow-x:auto; overflow-y:hidden; } .index-list { display:flex; gap:8px; } .index-list li { flex:0 0 210px; } .index-list li+li { margin:0; } .index-list a { grid-template-columns:1fr; gap:5px; padding:9px 12px; } .index-title { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .index-list time { font-size:8px; } .reading-inner { width:calc(100% - 40px); padding-top:24px; } .notebook-caption { font-size:8px; margin-bottom:32px; } .post h1 { font-size:clamp(2.25rem,9vw,3.3rem); } .post-kicker { font-size:8px; } .post-kicker time { margin-left:0; } .post-deck { font-size:.95rem; } .prose { font-size:1rem; } pre { padding:18px; } }
@media(prefers-reduced-motion:reduce) { .index-list a { transition:none; } }