@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans+Condensed:wght@400;700&family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400&display=swap');

body {
  font-family: "IBM Plex Serif", serif;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  color: #111;
  background-color: hsl(300, 20%, 98%);
}

main {
  flex: 3;
  font-size: 14pt;
  padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
  min-width: calc(320px - 4rem);
  max-width: calc(900px - 4rem);
}

aside {
  flex: 1;
  padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
  font-size: 12pt;
  line-height: 1.4;
  color: #444;
  min-width: calc(320px - 4rem);
  max-width: calc(500px - 4rem);
  position: sticky;
  top: 0;
  height: calc(100vh - 128px);
}

@media (width < 575px) {
  aside {
    height: fit-content;
    position: static;
  }
  body.post, body.page, body.search {
    aside {
      order: 2;
    }
    main {
      order: 1;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin-block: 0;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  color: var(--primary-color);
}
hgroup h2 span {
  font-weight: 400;
}
main h1 {
  margin-block: 0 1rem;
}
main article.page h1 {
  margin-block: 0;
}
main h2 {
  margin-block: 2rem 1rem;
}
aside hgroup a {
  text-wrap: nowrap;
}
p {
  margin-block: 0 1rem;
  text-wrap: pretty;
}

p.lead {
  font-size: 16pt;
}
aside a {
  text-decoration: none;
}

a {
  color: hsl(300, 20%, 35%);
  text-underline-offset: 2px;
  text-decoration-color: hsl(300, 20%, 35%);
  text-decoration-thickness: 1px;
}
a:hover {
  color: hsl(300, 20%, 60%);
  text-decoration-color: hsl(300, 20%, 60%);
}
code {
  font-family: "IBM Plex Mono", monospace;
  background-color: #EEE;
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.9em;
}

.tags > a {
  display: inline-block;
  background-color: #EEF;
  color: #006;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  margin: 0.1rem;
  border-radius: 0.3rem;
  font-size: 0.9rem;
}

.tags > a:hover {
  background-color: #006;
  color: #EEF;
}
aside h2 {
  font-size: 44pt;
  margin-block-end: 0.5rem;
  line-height: 1;
}
aside .site-description {
  font-family: "IBM Plex Serif", sans-serif;
  text-transform: uppercase;
  font-size: 14pt;
  letter-spacing: 0.03ch;
  line-height: 1;
  margin-top: 8px;
}
aside nav {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin-block: 1rem;
  font-size: 18pt;
}
aside nav a {
  text-wrap: nowrap;
}
aside nav.small {
  font-size: 13pt;
}
article.page nav {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin-block: 0 0.5rem;
}
article.page nav a {
  text-decoration: none;
  text-wrap: nowrap;
}

.ref-pagination {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin-block: 0.5rem;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  font-size: 13pt;
}
.ref-pagination > * {
  flex: 1;
}
.ref-pagination .next {
  text-align: right;
}
.ref-pagination a {
  display: flex;
  gap: 0.5rem;
  text-decoration: none;
}

.post-list {
  margin-block: 2rem;
}
.homepage.post-list {
  margin-block-start: 0.5rem;
}
.post {
  margin-block-end: 2rem;
}
.post-excerpt {
  font-size: 14pt;
  margin-block: 1rem;
}
.post-content, .page-content {
  margin-block: 2rem;
}
.post-content > p:first-of-type {
  font-size: 18pt;
}
.post-metadata {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 14pt;
  color: #888;
  font-weight: 400;
}
.post-list .post-metadata {
  font-size: 14pt;
}
.post-meta2 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.post-more {
  font-family: "IBM Plex Sans Condensed", sans-serif;
}
.svg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: hsl(300, 20%, 50%);
  padding-right: 5px;
  vertical-align: text-top;
}

table.table1, table.table2 {
  margin-inline: auto;
  max-width: fit-content;
  display: block;
  margin-block: 1rem;
  overflow-x: auto;
}
table.table1 td {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 0.9em;
  background: #F0F0F0;
  padding: 0.4rem 0.6rem;
  vertical-align: top;
}
table.table1 td code {
  font-size: 1em;
}
table.table2 td {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 1em;
  padding: 0.5rem 4rem;
  text-align: center;
}
table.table2 tr:nth-child(4n+1) td {
  background: hsl(200, 30%, 80%);
}
table.table2 tr:nth-child(4n+2) td {
  background: hsl(200, 30%, 85%);
}
table.table2 tr:nth-child(4n+3) td {
  background: hsl(200, 30%, 90%);
}
table.table2 tr:nth-child(4n+4) td {
  background: hsl(200, 30%, 95%);
}

table.table3 td {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 0.9em;
  background: #F0F0F0;
  white-space: nowrap;
}
table.table3 th {
  font-size: 1em;
  text-align: left;
}
table.table3 thead th.rotate {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 0.9em;
  transform: rotate(-90deg) translate(-70px, 0);
  height: 200px;
  font-weight: normal;
}
table.table3 tbody th {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  padding: 0 1rem;
  line-height: 25px;
  height: 25px;
  white-space: nowrap;
  font-weight: normal;
  min-width: calc(760px - 25px * 12);
}
table.table3 tbody th.volume {
  font-weight: bold;
}
table.table3 tbody th.chapter {
  font-size: 0.9em;
}
table.table3 thead th.rotate div {
  width: 25px;
  text-align: left;
  white-space: nowrap;
}
table.table4 {
  border-collapse: collapse;
}
table.table4 td, table.table4 th {
  padding: 0rem 0.6rem;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 0.9em;
  white-space: nowrap;
  text-align: center;
}

code.N {
  border: 1px solid hsl(0, 75%, 60%); 
  background-color: hsl(0, 75%, 80%);
}
span.N {
  background-color: hsl(0, 75%, 95%);
  border-bottom: 3px solid hsl(0, 75%, 60%); 
}
rect.N {
  fill: hsl(0, 75%, 70%);
}
code.O {
  border: 1px solid hsl(45, 75%, 60%); 
  background-color: hsl(45, 75%, 80%);
}
span.O {
  background-color: hsl(45, 75%, 95%);
  border-bottom: 3px solid hsl(45, 75%, 60%); 
}
rect.O {
  fill: hsl(45, 75%, 70%);
}
code.P {
  border: 1px solid hsl(90, 75%, 60%); 
  background-color: hsl(90, 75%, 80%);
}
span.P {
  background-color: hsl(90, 75%, 95%);
  border-bottom: 3px solid hsl(90, 75%, 60%); 
}
rect.P {
  fill: hsl(90, 75%, 70%);
}
code.Q {
  border: 1px solid hsl(135, 75%, 60%); 
  background-color: hsl(135, 75%, 80%);
}
span.Q {
  background-color: hsl(135, 75%, 95%);
  border-bottom: 3px solid hsl(135, 75%, 60%); 
}
rect.Q {
  fill: hsl(135, 75%, 70%);
}
code.R {
  border: 1px solid hsl(180, 75%, 60%); 
  background-color: hsl(180, 75%, 80%);
}
span.R {
  background-color: hsl(180, 75%, 95%);
  border-bottom: 3px solid hsl(180, 75%, 60%); 
}
rect.R {
  fill: hsl(180, 75%, 70%);
}
code.S {
  border: 1px solid hsl(225, 75%, 60%); 
  background-color: hsl(225, 75%, 80%);
}
span.S {
  background-color: hsl(225, 75%, 95%);
  border-bottom: 3px solid hsl(225, 75%, 60%); 
}
rect.S {
  fill: hsl(225, 75%, 70%);
}
code.T {
  border: 1px solid hsl(270, 75%, 60%); 
  background-color: hsl(270, 75%, 80%);
}
span.T {
  background-color: hsl(270, 75%, 95%);
  border-bottom: 3px solid hsl(270, 75%, 60%); 
}
rect.T {
  fill: hsl(270, 75%, 70%);
}
code.U {
  border: 1px solid hsl(315, 75%, 60%); 
  background-color: hsl(315, 75%, 80%);
}
span.U {
  background-color: hsl(315, 75%, 95%);
  border-bottom: 3px solid hsl(315, 75%, 60%); 
}
rect.U {
  fill: hsl(315, 75%, 70%);
}
rect.X {
  fill: hsl(0, 0%, 80%);
}

a[href^='http']::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -5 28 22' width='20' height='20' %3E%3Cpath d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='gray' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-left: 0.15em;
}

.dim-types:has(div.focus-N:hover) span:not(.N),
.dim-types:has(div.focus-O:hover) span:not(.O),
.dim-types:has(div.focus-P:hover) span:not(.P),
.dim-types:has(div.focus-Q:hover) span:not(.Q),
.dim-types:has(div.focus-R:hover) span:not(.R),
.dim-types:has(div.focus-S:hover) span:not(.S),
.dim-types:has(div.focus-T:hover) span:not(.T),
.dim-types:has(div.focus-U:hover) span:not(.U),
.dim-types:has(div.focus-N:hover) div:not(.focus-N),
.dim-types:has(div.focus-O:hover) div:not(.focus-O),
.dim-types:has(div.focus-P:hover) div:not(.focus-P),
.dim-types:has(div.focus-Q:hover) div:not(.focus-Q),
.dim-types:has(div.focus-R:hover) div:not(.focus-R),
.dim-types:has(div.focus-S:hover) div:not(.focus-S),
.dim-types:has(div.focus-T:hover) div:not(.focus-T),
.dim-types:has(div.focus-U:hover) div:not(.focus-U),
.dim-types:has(span.N:hover) span:not(.N),
.dim-types:has(span.O:hover) span:not(.O),
.dim-types:has(span.P:hover) span:not(.P),
.dim-types:has(span.Q:hover) span:not(.Q),
.dim-types:has(span.R:hover) span:not(.R),
.dim-types:has(span.S:hover) span:not(.S),
.dim-types:has(span.T:hover) span:not(.T),
.dim-types:has(span.U:hover) span:not(.U),
.dim-types:has(span.N:hover) div:not(.focus-N),
.dim-types:has(span.O:hover) div:not(.focus-O),
.dim-types:has(span.P:hover) div:not(.focus-P),
.dim-types:has(span.Q:hover) div:not(.focus-Q),
.dim-types:has(span.R:hover) div:not(.focus-R),
.dim-types:has(span.S:hover) div:not(.focus-S),
.dim-types:has(span.T:hover) div:not(.focus-T),
.dim-types:has(span.U:hover) div:not(.focus-U) {
  opacity: 0.3;
}
.dim-types * {
  transition: opacity 0.3s ease;
}

div.focus-N:hover,
div.focus-O:hover,
div.focus-P:hover,
div.focus-Q:hover,
div.focus-R:hover,
div.focus-S:hover,
div.focus-T:hover,
div.focus-U:hover,
.dim-types span.N:hover,
.dim-types span.O:hover,
.dim-types span.P:hover,
.dim-types span.Q:hover,
.dim-types span.R:hover,
.dim-types span.S:hover,
.dim-types span.T:hover,
.dim-types span.U:hover {
  cursor: pointer;
}

.dim-rect tr:hover {
  cursor: pointer;
}
.dim-rect rect {
  transition: fill 0.3s ease;
}
.dim-rect td {
  transition: opacity 0.3s ease;
}
.dim-rect:has(tr.focus-N:hover) rect:not(.N),
.dim-rect:has(tr.focus-O:hover) rect:not(.O),
.dim-rect:has(tr.focus-P:hover) rect:not(.P),
.dim-rect:has(tr.focus-Q:hover) rect:not(.Q),
.dim-rect:has(tr.focus-R:hover) rect:not(.R),
.dim-rect:has(tr.focus-S:hover) rect:not(.S),
.dim-rect:has(tr.focus-T:hover) rect:not(.T),
.dim-rect:has(tr.focus-U:hover) rect:not(.U),
.dim-rect:has(tr.focus-X:hover) rect:not(.X),
.dim-rect:has(rect.N:hover) rect:not(.N),
.dim-rect:has(rect.O:hover) rect:not(.O),
.dim-rect:has(rect.P:hover) rect:not(.P),
.dim-rect:has(rect.Q:hover) rect:not(.Q),
.dim-rect:has(rect.R:hover) rect:not(.R),
.dim-rect:has(rect.S:hover) rect:not(.S),
.dim-rect:has(rect.T:hover) rect:not(.T),
.dim-rect:has(rect.U:hover) rect:not(.U),
.dim-rect:has(rect.X:hover) rect:not(.X) {
  fill: #EEE;
}
.dim-rect:has(tr.focus-N:hover) tr:not(.focus-N) td,
.dim-rect:has(tr.focus-O:hover) tr:not(.focus-O) td,
.dim-rect:has(tr.focus-P:hover) tr:not(.focus-P) td,
.dim-rect:has(tr.focus-Q:hover) tr:not(.focus-Q) td,
.dim-rect:has(tr.focus-R:hover) tr:not(.focus-R) td,
.dim-rect:has(tr.focus-S:hover) tr:not(.focus-S) td,
.dim-rect:has(tr.focus-T:hover) tr:not(.focus-T) td,
.dim-rect:has(tr.focus-U:hover) tr:not(.focus-U) td,
.dim-rect:has(tr.focus-X:hover) tr:not(.focus-X) td,
.dim-rect:has(rect.N:hover) tr:not(.focus-N) td,
.dim-rect:has(rect.O:hover) tr:not(.focus-O) td,
.dim-rect:has(rect.P:hover) tr:not(.focus-P) td,
.dim-rect:has(rect.Q:hover) tr:not(.focus-Q) td,
.dim-rect:has(rect.R:hover) tr:not(.focus-R) td,
.dim-rect:has(rect.S:hover) tr:not(.focus-S) td,
.dim-rect:has(rect.T:hover) tr:not(.focus-T) td,
.dim-rect:has(rect.U:hover) tr:not(.focus-U) td,
.dim-rect:has(rect.X:hover) tr:not(.focus-X) td {
  opacity: 0.3
}

.get-started-box {
  background: #EEE;
  margin-block: 0.5em;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  display: flex;
}
.get-started-box > div {
  padding: 0.5em;
}
.get-started-box .ordinal {
  background: hsl(300, 20%, 50%);
  color: hsl(300, 20%, 98%);
  font-size: 1.8em;
  line-height: 0;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.get-started-box h3 {
  font-size: 1.2em;
}
.get-started-box p {
  font-size: 0.9em;
  margin-block: 0;
}

ul {
  margin-top: 0;
}
.email, .feed {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin: 0;
}

.table3 td.done {
  background-color: hsl(120, 40%, 30%);
  min-width: 25px;
  width: 25px;
  height: 25px;
}
.table3 td.inprogress {
  background-color: hsl(60, 80%, 40%);
  min-width: 25px;
  width: 25px;
  height: 25px;
}
.table3 td.upcoming {
  background-color: hsl(0, 0%, 80%);
  min-width: 25px;
  width: 25px;
  height: 25px;
}
.table3 td.todo {
  min-width: 25px;
  width: 25px;
  height: 25px;
}
.table3 td.na {
  background-color: inherit;
  min-width: 25px;
  width: 25px;
  height: 25px;
}
.table3.legend {
  margin-bottom: 1rem;
}
.table3.legend td.label {
  background-color: transparent;
  padding: 0 1rem 0 0.2rem;
}

ul.updates li p {
  margin: 0;
}

.timeline {
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.9em;
  line-height: 1.1;
}
.timeline.timeline-primary {
  grid-template-columns: 1fr 4px 4fr;
  font-size: 1em;
}
.timeline .left, .timeline .right {
  margin: 0 20px 15px 20px;
  text-wrap: balance;
}
.timeline .left {
  text-align: right;
}
.timeline .middle {
  position: relative;
  background: hsl(90, 60%, 40%);
}
.timeline.timeline-primary .middle {
  background: hsl(180, 60%, 40%);
}
.timeline .middle.fade {
  /* gradient */
  background: linear-gradient(to bottom, hsla(90, 60%, 40%, 1) 0%, hsla(90, 60%, 40%, 0) 100%);
}
.timeline .middle div {
  position :absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
}
.timeline .middle div.dot {
  background: hsl(300, 20%, 98%);
  border: 4px solid hsl(90, 60%, 40%);
  border-radius: 50%;
}
.timeline.timeline-primary .middle div.dot {
  border: 4px solid hsl(180, 60%, 40%);
}
.timeline .middle div.dot.tale {
  background: hsl(90, 60%, 40%);
  border: 4px solid hsl(90, 60%, 40%);
}
.timeline .middle.break {
  height: 24px;
  background: hsl(300, 20%, 98%);
}
.timeline .left.chapter {
  font-size: 1.2em;
  line-height: 1.1;
  font-weight: bold;
  text-transform: uppercase;
}
.timeline .right.tale {
  font-size: 1.2em;
  line-height: 1;
  font-weight: bold;
}

.source-links blockquote {
  margin: 2rem 0;
  font-size: 0.9em;
  padding: 0 0.5em;
  text-align: right;
}
.source-links blockquote p {
  text-align: left;
  margin: 0;
  text-indent: 1.5em;
}
.source-links blockquote p:first-child {
  text-indent: 0;
}

.source-links.O blockquote {
  border-left: 4px solid hsl(45, 75%, 60%);
}
.source-links.R blockquote {
  border-left: 4px solid hsl(180, 75%, 60%);
}
.source-links.Q blockquote {
  border-left: 4px solid hsl(135, 75%, 60%);
}
.source-links.U blockquote {
  border-left: 4px solid hsl(315, 75%, 60%);
}

tr:has(th.chapter) {
  display: none;
}
main:has(#show-chapters:checked) tr:has(th.chapter) {
  display: table-row;
}

.cite-entries {
  display: grid;
  grid-template-columns: 100px 165px 1fr;
}
.cite-entries .page {
  font-size: 0.8em;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  line-height: calc(1.3 / 0.8);
}
.cite-entries .para_ref {
  padding: 0 10px;
  margin: 0 10px;
  white-space: nowrap;
  font-size: 0.8em;
  font-family: 'IBM Plex Mono', monospace;
  line-height: calc(1.3 / 0.8);
}
.cite-entries .para_ref:target {
  background-color: hsl(90, 75%, 80%);
}
.cite-entries .prefix {
  font-size: 0.9em;
  line-height: 1.3;
}
.muted {
  color: #999;
}