@charset "utf-8";


/* === { RESET } === */

*,
*::after,
*::before {
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-variation-settings: inherit;
    line-height: 100%;
    margin: 0;
    padding: 0;
}

*:focus-visible {
    outline: 2px solid var(--color_primary);
    outline-offset: 2px;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
}


/* === { FONTS } === */

@font-face {
    font-display: swap;
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/instrument-sans_regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Instrument Sans";
    font-style: italic;
    font-weight: 100 900;
    src: url("../fonts/instrument-sans_italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/instrument-serif_regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/instrument-serif_italic.woff2") format("woff2");
}


/* === { VARIABLES } === */

:root {
    --color_primary: hsl(0 0 0);
    --color_secondary: hsl(0 0 100);
    --color_tertiary: hsl(240 100 50);
    --color_quaternary: hsl(0 100 50);
}


/* === { TYPOGRAPHY } === */

html {
    font-size: 125%;
}

body {
    font-family: "Instrument Sans", sans-serif;
    font-variation-settings: "wdth" 75;
}

main {
    text-wrap: balance;
}

main[data-variant="secondary"] {
    text-align: justify;
    text-wrap: wrap;
}


/* --- { HEADINGS } --- */

:where(h1, h2, h3) {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    line-height: 125%;
}

:where(h1, h2, h3):not(:first-child) {
    margin-block-start: 1lh;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.50rem;
}

h3 {
    font-size: 1.25rem;
}


/* --- { COPY } --- */

p {
    line-height: 150%;
}

b,
strong {
    font-weight: 600;
}

ul li {
    line-height: 150%;
    list-style-type: none;
    list-style-position: inside;
}

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

ul[data-variant="secondary"] {
    display: flex;
    gap: 1rem;
}

ul[data-variant="secondary"] li a {
    text-decoration: none;
}


/* --- { LINKS } --- */

a:where(:link, :visited) {
    color: inherit;
    text-decoration-thickness: 1px;
}

a:where(:hover, :active) {
    text-decoration-style: dotted;
}


/* --- { MISC } --- */

[title] {
    cursor: help;
    text-decoration: dotted underline 1px;
}

address {
    font-style: normal;
}