@import url("../assets/fonts/Helvetica Neue LT Std/font.css");

:root {

    /* ********************************* *
     * *      P A G E  W I D T H       * *
     * ********************************* */

    --nil-width               : 0;
    --min-width               : 280px;
    --sml-width               : 576px;
    --mid-width               : 768px;
    --lrg-width               : 880px;
    --xlr-width               : 992px;
    --std-width               : 1200px;
    --wid-width               : 1440px;
    --max-width               : 2000px;
 
    /* ********************************* *
     * *         F O N T S             * *
     * ********************************* */

    --fs-300                  : clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400                  : clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500                  : clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600                  : clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700                  : clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800                  : clamp(2.33rem, calc(1.70rem + 3.15vw), 4.14rem);
    --fs-900                  : clamp(2.80rem, calc(1.85rem + 4.74vw), 5.52rem);
 
    --fs-regular              : 1.3rem;
    --fw-regular              : 400; 
    --fw-bold                 : 600;

    --ff-code                 : monospace;
    --ff-regular              : var(--font-family-HelveticaNeue);
    --ff-condensed            : var(--font-family-HelveticaNeue-Cond);
    --ff-base                 : var(--ff-regular);
    --ff-heading              : var(--ff-regular);

    --lh-base                 : 1.6;
    --lh-heading              : 1.1;

    --text-max-width          : 120ch;
}
  
@layer reset, layout;

@layer reset {
    /* ********************************************************************************** */
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css -- minified */
    /* ********************************************************************************** */
    /*                                                                                    */
    *,*.before,*.after {
        box-sizing:border-box;
        /* DEBUGGING BITS */
        /* 
            outline: 2px solid #32cd32; 
            background-color: #32cd321f; 
        */
    }

    html {line-height:1.15;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;
        font-family:var(--ff-base);color-scheme:light dark;interpolate-size:allow-keywords;}
    body {margin:0;width:100%;height:100%;min-height:100svh;line-height:var(--lh-base);}
    main {display:block;}
    h1,h2,h3,h4,h5,h6 {text-wrap:balance;font-family:var(--ff-heading);line-height:var(--lh-heading);margin-block-end:0;}
    p,figure,blockquote,dl,dd {margin-block-end:0;}
    hr {box-sizing:content-box;height:0;overflow:visible;}
    pre {font-family:monospace,monospace;font-size:1em;}
    a {background-color:transparent;}
    abbr[title] {border-bottom:none;text-decoration:underline;}
    b,strong {font-weight:bolder;}
    code,kbd,samp {font-family:var(--ff-code);}
    small {font-size:80%;}
    sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
    sub {bottom:-0.25em;}
    sup {top:-0.5em;}
    img,picture {border-style:none;display:block;width:100%;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;}
    button,input,label {line-height:var(--lh-heading);}
    button,input,optgroup,select,textarea {font-family:inherit;font-size:inherit;line-height:1.15;margin:0;}
    button,input {overflow:visible;}
    button,select {text-transform:none;}
    button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}
    button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}
    button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
    fieldset {padding:0.35em 0.75em 0.625em;}
    legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
    progress {vertical-align:baseline;}
    textarea {overflow:auto;}
    textarea:not([rows]){min-height:10em;}
    [type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}
    [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}
    [type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}
    [type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
    ::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}
    details {display:block;}
    summary {display:list-item;}
    template {display:none;}
    [hidden] {display:none;}
    /*                                                                                    */
    /* ********************************************************************************** */
    /* some additions (thanks Kevin Powell et al)                                         */
    /* ********************************************************************************** */
    /*                                                                                    */
    :is(ul, ol)[class] {list-style:"";margin:0;padding:0;}
    p,li,figcaption {max-width:var(--text-max-width);text-wrap:pretty;}
    :first-child {margin-block-start:0;}
    td,math,time[datetime*=":"] {font-variant-numeric: tabular-nums lining-nums;}
    table {border-collapse:collapse;}
    :target {scroll-margin-block:32px;scroll-margin-block:5rlh;}
    @media(prefers-reduced-motion:no-preference) {html{scroll-behavior:smooth;}}
    /*                                                                                    */
    /* * {overscroll-behavior: contain;}                                                  */
    /* ********************************************************************************** */
}

@layer layout {    

    html {
        font                     : var(--fw-regular) 0.825em/var(--lh-base) var(--ff-regular);
    }

    body {
        color                    : var(--site__color-dark);
        background-color         : var(--site__color-null);
        min-width                : var(--min-width);
        margin                   : 0 auto;
        font-size                : 1.2rem;
    }

    .mp-page {
        background-color         : var(--site__color-page);
        margin                   : 0 auto;
        max-width                : var(--std-width);
        /* set to 100% in case the height is greater than min-height */
        height                   : 100%;
        min-height               : 100svh;
 
        display                  : grid;
    }

    h1, h2, h3, h4, h5, h6 {
        color              : var(--site__color-dark);
        text-align         : center;
        margin             : 0;
    }

    h1 {
        font-size          : var(--fs-700);
        font-weight        : var(--fw-bold);
        margin             : 0.5rem auto 0 auto;
    }

    h2 { font-size         : var(--fs-600); }
    h3 { font-size         : var(--fs-500); }
    h4 { font-size         : var(--fs-400); }
    h5 { font-size         : var(--fs-300); }
    h6 { font-size         : var(--fs-300); }

}