:root {
  --body-item-spacing: 2rem;
  --content-width: 80rem;
  --content-columns: 5;
  --gutter-width: 3rem;
  --list-item-block-gap: var(--body-item-spacing);
  --margin-min-width: var(--body-item-spacing);
  --margin-max-width: 1fr;
  --menu-icon-size: 20px;
  --nav-bulleted-spacing: 0.75rem;
}

@layer root {
    main {
        display: grid;
        grid-template-columns:
            [margin-left]
            minmax(var(--margin-min-width), var(--margin-max-width))
            [wide-content-start wide-content-left-start]
            1fr
            [wide-content-left-end gutter-start gutter-left-start]
            var(--gutter-width)
            [gutter-left-end content-start]
            repeat(var(--content-columns),
                [column-start]
                min(
                    calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
                    calc(var(--content-width) / var(--content-columns))
                )
                [column-end]
            )
            [content-end gutter-right-start]
            var(--gutter-width)
            [gutter-right-end gutter-end wide-content-right-start]
            1fr
            [wide-content-right-end wide-content-end]
            minmax(var(--margin-min-width), var(--margin-max-width))
            [margin-right];
    }

    @media (max-width: 960px) {
        main {
            --margin-min-width: 0;
            --margin-max-width: 0;
        }
    }

    @media (max-width: 519px) {
        /* Collapse the margin and wide content tracks */
        main {
            --content-columns: 3;

            grid-template-columns:
                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
                var(--gutter-width)
                [gutter-left-end content-start]
                repeat(
                  var(--content-columns),
                  [column-start]
                  min(
                    calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
                    calc(var(--content-width) / var(--content-columns))
                  )
                  [column-end]
                )
                [content-end gutter-right-start]
                var(--gutter-width)
                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
        }
    }

    @media (max-width: 415px) {
        main {
            --content-columns: 1;

            display: grid;
            grid-template-columns:
                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
                var(--gutter-width)
                [gutter-left-end content-start]
                calc(100% - 2 * var(--gutter-width))
                [content-end gutter-right-start]
                var(--gutter-width)
                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
        }
    }
}

@layer layout {
  aside#table-of-contents {
    grid-column: content-start / content-end;
  }

  blockquote {
    --line-width: 4px;

    border-inline-start: var(--line-width) solid var(--separator-color);
    padding-inline-start: calc(3rem - var(--line-width));

    margin: 0;
  }

  p code {
    padding-block-start: 0.1em;
    padding-inline: 0.25em;
  }

  code.nobg {
    display: inline-block;
    margin: 0;
    padding: 0;
  }

  details {
    width: 100%;
  }

  details:has(#TableOfContents) {
    box-sizing: border-box;
    padding: var(--body-item-spacing);
  }

  details > summary + #TableOfContents {
    margin-top: 1rem;
  }

  fieldset {
    box-sizing: border-box;
    padding: var(--body-item-spacing);
    padding-top: calc(var(--body-item-spacing) / 10);
  }

  figcaption:not(:empty) {
    margin-block-start: 0.2em;
  }

  figure {
    grid-column: gutter-start / gutter-end;
    margin: 0;
    margin-inline: 0;
    min-width: fit-content;
    overflow: hidden;
  }
  @media (max-width: 415px) {
    figure {
      grid-column: wide-content-start / wide-content-end;
    }
  }

  figure.code {
    grid-column: content-start / content-end;
  }

  figure.code pre {
    overflow: auto;
    padding: 1rem;
  }

  figure > .container {
    align-items: center;
    display: flex;
    gap: var(--body-item-spacing);
    justify-content: center;
    min-width: fit-content;
  }

  figure img {
    display: block;
  }
  @media (max-width: 414px) {
    figure img {
      max-width: 100%;
    }
  }

  figure svg {
    width: 100%;
    height: auto;
  }

  figure .youtube {
    overflow: hidden;
    width: 100%;
  }

  header.site {
    display: flex;
    width: 100%;
  }

  header.site h1 {
    margin: 0;
    order: 1;
  }

  header.site > .grid {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin: 0 auto;
    max-width: var(--content-width);
    padding: 1.5rem 3rem;
    width: 100%;
  }

  header.site > .grid > nav {
    align-items: center;
    display: flex;
    justify-content: start;
    list-style: none;
  }

  header.site nav > li { display: block; }

  header.site nav:first-of-type {
    justify-content: start;
    order: 2;
  }
  @media (max-width: 435px) {
    header.site nav:first-of-type { order: 5; }
  }

  header.site nav:last-of-type {
    justify-content: end;
    order: 3;
  }

  @media (max-width: 516px) {
    header.site > .platter {
      border-left: none;
      border-radius: 0;
      border-right: none;
      border-top: none;
    }

    header.site > .grid { max-width: none; }
  }

  img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  main {
    box-sizing: border-box;
    margin-block-start: var(--body-item-spacing);
    width: 100%;
  }

  main > * {
    grid-column: content-start / content-end;
  }

  main > figure:not(.code),
  main > a.to-photo-post {
    grid-column: wide-content-start / wide-content-end;
  }

  main > header > .series {
    margin-inline-start: 0.5em;
    width: 100%;
  }

  main > header > .series::before {
    margin-inline-end: 0.25em;
  }

  main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
      padding-block-start: 0.5em;
  }

  nav.bulleted > li:not(:first-child)::before {
    margin-inline-start: var(--nav-bulleted-spacing);
  }

  nav.social > li {
    margin-inline-start: var(--nav-bulleted-spacing);
  }

  nav.social > li:first-child {
    margin-inline-start: 0;
  }

  section.flow {
    display: block flow;
  }

  ul, ol {
    list-style-position: inside;
  }

  ul,
  ol,
  dl,
  :is(ul, ol) > li,
  dl > dt {
    margin-inline-start: var(--body-item-spacing);
  }

  :is(ul, ol) > li:not(:last-child) {
    margin-block-end: calc(var(--body-item-spacing) / 2);
  }

  :is(ul, ol) > li > :is(ul, ol) {
    margin-inline-start: 0;
    margin-block-start: calc(var(--body-item-spacing) / 2);
  }

  table {
    border-collapse: collapse;
    margin-inline: auto;
    width: 50%;
  }

  td,
  th {
    padding-inline: 1rem;
  }

  .list .post header {
    grid-column: wide-content-start / content-end;
  }
  @supports (grid-template-columns: subgrid) {
    .list .post header {
      display: grid;
      grid-template-columns: subgrid;
    }

    .list .post header h1 {
      grid-column: content-start / content-end;
    }
  }

  .list .post time {
    grid-column: wide-content-start;
    justify-self: end;
  }
  @media (max-width: 960px) {
    .list .post time {
      grid-column: content-start / content-end;
      justify-self: start;
    }
  }

  .list {
    gap: var(--list-item-block-gap) 0;
  }

  .list > h1,
  .list > header {
    grid-column: content-start / content-end;
  }

  .list > .post {
    grid-column: wide-content-start / wide-content-end;
  }

  @supports (grid-template-columns: subgrid) {
    .list > .post {
      display: grid;
      grid-template-columns: subgrid;
      gap: var(--body-item-spacing) 0;
    }
  }

  .list .post time {
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 960px) {
    .list .post time {
      line-height: var(--line-height);
    }
  }

  .p5-sketch {
    display: block;
    position: relative;
    width: 100%;
  }

  .page {
    gap: var(--body-item-spacing) 0;
  }

  .page > header {
    align-items: first baseline;
    column-gap: 4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  @media (max-width: 539px) {
    .page > header {
      grid-template-columns: auto;
    }
  }

  .page > header,
  .page > footer {
    grid-column: content-start / content-end;
  }

  .page > article > * {
    grid-column: gutter-start / gutter-end;
  }

  .page > article > :not(:last-child) {
    margin-block-end: var(--body-item-spacing);
  }

  .post {
    grid-column: gutter-start / gutter-end;
  }

  .post > * {
    grid-column: content-start / content-end;
  }

  .social {
    display: block flex;
    margin-left: auto;
    order: 2;
  }

  .social > li > a {
    display: block;
    height: var(--menu-icon-size);
    width: var(--menu-icon-size);
  }

  .social > li > a > span {
    display: none;
  }

  .social > li + li:before {
    padding: 0 0.5rem;
  }

  .youtube iframe {
    aspect-ratio: 16 / 9;
    margin-bottom: -3px;
    width: 100%;
  }
}