:root {
  --blue-5: hsla(210deg, 100%, 5%);
  --blue-10: hsla(210deg, 100%, 10%);
  --blue-15: hsla(210deg, 100%, 15%);
  --blue-20: hsla(210deg, 100%, 20%);
  --blue-50: hsla(210deg, 100%, 50%);
  --blue-60: hsla(210deg, 100%, 60%);
  --blue-70: hsla(210deg, 100%, 70%);
  --blue-80: hsla(210deg, 100%, 80%);
  --blue-85: hsla(210deg, 100%, 85%);
  --blue-90: hsla(210deg, 100%, 90%);
  --blue-95: hsla(210deg, 100%, 95%);
  --color-bg: var(--blue-10);
  --color-text: var(--blue-90);
  /* overlay = goes over the background. should be less light/dark than bg. */
  --color-bg-overlay: var(--blue-20);
  /* underlay = goes under the background. should be darker than bg. */
  --color-bg-underlay: var(--blue-5);
  --color-text-faded: hsla(210deg, 100%, 90%, 35%);
  --color-text-highlight: hsla(60deg, 100%, 50%);
  --color-link: hsla(210deg, 100%, 50%);
  --color-link-visited: hsla(270deg, 50%, 70%);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: var(--blue-95);
    --color-text: var(--blue-10);
    --color-bg-overlay: var(--blue-90);
    --color-bg-underlay: var(--blue-20);
    --color-text-faded: hsla(210deg, 80%, 15%, 70%);
    --color-text-highlight: hsla(222deg, 75%, 50%);
    --color-link: hsla(210deg, 100%, 30%);
    --color-link-visited: hsla(270deg, 50%, 50%);
  }
}
html {
  background: var(--color-bg);
  color: var(--color-text);
}

:link {
  color: var(--color-link);
}

:visited {
  color: var(--color-link-visited);
}

/* define base measures and typescale */
:root {
  line-height: 1.65;
  --font-scale: 1.125;
  --font-size-h1: calc(1rem * pow(var(--font-scale), 6));
  --font-size-h2: calc(1rem * pow(var(--font-scale), 5));
  --font-size-h3: calc(1rem * pow(var(--font-scale), 4));
  --font-size-h4: calc(1rem * pow(var(--font-scale), 3));
  --font-size-h5: calc(1rem * pow(var(--font-scale), 2));
  --font-size-h6: calc(1rem * pow(var(--font-scale), 1));
  --font-size-small: calc(1rem * pow(var(--font-scale), -1));
  font-family: sans-serif;
}

/* apply calculated font sizes */
h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

small {
  font-size: var(--font-size-small);
}

/* tighten up heading spacing */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.15;
  letter-spacing: -0.022em;
}

/* give smaller text more room to breathe */
small {
  line-height: 1.8;
}

/* separation between implicit sections */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 4rem;
  margin-block-end: 1rem;
}

/* "content" elements vertical gaps */
p,
figure,
table,
blockquote,
hr,
form,
ol,
ul,
dl,
pre {
  margin-block: 1lh;
}

/* control the scroll margin with a variable */
[id] {
  scroll-margin-block-start: var(--scroll-margin-block-start, 0rem);
}

/* some things should be highlighted */
dt[id] {
  --scroll-margin-block-start: 0rem;
}
dt[id]:target {
  color: var(--color-text-highlight);
}

/* other things should be outlined */
figure[id] {
  --scroll-margin-block-start: 1rem;
}
figure[id]:target {
  outline: 0.25rem dashed var(--color-text-highlight);
  outline-offset: 0.5rem;
}

/* sections are stylized and include linked headings */
section[id] {
  --scroll-margin-block-start: 2rem;
  position: relative;
  scroll-margin-block-start: var(--scroll-margin-block-start);
  /* prepend the fragment id */
}
section[id]::before {
  content: "#" attr(id);
  position: absolute;
  inset-block-start: calc(-1lh - 0.25rem);
  inset-inline-start: 0;
  color: var(--color-text-faded);
  font-weight: 900;
  font-size: 0.75rem;
}
section[id] {
  /* highlight the prepended frag-id */
}
section[id]:target::before {
  color: var(--color-text-highlight);
}

:link {
  transition: all 250ms ease-in;
}

:link:hover {
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.125em;
  text-decoration-skip-ink: none;
}

@media (prefers-reduced-motion) {
  :link {
    transition: none;
  }
}
.table-of-contents {
  font-size: 0.889rem;
}
.table-of-contents ol {
  list-style: none;
  margin-block: 0;
}
.table-of-contents li {
  margin-block: 1em;
}
.table-of-contents #TableOfContents-label {
  font-weight: 900;
  font-variant: small-caps;
}
.table-of-contents .headings {
  padding-inline-start: 1em;
}

[data-pullquote]::before {
  content: attr(data-pullquote);
  display: block;
  margin-block: 1lh;
  color: var(--color-text);
  padding-block: 1em;
  padding-inline: 1em;
  text-align: right;
  padding-inline-end: 0;
  font-size: 1.2em;
  line-height: 1.2;
  letter-spacing: 0.14em;
  padding-left: 7%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='hsla(210deg, 50%, 20%)' d='M18.07 10.07c-.42 0-.83.07-1.22.17c.09-.3.17-.61.32-.88c.11-.31.29-.58.47-.84c.15-.29.41-.49.6-.74c.2-.24.47-.4.69-.6c.21-.21.49-.32.71-.46c.23-.13.43-.28.65-.35c.21-.09.39-.16.54-.22c.3-.12.47-.2.47-.2l-.48-1.94s-.22.05-.6.14c-.19.05-.42.1-.69.17c-.27.05-.56.19-.88.31c-.32.14-.69.24-1.03.47c-.34.22-.74.4-1.09.69c-.34.3-.75.56-1.05.94c-.33.36-.66.73-.91 1.16c-.29.41-.49.86-.7 1.3c-.19.44-.34.9-.47 1.34c-.24.88-.34 1.72-.38 2.44c-.03.72-.01 1.32.03 1.75c.02.2.04.4.06.54l.03.17c.2 2.56 2.31 4.58 4.93 4.58c2.74 0 4.96-2.22 4.96-4.96s-2.22-4.96-4.96-4.96Zm-11.98 0c-.42 0-.83.07-1.22.17c.09-.3.17-.61.32-.88c.11-.31.29-.58.47-.84c.15-.29.41-.49.6-.74c.2-.24.47-.4.69-.6c.21-.21.49-.32.71-.46c.23-.13.43-.28.65-.35c.21-.09.39-.16.54-.22c.3-.12.47-.2.47-.2l-.48-1.94s-.22.05-.6.14c-.19.05-.42.1-.69.17c-.27.05-.56.19-.88.31c-.32.14-.69.24-1.03.47c-.34.22-.74.4-1.09.69c-.34.3-.75.56-1.05.94c-.33.36-.66.73-.91 1.16c-.29.41-.49.86-.7 1.3c-.19.44-.34.9-.47 1.34c-.24.88-.34 1.72-.38 2.44c-.03.72-.01 1.32.03 1.75c.02.2.04.4.06.54l.03.17c.2 2.56 2.31 4.58 4.93 4.58c2.74 0 4.96-2.22 4.96-4.96s-2.22-4.96-4.96-4.96Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0;
}

body {
  counter-reset: h2 figure table;
}

h2 {
  counter-reset: h3;
}

h3 {
  counter-reset: h4;
}

h4 {
  counter-reset: h5;
}

h5 {
  counter-reset: h6;
}

*[autonumbering] h2::before {
  counter-increment: h2;
  content: counter(h2) " ";
}
*[autonumbering] h3::before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) " ";
}
*[autonumbering] h4::before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4) " ";
}
*[autonumbering] h5::before {
  counter-increment: h5;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
}
*[autonumbering] h6::before {
  counter-increment: h6;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " ";
}
*[autonumbering] :is(h2, h3, h4, h5, h6)::before {
  margin-inline-end: 1rem;
  display: inline-block;
  width: 3rem;
  font-variant-numeric: tabular-nums;
}
*[autonumbering] .table-of-contents .headings ol {
  padding-inline-start: 0;
}
*[autonumbering] .table-of-contents li {
  display: flex;
  gap: 1rem;
}
*[autonumbering] .table-of-contents {
  counter-reset: d2;
}
*[autonumbering] .table-of-contents li[data-depth="2"] {
  counter-reset: d3;
}
*[autonumbering] .table-of-contents li[data-depth="2"]::before {
  counter-increment: d2;
  content: counter(d2) " ";
}
*[autonumbering] .table-of-contents li[data-depth="3"] {
  counter-reset: d4;
}
*[autonumbering] .table-of-contents li[data-depth="3"]::before {
  counter-increment: d3;
  content: counter(d2) "." counter(d3) " ";
}
*[autonumbering] .table-of-contents li[data-depth="4"] {
  counter-reset: d5;
}
*[autonumbering] .table-of-contents li[data-depth="4"]::before {
  counter-increment: d4;
  content: counter(d2) "." counter(d3) "." counter(d4) " ";
}
*[autonumbering] .table-of-contents li[data-depth="5"] {
  counter-reset: d6;
}
*[autonumbering] .table-of-contents li[data-depth="5"]::before {
  counter-increment: d5;
  content: counter(d2) "." counter(d3) "." counter(d4) "." counter(d5) " ";
}
*[autonumbering] .table-of-contents li[data-depth="6"]::before {
  counter-increment: d6;
  content: counter(d2) "." counter(d3) "." counter(d4) "." counter(d5) "." counter(d6) " ";
}
*[autonumbering] .table-of-contents li[data-depth]::before {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
*[autonumbering] caption {
  counter-increment: table;
}
*[autonumbering] caption::before {
  content: "Table " counter(table) ": ";
}
*[autonumbering] figcaption {
  counter-increment: figure;
}
*[autonumbering] figcaption::before {
  content: "Figure " counter(figure) ": ";
}

.site-header {
  background: var(--color-bg-underlay);
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}

.site-masthead {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  text-decoration: none;
  color: inherit;
  padding-block: 0;
}

.site-icon {
  height: 3rem;
  width: 3rem;
  margin-inline-end: 1.5rem;
  border-radius: 100rem;
}

.bubble-left {
  grid-column: 2;
  place-self: end start;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: relative;
  background-color: var(--color-bg);
  line-height: 1.5;
  margin-block-start: 0.5rem;
}
.bubble-left::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0.125rem;
  left: -0.75rem;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 1rem solid var(--color-bg);
}

.site-footer {
  background-color: var(--color-bg-underlay);
}

blockquote {
  margin-inline: 0;
  padding-inline: 1em;
  border-inline-start: 0.25rem solid var(--color-text);
}

dl ul {
  padding-inline-start: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin-inline-start: 1em;
}

ol, ul, dl, menu {
  max-inline-size: 100%;
}

ol, ul, menu {
  padding-inline-start: 1em;
}

:is(ol, ul, dl) :is(ol, ul, dl) {
  margin-block: 0;
  margin-inline-start: 0.25em;
}

img, video, audio, object {
  max-inline-size: 100%;
  display: block;
  margin-block: 1lh;
}

p {
  overflow-wrap: break-word;
}

p img {
  display: inline;
  margin-block: unset;
}

figure {
  background: hsl(210, 100%, 15%);
  margin-inline: 0;
}

figure figcaption {
  padding: 1rem;
  background: hsl(210, 100%, 5%);
}

figure img,
figure video,
figure audio {
  display: block;
  width: 100%;
  margin-block: 0;
}

figure blockquote {
  padding-block: 1lh;
}

figure blockquote p:first-child {
  margin-block-start: 0;
}

figure blockquote, figure blockquote p {
  margin-block-end: 0;
}

hr {
  color: var(--color-text-faded);
  max-inline-size: 40%;
  margin-inline: auto;
  border: none;
  height: 1lh;
  position: relative;
}
hr::before {
  content: "∗ ∗ ∗";
  display: grid;
  place-items: center;
  color: var(--color-text);
  background: var(--color-bg);
  inline-size: max-content;
  margin-inline: auto;
  padding-inline: 1rem;
}
hr::after {
  --height: 0.125rem;
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: var(--height);
  inset-block-start: 0.5lh;
  inset-inline-start: 0;
  background: var(--color-text-faded);
  z-index: -1;
}

.footnotes hr {
  max-inline-size: 100%;
}
.footnotes hr::before {
  content: "Footnotes";
  margin-inline: unset;
  font-variant: small-caps;
  font-weight: bolder;
  padding-inline-start: 0;
}
.footnotes hr::after {
  inline-size: 100%;
}

ins {
  background: green;
}

del {
  background: red;
}

mark {
  background: yellow;
  color: black;
}

kbd:not(:has(kbd)) {
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-bg-underlay);
  border-inline-width: 0.25em;
  border-block-end-width: 0.5em;
  border-radius: 0.25em;
  padding-inline: 0.5em;
  padding-block: 0.25em;
}

samp {
  background: black;
  color: green;
}

b {
  font-weight: normal;
  font-size: 1.5em;
}

i {
  font-family: serif;
}

u[title] {
  text-decoration-style: wavy;
  text-decoration-thickness: 0.125em;
  text-decoration-color: red;
  text-underline-offset: 0.25em;
}

s {
  text-decoration-color: red;
  text-decoration-thickness: 0.25em;
  text-decoration-style: solid;
}

time {
  display: inline-grid;
  grid-template-columns: 1em 1fr;
  place-items: center;
  gap: 0.25em;
  background: var(--color-bg-overlay);
  padding-inline: 0.5em;
  border-radius: 100rem;
  font-size: var(--font-size-small);
  box-sizing: border-box;
  transform: translateY(0.125em);
}
time::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.44.44A1.5 1.5 0 0 1 5.5 0h3A1.5 1.5 0 0 1 10 1.5v1.344A5.12 5.12 0 0 1 12.125 7A5.12 5.12 0 0 1 10 11.156V12.5A1.5 1.5 0 0 1 8.5 14h-3A1.5 1.5 0 0 1 4 12.5v-1.344A5.12 5.12 0 0 1 1.875 7A5.12 5.12 0 0 1 4 2.844V1.5c0-.398.158-.78.44-1.06M7 4.25c.345 0 .625.28.625.625v1.866l1.067 1.067a.625.625 0 1 1-.884.884l-1.25-1.25A.63.63 0 0 1 6.375 7V4.875c0-.345.28-.625.625-.625M3.125 7a3.875 3.875 0 1 1 7.75 0a3.875 3.875 0 0 1-7.75 0' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-color: currentColor;
  mask-image: var(--svg);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

ruby {
  ruby-position: under;
}

small {
  color: var(--color-text-faded);
}

pre {
  max-inline-size: 100%;
  overflow-inline: scroll;
  padding-inline: 1em;
  padding-block: 0.5em;
}

pre:has(code) {
  background: var(--color-bg-underlay);
  color: var(--color-text);
}

pre code {
  display: contents;
}

pre:has(samp) {
  background: black;
  color: #00ff00;
}
pre:has(samp) samp {
  color: inherit;
}
pre:has(samp) kbd {
  background: unset;
  padding: unset;
}

table {
  display: block;
  max-inline-size: 100%;
  overflow-inline: scroll;
}

:root {
  --inline-start-space: 1rem;
  --inline-end-space: 1rem;
  --block-start-space: 4rem;
}

/* === utility classes === */
/* semantic elements shouldn't affect the presentation */
.hidden {
  display: none;
}

.wrapper {
  display: contents;
}

.inline {
  display: inline;
}

/* === resets and common alignment === */
body {
  margin: 0;
}

main,
.site-header,
.site-footer {
  padding-inline-start: var(--inline-start-space);
  padding-inline-end: var(--inline-end-space);
}

/* add more whitespace when the viewport has enough space */
@media (min-width: 22.5rem) {
  :root {
    --inline-start-space: 2rem;
    --inline-end-space: 2rem;
  }
}
@media (min-width: 25rem) {
  :root {
    --inline-start-space: 4rem;
  }
}
/* === headings === */
h1 a,
h2 a {
  text-decoration: none;
}

h2 {
  background: var(--color-bg-overlay);
  padding-block: 1rem;
  padding-inline-end: 1rem;
  padding-inline-start: var(--inline-start-space);
  margin-inline-start: calc(-1 * var(--inline-start-space));
}

h3 {
  max-width: 80%;
}

h3, h3 a {
  text-decoration-style: solid;
  text-decoration-color: var(--color-bg-overlay);
  text-decoration-line: underline;
  text-decoration-thickness: 0.25em;
  text-decoration-skip-ink: none;
  text-underline-offset: 0em;
  transition: all 250ms ease-in;
}

h3 a:hover {
  text-underline-offset: 0.25em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit !important;
}

/* === home.html === */
main.home {
  max-width: 80ch;
}

/* === page.html, article.html === */
main.page, main.article {
  max-inline-size: 80ch;
}

.frontmatter .description {
  font-style: italic;
}
.frontmatter .authors {
  font-style: normal;
}
.frontmatter .authors a {
  color: inherit;
  text-decoration: none;
}
.frontmatter .authors .h-card {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  place-items: center;
}
.frontmatter .authors .u-logo, .frontmatter .authors .u-photo {
  margin-block: 0;
  border-radius: 100rem;
}
.frontmatter .authors .p-name {
  font-weight: bold;
  place-self: center start;
}
.frontmatter .date {
  margin-block-end: 0;
}
.frontmatter .metrics {
  margin-block: 0;
}
.frontmatter .syndication-hint {
  margin-block-end: 0;
}
.frontmatter .syndication-list {
  margin-block-start: 0;
}
.frontmatter .inReplyTo-hint {
  margin-block-end: 0;
}
.frontmatter .inReplyTo {
  margin-block-start: 0;
}
.frontmatter {
  border-block-end: 0.25rem dotted var(--color-text-faded);
  margin-bottom: 4rem;
}

/* table of contents can go into a sidebar when there's enough space */
@media (min-width: 60rem) {
  :is(main.article, main.page):has(.table-of-contents) {
    --sidebar-inline-size: 20rem;
    position: relative;
    max-inline-size: 80ch;
    padding-inline-end: calc(var(--sidebar-inline-size) + var(--inline-start-space));
    /* sticky elements need a container with known height */
  }
  :is(main.article, main.page):has(.table-of-contents) .table-of-contents-wrapper {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    block-size: 100%; /* match content height */
  }
  :is(main.article, main.page):has(.table-of-contents) .table-of-contents {
    inline-size: var(--sidebar-inline-size);
    /* stick to the top */
    position: sticky;
    inset-block-start: 2rem;
    overflow-block: scroll;
    padding-inline-end: var(--inline-end-space);
    block-size: 80dvh;
    overflow-block: scroll;
    padding-block-start: 0.4em;
  }
}
/* === authors/term.html === */
main.profile {
  --inline-start-space: 1rem;
  --inline-end-space: 1rem;
  padding: 0;
  --border-light: 0.125rem solid var(--color-bg-overlay);
  --border-solid: 0.125rem solid var(--color-text);
  border-inline: var(--border-light);
  margin: 0 auto;
  box-sizing: border-box;
}
main.profile h1 {
  font-size: 1.2rem;
  margin-block: 0;
  padding-inline: 1rem;
  padding-block: 1.5rem;
  border-block-start: var(--border-light);
  text-align: center;
}
main.profile h2 {
  margin-block: 0;
  margin-inline-start: 0;
  padding-inline-start: var(--inline-start-space);
}
main.profile .profile-header .u-logo,
main.profile .profile-header .u-photo,
main.profile .profile-header .p-name,
main.profile .profile-header .p-note,
main.profile .profile-header .fields {
  margin-inline-start: var(--inline-start-space);
  margin-inline-end: var(--inline-end-space);
}

.profile-header {
  position: relative;
  padding-bottom: 2rem;
}
.profile-header .banner {
  width: 100%;
  height: 10rem;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center center;
  border-block: var(--border-light);
}
.profile-header .u-logo, .profile-header .u-photo {
  background: var(--color-bg);
  border-radius: 1rem;
  width: 6rem;
  height: 6rem;
  margin-top: -3rem;
  border: var(--border-solid);
}
.profile-header .p-name {
  margin-block-start: 0.3rem;
  margin-block-end: 0;
  font-size: 1.2rem;
  font-weight: bold;
}
.profile-header .u-uid {
  font-family: monospace;
  color: inherit;
  display: block;
  font-size: 0.889rem;
  margin-inline-start: 1rem;
}

.profile-posts .h-card {
  margin-block-start: 0;
  margin-block-end: 0.5lh;
  line-height: 2rem;
}
.profile-posts .h-card .u-logo, .profile-posts .h-card .u-photo {
  border-radius: 100rem;
  width: 2rem;
  height: 2rem;
  transform: translateY(0.5rem);
  margin-inline-end: 0.5rem;
}
.profile-posts .h-entry {
  padding: 1em;
  border-block: var(--border-light);
}
.profile-posts .p-name {
  font-weight: bold;
}
.profile-posts .e-summary {
  margin-block: 0.5lh;
}
.profile-posts .u-url {
  margin-block: 0;
}

/*# sourceMappingURL=screen.css.map */