/* Blog: the Lens tokens, header, footer and lens from home.css, with reading typography. The theme class sits on <html>. */
html{background:var(--bg)}
@view-transition{navigation:auto}
.bl [hidden]{display:none!important}
:root.theme-light .bl-sun,:root.theme-dark .bl-moon{display:none}
.rf-nav a[aria-current="true"]{color:var(--text)}
.bl .rf-footer-base a{text-decoration:none;transition:color .25s}
.bl .rf-footer-base a:hover{color:var(--text)}
.bl .lx-footmark{margin-top:56px}
.bl-out::after{content:"↗";display:inline-block;margin-left:.18em;color:var(--accent-text);font-size:.8em;text-decoration:none;transform:translateY(-.08em)}

/* ---------- index: hero with the θ lens ---------- */
.bl-hero{--h1:clamp(38px,10.2vw,156px);padding-block:clamp(40px,6vw,88px) clamp(48px,6vw,88px)}
.bl-hero .lx-hero-meta{margin-bottom:4px}
.bl-rss{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--accent-text);text-decoration:none;transition:color .25s}
.bl-rss:hover{color:var(--text)}
.bl-rss .ico{width:14px;height:14px}
.bl-rss circle{fill:currentColor}
.bl-stack .lx-lens{left:70%}
.lx-tag.bl-t1{left:56%;top:8%}
.lx-tag.bl-t2{left:8%;top:72%}
.bl-hero-foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5vw,80px);align-items:end;margin-top:clamp(20px,3vw,40px)}
.bl-hero-foot .rf-lead{max-width:48ch}
.bl-promise{list-style:none;margin:0;padding:0;color:var(--muted)}
.bl-promise li{display:flex;align-items:center;gap:12px;padding-block:13px;border-top:1px solid var(--line)}
.bl-promise li:last-child{border-bottom:1px solid var(--line)}
.bl-promise li::before{content:"";flex:none;width:6px;height:6px;background:var(--accent)}

/* ---------- index: filters and the post list ---------- */
.bl-list-wrap{padding-block:clamp(28px,4vw,48px) clamp(88px,11vw,150px)}
.bl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.4vw,48px)}
.bl-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--text);font:500 14px/1 "Sora",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .25s,background-color .25s,color .25s}
.bl-chip span{color:var(--muted);font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;transition:color .25s}
.bl-chip:hover{border-color:var(--text)}
.bl-chip[aria-current="page"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.bl-chip[aria-current="page"] span{color:color-mix(in srgb,var(--bg) 70%,var(--text))}
.bl-list{list-style:none;margin:0;padding:0}
.bl-row{position:relative;display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(0,6fr) auto;align-items:start;gap:14px clamp(24px,4vw,64px);padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--line-strong);color:inherit;text-decoration:none}
.bl-item:last-child .bl-row{border-bottom:1px solid var(--line-strong)}
.bl-row::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.bl-row-date{padding-top:.4em;color:var(--muted)}
.bl-row-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.bl-row-kind{color:var(--accent-text)}
.bl-row-title{max-width:30ch;font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.is-lead .bl-row-title{max-width:20ch;font-size:clamp(32px,4.6vw,68px);line-height:1;letter-spacing:-.04em}
.bl-row-sum{max-width:62ch;color:var(--muted);font-size:16px;line-height:1.55}
.is-lead .bl-row-sum{font-size:clamp(17px,1.4vw,19px)}
.bl-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--muted);font-size:11px}
.bl-row-likes{display:inline-flex;align-items:center;gap:6px;color:var(--accent-text)}
.bl-row-likes .ico{width:13px;height:15px}
.bl-row-cta{align-self:center}
.bl-row:focus-visible .bl-row-cta{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
.bl-draft-tag{margin-left:8px;padding:3px 6px;border:1px solid var(--threat);border-radius:4px;color:var(--threat);font-weight:500}
@media (hover:hover){
.bl-row:hover::after{transform:scaleX(1)}
.bl-row:hover .bl-row-cta{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
.bl-row:hover .bl-row-cta .ico{transform:translateX(3px)}
}
.bl-list.is-more .bl-row-title{font-size:clamp(22px,2.2vw,30px)}

/* ---------- article ---------- */
.bl-head{padding-block:clamp(36px,5.6vw,84px) clamp(28px,4vw,52px)}
.bl-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--muted)}
.bl-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none;transition:color .25s}
.bl-crumbs a:last-child{color:var(--accent-text)}
.bl-crumbs a:hover{color:var(--text)}
.bl-draft{display:inline-block;margin-top:18px;padding:8px 12px;border:1px dashed var(--threat);border-radius:6px;color:var(--threat)}
.bl-title{max-width:19ch;margin-top:22px;font-weight:600;font-size:clamp(38px,6.2vw,94px);line-height:1;letter-spacing:-.042em;text-wrap:balance}
.bl-lead{max-width:58ch;margin-top:clamp(20px,2.4vw,32px)}
.bl-meta{display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,56px);margin:clamp(28px,3.4vw,48px) 0 0}
.bl-meta div{display:flex;flex-direction:column;gap:8px}
.bl-meta dt{color:var(--muted)}
.bl-meta dd{margin:0;color:var(--text)}
.bl-meta a{color:var(--accent-text);text-decoration:none}
.bl-scan{height:10px}
.bl-notes{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(28px,3vw,44px)}
.bl-note{display:flex;flex-direction:column;gap:6px;max-width:780px;padding:16px 18px;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--text);font-size:16px;line-height:1.55}
.bl-note .rf-mono{color:var(--accent-text)}
.bl-note.is-correction{border-left-color:var(--threat)}
.bl-note.is-correction .rf-mono{color:var(--threat)}
.bl-layout{padding-block:clamp(40px,5vw,72px) clamp(72px,9vw,128px)}
.bl-layout.has-toc{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(40px,6vw,104px)}
.bl-toc{position:sticky;top:104px;align-self:start;max-height:calc(100vh - 128px);overflow:auto}
.bl-toc p{margin-bottom:14px;color:var(--muted)}
.bl-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.bl-toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:1px solid transparent;color:var(--muted);font-size:14px;line-height:1.4;text-decoration:none;transition:color .25s,border-color .25s}
.bl-toc a:hover{color:var(--text)}
.bl-toc a[aria-current]{border-left-color:var(--accent);color:var(--text)}

/* ---------- reading typography ---------- */
.bl-body{min-width:0;max-width:720px;color:var(--text);font-size:18px;line-height:1.72}
.bl-body p,.bl-body li{color:color-mix(in srgb,var(--text) 88%,var(--muted))}
.bl-body > p:first-child{margin-top:0}
.bl-body p,.bl-body ul,.bl-body ol,.bl-body blockquote,.bl-body pre,.bl-body table{margin:20px 0 0}
.bl-body h2{margin-top:clamp(52px,5.4vw,80px);font-size:clamp(27px,2.7vw,38px);font-weight:600;line-height:1.14;letter-spacing:-.028em;text-wrap:balance}
.bl-body > h2:first-child,.bl-auds > .bl-aud-switch + .bl-aud > h2{margin-top:0}
.bl-body h3{margin-top:40px;font-size:clamp(20px,1.8vw,24px);font-weight:600;line-height:1.25;letter-spacing:-.015em}
.bl-body h2 + p,.bl-body h3 + p{margin-top:14px}
.bl-body ul,.bl-body ol{padding-left:22px}
.bl-body li + li{margin-top:8px}
.bl-body li::marker{color:var(--accent-text)}
.bl-body a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s}
.bl-body a:hover{color:var(--accent-text)}
.bl-body strong{color:var(--text);font-weight:600}
.bl-body blockquote{padding:2px 0 2px 20px;border-left:2px solid var(--line-strong)}
.bl-body code{padding:.1em .38em;border:1px solid var(--line);border-radius:6px;background:var(--surface);font:400 .86em "JetBrains Mono",ui-monospace,monospace}
.bl-body pre{padding:18px 20px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.6}
.bl-body pre code{padding:0;border:0;background:none}
.bl-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px}
.bl-body th,.bl-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl-body th{color:var(--muted);font:500 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.bl-body img{display:block;max-width:100%;height:auto;margin-top:28px;border:1px solid var(--line);border-radius:14px}
.bl-body hr{margin:48px 0 0;border:0;border-top:1px solid var(--line)}
.bl-cite{margin-left:2px;font-size:.62em;line-height:0;vertical-align:super}
.bl .bl-cite a{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;padding:0 .4em;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:999px;color:var(--accent-text);font:500 1em/1 "JetBrains Mono",ui-monospace,monospace;text-decoration:none;transition:background-color .25s,color .25s}
.bl .bl-cite a:hover,.bl .bl-cite a:focus-visible{background:var(--accent-fill);color:var(--on-accent)}

/* confirmed (solid mark), reported (hollow mark), what to do, note */
.bl-callout{margin:28px 0 0;padding:18px 20px 20px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface)}
.bl-callout-k{display:flex;align-items:center;gap:10px;color:var(--accent-text)}
.bl-callout-k::before{content:"";flex:none;width:8px;height:8px;border:1.5px solid currentColor;background:currentColor}
.bl-body .bl-callout > :nth-child(2){margin-top:10px}
.bl-callout.is-confirmed{border-color:color-mix(in srgb,var(--accent) 50%,var(--line-strong))}
.bl-callout.is-reported{border-style:dashed}
.bl-callout.is-reported .bl-callout-k{color:var(--muted)}
.bl-callout.is-reported .bl-callout-k::before{background:transparent}
.bl-callout.is-action{border-color:transparent;background:var(--accent-soft)}
.bl-callout.is-note .bl-callout-k{color:var(--muted)}

/* one version per audience */
.bl-auds{margin-top:clamp(40px,4.4vw,64px)}
.bl-aud-switch{position:sticky;top:84px;z-index:5;max-width:460px;margin:0 0 36px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bl-aud + .bl-aud{margin-top:clamp(52px,5.4vw,80px)}
.bl-aud-switch:not([hidden]) ~ .bl-aud + .bl-aud{margin-top:0}

/* ---------- sources ---------- */
.bl-sources{margin-top:clamp(56px,6vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-strong)}
.bl-body .bl-sources h2{margin-top:0}
.bl-body .bl-src-note{color:var(--muted);font-size:15px;line-height:1.6}
.bl-body .bl-src{list-style:none;margin:20px 0 0;padding:0}
.bl-body .bl-src li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:14px;margin:0;padding:16px 8px 16px 0;border-top:1px solid var(--line);transition:background-color .6s var(--ease)}
.bl-body .bl-src li:last-child{border-bottom:1px solid var(--line)}
.bl-body .bl-src li:target{background:var(--accent-soft)}
.bl-src-n{padding-top:.42em;color:var(--accent-text);text-align:right}
.bl-src-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.bl-body .bl-src-main a{font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.bl-src-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:11px;letter-spacing:.1em}
.bl-kind{padding:3px 6px;border:1px solid var(--line-strong);border-radius:4px;font-weight:500}
.bl-kind.is-official{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent-text)}
.bl-src-back{display:flex}
.bl-body .bl-src-back a{display:inline-grid;place-items:center;min-width:32px;min-height:32px;color:var(--muted);text-decoration:none}

/* ---------- like, share, standards ---------- */
.bl-end{display:flex;flex-direction:column;gap:36px;margin-top:clamp(48px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-strong)}
.bl-like{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.bl-like-btn{display:inline-flex;align-items:center;gap:14px;min-height:76px;padding:12px 28px 12px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,background-color .3s,transform .3s var(--ease)}
.bl-like-btn:hover{border-color:var(--accent)}
.bl-like-btn:active{transform:scale(.97)}
.bl-like-mark{position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:50%}
.bl-like-mark svg{width:30px;height:42px;overflow:visible}
.bl-like-mark ellipse{fill:transparent;stroke:var(--accent);stroke-width:2.2;transition:fill .45s var(--ease)}
.bl-like-mark rect{fill:var(--accent);transition:transform .5s var(--ease),fill .3s}
.bl-like-btn[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:var(--accent-soft)}
.bl-like-btn[aria-pressed="true"] ellipse{fill:var(--accent)}
.bl-like-btn[aria-pressed="true"] .l{transform:translateX(-5px)}
.bl-like-btn[aria-pressed="true"] .r{transform:translateX(5px)}
.bl-like-btn[aria-pressed="true"] .bl-like-node{fill:var(--on-accent)}
.bl-like[data-ping] .bl-like-mark::after{content:"";position:absolute;inset:0;border:1.5px solid var(--accent);border-radius:50%;animation:lx-ping .7s var(--ease) both}
.bl-like-text{display:flex;flex-direction:column;gap:6px}
.bl-like-label{font-weight:600;font-size:17px;line-height:1.2}
.bl-like-count{color:var(--muted);font-size:11px}
.bl-like-msg{color:var(--threat);font-size:11px}
.bl-like-msg:empty{display:none}
.bl-share > .rf-mono,.bl-tags > .rf-mono{color:var(--muted)}
.bl-share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bl-body .bl-chip{text-decoration:none}
.bl-body .bl-standards{max-width:62ch;color:var(--muted);font-size:15px;line-height:1.65}

@media (max-width:1100px){
.bl-layout.has-toc{grid-template-columns:minmax(0,1fr)}
.bl-toc{display:none}
}
@media (max-width:900px){
.bl-hero-foot{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:760px){
.bl-row{grid-template-columns:minmax(0,1fr);gap:10px}
.bl-row-date{padding-top:0}
.bl-row-cta{justify-self:start;margin-top:6px}
.bl-body{font-size:17px}
.bl-aud-switch{top:80px}
.bl-meta{gap:16px 28px}
.bl-like-btn{width:100%}
.lx-tag.bl-t1,.lx-tag.bl-t2{display:none}
}
@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
}