html {
  font-size: 16px;
  background: white;
  font-family: "PT Sans", sans-serif;
  line-height: 1.5;
  font-size-adjust: ex-height 0.53;
  box-sizing: border-box;
}
* + * {
  margin-top: 1em;
}
a {
  color: brown;
}
a:visited {
  color: black;
}
main#container {
  align-content: center;
  > * {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5em;
  }
}
p code {
  line-height: 1;
}
a.∞ {
  text-decoration: none;
  @media (min-width: 720px) {
    float: left;
    margin-left: -2rem;
  }
}
article {
  margin-top: 3em;
  width: fit-contents;
  & + article {
    margin-top: 5em;
  }
  > * {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: calc(35 * 16px);
  }
  > div {
    margin-top: 0;
    & > *:first-child {
      margin-top: 0;
    }
  }
  > header {
    filter: opacity(50%);
    max-width: calc(35 * 16px);
    font-size: 80%;
    margin-bottom: 0.2rem;
    font-family: "PT Mono", monospace;
    border-top: 1px solid grey;
    border-bottom: 1px solid lightgrey;
    & time.dt-published {
      font-size: 70%;
    }
    > a.u-url {
      font-weight: bold;
    }
    > h2 {
      display: inline;
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
    }
    > span.p-category {
      border-radius: 0.3em;
      font-weight: 900;
      font-variant: small-caps;
      background-color: orange;
      padding: 0 0.5em 0.05em 0.5em;
    }
  }
  &.bigpost {
    & > .p-summary {
      font-size: 1.5rem;
    }
    & > header {
      border-top: 1px solid lightgrey;
      filter: none;
      font-family: inherit;
      border-bottom: 0;
      & > * {
        margin: 0;
      }
      & > time {
        font-family: monospace;
        font-size: 0.7rem;
        filter: opacity(50%);
      }
      & > h2 {
        display: block;
        font-size: 2.5rem;
        margin: 0;
        line-height: 1;
      }
    }
  }
}
#masthead {
  margin-top: -1rem;
  max-width: calc(35 * 16px);
  font-size: 2rem;
  line-height: 1;
  position: static; /* needs to be a positioned elem for children */
  font-style: italic;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  & * {
    margin: 0;
  }
  & a:visited {
    color: brown;
  }
  & a {
    color: brown;
    display: block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    & > span {
      display: inline-block;
      vertical-align: baseline;
      height: 1.5em;
      & > i {
        display: inline-block;
        vertical-align: baseline;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-name: marquee-content;
        animation-timing-function: linear;
      }
      &.ooooo-right {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        background: white;
        overflow: visible;
        padding-left: 0.05em;
      }
      &.ooooo-left {
        padding-right: 0.05em;
        position: absolute;
        overflow: visible;
        z-index: 1;
        left: 0;
        top: 0;
        background: white;
      }
    }
  }
}
@keyframes marquee-content {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(
      -2%
    ); /* needs to be in % so that an int of letters is shifted; 50 o in content */
  }
}
*:lang(ru) > cite {
  /* use Russian styling for <cite> elements in Russian text, even if the <cite> itself has different lang */
  font-style: normal;
  &::before {
    content: open-quote;
  }
  &::after {
    content: close-quote;
  }
}
hr {
  width: 70%;
  border-color: rgb(240 240 240 / 0.4);
}
.side {
  max-width: 240px;
  padding: 0;
  @media (min-width: calc(69 * 16px)) {
    max-width: calc(15 * 16px);
    float: right;
    margin-right: calc(-17 * 16px);
  }
  @media (min-width: calc(57 * 16px)) and (max-width: calc(69 * 16px)) {
    max-width: calc(10 * 16px);
    float: right;
    margin-right: calc(-12 * 16px);
  }
  @media (min-width: calc(45 * 16px)) and (max-width: calc(57 * 16px)) {
    max-width: calc(10 * 16px);
    float: right;
    margin-right: calc(-5 * 16px);
  }
}
img {
  max-width: 100%;
  max-height: 90svh;
  width: auto;
  height: auto;
}
blockquote {
  margin-left: 2em;
  margin-right: 0;
  margin-bottom: 0;
  & > p {
    margin-bottom: 0;
  }
  & > p.quote-source {
    margin-left: 5em;
    margin-top: 0;
    font-style: italic;
    & > cite {
      font-style: inherit;
    }
    &::before {
      content: "— ";
      margin-left: -2em;
    }
  }
}
br {
  margin: 0;
}
.nobr {
  white-space: nowrap;
}