@layer tiny, config, base, layout;

@layer tiny {
  /* Mike Mai Tiny CSS */
  :root {
    color-scheme: light dark;
    accent-color: #0066cc;
    font-family: system-ui;
    font-feature-settings: "ss06";
  }

  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }

  :where(p) {
    text-wrap: pretty;
  }

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

  :where(svg) {
    fill: currentColor;
  }

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

  @media (forced-colors: active) {
    :where(button) {
      border: 1px solid;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }
}

@layer config {
  :root {
    --font-size-min: 100%;
    --font-size-max: 125%;

    font-size: clamp(
      var(--font-size-min),
      var(--font-size-min) * 0.9 + 0.5dvi,
      var(--font-size-max)
    );

    --pt-double-canon: 4.666rem;
    --pt-canon: 3.999rem;
    --pt-double-great-primer: 2.999rem;
    --pt-double-english: 2.333rem;
    --pt-double-pica: 2rem;
    --pt-paragon: 1.666rem;
    --pt-great-primer: 1.5rem;
    --pt-english: 1.166rem;
    --pt-pica: 1rem;
    --pt-small-pica: 0.916rem;
    --pt-long-primer: 0.833rem;
    --pt-bourgeois: 0.75rem;
    --pt-minion: 0.583rem;

    --line-length: 65ch;

    --page-max-inline-size: min(var(--line-length), 80%);
    --page-padding-inline: calc((100% - var(--page-max-inline-size)) / 2);
  }
}

@layer base {
  :where(main) {
    padding-inline: var(--page-padding-inline);
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 2ex 0.5ex;

    + :where(:not(h1, h2, h3, h4, h5, h6)) {
      margin-block-start: 0;
    }
  }

  :where(ul, ol) {
    padding-inline-start: 0;
  }

  :where(address) {
    font-style: normal;
  }

  :where(:focus-visible) {
    outline: 2px solid;
    outline-offset: 2px;
  }
}

@layer layout {
  :where(.home) {
    font-size: 1.2em;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: 65svh;

    :where(address) {
      font-size: 0.85em;
    }
  }
}