/* Blog (Bloq CGI): same header and footer as the site (/assets/style.css). One centered box (max 720px); the sidebar stacks below it, above the footer. ASCII only. */
.blog-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.blog-frame{flex:1 0 auto;box-sizing:border-box;width:100%;max-width:calc(720px + 8vw);margin:0 auto;padding:30px 4vw 40px}
@media(min-width:1030px){.blog-frame{padding-top:80px}}
@media(max-width:600px){.blog-frame{padding-left:24px;padding-right:24px}}
.blog-page .blog-main{display:flex;flex-direction:column;min-width:0;margin:0;font-size:12px;line-height:1.9;color:#222}
/* the blog name stays in the page as the h1 for assistive tech and search, but is not shown */
.blog-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* links: the text color, no underline, visited the same; underline only on hover (as on the work pages); keyboard focus keeps the thin ring of style.css.
   Text links inside an entry keep a thin underline so that they can be told from the text. */
.blog-page .blog-main a,.blog-page .blog-main a:visited,.blog-page .blog-side a,.blog-page .blog-side a:visited{color:#222;text-decoration:none}
.blog-page .blog-main a:hover,.blog-page .blog-side a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.blog-page .blog-main .entry-body a,.blog-page .blog-main .entry-body a:visited{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* entry title: same face and size as the title on a work page (20px; 18px on narrow screens) */
.entry-title{margin:3.8em 0 .3em;padding:1.9em 0 0;border-top:1px solid #ddd;font-size:20px;font-weight:400;line-height:1.3;text-wrap:balance;overflow-wrap:anywhere}
.blog-main>.entry-title:first-of-type{margin-top:0;padding-top:0;border-top:0}
/* a full entry (title, body, meta; marked by blog.js): the gap around the separator line is the section gap of text.css (3.8em of 12px = 46px), split above and below the line, not 3.8em of the 20px title */
.entry-title.entry-full{margin-top:23px;padding-top:23px}
.entry-title a{color:inherit;text-decoration:none}
@media(max-width:1029px){.entry-title{font-size:18px}}
.entry-date{margin:0 0 1.6em;font-size:12px;line-height:1.9;color:#595959}
.entry-title+.entry-body{margin-top:1.6em}
/* entry body: 12px, line height 1.9, images up to the column width, centered */
.entry-body{margin:0 0 1em;overflow-wrap:anywhere}
.entry-body img{display:block;max-width:100%;height:auto;margin:1.2em auto!important;float:none!important}
.entry-body img[width="120"]{width:auto}
.entry-body iframe,.entry-body video,.entry-body embed,.entry-body object,.entry-body table{max-width:100%}
.entry-body table{display:block;overflow-x:auto}
.entry-rule{margin:.8em 0;border:0;border-top:1px solid #eee}
/* top page: a long entry body is cut at 600px and faded to white (blog.js adds .entry-clipped and the read-more link) */
.entry-clipped{position:relative;max-height:600px;overflow:hidden}
.entry-clipped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.entry-more{margin:.2em 0 1em;font-size:11px;line-height:1.9}
/* meta line (permalink, comments, trackbacks) and comments: 11px, quiet */
.blog-main div[align=right]{text-align:left;font-size:11px;line-height:1.9;color:#595959}
.blog-main font,.blog-main small{font-size:inherit;color:inherit}
.blog-main>br{display:none}
.blog-main h3{margin:2.85em 0 .6em;font-size:11px;font-weight:400;color:#595959}
.entry-comments{font-size:11px;line-height:1.9;color:#595959}
.entry-comments .entry-body{font-size:11px;margin:0}
.entry-comments .entry-rule{margin:.4em 0}
.entry-nav{order:99;margin:23px 0 0;padding-top:23px;border-top:1px solid #ddd;font-size:11px}
.blog-main .entry-nav[align=right],.blog-main div.entry-nav{text-align:center}
.blog-main p{margin:0 0 1em}
.blog-main form{margin:1em 0}
.blog-main input[type=text],.blog-main input[type=password],.blog-main textarea{max-width:100%;box-sizing:border-box;font:inherit}
.br-extra{display:none}
/* sidebar: below the main box, same width, stacked, 11px */
.blog-side{box-sizing:border-box;margin:23px 0 0;padding:23px 0 0;border-top:1px solid #ddd;font-size:11px;line-height:1.8;color:#222}
.side-block{margin:0 0 2.2em}
.side-block h2{margin:0 0 .7em;font-size:11px;font-weight:400;color:#595959}
.side-block a{text-decoration:none}
.side-block a:hover{text-decoration:underline}
.side-profile{margin:0}
.side-profile a{display:inline-flex;align-items:center;gap:12px}
.side-profile img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.blog-side a.left{display:block;margin:0 0 .5em;line-height:1.7}
.blog-side tt{display:block;font:inherit;columns:4 9em;column-gap:24px}
.blog-side tt a{display:block;break-inside:avoid}
.blog-side tt br{display:none}
.side-calendar table{border-collapse:collapse;max-width:100%;font-size:11px;line-height:1.6}
.side-calendar td,.side-calendar th{padding:1px 6px;text-align:center}
.side-calendar font,.side-block font{font-size:inherit}
.side-admin{font-size:11px;margin-bottom:0}
.side-admin input[type=password]{width:5em;font:inherit}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* top page: only the first entry is shown (blog.js adds .top-hidden to the rest) */
.top-hidden{display:none!important}
/* the calendar is not shown */
.side-calendar{display:none}
/* past posts: a row of years; a year opens a small list of its months below the row (blog.js) */
.past-nav{font-size:11px;line-height:1.8}
.past-years{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;padding:0;list-style:none}
.past-years li{margin:0}
.past-years button{margin:0;padding:2px 0;border:0;background:none;font:inherit;color:#222;cursor:pointer}
.past-years button:hover,.past-years button[aria-expanded=true]{text-decoration:underline}
.past-years button:focus-visible{outline:1px solid #555;outline-offset:3px}
.past-panel{margin:8px 0 0;padding:8px 0 0;border-top:1px solid #eee}
.past-months{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:0;list-style:none}
.past-months li{margin:0}
.past-months a{display:inline-block;padding:1px 0}
.blog-side tt[hidden]{display:none}
/* the profile block (photo, name, heading) is not shown; its HTML stays in base.cgi */
.blog-side>.side-block:first-child{display:none}
/* the month list is a full-width row of the wrapped year list, right below the row of the selected year (blog.js) */
.past-panel-item{flex:0 0 100%;margin:0}
.past-panel-item[hidden]{display:none}
/* admin box: small and quiet (names, values and actions are the CGI's; only the look is set here) */
.side-admin form{margin:0}
.side-admin div{display:flex;align-items:center;gap:6px;margin:0}
.side-admin input[type=password]{box-sizing:border-box;width:70px;height:22px;margin:0;padding:0 4px;border:1px solid #bbb;border-radius:0;background:#fff;color:#222;font:inherit;font-size:11px;appearance:none;-webkit-appearance:none}
.side-admin input[type=submit]{box-sizing:border-box;height:22px;margin:0;padding:0 8px;border:1px solid #bbb;border-radius:0;background:none;color:#222;font-family:inherit;font-size:11px;line-height:1;cursor:pointer;appearance:none;-webkit-appearance:none}
.side-admin input[type=checkbox]{width:12px;height:12px;margin:0;accent-color:#999}
.side-admin input:focus-visible{outline:1px solid #555;outline-offset:2px}
/* wide screens (1000px and over): the sidebar stands at the left, in the same place as the left column (180px: h1 and section items) of the text pages
   (cont/, prof/), and the entry starts where the text of those pages starts. Measured on the text pages (1280px: column at 51.2px = 4vw, body at 352px;
   1100px: column at 44px, body at 314.8px). The body's left edge is 4vw + (92vw - W)/2 + W/10, where W = min(92vw - 424px, 720px) is the width of the text page stage;
   the gap between the column and the body is whatever remains (120.8px at 1280, 90.8px at 1100). The top is the top of the entry title. Not fixed: it scrolls with the page. */
@media(min-width:1000px){
.blog-frame{--stage:min(calc(92vw - 424px),720px);--bodyL:calc(4vw + (92vw - var(--stage)) / 2 + var(--stage) / 10);display:grid;grid-template-columns:180px minmax(0,min(720px,calc(100vw - var(--bodyL) - 4vw)));grid-template-areas:"side main";column-gap:calc(var(--bodyL) - 4vw - 180px);align-items:start;width:auto;max-width:none;margin:0 0 0 4vw;padding-left:0;padding-right:0}
.blog-page .blog-main{grid-area:main}
.blog-side{grid-area:side;margin:0;padding:0;border-top:0}
.side-block{margin:0 0 24px}
}
/* admin box at the bottom of the page, right above the footer: its left edge is the header text (4vw; 24px on narrow screens), 24px to the footer line (the footer adds 16px above itself) */
.blog-admin-bar{box-sizing:border-box;margin:0 0 8px;padding:0 4vw;font-size:11px;line-height:1.8}
.blog-admin-bar .side-admin{margin:0}
@media(max-width:600px){.blog-admin-bar{padding:0 24px}}
/* the permalink link is not shown (it stays in the HTML; blog.js uses its address for "read more"). One thin line under an entry: the line above the (hidden) permalink line;
   the previous/next row has no line of its own and stands 23px below it, like the other separators */
.blog-main div[align=right] a[title=permalink]{display:none}
.blog-page .blog-main h2.entry-title a[title=permalink]{display:inline}
.entry-rule{margin:.8em 0 0}
.entry-nav{margin:23px 0 0;padding-top:0;border-top:0}
/* new-entry form (after login): small quiet tools above the body field */
.post-tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.post-tool{box-sizing:border-box;height:22px;margin:0;padding:0 8px;border:1px solid #bbb;border-radius:0;background:none;color:#222;font-family:inherit;font-size:11px;line-height:1;cursor:pointer;appearance:none;-webkit-appearance:none}
.post-tool:hover,.post-tool[aria-expanded=true]{border-color:#555}
.post-tool:focus-visible{outline:1px solid #555;outline-offset:2px}
.post-panel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;margin:0 0 10px;padding:8px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;font-size:11px;line-height:1.6}
.post-panel[hidden]{display:none}
.post-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.post-field label{color:#595959}
.post-field input,.post-field textarea{box-sizing:border-box;width:260px;max-width:100%;padding:2px 4px;border:1px solid #bbb;border-radius:0;background:#fff;color:#222;font:inherit;font-size:11px}
.post-field input{height:22px}
.post-field textarea{width:340px;height:auto}
.post-msg{flex:1 0 100%;color:#a00;min-height:0}
.post-msg:empty{display:none}
/* photo drag and drop onto the body field: a thin dark-grey dotted frame while dragging; the status line under the field is small and quiet */
textarea.post-drop{outline:1px dotted #555;outline-offset:-3px;border-color:#555}
.post-dnd-msg{min-height:0;margin:4px 0 0;font-size:11px;line-height:1.6;color:#595959}
.post-dnd-msg:empty{display:none}
/* logged in: "logout" / "maintenance" in the bottom admin bar (the CGI's own links; only the look is set here) */
.side-admin-in{display:flex;flex-wrap:wrap;gap:0 20px}
.side-admin-in br,.side-admin-in p{display:none}
.side-admin-in a{color:#222;text-decoration:none}
.side-admin-in a:hover{text-decoration:underline}
.side-admin-in a:focus-visible{outline:1px solid #555;outline-offset:2px}
.side-admin-in font{font-size:inherit}
input.post-logout{box-sizing:border-box;height:22px;margin:0 0 0 24px;padding:0 8px;border:1px solid #bbb;border-radius:0;background:none;color:#222;font-family:inherit;font-size:11px;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none}
input.post-logout:hover{border-color:#777}
input.post-logout:focus-visible{outline:1px solid #555;outline-offset:2px}
/* image width choice (100 / 75 / 50 %) next to the tool buttons */
.post-width{display:inline-flex;align-items:center;gap:10px;margin:0 0 0 16px;padding:0;border:0;min-width:0;font-size:11px;line-height:22px;color:#222}
.post-width legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.post-width-label{color:#595959}
.post-width label{display:inline-flex;align-items:center;gap:3px;cursor:pointer}
.post-width input{width:12px;height:12px;margin:0;accent-color:#555}
.post-width input:focus-visible{outline:1px solid #555;outline-offset:2px}
/* preview window ("check"): the CGI writes "DATE | permalink" there; the whole line is not shown (the HTML stays) */
body[onunload] .entry-rule + div[align=right]{display:none}