:root {

    --primary-bg:       #F3FAFB;
    --primary-light:    #D5EDF1;
    --primary-mid:      #A2D3DC;
    --primary:          #69b1be;
    --primary-dark:     #3C92A2;

    --secondary-bg:     #EFF7F9;
    --secondary-light:  #AFD6E1;
    --secondary-mid:    #78BED0;
    --secondary:        #1a667a;
    --secondary-dark:   #103E4A;

    --accent-bg:        #FCFBFA;
    --accent-light:     #F1EFE8;
    --accent-mid:       #DFDACA;
    --accent-logo:      #CCC5AC;
    --accent:           #928558;
    --accent-dark:      #5B5337;

    --neutral-bg:       #ECEDED;
    --neutral-light:    #c7c8ca;
    --neutral-mid:      #949598;
    --neutral:          #58595b;
    --neutral-dark:     #3B3B3D;

    --white:            #fff;

    --space-tiny: clamp(0.1875rem, 0.1563rem + 0.1116vw, 0.25rem);  /* 3-4px */
    --space-xs: clamp(0.375rem, 0.3125rem + 0.2232vw, 0.5rem);      /* 6-8px */
    --space-sm: clamp(0.75rem, 0.625rem + 0.4464vw, 1rem);          /* 12-16px */
    --space-base: clamp(1rem, 0.875rem + 0.4464vw, 1.25rem);        /* 16-20px */
    --space-md: clamp(1.25rem, 1.125rem + 0.4464vw, 1.5rem);        /* 20-24px */
    --space-lg: clamp(1.75rem, 1.625rem + 0.4464vw, 2rem);          /* 28-32px */
    --space-xl: clamp(2.25rem, 1.875rem + 1.3393vw, 3rem);          /* 36-48px */
    --space-xxl: clamp(2.625rem, 1.9375rem + 2.4554vw, 4rem);       /* 42-64px */
    --space-huge: clamp(3rem, 1.5rem + 5.3571vw, 6rem);             /* 48-96px */

    /* @link https://utopia.fyi/clamp/calculator?a=448,1344,8 – 12|12 – 16|16 – 20|20 – 24|24 – 30|30 – 40|36 – 54&p=text */
    /* 448px --> 1344px */
    --text-xs:     clamp(0.75rem, 0.6875rem + 0.2232vw, 0.875rem); /* 12-14px */
    --text-sm:     clamp(0.875rem, 0.8125rem + 0.2232vw, 1rem);    /* 14-16px */
    --text-base:   clamp(1rem, 0.9063rem + 0.3348vw, 1.1875rem);   /* 16-19px */
    --text-md:     clamp(1.125rem, 1rem + 0.4464vw, 1.375rem);    /* 18-22px */
    --text-lg:     clamp(1.5rem, 1.3125rem + 0.6696vw, 1.875rem);  /* 24-30px */
    --text-xl:     clamp(1.6875rem, 1.2813rem + 1.4509vw, 2.5rem); /* 27-40px */
    --text-xxl:    clamp(1.875rem, 1.3125rem + 2.0089vw, 3rem);    /* 30-48px */
    
    --max-narrow:   36rem; /* 576px */
    --max-slim:     45rem; /* 720px */
    --max-regular:  60rem; /* 960px */
    --max-wide:     84rem; /* 1344px */

    --shadow-sm:    0 2px var(--space-sm) rgba(91, 83, 55,0.05);
    --shadow-md:    0 2px var(--space-md) rgba(91, 83, 55,0.05);
    --shadow-xxl:   0 var(--space-sm) var(--space-xxl) rgba(91, 83, 55, 0.15);

    --gutter: clamp(1rem, -0.5rem + 5.3571vw, 4rem);    /* 16px->64px */

    --radius-xs:    var(--space-tiny);
    --radius-sm:    var(--space-xs);
    --radius-md:    var(--space-sm);
    --radius-lg:    var(--space-md);
    --radius-xl:    var(--space-lg);

}

/*--------------------------------------------------------------------------- */
/* MARK: FONTS
*/

/* Manrope Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/manrope-var/manrope-var.woff2') format('woff2-variations'),
            url('/assets/fonts/manrope-var/manrope-var.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-display: swap;
        
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.font-primary-200 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 200; }
.font-primary-300 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 300; }
.font-primary-400 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 400; }
.font-primary-500 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 500; }
.font-primary-600, strong { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 600; }
.font-primary-700 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 700; }
.font-primary-800 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 800; }

/* Kaisei Opti 400 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/kaisei-opti/kaisei-opti-400.woff2') format('woff2'), url('/assets/fonts/kaisei-opti/kaisei-opti-400.woff') format('woff'), url('/assets/fonts/kaisei-opti/kaisei-opti-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.font-secondary-400 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 400; }
/* Kaisei Opti 500 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/kaisei-opti/kaisei-opti-500.woff2') format('woff2'), url('/assets/fonts/kaisei-opti/kaisei-opti-500.woff') format('woff'), url('/assets/fonts/kaisei-opti/kaisei-opti-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
.font-secondary-500 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 500; }
/* Kaisei Opti 700 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/kaisei-opti/kaisei-opti-700.woff2') format('woff2'), url('/assets/fonts/kaisei-opti/kaisei-opti-700.woff') format('woff'), url('/assets/fonts/kaisei-opti/kaisei-opti-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
.font-secondary-700 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 700; }


/*--------------------------------------------------------------------------- */
/* MARK: RESET
*/

/* heavily based on https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        scroll-behavior: smooth;
    }
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
p {
    text-wrap: pretty;
}
.none {
    display: none;
}

/*--------------------------------------------------------------------------- */
/* MARK: HTML/BODY
*/

html {
    background-color: var(--accent-bg);
    padding: 0;
}

body {
    /* don't set background-color here, apply to html https://css-tricks.com/html-vs-body-in-css/#aa-quirky-background-color */
    color: var(--neutral-dark);
    font-family: 'font-primary', system-ui, sans-serif;
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*--------------------------------------------------------------------------- */
/* MARK: Site HEADER
*/

.site-header {
    display: flex;
    flex-direction: column;
}

.masthead {
    background-color: white;
    border-bottom: 1px solid var(--accent-light);
    display: grid;
    gap: 0 var(--space-base);
    grid-template-areas:
        "courtesy courtesy"
        "logo nav"
    ;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-xs) var(--gutter);
}

.masthead .logo {
    grid-area: logo;
    align-self: center;
    display: block;
    margin-block: var(--space-tiny);
    width: 12rem;
}

.masthead .courtesy {
    border-bottom: 1px solid var(--accent-light);
    gap: var(--space-xs);
    grid-area: courtesy;
    align-items: center;
    justify-content: center;
    display: grid;
    font-size: var(--text-sm);
    grid-template-columns: repeat(3, auto);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.courtesy a {
    border: 1px solid var(--accent-light);
    color: var(--neutral);
    display: flex;
    gap: var(--space-tiny);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    font-weight: 500;
    height: 100%;
    padding: 1px 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

.courtesy a:hover {
    background-color: var(--accent-light);
    color: var(--secondary);
}

.courtesy .lms-link {
    display: none;
}

.courtesy .label {
    display: none;
}

.courtesy svg {
    display: none;
    width: var(--space-sm);
}

.mobile-nav-toggle {
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    border: 1px solid var(--accent-mid);
    border-radius: var(--radius-xs);
    color: var(--secondary);
    cursor: pointer;
    justify-self: end;
    padding: 0 0 0 1px;
    height: 100%;
    text-align: center;
    width: 4rem;
}
.mobile-nav-toggle > svg {
    display: block;
    margin: 0 auto;
    opacity: 0.8;
}
.mobile-nav-label {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: var(--text-xs);
    text-transform: uppercase;
}

/*--------------------------------------------------------------------------- */
/* MARK: Site Page Title
*/

.page-title {
    background-image: linear-gradient(to top left, var(--accent-light) 50%, var(--accent-bg));
    border-bottom: 1px solid var(--accent-light);
}
    .page-title > .pad {
        max-width: var(--max-wide);
        margin-inline: auto;
        text-align: center;
    }
    .page-title .copy {
        gap: var(--space-xs);
        padding: var(--space-huge) var(--gutter) var(--space-xxl) var(--gutter);
    }
    .page-title .eyebrow {
        color: var(--accent);
        font-weight: 800;
        font-size: var(--text-sm);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-wrap: balance;
    }
    .page-title .eyebrow + * {
        margin-top: var(--space-xs);
    }
    * + .page-title .btns {
        margin-top: var(--space-sm);
    }

    .page-title h1 {
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-inline: auto;
    }
    .template-is-post .page-title h1 {
        font-size: var(--text-xl);
    }
    .page-title .lede {
        font-size: var(--text-md);
        max-width: 48ch;
        margin-inline: auto;
    }
    .page-title .image { 
        background-color: var(--accent-mid);
        height: 100%;
        position: relative;
    }
    .page-title .image .img {
        aspect-ratio: 3/2;
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
    .page-title .video {
        padding: 0 var(--gutter) var(--space-huge);
        width: 100%;
    }      

.page-title .faq-title h1 {
    font-size: var(--text-xl);
}

.page-title .full-bleed {
    background-color: var(--neutral-dark);
    align-items: center;
    color: white;
    display: grid;
    grid-template-areas: "stacked";
    max-width: none;
    min-height: 70vh;
    position: relative;
}
    .page-title .full-bleed > * {
        grid-area: stacked;
        position: relative;
    }
    .page-title .full-bleed .eyebrow {
        color: var(--primary);
    }
    .page-title .full-bleed .lede a {
        color: var(--primary-mid);
    }
    .page-title .full-bleed .image {
        background-color: transparent;
        filter: brightness(0.6) opacity(0.6);
        z-index: 1;
        position: absolute;
        inset: 0;
    }
    .page-title .full-bleed .copy {
        z-index: 2;
    }

.page-title .split {
    align-items: center;
    display: grid;
    max-width: none;
}

/*--------------------------------------------------------------------------- */
/* MARK: Site MAIN
*/

main {
    display: flex;
    flex-direction: column;
}

main > * {
    margin-block: 0;
}

/* -------------------------------------------------------------------------- */
/* MARK: Map Block
*/

.map-wrapper {
    border: 1px solid var(--accent-light);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    min-height: 24rem;
    height: 100%;
}

.map-wrapper > iframe {
    border-radius: var(--radius-md);
    padding: auto;
    left: 0; top: 0; bottom: 0; right: 0;
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------------- */
/* MARK: Video Block
*/

.video-wrapper {
    aspect-ratio: 16/9;
    background-color: white;
    box-shadow: var(--shadow-xxl);
    line-height: 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    width: 100%;
}

.video-wrapper > iframe {
    border: 0;
    outline: 0;
    display: block;
    width: calc(100% + 4px);
    height: auto;
    aspect-ratio: 16/9;
    margin: -2px;
}


/* -------------------------------------------------------------------------- */
/* MARK: Contact Page
*/

.contact-info {
    background-color: var(--primary-dark);
    padding: var(--space-base) var(--gutter);
    text-align: center;
}
.contact-info > ul {
    color: white;
    display: grid;
    font-weight: 600;
    grid-template-columns: repeat(1, 1fr);
    list-style: none;
    max-width: var(--max-regular);
    margin: 0 auto;
    padding: 0;
    font-size: var(--text-md);
}
.contact-info > ul .label {
    display: block;
    font-size: var(--text-base);
}
.contact-info > ul a {
    border-radius: var(--radius-sm);
    display: block;
    color: white;
    text-decoration: none;
    padding: var(--space-sm) 0;
}
.contact-info > ul a:hover {
    background-color: var(--primary);
}

/*--------------------------------------------------------------------------- */
/* MARK: Site FOOTER
*/

.site-footer {
    background: linear-gradient(to bottom, var(--accent-light) 10%, var(--white));
    color: var(--neutral);
    padding: var(--space-xl) var(--gutter) var(--space-base) var(--gutter);
}

.template-is-contact .site-footer {
    background: transparent;
}

.site-footer a {
    color: var(--neutral);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent)
}

.footer-cols {
    display: grid;
    grid-template-areas: 
    "contact"
    "nav1"
    "nav2"
    "nav3"
    "meta"
    "fine"
    ;
    gap: var(--space-lg);
    max-width: var(--max-wide);
    margin-inline: auto;
    width: 100%;
}

.footer-logo {
    display: block;
    max-width: 10.5rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
}

.footer-contact > li {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.footer-contact-label {
    font-size: var(--text-xs);
    font-weight: 600;
}

.footer-col-nav {
    display: grid;
    gap: var(--space-base);
}

.footer-col-nav.nav-1 {
    grid-area: nav1;
}
.footer-col-nav.nav-2 {
    grid-area: nav2;
}
.footer-col-nav.nav-3 {
    grid-area: nav3;
}


.footer-nav-title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm);
    text-transform: uppercase;
    font-weight: 800;
}

.footer-nav-ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-nav-link {
    display: inline-block;
    padding-block: var(--space-xs);
}


.footer-col-contact {
    grid-area: contact;
}

.footer-col-contact-title {
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: start;
}
.footer-col-contact-title a {
    display: flex;
    align-items: center;
}
.footer-col-contact-title a svg {
    stroke: var(--accent);
    display: inline;
    height: var(--space-md);
    width: var(--space-md);
}

.footer-col-social {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tiny);
}

.footer-col-social a {
    border-radius: var(--radius-xs);
    padding: var(--space-tiny);
    text-decoration: none;
}

.footer-col-social a:hover {
    background-color: var(--accent-light);
}

.footer-col-social svg {
    fill: var(--secondary);
    width: var(--space-md);
    height: var(--space-md);
}


.footer-col-meta {
    border-bottom: 1px solid var(--accent-light);
    border-top: 1px solid var(--accent-light);
    display: grid;
    align-items: center;
    gap: var(--space-base);
    grid-area: meta;
    padding: var(--space-base) 0;
}

.footer-col-fineprint {
    font-size: var(--text-xs);
    display: grid;
    row-gap: var(--space-xs);
    grid-area: fine;
}

.footer-col-fineprint a {
    font-weight: 700;
}

.footer-form-title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* MARK: Site FORMS
*/

.form-wrapper {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg) var(--gutter);
}

.form-wrapper > * {
    max-width: var(--max-narrow);
    margin: 0 auto;
    width: 100%;
}

.uniform__potty {
    position: absolute;
    left: -9999px;
}

.uniform-errors {
    background-color: rgb(255, 233, 237);
    border: 1px solid rgb(255, 189, 189);
    font-weight: 600;
    padding: var(--space-base);
    text-align: center;
    font-size: var(--text-sm);
}

.contact-form {
    background-color: white;
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
}

.contact-form .form-row {
    max-width: var(--max-narrow);
}

.rtbform label, .rtbform legend {
    display: block;
    font-weight: 800;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
}
.rtbform label strong {
    font-weight: 800;
    color: var(--primary-dark)
}

.rtbform legend {
    margin-bottom: var(--space-base);
}

.rtbform {
    display: grid;
    gap: var(--space-base);
}

.rtbform fieldset {
    border: 0;
    display: grid;
    gap: var(--space-xs);
    padding: 0;
}

.rtbform .radio-row {
    align-items: center;
    border: 1px solid var(--accent-light);
    border-bottom: 0;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    font-weight: 600;
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-base);
}

.rtbform .form-row .radio-row:last-of-type {
    border-bottom: 1px solid var(--accent-light);
}

.rtbform .radio-row:hover {
    background-color: var(--accent-light);
}

.rtbform .radio-row input {
    margin-right: var(--space-base);
}

.rtbform input:not([type="submit"],[type="radio"],[type="checkbox"]),
.rtbform textarea {
    -webkit-appearance: none;
    accent-color: var(--primary);
    appearance: none;
    background: var(--white);
    border-radius: var(--radius-xs);
    border: 1px solid var(--neutral-light);
    display: block;
    font-family: 'font-primary';
    font-weight: 400;
    font-size: var(--text-base);
    height: auto;
    line-height: 1.5;
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    width: 100%;
    box-shadow: none;
}
.rtbform textarea {
    min-height: var(--space-huge);
}
.rtbform input:is([type="checkbox"], [type="radio"]) {
    accent-color: var(--primary);
}
.rtbform .uniform__captcha {
    max-width: 20rem;
}

.rtbform input::placeholder,
.rtbform textarea::placeholder {
    color: var(--neutral-light);
}

.rtbform input[type="submit"] {
    display: block;
    width: 100%;
}


/*--------------------------------------------------------------------------- */
/* MARK: SEARCH
*/

.search-form {
    display: grid;
    grid-template-columns: 3fr 1fr;
}
.search-form input[type="submit"] {
    max-width: none;
}
.search-results-heading {
    padding-top: var(--space-lg);
}
.search-results {
    display: grid;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
}
.search-result a {
    align-items: center;
    background: white;
    border: 1px solid var(--accent-light);
    border-radius: var(--radius-xs);
    color: var(--neutral-dark);
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
}
.search-result .badge {
    border-radius: var(--radius-md);
    background-color: #FFFDC6;
    color: var(--primary);
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: var(--space-xs);
}
.search-result.focus .badge {
    background-color: #FFF3F3;
    color: #FF7373;
}
.search-result.blog .badge {
    background-color: #EFF2FF;
    color: #748FFC;
}
.search-result.in-person .badge {
    background-color: #f0ffd5;
    color: #8bc52e;
}
.search-result.partners .badge {
    background-color: #fff6d7;
    color: #ddad00;
}
.search-result.hbr-team .badge {
    background-color: #fff3e7;
    color: #FFA94D;
}
.search-result.faqs .badge {
    background-color: #F8E7FD;
    color: #DA77F2;
}
/*--------------------------------------------------------------------------- */
/* MARK: MAILCHIMP
*/

.mailchimp {
    background-color: var(--accent-mid);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-base);
    position: relative;
    max-width: var(--max-wide);
    margin: 0 auto;
}
.mailchimp .intro {
    font-size: var(--text-sm);
    text-align: center;
}
.mailchimp .fields {
    align-items: center;
    display: flex;
    gap: 0;
    position: relative;
    height: 100%;

}
.mailchimp label {
    margin: 0;
    position: absolute;
    left: var(--space-xs);
}
.mailchimp input.email {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 1rem;
    height: 100%;
    padding: var(--space-xs);
    padding-left: calc(var(--space-xxl) + 0.5rem);
}
.mailchimp .btn {
    font-size: var(--text-sm);
    height: 100%;
    padding: 0 var(--space-sm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    width: auto !important;
}

/*--------------------------------------------------------------------------- */
/* MARK: SITE LAYOUT
*/

.row {
    --bg: transparent;
    background-color: var(--bg);
    padding: var(--space-xxl) var(--gutter); /* top/bottom padding (xl) relates to the more/less classes below */
    position: relative;
}

.row.top-pad-none       { padding-top:      0; }
.row.bot-pad-none       { padding-bottom:   0; }
.row.top-pad-less       { padding-top:      var(--space-md); }
.row.bot-pad-less       { padding-bottom:   var(--space-md); }      /* md is half the xl size */
.row.top-pad-more       { padding-top:      var(--space-huge); }    /* huge is twice the xl size */
.row.bot-pad-more       { padding-bottom:   var(--space-huge); }

.row-bg-image {
    filter: opacity(0.7) brightness(0.4) contrast(0.9) saturate(1.2);
    height: 100%;
    left: 0; top: 0; bottom: 0; right: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.row.has-bg-image               { background-color: var(--neutral-dark); color: white; }
.row.has-bg-image a             { color: inherit; }
.row.has-bg-image .column > hr  { background-color: var(--primary); }

.columns {
    display: grid;
    gap: var(--space-base);
    row-gap: var(--space-xl);
    margin-inline: auto;
}

.row > * {
    margin-block: 0;
}

.column {
    /* border: 1px solid powderblue; */
    display: flex;
    gap: var(--space-base);
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.column > * {
    margin-block: 0;
    max-width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Auto-Grid
*/

.auto-grid {
    --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--auto-grid-gap);
    --column-width: max(var(--max-column-width), min(var(--auto-grid-min-size, 10rem), 100%));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
    /* vertical gap falls back to general gap then falls back to 1rem*/
    gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem)) var(--auto-grid-gap, 1rem);
}

.auto-grid-default {
    --auto-grid-min-size: 16rem;
    --auto-grid-max-columns: 3;
    --auto-grid-gap: var(--space-md);
}


/*--------------------------------------------------------------------------- */
/* MARK: Stacked!
*/

.stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stacked > * {
    margin-block: 0;
    width: 100%;
}


/*--------------------------------------------------------------------------- */
/* MARK: Headings
*/

h1, h2, h3, h4, h5, h6 {
    /* font-family: 'font-secondary', 'Times New Roman', Times, serif; */
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }


/*--------------------------------------------------------------------------- */
/* MARK: Paragraphs
*/

p   {

}

.note {
    background-color: var(--accent-light);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    padding: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Lists
*/

ol, ul {
    padding-left: var(--space-lg);
}


/*--------------------------------------------------------------------------- */
/* MARK: Images
*/

figure > figcaption {
    font-size: var(--space-sm);
    font-weight: 600;
    padding: var(--space-sm) 0 0 0;
    text-align: center;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*--------------------------------------------------------------------------- */
/* MARK: Links
*/

a {
    color: var(--secondary);
}
a:hover {
    color: var(--primary);
}

/*--------------------------------------------------------------------------- */
/* MARK: HR
*/

hr {
    border: 0;
    padding: 0;
    height: 1px;
    background-color: var(--neutral-mid);
    width: 100%;
    display: block;
}

/*--------------------------------------------------------------------------- */
/* MARK: Blockquote
*/

blockquote footer {
    margin-top: var(--space-base);
}

blockquote footer::before {
    content: ' — ';
}

/*--------------------------------------------------------------------------- */
/* MARK: Buttons
*/

.btns {
    display: flex;
    gap: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
}

.btn {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-xl);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    padding: calc(var(--space-sm) * 0.8) calc(var(--space-base) * 0.8);
    text-decoration: none;
}
.btn:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}
.btn.outline {
    background-color: transparent;
    border-color: var(--accent-mid);
    color: var(--accent);
}
.btn.outline:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

/*--------------------------------------------------------------------------- */
/* MARK: BLOCKS
*/

.blocks-wrapper {
    padding: var(--space-xl) var(--gutter);
}
.blocks {
    max-width: var(--max-wide);
    margin-inline: auto;
}
.blocks > * {
    margin-inline: auto;
    width: 100%;
    max-width: var(--max-slim);
}

/* add space above these items if ANYTHING preceeds them */
.blocks > * + :is(h2, h3, h4, h5, h6, .image-block, .quote-block) {
    margin-top: var(--space-md);
}
/* add space above items that FOLLOW these blocks */
.blocks > :is(.image-block, .quote-block, .gallery-block) + * {
    margin-top: var(--space-md);
}

/* burst out of the container! */
.blocks > :is(.image-block, .gallery-block) {
    max-width: var(--max-regular);
}

.blocks > :first-child:is(p)::first-letter {
    color: var(--primary);
    font-weight: 700;
    margin-right: 0.25rem;
}

.blocks > .quote-block {
    text-align: center;
    padding-inline: var(--space-base);
}
.blocks > .quote-block::before,
.blocks > .quote-block::after {
    background-color: var(--accent-light);
}


/* DROP CAPS */
/* chrome and safari (prefixed) :) */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
    .blocks > :first-child:is(p)::first-letter {
        -webkit-initial-letter: 2;
        initial-letter: 2;
    }
}
/* firefox doesn't support initial letter :( */
@supports not (initial-letter: 2) {
    .blocks > :first-child:is(p)::first-letter {
        display: block;
        float: left;
        font-size: 325%;
        margin-top: 0.5rem;
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Header Block
*/

.header-block {
    text-align: center;
}
.header-block > * {
    max-width: var(--max-narrow);
    margin-inline: auto;
}
.header-block h2 {
    font-size: var(--text-xl);
}
.header-block .eyebrow {
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.header-block .divider {
    color: var(--accent-mid);
    font-size: var(--text-lg);
    line-height: 1.2;
    padding-bottom: var(--space-sm);
}
.header-block .btns {
    padding-bottom: var(--space-md);
}

/* split header variant of only a heading and button */
.header-block.split {
    margin-bottom: var(--space-sm);
}
.header-block.split > * {
    max-width: none;
    margin-inline: 0;
    width: auto;
}
.header-block.split h2 {
    font-size: var(--text-lg);
}
.header-block.split .btns {
    font-size: var(--text-sm);
    padding-bottom: 0;
}
.header-block.split .btn {
    padding: var(--space-sm);
    text-wrap: nowrap;
}

/* if anything preceeds the header block, add some space above */
* + .header-block {
    margin-top: var(--space-md);
}

/*--------------------------------------------------------------------------- */
/* MARK: Lede Block
*/

.lede-block {
    border-left: var(--space-tiny) solid var(--accent-mid);
    font-size: var(--text-md);
    font-weight: 450;
    margin-left: var(--space-tiny);
    padding-left: var(--space-md);
}

/*--------------------------------------------------------------------------- */
/* MARK: Line Block
*/

.line-block {
    background-color: var(--accent-mid);
}

*  + .line-block,
.line-block + * {
    margin-top: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Rich Lists
*/

.rich-list-wrap {
    container-type: inline-size;
}
.rich-list {
    container-type: inline-size;
    display: grid;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}
@container (min-width: 24rem) {
    .rich-list {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }
    .rich-list .icon {
        margin-inline: auto;
    }
}
.rich-list li {
    align-items: start;
    align-content: start;
    background-color: var(--accent-light);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-sm);
}
.rich-list .text {
    display: grid;
    grid-gap: var(--space-xs);
}
.rich-list .icon {
    height: var(--space-xl);
    width: var(--space-xl);
}
.rich-list .icon > svg {
    stroke: var(--accent);
    stroke-width: 1px;
}

/*--------------------------------------------------------------------------- */
/* MARK: Header Block
*/

/*--------------------------------------------------------------------------- */
/* MARK: Reviews Block
*/

.reviews {
    --auto-grid-max-columns: 2;
}
.review {
    background-color: white;
    border: 1px solid var(--accent-light);
    border-radius: var(--radius-sm);
    color: var(--neutral);
    gap: var(--space-base);
    padding: var(--space-md);
}
.review .stars {
    align-items: center;
    border-bottom: 1px solid var(--accent-light);
    gap: var(--space-xs);
    display: flex;
    padding-bottom: var(--space-sm);        
}
.review .stars svg {
    fill: gold;
}
.review .copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.review .author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}
.review .author svg {
    height: var(--space-xl);
    width: var(--space-xl);
    fill: var(--accent-light);
}
.review .author .avatar {
    background-color: var(--accent-mid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space-xl);
    width: var(--space-xl);
}
.random-reviews .btns {
    margin-top: var(--space-md);
    justify-content: center;
}

/*--------------------------------------------------------------------------- */
/* MARK: FAQs Block
*/

.accordions {
    display: grid;
    gap: var(--space-xs);
}

.faqs {
    --auto-grid-max-columns: 2;
    display: grid;
    gap: var(--space-xs);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq {
    background-color: var(--accent-bg);
    border: 1px solid var(--accent-mid);
    border-radius: var(--radius-xs);
    width: 100%;
}

.faq-question {
    cursor: pointer;
    display: block;
    font-weight: 600;
    list-style: none;
    padding: var(--space-base);
    padding-left: var(--space-xl);
    position: relative;
}

.faq-question::before,
.faq-question::after {
    content: '';
    background-color: var(--primary);
    left: var(--space-sm);
    line-height: 1;
    position: absolute;
    width: var(--space-base);
    height: 2px;
    text-align: center;
    top: var(--space-lg);
    transition: transform 0.2s ease-in-out;
}

.faq[open=""] {
    background-color: white;
}
.faq[open=""] .faq-question::before {
    transform: rotate(90deg);
}

.faq-answer {
    border-top: 1px dashed var(--accent-mid);
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    padding: var(--space-md);
}

.faq-answer > * {
    margin: 0;
}

/*--------------------------------------------------------------------------- */
/* MARK: Contributors Block
*/

.contributors {
    list-style: none;
    row-gap: var(--space-xl);
    padding: 0;
    text-align: center;
}
.contributors .avatar {
    border-radius: var(--radius-sm);
    display: block;
    margin-inline: auto;
    margin-bottom: var(--space-sm);
}


/*--------------------------------------------------------------------------- */
/* MARK: Portal Block
*/

.portal {
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
}
.portal > .item {
        background-color: white;
        border: 1px solid var(--accent-light);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        height: 100%;
        justify-content: start;
        padding: var(--space-md);
        text-decoration: none;
}
.portal > .item > * {
    margin-block: 0;
}
.portal > .item .btns {
    margin-top: auto;
    padding-top: var(--space-sm);
}
.portal > .item .img {
    background-color: var(--accent-light);
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-xs);
    width: 100%;
}

.portal:not(.portal-type-bios) > .item .img {
    aspect-ratio: 3/2;
    object-fit: cover;
}

.portal > .item .title {
    color: var(--neutral-dark);
}
.portal > .item .lede {
    color: var(--neutral-dark);
}

.portal.count-is-2 > .item .title {
    font-size: var(--text-lg);
}

.portal.portal-type-blog {
    --auto-grid-max-columns: 2;
    --auto-grid-min-size: 12rem;
}
.portal.portal-type-blog > .item {
    align-items: end;
    display: grid;
    gap: 0;
    grid-template-areas:
        "stack"
    ;
    min-height: 18rem;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.portal.portal-type-blog > .item > * {
    grid-area: stack;
}
.portal.portal-type-blog > .item .img {
    aspect-ratio: 4/3;
    border-radius: 0;
    height: 100%;
    margin-bottom: 0;
    object-fit: cover;
    width: 100%;
}

.portal.portal-type-blog > .item::after {
    content: '';
    left: 0; right: 0; bottom: 0; top: 0;
    position: absolute;
    transition: background-color 0.3s ease-in-out;
    z-index: 1;
    background-image: linear-gradient(to top, #3B3B3D, #3B3B3DAA 75%, rgba(0,0,0,0));
}

.portal.portal-type-blog > .item .title {
    color: white;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xxl);
    padding: var(--space-md);
    position: relative;
    width: 100%;
    z-index: 2;
}
.portal.portal-type-blog > .item .title a {
    color: white;
    text-decoration: none;
}

.portal.portal-type-blog > .item .btns {
    font-size: var(--text-sm);
}

.portal.portal-type-blog > .item .btn {
    background-color: transparent;
    border-color: transparent;
    border-radius: var(--radius-sm);
    margin: var(--space-xs);
    padding-inline: var(--space-sm);
    z-index: 2;
    width: 100%;
}
.portal.portal-type-blog > .item .btn:hover {
    background-color: rgba(255,255,255,0.25);
}

.portal.portal-type-programs {
    --auto-grid-max-columns: 1;
    --auto-grid-min-size: 12rem;
    text-align: center;
}

.portal.portal-type-programs > .item .title {
    font-size: var(--text-lg);
    font-weight: 600;
}

.portal.portal-type-programs > .item .btns {
    display: flex;
    justify-content: center;
}

.portal.portal-type-programs > .item .icon {
    display: flex;
    justify-content: center;
}

.portal.portal-type-programs > .item .icon svg {
    background-color: var(--accent-light);
    border-radius: var(--radius-md);
    height: var(--space-huge);
    padding: var(--space-xs);
    stroke: var(--accent);
    stroke-width: 1px;
    width: var(--space-huge);
}

/*--------------------------------------------------------------------------- */
/* MARK: Blurbs Block
*/

.blurbs-block {
    --auto-grid-max-columns: 4;
    --auto-grid-gap: var(--space-md);
}
.blurbs-block .blurb {
    gap: var(--space-xs);
    border-left: 2px solid var(--accent-mid);
    border-bottom: 2px solid var(--accent-mid);
    border-bottom-left-radius: var(--radius-sm);
    padding-left: var(--space-sm);
    padding-bottom: var(--space-sm);
}
.blurbs-block .blurb .heading {
    font-size: var(--text-base);
}
.blurbs-block .blurb .text {
    font-size: var(--text-sm);
}

/*--------------------------------------------------------------------------- */
/* MARK: Callout Block
*/

.callout {
    background-color: white;
    border: 1px solid var(--accent-light);
    border-left: var(--space-tiny) solid var(--primary);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding: var(--space-sm);
}

/*--------------------------------------------------------------------------- */
/* MARK: Paths Block
*/

.paths-block .path {
    background-color: white;
    border: 1px solid var(--accent-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: var(--space-xs);
    align-content: start;
    justify-content: start;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}
.paths-block .path > .eyebrow {
    color: var(--accent);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.paths-block .path > h2 {
    font-size: var(--text-xl);
}
.paths-block .path .lede {
    margin-block: var(--space-xs);
}
.paths-block .path .icon {
    text-align: center;
}
.paths-block .path .icon svg {
    background-color: var(--primary-light);
    border-radius: 50%;
    display: inline-block;
    padding: var(--space-xs);
    height: var(--space-xxl);
    width: var(--space-xxl);
}
.paths-block .path .faq {
    margin-block: var(--space-sm);
    text-align: left;
}
.paths-block .path .faq-answer {
    padding: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Quote Block
*/

.quote-block {
    padding-block: var(--space-xl);
    position: relative;
}
.quote-block::before,.quote-block::after {
    position: absolute;
    left: 25%; top: 0; right: 25%;
    height: var(--space-xs);
    background-color: var(--primary);
    content: '';
}
.quote-block::after {
    top: auto; bottom: 0;
}
.quote-block .quote {
    font-weight: 500;
    font-size: var(--text-md);
}

/*--------------------------------------------------------------------------- */
/* MARK: CTA Block
*/

.cta-block {
    align-items: center;
    background-color: var(--secondary);
    background-image: linear-gradient(to bottom left, var(--secondary), var(--secondary-dark));
    border: 1px solid var(--secondary-mid);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xxl);
    color: white;
    display: grid;
    overflow: hidden;
    padding: var(--space-xxl) var(--space-base);
    position: relative;
    text-align: center;
    width: 100%;
}
.cta-block .eyebrow {
    color: var(--primary-mid);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cta-block .cta-copy {
    gap: var(--space-sm);
    position: relative;
    z-index: 2;
}
.cta-block .cta-copy h2 {
    font-size: var(--text-lg);
}
.cta-block .cta-copy .text {
    font-weight: 500;
    margin-inline: auto;
    max-width: 60ch;
}
.cta-block img {
    position: absolute;
    width: 200%;
    max-width: none;
    left: 50%; top: 50%;
    margin-left: -100%;
    margin-top: -50%;
    opacity: 0.1;
    z-index: 1;
}
.cta-block .btns {
    gap: var(--space-sm) var(--space-xs);
    justify-content: center;
    margin-top: var(--space-base);
}

.cta-block .btns > :first-child {
    background-color: white;
    border-color: white;
    color: var(--secondary);
    display: block;
    width: 100%;
    margin: 0 auto;
}
.cta-block .btns > :first-child:hover {
    background-color: var(--secondary-mid);
    border-color: var(--secondary-mid);
    color: white;
}
.cta-block .btns .outline {
    align-items: center;
    background-color: transparent;
    border-color: var(--secondary);
    color: white;
    font-size: var(--text-sm);
    display: flex;
}
.cta-block .btns .outline:hover {
    background-color: var(--secondary-mid);
    border-color: var(--secondary-mid);
}

/*--------------------------------------------------------------------------- */
/* MARK: FOOTER CTA
*/

/* variation of the CTA block itself! */
.footer-cta {
    background-image: linear-gradient(to bottom, var(--accent-bg) 50%, var(--accent-light));
    padding: var(--space-xxl) var(--gutter);
}
.footer-cta .cta-block {
    background: white;
    border-color: var(--accent-light);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--neutral-dark);
    max-width: var(--max-wide);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}
.footer-cta .cta-block .eyebrow {
    color: var(--accent);
}
.footer-cta .cta-block .text {
    font-weight: 400;
}
.footer-cta .cta-block .btns > :first-child {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.footer-cta .cta-block .btns > :first-child:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.footer-cta .cta-block .btns .outline {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: var(--accent-light);
    color: var(--accent);
}
.footer-cta .cta-block .btns .outline:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

/*--------------------------------------------------------------------------- */
/* MARK: Quick Links Block
*/

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.quick-links .link {
    background-color: white;
    border: 1px solid var(--accent-light);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm);
    padding-right: var(--space-xs);
    display: flex;
    border-radius: var(--radius-xl);
    align-items: center;
    line-height: 1.2;
    gap: var(--space-xs);
    text-decoration: none;
}
.quick-links .link .icon svg {
    stroke: var(--secondary-mid);
    width: var(--space-md);
    height: var(--space-md);
}
.quick-links .link .chevron svg {
    stroke: var(--neutral-light);
}
.quick-links .link:hover {
    background-color: var(--secondary-bg);
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}
.quick-links .link:hover svg {
    stroke: var(--primary-dark);
}

/*--------------------------------------------------------------------------- */
/* MARK: Image Block
*/

.image-block .image {
    aspect-ratio: var(--ratio);
    border-radius: var(--radius-sm);
    height: 100%;
    filter: saturate(1.1) brightness(1.1);
    object-fit: cover;
    position: relative;
    width: 100%;
}

.image-block figcaption {

}

/*--------------------------------------------------------------------------- */
/* MARK: Bio Pages
*/

.bio .columns {
    row-gap: var(--space-xl);
}
.bio .biography .links {
    background-color: white;
    border: 1px solid var(--accent-light);
    border-radius: var(--space-xs);
    display: flex;
    line-height: 1;
    list-style: none;
    margin-top: var(--space-md);
    padding: var(--space-xs);
}
.bio .biography .links a {
    align-items: center;
    display: flex;
    font-size: var(--text-sm);
    gap: var(--space-xs);
}
.bio .biography .links svg {
    height: var(--space-xl);
    width: var(--space-xl);
}

.bio .portrait .image-block .image {
    max-width: 15rem;
    margin-inline: auto;
}

/*--------------------------------------------------------------------------- */
/* MARK: Paging
*/

.basic-paging {
    margin-top: var(--space-base);
    padding: 0 var(--gutter);
}

.basic-paging-list {
    display: grid;
    gap: var(--space-xs) var(--space-base);
    list-style: none;
    margin-inline: auto;
    max-width: var(--max-regular);
    padding: 0;
    text-align: center;
}
.basic-paging-next {
}
.basic-paging a {
    background-color: var(--accent-light);
    border-radius: var(--radius-md);
    display: block;
    height: 100%;
    font-size: var(--text-sm);
    padding: var(--space-base);
    text-decoration: none;

}
.basic-paging .arrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}
.basic-paging .label {
    color: var(--neutral-dark);
    display: block;
}

/*--------------------------------------------------------------------------- */
/* MARK: Utility Classes
*/

.trim > :first-child    { margin-top: 0; }
.trim > :last-child     { margin-bottom: 0; }

.screen-reader-text     { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

.text-left                      { text-align: left; }
.text-right                     { text-align: right; }
.text-center                    { text-align: center; }

.text-xxl                       { font-size: var(--text-xxl); }
.text-xl                        { font-size: var(--text-xl); }
.text-lg                        { font-size: var(--text-lg); }
.text-md                        { font-size: var(--text-md); }
.text-base                      { font-size: var(--text-base); }
.text-sm                        { font-size: var(--text-sm); }

.list-none                      { list-style: none; padding-left: 0; }

.justify-content-start          { justify-content: start; }
.justify-content-center         { justify-content: center; }
.justify-content-end            { justify-content: end; }

.justify-items-start            { justify-items: start; }
.justify-items-center           { justify-items: center; }
.justify-items-end              { justify-items: end; }

.align-items-center             { align-items: center; }
.align-items-end                { align-items: end; }
.align-items-start              { align-items: start; }

.max-none                       { max-width: none; }
.max-narrow                     { max-width: var(--max-narrow); }
.max-slim                       { max-width: var(--max-slim); }
.max-regular                    { max-width: var(--max-regular); }
.max-wide                       { max-width: var(--max-wide); }

#top-link	{
	background-color: var(--primary);
    border: 1px solid var(--accent-bg);
	border-radius: 50%;
	bottom: var(--space-sm);
	color: #fff;
	display: none;
	height: 42px;
	line-height: 1 !important;
	padding: 10px;
	position: fixed;
	right: var(--space-sm);
	text-decoration: none;
	width: 42px;
	z-index: 100;
}

#top-link:hover	{
    background-color: var(--secondary);
    border-color: var(--secondary)
}