/* A software notebook inspired by the 2016–2023 Zenhack blog. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #eef0f3; color: #202431; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.55; }
#page { max-width: 76rem; margin: 1.5rem auto; padding: 0 2.5rem; background: #fff; border: 1px solid #d5dae4; border-top: 4px solid #343d86; box-shadow: 0 5px 28px #202c4310; }
a { color: rgb(61,61,204); text-decoration: none; text-underline-offset: .15em; overflow-wrap: anywhere; }
a:visited { color: rgb(82,82,180); }
a:hover { text-decoration: underline; }
a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid #5555c7; outline-offset: 4px; }
.site-strip { display: flex; justify-content: space-between; gap: 1em; padding: .7rem 0; border-bottom: 1px solid #e3e6ec; color: #697080; font: .65em/1.5 ui-monospace, 'DejaVu Sans Mono', Consolas, monospace; }
.site-strip a { color: #5c6489; }
#header { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; margin: 1.45rem 0 2rem; padding-bottom: 1.5rem; border-bottom: 3px double #d5d9e5; }
.title { font-size: 2.35em; font-weight: bold; letter-spacing: -.055em; color: #313c82; line-height: 1.15; white-space: nowrap; }
.title:visited { color: #313c82; }
.domain-suffix { color: #747ca3; }
.brand p { font: .69em/1.5 Verdana, sans-serif; color: #737987; margin: .25em 0 0; letter-spacing: .02em; }
nav { display: flex; gap: .55rem; flex-wrap: wrap; }
#header nav a { background: #f3f4f8; color: #424a64; border: 1px solid #dce0eb; border-bottom: 2px solid #cdd3e1; border-radius: 3px; padding: .4em .7em; font: .76em/1.5 Verdana, sans-serif; }
#header nav a[aria-current] { background: #3a448a; border-color: #3a448a; color: #fff; }
#header nav a:hover { background: #e5e8f2; color: #27346f; text-decoration: none; }
.notebook-layout { display: grid; grid-template-columns: minmax(0, 1fr) 14.5rem; gap: 2.4rem; align-items: start; }
.notebook-layout > * { min-width: 0; }
.eyebrow { font: .6em/1.5 ui-monospace, 'DejaVu Sans Mono', Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; color: #636d8b; }
.eyebrow > span { color: #8a91a4; }
.welcome { padding: .1rem 0 1.3rem; }
.welcome .eyebrow { margin: 0 0 .7em; }
.welcome h1 { font-size: 2.1em; letter-spacing: -.025em; margin: .1em 0 .45em; }
.welcome > p:not(.eyebrow) { font-size: 1.09em; margin: .5em 0; }
.welcome > p.welcome-detail { font-size: .88em; color: #686f7b; }
.featured-note { position: relative; padding: 1.1rem 1.4rem 1.2rem; margin: .4rem 0 2rem; background: #f3f5fb; border: 1px solid #dfe4f0; border-left: 3px solid #555fa5; }
.featured-note .eyebrow { margin: 0 0 .7em; }
.featured-note h2 { font-size: 1.25em; margin: .15em 0 .45em; line-height: 1.25; }
.featured-note h2 a { color: #333f83; text-decoration: none; }
.featured-note > p:not(.eyebrow) { color: #566073; font-size: .83em; margin: .5em 0; }
.small-link { display: inline-block; font: .69em/1.6 Verdana, sans-serif; margin-top: .5em; }
.notebook-sidebar { padding-left: 1.3rem; border-left: 1px solid #e0e4ed; }
.sidebar-section { margin-bottom: 1.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid #e0e4ed; }
.sidebar-section:last-child { border-bottom: 0; }
.sidebar-section h2 { font: bold .62em/1.5 Verdana, sans-serif; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 1em; color: #555e79; }
.topic-list { list-style: none; padding: 0; margin: 0; font-size: .74em; }
.topic-list li { display: flex; justify-content: space-between; gap: .6em; padding: .45em 0; border-bottom: 1px dotted #e0e3eb; }
.topic-list li:last-child { border: 0; }
.topic-list a { color: #454e7e; }
.topic-list li > span { font: .8em/1.8 Verdana, sans-serif; color: #8a90a1; }
.byte-note { background: #f6f5f0; padding: 1rem; border: 1px solid #e4e1d4; }
.byte-note .sidebar-label { font: .52em/1.5 Verdana, sans-serif; color: #8b8268; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .7em; }
.byte-note h2 { font: bold 1em/1.25 Georgia, serif; color: #3e4555; letter-spacing: 0; text-transform: none; margin-bottom: .8em; }
.byte-note > p:not(.sidebar-label) { font-size: .64em; color: #6d706f; }
.byte-note table { width: 100%; border-spacing: 3px; font-size: .65em; margin: .8em 0; }
.byte-note th { text-align: left; font-weight: normal; color: #6d706f; font-size: .9em; }
.byte-note td { text-align: center; padding: .35em; background: #fff; border: 1px solid #dedacb; color: #555076; }
.byte-note .small-link { font-size: .57em; }
.year-links { display: flex; flex-wrap: wrap; gap: .45em; }
.year-links a { font: .66em/1.5 ui-monospace, monospace; padding: .25em .4em; background: #f3f4f8; border: 1px solid #e2e5ee; }
.year-links span { color: #8b91a3; }
.sidebar-caption { font-size: .64em; color: #7a808d; line-height: 1.6; margin-top: 1em; }
.sidebar-links > a { display: block; font-size: .69em; padding: .35em 0; }
.contents-list { padding-left: 1.2em; font-size: .71em; }
.contents-list li { padding-bottom: .65em; }
.contents-list a { color: #5c6481; }
h1 { font-size: 1.7em; line-height: 1.2; margin: 1em 0 .65em; }
h2 { font-size: 1.3em; line-height: 1.3; margin: 1.5em 0 .6em; }
p { margin: .85em 0; }
#home > p { max-width: 58rem; }
#blog-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-top: 1.7rem; border-bottom: 2px solid #626b98; padding-bottom: .7em; }
#blog-header h2 { margin: 0; font-size: 1.3em; }
#blog-header > span { font: .58em/1.5 Verdana, sans-serif; color: #868d9b; }
#blog-header > a { font-size: .88em; padding-right: .4rem; }
.post-year > h3 { display: flex; gap: 1em; align-items: center; font: .72em/1.5 ui-monospace, monospace; color: #49547b; margin: 1.6em 0 .4em; padding-bottom: .45em; border-bottom: 1px solid #e4e7ee; }
.post-year > h3 span { font: .73em/1.5 Verdana, sans-serif; color: #9096a2; }
.posts { padding: 0; margin: 0 0 1.5rem; list-style: none; }
.posts li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .8rem; padding: .65rem 0; border-bottom: 1px dotted #e3e6ed; }
.postdate { font: .6em/1.8 ui-monospace, 'DejaVu Sans Mono', Consolas, monospace; white-space: nowrap; color: #8a90a1; padding: .25em 0 0; }
.postlink { font-size: .91em; line-height: 1.35; }
.postlink > a { color: #394a91; }
.post-topic { display: block; font: .58em/1.5 Verdana, sans-serif; color: #8a91a3; margin-top: .4em; }
.index-link { font-size: .88em; }
.post { max-width: 54rem; }
.breadcrumbs { font: .61em/1.5 Verdana, sans-serif; color: #969baa; margin-top: 0; }
.breadcrumbs span { margin: 0 .3em; }
.breadcrumbs a { color: #75809e; text-decoration: none; }
.article-layout .post h1 { margin-top: .7em; font-size: 1.8em; letter-spacing: -.02em; }
.article-layout .notebook-sidebar { margin-top: .2rem; }
.post h1 { max-width: 25em; margin-bottom: .5em; }
.post-meta, .index-meta { font-size: .79em; color: #595959; }
.summary { font-size: 1.04em; }
article a, .project-list a, dl a { text-decoration: underline; }
code, pre { font-family: ui-monospace, 'DejaVu Sans Mono', Consolas, monospace; }
p code { font-size: .83em; background: #f2f2f7; padding: .1em .2em; overflow-wrap: anywhere; }
.code-example { margin: 1.2em 0; max-width: 100%; }
pre { background: #16161b; color: #f3f3f7; border-radius: .25em; padding: 1rem; font-size: .76em; line-height: 1.6; overflow-x: auto; tab-size: 4; }
pre code { white-space: pre; }
figcaption { font-size: .76em; color: #555; }
.citation { font-size: .77em; vertical-align: super; white-space: nowrap; }
.references, .related { font-size: .92em; }
.references li { padding-bottom: .4em; }
.references li:target { background: #eeeeff; }
.archive-note { font-size: .84em; border-left: .22em solid #c8c8e6; padding: .5em .8em; color: #444; }
.post-end { margin-top: 2.5em; font-size: .8em; }
.search { max-width: 38rem; margin: 1.4rem 0; }
.search-row { display: flex; align-items: stretch; gap: .5rem; }
label { display: block; margin: .7em 0 .25em; }
input, textarea, select, button { font: inherit; font-size: .85em; border: 1px solid #999; padding: .45em .6em; border-radius: .12em; background: #fff; color: #171717; }
input, textarea { width: 100%; min-width: 0; }
select { width: 100%; }
button { background: #e6e6f0; cursor: pointer; }
.search-row button { flex-shrink: 0; }
.result-count { font-size: .85em; color: #555; }
.post-index { list-style: none; padding: 0; }
.post-index > li { margin: 1.1em 0 1.5em; padding-bottom: 1.2em; border-bottom: 1px solid #e5e8f0; }
.post-index > li > a { font-size: 1.08em; }
.index-meta { display: block; margin-top: .2em; }
.post-index p { max-width: 49rem; margin: .3em 0; font-size: .9em; }
.pagination { display: flex; justify-content: space-between; align-items: center; font-size: .85em; margin: 2em 0; }
.project-list { list-style: none; padding: 0; }
.project-list h2 { font-size: 1.08em; }
.project-list p { font-size: .85em; }
dt { font-weight: bold; margin-top: .8em; }
dd { margin: .25em 0 .8em 1.2em; }
.contact-form { max-width: 38rem; }
.contact-form button { margin-top: .7em; }
.error { color: #9b2020; }
footer { display: flex; justify-content: space-between; gap: 1em; margin: 3em 0 1.4em; padding-top: 1.3em; border-top: 3px double #d5d9e5; font-size: .65em; color: #8b91a0; }
footer strong { color: #606a89; font-size: 1.1em; }
.footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em 1.3em; font: .85em/1.5 Verdana, sans-serif; }
footer p { margin-top: .4em; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: .5rem; top: .5rem; padding: .5em; background: #fff; z-index: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1020px) {
  #page { margin: 0; border-left: 0; border-right: 0; padding: 0 1.6rem; box-shadow: none; }
  .notebook-layout { grid-template-columns: minmax(0, 1fr) 12rem; gap: 1.6rem; }
  .notebook-sidebar { padding-left: 1rem; }
  .site-strip { font-size: .58em; }
}
@media (max-width: 700px) {
  body { font-size: 18px; }
  #page { padding: 0 1rem; }
  .site-strip { font-size: .5em; }
  .site-strip > span { max-width: 16em; }
  .site-strip a { white-space: nowrap; }
  #header { align-items: flex-start; flex-direction: column; gap: 1em; margin: 1.2rem 0 1.5rem; padding-bottom: 1.2rem; }
  .title { font-size: 2em; }
  .notebook-layout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .notebook-sidebar { border-left: 0; border-top: 3px double #d5d9e5; padding: 1.6rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .sidebar-section { margin-bottom: .4rem; }
  .article-layout .notebook-sidebar { display: block; }
  .byte-note { align-self: start; padding: .8rem; }
  .byte-note table { font-size: .61em; }
  .welcome h1 { font-size: 1.9em; }
  .featured-note { padding: 1rem; }
  #header nav { gap: .5rem; }
  #header nav a { font-size: .75rem; padding: .45em .75em; }
  h1 { font-size: 1.6em; }
  .posts li { grid-template-columns: 5.6rem minmax(0,1fr); gap: .5rem; margin: 0; padding: .75rem 0; }
  .postdate { font-size: .58em; padding-top: .2em; }
  .postlink { padding: 0; }
  pre { font-size: .75em; }
  .search-row { flex-wrap: wrap; }
  .search-row input { flex: 1 1 14rem; }
  footer { flex-direction: column; }
  .article-layout .post h1 { font-size: 1.65em; }
}
@media print {
  body { font-size: 12pt; }
  #header nav, footer, .post-end, .related, .skip, .notebook-sidebar, .site-strip { display: none; }
  .notebook-layout { display: block; }
  .post { max-width: none; }
  pre { white-space: pre-wrap; background: #f0f0f0; color: #111; }
}

/* Topic paths and clearly attributed historical references. */
.topic-paths { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.8rem; }
.topic-paths a { font: .7em/1.5 Verdana, sans-serif; padding: .6em .9em; border: 1px solid #d8deeb; background: #f8f9fc; }
.topic-paths span { padding-left: .8em; color: #959db5; }
.welcome h1 { font-size: 1.65em; max-width: 20em; }
.historical-record .archive-note { background: #f5f5fa; border-color: #777fa9; }
.archive-note p { margin-top: 0; }
.reading-list { padding-left: 1.4em; }
.reading-list li { padding: 0 0 1em .4em; border-bottom: 1px dotted #d5dae4; }
.reading-list h3 { font-size: 1em; line-height: 1.4; margin-bottom: .4em; }
.reading-list p { font-size: .88em; margin-top: .4em; }