@layer config {
  :root {
    --gutter: clamp(1rem, 2.5vmax, 1.5rem);
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    --paragraph-indent: calc(var(--gutter) / 1.25);
    --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;
    --landmark-hr-margin-block: var(--page-padding-block);
    --hr-size: 0.5ex;
    --hr-margin-block: calc(var(--stack) * 4);
    --border-image-source: gray, color-mix(in oklch, gray 40%, transparent),
      color-mix(in oklch, gray 40%, transparent), gray;
    --underline: solid;
    --focus-outline: 2px solid crimson;
    --focus-outline-offset: 2px;
    --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, 130%);
    --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;
    box-sizing: border-box;
  }
  @media (prefers-color-scheme: dark) {
    *,
::before,
::after {
      -moz-osx-font-smoothing: grayscale !important;
      -webkit-font-smoothing: antialiased !important;
    }
  }

  * {
    margin: 0;
    padding: 0;
  }

  input:is([type="checkbox"], [type="radio"]),
select,
label,
button {
    cursor: pointer;
  }

  input,
select,
textarea,
button {
    font: inherit;
  }

  img,
svg,
video {
    max-inline-size: 100%;
    block-size: auto;
  }

  svg {
    fill: currentcolor;
  }

  @media (forced-colors: active) {
    button {
      border: 1px solid;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }
}

@layer elements {
  ::-moz-selection {
    color: white;
    background: crimson;
  }
  ::selection {
    color: white;
    background: crimson;
  }

  ::-moz-selection {
    color: white;
    background: crimson;
  }

  ::selection {
    color: white;
    background: crimson;
  }

  :where(:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  :disabled {
    border-style: groove;
    cursor: not-allowed;
  }

  [readonly] {
    border-style: dashed;
    background: transparent;
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="file"]), textarea, select) {
    border: 1px inset;
    border-radius: 0;
    /* TODO: test this */
    background: color-mix(in oklch, canvasText 5%, transparent);
  }

  :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, var(--border-image-source));
    }
  }
  :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, color-mix(in oklch, gray 60%, transparent));
    }
  }
  :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) {
    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 {
    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 (any-hover: hover) {
    :where(nav a:hover) {
      border-image-source: linear-gradient(6deg, var(--border-image-source));
    }
  }
  :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;
    color: inherit;
  }

  body {
    padding-block: var(--page-padding-block);
  }
  body:not(:has(> header, > footer)) {
    display: grid;
    place-items: center;
    min-inline-size: 0;
    min-block-size: 100dvb;
  }
  body:not(:has(> header)) h1 {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  :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(*:not(p) + 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, big) {
    font-size: var(--pt-paragon);
  }

  :where(h5) {
    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(nav a)[aria-current] {
    border-image-source: unset;
  }

  :where(summary > *) {
    display: inline;
  }

  :where(legend, summary, button) {
    font-weight: 700;
  }

  :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) {
    border-spacing: 0;
    caption-side: bottom;
  }

  :where(tr > *:first-child) {
    white-space: nowrap;
  }

  :where(kbd) {
    padding-block: 1px 2px;
    padding-inline: 0.5ch;
    letter-spacing: 0.1ch;
    text-transform: uppercase;
  }

  :where(code) {
    text-decoration: underline;
    -webkit-text-decoration-style: dashed;
            text-decoration-style: dashed;
    -webkit-text-decoration-color: crimson;
            text-decoration-color: crimson;
    text-underline-offset: 0.35ex;
  }

  :where(pre) {
    display: block;
    position: relative;
    word-spacing: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: normal;
    color: white;
    background: black;
  }

  :where(pre)::after {
    position: absolute;
    inset-inline: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent, black);
    pointer-events: none;
    content: "";
    inset-block-end: 0;
    block-size: var(--stack);
  }

  :where(pre code) {
    display: block;
    text-decoration: none;
    overflow: auto;
    max-block-size: 60vh;
    color-scheme: dark;
  }

  :where(dl) {
    display: grid;
    align-items: baseline;
    grid-template-columns: auto minmax(75%, 1fr);
    gap: calc(var(--gutter) / 2);
  }

  :where(dd) {
    block-size: 100%;
  }

  :where(input:not([type="checkbox"], [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 {
    font: inherit;
    cursor: pointer;
    -webkit-appearance: auto;
            appearance: auto;
  }

  :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(blockquote footer) {
    padding-inline: 0;
  }

  :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;
    font-weight: 400;
    opacity: 50%;
    transform: translateX(-125%);
  }

  [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";
  }
}