/* ---- CSS Core Styling ---- */


/* Custom Properties */

:root {
    --color-dark: #000000;
    --color-light: #ffffff;
    --color-primary: #ff8000;

    --l_center__measure: 70ch;
    --l_cover__size: 90vh;

    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

/* global font, color and vertical rythmn */

body {
    background: var(--color-light);
    color: var(--color-dark);
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--step-0);
    line-height: 1.5;
    text-wrap: pretty;
}

h1,
h2,
h3 {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.1;
    text-wrap: balance;
    hyphens: auto;
}

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

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

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

/*:is(h1, h2, h3, blockquote) {
    --l_flow__space: 1.25em;
}

:is(h1, h2, h3)+* {
    --l_flow__space: 0.5em;
}*/

ul,
ol {
    padding-inline-start: 1em;
}

blockquote {
    padding-inline-start: 1em;
    border-inline-start: 0.3em solid;
    font-style: italic;
    font-size: var(--step-1);
}

a {
    color: currentColor;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 0.2ex;
    text-underline-offset: 0.2ex;
}

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

h1 {
    text-align: center;
    text-wrap: wrap;
}