/*
 * MCSS - MIT License
 * https://github.com/mikemai2awesome/mcss
 */

@layer config {
    :root { 
      --gutter: clamp(3ch, 2.5vmax, 3.75ch);
      --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
      --paragraph-indent: calc(var(--gutter) / 1.5);
      --line-length: 66ch;
      --page-padding-inline: calc((100vi - min(var(--line-length), 80vi)) / 2);
      --page-padding-block: calc(var(--stack) * 8);
      --landmark-hr-size: 1ex;
      --hr-size: 0.5ex;
      --landmark-hr-margin-block: calc(var(--stack) * 8);
      --hr-margin-block: calc(var(--stack) * 4);
      --underline: solid;
      --font: "Georgia", serif;
      --font-variant: "Verdana", system-ui, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
        Liberation Mono, monospace;
      --font-size: clamp(95%, 80% + 0.5vi, 150%);
      --leading: 1.475;
      --pt-double-canon: clamp(3em, 2.5179em + 2.4107vi, 4.666em);
      --pt-canon: clamp(2.5em, 2.2321em + 1.9643vi, 3.999em);
      --pt-double-great-primer: clamp(2em, 1.7143em + 1.4286vi, 2.999em);
      --pt-double-pica: clamp(1.65em, 1.3571em + 0.7143vi, 2em);
      --pt-paragon: clamp(1.35em, 1.2054em + 0.5357vi, 1.666em);
      --pt-english: 1.166em;
      --pt-pica: 1em;
      --pt-small-pica: 0.916em;
      --pt-long-primer: 0.833em;
      --pt-bourgeois: 0.75em;
      font-family: var(--font);
      font-size: var(--font-size);
      line-height: var(--leading);
      color-scheme: dark light;
      accent-color: crimson;
    }
  
    [data-theme=verdana] {
      --landmark-hr-size: 2px;
      --hr-size: 1px;
      --landmark-hr-margin-block: calc(var(--stack) * 2);
      --hr-margin-block: calc(var(--stack) * 1.5);
      --underline: wavy;
      --font: "Verdana", system-ui, sans-serif;
      --font-variant: var(--font);
      --font-size: clamp(75%, 65% + 0.5vi, 100%);
      --leading: 1.45;
    }
  }
  @layer resets {
    *,
  *::before,
  *::after {
      font-feature-settings: "kern";
      -webkit-font-kerning: normal;
              font-kerning: normal;
      -moz-osx-font-smoothing: grayscale !important;
      -webkit-font-smoothing: antialiased !important;
      box-sizing: border-box;
    }
  
    * {
      margin: 0;
      padding: 0;
    }
  }
  @layer elements {
    *::-moz-selection {
      background: crimson;
    }
    *::selection {
      background: crimson;
    }
  
    *:focus-visible {
      outline: 2px solid currentcolor;
      outline-offset: 2px;
    }
  
    *:disabled {
      cursor: not-allowed;
      border-style: groove;
    }
  
    *[readonly] {
      border-style: dashed;
      background: transparent;
    }
  
    :where(input:not([type="radio"], [type="checkbox"], [type="file"]), textarea, select) {
      border: 1px inset;
      border-radius: 0;
      background: rgba(128, 128, 128, 0.05);
    }
  
    :where(kbd, fieldset, dd, nav a, figure img) {
      border: 1px solid;
    }
    @media (forced-colors: none) {
      :where(kbd, fieldset, dd, nav a, figure img) {
        border-image-source: linear-gradient(-6deg, gray, rgba(128, 128, 128, 0.4), rgba(128, 128, 128, 0.4), gray);
      }
    }
  
    :where(th, td) {
      -webkit-border-after: 1px solid;
              border-block-end: 1px solid;
    }
    @media (forced-colors: none) {
      :where(th, td) {
        border-image-source: linear-gradient(to right, gray, rgba(128, 128, 128, 0.6));
      }
    }
  
    :where(pre) {
      -webkit-border-start: var(--hr-size) solid;
              border-inline-start: var(--hr-size) solid;
    }
    @media (forced-colors: none) {
      :where(pre) {
        border-image-source: linear-gradient(to bottom, crimson, transparent);
      }
    }
  
    :where(hr) {
      opacity: 0.2;
      block-size: 0;
      margin-block: var(--hr-margin-block);
      border: 0;
      -webkit-border-after: 1px solid;
              border-block-end: 1px solid;
    }
    @media (forced-colors: none) {
      :where(hr) {
        border-image-source: linear-gradient(to right, currentcolor, transparent);
      }
    }
  
    :where(header, main) + hr {
      opacity: 0.4;
      border-block-end-width: var(--landmark-hr-size);
    }
    @media (forced-colors: none) {
      :where(header, main) + hr {
        border-image-source: linear-gradient(to right, transparent, currentcolor, transparent);
      }
    }
  
    @media (forced-colors: none) {
      :where(kbd, fieldset, dd, nav a, figure img, th, td, hr, pre) {
        border-image-slice: 1;
      }
    }
    @media (forced-colors: none) and (hover: hover) {
      :where(nav a:hover) {
        border-image-source: linear-gradient(6deg, gray, rgba(128, 128, 128, 0.4), rgba(128, 128, 128, 0.4), gray);
      }
    }
    :where(section + hr) {
      border-block-end-width: var(--hr-size);
    }
  
    :where(header, section, main) + hr {
      margin-block: var(--landmark-hr-margin-block);
    }
  
    :where(select, label, button, summary) {
      cursor: pointer;
    }
  
    body {
      padding-block: var(--page-padding-block);
    }
  
    :where(header, main, footer) {
      padding-inline: var(--page-padding-inline);
    }
  
    :where(button, dd, th, td, kbd, select, input:not([type="radio"], [type="checkbox"]), textarea, nav
        a) {
      padding-block: calc(var(--stack) / 6);
      padding-inline: calc(var(--gutter) / 3);
    }
  
    :where(th, td, caption, figcaption, pre code) {
      padding-inline: calc(var(--gutter) / 2);
    }
  
    :where(th, td, caption, figcaption) {
      padding-block: calc(var(--stack) / 2);
    }
  
    :where(pre code) {
      padding-block: var(--stack);
    }
  
    :where(figure, dl, blockquote) {
      -webkit-padding-before: calc(var(--stack) / 2.5);
              padding-block-start: calc(var(--stack) / 2.5);
    }
  
    :where(details[open]) {
      -webkit-padding-after: var(--stack);
              padding-block-end: var(--stack);
    }
  
    :where(fieldset) {
      padding-block: 0 var(--stack);
      padding-inline: calc(var(--gutter) / 2);
    }
  
    :where(button) {
      padding-inline: var(--gutter);
    }
  
    :where(*:not(p)
        + p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, form
        li
        + li, nav) {
      -webkit-margin-before: var(--stack);
              margin-block-start: var(--stack);
    }
  
    :where(h1, h2, h3, h4, h5, h6, header nav) {
      -webkit-margin-before: calc(var(--stack) * 1.5);
              margin-block-start: calc(var(--stack) * 1.5);
    }
  
    :where(h1, h2, h3, h4, h5, h6) + *:not(h1, h2, h3, h4, h5, h6) {
      -webkit-margin-before: calc(var(--stack) / 2);
              margin-block-start: calc(var(--stack) / 2);
    }
  
    :where(li ol:first-of-type, li ul:first-of-type, nav ul) {
      -webkit-margin-before: 0;
              margin-block-start: 0;
    }
  
    :where(li li) {
      -webkit-margin-start: 2ch;
              margin-inline-start: 2ch;
    }
  
    :where(input, textarea, select) ~ * {
      -webkit-margin-before: calc(var(--stack) / 4);
              margin-block-start: calc(var(--stack) / 4);
    }
  
    :where(figure img) {
      display: block;
      margin-inline: auto;
    }
  
    :where(form ol, form ul) {
      list-style: none;
    }
  
    :where(p:not(:first-of-type)) {
      text-indent: var(--paragraph-indent);
    }
  
    :where(h1, h2, h3, h4, h5, h6) + p {
      text-indent: 0;
    }
  
    :where(h1, h2, h3, h4, h5, h6) {
      line-height: 1.1;
      letter-spacing: -0.02ch;
      text-wrap: pretty;
    }
  
    :where(header h1 ~ p) {
      line-height: 1.25;
    }
  
    :where(h1, h2, h3, h4) {
      overflow-wrap: break-word;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;
    }
  
    :where(h1) {
      font-size: var(--pt-double-canon);
    }
  
    :where(main h1) {
      font-size: var(--pt-canon);
    }
  
    :where(h2) {
      font-size: var(--pt-double-great-primer);
    }
  
    :where(h3, header h1 ~ p) {
      font-size: var(--pt-double-pica);
    }
  
    :where(h4, blockquote p) {
      font-size: var(--pt-paragon);
    }
  
    :where(h5, big) {
      font-size: var(--pt-english);
    }
  
    :where(h6, legend) {
      font-size: var(--pt-pica);
    }
  
    :where(code, label, th, td) {
      font-size: var(--pt-long-primer);
    }
  
    :where(small, kbd, figcaption, caption, sup, sub, input ~ *, textarea
        ~ *, select ~ *) {
      font-size: var(--pt-bourgeois);
    }
  
    :where(small, kbd, figcaption, label, legend, summary, caption, sup, sub, input
        ~ *, textarea ~ *, select ~ *, nav a) {
      font-family: var(--font-variant);
      letter-spacing: 0;
    }
  
    :where(code) {
      font-family: var(--font-mono);
    }
  
    :where(button, select, input, textarea, summary > *) {
      font: inherit;
      /* Reset font. */
    }
  
    :where(nav a) {
      text-decoration: none;
    }
  
    :where(summary > *) {
      display: inline;
    }
  
    :where(legend, summary, button) {
      font-weight: bold;
    }
  
    :where(sup, sub) {
      line-height: 1;
    }
  
    :where(figcaption, caption) {
      text-align: center;
    }
  
    :where(th) {
      text-align: start;
    }
  
    :where(th, td) {
      vertical-align: baseline;
    }
  
    :where(figure) {
      overflow-x: auto;
    }
  
    :where(img) {
      block-size: auto;
      max-inline-size: 100%;
    }
  
    :where(table) {
      caption-side: bottom;
      border-spacing: 0;
    }
  
    :where(tr > *:first-child) {
      white-space: nowrap;
    }
  
    :where(kbd) {
      padding-block: 1px 2px;
      padding-inline: 0.5ch;
      text-transform: uppercase;
    }
  
    :where(code) {
      text-shadow: 0 0 3ex crimson;
    }
  
    :where(pre) {
      display: block;
      position: relative;
      color: white;
      white-space: -moz-pre-wrap;
      white-space: -o-pre-wrap;
      white-space: pre-wrap;
      word-spacing: normal;
      word-break: normal;
      word-wrap: break-word;
      background: black;
    }
  
    :where(pre)::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      z-index: 0;
      block-size: var(--stack);
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, black);
    }
  
    :where(pre code) {
      display: block;
      overflow: auto;
      max-block-size: 60vh;
      color-scheme: dark;
      text-shadow: none;
    }
  
    :where(dl) {
      display: grid;
      grid-template-columns: auto minmax(75%, 1fr);
      gap: calc(var(--gutter) / 2);
      align-items: baseline;
    }
  
    :where(dd) {
      block-size: 100%;
    }
  
    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
      display: block;
      inline-size: 100%;
    }
  
    :where(input[type="radio"], input[type="checkbox"]) {
      inline-size: 1.5ex;
      block-size: 1.5ex;
      vertical-align: baseline;
    }
  
    :where(input[type="file"]) {
      padding-inline: 0;
      border: 0;
    }
  
    ::-webkit-file-upload-button {
      -webkit-appearance: button;
              appearance: button;
      cursor: pointer;
      font: inherit;
    }
  
    :where(input[type="checkbox"], input[type="radio"]) {
      vertical-align: middle;
    }
  
    :where(select) {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      text-indent: 0.01px;
      text-overflow: "";
    }
  
    :where(a) {
      color: inherit;
      -webkit-text-decoration-style: var(--underline);
              text-decoration-style: var(--underline);
      text-underline-offset: 0.3ex;
    }
  
    :where(abbr) {
      cursor: help;
    }
  
    :where(abbr, dt) {
      text-decoration: underline;
      -webkit-text-decoration-style: dotted;
              text-decoration-style: dotted;
      text-underline-offset: 0.3ex;
    }
  
    :where(big) {
      display: inline;
    }
  
    :where(blockquote q)::before {
      position: absolute;
      -webkit-margin-start: -1ex;
              margin-inline-start: -1ex;
    }
  
    :where(blockquote q q)::before {
      position: static;
      -webkit-margin-start: unset;
              margin-inline-start: unset;
    }
  
    :where(input:required + mark) {
      display: none;
      color: inherit;
      background: transparent;
    }
  
    :where(input:required:invalid + mark) {
      display: block;
    }
  
    :where(nav ul) {
      display: flex;
      gap: calc(var(--gutter) / 2);
      flex-wrap: wrap;
      list-style: none;
    }
  
    [data-theme=verdana] :where(h1, h2, h3, h4, h5, h6, header h1 ~ p, blockquote p) {
      font-size: inherit;
      line-height: inherit;
      letter-spacing: 0;
    }
    [data-theme=verdana] :where(h1, h2, h3, h4, h5, h6)::before {
      position: absolute;
      transform: translatex(-125%);
      opacity: 0.5;
      font-weight: normal;
    }
    [data-theme=verdana] :where(h1)::before {
      content: "H1";
    }
    [data-theme=verdana] :where(h2)::before {
      content: "H2";
    }
    [data-theme=verdana] :where(h3)::before {
      content: "H3";
    }
    [data-theme=verdana] :where(h4)::before {
      content: "H4";
    }
    [data-theme=verdana] :where(h5)::before {
      content: "H5";
    }
    [data-theme=verdana] :where(h6)::before {
      content: "H6";
    }
  }