@layer global, primitive, component, utility;

    @layer global {
        :root {
                --ratio: 1.5;
                --s-5: calc(var(--s-4) / var(--ratio));
                --s-4: calc(var(--s-3) / var(--ratio));
                --s-3: calc(var(--s-2) / var(--ratio));
                --s-2: calc(var(--s-1) / var(--ratio));
                --s-1: calc(var(--s0) / var(--ratio));
                --s0: 1rem;
                --s1: calc(var(--s0) * var(--ratio));
                --s2: calc(var(--s1) * var(--ratio));
                --s3: calc(var(--s2) * var(--ratio));
                --s4: calc(var(--s3) * var(--ratio));
                --s5: calc(var(--s4) * var(--ratio));
                --s6: calc(var(--s5) * var(--ratio));
                --s7: calc(var(--s6) * var(--ratio));
                --s8: calc(var(--s7) * var(--ratio));

                --measure: 80ch;
                font-size: calc(1.2rem + 0.2vw);
                font-family: "Scheherazade New", serif;
        }

        * {
          box-sizing: border-box;
          max-inline-size: var(--measure);
          margin: 0;
          padding: 0;
        }

        html,
        body,
        header,
        nav,
        main,
        footer,
        section,
        hr,
        div {
                max-inline-size: none;
        }

        body {
          padding-block-end: 5rem;
        }

        blockquote {
          padding-inline-start: var(--s-1);
          border-inline-start: 3px black solid;
        }

        table {
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
            break-inside: avoid;
            margin-block-end: var(--s3);
        }

        tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        th,
        td {
            padding: 0.6em;
            vertical-align: top;
        }

        tbody td, tbody th {
            border: 1px solid black;
        }

        h1, h2, h3, h4, h5, h6 {
          break-after: avoid;
        }

        [lang="en"] {
          font-family: "Crimson Text", sans-serif;
        }
    }

    @layer primitive {
      .stack > * + * {
        margin-block-start: 0.5em;
      }

      .center {
        margin-inline: auto;
        max-width: var(--measure);
      }

      .box {
        padding: var(--s1);
        border: 4px solid black;
        break-inside: avoid;
      }
    }

    @layer component {
      .interlinear-grapheme {
        display: inline-flex;
        flex-direction: column;
        padding-inline-end: 1rem;

        span[lang="en"] {
          font-size: 0.7rem;
        }
      }
    }

    @layer utility {
      .pad {
        padding: var(--s1);
      }

      .border {
        border: 4px solid black;
      }
    }

    @media print {
      .print-uncenter {
        margin-inline: 0;
        max-width: 100%;
      }

      .print-display\:none {
        display: none;
      }
    }