/*
 * RESET
 * A minimal reset applied only to a few specific tags that are being used.
 * 
 **/
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

/*
 * DEFAULTS
 * 
 **/
html {
    color-scheme: dark light;
    font-family: sans-serif;
    line-height: 1.5;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* hanging-punctuation: first last; */
}

body {
    min-height: 100vh; /* fallback when svh is not supported */
    min-height: 100svh;

    max-width: 100%;
    overflow-x: clip;
}

header, main, section, article, footer {
    container-type: inline-size;
}

/* Minimal reset for specific tags */
img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

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

p, li, figcaption {
    text-wrap: pretty;
    max-width: 75ch;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
}

ol, ul {
	list-style: none;
}

/* motion */
@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 3rem;
    }
}