@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400&display=swap');

@font-face {
   font-family: 'Otto-Mono'; 
   font-style: normal; 
   font-weight: 400; 
   src: url(https://fonts.clig.dev/iAWriterMonoS-Regular.woff2) format('woff2');
}
@font-face {
   font-family: 'Otto-Mono'; 
   font-style: normal; 
   font-weight: 600; 
   src: url(https://fonts.clig.dev/iAWriterMonoS-Bold.woff2) format('woff2');
}

* {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   letter-spacing: inherit;
   vertical-align: baseline;
    
   margin: 0;
   padding: 0;
    
   color: inherit;
   text-decoration: none;
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
}

html {
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 1vw;
   -webkit-font-smoothing: antialiased;
   text-align: left;
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Playfair Display', serif;
   font-weight: 300;
}

main h2 {
   font-size: 1.4em;
}

main h3 {
   font-size: 1.4em;
}

main h1 a.back-home {
   display: block;
   margin-bottom: 0.3em;
   font-size: 3rem;
   letter-spacing: normal;
   color: inherit;
   opacity: 0.5;
   text-decoration: none !important;
}

main h1 a.back-home:hover {
   opacity: 0.7;
}

#TableOfContents {
   font-family: 'Playfair Display', serif;
}

body {
   font-size: 3.8rem;
   line-height: 1.4;
}
@media (min-width: 600px) {
   body {
      font-size: 3.5rem;
   }
}
@media (min-width: 750px) {
   body {
      font-size: 2.5rem;
   }
}
@media (max-width: 750px) and (orientation: landscape) {
   body {
      font-size: 2.4rem;
   }
}
@media (min-width: 751px) and (max-width: 999px) and (orientation: landscape) {
   body {
      font-size: 2.1rem;
   }
}
@media (min-width: 1000px) {
   body {
      font-size: 1.6rem;
   }
}
@media (min-width: 1200px) {
   body {
      font-size: 17px;
   }
}
@media (min-width: 1600px) {
   body {
      font-size: 20px;
   }
}

@media (min-width: 901px) {
   body {
      display: grid;
      grid-template-columns: 25% 75%;
      grid-gap: 0;
   }
   #TableOfContents {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      box-sizing: border-box;
      margin-top: 100vh;
   }
   #TableOfContents > ul {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: calc(1.7em *0.5) 0;
      height: 100vh;
      box-sizing: border-box;
      overflow: auto;
   }
   main {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      box-sizing: border-box;
   }
}

@media (min-width: 901px) and (min-height: 800px) {
   #TableOfContents > ul {
      padding-top: calc(1.7em * 1.5);
   }
}

#TableOfContents {
   text-align: left;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 100;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}

/* Don't show authors in table of contents */
#TableOfContents a[href='#authors'] {
   display: none !important;
}

/* Fix ToC vertical alignment from authors link being hidden */
#TableOfContents > ul > li:nth-child(2) {
   padding-top: 0;
}

#menu-button {
   display: none;
}

#theme-toggle {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 300;
   padding: calc(1.7em * 0.5) 1.7em;
   border: none;
   background: none;
   color: inherit;
   font-family: inherit;
   font-size: 0.85rem;
   text-decoration: underline;
   opacity: 0.5;
   cursor: pointer;
}

#theme-toggle:hover,
#theme-toggle:focus {
   opacity: 1;
}

@media (max-width: 900px) {
   /* Sits above the full-width "Contents" bar on mobile instead of
      overlapping it. */
   #theme-toggle {
      top: 2.5em;
   }
}

@media (max-width: 900px) {
   .menu-open {
      overflow: hidden;
   }
   #menu-button {
      display: inline-block;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      text-align: right;
      padding: calc(1.7em *0.5) 1.7em;
      z-index: 200;
      border: none;
      background: none;
      cursor: pointer;
   }
   .menu-open #menu-button {
      display: none;
   }
   #TableOfContents {
      display: none;
      position: fixed;
      overflow: scroll;
      padding: calc(1.7em *0.5) 0 1.7em;
   }
   .menu-open #TableOfContents {
      display: block;
   }
}

#TableOfContents ul {
   list-style: none;
}

@media (min-width: 901px) {
   #TableOfContents > ul {
      max-width: 18em;
      margin: 0 auto;
   }
   #TableOfContents ul ul {
      letter-spacing: 0.025em;
   }
}

#TableOfContents > ul > li {
   padding: 0 1.7em;
}

#TableOfContents ul li + li {
   padding-top: calc(1.7em *0.25);
}

#TableOfContents ul ul {
   padding-top: 0.5em;
   padding-left: 1.7em;
   font-size: 75%;
}

#TableOfContents ul ul li {
   margin-top: 0;
   border-top: none;
   padding-top: 0;
}

#TableOfContents li.toc-header {
   position: sticky;
   top: 0;
   z-index: 10;
   padding-top: calc(1.7em * 0.5) !important;
   padding-bottom: calc(1.7em * 0.5);
   margin-bottom: calc(1.7em * 0.25);
   background: rgba(255, 255, 255, 1);
   border-bottom: 1px solid rgba(126, 126, 126, 0.3);
}

@media (prefers-color-scheme: dark) {
   #TableOfContents li.toc-header {
      background: rgba(0, 0, 0, 1);
   }
}

:root[data-theme="dark"] #TableOfContents li.toc-header {
   background: rgba(0, 0, 0, 1);
}

:root[data-theme="light"] #TableOfContents li.toc-header {
   background: rgba(255, 255, 255, 1);
}

#TableOfContents li.toc-header .back-home {
   display: block;
   font-size: 0.85em;
   margin-bottom: 0.5em;
}

#TableOfContents li.toc-header .toc-page-title {
   font-family: 'Playfair Display', serif;
   font-size: 1.6em;
   opacity: 0.9;
}

#TableOfContents a {
   display: inline-block;
   opacity: 0.5;
   transition: opacity 0.3s ease;
}

#TableOfContents a:hover,
#TableOfContents a:focus {
   opacity: 1;
   text-decoration: underline;
}

#TableOfContents .active > a {
   opacity: 1;
}

@media (max-width: 900px) {
   #TableOfContents a {
      font-size: 200%;
      opacity: 1;
   }
}

main {
   padding: 0 1.7em;
}

@media (min-width: 901px) {
   /* main spans both grid columns, so the table of contents overlays the
      first 25%. Everything in the intro section clears it except the hero
      h1 and its subtitle paragraph, which are centred over the full width
      and reset padding-left through their own shorthand below. */
   main > section:first-child > * {
      padding-left: 25%;
   }
}

main > section:first-child > h1 {
   position: relative;
   height: 75vh;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
   padding: 0.5em 0 0;
   text-align: center;
   font-size: 15.5vw;
   left: -0.025em;
   line-height: 1;
   letter-spacing: -0.02em;
   max-width: 6em;
}
@media (max-width: 750px) and (orientation: landscape) {
   main > section:first-child > h1 {
      font-size: 10vw;
   }
}
@media (min-width: 750px) {
   main > section:first-child > h1 {
      font-size: 16.5vw;
   }
}
@media (min-width: 120vh) {
   main > section:first-child > h1 {
      font-size: 19vh;
   }
}
@media (min-width: 120vh) {
   main > section:first-child > h1 {
      font-size: 20vh;
      max-width: 6em;
      margin: 0 auto;
   }
}

main > section:first-child > h1 + p {
   position: relative;
   height: 25vh;
   display: table-cell;
   vertical-align: middle;
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0 0 1.7em;
   text-align: center;
   max-width: 30.5em;
   left: 50vw;
   transform: translate(-57%, 0);
}

main > section:first-child > h1 + p a {
   display: inline;
}

.github-button {
   margin: 1.7em auto;
}


/* Headings scroll away with their prose. They used to pin to the top of the
   viewport, which meant every h2 and h3 latched and released as you went —
   the offset moved smoothly but the page looked like it was jumping. What is
   left is ordinary vertical rhythm: space above a heading to separate it from
   the section before, little below it, so it reads as attached to the text it
   introduces. */
h2, h3 {
   margin: calc(1.7em * 1.5) 0 0;
   padding: 0 7em 0 0;
}

h3 {
   white-space: nowrap;
}

h4, h5, h6 {
   padding: calc(1.7em *0.5) 0;
}

h1 a.permalink {
   display: none;
}

a.permalink::before {
   content: "#";
}

a.permalink {
   font-weight: 400;
   text-decoration: none;
   margin-left: 1em;
   opacity: 0.5;
}

@media (max-width: 900px) {
   a.permalink {
      display: none;
   }
}

a.permalink:hover,
a.permalink:focus {
   opacity: 1;
   text-decoration: none;
}

a.permalink:hover::after,
a.permalink:focus::after {
   content: " permalink ";
   font-size: 60%;
   text-transform: uppercase;
   vertical-align: middle;
}

main p,
main ol,
main ul,
main table {
   margin: 1.7em 0;
   font-weight: 400;
}

main th {
   font-weight: 600;
}

main table a {
   font-weight: 600;
}

main ol li, 
main ul li {
   padding-left: 2.2em;
}

main ul li {
   list-style: none;
}

main ul li:before {
   content: " ";
   position: relative;
   float: left;
   margin-left: -1.7em;
   top: 0.4em;
   width: 0.6em;
   height: 0.6em;
   border-radius: 50%;
}

main ol {
   counter-reset: ordered-list;
}

main ol > li {
   list-style: none;
   counter-increment: ordered-list;
}

main ol > li:before {
   content: counter(ordered-list)". ";
   float: left;
   min-width: 2.2em;
   margin-left: -2.2em;
}

main a {
   text-decoration: underline;
}

main strong {
   font-weight: 600;
}

h2+p, h3+p {
   margin-top: calc(1.7em *0.5);
}

code {
   font-family: 'Otto-Mono';
   padding: 0 0.25em;
}

pre {
   display: block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   margin: 2rem auto;
   padding: 2.5em 2px 2px;
   font-size: 14px;
   line-height: 1.8;
   color: white;
   border-radius: 7px;
   border: 1px solid;
}

pre code {
   display: block;
   overflow-x: auto;
   padding: 3em 3rem;
   border-radius: 1px 1px 5px 5px;
   font-weight: 400;
}

pre code strong {
   font-weight: 600;
}

@media (min-width: 750px) {
   #otto-compositor section p,
   #otto-compositor section ol,
   #otto-compositor section ul,
   #otto-compositor section pre,
   #otto-compositor section iframe {
      margin-left: auto;
      margin-right: auto;
      max-width: 78rem;
      position: relative;
      left: 3%;
   }
}

@media (min-width: 900px) {
   #otto-compositor section p,
   #otto-compositor section ol,
   #otto-compositor section ul,
   #otto-compositor section pre,
   #otto-compositor section iframe {
      max-width: 58rem;
      left: 0;
   }
}


#otto-compositor section iframe {
   display: block;
   margin: 0 auto!important;
   width: 100%!important;
}


body {
   color: rgba(0,0,0,1);
   background: rgba(255,255,255,1);
}
#TableOfContents {
   background: rgba(255,255,255,0.6);
}
main ul li:before {
   background: rgba(0,0,0,1);
}
code {
   background: rgba(126,126,126, 0.25);
}
pre {
   border-color: rgb(0,0,0);
}
pre code {
   color: rgb(255,255,255);
   background: rgb(0,0,0);
}
@media (prefers-color-scheme: dark) {
   body {
      color: rgba(230,230,230,1);
      background: rgba(0,0,0,1);
   }
   #TableOfContents {
      background: rgba(0,0,0,0.6);
   }
   main ul li:before {
      background: rgba(230,230,230,1);
   }
   code {
      background: rgba(126,126,126, 0.4);
   }
   pre {
      border-color: rgba(126,126,126, 0.4);
   }
   pre code {
      background: rgba(126,126,126, 0.4);
   }
}

/* Manual override via the theme-toggle button (persisted to
   localStorage as "otto-theme"), applied via [data-theme] on <html>.
   Wins over prefers-color-scheme regardless of which way the system
   preference points, since it's gated on an attribute rather than a
   media query. */
:root[data-theme="dark"] body {
   color: rgba(230,230,230,1);
   background: rgba(0,0,0,1);
}
:root[data-theme="dark"] #TableOfContents {
   background: rgba(0,0,0,0.6);
}
:root[data-theme="dark"] main ul li:before {
   background: rgba(230,230,230,1);
}
:root[data-theme="dark"] code {
   background: rgba(126,126,126, 0.4);
}
:root[data-theme="dark"] pre {
   border-color: rgba(126,126,126, 0.4);
}
:root[data-theme="dark"] pre code {
   background: rgba(126,126,126, 0.4);
}

:root[data-theme="light"] body {
   color: rgba(0,0,0,1);
   background: rgba(255,255,255,1);
}
:root[data-theme="light"] #TableOfContents {
   background: rgba(255,255,255,0.6);
}
:root[data-theme="light"] main ul li:before {
   background: rgba(0,0,0,1);
}
:root[data-theme="light"] code {
   background: rgba(126,126,126, 0.25);
}
:root[data-theme="light"] pre {
   border-color: rgb(0,0,0);
}
:root[data-theme="light"] pre code {
   background: rgb(0,0,0);
}

a:focus, button:focus {
   color: rgb(255,255,255);
   background: rgb(31, 76, 255);
   outline: none;
   text-decoration: underline;
}