:root {

    --ratio: auto;

    --primary-bg:       #F0F5F0;
    --primary-light:    #E2E9E3;
    --primary-mid:      #9AAE37;
    --primary:          #72A000;
    --primary-dark:     #435C00;

    --secondary-bg:     #FAF5F0;
    --secondary-light:  #EDE6E2;
    --secondary-bdr:    #d9cbc2;
    --secondary-mid:    #9A7935;
    --secondary:        #725212;
    --secondary-dark:   #463106;

    --accent-bg:        #fff4eb;
    --accent-light:     #ffd3ad;
    --accent-mid:       #FF933A;
    --accent:           #ff9233;
    --accent-dark:      #DD6700;

    --neutral-bg:       #f6f5f4;
    --neutral-light:    #dedbd8;
    --neutral-mid:      #81796F;
    --neutral:          #504A43;
    --neutral-dark:     #2E2A25;

    --white:            #fff;

    --space-tiny:   0.25rem;   /*  4px */
    --space-xs:     0.5rem;    /*  8px */
    --space-sm:     1.0rem;    /* 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.5rem, 1.25rem + 0.8929vw, 2rem);        /* 24-32px */
    --space-xl:     clamp(2.5rem, 2.25rem + 0.8929vw, 3rem);        /* 40-48px */
    --space-xxl:    clamp(3rem, 2.5rem + 1.7857vw, 4rem);           /* 48-64px */
    --space-huge:   clamp(4rem, 3rem + 3.5714vw, 6rem);             /* 64-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.5rem, 0.375rem + 0.4464vw, 0.75rem);         /*  8-12px */
    --text-sm:     clamp(0.9375rem, 0.875rem + 0.2232vw, 1.0625rem);    /* 15-17px */
    --text-base:   clamp(1.0625rem, 1rem + 0.2232vw, 1.1875rem);        /* 17-19px */
    --text-md:     clamp(1.25rem, 1.1563rem + 0.3348vw, 1.4375rem);     /* 20-23px */
    --text-lg:     clamp(1.5rem, 1.375rem + 0.4464vw, 1.75rem);         /* 24-28px */
    --text-xl:     clamp(1.75rem, 1.4375rem + 1.1161vw, 2.375rem);      /* 28-38px */
    --text-xxl:    clamp(2.25rem, 1.75rem + 1.7857vw, 3.25rem);         /* 36-52px */

    
    --max-narrow:   45rem; /* 720px */
    --max-content:  60rem; /* 960px */
    --max-wide:     84rem; /* 1344px */

    --shadow-sm: 0 var(--space-xs) var(--space-sm) rgba(0,0,0,0.06);
    --shadow-md: 0 var(--space-sm) var(--space-md) rgba(0,0,0,0.06);

    --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
*/

/* Red Hat Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/red-hat-var/red-hat-var.woff2') format('woff2-variations'),
            url('/assets/fonts/red-hat-var/red-hat-var.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-display: swap;
        
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.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 { 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; }

/* Red Hat Var Italic */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/red-hat-var/red-hat-var-italic.woff2') format('woff2-variations'),
            url('/assets/fonts/red-hat-var/red-hat-var-italic.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-display: swap;
    font-style: italic; 
}
.font-primary-i { font-family: 'font-primary', sans-serif; font-style: italic; }
.font-primary-300i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 300; font-style: italic; }
.font-primary-400i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 400; font-style: italic; }
.font-primary-500i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 500; font-style: italic; }
.font-primary-600i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 600; font-style: italic; }
.font-primary-700i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 700; font-style: italic; }


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

/*--------------------------------------------------------------------------- */
/* 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 {
    aspect-ratio: var(--ratio);
    display: block;
    height: auto;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
p {
    text-wrap: pretty;
}
.none {
    display: none;
}


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

html {
    background-color: var(--secondary-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', Georgia, 'Times New Roman', Times, serif;
    font-size: var(--text-base);
    font-weight: 425;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

strong {
    font-weight: 650;
}

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

.site-header {
    background-color: var(--neutral-dark);
    display: grid;
    gap: var(--space-base);
    grid-template-areas: 
    "logo"
    "menu"
    "pagetitle"
    ;
    position: relative;
    z-index: 2;
}
.site-header > * {
    position: relative;
    z-index: 5;
}
.site-header::after {
    content: '';
    position: absolute;
    left: 0; bottom: var(--space-xs); right: 0;
    height: 1px;
    background-color: var(--secondary-mid);
    opacity: 0.8;
    z-index: 1;
}
.site-logo {
    align-items: center;
    justify-content: center;
    color: var(--white);
    gap: var(--space-xs) var(--text-sm);
    display: grid;
    grid-area: logo;
    grid-template-areas:
    "icon horsepower"
    "icon slogan"
    ;
    font-weight: 400;
    line-height: 1;
    margin: var(--space-base) auto 0 auto;
    max-width: fit-content;
    text-decoration: none;
}
.site-logo .horsepower {
    align-self: flex-end;
    grid-area: horsepower;
    font-family: 'font-secondary';
    font-size: var(--text-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 800;
}
.site-logo .slogan {
    align-self: flex-start;
    grid-area: slogan;
    font-weight: 400;
    font-size: var(--text-sm);
    letter-spacing: -0.04em;
}
.site-logo .slogan span {
    display: inline-block;
}
.site-logo .slogan span::first-letter {
    color: var(--accent);
    font-weight: 650;
}
.site-logo svg {
    grid-area: icon;
    width: calc( 2 * var(--text-xxl) );
}
.site-logo:hover {
    color: var(--accent);
}

/*--------------------------------------------------------------------------- */
/* MARK: Navigation
*/

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-base);
    justify-content: center;
    list-style: none;
    padding: 0;
}

/*--------------------------------------------------------------------------- */
/* MARK: Mobile Nav
*/

.mobile-nav-toggle {
    -webkit-appearance: none;
    align-items: center;
    appearance: none;
    background-color: var(--accent-dark);
    background-image: linear-gradient(to bottom right, var(--accent-mid), var(--accent-dark));
    border: 0;
    border-radius: var(--radius-xs);
    color: white;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    grid-area: menu;
    height: 100%;
    justify-content: space-between;
    margin: 0 var(--gutter);
    padding: var(--space-sm);
    text-align: center;
}

.mobile-nav-toggle > svg {
    display: block;
}

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

.page-title {
    --min-header-height: 8rem;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    z-index: 1;
    width: 100%;
}
.page-title .kicker {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}
.page-title::before, .page-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(0deg, rgba(45, 23, 0, 0) 60%, rgba(45, 23, 0, 0.2) 85%, rgba(45, 23, 0, 0.5));
    z-index: 2;
}
.page-title::after {
    background-image: linear-gradient(2000deg,  rgba(45, 23, 0, 0) 50%, rgba(45, 23, 0, 0.3) 60%, rgba(45, 23, 0, 0.8) 85%);
}
/* the actual image element */
.page-title .img {
    border-radius: 0;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.5) contrast(0.5);
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 1;
}
.page-title.homepage .img {
    object-position: 15% center;
    transform: scaleX(-1);
}
.page-title .col {
    padding: calc( var(--space-huge) * 4 ) var(--gutter) var(--space-huge) var(--gutter);
}
.page-title .copy {
    color: white;
    max-width: var(--max-wide);
    margin-inline: auto;
    position: relative;
    z-index: 3;
}
.page-title .h1 {
    line-height: 1.1;
}
.page-title .lede {
    font-size: var(--text-md);
}
.page-title a {
    color: white;
}
.page-title .post-meta {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 700;
}

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

main {
    background-image: linear-gradient(to top, var(--secondary-bg), var(--secondary-light));
    background-size: 30rem;
    display: flex;
    flex-direction: column;
}

main > * {
    margin-block: 0;
}

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

.footer-cta-wrapper {
    background-color: var(--neutral-dark);
    padding: var(--space-huge) var(--gutter);
    position: relative;
}

.footer-cta-wrapper .grit {
    object-fit: cover;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.5;
    width: 100%;
}

.footer-cta {
    margin-inline: auto;
    max-width: var(--max-wide);
    position: relative;
    z-index: 2;
    text-align: center;
}

.footer-cta-title {
    color: var(--accent);
}
.footer-cta-icon {
    margin-inline: auto;
    width: var(--space-huge) !important;
}

.footer-cta-lede {
    color: white;
    max-width: var(--max-narrow);
    margin-inline: auto;
}
.footer-cta-lede a {
    color: white;
}


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

.site-footer-wrap {
    background-color: var(--neutral);
    display: grid;
    padding: var(--space-xxl) var(--gutter) var(--space-sm) var(--gutter);
}

.site-footer-wrap > * {
    margin-inline: auto;
    max-width: var(--max-wide);
    width: 100%;
}

.site-footer {
    color: var(--secondary-bdr);
    display: grid;
    column-gap: var(--space-base);
    row-gap: var(--space-xl);
    text-align: center;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
}

.site-footer h3 {
    font-size: var(--text-lg);
    margin: 0;
}

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

.site-footer-social {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.site-footer-social a {
    text-decoration: none;
}

.site-footer-social svg {
    width: var(--space-xl);
    height: var(--space-xl);
}

.site-footer-meta {
    color: var(--secondary-bdr);
    display: flex;
    gap: var(--space-xs) var(--space-base);
    flex-wrap: wrap;
    justify-content: space-between;
    opacity: 0.7;
    margin-top: var(--space-xl);
}
.site-footer-meta a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.footer-contact {
    text-align: center;
}

.footer-address-list {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    column-gap: var(--space-lg);
    gap: var(--space-base);
}

.footer-address-list > * {
    min-width: 10rem;
}

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

.site-footer-copy {
    align-items: center;
    background-color: rgba(0,0,0,0.06);
    border-radius: var(--radius-sm);
    color: var(--secondary-bdr);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-base);
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    padding: var(--space-sm);
}

.site-footer-copy img {
    margin-inline: auto;
}

@media screen and (min-width: 36rem) {
    .site-footer-copy {
        flex-wrap: nowrap;
    }
}

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

main > .row:first-of-type {
    /* padding-top: calc(2 * var(--space-xxl)); */
}

main > .row:last-of-type {
    /* padding-bottom: calc(2 * var(--space-xxl)); */
}

.row {
    --bg: transparent;
    background-color: var(--bg);
    /* border: 1px dashed salmon; */
    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.divider-above::before,
.row.divider-below::after {
    content: '';
    background-color: var(--secondary-bdr);
    margin-inline: auto;
    height: 1px;
    opacity: 0.5;
    left: 0; right: 0;
    position: absolute;
}

.row.divider-above::before {
    top: 0;
}
.row.divider-below::after {
    bottom: 0;
}


.row-bg-image {
    border-radius: 0;
    filter: opacity(1) brightness(0.35) contrast(0.9) saturate(1.4);
    height: 100%;
    left: 0; top: 0; bottom: 0; right: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.row.has-bg-image               { background-color: var(--secondary-dark); color: white; }
.row.has-bg-image a             { color: inherit; }
.row.has-bg-image .column > hr  { filter: invert(1); }

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

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


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

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

.column > :is(h2, h3, h4, h5, h6, .btns):not(:first-child) {
    padding-top: var(--space-sm);
}

/*--------------------------------------------------------------------------- */
/* 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: Uniform
*/

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

.uniform-errors {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    grid-column: 1 / -1;
}

.uniform-errors__item {
    background-color: rgb(255, 233, 237);
    border: 1px solid rgb(255, 189, 189);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-xs);
    max-width: var(--max-narrow);
    margin: 0 auto;
    width: 100%;
}


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

.rtbform label, .rtbform legend {
    display: block;
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
}

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

.rtbform {
    display: grid;
    gap: var(--space-base);
    text-align: left;
    grid-template-areas:
    "ctaform-name"
    "ctaform-email"
    "ctaform-phone"
    "ctaform-msg"
    "ctaform-math"
    "ctaform-btn"
    "ctaform-footer"
    ;
}

.rtbform.rtbform--block {
    background-color: var(--secondary-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--secondary-bdr);
    padding: var(--space-md);
}

.rtbform.rtbform--cta {
    color: white;
    margin: var(--space-lg) auto 0 auto;
    max-width: var(--max-narrow);
}

.rtbform.rtbform--cta label {
    color: var(--accent);
}

.form-row--name {
    grid-area: ctaform-name;
}
.form-row--email {
    grid-area: ctaform-email;
}
.form-row--phone {
    grid-area: ctaform-phone;
}
.form-row--msg {
    grid-area: ctaform-msg;
}
.form-row--math {
    grid-area: ctaform-math;
}
.form-row--btn {
    align-self: end;
    grid-area: ctaform-btn;
}
.form-row--footer {
    color: var(--neutral-mid);
    grid-area: ctaform-footer;
}

.form-row--footer {
    font-size: var(--text-sm);
    margin-top: var(--space-lg);
    text-align: center;
}

.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-radius: var(--radius-xs);
    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 .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;
    appearance: none;
    background: var(--white);
    border-radius: var(--radius-xs);
    border: 1px solid var(--neutral-mid);
    display: block;
    font-family: 'font-primary';
    font-weight: 400;
    font-size: var(--text-base);
    height: auto;
    line-height: 1.25;
    margin: 0;
    padding: var(--space-xs) var(--space-xs);
    width: 100%;
    box-shadow: none;
}
.rtbform textarea {
    min-height: var(--space-huge);
}

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

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

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'font-secondary';
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

h3, h4, h5 h6 {
    font-weight: 500;
}

/*--------------------------------------------------------------------------- */
/* 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: Details/Disclosures
*/

summary {
    cursor: pointer;
    list-style: none;
}
summary::-webkit-details-marker {
    display: none;
}

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

.disclosure {
    background-color: var(--secondary-bg);
    border: 1px solid var(--secondary-bdr);
    border-radius: var(--radius-sm);
}

.disclosure-q {
    padding: var(--space-base);
    padding-left: var(--space-xl);
    position: relative;
}

.disclosure-q::before {
    color: var(--accent-dark);
    content: '+ ';
    font-weight: 650;
    font-size: var(--text-lg);
    position: absolute;
    line-height: 1;
    left: var(--space-base);
}

.disclosure[open=""] {
    background-color: white;
}

.disclosure[open=""] .disclosure-q::before {
    content: '- '
}

.disclosure-a {
    align-items: start;
    display: grid;
    gap: var(--space-sm);
    padding: 0 var(--space-base) var(--space-base) var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Grit
*/

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

figure > figcaption {
    font-size: var(--space-sm);
    font-weight: 700;
    padding: var(--space-xs);
}

img {
    border-radius: var(--radius-sm);
}

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

a {
    color: var(--neutral-dark);
}

a:hover {
    color: var(--accent-dark);
}

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

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

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

blockquote {
    border: 1px solid var(--accent-light);
    background-color: var(--accent-bg);
    border-radius: var(--radius-xs);
    padding: var(--space-base);
    font-weight: 450;
    color: var(--neutral);
    font-size: var(--text-md);
}
    blockquote footer {
        color: var(--accent);
        margin-top: var(--space-sm);
        font-weight: 600;
        font-style: normal;
        font-size: var(--text-sm);  
    }
        blockquote footer a {
            color: var(--accent);
        }
        blockquote footer::before {
            content: ' — ';
        }  

.book-quote {
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    padding: var(--text-xl);
    position: relative;
}
    .book-quote > * {
        position: relative;
        z-index: 2;
    }
    .book-quote::after {
        content: '';
        border: 1px solid var(--accent-light);
        border-radius: var(--radius-xs);
        position: absolute;
        inset: var(--space-xs);
        z-index: 1;
    }


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


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

.btn {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--accent-dark);
    background-image: linear-gradient(to bottom right, var(--accent-mid), var(--accent-dark));
    border: 0;
    border-bottom: 1px solid var(--accent-dark);
    border-radius: var(--radius-xs);
    /* box-shadow: 0 0.25em 2em var(--accent-light); */
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
    outline: 1px solid transparent;
    padding: 0.75em 2em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px var(--accent-dark);
    transition: all 0.2s ease-in-out; 
}
    .btn::after {
        content: '';
        border: 1px solid var(--accent-light);
        opacity: 0.5;
        border-radius: 2px;
        top: 0.2em; bottom: 0.2em; right: 0.2em; left: 0.2em;
        position: absolute;
        transition: all 0.3s ease-in-out;
    }
    .btn:hover {
        color: white;
        outline-color: var(--accent);
    }
    .btn:hover::after {
        border-color: transparent
    }
    .btn:active {
        background: var(--accent);
    }

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

.post-blocks {
    gap: var(--space-base);
}


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

.line-block {
    background-color: transparent;
    border: 1px solid var(--secondary-bdr);
    border-left: 0; border-right: 0;
    height: 8px;
    position: relative;
}

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


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

.portal {
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
}

* + .portal {
    margin-top: var(--space-base);
}

/* li element */
.portal-item {
    background-color: white;
    border: 1px solid var(--secondary-light);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    text-align: left;
}

.portal-item:hover {
    outline: var(--space-tiny) solid var(--accent);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 2;
}

.portal-item-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
    width: 100%;
}

.portal-item-lede {
    font-size: var(--text-sm);
    font-weight: 450;
}

.portal-item-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    height: 100%;
    padding: var(--space-md);
    text-decoration: none;
}
@container (width >= 32rem) {
    .portal-item-link {
        flex-direction: row;
    }
    .portal-item-img {
        aspect-ratio: 1;
        object-fit: cover;
        min-width: calc( 2 * var(--space-huge) );
        width: calc( 2 *  var(--space-huge) );
    }
}
.portal-item-link > * {
    margin-block: 0;
}
.portal-item-label {
    align-self: flex-end;
    font-size: var(--text-sm);
    margin-top: auto;
    font-weight: 600;
    text-align: right;
}
.portal-item-img {
    border-radius: var(--radius-xs);
    width: 100%;
}

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

.lede-block {
    font-size: var(--text-md);
}
.lede-block > * {
    max-width: 60ch;
    width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Eyebrow Block
*/

.eyebrow-block {
    color: var(--neutral-mid);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    padding-top: var(--space-base);
    position: relative;
    text-wrap: balance;
    text-transform: uppercase;
}
.eyebrow-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--space-huge);
    height: 1px;
    background-color: var(--secondary-bdr);
}
.columns.text-center .eyebrow-block::before {
    left: 50%;
    margin-left: calc(-0.5 * var(--space-huge));
}

.row.has-bg-image .eyebrow-block {
    color: var(--accent)
}
.row.has-bg-image .eyebrow-block::before {
    background-color: currentColor;
}


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

.blurbs-block {
    display: grid;
    gap: var(--space-xs);
}
    .blurbs-block .blurb {
        background-color: var(--secondary-light);
        border: 1px solid var(--secondary-bdr);
        border-radius: var(--radius-sm);
        display: grid;
        padding: var(--space-md);
        gap: var(--space-sm);
        width: 100%;
    }
        .blurbs-block .blurb > * {
            width: 100%;
        }
        .blurbs-block .blurb .heading {
            align-items: end;
            display: flex;
            font-size: var(--text-lg);
            gap: var(--space-sm);
        }
        .blurbs-block .blurb .text {
            font-size: var(--text-sm);
        }
        .blurbs-block .blurb .svg {
            width: var(--space-xl);
            height: var(--space-xl);
        }


/*--------------------------------------------------------------------------- */
/* MARK: (Program) Session Details Block
*/

.details-block .details {
    border-top: 0;
    container-type: inline-size;
    list-style: none;
    padding: 0;
}

.details-block .details > li {
    align-items: start;
    border-bottom: 1px solid var(--secondary-bdr);
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-sm);
    padding: var(--space-xs) 0;
}
.details-block .details > li:first-child {
    border-top: 1px solid var(--secondary-bdr);
}
.details-block .details .key {
    font-size: var(--text-sm);
    font-weight: 500;
    min-width: 6rem;
    padding: 1px 0;
    width: 100%;
}
.details-block .details .value {    
    width: 100%;
}
.details-block .details details[open=""] summary::after {
    content: "×"
}
.details-block .details summary {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    justify-content: space-between;
}
.details-block .details summary::after {
    font-weight: 700;
    content: '•••';
    min-width: 1.5rem;
    width: 1.5rem;
    text-align: center;
}
.details-block .details .copy {
    display: grid;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
}

@container (width >= 36rem) {
    .details-block .details > li {
        flex-wrap: nowrap;
    }
    .details-block .details .key {
        width: auto;
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Icon Block
*/

.svg-icon > svg {
    max-height: var(--space-xxl);
    max-width: var(--space-xxl);
}


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

.block-image {
    background-color: var(--neutral-bg);
}

.block-img {
    aspect-ratio: var(--ratio);
    object-fit: contain;
}

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

.block-video > * {
    width: 100%;
}
.block-video > iframe {
    background-color: var(--secondary-light);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    aspect-ratio: 16/9;
}


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

figure[data-ratio=""] img {
    object-fit: contain;
    width: 100%;
}

figure[data-crop=""][data-ratio=""] img {
    object-fit: cover;
    width: 100%;
}

figcaption {
    font-style: italic;
    margin-top: 0.5rem;
    text-align: center;
}

figcaption em {
    font-style: normal;
}



/* -------------------------------------------------------------------------- */
/* MARK: Gallery Block
*/

.gallery__ul {
    --galleryGap: 1rem;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--galleryGap);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.gallery__li {
    --itemsPerRow: 1;
    --itemWidth: calc(100% / var(--itemsPerRow));
    --itemGap: calc(( var(--galleryGap) * (var(--itemsPerRow) - 1) / var(--itemsPerRow) ));
    width: calc( var(--itemWidth) - var(--itemGap));
}

/*--------------------------------------------------------------------------- */
/* MARK: Sponsors
*/

* + .sponsors-supporters {
    margin-top: var(--space-base);
}
.sponsors-supporters {
    container-type: inline-size;
    display: grid;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
}
.sponsors-supporters.sponsors > .item {
    border-radius: var(--radius-sm);
    background-color: var(--accent-bg);
    padding: var(--space-md);
}
.sponsors-supporters.supporters > .item {
    border-radius: var(--radius-sm);
    background-color: var(--neutral-bg);
    padding: var(--space-md);
}
.sponsors-supporters.supporters .name {
    font-size: var(--text-md);
}
.sponsors-supporters.supporters .copy {
    font-size: var(--text-sm);
}
.sponsors-supporters.supporters .logo {
    max-width: 10rem;
}
.sponsors-supporters > .item {
    container-type: inline-size;
}
.sponsors-supporters .wrap {
    align-content: start;
    display: grid;
    gap: var(--space-base);
}
.sponsors-supporters .logo {
    background-color: white;
    aspect-ratio: 1;
    object-fit: contain;
    max-width: 12rem;
    padding: var(--space-xs);
    width: 100%;
}
.sponsors-supporters .copy {
    align-content: start;
    display: grid;
    gap: var(--space-sm);
}
@media screen and (min-width: 50rem) {
    .sponsors-supporters {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width: 75rem) {
    .sponsors-supporters.supporters {
        grid-template-columns: repeat(3, 1fr);

    }
}
@container (width >= 36rem) {
    .sponsors-supporters .wrap.has-logo {
        grid-template-columns: 1fr 2fr;
    }
    .sponsors-supporters .wrap.has-logo .logo {
        max-width: none;
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Blog Posts
*/

.post-bio {
    align-items: center;
    background-color: var(--accent-light);
    display: grid;
    gap: var(--space-base);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
}
.post-bio .copy {
    display: grid;
    gap: var(--space-xs);
}
@media screen and (min-width: 36rem) {
    .post-bio.has-avatar {
        grid-template-columns: 1fr 1fr;
    }
    .post-bio.has-avatar img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }
}
@media screen and (min-width: 50rem) {
    .post-bio.has-avatar {
        grid-template-columns: 2fr 1fr;
    }
}
@media screen and (min-width: 60rem) {
    .post-bio.has-avatar {
        grid-template-columns: 3fr 1fr;
    }
}

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

.noise {
    background-image: url(/assets/img/noise.svg);
    background-size: 30rem;
}


.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-narrow                     { max-width: var(--max-narrow); }
.max-content                    { max-width: var(--max-content); }
.max-wide                       { max-width: var(--max-wide); }

#top-link	{
	background-color: var(--neutral-dark);
    border: 1px solid var(--neutral);
	border-radius: 0;
	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;
	transition: background-color 0.3s ease-in-out;
    opacity: 0.8;
	width: 42px;
	z-index: 100;
}

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