/* Writing (blog) on the Cove reading system. Loaded after case.css, which provides tokens, nav, .wrap, .head, .back, .pn, .foot. */
:root{--mono:ui-monospace,'Cascadia Mono','SFMono-Regular',Consolas,monospace}
/* index */
.writing .head{padding-top:56px}
.writing .head-grid{align-items:end}
.cats{grid-column:3;display:flex;flex-direction:column}
.cats a{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--rule);font-size:15px}
.cats a:last-child{border-bottom:1px solid var(--rule)}
.cats a span:last-child{color:var(--kelp-72);font-variant-numeric:tabular-nums}
.cats a:hover{border-color:var(--sun-deep)}
.years{margin-top:72px}
.year{display:grid;grid-template-columns:3fr 9fr;margin-top:48px}
.year h2{position:sticky;top:96px;align-self:start;margin:0;font-stretch:125%;font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.02em;color:var(--kelp-72)}
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.posts a{display:grid;grid-template-columns:80px minmax(0,1fr) auto;column-gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule)}
.posts a:hover{border-color:var(--sun-deep)}
.posts a:hover strong{color:var(--tide)}
.posts time{font-size:14px;color:var(--kelp-72);font-variant-numeric:tabular-nums}
.posts strong{display:block;font-stretch:112%;font-weight:500;font-size:clamp(20px,1.8vw,25px);line-height:1.2}
.posts .ex{display:block;margin-top:6px;font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--kelp-72);max-width:62ch}
.posts .c{font-size:14px;color:var(--kelp-72);white-space:nowrap}
/* post header */
.post .head{padding-top:40px;max-width:980px}
.post h1{font-size:clamp(38px,5.4vw,76px);line-height:.95}
.post .meta{margin:22px 0 0;font-size:15px;line-height:1.5;color:var(--kelp-72)}
.post .meta a{color:var(--kelp);border-bottom:1px solid var(--sun-deep)}
/* post body: contents on the left, reading column in the middle */
.post-grid{display:grid;grid-template-columns:3fr 7fr 2fr;margin-top:72px;padding-top:28px;border-top:1px solid var(--rule-strong)}
.post-grid.no-toc .prose{grid-column:2}
.contents{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 128px);overflow:auto;padding-right:28px;font-size:14px;line-height:1.4;scrollbar-width:thin}
.contents h2{margin:0 0 12px;font-size:13px;font-weight:600}
.contents ol{list-style:none;margin:0;padding:0}
.contents ol ol{padding-left:14px}
.contents li{margin:0}
.contents a{display:block;padding:5px 0;color:var(--kelp-72)}
.contents a:hover,.contents a.on{color:var(--kelp)}
.contents a.on{box-shadow:inset 2px 0 0 var(--sun-deep);padding-left:10px;margin-left:-12px}
.contents .toc-child{display:block}
/* prose */
.prose{grid-column:2;min-width:0;max-width:68ch;font-family:var(--serif);font-size:18.5px;line-height:1.72;color:var(--kelp)}
.prose>*:first-child{margin-top:0}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--sans);color:var(--kelp);scroll-margin-top:96px;text-wrap:balance}
.prose h1{margin:64px 0 16px;font-stretch:125%;font-weight:500;font-size:32px;line-height:1.1;letter-spacing:-.02em}
.prose h2{margin:52px 0 14px;font-stretch:112%;font-weight:600;font-size:25px;line-height:1.2}
.prose h3{margin:36px 0 10px;font-weight:600;font-size:20px;line-height:1.3}
.prose h4{margin:28px 0 8px;font-weight:600;font-size:17px}
.prose p{margin:0 0 18px;text-wrap:pretty}
.prose a{border-bottom:1px solid var(--sun-deep)}
.prose a:hover{color:var(--tide)}
.prose strong{font-weight:650}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.4em}
.prose li{margin:0 0 6px}
.prose li::marker{color:var(--sun-deep)}
.prose blockquote{margin:24px 0;padding:2px 0 2px 22px;border-left:2px solid var(--sun);color:var(--kelp-72)}
.prose hr{border:0;border-top:1px solid var(--rule-strong);margin:44px 0}
.prose img{display:block;max-width:100%;height:auto;margin:28px 0}
.prose figure{margin:28px 0}
.prose figure img{margin:0}
.prose figcaption{margin-top:10px}
.prose code{font-family:var(--mono);font-size:.84em;background:var(--paper-2);padding:.12em .36em;border-radius:3px}
.prose pre{margin:24px 0;padding:18px 20px;background:var(--tide);color:#E3EBE5;border-radius:4px;overflow-x:auto;font-size:14px;line-height:1.6}
.prose pre code{background:none;padding:0;font-size:inherit;color:inherit;border-radius:0}
.prose pre.mermaid{background:#F1F5F2;color:var(--kelp);text-align:center;border:1px solid var(--rule)}
.prose table{display:block;overflow-x:auto;max-width:100%;margin:24px 0;border-collapse:collapse;font-family:var(--sans);font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:9px 16px 9px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.prose thead th{font-weight:600;border-bottom:1px solid var(--rule-strong)}
.prose .math.display{display:block;overflow-x:auto;overflow-y:hidden;margin:20px 0}
.prose mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;padding:4px 0}
/* three.js scenes embedded with {% three_scene %} */
.prose .three-scene{position:relative;margin:28px 0;background:var(--tide);overflow:hidden;border-radius:4px}
.prose .three-scene__canvas{display:block;width:100%;height:100%;min-height:inherit}
.prose .three-scene__caption{position:absolute;left:16px;bottom:12px;margin:0;font-size:13px;color:rgba(227,235,229,.75)}
.prose .three-scene__fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);font-size:14px;color:rgba(227,235,229,.75);pointer-events:none}
@media (max-width:1000px){.year{grid-template-columns:1fr;row-gap:16px;margin-top:40px}.year h2{position:static}.cats{grid-column:1;max-width:520px}.post-grid{grid-template-columns:1fr;margin-top:44px}.post-grid.no-toc .prose,.prose{grid-column:1}.contents{position:static;max-height:none;padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--rule)}}
@media (max-width:900px){.posts a{grid-template-columns:64px 1fr;row-gap:4px}.posts .c{grid-column:2}.prose{font-size:17.5px}.prose h1{font-size:27px}.prose h2{font-size:22px}}
/* contents as a disclosure: always open on wide screens */
details.contents>summary{list-style:none;margin:0 0 12px;font-size:13px;font-weight:600;cursor:default}
details.contents>summary::-webkit-details-marker{display:none}
@media (max-width:1000px){details.contents>summary{cursor:pointer;margin:0;padding:12px 0;font-size:15px}details.contents>summary::after{content:"Show";float:right;font-weight:400;color:var(--kelp-72)}details.contents[open]>summary::after{content:"Hide"}details.contents{padding-bottom:0}details.contents[open]{padding-bottom:20px}}
/* hexo highlight blocks with a line-number gutter */
.prose figure.highlight{margin:24px 0;background:var(--tide);border-radius:4px;overflow-x:auto}
.prose figure.highlight table{display:table;width:100%;margin:0;font-family:var(--mono);font-size:14px;line-height:1.6;border:0}
.prose figure.highlight td{padding:0;border:0;vertical-align:top}
.prose figure.highlight pre{margin:0;background:none;border-radius:0;padding:16px 20px;overflow:visible}
.prose figure.highlight .gutter pre{padding-right:0;color:rgba(227,235,229,.38);text-align:right;user-select:none}
.prose figure.highlight .line{display:block}