*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

:root {
    --font-monospace: 'Cascadia Code', monospace;
    --font-sans: Asap, sans-serif;
    --font-serif: Alegreya, Georgia, serif;

    /*
    - Axiom 1: Spacing between flow elements should be a multiple of line-height, which, when set reasonably, is larger than font-size. Its usage is most likely limited to margins and gaps.
    - Axiom 2: Internal spacing and elements, like border-size, underline-thickness, text-decoration-offset, should be a multiple of font-size. I chose to use font-size for padding too.
    - Axiom 3: Use a modular scale to set various font-sizes in order to ensure reasonable increments between levels. (not other elements, which should just be a multiple or fraction of either line-height or font-size, as described above).
    */

    --measure: 48rem;

    --line-height: 1.5;
    --base-font-size: 1.125rem;

    --p: var(--base-font-size);
    --h4: 1.25rem;
    --h3: 1.5rem;
    --h2: 1.75rem;
    --h1: 2.5rem;

    counter-reset: h2 h3 h4;

    --list-item-proximity: 0.75em;
}

* {
    max-inline-size: var(--measure);
}

html,
body,
div,
main,
article {
    max-inline-size: none;
}

body * + * {
    margin-block-start: 1.5em;
}

body > * + * {
    margin-block-start: 3em;
}

:is(h1, h2, h3, h4) + * {
    margin-block-start: 0.75em;
}

li + li {
  margin-block-start: var(--list-item-proximity);
}

body {
    line-height: var(--line-height);
    font-size: var(--p);
    font-family: var(--font-sans);
    margin-block: 3em;
}

main {
    position: relative;
}

body > * {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: 1rem;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

:is(h1, h2, h3, h4)::before {
    font-size: 0.75em;
}

:is(h1, h2, h3, h4) {
    font-family: var(--font-serif);
    text-wrap: balance;
    color: purple;
}

:is(h2, h3, h4),
.h-entry h1 {
  border-bottom: 1px solid lightgray;
}

h2::before {
    counter-increment: h2;
    content: counter(h2) ".";
    counter-set: h3 0;
}

h3::before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ".";
    counter-set: h4 0;
}

h4::before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ".";
}

hgroup > h1 ~ p {
    margin-block-start: 0.25em;
    text-align: right;
}

img,
picture {
    max-inline-size: 100%;
}

img {
    /* <img> is rendered as display: inline by default. In firefox at least, it lays out the image at baseline level (vertical-align: baseline). Baseline level for text spares some space for descenders. This creates a side-effect for an image, such that a gap is created below the image that looks like an extra un-configured padding or margin. */
    /* Use vertical-align other than baseline, and the problem is solved. */
    /* img can also be set to display as block to fix this problem, but it also changes the default layout style. */
    vertical-align: bottom;
    /* display: block; */
}

button {
    border: none;
    padding: 0.25em;
    border: 1px solid;
    background-color: #e9e9ed;
}

button:hover {
    background-color: #d0d0d7;
}

ol {
    /*
  For ul and ol, W3C standard specifies a default for padding-inline-start (of 40px), but not for margin-inline-start.
  So we only adjust padding value here, not margin.
  https://html.spec.whatwg.org/multipage/rendering.html#lists
  */

    /* After a lot of experimentation, this calculated padding brings
         an <ol>, which is numbered up to 99,
         in alignment with its surrounding content
         across all browsers.
         Safari still is a pain in the ass, because it puts more space between the list item bullet number and the list item text than Firefox and Chrome do, which mucks up even em-based padding. So alignment looks a bit off in Safari. But it is what it is. */
    padding-inline-start: calc(2em + 0.5em);
    list-style-type: decimal-leading-zero;
}

ol>li::marker {
    font-family: var(--font-monospace);
    color: gray;
}

ol ol {
    list-style-type: lower-alpha;
    padding-inline-start: calc(1em + 1em);
}

ol ol ol {
    list-style-type: decimal-leading-zero;
    padding-inline-start: calc(2em + 7px);
}

ul {
    /* After a lot of experimentation, a padding of 1em brings
         a <ul> in alignment with its surrounding content
         across all browsers. */
    padding-inline-start: 1em;
}

ul>li::marker {
  content: "– ";
  font-weight: bold;
  font-family: var(--font-monospace);
  color: black;
}

ul ul {
    list-style-type: circle;
}

ul ul ul {
    list-style-type: square;
}

code, small, figcaption, caption, pre {
    font-size: 0.9em;
}

code {
    font-family: var(--font-monospace);
    font-weight: normal;
    color: green;
}

:is(h1, h2, h3, h4) code {
  font-size: 0.75em;
}

caption,
figcaption {
    font-style: italic;
    text-align: left;
    color: white;
    background-color: black;
}

caption {
    caption-side: bottom;
    padding: 0.5em;
}

figcaption {
    max-inline-size: 100%;
    margin: 0;
    padding: 0.5em;
}

figure {
  box-shadow: 0 0 1px gray;
}

figure > img {
    width: 100%;
    height: auto;
}

figure:has(>pre) > figcaption {
  background-color: #fff;
  color: black;
}

pre {
    /* max-inline-size of <pre> computes to be wider than other tags because it uses monospaced font-family by default, thus causing the --measure=60ch to compute a wider size.
       * Various approaches to tackle this are:
       * 1. Set the font-family to serif to set its measure similar to other tags.
       *    font-family: var(--font-serif);
       *    But code become (subjectively) illegible to an extent.
       * 2. Decrease the max-inline-size of <pre> a bit.
       *    max-inline-size: calc(var(--measure) * 0.9);
       *    But <60ch is too narrow for code snippets The effort of scrolling to see a line of code increases.
       * 3. Decrease the font-size so that max-inline-size reduces by itself.
       *    font-size: 0.9em;
       *    But code snippets become small and a bit hard to read.
       * 4. Let the width consistency go to hell. Size the width of <pre> to a proper 75-80ch.
       *    This is in accordance with the line width of 80 chars used by editors and formatters.
       *    max-inline-size: 80ch;
       *    In order to alleviate the inconsistent widths of normal content and <pre> content,
       *    increase the styling contrast between the two.
       */
    max-inline-size: var(--measure);
    background-color: black;
    color: #4af626;
    overflow: auto;
    padding: 1em;
    font-family: var(--font-monospace);
    font-weight: normal;
}

pre>code {
    color: #4af626;
    font-size: inherit;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
    text-decoration-style: dotted;
}

:is(a, a[rel='tag']):hover {
    text-decoration: none;
    background-color: blue;
    outline: 0.2em solid blue;
    color: white;
}

:is(a[href*="http"], a[rel="external"]):not(:where(.webring))::after {
    content: '⎋';
    display: inline-block;
    transform: rotate(90deg);
    margin-inline-start: 0.25em;
    vertical-align: middle;
    font-size: 0.75em;
}

/* social links */
a[rel="me"]:has(img) {
    text-decoration: none;
}

a[rel="me"]:has(img):hover,
.site-title > .u-url:hover {
    outline-width: 3px;
    background-color: transparent;
    outline-offset: 3px;
    color: currentColor;
}

a[rel="me"]:has(img)::after {
    content: '';
    margin-inline-start: 0;
}

table,
th,
td {
    border-collapse: collapse;
}

th,
td {
    border: 0.1em solid black;
    padding: 0.5em;
    text-align: left;
}

tr:hover {
    background-color: #f0f0f0;
}

aside:not(.no-touch) {
    color: gray;
    border: 0.1em dotted gray;
    padding: 1em;
}

aside:not(.no-touch)::before {
    display: block;
    content: "ASIDE";
    margin-bottom: 1em;
}

blockquote {
    margin-block: 2.5em;
    border-inline-start: 0.25em solid #0097db;
    padding-inline-start: 1em;
    font-style: italic;
}

details > :last-child {
    border-inline-start: 0.25em solid gray;
    padding-inline-start: 1em;
}

ins {
    text-decoration: none;
    background-color: rgba(0, 128, 0, 0.2);
    padding: 0 0.5em 0 0;
}

ins::before {
    content: "+ " attr(datetime);
    background-color: green;
    color: white;
    padding: 0 0.5em 0 0.5em;
}

nav>ul {
    list-style-type: none;
    padding: 0;
}

.no-show {
    display: none;
}

.visually-hidden {
    display: none !important;
}

s {
    color: gray;
    text-decoration-style: wavy;
    text-decoration-color: red;
}