/* Demo web fonts from Adobe Fonts */
@import url("https://use.typekit.net/swm2ywc.css");

html,
body {
  margin: 0;
  padding: 0;
  --ams-icon-line-height: 1lh;
  --ams-icon-font-size: 1em;
}

.icon-list {
  margin-inline-start: 2em;
}
.nl-icon-before,
.nl-icon-after {
  list-style-type: none;
  --nl-icon-margin: 1ch;
}
.rect-icon {
  --nl-icon-image: url("rect.svg");
}
.circle-icon {
  --nl-icon-image: url("circle.svg");
}
.github-icon {
  --nl-icon-image: url("github.svg");
}
.tabler-icon-chevron-right-icon {
  --nl-icon-image: url("tabler-icon-chevron-right.svg");
}
.nl-icon-before::before,
.nl-icon-after::after {
  /* --nl-icon-image: url("#tabler-icon-chevron-right"); */
  /* --nl-icon-image: url("tabler-icon-chevron-right.svg"); */
  /* --nl-icon-block-size: 1em;
  --nl-icon-inline-size: 1em; */
  content: "";
  /* background-color: currentColor; */
  background-color: currentColor !important;
  /* color: white !important; */
  -webkit-mask-image: var(--nl-icon-image);
  mask-image: var(--nl-icon-image);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  margin-inline-start: calc(
    -1 * (var(--nl-icon-inline-size) + var(--nl-icon-margin, 0))
  );
  margin-inline-end: var(--nl-icon-margin, 0);

  align-items: center;
  block-size: var(--nl-icon-block-size, var(--_nl-icon-block-size));
  color: var(--nl-icon-color, currentcolor);
  display: inline-flex;
  font-size: var(--nl-icon-font-size, 1em);
  inline-size: var(--nl-icon-inline-size, var(--_nl-icon-inline-size));
  inset-block-start: var(--nl-icon-inset-block-start, 0);
  justify-content: center;
  min-block-size: var(--nl-icon-block-size, var(--_nl-icon-block-size));
  min-inline-size: var(--nl-icon-inline-size, var(--_nl-icon-inline-size));
  pointer-events: none;
  position: relative;
  vertical-align: middle;
}

.nl-icon--text {
  font-size: var(--nl-icon-block-size);
}
.nl-icon--baseline {
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
}

.nl-icon--size-ex {
  inset-block-start: 0 !important;
  --nl-icon-block-size: 1ex;
  --nl-icon-inline-size: 1ex;
}
.nl-icon--size-cap {
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
  --nl-icon-block-size: 1cap;
  --nl-icon-inline-size: 1cap;
}
.nl-icon--size-em {
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
  /* --nl-icon-inset-block-start: 0; */
}
.nl-icon--size-2 {
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
  --nl-icon-block-size: 2rem;
  --nl-icon-inline-size: 2rem;
}
.nl-icon--size-3 {
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
  --nl-icon-block-size: 3rem;
  --nl-icon-inline-size: 3rem;
}

/* Font palettes */
body,
body.palette-1 {
  /* --head-fonts: verdana, sans-serif;
  --body-fonts: georgia, serif;
  --code-fonts: calling-code, monospace; */
  --head-fonts: inherit;
  --body-fonts: inherit;
  --code-fonts: inherit;
}

body.palette-2 {
  --head-fonts: -apple-system, BlinkMacSystemFont, Aptos, "Segoe UI",
    "Noto Sans", Helvetica, Arial, sans-serif;
  --body-fonts: -apple-system-ui-serif, ui-serif, "Noto Serif",
    "Times New Roman", serif;
  --code-fonts: ui-monospace, SFMono-Regular, ui-monospace, Monaco,
    "Andale Mono", "Ubuntu Mono", monospace;
}

body.palette-3 {
  --head-fonts: brandon-grotesque, sans-serif;
  --body-fonts: elmhurst, serif;
  --code-fonts: calling-code, monospace;
}

body.palette-4 {
  --head-fonts: ff-tisa-sans-web-pro, sans-serif;
  --body-fonts: karmina, serif;
  --code-fonts: source-code-pro, monospace;
}

body.palette-5 {
  --head-fonts: delittle-chromatic, sans-serif;
  --body-fonts: omnes-pro, sans-serif;
  --code-fonts: logic-monoscript, monospace;
}

/* Set baseline size */
:root {
  font-size: 100%;
}

/* Show baseline grid */
html.show-grid body {
  background-image: linear-gradient(to bottom, #0ff 0, transparent 1px);
  background-repeat: repeat-y;
  background-size: 100% 1rem;
}

/* Set headings to baseline */
h1,
h2,
h3,
h4,
h5,
h6 {
  --baselines: 3;
  --beneath: 1;
  --baseline-shift: calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2);
  --baseline-push: calc(calc(var(--beneath) * 1rem) - var(--baseline-shift));

  font-family: var(--head-fonts);
  font-weight: 700;
  line-height: calc(var(--baselines) * 1rem);
  margin: 0;
  padding: 0;
  font-feature-settings: "kern", "lnum", "liga";
  padding-top: var(--baseline-shift);
  margin-bottom: var(--baseline-push);
}

h4,
h5,
h6 {
  --baselines: 2;
  --beneath: 0;
}

/* Set text to baseline */
p,
ul,
ol {
  --baselines: 2;
  --beneath: 1;
  --baseline-shift: calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2);
  --baseline-push: calc(calc(var(--beneath) * 1rem) - var(--baseline-shift));

  font-family: var(--body-fonts);
  font-size: 1.2rem;
  line-height: calc(var(--baselines) * 1rem);
  margin: 0;
  padding: 0;
  font-feature-settings: "kern", "onum", "liga";
  padding-top: var(--baseline-shift);
  margin-bottom: var(--baseline-push);
}

p + h1,
ul + h1,
ol + h1,
p + h2,
ul + h2,
ol + h2,
p + h3,
ul + h3,
ol + h3 {
  padding-top: calc(var(--baseline-shift) + 1rem);
}

/* Heading sizing modular scale */
h1 {
  font-size: 2.986rem;
}

h2 {
  font-size: 2.488rem;
}

h3 {
  font-size: 2.074rem;
}

h4 {
  font-size: 1.728rem;
}

h5 {
  font-size: 1.44rem;
}

h6 {
  font-size: 1.2rem;
}

/* Additional typographic element styling */
.caption {
  font-size: 1rem;
}

h1 + .caption,
h2 + .caption,
h3 + .caption {
  margin-top: -1rem;
}

.sidenote {
  left: 65%;
  width: 35%;
  padding-left: 4rem;
  position: absolute;
  max-width: 35%;
}

code,
pre {
  font-family: var(--code-fonts);
}

pre {
  background-color: rgba(245, 245, 215, 0.5);
  display: block;
  margin-bottom: 2rem;
  padding: 1rem;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}

code {
  line-height: 1rem;
}

blockquote {
  p {
    border-left: 0.15rem solid blue;
    font-style: italic;
    padding-left: 1rem;
    padding-bottom: calc(
      calc(var(--beneath) * 1rem) -
        calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2)
    );
    margin-bottom: 1rem;
  }
}

b,
strong {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

ul,
ol {
  li {
    ol,
    ul {
      padding-top: 1rem;
      margin-bottom: 1rem;
      margin-left: 2rem;
    }
  }
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: none;

  li {
    counter-increment: top-level;

    &:before {
      content: counter(top-level) ".";
      font-feature-settings: "lnum", "tnum";
      margin-left: -3rem;
      position: absolute;
      text-align: right;
      width: 2em;
    }

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

        ol {
          li {
            counter-increment: alt-level;

            &:before {
              content: counter(alt-level) ".";
            }
          }
        }
      }
    }

    ol {
      li {
        counter-increment: sub-level;

        &:before {
          content: counter(top-level) "." counter(sub-level);
        }

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

        ol {
          li {
            counter-increment: sub-sub-level;

            &:before {
              content: counter(top-level) "." counter(sub-level) "."
                counter(sub-sub-level);
            }
          }
        }
      }
    }
  }
}

hr {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, gray 50%);
  background-position: 0 50%;
  background-repeat: repeat-x;
  background-size: 100% 0.15rem;
  border: 0;
  margin: 0;
  padding-bottom: 3rem;
  padding-top: 3rem;
}

/* Layout */
.container {
  width: 94%;
  max-width: 65rem;
  margin: 0 auto;
  position: relative;
}

.main-col {
  width: 65%;
  float: left;
}

.sidebar {
  width: 35%;
  float: left;
  padding-left: 4rem;
}

/* Demo UI */
* {
  box-sizing: border-box;
}

header {
  height: 4rem;
  padding-right: 2rem;
  text-align: right;
  margin-bottom: 2rem;

  span {
    --baselines: 2;

    font-family: -apple-system, BlinkMacSystemFont, Aptos, "Segoe UI",
      "Noto Sans", Helvetica, Arial, sans-serif;
    margin-right: 1rem;
    line-height: calc(var(--baselines) * 1rem);
    padding-top: calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2);
    width: 6rem;
    display: inline-block;
    user-select: none;
    transition: 0.3s font-weight;
    text-align: center;

    &.active {
      font-weight: 600;

      &:hover {
        font-weight: 600;
      }
    }

    &:hover {
      cursor: pointer;
      font-weight: 500;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}