/**
 * Font Imports
 */

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_Regular.woff2") format("woff2");
    font-weight: 300 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_RegularItalic.woff2") format("woff2");
    font-weight: 300 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_Semibold.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_SemiboldItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_Bold.woff2") format("woff2");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_BoldItalic.woff2") format("woff2");
    font-weight: 600 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_Black.woff2") format("woff2");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Effra';
    src: url("/webfonts/Effra_BlackItalic.woff2") format("woff2");
    font-weight: 800 900;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 100 200;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Ultralight.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 100 200;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-UltralightItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Light.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-LightItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-RegularItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Medium.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-MediumItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Semibold.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-SemiboldItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Bold.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-BoldItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Heavy.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-HeavyItalic.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-Black.woff2) format("woff2");
}

@font-face {
    font-family: "SFProDisplayWeb";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(/webfonts/SFProDisplayWeb/SF-Pro-Display-Web-BlackItalic.woff2) format("woff2");
}


:root {

    /**
     * Font/UI Scales
     */

    --zero-breakpoint: 0px;
    --phab-breakpoint: 400px;
    --tabp-breakpoint: 540px;
    --tabl-breakpoint: 800px;
    --note-breakpoint: 1152px;
    --desk-breakpoint: 1280px;
    --elas-breakpoint: 1340px;

    --sf-zero-font-size: 4.35vw;
    --sf-phab-font-size: 4vw;
    --sf-tabp-font-size: 1.5vw;
    --sf-tabl-font-size: 1.25vw;
    --sf-note-font-size: 1.15vw;
    --sf-desk-font-size: 1.15vw;
    --sf-elas-font-size: calc(var(--elas-breakpoint) * 0.0115);

    --zero-elastic-width: 100%;
    --phab-elastic-width: var(--zero-elastic-width);
    --tabp-elastic-width: var(--phab-elastic-width);
    --tabl-elastic-width: var(--tabp-elastic-width);
    --note-elastic-width: var(--tabl-elastic-width);
    --desk-elastic-width: var(--note-elastic-width);
    --elas-elastic-width: var(--desk-elastic-width);
    --elastic-width: var(--zero-elastic-width);

    /**
     * Font Assignments
     */

    --font-family-body: "SFProDisplayWeb", -apple-system, "Segoe UI", Helvetica, Calibri, Arial, sans-serif;
    --font-family-mono: Menlo, Consolas, Monaco, monospace;
    --font-family-forms: "SFProDisplayWeb", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /**
     * Establish Base Font Styles
     */

    --font-size: 1rem;
    --line-height: 1.5;
    --font-weight: 400;
    --paragraph-spacing: 1.25rem;

    /**
     * Establish Anchor Styles
     */

    --anchor-font-weight: 500;
    --anchor-underline: none;
    --anchor-hover-underline: underline;

    /**
     * Establish Button Styles
     */

    --button-font-weight: 600;

    /**
     * Establish Heading Styles
     */

    --h1-font-size: 2.75rem;
    --h1-line-height: 1.2;
    --h1-font-weight: 600;
    --h1-margin-top: 2rem;
    --h1-margin-top-first: 0;
    --h1-margin-bottom: 1.5rem;
    --h1-font-family: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --h2-font-size: 2.25rem;
    --h2-line-height: 1.2;
    --h2-font-weight: 600;
    --h2-margin-top: 1.5rem;
    --h2-margin-top-first: 0;
    --h2-margin-bottom: 1.25rem;
    --h2-font-family: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --h3-font-size: 1.5rem;
    --h3-line-height: 1.3;
    --h3-font-weight: 600;
    --h3-margin-top: 1.875rem;
    --h3-margin-top-first: 0;
    --h3-margin-bottom: 1.125rem;
    --h3-font-family: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --h4-font-size: 1.25rem;
    --h4-line-height: 1.35;
    --h4-font-weight: 600;
    --h4-margin-top: 1.55rem;
    --h4-margin-top-first: 0;
    --h4-margin-bottom: 0.95rem;
    --h4-font-family: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --h5-font-size: 1.15rem;
    --h5-line-height: 1.35;
    --h5-font-weight: 600;
    --h5-margin-top: 1.55rem;
    --h5-margin-top-first: 0;
    --h5-margin-bottom: 0.95rem;
    --h5-font-family: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --h6-font-size: 1rem;
    --h6-line-height: 1.5;
    --h6-font-weight: 600;
    --h6-margin-top: 1.55rem;
    --h6-margin-top-first: 0;
    --h6-margin-bottom: 0.95rem;
    --h6-font-family: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

}

/**
 * Establish Default Page Styles
 */

html, body {

    font-family: var(--font-family-body);
    font-weight: var(--font-weight); 
    line-height: 1;
}

body {

    font-size: var(--font-size);
}

html pre, html code {

    font-family: var(--font-family-mono);
}

[sf-form] [sf-metric] label, 
[sf-form] [sf-label] label, 
[sf-form] [sf-textbox] label, 
[sf-form] [sf-listbox] label, 
[sf-form] [sf-filebox] label, 
[sf-form] [sf-radios] label, 
[sf-form] [sf-checkboxes] label, 
[sf-form] [sf-validation-message], 
[sf-form] [sf-metric] > [sf-wrapper] > *, 
[sf-form] [sf-label] > [sf-wrapper] > *, 
[sf-form] [sf-textbox] > [sf-wrapper] input, 
[sf-form] [sf-textbox] > [sf-wrapper] textarea,
[sf-form] [sf-listbox] > [sf-wrapper] input, 
[sf-form] [sf-listbox] > [sf-wrapper] textarea,
[sf-form] [sf-filebox] > [sf-wrapper] input, 
[sf-form] [sf-filebox] > [sf-wrapper] textarea, 
[sf-form] [sf-listbox] > [sf-wrapper] select,
[sf-form] [sf-listbox] > [sf-wrapper] select option,
[sf-form] [sf-listbox] > [sf-wrapper] select optgroup,
[sf-form] [sf-toggle] label, 
[sf-form] [sf-toggle] [sf-toggle-label], 
[sf-form] [sf-toggle] [sf-checkbox-label]
[sf-form] [sf-checkbox] label, 
[sf-form] [sf-checkbox] [sf-toggle-label], 
[sf-form] [sf-checkbox] [sf-checkbox-label] {

    font-family: var(--font-family-forms);
}

html p {

    margin-bottom: var(--paragraph-spacing); 
}

html p:last-child {

    margin-bottom: 0;
}

html p, html a:not([role="button"]), li {

    line-height: var(--line-height);
}

html a:not([role="button"]) {

    font-weight: var(--anchor-font-weight);
    text-decoration: var(--anchor-underline);
}

html a:not([role="button"]):hover {

    text-decoration: var(--anchor-hover-underline);
}

html strong a:not([role="button"]) {

    font-weight: bold;
}

html h1 {

    --font-size: var(--h1-font-size);
    --line-height: var(--h1-line-height);
    --font-family-body: var(--h1-font-family);
    --anchor-font-weight: var(--h1-font-weight);

    font-family: var(--font-family-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--h1-font-weight);
    margin-top: var(--h1-margin-top);
    margin-bottom: var(--h1-margin-bottom);
}

html h1:first-child {

    margin-top: var(--h1-margin-top-first);
}

html h1:last-child {

    margin-bottom: 0;
}

html h2 {

    --font-size: var(--h2-font-size);
    --line-height: var(--h2-line-height);
    --font-family-body: var(--h2-font-family);
    --anchor-font-weight: var(--h2-font-weight);

    font-family: var(--font-family-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--h2-font-weight);
    margin-top: var(--h2-margin-top);
    margin-bottom: var(--h2-margin-bottom);
}

html h2:first-child {

    margin-top: var(--h2-margin-top-first);
}

html h2:last-child {

    margin-bottom: 0;
}

html h3 {

    --font-size: var(--h3-font-size);
    --line-height: var(--h3-line-height);
    --font-family-body: var(--h3-font-family);
    --anchor-font-weight: var(--h3-font-weight);

    font-family: var(--font-family-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--h3-font-weight);
    margin-top: var(--h3-margin-top);
    margin-bottom: var(--h3-margin-bottom);
}

html h3:first-child {

    margin-top: var(--h3-margin-top-first);
}

html h3:last-child {

    margin-bottom: 0;
}

html h4 {

    --font-size: var(--h4-font-size);
    --line-height: var(--h4-line-height);
    --font-family-body: var(--h4-font-family);
    --anchor-font-weight: var(--h4-font-weight);

    font-family: var(--font-family-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--h4-font-weight);
    margin-top: var(--h4-margin-top);
    margin-bottom: var(--h4-margin-bottom);
}

html h4:first-child {

    margin-top: var(--h4-margin-top-first);
}

html h4:last-child {

    margin-bottom: 0;
}

html h5 {

    --font-size: var(--h5-font-size);
    --line-height: var(--h5-line-height);
    --font-family-body: var(--h5-font-family);
    --anchor-font-weight: var(--h5-font-weight);

    font-family: var(--font-family-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--h5-font-weight);
    margin-top: var(--h5-margin-top);
    margin-bottom: var(--h5-margin-bottom);
}

html h5:first-child {

    margin-top: var(--h5-margin-top-first);
}

html h5:last-child {

    margin-bottom: 0;
}

html h6 {

    --font-size: var(--h6-font-size);
    --line-height: var(--h6-line-height);
    --font-family-body: var(--h6-font-family);
    --anchor-font-weight: var(--h6-font-weight);

    font-family: var(--font-family-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--h6-font-weight);
    margin-top: var(--h6-margin-top);
    margin-bottom: var(--h6-margin-bottom);
}

html h6:first-child {

    margin-top: var(--h6-margin-top-first);
}

html h6:last-child {

    margin-bottom: 0;
}