@charset "UTF-8";

section#helicopter-story {
  counter-reset: sidenote; }

.sidenote, .marginnote {
  font-weight: initial;
  font-style: initial;
  font-size: initial;
  font-size: calc(5 / 6 * 1rem);
  text-align: initial;
  position: relative;
  display: none;

  padding: 1ch;
  border: 2px solid var(--olive-drab);
  background: white;
}

input[type="checkbox"].margin-toggle {
  display: none; }

.sidenote-number::before, .sidenote-label::before {
  counter-increment: sidenote;
  content: counter(sidenote); }

#toc .sidenote-number::before, #toc .sidenote-label::before {
  counter-increment: none;
  content: ""; }

.margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote, .note-toggle:checked + .sidenote, .note-toggle:checked + .marginnote {
  display: block;
  color: #444;
  width: calc(100% - 2rem);
  float: left;
  clear: both;
  margin-block: 0.3rem;
  margin-inline: 1rem;
  border-width: 0;
  background: transparent;
}

.sidenote::before, .marginnote::before {
  position: absolute;
  right: calc(100% + 10px); }

.sidenote::before {
  content: counter(sidenote); }

.sidenote blockquote {
	margin-inline: 0;
	padding-left: 1ch;
	border-left: 2px solid #ccc;
}

.marginnote-number:nth-of-type(1)::before, .marginnote:nth-of-type(1)::before {
  content: "*"; }

.marginnote-number:nth-of-type(2)::before, .marginnote:nth-of-type(2)::before {
  content: "†"; }

.marginnote-number:nth-of-type(3)::before, .marginnote:nth-of-type(3)::before {
  content: "‡"; }

.marginnote.nonumber::before {
  content: ''; }

.sidenote-number {
	font-size: smaller;
	vertical-align: super;
        font-variant-numeric: proportional-nums;
	margin-left: -0.3ch;
	margin-right: 0.3ch;
}

@supports (font-variant-position: super) {
	.sidenote-number {
	  font-size: unset;
	  vertical-align: unset;
	  font-variant-position: super;
	}
}

.sidenote :first-child {
	margin-top: 0;
}

.sidenote :last-child {
	margin-bottom: 0;
}

.marginnote-number:nth-of-type(2)::before,
.marginnote-number:nth-of-type(3)::before {
  vertical-align: super;
  font-size: smaller;
  line-height: 1; }



@media (min-width: 1494px) {
  .sidenote.right
  {
    display: block;
    float: right;
    clear: right;
    width: 280px;
    margin-right: -370px;
    margin-block-start: 0;
    margin-block-end: 0.3rem; } }

  .sidenote.left
  {
    display: block;
    float: left;
    clear: left;
    width: 280px;
    margin-left: -340px;
    margin-block-start: 0;
    margin-block-end: 0.3rem; }
}