html:has(#image-dialog[open]) {
  overflow: hidden;
}

main {
  article {
    container: article / inline-size;
    max-width: var(--sp-1440);
    margin-inline: auto;

    @media not (prefers-reduced-motion: reduce) {
      * {
        view-transition-name: attr(data-view-transition-name type(<custom-ident>), none);
      }
    }

    p {
      color: var(--font);
    }

    strong,
    em {
      font-family: var(--f-m);
    }

    article-image {
      display: block;
      border: none;
      margin-block: var(--sp-24-20);

      img {
        cursor: zoom-in;
      }
    }

    dialog {
      width: 80vw;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: none;
      background: transparent;
      cursor: zoom-out;

      &::backdrop {
        background-color: rgba(0, 0, 0, 0.6);
      }

      form {
        position: absolute;
        opacity: 0;
      }
    }

    at-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "header side-bar"
        "main-content side-bar";
      column-gap: var(--sp-20);
      padding-inline: var(--sp-30-16);
      max-width: var(--sp-1146);
      margin-inline: auto 0;

      >header {
        grid-area: header;
        margin-block-end: var(--sp-80-40);

        article-info {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          column-gap: var(--sp-24-20);
          row-gap: var(--sp-12);
          margin-block: var(--sp-80-40);
          color: var(--font);
        }

        .summary {
          padding-inline-start: calc(var(--sp-24-16) + var(--sp-4));
          position: relative;

          &::before {
            content: "";
            display: block;
            width: var(--sp-4);
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--bg-shade-9);
            border-radius: var(--sp-99);
          }
        }
      }

      side-bar {
        grid-area: side-bar;
        position: sticky;
        top: calc(var(--header-height) + var(--sp-20));
        height: fit-content;
        border-inline-start: var(--border);

        table-of-content {
          display: block;
          padding-inline: var(--sp-20);

          >p {
            color: var(--font);
          }

          >ol {
            display: flex;
            flex-direction: column;
            padding-block: var(--sp-20);

            .heading-2 {
              margin-block-end: var(--sp-12);
            }

            .heading-3 {
              margin-block-start: var(--sp-8);
              margin-inline-start: var(--sp-12);
            }

            .heading-3+.heading-2 {
              margin-block-start: var(--sp-20);
            }

            .heading-2+.heading-3 {
              margin-block-start: 0;
            }

            a {
              text-decoration: none;
              color: var(--font);
            }
          }
        }

        related-topics {
          display: block;
          padding-inline: var(--sp-20);
          padding-block-start: var(--sp-20);
          border-block-start: var(--border);

          ul {
            display: flex;
            flex-direction: column;
            gap: var(--sp-12);
            margin-block-start: var(--sp-20);
          }
        }
      }

      .main-content {
        grid-area: main-content;

        h2 {
          margin-block: var(--sp-40);
        }

        h3 {
          margin-block: var(--sp-20);
        }

        ol {
          counter-reset: counter;
          margin-block: var(--sp-24-20);

          li {
            counter-increment: counter;
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: var(--sp-8);
            margin-block-start: var(--sp-12);

            &::before {
              content: counter(counter) ".";
              font-family: var(--f-r);
              font-size: var(--fs-20-16);
              letter-spacing: var(--zero);
              line-height: var(--lh-150);
              color: var(--font);
            }
          }
        }

        ul {
          margin-block: var(--sp-24-20);

          li {
            display: grid;
            grid-template-columns: auto 1fr;
            margin-block-start: var(--sp-12);

            &::before {
              content: "•";
              font-family: var(--f-r);
              font-size: var(--fs-20-16);
              letter-spacing: var(--zero);
              line-height: var(--lh-150);
              color: var(--font);
              margin-inline-end: var(--sp-8);
            }
          }
        }

        ol,
        ul {
          &:has(ol, ul) {
            li {
              display: grid;
              grid-template-columns: auto 1fr;
              grid-template-areas:
                "before text"
                ". list";

              &::before {
                grid-area: before;
              }

              >p {
                grid-area: text;
              }

              ul,
              ol {
                grid-area: list;
              }
            }
          }
        }

        table {
          container: table / inline-size;
          border-collapse: collapse;
          margin-block: var(--sp-24-20);

          th,
          td {
            padding: var(--sp-16);
            border-block-start: var(--border);
            border-inline-start: var(--border);

            &:last-of-type {
              border-inline-end: var(--border);
            }
          }

          td {
            vertical-align: top;
          }

          tr:last-of-type {
            border-block-end: var(--border);
          }

          thead {
            th {
              text-align: start;
              background-color: var(--bg-shade-9);
            }
          }

          @container article (inline-size < 31.25rem) {
            thead {
              display: none;
            }

            td {
              display: grid;
              grid-template-columns: 100px 1fr;
              border-inline-end: var(--border);

              &::before {
                content: attr(data-th);
                font-family: var(--f-m);
                border-inline-end: var(--border);
                padding-inline-end: var(--sp-16);
              }

              span {
                padding-inline-start: var(--sp-16);
              }
            }
          }
        }
      }

      @container (inline-size < 56.25rem) {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "side-bar"
          "main-content";

        side-bar {
          position: static;
          border: none;
          padding: 0;
          margin: 0;

          related-topics {
            display: none;
          }
        }
      }
    }
  }
}