.sidenote-column {
  position: absolute;
  top: 0;
  left: calc(100% + var(--sidenote-gap));
  width: var(--sidenote-width, var(--sidenote-max-width));
  height: 100%;
}
html:not(.sidenotes-on) .sidenote-column { display: none; }
html.sidenotes-on .footnotes { display: none; }

.sidenote {
  position: absolute;
  left: 0;
  width: 100%;
  padding-top: 0.15em;
  border-top: var(--rule-width) solid var(--rule);
  font-size: var(--sidenote-size);
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
  hyphens: auto;
  transition: color 0.15s;
}
.sidenote p { margin: 0 0 0.4em; text-indent: 0; text-align: left; }
.sidenote p:last-child { margin-bottom: 0; }
.sidenote a { color: var(--text-muted); }
.sidenote-number {
  margin-right: 0.35em;
  font-variant-numeric: lining-nums;
  font-weight: 600;
  color: var(--accent);
}
.sidenote.is-highlighted,
.sidenote:hover { color: var(--text); }
.sidenote.is-highlighted { border-top-color: var(--accent); }
.footnote-ref.is-highlighted sup { background: var(--accent-soft); }

.marginnote {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--text-muted);
}
.marginnote::before { content: "["; font-style: normal; }
.marginnote::after { content: "]"; font-style: normal; }

@media (min-width: 1280px) {
  .marginnote {
    float: left;
    clear: left;
    width: var(--marginnote-width);
    margin-left: calc(-1 * (var(--marginnote-width) + var(--sidenote-gap)));
    text-align: right;
    text-indent: 0;
    line-height: 1.35;
    font-size: var(--sidenote-size);
  }
  .marginnote::before, .marginnote::after { content: none; }
}