@charset "UTF-8";
/*
 * cthor.me
 */
@font-face {
   font-family: Century Supra;
   font-display: fallback;
   src: url('/_fonts/century_supra_a_regular.woff2') format('woff2');
}

@font-face {
   font-family: Century Supra;
   font-display: fallback;
   font-style: italic;
   font-weight: normal;
   src: url('/_fonts/century_supra_a_italic.woff2') format('woff2');
}

@font-face {
   font-family: Century Supra;
   font-display: fallback;
   font-style: normal;
   font-weight: bold;
   src: url('/_fonts/century_supra_a_bold.woff2') format('woff2');
}

@font-face {
   font-family: Century Supra Caps;
   font-display: fallback;
   font-style: normal;
   font-weight: normal;
   src: url('/_fonts/century_supra_a_caps_regular.woff2') format('woff2');
}

:root {
   --serif: Century Supra, serif;
   --smcaps: Century Supra Caps, Century Supra, serif;
   --mono: ui-monospace, Source Code Pro, Consolas, Menlo, Liberation Mono, Courier New, monospace;

   --fg: #111;
   --bg: #fff;

   /* ctrl+f for media queries when changing these */
   --container-width: 48rem;
   --sidebar-width: 18rem;

   --z-sidebar: 1;
   --z-sidebar-expand: 2;
   --z-siderbar-shade: 3;
}

@layer base {
   html {
      background-color: var(--bg-lavender);
      font-family: var(--serif);
      overflow-y: scroll;
      -webkit-text-size-adjust: 100%;
         -moz-text-size-adjust: 100%;
              text-size-adjust: 100%;

      line-height: 1.2;

      font-size: 20px;
      font-size: clamp(18px, 2vw, 22px);
      scroll-behavior: smooth;
   }

   * {
      box-sizing: border-box;
      scroll-margin-top: 1em;
   }

   ::selection {
      background: #dbfaff;
      text-shadow: none;
   }

   ::-moz-selection {
      background: #dbfaff;
      text-shadow: none;
   }
}

@layer content {
   a {
      color: inherit;
      text-decoration: none;
      transition:
         background-color 0.2s,
         border-color 0.2s;

      &:visited {
         color: inherit;
      }
   }

   :where(a:not(.logo)):hover {
      background-color: #f8eaea;
   }

   a:not([href^="//"]):where([href^="/"], [href^="#"], [href=""]) {
      font-family: var(--smcaps);
   }

   a[href^="//"],
   a:not([href^="/"], [href^="#"], [href=""]) {
      &::after {
         content: "°";
         color: #933;
      }
   }

   sup {
      font-size: 0.7em;
      vertical-align: baseline;
      position: relative;
      top: -0.5em;
      line-height: 0;
   }

   h1, h2 {
      font-weight: normal;
   }

   h1 {
      font-size: 2em;
      margin-bottom: 0.2rem;
      margin-top: 3rem;
   }

   h2 {
      font-size: 1.4em;
      margin-bottom: 0.2rem;
      margin-top: 2.4rem;
   }

   h3, h4, h5, h6 {
      font-size: 1.1em;
      margin-bottom: 0;
      margin-top: 1.3rem;
   }

   h2 .h-anchor::before { content: "§ "; }
   h3 .h-anchor::before { content: "§ "; }
   h4 .h-anchor::before { content: "§§ "; }
   h5 .h-anchor::before { content: "§§§ "; }
   h6 .h-anchor::before { content: "§§§§ "; }

   a.h-anchor {
      /* color: oklch(35% 100% 65); */
      display: block;
      font-family: var(--serif);
      transition: background-color 0.2s;

      &:hover {
         background-color: color-mix(in lch, var(--fg) 5%, var(--bg));
      }
   }

   dt:not(:first-child) {
      margin-top: 1em;
   }

   dt {
      font-weight: bold;
   }

   dd {
      margin-left: 1.25em;
   }

   ol, ul {
      padding-left: 1.5em;
   }

   math[display="block"] {
      font-size: 1.2em;
   }

   code,
   .code-block {
      font-size: calc(1em - 4px);
      font-family: var(--mono);
   }

   code {
      background-color: color-mix(in lch, var(--fg) 5%, var(--bg)) !important;
      border-radius: 4px;
      display: inline-block;
      padding: 2px 4px;
   }

   .code-block pre {
      --border-color: color-mix(in lch, var(--fg) 12%, var(--bg));
      border-bottom: 1px solid var(--border-color);
      border-top: 1px solid var(--border-color);
      border-left: 0.75em solid var(--border-color);
      display: block;
      margin-top: 0;
      padding: 0.5em 0.5em 0.3em 0.5em;
      overflow-x: auto;
      overflow-y: hidden;
   }

   .code-block.error pre {
      border-left-color: lch(from var(--border-color) l calc(c + 10) 45);
   }

   .code-collapse,
   .code-download,
   .code-filename,
   .code-select {
      padding: 0.2rem 0.5rem 0.1rem;
      display: inline-block;
   }

   .code-filename {
      font-family: var(--serif);
      font-weight: bold;
      padding-left: 1rem;
      padding-right: 0.75rem;
   }

   .details-expand,
   .sidebar-pin,
   .code-collapse,
   .code-download,
   .code-footer,
   .code-select {
      appearance: none;
      background: none;
      border: none;
      color: color-mix(in lch, var(--fg) 80%, var(--bg));
      cursor: pointer;
      font-family: var(--smcaps);
      font-size: 1em;
      text-align: center;

      &:hover {
         background-color: lch(95% 0% 0);
      }
   }

   .code-footer {
      padding: 0.2rem 1rem;
   }

   .code-collapse::before {
      content: "Collapse";
   }

   .code-download::before {
      content: "Download";
   }

   .code-select::before {
      content: "Select all";
   }

   .code-footer::before {
      content: "Expand (" attr(lines) " lines)";
   }

   :where(body:not(.no-js)) {
      .code-block.long pre {
         max-height: 20ex;
         overflow-y: auto;
         overflow-x: clip;
      }
   }

   .code-block:not([aria-expanded="true"]) {
      .code-collapse {
         display: none;
      }
   }

   .code-block[aria-expanded="true"] {
      &.long pre {
         max-height: none;
         overflow: auto;
      }

      .code-footer::before {
         content: "Collapse";
      }
   }

   :where(body.no-js) {
      .code-collapse,
      .code-download,
      .code-footer,
      .code-select {
         display: none;
      }
   }

   .details-expand.p + .details {
      border-left: 1px solid color-mix(in lch, var(--fg) 80%, var(--bg));
      margin-left: 0.4em;
      margin-top: 0.2em;
      padding: 0.2em 0 0.2em 0.5em
   }

   :where(.details, .details-list > li:not([aria-expanded="true"]) > :where(ul, ol, p:not(:first-child), .p, div)) {
      display: none;
   }

   .details-expand::before {
      content: '[Details]';
   }

   .details-expand[aria-expanded="true"] {
      &::before {
         content: '[Collapse]';
      }

      & + * {
         display: revert;
      }
   }

   :where(body.no-js) :where(.details, .details-list > li > :where(ul, ol, p:not(:first-child), .p, div)) {
      display: revert;
   }

   table {
      border-spacing: 0px;
      border-collapse: collapse;
      display: block;
      overflow-x: auto;

      th {
         border-bottom: 2px solid currentColor;
      }

      :where(td, th) {
         padding: 0.1em 0.3em;
      }

      :where(td, th):not(:first-child) {
         border-left: 1px solid color-mix(in oklch, var(--fg) 50%, var(--bg));
      }

      & tr:not(:first-child) :where(td, th) {
         border-top: 1px solid color-mix(in oklch, var(--fg) 50%, var(--bg));
      }
   }

   p img {
      display: block;
      max-width: 100%;
   }

   figure {
      & img {
         display: block;
         max-width: 100%;
      }

      &.center,
      &.wide {
         & div {
            overflow-x: auto;
         }

         & img {
            height: 100%;
            width: auto;
            margin: 0 auto;
            max-width: none;
         }
      }
   }

   :where(figure) {
      margin: unset;
   }

   figcaption {
      color: color-mix(in oklch, var(--fg) 80%, var(--bg));
      font-size: 0.8em;
      font-style: italic;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0.5em;
   }

   video {
      display: block;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
   }

   :where(p, .p, ol, ul, dl, pre, form, blockquote, table, figure, video, .code-block, .cols-grid, .epigraph) {
      margin-top: 0;
      margin-bottom: 0;
   }

   :not(:where(h1, h2, h3, h4, h5, h6)) +
   :where(p, .p, ol, ul, dl, pre, form, blockquote, table, figure, video, .code-block, .cols-grid, .epigraph) {
      margin-top: 1em;
   }

   /* exeptions for tight lists */
   :where(li > p) + :where(ul, ol),
   :where(.details-list .details-expand + *) {
      margin-top: 0;
   }

   hr {
      border: none;
      color: color-mix(in oklch, var(--fg) 70%, var(--bg));
      font-size: 2em;
      position: relative;
      height: 1px;
      margin: 3em 0;
      overflow: visible;

      &::before {
         content: "§";
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
      }
   }

   section[role="doc-endnotes"] {
      & > ol {
         counter-reset: footnote;
         list-style-type: none;
         margin-top: 4rem;
         padding-left: 3rem;

         & > li + li {
            margin-top: 1em;
         }

         & > li {
            counter-increment: footnote;
            position: relative;
         }

         & > li::before {
            content: counter(footnote) ".";
            position: absolute;
            right: calc(100% + 1.25em);
            top: 0;
         }
      }

      & a[role="doc-backlink"] {
         position: absolute;
         right: calc(100% + 0.25em);
         top: 0;
         user-select: none;
      }
   }
}

@layer layout {
   body {
      background-color: var(--bg);
      padding: 0.5em 0;
      margin: 0;
      color: var(--fg);
   }

   :where(
      main > *,
      header,
      .document.loose > *,
      .container,
   ) {
      display: block;
      max-width: var(--container-width);
      width: 100%;
      margin-left: auto;
      margin-right: auto;
   }

   main > *,
   header,
   .container {
      padding: 0 0.5rem;
   }

   .document.loose,
   .wide {
      max-width: unset;
   }

   main > script,
   main > style {
      display: none;
   }

   .xl { max-width: calc(var(--container-width) + 3rem); }
   .xxl { max-width: calc(var(--container-width) + 6rem); }
   .xxxl { max-width: calc(var(--container-width) + 9rem); }
   .xxxxl { max-width: calc(var(--container-width) + 12rem); }
   .xxxxxl { max-width: calc(var(--container-width) + 15rem); }

   header {
      margin: 0.5em auto 1em auto;
      display: grid;
      grid-template-columns: 2.5em 1fr;
      grid-template-rows: auto auto;
      grid-template-areas: "logo title" "logo metadata";
      grid-gap: 0.3em 0;

      .logo {
         grid-area: logo;
         height: 2.5em;
         width: 2.5em;

         & img {
            display: block;
            height: 100%;
            width: 100%;
         }
      }
   }

   footer {
      padding: 0;
      height: 100vh;

      .logo {
         display: block;
         margin: 0 auto;
         width: 7em;
         height: 7em;
         position: relative;
         top: 25%;
         transform: translateY(-50%);
         filter: blur(2px) opacity(7%);

         & img {
            height: auto;
            width: 100%;
         }
      }
   }

   .sidebar {
      background: var(--bg);
      border-right: 2px solid currentColor;
      display: flex;
      flex-flow: column nowrap;
      height: 100vh;
      left: 0;
      max-width: calc(100vw - 1.5em);
      overflow-y: scroll;
      position: fixed;
      scrollbar-width: none;
      top: 0;
      transition: transform 0.2s ease-in-out;
      transform: translateX(-100%);
      width: var(--sidebar-width);
      z-index: var(--z-sidebar);

      &::-webkit-scrollbar {
         display: none;
      }
   }

   .sidebar-expand {
      background-color: var(--bg);
      box-shadow: 0 0 0.2em color-mix(in oklch, var(--fg) 50%, var(--bg));
      cursor: pointer;
      display: block;
      position: fixed;
      transition: transform 0.2s ease-in-out;
      user-select: none;
      z-index: var(--z-sidebar-expand);

      & svg {
         display: block;
         width: auto;
         height: 2em;
      }
   }

   .sidebar-expand {
      /**
       * Intentionally separate from above group.
       * Properties that are changed by breakpoint.
       **/
      border-radius: 1em 0 0 0;
      padding: 0.4em 0.4em 0.2em 0.4em;
      bottom: 0;
      right: 0;
   }

   .sidebar-shade {
      position: fixed;
      z-index: var(--z-sidebar-shade);
      left: 0;
      top: 0;
      height: 100vh;
      width: 100vw;
      background-color: var(--fg);
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.5s, visibility 0.5s;
   }

   .sidebar-expanded {
      .sidebar {
         transform: translateX(0);
      }

      .sidebar-shade {
         opacity: 0.2;
         visibility: visible;
      }

      .sidebar-expand {
         transform: translateY(120%);
      }
   }

   .sidebar-pin {
      color: color-mix(in oklch, var(--fg) 50%, var(--bg) 50%);
      display: none;
      font-size: 0.9em;
      padding: 0.2em 0.5em;
      text-align: start;

      &::before {
         content: "Pin";
      }
   }

   .sidebar-pinned {
      .sidebar-pin::before {
         content: "Unpin";
      }
   }

   @media (width > 1496px /* container-width + sidebar-width + 2em */) {
      .sidebar-pin {
         display: inline-block;
      }

      .sidebar-pinned.has-sidebar {
         padding-left: var(--sidebar-width);

         .sidebar {
            transform: translateX(0);
         }

         .sidebar-expand {
            display: none;
         }

         .sidebar-shade {
            display: none;
         }
      }

      .sidebar-expand {
         border-radius: 0 0 1em 1em;
         padding: 0.2em 0.4em 0.4em 0.4em;
         bottom: initial;
         left: calc((100vw - var(--container-width)) / 2 - 6em);
         right: initial;
         top: 0;
      }

      .sidebar-expanded .sidebar-expand {
         transform: translateY(-120%);
      }
   }

   .toc {
      list-style-type: none;
      flex-grow: 1;
      font-size: 0.9em;
      padding: 1em 1.5em 1em 0.75em;

      a {
         font-family: var(--serif);
      }

      .toc-0 a {
         font-family: var(--smcaps);
      }

      & li + li {
         margin-top: 0.2em;
      }

      :where(li) {
         display: flex;
         flex-flow: row nowrap;

         &::before {
            background-color: transparent;
            content: '';
            height: 2px;
            margin-left: -1em;
            margin-right: 4px;
            margin-top: 1.2ex;
            min-width: 1.5em;
            transition: background-color 0.2s;
         }

         &.current::before {
            background-color: lch(70% 70% 280);
         }
      }

      .toc-0::before { min-width: 1em; }
      .toc-1::before { min-width: 2em; }
      .toc-2::before { min-width: 3em; }
      .toc-3::before { min-width: 4em; }
      .toc-4::before { min-width: 5em; }
      .toc-5::before { min-width: 6em; }
      .toc-6::before { min-width: 7em; }
   }

   .title {
      border-bottom: none;
      grid-area: title;
      font-family: inherit;
      font-size: 2.2em;
      line-height: 1;
      margin: 0;
      padding: 0 0.5em;
      text-align: center;
   }

   .metadata {
      grid-area: metadata;
      font-style: italic;
      list-style-type: none;
      padding-left: 0;
      text-align: end;
      font-size: 0.9em;

      & > li {
         display: inline;

         & + li::before {
            content: "; ";
         }

         &:first-child::before {
            content: "(";
         }

         &:last-child::after {
            content: ")";
         }
      }

   }

   @media (max-width: 540px) {
      header {
         grid-template-columns: 1fr !important;
         grid-template-rows: repeat(3, auto);
         grid-template-areas: "logo" "title" "metadata";

         .logo {
            justify-self: center;
            margin-bottom: 0.2em;
         }
      }

      .title {
         padding: 0;
      }
   }
}

@layer components {
   blockquote,
   .epigraph {
      font-size: 0.95em;
      padding: 0.2em 0.5em 0.2em 2em;
      position: relative;

      &::before,
      &::after {
         color: #555;
         position: absolute;
         font-size: 3em;
      }

      &::before {
         line-height: 0;
         content: "\201C";
         top: 0.5em;
         left: 0;
      }
   }

   .epigraph > :last-child {
      text-align: end;
      margin-right: 0;
      margin-top: 0;

      &::before {
         content: '\2015';
      }
   }

   .tabs {
      list-style-type: none;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      font-family: var(--sans);
      padding: 0.01em;

      & + .tabs {
         margin-top: 0;
      }
   }

   .tab {
      display: block;
      background: none;
      border: none;
      border-bottom: 0.125em solid transparent;
      color: #222;
      cursor: pointer;
      font-size: inherit;
      margin: 0;
      padding: 0.3em 0.5em;
      outline: 0;

      &.current {
         border-bottom-color: #8cd0f2;
      }

      &:not(.current):hover {
         border-bottom-color: #ccc;
      }
   }

   .switch {
      display: flex;
      justify-content: center;
      font-family: var(--smcaps);
      color: #333;
      font-size: 1em;
      line-height: 1.7rem;

      & label {
         border: 2px solid #555;
         border-radius: 1em;
         cursor: pointer;
         overflow: hidden;
      }

      & label:hover .switch-labels::after {
         background-color: hsla(200, 70%, 80%, 1);
      }

      .switch-labels {
         display: grid;
         position: relative;
         transition: transform 0.3s;
         transform: translateX(0);
         width: 100%;
      }

      .switch-labels::after {
         background-color: hsla(200, 50%, 90%, 1);
         border: 2px solid #555;
         border-radius: 1em;
         content: '';
         display: block;
         height: 1rem;
         left: calc(100% - 1.5rem);
         position: absolute;
         transition: background-color 0.1s, transform 0.3s;
         transform: translateY(-50%);
         top: 50%;
         width: 1rem;
      }

      .switch-label {
         padding-left: 0.5em;
         padding-right: 1.9em;
      }

      .switch-label.left {
         justify-self: right;
      }

      .switch-label.shade {
         visibility: hidden;
      }

      .switch-label.right {
         padding-left: 0;
         position: absolute;
         left: 100%;
      }

      .switch-label,
      .switch-label::after {
         grid-row: 1;
         grid-column: 1;
      }

      & input[type="checkbox"] {
         display: none;
      }

      & input[type="checkbox"]:checked + .switch-labels {
         transform: translateX(calc(-100% + 1.75rem));
      }
   }

   .index {
      display: grid;
      gap: 1em;
      grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));

      & ul {
         list-style-type: none;
         padding-left: 1.5em;
         text-indent: -1.5em;
      }
   }
}

@layer helpers {
   .hidden {
      display: none;
   }

   .cols-grid {
      --col-width: 16em;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--col-width), 1fr));
      grid-gap: 1em;

      & > * {
         margin: 0;
      }
   }
}