/* Long-form reading in the established Strivo theme. */
.article-hero{background:var(--yellow);border-radius:28px;padding:18px 28px 64px}
.article-intro{max-width:1100px;margin:48px auto 0}
.back-to-writing{display:inline-flex;align-items:center;gap:10px;font-size:14px;min-height:44px;margin-bottom:24px}
.back-to-writing .icon{width:17px;height:17px;transform:rotate(180deg)}
.back-to-writing:hover{text-decoration:underline}
.article-intro h1{max-width:1100px;font-size:64px;line-height:1.09;letter-spacing:-.035em;text-wrap:pretty}
.article-deck{max-width:70ch;font-size:20px;line-height:1.55;color:var(--on-yellow);margin-top:26px}
.post-meta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:14px;margin-top:32px;color:var(--on-yellow)}
.post-meta span:first-child{color:var(--ink)}
.desktop-nav a[aria-current=page]:after{right:0}
.article-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:70px;max-width:1130px;margin:0 auto;padding:64px 20px 88px;align-items:start}
.article-toc{position:sticky;top:35px;max-height:calc(100svh - 70px);overflow-y:auto;padding-right:12px}
.article-toc summary{min-height:44px;font-size:14px;font-weight:500;list-style:none;cursor:default;padding:0 0 16px;border-bottom:1px solid var(--line)}
.article-toc summary::-webkit-details-marker{display:none}
.article-toc nav{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.article-toc a{min-height:44px;display:grid;grid-template-columns:20px 1fr;gap:9px;padding:9px 7px;font-size:14px;line-height:1.45;border-radius:4px;color:var(--muted)}
.article-toc a span:first-child{font-family:var(--mono);font-size:12px;padding-top:1px}
.article-toc a:hover{color:var(--ink);background:var(--request-paper)}
.article-toc a[aria-current=location]{color:var(--ink);background:var(--yellow)}
.post-content{min-width:0;font-size:18px;line-height:1.75}
.post-content p,.post-content ul,.post-content ol{max-width:72ch;margin:0 0 24px}
.post-content .lead{font-size:20px;line-height:1.65}
.post-content h2{font-size:32px;line-height:1.2;letter-spacing:-.025em;margin:64px 0 24px;scroll-margin-top:35px;text-wrap:pretty}
.post-content h3{font-size:24px;line-height:1.3;margin:36px 0 16px;scroll-margin-top:35px;text-wrap:pretty}
.post-content .hnum{font-family:var(--mono);font-size:14px;line-height:1;letter-spacing:0;color:var(--muted);display:block;margin-bottom:12px}
.post-content li{padding-left:5px;margin-bottom:10px}
.post-content li::marker{color:var(--on-yellow)}
.post-content ul,.post-content ol{padding-left:24px}
.post-content li>ul,.post-content li>ol{margin-top:10px;margin-bottom:0}
.post-content strong{font-weight:600}
.post-content a{text-decoration:underline;text-decoration-thickness:1px;overflow-wrap:anywhere}
.post-content a:hover{color:var(--on-yellow)}
.post-content :not(pre)>code{font-family:var(--mono);font-size:.82em;background:var(--request-paper);padding:3px 5px;border-radius:4px;overflow-wrap:anywhere}
.code-block{margin:28px 0 32px;border-radius:12px;overflow:hidden;background:var(--ink);color:var(--white)}
.code-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 20px;border-bottom:1px solid var(--muted);font-size:12px;color:var(--on-dark)}
.code-toolbar button{font-size:12px;padding:8px 12px;min-height:44px;background:transparent;border:0;border-radius:4px;color:var(--white)}
.code-toolbar button:hover{background:var(--button-hover)}
.code-toolbar button:focus-visible{outline-offset:-3px}
.code-block pre{margin:0;padding:24px;font-family:var(--mono);font-size:14px;line-height:1.7;overflow-x:auto;tab-size:2;white-space:pre;color:inherit;background:transparent}
.code-block pre:focus-visible,.table-scroll:focus-visible,.diagram-canvas:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.code-block pre code{font:inherit}
.table-scroll{overflow-x:auto;margin:28px 0 32px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.post-content table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px;line-height:1.6}
.post-content th,.post-content td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.post-content th{font-weight:500;background:var(--request-paper);color:var(--ink)}
.post-content tr:last-child td{border-bottom:0}
.diagram{margin:32px 0 36px;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
.diagram-canvas{padding:24px;overflow-x:auto;min-height:140px;text-align:center;line-height:1.4}
.diagram-canvas svg{display:block;max-width:100%;height:auto;margin:0 auto}
.post-content .article-scroll-hint{font-size:14px;line-height:1.5;color:var(--muted);margin:28px 0 8px;max-width:none}
.article-scroll-hint:not([hidden])+.table-scroll{margin-top:0}
.diagram .article-scroll-hint{margin:0;padding:16px 24px 0}
.article-scroll-hint[hidden]{display:none}
.diagram .mermaid{white-space:pre-wrap;font-family:var(--mono);font-size:14px;line-height:1.6;text-align:left;margin:0;color:var(--muted);overflow-wrap:anywhere}
.diagram details{border-top:1px solid var(--line);text-align:left;font-size:14px;line-height:1.5}
.diagram summary{cursor:pointer;min-height:44px;padding:14px 20px;color:var(--muted)}
.diagram summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.diagram details pre:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.diagram details pre{padding:0 20px 20px;margin:0;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre}
.post-content blockquote{margin:32px 0;padding:24px;background:var(--source-wash);border-radius:12px;color:var(--on-source)}
.post-content blockquote p:last-child{margin-bottom:0}
.post-content .pullquote{font-size:24px;line-height:1.45;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-content hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.article-callout{background:var(--ink);color:var(--white);border-radius:25px;max-width:1250px;margin:0 auto;padding:56px 64px}
.article-callout h2{font-size:40px;line-height:1.15;letter-spacing:-.03em;max-width:760px}
.article-callout p{font-size:18px;line-height:1.6;color:var(--on-dark);max-width:70ch;margin-top:22px}
.article-callout-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:32px}
.article-callout .button{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.article-callout .button:hover{background:var(--source-wash);border-color:var(--source-wash)}
.article-callout .text-link:hover{text-decoration:underline}
.related-writing{max-width:1130px;margin:0 auto;padding:64px 20px 40px}
.related-writing>h2{font-size:28px;line-height:1.2;letter-spacing:-.025em;margin-bottom:26px}
.related-post{display:grid;grid-template-columns:160px 1fr 24px;gap:24px;align-items:start;padding:24px 0;border-top:1px solid var(--line)}
.related-post .related-meta{font-size:14px;color:var(--muted);padding-top:3px}
.related-post h3{font-size:20px;line-height:1.35;letter-spacing:-.02em;max-width:68ch}
.related-post .icon{width:18px;height:18px;transform:rotate(45deg);margin-top:5px}
.related-post:hover h3{text-decoration:underline}
.post-page .footer{border-top:1px solid var(--line)}
@media(max-width:1100px){.article-layout{grid-template-columns:190px minmax(0,1fr);gap:42px;padding:56px 30px 72px}.article-intro{margin-top:38px}.article-intro h1{font-size:48px}.article-toc a{font-size:14px}.related-writing{padding-left:30px;padding-right:30px}}
@media(max-width:850px){.article-hero{padding:16px 22px 48px}.article-intro{margin-top:30px;padding:0 10px}.article-intro h1{font-size:40px}.article-deck{font-size:18px}.article-layout{display:block;padding:36px 32px 64px;max-width:820px}.article-toc{position:static;max-height:none;margin-bottom:36px;padding-right:0;border-bottom:1px solid var(--line)}.article-toc summary{pointer-events:auto;cursor:pointer;border-bottom:0;display:flex;justify-content:space-between;padding:0 0 18px;font-size:14px}.article-toc summary:after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:4px}.article-toc[open] summary:after{transform:rotate(225deg)}.article-toc nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;padding:0 0 20px}.article-toc a{font-size:14px}.post-content h2{font-size:32px;margin-top:52px}.article-callout{padding:44px 40px}.article-callout h2{font-size:32px}.related-post{grid-template-columns:130px 1fr 20px;gap:18px}}
@media(max-width:600px){.article-hero{border-radius:20px;padding:12px 12px 36px}.article-intro{margin-top:22px;padding:0 8px}.back-to-writing{margin-bottom:18px}.article-intro h1{font-size:32px;line-height:1.12;letter-spacing:-.03em}.article-deck{font-size:16px;line-height:1.6;margin-top:22px}.post-meta{font-size:12px;gap:10px 16px;margin-top:26px}.article-layout{padding:30px 20px 52px}.article-toc{margin-bottom:28px}.article-toc nav{grid-template-columns:1fr;gap:0}.post-content{font-size:18px;line-height:1.75}.post-content .lead{font-size:18px}.post-content h2{font-size:28px;margin-top:44px;margin-bottom:20px}.post-content h3{font-size:24px;margin-top:30px}.post-content p,.post-content ul,.post-content ol{margin-bottom:22px}.code-toolbar{padding:7px 14px}.code-block pre{padding:20px 16px;font-size:12px}.diagram-canvas{padding:16px}.diagram .article-scroll-hint{padding:16px 16px 0}.diagram-canvas svg{max-width:none}.diagram details pre{font-size:12px;padding:0 16px 16px}.diagram summary{padding:14px 16px}.article-callout{border-radius:20px;padding:36px 24px}.article-callout h2{font-size:28px}.article-callout p{font-size:16px}.article-callout-actions{gap:22px;margin-top:26px}.related-writing{padding:44px 20px 30px}.related-post{grid-template-columns:1fr 20px;gap:12px 18px;padding:22px 0}.related-post .related-meta{grid-column:1/-1;padding:0}.related-post h3{font-size:18px}.related-writing>h2{font-size:24px}}
@media print{.site-header,.article-toc,.article-callout,.related-writing,.footer,.back-to-writing,.code-toolbar button,.diagram details,.article-scroll-hint{display:none}.article-hero{background:var(--white);padding:0;border-radius:0}.article-intro{margin:0;padding:0}.article-intro h1{font-size:32px}.article-layout{display:block;padding:32px 0}.post-content{font-size:16px}.diagram,.code-block,.table-scroll{break-inside:avoid}.diagram-canvas svg{max-width:100%;min-width:0}.code-block{color:var(--ink);background:var(--paper)}.code-block pre{white-space:pre-wrap;font-size:14px}}