/* p10node Insights. * * Loaded only by the pages backend/cms renders, and it dresses one thing: what * sits between the header and the footer. The chrome, the shell width, the * palette and the type are the marketing site's, untouched - nothing in here * re-points a token on :root or on . A publication that repaints the * whole page is a publication that stops looking like the company it belongs * to, and that was the lesson of two attempts that did. * * Everything is scoped under .pub (backend/cms/theme.py puts it on ) so * these rules cannot reach a static page even by accident. */ /* The publication gets a wider measure than the rest of the site. The custom property is set on #main, not on :root or , because the header and the footer live outside #main and must stay exactly the width they are on every other page. 1280 against the chrome's 1120: enough for three cards beside a sidebar, close enough that the offset reads as a choice, not a mistake. */ .pub #main{--shell:1280px} /* The publication is light only - it has no dark palette and never asks for one - so it says so. Without this the UA falls back to prefers-color-scheme for anything it paints itself: form controls, scrollbars, and the canvas behind a cross-origin iframe whose own document is transparent. giscus's is, which is why the comment box came out on a black slab for anybody whose machine is in dark mode. */ /* The publication is light only - it has no dark palette and never asks for one - so it says so, and the browser stops picking dark defaults for the things it paints itself: form controls, scrollbars, the canvas. On :root as well as on the body because the page canvas is the root element's business; insights.css is only ever loaded by the pages this applies to, so a bare :root here cannot reach a static one. */ :root{color-scheme:light} .pub{color-scheme:light} /* The closing call to action is the same block, word for word, as the one on /services and /about. It keeps the site's measure - widening it would make the one component every page shares look different on this one. */ .pub .cta .shell{max-width:1120px} .pub .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ------------------------------------------------------------- page header */ .pub .crumb-strip{border-bottom:1px solid var(--line)} .pub .crumb-strip .shell{padding-block:14px} .pub .page-head{padding:clamp(34px,4vw,56px) 0 clamp(24px,2.8vw,34px); border-bottom:1px solid var(--line)} .pub .page-head-inner{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 40px; margin-top:16px} .pub .page-head-inner>div:first-child{flex:1 1 440px;min-width:0} .pub .page-head h1{margin:14px 0 0} .pub .page-head .lede{margin-top:16px;max-width:52ch;font-size:17.5px} .pub .search{display:flex;flex:0 0 auto;margin-bottom:4px} .pub .search input{width:min(270px,64vw);height:44px;padding:0 15px;font:inherit; font-size:15px;background:var(--bg);border:1px solid var(--field-line);border-right:0; border-radius:8px 0 0 8px;color:var(--ink)} .pub .search input::placeholder{color:var(--muted-2)} .pub .search input:focus{outline:none;border-color:var(--ink)} .pub .search button{display:grid;place-items:center;width:46px;height:44px; background:var(--ink);border:1px solid var(--ink);border-radius:0 8px 8px 0;color:#fff; cursor:pointer;transition:background .15s,border-color .15s} .pub .search button:hover{background:var(--accent);border-color:var(--accent)} /* --------------------------------------------------------------- two columns */ .pub .layout{display:grid;gap:clamp(32px,3.4vw,56px)} .pub .layout-main{min-width:0} @media (min-width:1000px){ .pub .layout{grid-template-columns:minmax(0,1fr) 272px;gap:clamp(32px,3vw,44px)} } /* ------------------------------------------------------------------- cards */ .pub .strip-label{margin-bottom:18px;font-family:var(--mono);font-size:11.4px; font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)} .pub .featured-wrap{padding:clamp(32px,4vw,52px) 0 0} .pub .post-grid{display:grid;gap:clamp(18px,1.8vw,22px)} @media (min-width:640px){.pub .post-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1120px){.pub .post-grid{grid-template-columns:repeat(3,1fr)}} /* "Keep reading" has the full width to itself - no sidebar to share it with - so it goes three-up earlier and with more room per card. */ @media (min-width:960px){.pub .band .post-grid{grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.2vw,28px)}} /* Three to a row makes the cards narrow enough that an uneven excerpt starts to throw the meta line out of alignment. Clamped, so every card in a row ends at the same height. */ .pub .post-card-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden} .pub .post-featured .post-card-excerpt{-webkit-line-clamp:4} .pub .post-card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden} .pub .post-card{display:flex;flex-direction:column;background:var(--bg); border:1px solid var(--line);border-radius:12px;overflow:hidden; transition:border-color .18s,box-shadow .18s,transform .18s} .pub .post-card:hover{border-color:#D6D6DB;transform:translateY(-2px); box-shadow:0 14px 28px -20px rgba(11,11,12,.32)} .pub .card-cover{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface); border-bottom:1px solid var(--line)} .pub .card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .pub .post-card:hover .card-cover img{transform:scale(1.035)} .pub .post-card-body{display:flex;flex-direction:column;flex:1; padding:clamp(18px,2vw,24px)} .pub .post-card h2,.pub .post-card h3{margin:12px 0 0;font-size:20px;font-weight:600; line-height:1.26;letter-spacing:-.022em} .pub .post-card h2 a,.pub .post-card h3 a{transition:color .15s} .pub .post-card:hover h2 a,.pub .post-card:hover h3 a{color:var(--accent)} .pub .post-card-excerpt{margin-top:10px;flex:1;color:var(--muted);font-size:15.6px; line-height:1.62} /* the featured article: the same card, laid out along instead of down */ .pub .post-featured{margin-bottom:0} @media (min-width:820px){ .pub .post-featured{display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch} .pub .post-featured .card-cover{aspect-ratio:auto;min-height:330px;border-bottom:0; border-right:1px solid var(--line)} .pub .post-featured .post-card-body{padding:clamp(26px,3vw,40px);justify-content:center} .pub .post-featured h2{font-size:clamp(25px,2.8vw,34px);line-height:1.16; letter-spacing:-.03em} .pub .post-featured .post-card-excerpt{font-size:17px;flex:0;max-width:52ch} } /* who wrote it, when, how long */ .pub .card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px; padding-top:15px;border-top:1px solid var(--line);font-size:13.4px;color:var(--muted-2)} .pub .card-who{font-weight:500;color:var(--ink)} .pub .card-dot{color:var(--line)} .pub .card-meta time{font-variant-numeric:tabular-nums} .pub .avatar{display:grid;place-items:center;flex:none;width:26px;height:26px; margin-right:3px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono); font-size:10px;font-weight:500;object-fit:cover} .pub .avatar-md{width:42px;height:42px;font-size:13px;margin-right:0} .pub .avatar-lg{width:60px;height:60px;font-size:17px;margin-right:0} /* the category chip */ /* align-self, because the card body is a flex column and an inline-flex child in one stretches to the full width - which drew the chip as a bar. */ .pub .kicker{display:inline-flex;align-self:flex-start;align-items:center;gap:7px; padding:5px 11px; font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--chip,var(--accent));border-radius:999px; background:color-mix(in srgb,var(--chip,var(--accent)) 9%,transparent); transition:background .15s} .pub .kicker::before{content:"";width:6px;height:6px;border-radius:50%; background:currentColor;flex:none} .pub .kicker:hover{background:color-mix(in srgb,var(--chip,var(--accent)) 17%,transparent)} /* ------------------------------------------------------------------ listing */ .pub .section-list{padding-top:clamp(32px,4vw,52px)} .pub .result-count{margin-bottom:22px;font-family:var(--mono);font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .pub .empty-note{padding:48px 0;color:var(--muted-2)} .pub .empty-note a,.pub .feed-note a{color:var(--accent);text-decoration:underline; text-underline-offset:3px} .pub .feed-note{margin-top:30px;font-family:var(--mono);font-size:13px;color:var(--muted-2)} .pub .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px; margin-top:44px;padding-top:30px;border-top:1px solid var(--line);font-size:14.4px} .pub .pager a,.pub .pager .page-now,.pub .pager .page-gap{display:grid;place-items:center; min-width:40px;height:40px;padding:0 13px;border:1px solid var(--line);border-radius:8px; color:var(--muted);transition:border-color .15s,color .15s} .pub .pager .page-gap{border-color:transparent} .pub .pager a:hover{border-color:var(--ink);color:var(--ink)} .pub .pager .page-now{background:var(--ink);border-color:var(--ink);color:#fff; font-weight:500} .pub .pager .page-prev,.pub .pager .page-next{font-family:var(--mono);font-size:12.6px; letter-spacing:.08em;text-transform:uppercase} /* ------------------------------------------------------------------ article */ .pub .preview-banner{background:#FFF6E5;border-bottom:1px solid #E8C87A;padding:12px 0; font-family:var(--mono);font-size:13px;color:#7A5A12} /* One measure for everything an article is made of, centred on the page. The mini map does not get a column of its own in that sum - it sits in the right margin, opposite an equal empty one on the left - because a rail that is part of the grid drags the whole article off centre, which is exactly how this page looked left-heavy before. */ .pub .post-column{max-width:720px;margin-inline:auto} .pub .post-head{padding:clamp(30px,4vw,52px) 0 clamp(24px,2.8vw,36px)} .pub .post-head .crumbs{max-width:720px;margin-inline:auto} .pub .post-head .kicker{margin-top:22px} .pub .post-head h1{margin:16px 0 0;font-size:clamp(32px,4.4vw,50px);letter-spacing:-.034em; line-height:1.1} .pub .post-sub{margin-top:18px;font-size:clamp(17.5px,1.8vw,21px);line-height:1.5; color:var(--muted)} .pub .post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px; padding-top:20px;border-top:1px solid var(--line)} .pub .byline{display:flex;align-items:center;gap:12px} .pub .byline-name{font-size:15px;font-weight:500} .pub .byline-name:hover{color:var(--accent)} .pub .byline-meta{display:flex;flex-wrap:wrap;gap:3px 13px;margin-top:3px; font-size:13.6px;color:var(--muted-2)} .pub .byline-meta>*+*::before{content:"·";margin-right:6px;color:var(--line)} .pub .updated{color:var(--accent)} .pub .share{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto} .pub .share a,.pub .share button{display:grid;place-items:center;min-width:36px;height:36px; padding:0 10px;font-family:var(--mono);font-size:11.6px;color:var(--muted-2); background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer; transition:border-color .15s,color .15s} .pub .share a:hover,.pub .share button:hover{border-color:var(--ink);color:var(--ink)} .pub .share button.is-copied{border-color:#2E7A2B;color:#2E7A2B} .pub .post-cover{margin:0} .pub .post-cover img{width:100%;max-width:980px;margin-inline:auto;aspect-ratio:16/9; object-fit:cover;border:1px solid var(--line);border-radius:12px} .pub .post-cover.is-generated img{aspect-ratio:auto;max-height:280px} .pub .post-cover figcaption{max-width:720px;margin:10px auto 0;font-family:var(--mono); font-size:12.4px;color:var(--muted-2)} /* The mini map. Pinned down the right of the article on a wide screen, and a plain contents box above the text on anything narrower - a rail that has nowhere to sit is worse than no rail. */ .pub .post-shell{display:grid;gap:clamp(30px,3vw,52px);align-items:start; padding-block:clamp(30px,3.4vw,46px) clamp(44px,5vw,76px)} @media (min-width:1200px){ .pub .post-shell{grid-template-columns:minmax(0,1fr) minmax(0,720px) minmax(0,1fr); gap:0} .pub .post-shell .post-column{grid-column:2} /* Fills the right margin rather than being a fixed 220px inside it: a fixed width plus a fixed gap overran the track at narrower viewports and pushed the map into the page padding. */ .pub .post-shell .toc{grid-column:3;justify-self:stretch;max-width:280px; padding-left:clamp(28px,2.6vw,44px)} } .pub .toc{margin:clamp(30px,3.4vw,44px) 0 0;padding:20px 22px;background:var(--surface); border:1px solid var(--line);border-radius:12px} @media (min-width:1200px){ .pub .toc{position:sticky;top:100px;margin:0;padding:0;background:none;border:0; border-radius:0} .pub .toc ol{border-left:1px solid var(--line)} .pub .toc li{padding:7px 0 7px 15px;border-left:2px solid transparent;margin-left:-1px} .pub .toc .toc-3{padding-left:27px} .pub .toc .is-current{border-left-color:var(--accent)} } .pub .toc-head{padding-bottom:12px;font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .pub .toc ol{display:grid;gap:0;margin:0;padding:0;list-style:none} .pub .toc a{font-size:14.2px;line-height:1.4;color:var(--muted);transition:color .15s} .pub .toc a:hover,.pub .toc .is-current>a{color:var(--accent)} @media (max-width:1199px){ .pub .toc ol{gap:8px;margin-top:12px} .pub .toc .toc-3{padding-left:16px} .pub .post-shell .toc{order:-1} } .pub .post-body{padding-top:0} /* ------------------------------------------------------------------- prose */ .pub .post-body{max-width:none;padding:clamp(30px,3.4vw,44px) 0 0;font-size:18px; line-height:1.76;color:var(--muted)} .pub .post-body>p:first-of-type{font-size:20px;line-height:1.66;color:var(--ink)} .pub .post-body p{margin-top:20px} .pub .post-body p:first-child{margin-top:0} .pub .post-body h2{margin:52px 0 0;font-size:27px;font-weight:600;letter-spacing:-.024em; line-height:1.22;color:var(--ink);scroll-margin-top:104px} .pub .post-body h3{margin:36px 0 0;font-size:21px;font-weight:600;letter-spacing:-.018em; color:var(--ink);scroll-margin-top:104px} .pub .post-body h4{margin:30px 0 0;font-size:17.5px;font-weight:600;color:var(--ink); scroll-margin-top:104px} .pub .post-body h2:first-child{margin-top:0} .pub .post-body .anchor{margin-left:10px;font-family:var(--mono);font-size:.6em; color:var(--line);opacity:0;text-decoration:none;transition:opacity .15s,color .15s; vertical-align:middle} .pub .post-body h2:hover .anchor,.pub .post-body h3:hover .anchor, .pub .post-body h4:hover .anchor,.pub .post-body .anchor:focus-visible{opacity:1; color:var(--accent)} .pub .post-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .pub .post-body ul{margin-top:18px;display:grid;gap:10px;padding:0;list-style:none} .pub .post-body ul li{position:relative;padding-left:22px} .pub .post-body ul li::before{content:"";position:absolute;left:0;top:.74em;width:9px; height:1.5px;background:var(--accent)} .pub .post-body ol{margin-top:18px;padding-left:26px;display:grid;gap:10px;list-style:decimal} .pub .post-body ol li::marker{font-family:var(--mono);font-size:.86em;color:var(--muted-2)} .pub .post-body ul ul,.pub .post-body ol ol,.pub .post-body ol ul, .pub .post-body ul ol{margin-top:10px} .pub .post-body strong{font-weight:600;color:var(--ink)} .pub .post-body del{color:var(--muted-2)} .pub .post-body hr{margin:46px 0 0;border:0;border-top:1px solid var(--line)} .pub .post-body blockquote{margin:34px 0 0;padding:4px 0 4px 22px; border-left:2px solid var(--accent)} .pub .post-body blockquote p{margin:0;font-size:20px;line-height:1.5;color:var(--ink)} .pub .post-body figure{margin:34px 0 0} .pub .post-body figure img{width:100%;border:1px solid var(--line);border-radius:10px} .pub .post-body figcaption{margin-top:10px;font-family:var(--mono);font-size:12.4px; line-height:1.5;color:var(--muted-2)} .pub .post-body code{font-family:var(--mono);font-size:14.6px;background:var(--surface); padding:2px 6px;border:1px solid var(--line);border-radius:4px} .pub .code-block{margin:30px 0 0;border:1px solid var(--line);border-radius:10px; background:var(--surface);overflow:hidden} .pub .code-name{padding:10px 18px;font-family:var(--mono);font-size:12.2px; color:var(--muted-2);border-bottom:1px solid var(--line)} .pub .code-block pre{margin:0;padding:20px;overflow-x:auto} .pub .post-body pre code{font-size:14px;line-height:1.68;white-space:pre;background:none; padding:0;border:0} .pub .table-wrap{margin:30px 0 0;overflow-x:auto;border:1px solid var(--line); border-radius:10px} .pub .post-body table{width:100%;border-collapse:collapse;font-size:15.4px} .pub .post-body th,.pub .post-body td{padding:12px 16px;text-align:left; border-bottom:1px solid var(--line);color:var(--muted)} .pub .post-body th{font-family:var(--mono);font-size:11.6px;font-weight:500; letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:var(--surface); white-space:nowrap} .pub .post-body td{font-variant-numeric:tabular-nums} .pub .post-body tbody tr:last-child td{border-bottom:0} .pub .callout{margin:30px 0 0;padding:20px 22px;background:var(--surface); border:1px solid var(--line);border-radius:10px;border-left:3px solid var(--muted-2)} .pub .callout p{margin:0;color:var(--muted)} .pub .callout-label{margin-bottom:7px!important;font-family:var(--mono);font-size:11.2px; font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)!important} .pub .callout-warning,.pub .callout-caution{border-left-color:var(--accent); background:#FDF5F4} .pub .callout-warning .callout-label,.pub .callout-caution .callout-label{ color:var(--accent)!important} .pub .callout-tip{border-left-color:#2E7A2B;background:#F4FAF4} .pub .callout-tip .callout-label{color:#2E7A2B!important} .pub .footnotes{margin-top:52px;padding-top:24px;border-top:1px solid var(--line)} .pub .footnotes h2{margin:0;font-family:var(--mono);font-size:11.4px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .pub .footnotes ol{margin-top:16px;padding-left:24px;display:grid;gap:9px;list-style:decimal} .pub .footnotes li{font-size:15.4px;color:var(--muted)} .pub .fn-ref a{padding:0 2px;color:var(--accent);text-decoration:none} .pub .fn-back{margin-left:6px;color:var(--muted-2)} /* ----------------------------------------------------- tags, author, ends */ .pub .tag-row{display:flex;flex-wrap:wrap;gap:8px;max-width:720px;margin:44px auto 0} .pub .tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono); font-size:12.4px;padding:6px 12px;color:var(--muted);border:1px solid var(--line); border-radius:999px;transition:border-color .15s,color .15s} .pub .tag::before{content:"#";color:var(--muted-2)} .pub .tag:hover{border-color:var(--ink);color:var(--ink)} .pub .author-card{display:flex;gap:18px;max-width:720px;margin:36px auto 0;padding:24px; background:var(--surface); border:1px solid var(--line);border-radius:12px} .pub .author-name{font-size:17px;font-weight:600} .pub .author-name a:hover{color:var(--accent)} .pub .author-bio{margin-top:8px;max-width:58ch;font-size:15.4px;line-height:1.6; color:var(--muted)} .pub .author-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px; font-family:var(--mono);font-size:12.6px} .pub .author-links a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .pub .author-head{display:flex;gap:18px;align-items:flex-start;margin-top:20px} .pub .neighbours{border-top:1px solid var(--line)} .pub .neighbours .shell{display:grid;gap:0} @media (min-width:720px){.pub .neighbours .shell{grid-template-columns:repeat(2,1fr)}} .pub .neighbour{display:block;padding:26px 0} .pub .neighbour:empty{display:none} @media (min-width:720px){ .pub .neighbour:empty{display:block;border:0} .pub .neighbour.prev{padding-right:30px;border-right:1px solid var(--line)} .pub .neighbour.next{padding-left:30px;text-align:right} } @media (max-width:719px){.pub .neighbour+.neighbour{border-top:1px solid var(--line)}} .pub .neighbour span{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted-2)} .pub .neighbour b{display:block;margin-top:9px;font-size:18.5px;font-weight:600; line-height:1.26;letter-spacing:-.02em} .pub .neighbour:hover b{color:var(--accent)} /* -------------------------------------------------------------- comments */ .pub .comments{border-top:1px solid var(--line)} .pub .comments .sec-head,.pub .comments .comment-list,.pub .comments .comment-form{ max-width:720px;margin-inline:auto} .pub .comment-list{display:grid;border-top:1px solid var(--line)} .pub .comment{padding:24px 0;border-bottom:1px solid var(--line)} .pub .comment-head{display:flex;align-items:center;gap:12px} .pub .comment-name{font-size:15px;font-weight:500} .pub .comment-name a:hover{color:var(--accent)} .pub .comment-head time{font-family:var(--mono);font-size:12.2px;color:var(--muted-2)} .pub .badge{margin-left:6px;padding:2px 8px;font-family:var(--mono);font-size:10.4px; letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line); border-radius:999px} .pub .reply-btn{margin-left:auto;padding:6px 13px;font:inherit;font-size:13.2px; color:var(--muted);background:none;border:1px solid var(--line);border-radius:8px; cursor:pointer;transition:border-color .15s,color .15s} .pub .reply-btn:hover{border-color:var(--ink);color:var(--ink)} .pub .comment-body{margin-top:12px;padding-left:38px;font-size:16px;line-height:1.66; color:var(--muted)} .pub .comment-body p+p{margin-top:12px} .pub .comment-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .pub .comment-body code{font-family:var(--mono);font-size:14px;background:var(--surface); padding:1px 5px;border:1px solid var(--line);border-radius:4px} .pub .comment-body pre{margin-top:12px;padding:14px 16px;overflow-x:auto; background:var(--surface);border:1px solid var(--line);border-radius:8px} .pub .comment-body pre code{background:none;border:0;padding:0} .pub .comment-replies{margin:18px 0 0;padding-left:38px;border-left:1px solid var(--line); display:grid} .pub .comment-replies .comment{padding:18px 0 0;border-bottom:0} .pub .comment-empty{padding:24px 0;border-bottom:1px solid var(--line);color:var(--muted-2)} .pub .comment-form{display:grid;gap:18px;margin-top:32px} .pub .form-two{display:grid;gap:18px} @media (min-width:640px){.pub .form-two{grid-template-columns:repeat(2,1fr)}} .pub .comment-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .pub .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px} .pub .reply-to{font-family:var(--mono);font-size:12.6px;color:var(--muted-2)} .pub .reply-to button{margin-left:10px;padding:0;font:inherit;color:var(--accent); background:none;border:0;cursor:pointer;text-decoration:underline} /* ---------------------------------------------------------------- sidebar */ .pub .sidebar{display:grid;gap:0;align-content:start;min-width:0} @media (min-width:1000px){.pub .sidebar{position:sticky;top:96px}} .pub .side-panel+.side-panel{margin-top:20px;padding-top:20px; border-top:1px solid var(--line)} .pub .side-head{font-family:var(--mono);font-size:10.8px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px} .pub .side-about{padding:18px;background:var(--surface);border:1px solid var(--line); border-radius:12px} .pub .side-about+.side-panel{margin-top:24px;padding-top:0;border-top:0} .pub .side-eyebrow{font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)} .pub .side-about h1{margin:9px 0 0;font-size:23px;font-weight:600;letter-spacing:-.026em; line-height:1.18} .pub .side-about p{margin-top:9px;font-size:14.8px;line-height:1.55;color:var(--muted)} .pub .sidebar .search{margin:0} .pub .sidebar .search input{width:100%;min-width:0} .pub .cat-list{display:grid} .pub .cat-list li+li{border-top:1px solid var(--line)} .pub .cat-list a{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:15px; color:var(--muted);transition:color .15s} .pub .cat-list .dot{width:8px;height:8px;border-radius:50%;background:var(--chip,var(--muted-2)); flex:none} .pub .cat-list a b{margin-left:auto;font-family:var(--mono);font-size:11.6px;font-weight:400; color:var(--muted-2)} .pub .cat-list a:hover,.pub .cat-list .is-active a{color:var(--ink)} .pub .cat-list .is-active a{font-weight:500} .pub .tag-cloud{display:flex;flex-wrap:wrap;gap:7px} .pub .side-follow p{font-size:14.4px;line-height:1.52;color:var(--muted)} .pub .side-links{display:grid;gap:7px;margin-top:11px} .pub .side-links a{font-family:var(--mono);font-size:12.4px;color:var(--ink); justify-self:start;border-bottom:1px solid var(--line);transition:border-color .15s,color .15s} .pub .side-links a:hover{border-color:var(--accent);color:var(--accent)} .pub .strip-label{margin-bottom:18px;font-family:var(--mono);font-size:11.4px; font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} /* ------------------------------------------------------------------ giscus */ /* The thread is an iframe giscus sizes itself; all this does is give it the same measure and the same top rule as everything else on the page. */ .pub .comments .giscus{max-width:720px;margin:clamp(24px,2.6vw,34px) auto 0} /* The frame sizes itself; this only gives it the page's measure. Its colour scheme is not settable from here - see giscus_theme_value in config.py. */ .pub .comments .giscus-frame{width:100%;border:0} .pub .giscus-fallback{max-width:720px;margin:20px auto 0;color:var(--muted)} .pub .giscus-fallback a{color:var(--accent);text-decoration:underline; text-underline-offset:3px} .pub .comments .sec-sub a{color:var(--accent);text-decoration:underline; text-underline-offset:3px}