/* ----------------------------------------------------------------------------------------

    Document Outline

    [ ] DEFAULT
    [1] FONTS
    [2] SCALE & RHYTHM

------------------------------------------------------------------------------------------- */

/* [ ] DEFAULTS ------------------------------------------------------------------------- */

html { font-size: 62.5%; }

body {

    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
    -webkit-font-smoothing: antialiased;

    font-size: 1.4rem;
    line-height: 1.6;

}

/* [2] TYPOGRAPHY : SCALE & RHYTHM --------------------------------------------------------

Base:

    Line-height:

Scale:

    Ratio: 1.x

    1em/1em
    1em/1em
    1em/1em
    1em/1em
    1em/1em

------------------------------------------------------------------------------------------- */

h1, .h1, .format-h1,
h2, .h2, .format-h2,
h3, .h3, .format-h3,
h4, .h4, .format-h4,
h5, .h5, .format-h5,
h6, .h6, .format-h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 400;
}

h1, .h1, .format-h1 { font-size: 2.2rem; line-height: 1.150; font-weight: bold; }
h2, .h2, .format-h2 { font-size: 1.8rem; line-height: 1.140;  }
h3, .h3, .format-h3 { font-size: 1.7rem; line-height: 1.130;  }
h4, .h4, .format-h4 { font-size: 1.6rem; line-height: 1.120; }
h5, .h5, .format-h5 { font-size: 1.7rem; line-height: 1.110;  }
h6, .h6, .format-h6 { font-size: 1.5rem; line-height: 1.1;  }
    .h7, .format-h7 { }

.article--product p,
.article--product blockquote { font-size: 1.7rem; }

.article--product { line-height: 1.75 }

@media (min-width: 600px) {
    h1, .h1, .format-h1 { font-size: 2.2rem; line-height: 1.4; }
    h2, .h2, .format-h2 { font-size: 1.8rem; }
    h3, .h3, .format-h3 { font-size: 2.6rem; }
    h4, .h4, .format-h4 { font-size: 2.0rem; }
    h5, .h5, .format-h5 { font-size: 1.7rem; }
    h6, .h6, .format-h6 { font-size: 1rem; }

    .article--product p,
    .article--product blockquote { font-size: 1.7rem; }

    .article--product { line-height: 1.58 }
}

.headline { }
.headline--bordered { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 28px; }

/*
    FONTS

-------------------------------------------------------- */

h1, h2, h3, h4,
.collection-prefix,
.login-form-wrap,
.btn {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;;
}

h1, h2, h3, h4,
.collection-prefix {
    font-weight: 700;
}

/* [3] FONT-HELPERS --------------------------------------------------------


/* Alive */

.font-georgia  { font-family: 'Georgia', serif; }
.font-blink    { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }

/* Generic */

.font-sans      { font-family: sans-serif; }
.font-inherit   { font-family: inherit; }

/* ~ */

.text-bold      { font-weight: bold; }
.normalize-style { font-style: normal; }

.font-antialiased      { -webkit-font-smoothing: antialiased; }
.font-antialiased-auto { -webkit-font-smoothing: auto; }



.font-xs { font-size: 9px; }
.font-sm { font-size: 12px; }
.font-md { font-size: 1rem; }


.kern-normal  { letter-spacing: 0; }
.kern-tighten { letter-spacing: -0.05em; }
.kern-wider   { }

u { border-bottom: 1px solid #000; text-decoration: none; }

.para-emphasize-initial { min-height: 4em; } /* ensure the para has a min-height, so that following content doesn't get hidden  */
.para-emphasize-initial::first-letter { padding-left: 0px; font-weight: bold; padding-top: 6px; font-size: 8.5rem; display: inline-block; float: left; line-height: 7rem; padding-right: 13px; text-transform: uppercase; }
