html {
  max-width: 83ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
  font-family:
    "Segoe UI Web (West European)",
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    "Helvetica Neue",
    "Helvetica",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
}

body {
  /* inspired by: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Limiting_content_width */
  max-width: 80ch;

  /* inspired by: https://thoughtmight.com/tutorial/109-bytes-css-website-looks-great/ */
  padding: 1em;

  margin: auto;

  /* inspired by: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height */
  line-height: 1.5;

  --font-family:
    /* inspired by: https://react.fluentui.dev/?path=/docs/theme-fonts--pag
    see also: https://fluent2.microsoft.design/typography */
    "Segoe UI",
    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", sans-serif,
    /* a relatively popular snippet of unknown origin */
    "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  font-family: var(--font-family);
}

main {
  /* If we assume the almost universal PC font size of 16px,
    then we can do 1.5em in order to get 18pt,
    which is mentioned by WCAG, and can be loosely interpreted as a recommendation.
    Simultaneously, x-large is (usually) 1.5em.
    But, if the user already has the font-size customized,
    it can be annoying to see it scaled,
    so hopefully it's a good idea to limit our "intrusion" to <main> section only. */
  font-size: x-large;
  /* the first is basically Frutiger-like;
    the second is described here: https://en.wikipedia.org/wiki/Constantia_(typeface)#Features */
  font-family: Corbel, Constantia, var(--font-family);
}

h1,
hgroup {
  /* loosely inspired by: https://dev.to/swyx/100-bytes-of-css-to-look-great-everywhere-19pd */
  margin-block: 2.5rem 1.5rem;

  /* enforce fancier headers */
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

h1,
h2,
h3 {
  /* a somewhat popular "snippet"
  (though usually it covers all levels; but also sometimes only h1 and h2) */
  line-height: 1.2;
}

h1 {
  /* px seems to "handle" font-size changes better than em here, counterintuitively */
  text-shadow: -8px -8px 1px color-mix(in srgb, currentColor 12.5%, transparent);
}

/* see also: https://www.w3.org/WAI/WCAG21/Techniques/general/G188 */
p,
ul,
ol {
  /* inspired by: https://www.w3.org/WAI/WCAG21/Techniques/general/G188 */
  margin-block-end: 2em;

  ul,
  ol {
    margin-block-end: revert;
  }
}

hgroup {
  >p {
    font-weight: lighter;
    line-height: initial;
  }

  >* {
    margin-block: 0;
  }

  /* while this can be done via flex instead,
    inlining works just as fine (if not better) */
  >h1,
  >h1+p {
    display: inline;
  }
}

nav {
  margin-block-end: 0.75em;
}

main {
  text-rendering: optimizeLegibility;
}

/* like a full-width (aka full-bleed) but without the need for `overflow-x: hidden`
  source: https://css-tricks.com/full-width-containers-limited-width-parents/#aa-no-calc-needed */
img {
  width: 98vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -49vw;
  margin-right: -49vw;
}